ui refactor

app/lib/stores/logs.ts

@@ -10,7 +10,10 @@ export interface LogEntry {
   level: 'info' | 'warning' | 'error' | 'debug';
   message: string;
   details?: Record<string, any>;
-  category: 'system' | 'provider' | 'user' | 'error';
+  category: 'system' | 'provider' | 'user' | 'error' | 'api' | 'auth' | 'database' | 'network';
+  subCategory?: string;
+  duration?: number;
+  statusCode?: number;
 }
 
 const MAX_LOGS = 1000; // Maximum number of logs to keep in memory
@@ -101,18 +104,76 @@ class LogStore {
     return this.addLog(message, 'info', 'user', details);
   }
 
+  // API Connection Logging
+  logAPIRequest(endpoint: string, method: string, duration: number, statusCode: number, details?: Record<string, any>) {
+    const message = `${method} ${endpoint} - ${statusCode} (${duration}ms)`;
+    const level = statusCode >= 400 ? 'error' : statusCode >= 300 ? 'warning' : 'info';
+
+    return this.addLog(message, level, 'api', {
+      ...details,
+      endpoint,
+      method,
+      duration,
+      statusCode,
+      timestamp: new Date().toISOString(),
+    });
+  }
+
+  // Authentication Logging
+  logAuth(
+    action: 'login' | 'logout' | 'token_refresh' | 'key_validation',
+    success: boolean,
+    details?: Record<string, any>,
+  ) {
+    const message = `Auth ${action} - ${success ? 'Success' : 'Failed'}`;
+    const level = success ? 'info' : 'error';
+
+    return this.addLog(message, level, 'auth', {
+      ...details,
+      action,
+      success,
+      timestamp: new Date().toISOString(),
+    });
+  }
+
+  // Network Status Logging
+  logNetworkStatus(status: 'online' | 'offline' | 'reconnecting' | 'connected', details?: Record<string, any>) {
+    const message = `Network ${status}`;
+    const level = status === 'offline' ? 'error' : status === 'reconnecting' ? 'warning' : 'info';
+
+    return this.addLog(message, level, 'network', {
+      ...details,
+      status,
+      timestamp: new Date().toISOString(),
+    });
+  }
+
+  // Database Operations Logging
+  logDatabase(operation: string, success: boolean, duration: number, details?: Record<string, any>) {
+    const message = `DB ${operation} - ${success ? 'Success' : 'Failed'} (${duration}ms)`;
+    const level = success ? 'info' : 'error';
+
+    return this.addLog(message, level, 'database', {
+      ...details,
+      operation,
+      success,
+      duration,
+      timestamp: new Date().toISOString(),
+    });
+  }
+
   // 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,
-    };
+    const errorDetails =
+      error instanceof Error
+        ? {
+            name: error.name,
+            message: error.message,
+            stack: error.stack,
+            ...details,
+          }
+        : { error, ...details };
+
     return this.addLog(message, 'error', 'error', errorDetails);
   }
 

app/lib/stores/settings.ts

@@ -2,6 +2,9 @@ import { atom, map } from 'nanostores';
 import { workbenchStore } from './workbench';
 import { PROVIDER_LIST } from '~/utils/constants';
 import type { IProviderConfig } from '~/types/model';
+import type { TabVisibilityConfig, TabWindowConfig } from '~/components/settings/settings.types';
+import { DEFAULT_TAB_CONFIG } from '~/components/settings/settings.types';
+import Cookies from 'js-cookie';
 
 export interface Shortcut {
   key: string;
@@ -46,7 +49,9 @@ export const providersStore = map<ProviderSetting>(initialProviderSettings);
 
 export const isDebugMode = atom(false);
 
-export const isEventLogsEnabled = atom(false);
+// Initialize event logs from cookie or default to false
+const savedEventLogs = Cookies.get('isEventLogsEnabled');
+export const isEventLogsEnabled = atom(savedEventLogs === 'true');
 
 export const isLocalModelsEnabled = atom(true);
 
@@ -56,3 +61,48 @@ export const latestBranchStore = atom(false);
 
 export const autoSelectStarterTemplate = atom(false);
 export const enableContextOptimizationStore = atom(false);
+
+// Initialize tab configuration from cookie or default
+const savedTabConfig = Cookies.get('tabConfiguration');
+const initialTabConfig: TabWindowConfig = savedTabConfig
+  ? JSON.parse(savedTabConfig)
+  : {
+      userTabs: DEFAULT_TAB_CONFIG.filter((tab) => tab.window === 'user'),
+      developerTabs: DEFAULT_TAB_CONFIG.filter((tab) => tab.window === 'developer'),
+    };
+
+export const tabConfigurationStore = map<TabWindowConfig>(initialTabConfig);
+
+// Helper function to update tab configuration
+export const updateTabConfiguration = (config: TabVisibilityConfig) => {
+  const currentConfig = tabConfigurationStore.get();
+  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,
+  };
+
+  tabConfigurationStore.set(newConfig);
+  Cookies.set('tabConfiguration', JSON.stringify(newConfig));
+};
+
+// Helper function to reset tab configuration
+export const resetTabConfiguration = () => {
+  const defaultConfig: TabWindowConfig = {
+    userTabs: DEFAULT_TAB_CONFIG.filter((tab) => tab.window === 'user'),
+    developerTabs: DEFAULT_TAB_CONFIG.filter((tab) => tab.window === 'developer'),
+  };
+  tabConfigurationStore.set(defaultConfig);
+  Cookies.set('tabConfiguration', JSON.stringify(defaultConfig));
+};