Upload folder using huggingface_hub

.dockerignore

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

.editorconfig

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

.env.example

@@ -0,0 +1,52 @@
+# Rename this file to .env once you have filled in the below environment variables!
+
+# Get your GROQ API Key here -
+# https://console.groq.com/keys
+# You only need this environment variable set if you want to use Groq models
+GROQ_API_KEY=
+
+# Get your Open AI API Key by following these instructions -
+# https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key
+# You only need this environment variable set if you want to use GPT models
+OPENAI_API_KEY=
+
+# Get your Anthropic API Key in your account settings -
+# https://console.anthropic.com/settings/keys
+# You only need this environment variable set if you want to use Claude models
+ANTHROPIC_API_KEY=
+
+# Get your OpenRouter API Key in your account settings -
+# https://openrouter.ai/settings/keys
+# You only need this environment variable set if you want to use OpenRouter models
+OPEN_ROUTER_API_KEY=
+
+# Get your Google Generative AI API Key by following these instructions -
+# https://console.cloud.google.com/apis/credentials
+# You only need this environment variable set if you want to use Google Generative AI models
+GOOGLE_GENERATIVE_AI_API_KEY=
+
+# You only need this environment variable set if you want to use oLLAMA models
+# EXAMPLE http://localhost:11434
+OLLAMA_API_BASE_URL=
+
+# You only need this environment variable set if you want to use OpenAI Like models
+OPENAI_LIKE_API_BASE_URL=
+
+# You only need this environment variable set if you want to use DeepSeek models through their API
+DEEPSEEK_API_KEY=
+
+# Get your OpenAI Like API Key
+OPENAI_LIKE_API_KEY=
+
+# Get your Mistral API Key by following these instructions -
+# https://console.mistral.ai/api-keys/
+# You only need this environment variable set if you want to use Mistral models
+MISTRAL_API_KEY=
+
+# Get your xAI API key
+# https://x.ai/api
+# You only need this environment variable set if you want to use xAI models
+XAI_API_KEY=
+
+# Include this environment variable if you want more logging for debugging locally
+VITE_LOG_LEVEL=debug

.github/ISSUE_TEMPLATE/bug_report.yml

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

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,23 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+---
+
+**Is your feature request related to a problem? Please describe:**
+
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
+
+**Describe the solution you'd like:**
+
+<!-- A clear and concise description of what you want to happen. -->
+
+**Describe alternatives you've considered:**
+
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+**Additional context:**
+
+<!-- Add any other context or screenshots about the feature request here. -->

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

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

.github/workflows/ci.yaml

@@ -0,0 +1,27 @@
+name: CI/CD
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup and Build
+        uses: ./.github/actions/setup-and-build
+
+      - name: Run type check
+        run: pnpm run typecheck
+
+      # - name: Run ESLint
+      #   run: pnpm run lint
+
+      - name: Run tests
+        run: pnpm run test

.github/workflows/github-build-push.yml

@@ -0,0 +1,39 @@
+name: Build and Push Container
+
+on:
+  push:
+    branches:
+      - main
+    # paths:
+    #   - 'Dockerfile'
+  workflow_dispatch:    
+jobs:
+  build-and-push:
+    runs-on: [ubuntu-latest]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and Push Containers
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          file: Dockerfile
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: |
+            ghcr.io/${{ github.repository }}:latest
+            ghcr.io/${{ github.repository }}:${{ github.sha }}        

.github/workflows/semantic-pr.yaml

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

.gitignore

@@ -0,0 +1,33 @@
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+.vscode/*
+.vscode/launch.json
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+/.cache
+/build
+.env.local
+.env
+*.vars
+.wrangler
+_worker.bundle
+
+Modelfile

.husky/commit-msg

@@ -0,0 +1,7 @@
+#!/usr/bin/env sh
+
+. "$(dirname "$0")/_/husky.sh"
+
+npx commitlint --edit $1
+
+exit 0

.prettierignore

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

.prettierrc

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

.tool-versions

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

CONTRIBUTING.md

@@ -0,0 +1,201 @@
+# Contributing to Bolt.new Fork
+
+First off, thank you for considering contributing to Bolt.new! This fork aims to expand the capabilities of the original project by integrating multiple LLM providers and enhancing functionality. Every contribution helps make Bolt.new a better tool for developers worldwide.
+
+## 📋 Table of Contents
+- [Code of Conduct](#code-of-conduct)
+- [How Can I Contribute?](#how-can-i-contribute)
+- [Pull Request Guidelines](#pull-request-guidelines)
+- [Coding Standards](#coding-standards)
+- [Development Setup](#development-setup)
+- [Deploymnt with Docker](#docker-deployment-documentation)
+- [Project Structure](#project-structure)
+
+## Code of Conduct
+
+This project and everyone participating in it is governed by our Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to the project maintainers.
+
+## How Can I Contribute?
+
+### 🐞 Reporting Bugs and Feature Requests
+- Check the issue tracker to avoid duplicates
+- Use the issue templates when available
+- Include as much relevant information as possible
+- For bugs, add steps to reproduce the issue
+
+### 🔧 Code Contributions
+1. Fork the repository
+2. Create a new branch for your feature/fix
+3. Write your code
+4. Submit a pull request
+
+### ✨ Becoming a Core Contributor
+We're looking for dedicated contributors to help maintain and grow this project. If you're interested in becoming a core contributor, please fill out our [Contributor Application Form](https://forms.gle/TBSteXSDCtBDwr5m7).
+
+## Pull Request Guidelines
+
+### 📝 PR Checklist
+- [ ] Branch from the main branch
+- [ ] Update documentation if needed
+- [ ] Manually verify all new functionality works as expected
+- [ ] Keep PRs focused and atomic
+
+### 👀 Review Process
+1. Manually test the changes
+2. At least one maintainer review required
+3. Address all review comments
+4. Maintain clean commit history
+
+## Coding Standards
+
+### 💻 General Guidelines
+- Follow existing code style
+- Comment complex logic
+- Keep functions focused and small
+- Use meaningful variable names
+
+## Development Setup
+
+### 🔄 Initial Setup
+1. Clone the repository:
+```bash
+git clone https://github.com/coleam00/bolt.new-any-llm.git
+```
+
+2. Install dependencies:
+```bash
+pnpm install
+```
+
+3. Set up environment variables:
+   - Rename `.env.example` to `.env.local`
+   - Add your LLM API keys (only set the ones you plan to use):
+```bash
+GROQ_API_KEY=XXX
+OPENAI_API_KEY=XXX
+ANTHROPIC_API_KEY=XXX
+...
+```
+   - Optionally set debug level:
+```bash
+VITE_LOG_LEVEL=debug
+```
+**Important**: Never commit your `.env.local` file to version control. It's already included in .gitignore.
+
+### 🚀 Running the Development Server
+```bash
+pnpm run dev
+```
+
+**Note**: You will need Google Chrome Canary to run this locally if you use Chrome! It's an easy install and a good browser for web development anyway.
+
+## Testing
+
+Run the test suite with:
+
+```bash
+pnpm test
+```
+
+## Deployment
+
+To deploy the application to Cloudflare Pages:
+
+```bash
+pnpm run deploy
+```
+
+Make sure you have the necessary permissions and Wrangler is correctly configured for your Cloudflare account.
+
+# Docker Deployment Documentation
+
+This guide outlines various methods for building and deploying the application using Docker.
+
+## Build Methods
+
+### 1. Using Helper Scripts
+
+NPM scripts are provided for convenient building:
+
+```bash
+# Development build
+npm run dockerbuild
+
+# Production build
+npm run dockerbuild:prod
+```
+
+### 2. Direct Docker Build Commands
+
+You can use Docker's target feature to specify the build environment:
+
+```bash
+# Development build
+docker build . --target bolt-ai-development
+
+# Production build
+docker build . --target bolt-ai-production
+```
+
+### 3. Docker Compose with Profiles
+
+Use Docker Compose profiles to manage different environments:
+
+```bash
+# Development environment
+docker-compose --profile development up
+
+# Production environment
+docker-compose --profile production up
+```
+
+## Running the Application
+
+After building using any of the methods above, run the container with:
+
+```bash
+# Development
+docker run -p 5173:5173 --env-file .env.local bolt-ai:development
+
+# Production
+docker run -p 5173:5173 --env-file .env.local bolt-ai:production
+```
+
+## Deployment with Coolify
+
+[Coolify](https://github.com/coollabsio/coolify) provides a straightforward deployment process:
+
+1. Import your Git repository as a new project
+2. Select your target environment (development/production)
+3. Choose "Docker Compose" as the Build Pack
+4. Configure deployment domains
+5. Set the custom start command:
+   ```bash
+   docker compose --profile production up
+   ```
+6. Configure environment variables
+   - Add necessary AI API keys
+   - Adjust other environment variables as needed
+7. Deploy the application
+
+## VS Code Integration
+
+The `docker-compose.yaml` configuration is compatible with VS Code dev containers:
+
+1. Open the command palette in VS Code
+2. Select the dev container configuration
+3. Choose the "development" profile from the context menu
+
+## Environment Files
+
+Ensure you have the appropriate `.env.local` file configured before running the containers. This file should contain:
+- API keys
+- Environment-specific configurations
+- Other required environment variables
+
+## Notes
+
+- Port 5173 is exposed and mapped for both development and production environments
+- Environment variables are loaded from `.env.local`
+- Different profiles (development/production) can be used for different deployment scenarios
+- The configuration supports both local development and production deployment

Dockerfile

@@ -0,0 +1,67 @@
+ARG BASE=node:20.18.0
+FROM ${BASE} AS base
+
+WORKDIR /app
+
+# Install dependencies (this step is cached as long as the dependencies don't change)
+COPY package.json pnpm-lock.yaml ./
+
+RUN corepack enable pnpm && pnpm install
+
+# Copy the rest of your app's source code
+COPY . .
+
+# Expose the port the app runs on
+EXPOSE 5173
+
+# Production image
+FROM base AS bolt-ai-production
+
+# Define environment variables with default values or let them be overridden
+ARG GROQ_API_KEY
+ARG OPENAI_API_KEY
+ARG ANTHROPIC_API_KEY
+ARG OPEN_ROUTER_API_KEY
+ARG GOOGLE_GENERATIVE_AI_API_KEY
+ARG OLLAMA_API_BASE_URL
+ARG VITE_LOG_LEVEL=debug
+
+ENV WRANGLER_SEND_METRICS=false \
+    GROQ_API_KEY=${GROQ_API_KEY} \
+    OPENAI_API_KEY=${OPENAI_API_KEY} \
+    ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY} \
+    OPEN_ROUTER_API_KEY=${OPEN_ROUTER_API_KEY} \
+    GOOGLE_GENERATIVE_AI_API_KEY=${GOOGLE_GENERATIVE_AI_API_KEY} \
+    OLLAMA_API_BASE_URL=${OLLAMA_API_BASE_URL} \
+    VITE_LOG_LEVEL=${VITE_LOG_LEVEL}
+
+# Pre-configure wrangler to disable metrics
+RUN mkdir -p /root/.config/.wrangler && \
+    echo '{"enabled":false}' > /root/.config/.wrangler/metrics.json
+
+RUN npm run build
+
+CMD [ "pnpm", "run", "dockerstart"]
+
+# Development image
+FROM base AS bolt-ai-development
+
+# Define the same environment variables for development
+ARG GROQ_API_KEY
+ARG OPENAI_API_KEY
+ARG ANTHROPIC_API_KEY
+ARG OPEN_ROUTER_API_KEY
+ARG GOOGLE_GENERATIVE_AI_API_KEY
+ARG OLLAMA_API_BASE_URL
+ARG VITE_LOG_LEVEL=debug
+
+ENV GROQ_API_KEY=${GROQ_API_KEY} \
+    OPENAI_API_KEY=${OPENAI_API_KEY} \
+    ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY} \
+    OPEN_ROUTER_API_KEY=${OPEN_ROUTER_API_KEY} \
+    GOOGLE_GENERATIVE_AI_API_KEY=${GOOGLE_GENERATIVE_AI_API_KEY} \
+    OLLAMA_API_BASE_URL=${OLLAMA_API_BASE_URL} \
+    VITE_LOG_LEVEL=${VITE_LOG_LEVEL}
+
+RUN mkdir -p ${WORKDIR}/run
+CMD pnpm run dev --host

LICENSE

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

README.md

@@ -1,10 +1,251 @@
----
-title: Bolt
-emoji: 😻
-colorFrom: pink
-colorTo: red
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+[![Bolt.new: AI-Powered Full-Stack Web Development in the Browser](./public/social_preview_index.jpg)](https://bolt.new)
+
+# Bolt.new Fork by Cole Medin
+
+This fork of Bolt.new allows you to choose the LLM that you use for each prompt! Currently, you can use OpenAI, Anthropic, Ollama, OpenRouter, Gemini, or Groq models - and it is easily extended to use any other model supported by the Vercel AI SDK! See the instructions below for running this locally and extending it to include more models.
+
+# Requested Additions to this Fork - Feel Free to Contribute!!
+
+- ✅ OpenRouter Integration (@coleam00)
+- ✅ Gemini Integration (@jonathands)
+- ✅ Autogenerate Ollama models from what is downloaded (@yunatamos)
+- ✅ Filter models by provider (@jasonm23)
+- ✅ Download project as ZIP (@fabwaseem)
+- ✅ Improvements to the main Bolt.new prompt in `app\lib\.server\llm\prompts.ts` (@kofi-bhr)
+- ✅ DeepSeek API Integration (@zenith110)
+- ✅ Mistral API Integration (@ArulGandhi)
+- ✅ "Open AI Like" API Integration (@ZerxZ)
+- ✅ Ability to sync files (one way sync) to local folder (@muzafferkadir)
+- ✅ Containerize the application with Docker for easy installation (@aaronbolton)
+- ✅ Publish projects directly to GitHub (@goncaloalves)
+- ⬜ Prevent Bolt from rewriting files as often (Done but need to review PR still)
+- ⬜ **HIGH PRIORITY** - Better prompting for smaller LLMs (code window sometimes doesn't start)
+- ⬜ **HIGH PRIORITY** Load local projects into the app
+- ⬜ **HIGH PRIORITY** - Attach images to prompts
+- ⬜ **HIGH PRIORITY** - Run agents in the backend as opposed to a single model call
+- ⬜ LM Studio Integration
+- ⬜ Together Integration
+- ⬜ Azure Open AI API Integration
+- ⬜ HuggingFace Integration
+- ⬜ Perplexity Integration
+- ⬜ Vertex AI Integration
+- ⬜ Cohere Integration
+- ⬜ Deploy directly to Vercel/Netlify/other similar platforms
+- ⬜ Ability to revert code to earlier version
+- ⬜ Prompt caching
+- ⬜ Better prompt enhancing
+- ⬜ Ability to enter API keys in the UI
+- ⬜ Have LLM plan the project in a MD file for better results/transparency
+- ⬜ VSCode Integration with git-like confirmations
+- ⬜ Upload documents for knowledge - UI design templates, a code base to reference coding style, etc.
+- ⬜ Voice prompting
+
+# Bolt.new: AI-Powered Full-Stack Web Development in the Browser
+
+Bolt.new is an AI-powered web development agent that allows you to prompt, run, edit, and deploy full-stack applications directly from your browser—no local setup required. If you're here to build your own AI-powered web dev agent using the Bolt open source codebase, [click here to get started!](./CONTRIBUTING.md)
+
+## What Makes Bolt.new Different
+
+Claude, v0, etc are incredible- but you can't install packages, run backends, or edit code. That’s where Bolt.new stands out:
+
+- **Full-Stack in the Browser**: Bolt.new integrates cutting-edge AI models with an in-browser development environment powered by **StackBlitz’s WebContainers**. This allows you to:
+  - Install and run npm tools and libraries (like Vite, Next.js, and more)
+  - Run Node.js servers
+  - Interact with third-party APIs
+  - Deploy to production from chat
+  - Share your work via a URL
+
+- **AI with Environment Control**: Unlike traditional dev environments where the AI can only assist in code generation, Bolt.new gives AI models **complete control** over the entire  environment including the filesystem, node server, package manager, terminal, and browser console. This empowers AI agents to handle the whole app lifecycle—from creation to deployment.
+
+Whether you’re an experienced developer, a PM, or a designer, Bolt.new allows you to easily build production-grade full-stack applications.
+
+For developers interested in building their own AI-powered development tools with WebContainers, check out the open-source Bolt codebase in this repo!
+
+## Setup
+
+Many of you are new users to installing software from Github. If you have any installation troubles reach out and submit an "issue" using the links above, or feel free to enhance this documentation by forking, editing the instructions, and doing a pull request.
+
+1. Install Git from https://git-scm.com/downloads
+
+2. Install Node.js from https://nodejs.org/en/download/ 
+
+Pay attention to the installer notes after completion. 
+
+On all operating systems, the path to Node.js should automatically be added to your system path. But you can check your path if you want to be sure. On Windows, you can search for "edit the system environment variables" in your system, select "Environment Variables..." once you are in the system properties, and then check for a path to Node in your "Path" system variable. On a Mac or Linux machine, it will tell you to check if /usr/local/bin is in your $PATH. To determine if usr/local/bin is included in $PATH open your Terminal and run:
+
+```
+echo $PATH .
+```
+
+If you see usr/local/bin in the output then you're good to go.
+
+3. Clone the repository (if you haven't already) by opening a Terminal window (or CMD with admin permissions) and then typing in this:
+
+```
+git clone https://github.com/coleam00/bolt.new-any-llm.git
+```
+
+3. Rename .env.example to .env and add your LLM API keys. You will find this file on a Mac at "[your name]/bold.new-any-llm/.env.example". For Windows and Linux the path will be similar.
+
+![image](https://github.com/user-attachments/assets/7e6a532c-2268-401f-8310-e8d20c731328)
+
+If you can't see the file indicated above, its likely you can't view hidden files. On Mac, open a Terminal window and enter this command below. On Windows, you will see the hidden files option in File Explorer Settings. A quick Google search will help you if you are stuck here.
+
+```
+defaults write com.apple.finder AppleShowAllFiles YES
+```
+
+**NOTE**: you only have to set the ones you want to use and Ollama doesn't need an API key because it runs locally on your computer:
+
+Get your GROQ API Key here: https://console.groq.com/keys
+
+Get your Open AI API Key by following these instructions: https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key
+
+Get your Anthropic API Key in your account settings: https://console.anthropic.com/settings/keys
+
+```
+GROQ_API_KEY=XXX
+OPENAI_API_KEY=XXX
+ANTHROPIC_API_KEY=XXX
+```
+
+Optionally, you can set the debug level:
+
+```
+VITE_LOG_LEVEL=debug
+```
+
+**Important**: Never commit your `.env` file to version control. It's already included in .gitignore.
+
+## Run with Docker
+
+Prerequisites:
+
+Git and Node.js as mentioned above, as well as Docker: https://www.docker.com/
+
+### 1a. Using Helper Scripts
+
+NPM scripts are provided for convenient building:
+
+```bash
+# Development build
+npm run dockerbuild
+
+# Production build
+npm run dockerbuild:prod
+```
+
+### 1b. Direct Docker Build Commands (alternative to using NPM scripts)
+
+You can use Docker's target feature to specify the build environment instead of using NPM scripts if you wish:
+
+```bash
+# Development build
+docker build . --target bolt-ai-development
+
+# Production build
+docker build . --target bolt-ai-production
+```
+
+### 2. Docker Compose with Profiles to Run the Container
+
+Use Docker Compose profiles to manage different environments:
+
+```bash
+# Development environment
+docker-compose --profile development up
+
+# Production environment
+docker-compose --profile production up
+```
+
+When you run the Docker Compose command with the development profile, any changes you
+make on your machine to the code will automatically be reflected in the site running
+on the container (i.e. hot reloading still applies!).
+
+## Run Without Docker
+
+1. Install dependencies using Terminal (or CMD in Windows with admin permissions):
+
+```
+pnpm install
+```
+
+If you get an error saying "command not found: pnpm" or similar, then that means pnpm isn't installed. You can install it via this:
+
+```
+sudo npm install -g pnpm
+```
+
+2. Start the application with the command:
+
+```bash
+pnpm run dev
+```
+
+## Super Important Note on Running Ollama Models
+
+Ollama models by default only have 2048 tokens for their context window. Even for large models that can easily handle way more.
+This is not a large enough window to handle the Bolt.new/oTToDev prompt! You have to create a version of any model you want
+to use where you specify a larger context window. Luckily it's super easy to do that.
+
+All you have to do is:
+
+- Create a file called "Modelfile" (no file extension) anywhere on your computer
+- Put in the two lines:
+
+```
+FROM [Ollama model ID such as qwen2.5-coder:7b]
+PARAMETER num_ctx 32768
+```
+
+- Run the command: 
+
+```
+ollama create -f Modelfile [your new model ID, can be whatever you want (example: qwen2.5-coder-extra-ctx:7b)]
+```
+
+Now you have a new Ollama model that isn't heavily limited in the context length like Ollama models are by default for some reason.
+You'll see this new model in the list of Ollama models along with all the others you pulled!
+
+## Adding New LLMs:
+
+To make new LLMs available to use in this version of Bolt.new, head on over to `app/utils/constants.ts` and find the constant MODEL_LIST. Each element in this array is an object that has the model ID for the name (get this from the provider's API documentation), a label for the frontend model dropdown, and the provider. 
+
+By default, Anthropic, OpenAI, Groq, and Ollama are implemented as providers, but the YouTube video for this repo covers how to extend this to work with more providers if you wish!
+
+When you add a new model to the MODEL_LIST array, it will immediately be available to use when you run the app locally or reload it. For Ollama models, make sure you have the model installed already before trying to use it here!
+
+## Available Scripts
+
+- `pnpm run dev`: Starts the development server.
+- `pnpm run build`: Builds the project.
+- `pnpm run start`: Runs the built application locally using Wrangler Pages. This script uses `bindings.sh` to set up necessary bindings so you don't have to duplicate environment variables.
+- `pnpm run preview`: Builds the project and then starts it locally, useful for testing the production build. Note, HTTP streaming currently doesn't work as expected with `wrangler pages dev`.
+- `pnpm test`: Runs the test suite using Vitest.
+- `pnpm run typecheck`: Runs TypeScript type checking.
+- `pnpm run typegen`: Generates TypeScript types using Wrangler.
+- `pnpm run deploy`: Builds the project and deploys it to Cloudflare Pages.
+
+## Development
+
+To start the development server:
+
+```bash
+pnpm run dev
+```
+
+This will start the Remix Vite development server. You will need Google Chrome Canary to run this locally if you use Chrome! It's an easy install and a good browser for web development anyway.
+
+## Tips and Tricks
+
+Here are some tips to get the most out of Bolt.new:
+
+- **Be specific about your stack**: If you want to use specific frameworks or libraries (like Astro, Tailwind, ShadCN, or any other popular JavaScript framework), mention them in your initial prompt to ensure Bolt scaffolds the project accordingly.
+
+- **Use the enhance prompt icon**: Before sending your prompt, try clicking the 'enhance' icon to have the AI model help you refine your prompt, then edit the results before submitting.
+
+- **Scaffold the basics first, then add features**: Make sure the basic structure of your application is in place before diving into more advanced functionality. This helps Bolt understand the foundation of your project and ensure everything is wired up right before building out more advanced functionality.
+
+- **Batch simple instructions**: Save time by combining simple instructions into one message. For example, you can ask Bolt to change the color scheme, add mobile responsiveness, and restart the dev server, all in one go saving you time and reducing API credit consumption significantly.
+https://www.youtube.com/watch?v=YkF1gDcOp04

app/components/chat/Artifact.tsx

@@ -0,0 +1,213 @@
+import { useStore } from '@nanostores/react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { computed } from 'nanostores';
+import { memo, useEffect, useRef, useState } from 'react';
+import { createHighlighter, type BundledLanguage, type BundledTheme, type HighlighterGeneric } from 'shiki';
+import type { ActionState } from '~/lib/runtime/action-runner';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { classNames } from '~/utils/classNames';
+import { cubicEasingFn } from '~/utils/easings';
+
+const highlighterOptions = {
+  langs: ['shell'],
+  themes: ['light-plus', 'dark-plus'],
+};
+
+const shellHighlighter: HighlighterGeneric<BundledLanguage, BundledTheme> =
+  import.meta.hot?.data.shellHighlighter ?? (await createHighlighter(highlighterOptions));
+
+if (import.meta.hot) {
+  import.meta.hot.data.shellHighlighter = shellHighlighter;
+}
+
+interface ArtifactProps {
+  messageId: string;
+}
+
+export const Artifact = memo(({ messageId }: ArtifactProps) => {
+  const userToggledActions = useRef(false);
+  const [showActions, setShowActions] = useState(false);
+
+  const artifacts = useStore(workbenchStore.artifacts);
+  const artifact = artifacts[messageId];
+
+  const actions = useStore(
+    computed(artifact.runner.actions, (actions) => {
+      return Object.values(actions);
+    }),
+  );
+
+  const toggleActions = () => {
+    userToggledActions.current = true;
+    setShowActions(!showActions);
+  };
+
+  useEffect(() => {
+    if (actions.length && !showActions && !userToggledActions.current) {
+      setShowActions(true);
+    }
+  }, [actions]);
+
+  return (
+    <div className="artifact border border-bolt-elements-borderColor flex flex-col overflow-hidden rounded-lg w-full transition-border duration-150">
+      <div className="flex">
+        <button
+          className="flex items-stretch bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover w-full overflow-hidden"
+          onClick={() => {
+            const showWorkbench = workbenchStore.showWorkbench.get();
+            workbenchStore.showWorkbench.set(!showWorkbench);
+          }}
+        >
+          <div className="px-5 p-3.5 w-full text-left">
+            <div className="w-full text-bolt-elements-textPrimary font-medium leading-5 text-sm">{artifact?.title}</div>
+            <div className="w-full w-full text-bolt-elements-textSecondary text-xs mt-0.5">Click to open Workbench</div>
+          </div>
+        </button>
+        <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
+        <AnimatePresence>
+          {actions.length && (
+            <motion.button
+              initial={{ width: 0 }}
+              animate={{ width: 'auto' }}
+              exit={{ width: 0 }}
+              transition={{ duration: 0.15, ease: cubicEasingFn }}
+              className="bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover"
+              onClick={toggleActions}
+            >
+              <div className="p-4">
+                <div className={showActions ? 'i-ph:caret-up-bold' : 'i-ph:caret-down-bold'}></div>
+              </div>
+            </motion.button>
+          )}
+        </AnimatePresence>
+      </div>
+      <AnimatePresence>
+        {showActions && actions.length > 0 && (
+          <motion.div
+            className="actions"
+            initial={{ height: 0 }}
+            animate={{ height: 'auto' }}
+            exit={{ height: '0px' }}
+            transition={{ duration: 0.15 }}
+          >
+            <div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
+            <div className="p-5 text-left bg-bolt-elements-actions-background">
+              <ActionList actions={actions} />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+});
+
+interface ShellCodeBlockProps {
+  classsName?: string;
+  code: string;
+}
+
+function ShellCodeBlock({ classsName, code }: ShellCodeBlockProps) {
+  return (
+    <div
+      className={classNames('text-xs', classsName)}
+      dangerouslySetInnerHTML={{
+        __html: shellHighlighter.codeToHtml(code, {
+          lang: 'shell',
+          theme: 'dark-plus',
+        }),
+      }}
+    ></div>
+  );
+}
+
+interface ActionListProps {
+  actions: ActionState[];
+}
+
+const actionVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 },
+};
+
+const ActionList = memo(({ actions }: ActionListProps) => {
+  return (
+    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
+      <ul className="list-none space-y-2.5">
+        {actions.map((action, index) => {
+          const { status, type, content } = action;
+          const isLast = index === actions.length - 1;
+
+          return (
+            <motion.li
+              key={index}
+              variants={actionVariants}
+              initial="hidden"
+              animate="visible"
+              transition={{
+                duration: 0.2,
+                ease: cubicEasingFn,
+              }}
+            >
+              <div className="flex items-center gap-1.5 text-sm">
+                <div className={classNames('text-lg', getIconColor(action.status))}>
+                  {status === 'running' ? (
+                    <div className="i-svg-spinners:90-ring-with-bg"></div>
+                  ) : status === 'pending' ? (
+                    <div className="i-ph:circle-duotone"></div>
+                  ) : status === 'complete' ? (
+                    <div className="i-ph:check"></div>
+                  ) : status === 'failed' || status === 'aborted' ? (
+                    <div className="i-ph:x"></div>
+                  ) : null}
+                </div>
+                {type === 'file' ? (
+                  <div>
+                    Create{' '}
+                    <code className="bg-bolt-elements-artifacts-inlineCode-background text-bolt-elements-artifacts-inlineCode-text px-1.5 py-1 rounded-md">
+                      {action.filePath}
+                    </code>
+                  </div>
+                ) : type === 'shell' ? (
+                  <div className="flex items-center w-full min-h-[28px]">
+                    <span className="flex-1">Run command</span>
+                  </div>
+                ) : null}
+              </div>
+              {type === 'shell' && (
+                <ShellCodeBlock
+                  classsName={classNames('mt-1', {
+                    'mb-3.5': !isLast,
+                  })}
+                  code={content}
+                />
+              )}
+            </motion.li>
+          );
+        })}
+      </ul>
+    </motion.div>
+  );
+});
+
+function getIconColor(status: ActionState['status']) {
+  switch (status) {
+    case 'pending': {
+      return 'text-bolt-elements-textTertiary';
+    }
+    case 'running': {
+      return 'text-bolt-elements-loader-progress';
+    }
+    case 'complete': {
+      return 'text-bolt-elements-icon-success';
+    }
+    case 'aborted': {
+      return 'text-bolt-elements-textSecondary';
+    }
+    case 'failed': {
+      return 'text-bolt-elements-icon-error';
+    }
+    default: {
+      return undefined;
+    }
+  }
+}

app/components/chat/AssistantMessage.tsx

@@ -0,0 +1,14 @@
+import { memo } from 'react';
+import { Markdown } from './Markdown';
+
+interface AssistantMessageProps {
+  content: string;
+}
+
+export const AssistantMessage = memo(({ content }: AssistantMessageProps) => {
+  return (
+    <div className="overflow-hidden w-full">
+      <Markdown html>{content}</Markdown>
+    </div>
+  );
+});

app/components/chat/BaseChat.module.scss

@@ -0,0 +1,19 @@
+.BaseChat {
+  &[data-chat-visible='false'] {
+    --workbench-inner-width: 100%;
+    --workbench-left: 0;
+
+    .Chat {
+      --at-apply: bolt-ease-cubic-bezier;
+      transition-property: transform, opacity;
+      transition-duration: 0.3s;
+      will-change: transform, opacity;
+      transform: translateX(-50%);
+      opacity: 0;
+    }
+  }
+}
+
+.Chat {
+  opacity: 1;
+}

app/components/chat/BaseChat.tsx

@@ -0,0 +1,269 @@
+// @ts-nocheck
+// Preventing TS checks with files presented in the video for a better presentation.
+import type { Message } from 'ai';
+import React, { type RefCallback } from 'react';
+import { ClientOnly } from 'remix-utils/client-only';
+import { Menu } from '~/components/sidebar/Menu.client';
+import { IconButton } from '~/components/ui/IconButton';
+import { Workbench } from '~/components/workbench/Workbench.client';
+import { classNames } from '~/utils/classNames';
+import { MODEL_LIST, DEFAULT_PROVIDER } from '~/utils/constants';
+import { Messages } from './Messages.client';
+import { SendButton } from './SendButton.client';
+import { useState } from 'react';
+
+import styles from './BaseChat.module.scss';
+
+const EXAMPLE_PROMPTS = [
+  { text: 'Build a todo app in React using Tailwind' },
+  { text: 'Build a simple blog using Astro' },
+  { text: 'Create a cookie consent form using Material UI' },
+  { text: 'Make a space invaders game' },
+  { text: 'How do I center a div?' },
+];
+
+const providerList = [...new Set(MODEL_LIST.map((model) => model.provider))]
+
+const ModelSelector = ({ model, setModel, modelList, providerList }) => {
+  const [provider, setProvider] = useState(DEFAULT_PROVIDER);
+  return (
+    <div className="mb-2">
+      <select
+        value={provider}
+        onChange={(e) => {
+          setProvider(e.target.value);
+          const firstModel = [...modelList].find(m => m.provider == e.target.value);
+          setModel(firstModel ? firstModel.name : '');
+        }}
+        className="w-full p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none"
+      >
+        {providerList.map((provider) => (
+          <option key={provider} value={provider}>
+            {provider}
+          </option>
+        ))}
+        <option key="Ollama" value="Ollama">
+          Ollama
+        </option>
+        <option key="OpenAILike" value="OpenAILike">
+          OpenAILike
+        </option>
+      </select>
+      <select
+        value={model}
+        onChange={(e) => setModel(e.target.value)}
+        className="w-full p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none"
+      >
+        {[...modelList].filter(e => e.provider == provider && e.name).map((modelOption) => (
+          <option key={modelOption.name} value={modelOption.name}>
+            {modelOption.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+const TEXTAREA_MIN_HEIGHT = 76;
+
+interface BaseChatProps {
+  textareaRef?: React.RefObject<HTMLTextAreaElement> | undefined;
+  messageRef?: RefCallback<HTMLDivElement> | undefined;
+  scrollRef?: RefCallback<HTMLDivElement> | undefined;
+  showChat?: boolean;
+  chatStarted?: boolean;
+  isStreaming?: boolean;
+  messages?: Message[];
+  enhancingPrompt?: boolean;
+  promptEnhanced?: boolean;
+  input?: string;
+  model: string;
+  setModel: (model: string) => void;
+  handleStop?: () => void;
+  sendMessage?: (event: React.UIEvent, messageInput?: string) => void;
+  handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  enhancePrompt?: () => void;
+}
+
+export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
+  (
+    {
+      textareaRef,
+      messageRef,
+      scrollRef,
+      showChat = true,
+      chatStarted = false,
+      isStreaming = false,
+      enhancingPrompt = false,
+      promptEnhanced = false,
+      messages,
+      input = '',
+      model,
+      setModel,
+      sendMessage,
+      handleInputChange,
+      enhancePrompt,
+      handleStop,
+    },
+    ref,
+  ) => {
+    const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
+
+    return (
+      <div
+        ref={ref}
+        className={classNames(
+          styles.BaseChat,
+          'relative flex h-full w-full overflow-hidden bg-bolt-elements-background-depth-1',
+        )}
+        data-chat-visible={showChat}
+      >
+        <ClientOnly>{() => <Menu />}</ClientOnly>
+        <div ref={scrollRef} className="flex overflow-y-auto w-full h-full">
+          <div className={classNames(styles.Chat, 'flex flex-col flex-grow min-w-[var(--chat-min-width)] h-full')}>
+            {!chatStarted && (
+              <div id="intro" className="mt-[26vh] max-w-chat mx-auto">
+                <h1 className="text-5xl text-center font-bold text-bolt-elements-textPrimary mb-2">
+                  Where ideas begin
+                </h1>
+                <p className="mb-4 text-center text-bolt-elements-textSecondary">
+                  Bring ideas to life in seconds or get help on existing projects.
+                </p>
+              </div>
+            )}
+            <div
+              className={classNames('pt-6 px-6', {
+                'h-full flex flex-col': chatStarted,
+              })}
+            >
+              <ClientOnly>
+                {() => {
+                  return chatStarted ? (
+                    <Messages
+                      ref={messageRef}
+                      className="flex flex-col w-full flex-1 max-w-chat px-4 pb-6 mx-auto z-1"
+                      messages={messages}
+                      isStreaming={isStreaming}
+                    />
+                  ) : null;
+                }}
+              </ClientOnly>
+              <div
+                className={classNames('relative w-full max-w-chat mx-auto z-prompt', {
+                  'sticky bottom-0': chatStarted,
+                })}
+              >
+                <ModelSelector
+                  model={model}
+                  setModel={setModel}
+                  modelList={MODEL_LIST}
+                  providerList={providerList}
+                />
+                <div
+                  className={classNames(
+                    'shadow-sm border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden',
+                  )}
+                >
+                  <textarea
+                    ref={textareaRef}
+                    className={`w-full pl-4 pt-4 pr-16 focus:outline-none resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent`}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter') {
+                        if (event.shiftKey) {
+                          return;
+                        }
+
+                        event.preventDefault();
+
+                        sendMessage?.(event);
+                      }
+                    }}
+                    value={input}
+                    onChange={(event) => {
+                      handleInputChange?.(event);
+                    }}
+                    style={{
+                      minHeight: TEXTAREA_MIN_HEIGHT,
+                      maxHeight: TEXTAREA_MAX_HEIGHT,
+                    }}
+                    placeholder="How can Bolt help you today?"
+                    translate="no"
+                  />
+                  <ClientOnly>
+                    {() => (
+                      <SendButton
+                        show={input.length > 0 || isStreaming}
+                        isStreaming={isStreaming}
+                        onClick={(event) => {
+                          if (isStreaming) {
+                            handleStop?.();
+                            return;
+                          }
+
+                          sendMessage?.(event);
+                        }}
+                      />
+                    )}
+                  </ClientOnly>
+                  <div className="flex justify-between text-sm p-4 pt-2">
+                    <div className="flex gap-1 items-center">
+                      <IconButton
+                        title="Enhance prompt"
+                        disabled={input.length === 0 || enhancingPrompt}
+                        className={classNames({
+                          'opacity-100!': enhancingPrompt,
+                          'text-bolt-elements-item-contentAccent! pr-1.5 enabled:hover:bg-bolt-elements-item-backgroundAccent!':
+                            promptEnhanced,
+                        })}
+                        onClick={() => enhancePrompt?.()}
+                      >
+                        {enhancingPrompt ? (
+                          <>
+                            <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl"></div>
+                            <div className="ml-1.5">Enhancing prompt...</div>
+                          </>
+                        ) : (
+                          <>
+                            <div className="i-bolt:stars text-xl"></div>
+                            {promptEnhanced && <div className="ml-1.5">Prompt enhanced</div>}
+                          </>
+                        )}
+                      </IconButton>
+                    </div>
+                    {input.length > 3 ? (
+                      <div className="text-xs text-bolt-elements-textTertiary">
+                        Use <kbd className="kdb">Shift</kbd> + <kbd className="kdb">Return</kbd> for a new line
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+                <div className="bg-bolt-elements-background-depth-1 pb-6">{/* Ghost Element */}</div>
+              </div>
+            </div>
+            {!chatStarted && (
+              <div id="examples" className="relative w-full max-w-xl mx-auto mt-8 flex justify-center">
+                <div className="flex flex-col space-y-2 [mask-image:linear-gradient(to_bottom,black_0%,transparent_180%)] hover:[mask-image:none]">
+                  {EXAMPLE_PROMPTS.map((examplePrompt, index) => {
+                    return (
+                      <button
+                        key={index}
+                        onClick={(event) => {
+                          sendMessage?.(event, examplePrompt.text);
+                        }}
+                        className="group flex items-center w-full gap-2 justify-center bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary transition-theme"
+                      >
+                        {examplePrompt.text}
+                        <div className="i-ph:arrow-bend-down-left" />
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+          <ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
+        </div>
+      </div>
+    );
+  },
+);

app/components/chat/Chat.client.tsx

@@ -0,0 +1,240 @@
+// @ts-nocheck
+// Preventing TS checks with files presented in the video for a better presentation.
+import { useStore } from '@nanostores/react';
+import type { Message } from 'ai';
+import { useChat } from 'ai/react';
+import { useAnimate } from 'framer-motion';
+import { memo, useEffect, useRef, useState } from 'react';
+import { cssTransition, toast, ToastContainer } from 'react-toastify';
+import { useMessageParser, usePromptEnhancer, useShortcuts, useSnapScroll } from '~/lib/hooks';
+import { useChatHistory } from '~/lib/persistence';
+import { chatStore } from '~/lib/stores/chat';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { fileModificationsToHTML } from '~/utils/diff';
+import { DEFAULT_MODEL } from '~/utils/constants';
+import { cubicEasingFn } from '~/utils/easings';
+import { createScopedLogger, renderLogger } from '~/utils/logger';
+import { BaseChat } from './BaseChat';
+
+const toastAnimation = cssTransition({
+  enter: 'animated fadeInRight',
+  exit: 'animated fadeOutRight',
+});
+
+const logger = createScopedLogger('Chat');
+
+export function Chat() {
+  renderLogger.trace('Chat');
+
+  const { ready, initialMessages, storeMessageHistory } = useChatHistory();
+
+  return (
+    <>
+      {ready && <ChatImpl initialMessages={initialMessages} storeMessageHistory={storeMessageHistory} />}
+      <ToastContainer
+        closeButton={({ closeToast }) => {
+          return (
+            <button className="Toastify__close-button" onClick={closeToast}>
+              <div className="i-ph:x text-lg" />
+            </button>
+          );
+        }}
+        icon={({ type }) => {
+          /**
+           * @todo Handle more types if we need them. This may require extra color palettes.
+           */
+          switch (type) {
+            case 'success': {
+              return <div className="i-ph:check-bold text-bolt-elements-icon-success text-2xl" />;
+            }
+            case 'error': {
+              return <div className="i-ph:warning-circle-bold text-bolt-elements-icon-error text-2xl" />;
+            }
+          }
+
+          return undefined;
+        }}
+        position="bottom-right"
+        pauseOnFocusLoss
+        transition={toastAnimation}
+      />
+    </>
+  );
+}
+
+interface ChatProps {
+  initialMessages: Message[];
+  storeMessageHistory: (messages: Message[]) => Promise<void>;
+}
+
+export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProps) => {
+  useShortcuts();
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const [chatStarted, setChatStarted] = useState(initialMessages.length > 0);
+  const [model, setModel] = useState(DEFAULT_MODEL);
+
+  const { showChat } = useStore(chatStore);
+
+  const [animationScope, animate] = useAnimate();
+
+  const { messages, isLoading, input, handleInputChange, setInput, stop, append } = useChat({
+    api: '/api/chat',
+    onError: (error) => {
+      logger.error('Request failed\n\n', error);
+      toast.error('There was an error processing your request');
+    },
+    onFinish: () => {
+      logger.debug('Finished streaming');
+    },
+    initialMessages,
+  });
+
+  const { enhancingPrompt, promptEnhanced, enhancePrompt, resetEnhancer } = usePromptEnhancer();
+  const { parsedMessages, parseMessages } = useMessageParser();
+
+  const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
+
+  useEffect(() => {
+    chatStore.setKey('started', initialMessages.length > 0);
+  }, []);
+
+  useEffect(() => {
+    parseMessages(messages, isLoading);
+
+    if (messages.length > initialMessages.length) {
+      storeMessageHistory(messages).catch((error) => toast.error(error.message));
+    }
+  }, [messages, isLoading, parseMessages]);
+
+  const scrollTextArea = () => {
+    const textarea = textareaRef.current;
+
+    if (textarea) {
+      textarea.scrollTop = textarea.scrollHeight;
+    }
+  };
+
+  const abort = () => {
+    stop();
+    chatStore.setKey('aborted', true);
+    workbenchStore.abortAllActions();
+  };
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+
+    if (textarea) {
+      textarea.style.height = 'auto';
+
+      const scrollHeight = textarea.scrollHeight;
+
+      textarea.style.height = `${Math.min(scrollHeight, TEXTAREA_MAX_HEIGHT)}px`;
+      textarea.style.overflowY = scrollHeight > TEXTAREA_MAX_HEIGHT ? 'auto' : 'hidden';
+    }
+  }, [input, textareaRef]);
+
+  const runAnimation = async () => {
+    if (chatStarted) {
+      return;
+    }
+
+    await Promise.all([
+      animate('#examples', { opacity: 0, display: 'none' }, { duration: 0.1 }),
+      animate('#intro', { opacity: 0, flex: 1 }, { duration: 0.2, ease: cubicEasingFn }),
+    ]);
+
+    chatStore.setKey('started', true);
+
+    setChatStarted(true);
+  };
+
+  const sendMessage = async (_event: React.UIEvent, messageInput?: string) => {
+    const _input = messageInput || input;
+
+    if (_input.length === 0 || isLoading) {
+      return;
+    }
+
+    /**
+     * @note (delm) Usually saving files shouldn't take long but it may take longer if there
+     * many unsaved files. In that case we need to block user input and show an indicator
+     * of some kind so the user is aware that something is happening. But I consider the
+     * happy case to be no unsaved files and I would expect users to save their changes
+     * before they send another message.
+     */
+    await workbenchStore.saveAllFiles();
+
+    const fileModifications = workbenchStore.getFileModifcations();
+
+    chatStore.setKey('aborted', false);
+
+    runAnimation();
+
+    if (fileModifications !== undefined) {
+      const diff = fileModificationsToHTML(fileModifications);
+
+      /**
+       * If we have file modifications we append a new user message manually since we have to prefix
+       * the user input with the file modifications and we don't want the new user input to appear
+       * in the prompt. Using `append` is almost the same as `handleSubmit` except that we have to
+       * manually reset the input and we'd have to manually pass in file attachments. However, those
+       * aren't relevant here.
+       */
+      append({ role: 'user', content: `[Model: ${model}]\n\n${diff}\n\n${_input}` });
+
+      /**
+       * After sending a new message we reset all modifications since the model
+       * should now be aware of all the changes.
+       */
+      workbenchStore.resetAllFileModifications();
+    } else {
+      append({ role: 'user', content: `[Model: ${model}]\n\n${_input}` });
+    }
+
+    setInput('');
+
+    resetEnhancer();
+
+    textareaRef.current?.blur();
+  };
+
+  const [messageRef, scrollRef] = useSnapScroll();
+
+  return (
+    <BaseChat
+      ref={animationScope}
+      textareaRef={textareaRef}
+      input={input}
+      showChat={showChat}
+      chatStarted={chatStarted}
+      isStreaming={isLoading}
+      enhancingPrompt={enhancingPrompt}
+      promptEnhanced={promptEnhanced}
+      sendMessage={sendMessage}
+      model={model}
+      setModel={setModel}
+      messageRef={messageRef}
+      scrollRef={scrollRef}
+      handleInputChange={handleInputChange}
+      handleStop={abort}
+      messages={messages.map((message, i) => {
+        if (message.role === 'user') {
+          return message;
+        }
+
+        return {
+          ...message,
+          content: parsedMessages[i] || '',
+        };
+      })}
+      enhancePrompt={() => {
+        enhancePrompt(input, (input) => {
+          setInput(input);
+          scrollTextArea();
+        });
+      }}
+    />
+  );
+});

app/components/chat/CodeBlock.module.scss

@@ -0,0 +1,10 @@
+.CopyButtonContainer {
+  button:before {
+    content: 'Copied';
+    font-size: 12px;
+    position: absolute;
+    left: -53px;
+    padding: 2px 6px;
+    height: 30px;
+  }
+}

app/components/chat/CodeBlock.tsx

@@ -0,0 +1,82 @@
+import { memo, useEffect, useState } from 'react';
+import { bundledLanguages, codeToHtml, isSpecialLang, type BundledLanguage, type SpecialLanguage } from 'shiki';
+import { classNames } from '~/utils/classNames';
+import { createScopedLogger } from '~/utils/logger';
+
+import styles from './CodeBlock.module.scss';
+
+const logger = createScopedLogger('CodeBlock');
+
+interface CodeBlockProps {
+  className?: string;
+  code: string;
+  language?: BundledLanguage | SpecialLanguage;
+  theme?: 'light-plus' | 'dark-plus';
+  disableCopy?: boolean;
+}
+
+export const CodeBlock = memo(
+  ({ className, code, language = 'plaintext', theme = 'dark-plus', disableCopy = false }: CodeBlockProps) => {
+    const [html, setHTML] = useState<string | undefined>(undefined);
+    const [copied, setCopied] = useState(false);
+
+    const copyToClipboard = () => {
+      if (copied) {
+        return;
+      }
+
+      navigator.clipboard.writeText(code);
+
+      setCopied(true);
+
+      setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    };
+
+    useEffect(() => {
+      if (language && !isSpecialLang(language) && !(language in bundledLanguages)) {
+        logger.warn(`Unsupported language '${language}'`);
+      }
+
+      logger.trace(`Language = ${language}`);
+
+      const processCode = async () => {
+        setHTML(await codeToHtml(code, { lang: language, theme }));
+      };
+
+      processCode();
+    }, [code]);
+
+    return (
+      <div className={classNames('relative group text-left', className)}>
+        <div
+          className={classNames(
+            styles.CopyButtonContainer,
+            'bg-white absolute top-[10px] right-[10px] rounded-md z-10 text-lg flex items-center justify-center opacity-0 group-hover:opacity-100',
+            {
+              'rounded-l-0 opacity-100': copied,
+            },
+          )}
+        >
+          {!disableCopy && (
+            <button
+              className={classNames(
+                'flex items-center bg-transparent p-[6px] justify-center before:bg-white before:rounded-l-md before:text-gray-500 before:border-r before:border-gray-300',
+                {
+                  'before:opacity-0': !copied,
+                  'before:opacity-100': copied,
+                },
+              )}
+              title="Copy Code"
+              onClick={() => copyToClipboard()}
+            >
+              <div className="i-ph:clipboard-text-duotone"></div>
+            </button>
+          )}
+        </div>
+        <div dangerouslySetInnerHTML={{ __html: html ?? '' }}></div>
+      </div>
+    );
+  },
+);

app/components/chat/Markdown.module.scss

@@ -0,0 +1,171 @@
+$font-mono: ui-monospace, 'Fira Code', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+$code-font-size: 13px;
+
+@mixin not-inside-actions {
+  &:not(:has(:global(.actions)), :global(.actions *)) {
+    @content;
+  }
+}
+
+.MarkdownContent {
+  line-height: 1.6;
+  color: var(--bolt-elements-textPrimary);
+
+  > *:not(:last-child) {
+    margin-block-end: 16px;
+  }
+
+  :global(.artifact) {
+    margin: 1.5em 0;
+  }
+
+  :is(h1, h2, h3, h4, h5, h6) {
+    @include not-inside-actions {
+      margin-block-start: 24px;
+      margin-block-end: 16px;
+      font-weight: 600;
+      line-height: 1.25;
+      color: var(--bolt-elements-textPrimary);
+    }
+  }
+
+  h1 {
+    font-size: 2em;
+    border-bottom: 1px solid var(--bolt-elements-borderColor);
+    padding-bottom: 0.3em;
+  }
+
+  h2 {
+    font-size: 1.5em;
+    border-bottom: 1px solid var(--bolt-elements-borderColor);
+    padding-bottom: 0.3em;
+  }
+
+  h3 {
+    font-size: 1.25em;
+  }
+
+  h4 {
+    font-size: 1em;
+  }
+
+  h5 {
+    font-size: 0.875em;
+  }
+
+  h6 {
+    font-size: 0.85em;
+    color: #6a737d;
+  }
+
+  p {
+    white-space: pre-wrap;
+
+    &:not(:last-of-type) {
+      margin-block-start: 0;
+      margin-block-end: 16px;
+    }
+  }
+
+  a {
+    color: var(--bolt-elements-messages-linkColor);
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  :not(pre) > code {
+    font-family: $font-mono;
+    font-size: $code-font-size;
+
+    @include not-inside-actions {
+      border-radius: 6px;
+      padding: 0.2em 0.4em;
+      background-color: var(--bolt-elements-messages-inlineCode-background);
+      color: var(--bolt-elements-messages-inlineCode-text);
+    }
+  }
+
+  pre {
+    padding: 20px 16px;
+    border-radius: 6px;
+  }
+
+  pre:has(> code) {
+    font-family: $font-mono;
+    font-size: $code-font-size;
+    background: transparent;
+    overflow-x: auto;
+    min-width: 0;
+  }
+
+  blockquote {
+    margin: 0;
+    padding: 0 1em;
+    color: var(--bolt-elements-textTertiary);
+    border-left: 0.25em solid var(--bolt-elements-borderColor);
+  }
+
+  :is(ul, ol) {
+    @include not-inside-actions {
+      padding-left: 2em;
+      margin-block-start: 0;
+      margin-block-end: 16px;
+    }
+  }
+
+  ul {
+    @include not-inside-actions {
+      list-style-type: disc;
+    }
+  }
+
+  ol {
+    @include not-inside-actions {
+      list-style-type: decimal;
+    }
+  }
+
+  li {
+    @include not-inside-actions {
+      & + li {
+        margin-block-start: 8px;
+      }
+
+      > *:not(:last-child) {
+        margin-block-end: 16px;
+      }
+    }
+  }
+
+  img {
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  hr {
+    height: 0.25em;
+    padding: 0;
+    margin: 24px 0;
+    background-color: var(--bolt-elements-borderColor);
+    border: 0;
+  }
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    margin-block-end: 16px;
+
+    :is(th, td) {
+      padding: 6px 13px;
+      border: 1px solid #dfe2e5;
+    }
+
+    tr:nth-child(2n) {
+      background-color: #f6f8fa;
+    }
+  }
+}

app/components/chat/Markdown.tsx

@@ -0,0 +1,74 @@
+import { memo, useMemo } from 'react';
+import ReactMarkdown, { type Components } from 'react-markdown';
+import type { BundledLanguage } from 'shiki';
+import { createScopedLogger } from '~/utils/logger';
+import { rehypePlugins, remarkPlugins, allowedHTMLElements } from '~/utils/markdown';
+import { Artifact } from './Artifact';
+import { CodeBlock } from './CodeBlock';
+
+import styles from './Markdown.module.scss';
+
+const logger = createScopedLogger('MarkdownComponent');
+
+interface MarkdownProps {
+  children: string;
+  html?: boolean;
+  limitedMarkdown?: boolean;
+}
+
+export const Markdown = memo(({ children, html = false, limitedMarkdown = false }: MarkdownProps) => {
+  logger.trace('Render');
+
+  const components = useMemo(() => {
+    return {
+      div: ({ className, children, node, ...props }) => {
+        if (className?.includes('__boltArtifact__')) {
+          const messageId = node?.properties.dataMessageId as string;
+
+          if (!messageId) {
+            logger.error(`Invalid message id ${messageId}`);
+          }
+
+          return <Artifact messageId={messageId} />;
+        }
+
+        return (
+          <div className={className} {...props}>
+            {children}
+          </div>
+        );
+      },
+      pre: (props) => {
+        const { children, node, ...rest } = props;
+
+        const [firstChild] = node?.children ?? [];
+
+        if (
+          firstChild &&
+          firstChild.type === 'element' &&
+          firstChild.tagName === 'code' &&
+          firstChild.children[0].type === 'text'
+        ) {
+          const { className, ...rest } = firstChild.properties;
+          const [, language = 'plaintext'] = /language-(\w+)/.exec(String(className) || '') ?? [];
+
+          return <CodeBlock code={firstChild.children[0].value} language={language as BundledLanguage} {...rest} />;
+        }
+
+        return <pre {...rest}>{children}</pre>;
+      },
+    } satisfies Components;
+  }, []);
+
+  return (
+    <ReactMarkdown
+      allowedElements={allowedHTMLElements}
+      className={styles.MarkdownContent}
+      components={components}
+      remarkPlugins={remarkPlugins(limitedMarkdown)}
+      rehypePlugins={rehypePlugins(html)}
+    >
+      {children}
+    </ReactMarkdown>
+  );
+});

app/components/chat/Messages.client.tsx

@@ -0,0 +1,53 @@
+import type { Message } from 'ai';
+import React from 'react';
+import { classNames } from '~/utils/classNames';
+import { AssistantMessage } from './AssistantMessage';
+import { UserMessage } from './UserMessage';
+
+interface MessagesProps {
+  id?: string;
+  className?: string;
+  isStreaming?: boolean;
+  messages?: Message[];
+}
+
+export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props: MessagesProps, ref) => {
+  const { id, isStreaming = false, messages = [] } = props;
+
+  return (
+    <div id={id} ref={ref} className={props.className}>
+      {messages.length > 0
+        ? messages.map((message, index) => {
+            const { role, content } = message;
+            const isUserMessage = role === 'user';
+            const isFirst = index === 0;
+            const isLast = index === messages.length - 1;
+
+            return (
+              <div
+                key={index}
+                className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
+                  'bg-bolt-elements-messages-background': isUserMessage || !isStreaming || (isStreaming && !isLast),
+                  'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
+                    isStreaming && isLast,
+                  'mt-4': !isFirst,
+                })}
+              >
+                {isUserMessage && (
+                  <div className="flex items-center justify-center w-[34px] h-[34px] overflow-hidden bg-white text-gray-600 rounded-full shrink-0 self-start">
+                    <div className="i-ph:user-fill text-xl"></div>
+                  </div>
+                )}
+                <div className="grid grid-col-1 w-full">
+                  {isUserMessage ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
+                </div>
+              </div>
+            );
+          })
+        : null}
+      {isStreaming && (
+        <div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
+      )}
+    </div>
+  );
+});

app/components/chat/SendButton.client.tsx

@@ -0,0 +1,33 @@
+import { AnimatePresence, cubicBezier, motion } from 'framer-motion';
+
+interface SendButtonProps {
+  show: boolean;
+  isStreaming?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+const customEasingFn = cubicBezier(0.4, 0, 0.2, 1);
+
+export function SendButton({ show, isStreaming, onClick }: SendButtonProps) {
+  return (
+    <AnimatePresence>
+      {show ? (
+        <motion.button
+          className="absolute flex justify-center items-center top-[18px] right-[22px] p-1 bg-accent-500 hover:brightness-94 color-white rounded-md w-[34px] h-[34px] transition-theme"
+          transition={{ ease: customEasingFn, duration: 0.17 }}
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 10 }}
+          onClick={(event) => {
+            event.preventDefault();
+            onClick?.(event);
+          }}
+        >
+          <div className="text-lg">
+            {!isStreaming ? <div className="i-ph:arrow-right"></div> : <div className="i-ph:stop-circle-bold"></div>}
+          </div>
+        </motion.button>
+      ) : null}
+    </AnimatePresence>
+  );
+}

app/components/chat/UserMessage.tsx

@@ -0,0 +1,21 @@
+// @ts-nocheck
+// Preventing TS checks with files presented in the video for a better presentation.
+import { modificationsRegex } from '~/utils/diff';
+import { MODEL_REGEX } from '~/utils/constants';
+import { Markdown } from './Markdown';
+
+interface UserMessageProps {
+  content: string;
+}
+
+export function UserMessage({ content }: UserMessageProps) {
+  return (
+    <div className="overflow-hidden pt-[4px]">
+      <Markdown limitedMarkdown>{sanitizeUserMessage(content)}</Markdown>
+    </div>
+  );
+}
+
+function sanitizeUserMessage(content: string) {
+  return content.replace(modificationsRegex, '').replace(MODEL_REGEX, '').trim();
+}

app/components/editor/codemirror/BinaryContent.tsx

@@ -0,0 +1,7 @@
+export function BinaryContent() {
+  return (
+    <div className="flex items-center justify-center absolute inset-0 z-10 text-sm bg-tk-elements-app-backgroundColor text-tk-elements-app-textColor">
+      File format cannot be displayed.
+    </div>
+  );
+}

app/components/editor/codemirror/CodeMirrorEditor.tsx

@@ -0,0 +1,461 @@
+import { acceptCompletion, autocompletion, closeBrackets } from '@codemirror/autocomplete';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { bracketMatching, foldGutter, indentOnInput, indentUnit } from '@codemirror/language';
+import { searchKeymap } from '@codemirror/search';
+import { Compartment, EditorSelection, EditorState, StateEffect, StateField, type Extension } from '@codemirror/state';
+import {
+  drawSelection,
+  dropCursor,
+  EditorView,
+  highlightActiveLine,
+  highlightActiveLineGutter,
+  keymap,
+  lineNumbers,
+  scrollPastEnd,
+  showTooltip,
+  tooltips,
+  type Tooltip,
+} from '@codemirror/view';
+import { memo, useEffect, useRef, useState, type MutableRefObject } from 'react';
+import type { Theme } from '~/types/theme';
+import { classNames } from '~/utils/classNames';
+import { debounce } from '~/utils/debounce';
+import { createScopedLogger, renderLogger } from '~/utils/logger';
+import { BinaryContent } from './BinaryContent';
+import { getTheme, reconfigureTheme } from './cm-theme';
+import { indentKeyBinding } from './indent';
+import { getLanguage } from './languages';
+
+const logger = createScopedLogger('CodeMirrorEditor');
+
+export interface EditorDocument {
+  value: string;
+  isBinary: boolean;
+  filePath: string;
+  scroll?: ScrollPosition;
+}
+
+export interface EditorSettings {
+  fontSize?: string;
+  gutterFontSize?: string;
+  tabSize?: number;
+}
+
+type TextEditorDocument = EditorDocument & {
+  value: string;
+};
+
+export interface ScrollPosition {
+  top: number;
+  left: number;
+}
+
+export interface EditorUpdate {
+  selection: EditorSelection;
+  content: string;
+}
+
+export type OnChangeCallback = (update: EditorUpdate) => void;
+export type OnScrollCallback = (position: ScrollPosition) => void;
+export type OnSaveCallback = () => void;
+
+interface Props {
+  theme: Theme;
+  id?: unknown;
+  doc?: EditorDocument;
+  editable?: boolean;
+  debounceChange?: number;
+  debounceScroll?: number;
+  autoFocusOnDocumentChange?: boolean;
+  onChange?: OnChangeCallback;
+  onScroll?: OnScrollCallback;
+  onSave?: OnSaveCallback;
+  className?: string;
+  settings?: EditorSettings;
+}
+
+type EditorStates = Map<string, EditorState>;
+
+const readOnlyTooltipStateEffect = StateEffect.define<boolean>();
+
+const editableTooltipField = StateField.define<readonly Tooltip[]>({
+  create: () => [],
+  update(_tooltips, transaction) {
+    if (!transaction.state.readOnly) {
+      return [];
+    }
+
+    for (const effect of transaction.effects) {
+      if (effect.is(readOnlyTooltipStateEffect) && effect.value) {
+        return getReadOnlyTooltip(transaction.state);
+      }
+    }
+
+    return [];
+  },
+  provide: (field) => {
+    return showTooltip.computeN([field], (state) => state.field(field));
+  },
+});
+
+const editableStateEffect = StateEffect.define<boolean>();
+
+const editableStateField = StateField.define<boolean>({
+  create() {
+    return true;
+  },
+  update(value, transaction) {
+    for (const effect of transaction.effects) {
+      if (effect.is(editableStateEffect)) {
+        return effect.value;
+      }
+    }
+
+    return value;
+  },
+});
+
+export const CodeMirrorEditor = memo(
+  ({
+    id,
+    doc,
+    debounceScroll = 100,
+    debounceChange = 150,
+    autoFocusOnDocumentChange = false,
+    editable = true,
+    onScroll,
+    onChange,
+    onSave,
+    theme,
+    settings,
+    className = '',
+  }: Props) => {
+    renderLogger.trace('CodeMirrorEditor');
+
+    const [languageCompartment] = useState(new Compartment());
+
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const viewRef = useRef<EditorView>();
+    const themeRef = useRef<Theme>();
+    const docRef = useRef<EditorDocument>();
+    const editorStatesRef = useRef<EditorStates>();
+    const onScrollRef = useRef(onScroll);
+    const onChangeRef = useRef(onChange);
+    const onSaveRef = useRef(onSave);
+
+    /**
+     * This effect is used to avoid side effects directly in the render function
+     * and instead the refs are updated after each render.
+     */
+    useEffect(() => {
+      onScrollRef.current = onScroll;
+      onChangeRef.current = onChange;
+      onSaveRef.current = onSave;
+      docRef.current = doc;
+      themeRef.current = theme;
+    });
+
+    useEffect(() => {
+      const onUpdate = debounce((update: EditorUpdate) => {
+        onChangeRef.current?.(update);
+      }, debounceChange);
+
+      const view = new EditorView({
+        parent: containerRef.current!,
+        dispatchTransactions(transactions) {
+          const previousSelection = view.state.selection;
+
+          view.update(transactions);
+
+          const newSelection = view.state.selection;
+
+          const selectionChanged =
+            newSelection !== previousSelection &&
+            (newSelection === undefined || previousSelection === undefined || !newSelection.eq(previousSelection));
+
+          if (docRef.current && (transactions.some((transaction) => transaction.docChanged) || selectionChanged)) {
+            onUpdate({
+              selection: view.state.selection,
+              content: view.state.doc.toString(),
+            });
+
+            editorStatesRef.current!.set(docRef.current.filePath, view.state);
+          }
+        },
+      });
+
+      viewRef.current = view;
+
+      return () => {
+        viewRef.current?.destroy();
+        viewRef.current = undefined;
+      };
+    }, []);
+
+    useEffect(() => {
+      if (!viewRef.current) {
+        return;
+      }
+
+      viewRef.current.dispatch({
+        effects: [reconfigureTheme(theme)],
+      });
+    }, [theme]);
+
+    useEffect(() => {
+      editorStatesRef.current = new Map<string, EditorState>();
+    }, [id]);
+
+    useEffect(() => {
+      const editorStates = editorStatesRef.current!;
+      const view = viewRef.current!;
+      const theme = themeRef.current!;
+
+      if (!doc) {
+        const state = newEditorState('', theme, settings, onScrollRef, debounceScroll, onSaveRef, [
+          languageCompartment.of([]),
+        ]);
+
+        view.setState(state);
+
+        setNoDocument(view);
+
+        return;
+      }
+
+      if (doc.isBinary) {
+        return;
+      }
+
+      if (doc.filePath === '') {
+        logger.warn('File path should not be empty');
+      }
+
+      let state = editorStates.get(doc.filePath);
+
+      if (!state) {
+        state = newEditorState(doc.value, theme, settings, onScrollRef, debounceScroll, onSaveRef, [
+          languageCompartment.of([]),
+        ]);
+
+        editorStates.set(doc.filePath, state);
+      }
+
+      view.setState(state);
+
+      setEditorDocument(
+        view,
+        theme,
+        editable,
+        languageCompartment,
+        autoFocusOnDocumentChange,
+        doc as TextEditorDocument,
+      );
+    }, [doc?.value, editable, doc?.filePath, autoFocusOnDocumentChange]);
+
+    return (
+      <div className={classNames('relative h-full', className)}>
+        {doc?.isBinary && <BinaryContent />}
+        <div className="h-full overflow-hidden" ref={containerRef} />
+      </div>
+    );
+  },
+);
+
+export default CodeMirrorEditor;
+
+CodeMirrorEditor.displayName = 'CodeMirrorEditor';
+
+function newEditorState(
+  content: string,
+  theme: Theme,
+  settings: EditorSettings | undefined,
+  onScrollRef: MutableRefObject<OnScrollCallback | undefined>,
+  debounceScroll: number,
+  onFileSaveRef: MutableRefObject<OnSaveCallback | undefined>,
+  extensions: Extension[],
+) {
+  return EditorState.create({
+    doc: content,
+    extensions: [
+      EditorView.domEventHandlers({
+        scroll: debounce((event, view) => {
+          if (event.target !== view.scrollDOM) {
+            return;
+          }
+
+          onScrollRef.current?.({ left: view.scrollDOM.scrollLeft, top: view.scrollDOM.scrollTop });
+        }, debounceScroll),
+        keydown: (event, view) => {
+          if (view.state.readOnly) {
+            view.dispatch({
+              effects: [readOnlyTooltipStateEffect.of(event.key !== 'Escape')],
+            });
+
+            return true;
+          }
+
+          return false;
+        },
+      }),
+      getTheme(theme, settings),
+      history(),
+      keymap.of([
+        ...defaultKeymap,
+        ...historyKeymap,
+        ...searchKeymap,
+        { key: 'Tab', run: acceptCompletion },
+        {
+          key: 'Mod-s',
+          preventDefault: true,
+          run: () => {
+            onFileSaveRef.current?.();
+            return true;
+          },
+        },
+        indentKeyBinding,
+      ]),
+      indentUnit.of('\t'),
+      autocompletion({
+        closeOnBlur: false,
+      }),
+      tooltips({
+        position: 'absolute',
+        parent: document.body,
+        tooltipSpace: (view) => {
+          const rect = view.dom.getBoundingClientRect();
+
+          return {
+            top: rect.top - 50,
+            left: rect.left,
+            bottom: rect.bottom,
+            right: rect.right + 10,
+          };
+        },
+      }),
+      closeBrackets(),
+      lineNumbers(),
+      scrollPastEnd(),
+      dropCursor(),
+      drawSelection(),
+      bracketMatching(),
+      EditorState.tabSize.of(settings?.tabSize ?? 2),
+      indentOnInput(),
+      editableTooltipField,
+      editableStateField,
+      EditorState.readOnly.from(editableStateField, (editable) => !editable),
+      highlightActiveLineGutter(),
+      highlightActiveLine(),
+      foldGutter({
+        markerDOM: (open) => {
+          const icon = document.createElement('div');
+
+          icon.className = `fold-icon ${open ? 'i-ph-caret-down-bold' : 'i-ph-caret-right-bold'}`;
+
+          return icon;
+        },
+      }),
+      ...extensions,
+    ],
+  });
+}
+
+function setNoDocument(view: EditorView) {
+  view.dispatch({
+    selection: { anchor: 0 },
+    changes: {
+      from: 0,
+      to: view.state.doc.length,
+      insert: '',
+    },
+  });
+
+  view.scrollDOM.scrollTo(0, 0);
+}
+
+function setEditorDocument(
+  view: EditorView,
+  theme: Theme,
+  editable: boolean,
+  languageCompartment: Compartment,
+  autoFocus: boolean,
+  doc: TextEditorDocument,
+) {
+  if (doc.value !== view.state.doc.toString()) {
+    view.dispatch({
+      selection: { anchor: 0 },
+      changes: {
+        from: 0,
+        to: view.state.doc.length,
+        insert: doc.value,
+      },
+    });
+  }
+
+  view.dispatch({
+    effects: [editableStateEffect.of(editable && !doc.isBinary)],
+  });
+
+  getLanguage(doc.filePath).then((languageSupport) => {
+    if (!languageSupport) {
+      return;
+    }
+
+    view.dispatch({
+      effects: [languageCompartment.reconfigure([languageSupport]), reconfigureTheme(theme)],
+    });
+
+    requestAnimationFrame(() => {
+      const currentLeft = view.scrollDOM.scrollLeft;
+      const currentTop = view.scrollDOM.scrollTop;
+      const newLeft = doc.scroll?.left ?? 0;
+      const newTop = doc.scroll?.top ?? 0;
+
+      const needsScrolling = currentLeft !== newLeft || currentTop !== newTop;
+
+      if (autoFocus && editable) {
+        if (needsScrolling) {
+          // we have to wait until the scroll position was changed before we can set the focus
+          view.scrollDOM.addEventListener(
+            'scroll',
+            () => {
+              view.focus();
+            },
+            { once: true },
+          );
+        } else {
+          // if the scroll position is still the same we can focus immediately
+          view.focus();
+        }
+      }
+
+      view.scrollDOM.scrollTo(newLeft, newTop);
+    });
+  });
+}
+
+function getReadOnlyTooltip(state: EditorState) {
+  if (!state.readOnly) {
+    return [];
+  }
+
+  return state.selection.ranges
+    .filter((range) => {
+      return range.empty;
+    })
+    .map((range) => {
+      return {
+        pos: range.head,
+        above: true,
+        strictSide: true,
+        arrow: true,
+        create: () => {
+          const divElement = document.createElement('div');
+          divElement.className = 'cm-readonly-tooltip';
+          divElement.textContent = 'Cannot edit file while AI response is being generated';
+
+          return { dom: divElement };
+        },
+      };
+    });
+}

app/components/editor/codemirror/cm-theme.ts

@@ -0,0 +1,192 @@
+import { Compartment, type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { vscodeDark, vscodeLight } from '@uiw/codemirror-theme-vscode';
+import type { Theme } from '~/types/theme.js';
+import type { EditorSettings } from './CodeMirrorEditor.js';
+
+export const darkTheme = EditorView.theme({}, { dark: true });
+export const themeSelection = new Compartment();
+
+export function getTheme(theme: Theme, settings: EditorSettings = {}): Extension {
+  return [
+    getEditorTheme(settings),
+    theme === 'dark' ? themeSelection.of([getDarkTheme()]) : themeSelection.of([getLightTheme()]),
+  ];
+}
+
+export function reconfigureTheme(theme: Theme) {
+  return themeSelection.reconfigure(theme === 'dark' ? getDarkTheme() : getLightTheme());
+}
+
+function getEditorTheme(settings: EditorSettings) {
+  return EditorView.theme({
+    '&': {
+      fontSize: settings.fontSize ?? '12px',
+    },
+    '&.cm-editor': {
+      height: '100%',
+      background: 'var(--cm-backgroundColor)',
+      color: 'var(--cm-textColor)',
+    },
+    '.cm-cursor': {
+      borderLeft: 'var(--cm-cursor-width) solid var(--cm-cursor-backgroundColor)',
+    },
+    '.cm-scroller': {
+      lineHeight: '1.5',
+      '&:focus-visible': {
+        outline: 'none',
+      },
+    },
+    '.cm-line': {
+      padding: '0 0 0 4px',
+    },
+    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
+      backgroundColor: 'var(--cm-selection-backgroundColorFocused) !important',
+      opacity: 'var(--cm-selection-backgroundOpacityFocused, 0.3)',
+    },
+    '&:not(.cm-focused) > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
+      backgroundColor: 'var(--cm-selection-backgroundColorBlured)',
+      opacity: 'var(--cm-selection-backgroundOpacityBlured, 0.3)',
+    },
+    '&.cm-focused > .cm-scroller .cm-matchingBracket': {
+      backgroundColor: 'var(--cm-matching-bracket)',
+    },
+    '.cm-activeLine': {
+      background: 'var(--cm-activeLineBackgroundColor)',
+    },
+    '.cm-gutters': {
+      background: 'var(--cm-gutter-backgroundColor)',
+      borderRight: 0,
+      color: 'var(--cm-gutter-textColor)',
+    },
+    '.cm-gutter': {
+      '&.cm-lineNumbers': {
+        fontFamily: 'Roboto Mono, monospace',
+        fontSize: settings.gutterFontSize ?? settings.fontSize ?? '12px',
+        minWidth: '40px',
+      },
+      '& .cm-activeLineGutter': {
+        background: 'transparent',
+        color: 'var(--cm-gutter-activeLineTextColor)',
+      },
+      '&.cm-foldGutter .cm-gutterElement > .fold-icon': {
+        cursor: 'pointer',
+        color: 'var(--cm-foldGutter-textColor)',
+        transform: 'translateY(2px)',
+        '&:hover': {
+          color: 'var(--cm-foldGutter-textColorHover)',
+        },
+      },
+    },
+    '.cm-foldGutter .cm-gutterElement': {
+      padding: '0 4px',
+    },
+    '.cm-tooltip-autocomplete > ul > li': {
+      minHeight: '18px',
+    },
+    '.cm-panel.cm-search label': {
+      marginLeft: '2px',
+      fontSize: '12px',
+    },
+    '.cm-panel.cm-search .cm-button': {
+      fontSize: '12px',
+    },
+    '.cm-panel.cm-search .cm-textfield': {
+      fontSize: '12px',
+    },
+    '.cm-panel.cm-search input[type=checkbox]': {
+      position: 'relative',
+      transform: 'translateY(2px)',
+      marginRight: '4px',
+    },
+    '.cm-panels': {
+      borderColor: 'var(--cm-panels-borderColor)',
+    },
+    '.cm-panels-bottom': {
+      borderTop: '1px solid var(--cm-panels-borderColor)',
+      backgroundColor: 'transparent',
+    },
+    '.cm-panel.cm-search': {
+      background: 'var(--cm-search-backgroundColor)',
+      color: 'var(--cm-search-textColor)',
+      padding: '8px',
+    },
+    '.cm-search .cm-button': {
+      background: 'var(--cm-search-button-backgroundColor)',
+      borderColor: 'var(--cm-search-button-borderColor)',
+      color: 'var(--cm-search-button-textColor)',
+      borderRadius: '4px',
+      '&:hover': {
+        color: 'var(--cm-search-button-textColorHover)',
+      },
+      '&:focus-visible': {
+        outline: 'none',
+        borderColor: 'var(--cm-search-button-borderColorFocused)',
+      },
+      '&:hover:not(:focus-visible)': {
+        background: 'var(--cm-search-button-backgroundColorHover)',
+        borderColor: 'var(--cm-search-button-borderColorHover)',
+      },
+      '&:hover:focus-visible': {
+        background: 'var(--cm-search-button-backgroundColorHover)',
+        borderColor: 'var(--cm-search-button-borderColorFocused)',
+      },
+    },
+    '.cm-panel.cm-search [name=close]': {
+      top: '6px',
+      right: '6px',
+      padding: '0 6px',
+      fontSize: '1rem',
+      backgroundColor: 'var(--cm-search-closeButton-backgroundColor)',
+      color: 'var(--cm-search-closeButton-textColor)',
+      '&:hover': {
+        'border-radius': '6px',
+        color: 'var(--cm-search-closeButton-textColorHover)',
+        backgroundColor: 'var(--cm-search-closeButton-backgroundColorHover)',
+      },
+    },
+    '.cm-search input': {
+      background: 'var(--cm-search-input-backgroundColor)',
+      borderColor: 'var(--cm-search-input-borderColor)',
+      color: 'var(--cm-search-input-textColor)',
+      outline: 'none',
+      borderRadius: '4px',
+      '&:focus-visible': {
+        borderColor: 'var(--cm-search-input-borderColorFocused)',
+      },
+    },
+    '.cm-tooltip': {
+      background: 'var(--cm-tooltip-backgroundColor)',
+      border: '1px solid transparent',
+      borderColor: 'var(--cm-tooltip-borderColor)',
+      color: 'var(--cm-tooltip-textColor)',
+    },
+    '.cm-tooltip.cm-tooltip-autocomplete ul li[aria-selected]': {
+      background: 'var(--cm-tooltip-backgroundColorSelected)',
+      color: 'var(--cm-tooltip-textColorSelected)',
+    },
+    '.cm-searchMatch': {
+      backgroundColor: 'var(--cm-searchMatch-backgroundColor)',
+    },
+    '.cm-tooltip.cm-readonly-tooltip': {
+      padding: '4px',
+      whiteSpace: 'nowrap',
+      backgroundColor: 'var(--bolt-elements-bg-depth-2)',
+      borderColor: 'var(--bolt-elements-borderColorActive)',
+      '& .cm-tooltip-arrow:before': {
+        borderTopColor: 'var(--bolt-elements-borderColorActive)',
+      },
+      '& .cm-tooltip-arrow:after': {
+        borderTopColor: 'transparent',
+      },
+    },
+  });
+}
+
+function getLightTheme() {
+  return vscodeLight;
+}
+
+function getDarkTheme() {
+  return vscodeDark;
+}

app/components/editor/codemirror/indent.ts

@@ -0,0 +1,68 @@
+import { indentLess } from '@codemirror/commands';
+import { indentUnit } from '@codemirror/language';
+import { EditorSelection, EditorState, Line, type ChangeSpec } from '@codemirror/state';
+import { EditorView, type KeyBinding } from '@codemirror/view';
+
+export const indentKeyBinding: KeyBinding = {
+  key: 'Tab',
+  run: indentMore,
+  shift: indentLess,
+};
+
+function indentMore({ state, dispatch }: EditorView) {
+  if (state.readOnly) {
+    return false;
+  }
+
+  dispatch(
+    state.update(
+      changeBySelectedLine(state, (from, to, changes) => {
+        changes.push({ from, to, insert: state.facet(indentUnit) });
+      }),
+      { userEvent: 'input.indent' },
+    ),
+  );
+
+  return true;
+}
+
+function changeBySelectedLine(
+  state: EditorState,
+  cb: (from: number, to: number | undefined, changes: ChangeSpec[], line: Line) => void,
+) {
+  return state.changeByRange((range) => {
+    const changes: ChangeSpec[] = [];
+
+    const line = state.doc.lineAt(range.from);
+
+    // just insert single indent unit at the current cursor position
+    if (range.from === range.to) {
+      cb(range.from, undefined, changes, line);
+    }
+    // handle the case when multiple characters are selected in a single line
+    else if (range.from < range.to && range.to <= line.to) {
+      cb(range.from, range.to, changes, line);
+    } else {
+      let atLine = -1;
+
+      // handle the case when selection spans multiple lines
+      for (let pos = range.from; pos <= range.to; ) {
+        const line = state.doc.lineAt(pos);
+
+        if (line.number > atLine && (range.empty || range.to > line.from)) {
+          cb(line.from, undefined, changes, line);
+          atLine = line.number;
+        }
+
+        pos = line.to + 1;
+      }
+    }
+
+    const changeSet = state.changes(changes);
+
+    return {
+      changes,
+      range: EditorSelection.range(changeSet.mapPos(range.anchor, 1), changeSet.mapPos(range.head, 1)),
+    };
+  });
+}

app/components/editor/codemirror/languages.ts

@@ -0,0 +1,105 @@
+import { LanguageDescription } from '@codemirror/language';
+
+export const supportedLanguages = [
+  LanguageDescription.of({
+    name: 'TS',
+    extensions: ['ts'],
+    async load() {
+      return import('@codemirror/lang-javascript').then((module) => module.javascript({ typescript: true }));
+    },
+  }),
+  LanguageDescription.of({
+    name: 'JS',
+    extensions: ['js', 'mjs', 'cjs'],
+    async load() {
+      return import('@codemirror/lang-javascript').then((module) => module.javascript());
+    },
+  }),
+  LanguageDescription.of({
+    name: 'TSX',
+    extensions: ['tsx'],
+    async load() {
+      return import('@codemirror/lang-javascript').then((module) => module.javascript({ jsx: true, typescript: true }));
+    },
+  }),
+  LanguageDescription.of({
+    name: 'JSX',
+    extensions: ['jsx'],
+    async load() {
+      return import('@codemirror/lang-javascript').then((module) => module.javascript({ jsx: true }));
+    },
+  }),
+  LanguageDescription.of({
+    name: 'HTML',
+    extensions: ['html'],
+    async load() {
+      return import('@codemirror/lang-html').then((module) => module.html());
+    },
+  }),
+  LanguageDescription.of({
+    name: 'CSS',
+    extensions: ['css'],
+    async load() {
+      return import('@codemirror/lang-css').then((module) => module.css());
+    },
+  }),
+  LanguageDescription.of({
+    name: 'SASS',
+    extensions: ['sass'],
+    async load() {
+      return import('@codemirror/lang-sass').then((module) => module.sass({ indented: true }));
+    },
+  }),
+  LanguageDescription.of({
+    name: 'SCSS',
+    extensions: ['scss'],
+    async load() {
+      return import('@codemirror/lang-sass').then((module) => module.sass({ indented: false }));
+    },
+  }),
+  LanguageDescription.of({
+    name: 'JSON',
+    extensions: ['json'],
+    async load() {
+      return import('@codemirror/lang-json').then((module) => module.json());
+    },
+  }),
+  LanguageDescription.of({
+    name: 'Markdown',
+    extensions: ['md'],
+    async load() {
+      return import('@codemirror/lang-markdown').then((module) => module.markdown());
+    },
+  }),
+  LanguageDescription.of({
+    name: 'Wasm',
+    extensions: ['wat'],
+    async load() {
+      return import('@codemirror/lang-wast').then((module) => module.wast());
+    },
+  }),
+  LanguageDescription.of({
+    name: 'Python',
+    extensions: ['py'],
+    async load() {
+      return import('@codemirror/lang-python').then((module) => module.python());
+    },
+  }),
+  LanguageDescription.of({
+    name: 'C++',
+    extensions: ['cpp'],
+    async load() {
+      return import('@codemirror/lang-cpp').then((module) => module.cpp());
+    },
+  }),
+];
+
+export async function getLanguage(fileName: string) {
+  const languageDescription = LanguageDescription.matchFilename(supportedLanguages, fileName);
+
+  if (languageDescription) {
+    return await languageDescription.load();
+  }
+
+  return undefined;
+}

app/components/header/Header.tsx

@@ -0,0 +1,41 @@
+import { useStore } from '@nanostores/react';
+import { ClientOnly } from 'remix-utils/client-only';
+import { chatStore } from '~/lib/stores/chat';
+import { classNames } from '~/utils/classNames';
+import { HeaderActionButtons } from './HeaderActionButtons.client';
+import { ChatDescription } from '~/lib/persistence/ChatDescription.client';
+
+export function Header() {
+  const chat = useStore(chatStore);
+
+  return (
+    <header
+      className={classNames(
+        'flex items-center bg-bolt-elements-background-depth-1 p-5 border-b h-[var(--header-height)]',
+        {
+          'border-transparent': !chat.started,
+          'border-bolt-elements-borderColor': chat.started,
+        },
+      )}
+    >
+      <div className="flex items-center gap-2 z-logo text-bolt-elements-textPrimary cursor-pointer">
+        <div className="i-ph:sidebar-simple-duotone text-xl" />
+        <a href="/" className="text-2xl font-semibold text-accent flex items-center">
+          <span className="i-bolt:logo-text?mask w-[46px] inline-block" />
+        </a>
+      </div>
+      <span className="flex-1 px-4 truncate text-center text-bolt-elements-textPrimary">
+        <ClientOnly>{() => <ChatDescription />}</ClientOnly>
+      </span>
+      {chat.started && (
+        <ClientOnly>
+          {() => (
+            <div className="mr-1">
+              <HeaderActionButtons />
+            </div>
+          )}
+        </ClientOnly>
+      )}
+    </header>
+  );
+}

app/components/header/HeaderActionButtons.client.tsx

@@ -0,0 +1,68 @@
+import { useStore } from '@nanostores/react';
+import { chatStore } from '~/lib/stores/chat';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { classNames } from '~/utils/classNames';
+
+interface HeaderActionButtonsProps {}
+
+export function HeaderActionButtons({}: HeaderActionButtonsProps) {
+  const showWorkbench = useStore(workbenchStore.showWorkbench);
+  const { showChat } = useStore(chatStore);
+
+  const canHideChat = showWorkbench || !showChat;
+
+  return (
+    <div className="flex">
+      <div className="flex border border-bolt-elements-borderColor rounded-md overflow-hidden">
+        <Button
+          active={showChat}
+          disabled={!canHideChat}
+          onClick={() => {
+            if (canHideChat) {
+              chatStore.setKey('showChat', !showChat);
+            }
+          }}
+        >
+          <div className="i-bolt:chat text-sm" />
+        </Button>
+        <div className="w-[1px] bg-bolt-elements-borderColor" />
+        <Button
+          active={showWorkbench}
+          onClick={() => {
+            if (showWorkbench && !showChat) {
+              chatStore.setKey('showChat', true);
+            }
+
+            workbenchStore.showWorkbench.set(!showWorkbench);
+          }}
+        >
+          <div className="i-ph:code-bold" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+interface ButtonProps {
+  active?: boolean;
+  disabled?: boolean;
+  children?: any;
+  onClick?: VoidFunction;
+}
+
+function Button({ active = false, disabled = false, children, onClick }: ButtonProps) {
+  return (
+    <button
+      className={classNames('flex items-center p-1.5', {
+        'bg-bolt-elements-item-backgroundDefault hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary':
+          !active,
+        'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': active && !disabled,
+        'bg-bolt-elements-item-backgroundDefault text-alpha-gray-20 dark:text-alpha-white-20 cursor-not-allowed':
+          disabled,
+      })}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

app/components/sidebar/HistoryItem.tsx

@@ -0,0 +1,64 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { useEffect, useRef, useState } from 'react';
+import { type ChatHistoryItem } from '~/lib/persistence';
+
+interface HistoryItemProps {
+  item: ChatHistoryItem;
+  onDelete?: (event: React.UIEvent) => void;
+}
+
+export function HistoryItem({ item, onDelete }: HistoryItemProps) {
+  const [hovering, setHovering] = useState(false);
+  const hoverRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout | undefined;
+
+    function mouseEnter() {
+      setHovering(true);
+
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    }
+
+    function mouseLeave() {
+      setHovering(false);
+    }
+
+    hoverRef.current?.addEventListener('mouseenter', mouseEnter);
+    hoverRef.current?.addEventListener('mouseleave', mouseLeave);
+
+    return () => {
+      hoverRef.current?.removeEventListener('mouseenter', mouseEnter);
+      hoverRef.current?.removeEventListener('mouseleave', mouseLeave);
+    };
+  }, []);
+
+  return (
+    <div
+      ref={hoverRef}
+      className="group rounded-md text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 overflow-hidden flex justify-between items-center px-2 py-1"
+    >
+      <a href={`/chat/${item.urlId}`} className="flex w-full relative truncate block">
+        {item.description}
+        <div className="absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-bolt-elements-background-depth-2 group-hover:from-bolt-elements-background-depth-3 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-45%">
+          {hovering && (
+            <div className="flex items-center p-1 text-bolt-elements-textSecondary hover:text-bolt-elements-item-contentDanger">
+              <Dialog.Trigger asChild>
+                <button
+                  className="i-ph:trash scale-110"
+                  onClick={(event) => {
+                    // we prevent the default so we don't trigger the anchor above
+                    event.preventDefault();
+                    onDelete?.(event);
+                  }}
+                />
+              </Dialog.Trigger>
+            </div>
+          )}
+        </div>
+      </a>
+    </div>
+  );
+}

app/components/sidebar/Menu.client.tsx

@@ -0,0 +1,172 @@
+import { motion, type Variants } from 'framer-motion';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { toast } from 'react-toastify';
+import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
+import { IconButton } from '~/components/ui/IconButton';
+import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
+import { db, deleteById, getAll, chatId, type ChatHistoryItem } from '~/lib/persistence';
+import { cubicEasingFn } from '~/utils/easings';
+import { logger } from '~/utils/logger';
+import { HistoryItem } from './HistoryItem';
+import { binDates } from './date-binning';
+
+const menuVariants = {
+  closed: {
+    opacity: 0,
+    visibility: 'hidden',
+    left: '-150px',
+    transition: {
+      duration: 0.2,
+      ease: cubicEasingFn,
+    },
+  },
+  open: {
+    opacity: 1,
+    visibility: 'initial',
+    left: 0,
+    transition: {
+      duration: 0.2,
+      ease: cubicEasingFn,
+    },
+  },
+} satisfies Variants;
+
+type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;
+
+export function Menu() {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [list, setList] = useState<ChatHistoryItem[]>([]);
+  const [open, setOpen] = useState(false);
+  const [dialogContent, setDialogContent] = useState<DialogContent>(null);
+
+  const loadEntries = useCallback(() => {
+    if (db) {
+      getAll(db)
+        .then((list) => list.filter((item) => item.urlId && item.description))
+        .then(setList)
+        .catch((error) => toast.error(error.message));
+    }
+  }, []);
+
+  const deleteItem = useCallback((event: React.UIEvent, item: ChatHistoryItem) => {
+    event.preventDefault();
+
+    if (db) {
+      deleteById(db, item.id)
+        .then(() => {
+          loadEntries();
+
+          if (chatId.get() === item.id) {
+            // hard page navigation to clear the stores
+            window.location.pathname = '/';
+          }
+        })
+        .catch((error) => {
+          toast.error('Failed to delete conversation');
+          logger.error(error);
+        });
+    }
+  }, []);
+
+  const closeDialog = () => {
+    setDialogContent(null);
+  };
+
+  useEffect(() => {
+    if (open) {
+      loadEntries();
+    }
+  }, [open]);
+
+  useEffect(() => {
+    const enterThreshold = 40;
+    const exitThreshold = 40;
+
+    function onMouseMove(event: MouseEvent) {
+      if (event.pageX < enterThreshold) {
+        setOpen(true);
+      }
+
+      if (menuRef.current && event.clientX > menuRef.current.getBoundingClientRect().right + exitThreshold) {
+        setOpen(false);
+      }
+    }
+
+    window.addEventListener('mousemove', onMouseMove);
+
+    return () => {
+      window.removeEventListener('mousemove', onMouseMove);
+    };
+  }, []);
+
+  return (
+    <motion.div
+      ref={menuRef}
+      initial="closed"
+      animate={open ? 'open' : 'closed'}
+      variants={menuVariants}
+      className="flex flex-col side-menu fixed top-0 w-[350px] h-full bg-bolt-elements-background-depth-2 border-r rounded-r-3xl border-bolt-elements-borderColor z-sidebar shadow-xl shadow-bolt-elements-sidebar-dropdownShadow text-sm"
+    >
+      <div className="flex items-center h-[var(--header-height)]">{/* Placeholder */}</div>
+      <div className="flex-1 flex flex-col h-full w-full overflow-hidden">
+        <div className="p-4">
+          <a
+            href="/"
+            className="flex gap-2 items-center bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText hover:bg-bolt-elements-sidebar-buttonBackgroundHover rounded-md p-2 transition-theme"
+          >
+            <span className="inline-block i-bolt:chat scale-110" />
+            Start new chat
+          </a>
+        </div>
+        <div className="text-bolt-elements-textPrimary font-medium pl-6 pr-5 my-2">Your Chats</div>
+        <div className="flex-1 overflow-scroll pl-4 pr-5 pb-5">
+          {list.length === 0 && <div className="pl-2 text-bolt-elements-textTertiary">No previous conversations</div>}
+          <DialogRoot open={dialogContent !== null}>
+            {binDates(list).map(({ category, items }) => (
+              <div key={category} className="mt-4 first:mt-0 space-y-1">
+                <div className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
+                  {category}
+                </div>
+                {items.map((item) => (
+                  <HistoryItem key={item.id} item={item} onDelete={() => setDialogContent({ type: 'delete', item })} />
+                ))}
+              </div>
+            ))}
+            <Dialog onBackdrop={closeDialog} onClose={closeDialog}>
+              {dialogContent?.type === 'delete' && (
+                <>
+                  <DialogTitle>Delete Chat?</DialogTitle>
+                  <DialogDescription asChild>
+                    <div>
+                      <p>
+                        You are about to delete <strong>{dialogContent.item.description}</strong>.
+                      </p>
+                      <p className="mt-1">Are you sure you want to delete this chat?</p>
+                    </div>
+                  </DialogDescription>
+                  <div className="px-5 pb-4 bg-bolt-elements-background-depth-2 flex gap-2 justify-end">
+                    <DialogButton type="secondary" onClick={closeDialog}>
+                      Cancel
+                    </DialogButton>
+                    <DialogButton
+                      type="danger"
+                      onClick={(event) => {
+                        deleteItem(event, dialogContent.item);
+                        closeDialog();
+                      }}
+                    >
+                      Delete
+                    </DialogButton>
+                  </div>
+                </>
+              )}
+            </Dialog>
+          </DialogRoot>
+        </div>
+        <div className="flex items-center border-t border-bolt-elements-borderColor p-4">
+          <ThemeSwitch className="ml-auto" />
+        </div>
+      </div>
+    </motion.div>
+  );
+}

app/components/sidebar/date-binning.ts

@@ -0,0 +1,59 @@
+import { format, isAfter, isThisWeek, isThisYear, isToday, isYesterday, subDays } from 'date-fns';
+import type { ChatHistoryItem } from '~/lib/persistence';
+
+type Bin = { category: string; items: ChatHistoryItem[] };
+
+export function binDates(_list: ChatHistoryItem[]) {
+  const list = _list.toSorted((a, b) => Date.parse(b.timestamp) - Date.parse(a.timestamp));
+
+  const binLookup: Record<string, Bin> = {};
+  const bins: Array<Bin> = [];
+
+  list.forEach((item) => {
+    const category = dateCategory(new Date(item.timestamp));
+
+    if (!(category in binLookup)) {
+      const bin = {
+        category,
+        items: [item],
+      };
+
+      binLookup[category] = bin;
+
+      bins.push(bin);
+    } else {
+      binLookup[category].items.push(item);
+    }
+  });
+
+  return bins;
+}
+
+function dateCategory(date: Date) {
+  if (isToday(date)) {
+    return 'Today';
+  }
+
+  if (isYesterday(date)) {
+    return 'Yesterday';
+  }
+
+  if (isThisWeek(date)) {
+    // e.g., "Monday"
+    return format(date, 'eeee');
+  }
+
+  const thirtyDaysAgo = subDays(new Date(), 30);
+
+  if (isAfter(date, thirtyDaysAgo)) {
+    return 'Last 30 Days';
+  }
+
+  if (isThisYear(date)) {
+    // e.g., "July"
+    return format(date, 'MMMM');
+  }
+
+  // e.g., "July 2023"
+  return format(date, 'MMMM yyyy');
+}

app/components/ui/Dialog.tsx

@@ -0,0 +1,133 @@
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { motion, type Variants } from 'framer-motion';
+import React, { memo, type ReactNode } from 'react';
+import { classNames } from '~/utils/classNames';
+import { cubicEasingFn } from '~/utils/easings';
+import { IconButton } from './IconButton';
+
+export { Close as DialogClose, Root as DialogRoot } from '@radix-ui/react-dialog';
+
+const transition = {
+  duration: 0.15,
+  ease: cubicEasingFn,
+};
+
+export const dialogBackdropVariants = {
+  closed: {
+    opacity: 0,
+    transition,
+  },
+  open: {
+    opacity: 1,
+    transition,
+  },
+} satisfies Variants;
+
+export const dialogVariants = {
+  closed: {
+    x: '-50%',
+    y: '-40%',
+    scale: 0.96,
+    opacity: 0,
+    transition,
+  },
+  open: {
+    x: '-50%',
+    y: '-50%',
+    scale: 1,
+    opacity: 1,
+    transition,
+  },
+} satisfies Variants;
+
+interface DialogButtonProps {
+  type: 'primary' | 'secondary' | 'danger';
+  children: ReactNode;
+  onClick?: (event: React.UIEvent) => void;
+}
+
+export const DialogButton = memo(({ type, children, onClick }: DialogButtonProps) => {
+  return (
+    <button
+      className={classNames(
+        'inline-flex h-[35px] items-center justify-center rounded-lg px-4 text-sm leading-none focus:outline-none',
+        {
+          'bg-bolt-elements-button-primary-background text-bolt-elements-button-primary-text hover:bg-bolt-elements-button-primary-backgroundHover':
+            type === 'primary',
+          'bg-bolt-elements-button-secondary-background text-bolt-elements-button-secondary-text hover:bg-bolt-elements-button-secondary-backgroundHover':
+            type === 'secondary',
+          'bg-bolt-elements-button-danger-background text-bolt-elements-button-danger-text hover:bg-bolt-elements-button-danger-backgroundHover':
+            type === 'danger',
+        },
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+});
+
+export const DialogTitle = memo(({ className, children, ...props }: RadixDialog.DialogTitleProps) => {
+  return (
+    <RadixDialog.Title
+      className={classNames(
+        'px-5 py-4 flex items-center justify-between border-b border-bolt-elements-borderColor text-lg font-semibold leading-6 text-bolt-elements-textPrimary',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </RadixDialog.Title>
+  );
+});
+
+export const DialogDescription = memo(({ className, children, ...props }: RadixDialog.DialogDescriptionProps) => {
+  return (
+    <RadixDialog.Description
+      className={classNames('px-5 py-4 text-bolt-elements-textPrimary text-md', className)}
+      {...props}
+    >
+      {children}
+    </RadixDialog.Description>
+  );
+});
+
+interface DialogProps {
+  children: ReactNode | ReactNode[];
+  className?: string;
+  onBackdrop?: (event: React.UIEvent) => void;
+  onClose?: (event: React.UIEvent) => void;
+}
+
+export const Dialog = memo(({ className, children, onBackdrop, onClose }: DialogProps) => {
+  return (
+    <RadixDialog.Portal>
+      <RadixDialog.Overlay onClick={onBackdrop} asChild>
+        <motion.div
+          className="bg-black/50 fixed inset-0 z-max"
+          initial="closed"
+          animate="open"
+          exit="closed"
+          variants={dialogBackdropVariants}
+        />
+      </RadixDialog.Overlay>
+      <RadixDialog.Content asChild>
+        <motion.div
+          className={classNames(
+            'fixed top-[50%] left-[50%] z-max max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] border border-bolt-elements-borderColor rounded-lg bg-bolt-elements-background-depth-2 shadow-lg focus:outline-none overflow-hidden',
+            className,
+          )}
+          initial="closed"
+          animate="open"
+          exit="closed"
+          variants={dialogVariants}
+        >
+          {children}
+          <RadixDialog.Close asChild onClick={onClose}>
+            <IconButton icon="i-ph:x" className="absolute top-[10px] right-[10px]" />
+          </RadixDialog.Close>
+        </motion.div>
+      </RadixDialog.Content>
+    </RadixDialog.Portal>
+  );
+});

app/components/ui/IconButton.tsx

@@ -0,0 +1,77 @@
+import { memo } from 'react';
+import { classNames } from '~/utils/classNames';
+
+type IconSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+interface BaseIconButtonProps {
+  size?: IconSize;
+  className?: string;
+  iconClassName?: string;
+  disabledClassName?: string;
+  title?: string;
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+type IconButtonWithoutChildrenProps = {
+  icon: string;
+  children?: undefined;
+} & BaseIconButtonProps;
+
+type IconButtonWithChildrenProps = {
+  icon?: undefined;
+  children: string | JSX.Element | JSX.Element[];
+} & BaseIconButtonProps;
+
+type IconButtonProps = IconButtonWithoutChildrenProps | IconButtonWithChildrenProps;
+
+export const IconButton = memo(
+  ({
+    icon,
+    size = 'xl',
+    className,
+    iconClassName,
+    disabledClassName,
+    disabled = false,
+    title,
+    onClick,
+    children,
+  }: IconButtonProps) => {
+    return (
+      <button
+        className={classNames(
+          'flex items-center text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive rounded-md p-1 enabled:hover:bg-bolt-elements-item-backgroundActive disabled:cursor-not-allowed',
+          {
+            [classNames('opacity-30', disabledClassName)]: disabled,
+          },
+          className,
+        )}
+        title={title}
+        disabled={disabled}
+        onClick={(event) => {
+          if (disabled) {
+            return;
+          }
+
+          onClick?.(event);
+        }}
+      >
+        {children ? children : <div className={classNames(icon, getIconSize(size), iconClassName)}></div>}
+      </button>
+    );
+  },
+);
+
+function getIconSize(size: IconSize) {
+  if (size === 'sm') {
+    return 'text-sm';
+  } else if (size === 'md') {
+    return 'text-md';
+  } else if (size === 'lg') {
+    return 'text-lg';
+  } else if (size === 'xl') {
+    return 'text-xl';
+  } else {
+    return 'text-2xl';
+  }
+}

app/components/ui/LoadingDots.tsx

@@ -0,0 +1,27 @@
+import { memo, useEffect, useState } from 'react';
+
+interface LoadingDotsProps {
+  text: string;
+}
+
+export const LoadingDots = memo(({ text }: LoadingDotsProps) => {
+  const [dotCount, setDotCount] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDotCount((prevDotCount) => (prevDotCount + 1) % 4);
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="flex justify-center items-center h-full">
+      <div className="relative">
+        <span>{text}</span>
+        <span className="absolute left-[calc(100%-12px)]">{'.'.repeat(dotCount)}</span>
+        <span className="invisible">...</span>
+      </div>
+    </div>
+  );
+});

app/components/ui/PanelHeader.tsx

@@ -0,0 +1,20 @@
+import { memo } from 'react';
+import { classNames } from '~/utils/classNames';
+
+interface PanelHeaderProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const PanelHeader = memo(({ className, children }: PanelHeaderProps) => {
+  return (
+    <div
+      className={classNames(
+        'flex items-center gap-2 bg-bolt-elements-background-depth-2 text-bolt-elements-textSecondary border-b border-bolt-elements-borderColor px-4 py-1 min-h-[34px] text-sm',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+});

app/components/ui/PanelHeaderButton.tsx

@@ -0,0 +1,36 @@
+import { memo } from 'react';
+import { classNames } from '~/utils/classNames';
+
+interface PanelHeaderButtonProps {
+  className?: string;
+  disabledClassName?: string;
+  disabled?: boolean;
+  children: string | JSX.Element | Array<JSX.Element | string>;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+export const PanelHeaderButton = memo(
+  ({ className, disabledClassName, disabled = false, children, onClick }: PanelHeaderButtonProps) => {
+    return (
+      <button
+        className={classNames(
+          'flex items-center shrink-0 gap-1.5 px-1.5 rounded-md py-0.5 text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive enabled:hover:bg-bolt-elements-item-backgroundActive disabled:cursor-not-allowed',
+          {
+            [classNames('opacity-30', disabledClassName)]: disabled,
+          },
+          className,
+        )}
+        disabled={disabled}
+        onClick={(event) => {
+          if (disabled) {
+            return;
+          }
+
+          onClick?.(event);
+        }}
+      >
+        {children}
+      </button>
+    );
+  },
+);

app/components/ui/Slider.tsx

@@ -0,0 +1,65 @@
+import { motion } from 'framer-motion';
+import { memo } from 'react';
+import { classNames } from '~/utils/classNames';
+import { cubicEasingFn } from '~/utils/easings';
+import { genericMemo } from '~/utils/react';
+
+interface SliderOption<T> {
+  value: T;
+  text: string;
+}
+
+export interface SliderOptions<T> {
+  left: SliderOption<T>;
+  right: SliderOption<T>;
+}
+
+interface SliderProps<T> {
+  selected: T;
+  options: SliderOptions<T>;
+  setSelected?: (selected: T) => void;
+}
+
+export const Slider = genericMemo(<T,>({ selected, options, setSelected }: SliderProps<T>) => {
+  const isLeftSelected = selected === options.left.value;
+
+  return (
+    <div className="flex items-center flex-wrap shrink-0 gap-1 bg-bolt-elements-background-depth-1 overflow-hidden rounded-full p-1">
+      <SliderButton selected={isLeftSelected} setSelected={() => setSelected?.(options.left.value)}>
+        {options.left.text}
+      </SliderButton>
+      <SliderButton selected={!isLeftSelected} setSelected={() => setSelected?.(options.right.value)}>
+        {options.right.text}
+      </SliderButton>
+    </div>
+  );
+});
+
+interface SliderButtonProps {
+  selected: boolean;
+  children: string | JSX.Element | Array<JSX.Element | string>;
+  setSelected: () => void;
+}
+
+const SliderButton = memo(({ selected, children, setSelected }: SliderButtonProps) => {
+  return (
+    <button
+      onClick={setSelected}
+      className={classNames(
+        'bg-transparent text-sm px-2.5 py-0.5 rounded-full relative',
+        selected
+          ? 'text-bolt-elements-item-contentAccent'
+          : 'text-bolt-elements-item-contentDefault hover:text-bolt-elements-item-contentActive',
+      )}
+    >
+      <span className="relative z-10">{children}</span>
+      {selected && (
+        <motion.span
+          layoutId="pill-tab"
+          transition={{ duration: 0.2, ease: cubicEasingFn }}
+          className="absolute inset-0 z-0 bg-bolt-elements-item-backgroundAccent rounded-full"
+        ></motion.span>
+      )}
+    </button>
+  );
+});

app/components/ui/ThemeSwitch.tsx

@@ -0,0 +1,29 @@
+import { useStore } from '@nanostores/react';
+import { memo, useEffect, useState } from 'react';
+import { themeStore, toggleTheme } from '~/lib/stores/theme';
+import { IconButton } from './IconButton';
+
+interface ThemeSwitchProps {
+  className?: string;
+}
+
+export const ThemeSwitch = memo(({ className }: ThemeSwitchProps) => {
+  const theme = useStore(themeStore);
+  const [domLoaded, setDomLoaded] = useState(false);
+
+  useEffect(() => {
+    setDomLoaded(true);
+  }, []);
+
+  return (
+    domLoaded && (
+      <IconButton
+        className={className}
+        icon={theme === 'dark' ? 'i-ph-sun-dim-duotone' : 'i-ph-moon-stars-duotone'}
+        size="xl"
+        title="Toggle Theme"
+        onClick={toggleTheme}
+      />
+    )
+  );
+});

app/components/workbench/EditorPanel.tsx

@@ -0,0 +1,256 @@
+import { useStore } from '@nanostores/react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { Panel, PanelGroup, PanelResizeHandle, type ImperativePanelHandle } from 'react-resizable-panels';
+import {
+  CodeMirrorEditor,
+  type EditorDocument,
+  type EditorSettings,
+  type OnChangeCallback as OnEditorChange,
+  type OnSaveCallback as OnEditorSave,
+  type OnScrollCallback as OnEditorScroll,
+} from '~/components/editor/codemirror/CodeMirrorEditor';
+import { IconButton } from '~/components/ui/IconButton';
+import { PanelHeader } from '~/components/ui/PanelHeader';
+import { PanelHeaderButton } from '~/components/ui/PanelHeaderButton';
+import { shortcutEventEmitter } from '~/lib/hooks';
+import type { FileMap } from '~/lib/stores/files';
+import { themeStore } from '~/lib/stores/theme';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { classNames } from '~/utils/classNames';
+import { WORK_DIR } from '~/utils/constants';
+import { renderLogger } from '~/utils/logger';
+import { isMobile } from '~/utils/mobile';
+import { FileBreadcrumb } from './FileBreadcrumb';
+import { FileTree } from './FileTree';
+import { Terminal, type TerminalRef } from './terminal/Terminal';
+
+interface EditorPanelProps {
+  files?: FileMap;
+  unsavedFiles?: Set<string>;
+  editorDocument?: EditorDocument;
+  selectedFile?: string | undefined;
+  isStreaming?: boolean;
+  onEditorChange?: OnEditorChange;
+  onEditorScroll?: OnEditorScroll;
+  onFileSelect?: (value?: string) => void;
+  onFileSave?: OnEditorSave;
+  onFileReset?: () => void;
+}
+
+const MAX_TERMINALS = 3;
+const DEFAULT_TERMINAL_SIZE = 25;
+const DEFAULT_EDITOR_SIZE = 100 - DEFAULT_TERMINAL_SIZE;
+
+const editorSettings: EditorSettings = { tabSize: 2 };
+
+export const EditorPanel = memo(
+  ({
+    files,
+    unsavedFiles,
+    editorDocument,
+    selectedFile,
+    isStreaming,
+    onFileSelect,
+    onEditorChange,
+    onEditorScroll,
+    onFileSave,
+    onFileReset,
+  }: EditorPanelProps) => {
+    renderLogger.trace('EditorPanel');
+
+    const theme = useStore(themeStore);
+    const showTerminal = useStore(workbenchStore.showTerminal);
+
+    const terminalRefs = useRef<Array<TerminalRef | null>>([]);
+    const terminalPanelRef = useRef<ImperativePanelHandle>(null);
+    const terminalToggledByShortcut = useRef(false);
+
+    const [activeTerminal, setActiveTerminal] = useState(0);
+    const [terminalCount, setTerminalCount] = useState(1);
+
+    const activeFileSegments = useMemo(() => {
+      if (!editorDocument) {
+        return undefined;
+      }
+
+      return editorDocument.filePath.split('/');
+    }, [editorDocument]);
+
+    const activeFileUnsaved = useMemo(() => {
+      return editorDocument !== undefined && unsavedFiles?.has(editorDocument.filePath);
+    }, [editorDocument, unsavedFiles]);
+
+    useEffect(() => {
+      const unsubscribeFromEventEmitter = shortcutEventEmitter.on('toggleTerminal', () => {
+        terminalToggledByShortcut.current = true;
+      });
+
+      const unsubscribeFromThemeStore = themeStore.subscribe(() => {
+        for (const ref of Object.values(terminalRefs.current)) {
+          ref?.reloadStyles();
+        }
+      });
+
+      return () => {
+        unsubscribeFromEventEmitter();
+        unsubscribeFromThemeStore();
+      };
+    }, []);
+
+    useEffect(() => {
+      const { current: terminal } = terminalPanelRef;
+
+      if (!terminal) {
+        return;
+      }
+
+      const isCollapsed = terminal.isCollapsed();
+
+      if (!showTerminal && !isCollapsed) {
+        terminal.collapse();
+      } else if (showTerminal && isCollapsed) {
+        terminal.resize(DEFAULT_TERMINAL_SIZE);
+      }
+
+      terminalToggledByShortcut.current = false;
+    }, [showTerminal]);
+
+    const addTerminal = () => {
+      if (terminalCount < MAX_TERMINALS) {
+        setTerminalCount(terminalCount + 1);
+        setActiveTerminal(terminalCount);
+      }
+    };
+
+    return (
+      <PanelGroup direction="vertical">
+        <Panel defaultSize={showTerminal ? DEFAULT_EDITOR_SIZE : 100} minSize={20}>
+          <PanelGroup direction="horizontal">
+            <Panel defaultSize={20} minSize={10} collapsible>
+              <div className="flex flex-col border-r border-bolt-elements-borderColor h-full">
+                <PanelHeader>
+                  <div className="i-ph:tree-structure-duotone shrink-0" />
+                  Files
+                </PanelHeader>
+                <FileTree
+                  className="h-full"
+                  files={files}
+                  hideRoot
+                  unsavedFiles={unsavedFiles}
+                  rootFolder={WORK_DIR}
+                  selectedFile={selectedFile}
+                  onFileSelect={onFileSelect}
+                />
+              </div>
+            </Panel>
+            <PanelResizeHandle />
+            <Panel className="flex flex-col" defaultSize={80} minSize={20}>
+              <PanelHeader className="overflow-x-auto">
+                {activeFileSegments?.length && (
+                  <div className="flex items-center flex-1 text-sm">
+                    <FileBreadcrumb pathSegments={activeFileSegments} files={files} onFileSelect={onFileSelect} />
+                    {activeFileUnsaved && (
+                      <div className="flex gap-1 ml-auto -mr-1.5">
+                        <PanelHeaderButton onClick={onFileSave}>
+                          <div className="i-ph:floppy-disk-duotone" />
+                          Save
+                        </PanelHeaderButton>
+                        <PanelHeaderButton onClick={onFileReset}>
+                          <div className="i-ph:clock-counter-clockwise-duotone" />
+                          Reset
+                        </PanelHeaderButton>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </PanelHeader>
+              <div className="h-full flex-1 overflow-hidden">
+                <CodeMirrorEditor
+                  theme={theme}
+                  editable={!isStreaming && editorDocument !== undefined}
+                  settings={editorSettings}
+                  doc={editorDocument}
+                  autoFocusOnDocumentChange={!isMobile()}
+                  onScroll={onEditorScroll}
+                  onChange={onEditorChange}
+                  onSave={onFileSave}
+                />
+              </div>
+            </Panel>
+          </PanelGroup>
+        </Panel>
+        <PanelResizeHandle />
+        <Panel
+          ref={terminalPanelRef}
+          defaultSize={showTerminal ? DEFAULT_TERMINAL_SIZE : 0}
+          minSize={10}
+          collapsible
+          onExpand={() => {
+            if (!terminalToggledByShortcut.current) {
+              workbenchStore.toggleTerminal(true);
+            }
+          }}
+          onCollapse={() => {
+            if (!terminalToggledByShortcut.current) {
+              workbenchStore.toggleTerminal(false);
+            }
+          }}
+        >
+          <div className="h-full">
+            <div className="bg-bolt-elements-terminals-background h-full flex flex-col">
+              <div className="flex items-center bg-bolt-elements-background-depth-2 border-y border-bolt-elements-borderColor gap-1.5 min-h-[34px] p-2">
+                {Array.from({ length: terminalCount }, (_, index) => {
+                  const isActive = activeTerminal === index;
+
+                  return (
+                    <button
+                      key={index}
+                      className={classNames(
+                        'flex items-center text-sm cursor-pointer gap-1.5 px-3 py-2 h-full whitespace-nowrap rounded-full',
+                        {
+                          'bg-bolt-elements-terminals-buttonBackground text-bolt-elements-textPrimary': isActive,
+                          'bg-bolt-elements-background-depth-2 text-bolt-elements-textSecondary hover:bg-bolt-elements-terminals-buttonBackground':
+                            !isActive,
+                        },
+                      )}
+                      onClick={() => setActiveTerminal(index)}
+                    >
+                      <div className="i-ph:terminal-window-duotone text-lg" />
+                      Terminal {terminalCount > 1 && index + 1}
+                    </button>
+                  );
+                })}
+                {terminalCount < MAX_TERMINALS && <IconButton icon="i-ph:plus" size="md" onClick={addTerminal} />}
+                <IconButton
+                  className="ml-auto"
+                  icon="i-ph:caret-down"
+                  title="Close"
+                  size="md"
+                  onClick={() => workbenchStore.toggleTerminal(false)}
+                />
+              </div>
+              {Array.from({ length: terminalCount }, (_, index) => {
+                const isActive = activeTerminal === index;
+
+                return (
+                  <Terminal
+                    key={index}
+                    className={classNames('h-full overflow-hidden', {
+                      hidden: !isActive,
+                    })}
+                    ref={(ref) => {
+                      terminalRefs.current.push(ref);
+                    }}
+                    onTerminalReady={(terminal) => workbenchStore.attachTerminal(terminal)}
+                    onTerminalResize={(cols, rows) => workbenchStore.onTerminalResize(cols, rows)}
+                    theme={theme}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        </Panel>
+      </PanelGroup>
+    );
+  },
+);

app/components/workbench/FileBreadcrumb.tsx

@@ -0,0 +1,148 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { AnimatePresence, motion, type Variants } from 'framer-motion';
+import { memo, useEffect, useRef, useState } from 'react';
+import type { FileMap } from '~/lib/stores/files';
+import { classNames } from '~/utils/classNames';
+import { WORK_DIR } from '~/utils/constants';
+import { cubicEasingFn } from '~/utils/easings';
+import { renderLogger } from '~/utils/logger';
+import FileTree from './FileTree';
+
+const WORK_DIR_REGEX = new RegExp(`^${WORK_DIR.split('/').slice(0, -1).join('/').replaceAll('/', '\\/')}/`);
+
+interface FileBreadcrumbProps {
+  files?: FileMap;
+  pathSegments?: string[];
+  onFileSelect?: (filePath: string) => void;
+}
+
+const contextMenuVariants = {
+  open: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 0.15,
+      ease: cubicEasingFn,
+    },
+  },
+  close: {
+    y: 6,
+    opacity: 0,
+    transition: {
+      duration: 0.15,
+      ease: cubicEasingFn,
+    },
+  },
+} satisfies Variants;
+
+export const FileBreadcrumb = memo<FileBreadcrumbProps>(({ files, pathSegments = [], onFileSelect }) => {
+  renderLogger.trace('FileBreadcrumb');
+
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const contextMenuRef = useRef<HTMLDivElement | null>(null);
+  const segmentRefs = useRef<(HTMLSpanElement | null)[]>([]);
+
+  const handleSegmentClick = (index: number) => {
+    setActiveIndex((prevIndex) => (prevIndex === index ? null : index));
+  };
+
+  useEffect(() => {
+    const handleOutsideClick = (event: MouseEvent) => {
+      if (
+        activeIndex !== null &&
+        !contextMenuRef.current?.contains(event.target as Node) &&
+        !segmentRefs.current.some((ref) => ref?.contains(event.target as Node))
+      ) {
+        setActiveIndex(null);
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutsideClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, [activeIndex]);
+
+  if (files === undefined || pathSegments.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex">
+      {pathSegments.map((segment, index) => {
+        const isLast = index === pathSegments.length - 1;
+
+        const path = pathSegments.slice(0, index).join('/');
+
+        if (!WORK_DIR_REGEX.test(path)) {
+          return null;
+        }
+
+        const isActive = activeIndex === index;
+
+        return (
+          <div key={index} className="relative flex items-center">
+            <DropdownMenu.Root open={isActive} modal={false}>
+              <DropdownMenu.Trigger asChild>
+                <span
+                  ref={(ref) => (segmentRefs.current[index] = ref)}
+                  className={classNames('flex items-center gap-1.5 cursor-pointer shrink-0', {
+                    'text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary': !isActive,
+                    'text-bolt-elements-textPrimary underline': isActive,
+                    'pr-4': isLast,
+                  })}
+                  onClick={() => handleSegmentClick(index)}
+                >
+                  {isLast && <div className="i-ph:file-duotone" />}
+                  {segment}
+                </span>
+              </DropdownMenu.Trigger>
+              {index > 0 && !isLast && <span className="i-ph:caret-right inline-block mx-1" />}
+              <AnimatePresence>
+                {isActive && (
+                  <DropdownMenu.Portal>
+                    <DropdownMenu.Content
+                      className="z-file-tree-breadcrumb"
+                      asChild
+                      align="start"
+                      side="bottom"
+                      avoidCollisions={false}
+                    >
+                      <motion.div
+                        ref={contextMenuRef}
+                        initial="close"
+                        animate="open"
+                        exit="close"
+                        variants={contextMenuVariants}
+                      >
+                        <div className="rounded-lg overflow-hidden">
+                          <div className="max-h-[50vh] min-w-[300px] overflow-scroll bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor shadow-sm rounded-lg">
+                            <FileTree
+                              files={files}
+                              hideRoot
+                              rootFolder={path}
+                              collapsed
+                              allowFolderSelection
+                              selectedFile={`${path}/${segment}`}
+                              onFileSelect={(filePath) => {
+                                setActiveIndex(null);
+                                onFileSelect?.(filePath);
+                              }}
+                            />
+                          </div>
+                        </div>
+                        <DropdownMenu.Arrow className="fill-bolt-elements-borderColor" />
+                      </motion.div>
+                    </DropdownMenu.Content>
+                  </DropdownMenu.Portal>
+                )}
+              </AnimatePresence>
+            </DropdownMenu.Root>
+          </div>
+        );
+      })}
+    </div>
+  );
+});

app/components/workbench/FileTree.tsx

@@ -0,0 +1,409 @@
+import { memo, useEffect, useMemo, useState, type ReactNode } from 'react';
+import type { FileMap } from '~/lib/stores/files';
+import { classNames } from '~/utils/classNames';
+import { createScopedLogger, renderLogger } from '~/utils/logger';
+
+const logger = createScopedLogger('FileTree');
+
+const NODE_PADDING_LEFT = 8;
+const DEFAULT_HIDDEN_FILES = [/\/node_modules\//, /\/\.next/, /\/\.astro/];
+
+interface Props {
+  files?: FileMap;
+  selectedFile?: string;
+  onFileSelect?: (filePath: string) => void;
+  rootFolder?: string;
+  hideRoot?: boolean;
+  collapsed?: boolean;
+  allowFolderSelection?: boolean;
+  hiddenFiles?: Array<string | RegExp>;
+  unsavedFiles?: Set<string>;
+  className?: string;
+}
+
+export const FileTree = memo(
+  ({
+    files = {},
+    onFileSelect,
+    selectedFile,
+    rootFolder,
+    hideRoot = false,
+    collapsed = false,
+    allowFolderSelection = false,
+    hiddenFiles,
+    className,
+    unsavedFiles,
+  }: Props) => {
+    renderLogger.trace('FileTree');
+
+    const computedHiddenFiles = useMemo(() => [...DEFAULT_HIDDEN_FILES, ...(hiddenFiles ?? [])], [hiddenFiles]);
+
+    const fileList = useMemo(() => {
+      return buildFileList(files, rootFolder, hideRoot, computedHiddenFiles);
+    }, [files, rootFolder, hideRoot, computedHiddenFiles]);
+
+    const [collapsedFolders, setCollapsedFolders] = useState(() => {
+      return collapsed
+        ? new Set(fileList.filter((item) => item.kind === 'folder').map((item) => item.fullPath))
+        : new Set<string>();
+    });
+
+    useEffect(() => {
+      if (collapsed) {
+        setCollapsedFolders(new Set(fileList.filter((item) => item.kind === 'folder').map((item) => item.fullPath)));
+        return;
+      }
+
+      setCollapsedFolders((prevCollapsed) => {
+        const newCollapsed = new Set<string>();
+
+        for (const folder of fileList) {
+          if (folder.kind === 'folder' && prevCollapsed.has(folder.fullPath)) {
+            newCollapsed.add(folder.fullPath);
+          }
+        }
+
+        return newCollapsed;
+      });
+    }, [fileList, collapsed]);
+
+    const filteredFileList = useMemo(() => {
+      const list = [];
+
+      let lastDepth = Number.MAX_SAFE_INTEGER;
+
+      for (const fileOrFolder of fileList) {
+        const depth = fileOrFolder.depth;
+
+        // if the depth is equal we reached the end of the collaped group
+        if (lastDepth === depth) {
+          lastDepth = Number.MAX_SAFE_INTEGER;
+        }
+
+        // ignore collapsed folders
+        if (collapsedFolders.has(fileOrFolder.fullPath)) {
+          lastDepth = Math.min(lastDepth, depth);
+        }
+
+        // ignore files and folders below the last collapsed folder
+        if (lastDepth < depth) {
+          continue;
+        }
+
+        list.push(fileOrFolder);
+      }
+
+      return list;
+    }, [fileList, collapsedFolders]);
+
+    const toggleCollapseState = (fullPath: string) => {
+      setCollapsedFolders((prevSet) => {
+        const newSet = new Set(prevSet);
+
+        if (newSet.has(fullPath)) {
+          newSet.delete(fullPath);
+        } else {
+          newSet.add(fullPath);
+        }
+
+        return newSet;
+      });
+    };
+
+    return (
+      <div className={classNames('text-sm', className)}>
+        {filteredFileList.map((fileOrFolder) => {
+          switch (fileOrFolder.kind) {
+            case 'file': {
+              return (
+                <File
+                  key={fileOrFolder.id}
+                  selected={selectedFile === fileOrFolder.fullPath}
+                  file={fileOrFolder}
+                  unsavedChanges={unsavedFiles?.has(fileOrFolder.fullPath)}
+                  onClick={() => {
+                    onFileSelect?.(fileOrFolder.fullPath);
+                  }}
+                />
+              );
+            }
+            case 'folder': {
+              return (
+                <Folder
+                  key={fileOrFolder.id}
+                  folder={fileOrFolder}
+                  selected={allowFolderSelection && selectedFile === fileOrFolder.fullPath}
+                  collapsed={collapsedFolders.has(fileOrFolder.fullPath)}
+                  onClick={() => {
+                    toggleCollapseState(fileOrFolder.fullPath);
+                  }}
+                />
+              );
+            }
+            default: {
+              return undefined;
+            }
+          }
+        })}
+      </div>
+    );
+  },
+);
+
+export default FileTree;
+
+interface FolderProps {
+  folder: FolderNode;
+  collapsed: boolean;
+  selected?: boolean;
+  onClick: () => void;
+}
+
+function Folder({ folder: { depth, name }, collapsed, selected = false, onClick }: FolderProps) {
+  return (
+    <NodeButton
+      className={classNames('group', {
+        'bg-transparent text-bolt-elements-item-contentDefault hover:text-bolt-elements-item-contentActive hover:bg-bolt-elements-item-backgroundActive':
+          !selected,
+        'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': selected,
+      })}
+      depth={depth}
+      iconClasses={classNames({
+        'i-ph:caret-right scale-98': collapsed,
+        'i-ph:caret-down scale-98': !collapsed,
+      })}
+      onClick={onClick}
+    >
+      {name}
+    </NodeButton>
+  );
+}
+
+interface FileProps {
+  file: FileNode;
+  selected: boolean;
+  unsavedChanges?: boolean;
+  onClick: () => void;
+}
+
+function File({ file: { depth, name }, onClick, selected, unsavedChanges = false }: FileProps) {
+  return (
+    <NodeButton
+      className={classNames('group', {
+        'bg-transparent hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-item-contentDefault': !selected,
+        'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': selected,
+      })}
+      depth={depth}
+      iconClasses={classNames('i-ph:file-duotone scale-98', {
+        'group-hover:text-bolt-elements-item-contentActive': !selected,
+      })}
+      onClick={onClick}
+    >
+      <div
+        className={classNames('flex items-center', {
+          'group-hover:text-bolt-elements-item-contentActive': !selected,
+        })}
+      >
+        <div className="flex-1 truncate pr-2">{name}</div>
+        {unsavedChanges && <span className="i-ph:circle-fill scale-68 shrink-0 text-orange-500" />}
+      </div>
+    </NodeButton>
+  );
+}
+
+interface ButtonProps {
+  depth: number;
+  iconClasses: string;
+  children: ReactNode;
+  className?: string;
+  onClick?: () => void;
+}
+
+function NodeButton({ depth, iconClasses, onClick, className, children }: ButtonProps) {
+  return (
+    <button
+      className={classNames(
+        'flex items-center gap-1.5 w-full pr-2 border-2 border-transparent text-faded py-0.5',
+        className,
+      )}
+      style={{ paddingLeft: `${6 + depth * NODE_PADDING_LEFT}px` }}
+      onClick={() => onClick?.()}
+    >
+      <div className={classNames('scale-120 shrink-0', iconClasses)}></div>
+      <div className="truncate w-full text-left">{children}</div>
+    </button>
+  );
+}
+
+type Node = FileNode | FolderNode;
+
+interface BaseNode {
+  id: number;
+  depth: number;
+  name: string;
+  fullPath: string;
+}
+
+interface FileNode extends BaseNode {
+  kind: 'file';
+}
+
+interface FolderNode extends BaseNode {
+  kind: 'folder';
+}
+
+function buildFileList(
+  files: FileMap,
+  rootFolder = '/',
+  hideRoot: boolean,
+  hiddenFiles: Array<string | RegExp>,
+): Node[] {
+  const folderPaths = new Set<string>();
+  const fileList: Node[] = [];
+
+  let defaultDepth = 0;
+
+  if (rootFolder === '/' && !hideRoot) {
+    defaultDepth = 1;
+    fileList.push({ kind: 'folder', name: '/', depth: 0, id: 0, fullPath: '/' });
+  }
+
+  for (const [filePath, dirent] of Object.entries(files)) {
+    const segments = filePath.split('/').filter((segment) => segment);
+    const fileName = segments.at(-1);
+
+    if (!fileName || isHiddenFile(filePath, fileName, hiddenFiles)) {
+      continue;
+    }
+
+    let currentPath = '';
+
+    let i = 0;
+    let depth = 0;
+
+    while (i < segments.length) {
+      const name = segments[i];
+      const fullPath = (currentPath += `/${name}`);
+
+      if (!fullPath.startsWith(rootFolder) || (hideRoot && fullPath === rootFolder)) {
+        i++;
+        continue;
+      }
+
+      if (i === segments.length - 1 && dirent?.type === 'file') {
+        fileList.push({
+          kind: 'file',
+          id: fileList.length,
+          name,
+          fullPath,
+          depth: depth + defaultDepth,
+        });
+      } else if (!folderPaths.has(fullPath)) {
+        folderPaths.add(fullPath);
+
+        fileList.push({
+          kind: 'folder',
+          id: fileList.length,
+          name,
+          fullPath,
+          depth: depth + defaultDepth,
+        });
+      }
+
+      i++;
+      depth++;
+    }
+  }
+
+  return sortFileList(rootFolder, fileList, hideRoot);
+}
+
+function isHiddenFile(filePath: string, fileName: string, hiddenFiles: Array<string | RegExp>) {
+  return hiddenFiles.some((pathOrRegex) => {
+    if (typeof pathOrRegex === 'string') {
+      return fileName === pathOrRegex;
+    }
+
+    return pathOrRegex.test(filePath);
+  });
+}
+
+/**
+ * Sorts the given list of nodes into a tree structure (still a flat list).
+ *
+ * This function organizes the nodes into a hierarchical structure based on their paths,
+ * with folders appearing before files and all items sorted alphabetically within their level.
+ *
+ * @note This function mutates the given `nodeList` array for performance reasons.
+ *
+ * @param rootFolder - The path of the root folder to start the sorting from.
+ * @param nodeList - The list of nodes to be sorted.
+ *
+ * @returns A new array of nodes sorted in depth-first order.
+ */
+function sortFileList(rootFolder: string, nodeList: Node[], hideRoot: boolean): Node[] {
+  logger.trace('sortFileList');
+
+  const nodeMap = new Map<string, Node>();
+  const childrenMap = new Map<string, Node[]>();
+
+  // pre-sort nodes by name and type
+  nodeList.sort((a, b) => compareNodes(a, b));
+
+  for (const node of nodeList) {
+    nodeMap.set(node.fullPath, node);
+
+    const parentPath = node.fullPath.slice(0, node.fullPath.lastIndexOf('/'));
+
+    if (parentPath !== rootFolder.slice(0, rootFolder.lastIndexOf('/'))) {
+      if (!childrenMap.has(parentPath)) {
+        childrenMap.set(parentPath, []);
+      }
+
+      childrenMap.get(parentPath)?.push(node);
+    }
+  }
+
+  const sortedList: Node[] = [];
+
+  const depthFirstTraversal = (path: string): void => {
+    const node = nodeMap.get(path);
+
+    if (node) {
+      sortedList.push(node);
+    }
+
+    const children = childrenMap.get(path);
+
+    if (children) {
+      for (const child of children) {
+        if (child.kind === 'folder') {
+          depthFirstTraversal(child.fullPath);
+        } else {
+          sortedList.push(child);
+        }
+      }
+    }
+  };
+
+  if (hideRoot) {
+    // if root is hidden, start traversal from its immediate children
+    const rootChildren = childrenMap.get(rootFolder) || [];
+
+    for (const child of rootChildren) {
+      depthFirstTraversal(child.fullPath);
+    }
+  } else {
+    depthFirstTraversal(rootFolder);
+  }
+
+  return sortedList;
+}
+
+function compareNodes(a: Node, b: Node): number {
+  if (a.kind !== b.kind) {
+    return a.kind === 'folder' ? -1 : 1;
+  }
+
+  return a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' });
+}