Merge pull request #676 from Stijnus/main

Added some small UI enhancements to the Settings and Sidebar
2025-02-05 20:46:43 +00:00 · 2024-12-13 20:53:00 +05:30 · 2024-12-13 20:53:00 +05:30 · 5773b1e271
commit 5773b1e271
parent 78cd04a541 d479daa578
33 changed files with 1097 additions and 87 deletions
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -2,25 +2,42 @@

 echo "🔍 Running pre-commit hook to check the code looks good... 🔍"

+# Load NVM if available (useful for managing Node.js versions)
 export NVM_DIR="$HOME/.nvm"
-[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # Load nvm if you're using i
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

-echo "Running typecheck..."
-which pnpm
-
-if ! pnpm typecheck; then
-        echo "❌ Type checking failed! Please review TypeScript types."
-        echo "Once you're done, don't forget to add your changes to the commit! 🚀"
-        echo "Typecheck exit code: $?"
-        exit 1
-fi
-
-echo "Running lint..."
-if ! pnpm lint; then
-    echo "❌ Linting failed! 'pnpm lint:fix' will help you fix the easy ones."
-    echo "Once you're done, don't forget to add your beautification to the commit! 🤩"
-    echo "lint exit code: $?"
+# Ensure `pnpm` is available
+echo "Checking if pnpm is available..."
+if ! command -v pnpm >/dev/null 2>&1; then
+    echo "❌ pnpm not found! Please ensure pnpm is installed and available in PATH."
    exit 1
 fi

-echo "👍 All good! Committing changes..."
+# Run typecheck
+echo "Running typecheck..."
+if ! pnpm typecheck; then
+    echo "❌ Type checking failed! Please review TypeScript types."
+    echo "Once you're done, don't forget to add your changes to the commit! 🚀"
+    exit 1
+fi
+
+# Run lint
+echo "Running lint..."
+if ! pnpm lint; then
+    echo "❌ Linting failed! Run 'pnpm lint:fix' to fix the easy issues."
+    echo "Once you're done, don't forget to add your beautification to the commit! 🤩"
+    exit 1
+fi
+
+# Update commit.json with the latest commit hash
+echo "Updating commit.json with the latest commit hash..."
+COMMIT_HASH=$(git rev-parse HEAD)
+if [ $? -ne 0 ]; then
+    echo "❌ Failed to get commit hash. Ensure you are in a git repository."
+    exit 1
+fi
+
+echo "{ \"commit\": \"$COMMIT_HASH\" }" > app/commit.json
+git add app/commit.json
+
+echo "👍 All checks passed! Committing changes..."
--- a/app/commit.json
+++ b/app/commit.json
@ -1 +1,2 @@
 { "commit": "eeafc12522b184dcbded28c5c6606e4a23e6849f" }
+
--- a/app/components/chat/ImportFolderButton.tsx
+++ b/app/components/chat/ImportFolderButton.tsx
@ -3,6 +3,7 @@ import type { Message } from 'ai';
 import { toast } from 'react-toastify';
 import { MAX_FILES, isBinaryFile, shouldIncludeFile } from '~/utils/fileUtils';
 import { createChatFromFolder } from '~/utils/folderImport';
+import { logStore } from '~/lib/stores/logs'; // Assuming logStore is imported from this location

 interface ImportFolderButtonProps {
  className?: string;
@ -16,9 +17,15 @@ export const ImportFolderButton: React.FC<ImportFolderButtonProps> = ({ classNam
    const allFiles = Array.from(e.target.files || []);

    if (allFiles.length > MAX_FILES) {
+      const error = new Error(`Too many files: ${allFiles.length}`);
+      logStore.logError('File import failed - too many files', error, {
+        fileCount: allFiles.length,
+        maxFiles: MAX_FILES,
+      });
      toast.error(
        `This folder contains ${allFiles.length.toLocaleString()} files. This product is not yet optimized for very large projects. Please select a folder with fewer than ${MAX_FILES.toLocaleString()} files.`,
      );
+
      return;
    }

@ -31,7 +38,10 @@ export const ImportFolderButton: React.FC<ImportFolderButtonProps> = ({ classNam
      const filteredFiles = allFiles.filter((file) => shouldIncludeFile(file.webkitRelativePath));

      if (filteredFiles.length === 0) {
+        const error = new Error('No valid files found');
+        logStore.logError('File import failed - no valid files', error, { folderName });
        toast.error('No files found in the selected folder');
+
        return;
      }

@ -48,11 +58,18 @@ export const ImportFolderButton: React.FC<ImportFolderButtonProps> = ({ classNam
        .map((f) => f.file.webkitRelativePath.split('/').slice(1).join('/'));

      if (textFiles.length === 0) {
+        const error = new Error('No text files found');
+        logStore.logError('File import failed - no text files', error, { folderName });
        toast.error('No text files found in the selected folder');
+
        return;
      }

      if (binaryFilePaths.length > 0) {
+        logStore.logWarning(`Skipping binary files during import`, {
+          folderName,
+          binaryCount: binaryFilePaths.length,
+        });
        toast.info(`Skipping ${binaryFilePaths.length} binary files`);
      }

@ -62,8 +79,14 @@ export const ImportFolderButton: React.FC<ImportFolderButtonProps> = ({ classNam
        await importChat(folderName, [...messages]);
      }

+      logStore.logSystem('Folder imported successfully', {
+        folderName,
+        textFileCount: textFiles.length,
+        binaryFileCount: binaryFilePaths.length,
+      });
      toast.success('Folder imported successfully');
    } catch (error) {
+      logStore.logError('Failed to import folder', error, { folderName });
      console.error('Failed to import folder:', error);
      toast.error('Failed to import folder');
    } finally {
--- a/app/components/settings/SettingsWindow.tsx
+++ b/app/components/settings/SettingsWindow.tsx
@ -10,6 +10,7 @@ import ProvidersTab from './providers/ProvidersTab';
 import { useSettings } from '~/lib/hooks/useSettings';
 import FeaturesTab from './features/FeaturesTab';
 import DebugTab from './debug/DebugTab';
+import EventLogsTab from './event-logs/EventLogsTab';
 import ConnectionsTab from './connections/ConnectionsTab';

 interface SettingsProps {
@ -17,11 +18,10 @@ interface SettingsProps {
  onClose: () => void;
 }

-type TabType = 'chat-history' | 'providers' | 'features' | 'debug' | 'connection';
+type TabType = 'chat-history' | 'providers' | 'features' | 'debug' | 'event-logs' | 'connection';

-// Providers that support base URL configuration
 export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
-  const { debug } = useSettings();
+  const { debug, eventLogs } = useSettings();
  const [activeTab, setActiveTab] = useState<TabType>('chat-history');

  const tabs: { id: TabType; label: string; icon: string; component?: ReactElement }[] = [
@ -39,6 +39,16 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
          },
        ]
      : []),
+    ...(eventLogs
+      ? [
+          {
+            id: 'event-logs' as TabType,
+            label: 'Event Logs',
+            icon: 'i-ph:list-bullets',
+            component: <EventLogsTab />,
+          },
+        ]
+      : []),
  ];

  return (
--- a/app/components/settings/chat-history/ChatHistoryTab.tsx
+++ b/app/components/settings/chat-history/ChatHistoryTab.tsx
@ -4,6 +4,7 @@ import { toast } from 'react-toastify';
 import { db, deleteById, getAll } from '~/lib/persistence';
 import { classNames } from '~/utils/classNames';
 import styles from '~/components/settings/Settings.module.scss';
+import { logStore } from '~/lib/stores/logs'; // Import logStore for event logging

 export default function ChatHistoryTab() {
  const navigate = useNavigate();
@ -22,7 +23,10 @@ export default function ChatHistoryTab() {

  const handleDeleteAllChats = async () => {
    if (!db) {
+      const error = new Error('Database is not available');
+      logStore.logError('Failed to delete chats - DB unavailable', error);
      toast.error('Database is not available');
+
      return;
    }

@ -30,13 +34,12 @@ export default function ChatHistoryTab() {
      setIsDeleting(true);

      const allChats = await getAll(db);
-
-      // Delete all chats one by one
      await Promise.all(allChats.map((chat) => deleteById(db!, chat.id)));
-
+      logStore.logSystem('All chats deleted successfully', { count: allChats.length });
      toast.success('All chats deleted successfully');
      navigate('/', { replace: true });
    } catch (error) {
+      logStore.logError('Failed to delete chats', error);
      toast.error('Failed to delete chats');
      console.error(error);
    } finally {
@ -46,7 +49,10 @@ export default function ChatHistoryTab() {

  const handleExportAllChats = async () => {
    if (!db) {
+      const error = new Error('Database is not available');
+      logStore.logError('Failed to export chats - DB unavailable', error);
      toast.error('Database is not available');
+
      return;
    }

@ -58,8 +64,10 @@ export default function ChatHistoryTab() {
      };

      downloadAsJson(exportData, `all-chats-${new Date().toISOString()}.json`);
+      logStore.logSystem('Chats exported successfully', { count: allChats.length });
      toast.success('Chats exported successfully');
    } catch (error) {
+      logStore.logError('Failed to export chats', error);
      toast.error('Failed to export chats');
      console.error(error);
    }
--- a/app/components/settings/connections/ConnectionsTab.tsx
+++ b/app/components/settings/connections/ConnectionsTab.tsx
@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { toast } from 'react-toastify';
 import Cookies from 'js-cookie';
+import { logStore } from '~/lib/stores/logs';

 export default function ConnectionsTab() {
  const [githubUsername, setGithubUsername] = useState(Cookies.get('githubUsername') || '');
@ -9,6 +10,10 @@ export default function ConnectionsTab() {
  const handleSaveConnection = () => {
    Cookies.set('githubUsername', githubUsername);
    Cookies.set('githubToken', githubToken);
+    logStore.logSystem('GitHub connection settings updated', {
+      username: githubUsername,
+      hasToken: !!githubToken,
+    });
    toast.success('GitHub credentials saved successfully!');
  };

--- a/app/components/settings/debug/DebugTab.tsx
+++ b/app/components/settings/debug/DebugTab.tsx
@ -2,68 +2,493 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useSettings } from '~/lib/hooks/useSettings';
 import commit from '~/commit.json';

-const versionHash = commit.commit; // Get the version hash from commit.json
+interface ProviderStatus {
+  name: string;
+  enabled: boolean;
+  isLocal: boolean;
+  isRunning: boolean | null;
+  error?: string;
+  lastChecked: Date;
+  responseTime?: number;
+  url: string | null;
+}
+
+interface SystemInfo {
+  os: string;
+  browser: string;
+  screen: string;
+  language: string;
+  timezone: string;
+  memory: string;
+  cores: number;
+}
+
+interface IProviderConfig {
+  name: string;
+  settings: {
+    enabled: boolean;
+  };
+}
+
+const LOCAL_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
+const versionHash = commit.commit;
+const GITHUB_URLS = {
+  original: 'https://api.github.com/repos/stackblitz-labs/bolt.diy/commits/main',
+  fork: 'https://api.github.com/repos/Stijnus/bolt.new-any-llm/commits/main',
+};
+
+function getSystemInfo(): SystemInfo {
+  const formatBytes = (bytes: number): string => {
+    if (bytes === 0) {
+      return '0 Bytes';
+    }
+
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  return {
+    os: navigator.platform,
+    browser: navigator.userAgent.split(' ').slice(-1)[0],
+    screen: `${window.screen.width}x${window.screen.height}`,
+    language: navigator.language,
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    memory: formatBytes(performance?.memory?.jsHeapSizeLimit || 0),
+    cores: navigator.hardwareConcurrency || 0,
+  };
+}
+
+const checkProviderStatus = async (url: string | null, providerName: string): Promise<ProviderStatus> => {
+  if (!url) {
+    console.log(`[Debug] No URL provided for ${providerName}`);
+    return {
+      name: providerName,
+      enabled: false,
+      isLocal: true,
+      isRunning: false,
+      error: 'No URL configured',
+      lastChecked: new Date(),
+      url: null,
+    };
+  }
+
+  console.log(`[Debug] Checking status for ${providerName} at ${url}`);
+
+  const startTime = performance.now();
+
+  try {
+    if (providerName.toLowerCase() === 'ollama') {
+      // Special check for Ollama root endpoint
+      try {
+        console.log(`[Debug] Checking Ollama root endpoint: ${url}`);
+
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout
+
+        const response = await fetch(url, {
+          signal: controller.signal,
+          headers: {
+            Accept: 'text/plain,application/json',
+          },
+        });
+        clearTimeout(timeoutId);
+
+        const text = await response.text();
+        console.log(`[Debug] Ollama root response:`, text);
+
+        if (text.includes('Ollama is running')) {
+          console.log(`[Debug] Ollama running confirmed via root endpoint`);
+          return {
+            name: providerName,
+            enabled: false,
+            isLocal: true,
+            isRunning: true,
+            lastChecked: new Date(),
+            responseTime: performance.now() - startTime,
+            url,
+          };
+        }
+      } catch (error) {
+        console.log(`[Debug] Ollama root check failed:`, error);
+
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+
+        if (errorMessage.includes('aborted')) {
+          return {
+            name: providerName,
+            enabled: false,
+            isLocal: true,
+            isRunning: false,
+            error: 'Connection timeout',
+            lastChecked: new Date(),
+            responseTime: performance.now() - startTime,
+            url,
+          };
+        }
+      }
+    }
+
+    // Try different endpoints based on provider
+    const checkUrls = [`${url}/api/health`, `${url}/v1/models`];
+    console.log(`[Debug] Checking additional endpoints:`, checkUrls);
+
+    const results = await Promise.all(
+      checkUrls.map(async (checkUrl) => {
+        try {
+          console.log(`[Debug] Trying endpoint: ${checkUrl}`);
+
+          const controller = new AbortController();
+          const timeoutId = setTimeout(() => controller.abort(), 5000);
+
+          const response = await fetch(checkUrl, {
+            signal: controller.signal,
+            headers: {
+              Accept: 'application/json',
+            },
+          });
+          clearTimeout(timeoutId);
+
+          const ok = response.ok;
+          console.log(`[Debug] Endpoint ${checkUrl} response:`, ok);
+
+          if (ok) {
+            try {
+              const data = await response.json();
+              console.log(`[Debug] Endpoint ${checkUrl} data:`, data);
+            } catch {
+              console.log(`[Debug] Could not parse JSON from ${checkUrl}`);
+            }
+          }
+
+          return ok;
+        } catch (error) {
+          console.log(`[Debug] Endpoint ${checkUrl} failed:`, error);
+          return false;
+        }
+      }),
+    );
+
+    const isRunning = results.some((result) => result);
+    console.log(`[Debug] Final status for ${providerName}:`, isRunning);
+
+    return {
+      name: providerName,
+      enabled: false,
+      isLocal: true,
+      isRunning,
+      lastChecked: new Date(),
+      responseTime: performance.now() - startTime,
+      url,
+    };
+  } catch (error) {
+    console.log(`[Debug] Provider check failed for ${providerName}:`, error);
+    return {
+      name: providerName,
+      enabled: false,
+      isLocal: true,
+      isRunning: false,
+      error: error instanceof Error ? error.message : 'Unknown error',
+      lastChecked: new Date(),
+      responseTime: performance.now() - startTime,
+      url,
+    };
+  }
+};

 export default function DebugTab() {
  const { providers } = useSettings();
-  const [activeProviders, setActiveProviders] = useState<string[]>([]);
+  const [activeProviders, setActiveProviders] = useState<ProviderStatus[]>([]);
+  const [updateMessage, setUpdateMessage] = useState<string>('');
+  const [systemInfo] = useState<SystemInfo>(getSystemInfo());
+  const [isCheckingUpdate, setIsCheckingUpdate] = useState(false);
+
+  const updateProviderStatuses = async () => {
+    if (!providers) {
+      return;
+    }
+
+    try {
+      const entries = Object.entries(providers) as [string, IProviderConfig][];
+      const statuses = entries
+        .filter(([, provider]) => LOCAL_PROVIDERS.includes(provider.name))
+        .map(async ([, provider]) => {
+          const envVarName =
+            provider.name.toLowerCase() === 'ollama'
+              ? 'OLLAMA_API_BASE_URL'
+              : provider.name.toLowerCase() === 'lmstudio'
+                ? 'LMSTUDIO_API_BASE_URL'
+                : `REACT_APP_${provider.name.toUpperCase()}_URL`;
+
+          // Access environment variables through import.meta.env
+          const url = import.meta.env[envVarName] || null;
+          console.log(`[Debug] Using URL for ${provider.name}:`, url, `(from ${envVarName})`);
+
+          const status = await checkProviderStatus(url, provider.name);
+
+          return {
+            ...status,
+            enabled: provider.settings.enabled ?? false,
+          };
+        });
+
+      Promise.all(statuses).then(setActiveProviders);
+    } catch (error) {
+      console.error('[Debug] Failed to update provider statuses:', error);
+    }
+  };
+
  useEffect(() => {
-    setActiveProviders(
-      Object.entries(providers)
-        .filter(([_key, provider]) => provider.settings.enabled)
-        .map(([_key, provider]) => provider.name),
-    );
+    updateProviderStatuses();
+
+    const interval = setInterval(updateProviderStatuses, 30000);
+
+    return () => clearInterval(interval);
  }, [providers]);

+  const handleCheckForUpdate = useCallback(async () => {
+    if (isCheckingUpdate) {
+      return;
+    }
+
+    try {
+      setIsCheckingUpdate(true);
+      setUpdateMessage('Checking for updates...');
+
+      const [originalResponse, forkResponse] = await Promise.all([
+        fetch(GITHUB_URLS.original),
+        fetch(GITHUB_URLS.fork),
+      ]);
+
+      if (!originalResponse.ok || !forkResponse.ok) {
+        throw new Error('Failed to fetch repository information');
+      }
+
+      const [originalData, forkData] = await Promise.all([
+        originalResponse.json() as Promise<{ sha: string }>,
+        forkResponse.json() as Promise<{ sha: string }>,
+      ]);
+
+      const originalCommitHash = originalData.sha;
+      const forkCommitHash = forkData.sha;
+      const isForked = versionHash === forkCommitHash && forkCommitHash !== originalCommitHash;
+
+      if (originalCommitHash !== versionHash) {
+        setUpdateMessage(
+          `Update available from original repository!\n` +
+            `Current: ${versionHash.slice(0, 7)}${isForked ? ' (forked)' : ''}\n` +
+            `Latest: ${originalCommitHash.slice(0, 7)}`,
+        );
+      } else {
+        setUpdateMessage('You are on the latest version from the original repository');
+      }
+    } catch (error) {
+      setUpdateMessage('Failed to check for updates');
+      console.error('[Debug] Failed to check for updates:', error);
+    } finally {
+      setIsCheckingUpdate(false);
+    }
+  }, [isCheckingUpdate]);
+
  const handleCopyToClipboard = useCallback(() => {
    const debugInfo = {
-      OS: navigator.platform,
-      Browser: navigator.userAgent,
-      ActiveFeatures: activeProviders,
-      BaseURLs: {
-        Ollama: process.env.REACT_APP_OLLAMA_URL,
-        OpenAI: process.env.REACT_APP_OPENAI_URL,
-        LMStudio: process.env.REACT_APP_LM_STUDIO_URL,
-      },
+      System: systemInfo,
+      Providers: activeProviders.map((provider) => ({
+        name: provider.name,
+        enabled: provider.enabled,
+        isLocal: provider.isLocal,
+        running: provider.isRunning,
+        error: provider.error,
+        lastChecked: provider.lastChecked,
+        responseTime: provider.responseTime,
+        url: provider.url,
+      })),
      Version: versionHash,
+      Timestamp: new Date().toISOString(),
    };
    navigator.clipboard.writeText(JSON.stringify(debugInfo, null, 2)).then(() => {
      alert('Debug information copied to clipboard!');
    });
-  }, [providers]);
+  }, [activeProviders, systemInfo]);

  return (
-    <div className="p-4">
-      <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Debug Tab</h3>
-      <button
-        onClick={handleCopyToClipboard}
-        className="bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 mb-4 transition-colors duration-200"
-      >
-        Copy to Clipboard
-      </button>
+    <div className="p-4 space-y-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-medium text-bolt-elements-textPrimary">Debug Information</h3>
+        <div className="flex gap-2">
+          <button
+            onClick={handleCopyToClipboard}
+            className="bg-bolt-elements-button-primary-background rounded-lg px-4 py-2 transition-colors duration-200 hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-button-primary-text"
+          >
+            Copy Debug Info
+          </button>
+          <button
+            onClick={handleCheckForUpdate}
+            disabled={isCheckingUpdate}
+            className={`bg-bolt-elements-button-primary-background rounded-lg px-4 py-2 transition-colors duration-200
+              ${!isCheckingUpdate ? 'hover:bg-bolt-elements-button-primary-backgroundHover' : 'opacity-75 cursor-not-allowed'}
+              text-bolt-elements-button-primary-text`}
+          >
+            {isCheckingUpdate ? 'Checking...' : 'Check for Updates'}
+          </button>
+        </div>
+      </div>

-      <h4 className="text-md font-medium text-bolt-elements-textPrimary">System Information</h4>
-      <p className="text-bolt-elements-textSecondary">OS: {navigator.platform}</p>
-      <p className="text-bolt-elements-textSecondary">Browser: {navigator.userAgent}</p>
+      {updateMessage && (
+        <div
+          className={`bg-bolt-elements-surface rounded-lg p-3 ${
+            updateMessage.includes('Update available') ? 'border-l-4 border-yellow-400' : ''
+          }`}
+        >
+          <p className="text-bolt-elements-textSecondary whitespace-pre-line">{updateMessage}</p>
+          {updateMessage.includes('Update available') && (
+            <div className="mt-3 text-sm">
+              <p className="font-medium text-bolt-elements-textPrimary">To update:</p>
+              <ol className="list-decimal ml-4 mt-1 text-bolt-elements-textSecondary">
+                <li>
+                  Pull the latest changes:{' '}
+                  <code className="bg-bolt-elements-surface-hover px-1 rounded">git pull upstream main</code>
+                </li>
+                <li>
+                  Install any new dependencies:{' '}
+                  <code className="bg-bolt-elements-surface-hover px-1 rounded">pnpm install</code>
+                </li>
+                <li>Restart the application</li>
+              </ol>
+            </div>
+          )}
+        </div>
+      )}

-      <h4 className="text-md font-medium text-bolt-elements-textPrimary mt-4">Active Features</h4>
-      <ul>
-        {activeProviders.map((name) => (
-          <li key={name} className="text-bolt-elements-textSecondary">
-            {name}
-          </li>
-        ))}
-      </ul>
+      <section className="space-y-4">
+        <div>
+          <h4 className="text-md font-medium text-bolt-elements-textPrimary mb-2">System Information</h4>
+          <div className="bg-bolt-elements-surface rounded-lg p-4">
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+              <div>
+                <p className="text-xs text-bolt-elements-textSecondary">Operating System</p>
+                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.os}</p>
+              </div>
+              <div>
+                <p className="text-xs text-bolt-elements-textSecondary">Browser</p>
+                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.browser}</p>
+              </div>
+              <div>
+                <p className="text-xs text-bolt-elements-textSecondary">Screen Resolution</p>
+                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.screen}</p>
+              </div>
+              <div>
+                <p className="text-xs text-bolt-elements-textSecondary">Language</p>
+                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.language}</p>
+              </div>
+              <div>
+                <p className="text-xs text-bolt-elements-textSecondary">Timezone</p>
+                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.timezone}</p>
+              </div>
+              <div>
+                <p className="text-xs text-bolt-elements-textSecondary">CPU Cores</p>
+                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.cores}</p>
+              </div>
+            </div>
+            <div className="mt-3 pt-3 border-t border-bolt-elements-surface-hover">
+              <p className="text-xs text-bolt-elements-textSecondary">Version</p>
+              <p className="text-sm font-medium text-bolt-elements-textPrimary font-mono">
+                {versionHash.slice(0, 7)}
+                <span className="ml-2 text-xs text-bolt-elements-textSecondary">
+                  ({new Date().toLocaleDateString()})
+                </span>
+              </p>
+            </div>
+          </div>
+        </div>

-      <h4 className="text-md font-medium text-bolt-elements-textPrimary mt-4">Base URLs</h4>
-      <ul>
-        <li className="text-bolt-elements-textSecondary">Ollama: {process.env.REACT_APP_OLLAMA_URL}</li>
-        <li className="text-bolt-elements-textSecondary">OpenAI: {process.env.REACT_APP_OPENAI_URL}</li>
-        <li className="text-bolt-elements-textSecondary">LM Studio: {process.env.REACT_APP_LM_STUDIO_URL}</li>
-      </ul>
+        <div>
+          <h4 className="text-md font-medium text-bolt-elements-textPrimary mb-2">Local LLM Status</h4>
+          <div className="bg-bolt-elements-surface rounded-lg">
+            <div className="grid grid-cols-1 divide-y">
+              {activeProviders.map((provider) => (
+                <div key={provider.name} className="p-3 flex flex-col space-y-2">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <div className="flex-shrink-0">
+                        <div
+                          className={`w-2 h-2 rounded-full ${
+                            !provider.enabled ? 'bg-gray-300' : provider.isRunning ? 'bg-green-400' : 'bg-red-400'
+                          }`}
+                        />
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-bolt-elements-textPrimary">{provider.name}</p>
+                        {provider.url && (
+                          <p className="text-xs text-bolt-elements-textSecondary truncate max-w-[300px]">
+                            {provider.url}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span
+                        className={`px-2 py-0.5 text-xs rounded-full ${
+                          provider.enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
+                        }`}
+                      >
+                        {provider.enabled ? 'Enabled' : 'Disabled'}
+                      </span>
+                      {provider.enabled && (
+                        <span
+                          className={`px-2 py-0.5 text-xs rounded-full ${
+                            provider.isRunning ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+                          }`}
+                        >
+                          {provider.isRunning ? 'Running' : 'Not Running'}
+                        </span>
+                      )}
+                    </div>
+                  </div>

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

 export default function FeaturesTab() {
-  const { debug, enableDebugMode, isLocalModel, enableLocalModels } = useSettings();
+  const { debug, enableDebugMode, isLocalModel, enableLocalModels, eventLogs, enableEventLogs } = useSettings();
  return (
    <div className="p-4 bg-bolt-elements-bg-depth-2 border border-bolt-elements-borderColor rounded-lg mb-4">
      <div className="mb-6">
@ -12,6 +12,10 @@ export default function FeaturesTab() {
          <span className="text-bolt-elements-textPrimary">Debug Info</span>
          <Switch className="ml-auto" checked={debug} onCheckedChange={enableDebugMode} />
        </div>
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-bolt-elements-textPrimary">Event Logs</span>
+          <Switch className="ml-auto" checked={eventLogs} onCheckedChange={enableEventLogs} />
+        </div>
      </div>

      <div className="mb-6 border-t border-bolt-elements-borderColor pt-4">
--- a/app/components/settings/providers/ProvidersTab.tsx
+++ b/app/components/settings/providers/ProvidersTab.tsx
@ -3,6 +3,7 @@ import { Switch } from '~/components/ui/Switch';
 import { useSettings } from '~/lib/hooks/useSettings';
 import { LOCAL_PROVIDERS, URL_CONFIGURABLE_PROVIDERS } from '~/lib/stores/settings';
 import type { IProviderConfig } from '~/types/model';
+import { logStore } from '~/lib/stores/logs';

 export default function ProvidersTab() {
  const { providers, updateProviderSettings, isLocalModel } = useSettings();
@ -49,11 +50,22 @@ export default function ProvidersTab() {
          className="flex flex-col mb-2 provider-item hover:bg-bolt-elements-bg-depth-3 p-4 rounded-lg border border-bolt-elements-borderColor "
        >
          <div className="flex items-center justify-between mb-2">
-            <span className="text-bolt-elements-textPrimary">{provider.name}</span>
+            <div className="flex items-center gap-2">
+              <img src={`/icons/${provider.name}.svg`} alt={`${provider.name} icon`} className="w-6 h-6 dark:invert" />
+              <span className="text-bolt-elements-textPrimary">{provider.name}</span>
+            </div>
            <Switch
              className="ml-auto"
              checked={provider.settings.enabled}
-              onCheckedChange={(enabled) => updateProviderSettings(provider.name, { ...provider.settings, enabled })}
+              onCheckedChange={(enabled) => {
+                updateProviderSettings(provider.name, { ...provider.settings, enabled });
+
+                if (enabled) {
+                  logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
+                } else {
+                  logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
+                }
+              }}
            />
          </div>
          {/* Base URL input for configurable providers */}
@ -63,9 +75,14 @@ export default function ProvidersTab() {
              <input
                type="text"
                value={provider.settings.baseUrl || ''}
-                onChange={(e) =>
-                  updateProviderSettings(provider.name, { ...provider.settings, baseUrl: e.target.value })
-                }
+                onChange={(e) => {
+                  const newBaseUrl = e.target.value;
+                  updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl });
+                  logStore.logProvider(`Base URL updated for ${provider.name}`, {
+                    provider: provider.name,
+                    baseUrl: newBaseUrl,
+                  });
+                }}
                placeholder={`Enter ${provider.name} base URL`}
                className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
              />
--- a/app/components/sidebar/Menu.client.tsx
+++ b/app/components/sidebar/Menu.client.tsx
@ -35,6 +35,25 @@ const menuVariants = {

 type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;

+function CurrentDateTime() {
+  const [dateTime, setDateTime] = useState(new Date());
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setDateTime(new Date());
+    }, 60000); // Update every minute
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="flex items-center gap-2 px-4 py-3 font-bold text-gray-700 dark:text-gray-300 border-b border-bolt-elements-borderColor">
+      <div className="h-4 w-4 i-ph:clock-thin" />
+      {dateTime.toLocaleDateString()} {dateTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+    </div>
+  );
+}
+
 export const Menu = () => {
  const { duplicateCurrentChat, exportChat } = useChatHistory();
  const menuRef = useRef<HTMLDivElement>(null);
@ -126,18 +145,17 @@ export const Menu = () => {
      variants={menuVariants}
      className="flex selection-accent flex-col side-menu fixed top-0 w-[350px] h-full bg-bolt-elements-background-depth-2 border-r rounded-r-3xl border-bolt-elements-borderColor z-sidebar shadow-xl shadow-bolt-elements-sidebar-dropdownShadow text-sm"
    >
-      <div className="flex items-center h-[var(--header-height)]">{/* Placeholder */}</div>
+      <div className="h-[60px]" /> {/* Spacer for top margin */}
+      <CurrentDateTime />
      <div className="flex-1 flex flex-col h-full w-full overflow-hidden">
        <div className="p-4 select-none">
          <a
            href="/"
-            className="flex gap-2 items-center bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText hover:bg-bolt-elements-sidebar-buttonBackgroundHover rounded-md p-2 transition-theme"
+            className="flex gap-2 items-center bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText hover:bg-bolt-elements-sidebar-buttonBackgroundHover rounded-md p-2 transition-theme mb-4"
          >
            <span className="inline-block i-bolt:chat scale-110" />
            Start new chat
          </a>
-        </div>
-        <div className="pl-4 pr-4 my-2">
          <div className="relative w-full">
            <input
              className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
--- a/app/lib/hooks/useSettings.tsx
+++ b/app/lib/hooks/useSettings.tsx
@ -1,12 +1,20 @@
 import { useStore } from '@nanostores/react';
-import { isDebugMode, isLocalModelsEnabled, LOCAL_PROVIDERS, providersStore } from '~/lib/stores/settings';
+import {
+  isDebugMode,
+  isEventLogsEnabled,
+  isLocalModelsEnabled,
+  LOCAL_PROVIDERS,
+  providersStore,
+} from '~/lib/stores/settings';
 import { useCallback, useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
 import type { IProviderSetting, ProviderInfo } from '~/types/model';
+import { logStore } from '~/lib/stores/logs'; // assuming logStore is imported from this location

 export function useSettings() {
  const providers = useStore(providersStore);
  const debug = useStore(isDebugMode);
+  const eventLogs = useStore(isEventLogsEnabled);
  const isLocalModel = useStore(isLocalModelsEnabled);
  const [activeProviders, setActiveProviders] = useState<ProviderInfo[]>([]);

@ -39,6 +47,13 @@ export function useSettings() {
      isDebugMode.set(savedDebugMode === 'true');
    }

+    // load event logs from cookies
+    const savedEventLogs = Cookies.get('isEventLogsEnabled');
+
+    if (savedEventLogs) {
+      isEventLogsEnabled.set(savedEventLogs === 'true');
+    }
+
    // load local models from cookies
    const savedLocalModels = Cookies.get('isLocalModelsEnabled');

@ -80,11 +95,19 @@ export function useSettings() {

  const enableDebugMode = useCallback((enabled: boolean) => {
    isDebugMode.set(enabled);
+    logStore.logSystem(`Debug mode ${enabled ? 'enabled' : 'disabled'}`);
    Cookies.set('isDebugEnabled', String(enabled));
  }, []);

+  const enableEventLogs = useCallback((enabled: boolean) => {
+    isEventLogsEnabled.set(enabled);
+    logStore.logSystem(`Event logs ${enabled ? 'enabled' : 'disabled'}`);
+    Cookies.set('isEventLogsEnabled', String(enabled));
+  }, []);
+
  const enableLocalModels = useCallback((enabled: boolean) => {
    isLocalModelsEnabled.set(enabled);
+    logStore.logSystem(`Local models ${enabled ? 'enabled' : 'disabled'}`);
    Cookies.set('isLocalModelsEnabled', String(enabled));
  }, []);

@ -94,6 +117,8 @@ export function useSettings() {
    updateProviderSettings,
    debug,
    enableDebugMode,
+    eventLogs,
+    enableEventLogs,
    isLocalModel,
    enableLocalModels,
  };
--- a/app/lib/persistence/useChatHistory.ts
+++ b/app/lib/persistence/useChatHistory.ts
@ -4,6 +4,7 @@ import { atom } from 'nanostores';
 import type { Message } from 'ai';
 import { toast } from 'react-toastify';
 import { workbenchStore } from '~/lib/stores/workbench';
+import { logStore } from '~/lib/stores/logs'; // Import logStore
 import {
  getMessages,
  getNextId,
@ -43,6 +44,8 @@ export function useChatHistory() {
      setReady(true);

      if (persistenceEnabled) {
+        const error = new Error('Chat persistence is unavailable');
+        logStore.logError('Chat persistence initialization failed', error);
        toast.error('Chat persistence is unavailable');
      }

@ -69,6 +72,7 @@ export function useChatHistory() {
          setReady(true);
        })
        .catch((error) => {
+          logStore.logError('Failed to load chat messages', error);
          toast.error(error.message);
        });
    }
--- a/app/lib/stores/logs.ts
+++ b/app/lib/stores/logs.ts
@ -0,0 +1,149 @@
+import { atom, map } from 'nanostores';
+import Cookies from 'js-cookie';
+import { createScopedLogger } from '~/utils/logger';
+
+const logger = createScopedLogger('LogStore');
+
+export interface LogEntry {
+  id: string;
+  timestamp: string;
+  level: 'info' | 'warning' | 'error' | 'debug';
+  message: string;
+  details?: Record<string, any>;
+  category: 'system' | 'provider' | 'user' | 'error';
+}
+
+const MAX_LOGS = 1000; // Maximum number of logs to keep in memory
+
+class LogStore {
+  private _logs = map<Record<string, LogEntry>>({});
+  showLogs = atom(true);
+
+  constructor() {
+    // Load saved logs from cookies on initialization
+    this._loadLogs();
+  }
+
+  private _loadLogs() {
+    const savedLogs = Cookies.get('eventLogs');
+
+    if (savedLogs) {
+      try {
+        const parsedLogs = JSON.parse(savedLogs);
+        this._logs.set(parsedLogs);
+      } catch (error) {
+        logger.error('Failed to parse logs from cookies:', error);
+      }
+    }
+  }
+
+  private _saveLogs() {
+    const currentLogs = this._logs.get();
+    Cookies.set('eventLogs', JSON.stringify(currentLogs));
+  }
+
+  private _generateId(): string {
+    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  private _trimLogs() {
+    const currentLogs = Object.entries(this._logs.get());
+
+    if (currentLogs.length > MAX_LOGS) {
+      const sortedLogs = currentLogs.sort(
+        ([, a], [, b]) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
+      );
+      const newLogs = Object.fromEntries(sortedLogs.slice(0, MAX_LOGS));
+      this._logs.set(newLogs);
+    }
+  }
+
+  addLog(
+    message: string,
+    level: LogEntry['level'] = 'info',
+    category: LogEntry['category'] = 'system',
+    details?: Record<string, any>,
+  ) {
+    const id = this._generateId();
+    const entry: LogEntry = {
+      id,
+      timestamp: new Date().toISOString(),
+      level,
+      message,
+      details,
+      category,
+    };
+
+    this._logs.setKey(id, entry);
+    this._trimLogs();
+    this._saveLogs();
+
+    return id;
+  }
+
+  // System events
+  logSystem(message: string, details?: Record<string, any>) {
+    return this.addLog(message, 'info', 'system', details);
+  }
+
+  // Provider events
+  logProvider(message: string, details?: Record<string, any>) {
+    return this.addLog(message, 'info', 'provider', details);
+  }
+
+  // User actions
+  logUserAction(message: string, details?: Record<string, any>) {
+    return this.addLog(message, 'info', 'user', details);
+  }
+
+  // Error events
+  logError(message: string, error?: Error | unknown, details?: Record<string, any>) {
+    const errorDetails = {
+      ...(details || {}),
+      error:
+        error instanceof Error
+          ? {
+              message: error.message,
+              stack: error.stack,
+            }
+          : error,
+    };
+    return this.addLog(message, 'error', 'error', errorDetails);
+  }
+
+  // Warning events
+  logWarning(message: string, details?: Record<string, any>) {
+    return this.addLog(message, 'warning', 'system', details);
+  }
+
+  // Debug events
+  logDebug(message: string, details?: Record<string, any>) {
+    return this.addLog(message, 'debug', 'system', details);
+  }
+
+  clearLogs() {
+    this._logs.set({});
+    this._saveLogs();
+  }
+
+  getLogs() {
+    return Object.values(this._logs.get()).sort(
+      (a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
+    );
+  }
+
+  getFilteredLogs(level?: LogEntry['level'], category?: LogEntry['category'], searchQuery?: string) {
+    return this.getLogs().filter((log) => {
+      const matchesLevel = !level || level === 'debug' || log.level === level;
+      const matchesCategory = !category || log.category === category;
+      const matchesSearch =
+        !searchQuery ||
+        log.message.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        JSON.stringify(log.details).toLowerCase().includes(searchQuery.toLowerCase());
+
+      return matchesLevel && matchesCategory && matchesSearch;
+    });
+  }
+}
+
+export const logStore = new LogStore();
--- a/app/lib/stores/settings.ts
+++ b/app/lib/stores/settings.ts
@ -43,4 +43,6 @@ export const providersStore = map<ProviderSetting>(initialProviderSettings);

 export const isDebugMode = atom(false);

+export const isEventLogsEnabled = atom(false);
+
 export const isLocalModelsEnabled = atom(true);
--- a/app/lib/stores/theme.ts
+++ b/app/lib/stores/theme.ts
@ -1,4 +1,5 @@
 import { atom } from 'nanostores';
+import { logStore } from './logs';

 export type Theme = 'dark' | 'light';

@ -26,10 +27,8 @@ function initStore() {
 export function toggleTheme() {
  const currentTheme = themeStore.get();
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-
  themeStore.set(newTheme);
-
+  logStore.logSystem(`Theme changed to ${newTheme} mode`);
  localStorage.setItem(kTheme, newTheme);
-
  document.querySelector('html')?.setAttribute('data-theme', newTheme);
 }
--- a/app/root.tsx
+++ b/app/root.tsx
@ -78,6 +78,23 @@ export function Layout({ children }: { children: React.ReactNode }) {
  );
 }

+import { logStore } from './lib/stores/logs';
+
 export default function App() {
-  return <Outlet />;
+  const theme = useStore(themeStore);
+
+  useEffect(() => {
+    logStore.logSystem('Application initialized', {
+      theme,
+      platform: navigator.platform,
+      userAgent: navigator.userAgent,
+      timestamp: new Date().toISOString(),
+    });
+  }, []);
+
+  return (
+    <Layout>
+      <Outlet />
+    </Layout>
+  );
 }
--- a/app/types/global.d.ts
+++ b/app/types/global.d.ts
@ -3,3 +3,11 @@ interface Window {
  webkitSpeechRecognition: typeof SpeechRecognition;
  SpeechRecognition: typeof SpeechRecognition;
 }
+
+interface Performance {
+  memory?: {
+    jsHeapSizeLimit: number;
+    totalJSHeapSize: number;
+    usedJSHeapSize: number;
+  };
+}
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@ -2,6 +2,7 @@ import Cookies from 'js-cookie';
 import type { ModelInfo, OllamaApiResponse, OllamaModel } from './types';
 import type { ProviderInfo, IProviderSetting } from '~/types/model';
 import { createScopedLogger } from './logger';
+import { logStore } from '~/lib/stores/logs';

 export const WORK_DIR_NAME = 'project';
 export const WORK_DIR = `/home/${WORK_DIR_NAME}`;
@ -373,12 +374,6 @@ const getOllamaBaseUrl = (settings?: IProviderSetting) => {
 };

 async function getOllamaModels(apiKeys?: Record<string, string>, settings?: IProviderSetting): Promise<ModelInfo[]> {
-  /*
-   * if (typeof window === 'undefined') {
-   * return [];
-   * }
-   */
-
  try {
    const baseUrl = getOllamaBaseUrl(settings);
    const response = await fetch(`${baseUrl}/api/tags`);
@ -391,7 +386,9 @@ async function getOllamaModels(apiKeys?: Record<string, string>, settings?: IPro
      maxTokenAllowed: 8000,
    }));
  } catch (e: any) {
+    logStore.logError('Failed to get Ollama models', e, { baseUrl: settings?.baseUrl });
    logger.warn('Failed to get Ollama models: ', e.message || '');
+
    return [];
  }
 }
@ -480,7 +477,9 @@ async function getLMStudioModels(_apiKeys?: Record<string, string>, settings?: I
      provider: 'LMStudio',
    }));
  } catch (e: any) {
+    logStore.logError('Failed to get LMStudio models', e, { baseUrl: settings?.baseUrl });
    logger.warn('Failed to get LMStudio models: ', e.message || '');
+
    return [];
  }
 }
@ -499,6 +498,7 @@ async function initializeModelList(providerSettings?: Record<string, IProviderSe
      }
    }
  } catch (error: any) {
+    logStore.logError('Failed to fetch API keys from cookies', error);
    logger.warn(`Failed to fetch apikeys from cookies: ${error?.message}`);
  }
  MODEL_LIST = [
--- a/public/icons/Anthropic.svg
+++ b/public/icons/Anthropic.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2L2 19.5455H22L12 2ZM12 6.5L18.5 18H5.5L12 6.5Z" fill="#000000"/>
+</svg>
--- a/public/icons/Cohere.svg
+++ b/public/icons/Cohere.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM15 6H9C7.34 6 6 7.34 6 9V15C6 16.66 7.34 18 9 18H15C16.66 18 18 16.66 18 15V9C18 7.34 16.66 6 15 6Z" fill="#000000"/>
+</svg>
--- a/public/icons/Deepseek.svg
+++ b/public/icons/Deepseek.svg
@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21.5 12c0 5.25-4.25 9.5-9.5 9.5S2.5 17.25 2.5 12 6.75 2.5 12 2.5s9.5 4.25 9.5 9.5zM12 4.5c-4.136 0-7.5 3.364-7.5 7.5 0 4.136 3.364 7.5 7.5 7.5 4.136 0 7.5-3.364 7.5-7.5 0-4.136-3.364-7.5-7.5-7.5zm3.5 7.5c0 1.933-1.567 3.5-3.5 3.5S8.5 13.933 8.5 12 10.067 8.5 12 8.5s3.5 1.567 3.5 3.5z" fill="#000000"/>
+    <path d="M15.5 7.5c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5z" fill="#000000"/>
+</svg>
--- a/public/icons/Google.svg
+++ b/public/icons/Google.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" fill="#000000"/>
+</svg>
--- a/public/icons/Groq.svg
+++ b/public/icons/Groq.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2L2 7V17L12 22L22 17V7L12 2ZM12 4.618L19.236 8.236L12 11.854L4.764 8.236L12 4.618ZM4 9.618L11 13.146V18.382L4 14.854V9.618ZM13 18.382V13.146L20 9.618V14.854L13 18.382Z" fill="#000000"/>
+</svg>
--- a/public/icons/HuggingFace.svg
+++ b/public/icons/HuggingFace.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.844 2.5c-.616 0-1.22.117-1.787.346a4.654 4.654 0 0 0-2.67-.346c-2.63.346-4.195 2.827-3.496 5.535.467 1.82 1.157 3.214 2.67 3.907v1.012c0 2.363 1.947 4.309 4.309 4.309 2.362 0 4.309-1.946 4.309-4.309v-.957c1.56-.693 2.25-2.143 2.67-3.962.7-2.708-.865-5.19-3.496-5.535a4.654 4.654 0 0 0-2.509.346zm.18 3.27a.82.82 0 0 1 .82.82.82.82 0 0 1-.82.819.82.82 0 0 1-.82-.82.82.82 0 0 1 .82-.819zm-3.725 0a.82.82 0 0 1 .82.82.82.82 0 0 1-.82.819.82.82 0 0 1-.82-.82.82.82 0 0 1 .82-.819zm3.95 3.158c-.484 1.161-1.55 1.955-2.786 1.955-1.237 0-2.302-.794-2.786-1.955-.064-.154.088-.316.251-.27.733.205 1.624.329 2.535.329.911 0 1.802-.124 2.535-.33.163-.045.315.117.251.271z" fill="#000000"/>
+</svg>
--- a/public/icons/LMStudio.svg
+++ b/public/icons/LMStudio.svg
@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5 4h14c.6 0 1 .4 1 1v14c0 .6-.4 1-1 1H5c-.6 0-1-.4-1-1V5c0-.6.4-1 1-1zm7 3c-2.2 0-4 1.8-4 4 0 1.5.8 2.8 2 3.4v1.6c0 1.1.9 2 2 2s2-.9 2-2v-1.6c1.2-.7 2-2 2-3.4 0-2.2-1.8-4-4-4zm0 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z" fill="#000000"/>
+    <path d="M9 8h2v2H9zm4 0h2v2h-2z" fill="#000000"/>
+</svg>
--- a/public/icons/Mistral.svg
+++ b/public/icons/Mistral.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12 4C16.418 4 20 7.582 20 12C20 16.418 16.418 20 12 20C7.582 20 4 16.418 4 12C4 7.582 7.582 4 12 4ZM12 6L7 18H17L12 6ZM12 9.5L14.5 16H9.5L12 9.5Z" fill="#000000"/>
+</svg>
--- a/public/icons/Ollama.svg
+++ b/public/icons/Ollama.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12 4.5C16.142 4.5 19.5 7.858 19.5 12C19.5 16.142 16.142 19.5 12 19.5C7.858 19.5 4.5 16.142 4.5 12C4.5 7.858 7.858 4.5 12 4.5ZM12 7C9.239 7 7 9.239 7 12C7 14.761 9.239 17 12 17C14.761 17 17 14.761 17 12C17 9.239 14.761 7 12 7Z" fill="#000000"/>
+</svg>
--- a/public/icons/OpenAI.svg
+++ b/public/icons/OpenAI.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" fill="#000000"/>
+</svg>
--- a/public/icons/OpenAILike.svg
+++ b/public/icons/OpenAILike.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.282 11.846c0-.813-.195-1.618-.57-2.341a4.757 4.757 0 0 0-1.573-1.724 4.813 4.813 0 0 0 .21-1.425c0-.813-.195-1.618-.57-2.341a4.846 4.846 0 0 0-1.557-1.724A4.846 4.846 0 0 0 16.026 1.5a4.846 4.846 0 0 0-2.341.195 4.846 4.846 0 0 0-1.724 1.557 4.813 4.813 0 0 0-1.425-.21c-.813 0-1.618.195-2.341.57a4.846 4.846 0 0 0-1.724 1.557A4.846 4.846 0 0 0 5.5 7.974c0 .488.065.975.195 1.441a4.757 4.757 0 0 0-1.573 1.724 4.813 4.813 0 0 0-.57 2.341c0 .813.195 1.618.57 2.341a4.757 4.757 0 0 0 1.573 1.724 4.813 4.813 0 0 0-.21 1.425c0 .813.195 1.618.57 2.341a4.846 4.846 0 0 0 1.557 1.724 4.846 4.846 0 0 0 2.195.791c.813 0 1.618-.195 2.341-.57a4.846 4.846 0 0 0 1.724-1.557c.456.13.928.195 1.425.195.813 0 1.618-.195 2.341-.57a4.846 4.846 0 0 0 1.724-1.557 4.846 4.846 0 0 0 .791-2.195c0-.488-.065-.975-.195-1.441a4.757 4.757 0 0 0 1.573-1.724c.375-.723.57-1.528.57-2.341z" fill="none" stroke="#000000" stroke-width="1.5"/>
+</svg>
--- a/public/icons/OpenRouter.svg
+++ b/public/icons/OpenRouter.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2L4.5 6V18L12 22L19.5 18V6L12 2ZM12 4.236L17.14 7L12 9.764L6.86 7L12 4.236ZM6.5 8.764L11.5 11.464V16.764L6.5 14.064V8.764ZM12.5 16.764V11.464L17.5 8.764V14.064L12.5 16.764Z" fill="#000000"/>
+</svg>
--- a/public/icons/Together.svg
+++ b/public/icons/Together.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM15 6H9C7.34 6 6 7.34 6 9V15C6 16.66 7.34 18 9 18H15C16.66 18 18 16.66 18 15V9C18 7.34 16.66 6 15 6ZM16 15C16 15.55 15.55 16 15 16H9C8.45 16 8 15.55 8 15V9C8 8.45 8.45 8 9 8H15C15.55 8 16 8.45 16 9V15Z" fill="#000000"/>
+</svg>
--- a/public/icons/xAI.svg
+++ b/public/icons/xAI.svg
@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.5 3L9 12L3.5 21H6.5L10.5 14L14.5 21H17.5L12 12L17.5 3H14.5L10.5 10L6.5 3H3.5Z" fill="#000000"/>
+    <path d="M18 3L20.5 7L23 3H18Z" fill="#000000"/>
+</svg>
				`@ -1 +1,2 @@`
				`{ "commit": "eeafc12522b184dcbded28c5c6606e4a23e6849f" }`