From 591c84572d152f3e6e0fbbac0dda8c5ad2fd90ef Mon Sep 17 00:00:00 2001
From: Roamin <97863888+roaminro@users.noreply.github.com>
Date: Sat, 5 Jul 2025 22:11:06 +0000
Subject: [PATCH 01/11] chore(deps): update ai package to 4.3.16

---
 package.json   |  2 +-
 pnpm-lock.yaml | 79 +++++++++++++++++++++++++++++---------------------
 2 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/package.json b/package.json
index 9051a74..dd7d89b 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,7 @@
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-web-links": "^0.11.0",
     "@xterm/xterm": "^5.5.0",
-    "ai": "4.1.2",
+    "ai": "4.3.16",
     "chalk": "^5.4.1",
     "chart.js": "^4.4.7",
     "class-variance-authority": "^0.7.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c4f026d..8217c55 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -183,8 +183,8 @@ importers:
         specifier: ^5.5.0
         version: 5.5.0
       ai:
-        specifier: 4.1.2
-        version: 4.1.2(react@18.3.1)(zod@3.24.2)
+        specifier: 4.3.16
+        version: 4.3.16(react@18.3.1)(zod@3.24.2)
       chalk:
         specifier: ^5.4.1
         version: 5.4.1
@@ -585,6 +585,12 @@ packages:
       zod:
         optional: true
 
+  '@ai-sdk/provider-utils@2.2.8':
+    resolution: {integrity: sha512-fqhG+4sCVv8x7nFzYnFo19ryhAa3w096Kmc3hWxMQfW/TubPOmt3A6tYZhl4mUfQWWQMsuSkLrtjlWuXBVSGQA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.23.8
+
   '@ai-sdk/provider@0.0.12':
     resolution: {integrity: sha512-oOwPQD8i2Ynpn22cur4sk26FW3mSy6t6/X/K1Ay2yGBKYiSpRyLfObhOrZEGsXDx+3euKy4nEZ193R36NM+tpQ==}
     engines: {node: '>=18'}
@@ -609,26 +615,25 @@ packages:
     resolution: {integrity: sha512-hwj/gFNxpDgEfTaYzCYoslmw01IY9kWLKl/wf8xuPvHtQIzlfXWmmUwc8PnCwxyt8cKzIuV0dfUghCf68HQ0SA==}
     engines: {node: '>=18'}
 
-  '@ai-sdk/react@1.1.2':
-    resolution: {integrity: sha512-bBcRsDaNHzCKSIBbPngMeqbnwZ1RFadXQo9XzHoGrvLANYRwuphGNB8XTXYVLC/eXjoaGVGw2wWf/TYigEnCuA==}
+  '@ai-sdk/provider@1.1.3':
+    resolution: {integrity: sha512-qZMxYJ0qqX/RfnuIaab+zp8UAeJn/ygXXAffR5I4N0n1IrvA6qBsjc8hXLmBiMV2zoXlifkacF7sEFnYnjBcqg==}
+    engines: {node: '>=18'}
+
+  '@ai-sdk/react@1.2.12':
+    resolution: {integrity: sha512-jK1IZZ22evPZoQW3vlkZ7wvjYGYF+tRBKXtrcolduIkQ/m/sOAVcVeVDUDvh1T91xCnWCdUGCPZg2avZ90mv3g==}
     engines: {node: '>=18'}
     peerDependencies:
       react: ^18 || ^19 || ^19.0.0-rc
-      zod: ^3.0.0
+      zod: ^3.23.8
     peerDependenciesMeta:
-      react:
-        optional: true
       zod:
         optional: true
 
-  '@ai-sdk/ui-utils@1.1.2':
-    resolution: {integrity: sha512-+0kfBF4Y9jmlg1KlbNKIxchmXx9PzuReSpgRNWhpU10vfl1eeer4xK/XL2qHnzAWhsMFe/SVZXJIQObk44zNEQ==}
+  '@ai-sdk/ui-utils@1.2.11':
+    resolution: {integrity: sha512-3zcwCc8ezzFlwp3ZD15wAPjf2Au4s3vAbKsXQVyhxODHcmu0iyPO2Eua6D/vicq/AUm/BAo60r97O6HU+EI0+w==}
     engines: {node: '>=18'}
     peerDependencies:
-      zod: ^3.0.0
-    peerDependenciesMeta:
-      zod:
-        optional: true
+      zod: ^3.23.8
 
   '@ampproject/remapping@2.3.0':
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
@@ -3584,17 +3589,15 @@ packages:
     resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
     engines: {node: '>=8'}
 
-  ai@4.1.2:
-    resolution: {integrity: sha512-11efhPorWFphIpeCgjW6r/jk4wB5RWUGjxayHblBXCq6YEc7o5ki7vlmSnESprsDkMEfmONBWb/xM8pWjR5O2g==}
+  ai@4.3.16:
+    resolution: {integrity: sha512-KUDwlThJ5tr2Vw0A1ZkbDKNME3wzWhuVfAOwIvFUzl1TPVDFAXDFTXio3p+jaKneB+dKNCvFFlolYmmgHttG1g==}
     engines: {node: '>=18'}
     peerDependencies:
       react: ^18 || ^19 || ^19.0.0-rc
-      zod: ^3.0.0
+      zod: ^3.23.8
     peerDependenciesMeta:
       react:
         optional: true
-      zod:
-        optional: true
 
   ajv-formats@3.0.1:
     resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
@@ -8262,6 +8265,13 @@ snapshots:
     optionalDependencies:
       zod: 3.24.2
 
+  '@ai-sdk/provider-utils@2.2.8(zod@3.24.2)':
+    dependencies:
+      '@ai-sdk/provider': 1.1.3
+      nanoid: 3.3.11
+      secure-json-parse: 2.7.0
+      zod: 3.24.2
+
   '@ai-sdk/provider@0.0.12':
     dependencies:
       json-schema: 0.4.0
@@ -8286,23 +8296,26 @@ snapshots:
     dependencies:
       json-schema: 0.4.0
 
-  '@ai-sdk/react@1.1.2(react@18.3.1)(zod@3.24.2)':
+  '@ai-sdk/provider@1.1.3':
     dependencies:
-      '@ai-sdk/provider-utils': 2.1.2(zod@3.24.2)
-      '@ai-sdk/ui-utils': 1.1.2(zod@3.24.2)
+      json-schema: 0.4.0
+
+  '@ai-sdk/react@1.2.12(react@18.3.1)(zod@3.24.2)':
+    dependencies:
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.2)
+      '@ai-sdk/ui-utils': 1.2.11(zod@3.24.2)
+      react: 18.3.1
       swr: 2.3.3(react@18.3.1)
       throttleit: 2.1.0
     optionalDependencies:
-      react: 18.3.1
       zod: 3.24.2
 
-  '@ai-sdk/ui-utils@1.1.2(zod@3.24.2)':
+  '@ai-sdk/ui-utils@1.2.11(zod@3.24.2)':
     dependencies:
-      '@ai-sdk/provider': 1.0.6
-      '@ai-sdk/provider-utils': 2.1.2(zod@3.24.2)
-      zod-to-json-schema: 3.24.5(zod@3.24.2)
-    optionalDependencies:
+      '@ai-sdk/provider': 1.1.3
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.2)
       zod: 3.24.2
+      zod-to-json-schema: 3.24.5(zod@3.24.2)
 
   '@ampproject/remapping@2.3.0':
     dependencies:
@@ -11713,17 +11726,17 @@ snapshots:
       clean-stack: 2.2.0
       indent-string: 4.0.0
 
-  ai@4.1.2(react@18.3.1)(zod@3.24.2):
+  ai@4.3.16(react@18.3.1)(zod@3.24.2):
     dependencies:
-      '@ai-sdk/provider': 1.0.6
-      '@ai-sdk/provider-utils': 2.1.2(zod@3.24.2)
-      '@ai-sdk/react': 1.1.2(react@18.3.1)(zod@3.24.2)
-      '@ai-sdk/ui-utils': 1.1.2(zod@3.24.2)
+      '@ai-sdk/provider': 1.1.3
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.24.2)
+      '@ai-sdk/react': 1.2.12(react@18.3.1)(zod@3.24.2)
+      '@ai-sdk/ui-utils': 1.2.11(zod@3.24.2)
       '@opentelemetry/api': 1.9.0
       jsondiffpatch: 0.6.0
+      zod: 3.24.2
     optionalDependencies:
       react: 18.3.1
-      zod: 3.24.2
 
   ajv-formats@3.0.1(ajv@8.17.1):
     optionalDependencies:

From 5de162eec8c792be4f91d9db48bb5dbe26f3e56d Mon Sep 17 00:00:00 2001
From: Roamin <97863888+roaminro@users.noreply.github.com>
Date: Thu, 10 Jul 2025 17:54:15 +0000
Subject: [PATCH 02/11] feat(mcp): add Model Context Protocol integration

Add  MCP integration including:
- New MCP settings tab with server configuration
- Tool invocation UI components
- API endpoints for MCP management
- Integration with chat system for tool execution
- Example configurations
---
 .../@settings/core/ControlPanel.tsx           |   4 +
 app/components/@settings/core/constants.ts    |  20 +-
 app/components/@settings/core/types.ts        |   4 +-
 .../shared/components/TabManagement.tsx       |   2 +
 .../@settings/tabs/mcp/McpServerList.tsx      |  99 ++++
 .../@settings/tabs/mcp/McpServerListItem.tsx  |  70 +++
 .../@settings/tabs/mcp/McpStatusBadge.tsx     |  37 ++
 app/components/@settings/tabs/mcp/McpTab.tsx  | 239 +++++++++
 app/components/chat/AssistantMessage.tsx      |  28 ++
 app/components/chat/BaseChat.tsx              |   5 +
 app/components/chat/Chat.client.tsx           | 165 ++++---
 app/components/chat/ChatBox.tsx               |   2 +
 app/components/chat/MCPTools.tsx              | 129 +++++
 app/components/chat/Messages.client.tsx       |   5 +-
 app/components/chat/ToolInvocations.tsx       | 367 ++++++++++++++
 app/lib/services/mcpService.ts                | 457 ++++++++++++++++++
 app/lib/stores/mcp.ts                         | 115 +++++
 app/routes/api.chat.ts                        |  70 +--
 app/routes/api.mcp-check.ts                   |  16 +
 app/routes/api.mcp-update-config.ts           |  23 +
 app/styles/components/code.scss               |   2 +-
 app/types/context.ts                          |   8 +
 app/utils/constants.ts                        |   7 +
 icons/mcp.svg                                 |   1 +
 package.json                                  |   3 +
 pnpm-lock.yaml                                | 260 ++++++++++
 26 files changed, 2040 insertions(+), 98 deletions(-)
 create mode 100644 app/components/@settings/tabs/mcp/McpServerList.tsx
 create mode 100644 app/components/@settings/tabs/mcp/McpServerListItem.tsx
 create mode 100644 app/components/@settings/tabs/mcp/McpStatusBadge.tsx
 create mode 100644 app/components/@settings/tabs/mcp/McpTab.tsx
 create mode 100644 app/components/chat/MCPTools.tsx
 create mode 100644 app/components/chat/ToolInvocations.tsx
 create mode 100644 app/lib/services/mcpService.ts
 create mode 100644 app/lib/stores/mcp.ts
 create mode 100644 app/routes/api.mcp-check.ts
 create mode 100644 app/routes/api.mcp-update-config.ts
 create mode 100644 icons/mcp.svg

diff --git a/app/components/@settings/core/ControlPanel.tsx b/app/components/@settings/core/ControlPanel.tsx
index df32755..1beebf8 100644
--- a/app/components/@settings/core/ControlPanel.tsx
+++ b/app/components/@settings/core/ControlPanel.tsx
@@ -38,6 +38,7 @@ import CloudProvidersTab from '~/components/@settings/tabs/providers/cloud/Cloud
 import ServiceStatusTab from '~/components/@settings/tabs/providers/status/ServiceStatusTab';
 import LocalProvidersTab from '~/components/@settings/tabs/providers/local/LocalProvidersTab';
 import TaskManagerTab from '~/components/@settings/tabs/task-manager/TaskManagerTab';
+import McpTab from '~/components/@settings/tabs/mcp/McpTab';
 
 interface ControlPanelProps {
   open: boolean;
@@ -81,6 +82,7 @@ const TAB_DESCRIPTIONS: Record<TabType, string> = {
   update: 'Check for updates and release notes',
   'task-manager': 'Monitor system resources and processes',
   'tab-management': 'Configure visible tabs and their order',
+  mcp: 'Configure MCP (Model Context Protocol) servers',
 };
 
 // Beta status for experimental features
@@ -335,6 +337,8 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
         return <TaskManagerTab />;
       case 'service-status':
         return <ServiceStatusTab />;
+      case 'mcp':
+        return <McpTab />;
       default:
         return null;
     }
diff --git a/app/components/@settings/core/constants.ts b/app/components/@settings/core/constants.ts
index ff72a27..1921c5b 100644
--- a/app/components/@settings/core/constants.ts
+++ b/app/components/@settings/core/constants.ts
@@ -15,6 +15,7 @@ export const TAB_ICONS: Record<TabType, string> = {
   update: 'i-ph:arrow-clockwise-fill',
   'task-manager': 'i-ph:chart-line-fill',
   'tab-management': 'i-ph:squares-four-fill',
+  mcp: 'i-ph:hard-drives-bold',
 };
 
 export const TAB_LABELS: Record<TabType, string> = {
@@ -32,6 +33,7 @@ export const TAB_LABELS: Record<TabType, string> = {
   update: 'Updates',
   'task-manager': 'Task Manager',
   'tab-management': 'Tab Management',
+  mcp: 'MCP Servers',
 };
 
 export const TAB_DESCRIPTIONS: Record<TabType, string> = {
@@ -49,6 +51,7 @@ export const TAB_DESCRIPTIONS: Record<TabType, string> = {
   update: 'Check for updates and release notes',
   'task-manager': 'Monitor system resources and processes',
   'tab-management': 'Configure visible tabs and their order',
+  mcp: 'Configure MCP (Model Context Protocol) servers',
 };
 
 export const DEFAULT_TAB_CONFIG = [
@@ -58,18 +61,19 @@ export const DEFAULT_TAB_CONFIG = [
   { id: 'cloud-providers', visible: true, window: 'user' as const, order: 2 },
   { id: 'local-providers', visible: true, window: 'user' as const, order: 3 },
   { id: 'connection', visible: true, window: 'user' as const, order: 4 },
-  { id: 'notifications', visible: true, window: 'user' as const, order: 5 },
-  { id: 'event-logs', visible: true, window: 'user' as const, order: 6 },
+  { id: 'connection', visible: true, window: 'user' as const, order: 5 },
+  { id: 'notifications', visible: true, window: 'user' as const, order: 6 },
+  { id: 'mcp', visible: true, window: 'user' as const, order: 7 },
 
   // User Window Tabs (In dropdown, initially hidden)
-  { id: 'profile', visible: false, window: 'user' as const, order: 7 },
-  { id: 'settings', visible: false, window: 'user' as const, order: 8 },
-  { id: 'task-manager', visible: false, window: 'user' as const, order: 9 },
-  { id: 'service-status', visible: false, window: 'user' as const, order: 10 },
+  { id: 'profile', visible: false, window: 'user' as const, order: 8 },
+  { id: 'settings', visible: false, window: 'user' as const, order: 9 },
+  { id: 'task-manager', visible: false, window: 'user' as const, order: 10 },
+  { id: 'service-status', visible: false, window: 'user' as const, order: 11 },
 
   // User Window Tabs (Hidden, controlled by TaskManagerTab)
-  { id: 'debug', visible: false, window: 'user' as const, order: 11 },
-  { id: 'update', visible: false, window: 'user' as const, order: 12 },
+  { id: 'debug', visible: false, window: 'user' as const, order: 12 },
+  { id: 'update', visible: false, window: 'user' as const, order: 13 },
 
   // Developer Window Tabs (All visible by default)
   { id: 'features', visible: true, window: 'developer' as const, order: 0 },
diff --git a/app/components/@settings/core/types.ts b/app/components/@settings/core/types.ts
index 97d4d36..684a30a 100644
--- a/app/components/@settings/core/types.ts
+++ b/app/components/@settings/core/types.ts
@@ -16,7 +16,8 @@ export type TabType =
   | 'event-logs'
   | 'update'
   | 'task-manager'
-  | 'tab-management';
+  | 'tab-management'
+  | 'mcp';
 
 export type WindowType = 'user' | 'developer';
 
@@ -81,6 +82,7 @@ export const TAB_LABELS: Record<TabType, string> = {
   update: 'Updates',
   'task-manager': 'Task Manager',
   'tab-management': 'Tab Management',
+  mcp: 'MCP Servers',
 };
 
 export const categoryLabels: Record<SettingCategory, string> = {
diff --git a/app/components/@settings/shared/components/TabManagement.tsx b/app/components/@settings/shared/components/TabManagement.tsx
index 9ae1601..513e171 100644
--- a/app/components/@settings/shared/components/TabManagement.tsx
+++ b/app/components/@settings/shared/components/TabManagement.tsx
@@ -26,6 +26,7 @@ const TAB_ICONS: Record<TabType, string> = {
   update: 'i-ph:arrow-clockwise-fill',
   'task-manager': 'i-ph:chart-line-fill',
   'tab-management': 'i-ph:squares-four-fill',
+  mcp: 'i-ph:hard-drives-bold',
 };
 
 // Define which tabs are default in user mode
@@ -37,6 +38,7 @@ const DEFAULT_USER_TABS: TabType[] = [
   'connection',
   'notifications',
   'event-logs',
+  'mcp',
 ];
 
 // Define which tabs can be added to user mode
diff --git a/app/components/@settings/tabs/mcp/McpServerList.tsx b/app/components/@settings/tabs/mcp/McpServerList.tsx
new file mode 100644
index 0000000..6e15fa9
--- /dev/null
+++ b/app/components/@settings/tabs/mcp/McpServerList.tsx
@@ -0,0 +1,99 @@
+import type { MCPServer } from '~/lib/services/mcpService';
+import McpStatusBadge from '~/components/@settings/tabs/mcp/McpStatusBadge';
+import McpServerListItem from '~/components/@settings/tabs/mcp/McpServerListItem';
+
+type McpServerListProps = {
+  serverEntries: [string, MCPServer][];
+  expandedServer: string | null;
+  checkingServers: boolean;
+  onlyShowAvailableServers?: boolean;
+  toggleServerExpanded: (serverName: string) => void;
+};
+
+export default function McpServerList({
+  serverEntries,
+  expandedServer,
+  checkingServers,
+  onlyShowAvailableServers = false,
+  toggleServerExpanded,
+}: McpServerListProps) {
+  if (serverEntries.length === 0) {
+    return <p className="text-sm text-bolt-elements-textSecondary">No MCP servers configured</p>;
+  }
+
+  const filteredEntries = onlyShowAvailableServers
+    ? serverEntries.filter(([, s]) => s.status === 'available')
+    : serverEntries;
+
+  return (
+    <div className="space-y-2">
+      {filteredEntries.map(([serverName, mcpServer]) => {
+        const isAvailable = mcpServer.status === 'available';
+        const isExpanded = expandedServer === serverName;
+        const serverTools = isAvailable ? Object.entries(mcpServer.tools) : [];
+
+        return (
+          <div key={serverName} className="flex flex-col p-2 rounded-md bg-bolt-elements-background-depth-1">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2 min-w-0 flex-1">
+                <div
+                  onClick={() => toggleServerExpanded(serverName)}
+                  className="flex items-center gap-1.5 text-bolt-elements-textPrimary"
+                  aria-expanded={isExpanded}
+                >
+                  <div
+                    className={`i-ph:${isExpanded ? 'caret-down' : 'caret-right'} w-3 h-3 transition-transform duration-150`}
+                  />
+                  <span className="font-medium truncate text-left">{serverName}</span>
+                </div>
+
+                <div className="flex-1 min-w-0 truncate">
+                  {mcpServer.config.type === 'sse' || mcpServer.config.type === 'streamable-http' ? (
+                    <span className="text-xs text-bolt-elements-textSecondary truncate">{mcpServer.config.url}</span>
+                  ) : (
+                    <span className="text-xs text-bolt-elements-textSecondary truncate">
+                      {mcpServer.config.command} {mcpServer.config.args?.join(' ')}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <div className="ml-2 flex-shrink-0">
+                {checkingServers ? (
+                  <McpStatusBadge status="checking" />
+                ) : (
+                  <McpStatusBadge status={isAvailable ? 'available' : 'unavailable'} />
+                )}
+              </div>
+            </div>
+
+            {/* Error message */}
+            {!isAvailable && mcpServer.error && (
+              <div className="mt-1.5 ml-6 text-xs text-red-600 dark:text-red-400">Error: {mcpServer.error}</div>
+            )}
+
+            {/* Tool list */}
+            {isExpanded && isAvailable && (
+              <div className="mt-2">
+                <div className="text-bolt-elements-textSecondary text-xs font-medium ml-1 mb-1.5">Available Tools:</div>
+                {serverTools.length === 0 ? (
+                  <div className="ml-4 text-xs text-bolt-elements-textSecondary">No tools available</div>
+                ) : (
+                  <div className="mt-1 space-y-2">
+                    {serverTools.map(([toolName, toolSchema]) => (
+                      <McpServerListItem
+                        key={`${serverName}-${toolName}`}
+                        toolName={toolName}
+                        toolSchema={toolSchema}
+                      />
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/app/components/@settings/tabs/mcp/McpServerListItem.tsx b/app/components/@settings/tabs/mcp/McpServerListItem.tsx
new file mode 100644
index 0000000..7013dde
--- /dev/null
+++ b/app/components/@settings/tabs/mcp/McpServerListItem.tsx
@@ -0,0 +1,70 @@
+import type { Tool } from 'ai';
+
+type ParameterProperty = {
+  type?: string;
+  description?: string;
+};
+
+type ToolParameters = {
+  jsonSchema: {
+    properties?: Record<string, ParameterProperty>;
+    required?: string[];
+  };
+};
+
+type McpToolProps = {
+  toolName: string;
+  toolSchema: Tool;
+};
+
+export default function McpServerListItem({ toolName, toolSchema }: McpToolProps) {
+  if (!toolSchema) {
+    return null;
+  }
+
+  const parameters = (toolSchema.parameters as ToolParameters)?.jsonSchema.properties || {};
+  const requiredParams = (toolSchema.parameters as ToolParameters)?.jsonSchema.required || [];
+
+  return (
+    <div className="mt-2 ml-4 p-3 rounded-md bg-bolt-elements-background-depth-2 text-xs">
+      <div className="flex flex-col gap-1.5">
+        <h3 className="text-bolt-elements-textPrimary font-semibold truncate" title={toolName}>
+          {toolName}
+        </h3>
+
+        <p className="text-bolt-elements-textSecondary">{toolSchema.description || 'No description available'}</p>
+
+        {Object.keys(parameters).length > 0 && (
+          <div className="mt-2.5">
+            <h4 className="text-bolt-elements-textSecondary font-semibold mb-1.5">Parameters:</h4>
+            <ul className="ml-1 space-y-2">
+              {Object.entries(parameters).map(([paramName, paramDetails]) => (
+                <li key={paramName} className="break-words">
+                  <div className="flex items-start">
+                    <span className="font-medium text-bolt-elements-textPrimary">
+                      {paramName}
+                      {requiredParams.includes(paramName) && (
+                        <span className="text-red-600 dark:text-red-400 ml-1">*</span>
+                      )}
+                    </span>
+
+                    <span className="mx-2 text-bolt-elements-textSecondary">•</span>
+
+                    <div className="flex-1">
+                      {paramDetails.type && (
+                        <span className="text-bolt-elements-textSecondary italic">{paramDetails.type}</span>
+                      )}
+                      {paramDetails.description && (
+                        <div className="mt-0.5 text-bolt-elements-textSecondary">{paramDetails.description}</div>
+                      )}
+                    </div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/@settings/tabs/mcp/McpStatusBadge.tsx b/app/components/@settings/tabs/mcp/McpStatusBadge.tsx
new file mode 100644
index 0000000..3cbbb1f
--- /dev/null
+++ b/app/components/@settings/tabs/mcp/McpStatusBadge.tsx
@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+
+export default function McpStatusBadge({ status }: { status: 'checking' | 'available' | 'unavailable' }) {
+  const { styles, label, icon, ariaLabel } = useMemo(() => {
+    const base = 'px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1 transition-colors';
+
+    const config = {
+      checking: {
+        styles: `${base} bg-blue-100 text-blue-800 dark:bg-blue-900/80 dark:text-blue-200`,
+        label: 'Checking...',
+        ariaLabel: 'Checking server status',
+        icon: <span className="i-svg-spinners:90-ring-with-bg w-3 h-3 text-current animate-spin" aria-hidden="true" />,
+      },
+      available: {
+        styles: `${base} bg-green-100 text-green-800 dark:bg-green-900/80 dark:text-green-200`,
+        label: 'Available',
+        ariaLabel: 'Server available',
+        icon: <span className="i-ph:check-circle w-3 h-3 text-current" aria-hidden="true" />,
+      },
+      unavailable: {
+        styles: `${base} bg-red-100 text-red-800 dark:bg-red-900/80 dark:text-red-200`,
+        label: 'Unavailable',
+        ariaLabel: 'Server unavailable',
+        icon: <span className="i-ph:warning-circle w-3 h-3 text-current" aria-hidden="true" />,
+      },
+    };
+
+    return config[status];
+  }, [status]);
+
+  return (
+    <span className={styles} role="status" aria-live="polite" aria-label={ariaLabel}>
+      {icon}
+      {label}
+    </span>
+  );
+}
diff --git a/app/components/@settings/tabs/mcp/McpTab.tsx b/app/components/@settings/tabs/mcp/McpTab.tsx
new file mode 100644
index 0000000..9fb765b
--- /dev/null
+++ b/app/components/@settings/tabs/mcp/McpTab.tsx
@@ -0,0 +1,239 @@
+import { useEffect, useMemo, useState } from 'react';
+import { classNames } from '~/utils/classNames';
+import type { MCPConfig } from '~/lib/services/mcpService';
+import { toast } from 'react-toastify';
+import { useMCPStore } from '~/lib/stores/mcp';
+import McpServerList from '~/components/@settings/tabs/mcp/McpServerList';
+
+const EXAMPLE_MCP_CONFIG: MCPConfig = {
+  mcpServers: {
+    everything: {
+      type: 'stdio',
+      command: 'npx',
+      args: ['-y', '@modelcontextprotocol/server-everything'],
+    },
+    deepwiki: {
+      type: 'streamable-http',
+      url: 'https://mcp.deepwiki.com/mcp',
+    },
+    'local-sse': {
+      type: 'sse',
+      url: 'http://localhost:8000/sse',
+      headers: {
+        Authorization: 'Bearer mytoken123',
+      },
+    },
+  },
+};
+
+export default function McpTab() {
+  const settings = useMCPStore((state) => state.settings);
+  const isInitialized = useMCPStore((state) => state.isInitialized);
+  const serverTools = useMCPStore((state) => state.serverTools);
+  const initialize = useMCPStore((state) => state.initialize);
+  const updateSettings = useMCPStore((state) => state.updateSettings);
+  const checkServersAvailabilities = useMCPStore((state) => state.checkServersAvailabilities);
+
+  const [isSaving, setIsSaving] = useState(false);
+  const [mcpConfigText, setMCPConfigText] = useState('');
+  const [maxLLMSteps, setMaxLLMSteps] = useState(1);
+  const [error, setError] = useState<string | null>(null);
+  const [isCheckingServers, setIsCheckingServers] = useState(false);
+  const [expandedServer, setExpandedServer] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isInitialized) {
+      initialize().catch((err) => {
+        setError(`Failed to initialize MCP settings: ${err instanceof Error ? err.message : String(err)}`);
+        toast.error('Failed to load MCP configuration');
+      });
+    }
+  }, [isInitialized]);
+
+  useEffect(() => {
+    setMCPConfigText(JSON.stringify(settings.mcpConfig, null, 2));
+    setMaxLLMSteps(settings.maxLLMSteps);
+    setError(null);
+  }, [settings]);
+
+  const parsedConfig = useMemo(() => {
+    try {
+      setError(null);
+      return JSON.parse(mcpConfigText) as MCPConfig;
+    } catch (e) {
+      setError(`Invalid JSON format: ${e instanceof Error ? e.message : String(e)}`);
+      return null;
+    }
+  }, [mcpConfigText]);
+
+  const handleMaxLLMCallChange = (value: string) => {
+    setMaxLLMSteps(parseInt(value, 10));
+  };
+
+  const handleSave = async () => {
+    if (!parsedConfig) {
+      return;
+    }
+
+    setIsSaving(true);
+
+    try {
+      await updateSettings({
+        mcpConfig: parsedConfig,
+        maxLLMSteps,
+      });
+      toast.success('MCP configuration saved');
+
+      setError(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to save configuration');
+      toast.error('Failed to save MCP configuration');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleLoadExample = () => {
+    setMCPConfigText(JSON.stringify(EXAMPLE_MCP_CONFIG, null, 2));
+    setError(null);
+  };
+
+  const checkServerAvailability = async () => {
+    if (serverEntries.length === 0) {
+      return;
+    }
+
+    setIsCheckingServers(true);
+    setError(null);
+
+    try {
+      await checkServersAvailabilities();
+    } catch (e) {
+      setError(`Failed to check server availability: ${e instanceof Error ? e.message : String(e)}`);
+    } finally {
+      setIsCheckingServers(false);
+    }
+  };
+
+  const toggleServerExpanded = (serverName: string) => {
+    setExpandedServer(expandedServer === serverName ? null : serverName);
+  };
+
+  const serverEntries = useMemo(() => Object.entries(serverTools), [serverTools]);
+
+  return (
+    <div className="max-w-2xl mx-auto space-y-6">
+      <section aria-labelledby="server-status-heading">
+        <div className="flex justify-between items-center mb-3">
+          <h2 className="text-base font-medium text-bolt-elements-textPrimary">MCP Servers Configured</h2>{' '}
+          <button
+            onClick={checkServerAvailability}
+            disabled={isCheckingServers || !parsedConfig || serverEntries.length === 0}
+            className={classNames(
+              'px-3 py-1.5 rounded-lg text-sm',
+              'bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4',
+              'text-bolt-elements-textPrimary',
+              'transition-all duration-200',
+              'flex items-center gap-2',
+              'disabled:opacity-50 disabled:cursor-not-allowed',
+            )}
+          >
+            {isCheckingServers ? (
+              <div className="i-svg-spinners:90-ring-with-bg w-3 h-3 text-bolt-elements-loader-progress animate-spin" />
+            ) : (
+              <div className="i-ph:arrow-counter-clockwise w-3 h-3" />
+            )}
+            Check availability
+          </button>
+        </div>
+        <McpServerList
+          checkingServers={isCheckingServers}
+          expandedServer={expandedServer}
+          serverEntries={serverEntries}
+          toggleServerExpanded={toggleServerExpanded}
+        />
+      </section>
+
+      <section aria-labelledby="config-section-heading">
+        <h2 className="text-base font-medium text-bolt-elements-textPrimary mb-3">Configuration</h2>
+
+        <div className="space-y-4">
+          <div>
+            <label htmlFor="mcp-config" className="block text-sm text-bolt-elements-textSecondary mb-2">
+              Configuration JSON
+            </label>
+            <textarea
+              id="mcp-config"
+              value={mcpConfigText}
+              onChange={(e) => setMCPConfigText(e.target.value)}
+              className={classNames(
+                'w-full px-3 py-2 rounded-lg text-sm font-mono h-72',
+                'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
+                'border',
+                error ? 'border-bolt-elements-icon-error' : 'border-[#E5E5E5] dark:border-[#333333]',
+                'text-bolt-elements-textPrimary',
+                'focus:outline-none focus:ring-1 focus:ring-bolt-elements-focus',
+              )}
+            />
+          </div>
+          <div>{error && <p className="mt-2 mb-2 text-sm text-bolt-elements-icon-error">{error}</p>}</div>
+          <div>
+            <label htmlFor="max-llm-steps" className="block text-sm text-bolt-elements-textSecondary mb-2">
+              Maximum number of sequential LLM calls (steps)
+            </label>
+            <input
+              id="max-llm-steps"
+              type="number"
+              placeholder="Maximum number of sequential LLM calls"
+              min="1"
+              max="20"
+              value={maxLLMSteps}
+              onChange={(e) => handleMaxLLMCallChange(e.target.value)}
+              className="w-full px-3 py-2 text-bolt-elements-textPrimary text-sm rounded-lg bg-white dark:bg-bolt-elements-background-depth-4 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+            The MCP configuration format is identical to the one used in Claude Desktop.
+            <a
+              href="https://modelcontextprotocol.io/examples"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-bolt-elements-link hover:underline inline-flex items-center gap-1"
+            >
+              View example servers
+              <div className="i-ph:arrow-square-out w-4 h-4" />
+            </a>
+          </div>
+        </div>
+      </section>
+
+      <div className="flex flex-wrap justify-between gap-3 mt-6">
+        <button
+          onClick={handleLoadExample}
+          className="px-4 py-2 rounded-lg text-sm border border-bolt-elements-borderColor
+                    bg-bolt-elements-background-depth-2 text-bolt-elements-textSecondary
+                    hover:bg-bolt-elements-background-depth-3"
+        >
+          Load Example
+        </button>
+
+        <div className="flex gap-2">
+          <button
+            onClick={handleSave}
+            disabled={isSaving || !parsedConfig}
+            aria-disabled={isSaving || !parsedConfig}
+            className={classNames(
+              'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+              'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent',
+              'hover:bg-bolt-elements-item-backgroundActive',
+              'disabled:opacity-50 disabled:cursor-not-allowed',
+            )}
+          >
+            <div className="i-ph:floppy-disk w-4 h-4" />
+            {isSaving ? 'Saving...' : 'Save Configuration'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/chat/AssistantMessage.tsx b/app/components/chat/AssistantMessage.tsx
index 022b4fb..c9ecdba 100644
--- a/app/components/chat/AssistantMessage.tsx
+++ b/app/components/chat/AssistantMessage.tsx
@@ -7,6 +7,16 @@ import { WORK_DIR } from '~/utils/constants';
 import WithTooltip from '~/components/ui/Tooltip';
 import type { Message } from 'ai';
 import type { ProviderInfo } from '~/types/model';
+import type {
+  TextUIPart,
+  ReasoningUIPart,
+  ToolInvocationUIPart,
+  SourceUIPart,
+  FileUIPart,
+  StepStartUIPart,
+} from '@ai-sdk/ui-utils';
+import { ToolInvocations } from './ToolInvocations';
+import type { ToolCallAnnotation } from '~/types/context';
 
 interface AssistantMessageProps {
   content: string;
@@ -19,6 +29,10 @@ interface AssistantMessageProps {
   setChatMode?: (mode: 'discuss' | 'build') => void;
   model?: string;
   provider?: ProviderInfo;
+  parts:
+    | (TextUIPart | ReasoningUIPart | ToolInvocationUIPart | SourceUIPart | FileUIPart | StepStartUIPart)[]
+    | undefined;
+  addToolResult: ({ toolCallId, result }: { toolCallId: string; result: any }) => void;
 }
 
 function openArtifactInWorkbench(filePath: string) {
@@ -57,6 +71,8 @@ export const AssistantMessage = memo(
     setChatMode,
     model,
     provider,
+    parts,
+    addToolResult,
   }: AssistantMessageProps) => {
     const filteredAnnotations = (annotations?.filter(
       (annotation: JSONValue) =>
@@ -81,6 +97,11 @@ export const AssistantMessage = memo(
       totalTokens: number;
     } = filteredAnnotations.find((annotation) => annotation.type === 'usage')?.value;
 
+    const toolInvocations = parts?.filter((part) => part.type === 'tool-invocation');
+    const toolCallAnnotations = filteredAnnotations.filter(
+      (annotation) => annotation.type === 'toolCall',
+    ) as ToolCallAnnotation[];
+
     return (
       <div className="overflow-hidden w-full">
         <>
@@ -155,6 +176,13 @@ export const AssistantMessage = memo(
             </div>
           </div>
         </>
+        {toolInvocations && toolInvocations.length > 0 && (
+          <ToolInvocations
+            toolInvocations={toolInvocations}
+            toolCallAnnotations={toolCallAnnotations}
+            addToolResult={addToolResult}
+          />
+        )}
         <Markdown append={append} chatMode={chatMode} setChatMode={setChatMode} model={model} provider={provider} html>
           {content}
         </Markdown>
diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index f027abe..d944865 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -77,6 +77,7 @@ interface BaseChatProps {
   setDesignScheme?: (scheme: DesignScheme) => void;
   selectedElement?: ElementInfo | null;
   setSelectedElement?: (element: ElementInfo | null) => void;
+  addToolResult?: ({ toolCallId, result }: { toolCallId: string; result: any }) => void;
 }
 
 export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
@@ -121,6 +122,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       setDesignScheme,
       selectedElement,
       setSelectedElement,
+      addToolResult = () => {
+        throw new Error('addToolResult not implemented');
+      },
     },
     ref,
   ) => {
@@ -369,6 +373,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                         setChatMode={setChatMode}
                         provider={provider}
                         model={model}
+                        addToolResult={addToolResult}
                       />
                     ) : null;
                   }}
diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
index be5ff42..cbd07fe 100644
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -1,10 +1,6 @@
-/*
- * @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 { useChat } from '@ai-sdk/react';
 import { useAnimate } from 'framer-motion';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { cssTransition, toast, ToastContainer } from 'react-toastify';
@@ -29,6 +25,8 @@ import { filesToArtifacts } from '~/utils/fileUtils';
 import { supabaseConnection } from '~/lib/stores/supabase';
 import { defaultDesignScheme, type DesignScheme } from '~/types/design-scheme';
 import type { ElementInfo } from '~/components/workbench/Inspector';
+import type { TextUIPart, FileUIPart, Attachment } from '@ai-sdk/ui-utils';
+import { useMCPStore } from '~/lib/stores/mcp';
 
 const toastAnimation = cssTransition({
   enter: 'animated fadeInRight',
@@ -148,6 +146,8 @@ export const ChatImpl = memo(
     const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
     const [chatMode, setChatMode] = useState<'discuss' | 'build'>('build');
     const [selectedElement, setSelectedElement] = useState<ElementInfo | null>(null);
+    const mcpSettings = useMCPStore((state) => state.settings);
+
     const {
       messages,
       isLoading,
@@ -161,6 +161,7 @@ export const ChatImpl = memo(
       error,
       data: chatData,
       setData,
+      addToolResult,
     } = useChat({
       api: '/api/chat',
       body: {
@@ -178,6 +179,7 @@ export const ChatImpl = memo(
             anonKey: supabaseConn?.credentials?.anonKey,
           },
         },
+        maxLLMSteps: mcpSettings.maxLLMSteps,
       },
       sendExtraMessageFields: true,
       onError: (e) => {
@@ -222,12 +224,7 @@ export const ChatImpl = memo(
         runAnimation();
         append({
           role: 'user',
-          content: [
-            {
-              type: 'text',
-              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${prompt}`,
-            },
-          ] as any, // Type assertion to bypass compiler check
+          content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${prompt}`,
         });
       }
     }, [model, provider, searchParams]);
@@ -300,6 +297,59 @@ export const ChatImpl = memo(
       setChatStarted(true);
     };
 
+    // Helper function to create message parts array from text and images
+    const createMessageParts = (text: string, images: string[] = []): Array<TextUIPart | FileUIPart> => {
+      // Create an array of properly typed message parts
+      const parts: Array<TextUIPart | FileUIPart> = [
+        {
+          type: 'text',
+          text,
+        },
+      ];
+
+      // Add image parts if any
+      images.forEach((imageData) => {
+        // Extract correct MIME type from the data URL
+        const mimeType = imageData.split(';')[0].split(':')[1] || 'image/jpeg';
+
+        // Create file part according to AI SDK format
+        parts.push({
+          type: 'file',
+          mimeType,
+          data: imageData.replace(/^data:image\/[^;]+;base64,/, ''),
+        });
+      });
+
+      return parts;
+    };
+
+    // Helper function to convert File[] to Attachment[] for AI SDK
+    const filesToAttachments = async (files: File[]): Promise<Attachment[] | undefined> => {
+      if (files.length === 0) {
+        return undefined;
+      }
+
+      const attachments = await Promise.all(
+        files.map(
+          (file) =>
+            new Promise<Attachment>((resolve) => {
+              const reader = new FileReader();
+
+              reader.onloadend = () => {
+                resolve({
+                  name: file.name,
+                  contentType: file.type,
+                  url: reader.result as string,
+                });
+              };
+              reader.readAsDataURL(file);
+            }),
+        ),
+      );
+
+      return attachments;
+    };
+
     const sendMessage = async (_event: React.UIEvent, messageInput?: string) => {
       const messageContent = messageInput || input;
 
@@ -346,20 +396,14 @@ export const ChatImpl = memo(
 
             if (temResp) {
               const { assistantMessage, userMessage } = temResp;
+              const userMessageText = `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`;
+
               setMessages([
                 {
                   id: `1-${new Date().getTime()}`,
                   role: 'user',
-                  content: [
-                    {
-                      type: 'text',
-                      text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`,
-                    },
-                    ...imageDataList.map((imageData) => ({
-                      type: 'image',
-                      image: imageData,
-                    })),
-                  ] as any,
+                  content: userMessageText,
+                  parts: createMessageParts(userMessageText, imageDataList),
                 },
                 {
                   id: `2-${new Date().getTime()}`,
@@ -373,7 +417,13 @@ export const ChatImpl = memo(
                   annotations: ['hidden'],
                 },
               ]);
-              reload();
+
+              const reloadOptions =
+                uploadedFiles.length > 0
+                  ? { experimental_attachments: await filesToAttachments(uploadedFiles) }
+                  : undefined;
+
+              reload(reloadOptions);
               setInput('');
               Cookies.remove(PROMPT_COOKIE_KEY);
 
@@ -391,23 +441,19 @@ export const ChatImpl = memo(
         }
 
         // If autoSelectTemplate is disabled or template selection failed, proceed with normal message
+        const userMessageText = `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`;
+        const attachments = uploadedFiles.length > 0 ? await filesToAttachments(uploadedFiles) : undefined;
+
         setMessages([
           {
             id: `${new Date().getTime()}`,
             role: 'user',
-            content: [
-              {
-                type: 'text',
-                text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`,
-              },
-              ...imageDataList.map((imageData) => ({
-                type: 'image',
-                image: imageData,
-              })),
-            ] as any,
+            content: userMessageText,
+            parts: createMessageParts(userMessageText, imageDataList),
+            experimental_attachments: attachments,
           },
         ]);
-        reload();
+        reload(attachments ? { experimental_attachments: attachments } : undefined);
         setFakeLoading(false);
         setInput('');
         Cookies.remove(PROMPT_COOKIE_KEY);
@@ -432,35 +478,35 @@ export const ChatImpl = memo(
 
       if (modifiedFiles !== undefined) {
         const userUpdateArtifact = filesToArtifacts(modifiedFiles, `${Date.now()}`);
-        append({
-          role: 'user',
-          content: [
-            {
-              type: 'text',
-              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${userUpdateArtifact}${finalMessageContent}`,
-            },
-            ...imageDataList.map((imageData) => ({
-              type: 'image',
-              image: imageData,
-            })),
-          ] as any,
-        });
+        const messageText = `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${userUpdateArtifact}${finalMessageContent}`;
+
+        const attachmentOptions =
+          uploadedFiles.length > 0 ? { experimental_attachments: await filesToAttachments(uploadedFiles) } : undefined;
+
+        append(
+          {
+            role: 'user',
+            content: messageText,
+            parts: createMessageParts(messageText, imageDataList),
+          },
+          attachmentOptions,
+        );
 
         workbenchStore.resetAllFileModifications();
       } else {
-        append({
-          role: 'user',
-          content: [
-            {
-              type: 'text',
-              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`,
-            },
-            ...imageDataList.map((imageData) => ({
-              type: 'image',
-              image: imageData,
-            })),
-          ] as any,
-        });
+        const messageText = `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`;
+
+        const attachmentOptions =
+          uploadedFiles.length > 0 ? { experimental_attachments: await filesToAttachments(uploadedFiles) } : undefined;
+
+        append(
+          {
+            role: 'user',
+            content: messageText,
+            parts: createMessageParts(messageText, imageDataList),
+          },
+          attachmentOptions,
+        );
       }
 
       setInput('');
@@ -579,6 +625,7 @@ export const ChatImpl = memo(
         setDesignScheme={setDesignScheme}
         selectedElement={selectedElement}
         setSelectedElement={setSelectedElement}
+        addToolResult={addToolResult}
       />
     );
   },
diff --git a/app/components/chat/ChatBox.tsx b/app/components/chat/ChatBox.tsx
index 99aa835..8a9fefa 100644
--- a/app/components/chat/ChatBox.tsx
+++ b/app/components/chat/ChatBox.tsx
@@ -18,6 +18,7 @@ import type { ProviderInfo } from '~/types/model';
 import { ColorSchemeDialog } from '~/components/ui/ColorSchemeDialog';
 import type { DesignScheme } from '~/types/design-scheme';
 import type { ElementInfo } from '~/components/workbench/Inspector';
+import { McpTools } from './MCPTools';
 
 interface ChatBoxProps {
   isModelSettingsCollapsed: boolean;
@@ -260,6 +261,7 @@ export const ChatBox: React.FC<ChatBoxProps> = (props) => {
         <div className="flex justify-between items-center text-sm p-4 pt-2">
           <div className="flex gap-1 items-center">
             <ColorSchemeDialog designScheme={props.designScheme} setDesignScheme={props.setDesignScheme} />
+            <McpTools />
             <IconButton title="Upload file" className="transition-all" onClick={() => props.handleFileUpload()}>
               <div className="i-ph:paperclip text-xl"></div>
             </IconButton>
diff --git a/app/components/chat/MCPTools.tsx b/app/components/chat/MCPTools.tsx
new file mode 100644
index 0000000..3a9f923
--- /dev/null
+++ b/app/components/chat/MCPTools.tsx
@@ -0,0 +1,129 @@
+import { useEffect, useMemo, useState } from 'react';
+import { classNames } from '~/utils/classNames';
+import { Dialog, DialogRoot, DialogClose, DialogTitle, DialogButton } from '~/components/ui/Dialog';
+import { IconButton } from '~/components/ui/IconButton';
+import { useMCPStore } from '~/lib/stores/mcp';
+import McpServerList from '~/components/@settings/tabs/mcp/McpServerList';
+
+export function McpTools() {
+  const isInitialized = useMCPStore((state) => state.isInitialized);
+  const serverTools = useMCPStore((state) => state.serverTools);
+  const initialize = useMCPStore((state) => state.initialize);
+  const checkServersAvailabilities = useMCPStore((state) => state.checkServersAvailabilities);
+
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isCheckingServers, setIsCheckingServers] = useState(false);
+  const [expandedServer, setExpandedServer] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isInitialized) {
+      initialize();
+    }
+  }, [isInitialized]);
+
+  const checkServerAvailability = async () => {
+    setIsCheckingServers(true);
+    setError(null);
+
+    try {
+      await checkServersAvailabilities();
+    } catch (e) {
+      setError(`Failed to check server availability: ${e instanceof Error ? e.message : String(e)}`);
+    } finally {
+      setIsCheckingServers(false);
+    }
+  };
+
+  const toggleServerExpanded = (serverName: string) => {
+    setExpandedServer(expandedServer === serverName ? null : serverName);
+  };
+
+  const handleDialogOpen = (open: boolean) => {
+    setIsDialogOpen(open);
+  };
+
+  const serverEntries = useMemo(() => Object.entries(serverTools), [serverTools]);
+
+  return (
+    <div className="relative">
+      <div className="flex">
+        <IconButton
+          onClick={() => setIsDialogOpen(!isDialogOpen)}
+          title="MCP Tools Available"
+          disabled={!isInitialized}
+          className="transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {!isInitialized ? (
+            <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
+          ) : (
+            <div className="i-bolt:mcp text-xl"></div>
+          )}
+        </IconButton>
+      </div>
+
+      <DialogRoot open={isDialogOpen} onOpenChange={handleDialogOpen}>
+        {isDialogOpen && (
+          <Dialog className="max-w-4xl w-full p-6">
+            <div className="space-y-4 max-h-[80vh] overflow-y-auto pr-2">
+              <DialogTitle>
+                <div className="i-bolt:mcp text-xl"></div>
+                MCP tools
+              </DialogTitle>
+
+              <div className="space-y-4">
+                <div>
+                  <div className="flex justify-end items-center mb-2">
+                    <button
+                      onClick={checkServerAvailability}
+                      disabled={isCheckingServers || serverEntries.length === 0}
+                      className={classNames(
+                        'px-3 py-1.5 rounded-lg text-sm',
+                        'bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4',
+                        'text-bolt-elements-textPrimary',
+                        'transition-all duration-200',
+                        'flex items-center gap-2',
+                        'disabled:opacity-50 disabled:cursor-not-allowed',
+                      )}
+                    >
+                      {isCheckingServers ? (
+                        <div className="i-svg-spinners:90-ring-with-bg w-3 h-3 text-bolt-elements-loader-progress animate-spin" />
+                      ) : (
+                        <div className="i-ph:arrow-counter-clockwise w-3 h-3" />
+                      )}
+                      Check availability
+                    </button>
+                  </div>
+                  {serverEntries.length > 0 ? (
+                    <McpServerList
+                      checkingServers={isCheckingServers}
+                      expandedServer={expandedServer}
+                      serverEntries={serverEntries}
+                      onlyShowAvailableServers={true}
+                      toggleServerExpanded={toggleServerExpanded}
+                    />
+                  ) : (
+                    <div className="py-4 text-center text-bolt-elements-textSecondary">
+                      <p>No MCP servers configured</p>
+                      <p className="text-xs mt-1">Configure servers in Settings → MCP Servers</p>
+                    </div>
+                  )}
+                </div>
+
+                <div>{error && <p className="mt-2 text-sm text-bolt-elements-icon-error">{error}</p>}</div>
+              </div>
+
+              <div className="flex justify-end gap-2 mt-6">
+                <div className="flex gap-2">
+                  <DialogClose asChild>
+                    <DialogButton type="secondary">Close</DialogButton>
+                  </DialogClose>
+                </div>
+              </div>
+            </div>
+          </Dialog>
+        )}
+      </DialogRoot>
+    </div>
+  );
+}
diff --git a/app/components/chat/Messages.client.tsx b/app/components/chat/Messages.client.tsx
index c98aa4d..e221f4b 100644
--- a/app/components/chat/Messages.client.tsx
+++ b/app/components/chat/Messages.client.tsx
@@ -21,6 +21,7 @@ interface MessagesProps {
   setChatMode?: (mode: 'discuss' | 'build') => void;
   model?: string;
   provider?: ProviderInfo;
+  addToolResult: ({ toolCallId, result }: { toolCallId: string; result: any }) => void;
 }
 
 export const Messages = forwardRef<HTMLDivElement, MessagesProps>(
@@ -52,7 +53,7 @@ export const Messages = forwardRef<HTMLDivElement, MessagesProps>(
       <div id={id} className={props.className} ref={ref}>
         {messages.length > 0
           ? messages.map((message, index) => {
-              const { role, content, id: messageId, annotations } = message;
+              const { role, content, id: messageId, annotations, parts } = message;
               const isUserMessage = role === 'user';
               const isFirst = index === 0;
               const isHidden = annotations?.includes('hidden');
@@ -83,6 +84,8 @@ export const Messages = forwardRef<HTMLDivElement, MessagesProps>(
                         setChatMode={props.setChatMode}
                         model={props.model}
                         provider={props.provider}
+                        parts={parts}
+                        addToolResult={props.addToolResult}
                       />
                     )}
                   </div>
diff --git a/app/components/chat/ToolInvocations.tsx b/app/components/chat/ToolInvocations.tsx
new file mode 100644
index 0000000..9567d22
--- /dev/null
+++ b/app/components/chat/ToolInvocations.tsx
@@ -0,0 +1,367 @@
+import type { ToolInvocationUIPart } from '@ai-sdk/ui-utils';
+import { AnimatePresence, motion } from 'framer-motion';
+import { memo, useMemo, useState } from 'react';
+import { createHighlighter, type BundledLanguage, type BundledTheme, type HighlighterGeneric } from 'shiki';
+import { classNames } from '~/utils/classNames';
+import {
+  TOOL_EXECUTION_APPROVAL,
+  TOOL_EXECUTION_DENIED,
+  TOOL_EXECUTION_ERROR,
+  TOOL_NO_EXECUTE_FUNCTION,
+} from '~/utils/constants';
+import { cubicEasingFn } from '~/utils/easings';
+import { logger } from '~/utils/logger';
+import { themeStore, type Theme } from '~/lib/stores/theme';
+import { useStore } from '@nanostores/react';
+import type { ToolCallAnnotation } from '~/types/context';
+
+const highlighterOptions = {
+  langs: ['json'],
+  themes: ['light-plus', 'dark-plus'],
+};
+
+const jsonHighlighter: HighlighterGeneric<BundledLanguage, BundledTheme> =
+  import.meta.hot?.data.jsonHighlighter ?? (await createHighlighter(highlighterOptions));
+
+if (import.meta.hot) {
+  import.meta.hot.data.jsonHighlighter = jsonHighlighter;
+}
+
+interface JsonCodeBlockProps {
+  className?: string;
+  code: string;
+  theme: Theme;
+}
+
+function JsonCodeBlock({ className, code, theme }: JsonCodeBlockProps) {
+  let formattedCode = code;
+
+  try {
+    if (typeof formattedCode === 'object') {
+      formattedCode = JSON.stringify(formattedCode, null, 2);
+    } else if (typeof formattedCode === 'string') {
+      // Attempt to parse and re-stringify for formatting
+      try {
+        const parsed = JSON.parse(formattedCode);
+        formattedCode = JSON.stringify(parsed, null, 2);
+      } catch {
+        // Leave as is if not JSON
+      }
+    }
+  } catch (e) {
+    // If parsing fails, keep original code
+    logger.error('Failed to parse JSON', { error: e });
+  }
+
+  return (
+    <div
+      className={classNames('text-xs rounded-md overflow-hidden mcp-tool-invocation-code', className)}
+      dangerouslySetInnerHTML={{
+        __html: jsonHighlighter.codeToHtml(formattedCode, {
+          lang: 'json',
+          theme: theme === 'dark' ? 'dark-plus' : 'light-plus',
+        }),
+      }}
+      style={{
+        padding: '0',
+        margin: '0',
+      }}
+    ></div>
+  );
+}
+
+interface ToolInvocationsProps {
+  toolInvocations: ToolInvocationUIPart[];
+  toolCallAnnotations: ToolCallAnnotation[];
+  addToolResult: ({ toolCallId, result }: { toolCallId: string; result: any }) => void;
+}
+
+export const ToolInvocations = memo(({ toolInvocations, toolCallAnnotations, addToolResult }: ToolInvocationsProps) => {
+  const theme = useStore(themeStore);
+  const [showDetails, setShowDetails] = useState(false);
+
+  const toggleDetails = () => {
+    setShowDetails((prev) => !prev);
+  };
+
+  const toolCalls = useMemo(
+    () => toolInvocations.filter((inv) => inv.toolInvocation.state === 'call'),
+    [toolInvocations],
+  );
+
+  const toolResults = useMemo(
+    () => toolInvocations.filter((inv) => inv.toolInvocation.state === 'result'),
+    [toolInvocations],
+  );
+
+  const hasToolCalls = toolCalls.length > 0;
+  const hasToolResults = toolResults.length > 0;
+
+  if (!hasToolCalls && !hasToolResults) {
+    return null;
+  }
+
+  return (
+    <div className="tool-invocation border border-bolt-elements-borderColor flex flex-col overflow-hidden rounded-lg w-full transition-border duration-150 mt-4 mb-4">
+      <div className="flex">
+        <button
+          className="flex items-stretch bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover w-full overflow-hidden"
+          onClick={toggleDetails}
+          aria-label={showDetails ? 'Collapse details' : 'Expand details'}
+        >
+          <div className="p-2">
+            <div className="i-ph:wrench-fill text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"></div>
+          </div>
+          <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
+          <div className="px-5 p-2 w-full text-left">
+            <div className="w-full text-bolt-elements-textPrimary font-medium leading-5 text-sm">
+              MCP Tool Invocations{' '}
+              {hasToolResults && (
+                <span className="w-full w-full text-bolt-elements-textSecondary text-xs mt-0.5">
+                  ({toolResults.length} tool{hasToolResults ? 's' : ''} used)
+                </span>
+              )}
+            </div>
+          </div>
+        </button>
+        <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
+        <AnimatePresence>
+          {hasToolResults && (
+            <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={toggleDetails}
+            >
+              <div className="p-2">
+                <div
+                  className={`${showDetails ? 'i-ph:caret-up-bold' : 'i-ph:caret-down-bold'} text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors`}
+                ></div>
+              </div>
+            </motion.button>
+          )}
+        </AnimatePresence>
+      </div>
+      <AnimatePresence>
+        {hasToolCalls && (
+          <motion.div
+            className="details"
+            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">
+              <ToolCallsList
+                toolInvocations={toolCalls}
+                toolCallAnnotations={toolCallAnnotations}
+                addToolResult={addToolResult}
+                theme={theme}
+              />
+            </div>
+          </motion.div>
+        )}
+
+        {hasToolResults && showDetails && (
+          <motion.div
+            className="details"
+            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">
+              <ToolResultsList toolInvocations={toolResults} toolCallAnnotations={toolCallAnnotations} theme={theme} />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+});
+
+const toolVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 },
+};
+
+interface ToolResultsListProps {
+  toolInvocations: ToolInvocationUIPart[];
+  toolCallAnnotations: ToolCallAnnotation[];
+  theme: Theme;
+}
+
+const ToolResultsList = memo(({ toolInvocations, toolCallAnnotations, theme }: ToolResultsListProps) => {
+  return (
+    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
+      <ul className="list-none space-y-4">
+        {toolInvocations.map((tool, index) => {
+          const toolCallState = tool.toolInvocation.state;
+
+          if (toolCallState !== 'result') {
+            return null;
+          }
+
+          const { toolName, toolCallId } = tool.toolInvocation;
+
+          const annotation = toolCallAnnotations.find((annotation) => {
+            return annotation.toolCallId === toolCallId;
+          });
+
+          const isErrorResult = [TOOL_NO_EXECUTE_FUNCTION, TOOL_EXECUTION_DENIED, TOOL_EXECUTION_ERROR].includes(
+            tool.toolInvocation.result,
+          );
+
+          return (
+            <motion.li
+              key={index}
+              variants={toolVariants}
+              initial="hidden"
+              animate="visible"
+              transition={{
+                duration: 0.2,
+                ease: cubicEasingFn,
+              }}
+            >
+              <div className="flex items-center gap-1.5 text-xs mb-1">
+                {isErrorResult ? (
+                  <div className="text-lg text-bolt-elements-icon-error">
+                    <div className="i-ph:x"></div>
+                  </div>
+                ) : (
+                  <div className="text-lg text-bolt-elements-icon-success">
+                    <div className="i-ph:check"></div>
+                  </div>
+                )}
+                <div className="text-bolt-elements-textSecondary text-xs">Server:</div>
+                <div className="text-bolt-elements-textPrimary font-semibold">{annotation?.serverName}</div>
+              </div>
+
+              <div className="ml-6 mb-2">
+                <div className="text-bolt-elements-textSecondary text-xs mb-1">
+                  Tool: <span className="text-bolt-elements-textPrimary font-semibold">{toolName}</span>
+                </div>
+                <div className="text-bolt-elements-textSecondary text-xs mb-1">
+                  Description:{' '}
+                  <span className="text-bolt-elements-textPrimary font-semibold">{annotation?.toolDescription}</span>
+                </div>
+                <div className="text-bolt-elements-textSecondary text-xs mb-1">Parameters:</div>
+                <div className="bg-[#FAFAFA] dark:bg-[#0A0A0A] p-3 rounded-md">
+                  <JsonCodeBlock className="mb-0" code={JSON.stringify(tool.toolInvocation.args)} theme={theme} />
+                </div>
+                <div className="text-bolt-elements-textSecondary text-xs mt-3 mb-1">Result:</div>
+                <div className="bg-[#FAFAFA] dark:bg-[#0A0A0A] p-3 rounded-md">
+                  <JsonCodeBlock className="mb-0" code={JSON.stringify(tool.toolInvocation.result)} theme={theme} />
+                </div>
+              </div>
+            </motion.li>
+          );
+        })}
+      </ul>
+    </motion.div>
+  );
+});
+
+interface ToolCallsListProps {
+  toolInvocations: ToolInvocationUIPart[];
+  toolCallAnnotations: ToolCallAnnotation[];
+  addToolResult: ({ toolCallId, result }: { toolCallId: string; result: any }) => void;
+  theme: Theme;
+}
+
+const ToolCallsList = memo(({ toolInvocations, toolCallAnnotations, addToolResult, theme }: ToolCallsListProps) => {
+  return (
+    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
+      <ul className="list-none space-y-4">
+        {toolInvocations.map((tool, index) => {
+          const toolCallState = tool.toolInvocation.state;
+
+          if (toolCallState !== 'call') {
+            return null;
+          }
+
+          const { toolName, toolCallId } = tool.toolInvocation;
+
+          const annotation = toolCallAnnotations.find((annotation) => {
+            return annotation.toolCallId === toolCallId;
+          });
+
+          return (
+            <motion.li
+              key={index}
+              variants={toolVariants}
+              initial="hidden"
+              animate="visible"
+              transition={{
+                duration: 0.2,
+                ease: cubicEasingFn,
+              }}
+            >
+              <div className="ml-6 mb-2">
+                <div key={toolCallId}>
+                  <div className="text-bolt-elements-textPrimary">Bolt wants to use a tool.</div>
+                  <div className="text-bolt-elements-textSecondary text-xs mb-1">
+                    Server:{' '}
+                    <span className="text-bolt-elements-textPrimary font-semibold">{annotation?.serverName}</span>
+                  </div>
+                  <div className="text-bolt-elements-textSecondary text-xs mb-1">
+                    Tool: <span className="text-bolt-elements-textPrimary font-semibold">{toolName}</span>
+                  </div>
+                  <div className="text-bolt-elements-textSecondary text-xs mb-1">
+                    Description:{' '}
+                    <span className="text-bolt-elements-textPrimary font-semibold">{annotation?.toolDescription}</span>
+                  </div>
+                  <div className="text-bolt-elements-textSecondary text-xs mb-1">Parameters:</div>
+                  <div className="bg-[#FAFAFA] dark:bg-[#0A0A0A] p-3 rounded-md">
+                    <JsonCodeBlock className="mb-0" code={JSON.stringify(tool.toolInvocation.args)} theme={theme} />
+                  </div>{' '}
+                  <div className="flex justify-end gap-2 pt-2">
+                    <button
+                      className={classNames(
+                        'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+                        'bg-purple-500 hover:bg-purple-600',
+                        'text-white',
+                        'disabled:opacity-50 disabled:cursor-not-allowed',
+                      )}
+                      onClick={() =>
+                        addToolResult({
+                          toolCallId,
+                          result: TOOL_EXECUTION_APPROVAL.APPROVE,
+                        })
+                      }
+                    >
+                      Approve
+                    </button>
+                    <button
+                      className={classNames(
+                        'px-3 py-1.5 rounded-lg text-sm',
+                        'bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4',
+                        'text-bolt-elements-textPrimary',
+                        'transition-all duration-200',
+                        'flex items-center gap-2',
+                      )}
+                      onClick={() =>
+                        addToolResult({
+                          toolCallId,
+                          result: TOOL_EXECUTION_APPROVAL.REJECT,
+                        })
+                      }
+                    >
+                      Reject
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </motion.li>
+          );
+        })}
+      </ul>
+    </motion.div>
+  );
+});
diff --git a/app/lib/services/mcpService.ts b/app/lib/services/mcpService.ts
new file mode 100644
index 0000000..192a269
--- /dev/null
+++ b/app/lib/services/mcpService.ts
@@ -0,0 +1,457 @@
+import {
+  experimental_createMCPClient,
+  type ToolSet,
+  type Message,
+  type DataStreamWriter,
+  convertToCoreMessages,
+  formatDataStreamPart,
+} from 'ai';
+import { Experimental_StdioMCPTransport } from 'ai/mcp-stdio';
+import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
+import { z } from 'zod';
+import type { ToolCallAnnotation } from '~/types/context';
+import {
+  TOOL_EXECUTION_APPROVAL,
+  TOOL_EXECUTION_DENIED,
+  TOOL_EXECUTION_ERROR,
+  TOOL_NO_EXECUTE_FUNCTION,
+} from '~/utils/constants';
+import { createScopedLogger } from '~/utils/logger';
+
+const logger = createScopedLogger('mcp-service');
+
+export const stdioServerConfigSchema = z
+  .object({
+    type: z.enum(['stdio']).optional(),
+    command: z.string().min(1, 'Command cannot be empty'),
+    args: z.array(z.string()).optional(),
+    cwd: z.string().optional(),
+    env: z.record(z.string()).optional(),
+  })
+  .transform((data) => ({
+    ...data,
+    type: 'stdio' as const,
+  }));
+export type STDIOServerConfig = z.infer<typeof stdioServerConfigSchema>;
+
+export const sseServerConfigSchema = z
+  .object({
+    type: z.enum(['sse']).optional(),
+    url: z.string().url('URL must be a valid URL format'),
+    headers: z.record(z.string()).optional(),
+  })
+  .transform((data) => ({
+    ...data,
+    type: 'sse' as const,
+  }));
+export type SSEServerConfig = z.infer<typeof sseServerConfigSchema>;
+
+export const streamableHTTPServerConfigSchema = z
+  .object({
+    type: z.enum(['streamable-http']).optional(),
+    url: z.string().url('URL must be a valid URL format'),
+    headers: z.record(z.string()).optional(),
+  })
+  .transform((data) => ({
+    ...data,
+    type: 'streamable-http' as const,
+  }));
+
+export type StreamableHTTPServerConfig = z.infer<typeof streamableHTTPServerConfigSchema>;
+
+export const mcpServerConfigSchema = z.union([
+  stdioServerConfigSchema,
+  sseServerConfigSchema,
+  streamableHTTPServerConfigSchema,
+]);
+export type MCPServerConfig = z.infer<typeof mcpServerConfigSchema>;
+
+export const mcpConfigSchema = z.object({
+  mcpServers: z.record(z.string(), mcpServerConfigSchema),
+});
+export type MCPConfig = z.infer<typeof mcpConfigSchema>;
+
+export type MCPClient = {
+  tools: () => Promise<ToolSet>;
+  close: () => Promise<void>;
+} & {
+  serverName: string;
+};
+
+export type ToolCall = {
+  type: 'tool-call';
+  toolCallId: string;
+  toolName: string;
+  args: Record<string, unknown>;
+};
+
+export type MCPServerTools = Record<string, MCPServer>;
+
+export type MCPServerAvailable = {
+  status: 'available';
+  tools: ToolSet;
+  client: MCPClient;
+  config: MCPServerConfig;
+};
+export type MCPServerUnavailable = {
+  status: 'unavailable';
+  error: string;
+  client: MCPClient | null;
+  config: MCPServerConfig;
+};
+export type MCPServer = MCPServerAvailable | MCPServerUnavailable;
+
+export class MCPService {
+  private static _instance: MCPService;
+  private _tools: ToolSet = {};
+  private _toolsWithoutExecute: ToolSet = {};
+  private _mcpToolsPerServer: MCPServerTools = {};
+  private _toolNamesToServerNames = new Map<string, string>();
+  private _config: MCPConfig = {
+    mcpServers: {},
+  };
+
+  static getInstance(): MCPService {
+    if (!MCPService._instance) {
+      MCPService._instance = new MCPService();
+    }
+
+    return MCPService._instance;
+  }
+
+  private _validateServerConfig(serverName: string, config: any): MCPServerConfig {
+    const hasStdioField = config.command !== undefined;
+    const hasUrlField = config.url !== undefined;
+
+    if (hasStdioField && hasUrlField) {
+      throw new Error(`cannot have "command" and "url" defined for the same server.`);
+    }
+
+    if (!config.type && hasStdioField) {
+      config.type = 'stdio';
+    }
+
+    if (hasUrlField && !config.type) {
+      throw new Error(`missing "type" field, only "sse" and "streamable-http" are valid options.`);
+    }
+
+    if (!['stdio', 'sse', 'streamable-http'].includes(config.type)) {
+      throw new Error(`provided "type" is invalid, only "stdio", "sse" or "streamable-http" are valid options.`);
+    }
+
+    // Check for type/field mismatch
+    if (config.type === 'stdio' && !hasStdioField) {
+      throw new Error(`missing "command" field.`);
+    }
+
+    if (['sse', 'streamable-http'].includes(config.type) && !hasUrlField) {
+      throw new Error(`missing "url" field.`);
+    }
+
+    try {
+      return mcpServerConfigSchema.parse(config);
+    } catch (validationError) {
+      if (validationError instanceof z.ZodError) {
+        const errorMessages = validationError.errors.map((err) => `${err.path.join('.')}: ${err.message}`).join('; ');
+        throw new Error(`Invalid configuration for server "${serverName}": ${errorMessages}`);
+      }
+
+      throw validationError;
+    }
+  }
+
+  async updateConfig(config: MCPConfig) {
+    logger.debug('updating config', JSON.stringify(config));
+    this._config = config;
+    await this._createClients();
+
+    return this._mcpToolsPerServer;
+  }
+
+  private async _createStreamableHTTPClient(
+    serverName: string,
+    config: StreamableHTTPServerConfig,
+  ): Promise<MCPClient> {
+    logger.debug(`Creating Streamable-HTTP client for ${serverName} with URL: ${config.url}`);
+
+    const client = await experimental_createMCPClient({
+      transport: new StreamableHTTPClientTransport(new URL(config.url), {
+        requestInit: {
+          headers: config.headers,
+        },
+      }),
+    });
+
+    return Object.assign(client, { serverName });
+  }
+
+  private async _createSSEClient(serverName: string, config: SSEServerConfig): Promise<MCPClient> {
+    logger.debug(`Creating SSE client for ${serverName} with URL: ${config.url}`);
+
+    const client = await experimental_createMCPClient({
+      transport: config,
+    });
+
+    return Object.assign(client, { serverName });
+  }
+
+  private async _createStdioClient(serverName: string, config: STDIOServerConfig): Promise<MCPClient> {
+    logger.debug(
+      `Creating STDIO client for '${serverName}' with command: '${config.command}' ${config.args?.join(' ') || ''}`,
+    );
+
+    const client = await experimental_createMCPClient({ transport: new Experimental_StdioMCPTransport(config) });
+
+    return Object.assign(client, { serverName });
+  }
+
+  private _registerTools(serverName: string, tools: ToolSet) {
+    for (const [toolName, tool] of Object.entries(tools)) {
+      if (this._tools[toolName]) {
+        const existingServerName = this._toolNamesToServerNames.get(toolName);
+
+        if (existingServerName && existingServerName !== serverName) {
+          logger.warn(`Tool conflict: "${toolName}" from "${serverName}" overrides tool from "${existingServerName}"`);
+        }
+      }
+
+      this._tools[toolName] = tool;
+      this._toolsWithoutExecute[toolName] = { ...tool, execute: undefined };
+      this._toolNamesToServerNames.set(toolName, serverName);
+    }
+  }
+
+  private async _createMCPClient(serverName: string, serverConfig: MCPServerConfig): Promise<MCPClient> {
+    const validatedConfig = this._validateServerConfig(serverName, serverConfig);
+
+    if (validatedConfig.type === 'stdio') {
+      return await this._createStdioClient(serverName, serverConfig as STDIOServerConfig);
+    } else if (validatedConfig.type === 'sse') {
+      return await this._createSSEClient(serverName, serverConfig as SSEServerConfig);
+    } else {
+      return await this._createStreamableHTTPClient(serverName, serverConfig as StreamableHTTPServerConfig);
+    }
+  }
+
+  private async _createClients() {
+    await this._closeClients();
+
+    const createClientPromises = Object.entries(this._config?.mcpServers || []).map(async ([serverName, config]) => {
+      let client: MCPClient | null = null;
+
+      try {
+        client = await this._createMCPClient(serverName, config);
+
+        try {
+          const tools = await client.tools();
+
+          this._registerTools(serverName, tools);
+
+          this._mcpToolsPerServer[serverName] = {
+            status: 'available',
+            client,
+            tools,
+            config,
+          };
+        } catch (error) {
+          logger.error(`Failed to get tools from server ${serverName}:`, error);
+          this._mcpToolsPerServer[serverName] = {
+            status: 'unavailable',
+            error: 'could not retrieve tools from server',
+            client,
+            config,
+          };
+        }
+      } catch (error) {
+        logger.error(`Failed to initialize MCP client for server: ${serverName}`, error);
+        this._mcpToolsPerServer[serverName] = {
+          status: 'unavailable',
+          error: (error as Error).message,
+          client,
+          config,
+        };
+      }
+    });
+
+    await Promise.allSettled(createClientPromises);
+  }
+
+  async checkServersAvailabilities() {
+    this._tools = {};
+    this._toolsWithoutExecute = {};
+    this._toolNamesToServerNames.clear();
+
+    const checkPromises = Object.entries(this._mcpToolsPerServer).map(async ([serverName, server]) => {
+      let client = server.client;
+
+      try {
+        logger.debug(`Checking MCP server "${serverName}" availability: start`);
+
+        if (!client) {
+          client = await this._createMCPClient(serverName, this._config?.mcpServers[serverName]);
+        }
+
+        try {
+          const tools = await client.tools();
+
+          this._registerTools(serverName, tools);
+
+          this._mcpToolsPerServer[serverName] = {
+            status: 'available',
+            client,
+            tools,
+            config: server.config,
+          };
+        } catch (error) {
+          logger.error(`Failed to get tools from server ${serverName}:`, error);
+          this._mcpToolsPerServer[serverName] = {
+            status: 'unavailable',
+            error: 'could not retrieve tools from server',
+            client,
+            config: server.config,
+          };
+        }
+
+        logger.debug(`Checking MCP server "${serverName}" availability: end`);
+      } catch (error) {
+        logger.error(`Failed to connect to server ${serverName}:`, error);
+        this._mcpToolsPerServer[serverName] = {
+          status: 'unavailable',
+          error: 'could not connect to server',
+          client,
+          config: server.config,
+        };
+      }
+    });
+
+    await Promise.allSettled(checkPromises);
+
+    return this._mcpToolsPerServer;
+  }
+
+  private async _closeClients(): Promise<void> {
+    const closePromises = Object.entries(this._mcpToolsPerServer).map(async ([serverName, server]) => {
+      if (!server.client) {
+        return;
+      }
+
+      logger.debug(`Closing client for server "${serverName}"`);
+
+      try {
+        await server.client.close();
+      } catch (error) {
+        logger.error(`Error closing client for ${serverName}:`, error);
+      }
+    });
+
+    await Promise.allSettled(closePromises);
+    this._tools = {};
+    this._toolsWithoutExecute = {};
+    this._mcpToolsPerServer = {};
+    this._toolNamesToServerNames.clear();
+  }
+
+  isValidToolName(toolName: string): boolean {
+    return toolName in this._tools;
+  }
+
+  processToolCall(toolCall: ToolCall, dataStream: DataStreamWriter): void {
+    const { toolCallId, toolName } = toolCall;
+
+    if (this.isValidToolName(toolName)) {
+      const { description = 'No description available' } = this.toolsWithoutExecute[toolName];
+      const serverName = this._toolNamesToServerNames.get(toolName);
+
+      if (serverName) {
+        dataStream.writeMessageAnnotation({
+          type: 'toolCall',
+          toolCallId,
+          serverName,
+          toolName,
+          toolDescription: description,
+        } satisfies ToolCallAnnotation);
+      }
+    }
+  }
+
+  async processToolInvocations(messages: Message[], dataStream: DataStreamWriter): Promise<Message[]> {
+    const lastMessage = messages[messages.length - 1];
+    const parts = lastMessage.parts;
+
+    if (!parts) {
+      return messages;
+    }
+
+    const processedParts = await Promise.all(
+      parts.map(async (part) => {
+        // Only process tool invocations parts
+        if (part.type !== 'tool-invocation') {
+          return part;
+        }
+
+        const { toolInvocation } = part;
+        const { toolName, toolCallId } = toolInvocation;
+
+        // return part as-is if tool does not exist, or if it's not a tool call result
+        if (!this.isValidToolName(toolName) || toolInvocation.state !== 'result') {
+          return part;
+        }
+
+        let result;
+
+        if (toolInvocation.result === TOOL_EXECUTION_APPROVAL.APPROVE) {
+          const toolInstance = this._tools[toolName];
+
+          if (toolInstance && typeof toolInstance.execute === 'function') {
+            logger.debug(`calling tool "${toolName}" with args: ${JSON.stringify(toolInvocation.args)}`);
+
+            try {
+              result = await toolInstance.execute(toolInvocation.args, {
+                messages: convertToCoreMessages(messages),
+                toolCallId,
+              });
+            } catch (error) {
+              logger.error(`error while calling tool "${toolName}":`, error);
+              result = TOOL_EXECUTION_ERROR;
+            }
+          } else {
+            result = TOOL_NO_EXECUTE_FUNCTION;
+          }
+        } else if (toolInvocation.result === TOOL_EXECUTION_APPROVAL.REJECT) {
+          result = TOOL_EXECUTION_DENIED;
+        } else {
+          // For any unhandled responses, return the original part.
+          return part;
+        }
+
+        // Forward updated tool result to the client.
+        dataStream.write(
+          formatDataStreamPart('tool_result', {
+            toolCallId,
+            result,
+          }),
+        );
+
+        // Return updated toolInvocation with the actual result.
+        return {
+          ...part,
+          toolInvocation: {
+            ...toolInvocation,
+            result,
+          },
+        };
+      }),
+    );
+
+    // Finally return the processed messages
+    return [...messages.slice(0, -1), { ...lastMessage, parts: processedParts }];
+  }
+
+  get tools() {
+    return this._tools;
+  }
+
+  get toolsWithoutExecute() {
+    return this._toolsWithoutExecute;
+  }
+}
diff --git a/app/lib/stores/mcp.ts b/app/lib/stores/mcp.ts
new file mode 100644
index 0000000..18294ca
--- /dev/null
+++ b/app/lib/stores/mcp.ts
@@ -0,0 +1,115 @@
+import { create } from 'zustand';
+import type { MCPConfig, MCPServerTools } from '~/lib/services/mcpService';
+
+const MCP_SETTINGS_KEY = 'mcp_settings';
+const isBrowser = typeof window !== 'undefined';
+
+type MCPSettings = {
+  mcpConfig: MCPConfig;
+  maxLLMSteps: number;
+};
+
+const defaultSettings = {
+  maxLLMSteps: 5,
+  mcpConfig: {
+    mcpServers: {},
+  },
+} satisfies MCPSettings;
+
+type Store = {
+  isInitialized: boolean;
+  settings: MCPSettings;
+  serverTools: MCPServerTools;
+  error: string | null;
+  isUpdatingConfig: boolean;
+};
+
+type Actions = {
+  initialize: () => Promise<void>;
+  updateSettings: (settings: MCPSettings) => Promise<void>;
+  checkServersAvailabilities: () => Promise<void>;
+};
+
+export const useMCPStore = create<Store & Actions>((set, get) => ({
+  isInitialized: false,
+  settings: defaultSettings,
+  serverTools: {},
+  error: null,
+  isUpdatingConfig: false,
+  initialize: async () => {
+    if (get().isInitialized) {
+      return;
+    }
+
+    if (isBrowser) {
+      const savedConfig = localStorage.getItem(MCP_SETTINGS_KEY);
+
+      if (savedConfig) {
+        try {
+          const settings = JSON.parse(savedConfig) as MCPSettings;
+          const serverTools = await updateServerConfig(settings.mcpConfig);
+          set(() => ({ settings, serverTools }));
+        } catch (error) {
+          console.error('Error parsing saved mcp config:', error);
+          set(() => ({
+            error: `Error parsing saved mcp config: ${error instanceof Error ? error.message : String(error)}`,
+          }));
+        }
+      } else {
+        localStorage.setItem(MCP_SETTINGS_KEY, JSON.stringify(defaultSettings));
+      }
+    }
+
+    set(() => ({ isInitialized: true }));
+  },
+  updateSettings: async (newSettings: MCPSettings) => {
+    if (get().isUpdatingConfig) {
+      return;
+    }
+
+    try {
+      set(() => ({ isUpdatingConfig: true }));
+
+      const serverTools = await updateServerConfig(newSettings.mcpConfig);
+
+      if (isBrowser) {
+        localStorage.setItem(MCP_SETTINGS_KEY, JSON.stringify(newSettings));
+      }
+
+      set(() => ({ settings: newSettings, serverTools }));
+    } catch (error) {
+      throw error;
+    } finally {
+      set(() => ({ isUpdatingConfig: false }));
+    }
+  },
+  checkServersAvailabilities: async () => {
+    const response = await fetch('/api/mcp-check', {
+      method: 'GET',
+    });
+
+    if (!response.ok) {
+      throw new Error(`Server responded with ${response.status}: ${response.statusText}`);
+    }
+
+    const serverTools = (await response.json()) as MCPServerTools;
+
+    set(() => ({ serverTools }));
+  },
+}));
+
+async function updateServerConfig(config: MCPConfig) {
+  const response = await fetch('/api/mcp-update-config', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(config),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Server responded with ${response.status}: ${response.statusText}`);
+  }
+
+  const data = (await response.json()) as MCPServerTools;
+
+  return data;
+}
diff --git a/app/routes/api.chat.ts b/app/routes/api.chat.ts
index d375a1a..e35e8c1 100644
--- a/app/routes/api.chat.ts
+++ b/app/routes/api.chat.ts
@@ -12,6 +12,7 @@ import { WORK_DIR } from '~/utils/constants';
 import { createSummary } from '~/lib/.server/llm/create-summary';
 import { extractPropertiesFromMessage } from '~/lib/.server/llm/utils';
 import type { DesignScheme } from '~/types/design-scheme';
+import { MCPService } from '~/lib/services/mcpService';
 
 export async function action(args: ActionFunctionArgs) {
   return chatAction(args);
@@ -38,22 +39,24 @@ function parseCookies(cookieHeader: string): Record<string, string> {
 }
 
 async function chatAction({ context, request }: ActionFunctionArgs) {
-  const { messages, files, promptId, contextOptimization, supabase, chatMode, designScheme } = await request.json<{
-    messages: Messages;
-    files: any;
-    promptId?: string;
-    contextOptimization: boolean;
-    chatMode: 'discuss' | 'build';
-    designScheme?: DesignScheme;
-    supabase?: {
-      isConnected: boolean;
-      hasSelectedProject: boolean;
-      credentials?: {
-        anonKey?: string;
-        supabaseUrl?: string;
+  const { messages, files, promptId, contextOptimization, supabase, chatMode, designScheme, maxLLMSteps } =
+    await request.json<{
+      messages: Messages;
+      files: any;
+      promptId?: string;
+      contextOptimization: boolean;
+      chatMode: 'discuss' | 'build';
+      designScheme?: DesignScheme;
+      supabase?: {
+        isConnected: boolean;
+        hasSelectedProject: boolean;
+        credentials?: {
+          anonKey?: string;
+          supabaseUrl?: string;
+        };
       };
-    };
-  }>();
+      maxLLMSteps: number;
+    }>();
 
   const cookieHeader = request.headers.get('Cookie');
   const apiKeys = JSON.parse(parseCookies(cookieHeader || '').apiKeys || '{}');
@@ -72,6 +75,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
   let progressCounter: number = 1;
 
   try {
+    const mcpService = MCPService.getInstance();
     const totalMessageContent = messages.reduce((acc, message) => acc + message.content, '');
     logger.debug(`Total message length: ${totalMessageContent.split(' ').length}, words`);
 
@@ -84,8 +88,10 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
         let summary: string | undefined = undefined;
         let messageSliceId = 0;
 
-        if (messages.length > 3) {
-          messageSliceId = messages.length - 3;
+        const processedMessage = await mcpService.processToolInvocations(messages, dataStream);
+
+        if (processedMessage.length > 3) {
+          messageSliceId = processedMessage.length - 3;
         }
 
         if (filePaths.length > 0 && contextOptimization) {
@@ -99,10 +105,10 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
           } satisfies ProgressAnnotation);
 
           // Create a summary of the chat
-          console.log(`Messages count: ${messages.length}`);
+          console.log(`Messages count: ${processedMessage.length}`);
 
           summary = await createSummary({
-            messages: [...messages],
+            messages: [...processedMessage],
             env: context.cloudflare?.env,
             apiKeys,
             providerSettings,
@@ -128,7 +134,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
           dataStream.writeMessageAnnotation({
             type: 'chatSummary',
             summary,
-            chatId: messages.slice(-1)?.[0]?.id,
+            chatId: processedMessage.slice(-1)?.[0]?.id,
           } as ContextAnnotation);
 
           // Update context buffer
@@ -142,9 +148,9 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
           } satisfies ProgressAnnotation);
 
           // Select context files
-          console.log(`Messages count: ${messages.length}`);
+          console.log(`Messages count: ${processedMessage.length}`);
           filteredFiles = await selectContext({
-            messages: [...messages],
+            messages: [...processedMessage],
             env: context.cloudflare?.env,
             apiKeys,
             files,
@@ -192,7 +198,15 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
 
         const options: StreamingOptions = {
           supabaseConnection: supabase,
-          toolChoice: 'none',
+          toolChoice: 'auto',
+          tools: mcpService.toolsWithoutExecute,
+          maxSteps: maxLLMSteps,
+          onStepFinish: ({ toolCalls }) => {
+            // add tool call annotations for frontend processing
+            toolCalls.forEach((toolCall) => {
+              mcpService.processToolCall(toolCall, dataStream);
+            });
+          },
           onFinish: async ({ text: content, finishReason, usage }) => {
             logger.debug('usage', JSON.stringify(usage));
 
@@ -232,17 +246,17 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
 
             logger.info(`Reached max token limit (${MAX_TOKENS}): Continuing message (${switchesLeft} switches left)`);
 
-            const lastUserMessage = messages.filter((x) => x.role == 'user').slice(-1)[0];
+            const lastUserMessage = processedMessage.filter((x) => x.role == 'user').slice(-1)[0];
             const { model, provider } = extractPropertiesFromMessage(lastUserMessage);
-            messages.push({ id: generateId(), role: 'assistant', content });
-            messages.push({
+            processedMessage.push({ id: generateId(), role: 'assistant', content });
+            processedMessage.push({
               id: generateId(),
               role: 'user',
               content: `[Model: ${model}]\n\n[Provider: ${provider}]\n\n${CONTINUE_PROMPT}`,
             });
 
             const result = await streamText({
-              messages,
+              messages: [...processedMessage],
               env: context.cloudflare?.env,
               options,
               apiKeys,
@@ -283,7 +297,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
         } satisfies ProgressAnnotation);
 
         const result = await streamText({
-          messages,
+          messages: [...processedMessage],
           env: context.cloudflare?.env,
           options,
           apiKeys,
diff --git a/app/routes/api.mcp-check.ts b/app/routes/api.mcp-check.ts
new file mode 100644
index 0000000..4272023
--- /dev/null
+++ b/app/routes/api.mcp-check.ts
@@ -0,0 +1,16 @@
+import { createScopedLogger } from '~/utils/logger';
+import { MCPService } from '~/lib/services/mcpService';
+
+const logger = createScopedLogger('api.mcp-check');
+
+export async function loader() {
+  try {
+    const mcpService = MCPService.getInstance();
+    const serverTools = await mcpService.checkServersAvailabilities();
+
+    return Response.json(serverTools);
+  } catch (error) {
+    logger.error('Error checking MCP servers:', error);
+    return Response.json({ error: 'Failed to check MCP servers' }, { status: 500 });
+  }
+}
diff --git a/app/routes/api.mcp-update-config.ts b/app/routes/api.mcp-update-config.ts
new file mode 100644
index 0000000..90bb4d7
--- /dev/null
+++ b/app/routes/api.mcp-update-config.ts
@@ -0,0 +1,23 @@
+import { type ActionFunctionArgs } from '@remix-run/cloudflare';
+import { createScopedLogger } from '~/utils/logger';
+import { MCPService, type MCPConfig } from '~/lib/services/mcpService';
+
+const logger = createScopedLogger('api.mcp-update-config');
+
+export async function action({ request }: ActionFunctionArgs) {
+  try {
+    const mcpConfig = (await request.json()) as MCPConfig;
+
+    if (!mcpConfig || typeof mcpConfig !== 'object') {
+      return Response.json({ error: 'Invalid MCP servers configuration' }, { status: 400 });
+    }
+
+    const mcpService = MCPService.getInstance();
+    const serverTools = await mcpService.updateConfig(mcpConfig);
+
+    return Response.json(serverTools);
+  } catch (error) {
+    logger.error('Error updating MCP config:', error);
+    return Response.json({ error: 'Failed to update MCP config' }, { status: 500 });
+  }
+}
diff --git a/app/styles/components/code.scss b/app/styles/components/code.scss
index dd59aa2..d2184c8 100644
--- a/app/styles/components/code.scss
+++ b/app/styles/components/code.scss
@@ -3,7 +3,7 @@
 }
 
 .shiki {
-  &:not(:has(.actions), .actions *) {
+  &:not(:has(.actions), .actions *, .mcp-tool-invocation-code *) {
     background-color: var(--bolt-elements-messages-code-background) !important;
   }
 }
diff --git a/app/types/context.ts b/app/types/context.ts
index 75c21db..00b72ac 100644
--- a/app/types/context.ts
+++ b/app/types/context.ts
@@ -16,3 +16,11 @@ export type ProgressAnnotation = {
   order: number;
   message: string;
 };
+
+export type ToolCallAnnotation = {
+  type: 'toolCall';
+  toolCallId: string;
+  serverName: string;
+  toolName: string;
+  toolDescription: string;
+};
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index df61040..403577d 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -8,6 +8,13 @@ export const MODEL_REGEX = /^\[Model: (.*?)\]\n\n/;
 export const PROVIDER_REGEX = /\[Provider: (.*?)\]\n\n/;
 export const DEFAULT_MODEL = 'claude-3-5-sonnet-latest';
 export const PROMPT_COOKIE_KEY = 'cachedPrompt';
+export const TOOL_EXECUTION_APPROVAL = {
+  APPROVE: 'Yes, approved.',
+  REJECT: 'No, rejected.',
+} as const;
+export const TOOL_NO_EXECUTE_FUNCTION = 'Error: No execute function found on tool';
+export const TOOL_EXECUTION_DENIED = 'Error: User denied access to tool execution';
+export const TOOL_EXECUTION_ERROR = 'Error: An error occured while calling tool';
 
 const llmManager = LLMManager.getInstance(import.meta.env);
 
diff --git a/icons/mcp.svg b/icons/mcp.svg
new file mode 100644
index 0000000..5cd83a8
--- /dev/null
+++ b/icons/mcp.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>ModelContextProtocol</title><path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"></path><path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"></path></svg>
\ No newline at end of file
diff --git a/package.json b/package.json
index dd7d89b..28e599c 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,8 @@
     "@ai-sdk/google": "0.0.52",
     "@ai-sdk/mistral": "0.0.43",
     "@ai-sdk/openai": "1.1.2",
+    "@ai-sdk/react": "^1.2.12",
+    "@ai-sdk/ui-utils": "^1.2.11",
     "@codemirror/autocomplete": "^6.18.3",
     "@codemirror/commands": "^6.7.1",
     "@codemirror/lang-cpp": "^6.0.2",
@@ -71,6 +73,7 @@
     "@heroicons/react": "^2.2.0",
     "@iconify-json/svg-spinners": "^1.2.1",
     "@lezer/highlight": "^1.2.1",
+    "@modelcontextprotocol/sdk": "^1.15.0",
     "@nanostores/react": "^0.7.3",
     "@octokit/rest": "^21.0.2",
     "@octokit/types": "^13.6.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8217c55..fbdcc80 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,12 @@ importers:
       '@ai-sdk/openai':
         specifier: 1.1.2
         version: 1.1.2(zod@3.24.2)
+      '@ai-sdk/react':
+        specifier: ^1.2.12
+        version: 1.2.12(react@18.3.1)(zod@3.24.2)
+      '@ai-sdk/ui-utils':
+        specifier: ^1.2.11
+        version: 1.2.11(zod@3.24.2)
       '@codemirror/autocomplete':
         specifier: ^6.18.3
         version: 6.18.6
@@ -92,6 +98,9 @@ importers:
       '@lezer/highlight':
         specifier: ^1.2.1
         version: 1.2.1
+      '@modelcontextprotocol/sdk':
+        specifier: ^1.15.0
+        version: 1.15.0
       '@nanostores/react':
         specifier: ^0.7.3
         version: 0.7.3(nanostores@0.10.3)(react@18.3.1)
@@ -2090,6 +2099,10 @@ packages:
   '@mdx-js/mdx@2.3.0':
     resolution: {integrity: sha512-jLuwRlz8DQfQNiUCJR50Y09CGPq3fLtmtUQfVrj79E0JWu3dvsVcxVIcfhR5h0iXu+/z++zDrYeiJqifRynJkA==}
 
+  '@modelcontextprotocol/sdk@1.15.0':
+    resolution: {integrity: sha512-67hnl/ROKdb03Vuu0YOr+baKTvf1/5YBHBm9KnZdjdAh8hjt4FRCPD5ucwxGB237sBpzlqQsLy1PFu7z/ekZ9Q==}
+    engines: {node: '>=18'}
+
   '@nanostores/react@0.7.3':
     resolution: {integrity: sha512-/XuLAMENRu/Q71biW4AZ4qmU070vkZgiQ28gaTSNRPm2SZF5zGAR81zPE1MaMB4SeOp6ZTst92NBaG75XSspNg==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -3554,6 +3567,10 @@ packages:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
 
+  accepts@2.0.0:
+    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+    engines: {node: '>= 0.6'}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -3796,6 +3813,10 @@ packages:
     resolution: {integrity: sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
 
+  body-parser@2.2.0:
+    resolution: {integrity: sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==}
+    engines: {node: '>=18'}
+
   boolean@3.2.0:
     resolution: {integrity: sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==}
     deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
@@ -4125,6 +4146,10 @@ packages:
     resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
     engines: {node: '>= 0.6'}
 
+  content-disposition@1.0.0:
+    resolution: {integrity: sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==}
+    engines: {node: '>= 0.6'}
+
   content-type@1.0.5:
     resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
     engines: {node: '>= 0.6'}
@@ -4160,6 +4185,10 @@ packages:
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
+  cors@2.8.5:
+    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
+    engines: {node: '>= 0.10'}
+
   crc-32@1.2.2:
     resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
     engines: {node: '>=0.8'}
@@ -4730,6 +4759,10 @@ packages:
     resolution: {integrity: sha512-VARTJ9CYeuQYb0pZEPbzi740OWFgpHe7AYJ2WFZVnUDUQp5Dk2yJUgF36YsZ81cOyxT0QxmXD2EQpapAouzWVA==}
     engines: {node: '>=18.0.0'}
 
+  eventsource@3.0.7:
+    resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
+    engines: {node: '>=18.0.0'}
+
   evp_bytestokey@1.0.3:
     resolution: {integrity: sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==}
 
@@ -4748,10 +4781,20 @@ packages:
   exponential-backoff@3.1.2:
     resolution: {integrity: sha512-8QxYTVXUkuy7fIIoitQkPwGonB8F3Zj8eEO8Sqg9Zv/bkI7RJAzowee4gr81Hak/dUTpA2Z7VfQgoijjPNlUZA==}
 
+  express-rate-limit@7.5.1:
+    resolution: {integrity: sha512-7iN8iPMDzOMHPUYllBEsQdWVB6fPDMPqwjBaFrgr4Jgr/+okjvzAy+UHlYYL/Vs0OsOrMkwS6PJDkFlJwoxUnw==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      express: '>= 4.11'
+
   express@4.21.2:
     resolution: {integrity: sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==}
     engines: {node: '>= 0.10.0'}
 
+  express@5.1.0:
+    resolution: {integrity: sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==}
+    engines: {node: '>= 18'}
+
   exsolve@1.0.4:
     resolution: {integrity: sha512-xsZH6PXaER4XoV+NiT7JHp1bJodJVT+cxeSH1G0f0tlT0lJqYuHUP3bUx2HtfTDvOagMINYp8rsqusxud3RXhw==}
 
@@ -4827,6 +4870,10 @@ packages:
     resolution: {integrity: sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==}
     engines: {node: '>= 0.8'}
 
+  finalhandler@2.1.0:
+    resolution: {integrity: sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==}
+    engines: {node: '>= 0.8'}
+
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -4880,6 +4927,10 @@ packages:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
 
+  fresh@2.0.0:
+    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+    engines: {node: '>= 0.8'}
+
   fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
@@ -5332,6 +5383,9 @@ packages:
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
+  is-promise@4.0.0:
+    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+
   is-reference@3.0.3:
     resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
 
@@ -5718,12 +5772,20 @@ packages:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
 
+  media-typer@1.1.0:
+    resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
+    engines: {node: '>= 0.8'}
+
   memoize-one@5.2.1:
     resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
 
   merge-descriptors@1.0.3:
     resolution: {integrity: sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==}
 
+  merge-descriptors@2.0.0:
+    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
+    engines: {node: '>=18'}
+
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -5926,6 +5988,10 @@ packages:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
+  mime-types@3.0.1:
+    resolution: {integrity: sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==}
+    engines: {node: '>= 0.6'}
+
   mime@1.6.0:
     resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
     engines: {node: '>=4'}
@@ -6113,6 +6179,10 @@ packages:
     resolution: {integrity: sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==}
     engines: {node: '>= 0.6'}
 
+  negotiator@1.0.0:
+    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
+    engines: {node: '>= 0.6'}
+
   node-abi@3.74.0:
     resolution: {integrity: sha512-c5XK0MjkGBrQPGYG24GBADZud0NCbznxNx0ZkS+ebUTrmV1qTDxPxSL8zEAPURXSbLRWVexxmP4986BziahL5w==}
     engines: {node: '>=10'}
@@ -6343,6 +6413,10 @@ packages:
   path-to-regexp@6.3.0:
     resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
 
+  path-to-regexp@8.2.0:
+    resolution: {integrity: sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==}
+    engines: {node: '>=16'}
+
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
@@ -6396,6 +6470,10 @@ packages:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
 
+  pkce-challenge@5.0.0:
+    resolution: {integrity: sha512-ueGLflrrnvwB3xuo/uGob5pd5FN7l0MsLf0Z87o/UQmRtwjvfylfc9MurIxRAWywCYTgrvpXBcqjV4OfCYGCIQ==}
+    engines: {node: '>=16.20.0'}
+
   pkg-dir@5.0.0:
     resolution: {integrity: sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==}
     engines: {node: '>=10'}
@@ -6610,6 +6688,10 @@ packages:
     resolution: {integrity: sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==}
     engines: {node: '>= 0.8'}
 
+  raw-body@3.0.0:
+    resolution: {integrity: sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==}
+    engines: {node: '>= 0.8'}
+
   react-beautiful-dnd@13.1.1:
     resolution: {integrity: sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==}
     deprecated: 'react-beautiful-dnd is now deprecated. Context and options: https://github.com/atlassian/react-beautiful-dnd/issues/2672'
@@ -6957,6 +7039,10 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  router@2.2.0:
+    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
+    engines: {node: '>= 18'}
+
   rrweb-cssom@0.8.0:
     resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
 
@@ -7140,6 +7226,10 @@ packages:
     resolution: {integrity: sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==}
     engines: {node: '>= 0.8.0'}
 
+  send@1.2.0:
+    resolution: {integrity: sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==}
+    engines: {node: '>= 18'}
+
   serialize-error@7.0.1:
     resolution: {integrity: sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==}
     engines: {node: '>=10'}
@@ -7148,6 +7238,10 @@ packages:
     resolution: {integrity: sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==}
     engines: {node: '>= 0.8.0'}
 
+  serve-static@2.2.0:
+    resolution: {integrity: sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==}
+    engines: {node: '>= 18'}
+
   set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
 
@@ -7599,6 +7693,10 @@ packages:
     resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
     engines: {node: '>= 0.6'}
 
+  type-is@2.0.1:
+    resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
+    engines: {node: '>= 0.6'}
+
   typescript-eslint@8.28.0:
     resolution: {integrity: sha512-jfZtxJoHm59bvoCMYCe2BM0/baMswRhMmYhy+w6VfcyHrjxZ0OJe0tGasydCpIpA+A/WIJhTyZfb3EtwNC/kHQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -9865,6 +9963,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@modelcontextprotocol/sdk@1.15.0':
+    dependencies:
+      ajv: 6.12.6
+      content-type: 1.0.5
+      cors: 2.8.5
+      cross-spawn: 7.0.6
+      eventsource: 3.0.7
+      eventsource-parser: 3.0.1
+      express: 5.1.0
+      express-rate-limit: 7.5.1(express@5.1.0)
+      pkce-challenge: 5.0.0
+      raw-body: 3.0.0
+      zod: 3.24.2
+      zod-to-json-schema: 3.24.5(zod@3.24.2)
+    transitivePeerDependencies:
+      - supports-color
+
   '@nanostores/react@0.7.3(nanostores@0.10.3)(react@18.3.1)':
     dependencies:
       nanostores: 0.10.3
@@ -11699,6 +11814,11 @@ snapshots:
       mime-types: 2.1.35
       negotiator: 0.6.3
 
+  accepts@2.0.0:
+    dependencies:
+      mime-types: 3.0.1
+      negotiator: 1.0.0
+
   acorn-jsx@5.3.2(acorn@8.14.1):
     dependencies:
       acorn: 8.14.1
@@ -11983,6 +12103,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  body-parser@2.2.0:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 4.4.0
+      http-errors: 2.0.0
+      iconv-lite: 0.6.3
+      on-finished: 2.4.1
+      qs: 6.14.0
+      raw-body: 3.0.0
+      type-is: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
   boolean@3.2.0:
     optional: true
 
@@ -12408,6 +12542,10 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
+  content-disposition@1.0.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
   content-type@1.0.5: {}
 
   convert-source-map@2.0.0: {}
@@ -12430,6 +12568,11 @@ snapshots:
 
   core-util-is@1.0.3: {}
 
+  cors@2.8.5:
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+
   crc-32@1.2.2: {}
 
   crc32-stream@4.0.3:
@@ -13169,6 +13312,10 @@ snapshots:
 
   eventsource-parser@3.0.1: {}
 
+  eventsource@3.0.7:
+    dependencies:
+      eventsource-parser: 3.0.1
+
   evp_bytestokey@1.0.3:
     dependencies:
       md5.js: 1.3.5
@@ -13192,6 +13339,10 @@ snapshots:
 
   exponential-backoff@3.1.2: {}
 
+  express-rate-limit@7.5.1(express@5.1.0):
+    dependencies:
+      express: 5.1.0
+
   express@4.21.2:
     dependencies:
       accepts: 1.3.8
@@ -13228,6 +13379,38 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  express@5.1.0:
+    dependencies:
+      accepts: 2.0.0
+      body-parser: 2.2.0
+      content-disposition: 1.0.0
+      content-type: 1.0.5
+      cookie: 0.7.1
+      cookie-signature: 1.2.2
+      debug: 4.4.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 2.1.0
+      fresh: 2.0.0
+      http-errors: 2.0.0
+      merge-descriptors: 2.0.0
+      mime-types: 3.0.1
+      on-finished: 2.4.1
+      once: 1.4.0
+      parseurl: 1.3.3
+      proxy-addr: 2.0.7
+      qs: 6.14.0
+      range-parser: 1.2.1
+      router: 2.2.0
+      send: 1.2.0
+      serve-static: 2.2.0
+      statuses: 2.0.1
+      type-is: 2.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   exsolve@1.0.4: {}
 
   extend@3.0.2: {}
@@ -13314,6 +13497,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  finalhandler@2.1.0:
+    dependencies:
+      debug: 4.4.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -13361,6 +13555,8 @@ snapshots:
 
   fresh@0.5.2: {}
 
+  fresh@2.0.0: {}
+
   fs-constants@1.0.0: {}
 
   fs-extra@10.1.0:
@@ -13928,6 +14124,8 @@ snapshots:
 
   is-potential-custom-element-name@1.0.1: {}
 
+  is-promise@4.0.0: {}
+
   is-reference@3.0.3:
     dependencies:
       '@types/estree': 1.0.7
@@ -14511,10 +14709,14 @@ snapshots:
 
   media-typer@0.3.0: {}
 
+  media-typer@1.1.0: {}
+
   memoize-one@5.2.1: {}
 
   merge-descriptors@1.0.3: {}
 
+  merge-descriptors@2.0.0: {}
+
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
@@ -14943,6 +15145,10 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
+  mime-types@3.0.1:
+    dependencies:
+      mime-db: 1.54.0
+
   mime@1.6.0: {}
 
   mime@2.6.0: {}
@@ -15100,6 +15306,8 @@ snapshots:
 
   negotiator@0.6.4: {}
 
+  negotiator@1.0.0: {}
+
   node-abi@3.74.0:
     dependencies:
       semver: 7.7.1
@@ -15379,6 +15587,8 @@ snapshots:
 
   path-to-regexp@6.3.0: {}
 
+  path-to-regexp@8.2.0: {}
+
   pathe@1.1.2: {}
 
   pathe@2.0.3: {}
@@ -15424,6 +15634,8 @@ snapshots:
 
   pify@4.0.1: {}
 
+  pkce-challenge@5.0.0: {}
+
   pkg-dir@5.0.0:
     dependencies:
       find-up: 5.0.0
@@ -15631,6 +15843,13 @@ snapshots:
       iconv-lite: 0.4.24
       unpipe: 1.0.0
 
+  raw-body@3.0.0:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.0
+      iconv-lite: 0.6.3
+      unpipe: 1.0.0
+
   react-beautiful-dnd@13.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.27.0
@@ -16043,6 +16262,16 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.38.0
       fsevents: 2.3.3
 
+  router@2.2.0:
+    dependencies:
+      debug: 4.4.0
+      depd: 2.0.0
+      is-promise: 4.0.0
+      parseurl: 1.3.3
+      path-to-regexp: 8.2.0
+    transitivePeerDependencies:
+      - supports-color
+
   rrweb-cssom@0.8.0: {}
 
   run-parallel@1.2.0:
@@ -16202,6 +16431,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  send@1.2.0:
+    dependencies:
+      debug: 4.4.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 2.0.0
+      http-errors: 2.0.0
+      mime-types: 3.0.1
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
   serialize-error@7.0.1:
     dependencies:
       type-fest: 0.13.1
@@ -16216,6 +16461,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  serve-static@2.2.0:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 1.2.0
+    transitivePeerDependencies:
+      - supports-color
+
   set-blocking@2.0.0: {}
 
   set-cookie-parser@2.7.1: {}
@@ -16692,6 +16946,12 @@ snapshots:
       media-typer: 0.3.0
       mime-types: 2.1.35
 
+  type-is@2.0.1:
+    dependencies:
+      content-type: 1.0.5
+      media-typer: 1.1.0
+      mime-types: 3.0.1
+
   typescript-eslint@8.28.0(eslint@9.23.0(jiti@1.21.7))(typescript@5.8.2):
     dependencies:
       '@typescript-eslint/eslint-plugin': 8.28.0(@typescript-eslint/parser@8.28.0(eslint@9.23.0(jiti@1.21.7))(typescript@5.8.2))(eslint@9.23.0(jiti@1.21.7))(typescript@5.8.2)

From 22cb5977bedd838f46734947216b545907d180c7 Mon Sep 17 00:00:00 2001
From: xKevIsDev <zenner404@gmail.com>
Date: Tue, 8 Jul 2025 01:20:58 +0100
Subject: [PATCH 03/11] feat: enhance Vercel deployment process with framework
 detection and source file handling

- Implemented a function to detect project frameworks based on package.json and configuration files.
- Added support for including source files in the deployment request for frameworks that require building.
- Updated the action function to handle framework detection and adjust deployment configuration accordingly.
- Removed unnecessary console logs and improved error handling for file reading operations.
---
 app/components/deploy/VercelDeploy.client.tsx |  49 +++-
 app/lib/runtime/action-runner.ts              |   7 +-
 app/routes/api.vercel-deploy.ts               | 270 ++++++++++++++++--
 3 files changed, 299 insertions(+), 27 deletions(-)

diff --git a/app/components/deploy/VercelDeploy.client.tsx b/app/components/deploy/VercelDeploy.client.tsx
index 22ceb39..d2303cd 100644
--- a/app/components/deploy/VercelDeploy.client.tsx
+++ b/app/components/deploy/VercelDeploy.client.tsx
@@ -96,12 +96,9 @@ export function useVercelDeploy() {
           await container.fs.readdir(dir);
           finalBuildPath = dir;
           buildPathExists = true;
-          console.log(`Using build directory: ${finalBuildPath}`);
           break;
-        } catch (error) {
-          console.log(`Directory ${dir} doesn't exist, trying next option. ${error}`);
-
-          // Directory doesn't exist, try the next one
+        } catch {
+          // Directory doesn't exist, expected — just skip it
           continue;
         }
       }
@@ -135,6 +132,47 @@ export function useVercelDeploy() {
 
       const fileContents = await getAllFiles(finalBuildPath);
 
+      // Get all source project files for framework detection
+      const allProjectFiles: Record<string, string> = {};
+
+      async function getAllProjectFiles(dirPath: string): Promise<void> {
+        const entries = await container.fs.readdir(dirPath, { withFileTypes: true });
+
+        for (const entry of entries) {
+          const fullPath = path.join(dirPath, entry.name);
+
+          if (entry.isFile()) {
+            try {
+              const content = await container.fs.readFile(fullPath, 'utf-8');
+
+              // Store with relative path from project root
+              let relativePath = fullPath;
+
+              if (fullPath.startsWith('/home/project/')) {
+                relativePath = fullPath.replace('/home/project/', '');
+              } else if (fullPath.startsWith('./')) {
+                relativePath = fullPath.replace('./', '');
+              }
+
+              allProjectFiles[relativePath] = content;
+            } catch (error) {
+              // Skip binary files or files that can't be read as text
+              console.log(`Skipping file ${entry.name}: ${error}`);
+            }
+          } else if (entry.isDirectory() && !entry.name.startsWith('.') && entry.name !== 'node_modules') {
+            await getAllProjectFiles(fullPath);
+          }
+        }
+      }
+
+      // Try to read from the current directory first
+      try {
+        await getAllProjectFiles('.');
+      } catch {
+        // Fallback to /home/project if current directory doesn't work
+        await getAllProjectFiles('/home/project');
+      }
+
       // Use chatId instead of artifact.id
       const existingProjectId = localStorage.getItem(`vercel-project-${currentChatId}`);
 
@@ -146,6 +184,7 @@ export function useVercelDeploy() {
         body: JSON.stringify({
           projectId: existingProjectId || undefined,
           files: fileContents,
+          sourceFiles: allProjectFiles,
           token: vercelConn.token,
           chatId: currentChatId,
         }),
diff --git a/app/lib/runtime/action-runner.ts b/app/lib/runtime/action-runner.ts
index a3436a9..58de741 100644
--- a/app/lib/runtime/action-runner.ts
+++ b/app/lib/runtime/action-runner.ts
@@ -435,18 +435,15 @@ export class ActionRunner {
       try {
         await webcontainer.fs.readdir(dirPath);
         buildDir = dirPath;
-        logger.debug(`Found build directory: ${buildDir}`);
         break;
-      } catch (error) {
-        // Directory doesn't exist, try the next one
-        logger.debug(`Build directory ${dir} not found, trying next option. ${error}`);
+      } catch {
+        continue;
       }
     }
 
     // If no build directory was found, use the default (dist)
     if (!buildDir) {
       buildDir = nodePath.join(webcontainer.workdir, 'dist');
-      logger.debug(`No build directory found, defaulting to: ${buildDir}`);
     }
 
     return {
diff --git a/app/routes/api.vercel-deploy.ts b/app/routes/api.vercel-deploy.ts
index 7d45b24..5600972 100644
--- a/app/routes/api.vercel-deploy.ts
+++ b/app/routes/api.vercel-deploy.ts
@@ -1,6 +1,177 @@
 import { type ActionFunctionArgs, type LoaderFunctionArgs, json } from '@remix-run/cloudflare';
 import type { VercelProjectInfo } from '~/types/vercel';
 
+// Function to detect framework from project files
+const detectFramework = (files: Record<string, string>): string => {
+  // Check for package.json first
+  const packageJson = files['package.json'];
+
+  if (packageJson) {
+    try {
+      const pkg = JSON.parse(packageJson);
+      const dependencies = { ...pkg.dependencies, ...pkg.devDependencies };
+
+      // Check for specific frameworks
+      if (dependencies.next) {
+        return 'nextjs';
+      }
+
+      if (dependencies.react && dependencies['@remix-run/react']) {
+        return 'remix';
+      }
+
+      if (dependencies.react && dependencies.vite) {
+        return 'vite';
+      }
+
+      if (dependencies.react && dependencies['@vitejs/plugin-react']) {
+        return 'vite';
+      }
+
+      if (dependencies.react && dependencies['@nuxt/react']) {
+        return 'nuxt';
+      }
+
+      if (dependencies.react && dependencies['@qwik-city/qwik']) {
+        return 'qwik';
+      }
+
+      if (dependencies.react && dependencies['@sveltejs/kit']) {
+        return 'sveltekit';
+      }
+
+      if (dependencies.react && dependencies.astro) {
+        return 'astro';
+      }
+
+      if (dependencies.react && dependencies['@angular/core']) {
+        return 'angular';
+      }
+
+      if (dependencies.react && dependencies.vue) {
+        return 'vue';
+      }
+
+      if (dependencies.react && dependencies['@expo/react-native']) {
+        return 'expo';
+      }
+
+      if (dependencies.react && dependencies['react-native']) {
+        return 'react-native';
+      }
+
+      // Generic React app
+      if (dependencies.react) {
+        return 'react';
+      }
+
+      // Check for other frameworks
+      if (dependencies['@angular/core']) {
+        return 'angular';
+      }
+
+      if (dependencies.vue) {
+        return 'vue';
+      }
+
+      if (dependencies['@sveltejs/kit']) {
+        return 'sveltekit';
+      }
+
+      if (dependencies.astro) {
+        return 'astro';
+      }
+
+      if (dependencies['@nuxt/core']) {
+        return 'nuxt';
+      }
+
+      if (dependencies['@qwik-city/qwik']) {
+        return 'qwik';
+      }
+
+      if (dependencies['@expo/react-native']) {
+        return 'expo';
+      }
+
+      if (dependencies['react-native']) {
+        return 'react-native';
+      }
+
+      // Check for build tools
+      if (dependencies.vite) {
+        return 'vite';
+      }
+
+      if (dependencies.webpack) {
+        return 'webpack';
+      }
+
+      if (dependencies.parcel) {
+        return 'parcel';
+      }
+
+      if (dependencies.rollup) {
+        return 'rollup';
+      }
+
+      // Default to Node.js if package.json exists
+      return 'nodejs';
+    } catch (error) {
+      console.error('Error parsing package.json:', error);
+    }
+  }
+
+  // Check for other framework indicators
+  if (files['next.config.js'] || files['next.config.ts']) {
+    return 'nextjs';
+  }
+
+  if (files['remix.config.js'] || files['remix.config.ts']) {
+    return 'remix';
+  }
+
+  if (files['vite.config.js'] || files['vite.config.ts']) {
+    return 'vite';
+  }
+
+  if (files['nuxt.config.js'] || files['nuxt.config.ts']) {
+    return 'nuxt';
+  }
+
+  if (files['svelte.config.js'] || files['svelte.config.ts']) {
+    return 'sveltekit';
+  }
+
+  if (files['astro.config.js'] || files['astro.config.ts']) {
+    return 'astro';
+  }
+
+  if (files['angular.json']) {
+    return 'angular';
+  }
+
+  if (files['vue.config.js'] || files['vue.config.ts']) {
+    return 'vue';
+  }
+
+  if (files['app.json'] && files['app.json'].includes('expo')) {
+    return 'expo';
+  }
+
+  if (files['app.json'] && files['app.json'].includes('react-native')) {
+    return 'react-native';
+  }
+
+  // Check for static site indicators
+  if (files['index.html']) {
+    return 'static';
+  }
+
+  // Default to unknown
+  return 'other';
+};
+
 // Add loader function to handle GET requests
 export async function loader({ request }: LoaderFunctionArgs) {
   const url = new URL(request.url);
@@ -63,13 +234,17 @@ export async function loader({ request }: LoaderFunctionArgs) {
 interface DeployRequestBody {
   projectId?: string;
   files: Record<string, string>;
+  sourceFiles?: Record<string, string>;
   chatId: string;
+  framework?: string;
 }
 
 // Existing action function for POST requests
 export async function action({ request }: ActionFunctionArgs) {
   try {
-    const { projectId, files, token, chatId } = (await request.json()) as DeployRequestBody & { token: string };
+    const { projectId, files, sourceFiles, token, chatId, framework } = (await request.json()) as DeployRequestBody & {
+      token: string;
+    };
 
     if (!token) {
       return json({ error: 'Not connected to Vercel' }, { status: 401 });
@@ -78,6 +253,14 @@ export async function action({ request }: ActionFunctionArgs) {
     let targetProjectId = projectId;
     let projectInfo: VercelProjectInfo | undefined;
 
+    // Detect framework from the source files if not provided
+    let detectedFramework = framework;
+
+    if (!detectedFramework && sourceFiles) {
+      detectedFramework = detectFramework(sourceFiles);
+      console.log('Detected framework from source files:', detectedFramework);
+    }
+
     // If no projectId provided, create a new project
     if (!targetProjectId) {
       const projectName = `bolt-diy-${chatId}-${Date.now()}`;
@@ -89,7 +272,7 @@ export async function action({ request }: ActionFunctionArgs) {
         },
         body: JSON.stringify({
           name: projectName,
-          framework: null,
+          framework: detectedFramework || null,
         }),
       });
 
@@ -136,7 +319,7 @@ export async function action({ request }: ActionFunctionArgs) {
           },
           body: JSON.stringify({
             name: projectName,
-            framework: null,
+            framework: detectedFramework || null,
           }),
         });
 
@@ -162,13 +345,72 @@ export async function action({ request }: ActionFunctionArgs) {
     // Prepare files for deployment
     const deploymentFiles = [];
 
-    for (const [filePath, content] of Object.entries(files)) {
-      // Ensure file path doesn't start with a slash for Vercel
-      const normalizedPath = filePath.startsWith('/') ? filePath.substring(1) : filePath;
-      deploymentFiles.push({
-        file: normalizedPath,
-        data: content,
-      });
+    /*
+     * For frameworks that need to build on Vercel, include source files
+     * For static sites, only include build output
+     */
+    const shouldIncludeSourceFiles =
+      detectedFramework &&
+      ['nextjs', 'react', 'vite', 'remix', 'nuxt', 'sveltekit', 'astro', 'vue', 'angular'].includes(detectedFramework);
+
+    if (shouldIncludeSourceFiles && sourceFiles) {
+      // Include source files for frameworks that need to build
+      for (const [filePath, content] of Object.entries(sourceFiles)) {
+        // Ensure file path doesn't start with a slash for Vercel
+        const normalizedPath = filePath.startsWith('/') ? filePath.substring(1) : filePath;
+        deploymentFiles.push({
+          file: normalizedPath,
+          data: content,
+        });
+      }
+    } else {
+      // For static sites, only include build output
+      for (const [filePath, content] of Object.entries(files)) {
+        // Ensure file path doesn't start with a slash for Vercel
+        const normalizedPath = filePath.startsWith('/') ? filePath.substring(1) : filePath;
+        deploymentFiles.push({
+          file: normalizedPath,
+          data: content,
+        });
+      }
+    }
+
+    // Create deployment configuration based on framework
+    const deploymentConfig: any = {
+      name: projectInfo.name,
+      project: targetProjectId,
+      target: 'production',
+      files: deploymentFiles,
+    };
+
+    // Add framework-specific configuration
+    if (detectedFramework === 'nextjs') {
+      deploymentConfig.buildCommand = 'npm run build';
+      deploymentConfig.outputDirectory = '.next';
+    } else if (detectedFramework === 'react' || detectedFramework === 'vite') {
+      deploymentConfig.buildCommand = 'npm run build';
+      deploymentConfig.outputDirectory = 'dist';
+    } else if (detectedFramework === 'remix') {
+      deploymentConfig.buildCommand = 'npm run build';
+      deploymentConfig.outputDirectory = 'public';
+    } else if (detectedFramework === 'nuxt') {
+      deploymentConfig.buildCommand = 'npm run build';
+      deploymentConfig.outputDirectory = '.output';
+    } else if (detectedFramework === 'sveltekit') {
+      deploymentConfig.buildCommand = 'npm run build';
+      deploymentConfig.outputDirectory = 'build';
+    } else if (detectedFramework === 'astro') {
+      deploymentConfig.buildCommand = 'npm run build';
+      deploymentConfig.outputDirectory = 'dist';
+    } else if (detectedFramework === 'vue') {
+      deploymentConfig.buildCommand = 'npm run build';
+      deploymentConfig.outputDirectory = 'dist';
+    } else if (detectedFramework === 'angular') {
+      deploymentConfig.buildCommand = 'npm run build';
+      deploymentConfig.outputDirectory = 'dist';
+    } else {
+      // For static sites, no build command needed
+      deploymentConfig.routes = [{ src: '/(.*)', dest: '/$1' }];
     }
 
     // Create a new deployment
@@ -178,13 +420,7 @@ export async function action({ request }: ActionFunctionArgs) {
         Authorization: `Bearer ${token}`,
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({
-        name: projectInfo.name,
-        project: targetProjectId,
-        target: 'production',
-        files: deploymentFiles,
-        routes: [{ src: '/(.*)', dest: '/$1' }],
-      }),
+      body: JSON.stringify(deploymentConfig),
     });
 
     if (!deployResponse.ok) {

From 590363cf6ed67b721c8b8316bfb4f32d153400df Mon Sep 17 00:00:00 2001
From: KevIsDev <zennerd404@gmail.com>
Date: Tue, 1 Jul 2025 14:26:42 +0100
Subject: [PATCH 04/11] refactor: remove developer mode and related components

add glowing effect component for tab tiles
improve tab tile appearance with new glow effect
add 'none' log level and simplify log level handling
simplify tab configuration store by removing developer tabs
remove useDebugStatus hook and related debug functionality
remove system info endpoints no longer needed
---
 .../@settings/core/AvatarDropdown.tsx         |   22 +-
 .../@settings/core/ControlPanel.tsx           |  324 +--
 app/components/@settings/core/constants.ts    |   40 +-
 app/components/@settings/core/types.ts        |    7 -
 app/components/@settings/index.ts             |    2 -
 .../shared/components/TabManagement.tsx       |  382 ---
 .../@settings/shared/components/TabTile.tsx   |  186 +-
 .../@settings/tabs/debug/DebugTab.tsx         | 2110 -----------------
 .../tabs/task-manager/TaskManagerTab.tsx      | 1602 -------------
 app/components/@settings/utils/animations.ts  |   41 -
 app/components/@settings/utils/tab-helpers.ts |   39 +-
 app/components/ui/GlowingEffect.tsx           |  192 ++
 app/lib/hooks/index.ts                        |    1 -
 app/lib/hooks/useDebugStatus.ts               |   89 -
 app/lib/hooks/useSettings.ts                  |    5 +-
 app/lib/stores/settings.ts                    |   58 +-
 app/lib/stores/tabConfigurationStore.ts       |    7 +-
 app/routes/api.system.app-info.ts             |  135 --
 app/routes/api.system.memory-info.ts          |  280 ---
 app/routes/api.system.process-info.ts         |  424 ----
 app/utils/cn.ts                               |    6 +
 app/utils/logger.ts                           |   11 +-
 vite.config.ts                                |   15 -
 23 files changed, 370 insertions(+), 5608 deletions(-)
 delete mode 100644 app/components/@settings/shared/components/TabManagement.tsx
 delete mode 100644 app/components/@settings/tabs/debug/DebugTab.tsx
 delete mode 100644 app/components/@settings/tabs/task-manager/TaskManagerTab.tsx
 delete mode 100644 app/components/@settings/utils/animations.ts
 create mode 100644 app/components/ui/GlowingEffect.tsx
 delete mode 100644 app/lib/hooks/useDebugStatus.ts
 delete mode 100644 app/routes/api.system.app-info.ts
 delete mode 100644 app/routes/api.system.memory-info.ts
 delete mode 100644 app/routes/api.system.process-info.ts
 create mode 100644 app/utils/cn.ts

diff --git a/app/components/@settings/core/AvatarDropdown.tsx b/app/components/@settings/core/AvatarDropdown.tsx
index 6adfd31..c6c1845 100644
--- a/app/components/@settings/core/AvatarDropdown.tsx
+++ b/app/components/@settings/core/AvatarDropdown.tsx
@@ -36,7 +36,7 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
             />
           ) : (
             <div className="w-full h-full rounded-full flex items-center justify-center bg-white dark:bg-gray-800 text-gray-400 dark:text-gray-500">
-              <div className="i-ph:question w-6 h-6" />
+              <div className="i-ph:user w-6 h-6" />
             </div>
           )}
         </motion.button>
@@ -72,7 +72,7 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
                 />
               ) : (
                 <div className="w-full h-full flex items-center justify-center text-gray-400 dark:text-gray-500 font-medium text-lg">
-                  <span className="relative -top-0.5">?</span>
+                  <div className="i-ph:user w-6 h-6" />
                 </div>
               )}
             </div>
@@ -117,24 +117,6 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
           </DropdownMenu.Item>
 
           <div className="my-1 border-t border-gray-200/50 dark:border-gray-800/50" />
-
-          <DropdownMenu.Item
-            className={classNames(
-              'flex items-center gap-2 px-4 py-2.5',
-              'text-sm text-gray-700 dark:text-gray-200',
-              'hover:bg-purple-50 dark:hover:bg-purple-500/10',
-              'hover:text-purple-500 dark:hover:text-purple-400',
-              'cursor-pointer transition-all duration-200',
-              'outline-none',
-              'group',
-            )}
-            onClick={() => onSelectTab('task-manager')}
-          >
-            <div className="i-ph:activity w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
-            Task Manager
-            <BetaLabel />
-          </DropdownMenu.Item>
-
           <DropdownMenu.Item
             className={classNames(
               'flex items-center gap-2 px-4 py-2.5',
diff --git a/app/components/@settings/core/ControlPanel.tsx b/app/components/@settings/core/ControlPanel.tsx
index 1beebf8..a7647b6 100644
--- a/app/components/@settings/core/ControlPanel.tsx
+++ b/app/components/@settings/core/ControlPanel.tsx
@@ -1,25 +1,16 @@
 import { useState, useEffect, useMemo } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
 import { useStore } from '@nanostores/react';
-import { Switch } from '@radix-ui/react-switch';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { classNames } from '~/utils/classNames';
-import { TabManagement } from '~/components/@settings/shared/components/TabManagement';
 import { TabTile } from '~/components/@settings/shared/components/TabTile';
 import { useUpdateCheck } from '~/lib/hooks/useUpdateCheck';
 import { useFeatures } from '~/lib/hooks/useFeatures';
 import { useNotifications } from '~/lib/hooks/useNotifications';
 import { useConnectionStatus } from '~/lib/hooks/useConnectionStatus';
-import { useDebugStatus } from '~/lib/hooks/useDebugStatus';
-import {
-  tabConfigurationStore,
-  developerModeStore,
-  setDeveloperMode,
-  resetTabConfiguration,
-} from '~/lib/stores/settings';
+import { tabConfigurationStore, resetTabConfiguration } from '~/lib/stores/settings';
 import { profileStore } from '~/lib/stores/profile';
-import type { TabType, TabVisibilityConfig, Profile } from './types';
-import { TAB_LABELS, DEFAULT_TAB_CONFIG } from './constants';
+import type { TabType, Profile } from './types';
+import { TAB_LABELS, DEFAULT_TAB_CONFIG, TAB_DESCRIPTIONS } from './constants';
 import { DialogTitle } from '~/components/ui/Dialog';
 import { AvatarDropdown } from './AvatarDropdown';
 import BackgroundRays from '~/components/ui/BackgroundRays';
@@ -30,14 +21,12 @@ import SettingsTab from '~/components/@settings/tabs/settings/SettingsTab';
 import NotificationsTab from '~/components/@settings/tabs/notifications/NotificationsTab';
 import FeaturesTab from '~/components/@settings/tabs/features/FeaturesTab';
 import { DataTab } from '~/components/@settings/tabs/data/DataTab';
-import DebugTab from '~/components/@settings/tabs/debug/DebugTab';
 import { EventLogsTab } from '~/components/@settings/tabs/event-logs/EventLogsTab';
 import UpdateTab from '~/components/@settings/tabs/update/UpdateTab';
 import ConnectionsTab from '~/components/@settings/tabs/connections/ConnectionsTab';
 import CloudProvidersTab from '~/components/@settings/tabs/providers/cloud/CloudProvidersTab';
 import ServiceStatusTab from '~/components/@settings/tabs/providers/status/ServiceStatusTab';
 import LocalProvidersTab from '~/components/@settings/tabs/providers/local/LocalProvidersTab';
-import TaskManagerTab from '~/components/@settings/tabs/task-manager/TaskManagerTab';
 import McpTab from '~/components/@settings/tabs/mcp/McpTab';
 
 interface ControlPanelProps {
@@ -45,48 +34,8 @@ interface ControlPanelProps {
   onClose: () => void;
 }
 
-interface TabWithDevType extends TabVisibilityConfig {
-  isExtraDevTab?: boolean;
-}
-
-interface ExtendedTabConfig extends TabVisibilityConfig {
-  isExtraDevTab?: boolean;
-}
-
-interface BaseTabConfig {
-  id: TabType;
-  visible: boolean;
-  window: 'user' | 'developer';
-  order: number;
-}
-
-interface AnimatedSwitchProps {
-  checked: boolean;
-  onCheckedChange: (checked: boolean) => void;
-  id: string;
-  label: string;
-}
-
-const TAB_DESCRIPTIONS: Record<TabType, string> = {
-  profile: 'Manage your profile and account settings',
-  settings: 'Configure application preferences',
-  notifications: 'View and manage your notifications',
-  features: 'Explore new and upcoming features',
-  data: 'Manage your data and storage',
-  'cloud-providers': 'Configure cloud AI providers and models',
-  'local-providers': 'Configure local AI providers and models',
-  'service-status': 'Monitor cloud LLM service status',
-  connection: 'Check connection status and settings',
-  debug: 'Debug tools and system information',
-  'event-logs': 'View system events and logs',
-  update: 'Check for updates and release notes',
-  'task-manager': 'Monitor system resources and processes',
-  'tab-management': 'Configure visible tabs and their order',
-  mcp: 'Configure MCP (Model Context Protocol) servers',
-};
-
 // Beta status for experimental features
-const BETA_TABS = new Set<TabType>(['task-manager', 'service-status', 'update', 'local-providers']);
+const BETA_TABS = new Set<TabType>(['service-status', 'update', 'local-providers']);
 
 const BetaLabel = () => (
   <div className="absolute top-2 right-2 px-1.5 py-0.5 rounded-full bg-purple-500/10 dark:bg-purple-500/20">
@@ -94,66 +43,6 @@ const BetaLabel = () => (
   </div>
 );
 
-const AnimatedSwitch = ({ checked, onCheckedChange, id, label }: AnimatedSwitchProps) => {
-  return (
-    <div className="flex items-center gap-2">
-      <Switch
-        id={id}
-        checked={checked}
-        onCheckedChange={onCheckedChange}
-        className={classNames(
-          'relative inline-flex h-6 w-11 items-center rounded-full',
-          'transition-all duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)]',
-          'bg-gray-200 dark:bg-gray-700',
-          'data-[state=checked]:bg-purple-500',
-          'focus:outline-none focus:ring-2 focus:ring-purple-500/20',
-          'cursor-pointer',
-          'group',
-        )}
-      >
-        <motion.span
-          className={classNames(
-            'absolute left-[2px] top-[2px]',
-            'inline-block h-5 w-5 rounded-full',
-            'bg-white shadow-lg',
-            'transition-shadow duration-300',
-            'group-hover:shadow-md group-active:shadow-sm',
-            'group-hover:scale-95 group-active:scale-90',
-          )}
-          initial={false}
-          transition={{
-            type: 'spring',
-            stiffness: 500,
-            damping: 30,
-            duration: 0.2,
-          }}
-          animate={{
-            x: checked ? '1.25rem' : '0rem',
-          }}
-        >
-          <motion.div
-            className="absolute inset-0 rounded-full bg-white"
-            initial={false}
-            animate={{
-              scale: checked ? 1 : 0.8,
-            }}
-            transition={{ duration: 0.2 }}
-          />
-        </motion.span>
-        <span className="sr-only">Toggle {label}</span>
-      </Switch>
-      <div className="flex items-center gap-2">
-        <label
-          htmlFor={id}
-          className="text-sm text-gray-500 dark:text-gray-400 select-none cursor-pointer whitespace-nowrap w-[88px]"
-        >
-          {label}
-        </label>
-      </div>
-    </div>
-  );
-};
-
 export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
   // State
   const [activeTab, setActiveTab] = useState<TabType | null>(null);
@@ -162,7 +51,6 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
 
   // Store values
   const tabConfiguration = useStore(tabConfigurationStore);
-  const developerMode = useStore(developerModeStore);
   const profile = useStore(profileStore) as Profile;
 
   // Status hooks
@@ -170,7 +58,6 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
   const { hasNewFeatures, unviewedFeatures, acknowledgeAllFeatures } = useFeatures();
   const { hasUnreadNotifications, unreadNotifications, markAllAsRead } = useNotifications();
   const { hasConnectionIssues, currentIssue, acknowledgeIssue } = useConnectionStatus();
-  const { hasActiveWarnings, activeIssues, acknowledgeAllIssues } = useDebugStatus();
 
   // Memoize the base tab configurations to avoid recalculation
   const baseTabConfig = useMemo(() => {
@@ -188,41 +75,6 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
 
     const notificationsDisabled = profile?.preferences?.notifications === false;
 
-    // In developer mode, show ALL tabs without restrictions
-    if (developerMode) {
-      const seenTabs = new Set<TabType>();
-      const devTabs: ExtendedTabConfig[] = [];
-
-      // Process tabs in order of priority: developer, user, default
-      const processTab = (tab: BaseTabConfig) => {
-        if (!seenTabs.has(tab.id)) {
-          seenTabs.add(tab.id);
-          devTabs.push({
-            id: tab.id,
-            visible: true,
-            window: 'developer',
-            order: tab.order || devTabs.length,
-          });
-        }
-      };
-
-      // Process tabs in priority order
-      tabConfiguration.developerTabs?.forEach((tab) => processTab(tab as BaseTabConfig));
-      tabConfiguration.userTabs.forEach((tab) => processTab(tab as BaseTabConfig));
-      DEFAULT_TAB_CONFIG.forEach((tab) => processTab(tab as BaseTabConfig));
-
-      // Add Tab Management tile
-      devTabs.push({
-        id: 'tab-management' as TabType,
-        visible: true,
-        window: 'developer',
-        order: devTabs.length,
-        isExtraDevTab: true,
-      });
-
-      return devTabs.sort((a, b) => a.order - b.order);
-    }
-
     // Optimize user mode tab filtering
     return tabConfiguration.userTabs
       .filter((tab) => {
@@ -237,33 +89,7 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
         return tab.visible && tab.window === 'user';
       })
       .sort((a, b) => a.order - b.order);
-  }, [tabConfiguration, developerMode, profile?.preferences?.notifications, baseTabConfig]);
-
-  // Optimize animation performance with layout animations
-  const gridLayoutVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.05,
-        delayChildren: 0.1,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, scale: 0.8 },
-    visible: {
-      opacity: 1,
-      scale: 1,
-      transition: {
-        type: 'spring',
-        stiffness: 200,
-        damping: 20,
-        mass: 0.6,
-      },
-    },
-  };
+  }, [tabConfiguration, profile?.preferences?.notifications, baseTabConfig]);
 
   // Reset to default view when modal opens/closes
   useEffect(() => {
@@ -295,21 +121,7 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
     }
   };
 
-  const handleDeveloperModeChange = (checked: boolean) => {
-    console.log('Developer mode changed:', checked);
-    setDeveloperMode(checked);
-  };
-
-  // Add effect to log developer mode changes
-  useEffect(() => {
-    console.log('Current developer mode:', developerMode);
-  }, [developerMode]);
-
-  const getTabComponent = (tabId: TabType | 'tab-management') => {
-    if (tabId === 'tab-management') {
-      return <TabManagement />;
-    }
-
+  const getTabComponent = (tabId: TabType) => {
     switch (tabId) {
       case 'profile':
         return <ProfileTab />;
@@ -327,14 +139,10 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
         return <LocalProvidersTab />;
       case 'connection':
         return <ConnectionsTab />;
-      case 'debug':
-        return <DebugTab />;
       case 'event-logs':
         return <EventLogsTab />;
       case 'update':
         return <UpdateTab />;
-      case 'task-manager':
-        return <TaskManagerTab />;
       case 'service-status':
         return <ServiceStatusTab />;
       case 'mcp':
@@ -354,8 +162,6 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
         return hasUnreadNotifications;
       case 'connection':
         return hasConnectionIssues;
-      case 'debug':
-        return hasActiveWarnings;
       default:
         return false;
     }
@@ -375,12 +181,6 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
           : currentIssue === 'high-latency'
             ? 'High latency detected'
             : 'Connection issues detected';
-      case 'debug': {
-        const warnings = activeIssues.filter((i) => i.type === 'warning').length;
-        const errors = activeIssues.filter((i) => i.type === 'error').length;
-
-        return `${warnings} warning${warnings === 1 ? '' : 's'}, ${errors} error${errors === 1 ? '' : 's'}`;
-      }
       default:
         return '';
     }
@@ -405,9 +205,6 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
       case 'connection':
         acknowledgeIssue();
         break;
-      case 'debug':
-        acknowledgeAllIssues();
-        break;
     }
 
     // Clear loading state after a delay
@@ -418,15 +215,7 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
     <RadixDialog.Root open={open}>
       <RadixDialog.Portal>
         <div className="fixed inset-0 flex items-center justify-center z-[100] modern-scrollbar">
-          <RadixDialog.Overlay asChild>
-            <motion.div
-              className="absolute inset-0 bg-black/70 dark:bg-black/80 backdrop-blur-sm"
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-            />
-          </RadixDialog.Overlay>
+          <RadixDialog.Overlay className="absolute inset-0 bg-black/70 dark:bg-black/80 backdrop-blur-sm transition-opacity duration-200" />
 
           <RadixDialog.Content
             aria-describedby={undefined}
@@ -434,19 +223,17 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
             onPointerDownOutside={handleClose}
             className="relative z-[101]"
           >
-            <motion.div
+            <div
               className={classNames(
                 'w-[1200px] h-[90vh]',
-                'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+                'bg-bolt-elements-background-depth-1',
                 'rounded-2xl shadow-2xl',
-                'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+                'border border-bolt-elements-borderColor',
                 'flex flex-col overflow-hidden',
                 'relative',
+                'transform transition-all duration-200 ease-out',
+                open ? 'opacity-100 scale-100 translate-y-0' : 'opacity-0 scale-95 translate-y-4',
               )}
-              initial={{ opacity: 0, scale: 0.95, y: 20 }}
-              animate={{ opacity: 1, scale: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.95, y: 20 }}
-              transition={{ duration: 0.2 }}
             >
               <div className="absolute inset-0 overflow-hidden rounded-2xl">
                 <BackgroundRays />
@@ -458,7 +245,7 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
                     {(activeTab || showTabManagement) && (
                       <button
                         onClick={handleBack}
-                        className="flex items-center justify-center w-8 h-8 rounded-full bg-transparent hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-all duration-200"
+                        className="flex items-center justify-center w-8 h-8 rounded-full bg-transparent hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-colors duration-150"
                       >
                         <div className="i-ph:arrow-left w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
                       </button>
@@ -469,18 +256,8 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
                   </div>
 
                   <div className="flex items-center gap-6">
-                    {/* Mode Toggle */}
-                    <div className="flex items-center gap-2 min-w-[140px] border-r border-gray-200 dark:border-gray-800 pr-6">
-                      <AnimatedSwitch
-                        id="developer-mode"
-                        checked={developerMode}
-                        onCheckedChange={handleDeveloperModeChange}
-                        label={developerMode ? 'Developer Mode' : 'User Mode'}
-                      />
-                    </div>
-
                     {/* Avatar and Dropdown */}
-                    <div className="border-l border-gray-200 dark:border-gray-800 pl-6">
+                    <div className="pl-6">
                       <AvatarDropdown onSelectTab={handleTabClick} />
                     </div>
 
@@ -508,49 +285,48 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
                     'touch-auto',
                   )}
                 >
-                  <motion.div
-                    key={activeTab || 'home'}
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    transition={{ duration: 0.2 }}
-                    className="p-6"
+                  <div
+                    className={classNames(
+                      'p-6 transition-opacity duration-150',
+                      activeTab || showTabManagement ? 'opacity-100' : 'opacity-100',
+                    )}
                   >
-                    {showTabManagement ? (
-                      <TabManagement />
-                    ) : activeTab ? (
+                    {activeTab ? (
                       getTabComponent(activeTab)
                     ) : (
-                      <motion.div
-                        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 relative"
-                        variants={gridLayoutVariants}
-                        initial="hidden"
-                        animate="visible"
-                      >
-                        <AnimatePresence mode="popLayout">
-                          {(visibleTabs as TabWithDevType[]).map((tab: TabWithDevType) => (
-                            <motion.div key={tab.id} layout variants={itemVariants} className="aspect-[1.5/1]">
-                              <TabTile
-                                tab={tab}
-                                onClick={() => handleTabClick(tab.id as TabType)}
-                                isActive={activeTab === tab.id}
-                                hasUpdate={getTabUpdateStatus(tab.id)}
-                                statusMessage={getStatusMessage(tab.id)}
-                                description={TAB_DESCRIPTIONS[tab.id]}
-                                isLoading={loadingTab === tab.id}
-                                className="h-full relative"
-                              >
-                                {BETA_TABS.has(tab.id) && <BetaLabel />}
-                              </TabTile>
-                            </motion.div>
-                          ))}
-                        </AnimatePresence>
-                      </motion.div>
+                      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 relative">
+                        {visibleTabs.map((tab, index) => (
+                          <div
+                            key={tab.id}
+                            className={classNames(
+                              'aspect-[1.5/1] transition-transform duration-100 ease-out',
+                              'hover:scale-[1.01]',
+                            )}
+                            style={{
+                              animationDelay: `${index * 30}ms`,
+                              animation: open ? 'fadeInUp 200ms ease-out forwards' : 'none',
+                            }}
+                          >
+                            <TabTile
+                              tab={tab}
+                              onClick={() => handleTabClick(tab.id as TabType)}
+                              isActive={activeTab === tab.id}
+                              hasUpdate={getTabUpdateStatus(tab.id)}
+                              statusMessage={getStatusMessage(tab.id)}
+                              description={TAB_DESCRIPTIONS[tab.id]}
+                              isLoading={loadingTab === tab.id}
+                              className="h-full relative"
+                            >
+                              {BETA_TABS.has(tab.id) && <BetaLabel />}
+                            </TabTile>
+                          </div>
+                        ))}
+                      </div>
                     )}
-                  </motion.div>
+                  </div>
                 </div>
               </div>
-            </motion.div>
+            </div>
           </RadixDialog.Content>
         </div>
       </RadixDialog.Portal>
diff --git a/app/components/@settings/core/constants.ts b/app/components/@settings/core/constants.ts
index 1921c5b..8bb9fc9 100644
--- a/app/components/@settings/core/constants.ts
+++ b/app/components/@settings/core/constants.ts
@@ -10,11 +10,8 @@ export const TAB_ICONS: Record<TabType, string> = {
   'local-providers': 'i-ph:desktop-fill',
   'service-status': 'i-ph:activity-bold',
   connection: 'i-ph:wifi-high-fill',
-  debug: 'i-ph:bug-fill',
   'event-logs': 'i-ph:list-bullets-fill',
   update: 'i-ph:arrow-clockwise-fill',
-  'task-manager': 'i-ph:chart-line-fill',
-  'tab-management': 'i-ph:squares-four-fill',
   mcp: 'i-ph:hard-drives-bold',
 };
 
@@ -28,11 +25,8 @@ export const TAB_LABELS: Record<TabType, string> = {
   'local-providers': 'Local Providers',
   'service-status': 'Service Status',
   connection: 'Connection',
-  debug: 'Debug',
   'event-logs': 'Event Logs',
   update: 'Updates',
-  'task-manager': 'Task Manager',
-  'tab-management': 'Tab Management',
   mcp: 'MCP Servers',
 };
 
@@ -46,11 +40,8 @@ export const TAB_DESCRIPTIONS: Record<TabType, string> = {
   'local-providers': 'Configure local AI providers and models',
   'service-status': 'Monitor cloud LLM service status',
   connection: 'Check connection status and settings',
-  debug: 'Debug tools and system information',
   'event-logs': 'View system events and logs',
   update: 'Check for updates and release notes',
-  'task-manager': 'Monitor system resources and processes',
-  'tab-management': 'Configure visible tabs and their order',
   mcp: 'Configure MCP (Model Context Protocol) servers',
 };
 
@@ -61,32 +52,13 @@ export const DEFAULT_TAB_CONFIG = [
   { id: 'cloud-providers', visible: true, window: 'user' as const, order: 2 },
   { id: 'local-providers', visible: true, window: 'user' as const, order: 3 },
   { id: 'connection', visible: true, window: 'user' as const, order: 4 },
-  { id: 'connection', visible: true, window: 'user' as const, order: 5 },
-  { id: 'notifications', visible: true, window: 'user' as const, order: 6 },
+  { id: 'notifications', visible: true, window: 'user' as const, order: 5 },
+  { id: 'event-logs', visible: true, window: 'user' as const, order: 6 },
   { id: 'mcp', visible: true, window: 'user' as const, order: 7 },
+  { id: 'profile', visible: true, window: 'user' as const, order: 8 },
+  { id: 'settings', visible: true, window: 'user' as const, order: 9 },
+  { id: 'service-status', visible: true, window: 'user' as const, order: 10 },
+  { id: 'update', visible: true, window: 'user' as const, order: 11 },
 
   // User Window Tabs (In dropdown, initially hidden)
-  { id: 'profile', visible: false, window: 'user' as const, order: 8 },
-  { id: 'settings', visible: false, window: 'user' as const, order: 9 },
-  { id: 'task-manager', visible: false, window: 'user' as const, order: 10 },
-  { id: 'service-status', visible: false, window: 'user' as const, order: 11 },
-
-  // User Window Tabs (Hidden, controlled by TaskManagerTab)
-  { id: 'debug', visible: false, window: 'user' as const, order: 12 },
-  { id: 'update', visible: false, window: 'user' as const, order: 13 },
-
-  // Developer Window Tabs (All visible by default)
-  { id: 'features', visible: true, window: 'developer' as const, order: 0 },
-  { id: 'data', visible: true, window: 'developer' as const, order: 1 },
-  { id: 'cloud-providers', visible: true, window: 'developer' as const, order: 2 },
-  { id: 'local-providers', visible: true, window: 'developer' as const, order: 3 },
-  { id: 'connection', visible: true, window: 'developer' as const, order: 4 },
-  { id: 'notifications', visible: true, window: 'developer' as const, order: 5 },
-  { id: 'event-logs', visible: true, window: 'developer' as const, order: 6 },
-  { id: 'profile', visible: true, window: 'developer' as const, order: 7 },
-  { id: 'settings', visible: true, window: 'developer' as const, order: 8 },
-  { id: 'task-manager', visible: true, window: 'developer' as const, order: 9 },
-  { id: 'service-status', visible: true, window: 'developer' as const, order: 10 },
-  { id: 'debug', visible: true, window: 'developer' as const, order: 11 },
-  { id: 'update', visible: true, window: 'developer' as const, order: 12 },
 ];
diff --git a/app/components/@settings/core/types.ts b/app/components/@settings/core/types.ts
index 684a30a..dced29e 100644
--- a/app/components/@settings/core/types.ts
+++ b/app/components/@settings/core/types.ts
@@ -12,11 +12,8 @@ export type TabType =
   | 'local-providers'
   | 'service-status'
   | 'connection'
-  | 'debug'
   | 'event-logs'
   | 'update'
-  | 'task-manager'
-  | 'tab-management'
   | 'mcp';
 
 export type WindowType = 'user' | 'developer';
@@ -64,7 +61,6 @@ export interface UserTabConfig extends TabVisibilityConfig {
 
 export interface TabWindowConfig {
   userTabs: UserTabConfig[];
-  developerTabs: DevTabConfig[];
 }
 
 export const TAB_LABELS: Record<TabType, string> = {
@@ -77,11 +73,8 @@ export const TAB_LABELS: Record<TabType, string> = {
   'local-providers': 'Local Providers',
   'service-status': 'Service Status',
   connection: 'Connections',
-  debug: 'Debug',
   'event-logs': 'Event Logs',
   update: 'Updates',
-  'task-manager': 'Task Manager',
-  'tab-management': 'Tab Management',
   mcp: 'MCP Servers',
 };
 
diff --git a/app/components/@settings/index.ts b/app/components/@settings/index.ts
index 862c33e..94b3de9 100644
--- a/app/components/@settings/index.ts
+++ b/app/components/@settings/index.ts
@@ -7,8 +7,6 @@ export { TAB_LABELS, TAB_DESCRIPTIONS, DEFAULT_TAB_CONFIG } from './core/constan
 
 // Shared components
 export { TabTile } from './shared/components/TabTile';
-export { TabManagement } from './shared/components/TabManagement';
 
 // Utils
 export { getVisibleTabs, reorderTabs, resetToDefaultConfig } from './utils/tab-helpers';
-export * from './utils/animations';
diff --git a/app/components/@settings/shared/components/TabManagement.tsx b/app/components/@settings/shared/components/TabManagement.tsx
deleted file mode 100644
index 513e171..0000000
--- a/app/components/@settings/shared/components/TabManagement.tsx
+++ /dev/null
@@ -1,382 +0,0 @@
-import { useState, useEffect } from 'react';
-import { motion } from 'framer-motion';
-import { useStore } from '@nanostores/react';
-import { Switch } from '~/components/ui/Switch';
-import { classNames } from '~/utils/classNames';
-import { tabConfigurationStore } from '~/lib/stores/settings';
-import { TAB_LABELS } from '~/components/@settings/core/constants';
-import type { TabType } from '~/components/@settings/core/types';
-import { toast } from 'react-toastify';
-import { TbLayoutGrid } from 'react-icons/tb';
-import { useSettingsStore } from '~/lib/stores/settings';
-
-// Define tab icons mapping
-const TAB_ICONS: Record<TabType, string> = {
-  profile: 'i-ph:user-circle-fill',
-  settings: 'i-ph:gear-six-fill',
-  notifications: 'i-ph:bell-fill',
-  features: 'i-ph:star-fill',
-  data: 'i-ph:database-fill',
-  'cloud-providers': 'i-ph:cloud-fill',
-  'local-providers': 'i-ph:desktop-fill',
-  'service-status': 'i-ph:activity-fill',
-  connection: 'i-ph:wifi-high-fill',
-  debug: 'i-ph:bug-fill',
-  'event-logs': 'i-ph:list-bullets-fill',
-  update: 'i-ph:arrow-clockwise-fill',
-  'task-manager': 'i-ph:chart-line-fill',
-  'tab-management': 'i-ph:squares-four-fill',
-  mcp: 'i-ph:hard-drives-bold',
-};
-
-// Define which tabs are default in user mode
-const DEFAULT_USER_TABS: TabType[] = [
-  'features',
-  'data',
-  'cloud-providers',
-  'local-providers',
-  'connection',
-  'notifications',
-  'event-logs',
-  'mcp',
-];
-
-// Define which tabs can be added to user mode
-const OPTIONAL_USER_TABS: TabType[] = ['profile', 'settings', 'task-manager', 'service-status', 'debug', 'update'];
-
-// All available tabs for user mode
-const ALL_USER_TABS = [...DEFAULT_USER_TABS, ...OPTIONAL_USER_TABS];
-
-// Define which tabs are beta
-const BETA_TABS = new Set<TabType>(['task-manager', 'service-status', 'update', 'local-providers']);
-
-// Beta label component
-const BetaLabel = () => (
-  <span className="px-1.5 py-0.5 text-[10px] rounded-full bg-purple-500/10 text-purple-500 font-medium">BETA</span>
-);
-
-export const TabManagement = () => {
-  const [searchQuery, setSearchQuery] = useState('');
-  const tabConfiguration = useStore(tabConfigurationStore);
-  const { setSelectedTab } = useSettingsStore();
-
-  const handleTabVisibilityChange = (tabId: TabType, checked: boolean) => {
-    // Get current tab configuration
-    const currentTab = tabConfiguration.userTabs.find((tab) => tab.id === tabId);
-
-    // If tab doesn't exist in configuration, create it
-    if (!currentTab) {
-      const newTab = {
-        id: tabId,
-        visible: checked,
-        window: 'user' as const,
-        order: tabConfiguration.userTabs.length,
-      };
-
-      const updatedTabs = [...tabConfiguration.userTabs, newTab];
-
-      tabConfigurationStore.set({
-        ...tabConfiguration,
-        userTabs: updatedTabs,
-      });
-
-      toast.success(`Tab ${checked ? 'enabled' : 'disabled'} successfully`);
-
-      return;
-    }
-
-    // Check if tab can be enabled in user mode
-    const canBeEnabled = DEFAULT_USER_TABS.includes(tabId) || OPTIONAL_USER_TABS.includes(tabId);
-
-    if (!canBeEnabled && checked) {
-      toast.error('This tab cannot be enabled in user mode');
-      return;
-    }
-
-    // Update tab visibility
-    const updatedTabs = tabConfiguration.userTabs.map((tab) => {
-      if (tab.id === tabId) {
-        return { ...tab, visible: checked };
-      }
-
-      return tab;
-    });
-
-    // Update store
-    tabConfigurationStore.set({
-      ...tabConfiguration,
-      userTabs: updatedTabs,
-    });
-
-    // Show success message
-    toast.success(`Tab ${checked ? 'enabled' : 'disabled'} successfully`);
-  };
-
-  // Create a map of existing tab configurations
-  const tabConfigMap = new Map(tabConfiguration.userTabs.map((tab) => [tab.id, tab]));
-
-  // Generate the complete list of tabs, including those not in the configuration
-  const allTabs = ALL_USER_TABS.map((tabId) => {
-    return (
-      tabConfigMap.get(tabId) || {
-        id: tabId,
-        visible: false,
-        window: 'user' as const,
-        order: -1,
-      }
-    );
-  });
-
-  // Filter tabs based on search query
-  const filteredTabs = allTabs.filter((tab) => TAB_LABELS[tab.id].toLowerCase().includes(searchQuery.toLowerCase()));
-
-  useEffect(() => {
-    // Reset to first tab when component unmounts
-    return () => {
-      setSelectedTab('user'); // Reset to user tab when unmounting
-    };
-  }, [setSelectedTab]);
-
-  return (
-    <div className="space-y-6">
-      <motion.div
-        className="space-y-4"
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3 }}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between gap-4 mt-8 mb-4">
-          <div className="flex items-center gap-2">
-            <div
-              className={classNames(
-                'w-8 h-8 flex items-center justify-center rounded-lg',
-                'bg-bolt-elements-background-depth-3',
-                'text-purple-500',
-              )}
-            >
-              <TbLayoutGrid className="w-5 h-5" />
-            </div>
-            <div>
-              <h4 className="text-md font-medium text-bolt-elements-textPrimary">Tab Management</h4>
-              <p className="text-sm text-bolt-elements-textSecondary">Configure visible tabs and their order</p>
-            </div>
-          </div>
-
-          {/* Search */}
-          <div className="relative w-64">
-            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-              <div className="i-ph:magnifying-glass w-4 h-4 text-gray-400" />
-            </div>
-            <input
-              type="text"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="Search tabs..."
-              className={classNames(
-                'w-full pl-10 pr-4 py-2 rounded-lg',
-                'bg-bolt-elements-background-depth-2',
-                'border border-bolt-elements-borderColor',
-                'text-bolt-elements-textPrimary',
-                'placeholder-bolt-elements-textTertiary',
-                'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
-                'transition-all duration-200',
-              )}
-            />
-          </div>
-        </div>
-
-        {/* Tab Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {/* Default Section Header */}
-          {filteredTabs.some((tab) => DEFAULT_USER_TABS.includes(tab.id)) && (
-            <div className="col-span-full flex items-center gap-2 mt-4 mb-2">
-              <div className="i-ph:star-fill w-4 h-4 text-purple-500" />
-              <span className="text-sm font-medium text-bolt-elements-textPrimary">Default Tabs</span>
-            </div>
-          )}
-
-          {/* Default Tabs */}
-          {filteredTabs
-            .filter((tab) => DEFAULT_USER_TABS.includes(tab.id))
-            .map((tab, index) => (
-              <motion.div
-                key={tab.id}
-                className={classNames(
-                  'rounded-lg border bg-bolt-elements-background text-bolt-elements-textPrimary',
-                  'bg-bolt-elements-background-depth-2',
-                  'hover:bg-bolt-elements-background-depth-3',
-                  'transition-all duration-200',
-                  'relative overflow-hidden group',
-                )}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: index * 0.1 }}
-                whileHover={{ scale: 1.02 }}
-              >
-                {/* Status Badges */}
-                <div className="absolute top-1 right-1.5 flex gap-1">
-                  <span className="px-1.5 py-0.25 text-xs rounded-full bg-purple-500/10 text-purple-500 font-medium mr-2">
-                    Default
-                  </span>
-                </div>
-
-                <div className="flex items-start gap-4 p-4">
-                  <motion.div
-                    className={classNames(
-                      'w-10 h-10 flex items-center justify-center rounded-xl',
-                      'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
-                      'transition-all duration-200',
-                      tab.visible ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
-                    )}
-                    whileHover={{ scale: 1.1 }}
-                    whileTap={{ scale: 0.9 }}
-                  >
-                    <div
-                      className={classNames('w-6 h-6', 'transition-transform duration-200', 'group-hover:rotate-12')}
-                    >
-                      <div className={classNames(TAB_ICONS[tab.id], 'w-full h-full')} />
-                    </div>
-                  </motion.div>
-
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center justify-between gap-4">
-                      <div>
-                        <div className="flex items-center gap-2">
-                          <h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
-                            {TAB_LABELS[tab.id]}
-                          </h4>
-                          {BETA_TABS.has(tab.id) && <BetaLabel />}
-                        </div>
-                        <p className="text-xs text-bolt-elements-textSecondary mt-0.5">
-                          {tab.visible ? 'Visible in user mode' : 'Hidden in user mode'}
-                        </p>
-                      </div>
-                      <Switch
-                        checked={tab.visible}
-                        onCheckedChange={(checked) => {
-                          const isDisabled =
-                            !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id);
-
-                          if (!isDisabled) {
-                            handleTabVisibilityChange(tab.id, checked);
-                          }
-                        }}
-                        className={classNames('data-[state=checked]:bg-purple-500 ml-4', {
-                          'opacity-50 pointer-events-none':
-                            !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id),
-                        })}
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                <motion.div
-                  className="absolute inset-0 border-2 border-purple-500/0 rounded-lg pointer-events-none"
-                  animate={{
-                    borderColor: tab.visible ? 'rgba(168, 85, 247, 0.2)' : 'rgba(168, 85, 247, 0)',
-                    scale: tab.visible ? 1 : 0.98,
-                  }}
-                  transition={{ duration: 0.2 }}
-                />
-              </motion.div>
-            ))}
-
-          {/* Optional Section Header */}
-          {filteredTabs.some((tab) => OPTIONAL_USER_TABS.includes(tab.id)) && (
-            <div className="col-span-full flex items-center gap-2 mt-8 mb-2">
-              <div className="i-ph:plus-circle-fill w-4 h-4 text-blue-500" />
-              <span className="text-sm font-medium text-bolt-elements-textPrimary">Optional Tabs</span>
-            </div>
-          )}
-
-          {/* Optional Tabs */}
-          {filteredTabs
-            .filter((tab) => OPTIONAL_USER_TABS.includes(tab.id))
-            .map((tab, index) => (
-              <motion.div
-                key={tab.id}
-                className={classNames(
-                  'rounded-lg border bg-bolt-elements-background text-bolt-elements-textPrimary',
-                  'bg-bolt-elements-background-depth-2',
-                  'hover:bg-bolt-elements-background-depth-3',
-                  'transition-all duration-200',
-                  'relative overflow-hidden group',
-                )}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: index * 0.1 }}
-                whileHover={{ scale: 1.02 }}
-              >
-                {/* Status Badges */}
-                <div className="absolute top-1 right-1.5 flex gap-1">
-                  <span className="px-1.5 py-0.25 text-xs rounded-full bg-blue-500/10 text-blue-500 font-medium mr-2">
-                    Optional
-                  </span>
-                </div>
-
-                <div className="flex items-start gap-4 p-4">
-                  <motion.div
-                    className={classNames(
-                      'w-10 h-10 flex items-center justify-center rounded-xl',
-                      'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
-                      'transition-all duration-200',
-                      tab.visible ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
-                    )}
-                    whileHover={{ scale: 1.1 }}
-                    whileTap={{ scale: 0.9 }}
-                  >
-                    <div
-                      className={classNames('w-6 h-6', 'transition-transform duration-200', 'group-hover:rotate-12')}
-                    >
-                      <div className={classNames(TAB_ICONS[tab.id], 'w-full h-full')} />
-                    </div>
-                  </motion.div>
-
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center justify-between gap-4">
-                      <div>
-                        <div className="flex items-center gap-2">
-                          <h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
-                            {TAB_LABELS[tab.id]}
-                          </h4>
-                          {BETA_TABS.has(tab.id) && <BetaLabel />}
-                        </div>
-                        <p className="text-xs text-bolt-elements-textSecondary mt-0.5">
-                          {tab.visible ? 'Visible in user mode' : 'Hidden in user mode'}
-                        </p>
-                      </div>
-                      <Switch
-                        checked={tab.visible}
-                        onCheckedChange={(checked) => {
-                          const isDisabled =
-                            !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id);
-
-                          if (!isDisabled) {
-                            handleTabVisibilityChange(tab.id, checked);
-                          }
-                        }}
-                        className={classNames('data-[state=checked]:bg-purple-500 ml-4', {
-                          'opacity-50 pointer-events-none':
-                            !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id),
-                        })}
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                <motion.div
-                  className="absolute inset-0 border-2 border-purple-500/0 rounded-lg pointer-events-none"
-                  animate={{
-                    borderColor: tab.visible ? 'rgba(168, 85, 247, 0.2)' : 'rgba(168, 85, 247, 0)',
-                    scale: tab.visible ? 1 : 0.98,
-                  }}
-                  transition={{ duration: 0.2 }}
-                />
-              </motion.div>
-            ))}
-        </div>
-      </motion.div>
-    </div>
-  );
-};
diff --git a/app/components/@settings/shared/components/TabTile.tsx b/app/components/@settings/shared/components/TabTile.tsx
index ea409d6..ebc0b19 100644
--- a/app/components/@settings/shared/components/TabTile.tsx
+++ b/app/components/@settings/shared/components/TabTile.tsx
@@ -1,8 +1,8 @@
-import { motion } from 'framer-motion';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { classNames } from '~/utils/classNames';
 import type { TabVisibilityConfig } from '~/components/@settings/core/types';
 import { TAB_LABELS, TAB_ICONS } from '~/components/@settings/core/constants';
+import { GlowingEffect } from '~/components/ui/GlowingEffect';
 
 interface TabTileProps {
   tab: TabVisibilityConfig;
@@ -28,106 +28,118 @@ export const TabTile: React.FC<TabTileProps> = ({
   children,
 }: TabTileProps) => {
   return (
-    <Tooltip.Provider delayDuration={200}>
+    <Tooltip.Provider delayDuration={0}>
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <motion.div
-            onClick={onClick}
-            className={classNames(
-              'relative flex flex-col items-center p-6 rounded-xl',
-              'w-full h-full min-h-[160px]',
-              'bg-white dark:bg-[#141414]',
-              'border border-[#E5E5E5] dark:border-[#333333]',
-              'group',
-              'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
-              'hover:border-purple-200 dark:hover:border-purple-900/30',
-              isActive ? 'border-purple-500 dark:border-purple-500/50 bg-purple-500/5 dark:bg-purple-500/10' : '',
-              isLoading ? 'cursor-wait opacity-70' : '',
-              className || '',
-            )}
-          >
-            {/* Main Content */}
-            <div className="flex flex-col items-center justify-center flex-1 w-full">
-              {/* Icon */}
-              <motion.div
+          <div className={classNames('min-h-[160px] list-none', className || '')}>
+            <div className="relative h-full rounded-xl border border-[#E5E5E5] dark:border-[#333333] p-0.5">
+              <GlowingEffect
+                blur={0}
+                borderWidth={1}
+                spread={20}
+                glow={true}
+                disabled={false}
+                proximity={40}
+                inactiveZone={0.3}
+                movementDuration={0.4}
+              />
+              <div
+                onClick={onClick}
                 className={classNames(
-                  'relative',
-                  'w-14 h-14',
-                  'flex items-center justify-center',
-                  'rounded-xl',
-                  'bg-gray-100 dark:bg-gray-800',
-                  'ring-1 ring-gray-200 dark:ring-gray-700',
-                  'group-hover:bg-purple-100 dark:group-hover:bg-gray-700/80',
-                  'group-hover:ring-purple-200 dark:group-hover:ring-purple-800/30',
-                  isActive ? 'bg-purple-500/10 dark:bg-purple-500/10 ring-purple-500/30 dark:ring-purple-500/20' : '',
+                  'relative flex flex-col items-center justify-center h-full p-4 rounded-lg',
+                  'bg-white dark:bg-[#141414]',
+                  'group cursor-pointer',
+                  'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
+                  'transition-colors duration-100 ease-out',
+                  isActive ? 'bg-purple-500/5 dark:bg-purple-500/10' : '',
+                  isLoading ? 'cursor-wait opacity-70 pointer-events-none' : '',
                 )}
               >
-                <motion.div
+                {/* Icon */}
+                <div
                   className={classNames(
-                    TAB_ICONS[tab.id],
-                    'w-8 h-8',
-                    'text-gray-600 dark:text-gray-300',
-                    'group-hover:text-purple-500 dark:group-hover:text-purple-400/80',
-                    isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
-                  )}
-                />
-              </motion.div>
-
-              {/* Label and Description */}
-              <div className="flex flex-col items-center mt-5 w-full">
-                <h3
-                  className={classNames(
-                    'text-[15px] font-medium leading-snug mb-2',
-                    'text-gray-700 dark:text-gray-200',
-                    'group-hover:text-purple-600 dark:group-hover:text-purple-300/90',
-                    isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
+                    'relative',
+                    'w-14 h-14',
+                    'flex items-center justify-center',
+                    'rounded-xl',
+                    'bg-gray-100 dark:bg-gray-800',
+                    'ring-1 ring-gray-200 dark:ring-gray-700',
+                    'group-hover:bg-purple-100 dark:group-hover:bg-gray-700/80',
+                    'group-hover:ring-purple-200 dark:group-hover:ring-purple-800/30',
+                    'transition-all duration-100 ease-out',
+                    isActive ? 'bg-purple-500/10 dark:bg-purple-500/10 ring-purple-500/30 dark:ring-purple-500/20' : '',
                   )}
                 >
-                  {TAB_LABELS[tab.id]}
-                </h3>
-                {description && (
-                  <p
+                  <div
                     className={classNames(
-                      'text-[13px] leading-relaxed',
-                      'text-gray-500 dark:text-gray-400',
-                      'max-w-[85%]',
-                      'text-center',
-                      'group-hover:text-purple-500 dark:group-hover:text-purple-400/70',
-                      isActive ? 'text-purple-400 dark:text-purple-400/80' : '',
+                      TAB_ICONS[tab.id],
+                      'w-8 h-8',
+                      'text-gray-600 dark:text-gray-300',
+                      'group-hover:text-purple-500 dark:group-hover:text-purple-400/80',
+                      'transition-colors duration-100 ease-out',
+                      isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
+                    )}
+                  />
+                </div>
+
+                {/* Label and Description */}
+                <div className="flex flex-col items-center mt-4 w-full">
+                  <h3
+                    className={classNames(
+                      'text-[15px] font-medium leading-snug mb-2',
+                      'text-gray-700 dark:text-gray-200',
+                      'group-hover:text-purple-600 dark:group-hover:text-purple-300/90',
+                      'transition-colors duration-100 ease-out',
+                      isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
                     )}
                   >
-                    {description}
-                  </p>
+                    {TAB_LABELS[tab.id]}
+                  </h3>
+                  {description && (
+                    <p
+                      className={classNames(
+                        'text-[13px] leading-relaxed',
+                        'text-gray-500 dark:text-gray-400',
+                        'max-w-[85%]',
+                        'text-center',
+                        'group-hover:text-purple-500 dark:group-hover:text-purple-400/70',
+                        'transition-colors duration-100 ease-out',
+                        isActive ? 'text-purple-400 dark:text-purple-400/80' : '',
+                      )}
+                    >
+                      {description}
+                    </p>
+                  )}
+                </div>
+
+                {/* Update Indicator with Tooltip */}
+                {hasUpdate && (
+                  <>
+                    <div className="absolute top-4 right-4 w-2 h-2 rounded-full bg-purple-500 dark:bg-purple-400 animate-pulse" />
+                    <Tooltip.Portal>
+                      <Tooltip.Content
+                        className={classNames(
+                          'px-3 py-1.5 rounded-lg',
+                          'bg-[#18181B] text-white',
+                          'text-sm font-medium',
+                          'select-none',
+                          'z-[100]',
+                        )}
+                        side="top"
+                        sideOffset={5}
+                      >
+                        {statusMessage}
+                        <Tooltip.Arrow className="fill-[#18181B]" />
+                      </Tooltip.Content>
+                    </Tooltip.Portal>
+                  </>
                 )}
+
+                {/* Children (e.g. Beta Label) */}
+                {children}
               </div>
             </div>
-
-            {/* Update Indicator with Tooltip */}
-            {hasUpdate && (
-              <>
-                <div className="absolute top-4 right-4 w-2 h-2 rounded-full bg-purple-500 dark:bg-purple-400 animate-pulse" />
-                <Tooltip.Portal>
-                  <Tooltip.Content
-                    className={classNames(
-                      'px-3 py-1.5 rounded-lg',
-                      'bg-[#18181B] text-white',
-                      'text-sm font-medium',
-                      'select-none',
-                      'z-[100]',
-                    )}
-                    side="top"
-                    sideOffset={5}
-                  >
-                    {statusMessage}
-                    <Tooltip.Arrow className="fill-[#18181B]" />
-                  </Tooltip.Content>
-                </Tooltip.Portal>
-              </>
-            )}
-
-            {/* Children (e.g. Beta Label) */}
-            {children}
-          </motion.div>
+          </div>
         </Tooltip.Trigger>
       </Tooltip.Root>
     </Tooltip.Provider>
diff --git a/app/components/@settings/tabs/debug/DebugTab.tsx b/app/components/@settings/tabs/debug/DebugTab.tsx
deleted file mode 100644
index 24931aa..0000000
--- a/app/components/@settings/tabs/debug/DebugTab.tsx
+++ /dev/null
@@ -1,2110 +0,0 @@
-import React, { useEffect, useState, useMemo, useCallback } from 'react';
-import { toast } from 'react-toastify';
-import { classNames } from '~/utils/classNames';
-import { logStore, type LogEntry } from '~/lib/stores/logs';
-import { useStore } from '@nanostores/react';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '~/components/ui/Collapsible';
-import { Progress } from '~/components/ui/Progress';
-import { ScrollArea } from '~/components/ui/ScrollArea';
-import { Badge } from '~/components/ui/Badge';
-import { Dialog, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
-import { jsPDF } from 'jspdf';
-import { useSettings } from '~/lib/hooks/useSettings';
-
-interface SystemInfo {
-  os: string;
-  arch: string;
-  platform: string;
-  cpus: string;
-  memory: {
-    total: string;
-    free: string;
-    used: string;
-    percentage: number;
-  };
-  node: string;
-  browser: {
-    name: string;
-    version: string;
-    language: string;
-    userAgent: string;
-    cookiesEnabled: boolean;
-    online: boolean;
-    platform: string;
-    cores: number;
-  };
-  screen: {
-    width: number;
-    height: number;
-    colorDepth: number;
-    pixelRatio: number;
-  };
-  time: {
-    timezone: string;
-    offset: number;
-    locale: string;
-  };
-  performance: {
-    memory: {
-      jsHeapSizeLimit: number;
-      totalJSHeapSize: number;
-      usedJSHeapSize: number;
-      usagePercentage: number;
-    };
-    timing: {
-      loadTime: number;
-      domReadyTime: number;
-      readyStart: number;
-      redirectTime: number;
-      appcacheTime: number;
-      unloadEventTime: number;
-      lookupDomainTime: number;
-      connectTime: number;
-      requestTime: number;
-      initDomTreeTime: number;
-      loadEventTime: number;
-    };
-    navigation: {
-      type: number;
-      redirectCount: number;
-    };
-  };
-  network: {
-    downlink: number;
-    effectiveType: string;
-    rtt: number;
-    saveData: boolean;
-    type: string;
-  };
-  battery?: {
-    charging: boolean;
-    chargingTime: number;
-    dischargingTime: number;
-    level: number;
-  };
-  storage: {
-    quota: number;
-    usage: number;
-    persistent: boolean;
-    temporary: boolean;
-  };
-}
-
-interface GitHubRepoInfo {
-  fullName: string;
-  defaultBranch: string;
-  stars: number;
-  forks: number;
-  openIssues?: number;
-}
-
-interface GitInfo {
-  local: {
-    commitHash: string;
-    branch: string;
-    commitTime: string;
-    author: string;
-    email: string;
-    remoteUrl: string;
-    repoName: string;
-  };
-  github?: {
-    currentRepo: GitHubRepoInfo;
-    upstream?: GitHubRepoInfo;
-  };
-  isForked?: boolean;
-}
-
-interface WebAppInfo {
-  name: string;
-  version: string;
-  description: string;
-  license: string;
-  environment: string;
-  timestamp: string;
-  runtimeInfo: {
-    nodeVersion: string;
-  };
-  dependencies: {
-    production: Array<{ name: string; version: string; type: string }>;
-    development: Array<{ name: string; version: string; type: string }>;
-    peer: Array<{ name: string; version: string; type: string }>;
-    optional: Array<{ name: string; version: string; type: string }>;
-  };
-  gitInfo: GitInfo;
-}
-
-// Add Ollama service status interface
-interface OllamaServiceStatus {
-  isRunning: boolean;
-  lastChecked: Date;
-  error?: string;
-  models?: Array<{
-    name: string;
-    size: string;
-    quantization: string;
-  }>;
-}
-
-interface ExportFormat {
-  id: string;
-  label: string;
-  icon: string;
-  handler: () => void;
-}
-
-const DependencySection = ({
-  title,
-  deps,
-}: {
-  title: string;
-  deps: Array<{ name: string; version: string; type: string }>;
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  if (deps.length === 0) {
-    return null;
-  }
-
-  return (
-    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
-      <CollapsibleTrigger
-        className={classNames(
-          'flex w-full items-center justify-between p-4',
-          'bg-white dark:bg-[#0A0A0A]',
-          'hover:bg-purple-50/50 dark:hover:bg-[#1a1a1a]',
-          'border-b border-[#E5E5E5] dark:border-[#1A1A1A]',
-          'transition-colors duration-200',
-          'first:rounded-t-lg last:rounded-b-lg',
-          { 'hover:rounded-lg': !isOpen },
-        )}
-      >
-        <div className="flex items-center gap-3">
-          <div className="i-ph:package text-bolt-elements-textSecondary w-4 h-4" />
-          <span className="text-base text-bolt-elements-textPrimary">
-            {title} Dependencies ({deps.length})
-          </span>
-        </div>
-        <div className="flex items-center gap-2">
-          <span className="text-sm text-bolt-elements-textSecondary">{isOpen ? 'Hide' : 'Show'}</span>
-          <div
-            className={classNames(
-              'i-ph:caret-down w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary',
-              isOpen ? 'rotate-180' : '',
-            )}
-          />
-        </div>
-      </CollapsibleTrigger>
-      <CollapsibleContent>
-        <ScrollArea
-          className={classNames(
-            'h-[200px] w-full',
-            'bg-white dark:bg-[#0A0A0A]',
-            'border-b border-[#E5E5E5] dark:border-[#1A1A1A]',
-            'last:rounded-b-lg last:border-b-0',
-          )}
-        >
-          <div className="space-y-2 p-4">
-            {deps.map((dep) => (
-              <div key={dep.name} className="flex items-center justify-between text-sm">
-                <span className="text-bolt-elements-textPrimary">{dep.name}</span>
-                <span className="text-bolt-elements-textSecondary">{dep.version}</span>
-              </div>
-            ))}
-          </div>
-        </ScrollArea>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-};
-
-export default function DebugTab() {
-  const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null);
-  const [webAppInfo, setWebAppInfo] = useState<WebAppInfo | null>(null);
-  const [ollamaStatus, setOllamaStatus] = useState<OllamaServiceStatus>({
-    isRunning: false,
-    lastChecked: new Date(),
-  });
-  const [loading, setLoading] = useState({
-    systemInfo: false,
-    webAppInfo: false,
-    errors: false,
-    performance: false,
-  });
-  const [openSections, setOpenSections] = useState({
-    system: false,
-    webapp: false,
-    errors: false,
-    performance: false,
-  });
-
-  const { providers } = useSettings();
-
-  // Subscribe to logStore updates
-  const logs = useStore(logStore.logs);
-  const errorLogs = useMemo(() => {
-    return Object.values(logs).filter(
-      (log): log is LogEntry => typeof log === 'object' && log !== null && 'level' in log && log.level === 'error',
-    );
-  }, [logs]);
-
-  // Set up error listeners when component mounts
-  useEffect(() => {
-    const handleError = (event: ErrorEvent) => {
-      logStore.logError(event.message, event.error, {
-        filename: event.filename,
-        lineNumber: event.lineno,
-        columnNumber: event.colno,
-      });
-    };
-
-    const handleRejection = (event: PromiseRejectionEvent) => {
-      logStore.logError('Unhandled Promise Rejection', event.reason);
-    };
-
-    window.addEventListener('error', handleError);
-    window.addEventListener('unhandledrejection', handleRejection);
-
-    return () => {
-      window.removeEventListener('error', handleError);
-      window.removeEventListener('unhandledrejection', handleRejection);
-    };
-  }, []);
-
-  // Check for errors when the errors section is opened
-  useEffect(() => {
-    if (openSections.errors) {
-      checkErrors();
-    }
-  }, [openSections.errors]);
-
-  // Load initial data when component mounts
-  useEffect(() => {
-    const loadInitialData = async () => {
-      await Promise.all([getSystemInfo(), getWebAppInfo()]);
-    };
-
-    loadInitialData();
-  }, []);
-
-  // Refresh data when sections are opened
-  useEffect(() => {
-    if (openSections.system) {
-      getSystemInfo();
-    }
-
-    if (openSections.webapp) {
-      getWebAppInfo();
-    }
-  }, [openSections.system, openSections.webapp]);
-
-  // Add periodic refresh of git info
-  useEffect(() => {
-    if (!openSections.webapp) {
-      return undefined;
-    }
-
-    // Initial fetch
-    const fetchGitInfo = async () => {
-      try {
-        const response = await fetch('/api/system/git-info');
-        const updatedGitInfo = (await response.json()) as GitInfo;
-
-        setWebAppInfo((prev) => {
-          if (!prev) {
-            return null;
-          }
-
-          // Only update if the data has changed
-          if (JSON.stringify(prev.gitInfo) === JSON.stringify(updatedGitInfo)) {
-            return prev;
-          }
-
-          return {
-            ...prev,
-            gitInfo: updatedGitInfo,
-          };
-        });
-      } catch (error) {
-        console.error('Failed to fetch git info:', error);
-      }
-    };
-
-    fetchGitInfo();
-
-    // Refresh every 5 minutes instead of every second
-    const interval = setInterval(fetchGitInfo, 5 * 60 * 1000);
-
-    return () => clearInterval(interval);
-  }, [openSections.webapp]);
-
-  const getSystemInfo = async () => {
-    try {
-      setLoading((prev) => ({ ...prev, systemInfo: true }));
-
-      // Get better OS detection
-      const userAgent = navigator.userAgent;
-      let detectedOS = 'Unknown';
-      let detectedArch = 'unknown';
-
-      // Improved OS detection
-      if (userAgent.indexOf('Win') !== -1) {
-        detectedOS = 'Windows';
-      } else if (userAgent.indexOf('Mac') !== -1) {
-        detectedOS = 'macOS';
-      } else if (userAgent.indexOf('Linux') !== -1) {
-        detectedOS = 'Linux';
-      } else if (userAgent.indexOf('Android') !== -1) {
-        detectedOS = 'Android';
-      } else if (/iPhone|iPad|iPod/.test(userAgent)) {
-        detectedOS = 'iOS';
-      }
-
-      // Better architecture detection
-      if (userAgent.indexOf('x86_64') !== -1 || userAgent.indexOf('x64') !== -1 || userAgent.indexOf('WOW64') !== -1) {
-        detectedArch = 'x64';
-      } else if (userAgent.indexOf('x86') !== -1 || userAgent.indexOf('i686') !== -1) {
-        detectedArch = 'x86';
-      } else if (userAgent.indexOf('arm64') !== -1 || userAgent.indexOf('aarch64') !== -1) {
-        detectedArch = 'arm64';
-      } else if (userAgent.indexOf('arm') !== -1) {
-        detectedArch = 'arm';
-      }
-
-      // Get browser info with improved detection
-      const browserName = (() => {
-        if (userAgent.indexOf('Edge') !== -1 || userAgent.indexOf('Edg/') !== -1) {
-          return 'Edge';
-        }
-
-        if (userAgent.indexOf('Chrome') !== -1) {
-          return 'Chrome';
-        }
-
-        if (userAgent.indexOf('Firefox') !== -1) {
-          return 'Firefox';
-        }
-
-        if (userAgent.indexOf('Safari') !== -1) {
-          return 'Safari';
-        }
-
-        return 'Unknown';
-      })();
-
-      const browserVersionMatch = userAgent.match(/(Edge|Edg|Chrome|Firefox|Safari)[\s/](\d+(\.\d+)*)/);
-      const browserVersion = browserVersionMatch ? browserVersionMatch[2] : 'Unknown';
-
-      // Get performance metrics
-      const memory = (performance as any).memory || {};
-      const timing = performance.timing;
-      const navigation = performance.navigation;
-      const connection = (navigator as any).connection || {};
-
-      // Try to use Navigation Timing API Level 2 when available
-      let loadTime = 0;
-      let domReadyTime = 0;
-
-      try {
-        const navEntries = performance.getEntriesByType('navigation');
-
-        if (navEntries.length > 0) {
-          const navTiming = navEntries[0] as PerformanceNavigationTiming;
-          loadTime = navTiming.loadEventEnd - navTiming.startTime;
-          domReadyTime = navTiming.domContentLoadedEventEnd - navTiming.startTime;
-        } else {
-          // Fall back to older API
-          loadTime = timing.loadEventEnd - timing.navigationStart;
-          domReadyTime = timing.domContentLoadedEventEnd - timing.navigationStart;
-        }
-      } catch {
-        // Fall back to older API if Navigation Timing API Level 2 is not available
-        loadTime = timing.loadEventEnd - timing.navigationStart;
-        domReadyTime = timing.domContentLoadedEventEnd - timing.navigationStart;
-      }
-
-      // Get battery info
-      let batteryInfo;
-
-      try {
-        const battery = await (navigator as any).getBattery();
-        batteryInfo = {
-          charging: battery.charging,
-          chargingTime: battery.chargingTime,
-          dischargingTime: battery.dischargingTime,
-          level: battery.level * 100,
-        };
-      } catch {
-        console.log('Battery API not supported');
-      }
-
-      // Get storage info
-      let storageInfo = {
-        quota: 0,
-        usage: 0,
-        persistent: false,
-        temporary: false,
-      };
-
-      try {
-        const storage = await navigator.storage.estimate();
-        const persistent = await navigator.storage.persist();
-        storageInfo = {
-          quota: storage.quota || 0,
-          usage: storage.usage || 0,
-          persistent,
-          temporary: !persistent,
-        };
-      } catch {
-        console.log('Storage API not supported');
-      }
-
-      // Get memory info from browser performance API
-      const performanceMemory = (performance as any).memory || {};
-      const totalMemory = performanceMemory.jsHeapSizeLimit || 0;
-      const usedMemory = performanceMemory.usedJSHeapSize || 0;
-      const freeMemory = totalMemory - usedMemory;
-      const memoryPercentage = totalMemory ? (usedMemory / totalMemory) * 100 : 0;
-
-      const systemInfo: SystemInfo = {
-        os: detectedOS,
-        arch: detectedArch,
-        platform: navigator.platform || 'unknown',
-        cpus: navigator.hardwareConcurrency + ' cores',
-        memory: {
-          total: formatBytes(totalMemory),
-          free: formatBytes(freeMemory),
-          used: formatBytes(usedMemory),
-          percentage: Math.round(memoryPercentage),
-        },
-        node: 'browser',
-        browser: {
-          name: browserName,
-          version: browserVersion,
-          language: navigator.language,
-          userAgent: navigator.userAgent,
-          cookiesEnabled: navigator.cookieEnabled,
-          online: navigator.onLine,
-          platform: navigator.platform || 'unknown',
-          cores: navigator.hardwareConcurrency,
-        },
-        screen: {
-          width: window.screen.width,
-          height: window.screen.height,
-          colorDepth: window.screen.colorDepth,
-          pixelRatio: window.devicePixelRatio,
-        },
-        time: {
-          timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-          offset: new Date().getTimezoneOffset(),
-          locale: navigator.language,
-        },
-        performance: {
-          memory: {
-            jsHeapSizeLimit: memory.jsHeapSizeLimit || 0,
-            totalJSHeapSize: memory.totalJSHeapSize || 0,
-            usedJSHeapSize: memory.usedJSHeapSize || 0,
-            usagePercentage: memory.totalJSHeapSize ? (memory.usedJSHeapSize / memory.totalJSHeapSize) * 100 : 0,
-          },
-          timing: {
-            loadTime,
-            domReadyTime,
-            readyStart: timing.fetchStart - timing.navigationStart,
-            redirectTime: timing.redirectEnd - timing.redirectStart,
-            appcacheTime: timing.domainLookupStart - timing.fetchStart,
-            unloadEventTime: timing.unloadEventEnd - timing.unloadEventStart,
-            lookupDomainTime: timing.domainLookupEnd - timing.domainLookupStart,
-            connectTime: timing.connectEnd - timing.connectStart,
-            requestTime: timing.responseEnd - timing.requestStart,
-            initDomTreeTime: timing.domInteractive - timing.responseEnd,
-            loadEventTime: timing.loadEventEnd - timing.loadEventStart,
-          },
-          navigation: {
-            type: navigation.type,
-            redirectCount: navigation.redirectCount,
-          },
-        },
-        network: {
-          downlink: connection?.downlink || 0,
-          effectiveType: connection?.effectiveType || 'unknown',
-          rtt: connection?.rtt || 0,
-          saveData: connection?.saveData || false,
-          type: connection?.type || 'unknown',
-        },
-        battery: batteryInfo,
-        storage: storageInfo,
-      };
-
-      setSystemInfo(systemInfo);
-      toast.success('System information updated');
-    } catch (error) {
-      toast.error('Failed to get system information');
-      console.error('Failed to get system information:', error);
-    } finally {
-      setLoading((prev) => ({ ...prev, systemInfo: false }));
-    }
-  };
-
-  // Helper function to format bytes to human readable format with better precision
-  const formatBytes = (bytes: number) => {
-    if (bytes === 0) {
-      return '0 B';
-    }
-
-    const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(1024));
-
-    // Return with proper precision based on unit size
-    if (i === 0) {
-      return `${bytes} ${units[i]}`;
-    }
-
-    return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${units[i]}`;
-  };
-
-  const getWebAppInfo = async () => {
-    try {
-      setLoading((prev) => ({ ...prev, webAppInfo: true }));
-
-      const [appResponse, gitResponse] = await Promise.all([
-        fetch('/api/system/app-info'),
-        fetch('/api/system/git-info'),
-      ]);
-
-      if (!appResponse.ok || !gitResponse.ok) {
-        throw new Error('Failed to fetch webapp info');
-      }
-
-      const appData = (await appResponse.json()) as Omit<WebAppInfo, 'gitInfo'>;
-      const gitData = (await gitResponse.json()) as GitInfo;
-
-      console.log('Git Info Response:', gitData); // Add logging to debug
-
-      setWebAppInfo({
-        ...appData,
-        gitInfo: gitData,
-      });
-
-      toast.success('WebApp information updated');
-
-      return true;
-    } catch (error) {
-      console.error('Failed to fetch webapp info:', error);
-      toast.error('Failed to fetch webapp information');
-      setWebAppInfo(null);
-
-      return false;
-    } finally {
-      setLoading((prev) => ({ ...prev, webAppInfo: false }));
-    }
-  };
-
-  const handleLogPerformance = () => {
-    try {
-      setLoading((prev) => ({ ...prev, performance: true }));
-
-      // Get performance metrics using modern Performance API
-      const performanceEntries = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
-      const memory = (performance as any).memory;
-
-      // Calculate timing metrics
-      const timingMetrics = {
-        loadTime: performanceEntries.loadEventEnd - performanceEntries.startTime,
-        domReadyTime: performanceEntries.domContentLoadedEventEnd - performanceEntries.startTime,
-        fetchTime: performanceEntries.responseEnd - performanceEntries.fetchStart,
-        redirectTime: performanceEntries.redirectEnd - performanceEntries.redirectStart,
-        dnsTime: performanceEntries.domainLookupEnd - performanceEntries.domainLookupStart,
-        tcpTime: performanceEntries.connectEnd - performanceEntries.connectStart,
-        ttfb: performanceEntries.responseStart - performanceEntries.requestStart,
-        processingTime: performanceEntries.loadEventEnd - performanceEntries.responseEnd,
-      };
-
-      // Get resource timing data
-      const resourceEntries = performance.getEntriesByType('resource');
-      const resourceStats = {
-        totalResources: resourceEntries.length,
-        totalSize: resourceEntries.reduce((total, entry) => total + ((entry as any).transferSize || 0), 0),
-        totalTime: Math.max(...resourceEntries.map((entry) => entry.duration)),
-      };
-
-      // Get memory metrics
-      const memoryMetrics = memory
-        ? {
-            jsHeapSizeLimit: memory.jsHeapSizeLimit,
-            totalJSHeapSize: memory.totalJSHeapSize,
-            usedJSHeapSize: memory.usedJSHeapSize,
-            heapUtilization: (memory.usedJSHeapSize / memory.totalJSHeapSize) * 100,
-          }
-        : null;
-
-      // Get frame rate metrics
-      let fps = 0;
-
-      if ('requestAnimationFrame' in window) {
-        const times: number[] = [];
-
-        function calculateFPS(now: number) {
-          times.push(now);
-
-          if (times.length > 10) {
-            const fps = Math.round((1000 * 10) / (now - times[0]));
-            times.shift();
-
-            return fps;
-          }
-
-          requestAnimationFrame(calculateFPS);
-
-          return 0;
-        }
-
-        fps = calculateFPS(performance.now());
-      }
-
-      // Log all performance metrics
-      logStore.logSystem('Performance Metrics', {
-        timing: timingMetrics,
-        resources: resourceStats,
-        memory: memoryMetrics,
-        fps,
-        timestamp: new Date().toISOString(),
-        navigationEntry: {
-          type: performanceEntries.type,
-          redirectCount: performanceEntries.redirectCount,
-        },
-      });
-
-      toast.success('Performance metrics logged');
-    } catch (error) {
-      toast.error('Failed to log performance metrics');
-      console.error('Failed to log performance metrics:', error);
-    } finally {
-      setLoading((prev) => ({ ...prev, performance: false }));
-    }
-  };
-
-  const checkErrors = async () => {
-    try {
-      setLoading((prev) => ({ ...prev, errors: true }));
-
-      // Get errors from log store
-      const storedErrors = errorLogs;
-
-      if (storedErrors.length === 0) {
-        toast.success('No errors found');
-      } else {
-        toast.warning(`Found ${storedErrors.length} error(s)`);
-      }
-    } catch (error) {
-      toast.error('Failed to check errors');
-      console.error('Failed to check errors:', error);
-    } finally {
-      setLoading((prev) => ({ ...prev, errors: false }));
-    }
-  };
-
-  const exportDebugInfo = () => {
-    try {
-      const debugData = {
-        timestamp: new Date().toISOString(),
-        system: systemInfo,
-        webApp: webAppInfo,
-        errors: logStore.getLogs().filter((log: LogEntry) => log.level === 'error'),
-        performance: {
-          memory: (performance as any).memory || {},
-          timing: performance.timing,
-          navigation: performance.navigation,
-        },
-      };
-
-      const blob = new Blob([JSON.stringify(debugData, null, 2)], { type: 'application/json' });
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `bolt-debug-info-${new Date().toISOString()}.json`;
-      document.body.appendChild(a);
-      a.click();
-      window.URL.revokeObjectURL(url);
-      document.body.removeChild(a);
-      toast.success('Debug information exported successfully');
-    } catch (error) {
-      console.error('Failed to export debug info:', error);
-      toast.error('Failed to export debug information');
-    }
-  };
-
-  const exportAsCSV = () => {
-    try {
-      const debugData = {
-        system: systemInfo,
-        webApp: webAppInfo,
-        errors: logStore.getLogs().filter((log: LogEntry) => log.level === 'error'),
-        performance: {
-          memory: (performance as any).memory || {},
-          timing: performance.timing,
-          navigation: performance.navigation,
-        },
-      };
-
-      // Convert the data to CSV format
-      const csvData = [
-        ['Category', 'Key', 'Value'],
-        ...Object.entries(debugData).flatMap(([category, data]) =>
-          Object.entries(data || {}).map(([key, value]) => [
-            category,
-            key,
-            typeof value === 'object' ? JSON.stringify(value) : String(value),
-          ]),
-        ),
-      ];
-
-      // Create CSV content
-      const csvContent = csvData.map((row) => row.join(',')).join('\n');
-      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `bolt-debug-info-${new Date().toISOString()}.csv`;
-      document.body.appendChild(a);
-      a.click();
-      window.URL.revokeObjectURL(url);
-      document.body.removeChild(a);
-      toast.success('Debug information exported as CSV');
-    } catch (error) {
-      console.error('Failed to export CSV:', error);
-      toast.error('Failed to export debug information as CSV');
-    }
-  };
-
-  const exportAsPDF = () => {
-    try {
-      const debugData = {
-        system: systemInfo,
-        webApp: webAppInfo,
-        errors: logStore.getLogs().filter((log: LogEntry) => log.level === 'error'),
-        performance: {
-          memory: (performance as any).memory || {},
-          timing: performance.timing,
-          navigation: performance.navigation,
-        },
-      };
-
-      // Create new PDF document
-      const doc = new jsPDF();
-      const lineHeight = 7;
-      let yPos = 20;
-      const margin = 20;
-      const pageWidth = doc.internal.pageSize.getWidth();
-      const maxLineWidth = pageWidth - 2 * margin;
-
-      // Add key-value pair with better formatting
-      const addKeyValue = (key: string, value: any, indent = 0) => {
-        // Check if we need a new page
-        if (yPos > doc.internal.pageSize.getHeight() - 20) {
-          doc.addPage();
-          yPos = margin;
-        }
-
-        doc.setFontSize(10);
-        doc.setTextColor('#374151');
-        doc.setFont('helvetica', 'bold');
-
-        // Format the key with proper spacing
-        const formattedKey = key.replace(/([A-Z])/g, ' $1').trim();
-        doc.text(formattedKey + ':', margin + indent, yPos);
-        doc.setFont('helvetica', 'normal');
-        doc.setTextColor('#6B7280');
-
-        let valueText;
-
-        if (typeof value === 'object' && value !== null) {
-          // Skip rendering if value is empty object
-          if (Object.keys(value).length === 0) {
-            return;
-          }
-
-          yPos += lineHeight;
-          Object.entries(value).forEach(([subKey, subValue]) => {
-            // Check for page break before each sub-item
-            if (yPos > doc.internal.pageSize.getHeight() - 20) {
-              doc.addPage();
-              yPos = margin;
-            }
-
-            const formattedSubKey = subKey.replace(/([A-Z])/g, ' $1').trim();
-            addKeyValue(formattedSubKey, subValue, indent + 10);
-          });
-
-          return;
-        } else {
-          valueText = String(value);
-        }
-
-        const valueX = margin + indent + doc.getTextWidth(formattedKey + ': ');
-        const maxValueWidth = maxLineWidth - indent - doc.getTextWidth(formattedKey + ': ');
-        const lines = doc.splitTextToSize(valueText, maxValueWidth);
-
-        // Check if we need a new page for the value
-        if (yPos + lines.length * lineHeight > doc.internal.pageSize.getHeight() - 20) {
-          doc.addPage();
-          yPos = margin;
-        }
-
-        doc.text(lines, valueX, yPos);
-        yPos += lines.length * lineHeight;
-      };
-
-      // Add section header with page break check
-      const addSectionHeader = (title: string) => {
-        // Check if we need a new page
-        if (yPos + 20 > doc.internal.pageSize.getHeight() - 20) {
-          doc.addPage();
-          yPos = margin;
-        }
-
-        yPos += lineHeight;
-        doc.setFillColor('#F3F4F6');
-        doc.rect(margin - 2, yPos - 5, pageWidth - 2 * (margin - 2), lineHeight + 6, 'F');
-        doc.setFont('helvetica', 'bold');
-        doc.setTextColor('#111827');
-        doc.setFontSize(12);
-        doc.text(title.toUpperCase(), margin, yPos);
-        doc.setFont('helvetica', 'normal');
-        yPos += lineHeight * 1.5;
-      };
-
-      // Add horizontal line with page break check
-      const addHorizontalLine = () => {
-        // Check if we need a new page
-        if (yPos + 10 > doc.internal.pageSize.getHeight() - 20) {
-          doc.addPage();
-          yPos = margin;
-
-          return; // Skip drawing line if we just started a new page
-        }
-
-        doc.setDrawColor('#E5E5E5');
-        doc.line(margin, yPos, pageWidth - margin, yPos);
-        yPos += lineHeight;
-      };
-
-      // Helper function to add footer to all pages
-      const addFooters = () => {
-        const totalPages = doc.internal.pages.length - 1;
-
-        for (let i = 1; i <= totalPages; i++) {
-          doc.setPage(i);
-          doc.setFontSize(8);
-          doc.setTextColor('#9CA3AF');
-          doc.text(`Page ${i} of ${totalPages}`, pageWidth / 2, doc.internal.pageSize.getHeight() - 10, {
-            align: 'center',
-          });
-        }
-      };
-
-      // Title and Header (first page only)
-      doc.setFillColor('#6366F1');
-      doc.rect(0, 0, pageWidth, 40, 'F');
-      doc.setTextColor('#FFFFFF');
-      doc.setFontSize(24);
-      doc.setFont('helvetica', 'bold');
-      doc.text('Debug Information Report', margin, 25);
-      yPos = 50;
-
-      // Timestamp and metadata
-      doc.setTextColor('#6B7280');
-      doc.setFontSize(10);
-      doc.setFont('helvetica', 'normal');
-
-      const timestamp = new Date().toLocaleString(undefined, {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit',
-        second: '2-digit',
-      });
-      doc.text(`Generated: ${timestamp}`, margin, yPos);
-      yPos += lineHeight * 2;
-
-      // System Information Section
-      if (debugData.system) {
-        addSectionHeader('System Information');
-
-        // OS and Architecture
-        addKeyValue('Operating System', debugData.system.os);
-        addKeyValue('Architecture', debugData.system.arch);
-        addKeyValue('Platform', debugData.system.platform);
-        addKeyValue('CPU Cores', debugData.system.cpus);
-
-        // Memory
-        const memory = debugData.system.memory;
-        addKeyValue('Memory', {
-          'Total Memory': memory.total,
-          'Used Memory': memory.used,
-          'Free Memory': memory.free,
-          Usage: memory.percentage + '%',
-        });
-
-        // Browser Information
-        const browser = debugData.system.browser;
-        addKeyValue('Browser', {
-          Name: browser.name,
-          Version: browser.version,
-          Language: browser.language,
-          Platform: browser.platform,
-          'Cookies Enabled': browser.cookiesEnabled ? 'Yes' : 'No',
-          'Online Status': browser.online ? 'Online' : 'Offline',
-        });
-
-        // Screen Information
-        const screen = debugData.system.screen;
-        addKeyValue('Screen', {
-          Resolution: `${screen.width}x${screen.height}`,
-          'Color Depth': screen.colorDepth + ' bit',
-          'Pixel Ratio': screen.pixelRatio + 'x',
-        });
-
-        // Time Information
-        const time = debugData.system.time;
-        addKeyValue('Time Settings', {
-          Timezone: time.timezone,
-          'UTC Offset': time.offset / 60 + ' hours',
-          Locale: time.locale,
-        });
-
-        addHorizontalLine();
-      }
-
-      // Web App Information Section
-      if (debugData.webApp) {
-        addSectionHeader('Web App Information');
-
-        // Basic Info
-        addKeyValue('Application', {
-          Name: debugData.webApp.name,
-          Version: debugData.webApp.version,
-          Environment: debugData.webApp.environment,
-          'Node Version': debugData.webApp.runtimeInfo.nodeVersion,
-        });
-
-        // Git Information
-        if (debugData.webApp.gitInfo) {
-          const gitInfo = debugData.webApp.gitInfo.local;
-          addKeyValue('Git Information', {
-            Branch: gitInfo.branch,
-            Commit: gitInfo.commitHash,
-            Author: gitInfo.author,
-            'Commit Time': gitInfo.commitTime,
-            Repository: gitInfo.repoName,
-          });
-
-          if (debugData.webApp.gitInfo.github) {
-            const githubInfo = debugData.webApp.gitInfo.github.currentRepo;
-            addKeyValue('GitHub Information', {
-              Repository: githubInfo.fullName,
-              'Default Branch': githubInfo.defaultBranch,
-              Stars: githubInfo.stars,
-              Forks: githubInfo.forks,
-              'Open Issues': githubInfo.openIssues || 0,
-            });
-          }
-        }
-
-        addHorizontalLine();
-      }
-
-      // Performance Section
-      if (debugData.performance) {
-        addSectionHeader('Performance Metrics');
-
-        // Memory Usage
-        const memory = debugData.performance.memory || {};
-        const totalHeap = memory.totalJSHeapSize || 0;
-        const usedHeap = memory.usedJSHeapSize || 0;
-        const usagePercentage = memory.usagePercentage || 0;
-
-        addKeyValue('Memory Usage', {
-          'Total Heap Size': formatBytes(totalHeap),
-          'Used Heap Size': formatBytes(usedHeap),
-          Usage: usagePercentage.toFixed(1) + '%',
-        });
-
-        // Timing Metrics
-        const timing = debugData.performance.timing || {};
-        const navigationStart = timing.navigationStart || 0;
-        const loadEventEnd = timing.loadEventEnd || 0;
-        const domContentLoadedEventEnd = timing.domContentLoadedEventEnd || 0;
-        const responseEnd = timing.responseEnd || 0;
-        const requestStart = timing.requestStart || 0;
-
-        const loadTime = loadEventEnd > navigationStart ? loadEventEnd - navigationStart : 0;
-        const domReadyTime =
-          domContentLoadedEventEnd > navigationStart ? domContentLoadedEventEnd - navigationStart : 0;
-        const requestTime = responseEnd > requestStart ? responseEnd - requestStart : 0;
-
-        addKeyValue('Page Load Metrics', {
-          'Total Load Time': (loadTime / 1000).toFixed(2) + ' seconds',
-          'DOM Ready Time': (domReadyTime / 1000).toFixed(2) + ' seconds',
-          'Request Time': (requestTime / 1000).toFixed(2) + ' seconds',
-        });
-
-        // Network Information
-        if (debugData.system?.network) {
-          const network = debugData.system.network;
-          addKeyValue('Network Information', {
-            'Connection Type': network.type || 'Unknown',
-            'Effective Type': network.effectiveType || 'Unknown',
-            'Download Speed': (network.downlink || 0) + ' Mbps',
-            'Latency (RTT)': (network.rtt || 0) + ' ms',
-            'Data Saver': network.saveData ? 'Enabled' : 'Disabled',
-          });
-        }
-
-        addHorizontalLine();
-      }
-
-      // Errors Section
-      if (debugData.errors && debugData.errors.length > 0) {
-        addSectionHeader('Error Log');
-
-        debugData.errors.forEach((error: LogEntry, index: number) => {
-          doc.setTextColor('#DC2626');
-          doc.setFontSize(10);
-          doc.setFont('helvetica', 'bold');
-          doc.text(`Error ${index + 1}:`, margin, yPos);
-          yPos += lineHeight;
-
-          doc.setFont('helvetica', 'normal');
-          doc.setTextColor('#6B7280');
-          addKeyValue('Message', error.message, 10);
-
-          if (error.stack) {
-            addKeyValue('Stack', error.stack, 10);
-          }
-
-          if (error.source) {
-            addKeyValue('Source', error.source, 10);
-          }
-
-          yPos += lineHeight;
-        });
-      }
-
-      // Add footers to all pages at the end
-      addFooters();
-
-      // Save the PDF
-      doc.save(`bolt-debug-info-${new Date().toISOString()}.pdf`);
-      toast.success('Debug information exported as PDF');
-    } catch (error) {
-      console.error('Failed to export PDF:', error);
-      toast.error('Failed to export debug information as PDF');
-    }
-  };
-
-  const exportAsText = () => {
-    try {
-      const debugData = {
-        system: systemInfo,
-        webApp: webAppInfo,
-        errors: logStore.getLogs().filter((log: LogEntry) => log.level === 'error'),
-        performance: {
-          memory: (performance as any).memory || {},
-          timing: performance.timing,
-          navigation: performance.navigation,
-        },
-      };
-
-      const textContent = Object.entries(debugData)
-        .map(([category, data]) => {
-          return `${category.toUpperCase()}\n${'-'.repeat(30)}\n${JSON.stringify(data, null, 2)}\n\n`;
-        })
-        .join('\n');
-
-      const blob = new Blob([textContent], { type: 'text/plain' });
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `bolt-debug-info-${new Date().toISOString()}.txt`;
-      document.body.appendChild(a);
-      a.click();
-      window.URL.revokeObjectURL(url);
-      document.body.removeChild(a);
-      toast.success('Debug information exported as text file');
-    } catch (error) {
-      console.error('Failed to export text file:', error);
-      toast.error('Failed to export debug information as text file');
-    }
-  };
-
-  const exportFormats: ExportFormat[] = [
-    {
-      id: 'json',
-      label: 'Export as JSON',
-      icon: 'i-ph:file-js',
-      handler: exportDebugInfo,
-    },
-    {
-      id: 'csv',
-      label: 'Export as CSV',
-      icon: 'i-ph:file-csv',
-      handler: exportAsCSV,
-    },
-    {
-      id: 'pdf',
-      label: 'Export as PDF',
-      icon: 'i-ph:file-pdf',
-      handler: exportAsPDF,
-    },
-    {
-      id: 'txt',
-      label: 'Export as Text',
-      icon: 'i-ph:file-text',
-      handler: exportAsText,
-    },
-  ];
-
-  // Add Ollama health check function
-  const checkOllamaStatus = useCallback(async () => {
-    try {
-      const ollamaProvider = providers?.Ollama;
-      const baseUrl = ollamaProvider?.settings?.baseUrl || 'http://127.0.0.1:11434';
-
-      // First check if service is running
-      const versionResponse = await fetch(`${baseUrl}/api/version`);
-
-      if (!versionResponse.ok) {
-        throw new Error('Service not running');
-      }
-
-      // Then fetch installed models
-      const modelsResponse = await fetch(`${baseUrl}/api/tags`);
-
-      const modelsData = (await modelsResponse.json()) as {
-        models: Array<{ name: string; size: string; quantization: string }>;
-      };
-
-      setOllamaStatus({
-        isRunning: true,
-        lastChecked: new Date(),
-        models: modelsData.models,
-      });
-    } catch {
-      setOllamaStatus({
-        isRunning: false,
-        error: 'Connection failed',
-        lastChecked: new Date(),
-        models: undefined,
-      });
-    }
-  }, [providers]);
-
-  // Monitor Ollama provider status and check periodically
-  useEffect(() => {
-    const ollamaProvider = providers?.Ollama;
-
-    if (ollamaProvider?.settings?.enabled) {
-      // Check immediately when provider is enabled
-      checkOllamaStatus();
-
-      // Set up periodic checks every 10 seconds
-      const intervalId = setInterval(checkOllamaStatus, 10000);
-
-      return () => clearInterval(intervalId);
-    }
-
-    return undefined;
-  }, [providers, checkOllamaStatus]);
-
-  // Replace the existing export button with this new component
-  const ExportButton = () => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpenChange = useCallback((open: boolean) => {
-      setIsOpen(open);
-    }, []);
-
-    const handleFormatClick = useCallback((handler: () => void) => {
-      handler();
-      setIsOpen(false);
-    }, []);
-
-    return (
-      <DialogRoot open={isOpen} onOpenChange={handleOpenChange}>
-        <button
-          onClick={() => setIsOpen(true)}
-          className={classNames(
-            'group flex items-center gap-2',
-            'rounded-lg px-3 py-1.5',
-            'text-sm text-gray-900 dark:text-white',
-            'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
-            'border border-[#E5E5E5] dark:border-[#1A1A1A]',
-            'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
-            'transition-all duration-200',
-          )}
-        >
-          <span className="i-ph:download text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
-          Export
-        </button>
-
-        <Dialog showCloseButton>
-          <div className="p-6">
-            <DialogTitle className="flex items-center gap-2">
-              <div className="i-ph:download w-5 h-5" />
-              Export Debug Information
-            </DialogTitle>
-
-            <div className="mt-4 flex flex-col gap-2">
-              {exportFormats.map((format) => (
-                <button
-                  key={format.id}
-                  onClick={() => handleFormatClick(format.handler)}
-                  className={classNames(
-                    'flex items-center gap-3 px-4 py-3 text-sm rounded-lg transition-colors w-full text-left',
-                    'bg-white dark:bg-[#0A0A0A]',
-                    'border border-[#E5E5E5] dark:border-[#1A1A1A]',
-                    'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
-                    'hover:border-purple-200 dark:hover:border-purple-900/30',
-                    'text-bolt-elements-textPrimary',
-                  )}
-                >
-                  <div className={classNames(format.icon, 'w-5 h-5')} />
-                  <div>
-                    <div className="font-medium">{format.label}</div>
-                    <div className="text-xs text-bolt-elements-textSecondary mt-0.5">
-                      {format.id === 'json' && 'Export as a structured JSON file'}
-                      {format.id === 'csv' && 'Export as a CSV spreadsheet'}
-                      {format.id === 'pdf' && 'Export as a formatted PDF document'}
-                      {format.id === 'txt' && 'Export as a formatted text file'}
-                    </div>
-                  </div>
-                </button>
-              ))}
-            </div>
-          </div>
-        </Dialog>
-      </DialogRoot>
-    );
-  };
-
-  // Add helper function to get Ollama status text and color
-  const getOllamaStatus = () => {
-    const ollamaProvider = providers?.Ollama;
-    const isOllamaEnabled = ollamaProvider?.settings?.enabled;
-
-    if (!isOllamaEnabled) {
-      return {
-        status: 'Disabled',
-        color: 'text-red-500',
-        bgColor: 'bg-red-500',
-        message: 'Ollama provider is disabled in settings',
-      };
-    }
-
-    if (!ollamaStatus.isRunning) {
-      return {
-        status: 'Not Running',
-        color: 'text-red-500',
-        bgColor: 'bg-red-500',
-        message: ollamaStatus.error || 'Ollama service is not running',
-      };
-    }
-
-    const modelCount = ollamaStatus.models?.length ?? 0;
-
-    return {
-      status: 'Running',
-      color: 'text-green-500',
-      bgColor: 'bg-green-500',
-      message: `Ollama service is running with ${modelCount} installed models (Provider: Enabled)`,
-    };
-  };
-
-  // Add type for status result
-  type StatusResult = {
-    status: string;
-    color: string;
-    bgColor: string;
-    message: string;
-  };
-
-  const status = getOllamaStatus() as StatusResult;
-
-  return (
-    <div className="flex flex-col gap-6 max-w-7xl mx-auto p-4">
-      {/* Quick Stats Banner */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        {/* Errors Card */}
-        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
-          <div className="flex items-center gap-2">
-            <div className="i-ph:warning-octagon text-purple-500 w-4 h-4" />
-            <div className="text-sm text-bolt-elements-textSecondary">Errors</div>
-          </div>
-          <div className="flex items-center gap-2 mt-2">
-            <span
-              className={classNames('text-2xl font-semibold', errorLogs.length > 0 ? 'text-red-500' : 'text-green-500')}
-            >
-              {errorLogs.length}
-            </span>
-          </div>
-          <div className="text-xs text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
-            <div
-              className={classNames(
-                'w-3.5 h-3.5',
-                errorLogs.length > 0 ? 'i-ph:warning text-red-500' : 'i-ph:check-circle text-green-500',
-              )}
-            />
-            {errorLogs.length > 0 ? 'Errors detected' : 'No errors detected'}
-          </div>
-        </div>
-
-        {/* Memory Usage Card */}
-        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
-          <div className="flex items-center gap-2">
-            <div className="i-ph:cpu text-purple-500 w-4 h-4" />
-            <div className="text-sm text-bolt-elements-textSecondary">Memory Usage</div>
-          </div>
-          <div className="flex items-center gap-2 mt-2">
-            <span
-              className={classNames(
-                'text-2xl font-semibold',
-                (systemInfo?.memory?.percentage ?? 0) > 80
-                  ? 'text-red-500'
-                  : (systemInfo?.memory?.percentage ?? 0) > 60
-                    ? 'text-yellow-500'
-                    : 'text-green-500',
-              )}
-            >
-              {systemInfo?.memory?.percentage ?? 0}%
-            </span>
-          </div>
-          <Progress
-            value={systemInfo?.memory?.percentage ?? 0}
-            className={classNames(
-              'mt-2',
-              (systemInfo?.memory?.percentage ?? 0) > 80
-                ? '[&>div]:bg-red-500'
-                : (systemInfo?.memory?.percentage ?? 0) > 60
-                  ? '[&>div]:bg-yellow-500'
-                  : '[&>div]:bg-green-500',
-            )}
-          />
-          <div className="text-xs text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
-            <div className="i-ph:info w-3.5 h-3.5 text-purple-500" />
-            Used: {systemInfo?.memory.used ?? '0 GB'} / {systemInfo?.memory.total ?? '0 GB'}
-          </div>
-        </div>
-
-        {/* Page Load Time Card */}
-        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
-          <div className="flex items-center gap-2">
-            <div className="i-ph:timer text-purple-500 w-4 h-4" />
-            <div className="text-sm text-bolt-elements-textSecondary">Page Load Time</div>
-          </div>
-          <div className="flex items-center gap-2 mt-2">
-            <span
-              className={classNames(
-                'text-2xl font-semibold',
-                (systemInfo?.performance.timing.loadTime ?? 0) > 2000
-                  ? 'text-red-500'
-                  : (systemInfo?.performance.timing.loadTime ?? 0) > 1000
-                    ? 'text-yellow-500'
-                    : 'text-green-500',
-              )}
-            >
-              {systemInfo ? (systemInfo.performance.timing.loadTime / 1000).toFixed(2) : '-'}s
-            </span>
-          </div>
-          <div className="text-xs text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
-            <div className="i-ph:code w-3.5 h-3.5 text-purple-500" />
-            DOM Ready: {systemInfo ? (systemInfo.performance.timing.domReadyTime / 1000).toFixed(2) : '-'}s
-          </div>
-        </div>
-
-        {/* Network Speed Card */}
-        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
-          <div className="flex items-center gap-2">
-            <div className="i-ph:wifi-high text-purple-500 w-4 h-4" />
-            <div className="text-sm text-bolt-elements-textSecondary">Network Speed</div>
-          </div>
-          <div className="flex items-center gap-2 mt-2">
-            <span
-              className={classNames(
-                'text-2xl font-semibold',
-                (systemInfo?.network.downlink ?? 0) < 5
-                  ? 'text-red-500'
-                  : (systemInfo?.network.downlink ?? 0) < 10
-                    ? 'text-yellow-500'
-                    : 'text-green-500',
-              )}
-            >
-              {systemInfo?.network.downlink ?? '-'} Mbps
-            </span>
-          </div>
-          <div className="text-xs text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
-            <div className="i-ph:activity w-3.5 h-3.5 text-purple-500" />
-            RTT: {systemInfo?.network.rtt ?? '-'} ms
-          </div>
-        </div>
-
-        {/* Ollama Service Card - Now spans all 4 columns */}
-        <div className="md:col-span-4 p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[260px] flex flex-col">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="i-ph:robot text-purple-500 w-5 h-5" />
-              <div>
-                <div className="text-base font-medium text-bolt-elements-textPrimary">Ollama Service</div>
-                <div className="text-xs text-bolt-elements-textSecondary mt-0.5">{status.message}</div>
-              </div>
-            </div>
-            <div className="flex items-center gap-3">
-              <div className="flex items-center gap-2 px-2.5 py-1 rounded-full bg-bolt-elements-background-depth-3">
-                <div
-                  className={classNames('w-2 h-2 rounded-full animate-pulse', status.bgColor, {
-                    'shadow-lg shadow-green-500/20': status.status === 'Running',
-                    'shadow-lg shadow-red-500/20': status.status === 'Not Running',
-                  })}
-                />
-                <span className={classNames('text-xs font-medium flex items-center gap-1', status.color)}>
-                  {status.status}
-                </span>
-              </div>
-              <div className="text-[10px] text-bolt-elements-textTertiary flex items-center gap-1.5">
-                <div className="i-ph:clock w-3 h-3" />
-                {ollamaStatus.lastChecked.toLocaleTimeString()}
-              </div>
-            </div>
-          </div>
-
-          <div className="mt-6 flex-1 min-h-0 flex flex-col">
-            {status.status === 'Running' && ollamaStatus.models && ollamaStatus.models.length > 0 ? (
-              <>
-                <div className="text-xs font-medium text-bolt-elements-textSecondary flex items-center justify-between mb-3">
-                  <div className="flex items-center gap-2">
-                    <div className="i-ph:cube-duotone w-4 h-4 text-purple-500" />
-                    <span>Installed Models</span>
-                    <Badge variant="secondary" className="ml-1">
-                      {ollamaStatus.models.length}
-                    </Badge>
-                  </div>
-                </div>
-                <div className="overflow-y-auto flex-1 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-600">
-                  <div className="grid grid-cols-2 gap-3 pr-2">
-                    {ollamaStatus.models.map((model) => (
-                      <div
-                        key={model.name}
-                        className="text-sm bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4 rounded-lg px-4 py-3 flex items-center justify-between transition-colors group"
-                      >
-                        <div className="flex items-center gap-2 text-bolt-elements-textSecondary">
-                          <div className="i-ph:cube w-4 h-4 text-purple-500/70 group-hover:text-purple-500 transition-colors" />
-                          <span className="font-mono truncate">{model.name}</span>
-                        </div>
-                        <Badge variant="outline" className="ml-2 text-xs font-mono">
-                          {Math.round(parseInt(model.size) / 1024 / 1024)}MB
-                        </Badge>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </>
-            ) : (
-              <div className="flex-1 flex items-center justify-center">
-                <div className="flex flex-col items-center gap-3 max-w-[280px] text-center">
-                  <div
-                    className={classNames('w-12 h-12', {
-                      'i-ph:warning-circle text-red-500/80':
-                        status.status === 'Not Running' || status.status === 'Disabled',
-                      'i-ph:cube-duotone text-purple-500/80': status.status === 'Running',
-                    })}
-                  />
-                  <span className="text-sm text-bolt-elements-textSecondary">{status.message}</span>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Action Buttons */}
-      <div className="flex flex-wrap gap-4">
-        <button
-          onClick={getSystemInfo}
-          disabled={loading.systemInfo}
-          className={classNames(
-            'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
-            'bg-white dark:bg-[#0A0A0A]',
-            'border border-[#E5E5E5] dark:border-[#1A1A1A]',
-            'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
-            'hover:border-purple-200 dark:hover:border-purple-900/30',
-            'text-bolt-elements-textPrimary',
-            { 'opacity-50 cursor-not-allowed': loading.systemInfo },
-          )}
-        >
-          {loading.systemInfo ? (
-            <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
-          ) : (
-            <div className="i-ph:gear w-4 h-4" />
-          )}
-          Update System Info
-        </button>
-
-        <button
-          onClick={handleLogPerformance}
-          disabled={loading.performance}
-          className={classNames(
-            'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
-            'bg-white dark:bg-[#0A0A0A]',
-            'border border-[#E5E5E5] dark:border-[#1A1A1A]',
-            'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
-            'hover:border-purple-200 dark:hover:border-purple-900/30',
-            'text-bolt-elements-textPrimary',
-            { 'opacity-50 cursor-not-allowed': loading.performance },
-          )}
-        >
-          {loading.performance ? (
-            <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
-          ) : (
-            <div className="i-ph:chart-bar w-4 h-4" />
-          )}
-          Log Performance
-        </button>
-
-        <button
-          onClick={checkErrors}
-          disabled={loading.errors}
-          className={classNames(
-            'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
-            'bg-white dark:bg-[#0A0A0A]',
-            'border border-[#E5E5E5] dark:border-[#1A1A1A]',
-            'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
-            'hover:border-purple-200 dark:hover:border-purple-900/30',
-            'text-bolt-elements-textPrimary',
-            { 'opacity-50 cursor-not-allowed': loading.errors },
-          )}
-        >
-          {loading.errors ? (
-            <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
-          ) : (
-            <div className="i-ph:warning w-4 h-4" />
-          )}
-          Check Errors
-        </button>
-
-        <button
-          onClick={getWebAppInfo}
-          disabled={loading.webAppInfo}
-          className={classNames(
-            'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
-            'bg-white dark:bg-[#0A0A0A]',
-            'border border-[#E5E5E5] dark:border-[#1A1A1A]',
-            'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
-            'hover:border-purple-200 dark:hover:border-purple-900/30',
-            'text-bolt-elements-textPrimary',
-            { 'opacity-50 cursor-not-allowed': loading.webAppInfo },
-          )}
-        >
-          {loading.webAppInfo ? (
-            <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
-          ) : (
-            <div className="i-ph:info w-4 h-4" />
-          )}
-          Fetch WebApp Info
-        </button>
-
-        <ExportButton />
-      </div>
-
-      {/* System Information */}
-      <Collapsible
-        open={openSections.system}
-        onOpenChange={(open: boolean) => setOpenSections((prev) => ({ ...prev, system: open }))}
-        className="w-full"
-      >
-        <CollapsibleTrigger className="w-full">
-          <div className="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
-            <div className="flex items-center gap-3">
-              <div className="i-ph:cpu text-purple-500 w-5 h-5" />
-              <h3 className="text-base font-medium text-bolt-elements-textPrimary">System Information</h3>
-            </div>
-            <div
-              className={classNames(
-                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
-                openSections.system ? 'rotate-180' : '',
-              )}
-            />
-          </div>
-        </CollapsibleTrigger>
-
-        <CollapsibleContent>
-          <div className="p-6 mt-2 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
-            {systemInfo ? (
-              <div className="grid grid-cols-2 gap-6">
-                <div className="space-y-2">
-                  <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:desktop text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">OS: </span>
-                    <span className="text-bolt-elements-textPrimary">{systemInfo.os}</span>
-                  </div>
-                  <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:device-mobile text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">Platform: </span>
-                    <span className="text-bolt-elements-textPrimary">{systemInfo.platform}</span>
-                  </div>
-                  <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:circuitry text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">Architecture: </span>
-                    <span className="text-bolt-elements-textPrimary">{systemInfo.arch}</span>
-                  </div>
-                  <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:cpu text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">CPU Cores: </span>
-                    <span className="text-bolt-elements-textPrimary">{systemInfo.cpus}</span>
-                  </div>
-                  <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:graph text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">Node Version: </span>
-                    <span className="text-bolt-elements-textPrimary">{systemInfo.node}</span>
-                  </div>
-                  <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:wifi-high text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">Network Type: </span>
-                    <span className="text-bolt-elements-textPrimary">
-                      {systemInfo.network.type} ({systemInfo.network.effectiveType})
-                    </span>
-                  </div>
-                  <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:gauge text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">Network Speed: </span>
-                    <span className="text-bolt-elements-textPrimary">
-                      {systemInfo.network.downlink}Mbps (RTT: {systemInfo.network.rtt}ms)
-                    </span>
-                  </div>
-                  {systemInfo.battery && (
-                    <div className="text-sm flex items-center gap-2">
-                      <div className="i-ph:battery-charging text-bolt-elements-textSecondary w-4 h-4" />
-                      <span className="text-bolt-elements-textSecondary">Battery: </span>
-                      <span className="text-bolt-elements-textPrimary">
-                        {systemInfo.battery.level.toFixed(1)}% {systemInfo.battery.charging ? '(Charging)' : ''}
-                      </span>
-                    </div>
-                  )}
-                  <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:hard-drive text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">Storage: </span>
-                    <span className="text-bolt-elements-textPrimary">
-                      {(systemInfo.storage.usage / (1024 * 1024 * 1024)).toFixed(2)}GB /{' '}
-                      {(systemInfo.storage.quota / (1024 * 1024 * 1024)).toFixed(2)}GB
-                    </span>
-                  </div>
-                </div>
-                <div className="space-y-2">
-                  <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:database text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">Memory Usage: </span>
-                    <span className="text-bolt-elements-textPrimary">
-                      {systemInfo.memory.used} / {systemInfo.memory.total} ({systemInfo.memory.percentage}%)
-                    </span>
-                  </div>
-                  <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:browser text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">Browser: </span>
-                    <span className="text-bolt-elements-textPrimary">
-                      {systemInfo.browser.name} {systemInfo.browser.version}
-                    </span>
-                  </div>
-                  <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:monitor text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">Screen: </span>
-                    <span className="text-bolt-elements-textPrimary">
-                      {systemInfo.screen.width}x{systemInfo.screen.height} ({systemInfo.screen.pixelRatio}x)
-                    </span>
-                  </div>
-                  <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:clock text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">Timezone: </span>
-                    <span className="text-bolt-elements-textPrimary">{systemInfo.time.timezone}</span>
-                  </div>
-                  <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:translate text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">Language: </span>
-                    <span className="text-bolt-elements-textPrimary">{systemInfo.browser.language}</span>
-                  </div>
-                  <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:chart-pie text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">JS Heap: </span>
-                    <span className="text-bolt-elements-textPrimary">
-                      {(systemInfo.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(1)}MB /{' '}
-                      {(systemInfo.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(1)}MB (
-                      {systemInfo.performance.memory.usagePercentage.toFixed(1)}%)
-                    </span>
-                  </div>
-                  <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:timer text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">Page Load: </span>
-                    <span className="text-bolt-elements-textPrimary">
-                      {(systemInfo.performance.timing.loadTime / 1000).toFixed(2)}s
-                    </span>
-                  </div>
-                  <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:code text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">DOM Ready: </span>
-                    <span className="text-bolt-elements-textPrimary">
-                      {(systemInfo.performance.timing.domReadyTime / 1000).toFixed(2)}s
-                    </span>
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <div className="text-sm text-bolt-elements-textSecondary">Loading system information...</div>
-            )}
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
-
-      {/* Performance Metrics */}
-      <Collapsible
-        open={openSections.performance}
-        onOpenChange={(open: boolean) => setOpenSections((prev) => ({ ...prev, performance: open }))}
-        className="w-full"
-      >
-        <CollapsibleTrigger className="w-full">
-          <div className="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
-            <div className="flex items-center gap-3">
-              <div className="i-ph:chart-line text-purple-500 w-5 h-5" />
-              <h3 className="text-base font-medium text-bolt-elements-textPrimary">Performance Metrics</h3>
-            </div>
-            <div
-              className={classNames(
-                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
-                openSections.performance ? 'rotate-180' : '',
-              )}
-            />
-          </div>
-        </CollapsibleTrigger>
-
-        <CollapsibleContent>
-          <div className="p-6 mt-2 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
-            {systemInfo && (
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <div className="text-sm">
-                    <span className="text-bolt-elements-textSecondary">Page Load Time: </span>
-                    <span className="text-bolt-elements-textPrimary">
-                      {(systemInfo.performance.timing.loadTime / 1000).toFixed(2)}s
-                    </span>
-                  </div>
-                  <div className="text-sm">
-                    <span className="text-bolt-elements-textSecondary">DOM Ready Time: </span>
-                    <span className="text-bolt-elements-textPrimary">
-                      {(systemInfo.performance.timing.domReadyTime / 1000).toFixed(2)}s
-                    </span>
-                  </div>
-                  <div className="text-sm">
-                    <span className="text-bolt-elements-textSecondary">Request Time: </span>
-                    <span className="text-bolt-elements-textPrimary">
-                      {(systemInfo.performance.timing.requestTime / 1000).toFixed(2)}s
-                    </span>
-                  </div>
-                  <div className="text-sm">
-                    <span className="text-bolt-elements-textSecondary">Redirect Time: </span>
-                    <span className="text-bolt-elements-textPrimary">
-                      {(systemInfo.performance.timing.redirectTime / 1000).toFixed(2)}s
-                    </span>
-                  </div>
-                </div>
-                <div className="space-y-2">
-                  <div className="text-sm">
-                    <span className="text-bolt-elements-textSecondary">JS Heap Usage: </span>
-                    <span className="text-bolt-elements-textPrimary">
-                      {(systemInfo.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(1)}MB /{' '}
-                      {(systemInfo.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(1)}MB
-                    </span>
-                  </div>
-                  <div className="text-sm">
-                    <span className="text-bolt-elements-textSecondary">Heap Utilization: </span>
-                    <span className="text-bolt-elements-textPrimary">
-                      {systemInfo.performance.memory.usagePercentage.toFixed(1)}%
-                    </span>
-                  </div>
-                  <div className="text-sm">
-                    <span className="text-bolt-elements-textSecondary">Navigation Type: </span>
-                    <span className="text-bolt-elements-textPrimary">
-                      {systemInfo.performance.navigation.type === 0
-                        ? 'Navigate'
-                        : systemInfo.performance.navigation.type === 1
-                          ? 'Reload'
-                          : systemInfo.performance.navigation.type === 2
-                            ? 'Back/Forward'
-                            : 'Other'}
-                    </span>
-                  </div>
-                  <div className="text-sm">
-                    <span className="text-bolt-elements-textSecondary">Redirects: </span>
-                    <span className="text-bolt-elements-textPrimary">
-                      {systemInfo.performance.navigation.redirectCount}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
-
-      {/* WebApp Information */}
-      <Collapsible
-        open={openSections.webapp}
-        onOpenChange={(open) => setOpenSections((prev) => ({ ...prev, webapp: open }))}
-        className="w-full"
-      >
-        <CollapsibleTrigger className="w-full">
-          <div className="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
-            <div className="flex items-center gap-3">
-              <div className="i-ph:info text-blue-500 w-5 h-5" />
-              <h3 className="text-base font-medium text-bolt-elements-textPrimary">WebApp Information</h3>
-              {loading.webAppInfo && <span className="loading loading-spinner loading-sm" />}
-            </div>
-            <div
-              className={classNames(
-                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
-                openSections.webapp ? 'rotate-180' : '',
-              )}
-            />
-          </div>
-        </CollapsibleTrigger>
-
-        <CollapsibleContent>
-          <div className="p-6 mt-2 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
-            {loading.webAppInfo ? (
-              <div className="flex items-center justify-center p-8">
-                <span className="loading loading-spinner loading-lg" />
-              </div>
-            ) : !webAppInfo ? (
-              <div className="flex flex-col items-center justify-center p-8 text-bolt-elements-textSecondary">
-                <div className="i-ph:warning-circle w-8 h-8 mb-2" />
-                <p>Failed to load WebApp information</p>
-                <button
-                  onClick={() => getWebAppInfo()}
-                  className="mt-4 px-4 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
-                >
-                  Retry
-                </button>
-              </div>
-            ) : (
-              <div className="grid grid-cols-2 gap-6">
-                <div>
-                  <h3 className="mb-4 text-base font-medium text-bolt-elements-textPrimary">Basic Information</h3>
-                  <div className="space-y-3">
-                    <div className="text-sm flex items-center gap-2">
-                      <div className="i-ph:app-window text-bolt-elements-textSecondary w-4 h-4" />
-                      <span className="text-bolt-elements-textSecondary">Name:</span>
-                      <span className="text-bolt-elements-textPrimary">{webAppInfo.name}</span>
-                    </div>
-                    <div className="text-sm flex items-center gap-2">
-                      <div className="i-ph:tag text-bolt-elements-textSecondary w-4 h-4" />
-                      <span className="text-bolt-elements-textSecondary">Version:</span>
-                      <span className="text-bolt-elements-textPrimary">{webAppInfo.version}</span>
-                    </div>
-                    <div className="text-sm flex items-center gap-2">
-                      <div className="i-ph:certificate text-bolt-elements-textSecondary w-4 h-4" />
-                      <span className="text-bolt-elements-textSecondary">License:</span>
-                      <span className="text-bolt-elements-textPrimary">{webAppInfo.license}</span>
-                    </div>
-                    <div className="text-sm flex items-center gap-2">
-                      <div className="i-ph:cloud text-bolt-elements-textSecondary w-4 h-4" />
-                      <span className="text-bolt-elements-textSecondary">Environment:</span>
-                      <span className="text-bolt-elements-textPrimary">{webAppInfo.environment}</span>
-                    </div>
-                    <div className="text-sm flex items-center gap-2">
-                      <div className="i-ph:graph text-bolt-elements-textSecondary w-4 h-4" />
-                      <span className="text-bolt-elements-textSecondary">Node Version:</span>
-                      <span className="text-bolt-elements-textPrimary">{webAppInfo.runtimeInfo.nodeVersion}</span>
-                    </div>
-                  </div>
-                </div>
-
-                <div>
-                  <h3 className="mb-4 text-base font-medium text-bolt-elements-textPrimary">Git Information</h3>
-                  <div className="space-y-3">
-                    <div className="text-sm flex items-center gap-2">
-                      <div className="i-ph:git-branch text-bolt-elements-textSecondary w-4 h-4" />
-                      <span className="text-bolt-elements-textSecondary">Branch:</span>
-                      <span className="text-bolt-elements-textPrimary">{webAppInfo.gitInfo.local.branch}</span>
-                    </div>
-                    <div className="text-sm flex items-center gap-2">
-                      <div className="i-ph:git-commit text-bolt-elements-textSecondary w-4 h-4" />
-                      <span className="text-bolt-elements-textSecondary">Commit:</span>
-                      <span className="text-bolt-elements-textPrimary">{webAppInfo.gitInfo.local.commitHash}</span>
-                    </div>
-                    <div className="text-sm flex items-center gap-2">
-                      <div className="i-ph:user text-bolt-elements-textSecondary w-4 h-4" />
-                      <span className="text-bolt-elements-textSecondary">Author:</span>
-                      <span className="text-bolt-elements-textPrimary">{webAppInfo.gitInfo.local.author}</span>
-                    </div>
-                    <div className="text-sm flex items-center gap-2">
-                      <div className="i-ph:clock text-bolt-elements-textSecondary w-4 h-4" />
-                      <span className="text-bolt-elements-textSecondary">Commit Time:</span>
-                      <span className="text-bolt-elements-textPrimary">{webAppInfo.gitInfo.local.commitTime}</span>
-                    </div>
-
-                    {webAppInfo.gitInfo.github && (
-                      <>
-                        <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-800">
-                          <div className="text-sm flex items-center gap-2">
-                            <div className="i-ph:git-fork text-bolt-elements-textSecondary w-4 h-4" />
-                            <span className="text-bolt-elements-textSecondary">Repository:</span>
-                            <span className="text-bolt-elements-textPrimary">
-                              {webAppInfo.gitInfo.github.currentRepo.fullName}
-                              {webAppInfo.gitInfo.isForked && ' (fork)'}
-                            </span>
-                          </div>
-
-                          <div className="mt-2 flex items-center gap-4 text-sm">
-                            <div className="flex items-center gap-1">
-                              <div className="i-ph:star text-yellow-500 w-4 h-4" />
-                              <span className="text-bolt-elements-textSecondary">
-                                {webAppInfo.gitInfo.github.currentRepo.stars}
-                              </span>
-                            </div>
-                            <div className="flex items-center gap-1">
-                              <div className="i-ph:git-fork text-blue-500 w-4 h-4" />
-                              <span className="text-bolt-elements-textSecondary">
-                                {webAppInfo.gitInfo.github.currentRepo.forks}
-                              </span>
-                            </div>
-                            <div className="flex items-center gap-1">
-                              <div className="i-ph:warning-circle text-red-500 w-4 h-4" />
-                              <span className="text-bolt-elements-textSecondary">
-                                {webAppInfo.gitInfo.github.currentRepo.openIssues}
-                              </span>
-                            </div>
-                          </div>
-                        </div>
-
-                        {webAppInfo.gitInfo.github.upstream && (
-                          <div className="mt-2">
-                            <div className="text-sm flex items-center gap-2">
-                              <div className="i-ph:git-fork text-bolt-elements-textSecondary w-4 h-4" />
-                              <span className="text-bolt-elements-textSecondary">Upstream:</span>
-                              <span className="text-bolt-elements-textPrimary">
-                                {webAppInfo.gitInfo.github.upstream.fullName}
-                              </span>
-                            </div>
-
-                            <div className="mt-2 flex items-center gap-4 text-sm">
-                              <div className="flex items-center gap-1">
-                                <div className="i-ph:star text-yellow-500 w-4 h-4" />
-                                <span className="text-bolt-elements-textSecondary">
-                                  {webAppInfo.gitInfo.github.upstream.stars}
-                                </span>
-                              </div>
-                              <div className="flex items-center gap-1">
-                                <div className="i-ph:git-fork text-blue-500 w-4 h-4" />
-                                <span className="text-bolt-elements-textSecondary">
-                                  {webAppInfo.gitInfo.github.upstream.forks}
-                                </span>
-                              </div>
-                            </div>
-                          </div>
-                        )}
-                      </>
-                    )}
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {webAppInfo && (
-              <div className="mt-6">
-                <h3 className="mb-4 text-base font-medium text-bolt-elements-textPrimary">Dependencies</h3>
-                <div className="bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded-lg divide-y divide-[#E5E5E5] dark:divide-[#1A1A1A]">
-                  <DependencySection title="Production" deps={webAppInfo.dependencies.production} />
-                  <DependencySection title="Development" deps={webAppInfo.dependencies.development} />
-                  <DependencySection title="Peer" deps={webAppInfo.dependencies.peer} />
-                  <DependencySection title="Optional" deps={webAppInfo.dependencies.optional} />
-                </div>
-              </div>
-            )}
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
-
-      {/* Error Check */}
-      <Collapsible
-        open={openSections.errors}
-        onOpenChange={(open) => setOpenSections((prev) => ({ ...prev, errors: open }))}
-        className="w-full"
-      >
-        <CollapsibleTrigger className="w-full">
-          <div className="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
-            <div className="flex items-center gap-3">
-              <div className="i-ph:warning text-red-500 w-5 h-5" />
-              <h3 className="text-base font-medium text-bolt-elements-textPrimary">Error Check</h3>
-              {errorLogs.length > 0 && (
-                <Badge variant="destructive" className="ml-2">
-                  {errorLogs.length} Errors
-                </Badge>
-              )}
-            </div>
-            <div
-              className={classNames(
-                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
-                openSections.errors ? 'rotate-180' : '',
-              )}
-            />
-          </div>
-        </CollapsibleTrigger>
-
-        <CollapsibleContent>
-          <div className="p-6 mt-2 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
-            <ScrollArea className="h-[300px]">
-              <div className="space-y-4">
-                <div className="text-sm text-bolt-elements-textSecondary">
-                  Checks for:
-                  <ul className="list-disc list-inside mt-2 space-y-1">
-                    <li>Unhandled JavaScript errors</li>
-                    <li>Unhandled Promise rejections</li>
-                    <li>Runtime exceptions</li>
-                    <li>Network errors</li>
-                  </ul>
-                </div>
-                <div className="text-sm">
-                  <span className="text-bolt-elements-textSecondary">Status: </span>
-                  <span className="text-bolt-elements-textPrimary">
-                    {loading.errors
-                      ? 'Checking...'
-                      : errorLogs.length > 0
-                        ? `${errorLogs.length} errors found`
-                        : 'No errors found'}
-                  </span>
-                </div>
-                {errorLogs.length > 0 && (
-                  <div className="mt-4">
-                    <div className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Recent Errors:</div>
-                    <div className="space-y-2">
-                      {errorLogs.map((error) => (
-                        <div key={error.id} className="text-sm text-red-500 dark:text-red-400 p-2 rounded bg-red-500/5">
-                          <div className="font-medium">{error.message}</div>
-                          {error.source && (
-                            <div className="text-xs mt-1 text-red-400">
-                              Source: {error.source}
-                              {error.details?.lineNumber && `:${error.details.lineNumber}`}
-                            </div>
-                          )}
-                          {error.stack && (
-                            <div className="text-xs mt-1 text-red-400 font-mono whitespace-pre-wrap">{error.stack}</div>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </ScrollArea>
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
-    </div>
-  );
-}
diff --git a/app/components/@settings/tabs/task-manager/TaskManagerTab.tsx b/app/components/@settings/tabs/task-manager/TaskManagerTab.tsx
deleted file mode 100644
index 9d5de52..0000000
--- a/app/components/@settings/tabs/task-manager/TaskManagerTab.tsx
+++ /dev/null
@@ -1,1602 +0,0 @@
-import * as React from 'react';
-import { useEffect, useState, useCallback } from 'react';
-import { classNames } from '~/utils/classNames';
-import { Line } from 'react-chartjs-2';
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  type Chart,
-} from 'chart.js';
-import { toast } from 'react-toastify'; // Import toast
-import { useUpdateCheck } from '~/lib/hooks/useUpdateCheck';
-import { tabConfigurationStore, type TabConfig } from '~/lib/stores/tabConfigurationStore';
-import { useStore } from 'zustand';
-
-// Register ChartJS components
-ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
-
-interface BatteryManager extends EventTarget {
-  charging: boolean;
-  chargingTime: number;
-  dischargingTime: number;
-  level: number;
-}
-
-interface SystemMemoryInfo {
-  total: number;
-  free: number;
-  used: number;
-  percentage: number;
-  swap?: {
-    total: number;
-    free: number;
-    used: number;
-    percentage: number;
-  };
-  timestamp: string;
-  error?: string;
-}
-
-interface ProcessInfo {
-  pid: number;
-  name: string;
-  cpu: number;
-  memory: number;
-  command?: string;
-  timestamp: string;
-  error?: string;
-}
-
-interface DiskInfo {
-  filesystem: string;
-  size: number;
-  used: number;
-  available: number;
-  percentage: number;
-  mountpoint: string;
-  timestamp: string;
-  error?: string;
-}
-
-interface SystemMetrics {
-  memory: {
-    used: number;
-    total: number;
-    percentage: number;
-    process?: {
-      heapUsed: number;
-      heapTotal: number;
-      external: number;
-      rss: number;
-    };
-  };
-  systemMemory?: SystemMemoryInfo;
-  processes?: ProcessInfo[];
-  disks?: DiskInfo[];
-  battery?: {
-    level: number;
-    charging: boolean;
-    timeRemaining?: number;
-  };
-  network: {
-    downlink: number;
-    uplink?: number;
-    latency: {
-      current: number;
-      average: number;
-      min: number;
-      max: number;
-      history: number[];
-      lastUpdate: number;
-    };
-    type: string;
-    effectiveType?: string;
-  };
-  performance: {
-    pageLoad: number;
-    domReady: number;
-    resources: {
-      total: number;
-      size: number;
-      loadTime: number;
-    };
-    timing: {
-      ttfb: number;
-      fcp: number;
-      lcp: number;
-    };
-  };
-}
-
-type SortField = 'name' | 'pid' | 'cpu' | 'memory';
-type SortDirection = 'asc' | 'desc';
-
-interface MetricsHistory {
-  timestamps: string[];
-  memory: number[];
-  battery: number[];
-  network: number[];
-  cpu: number[];
-  disk: number[];
-}
-
-interface PerformanceAlert {
-  type: 'warning' | 'error' | 'info';
-  message: string;
-  timestamp: number;
-  metric: string;
-  threshold: number;
-  value: number;
-}
-
-declare global {
-  interface Navigator {
-    getBattery(): Promise<BatteryManager>;
-  }
-  interface Performance {
-    memory?: {
-      jsHeapSizeLimit: number;
-      totalJSHeapSize: number;
-      usedJSHeapSize: number;
-    };
-  }
-}
-
-// Constants for performance thresholds
-const PERFORMANCE_THRESHOLDS = {
-  memory: {
-    warning: 75,
-    critical: 90,
-  },
-  network: {
-    latency: {
-      warning: 200,
-      critical: 500,
-    },
-  },
-  battery: {
-    warning: 20,
-    critical: 10,
-  },
-};
-
-// Default metrics state
-const DEFAULT_METRICS_STATE: SystemMetrics = {
-  memory: {
-    used: 0,
-    total: 0,
-    percentage: 0,
-  },
-  network: {
-    downlink: 0,
-    latency: {
-      current: 0,
-      average: 0,
-      min: 0,
-      max: 0,
-      history: [],
-      lastUpdate: 0,
-    },
-    type: 'unknown',
-  },
-  performance: {
-    pageLoad: 0,
-    domReady: 0,
-    resources: {
-      total: 0,
-      size: 0,
-      loadTime: 0,
-    },
-    timing: {
-      ttfb: 0,
-      fcp: 0,
-      lcp: 0,
-    },
-  },
-};
-
-// Default metrics history
-const DEFAULT_METRICS_HISTORY: MetricsHistory = {
-  timestamps: Array(8).fill(new Date().toLocaleTimeString()),
-  memory: Array(8).fill(0),
-  battery: Array(8).fill(0),
-  network: Array(8).fill(0),
-  cpu: Array(8).fill(0),
-  disk: Array(8).fill(0),
-};
-
-// Maximum number of history points to keep
-const MAX_HISTORY_POINTS = 8;
-
-// Used for environment detection in updateMetrics function
-const isLocalDevelopment =
-  typeof window !== 'undefined' &&
-  window.location &&
-  (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
-
-// For development environments, we'll always provide mock data if real data isn't available
-const isDevelopment =
-  typeof window !== 'undefined' &&
-  (window.location.hostname === 'localhost' ||
-    window.location.hostname === '127.0.0.1' ||
-    window.location.hostname.includes('192.168.') ||
-    window.location.hostname.includes('.local'));
-
-// Function to detect Cloudflare and similar serverless environments where TaskManager is not useful
-const isServerlessHosting = (): boolean => {
-  if (typeof window === 'undefined') {
-    return false;
-  }
-
-  // For testing: Allow forcing serverless mode via URL param for easy testing
-  if (typeof window !== 'undefined' && window.location.search.includes('simulate-serverless=true')) {
-    console.log('Simulating serverless environment for testing');
-    return true;
-  }
-
-  // Check for common serverless hosting domains
-  const hostname = window.location.hostname;
-
-  return (
-    hostname.includes('.cloudflare.') ||
-    hostname.includes('.netlify.app') ||
-    hostname.includes('.vercel.app') ||
-    hostname.endsWith('.workers.dev')
-  );
-};
-
-const TaskManagerTab: React.FC = () => {
-  const [metrics, setMetrics] = useState<SystemMetrics>(() => DEFAULT_METRICS_STATE);
-  const [metricsHistory, setMetricsHistory] = useState<MetricsHistory>(() => DEFAULT_METRICS_HISTORY);
-  const [alerts, setAlerts] = useState<PerformanceAlert[]>([]);
-  const [lastAlertState, setLastAlertState] = useState<string>('normal');
-  const [sortField, setSortField] = useState<SortField>('memory');
-  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
-  const [isNotSupported, setIsNotSupported] = useState<boolean>(false);
-
-  // Chart refs for cleanup
-  const memoryChartRef = React.useRef<Chart<'line', number[], string> | null>(null);
-  const batteryChartRef = React.useRef<Chart<'line', number[], string> | null>(null);
-  const networkChartRef = React.useRef<Chart<'line', number[], string> | null>(null);
-  const cpuChartRef = React.useRef<Chart<'line', number[], string> | null>(null);
-  const diskChartRef = React.useRef<Chart<'line', number[], string> | null>(null);
-
-  // Cleanup chart instances on unmount
-  React.useEffect(() => {
-    const cleanupCharts = () => {
-      if (memoryChartRef.current) {
-        memoryChartRef.current.destroy();
-      }
-
-      if (batteryChartRef.current) {
-        batteryChartRef.current.destroy();
-      }
-
-      if (networkChartRef.current) {
-        networkChartRef.current.destroy();
-      }
-
-      if (cpuChartRef.current) {
-        cpuChartRef.current.destroy();
-      }
-
-      if (diskChartRef.current) {
-        diskChartRef.current.destroy();
-      }
-    };
-
-    return cleanupCharts;
-  }, []);
-
-  // Get update status and tab configuration
-  const { hasUpdate } = useUpdateCheck();
-  const tabConfig = useStore(tabConfigurationStore);
-
-  const resetTabConfiguration = useCallback(() => {
-    tabConfig.reset();
-    return tabConfig.get();
-  }, [tabConfig]);
-
-  // Effect to handle tab visibility
-  useEffect(() => {
-    const handleTabVisibility = () => {
-      const currentConfig = tabConfig.get();
-      const controlledTabs = ['debug', 'update'];
-
-      // Update visibility based on conditions
-      const updatedTabs = currentConfig.userTabs.map((tab: TabConfig) => {
-        if (controlledTabs.includes(tab.id)) {
-          return {
-            ...tab,
-            visible: tab.id === 'debug' ? metrics.memory.percentage > 80 : hasUpdate,
-          };
-        }
-
-        return tab;
-      });
-
-      tabConfig.set({
-        ...currentConfig,
-        userTabs: updatedTabs,
-      });
-    };
-
-    const checkInterval = setInterval(handleTabVisibility, 5000);
-
-    return () => {
-      clearInterval(checkInterval);
-    };
-  }, [metrics.memory.percentage, hasUpdate, tabConfig]);
-
-  // Effect to handle reset and initialization
-  useEffect(() => {
-    const resetToDefaults = () => {
-      console.log('TaskManagerTab: Resetting to defaults');
-
-      // Reset metrics and local state
-      setMetrics(DEFAULT_METRICS_STATE);
-      setMetricsHistory(DEFAULT_METRICS_HISTORY);
-      setAlerts([]);
-
-      // Reset tab configuration to ensure proper visibility
-      const defaultConfig = resetTabConfiguration();
-      console.log('TaskManagerTab: Reset tab configuration:', defaultConfig);
-    };
-
-    // Listen for both storage changes and custom reset event
-    const handleReset = (event: Event | StorageEvent) => {
-      if (event instanceof StorageEvent) {
-        if (event.key === 'tabConfiguration' && event.newValue === null) {
-          resetToDefaults();
-        }
-      } else if (event instanceof CustomEvent && event.type === 'tabConfigReset') {
-        resetToDefaults();
-      }
-    };
-
-    // Initial setup
-    const initializeTab = async () => {
-      try {
-        await updateMetrics();
-      } catch (error) {
-        console.error('Failed to initialize TaskManagerTab:', error);
-        resetToDefaults();
-      }
-    };
-
-    window.addEventListener('storage', handleReset);
-    window.addEventListener('tabConfigReset', handleReset);
-    initializeTab();
-
-    return () => {
-      window.removeEventListener('storage', handleReset);
-      window.removeEventListener('tabConfigReset', handleReset);
-    };
-  }, []);
-
-  // Effect to update metrics periodically
-  useEffect(() => {
-    const updateInterval = 5000; // Update every 5 seconds instead of 2.5 seconds
-    let metricsInterval: NodeJS.Timeout;
-
-    // Only run updates when tab is visible
-    const handleVisibilityChange = () => {
-      if (document.hidden) {
-        clearInterval(metricsInterval);
-      } else {
-        updateMetrics();
-        metricsInterval = setInterval(updateMetrics, updateInterval);
-      }
-    };
-
-    // Initial setup
-    handleVisibilityChange();
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-
-    return () => {
-      clearInterval(metricsInterval);
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
-    };
-  }, []);
-
-  // Effect to disable taskmanager on serverless environments
-  useEffect(() => {
-    const checkEnvironment = async () => {
-      // If we're on Cloudflare/Netlify/etc., set not supported
-      if (isServerlessHosting()) {
-        setIsNotSupported(true);
-        return;
-      }
-
-      // For testing: Allow forcing API failures via URL param
-      if (typeof window !== 'undefined' && window.location.search.includes('simulate-api-failure=true')) {
-        console.log('Simulating API failures for testing');
-        setIsNotSupported(true);
-
-        return;
-      }
-
-      // Try to fetch system metrics once as detection
-      try {
-        const response = await fetch('/api/system/memory-info');
-        const diskResponse = await fetch('/api/system/disk-info');
-        const processResponse = await fetch('/api/system/process-info');
-
-        // If all these return errors or not found, system monitoring is not supported
-        if (!response.ok && !diskResponse.ok && !processResponse.ok) {
-          setIsNotSupported(true);
-        }
-      } catch (error) {
-        console.warn('Failed to fetch system metrics. TaskManager features may be limited:', error);
-
-        // Don't automatically disable - we'll show partial data based on what's available
-      }
-    };
-
-    checkEnvironment();
-  }, []);
-
-  // Get detailed performance metrics
-  const getPerformanceMetrics = async (): Promise<Partial<SystemMetrics['performance']>> => {
-    try {
-      // Get page load metrics
-      const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
-      const pageLoad = navigation.loadEventEnd - navigation.startTime;
-      const domReady = navigation.domContentLoadedEventEnd - navigation.startTime;
-
-      // Get resource metrics
-      const resources = performance.getEntriesByType('resource') as PerformanceResourceTiming[];
-      const resourceMetrics = {
-        total: resources.length,
-        size: resources.reduce((total, r) => total + (r.transferSize || 0), 0),
-        loadTime: Math.max(0, ...resources.map((r) => r.duration)),
-      };
-
-      // Get Web Vitals
-      const ttfb = navigation.responseStart - navigation.requestStart;
-      const paintEntries = performance.getEntriesByType('paint');
-      const fcp = paintEntries.find((entry) => entry.name === 'first-contentful-paint')?.startTime || 0;
-
-      // Get LCP using PerformanceObserver
-      const lcp = await new Promise<number>((resolve) => {
-        new PerformanceObserver((list) => {
-          const entries = list.getEntries();
-          const lastEntry = entries[entries.length - 1];
-          resolve(lastEntry?.startTime || 0);
-        }).observe({ entryTypes: ['largest-contentful-paint'] });
-
-        // Resolve after 3s if no LCP
-        setTimeout(() => resolve(0), 3000);
-      });
-
-      return {
-        pageLoad,
-        domReady,
-        resources: resourceMetrics,
-        timing: {
-          ttfb,
-          fcp,
-          lcp,
-        },
-      };
-    } catch (error) {
-      console.error('Failed to get performance metrics:', error);
-      return {};
-    }
-  };
-
-  // Function to measure endpoint latency
-  const measureLatency = async (): Promise<number> => {
-    try {
-      const headers = new Headers();
-      headers.append('Cache-Control', 'no-cache, no-store, must-revalidate');
-      headers.append('Pragma', 'no-cache');
-      headers.append('Expires', '0');
-
-      const attemptMeasurement = async (): Promise<number> => {
-        const start = performance.now();
-        const response = await fetch('/api/health', {
-          method: 'HEAD',
-          headers,
-        });
-        const end = performance.now();
-
-        if (!response.ok) {
-          throw new Error(`Health check failed with status: ${response.status}`);
-        }
-
-        return Math.round(end - start);
-      };
-
-      try {
-        const latency = await attemptMeasurement();
-        console.log(`Measured latency: ${latency}ms`);
-
-        return latency;
-      } catch (error) {
-        console.warn(`Latency measurement failed, retrying: ${error}`);
-
-        try {
-          // Retry once
-          const latency = await attemptMeasurement();
-          console.log(`Measured latency on retry: ${latency}ms`);
-
-          return latency;
-        } catch (retryError) {
-          console.error(`Latency measurement failed after retry: ${retryError}`);
-
-          // Return a realistic random latency value for development
-          const mockLatency = 30 + Math.floor(Math.random() * 120); // 30-150ms
-          console.log(`Using mock latency: ${mockLatency}ms`);
-
-          return mockLatency;
-        }
-      }
-    } catch (error) {
-      console.error(`Error in latency measurement: ${error}`);
-
-      // Return a realistic random latency value
-      const mockLatency = 30 + Math.floor(Math.random() * 120); // 30-150ms
-      console.log(`Using mock latency due to error: ${mockLatency}ms`);
-
-      return mockLatency;
-    }
-  };
-
-  // Update metrics with real data only
-  const updateMetrics = async () => {
-    try {
-      // If we already determined this environment doesn't support system metrics, don't try fetching
-      if (isNotSupported) {
-        console.log('TaskManager: System metrics not supported in this environment');
-        return;
-      }
-
-      // Get system memory info first as it's most important
-      let systemMemoryInfo: SystemMemoryInfo | undefined;
-      let memoryMetrics = {
-        used: 0,
-        total: 0,
-        percentage: 0,
-      };
-
-      try {
-        const response = await fetch('/api/system/memory-info');
-
-        if (response.ok) {
-          systemMemoryInfo = await response.json();
-          console.log('Memory info response:', systemMemoryInfo);
-
-          // Use system memory as primary memory metrics if available
-          if (systemMemoryInfo && 'used' in systemMemoryInfo) {
-            memoryMetrics = {
-              used: systemMemoryInfo.used || 0,
-              total: systemMemoryInfo.total || 1,
-              percentage: systemMemoryInfo.percentage || 0,
-            };
-          }
-        }
-      } catch (error) {
-        console.error('Failed to fetch system memory info:', error);
-      }
-
-      // Get process information
-      let processInfo: ProcessInfo[] | undefined;
-
-      try {
-        const response = await fetch('/api/system/process-info');
-
-        if (response.ok) {
-          processInfo = await response.json();
-          console.log('Process info response:', processInfo);
-        }
-      } catch (error) {
-        console.error('Failed to fetch process info:', error);
-      }
-
-      // Get disk information
-      let diskInfo: DiskInfo[] | undefined;
-
-      try {
-        const response = await fetch('/api/system/disk-info');
-
-        if (response.ok) {
-          diskInfo = await response.json();
-          console.log('Disk info response:', diskInfo);
-        }
-      } catch (error) {
-        console.error('Failed to fetch disk info:', error);
-      }
-
-      // Get battery info
-      let batteryInfo: SystemMetrics['battery'] | undefined;
-
-      try {
-        if ('getBattery' in navigator) {
-          const battery = await (navigator as any).getBattery();
-          batteryInfo = {
-            level: battery.level * 100,
-            charging: battery.charging,
-            timeRemaining: battery.charging ? battery.chargingTime : battery.dischargingTime,
-          };
-        } else {
-          // Mock battery data if API not available
-          batteryInfo = {
-            level: 75 + Math.floor(Math.random() * 20),
-            charging: Math.random() > 0.3,
-            timeRemaining: 7200 + Math.floor(Math.random() * 3600),
-          };
-          console.log('Battery API not available, using mock data');
-        }
-      } catch (error) {
-        console.log('Battery API error, using mock data:', error);
-        batteryInfo = {
-          level: 75 + Math.floor(Math.random() * 20),
-          charging: Math.random() > 0.3,
-          timeRemaining: 7200 + Math.floor(Math.random() * 3600),
-        };
-      }
-
-      // Enhanced network metrics
-      const connection =
-        (navigator as any).connection || (navigator as any).mozConnection || (navigator as any).webkitConnection;
-
-      // Measure real latency
-      const measuredLatency = await measureLatency();
-      const connectionRtt = connection?.rtt || 0;
-
-      // Use measured latency if available, fall back to connection.rtt
-      const currentLatency = measuredLatency || connectionRtt || Math.floor(Math.random() * 100);
-
-      // Update network metrics with historical data
-      const networkInfo = {
-        downlink: connection?.downlink || 1.5 + Math.random(),
-        uplink: connection?.uplink || 0.5 + Math.random(),
-        latency: {
-          current: currentLatency,
-          average:
-            metrics.network.latency.history.length > 0
-              ? [...metrics.network.latency.history, currentLatency].reduce((a, b) => a + b, 0) /
-                (metrics.network.latency.history.length + 1)
-              : currentLatency,
-          min:
-            metrics.network.latency.history.length > 0
-              ? Math.min(...metrics.network.latency.history, currentLatency)
-              : currentLatency,
-          max:
-            metrics.network.latency.history.length > 0
-              ? Math.max(...metrics.network.latency.history, currentLatency)
-              : currentLatency,
-          history: [...metrics.network.latency.history, currentLatency].slice(-30), // Keep last 30 measurements
-          lastUpdate: Date.now(),
-        },
-        type: connection?.type || 'unknown',
-        effectiveType: connection?.effectiveType || '4g',
-      };
-
-      // Get performance metrics
-      const performanceMetrics = await getPerformanceMetrics();
-
-      const updatedMetrics: SystemMetrics = {
-        memory: memoryMetrics,
-        systemMemory: systemMemoryInfo,
-        processes: processInfo || [],
-        disks: diskInfo || [],
-        battery: batteryInfo,
-        network: networkInfo,
-        performance: performanceMetrics as SystemMetrics['performance'],
-      };
-
-      setMetrics(updatedMetrics);
-
-      // Update history with real data
-      const now = new Date().toLocaleTimeString();
-      setMetricsHistory((prev) => {
-        // Ensure we have valid data or use zeros
-        const memoryPercentage = systemMemoryInfo?.percentage || 0;
-        const batteryLevel = batteryInfo?.level || 0;
-        const networkDownlink = networkInfo.downlink || 0;
-
-        // Calculate CPU usage more accurately
-        let cpuUsage = 0;
-
-        if (processInfo && processInfo.length > 0) {
-          // Get the average of the top 3 CPU-intensive processes
-          const topProcesses = [...processInfo].sort((a, b) => b.cpu - a.cpu).slice(0, 3);
-          const topCpuUsage = topProcesses.reduce((total, proc) => total + proc.cpu, 0);
-
-          // Get the sum of all processes
-          const totalCpuUsage = processInfo.reduce((total, proc) => total + proc.cpu, 0);
-
-          // Use the higher of the two values, but cap at 100%
-          cpuUsage = Math.min(Math.max(topCpuUsage, (totalCpuUsage / processInfo.length) * 3), 100);
-        } else {
-          // If no process info, generate random CPU usage between 5-30%
-          cpuUsage = 5 + Math.floor(Math.random() * 25);
-        }
-
-        // Calculate disk usage (average of all disks)
-        let diskUsage = 0;
-
-        if (diskInfo && diskInfo.length > 0) {
-          diskUsage = diskInfo.reduce((total, disk) => total + disk.percentage, 0) / diskInfo.length;
-        } else {
-          // If no disk info, generate random disk usage between 30-70%
-          diskUsage = 30 + Math.floor(Math.random() * 40);
-        }
-
-        // Create new arrays with the latest data
-        const timestamps = [...prev.timestamps, now].slice(-MAX_HISTORY_POINTS);
-        const memory = [...prev.memory, memoryPercentage].slice(-MAX_HISTORY_POINTS);
-        const battery = [...prev.battery, batteryLevel].slice(-MAX_HISTORY_POINTS);
-        const network = [...prev.network, networkDownlink].slice(-MAX_HISTORY_POINTS);
-        const cpu = [...prev.cpu, cpuUsage].slice(-MAX_HISTORY_POINTS);
-        const disk = [...prev.disk, diskUsage].slice(-MAX_HISTORY_POINTS);
-
-        console.log('Updated metrics history:', {
-          timestamps,
-          memory,
-          battery,
-          network,
-          cpu,
-          disk,
-        });
-
-        return { timestamps, memory, battery, network, cpu, disk };
-      });
-
-      // Check for memory alerts - only show toast when state changes
-      const currentState =
-        systemMemoryInfo && systemMemoryInfo.percentage > PERFORMANCE_THRESHOLDS.memory.critical
-          ? 'critical-memory'
-          : networkInfo.latency.current > PERFORMANCE_THRESHOLDS.network.latency.critical
-            ? 'critical-network'
-            : batteryInfo && !batteryInfo.charging && batteryInfo.level < PERFORMANCE_THRESHOLDS.battery.critical
-              ? 'critical-battery'
-              : 'normal';
-
-      if (currentState === 'critical-memory' && lastAlertState !== 'critical-memory') {
-        const alert: PerformanceAlert = {
-          type: 'error',
-          message: 'Critical system memory usage detected',
-          timestamp: Date.now(),
-          metric: 'memory',
-          threshold: PERFORMANCE_THRESHOLDS.memory.critical,
-          value: systemMemoryInfo?.percentage || 0,
-        };
-        setAlerts((prev) => {
-          const newAlerts = [...prev, alert];
-          return newAlerts.slice(-10);
-        });
-        toast.warning(alert.message, {
-          toastId: 'memory-critical',
-          autoClose: 5000,
-        });
-      } else if (currentState === 'critical-network' && lastAlertState !== 'critical-network') {
-        const alert: PerformanceAlert = {
-          type: 'warning',
-          message: 'High network latency detected',
-          timestamp: Date.now(),
-          metric: 'network',
-          threshold: PERFORMANCE_THRESHOLDS.network.latency.critical,
-          value: networkInfo.latency.current,
-        };
-        setAlerts((prev) => {
-          const newAlerts = [...prev, alert];
-          return newAlerts.slice(-10);
-        });
-        toast.warning(alert.message, {
-          toastId: 'network-critical',
-          autoClose: 5000,
-        });
-      } else if (currentState === 'critical-battery' && lastAlertState !== 'critical-battery') {
-        const alert: PerformanceAlert = {
-          type: 'error',
-          message: 'Critical battery level detected',
-          timestamp: Date.now(),
-          metric: 'battery',
-          threshold: PERFORMANCE_THRESHOLDS.battery.critical,
-          value: batteryInfo?.level || 0,
-        };
-        setAlerts((prev) => {
-          const newAlerts = [...prev, alert];
-          return newAlerts.slice(-10);
-        });
-        toast.error(alert.message, {
-          toastId: 'battery-critical',
-          autoClose: 5000,
-        });
-      }
-
-      setLastAlertState(currentState);
-
-      // Then update the environment detection
-      const isCloudflare =
-        !isDevelopment && // Not in development mode
-        ((systemMemoryInfo?.error && systemMemoryInfo.error.includes('not available')) ||
-          (processInfo?.[0]?.error && processInfo[0].error.includes('not available')) ||
-          (diskInfo?.[0]?.error && diskInfo[0].error.includes('not available')));
-
-      // If we detect that we're in a serverless environment, set the flag
-      if (isCloudflare || isServerlessHosting()) {
-        setIsNotSupported(true);
-      }
-
-      if (isCloudflare) {
-        console.log('Running in Cloudflare environment. System metrics not available.');
-      } else if (isLocalDevelopment) {
-        console.log('Running in local development environment. Using real or mock system metrics as available.');
-      } else if (isDevelopment) {
-        console.log('Running in development environment. Using real or mock system metrics as available.');
-      } else {
-        console.log('Running in production environment. Using real system metrics.');
-      }
-    } catch (error) {
-      console.error('Failed to update metrics:', error);
-    }
-  };
-
-  const getUsageColor = (usage: number): string => {
-    if (usage > 80) {
-      return 'text-red-500';
-    }
-
-    if (usage > 50) {
-      return 'text-yellow-500';
-    }
-
-    return 'text-gray-500';
-  };
-
-  // Chart rendering function
-  const renderUsageGraph = React.useMemo(
-    () =>
-      (data: number[], label: string, color: string, chartRef: React.RefObject<Chart<'line', number[], string>>) => {
-        // Ensure we have valid data
-        const validData = data.map((value) => (isNaN(value) ? 0 : value));
-
-        // Ensure we have at least 2 data points
-        if (validData.length < 2) {
-          // Add a second point if we only have one
-          if (validData.length === 1) {
-            validData.push(validData[0]);
-          } else {
-            // Add two points if we have none
-            validData.push(0, 0);
-          }
-        }
-
-        const chartData = {
-          labels:
-            metricsHistory.timestamps.length > 0
-              ? metricsHistory.timestamps
-              : Array(validData.length)
-                  .fill('')
-                  .map((_, _i) => new Date().toLocaleTimeString()),
-          datasets: [
-            {
-              label,
-              data: validData.slice(-MAX_HISTORY_POINTS),
-              borderColor: color,
-              backgroundColor: `${color}33`, // Add slight transparency for fill
-              fill: true,
-              tension: 0.4,
-              pointRadius: 2, // Small points for better UX
-              borderWidth: 2,
-            },
-          ],
-        };
-
-        const options = {
-          responsive: true,
-          maintainAspectRatio: false,
-          scales: {
-            y: {
-              beginAtZero: true,
-              max: label === 'Network' ? undefined : 100, // Auto-scale for network, 0-100 for others
-              grid: {
-                color: 'rgba(200, 200, 200, 0.1)',
-                drawBorder: false,
-              },
-              ticks: {
-                maxTicksLimit: 5,
-                callback: (value: any) => {
-                  if (label === 'Network') {
-                    return `${value} Mbps`;
-                  }
-
-                  return `${value}%`;
-                },
-              },
-            },
-            x: {
-              grid: {
-                display: false,
-              },
-              ticks: {
-                maxTicksLimit: 4,
-                maxRotation: 0,
-              },
-            },
-          },
-          plugins: {
-            legend: {
-              display: false,
-            },
-            tooltip: {
-              enabled: true,
-              mode: 'index' as const,
-              intersect: false,
-              backgroundColor: 'rgba(0, 0, 0, 0.8)',
-              titleColor: 'white',
-              bodyColor: 'white',
-              borderColor: color,
-              borderWidth: 1,
-              padding: 10,
-              cornerRadius: 4,
-              displayColors: false,
-              callbacks: {
-                title: (tooltipItems: any) => {
-                  return tooltipItems[0].label; // Show timestamp
-                },
-                label: (context: any) => {
-                  const value = context.raw;
-
-                  if (label === 'Memory') {
-                    return `Memory: ${value.toFixed(1)}%`;
-                  } else if (label === 'CPU') {
-                    return `CPU: ${value.toFixed(1)}%`;
-                  } else if (label === 'Battery') {
-                    return `Battery: ${value.toFixed(1)}%`;
-                  } else if (label === 'Network') {
-                    return `Network: ${value.toFixed(1)} Mbps`;
-                  } else if (label === 'Disk') {
-                    return `Disk: ${value.toFixed(1)}%`;
-                  }
-
-                  return `${label}: ${value.toFixed(1)}`;
-                },
-              },
-            },
-          },
-          animation: {
-            duration: 300, // Short animation for better UX
-          } as const,
-          elements: {
-            line: {
-              tension: 0.3,
-            },
-          },
-        };
-
-        return (
-          <div className="h-32">
-            <Line ref={chartRef} data={chartData} options={options} />
-          </div>
-        );
-      },
-    [metricsHistory.timestamps],
-  );
-
-  // Function to handle sorting
-  const handleSort = (field: SortField) => {
-    if (sortField === field) {
-      // Toggle direction if clicking the same field
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-      // Set new field and default to descending
-      setSortField(field);
-      setSortDirection('desc');
-    }
-  };
-
-  // Function to sort processes
-  const getSortedProcesses = () => {
-    if (!metrics.processes) {
-      return [];
-    }
-
-    return [...metrics.processes].sort((a, b) => {
-      let comparison = 0;
-
-      switch (sortField) {
-        case 'name':
-          comparison = a.name.localeCompare(b.name);
-          break;
-        case 'pid':
-          comparison = a.pid - b.pid;
-          break;
-        case 'cpu':
-          comparison = a.cpu - b.cpu;
-          break;
-        case 'memory':
-          comparison = a.memory - b.memory;
-          break;
-      }
-
-      return sortDirection === 'asc' ? comparison : -comparison;
-    });
-  };
-
-  // If we're in an environment where the task manager won't work, show a message
-  if (isNotSupported) {
-    return (
-      <div className="flex flex-col items-center justify-center py-12 px-6 text-center h-full">
-        <div className="i-ph:cloud-slash-fill w-16 h-16 text-bolt-elements-textTertiary mb-4" />
-        <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">System Monitoring Not Available</h3>
-        <p className="text-bolt-elements-textSecondary mb-6 max-w-md">
-          System monitoring is not available in serverless environments like Cloudflare Pages, Netlify, or Vercel. These
-          platforms don't provide access to the underlying system resources.
-        </p>
-        <div className="flex flex-col gap-2 bg-bolt-background-secondary dark:bg-bolt-backgroundDark-secondary p-4 rounded-lg text-sm text-left max-w-md">
-          <p className="text-bolt-elements-textSecondary">
-            <span className="font-medium">Why is this disabled?</span>
-            <br />
-            Serverless platforms execute your code in isolated environments without access to the server's operating
-            system metrics like CPU, memory, and disk usage.
-          </p>
-          <p className="text-bolt-elements-textSecondary mt-2">
-            System monitoring features will be available when running in:
-            <ul className="list-disc pl-6 mt-1 text-bolt-elements-textSecondary">
-              <li>Local development environment</li>
-              <li>Virtual Machines (VMs)</li>
-              <li>Dedicated servers</li>
-              <li>Docker containers (with proper permissions)</li>
-            </ul>
-          </p>
-        </div>
-
-        {/* Testing controls - only shown in development */}
-        {isDevelopment && (
-          <div className="mt-6 p-4 border border-dashed border-bolt-elements-border rounded-lg">
-            <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Testing Controls</h4>
-            <p className="text-xs text-bolt-elements-textSecondary mb-3">
-              These controls are only visible in development mode
-            </p>
-            <div className="flex gap-2">
-              <a
-                href="?"
-                className="px-3 py-1.5 bg-bolt-background-tertiary text-xs rounded-md text-bolt-elements-textPrimary"
-              >
-                Normal Mode
-              </a>
-              <a
-                href="?simulate-serverless=true"
-                className="px-3 py-1.5 bg-bolt-action-primary text-xs rounded-md text-white"
-              >
-                Simulate Serverless
-              </a>
-              <a
-                href="?simulate-api-failure=true"
-                className="px-3 py-1.5 bg-bolt-action-destructive text-xs rounded-md text-white"
-              >
-                Simulate API Failures
-              </a>
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-6">
-      {/* Summary Header */}
-      <div className="grid grid-cols-4 gap-4">
-        <div className="flex flex-col items-center justify-center p-3 rounded-lg bg-[#F8F8F8] dark:bg-[#141414]">
-          <div className="text-sm text-bolt-elements-textSecondary">CPU</div>
-          <div
-            className={classNames(
-              'text-xl font-semibold',
-              getUsageColor(metricsHistory.cpu[metricsHistory.cpu.length - 1] || 0),
-            )}
-          >
-            {(metricsHistory.cpu[metricsHistory.cpu.length - 1] || 0).toFixed(1)}%
-          </div>
-        </div>
-        <div className="flex flex-col items-center justify-center p-3 rounded-lg bg-[#F8F8F8] dark:bg-[#141414]">
-          <div className="text-sm text-bolt-elements-textSecondary">Memory</div>
-          <div className={classNames('text-xl font-semibold', getUsageColor(metrics.systemMemory?.percentage || 0))}>
-            {Math.round(metrics.systemMemory?.percentage || 0)}%
-          </div>
-        </div>
-        <div className="flex flex-col items-center justify-center p-3 rounded-lg bg-[#F8F8F8] dark:bg-[#141414]">
-          <div className="text-sm text-bolt-elements-textSecondary">Disk</div>
-          <div
-            className={classNames(
-              'text-xl font-semibold',
-              getUsageColor(
-                metrics.disks && metrics.disks.length > 0
-                  ? metrics.disks.reduce((total, disk) => total + disk.percentage, 0) / metrics.disks.length
-                  : 0,
-              ),
-            )}
-          >
-            {metrics.disks && metrics.disks.length > 0
-              ? Math.round(metrics.disks.reduce((total, disk) => total + disk.percentage, 0) / metrics.disks.length)
-              : 0}
-            %
-          </div>
-        </div>
-        <div className="flex flex-col items-center justify-center p-3 rounded-lg bg-[#F8F8F8] dark:bg-[#141414]">
-          <div className="text-sm text-bolt-elements-textSecondary">Network</div>
-          <div className="text-xl font-semibold text-gray-500">{metrics.network.downlink.toFixed(1)} Mbps</div>
-        </div>
-      </div>
-
-      {/* Memory Usage */}
-      <div className="flex flex-col gap-4">
-        <h3 className="text-base font-medium text-bolt-elements-textPrimary">Memory Usage</h3>
-        <div className="grid grid-cols-1 gap-4">
-          {/* System Physical Memory */}
-          <div className="flex flex-col gap-2 rounded-lg bg-[#F8F8F8] dark:bg-[#141414] p-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center">
-                <span className="text-sm text-bolt-elements-textSecondary">System Memory</span>
-                <div className="relative ml-1 group">
-                  <div className="i-ph:info-duotone w-4 h-4 text-bolt-elements-textSecondary cursor-help" />
-                  <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 p-2 bg-bolt-background-tertiary dark:bg-bolt-backgroundDark-tertiary rounded shadow-lg text-xs text-bolt-elements-textSecondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10">
-                    Shows your system's physical memory (RAM) usage.
-                  </div>
-                </div>
-              </div>
-              <span className={classNames('text-sm font-medium', getUsageColor(metrics.systemMemory?.percentage || 0))}>
-                {Math.round(metrics.systemMemory?.percentage || 0)}%
-              </span>
-            </div>
-            {renderUsageGraph(metricsHistory.memory, 'Memory', '#2563eb', memoryChartRef)}
-            <div className="text-xs text-bolt-elements-textSecondary mt-2">
-              Used: {formatBytes(metrics.systemMemory?.used || 0)} / {formatBytes(metrics.systemMemory?.total || 0)}
-            </div>
-            <div className="text-xs text-bolt-elements-textSecondary">
-              Free: {formatBytes(metrics.systemMemory?.free || 0)}
-            </div>
-          </div>
-
-          {/* Swap Memory */}
-          {metrics.systemMemory?.swap && (
-            <div className="flex flex-col gap-2 rounded-lg bg-[#F8F8F8] dark:bg-[#141414] p-4">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center">
-                  <span className="text-sm text-bolt-elements-textSecondary">Swap Memory</span>
-                  <div className="relative ml-1 group">
-                    <div className="i-ph:info-duotone w-4 h-4 text-bolt-elements-textSecondary cursor-help" />
-                    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 p-2 bg-bolt-background-tertiary dark:bg-bolt-backgroundDark-tertiary rounded shadow-lg text-xs text-bolt-elements-textSecondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10">
-                      Virtual memory used when physical RAM is full.
-                    </div>
-                  </div>
-                </div>
-                <span
-                  className={classNames('text-sm font-medium', getUsageColor(metrics.systemMemory.swap.percentage))}
-                >
-                  {Math.round(metrics.systemMemory.swap.percentage)}%
-                </span>
-              </div>
-              <div className="w-full bg-bolt-elements-border rounded-full h-2 mb-2">
-                <div
-                  className={classNames('h-2 rounded-full', getUsageColor(metrics.systemMemory.swap.percentage))}
-                  style={{ width: `${Math.min(100, Math.max(0, metrics.systemMemory.swap.percentage))}%` }}
-                />
-              </div>
-              <div className="text-xs text-bolt-elements-textSecondary">
-                Used: {formatBytes(metrics.systemMemory.swap.used)} / {formatBytes(metrics.systemMemory.swap.total)}
-              </div>
-              <div className="text-xs text-bolt-elements-textSecondary">
-                Free: {formatBytes(metrics.systemMemory.swap.free)}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Disk Usage */}
-      <div className="flex flex-col gap-4">
-        <h3 className="text-base font-medium text-bolt-elements-textPrimary">Disk Usage</h3>
-        {metrics.disks && metrics.disks.length > 0 ? (
-          <div className="flex flex-col gap-2 rounded-lg bg-[#F8F8F8] dark:bg-[#141414] p-4">
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-bolt-elements-textSecondary">System Disk</span>
-              <span
-                className={classNames(
-                  'text-sm font-medium',
-                  getUsageColor(metricsHistory.disk[metricsHistory.disk.length - 1] || 0),
-                )}
-              >
-                {(metricsHistory.disk[metricsHistory.disk.length - 1] || 0).toFixed(1)}%
-              </span>
-            </div>
-            {renderUsageGraph(metricsHistory.disk, 'Disk', '#8b5cf6', diskChartRef)}
-
-            {/* Show only the main system disk (usually the first one) */}
-            {metrics.disks[0] && (
-              <>
-                <div className="w-full bg-bolt-elements-border rounded-full h-2 mt-2">
-                  <div
-                    className={classNames('h-2 rounded-full', getUsageColor(metrics.disks[0].percentage))}
-                    style={{ width: `${Math.min(100, Math.max(0, metrics.disks[0].percentage))}%` }}
-                  />
-                </div>
-                <div className="flex justify-between text-xs text-bolt-elements-textSecondary mt-1">
-                  <div>Used: {formatBytes(metrics.disks[0].used)}</div>
-                  <div>Free: {formatBytes(metrics.disks[0].available)}</div>
-                  <div>Total: {formatBytes(metrics.disks[0].size)}</div>
-                </div>
-              </>
-            )}
-          </div>
-        ) : (
-          <div className="flex flex-col items-center justify-center py-6 rounded-lg bg-[#F8F8F8] dark:bg-[#141414]">
-            <div className="i-ph:hard-drive-fill w-12 h-12 text-bolt-elements-textTertiary mb-2" />
-            <p className="text-bolt-elements-textSecondary text-sm">Disk information is not available</p>
-            <p className="text-bolt-elements-textTertiary text-xs mt-1">
-              This feature may not be supported in your environment
-            </p>
-          </div>
-        )}
-      </div>
-
-      {/* Process Information */}
-      <div className="flex flex-col gap-4">
-        <div className="flex items-center justify-between">
-          <h3 className="text-base font-medium text-bolt-elements-textPrimary">Process Information</h3>
-          <button
-            onClick={updateMetrics}
-            className="flex items-center gap-1 text-xs text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary"
-          >
-            <div className="i-ph:arrows-clockwise w-4 h-4" />
-            Refresh
-          </button>
-        </div>
-        <div className="flex flex-col gap-2 rounded-lg bg-[#F8F8F8] dark:bg-[#141414] p-4">
-          {metrics.processes && metrics.processes.length > 0 ? (
-            <>
-              {/* CPU Usage Summary */}
-              {metrics.processes[0].name !== 'Unknown' && (
-                <div className="mb-3">
-                  <div className="flex items-center justify-between mb-1">
-                    <span className="text-sm text-bolt-elements-textSecondary">CPU Usage</span>
-                    <span className="text-sm font-medium text-bolt-elements-textPrimary">
-                      {(metricsHistory.cpu[metricsHistory.cpu.length - 1] || 0).toFixed(1)}% Total
-                    </span>
-                  </div>
-                  <div className="w-full h-2 bg-bolt-elements-border rounded-full overflow-hidden relative">
-                    <div className="flex h-full w-full">
-                      {metrics.processes.map((process, index) => {
-                        return (
-                          <div
-                            key={`cpu-bar-${process.pid}-${index}`}
-                            className={classNames('h-full', getUsageColor(process.cpu))}
-                            style={{
-                              width: `${Math.min(100, Math.max(0, process.cpu))}%`,
-                            }}
-                            title={`${process.name}: ${process.cpu.toFixed(1)}%`}
-                          />
-                        );
-                      })}
-                    </div>
-                  </div>
-                  <div className="flex justify-between mt-2 text-xs">
-                    <div className="text-bolt-elements-textSecondary">
-                      System:{' '}
-                      {metrics.processes.reduce((total, proc) => total + (proc.cpu < 10 ? proc.cpu : 0), 0).toFixed(1)}%
-                    </div>
-                    <div className="text-bolt-elements-textSecondary">
-                      User:{' '}
-                      {metrics.processes.reduce((total, proc) => total + (proc.cpu >= 10 ? proc.cpu : 0), 0).toFixed(1)}
-                      %
-                    </div>
-                    <div className="text-bolt-elements-textSecondary">
-                      Idle: {(100 - (metricsHistory.cpu[metricsHistory.cpu.length - 1] || 0)).toFixed(1)}%
-                    </div>
-                  </div>
-                </div>
-              )}
-
-              <div className="overflow-x-auto">
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="text-bolt-elements-textSecondary border-b border-bolt-elements-border">
-                      <th
-                        className="text-left py-2 px-2 cursor-pointer hover:text-bolt-elements-textPrimary"
-                        onClick={() => handleSort('name')}
-                      >
-                        Process {sortField === 'name' && (sortDirection === 'asc' ? '↑' : '↓')}
-                      </th>
-                      <th
-                        className="text-right py-2 px-2 cursor-pointer hover:text-bolt-elements-textPrimary"
-                        onClick={() => handleSort('pid')}
-                      >
-                        PID {sortField === 'pid' && (sortDirection === 'asc' ? '↑' : '↓')}
-                      </th>
-                      <th
-                        className="text-right py-2 px-2 cursor-pointer hover:text-bolt-elements-textPrimary"
-                        onClick={() => handleSort('cpu')}
-                      >
-                        CPU % {sortField === 'cpu' && (sortDirection === 'asc' ? '↑' : '↓')}
-                      </th>
-                      <th
-                        className="text-right py-2 px-2 cursor-pointer hover:text-bolt-elements-textPrimary"
-                        onClick={() => handleSort('memory')}
-                      >
-                        Memory {sortField === 'memory' && (sortDirection === 'asc' ? '↑' : '↓')}
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {getSortedProcesses().map((process, index) => (
-                      <tr
-                        key={`${process.pid}-${index}`}
-                        className="border-b border-bolt-elements-border last:border-0"
-                      >
-                        <td
-                          className="py-2 px-2 text-bolt-elements-textPrimary truncate max-w-[200px]"
-                          title={process.command || process.name}
-                        >
-                          {process.name}
-                        </td>
-                        <td className="py-2 px-2 text-right text-bolt-elements-textSecondary">{process.pid}</td>
-                        <td className={classNames('py-2 px-2 text-right', getUsageColor(process.cpu))}>
-                          <div
-                            className="flex items-center justify-end gap-1"
-                            title={`CPU Usage: ${process.cpu.toFixed(1)}% ${process.command ? `\nCommand: ${process.command}` : ''}`}
-                          >
-                            <div className="w-16 h-2 bg-bolt-elements-border rounded-full overflow-hidden">
-                              <div
-                                className={classNames('h-full rounded-full', getUsageColor(process.cpu))}
-                                style={{ width: `${Math.min(100, Math.max(0, process.cpu))}%` }}
-                              />
-                            </div>
-                            {process.cpu.toFixed(1)}%
-                          </div>
-                        </td>
-                        <td className={classNames('py-2 px-2 text-right', getUsageColor(process.memory))}>
-                          <div
-                            className="flex items-center justify-end gap-1"
-                            title={`Memory Usage: ${process.memory.toFixed(1)}%`}
-                          >
-                            <div className="w-16 h-2 bg-bolt-elements-border rounded-full overflow-hidden">
-                              <div
-                                className={classNames('h-full rounded-full', getUsageColor(process.memory))}
-                                style={{ width: `${Math.min(100, Math.max(0, process.memory))}%` }}
-                              />
-                            </div>
-                            {/* Calculate approximate MB based on percentage and total system memory */}
-                            {metrics.systemMemory
-                              ? `${formatBytes(metrics.systemMemory.total * (process.memory / 100))}`
-                              : `${process.memory.toFixed(1)}%`}
-                          </div>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              <div className="text-xs text-bolt-elements-textSecondary mt-2">
-                {metrics.processes[0].error ? (
-                  <span className="text-yellow-500">
-                    <div className="i-ph:warning-circle-fill w-4 h-4 inline-block mr-1" />
-                    Error retrieving process information: {metrics.processes[0].error}
-                  </span>
-                ) : metrics.processes[0].name === 'Browser' ? (
-                  <span>
-                    <div className="i-ph:info-fill w-4 h-4 inline-block mr-1 text-blue-500" />
-                    Showing browser process information. System process information is not available in this
-                    environment.
-                  </span>
-                ) : (
-                  <span>Showing top {metrics.processes.length} processes by memory usage</span>
-                )}
-              </div>
-            </>
-          ) : (
-            <div className="flex flex-col items-center justify-center py-6">
-              <div className="i-ph:cpu-fill w-12 h-12 text-bolt-elements-textTertiary mb-2" />
-              <p className="text-bolt-elements-textSecondary text-sm">Process information is not available</p>
-              <p className="text-bolt-elements-textTertiary text-xs mt-1">
-                This feature may not be supported in your environment
-              </p>
-              <button
-                onClick={updateMetrics}
-                className="mt-4 px-3 py-1 bg-bolt-action-primary text-white rounded-md text-xs"
-              >
-                Try Again
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* CPU Usage Graph */}
-      <div className="flex flex-col gap-4">
-        <h3 className="text-base font-medium text-bolt-elements-textPrimary">CPU Usage History</h3>
-        <div className="flex flex-col gap-2 rounded-lg bg-[#F8F8F8] dark:bg-[#141414] p-4">
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-bolt-elements-textSecondary">System CPU</span>
-            <span
-              className={classNames(
-                'text-sm font-medium',
-                getUsageColor(metricsHistory.cpu[metricsHistory.cpu.length - 1] || 0),
-              )}
-            >
-              {(metricsHistory.cpu[metricsHistory.cpu.length - 1] || 0).toFixed(1)}%
-            </span>
-          </div>
-          {renderUsageGraph(metricsHistory.cpu, 'CPU', '#ef4444', cpuChartRef)}
-          <div className="text-xs text-bolt-elements-textSecondary mt-2">
-            Average: {(metricsHistory.cpu.reduce((a, b) => a + b, 0) / metricsHistory.cpu.length || 0).toFixed(1)}%
-          </div>
-          <div className="text-xs text-bolt-elements-textSecondary">
-            Peak: {Math.max(...metricsHistory.cpu).toFixed(1)}%
-          </div>
-        </div>
-      </div>
-
-      {/* Network */}
-      <div className="flex flex-col gap-4">
-        <h3 className="text-base font-medium text-bolt-elements-textPrimary">Network</h3>
-        <div className="grid grid-cols-1 gap-4">
-          <div className="flex flex-col gap-2 rounded-lg bg-[#F8F8F8] dark:bg-[#141414] p-4">
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-bolt-elements-textSecondary">Connection</span>
-              <span className="text-sm font-medium text-bolt-elements-textPrimary">
-                {metrics.network.downlink.toFixed(1)} Mbps
-              </span>
-            </div>
-            {renderUsageGraph(metricsHistory.network, 'Network', '#f59e0b', networkChartRef)}
-            <div className="text-xs text-bolt-elements-textSecondary mt-2">
-              Type: {metrics.network.type}
-              {metrics.network.effectiveType && ` (${metrics.network.effectiveType})`}
-            </div>
-            <div className="text-xs text-bolt-elements-textSecondary">
-              Latency: {Math.round(metrics.network.latency.current)}ms
-              <span className="text-xs text-bolt-elements-textTertiary ml-2">
-                (avg: {Math.round(metrics.network.latency.average)}ms)
-              </span>
-            </div>
-            <div className="text-xs text-bolt-elements-textSecondary">
-              Min: {Math.round(metrics.network.latency.min)}ms / Max: {Math.round(metrics.network.latency.max)}ms
-            </div>
-            {metrics.network.uplink && (
-              <div className="text-xs text-bolt-elements-textSecondary">
-                Uplink: {metrics.network.uplink.toFixed(1)} Mbps
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Battery */}
-      {metrics.battery && (
-        <div className="flex flex-col gap-4">
-          <h3 className="text-base font-medium text-bolt-elements-textPrimary">Battery</h3>
-          <div className="grid grid-cols-1 gap-4">
-            <div className="flex flex-col gap-2 rounded-lg bg-[#F8F8F8] dark:bg-[#141414] p-4">
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-bolt-elements-textSecondary">Status</span>
-                <div className="flex items-center gap-2">
-                  {metrics.battery.charging && <div className="i-ph:lightning-fill w-4 h-4 text-bolt-action-primary" />}
-                  <span
-                    className={classNames(
-                      'text-sm font-medium',
-                      metrics.battery.level > 20 ? 'text-bolt-elements-textPrimary' : 'text-red-500',
-                    )}
-                  >
-                    {Math.round(metrics.battery.level)}%
-                  </span>
-                </div>
-              </div>
-              {renderUsageGraph(metricsHistory.battery, 'Battery', '#22c55e', batteryChartRef)}
-              {metrics.battery.timeRemaining && metrics.battery.timeRemaining !== Infinity && (
-                <div className="text-xs text-bolt-elements-textSecondary mt-2">
-                  {metrics.battery.charging ? 'Time to full: ' : 'Time remaining: '}
-                  {formatTime(metrics.battery.timeRemaining)}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Performance */}
-      <div className="flex flex-col gap-4">
-        <h3 className="text-base font-medium text-bolt-elements-textPrimary">Performance</h3>
-        <div className="grid grid-cols-1 gap-4">
-          <div className="flex flex-col gap-2 rounded-lg bg-[#F8F8F8] dark:bg-[#141414] p-4">
-            <div className="text-xs text-bolt-elements-textSecondary">
-              Page Load: {(metrics.performance.pageLoad / 1000).toFixed(2)}s
-            </div>
-            <div className="text-xs text-bolt-elements-textSecondary">
-              DOM Ready: {(metrics.performance.domReady / 1000).toFixed(2)}s
-            </div>
-            <div className="text-xs text-bolt-elements-textSecondary">
-              TTFB: {(metrics.performance.timing.ttfb / 1000).toFixed(2)}s
-            </div>
-            <div className="text-xs text-bolt-elements-textSecondary">
-              Resources: {metrics.performance.resources.total} ({formatBytes(metrics.performance.resources.size)})
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Alerts */}
-      {alerts.length > 0 && (
-        <div className="flex flex-col gap-2 rounded-lg bg-[#F8F8F8] dark:bg-[#141414] p-4">
-          <div className="flex items-center justify-between">
-            <span className="text-sm font-medium text-bolt-elements-textPrimary">Recent Alerts</span>
-            <button
-              onClick={() => setAlerts([])}
-              className="text-xs text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary"
-            >
-              Clear All
-            </button>
-          </div>
-          <div className="space-y-2">
-            {alerts.slice(-5).map((alert, index) => (
-              <div
-                key={index}
-                className={classNames('flex items-center gap-2 text-sm', {
-                  'text-red-500': alert.type === 'error',
-                  'text-yellow-500': alert.type === 'warning',
-                  'text-blue-500': alert.type === 'info',
-                })}
-              >
-                <div
-                  className={classNames('w-4 h-4', {
-                    'i-ph:warning-circle-fill': alert.type === 'warning',
-                    'i-ph:x-circle-fill': alert.type === 'error',
-                    'i-ph:info-fill': alert.type === 'info',
-                  })}
-                />
-                <span>{alert.message}</span>
-                <span className="text-xs text-bolt-elements-textSecondary ml-auto">
-                  {new Date(alert.timestamp).toLocaleTimeString()}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default React.memo(TaskManagerTab);
-
-// Helper function to format bytes
-const formatBytes = (bytes: number): string => {
-  if (bytes === 0) {
-    return '0 B';
-  }
-
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  const value = bytes / Math.pow(k, i);
-
-  // Format with 2 decimal places for MB and larger units
-  const formattedValue = i >= 2 ? value.toFixed(2) : value.toFixed(0);
-
-  return `${formattedValue} ${sizes[i]}`;
-};
-
-// Helper function to format time
-const formatTime = (seconds: number): string => {
-  if (!isFinite(seconds) || seconds === 0) {
-    return 'Unknown';
-  }
-
-  const hours = Math.floor(seconds / 3600);
-  const minutes = Math.floor((seconds % 3600) / 60);
-
-  if (hours > 0) {
-    return `${hours}h ${minutes}m`;
-  }
-
-  return `${minutes}m`;
-};
diff --git a/app/components/@settings/utils/animations.ts b/app/components/@settings/utils/animations.ts
deleted file mode 100644
index 48d27e8..0000000
--- a/app/components/@settings/utils/animations.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { Variants } from 'framer-motion';
-
-export const fadeIn: Variants = {
-  initial: { opacity: 0 },
-  animate: { opacity: 1 },
-  exit: { opacity: 0 },
-};
-
-export const slideIn: Variants = {
-  initial: { opacity: 0, y: 20 },
-  animate: { opacity: 1, y: 0 },
-  exit: { opacity: 0, y: -20 },
-};
-
-export const scaleIn: Variants = {
-  initial: { opacity: 0, scale: 0.8 },
-  animate: { opacity: 1, scale: 1 },
-  exit: { opacity: 0, scale: 0.8 },
-};
-
-export const tabAnimation: Variants = {
-  initial: { opacity: 0, scale: 0.8, y: 20 },
-  animate: { opacity: 1, scale: 1, y: 0 },
-  exit: { opacity: 0, scale: 0.8, y: -20 },
-};
-
-export const overlayAnimation: Variants = {
-  initial: { opacity: 0 },
-  animate: { opacity: 1 },
-  exit: { opacity: 0 },
-};
-
-export const modalAnimation: Variants = {
-  initial: { opacity: 0, scale: 0.95, y: 20 },
-  animate: { opacity: 1, scale: 1, y: 0 },
-  exit: { opacity: 0, scale: 0.95, y: 20 },
-};
-
-export const transition = {
-  duration: 0.2,
-};
diff --git a/app/components/@settings/utils/tab-helpers.ts b/app/components/@settings/utils/tab-helpers.ts
index 7a55eca..990627c 100644
--- a/app/components/@settings/utils/tab-helpers.ts
+++ b/app/components/@settings/utils/tab-helpers.ts
@@ -1,9 +1,8 @@
-import type { TabType, TabVisibilityConfig } from '~/components/@settings/core/types';
+import type { TabVisibilityConfig } from '~/components/@settings/core/types';
 import { DEFAULT_TAB_CONFIG } from '~/components/@settings/core/constants';
 
 export const getVisibleTabs = (
-  tabConfiguration: { userTabs: TabVisibilityConfig[]; developerTabs?: TabVisibilityConfig[] },
-  isDeveloperMode: boolean,
+  tabConfiguration: { userTabs: TabVisibilityConfig[] },
   notificationsEnabled: boolean,
 ): TabVisibilityConfig[] => {
   if (!tabConfiguration?.userTabs || !Array.isArray(tabConfiguration.userTabs)) {
@@ -11,35 +10,6 @@ export const getVisibleTabs = (
     return DEFAULT_TAB_CONFIG as TabVisibilityConfig[];
   }
 
-  // In developer mode, show ALL tabs without restrictions
-  if (isDeveloperMode) {
-    // Combine all unique tabs from both user and developer configurations
-    const allTabs = new Set([
-      ...DEFAULT_TAB_CONFIG.map((tab) => tab.id),
-      ...tabConfiguration.userTabs.map((tab) => tab.id),
-      ...(tabConfiguration.developerTabs || []).map((tab) => tab.id),
-      'task-manager' as TabType, // Always include task-manager in developer mode
-    ]);
-
-    // Create a complete tab list with all tabs visible
-    const devTabs = Array.from(allTabs).map((tabId) => {
-      // Try to find existing configuration for this tab
-      const existingTab =
-        tabConfiguration.developerTabs?.find((t) => t.id === tabId) ||
-        tabConfiguration.userTabs?.find((t) => t.id === tabId) ||
-        DEFAULT_TAB_CONFIG.find((t) => t.id === tabId);
-
-      return {
-        id: tabId as TabType,
-        visible: true,
-        window: 'developer' as const,
-        order: existingTab?.order || DEFAULT_TAB_CONFIG.findIndex((t) => t.id === tabId),
-      } as TabVisibilityConfig;
-    });
-
-    return devTabs.sort((a, b) => a.order - b.order);
-  }
-
   // In user mode, only show visible user tabs
   return tabConfiguration.userTabs
     .filter((tab) => {
@@ -53,11 +23,6 @@ export const getVisibleTabs = (
         return false;
       }
 
-      // Always show task-manager in user mode if it's configured as visible
-      if (tab.id === 'task-manager') {
-        return tab.visible;
-      }
-
       // Only show tabs that are explicitly visible and assigned to the user window
       return tab.visible && tab.window === 'user';
     })
diff --git a/app/components/ui/GlowingEffect.tsx b/app/components/ui/GlowingEffect.tsx
new file mode 100644
index 0000000..5c8a3e1
--- /dev/null
+++ b/app/components/ui/GlowingEffect.tsx
@@ -0,0 +1,192 @@
+import { memo, useCallback, useEffect, useRef } from 'react';
+import { cn } from '~/utils/cn';
+import { animate } from 'framer-motion';
+
+interface GlowingEffectProps {
+  blur?: number;
+  inactiveZone?: number;
+  proximity?: number;
+  spread?: number;
+  variant?: 'default' | 'white';
+  glow?: boolean;
+  className?: string;
+  disabled?: boolean;
+  movementDuration?: number;
+  borderWidth?: number;
+}
+
+const GlowingEffect = memo(
+  ({
+    blur = 0,
+    inactiveZone = 0.7,
+    proximity = 0,
+    spread = 20,
+    variant = 'default',
+    glow = false,
+    className,
+    movementDuration = 2,
+    borderWidth = 1,
+    disabled = true,
+  }: GlowingEffectProps) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const lastPosition = useRef({ x: 0, y: 0 });
+    const animationFrameRef = useRef<number>(0);
+
+    const handleMove = useCallback(
+      (e?: MouseEvent | { x: number; y: number }) => {
+        if (!containerRef.current) {
+          return;
+        }
+
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+
+        animationFrameRef.current = requestAnimationFrame(() => {
+          const element = containerRef.current;
+
+          if (!element) {
+            return;
+          }
+
+          const { left, top, width, height } = element.getBoundingClientRect();
+          const mouseX = e?.x ?? lastPosition.current.x;
+          const mouseY = e?.y ?? lastPosition.current.y;
+
+          if (e) {
+            lastPosition.current = { x: mouseX, y: mouseY };
+          }
+
+          const center = [left + width * 0.5, top + height * 0.5];
+          const distanceFromCenter = Math.hypot(mouseX - center[0], mouseY - center[1]);
+          const inactiveRadius = 0.5 * Math.min(width, height) * inactiveZone;
+
+          if (distanceFromCenter < inactiveRadius) {
+            element.style.setProperty('--active', '0');
+            return;
+          }
+
+          const isActive =
+            mouseX > left - proximity &&
+            mouseX < left + width + proximity &&
+            mouseY > top - proximity &&
+            mouseY < top + height + proximity;
+
+          element.style.setProperty('--active', isActive ? '1' : '0');
+
+          if (!isActive) {
+            return;
+          }
+
+          const currentAngle = parseFloat(element.style.getPropertyValue('--start')) || 0;
+          const targetAngle = (180 * Math.atan2(mouseY - center[1], mouseX - center[0])) / Math.PI + 90;
+
+          const angleDiff = ((targetAngle - currentAngle + 180) % 360) - 180;
+          const newAngle = currentAngle + angleDiff;
+
+          animate(currentAngle, newAngle, {
+            duration: movementDuration,
+            ease: [0.16, 1, 0.3, 1],
+            onUpdate: (value) => {
+              element.style.setProperty('--start', String(value));
+            },
+          });
+        });
+      },
+      [inactiveZone, proximity, movementDuration],
+    );
+
+    useEffect(() => {
+      if (disabled) {
+        return undefined;
+      }
+
+      const handleScroll = () => handleMove();
+      const handlePointerMove = (e: PointerEvent) => handleMove(e);
+
+      window.addEventListener('scroll', handleScroll, { passive: true });
+      document.body.addEventListener('pointermove', handlePointerMove, {
+        passive: true,
+      });
+
+      return () => {
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+
+        window.removeEventListener('scroll', handleScroll);
+        document.body.removeEventListener('pointermove', handlePointerMove);
+      };
+    }, [handleMove, disabled]);
+
+    return (
+      <>
+        <div
+          className={cn(
+            'pointer-events-none absolute -inset-px hidden rounded-[inherit] border opacity-0 transition-opacity',
+            glow && 'opacity-100',
+            variant === 'white' && 'border-white',
+            disabled && '!block',
+          )}
+        />
+        <div
+          ref={containerRef}
+          style={
+            {
+              '--blur': `${blur}px`,
+              '--spread': spread,
+              '--start': '0',
+              '--active': '0',
+              '--glowingeffect-border-width': `${borderWidth}px`,
+              '--repeating-conic-gradient-times': '5',
+              '--gradient':
+                variant === 'white'
+                  ? `repeating-conic-gradient(
+                      from 236.84deg at 50% 50%,
+                      var(--black),
+                      var(--black) calc(25% / var(--repeating-conic-gradient-times))
+                    )`
+                  : `radial-gradient(circle, #9333ea 10%, #9333ea00 20%),
+                    radial-gradient(circle at 40% 40%, #a855f7 5%, #a855f700 15%),
+                    radial-gradient(circle at 60% 60%, #8b5cf6 10%, #8b5cf600 20%),
+                    radial-gradient(circle at 40% 60%, #f63bdd 10%, #3b82f600 20%),
+                    repeating-conic-gradient(
+                      from 236.84deg at 50% 50%,
+                      #9333ea 0%,
+                      #a855f7 calc(25% / var(--repeating-conic-gradient-times)),
+                      #8b5cf6 calc(50% / var(--repeating-conic-gradient-times)),
+                      #f63bdd calc(75% / var(--repeating-conic-gradient-times)),
+                      #9333ea calc(100% / var(--repeating-conic-gradient-times))
+                    )`,
+            } as React.CSSProperties
+          }
+          className={cn(
+            'pointer-events-none absolute inset-0 rounded-[inherit] opacity-100 transition-opacity',
+            glow && 'opacity-100',
+            blur > 0 && 'blur-[var(--blur)] ',
+            className,
+            disabled && '!hidden',
+          )}
+        >
+          <div
+            className={cn(
+              'glow',
+              'rounded-[inherit]',
+              'after:content-[""] after:rounded-[inherit] after:absolute after:inset-[calc(-1*var(--glowingeffect-border-width))]',
+              'after:[border:var(--glowingeffect-border-width)_solid_transparent]',
+              'after:[background:var(--gradient)] after:[background-attachment:fixed]',
+              'after:opacity-[var(--active)] after:transition-opacity after:duration-300',
+              'after:[mask-clip:padding-box,border-box]',
+              'after:[mask-composite:intersect]',
+              'after:[mask-image:linear-gradient(#0000,#0000),conic-gradient(from_calc((var(--start)-var(--spread))*1deg),#00000000_0deg,#fff,#00000000_calc(var(--spread)*2deg))]',
+            )}
+          />
+        </div>
+      </>
+    );
+  },
+);
+
+GlowingEffect.displayName = 'GlowingEffect';
+
+export { GlowingEffect };
diff --git a/app/lib/hooks/index.ts b/app/lib/hooks/index.ts
index e2f6133..648de4a 100644
--- a/app/lib/hooks/index.ts
+++ b/app/lib/hooks/index.ts
@@ -8,4 +8,3 @@ export { useUpdateCheck } from './useUpdateCheck';
 export { useFeatures } from './useFeatures';
 export { useNotifications } from './useNotifications';
 export { useConnectionStatus } from './useConnectionStatus';
-export { useDebugStatus } from './useDebugStatus';
diff --git a/app/lib/hooks/useDebugStatus.ts b/app/lib/hooks/useDebugStatus.ts
deleted file mode 100644
index 64612f0..0000000
--- a/app/lib/hooks/useDebugStatus.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useState, useEffect } from 'react';
-import { getDebugStatus, acknowledgeWarning, acknowledgeError, type DebugIssue } from '~/lib/api/debug';
-
-const ACKNOWLEDGED_DEBUG_ISSUES_KEY = 'bolt_acknowledged_debug_issues';
-
-const getAcknowledgedIssues = (): string[] => {
-  try {
-    const stored = localStorage.getItem(ACKNOWLEDGED_DEBUG_ISSUES_KEY);
-    return stored ? JSON.parse(stored) : [];
-  } catch {
-    return [];
-  }
-};
-
-const setAcknowledgedIssues = (issueIds: string[]) => {
-  try {
-    localStorage.setItem(ACKNOWLEDGED_DEBUG_ISSUES_KEY, JSON.stringify(issueIds));
-  } catch (error) {
-    console.error('Failed to persist acknowledged debug issues:', error);
-  }
-};
-
-export const useDebugStatus = () => {
-  const [hasActiveWarnings, setHasActiveWarnings] = useState(false);
-  const [activeIssues, setActiveIssues] = useState<DebugIssue[]>([]);
-  const [acknowledgedIssueIds, setAcknowledgedIssueIds] = useState<string[]>(() => getAcknowledgedIssues());
-
-  const checkDebugStatus = async () => {
-    try {
-      const status = await getDebugStatus();
-      const issues: DebugIssue[] = [
-        ...status.warnings.map((w) => ({ ...w, type: 'warning' as const })),
-        ...status.errors.map((e) => ({ ...e, type: 'error' as const })),
-      ].filter((issue) => !acknowledgedIssueIds.includes(issue.id));
-
-      setActiveIssues(issues);
-      setHasActiveWarnings(issues.length > 0);
-    } catch (error) {
-      console.error('Failed to check debug status:', error);
-    }
-  };
-
-  useEffect(() => {
-    // Check immediately and then every 5 seconds
-    checkDebugStatus();
-
-    const interval = setInterval(checkDebugStatus, 5 * 1000);
-
-    return () => clearInterval(interval);
-  }, [acknowledgedIssueIds]);
-
-  const acknowledgeIssue = async (issue: DebugIssue) => {
-    try {
-      if (issue.type === 'warning') {
-        await acknowledgeWarning(issue.id);
-      } else {
-        await acknowledgeError(issue.id);
-      }
-
-      const newAcknowledgedIds = [...acknowledgedIssueIds, issue.id];
-      setAcknowledgedIssueIds(newAcknowledgedIds);
-      setAcknowledgedIssues(newAcknowledgedIds);
-      setActiveIssues((prev) => prev.filter((i) => i.id !== issue.id));
-      setHasActiveWarnings(activeIssues.length > 1);
-    } catch (error) {
-      console.error('Failed to acknowledge issue:', error);
-    }
-  };
-
-  const acknowledgeAllIssues = async () => {
-    try {
-      await Promise.all(
-        activeIssues.map((issue) =>
-          issue.type === 'warning' ? acknowledgeWarning(issue.id) : acknowledgeError(issue.id),
-        ),
-      );
-
-      const newAcknowledgedIds = [...acknowledgedIssueIds, ...activeIssues.map((i) => i.id)];
-      setAcknowledgedIssueIds(newAcknowledgedIds);
-      setAcknowledgedIssues(newAcknowledgedIds);
-      setActiveIssues([]);
-      setHasActiveWarnings(false);
-    } catch (error) {
-      console.error('Failed to acknowledge all issues:', error);
-    }
-  };
-
-  return { hasActiveWarnings, activeIssues, acknowledgeIssue, acknowledgeAllIssues };
-};
diff --git a/app/lib/hooks/useSettings.ts b/app/lib/hooks/useSettings.ts
index 69e06bd..e5aceb2 100644
--- a/app/lib/hooks/useSettings.ts
+++ b/app/lib/hooks/useSettings.ts
@@ -8,7 +8,6 @@ import {
   autoSelectStarterTemplate,
   enableContextOptimizationStore,
   tabConfigurationStore,
-  updateTabConfiguration as updateTabConfig,
   resetTabConfiguration as resetTabConfig,
   updateProviderSettings as updateProviderSettingsStore,
   updateLatestBranch,
@@ -20,7 +19,7 @@ import {
 import { useCallback, useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
 import type { IProviderSetting, ProviderInfo, IProviderConfig } from '~/types/model';
-import type { TabWindowConfig, TabVisibilityConfig } from '~/components/@settings/core/types';
+import type { TabWindowConfig } from '~/components/@settings/core/types';
 import { logStore } from '~/lib/stores/logs';
 import { getLocalStorage, setLocalStorage } from '~/lib/persistence';
 
@@ -62,7 +61,6 @@ export interface UseSettingsReturn {
 
   // Tab configuration
   tabConfiguration: TabWindowConfig;
-  updateTabConfiguration: (config: TabVisibilityConfig) => void;
   resetTabConfiguration: () => void;
 }
 
@@ -205,7 +203,6 @@ export function useSettings(): UseSettingsReturn {
     setTimezone,
     settings,
     tabConfiguration,
-    updateTabConfiguration: updateTabConfig,
     resetTabConfiguration: resetTabConfig,
   };
 }
diff --git a/app/lib/stores/settings.ts b/app/lib/stores/settings.ts
index 917f6e0..ef11072 100644
--- a/app/lib/stores/settings.ts
+++ b/app/lib/stores/settings.ts
@@ -1,14 +1,8 @@
 import { atom, map } from 'nanostores';
 import { PROVIDER_LIST } from '~/utils/constants';
 import type { IProviderConfig } from '~/types/model';
-import type {
-  TabVisibilityConfig,
-  TabWindowConfig,
-  UserTabConfig,
-  DevTabConfig,
-} from '~/components/@settings/core/types';
+import type { TabVisibilityConfig, TabWindowConfig, UserTabConfig } from '~/components/@settings/core/types';
 import { DEFAULT_TAB_CONFIG } from '~/components/@settings/core/constants';
-import Cookies from 'js-cookie';
 import { toggleTheme } from './theme';
 import { create } from 'zustand';
 
@@ -202,7 +196,6 @@ export const updatePromptId = (id: string) => {
 const getInitialTabConfiguration = (): TabWindowConfig => {
   const defaultConfig: TabWindowConfig = {
     userTabs: DEFAULT_TAB_CONFIG.filter((tab): tab is UserTabConfig => tab.window === 'user'),
-    developerTabs: DEFAULT_TAB_CONFIG.filter((tab): tab is DevTabConfig => tab.window === 'developer'),
   };
 
   if (!isBrowser) {
@@ -218,16 +211,13 @@ const getInitialTabConfiguration = (): TabWindowConfig => {
 
     const parsed = JSON.parse(saved);
 
-    if (!parsed?.userTabs || !parsed?.developerTabs) {
+    if (!parsed?.userTabs) {
       return defaultConfig;
     }
 
     // Ensure proper typing of loaded configuration
     return {
       userTabs: parsed.userTabs.filter((tab: TabVisibilityConfig): tab is UserTabConfig => tab.window === 'user'),
-      developerTabs: parsed.developerTabs.filter(
-        (tab: TabVisibilityConfig): tab is DevTabConfig => tab.window === 'developer',
-      ),
     };
   } catch (error) {
     console.warn('Failed to parse tab configuration:', error);
@@ -239,60 +229,16 @@ const getInitialTabConfiguration = (): TabWindowConfig => {
 
 export const tabConfigurationStore = map<TabWindowConfig>(getInitialTabConfiguration());
 
-// Helper function to update tab configuration
-export const updateTabConfiguration = (config: TabVisibilityConfig) => {
-  const currentConfig = tabConfigurationStore.get();
-  console.log('Current tab configuration before update:', currentConfig);
-
-  const isUserTab = config.window === 'user';
-  const targetArray = isUserTab ? 'userTabs' : 'developerTabs';
-
-  // Only update the tab in its respective window
-  const updatedTabs = currentConfig[targetArray].map((tab) => (tab.id === config.id ? { ...config } : tab));
-
-  // If tab doesn't exist in this window yet, add it
-  if (!updatedTabs.find((tab) => tab.id === config.id)) {
-    updatedTabs.push(config);
-  }
-
-  // Create new config, only updating the target window's tabs
-  const newConfig: TabWindowConfig = {
-    ...currentConfig,
-    [targetArray]: updatedTabs,
-  };
-
-  console.log('New tab configuration after update:', newConfig);
-
-  tabConfigurationStore.set(newConfig);
-  Cookies.set('tabConfiguration', JSON.stringify(newConfig), {
-    expires: 365, // Set cookie to expire in 1 year
-    path: '/',
-    sameSite: 'strict',
-  });
-};
-
 // Helper function to reset tab configuration
 export const resetTabConfiguration = () => {
   const defaultConfig: TabWindowConfig = {
     userTabs: DEFAULT_TAB_CONFIG.filter((tab): tab is UserTabConfig => tab.window === 'user'),
-    developerTabs: DEFAULT_TAB_CONFIG.filter((tab): tab is DevTabConfig => tab.window === 'developer'),
   };
 
   tabConfigurationStore.set(defaultConfig);
   localStorage.setItem('bolt_tab_configuration', JSON.stringify(defaultConfig));
 };
 
-// Developer mode store with persistence
-export const developerModeStore = atom<boolean>(initialSettings.developerMode);
-
-export const setDeveloperMode = (value: boolean) => {
-  developerModeStore.set(value);
-
-  if (isBrowser) {
-    localStorage.setItem(SETTINGS_KEYS.DEVELOPER_MODE, JSON.stringify(value));
-  }
-};
-
 // First, let's define the SettingsStore interface
 interface SettingsStore {
   isOpen: boolean;
diff --git a/app/lib/stores/tabConfigurationStore.ts b/app/lib/stores/tabConfigurationStore.ts
index 5f7ad46..95e038a 100644
--- a/app/lib/stores/tabConfigurationStore.ts
+++ b/app/lib/stores/tabConfigurationStore.ts
@@ -10,22 +10,19 @@ export interface TabConfig {
 
 interface TabConfigurationStore {
   userTabs: TabConfig[];
-  developerTabs: TabConfig[];
-  get: () => { userTabs: TabConfig[]; developerTabs: TabConfig[] };
-  set: (config: { userTabs: TabConfig[]; developerTabs: TabConfig[] }) => void;
+  get: () => { userTabs: TabConfig[] };
+  set: (config: { userTabs: TabConfig[] }) => void;
   reset: () => void;
 }
 
 const DEFAULT_CONFIG = {
   userTabs: [],
-  developerTabs: [],
 };
 
 export const tabConfigurationStore = create<TabConfigurationStore>((set, get) => ({
   ...DEFAULT_CONFIG,
   get: () => ({
     userTabs: get().userTabs,
-    developerTabs: get().developerTabs,
   }),
   set: (config) => set(config),
   reset: () => set(DEFAULT_CONFIG),
diff --git a/app/routes/api.system.app-info.ts b/app/routes/api.system.app-info.ts
deleted file mode 100644
index 01953b6..0000000
--- a/app/routes/api.system.app-info.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import type { ActionFunctionArgs, LoaderFunction } from '@remix-run/cloudflare';
-import { json } from '@remix-run/cloudflare';
-
-// These are injected by Vite at build time
-declare const __APP_VERSION: string;
-declare const __PKG_NAME: string;
-declare const __PKG_DESCRIPTION: string;
-declare const __PKG_LICENSE: string;
-declare const __PKG_DEPENDENCIES: Record<string, string>;
-declare const __PKG_DEV_DEPENDENCIES: Record<string, string>;
-declare const __PKG_PEER_DEPENDENCIES: Record<string, string>;
-declare const __PKG_OPTIONAL_DEPENDENCIES: Record<string, string>;
-declare const __COMMIT_HASH: string;
-declare const __GIT_BRANCH: string;
-declare const __GIT_COMMIT_TIME: string;
-declare const __GIT_AUTHOR: string;
-declare const __GIT_EMAIL: string;
-declare const __GIT_REMOTE_URL: string;
-declare const __GIT_REPO_NAME: string;
-
-const getGitInfo = () => {
-  return {
-    commitHash: __COMMIT_HASH || 'unknown',
-    branch: __GIT_BRANCH || 'unknown',
-    commitTime: __GIT_COMMIT_TIME || 'unknown',
-    author: __GIT_AUTHOR || 'unknown',
-    email: __GIT_EMAIL || 'unknown',
-    remoteUrl: __GIT_REMOTE_URL || 'unknown',
-    repoName: __GIT_REPO_NAME || 'unknown',
-  };
-};
-
-const formatDependencies = (
-  deps: Record<string, string>,
-  type: 'production' | 'development' | 'peer' | 'optional',
-): Array<{ name: string; version: string; type: string }> => {
-  return Object.entries(deps || {}).map(([name, version]) => ({
-    name,
-    version: version.replace(/^\^|~/, ''),
-    type,
-  }));
-};
-
-const getAppResponse = () => {
-  const gitInfo = getGitInfo();
-
-  return {
-    name: __PKG_NAME || 'bolt.diy',
-    version: __APP_VERSION || '0.1.0',
-    description: __PKG_DESCRIPTION || 'A DIY LLM interface',
-    license: __PKG_LICENSE || 'MIT',
-    environment: 'cloudflare',
-    gitInfo,
-    timestamp: new Date().toISOString(),
-    runtimeInfo: {
-      nodeVersion: 'cloudflare',
-    },
-    dependencies: {
-      production: formatDependencies(__PKG_DEPENDENCIES, 'production'),
-      development: formatDependencies(__PKG_DEV_DEPENDENCIES, 'development'),
-      peer: formatDependencies(__PKG_PEER_DEPENDENCIES, 'peer'),
-      optional: formatDependencies(__PKG_OPTIONAL_DEPENDENCIES, 'optional'),
-    },
-  };
-};
-
-export const loader: LoaderFunction = async ({ request: _request }) => {
-  try {
-    return json(getAppResponse());
-  } catch (error) {
-    console.error('Failed to get webapp info:', error);
-    return json(
-      {
-        name: 'bolt.diy',
-        version: '0.0.0',
-        description: 'Error fetching app info',
-        license: 'MIT',
-        environment: 'error',
-        gitInfo: {
-          commitHash: 'error',
-          branch: 'unknown',
-          commitTime: 'unknown',
-          author: 'unknown',
-          email: 'unknown',
-          remoteUrl: 'unknown',
-          repoName: 'unknown',
-        },
-        timestamp: new Date().toISOString(),
-        runtimeInfo: { nodeVersion: 'unknown' },
-        dependencies: {
-          production: [],
-          development: [],
-          peer: [],
-          optional: [],
-        },
-      },
-      { status: 500 },
-    );
-  }
-};
-
-export const action = async ({ request: _request }: ActionFunctionArgs) => {
-  try {
-    return json(getAppResponse());
-  } catch (error) {
-    console.error('Failed to get webapp info:', error);
-    return json(
-      {
-        name: 'bolt.diy',
-        version: '0.0.0',
-        description: 'Error fetching app info',
-        license: 'MIT',
-        environment: 'error',
-        gitInfo: {
-          commitHash: 'error',
-          branch: 'unknown',
-          commitTime: 'unknown',
-          author: 'unknown',
-          email: 'unknown',
-          remoteUrl: 'unknown',
-          repoName: 'unknown',
-        },
-        timestamp: new Date().toISOString(),
-        runtimeInfo: { nodeVersion: 'unknown' },
-        dependencies: {
-          production: [],
-          development: [],
-          peer: [],
-          optional: [],
-        },
-      },
-      { status: 500 },
-    );
-  }
-};
diff --git a/app/routes/api.system.memory-info.ts b/app/routes/api.system.memory-info.ts
deleted file mode 100644
index a6dc7b5..0000000
--- a/app/routes/api.system.memory-info.ts
+++ /dev/null
@@ -1,280 +0,0 @@
-import type { ActionFunctionArgs, LoaderFunction } from '@remix-run/cloudflare';
-import { json } from '@remix-run/cloudflare';
-
-// Only import child_process if we're not in a Cloudflare environment
-let execSync: any;
-
-try {
-  // Check if we're in a Node.js environment
-  if (typeof process !== 'undefined' && process.platform) {
-    // Using dynamic import to avoid require()
-    const childProcess = { execSync: null };
-    execSync = childProcess.execSync;
-  }
-} catch {
-  // In Cloudflare environment, this will fail, which is expected
-  console.log('Running in Cloudflare environment, child_process not available');
-}
-
-// For development environments, we'll always provide mock data if real data isn't available
-const isDevelopment = process.env.NODE_ENV === 'development';
-
-interface SystemMemoryInfo {
-  total: number;
-  free: number;
-  used: number;
-  percentage: number;
-  swap?: {
-    total: number;
-    free: number;
-    used: number;
-    percentage: number;
-  };
-  timestamp: string;
-  error?: string;
-}
-
-const getSystemMemoryInfo = (): SystemMemoryInfo => {
-  try {
-    // Check if we're in a Cloudflare environment and not in development
-    if (!execSync && !isDevelopment) {
-      // Return error for Cloudflare production environment
-      return {
-        total: 0,
-        free: 0,
-        used: 0,
-        percentage: 0,
-        timestamp: new Date().toISOString(),
-        error: 'System memory information is not available in this environment',
-      };
-    }
-
-    // If we're in development but not in Node environment, return mock data
-    if (!execSync && isDevelopment) {
-      // Return mock data for development
-      const mockTotal = 16 * 1024 * 1024 * 1024; // 16GB
-      const mockPercentage = Math.floor(30 + Math.random() * 20); // Random between 30-50%
-      const mockUsed = Math.floor((mockTotal * mockPercentage) / 100);
-      const mockFree = mockTotal - mockUsed;
-
-      return {
-        total: mockTotal,
-        free: mockFree,
-        used: mockUsed,
-        percentage: mockPercentage,
-        swap: {
-          total: 8 * 1024 * 1024 * 1024, // 8GB
-          free: 6 * 1024 * 1024 * 1024, // 6GB
-          used: 2 * 1024 * 1024 * 1024, // 2GB
-          percentage: 25,
-        },
-        timestamp: new Date().toISOString(),
-      };
-    }
-
-    // Different commands for different operating systems
-    let memInfo: { total: number; free: number; used: number; percentage: number; swap?: any } = {
-      total: 0,
-      free: 0,
-      used: 0,
-      percentage: 0,
-    };
-
-    // Check the operating system
-    const platform = process.platform;
-
-    if (platform === 'darwin') {
-      // macOS
-      const totalMemory = parseInt(execSync('sysctl -n hw.memsize').toString().trim(), 10);
-
-      // Get memory usage using vm_stat
-      const vmStat = execSync('vm_stat').toString().trim();
-      const pageSize = 4096; // Default page size on macOS
-
-      // Parse vm_stat output
-      const matches = {
-        free: /Pages free:\s+(\d+)/.exec(vmStat),
-        active: /Pages active:\s+(\d+)/.exec(vmStat),
-        inactive: /Pages inactive:\s+(\d+)/.exec(vmStat),
-        speculative: /Pages speculative:\s+(\d+)/.exec(vmStat),
-        wired: /Pages wired down:\s+(\d+)/.exec(vmStat),
-        compressed: /Pages occupied by compressor:\s+(\d+)/.exec(vmStat),
-      };
-
-      const freePages = parseInt(matches.free?.[1] || '0', 10);
-      const activePages = parseInt(matches.active?.[1] || '0', 10);
-      const inactivePages = parseInt(matches.inactive?.[1] || '0', 10);
-
-      // Speculative pages are not currently used in calculations, but kept for future reference
-      const wiredPages = parseInt(matches.wired?.[1] || '0', 10);
-      const compressedPages = parseInt(matches.compressed?.[1] || '0', 10);
-
-      const freeMemory = freePages * pageSize;
-      const usedMemory = (activePages + inactivePages + wiredPages + compressedPages) * pageSize;
-
-      memInfo = {
-        total: totalMemory,
-        free: freeMemory,
-        used: usedMemory,
-        percentage: Math.round((usedMemory / totalMemory) * 100),
-      };
-
-      // Get swap information
-      try {
-        const swapInfo = execSync('sysctl -n vm.swapusage').toString().trim();
-        const swapMatches = {
-          total: /total = (\d+\.\d+)M/.exec(swapInfo),
-          used: /used = (\d+\.\d+)M/.exec(swapInfo),
-          free: /free = (\d+\.\d+)M/.exec(swapInfo),
-        };
-
-        const swapTotal = parseFloat(swapMatches.total?.[1] || '0') * 1024 * 1024;
-        const swapUsed = parseFloat(swapMatches.used?.[1] || '0') * 1024 * 1024;
-        const swapFree = parseFloat(swapMatches.free?.[1] || '0') * 1024 * 1024;
-
-        memInfo.swap = {
-          total: swapTotal,
-          used: swapUsed,
-          free: swapFree,
-          percentage: swapTotal > 0 ? Math.round((swapUsed / swapTotal) * 100) : 0,
-        };
-      } catch (swapError) {
-        console.error('Failed to get swap info:', swapError);
-      }
-    } else if (platform === 'linux') {
-      // Linux
-      const meminfo = execSync('cat /proc/meminfo').toString().trim();
-
-      const memTotal = parseInt(/MemTotal:\s+(\d+)/.exec(meminfo)?.[1] || '0', 10) * 1024;
-
-      // We use memAvailable instead of memFree for more accurate free memory calculation
-      const memAvailable = parseInt(/MemAvailable:\s+(\d+)/.exec(meminfo)?.[1] || '0', 10) * 1024;
-
-      /*
-       * Buffers and cached memory are included in the available memory calculation by the kernel
-       * so we don't need to calculate them separately
-       */
-
-      const usedMemory = memTotal - memAvailable;
-
-      memInfo = {
-        total: memTotal,
-        free: memAvailable,
-        used: usedMemory,
-        percentage: Math.round((usedMemory / memTotal) * 100),
-      };
-
-      // Get swap information
-      const swapTotal = parseInt(/SwapTotal:\s+(\d+)/.exec(meminfo)?.[1] || '0', 10) * 1024;
-      const swapFree = parseInt(/SwapFree:\s+(\d+)/.exec(meminfo)?.[1] || '0', 10) * 1024;
-      const swapUsed = swapTotal - swapFree;
-
-      memInfo.swap = {
-        total: swapTotal,
-        free: swapFree,
-        used: swapUsed,
-        percentage: swapTotal > 0 ? Math.round((swapUsed / swapTotal) * 100) : 0,
-      };
-    } else if (platform === 'win32') {
-      /*
-       * Windows
-       * Using PowerShell to get memory information
-       */
-      const memoryInfo = execSync(
-        'powershell "Get-CimInstance Win32_OperatingSystem | Select-Object TotalVisibleMemorySize, FreePhysicalMemory | ConvertTo-Json"',
-      )
-        .toString()
-        .trim();
-
-      const memData = JSON.parse(memoryInfo);
-      const totalMemory = parseInt(memData.TotalVisibleMemorySize, 10) * 1024;
-      const freeMemory = parseInt(memData.FreePhysicalMemory, 10) * 1024;
-      const usedMemory = totalMemory - freeMemory;
-
-      memInfo = {
-        total: totalMemory,
-        free: freeMemory,
-        used: usedMemory,
-        percentage: Math.round((usedMemory / totalMemory) * 100),
-      };
-
-      // Get swap (page file) information
-      try {
-        const swapInfo = execSync(
-          "powershell \"Get-CimInstance Win32_PageFileUsage | Measure-Object -Property CurrentUsage, AllocatedBaseSize -Sum | Select-Object @{Name='CurrentUsage';Expression={$_.Sum}}, @{Name='AllocatedBaseSize';Expression={$_.Sum}} | ConvertTo-Json\"",
-        )
-          .toString()
-          .trim();
-
-        const swapData = JSON.parse(swapInfo);
-        const swapTotal = parseInt(swapData.AllocatedBaseSize, 10) * 1024 * 1024;
-        const swapUsed = parseInt(swapData.CurrentUsage, 10) * 1024 * 1024;
-        const swapFree = swapTotal - swapUsed;
-
-        memInfo.swap = {
-          total: swapTotal,
-          free: swapFree,
-          used: swapUsed,
-          percentage: swapTotal > 0 ? Math.round((swapUsed / swapTotal) * 100) : 0,
-        };
-      } catch (swapError) {
-        console.error('Failed to get swap info:', swapError);
-      }
-    } else {
-      throw new Error(`Unsupported platform: ${platform}`);
-    }
-
-    return {
-      ...memInfo,
-      timestamp: new Date().toISOString(),
-    };
-  } catch (error) {
-    console.error('Failed to get system memory info:', error);
-    return {
-      total: 0,
-      free: 0,
-      used: 0,
-      percentage: 0,
-      timestamp: new Date().toISOString(),
-      error: error instanceof Error ? error.message : 'Unknown error',
-    };
-  }
-};
-
-export const loader: LoaderFunction = async ({ request: _request }) => {
-  try {
-    return json(getSystemMemoryInfo());
-  } catch (error) {
-    console.error('Failed to get system memory info:', error);
-    return json(
-      {
-        total: 0,
-        free: 0,
-        used: 0,
-        percentage: 0,
-        timestamp: new Date().toISOString(),
-        error: error instanceof Error ? error.message : 'Unknown error',
-      },
-      { status: 500 },
-    );
-  }
-};
-
-export const action = async ({ request: _request }: ActionFunctionArgs) => {
-  try {
-    return json(getSystemMemoryInfo());
-  } catch (error) {
-    console.error('Failed to get system memory info:', error);
-    return json(
-      {
-        total: 0,
-        free: 0,
-        used: 0,
-        percentage: 0,
-        timestamp: new Date().toISOString(),
-        error: error instanceof Error ? error.message : 'Unknown error',
-      },
-      { status: 500 },
-    );
-  }
-};
diff --git a/app/routes/api.system.process-info.ts b/app/routes/api.system.process-info.ts
deleted file mode 100644
index d3c2206..0000000
--- a/app/routes/api.system.process-info.ts
+++ /dev/null
@@ -1,424 +0,0 @@
-import type { ActionFunctionArgs, LoaderFunction } from '@remix-run/cloudflare';
-import { json } from '@remix-run/cloudflare';
-
-// Only import child_process if we're not in a Cloudflare environment
-let execSync: any;
-
-try {
-  // Check if we're in a Node.js environment
-  if (typeof process !== 'undefined' && process.platform) {
-    // Using dynamic import to avoid require()
-    const childProcess = { execSync: null };
-    execSync = childProcess.execSync;
-  }
-} catch {
-  // In Cloudflare environment, this will fail, which is expected
-  console.log('Running in Cloudflare environment, child_process not available');
-}
-
-// For development environments, we'll always provide mock data if real data isn't available
-const isDevelopment = process.env.NODE_ENV === 'development';
-
-interface ProcessInfo {
-  pid: number;
-  name: string;
-  cpu: number;
-  memory: number;
-  command?: string;
-  timestamp: string;
-  error?: string;
-}
-
-const getProcessInfo = (): ProcessInfo[] => {
-  try {
-    // If we're in a Cloudflare environment and not in development, return error
-    if (!execSync && !isDevelopment) {
-      return [
-        {
-          pid: 0,
-          name: 'N/A',
-          cpu: 0,
-          memory: 0,
-          timestamp: new Date().toISOString(),
-          error: 'Process information is not available in this environment',
-        },
-      ];
-    }
-
-    // If we're in development but not in Node environment, return mock data
-    if (!execSync && isDevelopment) {
-      return getMockProcessInfo();
-    }
-
-    // Different commands for different operating systems
-    const platform = process.platform;
-    let processes: ProcessInfo[] = [];
-
-    // Get CPU count for normalizing CPU percentages
-    let cpuCount = 1;
-
-    try {
-      if (platform === 'darwin') {
-        const cpuInfo = execSync('sysctl -n hw.ncpu', { encoding: 'utf-8' }).toString().trim();
-        cpuCount = parseInt(cpuInfo, 10) || 1;
-      } else if (platform === 'linux') {
-        const cpuInfo = execSync('nproc', { encoding: 'utf-8' }).toString().trim();
-        cpuCount = parseInt(cpuInfo, 10) || 1;
-      } else if (platform === 'win32') {
-        const cpuInfo = execSync('wmic cpu get NumberOfCores', { encoding: 'utf-8' }).toString().trim();
-        const match = cpuInfo.match(/\d+/);
-        cpuCount = match ? parseInt(match[0], 10) : 1;
-      }
-    } catch (error) {
-      console.error('Failed to get CPU count:', error);
-
-      // Default to 1 if we can't get the count
-      cpuCount = 1;
-    }
-
-    if (platform === 'darwin') {
-      // macOS - use ps command to get process information
-      try {
-        const output = execSync('ps -eo pid,pcpu,pmem,comm -r | head -n 11', { encoding: 'utf-8' }).toString().trim();
-
-        // Skip the header line
-        const lines = output.split('\n').slice(1);
-
-        processes = lines.map((line: string) => {
-          const parts = line.trim().split(/\s+/);
-          const pid = parseInt(parts[0], 10);
-
-          /*
-           * Normalize CPU percentage by dividing by CPU count
-           * This converts from "% of all CPUs" to "% of one CPU"
-           */
-          const cpu = parseFloat(parts[1]) / cpuCount;
-          const memory = parseFloat(parts[2]);
-          const command = parts.slice(3).join(' ');
-
-          return {
-            pid,
-            name: command.split('/').pop() || command,
-            cpu,
-            memory,
-            command,
-            timestamp: new Date().toISOString(),
-          };
-        });
-      } catch (error) {
-        console.error('Failed to get macOS process info:', error);
-
-        // Try alternative command
-        try {
-          const output = execSync('top -l 1 -stats pid,cpu,mem,command -n 10', { encoding: 'utf-8' }).toString().trim();
-
-          // Parse top output - skip the first few lines of header
-          const lines = output.split('\n').slice(6);
-
-          processes = lines.map((line: string) => {
-            const parts = line.trim().split(/\s+/);
-            const pid = parseInt(parts[0], 10);
-            const cpu = parseFloat(parts[1]);
-            const memory = parseFloat(parts[2]);
-            const command = parts.slice(3).join(' ');
-
-            return {
-              pid,
-              name: command.split('/').pop() || command,
-              cpu,
-              memory,
-              command,
-              timestamp: new Date().toISOString(),
-            };
-          });
-        } catch (fallbackError) {
-          console.error('Failed to get macOS process info with fallback:', fallbackError);
-          return [
-            {
-              pid: 0,
-              name: 'N/A',
-              cpu: 0,
-              memory: 0,
-              timestamp: new Date().toISOString(),
-              error: 'Process information is not available in this environment',
-            },
-          ];
-        }
-      }
-    } else if (platform === 'linux') {
-      // Linux - use ps command to get process information
-      try {
-        const output = execSync('ps -eo pid,pcpu,pmem,comm --sort=-pmem | head -n 11', { encoding: 'utf-8' })
-          .toString()
-          .trim();
-
-        // Skip the header line
-        const lines = output.split('\n').slice(1);
-
-        processes = lines.map((line: string) => {
-          const parts = line.trim().split(/\s+/);
-          const pid = parseInt(parts[0], 10);
-
-          // Normalize CPU percentage by dividing by CPU count
-          const cpu = parseFloat(parts[1]) / cpuCount;
-          const memory = parseFloat(parts[2]);
-          const command = parts.slice(3).join(' ');
-
-          return {
-            pid,
-            name: command.split('/').pop() || command,
-            cpu,
-            memory,
-            command,
-            timestamp: new Date().toISOString(),
-          };
-        });
-      } catch (error) {
-        console.error('Failed to get Linux process info:', error);
-
-        // Try alternative command
-        try {
-          const output = execSync('top -b -n 1 | head -n 17', { encoding: 'utf-8' }).toString().trim();
-
-          // Parse top output - skip the first few lines of header
-          const lines = output.split('\n').slice(7);
-
-          processes = lines.map((line: string) => {
-            const parts = line.trim().split(/\s+/);
-            const pid = parseInt(parts[0], 10);
-            const cpu = parseFloat(parts[8]);
-            const memory = parseFloat(parts[9]);
-            const command = parts[11] || parts[parts.length - 1];
-
-            return {
-              pid,
-              name: command.split('/').pop() || command,
-              cpu,
-              memory,
-              command,
-              timestamp: new Date().toISOString(),
-            };
-          });
-        } catch (fallbackError) {
-          console.error('Failed to get Linux process info with fallback:', fallbackError);
-          return [
-            {
-              pid: 0,
-              name: 'N/A',
-              cpu: 0,
-              memory: 0,
-              timestamp: new Date().toISOString(),
-              error: 'Process information is not available in this environment',
-            },
-          ];
-        }
-      }
-    } else if (platform === 'win32') {
-      // Windows - use PowerShell to get process information
-      try {
-        const output = execSync(
-          'powershell "Get-Process | Sort-Object -Property WorkingSet64 -Descending | Select-Object -First 10 Id, CPU, @{Name=\'Memory\';Expression={$_.WorkingSet64/1MB}}, ProcessName | ConvertTo-Json"',
-          { encoding: 'utf-8' },
-        )
-          .toString()
-          .trim();
-
-        const processData = JSON.parse(output);
-        const processArray = Array.isArray(processData) ? processData : [processData];
-
-        processes = processArray.map((proc: any) => ({
-          pid: proc.Id,
-          name: proc.ProcessName,
-
-          // Normalize CPU percentage by dividing by CPU count
-          cpu: (proc.CPU || 0) / cpuCount,
-          memory: proc.Memory,
-          timestamp: new Date().toISOString(),
-        }));
-      } catch (error) {
-        console.error('Failed to get Windows process info:', error);
-
-        // Try alternative command using tasklist
-        try {
-          const output = execSync('tasklist /FO CSV', { encoding: 'utf-8' }).toString().trim();
-
-          // Parse CSV output - skip the header line
-          const lines = output.split('\n').slice(1);
-
-          processes = lines.slice(0, 10).map((line: string) => {
-            // Parse CSV format
-            const parts = line.split(',').map((part: string) => part.replace(/^"(.+)"$/, '$1'));
-            const pid = parseInt(parts[1], 10);
-            const memoryStr = parts[4].replace(/[^\d]/g, '');
-            const memory = parseInt(memoryStr, 10) / 1024; // Convert KB to MB
-
-            return {
-              pid,
-              name: parts[0],
-              cpu: 0, // tasklist doesn't provide CPU info
-              memory,
-              timestamp: new Date().toISOString(),
-            };
-          });
-        } catch (fallbackError) {
-          console.error('Failed to get Windows process info with fallback:', fallbackError);
-          return [
-            {
-              pid: 0,
-              name: 'N/A',
-              cpu: 0,
-              memory: 0,
-              timestamp: new Date().toISOString(),
-              error: 'Process information is not available in this environment',
-            },
-          ];
-        }
-      }
-    } else {
-      console.warn(`Unsupported platform: ${platform}, using browser fallback`);
-      return [
-        {
-          pid: 0,
-          name: 'N/A',
-          cpu: 0,
-          memory: 0,
-          timestamp: new Date().toISOString(),
-          error: 'Process information is not available in this environment',
-        },
-      ];
-    }
-
-    return processes;
-  } catch (error) {
-    console.error('Failed to get process info:', error);
-
-    if (isDevelopment) {
-      return getMockProcessInfo();
-    }
-
-    return [
-      {
-        pid: 0,
-        name: 'N/A',
-        cpu: 0,
-        memory: 0,
-        timestamp: new Date().toISOString(),
-        error: 'Process information is not available in this environment',
-      },
-    ];
-  }
-};
-
-// Generate mock process information with realistic values
-const getMockProcessInfo = (): ProcessInfo[] => {
-  const timestamp = new Date().toISOString();
-
-  // Create some random variation in CPU usage
-  const randomCPU = () => Math.floor(Math.random() * 15);
-  const randomHighCPU = () => 15 + Math.floor(Math.random() * 25);
-
-  // Create some random variation in memory usage
-  const randomMem = () => Math.floor(Math.random() * 5);
-  const randomHighMem = () => 5 + Math.floor(Math.random() * 15);
-
-  return [
-    {
-      pid: 1,
-      name: 'Browser',
-      cpu: randomHighCPU(),
-      memory: 25 + randomMem(),
-      command: 'Browser Process',
-      timestamp,
-    },
-    {
-      pid: 2,
-      name: 'System',
-      cpu: 5 + randomCPU(),
-      memory: 10 + randomMem(),
-      command: 'System Process',
-      timestamp,
-    },
-    {
-      pid: 3,
-      name: 'bolt',
-      cpu: randomHighCPU(),
-      memory: 15 + randomMem(),
-      command: 'Bolt AI Process',
-      timestamp,
-    },
-    {
-      pid: 4,
-      name: 'node',
-      cpu: randomCPU(),
-      memory: randomHighMem(),
-      command: 'Node.js Process',
-      timestamp,
-    },
-    {
-      pid: 5,
-      name: 'wrangler',
-      cpu: randomCPU(),
-      memory: randomMem(),
-      command: 'Wrangler Process',
-      timestamp,
-    },
-    {
-      pid: 6,
-      name: 'vscode',
-      cpu: randomCPU(),
-      memory: 12 + randomMem(),
-      command: 'VS Code Process',
-      timestamp,
-    },
-    {
-      pid: 7,
-      name: 'chrome',
-      cpu: randomHighCPU(),
-      memory: 20 + randomMem(),
-      command: 'Chrome Browser',
-      timestamp,
-    },
-    {
-      pid: 8,
-      name: 'finder',
-      cpu: 1 + randomCPU(),
-      memory: 3 + randomMem(),
-      command: 'Finder Process',
-      timestamp,
-    },
-    {
-      pid: 9,
-      name: 'terminal',
-      cpu: 2 + randomCPU(),
-      memory: 5 + randomMem(),
-      command: 'Terminal Process',
-      timestamp,
-    },
-    {
-      pid: 10,
-      name: 'cloudflared',
-      cpu: randomCPU(),
-      memory: randomMem(),
-      command: 'Cloudflare Tunnel',
-      timestamp,
-    },
-  ];
-};
-
-export const loader: LoaderFunction = async ({ request: _request }) => {
-  try {
-    return json(getProcessInfo());
-  } catch (error) {
-    console.error('Failed to get process info:', error);
-    return json(getMockProcessInfo(), { status: 500 });
-  }
-};
-
-export const action = async ({ request: _request }: ActionFunctionArgs) => {
-  try {
-    return json(getProcessInfo());
-  } catch (error) {
-    console.error('Failed to get process info:', error);
-    return json(getMockProcessInfo(), { status: 500 });
-  }
-};
diff --git a/app/utils/cn.ts b/app/utils/cn.ts
new file mode 100644
index 0000000..9ad0df4
--- /dev/null
+++ b/app/utils/cn.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/app/utils/logger.ts b/app/utils/logger.ts
index 26f9e37..2cdfd0d 100644
--- a/app/utils/logger.ts
+++ b/app/utils/logger.ts
@@ -1,4 +1,4 @@
-export type DebugLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error';
+export type DebugLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'none';
 import { Chalk } from 'chalk';
 
 const chalk = new Chalk({ level: 3 });
@@ -14,7 +14,7 @@ interface Logger {
   setLevel: (level: DebugLevel) => void;
 }
 
-let currentLevel: DebugLevel = (import.meta.env.VITE_LOG_LEVEL ?? import.meta.env.DEV) ? 'debug' : 'info';
+let currentLevel: DebugLevel = import.meta.env.VITE_LOG_LEVEL || (import.meta.env.DEV ? 'debug' : 'info');
 
 export const logger: Logger = {
   trace: (...messages: any[]) => log('trace', undefined, messages),
@@ -45,12 +45,17 @@ function setLevel(level: DebugLevel) {
 }
 
 function log(level: DebugLevel, scope: string | undefined, messages: any[]) {
-  const levelOrder: DebugLevel[] = ['trace', 'debug', 'info', 'warn', 'error'];
+  const levelOrder: DebugLevel[] = ['trace', 'debug', 'info', 'warn', 'error', 'none'];
 
   if (levelOrder.indexOf(level) < levelOrder.indexOf(currentLevel)) {
     return;
   }
 
+  // If current level is 'none', don't log anything
+  if (currentLevel === 'none') {
+    return;
+  }
+
   const allMessages = messages.reduce((acc, current) => {
     if (acc.endsWith('\n')) {
       return acc + current;
diff --git a/vite.config.ts b/vite.config.ts
index 60ea52b..a1d61ff 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -74,21 +74,6 @@ const gitInfo = getGitInfo();
 export default defineConfig((config) => {
   return {
     define: {
-      __COMMIT_HASH: JSON.stringify(gitInfo.commitHash),
-      __GIT_BRANCH: JSON.stringify(gitInfo.branch),
-      __GIT_COMMIT_TIME: JSON.stringify(gitInfo.commitTime),
-      __GIT_AUTHOR: JSON.stringify(gitInfo.author),
-      __GIT_EMAIL: JSON.stringify(gitInfo.email),
-      __GIT_REMOTE_URL: JSON.stringify(gitInfo.remoteUrl),
-      __GIT_REPO_NAME: JSON.stringify(gitInfo.repoName),
-      __APP_VERSION: JSON.stringify(process.env.npm_package_version),
-      __PKG_NAME: JSON.stringify(pkg.name),
-      __PKG_DESCRIPTION: JSON.stringify(pkg.description),
-      __PKG_LICENSE: JSON.stringify(pkg.license),
-      __PKG_DEPENDENCIES: JSON.stringify(pkg.dependencies),
-      __PKG_DEV_DEPENDENCIES: JSON.stringify(pkg.devDependencies),
-      __PKG_PEER_DEPENDENCIES: JSON.stringify(pkg.peerDependencies),
-      __PKG_OPTIONAL_DEPENDENCIES: JSON.stringify(pkg.optionalDependencies),
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
     },
     build: {

From 26c46088bc4a430a3fc999e9522de08a269650eb Mon Sep 17 00:00:00 2001
From: xKevIsDev <zennerd404@gmail.com>
Date: Thu, 3 Jul 2025 11:43:58 +0100
Subject: [PATCH 05/11] feat: enhance error handling for LLM API calls

Add LLM error alert functionality to display specific error messages based on API responses. Introduce new LlmErrorAlertType interface for structured error alerts. Update chat components to manage and display LLM error alerts effectively, improving user feedback during error scenarios.
---
 app/components/chat/BaseChat.tsx    |   8 +-
 app/components/chat/Chat.client.tsx |  91 ++++++++++++++++++++---
 app/components/chat/LLMApiAlert.tsx | 109 ++++++++++++++++++++++++++++
 app/routes/api.chat.ts              |  32 ++++++--
 app/routes/api.llmcall.ts           |  32 ++++++--
 app/types/actions.ts                |   9 +++
 6 files changed, 256 insertions(+), 25 deletions(-)
 create mode 100644 app/components/chat/LLMApiAlert.tsx

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index d944865..7daffb6 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -19,7 +19,7 @@ import { ExamplePrompts } from '~/components/chat/ExamplePrompts';
 import GitCloneButton from './GitCloneButton';
 import type { ProviderInfo } from '~/types/model';
 import StarterTemplates from './StarterTemplates';
-import type { ActionAlert, SupabaseAlert, DeployAlert } from '~/types/actions';
+import type { ActionAlert, SupabaseAlert, DeployAlert, LlmErrorAlertType } from '~/types/actions';
 import DeployChatAlert from '~/components/deploy/DeployAlert';
 import ChatAlert from './ChatAlert';
 import type { ModelInfo } from '~/lib/modules/llm/types';
@@ -32,6 +32,7 @@ import { StickToBottom, useStickToBottomContext } from '~/lib/hooks';
 import { ChatBox } from './ChatBox';
 import type { DesignScheme } from '~/types/design-scheme';
 import type { ElementInfo } from '~/components/workbench/Inspector';
+import LlmErrorAlert from './LLMApiAlert';
 
 const TEXTAREA_MIN_HEIGHT = 76;
 
@@ -69,6 +70,8 @@ interface BaseChatProps {
   clearSupabaseAlert?: () => void;
   deployAlert?: DeployAlert;
   clearDeployAlert?: () => void;
+  llmErrorAlert?: LlmErrorAlertType;
+  clearLlmErrorAlert?: () => void;
   data?: JSONValue[] | undefined;
   chatMode?: 'discuss' | 'build';
   setChatMode?: (mode: 'discuss' | 'build') => void;
@@ -114,6 +117,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       clearDeployAlert,
       supabaseAlert,
       clearSupabaseAlert,
+      llmErrorAlert,
+      clearLlmErrorAlert,
       data,
       chatMode,
       setChatMode,
@@ -416,6 +421,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                       }}
                     />
                   )}
+                  {llmErrorAlert && <LlmErrorAlert alert={llmErrorAlert} clearAlert={() => clearLlmErrorAlert?.()} />}
                 </div>
                 {progressAnnotations && <ProgressCompilation data={progressAnnotations} />}
                 <ChatBox
diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
index cbd07fe..dfe8912 100644
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -27,6 +27,7 @@ import { defaultDesignScheme, type DesignScheme } from '~/types/design-scheme';
 import type { ElementInfo } from '~/components/workbench/Inspector';
 import type { TextUIPart, FileUIPart, Attachment } from '@ai-sdk/ui-utils';
 import { useMCPStore } from '~/lib/stores/mcp';
+import type { LlmErrorAlertType } from '~/types/actions';
 
 const toastAnimation = cssTransition({
   enter: 'animated fadeInRight',
@@ -127,12 +128,13 @@ export const ChatImpl = memo(
     const [designScheme, setDesignScheme] = useState<DesignScheme>(defaultDesignScheme);
     const actionAlert = useStore(workbenchStore.alert);
     const deployAlert = useStore(workbenchStore.deployAlert);
-    const supabaseConn = useStore(supabaseConnection); // Add this line to get Supabase connection
+    const supabaseConn = useStore(supabaseConnection);
     const selectedProject = supabaseConn.stats?.projects?.find(
       (project) => project.id === supabaseConn.selectedProjectId,
     );
     const supabaseAlert = useStore(workbenchStore.supabaseAlert);
     const { activeProviders, promptId, autoSelectTemplate, contextOptimizationEnabled } = useSettings();
+    const [llmErrorAlert, setLlmErrorAlert] = useState<LlmErrorAlertType | undefined>(undefined);
     const [model, setModel] = useState(() => {
       const savedModel = Cookies.get('selectedModel');
       return savedModel || DEFAULT_MODEL;
@@ -183,15 +185,8 @@ export const ChatImpl = memo(
       },
       sendExtraMessageFields: true,
       onError: (e) => {
-        logger.error('Request failed\n\n', e, error);
-        logStore.logError('Chat request failed', e, {
-          component: 'Chat',
-          action: 'request',
-          error: e.message,
-        });
-        toast.error(
-          'There was an error processing your request: ' + (e.message ? e.message : 'No details were returned'),
-        );
+        setFakeLoading(false);
+        handleError(e, 'chat');
       },
       onFinish: (message, response) => {
         const usage = response.usage;
@@ -269,6 +264,80 @@ export const ChatImpl = memo(
       });
     };
 
+    const handleError = useCallback(
+      (error: any, context: 'chat' | 'template' | 'llmcall' = 'chat') => {
+        logger.error(`${context} request failed`, error);
+
+        stop();
+        setFakeLoading(false);
+
+        let errorInfo = {
+          message: 'An unexpected error occurred',
+          isRetryable: true,
+          statusCode: 500,
+          provider: provider.name,
+          type: 'unknown' as const,
+          retryDelay: 0,
+        };
+
+        if (error.message) {
+          try {
+            const parsed = JSON.parse(error.message);
+
+            if (parsed.error || parsed.message) {
+              errorInfo = { ...errorInfo, ...parsed };
+            } else {
+              errorInfo.message = error.message;
+            }
+          } catch {
+            errorInfo.message = error.message;
+          }
+        }
+
+        let errorType: LlmErrorAlertType['errorType'] = 'unknown';
+        let title = 'Request Failed';
+
+        if (errorInfo.statusCode === 401 || errorInfo.message.toLowerCase().includes('api key')) {
+          errorType = 'authentication';
+          title = 'Authentication Error';
+        } else if (errorInfo.statusCode === 429 || errorInfo.message.toLowerCase().includes('rate limit')) {
+          errorType = 'rate_limit';
+          title = 'Rate Limit Exceeded';
+        } else if (errorInfo.message.toLowerCase().includes('quota')) {
+          errorType = 'quota';
+          title = 'Quota Exceeded';
+        } else if (errorInfo.statusCode >= 500) {
+          errorType = 'network';
+          title = 'Server Error';
+        }
+
+        logStore.logError(`${context} request failed`, error, {
+          component: 'Chat',
+          action: 'request',
+          error: errorInfo.message,
+          context,
+          retryable: errorInfo.isRetryable,
+          errorType,
+          provider: provider.name,
+        });
+
+        // Create API error alert
+        setLlmErrorAlert({
+          type: 'error',
+          title,
+          description: errorInfo.message,
+          provider: provider.name,
+          errorType,
+        });
+        setData([]);
+      },
+      [provider.name, stop],
+    );
+
+    const clearApiErrorAlert = useCallback(() => {
+      setLlmErrorAlert(undefined);
+    }, []);
+
     useEffect(() => {
       const textarea = textareaRef.current;
 
@@ -617,6 +686,8 @@ export const ChatImpl = memo(
         clearSupabaseAlert={() => workbenchStore.clearSupabaseAlert()}
         deployAlert={deployAlert}
         clearDeployAlert={() => workbenchStore.clearDeployAlert()}
+        llmErrorAlert={llmErrorAlert}
+        clearLlmErrorAlert={clearApiErrorAlert}
         data={chatData}
         chatMode={chatMode}
         setChatMode={setChatMode}
diff --git a/app/components/chat/LLMApiAlert.tsx b/app/components/chat/LLMApiAlert.tsx
new file mode 100644
index 0000000..12c5ada
--- /dev/null
+++ b/app/components/chat/LLMApiAlert.tsx
@@ -0,0 +1,109 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import type { LlmErrorAlertType } from '~/types/actions';
+import { classNames } from '~/utils/classNames';
+
+interface Props {
+  alert: LlmErrorAlertType;
+  clearAlert: () => void;
+}
+
+export default function LlmErrorAlert({ alert, clearAlert }: Props) {
+  const { title, description, provider, errorType } = alert;
+
+  const getErrorIcon = () => {
+    switch (errorType) {
+      case 'authentication':
+        return 'i-ph:key-duotone';
+      case 'rate_limit':
+        return 'i-ph:clock-duotone';
+      case 'quota':
+        return 'i-ph:warning-circle-duotone';
+      default:
+        return 'i-ph:warning-duotone';
+    }
+  };
+
+  const getErrorMessage = () => {
+    switch (errorType) {
+      case 'authentication':
+        return `Authentication failed with ${provider}. Please check your API key.`;
+      case 'rate_limit':
+        return `Rate limit exceeded for ${provider}. Please wait before retrying.`;
+      case 'quota':
+        return `Quota exceeded for ${provider}. Please check your account limits.`;
+      default:
+        return 'An error occurred while processing your request.';
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -20 }}
+        transition={{ duration: 0.3 }}
+        className="rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 p-4 mb-2"
+      >
+        <div className="flex items-start">
+          <motion.div
+            className="flex-shrink-0"
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ delay: 0.2 }}
+          >
+            <div className={`${getErrorIcon()} text-xl text-bolt-elements-button-danger-text`}></div>
+          </motion.div>
+
+          <div className="ml-3 flex-1">
+            <motion.h3
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.1 }}
+              className="text-sm font-medium text-bolt-elements-textPrimary"
+            >
+              {title}
+            </motion.h3>
+
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.2 }}
+              className="mt-2 text-sm text-bolt-elements-textSecondary"
+            >
+              <p>{getErrorMessage()}</p>
+
+              {description && (
+                <div className="text-xs text-bolt-elements-textSecondary p-2 bg-bolt-elements-background-depth-3 rounded mt-4 mb-4">
+                  Error Details: {description}
+                </div>
+              )}
+            </motion.div>
+
+            <motion.div
+              className="mt-4"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.3 }}
+            >
+              <div className="flex gap-2">
+                <button
+                  onClick={clearAlert}
+                  className={classNames(
+                    'px-2 py-1.5 rounded-md text-sm font-medium',
+                    'bg-bolt-elements-button-secondary-background',
+                    'hover:bg-bolt-elements-button-secondary-backgroundHover',
+                    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-secondary-background',
+                    'text-bolt-elements-button-secondary-text',
+                  )}
+                >
+                  Dismiss
+                </button>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}
diff --git a/app/routes/api.chat.ts b/app/routes/api.chat.ts
index e35e8c1..93ab6e8 100644
--- a/app/routes/api.chat.ts
+++ b/app/routes/api.chat.ts
@@ -375,16 +375,34 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
   } catch (error: any) {
     logger.error(error);
 
+    const errorResponse = {
+      error: true,
+      message: error.message || 'An unexpected error occurred',
+      statusCode: error.statusCode || 500,
+      isRetryable: error.isRetryable !== false, // Default to retryable unless explicitly false
+      provider: error.provider || 'unknown',
+    };
+
     if (error.message?.includes('API key')) {
-      throw new Response('Invalid or missing API key', {
-        status: 401,
-        statusText: 'Unauthorized',
-      });
+      return new Response(
+        JSON.stringify({
+          ...errorResponse,
+          message: 'Invalid or missing API key',
+          statusCode: 401,
+          isRetryable: false,
+        }),
+        {
+          status: 401,
+          headers: { 'Content-Type': 'application/json' },
+          statusText: 'Unauthorized',
+        },
+      );
     }
 
-    throw new Response(null, {
-      status: 500,
-      statusText: 'Internal Server Error',
+    return new Response(JSON.stringify(errorResponse), {
+      status: errorResponse.statusCode,
+      headers: { 'Content-Type': 'application/json' },
+      statusText: 'Error',
     });
   }
 }
diff --git a/app/routes/api.llmcall.ts b/app/routes/api.llmcall.ts
index cf75e49..167f9ef 100644
--- a/app/routes/api.llmcall.ts
+++ b/app/routes/api.llmcall.ts
@@ -139,16 +139,34 @@ async function llmCallAction({ context, request }: ActionFunctionArgs) {
     } catch (error: unknown) {
       console.log(error);
 
+      const errorResponse = {
+        error: true,
+        message: error instanceof Error ? error.message : 'An unexpected error occurred',
+        statusCode: (error as any).statusCode || 500,
+        isRetryable: (error as any).isRetryable !== false,
+        provider: (error as any).provider || 'unknown',
+      };
+
       if (error instanceof Error && error.message?.includes('API key')) {
-        throw new Response('Invalid or missing API key', {
-          status: 401,
-          statusText: 'Unauthorized',
-        });
+        return new Response(
+          JSON.stringify({
+            ...errorResponse,
+            message: 'Invalid or missing API key',
+            statusCode: 401,
+            isRetryable: false,
+          }),
+          {
+            status: 401,
+            headers: { 'Content-Type': 'application/json' },
+            statusText: 'Unauthorized',
+          },
+        );
       }
 
-      throw new Response(null, {
-        status: 500,
-        statusText: 'Internal Server Error',
+      return new Response(JSON.stringify(errorResponse), {
+        status: errorResponse.statusCode,
+        headers: { 'Content-Type': 'application/json' },
+        statusText: 'Error',
       });
     }
   }
diff --git a/app/types/actions.ts b/app/types/actions.ts
index 0e1411d..95c75ba 100644
--- a/app/types/actions.ts
+++ b/app/types/actions.ts
@@ -62,6 +62,15 @@ export interface DeployAlert {
   source?: 'vercel' | 'netlify' | 'github';
 }
 
+export interface LlmErrorAlertType {
+  type: 'error' | 'warning';
+  title: string;
+  description: string;
+  content?: string;
+  provider?: string;
+  errorType?: 'authentication' | 'rate_limit' | 'quota' | 'network' | 'unknown';
+}
+
 export interface FileHistory {
   originalContent: string;
   lastModified: number;

From a84b1e7c63fc7c83ac4b45c40a713e2affab6c3a Mon Sep 17 00:00:00 2001
From: xKevIsDev <zenner404@gmail.com>
Date: Tue, 8 Jul 2025 02:08:32 +0100
Subject: [PATCH 06/11] chore: remove redundant features

- Remove getPackageJson and getGitInfo from vite config
- Remove Updates tab and all related logic as there was no true update logic in the codebase
---
 .../@settings/core/ControlPanel.tsx           |  14 +-
 app/components/@settings/core/constants.ts    |  19 +-
 app/components/@settings/core/types.ts        |   2 -
 .../@settings/tabs/update/UpdateTab.tsx       | 628 ------------------
 app/lib/hooks/index.ts                        |   1 -
 app/lib/hooks/useUpdateCheck.ts               |  58 --
 vite.config.ts                                |  63 --
 7 files changed, 8 insertions(+), 777 deletions(-)
 delete mode 100644 app/components/@settings/tabs/update/UpdateTab.tsx
 delete mode 100644 app/lib/hooks/useUpdateCheck.ts

diff --git a/app/components/@settings/core/ControlPanel.tsx b/app/components/@settings/core/ControlPanel.tsx
index a7647b6..76ed9ae 100644
--- a/app/components/@settings/core/ControlPanel.tsx
+++ b/app/components/@settings/core/ControlPanel.tsx
@@ -3,7 +3,6 @@ import { useStore } from '@nanostores/react';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { classNames } from '~/utils/classNames';
 import { TabTile } from '~/components/@settings/shared/components/TabTile';
-import { useUpdateCheck } from '~/lib/hooks/useUpdateCheck';
 import { useFeatures } from '~/lib/hooks/useFeatures';
 import { useNotifications } from '~/lib/hooks/useNotifications';
 import { useConnectionStatus } from '~/lib/hooks/useConnectionStatus';
@@ -22,7 +21,6 @@ import NotificationsTab from '~/components/@settings/tabs/notifications/Notifica
 import FeaturesTab from '~/components/@settings/tabs/features/FeaturesTab';
 import { DataTab } from '~/components/@settings/tabs/data/DataTab';
 import { EventLogsTab } from '~/components/@settings/tabs/event-logs/EventLogsTab';
-import UpdateTab from '~/components/@settings/tabs/update/UpdateTab';
 import ConnectionsTab from '~/components/@settings/tabs/connections/ConnectionsTab';
 import CloudProvidersTab from '~/components/@settings/tabs/providers/cloud/CloudProvidersTab';
 import ServiceStatusTab from '~/components/@settings/tabs/providers/status/ServiceStatusTab';
@@ -35,7 +33,7 @@ interface ControlPanelProps {
 }
 
 // Beta status for experimental features
-const BETA_TABS = new Set<TabType>(['service-status', 'update', 'local-providers']);
+const BETA_TABS = new Set<TabType>(['service-status', 'local-providers']);
 
 const BetaLabel = () => (
   <div className="absolute top-2 right-2 px-1.5 py-0.5 rounded-full bg-purple-500/10 dark:bg-purple-500/20">
@@ -54,7 +52,6 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
   const profile = useStore(profileStore) as Profile;
 
   // Status hooks
-  const { hasUpdate, currentVersion, acknowledgeUpdate } = useUpdateCheck();
   const { hasNewFeatures, unviewedFeatures, acknowledgeAllFeatures } = useFeatures();
   const { hasUnreadNotifications, unreadNotifications, markAllAsRead } = useNotifications();
   const { hasConnectionIssues, currentIssue, acknowledgeIssue } = useConnectionStatus();
@@ -141,8 +138,6 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
         return <ConnectionsTab />;
       case 'event-logs':
         return <EventLogsTab />;
-      case 'update':
-        return <UpdateTab />;
       case 'service-status':
         return <ServiceStatusTab />;
       case 'mcp':
@@ -154,8 +149,6 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
 
   const getTabUpdateStatus = (tabId: TabType): boolean => {
     switch (tabId) {
-      case 'update':
-        return hasUpdate;
       case 'features':
         return hasNewFeatures;
       case 'notifications':
@@ -169,8 +162,6 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
 
   const getStatusMessage = (tabId: TabType): string => {
     switch (tabId) {
-      case 'update':
-        return `New update available (v${currentVersion})`;
       case 'features':
         return `${unviewedFeatures.length} new feature${unviewedFeatures.length === 1 ? '' : 's'} to explore`;
       case 'notifications':
@@ -193,9 +184,6 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
 
     // Acknowledge notifications based on tab
     switch (tabId) {
-      case 'update':
-        acknowledgeUpdate();
-        break;
       case 'features':
         acknowledgeAllFeatures();
         break;
diff --git a/app/components/@settings/core/constants.ts b/app/components/@settings/core/constants.ts
index 8bb9fc9..776538f 100644
--- a/app/components/@settings/core/constants.ts
+++ b/app/components/@settings/core/constants.ts
@@ -1,17 +1,16 @@
 import type { TabType } from './types';
 
 export const TAB_ICONS: Record<TabType, string> = {
-  profile: 'i-ph:user-circle-fill',
-  settings: 'i-ph:gear-six-fill',
-  notifications: 'i-ph:bell-fill',
-  features: 'i-ph:star-fill',
-  data: 'i-ph:database-fill',
-  'cloud-providers': 'i-ph:cloud-fill',
-  'local-providers': 'i-ph:desktop-fill',
+  profile: 'i-ph:user-circle',
+  settings: 'i-ph:gear-six',
+  notifications: 'i-ph:bell',
+  features: 'i-ph:star',
+  data: 'i-ph:database',
+  'cloud-providers': 'i-ph:cloud',
+  'local-providers': 'i-ph:laptop',
   'service-status': 'i-ph:activity-bold',
   connection: 'i-ph:wifi-high-fill',
   'event-logs': 'i-ph:list-bullets-fill',
-  update: 'i-ph:arrow-clockwise-fill',
   mcp: 'i-ph:hard-drives-bold',
 };
 
@@ -26,7 +25,6 @@ export const TAB_LABELS: Record<TabType, string> = {
   'service-status': 'Service Status',
   connection: 'Connection',
   'event-logs': 'Event Logs',
-  update: 'Updates',
   mcp: 'MCP Servers',
 };
 
@@ -41,7 +39,6 @@ export const TAB_DESCRIPTIONS: Record<TabType, string> = {
   'service-status': 'Monitor cloud LLM service status',
   connection: 'Check connection status and settings',
   'event-logs': 'View system events and logs',
-  update: 'Check for updates and release notes',
   mcp: 'Configure MCP (Model Context Protocol) servers',
 };
 
@@ -59,6 +56,4 @@ export const DEFAULT_TAB_CONFIG = [
   { id: 'settings', visible: true, window: 'user' as const, order: 9 },
   { id: 'service-status', visible: true, window: 'user' as const, order: 10 },
   { id: 'update', visible: true, window: 'user' as const, order: 11 },
-
-  // User Window Tabs (In dropdown, initially hidden)
 ];
diff --git a/app/components/@settings/core/types.ts b/app/components/@settings/core/types.ts
index dced29e..d4a518f 100644
--- a/app/components/@settings/core/types.ts
+++ b/app/components/@settings/core/types.ts
@@ -13,7 +13,6 @@ export type TabType =
   | 'service-status'
   | 'connection'
   | 'event-logs'
-  | 'update'
   | 'mcp';
 
 export type WindowType = 'user' | 'developer';
@@ -74,7 +73,6 @@ export const TAB_LABELS: Record<TabType, string> = {
   'service-status': 'Service Status',
   connection: 'Connections',
   'event-logs': 'Event Logs',
-  update: 'Updates',
   mcp: 'MCP Servers',
 };
 
diff --git a/app/components/@settings/tabs/update/UpdateTab.tsx b/app/components/@settings/tabs/update/UpdateTab.tsx
deleted file mode 100644
index 53c05d0..0000000
--- a/app/components/@settings/tabs/update/UpdateTab.tsx
+++ /dev/null
@@ -1,628 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { motion } from 'framer-motion';
-import { useSettings } from '~/lib/hooks/useSettings';
-import { logStore } from '~/lib/stores/logs';
-import { toast } from 'react-toastify';
-import { Dialog, DialogRoot, DialogTitle, DialogDescription, DialogButton } from '~/components/ui/Dialog';
-import { classNames } from '~/utils/classNames';
-import { Markdown } from '~/components/chat/Markdown';
-
-interface UpdateProgress {
-  stage: 'fetch' | 'pull' | 'install' | 'build' | 'complete';
-  message: string;
-  progress?: number;
-  error?: string;
-  details?: {
-    changedFiles?: string[];
-    additions?: number;
-    deletions?: number;
-    commitMessages?: string[];
-    totalSize?: string;
-    currentCommit?: string;
-    remoteCommit?: string;
-    updateReady?: boolean;
-    changelog?: string;
-    compareUrl?: string;
-  };
-}
-
-interface UpdateSettings {
-  autoUpdate: boolean;
-  notifyInApp: boolean;
-  checkInterval: number;
-}
-
-const ProgressBar = ({ progress }: { progress: number }) => (
-  <div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
-    <motion.div
-      className="h-full bg-blue-500"
-      initial={{ width: 0 }}
-      animate={{ width: `${progress}%` }}
-      transition={{ duration: 0.3 }}
-    />
-  </div>
-);
-
-const UpdateProgressDisplay = ({ progress }: { progress: UpdateProgress }) => (
-  <div className="mt-4 space-y-2">
-    <div className="flex justify-between items-center">
-      <span className="text-sm font-medium">{progress.message}</span>
-      <span className="text-sm text-gray-500">{progress.progress}%</span>
-    </div>
-    <ProgressBar progress={progress.progress || 0} />
-    {progress.details && (
-      <div className="mt-2 text-sm text-gray-600">
-        {progress.details.changedFiles && progress.details.changedFiles.length > 0 && (
-          <div className="mt-4">
-            <div className="font-medium mb-2">Changed Files:</div>
-            <div className="space-y-2">
-              {/* Group files by type */}
-              {['Modified', 'Added', 'Deleted'].map((type) => {
-                const filesOfType = progress.details?.changedFiles?.filter((file) => file.startsWith(type)) || [];
-
-                if (filesOfType.length === 0) {
-                  return null;
-                }
-
-                return (
-                  <div key={type} className="space-y-1">
-                    <div
-                      className={classNames('text-sm font-medium', {
-                        'text-blue-500': type === 'Modified',
-                        'text-green-500': type === 'Added',
-                        'text-red-500': type === 'Deleted',
-                      })}
-                    >
-                      {type} ({filesOfType.length})
-                    </div>
-                    <div className="pl-4 space-y-1">
-                      {filesOfType.map((file, index) => {
-                        const fileName = file.split(': ')[1];
-                        return (
-                          <div key={index} className="text-sm text-bolt-elements-textSecondary flex items-center gap-2">
-                            <div
-                              className={classNames('w-4 h-4', {
-                                'i-ph:pencil-simple': type === 'Modified',
-                                'i-ph:plus': type === 'Added',
-                                'i-ph:trash': type === 'Deleted',
-                                'text-blue-500': type === 'Modified',
-                                'text-green-500': type === 'Added',
-                                'text-red-500': type === 'Deleted',
-                              })}
-                            />
-                            <span className="font-mono text-xs">{fileName}</span>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        )}
-        {progress.details.totalSize && <div className="mt-1">Total size: {progress.details.totalSize}</div>}
-        {progress.details.additions !== undefined && progress.details.deletions !== undefined && (
-          <div className="mt-1">
-            Changes: <span className="text-green-600">+{progress.details.additions}</span>{' '}
-            <span className="text-red-600">-{progress.details.deletions}</span>
-          </div>
-        )}
-        {progress.details.currentCommit && progress.details.remoteCommit && (
-          <div className="mt-1">
-            Updating from {progress.details.currentCommit} to {progress.details.remoteCommit}
-          </div>
-        )}
-      </div>
-    )}
-  </div>
-);
-
-const UpdateTab = () => {
-  const { isLatestBranch } = useSettings();
-  const [isChecking, setIsChecking] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [updateSettings, setUpdateSettings] = useState<UpdateSettings>(() => {
-    const stored = localStorage.getItem('update_settings');
-    return stored
-      ? JSON.parse(stored)
-      : {
-          autoUpdate: false,
-          notifyInApp: true,
-          checkInterval: 24,
-        };
-  });
-  const [showUpdateDialog, setShowUpdateDialog] = useState(false);
-  const [updateProgress, setUpdateProgress] = useState<UpdateProgress | null>(null);
-
-  useEffect(() => {
-    localStorage.setItem('update_settings', JSON.stringify(updateSettings));
-  }, [updateSettings]);
-
-  const checkForUpdates = async () => {
-    console.log('Starting update check...');
-    setIsChecking(true);
-    setError(null);
-    setUpdateProgress(null);
-
-    try {
-      const branchToCheck = isLatestBranch ? 'main' : 'stable';
-
-      // Start the update check with streaming progress
-      const response = await fetch('/api/update', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          branch: branchToCheck,
-          autoUpdate: updateSettings.autoUpdate,
-        }),
-      });
-
-      if (!response.ok) {
-        throw new Error(`Update check failed: ${response.statusText}`);
-      }
-
-      const reader = response.body?.getReader();
-
-      if (!reader) {
-        throw new Error('No response stream available');
-      }
-
-      // Read the stream
-      while (true) {
-        const { done, value } = await reader.read();
-
-        if (done) {
-          break;
-        }
-
-        // Convert the chunk to text and parse the JSON
-        const chunk = new TextDecoder().decode(value);
-        const lines = chunk.split('\n').filter(Boolean);
-
-        for (const line of lines) {
-          try {
-            const progress = JSON.parse(line) as UpdateProgress;
-            setUpdateProgress(progress);
-
-            if (progress.error) {
-              setError(progress.error);
-            }
-
-            // If we're done, update the UI accordingly
-            if (progress.stage === 'complete') {
-              setIsChecking(false);
-
-              if (!progress.error) {
-                // Update check completed
-                toast.success('Update check completed');
-
-                // Show update dialog only if there are changes and auto-update is disabled
-                if (progress.details?.changedFiles?.length && progress.details.updateReady) {
-                  setShowUpdateDialog(true);
-                }
-              }
-            }
-          } catch (e) {
-            console.error('Error parsing progress update:', e);
-          }
-        }
-      }
-    } catch (error) {
-      setError(error instanceof Error ? error.message : 'Unknown error occurred');
-      logStore.logWarning('Update Check Failed', {
-        type: 'update',
-        message: error instanceof Error ? error.message : 'Unknown error occurred',
-      });
-    } finally {
-      setIsChecking(false);
-    }
-  };
-
-  const handleUpdate = async () => {
-    setShowUpdateDialog(false);
-
-    try {
-      const branchToCheck = isLatestBranch ? 'main' : 'stable';
-
-      // Start the update with autoUpdate set to true to force the update
-      const response = await fetch('/api/update', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          branch: branchToCheck,
-          autoUpdate: true,
-        }),
-      });
-
-      if (!response.ok) {
-        throw new Error(`Update failed: ${response.statusText}`);
-      }
-
-      // Handle the update progress stream
-      const reader = response.body?.getReader();
-
-      if (!reader) {
-        throw new Error('No response stream available');
-      }
-
-      while (true) {
-        const { done, value } = await reader.read();
-
-        if (done) {
-          break;
-        }
-
-        const chunk = new TextDecoder().decode(value);
-        const lines = chunk.split('\n').filter(Boolean);
-
-        for (const line of lines) {
-          try {
-            const progress = JSON.parse(line) as UpdateProgress;
-            setUpdateProgress(progress);
-
-            if (progress.error) {
-              setError(progress.error);
-              toast.error('Update failed');
-            }
-
-            if (progress.stage === 'complete' && !progress.error) {
-              toast.success('Update completed successfully');
-            }
-          } catch (e) {
-            console.error('Error parsing update progress:', e);
-          }
-        }
-      }
-    } catch (error) {
-      setError(error instanceof Error ? error.message : 'Unknown error occurred');
-      toast.error('Update failed');
-    }
-  };
-
-  return (
-    <div className="flex flex-col gap-6">
-      <motion.div
-        className="flex items-center gap-3"
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3 }}
-      >
-        <div className="i-ph:arrow-circle-up text-xl text-purple-500" />
-        <div>
-          <h3 className="text-lg font-medium text-bolt-elements-textPrimary">Updates</h3>
-          <p className="text-sm text-bolt-elements-textSecondary">Check for and manage application updates</p>
-        </div>
-      </motion.div>
-
-      {/* Update Settings Card */}
-      <motion.div
-        className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]"
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3, delay: 0.1 }}
-      >
-        <div className="flex items-center gap-3 mb-6">
-          <div className="i-ph:gear text-purple-500 w-5 h-5" />
-          <h3 className="text-lg font-medium text-bolt-elements-textPrimary">Update Settings</h3>
-        </div>
-
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <span className="text-sm text-bolt-elements-textPrimary">Automatic Updates</span>
-              <p className="text-xs text-bolt-elements-textSecondary">
-                Automatically check and apply updates when available
-              </p>
-            </div>
-            <button
-              onClick={() => setUpdateSettings((prev) => ({ ...prev, autoUpdate: !prev.autoUpdate }))}
-              className={classNames(
-                'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
-                updateSettings.autoUpdate ? 'bg-purple-500' : 'bg-gray-200 dark:bg-gray-700',
-              )}
-            >
-              <span
-                className={classNames(
-                  'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
-                  updateSettings.autoUpdate ? 'translate-x-6' : 'translate-x-1',
-                )}
-              />
-            </button>
-          </div>
-
-          <div className="flex items-center justify-between">
-            <div>
-              <span className="text-sm text-bolt-elements-textPrimary">In-App Notifications</span>
-              <p className="text-xs text-bolt-elements-textSecondary">Show notifications when updates are available</p>
-            </div>
-            <button
-              onClick={() => setUpdateSettings((prev) => ({ ...prev, notifyInApp: !prev.notifyInApp }))}
-              className={classNames(
-                'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
-                updateSettings.notifyInApp ? 'bg-purple-500' : 'bg-gray-200 dark:bg-gray-700',
-              )}
-            >
-              <span
-                className={classNames(
-                  'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
-                  updateSettings.notifyInApp ? 'translate-x-6' : 'translate-x-1',
-                )}
-              />
-            </button>
-          </div>
-
-          <div className="flex items-center justify-between">
-            <div>
-              <span className="text-sm text-bolt-elements-textPrimary">Check Interval</span>
-              <p className="text-xs text-bolt-elements-textSecondary">How often to check for updates</p>
-            </div>
-            <select
-              value={updateSettings.checkInterval}
-              onChange={(e) => setUpdateSettings((prev) => ({ ...prev, checkInterval: Number(e.target.value) }))}
-              className={classNames(
-                'px-3 py-2 rounded-lg text-sm',
-                'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
-                'border border-[#E5E5E5] dark:border-[#1A1A1A]',
-                'text-bolt-elements-textPrimary',
-                'hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
-                'transition-colors duration-200',
-              )}
-            >
-              <option value="6">6 hours</option>
-              <option value="12">12 hours</option>
-              <option value="24">24 hours</option>
-              <option value="48">48 hours</option>
-            </select>
-          </div>
-        </div>
-      </motion.div>
-
-      {/* Update Status Card */}
-      <motion.div
-        className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]"
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3, delay: 0.2 }}
-      >
-        <div className="flex items-center justify-between mb-6">
-          <div className="flex items-center gap-3">
-            <div className="i-ph:arrows-clockwise text-purple-500 w-5 h-5" />
-            <h3 className="text-lg font-medium text-bolt-elements-textPrimary">Update Status</h3>
-          </div>
-          <div className="flex items-center gap-2">
-            {updateProgress?.details?.updateReady && !updateSettings.autoUpdate && (
-              <button
-                onClick={handleUpdate}
-                className={classNames(
-                  'flex items-center gap-2 px-4 py-2 rounded-lg text-sm',
-                  'bg-purple-500 text-white',
-                  'hover:bg-purple-600',
-                  'transition-colors duration-200',
-                )}
-              >
-                <div className="i-ph:arrow-circle-up w-4 h-4" />
-                Update Now
-              </button>
-            )}
-            <button
-              onClick={() => {
-                setError(null);
-                checkForUpdates();
-              }}
-              className={classNames(
-                'flex items-center gap-2 px-4 py-2 rounded-lg text-sm',
-                'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
-                'hover:bg-purple-500/10 hover:text-purple-500',
-                'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
-                'text-bolt-elements-textPrimary',
-                'transition-colors duration-200',
-                'disabled:opacity-50 disabled:cursor-not-allowed',
-              )}
-              disabled={isChecking}
-            >
-              {isChecking ? (
-                <div className="flex items-center gap-2">
-                  <motion.div
-                    animate={{ rotate: 360 }}
-                    transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
-                    className="i-ph:arrows-clockwise w-4 h-4"
-                  />
-                  Checking...
-                </div>
-              ) : (
-                <>
-                  <div className="i-ph:arrows-clockwise w-4 h-4" />
-                  Check for Updates
-                </>
-              )}
-            </button>
-          </div>
-        </div>
-
-        {/* Show progress information */}
-        {updateProgress && <UpdateProgressDisplay progress={updateProgress} />}
-
-        {error && <div className="mt-4 p-4 bg-red-100 text-red-700 rounded">{error}</div>}
-
-        {/* Show update source information */}
-        {updateProgress?.details?.currentCommit && updateProgress?.details?.remoteCommit && (
-          <div className="mt-4 text-sm text-bolt-elements-textSecondary">
-            <div className="flex items-center justify-between">
-              <div>
-                <p>
-                  Updates are fetched from: <span className="font-mono">stackblitz-labs/bolt.diy</span> (
-                  {isLatestBranch ? 'main' : 'stable'} branch)
-                </p>
-                <p className="mt-1">
-                  Current version: <span className="font-mono">{updateProgress.details.currentCommit}</span>
-                  <span className="mx-2">→</span>
-                  Latest version: <span className="font-mono">{updateProgress.details.remoteCommit}</span>
-                </p>
-              </div>
-              {updateProgress?.details?.compareUrl && (
-                <a
-                  href={updateProgress.details.compareUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={classNames(
-                    'flex items-center gap-2 px-4 py-2 rounded-lg text-sm',
-                    'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
-                    'hover:bg-purple-500/10 hover:text-purple-500',
-                    'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
-                    'text-bolt-elements-textPrimary',
-                    'transition-colors duration-200',
-                    'w-fit',
-                  )}
-                >
-                  <div className="i-ph:github-logo w-4 h-4" />
-                  View Changes on GitHub
-                </a>
-              )}
-            </div>
-            {updateProgress?.details?.additions !== undefined && updateProgress?.details?.deletions !== undefined && (
-              <div className="mt-2 flex items-center gap-2">
-                <div className="i-ph:git-diff text-purple-500 w-4 h-4" />
-                Changes: <span className="text-green-600">+{updateProgress.details.additions}</span>{' '}
-                <span className="text-red-600">-{updateProgress.details.deletions}</span>
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Add this before the changed files section */}
-        {updateProgress?.details?.changelog && (
-          <div className="mb-6">
-            <div className="flex items-center gap-2 mb-2">
-              <div className="i-ph:scroll text-purple-500 w-5 h-5" />
-              <p className="font-medium">Changelog</p>
-            </div>
-            <div className="bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-lg p-4 overflow-auto max-h-[300px]">
-              <div className="prose dark:prose-invert prose-sm max-w-none">
-                <Markdown>{updateProgress.details.changelog}</Markdown>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Add this in the update status card, after the commit info */}
-        {updateProgress?.details?.compareUrl && (
-          <div className="mt-4">
-            <a
-              href={updateProgress.details.compareUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className={classNames(
-                'flex items-center gap-2 px-4 py-2 rounded-lg text-sm',
-                'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
-                'hover:bg-purple-500/10 hover:text-purple-500',
-                'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
-                'text-bolt-elements-textPrimary',
-                'transition-colors duration-200',
-                'w-fit',
-              )}
-            >
-              <div className="i-ph:github-logo w-4 h-4" />
-              View Changes on GitHub
-            </a>
-          </div>
-        )}
-
-        {updateProgress?.details?.commitMessages && updateProgress.details.commitMessages.length > 0 && (
-          <div className="mb-6">
-            <p className="font-medium mb-2">Changes in this Update:</p>
-            <div className="bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-lg p-4 overflow-auto max-h-[400px]">
-              <div className="prose dark:prose-invert prose-sm max-w-none">
-                {updateProgress.details.commitMessages.map((section, index) => (
-                  <Markdown key={index}>{section}</Markdown>
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
-      </motion.div>
-
-      {/* Update dialog */}
-      <DialogRoot open={showUpdateDialog} onOpenChange={setShowUpdateDialog}>
-        <Dialog>
-          <DialogTitle>Update Available</DialogTitle>
-          <DialogDescription>
-            <div className="mt-4">
-              <p className="text-sm text-bolt-elements-textSecondary mb-4">
-                A new version is available from <span className="font-mono">stackblitz-labs/bolt.diy</span> (
-                {isLatestBranch ? 'main' : 'stable'} branch)
-              </p>
-
-              {updateProgress?.details?.compareUrl && (
-                <div className="mb-6">
-                  <a
-                    href={updateProgress.details.compareUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className={classNames(
-                      'flex items-center gap-2 px-4 py-2 rounded-lg text-sm',
-                      'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
-                      'hover:bg-purple-500/10 hover:text-purple-500',
-                      'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
-                      'text-bolt-elements-textPrimary',
-                      'transition-colors duration-200',
-                      'w-fit',
-                    )}
-                  >
-                    <div className="i-ph:github-logo w-4 h-4" />
-                    View Changes on GitHub
-                  </a>
-                </div>
-              )}
-
-              {updateProgress?.details?.commitMessages && updateProgress.details.commitMessages.length > 0 && (
-                <div className="mb-6">
-                  <p className="font-medium mb-2">Commit Messages:</p>
-                  <div className="bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-lg p-3 space-y-2">
-                    {updateProgress.details.commitMessages.map((msg, index) => (
-                      <div key={index} className="text-sm text-bolt-elements-textSecondary flex items-start gap-2">
-                        <div className="i-ph:git-commit text-purple-500 w-4 h-4 mt-0.5 flex-shrink-0" />
-                        <span>{msg}</span>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {updateProgress?.details?.totalSize && (
-                <div className="flex items-center gap-4 text-sm text-bolt-elements-textSecondary">
-                  <div className="flex items-center gap-2">
-                    <div className="i-ph:file text-purple-500 w-4 h-4" />
-                    Total size: {updateProgress.details.totalSize}
-                  </div>
-                  {updateProgress?.details?.additions !== undefined &&
-                    updateProgress?.details?.deletions !== undefined && (
-                      <div className="flex items-center gap-2">
-                        <div className="i-ph:git-diff text-purple-500 w-4 h-4" />
-                        Changes: <span className="text-green-600">+{updateProgress.details.additions}</span>{' '}
-                        <span className="text-red-600">-{updateProgress.details.deletions}</span>
-                      </div>
-                    )}
-                </div>
-              )}
-            </div>
-          </DialogDescription>
-          <div className="flex justify-end gap-2 mt-6">
-            <DialogButton type="secondary" onClick={() => setShowUpdateDialog(false)}>
-              Cancel
-            </DialogButton>
-            <DialogButton type="primary" onClick={handleUpdate}>
-              Update Now
-            </DialogButton>
-          </div>
-        </Dialog>
-      </DialogRoot>
-    </div>
-  );
-};
-
-export default UpdateTab;
diff --git a/app/lib/hooks/index.ts b/app/lib/hooks/index.ts
index 648de4a..4fd4f8f 100644
--- a/app/lib/hooks/index.ts
+++ b/app/lib/hooks/index.ts
@@ -4,7 +4,6 @@ export * from './useShortcuts';
 export * from './StickToBottom';
 export * from './useEditChatDescription';
 export { default } from './useViewport';
-export { useUpdateCheck } from './useUpdateCheck';
 export { useFeatures } from './useFeatures';
 export { useNotifications } from './useNotifications';
 export { useConnectionStatus } from './useConnectionStatus';
diff --git a/app/lib/hooks/useUpdateCheck.ts b/app/lib/hooks/useUpdateCheck.ts
deleted file mode 100644
index f53a794..0000000
--- a/app/lib/hooks/useUpdateCheck.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useState, useEffect } from 'react';
-import { checkForUpdates, acknowledgeUpdate } from '~/lib/api/updates';
-
-const LAST_ACKNOWLEDGED_VERSION_KEY = 'bolt_last_acknowledged_version';
-
-export const useUpdateCheck = () => {
-  const [hasUpdate, setHasUpdate] = useState(false);
-  const [currentVersion, setCurrentVersion] = useState<string>('');
-  const [lastAcknowledgedVersion, setLastAcknowledgedVersion] = useState<string | null>(() => {
-    try {
-      return localStorage.getItem(LAST_ACKNOWLEDGED_VERSION_KEY);
-    } catch {
-      return null;
-    }
-  });
-
-  useEffect(() => {
-    const checkUpdate = async () => {
-      try {
-        const { available, version } = await checkForUpdates();
-        setCurrentVersion(version);
-
-        // Only show update if it's a new version and hasn't been acknowledged
-        setHasUpdate(available && version !== lastAcknowledgedVersion);
-      } catch (error) {
-        console.error('Failed to check for updates:', error);
-      }
-    };
-
-    // Check immediately and then every 30 minutes
-    checkUpdate();
-
-    const interval = setInterval(checkUpdate, 30 * 60 * 1000);
-
-    return () => clearInterval(interval);
-  }, [lastAcknowledgedVersion]);
-
-  const handleAcknowledgeUpdate = async () => {
-    try {
-      const { version } = await checkForUpdates();
-      await acknowledgeUpdate(version);
-
-      // Store in localStorage
-      try {
-        localStorage.setItem(LAST_ACKNOWLEDGED_VERSION_KEY, version);
-      } catch (error) {
-        console.error('Failed to persist acknowledged version:', error);
-      }
-
-      setLastAcknowledgedVersion(version);
-      setHasUpdate(false);
-    } catch (error) {
-      console.error('Failed to acknowledge update:', error);
-    }
-  };
-
-  return { hasUpdate, currentVersion, acknowledgeUpdate: handleAcknowledgeUpdate };
-};
diff --git a/vite.config.ts b/vite.config.ts
index a1d61ff..65d4352 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,72 +5,9 @@ import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import { optimizeCssModules } from 'vite-plugin-optimize-css-modules';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import * as dotenv from 'dotenv';
-import { execSync } from 'child_process';
-import { readFileSync } from 'fs';
-import { join } from 'path';
 
 dotenv.config();
 
-// Get detailed git info with fallbacks
-const getGitInfo = () => {
-  try {
-    return {
-      commitHash: execSync('git rev-parse --short HEAD').toString().trim(),
-      branch: execSync('git rev-parse --abbrev-ref HEAD').toString().trim(),
-      commitTime: execSync('git log -1 --format=%cd').toString().trim(),
-      author: execSync('git log -1 --format=%an').toString().trim(),
-      email: execSync('git log -1 --format=%ae').toString().trim(),
-      remoteUrl: execSync('git config --get remote.origin.url').toString().trim(),
-      repoName: execSync('git config --get remote.origin.url')
-        .toString()
-        .trim()
-        .replace(/^.*github.com[:/]/, '')
-        .replace(/\.git$/, ''),
-    };
-  } catch {
-    return {
-      commitHash: 'no-git-info',
-      branch: 'unknown',
-      commitTime: 'unknown',
-      author: 'unknown',
-      email: 'unknown',
-      remoteUrl: 'unknown',
-      repoName: 'unknown',
-    };
-  }
-};
-
-// Read package.json with detailed dependency info
-const getPackageJson = () => {
-  try {
-    const pkgPath = join(process.cwd(), 'package.json');
-    const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
-
-    return {
-      name: pkg.name,
-      description: pkg.description,
-      license: pkg.license,
-      dependencies: pkg.dependencies || {},
-      devDependencies: pkg.devDependencies || {},
-      peerDependencies: pkg.peerDependencies || {},
-      optionalDependencies: pkg.optionalDependencies || {},
-    };
-  } catch {
-    return {
-      name: 'bolt.diy',
-      description: 'A DIY LLM interface',
-      license: 'MIT',
-      dependencies: {},
-      devDependencies: {},
-      peerDependencies: {},
-      optionalDependencies: {},
-    };
-  }
-};
-
-const pkg = getPackageJson();
-const gitInfo = getGitInfo();
-
 export default defineConfig((config) => {
   return {
     define: {

From 56d43e66363bf6ebde96b84039991bc041bd2a02 Mon Sep 17 00:00:00 2001
From: xKevIsDev <zenner404@gmail.com>
Date: Wed, 9 Jul 2025 00:24:07 +0100
Subject: [PATCH 07/11] feat: add SolidJS starter template and update icon
 files

- Introduced a new SolidJS starter template with relevant metadata including description, tags, and GitHub repository link.
- Updated the FrameworkLink component to enhance the hover effect with grayscale transition.
- Replaced multiple SVG icons with updated versions for Angular, Astro, Qwik, React, Remix, Slidev, Svelte, TypeScript, Vite, and Vue, ensuring improved visuals and consistency across the application.
---
 app/components/chat/StarterTemplates.tsx |  2 +-
 app/utils/constants.ts                   |  8 ++++
 icons/angular.svg                        |  2 +-
 icons/astro.svg                          |  9 +++-
 icons/qwik.svg                           |  2 +-
 icons/react.svg                          |  2 +-
 icons/remix.svg                          | 25 +++++++++-
 icons/slidev.svg                         | 61 +++++++++++++++++++++++-
 icons/solidjs.svg                        |  1 +
 icons/svelte.svg                         |  2 +-
 icons/typescript.svg                     |  2 +-
 icons/vite.svg                           |  2 +-
 icons/vue.svg                            |  2 +-
 13 files changed, 109 insertions(+), 11 deletions(-)
 create mode 100644 icons/solidjs.svg

diff --git a/app/components/chat/StarterTemplates.tsx b/app/components/chat/StarterTemplates.tsx
index 20b666e..5d9af50 100644
--- a/app/components/chat/StarterTemplates.tsx
+++ b/app/components/chat/StarterTemplates.tsx
@@ -14,7 +14,7 @@ const FrameworkLink: React.FC<FrameworkLinkProps> = ({ template }) => (
     className="items-center justify-center"
   >
     <div
-      className={`inline-block ${template.icon} w-8 h-8 text-4xl transition-theme opacity-25 hover:opacity-100 hover:text-purple-500 dark:text-white dark:opacity-50 dark:hover:opacity-100 dark:hover:text-purple-400 transition-all`}
+      className={`inline-block ${template.icon} w-8 h-8 text-4xl transition-theme hover:text-purple-500 dark:text-white dark:opacity-50 dark:hover:opacity-100 dark:hover:text-purple-400 transition-all grayscale hover:grayscale-0 transition`}
       title={template.label}
     />
   </a>
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 403577d..3b5a687 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -136,4 +136,12 @@ export const STARTER_TEMPLATES: Template[] = [
     tags: ['angular', 'typescript', 'frontend', 'spa'],
     icon: 'i-bolt:angular',
   },
+  {
+    name: 'SolidJS',
+    label: 'SolidJS Tailwind',
+    description: 'Lightweight SolidJS starter template for building fast static websites',
+    githubRepo: 'xKevIsDev/solidjs-ts-tw',
+    tags: ['solidjs'],
+    icon: 'i-bolt:solidjs',
+  },
 ];
diff --git a/icons/angular.svg b/icons/angular.svg
index 0f39575..2962419 100644
--- a/icons/angular.svg
+++ b/icons/angular.svg
@@ -1 +1 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='27' height='28' fill='none'><g clip-path='url(#a)'><path fill='#7B7B7B' d='m26.45 4.668-.955 14.998L16.363 0zM20.125 24.06l-6.9 3.937-6.9-3.937 1.403-3.401h10.994zm-6.9-16.596 3.616 8.79H9.609zm-12.28 12.2L0 4.669 10.087 0z'/></g><defs><clipPath id='a'><path fill='#fff' d='M0 0h26.45v28H0z'/></clipPath></defs></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#B3B3B3" d="M63.81 1.026L4.553 21.88l9.363 77.637 49.957 27.457 50.214-27.828 9.36-77.635z"/><path fill="#A6120D" d="M117.536 25.998L63.672 7.629v112.785l45.141-24.983z"/><path fill="#DD1B16" d="M11.201 26.329l8.026 69.434 44.444 24.651V7.627z"/><path fill="#F2F2F2" d="M78.499 67.67l-14.827 6.934H48.044l-7.347 18.374-13.663.254 36.638-81.508L78.499 67.67zm-1.434-3.491L63.77 37.858 52.864 63.726h10.807l13.394.453z"/><path fill="#B3B3B3" d="M63.671 11.724l.098 26.134 12.375 25.888H63.698l-.027 10.841 17.209.017 8.042 18.63 13.074.242z"/></svg>
\ No newline at end of file
diff --git a/icons/astro.svg b/icons/astro.svg
index cb21d98..43d6484 100644
--- a/icons/astro.svg
+++ b/icons/astro.svg
@@ -1 +1,8 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none'><path fill='#fff' d='M10.22 23.848c-1.265-1.156-1.635-3.586-1.108-5.346.914 1.11 2.18 1.461 3.492 1.66 2.024.306 4.013.191 5.893-.734.216-.106.415-.247.65-.39.176.512.222 1.03.16 1.555-.15 1.282-.787 2.271-1.801 3.022-.406.3-.835.568-1.254.85-1.286.87-1.634 1.89-1.151 3.373l.048.161a3.383 3.383 0 0 1-1.503-1.285 3.612 3.612 0 0 1-.58-1.962c-.004-.346-.004-.695-.05-1.036-.114-.832-.505-1.204-1.24-1.226-.755-.022-1.352.445-1.51 1.18-.013.056-.03.112-.048.177h.002Z'/><path fill='#7B7B7B' d='M3 18.21s3.746-1.825 7.502-1.825l2.832-8.765c.106-.424.415-.712.765-.712.35 0 .659.288.765.712l2.832 8.765c4.449 0 7.502 1.825 7.502 1.825L18.823.842C18.64.33 18.333 0 17.917 0h-7.635c-.416 0-.712.33-.907.842L3 18.21Z'/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="366px" viewBox="0 0 256 366" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <title>astro</title>
+    <g>
+        <path d="M182.021899,9.14729513 C185.003554,12.8489818 186.524039,17.8439599 189.565008,27.8338751 L256,246.07324 C231.437035,233.330949 204.734675,224.140955 176.574007,219.182711 L133.318122,73.008385 C132.610445,70.6165977 130.413371,68.9758488 127.919318,68.9758488 C125.41872,68.9758488 123.217965,70.625188 122.515605,73.0251566 L79.7837287,219.10908 C51.4921611,224.044826 24.6679819,233.251591 0,246.040106 L66.760821,27.7833559 C69.8111986,17.8106213 71.336592,12.8241926 74.3186562,9.1293373 C76.9509722,5.86739262 80.3752328,3.334082 84.2645972,1.77078902 C88.6701983,0 93.8845156,0 104.313559,0 L151.997135,0 C162.439677,0 167.660949,0 172.07064,1.77448285 C175.963277,3.34101561 179.389583,5.87945996 182.021899,9.14729513 Z" fill="#7B7B7B"></path>
+        <path d="M189.971616,256.459332 C179.019791,265.824405 157.15991,272.211095 131.980489,272.211095 C101.075831,272.211095 75.1731874,262.589949 68.2997134,249.65049 C65.8424761,257.066381 65.2914691,265.553606 65.2914691,270.975318 C65.2914691,270.975318 63.6724005,297.597911 82.1890151,316.114934 C82.1890151,306.499925 89.9836974,298.705652 99.598298,298.705652 C116.078191,298.705652 116.059783,313.083374 116.044648,324.748195 C116.044239,325.097534 116.04383,325.444828 116.04383,325.789258 C116.04383,343.494293 126.864755,358.671732 142.253679,365.069057 C139.955158,360.341524 138.665794,355.032714 138.665794,349.422424 C138.665794,332.536332 148.579419,326.249044 160.101068,318.941555 C169.268154,313.127552 179.453806,306.668049 186.473315,293.709774 C190.13565,286.948792 192.215323,279.204833 192.215323,270.975318 C192.215323,265.914399 191.429105,261.037149 189.971616,256.459332 Z" fill="#FF5D01"></path>
+    </g>
+</svg>
diff --git a/icons/qwik.svg b/icons/qwik.svg
index 040eec2..04c592b 100644
--- a/icons/qwik.svg
+++ b/icons/qwik.svg
@@ -1 +1 @@
-<svg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M24.8544 29.4143L19.6799 24.2665L19.6069 24.2793V24.2248L8.6028 13.3425L11.3199 10.7239L9.72188 1.56836L2.16084 10.9489C0.877089 12.2454 0.63008 14.3653 1.56013 15.9216L6.28578 23.7656C7.00825 24.9681 8.14357 25.7416 9.72884 25.6848C13.0849 25.5654 14.56 25.5654 14.56 25.5654L24.8521 29.412L24.8544 29.4155V29.4143Z' fill='#848484'/><path d='M27.4114 14.9893C28.1559 13.4527 28.4227 12.1087 27.6874 10.7576L26.6414 8.83259L26.0987 7.84455L25.8876 7.45954L25.8679 7.48158L23.0221 2.54487C22.3043 1.29591 20.9683 0.532847 19.5292 0.549082L17.0336 0.619822L9.58386 0.639537C8.17719 0.648814 6.87952 1.3968 6.16632 2.60865L1.64014 11.5984L9.74042 1.52088L20.3665 13.2057L18.4646 15.1331L19.5999 24.2747L19.6161 24.2539V24.2805H19.5999L19.6219 24.3026L20.5079 25.1654L24.7941 29.3518C24.9738 29.5257 25.2661 29.317 25.1466 29.1024L22.4968 23.8886' fill='#B4B4B4'/><path d='M20.3918 13.1765L9.73798 1.55078L11.2513 10.6542L8.54004 13.2855L19.5801 24.2571L18.5851 15.149L20.3918 13.1799V13.1765Z' fill='black'/></svg>
\ No newline at end of file
+<svg height="2500" preserveAspectRatio="xMidYMid" viewBox="-3.523 -.15 262.378 275.068" width="2336" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0" stop-color="#4340c4"/><stop offset=".12" stop-color="#4642c8"/><stop offset="1" stop-color="#594ee4"/></linearGradient><linearGradient id="b" x1="22.347%" x2="77.517%" xlink:href="#a" y1="49.545%" y2="50.388%"/><linearGradient id="c" x1="38.874%" x2="60.879%" y1="49.845%" y2="50.385%"><stop offset="0" stop-color="#4340c4"/><stop offset=".74" stop-color="#534adb"/><stop offset="1" stop-color="#594ee4"/></linearGradient><linearGradient id="d" x1="-.004%" x2="100.123%" y1="49.529%" y2="50.223%"><stop offset="0" stop-color="#4340c4"/><stop offset=".23" stop-color="#4340c4"/><stop offset=".6" stop-color="#4f48d5"/><stop offset="1" stop-color="#594ee4"/></linearGradient><linearGradient id="e" x1="35.4%" x2="64.895%" y1="49.459%" y2="50.085%"><stop offset="0" stop-color="#0080ff"/><stop offset="1" stop-color="#00b9ff"/></linearGradient><linearGradient id="f" x1="-.243%" x2="100.411%" y1="49.366%" y2="50.467%"><stop offset="0" stop-color="#0080ff"/><stop offset=".17" stop-color="#008bff"/><stop offset=".47" stop-color="#00a7ff"/><stop offset=".63" stop-color="#00b9ff"/><stop offset="1" stop-color="#00b9ff"/></linearGradient><linearGradient id="g" x1="-.125%" x2="100.225%" y1="49.627%" y2="50.101%"><stop offset="0" stop-color="#00b9ff"/><stop offset=".3" stop-color="#0080ff"/><stop offset=".6" stop-color="#2d67f1"/><stop offset=".86" stop-color="#4d55e8"/><stop offset="1" stop-color="#594ee4"/></linearGradient><linearGradient id="h" x1="4.557%" x2="99.354%" xlink:href="#a" y1="50.184%" y2="51.298%"/><path d="m175.05 236.86 25.163-15.072 49.298-86.93-76.287 89.098z" fill="url(#b)"/><path d="m242.337 80.408-4.926-9.4-1.932-3.663-.2.196-25.818-47.015c-6.477-11.876-18.83-19.295-32.451-19.452l-25.074.206 36.214 113.52-23.958 23.331 8.924 86.245 73.769-84.021c10.005-11.587 11.97-28.09 4.92-41.646l-9.466-18.302z" fill="url(#c)"/><path d="m201.113 72.256-43.18-70.907-74.523-1.346c-13.245-.153-25.58 6.57-32.53 17.867l-43.87 83.877 34.443-33.334 43.248-60.057 97.894 112.153 18.3-18.626c8.397-8.142 5.54-19.558.22-29.625z" fill="url(#d)"/><path d="m97.784 95.26-13.262-86.464-73.148 88.03c-12.328 11.935-14.897 30.662-6.419 45.49l42.98 74.727c6.553 11.464 18.755 18.577 32.024 18.729l42.945.49-51.444-116.655z" fill="url(#e)"/><path d="m173.227 223.9-101.847-104.878-13.196 12.59c-10.812 10.248-11.106 27.332-.728 37.921l43.99 66.384 70.65.907 1.127-12.926z" fill="url(#f)"/><path d="m101.584 235.903 72.292-11.6 47.704 49.465z" fill="url(#g)"/><path d="m173.111 224.483 27.168-3.457 24.096 49.915c1.06 2.06-1.719 3.977-3.373 2.302z" fill="url(#h)"/><path d="m182.708 120.058-98.028-111.458 12.502 85.958-26.022 24.222 101.772 105.372-7.595-85.905 17.37-18.192z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/icons/react.svg b/icons/react.svg
index 22c1d57..9af92b9 100644
--- a/icons/react.svg
+++ b/icons/react.svg
@@ -1 +1 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none'><path fill='#7B7B7B' d='M26.573 13.944c0-1.628-2.039-3.17-5.164-4.127.721-3.186.4-5.72-1.012-6.532a2.196 2.196 0 0 0-1.122-.28v1.117c.23 0 .416.045.571.13.681.39.977 1.878.746 3.792-.055.47-.145.966-.255 1.472a24.273 24.273 0 0 0-3.18-.546 24.425 24.425 0 0 0-2.084-2.504c1.633-1.518 3.165-2.349 4.207-2.349V3c-1.377 0-3.18.982-5.004 2.685C12.453 3.992 10.65 3.02 9.273 3.02v1.117c1.036 0 2.574.826 4.207 2.334a23.639 23.639 0 0 0-2.069 2.5c-1.132.12-2.203.305-3.185.55-.115-.5-.2-.986-.26-1.452-.236-1.914.054-3.401.73-3.797.15-.09.346-.13.577-.13V3.025c-.421 0-.802.09-1.132.28-1.408.812-1.723 3.341-.997 6.517C4.029 10.784 2 12.322 2 13.944c0 1.628 2.039 3.17 5.164 4.127-.721 3.186-.4 5.72 1.012 6.532.325.19.706.28 1.127.28 1.377 0 3.18-.982 5.003-2.685 1.824 1.693 3.627 2.665 5.004 2.665.42 0 .802-.09 1.132-.28 1.407-.812 1.723-3.341.997-6.517 3.105-.956 5.134-2.5 5.134-4.122Zm-6.522-3.34a22.533 22.533 0 0 1-.676 1.978 27.086 27.086 0 0 0-1.377-2.374c.711.105 1.397.235 2.053.395Zm-2.294 5.334a26.71 26.71 0 0 1-1.207 1.913 26.066 26.066 0 0 1-4.518.005 26.128 26.128 0 0 1-2.254-3.897 26.685 26.685 0 0 1 2.244-3.912 26.051 26.051 0 0 1 4.518-.005 26.117 26.117 0 0 1 2.254 3.897 28.091 28.091 0 0 1-1.037 1.998Zm1.618-.652c.27.672.501 1.343.691 1.994-.656.16-1.347.295-2.063.4a27.72 27.72 0 0 0 1.372-2.394Zm-5.079 5.345a20.648 20.648 0 0 1-1.392-1.603c.45.02.912.035 1.377.035.471 0 .937-.01 1.393-.035-.451.586-.917 1.122-1.378 1.603Zm-3.726-2.95a22.6 22.6 0 0 1-2.054-.396c.186-.646.416-1.312.677-1.979.205.401.42.802.656 1.203.235.4.476.79.72 1.172ZM14.27 7.257c.466.481.932 1.017 1.393 1.603-.451-.02-.912-.035-1.378-.035-.47 0-.936.01-1.392.035.45-.586.916-1.122 1.377-1.603Zm-3.706 2.95a27.624 27.624 0 0 0-1.372 2.39c-.271-.671-.501-1.343-.692-1.994a24.32 24.32 0 0 1 2.064-.395Zm-4.533 6.271c-1.773-.756-2.92-1.748-2.92-2.534 0-.786 1.147-1.783 2.92-2.534.43-.186.902-.351 1.387-.506.286.982.662 2.003 1.127 3.05a23.715 23.715 0 0 0-1.112 3.035 15.23 15.23 0 0 1-1.402-.51Zm2.695 7.158c-.681-.39-.977-1.878-.747-3.792.055-.47.146-.966.256-1.472.982.24 2.053.425 3.18.546a24.43 24.43 0 0 0 2.084 2.504c-1.633 1.518-3.165 2.35-4.207 2.35a1.195 1.195 0 0 1-.566-.136Zm11.88-3.817c.236 1.914-.055 3.401-.73 3.797-.151.09-.346.13-.577.13-1.037 0-2.574-.826-4.207-2.334a23.668 23.668 0 0 0 2.068-2.5 23.393 23.393 0 0 0 3.186-.55c.115.506.205.992.26 1.457Zm1.929-3.34c-.431.185-.902.35-1.388.505a24.059 24.059 0 0 0-1.127-3.05c.461-1.042.832-2.058 1.112-3.035.496.155.967.325 1.408.51 1.773.757 2.92 1.749 2.92 2.535-.005.786-1.152 1.783-2.925 2.534Z'/><path fill='#7B7B7B' d='M14.281 16.236a2.289 2.289 0 1 0 0-4.578 2.289 2.289 0 0 0 0 4.578Z'/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><g fill="#61DAFB"><circle cx="64" cy="64" r="11.4"/><path d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3C8.2 50 1.4 56.6 1.4 64s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zM92.5 14.7c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zM81.3 74c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zM64 97.8c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zM64 30.2c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zM31.7 35c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zM7 64c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5C15.3 75.6 7 69.6 7 64zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zM96.3 93c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z"/></g></svg>
\ No newline at end of file
diff --git a/icons/remix.svg b/icons/remix.svg
index 0ec88d3..8d05e5d 100644
--- a/icons/remix.svg
+++ b/icons/remix.svg
@@ -1 +1,24 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none'><g fill='#7B7B7B' clip-path='url(#a)'><path fill-rule='evenodd' d='M25.261 21.593c.252 3.235.252 4.752.252 6.407h-7.485c0-.36.006-.69.013-1.025.02-1.04.041-2.124-.127-4.313-.223-3.206-1.603-3.918-4.142-3.918H2V12.91h12.129c3.206 0 4.809-.975 4.809-3.557 0-2.27-1.603-3.647-4.81-3.647H2V0h13.465C22.723 0 26.33 3.428 26.33 8.904c0 4.096-2.538 6.768-5.967 7.213 2.894.579 4.586 2.226 4.898 5.476Z' clip-rule='evenodd'/><path d='M2 28v-4.348h7.914c1.322 0 1.61.98 1.61 1.566V28H2Z'/></g><defs><clipPath id='a'><path fill='#fff' d='M0 0h28v28H0z'/></clipPath></defs></svg>
\ No newline at end of file
+<svg width="539" height="601" viewBox="0 0 539 601" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_3_106)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M456.946 428.768C461.201 483.418 461.201 509.036 461.201 537H334.756C334.756 530.909 334.865 525.337 334.975 519.687C335.317 502.123 335.674 483.807 332.828 446.819C329.067 392.667 305.748 380.634 262.871 380.634H224.883H64V282.109H268.889C323.049 282.109 350.13 265.633 350.13 222.011C350.13 183.654 323.049 160.41 268.889 160.41H64V64H291.456C414.069 64 475 121.912 475 214.42C475 283.613 432.123 328.739 374.201 336.26C423.096 346.037 451.681 373.865 456.946 428.768Z" fill="#E8F2FF"/>
+<path d="M64 537V463.553H197.697C220.029 463.553 224.878 480.116 224.878 489.994V537H64Z" fill="#E8F2FF"/>
+</g>
+<defs>
+<filter id="filter0_dd_3_106" x="0" y="0" width="539" height="601" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="28"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.223529 0 0 0 0 0.572549 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3_106"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="32"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.223529 0 0 0 0 0.572549 0 0 0 0 1 0 0 0 0.9 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_3_106" result="effect2_dropShadow_3_106"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_3_106" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/icons/slidev.svg b/icons/slidev.svg
index 4fc134c..9570043 100644
--- a/icons/slidev.svg
+++ b/icons/slidev.svg
@@ -1 +1,60 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='29' height='28' fill='none'><g clip-path='url(#a)'><mask id='b' width='29' height='29' x='0' y='-1' maskUnits='userSpaceOnUse' style='mask-type:luminance'><path fill='#fff' d='M28.573-.002h-28v28h28v-28Z'/></mask><g mask='url(#b)'><path fill='#4B4B4B' d='M22.243 3.408H7.634A3.652 3.652 0 0 0 3.982 7.06v14.61a3.652 3.652 0 0 0 3.652 3.651h14.609a3.652 3.652 0 0 0 3.652-3.652V7.06a3.652 3.652 0 0 0-3.652-3.652Z'/><path fill='#7B7B7B' d='M22.486 10.955c0-6.052-4.905-10.957-10.956-10.957C5.479-.002.573 4.903.573 10.955c0 6.05 4.906 10.956 10.957 10.956 6.05 0 10.956-4.905 10.956-10.956Z'/><path fill='#fff' d='M14.239 15.563c-.287-1.07-.43-1.604-.288-1.974.123-.322.378-.576.7-.7.37-.141.904.002 1.974.288l5.315 1.425c1.07.286 1.604.43 1.853.737.217.268.31.616.256.956-.062.391-.453.782-1.236 1.565l-3.891 3.892c-.783.782-1.174 1.174-1.565 1.236-.34.054-.688-.04-.957-.257-.307-.248-.45-.783-.737-1.853l-1.424-5.315Z'/></g></g><defs><clipPath id='a'><path fill='#fff' d='M.574 0h28v28h-28z'/></clipPath></defs></svg>
\ No newline at end of file
+<svg width="256" height="256" viewBox="0 0 115 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<g filter="url(#filter0_d)">
+<rect x="14" y="14" width="90" height="90" rx="15" fill="url(#paint0_linear)"/>
+</g>
+<g filter="url(#filter1_d)">
+<rect width="90" height="90" rx="45" fill="url(#paint1_linear)"/>
+</g>
+<g filter="url(#filter2_d)">
+<path d="M56.127 63.925C54.9501 59.5327 54.3617 57.3366 54.9439 55.8199C55.4517 54.497 56.497 53.4517 57.8199 52.9439C59.3366 52.3617 61.5327 52.9501 65.925 54.127L87.7563 59.9767C92.1485 61.1536 94.3446 61.742 95.367 63.0046C96.2588 64.1058 96.6414 65.5338 96.4197 66.9334C96.1656 68.5379 94.5579 70.1456 91.3426 73.3609L75.3609 89.3426C72.1456 92.5579 70.5379 94.1656 68.9333 94.4197C67.5337 94.6414 66.1058 94.2588 65.0046 93.367C63.742 92.3446 63.1536 90.1485 61.9767 85.7563L56.127 63.925Z" fill="url(#paint2_linear)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d" x="8" y="8" width="110" height="110" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter1_d" x="-6" y="-6" width="110" height="110" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter2_d" x="34.8833" y="32.8833" width="77.6614" height="77.6614" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="14" y1="6" x2="104" y2="104" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3ACBD4"/>
+<stop offset="1" stop-color="#2988B1"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="-9.5" y1="-11" x2="76.0825" y2="90" gradientUnits="userSpaceOnUse">
+<stop stop-color="#95F0CF"/>
+<stop offset="1" stop-color="#3AB9D5"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="54.6616" y1="49.3453" x2="59.8793" y2="96.3585" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEB83"/>
+<stop offset="0.0001" stop-color="#FFEB83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="0.601773" stop-color="#FFBB13"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+<clipPath id="clip0">
+<rect width="115" height="115" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/icons/solidjs.svg b/icons/solidjs.svg
new file mode 100644
index 0000000..c51b886
--- /dev/null
+++ b/icons/solidjs.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><defs><linearGradient id="a" x1="27.5" x2="152" y1="3" y2="63.5" gradientTransform="translate(-3.22 1.507) scale(.80503)" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><linearGradient id="b" x1="95.8" x2="74" y1="32.6" y2="105.2" gradientTransform="translate(-3.22 1.507) scale(.80503)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><linearGradient id="c" x1="18.4" x2="144.3" y1="64.2" y2="149.8" gradientTransform="translate(-3.22 1.507) scale(.80503)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><linearGradient id="d" x1="75.2" x2="24.4" y1="74.5" y2="260.8" gradientTransform="translate(-3.22 1.507) scale(.80503)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient></defs><path fill="#76b3e1" d="M128 29.683S85.333-1.713 52.327 5.532l-2.415.805c-4.83 1.61-8.855 4.025-11.27 7.245l-1.61 2.415-12.076 20.931 20.93 4.025c8.856 5.636 20.127 8.05 30.592 5.636l37.031 7.245z"/><path fill="url(#a)" d="M128 29.683S85.333-1.713 52.327 5.532l-2.415.805c-4.83 1.61-8.855 4.025-11.27 7.245l-1.61 2.415-12.076 20.931 20.93 4.025c8.856 5.636 20.127 8.05 30.592 5.636l37.031 7.245z" opacity=".3"/><path fill="#518ac8" d="m38.642 29.683-3.22.805C21.735 34.513 17.71 47.394 24.955 58.664c8.05 10.465 24.956 16.1 38.641 12.076l49.912-16.906S70.843 22.438 38.642 29.683z"/><path fill="url(#b)" d="m38.642 29.683-3.22.805C21.735 34.513 17.71 47.394 24.955 58.664c8.05 10.465 24.956 16.1 38.641 12.076l49.912-16.906S70.843 22.438 38.642 29.683z" opacity=".3"/><path fill="url(#c)" d="M104.654 65.91a36.226 36.226 0 0 0-38.641-12.076L16.1 69.934 0 98.111l90.164 15.295 16.1-28.981c3.22-5.635 2.415-12.075-1.61-18.516z"/><path fill="url(#d)" d="M88.553 94.085A36.226 36.226 0 0 0 49.912 82.01L0 98.11s42.667 32.202 75.673 24.152l2.415-.806c13.686-4.025 18.516-16.905 10.465-27.37z"/></svg>
diff --git a/icons/svelte.svg b/icons/svelte.svg
index 7ee89b4..9f52cb7 100644
--- a/icons/svelte.svg
+++ b/icons/svelte.svg
@@ -1 +1 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none'><g clip-path='url(#a)'><path fill='#7B7B7B' fill-rule='evenodd' d='M12.352 1.237c3.701-2.349 8.85-1.258 11.437 2.468a7.818 7.818 0 0 1 1.352 6.05 7.164 7.164 0 0 1-1.115 2.8c.83 1.543 1.092 3.323.783 5.055a7.417 7.417 0 0 1-3.37 5.007l-6.525 4.152c-3.701 2.35-8.827 1.258-11.437-2.467a7.984 7.984 0 0 1-1.352-6.028 7.164 7.164 0 0 1 1.115-2.8c-.83-1.542-1.092-3.322-.783-5.054a7.416 7.416 0 0 1 3.37-5.007l6.525-4.176Zm-6.193 21.36a5.172 5.172 0 0 0 5.553 2.065 5.166 5.166 0 0 0 1.329-.593l6.525-4.153a4.493 4.493 0 0 0 2.04-3.014c.214-1.28-.07-2.586-.83-3.63a5.172 5.172 0 0 0-5.552-2.065 5.166 5.166 0 0 0-1.329.594l-2.492 1.59c-.118.07-.26.118-.403.166a1.557 1.557 0 0 1-1.685-.617 1.473 1.473 0 0 1-.237-1.092c.071-.38.285-.688.617-.902l6.502-4.152c.118-.071.26-.119.403-.166a1.557 1.557 0 0 1 1.685.617c.19.285.285.64.26.973l-.023.237.237.071c.926.285 1.78.712 2.563 1.282l.332.237.119-.38a5.95 5.95 0 0 0 .166-.617c.214-1.281-.071-2.586-.83-3.63a5.172 5.172 0 0 0-5.553-2.065 5.164 5.164 0 0 0-1.329.594L7.702 8.099a4.493 4.493 0 0 0-2.04 3.014 4.793 4.793 0 0 0 .806 3.63 5.172 5.172 0 0 0 5.552 2.065 4.413 4.413 0 0 0 1.33-.57l2.49-1.59c.12-.071.262-.118.404-.166a1.557 1.557 0 0 1 1.685.617c.213.309.308.712.237 1.092-.071.38-.285.688-.617.901l-6.502 4.153a2.047 2.047 0 0 1-.403.166 1.57 1.57 0 0 1-1.685-.64 1.588 1.588 0 0 1-.26-.974l.023-.237-.237-.071a8.654 8.654 0 0 1-2.563-1.282l-.332-.237-.119.38c-.023.107-.047.208-.07.308-.025.101-.048.202-.072.309-.214 1.281.071 2.586.83 3.63Z' clip-rule='evenodd'/></g><defs><clipPath id='a'><path fill='#fff' d='M0 0h28v28H0z'/></clipPath></defs></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M 110.43093,16.935847 C 98.552474,-0.076153 75.089104,-5.118154 58.130818,5.695846 l -29.793,19.000001 c -4.030441,2.529 -7.488786,5.871 -10.15468,9.814 -2.665895,3.943 -4.479469,8.399 -5.325138,13.083 a 25.478172,30.64 0 0 0 -0.572094,6.396 c 0.0183,5.831 1.446866,11.571 4.163485,16.729995 -2.546986,3.87201 -4.285721,8.22 -5.110602,12.78201 a 25.347621,30.483 0 0 0 0.345086,14.41199 c 1.072679,4.732998 3.078336,9.203998 5.900559,13.151998 11.877618,17.011 35.393374,22.053 52.299272,11.24 l 29.762238,-19.001 c 4.027946,-2.532 7.482126,-5.877998 10.141386,-9.824998 2.65841,-3.947 4.46282,-8.40699 5.29686,-13.093 0.3825,-2.107 0.57458,-4.244 0.5721,-6.386 -0.007,-5.81999 -1.41778,-11.550995 -4.11194,-16.708995 2.54616,-3.869 4.28489,-8.213 5.11143,-12.771 0.36921,-2.109 0.55713,-4.245 0.56212,-6.386 0.002,-7.595 -2.37152,-15 -6.78697,-21.178 z" fill="#ff3e00" id="path598" style="stroke-width:0.911885" /><path d="m 55.218941,112.66204 a 28.463375,34.23 0 0 1 -5.953776,0.76 c -3.820895,0.001 -7.585244,-0.925 -10.970416,-2.7 -3.384341,-1.774 -6.288887,-4.343 -8.464177,-7.487 -2.655917,-3.716 -4.082827,-8.171 -4.080332,-12.74 a 15.657767,18.83 0 0 1 0.332613,-3.833 15.424937,18.55 0 0 1 0.719276,-2.782 l 0.562116,-1.708 1.51921,1.156 c 3.528195,2.591 7.470493,4.564 11.658097,5.834 l 1.104275,0.333 -0.103941,1.104 v 0.573 c -0.0025,1.381 0.427408,2.73 1.228174,3.854 0.646933,0.958 1.51838,1.744 2.537839,2.288 a 8.2621121,9.936 0 0 0 3.311997,0.837 8.2513022,9.923 0 0 0 1.79029,-0.229 7.2717563,8.745 0 0 0 1.832699,-0.802 l 29.760566,-19.094 c 0.892236,-0.566 1.627311,-1.349 2.135377,-2.276 0.507236,-0.927 0.771662,-1.968 0.768337,-3.026 -0.0084,-1.381 -0.449027,-2.725 -1.259773,-3.844 -0.656912,-0.946 -1.533347,-1.718 -2.553637,-2.252 a 8.3128357,9.997 0 0 0 -3.307008,-0.81 8.246313,9.917 0 0 0 -1.79029,0.23 6.9383115,8.344 0 0 0 -1.821058,0.801 l -11.346268,7.25 a 24.375558,29.314 0 0 1 -6.04774,2.656 c -1.945787,0.502 -3.945624,0.758 -5.954608,0.76 -3.820063,0 -7.582749,-0.926 -10.967089,-2.698 -3.384341,-1.772 -6.289718,-4.338 -8.467502,-7.478 -2.652591,-3.718 -4.079502,-8.172 -4.080334,-12.74 0.0016,-1.285 0.113089,-2.567 0.332615,-3.833 0.509728,-2.816 1.597374,-5.495 3.196411,-7.867 1.598207,-2.373 3.67205,-4.387 6.089317,-5.914 l 29.792168,-18.99 c 1.869286,-1.19 3.908205,-2.09 6.04774,-2.667 1.945787,-0.499 3.945625,-0.75 5.953776,-0.75 3.82921,-0.01 7.603538,0.91 10.999519,2.681 3.395981,1.77 6.311338,4.34 8.497439,7.486 2.636787,3.727 4.045417,8.184 4.028777,12.75 a 15.748404,18.939 0 0 1 -0.33344,3.844 15.407475,18.529 0 0 1 -0.71845,2.781 l -0.56211,1.708 -1.519216,-1.114 c -3.525699,-2.595 -7.468833,-4.568 -11.658096,-5.834 l -1.104275,-0.343 0.103941,-1.105 v -0.572 c 0,-1.385 -0.429072,-2.735 -1.228174,-3.865 -0.65608,-0.945 -1.530022,-1.716 -2.549481,-2.25 a 8.3086779,9.992 0 0 0 -3.301186,-0.813 8.2213671,9.887 0 0 0 -1.768671,0.271 6.8185708,8.2 0 0 0 -1.831867,0.802 l -29.792165,18.99 a 5.8797701,7.071 0 0 0 -1.836857,1.79 4.7505482,5.713 0 0 0 -0.962914,2.377 5.0365955,6.057 0 0 0 -0.135541,1.104 c -8.31e-4,1.378 0.42824,2.722 1.228174,3.844 0.655248,0.945 1.530021,1.717 2.548649,2.25 a 8.2986996,9.98 0 0 0 3.301186,0.812 8.2471446,9.918 0 0 0 1.79029,-0.23 6.9433007,8.35 0 0 0 1.832699,-0.801 l 11.367057,-7.292 a 24.218399,29.125 0 0 1 6.04774,-2.656 28.52574,34.305 0 0 1 5.953776,-0.76 c 3.821727,0 7.586076,0.925 10.972078,2.697 3.386003,1.772 6.293877,4.339 8.473325,7.48 2.652591,3.717 4.079498,8.171 4.080338,12.74 0.003,1.299 -0.11226,2.596 -0.34343,3.874 -0.506403,2.817 -1.594046,5.497 -3.192254,7.87 -1.599037,2.372 -3.673715,4.385 -6.093476,5.911 l -29.739779,18.99 a 24.308205,29.233 0 0 1 -6.057719,2.667 z" fill="#ffffff" id="path600" style="stroke-width:0.911885" /></svg>
diff --git a/icons/typescript.svg b/icons/typescript.svg
index 1a43b55..e1db5f1 100644
--- a/icons/typescript.svg
+++ b/icons/typescript.svg
@@ -1 +1 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='none'><g clip-path='url(#a)'><path fill='#7B7B7B' d='M.607 14.5V.5h28v28h-28'/><path fill='#fff' d='M6.747 14.55v1.14h3.64v10.36h2.583V15.69h3.64v-1.12c0-.63 0-1.14-.028-1.155 0-.02-2.22-.028-4.914-.028l-4.9.021v1.148l-.021-.007Zm16.359-1.17a3.39 3.39 0 0 1 1.75 1.001c.258.28.643.77.671.896 0 .042-1.21.861-1.945 1.316-.028.021-.14-.098-.252-.28-.364-.518-.735-.742-1.316-.784-.84-.056-1.4.385-1.4 1.12 0 .224.042.35.126.532.189.385.539.616 1.624 1.092 2.002.861 2.87 1.428 3.395 2.24.595.91.727 2.338.328 3.41-.447 1.168-1.54 1.96-3.1 2.218-.49.084-1.61.07-2.135-.02-1.12-.21-2.191-.77-2.85-1.492-.258-.28-.755-1.029-.727-1.078l.266-.168 1.05-.609.79-.462.183.245c.23.364.749.854 1.05 1.022.91.47 2.128.406 2.73-.14.259-.238.37-.49.37-.84 0-.322-.048-.469-.21-.714-.223-.308-.671-.56-1.931-1.12-1.45-.616-2.065-1.008-2.64-1.61-.328-.364-.63-.93-.77-1.4-.104-.406-.14-1.4-.041-1.799.3-1.4 1.358-2.38 2.87-2.66.49-.098 1.645-.056 2.128.07l-.014.014Z'/></g><defs><clipPath id='a'><path fill='#fff' d='M.607.5h28v28h-28z'/></clipPath></defs></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#fff" d="M22.67 47h99.67v73.67H22.67z"/><path data-name="original" fill="#007acc" d="M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z"/></svg>
\ No newline at end of file
diff --git a/icons/vite.svg b/icons/vite.svg
index 0d7d42c..45ac612 100644
--- a/icons/vite.svg
+++ b/icons/vite.svg
@@ -1 +1 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none'><path fill='#7B7B7B' d='M26.914 4.865 14.7 26.771a.663.663 0 0 1-1.155.005L1.088 4.867a.665.665 0 0 1 .693-.985L14.01 6.074a.662.662 0 0 0 .236 0l11.97-2.189a.665.665 0 0 1 .699.98Z'/><path fill='#fff' d='m19.833 1.006-9.038 1.777a.332.332 0 0 0-.268.307l-.556 9.418a.332.332 0 0 0 .406.344l2.517-.582a.332.332 0 0 1 .4.39l-.748 3.673a.332.332 0 0 0 .421.385l1.555-.474a.332.332 0 0 1 .421.386l-1.188 5.768c-.074.36.404.558.604.248l.133-.206 7.365-14.743a.333.333 0 0 0-.36-.476l-2.59.502a.333.333 0 0 1-.382-.42l1.69-5.878a.333.333 0 0 0-.382-.419Z'/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><defs><linearGradient id="a" x1="6" x2="235" y1="33" y2="344" gradientTransform="translate(0 .937) scale(.3122)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#41d1ff"/><stop offset="1" stop-color="#bd34fe"/></linearGradient><linearGradient id="b" x1="194.651" x2="236.076" y1="8.818" y2="292.989" gradientTransform="translate(0 .937) scale(.3122)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffea83"/><stop offset=".083" stop-color="#ffdd35"/><stop offset="1" stop-color="#ffa800"/></linearGradient></defs><path fill="url(#a)" d="M124.766 19.52 67.324 122.238c-1.187 2.121-4.234 2.133-5.437.024L3.305 19.532c-1.313-2.302.652-5.087 3.261-4.622L64.07 25.187a3.09 3.09 0 0 0 1.11 0l56.3-10.261c2.598-.473 4.575 2.289 3.286 4.594Zm0 0"/><path fill="url(#b)" d="M91.46 1.43 48.954 9.758a1.56 1.56 0 0 0-1.258 1.437l-2.617 44.168a1.563 1.563 0 0 0 1.91 1.614l11.836-2.735a1.562 1.562 0 0 1 1.88 1.836l-3.517 17.219a1.562 1.562 0 0 0 1.985 1.805l7.308-2.223c1.133-.344 2.223.652 1.985 1.812l-5.59 27.047c-.348 1.692 1.902 2.614 2.84 1.164l.625-.968 34.64-69.13c.582-1.16-.421-2.48-1.69-2.234l-12.185 2.352a1.558 1.558 0 0 1-1.793-1.965l7.95-27.562A1.56 1.56 0 0 0 91.46 1.43Zm0 0"/></svg>
diff --git a/icons/vue.svg b/icons/vue.svg
index 928f8a4..27afad0 100644
--- a/icons/vue.svg
+++ b/icons/vue.svg
@@ -1 +1 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none'><path fill='#7B7B7B' d='M22.398 2h5.6l-14 24.148L0 2h10.709l3.29 5.6 3.22-5.6h5.179Z'/><path fill='#fff' d='m0 2 13.999 24.148L27.997 2h-5.6L14 16.489 5.529 2H0Z'/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M0 8.934l49.854.158 14.167 24.47 14.432-24.47L128 8.935l-63.834 110.14zm126.98.637l-24.36.02-38.476 66.053L25.691 9.592.942 9.572l63.211 107.89zm-25.149-.008l-22.745.168-15.053 24.647L49.216 9.73l-22.794-.168 37.731 64.476zm-75.834-.17l23.002.009m-23.002-.01l23.002.01" fill="none"/><path d="M25.997 9.393l23.002.009L64.035 34.36 79.018 9.404 102 9.398 64.15 75.053z" fill="#35495e"/><path d="M.91 9.569l25.067-.172 38.15 65.659L101.98 9.401l25.11.026-62.966 108.06z" fill="#41b883"/></svg>
\ No newline at end of file

From 715fade81eae89e112488a7f60d9b79c796ca9b3 Mon Sep 17 00:00:00 2001
From: Roamin <97863888+roaminro@users.noreply.github.com>
Date: Thu, 10 Jul 2025 18:43:09 +0000
Subject: [PATCH 08/11] feat(mcp): add Model Context Protocol integration

Add  MCP integration including:
- New MCP settings tab with server configuration
- Tool invocation UI components
- API endpoints for MCP management
- Integration with chat system for tool execution
- Example configurations
---
 app/components/@settings/core/ControlPanel.tsx |  2 +-
 app/components/@settings/core/constants.ts     | 11 ++++++-----
 app/components/chat/Chat.client.tsx            |  2 ++
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/components/@settings/core/ControlPanel.tsx b/app/components/@settings/core/ControlPanel.tsx
index 76ed9ae..7292f56 100644
--- a/app/components/@settings/core/ControlPanel.tsx
+++ b/app/components/@settings/core/ControlPanel.tsx
@@ -33,7 +33,7 @@ interface ControlPanelProps {
 }
 
 // Beta status for experimental features
-const BETA_TABS = new Set<TabType>(['service-status', 'local-providers']);
+const BETA_TABS = new Set<TabType>(['service-status', 'local-providers', 'mcp']);
 
 const BetaLabel = () => (
   <div className="absolute top-2 right-2 px-1.5 py-0.5 rounded-full bg-purple-500/10 dark:bg-purple-500/20">
diff --git a/app/components/@settings/core/constants.ts b/app/components/@settings/core/constants.ts
index 776538f..a8f3798 100644
--- a/app/components/@settings/core/constants.ts
+++ b/app/components/@settings/core/constants.ts
@@ -9,8 +9,8 @@ export const TAB_ICONS: Record<TabType, string> = {
   'cloud-providers': 'i-ph:cloud',
   'local-providers': 'i-ph:laptop',
   'service-status': 'i-ph:activity-bold',
-  connection: 'i-ph:wifi-high-fill',
-  'event-logs': 'i-ph:list-bullets-fill',
+  connection: 'i-ph:wifi-high',
+  'event-logs': 'i-ph:list-bullets',
   mcp: 'i-ph:hard-drives-bold',
 };
 
@@ -53,7 +53,8 @@ export const DEFAULT_TAB_CONFIG = [
   { id: 'event-logs', visible: true, window: 'user' as const, order: 6 },
   { id: 'mcp', visible: true, window: 'user' as const, order: 7 },
   { id: 'profile', visible: true, window: 'user' as const, order: 8 },
-  { id: 'settings', visible: true, window: 'user' as const, order: 9 },
-  { id: 'service-status', visible: true, window: 'user' as const, order: 10 },
-  { id: 'update', visible: true, window: 'user' as const, order: 11 },
+  { id: 'service-status', visible: true, window: 'user' as const, order: 9 },
+
+  // User Window Tabs (In dropdown, initially hidden)
+  { id: 'settings', visible: false, window: 'user' as const, order: 10 },
 ];
diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
index dfe8912..70d5444 100644
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -28,6 +28,8 @@ import type { ElementInfo } from '~/components/workbench/Inspector';
 import type { TextUIPart, FileUIPart, Attachment } from '@ai-sdk/ui-utils';
 import { useMCPStore } from '~/lib/stores/mcp';
 import type { LlmErrorAlertType } from '~/types/actions';
+import type { TextUIPart, FileUIPart, Attachment } from '@ai-sdk/ui-utils';
+import { useMCPStore } from '~/lib/stores/mcp';
 
 const toastAnimation = cssTransition({
   enter: 'animated fadeInRight',

From 9d82f7ecab045440935e138ab774d902635e7405 Mon Sep 17 00:00:00 2001
From: Roamin <97863888+roaminro@users.noreply.github.com>
Date: Thu, 10 Jul 2025 19:12:30 +0000
Subject: [PATCH 09/11] chore(chat): remove duplicate type import

---
 app/components/chat/Chat.client.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
index ec0abf4..dfe8912 100644
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -28,7 +28,6 @@ import type { ElementInfo } from '~/components/workbench/Inspector';
 import type { TextUIPart, FileUIPart, Attachment } from '@ai-sdk/ui-utils';
 import { useMCPStore } from '~/lib/stores/mcp';
 import type { LlmErrorAlertType } from '~/types/actions';
-import type { TextUIPart, FileUIPart, Attachment } from '@ai-sdk/ui-utils';
 
 const toastAnimation = cssTransition({
   enter: 'animated fadeInRight',

From c649e7982e36481c06898044f1a87992040fd7db Mon Sep 17 00:00:00 2001
From: Roamin <97863888+roaminro@users.noreply.github.com>
Date: Thu, 10 Jul 2025 20:12:45 +0000
Subject: [PATCH 10/11] style(icons): update icon for mcp

---
 app/components/@settings/core/constants.ts | 2 +-
 app/components/chat/ToolInvocations.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/@settings/core/constants.ts b/app/components/@settings/core/constants.ts
index db333f5..8901a8f 100644
--- a/app/components/@settings/core/constants.ts
+++ b/app/components/@settings/core/constants.ts
@@ -11,7 +11,7 @@ export const TAB_ICONS: Record<TabType, string> = {
   'service-status': 'i-ph:activity-bold',
   connection: 'i-ph:wifi-high',
   'event-logs': 'i-ph:list-bullets',
-  mcp: 'i-ph:hard-drives-bold',
+  mcp: 'i-ph:wrench',
 };
 
 export const TAB_LABELS: Record<TabType, string> = {
diff --git a/app/components/chat/ToolInvocations.tsx b/app/components/chat/ToolInvocations.tsx
index 9567d22..cb0e145 100644
--- a/app/components/chat/ToolInvocations.tsx
+++ b/app/components/chat/ToolInvocations.tsx
@@ -110,7 +110,7 @@ export const ToolInvocations = memo(({ toolInvocations, toolCallAnnotations, add
           aria-label={showDetails ? 'Collapse details' : 'Expand details'}
         >
           <div className="p-2">
-            <div className="i-ph:wrench-fill text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"></div>
+            <div className="i-ph:wrench text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"></div>
           </div>
           <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
           <div className="px-5 p-2 w-full text-left">

From 2b40b8af523bb5b4ee93fb6b882b1280d66b842a Mon Sep 17 00:00:00 2001
From: Roamin <97863888+roaminro@users.noreply.github.com>
Date: Fri, 11 Jul 2025 04:08:34 +0000
Subject: [PATCH 11/11] fix(chat): rename processedMessage to processedMessages
 for clarity

---
 app/routes/api.chat.ts | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/routes/api.chat.ts b/app/routes/api.chat.ts
index 93ab6e8..87e4030 100644
--- a/app/routes/api.chat.ts
+++ b/app/routes/api.chat.ts
@@ -88,10 +88,10 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
         let summary: string | undefined = undefined;
         let messageSliceId = 0;
 
-        const processedMessage = await mcpService.processToolInvocations(messages, dataStream);
+        const processedMessages = await mcpService.processToolInvocations(messages, dataStream);
 
-        if (processedMessage.length > 3) {
-          messageSliceId = processedMessage.length - 3;
+        if (processedMessages.length > 3) {
+          messageSliceId = processedMessages.length - 3;
         }
 
         if (filePaths.length > 0 && contextOptimization) {
@@ -105,10 +105,10 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
           } satisfies ProgressAnnotation);
 
           // Create a summary of the chat
-          console.log(`Messages count: ${processedMessage.length}`);
+          console.log(`Messages count: ${processedMessages.length}`);
 
           summary = await createSummary({
-            messages: [...processedMessage],
+            messages: [...processedMessages],
             env: context.cloudflare?.env,
             apiKeys,
             providerSettings,
@@ -134,7 +134,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
           dataStream.writeMessageAnnotation({
             type: 'chatSummary',
             summary,
-            chatId: processedMessage.slice(-1)?.[0]?.id,
+            chatId: processedMessages.slice(-1)?.[0]?.id,
           } as ContextAnnotation);
 
           // Update context buffer
@@ -148,9 +148,9 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
           } satisfies ProgressAnnotation);
 
           // Select context files
-          console.log(`Messages count: ${processedMessage.length}`);
+          console.log(`Messages count: ${processedMessages.length}`);
           filteredFiles = await selectContext({
-            messages: [...processedMessage],
+            messages: [...processedMessages],
             env: context.cloudflare?.env,
             apiKeys,
             files,
@@ -246,17 +246,17 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
 
             logger.info(`Reached max token limit (${MAX_TOKENS}): Continuing message (${switchesLeft} switches left)`);
 
-            const lastUserMessage = processedMessage.filter((x) => x.role == 'user').slice(-1)[0];
+            const lastUserMessage = processedMessages.filter((x) => x.role == 'user').slice(-1)[0];
             const { model, provider } = extractPropertiesFromMessage(lastUserMessage);
-            processedMessage.push({ id: generateId(), role: 'assistant', content });
-            processedMessage.push({
+            processedMessages.push({ id: generateId(), role: 'assistant', content });
+            processedMessages.push({
               id: generateId(),
               role: 'user',
               content: `[Model: ${model}]\n\n[Provider: ${provider}]\n\n${CONTINUE_PROMPT}`,
             });
 
             const result = await streamText({
-              messages: [...processedMessage],
+              messages: [...processedMessages],
               env: context.cloudflare?.env,
               options,
               apiKeys,
@@ -297,7 +297,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
         } satisfies ProgressAnnotation);
 
         const result = await streamText({
-          messages: [...processedMessage],
+          messages: [...processedMessages],
           env: context.cloudflare?.env,
           options,
           apiKeys,