sync with bolt.diy

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,4 +1,4 @@
-name: "Bug report"
+name: 'Bug report'
 description: Create a report to help us improve
 body:
   - type: markdown

.github/ISSUE_TEMPLATE/epic.md

@@ -19,5 +19,5 @@ Usual values: Software Developers using the IDE | Contributors -->
 
 # Capabilities
 
-<!-- which existing capabilities or future features can be imagined that belong to this epic? This list serves as illustration to sketch the boundaries of this epic. 
+<!-- which existing capabilities or future features can be imagined that belong to this epic? This list serves as illustration to sketch the boundaries of this epic.
 Once features are actually being planned / described in detail, they can be linked here. -->

.github/ISSUE_TEMPLATE/feature.md

@@ -13,13 +13,13 @@ assignees: ''
 
 # Scope
 
-<!-- This is kind-of the definition-of-done for a feature. 
+<!-- This is kind-of the definition-of-done for a feature.
 Try to keep the scope as small as possible and prefer creating multiple, small features which each solve a single problem / make something better
 -->
 
 # Options
- 
-<!-- If you already have an idea how this can be implemented, please describe it here. 
+
+<!-- If you already have an idea how this can be implemented, please describe it here.
 This allows potential other contributors to join forces and provide meaningful feedback prio to even starting work on it.
 -->
 

.github/workflows/docker.yaml

@@ -1,14 +1,11 @@
----
 name: Docker Publish
 
 on:
-  workflow_dispatch:
   push:
     branches:
       - main
-    tags:
-      - v*
-      - "*"
+      - stable
+  workflow_dispatch:
 
 permissions:
   packages: write
@@ -16,66 +13,49 @@ permissions:
 
 env:
   REGISTRY: ghcr.io
-  DOCKER_IMAGE: ghcr.io/${{ github.repository }}
-  BUILD_TARGET: bolt-ai-production # bolt-ai-development
+  IMAGE_NAME: ${{ github.repository }}
 
 jobs:
   docker-build-publish:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
+      - name: Checkout code
         uses: actions/checkout@v4
 
-      - id: string
-        uses: ASzc/change-string-case-action@v6
-        with:
-          string: ${{ env.DOCKER_IMAGE }}
-
-      - name: Docker meta
-        id: meta
-        uses: crazy-max/ghaction-docker-meta@v5
-        with:
-          images: ${{ steps.string.outputs.lowercase }}
-          flavor: |
-            latest=true
-            prefix=
-            suffix=
-          tags: |
-            type=semver,pattern={{version}}
-            type=pep440,pattern={{version}}
-            type=ref,event=tag
-            type=raw,value={{sha}}
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
 
-      - name: Login to Container Registry
+      - name: Log in to GitHub Container Registry
         uses: docker/login-action@v3
         with:
           registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }} # ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.GITHUB_TOKEN }} # ${{ secrets.DOCKER_PASSWORD }} 
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata for Docker image
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
 
-      - name: Build and push
+      - name: Build and push Docker image for main
+        if: github.ref == 'refs/heads/main'
         uses: docker/build-push-action@v6
         with:
           context: .
-          file: ./Dockerfile
-          target: ${{ env.BUILD_TARGET }}
-          platforms: linux/amd64,linux/arm64
           push: true
-          tags: ${{ steps.meta.outputs.tags }}
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
+            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}
           labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=registry,ref=${{ steps.string.outputs.lowercase }}:latest
-          cache-to: type=inline
 
-      - name: Check manifest
-        run: |
-          docker buildx imagetools inspect ${{ steps.string.outputs.lowercase }}:${{ steps.meta.outputs.version }}
-
-      - name: Dump context
-        if: always()
-        uses: crazy-max/ghaction-dump-context@v2
+      - name: Build and push Docker image for stable
+        if: github.ref == 'refs/heads/stable'
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:stable
+            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/docs.yaml

@@ -5,7 +5,7 @@ on:
     branches:
       - main
     paths:
-      - 'docs/**'  # This will only trigger the workflow when files in docs directory change
+      - 'docs/**' # This will only trigger the workflow when files in docs directory change
 permissions:
   contents: write
 jobs:
@@ -23,7 +23,7 @@ jobs:
       - uses: actions/setup-python@v5
         with:
           python-version: 3.x
-      - run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV 
+      - run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV
       - uses: actions/cache@v4
         with:
           key: mkdocs-material-${{ env.cache_id }}
@@ -32,4 +32,4 @@ jobs:
             mkdocs-material-
 
       - run: pip install mkdocs-material
-      - run: mkdocs gh-deploy --force 
+      - run: mkdocs gh-deploy --force

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

@@ -9,10 +9,10 @@ on:
 jobs:
   validate:
     runs-on: ubuntu-latest
-    
+
     steps:
       - uses: actions/checkout@v4
-      
+
       - name: Validate PR Labels
         run: |
           if [[ "${{ contains(github.event.pull_request.labels.*.name, 'stable-release') }}" == "true" ]]; then
@@ -28,4 +28,4 @@ jobs:
             fi
           else
             echo "This PR doesn't have the stable-release label. No release will be created." 
-          fi
+          fi

.github/workflows/semantic-pr.yaml

@@ -29,4 +29,4 @@ jobs:
             docs
             refactor
             revert
-            test
+            test

.github/workflows/stale.yml

@@ -2,8 +2,8 @@ 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
+    - cron: '0 2 * * *' # Runs daily at 2:00 AM UTC
+  workflow_dispatch: # Allows manual triggering of the workflow
 
 jobs:
   stale:
@@ -14,12 +14,12 @@ jobs:
         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
+          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/update-stable.yml

@@ -7,12 +7,12 @@ on:
 
 permissions:
   contents: write
-  
+
 jobs:
   prepare-release:
     if: contains(github.event.head_commit.message, '#release')
     runs-on: ubuntu-latest
-    
+
     steps:
       - uses: actions/checkout@v4
         with:
@@ -80,7 +80,6 @@ jobs:
           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
 
@@ -89,14 +88,14 @@ jobs:
         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
@@ -120,7 +119,9 @@ jobs:
           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 "${{ steps.changelog.outputs.content }}" \
-            --target stable
+            --notes-file release_notes.md \
+            --target stable

.gitignore

@@ -40,4 +40,8 @@ site
 
 # commit file ignore
 app/commit.json
-messages.json
+messages.json
+changelogUI.md
+docs/instructions/Roadmap.md
+.cursorrules
+*.md

.tool-versions

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

CONTRIBUTING.md

@@ -6,15 +6,15 @@ Welcome! This guide provides all the details you need to contribute effectively
 
 ## 📋 Table of Contents
 
-1. [Code of Conduct](#code-of-conduct)  
-2. [How Can I Contribute?](#how-can-i-contribute)  
-3. [Pull Request Guidelines](#pull-request-guidelines)  
-4. [Coding Standards](#coding-standards)  
-5. [Development Setup](#development-setup)  
-6. [Testing](#testing)  
-7. [Deployment](#deployment)  
-8. [Docker Deployment](#docker-deployment)  
-9. [VS Code Dev Containers Integration](#vs-code-dev-containers-integration)  
+1. [Code of Conduct](#code-of-conduct)
+2. [How Can I Contribute?](#how-can-i-contribute)
+3. [Pull Request Guidelines](#pull-request-guidelines)
+4. [Coding Standards](#coding-standards)
+5. [Development Setup](#development-setup)
+6. [Testing](#testing)
+7. [Deployment](#deployment)
+8. [Docker Deployment](#docker-deployment)
+9. [VS Code Dev Containers Integration](#vs-code-dev-containers-integration)
 
 ---
 
@@ -27,60 +27,67 @@ This project is governed by our **Code of Conduct**. By participating, you agree
 ## 🛠️ How Can I Contribute?
 
 ### 1️⃣ Reporting Bugs or Feature Requests
+
 - Check the [issue tracker](#) to avoid duplicates.
-- Use issue templates (if available).  
+- Use issue templates (if available).
 - Provide detailed, relevant information and steps to reproduce bugs.
 
 ### 2️⃣ Code Contributions
-1. Fork the repository.  
-2. Create a feature or fix branch.  
-3. Write and test your code.  
+
+1. Fork the repository.
+2. Create a feature or fix branch.
+3. Write and test your code.
 4. Submit a pull request (PR).
 
-### 3️⃣ Join as a Core Contributor  
+### 3️⃣ Join as a Core Contributor
+
 Interested in maintaining and growing the project? Fill out our [Contributor Application Form](https://forms.gle/TBSteXSDCtBDwr5m7).
 
 ---
 
 ## ✅ Pull Request Guidelines
 
-### PR Checklist  
-- Branch from the **main** branch.  
-- Update documentation, if needed.  
-- Test all functionality manually.  
-- Focus on one feature/bug per PR.  
+### PR Checklist
 
-### Review Process  
-1. Manual testing by reviewers.  
-2. At least one maintainer review required.  
-3. Address review comments.  
+- Branch from the **main** branch.
+- Update documentation, if needed.
+- Test all functionality manually.
+- Focus on one feature/bug per PR.
+
+### Review Process
+
+1. Manual testing by reviewers.
+2. At least one maintainer review required.
+3. Address review comments.
 4. Maintain a clean commit history.
 
 ---
 
 ## 📏 Coding Standards
 
-### General Guidelines  
-- Follow existing code style.  
-- Comment complex logic.  
-- Keep functions small and focused.  
+### General Guidelines
+
+- Follow existing code style.
+- Comment complex logic.
+- Keep functions small and focused.
 - Use meaningful variable names.
 
 ---
 
 ## 🖥️ Development Setup
 
-### 1️⃣ Initial Setup  
-- Clone the repository:  
+### 1️⃣ Initial Setup
+
+- Clone the repository:
   ```bash
   git clone https://github.com/stackblitz-labs/bolt.diy.git
   ```
-- Install dependencies:  
+- Install dependencies:
   ```bash
   pnpm install
   ```
-- Set up environment variables:  
-  1. Rename `.env.example` to `.env.local`.  
+- Set up environment variables:
+  1. Rename `.env.example` to `.env.local`.
   2. Add your API keys:
      ```bash
      GROQ_API_KEY=XXX
@@ -88,23 +95,26 @@ Interested in maintaining and growing the project? Fill out our [Contributor App
      OPENAI_API_KEY=XXX
      ...
      ```
-  3. Optionally set:  
-     - Debug level: `VITE_LOG_LEVEL=debug`  
-     - Context size: `DEFAULT_NUM_CTX=32768`  
+  3. Optionally set:
+     - Debug level: `VITE_LOG_LEVEL=debug`
+     - Context size: `DEFAULT_NUM_CTX=32768`
 
 **Note**: Never commit your `.env.local` file to version control. It’s already in `.gitignore`.
 
-### 2️⃣ Run Development Server  
+### 2️⃣ Run Development Server
+
 ```bash
 pnpm run dev
 ```
+
 **Tip**: Use **Google Chrome Canary** for local testing.
 
 ---
 
 ## 🧪 Testing
 
-Run the test suite with:  
+Run the test suite with:
+
 ```bash
 pnpm test
 ```
@@ -113,10 +123,12 @@ pnpm test
 
 ## 🚀 Deployment
 
-### Deploy to Cloudflare Pages  
+### Deploy to Cloudflare Pages
+
 ```bash
 pnpm run deploy
 ```
+
 Ensure you have required permissions and that Wrangler is configured.
 
 ---
@@ -127,67 +139,76 @@ This section outlines the methods for deploying the application using Docker. Th
 
 ---
 
-### 🧑‍💻 Development Environment  
+### 🧑‍💻 Development Environment
 
-#### Build Options  
+#### Build Options
+
+**Option 1: Helper Scripts**
 
-**Option 1: Helper Scripts**  
 ```bash
 # Development build
 npm run dockerbuild
 ```
 
-**Option 2: Direct Docker Build Command**  
+**Option 2: Direct Docker Build Command**
+
 ```bash
 docker build . --target bolt-ai-development
 ```
 
-**Option 3: Docker Compose Profile**  
+**Option 3: Docker Compose Profile**
+
 ```bash
 docker compose --profile development up
 ```
 
-#### Running the Development Container  
+#### Running the Development Container
+
 ```bash
 docker run -p 5173:5173 --env-file .env.local bolt-ai:development
 ```
 
 ---
 
-### 🏭 Production Environment  
+### 🏭 Production Environment
+
+#### Build Options
 
-#### Build Options  
+**Option 1: Helper Scripts**
 
-**Option 1: Helper Scripts**  
 ```bash
 # Production build
 npm run dockerbuild:prod
 ```
 
-**Option 2: Direct Docker Build Command**  
+**Option 2: Direct Docker Build Command**
+
 ```bash
 docker build . --target bolt-ai-production
 ```
 
-**Option 3: Docker Compose Profile**  
+**Option 3: Docker Compose Profile**
+
 ```bash
 docker compose --profile production up
 ```
 
-#### Running the Production Container  
+#### Running the Production Container
+
 ```bash
 docker run -p 5173:5173 --env-file .env.local bolt-ai:production
 ```
 
 ---
 
-### Coolify Deployment  
+### Coolify Deployment
+
+For an easy deployment process, use [Coolify](https://github.com/coollabsio/coolify):
 
-For an easy deployment process, use [Coolify](https://github.com/coollabsio/coolify):  
-1. Import your Git repository into Coolify.  
-2. Choose **Docker Compose** as the build pack.  
-3. Configure environment variables (e.g., API keys).  
-4. Set the start command:  
+1. Import your Git repository into Coolify.
+2. Choose **Docker Compose** as the build pack.
+3. Configure environment variables (e.g., API keys).
+4. Set the start command:
    ```bash
    docker compose --profile production up
    ```
@@ -200,20 +221,22 @@ The `docker-compose.yaml` configuration is compatible with **VS Code Dev Contain
 
 ### Steps to Use Dev Containers
 
-1. Open the command palette in VS Code (`Ctrl+Shift+P` or `Cmd+Shift+P` on macOS).  
-2. Select **Dev Containers: Reopen in Container**.  
-3. Choose the **development** profile when prompted.  
+1. Open the command palette in VS Code (`Ctrl+Shift+P` or `Cmd+Shift+P` on macOS).
+2. Select **Dev Containers: Reopen in Container**.
+3. Choose the **development** profile when prompted.
 4. VS Code will rebuild the container and open it with the pre-configured environment.
 
 ---
 
 ## 🔑 Environment Variables
 
-Ensure `.env.local` is configured correctly with:  
-- API keys.  
-- Context-specific configurations.  
+Ensure `.env.local` is configured correctly with:
+
+- API keys.
+- Context-specific configurations.
+
+Example for the `DEFAULT_NUM_CTX` variable:
 
-Example for the `DEFAULT_NUM_CTX` variable:  
 ```bash
 DEFAULT_NUM_CTX=24576 # Uses 32GB VRAM
-```
+```

FAQ.md

@@ -12,6 +12,7 @@ For the best experience with bolt.diy, we recommend using the following models:
 - **Qwen 2.5 Coder 32b**: Best model for self-hosting with reasonable hardware requirements
 
 **Note**: Models with less than 7b parameters typically lack the capability to properly interact with bolt!
+
 </details>
 
 <details>
@@ -21,20 +22,21 @@ For the best experience with bolt.diy, we recommend using the following models:
   Mention the frameworks or libraries you want to use (e.g., Astro, Tailwind, ShadCN) in your initial prompt. This ensures that bolt.diy scaffolds the project according to your preferences.
 
 - **Use the enhance prompt icon**:  
-  Before sending your prompt, click the *enhance* icon to let the AI refine your prompt. You can edit the suggested improvements before submitting.
+  Before sending your prompt, click the _enhance_ icon to let the AI refine your prompt. You can edit the suggested improvements before submitting.
 
 - **Scaffold the basics first, then add features**:  
   Ensure the foundational structure of your application is in place before introducing advanced functionality. This helps bolt.diy establish a solid base to build on.
 
 - **Batch simple instructions**:  
-  Combine simple tasks into a single prompt to save time and reduce API credit consumption. For example:  
-  *"Change the color scheme, add mobile responsiveness, and restart the dev server."*
+ Combine simple tasks into a single prompt to save time and reduce API credit consumption. For example:  
+ _"Change the color scheme, add mobile responsiveness, and restart the dev server."_
 </details>
 
 <details>
 <summary><strong>How do I contribute to bolt.diy?</strong></summary>
 
 Check out our [Contribution Guide](CONTRIBUTING.md) for more details on how to get involved!
+
 </details>
 
 <details>
@@ -42,48 +44,60 @@ Check out our [Contribution Guide](CONTRIBUTING.md) for more details on how to g
 
 Visit our [Roadmap](https://roadmap.sh/r/ottodev-roadmap-2ovzo) for the latest updates.  
 New features and improvements are on the way!
+
 </details>
 
 <details>
 <summary><strong>Why are there so many open issues/pull requests?</strong></summary>
 
-bolt.diy began as a small showcase project on @ColeMedin's YouTube channel to explore editing open-source projects with local LLMs. However, it quickly grew into a massive community effort!  
+bolt.diy began as a small showcase project on @ColeMedin's YouTube channel to explore editing open-source projects with local LLMs. However, it quickly grew into a massive community effort!
 
 We're forming a team of maintainers to manage demand and streamline issue resolution. The maintainers are rockstars, and we're also exploring partnerships to help the project thrive.
+
 </details>
 
 <details>
 <summary><strong>How do local LLMs compare to larger models like Claude 3.5 Sonnet for bolt.diy?</strong></summary>
 
 While local LLMs are improving rapidly, larger models like GPT-4o, Claude 3.5 Sonnet, and DeepSeek Coder V2 236b still offer the best results for complex applications. Our ongoing focus is to improve prompts, agents, and the platform to better support smaller local LLMs.
+
 </details>
 
 <details>
 <summary><strong>Common Errors and Troubleshooting</strong></summary>
 
 ### **"There was an error processing this request"**
+
 This generic error message means something went wrong. Check both:
+
 - The terminal (if you started the app with Docker or `pnpm`).
-- The developer console in your browser (press `F12` or right-click > *Inspect*, then go to the *Console* tab).
+- The developer console in your browser (press `F12` or right-click > _Inspect_, then go to the _Console_ tab).
 
 ### **"x-api-key header missing"**
+
 This error is sometimes resolved by restarting the Docker container.  
 If that doesn't work, try switching from Docker to `pnpm` or vice versa. We're actively investigating this issue.
 
 ### **Blank preview when running the app**
+
 A blank preview often occurs due to hallucinated bad code or incorrect commands.  
 To troubleshoot:
+
 - Check the developer console for errors.
 - Remember, previews are core functionality, so the app isn't broken! We're working on making these errors more transparent.
 
 ### **"Everything works, but the results are bad"**
+
 Local LLMs like Qwen-2.5-Coder are powerful for small applications but still experimental for larger projects. For better results, consider using larger models like GPT-4o, Claude 3.5 Sonnet, or DeepSeek Coder V2 236b.
 
 ### **"Received structured exception #0xc0000005: access violation"**
+
 If you are getting this, you are probably on Windows. The fix is generally to update the [Visual C++ Redistributable](https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?view=msvc-170)
 
 ### **"Miniflare or Wrangler errors in Windows"**
+
 You will need to make sure you have the latest version of Visual Studio C++ installed (14.40.33816), more information here https://github.com/stackblitz-labs/bolt.diy/issues/19.
+
 </details>
 
 ---

PROJECT.md

@@ -31,7 +31,7 @@ and this way communicate where the focus currently is.
 
 2. Grouping of features
 
-By linking features with epics, we can keep them together and document *why* we invest work into a particular thing.
+By linking features with epics, we can keep them together and document _why_ we invest work into a particular thing.
 
 ## Features (mid-term)
 
@@ -41,13 +41,13 @@ function, you name it).
 However, we intentionally describe features in a more vague manner. Why? Everybody loves crisp, well-defined
 acceptance-criteria, no? Well, every product owner loves it. because he knows what he’ll get once it’s done.
 
-But: **here is no owner of this product**. Therefore, we grant *maximum flexibility to the developer contributing a feature* – so that he can bring in his ideas and have most fun implementing it.
+But: **here is no owner of this product**. Therefore, we grant _maximum flexibility to the developer contributing a feature_ – so that he can bring in his ideas and have most fun implementing it.
 
-The feature therefore tries to describe *what* should be improved but not in detail *how*.
+The feature therefore tries to describe _what_ should be improved but not in detail _how_.
 
 ## PRs as materialized features (short-term)
 
-Once a developer starts working on a feature, a draft-PR *can* be opened asap to share, describe and discuss, how the feature shall be implemented. But: this is not a must. It just helps to get early feedback and get other developers involved. Sometimes, the developer just wants to get started and then open a PR later. 
+Once a developer starts working on a feature, a draft-PR _can_ be opened asap to share, describe and discuss, how the feature shall be implemented. But: this is not a must. It just helps to get early feedback and get other developers involved. Sometimes, the developer just wants to get started and then open a PR later.
 
 In a loosely organized project, it may as well happen that multiple PRs are opened for the same feature. This is no real issue: Usually, peoply being passionate about a solution are willing to join forces and get it done together. And if a second developer was just faster getting the same feature realized: Be happy that it's been done, close the PR and look out for the next feature to implement 🤓
 

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

@@ -0,0 +1,158 @@
+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';
+
+const BetaLabel = () => (
+  <span className="px-1.5 py-0.5 rounded-full bg-purple-500/10 dark:bg-purple-500/20 text-[10px] font-medium text-purple-600 dark:text-purple-400 ml-2">
+    BETA
+  </span>
+);
+
+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:question 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">
+                  <span className="relative -top-0.5">?</span>
+                </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={() => onSelectTab('task-manager')}
+          >
+            <div className="i-ph:activity w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
+            Task Manager
+            <BetaLabel />
+          </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('service-status')}
+          >
+            <div className="i-ph:heartbeat w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
+            Service Status
+            <BetaLabel />
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};

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

@@ -0,0 +1,555 @@
+import { useState, useEffect, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useStore } from '@nanostores/react';
+import { Switch } from '@radix-ui/react-switch';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { classNames } from '~/utils/classNames';
+import { TabManagement } from '~/components/@settings/shared/components/TabManagement';
+import { TabTile } from '~/components/@settings/shared/components/TabTile';
+import { useUpdateCheck } from '~/lib/hooks/useUpdateCheck';
+import { useFeatures } from '~/lib/hooks/useFeatures';
+import { useNotifications } from '~/lib/hooks/useNotifications';
+import { useConnectionStatus } from '~/lib/hooks/useConnectionStatus';
+import { useDebugStatus } from '~/lib/hooks/useDebugStatus';
+import {
+  tabConfigurationStore,
+  developerModeStore,
+  setDeveloperMode,
+  resetTabConfiguration,
+} from '~/lib/stores/settings';
+import { profileStore } from '~/lib/stores/profile';
+import type { TabType, TabVisibilityConfig, Profile } from './types';
+import { TAB_LABELS, DEFAULT_TAB_CONFIG } 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 DebugTab from '~/components/@settings/tabs/debug/DebugTab';
+import { EventLogsTab } from '~/components/@settings/tabs/event-logs/EventLogsTab';
+import UpdateTab from '~/components/@settings/tabs/update/UpdateTab';
+import ConnectionsTab from '~/components/@settings/tabs/connections/ConnectionsTab';
+import CloudProvidersTab from '~/components/@settings/tabs/providers/cloud/CloudProvidersTab';
+import ServiceStatusTab from '~/components/@settings/tabs/providers/status/ServiceStatusTab';
+import LocalProvidersTab from '~/components/@settings/tabs/providers/local/LocalProvidersTab';
+import TaskManagerTab from '~/components/@settings/tabs/task-manager/TaskManagerTab';
+
+interface ControlPanelProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+interface TabWithDevType extends TabVisibilityConfig {
+  isExtraDevTab?: boolean;
+}
+
+interface ExtendedTabConfig extends TabVisibilityConfig {
+  isExtraDevTab?: boolean;
+}
+
+interface BaseTabConfig {
+  id: TabType;
+  visible: boolean;
+  window: 'user' | 'developer';
+  order: number;
+}
+
+interface AnimatedSwitchProps {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  id: string;
+  label: string;
+}
+
+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',
+  'service-status': 'Monitor cloud LLM service status',
+  connection: 'Check connection status and settings',
+  debug: 'Debug tools and system information',
+  'event-logs': 'View system events and logs',
+  update: 'Check for updates and release notes',
+  'task-manager': 'Monitor system resources and processes',
+  'tab-management': 'Configure visible tabs and their order',
+};
+
+// Beta status for experimental features
+const BETA_TABS = new Set<TabType>(['task-manager', 'service-status', 'update', 'local-providers']);
+
+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>
+);
+
+const AnimatedSwitch = ({ checked, onCheckedChange, id, label }: AnimatedSwitchProps) => {
+  return (
+    <div className="flex items-center gap-2">
+      <Switch
+        id={id}
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        className={classNames(
+          'relative inline-flex h-6 w-11 items-center rounded-full',
+          'transition-all duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)]',
+          'bg-gray-200 dark:bg-gray-700',
+          'data-[state=checked]:bg-purple-500',
+          'focus:outline-none focus:ring-2 focus:ring-purple-500/20',
+          'cursor-pointer',
+          'group',
+        )}
+      >
+        <motion.span
+          className={classNames(
+            'absolute left-[2px] top-[2px]',
+            'inline-block h-5 w-5 rounded-full',
+            'bg-white shadow-lg',
+            'transition-shadow duration-300',
+            'group-hover:shadow-md group-active:shadow-sm',
+            'group-hover:scale-95 group-active:scale-90',
+          )}
+          initial={false}
+          transition={{
+            type: 'spring',
+            stiffness: 500,
+            damping: 30,
+            duration: 0.2,
+          }}
+          animate={{
+            x: checked ? '1.25rem' : '0rem',
+          }}
+        >
+          <motion.div
+            className="absolute inset-0 rounded-full bg-white"
+            initial={false}
+            animate={{
+              scale: checked ? 1 : 0.8,
+            }}
+            transition={{ duration: 0.2 }}
+          />
+        </motion.span>
+        <span className="sr-only">Toggle {label}</span>
+      </Switch>
+      <div className="flex items-center gap-2">
+        <label
+          htmlFor={id}
+          className="text-sm text-gray-500 dark:text-gray-400 select-none cursor-pointer whitespace-nowrap w-[88px]"
+        >
+          {label}
+        </label>
+      </div>
+    </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 developerMode = useStore(developerModeStore);
+  const profile = useStore(profileStore) as Profile;
+
+  // Status hooks
+  const { hasUpdate, currentVersion, acknowledgeUpdate } = useUpdateCheck();
+  const { hasNewFeatures, unviewedFeatures, acknowledgeAllFeatures } = useFeatures();
+  const { hasUnreadNotifications, unreadNotifications, markAllAsRead } = useNotifications();
+  const { hasConnectionIssues, currentIssue, acknowledgeIssue } = useConnectionStatus();
+  const { hasActiveWarnings, activeIssues, acknowledgeAllIssues } = useDebugStatus();
+
+  // 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;
+
+    // In developer mode, show ALL tabs without restrictions
+    if (developerMode) {
+      const seenTabs = new Set<TabType>();
+      const devTabs: ExtendedTabConfig[] = [];
+
+      // Process tabs in order of priority: developer, user, default
+      const processTab = (tab: BaseTabConfig) => {
+        if (!seenTabs.has(tab.id)) {
+          seenTabs.add(tab.id);
+          devTabs.push({
+            id: tab.id,
+            visible: true,
+            window: 'developer',
+            order: tab.order || devTabs.length,
+          });
+        }
+      };
+
+      // Process tabs in priority order
+      tabConfiguration.developerTabs?.forEach((tab) => processTab(tab as BaseTabConfig));
+      tabConfiguration.userTabs.forEach((tab) => processTab(tab as BaseTabConfig));
+      DEFAULT_TAB_CONFIG.forEach((tab) => processTab(tab as BaseTabConfig));
+
+      // Add Tab Management tile
+      devTabs.push({
+        id: 'tab-management' as TabType,
+        visible: true,
+        window: 'developer',
+        order: devTabs.length,
+        isExtraDevTab: true,
+      });
+
+      return devTabs.sort((a, b) => a.order - b.order);
+    }
+
+    // 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, developerMode, profile?.preferences?.notifications, baseTabConfig]);
+
+  // Optimize animation performance with layout animations
+  const gridLayoutVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.05,
+        delayChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, scale: 0.8 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        type: 'spring',
+        stiffness: 200,
+        damping: 20,
+        mass: 0.6,
+      },
+    },
+  };
+
+  // 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 handleDeveloperModeChange = (checked: boolean) => {
+    console.log('Developer mode changed:', checked);
+    setDeveloperMode(checked);
+  };
+
+  // Add effect to log developer mode changes
+  useEffect(() => {
+    console.log('Current developer mode:', developerMode);
+  }, [developerMode]);
+
+  const getTabComponent = (tabId: TabType | 'tab-management') => {
+    if (tabId === 'tab-management') {
+      return <TabManagement />;
+    }
+
+    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 'connection':
+        return <ConnectionsTab />;
+      case 'debug':
+        return <DebugTab />;
+      case 'event-logs':
+        return <EventLogsTab />;
+      case 'update':
+        return <UpdateTab />;
+      case 'task-manager':
+        return <TaskManagerTab />;
+      case 'service-status':
+        return <ServiceStatusTab />;
+      default:
+        return null;
+    }
+  };
+
+  const getTabUpdateStatus = (tabId: TabType): boolean => {
+    switch (tabId) {
+      case 'update':
+        return hasUpdate;
+      case 'features':
+        return hasNewFeatures;
+      case 'notifications':
+        return hasUnreadNotifications;
+      case 'connection':
+        return hasConnectionIssues;
+      case 'debug':
+        return hasActiveWarnings;
+      default:
+        return false;
+    }
+  };
+
+  const getStatusMessage = (tabId: TabType): string => {
+    switch (tabId) {
+      case 'update':
+        return `New update available (v${currentVersion})`;
+      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 'connection':
+        return currentIssue === 'disconnected'
+          ? 'Connection lost'
+          : currentIssue === 'high-latency'
+            ? 'High latency detected'
+            : 'Connection issues detected';
+      case 'debug': {
+        const warnings = activeIssues.filter((i) => i.type === 'warning').length;
+        const errors = activeIssues.filter((i) => i.type === 'error').length;
+
+        return `${warnings} warning${warnings === 1 ? '' : 's'}, ${errors} error${errors === 1 ? '' : 's'}`;
+      }
+      default:
+        return '';
+    }
+  };
+
+  const handleTabClick = (tabId: TabType) => {
+    setLoadingTab(tabId);
+    setActiveTab(tabId);
+    setShowTabManagement(false);
+
+    // Acknowledge notifications based on tab
+    switch (tabId) {
+      case 'update':
+        acknowledgeUpdate();
+        break;
+      case 'features':
+        acknowledgeAllFeatures();
+        break;
+      case 'notifications':
+        markAllAsRead();
+        break;
+      case 'connection':
+        acknowledgeIssue();
+        break;
+      case 'debug':
+        acknowledgeAllIssues();
+        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]">
+          <RadixDialog.Overlay asChild>
+            <motion.div
+              className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+            />
+          </RadixDialog.Overlay>
+
+          <RadixDialog.Content
+            aria-describedby={undefined}
+            onEscapeKeyDown={handleClose}
+            onPointerDownOutside={handleClose}
+            className="relative z-[101]"
+          >
+            <motion.div
+              className={classNames(
+                'w-[1200px] h-[90vh]',
+                'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+                'rounded-2xl shadow-2xl',
+                'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+                'flex flex-col overflow-hidden',
+                'relative',
+              )}
+              initial={{ opacity: 0, scale: 0.95, y: 20 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.95, y: 20 }}
+              transition={{ duration: 0.2 }}
+            >
+              <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-all duration-200"
+                      >
+                        <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">
+                    {/* Mode Toggle */}
+                    <div className="flex items-center gap-2 min-w-[140px] border-r border-gray-200 dark:border-gray-800 pr-6">
+                      <AnimatedSwitch
+                        id="developer-mode"
+                        checked={developerMode}
+                        onCheckedChange={handleDeveloperModeChange}
+                        label={developerMode ? 'Developer Mode' : 'User Mode'}
+                      />
+                    </div>
+
+                    {/* Avatar and Dropdown */}
+                    <div className="border-l border-gray-200 dark:border-gray-800 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',
+                  )}
+                >
+                  <motion.div
+                    key={activeTab || 'home'}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                    className="p-6"
+                  >
+                    {showTabManagement ? (
+                      <TabManagement />
+                    ) : activeTab ? (
+                      getTabComponent(activeTab)
+                    ) : (
+                      <motion.div
+                        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 relative"
+                        variants={gridLayoutVariants}
+                        initial="hidden"
+                        animate="visible"
+                      >
+                        <AnimatePresence mode="popLayout">
+                          {(visibleTabs as TabWithDevType[]).map((tab: TabWithDevType) => (
+                            <motion.div key={tab.id} layout variants={itemVariants} className="aspect-[1.5/1]">
+                              <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>
+                            </motion.div>
+                          ))}
+                        </AnimatePresence>
+                      </motion.div>
+                    )}
+                  </motion.div>
+                </div>
+              </div>
+            </motion.div>
+          </RadixDialog.Content>
+        </div>
+      </RadixDialog.Portal>
+    </RadixDialog.Root>
+  );
+};

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

@@ -0,0 +1,88 @@
+import type { TabType } from './types';
+
+export const TAB_ICONS: Record<TabType, string> = {
+  profile: 'i-ph:user-circle-fill',
+  settings: 'i-ph:gear-six-fill',
+  notifications: 'i-ph:bell-fill',
+  features: 'i-ph:star-fill',
+  data: 'i-ph:database-fill',
+  'cloud-providers': 'i-ph:cloud-fill',
+  'local-providers': 'i-ph:desktop-fill',
+  'service-status': 'i-ph:activity-bold',
+  connection: 'i-ph:wifi-high-fill',
+  debug: 'i-ph:bug-fill',
+  'event-logs': 'i-ph:list-bullets-fill',
+  update: 'i-ph:arrow-clockwise-fill',
+  'task-manager': 'i-ph:chart-line-fill',
+  'tab-management': 'i-ph:squares-four-fill',
+};
+
+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',
+  'service-status': 'Service Status',
+  connection: 'Connection',
+  debug: 'Debug',
+  'event-logs': 'Event Logs',
+  update: 'Updates',
+  'task-manager': 'Task Manager',
+  'tab-management': 'Tab Management',
+};
+
+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',
+  'service-status': 'Monitor cloud LLM service status',
+  connection: 'Check connection status and settings',
+  debug: 'Debug tools and system information',
+  'event-logs': 'View system events and logs',
+  update: 'Check for updates and release notes',
+  'task-manager': 'Monitor system resources and processes',
+  'tab-management': 'Configure visible tabs and their order',
+};
+
+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: 'connection', visible: true, window: 'user' as const, order: 4 },
+  { id: 'notifications', visible: true, window: 'user' as const, order: 5 },
+  { id: 'event-logs', visible: true, window: 'user' as const, order: 6 },
+
+  // User Window Tabs (In dropdown, initially hidden)
+  { id: 'profile', visible: false, window: 'user' as const, order: 7 },
+  { id: 'settings', visible: false, window: 'user' as const, order: 8 },
+  { id: 'task-manager', visible: false, window: 'user' as const, order: 9 },
+  { id: 'service-status', visible: false, window: 'user' as const, order: 10 },
+
+  // User Window Tabs (Hidden, controlled by TaskManagerTab)
+  { id: 'debug', visible: false, window: 'user' as const, order: 11 },
+  { id: 'update', visible: false, window: 'user' as const, order: 12 },
+
+  // Developer Window Tabs (All visible by default)
+  { id: 'features', visible: true, window: 'developer' as const, order: 0 },
+  { id: 'data', visible: true, window: 'developer' as const, order: 1 },
+  { id: 'cloud-providers', visible: true, window: 'developer' as const, order: 2 },
+  { id: 'local-providers', visible: true, window: 'developer' as const, order: 3 },
+  { id: 'connection', visible: true, window: 'developer' as const, order: 4 },
+  { id: 'notifications', visible: true, window: 'developer' as const, order: 5 },
+  { id: 'event-logs', visible: true, window: 'developer' as const, order: 6 },
+  { id: 'profile', visible: true, window: 'developer' as const, order: 7 },
+  { id: 'settings', visible: true, window: 'developer' as const, order: 8 },
+  { id: 'task-manager', visible: true, window: 'developer' as const, order: 9 },
+  { id: 'service-status', visible: true, window: 'developer' as const, order: 10 },
+  { id: 'debug', visible: true, window: 'developer' as const, order: 11 },
+  { id: 'update', visible: true, window: 'developer' as const, order: 12 },
+];

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

@@ -0,0 +1,114 @@
+import type { ReactNode } from 'react';
+
+export type SettingCategory = 'profile' | 'file_sharing' | 'connectivity' | 'system' | 'services' | 'preferences';
+
+export type TabType =
+  | 'profile'
+  | 'settings'
+  | 'notifications'
+  | 'features'
+  | 'data'
+  | 'cloud-providers'
+  | 'local-providers'
+  | 'service-status'
+  | 'connection'
+  | 'debug'
+  | 'event-logs'
+  | 'update'
+  | 'task-manager'
+  | 'tab-management';
+
+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[];
+  developerTabs: DevTabConfig[];
+}
+
+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',
+  'service-status': 'Service Status',
+  connection: 'Connections',
+  debug: 'Debug',
+  'event-logs': 'Event Logs',
+  update: 'Updates',
+  'task-manager': 'Task Manager',
+  'tab-management': 'Tab Management',
+};
+
+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, string> = {
+  profile: 'i-ph:user-circle',
+  file_sharing: 'i-ph:folder-simple',
+  connectivity: 'i-ph:wifi-high',
+  system: 'i-ph:gear',
+  services: 'i-ph:cube',
+  preferences: 'i-ph: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,14 @@
+// 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';
+export { TabManagement } from './shared/components/TabManagement';
+
+// Utils
+export { getVisibleTabs, reorderTabs, resetToDefaultConfig } from './utils/tab-helpers';
+export * from './utils/animations';

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

@@ -0,0 +1,163 @@
+import { useDrag, useDrop } from 'react-dnd';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+import type { TabVisibilityConfig } from '~/components/@settings/core/types';
+import { TAB_LABELS } from '~/components/@settings/core/types';
+import { Switch } from '~/components/ui/Switch';
+
+interface DraggableTabListProps {
+  tabs: TabVisibilityConfig[];
+  onReorder: (tabs: TabVisibilityConfig[]) => void;
+  onWindowChange?: (tab: TabVisibilityConfig, window: 'user' | 'developer') => void;
+  onVisibilityChange?: (tab: TabVisibilityConfig, visible: boolean) => void;
+  showControls?: boolean;
+}
+
+interface DraggableTabItemProps {
+  tab: TabVisibilityConfig;
+  index: number;
+  moveTab: (dragIndex: number, hoverIndex: number) => void;
+  showControls?: boolean;
+  onWindowChange?: (tab: TabVisibilityConfig, window: 'user' | 'developer') => void;
+  onVisibilityChange?: (tab: TabVisibilityConfig, visible: boolean) => void;
+}
+
+interface DragItem {
+  type: string;
+  index: number;
+  id: string;
+}
+
+const DraggableTabItem = ({
+  tab,
+  index,
+  moveTab,
+  showControls,
+  onWindowChange,
+  onVisibilityChange,
+}: DraggableTabItemProps) => {
+  const [{ isDragging }, dragRef] = useDrag({
+    type: 'tab',
+    item: { type: 'tab', index, id: tab.id },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  const [, dropRef] = useDrop({
+    accept: 'tab',
+    hover: (item: DragItem, monitor) => {
+      if (!monitor.isOver({ shallow: true })) {
+        return;
+      }
+
+      if (item.index === index) {
+        return;
+      }
+
+      if (item.id === tab.id) {
+        return;
+      }
+
+      moveTab(item.index, index);
+      item.index = index;
+    },
+  });
+
+  const ref = (node: HTMLDivElement | null) => {
+    dragRef(node);
+    dropRef(node);
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={false}
+      animate={{
+        scale: isDragging ? 1.02 : 1,
+        boxShadow: isDragging ? '0 8px 16px rgba(0,0,0,0.1)' : 'none',
+      }}
+      className={classNames(
+        'flex items-center justify-between p-4 rounded-lg',
+        'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+        'border border-[#E5E5E5] dark:border-[#333333]',
+        isDragging ? 'z-50' : '',
+      )}
+    >
+      <div className="flex items-center gap-4">
+        <div className="cursor-grab">
+          <div className="i-ph:dots-six-vertical w-4 h-4 text-bolt-elements-textSecondary" />
+        </div>
+        <div>
+          <div className="font-medium text-bolt-elements-textPrimary">{TAB_LABELS[tab.id]}</div>
+          {showControls && (
+            <div className="text-xs text-bolt-elements-textSecondary">
+              Order: {tab.order}, Window: {tab.window}
+            </div>
+          )}
+        </div>
+      </div>
+      {showControls && !tab.locked && (
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Switch
+              checked={tab.visible}
+              onCheckedChange={(checked: boolean) => onVisibilityChange?.(tab, checked)}
+              className="data-[state=checked]:bg-purple-500"
+              aria-label={`Toggle ${TAB_LABELS[tab.id]} visibility`}
+            />
+            <label className="text-sm text-bolt-elements-textSecondary">Visible</label>
+          </div>
+          <div className="flex items-center gap-2">
+            <label className="text-sm text-bolt-elements-textSecondary">User</label>
+            <Switch
+              checked={tab.window === 'developer'}
+              onCheckedChange={(checked: boolean) => onWindowChange?.(tab, checked ? 'developer' : 'user')}
+              className="data-[state=checked]:bg-purple-500"
+              aria-label={`Toggle ${TAB_LABELS[tab.id]} window assignment`}
+            />
+            <label className="text-sm text-bolt-elements-textSecondary">Dev</label>
+          </div>
+        </div>
+      )}
+    </motion.div>
+  );
+};
+
+export const DraggableTabList = ({
+  tabs,
+  onReorder,
+  onWindowChange,
+  onVisibilityChange,
+  showControls = false,
+}: DraggableTabListProps) => {
+  const moveTab = (dragIndex: number, hoverIndex: number) => {
+    const items = Array.from(tabs);
+    const [reorderedItem] = items.splice(dragIndex, 1);
+    items.splice(hoverIndex, 0, reorderedItem);
+
+    // Update order numbers based on position
+    const reorderedTabs = items.map((tab, index) => ({
+      ...tab,
+      order: index + 1,
+    }));
+
+    onReorder(reorderedTabs);
+  };
+
+  return (
+    <div className="space-y-2">
+      {tabs.map((tab, index) => (
+        <DraggableTabItem
+          key={tab.id}
+          tab={tab}
+          index={index}
+          moveTab={moveTab}
+          showControls={showControls}
+          onWindowChange={onWindowChange}
+          onVisibilityChange={onVisibilityChange}
+        />
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,380 @@
+import { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { useStore } from '@nanostores/react';
+import { Switch } from '~/components/ui/Switch';
+import { classNames } from '~/utils/classNames';
+import { tabConfigurationStore } from '~/lib/stores/settings';
+import { TAB_LABELS } from '~/components/@settings/core/constants';
+import type { TabType } from '~/components/@settings/core/types';
+import { toast } from 'react-toastify';
+import { TbLayoutGrid } from 'react-icons/tb';
+import { useSettingsStore } from '~/lib/stores/settings';
+
+// Define tab icons mapping
+const TAB_ICONS: Record<TabType, string> = {
+  profile: 'i-ph:user-circle-fill',
+  settings: 'i-ph:gear-six-fill',
+  notifications: 'i-ph:bell-fill',
+  features: 'i-ph:star-fill',
+  data: 'i-ph:database-fill',
+  'cloud-providers': 'i-ph:cloud-fill',
+  'local-providers': 'i-ph:desktop-fill',
+  'service-status': 'i-ph:activity-fill',
+  connection: 'i-ph:wifi-high-fill',
+  debug: 'i-ph:bug-fill',
+  'event-logs': 'i-ph:list-bullets-fill',
+  update: 'i-ph:arrow-clockwise-fill',
+  'task-manager': 'i-ph:chart-line-fill',
+  'tab-management': 'i-ph:squares-four-fill',
+};
+
+// Define which tabs are default in user mode
+const DEFAULT_USER_TABS: TabType[] = [
+  'features',
+  'data',
+  'cloud-providers',
+  'local-providers',
+  'connection',
+  'notifications',
+  'event-logs',
+];
+
+// Define which tabs can be added to user mode
+const OPTIONAL_USER_TABS: TabType[] = ['profile', 'settings', 'task-manager', 'service-status', 'debug', 'update'];
+
+// All available tabs for user mode
+const ALL_USER_TABS = [...DEFAULT_USER_TABS, ...OPTIONAL_USER_TABS];
+
+// Define which tabs are beta
+const BETA_TABS = new Set<TabType>(['task-manager', 'service-status', 'update', 'local-providers']);
+
+// Beta label component
+const BetaLabel = () => (
+  <span className="px-1.5 py-0.5 text-[10px] rounded-full bg-purple-500/10 text-purple-500 font-medium">BETA</span>
+);
+
+export const TabManagement = () => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const tabConfiguration = useStore(tabConfigurationStore);
+  const { setSelectedTab } = useSettingsStore();
+
+  const handleTabVisibilityChange = (tabId: TabType, checked: boolean) => {
+    // Get current tab configuration
+    const currentTab = tabConfiguration.userTabs.find((tab) => tab.id === tabId);
+
+    // If tab doesn't exist in configuration, create it
+    if (!currentTab) {
+      const newTab = {
+        id: tabId,
+        visible: checked,
+        window: 'user' as const,
+        order: tabConfiguration.userTabs.length,
+      };
+
+      const updatedTabs = [...tabConfiguration.userTabs, newTab];
+
+      tabConfigurationStore.set({
+        ...tabConfiguration,
+        userTabs: updatedTabs,
+      });
+
+      toast.success(`Tab ${checked ? 'enabled' : 'disabled'} successfully`);
+
+      return;
+    }
+
+    // Check if tab can be enabled in user mode
+    const canBeEnabled = DEFAULT_USER_TABS.includes(tabId) || OPTIONAL_USER_TABS.includes(tabId);
+
+    if (!canBeEnabled && checked) {
+      toast.error('This tab cannot be enabled in user mode');
+      return;
+    }
+
+    // Update tab visibility
+    const updatedTabs = tabConfiguration.userTabs.map((tab) => {
+      if (tab.id === tabId) {
+        return { ...tab, visible: checked };
+      }
+
+      return tab;
+    });
+
+    // Update store
+    tabConfigurationStore.set({
+      ...tabConfiguration,
+      userTabs: updatedTabs,
+    });
+
+    // Show success message
+    toast.success(`Tab ${checked ? 'enabled' : 'disabled'} successfully`);
+  };
+
+  // Create a map of existing tab configurations
+  const tabConfigMap = new Map(tabConfiguration.userTabs.map((tab) => [tab.id, tab]));
+
+  // Generate the complete list of tabs, including those not in the configuration
+  const allTabs = ALL_USER_TABS.map((tabId) => {
+    return (
+      tabConfigMap.get(tabId) || {
+        id: tabId,
+        visible: false,
+        window: 'user' as const,
+        order: -1,
+      }
+    );
+  });
+
+  // Filter tabs based on search query
+  const filteredTabs = allTabs.filter((tab) => TAB_LABELS[tab.id].toLowerCase().includes(searchQuery.toLowerCase()));
+
+  useEffect(() => {
+    // Reset to first tab when component unmounts
+    return () => {
+      setSelectedTab('user'); // Reset to user tab when unmounting
+    };
+  }, [setSelectedTab]);
+
+  return (
+    <div className="space-y-6">
+      <motion.div
+        className="space-y-4"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between gap-4 mt-8 mb-4">
+          <div className="flex items-center gap-2">
+            <div
+              className={classNames(
+                'w-8 h-8 flex items-center justify-center rounded-lg',
+                'bg-bolt-elements-background-depth-3',
+                'text-purple-500',
+              )}
+            >
+              <TbLayoutGrid className="w-5 h-5" />
+            </div>
+            <div>
+              <h4 className="text-md font-medium text-bolt-elements-textPrimary">Tab Management</h4>
+              <p className="text-sm text-bolt-elements-textSecondary">Configure visible tabs and their order</p>
+            </div>
+          </div>
+
+          {/* Search */}
+          <div className="relative w-64">
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <div className="i-ph:magnifying-glass w-4 h-4 text-gray-400" />
+            </div>
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search tabs..."
+              className={classNames(
+                'w-full pl-10 pr-4 py-2 rounded-lg',
+                'bg-bolt-elements-background-depth-2',
+                'border border-bolt-elements-borderColor',
+                'text-bolt-elements-textPrimary',
+                'placeholder-bolt-elements-textTertiary',
+                'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
+                'transition-all duration-200',
+              )}
+            />
+          </div>
+        </div>
+
+        {/* Tab Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {/* Default Section Header */}
+          {filteredTabs.some((tab) => DEFAULT_USER_TABS.includes(tab.id)) && (
+            <div className="col-span-full flex items-center gap-2 mt-4 mb-2">
+              <div className="i-ph:star-fill w-4 h-4 text-purple-500" />
+              <span className="text-sm font-medium text-bolt-elements-textPrimary">Default Tabs</span>
+            </div>
+          )}
+
+          {/* Default Tabs */}
+          {filteredTabs
+            .filter((tab) => DEFAULT_USER_TABS.includes(tab.id))
+            .map((tab, index) => (
+              <motion.div
+                key={tab.id}
+                className={classNames(
+                  'rounded-lg border bg-bolt-elements-background text-bolt-elements-textPrimary',
+                  'bg-bolt-elements-background-depth-2',
+                  'hover:bg-bolt-elements-background-depth-3',
+                  'transition-all duration-200',
+                  'relative overflow-hidden group',
+                )}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.1 }}
+                whileHover={{ scale: 1.02 }}
+              >
+                {/* Status Badges */}
+                <div className="absolute top-1 right-1.5 flex gap-1">
+                  <span className="px-1.5 py-0.25 text-xs rounded-full bg-purple-500/10 text-purple-500 font-medium mr-2">
+                    Default
+                  </span>
+                </div>
+
+                <div className="flex items-start gap-4 p-4">
+                  <motion.div
+                    className={classNames(
+                      'w-10 h-10 flex items-center justify-center rounded-xl',
+                      'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
+                      'transition-all duration-200',
+                      tab.visible ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
+                    )}
+                    whileHover={{ scale: 1.1 }}
+                    whileTap={{ scale: 0.9 }}
+                  >
+                    <div
+                      className={classNames('w-6 h-6', 'transition-transform duration-200', 'group-hover:rotate-12')}
+                    >
+                      <div className={classNames(TAB_ICONS[tab.id], 'w-full h-full')} />
+                    </div>
+                  </motion.div>
+
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between gap-4">
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
+                            {TAB_LABELS[tab.id]}
+                          </h4>
+                          {BETA_TABS.has(tab.id) && <BetaLabel />}
+                        </div>
+                        <p className="text-xs text-bolt-elements-textSecondary mt-0.5">
+                          {tab.visible ? 'Visible in user mode' : 'Hidden in user mode'}
+                        </p>
+                      </div>
+                      <Switch
+                        checked={tab.visible}
+                        onCheckedChange={(checked) => {
+                          const isDisabled =
+                            !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id);
+
+                          if (!isDisabled) {
+                            handleTabVisibilityChange(tab.id, checked);
+                          }
+                        }}
+                        className={classNames('data-[state=checked]:bg-purple-500 ml-4', {
+                          'opacity-50 pointer-events-none':
+                            !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id),
+                        })}
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <motion.div
+                  className="absolute inset-0 border-2 border-purple-500/0 rounded-lg pointer-events-none"
+                  animate={{
+                    borderColor: tab.visible ? 'rgba(168, 85, 247, 0.2)' : 'rgba(168, 85, 247, 0)',
+                    scale: tab.visible ? 1 : 0.98,
+                  }}
+                  transition={{ duration: 0.2 }}
+                />
+              </motion.div>
+            ))}
+
+          {/* Optional Section Header */}
+          {filteredTabs.some((tab) => OPTIONAL_USER_TABS.includes(tab.id)) && (
+            <div className="col-span-full flex items-center gap-2 mt-8 mb-2">
+              <div className="i-ph:plus-circle-fill w-4 h-4 text-blue-500" />
+              <span className="text-sm font-medium text-bolt-elements-textPrimary">Optional Tabs</span>
+            </div>
+          )}
+
+          {/* Optional Tabs */}
+          {filteredTabs
+            .filter((tab) => OPTIONAL_USER_TABS.includes(tab.id))
+            .map((tab, index) => (
+              <motion.div
+                key={tab.id}
+                className={classNames(
+                  'rounded-lg border bg-bolt-elements-background text-bolt-elements-textPrimary',
+                  'bg-bolt-elements-background-depth-2',
+                  'hover:bg-bolt-elements-background-depth-3',
+                  'transition-all duration-200',
+                  'relative overflow-hidden group',
+                )}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.1 }}
+                whileHover={{ scale: 1.02 }}
+              >
+                {/* Status Badges */}
+                <div className="absolute top-1 right-1.5 flex gap-1">
+                  <span className="px-1.5 py-0.25 text-xs rounded-full bg-blue-500/10 text-blue-500 font-medium mr-2">
+                    Optional
+                  </span>
+                </div>
+
+                <div className="flex items-start gap-4 p-4">
+                  <motion.div
+                    className={classNames(
+                      'w-10 h-10 flex items-center justify-center rounded-xl',
+                      'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
+                      'transition-all duration-200',
+                      tab.visible ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
+                    )}
+                    whileHover={{ scale: 1.1 }}
+                    whileTap={{ scale: 0.9 }}
+                  >
+                    <div
+                      className={classNames('w-6 h-6', 'transition-transform duration-200', 'group-hover:rotate-12')}
+                    >
+                      <div className={classNames(TAB_ICONS[tab.id], 'w-full h-full')} />
+                    </div>
+                  </motion.div>
+
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between gap-4">
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
+                            {TAB_LABELS[tab.id]}
+                          </h4>
+                          {BETA_TABS.has(tab.id) && <BetaLabel />}
+                        </div>
+                        <p className="text-xs text-bolt-elements-textSecondary mt-0.5">
+                          {tab.visible ? 'Visible in user mode' : 'Hidden in user mode'}
+                        </p>
+                      </div>
+                      <Switch
+                        checked={tab.visible}
+                        onCheckedChange={(checked) => {
+                          const isDisabled =
+                            !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id);
+
+                          if (!isDisabled) {
+                            handleTabVisibilityChange(tab.id, checked);
+                          }
+                        }}
+                        className={classNames('data-[state=checked]:bg-purple-500 ml-4', {
+                          'opacity-50 pointer-events-none':
+                            !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id),
+                        })}
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <motion.div
+                  className="absolute inset-0 border-2 border-purple-500/0 rounded-lg pointer-events-none"
+                  animate={{
+                    borderColor: tab.visible ? 'rgba(168, 85, 247, 0.2)' : 'rgba(168, 85, 247, 0)',
+                    scale: tab.visible ? 1 : 0.98,
+                  }}
+                  transition={{ duration: 0.2 }}
+                />
+              </motion.div>
+            ))}
+        </div>
+      </motion.div>
+    </div>
+  );
+};

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

@@ -0,0 +1,135 @@
+import { motion } from 'framer-motion';
+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';
+
+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={200}>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <motion.div
+            onClick={onClick}
+            className={classNames(
+              'relative flex flex-col items-center p-6 rounded-xl',
+              'w-full h-full min-h-[160px]',
+              'bg-white dark:bg-[#141414]',
+              'border border-[#E5E5E5] dark:border-[#333333]',
+              'group',
+              'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
+              'hover:border-purple-200 dark:hover:border-purple-900/30',
+              isActive ? 'border-purple-500 dark:border-purple-500/50 bg-purple-500/5 dark:bg-purple-500/10' : '',
+              isLoading ? 'cursor-wait opacity-70' : '',
+              className || '',
+            )}
+          >
+            {/* Main Content */}
+            <div className="flex flex-col items-center justify-center flex-1 w-full">
+              {/* Icon */}
+              <motion.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',
+                  isActive ? 'bg-purple-500/10 dark:bg-purple-500/10 ring-purple-500/30 dark:ring-purple-500/20' : '',
+                )}
+              >
+                <motion.div
+                  className={classNames(
+                    TAB_ICONS[tab.id],
+                    'w-8 h-8',
+                    'text-gray-600 dark:text-gray-300',
+                    'group-hover:text-purple-500 dark:group-hover:text-purple-400/80',
+                    isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
+                  )}
+                />
+              </motion.div>
+
+              {/* Label and Description */}
+              <div className="flex flex-col items-center mt-5 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',
+                    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',
+                      isActive ? 'text-purple-400 dark:text-purple-400/80' : '',
+                    )}
+                  >
+                    {description}
+                  </p>
+                )}
+              </div>
+            </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}
+          </motion.div>
+        </Tooltip.Trigger>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+};

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

@@ -0,0 +1,28 @@
+import { motion } from 'framer-motion';
+import { GithubConnection } from './GithubConnection';
+import { NetlifyConnection } from './NetlifyConnection';
+
+export default function ConnectionsTab() {
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <motion.div
+        className="flex items-center gap-2 mb-2"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+      >
+        <div className="i-ph:plugs-connected w-5 h-5 text-purple-500" />
+        <h2 className="text-lg font-medium text-bolt-elements-textPrimary">Connection Settings</h2>
+      </motion.div>
+      <p className="text-sm text-bolt-elements-textSecondary mb-6">
+        Manage your external service connections and integrations
+      </p>
+
+      <div className="grid grid-cols-1 gap-4">
+        <GithubConnection />
+        <NetlifyConnection />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,557 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { toast } from 'react-toastify';
+import { logStore } from '~/lib/stores/logs';
+import { classNames } from '~/utils/classNames';
+
+interface GitHubUserResponse {
+  login: string;
+  avatar_url: string;
+  html_url: string;
+  name: string;
+  bio: string;
+  public_repos: number;
+  followers: number;
+  following: number;
+  created_at: string;
+  public_gists: number;
+}
+
+interface GitHubRepoInfo {
+  name: string;
+  full_name: string;
+  html_url: string;
+  description: string;
+  stargazers_count: number;
+  forks_count: number;
+  default_branch: string;
+  updated_at: string;
+  languages_url: string;
+}
+
+interface GitHubOrganization {
+  login: string;
+  avatar_url: string;
+  html_url: string;
+}
+
+interface GitHubEvent {
+  id: string;
+  type: string;
+  repo: {
+    name: string;
+  };
+  created_at: string;
+}
+
+interface GitHubLanguageStats {
+  [language: string]: number;
+}
+
+interface GitHubStats {
+  repos: GitHubRepoInfo[];
+  totalStars: number;
+  totalForks: number;
+  organizations: GitHubOrganization[];
+  recentActivity: GitHubEvent[];
+  languages: GitHubLanguageStats;
+  totalGists: number;
+}
+
+interface GitHubConnection {
+  user: GitHubUserResponse | null;
+  token: string;
+  tokenType: 'classic' | 'fine-grained';
+  stats?: GitHubStats;
+}
+
+export function GithubConnection() {
+  const [connection, setConnection] = useState<GitHubConnection>({
+    user: null,
+    token: '',
+    tokenType: 'classic',
+  });
+  const [isLoading, setIsLoading] = useState(true);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isFetchingStats, setIsFetchingStats] = useState(false);
+  const [isStatsExpanded, setIsStatsExpanded] = useState(false);
+
+  const fetchGitHubStats = async (token: string) => {
+    try {
+      setIsFetchingStats(true);
+
+      const reposResponse = await fetch(
+        'https://api.github.com/user/repos?sort=updated&per_page=10&affiliation=owner,organization_member,collaborator',
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        },
+      );
+
+      if (!reposResponse.ok) {
+        throw new Error('Failed to fetch repositories');
+      }
+
+      const repos = (await reposResponse.json()) as GitHubRepoInfo[];
+
+      const orgsResponse = await fetch('https://api.github.com/user/orgs', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!orgsResponse.ok) {
+        throw new Error('Failed to fetch organizations');
+      }
+
+      const organizations = (await orgsResponse.json()) as GitHubOrganization[];
+
+      const eventsResponse = await fetch('https://api.github.com/users/' + connection.user?.login + '/events/public', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!eventsResponse.ok) {
+        throw new Error('Failed to fetch events');
+      }
+
+      const recentActivity = ((await eventsResponse.json()) as GitHubEvent[]).slice(0, 5);
+
+      const languagePromises = repos.map((repo) =>
+        fetch(repo.languages_url, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }).then((res) => res.json() as Promise<Record<string, number>>),
+      );
+
+      const repoLanguages = await Promise.all(languagePromises);
+      const languages: GitHubLanguageStats = {};
+
+      repoLanguages.forEach((repoLang) => {
+        Object.entries(repoLang).forEach(([lang, bytes]) => {
+          languages[lang] = (languages[lang] || 0) + bytes;
+        });
+      });
+
+      const totalStars = repos.reduce((acc, repo) => acc + repo.stargazers_count, 0);
+      const totalForks = repos.reduce((acc, repo) => acc + repo.forks_count, 0);
+      const totalGists = connection.user?.public_gists || 0;
+
+      setConnection((prev) => ({
+        ...prev,
+        stats: {
+          repos,
+          totalStars,
+          totalForks,
+          organizations,
+          recentActivity,
+          languages,
+          totalGists,
+        },
+      }));
+    } catch (error) {
+      logStore.logError('Failed to fetch GitHub stats', { error });
+      toast.error('Failed to fetch GitHub statistics');
+    } finally {
+      setIsFetchingStats(false);
+    }
+  };
+
+  useEffect(() => {
+    const savedConnection = localStorage.getItem('github_connection');
+
+    if (savedConnection) {
+      const parsed = JSON.parse(savedConnection);
+
+      if (!parsed.tokenType) {
+        parsed.tokenType = 'classic';
+      }
+
+      setConnection(parsed);
+
+      if (parsed.user && parsed.token) {
+        fetchGitHubStats(parsed.token);
+      }
+    }
+
+    setIsLoading(false);
+  }, []);
+
+  if (isLoading || isConnecting || isFetchingStats) {
+    return <LoadingSpinner />;
+  }
+
+  const fetchGithubUser = async (token: string) => {
+    try {
+      setIsConnecting(true);
+
+      const response = await fetch('https://api.github.com/user', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Invalid token or unauthorized');
+      }
+
+      const data = (await response.json()) as GitHubUserResponse;
+      const newConnection: GitHubConnection = {
+        user: data,
+        token,
+        tokenType: connection.tokenType,
+      };
+
+      localStorage.setItem('github_connection', JSON.stringify(newConnection));
+      setConnection(newConnection);
+
+      await fetchGitHubStats(token);
+
+      toast.success('Successfully connected to GitHub');
+    } catch (error) {
+      logStore.logError('Failed to authenticate with GitHub', { error });
+      toast.error('Failed to connect to GitHub');
+      setConnection({ user: null, token: '', tokenType: 'classic' });
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  const handleConnect = async (event: React.FormEvent) => {
+    event.preventDefault();
+    await fetchGithubUser(connection.token);
+  };
+
+  const handleDisconnect = () => {
+    localStorage.removeItem('github_connection');
+    setConnection({ user: null, token: '', tokenType: 'classic' });
+    toast.success('Disconnected from GitHub');
+  };
+
+  return (
+    <motion.div
+      className="bg-[#FFFFFF] dark:bg-[#0A0A0A] rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A]"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.2 }}
+    >
+      <div className="p-6 space-y-6">
+        <div className="flex items-center gap-2">
+          <div className="i-ph:github-logo w-5 h-5 text-bolt-elements-textPrimary" />
+          <h3 className="text-base font-medium text-bolt-elements-textPrimary">GitHub Connection</h3>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm text-bolt-elements-textSecondary mb-2">Token Type</label>
+            <select
+              value={connection.tokenType}
+              onChange={(e) =>
+                setConnection((prev) => ({ ...prev, tokenType: e.target.value as 'classic' | 'fine-grained' }))
+              }
+              disabled={isConnecting || !!connection.user}
+              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',
+                'focus:outline-none focus:ring-1 focus:ring-purple-500',
+                '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">
+              {connection.tokenType === 'classic' ? 'Personal Access Token' : 'Fine-grained Token'}
+            </label>
+            <input
+              type="password"
+              value={connection.token}
+              onChange={(e) => setConnection((prev) => ({ ...prev, token: e.target.value }))}
+              disabled={isConnecting || !!connection.user}
+              placeholder={`Enter your GitHub ${
+                connection.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-purple-500',
+                'disabled:opacity-50',
+              )}
+            />
+            <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+              <a
+                href={`https://github.com/settings/tokens${connection.tokenType === 'fine-grained' ? '/beta' : '/new'}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-purple-500 hover:underline inline-flex items-center gap-1"
+              >
+                Get your token
+                <div className="i-ph:arrow-square-out w-10 h-5" />
+              </a>
+              <span className="mx-2">•</span>
+              <span>
+                Required scopes:{' '}
+                {connection.tokenType === 'classic'
+                  ? 'repo, read:org, read:user'
+                  : 'Repository access, Organization access'}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {!connection.user ? (
+            <button
+              onClick={handleConnect}
+              disabled={isConnecting || !connection.token}
+              className={classNames(
+                'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                'bg-purple-500 text-white',
+                'hover:bg-purple-600',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            >
+              {isConnecting ? (
+                <>
+                  <div className="i-ph:spinner-gap animate-spin" />
+                  Connecting...
+                </>
+              ) : (
+                <>
+                  <div className="i-ph:plug-charging w-4 h-4" />
+                  Connect
+                </>
+              )}
+            </button>
+          ) : (
+            <button
+              onClick={handleDisconnect}
+              className={classNames(
+                'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                'bg-red-500 text-white',
+                'hover:bg-red-600',
+              )}
+            >
+              <div className="i-ph:plug-x w-4 h-4" />
+              Disconnect
+            </button>
+          )}
+
+          {connection.user && (
+            <span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
+              <div className="i-ph:check-circle w-4 h-4" />
+              Connected to GitHub
+            </span>
+          )}
+        </div>
+
+        {connection.user && connection.stats && (
+          <div className="mt-6 border-t border-[#E5E5E5] dark:border-[#1A1A1A] pt-6">
+            <button onClick={() => setIsStatsExpanded(!isStatsExpanded)} className="w-full bg-transparent">
+              <div className="flex items-center gap-4">
+                <img src={connection.user.avatar_url} alt={connection.user.login} className="w-16 h-16 rounded-full" />
+                <div className="flex-1">
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-lg font-medium text-bolt-elements-textPrimary">
+                      {connection.user.name || connection.user.login}
+                    </h3>
+                    <div
+                      className={classNames(
+                        'i-ph:caret-down w-4 h-4 text-bolt-elements-textSecondary transition-transform',
+                        isStatsExpanded ? 'rotate-180' : '',
+                      )}
+                    />
+                  </div>
+                  {connection.user.bio && (
+                    <p className="text-sm text-start text-bolt-elements-textSecondary">{connection.user.bio}</p>
+                  )}
+                  <div className="flex gap-4 mt-2 text-sm text-bolt-elements-textSecondary">
+                    <span className="flex items-center gap-1">
+                      <div className="i-ph:users w-4 h-4" />
+                      {connection.user.followers} followers
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <div className="i-ph:book-bookmark w-4 h-4" />
+                      {connection.user.public_repos} public repos
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <div className="i-ph:star w-4 h-4" />
+                      {connection.stats.totalStars} stars
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <div className="i-ph:git-fork w-4 h-4" />
+                      {connection.stats.totalForks} forks
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </button>
+
+            {isStatsExpanded && (
+              <div className="pt-4">
+                {connection.stats.organizations.length > 0 && (
+                  <div className="mb-6">
+                    <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Organizations</h4>
+                    <div className="flex flex-wrap gap-3">
+                      {connection.stats.organizations.map((org) => (
+                        <a
+                          key={org.login}
+                          href={org.html_url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="flex items-center gap-2 p-2 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A] hover:bg-[#F0F0F0] dark:hover:bg-[#252525] transition-colors"
+                        >
+                          <img src={org.avatar_url} alt={org.login} className="w-6 h-6 rounded-md" />
+                          <span className="text-sm text-bolt-elements-textPrimary">{org.login}</span>
+                        </a>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Languages Section */}
+                <div className="mb-6">
+                  <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Top Languages</h4>
+                  <div className="flex flex-wrap gap-2">
+                    {Object.entries(connection.stats.languages)
+                      .sort(([, a], [, b]) => b - a)
+                      .slice(0, 5)
+                      .map(([language]) => (
+                        <span
+                          key={language}
+                          className="px-3 py-1 text-xs rounded-full bg-purple-500/10 text-purple-500 dark:bg-purple-500/20"
+                        >
+                          {language}
+                        </span>
+                      ))}
+                  </div>
+                </div>
+
+                {/* Recent Activity Section */}
+                <div className="mb-6">
+                  <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Recent Activity</h4>
+                  <div className="space-y-3">
+                    {connection.stats.recentActivity.map((event) => (
+                      <div key={event.id} className="p-3 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A] text-sm">
+                        <div className="flex items-center gap-2 text-bolt-elements-textPrimary">
+                          <div className="i-ph:git-commit w-4 h-4 text-bolt-elements-textSecondary" />
+                          <span className="font-medium">{event.type.replace('Event', '')}</span>
+                          <span>on</span>
+                          <a
+                            href={`https://github.com/${event.repo.name}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-purple-500 hover:underline"
+                          >
+                            {event.repo.name}
+                          </a>
+                        </div>
+                        <div className="mt-1 text-xs text-bolt-elements-textSecondary">
+                          {new Date(event.created_at).toLocaleDateString()} at{' '}
+                          {new Date(event.created_at).toLocaleTimeString()}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Additional Stats */}
+                <div className="grid grid-cols-4 gap-4 mb-6">
+                  <div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A]">
+                    <div className="text-sm text-bolt-elements-textSecondary">Member Since</div>
+                    <div className="text-lg font-medium text-bolt-elements-textPrimary">
+                      {new Date(connection.user.created_at).toLocaleDateString()}
+                    </div>
+                  </div>
+                  <div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A]">
+                    <div className="text-sm text-bolt-elements-textSecondary">Public Gists</div>
+                    <div className="text-lg font-medium text-bolt-elements-textPrimary">
+                      {connection.stats.totalGists}
+                    </div>
+                  </div>
+                  <div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A]">
+                    <div className="text-sm text-bolt-elements-textSecondary">Organizations</div>
+                    <div className="text-lg font-medium text-bolt-elements-textPrimary">
+                      {connection.stats.organizations.length}
+                    </div>
+                  </div>
+                  <div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A]">
+                    <div className="text-sm text-bolt-elements-textSecondary">Languages</div>
+                    <div className="text-lg font-medium text-bolt-elements-textPrimary">
+                      {Object.keys(connection.stats.languages).length}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Repositories Section */}
+                <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Recent Repositories</h4>
+                <div className="space-y-3">
+                  {connection.stats.repos.map((repo) => (
+                    <a
+                      key={repo.full_name}
+                      href={repo.html_url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="block p-3 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A] hover:bg-[#F0F0F0] dark:hover:bg-[#252525] transition-colors"
+                    >
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <h5 className="text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+                            <div className="i-ph:git-repository w-4 h-4 text-bolt-elements-textSecondary" />
+                            {repo.name}
+                          </h5>
+                          {repo.description && (
+                            <p className="text-xs text-bolt-elements-textSecondary mt-1">{repo.description}</p>
+                          )}
+                          <div className="flex items-center gap-2 mt-2 text-xs text-bolt-elements-textSecondary">
+                            <span className="flex items-center gap-1">
+                              <div className="i-ph:git-branch w-3 h-3" />
+                              {repo.default_branch}
+                            </span>
+                            <span>•</span>
+                            <span>Updated {new Date(repo.updated_at).toLocaleDateString()}</span>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
+                          <span className="flex items-center gap-1">
+                            <div className="i-ph:star w-3 h-3" />
+                            {repo.stargazers_count}
+                          </span>
+                          <span className="flex items-center gap-1">
+                            <div className="i-ph:git-fork w-3 h-3" />
+                            {repo.forks_count}
+                          </span>
+                        </div>
+                      </div>
+                    </a>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+}
+
+function LoadingSpinner() {
+  return (
+    <div className="flex items-center justify-center p-4">
+      <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...</span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,263 @@
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { toast } from 'react-toastify';
+import { useStore } from '@nanostores/react';
+import { logStore } from '~/lib/stores/logs';
+import { classNames } from '~/utils/classNames';
+import {
+  netlifyConnection,
+  isConnecting,
+  isFetchingStats,
+  updateNetlifyConnection,
+  fetchNetlifyStats,
+} from '~/lib/stores/netlify';
+import type { NetlifyUser } from '~/types/netlify';
+
+export function NetlifyConnection() {
+  const connection = useStore(netlifyConnection);
+  const connecting = useStore(isConnecting);
+  const fetchingStats = useStore(isFetchingStats);
+  const [isSitesExpanded, setIsSitesExpanded] = useState(false);
+
+  useEffect(() => {
+    const fetchSites = async () => {
+      if (connection.user && connection.token) {
+        await fetchNetlifyStats(connection.token);
+      }
+    };
+    fetchSites();
+  }, [connection.user, connection.token]);
+
+  const handleConnect = async (event: React.FormEvent) => {
+    event.preventDefault();
+    isConnecting.set(true);
+
+    try {
+      const response = await fetch('https://api.netlify.com/api/v1/user', {
+        headers: {
+          Authorization: `Bearer ${connection.token}`,
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Invalid token or unauthorized');
+      }
+
+      const userData = (await response.json()) as NetlifyUser;
+      updateNetlifyConnection({
+        user: userData,
+        token: connection.token,
+      });
+
+      await fetchNetlifyStats(connection.token);
+      toast.success('Successfully connected to Netlify');
+    } catch (error) {
+      console.error('Auth error:', error);
+      logStore.logError('Failed to authenticate with Netlify', { error });
+      toast.error('Failed to connect to Netlify');
+      updateNetlifyConnection({ user: null, token: '' });
+    } finally {
+      isConnecting.set(false);
+    }
+  };
+
+  const handleDisconnect = () => {
+    updateNetlifyConnection({ user: null, token: '' });
+    toast.success('Disconnected from Netlify');
+  };
+
+  return (
+    <motion.div
+      className="bg-[#FFFFFF] dark:bg-[#0A0A0A] rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A]"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.3 }}
+    >
+      <div className="p-6 space-y-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <img
+              className="w-5 h-5"
+              height="24"
+              width="24"
+              crossOrigin="anonymous"
+              src="https://cdn.simpleicons.org/netlify"
+            />
+            <h3 className="text-base font-medium text-bolt-elements-textPrimary">Netlify Connection</h3>
+          </div>
+        </div>
+
+        {!connection.user ? (
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm text-bolt-elements-textSecondary mb-2">Personal Access Token</label>
+              <input
+                type="password"
+                value={connection.token}
+                onChange={(e) => updateNetlifyConnection({ ...connection, token: e.target.value })}
+                disabled={connecting}
+                placeholder="Enter your Netlify personal access token"
+                className={classNames(
+                  'w-full px-3 py-2 rounded-lg text-sm',
+                  'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
+                  'border border-[#E5E5E5] dark:border-[#333333]',
+                  'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                  'focus:outline-none focus:ring-1 focus:ring-[#00AD9F]',
+                  'disabled:opacity-50',
+                )}
+              />
+              <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+                <a
+                  href="https://app.netlify.com/user/applications#personal-access-tokens"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-[#00AD9F] hover:underline inline-flex items-center gap-1"
+                >
+                  Get your token
+                  <div className="i-ph:arrow-square-out w-4 h-4" />
+                </a>
+              </div>
+            </div>
+
+            <button
+              onClick={handleConnect}
+              disabled={connecting || !connection.token}
+              className={classNames(
+                'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                'bg-[#00AD9F] text-white',
+                'hover:bg-[#00968A]',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+            >
+              {connecting ? (
+                <>
+                  <div className="i-ph:spinner-gap animate-spin" />
+                  Connecting...
+                </>
+              ) : (
+                <>
+                  <div className="i-ph:plug-charging w-4 h-4" />
+                  Connect
+                </>
+              )}
+            </button>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <button
+                  onClick={handleDisconnect}
+                  className={classNames(
+                    'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                    'bg-red-500 text-white',
+                    'hover:bg-red-600',
+                  )}
+                >
+                  <div className="i-ph:plug w-4 h-4" />
+                  Disconnect
+                </button>
+                <span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
+                  <div className="i-ph:check-circle w-4 h-4 text-green-500" />
+                  Connected to Netlify
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4 p-4 bg-[#F8F8F8] dark:bg-[#1A1A1A] rounded-lg">
+              <img
+                src={connection.user.avatar_url}
+                referrerPolicy="no-referrer"
+                crossOrigin="anonymous"
+                alt={connection.user.full_name}
+                className="w-12 h-12 rounded-full border-2 border-[#00AD9F]"
+              />
+              <div>
+                <h4 className="text-sm font-medium text-bolt-elements-textPrimary">{connection.user.full_name}</h4>
+                <p className="text-sm text-bolt-elements-textSecondary">{connection.user.email}</p>
+              </div>
+            </div>
+
+            {fetchingStats ? (
+              <div className="flex items-center gap-2 text-sm text-bolt-elements-textSecondary">
+                <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+                Fetching Netlify sites...
+              </div>
+            ) : (
+              <div>
+                <button
+                  onClick={() => setIsSitesExpanded(!isSitesExpanded)}
+                  className="w-full bg-transparent text-left text-sm font-medium text-bolt-elements-textPrimary mb-3 flex items-center gap-2"
+                >
+                  <div className="i-ph:buildings w-4 h-4" />
+                  Your Sites ({connection.stats?.totalSites || 0})
+                  <div
+                    className={classNames(
+                      'i-ph:caret-down w-4 h-4 ml-auto transition-transform',
+                      isSitesExpanded ? 'rotate-180' : '',
+                    )}
+                  />
+                </button>
+                {isSitesExpanded && connection.stats?.sites?.length ? (
+                  <div className="grid gap-3">
+                    {connection.stats.sites.map((site) => (
+                      <a
+                        key={site.id}
+                        href={site.admin_url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="block p-4 rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-[#00AD9F] dark:hover:border-[#00AD9F] transition-colors"
+                      >
+                        <div className="flex items-center justify-between">
+                          <div>
+                            <h5 className="text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+                              <div className="i-ph:globe w-4 h-4 text-[#00AD9F]" />
+                              {site.name}
+                            </h5>
+                            <div className="flex items-center gap-2 mt-2 text-xs text-bolt-elements-textSecondary">
+                              <a
+                                href={site.url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="hover:text-[#00AD9F]"
+                              >
+                                {site.url}
+                              </a>
+                              {site.published_deploy && (
+                                <>
+                                  <span>•</span>
+                                  <span className="flex items-center gap-1">
+                                    <div className="i-ph:clock w-3 h-3" />
+                                    {new Date(site.published_deploy.published_at).toLocaleDateString()}
+                                  </span>
+                                </>
+                              )}
+                            </div>
+                          </div>
+                          {site.build_settings?.provider && (
+                            <div className="text-xs text-bolt-elements-textSecondary px-2 py-1 rounded-md bg-[#F0F0F0] dark:bg-[#252525]">
+                              <span className="flex items-center gap-1">
+                                <div className="i-ph:git-branch w-3 h-3" />
+                                {site.build_settings.provider}
+                              </span>
+                            </div>
+                          )}
+                        </div>
+                      </a>
+                    ))}
+                  </div>
+                ) : isSitesExpanded ? (
+                  <div className="text-sm text-bolt-elements-textSecondary flex items-center gap-2">
+                    <div className="i-ph:info w-4 h-4" />
+                    No sites found in your Netlify account
+                  </div>
+                ) : null}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+}

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

@@ -0,0 +1,180 @@
+import React, { useEffect } from 'react';
+import { classNames } from '~/utils/classNames';
+import type { GitHubAuthState } from '~/components/@settings/tabs/connections/types/GitHub';
+import Cookies from 'js-cookie';
+import { getLocalStorage } from '~/lib/persistence';
+
+const GITHUB_TOKEN_KEY = 'github_token';
+
+interface ConnectionFormProps {
+  authState: GitHubAuthState;
+  setAuthState: React.Dispatch<React.SetStateAction<GitHubAuthState>>;
+  onSave: (e: React.FormEvent) => void;
+  onDisconnect: () => void;
+}
+
+export function ConnectionForm({ authState, setAuthState, onSave, onDisconnect }: ConnectionFormProps) {
+  // Check for saved token on mount
+  useEffect(() => {
+    const savedToken = Cookies.get(GITHUB_TOKEN_KEY) || getLocalStorage(GITHUB_TOKEN_KEY);
+
+    if (savedToken && !authState.tokenInfo?.token) {
+      setAuthState((prev: GitHubAuthState) => ({
+        ...prev,
+        tokenInfo: {
+          token: savedToken,
+          scope: [],
+          avatar_url: '',
+          name: null,
+          created_at: new Date().toISOString(),
+          followers: 0,
+        },
+      }));
+    }
+  }, []);
+
+  return (
+    <div className="rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] overflow-hidden">
+      <div className="p-6">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+              <div className="i-ph:plug-fill text-bolt-elements-textTertiary" />
+            </div>
+            <div>
+              <h3 className="text-lg font-medium text-bolt-elements-textPrimary">Connection Settings</h3>
+              <p className="text-sm text-bolt-elements-textSecondary">Configure your GitHub connection</p>
+            </div>
+          </div>
+        </div>
+
+        <form onSubmit={onSave} className="space-y-4">
+          <div>
+            <label htmlFor="username" className="block text-sm font-medium text-bolt-elements-textSecondary mb-2">
+              GitHub Username
+            </label>
+            <input
+              id="username"
+              type="text"
+              value={authState.username}
+              onChange={(e) => setAuthState((prev: GitHubAuthState) => ({ ...prev, username: e.target.value }))}
+              className={classNames(
+                'w-full px-4 py-2.5 bg-[#F5F5F5] dark:bg-[#1A1A1A] border rounded-lg',
+                'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary text-base',
+                'border-[#E5E5E5] dark:border-[#1A1A1A]',
+                'focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500',
+                'transition-all duration-200',
+              )}
+              placeholder="e.g., octocat"
+            />
+          </div>
+
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <label htmlFor="token" className="block text-sm font-medium text-bolt-elements-textSecondary">
+                Personal Access Token
+              </label>
+              <a
+                href="https://github.com/settings/tokens/new?scopes=repo,user,read:org,workflow,delete_repo,write:packages,read:packages"
+                target="_blank"
+                rel="noopener noreferrer"
+                className={classNames(
+                  'inline-flex items-center gap-1.5 text-xs',
+                  'text-purple-500 hover:text-purple-600 dark:text-purple-400 dark:hover:text-purple-300',
+                  'transition-colors duration-200',
+                )}
+              >
+                <span>Generate new token</span>
+                <div className="i-ph:plus-circle" />
+              </a>
+            </div>
+            <input
+              id="token"
+              type="password"
+              value={authState.tokenInfo?.token || ''}
+              onChange={(e) =>
+                setAuthState((prev: GitHubAuthState) => ({
+                  ...prev,
+                  tokenInfo: {
+                    token: e.target.value,
+                    scope: [],
+                    avatar_url: '',
+                    name: null,
+                    created_at: new Date().toISOString(),
+                    followers: 0,
+                  },
+                  username: '',
+                  isConnected: false,
+                  isVerifying: false,
+                  isLoadingRepos: false,
+                }))
+              }
+              className={classNames(
+                'w-full px-4 py-2.5 bg-[#F5F5F5] dark:bg-[#1A1A1A] border rounded-lg',
+                'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary text-base',
+                'border-[#E5E5E5] dark:border-[#1A1A1A]',
+                'focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500',
+                'transition-all duration-200',
+              )}
+              placeholder="ghp_xxxxxxxxxxxx"
+            />
+          </div>
+
+          <div className="flex items-center justify-between pt-4 border-t border-[#E5E5E5] dark:border-[#1A1A1A]">
+            <div className="flex items-center gap-4">
+              {!authState.isConnected ? (
+                <button
+                  type="submit"
+                  disabled={authState.isVerifying || !authState.username || !authState.tokenInfo?.token}
+                  className={classNames(
+                    'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+                    'bg-purple-500 hover:bg-purple-600',
+                    'text-white',
+                    'disabled:opacity-50 disabled:cursor-not-allowed',
+                  )}
+                >
+                  {authState.isVerifying ? (
+                    <>
+                      <div className="i-ph:spinner animate-spin" />
+                      <span>Verifying...</span>
+                    </>
+                  ) : (
+                    <>
+                      <div className="i-ph:plug-fill" />
+                      <span>Connect</span>
+                    </>
+                  )}
+                </button>
+              ) : (
+                <>
+                  <button
+                    onClick={onDisconnect}
+                    className={classNames(
+                      'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+                      'bg-[#F5F5F5] hover:bg-red-500/10 hover:text-red-500',
+                      'dark:bg-[#1A1A1A] dark:hover:bg-red-500/20 dark:hover:text-red-500',
+                      'text-bolt-elements-textPrimary',
+                    )}
+                  >
+                    <div className="i-ph:plug-fill" />
+                    <span>Disconnect</span>
+                  </button>
+                  <span className="inline-flex items-center gap-2 px-3 py-1.5 text-sm text-green-600 dark:text-green-400 bg-green-500/5 rounded-lg border border-green-500/20">
+                    <div className="i-ph:check-circle-fill" />
+                    <span>Connected</span>
+                  </span>
+                </>
+              )}
+            </div>
+            {authState.rateLimits && (
+              <div className="flex items-center gap-2 text-sm text-bolt-elements-textTertiary">
+                <div className="i-ph:clock-countdown opacity-60" />
+                <span>Rate limit resets at {authState.rateLimits.reset.toLocaleTimeString()}</span>
+              </div>
+            )}
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,150 @@
+import { useState } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { classNames } from '~/utils/classNames';
+import type { GitHubRepoInfo } from '~/components/@settings/tabs/connections/types/GitHub';
+import { GitBranch } from '@phosphor-icons/react';
+
+interface GitHubBranch {
+  name: string;
+  default?: boolean;
+}
+
+interface CreateBranchDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: (branchName: string, sourceBranch: string) => void;
+  repository: GitHubRepoInfo;
+  branches?: GitHubBranch[];
+}
+
+export function CreateBranchDialog({ isOpen, onClose, onConfirm, repository, branches }: CreateBranchDialogProps) {
+  const [branchName, setBranchName] = useState('');
+  const [sourceBranch, setSourceBranch] = useState(branches?.find((b) => b.default)?.name || 'main');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onConfirm(branchName, sourceBranch);
+    setBranchName('');
+    onClose();
+  };
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={onClose}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 dark:bg-black/80" />
+        <Dialog.Content
+          className={classNames(
+            'fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]',
+            'w-full max-w-md p-6 rounded-xl shadow-lg',
+            'bg-white dark:bg-[#0A0A0A]',
+            'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+          )}
+        >
+          <Dialog.Title className="text-lg font-medium text-bolt-elements-textPrimary mb-4">
+            Create New Branch
+          </Dialog.Title>
+
+          <form onSubmit={handleSubmit}>
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="branchName" className="block text-sm font-medium text-bolt-elements-textSecondary mb-2">
+                  Branch Name
+                </label>
+                <input
+                  id="branchName"
+                  type="text"
+                  value={branchName}
+                  onChange={(e) => setBranchName(e.target.value)}
+                  placeholder="feature/my-new-branch"
+                  className={classNames(
+                    'w-full px-3 py-2 rounded-lg',
+                    'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+                    'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+                    'text-bolt-elements-textPrimary placeholder:text-bolt-elements-textTertiary',
+                    'focus:outline-none focus:ring-2 focus:ring-purple-500/50',
+                  )}
+                  required
+                />
+              </div>
+
+              <div>
+                <label
+                  htmlFor="sourceBranch"
+                  className="block text-sm font-medium text-bolt-elements-textSecondary mb-2"
+                >
+                  Source Branch
+                </label>
+                <select
+                  id="sourceBranch"
+                  value={sourceBranch}
+                  onChange={(e) => setSourceBranch(e.target.value)}
+                  className={classNames(
+                    'w-full px-3 py-2 rounded-lg',
+                    'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+                    'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+                    'text-bolt-elements-textPrimary',
+                    'focus:outline-none focus:ring-2 focus:ring-purple-500/50',
+                  )}
+                >
+                  {branches?.map((branch) => (
+                    <option key={branch.name} value={branch.name}>
+                      {branch.name} {branch.default ? '(default)' : ''}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className="mt-4 p-3 bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-lg">
+                <h4 className="text-sm font-medium text-bolt-elements-textSecondary mb-2">Branch Overview</h4>
+                <ul className="space-y-2 text-sm text-bolt-elements-textSecondary">
+                  <li className="flex items-center gap-2">
+                    <GitBranch className="text-lg" />
+                    Repository: {repository.name}
+                  </li>
+                  {branchName && (
+                    <li className="flex items-center gap-2">
+                      <div className="i-ph:check-circle text-green-500" />
+                      New branch will be created as: {branchName}
+                    </li>
+                  )}
+                  <li className="flex items-center gap-2">
+                    <div className="i-ph:check-circle text-green-500" />
+                    Based on: {sourceBranch}
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <div className="mt-6 flex justify-end gap-3">
+              <button
+                type="button"
+                onClick={onClose}
+                className={classNames(
+                  'px-4 py-2 rounded-lg text-sm font-medium',
+                  'text-bolt-elements-textPrimary',
+                  'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+                  'hover:bg-purple-500/10 hover:text-purple-500',
+                  'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
+                  'transition-colors',
+                )}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className={classNames(
+                  'px-4 py-2 rounded-lg text-sm font-medium',
+                  'text-white bg-purple-500',
+                  'hover:bg-purple-600',
+                  'transition-colors',
+                )}
+              >
+                Create Branch
+              </button>
+            </div>
+          </form>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

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

@@ -0,0 +1,528 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { useState, useEffect } from 'react';
+import { toast } from 'react-toastify';
+import { motion } from 'framer-motion';
+import { getLocalStorage } from '~/lib/persistence';
+import { classNames } from '~/utils/classNames';
+import type { GitHubUserResponse } from '~/types/GitHub';
+import { logStore } from '~/lib/stores/logs';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { extractRelativePath } from '~/utils/diff';
+import { formatSize } from '~/utils/formatSize';
+import type { FileMap, File } from '~/lib/stores/files';
+import { Octokit } from '@octokit/rest';
+
+interface PushToGitHubDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onPush: (repoName: string, username?: string, token?: string, isPrivate?: boolean) => Promise<string>;
+}
+
+interface GitHubRepo {
+  name: string;
+  full_name: string;
+  html_url: string;
+  description: string;
+  stargazers_count: number;
+  forks_count: number;
+  default_branch: string;
+  updated_at: string;
+  language: string;
+  private: boolean;
+}
+
+export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDialogProps) {
+  const [repoName, setRepoName] = useState('');
+  const [isPrivate, setIsPrivate] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [user, setUser] = useState<GitHubUserResponse | null>(null);
+  const [recentRepos, setRecentRepos] = useState<GitHubRepo[]>([]);
+  const [isFetchingRepos, setIsFetchingRepos] = useState(false);
+  const [showSuccessDialog, setShowSuccessDialog] = useState(false);
+  const [createdRepoUrl, setCreatedRepoUrl] = useState('');
+  const [pushedFiles, setPushedFiles] = useState<{ path: string; size: number }[]>([]);
+
+  // Load GitHub connection on mount
+  useEffect(() => {
+    if (isOpen) {
+      const connection = getLocalStorage('github_connection');
+
+      if (connection?.user && connection?.token) {
+        setUser(connection.user);
+
+        // Only fetch if we have both user and token
+        if (connection.token.trim()) {
+          fetchRecentRepos(connection.token);
+        }
+      }
+    }
+  }, [isOpen]);
+
+  const fetchRecentRepos = async (token: string) => {
+    if (!token) {
+      logStore.logError('No GitHub token available');
+      toast.error('GitHub authentication required');
+
+      return;
+    }
+
+    try {
+      setIsFetchingRepos(true);
+
+      const response = await fetch(
+        'https://api.github.com/user/repos?sort=updated&per_page=5&type=all&affiliation=owner,organization_member',
+        {
+          headers: {
+            Accept: 'application/vnd.github.v3+json',
+            Authorization: `Bearer ${token.trim()}`,
+          },
+        },
+      );
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+
+        if (response.status === 401) {
+          toast.error('GitHub token expired. Please reconnect your account.');
+
+          // Clear invalid token
+          const connection = getLocalStorage('github_connection');
+
+          if (connection) {
+            localStorage.removeItem('github_connection');
+            setUser(null);
+          }
+        } else {
+          logStore.logError('Failed to fetch GitHub repositories', {
+            status: response.status,
+            statusText: response.statusText,
+            error: errorData,
+          });
+          toast.error(`Failed to fetch repositories: ${response.statusText}`);
+        }
+
+        return;
+      }
+
+      const repos = (await response.json()) as GitHubRepo[];
+      setRecentRepos(repos);
+    } catch (error) {
+      logStore.logError('Failed to fetch GitHub repositories', { error });
+      toast.error('Failed to fetch recent repositories');
+    } finally {
+      setIsFetchingRepos(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const connection = getLocalStorage('github_connection');
+
+    if (!connection?.token || !connection?.user) {
+      toast.error('Please connect your GitHub account in Settings > Connections first');
+      return;
+    }
+
+    if (!repoName.trim()) {
+      toast.error('Repository name is required');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      // Check if repository exists first
+      const octokit = new Octokit({ auth: connection.token });
+
+      try {
+        await octokit.repos.get({
+          owner: connection.user.login,
+          repo: repoName,
+        });
+
+        // If we get here, the repo exists
+        const confirmOverwrite = window.confirm(
+          `Repository "${repoName}" already exists. Do you want to update it? This will add or modify files in the repository.`,
+        );
+
+        if (!confirmOverwrite) {
+          setIsLoading(false);
+          return;
+        }
+      } catch (error) {
+        // 404 means repo doesn't exist, which is what we want for new repos
+        if (error instanceof Error && 'status' in error && error.status !== 404) {
+          throw error;
+        }
+      }
+
+      const repoUrl = await onPush(repoName, connection.user.login, connection.token, isPrivate);
+      setCreatedRepoUrl(repoUrl);
+
+      // Get list of pushed files
+      const files = workbenchStore.files.get();
+      const filesList = Object.entries(files as FileMap)
+        .filter(([, dirent]) => dirent?.type === 'file' && !dirent.isBinary)
+        .map(([path, dirent]) => ({
+          path: extractRelativePath(path),
+          size: new TextEncoder().encode((dirent as File).content || '').length,
+        }));
+
+      setPushedFiles(filesList);
+      setShowSuccessDialog(true);
+    } catch (error) {
+      console.error('Error pushing to GitHub:', error);
+      toast.error('Failed to push to GitHub. Please check your repository name and try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    setRepoName('');
+    setIsPrivate(false);
+    setShowSuccessDialog(false);
+    setCreatedRepoUrl('');
+    onClose();
+  };
+
+  // Success Dialog
+  if (showSuccessDialog) {
+    return (
+      <Dialog.Root open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+        <Dialog.Portal>
+          <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
+          <div className="fixed inset-0 flex items-center justify-center z-[9999]">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.95 }}
+              transition={{ duration: 0.2 }}
+              className="w-[90vw] md:w-[600px] max-h-[85vh] overflow-y-auto"
+            >
+              <Dialog.Content className="bg-white dark:bg-[#1E1E1E] rounded-lg border border-[#E5E5E5] dark:border-[#333333] shadow-xl">
+                <div className="p-6 space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2 text-green-500">
+                      <div className="i-ph:check-circle w-5 h-5" />
+                      <h3 className="text-lg font-medium">Successfully pushed to GitHub</h3>
+                    </div>
+                    <Dialog.Close
+                      onClick={handleClose}
+                      className="p-2 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400"
+                    >
+                      <div className="i-ph:x w-5 h-5" />
+                    </Dialog.Close>
+                  </div>
+
+                  <div className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg p-3 text-left">
+                    <p className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark mb-2">
+                      Repository URL
+                    </p>
+                    <div className="flex items-center gap-2">
+                      <code className="flex-1 text-sm bg-bolt-elements-background dark:bg-bolt-elements-background-dark px-3 py-2 rounded border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark font-mono">
+                        {createdRepoUrl}
+                      </code>
+                      <motion.button
+                        onClick={() => {
+                          navigator.clipboard.writeText(createdRepoUrl);
+                          toast.success('URL copied to clipboard');
+                        }}
+                        className="p-2 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary dark:text-bolt-elements-textSecondary-dark dark:hover:text-bolt-elements-textPrimary-dark"
+                        whileHover={{ scale: 1.1 }}
+                        whileTap={{ scale: 0.9 }}
+                      >
+                        <div className="i-ph:copy w-4 h-4" />
+                      </motion.button>
+                    </div>
+                  </div>
+
+                  <div className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg p-3">
+                    <p className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark mb-2">
+                      Pushed Files ({pushedFiles.length})
+                    </p>
+                    <div className="max-h-[200px] overflow-y-auto custom-scrollbar">
+                      {pushedFiles.map((file) => (
+                        <div
+                          key={file.path}
+                          className="flex items-center justify-between py-1 text-sm text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark"
+                        >
+                          <span className="font-mono truncate flex-1">{file.path}</span>
+                          <span className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark ml-2">
+                            {formatSize(file.size)}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end gap-2 pt-2">
+                    <motion.a
+                      href={createdRepoUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="px-4 py-2 rounded-lg bg-purple-500 text-white hover:bg-purple-600 text-sm inline-flex items-center gap-2"
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      <div className="i-ph:github-logo w-4 h-4" />
+                      View Repository
+                    </motion.a>
+                    <motion.button
+                      onClick={() => {
+                        navigator.clipboard.writeText(createdRepoUrl);
+                        toast.success('URL copied to clipboard');
+                      }}
+                      className="px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] text-gray-600 dark:text-gray-400 hover:bg-[#E5E5E5] dark:hover:bg-[#252525] text-sm inline-flex items-center gap-2"
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      <div className="i-ph:copy w-4 h-4" />
+                      Copy URL
+                    </motion.button>
+                    <motion.button
+                      onClick={handleClose}
+                      className="px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] text-gray-600 dark:text-gray-400 hover:bg-[#E5E5E5] dark:hover:bg-[#252525] text-sm"
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      Close
+                    </motion.button>
+                  </div>
+                </div>
+              </Dialog.Content>
+            </motion.div>
+          </div>
+        </Dialog.Portal>
+      </Dialog.Root>
+    );
+  }
+
+  if (!user) {
+    return (
+      <Dialog.Root open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+        <Dialog.Portal>
+          <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
+          <div className="fixed inset-0 flex items-center justify-center z-[9999]">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.95 }}
+              transition={{ duration: 0.2 }}
+              className="w-[90vw] md:w-[500px]"
+            >
+              <Dialog.Content className="bg-white dark:bg-[#0A0A0A] rounded-lg p-6 border border-[#E5E5E5] dark:border-[#1A1A1A] shadow-xl">
+                <div className="text-center space-y-4">
+                  <motion.div
+                    initial={{ scale: 0.8 }}
+                    animate={{ scale: 1 }}
+                    transition={{ delay: 0.1 }}
+                    className="mx-auto w-12 h-12 rounded-xl bg-bolt-elements-background-depth-3 flex items-center justify-center text-purple-500"
+                  >
+                    <div className="i-ph:github-logo w-6 h-6" />
+                  </motion.div>
+                  <h3 className="text-lg font-medium text-gray-900 dark:text-white">GitHub Connection Required</h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Please connect your GitHub account in Settings {'>'} Connections to push your code to GitHub.
+                  </p>
+                  <motion.button
+                    className="px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600 inline-flex items-center gap-2"
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                    onClick={handleClose}
+                  >
+                    <div className="i-ph:x-circle" />
+                    Close
+                  </motion.button>
+                </div>
+              </Dialog.Content>
+            </motion.div>
+          </div>
+        </Dialog.Portal>
+      </Dialog.Root>
+    );
+  }
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
+        <div className="fixed inset-0 flex items-center justify-center z-[9999]">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.2 }}
+            className="w-[90vw] md:w-[500px]"
+          >
+            <Dialog.Content className="bg-white dark:bg-[#0A0A0A] rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A] shadow-xl">
+              <div className="p-6">
+                <div className="flex items-center gap-4 mb-6">
+                  <motion.div
+                    initial={{ scale: 0.8 }}
+                    animate={{ scale: 1 }}
+                    transition={{ delay: 0.1 }}
+                    className="w-10 h-10 rounded-xl bg-bolt-elements-background-depth-3 flex items-center justify-center text-purple-500"
+                  >
+                    <div className="i-ph:git-branch w-5 h-5" />
+                  </motion.div>
+                  <div>
+                    <Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">
+                      Push to GitHub
+                    </Dialog.Title>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Push your code to a new or existing GitHub repository
+                    </p>
+                  </div>
+                  <Dialog.Close
+                    className="ml-auto p-2 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400"
+                    onClick={handleClose}
+                  >
+                    <div className="i-ph:x w-5 h-5" />
+                  </Dialog.Close>
+                </div>
+
+                <div className="flex items-center gap-3 mb-6 p-3 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg">
+                  <img src={user.avatar_url} alt={user.login} className="w-10 h-10 rounded-full" />
+                  <div>
+                    <p className="text-sm font-medium text-gray-900 dark:text-white">{user.name || user.login}</p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">@{user.login}</p>
+                  </div>
+                </div>
+
+                <form onSubmit={handleSubmit} className="space-y-4">
+                  <div className="space-y-2">
+                    <label htmlFor="repoName" className="text-sm text-gray-600 dark:text-gray-400">
+                      Repository Name
+                    </label>
+                    <input
+                      id="repoName"
+                      type="text"
+                      value={repoName}
+                      onChange={(e) => setRepoName(e.target.value)}
+                      placeholder="my-awesome-project"
+                      className="w-full px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 border border-[#E5E5E5] dark:border-[#1A1A1A] text-gray-900 dark:text-white placeholder-gray-400"
+                      required
+                    />
+                  </div>
+
+                  {recentRepos.length > 0 && (
+                    <div className="space-y-2">
+                      <label className="text-sm text-gray-600 dark:text-gray-400">Recent Repositories</label>
+                      <div className="space-y-2">
+                        {recentRepos.map((repo) => (
+                          <motion.button
+                            key={repo.full_name}
+                            type="button"
+                            onClick={() => setRepoName(repo.name)}
+                            className="w-full p-3 text-left rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 transition-colors group"
+                            whileHover={{ scale: 1.01 }}
+                            whileTap={{ scale: 0.99 }}
+                          >
+                            <div className="flex items-center justify-between">
+                              <div className="flex items-center gap-2">
+                                <div className="i-ph:git-repository w-4 h-4 text-purple-500" />
+                                <span className="text-sm font-medium text-gray-900 dark:text-white group-hover:text-purple-500">
+                                  {repo.name}
+                                </span>
+                              </div>
+                              {repo.private && (
+                                <span className="text-xs px-2 py-1 rounded-full bg-purple-500/10 text-purple-500">
+                                  Private
+                                </span>
+                              )}
+                            </div>
+                            {repo.description && (
+                              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
+                                {repo.description}
+                              </p>
+                            )}
+                            <div className="mt-2 flex items-center gap-3 text-xs text-gray-400 dark:text-gray-500">
+                              {repo.language && (
+                                <span className="flex items-center gap-1">
+                                  <div className="i-ph:code w-3 h-3" />
+                                  {repo.language}
+                                </span>
+                              )}
+                              <span className="flex items-center gap-1">
+                                <div className="i-ph:star w-3 h-3" />
+                                {repo.stargazers_count.toLocaleString()}
+                              </span>
+                              <span className="flex items-center gap-1">
+                                <div className="i-ph:git-fork w-3 h-3" />
+                                {repo.forks_count.toLocaleString()}
+                              </span>
+                              <span className="flex items-center gap-1">
+                                <div className="i-ph:clock w-3 h-3" />
+                                {new Date(repo.updated_at).toLocaleDateString()}
+                              </span>
+                            </div>
+                          </motion.button>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {isFetchingRepos && (
+                    <div className="flex items-center justify-center py-4 text-gray-500 dark:text-gray-400">
+                      <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4 mr-2" />
+                      Loading repositories...
+                    </div>
+                  )}
+
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      id="private"
+                      checked={isPrivate}
+                      onChange={(e) => setIsPrivate(e.target.checked)}
+                      className="rounded border-[#E5E5E5] dark:border-[#1A1A1A] text-purple-500 focus:ring-purple-500 dark:bg-[#0A0A0A]"
+                    />
+                    <label htmlFor="private" className="text-sm text-gray-600 dark:text-gray-400">
+                      Make repository private
+                    </label>
+                  </div>
+
+                  <div className="pt-4 flex gap-2">
+                    <motion.button
+                      type="button"
+                      onClick={handleClose}
+                      className="px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] text-gray-600 dark:text-gray-400 hover:bg-[#E5E5E5] dark:hover:bg-[#252525] text-sm"
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      Cancel
+                    </motion.button>
+                    <motion.button
+                      type="submit"
+                      disabled={isLoading}
+                      className={classNames(
+                        'flex-1 px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 text-sm inline-flex items-center justify-center gap-2',
+                        isLoading ? 'opacity-50 cursor-not-allowed' : '',
+                      )}
+                      whileHover={!isLoading ? { scale: 1.02 } : {}}
+                      whileTap={!isLoading ? { scale: 0.98 } : {}}
+                    >
+                      {isLoading ? (
+                        <>
+                          <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+                          Pushing...
+                        </>
+                      ) : (
+                        <>
+                          <div className="i-ph:git-branch w-4 h-4" />
+                          Push to GitHub
+                        </>
+                      )}
+                    </motion.button>
+                  </div>
+                </form>
+              </div>
+            </Dialog.Content>
+          </motion.div>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

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

@@ -0,0 +1,693 @@
+import type { GitHubRepoInfo, GitHubContent, RepositoryStats } from '~/types/GitHub';
+import { useState, useEffect } from 'react';
+import { toast } from 'react-toastify';
+import * as Dialog from '@radix-ui/react-dialog';
+import { classNames } from '~/utils/classNames';
+import { getLocalStorage } from '~/lib/persistence';
+import { motion } from 'framer-motion';
+import { formatSize } from '~/utils/formatSize';
+import { Input } from '~/components/ui/Input';
+
+interface GitHubTreeResponse {
+  tree: Array<{
+    path: string;
+    type: string;
+    size?: number;
+  }>;
+}
+
+interface RepositorySelectionDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelect: (url: string) => void;
+}
+
+interface SearchFilters {
+  language?: string;
+  stars?: number;
+  forks?: number;
+}
+
+interface StatsDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  stats: RepositoryStats;
+  isLargeRepo?: boolean;
+}
+
+function StatsDialog({ isOpen, onClose, onConfirm, stats, isLargeRepo }: StatsDialogProps) {
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
+        <div className="fixed inset-0 flex items-center justify-center z-[9999]">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.2 }}
+            className="w-[90vw] md:w-[500px]"
+          >
+            <Dialog.Content className="bg-white dark:bg-[#1E1E1E] rounded-lg border border-[#E5E5E5] dark:border-[#333333] shadow-xl">
+              <div className="p-6 space-y-4">
+                <div>
+                  <h3 className="text-lg font-medium text-[#111111] dark:text-white">Repository Overview</h3>
+                  <div className="mt-4 space-y-2">
+                    <p className="text-sm text-[#666666] dark:text-[#999999]">Repository Statistics:</p>
+                    <div className="space-y-2 text-sm text-[#111111] dark:text-white">
+                      <div className="flex items-center gap-2">
+                        <span className="i-ph:files text-purple-500 w-4 h-4" />
+                        <span>Total Files: {stats.totalFiles}</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <span className="i-ph:database text-purple-500 w-4 h-4" />
+                        <span>Total Size: {formatSize(stats.totalSize)}</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <span className="i-ph:code text-purple-500 w-4 h-4" />
+                        <span>
+                          Languages:{' '}
+                          {Object.entries(stats.languages)
+                            .sort(([, a], [, b]) => b - a)
+                            .slice(0, 3)
+                            .map(([lang, size]) => `${lang} (${formatSize(size)})`)
+                            .join(', ')}
+                        </span>
+                      </div>
+                      {stats.hasPackageJson && (
+                        <div className="flex items-center gap-2">
+                          <span className="i-ph:package text-purple-500 w-4 h-4" />
+                          <span>Has package.json</span>
+                        </div>
+                      )}
+                      {stats.hasDependencies && (
+                        <div className="flex items-center gap-2">
+                          <span className="i-ph:tree-structure text-purple-500 w-4 h-4" />
+                          <span>Has dependencies</span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  {isLargeRepo && (
+                    <div className="mt-4 p-3 bg-yellow-50 dark:bg-yellow-500/10 rounded-lg text-sm flex items-start gap-2">
+                      <span className="i-ph:warning text-yellow-600 dark:text-yellow-500 w-4 h-4 flex-shrink-0 mt-0.5" />
+                      <div className="text-yellow-800 dark:text-yellow-500">
+                        This repository is quite large ({formatSize(stats.totalSize)}). Importing it might take a while
+                        and could impact performance.
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="border-t border-[#E5E5E5] dark:border-[#333333] p-4 flex justify-end gap-3 bg-[#F9F9F9] dark:bg-[#252525] rounded-b-lg">
+                <button
+                  onClick={onClose}
+                  className="px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#333333] text-[#666666] hover:text-[#111111] dark:text-[#999999] dark:hover:text-white transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={onConfirm}
+                  className="px-4 py-2 rounded-lg bg-purple-500 text-white hover:bg-purple-600 transition-colors"
+                >
+                  OK
+                </button>
+              </div>
+            </Dialog.Content>
+          </motion.div>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+export function RepositorySelectionDialog({ isOpen, onClose, onSelect }: RepositorySelectionDialogProps) {
+  const [selectedRepository, setSelectedRepository] = useState<GitHubRepoInfo | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [repositories, setRepositories] = useState<GitHubRepoInfo[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<GitHubRepoInfo[]>([]);
+  const [activeTab, setActiveTab] = useState<'my-repos' | 'search' | 'url'>('my-repos');
+  const [customUrl, setCustomUrl] = useState('');
+  const [branches, setBranches] = useState<{ name: string; default?: boolean }[]>([]);
+  const [selectedBranch, setSelectedBranch] = useState('');
+  const [filters, setFilters] = useState<SearchFilters>({});
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [stats, setStats] = useState<RepositoryStats | null>(null);
+  const [showStatsDialog, setShowStatsDialog] = useState(false);
+  const [currentStats, setCurrentStats] = useState<RepositoryStats | null>(null);
+  const [pendingGitUrl, setPendingGitUrl] = useState<string>('');
+
+  // Fetch user's repositories when dialog opens
+  useEffect(() => {
+    if (isOpen && activeTab === 'my-repos') {
+      fetchUserRepos();
+    }
+  }, [isOpen, activeTab]);
+
+  const fetchUserRepos = async () => {
+    const connection = getLocalStorage('github_connection');
+
+    if (!connection?.token) {
+      toast.error('Please connect your GitHub account first');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('https://api.github.com/user/repos?sort=updated&per_page=100&type=all', {
+        headers: {
+          Authorization: `Bearer ${connection.token}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch repositories');
+      }
+
+      const data = await response.json();
+
+      // Add type assertion and validation
+      if (
+        Array.isArray(data) &&
+        data.every((item) => typeof item === 'object' && item !== null && 'full_name' in item)
+      ) {
+        setRepositories(data as GitHubRepoInfo[]);
+      } else {
+        throw new Error('Invalid repository data format');
+      }
+    } catch (error) {
+      console.error('Error fetching repos:', error);
+      toast.error('Failed to fetch your repositories');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSearch = async (query: string) => {
+    setIsLoading(true);
+    setSearchResults([]);
+
+    try {
+      let searchQuery = query;
+
+      if (filters.language) {
+        searchQuery += ` language:${filters.language}`;
+      }
+
+      if (filters.stars) {
+        searchQuery += ` stars:>${filters.stars}`;
+      }
+
+      if (filters.forks) {
+        searchQuery += ` forks:>${filters.forks}`;
+      }
+
+      const response = await fetch(
+        `https://api.github.com/search/repositories?q=${encodeURIComponent(searchQuery)}&sort=stars&order=desc`,
+        {
+          headers: {
+            Accept: 'application/vnd.github.v3+json',
+          },
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error('Failed to search repositories');
+      }
+
+      const data = await response.json();
+
+      // Add type assertion and validation
+      if (typeof data === 'object' && data !== null && 'items' in data && Array.isArray(data.items)) {
+        setSearchResults(data.items as GitHubRepoInfo[]);
+      } else {
+        throw new Error('Invalid search results format');
+      }
+    } catch (error) {
+      console.error('Error searching repos:', error);
+      toast.error('Failed to search repositories');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const fetchBranches = async (repo: GitHubRepoInfo) => {
+    setIsLoading(true);
+
+    try {
+      const response = await fetch(`https://api.github.com/repos/${repo.full_name}/branches`, {
+        headers: {
+          Authorization: `Bearer ${getLocalStorage('github_connection')?.token}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch branches');
+      }
+
+      const data = await response.json();
+
+      // Add type assertion and validation
+      if (Array.isArray(data) && data.every((item) => typeof item === 'object' && item !== null && 'name' in item)) {
+        setBranches(
+          data.map((branch) => ({
+            name: branch.name,
+            default: branch.name === repo.default_branch,
+          })),
+        );
+      } else {
+        throw new Error('Invalid branch data format');
+      }
+    } catch (error) {
+      console.error('Error fetching branches:', error);
+      toast.error('Failed to fetch branches');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleRepoSelect = async (repo: GitHubRepoInfo) => {
+    setSelectedRepository(repo);
+    await fetchBranches(repo);
+  };
+
+  const formatGitUrl = (url: string): string => {
+    // Remove any tree references and ensure .git extension
+    const baseUrl = url
+      .replace(/\/tree\/[^/]+/, '') // Remove /tree/branch-name
+      .replace(/\/$/, '') // Remove trailing slash
+      .replace(/\.git$/, ''); // Remove .git if present
+    return `${baseUrl}.git`;
+  };
+
+  const verifyRepository = async (repoUrl: string): Promise<RepositoryStats | null> => {
+    try {
+      const [owner, repo] = repoUrl
+        .replace(/\.git$/, '')
+        .split('/')
+        .slice(-2);
+
+      const connection = getLocalStorage('github_connection');
+      const headers: HeadersInit = connection?.token ? { Authorization: `Bearer ${connection.token}` } : {};
+
+      // Fetch repository tree
+      const treeResponse = await fetch(`https://api.github.com/repos/${owner}/${repo}/git/trees/main?recursive=1`, {
+        headers,
+      });
+
+      if (!treeResponse.ok) {
+        throw new Error('Failed to fetch repository structure');
+      }
+
+      const treeData = (await treeResponse.json()) as GitHubTreeResponse;
+
+      // Calculate repository stats
+      let totalSize = 0;
+      let totalFiles = 0;
+      const languages: { [key: string]: number } = {};
+      let hasPackageJson = false;
+      let hasDependencies = false;
+
+      for (const file of treeData.tree) {
+        if (file.type === 'blob') {
+          totalFiles++;
+
+          if (file.size) {
+            totalSize += file.size;
+          }
+
+          // Check for package.json
+          if (file.path === 'package.json') {
+            hasPackageJson = true;
+
+            // Fetch package.json content to check dependencies
+            const contentResponse = await fetch(`https://api.github.com/repos/${owner}/${repo}/contents/package.json`, {
+              headers,
+            });
+
+            if (contentResponse.ok) {
+              const content = (await contentResponse.json()) as GitHubContent;
+              const packageJson = JSON.parse(Buffer.from(content.content, 'base64').toString());
+              hasDependencies = !!(
+                packageJson.dependencies ||
+                packageJson.devDependencies ||
+                packageJson.peerDependencies
+              );
+            }
+          }
+
+          // Detect language based on file extension
+          const ext = file.path.split('.').pop()?.toLowerCase();
+
+          if (ext) {
+            languages[ext] = (languages[ext] || 0) + (file.size || 0);
+          }
+        }
+      }
+
+      const stats: RepositoryStats = {
+        totalFiles,
+        totalSize,
+        languages,
+        hasPackageJson,
+        hasDependencies,
+      };
+
+      setStats(stats);
+
+      return stats;
+    } catch (error) {
+      console.error('Error verifying repository:', error);
+      toast.error('Failed to verify repository');
+
+      return null;
+    }
+  };
+
+  const handleImport = async () => {
+    try {
+      let gitUrl: string;
+
+      if (activeTab === 'url' && customUrl) {
+        gitUrl = formatGitUrl(customUrl);
+      } else if (selectedRepository) {
+        gitUrl = formatGitUrl(selectedRepository.html_url);
+
+        if (selectedBranch) {
+          gitUrl = `${gitUrl}#${selectedBranch}`;
+        }
+      } else {
+        return;
+      }
+
+      // Verify repository before importing
+      const stats = await verifyRepository(gitUrl);
+
+      if (!stats) {
+        return;
+      }
+
+      setCurrentStats(stats);
+      setPendingGitUrl(gitUrl);
+      setShowStatsDialog(true);
+    } catch (error) {
+      console.error('Error preparing repository:', error);
+      toast.error('Failed to prepare repository. Please try again.');
+    }
+  };
+
+  const handleStatsConfirm = () => {
+    setShowStatsDialog(false);
+
+    if (pendingGitUrl) {
+      onSelect(pendingGitUrl);
+      onClose();
+    }
+  };
+
+  const handleFilterChange = (key: keyof SearchFilters, value: string) => {
+    let parsedValue: string | number | undefined = value;
+
+    if (key === 'stars' || key === 'forks') {
+      parsedValue = value ? parseInt(value, 10) : undefined;
+    }
+
+    setFilters((prev) => ({ ...prev, [key]: parsedValue }));
+    handleSearch(searchQuery);
+  };
+
+  // Handle dialog close properly
+  const handleClose = () => {
+    setIsLoading(false); // Reset loading state
+    setSearchQuery(''); // Reset search
+    setSearchResults([]); // Reset results
+    onClose();
+  };
+
+  return (
+    <Dialog.Root
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          handleClose();
+        }
+      }}
+    >
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50" />
+        <Dialog.Content className="fixed top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2 w-[90vw] md:w-[600px] max-h-[85vh] overflow-hidden bg-white dark:bg-[#1A1A1A] rounded-xl shadow-xl z-[51] border border-[#E5E5E5] dark:border-[#333333]">
+          <div className="p-4 border-b border-[#E5E5E5] dark:border-[#333333] flex items-center justify-between">
+            <Dialog.Title className="text-lg font-semibold text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
+              Import GitHub Repository
+            </Dialog.Title>
+            <Dialog.Close
+              onClick={handleClose}
+              className={classNames(
+                'p-2 rounded-lg transition-all duration-200 ease-in-out',
+                'text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary',
+                'dark:text-bolt-elements-textTertiary-dark dark:hover:text-bolt-elements-textPrimary-dark',
+                'hover:bg-bolt-elements-background-depth-2 dark:hover:bg-bolt-elements-background-depth-3',
+                'focus:outline-none focus:ring-2 focus:ring-bolt-elements-borderColor dark:focus:ring-bolt-elements-borderColor-dark',
+              )}
+            >
+              <span className="i-ph:x block w-5 h-5" aria-hidden="true" />
+              <span className="sr-only">Close dialog</span>
+            </Dialog.Close>
+          </div>
+
+          <div className="p-4">
+            <div className="flex gap-2 mb-4">
+              <TabButton active={activeTab === 'my-repos'} onClick={() => setActiveTab('my-repos')}>
+                <span className="i-ph:book-bookmark" />
+                My Repos
+              </TabButton>
+              <TabButton active={activeTab === 'search'} onClick={() => setActiveTab('search')}>
+                <span className="i-ph:magnifying-glass" />
+                Search
+              </TabButton>
+              <TabButton active={activeTab === 'url'} onClick={() => setActiveTab('url')}>
+                <span className="i-ph:link" />
+                URL
+              </TabButton>
+            </div>
+
+            {activeTab === 'url' ? (
+              <div className="space-y-4">
+                <Input
+                  placeholder="Enter repository URL"
+                  value={customUrl}
+                  onChange={(e) => setCustomUrl(e.target.value)}
+                  className={classNames('w-full', {
+                    'border-red-500': false,
+                  })}
+                />
+                <button
+                  onClick={handleImport}
+                  disabled={!customUrl}
+                  className="w-full h-10 px-4 py-2 rounded-lg bg-purple-500 text-white hover:bg-purple-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center gap-2 justify-center"
+                >
+                  Import Repository
+                </button>
+              </div>
+            ) : (
+              <>
+                {activeTab === 'search' && (
+                  <div className="space-y-4 mb-4">
+                    <div className="flex gap-2">
+                      <input
+                        type="text"
+                        placeholder="Search repositories..."
+                        value={searchQuery}
+                        onChange={(e) => {
+                          setSearchQuery(e.target.value);
+                          handleSearch(e.target.value);
+                        }}
+                        className="flex-1 px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#252525] border border-[#E5E5E5] dark:border-[#333333] text-bolt-elements-textPrimary"
+                      />
+                      <button
+                        onClick={() => setFilters({})}
+                        className="px-3 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#252525] text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary"
+                      >
+                        <span className="i-ph:funnel-simple" />
+                      </button>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <input
+                        type="text"
+                        placeholder="Filter by language..."
+                        value={filters.language || ''}
+                        onChange={(e) => {
+                          setFilters({ ...filters, language: e.target.value });
+                          handleSearch(searchQuery);
+                        }}
+                        className="px-3 py-1.5 text-sm rounded-lg bg-[#F5F5F5] dark:bg-[#252525] border border-[#E5E5E5] dark:border-[#333333]"
+                      />
+                      <input
+                        type="number"
+                        placeholder="Min stars..."
+                        value={filters.stars || ''}
+                        onChange={(e) => handleFilterChange('stars', e.target.value)}
+                        className="px-3 py-1.5 text-sm rounded-lg bg-[#F5F5F5] dark:bg-[#252525] border border-[#E5E5E5] dark:border-[#333333]"
+                      />
+                    </div>
+                    <input
+                      type="number"
+                      placeholder="Min forks..."
+                      value={filters.forks || ''}
+                      onChange={(e) => handleFilterChange('forks', e.target.value)}
+                      className="px-3 py-1.5 text-sm rounded-lg bg-[#F5F5F5] dark:bg-[#252525] border border-[#E5E5E5] dark:border-[#333333]"
+                    />
+                  </div>
+                )}
+
+                <div className="space-y-3 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
+                  {selectedRepository ? (
+                    <div className="space-y-4">
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => setSelectedRepository(null)}
+                          className="p-1.5 rounded-lg hover:bg-[#F5F5F5] dark:hover:bg-[#252525]"
+                        >
+                          <span className="i-ph:arrow-left w-4 h-4" />
+                        </button>
+                        <h3 className="font-medium">{selectedRepository.full_name}</h3>
+                      </div>
+                      <div className="space-y-2">
+                        <label className="text-sm text-bolt-elements-textSecondary">Select Branch</label>
+                        <select
+                          value={selectedBranch}
+                          onChange={(e) => setSelectedBranch(e.target.value)}
+                          className="w-full px-3 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark focus:outline-none focus:ring-2 focus:ring-bolt-elements-borderColor dark:focus:ring-bolt-elements-borderColor-dark"
+                        >
+                          {branches.map((branch) => (
+                            <option
+                              key={branch.name}
+                              value={branch.name}
+                              className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark"
+                            >
+                              {branch.name} {branch.default ? '(default)' : ''}
+                            </option>
+                          ))}
+                        </select>
+                        <button
+                          onClick={handleImport}
+                          className="w-full h-10 px-4 py-2 rounded-lg bg-purple-500 text-white hover:bg-purple-600 transition-all duration-200 flex items-center gap-2 justify-center"
+                        >
+                          Import Selected Branch
+                        </button>
+                      </div>
+                    </div>
+                  ) : (
+                    <RepositoryList
+                      repos={activeTab === 'my-repos' ? repositories : searchResults}
+                      isLoading={isLoading}
+                      onSelect={handleRepoSelect}
+                      activeTab={activeTab}
+                    />
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+      {currentStats && (
+        <StatsDialog
+          isOpen={showStatsDialog}
+          onClose={handleStatsConfirm}
+          onConfirm={handleStatsConfirm}
+          stats={currentStats}
+          isLargeRepo={currentStats.totalSize > 50 * 1024 * 1024}
+        />
+      )}
+    </Dialog.Root>
+  );
+}
+
+function TabButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
+  return (
+    <button
+      onClick={onClick}
+      className={classNames(
+        'px-4 py-2 h-10 rounded-lg transition-all duration-200 flex items-center gap-2 min-w-[120px] justify-center',
+        active
+          ? 'bg-purple-500 text-white hover:bg-purple-600'
+          : 'bg-[#F5F5F5] dark:bg-[#252525] text-bolt-elements-textPrimary dark:text-white hover:bg-[#E5E5E5] dark:hover:bg-[#333333] border border-[#E5E5E5] dark:border-[#333333]',
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+function RepositoryList({
+  repos,
+  isLoading,
+  onSelect,
+  activeTab,
+}: {
+  repos: GitHubRepoInfo[];
+  isLoading: boolean;
+  onSelect: (repo: GitHubRepoInfo) => void;
+  activeTab: string;
+}) {
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8 text-bolt-elements-textSecondary">
+        <span className="i-ph:spinner animate-spin mr-2" />
+        Loading repositories...
+      </div>
+    );
+  }
+
+  if (repos.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-8 text-bolt-elements-textSecondary">
+        <span className="i-ph:folder-simple-dashed w-12 h-12 mb-2 opacity-50" />
+        <p>{activeTab === 'my-repos' ? 'No repositories found' : 'Search for repositories'}</p>
+      </div>
+    );
+  }
+
+  return repos.map((repo) => <RepositoryCard key={repo.full_name} repo={repo} onSelect={() => onSelect(repo)} />);
+}
+
+function RepositoryCard({ repo, onSelect }: { repo: GitHubRepoInfo; onSelect: () => void }) {
+  return (
+    <div className="p-4 rounded-lg bg-[#F5F5F5] dark:bg-[#252525] border border-[#E5E5E5] dark:border-[#333333] hover:border-purple-500/50 transition-colors">
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <span className="i-ph:git-repository text-bolt-elements-textTertiary" />
+          <h3 className="font-medium text-bolt-elements-textPrimary dark:text-white">{repo.name}</h3>
+        </div>
+        <button
+          onClick={onSelect}
+          className="px-4 py-2 h-10 rounded-lg bg-purple-500 text-white hover:bg-purple-600 transition-all duration-200 flex items-center gap-2 min-w-[120px] justify-center"
+        >
+          <span className="i-ph:download-simple w-4 h-4" />
+          Import
+        </button>
+      </div>
+      {repo.description && <p className="text-sm text-bolt-elements-textSecondary mb-3">{repo.description}</p>}
+      <div className="flex items-center gap-4 text-sm text-bolt-elements-textTertiary">
+        {repo.language && (
+          <span className="flex items-center gap-1">
+            <span className="i-ph:code" />
+            {repo.language}
+          </span>
+        )}
+        <span className="flex items-center gap-1">
+          <span className="i-ph:star" />
+          {repo.stargazers_count.toLocaleString()}
+        </span>
+        <span className="flex items-center gap-1">
+          <span className="i-ph:clock" />
+          {new Date(repo.updated_at).toLocaleDateString()}
+        </span>
+      </div>
+    </div>
+  );
+}

app/components/@settings/tabs/connections/types/GitHub.ts

@@ -0,0 +1,95 @@
+export interface GitHubUserResponse {
+  login: string;
+  avatar_url: string;
+  html_url: string;
+  name: string;
+  bio: string;
+  public_repos: number;
+  followers: number;
+  following: number;
+  public_gists: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface GitHubRepoInfo {
+  name: string;
+  full_name: string;
+  html_url: string;
+  description: string;
+  stargazers_count: number;
+  forks_count: number;
+  default_branch: string;
+  updated_at: string;
+  language: string;
+  languages_url: string;
+}
+
+export interface GitHubOrganization {
+  login: string;
+  avatar_url: string;
+  description: string;
+  html_url: string;
+}
+
+export interface GitHubEvent {
+  id: string;
+  type: string;
+  created_at: string;
+  repo: {
+    name: string;
+    url: string;
+  };
+  payload: {
+    action?: string;
+    ref?: string;
+    ref_type?: string;
+    description?: string;
+  };
+}
+
+export interface GitHubLanguageStats {
+  [key: string]: number;
+}
+
+export interface GitHubStats {
+  repos: GitHubRepoInfo[];
+  totalStars: number;
+  totalForks: number;
+  organizations: GitHubOrganization[];
+  recentActivity: GitHubEvent[];
+  languages: GitHubLanguageStats;
+  totalGists: number;
+}
+
+export interface GitHubConnection {
+  user: GitHubUserResponse | null;
+  token: string;
+  tokenType: 'classic' | 'fine-grained';
+  stats?: GitHubStats;
+}
+
+export interface GitHubTokenInfo {
+  token: string;
+  scope: string[];
+  avatar_url: string;
+  name: string | null;
+  created_at: string;
+  followers: number;
+}
+
+export interface GitHubRateLimits {
+  limit: number;
+  remaining: number;
+  reset: Date;
+  used: number;
+}
+
+export interface GitHubAuthState {
+  username: string;
+  tokenInfo: GitHubTokenInfo | null;
+  isConnected: boolean;
+  isVerifying: boolean;
+  isLoadingRepos: boolean;
+  rateLimits?: GitHubRateLimits;
+}

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

@@ -0,0 +1,452 @@
+import { useState, useRef } from 'react';
+import { motion } from 'framer-motion';
+import { toast } from 'react-toastify';
+import { DialogRoot, DialogClose, Dialog, DialogTitle } from '~/components/ui/Dialog';
+import { db, getAll, deleteById } from '~/lib/persistence';
+
+export default function DataTab() {
+  const [isDownloadingTemplate, setIsDownloadingTemplate] = useState(false);
+  const [isImportingKeys, setIsImportingKeys] = useState(false);
+  const [isResetting, setIsResetting] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [showResetInlineConfirm, setShowResetInlineConfirm] = useState(false);
+  const [showDeleteInlineConfirm, setShowDeleteInlineConfirm] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const apiKeyFileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleExportAllChats = async () => {
+    try {
+      if (!db) {
+        throw new Error('Database not initialized');
+      }
+
+      // Get all chats from IndexedDB
+      const allChats = await getAll(db);
+      const exportData = {
+        chats: allChats,
+        exportDate: new Date().toISOString(),
+      };
+
+      // Download as JSON
+      const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `bolt-chats-${new Date().toISOString()}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      toast.success('Chats exported successfully');
+    } catch (error) {
+      console.error('Export error:', error);
+      toast.error('Failed to export chats');
+    }
+  };
+
+  const handleExportSettings = () => {
+    try {
+      const settings = {
+        userProfile: localStorage.getItem('bolt_user_profile'),
+        settings: localStorage.getItem('bolt_settings'),
+        exportDate: new Date().toISOString(),
+      };
+
+      const blob = new Blob([JSON.stringify(settings, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `bolt-settings-${new Date().toISOString()}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      toast.success('Settings exported successfully');
+    } catch (error) {
+      console.error('Export error:', error);
+      toast.error('Failed to export settings');
+    }
+  };
+
+  const handleImportSettings = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+
+    if (!file) {
+      return;
+    }
+
+    try {
+      const content = await file.text();
+      const settings = JSON.parse(content);
+
+      if (settings.userProfile) {
+        localStorage.setItem('bolt_user_profile', settings.userProfile);
+      }
+
+      if (settings.settings) {
+        localStorage.setItem('bolt_settings', settings.settings);
+      }
+
+      window.location.reload(); // Reload to apply settings
+      toast.success('Settings imported successfully');
+    } catch (error) {
+      console.error('Import error:', error);
+      toast.error('Failed to import settings');
+    }
+  };
+
+  const handleImportAPIKeys = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+
+    if (!file) {
+      return;
+    }
+
+    setIsImportingKeys(true);
+
+    try {
+      const content = await file.text();
+      const keys = JSON.parse(content);
+
+      // Validate and save each key
+      Object.entries(keys).forEach(([key, value]) => {
+        if (typeof value !== 'string') {
+          throw new Error(`Invalid value for key: ${key}`);
+        }
+
+        localStorage.setItem(`bolt_${key.toLowerCase()}`, value);
+      });
+
+      toast.success('API keys imported successfully');
+    } catch (error) {
+      console.error('Error importing API keys:', error);
+      toast.error('Failed to import API keys');
+    } finally {
+      setIsImportingKeys(false);
+
+      if (apiKeyFileInputRef.current) {
+        apiKeyFileInputRef.current.value = '';
+      }
+    }
+  };
+
+  const handleDownloadTemplate = () => {
+    setIsDownloadingTemplate(true);
+
+    try {
+      const template = {
+        Anthropic_API_KEY: '',
+        OpenAI_API_KEY: '',
+        Google_API_KEY: '',
+        Groq_API_KEY: '',
+        HuggingFace_API_KEY: '',
+        OpenRouter_API_KEY: '',
+        Deepseek_API_KEY: '',
+        Mistral_API_KEY: '',
+        OpenAILike_API_KEY: '',
+        Together_API_KEY: '',
+        xAI_API_KEY: '',
+        Perplexity_API_KEY: '',
+        Cohere_API_KEY: '',
+        AzureOpenAI_API_KEY: '',
+        OPENAI_LIKE_API_BASE_URL: '',
+        LMSTUDIO_API_BASE_URL: '',
+        OLLAMA_API_BASE_URL: '',
+        TOGETHER_API_BASE_URL: '',
+      };
+
+      const blob = new Blob([JSON.stringify(template, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'bolt-api-keys-template.json';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      toast.success('Template downloaded successfully');
+    } catch (error) {
+      console.error('Error downloading template:', error);
+      toast.error('Failed to download template');
+    } finally {
+      setIsDownloadingTemplate(false);
+    }
+  };
+
+  const handleResetSettings = async () => {
+    setIsResetting(true);
+
+    try {
+      // Clear all stored settings from localStorage
+      localStorage.removeItem('bolt_user_profile');
+      localStorage.removeItem('bolt_settings');
+      localStorage.removeItem('bolt_chat_history');
+
+      // Clear all data from IndexedDB
+      if (!db) {
+        throw new Error('Database not initialized');
+      }
+
+      // Get all chats and delete them
+      const chats = await getAll(db as IDBDatabase);
+      const deletePromises = chats.map((chat) => deleteById(db as IDBDatabase, chat.id));
+      await Promise.all(deletePromises);
+
+      // Close the dialog first
+      setShowResetInlineConfirm(false);
+
+      // Then reload and show success message
+      window.location.reload();
+      toast.success('Settings reset successfully');
+    } catch (error) {
+      console.error('Reset error:', error);
+      setShowResetInlineConfirm(false);
+      toast.error('Failed to reset settings');
+    } finally {
+      setIsResetting(false);
+    }
+  };
+
+  const handleDeleteAllChats = async () => {
+    setIsDeleting(true);
+
+    try {
+      // Clear chat history from localStorage
+      localStorage.removeItem('bolt_chat_history');
+
+      // Clear chats from IndexedDB
+      if (!db) {
+        throw new Error('Database not initialized');
+      }
+
+      // Get all chats and delete them one by one
+      const chats = await getAll(db as IDBDatabase);
+      const deletePromises = chats.map((chat) => deleteById(db as IDBDatabase, chat.id));
+      await Promise.all(deletePromises);
+
+      // Close the dialog first
+      setShowDeleteInlineConfirm(false);
+
+      // Then show the success message
+      toast.success('Chat history deleted successfully');
+    } catch (error) {
+      console.error('Delete error:', error);
+      setShowDeleteInlineConfirm(false);
+      toast.error('Failed to delete chat history');
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <input ref={fileInputRef} type="file" accept=".json" onChange={handleImportSettings} className="hidden" />
+      {/* Reset Settings Dialog */}
+      <DialogRoot open={showResetInlineConfirm} onOpenChange={setShowResetInlineConfirm}>
+        <Dialog showCloseButton={false} className="z-[1000]">
+          <div className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:warning-circle-fill w-5 h-5 text-yellow-500" />
+              <DialogTitle>Reset All Settings?</DialogTitle>
+            </div>
+            <p className="text-sm text-bolt-elements-textSecondary mt-2">
+              This will reset all your settings to their default values. This action cannot be undone.
+            </p>
+            <div className="flex justify-end items-center gap-3 mt-6">
+              <DialogClose asChild>
+                <button className="px-4 py-2 rounded-lg text-sm bg-[#F5F5F5] dark:bg-[#1A1A1A] text-[#666666] dark:text-[#999999] hover:text-[#333333] dark:hover:text-white">
+                  Cancel
+                </button>
+              </DialogClose>
+              <motion.button
+                className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm bg-white dark:bg-[#1A1A1A] text-yellow-600 dark:text-yellow-500 hover:bg-yellow-50 dark:hover:bg-yellow-500/10 border border-transparent hover:border-yellow-500/10 dark:hover:border-yellow-500/20"
+                onClick={handleResetSettings}
+                disabled={isResetting}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                {isResetting ? (
+                  <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+                ) : (
+                  <div className="i-ph:arrow-counter-clockwise w-4 h-4" />
+                )}
+                Reset Settings
+              </motion.button>
+            </div>
+          </div>
+        </Dialog>
+      </DialogRoot>
+
+      {/* Delete Confirmation Dialog */}
+      <DialogRoot open={showDeleteInlineConfirm} onOpenChange={setShowDeleteInlineConfirm}>
+        <Dialog showCloseButton={false} className="z-[1000]">
+          <div className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:warning-circle-fill w-5 h-5 text-red-500" />
+              <DialogTitle>Delete All Chats?</DialogTitle>
+            </div>
+            <p className="text-sm text-bolt-elements-textSecondary mt-2">
+              This will permanently delete all your chat history. This action cannot be undone.
+            </p>
+            <div className="flex justify-end items-center gap-3 mt-6">
+              <DialogClose asChild>
+                <button className="px-4 py-2 rounded-lg text-sm bg-[#F5F5F5] dark:bg-[#1A1A1A] text-[#666666] dark:text-[#999999] hover:text-[#333333] dark:hover:text-white">
+                  Cancel
+                </button>
+              </DialogClose>
+              <motion.button
+                className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm bg-white dark:bg-[#1A1A1A] text-red-500 dark:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 border border-transparent hover:border-red-500/10 dark:hover:border-red-500/20"
+                onClick={handleDeleteAllChats}
+                disabled={isDeleting}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                {isDeleting ? (
+                  <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+                ) : (
+                  <div className="i-ph:trash w-4 h-4" />
+                )}
+                Delete All
+              </motion.button>
+            </div>
+          </div>
+        </Dialog>
+      </DialogRoot>
+
+      {/* Chat History Section */}
+      <motion.div
+        className="bg-white dark:bg-[#0A0A0A] rounded-lg p-6 border border-[#E5E5E5] dark:border-[#1A1A1A]"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+      >
+        <div className="flex items-center gap-2 mb-2">
+          <div className="i-ph:chat-circle-duotone w-5 h-5 text-purple-500" />
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white">Chat History</h3>
+        </div>
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Export or delete all your chat history.</p>
+        <div className="flex gap-4">
+          <motion.button
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={handleExportAllChats}
+          >
+            <div className="i-ph:download-simple w-4 h-4" />
+            Export All Chats
+          </motion.button>
+          <motion.button
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-red-50 text-red-500 text-sm hover:bg-red-100 dark:bg-red-500/10 dark:hover:bg-red-500/20"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={() => setShowDeleteInlineConfirm(true)}
+          >
+            <div className="i-ph:trash w-4 h-4" />
+            Delete All Chats
+          </motion.button>
+        </div>
+      </motion.div>
+
+      {/* Settings Backup Section */}
+      <motion.div
+        className="bg-white dark:bg-[#0A0A0A] rounded-lg p-6 border border-[#E5E5E5] dark:border-[#1A1A1A]"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.2 }}
+      >
+        <div className="flex items-center gap-2 mb-2">
+          <div className="i-ph:gear-duotone w-5 h-5 text-purple-500" />
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white">Settings Backup</h3>
+        </div>
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+          Export your settings to a JSON file or import settings from a previously exported file.
+        </p>
+        <div className="flex gap-4">
+          <motion.button
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={handleExportSettings}
+          >
+            <div className="i-ph:download-simple w-4 h-4" />
+            Export Settings
+          </motion.button>
+          <motion.button
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={() => fileInputRef.current?.click()}
+          >
+            <div className="i-ph:upload-simple w-4 h-4" />
+            Import Settings
+          </motion.button>
+          <motion.button
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-yellow-50 text-yellow-600 text-sm hover:bg-yellow-100 dark:bg-yellow-500/10 dark:hover:bg-yellow-500/20 dark:text-yellow-500"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={() => setShowResetInlineConfirm(true)}
+          >
+            <div className="i-ph:arrow-counter-clockwise w-4 h-4" />
+            Reset Settings
+          </motion.button>
+        </div>
+      </motion.div>
+
+      {/* API Keys Management Section */}
+      <motion.div
+        className="bg-white dark:bg-[#0A0A0A] rounded-lg p-6 border border-[#E5E5E5] dark:border-[#1A1A1A]"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.3 }}
+      >
+        <div className="flex items-center gap-2 mb-2">
+          <div className="i-ph:key-duotone w-5 h-5 text-purple-500" />
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white">API Keys Management</h3>
+        </div>
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+          Import API keys from a JSON file or download a template to fill in your keys.
+        </p>
+        <div className="flex gap-4">
+          <input
+            ref={apiKeyFileInputRef}
+            type="file"
+            accept=".json"
+            onChange={handleImportAPIKeys}
+            className="hidden"
+          />
+          <motion.button
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={handleDownloadTemplate}
+            disabled={isDownloadingTemplate}
+          >
+            {isDownloadingTemplate ? (
+              <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+            ) : (
+              <div className="i-ph:download-simple w-4 h-4" />
+            )}
+            Download Template
+          </motion.button>
+          <motion.button
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={() => apiKeyFileInputRef.current?.click()}
+            disabled={isImportingKeys}
+          >
+            {isImportingKeys ? (
+              <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+            ) : (
+              <div className="i-ph:upload-simple w-4 h-4" />
+            )}
+            Import API Keys
+          </motion.button>
+        </div>
+      </motion.div>
+    </div>
+  );
+}

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

@@ -0,0 +1,2045 @@
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import { toast } from 'react-toastify';
+import { classNames } from '~/utils/classNames';
+import { logStore, type LogEntry } from '~/lib/stores/logs';
+import { useStore } from '@nanostores/react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '~/components/ui/Collapsible';
+import { Progress } from '~/components/ui/Progress';
+import { ScrollArea } from '~/components/ui/ScrollArea';
+import { Badge } from '~/components/ui/Badge';
+import { Dialog, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
+import { jsPDF } from 'jspdf';
+import { useSettings } from '~/lib/hooks/useSettings';
+
+interface SystemInfo {
+  os: string;
+  arch: string;
+  platform: string;
+  cpus: string;
+  memory: {
+    total: string;
+    free: string;
+    used: string;
+    percentage: number;
+  };
+  node: string;
+  browser: {
+    name: string;
+    version: string;
+    language: string;
+    userAgent: string;
+    cookiesEnabled: boolean;
+    online: boolean;
+    platform: string;
+    cores: number;
+  };
+  screen: {
+    width: number;
+    height: number;
+    colorDepth: number;
+    pixelRatio: number;
+  };
+  time: {
+    timezone: string;
+    offset: number;
+    locale: string;
+  };
+  performance: {
+    memory: {
+      jsHeapSizeLimit: number;
+      totalJSHeapSize: number;
+      usedJSHeapSize: number;
+      usagePercentage: number;
+    };
+    timing: {
+      loadTime: number;
+      domReadyTime: number;
+      readyStart: number;
+      redirectTime: number;
+      appcacheTime: number;
+      unloadEventTime: number;
+      lookupDomainTime: number;
+      connectTime: number;
+      requestTime: number;
+      initDomTreeTime: number;
+      loadEventTime: number;
+    };
+    navigation: {
+      type: number;
+      redirectCount: number;
+    };
+  };
+  network: {
+    downlink: number;
+    effectiveType: string;
+    rtt: number;
+    saveData: boolean;
+    type: string;
+  };
+  battery?: {
+    charging: boolean;
+    chargingTime: number;
+    dischargingTime: number;
+    level: number;
+  };
+  storage: {
+    quota: number;
+    usage: number;
+    persistent: boolean;
+    temporary: boolean;
+  };
+}
+
+interface GitHubRepoInfo {
+  fullName: string;
+  defaultBranch: string;
+  stars: number;
+  forks: number;
+  openIssues?: number;
+}
+
+interface GitInfo {
+  local: {
+    commitHash: string;
+    branch: string;
+    commitTime: string;
+    author: string;
+    email: string;
+    remoteUrl: string;
+    repoName: string;
+  };
+  github?: {
+    currentRepo: GitHubRepoInfo;
+    upstream?: GitHubRepoInfo;
+  };
+  isForked?: boolean;
+}
+
+interface WebAppInfo {
+  name: string;
+  version: string;
+  description: string;
+  license: string;
+  environment: string;
+  timestamp: string;
+  runtimeInfo: {
+    nodeVersion: string;
+  };
+  dependencies: {
+    production: Array<{ name: string; version: string; type: string }>;
+    development: Array<{ name: string; version: string; type: string }>;
+    peer: Array<{ name: string; version: string; type: string }>;
+    optional: Array<{ name: string; version: string; type: string }>;
+  };
+  gitInfo: GitInfo;
+}
+
+// Add Ollama service status interface
+interface OllamaServiceStatus {
+  isRunning: boolean;
+  lastChecked: Date;
+  error?: string;
+  models?: Array<{
+    name: string;
+    size: string;
+    quantization: string;
+  }>;
+}
+
+interface ExportFormat {
+  id: string;
+  label: string;
+  icon: string;
+  handler: () => void;
+}
+
+const DependencySection = ({
+  title,
+  deps,
+}: {
+  title: string;
+  deps: Array<{ name: string; version: string; type: string }>;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (deps.length === 0) {
+    return null;
+  }
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <CollapsibleTrigger
+        className={classNames(
+          'flex w-full items-center justify-between p-4',
+          'bg-white dark:bg-[#0A0A0A]',
+          'hover:bg-purple-50/50 dark:hover:bg-[#1a1a1a]',
+          'border-b border-[#E5E5E5] dark:border-[#1A1A1A]',
+          'transition-colors duration-200',
+          'first:rounded-t-lg last:rounded-b-lg',
+          { 'hover:rounded-lg': !isOpen },
+        )}
+      >
+        <div className="flex items-center gap-3">
+          <div className="i-ph:package text-bolt-elements-textSecondary w-4 h-4" />
+          <span className="text-base text-bolt-elements-textPrimary">
+            {title} Dependencies ({deps.length})
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-bolt-elements-textSecondary">{isOpen ? 'Hide' : 'Show'}</span>
+          <div
+            className={classNames(
+              'i-ph:caret-down w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary',
+              isOpen ? 'rotate-180' : '',
+            )}
+          />
+        </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <ScrollArea
+          className={classNames(
+            'h-[200px] w-full',
+            'bg-white dark:bg-[#0A0A0A]',
+            'border-b border-[#E5E5E5] dark:border-[#1A1A1A]',
+            'last:rounded-b-lg last:border-b-0',
+          )}
+        >
+          <div className="space-y-2 p-4">
+            {deps.map((dep) => (
+              <div key={dep.name} className="flex items-center justify-between text-sm">
+                <span className="text-bolt-elements-textPrimary">{dep.name}</span>
+                <span className="text-bolt-elements-textSecondary">{dep.version}</span>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+export default function DebugTab() {
+  const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null);
+  const [webAppInfo, setWebAppInfo] = useState<WebAppInfo | null>(null);
+  const [ollamaStatus, setOllamaStatus] = useState<OllamaServiceStatus>({
+    isRunning: false,
+    lastChecked: new Date(),
+  });
+  const [loading, setLoading] = useState({
+    systemInfo: false,
+    webAppInfo: false,
+    errors: false,
+    performance: false,
+  });
+  const [openSections, setOpenSections] = useState({
+    system: false,
+    webapp: false,
+    errors: false,
+    performance: false,
+  });
+
+  const { providers } = useSettings();
+
+  // Subscribe to logStore updates
+  const logs = useStore(logStore.logs);
+  const errorLogs = useMemo(() => {
+    return Object.values(logs).filter(
+      (log): log is LogEntry => typeof log === 'object' && log !== null && 'level' in log && log.level === 'error',
+    );
+  }, [logs]);
+
+  // Set up error listeners when component mounts
+  useEffect(() => {
+    const handleError = (event: ErrorEvent) => {
+      logStore.logError(event.message, event.error, {
+        filename: event.filename,
+        lineNumber: event.lineno,
+        columnNumber: event.colno,
+      });
+    };
+
+    const handleRejection = (event: PromiseRejectionEvent) => {
+      logStore.logError('Unhandled Promise Rejection', event.reason);
+    };
+
+    window.addEventListener('error', handleError);
+    window.addEventListener('unhandledrejection', handleRejection);
+
+    return () => {
+      window.removeEventListener('error', handleError);
+      window.removeEventListener('unhandledrejection', handleRejection);
+    };
+  }, []);
+
+  // Check for errors when the errors section is opened
+  useEffect(() => {
+    if (openSections.errors) {
+      checkErrors();
+    }
+  }, [openSections.errors]);
+
+  // Load initial data when component mounts
+  useEffect(() => {
+    const loadInitialData = async () => {
+      await Promise.all([getSystemInfo(), getWebAppInfo()]);
+    };
+
+    loadInitialData();
+  }, []);
+
+  // Refresh data when sections are opened
+  useEffect(() => {
+    if (openSections.system) {
+      getSystemInfo();
+    }
+
+    if (openSections.webapp) {
+      getWebAppInfo();
+    }
+  }, [openSections.system, openSections.webapp]);
+
+  // Add periodic refresh of git info
+  useEffect(() => {
+    if (!openSections.webapp) {
+      return undefined;
+    }
+
+    // Initial fetch
+    const fetchGitInfo = async () => {
+      try {
+        const response = await fetch('/api/system/git-info');
+        const updatedGitInfo = (await response.json()) as GitInfo;
+
+        setWebAppInfo((prev) => {
+          if (!prev) {
+            return null;
+          }
+
+          // Only update if the data has changed
+          if (JSON.stringify(prev.gitInfo) === JSON.stringify(updatedGitInfo)) {
+            return prev;
+          }
+
+          return {
+            ...prev,
+            gitInfo: updatedGitInfo,
+          };
+        });
+      } catch (error) {
+        console.error('Failed to fetch git info:', error);
+      }
+    };
+
+    fetchGitInfo();
+
+    // Refresh every 5 minutes instead of every second
+    const interval = setInterval(fetchGitInfo, 5 * 60 * 1000);
+
+    return () => clearInterval(interval);
+  }, [openSections.webapp]);
+
+  const getSystemInfo = async () => {
+    try {
+      setLoading((prev) => ({ ...prev, systemInfo: true }));
+
+      // Get browser info
+      const ua = navigator.userAgent;
+      const browserName = ua.includes('Firefox')
+        ? 'Firefox'
+        : ua.includes('Chrome')
+          ? 'Chrome'
+          : ua.includes('Safari')
+            ? 'Safari'
+            : ua.includes('Edge')
+              ? 'Edge'
+              : 'Unknown';
+      const browserVersion = ua.match(/(Firefox|Chrome|Safari|Edge)\/([0-9.]+)/)?.[2] || 'Unknown';
+
+      // Get performance metrics
+      const memory = (performance as any).memory || {};
+      const timing = performance.timing;
+      const navigation = performance.navigation;
+      const connection = (navigator as any).connection;
+
+      // Get battery info
+      let batteryInfo;
+
+      try {
+        const battery = await (navigator as any).getBattery();
+        batteryInfo = {
+          charging: battery.charging,
+          chargingTime: battery.chargingTime,
+          dischargingTime: battery.dischargingTime,
+          level: battery.level * 100,
+        };
+      } catch {
+        console.log('Battery API not supported');
+      }
+
+      // Get storage info
+      let storageInfo = {
+        quota: 0,
+        usage: 0,
+        persistent: false,
+        temporary: false,
+      };
+
+      try {
+        const storage = await navigator.storage.estimate();
+        const persistent = await navigator.storage.persist();
+        storageInfo = {
+          quota: storage.quota || 0,
+          usage: storage.usage || 0,
+          persistent,
+          temporary: !persistent,
+        };
+      } catch {
+        console.log('Storage API not supported');
+      }
+
+      // Get memory info from browser performance API
+      const performanceMemory = (performance as any).memory || {};
+      const totalMemory = performanceMemory.jsHeapSizeLimit || 0;
+      const usedMemory = performanceMemory.usedJSHeapSize || 0;
+      const freeMemory = totalMemory - usedMemory;
+      const memoryPercentage = totalMemory ? (usedMemory / totalMemory) * 100 : 0;
+
+      const systemInfo: SystemInfo = {
+        os: navigator.platform,
+        arch: navigator.userAgent.includes('x64') ? 'x64' : navigator.userAgent.includes('arm') ? 'arm' : 'unknown',
+        platform: navigator.platform,
+        cpus: navigator.hardwareConcurrency + ' cores',
+        memory: {
+          total: formatBytes(totalMemory),
+          free: formatBytes(freeMemory),
+          used: formatBytes(usedMemory),
+          percentage: Math.round(memoryPercentage),
+        },
+        node: 'browser',
+        browser: {
+          name: browserName,
+          version: browserVersion,
+          language: navigator.language,
+          userAgent: navigator.userAgent,
+          cookiesEnabled: navigator.cookieEnabled,
+          online: navigator.onLine,
+          platform: navigator.platform,
+          cores: navigator.hardwareConcurrency,
+        },
+        screen: {
+          width: window.screen.width,
+          height: window.screen.height,
+          colorDepth: window.screen.colorDepth,
+          pixelRatio: window.devicePixelRatio,
+        },
+        time: {
+          timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+          offset: new Date().getTimezoneOffset(),
+          locale: navigator.language,
+        },
+        performance: {
+          memory: {
+            jsHeapSizeLimit: memory.jsHeapSizeLimit || 0,
+            totalJSHeapSize: memory.totalJSHeapSize || 0,
+            usedJSHeapSize: memory.usedJSHeapSize || 0,
+            usagePercentage: memory.totalJSHeapSize ? (memory.usedJSHeapSize / memory.totalJSHeapSize) * 100 : 0,
+          },
+          timing: {
+            loadTime: timing.loadEventEnd - timing.navigationStart,
+            domReadyTime: timing.domContentLoadedEventEnd - timing.navigationStart,
+            readyStart: timing.fetchStart - timing.navigationStart,
+            redirectTime: timing.redirectEnd - timing.redirectStart,
+            appcacheTime: timing.domainLookupStart - timing.fetchStart,
+            unloadEventTime: timing.unloadEventEnd - timing.unloadEventStart,
+            lookupDomainTime: timing.domainLookupEnd - timing.domainLookupStart,
+            connectTime: timing.connectEnd - timing.connectStart,
+            requestTime: timing.responseEnd - timing.requestStart,
+            initDomTreeTime: timing.domInteractive - timing.responseEnd,
+            loadEventTime: timing.loadEventEnd - timing.loadEventStart,
+          },
+          navigation: {
+            type: navigation.type,
+            redirectCount: navigation.redirectCount,
+          },
+        },
+        network: {
+          downlink: connection?.downlink || 0,
+          effectiveType: connection?.effectiveType || 'unknown',
+          rtt: connection?.rtt || 0,
+          saveData: connection?.saveData || false,
+          type: connection?.type || 'unknown',
+        },
+        battery: batteryInfo,
+        storage: storageInfo,
+      };
+
+      setSystemInfo(systemInfo);
+      toast.success('System information updated');
+    } catch (error) {
+      toast.error('Failed to get system information');
+      console.error('Failed to get system information:', error);
+    } finally {
+      setLoading((prev) => ({ ...prev, systemInfo: false }));
+    }
+  };
+
+  const getWebAppInfo = async () => {
+    try {
+      setLoading((prev) => ({ ...prev, webAppInfo: true }));
+
+      const [appResponse, gitResponse] = await Promise.all([
+        fetch('/api/system/app-info'),
+        fetch('/api/system/git-info'),
+      ]);
+
+      if (!appResponse.ok || !gitResponse.ok) {
+        throw new Error('Failed to fetch webapp info');
+      }
+
+      const appData = (await appResponse.json()) as Omit<WebAppInfo, 'gitInfo'>;
+      const gitData = (await gitResponse.json()) as GitInfo;
+
+      console.log('Git Info Response:', gitData); // Add logging to debug
+
+      setWebAppInfo({
+        ...appData,
+        gitInfo: gitData,
+      });
+
+      toast.success('WebApp information updated');
+
+      return true;
+    } catch (error) {
+      console.error('Failed to fetch webapp info:', error);
+      toast.error('Failed to fetch webapp information');
+      setWebAppInfo(null);
+
+      return false;
+    } finally {
+      setLoading((prev) => ({ ...prev, webAppInfo: false }));
+    }
+  };
+
+  // Helper function to format bytes to human readable format
+  const formatBytes = (bytes: number) => {
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let size = bytes;
+    let unitIndex = 0;
+
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024;
+      unitIndex++;
+    }
+
+    return `${Math.round(size)} ${units[unitIndex]}`;
+  };
+
+  const handleLogPerformance = () => {
+    try {
+      setLoading((prev) => ({ ...prev, performance: true }));
+
+      // Get performance metrics using modern Performance API
+      const performanceEntries = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
+      const memory = (performance as any).memory;
+
+      // Calculate timing metrics
+      const timingMetrics = {
+        loadTime: performanceEntries.loadEventEnd - performanceEntries.startTime,
+        domReadyTime: performanceEntries.domContentLoadedEventEnd - performanceEntries.startTime,
+        fetchTime: performanceEntries.responseEnd - performanceEntries.fetchStart,
+        redirectTime: performanceEntries.redirectEnd - performanceEntries.redirectStart,
+        dnsTime: performanceEntries.domainLookupEnd - performanceEntries.domainLookupStart,
+        tcpTime: performanceEntries.connectEnd - performanceEntries.connectStart,
+        ttfb: performanceEntries.responseStart - performanceEntries.requestStart,
+        processingTime: performanceEntries.loadEventEnd - performanceEntries.responseEnd,
+      };
+
+      // Get resource timing data
+      const resourceEntries = performance.getEntriesByType('resource');
+      const resourceStats = {
+        totalResources: resourceEntries.length,
+        totalSize: resourceEntries.reduce((total, entry) => total + ((entry as any).transferSize || 0), 0),
+        totalTime: Math.max(...resourceEntries.map((entry) => entry.duration)),
+      };
+
+      // Get memory metrics
+      const memoryMetrics = memory
+        ? {
+            jsHeapSizeLimit: memory.jsHeapSizeLimit,
+            totalJSHeapSize: memory.totalJSHeapSize,
+            usedJSHeapSize: memory.usedJSHeapSize,
+            heapUtilization: (memory.usedJSHeapSize / memory.totalJSHeapSize) * 100,
+          }
+        : null;
+
+      // Get frame rate metrics
+      let fps = 0;
+
+      if ('requestAnimationFrame' in window) {
+        const times: number[] = [];
+
+        function calculateFPS(now: number) {
+          times.push(now);
+
+          if (times.length > 10) {
+            const fps = Math.round((1000 * 10) / (now - times[0]));
+            times.shift();
+
+            return fps;
+          }
+
+          requestAnimationFrame(calculateFPS);
+
+          return 0;
+        }
+
+        fps = calculateFPS(performance.now());
+      }
+
+      // Log all performance metrics
+      logStore.logSystem('Performance Metrics', {
+        timing: timingMetrics,
+        resources: resourceStats,
+        memory: memoryMetrics,
+        fps,
+        timestamp: new Date().toISOString(),
+        navigationEntry: {
+          type: performanceEntries.type,
+          redirectCount: performanceEntries.redirectCount,
+        },
+      });
+
+      toast.success('Performance metrics logged');
+    } catch (error) {
+      toast.error('Failed to log performance metrics');
+      console.error('Failed to log performance metrics:', error);
+    } finally {
+      setLoading((prev) => ({ ...prev, performance: false }));
+    }
+  };
+
+  const checkErrors = async () => {
+    try {
+      setLoading((prev) => ({ ...prev, errors: true }));
+
+      // Get errors from log store
+      const storedErrors = errorLogs;
+
+      if (storedErrors.length === 0) {
+        toast.success('No errors found');
+      } else {
+        toast.warning(`Found ${storedErrors.length} error(s)`);
+      }
+    } catch (error) {
+      toast.error('Failed to check errors');
+      console.error('Failed to check errors:', error);
+    } finally {
+      setLoading((prev) => ({ ...prev, errors: false }));
+    }
+  };
+
+  const exportDebugInfo = () => {
+    try {
+      const debugData = {
+        timestamp: new Date().toISOString(),
+        system: systemInfo,
+        webApp: webAppInfo,
+        errors: logStore.getLogs().filter((log: LogEntry) => log.level === 'error'),
+        performance: {
+          memory: (performance as any).memory || {},
+          timing: performance.timing,
+          navigation: performance.navigation,
+        },
+      };
+
+      const blob = new Blob([JSON.stringify(debugData, null, 2)], { type: 'application/json' });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `bolt-debug-info-${new Date().toISOString()}.json`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+      toast.success('Debug information exported successfully');
+    } catch (error) {
+      console.error('Failed to export debug info:', error);
+      toast.error('Failed to export debug information');
+    }
+  };
+
+  const exportAsCSV = () => {
+    try {
+      const debugData = {
+        system: systemInfo,
+        webApp: webAppInfo,
+        errors: logStore.getLogs().filter((log: LogEntry) => log.level === 'error'),
+        performance: {
+          memory: (performance as any).memory || {},
+          timing: performance.timing,
+          navigation: performance.navigation,
+        },
+      };
+
+      // Convert the data to CSV format
+      const csvData = [
+        ['Category', 'Key', 'Value'],
+        ...Object.entries(debugData).flatMap(([category, data]) =>
+          Object.entries(data || {}).map(([key, value]) => [
+            category,
+            key,
+            typeof value === 'object' ? JSON.stringify(value) : String(value),
+          ]),
+        ),
+      ];
+
+      // Create CSV content
+      const csvContent = csvData.map((row) => row.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-debug-info-${new Date().toISOString()}.csv`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+      toast.success('Debug information exported as CSV');
+    } catch (error) {
+      console.error('Failed to export CSV:', error);
+      toast.error('Failed to export debug information as CSV');
+    }
+  };
+
+  const exportAsPDF = () => {
+    try {
+      const debugData = {
+        system: systemInfo,
+        webApp: webAppInfo,
+        errors: logStore.getLogs().filter((log: LogEntry) => log.level === 'error'),
+        performance: {
+          memory: (performance as any).memory || {},
+          timing: performance.timing,
+          navigation: performance.navigation,
+        },
+      };
+
+      // 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;
+
+      // Add key-value pair with better formatting
+      const addKeyValue = (key: string, value: any, indent = 0) => {
+        // Check if we need a new page
+        if (yPos > doc.internal.pageSize.getHeight() - 20) {
+          doc.addPage();
+          yPos = margin;
+        }
+
+        doc.setFontSize(10);
+        doc.setTextColor('#374151');
+        doc.setFont('helvetica', 'bold');
+
+        // Format the key with proper spacing
+        const formattedKey = key.replace(/([A-Z])/g, ' $1').trim();
+        doc.text(formattedKey + ':', margin + indent, yPos);
+        doc.setFont('helvetica', 'normal');
+        doc.setTextColor('#6B7280');
+
+        let valueText;
+
+        if (typeof value === 'object' && value !== null) {
+          // Skip rendering if value is empty object
+          if (Object.keys(value).length === 0) {
+            return;
+          }
+
+          yPos += lineHeight;
+          Object.entries(value).forEach(([subKey, subValue]) => {
+            // Check for page break before each sub-item
+            if (yPos > doc.internal.pageSize.getHeight() - 20) {
+              doc.addPage();
+              yPos = margin;
+            }
+
+            const formattedSubKey = subKey.replace(/([A-Z])/g, ' $1').trim();
+            addKeyValue(formattedSubKey, subValue, indent + 10);
+          });
+
+          return;
+        } else {
+          valueText = String(value);
+        }
+
+        const valueX = margin + indent + doc.getTextWidth(formattedKey + ': ');
+        const maxValueWidth = maxLineWidth - indent - doc.getTextWidth(formattedKey + ': ');
+        const lines = doc.splitTextToSize(valueText, maxValueWidth);
+
+        // Check if we need a new page for the value
+        if (yPos + lines.length * lineHeight > doc.internal.pageSize.getHeight() - 20) {
+          doc.addPage();
+          yPos = margin;
+        }
+
+        doc.text(lines, valueX, yPos);
+        yPos += lines.length * lineHeight;
+      };
+
+      // Add section header with page break check
+      const addSectionHeader = (title: string) => {
+        // Check if we need a new page
+        if (yPos + 20 > doc.internal.pageSize.getHeight() - 20) {
+          doc.addPage();
+          yPos = margin;
+        }
+
+        yPos += lineHeight;
+        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);
+        doc.setFont('helvetica', 'normal');
+        yPos += lineHeight * 1.5;
+      };
+
+      // Add horizontal line with page break check
+      const addHorizontalLine = () => {
+        // Check if we need a new page
+        if (yPos + 10 > doc.internal.pageSize.getHeight() - 20) {
+          doc.addPage();
+          yPos = margin;
+
+          return; // Skip drawing line if we just started a new page
+        }
+
+        doc.setDrawColor('#E5E5E5');
+        doc.line(margin, yPos, pageWidth - margin, yPos);
+        yPos += lineHeight;
+      };
+
+      // Helper function to add footer to all pages
+      const addFooters = () => {
+        const totalPages = doc.internal.pages.length - 1;
+
+        for (let i = 1; i <= totalPages; i++) {
+          doc.setPage(i);
+          doc.setFontSize(8);
+          doc.setTextColor('#9CA3AF');
+          doc.text(`Page ${i} of ${totalPages}`, pageWidth / 2, doc.internal.pageSize.getHeight() - 10, {
+            align: 'center',
+          });
+        }
+      };
+
+      // Title and Header (first page only)
+      doc.setFillColor('#6366F1');
+      doc.rect(0, 0, pageWidth, 40, 'F');
+      doc.setTextColor('#FFFFFF');
+      doc.setFontSize(24);
+      doc.setFont('helvetica', 'bold');
+      doc.text('Debug Information Report', margin, 25);
+      yPos = 50;
+
+      // Timestamp and metadata
+      doc.setTextColor('#6B7280');
+      doc.setFontSize(10);
+      doc.setFont('helvetica', 'normal');
+
+      const timestamp = new Date().toLocaleString(undefined, {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+      });
+      doc.text(`Generated: ${timestamp}`, margin, yPos);
+      yPos += lineHeight * 2;
+
+      // System Information Section
+      if (debugData.system) {
+        addSectionHeader('System Information');
+
+        // OS and Architecture
+        addKeyValue('Operating System', debugData.system.os);
+        addKeyValue('Architecture', debugData.system.arch);
+        addKeyValue('Platform', debugData.system.platform);
+        addKeyValue('CPU Cores', debugData.system.cpus);
+
+        // Memory
+        const memory = debugData.system.memory;
+        addKeyValue('Memory', {
+          'Total Memory': memory.total,
+          'Used Memory': memory.used,
+          'Free Memory': memory.free,
+          Usage: memory.percentage + '%',
+        });
+
+        // Browser Information
+        const browser = debugData.system.browser;
+        addKeyValue('Browser', {
+          Name: browser.name,
+          Version: browser.version,
+          Language: browser.language,
+          Platform: browser.platform,
+          'Cookies Enabled': browser.cookiesEnabled ? 'Yes' : 'No',
+          'Online Status': browser.online ? 'Online' : 'Offline',
+        });
+
+        // Screen Information
+        const screen = debugData.system.screen;
+        addKeyValue('Screen', {
+          Resolution: `${screen.width}x${screen.height}`,
+          'Color Depth': screen.colorDepth + ' bit',
+          'Pixel Ratio': screen.pixelRatio + 'x',
+        });
+
+        // Time Information
+        const time = debugData.system.time;
+        addKeyValue('Time Settings', {
+          Timezone: time.timezone,
+          'UTC Offset': time.offset / 60 + ' hours',
+          Locale: time.locale,
+        });
+
+        addHorizontalLine();
+      }
+
+      // Web App Information Section
+      if (debugData.webApp) {
+        addSectionHeader('Web App Information');
+
+        // Basic Info
+        addKeyValue('Application', {
+          Name: debugData.webApp.name,
+          Version: debugData.webApp.version,
+          Environment: debugData.webApp.environment,
+          'Node Version': debugData.webApp.runtimeInfo.nodeVersion,
+        });
+
+        // Git Information
+        if (debugData.webApp.gitInfo) {
+          const gitInfo = debugData.webApp.gitInfo.local;
+          addKeyValue('Git Information', {
+            Branch: gitInfo.branch,
+            Commit: gitInfo.commitHash,
+            Author: gitInfo.author,
+            'Commit Time': gitInfo.commitTime,
+            Repository: gitInfo.repoName,
+          });
+
+          if (debugData.webApp.gitInfo.github) {
+            const githubInfo = debugData.webApp.gitInfo.github.currentRepo;
+            addKeyValue('GitHub Information', {
+              Repository: githubInfo.fullName,
+              'Default Branch': githubInfo.defaultBranch,
+              Stars: githubInfo.stars,
+              Forks: githubInfo.forks,
+              'Open Issues': githubInfo.openIssues || 0,
+            });
+          }
+        }
+
+        addHorizontalLine();
+      }
+
+      // Performance Section
+      if (debugData.performance) {
+        addSectionHeader('Performance Metrics');
+
+        // Memory Usage
+        const memory = debugData.performance.memory || {};
+        const totalHeap = memory.totalJSHeapSize || 0;
+        const usedHeap = memory.usedJSHeapSize || 0;
+        const usagePercentage = memory.usagePercentage || 0;
+
+        addKeyValue('Memory Usage', {
+          'Total Heap Size': formatBytes(totalHeap),
+          'Used Heap Size': formatBytes(usedHeap),
+          Usage: usagePercentage.toFixed(1) + '%',
+        });
+
+        // Timing Metrics
+        const timing = debugData.performance.timing || {};
+        const navigationStart = timing.navigationStart || 0;
+        const loadEventEnd = timing.loadEventEnd || 0;
+        const domContentLoadedEventEnd = timing.domContentLoadedEventEnd || 0;
+        const responseEnd = timing.responseEnd || 0;
+        const requestStart = timing.requestStart || 0;
+
+        const loadTime = loadEventEnd > navigationStart ? loadEventEnd - navigationStart : 0;
+        const domReadyTime =
+          domContentLoadedEventEnd > navigationStart ? domContentLoadedEventEnd - navigationStart : 0;
+        const requestTime = responseEnd > requestStart ? responseEnd - requestStart : 0;
+
+        addKeyValue('Page Load Metrics', {
+          'Total Load Time': (loadTime / 1000).toFixed(2) + ' seconds',
+          'DOM Ready Time': (domReadyTime / 1000).toFixed(2) + ' seconds',
+          'Request Time': (requestTime / 1000).toFixed(2) + ' seconds',
+        });
+
+        // Network Information
+        if (debugData.system?.network) {
+          const network = debugData.system.network;
+          addKeyValue('Network Information', {
+            'Connection Type': network.type || 'Unknown',
+            'Effective Type': network.effectiveType || 'Unknown',
+            'Download Speed': (network.downlink || 0) + ' Mbps',
+            'Latency (RTT)': (network.rtt || 0) + ' ms',
+            'Data Saver': network.saveData ? 'Enabled' : 'Disabled',
+          });
+        }
+
+        addHorizontalLine();
+      }
+
+      // Errors Section
+      if (debugData.errors && debugData.errors.length > 0) {
+        addSectionHeader('Error Log');
+
+        debugData.errors.forEach((error: LogEntry, index: number) => {
+          doc.setTextColor('#DC2626');
+          doc.setFontSize(10);
+          doc.setFont('helvetica', 'bold');
+          doc.text(`Error ${index + 1}:`, margin, yPos);
+          yPos += lineHeight;
+
+          doc.setFont('helvetica', 'normal');
+          doc.setTextColor('#6B7280');
+          addKeyValue('Message', error.message, 10);
+
+          if (error.stack) {
+            addKeyValue('Stack', error.stack, 10);
+          }
+
+          if (error.source) {
+            addKeyValue('Source', error.source, 10);
+          }
+
+          yPos += lineHeight;
+        });
+      }
+
+      // Add footers to all pages at the end
+      addFooters();
+
+      // Save the PDF
+      doc.save(`bolt-debug-info-${new Date().toISOString()}.pdf`);
+      toast.success('Debug information exported as PDF');
+    } catch (error) {
+      console.error('Failed to export PDF:', error);
+      toast.error('Failed to export debug information as PDF');
+    }
+  };
+
+  const exportAsText = () => {
+    try {
+      const debugData = {
+        system: systemInfo,
+        webApp: webAppInfo,
+        errors: logStore.getLogs().filter((log: LogEntry) => log.level === 'error'),
+        performance: {
+          memory: (performance as any).memory || {},
+          timing: performance.timing,
+          navigation: performance.navigation,
+        },
+      };
+
+      const textContent = Object.entries(debugData)
+        .map(([category, data]) => {
+          return `${category.toUpperCase()}\n${'-'.repeat(30)}\n${JSON.stringify(data, null, 2)}\n\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-debug-info-${new Date().toISOString()}.txt`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+      toast.success('Debug information exported as text file');
+    } catch (error) {
+      console.error('Failed to export text file:', error);
+      toast.error('Failed to export debug information as text file');
+    }
+  };
+
+  const exportFormats: ExportFormat[] = [
+    {
+      id: 'json',
+      label: 'Export as JSON',
+      icon: 'i-ph:file-json',
+      handler: exportDebugInfo,
+    },
+    {
+      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,
+    },
+  ];
+
+  // Add Ollama health check function
+  const checkOllamaStatus = useCallback(async () => {
+    try {
+      const ollamaProvider = providers?.Ollama;
+      const baseUrl = ollamaProvider?.settings?.baseUrl || 'http://127.0.0.1:11434';
+
+      // First check if service is running
+      const versionResponse = await fetch(`${baseUrl}/api/version`);
+
+      if (!versionResponse.ok) {
+        throw new Error('Service not running');
+      }
+
+      // Then fetch installed models
+      const modelsResponse = await fetch(`${baseUrl}/api/tags`);
+
+      const modelsData = (await modelsResponse.json()) as {
+        models: Array<{ name: string; size: string; quantization: string }>;
+      };
+
+      setOllamaStatus({
+        isRunning: true,
+        lastChecked: new Date(),
+        models: modelsData.models,
+      });
+    } catch {
+      setOllamaStatus({
+        isRunning: false,
+        error: 'Connection failed',
+        lastChecked: new Date(),
+        models: undefined,
+      });
+    }
+  }, [providers]);
+
+  // Monitor Ollama provider status and check periodically
+  useEffect(() => {
+    const ollamaProvider = providers?.Ollama;
+
+    if (ollamaProvider?.settings?.enabled) {
+      // Check immediately when provider is enabled
+      checkOllamaStatus();
+
+      // Set up periodic checks every 10 seconds
+      const intervalId = setInterval(checkOllamaStatus, 10000);
+
+      return () => clearInterval(intervalId);
+    }
+
+    return undefined;
+  }, [providers, checkOllamaStatus]);
+
+  // Replace the existing export button with this new component
+  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 Debug Information
+            </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>
+    );
+  };
+
+  // Add helper function to get Ollama status text and color
+  const getOllamaStatus = () => {
+    const ollamaProvider = providers?.Ollama;
+    const isOllamaEnabled = ollamaProvider?.settings?.enabled;
+
+    if (!isOllamaEnabled) {
+      return {
+        status: 'Disabled',
+        color: 'text-red-500',
+        bgColor: 'bg-red-500',
+        message: 'Ollama provider is disabled in settings',
+      };
+    }
+
+    if (!ollamaStatus.isRunning) {
+      return {
+        status: 'Not Running',
+        color: 'text-red-500',
+        bgColor: 'bg-red-500',
+        message: ollamaStatus.error || 'Ollama service is not running',
+      };
+    }
+
+    const modelCount = ollamaStatus.models?.length ?? 0;
+
+    return {
+      status: 'Running',
+      color: 'text-green-500',
+      bgColor: 'bg-green-500',
+      message: `Ollama service is running with ${modelCount} installed models (Provider: Enabled)`,
+    };
+  };
+
+  // Add type for status result
+  type StatusResult = {
+    status: string;
+    color: string;
+    bgColor: string;
+    message: string;
+  };
+
+  const status = getOllamaStatus() as StatusResult;
+
+  return (
+    <div className="flex flex-col gap-6 max-w-7xl mx-auto p-4">
+      {/* Quick Stats Banner */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        {/* Errors Card */}
+        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
+          <div className="flex items-center gap-2">
+            <div className="i-ph:warning-octagon text-purple-500 w-4 h-4" />
+            <div className="text-sm text-bolt-elements-textSecondary">Errors</div>
+          </div>
+          <div className="flex items-center gap-2 mt-2">
+            <span
+              className={classNames('text-2xl font-semibold', errorLogs.length > 0 ? 'text-red-500' : 'text-green-500')}
+            >
+              {errorLogs.length}
+            </span>
+          </div>
+          <div className="text-xs text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
+            <div
+              className={classNames(
+                'w-3.5 h-3.5',
+                errorLogs.length > 0 ? 'i-ph:warning text-red-500' : 'i-ph:check-circle text-green-500',
+              )}
+            />
+            {errorLogs.length > 0 ? 'Errors detected' : 'No errors detected'}
+          </div>
+        </div>
+
+        {/* Memory Usage Card */}
+        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
+          <div className="flex items-center gap-2">
+            <div className="i-ph:cpu text-purple-500 w-4 h-4" />
+            <div className="text-sm text-bolt-elements-textSecondary">Memory Usage</div>
+          </div>
+          <div className="flex items-center gap-2 mt-2">
+            <span
+              className={classNames(
+                'text-2xl font-semibold',
+                (systemInfo?.memory?.percentage ?? 0) > 80
+                  ? 'text-red-500'
+                  : (systemInfo?.memory?.percentage ?? 0) > 60
+                    ? 'text-yellow-500'
+                    : 'text-green-500',
+              )}
+            >
+              {systemInfo?.memory?.percentage ?? 0}%
+            </span>
+          </div>
+          <Progress
+            value={systemInfo?.memory?.percentage ?? 0}
+            className={classNames(
+              'mt-2',
+              (systemInfo?.memory?.percentage ?? 0) > 80
+                ? '[&>div]:bg-red-500'
+                : (systemInfo?.memory?.percentage ?? 0) > 60
+                  ? '[&>div]:bg-yellow-500'
+                  : '[&>div]:bg-green-500',
+            )}
+          />
+          <div className="text-xs text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
+            <div className="i-ph:info w-3.5 h-3.5 text-purple-500" />
+            Used: {systemInfo?.memory.used ?? '0 GB'} / {systemInfo?.memory.total ?? '0 GB'}
+          </div>
+        </div>
+
+        {/* Page Load Time Card */}
+        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
+          <div className="flex items-center gap-2">
+            <div className="i-ph:timer text-purple-500 w-4 h-4" />
+            <div className="text-sm text-bolt-elements-textSecondary">Page Load Time</div>
+          </div>
+          <div className="flex items-center gap-2 mt-2">
+            <span
+              className={classNames(
+                'text-2xl font-semibold',
+                (systemInfo?.performance.timing.loadTime ?? 0) > 2000
+                  ? 'text-red-500'
+                  : (systemInfo?.performance.timing.loadTime ?? 0) > 1000
+                    ? 'text-yellow-500'
+                    : 'text-green-500',
+              )}
+            >
+              {systemInfo ? (systemInfo.performance.timing.loadTime / 1000).toFixed(2) : '-'}s
+            </span>
+          </div>
+          <div className="text-xs text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
+            <div className="i-ph:code w-3.5 h-3.5 text-purple-500" />
+            DOM Ready: {systemInfo ? (systemInfo.performance.timing.domReadyTime / 1000).toFixed(2) : '-'}s
+          </div>
+        </div>
+
+        {/* Network Speed Card */}
+        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
+          <div className="flex items-center gap-2">
+            <div className="i-ph:wifi-high text-purple-500 w-4 h-4" />
+            <div className="text-sm text-bolt-elements-textSecondary">Network Speed</div>
+          </div>
+          <div className="flex items-center gap-2 mt-2">
+            <span
+              className={classNames(
+                'text-2xl font-semibold',
+                (systemInfo?.network.downlink ?? 0) < 5
+                  ? 'text-red-500'
+                  : (systemInfo?.network.downlink ?? 0) < 10
+                    ? 'text-yellow-500'
+                    : 'text-green-500',
+              )}
+            >
+              {systemInfo?.network.downlink ?? '-'} Mbps
+            </span>
+          </div>
+          <div className="text-xs text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
+            <div className="i-ph:activity w-3.5 h-3.5 text-purple-500" />
+            RTT: {systemInfo?.network.rtt ?? '-'} ms
+          </div>
+        </div>
+
+        {/* Ollama Service Card - Now spans all 4 columns */}
+        <div className="md:col-span-4 p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[260px] flex flex-col">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:robot text-purple-500 w-5 h-5" />
+              <div>
+                <div className="text-base font-medium text-bolt-elements-textPrimary">Ollama Service</div>
+                <div className="text-xs text-bolt-elements-textSecondary mt-0.5">{status.message}</div>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="flex items-center gap-2 px-2.5 py-1 rounded-full bg-bolt-elements-background-depth-3">
+                <div
+                  className={classNames('w-2 h-2 rounded-full animate-pulse', status.bgColor, {
+                    'shadow-lg shadow-green-500/20': status.status === 'Running',
+                    'shadow-lg shadow-red-500/20': status.status === 'Not Running',
+                  })}
+                />
+                <span className={classNames('text-xs font-medium flex items-center gap-1', status.color)}>
+                  {status.status}
+                </span>
+              </div>
+              <div className="text-[10px] text-bolt-elements-textTertiary flex items-center gap-1.5">
+                <div className="i-ph:clock w-3 h-3" />
+                {ollamaStatus.lastChecked.toLocaleTimeString()}
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-6 flex-1 min-h-0 flex flex-col">
+            {status.status === 'Running' && ollamaStatus.models && ollamaStatus.models.length > 0 ? (
+              <>
+                <div className="text-xs font-medium text-bolt-elements-textSecondary flex items-center justify-between mb-3">
+                  <div className="flex items-center gap-2">
+                    <div className="i-ph:cube-duotone w-4 h-4 text-purple-500" />
+                    <span>Installed Models</span>
+                    <Badge variant="secondary" className="ml-1">
+                      {ollamaStatus.models.length}
+                    </Badge>
+                  </div>
+                </div>
+                <div className="overflow-y-auto flex-1 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-600">
+                  <div className="grid grid-cols-2 gap-3 pr-2">
+                    {ollamaStatus.models.map((model) => (
+                      <div
+                        key={model.name}
+                        className="text-sm bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4 rounded-lg px-4 py-3 flex items-center justify-between transition-colors group"
+                      >
+                        <div className="flex items-center gap-2 text-bolt-elements-textSecondary">
+                          <div className="i-ph:cube w-4 h-4 text-purple-500/70 group-hover:text-purple-500 transition-colors" />
+                          <span className="font-mono truncate">{model.name}</span>
+                        </div>
+                        <Badge variant="outline" className="ml-2 text-xs font-mono">
+                          {Math.round(parseInt(model.size) / 1024 / 1024)}MB
+                        </Badge>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </>
+            ) : (
+              <div className="flex-1 flex items-center justify-center">
+                <div className="flex flex-col items-center gap-3 max-w-[280px] text-center">
+                  <div
+                    className={classNames('w-12 h-12', {
+                      'i-ph:warning-circle text-red-500/80':
+                        status.status === 'Not Running' || status.status === 'Disabled',
+                      'i-ph:cube-duotone text-purple-500/80': status.status === 'Running',
+                    })}
+                  />
+                  <span className="text-sm text-bolt-elements-textSecondary">{status.message}</span>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex flex-wrap gap-4">
+        <button
+          onClick={getSystemInfo}
+          disabled={loading.systemInfo}
+          className={classNames(
+            'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+            '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',
+            { 'opacity-50 cursor-not-allowed': loading.systemInfo },
+          )}
+        >
+          {loading.systemInfo ? (
+            <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+          ) : (
+            <div className="i-ph:gear w-4 h-4" />
+          )}
+          Update System Info
+        </button>
+
+        <button
+          onClick={handleLogPerformance}
+          disabled={loading.performance}
+          className={classNames(
+            'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+            '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',
+            { 'opacity-50 cursor-not-allowed': loading.performance },
+          )}
+        >
+          {loading.performance ? (
+            <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+          ) : (
+            <div className="i-ph:chart-bar w-4 h-4" />
+          )}
+          Log Performance
+        </button>
+
+        <button
+          onClick={checkErrors}
+          disabled={loading.errors}
+          className={classNames(
+            'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+            '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',
+            { 'opacity-50 cursor-not-allowed': loading.errors },
+          )}
+        >
+          {loading.errors ? (
+            <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+          ) : (
+            <div className="i-ph:warning w-4 h-4" />
+          )}
+          Check Errors
+        </button>
+
+        <button
+          onClick={getWebAppInfo}
+          disabled={loading.webAppInfo}
+          className={classNames(
+            'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+            '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',
+            { 'opacity-50 cursor-not-allowed': loading.webAppInfo },
+          )}
+        >
+          {loading.webAppInfo ? (
+            <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+          ) : (
+            <div className="i-ph:info w-4 h-4" />
+          )}
+          Fetch WebApp Info
+        </button>
+
+        <ExportButton />
+      </div>
+
+      {/* System Information */}
+      <Collapsible
+        open={openSections.system}
+        onOpenChange={(open: boolean) => setOpenSections((prev) => ({ ...prev, system: open }))}
+        className="w-full"
+      >
+        <CollapsibleTrigger className="w-full">
+          <div className="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:cpu text-purple-500 w-5 h-5" />
+              <h3 className="text-base font-medium text-bolt-elements-textPrimary">System Information</h3>
+            </div>
+            <div
+              className={classNames(
+                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
+                openSections.system ? 'rotate-180' : '',
+              )}
+            />
+          </div>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <div className="p-6 mt-2 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            {systemInfo ? (
+              <div className="grid grid-cols-2 gap-6">
+                <div className="space-y-2">
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:desktop text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">OS: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.os}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:device-mobile text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Platform: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.platform}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:microchip text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Architecture: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.arch}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:cpu text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">CPU Cores: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.cpus}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:node text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Node Version: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.node}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:wifi-high text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Network Type: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.network.type} ({systemInfo.network.effectiveType})
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:gauge text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Network Speed: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.network.downlink}Mbps (RTT: {systemInfo.network.rtt}ms)
+                    </span>
+                  </div>
+                  {systemInfo.battery && (
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:battery-charging text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Battery: </span>
+                      <span className="text-bolt-elements-textPrimary">
+                        {systemInfo.battery.level.toFixed(1)}% {systemInfo.battery.charging ? '(Charging)' : ''}
+                      </span>
+                    </div>
+                  )}
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:hard-drive text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Storage: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.storage.usage / (1024 * 1024 * 1024)).toFixed(2)}GB /{' '}
+                      {(systemInfo.storage.quota / (1024 * 1024 * 1024)).toFixed(2)}GB
+                    </span>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:database text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Memory Usage: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.memory.used} / {systemInfo.memory.total} ({systemInfo.memory.percentage}%)
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:browser text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Browser: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.browser.name} {systemInfo.browser.version}
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:monitor text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Screen: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.screen.width}x{systemInfo.screen.height} ({systemInfo.screen.pixelRatio}x)
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:clock text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Timezone: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.time.timezone}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:translate text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Language: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.browser.language}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:chart-pie text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">JS Heap: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(1)}MB /{' '}
+                      {(systemInfo.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(1)}MB (
+                      {systemInfo.performance.memory.usagePercentage.toFixed(1)}%)
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:timer text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Page Load: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.loadTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:code text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">DOM Ready: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.domReadyTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="text-sm text-bolt-elements-textSecondary">Loading system information...</div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* Performance Metrics */}
+      <Collapsible
+        open={openSections.performance}
+        onOpenChange={(open: boolean) => setOpenSections((prev) => ({ ...prev, performance: open }))}
+        className="w-full"
+      >
+        <CollapsibleTrigger className="w-full">
+          <div className="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:chart-line text-purple-500 w-5 h-5" />
+              <h3 className="text-base font-medium text-bolt-elements-textPrimary">Performance Metrics</h3>
+            </div>
+            <div
+              className={classNames(
+                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
+                openSections.performance ? 'rotate-180' : '',
+              )}
+            />
+          </div>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <div className="p-6 mt-2 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            {systemInfo && (
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Page Load Time: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.loadTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">DOM Ready Time: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.domReadyTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Request Time: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.requestTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Redirect Time: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.redirectTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">JS Heap Usage: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(1)}MB /{' '}
+                      {(systemInfo.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(1)}MB
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Heap Utilization: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.performance.memory.usagePercentage.toFixed(1)}%
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Navigation Type: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.performance.navigation.type === 0
+                        ? 'Navigate'
+                        : systemInfo.performance.navigation.type === 1
+                          ? 'Reload'
+                          : systemInfo.performance.navigation.type === 2
+                            ? 'Back/Forward'
+                            : 'Other'}
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Redirects: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.performance.navigation.redirectCount}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* WebApp Information */}
+      <Collapsible
+        open={openSections.webapp}
+        onOpenChange={(open) => setOpenSections((prev) => ({ ...prev, webapp: open }))}
+        className="w-full"
+      >
+        <CollapsibleTrigger className="w-full">
+          <div className="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:info text-blue-500 w-5 h-5" />
+              <h3 className="text-base font-medium text-bolt-elements-textPrimary">WebApp Information</h3>
+              {loading.webAppInfo && <span className="loading loading-spinner loading-sm" />}
+            </div>
+            <div
+              className={classNames(
+                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
+                openSections.webapp ? 'rotate-180' : '',
+              )}
+            />
+          </div>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <div className="p-6 mt-2 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            {loading.webAppInfo ? (
+              <div className="flex items-center justify-center p-8">
+                <span className="loading loading-spinner loading-lg" />
+              </div>
+            ) : !webAppInfo ? (
+              <div className="flex flex-col items-center justify-center p-8 text-bolt-elements-textSecondary">
+                <div className="i-ph:warning-circle w-8 h-8 mb-2" />
+                <p>Failed to load WebApp information</p>
+                <button
+                  onClick={() => getWebAppInfo()}
+                  className="mt-4 px-4 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+                >
+                  Retry
+                </button>
+              </div>
+            ) : (
+              <div className="grid grid-cols-2 gap-6">
+                <div>
+                  <h3 className="mb-4 text-base font-medium text-bolt-elements-textPrimary">Basic Information</h3>
+                  <div className="space-y-3">
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:app-window text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Name:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.name}</span>
+                    </div>
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:tag text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Version:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.version}</span>
+                    </div>
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:certificate text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">License:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.license}</span>
+                    </div>
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:cloud text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Environment:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.environment}</span>
+                    </div>
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:node text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Node Version:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.runtimeInfo.nodeVersion}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div>
+                  <h3 className="mb-4 text-base font-medium text-bolt-elements-textPrimary">Git Information</h3>
+                  <div className="space-y-3">
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:git-branch text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Branch:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.gitInfo.local.branch}</span>
+                    </div>
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:git-commit text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Commit:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.gitInfo.local.commitHash}</span>
+                    </div>
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:user text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Author:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.gitInfo.local.author}</span>
+                    </div>
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:clock text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Commit Time:</span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.gitInfo.local.commitTime}</span>
+                    </div>
+
+                    {webAppInfo.gitInfo.github && (
+                      <>
+                        <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-800">
+                          <div className="text-sm flex items-center gap-2">
+                            <div className="i-ph:git-repository text-bolt-elements-textSecondary w-4 h-4" />
+                            <span className="text-bolt-elements-textSecondary">Repository:</span>
+                            <span className="text-bolt-elements-textPrimary">
+                              {webAppInfo.gitInfo.github.currentRepo.fullName}
+                              {webAppInfo.gitInfo.isForked && ' (fork)'}
+                            </span>
+                          </div>
+
+                          <div className="mt-2 flex items-center gap-4 text-sm">
+                            <div className="flex items-center gap-1">
+                              <div className="i-ph:star text-yellow-500 w-4 h-4" />
+                              <span className="text-bolt-elements-textSecondary">
+                                {webAppInfo.gitInfo.github.currentRepo.stars}
+                              </span>
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <div className="i-ph:git-fork text-blue-500 w-4 h-4" />
+                              <span className="text-bolt-elements-textSecondary">
+                                {webAppInfo.gitInfo.github.currentRepo.forks}
+                              </span>
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <div className="i-ph:warning-circle text-red-500 w-4 h-4" />
+                              <span className="text-bolt-elements-textSecondary">
+                                {webAppInfo.gitInfo.github.currentRepo.openIssues}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+
+                        {webAppInfo.gitInfo.github.upstream && (
+                          <div className="mt-2">
+                            <div className="text-sm flex items-center gap-2">
+                              <div className="i-ph:git-fork text-bolt-elements-textSecondary w-4 h-4" />
+                              <span className="text-bolt-elements-textSecondary">Upstream:</span>
+                              <span className="text-bolt-elements-textPrimary">
+                                {webAppInfo.gitInfo.github.upstream.fullName}
+                              </span>
+                            </div>
+
+                            <div className="mt-2 flex items-center gap-4 text-sm">
+                              <div className="flex items-center gap-1">
+                                <div className="i-ph:star text-yellow-500 w-4 h-4" />
+                                <span className="text-bolt-elements-textSecondary">
+                                  {webAppInfo.gitInfo.github.upstream.stars}
+                                </span>
+                              </div>
+                              <div className="flex items-center gap-1">
+                                <div className="i-ph:git-fork text-blue-500 w-4 h-4" />
+                                <span className="text-bolt-elements-textSecondary">
+                                  {webAppInfo.gitInfo.github.upstream.forks}
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        )}
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {webAppInfo && (
+              <div className="mt-6">
+                <h3 className="mb-4 text-base font-medium text-bolt-elements-textPrimary">Dependencies</h3>
+                <div className="bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded-lg divide-y divide-[#E5E5E5] dark:divide-[#1A1A1A]">
+                  <DependencySection title="Production" deps={webAppInfo.dependencies.production} />
+                  <DependencySection title="Development" deps={webAppInfo.dependencies.development} />
+                  <DependencySection title="Peer" deps={webAppInfo.dependencies.peer} />
+                  <DependencySection title="Optional" deps={webAppInfo.dependencies.optional} />
+                </div>
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* Error Check */}
+      <Collapsible
+        open={openSections.errors}
+        onOpenChange={(open) => setOpenSections((prev) => ({ ...prev, errors: open }))}
+        className="w-full"
+      >
+        <CollapsibleTrigger className="w-full">
+          <div className="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:warning text-red-500 w-5 h-5" />
+              <h3 className="text-base font-medium text-bolt-elements-textPrimary">Error Check</h3>
+              {errorLogs.length > 0 && (
+                <Badge variant="destructive" className="ml-2">
+                  {errorLogs.length} Errors
+                </Badge>
+              )}
+            </div>
+            <div
+              className={classNames(
+                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
+                openSections.errors ? 'rotate-180' : '',
+              )}
+            />
+          </div>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <div className="p-6 mt-2 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            <ScrollArea className="h-[300px]">
+              <div className="space-y-4">
+                <div className="text-sm text-bolt-elements-textSecondary">
+                  Checks for:
+                  <ul className="list-disc list-inside mt-2 space-y-1">
+                    <li>Unhandled JavaScript errors</li>
+                    <li>Unhandled Promise rejections</li>
+                    <li>Runtime exceptions</li>
+                    <li>Network errors</li>
+                  </ul>
+                </div>
+                <div className="text-sm">
+                  <span className="text-bolt-elements-textSecondary">Status: </span>
+                  <span className="text-bolt-elements-textPrimary">
+                    {loading.errors
+                      ? 'Checking...'
+                      : errorLogs.length > 0
+                        ? `${errorLogs.length} errors found`
+                        : 'No errors found'}
+                  </span>
+                </div>
+                {errorLogs.length > 0 && (
+                  <div className="mt-4">
+                    <div className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Recent Errors:</div>
+                    <div className="space-y-2">
+                      {errorLogs.map((error) => (
+                        <div key={error.id} className="text-sm text-red-500 dark:text-red-400 p-2 rounded bg-red-500/5">
+                          <div className="font-medium">{error.message}</div>
+                          {error.source && (
+                            <div className="text-xs mt-1 text-red-400">
+                              Source: {error.source}
+                              {error.details?.lineNumber && `:${error.details.lineNumber}`}
+                            </div>
+                          )}
+                          {error.stack && (
+                            <div className="text-xs mt-1 text-red-400 font-mono whitespace-pre-wrap">{error.stack}</div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </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-json',
+      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/notifications/NotificationsTab.tsx

@@ -0,0 +1,300 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { logStore } from '~/lib/stores/logs';
+import { useStore } from '@nanostores/react';
+import { formatDistanceToNow } from 'date-fns';
+import { classNames } from '~/utils/classNames';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+
+interface NotificationDetails {
+  type?: string;
+  message?: string;
+  currentVersion?: string;
+  latestVersion?: string;
+  branch?: string;
+  updateUrl?: string;
+}
+
+type FilterType = 'all' | 'system' | 'error' | 'warning' | 'update' | 'info' | 'provider' | 'network';
+
+const NotificationsTab = () => {
+  const [filter, setFilter] = useState<FilterType>('all');
+  const logs = useStore(logStore.logs);
+
+  useEffect(() => {
+    const startTime = performance.now();
+
+    return () => {
+      const duration = performance.now() - startTime;
+      logStore.logPerformanceMetric('NotificationsTab', 'mount-duration', duration);
+    };
+  }, []);
+
+  const handleClearNotifications = () => {
+    const count = Object.keys(logs).length;
+    logStore.logInfo('Cleared notifications', {
+      type: 'notification_clear',
+      message: `Cleared ${count} notifications`,
+      clearedCount: count,
+      component: 'notifications',
+    });
+    logStore.clearLogs();
+  };
+
+  const handleUpdateAction = (updateUrl: string) => {
+    logStore.logInfo('Update link clicked', {
+      type: 'update_click',
+      message: 'User clicked update link',
+      updateUrl,
+      component: 'notifications',
+    });
+    window.open(updateUrl, '_blank');
+  };
+
+  const handleFilterChange = (newFilter: FilterType) => {
+    logStore.logInfo('Notification filter changed', {
+      type: 'filter_change',
+      message: `Filter changed to ${newFilter}`,
+      previousFilter: filter,
+      newFilter,
+      component: 'notifications',
+    });
+    setFilter(newFilter);
+  };
+
+  const filteredLogs = Object.values(logs)
+    .filter((log) => {
+      if (filter === 'all') {
+        return true;
+      }
+
+      if (filter === 'update') {
+        return log.details?.type === 'update';
+      }
+
+      if (filter === 'system') {
+        return log.category === 'system';
+      }
+
+      if (filter === 'provider') {
+        return log.category === 'provider';
+      }
+
+      if (filter === 'network') {
+        return log.category === 'network';
+      }
+
+      return log.level === filter;
+    })
+    .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+
+  const getNotificationStyle = (level: string, type?: string) => {
+    if (type === 'update') {
+      return {
+        icon: 'i-ph:arrow-circle-up',
+        color: 'text-purple-500 dark:text-purple-400',
+        bg: 'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
+      };
+    }
+
+    switch (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',
+        };
+      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',
+        };
+      case 'info':
+        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',
+        };
+      default:
+        return {
+          icon: 'i-ph:bell',
+          color: 'text-gray-500 dark:text-gray-400',
+          bg: 'hover:bg-gray-500/10 dark:hover:bg-gray-500/20',
+        };
+    }
+  };
+
+  const renderNotificationDetails = (details: NotificationDetails) => {
+    if (details.type === 'update') {
+      return (
+        <div className="flex flex-col gap-2">
+          <p className="text-sm text-gray-600 dark:text-gray-400">{details.message}</p>
+          <div className="flex flex-col gap-1 text-xs text-gray-500 dark:text-gray-500">
+            <p>Current Version: {details.currentVersion}</p>
+            <p>Latest Version: {details.latestVersion}</p>
+            <p>Branch: {details.branch}</p>
+          </div>
+          <button
+            onClick={() => details.updateUrl && handleUpdateAction(details.updateUrl)}
+            className={classNames(
+              'mt-2 inline-flex items-center gap-2',
+              'rounded-lg px-3 py-1.5',
+              'text-sm font-medium',
+              'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+              'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+              'text-gray-900 dark:text-white',
+              'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
+              'transition-all duration-200',
+            )}
+          >
+            <span className="i-ph:git-branch text-lg" />
+            View Changes
+          </button>
+        </div>
+      );
+    }
+
+    return details.message ? <p className="text-sm text-gray-600 dark:text-gray-400">{details.message}</p> : null;
+  };
+
+  const filterOptions: { id: FilterType; label: string; icon: string; color: string }[] = [
+    { id: 'all', label: 'All Notifications', icon: 'i-ph:bell', color: '#9333ea' },
+    { id: 'system', label: 'System', icon: 'i-ph:gear', color: '#6b7280' },
+    { id: 'update', label: 'Updates', icon: 'i-ph:arrow-circle-up', color: '#9333ea' },
+    { id: 'error', label: 'Errors', icon: 'i-ph:warning-circle', color: '#ef4444' },
+    { id: 'warning', label: 'Warnings', icon: 'i-ph:warning', color: '#f59e0b' },
+    { id: 'info', label: 'Information', icon: 'i-ph:info', color: '#3b82f6' },
+    { id: 'provider', label: 'Providers', icon: 'i-ph:robot', color: '#10b981' },
+    { id: 'network', label: 'Network', icon: 'i-ph:wifi-high', color: '#6366f1' },
+  ];
+
+  return (
+    <div className="flex h-full flex-col gap-6">
+      <div className="flex items-center justify-between">
+        <DropdownMenu.Root>
+          <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', filterOptions.find((opt) => opt.id === filter)?.icon || 'i-ph:funnel')}
+                style={{ color: filterOptions.find((opt) => opt.id === filter)?.color }}
+              />
+              {filterOptions.find((opt) => opt.id === filter)?.label || 'Filter Notifications'}
+              <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"
+            >
+              {filterOptions.map((option) => (
+                <DropdownMenu.Item
+                  key={option.id}
+                  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={() => handleFilterChange(option.id)}
+                >
+                  <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>
+
+        <button
+          onClick={handleClearNotifications}
+          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:trash text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
+          Clear All
+        </button>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        {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:bell-slash 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 Notifications</h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400">You're all caught up!</p>
+            </div>
+          </motion.div>
+        ) : (
+          filteredLogs.map((log) => {
+            const style = getNotificationStyle(log.level, log.details?.type);
+            return (
+              <motion.div
+                key={log.id}
+                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">
+                      <h3 className="text-sm font-medium text-gray-900 dark:text-white">{log.message}</h3>
+                      {log.details && renderNotificationDetails(log.details as NotificationDetails)}
+                      <p className="text-xs text-gray-500 dark:text-gray-400">
+                        Category: {log.category}
+                        {log.subCategory ? ` > ${log.subCategory}` : ''}
+                      </p>
+                    </div>
+                  </div>
+                  <time className="shrink-0 text-xs text-gray-500 dark:text-gray-400">
+                    {formatDistanceToNow(new Date(log.timestamp), { addSuffix: true })}
+                  </time>
+                </div>
+              </motion.div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default NotificationsTab;

app/components/@settings/tabs/profile/ProfileTab.tsx

@@ -0,0 +1,181 @@
+import { useState, useCallback } from 'react';
+import { useStore } from '@nanostores/react';
+import { classNames } from '~/utils/classNames';
+import { profileStore, updateProfile } from '~/lib/stores/profile';
+import { toast } from 'react-toastify';
+import { debounce } from '~/utils/debounce';
+
+export default function ProfileTab() {
+  const profile = useStore(profileStore);
+  const [isUploading, setIsUploading] = useState(false);
+
+  // Create debounced update functions
+  const debouncedUpdate = useCallback(
+    debounce((field: 'username' | 'bio', value: string) => {
+      updateProfile({ [field]: value });
+      toast.success(`${field.charAt(0).toUpperCase() + field.slice(1)} updated`);
+    }, 1000),
+    [],
+  );
+
+  const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+
+    if (!file) {
+      return;
+    }
+
+    try {
+      setIsUploading(true);
+
+      // Convert the file to base64
+      const reader = new FileReader();
+
+      reader.onloadend = () => {
+        const base64String = reader.result as string;
+        updateProfile({ avatar: base64String });
+        setIsUploading(false);
+        toast.success('Profile picture updated');
+      };
+
+      reader.onerror = () => {
+        console.error('Error reading file:', reader.error);
+        setIsUploading(false);
+        toast.error('Failed to update profile picture');
+      };
+      reader.readAsDataURL(file);
+    } catch (error) {
+      console.error('Error uploading avatar:', error);
+      setIsUploading(false);
+      toast.error('Failed to update profile picture');
+    }
+  };
+
+  const handleProfileUpdate = (field: 'username' | 'bio', value: string) => {
+    // Update the store immediately for UI responsiveness
+    updateProfile({ [field]: value });
+
+    // Debounce the toast notification
+    debouncedUpdate(field, value);
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <div className="space-y-6">
+        {/* Personal Information Section */}
+        <div>
+          {/* Avatar Upload */}
+          <div className="flex items-start gap-6 mb-8">
+            <div
+              className={classNames(
+                'w-24 h-24 rounded-full overflow-hidden',
+                'bg-gray-100 dark:bg-gray-800/50',
+                'flex items-center justify-center',
+                'ring-1 ring-gray-200 dark:ring-gray-700',
+                'relative group',
+                'transition-all duration-300 ease-out',
+                'hover:ring-purple-500/30 dark:hover:ring-purple-500/30',
+                'hover:shadow-lg hover:shadow-purple-500/10',
+              )}
+            >
+              {profile.avatar ? (
+                <img
+                  src={profile.avatar}
+                  alt="Profile"
+                  className={classNames(
+                    'w-full h-full object-cover',
+                    'transition-all duration-300 ease-out',
+                    'group-hover:scale-105 group-hover:brightness-90',
+                  )}
+                />
+              ) : (
+                <div className="i-ph:robot-fill w-16 h-16 text-gray-400 dark:text-gray-500 transition-colors group-hover:text-purple-500/70 transform -translate-y-1" />
+              )}
+
+              <label
+                className={classNames(
+                  'absolute inset-0',
+                  'flex items-center justify-center',
+                  'bg-black/0 group-hover:bg-black/40',
+                  'cursor-pointer transition-all duration-300 ease-out',
+                  isUploading ? 'cursor-wait' : '',
+                )}
+              >
+                <input
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={handleAvatarUpload}
+                  disabled={isUploading}
+                />
+                {isUploading ? (
+                  <div className="i-ph:spinner-gap w-6 h-6 text-white animate-spin" />
+                ) : (
+                  <div className="i-ph:camera-plus w-6 h-6 text-white opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out transform group-hover:scale-110" />
+                )}
+              </label>
+            </div>
+
+            <div className="flex-1 pt-1">
+              <label className="block text-base font-medium text-gray-900 dark:text-gray-100 mb-1">
+                Profile Picture
+              </label>
+              <p className="text-sm text-gray-500 dark:text-gray-400">Upload a profile picture or avatar</p>
+            </div>
+          </div>
+
+          {/* Username Input */}
+          <div className="mb-6">
+            <label className="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Username</label>
+            <div className="relative group">
+              <div className="absolute left-3.5 top-1/2 -translate-y-1/2">
+                <div className="i-ph:user-circle-fill w-5 h-5 text-gray-400 dark:text-gray-500 transition-colors group-focus-within:text-purple-500" />
+              </div>
+              <input
+                type="text"
+                value={profile.username}
+                onChange={(e) => handleProfileUpdate('username', e.target.value)}
+                className={classNames(
+                  'w-full pl-11 pr-4 py-2.5 rounded-xl',
+                  'bg-white dark:bg-gray-800/50',
+                  'border border-gray-200 dark:border-gray-700/50',
+                  'text-gray-900 dark:text-white',
+                  'placeholder-gray-400 dark:placeholder-gray-500',
+                  'focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500/50',
+                  'transition-all duration-300 ease-out',
+                )}
+                placeholder="Enter your username"
+              />
+            </div>
+          </div>
+
+          {/* Bio Input */}
+          <div className="mb-8">
+            <label className="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Bio</label>
+            <div className="relative group">
+              <div className="absolute left-3.5 top-3">
+                <div className="i-ph:text-aa w-5 h-5 text-gray-400 dark:text-gray-500 transition-colors group-focus-within:text-purple-500" />
+              </div>
+              <textarea
+                value={profile.bio}
+                onChange={(e) => handleProfileUpdate('bio', e.target.value)}
+                className={classNames(
+                  'w-full pl-11 pr-4 py-2.5 rounded-xl',
+                  'bg-white dark:bg-gray-800/50',
+                  'border border-gray-200 dark:border-gray-700/50',
+                  'text-gray-900 dark:text-white',
+                  'placeholder-gray-400 dark:placeholder-gray-500',
+                  'focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500/50',
+                  'transition-all duration-300 ease-out',
+                  'resize-none',
+                  'h-32',
+                )}
+                placeholder="Tell us about yourself"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/@settings/tabs/providers/cloud/CloudProvidersTab.tsx

@@ -0,0 +1,305 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { Switch } from '~/components/ui/Switch';
+import { useSettings } from '~/lib/hooks/useSettings';
+import { URL_CONFIGURABLE_PROVIDERS } from '~/lib/stores/settings';
+import type { IProviderConfig } from '~/types/model';
+import { logStore } from '~/lib/stores/logs';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+import { toast } from 'react-toastify';
+import { providerBaseUrlEnvKeys } from '~/utils/constants';
+import { SiAmazon, SiGoogle, SiHuggingface, SiPerplexity, SiOpenai } from 'react-icons/si';
+import { BsRobot, BsCloud } from 'react-icons/bs';
+import { TbBrain, TbCloudComputing } from 'react-icons/tb';
+import { BiCodeBlock, BiChip } from 'react-icons/bi';
+import { FaCloud, FaBrain } from 'react-icons/fa';
+import type { IconType } from 'react-icons';
+
+// Add type for provider names to ensure type safety
+type ProviderName =
+  | 'AmazonBedrock'
+  | 'Anthropic'
+  | 'Cohere'
+  | 'Deepseek'
+  | 'Google'
+  | 'Groq'
+  | 'HuggingFace'
+  | 'Hyperbolic'
+  | 'Mistral'
+  | 'OpenAI'
+  | 'OpenRouter'
+  | 'Perplexity'
+  | 'Together'
+  | 'XAI';
+
+// Update the PROVIDER_ICONS type to use the ProviderName type
+const PROVIDER_ICONS: Record<ProviderName, IconType> = {
+  AmazonBedrock: SiAmazon,
+  Anthropic: FaBrain,
+  Cohere: BiChip,
+  Deepseek: BiCodeBlock,
+  Google: SiGoogle,
+  Groq: BsCloud,
+  HuggingFace: SiHuggingface,
+  Hyperbolic: TbCloudComputing,
+  Mistral: TbBrain,
+  OpenAI: SiOpenai,
+  OpenRouter: FaCloud,
+  Perplexity: SiPerplexity,
+  Together: BsCloud,
+  XAI: BsRobot,
+};
+
+// Update PROVIDER_DESCRIPTIONS to use the same type
+const PROVIDER_DESCRIPTIONS: Partial<Record<ProviderName, string>> = {
+  Anthropic: 'Access Claude and other Anthropic models',
+  OpenAI: 'Use GPT-4, GPT-3.5, and other OpenAI models',
+};
+
+const CloudProvidersTab = () => {
+  const settings = useSettings();
+  const [editingProvider, setEditingProvider] = useState<string | null>(null);
+  const [filteredProviders, setFilteredProviders] = useState<IProviderConfig[]>([]);
+  const [categoryEnabled, setCategoryEnabled] = useState<boolean>(false);
+
+  // Load and filter providers
+  useEffect(() => {
+    const newFilteredProviders = Object.entries(settings.providers || {})
+      .filter(([key]) => !['Ollama', 'LMStudio', 'OpenAILike'].includes(key))
+      .map(([key, value]) => ({
+        name: key,
+        settings: value.settings,
+        staticModels: value.staticModels || [],
+        getDynamicModels: value.getDynamicModels,
+        getApiKeyLink: value.getApiKeyLink,
+        labelForGetApiKey: value.labelForGetApiKey,
+        icon: value.icon,
+      }));
+
+    const sorted = newFilteredProviders.sort((a, b) => a.name.localeCompare(b.name));
+    setFilteredProviders(sorted);
+
+    // Update category enabled state
+    const allEnabled = newFilteredProviders.every((p) => p.settings.enabled);
+    setCategoryEnabled(allEnabled);
+  }, [settings.providers]);
+
+  const handleToggleCategory = useCallback(
+    (enabled: boolean) => {
+      // Update all providers
+      filteredProviders.forEach((provider) => {
+        settings.updateProviderSettings(provider.name, { ...provider.settings, enabled });
+      });
+
+      setCategoryEnabled(enabled);
+      toast.success(enabled ? 'All cloud providers enabled' : 'All cloud providers disabled');
+    },
+    [filteredProviders, settings],
+  );
+
+  const handleToggleProvider = useCallback(
+    (provider: IProviderConfig, enabled: boolean) => {
+      // Update the provider settings in the store
+      settings.updateProviderSettings(provider.name, { ...provider.settings, enabled });
+
+      if (enabled) {
+        logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
+        toast.success(`${provider.name} enabled`);
+      } else {
+        logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
+        toast.success(`${provider.name} disabled`);
+      }
+    },
+    [settings],
+  );
+
+  const handleUpdateBaseUrl = useCallback(
+    (provider: IProviderConfig, baseUrl: string) => {
+      const newBaseUrl: string | undefined = baseUrl.trim() || undefined;
+
+      // Update the provider settings in the store
+      settings.updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl });
+
+      logStore.logProvider(`Base URL updated for ${provider.name}`, {
+        provider: provider.name,
+        baseUrl: newBaseUrl,
+      });
+      toast.success(`${provider.name} base URL updated`);
+      setEditingProvider(null);
+    },
+    [settings],
+  );
+
+  return (
+    <div className="space-y-6">
+      <motion.div
+        className="space-y-4"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+      >
+        <div className="flex items-center justify-between gap-4 mt-8 mb-4">
+          <div className="flex items-center gap-2">
+            <div
+              className={classNames(
+                'w-8 h-8 flex items-center justify-center rounded-lg',
+                'bg-bolt-elements-background-depth-3',
+                'text-purple-500',
+              )}
+            >
+              <TbCloudComputing className="w-5 h-5" />
+            </div>
+            <div>
+              <h4 className="text-md font-medium text-bolt-elements-textPrimary">Cloud Providers</h4>
+              <p className="text-sm text-bolt-elements-textSecondary">Connect to cloud-based AI models and services</p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-bolt-elements-textSecondary">Enable All Cloud</span>
+            <Switch checked={categoryEnabled} onCheckedChange={handleToggleCategory} />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {filteredProviders.map((provider, index) => (
+            <motion.div
+              key={provider.name}
+              className={classNames(
+                'rounded-lg border bg-bolt-elements-background text-bolt-elements-textPrimary shadow-sm',
+                'bg-bolt-elements-background-depth-2',
+                'hover:bg-bolt-elements-background-depth-3',
+                'transition-all duration-200',
+                'relative overflow-hidden group',
+                'flex flex-col',
+              )}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.1 }}
+              whileHover={{ scale: 1.02 }}
+            >
+              <div className="absolute top-0 right-0 p-2 flex gap-1">
+                {URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && (
+                  <motion.span
+                    className="px-2 py-0.5 text-xs rounded-full bg-purple-500/10 text-purple-500 font-medium"
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                  >
+                    Configurable
+                  </motion.span>
+                )}
+              </div>
+
+              <div className="flex items-start gap-4 p-4">
+                <motion.div
+                  className={classNames(
+                    'w-10 h-10 flex items-center justify-center rounded-xl',
+                    'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
+                    'transition-all duration-200',
+                    provider.settings.enabled ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
+                  )}
+                  whileHover={{ scale: 1.1 }}
+                  whileTap={{ scale: 0.9 }}
+                >
+                  <div className={classNames('w-6 h-6', 'transition-transform duration-200', 'group-hover:rotate-12')}>
+                    {React.createElement(PROVIDER_ICONS[provider.name as ProviderName] || BsRobot, {
+                      className: 'w-full h-full',
+                      'aria-label': `${provider.name} logo`,
+                    })}
+                  </div>
+                </motion.div>
+
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between gap-4 mb-2">
+                    <div>
+                      <h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
+                        {provider.name}
+                      </h4>
+                      <p className="text-xs text-bolt-elements-textSecondary mt-0.5">
+                        {PROVIDER_DESCRIPTIONS[provider.name as keyof typeof PROVIDER_DESCRIPTIONS] ||
+                          (URL_CONFIGURABLE_PROVIDERS.includes(provider.name)
+                            ? 'Configure custom endpoint for this provider'
+                            : 'Standard AI provider integration')}
+                      </p>
+                    </div>
+                    <Switch
+                      checked={provider.settings.enabled}
+                      onCheckedChange={(checked) => handleToggleProvider(provider, checked)}
+                    />
+                  </div>
+
+                  {provider.settings.enabled && URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && (
+                    <motion.div
+                      initial={{ opacity: 0, height: 0 }}
+                      animate={{ opacity: 1, height: 'auto' }}
+                      exit={{ opacity: 0, height: 0 }}
+                      transition={{ duration: 0.2 }}
+                    >
+                      <div className="flex items-center gap-2 mt-4">
+                        {editingProvider === provider.name ? (
+                          <input
+                            type="text"
+                            defaultValue={provider.settings.baseUrl}
+                            placeholder={`Enter ${provider.name} base URL`}
+                            className={classNames(
+                              'flex-1 px-3 py-1.5 rounded-lg text-sm',
+                              'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
+                              'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                              'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
+                              'transition-all duration-200',
+                            )}
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter') {
+                                handleUpdateBaseUrl(provider, e.currentTarget.value);
+                              } else if (e.key === 'Escape') {
+                                setEditingProvider(null);
+                              }
+                            }}
+                            onBlur={(e) => handleUpdateBaseUrl(provider, e.target.value)}
+                            autoFocus
+                          />
+                        ) : (
+                          <div
+                            className="flex-1 px-3 py-1.5 rounded-lg text-sm cursor-pointer group/url"
+                            onClick={() => setEditingProvider(provider.name)}
+                          >
+                            <div className="flex items-center gap-2 text-bolt-elements-textSecondary">
+                              <div className="i-ph:link text-sm" />
+                              <span className="group-hover/url:text-purple-500 transition-colors">
+                                {provider.settings.baseUrl || 'Click to set base URL'}
+                              </span>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+
+                      {providerBaseUrlEnvKeys[provider.name]?.baseUrlKey && (
+                        <div className="mt-2 text-xs text-green-500">
+                          <div className="flex items-center gap-1">
+                            <div className="i-ph:info" />
+                            <span>Environment URL set in .env file</span>
+                          </div>
+                        </div>
+                      )}
+                    </motion.div>
+                  )}
+                </div>
+              </div>
+
+              <motion.div
+                className="absolute inset-0 border-2 border-purple-500/0 rounded-lg pointer-events-none"
+                animate={{
+                  borderColor: provider.settings.enabled ? 'rgba(168, 85, 247, 0.2)' : 'rgba(168, 85, 247, 0)',
+                  scale: provider.settings.enabled ? 1 : 0.98,
+                }}
+                transition={{ duration: 0.2 }}
+              />
+            </motion.div>
+          ))}
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default CloudProvidersTab;

app/components/@settings/tabs/providers/local/LocalProvidersTab.tsx

@@ -0,0 +1,777 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { Switch } from '~/components/ui/Switch';
+import { useSettings } from '~/lib/hooks/useSettings';
+import { LOCAL_PROVIDERS, URL_CONFIGURABLE_PROVIDERS } from '~/lib/stores/settings';
+import type { IProviderConfig } from '~/types/model';
+import { logStore } from '~/lib/stores/logs';
+import { motion, AnimatePresence } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+import { BsRobot } from 'react-icons/bs';
+import type { IconType } from 'react-icons';
+import { BiChip } from 'react-icons/bi';
+import { TbBrandOpenai } from 'react-icons/tb';
+import { providerBaseUrlEnvKeys } from '~/utils/constants';
+import { useToast } from '~/components/ui/use-toast';
+import { Progress } from '~/components/ui/Progress';
+import OllamaModelInstaller from './OllamaModelInstaller';
+
+// Add type for provider names to ensure type safety
+type ProviderName = 'Ollama' | 'LMStudio' | 'OpenAILike';
+
+// Update the PROVIDER_ICONS type to use the ProviderName type
+const PROVIDER_ICONS: Record<ProviderName, IconType> = {
+  Ollama: BsRobot,
+  LMStudio: BsRobot,
+  OpenAILike: TbBrandOpenai,
+};
+
+// Update PROVIDER_DESCRIPTIONS to use the same type
+const PROVIDER_DESCRIPTIONS: Record<ProviderName, string> = {
+  Ollama: 'Run open-source models locally on your machine',
+  LMStudio: 'Local model inference with LM Studio',
+  OpenAILike: 'Connect to OpenAI-compatible API endpoints',
+};
+
+// Add a constant for the Ollama API base URL
+const OLLAMA_API_URL = 'http://127.0.0.1:11434';
+
+interface OllamaModel {
+  name: string;
+  digest: string;
+  size: number;
+  modified_at: string;
+  details?: {
+    family: string;
+    parameter_size: string;
+    quantization_level: string;
+  };
+  status?: 'idle' | 'updating' | 'updated' | 'error' | 'checking';
+  error?: string;
+  newDigest?: string;
+  progress?: {
+    current: number;
+    total: number;
+    status: string;
+  };
+}
+
+interface OllamaPullResponse {
+  status: string;
+  completed?: number;
+  total?: number;
+  digest?: string;
+}
+
+const isOllamaPullResponse = (data: unknown): data is OllamaPullResponse => {
+  return (
+    typeof data === 'object' &&
+    data !== null &&
+    'status' in data &&
+    typeof (data as OllamaPullResponse).status === 'string'
+  );
+};
+
+export default function LocalProvidersTab() {
+  const { providers, updateProviderSettings } = useSettings();
+  const [filteredProviders, setFilteredProviders] = useState<IProviderConfig[]>([]);
+  const [categoryEnabled, setCategoryEnabled] = useState(false);
+  const [ollamaModels, setOllamaModels] = useState<OllamaModel[]>([]);
+  const [isLoadingModels, setIsLoadingModels] = useState(false);
+  const [editingProvider, setEditingProvider] = useState<string | null>(null);
+  const { toast } = useToast();
+
+  // Effect to filter and sort providers
+  useEffect(() => {
+    const newFilteredProviders = Object.entries(providers || {})
+      .filter(([key]) => [...LOCAL_PROVIDERS, 'OpenAILike'].includes(key))
+      .map(([key, value]) => {
+        const provider = value as IProviderConfig;
+        const envKey = providerBaseUrlEnvKeys[key]?.baseUrlKey;
+        const envUrl = envKey ? (import.meta.env[envKey] as string | undefined) : undefined;
+
+        // Set base URL if provided by environment
+        if (envUrl && !provider.settings.baseUrl) {
+          updateProviderSettings(key, {
+            ...provider.settings,
+            baseUrl: envUrl,
+          });
+        }
+
+        return {
+          name: key,
+          settings: {
+            ...provider.settings,
+            baseUrl: provider.settings.baseUrl || envUrl,
+          },
+          staticModels: provider.staticModels || [],
+          getDynamicModels: provider.getDynamicModels,
+          getApiKeyLink: provider.getApiKeyLink,
+          labelForGetApiKey: provider.labelForGetApiKey,
+          icon: provider.icon,
+        } as IProviderConfig;
+      });
+
+    // Custom sort function to ensure LMStudio appears before OpenAILike
+    const sorted = newFilteredProviders.sort((a, b) => {
+      if (a.name === 'LMStudio') {
+        return -1;
+      }
+
+      if (b.name === 'LMStudio') {
+        return 1;
+      }
+
+      if (a.name === 'OpenAILike') {
+        return 1;
+      }
+
+      if (b.name === 'OpenAILike') {
+        return -1;
+      }
+
+      return a.name.localeCompare(b.name);
+    });
+    setFilteredProviders(sorted);
+  }, [providers, updateProviderSettings]);
+
+  // Add effect to update category toggle state based on provider states
+  useEffect(() => {
+    const newCategoryState = filteredProviders.every((p) => p.settings.enabled);
+    setCategoryEnabled(newCategoryState);
+  }, [filteredProviders]);
+
+  // Fetch Ollama models when enabled
+  useEffect(() => {
+    const ollamaProvider = filteredProviders.find((p) => p.name === 'Ollama');
+
+    if (ollamaProvider?.settings.enabled) {
+      fetchOllamaModels();
+    }
+  }, [filteredProviders]);
+
+  const fetchOllamaModels = async () => {
+    try {
+      setIsLoadingModels(true);
+
+      const response = await fetch('http://127.0.0.1:11434/api/tags');
+      const data = (await response.json()) as { models: OllamaModel[] };
+
+      setOllamaModels(
+        data.models.map((model) => ({
+          ...model,
+          status: 'idle' as const,
+        })),
+      );
+    } catch (error) {
+      console.error('Error fetching Ollama models:', error);
+    } finally {
+      setIsLoadingModels(false);
+    }
+  };
+
+  const updateOllamaModel = async (modelName: string): Promise<boolean> => {
+    try {
+      const response = await fetch(`${OLLAMA_API_URL}/api/pull`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: modelName }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to update ${modelName}`);
+      }
+
+      const reader = response.body?.getReader();
+
+      if (!reader) {
+        throw new Error('No response reader available');
+      }
+
+      while (true) {
+        const { done, value } = await reader.read();
+
+        if (done) {
+          break;
+        }
+
+        const text = new TextDecoder().decode(value);
+        const lines = text.split('\n').filter(Boolean);
+
+        for (const line of lines) {
+          const rawData = JSON.parse(line);
+
+          if (!isOllamaPullResponse(rawData)) {
+            console.error('Invalid response format:', rawData);
+            continue;
+          }
+
+          setOllamaModels((current) =>
+            current.map((m) =>
+              m.name === modelName
+                ? {
+                    ...m,
+                    progress: {
+                      current: rawData.completed || 0,
+                      total: rawData.total || 0,
+                      status: rawData.status,
+                    },
+                    newDigest: rawData.digest,
+                  }
+                : m,
+            ),
+          );
+        }
+      }
+
+      const updatedResponse = await fetch('http://127.0.0.1:11434/api/tags');
+      const updatedData = (await updatedResponse.json()) as { models: OllamaModel[] };
+      const updatedModel = updatedData.models.find((m) => m.name === modelName);
+
+      return updatedModel !== undefined;
+    } catch (error) {
+      console.error(`Error updating ${modelName}:`, error);
+      return false;
+    }
+  };
+
+  const handleToggleCategory = useCallback(
+    async (enabled: boolean) => {
+      filteredProviders.forEach((provider) => {
+        updateProviderSettings(provider.name, { ...provider.settings, enabled });
+      });
+      toast(enabled ? 'All local providers enabled' : 'All local providers disabled');
+    },
+    [filteredProviders, updateProviderSettings],
+  );
+
+  const handleToggleProvider = (provider: IProviderConfig, enabled: boolean) => {
+    updateProviderSettings(provider.name, {
+      ...provider.settings,
+      enabled,
+    });
+
+    if (enabled) {
+      logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
+      toast(`${provider.name} enabled`);
+    } else {
+      logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
+      toast(`${provider.name} disabled`);
+    }
+  };
+
+  const handleUpdateBaseUrl = (provider: IProviderConfig, newBaseUrl: string) => {
+    updateProviderSettings(provider.name, {
+      ...provider.settings,
+      baseUrl: newBaseUrl,
+    });
+    toast(`${provider.name} base URL updated`);
+    setEditingProvider(null);
+  };
+
+  const handleUpdateOllamaModel = async (modelName: string) => {
+    const updateSuccess = await updateOllamaModel(modelName);
+
+    if (updateSuccess) {
+      toast(`Updated ${modelName}`);
+    } else {
+      toast(`Failed to update ${modelName}`);
+    }
+  };
+
+  const handleDeleteOllamaModel = async (modelName: string) => {
+    try {
+      const response = await fetch(`${OLLAMA_API_URL}/api/delete`, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ name: modelName }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to delete ${modelName}`);
+      }
+
+      setOllamaModels((current) => current.filter((m) => m.name !== modelName));
+      toast(`Deleted ${modelName}`);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+      console.error(`Error deleting ${modelName}:`, errorMessage);
+      toast(`Failed to delete ${modelName}`);
+    }
+  };
+
+  // Update model details display
+  const ModelDetails = ({ model }: { model: OllamaModel }) => (
+    <div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
+      <div className="flex items-center gap-1">
+        <div className="i-ph:code text-purple-500" />
+        <span>{model.digest.substring(0, 7)}</span>
+      </div>
+      {model.details && (
+        <>
+          <div className="flex items-center gap-1">
+            <div className="i-ph:database text-purple-500" />
+            <span>{model.details.parameter_size}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <div className="i-ph:cube text-purple-500" />
+            <span>{model.details.quantization_level}</span>
+          </div>
+        </>
+      )}
+    </div>
+  );
+
+  // Update model actions to not use Tooltip
+  const ModelActions = ({
+    model,
+    onUpdate,
+    onDelete,
+  }: {
+    model: OllamaModel;
+    onUpdate: () => void;
+    onDelete: () => void;
+  }) => (
+    <div className="flex items-center gap-2">
+      <motion.button
+        onClick={onUpdate}
+        disabled={model.status === 'updating'}
+        className={classNames(
+          'rounded-lg p-2',
+          'bg-purple-500/10 text-purple-500',
+          'hover:bg-purple-500/20',
+          'transition-all duration-200',
+          { 'opacity-50 cursor-not-allowed': model.status === 'updating' },
+        )}
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+        title="Update model"
+      >
+        {model.status === 'updating' ? (
+          <div className="flex items-center gap-2">
+            <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+            <span className="text-sm">Updating...</span>
+          </div>
+        ) : (
+          <div className="i-ph:arrows-clockwise text-lg" />
+        )}
+      </motion.button>
+      <motion.button
+        onClick={onDelete}
+        disabled={model.status === 'updating'}
+        className={classNames(
+          'rounded-lg p-2',
+          'bg-red-500/10 text-red-500',
+          'hover:bg-red-500/20',
+          'transition-all duration-200',
+          { 'opacity-50 cursor-not-allowed': model.status === 'updating' },
+        )}
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+        title="Delete model"
+      >
+        <div className="i-ph:trash text-lg" />
+      </motion.button>
+    </div>
+  );
+
+  return (
+    <div
+      className={classNames(
+        'rounded-lg bg-bolt-elements-background text-bolt-elements-textPrimary shadow-sm p-4',
+        'hover:bg-bolt-elements-background-depth-2',
+        'transition-all duration-200',
+      )}
+      role="region"
+      aria-label="Local Providers Configuration"
+    >
+      <motion.div
+        className="space-y-6"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+      >
+        {/* Header section */}
+        <div className="flex items-center justify-between gap-4 border-b border-bolt-elements-borderColor pb-4">
+          <div className="flex items-center gap-3">
+            <motion.div
+              className={classNames(
+                'w-10 h-10 flex items-center justify-center rounded-xl',
+                'bg-purple-500/10 text-purple-500',
+              )}
+              whileHover={{ scale: 1.05 }}
+            >
+              <BiChip className="w-6 h-6" />
+            </motion.div>
+            <div>
+              <div className="flex items-center gap-2">
+                <h2 className="text-lg font-semibold text-bolt-elements-textPrimary">Local AI Models</h2>
+              </div>
+              <p className="text-sm text-bolt-elements-textSecondary">Configure and manage your local AI providers</p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-bolt-elements-textSecondary">Enable All</span>
+            <Switch
+              checked={categoryEnabled}
+              onCheckedChange={handleToggleCategory}
+              aria-label="Toggle all local providers"
+            />
+          </div>
+        </div>
+
+        {/* Ollama Section */}
+        {filteredProviders
+          .filter((provider) => provider.name === 'Ollama')
+          .map((provider) => (
+            <motion.div
+              key={provider.name}
+              className={classNames(
+                'bg-bolt-elements-background-depth-2 rounded-xl',
+                'hover:bg-bolt-elements-background-depth-3',
+                'transition-all duration-200 p-5',
+                'relative overflow-hidden group',
+              )}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              whileHover={{ scale: 1.01 }}
+            >
+              {/* Provider Header */}
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex items-start gap-4">
+                  <motion.div
+                    className={classNames(
+                      'w-12 h-12 flex items-center justify-center rounded-xl',
+                      'bg-bolt-elements-background-depth-3',
+                      provider.settings.enabled ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
+                    )}
+                    whileHover={{ scale: 1.1, rotate: 5 }}
+                  >
+                    {React.createElement(PROVIDER_ICONS[provider.name as ProviderName] || BsRobot, {
+                      className: 'w-7 h-7',
+                      'aria-label': `${provider.name} icon`,
+                    })}
+                  </motion.div>
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <h3 className="text-md font-semibold text-bolt-elements-textPrimary">{provider.name}</h3>
+                      <span className="px-2 py-0.5 text-xs rounded-full bg-green-500/10 text-green-500">Local</span>
+                    </div>
+                    <p className="text-sm text-bolt-elements-textSecondary mt-1">
+                      {PROVIDER_DESCRIPTIONS[provider.name as ProviderName]}
+                    </p>
+                  </div>
+                </div>
+                <Switch
+                  checked={provider.settings.enabled}
+                  onCheckedChange={(checked) => handleToggleProvider(provider, checked)}
+                  aria-label={`Toggle ${provider.name} provider`}
+                />
+              </div>
+
+              {/* URL Configuration Section */}
+              <AnimatePresence>
+                {provider.settings.enabled && (
+                  <motion.div
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    exit={{ opacity: 0, height: 0 }}
+                    className="mt-4"
+                  >
+                    <div className="flex flex-col gap-2">
+                      <label className="text-sm text-bolt-elements-textSecondary">API Endpoint</label>
+                      {editingProvider === provider.name ? (
+                        <input
+                          type="text"
+                          defaultValue={provider.settings.baseUrl || OLLAMA_API_URL}
+                          placeholder="Enter Ollama base URL"
+                          className={classNames(
+                            'w-full px-3 py-2 rounded-lg text-sm',
+                            'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
+                            'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                            'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
+                            'transition-all duration-200',
+                          )}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                              handleUpdateBaseUrl(provider, e.currentTarget.value);
+                            } else if (e.key === 'Escape') {
+                              setEditingProvider(null);
+                            }
+                          }}
+                          onBlur={(e) => handleUpdateBaseUrl(provider, e.target.value)}
+                          autoFocus
+                        />
+                      ) : (
+                        <div
+                          onClick={() => setEditingProvider(provider.name)}
+                          className={classNames(
+                            'w-full px-3 py-2 rounded-lg text-sm cursor-pointer',
+                            'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
+                            'hover:border-purple-500/30 hover:bg-bolt-elements-background-depth-4',
+                            'transition-all duration-200',
+                          )}
+                        >
+                          <div className="flex items-center gap-2 text-bolt-elements-textSecondary">
+                            <div className="i-ph:link text-sm" />
+                            <span>{provider.settings.baseUrl || OLLAMA_API_URL}</span>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+
+              {/* Ollama Models Section */}
+              {provider.settings.enabled && (
+                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="mt-6 space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <div className="i-ph:cube-duotone text-purple-500" />
+                      <h4 className="text-sm font-medium text-bolt-elements-textPrimary">Installed Models</h4>
+                    </div>
+                    {isLoadingModels ? (
+                      <div className="flex items-center gap-2">
+                        <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+                        <span className="text-sm text-bolt-elements-textSecondary">Loading models...</span>
+                      </div>
+                    ) : (
+                      <span className="text-sm text-bolt-elements-textSecondary">
+                        {ollamaModels.length} models available
+                      </span>
+                    )}
+                  </div>
+
+                  <div className="space-y-3">
+                    {isLoadingModels ? (
+                      <div className="space-y-3">
+                        {Array.from({ length: 3 }).map((_, i) => (
+                          <div
+                            key={i}
+                            className="h-20 w-full bg-bolt-elements-background-depth-3 rounded-lg animate-pulse"
+                          />
+                        ))}
+                      </div>
+                    ) : ollamaModels.length === 0 ? (
+                      <div className="text-center py-8 text-bolt-elements-textSecondary">
+                        <div className="i-ph:cube-transparent text-4xl mx-auto mb-2" />
+                        <p>No models installed yet</p>
+                        <p className="text-sm text-bolt-elements-textTertiary px-1">
+                          Browse models at{' '}
+                          <a
+                            href="https://ollama.com/library"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-purple-500 hover:underline inline-flex items-center gap-0.5 text-base font-medium"
+                          >
+                            ollama.com/library
+                            <div className="i-ph:arrow-square-out text-xs" />
+                          </a>{' '}
+                          and copy model names to install
+                        </p>
+                      </div>
+                    ) : (
+                      ollamaModels.map((model) => (
+                        <motion.div
+                          key={model.name}
+                          className={classNames(
+                            'p-4 rounded-xl',
+                            'bg-bolt-elements-background-depth-3',
+                            'hover:bg-bolt-elements-background-depth-4',
+                            'transition-all duration-200',
+                          )}
+                          whileHover={{ scale: 1.01 }}
+                        >
+                          <div className="flex items-center justify-between">
+                            <div className="space-y-2">
+                              <div className="flex items-center gap-2">
+                                <h5 className="text-sm font-medium text-bolt-elements-textPrimary">{model.name}</h5>
+                                <ModelStatusBadge status={model.status} />
+                              </div>
+                              <ModelDetails model={model} />
+                            </div>
+                            <ModelActions
+                              model={model}
+                              onUpdate={() => handleUpdateOllamaModel(model.name)}
+                              onDelete={() => {
+                                if (window.confirm(`Are you sure you want to delete ${model.name}?`)) {
+                                  handleDeleteOllamaModel(model.name);
+                                }
+                              }}
+                            />
+                          </div>
+                          {model.progress && (
+                            <div className="mt-3">
+                              <Progress
+                                value={Math.round((model.progress.current / model.progress.total) * 100)}
+                                className="h-1"
+                              />
+                              <div className="flex justify-between mt-1 text-xs text-bolt-elements-textSecondary">
+                                <span>{model.progress.status}</span>
+                                <span>{Math.round((model.progress.current / model.progress.total) * 100)}%</span>
+                              </div>
+                            </div>
+                          )}
+                        </motion.div>
+                      ))
+                    )}
+                  </div>
+
+                  {/* Model Installation Section */}
+                  <OllamaModelInstaller onModelInstalled={fetchOllamaModels} />
+                </motion.div>
+              )}
+            </motion.div>
+          ))}
+
+        {/* Other Providers Section */}
+        <div className="border-t border-bolt-elements-borderColor pt-6 mt-8">
+          <h3 className="text-lg font-semibold text-bolt-elements-textPrimary mb-4">Other Local Providers</h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {filteredProviders
+              .filter((provider) => provider.name !== 'Ollama')
+              .map((provider, index) => (
+                <motion.div
+                  key={provider.name}
+                  className={classNames(
+                    'bg-bolt-elements-background-depth-2 rounded-xl',
+                    'hover:bg-bolt-elements-background-depth-3',
+                    'transition-all duration-200 p-5',
+                    'relative overflow-hidden group',
+                  )}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: index * 0.1 }}
+                  whileHover={{ scale: 1.01 }}
+                >
+                  {/* Provider Header */}
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex items-start gap-4">
+                      <motion.div
+                        className={classNames(
+                          'w-12 h-12 flex items-center justify-center rounded-xl',
+                          'bg-bolt-elements-background-depth-3',
+                          provider.settings.enabled ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
+                        )}
+                        whileHover={{ scale: 1.1, rotate: 5 }}
+                      >
+                        {React.createElement(PROVIDER_ICONS[provider.name as ProviderName] || BsRobot, {
+                          className: 'w-7 h-7',
+                          'aria-label': `${provider.name} icon`,
+                        })}
+                      </motion.div>
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <h3 className="text-md font-semibold text-bolt-elements-textPrimary">{provider.name}</h3>
+                          <div className="flex gap-1">
+                            <span className="px-2 py-0.5 text-xs rounded-full bg-green-500/10 text-green-500">
+                              Local
+                            </span>
+                            {URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && (
+                              <span className="px-2 py-0.5 text-xs rounded-full bg-purple-500/10 text-purple-500">
+                                Configurable
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                        <p className="text-sm text-bolt-elements-textSecondary mt-1">
+                          {PROVIDER_DESCRIPTIONS[provider.name as ProviderName]}
+                        </p>
+                      </div>
+                    </div>
+                    <Switch
+                      checked={provider.settings.enabled}
+                      onCheckedChange={(checked) => handleToggleProvider(provider, checked)}
+                      aria-label={`Toggle ${provider.name} provider`}
+                    />
+                  </div>
+
+                  {/* URL Configuration Section */}
+                  <AnimatePresence>
+                    {provider.settings.enabled && URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && (
+                      <motion.div
+                        initial={{ opacity: 0, height: 0 }}
+                        animate={{ opacity: 1, height: 'auto' }}
+                        exit={{ opacity: 0, height: 0 }}
+                        className="mt-4"
+                      >
+                        <div className="flex flex-col gap-2">
+                          <label className="text-sm text-bolt-elements-textSecondary">API Endpoint</label>
+                          {editingProvider === provider.name ? (
+                            <input
+                              type="text"
+                              defaultValue={provider.settings.baseUrl}
+                              placeholder={`Enter ${provider.name} base URL`}
+                              className={classNames(
+                                'w-full px-3 py-2 rounded-lg text-sm',
+                                'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
+                                'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                                'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
+                                'transition-all duration-200',
+                              )}
+                              onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                  handleUpdateBaseUrl(provider, e.currentTarget.value);
+                                } else if (e.key === 'Escape') {
+                                  setEditingProvider(null);
+                                }
+                              }}
+                              onBlur={(e) => handleUpdateBaseUrl(provider, e.target.value)}
+                              autoFocus
+                            />
+                          ) : (
+                            <div
+                              onClick={() => setEditingProvider(provider.name)}
+                              className={classNames(
+                                'w-full px-3 py-2 rounded-lg text-sm cursor-pointer',
+                                'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
+                                'hover:border-purple-500/30 hover:bg-bolt-elements-background-depth-4',
+                                'transition-all duration-200',
+                              )}
+                            >
+                              <div className="flex items-center gap-2 text-bolt-elements-textSecondary">
+                                <div className="i-ph:link text-sm" />
+                                <span>{provider.settings.baseUrl || 'Click to set base URL'}</span>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </motion.div>
+              ))}
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+}
+
+// Helper component for model status badge
+function ModelStatusBadge({ status }: { status?: string }) {
+  if (!status || status === 'idle') {
+    return null;
+  }
+
+  const statusConfig = {
+    updating: { bg: 'bg-yellow-500/10', text: 'text-yellow-500', label: 'Updating' },
+    updated: { bg: 'bg-green-500/10', text: 'text-green-500', label: 'Updated' },
+    error: { bg: 'bg-red-500/10', text: 'text-red-500', label: 'Error' },
+  };
+
+  const config = statusConfig[status as keyof typeof statusConfig];
+
+  if (!config) {
+    return null;
+  }
+
+  return (
+    <span className={classNames('px-2 py-0.5 rounded-full text-xs font-medium', config.bg, config.text)}>
+      {config.label}
+    </span>
+  );
+}

app/components/@settings/tabs/providers/local/OllamaModelInstaller.tsx

@@ -0,0 +1,603 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+import { Progress } from '~/components/ui/Progress';
+import { useToast } from '~/components/ui/use-toast';
+import { useSettings } from '~/lib/hooks/useSettings';
+
+interface OllamaModelInstallerProps {
+  onModelInstalled: () => void;
+}
+
+interface InstallProgress {
+  status: string;
+  progress: number;
+  downloadedSize?: string;
+  totalSize?: string;
+  speed?: string;
+}
+
+interface ModelInfo {
+  name: string;
+  desc: string;
+  size: string;
+  tags: string[];
+  installedVersion?: string;
+  latestVersion?: string;
+  needsUpdate?: boolean;
+  status?: 'idle' | 'installing' | 'updating' | 'updated' | 'error';
+  details?: {
+    family: string;
+    parameter_size: string;
+    quantization_level: string;
+  };
+}
+
+const POPULAR_MODELS: ModelInfo[] = [
+  {
+    name: 'deepseek-coder:6.7b',
+    desc: "DeepSeek's code generation model",
+    size: '4.1GB',
+    tags: ['coding', 'popular'],
+  },
+  {
+    name: 'llama2:7b',
+    desc: "Meta's Llama 2 (7B parameters)",
+    size: '3.8GB',
+    tags: ['general', 'popular'],
+  },
+  {
+    name: 'mistral:7b',
+    desc: "Mistral's 7B model",
+    size: '4.1GB',
+    tags: ['general', 'popular'],
+  },
+  {
+    name: 'gemma:7b',
+    desc: "Google's Gemma model",
+    size: '4.0GB',
+    tags: ['general', 'new'],
+  },
+  {
+    name: 'codellama:7b',
+    desc: "Meta's Code Llama model",
+    size: '4.1GB',
+    tags: ['coding', 'popular'],
+  },
+  {
+    name: 'neural-chat:7b',
+    desc: "Intel's Neural Chat model",
+    size: '4.1GB',
+    tags: ['chat', 'popular'],
+  },
+  {
+    name: 'phi:latest',
+    desc: "Microsoft's Phi-2 model",
+    size: '2.7GB',
+    tags: ['small', 'fast'],
+  },
+  {
+    name: 'qwen:7b',
+    desc: "Alibaba's Qwen model",
+    size: '4.1GB',
+    tags: ['general'],
+  },
+  {
+    name: 'solar:10.7b',
+    desc: "Upstage's Solar model",
+    size: '6.1GB',
+    tags: ['large', 'powerful'],
+  },
+  {
+    name: 'openchat:7b',
+    desc: 'Open-source chat model',
+    size: '4.1GB',
+    tags: ['chat', 'popular'],
+  },
+  {
+    name: 'dolphin-phi:2.7b',
+    desc: 'Lightweight chat model',
+    size: '1.6GB',
+    tags: ['small', 'fast'],
+  },
+  {
+    name: 'stable-code:3b',
+    desc: 'Lightweight coding model',
+    size: '1.8GB',
+    tags: ['coding', 'small'],
+  },
+];
+
+function formatBytes(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]}`;
+}
+
+function formatSpeed(bytesPerSecond: number): string {
+  return `${formatBytes(bytesPerSecond)}/s`;
+}
+
+// Add Ollama Icon SVG component
+function OllamaIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 1024 1024" className={className} fill="currentColor">
+      <path d="M684.3 322.2H339.8c-9.5.1-17.7 6.8-19.6 16.1-8.2 41.4-12.4 83.5-12.4 125.7 0 42.2 4.2 84.3 12.4 125.7 1.9 9.3 10.1 16 19.6 16.1h344.5c9.5-.1 17.7-6.8 19.6-16.1 8.2-41.4 12.4-83.5 12.4-125.7 0-42.2-4.2-84.3-12.4-125.7-1.9-9.3-10.1-16-19.6-16.1zM512 640c-176.7 0-320-143.3-320-320S335.3 0 512 0s320 143.3 320 320-143.3 320-320 320z" />
+    </svg>
+  );
+}
+
+export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelInstallerProps) {
+  const [modelString, setModelString] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isInstalling, setIsInstalling] = useState(false);
+  const [isChecking, setIsChecking] = useState(false);
+  const [installProgress, setInstallProgress] = useState<InstallProgress | null>(null);
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [models, setModels] = useState<ModelInfo[]>(POPULAR_MODELS);
+  const { toast } = useToast();
+  const { providers } = useSettings();
+
+  // Get base URL from provider settings
+  const baseUrl = providers?.Ollama?.settings?.baseUrl || 'http://127.0.0.1:11434';
+
+  // Function to check installed models and their versions
+  const checkInstalledModels = async () => {
+    try {
+      const response = await fetch(`${baseUrl}/api/tags`, {
+        method: 'GET',
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch installed models');
+      }
+
+      const data = (await response.json()) as { models: Array<{ name: string; digest: string; latest: string }> };
+      const installedModels = data.models || [];
+
+      // Update models with installed versions
+      setModels((prevModels) =>
+        prevModels.map((model) => {
+          const installed = installedModels.find((m) => m.name.toLowerCase() === model.name.toLowerCase());
+
+          if (installed) {
+            return {
+              ...model,
+              installedVersion: installed.digest.substring(0, 8),
+              needsUpdate: installed.digest !== installed.latest,
+              latestVersion: installed.latest?.substring(0, 8),
+            };
+          }
+
+          return model;
+        }),
+      );
+    } catch (error) {
+      console.error('Error checking installed models:', error);
+    }
+  };
+
+  // Check installed models on mount and after installation
+  useEffect(() => {
+    checkInstalledModels();
+  }, [baseUrl]);
+
+  const handleCheckUpdates = async () => {
+    setIsChecking(true);
+
+    try {
+      await checkInstalledModels();
+      toast('Model versions checked');
+    } catch (err) {
+      console.error('Failed to check model versions:', err);
+      toast('Failed to check model versions');
+    } finally {
+      setIsChecking(false);
+    }
+  };
+
+  const filteredModels = models.filter((model) => {
+    const matchesSearch =
+      searchQuery === '' ||
+      model.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      model.desc.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesTags = selectedTags.length === 0 || selectedTags.some((tag) => model.tags.includes(tag));
+
+    return matchesSearch && matchesTags;
+  });
+
+  const handleInstallModel = async (modelToInstall: string) => {
+    if (!modelToInstall) {
+      return;
+    }
+
+    try {
+      setIsInstalling(true);
+      setInstallProgress({
+        status: 'Starting download...',
+        progress: 0,
+        downloadedSize: '0 B',
+        totalSize: 'Calculating...',
+        speed: '0 B/s',
+      });
+      setModelString('');
+      setSearchQuery('');
+
+      const response = await fetch(`${baseUrl}/api/pull`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ name: modelToInstall }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const reader = response.body?.getReader();
+
+      if (!reader) {
+        throw new Error('Failed to get response reader');
+      }
+
+      let lastTime = Date.now();
+      let lastBytes = 0;
+
+      while (true) {
+        const { done, value } = await reader.read();
+
+        if (done) {
+          break;
+        }
+
+        const text = new TextDecoder().decode(value);
+        const lines = text.split('\n').filter(Boolean);
+
+        for (const line of lines) {
+          try {
+            const data = JSON.parse(line);
+
+            if ('status' in data) {
+              const currentTime = Date.now();
+              const timeDiff = (currentTime - lastTime) / 1000; // Convert to seconds
+              const bytesDiff = (data.completed || 0) - lastBytes;
+              const speed = bytesDiff / timeDiff;
+
+              setInstallProgress({
+                status: data.status,
+                progress: data.completed && data.total ? (data.completed / data.total) * 100 : 0,
+                downloadedSize: formatBytes(data.completed || 0),
+                totalSize: data.total ? formatBytes(data.total) : 'Calculating...',
+                speed: formatSpeed(speed),
+              });
+
+              lastTime = currentTime;
+              lastBytes = data.completed || 0;
+            }
+          } catch (err) {
+            console.error('Error parsing progress:', err);
+          }
+        }
+      }
+
+      toast('Successfully installed ' + modelToInstall + '. The model list will refresh automatically.');
+
+      // Ensure we call onModelInstalled after successful installation
+      setTimeout(() => {
+        onModelInstalled();
+      }, 1000);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+      console.error(`Error installing ${modelToInstall}:`, errorMessage);
+      toast(`Failed to install ${modelToInstall}. ${errorMessage}`);
+    } finally {
+      setIsInstalling(false);
+      setInstallProgress(null);
+    }
+  };
+
+  const handleUpdateModel = async (modelToUpdate: string) => {
+    try {
+      setModels((prev) => prev.map((m) => (m.name === modelToUpdate ? { ...m, status: 'updating' } : m)));
+
+      const response = await fetch(`${baseUrl}/api/pull`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ name: modelToUpdate }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const reader = response.body?.getReader();
+
+      if (!reader) {
+        throw new Error('Failed to get response reader');
+      }
+
+      let lastTime = Date.now();
+      let lastBytes = 0;
+
+      while (true) {
+        const { done, value } = await reader.read();
+
+        if (done) {
+          break;
+        }
+
+        const text = new TextDecoder().decode(value);
+        const lines = text.split('\n').filter(Boolean);
+
+        for (const line of lines) {
+          try {
+            const data = JSON.parse(line);
+
+            if ('status' in data) {
+              const currentTime = Date.now();
+              const timeDiff = (currentTime - lastTime) / 1000;
+              const bytesDiff = (data.completed || 0) - lastBytes;
+              const speed = bytesDiff / timeDiff;
+
+              setInstallProgress({
+                status: data.status,
+                progress: data.completed && data.total ? (data.completed / data.total) * 100 : 0,
+                downloadedSize: formatBytes(data.completed || 0),
+                totalSize: data.total ? formatBytes(data.total) : 'Calculating...',
+                speed: formatSpeed(speed),
+              });
+
+              lastTime = currentTime;
+              lastBytes = data.completed || 0;
+            }
+          } catch (err) {
+            console.error('Error parsing progress:', err);
+          }
+        }
+      }
+
+      toast('Successfully updated ' + modelToUpdate);
+
+      // Refresh model list after update
+      await checkInstalledModels();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+      console.error(`Error updating ${modelToUpdate}:`, errorMessage);
+      toast(`Failed to update ${modelToUpdate}. ${errorMessage}`);
+      setModels((prev) => prev.map((m) => (m.name === modelToUpdate ? { ...m, status: 'error' } : m)));
+    } finally {
+      setInstallProgress(null);
+    }
+  };
+
+  const allTags = Array.from(new Set(POPULAR_MODELS.flatMap((model) => model.tags)));
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between pt-6">
+        <div className="flex items-center gap-3">
+          <OllamaIcon className="w-8 h-8 text-purple-500" />
+          <div>
+            <h3 className="text-lg font-semibold text-bolt-elements-textPrimary">Ollama Models</h3>
+            <p className="text-sm text-bolt-elements-textSecondary mt-1">Install and manage your Ollama models</p>
+          </div>
+        </div>
+        <motion.button
+          onClick={handleCheckUpdates}
+          disabled={isChecking}
+          className={classNames(
+            'px-4 py-2 rounded-lg',
+            'bg-purple-500/10 text-purple-500',
+            'hover:bg-purple-500/20',
+            'transition-all duration-200',
+            'flex items-center gap-2',
+          )}
+          whileHover={{ scale: 1.02 }}
+          whileTap={{ scale: 0.98 }}
+        >
+          {isChecking ? (
+            <div className="i-ph:spinner-gap-bold animate-spin" />
+          ) : (
+            <div className="i-ph:arrows-clockwise" />
+          )}
+          Check Updates
+        </motion.button>
+      </div>
+
+      <div className="flex gap-4">
+        <div className="flex-1">
+          <div className="space-y-1">
+            <input
+              type="text"
+              className={classNames(
+                'w-full px-4 py-3 rounded-xl',
+                'bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor',
+                'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
+                'transition-all duration-200',
+              )}
+              placeholder="Search models or enter custom model name..."
+              value={searchQuery || modelString}
+              onChange={(e) => {
+                const value = e.target.value;
+                setSearchQuery(value);
+                setModelString(value);
+              }}
+              disabled={isInstalling}
+            />
+            <p className="text-sm text-bolt-elements-textSecondary px-1">
+              Browse models at{' '}
+              <a
+                href="https://ollama.com/library"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-purple-500 hover:underline inline-flex items-center gap-1 text-base font-medium"
+              >
+                ollama.com/library
+                <div className="i-ph:arrow-square-out text-sm" />
+              </a>{' '}
+              and copy model names to install
+            </p>
+          </div>
+        </div>
+        <motion.button
+          onClick={() => handleInstallModel(modelString)}
+          disabled={!modelString || isInstalling}
+          className={classNames(
+            'rounded-lg px-4 py-2',
+            'bg-purple-500 text-white text-sm',
+            'hover:bg-purple-600',
+            'transition-all duration-200',
+            'flex items-center gap-2',
+            { 'opacity-50 cursor-not-allowed': !modelString || isInstalling },
+          )}
+          whileHover={{ scale: 1.02 }}
+          whileTap={{ scale: 0.98 }}
+        >
+          {isInstalling ? (
+            <div className="flex items-center gap-2">
+              <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+              <span>Installing...</span>
+            </div>
+          ) : (
+            <div className="flex items-center gap-2">
+              <OllamaIcon className="w-4 h-4" />
+              <span>Install Model</span>
+            </div>
+          )}
+        </motion.button>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {allTags.map((tag) => (
+          <button
+            key={tag}
+            onClick={() => {
+              setSelectedTags((prev) => (prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]));
+            }}
+            className={classNames(
+              'px-3 py-1 rounded-full text-xs font-medium transition-all duration-200',
+              selectedTags.includes(tag)
+                ? 'bg-purple-500 text-white'
+                : 'bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary hover:bg-bolt-elements-background-depth-4',
+            )}
+          >
+            {tag}
+          </button>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-1 gap-2">
+        {filteredModels.map((model) => (
+          <motion.div
+            key={model.name}
+            className={classNames(
+              'flex items-start gap-2 p-3 rounded-lg',
+              'bg-bolt-elements-background-depth-3',
+              'hover:bg-bolt-elements-background-depth-4',
+              'transition-all duration-200',
+              'relative group',
+            )}
+          >
+            <OllamaIcon className="w-5 h-5 text-purple-500 mt-0.5 flex-shrink-0" />
+            <div className="flex-1 space-y-1.5">
+              <div className="flex items-start justify-between">
+                <div>
+                  <p className="text-bolt-elements-textPrimary font-mono text-sm">{model.name}</p>
+                  <p className="text-xs text-bolt-elements-textSecondary mt-0.5">{model.desc}</p>
+                </div>
+                <div className="text-right">
+                  <span className="text-xs text-bolt-elements-textTertiary">{model.size}</span>
+                  {model.installedVersion && (
+                    <div className="mt-0.5 flex flex-col items-end gap-0.5">
+                      <span className="text-xs text-bolt-elements-textTertiary">v{model.installedVersion}</span>
+                      {model.needsUpdate && model.latestVersion && (
+                        <span className="text-xs text-purple-500">v{model.latestVersion} available</span>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="flex items-center justify-between">
+                <div className="flex flex-wrap gap-1">
+                  {model.tags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="px-1.5 py-0.5 rounded-full text-[10px] bg-bolt-elements-background-depth-4 text-bolt-elements-textTertiary"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+                <div className="flex gap-2">
+                  {model.installedVersion ? (
+                    model.needsUpdate ? (
+                      <motion.button
+                        onClick={() => handleUpdateModel(model.name)}
+                        className={classNames(
+                          'px-2 py-0.5 rounded-lg text-xs',
+                          'bg-purple-500 text-white',
+                          'hover:bg-purple-600',
+                          'transition-all duration-200',
+                          'flex items-center gap-1',
+                        )}
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                      >
+                        <div className="i-ph:arrows-clockwise text-xs" />
+                        Update
+                      </motion.button>
+                    ) : (
+                      <span className="px-2 py-0.5 rounded-lg text-xs text-green-500 bg-green-500/10">Up to date</span>
+                    )
+                  ) : (
+                    <motion.button
+                      onClick={() => handleInstallModel(model.name)}
+                      className={classNames(
+                        'px-2 py-0.5 rounded-lg text-xs',
+                        'bg-purple-500 text-white',
+                        'hover:bg-purple-600',
+                        'transition-all duration-200',
+                        'flex items-center gap-1',
+                      )}
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      <div className="i-ph:download text-xs" />
+                      Install
+                    </motion.button>
+                  )}
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+
+      {installProgress && (
+        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="space-y-2">
+          <div className="flex justify-between text-sm">
+            <span className="text-bolt-elements-textSecondary">{installProgress.status}</span>
+            <div className="flex items-center gap-4">
+              <span className="text-bolt-elements-textTertiary">
+                {installProgress.downloadedSize} / {installProgress.totalSize}
+              </span>
+              <span className="text-bolt-elements-textTertiary">{installProgress.speed}</span>
+              <span className="text-bolt-elements-textSecondary">{Math.round(installProgress.progress)}%</span>
+            </div>
+          </div>
+          <Progress value={installProgress.progress} className="h-1" />
+        </motion.div>
+      )}
+    </div>
+  );
+}

app/components/@settings/tabs/providers/service-status/ServiceStatusTab.tsx

@@ -0,0 +1,135 @@
+import { useState, useEffect } from 'react';
+import type { ServiceStatus } from './types';
+import { ProviderStatusCheckerFactory } from './provider-factory';
+
+export default function ServiceStatusTab() {
+  const [serviceStatuses, setServiceStatuses] = useState<ServiceStatus[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const checkAllProviders = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const providers = ProviderStatusCheckerFactory.getProviderNames();
+        const statuses: ServiceStatus[] = [];
+
+        for (const provider of providers) {
+          try {
+            const checker = ProviderStatusCheckerFactory.getChecker(provider);
+            const result = await checker.checkStatus();
+
+            statuses.push({
+              provider,
+              ...result,
+              lastChecked: new Date().toISOString(),
+            });
+          } catch (err) {
+            console.error(`Error checking ${provider} status:`, err);
+            statuses.push({
+              provider,
+              status: 'degraded',
+              message: 'Unable to check service status',
+              incidents: ['Error checking service status'],
+              lastChecked: new Date().toISOString(),
+            });
+          }
+        }
+
+        setServiceStatuses(statuses);
+      } catch (err) {
+        console.error('Error checking provider statuses:', err);
+        setError('Failed to check service statuses');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    checkAllProviders();
+
+    // Set up periodic checks every 5 minutes
+    const interval = setInterval(checkAllProviders, 5 * 60 * 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const getStatusColor = (status: ServiceStatus['status']) => {
+    switch (status) {
+      case 'operational':
+        return 'text-green-500 dark:text-green-400';
+      case 'degraded':
+        return 'text-yellow-500 dark:text-yellow-400';
+      case 'down':
+        return 'text-red-500 dark:text-red-400';
+      default:
+        return 'text-gray-500 dark:text-gray-400';
+    }
+  };
+
+  const getStatusIcon = (status: ServiceStatus['status']) => {
+    switch (status) {
+      case 'operational':
+        return 'i-ph:check-circle';
+      case 'degraded':
+        return 'i-ph:warning';
+      case 'down':
+        return 'i-ph:x-circle';
+      default:
+        return 'i-ph:question';
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="animate-spin i-ph:circle-notch w-8 h-8 text-purple-500" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-red-500 dark:text-red-400">
+        <div className="i-ph:warning w-8 h-8 mb-2" />
+        <p>{error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 gap-4">
+        {serviceStatuses.map((service) => (
+          <div
+            key={service.provider}
+            className="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"
+          >
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">{service.provider}</h3>
+              <div className={`flex items-center ${getStatusColor(service.status)}`}>
+                <div className={`${getStatusIcon(service.status)} w-5 h-5 mr-2`} />
+                <span className="capitalize">{service.status}</span>
+              </div>
+            </div>
+            <p className="text-gray-600 dark:text-gray-300 mb-2">{service.message}</p>
+            {service.incidents && service.incidents.length > 0 && (
+              <div className="mt-2">
+                <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Recent Incidents:</h4>
+                <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                  {service.incidents.map((incident, index) => (
+                    <li key={index}>{incident}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+            <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
+              Last checked: {new Date(service.lastChecked).toLocaleString()}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

app/components/@settings/tabs/providers/service-status/base-provider.ts

@@ -0,0 +1,121 @@
+import type { ProviderConfig, StatusCheckResult, ApiResponse } from './types';
+
+export abstract class BaseProviderChecker {
+  protected config: ProviderConfig;
+
+  constructor(config: ProviderConfig) {
+    this.config = config;
+  }
+
+  protected async checkApiEndpoint(
+    url: string,
+    headers?: Record<string, string>,
+    testModel?: string,
+  ): Promise<{ ok: boolean; status: number | string; message?: string; responseTime: number }> {
+    try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 10000);
+
+      const startTime = performance.now();
+
+      // Add common headers
+      const processedHeaders = {
+        'Content-Type': 'application/json',
+        ...headers,
+      };
+
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: processedHeaders,
+        signal: controller.signal,
+      });
+
+      const endTime = performance.now();
+      const responseTime = endTime - startTime;
+
+      clearTimeout(timeoutId);
+
+      const data = (await response.json()) as ApiResponse;
+
+      if (!response.ok) {
+        let errorMessage = `API returned status: ${response.status}`;
+
+        if (data.error?.message) {
+          errorMessage = data.error.message;
+        } else if (data.message) {
+          errorMessage = data.message;
+        }
+
+        return {
+          ok: false,
+          status: response.status,
+          message: errorMessage,
+          responseTime,
+        };
+      }
+
+      // Different providers have different model list formats
+      let models: string[] = [];
+
+      if (Array.isArray(data)) {
+        models = data.map((model: { id?: string; name?: string }) => model.id || model.name || '');
+      } else if (data.data && Array.isArray(data.data)) {
+        models = data.data.map((model) => model.id || model.name || '');
+      } else if (data.models && Array.isArray(data.models)) {
+        models = data.models.map((model) => model.id || model.name || '');
+      } else if (data.model) {
+        models = [data.model];
+      }
+
+      if (!testModel || models.length > 0) {
+        return {
+          ok: true,
+          status: response.status,
+          responseTime,
+          message: 'API key is valid',
+        };
+      }
+
+      if (testModel && !models.includes(testModel)) {
+        return {
+          ok: true,
+          status: 'model_not_found',
+          message: `API key is valid (test model ${testModel} not found in ${models.length} available models)`,
+          responseTime,
+        };
+      }
+
+      return {
+        ok: true,
+        status: response.status,
+        message: 'API key is valid',
+        responseTime,
+      };
+    } catch (error) {
+      console.error(`Error checking API endpoint ${url}:`, error);
+      return {
+        ok: false,
+        status: error instanceof Error ? error.message : 'Unknown error',
+        message: error instanceof Error ? `Connection failed: ${error.message}` : 'Connection failed',
+        responseTime: 0,
+      };
+    }
+  }
+
+  protected async checkEndpoint(url: string): Promise<'reachable' | 'unreachable'> {
+    try {
+      const response = await fetch(url, {
+        mode: 'no-cors',
+        headers: {
+          Accept: 'text/html',
+        },
+      });
+      return response.type === 'opaque' ? 'reachable' : 'unreachable';
+    } catch (error) {
+      console.error(`Error checking ${url}:`, error);
+      return 'unreachable';
+    }
+  }
+
+  abstract checkStatus(): Promise<StatusCheckResult>;
+}

app/components/@settings/tabs/providers/service-status/provider-factory.ts

@@ -0,0 +1,154 @@
+import type { ProviderName, ProviderConfig, StatusCheckResult } from './types';
+import { BaseProviderChecker } from './base-provider';
+
+import { AmazonBedrockStatusChecker } from './providers/amazon-bedrock';
+import { CohereStatusChecker } from './providers/cohere';
+import { DeepseekStatusChecker } from './providers/deepseek';
+import { GoogleStatusChecker } from './providers/google';
+import { GroqStatusChecker } from './providers/groq';
+import { HuggingFaceStatusChecker } from './providers/huggingface';
+import { HyperbolicStatusChecker } from './providers/hyperbolic';
+import { MistralStatusChecker } from './providers/mistral';
+import { OpenRouterStatusChecker } from './providers/openrouter';
+import { PerplexityStatusChecker } from './providers/perplexity';
+import { TogetherStatusChecker } from './providers/together';
+import { XAIStatusChecker } from './providers/xai';
+
+export class ProviderStatusCheckerFactory {
+  private static _providerConfigs: Record<ProviderName, ProviderConfig> = {
+    AmazonBedrock: {
+      statusUrl: 'https://health.aws.amazon.com/health/status',
+      apiUrl: 'https://bedrock.us-east-1.amazonaws.com/models',
+      headers: {},
+      testModel: 'anthropic.claude-3-sonnet-20240229-v1:0',
+    },
+    Cohere: {
+      statusUrl: 'https://status.cohere.com/',
+      apiUrl: 'https://api.cohere.ai/v1/models',
+      headers: {},
+      testModel: 'command',
+    },
+    Deepseek: {
+      statusUrl: 'https://status.deepseek.com/',
+      apiUrl: 'https://api.deepseek.com/v1/models',
+      headers: {},
+      testModel: 'deepseek-chat',
+    },
+    Google: {
+      statusUrl: 'https://status.cloud.google.com/',
+      apiUrl: 'https://generativelanguage.googleapis.com/v1/models',
+      headers: {},
+      testModel: 'gemini-pro',
+    },
+    Groq: {
+      statusUrl: 'https://groqstatus.com/',
+      apiUrl: 'https://api.groq.com/v1/models',
+      headers: {},
+      testModel: 'mixtral-8x7b-32768',
+    },
+    HuggingFace: {
+      statusUrl: 'https://status.huggingface.co/',
+      apiUrl: 'https://api-inference.huggingface.co/models',
+      headers: {},
+      testModel: 'mistralai/Mixtral-8x7B-Instruct-v0.1',
+    },
+    Hyperbolic: {
+      statusUrl: 'https://status.hyperbolic.ai/',
+      apiUrl: 'https://api.hyperbolic.ai/v1/models',
+      headers: {},
+      testModel: 'hyperbolic-1',
+    },
+    Mistral: {
+      statusUrl: 'https://status.mistral.ai/',
+      apiUrl: 'https://api.mistral.ai/v1/models',
+      headers: {},
+      testModel: 'mistral-tiny',
+    },
+    OpenRouter: {
+      statusUrl: 'https://status.openrouter.ai/',
+      apiUrl: 'https://openrouter.ai/api/v1/models',
+      headers: {},
+      testModel: 'anthropic/claude-3-sonnet',
+    },
+    Perplexity: {
+      statusUrl: 'https://status.perplexity.com/',
+      apiUrl: 'https://api.perplexity.ai/v1/models',
+      headers: {},
+      testModel: 'pplx-7b-chat',
+    },
+    Together: {
+      statusUrl: 'https://status.together.ai/',
+      apiUrl: 'https://api.together.xyz/v1/models',
+      headers: {},
+      testModel: 'mistralai/Mixtral-8x7B-Instruct-v0.1',
+    },
+    XAI: {
+      statusUrl: 'https://status.x.ai/',
+      apiUrl: 'https://api.x.ai/v1/models',
+      headers: {},
+      testModel: 'grok-1',
+    },
+  };
+
+  static getChecker(provider: ProviderName): BaseProviderChecker {
+    const config = this._providerConfigs[provider];
+
+    if (!config) {
+      throw new Error(`No configuration found for provider: ${provider}`);
+    }
+
+    switch (provider) {
+      case 'AmazonBedrock':
+        return new AmazonBedrockStatusChecker(config);
+      case 'Cohere':
+        return new CohereStatusChecker(config);
+      case 'Deepseek':
+        return new DeepseekStatusChecker(config);
+      case 'Google':
+        return new GoogleStatusChecker(config);
+      case 'Groq':
+        return new GroqStatusChecker(config);
+      case 'HuggingFace':
+        return new HuggingFaceStatusChecker(config);
+      case 'Hyperbolic':
+        return new HyperbolicStatusChecker(config);
+      case 'Mistral':
+        return new MistralStatusChecker(config);
+      case 'OpenRouter':
+        return new OpenRouterStatusChecker(config);
+      case 'Perplexity':
+        return new PerplexityStatusChecker(config);
+      case 'Together':
+        return new TogetherStatusChecker(config);
+      case 'XAI':
+        return new XAIStatusChecker(config);
+      default:
+        return new (class extends BaseProviderChecker {
+          async checkStatus(): Promise<StatusCheckResult> {
+            const endpointStatus = await this.checkEndpoint(this.config.statusUrl);
+            const apiStatus = await this.checkEndpoint(this.config.apiUrl);
+
+            return {
+              status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+              message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+              incidents: ['Note: Limited status information due to CORS restrictions'],
+            };
+          }
+        })(config);
+    }
+  }
+
+  static getProviderNames(): ProviderName[] {
+    return Object.keys(this._providerConfigs) as ProviderName[];
+  }
+
+  static getProviderConfig(provider: ProviderName): ProviderConfig {
+    const config = this._providerConfigs[provider];
+
+    if (!config) {
+      throw new Error(`Unknown provider: ${provider}`);
+    }
+
+    return config;
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/amazon-bedrock.ts

@@ -0,0 +1,76 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class AmazonBedrockStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      // Check AWS health status page
+      const statusPageResponse = await fetch('https://health.aws.amazon.com/health/status');
+      const text = await statusPageResponse.text();
+
+      // Check for Bedrock and general AWS status
+      const hasBedrockIssues =
+        text.includes('Amazon Bedrock') &&
+        (text.includes('Service is experiencing elevated error rates') ||
+          text.includes('Service disruption') ||
+          text.includes('Degraded Service'));
+
+      const hasGeneralIssues = text.includes('Service disruption') || text.includes('Multiple services affected');
+
+      // Extract incidents
+      const incidents: string[] = [];
+      const incidentMatches = text.matchAll(/(\d{4}-\d{2}-\d{2})\s+(.*?)\s+Impact:(.*?)(?=\n|$)/g);
+
+      for (const match of incidentMatches) {
+        const [, date, title, impact] = match;
+
+        if (title.includes('Bedrock') || title.includes('AWS')) {
+          incidents.push(`${date}: ${title.trim()} - Impact: ${impact.trim()}`);
+        }
+      }
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All services operational';
+
+      if (hasBedrockIssues) {
+        status = 'degraded';
+        message = 'Amazon Bedrock service issues reported';
+      } else if (hasGeneralIssues) {
+        status = 'degraded';
+        message = 'AWS experiencing general issues';
+      }
+
+      // If status page check fails, fallback to endpoint check
+      if (!statusPageResponse.ok) {
+        const endpointStatus = await this.checkEndpoint('https://health.aws.amazon.com/health/status');
+        const apiEndpoint = 'https://bedrock.us-east-1.amazonaws.com/models';
+        const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+        return {
+          status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+          message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+          incidents: ['Note: Limited status information due to CORS restrictions'],
+        };
+      }
+
+      return {
+        status,
+        message,
+        incidents: incidents.slice(0, 5),
+      };
+    } catch (error) {
+      console.error('Error checking Amazon Bedrock status:', error);
+
+      // Fallback to basic endpoint check
+      const endpointStatus = await this.checkEndpoint('https://health.aws.amazon.com/health/status');
+      const apiEndpoint = 'https://bedrock.us-east-1.amazonaws.com/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      return {
+        status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+        message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+        incidents: ['Note: Limited status information due to CORS restrictions'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/anthropic.ts

@@ -0,0 +1,80 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class AnthropicStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      // Check status page
+      const statusPageResponse = await fetch('https://status.anthropic.com/');
+      const text = await statusPageResponse.text();
+
+      // Check for specific Anthropic status indicators
+      const isOperational = text.includes('All Systems Operational');
+      const hasDegradedPerformance = text.includes('Degraded Performance');
+      const hasPartialOutage = text.includes('Partial Outage');
+      const hasMajorOutage = text.includes('Major Outage');
+
+      // Extract incidents
+      const incidents: string[] = [];
+      const incidentSection = text.match(/Past Incidents(.*?)(?=\n\n)/s);
+
+      if (incidentSection) {
+        const incidentLines = incidentSection[1]
+          .split('\n')
+          .map((line) => line.trim())
+          .filter((line) => line && line.includes('202')); // Only get dated incidents
+
+        incidents.push(...incidentLines.slice(0, 5));
+      }
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All systems operational';
+
+      if (hasMajorOutage) {
+        status = 'down';
+        message = 'Major service outage';
+      } else if (hasPartialOutage) {
+        status = 'down';
+        message = 'Partial service outage';
+      } else if (hasDegradedPerformance) {
+        status = 'degraded';
+        message = 'Service experiencing degraded performance';
+      } else if (!isOperational) {
+        status = 'degraded';
+        message = 'Service status unknown';
+      }
+
+      // If status page check fails, fallback to endpoint check
+      if (!statusPageResponse.ok) {
+        const endpointStatus = await this.checkEndpoint('https://status.anthropic.com/');
+        const apiEndpoint = 'https://api.anthropic.com/v1/messages';
+        const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+        return {
+          status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+          message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+          incidents: ['Note: Limited status information due to CORS restrictions'],
+        };
+      }
+
+      return {
+        status,
+        message,
+        incidents,
+      };
+    } catch (error) {
+      console.error('Error checking Anthropic status:', error);
+
+      // Fallback to basic endpoint check
+      const endpointStatus = await this.checkEndpoint('https://status.anthropic.com/');
+      const apiEndpoint = 'https://api.anthropic.com/v1/messages';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      return {
+        status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+        message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+        incidents: ['Note: Limited status information due to CORS restrictions'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/cohere.ts

@@ -0,0 +1,91 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class CohereStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      // Check status page
+      const statusPageResponse = await fetch('https://status.cohere.com/');
+      const text = await statusPageResponse.text();
+
+      // Check for specific Cohere status indicators
+      const isOperational = text.includes('All Systems Operational');
+      const hasIncidents = text.includes('Active Incidents');
+      const hasDegradation = text.includes('Degraded Performance');
+      const hasOutage = text.includes('Service Outage');
+
+      // Extract incidents
+      const incidents: string[] = [];
+      const incidentSection = text.match(/Past Incidents(.*?)(?=\n\n)/s);
+
+      if (incidentSection) {
+        const incidentLines = incidentSection[1]
+          .split('\n')
+          .map((line) => line.trim())
+          .filter((line) => line && line.includes('202')); // Only get dated incidents
+
+        incidents.push(...incidentLines.slice(0, 5));
+      }
+
+      // Check specific services
+      const services = {
+        api: {
+          operational: text.includes('API Service') && text.includes('Operational'),
+          degraded: text.includes('API Service') && text.includes('Degraded Performance'),
+          outage: text.includes('API Service') && text.includes('Service Outage'),
+        },
+        generation: {
+          operational: text.includes('Generation Service') && text.includes('Operational'),
+          degraded: text.includes('Generation Service') && text.includes('Degraded Performance'),
+          outage: text.includes('Generation Service') && text.includes('Service Outage'),
+        },
+      };
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All systems operational';
+
+      if (services.api.outage || services.generation.outage || hasOutage) {
+        status = 'down';
+        message = 'Service outage detected';
+      } else if (services.api.degraded || services.generation.degraded || hasDegradation || hasIncidents) {
+        status = 'degraded';
+        message = 'Service experiencing issues';
+      } else if (!isOperational) {
+        status = 'degraded';
+        message = 'Service status unknown';
+      }
+
+      // If status page check fails, fallback to endpoint check
+      if (!statusPageResponse.ok) {
+        const endpointStatus = await this.checkEndpoint('https://status.cohere.com/');
+        const apiEndpoint = 'https://api.cohere.ai/v1/models';
+        const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+        return {
+          status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+          message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+          incidents: ['Note: Limited status information due to CORS restrictions'],
+        };
+      }
+
+      return {
+        status,
+        message,
+        incidents,
+      };
+    } catch (error) {
+      console.error('Error checking Cohere status:', error);
+
+      // Fallback to basic endpoint check
+      const endpointStatus = await this.checkEndpoint('https://status.cohere.com/');
+      const apiEndpoint = 'https://api.cohere.ai/v1/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      return {
+        status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+        message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+        incidents: ['Note: Limited status information due to CORS restrictions'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/deepseek.ts

@@ -0,0 +1,40 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class DeepseekStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      /*
+       * Check status page - Note: Deepseek doesn't have a public status page yet
+       * so we'll check their API endpoint directly
+       */
+      const apiEndpoint = 'https://api.deepseek.com/v1/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      // Check their website as a secondary indicator
+      const websiteStatus = await this.checkEndpoint('https://deepseek.com');
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All systems operational';
+
+      if (apiStatus !== 'reachable' || websiteStatus !== 'reachable') {
+        status = apiStatus !== 'reachable' ? 'down' : 'degraded';
+        message = apiStatus !== 'reachable' ? 'API appears to be down' : 'Service may be experiencing issues';
+      }
+
+      return {
+        status,
+        message,
+        incidents: [], // No public incident tracking available yet
+      };
+    } catch (error) {
+      console.error('Error checking Deepseek status:', error);
+
+      return {
+        status: 'degraded',
+        message: 'Unable to determine service status',
+        incidents: ['Note: Limited status information available'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/google.ts

@@ -0,0 +1,77 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class GoogleStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      // Check status page
+      const statusPageResponse = await fetch('https://status.cloud.google.com/');
+      const text = await statusPageResponse.text();
+
+      // Check for Vertex AI and general cloud status
+      const hasVertexAIIssues =
+        text.includes('Vertex AI') &&
+        (text.includes('Incident') ||
+          text.includes('Disruption') ||
+          text.includes('Outage') ||
+          text.includes('degraded'));
+
+      const hasGeneralIssues = text.includes('Major Incidents') || text.includes('Service Disruption');
+
+      // Extract incidents
+      const incidents: string[] = [];
+      const incidentMatches = text.matchAll(/(\d{4}-\d{2}-\d{2})\s+(.*?)\s+Impact:(.*?)(?=\n|$)/g);
+
+      for (const match of incidentMatches) {
+        const [, date, title, impact] = match;
+
+        if (title.includes('Vertex AI') || title.includes('Cloud')) {
+          incidents.push(`${date}: ${title.trim()} - Impact: ${impact.trim()}`);
+        }
+      }
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All services operational';
+
+      if (hasVertexAIIssues) {
+        status = 'degraded';
+        message = 'Vertex AI service issues reported';
+      } else if (hasGeneralIssues) {
+        status = 'degraded';
+        message = 'Google Cloud experiencing issues';
+      }
+
+      // If status page check fails, fallback to endpoint check
+      if (!statusPageResponse.ok) {
+        const endpointStatus = await this.checkEndpoint('https://status.cloud.google.com/');
+        const apiEndpoint = 'https://generativelanguage.googleapis.com/v1/models';
+        const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+        return {
+          status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+          message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+          incidents: ['Note: Limited status information due to CORS restrictions'],
+        };
+      }
+
+      return {
+        status,
+        message,
+        incidents: incidents.slice(0, 5),
+      };
+    } catch (error) {
+      console.error('Error checking Google status:', error);
+
+      // Fallback to basic endpoint check
+      const endpointStatus = await this.checkEndpoint('https://status.cloud.google.com/');
+      const apiEndpoint = 'https://generativelanguage.googleapis.com/v1/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      return {
+        status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+        message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+        incidents: ['Note: Limited status information due to CORS restrictions'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/groq.ts

@@ -0,0 +1,72 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class GroqStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      // Check status page
+      const statusPageResponse = await fetch('https://groqstatus.com/');
+      const text = await statusPageResponse.text();
+
+      const isOperational = text.includes('All Systems Operational');
+      const hasIncidents = text.includes('Active Incidents');
+      const hasDegradation = text.includes('Degraded Performance');
+      const hasOutage = text.includes('Service Outage');
+
+      // Extract incidents
+      const incidents: string[] = [];
+      const incidentMatches = text.matchAll(/(\d{4}-\d{2}-\d{2})\s+(.*?)\s+Status:(.*?)(?=\n|$)/g);
+
+      for (const match of incidentMatches) {
+        const [, date, title, status] = match;
+        incidents.push(`${date}: ${title.trim()} - ${status.trim()}`);
+      }
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All systems operational';
+
+      if (hasOutage) {
+        status = 'down';
+        message = 'Service outage detected';
+      } else if (hasDegradation || hasIncidents) {
+        status = 'degraded';
+        message = 'Service experiencing issues';
+      } else if (!isOperational) {
+        status = 'degraded';
+        message = 'Service status unknown';
+      }
+
+      // If status page check fails, fallback to endpoint check
+      if (!statusPageResponse.ok) {
+        const endpointStatus = await this.checkEndpoint('https://groqstatus.com/');
+        const apiEndpoint = 'https://api.groq.com/v1/models';
+        const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+        return {
+          status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+          message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+          incidents: ['Note: Limited status information due to CORS restrictions'],
+        };
+      }
+
+      return {
+        status,
+        message,
+        incidents: incidents.slice(0, 5),
+      };
+    } catch (error) {
+      console.error('Error checking Groq status:', error);
+
+      // Fallback to basic endpoint check
+      const endpointStatus = await this.checkEndpoint('https://groqstatus.com/');
+      const apiEndpoint = 'https://api.groq.com/v1/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      return {
+        status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+        message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+        incidents: ['Note: Limited status information due to CORS restrictions'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/huggingface.ts

@@ -0,0 +1,98 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class HuggingFaceStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      // Check status page
+      const statusPageResponse = await fetch('https://status.huggingface.co/');
+      const text = await statusPageResponse.text();
+
+      // Check for "All services are online" message
+      const allServicesOnline = text.includes('All services are online');
+
+      // Get last update time
+      const lastUpdateMatch = text.match(/Last updated on (.*?)(EST|PST|GMT)/);
+      const lastUpdate = lastUpdateMatch ? `${lastUpdateMatch[1]}${lastUpdateMatch[2]}` : '';
+
+      // Check individual services and their uptime percentages
+      const services = {
+        'Huggingface Hub': {
+          operational: text.includes('Huggingface Hub') && text.includes('Operational'),
+          uptime: text.match(/Huggingface Hub[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
+        },
+        'Git Hosting and Serving': {
+          operational: text.includes('Git Hosting and Serving') && text.includes('Operational'),
+          uptime: text.match(/Git Hosting and Serving[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
+        },
+        'Inference API': {
+          operational: text.includes('Inference API') && text.includes('Operational'),
+          uptime: text.match(/Inference API[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
+        },
+        'HF Endpoints': {
+          operational: text.includes('HF Endpoints') && text.includes('Operational'),
+          uptime: text.match(/HF Endpoints[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
+        },
+        Spaces: {
+          operational: text.includes('Spaces') && text.includes('Operational'),
+          uptime: text.match(/Spaces[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
+        },
+      };
+
+      // Create service status messages with uptime
+      const serviceMessages = Object.entries(services).map(([name, info]) => {
+        if (info.uptime) {
+          return `${name}: ${info.uptime}% uptime`;
+        }
+
+        return `${name}: ${info.operational ? 'Operational' : 'Issues detected'}`;
+      });
+
+      // Determine overall status
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = allServicesOnline
+        ? `All services are online (Last updated on ${lastUpdate})`
+        : 'Checking individual services';
+
+      // Only mark as degraded if we explicitly detect issues
+      const hasIssues = Object.values(services).some((service) => !service.operational);
+
+      if (hasIssues) {
+        status = 'degraded';
+        message = `Service issues detected (Last updated on ${lastUpdate})`;
+      }
+
+      // If status page check fails, fallback to endpoint check
+      if (!statusPageResponse.ok) {
+        const endpointStatus = await this.checkEndpoint('https://status.huggingface.co/');
+        const apiEndpoint = 'https://api-inference.huggingface.co/models';
+        const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+        return {
+          status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+          message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+          incidents: ['Note: Limited status information due to CORS restrictions'],
+        };
+      }
+
+      return {
+        status,
+        message,
+        incidents: serviceMessages,
+      };
+    } catch (error) {
+      console.error('Error checking HuggingFace status:', error);
+
+      // Fallback to basic endpoint check
+      const endpointStatus = await this.checkEndpoint('https://status.huggingface.co/');
+      const apiEndpoint = 'https://api-inference.huggingface.co/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      return {
+        status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
+        message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
+        incidents: ['Note: Limited status information due to CORS restrictions'],
+      };
+    }
+  }
+}

app/components/@settings/tabs/providers/service-status/providers/hyperbolic.ts

@@ -0,0 +1,40 @@
+import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
+import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
+
+export class HyperbolicStatusChecker extends BaseProviderChecker {
+  async checkStatus(): Promise<StatusCheckResult> {
+    try {
+      /*
+       * Check API endpoint directly since Hyperbolic is a newer provider
+       * and may not have a public status page yet
+       */
+      const apiEndpoint = 'https://api.hyperbolic.ai/v1/models';
+      const apiStatus = await this.checkEndpoint(apiEndpoint);
+
+      // Check their website as a secondary indicator
+      const websiteStatus = await this.checkEndpoint('https://hyperbolic.ai');
+
+      let status: StatusCheckResult['status'] = 'operational';
+      let message = 'All systems operational';
+
+      if (apiStatus !== 'reachable' || websiteStatus !== 'reachable') {
+        status = apiStatus !== 'reachable' ? 'down' : 'degraded';
+        message = apiStatus !== 'reachable' ? 'API appears to be down' : 'Service may be experiencing issues';
+      }
+
+      return {
+        status,
+        message,
+        incidents: [], // No public incident tracking available yet
+      };
+    } catch (error) {
+      console.error('Error checking Hyperbolic status:', error);
+
+      return {
+        status: 'degraded',
+        message: 'Unable to determine service status',
+        incidents: ['Note: Limited status information available'],
+      };
+    }
+  }
+}