sync Dockerfile as well

.gitattributes

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -1,15 +1,15 @@
 ARG BASE=node:20.18.0
 FROM ${BASE} AS base
 
-# Ensure root user
-USER root
-
 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
+#RUN npm install -g corepack@latest
+
+#RUN corepack enable pnpm && pnpm install
+RUN npm install -g pnpm && pnpm install
 
 # Copy the rest of your app's source code
 COPY . .
@@ -17,54 +17,51 @@ COPY . .
 # Expose the port the app runs on
 EXPOSE 5173
 
-# # Production image
-# FROM base AS bolt-ai-production
-
-# # Ensure root user
-# USER root
-
-# # Define environment variables with default values or let them be overridden
-# ARG GROQ_API_KEY
-# ARG HuggingFace_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 XAI_API_KEY
-# ARG TOGETHER_API_KEY
-# ARG TOGETHER_API_BASE_URL
-# ARG VITE_LOG_LEVEL=debug
-# ARG DEFAULT_NUM_CTX
-
-# ENV WRANGLER_SEND_METRICS=false \
-#     GROQ_API_KEY=${GROQ_API_KEY} \
-#     HuggingFace_KEY=${HuggingFace_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} \
-#     XAI_API_KEY=${XAI_API_KEY} \
-#     TOGETHER_API_KEY=${TOGETHER_API_KEY} \
-#     TOGETHER_API_BASE_URL=${TOGETHER_API_BASE_URL} \
-#     VITE_LOG_LEVEL=${VITE_LOG_LEVEL} \
-#     DEFAULT_NUM_CTX=${DEFAULT_NUM_CTX}
-
-# # Pre-configure wrangler to disable metrics
-# RUN mkdir -p /root/.config/.wrangler && \
-#     echo '{"enabled":false}' > /root/.config/.wrangler/metrics.json
-
-# RUN npm run build
-# RUN chmod -R 777 /app
-# CMD [ "pnpm", "run", "dockerstart"]
+# Production image
+FROM base AS bolt-ai-production
+
+# Define environment variables with default values or let them be overridden
+ARG GROQ_API_KEY
+ARG HuggingFace_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 XAI_API_KEY
+ARG TOGETHER_API_KEY
+ARG TOGETHER_API_BASE_URL
+ARG AWS_BEDROCK_CONFIG
+ARG VITE_LOG_LEVEL=debug
+ARG DEFAULT_NUM_CTX
+
+ENV WRANGLER_SEND_METRICS=false \
+    GROQ_API_KEY=${GROQ_API_KEY} \
+    HuggingFace_KEY=${HuggingFace_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} \
+    XAI_API_KEY=${XAI_API_KEY} \
+    TOGETHER_API_KEY=${TOGETHER_API_KEY} \
+    TOGETHER_API_BASE_URL=${TOGETHER_API_BASE_URL} \
+    AWS_BEDROCK_CONFIG=${AWS_BEDROCK_CONFIG} \
+    VITE_LOG_LEVEL=${VITE_LOG_LEVEL} \
+    DEFAULT_NUM_CTX=${DEFAULT_NUM_CTX}\
+    RUNNING_IN_DOCKER=true
+
+# Pre-configure wrangler to disable metrics
+RUN mkdir -p /root/.config/.wrangler && \
+    echo '{"enabled":false}' > /root/.config/.wrangler/metrics.json
+
+RUN pnpm run build
+
+CMD [ "pnpm", "run", "dockerstart"]
 
 # Development image
 FROM base AS bolt-ai-development
 
-# Ensure root user
-USER root
-
 # Define the same environment variables for development
 ARG GROQ_API_KEY
 ARG HuggingFace 
@@ -89,9 +86,10 @@ ENV GROQ_API_KEY=${GROQ_API_KEY} \
     XAI_API_KEY=${XAI_API_KEY} \
     TOGETHER_API_KEY=${TOGETHER_API_KEY} \
     TOGETHER_API_BASE_URL=${TOGETHER_API_BASE_URL} \
+    AWS_BEDROCK_CONFIG=${AWS_BEDROCK_CONFIG} \
     VITE_LOG_LEVEL=${VITE_LOG_LEVEL} \
-    DEFAULT_NUM_CTX=${DEFAULT_NUM_CTX}
+    DEFAULT_NUM_CTX=${DEFAULT_NUM_CTX}\
+    RUNNING_IN_DOCKER=true
 
 RUN mkdir -p ${WORKDIR}/run
-RUN chmod -R 777 /app
 CMD pnpm run dev --host

README.md

@@ -89,6 +89,7 @@ project, please check the [project management guide](./PROJECT.md) to get starte
 - ✅ Add Starter Template Options (@thecodacus)
 - ✅ Perplexity Integration (@meetpateltech)
 - ✅ AWS Bedrock Integration (@kunjabijukchhe)
+- ✅ Add a "Diff View" to see the changes (@toddyclipsgg)
 - ⬜ **HIGH PRIORITY** - Prevent bolt from rewriting files as often (file locking and diffs)
 - ⬜ **HIGH PRIORITY** - Better prompting for smaller LLMs (code window sometimes doesn't start)
 - ⬜ **HIGH PRIORITY** - Run agents in the backend as opposed to a single model call
@@ -174,9 +175,7 @@ You have two options for running Bolt.DIY: directly on your machine or using Doc
    ```bash
    pnpm run dev
    ```
-
-   **Important Note**: If you're using Google Chrome, you'll need Chrome Canary for local development. [Download it here](https://www.google.com/chrome/canary/)
-
+   
 ### Option 2: Using Docker
 
 This option requires some familiarity with Docker but provides a more isolated environment.

app/components/chat/ApiKeyWarning.tsx

@@ -1,23 +0,0 @@
-export const ApiKeyWarning: React.FC<ApiKeyWarningProps> = ({ provider, apiKeys }) => {
-    // Add a null check for provider before accessing its name
-    const isApiKeyMissing = !provider || !apiKeys[provider.name];
-  
-    if (!isApiKeyMissing) return null;
-  
-    return (
-      <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4">
-        <div className="flex">
-          <div className="flex-shrink-0">
-            <div className="i-ph:warning-circle text-yellow-400 text-2xl" />
-          </div>
-          <div className="ml-3">
-            <p className="text-sm text-yellow-700">
-              {provider 
-                ? `API key is missing for ${provider.name}. Please add an API key in the settings to send messages.`
-                : 'No provider selected. Please select a provider and add an API key.'}
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-  };

app/components/settings/Settings.module.scss

@@ -1,63 +0,0 @@
-.settings-tabs {
-  button {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-    text-align: left;
-    font-size: 0.875rem;
-    transition: all 0.2s;
-    margin-bottom: 0.5rem;
-
-    &.active {
-      background: var(--bolt-elements-button-primary-background);
-      color: var(--bolt-elements-textPrimary);
-    }
-
-    &:not(.active) {
-      background: var(--bolt-elements-bg-depth-3);
-      color: var(--bolt-elements-textPrimary);
-
-      &:hover {
-        background: var(--bolt-elements-button-primary-backgroundHover);
-      }
-    }
-  }
-}
-
-.settings-button {
-  background-color: var(--bolt-elements-button-primary-background);
-  color: var(--bolt-elements-textPrimary);
-  border-radius: 0.5rem;
-  padding: 0.5rem 1rem;
-  transition: background-color 0.2s;
-
-  &:hover {
-    background-color: var(--bolt-elements-button-primary-backgroundHover);
-  }
-}
-
-.settings-danger-area {
-  background-color: transparent;
-  color: var(--bolt-elements-textPrimary);
-  border-radius: 0.5rem;
-  padding: 1rem;
-  margin-bottom: 1rem;
-  border-style: solid;
-  border-color: var(--bolt-elements-button-danger-backgroundHover);
-  border-width: thin;
-
-  button {
-    background-color: var(--bolt-elements-button-danger-background);
-    color: var(--bolt-elements-button-danger-text);
-    border-radius: 0.5rem;
-    padding: 0.5rem 1rem;
-    transition: background-color 0.2s;
-
-    &:hover {
-      background-color: var(--bolt-elements-button-danger-backgroundHover);
-    }
-  }
-}

app/components/settings/SettingsWindow.tsx

@@ -1,128 +0,0 @@
-import * as RadixDialog from '@radix-ui/react-dialog';
-import { motion } from 'framer-motion';
-import { useState, type ReactElement } from 'react';
-import { classNames } from '~/utils/classNames';
-import { DialogTitle, dialogVariants, dialogBackdropVariants } from '~/components/ui/Dialog';
-import { IconButton } from '~/components/ui/IconButton';
-import styles from './Settings.module.scss';
-import ProvidersTab from './providers/ProvidersTab';
-import { useSettings } from '~/lib/hooks/useSettings';
-import FeaturesTab from './features/FeaturesTab';
-import DebugTab from './debug/DebugTab';
-import EventLogsTab from './event-logs/EventLogsTab';
-import ConnectionsTab from './connections/ConnectionsTab';
-import DataTab from './data/DataTab';
-
-interface SettingsProps {
-  open: boolean;
-  onClose: () => void;
-}
-
-type TabType = 'data' | 'providers' | 'features' | 'debug' | 'event-logs' | 'connection';
-
-export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
-  const { debug, eventLogs } = useSettings();
-  const [activeTab, setActiveTab] = useState<TabType>('data');
-
-  const tabs: { id: TabType; label: string; icon: string; component?: ReactElement }[] = [
-    { id: 'data', label: 'Data', icon: 'i-ph:database', component: <DataTab /> },
-    { id: 'providers', label: 'Providers', icon: 'i-ph:key', component: <ProvidersTab /> },
-    { id: 'connection', label: 'Connection', icon: 'i-ph:link', component: <ConnectionsTab /> },
-    { id: 'features', label: 'Features', icon: 'i-ph:star', component: <FeaturesTab /> },
-    ...(debug
-      ? [
-          {
-            id: 'debug' as TabType,
-            label: 'Debug Tab',
-            icon: 'i-ph:bug',
-            component: <DebugTab />,
-          },
-        ]
-      : []),
-    ...(eventLogs
-      ? [
-          {
-            id: 'event-logs' as TabType,
-            label: 'Event Logs',
-            icon: 'i-ph:list-bullets',
-            component: <EventLogsTab />,
-          },
-        ]
-      : []),
-  ];
-
-  return (
-    <RadixDialog.Root open={open}>
-      <RadixDialog.Portal>
-        <RadixDialog.Overlay asChild onClick={onClose}>
-          <motion.div
-            className="bg-black/50 fixed inset-0 z-max backdrop-blur-sm"
-            initial="closed"
-            animate="open"
-            exit="closed"
-            variants={dialogBackdropVariants}
-          />
-        </RadixDialog.Overlay>
-        <RadixDialog.Content aria-describedby={undefined} asChild>
-          <motion.div
-            className="fixed top-[50%] left-[50%] z-max h-[85vh] w-[90vw] max-w-[900px] translate-x-[-50%] translate-y-[-50%] border border-bolt-elements-borderColor rounded-lg shadow-lg focus:outline-none overflow-hidden"
-            initial="closed"
-            animate="open"
-            exit="closed"
-            variants={dialogVariants}
-          >
-            <div className="flex h-full">
-              <div
-                className={classNames(
-                  'w-48 border-r border-bolt-elements-borderColor bg-bolt-elements-background-depth-1 p-4 flex flex-col justify-between',
-                  styles['settings-tabs'],
-                )}
-              >
-                <DialogTitle className="flex-shrink-0 text-lg font-semibold text-bolt-elements-textPrimary mb-2">
-                  Settings
-                </DialogTitle>
-                {tabs.map((tab) => (
-                  <button
-                    key={tab.id}
-                    onClick={() => setActiveTab(tab.id)}
-                    className={classNames(activeTab === tab.id ? styles.active : '')}
-                  >
-                    <div className={tab.icon} />
-                    {tab.label}
-                  </button>
-                ))}
-                <div className="mt-auto flex flex-col gap-2">
-                  <a
-                    href="https://github.com/stackblitz-labs/bolt.diy"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className={classNames(styles['settings-button'], 'flex items-center gap-2')}
-                  >
-                    <div className="i-ph:github-logo" />
-                    GitHub
-                  </a>
-                  <a
-                    href="https://stackblitz-labs.github.io/bolt.diy/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className={classNames(styles['settings-button'], 'flex items-center gap-2')}
-                  >
-                    <div className="i-ph:book" />
-                    Docs
-                  </a>
-                </div>
-              </div>
-
-              <div className="flex-1 flex flex-col p-8 pt-10 bg-bolt-elements-background-depth-2">
-                <div className="flex-1 overflow-y-auto">{tabs.find((tab) => tab.id === activeTab)?.component}</div>
-              </div>
-            </div>
-            <RadixDialog.Close asChild onClick={onClose}>
-              <IconButton icon="i-ph:x" className="absolute top-[10px] right-[10px]" />
-            </RadixDialog.Close>
-          </motion.div>
-        </RadixDialog.Content>
-      </RadixDialog.Portal>
-    </RadixDialog.Root>
-  );
-};

app/components/settings/connections/ConnectionsTab.tsx

@@ -1,151 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { toast } from 'react-toastify';
-import Cookies from 'js-cookie';
-import { logStore } from '~/lib/stores/logs';
-
-interface GitHubUserResponse {
-  login: string;
-  id: number;
-  [key: string]: any; // for other properties we don't explicitly need
-}
-
-export default function ConnectionsTab() {
-  const [githubUsername, setGithubUsername] = useState(Cookies.get('githubUsername') || '');
-  const [githubToken, setGithubToken] = useState(Cookies.get('githubToken') || '');
-  const [isConnected, setIsConnected] = useState(false);
-  const [isVerifying, setIsVerifying] = useState(false);
-
-  useEffect(() => {
-    // Check if credentials exist and verify them
-    if (githubUsername && githubToken) {
-      verifyGitHubCredentials();
-    }
-  }, []);
-
-  const verifyGitHubCredentials = async () => {
-    setIsVerifying(true);
-
-    try {
-      const response = await fetch('https://api.github.com/user', {
-        headers: {
-          Authorization: `Bearer ${githubToken}`,
-        },
-      });
-
-      if (response.ok) {
-        const data = (await response.json()) as GitHubUserResponse;
-
-        if (data.login === githubUsername) {
-          setIsConnected(true);
-          return true;
-        }
-      }
-
-      setIsConnected(false);
-
-      return false;
-    } catch (error) {
-      console.error('Error verifying GitHub credentials:', error);
-      setIsConnected(false);
-
-      return false;
-    } finally {
-      setIsVerifying(false);
-    }
-  };
-
-  const handleSaveConnection = async () => {
-    if (!githubUsername || !githubToken) {
-      toast.error('Please provide both GitHub username and token');
-      return;
-    }
-
-    setIsVerifying(true);
-
-    const isValid = await verifyGitHubCredentials();
-
-    if (isValid) {
-      Cookies.set('githubUsername', githubUsername);
-      Cookies.set('githubToken', githubToken);
-      logStore.logSystem('GitHub connection settings updated', {
-        username: githubUsername,
-        hasToken: !!githubToken,
-      });
-      toast.success('GitHub credentials verified and saved successfully!');
-      Cookies.set('git:github.com', JSON.stringify({ username: githubToken, password: 'x-oauth-basic' }));
-      setIsConnected(true);
-    } else {
-      toast.error('Invalid GitHub credentials. Please check your username and token.');
-    }
-  };
-
-  const handleDisconnect = () => {
-    Cookies.remove('githubUsername');
-    Cookies.remove('githubToken');
-    Cookies.remove('git:github.com');
-    setGithubUsername('');
-    setGithubToken('');
-    setIsConnected(false);
-    logStore.logSystem('GitHub connection removed');
-    toast.success('GitHub connection removed successfully!');
-  };
-
-  return (
-    <div className="p-4 mb-4 border border-bolt-elements-borderColor rounded-lg bg-bolt-elements-background-depth-3">
-      <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">GitHub Connection</h3>
-      <div className="flex mb-4">
-        <div className="flex-1 mr-2">
-          <label className="block text-sm text-bolt-elements-textSecondary mb-1">GitHub Username:</label>
-          <input
-            type="text"
-            value={githubUsername}
-            onChange={(e) => setGithubUsername(e.target.value)}
-            disabled={isVerifying}
-            className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor disabled:opacity-50"
-          />
-        </div>
-        <div className="flex-1">
-          <label className="block text-sm text-bolt-elements-textSecondary mb-1">Personal Access Token:</label>
-          <input
-            type="password"
-            value={githubToken}
-            onChange={(e) => setGithubToken(e.target.value)}
-            disabled={isVerifying}
-            className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor disabled:opacity-50"
-          />
-        </div>
-      </div>
-      <div className="flex mb-4 items-center">
-        {!isConnected ? (
-          <button
-            onClick={handleSaveConnection}
-            disabled={isVerifying || !githubUsername || !githubToken}
-            className="bg-bolt-elements-button-primary-background rounded-lg px-4 py-2 mr-2 transition-colors duration-200 hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-button-primary-text disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
-          >
-            {isVerifying ? (
-              <>
-                <div className="i-ph:spinner animate-spin mr-2" />
-                Verifying...
-              </>
-            ) : (
-              'Connect'
-            )}
-          </button>
-        ) : (
-          <button
-            onClick={handleDisconnect}
-            className="bg-bolt-elements-button-danger-background rounded-lg px-4 py-2 mr-2 transition-colors duration-200 hover:bg-bolt-elements-button-danger-backgroundHover text-bolt-elements-button-danger-text"
-          >
-            Disconnect
-          </button>
-        )}
-        {isConnected && (
-          <span className="text-sm text-green-600 flex items-center">
-            <div className="i-ph:check-circle mr-1" />
-            Connected to GitHub
-          </span>
-        )}
-      </div>
-    </div>
-  );
-}

app/components/settings/data/DataTab.tsx

@@ -1,388 +0,0 @@
-import React, { useState } from 'react';
-import { useNavigate } from '@remix-run/react';
-import Cookies from 'js-cookie';
-import { toast } from 'react-toastify';
-import { db, deleteById, getAll, setMessages } from '~/lib/persistence';
-import { logStore } from '~/lib/stores/logs';
-import { classNames } from '~/utils/classNames';
-import type { Message } from 'ai';
-
-// List of supported providers that can have API keys
-const API_KEY_PROVIDERS = [
-  'Anthropic',
-  'OpenAI',
-  'Google',
-  'Groq',
-  'HuggingFace',
-  'OpenRouter',
-  'Deepseek',
-  'Mistral',
-  'OpenAILike',
-  'Together',
-  'xAI',
-  'Perplexity',
-  'Cohere',
-  'AzureOpenAI',
-  'AmazonBedrock',
-] as const;
-
-interface ApiKeys {
-  [key: string]: string;
-}
-
-export default function DataTab() {
-  const navigate = useNavigate();
-  const [isDeleting, setIsDeleting] = useState(false);
-
-  const downloadAsJson = (data: any, filename: string) => {
-    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = filename;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-
-  const handleExportAllChats = async () => {
-    if (!db) {
-      const error = new Error('Database is not available');
-      logStore.logError('Failed to export chats - DB unavailable', error);
-      toast.error('Database is not available');
-
-      return;
-    }
-
-    try {
-      const allChats = await getAll(db);
-      const exportData = {
-        chats: allChats,
-        exportDate: new Date().toISOString(),
-      };
-
-      downloadAsJson(exportData, `all-chats-${new Date().toISOString()}.json`);
-      logStore.logSystem('Chats exported successfully', { count: allChats.length });
-      toast.success('Chats exported successfully');
-    } catch (error) {
-      logStore.logError('Failed to export chats', error);
-      toast.error('Failed to export chats');
-      console.error(error);
-    }
-  };
-
-  const handleDeleteAllChats = async () => {
-    const confirmDelete = window.confirm('Are you sure you want to delete all chats? This action cannot be undone.');
-
-    if (!confirmDelete) {
-      return;
-    }
-
-    if (!db) {
-      const error = new Error('Database is not available');
-      logStore.logError('Failed to delete chats - DB unavailable', error);
-      toast.error('Database is not available');
-
-      return;
-    }
-
-    try {
-      setIsDeleting(true);
-
-      const allChats = await getAll(db);
-      await Promise.all(allChats.map((chat) => deleteById(db!, chat.id)));
-      logStore.logSystem('All chats deleted successfully', { count: allChats.length });
-      toast.success('All chats deleted successfully');
-      navigate('/', { replace: true });
-    } catch (error) {
-      logStore.logError('Failed to delete chats', error);
-      toast.error('Failed to delete chats');
-      console.error(error);
-    } finally {
-      setIsDeleting(false);
-    }
-  };
-
-  const handleExportSettings = () => {
-    const settings = {
-      providers: Cookies.get('providers'),
-      isDebugEnabled: Cookies.get('isDebugEnabled'),
-      isEventLogsEnabled: Cookies.get('isEventLogsEnabled'),
-      isLocalModelsEnabled: Cookies.get('isLocalModelsEnabled'),
-      promptId: Cookies.get('promptId'),
-      isLatestBranch: Cookies.get('isLatestBranch'),
-      commitHash: Cookies.get('commitHash'),
-      eventLogs: Cookies.get('eventLogs'),
-      selectedModel: Cookies.get('selectedModel'),
-      selectedProvider: Cookies.get('selectedProvider'),
-      githubUsername: Cookies.get('githubUsername'),
-      githubToken: Cookies.get('githubToken'),
-      bolt_theme: localStorage.getItem('bolt_theme'),
-    };
-
-    downloadAsJson(settings, 'bolt-settings.json');
-    toast.success('Settings exported successfully');
-  };
-
-  const handleImportSettings = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-
-    if (!file) {
-      return;
-    }
-
-    const reader = new FileReader();
-
-    reader.onload = (e) => {
-      try {
-        const settings = JSON.parse(e.target?.result as string);
-
-        Object.entries(settings).forEach(([key, value]) => {
-          if (key === 'bolt_theme') {
-            if (value) {
-              localStorage.setItem(key, value as string);
-            }
-          } else if (value) {
-            Cookies.set(key, value as string);
-          }
-        });
-
-        toast.success('Settings imported successfully. Please refresh the page for changes to take effect.');
-      } catch (error) {
-        toast.error('Failed to import settings. Make sure the file is a valid JSON file.');
-        console.error('Failed to import settings:', error);
-      }
-    };
-    reader.readAsText(file);
-    event.target.value = '';
-  };
-
-  const handleExportApiKeyTemplate = () => {
-    const template: ApiKeys = {};
-    API_KEY_PROVIDERS.forEach((provider) => {
-      template[`${provider}_API_KEY`] = '';
-    });
-
-    template.OPENAI_LIKE_API_BASE_URL = '';
-    template.LMSTUDIO_API_BASE_URL = '';
-    template.OLLAMA_API_BASE_URL = '';
-    template.TOGETHER_API_BASE_URL = '';
-
-    downloadAsJson(template, 'api-keys-template.json');
-    toast.success('API keys template exported successfully');
-  };
-
-  const handleImportApiKeys = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-
-    if (!file) {
-      return;
-    }
-
-    const reader = new FileReader();
-
-    reader.onload = (e) => {
-      try {
-        const apiKeys = JSON.parse(e.target?.result as string);
-        let importedCount = 0;
-        const consolidatedKeys: Record<string, string> = {};
-
-        API_KEY_PROVIDERS.forEach((provider) => {
-          const keyName = `${provider}_API_KEY`;
-
-          if (apiKeys[keyName]) {
-            consolidatedKeys[provider] = apiKeys[keyName];
-            importedCount++;
-          }
-        });
-
-        if (importedCount > 0) {
-          // Store all API keys in a single cookie as JSON
-          Cookies.set('apiKeys', JSON.stringify(consolidatedKeys));
-
-          // Also set individual cookies for backward compatibility
-          Object.entries(consolidatedKeys).forEach(([provider, key]) => {
-            Cookies.set(`${provider}_API_KEY`, key);
-          });
-
-          toast.success(`Successfully imported ${importedCount} API keys/URLs. Refreshing page to apply changes...`);
-
-          // Reload the page after a short delay to allow the toast to be seen
-          setTimeout(() => {
-            window.location.reload();
-          }, 1500);
-        } else {
-          toast.warn('No valid API keys found in the file');
-        }
-
-        // Set base URLs if they exist
-        ['OPENAI_LIKE_API_BASE_URL', 'LMSTUDIO_API_BASE_URL', 'OLLAMA_API_BASE_URL', 'TOGETHER_API_BASE_URL'].forEach(
-          (baseUrl) => {
-            if (apiKeys[baseUrl]) {
-              Cookies.set(baseUrl, apiKeys[baseUrl]);
-            }
-          },
-        );
-      } catch (error) {
-        toast.error('Failed to import API keys. Make sure the file is a valid JSON file.');
-        console.error('Failed to import API keys:', error);
-      }
-    };
-    reader.readAsText(file);
-    event.target.value = '';
-  };
-
-  const processChatData = (
-    data: any,
-  ): Array<{
-    id: string;
-    messages: Message[];
-    description: string;
-    urlId?: string;
-  }> => {
-    // Handle Bolt standard format (single chat)
-    if (data.messages && Array.isArray(data.messages)) {
-      const chatId = crypto.randomUUID();
-      return [
-        {
-          id: chatId,
-          messages: data.messages,
-          description: data.description || 'Imported Chat',
-          urlId: chatId,
-        },
-      ];
-    }
-
-    // Handle Bolt export format (multiple chats)
-    if (data.chats && Array.isArray(data.chats)) {
-      return data.chats.map((chat: { id?: string; messages: Message[]; description?: string; urlId?: string }) => ({
-        id: chat.id || crypto.randomUUID(),
-        messages: chat.messages,
-        description: chat.description || 'Imported Chat',
-        urlId: chat.urlId,
-      }));
-    }
-
-    console.error('No matching format found for:', data);
-    throw new Error('Unsupported chat format');
-  };
-
-  const handleImportChats = () => {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = '.json';
-
-    input.onchange = async (e) => {
-      const file = (e.target as HTMLInputElement).files?.[0];
-
-      if (!file || !db) {
-        toast.error('Something went wrong');
-        return;
-      }
-
-      try {
-        const content = await file.text();
-        const data = JSON.parse(content);
-        const chatsToImport = processChatData(data);
-
-        for (const chat of chatsToImport) {
-          await setMessages(db, chat.id, chat.messages, chat.urlId, chat.description);
-        }
-
-        logStore.logSystem('Chats imported successfully', { count: chatsToImport.length });
-        toast.success(`Successfully imported ${chatsToImport.length} chat${chatsToImport.length > 1 ? 's' : ''}`);
-        window.location.reload();
-      } catch (error) {
-        if (error instanceof Error) {
-          logStore.logError('Failed to import chats:', error);
-          toast.error('Failed to import chats: ' + error.message);
-        } else {
-          toast.error('Failed to import chats');
-        }
-
-        console.error(error);
-      }
-    };
-
-    input.click();
-  };
-
-  return (
-    <div className="p-4 bg-bolt-elements-bg-depth-2 border border-bolt-elements-borderColor rounded-lg mb-4">
-      <div className="mb-6">
-        <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Data Management</h3>
-        <div className="space-y-8">
-          <div className="flex flex-col gap-4">
-            <div>
-              <h4 className="text-bolt-elements-textPrimary mb-2">Chat History</h4>
-              <p className="text-sm text-bolt-elements-textSecondary mb-4">Export or delete all your chat history.</p>
-              <div className="flex gap-4">
-                <button
-                  onClick={handleExportAllChats}
-                  className="px-4 py-2 bg-bolt-elements-button-primary-background hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-textPrimary rounded-lg transition-colors"
-                >
-                  Export All Chats
-                </button>
-                <button
-                  onClick={handleImportChats}
-                  className="px-4 py-2 bg-bolt-elements-button-primary-background hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-textPrimary rounded-lg transition-colors"
-                >
-                  Import Chats
-                </button>
-                <button
-                  onClick={handleDeleteAllChats}
-                  disabled={isDeleting}
-                  className={classNames(
-                    'px-4 py-2 bg-bolt-elements-button-danger-background hover:bg-bolt-elements-button-danger-backgroundHover text-bolt-elements-button-danger-text rounded-lg transition-colors',
-                    isDeleting ? 'opacity-50 cursor-not-allowed' : '',
-                  )}
-                >
-                  {isDeleting ? 'Deleting...' : 'Delete All Chats'}
-                </button>
-              </div>
-            </div>
-
-            <div>
-              <h4 className="text-bolt-elements-textPrimary mb-2">Settings Backup</h4>
-              <p className="text-sm text-bolt-elements-textSecondary mb-4">
-                Export your settings to a JSON file or import settings from a previously exported file.
-              </p>
-              <div className="flex gap-4">
-                <button
-                  onClick={handleExportSettings}
-                  className="px-4 py-2 bg-bolt-elements-button-primary-background hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-textPrimary rounded-lg transition-colors"
-                >
-                  Export Settings
-                </button>
-                <label className="px-4 py-2 bg-bolt-elements-button-primary-background hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-textPrimary rounded-lg transition-colors cursor-pointer">
-                  Import Settings
-                  <input type="file" accept=".json" onChange={handleImportSettings} className="hidden" />
-                </label>
-              </div>
-            </div>
-
-            <div>
-              <h4 className="text-bolt-elements-textPrimary mb-2">API Keys Management</h4>
-              <p className="text-sm text-bolt-elements-textSecondary mb-4">
-                Import API keys from a JSON file or download a template to fill in your keys.
-              </p>
-              <div className="flex gap-4">
-                <button
-                  onClick={handleExportApiKeyTemplate}
-                  className="px-4 py-2 bg-bolt-elements-button-primary-background hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-textPrimary rounded-lg transition-colors"
-                >
-                  Download Template
-                </button>
-                <label className="px-4 py-2 bg-bolt-elements-button-primary-background hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-textPrimary rounded-lg transition-colors cursor-pointer">
-                  Import API Keys
-                  <input type="file" accept=".json" onChange={handleImportApiKeys} className="hidden" />
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

app/components/settings/debug/DebugTab.tsx

@@ -1,639 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { useSettings } from '~/lib/hooks/useSettings';
-import { toast } from 'react-toastify';
-import { providerBaseUrlEnvKeys } from '~/utils/constants';
-
-interface ProviderStatus {
-  name: string;
-  enabled: boolean;
-  isLocal: boolean;
-  isRunning: boolean | null;
-  error?: string;
-  lastChecked: Date;
-  responseTime?: number;
-  url: string | null;
-}
-
-interface SystemInfo {
-  os: string;
-  browser: string;
-  screen: string;
-  language: string;
-  timezone: string;
-  memory: string;
-  cores: number;
-  deviceType: string;
-  colorDepth: string;
-  pixelRatio: number;
-  online: boolean;
-  cookiesEnabled: boolean;
-  doNotTrack: boolean;
-}
-
-interface IProviderConfig {
-  name: string;
-  settings: {
-    enabled: boolean;
-    baseUrl?: string;
-  };
-}
-
-interface CommitData {
-  commit: string;
-  version?: string;
-}
-
-const connitJson: CommitData = {
-  commit: __COMMIT_HASH,
-  version: __APP_VERSION,
-};
-
-const LOCAL_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
-
-const versionHash = connitJson.commit;
-const versionTag = connitJson.version;
-
-const GITHUB_URLS = {
-  original: 'https://api.github.com/repos/stackblitz-labs/bolt.diy/commits/main',
-  fork: 'https://api.github.com/repos/Stijnus/bolt.new-any-llm/commits/main',
-  commitJson: async (branch: string) => {
-    try {
-      const response = await fetch(`https://api.github.com/repos/stackblitz-labs/bolt.diy/commits/${branch}`);
-      const data: { sha: string } = await response.json();
-
-      const packageJsonResp = await fetch(
-        `https://raw.githubusercontent.com/stackblitz-labs/bolt.diy/${branch}/package.json`,
-      );
-      const packageJson: { version: string } = await packageJsonResp.json();
-
-      return {
-        commit: data.sha.slice(0, 7),
-        version: packageJson.version,
-      };
-    } catch (error) {
-      console.log('Failed to fetch local commit info:', error);
-      throw new Error('Failed to fetch local commit info');
-    }
-  },
-};
-
-function getSystemInfo(): SystemInfo {
-  const formatBytes = (bytes: number): string => {
-    if (bytes === 0) {
-      return '0 Bytes';
-    }
-
-    const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-  };
-
-  const getBrowserInfo = (): string => {
-    const ua = navigator.userAgent;
-    let browser = 'Unknown';
-
-    if (ua.includes('Firefox/')) {
-      browser = 'Firefox';
-    } else if (ua.includes('Chrome/')) {
-      if (ua.includes('Edg/')) {
-        browser = 'Edge';
-      } else if (ua.includes('OPR/')) {
-        browser = 'Opera';
-      } else {
-        browser = 'Chrome';
-      }
-    } else if (ua.includes('Safari/')) {
-      if (!ua.includes('Chrome')) {
-        browser = 'Safari';
-      }
-    }
-
-    // Extract version number
-    const match = ua.match(new RegExp(`${browser}\\/([\\d.]+)`));
-    const version = match ? ` ${match[1]}` : '';
-
-    return `${browser}${version}`;
-  };
-
-  const getOperatingSystem = (): string => {
-    const ua = navigator.userAgent;
-    const platform = navigator.platform;
-
-    if (ua.includes('Win')) {
-      return 'Windows';
-    }
-
-    if (ua.includes('Mac')) {
-      if (ua.includes('iPhone') || ua.includes('iPad')) {
-        return 'iOS';
-      }
-
-      return 'macOS';
-    }
-
-    if (ua.includes('Linux')) {
-      return 'Linux';
-    }
-
-    if (ua.includes('Android')) {
-      return 'Android';
-    }
-
-    return platform || 'Unknown';
-  };
-
-  const getDeviceType = (): string => {
-    const ua = navigator.userAgent;
-
-    if (ua.includes('Mobile')) {
-      return 'Mobile';
-    }
-
-    if (ua.includes('Tablet')) {
-      return 'Tablet';
-    }
-
-    return 'Desktop';
-  };
-
-  // Get more detailed memory info if available
-  const getMemoryInfo = (): string => {
-    if ('memory' in performance) {
-      const memory = (performance as any).memory;
-      return `${formatBytes(memory.jsHeapSizeLimit)} (Used: ${formatBytes(memory.usedJSHeapSize)})`;
-    }
-
-    return 'Not available';
-  };
-
-  return {
-    os: getOperatingSystem(),
-    browser: getBrowserInfo(),
-    screen: `${window.screen.width}x${window.screen.height}`,
-    language: navigator.language,
-    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-    memory: getMemoryInfo(),
-    cores: navigator.hardwareConcurrency || 0,
-    deviceType: getDeviceType(),
-
-    // Add new fields
-    colorDepth: `${window.screen.colorDepth}-bit`,
-    pixelRatio: window.devicePixelRatio,
-    online: navigator.onLine,
-    cookiesEnabled: navigator.cookieEnabled,
-    doNotTrack: navigator.doNotTrack === '1',
-  };
-}
-
-const checkProviderStatus = async (url: string | null, providerName: string): Promise<ProviderStatus> => {
-  if (!url) {
-    console.log(`[Debug] No URL provided for ${providerName}`);
-    return {
-      name: providerName,
-      enabled: false,
-      isLocal: true,
-      isRunning: false,
-      error: 'No URL configured',
-      lastChecked: new Date(),
-      url: null,
-    };
-  }
-
-  console.log(`[Debug] Checking status for ${providerName} at ${url}`);
-
-  const startTime = performance.now();
-
-  try {
-    if (providerName.toLowerCase() === 'ollama') {
-      // Special check for Ollama root endpoint
-      try {
-        console.log(`[Debug] Checking Ollama root endpoint: ${url}`);
-
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout
-
-        const response = await fetch(url, {
-          signal: controller.signal,
-          headers: {
-            Accept: 'text/plain,application/json',
-          },
-        });
-        clearTimeout(timeoutId);
-
-        const text = await response.text();
-        console.log(`[Debug] Ollama root response:`, text);
-
-        if (text.includes('Ollama is running')) {
-          console.log(`[Debug] Ollama running confirmed via root endpoint`);
-          return {
-            name: providerName,
-            enabled: false,
-            isLocal: true,
-            isRunning: true,
-            lastChecked: new Date(),
-            responseTime: performance.now() - startTime,
-            url,
-          };
-        }
-      } catch (error) {
-        console.log(`[Debug] Ollama root check failed:`, error);
-
-        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-
-        if (errorMessage.includes('aborted')) {
-          return {
-            name: providerName,
-            enabled: false,
-            isLocal: true,
-            isRunning: false,
-            error: 'Connection timeout',
-            lastChecked: new Date(),
-            responseTime: performance.now() - startTime,
-            url,
-          };
-        }
-      }
-    }
-
-    // Try different endpoints based on provider
-    const checkUrls = [`${url}/api/health`, url.endsWith('v1') ? `${url}/models` : `${url}/v1/models`];
-    console.log(`[Debug] Checking additional endpoints:`, checkUrls);
-
-    const results = await Promise.all(
-      checkUrls.map(async (checkUrl) => {
-        try {
-          console.log(`[Debug] Trying endpoint: ${checkUrl}`);
-
-          const controller = new AbortController();
-          const timeoutId = setTimeout(() => controller.abort(), 5000);
-
-          const response = await fetch(checkUrl, {
-            signal: controller.signal,
-            headers: {
-              Accept: 'application/json',
-            },
-          });
-          clearTimeout(timeoutId);
-
-          const ok = response.ok;
-          console.log(`[Debug] Endpoint ${checkUrl} response:`, ok);
-
-          if (ok) {
-            try {
-              const data = await response.json();
-              console.log(`[Debug] Endpoint ${checkUrl} data:`, data);
-            } catch {
-              console.log(`[Debug] Could not parse JSON from ${checkUrl}`);
-            }
-          }
-
-          return ok;
-        } catch (error) {
-          console.log(`[Debug] Endpoint ${checkUrl} failed:`, error);
-          return false;
-        }
-      }),
-    );
-
-    const isRunning = results.some((result) => result);
-    console.log(`[Debug] Final status for ${providerName}:`, isRunning);
-
-    return {
-      name: providerName,
-      enabled: false,
-      isLocal: true,
-      isRunning,
-      lastChecked: new Date(),
-      responseTime: performance.now() - startTime,
-      url,
-    };
-  } catch (error) {
-    console.log(`[Debug] Provider check failed for ${providerName}:`, error);
-    return {
-      name: providerName,
-      enabled: false,
-      isLocal: true,
-      isRunning: false,
-      error: error instanceof Error ? error.message : 'Unknown error',
-      lastChecked: new Date(),
-      responseTime: performance.now() - startTime,
-      url,
-    };
-  }
-};
-
-export default function DebugTab() {
-  const { providers, isLatestBranch } = useSettings();
-  const [activeProviders, setActiveProviders] = useState<ProviderStatus[]>([]);
-  const [updateMessage, setUpdateMessage] = useState<string>('');
-  const [systemInfo] = useState<SystemInfo>(getSystemInfo());
-  const [isCheckingUpdate, setIsCheckingUpdate] = useState(false);
-
-  const updateProviderStatuses = async () => {
-    if (!providers) {
-      return;
-    }
-
-    try {
-      const entries = Object.entries(providers) as [string, IProviderConfig][];
-      const statuses = await Promise.all(
-        entries
-          .filter(([, provider]) => LOCAL_PROVIDERS.includes(provider.name))
-          .map(async ([, provider]) => {
-            const envVarName =
-              providerBaseUrlEnvKeys[provider.name].baseUrlKey || `REACT_APP_${provider.name.toUpperCase()}_URL`;
-
-            // Access environment variables through import.meta.env
-            let settingsUrl = provider.settings.baseUrl;
-
-            if (settingsUrl && settingsUrl.trim().length === 0) {
-              settingsUrl = undefined;
-            }
-
-            const url = settingsUrl || import.meta.env[envVarName] || null; // Ensure baseUrl is used
-            console.log(`[Debug] Using URL for ${provider.name}:`, url, `(from ${envVarName})`);
-
-            const status = await checkProviderStatus(url, provider.name);
-
-            return {
-              ...status,
-              enabled: provider.settings.enabled ?? false,
-            };
-          }),
-      );
-
-      setActiveProviders(statuses);
-    } catch (error) {
-      console.error('[Debug] Failed to update provider statuses:', error);
-    }
-  };
-
-  useEffect(() => {
-    updateProviderStatuses();
-
-    const interval = setInterval(updateProviderStatuses, 30000);
-
-    return () => clearInterval(interval);
-  }, [providers]);
-
-  const handleCheckForUpdate = useCallback(async () => {
-    if (isCheckingUpdate) {
-      return;
-    }
-
-    try {
-      setIsCheckingUpdate(true);
-      setUpdateMessage('Checking for updates...');
-
-      const branchToCheck = isLatestBranch ? 'main' : 'stable';
-      console.log(`[Debug] Checking for updates against ${branchToCheck} branch`);
-
-      const latestCommitResp = await GITHUB_URLS.commitJson(branchToCheck);
-
-      const remoteCommitHash = latestCommitResp.commit;
-      const currentCommitHash = versionHash;
-
-      if (remoteCommitHash !== currentCommitHash) {
-        setUpdateMessage(
-          `Update available from ${branchToCheck} branch!\n` +
-            `Current: ${currentCommitHash.slice(0, 7)}\n` +
-            `Latest: ${remoteCommitHash.slice(0, 7)}`,
-        );
-      } else {
-        setUpdateMessage(`You are on the latest version from the ${branchToCheck} branch`);
-      }
-    } catch (error) {
-      setUpdateMessage('Failed to check for updates');
-      console.error('[Debug] Failed to check for updates:', error);
-    } finally {
-      setIsCheckingUpdate(false);
-    }
-  }, [isCheckingUpdate, isLatestBranch]);
-
-  const handleCopyToClipboard = useCallback(() => {
-    const debugInfo = {
-      System: systemInfo,
-      Providers: activeProviders.map((provider) => ({
-        name: provider.name,
-        enabled: provider.enabled,
-        isLocal: provider.isLocal,
-        running: provider.isRunning,
-        error: provider.error,
-        lastChecked: provider.lastChecked,
-        responseTime: provider.responseTime,
-        url: provider.url,
-      })),
-      Version: {
-        hash: versionHash.slice(0, 7),
-        branch: isLatestBranch ? 'main' : 'stable',
-      },
-      Timestamp: new Date().toISOString(),
-    };
-
-    navigator.clipboard.writeText(JSON.stringify(debugInfo, null, 2)).then(() => {
-      toast.success('Debug information copied to clipboard!');
-    });
-  }, [activeProviders, systemInfo, isLatestBranch]);
-
-  return (
-    <div className="p-4 space-y-6">
-      <div className="flex items-center justify-between">
-        <h3 className="text-lg font-medium text-bolt-elements-textPrimary">Debug Information</h3>
-        <div className="flex gap-2">
-          <button
-            onClick={handleCopyToClipboard}
-            className="bg-bolt-elements-button-primary-background rounded-lg px-4 py-2 transition-colors duration-200 hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-button-primary-text"
-          >
-            Copy Debug Info
-          </button>
-          <button
-            onClick={handleCheckForUpdate}
-            disabled={isCheckingUpdate}
-            className={`bg-bolt-elements-button-primary-background rounded-lg px-4 py-2 transition-colors duration-200
-              ${!isCheckingUpdate ? 'hover:bg-bolt-elements-button-primary-backgroundHover' : 'opacity-75 cursor-not-allowed'}
-              text-bolt-elements-button-primary-text`}
-          >
-            {isCheckingUpdate ? 'Checking...' : 'Check for Updates'}
-          </button>
-        </div>
-      </div>
-
-      {updateMessage && (
-        <div
-          className={`bg-bolt-elements-surface rounded-lg p-3 ${
-            updateMessage.includes('Update available') ? 'border-l-4 border-yellow-400' : ''
-          }`}
-        >
-          <p className="text-bolt-elements-textSecondary whitespace-pre-line">{updateMessage}</p>
-          {updateMessage.includes('Update available') && (
-            <div className="mt-3 text-sm">
-              <p className="font-medium text-bolt-elements-textPrimary">To update:</p>
-              <ol className="list-decimal ml-4 mt-1 text-bolt-elements-textSecondary">
-                <li>
-                  Pull the latest changes:{' '}
-                  <code className="bg-bolt-elements-surface-hover px-1 rounded">git pull upstream main</code>
-                </li>
-                <li>
-                  Install any new dependencies:{' '}
-                  <code className="bg-bolt-elements-surface-hover px-1 rounded">pnpm install</code>
-                </li>
-                <li>Restart the application</li>
-              </ol>
-            </div>
-          )}
-        </div>
-      )}
-
-      <section className="space-y-4">
-        <div>
-          <h4 className="text-md font-medium text-bolt-elements-textPrimary mb-2">System Information</h4>
-          <div className="bg-bolt-elements-surface rounded-lg p-4">
-            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-              <div>
-                <p className="text-xs text-bolt-elements-textSecondary">Operating System</p>
-                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.os}</p>
-              </div>
-              <div>
-                <p className="text-xs text-bolt-elements-textSecondary">Device Type</p>
-                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.deviceType}</p>
-              </div>
-              <div>
-                <p className="text-xs text-bolt-elements-textSecondary">Browser</p>
-                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.browser}</p>
-              </div>
-              <div>
-                <p className="text-xs text-bolt-elements-textSecondary">Display</p>
-                <p className="text-sm font-medium text-bolt-elements-textPrimary">
-                  {systemInfo.screen} ({systemInfo.colorDepth}) @{systemInfo.pixelRatio}x
-                </p>
-              </div>
-              <div>
-                <p className="text-xs text-bolt-elements-textSecondary">Connection</p>
-                <p className="text-sm font-medium flex items-center gap-2">
-                  <span
-                    className={`inline-block w-2 h-2 rounded-full ${systemInfo.online ? 'bg-green-500' : 'bg-red-500'}`}
-                  />
-                  <span className={`${systemInfo.online ? 'text-green-600' : 'text-red-600'}`}>
-                    {systemInfo.online ? 'Online' : 'Offline'}
-                  </span>
-                </p>
-              </div>
-              <div>
-                <p className="text-xs text-bolt-elements-textSecondary">Screen Resolution</p>
-                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.screen}</p>
-              </div>
-              <div>
-                <p className="text-xs text-bolt-elements-textSecondary">Language</p>
-                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.language}</p>
-              </div>
-              <div>
-                <p className="text-xs text-bolt-elements-textSecondary">Timezone</p>
-                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.timezone}</p>
-              </div>
-              <div>
-                <p className="text-xs text-bolt-elements-textSecondary">CPU Cores</p>
-                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.cores}</p>
-              </div>
-            </div>
-            <div className="mt-3 pt-3 border-t border-bolt-elements-surface-hover">
-              <p className="text-xs text-bolt-elements-textSecondary">Version</p>
-              <p className="text-sm font-medium text-bolt-elements-textPrimary font-mono">
-                {connitJson.commit.slice(0, 7)}
-                <span className="ml-2 text-xs text-bolt-elements-textSecondary">
-                  (v{versionTag || '0.0.1'}) - {isLatestBranch ? 'nightly' : 'stable'}
-                </span>
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <h4 className="text-md font-medium text-bolt-elements-textPrimary mb-2">Local LLM Status</h4>
-          <div className="bg-bolt-elements-surface rounded-lg">
-            <div className="grid grid-cols-1 divide-y">
-              {activeProviders.map((provider) => (
-                <div key={provider.name} className="p-3 flex flex-col space-y-2">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                      <div className="flex-shrink-0">
-                        <div
-                          className={`w-2 h-2 rounded-full ${
-                            !provider.enabled ? 'bg-gray-300' : provider.isRunning ? 'bg-green-400' : 'bg-red-400'
-                          }`}
-                        />
-                      </div>
-                      <div>
-                        <p className="text-sm font-medium text-bolt-elements-textPrimary">{provider.name}</p>
-                        {provider.url && (
-                          <p className="text-xs text-bolt-elements-textSecondary truncate max-w-[300px]">
-                            {provider.url}
-                          </p>
-                        )}
-                      </div>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <span
-                        className={`px-2 py-0.5 text-xs rounded-full ${
-                          provider.enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
-                        }`}
-                      >
-                        {provider.enabled ? 'Enabled' : 'Disabled'}
-                      </span>
-                      {provider.enabled && (
-                        <span
-                          className={`px-2 py-0.5 text-xs rounded-full ${
-                            provider.isRunning ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
-                          }`}
-                        >
-                          {provider.isRunning ? 'Running' : 'Not Running'}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-
-                  <div className="pl-5 flex flex-col space-y-1 text-xs">
-                    {/* Status Details */}
-                    <div className="flex flex-wrap gap-2">
-                      <span className="text-bolt-elements-textSecondary">
-                        Last checked: {new Date(provider.lastChecked).toLocaleTimeString()}
-                      </span>
-                      {provider.responseTime && (
-                        <span className="text-bolt-elements-textSecondary">
-                          Response time: {Math.round(provider.responseTime)}ms
-                        </span>
-                      )}
-                    </div>
-
-                    {/* Error Message */}
-                    {provider.error && (
-                      <div className="mt-1 text-red-600 bg-red-50 rounded-md p-2">
-                        <span className="font-medium">Error:</span> {provider.error}
-                      </div>
-                    )}
-
-                    {/* Connection Info */}
-                    {provider.url && (
-                      <div className="text-bolt-elements-textSecondary">
-                        <span className="font-medium">Endpoints checked:</span>
-                        <ul className="list-disc list-inside pl-2 mt-1">
-                          <li>{provider.url} (root)</li>
-                          <li>{provider.url}/api/health</li>
-                          <li>{provider.url}/v1/models</li>
-                        </ul>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              ))}
-              {activeProviders.length === 0 && (
-                <div className="p-4 text-center text-bolt-elements-textSecondary">No local LLMs configured</div>
-              )}
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  );
-}

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

@@ -1,219 +0,0 @@
-import React, { useCallback, useEffect, useState, useMemo } from 'react';
-import { useSettings } from '~/lib/hooks/useSettings';
-import { toast } from 'react-toastify';
-import { Switch } from '~/components/ui/Switch';
-import { logStore, type LogEntry } from '~/lib/stores/logs';
-import { useStore } from '@nanostores/react';
-import { classNames } from '~/utils/classNames';
-
-export default function EventLogsTab() {
-  const {} = useSettings();
-  const showLogs = useStore(logStore.showLogs);
-  const [logLevel, setLogLevel] = useState<LogEntry['level'] | 'all'>('info');
-  const [autoScroll, setAutoScroll] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [, forceUpdate] = useState({});
-
-  const filteredLogs = useMemo(() => {
-    const logs = logStore.getLogs();
-    return logs.filter((log) => {
-      const matchesLevel = !logLevel || log.level === logLevel || logLevel === 'all';
-      const matchesSearch =
-        !searchQuery ||
-        log.message?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        JSON.stringify(log.details)?.toLowerCase()?.includes(searchQuery?.toLowerCase());
-
-      return matchesLevel && matchesSearch;
-    });
-  }, [logLevel, searchQuery]);
-
-  // Effect to initialize showLogs
-  useEffect(() => {
-    logStore.showLogs.set(true);
-  }, []);
-
-  useEffect(() => {
-    // System info logs
-    logStore.logSystem('Application initialized', {
-      version: process.env.NEXT_PUBLIC_APP_VERSION,
-      environment: process.env.NODE_ENV,
-    });
-
-    // Debug logs for system state
-    logStore.logDebug('System configuration loaded', {
-      runtime: 'Next.js',
-      features: ['AI Chat', 'Event Logging'],
-    });
-
-    // Warning logs for potential issues
-    logStore.logWarning('Resource usage threshold approaching', {
-      memoryUsage: '75%',
-      cpuLoad: '60%',
-    });
-
-    // Error logs with detailed context
-    logStore.logError('API connection failed', new Error('Connection timeout'), {
-      endpoint: '/api/chat',
-      retryCount: 3,
-      lastAttempt: new Date().toISOString(),
-    });
-  }, []);
-
-  useEffect(() => {
-    const container = document.querySelector('.logs-container');
-
-    if (container && autoScroll) {
-      container.scrollTop = container.scrollHeight;
-    }
-  }, [filteredLogs, autoScroll]);
-
-  const handleClearLogs = useCallback(() => {
-    if (confirm('Are you sure you want to clear all logs?')) {
-      logStore.clearLogs();
-      toast.success('Logs cleared successfully');
-      forceUpdate({}); // Force a re-render after clearing logs
-    }
-  }, []);
-
-  const handleExportLogs = useCallback(() => {
-    try {
-      const logText = logStore
-        .getLogs()
-        .map(
-          (log) =>
-            `[${log.level.toUpperCase()}] ${log.timestamp} - ${log.message}${
-              log.details ? '\nDetails: ' + JSON.stringify(log.details, null, 2) : ''
-            }`,
-        )
-        .join('\n\n');
-
-      const blob = new Blob([logText], { type: 'text/plain' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `event-logs-${new Date().toISOString()}.txt`;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-      toast.success('Logs exported successfully');
-    } catch (error) {
-      toast.error('Failed to export logs');
-      console.error('Export error:', error);
-    }
-  }, []);
-
-  const getLevelColor = (level: LogEntry['level']) => {
-    switch (level) {
-      case 'info':
-        return 'text-blue-500';
-      case 'warning':
-        return 'text-yellow-500';
-      case 'error':
-        return 'text-red-500';
-      case 'debug':
-        return 'text-gray-500';
-      default:
-        return 'text-bolt-elements-textPrimary';
-    }
-  };
-
-  return (
-    <div className="p-4 h-full flex flex-col">
-      <div className="flex flex-col space-y-4 mb-4">
-        {/* Title and Toggles Row */}
-        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-          <h3 className="text-lg font-medium text-bolt-elements-textPrimary">Event Logs</h3>
-          <div className="flex flex-wrap items-center gap-4">
-            <div className="flex items-center space-x-2">
-              <span className="text-sm text-bolt-elements-textSecondary whitespace-nowrap">Show Actions</span>
-              <Switch checked={showLogs} onCheckedChange={(checked) => logStore.showLogs.set(checked)} />
-            </div>
-            <div className="flex items-center space-x-2">
-              <span className="text-sm text-bolt-elements-textSecondary whitespace-nowrap">Auto-scroll</span>
-              <Switch checked={autoScroll} onCheckedChange={setAutoScroll} />
-            </div>
-          </div>
-        </div>
-
-        {/* Controls Row */}
-        <div className="flex flex-wrap items-center gap-2">
-          <select
-            value={logLevel}
-            onChange={(e) => setLogLevel(e.target.value as LogEntry['level'])}
-            className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all lg:max-w-[20%] text-sm min-w-[100px]"
-          >
-            <option value="all">All</option>
-            <option value="info">Info</option>
-            <option value="warning">Warning</option>
-            <option value="error">Error</option>
-            <option value="debug">Debug</option>
-          </select>
-          <div className="flex-1 min-w-[200px]">
-            <input
-              type="text"
-              placeholder="Search logs..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
-            />
-          </div>
-          {showLogs && (
-            <div className="flex items-center gap-2 flex-nowrap">
-              <button
-                onClick={handleExportLogs}
-                className={classNames(
-                  'bg-bolt-elements-button-primary-background',
-                  'rounded-lg px-4 py-2 transition-colors duration-200',
-                  'hover:bg-bolt-elements-button-primary-backgroundHover',
-                  'text-bolt-elements-button-primary-text',
-                )}
-              >
-                Export Logs
-              </button>
-              <button
-                onClick={handleClearLogs}
-                className={classNames(
-                  'bg-bolt-elements-button-danger-background',
-                  'rounded-lg px-4 py-2 transition-colors duration-200',
-                  'hover:bg-bolt-elements-button-danger-backgroundHover',
-                  'text-bolt-elements-button-danger-text',
-                )}
-              >
-                Clear Logs
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-
-      <div className="bg-bolt-elements-bg-depth-1 rounded-lg p-4 h-[calc(100vh - 250px)] min-h-[400px] overflow-y-auto logs-container overflow-y-auto">
-        {filteredLogs.length === 0 ? (
-          <div className="text-center text-bolt-elements-textSecondary py-8">No logs found</div>
-        ) : (
-          filteredLogs.map((log, index) => (
-            <div
-              key={index}
-              className="text-sm mb-3 font-mono border-b border-bolt-elements-borderColor pb-2 last:border-0"
-            >
-              <div className="flex items-start space-x-2 flex-wrap">
-                <span className={`font-bold ${getLevelColor(log.level)} whitespace-nowrap`}>
-                  [{log.level.toUpperCase()}]
-                </span>
-                <span className="text-bolt-elements-textSecondary whitespace-nowrap">
-                  {new Date(log.timestamp).toLocaleString()}
-                </span>
-                <span className="text-bolt-elements-textPrimary break-all">{log.message}</span>
-              </div>
-              {log.details && (
-                <pre className="mt-2 text-xs text-bolt-elements-textSecondary overflow-x-auto whitespace-pre-wrap break-all">
-                  {JSON.stringify(log.details, null, 2)}
-                </pre>
-              )}
-            </div>
-          ))
-        )}
-      </div>
-    </div>
-  );
-}

app/components/settings/features/FeaturesTab.tsx

@@ -1,107 +0,0 @@
-import React from 'react';
-import { Switch } from '~/components/ui/Switch';
-import { PromptLibrary } from '~/lib/common/prompt-library';
-import { useSettings } from '~/lib/hooks/useSettings';
-
-export default function FeaturesTab() {
-  const {
-    debug,
-    enableDebugMode,
-    isLocalModel,
-    enableLocalModels,
-    enableEventLogs,
-    isLatestBranch,
-    enableLatestBranch,
-    promptId,
-    setPromptId,
-    autoSelectTemplate,
-    setAutoSelectTemplate,
-    enableContextOptimization,
-    contextOptimizationEnabled,
-  } = useSettings();
-
-  const handleToggle = (enabled: boolean) => {
-    enableDebugMode(enabled);
-    enableEventLogs(enabled);
-  };
-
-  return (
-    <div className="p-4 bg-bolt-elements-bg-depth-2 border border-bolt-elements-borderColor rounded-lg mb-4">
-      <div className="mb-6">
-        <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Optional Features</h3>
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <span className="text-bolt-elements-textPrimary">Debug Features</span>
-            <Switch className="ml-auto" checked={debug} onCheckedChange={handleToggle} />
-          </div>
-          <div className="flex items-center justify-between">
-            <div>
-              <span className="text-bolt-elements-textPrimary">Use Main Branch</span>
-              <p className="text-xs text-bolt-elements-textTertiary">
-                Check for updates against the main branch instead of stable
-              </p>
-            </div>
-            <Switch className="ml-auto" checked={isLatestBranch} onCheckedChange={enableLatestBranch} />
-          </div>
-          <div className="flex items-center justify-between">
-            <div>
-              <span className="text-bolt-elements-textPrimary">Auto Select Code Template</span>
-              <p className="text-xs text-bolt-elements-textTertiary">
-                Let Bolt select the best starter template for your project.
-              </p>
-            </div>
-            <Switch className="ml-auto" checked={autoSelectTemplate} onCheckedChange={setAutoSelectTemplate} />
-          </div>
-          <div className="flex items-center justify-between">
-            <div>
-              <span className="text-bolt-elements-textPrimary">Use Context Optimization</span>
-              <p className="text-sm text-bolt-elements-textSecondary">
-                redact file contents form chat and puts the latest file contents on the system prompt
-              </p>
-            </div>
-            <Switch
-              className="ml-auto"
-              checked={contextOptimizationEnabled}
-              onCheckedChange={enableContextOptimization}
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="mb-6 border-t border-bolt-elements-borderColor pt-4">
-        <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Experimental Features</h3>
-        <p className="text-sm text-bolt-elements-textSecondary mb-10">
-          Disclaimer: Experimental features may be unstable and are subject to change.
-        </p>
-        <div className="flex flex-col">
-          <div className="flex items-center justify-between mb-2">
-            <span className="text-bolt-elements-textPrimary">Experimental Providers</span>
-            <Switch className="ml-auto" checked={isLocalModel} onCheckedChange={enableLocalModels} />
-          </div>
-          <p className="text-xs text-bolt-elements-textTertiary mb-4">
-            Enable experimental providers such as Ollama, LMStudio, and OpenAILike.
-          </p>
-        </div>
-        <div className="flex items-start justify-between pt-4 mb-2 gap-2">
-          <div className="flex-1 max-w-[200px]">
-            <span className="text-bolt-elements-textPrimary">Prompt Library</span>
-            <p className="text-xs text-bolt-elements-textTertiary mb-4">
-              Choose a prompt from the library to use as the system prompt.
-            </p>
-          </div>
-          <select
-            value={promptId}
-            onChange={(e) => setPromptId(e.target.value)}
-            className="flex-1 p-2 ml-auto rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all text-sm min-w-[100px]"
-          >
-            {PromptLibrary.getList().map((x) => (
-              <option key={x.id} value={x.id}>
-                {x.label}
-              </option>
-            ))}
-          </select>
-        </div>
-      </div>
-    </div>
-  );
-}

app/components/settings/providers/ProvidersTab.tsx

@@ -1,147 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Switch } from '~/components/ui/Switch';
-import { useSettings } from '~/lib/hooks/useSettings';
-import { LOCAL_PROVIDERS, URL_CONFIGURABLE_PROVIDERS } from '~/lib/stores/settings';
-import type { IProviderConfig } from '~/types/model';
-import { logStore } from '~/lib/stores/logs';
-
-// Import a default fallback icon
-import { providerBaseUrlEnvKeys } from '~/utils/constants';
-
-const DefaultIcon = '/icons/Default.svg'; // Adjust the path as necessary
-
-export default function ProvidersTab() {
-  const { providers, updateProviderSettings, isLocalModel } = useSettings();
-  const [filteredProviders, setFilteredProviders] = useState<IProviderConfig[]>([]);
-
-  // Load base URLs from cookies
-  const [searchTerm, setSearchTerm] = useState('');
-
-  useEffect(() => {
-    let newFilteredProviders: IProviderConfig[] = Object.entries(providers).map(([key, value]) => ({
-      ...value,
-      name: key,
-    }));
-
-    if (searchTerm && searchTerm.length > 0) {
-      newFilteredProviders = newFilteredProviders.filter((provider) =>
-        provider.name.toLowerCase().includes(searchTerm.toLowerCase()),
-      );
-    }
-
-    if (!isLocalModel) {
-      newFilteredProviders = newFilteredProviders.filter((provider) => !LOCAL_PROVIDERS.includes(provider.name));
-    }
-
-    newFilteredProviders.sort((a, b) => a.name.localeCompare(b.name));
-
-    // Split providers into regular and URL-configurable
-    const regular = newFilteredProviders.filter((p) => !URL_CONFIGURABLE_PROVIDERS.includes(p.name));
-    const urlConfigurable = newFilteredProviders.filter((p) => URL_CONFIGURABLE_PROVIDERS.includes(p.name));
-
-    setFilteredProviders([...regular, ...urlConfigurable]);
-  }, [providers, searchTerm, isLocalModel]);
-
-  const renderProviderCard = (provider: IProviderConfig) => {
-    const envBaseUrlKey = providerBaseUrlEnvKeys[provider.name].baseUrlKey;
-    const envBaseUrl = envBaseUrlKey ? import.meta.env[envBaseUrlKey] : undefined;
-    const isUrlConfigurable = URL_CONFIGURABLE_PROVIDERS.includes(provider.name);
-
-    return (
-      <div
-        key={provider.name}
-        className="flex flex-col provider-item hover:bg-bolt-elements-bg-depth-3 p-4 rounded-lg border border-bolt-elements-borderColor"
-      >
-        <div className="flex items-center justify-between mb-2">
-          <div className="flex items-center gap-2">
-            <img
-              src={`/icons/${provider.name}.svg`}
-              onError={(e) => {
-                e.currentTarget.src = DefaultIcon;
-              }}
-              alt={`${provider.name} icon`}
-              className="w-6 h-6 dark:invert"
-            />
-            <span className="text-bolt-elements-textPrimary">{provider.name}</span>
-          </div>
-          <Switch
-            className="ml-auto"
-            checked={provider.settings.enabled}
-            onCheckedChange={(enabled) => {
-              updateProviderSettings(provider.name, { ...provider.settings, enabled });
-
-              if (enabled) {
-                logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
-              } else {
-                logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
-              }
-            }}
-          />
-        </div>
-        {isUrlConfigurable && provider.settings.enabled && (
-          <div className="mt-2">
-            {envBaseUrl && (
-              <label className="block text-xs text-bolt-elements-textSecondary text-green-300 mb-2">
-                Set On (.env) : {envBaseUrl}
-              </label>
-            )}
-            <label className="block text-sm text-bolt-elements-textSecondary mb-2">
-              {envBaseUrl ? 'Override Base Url' : 'Base URL '}:{' '}
-            </label>
-            <input
-              type="text"
-              value={provider.settings.baseUrl || ''}
-              onChange={(e) => {
-                let newBaseUrl: string | undefined = e.target.value;
-
-                if (newBaseUrl && newBaseUrl.trim().length === 0) {
-                  newBaseUrl = undefined;
-                }
-
-                updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl });
-                logStore.logProvider(`Base URL updated for ${provider.name}`, {
-                  provider: provider.name,
-                  baseUrl: newBaseUrl,
-                });
-              }}
-              placeholder={`Enter ${provider.name} base URL`}
-              className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
-            />
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  const regularProviders = filteredProviders.filter((p) => !URL_CONFIGURABLE_PROVIDERS.includes(p.name));
-  const urlConfigurableProviders = filteredProviders.filter((p) => URL_CONFIGURABLE_PROVIDERS.includes(p.name));
-
-  return (
-    <div className="p-4">
-      <div className="flex mb-4">
-        <input
-          type="text"
-          placeholder="Search providers..."
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
-        />
-      </div>
-
-      {/* Regular Providers Grid */}
-      <div className="grid grid-cols-2 gap-4 mb-8">{regularProviders.map(renderProviderCard)}</div>
-
-      {/* URL Configurable Providers Section */}
-      {urlConfigurableProviders.length > 0 && (
-        <div className="mt-8">
-          <h3 className="text-lg font-semibold mb-2 text-bolt-elements-textPrimary">Experimental Providers</h3>
-          <p className="text-sm text-bolt-elements-textSecondary mb-4">
-            These providers are experimental and allow you to run AI models locally or connect to your own
-            infrastructure. They require additional setup but offer more flexibility.
-          </p>
-          <div className="space-y-4">{urlConfigurableProviders.map(renderProviderCard)}</div>
-        </div>
-      )}
-    </div>
-  );
-}

app/lib/hooks/useSettings.tsx

@@ -1,229 +0,0 @@
-import { useStore } from '@nanostores/react';
-import {
-  isDebugMode,
-  isEventLogsEnabled,
-  isLocalModelsEnabled,
-  LOCAL_PROVIDERS,
-  promptStore,
-  providersStore,
-  latestBranchStore,
-  autoSelectStarterTemplate,
-  enableContextOptimizationStore,
-} from '~/lib/stores/settings';
-import { useCallback, useEffect, useState } from 'react';
-import Cookies from 'js-cookie';
-import type { IProviderSetting, ProviderInfo } from '~/types/model';
-import { logStore } from '~/lib/stores/logs'; // assuming logStore is imported from this location
-
-interface CommitData {
-  commit: string;
-  version?: string;
-}
-
-const versionData: CommitData = {
-  commit: __COMMIT_HASH,
-  version: __APP_VERSION,
-};
-
-export function useSettings() {
-  const providers = useStore(providersStore);
-  const debug = useStore(isDebugMode);
-  const eventLogs = useStore(isEventLogsEnabled);
-  const promptId = useStore(promptStore);
-  const isLocalModel = useStore(isLocalModelsEnabled);
-  const isLatestBranch = useStore(latestBranchStore);
-  const autoSelectTemplate = useStore(autoSelectStarterTemplate);
-  const [activeProviders, setActiveProviders] = useState<ProviderInfo[]>([]);
-  const contextOptimizationEnabled = useStore(enableContextOptimizationStore);
-
-  // Function to check if we're on stable version
-  const checkIsStableVersion = async () => {
-    try {
-      const response = await fetch(
-        `https://api.github.com/repos/stackblitz-labs/bolt.diy/git/refs/tags/v${versionData.version}`,
-      );
-      const data: { object: { sha: string } } = await response.json();
-
-      return versionData.commit.slice(0, 7) === data.object.sha.slice(0, 7);
-    } catch (error) {
-      console.warn('Error checking stable version:', error);
-      return false;
-    }
-  };
-
-  // reading values from cookies on mount
-  useEffect(() => {
-    const savedProviders = Cookies.get('providers');
-
-    if (savedProviders) {
-      try {
-        const parsedProviders: Record<string, IProviderSetting> = JSON.parse(savedProviders);
-        Object.keys(providers).forEach((provider) => {
-          const currentProviderSettings = parsedProviders[provider];
-
-          if (currentProviderSettings) {
-            providersStore.setKey(provider, {
-              ...providers[provider],
-              settings: {
-                ...currentProviderSettings,
-                enabled: currentProviderSettings.enabled ?? true,
-              },
-            });
-          }
-        });
-      } catch (error) {
-        console.error('Failed to parse providers from cookies:', error);
-      }
-    }
-
-    // load debug mode from cookies
-    const savedDebugMode = Cookies.get('isDebugEnabled');
-
-    if (savedDebugMode) {
-      isDebugMode.set(savedDebugMode === 'true');
-    }
-
-    // load event logs from cookies
-    const savedEventLogs = Cookies.get('isEventLogsEnabled');
-
-    if (savedEventLogs) {
-      isEventLogsEnabled.set(savedEventLogs === 'true');
-    }
-
-    // load local models from cookies
-    const savedLocalModels = Cookies.get('isLocalModelsEnabled');
-
-    if (savedLocalModels) {
-      isLocalModelsEnabled.set(savedLocalModels === 'true');
-    }
-
-    const promptId = Cookies.get('promptId');
-
-    if (promptId) {
-      promptStore.set(promptId);
-    }
-
-    // load latest branch setting from cookies or determine based on version
-    const savedLatestBranch = Cookies.get('isLatestBranch');
-    let checkCommit = Cookies.get('commitHash');
-
-    if (checkCommit === undefined) {
-      checkCommit = versionData.commit;
-    }
-
-    if (savedLatestBranch === undefined || checkCommit !== versionData.commit) {
-      // If setting hasn't been set by user, check version
-      checkIsStableVersion().then((isStable) => {
-        const shouldUseLatest = !isStable;
-        latestBranchStore.set(shouldUseLatest);
-        Cookies.set('isLatestBranch', String(shouldUseLatest));
-        Cookies.set('commitHash', String(versionData.commit));
-      });
-    } else {
-      latestBranchStore.set(savedLatestBranch === 'true');
-    }
-
-    const autoSelectTemplate = Cookies.get('autoSelectTemplate');
-
-    if (autoSelectTemplate) {
-      autoSelectStarterTemplate.set(autoSelectTemplate === 'true');
-    }
-
-    const savedContextOptimizationEnabled = Cookies.get('contextOptimizationEnabled');
-
-    if (savedContextOptimizationEnabled) {
-      enableContextOptimizationStore.set(savedContextOptimizationEnabled === 'true');
-    }
-  }, []);
-
-  // writing values to cookies on change
-  useEffect(() => {
-    const providers = providersStore.get();
-    const providerSetting: Record<string, IProviderSetting> = {};
-    Object.keys(providers).forEach((provider) => {
-      providerSetting[provider] = providers[provider].settings;
-    });
-    Cookies.set('providers', JSON.stringify(providerSetting));
-  }, [providers]);
-
-  useEffect(() => {
-    let active = Object.entries(providers)
-      .filter(([_key, provider]) => provider.settings.enabled)
-      .map(([_k, p]) => p);
-
-    if (!isLocalModel) {
-      active = active.filter((p) => !LOCAL_PROVIDERS.includes(p.name));
-    }
-
-    setActiveProviders(active);
-  }, [providers, isLocalModel]);
-
-  // helper function to update settings
-  const updateProviderSettings = useCallback(
-    (provider: string, config: IProviderSetting) => {
-      const settings = providers[provider].settings;
-      providersStore.setKey(provider, { ...providers[provider], settings: { ...settings, ...config } });
-    },
-    [providers],
-  );
-
-  const enableDebugMode = useCallback((enabled: boolean) => {
-    isDebugMode.set(enabled);
-    logStore.logSystem(`Debug mode ${enabled ? 'enabled' : 'disabled'}`);
-    Cookies.set('isDebugEnabled', String(enabled));
-  }, []);
-
-  const enableEventLogs = useCallback((enabled: boolean) => {
-    isEventLogsEnabled.set(enabled);
-    logStore.logSystem(`Event logs ${enabled ? 'enabled' : 'disabled'}`);
-    Cookies.set('isEventLogsEnabled', String(enabled));
-  }, []);
-
-  const enableLocalModels = useCallback((enabled: boolean) => {
-    isLocalModelsEnabled.set(enabled);
-    logStore.logSystem(`Local models ${enabled ? 'enabled' : 'disabled'}`);
-    Cookies.set('isLocalModelsEnabled', String(enabled));
-  }, []);
-
-  const setPromptId = useCallback((promptId: string) => {
-    promptStore.set(promptId);
-    Cookies.set('promptId', promptId);
-  }, []);
-  const enableLatestBranch = useCallback((enabled: boolean) => {
-    latestBranchStore.set(enabled);
-    logStore.logSystem(`Main branch updates ${enabled ? 'enabled' : 'disabled'}`);
-    Cookies.set('isLatestBranch', String(enabled));
-  }, []);
-
-  const setAutoSelectTemplate = useCallback((enabled: boolean) => {
-    autoSelectStarterTemplate.set(enabled);
-    logStore.logSystem(`Auto select template ${enabled ? 'enabled' : 'disabled'}`);
-    Cookies.set('autoSelectTemplate', String(enabled));
-  }, []);
-
-  const enableContextOptimization = useCallback((enabled: boolean) => {
-    enableContextOptimizationStore.set(enabled);
-    logStore.logSystem(`Context optimization ${enabled ? 'enabled' : 'disabled'}`);
-    Cookies.set('contextOptimizationEnabled', String(enabled));
-  }, []);
-
-  return {
-    providers,
-    activeProviders,
-    updateProviderSettings,
-    debug,
-    enableDebugMode,
-    eventLogs,
-    enableEventLogs,
-    isLocalModel,
-    enableLocalModels,
-    promptId,
-    setPromptId,
-    isLatestBranch,
-    enableLatestBranch,
-    autoSelectTemplate,
-    setAutoSelectTemplate,
-    contextOptimizationEnabled,
-    enableContextOptimization,
-  };
-}

docker-compose.yaml

@@ -1,41 +1,43 @@
 services:
-  # app-prod:
-  #   image: bolt-ai:production
-  #   build:
-  #     context: .
-  #     dockerfile: Dockerfile
-  #     target: bolt-ai-production
-  #   ports:
-  #     - "5173:5173"
-  #   env_file: ".env.local"
-  #   environment:
-  #     - NODE_ENV=production
-  #     - COMPOSE_PROFILES=production
-  #     # No strictly needed but serving as hints for Coolify
-  #     - PORT=5173
-  #     - GROQ_API_KEY=${GROQ_API_KEY}
-  #     - HuggingFace_API_KEY=${HuggingFace_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}
-  #     - XAI_API_KEY=${XAI_API_KEY}
-  #     - TOGETHER_API_KEY=${TOGETHER_API_KEY}
-  #     - TOGETHER_API_BASE_URL=${TOGETHER_API_BASE_URL}
-  #     - VITE_LOG_LEVEL=${VITE_LOG_LEVEL:-debug}
-  #     - DEFAULT_NUM_CTX=${DEFAULT_NUM_CTX:-32768}
-  #     - RUNNING_IN_DOCKER=true
-  #   extra_hosts:
-  #     - "host.docker.internal:host-gateway"
-  #   command: pnpm run dockerstart
-  #   profiles:
-  #     - production
+  app-prod:
+    image: bolt-ai:production
+    build:
+      context: .
+      dockerfile: Dockerfile
+      target: bolt-ai-production
+    ports:
+      - '5173:5173'
+    env_file: '.env.local'
+    environment:
+      - NODE_ENV=production
+      - COMPOSE_PROFILES=production
+      # No strictly needed but serving as hints for Coolify
+      - PORT=5173
+      - GROQ_API_KEY=${GROQ_API_KEY}
+      - HuggingFace_API_KEY=${HuggingFace_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}
+      - XAI_API_KEY=${XAI_API_KEY}
+      - TOGETHER_API_KEY=${TOGETHER_API_KEY}
+      - TOGETHER_API_BASE_URL=${TOGETHER_API_BASE_URL}
+      - AWS_BEDROCK_CONFIG=${AWS_BEDROCK_CONFIG}
+      - VITE_LOG_LEVEL=${VITE_LOG_LEVEL:-debug}
+      - DEFAULT_NUM_CTX=${DEFAULT_NUM_CTX:-32768}
+      - RUNNING_IN_DOCKER=true
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+    command: pnpm run dockerstart
+    profiles:
+      - production
 
   app-dev:
     image: bolt-ai:development
     build:
       target: bolt-ai-development
+    env_file: '.env.local'
     environment:
       - NODE_ENV=development
       - VITE_HMR_PROTOCOL=ws
@@ -54,11 +56,12 @@ services:
       - OLLAMA_API_BASE_URL=${OLLAMA_API_BASE_URL}
       - TOGETHER_API_KEY=${TOGETHER_API_KEY}
       - TOGETHER_API_BASE_URL=${TOGETHER_API_BASE_URL}
+      - AWS_BEDROCK_CONFIG=${AWS_BEDROCK_CONFIG}
       - VITE_LOG_LEVEL=${VITE_LOG_LEVEL:-debug}
       - DEFAULT_NUM_CTX=${DEFAULT_NUM_CTX:-32768}
       - RUNNING_IN_DOCKER=true
     extra_hosts:
-      - "host.docker.internal:host-gateway"
+      - 'host.docker.internal:host-gateway'
     volumes:
       - type: bind
         source: .
@@ -66,6 +69,24 @@ services:
         consistency: cached
       - /app/node_modules
     ports:
-      - "5173:5173"
+      - '5173:5173'
     command: pnpm run dev --host 0.0.0.0
-    profiles: ["development", "default"]
+    profiles: ['development', 'default']
+
+  app-prebuild:
+    image: ghcr.io/stackblitz-labs/bolt.diy:latest
+    ports:
+      - '5173:5173'
+    environment:
+      - NODE_ENV=production
+      - COMPOSE_PROFILES=production
+      # No strictly needed but serving as hints for Coolify
+      - PORT=5173
+      - OLLAMA_API_BASE_URL=http://127.0.0.1:11434
+      - DEFAULT_NUM_CTX=${DEFAULT_NUM_CTX:-32768}
+      - RUNNING_IN_DOCKER=true
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+    command: pnpm run dockerstart
+    profiles:
+      - prebuilt