From a180928714eb16fb7cdf6d8c84f4603fe5ff080f Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 04:40:33 +0300
Subject: [PATCH 01/39] feat: add export entry points for npm package
 consumption

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/exports/components.ts | 15 +++++++++++++++
 src/exports/index.ts      |  4 ++++
 src/exports/providers.ts  |  4 ++++
 src/exports/types.ts      | 26 ++++++++++++++++++++++++++
 4 files changed, 49 insertions(+)
 create mode 100644 src/exports/components.ts
 create mode 100644 src/exports/index.ts
 create mode 100644 src/exports/providers.ts
 create mode 100644 src/exports/types.ts

diff --git a/src/exports/components.ts b/src/exports/components.ts
new file mode 100644
index 0000000..73d304c
--- /dev/null
+++ b/src/exports/components.ts
@@ -0,0 +1,15 @@
+// src/exports/components.ts
+// Re-export UI components for npm consumers
+export { QueryEditor } from '../components/QueryEditor'
+export type { QueryEditorRef } from '../components/QueryEditor'
+export { ResultsGrid } from '../components/ResultsGrid'
+export { SchemaDiagram } from '../components/SchemaDiagram'
+export { DataCharts } from '../components/DataCharts'
+export { CodeGenerator } from '../components/CodeGenerator'
+export { TestDataGenerator } from '../components/TestDataGenerator'
+export { VisualExplain } from '../components/VisualExplain'
+export { NL2SQLPanel } from '../components/NL2SQLPanel'
+export { DataProfiler } from '../components/DataProfiler'
+export { QuerySafetyDialog } from '../components/QuerySafetyDialog'
+export { ConnectionModal } from '../components/ConnectionModal'
+export { SchemaExplorer } from '../components/schema-explorer'
diff --git a/src/exports/index.ts b/src/exports/index.ts
new file mode 100644
index 0000000..32bd019
--- /dev/null
+++ b/src/exports/index.ts
@@ -0,0 +1,4 @@
+// src/exports/index.ts
+export * from './types'
+export * from './providers'
+export * from './components'
diff --git a/src/exports/providers.ts b/src/exports/providers.ts
new file mode 100644
index 0000000..634f00e
--- /dev/null
+++ b/src/exports/providers.ts
@@ -0,0 +1,4 @@
+// src/exports/providers.ts
+// Re-export database and LLM provider factories
+export { createDatabaseProvider, getOrCreateProvider, removeProvider, clearProviderCache, getProviderCacheStats } from '../lib/db/factory'
+export { createLLMProvider, getDefaultProvider, resetDefaultProvider } from '../lib/llm/factory'
diff --git a/src/exports/types.ts b/src/exports/types.ts
new file mode 100644
index 0000000..770f062
--- /dev/null
+++ b/src/exports/types.ts
@@ -0,0 +1,26 @@
+// src/exports/types.ts
+// Re-export all public types for npm consumers
+export type {
+  DatabaseType,
+  ConnectionEnvironment,
+  SSLMode,
+  SSLConfig,
+  SSHTunnelConfig,
+  DatabaseConnection,
+  TableSchema,
+  ColumnSchema,
+  IndexSchema,
+  ForeignKeySchema,
+  QueryPagination,
+  QueryResult,
+  QueryTab,
+  QueryHistoryItem,
+  SavedQuery,
+  SchemaSnapshot,
+  SavedChartConfig,
+  AggregationType,
+  DateGrouping,
+} from '../lib/types'
+
+// Also export provider types
+export type { ProviderCapabilities } from '../lib/db/types'

From 1ef919fb8808f547d702257f8a281274e2981947 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 04:44:42 +0300
Subject: [PATCH 02/39] chore: update .gitignore to exclude files

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index eb337a2..8e96b0d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -98,3 +98,5 @@ seed-connections.yaml
 
 .playwright-mcp/*.png
 
+npmjs-token
+

From dba370c77263e2d05a520b3d02ddf916d97be807 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 04:46:12 +0300
Subject: [PATCH 03/39] feat: add API adapter pattern for platform integration

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/ConnectionModal.tsx   |  6 +-
 src/components/DataProfiler.tsx      | 80 ++++++++++++++--------
 src/components/NL2SQLPanel.tsx       | 54 +++++++++------
 src/components/QueryEditor.tsx       |  6 +-
 src/components/QuerySafetyDialog.tsx | 52 +++++++++------
 src/hooks/use-ai-chat.ts             | 99 ++++++++++++++++------------
 src/hooks/use-connection-form.ts     | 71 +++++++++++++-------
 7 files changed, 229 insertions(+), 139 deletions(-)

diff --git a/src/components/ConnectionModal.tsx b/src/components/ConnectionModal.tsx
index a89ac61..d6ffbb4 100644
--- a/src/components/ConnectionModal.tsx
+++ b/src/components/ConnectionModal.tsx
@@ -19,9 +19,11 @@ interface ConnectionModalProps {
   onClose: () => void;
   onConnect: (conn: DatabaseConnection) => void;
   editConnection?: DatabaseConnection | null;
+  /** Optional API adapter: when provided, bypasses the built-in /api/db/test-connection fetch. */
+  onTestConnection?: (connection: DatabaseConnection) => Promise<{ success: boolean; latency?: number; error?: string }>;
 }
 
-export function ConnectionModal({ isOpen, onClose, onConnect, editConnection }: ConnectionModalProps) {
+export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, onTestConnection }: ConnectionModalProps) {
   const isMobile = useIsMobile();
   const {
     // Connection fields
@@ -73,7 +75,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection }:
 
     // Derived data
     dbTypes,
-  } = useConnectionForm({ isOpen, onClose, onConnect, editConnection });
+  } = useConnectionForm({ isOpen, onClose, onConnect, editConnection, onTestConnection });
 
   const formContent = (
     <>
diff --git a/src/components/DataProfiler.tsx b/src/components/DataProfiler.tsx
index 4fb2b78..df727d3 100644
--- a/src/components/DataProfiler.tsx
+++ b/src/components/DataProfiler.tsx
@@ -33,6 +33,10 @@ interface DataProfilerProps {
   connection: DatabaseConnection | null;
   schemaContext?: string;
   databaseType?: string;
+  /** Optional API adapter: when provided, bypasses the built-in /api/db/profile fetch. */
+  onProfile?: (params: { connectionId: string; tableName: string }) => Promise<ProfileData>;
+  /** Optional API adapter: when provided, bypasses the built-in /api/ai/describe-schema fetch. */
+  onDescribeSchema?: (params: { tableName: string; schemaContext: string }) => Promise<string>;
 }
 
 export function DataProfiler({
@@ -43,6 +47,8 @@ export function DataProfiler({
   connection,
   schemaContext,
   databaseType,
+  onProfile,
+  onDescribeSchema,
 }: DataProfilerProps) {
   const [isLoading, setIsLoading] = useState(false);
   const [profile, setProfile] = useState<ProfileData | null>(null);
@@ -74,19 +80,28 @@ export function DataProfiler({
     setError(null);
 
     try {
-      const columns = tableSchema.columns?.map(c => c.name) || [];
-      const response = await fetch('/api/db/profile', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ connection, tableName, columns }),
-      });
+      let data: ProfileData;
 
-      if (!response.ok) {
-        const err = await response.json();
-        throw new Error(err.error || 'Profile failed');
+      if (onProfile) {
+        // Platform adapter: use callback instead of fetch
+        data = await onProfile({ connectionId: connection.id, tableName });
+      } else {
+        // Default: existing fetch behavior
+        const columns = tableSchema.columns?.map(c => c.name) || [];
+        const response = await fetch('/api/db/profile', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ connection, tableName, columns }),
+        });
+
+        if (!response.ok) {
+          const err = await response.json();
+          throw new Error(err.error || 'Profile failed');
+        }
+
+        data = await response.json();
       }
 
-      const data: ProfileData = await response.json();
       setProfile(data);
 
       // Trigger AI summary
@@ -105,27 +120,36 @@ export function DataProfiler({
         `${c.name}: ${c.nullPercent}% null, ${c.distinctCount} distinct, min=${c.minValue || 'N/A'}, max=${c.maxValue || 'N/A'}`
       ).join('\n');
 
-      const response = await fetch('/api/ai/describe-schema', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          schemaContext: `Table: ${tableName} (${data.totalRows} rows)\n\nColumn Profiles:\n${profileSummary}\n\nSchema:\n${schemaContext || ''}`,
-          databaseType,
-          mode: 'table',
-        }),
-      });
+      const fullSchemaContext = `Table: ${tableName} (${data.totalRows} rows)\n\nColumn Profiles:\n${profileSummary}\n\nSchema:\n${schemaContext || ''}`;
+
+      if (onDescribeSchema) {
+        // Platform adapter: use callback instead of fetch
+        const result = await onDescribeSchema({ tableName, schemaContext: fullSchemaContext });
+        setAiSummary(result);
+      } else {
+        // Default: existing fetch behavior
+        const response = await fetch('/api/ai/describe-schema', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            schemaContext: fullSchemaContext,
+            databaseType,
+            mode: 'table',
+          }),
+        });
 
-      if (!response.ok) return;
+        if (!response.ok) return;
 
-      const reader = response.body?.getReader();
-      if (!reader) return;
+        const reader = response.body?.getReader();
+        if (!reader) return;
 
-      let full = '';
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        full += new TextDecoder().decode(value);
-        setAiSummary(full);
+        let full = '';
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          full += new TextDecoder().decode(value);
+          setAiSummary(full);
+        }
       }
     } catch {
       // AI summary is optional, don't show error
diff --git a/src/components/NL2SQLPanel.tsx b/src/components/NL2SQLPanel.tsx
index 0aa3844..9ea9b98 100644
--- a/src/components/NL2SQLPanel.tsx
+++ b/src/components/NL2SQLPanel.tsx
@@ -18,6 +18,8 @@ interface NL2SQLPanelProps {
   schemaContext: string;
   databaseType?: string;
   queryLanguage?: string;
+  /** Optional API adapter: when provided, bypasses the built-in /api/ai/nl2sql fetch. */
+  onNL2SQL?: (params: { prompt: string; schemaContext: string; conversationHistory?: { role: string; content: string }[] }) => Promise<string>;
 }
 
 function extractCodeBlock(text: string): string | null {
@@ -34,6 +36,7 @@ export function NL2SQLPanel({
   schemaContext,
   databaseType,
   queryLanguage,
+  onNL2SQL,
 }: NL2SQLPanelProps) {
   const [question, setQuestion] = useState('');
   const [isLoading, setIsLoading] = useState(false);
@@ -81,31 +84,42 @@ export function NL2SQLPanel({
       // Build conversation history (exclude current question)
       const history = messages.map(m => ({ role: m.role, content: m.content }));
 
-      const response = await fetch('/api/ai/nl2sql', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          question: question.trim(),
+      let fullResponse = '';
+
+      if (onNL2SQL) {
+        // Platform adapter: use callback instead of fetch
+        fullResponse = await onNL2SQL({
+          prompt: question.trim(),
           schemaContext: filteredSchema,
-          databaseType,
-          queryLanguage,
           conversationHistory: history,
-        }),
-      });
+        });
+      } else {
+        // Default: existing fetch behavior
+        const response = await fetch('/api/ai/nl2sql', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            question: question.trim(),
+            schemaContext: filteredSchema,
+            databaseType,
+            queryLanguage,
+            conversationHistory: history,
+          }),
+        });
 
-      if (!response.ok) {
-        const errData = await response.json();
-        throw new Error(errData.error || 'Request failed');
-      }
+        if (!response.ok) {
+          const errData = await response.json();
+          throw new Error(errData.error || 'Request failed');
+        }
 
-      const reader = response.body?.getReader();
-      if (!reader) throw new Error('No reader');
+        const reader = response.body?.getReader();
+        if (!reader) throw new Error('No reader');
 
-      let fullResponse = '';
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        fullResponse += new TextDecoder().decode(value);
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          fullResponse += new TextDecoder().decode(value);
+        }
       }
 
       const extractedQuery = extractCodeBlock(fullResponse);
diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
index 0cfdcc7..b3f4473 100644
--- a/src/components/QueryEditor.tsx
+++ b/src/components/QueryEditor.tsx
@@ -35,6 +35,8 @@ interface QueryEditorProps {
   databaseType?: string;
   schemaContext?: string;
   capabilities?: import('@/lib/db/types').ProviderCapabilities;
+  /** Optional API adapter: when provided, bypasses the built-in /api/ai/chat fetch. */
+  onAiChat?: (params: { prompt: string; schemaContext: string; history: { role: string; content: string }[] }) => Promise<string>;
 }
 
 interface ParsedTable {
@@ -92,7 +94,8 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
   tables = [],
   databaseType,
   schemaContext,
-  capabilities
+  capabilities,
+  onAiChat,
 }, ref) => {
   const monaco = useMonaco();
   const editorRef = useRef<Monaco.editor.IStandaloneCodeEditor | null>(null);
@@ -349,6 +352,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
     getEditorValue,
     setEditorValue: setEditorValueForAi,
     onChange,
+    onAiChat,
   });
 
   useImperativeHandle(ref, () => ({
diff --git a/src/components/QuerySafetyDialog.tsx b/src/components/QuerySafetyDialog.tsx
index cdf4921..86b239c 100644
--- a/src/components/QuerySafetyDialog.tsx
+++ b/src/components/QuerySafetyDialog.tsx
@@ -25,6 +25,8 @@ interface QuerySafetyDialogProps {
   databaseType?: string;
   onClose: () => void;
   onProceed: () => void;
+  /** Optional API adapter: when provided, bypasses the built-in /api/ai/query-safety fetch. */
+  onAnalyzeSafety?: (params: { query: string; schemaContext: string }) => Promise<SafetyAnalysis>;
 }
 
 function parseSafetyResponse(text: string): SafetyAnalysis | null {
@@ -55,6 +57,7 @@ export function QuerySafetyDialog({
   databaseType,
   onClose,
   onProceed,
+  onAnalyzeSafety,
 }: QuerySafetyDialogProps) {
   const [isAnalyzing, setIsAnalyzing] = useState(false);
   const [analysis, setAnalysis] = useState<SafetyAnalysis | null>(null);
@@ -91,31 +94,38 @@ export function QuerySafetyDialog({
         }
       }
 
-      const response = await fetch('/api/ai/query-safety', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ query, schemaContext: filteredSchema, databaseType }),
-      });
+      if (onAnalyzeSafety) {
+        // Platform adapter: use callback instead of fetch
+        const result = await onAnalyzeSafety({ query, schemaContext: filteredSchema });
+        setAnalysis(result);
+      } else {
+        // Default: existing fetch behavior
+        const response = await fetch('/api/ai/query-safety', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ query, schemaContext: filteredSchema, databaseType }),
+        });
 
-      if (!response.ok) {
-        const errData = await response.json();
-        throw new Error(errData.error || 'Analysis failed');
-      }
+        if (!response.ok) {
+          const errData = await response.json();
+          throw new Error(errData.error || 'Analysis failed');
+        }
 
-      const reader = response.body?.getReader();
-      if (!reader) throw new Error('No reader');
+        const reader = response.body?.getReader();
+        if (!reader) throw new Error('No reader');
 
-      let fullResponse = '';
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        fullResponse += new TextDecoder().decode(value);
-        setRawResponse(fullResponse);
-      }
+        let fullResponse = '';
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          fullResponse += new TextDecoder().decode(value);
+          setRawResponse(fullResponse);
+        }
 
-      const parsed = parseSafetyResponse(fullResponse);
-      if (parsed) {
-        setAnalysis(parsed);
+        const parsed = parseSafetyResponse(fullResponse);
+        if (parsed) {
+          setAnalysis(parsed);
+        }
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Unknown error');
diff --git a/src/hooks/use-ai-chat.ts b/src/hooks/use-ai-chat.ts
index fe4b017..0fd4160 100644
--- a/src/hooks/use-ai-chat.ts
+++ b/src/hooks/use-ai-chat.ts
@@ -25,6 +25,8 @@ interface AiChatDeps {
   setEditorValue: (value: string) => void;
   /** Notifies the parent of a value change */
   onChange?: (val: string) => void;
+  /** Optional API adapter: when provided, bypasses the built-in /api/ai/chat fetch. */
+  onAiChat?: (params: { prompt: string; schemaContext: string; history: { role: string; content: string }[] }) => Promise<string>;
 }
 
 export interface AiChatState {
@@ -47,7 +49,7 @@ export interface AiChatState {
  * this hook independent of the Monaco editor instance.
  */
 export function useAiChat(deps: AiChatDeps): AiChatState {
-  const { parsedSchema, schemaContext, databaseType, getEditorValue, setEditorValue, onChange } = deps;
+  const { parsedSchema, schemaContext, databaseType, getEditorValue, setEditorValue, onChange, onAiChat } = deps;
 
   const [showAi, setShowAi] = useState(false);
   const [aiPrompt, setAiPrompt] = useState('');
@@ -81,25 +83,6 @@ export function useAiChat(deps: AiChatDeps): AiChatState {
         }
       }
 
-      const response = await fetch('/api/ai/chat', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          prompt: aiPrompt,
-          databaseType,
-          schemaContext: filteredSchemaContext,
-          conversationHistory: aiConversationHistory.length > 0 ? aiConversationHistory : undefined,
-        }),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || 'AI request failed');
-      }
-
-      const reader = response.body?.getReader();
-      if (!reader) throw new Error('No reader available');
-
       const currentVal = getEditorValue();
       const shouldReplace = !currentVal || currentVal.startsWith('--');
 
@@ -108,31 +91,63 @@ export function useAiChat(deps: AiChatDeps): AiChatState {
         fullAiResponse = currentVal + '\n\n';
       }
 
-      // Buffered update using requestAnimationFrame to avoid excessive re-renders
-      let rafId: number | null = null;
-      const updateEditor = () => {
+      if (onAiChat) {
+        // Platform adapter: use callback instead of fetch
+        const result = await onAiChat({
+          prompt: aiPrompt,
+          schemaContext: filteredSchemaContext,
+          history: aiConversationHistory,
+        });
+        fullAiResponse += result;
         setEditorValue(fullAiResponse);
-        rafId = null;
-      };
-
-      while (true) {
-        const { done, value: chunkValue } = await reader.read();
-        if (done) break;
-        const chunk = new TextDecoder().decode(chunkValue);
-        fullAiResponse += chunk;
-
-        // Schedule update on next animation frame if not already scheduled
-        if (!rafId) {
-          rafId = requestAnimationFrame(updateEditor);
+        onChange?.(fullAiResponse);
+      } else {
+        // Default: existing fetch behavior
+        const response = await fetch('/api/ai/chat', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            prompt: aiPrompt,
+            databaseType,
+            schemaContext: filteredSchemaContext,
+            conversationHistory: aiConversationHistory.length > 0 ? aiConversationHistory : undefined,
+          }),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.error || 'AI request failed');
+        }
+
+        const reader = response.body?.getReader();
+        if (!reader) throw new Error('No reader available');
+
+        // Buffered update using requestAnimationFrame to avoid excessive re-renders
+        let rafId: number | null = null;
+        const updateEditor = () => {
+          setEditorValue(fullAiResponse);
+          rafId = null;
+        };
+
+        while (true) {
+          const { done, value: chunkValue } = await reader.read();
+          if (done) break;
+          const chunk = new TextDecoder().decode(chunkValue);
+          fullAiResponse += chunk;
+
+          // Schedule update on next animation frame if not already scheduled
+          if (!rafId) {
+            rafId = requestAnimationFrame(updateEditor);
+          }
         }
-      }
 
-      // Ensure final content is set and cancel any pending RAF
-      if (rafId) {
-        cancelAnimationFrame(rafId);
+        // Ensure final content is set and cancel any pending RAF
+        if (rafId) {
+          cancelAnimationFrame(rafId);
+        }
+        setEditorValue(fullAiResponse);
+        onChange?.(fullAiResponse);
       }
-      setEditorValue(fullAiResponse);
-      onChange?.(fullAiResponse);
 
       // Save conversation history for multi-turn
       setAiConversationHistory(prev => [
@@ -150,7 +165,7 @@ export function useAiChat(deps: AiChatDeps): AiChatState {
     } finally {
       setIsAiLoading(false);
     }
-  }, [aiPrompt, isAiLoading, schemaContext, parsedSchema, databaseType, aiConversationHistory, getEditorValue, setEditorValue, onChange]);
+  }, [aiPrompt, isAiLoading, schemaContext, parsedSchema, databaseType, aiConversationHistory, getEditorValue, setEditorValue, onChange, onAiChat]);
 
   return {
     showAi,
diff --git a/src/hooks/use-connection-form.ts b/src/hooks/use-connection-form.ts
index 03064ec..26d61ba 100644
--- a/src/hooks/use-connection-form.ts
+++ b/src/hooks/use-connection-form.ts
@@ -10,9 +10,11 @@ interface UseConnectionFormProps {
   onClose: () => void;
   onConnect: (conn: DatabaseConnection) => void;
   editConnection?: DatabaseConnection | null;
+  /** Optional API adapter: when provided, bypasses the built-in /api/db/test-connection fetch. */
+  onTestConnection?: (connection: DatabaseConnection) => Promise<{ success: boolean; latency?: number; error?: string }>;
 }
 
-export function useConnectionForm({ isOpen, onConnect, editConnection }: UseConnectionFormProps) {
+export function useConnectionForm({ isOpen, onConnect, editConnection, onTestConnection }: UseConnectionFormProps) {
   const [type, setType] = useState<DatabaseType>('postgres');
   const [name, setName] = useState('');
   const [host, setHost] = useState('localhost');
@@ -176,26 +178,40 @@ export function useConnectionForm({ isOpen, onConnect, editConnection }: UseConn
 
     try {
       const conn = buildConnection();
-      const response = await fetch('/api/db/test-connection', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(conn),
-      });
-
-      const result = await response.json();
-      setTestResult({
-        success: result.success,
-        message: result.success
-          ? `Connected successfully${result.latency ? ` (${result.latency}ms)` : ''}`
-          : result.error || 'Connection failed',
-        latency: result.latency,
-      });
+
+      if (onTestConnection) {
+        // Platform adapter: use callback instead of fetch
+        const result = await onTestConnection(conn);
+        setTestResult({
+          success: result.success,
+          message: result.success
+            ? `Connected successfully${result.latency ? ` (${result.latency}ms)` : ''}`
+            : result.error || 'Connection failed',
+          latency: result.latency,
+        });
+      } else {
+        // Default: existing fetch behavior
+        const response = await fetch('/api/db/test-connection', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(conn),
+        });
+
+        const result = await response.json();
+        setTestResult({
+          success: result.success,
+          message: result.success
+            ? `Connected successfully${result.latency ? ` (${result.latency}ms)` : ''}`
+            : result.error || 'Connection failed',
+          latency: result.latency,
+        });
+      }
     } catch {
       setTestResult({ success: false, message: 'Network error - could not reach server' });
     } finally {
       setIsTesting(false);
     }
-  }, [buildConnection]);
+  }, [buildConnection, onTestConnection]);
 
   const handleConnect = useCallback(async () => {
     setIsTesting(true);
@@ -204,14 +220,19 @@ export function useConnectionForm({ isOpen, onConnect, editConnection }: UseConn
     try {
       const conn = buildConnection();
 
-      // Real connection test before saving
-      const response = await fetch('/api/db/test-connection', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(conn),
-      });
-
-      const result = await response.json();
+      let result: { success: boolean; error?: string };
+      if (onTestConnection) {
+        // Platform adapter: use callback instead of fetch
+        result = await onTestConnection(conn);
+      } else {
+        // Default: existing fetch behavior
+        const response = await fetch('/api/db/test-connection', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(conn),
+        });
+        result = await response.json();
+      }
 
       if (result.success) {
         onConnect(conn);
@@ -231,7 +252,7 @@ export function useConnectionForm({ isOpen, onConnect, editConnection }: UseConn
     } finally {
       setIsTesting(false);
     }
-  }, [buildConnection, type, onConnect]);
+  }, [buildConnection, type, onConnect, onTestConnection]);
 
   const handlePasteConnectionString = useCallback(() => {
     const trimmed = pasteInput.trim();

From 032bcdeb390d2a69a91d8f2499c8259d30d93258 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 04:46:47 +0300
Subject: [PATCH 04/39] feat: configure package.json for npm package exports

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 package.json | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ebd8417..2775135 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,17 @@
 {
   "name": "libredb-studio",
   "version": "0.9.7",
-  "private": true,
+  "private": false,
+  "exports": {
+    ".": "./src/exports/index.ts",
+    "./components": "./src/exports/components.ts",
+    "./providers": "./src/exports/providers.ts",
+    "./types": "./src/exports/types.ts"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",

From f77ddd5ef3705925daa9be2caed87f43e1f8da8c Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 04:47:46 +0300
Subject: [PATCH 05/39] fix: remove unused imports and deprecated types

---
 src/components/ConnectionModal.tsx | 1 -
 src/components/DataProfiler.tsx    | 2 +-
 src/components/NL2SQLPanel.tsx     | 4 ++--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/ConnectionModal.tsx b/src/components/ConnectionModal.tsx
index d6ffbb4..2903ca3 100644
--- a/src/components/ConnectionModal.tsx
+++ b/src/components/ConnectionModal.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import React from 'react';
 import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/components/ui/dialog';
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription } from '@/components/ui/drawer';
 import { Button } from '@/components/ui/button';
diff --git a/src/components/DataProfiler.tsx b/src/components/DataProfiler.tsx
index df727d3..2bcc0f6 100644
--- a/src/components/DataProfiler.tsx
+++ b/src/components/DataProfiler.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { Loader2, BarChart3, X, Hash, AlertCircle, Sparkles, Lock } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { TableSchema, DatabaseConnection } from '@/lib/types';
diff --git a/src/components/NL2SQLPanel.tsx b/src/components/NL2SQLPanel.tsx
index 9ea9b98..7eec8d9 100644
--- a/src/components/NL2SQLPanel.tsx
+++ b/src/components/NL2SQLPanel.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, type FormEvent } from 'react';
 import { Send, Loader2, Sparkles, X, Play, MessageSquare, Trash2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
@@ -53,7 +53,7 @@ export function NL2SQLPanel({
     if (isOpen) inputRef.current?.focus();
   }, [isOpen]);
 
-  const handleSubmit = async (e?: React.FormEvent) => {
+  const handleSubmit = async (e?: FormEvent) => {
     if (e) e.preventDefault();
     if (!question.trim() || isLoading) return;
 

From 22c10b350e2e08ddb9a500d416ac04f9128cb58b Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 04:51:29 +0300
Subject: [PATCH 06/39] chore: rename package to @libredb/studio for npm
 publishing

---
 .gitignore   | 1 +
 package.json | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 8e96b0d..15c6cb2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -100,3 +100,4 @@ seed-connections.yaml
 
 npmjs-token
 
+.npmrc
diff --git a/package.json b/package.json
index 2775135..54c1f7f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,14 @@
 {
-  "name": "libredb-studio",
+  "name": "@libredb/studio",
   "version": "0.9.7",
   "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/libredb/libredb-studio"
+  },
   "exports": {
     ".": "./src/exports/index.ts",
     "./components": "./src/exports/components.ts",

From 47fb61aa0a9a6403cc1cc378479d7a1e515ebca6 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 11:55:52 +0300
Subject: [PATCH 07/39] feat: add npm publish workflow for @libredb/studio

---
 .github/workflows/npm-publish.yml | 100 ++++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 .github/workflows/npm-publish.yml

diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
new file mode 100644
index 0000000..a79262e
--- /dev/null
+++ b/.github/workflows/npm-publish.yml
@@ -0,0 +1,100 @@
+name: NPM Publish
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version to publish (e.g., 0.9.8). Leave empty to use package.json version.'
+        required: false
+        type: string
+      dry_run:
+        description: 'Dry run (do not actually publish)'
+        required: false
+        type: boolean
+        default: false
+
+permissions:
+  contents: read
+
+jobs:
+  validate:
+    name: Validate
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: "1.3.9"
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Lint
+        run: bun run lint
+
+      - name: Typecheck
+        run: bun run typecheck
+
+      - name: Test
+        run: bun run test
+
+      - name: Build
+        run: bun run build
+        env:
+          NEXT_TELEMETRY_DISABLED: 1
+          JWT_SECRET: test-secret-for-ci-build-only-32ch
+          ADMIN_EMAIL: admin@libredb.org
+          ADMIN_PASSWORD: test-admin
+          USER_EMAIL: user@libredb.org
+          USER_PASSWORD: test-user
+
+  publish:
+    name: Publish to NPM
+    runs-on: ubuntu-latest
+    needs: validate
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Set version (if provided)
+        if: inputs.version != ''
+        env:
+          INPUT_VERSION: ${{ inputs.version }}
+        run: npm version "$INPUT_VERSION" --no-git-tag-version
+
+      - name: Verify package
+        run: |
+          echo "Package name: $(node -p "require('./package.json').name")"
+          echo "Package version: $(node -p "require('./package.json').version")"
+
+      - name: Publish (dry run)
+        if: inputs.dry_run == true
+        run: npm publish --access public --dry-run
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Publish
+        if: inputs.dry_run != true
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Summary
+        run: |
+          VERSION=$(node -p "require('./package.json').version")
+          echo "## Published @libredb/studio@${VERSION}" >> "$GITHUB_STEP_SUMMARY"
+          echo "" >> "$GITHUB_STEP_SUMMARY"
+          echo "- **Registry:** https://www.npmjs.com/package/@libredb/studio" >> "$GITHUB_STEP_SUMMARY"
+          echo "- **Install:** \`npm install @libredb/studio@${VERSION}\`" >> "$GITHUB_STEP_SUMMARY"

From b947cc75a870f130d80ac102a91e36268d5ed8e3 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 11:56:16 +0300
Subject: [PATCH 08/39] =?UTF-8?q?chore:=20add=20.npmignore=20to=20publish?=
 =?UTF-8?q?=20only=20source=20code=20(572=20=E2=86=92=20205=20files)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .npmignore | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 .npmignore

diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..b870b3c
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,27 @@
+# Publish only source code needed for npm consumers
+# Everything is ignored by default, then we allowlist
+
+# Ignore everything
+*
+
+# Allow source exports
+!src/exports/
+!src/exports/**
+
+# Allow library code (providers, types, utils)
+!src/lib/
+!src/lib/**
+
+# Allow components
+!src/components/
+!src/components/**
+
+# Allow hooks (used by components)
+!src/hooks/
+!src/hooks/**
+
+# Allow package files
+!package.json
+!README.md
+!LICENSE
+!tsconfig.json

From b9180a7c8c43b9af5bdc2f0bc93b875df15d3491 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 11:57:39 +0300
Subject: [PATCH 09/39] fix: use NPMJS_TOKEN secret name in npm publish
 workflow

---
 .github/workflows/npm-publish.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
index a79262e..d1c2eb6 100644
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -83,13 +83,13 @@ jobs:
         if: inputs.dry_run == true
         run: npm publish --access public --dry-run
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPMJS_TOKEN }}
 
       - name: Publish
         if: inputs.dry_run != true
         run: npm publish --access public
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPMJS_TOKEN }}
 
       - name: Summary
         run: |

From c57a75c34d9ae010bbaa652e3c6f44a7c490985e Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 13:56:33 +0300
Subject: [PATCH 10/39] chore: add index.js entry point and update main field
 for bundler compatibility

---
 package.json         | 8 ++------
 src/exports/index.js | 2 ++
 2 files changed, 4 insertions(+), 6 deletions(-)
 create mode 100644 src/exports/index.js

diff --git a/package.json b/package.json
index 54c1f7f..f6527da 100644
--- a/package.json
+++ b/package.json
@@ -9,12 +9,8 @@
     "type": "git",
     "url": "https://github.com/libredb/libredb-studio"
   },
-  "exports": {
-    ".": "./src/exports/index.ts",
-    "./components": "./src/exports/components.ts",
-    "./providers": "./src/exports/providers.ts",
-    "./types": "./src/exports/types.ts"
-  },
+  "main": "./src/exports/index.js",
+  "types": "./src/exports/index.ts",
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19"
diff --git a/src/exports/index.js b/src/exports/index.js
new file mode 100644
index 0000000..67437ae
--- /dev/null
+++ b/src/exports/index.js
@@ -0,0 +1,2 @@
+// JavaScript entry point for bundlers that can't resolve .ts exports
+module.exports = require('./index.ts')

From 044894ad5e9d29779d5bf09666597f5c9b78afa6 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 16:01:06 +0300
Subject: [PATCH 11/39] feat(workspace): add StudioWorkspace types and props
 interface

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/workspace/types.ts | 102 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 src/workspace/types.ts

diff --git a/src/workspace/types.ts b/src/workspace/types.ts
new file mode 100644
index 0000000..bd888ae
--- /dev/null
+++ b/src/workspace/types.ts
@@ -0,0 +1,102 @@
+// src/workspace/types.ts
+import type { DatabaseType, TableSchema, QueryResult, SavedQuery } from '@/lib/types';
+
+// === Connection (platform → studio) ===
+
+export interface WorkspaceConnection {
+  id: string;
+  name: string;
+  type: DatabaseType;
+}
+
+// === User (platform → studio) ===
+
+export interface WorkspaceUser {
+  id: string;
+  name?: string;
+  role?: string;
+}
+
+// === Query result (studio ← platform) ===
+
+export interface WorkspaceQueryResult {
+  rows: Record<string, unknown>[];
+  fields: string[];
+  columns?: { name: string; type?: string }[];
+  rowCount: number;
+  executionTime: number;
+  pagination?: {
+    limit: number;
+    offset: number;
+    hasMore: boolean;
+    totalReturned: number;
+    wasLimited: boolean;
+  };
+}
+
+// === Feature flags ===
+
+export interface WorkspaceFeatures {
+  ai?: boolean;
+  charts?: boolean;
+  codeGenerator?: boolean;
+  testDataGenerator?: boolean;
+  schemaDiagram?: boolean;
+  dataImport?: boolean;
+  inlineEditing?: boolean;
+  transactions?: boolean;
+  connectionManagement?: boolean;
+  dataMasking?: boolean;
+}
+
+export const DEFAULT_WORKSPACE_FEATURES: Required<WorkspaceFeatures> = {
+  ai: false,
+  charts: true,
+  codeGenerator: true,
+  testDataGenerator: true,
+  schemaDiagram: true,
+  dataImport: true,
+  inlineEditing: false,
+  transactions: false,
+  connectionManagement: false,
+  dataMasking: false,
+};
+
+// === Saved query input ===
+
+export interface SavedQueryInput {
+  name: string;
+  query: string;
+  description?: string;
+  connectionType?: string;
+  tags?: string[];
+}
+
+// === Main props ===
+
+export interface StudioWorkspaceProps {
+  connections: WorkspaceConnection[];
+  currentUser?: WorkspaceUser;
+
+  onQueryExecute: (connectionId: string, sql: string, options?: {
+    limit?: number;
+    offset?: number;
+    unlimited?: boolean;
+  }) => Promise<WorkspaceQueryResult>;
+  onSchemaFetch: (connectionId: string) => Promise<TableSchema[]>;
+
+  onTestConnection?: (config: {
+    type: DatabaseType;
+    host: string;
+    port: number;
+    database: string;
+    username: string;
+    password: string;
+    sslEnabled?: boolean;
+  }) => Promise<{ success: boolean; message: string }>;
+  onSaveQuery?: (query: SavedQueryInput) => Promise<void>;
+  onLoadSavedQueries?: () => Promise<SavedQuery[]>;
+
+  features?: WorkspaceFeatures;
+  className?: string;
+}

From c7a757477079a4274efc057165c53eb194d49d7b Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 16:06:08 +0300
Subject: [PATCH 12/39] feat(workspace): add useConnectionAdapter hook with
 tests

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/workspace/hooks/use-connection-adapter.ts |  76 ++++
 tests/hooks/use-connection-adapter.test.ts    | 331 ++++++++++++++++++
 2 files changed, 407 insertions(+)
 create mode 100644 src/workspace/hooks/use-connection-adapter.ts
 create mode 100644 tests/hooks/use-connection-adapter.test.ts

diff --git a/src/workspace/hooks/use-connection-adapter.ts b/src/workspace/hooks/use-connection-adapter.ts
new file mode 100644
index 0000000..b6c91f0
--- /dev/null
+++ b/src/workspace/hooks/use-connection-adapter.ts
@@ -0,0 +1,76 @@
+'use client';
+
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import type { DatabaseConnection, TableSchema } from '@/lib/types';
+import type { WorkspaceConnection } from '@/workspace/types';
+
+interface UseConnectionAdapterParams {
+  connections: WorkspaceConnection[];
+  onSchemaFetch: (connectionId: string) => Promise<TableSchema[]>;
+}
+
+export function useConnectionAdapter({
+  connections: externalConnections,
+  onSchemaFetch,
+}: UseConnectionAdapterParams) {
+  const connections: DatabaseConnection[] = useMemo(
+    () =>
+      externalConnections.map((c) => ({
+        id: c.id,
+        name: c.name,
+        type: c.type,
+        createdAt: new Date(),
+        managed: true,
+      })),
+    [externalConnections]
+  );
+
+  const [activeConnection, setActiveConnection] = useState<DatabaseConnection | null>(
+    connections[0] ?? null
+  );
+  const [schema, setSchema] = useState<TableSchema[]>([]);
+  const [isLoadingSchema, setIsLoadingSchema] = useState(false);
+
+  useEffect(() => {
+    if (connections.length === 0) {
+      setActiveConnection(null);
+      return;
+    }
+    if (activeConnection && connections.some((c) => c.id === activeConnection.id)) {
+      return;
+    }
+    setActiveConnection(connections[0]);
+  }, [connections]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const fetchSchema = useCallback(
+    async (conn: DatabaseConnection) => {
+      setIsLoadingSchema(true);
+      try {
+        const result = await onSchemaFetch(conn.id);
+        setSchema(result);
+      } catch {
+        setSchema([]);
+      } finally {
+        setIsLoadingSchema(false);
+      }
+    },
+    [onSchemaFetch]
+  );
+
+  const tableNames = useMemo(() => schema.map((s) => s.name), [schema]);
+  const schemaContext = useMemo(() => JSON.stringify(schema), [schema]);
+
+  return {
+    connections,
+    setConnections: (() => {}) as React.Dispatch<React.SetStateAction<DatabaseConnection[]>>,
+    activeConnection,
+    setActiveConnection: setActiveConnection as (conn: DatabaseConnection | null) => void,
+    schema,
+    setSchema,
+    isLoadingSchema,
+    connectionPulse: null as 'healthy' | 'degraded' | 'error' | null,
+    fetchSchema,
+    tableNames,
+    schemaContext,
+  };
+}
diff --git a/tests/hooks/use-connection-adapter.test.ts b/tests/hooks/use-connection-adapter.test.ts
new file mode 100644
index 0000000..7f36f7b
--- /dev/null
+++ b/tests/hooks/use-connection-adapter.test.ts
@@ -0,0 +1,331 @@
+import '../setup-dom';
+
+import { describe, test, expect, mock } from 'bun:test';
+import { renderHook, act, waitFor } from '@testing-library/react';
+
+import { useConnectionAdapter } from '@/workspace/hooks/use-connection-adapter';
+import type { WorkspaceConnection } from '@/workspace/types';
+import type { TableSchema } from '@/lib/types';
+
+// ── Test Data ───────────────────────────────────────────────────────────────
+
+const makeWorkspaceConnection = (
+  overrides: Partial<WorkspaceConnection> = {}
+): WorkspaceConnection => ({
+  id: 'ws-conn-1',
+  name: 'Platform DB',
+  type: 'postgres',
+  ...overrides,
+});
+
+const makeSchema = (): TableSchema[] => [
+  {
+    name: 'users',
+    columns: [
+      { name: 'id', type: 'integer', nullable: false, isPrimary: true },
+      { name: 'email', type: 'varchar', nullable: false, isPrimary: false },
+    ],
+    indexes: [{ name: 'users_pkey', columns: ['id'], unique: true }],
+    rowCount: 100,
+  },
+  {
+    name: 'orders',
+    columns: [
+      { name: 'id', type: 'integer', nullable: false, isPrimary: true },
+      { name: 'user_id', type: 'integer', nullable: false, isPrimary: false },
+    ],
+    indexes: [{ name: 'orders_pkey', columns: ['id'], unique: true }],
+    rowCount: 500,
+  },
+];
+
+// =============================================================================
+// useConnectionAdapter Tests
+// =============================================================================
+describe('useConnectionAdapter', () => {
+  // ── Initializes with first connection as active ─────────────────────────
+
+  test('initializes with first connection as active', () => {
+    const connections = [
+      makeWorkspaceConnection({ id: 'c1', name: 'DB One' }),
+      makeWorkspaceConnection({ id: 'c2', name: 'DB Two' }),
+    ];
+    const onSchemaFetch = mock(() => Promise.resolve([]));
+
+    const { result } = renderHook(() =>
+      useConnectionAdapter({ connections, onSchemaFetch })
+    );
+
+    expect(result.current.activeConnection).not.toBeNull();
+    expect(result.current.activeConnection!.id).toBe('c1');
+    expect(result.current.activeConnection!.name).toBe('DB One');
+    expect(result.current.activeConnection!.managed).toBe(true);
+  });
+
+  // ── Returns null activeConnection when connections array is empty ───────
+
+  test('returns null activeConnection when connections array is empty', () => {
+    const onSchemaFetch = mock(() => Promise.resolve([]));
+
+    const { result } = renderHook(() =>
+      useConnectionAdapter({ connections: [], onSchemaFetch })
+    );
+
+    expect(result.current.connections).toEqual([]);
+    expect(result.current.activeConnection).toBeNull();
+    expect(result.current.schema).toEqual([]);
+    expect(result.current.isLoadingSchema).toBe(false);
+    expect(result.current.connectionPulse).toBeNull();
+  });
+
+  // ── setActiveConnection updates active connection ───────────────────────
+
+  test('setActiveConnection updates active connection', () => {
+    const connections = [
+      makeWorkspaceConnection({ id: 'c1', name: 'DB One' }),
+      makeWorkspaceConnection({ id: 'c2', name: 'DB Two' }),
+    ];
+    const onSchemaFetch = mock(() => Promise.resolve([]));
+
+    const { result } = renderHook(() =>
+      useConnectionAdapter({ connections, onSchemaFetch })
+    );
+
+    expect(result.current.activeConnection!.id).toBe('c1');
+
+    act(() => {
+      result.current.setActiveConnection(result.current.connections[1]);
+    });
+
+    expect(result.current.activeConnection!.id).toBe('c2');
+    expect(result.current.activeConnection!.name).toBe('DB Two');
+  });
+
+  // ── fetchSchema calls onSchemaFetch and updates schema state ────────────
+
+  test('fetchSchema calls onSchemaFetch and updates schema state', async () => {
+    const schemaData = makeSchema();
+    const onSchemaFetch = mock(() => Promise.resolve(schemaData));
+
+    const connections = [makeWorkspaceConnection({ id: 'c1' })];
+
+    const { result } = renderHook(() =>
+      useConnectionAdapter({ connections, onSchemaFetch })
+    );
+
+    await act(async () => {
+      await result.current.fetchSchema(result.current.connections[0]);
+    });
+
+    // Verify onSchemaFetch was called with the connection ID
+    expect(onSchemaFetch).toHaveBeenCalledTimes(1);
+    expect(onSchemaFetch).toHaveBeenCalledWith('c1');
+
+    // Verify schema was set
+    expect(result.current.schema).toEqual(schemaData);
+
+    // Verify tableNames derived value
+    expect(result.current.tableNames).toEqual(['users', 'orders']);
+
+    // Verify schemaContext derived value
+    expect(result.current.schemaContext).toBe(JSON.stringify(schemaData));
+
+    // Verify loading is done
+    expect(result.current.isLoadingSchema).toBe(false);
+  });
+
+  // ── fetchSchema sets isLoadingSchema during fetch ───────────────────────
+
+  test('fetchSchema sets isLoadingSchema during fetch', async () => {
+    let resolveSchema: ((value: TableSchema[]) => void) | undefined;
+    const schemaPromise = new Promise<TableSchema[]>((resolve) => {
+      resolveSchema = resolve;
+    });
+    const onSchemaFetch = mock(() => schemaPromise);
+
+    const connections = [makeWorkspaceConnection({ id: 'c1' })];
+
+    const { result } = renderHook(() =>
+      useConnectionAdapter({ connections, onSchemaFetch })
+    );
+
+    // Start fetching schema (don't await)
+    let fetchPromise: Promise<void>;
+    act(() => {
+      fetchPromise = result.current.fetchSchema(result.current.connections[0]);
+    });
+
+    // isLoadingSchema should be true while waiting
+    expect(result.current.isLoadingSchema).toBe(true);
+
+    // Resolve the schema request
+    resolveSchema!(makeSchema());
+
+    await act(async () => {
+      await fetchPromise!;
+    });
+
+    expect(result.current.isLoadingSchema).toBe(false);
+    expect(result.current.schema).toHaveLength(2);
+  });
+
+  // ── fetchSchema error sets empty schema ─────────────────────────────────
+
+  test('fetchSchema error sets empty schema', async () => {
+    const onSchemaFetch = mock(() => Promise.reject(new Error('Connection refused')));
+
+    const connections = [makeWorkspaceConnection({ id: 'c1' })];
+
+    const { result } = renderHook(() =>
+      useConnectionAdapter({ connections, onSchemaFetch })
+    );
+
+    await act(async () => {
+      await result.current.fetchSchema(result.current.connections[0]);
+    });
+
+    expect(result.current.schema).toEqual([]);
+    expect(result.current.isLoadingSchema).toBe(false);
+  });
+
+  // ── Updates connections when props change ───────────────────────────────
+
+  test('updates connections when props change', () => {
+    const initialConnections = [
+      makeWorkspaceConnection({ id: 'c1', name: 'DB One' }),
+    ];
+    const onSchemaFetch = mock(() => Promise.resolve([]));
+
+    const { result, rerender } = renderHook(
+      ({ connections }) =>
+        useConnectionAdapter({ connections, onSchemaFetch }),
+      { initialProps: { connections: initialConnections } }
+    );
+
+    expect(result.current.connections).toHaveLength(1);
+    expect(result.current.connections[0].id).toBe('c1');
+
+    // Rerender with updated connections
+    const updatedConnections = [
+      makeWorkspaceConnection({ id: 'c1', name: 'DB One' }),
+      makeWorkspaceConnection({ id: 'c2', name: 'DB Two' }),
+      makeWorkspaceConnection({ id: 'c3', name: 'DB Three', type: 'mysql' }),
+    ];
+
+    rerender({ connections: updatedConnections });
+
+    expect(result.current.connections).toHaveLength(3);
+    expect(result.current.connections[2].id).toBe('c3');
+    expect(result.current.connections[2].type).toBe('mysql');
+    expect(result.current.connections[2].managed).toBe(true);
+  });
+
+  // ── Resets activeConnection when it is removed from connections ─────────
+
+  test('resets activeConnection when it is removed from connections', async () => {
+    const initialConnections = [
+      makeWorkspaceConnection({ id: 'c1', name: 'DB One' }),
+      makeWorkspaceConnection({ id: 'c2', name: 'DB Two' }),
+    ];
+    const onSchemaFetch = mock(() => Promise.resolve([]));
+
+    const { result, rerender } = renderHook(
+      ({ connections }) =>
+        useConnectionAdapter({ connections, onSchemaFetch }),
+      { initialProps: { connections: initialConnections } }
+    );
+
+    // Set active to c2
+    act(() => {
+      result.current.setActiveConnection(result.current.connections[1]);
+    });
+    expect(result.current.activeConnection!.id).toBe('c2');
+
+    // Remove c2 from connections
+    const updatedConnections = [
+      makeWorkspaceConnection({ id: 'c1', name: 'DB One' }),
+    ];
+
+    rerender({ connections: updatedConnections });
+
+    // activeConnection should reset to the first available connection
+    await waitFor(() => {
+      expect(result.current.activeConnection!.id).toBe('c1');
+    });
+  });
+
+  // ── Resets activeConnection to null when all connections removed ─────────
+
+  test('resets activeConnection to null when all connections removed', async () => {
+    const initialConnections = [
+      makeWorkspaceConnection({ id: 'c1', name: 'DB One' }),
+    ];
+    const onSchemaFetch = mock(() => Promise.resolve([]));
+
+    const { result, rerender } = renderHook(
+      ({ connections }) =>
+        useConnectionAdapter({ connections, onSchemaFetch }),
+      { initialProps: { connections: initialConnections } }
+    );
+
+    expect(result.current.activeConnection!.id).toBe('c1');
+
+    // Remove all connections
+    rerender({ connections: [] });
+
+    await waitFor(() => {
+      expect(result.current.activeConnection).toBeNull();
+    });
+  });
+
+  // ── Maps WorkspaceConnection to DatabaseConnection correctly ────────────
+
+  test('maps WorkspaceConnection to DatabaseConnection with managed flag', () => {
+    const connections = [
+      makeWorkspaceConnection({ id: 'c1', name: 'Platform DB', type: 'mysql' }),
+    ];
+    const onSchemaFetch = mock(() => Promise.resolve([]));
+
+    const { result } = renderHook(() =>
+      useConnectionAdapter({ connections, onSchemaFetch })
+    );
+
+    const mapped = result.current.connections[0];
+    expect(mapped.id).toBe('c1');
+    expect(mapped.name).toBe('Platform DB');
+    expect(mapped.type).toBe('mysql');
+    expect(mapped.managed).toBe(true);
+    expect(mapped.createdAt).toBeInstanceOf(Date);
+  });
+
+  // ── setConnections is a no-op ──────────────────────────────────────────
+
+  test('setConnections is a no-op (connections are externally managed)', () => {
+    const connections = [makeWorkspaceConnection({ id: 'c1' })];
+    const onSchemaFetch = mock(() => Promise.resolve([]));
+
+    const { result } = renderHook(() =>
+      useConnectionAdapter({ connections, onSchemaFetch })
+    );
+
+    // Calling setConnections should not throw and should not change connections
+    act(() => {
+      result.current.setConnections([]);
+    });
+
+    expect(result.current.connections).toHaveLength(1);
+  });
+
+  // ── connectionPulse is always null ─────────────────────────────────────
+
+  test('connectionPulse is always null (no health check in adapter)', () => {
+    const connections = [makeWorkspaceConnection({ id: 'c1' })];
+    const onSchemaFetch = mock(() => Promise.resolve([]));
+
+    const { result } = renderHook(() =>
+      useConnectionAdapter({ connections, onSchemaFetch })
+    );
+
+    expect(result.current.connectionPulse).toBeNull();
+  });
+});

From 25061f7b0eef8f6c462376b0b257b28f8a8dc05c Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 16:15:44 +0300
Subject: [PATCH 13/39] feat(workspace): add useQueryAdapter hook with tests

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/workspace/hooks/use-query-adapter.ts | 337 +++++++++++++++++++++++
 tests/hooks/use-query-adapter.test.ts    | 315 +++++++++++++++++++++
 2 files changed, 652 insertions(+)
 create mode 100644 src/workspace/hooks/use-query-adapter.ts
 create mode 100644 tests/hooks/use-query-adapter.test.ts

diff --git a/src/workspace/hooks/use-query-adapter.ts b/src/workspace/hooks/use-query-adapter.ts
new file mode 100644
index 0000000..8d13ad3
--- /dev/null
+++ b/src/workspace/hooks/use-query-adapter.ts
@@ -0,0 +1,337 @@
+'use client';
+
+import { useState, useCallback, useRef, type Dispatch, type SetStateAction } from 'react';
+import type { DatabaseConnection, QueryTab } from '@/lib/types';
+import type { WorkspaceQueryResult, WorkspaceFeatures } from '@/workspace/types';
+import type { BottomPanelMode } from '@/components/studio/BottomPanel';
+import { useToast } from '@/hooks/use-toast';
+import { isDangerousQuery } from '@/components/QuerySafetyDialog';
+
+interface UseQueryAdapterParams {
+  activeConnection: DatabaseConnection | null;
+  onQueryExecute: (connectionId: string, sql: string, options?: {
+    limit?: number;
+    offset?: number;
+    unlimited?: boolean;
+  }) => Promise<WorkspaceQueryResult>;
+  tabs: QueryTab[];
+  activeTabId: string;
+  currentTab: QueryTab;
+  setTabs: Dispatch<SetStateAction<QueryTab[]>>;
+  fetchSchema: (conn: DatabaseConnection) => Promise<void>;
+  features: Partial<WorkspaceFeatures>;
+}
+
+export function useQueryAdapter({
+  activeConnection,
+  onQueryExecute,
+  tabs,
+  activeTabId,
+  currentTab,
+  setTabs,
+  fetchSchema: _fetchSchema,
+  features: _features,
+}: UseQueryAdapterParams) {
+  // Reserved for future use (schema refresh after DDL, feature gating)
+  void _fetchSchema;
+  void _features;
+  const cancelledRef = useRef(false);
+
+  const [safetyCheckQuery, setSafetyCheckQuery] = useState<string | null>(null);
+  const [unlimitedWarningOpen, setUnlimitedWarningOpen] = useState(false);
+  const [pendingUnlimitedQuery, setPendingUnlimitedQuery] = useState<{
+    query: string;
+    tabId: string;
+  } | null>(null);
+  const [historyKey, setHistoryKey] = useState(0);
+  const [bottomPanelMode, setBottomPanelMode] = useState<BottomPanelMode>('results');
+
+  const { toast } = useToast();
+
+  const executeQuery = useCallback(async (
+    overrideQuery?: string,
+    tabId?: string,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _isExplain: boolean = false,
+  ) => {
+    const targetTabId = tabId || activeTabId;
+    const tabToExec = tabs.find(t => t.id === targetTabId) || currentTab;
+
+    const queryToExecute = overrideQuery || tabToExec.query;
+
+    if (!activeConnection) {
+      toast({ title: 'No Connection', description: 'Select a connection first.', variant: 'destructive' });
+      return;
+    }
+
+    if (!queryToExecute || queryToExecute.trim() === '') {
+      toast({ title: 'Empty Query', description: 'Enter a query to execute.', variant: 'destructive' });
+      return;
+    }
+
+    // Safety check for dangerous queries (skip for force-execute via forceExecuteQuery)
+    if (isDangerousQuery(queryToExecute)) {
+      setSafetyCheckQuery(queryToExecute);
+      return;
+    }
+
+    cancelledRef.current = false;
+
+    // Set tab executing state
+    setTabs(prev => prev.map(t => t.id === targetTabId ? {
+      ...t,
+      isExecuting: true,
+    } : t));
+    setBottomPanelMode('results');
+
+    const startTime = Date.now();
+
+    try {
+      const result = await onQueryExecute(activeConnection.id, queryToExecute);
+
+      // Check if cancelled while awaiting
+      if (cancelledRef.current) return;
+
+      const executionTime = result.executionTime || (Date.now() - startTime);
+
+      setTabs(prev => prev.map(t => {
+        if (t.id !== targetTabId) return t;
+
+        return {
+          ...t,
+          result: {
+            rows: result.rows,
+            fields: result.fields,
+            rowCount: result.rowCount,
+            executionTime,
+            pagination: result.pagination,
+          },
+          allRows: result.rows,
+          currentOffset: result.rows.length,
+          isExecuting: false,
+          isLoadingMore: false,
+        };
+      }));
+
+      setHistoryKey(prev => prev + 1);
+    } catch (error) {
+      // Skip updates if cancelled
+      if (cancelledRef.current) return;
+
+      setTabs(prev => prev.map(t => t.id === targetTabId ? {
+        ...t,
+        isExecuting: false,
+        isLoadingMore: false,
+      } : t));
+
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      toast({ title: 'Query Error', description: errorMessage, variant: 'destructive' });
+    }
+  }, [activeConnection, tabs, currentTab, activeTabId, toast, onQueryExecute, setTabs]);
+
+  // Force execute (bypass safety check)
+  const forceExecuteQuery = useCallback((query: string) => {
+    setSafetyCheckQuery(null);
+
+    if (!activeConnection) {
+      toast({ title: 'No Connection', description: 'Select a connection first.', variant: 'destructive' });
+      return;
+    }
+
+    if (!query || query.trim() === '') {
+      toast({ title: 'Empty Query', description: 'Enter a query to execute.', variant: 'destructive' });
+      return;
+    }
+
+    cancelledRef.current = false;
+
+    setTabs(prev => prev.map(t => t.id === activeTabId ? {
+      ...t,
+      isExecuting: true,
+    } : t));
+    setBottomPanelMode('results');
+
+    const startTime = Date.now();
+
+    onQueryExecute(activeConnection.id, query)
+      .then((result) => {
+        if (cancelledRef.current) return;
+
+        const executionTime = result.executionTime || (Date.now() - startTime);
+
+        setTabs(prev => prev.map(t => {
+          if (t.id !== activeTabId) return t;
+
+          return {
+            ...t,
+            result: {
+              rows: result.rows,
+              fields: result.fields,
+              rowCount: result.rowCount,
+              executionTime,
+              pagination: result.pagination,
+            },
+            allRows: result.rows,
+            currentOffset: result.rows.length,
+            isExecuting: false,
+            isLoadingMore: false,
+          };
+        }));
+
+        setHistoryKey(prev => prev + 1);
+      })
+      .catch((error) => {
+        if (cancelledRef.current) return;
+
+        setTabs(prev => prev.map(t => t.id === activeTabId ? {
+          ...t,
+          isExecuting: false,
+          isLoadingMore: false,
+        } : t));
+
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+        toast({ title: 'Query Error', description: errorMessage, variant: 'destructive' });
+      });
+  }, [activeConnection, activeTabId, toast, onQueryExecute, setTabs]);
+
+  // Cancel running query (best-effort via ref flag)
+  const cancelQuery = useCallback(() => {
+    cancelledRef.current = true;
+
+    setTabs(prev => prev.map(t => t.isExecuting ? {
+      ...t,
+      isExecuting: false,
+      isLoadingMore: false,
+    } : t));
+
+    toast({ title: 'Query Cancelled', description: 'Query execution was cancelled.' });
+  }, [setTabs, toast]);
+
+  // Load More handler
+  const handleLoadMore = useCallback(() => {
+    if (!currentTab.result?.pagination?.hasMore) return;
+    if (!activeConnection) return;
+
+    const currentOffset = currentTab.currentOffset || currentTab.result.rows.length;
+
+    setTabs(prev => prev.map(t => t.id === currentTab.id ? {
+      ...t,
+      isLoadingMore: true,
+    } : t));
+
+    onQueryExecute(activeConnection.id, currentTab.query, {
+      limit: 500,
+      offset: currentOffset,
+    })
+      .then((result) => {
+        if (cancelledRef.current) return;
+
+        setTabs(prev => prev.map(t => {
+          if (t.id !== currentTab.id) return t;
+
+          const existingRows = t.allRows || t.result?.rows || [];
+          const newAllRows = [...existingRows, ...result.rows];
+
+          return {
+            ...t,
+            result: {
+              rows: newAllRows,
+              fields: result.fields,
+              rowCount: newAllRows.length,
+              executionTime: t.result?.executionTime || 0,
+              pagination: result.pagination,
+            },
+            allRows: newAllRows,
+            currentOffset: currentOffset + result.rows.length,
+            isExecuting: false,
+            isLoadingMore: false,
+          };
+        }));
+      })
+      .catch((error) => {
+        if (cancelledRef.current) return;
+
+        setTabs(prev => prev.map(t => t.id === currentTab.id ? {
+          ...t,
+          isExecuting: false,
+          isLoadingMore: false,
+        } : t));
+
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+        toast({ title: 'Load More Error', description: errorMessage, variant: 'destructive' });
+      });
+  }, [currentTab, activeConnection, onQueryExecute, setTabs, toast]);
+
+  // Unlimited query handler
+  const handleUnlimitedQuery = useCallback(() => {
+    if (!pendingUnlimitedQuery) return;
+    if (!activeConnection) return;
+
+    const { query, tabId } = pendingUnlimitedQuery;
+
+    cancelledRef.current = false;
+
+    setTabs(prev => prev.map(t => t.id === tabId ? {
+      ...t,
+      isExecuting: true,
+    } : t));
+
+    onQueryExecute(activeConnection.id, query, { unlimited: true })
+      .then((result) => {
+        if (cancelledRef.current) return;
+
+        setTabs(prev => prev.map(t => {
+          if (t.id !== tabId) return t;
+
+          return {
+            ...t,
+            result: {
+              rows: result.rows,
+              fields: result.fields,
+              rowCount: result.rowCount,
+              executionTime: result.executionTime,
+              pagination: result.pagination,
+            },
+            allRows: result.rows,
+            currentOffset: result.rows.length,
+            isExecuting: false,
+            isLoadingMore: false,
+          };
+        }));
+
+        setHistoryKey(prev => prev + 1);
+      })
+      .catch((error) => {
+        if (cancelledRef.current) return;
+
+        setTabs(prev => prev.map(t => t.id === tabId ? {
+          ...t,
+          isExecuting: false,
+          isLoadingMore: false,
+        } : t));
+
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+        toast({ title: 'Query Error', description: errorMessage, variant: 'destructive' });
+      });
+
+    setUnlimitedWarningOpen(false);
+    setPendingUnlimitedQuery(null);
+  }, [pendingUnlimitedQuery, activeConnection, onQueryExecute, setTabs, toast]);
+
+  return {
+    executeQuery,
+    forceExecuteQuery,
+    cancelQuery,
+    handleLoadMore,
+    handleUnlimitedQuery,
+    safetyCheckQuery,
+    setSafetyCheckQuery,
+    unlimitedWarningOpen,
+    setUnlimitedWarningOpen,
+    pendingUnlimitedQuery,
+    setPendingUnlimitedQuery,
+    historyKey,
+    bottomPanelMode,
+    setBottomPanelMode,
+  };
+}
diff --git a/tests/hooks/use-query-adapter.test.ts b/tests/hooks/use-query-adapter.test.ts
new file mode 100644
index 0000000..55a8bf5
--- /dev/null
+++ b/tests/hooks/use-query-adapter.test.ts
@@ -0,0 +1,315 @@
+import '../setup-dom';
+import '../helpers/mock-sonner';
+
+import { describe, test, expect, mock, beforeEach } from 'bun:test';
+import { renderHook, act } from '@testing-library/react';
+
+import { useQueryAdapter } from '@/workspace/hooks/use-query-adapter';
+import type { DatabaseConnection, QueryTab } from '@/lib/types';
+import type { WorkspaceQueryResult, WorkspaceFeatures } from '@/workspace/types';
+import { mockToastSuccess, mockToastError } from '../helpers/mock-sonner';
+
+// ── Test Data ───────────────────────────────────────────────────────────────
+
+const makeConnection = (overrides: Partial<DatabaseConnection> = {}): DatabaseConnection => ({
+  id: 'conn-1',
+  name: 'Test DB',
+  type: 'postgres',
+  createdAt: new Date(),
+  managed: true,
+  ...overrides,
+});
+
+const makeTab = (overrides: Partial<QueryTab> = {}): QueryTab => ({
+  id: 'tab-1',
+  name: 'Query 1',
+  query: 'SELECT * FROM users',
+  result: null,
+  isExecuting: false,
+  type: 'sql',
+  ...overrides,
+});
+
+const makeQueryResult = (overrides: Partial<WorkspaceQueryResult> = {}): WorkspaceQueryResult => ({
+  rows: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }],
+  fields: ['id', 'name'],
+  rowCount: 2,
+  executionTime: 42,
+  pagination: {
+    limit: 500,
+    offset: 0,
+    hasMore: false,
+    totalReturned: 2,
+    wasLimited: false,
+  },
+  ...overrides,
+});
+
+// ── Helper for mutable tabs array ────────────────────────────────────────────
+
+function createMutableTabs(initial: QueryTab[]) {
+  const tabs = [...initial];
+  const setTabs = (fn: (prev: QueryTab[]) => QueryTab[]) => {
+    const updated = fn(tabs);
+    tabs.splice(0, tabs.length, ...updated);
+  };
+  return { tabs, setTabs: setTabs as unknown as React.Dispatch<React.SetStateAction<QueryTab[]>> };
+}
+
+// ── Default hook params factory ──────────────────────────────────────────────
+
+function makeHookParams(overrides: Record<string, unknown> = {}) {
+  const defaultTab = makeTab();
+  const { tabs, setTabs } = createMutableTabs([defaultTab]);
+  const onQueryExecute = mock(() => Promise.resolve(makeQueryResult()));
+  const fetchSchema = mock(() => Promise.resolve());
+
+  return {
+    activeConnection: makeConnection(),
+    onQueryExecute,
+    tabs,
+    activeTabId: 'tab-1',
+    currentTab: defaultTab,
+    setTabs,
+    fetchSchema,
+    features: {} as Partial<WorkspaceFeatures>,
+    ...overrides,
+  };
+}
+
+// =============================================================================
+// useQueryAdapter Tests
+// =============================================================================
+describe('useQueryAdapter', () => {
+  beforeEach(() => {
+    mockToastSuccess.mockClear();
+    mockToastError.mockClear();
+  });
+
+  // ── executeQuery calls onQueryExecute with correct connectionId and sql ────
+
+  test('executeQuery calls onQueryExecute with correct connectionId and sql', async () => {
+    const params = makeHookParams();
+
+    const { result } = renderHook(() => useQueryAdapter(params));
+
+    await act(async () => {
+      await result.current.executeQuery('SELECT 1');
+    });
+
+    expect(params.onQueryExecute).toHaveBeenCalledTimes(1);
+    expect(params.onQueryExecute).toHaveBeenCalledWith('conn-1', 'SELECT 1');
+  });
+
+  // ── executeQuery uses tab query when no override provided ──────────────────
+
+  test('executeQuery uses tab query when no override provided', async () => {
+    const params = makeHookParams();
+
+    const { result } = renderHook(() => useQueryAdapter(params));
+
+    await act(async () => {
+      await result.current.executeQuery();
+    });
+
+    expect(params.onQueryExecute).toHaveBeenCalledTimes(1);
+    expect(params.onQueryExecute).toHaveBeenCalledWith('conn-1', 'SELECT * FROM users');
+  });
+
+  // ── Returns error state when onQueryExecute throws ─────────────────────────
+
+  test('returns error state when onQueryExecute throws (tab not stuck in executing)', async () => {
+    const defaultTab = makeTab();
+    const { tabs, setTabs } = createMutableTabs([defaultTab]);
+    const onQueryExecute = mock(() => Promise.reject(new Error('Connection refused')));
+
+    const params = makeHookParams({
+      onQueryExecute,
+      tabs,
+      setTabs,
+      currentTab: defaultTab,
+    });
+
+    const { result } = renderHook(() => useQueryAdapter(params));
+
+    await act(async () => {
+      await result.current.executeQuery('SELECT 1');
+    });
+
+    // Tab should NOT be stuck in isExecuting
+    expect(tabs[0].isExecuting).toBe(false);
+
+    // Error toast should have been called
+    expect(mockToastError).toHaveBeenCalled();
+  });
+
+  // ── cancelQuery sets executing to false ────────────────────────────────────
+
+  test('cancelQuery sets executing to false', () => {
+    const defaultTab = makeTab({ isExecuting: true });
+    const { tabs, setTabs } = createMutableTabs([defaultTab]);
+
+    const params = makeHookParams({
+      tabs,
+      setTabs,
+      currentTab: defaultTab,
+    });
+
+    const { result } = renderHook(() => useQueryAdapter(params));
+
+    act(() => {
+      result.current.cancelQuery();
+    });
+
+    expect(tabs[0].isExecuting).toBe(false);
+
+    // Should show cancellation toast
+    expect(mockToastSuccess).toHaveBeenCalled();
+  });
+
+  // ── bottomPanelMode defaults to 'results' ──────────────────────────────────
+
+  test('bottomPanelMode defaults to results', () => {
+    const params = makeHookParams();
+
+    const { result } = renderHook(() => useQueryAdapter(params));
+
+    expect(result.current.bottomPanelMode).toBe('results');
+  });
+
+  // ── historyKey increments after successful query ───────────────────────────
+
+  test('historyKey increments after successful query', async () => {
+    const params = makeHookParams();
+
+    const { result } = renderHook(() => useQueryAdapter(params));
+
+    expect(result.current.historyKey).toBe(0);
+
+    await act(async () => {
+      await result.current.executeQuery('SELECT 1');
+    });
+
+    expect(result.current.historyKey).toBe(1);
+
+    await act(async () => {
+      await result.current.executeQuery('SELECT 2');
+    });
+
+    expect(result.current.historyKey).toBe(2);
+  });
+
+  // ── executeQuery toasts error when no connection ───────────────────────────
+
+  test('executeQuery toasts error when no connection', async () => {
+    const params = makeHookParams({
+      activeConnection: null,
+    });
+
+    const { result } = renderHook(() => useQueryAdapter(params));
+
+    await act(async () => {
+      await result.current.executeQuery('SELECT 1');
+    });
+
+    // onQueryExecute should NOT be called
+    expect(params.onQueryExecute).not.toHaveBeenCalled();
+
+    // Should toast error
+    expect(mockToastError).toHaveBeenCalled();
+  });
+
+  // ── executeQuery toasts error when query is empty ──────────────────────────
+
+  test('executeQuery toasts error when query is empty', async () => {
+    const defaultTab = makeTab({ query: '' });
+    const params = makeHookParams({
+      currentTab: defaultTab,
+      tabs: [defaultTab],
+    });
+
+    const { result } = renderHook(() => useQueryAdapter(params));
+
+    await act(async () => {
+      await result.current.executeQuery();
+    });
+
+    expect(params.onQueryExecute).not.toHaveBeenCalled();
+    expect(mockToastError).toHaveBeenCalled();
+  });
+
+  // ── executeQuery updates tab with result data ──────────────────────────────
+
+  test('executeQuery updates tab with result data', async () => {
+    const defaultTab = makeTab();
+    const { tabs, setTabs } = createMutableTabs([defaultTab]);
+    const queryResult = makeQueryResult();
+    const onQueryExecute = mock(() => Promise.resolve(queryResult));
+
+    const params = makeHookParams({
+      onQueryExecute,
+      tabs,
+      setTabs,
+      currentTab: defaultTab,
+    });
+
+    const { result } = renderHook(() => useQueryAdapter(params));
+
+    await act(async () => {
+      await result.current.executeQuery('SELECT * FROM users');
+    });
+
+    expect(tabs[0].result).not.toBeNull();
+    expect(tabs[0].result!.rows).toEqual(queryResult.rows);
+    expect(tabs[0].result!.fields).toEqual(queryResult.fields);
+    expect(tabs[0].result!.rowCount).toBe(queryResult.rowCount);
+    expect(tabs[0].isExecuting).toBe(false);
+  });
+
+  // ── setBottomPanelMode updates correctly ───────────────────────────────────
+
+  test('setBottomPanelMode updates correctly', () => {
+    const params = makeHookParams();
+
+    const { result } = renderHook(() => useQueryAdapter(params));
+
+    act(() => {
+      result.current.setBottomPanelMode('history');
+    });
+
+    expect(result.current.bottomPanelMode).toBe('history');
+  });
+
+  // ── safetyCheckQuery and setter work ───────────────────────────────────────
+
+  test('safetyCheckQuery defaults to null and can be set', () => {
+    const params = makeHookParams();
+
+    const { result } = renderHook(() => useQueryAdapter(params));
+
+    expect(result.current.safetyCheckQuery).toBeNull();
+
+    act(() => {
+      result.current.setSafetyCheckQuery('DROP TABLE users');
+    });
+
+    expect(result.current.safetyCheckQuery).toBe('DROP TABLE users');
+  });
+
+  // ── forceExecuteQuery calls onQueryExecute bypassing safety ────────────────
+
+  test('forceExecuteQuery calls onQueryExecute for dangerous queries', async () => {
+    const params = makeHookParams();
+
+    const { result } = renderHook(() => useQueryAdapter(params));
+
+    // forceExecuteQuery should bypass safety check
+    await act(async () => {
+      result.current.forceExecuteQuery('DROP TABLE users');
+      // Allow promise chain to resolve
+      await new Promise(r => setTimeout(r, 10));
+    });
+
+    expect(params.onQueryExecute).toHaveBeenCalledWith('conn-1', 'DROP TABLE users');
+  });
+});

From bf131932fbd91a0c596c94ebd79ba89818d936ea Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 16:23:20 +0300
Subject: [PATCH 14/39] feat(workspace): add StudioWorkspace composite
 component

Composes useConnectionAdapter, useQueryAdapter, and useTabManager hooks
with existing Studio UI components to provide an embeddable IDE experience
for the platform integration. Removes standalone headers, connection
management modals, and command palette; gates optional features (AI,
charts, code generator, test data, schema diagram, data import) behind
WorkspaceFeatures flags.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/workspace/StudioWorkspace.tsx | 510 ++++++++++++++++++++++++++++++
 1 file changed, 510 insertions(+)
 create mode 100644 src/workspace/StudioWorkspace.tsx

diff --git a/src/workspace/StudioWorkspace.tsx b/src/workspace/StudioWorkspace.tsx
new file mode 100644
index 0000000..47a8cc7
--- /dev/null
+++ b/src/workspace/StudioWorkspace.tsx
@@ -0,0 +1,510 @@
+'use client';
+
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { Sidebar, ConnectionsList } from '@/components/sidebar';
+import { MobileNav } from '@/components/MobileNav';
+import { SchemaExplorer } from '@/components/schema-explorer';
+import { QueryEditor, QueryEditorRef } from '@/components/QueryEditor';
+import { DataImportModal } from '@/components/DataImportModal';
+import { QuerySafetyDialog } from '@/components/QuerySafetyDialog';
+import { DataProfiler } from '@/components/DataProfiler';
+import { CodeGenerator } from '@/components/CodeGenerator';
+import { TestDataGenerator } from '@/components/TestDataGenerator';
+import { SchemaDiagram } from '@/components/SchemaDiagram';
+import { SaveQueryModal } from '@/components/SaveQueryModal';
+import {
+  StudioTabBar,
+  QueryToolbar,
+  BottomPanel,
+} from '@/components/studio/index';
+import type { DatabaseConnection } from '@/lib/types';
+import type { MaskingConfig } from '@/lib/data-masking';
+import { useToast } from '@/hooks/use-toast';
+import { useTabManager } from '@/hooks/use-tab-manager';
+import { useConnectionAdapter } from '@/workspace/hooks/use-connection-adapter';
+import { useQueryAdapter } from '@/workspace/hooks/use-query-adapter';
+import {
+  type StudioWorkspaceProps,
+  DEFAULT_WORKSPACE_FEATURES,
+} from '@/workspace/types';
+import { cn } from '@/lib/utils';
+import { AlertTriangle, Database } from 'lucide-react';
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
+import { AnimatePresence } from 'framer-motion';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+// No-op masking config for embedded mode (masking disabled)
+const NOOP_MASKING_CONFIG: MaskingConfig = {
+  enabled: false,
+  patterns: [],
+  roleSettings: {
+    admin: { canToggle: false, canReveal: false },
+    user: { canToggle: false, canReveal: false },
+  },
+};
+
+export function StudioWorkspace({
+  connections: externalConnections,
+  currentUser,
+  onQueryExecute,
+  onSchemaFetch,
+  onSaveQuery: onSaveQueryProp,
+  // onLoadSavedQueries — reserved for future saved-queries panel integration
+  features: featuresProp,
+  className,
+}: StudioWorkspaceProps) {
+  const queryEditorRef = useRef<QueryEditorRef>(null);
+  const { toast } = useToast();
+
+  // Merge feature flags with defaults
+  const features = useMemo(
+    () => ({ ...DEFAULT_WORKSPACE_FEATURES, ...featuresProp }),
+    [featuresProp],
+  );
+
+  // 1. Connection Adapter (platform-managed connections)
+  const conn = useConnectionAdapter({
+    connections: externalConnections,
+    onSchemaFetch,
+  });
+
+  // 2. Tab Manager (pure UI state, reused as-is)
+  const tabMgr = useTabManager({
+    activeConnection: conn.activeConnection,
+    metadata: null,
+    schema: conn.schema,
+  });
+
+  // 3. Query Adapter (platform-delegated execution)
+  const queryExec = useQueryAdapter({
+    activeConnection: conn.activeConnection,
+    onQueryExecute,
+    tabs: tabMgr.tabs,
+    activeTabId: tabMgr.activeTabId,
+    currentTab: tabMgr.currentTab,
+    setTabs: tabMgr.setTabs,
+    fetchSchema: conn.fetchSchema,
+    features,
+  });
+
+  // === Connection change effect ===
+  useEffect(() => {
+    if (conn.activeConnection) {
+      conn.fetchSchema(conn.activeConnection);
+    } else {
+      conn.setSchema([]);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [conn.activeConnection]);
+
+  // === Modal / overlay state ===
+  const [showDiagram, setShowDiagram] = useState(false);
+  const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState(false);
+  const [savedKey, setSavedKey] = useState(0);
+  const [activeMobileTab, setActiveMobileTab] = useState<'database' | 'schema' | 'editor'>('editor');
+  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
+  const [isNL2SQLOpen, setIsNL2SQLOpen] = useState(false);
+  const [profilerTable, setProfilerTable] = useState<string | null>(null);
+  const [codeGenTable, setCodeGenTable] = useState<string | null>(null);
+  const [testDataTable, setTestDataTable] = useState<string | null>(null);
+
+  // === Save query handler ===
+  const handleSaveQuery = useCallback(async (name: string, description: string, tags: string[]) => {
+    if (!conn.activeConnection) return;
+
+    if (onSaveQueryProp) {
+      try {
+        await onSaveQueryProp({
+          name,
+          query: tabMgr.currentTab.query,
+          description,
+          connectionType: conn.activeConnection.type,
+          tags,
+        });
+        setSavedKey(prev => prev + 1);
+        toast({ title: 'Query Saved', description: `"${name}" has been added to your saved queries.` });
+      } catch (error) {
+        const msg = error instanceof Error ? error.message : 'Failed to save query';
+        toast({ title: 'Save Failed', description: msg, variant: 'destructive' });
+      }
+    }
+  }, [conn.activeConnection, tabMgr.currentTab.query, onSaveQueryProp, toast]);
+
+  // === Export results (simplified, no masking) ===
+  const exportResults = useCallback((format: 'csv' | 'json' | 'sql-insert' | 'sql-ddl') => {
+    if (!tabMgr.currentTab.result) return;
+    const data = tabMgr.currentTab.result.rows;
+    let content = '';
+    let mimeType = 'text/plain';
+    let ext: string = format;
+
+    if (format === 'csv') {
+      const headers = Object.keys(data[0] || {}).join(',');
+      const rows = data.map(row => Object.values(row).map(val => `"${val}"`).join(',')).join('\n');
+      content = `${headers}\n${rows}`;
+      mimeType = 'text/csv';
+      ext = 'csv';
+    } else if (format === 'json') {
+      content = JSON.stringify(data, null, 2);
+      mimeType = 'application/json';
+      ext = 'json';
+    } else if (format === 'sql-insert') {
+      const tableName = tabMgr.currentTab.name.replace(/^Query[: ]*/, '') || 'table_name';
+      const columns = Object.keys(data[0] || {});
+      const lines = data.map(row => {
+        const values = columns.map(col => {
+          const val = row[col];
+          if (val === null || val === undefined) return 'NULL';
+          if (typeof val === 'number' || typeof val === 'boolean') return String(val);
+          return `'${String(val).replace(/'/g, "''")}'`;
+        });
+        return `INSERT INTO ${tableName} (${columns.join(', ')}) VALUES (${values.join(', ')});`;
+      });
+      content = lines.join('\n');
+      mimeType = 'text/sql';
+      ext = 'sql';
+    } else if (format === 'sql-ddl') {
+      const tableName = tabMgr.currentTab.name.replace(/^Query[: ]*/, '') || 'table_name';
+      const columns = Object.keys(data[0] || {});
+      const colDefs = columns.map(col => {
+        const sampleVal = data[0]?.[col];
+        let sqlType = 'TEXT';
+        if (typeof sampleVal === 'number') {
+          sqlType = Number.isInteger(sampleVal) ? 'INTEGER' : 'NUMERIC';
+        } else if (typeof sampleVal === 'boolean') {
+          sqlType = 'BOOLEAN';
+        } else if (sampleVal instanceof Date) {
+          sqlType = 'TIMESTAMP';
+        }
+        return `  ${col} ${sqlType}`;
+      });
+      content = `CREATE TABLE ${tableName} (\n${colDefs.join(',\n')}\n);`;
+      mimeType = 'text/sql';
+      ext = 'sql';
+    }
+
+    const fileName = `query_result_export.${ext}`;
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = fileName;
+    link.click();
+    URL.revokeObjectURL(url);
+  }, [tabMgr.currentTab]);
+
+  // === Table click handler ===
+  const onTableClick = useCallback((tableName: string) => {
+    tabMgr.handleTableClick(tableName, queryExec.executeQuery);
+  }, [tabMgr, queryExec.executeQuery]);
+
+  // === No-op callbacks for disabled features ===
+  const noop = useCallback(() => {}, []);
+
+  return (
+    <div className={cn('flex h-full w-full bg-[#050505] text-zinc-100 overflow-hidden font-sans select-none', className)}>
+      <ResizablePanelGroup id="workspace-main" direction="horizontal" className="h-full">
+        <ResizablePanel defaultSize={22} minSize={15} maxSize={35} className="hidden md:block">
+          <Sidebar
+            connections={conn.connections}
+            activeConnection={conn.activeConnection}
+            schema={conn.schema}
+            isLoadingSchema={conn.isLoadingSchema}
+            onSelectConnection={conn.setActiveConnection}
+            onDeleteConnection={noop}
+            onEditConnection={noop}
+            onAddConnection={noop}
+            onTableClick={onTableClick}
+            onGenerateSelect={tabMgr.handleGenerateSelect}
+            onCreateTableClick={undefined}
+            onShowDiagram={features.schemaDiagram ? () => setShowDiagram(true) : undefined}
+            isAdmin={false}
+            onOpenMaintenance={noop}
+            databaseType={conn.activeConnection?.type}
+            metadata={null}
+            onProfileTable={features.codeGenerator ? (name: string) => setProfilerTable(name) : undefined}
+            onGenerateCode={features.codeGenerator ? (name: string) => setCodeGenTable(name) : undefined}
+            onGenerateTestData={features.testDataGenerator ? (name: string) => setTestDataTable(name) : undefined}
+          />
+        </ResizablePanel>
+        <ResizableHandle className="hidden md:flex w-1 bg-transparent hover:bg-blue-500/30 transition-colors" />
+        <ResizablePanel defaultSize={78}>
+          <div className="flex-1 flex flex-col min-w-0 h-full bg-[#0a0a0a] pb-16 md:pb-0">
+            {/* No desktop/mobile headers — platform provides its own */}
+
+            <StudioTabBar
+              tabs={tabMgr.tabs}
+              activeTabId={tabMgr.activeTabId}
+              editingTabId={tabMgr.editingTabId}
+              editingTabName={tabMgr.editingTabName}
+              onSetActiveTabId={tabMgr.setActiveTabId}
+              onSetEditingTabId={tabMgr.setEditingTabId}
+              onSetEditingTabName={tabMgr.setEditingTabName}
+              onSetTabs={tabMgr.setTabs}
+              onCloseTab={tabMgr.closeTab}
+              onAddTab={tabMgr.addTab}
+            />
+
+            <main className="flex-1 overflow-hidden relative">
+              {/* Schema Diagram overlay */}
+              {features.schemaDiagram && (
+                <AnimatePresence>
+                  {showDiagram && (
+                    <SchemaDiagram schema={conn.schema} onClose={() => setShowDiagram(false)} />
+                  )}
+                </AnimatePresence>
+              )}
+
+              {/* Mobile: Database Tab */}
+              {activeMobileTab === 'database' && (
+                <div className="md:hidden h-full bg-[#080808] overflow-auto p-4">
+                  <div className="mb-4 flex items-center justify-between">
+                    <h2 className="text-sm font-bold text-zinc-300 uppercase tracking-widest">Connections</h2>
+                  </div>
+                  <ConnectionsList
+                    connections={conn.connections}
+                    activeConnection={conn.activeConnection}
+                    onSelectConnection={(c: DatabaseConnection) => {
+                      conn.setActiveConnection(c);
+                      setActiveMobileTab('editor');
+                    }}
+                    onDeleteConnection={noop}
+                    onAddConnection={noop}
+                  />
+                </div>
+              )}
+
+              {/* Mobile: Schema Tab */}
+              {activeMobileTab === 'schema' && (
+                <div className="md:hidden h-full bg-[#080808] overflow-auto p-4">
+                  {conn.activeConnection ? (
+                    <SchemaExplorer
+                      schema={conn.schema}
+                      isLoadingSchema={conn.isLoadingSchema}
+                      onTableClick={(tableName: string) => {
+                        onTableClick(tableName);
+                        setActiveMobileTab('editor');
+                      }}
+                      onGenerateSelect={(tableName: string) => {
+                        tabMgr.handleGenerateSelect(tableName);
+                        setActiveMobileTab('editor');
+                      }}
+                      onCreateTableClick={undefined}
+                      isAdmin={false}
+                      onOpenMaintenance={noop}
+                      databaseType={conn.activeConnection?.type}
+                      metadata={null}
+                      onProfileTable={features.codeGenerator ? (name: string) => setProfilerTable(name) : undefined}
+                      onGenerateCode={features.codeGenerator ? (name: string) => setCodeGenTable(name) : undefined}
+                      onGenerateTestData={features.testDataGenerator ? (name: string) => setTestDataTable(name) : undefined}
+                    />
+                  ) : (
+                    <div className="flex flex-col items-center justify-center h-full text-zinc-500">
+                      <Database className="w-12 h-12 mb-4 opacity-30" />
+                      <p className="text-sm">Select a connection first</p>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* Desktop & Mobile Editor Tab */}
+              <div className={cn(
+                'h-full',
+                activeMobileTab !== 'editor' && 'hidden md:block',
+              )}>
+                <div className="h-full">
+                  <ResizablePanelGroup id="workspace-editor" direction="vertical">
+                    <ResizablePanel defaultSize={40} minSize={20}>
+                      <div className="h-full flex flex-col">
+                        <QueryToolbar
+                          activeConnection={conn.activeConnection}
+                          metadata={null}
+                          isExecuting={tabMgr.currentTab.isExecuting}
+                          playgroundMode={false}
+                          transactionActive={false}
+                          editingEnabled={false}
+                          onSaveQuery={onSaveQueryProp ? () => setIsSaveQueryModalOpen(true) : noop}
+                          onExecuteQuery={() => queryExec.executeQuery()}
+                          onCancelQuery={queryExec.cancelQuery}
+                          onBeginTransaction={noop}
+                          onCommitTransaction={noop}
+                          onRollbackTransaction={noop}
+                          onTogglePlayground={noop}
+                          onToggleEditing={noop}
+                          onImport={features.dataImport ? () => setIsImportModalOpen(true) : noop}
+                        />
+
+                        <div className="flex-1 relative">
+                          <QueryEditor
+                            ref={queryEditorRef}
+                            value={tabMgr.currentTab.query}
+                            onContentChange={(val) => tabMgr.updateTabById(tabMgr.currentTab.id, { query: val })}
+                            language={tabMgr.currentTab.type === 'mongodb' ? 'json' : 'sql'}
+                            tables={conn.tableNames}
+                            databaseType={conn.activeConnection?.type}
+                            schemaContext={conn.schemaContext}
+                            capabilities={undefined}
+                          />
+                        </div>
+                      </div>
+                    </ResizablePanel>
+                    <ResizableHandle className="h-1 bg-white/5 hover:bg-blue-500/20" />
+                    <ResizablePanel defaultSize={60} minSize={20}>
+                      <BottomPanel
+                        mode={queryExec.bottomPanelMode}
+                        onSetMode={queryExec.setBottomPanelMode}
+                        currentTab={tabMgr.currentTab}
+                        schema={conn.schema}
+                        schemaContext={conn.schemaContext}
+                        activeConnection={conn.activeConnection}
+                        metadata={null}
+                        historyKey={queryExec.historyKey}
+                        savedKey={savedKey}
+                        isNL2SQLOpen={features.ai ? isNL2SQLOpen : false}
+                        onSetIsNL2SQLOpen={features.ai ? setIsNL2SQLOpen : noop}
+                        maskingEnabled={false}
+                        onToggleMasking={undefined}
+                        userRole={currentUser?.role}
+                        maskingConfig={NOOP_MASKING_CONFIG}
+                        editingEnabled={false}
+                        pendingChanges={[]}
+                        onCellChange={noop as never}
+                        onApplyChanges={noop}
+                        onDiscardChanges={noop}
+                        onExecuteQuery={(q) => queryExec.executeQuery(q)}
+                        onLoadQuery={(q) => tabMgr.updateCurrentTab({ query: q })}
+                        onLoadMore={
+                          tabMgr.currentTab.result?.pagination?.hasMore
+                            ? queryExec.handleLoadMore
+                            : undefined
+                        }
+                        isLoadingMore={tabMgr.currentTab.isLoadingMore}
+                        onExportResults={exportResults}
+                      />
+                    </ResizablePanel>
+                  </ResizablePanelGroup>
+                </div>
+              </div>
+            </main>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* Modals — only render those that are feature-enabled */}
+
+      {onSaveQueryProp && (
+        <SaveQueryModal
+          isOpen={isSaveQueryModalOpen}
+          onClose={() => setIsSaveQueryModalOpen(false)}
+          onSave={handleSaveQuery}
+          defaultQuery={tabMgr.currentTab.query}
+        />
+      )}
+
+      {features.dataImport && (
+        <DataImportModal
+          isOpen={isImportModalOpen}
+          onClose={() => setIsImportModalOpen(false)}
+          onImport={(sql) => queryExec.executeQuery(sql)}
+          tables={conn.schema}
+          databaseType={conn.activeConnection?.type}
+        />
+      )}
+
+      {/* Safety dialog — simplified, no AI analysis */}
+      <QuerySafetyDialog
+        isOpen={!!queryExec.safetyCheckQuery}
+        query={queryExec.safetyCheckQuery || ''}
+        schemaContext={conn.schemaContext}
+        databaseType={conn.activeConnection?.type}
+        onClose={() => queryExec.setSafetyCheckQuery(null)}
+        onProceed={() => {
+          if (queryExec.safetyCheckQuery) queryExec.forceExecuteQuery(queryExec.safetyCheckQuery);
+        }}
+      />
+
+      {/* Data Profiler */}
+      {features.codeGenerator && (
+        <DataProfiler
+          isOpen={!!profilerTable}
+          onClose={() => setProfilerTable(null)}
+          tableName={profilerTable || ''}
+          tableSchema={conn.schema.find(t => t.name === profilerTable) || null}
+          connection={conn.activeConnection}
+          schemaContext={conn.schemaContext}
+          databaseType={conn.activeConnection?.type}
+        />
+      )}
+
+      {/* Code Generator */}
+      {features.codeGenerator && (
+        <CodeGenerator
+          isOpen={!!codeGenTable}
+          onClose={() => setCodeGenTable(null)}
+          tableName={codeGenTable || ''}
+          tableSchema={conn.schema.find(t => t.name === codeGenTable) || null}
+          databaseType={conn.activeConnection?.type}
+        />
+      )}
+
+      {/* Test Data Generator */}
+      {features.testDataGenerator && (
+        <TestDataGenerator
+          isOpen={!!testDataTable}
+          onClose={() => setTestDataTable(null)}
+          tableName={testDataTable || ''}
+          tableSchema={conn.schema.find(t => t.name === testDataTable) || null}
+          databaseType={conn.activeConnection?.type}
+          queryLanguage={undefined}
+          onExecuteQuery={(q) => queryExec.executeQuery(q)}
+        />
+      )}
+
+      {/* Unlimited Query Warning */}
+      <AlertDialog open={queryExec.unlimitedWarningOpen} onOpenChange={queryExec.setUnlimitedWarningOpen}>
+        <AlertDialogContent className="bg-[#111] border-white/5 max-w-sm p-0 gap-0 overflow-hidden">
+          <div className="px-6 pt-6 pb-4">
+            <div className="flex items-start gap-3">
+              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500/20 to-red-500/10 flex items-center justify-center shrink-0">
+                <AlertTriangle className="w-5 h-5 text-amber-400" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <AlertDialogTitle className="text-[15px] font-semibold text-zinc-100 mb-1">
+                  Load all results?
+                </AlertDialogTitle>
+                <AlertDialogDescription className="text-[13px] text-zinc-500 leading-relaxed">
+                  This may slow down your browser. Max <span className="text-zinc-400">100K</span> rows will be loaded.
+                </AlertDialogDescription>
+              </div>
+            </div>
+          </div>
+          <div className="px-6 pb-6 flex gap-2">
+            <AlertDialogCancel className="flex-1 h-9 bg-white/5 border-0 text-zinc-400 text-[13px] font-medium hover:bg-white/10 hover:text-zinc-200">
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={queryExec.handleUnlimitedQuery}
+              className="flex-1 h-9 bg-amber-600 border-0 text-white text-[13px] font-medium hover:bg-amber-500"
+            >
+              Load All
+            </AlertDialogAction>
+          </div>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Mobile Navigation */}
+      <MobileNav
+        activeTab={activeMobileTab}
+        onTabChange={setActiveMobileTab}
+        hasResult={!!tabMgr.currentTab.result}
+      />
+    </div>
+  );
+}

From 5665a534027854f57577c2fa02e8d3e37ed77b7a Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 16:27:53 +0300
Subject: [PATCH 15/39] fix(workspace): stub QuerySafetyDialog AI analysis to
 prevent internal fetch

---
 src/workspace/StudioWorkspace.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/workspace/StudioWorkspace.tsx b/src/workspace/StudioWorkspace.tsx
index 47a8cc7..014e959 100644
--- a/src/workspace/StudioWorkspace.tsx
+++ b/src/workspace/StudioWorkspace.tsx
@@ -418,7 +418,7 @@ export function StudioWorkspace({
         />
       )}
 
-      {/* Safety dialog — simplified, no AI analysis */}
+      {/* Safety dialog — stub AI analysis to prevent internal fetch */}
       <QuerySafetyDialog
         isOpen={!!queryExec.safetyCheckQuery}
         query={queryExec.safetyCheckQuery || ''}
@@ -428,6 +428,19 @@ export function StudioWorkspace({
         onProceed={() => {
           if (queryExec.safetyCheckQuery) queryExec.forceExecuteQuery(queryExec.safetyCheckQuery);
         }}
+        onAnalyzeSafety={async () => ({
+          riskLevel: 'high' as const,
+          summary: 'Potentially dangerous query detected',
+          warnings: [{
+            type: 'destructive',
+            severity: 'high',
+            message: 'This query may modify or delete data',
+            detail: 'Review carefully before proceeding.',
+          }],
+          affectedRows: 'unknown',
+          cascadeEffects: 'unknown',
+          recommendation: 'Review this query carefully before proceeding.',
+        })}
       />
 
       {/* Data Profiler */}

From 04cf6bc67531355829dae6be93465c4fa8c2b4e2 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 16:29:24 +0300
Subject: [PATCH 16/39] feat(workspace): add workspace export entry point and
 build config

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 package.json             | 63 +++++++++++++++++++++++++++++++--
 src/exports/workspace.ts | 11 ++++++
 tsup.config.ts           | 76 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 148 insertions(+), 2 deletions(-)
 create mode 100644 src/exports/workspace.ts
 create mode 100644 tsup.config.ts

diff --git a/package.json b/package.json
index f6527da..aa8ac71 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,64 @@
     "type": "git",
     "url": "https://github.com/libredb/libredb-studio"
   },
-  "main": "./src/exports/index.js",
-  "types": "./src/exports/index.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./providers": {
+      "import": {
+        "types": "./dist/providers.d.mts",
+        "default": "./dist/providers.mjs"
+      },
+      "require": {
+        "types": "./dist/providers.d.ts",
+        "default": "./dist/providers.js"
+      }
+    },
+    "./types": {
+      "import": {
+        "types": "./dist/types.d.mts",
+        "default": "./dist/types.mjs"
+      },
+      "require": {
+        "types": "./dist/types.d.ts",
+        "default": "./dist/types.js"
+      }
+    },
+    "./components": {
+      "import": {
+        "types": "./dist/components.d.mts",
+        "default": "./dist/components.mjs"
+      },
+      "require": {
+        "types": "./dist/components.d.ts",
+        "default": "./dist/components.js"
+      }
+    },
+    "./workspace": {
+      "import": {
+        "types": "./dist/workspace.d.mts",
+        "default": "./dist/workspace.mjs"
+      },
+      "require": {
+        "types": "./dist/workspace.d.ts",
+        "default": "./dist/workspace.js"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19"
@@ -18,6 +74,8 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "build:lib": "tsup",
+    "prepublishOnly": "tsup",
     "start": "next start",
     "lint": "eslint .",
     "typecheck": "tsc --noEmit",
@@ -120,6 +178,7 @@
     "eslint-config-next": "^16.1.6",
     "happy-dom": "^20.6.1",
     "tailwindcss": "^4",
+    "tsup": "^8.5.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5"
   }
diff --git a/src/exports/workspace.ts b/src/exports/workspace.ts
new file mode 100644
index 0000000..0a8f96c
--- /dev/null
+++ b/src/exports/workspace.ts
@@ -0,0 +1,11 @@
+// src/exports/workspace.ts
+export { StudioWorkspace } from '../workspace/StudioWorkspace'
+export type {
+  StudioWorkspaceProps,
+  WorkspaceConnection,
+  WorkspaceUser,
+  WorkspaceQueryResult,
+  WorkspaceFeatures,
+  SavedQueryInput,
+} from '../workspace/types'
+export { DEFAULT_WORKSPACE_FEATURES } from '../workspace/types'
diff --git a/tsup.config.ts b/tsup.config.ts
new file mode 100644
index 0000000..8789b3c
--- /dev/null
+++ b/tsup.config.ts
@@ -0,0 +1,76 @@
+import { defineConfig } from 'tsup'
+import path from 'path'
+
+export default defineConfig({
+  entry: {
+    index: 'src/exports/index.ts',
+    providers: 'src/exports/providers.ts',
+    types: 'src/exports/types.ts',
+    components: 'src/exports/components.ts',
+    workspace: 'src/exports/workspace.ts',
+  },
+  format: ['esm', 'cjs'],
+  dts: true,
+  splitting: true,
+  sourcemap: true,
+  clean: true,
+  tsconfig: 'tsconfig.lib.json',
+  treeshake: true,
+  external: [
+    'react', 'react-dom', 'next',
+    // Database drivers — consumers install what they need
+    'pg', 'mysql2', 'better-sqlite3', 'oracledb', 'mssql', 'mongodb', 'ioredis',
+    // SSH and crypto
+    'ssh2',
+    // Monaco editor
+    'monaco-editor', '@monaco-editor/react',
+    // LLM SDKs
+    '@google/generative-ai',
+    // UI libs that consumers provide
+    'elkjs', 'recharts',
+    'framer-motion', 'html2canvas',
+    '@tanstack/react-table', '@tanstack/react-virtual',
+    'react-resizable-panels', 'react-hook-form', '@hookform/resolvers',
+    'react-day-picker', 'embla-carousel-react', 'input-otp',
+    'sonner', 'vaul', 'cmdk', 'next-themes',
+    // Radix primitives
+    /^@radix-ui\//,
+    // Utilities
+    'class-variance-authority', 'clsx', 'tailwind-merge',
+    'sql-formatter', 'date-fns', 'zod', 'yaml', 'jose', 'openid-client',
+    'lucide-react',
+  ],
+  esbuildPlugins: [
+    {
+      name: 'resolve-at-alias',
+      setup(build) {
+        // Rewrite @/ → ./  and let esbuild resolve from src/
+        build.onResolve({ filter: /^@\// }, async (args) => {
+          return build.resolve('./' + args.path.slice(2), {
+            resolveDir: path.resolve(__dirname, 'src'),
+            kind: args.kind,
+          })
+        })
+      },
+    },
+    {
+      name: 'handle-css-and-xyflow',
+      setup(build) {
+        // Replace CSS imports with empty modules.
+        // CSS is handled by the consumer's bundler (Next.js/Vite), not at runtime.
+        build.onResolve({ filter: /\.css$/ }, (args) => ({
+          path: args.path,
+          namespace: 'ignore-css',
+        }))
+        build.onLoad({ filter: /.*/, namespace: 'ignore-css' }, () => ({
+          contents: '',
+        }))
+        // Mark @xyflow/react (non-CSS) as external
+        build.onResolve({ filter: /^@xyflow\/react$/ }, () => ({
+          path: '@xyflow/react',
+          external: true,
+        }))
+      },
+    },
+  ],
+})

From fb371cd51b5a245fa3dda9b9fb58ae2e1dbc6c39 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 16:34:38 +0300
Subject: [PATCH 17/39] fix(workspace): remove unused QueryResult import

---
 src/workspace/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/workspace/types.ts b/src/workspace/types.ts
index bd888ae..31e8377 100644
--- a/src/workspace/types.ts
+++ b/src/workspace/types.ts
@@ -1,5 +1,5 @@
 // src/workspace/types.ts
-import type { DatabaseType, TableSchema, QueryResult, SavedQuery } from '@/lib/types';
+import type { DatabaseType, TableSchema, SavedQuery } from '@/lib/types';
 
 // === Connection (platform → studio) ===
 

From c879d1dff5c48da3d969117290569daf76d45f74 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 16:59:45 +0300
Subject: [PATCH 18/39] fix(workspace): add scoped dark theme CSS variables and
 remove MobileNav from embedded mode

---
 src/workspace/StudioWorkspace.tsx | 50 +++++++++++++++++++++++++------
 1 file changed, 41 insertions(+), 9 deletions(-)

diff --git a/src/workspace/StudioWorkspace.tsx b/src/workspace/StudioWorkspace.tsx
index 014e959..83c609b 100644
--- a/src/workspace/StudioWorkspace.tsx
+++ b/src/workspace/StudioWorkspace.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { Sidebar, ConnectionsList } from '@/components/sidebar';
-import { MobileNav } from '@/components/MobileNav';
+// MobileNav excluded in embedded mode — platform provides its own navigation
 import { SchemaExplorer } from '@/components/schema-explorer';
 import { QueryEditor, QueryEditorRef } from '@/components/QueryEditor';
 import { DataImportModal } from '@/components/DataImportModal';
@@ -28,6 +28,40 @@ import {
   DEFAULT_WORKSPACE_FEATURES,
 } from '@/workspace/types';
 import { cn } from '@/lib/utils';
+
+/**
+ * Scoped CSS variables for studio's dark theme.
+ * When embedded in a host app (e.g. platform uses OKLCH colors),
+ * studio needs its own hex-based CSS variables to render correctly.
+ */
+const STUDIO_THEME_VARS: React.CSSProperties = {
+  // @ts-expect-error -- CSS custom properties
+  '--background': '#09090b',
+  '--foreground': '#fafafa',
+  '--card': '#0a0a0a',
+  '--card-foreground': '#fafafa',
+  '--popover': '#0a0a0a',
+  '--popover-foreground': '#fafafa',
+  '--primary': '#fafafa',
+  '--primary-foreground': '#171717',
+  '--secondary': '#27272a',
+  '--secondary-foreground': '#fafafa',
+  '--muted': '#27272a',
+  '--muted-foreground': '#a1a1aa',
+  '--accent': '#27272a',
+  '--accent-foreground': '#fafafa',
+  '--destructive': '#7f1d1d',
+  '--destructive-foreground': '#fafafa',
+  '--border': '#27272a',
+  '--input': '#27272a',
+  '--ring': '#d4d4d8',
+  '--radius': '0.5rem',
+  '--chart-1': '#3b82f6',
+  '--chart-2': '#22c55e',
+  '--chart-3': '#f59e0b',
+  '--chart-4': '#a855f7',
+  '--chart-5': '#ec4899',
+};
 import { AlertTriangle, Database } from 'lucide-react';
 import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
 import { AnimatePresence } from 'framer-motion';
@@ -209,7 +243,10 @@ export function StudioWorkspace({
   const noop = useCallback(() => {}, []);
 
   return (
-    <div className={cn('flex h-full w-full bg-[#050505] text-zinc-100 overflow-hidden font-sans select-none', className)}>
+    <div
+      className={cn('dark flex h-full w-full bg-[#050505] text-zinc-100 overflow-hidden font-sans select-none', className)}
+      style={STUDIO_THEME_VARS}
+    >
       <ResizablePanelGroup id="workspace-main" direction="horizontal" className="h-full">
         <ResizablePanel defaultSize={22} minSize={15} maxSize={35} className="hidden md:block">
           <Sidebar
@@ -236,7 +273,7 @@ export function StudioWorkspace({
         </ResizablePanel>
         <ResizableHandle className="hidden md:flex w-1 bg-transparent hover:bg-blue-500/30 transition-colors" />
         <ResizablePanel defaultSize={78}>
-          <div className="flex-1 flex flex-col min-w-0 h-full bg-[#0a0a0a] pb-16 md:pb-0">
+          <div className="flex-1 flex flex-col min-w-0 h-full bg-[#0a0a0a]">
             {/* No desktop/mobile headers — platform provides its own */}
 
             <StudioTabBar
@@ -512,12 +549,7 @@ export function StudioWorkspace({
         </AlertDialogContent>
       </AlertDialog>
 
-      {/* Mobile Navigation */}
-      <MobileNav
-        activeTab={activeMobileTab}
-        onTabChange={setActiveMobileTab}
-        hasResult={!!tabMgr.currentTab.result}
-      />
+      {/* Mobile Navigation — hidden in embedded mode, platform provides its own */}
     </div>
   );
 }

From b24a1799a5ff3dfe8e07ce5c5c690adc5671b2e1 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 17:03:45 +0300
Subject: [PATCH 19/39] fix(workspace): inject scoped dark theme CSS via style
 tag for host app compatibility

---
 src/workspace/StudioWorkspace.tsx | 84 +++++++++++++++++++------------
 1 file changed, 52 insertions(+), 32 deletions(-)

diff --git a/src/workspace/StudioWorkspace.tsx b/src/workspace/StudioWorkspace.tsx
index 83c609b..f025db3 100644
--- a/src/workspace/StudioWorkspace.tsx
+++ b/src/workspace/StudioWorkspace.tsx
@@ -30,38 +30,55 @@ import {
 import { cn } from '@/lib/utils';
 
 /**
- * Scoped CSS variables for studio's dark theme.
- * When embedded in a host app (e.g. platform uses OKLCH colors),
- * studio needs its own hex-based CSS variables to render correctly.
+ * Scoped CSS for studio's dark theme.
+ * When embedded in a host app that uses different CSS variable formats
+ * (e.g. OKLCH instead of hex), studio injects its own scoped styles
+ * to ensure correct rendering. Uses data-studio-workspace attribute
+ * for high-specificity scoping without affecting the host app.
  */
-const STUDIO_THEME_VARS: React.CSSProperties = {
-  // @ts-expect-error -- CSS custom properties
-  '--background': '#09090b',
-  '--foreground': '#fafafa',
-  '--card': '#0a0a0a',
-  '--card-foreground': '#fafafa',
-  '--popover': '#0a0a0a',
-  '--popover-foreground': '#fafafa',
-  '--primary': '#fafafa',
-  '--primary-foreground': '#171717',
-  '--secondary': '#27272a',
-  '--secondary-foreground': '#fafafa',
-  '--muted': '#27272a',
-  '--muted-foreground': '#a1a1aa',
-  '--accent': '#27272a',
-  '--accent-foreground': '#fafafa',
-  '--destructive': '#7f1d1d',
-  '--destructive-foreground': '#fafafa',
-  '--border': '#27272a',
-  '--input': '#27272a',
-  '--ring': '#d4d4d8',
-  '--radius': '0.5rem',
-  '--chart-1': '#3b82f6',
-  '--chart-2': '#22c55e',
-  '--chart-3': '#f59e0b',
-  '--chart-4': '#a855f7',
-  '--chart-5': '#ec4899',
-};
+const STUDIO_SCOPED_CSS = `
+[data-studio-workspace] {
+  --background: #09090b;
+  --foreground: #fafafa;
+  --card: #0a0a0a;
+  --card-foreground: #fafafa;
+  --popover: #0a0a0a;
+  --popover-foreground: #fafafa;
+  --primary: #fafafa;
+  --primary-foreground: #171717;
+  --secondary: #27272a;
+  --secondary-foreground: #fafafa;
+  --muted: #27272a;
+  --muted-foreground: #a1a1aa;
+  --accent: #27272a;
+  --accent-foreground: #fafafa;
+  --destructive: #7f1d1d;
+  --destructive-foreground: #fafafa;
+  --border: #27272a;
+  --input: #27272a;
+  --ring: #d4d4d8;
+  --radius: 0.5rem;
+  --chart-1: #3b82f6;
+  --chart-2: #22c55e;
+  --chart-3: #f59e0b;
+  --chart-4: #a855f7;
+  --chart-5: #ec4899;
+}
+`;
+
+function useStudioTheme() {
+  useEffect(() => {
+    const id = 'studio-workspace-theme';
+    if (document.getElementById(id)) return;
+    const style = document.createElement('style');
+    style.id = id;
+    style.textContent = STUDIO_SCOPED_CSS;
+    document.head.appendChild(style);
+    return () => {
+      document.getElementById(id)?.remove();
+    };
+  }, []);
+}
 import { AlertTriangle, Database } from 'lucide-react';
 import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
 import { AnimatePresence } from 'framer-motion';
@@ -128,6 +145,9 @@ export function StudioWorkspace({
     features,
   });
 
+  // === Inject scoped dark theme CSS ===
+  useStudioTheme();
+
   // === Connection change effect ===
   useEffect(() => {
     if (conn.activeConnection) {
@@ -244,8 +264,8 @@ export function StudioWorkspace({
 
   return (
     <div
+      data-studio-workspace=""
       className={cn('dark flex h-full w-full bg-[#050505] text-zinc-100 overflow-hidden font-sans select-none', className)}
-      style={STUDIO_THEME_VARS}
     >
       <ResizablePanelGroup id="workspace-main" direction="horizontal" className="h-full">
         <ResizablePanel defaultSize={22} minSize={15} maxSize={35} className="hidden md:block">

From fc119df93405c5c6d86d12fe348dda70f14600a7 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 18:27:14 +0300
Subject: [PATCH 20/39] feat: switch to Geist font and apply scoped font system
 in embedded workspace mode

---
 src/app/layout.tsx                |  7 +++---
 src/workspace/StudioWorkspace.tsx | 37 +++++++++++++++++++++++--------
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b499b2c..6091aae 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,9 +1,10 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { Toaster } from "@/components/ui/sonner";
 
-const inter = Inter({ subsets: ["latin"] });
+const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
+const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "LibreDB Studio | Universal Database Editor",
@@ -25,7 +26,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${inter.className} antialiased dark`}>
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased dark font-sans`}>
         {children}
         <Toaster position="bottom-right" theme="dark" />
       </body>
diff --git a/src/workspace/StudioWorkspace.tsx b/src/workspace/StudioWorkspace.tsx
index f025db3..bad3320 100644
--- a/src/workspace/StudioWorkspace.tsx
+++ b/src/workspace/StudioWorkspace.tsx
@@ -38,31 +38,50 @@ import { cn } from '@/lib/utils';
  */
 const STUDIO_SCOPED_CSS = `
 [data-studio-workspace] {
+  /* Dark theme — monochrome (black/white/gray) */
   --background: #09090b;
   --foreground: #fafafa;
-  --card: #0a0a0a;
+  --card: #09090b;
   --card-foreground: #fafafa;
-  --popover: #0a0a0a;
+  --popover: #09090b;
   --popover-foreground: #fafafa;
   --primary: #fafafa;
-  --primary-foreground: #171717;
+  --primary-foreground: #09090b;
   --secondary: #27272a;
   --secondary-foreground: #fafafa;
   --muted: #27272a;
   --muted-foreground: #a1a1aa;
   --accent: #27272a;
   --accent-foreground: #fafafa;
-  --destructive: #7f1d1d;
+  --destructive: #dc2626;
   --destructive-foreground: #fafafa;
   --border: #27272a;
   --input: #27272a;
   --ring: #d4d4d8;
   --radius: 0.5rem;
-  --chart-1: #3b82f6;
-  --chart-2: #22c55e;
-  --chart-3: #f59e0b;
-  --chart-4: #a855f7;
-  --chart-5: #ec4899;
+  --chart-1: #e4e4e7;
+  --chart-2: #a1a1aa;
+  --chart-3: #71717a;
+  --chart-4: #52525b;
+  --chart-5: #3f3f46;
+
+  /* Font — Geist (inherited from host or fallback to system) */
+  font-family: var(--font-geist-sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "rlig" 1, "calt" 1;
+  letter-spacing: -0.011em;
+}
+[data-studio-workspace] *,
+[data-studio-workspace] *::before,
+[data-studio-workspace] *::after {
+  font-family: inherit;
+}
+[data-studio-workspace] code,
+[data-studio-workspace] pre,
+[data-studio-workspace] kbd,
+[data-studio-workspace] .font-mono {
+  font-family: var(--font-geist-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
 }
 `;
 

From cdd9d24ecaafb6179036ba0e5a2d8b9092a7242c Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 19:30:49 +0300
Subject: [PATCH 21/39] fix: replace text-[12px] arbitrary values with text-xs
 for Tailwind v4 compatibility in embedded mode

---
 src/components/ResultsGrid.tsx           | 12 ++++++------
 src/components/results-grid/StatsBar.tsx | 16 ++++++++--------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/ResultsGrid.tsx b/src/components/ResultsGrid.tsx
index 2d4a0bd..141d2bc 100644
--- a/src/components/ResultsGrid.tsx
+++ b/src/components/ResultsGrid.tsx
@@ -237,11 +237,11 @@ export function ResultsGrid({
                     setColumnFilters(next);
                   }}
                   onKeyDown={e => { if (e.key === 'Escape' || e.key === 'Enter') setActiveFilterCol(null); }}
-                  className="w-full bg-[#050505] border border-white/10 rounded px-2 py-1 text-[11px] text-zinc-200 outline-none focus:border-blue-500/30"
+                  className="w-full bg-[#050505] border border-white/10 rounded px-2 py-1 text-[13px] text-zinc-200 outline-none focus:border-blue-500/30"
                 />
                 {hasFilter && (
                   <button
-                    className="mt-1 text-[10px] text-red-400 hover:text-red-300"
+                    className="mt-1 text-xs text-red-400 hover:text-red-300"
                     onClick={() => {
                       const next = new Map(columnFilters);
                       next.delete(field);
@@ -488,7 +488,7 @@ export function ResultsGrid({
                 <div
                   key={field}
                   className={cn(
-                    "h-10 px-4 flex items-center gap-1 border-r border-b border-white/5 text-[10px] uppercase font-mono tracking-wider text-zinc-500 bg-[#0d0d0d] whitespace-nowrap",
+                    "h-10 px-4 flex items-center gap-1 border-r border-b border-white/5 text-xs uppercase font-mono tracking-wider text-zinc-500 bg-[#0d0d0d] whitespace-nowrap",
                     idx === 0 && "sticky left-0 z-30 bg-[#0d0d0d] shadow-[2px_0_8px_rgba(0,0,0,0.3)]",
                     "min-w-[120px]"
                   )}
@@ -537,7 +537,7 @@ export function ResultsGrid({
                       <div
                         key={field}
                         className={cn(
-                          "h-full px-4 py-3 border-r border-white/5 text-[12px] font-mono whitespace-nowrap overflow-hidden flex items-center",
+                          "h-full px-4 py-3 border-r border-white/5 text-xs font-mono whitespace-nowrap overflow-hidden flex items-center",
                           idx === 0 && "sticky left-0 z-10 bg-[#080808] shadow-[2px_0_8px_rgba(0,0,0,0.3)]",
                           "min-w-[120px]"
                         )}
@@ -566,7 +566,7 @@ export function ResultsGrid({
                 <div
                   key={header.id}
                   style={{ width: header.getSize(), minWidth: header.getSize() }}
-                  className="h-10 px-4 flex items-center border-r border-b border-white/5 text-[10px] uppercase font-mono tracking-wider text-zinc-500 bg-[#0d0d0d] relative group shrink-0"
+                  className="h-10 px-4 flex items-center border-r border-b border-white/5 text-xs uppercase font-mono tracking-wider text-zinc-500 bg-[#0d0d0d] relative group shrink-0"
                 >
                   {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
 
@@ -605,7 +605,7 @@ export function ResultsGrid({
                     <div
                       key={cell.id}
                       style={{ width: cell.column.getSize(), minWidth: cell.column.getSize() }}
-                      className="h-full px-4 py-2 border-r border-white/5 text-[12px] font-mono whitespace-nowrap overflow-hidden group-hover:border-white/10 flex items-center shrink-0"
+                      className="h-full px-4 py-2 border-r border-white/5 text-xs font-mono whitespace-nowrap overflow-hidden group-hover:border-white/10 flex items-center shrink-0"
                     >
                       {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </div>
diff --git a/src/components/results-grid/StatsBar.tsx b/src/components/results-grid/StatsBar.tsx
index 74f2d9e..d21c208 100644
--- a/src/components/results-grid/StatsBar.tsx
+++ b/src/components/results-grid/StatsBar.tsx
@@ -57,7 +57,7 @@ export function StatsBar({
   onDiscardChanges,
 }: StatsBarProps) {
   return (
-    <div className="flex items-center justify-between px-4 py-2 border-b border-white/5 bg-[#0a0a0a] text-[11px] text-zinc-500 font-mono">
+    <div className="flex items-center justify-between px-4 py-2 border-b border-white/5 bg-[#0a0a0a] text-xs text-zinc-500 font-mono">
       <div className="flex items-center gap-4">
         <span className="flex items-center gap-1.5">
           <span className="w-1.5 h-1.5 rounded-full bg-emerald-500/50" />
@@ -69,7 +69,7 @@ export function StatsBar({
         <span className="hidden sm:inline">{result.fields.length} columns</span>
         {activeFilterCount > 0 && (
           <button
-            className="flex items-center gap-1 text-blue-400 text-[10px] bg-blue-500/10 px-2 py-0.5 rounded hover:bg-blue-500/20 transition-colors"
+            className="flex items-center gap-1 text-blue-400 text-xs bg-blue-500/10 px-2 py-0.5 rounded hover:bg-blue-500/20 transition-colors"
             onClick={onClearFilters}
             title="Clear all filters"
           >
@@ -79,7 +79,7 @@ export function StatsBar({
           </button>
         )}
         {result.pagination?.wasLimited && (
-          <span className="text-blue-400 text-[10px] bg-blue-500/10 px-2 py-0.5 rounded">
+          <span className="text-blue-400 text-xs bg-blue-500/10 px-2 py-0.5 rounded">
             AUTO-LIMITED
           </span>
         )}
@@ -93,7 +93,7 @@ export function StatsBar({
               variant="ghost"
               size="sm"
               className={cn(
-                "h-6 px-2 text-[10px] font-bold gap-1",
+                "h-6 px-2 text-xs font-bold gap-1",
                 effectiveMaskingEnabled ? "text-purple-400 bg-purple-500/10" : "text-zinc-500"
               )}
               onClick={onToggleMasking}
@@ -103,7 +103,7 @@ export function StatsBar({
               {effectiveMaskingEnabled ? 'MASKED' : 'MASK'}
             </Button>
           ) : effectiveMaskingEnabled ? (
-            <span className="h-6 px-2 text-[10px] font-bold text-purple-400 bg-purple-500/10 rounded flex items-center gap-1">
+            <span className="h-6 px-2 text-xs font-bold text-purple-400 bg-purple-500/10 rounded flex items-center gap-1">
               <Lock className="w-3 h-3" />
               MASKED
             </span>
@@ -113,13 +113,13 @@ export function StatsBar({
         {/* Pending Changes Indicator */}
         {editingEnabled && pendingChanges && pendingChanges.length > 0 && (
           <div className="flex items-center gap-1">
-            <span className="text-[10px] text-amber-400 bg-amber-500/10 px-1.5 py-0.5 rounded">
+            <span className="text-xs text-amber-400 bg-amber-500/10 px-1.5 py-0.5 rounded">
               {pendingChanges.length} change{pendingChanges.length > 1 ? 's' : ''}
             </span>
             <Button
               variant="ghost"
               size="sm"
-              className="h-6 px-1.5 text-[10px] text-emerald-400 hover:bg-emerald-500/10"
+              className="h-6 px-1.5 text-xs text-emerald-400 hover:bg-emerald-500/10"
               onClick={onApplyChanges}
             >
               <Save className="w-3 h-3" />
@@ -127,7 +127,7 @@ export function StatsBar({
             <Button
               variant="ghost"
               size="sm"
-              className="h-6 px-1.5 text-[10px] text-red-400 hover:bg-red-500/10"
+              className="h-6 px-1.5 text-xs text-red-400 hover:bg-red-500/10"
               onClick={onDiscardChanges}
             >
               <X className="w-3 h-3" />

From 5b5ad9564b4ba2afe1bfb99bd2959a9269121526 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 19:38:21 +0300
Subject: [PATCH 22/39] refactor: replace hardcoded text-[Npx] with semantic
 font scale tokens

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/AIAutopilotPanel.tsx           |  8 +--
 src/components/CodeGenerator.tsx              |  6 +-
 src/components/CommandPalette.tsx             |  8 +--
 src/components/ConnectionModal.tsx            | 66 +++++++++---------
 src/components/CreateTableModal.tsx           | 20 +++---
 src/components/DataCharts.tsx                 | 20 +++---
 src/components/DataImportModal.tsx            | 20 +++---
 src/components/DataProfiler.tsx               | 20 +++---
 src/components/DatabaseDocs.tsx               | 18 ++---
 src/components/MaskingSettings.tsx            | 10 +--
 src/components/MobileNav.tsx                  |  2 +-
 src/components/NL2SQLPanel.tsx                | 14 ++--
 src/components/PivotTable.tsx                 | 22 +++---
 src/components/QueryEditor.tsx                | 32 ++++-----
 src/components/QueryHistory.tsx               | 24 +++----
 src/components/QuerySafetyDialog.tsx          |  4 +-
 src/components/ResultsGrid.tsx                |  2 +-
 src/components/SaveQueryModal.tsx             |  2 +-
 src/components/SavedQueries.tsx               | 10 +--
 src/components/SchemaDiagram.tsx              | 18 ++---
 src/components/SchemaDiff.tsx                 | 40 +++++------
 src/components/SnapshotTimeline.tsx           | 10 +--
 src/components/Studio.tsx                     |  8 +--
 src/components/TestDataGenerator.tsx          | 16 ++---
 src/components/VisualExplain.tsx              | 68 +++++++++----------
 src/components/admin/tabs/AuditTab.tsx        | 42 ++++++------
 src/components/admin/tabs/OperationsTab.tsx   | 62 ++++++++---------
 src/components/admin/tabs/OverviewTab.tsx     | 46 ++++++-------
 src/components/admin/tabs/SecurityTab.tsx     | 14 ++--
 src/components/community-section.tsx          |  2 +-
 .../monitoring/tabs/OverviewTab.tsx           | 10 +--
 .../monitoring/tabs/PerformanceTab.tsx        | 32 ++++-----
 src/components/monitoring/tabs/PoolTab.tsx    |  8 +--
 src/components/monitoring/tabs/QueriesTab.tsx | 14 ++--
 .../monitoring/tabs/SessionsTab.tsx           | 20 +++---
 src/components/monitoring/tabs/StorageTab.tsx | 20 +++---
 src/components/monitoring/tabs/TablesTab.tsx  | 20 +++---
 src/components/results-grid/ResultCard.tsx    |  4 +-
 .../results-grid/RowDetailSheet.tsx           |  2 +-
 src/components/schema-explorer/ColumnList.tsx |  8 +--
 .../schema-explorer/SchemaExplorer.tsx        | 10 +--
 src/components/schema-explorer/TableItem.tsx  |  4 +-
 src/components/sidebar/ConnectionItem.tsx     |  4 +-
 src/components/sidebar/ConnectionsList.tsx    |  6 +-
 src/components/sidebar/Sidebar.tsx            |  4 +-
 src/components/studio/BottomPanel.tsx         | 14 ++--
 src/components/studio/QueryToolbar.tsx        | 24 +++----
 src/components/studio/StudioDesktopHeader.tsx |  8 +--
 src/components/studio/StudioMobileHeader.tsx  | 18 ++---
 49 files changed, 432 insertions(+), 432 deletions(-)

diff --git a/src/components/AIAutopilotPanel.tsx b/src/components/AIAutopilotPanel.tsx
index 381f189..069ae26 100644
--- a/src/components/AIAutopilotPanel.tsx
+++ b/src/components/AIAutopilotPanel.tsx
@@ -121,7 +121,7 @@ export function AIAutopilotPanel({ connection, schemaContext, onExecuteQuery }:
           const sql = codeContent.trim();
           elements.push(
             <div key={`code-${i}`} className="relative group my-2">
-              <pre className="bg-[#050505] rounded-lg p-3 text-[11px] font-mono text-blue-300 overflow-x-auto whitespace-pre-wrap border border-white/5">
+              <pre className="bg-[#050505] rounded-lg p-3 text-body font-mono text-blue-300 overflow-x-auto whitespace-pre-wrap border border-white/5">
                 {sql}
               </pre>
               <div className="absolute top-1.5 right-1.5 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -187,7 +187,7 @@ export function AIAutopilotPanel({ connection, schemaContext, onExecuteQuery }:
           <div className="p-1 rounded bg-cyan-500/10">
             <Sparkles className="w-3.5 h-3.5 text-cyan-400" />
           </div>
-          <span className="text-[10px] font-bold text-cyan-400 uppercase tracking-widest">
+          <span className="text-xs font-bold text-cyan-400 uppercase tracking-widest">
             AI Performance Autopilot
           </span>
         </div>
@@ -195,7 +195,7 @@ export function AIAutopilotPanel({ connection, schemaContext, onExecuteQuery }:
           onClick={runAutopilot}
           disabled={isLoading || !connection}
           className={cn(
-            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[10px] font-bold transition-colors",
+            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold transition-colors",
             isLoading
               ? "bg-cyan-600/20 text-cyan-400 cursor-wait"
               : "bg-cyan-600 hover:bg-cyan-500 text-white"
@@ -215,7 +215,7 @@ export function AIAutopilotPanel({ connection, schemaContext, onExecuteQuery }:
           <div className="flex flex-col items-center justify-center h-full opacity-40">
             <Sparkles className="w-8 h-8 mb-3" />
             <p className="text-sm font-medium">AI Performance Autopilot</p>
-            <p className="text-[10px] text-zinc-500 mt-1">
+            <p className="text-xs text-zinc-500 mt-1">
               Click &quot;Run Analysis&quot; to get AI-powered optimization recommendations
             </p>
           </div>
diff --git a/src/components/CodeGenerator.tsx b/src/components/CodeGenerator.tsx
index 5d5f4a7..ec0bcae 100644
--- a/src/components/CodeGenerator.tsx
+++ b/src/components/CodeGenerator.tsx
@@ -208,7 +208,7 @@ export function CodeGenerator({
             <span className="text-sm font-bold text-zinc-200">Code Generator</span>
             <span className="text-xs text-zinc-500 font-mono">{tableName}</span>
             {databaseType && (
-              <span className="text-[10px] text-zinc-600 font-mono uppercase">{databaseType}</span>
+              <span className="text-xs text-zinc-600 font-mono uppercase">{databaseType}</span>
             )}
           </div>
           <button onClick={onClose} className="p-1 rounded hover:bg-white/5 text-zinc-500">
@@ -247,7 +247,7 @@ export function CodeGenerator({
 
         {/* Code Preview */}
         <div className="relative">
-          <pre className="p-5 text-[11px] font-mono text-zinc-300 overflow-auto max-h-[50vh] bg-[#050505] leading-relaxed whitespace-pre">
+          <pre className="p-5 text-body font-mono text-zinc-300 overflow-auto max-h-[50vh] bg-[#050505] leading-relaxed whitespace-pre">
             {code}
           </pre>
           <button
@@ -261,7 +261,7 @@ export function CodeGenerator({
 
         {/* Footer */}
         <div className="px-5 py-3 border-t border-white/5 bg-[#0a0a0a]">
-          <p className="text-[10px] text-zinc-600">
+          <p className="text-xs text-zinc-600">
             Generated from <span className="text-zinc-500">{tableName}</span> • {tableSchema?.columns?.length || 0} columns • {currentLang.ext} format
           </p>
         </div>
diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx
index b1cece9..2d9b376 100644
--- a/src/components/CommandPalette.tsx
+++ b/src/components/CommandPalette.tsx
@@ -161,7 +161,7 @@ export function CommandPalette({
                   <Icon className="w-4 h-4" />
                   <span>{conn.name}</span>
                   {activeConnection?.id === conn.id && (
-                    <span className="ml-auto text-[10px] text-emerald-500 font-medium">Active</span>
+                    <span className="ml-auto text-xs text-emerald-500 font-medium">Active</span>
                   )}
                 </CommandItem>
               );
@@ -179,7 +179,7 @@ export function CommandPalette({
               >
                 <Table2 className="w-4 h-4 text-zinc-500" />
                 <span>{table.name}</span>
-                <span className="ml-auto text-[10px] text-zinc-600">
+                <span className="ml-auto text-xs text-zinc-600">
                   {table.columns.length} cols
                   {table.rowCount !== undefined && ` / ${table.rowCount} rows`}
                 </span>
@@ -198,7 +198,7 @@ export function CommandPalette({
               >
                 <Bookmark className="w-4 h-4 text-purple-400" />
                 <span>{sq.name}</span>
-                <span className="ml-auto text-[10px] text-zinc-600 truncate max-w-[150px]">
+                <span className="ml-auto text-xs text-zinc-600 truncate max-w-[150px]">
                   {sq.query.substring(0, 40)}...
                 </span>
               </CommandItem>
@@ -216,7 +216,7 @@ export function CommandPalette({
               >
                 <Clock className="w-4 h-4 text-zinc-500" />
                 <span className="truncate max-w-[350px] text-zinc-400">{item.query.substring(0, 60)}</span>
-                <span className="ml-auto text-[10px] text-zinc-600">{item.executionTime}ms</span>
+                <span className="ml-auto text-xs text-zinc-600">{item.executionTime}ms</span>
               </CommandItem>
             ))}
           </CommandGroup>
diff --git a/src/components/ConnectionModal.tsx b/src/components/ConnectionModal.tsx
index 2903ca3..b0dec74 100644
--- a/src/components/ConnectionModal.tsx
+++ b/src/components/ConnectionModal.tsx
@@ -105,7 +105,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
             {!isEditMode && (
               <button
                 onClick={() => setShowPasteInput(!showPasteInput)}
-                className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-blue-400 hover:text-blue-300 transition-colors px-2 py-1 rounded-md hover:bg-blue-500/10"
+                className="flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider text-blue-400 hover:text-blue-300 transition-colors px-2 py-1 rounded-md hover:bg-blue-500/10"
               >
                 <ClipboardPaste className="w-3 h-3" />
                 Paste URL
@@ -124,7 +124,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
               className="mb-6 overflow-hidden"
             >
               <div className="p-3 rounded-lg border border-blue-500/20 bg-blue-500/5 space-y-2">
-                <Label className="text-[10px] font-bold uppercase tracking-wider text-blue-400">
+                <Label className="text-xs font-bold uppercase tracking-wider text-blue-400">
                   Paste Connection URL
                 </Label>
                 <div className="flex gap-2">
@@ -143,7 +143,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                     Parse
                   </Button>
                 </div>
-                <p className="text-[10px] text-zinc-500">
+                <p className="text-xs text-zinc-500">
                   Supports: postgres://, mysql://, mongodb://, redis://, oracle://, mssql://
                 </p>
               </div>
@@ -156,7 +156,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
           <div className="space-y-2">
             <div className="flex items-center gap-2 mb-1">
               <Database className="w-3 h-3 text-zinc-500" />
-              <Label htmlFor="name" className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Connection Name</Label>
+              <Label htmlFor="name" className="text-xs font-bold uppercase tracking-wider text-zinc-500">Connection Name</Label>
             </div>
             <Input
               id="name"
@@ -169,14 +169,14 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
 
           {/* Environment Selector */}
           <div className="space-y-2">
-            <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Environment</Label>
+            <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Environment</Label>
             <div className="flex flex-wrap items-center gap-2">
               {(Object.keys(ENVIRONMENT_COLORS) as ConnectionEnvironment[]).map((env) => (
                 <button
                   key={env}
                   onClick={() => setEnvironment(env)}
                   className={cn(
-                    "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-[10px] font-bold uppercase tracking-wider transition-all border",
+                    "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-bold uppercase tracking-wider transition-all border",
                     environment === env
                       ? "border-white/20 bg-white/5 text-zinc-200"
                       : "border-transparent text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
@@ -257,7 +257,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                       <div className="space-y-2">
                         <div className="flex items-center gap-2 mb-1">
                           <Link className="w-3 h-3 text-zinc-500" />
-                          <Label htmlFor="connectionString" className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Connection URI</Label>
+                          <Label htmlFor="connectionString" className="text-xs font-bold uppercase tracking-wider text-zinc-500">Connection URI</Label>
                         </div>
                         <Input
                           id="connectionString"
@@ -270,7 +270,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                       <div className="space-y-2">
                         <div className="flex items-center gap-2 mb-1">
                           <Database className="w-3 h-3 text-zinc-500" />
-                          <Label htmlFor="database" className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Database Name (optional override)</Label>
+                          <Label htmlFor="database" className="text-xs font-bold uppercase tracking-wider text-zinc-500">Database Name (optional override)</Label>
                         </div>
                         <Input
                           id="database"
@@ -286,7 +286,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                       <div className="space-y-2">
                         <div className="flex items-center gap-2 mb-1">
                           <Globe className="w-3 h-3 text-zinc-500" />
-                          <Label htmlFor="host" className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Host & Instance</Label>
+                          <Label htmlFor="host" className="text-xs font-bold uppercase tracking-wider text-zinc-500">Host & Instance</Label>
                         </div>
                         <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
                           <Input
@@ -309,7 +309,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                         <div className="space-y-2">
                           <div className="flex items-center gap-2 mb-1">
                             <Key className="w-3 h-3 text-zinc-500" />
-                            <Label htmlFor="user" className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Username</Label>
+                            <Label htmlFor="user" className="text-xs font-bold uppercase tracking-wider text-zinc-500">Username</Label>
                           </div>
                           <Input
                             id="user"
@@ -322,7 +322,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                         <div className="space-y-2">
                           <div className="flex items-center gap-2 mb-1">
                             <ShieldCheck className="w-3 h-3 text-zinc-500" />
-                            <Label htmlFor="password" className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Password</Label>
+                            <Label htmlFor="password" className="text-xs font-bold uppercase tracking-wider text-zinc-500">Password</Label>
                           </div>
                           <Input
                             id="password"
@@ -338,7 +338,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                       <div className="space-y-2">
                         <div className="flex items-center gap-2 mb-1">
                           <Database className="w-3 h-3 text-zinc-500" />
-                          <Label htmlFor="database" className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Database Name</Label>
+                          <Label htmlFor="database" className="text-xs font-bold uppercase tracking-wider text-zinc-500">Database Name</Label>
                         </div>
                         <Input
                           id="database"
@@ -364,7 +364,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                 <Settings2 className="w-3.5 h-3.5 text-orange-500" />
                 <span>Advanced</span>
                 {(serviceName || instanceName) && (
-                  <span className="ml-1 px-1.5 py-0.5 rounded text-[9px] bg-orange-500/10 text-orange-400 border border-orange-500/20">
+                  <span className="ml-1 px-1.5 py-0.5 rounded text-label bg-orange-500/10 text-orange-400 border border-orange-500/20">
                     SET
                   </span>
                 )}
@@ -381,28 +381,28 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                     <div className="p-3 rounded-lg border border-orange-500/10 bg-orange-500/5 space-y-3">
                       {type === 'oracle' && (
                         <div className="space-y-1.5">
-                          <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Service Name</Label>
+                          <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Service Name</Label>
                           <Input
                             value={serviceName}
                             onChange={(e) => setServiceName(e.target.value)}
                             placeholder="ORCL or XEPDB1"
                             className="h-9 bg-zinc-900/50 border-white/5 focus:border-orange-500/50 text-sm"
                           />
-                          <p className="text-[10px] text-zinc-500">
+                          <p className="text-xs text-zinc-500">
                             If empty, the Database Name field is used as the service name.
                           </p>
                         </div>
                       )}
                       {type === 'mssql' && (
                         <div className="space-y-1.5">
-                          <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Instance Name</Label>
+                          <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Instance Name</Label>
                           <Input
                             value={instanceName}
                             onChange={(e) => setInstanceName(e.target.value)}
                             placeholder="SQLEXPRESS"
                             className="h-9 bg-zinc-900/50 border-white/5 focus:border-orange-500/50 text-sm"
                           />
-                          <p className="text-[10px] text-zinc-500">
+                          <p className="text-xs text-zinc-500">
                             For named instances (e.g. SQLEXPRESS). Leave empty for default instance.
                           </p>
                         </div>
@@ -426,7 +426,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                 <Lock className="w-3.5 h-3.5 text-emerald-500" />
                 <span>SSL / TLS</span>
                 {sslMode !== 'disable' && (
-                  <span className="ml-1 px-1.5 py-0.5 rounded text-[9px] bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
+                  <span className="ml-1 px-1.5 py-0.5 rounded text-label bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                     {sslMode.toUpperCase()}
                   </span>
                 )}
@@ -442,7 +442,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                   >
                     <div className="p-3 rounded-lg border border-emerald-500/10 bg-emerald-500/5 space-y-3">
                       <div className="space-y-2">
-                        <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">SSL Mode</Label>
+                        <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">SSL Mode</Label>
                         <div className="flex flex-wrap gap-1.5">
                           {(['disable', 'require', 'verify-ca', 'verify-full'] as SSLMode[]).map((mode) => (
                             <button
@@ -450,7 +450,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                               type="button"
                               onClick={() => setSSLMode(mode)}
                               className={cn(
-                                "px-2.5 py-1.5 rounded-md text-[10px] font-bold uppercase tracking-wider transition-all border",
+                                "px-2.5 py-1.5 rounded-md text-xs font-bold uppercase tracking-wider transition-all border",
                                 sslMode === mode
                                   ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-400"
                                   : "border-transparent text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
@@ -464,7 +464,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                       {sslMode !== 'disable' && (
                         <div className="space-y-3">
                           <div className="space-y-1.5">
-                            <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">CA Certificate (PEM)</Label>
+                            <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">CA Certificate (PEM)</Label>
                             <textarea
                               value={caCert}
                               onChange={(e) => setCaCert(e.target.value)}
@@ -476,7 +476,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                           {(sslMode === 'verify-ca' || sslMode === 'verify-full') && (
                             <>
                               <div className="space-y-1.5">
-                                <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Client Certificate (PEM)</Label>
+                                <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Client Certificate (PEM)</Label>
                                 <textarea
                                   value={clientCert}
                                   onChange={(e) => setClientCert(e.target.value)}
@@ -486,7 +486,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                                 />
                               </div>
                               <div className="space-y-1.5">
-                                <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Client Private Key (PEM)</Label>
+                                <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Client Private Key (PEM)</Label>
                                 <textarea
                                   value={clientKey}
                                   onChange={(e) => setClientKey(e.target.value)}
@@ -513,7 +513,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                 <Terminal className="w-3.5 h-3.5 text-purple-500" />
                 <span>SSH Tunnel</span>
                 {sshEnabled && (
-                  <span className="ml-1 px-1.5 py-0.5 rounded text-[9px] bg-purple-500/10 text-purple-400 border border-purple-500/20">
+                  <span className="ml-1 px-1.5 py-0.5 rounded text-label bg-purple-500/10 text-purple-400 border border-purple-500/20">
                     ON
                   </span>
                 )}
@@ -541,7 +541,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                         <div className="space-y-3">
                           <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
                             <div className="md:col-span-3 space-y-1.5">
-                              <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">SSH Host</Label>
+                              <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">SSH Host</Label>
                               <Input
                                 value={sshHost}
                                 onChange={(e) => setSSHHost(e.target.value)}
@@ -550,7 +550,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                               />
                             </div>
                             <div className="space-y-1.5">
-                              <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Port</Label>
+                              <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Port</Label>
                               <Input
                                 value={sshPort}
                                 onChange={(e) => setSSHPort(e.target.value)}
@@ -559,7 +559,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                             </div>
                           </div>
                           <div className="space-y-1.5">
-                            <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Username</Label>
+                            <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Username</Label>
                             <Input
                               value={sshUsername}
                               onChange={(e) => setSSHUsername(e.target.value)}
@@ -568,13 +568,13 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                             />
                           </div>
                           <div className="space-y-2">
-                            <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Auth Method</Label>
+                            <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Auth Method</Label>
                             <div className="flex gap-2">
                               <button
                                 type="button"
                                 onClick={() => setSSHAuthMethod('password')}
                                 className={cn(
-                                  "flex-1 px-3 py-1.5 rounded-md text-[10px] font-bold uppercase tracking-wider transition-all border",
+                                  "flex-1 px-3 py-1.5 rounded-md text-xs font-bold uppercase tracking-wider transition-all border",
                                   sshAuthMethod === 'password'
                                     ? "border-purple-500/30 bg-purple-500/10 text-purple-400"
                                     : "border-transparent text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
@@ -586,7 +586,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                                 type="button"
                                 onClick={() => setSSHAuthMethod('privateKey')}
                                 className={cn(
-                                  "flex-1 px-3 py-1.5 rounded-md text-[10px] font-bold uppercase tracking-wider transition-all border",
+                                  "flex-1 px-3 py-1.5 rounded-md text-xs font-bold uppercase tracking-wider transition-all border",
                                   sshAuthMethod === 'privateKey'
                                     ? "border-purple-500/30 bg-purple-500/10 text-purple-400"
                                     : "border-transparent text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
@@ -598,7 +598,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                           </div>
                           {sshAuthMethod === 'password' ? (
                             <div className="space-y-1.5">
-                              <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">SSH Password</Label>
+                              <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">SSH Password</Label>
                               <Input
                                 type="password"
                                 value={sshPassword}
@@ -610,7 +610,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                           ) : (
                             <div className="space-y-3">
                               <div className="space-y-1.5">
-                                <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Private Key (PEM)</Label>
+                                <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Private Key (PEM)</Label>
                                 <textarea
                                   value={sshPrivateKey}
                                   onChange={(e) => setSSHPrivateKey(e.target.value)}
@@ -620,7 +620,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                                 />
                               </div>
                               <div className="space-y-1.5">
-                                <Label className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Passphrase (optional)</Label>
+                                <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Passphrase (optional)</Label>
                                 <Input
                                   type="password"
                                   value={sshPassphrase}
diff --git a/src/components/CreateTableModal.tsx b/src/components/CreateTableModal.tsx
index c3d593f..5d62d21 100644
--- a/src/components/CreateTableModal.tsx
+++ b/src/components/CreateTableModal.tsx
@@ -139,7 +139,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
           <div className="space-y-4">
             <div className="flex items-center gap-2">
               <Settings2 className="w-4 h-4 text-blue-500/50" />
-              <Label className="text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500">General Settings</Label>
+              <Label className="text-xs font-bold uppercase tracking-[0.2em] text-zinc-500">General Settings</Label>
             </div>
             <div className="grid gap-2">
               <Label htmlFor="tableName" className="text-xs font-medium text-zinc-400">Table Name</Label>
@@ -158,13 +158,13 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <Type className="w-4 h-4 text-emerald-500/50" />
-                <Label className="text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500">Column Definitions</Label>
+                <Label className="text-xs font-bold uppercase tracking-[0.2em] text-zinc-500">Column Definitions</Label>
               </div>
               <Button 
                 variant="ghost" 
                 size="sm" 
                 onClick={addColumn}
-                className="h-7 text-[10px] uppercase tracking-widest font-bold gap-2 hover:bg-emerald-500/10 hover:text-emerald-400"
+                className="h-7 text-xs uppercase tracking-widest font-bold gap-2 hover:bg-emerald-500/10 hover:text-emerald-400"
               >
                 <Plus className="w-3 h-3" /> Add Column
               </Button>
@@ -177,7 +177,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
                   className="flex items-end gap-3 p-3 rounded-lg bg-zinc-900/30 border border-white/5 group hover:border-white/10 transition-colors"
                 >
                   <div className="flex-1 space-y-2">
-                    <Label className="text-[10px] text-zinc-500 uppercase font-bold">Column Name</Label>
+                    <Label className="text-xs text-zinc-500 uppercase font-bold">Column Name</Label>
                     <Input
                       value={col.name}
                       onChange={(e) => updateColumn(index, { name: e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, '_') })}
@@ -187,7 +187,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
                   </div>
 
                   <div className="w-40 space-y-2">
-                    <Label className="text-[10px] text-zinc-500 uppercase font-bold">Type</Label>
+                    <Label className="text-xs text-zinc-500 uppercase font-bold">Type</Label>
                     <Select 
                       value={col.type} 
                       onValueChange={(val) => updateColumn(index, { type: val })}
@@ -206,7 +206,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
 
                   <div className="flex items-center gap-4 pb-2 px-2">
                     <div className="flex flex-col items-center gap-1.5" title="Primary Key">
-                      <Label className="text-[8px] text-zinc-600 uppercase font-black">PK</Label>
+                      <Label className="text-micro text-zinc-600 uppercase font-black">PK</Label>
                       <Checkbox 
                         checked={col.isPrimary} 
                         onCheckedChange={(checked) => updateColumn(index, { 
@@ -217,7 +217,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
                       />
                     </div>
                     <div className="flex flex-col items-center gap-1.5" title="Nullable">
-                      <Label className="text-[8px] text-zinc-600 uppercase font-black">Null</Label>
+                      <Label className="text-micro text-zinc-600 uppercase font-black">Null</Label>
                       <Checkbox 
                         checked={col.isNullable} 
                         onCheckedChange={(checked) => updateColumn(index, { isNullable: !!checked })}
@@ -225,7 +225,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
                       />
                     </div>
                     <div className="flex flex-col items-center gap-1.5" title="Unique">
-                      <Label className="text-[8px] text-zinc-600 uppercase font-black">Unq</Label>
+                      <Label className="text-micro text-zinc-600 uppercase font-black">Unq</Label>
                       <Checkbox 
                         checked={col.isUnique} 
                         onCheckedChange={(checked) => updateColumn(index, { isUnique: !!checked })}
@@ -252,9 +252,9 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center gap-2">
                  <div className="w-2 h-2 rounded-full bg-blue-500" />
-                 <span className="text-[10px] uppercase font-bold text-zinc-500 tracking-widest">SQL Preview</span>
+                 <span className="text-xs uppercase font-bold text-zinc-500 tracking-widest">SQL Preview</span>
                </div>
-               <span className="text-[9px] text-zinc-700">Auto-generated</span>
+               <span className="text-label text-zinc-700">Auto-generated</span>
              </div>
              <pre className="text-xs text-blue-400/80 whitespace-pre-wrap leading-relaxed">
                {generateSQL() || '-- Name your table to see SQL'}
diff --git a/src/components/DataCharts.tsx b/src/components/DataCharts.tsx
index 4e9d387..79dd357 100644
--- a/src/components/DataCharts.tsx
+++ b/src/components/DataCharts.tsx
@@ -554,7 +554,7 @@ export function DataCharts({ result }: DataChartsProps) {
         {/* X-Axis Selector */}
         {chartType !== 'pie' && (
           <div className="flex items-center gap-2">
-            <span className="text-[10px] text-zinc-600 uppercase tracking-wider">X-Axis</span>
+            <span className="text-xs text-zinc-600 uppercase tracking-wider">X-Axis</span>
             <Select value={xAxis} onValueChange={setXAxis}>
               <SelectTrigger className="h-7 w-[140px] text-xs bg-white/5 border-white/10">
                 <SelectValue placeholder="Select field" />
@@ -575,7 +575,7 @@ export function DataCharts({ result }: DataChartsProps) {
 
         {/* Y-Axis Selector (for pie, this becomes the value field) */}
         <div className="flex items-center gap-2">
-          <span className="text-[10px] text-zinc-600 uppercase tracking-wider">
+          <span className="text-xs text-zinc-600 uppercase tracking-wider">
             {chartType === 'pie' ? 'Value' : 'Y-Axis'}
           </span>
           <DropdownMenu>
@@ -607,7 +607,7 @@ export function DataCharts({ result }: DataChartsProps) {
         {/* Scatter Y-axis */}
         {chartType === 'scatter' && (
           <div className="flex items-center gap-2">
-            <span className="text-[10px] text-zinc-600 uppercase tracking-wider">Y</span>
+            <span className="text-xs text-zinc-600 uppercase tracking-wider">Y</span>
             <Select value={scatterY} onValueChange={setScatterY}>
               <SelectTrigger className="h-7 w-[120px] text-xs bg-white/5 border-white/10">
                 <SelectValue placeholder="Y field" />
@@ -624,7 +624,7 @@ export function DataCharts({ result }: DataChartsProps) {
         {/* Histogram buckets */}
         {chartType === 'histogram' && (
           <div className="flex items-center gap-2">
-            <span className="text-[10px] text-zinc-600 uppercase tracking-wider">Buckets</span>
+            <span className="text-xs text-zinc-600 uppercase tracking-wider">Buckets</span>
             <Select value={String(histogramBuckets)} onValueChange={(v) => setHistogramBuckets(Number(v))}>
               <SelectTrigger className="h-7 w-[70px] text-xs bg-white/5 border-white/10">
                 <SelectValue />
@@ -641,7 +641,7 @@ export function DataCharts({ result }: DataChartsProps) {
         {/* Aggregation */}
         {chartType !== 'scatter' && chartType !== 'histogram' && chartType !== 'pie' && (
           <div className="flex items-center gap-2">
-            <span className="text-[10px] text-zinc-600 uppercase tracking-wider">Agg</span>
+            <span className="text-xs text-zinc-600 uppercase tracking-wider">Agg</span>
             <Select value={aggregation} onValueChange={(v) => setAggregation(v as AggregationType)}>
               <SelectTrigger className="h-7 w-[80px] text-xs bg-white/5 border-white/10">
                 <SelectValue />
@@ -658,7 +658,7 @@ export function DataCharts({ result }: DataChartsProps) {
         {/* Date Grouping */}
         {analysis.dateFields.length > 0 && chartType !== 'scatter' && chartType !== 'histogram' && (
           <div className="flex items-center gap-2">
-            <span className="text-[10px] text-zinc-600 uppercase tracking-wider">Group</span>
+            <span className="text-xs text-zinc-600 uppercase tracking-wider">Group</span>
             <Select value={dateGrouping || 'none'} onValueChange={(v) => setDateGrouping(v === 'none' ? '' : v as DateGrouping)}>
               <SelectTrigger className="h-7 w-[80px] text-xs bg-white/5 border-white/10">
                 <SelectValue />
@@ -693,13 +693,13 @@ export function DataCharts({ result }: DataChartsProps) {
           </div>
         ) : (
           <div className="flex items-center gap-1">
-            <Button variant="ghost" size="sm" className="h-7 text-[10px] text-zinc-500 hover:text-white gap-1" onClick={() => setShowSaveDialog(true)}>
+            <Button variant="ghost" size="sm" className="h-7 text-xs text-zinc-500 hover:text-white gap-1" onClick={() => setShowSaveDialog(true)}>
               <Save className="w-3 h-3" /> Save
             </Button>
             {savedCharts.length > 0 && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="sm" className="h-7 text-[10px] text-zinc-500 hover:text-white gap-1">
+                  <Button variant="ghost" size="sm" className="h-7 text-xs text-zinc-500 hover:text-white gap-1">
                     <FolderOpen className="w-3 h-3" /> Saved ({savedCharts.length})
                   </Button>
                 </DropdownMenuTrigger>
@@ -721,7 +721,7 @@ export function DataCharts({ result }: DataChartsProps) {
         {/* Export Button */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="sm" className="h-7 text-[10px] font-bold uppercase text-zinc-500 hover:text-white gap-1">
+            <Button variant="ghost" size="sm" className="h-7 text-xs font-bold uppercase text-zinc-500 hover:text-white gap-1">
               <Download className="w-3 h-3" /> Export
             </Button>
           </DropdownMenuTrigger>
@@ -949,7 +949,7 @@ export function DataCharts({ result }: DataChartsProps) {
       </div>
 
       {/* Footer Stats */}
-      <div className="px-3 py-2 border-t border-white/5 bg-[#0a0a0a] flex items-center gap-4 text-[10px] text-zinc-600">
+      <div className="px-3 py-2 border-t border-white/5 bg-[#0a0a0a] flex items-center gap-4 text-xs text-zinc-600">
         <span>Rows: <span className="text-zinc-400 font-mono">{result?.rows.length || 0}</span></span>
         <span>Fields: <span className="text-zinc-400 font-mono">{analysis.fields.length}</span></span>
         <span>Numeric: <span className="text-zinc-400 font-mono">{analysis.numericFields.length}</span></span>
diff --git a/src/components/DataImportModal.tsx b/src/components/DataImportModal.tsx
index db94780..48bbe38 100644
--- a/src/components/DataImportModal.tsx
+++ b/src/components/DataImportModal.tsx
@@ -272,11 +272,11 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
           {(['upload', 'preview', 'configure', 'ready'] as ImportStep[]).map((s, idx) => (
             <React.Fragment key={s}>
               <div className={cn(
-                "flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider",
+                "flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider",
                 step === s ? "text-blue-400" : idx < ['upload', 'preview', 'configure', 'ready'].indexOf(step) ? "text-emerald-400" : "text-zinc-600"
               )}>
                 <div className={cn(
-                  "w-5 h-5 rounded-full flex items-center justify-center text-[9px]",
+                  "w-5 h-5 rounded-full flex items-center justify-center text-label",
                   step === s ? "bg-blue-500/20 border border-blue-500/40" :
                   idx < ['upload', 'preview', 'configure', 'ready'].indexOf(step) ? "bg-emerald-500/20 border border-emerald-500/40" :
                   "bg-white/5 border border-white/10"
@@ -314,11 +314,11 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                 <div className="flex items-center justify-center gap-4 mt-4">
                   <div className="flex items-center gap-1.5 text-zinc-500">
                     <FileSpreadsheet className="w-4 h-4" />
-                    <span className="text-[10px]">CSV</span>
+                    <span className="text-xs">CSV</span>
                   </div>
                   <div className="flex items-center gap-1.5 text-zinc-500">
                     <FileJson className="w-4 h-4" />
-                    <span className="text-[10px]">JSON</span>
+                    <span className="text-xs">JSON</span>
                   </div>
                 </div>
               </div>
@@ -353,7 +353,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                   )}
                   <div>
                     <p className="text-sm font-medium">{fileName}</p>
-                    <p className="text-[10px] text-zinc-500">
+                    <p className="text-xs text-zinc-500">
                       {parsedData.totalRows} rows, {parsedData.headers.length} columns
                     </p>
                   </div>
@@ -374,7 +374,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                   <thead>
                     <tr className="bg-[#0d0d0d]">
                       {parsedData.headers.map(h => (
-                        <th key={h} className="px-3 py-2 text-left text-[10px] uppercase tracking-wider text-zinc-500 font-mono border-b border-white/5 whitespace-nowrap">
+                        <th key={h} className="px-3 py-2 text-left text-xs uppercase tracking-wider text-zinc-500 font-mono border-b border-white/5 whitespace-nowrap">
                           {h}
                         </th>
                       ))}
@@ -393,7 +393,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                   </tbody>
                 </table>
                 {parsedData.totalRows > 10 && (
-                  <div className="text-center py-2 text-[10px] text-zinc-600 bg-[#0d0d0d]">
+                  <div className="text-center py-2 text-xs text-zinc-600 bg-[#0d0d0d]">
                     ... and {parsedData.totalRows - 10} more rows
                   </div>
                 )}
@@ -471,7 +471,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
               <div className="space-y-2">
                 <label className="text-xs text-zinc-400 font-medium">Column Mapping</label>
                 <div className="border border-white/5 rounded-lg overflow-hidden">
-                  <div className="bg-[#0d0d0d] grid grid-cols-[1fr,auto,1fr] gap-2 px-3 py-1.5 text-[10px] uppercase tracking-wider text-zinc-500 border-b border-white/5">
+                  <div className="bg-[#0d0d0d] grid grid-cols-[1fr,auto,1fr] gap-2 px-3 py-1.5 text-xs uppercase tracking-wider text-zinc-500 border-b border-white/5">
                     <span>Source Column</span>
                     <span></span>
                     <span>Target Column</span>
@@ -520,12 +520,12 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
               <div className="flex items-center justify-between">
                 <div>
                   <p className="text-sm font-medium">Ready to Import</p>
-                  <p className="text-[10px] text-zinc-500 mt-0.5">
+                  <p className="text-xs text-zinc-500 mt-0.5">
                     {parsedData?.totalRows} rows into {createNewTable ? newTableName || 'imported_data' : targetTable}
                   </p>
                 </div>
                 {databaseType && (
-                  <span className="text-[10px] uppercase tracking-wider text-zinc-500 bg-white/5 px-2 py-1 rounded">
+                  <span className="text-xs uppercase tracking-wider text-zinc-500 bg-white/5 px-2 py-1 rounded">
                     {databaseType}
                   </span>
                 )}
diff --git a/src/components/DataProfiler.tsx b/src/components/DataProfiler.tsx
index 2bcc0f6..599d900 100644
--- a/src/components/DataProfiler.tsx
+++ b/src/components/DataProfiler.tsx
@@ -196,15 +196,15 @@ export function DataProfiler({
               {/* Summary Stats */}
               <div className="grid grid-cols-3 gap-3">
                 <div className="bg-[#0a0a0a] rounded-lg p-3 border border-white/5">
-                  <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider">Total Rows</p>
+                  <p className="text-xs font-bold text-zinc-500 uppercase tracking-wider">Total Rows</p>
                   <p className="text-lg font-bold text-zinc-200 mt-1">{profile.totalRows.toLocaleString()}</p>
                 </div>
                 <div className="bg-[#0a0a0a] rounded-lg p-3 border border-white/5">
-                  <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider">Columns</p>
+                  <p className="text-xs font-bold text-zinc-500 uppercase tracking-wider">Columns</p>
                   <p className="text-lg font-bold text-zinc-200 mt-1">{profile.columns.length}</p>
                 </div>
                 <div className="bg-[#0a0a0a] rounded-lg p-3 border border-white/5">
-                  <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider">Avg Null %</p>
+                  <p className="text-xs font-bold text-zinc-500 uppercase tracking-wider">Avg Null %</p>
                   <p className="text-lg font-bold text-zinc-200 mt-1">
                     {profile.columns.length > 0
                       ? Math.round(profile.columns.reduce((sum, c) => sum + c.nullPercent, 0) / profile.columns.length)
@@ -223,19 +223,19 @@ export function DataProfiler({
                         <Hash className="w-3 h-3 text-blue-400" />
                         <span className="text-xs font-bold text-zinc-200">{col.name}</span>
                         {col.type && (
-                          <span className="text-[10px] text-zinc-500 font-mono">{col.type}</span>
+                          <span className="text-xs text-zinc-500 font-mono">{col.type}</span>
                         )}
                         {sensitiveColumnNames.has(col.name) && (
                           <span title="Sensitive column - values masked"><Lock className="w-3 h-3 text-purple-400" /></span>
                         )}
                       </div>
-                      <span className="text-[10px] text-zinc-500">
+                      <span className="text-xs text-zinc-500">
                         {col.distinctCount.toLocaleString()} distinct
                       </span>
                     </div>
 
                     {col.error ? (
-                      <p className="text-[10px] text-amber-400">{col.error}</p>
+                      <p className="text-xs text-amber-400">{col.error}</p>
                     ) : (
                       <>
                         {/* Null bar */}
@@ -252,7 +252,7 @@ export function DataProfiler({
                             />
                           </div>
                           <span className={cn(
-                            "text-[10px] font-mono w-10 text-right",
+                            "text-xs font-mono w-10 text-right",
                             col.nullPercent > 50 ? "text-red-400" :
                             col.nullPercent > 20 ? "text-amber-400" :
                             "text-emerald-400"
@@ -262,7 +262,7 @@ export function DataProfiler({
                         </div>
 
                         {/* Min/Max */}
-                        <div className="flex gap-4 text-[10px]">
+                        <div className="flex gap-4 text-xs">
                           {col.minValue && (() => {
                             const rule = sensitiveColumnNames.get(col.name);
                             const display = rule
@@ -296,7 +296,7 @@ export function DataProfiler({
                                 ? maskValue(val, rule)
                                 : val.substring(0, 20);
                               return (
-                                <span key={i} className={cn("text-[10px] px-1.5 py-0.5 bg-zinc-800 rounded font-mono", rule ? "text-zinc-500 italic" : "text-zinc-400")}>
+                                <span key={i} className={cn("text-xs px-1.5 py-0.5 bg-zinc-800 rounded font-mono", rule ? "text-zinc-500 italic" : "text-zinc-400")}>
                                   {display}
                                 </span>
                               );
@@ -314,7 +314,7 @@ export function DataProfiler({
                 <div className="bg-cyan-500/5 border border-cyan-500/10 rounded-lg p-4">
                   <div className="flex items-center gap-2 mb-2">
                     <Sparkles className="w-3.5 h-3.5 text-cyan-400" />
-                    <span className="text-[10px] font-bold text-cyan-400 uppercase tracking-wider">
+                    <span className="text-xs font-bold text-cyan-400 uppercase tracking-wider">
                       AI Analysis
                     </span>
                     {isAiLoading && <Loader2 className="w-3 h-3 animate-spin text-cyan-400" />}
diff --git a/src/components/DatabaseDocs.tsx b/src/components/DatabaseDocs.tsx
index d4a31ce..d7eb533 100644
--- a/src/components/DatabaseDocs.tsx
+++ b/src/components/DatabaseDocs.tsx
@@ -137,17 +137,17 @@ export function DatabaseDocs({ schema, schemaContext, databaseType }: DatabaseDo
           <div className="p-1 rounded bg-teal-500/10">
             <FileText className="w-3.5 h-3.5 text-teal-400" />
           </div>
-          <span className="text-[10px] font-bold text-teal-400 uppercase tracking-widest">
+          <span className="text-xs font-bold text-teal-400 uppercase tracking-widest">
             Database Docs
           </span>
-          <span className="text-[9px] text-zinc-500 font-mono">{schema.length} tables</span>
+          <span className="text-label text-zinc-500 font-mono">{schema.length} tables</span>
         </div>
         <div className="flex items-center gap-1.5">
           <button
             onClick={generateAiDocs}
             disabled={isAiLoading}
             className={cn(
-              "flex items-center gap-1 px-2.5 py-1 rounded-lg text-[10px] font-bold transition-colors",
+              "flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-bold transition-colors",
               isAiLoading
                 ? "bg-teal-600/20 text-teal-400 cursor-wait"
                 : "bg-teal-600 hover:bg-teal-500 text-white"
@@ -158,7 +158,7 @@ export function DatabaseDocs({ schema, schemaContext, databaseType }: DatabaseDo
           </button>
           <button
             onClick={exportMarkdown}
-            className="flex items-center gap-1 px-2.5 py-1 rounded-lg bg-white/5 text-zinc-400 text-[10px] font-bold hover:bg-white/10 transition-colors"
+            className="flex items-center gap-1 px-2.5 py-1 rounded-lg bg-white/5 text-zinc-400 text-xs font-bold hover:bg-white/10 transition-colors"
           >
             <Download className="w-3 h-3" /> Export MD
           </button>
@@ -191,7 +191,7 @@ export function DatabaseDocs({ schema, schemaContext, databaseType }: DatabaseDo
           <div className="bg-teal-500/5 border border-teal-500/10 rounded-lg p-4 mb-4">
             <div className="flex items-center gap-2 mb-3">
               <Sparkles className="w-3.5 h-3.5 text-teal-400" />
-              <span className="text-[10px] font-bold text-teal-400 uppercase tracking-wider">
+              <span className="text-xs font-bold text-teal-400 uppercase tracking-wider">
                 AI-Generated Documentation
               </span>
               {isAiLoading && <Loader2 className="w-3 h-3 animate-spin text-teal-400" />}
@@ -212,14 +212,14 @@ export function DatabaseDocs({ schema, schemaContext, databaseType }: DatabaseDo
               <div className="flex items-center gap-2">
                 <span className="text-xs font-bold text-zinc-200">{table.name}</span>
                 {table.rowCount !== undefined && (
-                  <span className="text-[10px] text-zinc-500 font-mono">{table.rowCount.toLocaleString()} rows</span>
+                  <span className="text-xs text-zinc-500 font-mono">{table.rowCount.toLocaleString()} rows</span>
                 )}
               </div>
-              <span className="text-[10px] text-zinc-600">{table.columns?.length || 0} columns</span>
+              <span className="text-xs text-zinc-600">{table.columns?.length || 0} columns</span>
             </div>
             {table.columns && table.columns.length > 0 && (
               <div className="border-t border-white/5">
-                <table className="w-full text-[11px]">
+                <table className="w-full text-body">
                   <thead>
                     <tr className="text-zinc-500">
                       <th className="text-left px-3 py-1 font-normal">Column</th>
@@ -234,7 +234,7 @@ export function DatabaseDocs({ schema, schemaContext, databaseType }: DatabaseDo
                         <td className="px-3 py-1 text-zinc-300 font-mono">{col.name}</td>
                         <td className="px-3 py-1 text-zinc-500 font-mono">{col.type}</td>
                         <td className="px-3 py-1">
-                          {col.isPrimary && <span className="text-amber-400 text-[9px] font-bold">PK</span>}
+                          {col.isPrimary && <span className="text-amber-400 text-label font-bold">PK</span>}
                         </td>
                         <td className="px-3 py-1 text-zinc-600">{col.nullable !== false ? 'Yes' : 'No'}</td>
                       </tr>
diff --git a/src/components/MaskingSettings.tsx b/src/components/MaskingSettings.tsx
index 2c602ff..c5480f8 100644
--- a/src/components/MaskingSettings.tsx
+++ b/src/components/MaskingSettings.tsx
@@ -268,11 +268,11 @@ export function MaskingSettings() {
                         <div className="flex items-center gap-2">
                           <span className="text-sm font-medium text-zinc-200">{pattern.name}</span>
                           {pattern.isBuiltin && (
-                            <Badge variant="secondary" className="text-[9px] h-4 px-1">builtin</Badge>
+                            <Badge variant="secondary" className="text-label h-4 px-1">builtin</Badge>
                           )}
-                          <Badge variant="outline" className="text-[9px] h-4 px-1">{pattern.maskType}</Badge>
+                          <Badge variant="outline" className="text-label h-4 px-1">{pattern.maskType}</Badge>
                         </div>
-                        <p className="text-[10px] text-zinc-500 font-mono truncate mt-0.5">
+                        <p className="text-xs text-zinc-500 font-mono truncate mt-0.5">
                           {pattern.columnPatterns.join(', ')}
                         </p>
                       </div>
@@ -387,13 +387,13 @@ export function MaskingSettings() {
                 onChange={(e) => setEditColumnPatterns(e.target.value)}
                 placeholder={"email\ne_mail\nuser_email"}
               />
-              <p className="text-[10px] text-zinc-500">
+              <p className="text-xs text-zinc-500">
                 Each line is matched against column names (case-insensitive). Supports regex.
               </p>
             </div>
             {/* Preview */}
             <div className="rounded-lg border border-white/5 bg-[#0a0a0a] p-3">
-              <p className="text-[10px] text-zinc-500 mb-1">Preview:</p>
+              <p className="text-xs text-zinc-500 mb-1">Preview:</p>
               <p className="text-sm font-mono text-purple-300">
                 {getPreviewMasked(editMaskType, editMaskType === 'custom' ? editCustomMask : undefined)}
               </p>
diff --git a/src/components/MobileNav.tsx b/src/components/MobileNav.tsx
index 0b0aa8e..35018fe 100644
--- a/src/components/MobileNav.tsx
+++ b/src/components/MobileNav.tsx
@@ -38,7 +38,7 @@ export function MobileNav({ activeTab, onTabChange }: MobileNavProps) {
             )}>
               <Icon className="w-5 h-5" />
             </div>
-            <span className="text-[10px] font-medium uppercase tracking-wider">{tab.label}</span>
+            <span className="text-xs font-medium uppercase tracking-wider">{tab.label}</span>
             {isActive && (
               <div className="absolute -top-1 w-1 h-1 bg-blue-400 rounded-full" />
             )}
diff --git a/src/components/NL2SQLPanel.tsx b/src/components/NL2SQLPanel.tsx
index 7eec8d9..3f7ec2f 100644
--- a/src/components/NL2SQLPanel.tsx
+++ b/src/components/NL2SQLPanel.tsx
@@ -152,11 +152,11 @@ export function NL2SQLPanel({
           <div className="p-1 rounded bg-violet-500/10">
             <MessageSquare className="w-3.5 h-3.5 text-violet-400" />
           </div>
-          <span className="text-[10px] font-bold text-violet-400 uppercase tracking-widest">
+          <span className="text-xs font-bold text-violet-400 uppercase tracking-widest">
             Natural Language Query
           </span>
           {messages.length > 0 && (
-            <span className="text-[9px] text-zinc-500 font-mono">
+            <span className="text-label text-zinc-500 font-mono">
               {messages.filter(m => m.role === 'user').length} questions
             </span>
           )}
@@ -186,7 +186,7 @@ export function NL2SQLPanel({
           <div className="flex flex-col items-center justify-center h-full opacity-40">
             <Sparkles className="w-8 h-8 mb-3" />
             <p className="text-sm font-medium">Ask a question in plain English</p>
-            <p className="text-[10px] text-zinc-500 mt-1">
+            <p className="text-xs text-zinc-500 mt-1">
               e.g. &quot;Show me the top 10 employees by salary&quot;
             </p>
           </div>
@@ -207,19 +207,19 @@ export function NL2SQLPanel({
                   {/* Show extracted query with action buttons */}
                   {msg.query && (
                     <div className="mb-2">
-                      <pre className="bg-[#050505] rounded p-2 text-[11px] font-mono text-blue-300 overflow-x-auto whitespace-pre-wrap border border-white/5">
+                      <pre className="bg-[#050505] rounded p-2 text-body font-mono text-blue-300 overflow-x-auto whitespace-pre-wrap border border-white/5">
                         {msg.query}
                       </pre>
                       <div className="flex gap-1.5 mt-1.5">
                         <button
                           onClick={() => onExecuteQuery(msg.query!)}
-                          className="flex items-center gap-1 px-2 py-1 rounded bg-blue-600/20 border border-blue-500/20 text-blue-400 text-[10px] font-bold hover:bg-blue-600/30 transition-colors"
+                          className="flex items-center gap-1 px-2 py-1 rounded bg-blue-600/20 border border-blue-500/20 text-blue-400 text-xs font-bold hover:bg-blue-600/30 transition-colors"
                         >
                           <Play className="w-3 h-3 fill-current" /> Run
                         </button>
                         <button
                           onClick={() => onLoadQuery(msg.query!)}
-                          className="flex items-center gap-1 px-2 py-1 rounded bg-white/5 border border-white/5 text-zinc-400 text-[10px] font-bold hover:bg-white/10 transition-colors"
+                          className="flex items-center gap-1 px-2 py-1 rounded bg-white/5 border border-white/5 text-zinc-400 text-xs font-bold hover:bg-white/10 transition-colors"
                         >
                           Load to Editor
                         </button>
@@ -228,7 +228,7 @@ export function NL2SQLPanel({
                   )}
                   {/* Show explanation text (non-code parts) */}
                   {msg.content.replace(/```[\s\S]*?```/g, '').trim() && (
-                    <p className="text-zinc-400 text-[11px] leading-relaxed whitespace-pre-wrap">
+                    <p className="text-zinc-400 text-body leading-relaxed whitespace-pre-wrap">
                       {msg.content.replace(/```[\s\S]*?```/g, '').trim()}
                     </p>
                   )}
diff --git a/src/components/PivotTable.tsx b/src/components/PivotTable.tsx
index 8889e41..202cfbe 100644
--- a/src/components/PivotTable.tsx
+++ b/src/components/PivotTable.tsx
@@ -127,7 +127,7 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
       <div className="h-full flex flex-col items-center justify-center opacity-30">
         <Columns3 className="w-8 h-8 mb-3" />
         <p className="text-sm font-medium">Pivot Table</p>
-        <p className="text-[10px] text-zinc-500 mt-1">Execute a query to create pivot tables</p>
+        <p className="text-xs text-zinc-500 mt-1">Execute a query to create pivot tables</p>
       </div>
     );
   }
@@ -138,11 +138,11 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
       <div className="flex items-center gap-3 px-4 py-2 border-b border-white/5 bg-[#0a0a0a] flex-wrap">
         {/* Row Field */}
         <div className="flex items-center gap-1.5">
-          <span className="text-[10px] text-zinc-500 font-bold uppercase">Rows:</span>
+          <span className="text-xs text-zinc-500 font-bold uppercase">Rows:</span>
           <select
             value={rowField || ''}
             onChange={e => setRowField(e.target.value || null)}
-            className="bg-[#111] border border-white/10 rounded px-2 py-1 text-[11px] text-zinc-300 outline-none"
+            className="bg-[#111] border border-white/10 rounded px-2 py-1 text-body text-zinc-300 outline-none"
           >
             <option value="">Select...</option>
             {fields.map(f => <option key={f} value={f}>{f}</option>)}
@@ -151,11 +151,11 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
 
         {/* Column Field */}
         <div className="flex items-center gap-1.5">
-          <span className="text-[10px] text-zinc-500 font-bold uppercase">Columns:</span>
+          <span className="text-xs text-zinc-500 font-bold uppercase">Columns:</span>
           <select
             value={colField || ''}
             onChange={e => setColField(e.target.value || null)}
-            className="bg-[#111] border border-white/10 rounded px-2 py-1 text-[11px] text-zinc-300 outline-none"
+            className="bg-[#111] border border-white/10 rounded px-2 py-1 text-body text-zinc-300 outline-none"
           >
             <option value="">None</option>
             {fields.filter(f => f !== rowField).map(f => <option key={f} value={f}>{f}</option>)}
@@ -164,11 +164,11 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
 
         {/* Value Field */}
         <div className="flex items-center gap-1.5">
-          <span className="text-[10px] text-zinc-500 font-bold uppercase">Values:</span>
+          <span className="text-xs text-zinc-500 font-bold uppercase">Values:</span>
           <select
             value={valueField || ''}
             onChange={e => setValueField(e.target.value || null)}
-            className="bg-[#111] border border-white/10 rounded px-2 py-1 text-[11px] text-zinc-300 outline-none"
+            className="bg-[#111] border border-white/10 rounded px-2 py-1 text-body text-zinc-300 outline-none"
           >
             <option value="">Count</option>
             {fields.filter(f => f !== rowField && f !== colField).map(f => <option key={f} value={f}>{f}</option>)}
@@ -182,7 +182,7 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
               key={fn}
               onClick={() => setAggFunction(fn)}
               className={cn(
-                "px-1.5 py-0.5 rounded text-[10px] font-bold transition-colors",
+                "px-1.5 py-0.5 rounded text-xs font-bold transition-colors",
                 aggFunction === fn
                   ? "bg-blue-500/20 text-blue-400 border border-blue-500/20"
                   : "text-zinc-600 hover:text-zinc-400"
@@ -200,7 +200,7 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
               const sql = generateSQL();
               if (sql) onLoadQuery(sql);
             }}
-            className="ml-auto flex items-center gap-1 px-2 py-1 rounded text-[10px] font-bold text-zinc-500 hover:text-blue-400 hover:bg-blue-500/10 transition-colors"
+            className="ml-auto flex items-center gap-1 px-2 py-1 rounded text-xs font-bold text-zinc-500 hover:text-blue-400 hover:bg-blue-500/10 transition-colors"
           >
             <ArrowRight className="w-3 h-3" /> Generate SQL
           </button>
@@ -210,7 +210,7 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
       {/* Pivot Result */}
       <div className="flex-1 overflow-auto">
         {pivotData && pivotData.pivotRows.length > 0 ? (
-          <table className="w-full text-[11px] font-mono">
+          <table className="w-full text-body font-mono">
             <thead className="sticky top-0 z-10 bg-[#0d0d0d]">
               <tr>
                 <th className="text-left px-3 py-2 text-zinc-500 border-b border-r border-white/5 font-bold uppercase tracking-wider">
@@ -248,7 +248,7 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
 
       {/* Status */}
       {pivotData && (
-        <div className="px-4 py-1.5 border-t border-white/5 bg-[#0a0a0a] text-[10px] text-zinc-500 font-mono">
+        <div className="px-4 py-1.5 border-t border-white/5 bg-[#0a0a0a] text-xs text-zinc-500 font-mono">
           {pivotData.pivotRows.length} groups • {pivotData.colKeys.length} columns • {AGG_LABELS[aggFunction]} aggregation
         </div>
       )}
diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
index b3f4473..b41f8a4 100644
--- a/src/components/QueryEditor.tsx
+++ b/src/components/QueryEditor.tsx
@@ -489,13 +489,13 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
       {/* Dynamic Pro Toolbar - Hidden on mobile */}
       <div className="hidden md:flex items-center gap-1.5 px-3 py-1.5 bg-[#0a0a0a] border-b border-white/5 overflow-x-auto no-scrollbar scroll-smooth">
         <div className="flex items-center gap-1 mr-2 px-1.5 py-1 rounded bg-white/5 border border-white/5">
-          <span className="text-[9px] font-black text-zinc-500 uppercase tracking-[0.2em]">Quick Actions</span>
+          <span className="text-label font-black text-zinc-500 uppercase tracking-[0.2em]">Quick Actions</span>
         </div>
 
         {hasSelection && (
           <button
             onClick={handleExecute}
-            className="px-2.5 py-1.5 rounded bg-blue-600 hover:bg-blue-500 text-white text-[10px] font-bold transition-all border border-blue-400/30 active:scale-95 flex items-center gap-1.5 shadow-[0_0_15px_rgba(37,99,235,0.3)] animate-in fade-in zoom-in duration-200"
+            className="px-2.5 py-1.5 rounded bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold transition-all border border-blue-400/30 active:scale-95 flex items-center gap-1.5 shadow-[0_0_15px_rgba(37,99,235,0.3)] animate-in fade-in zoom-in duration-200"
           >
             <Play className="w-3 h-3 fill-current" />
             RUN SELECTION
@@ -505,7 +505,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
         <button
           onClick={handleFormat}
           title={language === 'json' ? "Format JSON (Shift+Alt+F)" : "Format SQL (Shift+Alt+F)"}
-          className="px-2.5 py-1.5 rounded bg-[#111] hover:bg-zinc-800 text-zinc-500 hover:text-zinc-200 text-[10px] font-mono transition-all border border-white/5 active:scale-95 flex items-center gap-1.5"
+          className="px-2.5 py-1.5 rounded bg-[#111] hover:bg-zinc-800 text-zinc-500 hover:text-zinc-200 text-xs font-mono transition-all border border-white/5 active:scale-95 flex items-center gap-1.5"
         >
           <AlignLeft className="w-3 h-3" />
           FORMAT
@@ -513,7 +513,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
 
         <button
           onClick={handleCopy}
-          className="px-2.5 py-1.5 rounded bg-[#111] hover:bg-zinc-800 text-zinc-500 hover:text-zinc-200 text-[10px] font-mono transition-all border border-white/5 active:scale-95 flex items-center gap-1.5"
+          className="px-2.5 py-1.5 rounded bg-[#111] hover:bg-zinc-800 text-zinc-500 hover:text-zinc-200 text-xs font-mono transition-all border border-white/5 active:scale-95 flex items-center gap-1.5"
         >
           <Copy className="w-3 h-3" />
           {hasSelection ? 'COPY SELECTION' : 'COPY'}
@@ -521,7 +521,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
 
         <button
           onClick={handleClear}
-          className="px-2.5 py-1.5 rounded bg-[#111] hover:bg-zinc-800 text-zinc-500 hover:text-red-400 text-[10px] font-mono transition-all border border-white/5 active:scale-95 flex items-center gap-1.5"
+          className="px-2.5 py-1.5 rounded bg-[#111] hover:bg-zinc-800 text-zinc-500 hover:text-red-400 text-xs font-mono transition-all border border-white/5 active:scale-95 flex items-center gap-1.5"
         >
           <Trash2 className="w-3 h-3" />
           CLEAR
@@ -533,7 +533,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
           onClick={() => setShowLineNumbers(!showLineNumbers)}
           title={showLineNumbers ? "Hide line numbers" : "Show line numbers"}
           className={cn(
-            "px-2.5 py-1.5 rounded text-[10px] font-mono transition-all border active:scale-95 flex items-center gap-1.5",
+            "px-2.5 py-1.5 rounded text-xs font-mono transition-all border active:scale-95 flex items-center gap-1.5",
             showLineNumbers
               ? "bg-zinc-800 border-white/10 text-zinc-300"
               : "bg-[#111] border-white/5 text-zinc-500 hover:text-zinc-300"
@@ -546,7 +546,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
         <button
           onClick={() => setShowAi(!showAi)}
           className={cn(
-            "px-2.5 py-1.5 rounded text-[10px] font-bold transition-all border active:scale-95 flex items-center gap-1.5",
+            "px-2.5 py-1.5 rounded text-xs font-bold transition-all border active:scale-95 flex items-center gap-1.5",
             showAi
               ? "bg-blue-600 border-blue-500 text-white shadow-[0_0_10px_rgba(37,99,235,0.4)]"
               : "bg-zinc-900 border-white/5 text-zinc-400 hover:text-blue-400 hover:border-blue-500/30"
@@ -562,13 +562,13 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
             {onExplain && capabilities?.supportsExplain && (
               <button
                 onClick={onExplain}
-                className="px-2.5 py-1.5 rounded bg-zinc-900 hover:bg-zinc-800 text-amber-500 hover:text-amber-400 text-[10px] font-bold transition-all border border-amber-500/10 active:scale-95 flex items-center gap-1.5 mr-2"
+                className="px-2.5 py-1.5 rounded bg-zinc-900 hover:bg-zinc-800 text-amber-500 hover:text-amber-400 text-xs font-bold transition-all border border-amber-500/10 active:scale-95 flex items-center gap-1.5 mr-2"
               >
                 <Zap className="w-3 h-3" />
                 EXPLAIN
               </button>
             )}
-            <kbd className="px-2 py-1 rounded bg-zinc-900 border border-white/5 text-[9px] text-zinc-500 font-mono">
+            <kbd className="px-2 py-1 rounded bg-zinc-900 border border-white/5 text-label text-zinc-500 font-mono">
               ⌘ + ENTER TO RUN
             </kbd>
           </div>
@@ -592,20 +592,20 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
                     <div className="p-1 rounded-md bg-blue-500/10">
                       <Sparkles className="w-3.5 h-3.5 text-blue-400" />
                     </div>
-                    <span className="text-[10px] font-black text-blue-400 uppercase tracking-[0.2em]">Expert DBA Mode</span>
+                    <span className="text-xs font-black text-blue-400 uppercase tracking-[0.2em]">Expert DBA Mode</span>
                   </div>
                   <div className="flex items-center gap-2">
                     {aiConversationHistory.length > 0 && (
                       <button
                         type="button"
                         onClick={() => setAiConversationHistory([])}
-                        className="text-[9px] text-zinc-500 hover:text-zinc-300 font-medium px-1.5 py-0.5 rounded bg-white/5 hover:bg-white/10 transition-colors"
+                        className="text-label text-zinc-500 hover:text-zinc-300 font-medium px-1.5 py-0.5 rounded bg-white/5 hover:bg-white/10 transition-colors"
                         title="Clear conversation history"
                       >
                         {aiConversationHistory.length / 2} turns - Clear
                       </button>
                     )}
-                    <span className="text-[9px] text-zinc-500 font-medium">Context: {tables.length} tables</span>
+                    <span className="text-label text-zinc-500 font-medium">Context: {tables.length} tables</span>
                     <div className="w-1 h-1 rounded-full bg-emerald-500 animate-pulse" />
                   </div>
                   </div>
@@ -623,8 +623,8 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
                             <X className="w-3 h-3 text-red-400" />
                           </div>
                           <div className="flex-1">
-                            <p className="text-[11px] font-bold text-red-400 uppercase tracking-tight mb-0.5">AI Error</p>
-                            <p className="text-[12px] text-red-300/90 leading-relaxed">{aiError}</p>
+                            <p className="text-body font-bold text-red-400 uppercase tracking-tight mb-0.5">AI Error</p>
+                            <p className="text-data text-red-300/90 leading-relaxed">{aiError}</p>
                           </div>
                           <button
                             type="button"
@@ -645,7 +645,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
                     value={aiPrompt}
                     onChange={(e) => setAiPrompt(e.target.value)}
                     placeholder="Describe the data you need in plain English... (e.g. 'Show me the revenue growth per month')"
-                    className="bg-transparent border-none outline-none text-[13px] text-zinc-100 w-full h-12 placeholder:text-zinc-600 font-medium"
+                    className="bg-transparent border-none outline-none text-body text-zinc-100 w-full h-12 placeholder:text-zinc-600 font-medium"
                   />
                   <div className="flex items-center gap-1.5">
                     <button
@@ -747,7 +747,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
         <div className="absolute top-3 right-6 pointer-events-none select-none z-10">
           <div className="flex items-center gap-2 px-3 py-1 rounded-md bg-zinc-900/90 border border-white/10 backdrop-blur-md shadow-2xl">
             <div className="w-1.5 h-1.5 rounded-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.5)]" />
-            <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest">
+            <span className="text-xs font-bold text-zinc-400 uppercase tracking-widest">
               {language} Engine
             </span>
           </div>
diff --git a/src/components/QueryHistory.tsx b/src/components/QueryHistory.tsx
index 1cd12ac..85fe048 100644
--- a/src/components/QueryHistory.tsx
+++ b/src/components/QueryHistory.tsx
@@ -128,7 +128,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
               <h3 className="text-sm font-bold text-zinc-100 uppercase tracking-widest flex items-center gap-2">
                 Query History
               </h3>
-              <p className="text-[10px] text-zinc-500 font-medium">
+              <p className="text-xs text-zinc-500 font-medium">
                 Showing {filteredHistory.length} executions
               </p>
             </div>
@@ -137,7 +137,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
           <div className="flex items-center gap-2">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="sm" className="h-8 text-[10px] font-bold uppercase tracking-widest text-zinc-400 hover:text-white gap-2">
+                <Button variant="ghost" size="sm" className="h-8 text-xs font-bold uppercase tracking-widest text-zinc-400 hover:text-white gap-2">
                   <Download className="w-3.5 h-3.5" /> Export
                 </Button>
               </DropdownMenuTrigger>
@@ -155,7 +155,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
               variant="ghost" 
               size="sm" 
               onClick={handleClearHistory} 
-              className="h-8 text-[10px] font-bold uppercase tracking-widest text-red-400/70 hover:text-red-400 hover:bg-red-400/10"
+              className="h-8 text-xs font-bold uppercase tracking-widest text-red-400/70 hover:text-red-400 hover:bg-red-400/10"
             >
               <Trash2 className="w-3.5 h-3.5 mr-2" /> Clear
             </Button>
@@ -185,7 +185,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
             <button
               onClick={() => setIsGlobal(false)}
               className={cn(
-                "px-3 py-1.5 text-[10px] font-bold uppercase rounded-md transition-all",
+                "px-3 py-1.5 text-xs font-bold uppercase rounded-md transition-all",
                 !isGlobal ? "bg-emerald-600 text-white shadow-lg shadow-emerald-600/20" : "text-zinc-500 hover:text-zinc-300"
               )}
             >
@@ -194,7 +194,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
             <button
               onClick={() => setIsGlobal(true)}
               className={cn(
-                "px-3 py-1.5 text-[10px] font-bold uppercase rounded-md transition-all",
+                "px-3 py-1.5 text-xs font-bold uppercase rounded-md transition-all",
                 isGlobal ? "bg-emerald-600 text-white shadow-lg shadow-emerald-600/20" : "text-zinc-500 hover:text-zinc-300"
               )}
             >
@@ -208,7 +208,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
                 key={status}
                 onClick={() => setFilterStatus(status)}
                 className={cn(
-                  "px-3 py-1.5 text-[10px] font-bold uppercase rounded-md transition-all",
+                  "px-3 py-1.5 text-xs font-bold uppercase rounded-md transition-all",
                   filterStatus === status ? "bg-white/10 text-white" : "text-zinc-500 hover:text-zinc-300"
                 )}
               >
@@ -230,7 +230,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
           <div className="min-w-[800px]">
             <table className="w-full text-left border-collapse">
               <thead>
-                <tr className="bg-white/[0.02] border-b border-white/5 text-[10px] font-bold uppercase tracking-wider text-zinc-500">
+                <tr className="bg-white/[0.02] border-b border-white/5 text-xs font-bold uppercase tracking-wider text-zinc-500">
                   <th className="px-4 py-3 w-10 text-center">Status</th>
                   <th className="px-4 py-3 cursor-pointer hover:text-zinc-300 transition-colors group" onClick={() => handleSort('executedAt')}>
                     <div className="flex items-center gap-2">
@@ -279,7 +279,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
                         <span className="text-zinc-200 font-medium">
                           {item.executedAt ? format(new Date(item.executedAt), 'MMM d, HH:mm:ss') : '-'}
                         </span>
-                        <span className="text-[10px] text-zinc-500 font-mono mt-0.5">
+                        <span className="text-xs text-zinc-500 font-mono mt-0.5">
                           {item.executedAt ? format(new Date(item.executedAt), 'yyyy') : ''}
                         </span>
                       </div>
@@ -290,7 +290,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
                           <Database className="w-3 h-3 text-blue-400" />
                           <span className="font-semibold">{item.connectionName || 'Unknown'}</span>
                         </div>
-                        <div className="flex items-center gap-1.5 text-zinc-500 text-[10px]">
+                        <div className="flex items-center gap-1.5 text-zinc-500 text-xs">
                           <Hash className="w-2.5 h-2.5" />
                           <span>{item.tabName || 'Default Tab'}</span>
                         </div>
@@ -298,11 +298,11 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
                     </td>
                     <td className="px-4 py-4 max-w-md">
                       <div className="bg-[#050505] border border-white/5 rounded-md p-2 relative group-hover:border-white/10 transition-colors">
-                        <pre className="text-[11px] font-mono text-zinc-400 line-clamp-2 break-all whitespace-pre-wrap leading-relaxed">
+                        <pre className="text-body font-mono text-zinc-400 line-clamp-2 break-all whitespace-pre-wrap leading-relaxed">
                           {item.query}
                         </pre>
                         {item.errorMessage && (
-                          <div className="mt-2 pt-2 border-t border-red-500/10 text-[10px] text-red-400/80 font-mono italic">
+                          <div className="mt-2 pt-2 border-t border-red-500/10 text-xs text-red-400/80 font-mono italic">
                             {item.errorMessage}
                           </div>
                         )}
@@ -310,7 +310,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
                     </td>
                     <td className="px-4 py-4 whitespace-nowrap">
                       <span className={cn(
-                        "px-2 py-0.5 rounded text-[10px] font-mono font-bold",
+                        "px-2 py-0.5 rounded text-xs font-mono font-bold",
                         item.executionTime > 500 ? "text-amber-400 bg-amber-400/10" : "text-zinc-400 bg-white/5"
                       )}>
                         {item.executionTime}ms
diff --git a/src/components/QuerySafetyDialog.tsx b/src/components/QuerySafetyDialog.tsx
index 86b239c..b336d62 100644
--- a/src/components/QuerySafetyDialog.tsx
+++ b/src/components/QuerySafetyDialog.tsx
@@ -155,7 +155,7 @@ export function QuerySafetyDialog({
 
         {/* Query Preview */}
         <div className="px-5 py-3 bg-[#0a0a0a] border-b border-white/5">
-          <pre className="text-[11px] font-mono text-zinc-400 whitespace-pre-wrap max-h-24 overflow-auto">
+          <pre className="text-body font-mono text-zinc-400 whitespace-pre-wrap max-h-24 overflow-auto">
             {query.length > 300 ? query.substring(0, 300) + '...' : query}
           </pre>
         </div>
@@ -222,7 +222,7 @@ export function QuerySafetyDialog({
               {/* Recommendation */}
               {analysis.recommendation && (
                 <div className="bg-[#0a0a0a] rounded-lg p-3 border border-white/5">
-                  <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider mb-1">Recommendation</p>
+                  <p className="text-xs font-bold text-zinc-500 uppercase tracking-wider mb-1">Recommendation</p>
                   <p className="text-xs text-zinc-300">{analysis.recommendation}</p>
                 </div>
               )}
diff --git a/src/components/ResultsGrid.tsx b/src/components/ResultsGrid.tsx
index 141d2bc..24920da 100644
--- a/src/components/ResultsGrid.tsx
+++ b/src/components/ResultsGrid.tsx
@@ -237,7 +237,7 @@ export function ResultsGrid({
                     setColumnFilters(next);
                   }}
                   onKeyDown={e => { if (e.key === 'Escape' || e.key === 'Enter') setActiveFilterCol(null); }}
-                  className="w-full bg-[#050505] border border-white/10 rounded px-2 py-1 text-[13px] text-zinc-200 outline-none focus:border-blue-500/30"
+                  className="w-full bg-[#050505] border border-white/10 rounded px-2 py-1 text-body text-zinc-200 outline-none focus:border-blue-500/30"
                 />
                 {hasFilter && (
                   <button
diff --git a/src/components/SaveQueryModal.tsx b/src/components/SaveQueryModal.tsx
index 41e45ca..b183952 100644
--- a/src/components/SaveQueryModal.tsx
+++ b/src/components/SaveQueryModal.tsx
@@ -81,7 +81,7 @@ export function SaveQueryModal({ isOpen, onClose, onSave, defaultQuery }: SaveQu
           <div className="mt-2">
             <Label className="text-xs font-bold uppercase tracking-widest text-zinc-500 mb-2 block">Preview</Label>
             <div className="bg-[#050505] p-3 rounded-md border border-white/5 max-h-[100px] overflow-y-auto">
-              <pre className="text-[10px] font-mono text-zinc-500 italic whitespace-pre-wrap break-words">
+              <pre className="text-xs font-mono text-zinc-500 italic whitespace-pre-wrap break-words">
                 {defaultQuery}
               </pre>
             </div>
diff --git a/src/components/SavedQueries.tsx b/src/components/SavedQueries.tsx
index 821d316..d997326 100644
--- a/src/components/SavedQueries.tsx
+++ b/src/components/SavedQueries.tsx
@@ -79,7 +79,7 @@ export function SavedQueries({ onSelectQuery, connectionType, refreshTrigger }:
                       {q.name}
                     </h4>
                     {q.description && (
-                      <p className="text-[10px] text-zinc-500 line-clamp-1">{q.description}</p>
+                      <p className="text-xs text-zinc-500 line-clamp-1">{q.description}</p>
                     )}
                   </div>
                   <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -98,23 +98,23 @@ export function SavedQueries({ onSelectQuery, connectionType, refreshTrigger }:
                 </div>
 
                 <div className="bg-[#050505] border border-white/5 rounded-md p-2 mb-3">
-                  <pre className="text-[10px] font-mono text-zinc-400 line-clamp-3">
+                  <pre className="text-xs font-mono text-zinc-400 line-clamp-3">
                     {q.query}
                   </pre>
                 </div>
 
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
-                    <span className="px-1.5 py-0.5 rounded bg-blue-500/10 border border-blue-500/20 text-[9px] font-bold text-blue-400 uppercase tracking-tighter">
+                    <span className="px-1.5 py-0.5 rounded bg-blue-500/10 border border-blue-500/20 text-label font-bold text-blue-400 uppercase tracking-tighter">
                       {q.connectionType}
                     </span>
                     {q.tags?.map(tag => (
-                      <span key={tag} className="flex items-center gap-1 text-[9px] text-zinc-500">
+                      <span key={tag} className="flex items-center gap-1 text-label text-zinc-500">
                         <Tag className="w-2.5 h-2.5" /> {tag}
                       </span>
                     ))}
                   </div>
-                  <span className="text-[9px] text-zinc-600 flex items-center gap-1 font-mono">
+                  <span className="text-label text-zinc-600 flex items-center gap-1 font-mono">
                     <Calendar className="w-2.5 h-2.5" /> {format(q.updatedAt, 'MMM d, yyyy')}
                   </span>
                 </div>
diff --git a/src/components/SchemaDiagram.tsx b/src/components/SchemaDiagram.tsx
index c12f0ed..d635eb7 100644
--- a/src/components/SchemaDiagram.tsx
+++ b/src/components/SchemaDiagram.tsx
@@ -48,14 +48,14 @@ const TableNode = ({ data }: NodeProps<Node<TableNodeData>>) => {
       <div className="bg-blue-600/10 px-3 py-2 border-b border-white/5 flex items-center gap-2">
         <Database className="w-3.5 h-3.5 text-blue-400" />
         <span className="text-xs font-bold text-zinc-100 uppercase tracking-wider">{table.name}</span>
-        <span className="text-[9px] text-zinc-600 ml-auto">{table.columns?.length || 0} cols</span>
+        <span className="text-label text-zinc-600 ml-auto">{table.columns?.length || 0} cols</span>
       </div>
       {!isCompact && (
         <div className="p-1">
           {table.columns?.map((col: { name: string; type: string; isPrimary: boolean; nullable?: boolean; defaultValue?: string }, idx: number) => {
             const isFk = fkColumns.has(col.name);
             return (
-              <div key={idx} className="flex items-center justify-between px-2 py-1 text-[10px] hover:bg-white/5 rounded transition-colors group relative">
+              <div key={idx} className="flex items-center justify-between px-2 py-1 text-xs hover:bg-white/5 rounded transition-colors group relative">
                 <Handle
                   type="source"
                   position={Position.Right}
@@ -88,13 +88,13 @@ const TableNode = ({ data }: NodeProps<Node<TableNodeData>>) => {
                   </span>
                 </div>
                 <div className="flex items-center gap-1">
-                  {col.nullable === false && <span className="text-[8px] text-red-500/60">NN</span>}
-                  <span className="text-[9px] text-zinc-600 font-mono uppercase">{col.type}</span>
+                  {col.nullable === false && <span className="text-micro text-red-500/60">NN</span>}
+                  <span className="text-label text-zinc-600 font-mono uppercase">{col.type}</span>
                 </div>
 
                 {/* Hover tooltip */}
                 <div className="absolute left-full ml-2 top-0 z-50 hidden group-hover:block">
-                  <div className="bg-[#1a1a1a] border border-white/10 rounded px-2 py-1 text-[9px] whitespace-nowrap shadow-xl">
+                  <div className="bg-[#1a1a1a] border border-white/10 rounded px-2 py-1 text-label whitespace-nowrap shadow-xl">
                     <div className="text-zinc-300">{col.name}: <span className="text-zinc-500">{col.type}</span></div>
                     {col.isPrimary && <div className="text-yellow-500">Primary Key</div>}
                     {isFk && <div className="text-blue-400">Foreign Key</div>}
@@ -425,7 +425,7 @@ function SchemaDiagramInner({ schema, onClose }: SchemaDiagramProps) {
               <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
               ERD Visualizer
             </h3>
-            <div className="flex items-center gap-3 text-[10px] text-zinc-500">
+            <div className="flex items-center gap-3 text-xs text-zinc-500">
               <span>{filteredSchema.length} tables</span>
               <span>{edgeCount} relationships</span>
             </div>
@@ -438,13 +438,13 @@ function SchemaDiagramInner({ schema, onClose }: SchemaDiagramProps) {
                 placeholder="Filter tables..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="w-full pl-7 pr-2 py-1.5 bg-white/5 border border-white/10 rounded text-[10px] text-zinc-300 placeholder-zinc-600 focus:outline-none focus:border-blue-500/50"
+                className="w-full pl-7 pr-2 py-1.5 bg-white/5 border border-white/10 rounded text-xs text-zinc-300 placeholder-zinc-600 focus:outline-none focus:border-blue-500/50"
               />
             </div>
 
             {/* No FK warning */}
             {!hasForeignKeys && (
-              <div className="flex items-start gap-1.5 text-[9px] text-amber-500/80">
+              <div className="flex items-start gap-1.5 text-label text-amber-500/80">
                 <Info className="w-3 h-3 mt-0.5 shrink-0" />
                 <span>No FK data available. Showing heuristic relationships (dashed).</span>
               </div>
@@ -452,7 +452,7 @@ function SchemaDiagramInner({ schema, onClose }: SchemaDiagramProps) {
 
             {/* Selected node info */}
             {selectedNode && (
-              <div className="text-[10px] text-blue-400 border-t border-white/5 pt-2">
+              <div className="text-xs text-blue-400 border-t border-white/5 pt-2">
                 Selected: <span className="font-mono font-bold">{selectedNode}</span>
                 <button onClick={() => setSelectedNode(null)} className="ml-2 text-zinc-600 hover:text-zinc-400">clear</button>
               </div>
diff --git a/src/components/SchemaDiff.tsx b/src/components/SchemaDiff.tsx
index a69859d..93202ba 100644
--- a/src/components/SchemaDiff.tsx
+++ b/src/components/SchemaDiff.tsx
@@ -143,9 +143,9 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
 
   const getActionBadge = (action: string) => {
     switch (action) {
-      case 'added': return <Badge className="bg-green-500/20 text-green-400 border-green-500/30 text-[10px]"><Plus className="w-2.5 h-2.5 mr-0.5" />Added</Badge>;
-      case 'removed': return <Badge className="bg-red-500/20 text-red-400 border-red-500/30 text-[10px]"><Minus className="w-2.5 h-2.5 mr-0.5" />Removed</Badge>;
-      case 'modified': return <Badge className="bg-yellow-500/20 text-yellow-400 border-yellow-500/30 text-[10px]"><Edit3 className="w-2.5 h-2.5 mr-0.5" />Modified</Badge>;
+      case 'added': return <Badge className="bg-green-500/20 text-green-400 border-green-500/30 text-xs"><Plus className="w-2.5 h-2.5 mr-0.5" />Added</Badge>;
+      case 'removed': return <Badge className="bg-red-500/20 text-red-400 border-red-500/30 text-xs"><Minus className="w-2.5 h-2.5 mr-0.5" />Removed</Badge>;
+      case 'modified': return <Badge className="bg-yellow-500/20 text-yellow-400 border-yellow-500/30 text-xs"><Edit3 className="w-2.5 h-2.5 mr-0.5" />Modified</Badge>;
       default: return null;
     }
   };
@@ -160,13 +160,13 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
       {/* Header */}
       <div className="flex items-center gap-2 px-3 py-2 border-b border-white/5 bg-[#0a0a0a] flex-wrap">
         <GitCompare className="w-4 h-4 text-rose-400" />
-        <span className="text-[10px] font-bold uppercase text-zinc-400 tracking-wider">Schema Diff</span>
+        <span className="text-xs font-bold uppercase text-zinc-400 tracking-wider">Schema Diff</span>
 
         <div className="h-4 w-px bg-white/10" />
 
         {/* Source selector */}
         <div className="flex items-center gap-1">
-          <span className="text-[10px] text-zinc-600 uppercase">Source</span>
+          <span className="text-xs text-zinc-600 uppercase">Source</span>
           <Select value={sourceId} onValueChange={setSourceId}>
             <SelectTrigger className="h-7 w-[180px] text-xs bg-white/5 border-white/10">
               <SelectValue placeholder="Select source" />
@@ -192,7 +192,7 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
 
         {/* Target selector */}
         <div className="flex items-center gap-1">
-          <span className="text-[10px] text-zinc-600 uppercase">Target</span>
+          <span className="text-xs text-zinc-600 uppercase">Target</span>
           <Select value={targetId} onValueChange={(v) => {
             if (v.startsWith('conn:')) {
               fetchRemoteSchema(v.replace('conn:', ''));
@@ -218,7 +218,7 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
               ))}
               {allConnections.filter(c => c.id !== connection?.id).length > 0 && (
                 <>
-                  <div className="px-2 py-1 text-[9px] text-zinc-600 uppercase border-t border-white/5 mt-1">
+                  <div className="px-2 py-1 text-label text-zinc-600 uppercase border-t border-white/5 mt-1">
                     Fetch from connection
                   </div>
                   {allConnections.filter(c => c.id !== connection?.id).map(c => (
@@ -235,7 +235,7 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
               )}
             </SelectContent>
           </Select>
-          {fetchingRemote && <span className="text-[10px] text-zinc-500 animate-pulse">Fetching...</span>}
+          {fetchingRemote && <span className="text-xs text-zinc-500 animate-pulse">Fetching...</span>}
         </div>
 
         <div className="flex-1" />
@@ -263,7 +263,7 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
           <Button
             variant="ghost"
             size="sm"
-            className="h-7 text-[10px] font-bold uppercase text-zinc-500 hover:text-white gap-1"
+            className="h-7 text-xs font-bold uppercase text-zinc-500 hover:text-white gap-1"
             onClick={() => setShowLabelInput(true)}
             disabled={!connection}
           >
@@ -275,7 +275,7 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
           <Button
             variant="ghost"
             size="sm"
-            className="h-7 text-[10px] font-bold uppercase text-zinc-500 hover:text-white gap-1"
+            className="h-7 text-xs font-bold uppercase text-zinc-500 hover:text-white gap-1"
             onClick={() => setShowMigration(!showMigration)}
           >
             <FileCode className="w-3 h-3" /> {showMigration ? 'Diff View' : 'SQL Migration'}
@@ -316,7 +316,7 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
             {/* Table List */}
             <div className="w-64 border-r border-white/5 overflow-auto">
               <div className="p-2 border-b border-white/5">
-                <div className="text-[10px] text-zinc-500 uppercase px-2 mb-1">
+                <div className="text-xs text-zinc-500 uppercase px-2 mb-1">
                   {diff.summary.added} added, {diff.summary.removed} removed, {diff.summary.modified} modified
                 </div>
               </div>
@@ -373,7 +373,7 @@ function TableDiffDetail({ diff }: { diff: TableDiff }) {
         <Database className="w-4 h-4 text-zinc-400" />
         <h3 className="text-sm font-bold text-zinc-200">{diff.tableName}</h3>
         <Badge className={cn(
-          "text-[10px]",
+          "text-xs",
           diff.action === 'added' && "bg-green-500/20 text-green-400",
           diff.action === 'removed' && "bg-red-500/20 text-red-400",
           diff.action === 'modified' && "bg-yellow-500/20 text-yellow-400",
@@ -385,7 +385,7 @@ function TableDiffDetail({ diff }: { diff: TableDiff }) {
       {/* Columns */}
       {diff.columns.length > 0 && (
         <div>
-          <h4 className="text-[10px] uppercase text-zinc-500 mb-2 font-bold">Columns</h4>
+          <h4 className="text-xs uppercase text-zinc-500 mb-2 font-bold">Columns</h4>
           <div className="space-y-1">
             {diff.columns.map((col, i) => (
               <div key={i} className={cn(
@@ -398,15 +398,15 @@ function TableDiffDetail({ diff }: { diff: TableDiff }) {
                 {col.action === 'modified' && (
                   <div className="flex flex-col gap-0.5">
                     {col.changes.map((change, j) => (
-                      <span key={j} className="text-[10px] text-zinc-500">{change}</span>
+                      <span key={j} className="text-xs text-zinc-500">{change}</span>
                     ))}
                   </div>
                 )}
                 {col.action === 'added' && (
-                  <span className="text-[10px] text-green-400 font-mono">{col.targetType}</span>
+                  <span className="text-xs text-green-400 font-mono">{col.targetType}</span>
                 )}
                 {col.action === 'removed' && (
-                  <span className="text-[10px] text-red-400 font-mono">{col.sourceType}</span>
+                  <span className="text-xs text-red-400 font-mono">{col.sourceType}</span>
                 )}
                 <span className="ml-auto">{getActionIcon(col.action)}</span>
               </div>
@@ -418,7 +418,7 @@ function TableDiffDetail({ diff }: { diff: TableDiff }) {
       {/* Indexes */}
       {diff.indexes.length > 0 && (
         <div>
-          <h4 className="text-[10px] uppercase text-zinc-500 mb-2 font-bold">Indexes</h4>
+          <h4 className="text-xs uppercase text-zinc-500 mb-2 font-bold">Indexes</h4>
           <div className="space-y-1">
             {diff.indexes.map((idx, i) => (
               <div key={i} className={cn(
@@ -429,7 +429,7 @@ function TableDiffDetail({ diff }: { diff: TableDiff }) {
               )}>
                 <span className="font-mono text-zinc-300">{idx.indexName}</span>
                 {idx.changes.map((change, j) => (
-                  <span key={j} className="text-[10px] text-zinc-500">{change}</span>
+                  <span key={j} className="text-xs text-zinc-500">{change}</span>
                 ))}
                 <span className="ml-auto">{getActionIcon(idx.action)}</span>
               </div>
@@ -441,7 +441,7 @@ function TableDiffDetail({ diff }: { diff: TableDiff }) {
       {/* Foreign Keys */}
       {diff.foreignKeys.length > 0 && (
         <div>
-          <h4 className="text-[10px] uppercase text-zinc-500 mb-2 font-bold">Foreign Keys</h4>
+          <h4 className="text-xs uppercase text-zinc-500 mb-2 font-bold">Foreign Keys</h4>
           <div className="space-y-1">
             {diff.foreignKeys.map((fk, i) => (
               <div key={i} className={cn(
@@ -451,7 +451,7 @@ function TableDiffDetail({ diff }: { diff: TableDiff }) {
               )}>
                 <span className="font-mono text-zinc-300">{fk.columnName}</span>
                 {fk.changes.map((change, j) => (
-                  <span key={j} className="text-[10px] text-zinc-500">{change}</span>
+                  <span key={j} className="text-xs text-zinc-500">{change}</span>
                 ))}
                 <span className="ml-auto">{getActionIcon(fk.action)}</span>
               </div>
diff --git a/src/components/SnapshotTimeline.tsx b/src/components/SnapshotTimeline.tsx
index 7a6393a..2b9501f 100644
--- a/src/components/SnapshotTimeline.tsx
+++ b/src/components/SnapshotTimeline.tsx
@@ -50,9 +50,9 @@ export function SnapshotTimeline({ snapshots, onCompare, onDelete }: SnapshotTim
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between px-2">
-        <span className="text-[10px] uppercase text-zinc-500 font-bold">Timeline</span>
+        <span className="text-xs uppercase text-zinc-500 font-bold">Timeline</span>
         {canCompare && (
-          <span className="text-[10px] text-blue-400">Comparing 2 snapshots</span>
+          <span className="text-xs text-blue-400">Comparing 2 snapshots</span>
         )}
       </div>
 
@@ -89,13 +89,13 @@ export function SnapshotTimeline({ snapshots, onCompare, onDelete }: SnapshotTim
                 "mt-2 text-center transition-colors",
                 isSelected ? "text-blue-400" : "text-zinc-500 group-hover:text-zinc-300"
               )}>
-                <div className="text-[10px] font-medium truncate max-w-[90px]">
+                <div className="text-xs font-medium truncate max-w-[90px]">
                   {snapshot.label || snapshot.connectionName}
                 </div>
-                <div className="text-[9px] text-zinc-600">
+                <div className="text-label text-zinc-600">
                   {date.toLocaleDateString()} {date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                 </div>
-                <Badge variant="secondary" className="text-[9px] mt-1">
+                <Badge variant="secondary" className="text-label mt-1">
                   {snapshot.schema.length} tables
                 </Badge>
               </div>
diff --git a/src/components/Studio.tsx b/src/components/Studio.tsx
index 324ae33..f29180a 100644
--- a/src/components/Studio.tsx
+++ b/src/components/Studio.tsx
@@ -581,22 +581,22 @@ export default function Studio() {
                 <AlertTriangle className="w-5 h-5 text-amber-400" />
               </div>
               <div className="flex-1 min-w-0">
-                <AlertDialogTitle className="text-[15px] font-semibold text-zinc-100 mb-1">
+                <AlertDialogTitle className="text-title font-semibold text-zinc-100 mb-1">
                   Load all results?
                 </AlertDialogTitle>
-                <AlertDialogDescription className="text-[13px] text-zinc-500 leading-relaxed">
+                <AlertDialogDescription className="text-body text-zinc-500 leading-relaxed">
                   This may slow down your browser. Max <span className="text-zinc-400">100K</span> rows will be loaded.
                 </AlertDialogDescription>
               </div>
             </div>
           </div>
           <div className="px-6 pb-6 flex gap-2">
-            <AlertDialogCancel className="flex-1 h-9 bg-white/5 border-0 text-zinc-400 text-[13px] font-medium hover:bg-white/10 hover:text-zinc-200">
+            <AlertDialogCancel className="flex-1 h-9 bg-white/5 border-0 text-zinc-400 text-body font-medium hover:bg-white/10 hover:text-zinc-200">
               Cancel
             </AlertDialogCancel>
             <AlertDialogAction
               onClick={queryExec.handleUnlimitedQuery}
-              className="flex-1 h-9 bg-amber-600 border-0 text-white text-[13px] font-medium hover:bg-amber-500"
+              className="flex-1 h-9 bg-amber-600 border-0 text-white text-body font-medium hover:bg-amber-500"
             >
               Load All
             </AlertDialogAction>
diff --git a/src/components/TestDataGenerator.tsx b/src/components/TestDataGenerator.tsx
index 2d85d11..f5a43cf 100644
--- a/src/components/TestDataGenerator.tsx
+++ b/src/components/TestDataGenerator.tsx
@@ -177,14 +177,14 @@ export function TestDataGenerator({
         {/* Controls */}
         <div className="px-5 py-3 border-b border-white/5 bg-[#0a0a0a] flex items-center gap-4">
           <div className="flex items-center gap-2">
-            <span className="text-[10px] text-zinc-500 uppercase tracking-wider font-bold">Rows:</span>
+            <span className="text-xs text-zinc-500 uppercase tracking-wider font-bold">Rows:</span>
             <div className="flex items-center gap-1">
               {[5, 10, 25, 50, 100].map(n => (
                 <button
                   key={n}
                   onClick={() => setRowCount(n)}
                   className={cn(
-                    "px-2 py-0.5 rounded text-[10px] font-bold transition-colors",
+                    "px-2 py-0.5 rounded text-xs font-bold transition-colors",
                     rowCount === n
                       ? "bg-amber-500/20 text-amber-400 border border-amber-500/20"
                       : "text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
@@ -197,7 +197,7 @@ export function TestDataGenerator({
           </div>
           <button
             onClick={() => setRefreshKey(k => k + 1)}
-            className="flex items-center gap-1 px-2 py-1 rounded text-[10px] font-bold text-zinc-500 hover:text-zinc-300 hover:bg-white/5 transition-colors"
+            className="flex items-center gap-1 px-2 py-1 rounded text-xs font-bold text-zinc-500 hover:text-zinc-300 hover:bg-white/5 transition-colors"
             title="Regenerate random data"
           >
             <RefreshCw className="w-3 h-3" /> Regenerate
@@ -211,7 +211,7 @@ export function TestDataGenerator({
               <span
                 key={col.name}
                 className={cn(
-                  "text-[10px] px-1.5 py-0.5 rounded font-mono",
+                  "text-xs px-1.5 py-0.5 rounded font-mono",
                   col.faker.generator === 'autoIncrement'
                     ? "bg-zinc-800 text-zinc-600 line-through"
                     : "bg-amber-500/10 text-amber-400/80"
@@ -226,20 +226,20 @@ export function TestDataGenerator({
 
         {/* Preview */}
         <div className="flex-1 overflow-auto relative">
-          <pre className="p-5 text-[11px] font-mono text-blue-300 whitespace-pre-wrap leading-relaxed">
+          <pre className="p-5 text-body font-mono text-blue-300 whitespace-pre-wrap leading-relaxed">
             {generatedQuery}
           </pre>
         </div>
 
         {/* Actions */}
         <div className="flex items-center justify-between px-5 py-3 border-t border-white/5 bg-[#0a0a0a]">
-          <p className="text-[10px] text-zinc-600">
+          <p className="text-xs text-zinc-600">
             {columnConfigs.filter(c => c.faker.generator !== 'autoIncrement').length} columns • {rowCount} rows
           </p>
           <div className="flex items-center gap-2">
             <button
               onClick={handleCopy}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/5 text-zinc-400 text-[10px] font-bold hover:bg-white/10 transition-colors"
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/5 text-zinc-400 text-xs font-bold hover:bg-white/10 transition-colors"
             >
               {copied ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
               {copied ? 'Copied!' : 'Copy'}
@@ -249,7 +249,7 @@ export function TestDataGenerator({
                 onExecuteQuery(generatedQuery);
                 onClose();
               }}
-              className="flex items-center gap-1.5 px-4 py-1.5 rounded-lg bg-amber-600 hover:bg-amber-500 text-white text-[10px] font-bold transition-colors"
+              className="flex items-center gap-1.5 px-4 py-1.5 rounded-lg bg-amber-600 hover:bg-amber-500 text-white text-xs font-bold transition-colors"
             >
               <Play className="w-3 h-3 fill-current" /> Execute
             </button>
diff --git a/src/components/VisualExplain.tsx b/src/components/VisualExplain.tsx
index b12b0d4..c655e4a 100644
--- a/src/components/VisualExplain.tsx
+++ b/src/components/VisualExplain.tsx
@@ -275,15 +275,15 @@ const PlanNode = ({ node, depth = 0, maxTime }: { node: ExplainPlanNode; depth?:
         {/* Type & Table */}
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2">
-            <span className="text-[11px] font-medium text-zinc-200 truncate">{nodeType}</span>
+            <span className="text-body font-medium text-zinc-200 truncate">{nodeType}</span>
             {node['Relation Name'] && (
-              <span className="text-[10px] text-zinc-500 font-mono truncate">{node['Relation Name']}</span>
+              <span className="text-xs text-zinc-500 font-mono truncate">{node['Relation Name']}</span>
             )}
           </div>
         </div>
 
         {/* Stats */}
-        <div className="flex items-center gap-4 text-[10px] font-mono">
+        <div className="flex items-center gap-4 text-xs font-mono">
           <span className="text-zinc-500 w-16 text-right">{formatNumber(actualRows)} rows</span>
           <span className={cn(
             "w-16 text-right",
@@ -309,21 +309,21 @@ const PlanNode = ({ node, depth = 0, maxTime }: { node: ExplainPlanNode; depth?:
         <div className="ml-8 pl-4 border-l border-white/5" style={{ marginLeft: depth * 20 + 32 }}>
           {/* Filter info */}
           {node['Filter'] && (
-            <div className="flex items-start gap-2 py-1 text-[10px]">
+            <div className="flex items-start gap-2 py-1 text-xs">
               <span className="text-amber-500/70 font-medium shrink-0">Filter:</span>
               <span className="text-zinc-500 font-mono break-all">{node['Filter']}</span>
             </div>
           )}
           {/* Index info */}
           {node['Index Name'] && (
-            <div className="flex items-center gap-2 py-1 text-[10px]">
+            <div className="flex items-center gap-2 py-1 text-xs">
               <span className="text-emerald-500/70 font-medium">Index:</span>
               <span className="text-emerald-400 font-mono">{node['Index Name']}</span>
             </div>
           )}
           {/* Buffer stats */}
           {((node['Shared Hit Blocks'] ?? 0) > 0 || (node['Shared Read Blocks'] ?? 0) > 0) && (
-            <div className="flex items-center gap-4 py-1 text-[10px] text-zinc-600">
+            <div className="flex items-center gap-4 py-1 text-xs text-zinc-600">
               {(node['Shared Hit Blocks'] ?? 0) > 0 && <span>Cache hits: {node['Shared Hit Blocks']}</span>}
               {(node['Shared Read Blocks'] ?? 0) > 0 && <span>Disk reads: {node['Shared Read Blocks']}</span>}
             </div>
@@ -435,7 +435,7 @@ function AIExplainTab({
           elements.push(
             <div key={`code-${idx}`} className="my-3 relative group/code">
               <pre className={cn(
-                "text-[11px] font-mono p-3 rounded-lg overflow-x-auto border",
+                "text-body font-mono p-3 rounded-lg overflow-x-auto border",
                 isSql ? "bg-blue-500/5 border-blue-500/10 text-blue-300" : "bg-white/[0.02] border-white/5 text-zinc-400"
               )}>
                 {content}
@@ -443,7 +443,7 @@ function AIExplainTab({
               {isSql && onLoadQuery && (
                 <button
                   onClick={() => onLoadQuery(content)}
-                  className="absolute top-2 right-2 opacity-0 group-hover/code:opacity-100 transition-opacity px-2 py-1 rounded bg-blue-600 hover:bg-blue-500 text-white text-[10px] font-bold flex items-center gap-1"
+                  className="absolute top-2 right-2 opacity-0 group-hover/code:opacity-100 transition-opacity px-2 py-1 rounded bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold flex items-center gap-1"
                 >
                   <Play className="w-3 h-3" /> Try This
                 </button>
@@ -469,19 +469,19 @@ function AIExplainTab({
       // Headers
       if (line.startsWith('## ')) {
         elements.push(
-          <h2 key={idx} className="text-[13px] font-bold text-zinc-200 mt-4 mb-2 flex items-center gap-2">
+          <h2 key={idx} className="text-body font-bold text-zinc-200 mt-4 mb-2 flex items-center gap-2">
             {line.slice(3)}
           </h2>
         );
       } else if (line.startsWith('### ')) {
         elements.push(
-          <h3 key={idx} className="text-[12px] font-semibold text-zinc-300 mt-3 mb-1">
+          <h3 key={idx} className="text-data font-semibold text-zinc-300 mt-3 mb-1">
             {line.slice(4)}
           </h3>
         );
       } else if (line.startsWith('- ')) {
         elements.push(
-          <div key={idx} className="flex items-start gap-2 text-[11px] text-zinc-400 leading-relaxed ml-2 my-0.5">
+          <div key={idx} className="flex items-start gap-2 text-body text-zinc-400 leading-relaxed ml-2 my-0.5">
             <span className="text-zinc-600 mt-1 shrink-0">•</span>
             <span>{renderInlineFormatting(line.slice(2))}</span>
           </div>
@@ -489,7 +489,7 @@ function AIExplainTab({
       } else if (/^\d+\.\s/.test(line)) {
         const num = line.match(/^(\d+)\./)?.[1];
         elements.push(
-          <div key={idx} className="flex items-start gap-2 text-[11px] text-zinc-400 leading-relaxed ml-2 my-0.5">
+          <div key={idx} className="flex items-start gap-2 text-body text-zinc-400 leading-relaxed ml-2 my-0.5">
             <span className="text-blue-400 font-bold mt-0 shrink-0 w-4">{num}.</span>
             <span>{renderInlineFormatting(line.replace(/^\d+\.\s*/, ''))}</span>
           </div>
@@ -498,7 +498,7 @@ function AIExplainTab({
         elements.push(<div key={idx} className="h-1" />);
       } else {
         elements.push(
-          <p key={idx} className="text-[11px] text-zinc-400 leading-relaxed my-0.5">
+          <p key={idx} className="text-body text-zinc-400 leading-relaxed my-0.5">
             {renderInlineFormatting(line)}
           </p>
         );
@@ -516,7 +516,7 @@ function AIExplainTab({
         return <strong key={i} className="text-zinc-200 font-medium">{part.slice(2, -2)}</strong>;
       }
       if (part.startsWith('`') && part.endsWith('`')) {
-        return <code key={i} className="text-blue-400 bg-blue-500/10 px-1 rounded text-[10px] font-mono">{part.slice(1, -1)}</code>;
+        return <code key={i} className="text-blue-400 bg-blue-500/10 px-1 rounded text-xs font-mono">{part.slice(1, -1)}</code>;
       }
       return part;
     });
@@ -530,7 +530,7 @@ function AIExplainTab({
           <Sparkles className="w-7 h-7 text-purple-400" />
         </div>
         <h3 className="text-sm font-semibold text-zinc-200 mb-1">AI Query Analysis</h3>
-        <p className="text-[11px] text-zinc-500 max-w-[280px] leading-relaxed mb-4">
+        <p className="text-body text-zinc-500 max-w-[280px] leading-relaxed mb-4">
           Get a plain-language explanation of your query&apos;s execution plan with concrete optimization suggestions.
         </p>
         <button
@@ -547,7 +547,7 @@ function AIExplainTab({
           Analyze with AI
         </button>
         {!query && (
-          <p className="text-[10px] text-zinc-600 mt-2">Run a query first to enable AI analysis.</p>
+          <p className="text-xs text-zinc-600 mt-2">Run a query first to enable AI analysis.</p>
         )}
       </div>
     );
@@ -559,12 +559,12 @@ function AIExplainTab({
       <div className="flex items-center justify-between px-4 py-2 border-b border-white/5 bg-[#0a0a0a]">
         <div className="flex items-center gap-2">
           <Sparkles className="w-3.5 h-3.5 text-purple-400" />
-          <span className="text-[10px] font-bold text-purple-400 uppercase tracking-wider">AI Analysis</span>
+          <span className="text-xs font-bold text-purple-400 uppercase tracking-wider">AI Analysis</span>
         </div>
         <button
           onClick={analyzeWithAI}
           disabled={isLoading}
-          className="flex items-center gap-1.5 px-2 py-1 rounded-md text-[10px] font-bold text-zinc-400 hover:text-white hover:bg-white/5 transition-all"
+          className="flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-bold text-zinc-400 hover:text-white hover:bg-white/5 transition-all"
         >
           {isLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Sparkles className="w-3 h-3" />}
           {isLoading ? 'Analyzing...' : 'Re-analyze'}
@@ -594,7 +594,7 @@ function AIExplainTab({
         )}
 
         {isLoading && aiResponse && (
-          <div className="flex items-center gap-2 mt-2 text-zinc-600 text-[10px]">
+          <div className="flex items-center gap-2 mt-2 text-zinc-600 text-xs">
             <Loader2 className="w-3 h-3 animate-spin" />
             <span>Still generating...</span>
           </div>
@@ -642,24 +642,24 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
           <div className="flex items-center gap-6">
             <div className="flex items-center gap-2">
               <Clock className="w-3.5 h-3.5 text-blue-400" />
-              <span className="text-[13px] font-medium text-zinc-200">
+              <span className="text-body font-medium text-zinc-200">
                 {formatTime(analysis?.executionTime || 0)}
               </span>
-              <span className="text-[10px] text-zinc-600">execution</span>
+              <span className="text-xs text-zinc-600">execution</span>
             </div>
             <div className="flex items-center gap-2">
               <TrendingUp className="w-3.5 h-3.5 text-zinc-500" />
-              <span className="text-[13px] font-medium text-zinc-400">
+              <span className="text-body font-medium text-zinc-400">
                 {formatNumber(analysis?.totalRows || 0)}
               </span>
-              <span className="text-[10px] text-zinc-600">rows</span>
+              <span className="text-xs text-zinc-600">rows</span>
             </div>
             <div className="flex items-center gap-2">
               <HardDrive className="w-3.5 h-3.5 text-zinc-500" />
-              <span className="text-[13px] font-medium text-zinc-400">
+              <span className="text-body font-medium text-zinc-400">
                 {formatNumber(analysis?.totalCost || 0)}
               </span>
-              <span className="text-[10px] text-zinc-600">cost</span>
+              <span className="text-xs text-zinc-600">cost</span>
             </div>
           </div>
 
@@ -670,7 +670,7 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
                 key={tab}
                 onClick={() => setActiveTab(tab)}
                 className={cn(
-                  "px-3 py-1 text-[10px] font-medium rounded-md transition-all uppercase tracking-wide",
+                  "px-3 py-1 text-xs font-medium rounded-md transition-all uppercase tracking-wide",
                   activeTab === tab
                     ? tab === 'ai' ? "bg-purple-500/20 text-purple-300" : "bg-white/10 text-zinc-200"
                     : "text-zinc-500 hover:text-zinc-300"
@@ -704,7 +704,7 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
             {/* Warnings */}
             {analysis && analysis.warnings.length > 0 && (
               <div className="space-y-2">
-                <h3 className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider mb-2">
+                <h3 className="text-xs font-bold text-zinc-500 uppercase tracking-wider mb-2">
                   Performance Issues
                 </h3>
                 {analysis.warnings.map((warning, idx) => (
@@ -737,7 +737,7 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
                     </div>
                     <div className="flex-1 min-w-0">
                       <h4 className={cn(
-                        "text-[11px] font-medium",
+                        "text-body font-medium",
                         warning.type === 'critical'
                           ? "text-red-300"
                           : warning.type === 'warning'
@@ -746,7 +746,7 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
                       )}>
                         {warning.title}
                       </h4>
-                      <p className="text-[10px] text-zinc-500 mt-0.5 leading-relaxed">
+                      <p className="text-xs text-zinc-500 mt-0.5 leading-relaxed">
                         {warning.description}
                       </p>
                     </div>
@@ -762,8 +762,8 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
                   <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
                 </div>
                 <div>
-                  <h4 className="text-[11px] font-medium text-emerald-300">Query looks good</h4>
-                  <p className="text-[10px] text-zinc-500">No obvious performance issues detected.</p>
+                  <h4 className="text-body font-medium text-emerald-300">Query looks good</h4>
+                  <p className="text-xs text-zinc-500">No obvious performance issues detected.</p>
                 </div>
               </div>
             )}
@@ -774,7 +774,7 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
                 <div key={idx} className="p-3 rounded-lg bg-white/[0.02] border border-white/5">
                   <div className="flex items-center gap-2 mb-1">
                     <StatusBadge status={insight.status} />
-                    <span className="text-[9px] text-zinc-500 uppercase tracking-wider font-medium">
+                    <span className="text-label text-zinc-500 uppercase tracking-wider font-medium">
                       {insight.label}
                     </span>
                   </div>
@@ -785,7 +785,7 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
 
             {/* Plan tree preview */}
             <div>
-              <h3 className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider mb-2">
+              <h3 className="text-xs font-bold text-zinc-500 uppercase tracking-wider mb-2">
                 Execution Plan
               </h3>
               <div className="rounded-lg border border-white/5 bg-white/[0.01] p-2">
@@ -809,7 +809,7 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
 
         {activeTab === 'raw' && (
           <div className="p-4">
-            <pre className="text-[10px] font-mono text-zinc-400 bg-white/[0.02] rounded-lg p-4 overflow-auto border border-white/5">
+            <pre className="text-xs font-mono text-zinc-400 bg-white/[0.02] rounded-lg p-4 overflow-auto border border-white/5">
               {JSON.stringify(plan, null, 2)}
             </pre>
           </div>
diff --git a/src/components/admin/tabs/AuditTab.tsx b/src/components/admin/tabs/AuditTab.tsx
index 1697601..df2a69c 100644
--- a/src/components/admin/tabs/AuditTab.tsx
+++ b/src/components/admin/tabs/AuditTab.tsx
@@ -183,7 +183,7 @@ function OperationsAudit() {
           <div className="p-8 text-center text-zinc-600 text-sm">
             <Wrench className="h-8 w-8 mx-auto mb-2 opacity-30" />
             <p>No audit events found.</p>
-            <p className="text-[11px] mt-1 text-zinc-700">
+            <p className="text-body mt-1 text-zinc-700">
               Operations will appear here when maintenance tasks are run.
             </p>
           </div>
@@ -191,13 +191,13 @@ function OperationsAudit() {
           <Table>
             <TableHeader>
               <TableRow className="border-white/5 hover:bg-transparent">
-                <TableHead className="text-[10px] text-zinc-500 font-bold uppercase w-[30px]" />
-                <TableHead className="text-[10px] text-zinc-500 font-bold uppercase">Time</TableHead>
-                <TableHead className="text-[10px] text-zinc-500 font-bold uppercase">Action</TableHead>
-                <TableHead className="text-[10px] text-zinc-500 font-bold uppercase">Target</TableHead>
-                <TableHead className="text-[10px] text-zinc-500 font-bold uppercase hidden md:table-cell">Connection</TableHead>
-                <TableHead className="text-[10px] text-zinc-500 font-bold uppercase hidden lg:table-cell">User</TableHead>
-                <TableHead className="text-right text-[10px] text-zinc-500 font-bold uppercase">Duration</TableHead>
+                <TableHead className="text-xs text-zinc-500 font-bold uppercase w-[30px]" />
+                <TableHead className="text-xs text-zinc-500 font-bold uppercase">Time</TableHead>
+                <TableHead className="text-xs text-zinc-500 font-bold uppercase">Action</TableHead>
+                <TableHead className="text-xs text-zinc-500 font-bold uppercase">Target</TableHead>
+                <TableHead className="text-xs text-zinc-500 font-bold uppercase hidden md:table-cell">Connection</TableHead>
+                <TableHead className="text-xs text-zinc-500 font-bold uppercase hidden lg:table-cell">User</TableHead>
+                <TableHead className="text-right text-xs text-zinc-500 font-bold uppercase">Duration</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -210,7 +210,7 @@ function OperationsAudit() {
                       <XCircle className="w-3.5 h-3.5 text-red-500" />
                     )}
                   </TableCell>
-                  <TableCell className="py-2 font-mono text-[10px] text-zinc-500">
+                  <TableCell className="py-2 font-mono text-xs text-zinc-500">
                     {new Date(event.timestamp).toLocaleString([], {
                       month: 'short',
                       day: 'numeric',
@@ -221,7 +221,7 @@ function OperationsAudit() {
                   <TableCell className="py-2">
                     <Badge
                       variant="outline"
-                      className="text-[9px] font-bold border-white/10"
+                      className="text-label font-bold border-white/10"
                     >
                       {event.action}
                     </Badge>
@@ -235,7 +235,7 @@ function OperationsAudit() {
                   <TableCell className="py-2 text-xs text-zinc-500 hidden lg:table-cell">
                     {event.user}
                   </TableCell>
-                  <TableCell className="py-2 text-right font-mono text-[10px] text-zinc-500">
+                  <TableCell className="py-2 text-right font-mono text-xs text-zinc-500">
                     {event.duration ? `${event.duration}ms` : '-'}
                   </TableCell>
                 </TableRow>
@@ -314,12 +314,12 @@ function QueryAudit() {
           <Table>
             <TableHeader>
               <TableRow className="border-white/5 hover:bg-transparent">
-                <TableHead className="text-[10px] text-zinc-500 font-bold uppercase w-[30px]" />
-                <TableHead className="text-[10px] text-zinc-500 font-bold uppercase">Time</TableHead>
-                <TableHead className="text-[10px] text-zinc-500 font-bold uppercase">Query</TableHead>
-                <TableHead className="text-[10px] text-zinc-500 font-bold uppercase hidden md:table-cell">Connection</TableHead>
-                <TableHead className="text-right text-[10px] text-zinc-500 font-bold uppercase">Duration</TableHead>
-                <TableHead className="text-right text-[10px] text-zinc-500 font-bold uppercase hidden sm:table-cell">Rows</TableHead>
+                <TableHead className="text-xs text-zinc-500 font-bold uppercase w-[30px]" />
+                <TableHead className="text-xs text-zinc-500 font-bold uppercase">Time</TableHead>
+                <TableHead className="text-xs text-zinc-500 font-bold uppercase">Query</TableHead>
+                <TableHead className="text-xs text-zinc-500 font-bold uppercase hidden md:table-cell">Connection</TableHead>
+                <TableHead className="text-right text-xs text-zinc-500 font-bold uppercase">Duration</TableHead>
+                <TableHead className="text-right text-xs text-zinc-500 font-bold uppercase hidden sm:table-cell">Rows</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -332,7 +332,7 @@ function QueryAudit() {
                       <XCircle className="w-3.5 h-3.5 text-red-500" />
                     )}
                   </TableCell>
-                  <TableCell className="py-2 font-mono text-[10px] text-zinc-500 whitespace-nowrap">
+                  <TableCell className="py-2 font-mono text-xs text-zinc-500 whitespace-nowrap">
                     {new Date(item.executedAt).toLocaleString([], {
                       month: 'short',
                       day: 'numeric',
@@ -341,17 +341,17 @@ function QueryAudit() {
                     })}
                   </TableCell>
                   <TableCell className="py-2">
-                    <div className="font-mono text-[11px] text-zinc-400 truncate max-w-[250px] lg:max-w-[400px]">
+                    <div className="font-mono text-body text-zinc-400 truncate max-w-[250px] lg:max-w-[400px]">
                       {item.query}
                     </div>
                   </TableCell>
                   <TableCell className="py-2 text-xs text-zinc-500 hidden md:table-cell truncate max-w-[100px]">
                     {item.connectionName || '-'}
                   </TableCell>
-                  <TableCell className="py-2 text-right font-mono text-[10px] text-zinc-500">
+                  <TableCell className="py-2 text-right font-mono text-xs text-zinc-500">
                     {item.executionTime}ms
                   </TableCell>
-                  <TableCell className="py-2 text-right font-mono text-[10px] text-zinc-500 hidden sm:table-cell">
+                  <TableCell className="py-2 text-right font-mono text-xs text-zinc-500 hidden sm:table-cell">
                     {item.rowCount ?? '-'}
                   </TableCell>
                 </TableRow>
diff --git a/src/components/admin/tabs/OperationsTab.tsx b/src/components/admin/tabs/OperationsTab.tsx
index fd187b5..7d75a66 100644
--- a/src/components/admin/tabs/OperationsTab.tsx
+++ b/src/components/admin/tabs/OperationsTab.tsx
@@ -164,15 +164,15 @@ export function OperationsTab() {
   const getStateBadge = (state: string) => {
     switch (state) {
       case 'active':
-        return <Badge className="bg-green-500/10 text-green-400 border border-green-500/20 text-[9px]">Active</Badge>;
+        return <Badge className="bg-green-500/10 text-green-400 border border-green-500/20 text-label">Active</Badge>;
       case 'idle':
-        return <Badge variant="secondary" className="text-[9px]">Idle</Badge>;
+        return <Badge variant="secondary" className="text-label">Idle</Badge>;
       case 'idle in transaction':
-        return <Badge className="bg-yellow-500/10 text-yellow-400 border border-yellow-500/20 text-[9px]">Idle TX</Badge>;
+        return <Badge className="bg-yellow-500/10 text-yellow-400 border border-yellow-500/20 text-label">Idle TX</Badge>;
       case 'idle in transaction (aborted)':
-        return <Badge className="bg-red-500/10 text-red-400 border border-red-500/20 text-[9px]">Abort</Badge>;
+        return <Badge className="bg-red-500/10 text-red-400 border border-red-500/20 text-label">Abort</Badge>;
       default:
-        return <Badge variant="outline" className="text-[9px]">{state}</Badge>;
+        return <Badge variant="outline" className="text-label">{state}</Badge>;
     }
   };
 
@@ -263,7 +263,7 @@ export function OperationsTab() {
               <Button
                 size="sm"
                 variant="outline"
-                className="h-7 text-[10px] border-white/10 hover:bg-yellow-500/10 hover:text-yellow-500"
+                className="h-7 text-xs border-white/10 hover:bg-yellow-500/10 hover:text-yellow-500"
                 onClick={() => handleRunMaintenance('analyze')}
                 disabled={!!actionLoading || !selectedConnection}
               >
@@ -274,7 +274,7 @@ export function OperationsTab() {
               </Button>
             </div>
             <h4 className="text-sm font-bold text-zinc-200 mb-1">Update Statistics</h4>
-            <p className="text-[11px] text-zinc-500 leading-relaxed">
+            <p className="text-body text-zinc-500 leading-relaxed">
               Updates query planner statistics for all tables.
             </p>
           </div>
@@ -288,7 +288,7 @@ export function OperationsTab() {
               <Button
                 size="sm"
                 variant="outline"
-                className="h-7 text-[10px] border-white/10 hover:bg-blue-500/10 hover:text-blue-500"
+                className="h-7 text-xs border-white/10 hover:bg-blue-500/10 hover:text-blue-500"
                 onClick={() => handleRunMaintenance('vacuum')}
                 disabled={!!actionLoading || !selectedConnection}
               >
@@ -299,7 +299,7 @@ export function OperationsTab() {
               </Button>
             </div>
             <h4 className="text-sm font-bold text-zinc-200 mb-1">Reclaim Space</h4>
-            <p className="text-[11px] text-zinc-500 leading-relaxed">
+            <p className="text-body text-zinc-500 leading-relaxed">
               Removes dead rows and returns space to the OS.
             </p>
           </div>
@@ -313,7 +313,7 @@ export function OperationsTab() {
               <Button
                 size="sm"
                 variant="outline"
-                className="h-7 text-[10px] border-white/10 hover:bg-purple-500/10 hover:text-purple-500"
+                className="h-7 text-xs border-white/10 hover:bg-purple-500/10 hover:text-purple-500"
                 onClick={() => handleRunMaintenance('reindex')}
                 disabled={!!actionLoading || !selectedConnection}
               >
@@ -324,7 +324,7 @@ export function OperationsTab() {
               </Button>
             </div>
             <h4 className="text-sm font-bold text-zinc-200 mb-1">Rebuild Indexes</h4>
-            <p className="text-[11px] text-zinc-500 leading-relaxed">
+            <p className="text-body text-zinc-500 leading-relaxed">
               Reconstructs all indexes in the database.
             </p>
           </div>
@@ -333,11 +333,11 @@ export function OperationsTab() {
           <div className="p-4 rounded-xl border border-red-500/10 bg-red-500/5 flex flex-col justify-center">
             <div className="flex items-center gap-2 text-red-400 mb-2">
               <ShieldAlert className="w-4 h-4" />
-              <span className="text-[11px] font-bold uppercase tracking-wider">
+              <span className="text-body font-bold uppercase tracking-wider">
                 Warning
               </span>
             </div>
-            <p className="text-[11px] text-red-400/70 leading-relaxed italic">
+            <p className="text-body text-red-400/70 leading-relaxed italic">
               These operations can be resource-intensive. Avoid running them
               during peak traffic hours.
             </p>
@@ -385,14 +385,14 @@ export function OperationsTab() {
                       <div className="text-sm font-medium text-zinc-300 truncate max-w-[160px]">
                         {table.tableName}
                       </div>
-                      <div className="flex items-center gap-2 text-[10px] text-zinc-500">
+                      <div className="flex items-center gap-2 text-xs text-zinc-500">
                         <span className="font-mono">
                           {table.rowCount.toLocaleString()} rows
                         </span>
                         <span>-</span>
                         <span className="font-mono">{table.tableSize}</span>
                         {(table.bloatRatio ?? 0) > 10 && (
-                          <Badge variant="outline" className="text-[9px] text-yellow-400 border-yellow-500/20 h-4">
+                          <Badge variant="outline" className="text-label text-yellow-400 border-yellow-500/20 h-4">
                             {(table.bloatRatio ?? 0).toFixed(0)}% bloat
                           </Badge>
                         )}
@@ -447,19 +447,19 @@ export function OperationsTab() {
             <div className="grid grid-cols-4 gap-2">
               <div className="rounded-lg bg-white/[0.03] p-2 text-center">
                 <div className="text-lg font-bold text-zinc-200 tabular-nums">{activeCount}</div>
-                <div className="text-[9px] text-zinc-500 uppercase font-bold">Active</div>
+                <div className="text-label text-zinc-500 uppercase font-bold">Active</div>
               </div>
               <div className="rounded-lg bg-white/[0.03] p-2 text-center">
                 <div className="text-lg font-bold text-zinc-200 tabular-nums">{idleCount}</div>
-                <div className="text-[9px] text-zinc-500 uppercase font-bold">Idle</div>
+                <div className="text-label text-zinc-500 uppercase font-bold">Idle</div>
               </div>
               <div className="rounded-lg bg-white/[0.03] p-2 text-center">
                 <div className={`text-lg font-bold tabular-nums ${idleInTxCount > 0 ? 'text-yellow-400' : 'text-zinc-200'}`}>{idleInTxCount}</div>
-                <div className="text-[9px] text-zinc-500 uppercase font-bold">In TX</div>
+                <div className="text-label text-zinc-500 uppercase font-bold">In TX</div>
               </div>
               <div className="rounded-lg bg-white/[0.03] p-2 text-center">
                 <div className={`text-lg font-bold tabular-nums ${waitingCount > 0 ? 'text-orange-400' : 'text-zinc-200'}`}>{waitingCount}</div>
-                <div className="text-[9px] text-zinc-500 uppercase font-bold">Wait</div>
+                <div className="text-label text-zinc-500 uppercase font-bold">Wait</div>
               </div>
             </div>
           </div>
@@ -478,18 +478,18 @@ export function OperationsTab() {
               <Table>
                 <TableHeader>
                   <TableRow className="border-white/5 hover:bg-transparent">
-                    <TableHead className="text-[10px] text-zinc-500 font-bold uppercase w-[60px]">PID</TableHead>
-                    <TableHead className="text-[10px] text-zinc-500 font-bold uppercase">User</TableHead>
-                    <TableHead className="text-[10px] text-zinc-500 font-bold uppercase">State</TableHead>
-                    <TableHead className="text-[10px] text-zinc-500 font-bold uppercase hidden md:table-cell">Query</TableHead>
-                    <TableHead className="text-[10px] text-zinc-500 font-bold uppercase">Time</TableHead>
-                    <TableHead className="text-right text-[10px] text-zinc-500 font-bold uppercase w-10">Act</TableHead>
+                    <TableHead className="text-xs text-zinc-500 font-bold uppercase w-[60px]">PID</TableHead>
+                    <TableHead className="text-xs text-zinc-500 font-bold uppercase">User</TableHead>
+                    <TableHead className="text-xs text-zinc-500 font-bold uppercase">State</TableHead>
+                    <TableHead className="text-xs text-zinc-500 font-bold uppercase hidden md:table-cell">Query</TableHead>
+                    <TableHead className="text-xs text-zinc-500 font-bold uppercase">Time</TableHead>
+                    <TableHead className="text-right text-xs text-zinc-500 font-bold uppercase w-10">Act</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {sessions.map((session) => (
                     <TableRow key={session.pid} className="group border-white/5 hover:bg-white/[0.03]">
-                      <TableCell className="font-mono text-[10px] text-zinc-400 py-2">
+                      <TableCell className="font-mono text-xs text-zinc-400 py-2">
                         {session.pid}
                       </TableCell>
                       <TableCell className="py-2">
@@ -498,7 +498,7 @@ export function OperationsTab() {
                         </span>
                       </TableCell>
                       <TableCell className="py-2">{getStateBadge(session.state)}</TableCell>
-                      <TableCell className="font-mono text-[10px] text-zinc-500 hidden md:table-cell py-2">
+                      <TableCell className="font-mono text-xs text-zinc-500 hidden md:table-cell py-2">
                         <TooltipProvider>
                           <Tooltip>
                             <TooltipTrigger asChild>
@@ -523,7 +523,7 @@ export function OperationsTab() {
                                 ? 'outline'
                                 : 'secondary'
                           }
-                          className="text-[9px]"
+                          className="text-label"
                         >
                           {session.duration}
                         </Badge>
@@ -567,7 +567,7 @@ export function OperationsTab() {
                 key={entry.id}
                 className="flex items-center gap-3 px-4 py-2 text-xs hover:bg-white/[0.03] transition-colors"
               >
-                <span className="text-zinc-600 font-mono text-[10px] w-[50px] shrink-0">
+                <span className="text-zinc-600 font-mono text-xs w-[50px] shrink-0">
                   {entry.timestamp.toLocaleTimeString([], {
                     hour: '2-digit',
                     minute: '2-digit',
@@ -575,7 +575,7 @@ export function OperationsTab() {
                 </span>
                 <Badge
                   variant="outline"
-                  className="text-[9px] font-bold w-[70px] justify-center shrink-0 border-white/10"
+                  className="text-label font-bold w-[70px] justify-center shrink-0 border-white/10"
                 >
                   {entry.type}
                 </Badge>
@@ -588,7 +588,7 @@ export function OperationsTab() {
                   ) : (
                     <XCircle className="w-3 h-3 text-red-500" />
                   )}
-                  <span className="text-zinc-600 font-mono text-[10px]">
+                  <span className="text-zinc-600 font-mono text-xs">
                     {entry.duration}ms
                   </span>
                 </div>
diff --git a/src/components/admin/tabs/OverviewTab.tsx b/src/components/admin/tabs/OverviewTab.tsx
index 5fb06ae..395d112 100644
--- a/src/components/admin/tabs/OverviewTab.tsx
+++ b/src/components/admin/tabs/OverviewTab.tsx
@@ -503,7 +503,7 @@ function HeroStatusBanner({
               >
                 {animatedScore}%
               </span>
-              <span className="text-[10px] text-zinc-500 uppercase tracking-wider">
+              <span className="text-xs text-zinc-500 uppercase tracking-wider">
                 Health
               </span>
             </div>
@@ -514,7 +514,7 @@ function HeroStatusBanner({
                 animate={{ scale: [1, 1.05, 1], opacity: [0.7, 1, 0.7] }}
                 transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
               />
-              <span className="text-[9px] font-bold text-emerald-400 uppercase tracking-widest">
+              <span className="text-label font-bold text-emerald-400 uppercase tracking-widest">
                 Live
               </span>
             </div>
@@ -528,11 +528,11 @@ function HeroStatusBanner({
                 <span className={`text-sm font-bold ${statusColor}`}>
                   {statusText}
                 </span>
-                <div className="flex gap-1.5 text-[10px]">
+                <div className="flex gap-1.5 text-xs">
                   {healthyCount > 0 && (
                     <Badge
                       variant="outline"
-                      className="border-emerald-500/30 text-emerald-400 h-5 text-[9px]"
+                      className="border-emerald-500/30 text-emerald-400 h-5 text-label"
                     >
                       {healthyCount} healthy
                     </Badge>
@@ -540,7 +540,7 @@ function HeroStatusBanner({
                   {degradedCount > 0 && (
                     <Badge
                       variant="outline"
-                      className="border-amber-500/30 text-amber-400 h-5 text-[9px]"
+                      className="border-amber-500/30 text-amber-400 h-5 text-label"
                     >
                       {degradedCount} degraded
                     </Badge>
@@ -548,7 +548,7 @@ function HeroStatusBanner({
                   {errorCount > 0 && (
                     <Badge
                       variant="outline"
-                      className="border-red-500/30 text-red-400 h-5 text-[9px]"
+                      className="border-red-500/30 text-red-400 h-5 text-label"
                     >
                       {errorCount} error
                     </Badge>
@@ -559,7 +559,7 @@ function HeroStatusBanner({
                 {user && (
                   <Badge
                     variant="outline"
-                    className="border-white/10 text-zinc-500 h-5 text-[9px]"
+                    className="border-white/10 text-zinc-500 h-5 text-label"
                   >
                     {user.username} ({user.role})
                   </Badge>
@@ -567,7 +567,7 @@ function HeroStatusBanner({
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="h-7 text-[10px] text-zinc-500 hover:text-zinc-300"
+                  className="h-7 text-xs text-zinc-500 hover:text-zinc-300"
                   onClick={onRefresh}
                   disabled={fleetLoading}
                 >
@@ -649,7 +649,7 @@ function CounterCard({
     <div className="rounded-xl border border-white/5 bg-white/[0.02] p-3">
       <div className="flex items-center gap-1.5 mb-1.5">
         <Icon className={`w-3.5 h-3.5 ${color}`} />
-        <span className="text-[10px] text-zinc-500 uppercase tracking-wider">
+        <span className="text-xs text-zinc-500 uppercase tracking-wider">
           {label}
         </span>
       </div>
@@ -663,7 +663,7 @@ function CounterCard({
       </div>
       {trend !== undefined && trend !== 0 && (
         <div
-          className={`flex items-center gap-0.5 mt-1 text-[10px] ${
+          className={`flex items-center gap-0.5 mt-1 text-xs ${
             trend > 0 ? 'text-emerald-400' : 'text-red-400'
           }`}
         >
@@ -729,7 +729,7 @@ function FleetHealthSection({
       <div className="flex items-center gap-2 mb-3">
         <Radio className="h-4 w-4 text-blue-400" />
         <h2 className="text-sm font-bold text-zinc-300">Fleet Status</h2>
-        <span className="text-[10px] text-zinc-600">
+        <span className="text-xs text-zinc-600">
           {fleetHealth.length} endpoint{fleetHealth.length !== 1 ? 's' : ''}
         </span>
       </div>
@@ -786,7 +786,7 @@ function FleetHealthSection({
                     {item.environment && (
                       <Badge
                         variant="outline"
-                        className="text-[9px] h-4"
+                        className="text-label h-4"
                         style={{
                           borderColor:
                             ENVIRONMENT_COLORS[
@@ -824,7 +824,7 @@ function FleetHealthSection({
                   </div>
                 </div>
 
-                <div className="flex items-center gap-3 text-[11px] text-zinc-500">
+                <div className="flex items-center gap-3 text-body text-zinc-500">
                   <span className="font-mono text-zinc-400">
                     {item.status === 'error' ? 'timeout' : `${item.latencyMs}ms`}
                   </span>
@@ -847,7 +847,7 @@ function FleetHealthSection({
                 </div>
 
                 {item.error && (
-                  <div className="text-red-400 text-[10px] truncate mt-1.5">
+                  <div className="text-red-400 text-xs truncate mt-1.5">
                     {item.error}
                   </div>
                 )}
@@ -958,10 +958,10 @@ function MetricGauge({
           >
             {displayValue ?? animatedValue}
           </span>
-          <span className="text-[9px] text-zinc-500">{unit}</span>
+          <span className="text-label text-zinc-500">{unit}</span>
         </div>
       </div>
-      <span className="text-[10px] text-zinc-500 mt-1 uppercase tracking-wider">
+      <span className="text-xs text-zinc-500 mt-1 uppercase tracking-wider">
         {label}
       </span>
     </div>
@@ -989,12 +989,12 @@ function MetricBigNumber({
       <span className="text-3xl font-bold text-zinc-100 tabular-nums">
         {formatNumber(animatedValue)}
       </span>
-      <span className="text-[10px] text-zinc-500 mt-1 uppercase tracking-wider">
+      <span className="text-xs text-zinc-500 mt-1 uppercase tracking-wider">
         {label}
       </span>
       {trend !== 0 && (
         <div
-          className={`flex items-center gap-0.5 mt-1.5 text-[10px] ${
+          className={`flex items-center gap-0.5 mt-1.5 text-xs ${
             trend > 0 ? 'text-emerald-400' : 'text-red-400'
           }`}
         >
@@ -1121,7 +1121,7 @@ function AnalyticsSection({
                         {item.text}
                       </div>
                       {item.connectionName && (
-                        <div className="text-[10px] text-zinc-600 truncate">
+                        <div className="text-xs text-zinc-600 truncate">
                           {item.connectionName}
                         </div>
                       )}
@@ -1132,7 +1132,7 @@ function AnalyticsSection({
                       ) : (
                         <XCircle className="w-3 h-3 text-red-500" />
                       )}
-                      <span className="text-[10px] text-zinc-600 whitespace-nowrap">
+                      <span className="text-xs text-zinc-600 whitespace-nowrap">
                         {formatRelativeTime(item.time)}
                       </span>
                     </div>
@@ -1206,10 +1206,10 @@ function QuickActionsSection() {
               <h3 className="text-sm font-bold text-zinc-200 mb-1">
                 {action.label}
               </h3>
-              <p className="text-[11px] text-zinc-500 mb-3">
+              <p className="text-body text-zinc-500 mb-3">
                 {action.description}
               </p>
-              <div className="flex items-center gap-1 text-[11px] text-zinc-600 group-hover:text-zinc-400 transition-colors">
+              <div className="flex items-center gap-1 text-body text-zinc-600 group-hover:text-zinc-400 transition-colors">
                 <span>Open</span>
                 <ArrowRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
               </div>
@@ -1308,7 +1308,7 @@ function EmptyState() {
               <div className="text-sm font-bold text-zinc-200 mb-1">
                 {f.label}
               </div>
-              <div className="text-[11px] text-zinc-500">{f.description}</div>
+              <div className="text-body text-zinc-500">{f.description}</div>
             </motion.div>
           ))}
         </motion.div>
diff --git a/src/components/admin/tabs/SecurityTab.tsx b/src/components/admin/tabs/SecurityTab.tsx
index d673d02..ec1cc1c 100644
--- a/src/components/admin/tabs/SecurityTab.tsx
+++ b/src/components/admin/tabs/SecurityTab.tsx
@@ -90,13 +90,13 @@ function AccessSummary() {
           <Separator className="bg-white/5" />
           <div className="flex items-center justify-between">
             <span className="text-zinc-500">Admin Access</span>
-            <Badge className="bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[10px]">
+            <Badge className="bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-xs">
               ENABLED
             </Badge>
           </div>
           <div className="flex items-center justify-between">
             <span className="text-zinc-500">User Access</span>
-            <Badge className="bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[10px]">
+            <Badge className="bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-xs">
               ENABLED
             </Badge>
           </div>
@@ -108,21 +108,21 @@ function AccessSummary() {
         <div className="space-y-3 text-sm">
           <div className="flex items-center justify-between">
             <span className="text-zinc-500">SSL/TLS</span>
-            <Badge variant="secondary" className="text-[10px]">
+            <Badge variant="secondary" className="text-xs">
               Supported
             </Badge>
           </div>
           <Separator className="bg-white/5" />
           <div className="flex items-center justify-between">
             <span className="text-zinc-500">SSH Tunnel</span>
-            <Badge variant="secondary" className="text-[10px]">
+            <Badge variant="secondary" className="text-xs">
               Supported
             </Badge>
           </div>
           <Separator className="bg-white/5" />
           <div className="flex items-center justify-between">
             <span className="text-zinc-500">Data Masking</span>
-            <Badge variant="secondary" className="text-[10px]">
+            <Badge variant="secondary" className="text-xs">
               Configurable
             </Badge>
           </div>
@@ -180,7 +180,7 @@ function ThresholdSettings() {
           <Activity className="h-4 w-4 text-blue-400" />
           Monitoring Thresholds
         </h3>
-        <p className="text-[11px] text-zinc-500 mb-6">
+        <p className="text-body text-zinc-500 mb-6">
           Configure warning and critical thresholds for monitoring alerts. These
           values are used by the monitoring dashboard to trigger visual alerts.
         </p>
@@ -197,7 +197,7 @@ function ThresholdSettings() {
                   <span className="text-sm font-medium text-zinc-300">
                     {threshold.label}
                   </span>
-                  <span className="text-[10px] text-zinc-600 uppercase font-bold">
+                  <span className="text-xs text-zinc-600 uppercase font-bold">
                     {threshold.direction === 'above'
                       ? 'Alert when above'
                       : 'Alert when below'}
diff --git a/src/components/community-section.tsx b/src/components/community-section.tsx
index c7cfdde..a492718 100644
--- a/src/components/community-section.tsx
+++ b/src/components/community-section.tsx
@@ -39,7 +39,7 @@ function DesktopCommunity() {
           <h3 className="text-sm font-semibold text-zinc-200">Join the Community</h3>
           <p className="text-xs text-zinc-500">This project is open source. Your contributions make it better!</p>
         </div>
-        <span className="shrink-0 text-[10px] font-medium px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
+        <span className="shrink-0 text-xs font-medium px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
           Open Source
         </span>
       </div>
diff --git a/src/components/monitoring/tabs/OverviewTab.tsx b/src/components/monitoring/tabs/OverviewTab.tsx
index 7294dd1..532a0a6 100644
--- a/src/components/monitoring/tabs/OverviewTab.tsx
+++ b/src/components/monitoring/tabs/OverviewTab.tsx
@@ -60,7 +60,7 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
           {overview?.uptime || 'N/A'}
         </Badge>
         {data?.timestamp && (
-          <span className="text-[10px] sm:text-xs text-muted-foreground">
+          <span className="text-xs sm:text-xs text-muted-foreground">
             {new Date(data.timestamp).toLocaleTimeString()}
           </span>
         )}
@@ -84,7 +84,7 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
               </span>
             </div>
             <Progress value={connectionPercent} className="h-1 mt-1 sm:mt-2" />
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
+            <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               {connectionPercent}% used
             </p>
           </CardContent>
@@ -100,7 +100,7 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-bold">{overview?.databaseSize || 'N/A'}</div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
+            <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               Total storage
             </p>
           </CardContent>
@@ -122,7 +122,7 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
               value={performance?.cacheHitRatio ?? 0}
               className="h-1 mt-1 sm:mt-2"
             />
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1 truncate">
+            <p className="text-xs sm:text-xs text-muted-foreground mt-1 truncate">
               {(performance?.cacheHitRatio ?? 0) >= 90
                 ? 'Excellent'
                 : (performance?.cacheHitRatio ?? 0) >= 80
@@ -144,7 +144,7 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
             <div className="text-lg sm:text-2xl font-bold">
               {overview?.tableCount ?? 0}
             </div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
+            <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               {overview?.indexCount ?? 0} indexes
             </p>
           </CardContent>
diff --git a/src/components/monitoring/tabs/PerformanceTab.tsx b/src/components/monitoring/tabs/PerformanceTab.tsx
index 8e696fe..5ee8b49 100644
--- a/src/components/monitoring/tabs/PerformanceTab.tsx
+++ b/src/components/monitoring/tabs/PerformanceTab.tsx
@@ -51,7 +51,7 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
         {/* Cache Hit Ratio */}
         <Card className={`p-0 border-2 transition-colors ${getThresholdColor(cacheThreshold)}`}>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
               Cache Hit
             </CardTitle>
             <Activity className={`h-3 w-3 sm:h-4 sm:w-4 ${cacheStatus.color}`} />
@@ -68,10 +68,10 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
               className="h-1 sm:h-2 mt-1 sm:mt-3"
             />
             <div className="flex items-center justify-between mt-1 sm:mt-2">
-              <Badge variant="outline" className={`${cacheStatus.color} text-[10px] sm:text-xs`}>
+              <Badge variant="outline" className={`${cacheStatus.color} text-xs sm:text-xs`}>
                 {cacheStatus.label}
               </Badge>
-              <span className="text-[10px] sm:text-xs text-muted-foreground hidden sm:inline">95%+</span>
+              <span className="text-xs sm:text-xs text-muted-foreground hidden sm:inline">95%+</span>
             </div>
           </CardContent>
         </Card>
@@ -79,7 +79,7 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
         {/* Buffer Pool Usage */}
         <Card className={`p-0 border-2 transition-colors ${getThresholdColor(bufferThreshold)}`}>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
               Buffer
             </CardTitle>
             <Gauge className={`h-3 w-3 sm:h-4 sm:w-4 ${bufferStatus.color}`} />
@@ -96,10 +96,10 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
               className="h-1 sm:h-2 mt-1 sm:mt-3"
             />
             <div className="flex items-center justify-between mt-1 sm:mt-2">
-              <Badge variant="outline" className={`${bufferStatus.color} text-[10px] sm:text-xs`}>
+              <Badge variant="outline" className={`${bufferStatus.color} text-xs sm:text-xs`}>
                 {bufferStatus.label}
               </Badge>
-              <span className="text-[10px] sm:text-xs text-muted-foreground hidden sm:inline">Cache</span>
+              <span className="text-xs sm:text-xs text-muted-foreground hidden sm:inline">Cache</span>
             </div>
           </CardContent>
         </Card>
@@ -107,7 +107,7 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
         {/* Deadlocks */}
         <Card className={`p-0 border-2 transition-colors ${getThresholdColor(deadlockThreshold)}`}>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
               Deadlocks
             </CardTitle>
             <AlertTriangle
@@ -120,14 +120,14 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
                 {performance?.deadlocks ?? 0}
               </span>
             </div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1 sm:mt-3 hidden sm:block">
+            <p className="text-xs sm:text-xs text-muted-foreground mt-1 sm:mt-3 hidden sm:block">
               {performance?.deadlocks
                 ? 'Review queries'
                 : 'None detected'}
             </p>
             <Badge
               variant={performance?.deadlocks ? 'destructive' : 'secondary'}
-              className="mt-1 sm:mt-2 text-[10px] sm:text-xs"
+              className="mt-1 sm:mt-2 text-xs sm:text-xs"
             >
               {performance?.deadlocks ? 'Attention' : 'Healthy'}
             </Badge>
@@ -140,7 +140,7 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
         <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-4">
           <Card className="p-0">
             <CardHeader className="p-2 sm:p-3 pb-0">
-              <CardTitle className="text-[10px] sm:text-xs font-medium text-muted-foreground">Cache Hit Trend</CardTitle>
+              <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">Cache Hit Trend</CardTitle>
             </CardHeader>
             <CardContent className="p-2 sm:p-3 pt-0">
               <MetricChart data={cacheHistory} color="#22c55e" title="Cache Hit" unit="%" />
@@ -148,7 +148,7 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
           </Card>
           <Card className="p-0">
             <CardHeader className="p-2 sm:p-3 pb-0">
-              <CardTitle className="text-[10px] sm:text-xs font-medium text-muted-foreground">Buffer Pool Trend</CardTitle>
+              <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">Buffer Pool Trend</CardTitle>
             </CardHeader>
             <CardContent className="p-2 sm:p-3 pt-0">
               <MetricChart data={bufferHistory} color="#3b82f6" title="Buffer Pool" unit="%" />
@@ -156,7 +156,7 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
           </Card>
           <Card className="p-0">
             <CardHeader className="p-2 sm:p-3 pb-0">
-              <CardTitle className="text-[10px] sm:text-xs font-medium text-muted-foreground">Deadlock Trend</CardTitle>
+              <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">Deadlock Trend</CardTitle>
             </CardHeader>
             <CardContent className="p-2 sm:p-3 pt-0">
               <MetricChart data={deadlockHistory} color="#ef4444" title="Deadlocks" />
@@ -177,12 +177,12 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0 space-y-2 sm:space-y-4">
             <div className="p-2 sm:p-4 bg-muted/30 rounded-lg">
-              <p className="text-[10px] sm:text-sm text-muted-foreground">Write & Sync</p>
+              <p className="text-xs sm:text-sm text-muted-foreground">Write & Sync</p>
               <p className="text-sm sm:text-lg font-mono mt-1 truncate">
                 {performance?.checkpointWriteTime || 'N/A'}
               </p>
             </div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground hidden sm:block">
+            <p className="text-xs sm:text-xs text-muted-foreground hidden sm:block">
               Checkpoint write time affects database performance during heavy writes.
             </p>
           </CardContent>
@@ -202,7 +202,7 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
                 <AlertTriangle className="h-3 w-3 sm:h-4 sm:w-4 text-yellow-500 mt-0.5 flex-shrink-0" />
                 <div>
                   <p className="text-xs sm:text-sm font-medium">Low Cache Hit</p>
-                  <p className="text-[10px] sm:text-xs text-muted-foreground hidden sm:block">
+                  <p className="text-xs sm:text-xs text-muted-foreground hidden sm:block">
                     Increase shared_buffers
                   </p>
                 </div>
@@ -213,7 +213,7 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
                 <AlertTriangle className="h-3 w-3 sm:h-4 sm:w-4 text-red-500 mt-0.5 flex-shrink-0" />
                 <div>
                   <p className="text-xs sm:text-sm font-medium">Deadlocks</p>
-                  <p className="text-[10px] sm:text-xs text-muted-foreground hidden sm:block">
+                  <p className="text-xs sm:text-xs text-muted-foreground hidden sm:block">
                     Review lock ordering
                   </p>
                 </div>
diff --git a/src/components/monitoring/tabs/PoolTab.tsx b/src/components/monitoring/tabs/PoolTab.tsx
index 954f003..2eaa9bd 100644
--- a/src/components/monitoring/tabs/PoolTab.tsx
+++ b/src/components/monitoring/tabs/PoolTab.tsx
@@ -115,7 +115,7 @@ export function PoolTab({ connection }: PoolTabProps) {
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-bold">{stats?.total ?? 0}</div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
+            <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               Max pool size
             </p>
           </CardContent>
@@ -131,7 +131,7 @@ export function PoolTab({ connection }: PoolTabProps) {
           <CardContent className="p-3 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-bold">{stats?.active ?? 0}</div>
             <Progress value={usagePercent} className="h-1 mt-1 sm:mt-2" />
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
+            <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               {usagePercent}% utilized
             </p>
           </CardContent>
@@ -146,7 +146,7 @@ export function PoolTab({ connection }: PoolTabProps) {
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-bold">{stats?.idle ?? 0}</div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
+            <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               Available
             </p>
           </CardContent>
@@ -163,7 +163,7 @@ export function PoolTab({ connection }: PoolTabProps) {
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-bold">{stats?.waiting ?? 0}</div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
+            <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               {stats?.waiting ? 'Queued requests' : 'No queue'}
             </p>
           </CardContent>
diff --git a/src/components/monitoring/tabs/QueriesTab.tsx b/src/components/monitoring/tabs/QueriesTab.tsx
index 664ce47..42ebe0e 100644
--- a/src/components/monitoring/tabs/QueriesTab.tsx
+++ b/src/components/monitoring/tabs/QueriesTab.tsx
@@ -86,7 +86,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
       <div className="grid grid-cols-3 gap-2 sm:gap-4">
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
               Queries
             </CardTitle>
             <Search className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
@@ -98,7 +98,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
               Avg Time
             </CardTitle>
             <Clock className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
@@ -110,7 +110,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
               Slow
             </CardTitle>
             <AlertTriangle
@@ -130,7 +130,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
             <Clock className="h-3 w-3 sm:h-4 sm:w-4" />
             Slowest Queries
             {slowQueries.length === 0 && (
-              <Badge variant="secondary" className="ml-2 text-[10px] sm:text-xs">
+              <Badge variant="secondary" className="ml-2 text-xs sm:text-xs">
                 pg_stat_statements required
               </Badge>
             )}
@@ -200,7 +200,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
                 <TableBody>
                   {sortedQueries.map((query, index) => (
                     <TableRow key={query.queryId || index}>
-                      <TableCell className="font-mono text-[10px] sm:text-xs py-2">
+                      <TableCell className="font-mono text-xs sm:text-xs py-2">
                         <TooltipProvider>
                           <Tooltip>
                             <TooltipTrigger asChild>
@@ -223,7 +223,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
                       <TableCell className="hidden md:table-cell py-2">
                         <Badge
                           variant={query.totalTime > 60000 ? 'destructive' : 'secondary'}
-                          className="text-[10px] sm:text-xs"
+                          className="text-xs sm:text-xs"
                         >
                           {formatTime(query.totalTime)}
                         </Badge>
@@ -237,7 +237,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
                                 ? 'outline'
                                 : 'secondary'
                           }
-                          className="text-[10px] sm:text-xs"
+                          className="text-xs sm:text-xs"
                         >
                           {formatTime(query.avgTime)}
                         </Badge>
diff --git a/src/components/monitoring/tabs/SessionsTab.tsx b/src/components/monitoring/tabs/SessionsTab.tsx
index 0ab1218..c47168b 100644
--- a/src/components/monitoring/tabs/SessionsTab.tsx
+++ b/src/components/monitoring/tabs/SessionsTab.tsx
@@ -92,7 +92,7 @@ export function SessionsTab({ data, loading, onKillSession, isAdmin = true }: Se
       <div className="grid grid-cols-4 gap-2 sm:gap-4">
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
               Active
             </CardTitle>
             <Activity className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
@@ -104,7 +104,7 @@ export function SessionsTab({ data, loading, onKillSession, isAdmin = true }: Se
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
               Idle
             </CardTitle>
             <Clock className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
@@ -116,7 +116,7 @@ export function SessionsTab({ data, loading, onKillSession, isAdmin = true }: Se
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
               In TX
             </CardTitle>
             <Clock className={`h-3 w-3 sm:h-4 sm:w-4 ${idleInTxCount > 0 ? 'text-yellow-500' : 'text-muted-foreground'}`} />
@@ -128,7 +128,7 @@ export function SessionsTab({ data, loading, onKillSession, isAdmin = true }: Se
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
               Wait
             </CardTitle>
             <Users className={`h-3 w-3 sm:h-4 sm:w-4 ${waitingCount > 0 ? 'text-orange-500' : 'text-muted-foreground'}`} />
@@ -170,21 +170,21 @@ export function SessionsTab({ data, loading, onKillSession, isAdmin = true }: Se
                 <TableBody>
                   {sessions.map((session) => (
                     <TableRow key={session.pid}>
-                      <TableCell className="font-mono text-[10px] sm:text-xs py-2">
+                      <TableCell className="font-mono text-xs sm:text-xs py-2">
                         {session.pid}
                       </TableCell>
                       <TableCell className="py-2">
                         <div className="flex flex-col">
                           <span className="font-medium text-xs truncate max-w-[60px] sm:max-w-[100px]">{session.user}</span>
                           {session.applicationName && (
-                            <span className="text-[10px] text-muted-foreground truncate max-w-[60px] sm:max-w-[100px] hidden sm:block">
+                            <span className="text-xs text-muted-foreground truncate max-w-[60px] sm:max-w-[100px] hidden sm:block">
                               {session.applicationName}
                             </span>
                           )}
                         </div>
                       </TableCell>
                       <TableCell className="py-2">{getStateBadge(session.state)}</TableCell>
-                      <TableCell className="font-mono text-[10px] hidden md:table-cell py-2">
+                      <TableCell className="font-mono text-xs hidden md:table-cell py-2">
                         <TooltipProvider>
                           <Tooltip>
                             <TooltipTrigger asChild>
@@ -212,12 +212,12 @@ export function SessionsTab({ data, loading, onKillSession, isAdmin = true }: Se
                                 ? 'outline'
                                 : 'secondary'
                           }
-                          className="text-[10px] sm:text-xs"
+                          className="text-xs sm:text-xs"
                         >
                           {session.duration}
                         </Badge>
                       </TableCell>
-                      <TableCell className="text-[10px] text-muted-foreground hidden lg:table-cell py-2">
+                      <TableCell className="text-xs text-muted-foreground hidden lg:table-cell py-2">
                         {session.waitEventType
                           ? `${session.waitEventType}`
                           : '-'}
@@ -238,7 +238,7 @@ export function SessionsTab({ data, loading, onKillSession, isAdmin = true }: Se
                             )}
                           </Button>
                         ) : (
-                          <span className="text-[10px] text-muted-foreground">-</span>
+                          <span className="text-xs text-muted-foreground">-</span>
                         )}
                       </TableCell>
                     </TableRow>
diff --git a/src/components/monitoring/tabs/StorageTab.tsx b/src/components/monitoring/tabs/StorageTab.tsx
index fc9be46..a61e1bb 100644
--- a/src/components/monitoring/tabs/StorageTab.tsx
+++ b/src/components/monitoring/tabs/StorageTab.tsx
@@ -55,7 +55,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-4">
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
               DB Size
             </CardTitle>
             <Database className="h-3 w-3 sm:h-4 sm:w-4 text-blue-500" />
@@ -69,14 +69,14 @@ export function StorageTab({ data, loading }: StorageTabProps) {
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
               Tables
             </CardTitle>
             <HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-bold truncate">{formatBytes(totalTableSize)}</div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
+            <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               {tablePercent.toFixed(1)}%
             </p>
           </CardContent>
@@ -84,14 +84,14 @@ export function StorageTab({ data, loading }: StorageTabProps) {
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
               Indexes
             </CardTitle>
             <Archive className="h-3 w-3 sm:h-4 sm:w-4 text-purple-500" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-bold truncate">{formatBytes(totalIndexSize)}</div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
+            <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               {indexPercent.toFixed(1)}%
             </p>
           </CardContent>
@@ -99,7 +99,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
               WAL
             </CardTitle>
             <FolderOpen className="h-3 w-3 sm:h-4 sm:w-4 text-orange-500" />
@@ -194,14 +194,14 @@ export function StorageTab({ data, loading }: StorageTabProps) {
                           <FolderOpen className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground flex-shrink-0" />
                           <span className="font-medium text-xs sm:text-sm truncate max-w-[80px] sm:max-w-none">{ts.name}</span>
                           {ts.name === 'pg_default' && (
-                            <Badge variant="secondary" className="text-[10px] sm:text-xs hidden sm:inline-flex">Default</Badge>
+                            <Badge variant="secondary" className="text-xs sm:text-xs hidden sm:inline-flex">Default</Badge>
                           )}
                           {ts.name === 'WAL' && (
-                            <Badge variant="outline" className="text-[10px] sm:text-xs hidden sm:inline-flex">WAL</Badge>
+                            <Badge variant="outline" className="text-xs sm:text-xs hidden sm:inline-flex">WAL</Badge>
                           )}
                         </div>
                       </TableCell>
-                      <TableCell className="font-mono text-[10px] sm:text-xs text-muted-foreground hidden md:table-cell py-2">
+                      <TableCell className="font-mono text-xs sm:text-xs text-muted-foreground hidden md:table-cell py-2">
                         {ts.location || 'default'}
                       </TableCell>
                       <TableCell className="text-right text-xs py-2">{ts.size}</TableCell>
@@ -268,7 +268,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
                           <TableCell className="py-2">
                             <div className="flex flex-col">
                               <span className="font-medium text-xs sm:text-sm truncate max-w-[100px] sm:max-w-[200px]">{table.tableName}</span>
-                              <span className="text-[10px] sm:text-xs text-muted-foreground">
+                              <span className="text-xs sm:text-xs text-muted-foreground">
                                 {table.schemaName}
                               </span>
                             </div>
diff --git a/src/components/monitoring/tabs/TablesTab.tsx b/src/components/monitoring/tabs/TablesTab.tsx
index 08ea71b..f4119a4 100644
--- a/src/components/monitoring/tabs/TablesTab.tsx
+++ b/src/components/monitoring/tabs/TablesTab.tsx
@@ -80,14 +80,14 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
       <div className="grid grid-cols-3 gap-2 sm:gap-4">
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
               Tables
             </CardTitle>
             <Table2 className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-bold">{tables.length}</div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
+            <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               {formatNumber(totalRows)} rows
             </p>
           </CardContent>
@@ -95,14 +95,14 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
               Size
             </CardTitle>
             <Search className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-bold">{formatBytes(totalSize)}</div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
+            <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               Total
             </p>
           </CardContent>
@@ -110,7 +110,7 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
               Vacuum
             </CardTitle>
             <AlertTriangle
@@ -119,7 +119,7 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-bold">{tablesNeedingVacuum}</div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
+            <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               {tablesNeedingVacuum > 0 ? 'Need' : 'OK'}
             </p>
           </CardContent>
@@ -170,7 +170,7 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
                           <span className="font-medium text-xs sm:text-sm truncate max-w-[100px] sm:max-w-[200px]">
                             {table.tableName}
                           </span>
-                          <span className="text-[10px] sm:text-xs text-muted-foreground">
+                          <span className="text-xs sm:text-xs text-muted-foreground">
                             {table.schemaName}
                           </span>
                         </div>
@@ -178,7 +178,7 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
                       <TableCell className="text-right font-mono text-xs py-2">
                         {formatNumber(table.rowCount)}
                         {table.deadRowCount ? (
-                          <span className="text-[10px] text-muted-foreground block">
+                          <span className="text-xs text-muted-foreground block">
                             {formatNumber(table.deadRowCount)} dead
                           </span>
                         ) : null}
@@ -198,7 +198,7 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
                                 ? 'outline'
                                 : 'secondary'
                           }
-                          className="text-[10px] sm:text-xs"
+                          className="text-xs sm:text-xs"
                         >
                           {(table.bloatRatio ?? 0).toFixed(1)}%
                         </Badge>
@@ -253,7 +253,7 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
                             </Button>
                           </div>
                         ) : (
-                          <span className="text-[10px] text-muted-foreground">-</span>
+                          <span className="text-xs text-muted-foreground">-</span>
                         )}
                       </TableCell>
                     </TableRow>
diff --git a/src/components/results-grid/ResultCard.tsx b/src/components/results-grid/ResultCard.tsx
index d9fca16..c984d3a 100644
--- a/src/components/results-grid/ResultCard.tsx
+++ b/src/components/results-grid/ResultCard.tsx
@@ -69,7 +69,7 @@ export function ResultCard({
               {displayPrimary}
             </p>
             {idValue != null && (
-              <p className="text-[10px] text-zinc-500 font-mono">#{String(idValue)}</p>
+              <p className="text-xs text-zinc-500 font-mono">#{String(idValue)}</p>
             )}
           </div>
         </div>
@@ -101,7 +101,7 @@ export function ResultCard({
           );
         })}
         {fields.length > previewFields.length + 2 && (
-          <p className="text-[10px] text-zinc-600 text-center pt-1">
+          <p className="text-xs text-zinc-600 text-center pt-1">
             +{fields.length - previewFields.length - 2} more fields
           </p>
         )}
diff --git a/src/components/results-grid/RowDetailSheet.tsx b/src/components/results-grid/RowDetailSheet.tsx
index 5ddde4c..c512d15 100644
--- a/src/components/results-grid/RowDetailSheet.tsx
+++ b/src/components/results-grid/RowDetailSheet.tsx
@@ -129,7 +129,7 @@ export function RowDetailSheet({
                 >
                   <div className="flex items-start justify-between gap-4">
                     <div className="flex-1 min-w-0">
-                      <p className="text-[10px] uppercase tracking-widest text-zinc-500 mb-1 font-mono flex items-center gap-1">
+                      <p className="text-xs uppercase tracking-widest text-zinc-500 mb-1 font-mono flex items-center gap-1">
                         {field}
                         {isMasked && <Lock className="w-2.5 h-2.5 text-purple-400" />}
                       </p>
diff --git a/src/components/schema-explorer/ColumnList.tsx b/src/components/schema-explorer/ColumnList.tsx
index f142d4a..ed66801 100644
--- a/src/components/schema-explorer/ColumnList.tsx
+++ b/src/components/schema-explorer/ColumnList.tsx
@@ -23,11 +23,11 @@ export const ColumnList = React.memo(function ColumnList({ columns, indexes }: C
             </div>
           )}
 
-          <span className="text-[12px] text-muted-foreground flex-1 truncate group-hover/col:text-foreground">
+          <span className="text-data text-muted-foreground flex-1 truncate group-hover/col:text-foreground">
             {column.name}
           </span>
 
-          <span className="text-[10px] font-mono text-muted-foreground/60 uppercase group-hover/col:text-muted-foreground">
+          <span className="text-xs font-mono text-muted-foreground/60 uppercase group-hover/col:text-muted-foreground">
             {column.type.split('(')[0]}
           </span>
         </div>
@@ -36,12 +36,12 @@ export const ColumnList = React.memo(function ColumnList({ columns, indexes }: C
         <div className="pt-2 pb-1">
           <div className="flex items-center gap-1.5 px-2 mb-1">
             <Hash className="w-2.5 h-2.5 text-purple-500/40" />
-            <span className="text-[9px] uppercase tracking-wider font-bold text-muted-foreground">Indexes</span>
+            <span className="text-label uppercase tracking-wider font-bold text-muted-foreground">Indexes</span>
           </div>
           {indexes.map(idx => (
             <div key={idx.name} className="flex items-center gap-2 py-0.5 px-2">
               <div className="w-2.5 h-2.5" />
-              <span className="text-[10px] text-muted-foreground italic truncate" title={Array.isArray(idx.columns) ? idx.columns.join(', ') : ''}>
+              <span className="text-xs text-muted-foreground italic truncate" title={Array.isArray(idx.columns) ? idx.columns.join(', ') : ''}>
                 {idx.name}
               </span>
             </div>
diff --git a/src/components/schema-explorer/SchemaExplorer.tsx b/src/components/schema-explorer/SchemaExplorer.tsx
index 85b3089..b6ff901 100644
--- a/src/components/schema-explorer/SchemaExplorer.tsx
+++ b/src/components/schema-explorer/SchemaExplorer.tsx
@@ -80,7 +80,7 @@ export function SchemaExplorer({
           <Loader2 className="w-8 h-8 animate-spin text-blue-500/20" />
           <Database className="w-4 h-4 absolute inset-0 m-auto text-blue-500 animate-pulse" />
         </div>
-        <span className="text-[10px] uppercase tracking-[0.2em] font-bold animate-pulse">Scanning Schema...</span>
+        <span className="text-xs uppercase tracking-[0.2em] font-bold animate-pulse">Scanning Schema...</span>
       </div>
     );
   }
@@ -92,7 +92,7 @@ export function SchemaExplorer({
           <AlertCircle className="w-6 h-6 text-muted-foreground" />
         </div>
         <h3 className="text-foreground text-sm font-medium mb-1">No structures found</h3>
-        <p className="text-[11px] text-muted-foreground leading-relaxed">
+        <p className="text-body text-muted-foreground leading-relaxed">
           We couldn&apos;t find any tables or views in this connection.
         </p>
       </div>
@@ -105,7 +105,7 @@ export function SchemaExplorer({
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <Database className="w-3.5 h-3.5 text-blue-500/50" />
-            <span className="text-[10px] font-bold uppercase tracking-[0.15em] text-muted-foreground">
+            <span className="text-xs font-bold uppercase tracking-[0.15em] text-muted-foreground">
               Explorer
             </span>
           </div>
@@ -132,7 +132,7 @@ export function SchemaExplorer({
                 <Plus className="w-3.5 h-3.5" />
               </Button>
             )}
-            <span className="text-[9px] bg-blue-500/10 text-blue-400 px-1.5 py-0.5 rounded-full font-mono border border-blue-500/10">
+            <span className="text-label bg-blue-500/10 text-blue-400 px-1.5 py-0.5 rounded-full font-mono border border-blue-500/10">
               {schema.length}
             </span>
           </div>
@@ -144,7 +144,7 @@ export function SchemaExplorer({
             placeholder={labels?.searchPlaceholder || "Search tables or columns..."}
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="h-8 pl-8 pr-8 text-[12px] bg-muted/50 border-border focus-visible:ring-1 focus-visible:ring-blue-500/50 placeholder:text-muted-foreground/50"
+            className="h-8 pl-8 pr-8 text-data bg-muted/50 border-border focus-visible:ring-1 focus-visible:ring-blue-500/50 placeholder:text-muted-foreground/50"
           />
           {searchQuery && (
             <button
diff --git a/src/components/schema-explorer/TableItem.tsx b/src/components/schema-explorer/TableItem.tsx
index 4825a30..d4f762b 100644
--- a/src/components/schema-explorer/TableItem.tsx
+++ b/src/components/schema-explorer/TableItem.tsx
@@ -156,7 +156,7 @@ export const TableItem = React.memo(function TableItem({
 
             <span
               className={cn(
-                'truncate min-w-0 flex-1 text-[13px] font-medium transition-colors',
+                'truncate min-w-0 flex-1 text-body font-medium transition-colors',
                 isExpanded ? 'text-foreground' : 'text-muted-foreground group-hover:text-foreground'
               )}
             >
@@ -165,7 +165,7 @@ export const TableItem = React.memo(function TableItem({
 
             <div className="shrink-0 relative w-8 h-6 flex items-center justify-center">
               {table.rowCount !== undefined && (
-                <span className="absolute inset-0 flex items-center justify-center text-[9px] font-mono text-muted-foreground/70 whitespace-nowrap opacity-100 group-hover:opacity-0 transition-opacity pointer-events-none">
+                <span className="absolute inset-0 flex items-center justify-center text-label font-mono text-muted-foreground/70 whitespace-nowrap opacity-100 group-hover:opacity-0 transition-opacity pointer-events-none">
                   {table.rowCount >= 1000 ? `${(table.rowCount / 1000).toFixed(1)}k` : table.rowCount}
                 </span>
               )}
diff --git a/src/components/sidebar/ConnectionItem.tsx b/src/components/sidebar/ConnectionItem.tsx
index 08e94e8..63d3980 100644
--- a/src/components/sidebar/ConnectionItem.tsx
+++ b/src/components/sidebar/ConnectionItem.tsx
@@ -49,10 +49,10 @@ export const ConnectionItem = React.memo(function ConnectionItem({
       </div>
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-1.5">
-          <span className="truncate block font-medium text-[13px]">{conn.name}</span>
+          <span className="truncate block font-medium text-body">{conn.name}</span>
           {conn.environment && conn.environment !== 'other' && (
             <span
-              className="text-[8px] uppercase tracking-wider font-bold px-1.5 py-0.5 rounded-sm shrink-0"
+              className="text-micro uppercase tracking-wider font-bold px-1.5 py-0.5 rounded-sm shrink-0"
               style={{
                 color: conn.color || '#6b7280',
                 backgroundColor: `${conn.color || '#6b7280'}15`,
diff --git a/src/components/sidebar/ConnectionsList.tsx b/src/components/sidebar/ConnectionsList.tsx
index c06f70d..8c1d34c 100644
--- a/src/components/sidebar/ConnectionsList.tsx
+++ b/src/components/sidebar/ConnectionsList.tsx
@@ -23,7 +23,7 @@ export function ConnectionsList({
   return (
     <section>
       <div className="px-3 mb-2 flex items-center justify-between">
-        <span className="text-[10px] font-bold uppercase tracking-[0.15em] text-muted-foreground">
+        <span className="text-xs font-bold uppercase tracking-[0.15em] text-muted-foreground">
           Connections
         </span>
         <div className="h-[1px] flex-1 bg-border/30 ml-3" />
@@ -32,13 +32,13 @@ export function ConnectionsList({
       <div className="space-y-0.5">
         {connections.length === 0 ? (
           <div className="px-3 py-6 text-center border border-dashed border-border/50 rounded-lg mx-2">
-            <p className="text-[11px] text-muted-foreground mb-3 leading-relaxed">
+            <p className="text-body text-muted-foreground mb-3 leading-relaxed">
               No database connections established yet.
             </p>
             <Button
               variant="outline"
               size="sm"
-              className="h-7 text-[10px]"
+              className="h-7 text-xs"
               onClick={onAddConnection}
             >
               Add Connection
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 6cacf10..14517b5 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -120,9 +120,9 @@ export function Sidebar({
         <div className="flex items-center justify-between px-2 py-1.5 rounded-lg bg-muted/30 border border-border/50">
           <div className="flex items-center gap-2">
             <div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
-            <span className="text-[10px] font-medium text-muted-foreground">Connected</span>
+            <span className="text-xs font-medium text-muted-foreground">Connected</span>
           </div>
-          <span className="text-[10px] font-mono text-muted-foreground/70">v1.2.5</span>
+          <span className="text-xs font-mono text-muted-foreground/70">v1.2.5</span>
         </div>
       </div>
     </div>
diff --git a/src/components/studio/BottomPanel.tsx b/src/components/studio/BottomPanel.tsx
index 0143120..774a7c8 100644
--- a/src/components/studio/BottomPanel.tsx
+++ b/src/components/studio/BottomPanel.tsx
@@ -55,9 +55,9 @@ function ChartDashboardLazy({ result }: { result: QueryResult | null }) {
           <div key={chart.id} className="bg-[#0d0d0d] border border-white/10 rounded-lg p-3">
             <div className="flex items-center justify-between mb-2">
               <span className="text-xs font-bold text-zinc-300">{chart.name}</span>
-              <span className="text-[10px] text-zinc-600 uppercase">{chart.chartType}</span>
+              <span className="text-xs text-zinc-600 uppercase">{chart.chartType}</span>
             </div>
-            <div className="text-[10px] text-zinc-500">
+            <div className="text-xs text-zinc-500">
               {chart.xAxis && <span>X: {chart.xAxis}</span>}
               {chart.yAxis?.length > 0 && <span className="ml-2">Y: {chart.yAxis.join(', ')}</span>}
             </div>
@@ -66,7 +66,7 @@ function ChartDashboardLazy({ result }: { result: QueryResult | null }) {
                 <DataCharts result={result} />
               </div>
             ) : (
-              <div className="mt-2 h-[100px] flex items-center justify-center text-zinc-600 text-[10px]">
+              <div className="mt-2 h-[100px] flex items-center justify-center text-zinc-600 text-xs">
                 Execute a query to see chart
               </div>
             )}
@@ -161,7 +161,7 @@ export function BottomPanel({
                 if (tab.key === 'nl2sql') onSetIsNL2SQLOpen(true);
               }}
               className={cn(
-                "h-full px-3 text-[10px] font-bold uppercase transition-all border-b-2 flex items-center gap-2",
+                "h-full px-3 text-xs font-bold uppercase transition-all border-b-2 flex items-center gap-2",
                 mode === tab.key
                   ? tab.activeClass
                   : "text-zinc-500 border-transparent hover:text-zinc-300"
@@ -174,12 +174,12 @@ export function BottomPanel({
 
         {currentTab.result && mode === 'results' && (
           <div className="flex items-center gap-1">
-            <span className="text-[10px] font-mono text-zinc-500 mr-2">
+            <span className="text-xs font-mono text-zinc-500 mr-2">
               {currentTab.result.rowCount} rows • {currentTab.result.executionTime}ms
             </span>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="sm" className="h-7 text-[10px] font-bold uppercase text-zinc-500 hover:text-white gap-2">
+                <Button variant="ghost" size="sm" className="h-7 text-xs font-bold uppercase text-zinc-500 hover:text-white gap-2">
                   <Download className="w-3 h-3" /> Export
                 </Button>
               </DropdownMenuTrigger>
@@ -277,7 +277,7 @@ export function BottomPanel({
           <div className="h-full flex flex-col items-center justify-center opacity-20 bg-[#0a0a0a]">
             <Terminal className="w-12 h-12 mb-4" />
             <p className="text-sm font-medium">Execute a query or check history</p>
-            <p className="text-[10px] uppercase tracking-widest mt-2">Ready to query</p>
+            <p className="text-xs uppercase tracking-widest mt-2">Ready to query</p>
           </div>
         )}
       </div>
diff --git a/src/components/studio/QueryToolbar.tsx b/src/components/studio/QueryToolbar.tsx
index 424fbcc..3e7b346 100644
--- a/src/components/studio/QueryToolbar.tsx
+++ b/src/components/studio/QueryToolbar.tsx
@@ -48,7 +48,7 @@ export function QueryToolbar({
       {playgroundMode && (
         <div className="hidden md:flex items-center justify-center gap-2 px-4 py-1 bg-emerald-500/10 border-b border-emerald-500/20 text-emerald-400">
           <FlaskConical className="w-3 h-3" />
-          <span className="text-[10px] font-bold uppercase tracking-widest">
+          <span className="text-xs font-bold uppercase tracking-widest">
             Sandbox Mode — All changes will be auto-rolled back
           </span>
         </div>
@@ -59,13 +59,13 @@ export function QueryToolbar({
         <div className="flex items-center gap-4">
           <div className="flex items-center gap-2 px-2 py-0.5 rounded bg-blue-500/5 border border-blue-500/10">
             <Terminal className="w-3 h-3 text-blue-400" />
-            <span className="text-[10px] font-bold text-blue-400 uppercase tracking-widest">Query</span>
+            <span className="text-xs font-bold text-blue-400 uppercase tracking-widest">Query</span>
           </div>
           <div className="h-4 w-px bg-white/5" />
           <Button
             variant="ghost"
             size="sm"
-            className="h-7 text-[10px] font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-2"
+            className="h-7 text-xs font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-2"
             onClick={onSaveQuery}
           >
             <Save className="w-3 h-3" /> Save
@@ -74,7 +74,7 @@ export function QueryToolbar({
         {isExecuting ? (
           <Button
             size="sm"
-            className="bg-red-600 hover:bg-red-500 text-white font-bold text-[11px] h-7 px-4 gap-2"
+            className="bg-red-600 hover:bg-red-500 text-white font-bold text-body h-7 px-4 gap-2"
             onClick={onCancelQuery}
           >
             <Square className="w-3 h-3 fill-current" />
@@ -83,7 +83,7 @@ export function QueryToolbar({
         ) : (
           <Button
             size="sm"
-            className="bg-blue-600 hover:bg-blue-500 text-white font-bold text-[11px] h-7 px-4 gap-2"
+            className="bg-blue-600 hover:bg-blue-500 text-white font-bold text-body h-7 px-4 gap-2"
             onClick={onExecuteQuery}
             disabled={!activeConnection}
           >
@@ -97,13 +97,13 @@ export function QueryToolbar({
           <div className="flex items-center gap-1 ml-2 pl-2 border-l border-white/10">
             {transactionActive ? (
               <>
-                <span className="text-[9px] font-bold text-amber-400 uppercase tracking-wider px-1.5 py-0.5 bg-amber-500/10 rounded border border-amber-500/20 mr-1">
+                <span className="text-label font-bold text-amber-400 uppercase tracking-wider px-1.5 py-0.5 bg-amber-500/10 rounded border border-amber-500/20 mr-1">
                   TXN
                 </span>
                 <Button
                   size="sm"
                   variant="ghost"
-                  className="h-7 text-[10px] font-bold text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10 gap-1"
+                  className="h-7 text-xs font-bold text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10 gap-1"
                   onClick={onCommitTransaction}
                 >
                   COMMIT
@@ -111,7 +111,7 @@ export function QueryToolbar({
                 <Button
                   size="sm"
                   variant="ghost"
-                  className="h-7 text-[10px] font-bold text-red-400 hover:text-red-300 hover:bg-red-500/10 gap-1"
+                  className="h-7 text-xs font-bold text-red-400 hover:text-red-300 hover:bg-red-500/10 gap-1"
                   onClick={onRollbackTransaction}
                 >
                   ROLLBACK
@@ -121,7 +121,7 @@ export function QueryToolbar({
               <Button
                 size="sm"
                 variant="ghost"
-                className="h-7 text-[10px] font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-1"
+                className="h-7 text-xs font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-1"
                 onClick={onBeginTransaction}
                 disabled={playgroundMode}
               >
@@ -133,7 +133,7 @@ export function QueryToolbar({
               size="sm"
               variant="ghost"
               className={cn(
-                "h-7 text-[10px] font-bold uppercase tracking-widest gap-1",
+                "h-7 text-xs font-bold uppercase tracking-widest gap-1",
                 playgroundMode
                   ? "text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20"
                   : "text-zinc-500 hover:text-white"
@@ -150,7 +150,7 @@ export function QueryToolbar({
               size="sm"
               variant="ghost"
               className={cn(
-                "h-7 text-[10px] font-bold uppercase tracking-widest gap-1",
+                "h-7 text-xs font-bold uppercase tracking-widest gap-1",
                 editingEnabled
                   ? "text-amber-400 bg-amber-500/10 hover:bg-amber-500/20"
                   : "text-zinc-500 hover:text-white"
@@ -165,7 +165,7 @@ export function QueryToolbar({
             <Button
               size="sm"
               variant="ghost"
-              className="h-7 text-[10px] font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-1"
+              className="h-7 text-xs font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-1"
               onClick={onImport}
               title="Import data from CSV/JSON"
             >
diff --git a/src/components/studio/StudioDesktopHeader.tsx b/src/components/studio/StudioDesktopHeader.tsx
index 831dcfe..c2ff57c 100644
--- a/src/components/studio/StudioDesktopHeader.tsx
+++ b/src/components/studio/StudioDesktopHeader.tsx
@@ -39,7 +39,7 @@ export function StudioDesktopHeader({
             {activeConnection ? activeConnection.name : 'Quick Access'}
           </h1>
           {activeConnection && (
-            <p className="text-[10px] text-zinc-500 font-mono uppercase tracking-widest leading-none mt-0.5">
+            <p className="text-xs text-zinc-500 font-mono uppercase tracking-widest leading-none mt-0.5">
               {activeConnection.type}
               {activeConnection.environment && activeConnection.environment !== 'other' && (
                 <span
@@ -66,7 +66,7 @@ export function StudioDesktopHeader({
               connectionPulse === 'degraded' && "bg-amber-500",
               connectionPulse === 'error' && "bg-red-500",
             )} />
-            <span className="text-[10px] font-bold uppercase tracking-widest text-zinc-500">
+            <span className="text-xs font-bold uppercase tracking-widest text-zinc-500">
               {connectionPulse === 'healthy' ? 'Online' : connectionPulse === 'degraded' ? 'Slow' : 'Error'}
             </span>
           </div>
@@ -75,7 +75,7 @@ export function StudioDesktopHeader({
         <Button
           variant="ghost"
           size="sm"
-          className="h-7 px-3 text-[10px] font-bold uppercase tracking-widest gap-2 text-zinc-500 hover:text-purple-400 hover:bg-purple-500/10"
+          className="h-7 px-3 text-xs font-bold uppercase tracking-widest gap-2 text-zinc-500 hover:text-purple-400 hover:bg-purple-500/10"
           onClick={() => router.push('/monitoring')}
         >
           <Gauge className="w-3 h-3" /> Monitoring
@@ -105,7 +105,7 @@ export function StudioDesktopHeader({
           </DropdownMenu>
         )}
         <Settings className="w-4 h-4 text-zinc-400 cursor-pointer hover:text-white transition-colors mx-2" />
-        <span className="text-[10px] text-zinc-500 font-mono">
+        <span className="text-xs text-zinc-500 font-mono">
           v{process.env.NEXT_PUBLIC_APP_VERSION}
         </span>
       </div>
diff --git a/src/components/studio/StudioMobileHeader.tsx b/src/components/studio/StudioMobileHeader.tsx
index fa394a7..92feb3b 100644
--- a/src/components/studio/StudioMobileHeader.tsx
+++ b/src/components/studio/StudioMobileHeader.tsx
@@ -129,7 +129,7 @@ export function StudioMobileHeader({
           </DropdownMenu>
 
           {activeConnection && (
-            <span className="text-[10px] text-emerald-500 font-medium px-1.5 py-0.5 rounded bg-emerald-500/10">
+            <span className="text-xs text-emerald-500 font-medium px-1.5 py-0.5 rounded bg-emerald-500/10">
               Online
             </span>
           )}
@@ -175,7 +175,7 @@ export function StudioMobileHeader({
                   <LogOut className="w-4 h-4 mr-2" /> Logout
                 </DropdownMenuItem>
                 <div className="border-t border-white/5 mt-1 pt-1 px-2 pb-1">
-                  <span className="text-[10px] text-zinc-500 font-mono">v{process.env.NEXT_PUBLIC_APP_VERSION}</span>
+                  <span className="text-xs text-zinc-500 font-mono">v{process.env.NEXT_PUBLIC_APP_VERSION}</span>
                 </div>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -190,7 +190,7 @@ export function StudioMobileHeader({
             <Button
               variant="ghost"
               size="sm"
-              className="h-7 px-2 gap-1 text-[10px] font-bold text-zinc-500 hover:text-blue-400"
+              className="h-7 px-2 gap-1 text-xs font-bold text-zinc-500 hover:text-blue-400"
               onClick={() => queryEditorRef.current?.toggleAi()}
             >
               <Sparkles className="w-3.5 h-3.5" />
@@ -199,7 +199,7 @@ export function StudioMobileHeader({
 
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="sm" className="h-7 px-2 gap-1 text-[10px] text-zinc-500">
+                <Button variant="ghost" size="sm" className="h-7 px-2 gap-1 text-xs text-zinc-500">
                   <MoreVertical className="w-3.5 h-3.5" />
                 </Button>
               </DropdownMenuTrigger>
@@ -246,7 +246,7 @@ export function StudioMobileHeader({
 
                 <DropdownMenuSeparator className="bg-white/5" />
                 <div className="px-2 py-1">
-                  <span className="text-[9px] font-bold text-zinc-600 uppercase tracking-widest">Advanced</span>
+                  <span className="text-label font-bold text-zinc-600 uppercase tracking-widest">Advanced</span>
                 </div>
 
                 {!transactionActive ? (
@@ -302,12 +302,12 @@ export function StudioMobileHeader({
 
             {/* Status badges */}
             {transactionActive && (
-              <span className="text-[9px] font-black text-amber-400 px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/20">
+              <span className="text-label font-black text-amber-400 px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/20">
                 TXN
               </span>
             )}
             {playgroundMode && (
-              <span className="text-[9px] font-black text-purple-400 px-1.5 py-0.5 rounded bg-purple-500/10 border border-purple-500/20">
+              <span className="text-label font-black text-purple-400 px-1.5 py-0.5 rounded bg-purple-500/10 border border-purple-500/20">
                 SANDBOX
               </span>
             )}
@@ -316,7 +316,7 @@ export function StudioMobileHeader({
           {isExecuting ? (
             <Button
               size="sm"
-              className="bg-red-600 hover:bg-red-500 text-white font-bold text-[11px] h-7 px-4 gap-1.5"
+              className="bg-red-600 hover:bg-red-500 text-white font-bold text-body h-7 px-4 gap-1.5"
               onClick={onCancelQuery}
             >
               <Square className="w-3 h-3 fill-current" />
@@ -325,7 +325,7 @@ export function StudioMobileHeader({
           ) : (
             <Button
               size="sm"
-              className="bg-blue-600 hover:bg-blue-500 text-white font-bold text-[11px] h-7 px-4 gap-1.5"
+              className="bg-blue-600 hover:bg-blue-500 text-white font-bold text-body h-7 px-4 gap-1.5"
               onClick={onExecuteQuery}
               disabled={!activeConnection}
             >

From 40c7fe9c298ea0600bdd8b7a7d83fb85afafdf66 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 19:41:07 +0300
Subject: [PATCH 23/39] fix: remove SQL Engine badge overlay from query editor

---
 src/components/QueryEditor.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
index b41f8a4..e8e7238 100644
--- a/src/components/QueryEditor.tsx
+++ b/src/components/QueryEditor.tsx
@@ -743,15 +743,6 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
           options={getEditorOptions(showLineNumbers)}
         />
 
-        {/* Connection Type Badge */}
-        <div className="absolute top-3 right-6 pointer-events-none select-none z-10">
-          <div className="flex items-center gap-2 px-3 py-1 rounded-md bg-zinc-900/90 border border-white/10 backdrop-blur-md shadow-2xl">
-            <div className="w-1.5 h-1.5 rounded-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.5)]" />
-            <span className="text-xs font-bold text-zinc-400 uppercase tracking-widest">
-              {language} Engine
-            </span>
-          </div>
-        </div>
       </div>
     </div>
   );

From 08a80e4440cb71225b3faaf8f81601abf89808c0 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 20:06:46 +0300
Subject: [PATCH 24/39] feat(workspace): implement StudioWorkspace export plan
 and design specification

- Added `tsconfig.lib.json` for library configuration.
- Updated `bun.lock` to include new dependencies and peer dependencies.
- Created documentation for the StudioWorkspace composite export implementation plan and design specification.
- Introduced new types and hooks for workspace management.
- Enhanced global CSS for improved font scaling in the Studio IDE.
- Refactored QueryEditor for better UI consistency and accessibility.

This commit lays the groundwork for exporting the entire Studio workspace as a composite component, facilitating integration with the platform.
---
 bun.lock                                      |  173 +-
 .../2026-03-26-studio-workspace-export.md     | 1482 +++++++++++++++++
 ...26-03-26-studio-workspace-export-design.md |  299 ++++
 src/app/globals.css                           |   14 +
 src/components/QueryEditor.tsx                |   52 +-
 tests/components/QueryEditor.test.tsx         |    9 +-
 tests/components/SnapshotTimeline.test.tsx    |    2 +-
 tsconfig.lib.json                             |   11 +
 8 files changed, 2007 insertions(+), 35 deletions(-)
 create mode 100644 docs/superpowers/plans/2026-03-26-studio-workspace-export.md
 create mode 100644 docs/superpowers/specs/2026-03-26-studio-workspace-export-design.md
 create mode 100644 tsconfig.lib.json

diff --git a/bun.lock b/bun.lock
index 54a7e8f..c6a0611 100644
--- a/bun.lock
+++ b/bun.lock
@@ -91,9 +91,14 @@
         "eslint-config-next": "^16.1.6",
         "happy-dom": "^20.6.1",
         "tailwindcss": "^4",
+        "tsup": "^8.5.1",
         "tw-animate-css": "^1.4.0",
         "typescript": "^5",
       },
+      "peerDependencies": {
+        "react": "^19",
+        "react-dom": "^19",
+      },
     },
   },
   "packages": {
@@ -177,6 +182,58 @@
 
     "@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.1.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ=="],
 
+    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.27.4", "", { "os": "aix", "cpu": "ppc64" }, "sha512-cQPwL2mp2nSmHHJlCyoXgHGhbEPMrEEU5xhkcy3Hs/O7nGZqEpZ2sUtLaL9MORLtDfRvVl2/3PAuEkYZH0Ty8Q=="],
+
+    "@esbuild/android-arm": ["@esbuild/android-arm@0.27.4", "", { "os": "android", "cpu": "arm" }, "sha512-X9bUgvxiC8CHAGKYufLIHGXPJWnr0OCdR0anD2e21vdvgCI8lIfqFbnoeOz7lBjdrAGUhqLZLcQo6MLhTO2DKQ=="],
+
+    "@esbuild/android-arm64": ["@esbuild/android-arm64@0.27.4", "", { "os": "android", "cpu": "arm64" }, "sha512-gdLscB7v75wRfu7QSm/zg6Rx29VLdy9eTr2t44sfTW7CxwAtQghZ4ZnqHk3/ogz7xao0QAgrkradbBzcqFPasw=="],
+
+    "@esbuild/android-x64": ["@esbuild/android-x64@0.27.4", "", { "os": "android", "cpu": "x64" }, "sha512-PzPFnBNVF292sfpfhiyiXCGSn9HZg5BcAz+ivBuSsl6Rk4ga1oEXAamhOXRFyMcjwr2DVtm40G65N3GLeH1Lvw=="],
+
+    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.27.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-b7xaGIwdJlht8ZFCvMkpDN6uiSmnxxK56N2GDTMYPr2/gzvfdQN8rTfBsvVKmIVY/X7EM+/hJKEIbbHs9oA4tQ=="],
+
+    "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.27.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-sR+OiKLwd15nmCdqpXMnuJ9W2kpy0KigzqScqHI3Hqwr7IXxBp3Yva+yJwoqh7rE8V77tdoheRYataNKL4QrPw=="],
+
+    "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.27.4", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-jnfpKe+p79tCnm4GVav68A7tUFeKQwQyLgESwEAUzyxk/TJr4QdGog9sqWNcUbr/bZt/O/HXouspuQDd9JxFSw=="],
+
+    "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.27.4", "", { "os": "freebsd", "cpu": "x64" }, "sha512-2kb4ceA/CpfUrIcTUl1wrP/9ad9Atrp5J94Lq69w7UwOMolPIGrfLSvAKJp0RTvkPPyn6CIWrNy13kyLikZRZQ=="],
+
+    "@esbuild/linux-arm": ["@esbuild/linux-arm@0.27.4", "", { "os": "linux", "cpu": "arm" }, "sha512-aBYgcIxX/wd5n2ys0yESGeYMGF+pv6g0DhZr3G1ZG4jMfruU9Tl1i2Z+Wnj9/KjGz1lTLCcorqE2viePZqj4Eg=="],
+
+    "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.27.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-7nQOttdzVGth1iz57kxg9uCz57dxQLHWxopL6mYuYthohPKEK0vU0C3O21CcBK6KDlkYVcnDXY099HcCDXd9dA=="],
+
+    "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.27.4", "", { "os": "linux", "cpu": "ia32" }, "sha512-oPtixtAIzgvzYcKBQM/qZ3R+9TEUd1aNJQu0HhGyqtx6oS7qTpvjheIWBbes4+qu1bNlo2V4cbkISr8q6gRBFA=="],
+
+    "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.27.4", "", { "os": "linux", "cpu": "none" }, "sha512-8mL/vh8qeCoRcFH2nM8wm5uJP+ZcVYGGayMavi8GmRJjuI3g1v6Z7Ni0JJKAJW+m0EtUuARb6Lmp4hMjzCBWzA=="],
+
+    "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.27.4", "", { "os": "linux", "cpu": "none" }, "sha512-1RdrWFFiiLIW7LQq9Q2NES+HiD4NyT8Itj9AUeCl0IVCA459WnPhREKgwrpaIfTOe+/2rdntisegiPWn/r/aAw=="],
+
+    "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.27.4", "", { "os": "linux", "cpu": "ppc64" }, "sha512-tLCwNG47l3sd9lpfyx9LAGEGItCUeRCWeAx6x2Jmbav65nAwoPXfewtAdtbtit/pJFLUWOhpv0FpS6GQAmPrHA=="],
+
+    "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.27.4", "", { "os": "linux", "cpu": "none" }, "sha512-BnASypppbUWyqjd1KIpU4AUBiIhVr6YlHx/cnPgqEkNoVOhHg+YiSVxM1RLfiy4t9cAulbRGTNCKOcqHrEQLIw=="],
+
+    "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.27.4", "", { "os": "linux", "cpu": "s390x" }, "sha512-+eUqgb/Z7vxVLezG8bVB9SfBie89gMueS+I0xYh2tJdw3vqA/0ImZJ2ROeWwVJN59ihBeZ7Tu92dF/5dy5FttA=="],
+
+    "@esbuild/linux-x64": ["@esbuild/linux-x64@0.27.4", "", { "os": "linux", "cpu": "x64" }, "sha512-S5qOXrKV8BQEzJPVxAwnryi2+Iq5pB40gTEIT69BQONqR7JH1EPIcQ/Uiv9mCnn05jff9umq/5nqzxlqTOg9NA=="],
+
+    "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.27.4", "", { "os": "none", "cpu": "arm64" }, "sha512-xHT8X4sb0GS8qTqiwzHqpY00C95DPAq7nAwX35Ie/s+LO9830hrMd3oX0ZMKLvy7vsonee73x0lmcdOVXFzd6Q=="],
+
+    "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.27.4", "", { "os": "none", "cpu": "x64" }, "sha512-RugOvOdXfdyi5Tyv40kgQnI0byv66BFgAqjdgtAKqHoZTbTF2QqfQrFwa7cHEORJf6X2ht+l9ABLMP0dnKYsgg=="],
+
+    "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.27.4", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-2MyL3IAaTX+1/qP0O1SwskwcwCoOI4kV2IBX1xYnDDqthmq5ArrW94qSIKCAuRraMgPOmG0RDTA74mzYNQA9ow=="],
+
+    "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.27.4", "", { "os": "openbsd", "cpu": "x64" }, "sha512-u8fg/jQ5aQDfsnIV6+KwLOf1CmJnfu1ShpwqdwC0uA7ZPwFws55Ngc12vBdeUdnuWoQYx/SOQLGDcdlfXhYmXQ=="],
+
+    "@esbuild/openharmony-arm64": ["@esbuild/openharmony-arm64@0.27.4", "", { "os": "none", "cpu": "arm64" }, "sha512-JkTZrl6VbyO8lDQO3yv26nNr2RM2yZzNrNHEsj9bm6dOwwu9OYN28CjzZkH57bh4w0I2F7IodpQvUAEd1mbWXg=="],
+
+    "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.27.4", "", { "os": "sunos", "cpu": "x64" }, "sha512-/gOzgaewZJfeJTlsWhvUEmUG4tWEY2Spp5M20INYRg2ZKl9QPO3QEEgPeRtLjEWSW8FilRNacPOg8R1uaYkA6g=="],
+
+    "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.27.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-Z9SExBg2y32smoDQdf1HRwHRt6vAHLXcxD2uGgO/v2jK7Y718Ix4ndsbNMU/+1Qiem9OiOdaqitioZwxivhXYg=="],
+
+    "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.27.4", "", { "os": "win32", "cpu": "ia32" }, "sha512-DAyGLS0Jz5G5iixEbMHi5KdiApqHBWMGzTtMiJ72ZOLhbu/bzxgAe8Ue8CTS3n3HbIUHQz/L51yMdGMeoxXNJw=="],
+
+    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.27.4", "", { "os": "win32", "cpu": "x64" }, "sha512-+knoa0BDoeXgkNvvV1vvbZX4+hizelrkwmGJBdT17t8FNPwG2lKemmuMZlmaNQ3ws3DKKCxpb4zRZEIp3UxFCg=="],
+
     "@eslint-community/eslint-utils": ["@eslint-community/eslint-utils@4.9.0", "", { "dependencies": { "eslint-visitor-keys": "^3.4.3" }, "peerDependencies": { "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g=="],
 
     "@eslint-community/regexpp": ["@eslint-community/regexpp@4.12.2", "", {}, "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew=="],
@@ -425,6 +482,56 @@
 
     "@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
 
+    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.60.0", "", { "os": "android", "cpu": "arm" }, "sha512-WOhNW9K8bR3kf4zLxbfg6Pxu2ybOUbB2AjMDHSQx86LIF4rH4Ft7vmMwNt0loO0eonglSNy4cpD3MKXXKQu0/A=="],
+
+    "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.60.0", "", { "os": "android", "cpu": "arm64" }, "sha512-u6JHLll5QKRvjciE78bQXDmqRqNs5M/3GVqZeMwvmjaNODJih/WIrJlFVEihvV0MiYFmd+ZyPr9wxOVbPAG2Iw=="],
+
+    "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.60.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-qEF7CsKKzSRc20Ciu2Zw1wRrBz4g56F7r/vRwY430UPp/nt1x21Q/fpJ9N5l47WWvJlkNCPJz3QRVw008fi7yA=="],
+
+    "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.60.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-WADYozJ4QCnXCH4wPB+3FuGmDPoFseVCUrANmA5LWwGmC6FL14BWC7pcq+FstOZv3baGX65tZ378uT6WG8ynTw=="],
+
+    "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.60.0", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-6b8wGHJlDrGeSE3aH5mGNHBjA0TTkxdoNHik5EkvPHCt351XnigA4pS7Wsj/Eo9Y8RBU6f35cjN9SYmCFBtzxw=="],
+
+    "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.60.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-h25Ga0t4jaylMB8M/JKAyrvvfxGRjnPQIR8lnCayyzEjEOx2EJIlIiMbhpWxDRKGKF8jbNH01NnN663dH638mA=="],
+
+    "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.60.0", "", { "os": "linux", "cpu": "arm" }, "sha512-RzeBwv0B3qtVBWtcuABtSuCzToo2IEAIQrcyB/b2zMvBWVbjo8bZDjACUpnaafaxhTw2W+imQbP2BD1usasK4g=="],
+
+    "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.60.0", "", { "os": "linux", "cpu": "arm" }, "sha512-Sf7zusNI2CIU1HLzuu9Tc5YGAHEZs5Lu7N1ssJG4Tkw6e0MEsN7NdjUDDfGNHy2IU+ENyWT+L2obgWiguWibWQ=="],
+
+    "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.60.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-DX2x7CMcrJzsE91q7/O02IJQ5/aLkVtYFryqCjduJhUfGKG6yJV8hxaw8pZa93lLEpPTP/ohdN4wFz7yp/ry9A=="],
+
+    "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.60.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-09EL+yFVbJZlhcQfShpswwRZ0Rg+z/CsSELFCnPt3iK+iqwGsI4zht3secj5vLEs957QvFFXnzAT0FFPIxSrkQ=="],
+
+    "@rollup/rollup-linux-loong64-gnu": ["@rollup/rollup-linux-loong64-gnu@4.60.0", "", { "os": "linux", "cpu": "none" }, "sha512-i9IcCMPr3EXm8EQg5jnja0Zyc1iFxJjZWlb4wr7U2Wx/GrddOuEafxRdMPRYVaXjgbhvqalp6np07hN1w9kAKw=="],
+
+    "@rollup/rollup-linux-loong64-musl": ["@rollup/rollup-linux-loong64-musl@4.60.0", "", { "os": "linux", "cpu": "none" }, "sha512-DGzdJK9kyJ+B78MCkWeGnpXJ91tK/iKA6HwHxF4TAlPIY7GXEvMe8hBFRgdrR9Ly4qebR/7gfUs9y2IoaVEyog=="],
+
+    "@rollup/rollup-linux-ppc64-gnu": ["@rollup/rollup-linux-ppc64-gnu@4.60.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-RwpnLsqC8qbS8z1H1AxBA1H6qknR4YpPR9w2XX0vo2Sz10miu57PkNcnHVaZkbqyw/kUWfKMI73jhmfi9BRMUQ=="],
+
+    "@rollup/rollup-linux-ppc64-musl": ["@rollup/rollup-linux-ppc64-musl@4.60.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-Z8pPf54Ly3aqtdWC3G4rFigZgNvd+qJlOE52fmko3KST9SoGfAdSRCwyoyG05q1HrrAblLbk1/PSIV+80/pxLg=="],
+
+    "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.60.0", "", { "os": "linux", "cpu": "none" }, "sha512-3a3qQustp3COCGvnP4SvrMHnPQ9d1vzCakQVRTliaz8cIp/wULGjiGpbcqrkv0WrHTEp8bQD/B3HBjzujVWLOA=="],
+
+    "@rollup/rollup-linux-riscv64-musl": ["@rollup/rollup-linux-riscv64-musl@4.60.0", "", { "os": "linux", "cpu": "none" }, "sha512-pjZDsVH/1VsghMJ2/kAaxt6dL0psT6ZexQVrijczOf+PeP2BUqTHYejk3l6TlPRydggINOeNRhvpLa0AYpCWSQ=="],
+
+    "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.60.0", "", { "os": "linux", "cpu": "s390x" }, "sha512-3ObQs0BhvPgiUVZrN7gqCSvmFuMWvWvsjG5ayJ3Lraqv+2KhOsp+pUbigqbeWqueGIsnn+09HBw27rJ+gYK4VQ=="],
+
+    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.60.0", "", { "os": "linux", "cpu": "x64" }, "sha512-EtylprDtQPdS5rXvAayrNDYoJhIz1/vzN2fEubo3yLE7tfAw+948dO0g4M0vkTVFhKojnF+n6C8bDNe+gDRdTg=="],
+
+    "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.60.0", "", { "os": "linux", "cpu": "x64" }, "sha512-k09oiRCi/bHU9UVFqD17r3eJR9bn03TyKraCrlz5ULFJGdJGi7VOmm9jl44vOJvRJ6P7WuBi/s2A97LxxHGIdw=="],
+
+    "@rollup/rollup-openbsd-x64": ["@rollup/rollup-openbsd-x64@4.60.0", "", { "os": "openbsd", "cpu": "x64" }, "sha512-1o/0/pIhozoSaDJoDcec+IVLbnRtQmHwPV730+AOD29lHEEo4F5BEUB24H0OBdhbBBDwIOSuf7vgg0Ywxdfiiw=="],
+
+    "@rollup/rollup-openharmony-arm64": ["@rollup/rollup-openharmony-arm64@4.60.0", "", { "os": "none", "cpu": "arm64" }, "sha512-pESDkos/PDzYwtyzB5p/UoNU/8fJo68vcXM9ZW2V0kjYayj1KaaUfi1NmTUTUpMn4UhU4gTuK8gIaFO4UGuMbA=="],
+
+    "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.60.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-hj1wFStD7B1YBeYmvY+lWXZ7ey73YGPcViMShYikqKT1GtstIKQAtfUI6yrzPjAy/O7pO0VLXGmUVWXQMaYgTQ=="],
+
+    "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.60.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-SyaIPFoxmUPlNDq5EHkTbiKzmSEmq/gOYFI/3HHJ8iS/v1mbugVa7dXUzcJGQfoytp9DJFLhHH4U3/eTy2Bq4w=="],
+
+    "@rollup/rollup-win32-x64-gnu": ["@rollup/rollup-win32-x64-gnu@4.60.0", "", { "os": "win32", "cpu": "x64" }, "sha512-RdcryEfzZr+lAr5kRm2ucN9aVlCCa2QNq4hXelZxb8GG0NJSazq44Z3PCCc8wISRuCVnGs0lQJVX5Vp6fKA+IA=="],
+
+    "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.60.0", "", { "os": "win32", "cpu": "x64" }, "sha512-PrsWNQ8BuE00O3Xsx3ALh2Df8fAj9+cvvX9AIA6o4KpATR98c9mud4XtDWVvsEuyia5U4tVSTKygawyJkjm60w=="],
+
     "@rtsao/scc": ["@rtsao/scc@1.1.0", "", {}, "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g=="],
 
     "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
@@ -619,6 +726,8 @@
 
     "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
 
+    "any-promise": ["any-promise@1.3.0", "", {}, "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="],
+
     "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
 
     "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],
@@ -689,6 +798,10 @@
 
     "bundle-name": ["bundle-name@4.1.0", "", { "dependencies": { "run-applescript": "^7.0.0" } }, "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q=="],
 
+    "bundle-require": ["bundle-require@5.1.0", "", { "dependencies": { "load-tsconfig": "^0.2.3" }, "peerDependencies": { "esbuild": ">=0.18" } }, "sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA=="],
+
+    "cac": ["cac@6.7.14", "", {}, "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ=="],
+
     "call-bind": ["call-bind@1.0.8", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.0", "es-define-property": "^1.0.0", "get-intrinsic": "^1.2.4", "set-function-length": "^1.2.2" } }, "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww=="],
 
     "call-bind-apply-helpers": ["call-bind-apply-helpers@1.0.2", "", { "dependencies": { "es-errors": "^1.3.0", "function-bind": "^1.1.2" } }, "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ=="],
@@ -701,6 +814,8 @@
 
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
+    "chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="],
+
     "chownr": ["chownr@1.1.4", "", {}, "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="],
 
     "class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
@@ -723,6 +838,10 @@
 
     "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="],
 
+    "confbox": ["confbox@0.1.8", "", {}, "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w=="],
+
+    "consola": ["consola@3.4.2", "", {}, "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA=="],
+
     "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
 
     "cpu-features": ["cpu-features@0.0.10", "", { "dependencies": { "buildcheck": "~0.0.6", "nan": "^2.19.0" } }, "sha512-9IkYqtX3YHPCzoVg1Py+o9057a3i0fp7S530UWokCSaFVTc7CwXPRiOjRjBQQ18ZCNafx78YfnG+HALxtVmOGA=="],
@@ -855,6 +974,8 @@
 
     "es-to-primitive": ["es-to-primitive@1.3.0", "", { "dependencies": { "is-callable": "^1.2.7", "is-date-object": "^1.0.5", "is-symbol": "^1.0.4" } }, "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g=="],
 
+    "esbuild": ["esbuild@0.27.4", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.4", "@esbuild/android-arm": "0.27.4", "@esbuild/android-arm64": "0.27.4", "@esbuild/android-x64": "0.27.4", "@esbuild/darwin-arm64": "0.27.4", "@esbuild/darwin-x64": "0.27.4", "@esbuild/freebsd-arm64": "0.27.4", "@esbuild/freebsd-x64": "0.27.4", "@esbuild/linux-arm": "0.27.4", "@esbuild/linux-arm64": "0.27.4", "@esbuild/linux-ia32": "0.27.4", "@esbuild/linux-loong64": "0.27.4", "@esbuild/linux-mips64el": "0.27.4", "@esbuild/linux-ppc64": "0.27.4", "@esbuild/linux-riscv64": "0.27.4", "@esbuild/linux-s390x": "0.27.4", "@esbuild/linux-x64": "0.27.4", "@esbuild/netbsd-arm64": "0.27.4", "@esbuild/netbsd-x64": "0.27.4", "@esbuild/openbsd-arm64": "0.27.4", "@esbuild/openbsd-x64": "0.27.4", "@esbuild/openharmony-arm64": "0.27.4", "@esbuild/sunos-x64": "0.27.4", "@esbuild/win32-arm64": "0.27.4", "@esbuild/win32-ia32": "0.27.4", "@esbuild/win32-x64": "0.27.4" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-Rq4vbHnYkK5fws5NF7MYTU68FPRE1ajX7heQ/8QXXWqNgqqJ/GkmmyxIzUnf2Sr/bakf8l54716CcMGHYhMrrQ=="],
+
     "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
 
     "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
@@ -921,6 +1042,8 @@
 
     "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
 
+    "fix-dts-default-cjs-exports": ["fix-dts-default-cjs-exports@1.0.1", "", { "dependencies": { "magic-string": "^0.30.17", "mlly": "^1.7.4", "rollup": "^4.34.8" } }, "sha512-pVIECanWFC61Hzl2+oOCtoJ3F17kglZC/6N94eRWycFgBH35hHx0Li604ZIzhseh97mf2p0cv7vVrOZGoqhlEg=="],
+
     "flat-cache": ["flat-cache@4.0.1", "", { "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.4" } }, "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw=="],
 
     "flatted": ["flatted@3.3.3", "", {}, "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg=="],
@@ -1087,6 +1210,8 @@
 
     "jose": ["jose@6.1.3", "", {}, "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ=="],
 
+    "joycon": ["joycon@3.1.1", "", {}, "sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw=="],
+
     "js-md4": ["js-md4@0.3.2", "", {}, "sha512-/GDnfQYsltsjRswQhN9fhv3EMw2sCpUdrdxyWDOUK7eyD++r3gRhzgiQgc/x4MAv2i1iuQ4lxO5mvqM3vj4bwA=="],
 
     "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
@@ -1143,6 +1268,12 @@
 
     "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.2", "", { "os": "win32", "cpu": "x64" }, "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw=="],
 
+    "lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="],
+
+    "lines-and-columns": ["lines-and-columns@1.2.4", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],
+
+    "load-tsconfig": ["load-tsconfig@0.2.5", "", {}, "sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg=="],
+
     "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
 
     "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
@@ -1201,6 +1332,8 @@
 
     "mkdirp-classic": ["mkdirp-classic@0.5.3", "", {}, "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A=="],
 
+    "mlly": ["mlly@1.8.2", "", { "dependencies": { "acorn": "^8.16.0", "pathe": "^2.0.3", "pkg-types": "^1.3.1", "ufo": "^1.6.3" } }, "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA=="],
+
     "monaco-editor": ["monaco-editor@0.55.1", "", { "dependencies": { "dompurify": "3.2.7", "marked": "14.0.0" } }, "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A=="],
 
     "mongodb": ["mongodb@7.0.0", "", { "dependencies": { "@mongodb-js/saslprep": "^1.3.0", "bson": "^7.0.0", "mongodb-connection-string-url": "^7.0.0" }, "peerDependencies": { "@aws-sdk/credential-providers": "^3.806.0", "@mongodb-js/zstd": "^7.0.0", "gcp-metadata": "^7.0.1", "kerberos": "^7.0.0", "mongodb-client-encryption": ">=7.0.0 <7.1.0", "snappy": "^7.3.2", "socks": "^2.8.6" }, "optionalPeers": ["@aws-sdk/credential-providers", "@mongodb-js/zstd", "gcp-metadata", "kerberos", "mongodb-client-encryption", "snappy", "socks"] }, "sha512-vG/A5cQrvGGvZm2mTnCSz1LUcbOPl83hfB6bxULKQ8oFZauyox/2xbZOoGNl+64m8VBrETkdGCDBdOsCr3F3jg=="],
@@ -1219,6 +1352,8 @@
 
     "mysql2": ["mysql2@3.16.0", "", { "dependencies": { "aws-ssl-profiles": "^1.1.1", "denque": "^2.1.0", "generate-function": "^2.3.1", "iconv-lite": "^0.7.0", "long": "^5.2.1", "lru.min": "^1.0.0", "named-placeholders": "^1.1.3", "seq-queue": "^0.0.5", "sqlstring": "^2.3.2" } }, "sha512-AEGW7QLLSuSnjCS4pk3EIqOmogegmze9h8EyrndavUQnIUcfkVal/sK7QznE+a3bc6rzPbAiui9Jcb+96tPwYA=="],
 
+    "mz": ["mz@2.7.0", "", { "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", "thenify-all": "^1.0.0" } }, "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q=="],
+
     "named-placeholders": ["named-placeholders@1.1.6", "", { "dependencies": { "lru.min": "^1.1.0" } }, "sha512-Tz09sEL2EEuv5fFowm419c1+a/jSMiBjI9gHxVLrVdbUkkNUUfjsVYs9pVZu5oCon/kmRh9TfLEObFtkVxmY0w=="],
 
     "nan": ["nan@2.25.0", "", {}, "sha512-0M90Ag7Xn5KMLLZ7zliPWP3rT90P6PN+IzVFS0VqmnPktBk3700xUVv8Ikm9EUaUE5SDWdp/BIxdENzVznpm1g=="],
@@ -1285,6 +1420,8 @@
 
     "path-parse": ["path-parse@1.0.7", "", {}, "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="],
 
+    "pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
+
     "pg": ["pg@8.16.3", "", { "dependencies": { "pg-connection-string": "^2.9.1", "pg-pool": "^3.10.1", "pg-protocol": "^1.10.3", "pg-types": "2.2.0", "pgpass": "1.0.5" }, "optionalDependencies": { "pg-cloudflare": "^1.2.7" }, "peerDependencies": { "pg-native": ">=3.0.1" }, "optionalPeers": ["pg-native"] }, "sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw=="],
 
     "pg-cloudflare": ["pg-cloudflare@1.2.7", "", {}, "sha512-YgCtzMH0ptvZJslLM1ffsY4EuGaU0cx4XSdXLRFae8bPP4dS5xL1tNB3k2o/N64cHJpwU7dxKli/nZ2lUa5fLg=="],
@@ -1305,6 +1442,10 @@
 
     "picomatch": ["picomatch@4.0.3", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="],
 
+    "pirates": ["pirates@4.0.7", "", {}, "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA=="],
+
+    "pkg-types": ["pkg-types@1.3.1", "", { "dependencies": { "confbox": "^0.1.8", "mlly": "^1.7.4", "pathe": "^2.0.1" } }, "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ=="],
+
     "playwright": ["playwright@1.58.2", "", { "dependencies": { "playwright-core": "1.58.2" }, "optionalDependencies": { "fsevents": "2.3.2" }, "bin": { "playwright": "cli.js" } }, "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A=="],
 
     "playwright-core": ["playwright-core@1.58.2", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg=="],
@@ -1313,6 +1454,8 @@
 
     "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
 
+    "postcss-load-config": ["postcss-load-config@6.0.1", "", { "dependencies": { "lilconfig": "^3.1.1" }, "peerDependencies": { "jiti": ">=1.21.0", "postcss": ">=8.0.9", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["jiti", "postcss", "tsx", "yaml"] }, "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g=="],
+
     "postgres-array": ["postgres-array@2.0.0", "", {}, "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA=="],
 
     "postgres-bytea": ["postgres-bytea@1.0.1", "", {}, "sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ=="],
@@ -1367,6 +1510,8 @@
 
     "readable-stream": ["readable-stream@4.7.0", "", { "dependencies": { "abort-controller": "^3.0.0", "buffer": "^6.0.3", "events": "^3.3.0", "process": "^0.11.10", "string_decoder": "^1.3.0" } }, "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg=="],
 
+    "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
+
     "recharts": ["recharts@2.15.4", "", { "dependencies": { "clsx": "^2.0.0", "eventemitter3": "^4.0.1", "lodash": "^4.17.21", "react-is": "^18.3.1", "react-smooth": "^4.0.4", "recharts-scale": "^0.4.4", "tiny-invariant": "^1.3.1", "victory-vendor": "^36.6.8" }, "peerDependencies": { "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw=="],
 
     "recharts-scale": ["recharts-scale@0.4.5", "", { "dependencies": { "decimal.js-light": "^2.4.1" } }, "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w=="],
@@ -1383,7 +1528,7 @@
 
     "resolve": ["resolve@1.22.11", "", { "dependencies": { "is-core-module": "^2.16.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ=="],
 
-    "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
+    "resolve-from": ["resolve-from@5.0.0", "", {}, "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="],
 
     "resolve-pkg-maps": ["resolve-pkg-maps@1.0.0", "", {}, "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw=="],
 
@@ -1391,6 +1536,8 @@
 
     "reusify": ["reusify@1.1.0", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],
 
+    "rollup": ["rollup@4.60.0", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.60.0", "@rollup/rollup-android-arm64": "4.60.0", "@rollup/rollup-darwin-arm64": "4.60.0", "@rollup/rollup-darwin-x64": "4.60.0", "@rollup/rollup-freebsd-arm64": "4.60.0", "@rollup/rollup-freebsd-x64": "4.60.0", "@rollup/rollup-linux-arm-gnueabihf": "4.60.0", "@rollup/rollup-linux-arm-musleabihf": "4.60.0", "@rollup/rollup-linux-arm64-gnu": "4.60.0", "@rollup/rollup-linux-arm64-musl": "4.60.0", "@rollup/rollup-linux-loong64-gnu": "4.60.0", "@rollup/rollup-linux-loong64-musl": "4.60.0", "@rollup/rollup-linux-ppc64-gnu": "4.60.0", "@rollup/rollup-linux-ppc64-musl": "4.60.0", "@rollup/rollup-linux-riscv64-gnu": "4.60.0", "@rollup/rollup-linux-riscv64-musl": "4.60.0", "@rollup/rollup-linux-s390x-gnu": "4.60.0", "@rollup/rollup-linux-x64-gnu": "4.60.0", "@rollup/rollup-linux-x64-musl": "4.60.0", "@rollup/rollup-openbsd-x64": "4.60.0", "@rollup/rollup-openharmony-arm64": "4.60.0", "@rollup/rollup-win32-arm64-msvc": "4.60.0", "@rollup/rollup-win32-ia32-msvc": "4.60.0", "@rollup/rollup-win32-x64-gnu": "4.60.0", "@rollup/rollup-win32-x64-msvc": "4.60.0", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-yqjxruMGBQJ2gG4HtjZtAfXArHomazDHoFwFFmZZl0r7Pdo7qCIXKqKHZc8yeoMgzJJ+pO6pEEHa+V7uzWlrAQ=="],
+
     "run-applescript": ["run-applescript@7.1.0", "", {}, "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q=="],
 
     "run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
@@ -1437,6 +1584,8 @@
 
     "sonner": ["sonner@2.0.7", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w=="],
 
+    "source-map": ["source-map@0.7.6", "", {}, "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ=="],
+
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
     "sparse-bitfield": ["sparse-bitfield@3.0.3", "", { "dependencies": { "memory-pager": "^1.0.2" } }, "sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ=="],
@@ -1481,6 +1630,8 @@
 
     "styled-jsx": ["styled-jsx@5.1.6", "", { "dependencies": { "client-only": "0.0.1" }, "peerDependencies": { "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0" } }, "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA=="],
 
+    "sucrase": ["sucrase@3.35.1", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.2", "commander": "^4.0.0", "lines-and-columns": "^1.1.6", "mz": "^2.7.0", "pirates": "^4.0.1", "tinyglobby": "^0.2.11", "ts-interface-checker": "^0.1.9" }, "bin": { "sucrase": "bin/sucrase", "sucrase-node": "bin/sucrase-node" } }, "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw=="],
+
     "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
 
     "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
@@ -1501,20 +1652,32 @@
 
     "text-segmentation": ["text-segmentation@1.0.3", "", { "dependencies": { "utrie": "^1.0.2" } }, "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw=="],
 
+    "thenify": ["thenify@3.3.1", "", { "dependencies": { "any-promise": "^1.0.0" } }, "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw=="],
+
+    "thenify-all": ["thenify-all@1.6.0", "", { "dependencies": { "thenify": ">= 3.1.0 < 4" } }, "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA=="],
+
     "tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
 
+    "tinyexec": ["tinyexec@0.3.2", "", {}, "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA=="],
+
     "tinyglobby": ["tinyglobby@0.2.15", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.3" } }, "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ=="],
 
     "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
 
     "tr46": ["tr46@5.1.1", "", { "dependencies": { "punycode": "^2.3.1" } }, "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw=="],
 
+    "tree-kill": ["tree-kill@1.2.2", "", { "bin": { "tree-kill": "cli.js" } }, "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A=="],
+
     "ts-api-utils": ["ts-api-utils@2.4.0", "", { "peerDependencies": { "typescript": ">=4.8.4" } }, "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA=="],
 
+    "ts-interface-checker": ["ts-interface-checker@0.1.13", "", {}, "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="],
+
     "tsconfig-paths": ["tsconfig-paths@3.15.0", "", { "dependencies": { "@types/json5": "^0.0.29", "json5": "^1.0.2", "minimist": "^1.2.6", "strip-bom": "^3.0.0" } }, "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg=="],
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "tsup": ["tsup@8.5.1", "", { "dependencies": { "bundle-require": "^5.1.0", "cac": "^6.7.14", "chokidar": "^4.0.3", "consola": "^3.4.0", "debug": "^4.4.0", "esbuild": "^0.27.0", "fix-dts-default-cjs-exports": "^1.0.0", "joycon": "^3.1.1", "picocolors": "^1.1.1", "postcss-load-config": "^6.0.1", "resolve-from": "^5.0.0", "rollup": "^4.34.8", "source-map": "^0.7.6", "sucrase": "^3.35.0", "tinyexec": "^0.3.2", "tinyglobby": "^0.2.11", "tree-kill": "^1.2.2" }, "peerDependencies": { "@microsoft/api-extractor": "^7.36.0", "@swc/core": "^1", "postcss": "^8.4.12", "typescript": ">=4.5.0" }, "optionalPeers": ["@microsoft/api-extractor", "@swc/core", "postcss", "typescript"], "bin": { "tsup": "dist/cli-default.js", "tsup-node": "dist/cli-node.js" } }, "sha512-xtgkqwdhpKWr3tKPmCkvYmS9xnQK3m3XgxZHwSUjvfTjp7YfXe5tT3GgWi0F2N+ZSMsOeWeZFh7ZZFg5iPhing=="],
+
     "tunnel-agent": ["tunnel-agent@0.6.0", "", { "dependencies": { "safe-buffer": "^5.0.1" } }, "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w=="],
 
     "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
@@ -1535,6 +1698,8 @@
 
     "typescript-eslint": ["typescript-eslint@8.56.1", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.56.1", "@typescript-eslint/parser": "8.56.1", "@typescript-eslint/typescript-estree": "8.56.1", "@typescript-eslint/utils": "8.56.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-U4lM6pjmBX7J5wk4szltF7I1cGBHXZopnAXCMXb3+fZ3B/0Z3hq3wS/CCUB2NZBNAExK92mCU2tEohWuwVMsDQ=="],
 
+    "ufo": ["ufo@1.6.3", "", {}, "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q=="],
+
     "unbox-primitive": ["unbox-primitive@1.1.0", "", { "dependencies": { "call-bound": "^1.0.3", "has-bigints": "^1.0.2", "has-symbols": "^1.1.0", "which-boxed-primitive": "^1.1.1" } }, "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw=="],
 
     "undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
@@ -1675,12 +1840,16 @@
 
     "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
+    "import-fresh/resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
+
     "is-bun-module/semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
 
     "jsonwebtoken/semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
 
     "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
 
+    "mlly/acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
+
     "nearley/commander": ["commander@2.20.3", "", {}, "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="],
 
     "next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
@@ -1697,6 +1866,8 @@
 
     "sharp/semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
 
+    "sucrase/commander": ["commander@4.1.1", "", {}, "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="],
+
     "tar-stream/bl": ["bl@4.1.0", "", { "dependencies": { "buffer": "^5.5.0", "inherits": "^2.0.4", "readable-stream": "^3.4.0" } }, "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w=="],
 
     "tar-stream/readable-stream": ["readable-stream@3.6.2", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="],
diff --git a/docs/superpowers/plans/2026-03-26-studio-workspace-export.md b/docs/superpowers/plans/2026-03-26-studio-workspace-export.md
new file mode 100644
index 0000000..0d116f5
--- /dev/null
+++ b/docs/superpowers/plans/2026-03-26-studio-workspace-export.md
@@ -0,0 +1,1482 @@
+# StudioWorkspace Composite Export — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Export the entire Studio workspace as a single `<StudioWorkspace />` composite component that platform can import with callback props, giving it the full IDE experience without rebuilding the orchestration layer.
+
+**Architecture:** Adapter pattern — create new hooks (`useConnectionAdapter`, `useQueryAdapter`) that have the same return shape as the original hooks but delegate data operations to callback props instead of internal API routes. StudioWorkspace.tsx composes these adapters with existing UI components (QueryEditor, ResultsGrid, BottomPanel, etc.) to provide the full workspace.
+
+**Tech Stack:** React 19, TypeScript (strict), tsup (build), bun:test + @testing-library/react (tests)
+
+**Spec:** `docs/superpowers/specs/2026-03-26-studio-workspace-export-design.md`
+
+---
+
+### Task 1: Workspace Types
+
+**Files:**
+- Create: `src/workspace/types.ts`
+
+- [ ] **Step 1: Create workspace types file**
+
+```typescript
+// src/workspace/types.ts
+import type { DatabaseType, TableSchema, QueryResult, SavedQuery } from '@/lib/types';
+
+// === Connection (platform → studio) ===
+
+export interface WorkspaceConnection {
+  id: string;
+  name: string;
+  type: DatabaseType;
+}
+
+// === User (platform → studio) ===
+
+export interface WorkspaceUser {
+  id: string;
+  name?: string;
+  role?: string;
+}
+
+// === Query result (studio ← platform) ===
+
+export interface WorkspaceQueryResult {
+  rows: Record<string, unknown>[];
+  fields: string[];
+  columns?: { name: string; type?: string }[];
+  rowCount: number;
+  executionTime: number;
+  pagination?: {
+    limit: number;
+    offset: number;
+    hasMore: boolean;
+    totalReturned: number;
+    wasLimited: boolean;
+  };
+}
+
+// === Feature flags ===
+
+export interface WorkspaceFeatures {
+  ai?: boolean;
+  charts?: boolean;
+  codeGenerator?: boolean;
+  testDataGenerator?: boolean;
+  schemaDiagram?: boolean;
+  dataImport?: boolean;
+  inlineEditing?: boolean;
+  transactions?: boolean;
+  connectionManagement?: boolean;
+  dataMasking?: boolean;
+}
+
+export const DEFAULT_WORKSPACE_FEATURES: Required<WorkspaceFeatures> = {
+  ai: false,
+  charts: true,
+  codeGenerator: true,
+  testDataGenerator: true,
+  schemaDiagram: true,
+  dataImport: true,
+  inlineEditing: false,
+  transactions: false,
+  connectionManagement: false,
+  dataMasking: false,
+};
+
+// === Saved query input ===
+
+export interface SavedQueryInput {
+  name: string;
+  query: string;
+  description?: string;
+  connectionType?: string;
+  tags?: string[];
+}
+
+// === Main props ===
+
+export interface StudioWorkspaceProps {
+  connections: WorkspaceConnection[];
+  currentUser?: WorkspaceUser;
+
+  onQueryExecute: (connectionId: string, sql: string, options?: {
+    limit?: number;
+    offset?: number;
+    unlimited?: boolean;
+  }) => Promise<WorkspaceQueryResult>;
+  onSchemaFetch: (connectionId: string) => Promise<TableSchema[]>;
+
+  onTestConnection?: (config: {
+    type: DatabaseType;
+    host: string;
+    port: number;
+    database: string;
+    username: string;
+    password: string;
+    sslEnabled?: boolean;
+  }) => Promise<{ success: boolean; message: string }>;
+  onSaveQuery?: (query: SavedQueryInput) => Promise<void>;
+  onLoadSavedQueries?: () => Promise<SavedQuery[]>;
+
+  features?: WorkspaceFeatures;
+  className?: string;
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/workspace/types.ts
+git commit -m "feat(workspace): add StudioWorkspace types and props interface"
+```
+
+---
+
+### Task 2: Connection Adapter Hook
+
+**Files:**
+- Create: `src/workspace/hooks/use-connection-adapter.ts`
+- Test: `tests/hooks/use-connection-adapter.test.ts`
+
+- [ ] **Step 1: Write the failing test**
+
+```typescript
+// tests/hooks/use-connection-adapter.test.ts
+import '../setup-dom';
+
+import { describe, test, expect, beforeEach } from 'bun:test';
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { useConnectionAdapter } from '@/workspace/hooks/use-connection-adapter';
+import type { WorkspaceConnection } from '@/workspace/types';
+import type { TableSchema } from '@/lib/types';
+
+const makeConnections = (): WorkspaceConnection[] => [
+  { id: 'conn-1', name: 'Production DB', type: 'postgres' },
+  { id: 'conn-2', name: 'Analytics DB', type: 'mysql' },
+];
+
+const makeSchema = (): TableSchema[] => [
+  {
+    name: 'users',
+    columns: [
+      { name: 'id', type: 'integer', nullable: false, isPrimary: true },
+      { name: 'email', type: 'varchar', nullable: false, isPrimary: false },
+    ],
+    indexes: [{ name: 'users_pkey', columns: ['id'], unique: true }],
+    rowCount: 100,
+  },
+];
+
+describe('useConnectionAdapter', () => {
+  test('initializes with first connection as active', () => {
+    const connections = makeConnections();
+    const { result } = renderHook(() =>
+      useConnectionAdapter({
+        connections,
+        onSchemaFetch: async () => [],
+      })
+    );
+
+    expect(result.current.connections).toEqual(connections);
+    expect(result.current.activeConnection?.id).toBe('conn-1');
+  });
+
+  test('returns null activeConnection when connections array is empty', () => {
+    const { result } = renderHook(() =>
+      useConnectionAdapter({
+        connections: [],
+        onSchemaFetch: async () => [],
+      })
+    );
+
+    expect(result.current.activeConnection).toBeNull();
+  });
+
+  test('setActiveConnection updates active connection', () => {
+    const connections = makeConnections();
+    const { result } = renderHook(() =>
+      useConnectionAdapter({
+        connections,
+        onSchemaFetch: async () => [],
+      })
+    );
+
+    act(() => {
+      result.current.setActiveConnection(connections[1]);
+    });
+
+    expect(result.current.activeConnection?.id).toBe('conn-2');
+  });
+
+  test('fetchSchema calls onSchemaFetch and updates schema state', async () => {
+    const schemaData = makeSchema();
+    let fetchedConnectionId: string | null = null;
+
+    const { result } = renderHook(() =>
+      useConnectionAdapter({
+        connections: makeConnections(),
+        onSchemaFetch: async (connId) => {
+          fetchedConnectionId = connId;
+          return schemaData;
+        },
+      })
+    );
+
+    await act(async () => {
+      await result.current.fetchSchema(result.current.activeConnection!);
+    });
+
+    expect(fetchedConnectionId).toBe('conn-1');
+    expect(result.current.schema).toEqual(schemaData);
+    expect(result.current.tableNames).toEqual(['users']);
+    expect(result.current.isLoadingSchema).toBe(false);
+  });
+
+  test('fetchSchema sets isLoadingSchema during fetch', async () => {
+    let resolveSchema: ((val: TableSchema[]) => void) | null = null;
+    const schemaPromise = new Promise<TableSchema[]>((resolve) => {
+      resolveSchema = resolve;
+    });
+
+    const { result } = renderHook(() =>
+      useConnectionAdapter({
+        connections: makeConnections(),
+        onSchemaFetch: async () => schemaPromise,
+      })
+    );
+
+    // Start fetch (don't await)
+    let fetchPromise: Promise<void>;
+    act(() => {
+      fetchPromise = result.current.fetchSchema(result.current.activeConnection!);
+    });
+
+    expect(result.current.isLoadingSchema).toBe(true);
+
+    // Resolve
+    await act(async () => {
+      resolveSchema!(makeSchema());
+      await fetchPromise!;
+    });
+
+    expect(result.current.isLoadingSchema).toBe(false);
+  });
+
+  test('updates connections when props change', () => {
+    const initial = makeConnections();
+    const { result, rerender } = renderHook(
+      ({ connections }) =>
+        useConnectionAdapter({
+          connections,
+          onSchemaFetch: async () => [],
+        }),
+      { initialProps: { connections: initial } }
+    );
+
+    expect(result.current.connections).toHaveLength(2);
+
+    const updated = [...initial, { id: 'conn-3', name: 'New DB', type: 'sqlite' as const }];
+    rerender({ connections: updated });
+
+    expect(result.current.connections).toHaveLength(3);
+  });
+
+  test('resets activeConnection when it is removed from connections', () => {
+    const initial = makeConnections();
+    const { result, rerender } = renderHook(
+      ({ connections }) =>
+        useConnectionAdapter({
+          connections,
+          onSchemaFetch: async () => [],
+        }),
+      { initialProps: { connections: initial } }
+    );
+
+    // Set active to conn-2
+    act(() => {
+      result.current.setActiveConnection(initial[1]);
+    });
+    expect(result.current.activeConnection?.id).toBe('conn-2');
+
+    // Remove conn-2
+    rerender({ connections: [initial[0]] });
+
+    expect(result.current.activeConnection?.id).toBe('conn-1');
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `cd /home/cevheri/projects/libredb/libredb-studio && bun run test tests/hooks/use-connection-adapter.test.ts`
+Expected: FAIL — module `@/workspace/hooks/use-connection-adapter` not found
+
+- [ ] **Step 3: Write the implementation**
+
+```typescript
+// src/workspace/hooks/use-connection-adapter.ts
+'use client';
+
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import type { DatabaseConnection, TableSchema } from '@/lib/types';
+import type { WorkspaceConnection } from '@/workspace/types';
+
+interface UseConnectionAdapterParams {
+  connections: WorkspaceConnection[];
+  onSchemaFetch: (connectionId: string) => Promise<TableSchema[]>;
+}
+
+/**
+ * Adapter hook that provides the same interface as useConnectionManager
+ * but sources data from props and callbacks instead of internal API routes.
+ */
+export function useConnectionAdapter({
+  connections: externalConnections,
+  onSchemaFetch,
+}: UseConnectionAdapterParams) {
+  // Convert WorkspaceConnection[] to DatabaseConnection[] (add required fields)
+  const connections: DatabaseConnection[] = useMemo(
+    () =>
+      externalConnections.map((c) => ({
+        id: c.id,
+        name: c.name,
+        type: c.type,
+        createdAt: new Date(),
+        managed: true, // platform-managed connections
+      })),
+    [externalConnections]
+  );
+
+  const [activeConnection, setActiveConnection] = useState<DatabaseConnection | null>(
+    connections[0] ?? null
+  );
+  const [schema, setSchema] = useState<TableSchema[]>([]);
+  const [isLoadingSchema, setIsLoadingSchema] = useState(false);
+
+  // Sync activeConnection when connections prop changes
+  useEffect(() => {
+    if (connections.length === 0) {
+      setActiveConnection(null);
+      return;
+    }
+
+    // If current active is still in the list, keep it
+    if (activeConnection && connections.some((c) => c.id === activeConnection.id)) {
+      return;
+    }
+
+    // Otherwise, select first
+    setActiveConnection(connections[0]);
+  }, [connections]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const fetchSchema = useCallback(
+    async (conn: DatabaseConnection) => {
+      setIsLoadingSchema(true);
+      try {
+        const result = await onSchemaFetch(conn.id);
+        setSchema(result);
+      } catch {
+        setSchema([]);
+      } finally {
+        setIsLoadingSchema(false);
+      }
+    },
+    [onSchemaFetch]
+  );
+
+  const tableNames = useMemo(() => schema.map((s) => s.name), [schema]);
+  const schemaContext = useMemo(() => JSON.stringify(schema), [schema]);
+
+  return {
+    connections,
+    setConnections: () => {}, // no-op — platform controls connections
+    activeConnection,
+    setActiveConnection: setActiveConnection as (conn: DatabaseConnection | null) => void,
+    schema,
+    setSchema,
+    isLoadingSchema,
+    connectionPulse: null as 'healthy' | 'degraded' | 'error' | null,
+    fetchSchema,
+    tableNames,
+    schemaContext,
+  };
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `cd /home/cevheri/projects/libredb/libredb-studio && bun run test tests/hooks/use-connection-adapter.test.ts`
+Expected: All 7 tests PASS
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/workspace/hooks/use-connection-adapter.ts tests/hooks/use-connection-adapter.test.ts
+git commit -m "feat(workspace): add useConnectionAdapter hook with tests"
+```
+
+---
+
+### Task 3: Query Adapter Hook
+
+**Files:**
+- Create: `src/workspace/hooks/use-query-adapter.ts`
+- Test: `tests/hooks/use-query-adapter.test.ts`
+
+- [ ] **Step 1: Write the failing test**
+
+```typescript
+// tests/hooks/use-query-adapter.test.ts
+import '../setup-dom';
+
+import { describe, test, expect, beforeEach } from 'bun:test';
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { useQueryAdapter } from '@/workspace/hooks/use-query-adapter';
+import type { QueryTab } from '@/lib/types';
+import type { WorkspaceQueryResult, WorkspaceConnection } from '@/workspace/types';
+
+const mockConnection: WorkspaceConnection & { createdAt: Date; managed: boolean } = {
+  id: 'conn-1',
+  name: 'Test DB',
+  type: 'postgres',
+  createdAt: new Date(),
+  managed: true,
+};
+
+const mockQueryResult: WorkspaceQueryResult = {
+  rows: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }],
+  fields: ['id', 'name'],
+  rowCount: 2,
+  executionTime: 42,
+};
+
+const defaultTab: QueryTab = {
+  id: 'tab-1',
+  name: 'Query 1',
+  query: 'SELECT * FROM users',
+  result: null,
+  isExecuting: false,
+  type: 'sql',
+};
+
+describe('useQueryAdapter', () => {
+  test('executeQuery calls onQueryExecute and updates tab with result', async () => {
+    let executedSql: string | null = null;
+    let executedConnId: string | null = null;
+
+    const tabs = [defaultTab];
+    const setTabs = (fn: (prev: QueryTab[]) => QueryTab[]) => {
+      const updated = fn(tabs);
+      tabs.splice(0, tabs.length, ...updated);
+    };
+
+    const { result } = renderHook(() =>
+      useQueryAdapter({
+        activeConnection: mockConnection,
+        onQueryExecute: async (connId, sql) => {
+          executedConnId = connId;
+          executedSql = sql;
+          return mockQueryResult;
+        },
+        tabs,
+        activeTabId: 'tab-1',
+        currentTab: defaultTab,
+        setTabs: setTabs as any,
+        fetchSchema: async () => {},
+        features: {},
+      })
+    );
+
+    await act(async () => {
+      await result.current.executeQuery('SELECT 1');
+    });
+
+    expect(executedConnId).toBe('conn-1');
+    expect(executedSql).toBe('SELECT 1');
+  });
+
+  test('executeQuery uses tab query when no override provided', async () => {
+    let executedSql: string | null = null;
+    const tabs = [defaultTab];
+    const setTabs = (fn: (prev: QueryTab[]) => QueryTab[]) => {
+      const updated = fn(tabs);
+      tabs.splice(0, tabs.length, ...updated);
+    };
+
+    const { result } = renderHook(() =>
+      useQueryAdapter({
+        activeConnection: mockConnection,
+        onQueryExecute: async (_connId, sql) => {
+          executedSql = sql;
+          return mockQueryResult;
+        },
+        tabs,
+        activeTabId: 'tab-1',
+        currentTab: defaultTab,
+        setTabs: setTabs as any,
+        fetchSchema: async () => {},
+        features: {},
+      })
+    );
+
+    await act(async () => {
+      await result.current.executeQuery();
+    });
+
+    expect(executedSql).toBe('SELECT * FROM users');
+  });
+
+  test('returns error state when onQueryExecute throws', async () => {
+    const tabs = [defaultTab];
+    const setTabs = (fn: (prev: QueryTab[]) => QueryTab[]) => {
+      const updated = fn(tabs);
+      tabs.splice(0, tabs.length, ...updated);
+    };
+
+    const { result } = renderHook(() =>
+      useQueryAdapter({
+        activeConnection: mockConnection,
+        onQueryExecute: async () => {
+          throw new Error('Connection refused');
+        },
+        tabs,
+        activeTabId: 'tab-1',
+        currentTab: defaultTab,
+        setTabs: setTabs as any,
+        fetchSchema: async () => {},
+        features: {},
+      })
+    );
+
+    await act(async () => {
+      await result.current.executeQuery('SELECT 1');
+    });
+
+    // Tab should not be stuck in executing state
+    expect(tabs[0].isExecuting).toBe(false);
+  });
+
+  test('cancelQuery aborts in-flight request', async () => {
+    let resolveFetch: ((val: WorkspaceQueryResult) => void) | null = null;
+
+    const tabs = [defaultTab];
+    const setTabs = (fn: (prev: QueryTab[]) => QueryTab[]) => {
+      const updated = fn(tabs);
+      tabs.splice(0, tabs.length, ...updated);
+    };
+
+    const { result } = renderHook(() =>
+      useQueryAdapter({
+        activeConnection: mockConnection,
+        onQueryExecute: async () => {
+          return new Promise<WorkspaceQueryResult>((resolve) => {
+            resolveFetch = resolve;
+          });
+        },
+        tabs,
+        activeTabId: 'tab-1',
+        currentTab: defaultTab,
+        setTabs: setTabs as any,
+        fetchSchema: async () => {},
+        features: {},
+      })
+    );
+
+    // Start query (don't await)
+    act(() => {
+      result.current.executeQuery('SELECT 1');
+    });
+
+    // Cancel
+    act(() => {
+      result.current.cancelQuery();
+    });
+
+    // Resolve the pending promise (shouldn't crash)
+    resolveFetch?.(mockQueryResult);
+
+    expect(tabs[0].isExecuting).toBe(false);
+  });
+
+  test('bottomPanelMode defaults to results', () => {
+    const { result } = renderHook(() =>
+      useQueryAdapter({
+        activeConnection: mockConnection,
+        onQueryExecute: async () => mockQueryResult,
+        tabs: [defaultTab],
+        activeTabId: 'tab-1',
+        currentTab: defaultTab,
+        setTabs: () => {},
+        fetchSchema: async () => {},
+        features: {},
+      })
+    );
+
+    expect(result.current.bottomPanelMode).toBe('results');
+  });
+
+  test('historyKey increments after successful query', async () => {
+    const tabs = [defaultTab];
+    const setTabs = (fn: (prev: QueryTab[]) => QueryTab[]) => {
+      const updated = fn(tabs);
+      tabs.splice(0, tabs.length, ...updated);
+    };
+
+    const { result } = renderHook(() =>
+      useQueryAdapter({
+        activeConnection: mockConnection,
+        onQueryExecute: async () => mockQueryResult,
+        tabs,
+        activeTabId: 'tab-1',
+        currentTab: defaultTab,
+        setTabs: setTabs as any,
+        fetchSchema: async () => {},
+        features: {},
+      })
+    );
+
+    const initialKey = result.current.historyKey;
+
+    await act(async () => {
+      await result.current.executeQuery('SELECT 1');
+    });
+
+    expect(result.current.historyKey).toBe(initialKey + 1);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `cd /home/cevheri/projects/libredb/libredb-studio && bun run test tests/hooks/use-query-adapter.test.ts`
+Expected: FAIL — module not found
+
+- [ ] **Step 3: Write the implementation**
+
+```typescript
+// src/workspace/hooks/use-query-adapter.ts
+'use client';
+
+import { useState, useCallback, useRef, type Dispatch, type SetStateAction } from 'react';
+import type { DatabaseConnection, QueryTab } from '@/lib/types';
+import type { WorkspaceQueryResult, WorkspaceFeatures } from '@/workspace/types';
+import type { BottomPanelMode } from '@/components/studio/BottomPanel';
+import { useToast } from '@/hooks/use-toast';
+
+interface UseQueryAdapterParams {
+  activeConnection: DatabaseConnection | null;
+  onQueryExecute: (connectionId: string, sql: string, options?: {
+    limit?: number;
+    offset?: number;
+    unlimited?: boolean;
+  }) => Promise<WorkspaceQueryResult>;
+  tabs: QueryTab[];
+  activeTabId: string;
+  currentTab: QueryTab;
+  setTabs: Dispatch<SetStateAction<QueryTab[]>>;
+  fetchSchema: (conn: DatabaseConnection) => Promise<void>;
+  features: Partial<WorkspaceFeatures>;
+}
+
+export function useQueryAdapter({
+  activeConnection,
+  onQueryExecute,
+  tabs,
+  activeTabId,
+  currentTab,
+  setTabs,
+  fetchSchema,
+  features,
+}: UseQueryAdapterParams) {
+  const [historyKey, setHistoryKey] = useState(0);
+  const [bottomPanelMode, setBottomPanelMode] = useState<BottomPanelMode>('results');
+  const [safetyCheckQuery, setSafetyCheckQuery] = useState<string | null>(null);
+  const [unlimitedWarningOpen, setUnlimitedWarningOpen] = useState(false);
+  const [pendingUnlimitedQuery, setPendingUnlimitedQuery] = useState<{
+    query: string;
+    tabId: string;
+  } | null>(null);
+
+  const cancelledRef = useRef(false);
+  const { toast } = useToast();
+
+  // In-memory history for embedded mode
+  const historyRef = useRef<Array<{
+    id: string;
+    connectionId: string;
+    connectionName: string;
+    tabName: string;
+    query: string;
+    executionTime: number;
+    status: 'success' | 'error';
+    executedAt: Date;
+    rowCount?: number;
+    errorMessage?: string;
+  }>>([]);
+
+  const executeQuery = useCallback(async (
+    overrideQuery?: string,
+    tabId?: string,
+    isExplain: boolean = false,
+  ) => {
+    const targetTabId = tabId || activeTabId;
+    const tabToExec = tabs.find(t => t.id === targetTabId) || currentTab;
+    const queryToExecute = overrideQuery || tabToExec.query;
+
+    if (!activeConnection) {
+      toast({ title: 'No Connection', description: 'Select a connection first.', variant: 'destructive' });
+      return;
+    }
+
+    if (!queryToExecute.trim()) {
+      toast({ title: 'Empty Query', description: 'Enter a query to execute.', variant: 'destructive' });
+      return;
+    }
+
+    cancelledRef.current = false;
+
+    // Set executing state
+    setTabs(prev => prev.map(t => t.id === targetTabId
+      ? { ...t, isExecuting: true }
+      : t
+    ));
+    setBottomPanelMode('results');
+
+    const startTime = Date.now();
+
+    try {
+      const result = await onQueryExecute(activeConnection.id, queryToExecute);
+
+      if (cancelledRef.current) return;
+
+      const executionTime = result.executionTime || (Date.now() - startTime);
+
+      // Add to in-memory history
+      historyRef.current.unshift({
+        id: Math.random().toString(36).substring(7),
+        connectionId: activeConnection.id,
+        connectionName: activeConnection.name,
+        tabName: tabToExec.name,
+        query: queryToExecute,
+        executionTime,
+        status: 'success',
+        executedAt: new Date(),
+        rowCount: result.rowCount,
+      });
+
+      // Update tab with result
+      setTabs(prev => prev.map(t => t.id === targetTabId
+        ? {
+            ...t,
+            result: {
+              rows: result.rows,
+              fields: result.fields || result.columns?.map(c => c.name) || Object.keys(result.rows[0] || {}),
+              rowCount: result.rowCount,
+              executionTime,
+              pagination: result.pagination,
+            },
+            allRows: result.rows,
+            currentOffset: result.rows.length,
+            isExecuting: false,
+            isLoadingMore: false,
+          }
+        : t
+      ));
+
+      setHistoryKey(prev => prev + 1);
+    } catch (error) {
+      if (cancelledRef.current) return;
+
+      const errorMessage = error instanceof Error ? error.message : 'Query failed';
+
+      // Add error to history
+      historyRef.current.unshift({
+        id: Math.random().toString(36).substring(7),
+        connectionId: activeConnection.id,
+        connectionName: activeConnection.name,
+        tabName: tabToExec.name,
+        query: queryToExecute,
+        executionTime: Date.now() - startTime,
+        status: 'error',
+        executedAt: new Date(),
+        errorMessage,
+      });
+
+      setTabs(prev => prev.map(t => t.id === targetTabId
+        ? { ...t, isExecuting: false, isLoadingMore: false }
+        : t
+      ));
+
+      toast({ title: 'Query Error', description: errorMessage, variant: 'destructive' });
+    }
+  }, [activeConnection, tabs, activeTabId, currentTab, onQueryExecute, setTabs, toast]);
+
+  const forceExecuteQuery = useCallback((query: string) => {
+    setSafetyCheckQuery(null);
+    executeQuery(query);
+  }, [executeQuery]);
+
+  const cancelQuery = useCallback(() => {
+    cancelledRef.current = true;
+    setTabs(prev => prev.map(t => t.isExecuting
+      ? { ...t, isExecuting: false, isLoadingMore: false }
+      : t
+    ));
+    toast({ title: 'Query Cancelled', description: 'Query execution was cancelled.' });
+  }, [setTabs, toast]);
+
+  const handleLoadMore = useCallback(() => {
+    if (!currentTab.result?.pagination?.hasMore || !activeConnection) return;
+
+    const currentOffset = currentTab.currentOffset || currentTab.result.rows.length;
+
+    setTabs(prev => prev.map(t => t.id === currentTab.id
+      ? { ...t, isLoadingMore: true }
+      : t
+    ));
+
+    onQueryExecute(activeConnection.id, currentTab.query, {
+      limit: 500,
+      offset: currentOffset,
+    }).then(result => {
+      if (cancelledRef.current) return;
+
+      setTabs(prev => prev.map(t => {
+        if (t.id !== currentTab.id || !t.result) return t;
+        const existingRows = t.allRows || t.result.rows;
+        const newAllRows = [...existingRows, ...result.rows];
+        return {
+          ...t,
+          result: {
+            ...t.result,
+            rows: newAllRows,
+            rowCount: newAllRows.length,
+            pagination: result.pagination,
+          },
+          allRows: newAllRows,
+          currentOffset: currentOffset + result.rows.length,
+          isLoadingMore: false,
+        };
+      }));
+    }).catch(() => {
+      setTabs(prev => prev.map(t => t.id === currentTab.id
+        ? { ...t, isLoadingMore: false }
+        : t
+      ));
+    });
+  }, [currentTab, activeConnection, onQueryExecute, setTabs]);
+
+  const handleUnlimitedQuery = useCallback(() => {
+    if (!pendingUnlimitedQuery || !activeConnection) return;
+    // For embedded mode, just re-execute with unlimited flag
+    // The consumer's onQueryExecute handles the actual execution
+    executeQuery(pendingUnlimitedQuery.query, pendingUnlimitedQuery.tabId);
+    setUnlimitedWarningOpen(false);
+    setPendingUnlimitedQuery(null);
+  }, [pendingUnlimitedQuery, activeConnection, executeQuery]);
+
+  return {
+    executeQuery,
+    forceExecuteQuery,
+    cancelQuery,
+    handleLoadMore,
+    handleUnlimitedQuery,
+    safetyCheckQuery,
+    setSafetyCheckQuery,
+    unlimitedWarningOpen,
+    setUnlimitedWarningOpen,
+    pendingUnlimitedQuery,
+    setPendingUnlimitedQuery,
+    historyKey,
+    bottomPanelMode,
+    setBottomPanelMode,
+  };
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `cd /home/cevheri/projects/libredb/libredb-studio && bun run test tests/hooks/use-query-adapter.test.ts`
+Expected: All 6 tests PASS
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/workspace/hooks/use-query-adapter.ts tests/hooks/use-query-adapter.test.ts
+git commit -m "feat(workspace): add useQueryAdapter hook with tests"
+```
+
+---
+
+### Task 4: StudioWorkspace Component
+
+**Files:**
+- Create: `src/workspace/StudioWorkspace.tsx`
+
+This is the core composite component. It composes the adapter hooks with existing UI components.
+
+- [ ] **Step 1: Create StudioWorkspace.tsx**
+
+```typescript
+// src/workspace/StudioWorkspace.tsx
+'use client';
+
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { Sidebar, ConnectionsList } from '@/components/sidebar';
+import { MobileNav } from '@/components/MobileNav';
+import { SchemaExplorer } from '@/components/schema-explorer';
+import { QueryEditor, QueryEditorRef } from '@/components/QueryEditor';
+import { DataProfiler } from '@/components/DataProfiler';
+import { CodeGenerator } from '@/components/CodeGenerator';
+import { TestDataGenerator } from '@/components/TestDataGenerator';
+import { SchemaDiagram } from '@/components/SchemaDiagram';
+import { DataImportModal } from '@/components/DataImportModal';
+import { SaveQueryModal } from '@/components/SaveQueryModal';
+import {
+  StudioTabBar,
+  QueryToolbar,
+  BottomPanel,
+} from '@/components/studio/index';
+import type { SavedQuery } from '@/lib/types';
+import { useToast } from '@/hooks/use-toast';
+import { useTabManager } from '@/hooks/use-tab-manager';
+import { useConnectionAdapter } from '@/workspace/hooks/use-connection-adapter';
+import { useQueryAdapter } from '@/workspace/hooks/use-query-adapter';
+import type { StudioWorkspaceProps } from '@/workspace/types';
+import { DEFAULT_WORKSPACE_FEATURES } from '@/workspace/types';
+import { cn } from '@/lib/utils';
+import { Database, Plus } from 'lucide-react';
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
+import { AnimatePresence } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+
+export function StudioWorkspace({
+  connections: externalConnections,
+  currentUser,
+  onQueryExecute,
+  onSchemaFetch,
+  onSaveQuery,
+  onLoadSavedQueries,
+  features: featuresProp,
+  className,
+}: StudioWorkspaceProps) {
+  const queryEditorRef = useRef<QueryEditorRef>(null);
+  const { toast } = useToast();
+
+  const features = useMemo(
+    () => ({ ...DEFAULT_WORKSPACE_FEATURES, ...featuresProp }),
+    [featuresProp]
+  );
+
+  // 1. Connection Adapter
+  const conn = useConnectionAdapter({
+    connections: externalConnections,
+    onSchemaFetch,
+  });
+
+  // 2. Tab Manager (reused as-is — pure UI state)
+  const tabMgr = useTabManager({
+    activeConnection: conn.activeConnection,
+    metadata: null, // no direct DB access in embedded mode
+    schema: conn.schema,
+  });
+
+  // 3. Query Adapter
+  const queryExec = useQueryAdapter({
+    activeConnection: conn.activeConnection,
+    onQueryExecute,
+    tabs: tabMgr.tabs,
+    activeTabId: tabMgr.activeTabId,
+    currentTab: tabMgr.currentTab,
+    setTabs: tabMgr.setTabs,
+    fetchSchema: conn.fetchSchema,
+    features,
+  });
+
+  // Fetch schema on connection change
+  useEffect(() => {
+    if (conn.activeConnection) {
+      conn.fetchSchema(conn.activeConnection);
+    } else {
+      conn.setSchema([]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [conn.activeConnection]);
+
+  // Modal state
+  const [showDiagram, setShowDiagram] = useState(false);
+  const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState(false);
+  const [savedKey, setSavedKey] = useState(0);
+  const [activeMobileTab, setActiveMobileTab] = useState<'database' | 'schema' | 'editor'>('editor');
+  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
+  const [isNL2SQLOpen, setIsNL2SQLOpen] = useState(false);
+  const [profilerTable, setProfilerTable] = useState<string | null>(null);
+  const [codeGenTable, setCodeGenTable] = useState<string | null>(null);
+  const [testDataTable, setTestDataTable] = useState<string | null>(null);
+
+  const handleSaveQuery = async (name: string, description: string, tags: string[]) => {
+    if (!conn.activeConnection) return;
+    if (onSaveQuery) {
+      await onSaveQuery({
+        name,
+        query: tabMgr.currentTab.query,
+        description,
+        connectionType: conn.activeConnection.type,
+        tags,
+      });
+      setSavedKey(prev => prev + 1);
+      toast({ title: 'Query Saved', description: `"${name}" has been saved.` });
+    }
+  };
+
+  const exportResults = (format: 'csv' | 'json' | 'sql-insert' | 'sql-ddl') => {
+    if (!tabMgr.currentTab.result) return;
+    const data = tabMgr.currentTab.result.rows;
+    let content = '';
+    let mimeType = 'text/plain';
+    let ext: string = format;
+
+    if (format === 'csv') {
+      const headers = Object.keys(data[0] || {}).join(',');
+      const rows = data.map(row => Object.values(row).map(val => `"${val}"`).join(',')).join('\n');
+      content = `${headers}\n${rows}`;
+      mimeType = 'text/csv';
+      ext = 'csv';
+    } else if (format === 'json') {
+      content = JSON.stringify(data, null, 2);
+      mimeType = 'application/json';
+      ext = 'json';
+    } else if (format === 'sql-insert') {
+      const tableName = tabMgr.currentTab.name.replace(/^Query[:  ]*/, '') || 'table_name';
+      const columns = Object.keys(data[0] || {});
+      const lines = data.map(row => {
+        const values = columns.map(col => {
+          const val = row[col];
+          if (val === null || val === undefined) return 'NULL';
+          if (typeof val === 'number' || typeof val === 'boolean') return String(val);
+          return `'${String(val).replace(/'/g, "''")}'`;
+        });
+        return `INSERT INTO ${tableName} (${columns.join(', ')}) VALUES (${values.join(', ')});`;
+      });
+      content = lines.join('\n');
+      mimeType = 'text/sql';
+      ext = 'sql';
+    } else if (format === 'sql-ddl') {
+      const tableName = tabMgr.currentTab.name.replace(/^Query[:  ]*/, '') || 'table_name';
+      const columns = Object.keys(data[0] || {});
+      const colDefs = columns.map(col => {
+        const sampleVal = data[0]?.[col];
+        let sqlType = 'TEXT';
+        if (typeof sampleVal === 'number') sqlType = Number.isInteger(sampleVal) ? 'INTEGER' : 'NUMERIC';
+        else if (typeof sampleVal === 'boolean') sqlType = 'BOOLEAN';
+        else if (sampleVal instanceof Date) sqlType = 'TIMESTAMP';
+        return `  ${col} ${sqlType}`;
+      });
+      content = `CREATE TABLE ${tableName} (\n${colDefs.join(',\n')}\n);`;
+      mimeType = 'text/sql';
+      ext = 'sql';
+    }
+
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `query_result_export.${ext}`;
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const onTableClick = (tableName: string) => {
+    tabMgr.handleTableClick(tableName, queryExec.executeQuery);
+  };
+
+  return (
+    <div className={cn(
+      'flex h-full w-full bg-[#050505] text-zinc-100 overflow-hidden font-sans select-none',
+      className
+    )}>
+      <ResizablePanelGroup id="workspace-main" direction="horizontal" className="h-full">
+        {/* Sidebar */}
+        <ResizablePanel defaultSize={22} minSize={15} maxSize={35} className="hidden md:block">
+          <Sidebar
+            connections={conn.connections}
+            activeConnection={conn.activeConnection}
+            schema={conn.schema}
+            isLoadingSchema={conn.isLoadingSchema}
+            onSelectConnection={conn.setActiveConnection}
+            onDeleteConnection={() => {}} // no-op in embedded mode
+            onEditConnection={() => {}}   // no-op in embedded mode
+            onAddConnection={() => {}}    // no-op in embedded mode
+            onTableClick={onTableClick}
+            onGenerateSelect={tabMgr.handleGenerateSelect}
+            onCreateTableClick={() => {}} // no-op in embedded mode
+            onShowDiagram={features.schemaDiagram ? () => setShowDiagram(true) : undefined}
+            isAdmin={false}
+            onOpenMaintenance={() => {}}
+            databaseType={conn.activeConnection?.type}
+            metadata={null}
+            onProfileTable={features.codeGenerator ? (name) => setProfilerTable(name) : undefined}
+            onGenerateCode={features.codeGenerator ? (name) => setCodeGenTable(name) : undefined}
+            onGenerateTestData={features.testDataGenerator ? (name) => setTestDataTable(name) : undefined}
+          />
+        </ResizablePanel>
+        <ResizableHandle className="hidden md:flex w-1 bg-transparent hover:bg-blue-500/30 transition-colors" />
+
+        {/* Main Editor Area */}
+        <ResizablePanel defaultSize={78}>
+          <div className="flex-1 flex flex-col min-w-0 h-full bg-[#0a0a0a] pb-16 md:pb-0">
+            {/* Tab Bar */}
+            <StudioTabBar
+              tabs={tabMgr.tabs}
+              activeTabId={tabMgr.activeTabId}
+              editingTabId={tabMgr.editingTabId}
+              editingTabName={tabMgr.editingTabName}
+              onSetActiveTabId={tabMgr.setActiveTabId}
+              onSetEditingTabId={tabMgr.setEditingTabId}
+              onSetEditingTabName={tabMgr.setEditingTabName}
+              onSetTabs={tabMgr.setTabs}
+              onCloseTab={tabMgr.closeTab}
+              onAddTab={tabMgr.addTab}
+            />
+
+            <main className="flex-1 overflow-hidden relative">
+              {/* Schema Diagram Overlay */}
+              <AnimatePresence>
+                {features.schemaDiagram && showDiagram && (
+                  <SchemaDiagram schema={conn.schema} onClose={() => setShowDiagram(false)} />
+                )}
+              </AnimatePresence>
+
+              {/* Mobile: Database Tab */}
+              {activeMobileTab === 'database' && (
+                <div className="md:hidden h-full bg-[#080808] overflow-auto p-4">
+                  <div className="mb-4 flex items-center justify-between">
+                    <h2 className="text-sm font-bold text-zinc-300 uppercase tracking-widest">Connections</h2>
+                  </div>
+                  <ConnectionsList
+                    connections={conn.connections}
+                    activeConnection={conn.activeConnection}
+                    onSelectConnection={(c) => {
+                      conn.setActiveConnection(c);
+                      setActiveMobileTab('editor');
+                    }}
+                    onDeleteConnection={() => {}}
+                    onAddConnection={() => {}}
+                  />
+                </div>
+              )}
+
+              {/* Mobile: Schema Tab */}
+              {activeMobileTab === 'schema' && (
+                <div className="md:hidden h-full bg-[#080808] overflow-auto p-4">
+                  {conn.activeConnection ? (
+                    <SchemaExplorer
+                      schema={conn.schema}
+                      isLoadingSchema={conn.isLoadingSchema}
+                      onTableClick={(tableName) => {
+                        onTableClick(tableName);
+                        setActiveMobileTab('editor');
+                      }}
+                      onGenerateSelect={(tableName) => {
+                        tabMgr.handleGenerateSelect(tableName);
+                        setActiveMobileTab('editor');
+                      }}
+                      onCreateTableClick={() => {}}
+                      isAdmin={false}
+                      onOpenMaintenance={() => {}}
+                      databaseType={conn.activeConnection?.type}
+                      metadata={null}
+                      onProfileTable={features.codeGenerator ? (name) => setProfilerTable(name) : undefined}
+                      onGenerateCode={features.codeGenerator ? (name) => setCodeGenTable(name) : undefined}
+                      onGenerateTestData={features.testDataGenerator ? (name) => setTestDataTable(name) : undefined}
+                    />
+                  ) : (
+                    <div className="flex flex-col items-center justify-center h-full text-zinc-500">
+                      <Database className="w-12 h-12 mb-4 opacity-30" />
+                      <p className="text-sm">Select a connection first</p>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* Editor + Results */}
+              <div className={cn('h-full', activeMobileTab !== 'editor' && 'hidden md:block')}>
+                <ResizablePanelGroup id="workspace-editor" direction="vertical">
+                  <ResizablePanel defaultSize={40} minSize={20}>
+                    <div className="h-full flex flex-col">
+                      <QueryToolbar
+                        activeConnection={conn.activeConnection}
+                        metadata={null}
+                        isExecuting={tabMgr.currentTab.isExecuting}
+                        playgroundMode={false}
+                        transactionActive={false}
+                        editingEnabled={false}
+                        onSaveQuery={onSaveQuery ? () => setIsSaveQueryModalOpen(true) : undefined}
+                        onExecuteQuery={() => queryExec.executeQuery()}
+                        onCancelQuery={queryExec.cancelQuery}
+                        onBeginTransaction={() => {}}
+                        onCommitTransaction={() => {}}
+                        onRollbackTransaction={() => {}}
+                        onTogglePlayground={() => {}}
+                        onToggleEditing={() => {}}
+                        onImport={features.dataImport ? () => setIsImportModalOpen(true) : undefined}
+                      />
+                      <div className="flex-1 relative">
+                        <QueryEditor
+                          ref={queryEditorRef}
+                          value={tabMgr.currentTab.query}
+                          onContentChange={(val) => tabMgr.updateTabById(tabMgr.currentTab.id, { query: val })}
+                          language={tabMgr.currentTab.type === 'mongodb' ? 'json' : 'sql'}
+                          tables={conn.tableNames}
+                          databaseType={conn.activeConnection?.type}
+                          schemaContext={conn.schemaContext}
+                          capabilities={undefined}
+                        />
+                      </div>
+                    </div>
+                  </ResizablePanel>
+                  <ResizableHandle className="h-1 bg-white/5 hover:bg-blue-500/20" />
+                  <ResizablePanel defaultSize={60} minSize={20}>
+                    <BottomPanel
+                      mode={queryExec.bottomPanelMode}
+                      onSetMode={queryExec.setBottomPanelMode}
+                      currentTab={tabMgr.currentTab}
+                      schema={conn.schema}
+                      schemaContext={conn.schemaContext}
+                      activeConnection={conn.activeConnection}
+                      metadata={null}
+                      historyKey={queryExec.historyKey}
+                      savedKey={savedKey}
+                      isNL2SQLOpen={features.ai ? isNL2SQLOpen : false}
+                      onSetIsNL2SQLOpen={features.ai ? setIsNL2SQLOpen : () => {}}
+                      maskingEnabled={false}
+                      onToggleMasking={undefined}
+                      userRole={currentUser?.role}
+                      maskingConfig={{ enabled: false, mode: 'partial', patterns: [] }}
+                      editingEnabled={false}
+                      pendingChanges={[]}
+                      onCellChange={() => {}}
+                      onApplyChanges={() => {}}
+                      onDiscardChanges={() => {}}
+                      onExecuteQuery={(q) => queryExec.executeQuery(q)}
+                      onLoadQuery={(q) => tabMgr.updateCurrentTab({ query: q })}
+                      onLoadMore={
+                        tabMgr.currentTab.result?.pagination?.hasMore
+                          ? queryExec.handleLoadMore
+                          : undefined
+                      }
+                      isLoadingMore={tabMgr.currentTab.isLoadingMore}
+                      onExportResults={exportResults}
+                    />
+                  </ResizablePanel>
+                </ResizablePanelGroup>
+              </div>
+            </main>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+
+      {/* Modals — only features that are enabled */}
+      {onSaveQuery && (
+        <SaveQueryModal
+          isOpen={isSaveQueryModalOpen}
+          onClose={() => setIsSaveQueryModalOpen(false)}
+          onSave={handleSaveQuery}
+          defaultQuery={tabMgr.currentTab.query}
+        />
+      )}
+
+      {features.dataImport && (
+        <DataImportModal
+          isOpen={isImportModalOpen}
+          onClose={() => setIsImportModalOpen(false)}
+          onImport={(sql) => queryExec.executeQuery(sql)}
+          tables={conn.schema}
+          databaseType={conn.activeConnection?.type}
+        />
+      )}
+
+      {features.codeGenerator && (
+        <>
+          <DataProfiler
+            isOpen={!!profilerTable}
+            onClose={() => setProfilerTable(null)}
+            tableName={profilerTable || ''}
+            tableSchema={conn.schema.find(t => t.name === profilerTable) || null}
+            connection={conn.activeConnection}
+            schemaContext={conn.schemaContext}
+            databaseType={conn.activeConnection?.type}
+          />
+          <CodeGenerator
+            isOpen={!!codeGenTable}
+            onClose={() => setCodeGenTable(null)}
+            tableName={codeGenTable || ''}
+            tableSchema={conn.schema.find(t => t.name === codeGenTable) || null}
+            databaseType={conn.activeConnection?.type}
+          />
+        </>
+      )}
+
+      {features.testDataGenerator && (
+        <TestDataGenerator
+          isOpen={!!testDataTable}
+          onClose={() => setTestDataTable(null)}
+          tableName={testDataTable || ''}
+          tableSchema={conn.schema.find(t => t.name === testDataTable) || null}
+          databaseType={conn.activeConnection?.type}
+          queryLanguage={undefined}
+          onExecuteQuery={(q) => queryExec.executeQuery(q)}
+        />
+      )}
+
+      <MobileNav
+        activeTab={activeMobileTab}
+        onTabChange={setActiveMobileTab}
+        hasResult={!!tabMgr.currentTab.result}
+      />
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Verify no TypeScript errors**
+
+Run: `cd /home/cevheri/projects/libredb/libredb-studio && npx tsc --noEmit --pretty src/workspace/StudioWorkspace.tsx 2>&1 | head -30`
+
+Fix any type errors that come up. Common issues:
+- Props mismatches on Sidebar, BottomPanel, QueryToolbar — adjust `undefined` vs `() => {}` as needed
+- `MaskingConfig` import may be needed from `@/lib/data-masking`
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/workspace/StudioWorkspace.tsx
+git commit -m "feat(workspace): add StudioWorkspace composite component"
+```
+
+---
+
+### Task 5: Export Entry Point
+
+**Files:**
+- Create: `src/exports/workspace.ts`
+- Modify: `tsup.config.ts:4-9` (add workspace entry)
+- Modify: `package.json` (add ./workspace export)
+
+- [ ] **Step 1: Create the export file**
+
+```typescript
+// src/exports/workspace.ts
+export { StudioWorkspace } from '../workspace/StudioWorkspace'
+export type {
+  StudioWorkspaceProps,
+  WorkspaceConnection,
+  WorkspaceUser,
+  WorkspaceQueryResult,
+  WorkspaceFeatures,
+  SavedQueryInput,
+} from '../workspace/types'
+export { DEFAULT_WORKSPACE_FEATURES } from '../workspace/types'
+```
+
+- [ ] **Step 2: Add workspace entry to tsup.config.ts**
+
+In `tsup.config.ts`, add `workspace` to the `entry` object:
+
+```typescript
+entry: {
+  index: 'src/exports/index.ts',
+  providers: 'src/exports/providers.ts',
+  types: 'src/exports/types.ts',
+  components: 'src/exports/components.ts',
+  workspace: 'src/exports/workspace.ts',  // NEW
+},
+```
+
+- [ ] **Step 3: Add ./workspace export to package.json**
+
+Add after the `"./components"` export block:
+
+```json
+"./workspace": {
+  "import": {
+    "types": "./dist/workspace.d.mts",
+    "default": "./dist/workspace.mjs"
+  },
+  "require": {
+    "types": "./dist/workspace.d.ts",
+    "default": "./dist/workspace.js"
+  }
+}
+```
+
+- [ ] **Step 4: Verify build succeeds**
+
+Run: `cd /home/cevheri/projects/libredb/libredb-studio && bun run build:lib 2>&1 | tail -20`
+
+Expected: Build completes, `dist/workspace.mjs` and `dist/workspace.d.mts` are generated.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/exports/workspace.ts tsup.config.ts package.json
+git commit -m "feat(workspace): add workspace export entry point and build config"
+```
+
+---
+
+### Task 6: Run Full Test Suite
+
+**Files:** None (verification only)
+
+- [ ] **Step 1: Run all existing tests to confirm nothing is broken**
+
+Run: `cd /home/cevheri/projects/libredb/libredb-studio && bun run test 2>&1 | tail -30`
+
+Expected: All existing tests pass. The new adapter hook tests also pass.
+
+- [ ] **Step 2: Run lint**
+
+Run: `cd /home/cevheri/projects/libredb/libredb-studio && bun run lint 2>&1 | tail -20`
+
+Expected: No new lint errors introduced.
+
+- [ ] **Step 3: Run typecheck**
+
+Run: `cd /home/cevheri/projects/libredb/libredb-studio && bun run typecheck 2>&1 | tail -20`
+
+Expected: No type errors.
+
+- [ ] **Step 4: Run build**
+
+Run: `cd /home/cevheri/projects/libredb/libredb-studio && bun run build 2>&1 | tail -20`
+
+Expected: Next.js production build succeeds (standalone studio app still works).
+
+- [ ] **Step 5: Commit any fixes if needed**
+
+If any test/lint/type/build issues were found and fixed:
+
+```bash
+git add -A
+git commit -m "fix(workspace): resolve test/lint/type issues"
+```
+
+---
+
+### Summary: File Map
+
+| Action | File |
+|--------|------|
+| Create | `src/workspace/types.ts` |
+| Create | `src/workspace/hooks/use-connection-adapter.ts` |
+| Create | `src/workspace/hooks/use-query-adapter.ts` |
+| Create | `src/workspace/StudioWorkspace.tsx` |
+| Create | `src/exports/workspace.ts` |
+| Create | `tests/hooks/use-connection-adapter.test.ts` |
+| Create | `tests/hooks/use-query-adapter.test.ts` |
+| Modify | `tsup.config.ts` (add workspace entry) |
+| Modify | `package.json` (add ./workspace export) |
+
+**Total: 7 new files, 2 modified files. Zero existing files changed.**
diff --git a/docs/superpowers/specs/2026-03-26-studio-workspace-export-design.md b/docs/superpowers/specs/2026-03-26-studio-workspace-export-design.md
new file mode 100644
index 0000000..131ec36
--- /dev/null
+++ b/docs/superpowers/specs/2026-03-26-studio-workspace-export-design.md
@@ -0,0 +1,299 @@
+# StudioWorkspace Composite Export — Design Specification
+
+**Date:** 2026-03-26
+**Status:** Approved
+**Context:** libredb-platform's workspace is a basic textarea + HTML table query executor. Studio standalone has 28+ components, Monaco editor, AI copilot, charts, ER diagrams — a full database IDE. The gap exists because the npm package exports individual components, but the orchestration layer (Studio.tsx + 16 hooks + resizable layout + tab manager) is not exported. Platform would need to rebuild the entire workspace wrapper around individual components — essentially rewriting studio inside platform.
+
+**Solution:** Export the entire workspace as a single `<StudioWorkspace />` composite component with callback props. Platform provides data + callbacks, studio provides the full IDE experience.
+
+**Principle:** Additive only — Studio.tsx and all existing code remain unchanged.
+
+---
+
+## 1. Props Interface
+
+```typescript
+interface StudioWorkspaceProps {
+  // Data — platform provides
+  connections: WorkspaceConnection[];
+  currentUser?: WorkspaceUser;
+
+  // Core callbacks — required
+  onQueryExecute: (connectionId: string, sql: string) => Promise<WorkspaceQueryResult>;
+  onSchemaFetch: (connectionId: string) => Promise<TableSchema[]>;
+
+  // Optional callbacks
+  onTestConnection?: (config: TestConnectionConfig) => Promise<{ success: boolean; message: string }>;
+  onSaveQuery?: (query: SavedQueryInput) => Promise<void>;
+  onLoadSavedQueries?: () => Promise<SavedQuery[]>;
+
+  // Feature flags — disabled features hidden from UI
+  features?: WorkspaceFeatures;
+
+  // UI customization
+  className?: string;
+}
+
+interface WorkspaceConnection {
+  id: string;
+  name: string;
+  type: DatabaseType; // 'postgres' | 'mysql' | 'sqlite' | 'oracle' | 'mssql' | 'mongodb' | 'redis'
+}
+
+interface WorkspaceUser {
+  id: string;
+  name?: string;
+  role?: string;
+}
+
+interface WorkspaceQueryResult {
+  rows: Record<string, unknown>[];
+  columns: { name: string; type?: string }[];
+  rowCount: number;
+  executionTime: number;
+}
+
+interface TestConnectionConfig {
+  type: DatabaseType;
+  host: string;
+  port: number;
+  database: string;
+  username: string;
+  password: string;
+  sslEnabled?: boolean;
+}
+
+interface SavedQueryInput {
+  name: string;
+  query: string;
+  description?: string;
+  connectionType?: string;
+  tags?: string[];
+}
+
+interface WorkspaceFeatures {
+  ai?: boolean;                 // default: false — NL2SQL, QuerySafety AI, DataProfiler AI narrative
+  charts?: boolean;             // default: true
+  codeGenerator?: boolean;      // default: true
+  testDataGenerator?: boolean;  // default: true (uses onQueryExecute)
+  schemaDiagram?: boolean;      // default: true
+  dataImport?: boolean;         // default: true
+  inlineEditing?: boolean;      // default: false (needs special mutation API)
+  transactions?: boolean;       // default: false (needs BEGIN/COMMIT/ROLLBACK API)
+  connectionManagement?: boolean; // default: false (platform manages connections)
+  dataMasking?: boolean;        // default: false
+}
+```
+
+---
+
+## 2. Architecture
+
+### Dependency Inversion via Adapter Hooks
+
+Studio.tsx uses internal hooks that call API routes and localStorage. StudioWorkspace uses adapter hooks with the same return shape but delegating to callback props.
+
+```
+Studio.tsx (standalone)              StudioWorkspace.tsx (embedded)
+────────────────────────             ────────────────────────────
+useAuth()        → internal JWT      currentUser prop
+useConnectionManager() → storage     useConnectionAdapter(props)
+useQueryExecution()    → /api/db     useQueryAdapter(props)
+useStorageSync() → localStorage      not needed
+useTabManager()  → pure UI state     useTabManager() (reused as-is)
+useTransactionControl() → /api/db    disabled in v1
+useInlineEditing()     → /api/db     disabled in v1
+useProviderMetadata()  → /api/db     disabled (no direct DB access)
+```
+
+### Adapter Hook Contracts
+
+**useConnectionAdapter(props)** — same shape as useConnectionManager:
+- `connections`: from props (reactive to prop changes)
+- `activeConnection`: internal state, initialized to first connection
+- `setActiveConnection`: setter
+- `schema` / `isLoadingSchema`: fetched via `props.onSchemaFetch(connectionId)`
+- `fetchSchema`: triggers `onSchemaFetch`
+- `tableNames` / `schemaContext`: derived from schema
+- No storage operations, no connection CRUD
+
+**useQueryAdapter(props, tabMgr)** — same shape as useQueryExecution:
+- `executeQuery(sql?)`: calls `props.onQueryExecute(activeConnectionId, sql)`, stores result in tab
+- `cancelQuery`: sets abort flag (best-effort)
+- `bottomPanelMode` / `setBottomPanelMode`: internal state
+- `historyKey`: increments on each execution (triggers history refresh)
+- `safetyCheckQuery` / `forceExecuteQuery`: disabled when `features.ai` is false
+- No internal API calls
+
+### Shared UI — No Duplication
+
+Both Studio.tsx and StudioWorkspace.tsx render the same components:
+- QueryEditor, ResultsGrid, SchemaExplorer, SchemaDiagram, DataCharts
+- Sidebar, StudioTabBar, QueryToolbar, BottomPanel
+- ResizablePanelGroup layout, mobile layout
+
+The difference is only in how hooks provide data to these components.
+
+---
+
+## 3. File Structure
+
+All new files — nothing existing is modified.
+
+```
+libredb-studio/src/
+├── workspace/                          # NEW directory
+│   ├── types.ts                        # WorkspaceProps, WorkspaceConnection, etc.
+│   ├── StudioWorkspace.tsx             # Composite component
+│   ├── defaults.ts                     # Default feature flags
+│   └── hooks/
+│       ├── use-connection-adapter.ts   # Connection management via props+callbacks
+│       └── use-query-adapter.ts        # Query execution via callbacks
+├── exports/
+│   └── workspace.ts                    # NEW export entry point
+```
+
+Modified files (minimal):
+```
+package.json    → add "./workspace" to exports field
+tsup.config.ts  → add workspace entry point
+```
+
+---
+
+## 4. v1 Feature Scope
+
+### Included (works via props + callbacks)
+
+| Feature | Component | Why It Works |
+|---------|-----------|-------------|
+| Monaco SQL editor | QueryEditor | Pure client-side, needs only schema context |
+| Virtualized results grid | ResultsGrid | Renders data from onQueryExecute result |
+| Schema explorer (sidebar) | SchemaExplorer | Data from onSchemaFetch |
+| ER diagram | SchemaDiagram | Pure client-side, reads schema state |
+| 8 chart types | DataCharts | Pure client-side, reads query results |
+| Code generation | CodeGenerator | Pure client-side, reads schema |
+| Test data generation | TestDataGenerator | Generates SQL, uses onQueryExecute |
+| Multi-tab workspace | StudioTabBar + useTabManager | Pure UI state, no external deps |
+| Resizable panels | ResizablePanelGroup | Pure UI |
+| Query history | BottomPanel history tab | In-memory history array |
+| Mobile responsive | MobileNav + responsive layout | Pure UI |
+| Data import | DataImportModal | Generates SQL, uses onQueryExecute |
+
+### Excluded from v1 (disabled via feature flags)
+
+| Feature | Reason | v2 Path |
+|---------|--------|---------|
+| NL2SQL | Calls /api/ai/nl2sql | Add `onNL2SQL` callback |
+| AI DataProfiler | Calls /api/ai/describe-schema | Add `onAIDescribe` callback |
+| QuerySafety AI | Calls /api/ai/query-safety | Add `onQuerySafety` callback |
+| AI Autopilot | Calls /api/ai/autopilot | Add `onAIAutopilot` callback |
+| Inline editing | Needs mutation API per cell | Add `onCellUpdate` callback |
+| Transaction control | Needs BEGIN/COMMIT/ROLLBACK | Add `onTransaction` callback |
+| Connection CRUD | Platform manages connections | Add `onConnectionSave/Delete` |
+| Data masking | Needs RBAC config | Add `maskingConfig` prop |
+| Command palette | Navigation targets don't exist in embedded | Adapt or exclude |
+| Storage sync | Platform handles persistence | Not needed |
+
+---
+
+## 5. Platform Integration
+
+### Platform workspace page usage:
+
+```tsx
+import { StudioWorkspace } from '@libredb/studio/workspace';
+
+export default async function WorkspacePage() {
+  const user = await requireAuth();
+  const connections = await ConnectionRepository.findByTenant(user.currentTenantId);
+
+  const serialized = connections.map(c => ({
+    id: c.id,
+    name: c.name,
+    type: c.type.toLowerCase(),
+  }));
+
+  return (
+    <StudioWorkspace
+      connections={serialized}
+      currentUser={{ id: user.id, name: user.name }}
+      onQueryExecute={async (connectionId, sql) => {
+        const res = await fetch('/api/db/query', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ connectionId, sql }),
+        });
+        if (!res.ok) throw new Error(await res.text());
+        return res.json();
+      }}
+      onSchemaFetch={async (connectionId) => {
+        const res = await fetch('/api/db/schema', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ connectionId }),
+        });
+        const data = await res.json();
+        return data.schema;
+      }}
+      features={{
+        charts: true,
+        schemaDiagram: true,
+        codeGenerator: true,
+        testDataGenerator: true,
+        dataImport: true,
+      }}
+    />
+  );
+}
+```
+
+Platform's existing `/api/db/query` and `/api/db/schema` routes handle auth, RBAC, audit logging — StudioWorkspace doesn't need to know about any of that.
+
+---
+
+## 6. Build & Export
+
+### package.json exports addition:
+```json
+{
+  "exports": {
+    ".": { "import": "./dist/index.mjs", "require": "./dist/index.js" },
+    "./providers": { "import": "./dist/providers.mjs", "require": "./dist/providers.js" },
+    "./types": { "import": "./dist/types.mjs", "require": "./dist/types.js" },
+    "./components": { "import": "./dist/components.mjs", "require": "./dist/components.js" },
+    "./workspace": { "import": "./dist/workspace.mjs", "require": "./dist/workspace.js" }
+  }
+}
+```
+
+### tsup entry point addition:
+```typescript
+entry: [
+  'src/exports/index.ts',
+  'src/exports/providers.ts',
+  'src/exports/types.ts',
+  'src/exports/components.ts',
+  'src/exports/workspace.ts',  // NEW
+]
+```
+
+---
+
+## 7. Testing Strategy
+
+- Unit tests for adapter hooks (mock callbacks, verify they're called correctly)
+- Unit tests for feature flag logic (disabled features don't render)
+- Component test for StudioWorkspace (renders with minimal props)
+- No E2E needed in v1 (platform E2E will cover integration)
+
+---
+
+## 8. What Does NOT Change
+
+- `src/components/Studio.tsx` — untouched
+- All 16 existing hooks — untouched
+- All 28+ existing components — untouched
+- All 33 API routes — untouched
+- Existing exports (components, providers, types) — untouched
+- Standalone app behavior — identical
diff --git a/src/app/globals.css b/src/app/globals.css
index 683353e..0f6b69e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,6 +3,20 @@
 @theme {
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+
+  /* Studio IDE font scale — compact sizes for data-dense UIs */
+  --text-micro: 0.5rem;            /* 8px  — tiny badges */
+  --text-micro--line-height: 0.75rem;
+  --text-caption: 0.625rem;        /* 10px — status dots, minor labels */
+  --text-caption--line-height: 1rem;
+  --text-label: 0.6875rem;         /* 11px — toolbar buttons, sidebar counts */
+  --text-label--line-height: 1rem;
+  --text-body: 0.8125rem;          /* 13px — connection names, explorer items */
+  --text-body--line-height: 1.25rem;
+  --text-data: 0.75rem;            /* 12px — table cells, monospace data */
+  --text-data--line-height: 1rem;
+  --text-title: 0.9375rem;         /* 15px — section headings */
+  --text-title--line-height: 1.375rem;
 }
 
 /*
diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
index e8e7238..2122b90 100644
--- a/src/components/QueryEditor.tsx
+++ b/src/components/QueryEditor.tsx
@@ -487,89 +487,89 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
   return (
     <div className="h-full w-full flex flex-col bg-[#050505] relative overflow-hidden group">
       {/* Dynamic Pro Toolbar - Hidden on mobile */}
-      <div className="hidden md:flex items-center gap-1.5 px-3 py-1.5 bg-[#0a0a0a] border-b border-white/5 overflow-x-auto no-scrollbar scroll-smooth">
-        <div className="flex items-center gap-1 mr-2 px-1.5 py-1 rounded bg-white/5 border border-white/5">
-          <span className="text-label font-black text-zinc-500 uppercase tracking-[0.2em]">Quick Actions</span>
+      <div className="hidden md:flex items-center gap-1 px-2 py-1 bg-[#0a0a0a] border-b border-white/5 overflow-x-auto no-scrollbar scroll-smooth">
+        <div className="flex items-center mr-1.5 px-1.5 py-0.5 rounded bg-white/5 border border-white/5">
+          <span className="text-caption font-black text-zinc-600 uppercase tracking-[0.15em]">Actions</span>
         </div>
 
         {hasSelection && (
           <button
             onClick={handleExecute}
-            className="px-2.5 py-1.5 rounded bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold transition-all border border-blue-400/30 active:scale-95 flex items-center gap-1.5 shadow-[0_0_15px_rgba(37,99,235,0.3)] animate-in fade-in zoom-in duration-200"
+            className="px-1.5 py-0.5 rounded bg-blue-600 hover:bg-blue-500 text-white text-label font-bold transition-all border border-blue-400/30 active:scale-95 flex items-center gap-1 shadow-[0_0_10px_rgba(37,99,235,0.3)] animate-in fade-in zoom-in duration-200"
           >
-            <Play className="w-3 h-3 fill-current" />
-            RUN SELECTION
+            <Play className="w-2.5 h-2.5 fill-current" />
+            RUN SEL
           </button>
         )}
 
         <button
           onClick={handleFormat}
           title={language === 'json' ? "Format JSON (Shift+Alt+F)" : "Format SQL (Shift+Alt+F)"}
-          className="px-2.5 py-1.5 rounded bg-[#111] hover:bg-zinc-800 text-zinc-500 hover:text-zinc-200 text-xs font-mono transition-all border border-white/5 active:scale-95 flex items-center gap-1.5"
+          className="px-1.5 py-0.5 rounded bg-[#111] hover:bg-zinc-800 text-zinc-500 hover:text-zinc-200 text-label font-mono transition-all border border-white/5 active:scale-95 flex items-center gap-1"
         >
-          <AlignLeft className="w-3 h-3" />
+          <AlignLeft className="w-2.5 h-2.5" />
           FORMAT
         </button>
 
         <button
           onClick={handleCopy}
-          className="px-2.5 py-1.5 rounded bg-[#111] hover:bg-zinc-800 text-zinc-500 hover:text-zinc-200 text-xs font-mono transition-all border border-white/5 active:scale-95 flex items-center gap-1.5"
+          className="px-1.5 py-0.5 rounded bg-[#111] hover:bg-zinc-800 text-zinc-500 hover:text-zinc-200 text-label font-mono transition-all border border-white/5 active:scale-95 flex items-center gap-1"
         >
-          <Copy className="w-3 h-3" />
-          {hasSelection ? 'COPY SELECTION' : 'COPY'}
+          <Copy className="w-2.5 h-2.5" />
+          {hasSelection ? 'COPY SEL' : 'COPY'}
         </button>
 
         <button
           onClick={handleClear}
-          className="px-2.5 py-1.5 rounded bg-[#111] hover:bg-zinc-800 text-zinc-500 hover:text-red-400 text-xs font-mono transition-all border border-white/5 active:scale-95 flex items-center gap-1.5"
+          className="px-1.5 py-0.5 rounded bg-[#111] hover:bg-zinc-800 text-zinc-500 hover:text-red-400 text-label font-mono transition-all border border-white/5 active:scale-95 flex items-center gap-1"
         >
-          <Trash2 className="w-3 h-3" />
+          <Trash2 className="w-2.5 h-2.5" />
           CLEAR
         </button>
 
-        <div className="w-px h-4 bg-white/5 mx-1" />
+        <div className="w-px h-3 bg-white/5 mx-0.5" />
 
         <button
           onClick={() => setShowLineNumbers(!showLineNumbers)}
           title={showLineNumbers ? "Hide line numbers" : "Show line numbers"}
           className={cn(
-            "px-2.5 py-1.5 rounded text-xs font-mono transition-all border active:scale-95 flex items-center gap-1.5",
+            "px-1.5 py-0.5 rounded text-label font-mono transition-all border active:scale-95 flex items-center gap-1",
             showLineNumbers
               ? "bg-zinc-800 border-white/10 text-zinc-300"
               : "bg-[#111] border-white/5 text-zinc-500 hover:text-zinc-300"
           )}
         >
-          <Hash className="w-3 h-3" />
+          <Hash className="w-2.5 h-2.5" />
           LINES
         </button>
 
         <button
           onClick={() => setShowAi(!showAi)}
           className={cn(
-            "px-2.5 py-1.5 rounded text-xs font-bold transition-all border active:scale-95 flex items-center gap-1.5",
+            "px-1.5 py-0.5 rounded text-label font-bold transition-all border active:scale-95 flex items-center gap-1",
             showAi
               ? "bg-blue-600 border-blue-500 text-white shadow-[0_0_10px_rgba(37,99,235,0.4)]"
               : "bg-zinc-900 border-white/5 text-zinc-400 hover:text-blue-400 hover:border-blue-500/30"
           )}
         >
-          <Sparkles className={cn("w-3.5 h-3.5", showAi && "animate-pulse")} />
-          AI ASSISTANT
+          <Sparkles className={cn("w-2.5 h-2.5", showAi && "animate-pulse")} />
+          AI
         </button>
 
         <div className="flex-1" />
 
-          <div className="flex items-center gap-1.5 opacity-50 hover:opacity-100 transition-opacity">
+          <div className="flex items-center gap-1 opacity-50 hover:opacity-100 transition-opacity">
             {onExplain && capabilities?.supportsExplain && (
               <button
                 onClick={onExplain}
-                className="px-2.5 py-1.5 rounded bg-zinc-900 hover:bg-zinc-800 text-amber-500 hover:text-amber-400 text-xs font-bold transition-all border border-amber-500/10 active:scale-95 flex items-center gap-1.5 mr-2"
+                className="px-1.5 py-0.5 rounded bg-zinc-900 hover:bg-zinc-800 text-amber-500 hover:text-amber-400 text-label font-bold transition-all border border-amber-500/10 active:scale-95 flex items-center gap-1 mr-1"
               >
-                <Zap className="w-3 h-3" />
+                <Zap className="w-2.5 h-2.5" />
                 EXPLAIN
               </button>
             )}
-            <kbd className="px-2 py-1 rounded bg-zinc-900 border border-white/5 text-label text-zinc-500 font-mono">
-              ⌘ + ENTER TO RUN
+            <kbd className="px-1.5 py-0.5 rounded bg-zinc-900 border border-white/5 text-caption text-zinc-600 font-mono">
+              ⌘+Enter
             </kbd>
           </div>
         </div>
@@ -592,7 +592,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
                     <div className="p-1 rounded-md bg-blue-500/10">
                       <Sparkles className="w-3.5 h-3.5 text-blue-400" />
                     </div>
-                    <span className="text-xs font-black text-blue-400 uppercase tracking-[0.2em]">Expert DBA Mode</span>
+                    <span className="text-label font-black text-blue-400 uppercase tracking-[0.2em]">Expert DBA Mode</span>
                   </div>
                   <div className="flex items-center gap-2">
                     {aiConversationHistory.length > 0 && (
@@ -658,7 +658,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
                     <button
                       type="submit"
                       disabled={isAiLoading || !aiPrompt.trim()}
-                      className="bg-blue-600 hover:bg-blue-500 disabled:opacity-50 disabled:hover:bg-blue-600 px-5 py-2.5 rounded-xl text-white text-xs font-bold transition-all shadow-lg shadow-blue-600/30 flex items-center gap-2"
+                      className="bg-blue-600 hover:bg-blue-500 disabled:opacity-50 disabled:hover:bg-blue-600 px-4 py-2 rounded-xl text-white text-label font-bold transition-all shadow-lg shadow-blue-600/30 flex items-center gap-2"
                     >
                       {isAiLoading ? (
                         <>
diff --git a/tests/components/QueryEditor.test.tsx b/tests/components/QueryEditor.test.tsx
index e0e664a..3bc3018 100644
--- a/tests/components/QueryEditor.test.tsx
+++ b/tests/components/QueryEditor.test.tsx
@@ -308,14 +308,9 @@ describe('QueryEditor', () => {
     expect(editor.value).toBe('SELECT 1');
   });
 
-  test('shows language badge (SQL)', () => {
+  test('does not show language badge (removed)', () => {
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps({ language: 'sql' })));
-    expect(queryByText('sql Engine')).not.toBeNull();
-  });
-
-  test('shows language badge (JSON)', () => {
-    const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps({ language: 'json' })));
-    expect(queryByText('json Engine')).not.toBeNull();
+    expect(queryByText('sql Engine')).toBeNull();
   });
 
   // -----------------------------------------------------------------------
diff --git a/tests/components/SnapshotTimeline.test.tsx b/tests/components/SnapshotTimeline.test.tsx
index 480b169..2badbe0 100644
--- a/tests/components/SnapshotTimeline.test.tsx
+++ b/tests/components/SnapshotTimeline.test.tsx
@@ -108,7 +108,7 @@ describe('SnapshotTimeline', () => {
     const { container } = render(
       <SnapshotTimeline snapshots={reversedSnapshots} onCompare={mock(() => {})} onDelete={mock(() => {})} />
     );
-    const labels = container.querySelectorAll('.text-\\[10px\\].font-medium');
+    const labels = container.querySelectorAll('.text-xs.font-medium');
     expect(labels[0]?.textContent).toBe('Older');
     expect(labels[1]?.textContent).toBe('Newer');
   });
diff --git a/tsconfig.lib.json b/tsconfig.lib.json
new file mode 100644
index 0000000..c0dc52d
--- /dev/null
+++ b/tsconfig.lib.json
@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "incremental": false,
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "tests", "e2e", ".next"]
+}

From 332379fdf98b04593366c6aa8b5f92fe7ed5d85a Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 20:09:18 +0300
Subject: [PATCH 25/39] fix: update tests for semantic font tokens and removed
 SQL Engine badge

---
 src/components/QueryEditor.tsx | 104 ++++++++++++++++++---------------
 1 file changed, 56 insertions(+), 48 deletions(-)

diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
index 2122b90..40a80b6 100644
--- a/src/components/QueryEditor.tsx
+++ b/src/components/QueryEditor.tsx
@@ -5,6 +5,7 @@ import Editor, { useMonaco } from '@monaco-editor/react';
 import type * as Monaco from 'monaco-editor';
 import { Zap, Sparkles, Send, X, Loader2, AlignLeft, Trash2, Copy, Play, Hash } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
 import { motion, AnimatePresence } from 'framer-motion';
 import { format } from 'sql-formatter';
 import { registerSQLCompletionProvider } from '@/lib/editor/sql-completions';
@@ -487,86 +488,93 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
   return (
     <div className="h-full w-full flex flex-col bg-[#050505] relative overflow-hidden group">
       {/* Dynamic Pro Toolbar - Hidden on mobile */}
-      <div className="hidden md:flex items-center gap-1 px-2 py-1 bg-[#0a0a0a] border-b border-white/5 overflow-x-auto no-scrollbar scroll-smooth">
-        <div className="flex items-center mr-1.5 px-1.5 py-0.5 rounded bg-white/5 border border-white/5">
-          <span className="text-caption font-black text-zinc-600 uppercase tracking-[0.15em]">Actions</span>
+      <div className="hidden md:flex items-center gap-1 px-4 py-1.5 bg-[#0a0a0a] border-b border-white/5 overflow-x-auto no-scrollbar scroll-smooth">
+        <div className="flex items-center gap-2 px-2 py-0.5 rounded bg-zinc-500/5 border border-zinc-500/10">
+          <Zap className="w-3 h-3 text-zinc-400" />
+          <span className="text-xs font-bold text-zinc-400 uppercase tracking-widest">Actions</span>
         </div>
+        <div className="h-4 w-px bg-white/5" />
 
         {hasSelection && (
-          <button
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 text-xs font-bold uppercase tracking-widest text-white bg-blue-600 hover:bg-blue-500 hover:text-white gap-2 shadow-[0_0_10px_rgba(37,99,235,0.3)] animate-in fade-in zoom-in duration-200"
             onClick={handleExecute}
-            className="px-1.5 py-0.5 rounded bg-blue-600 hover:bg-blue-500 text-white text-label font-bold transition-all border border-blue-400/30 active:scale-95 flex items-center gap-1 shadow-[0_0_10px_rgba(37,99,235,0.3)] animate-in fade-in zoom-in duration-200"
           >
-            <Play className="w-2.5 h-2.5 fill-current" />
-            RUN SEL
-          </button>
+            <Play className="w-3 h-3 fill-current" /> Run Sel
+          </Button>
         )}
 
-        <button
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 text-xs font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-2"
           onClick={handleFormat}
           title={language === 'json' ? "Format JSON (Shift+Alt+F)" : "Format SQL (Shift+Alt+F)"}
-          className="px-1.5 py-0.5 rounded bg-[#111] hover:bg-zinc-800 text-zinc-500 hover:text-zinc-200 text-label font-mono transition-all border border-white/5 active:scale-95 flex items-center gap-1"
         >
-          <AlignLeft className="w-2.5 h-2.5" />
-          FORMAT
-        </button>
+          <AlignLeft className="w-3 h-3" /> Format
+        </Button>
 
-        <button
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 text-xs font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-2"
           onClick={handleCopy}
-          className="px-1.5 py-0.5 rounded bg-[#111] hover:bg-zinc-800 text-zinc-500 hover:text-zinc-200 text-label font-mono transition-all border border-white/5 active:scale-95 flex items-center gap-1"
         >
-          <Copy className="w-2.5 h-2.5" />
-          {hasSelection ? 'COPY SEL' : 'COPY'}
-        </button>
+          <Copy className="w-3 h-3" /> {hasSelection ? 'Copy Sel' : 'Copy'}
+        </Button>
 
-        <button
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 text-xs font-bold uppercase tracking-widest text-zinc-500 hover:text-red-400 gap-2"
           onClick={handleClear}
-          className="px-1.5 py-0.5 rounded bg-[#111] hover:bg-zinc-800 text-zinc-500 hover:text-red-400 text-label font-mono transition-all border border-white/5 active:scale-95 flex items-center gap-1"
         >
-          <Trash2 className="w-2.5 h-2.5" />
-          CLEAR
-        </button>
+          <Trash2 className="w-3 h-3" /> Clear
+        </Button>
 
-        <div className="w-px h-3 bg-white/5 mx-0.5" />
+        <div className="h-4 w-px bg-white/5" />
 
-        <button
-          onClick={() => setShowLineNumbers(!showLineNumbers)}
-          title={showLineNumbers ? "Hide line numbers" : "Show line numbers"}
+        <Button
+          variant="ghost"
+          size="sm"
           className={cn(
-            "px-1.5 py-0.5 rounded text-label font-mono transition-all border active:scale-95 flex items-center gap-1",
-            showLineNumbers
-              ? "bg-zinc-800 border-white/10 text-zinc-300"
-              : "bg-[#111] border-white/5 text-zinc-500 hover:text-zinc-300"
+            "h-7 text-xs font-bold uppercase tracking-widest gap-2",
+            showLineNumbers ? "text-zinc-300" : "text-zinc-500 hover:text-white"
           )}
+          onClick={() => setShowLineNumbers(!showLineNumbers)}
+          title={showLineNumbers ? "Hide line numbers" : "Show line numbers"}
         >
-          <Hash className="w-2.5 h-2.5" />
-          LINES
-        </button>
+          <Hash className="w-3 h-3" /> Lines
+        </Button>
 
-        <button
-          onClick={() => setShowAi(!showAi)}
+        <Button
+          variant="ghost"
+          size="sm"
           className={cn(
-            "px-1.5 py-0.5 rounded text-label font-bold transition-all border active:scale-95 flex items-center gap-1",
+            "h-7 text-xs font-bold uppercase tracking-widest gap-2",
             showAi
-              ? "bg-blue-600 border-blue-500 text-white shadow-[0_0_10px_rgba(37,99,235,0.4)]"
-              : "bg-zinc-900 border-white/5 text-zinc-400 hover:text-blue-400 hover:border-blue-500/30"
+              ? "text-white bg-blue-600 hover:bg-blue-500 hover:text-white shadow-[0_0_10px_rgba(37,99,235,0.4)]"
+              : "text-zinc-500 hover:text-blue-400"
           )}
+          onClick={() => setShowAi(!showAi)}
         >
-          <Sparkles className={cn("w-2.5 h-2.5", showAi && "animate-pulse")} />
-          AI
-        </button>
+          <Sparkles className={cn("w-3 h-3", showAi && "animate-pulse")} /> AI
+        </Button>
 
         <div className="flex-1" />
 
-          <div className="flex items-center gap-1 opacity-50 hover:opacity-100 transition-opacity">
+          <div className="flex items-center gap-2 opacity-50 hover:opacity-100 transition-opacity">
             {onExplain && capabilities?.supportsExplain && (
-              <button
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 text-xs font-bold uppercase tracking-widest text-amber-500 hover:text-amber-400 gap-2"
                 onClick={onExplain}
-                className="px-1.5 py-0.5 rounded bg-zinc-900 hover:bg-zinc-800 text-amber-500 hover:text-amber-400 text-label font-bold transition-all border border-amber-500/10 active:scale-95 flex items-center gap-1 mr-1"
               >
-                <Zap className="w-2.5 h-2.5" />
-                EXPLAIN
-              </button>
+                <Zap className="w-3 h-3" /> Explain
+              </Button>
             )}
             <kbd className="px-1.5 py-0.5 rounded bg-zinc-900 border border-white/5 text-caption text-zinc-600 font-mono">
               ⌘+Enter

From eec1a2eba189d42c0e8cd32af2593bf7f11b9776 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 21:56:46 +0300
Subject: [PATCH 26/39] chore: update CLAUDE.md with library build instructions
 and clean up QueryEditor component

- Added instructions for building the @libredb/studio package after component changes.
- Removed unused "Actions" section from the QueryEditor component for improved UI clarity.
---
 CLAUDE.md                      | 5 +++++
 src/components/QueryEditor.tsx | 6 ------
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 7eb90ff..ea1c5c6 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -48,6 +48,11 @@ bun run test:e2e
 # Coverage report
 bun run test:coverage
 
+# Library build (tsup) — exports @libredb/studio package for platform consumption
+# IMPORTANT: After changing any component used by platform (workspace, providers, etc.),
+# you MUST run this command. `bun run build` (Next.js) does NOT update the package dist.
+bun run build:lib
+
 # Docker development
 docker-compose up -d
 
diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
index 40a80b6..6fc9a7b 100644
--- a/src/components/QueryEditor.tsx
+++ b/src/components/QueryEditor.tsx
@@ -489,12 +489,6 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
     <div className="h-full w-full flex flex-col bg-[#050505] relative overflow-hidden group">
       {/* Dynamic Pro Toolbar - Hidden on mobile */}
       <div className="hidden md:flex items-center gap-1 px-4 py-1.5 bg-[#0a0a0a] border-b border-white/5 overflow-x-auto no-scrollbar scroll-smooth">
-        <div className="flex items-center gap-2 px-2 py-0.5 rounded bg-zinc-500/5 border border-zinc-500/10">
-          <Zap className="w-3 h-3 text-zinc-400" />
-          <span className="text-xs font-bold text-zinc-400 uppercase tracking-widest">Actions</span>
-        </div>
-        <div className="h-4 w-px bg-white/5" />
-
         {hasSelection && (
           <Button
             variant="ghost"

From 191f80b8f2511393aa4e2c24bca041ab12159e06 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 22:11:52 +0300
Subject: [PATCH 27/39] bump: version to 0.9.12

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index aa8ac71..d6741f3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@libredb/studio",
-  "version": "0.9.7",
+  "version": "0.9.12",
   "private": false,
   "publishConfig": {
     "access": "public"

From 06e94751276a278b57f2b99e4da571571e24a7e3 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 22:18:04 +0300
Subject: [PATCH 28/39] fix(lint): ignore dist/ in eslint config and suppress
 require() in CJS entry

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 eslint.config.mjs    | 1 +
 src/exports/index.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index e600c52..6412e12 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -9,6 +9,7 @@ const eslintConfig = defineConfig([
     ".next/**",
     "out/**",
     "build/**",
+    "dist/**",
     "next-env.d.ts",
   ]),
   {
diff --git a/src/exports/index.js b/src/exports/index.js
index 67437ae..dc95c70 100644
--- a/src/exports/index.js
+++ b/src/exports/index.js
@@ -1,2 +1,3 @@
 // JavaScript entry point for bundlers that can't resolve .ts exports
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 module.exports = require('./index.ts')

From f1e3053c6e58dfd64a2f99191258f4bc1d16c846 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 22:31:53 +0300
Subject: [PATCH 29/39] tests: update QueryEditor and SnapshotTimeline tests
 for button labels and class names

- Renamed test cases in QueryEditor to reflect updated button labels: 'Format', 'Copy', 'Clear', 'Lines', and 'AI'.
- Adjusted assertions to check for new button text and modified keyboard shortcut hint format.
- Updated SnapshotTimeline test to include 'truncate' class in label selection for accurate rendering checks.
---
 tests/components/QueryEditor.test.tsx      | 146 ++++++++++-----------
 tests/components/SnapshotTimeline.test.tsx |   2 +-
 2 files changed, 69 insertions(+), 79 deletions(-)

diff --git a/tests/components/QueryEditor.test.tsx b/tests/components/QueryEditor.test.tsx
index 3bc3018..ae4ed32 100644
--- a/tests/components/QueryEditor.test.tsx
+++ b/tests/components/QueryEditor.test.tsx
@@ -317,90 +317,84 @@ describe('QueryEditor', () => {
   // Toolbar buttons rendering
   // -----------------------------------------------------------------------
 
-  test('Quick Actions label renders', () => {
+  test('Format button renders', () => {
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
-    expect(queryByText('Quick Actions')).not.toBeNull();
+    expect(queryByText('Format')).not.toBeNull();
   });
 
-  test('FORMAT button renders', () => {
+  test('Copy button renders', () => {
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
-    expect(queryByText('FORMAT')).not.toBeNull();
+    expect(queryByText('Copy')).not.toBeNull();
   });
 
-  test('COPY button renders', () => {
+  test('Clear button renders', () => {
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
-    expect(queryByText('COPY')).not.toBeNull();
+    expect(queryByText('Clear')).not.toBeNull();
   });
 
-  test('CLEAR button renders', () => {
+  test('Lines button renders', () => {
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
-    expect(queryByText('CLEAR')).not.toBeNull();
+    expect(queryByText('Lines')).not.toBeNull();
   });
 
-  test('LINES button renders', () => {
+  test('AI toggle button renders', () => {
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
-    expect(queryByText('LINES')).not.toBeNull();
-  });
-
-
-  test('AI ASSISTANT toggle button renders', () => {
-    const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
-    expect(queryByText('AI ASSISTANT')).not.toBeNull();
+    expect(queryByText('AI')).not.toBeNull();
   });
 
   test('keyboard shortcut hint renders', () => {
     const { container } = render(React.createElement(QueryEditor, createDefaultProps()));
-    expect(container.textContent).toContain('⌘ + ENTER TO RUN');
+    expect(container.textContent).toContain('⌘+Enter');
   });
 
   // -----------------------------------------------------------------------
   // EXPLAIN button
   // -----------------------------------------------------------------------
 
-  test('EXPLAIN button appears when onExplain and supportsExplain provided', () => {
+  test('Explain button appears when onExplain and supportsExplain provided', () => {
     const props = createDefaultProps({
       onExplain: mock(() => {}),
       capabilities: defaultCapabilities,
     });
     const { queryByText } = render(React.createElement(QueryEditor, props));
-    expect(queryByText('EXPLAIN')).not.toBeNull();
+    expect(queryByText('Explain')).not.toBeNull();
   });
 
-  test('EXPLAIN button hidden without onExplain', () => {
+  test('Explain button hidden without onExplain', () => {
     const props = createDefaultProps({
       onExplain: undefined,
       capabilities: defaultCapabilities,
     });
     const { queryByText } = render(React.createElement(QueryEditor, props));
-    expect(queryByText('EXPLAIN')).toBeNull();
+    expect(queryByText('Explain')).toBeNull();
   });
 
-  test('EXPLAIN button hidden when supportsExplain is false', () => {
+  test('Explain button hidden when supportsExplain is false', () => {
     const props = createDefaultProps({
       onExplain: mock(() => {}),
       capabilities: { ...defaultCapabilities, supportsExplain: false },
     });
     const { queryByText } = render(React.createElement(QueryEditor, props));
-    expect(queryByText('EXPLAIN')).toBeNull();
+    expect(queryByText('Explain')).toBeNull();
   });
 
-  test('EXPLAIN button hidden when no capabilities', () => {
+  test('Explain button hidden when no capabilities', () => {
     const props = createDefaultProps({
       onExplain: mock(() => {}),
       capabilities: undefined,
     });
     const { queryByText } = render(React.createElement(QueryEditor, props));
-    expect(queryByText('EXPLAIN')).toBeNull();
+    expect(queryByText('Explain')).toBeNull();
   });
 
-  test('EXPLAIN click calls onExplain handler', () => {
+  test('Explain click calls onExplain handler', () => {
     const onExplain = mock(() => {});
     const props = createDefaultProps({
       onExplain,
       capabilities: defaultCapabilities,
     });
     const { queryByText } = render(React.createElement(QueryEditor, props));
-    fireEvent.click(queryByText('EXPLAIN')!);
+    fireEvent.click(queryByText('Explain')!);
     expect(onExplain).toHaveBeenCalled();
   });
 
@@ -411,13 +405,13 @@ describe('QueryEditor', () => {
   test('CLEAR button empties editor and syncs via onChange', () => {
     const onChange = mock(() => {});
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps({ onChange, value: 'SELECT 123' })));
-    fireEvent.click(queryByText('CLEAR')!);
+    fireEvent.click(queryByText('Clear')!);
     expect(onChange).toHaveBeenCalledWith('');
   });
 
   test('CLEAR button sets editor textarea to empty', () => {
     const { queryByText, queryByTestId } = render(React.createElement(QueryEditor, createDefaultProps({ value: 'SELECT 1' })));
-    fireEvent.click(queryByText('CLEAR')!);
+    fireEvent.click(queryByText('Clear')!);
     const editor = queryByTestId('mock-monaco-editor') as HTMLTextAreaElement;
     expect(editor.value).toBe('');
   });
@@ -428,35 +422,35 @@ describe('QueryEditor', () => {
 
   test('LINES button toggles line numbers state', () => {
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
-    const linesButton = queryByText('LINES');
+    const linesButton = queryByText('Lines');
     expect(linesButton).not.toBeNull();
 
     // Click to toggle
     fireEvent.click(linesButton!);
     // State should change (we can't directly test state, but button should still be there)
-    expect(queryByText('LINES')).not.toBeNull();
+    expect(queryByText('Lines')).not.toBeNull();
   });
 
-  test('LINES button defaults to enabled (line numbers shown)', () => {
+  test('Lines button defaults to enabled (line numbers shown)', () => {
     localStorage.clear();
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
-    const linesButton = queryByText('LINES')!.closest('button');
-    // Default state should have line numbers enabled (bg-zinc-800 class)
-    expect(linesButton?.className).toContain('bg-zinc-800');
+    const linesButton = queryByText('Lines')!.closest('button');
+    // Default state should have line numbers enabled (text-zinc-300 class)
+    expect(linesButton?.className).toContain('text-zinc-300');
   });
 
-  test('LINES button reads initial state from localStorage', () => {
+  test('Lines button reads initial state from localStorage', () => {
     localStorage.setItem('editor-line-numbers', 'false');
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
-    const linesButton = queryByText('LINES')!.closest('button');
-    // Should read false from localStorage and show disabled state (bg-[#111])
-    expect(linesButton?.className).toContain('bg-[#111]');
+    const linesButton = queryByText('Lines')!.closest('button');
+    // Should read false from localStorage and show disabled state (text-zinc-500)
+    expect(linesButton?.className).toContain('text-zinc-500');
   });
 
   test('LINES button saves state to localStorage when toggled', () => {
     localStorage.clear();
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
-    const linesButton = queryByText('LINES');
+    const linesButton = queryByText('Lines');
     
     // Initial state should be 'true' (default)
     expect(localStorage.getItem('editor-line-numbers')).toBe('true');
@@ -473,7 +467,7 @@ describe('QueryEditor', () => {
   test('LINES button updates editor options when toggled', () => {
     mockUseMonacoReturn = { Range: class {} };
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
-    const linesButton = queryByText('LINES');
+    const linesButton = queryByText('Lines');
     
     // Toggle line numbers - should trigger editor.updateOptions
     fireEvent.click(linesButton!);
@@ -481,32 +475,28 @@ describe('QueryEditor', () => {
     expect(linesButton).not.toBeNull();
   });
 
-  test('LINES button shows correct visual state when enabled', () => {
+  test('Lines button shows correct visual state when enabled', () => {
     localStorage.setItem('editor-line-numbers', 'true');
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
-    const linesButton = queryByText('LINES')!.closest('button');
-    
-    // Enabled state should have specific classes
-    expect(linesButton?.className).toContain('bg-zinc-800');
-    expect(linesButton?.className).toContain('border-white/10');
+    const linesButton = queryByText('Lines')!.closest('button');
+
+    // Enabled state should have text-zinc-300
     expect(linesButton?.className).toContain('text-zinc-300');
   });
 
-  test('LINES button shows correct visual state when disabled', () => {
+  test('Lines button shows correct visual state when disabled', () => {
     localStorage.setItem('editor-line-numbers', 'false');
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
-    const linesButton = queryByText('LINES')!.closest('button');
-    
-    // Disabled state should have different classes
-    expect(linesButton?.className).toContain('bg-[#111]');
-    expect(linesButton?.className).toContain('border-white/5');
+    const linesButton = queryByText('Lines')!.closest('button');
+
+    // Disabled state should have text-zinc-500
     expect(linesButton?.className).toContain('text-zinc-500');
   });
 
   test('LINES button has correct tooltip', () => {
     localStorage.setItem('editor-line-numbers', 'true');
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
-    const linesButton = queryByText('LINES')!.closest('button');
+    const linesButton = queryByText('Lines')!.closest('button');
     expect(linesButton?.getAttribute('title')).toBe('Hide line numbers');
     
     // Toggle and check tooltip changes
@@ -520,7 +510,7 @@ describe('QueryEditor', () => {
 
   test('COPY button writes current query to clipboard', () => {
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps({ value: 'SELECT copied_value' })));
-    fireEvent.click(queryByText('COPY')!);
+    fireEvent.click(queryByText('Copy')!);
     expect(mockClipboardWriteText).toHaveBeenCalledWith('SELECT copied_value');
   });
 
@@ -531,7 +521,7 @@ describe('QueryEditor', () => {
   test('FORMAT click formats SQL content via sql-formatter', () => {
     const onChange = mock(() => {});
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps({ onChange, value: 'select * from users' })));
-    fireEvent.click(queryByText('FORMAT')!);
+    fireEvent.click(queryByText('Format')!);
     // Our mock sql-formatter returns input as-is, but onChange should be called
     expect(onChange).toHaveBeenCalled();
   });
@@ -545,7 +535,7 @@ describe('QueryEditor', () => {
         language: 'json',
       }))
     );
-    fireEvent.click(queryByText('FORMAT')!);
+    fireEvent.click(queryByText('Format')!);
     // JSON.stringify(parsed, null, 2) should format it
     const editor = queryByTestId('mock-monaco-editor') as HTMLTextAreaElement;
     expect(editor.value).toContain('"collection"');
@@ -562,7 +552,7 @@ describe('QueryEditor', () => {
       }))
     );
     // Should not throw
-    fireEvent.click(queryByText('FORMAT')!);
+    fireEvent.click(queryByText('Format')!);
     // Editor value should remain unchanged since format failed
     const editor = queryByTestId('mock-monaco-editor') as HTMLTextAreaElement;
     expect(editor.value).toBe('{invalid json!!!}');
@@ -571,7 +561,7 @@ describe('QueryEditor', () => {
   test('FORMAT with empty editor is a no-op', () => {
     const onChange = mock(() => {});
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps({ onChange, value: '' })));
-    fireEvent.click(queryByText('FORMAT')!);
+    fireEvent.click(queryByText('Format')!);
     expect(onChange).not.toHaveBeenCalled();
   });
 
@@ -609,7 +599,7 @@ describe('QueryEditor', () => {
 
   test('AI ASSISTANT toggle calls setShowAi', () => {
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
-    fireEvent.click(queryByText('AI ASSISTANT')!);
+    fireEvent.click(queryByText('AI')!);
     expect(mockSetShowAi).toHaveBeenCalled();
   });
 
@@ -727,7 +717,7 @@ describe('QueryEditor', () => {
 
   test('RUN SELECTION button not shown when no selection', () => {
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
-    expect(queryByText('RUN SELECTION')).toBeNull();
+    expect(queryByText('Run Sel')).toBeNull();
   });
 
   // -----------------------------------------------------------------------
@@ -762,13 +752,13 @@ describe('QueryEditor', () => {
 
   test('FORMAT button has SQL tooltip in sql mode', () => {
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps({ language: 'sql' })));
-    const formatBtn = queryByText('FORMAT')!.closest('button');
+    const formatBtn = queryByText('Format')!.closest('button');
     expect(formatBtn?.getAttribute('title')).toContain('Format SQL');
   });
 
   test('FORMAT button has JSON tooltip in json mode', () => {
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps({ language: 'json' })));
-    const formatBtn = queryByText('FORMAT')!.closest('button');
+    const formatBtn = queryByText('Format')!.closest('button');
     expect(formatBtn?.getAttribute('title')).toContain('Format JSON');
   });
 
@@ -929,23 +919,23 @@ describe('QueryEditor', () => {
   test('selection change shows RUN SELECTION button', () => {
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
 
-    expect(queryByText('RUN SELECTION')).toBeNull();
+    expect(queryByText('Run Sel')).toBeNull();
 
     mockSelectionReturn = { isEmpty: () => false };
     act(() => { capturedSelectionCb?.(); });
 
-    expect(queryByText('RUN SELECTION')).not.toBeNull();
+    expect(queryByText('Run Sel')).not.toBeNull();
   });
 
   test('COPY shows COPY SELECTION when text is selected', () => {
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
 
-    expect(queryByText('COPY SELECTION')).toBeNull();
+    expect(queryByText('Copy Sel')).toBeNull();
 
     mockSelectionReturn = { isEmpty: () => false };
     act(() => { capturedSelectionCb?.(); });
 
-    expect(queryByText('COPY SELECTION')).not.toBeNull();
+    expect(queryByText('Copy Sel')).not.toBeNull();
   });
 
   test('clearing selection hides RUN SELECTION button', () => {
@@ -953,11 +943,11 @@ describe('QueryEditor', () => {
 
     mockSelectionReturn = { isEmpty: () => false };
     act(() => { capturedSelectionCb?.(); });
-    expect(queryByText('RUN SELECTION')).not.toBeNull();
+    expect(queryByText('Run Sel')).not.toBeNull();
 
     mockSelectionReturn = { isEmpty: () => true };
     act(() => { capturedSelectionCb?.(); });
-    expect(queryByText('RUN SELECTION')).toBeNull();
+    expect(queryByText('Run Sel')).toBeNull();
   });
 
   // -----------------------------------------------------------------------
@@ -1179,7 +1169,7 @@ describe('QueryEditor', () => {
     // Trigger selection change so COPY SELECTION button appears
     act(() => { capturedSelectionCb?.(); });
 
-    const copyBtn = queryByText('COPY SELECTION');
+    const copyBtn = queryByText('Copy Sel');
     expect(copyBtn).not.toBeNull();
     fireEvent.click(copyBtn!);
 
@@ -1457,18 +1447,18 @@ describe('QueryEditor', () => {
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps()));
 
     // Default is showLineNumbers=true, toggle to false
-    fireEvent.click(queryByText('LINES')!);
+    fireEvent.click(queryByText('Lines')!);
     expect(mockUpdateOptions).toHaveBeenCalledWith({ lineNumbers: 'off' });
 
     // Toggle back to true
     mockUpdateOptions.mockClear();
-    fireEvent.click(queryByText('LINES')!);
+    fireEvent.click(queryByText('Lines')!);
     expect(mockUpdateOptions).toHaveBeenCalledWith({ lineNumbers: 'on' });
   });
 
   test('COPY with empty editor copies empty string', () => {
     const { queryByText } = render(React.createElement(QueryEditor, createDefaultProps({ value: '' })));
-    fireEvent.click(queryByText('COPY')!);
+    fireEvent.click(queryByText('Copy')!);
     expect(mockClipboardWriteText).toHaveBeenCalledWith('');
   });
 
@@ -1499,12 +1489,12 @@ describe('QueryEditor', () => {
     // First, create a non-empty selection
     mockSelectionReturn = { isEmpty: () => false };
     act(() => { capturedSelectionCb?.(); });
-    expect(queryByText('RUN SELECTION')).not.toBeNull();
+    expect(queryByText('Run Sel')).not.toBeNull();
 
     // Now set null selection
     mockSelectionReturn = null;
     act(() => { capturedSelectionCb?.(); });
-    expect(queryByText('RUN SELECTION')).toBeNull();
+    expect(queryByText('Run Sel')).toBeNull();
   });
 
   // -----------------------------------------------------------------------
@@ -1580,7 +1570,7 @@ describe('QueryEditor', () => {
       language: 'txt' as unknown as 'sql',
     });
     const { queryByText } = render(React.createElement(QueryEditor, props));
-    fireEvent.click(queryByText('FORMAT')!);
+    fireEvent.click(queryByText('Format')!);
     // The else branch returns early, onChange should NOT be called
     expect(onChange).not.toHaveBeenCalled();
   });
@@ -1611,7 +1601,7 @@ describe('QueryEditor', () => {
     const { queryByText, queryByTestId } = render(
       React.createElement(QueryEditor, createDefaultProps({ onChange: undefined, value: 'SELECT 1' }))
     );
-    fireEvent.click(queryByText('CLEAR')!);
+    fireEvent.click(queryByText('Clear')!);
     const editor = queryByTestId('mock-monaco-editor') as HTMLTextAreaElement;
     expect(editor.value).toBe('');
   });
@@ -1621,7 +1611,7 @@ describe('QueryEditor', () => {
       React.createElement(QueryEditor, createDefaultProps({ onChange: undefined, value: 'select 1' }))
     );
     // Should not throw — onChange?.() handles undefined
-    fireEvent.click(queryByText('FORMAT')!);
+    fireEvent.click(queryByText('Format')!);
   });
 
   // -----------------------------------------------------------------------
diff --git a/tests/components/SnapshotTimeline.test.tsx b/tests/components/SnapshotTimeline.test.tsx
index 2badbe0..3877ac7 100644
--- a/tests/components/SnapshotTimeline.test.tsx
+++ b/tests/components/SnapshotTimeline.test.tsx
@@ -108,7 +108,7 @@ describe('SnapshotTimeline', () => {
     const { container } = render(
       <SnapshotTimeline snapshots={reversedSnapshots} onCompare={mock(() => {})} onDelete={mock(() => {})} />
     );
-    const labels = container.querySelectorAll('.text-xs.font-medium');
+    const labels = container.querySelectorAll('.text-xs.font-medium.truncate');
     expect(labels[0]?.textContent).toBe('Older');
     expect(labels[1]?.textContent).toBe('Newer');
   });

From cf4bbde6c3427e7450dc3f63d1c0b93b10f5784d Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 22:46:00 +0300
Subject: [PATCH 30/39] fix(test): update OperationsTab badge variant assertion
 for Shadcn v2

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 tests/components/admin/OperationsTab.test.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/tests/components/admin/OperationsTab.test.tsx b/tests/components/admin/OperationsTab.test.tsx
index de21d94..bf42cfe 100644
--- a/tests/components/admin/OperationsTab.test.tsx
+++ b/tests/components/admin/OperationsTab.test.tsx
@@ -883,11 +883,9 @@ describe('OperationsTab', () => {
       badge => badge.textContent?.includes('00:00:30')
     );
     expect(durationBadge400).toBeDefined();
-    // Outline variant: has text-foreground, does NOT have bg-destructive or bg-secondary
-    expect(durationBadge400!.className).toContain('text-foreground');
+    // Outline variant: does NOT have bg-destructive or bg-secondary
     expect(durationBadge400!.className).not.toContain('bg-destructive');
     expect(durationBadge400!.className).not.toContain('bg-secondary');
-    expect(durationBadge400!.className).not.toContain('border-transparent');
 
     // Find the badge containing '00:02:00' (destructive variant for >60s)
     const durationBadge402 = allBadges.find(

From 286d28d0116d2fe36832465d39c40fc3b1f297d9 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Thu, 26 Mar 2026 22:59:48 +0300
Subject: [PATCH 31/39] fix(test): update RootLayout font mock from Inter to
 Geist

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 tests/components/RootLayout.test.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/tests/components/RootLayout.test.tsx b/tests/components/RootLayout.test.tsx
index 202e476..c8f5221 100644
--- a/tests/components/RootLayout.test.tsx
+++ b/tests/components/RootLayout.test.tsx
@@ -5,7 +5,8 @@ import ReactDOMServer from 'react-dom/server';
 
 // Mock next/font/google
 mock.module('next/font/google', () => ({
-  Inter: () => ({ className: 'mock-inter' }),
+  Geist: () => ({ variable: 'mock-geist-sans', className: 'mock-geist-sans' }),
+  Geist_Mono: () => ({ variable: 'mock-geist-mono', className: 'mock-geist-mono' }),
 }));
 
 // Mock @/components/ui/sonner directly to avoid sonner/next-themes/lucide-react chain
@@ -65,7 +66,7 @@ describe('RootLayout', () => {
       </RootLayout>
     );
     expect(html).toContain('lang="en"');
-    expect(html).toContain('mock-inter');
+    expect(html).toContain('mock-geist-sans');
     expect(html).toContain('antialiased');
     expect(html).toContain('dark');
   });

From a74b53f6333b4d5d49a903feb1f882b3b167c0c9 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Fri, 27 Mar 2026 00:02:40 +0300
Subject: [PATCH 32/39] fix(ci): add bun install and build:lib to npm-publish
 workflow

The publish job was missing dependency installation and library build steps.
Without these, dist/ would be empty since it's gitignored.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .github/workflows/npm-publish.yml | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
index d1c2eb6..a6b158a 100644
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -62,12 +62,23 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: "1.3.9"
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: '22'
           registry-url: 'https://registry.npmjs.org'
 
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Build library (tsup)
+        run: bun run build:lib
+
       - name: Set version (if provided)
         if: inputs.version != ''
         env:

From 1c17dbe6134f6aa42d0adfa323356a134414da9d Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Fri, 27 Mar 2026 00:36:57 +0300
Subject: [PATCH 33/39] fix(tests): update PostgreSQL port in connection form
 tests to match standard configuration

Adjusted the port number in the useConnectionForm and connection-string-parser tests from 5433 to 5432 to reflect the standard PostgreSQL default port.
---
 tests/hooks/use-connection-form.test.ts         | 4 ++--
 tests/unit/lib/connection-string-parser.test.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/tests/hooks/use-connection-form.test.ts b/tests/hooks/use-connection-form.test.ts
index 89ec777..8020f54 100644
--- a/tests/hooks/use-connection-form.test.ts
+++ b/tests/hooks/use-connection-form.test.ts
@@ -76,7 +76,7 @@ describe('useConnectionForm', () => {
       name: 'My PG',
       type: 'postgres',
       host: 'db.example.com',
-      port: 5433,
+      port: 5432,
       user: 'pgadmin',
       password: 'pgpass',
       database: 'mydb',
@@ -91,7 +91,7 @@ describe('useConnectionForm', () => {
     expect(result.current.type).toBe('postgres');
     expect(result.current.name).toBe('My PG');
     expect(result.current.host).toBe('db.example.com');
-    expect(result.current.port).toBe('5433');
+    expect(result.current.port).toBe('5432');
     expect(result.current.user).toBe('pgadmin');
     expect(result.current.password).toBe('pgpass');
     expect(result.current.database).toBe('mydb');
diff --git a/tests/unit/lib/connection-string-parser.test.ts b/tests/unit/lib/connection-string-parser.test.ts
index 30b8b54..2a4cc86 100644
--- a/tests/unit/lib/connection-string-parser.test.ts
+++ b/tests/unit/lib/connection-string-parser.test.ts
@@ -22,11 +22,11 @@ describe('parseConnectionString', () => {
     });
 
     test('parses postgresql:// URL', () => {
-      const result = parseConnectionString('postgresql://user:pass@db.example.com:5433/appdb');
+      const result = parseConnectionString('postgresql://user:pass@db.example.com:5432/appdb');
       expect(result).not.toBeNull();
       expect(result!.type).toBe('postgres');
       expect(result!.host).toBe('db.example.com');
-      expect(result!.port).toBe('5433');
+      expect(result!.port).toBe('5432');
       expect(result!.database).toBe('appdb');
     });
 

From 26cb07327f92d0106daa956624f77797f5c2d1ef Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Fri, 27 Mar 2026 15:09:38 +0300
Subject: [PATCH 34/39] refactor: standardize font sizes across components

Updated various components to use consistent font sizes and styles, changing font weights from bold to medium and adjusting text sizes to enhance UI uniformity. This includes modifications in AIAutopilotPanel, CodeGenerator, ConnectionModal, and others to improve readability and maintain a cohesive design language.
---
 src/app/globals.css                           |  14 ---
 src/components/AIAutopilotPanel.tsx           |  12 +-
 src/components/CodeGenerator.tsx              |   4 +-
 src/components/ConnectionModal.tsx            | 118 +++++++++---------
 src/components/CreateTableModal.tsx           |  26 ++--
 src/components/DataCharts.tsx                 |  22 ++--
 src/components/DataImportModal.tsx            |  20 +--
 src/components/DataProfiler.tsx               |  22 ++--
 src/components/DatabaseDocs.tsx               |  22 ++--
 src/components/MaskingSettings.tsx            |  20 +--
 src/components/MobileNav.tsx                  |   2 +-
 src/components/NL2SQLPanel.tsx                |  16 +--
 src/components/PivotTable.tsx                 |  24 ++--
 src/components/QueryEditor.tsx                |  30 ++---
 src/components/QueryHistory.tsx               |  24 ++--
 src/components/QuerySafetyDialog.tsx          |  16 +--
 src/components/ResultsGrid.tsx                |   8 +-
 src/components/SaveQueryModal.tsx             |  10 +-
 src/components/SavedQueries.tsx               |  12 +-
 src/components/SchemaDiagram.tsx              |  18 +--
 src/components/SchemaDiff.tsx                 |  30 ++---
 src/components/SnapshotTimeline.tsx           |   6 +-
 src/components/Studio.tsx                     |  12 +-
 src/components/TestDataGenerator.tsx          |  14 +--
 src/components/VisualExplain.tsx              |  52 ++++----
 src/components/admin/tabs/AuditTab.tsx        |   6 +-
 src/components/admin/tabs/OperationsTab.tsx   |  34 ++---
 src/components/admin/tabs/OverviewTab.tsx     |  22 ++--
 src/components/admin/tabs/SecurityTab.tsx     |   2 +-
 src/components/community-section.tsx          |   4 +-
 .../monitoring/MonitoringDashboard.tsx        |  24 ++--
 .../monitoring/tabs/OverviewTab.tsx           |  40 +++---
 .../monitoring/tabs/PerformanceTab.tsx        |  30 ++---
 src/components/monitoring/tabs/PoolTab.tsx    |  22 ++--
 src/components/monitoring/tabs/QueriesTab.tsx |  16 +--
 .../monitoring/tabs/SessionsTab.tsx           |  22 ++--
 src/components/monitoring/tabs/StorageTab.tsx |  36 +++---
 src/components/monitoring/tabs/TablesTab.tsx  |  20 +--
 src/components/results-grid/ResultCard.tsx    |   2 +-
 .../results-grid/RowDetailSheet.tsx           |   4 +-
 src/components/results-grid/StatsBar.tsx      |   4 +-
 src/components/schema-explorer/ColumnList.tsx |   4 +-
 .../schema-explorer/SchemaExplorer.tsx        |  12 +-
 src/components/schema-explorer/TableItem.tsx  |   4 +-
 src/components/sidebar/ConnectionItem.tsx     |   6 +-
 src/components/sidebar/ConnectionsList.tsx    |   4 +-
 src/components/sidebar/Sidebar.tsx            |   2 +-
 src/components/studio/BottomPanel.tsx         |  14 +--
 src/components/studio/QueryToolbar.tsx        |  24 ++--
 src/components/studio/StudioDesktopHeader.tsx |  10 +-
 src/components/studio/StudioMobileHeader.tsx  |  12 +-
 src/workspace/StudioWorkspace.tsx             |  12 +-
 52 files changed, 466 insertions(+), 480 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 0f6b69e..683353e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,20 +3,6 @@
 @theme {
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
-
-  /* Studio IDE font scale — compact sizes for data-dense UIs */
-  --text-micro: 0.5rem;            /* 8px  — tiny badges */
-  --text-micro--line-height: 0.75rem;
-  --text-caption: 0.625rem;        /* 10px — status dots, minor labels */
-  --text-caption--line-height: 1rem;
-  --text-label: 0.6875rem;         /* 11px — toolbar buttons, sidebar counts */
-  --text-label--line-height: 1rem;
-  --text-body: 0.8125rem;          /* 13px — connection names, explorer items */
-  --text-body--line-height: 1.25rem;
-  --text-data: 0.75rem;            /* 12px — table cells, monospace data */
-  --text-data--line-height: 1rem;
-  --text-title: 0.9375rem;         /* 15px — section headings */
-  --text-title--line-height: 1.375rem;
 }
 
 /*
diff --git a/src/components/AIAutopilotPanel.tsx b/src/components/AIAutopilotPanel.tsx
index 069ae26..56ecaac 100644
--- a/src/components/AIAutopilotPanel.tsx
+++ b/src/components/AIAutopilotPanel.tsx
@@ -121,7 +121,7 @@ export function AIAutopilotPanel({ connection, schemaContext, onExecuteQuery }:
           const sql = codeContent.trim();
           elements.push(
             <div key={`code-${i}`} className="relative group my-2">
-              <pre className="bg-[#050505] rounded-lg p-3 text-body font-mono text-blue-300 overflow-x-auto whitespace-pre-wrap border border-white/5">
+              <pre className="bg-[#050505] rounded-lg p-3 text-xs font-mono text-blue-300 overflow-x-auto whitespace-pre-wrap border border-white/5">
                 {sql}
               </pre>
               <div className="absolute top-1.5 right-1.5 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -159,9 +159,9 @@ export function AIAutopilotPanel({ connection, schemaContext, onExecuteQuery }:
 
       // Headers
       if (line.startsWith('## ')) {
-        elements.push(<h2 key={i} className="text-sm font-bold text-zinc-200 mt-4 mb-2">{line.slice(3)}</h2>);
+        elements.push(<h2 key={i} className="text-xs font-medium text-zinc-200 mt-4 mb-2">{line.slice(3)}</h2>);
       } else if (line.startsWith('### ')) {
-        elements.push(<h3 key={i} className="text-xs font-bold text-zinc-300 mt-3 mb-1">{line.slice(4)}</h3>);
+        elements.push(<h3 key={i} className="text-xs font-medium text-zinc-300 mt-3 mb-1">{line.slice(4)}</h3>);
       } else if (line.startsWith('- ')) {
         const content = line.slice(2).replace(/\*\*(.*?)\*\*/g, '<strong class="text-zinc-200">$1</strong>');
         elements.push(<li key={i} className="text-xs text-zinc-400 ml-4 leading-relaxed" dangerouslySetInnerHTML={{ __html: content }} />);
@@ -187,7 +187,7 @@ export function AIAutopilotPanel({ connection, schemaContext, onExecuteQuery }:
           <div className="p-1 rounded bg-cyan-500/10">
             <Sparkles className="w-3.5 h-3.5 text-cyan-400" />
           </div>
-          <span className="text-xs font-bold text-cyan-400 uppercase tracking-widest">
+          <span className="text-xs font-medium text-cyan-400">
             AI Performance Autopilot
           </span>
         </div>
@@ -195,7 +195,7 @@ export function AIAutopilotPanel({ connection, schemaContext, onExecuteQuery }:
           onClick={runAutopilot}
           disabled={isLoading || !connection}
           className={cn(
-            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold transition-colors",
+            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
             isLoading
               ? "bg-cyan-600/20 text-cyan-400 cursor-wait"
               : "bg-cyan-600 hover:bg-cyan-500 text-white"
@@ -214,7 +214,7 @@ export function AIAutopilotPanel({ connection, schemaContext, onExecuteQuery }:
         {!report && !isLoading && !error && (
           <div className="flex flex-col items-center justify-center h-full opacity-40">
             <Sparkles className="w-8 h-8 mb-3" />
-            <p className="text-sm font-medium">AI Performance Autopilot</p>
+            <p className="text-xs font-medium">AI Performance Autopilot</p>
             <p className="text-xs text-zinc-500 mt-1">
               Click &quot;Run Analysis&quot; to get AI-powered optimization recommendations
             </p>
diff --git a/src/components/CodeGenerator.tsx b/src/components/CodeGenerator.tsx
index ec0bcae..f0658b2 100644
--- a/src/components/CodeGenerator.tsx
+++ b/src/components/CodeGenerator.tsx
@@ -205,7 +205,7 @@ export function CodeGenerator({
         <div className="flex items-center justify-between px-5 py-3 border-b border-white/5">
           <div className="flex items-center gap-2">
             <Code className="w-4 h-4 text-purple-400" />
-            <span className="text-sm font-bold text-zinc-200">Code Generator</span>
+            <span className="text-xs font-medium text-zinc-200">Code Generator</span>
             <span className="text-xs text-zinc-500 font-mono">{tableName}</span>
             {databaseType && (
               <span className="text-xs text-zinc-600 font-mono uppercase">{databaseType}</span>
@@ -247,7 +247,7 @@ export function CodeGenerator({
 
         {/* Code Preview */}
         <div className="relative">
-          <pre className="p-5 text-body font-mono text-zinc-300 overflow-auto max-h-[50vh] bg-[#050505] leading-relaxed whitespace-pre">
+          <pre className="p-5 text-xs font-mono text-zinc-300 overflow-auto max-h-[50vh] bg-[#050505] leading-relaxed whitespace-pre">
             {code}
           </pre>
           <button
diff --git a/src/components/ConnectionModal.tsx b/src/components/ConnectionModal.tsx
index b0dec74..9d5bb5b 100644
--- a/src/components/ConnectionModal.tsx
+++ b/src/components/ConnectionModal.tsx
@@ -94,18 +94,18 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
             <div className="p-2 rounded-xl bg-blue-500/10 border border-blue-500/20">
               <Zap className="w-5 h-5 text-blue-400" />
             </div>
-            <h2 className="text-xl md:text-2xl font-bold tracking-tight">
+            <h2 className="text-xs md:text-[0.8125rem] font-medium">
               {isEditMode ? 'Edit Connection' : 'New Connection'}
             </h2>
           </div>
           <div className="flex items-center justify-between">
-            <p className="text-sm text-zinc-500">
+            <p className="text-xs text-zinc-500">
               {isEditMode ? 'Update your database connection parameters.' : 'Configure your database connection parameters securely.'}
             </p>
             {!isEditMode && (
               <button
                 onClick={() => setShowPasteInput(!showPasteInput)}
-                className="flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider text-blue-400 hover:text-blue-300 transition-colors px-2 py-1 rounded-md hover:bg-blue-500/10"
+                className="flex items-center gap-1.5 text-xs font-mediumr text-blue-400 hover:text-blue-300 transition-colors px-2 py-1 rounded-md hover:bg-blue-500/10"
               >
                 <ClipboardPaste className="w-3 h-3" />
                 Paste URL
@@ -124,7 +124,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
               className="mb-6 overflow-hidden"
             >
               <div className="p-3 rounded-lg border border-blue-500/20 bg-blue-500/5 space-y-2">
-                <Label className="text-xs font-bold uppercase tracking-wider text-blue-400">
+                <Label className="text-xs font-mediumr text-blue-400">
                   Paste Connection URL
                 </Label>
                 <div className="flex gap-2">
@@ -132,13 +132,13 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                     value={pasteInput}
                     onChange={(e) => setPasteInput(e.target.value)}
                     placeholder="postgres://user:pass@host:5432/db  or  mongodb://..."
-                    className="h-9 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 text-sm font-mono flex-1"
+                    className="h-9 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 text-xs font-mono flex-1"
                     onKeyDown={(e) => e.key === 'Enter' && handlePasteConnectionString()}
                   />
                   <Button
                     size="sm"
                     onClick={handlePasteConnectionString}
-                    className="bg-blue-600 hover:bg-blue-500 text-white h-9 px-4 text-xs font-bold"
+                    className="bg-blue-600 hover:bg-blue-500 text-white h-9 px-4 text-xs font-medium"
                   >
                     Parse
                   </Button>
@@ -156,27 +156,27 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
           <div className="space-y-2">
             <div className="flex items-center gap-2 mb-1">
               <Database className="w-3 h-3 text-zinc-500" />
-              <Label htmlFor="name" className="text-xs font-bold uppercase tracking-wider text-zinc-500">Connection Name</Label>
+              <Label htmlFor="name" className="text-xs font-mediumr text-zinc-500">Connection Name</Label>
             </div>
             <Input
               id="name"
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="My Database"
-              className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-sm"
+              className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-xs"
             />
           </div>
 
           {/* Environment Selector */}
           <div className="space-y-2">
-            <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Environment</Label>
+            <Label className="text-xs font-mediumr text-zinc-500">Environment</Label>
             <div className="flex flex-wrap items-center gap-2">
               {(Object.keys(ENVIRONMENT_COLORS) as ConnectionEnvironment[]).map((env) => (
                 <button
                   key={env}
                   onClick={() => setEnvironment(env)}
                   className={cn(
-                    "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-bold uppercase tracking-wider transition-all border",
+                    "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-mediumr transition-all border",
                     environment === env
                       ? "border-white/20 bg-white/5 text-zinc-200"
                       : "border-transparent text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
@@ -213,7 +213,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                 )}
               >
                 <db.icon className={cn("w-6 h-6 mb-1 transition-transform group-hover:scale-110", type === db.value ? db.color : "text-zinc-600")} />
-                <span className={cn("text-xs font-semibold", type === db.value ? "text-zinc-200" : "text-zinc-500")}>
+                <span className={cn("text-xs font-medium", type === db.value ? "text-zinc-200" : "text-zinc-500")}>
                   {db.label}
                 </span>
               </button>
@@ -228,7 +228,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                       <button
                         onClick={() => setMongoConnectionMode('host')}
                         className={cn(
-                          "flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-md text-xs font-bold transition-all",
+                          "flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-md text-xs font-medium transition-all",
                           mongoConnectionMode === 'host'
                             ? "bg-blue-600/20 text-blue-400 border border-blue-500/30"
                             : "text-zinc-500 hover:text-zinc-300"
@@ -240,7 +240,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                       <button
                         onClick={() => setMongoConnectionMode('connectionString')}
                         className={cn(
-                          "flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-md text-xs font-bold transition-all",
+                          "flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-md text-xs font-medium transition-all",
                           mongoConnectionMode === 'connectionString'
                             ? "bg-blue-600/20 text-blue-400 border border-blue-500/30"
                             : "text-zinc-500 hover:text-zinc-300"
@@ -257,27 +257,27 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                       <div className="space-y-2">
                         <div className="flex items-center gap-2 mb-1">
                           <Link className="w-3 h-3 text-zinc-500" />
-                          <Label htmlFor="connectionString" className="text-xs font-bold uppercase tracking-wider text-zinc-500">Connection URI</Label>
+                          <Label htmlFor="connectionString" className="text-xs font-mediumr text-zinc-500">Connection URI</Label>
                         </div>
                         <Input
                           id="connectionString"
                           value={connectionString}
                           onChange={(e) => setConnectionString(e.target.value)}
                           placeholder="mongodb://localhost:27017/mydb  or  mongodb+srv://..."
-                          className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-sm font-mono"
+                          className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-xs font-mono"
                         />
                       </div>
                       <div className="space-y-2">
                         <div className="flex items-center gap-2 mb-1">
                           <Database className="w-3 h-3 text-zinc-500" />
-                          <Label htmlFor="database" className="text-xs font-bold uppercase tracking-wider text-zinc-500">Database Name (optional override)</Label>
+                          <Label htmlFor="database" className="text-xs font-mediumr text-zinc-500">Database Name (optional override)</Label>
                         </div>
                         <Input
                           id="database"
                           value={database}
                           onChange={(e) => setDatabase(e.target.value)}
                           placeholder="Extracted from URI if not provided"
-                          className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-sm font-mono"
+                          className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-xs font-mono"
                         />
                       </div>
                     </>
@@ -286,7 +286,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                       <div className="space-y-2">
                         <div className="flex items-center gap-2 mb-1">
                           <Globe className="w-3 h-3 text-zinc-500" />
-                          <Label htmlFor="host" className="text-xs font-bold uppercase tracking-wider text-zinc-500">Host & Instance</Label>
+                          <Label htmlFor="host" className="text-xs font-mediumr text-zinc-500">Host & Instance</Label>
                         </div>
                         <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
                           <Input
@@ -294,13 +294,13 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                             value={host}
                             onChange={(e) => setHost(e.target.value)}
                             placeholder="localhost"
-                            className="md:col-span-3 h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-sm"
+                            className="md:col-span-3 h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-xs"
                           />
                           <Input
                             id="port"
                             value={port}
                             onChange={(e) => setPort(e.target.value)}
-                            className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-sm font-mono"
+                            className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-xs font-mono"
                           />
                         </div>
                       </div>
@@ -309,20 +309,20 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                         <div className="space-y-2">
                           <div className="flex items-center gap-2 mb-1">
                             <Key className="w-3 h-3 text-zinc-500" />
-                            <Label htmlFor="user" className="text-xs font-bold uppercase tracking-wider text-zinc-500">Username</Label>
+                            <Label htmlFor="user" className="text-xs font-mediumr text-zinc-500">Username</Label>
                           </div>
                           <Input
                             id="user"
                             value={user}
                             onChange={(e) => setUser(e.target.value)}
                             placeholder="postgres"
-                            className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-sm"
+                            className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-xs"
                           />
                         </div>
                         <div className="space-y-2">
                           <div className="flex items-center gap-2 mb-1">
                             <ShieldCheck className="w-3 h-3 text-zinc-500" />
-                            <Label htmlFor="password" className="text-xs font-bold uppercase tracking-wider text-zinc-500">Password</Label>
+                            <Label htmlFor="password" className="text-xs font-mediumr text-zinc-500">Password</Label>
                           </div>
                           <Input
                             id="password"
@@ -330,7 +330,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                             value={password}
                             onChange={(e) => setPassword(e.target.value)}
                             placeholder="••••••••"
-                            className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-sm"
+                            className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-xs"
                           />
                         </div>
                       </div>
@@ -338,14 +338,14 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                       <div className="space-y-2">
                         <div className="flex items-center gap-2 mb-1">
                           <Database className="w-3 h-3 text-zinc-500" />
-                          <Label htmlFor="database" className="text-xs font-bold uppercase tracking-wider text-zinc-500">Database Name</Label>
+                          <Label htmlFor="database" className="text-xs font-mediumr text-zinc-500">Database Name</Label>
                         </div>
                         <Input
                           id="database"
                           value={database}
                           onChange={(e) => setDatabase(e.target.value)}
                           placeholder="production_db"
-                          className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-sm font-mono"
+                          className="h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-xs font-mono"
                         />
                       </div>
                     </>
@@ -359,12 +359,12 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
               <button
                 type="button"
                 onClick={() => setShowAdvanced(!showAdvanced)}
-                className="flex items-center gap-2 w-full px-3 py-2 rounded-lg border border-white/5 hover:border-white/10 bg-zinc-900/30 text-xs font-bold text-zinc-400 hover:text-zinc-200 transition-all"
+                className="flex items-center gap-2 w-full px-3 py-2 rounded-lg border border-white/5 hover:border-white/10 bg-zinc-900/30 text-xs font-medium text-zinc-400 hover:text-zinc-200 transition-all"
               >
                 <Settings2 className="w-3.5 h-3.5 text-orange-500" />
                 <span>Advanced</span>
                 {(serviceName || instanceName) && (
-                  <span className="ml-1 px-1.5 py-0.5 rounded text-label bg-orange-500/10 text-orange-400 border border-orange-500/20">
+                  <span className="ml-1 px-1.5 py-0.5 rounded text-[0.625rem] bg-orange-500/10 text-orange-400 border border-orange-500/20">
                     SET
                   </span>
                 )}
@@ -381,12 +381,12 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                     <div className="p-3 rounded-lg border border-orange-500/10 bg-orange-500/5 space-y-3">
                       {type === 'oracle' && (
                         <div className="space-y-1.5">
-                          <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Service Name</Label>
+                          <Label className="text-xs font-mediumr text-zinc-500">Service Name</Label>
                           <Input
                             value={serviceName}
                             onChange={(e) => setServiceName(e.target.value)}
                             placeholder="ORCL or XEPDB1"
-                            className="h-9 bg-zinc-900/50 border-white/5 focus:border-orange-500/50 text-sm"
+                            className="h-9 bg-zinc-900/50 border-white/5 focus:border-orange-500/50 text-xs"
                           />
                           <p className="text-xs text-zinc-500">
                             If empty, the Database Name field is used as the service name.
@@ -395,12 +395,12 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                       )}
                       {type === 'mssql' && (
                         <div className="space-y-1.5">
-                          <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Instance Name</Label>
+                          <Label className="text-xs font-mediumr text-zinc-500">Instance Name</Label>
                           <Input
                             value={instanceName}
                             onChange={(e) => setInstanceName(e.target.value)}
                             placeholder="SQLEXPRESS"
-                            className="h-9 bg-zinc-900/50 border-white/5 focus:border-orange-500/50 text-sm"
+                            className="h-9 bg-zinc-900/50 border-white/5 focus:border-orange-500/50 text-xs"
                           />
                           <p className="text-xs text-zinc-500">
                             For named instances (e.g. SQLEXPRESS). Leave empty for default instance.
@@ -421,12 +421,12 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
               <button
                 type="button"
                 onClick={() => setShowSSL(!showSSL)}
-                className="flex items-center gap-2 w-full px-3 py-2 rounded-lg border border-white/5 hover:border-white/10 bg-zinc-900/30 text-xs font-bold text-zinc-400 hover:text-zinc-200 transition-all"
+                className="flex items-center gap-2 w-full px-3 py-2 rounded-lg border border-white/5 hover:border-white/10 bg-zinc-900/30 text-xs font-medium text-zinc-400 hover:text-zinc-200 transition-all"
               >
                 <Lock className="w-3.5 h-3.5 text-emerald-500" />
                 <span>SSL / TLS</span>
                 {sslMode !== 'disable' && (
-                  <span className="ml-1 px-1.5 py-0.5 rounded text-label bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
+                  <span className="ml-1 px-1.5 py-0.5 rounded text-[0.625rem] bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                     {sslMode.toUpperCase()}
                   </span>
                 )}
@@ -442,7 +442,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                   >
                     <div className="p-3 rounded-lg border border-emerald-500/10 bg-emerald-500/5 space-y-3">
                       <div className="space-y-2">
-                        <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">SSL Mode</Label>
+                        <Label className="text-xs font-mediumr text-zinc-500">SSL Mode</Label>
                         <div className="flex flex-wrap gap-1.5">
                           {(['disable', 'require', 'verify-ca', 'verify-full'] as SSLMode[]).map((mode) => (
                             <button
@@ -450,7 +450,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                               type="button"
                               onClick={() => setSSLMode(mode)}
                               className={cn(
-                                "px-2.5 py-1.5 rounded-md text-xs font-bold uppercase tracking-wider transition-all border",
+                                "px-2.5 py-1.5 rounded-md text-xs font-mediumr transition-all border",
                                 sslMode === mode
                                   ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-400"
                                   : "border-transparent text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
@@ -464,7 +464,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                       {sslMode !== 'disable' && (
                         <div className="space-y-3">
                           <div className="space-y-1.5">
-                            <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">CA Certificate (PEM)</Label>
+                            <Label className="text-xs font-mediumr text-zinc-500">CA Certificate (PEM)</Label>
                             <textarea
                               value={caCert}
                               onChange={(e) => setCaCert(e.target.value)}
@@ -476,7 +476,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                           {(sslMode === 'verify-ca' || sslMode === 'verify-full') && (
                             <>
                               <div className="space-y-1.5">
-                                <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Client Certificate (PEM)</Label>
+                                <Label className="text-xs font-mediumr text-zinc-500">Client Certificate (PEM)</Label>
                                 <textarea
                                   value={clientCert}
                                   onChange={(e) => setClientCert(e.target.value)}
@@ -486,7 +486,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                                 />
                               </div>
                               <div className="space-y-1.5">
-                                <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Client Private Key (PEM)</Label>
+                                <Label className="text-xs font-mediumr text-zinc-500">Client Private Key (PEM)</Label>
                                 <textarea
                                   value={clientKey}
                                   onChange={(e) => setClientKey(e.target.value)}
@@ -508,12 +508,12 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
               <button
                 type="button"
                 onClick={() => setShowSSH(!showSSH)}
-                className="flex items-center gap-2 w-full px-3 py-2 rounded-lg border border-white/5 hover:border-white/10 bg-zinc-900/30 text-xs font-bold text-zinc-400 hover:text-zinc-200 transition-all"
+                className="flex items-center gap-2 w-full px-3 py-2 rounded-lg border border-white/5 hover:border-white/10 bg-zinc-900/30 text-xs font-medium text-zinc-400 hover:text-zinc-200 transition-all"
               >
                 <Terminal className="w-3.5 h-3.5 text-purple-500" />
                 <span>SSH Tunnel</span>
                 {sshEnabled && (
-                  <span className="ml-1 px-1.5 py-0.5 rounded text-label bg-purple-500/10 text-purple-400 border border-purple-500/20">
+                  <span className="ml-1 px-1.5 py-0.5 rounded text-[0.625rem] bg-purple-500/10 text-purple-400 border border-purple-500/20">
                     ON
                   </span>
                 )}
@@ -535,46 +535,46 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                           onChange={(e) => setSSHEnabled(e.target.checked)}
                           className="rounded border-white/20 bg-zinc-900/50"
                         />
-                        <span className="text-xs font-semibold text-zinc-300">Enable SSH Tunnel</span>
+                        <span className="text-xs font-medium text-zinc-300">Enable SSH Tunnel</span>
                       </label>
                       {sshEnabled && (
                         <div className="space-y-3">
                           <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
                             <div className="md:col-span-3 space-y-1.5">
-                              <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">SSH Host</Label>
+                              <Label className="text-xs font-mediumr text-zinc-500">SSH Host</Label>
                               <Input
                                 value={sshHost}
                                 onChange={(e) => setSSHHost(e.target.value)}
                                 placeholder="bastion.example.com"
-                                className="h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-sm"
+                                className="h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-xs"
                               />
                             </div>
                             <div className="space-y-1.5">
-                              <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Port</Label>
+                              <Label className="text-xs font-mediumr text-zinc-500">Port</Label>
                               <Input
                                 value={sshPort}
                                 onChange={(e) => setSSHPort(e.target.value)}
-                                className="h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-sm font-mono"
+                                className="h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-xs font-mono"
                               />
                             </div>
                           </div>
                           <div className="space-y-1.5">
-                            <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Username</Label>
+                            <Label className="text-xs font-mediumr text-zinc-500">Username</Label>
                             <Input
                               value={sshUsername}
                               onChange={(e) => setSSHUsername(e.target.value)}
                               placeholder="ubuntu"
-                              className="h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-sm"
+                              className="h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-xs"
                             />
                           </div>
                           <div className="space-y-2">
-                            <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Auth Method</Label>
+                            <Label className="text-xs font-mediumr text-zinc-500">Auth Method</Label>
                             <div className="flex gap-2">
                               <button
                                 type="button"
                                 onClick={() => setSSHAuthMethod('password')}
                                 className={cn(
-                                  "flex-1 px-3 py-1.5 rounded-md text-xs font-bold uppercase tracking-wider transition-all border",
+                                  "flex-1 px-3 py-1.5 rounded-md text-xs font-mediumr transition-all border",
                                   sshAuthMethod === 'password'
                                     ? "border-purple-500/30 bg-purple-500/10 text-purple-400"
                                     : "border-transparent text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
@@ -586,7 +586,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                                 type="button"
                                 onClick={() => setSSHAuthMethod('privateKey')}
                                 className={cn(
-                                  "flex-1 px-3 py-1.5 rounded-md text-xs font-bold uppercase tracking-wider transition-all border",
+                                  "flex-1 px-3 py-1.5 rounded-md text-xs font-mediumr transition-all border",
                                   sshAuthMethod === 'privateKey'
                                     ? "border-purple-500/30 bg-purple-500/10 text-purple-400"
                                     : "border-transparent text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
@@ -598,19 +598,19 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                           </div>
                           {sshAuthMethod === 'password' ? (
                             <div className="space-y-1.5">
-                              <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">SSH Password</Label>
+                              <Label className="text-xs font-mediumr text-zinc-500">SSH Password</Label>
                               <Input
                                 type="password"
                                 value={sshPassword}
                                 onChange={(e) => setSSHPassword(e.target.value)}
                                 placeholder="••••••••"
-                                className="h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-sm"
+                                className="h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-xs"
                               />
                             </div>
                           ) : (
                             <div className="space-y-3">
                               <div className="space-y-1.5">
-                                <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Private Key (PEM)</Label>
+                                <Label className="text-xs font-mediumr text-zinc-500">Private Key (PEM)</Label>
                                 <textarea
                                   value={sshPrivateKey}
                                   onChange={(e) => setSSHPrivateKey(e.target.value)}
@@ -620,13 +620,13 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                                 />
                               </div>
                               <div className="space-y-1.5">
-                                <Label className="text-xs font-bold uppercase tracking-wider text-zinc-500">Passphrase (optional)</Label>
+                                <Label className="text-xs font-mediumr text-zinc-500">Passphrase (optional)</Label>
                                 <Input
                                   type="password"
                                   value={sshPassphrase}
                                   onChange={(e) => setSSHPassphrase(e.target.value)}
                                   placeholder="Key passphrase (if encrypted)"
-                                  className="h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-sm"
+                                  className="h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-xs"
                                 />
                               </div>
                             </div>
@@ -674,7 +674,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
           <Button
             variant="ghost"
             onClick={onClose}
-            className="w-full md:w-auto text-zinc-500 hover:text-zinc-200 hover:bg-white/5 text-xs font-semibold"
+            className="w-full md:w-auto text-zinc-500 hover:text-zinc-200 hover:bg-white/5 text-xs font-medium"
           >
             Cancel
           </Button>
@@ -683,7 +683,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
               variant="outline"
               onClick={handleTestConnection}
               disabled={isTesting}
-              className="w-full md:w-auto border-white/10 text-zinc-400 hover:text-white hover:bg-white/5 text-xs font-bold h-10 px-4"
+              className="w-full md:w-auto border-white/10 text-zinc-400 hover:text-white hover:bg-white/5 text-xs font-medium h-10 px-4"
             >
               {isTesting ? (
                 <div className="flex items-center gap-2">
@@ -697,7 +697,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
             <Button
               onClick={handleConnect}
               disabled={isTesting || (getDBConfig(type).showConnectionStringToggle && mongoConnectionMode === 'connectionString' && !connectionString.trim())}
-              className="w-full md:w-auto min-w-0 md:min-w-[140px] bg-blue-600 hover:bg-blue-500 text-white font-bold text-xs h-10 shadow-lg shadow-blue-900/20 group relative overflow-hidden"
+              className="w-full md:w-auto min-w-0 md:min-w-[140px] bg-blue-600 hover:bg-blue-500 text-white font-medium text-xs h-10 shadow-lg shadow-blue-900/20 group relative overflow-hidden"
             >
               <AnimatePresence mode="wait">
                 {isTesting ? (
diff --git a/src/components/CreateTableModal.tsx b/src/components/CreateTableModal.tsx
index 5d62d21..27de263 100644
--- a/src/components/CreateTableModal.tsx
+++ b/src/components/CreateTableModal.tsx
@@ -128,8 +128,8 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
               <TableIcon className="w-5 h-5 text-blue-400" />
             </div>
             <div>
-              <DialogTitle className="text-xl font-bold tracking-tight">Create New Table</DialogTitle>
-              <p className="text-xs text-zinc-500 mt-1 uppercase tracking-widest font-medium">Define schema structure</p>
+              <DialogTitle className="text-xs font-medium">Create New Table</DialogTitle>
+              <p className="text-xs text-zinc-500 mt-1 font-medium">Define schema structure</p>
             </div>
           </div>
         </DialogHeader>
@@ -139,7 +139,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
           <div className="space-y-4">
             <div className="flex items-center gap-2">
               <Settings2 className="w-4 h-4 text-blue-500/50" />
-              <Label className="text-xs font-bold uppercase tracking-[0.2em] text-zinc-500">General Settings</Label>
+              <Label className="text-xs font-medium text-zinc-500">General Settings</Label>
             </div>
             <div className="grid gap-2">
               <Label htmlFor="tableName" className="text-xs font-medium text-zinc-400">Table Name</Label>
@@ -158,13 +158,13 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <Type className="w-4 h-4 text-emerald-500/50" />
-                <Label className="text-xs font-bold uppercase tracking-[0.2em] text-zinc-500">Column Definitions</Label>
+                <Label className="text-xs font-medium text-zinc-500">Column Definitions</Label>
               </div>
               <Button 
                 variant="ghost" 
                 size="sm" 
                 onClick={addColumn}
-                className="h-7 text-xs uppercase tracking-widest font-bold gap-2 hover:bg-emerald-500/10 hover:text-emerald-400"
+                className="h-7 text-xs font-medium gap-2 hover:bg-emerald-500/10 hover:text-emerald-400"
               >
                 <Plus className="w-3 h-3" /> Add Column
               </Button>
@@ -177,7 +177,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
                   className="flex items-end gap-3 p-3 rounded-lg bg-zinc-900/30 border border-white/5 group hover:border-white/10 transition-colors"
                 >
                   <div className="flex-1 space-y-2">
-                    <Label className="text-xs text-zinc-500 uppercase font-bold">Column Name</Label>
+                    <Label className="text-xs text-zinc-500 font-medium">Column Name</Label>
                     <Input
                       value={col.name}
                       onChange={(e) => updateColumn(index, { name: e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, '_') })}
@@ -187,7 +187,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
                   </div>
 
                   <div className="w-40 space-y-2">
-                    <Label className="text-xs text-zinc-500 uppercase font-bold">Type</Label>
+                    <Label className="text-xs text-zinc-500 font-medium">Type</Label>
                     <Select 
                       value={col.type} 
                       onValueChange={(val) => updateColumn(index, { type: val })}
@@ -206,7 +206,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
 
                   <div className="flex items-center gap-4 pb-2 px-2">
                     <div className="flex flex-col items-center gap-1.5" title="Primary Key">
-                      <Label className="text-micro text-zinc-600 uppercase font-black">PK</Label>
+                      <Label className="text-[0.5rem] text-zinc-600 uppercase font-black">PK</Label>
                       <Checkbox 
                         checked={col.isPrimary} 
                         onCheckedChange={(checked) => updateColumn(index, { 
@@ -217,7 +217,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
                       />
                     </div>
                     <div className="flex flex-col items-center gap-1.5" title="Nullable">
-                      <Label className="text-micro text-zinc-600 uppercase font-black">Null</Label>
+                      <Label className="text-[0.5rem] text-zinc-600 uppercase font-black">Null</Label>
                       <Checkbox 
                         checked={col.isNullable} 
                         onCheckedChange={(checked) => updateColumn(index, { isNullable: !!checked })}
@@ -225,7 +225,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
                       />
                     </div>
                     <div className="flex flex-col items-center gap-1.5" title="Unique">
-                      <Label className="text-micro text-zinc-600 uppercase font-black">Unq</Label>
+                      <Label className="text-[0.5rem] text-zinc-600 uppercase font-black">Unq</Label>
                       <Checkbox 
                         checked={col.isUnique} 
                         onCheckedChange={(checked) => updateColumn(index, { isUnique: !!checked })}
@@ -252,9 +252,9 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center gap-2">
                  <div className="w-2 h-2 rounded-full bg-blue-500" />
-                 <span className="text-xs uppercase font-bold text-zinc-500 tracking-widest">SQL Preview</span>
+                 <span className="text-xs font-medium text-zinc-500">SQL Preview</span>
                </div>
-               <span className="text-label text-zinc-700">Auto-generated</span>
+               <span className="text-[0.625rem] text-zinc-700">Auto-generated</span>
              </div>
              <pre className="text-xs text-blue-400/80 whitespace-pre-wrap leading-relaxed">
                {generateSQL() || '-- Name your table to see SQL'}
@@ -269,7 +269,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
           <Button 
             onClick={handleCreate} 
             disabled={isSubmitting || !tableName}
-            className="bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold gap-2 px-6"
+            className="bg-blue-600 hover:bg-blue-500 text-white text-xs font-medium gap-2 px-6"
           >
             {isSubmitting ? <Loader2 className="w-3 h-3 animate-spin" /> : <Plus className="w-3 h-3" />}
             CREATE TABLE
diff --git a/src/components/DataCharts.tsx b/src/components/DataCharts.tsx
index 79dd357..24c4655 100644
--- a/src/components/DataCharts.tsx
+++ b/src/components/DataCharts.tsx
@@ -226,7 +226,7 @@ const CustomTooltip = ({ active, payload, label }: TooltipProps) => {
     <div className="bg-[#111] border border-white/10 rounded-lg px-3 py-2 shadow-xl">
       <p className="text-zinc-400 text-xs mb-1">{label}</p>
       {payload.map((entry, index) => (
-        <p key={index} className="text-sm" style={{ color: entry.color }}>
+        <p key={index} className="text-xs" style={{ color: entry.color }}>
           {entry.name}: <span className="font-mono font-medium">{formatNumber(entry.value)}</span>
         </p>
       ))}
@@ -499,7 +499,7 @@ export function DataCharts({ result }: DataChartsProps) {
     return (
       <div className="h-full flex flex-col items-center justify-center bg-[#080808] text-zinc-500">
         <TrendingUp className="w-12 h-12 mb-4 opacity-30" />
-        <p className="text-sm font-medium mb-1">Cannot Visualize Data</p>
+        <p className="text-xs font-medium mb-1">Cannot Visualize Data</p>
         <p className="text-xs text-zinc-600">{analysis.reason}</p>
       </div>
     );
@@ -554,7 +554,7 @@ export function DataCharts({ result }: DataChartsProps) {
         {/* X-Axis Selector */}
         {chartType !== 'pie' && (
           <div className="flex items-center gap-2">
-            <span className="text-xs text-zinc-600 uppercase tracking-wider">X-Axis</span>
+            <span className="text-xs text-zinc-600r">X-Axis</span>
             <Select value={xAxis} onValueChange={setXAxis}>
               <SelectTrigger className="h-7 w-[140px] text-xs bg-white/5 border-white/10">
                 <SelectValue placeholder="Select field" />
@@ -575,7 +575,7 @@ export function DataCharts({ result }: DataChartsProps) {
 
         {/* Y-Axis Selector (for pie, this becomes the value field) */}
         <div className="flex items-center gap-2">
-          <span className="text-xs text-zinc-600 uppercase tracking-wider">
+          <span className="text-xs text-zinc-600r">
             {chartType === 'pie' ? 'Value' : 'Y-Axis'}
           </span>
           <DropdownMenu>
@@ -607,7 +607,7 @@ export function DataCharts({ result }: DataChartsProps) {
         {/* Scatter Y-axis */}
         {chartType === 'scatter' && (
           <div className="flex items-center gap-2">
-            <span className="text-xs text-zinc-600 uppercase tracking-wider">Y</span>
+            <span className="text-xs text-zinc-600r">Y</span>
             <Select value={scatterY} onValueChange={setScatterY}>
               <SelectTrigger className="h-7 w-[120px] text-xs bg-white/5 border-white/10">
                 <SelectValue placeholder="Y field" />
@@ -624,7 +624,7 @@ export function DataCharts({ result }: DataChartsProps) {
         {/* Histogram buckets */}
         {chartType === 'histogram' && (
           <div className="flex items-center gap-2">
-            <span className="text-xs text-zinc-600 uppercase tracking-wider">Buckets</span>
+            <span className="text-xs text-zinc-600r">Buckets</span>
             <Select value={String(histogramBuckets)} onValueChange={(v) => setHistogramBuckets(Number(v))}>
               <SelectTrigger className="h-7 w-[70px] text-xs bg-white/5 border-white/10">
                 <SelectValue />
@@ -641,14 +641,14 @@ export function DataCharts({ result }: DataChartsProps) {
         {/* Aggregation */}
         {chartType !== 'scatter' && chartType !== 'histogram' && chartType !== 'pie' && (
           <div className="flex items-center gap-2">
-            <span className="text-xs text-zinc-600 uppercase tracking-wider">Agg</span>
+            <span className="text-xs text-zinc-600r">Agg</span>
             <Select value={aggregation} onValueChange={(v) => setAggregation(v as AggregationType)}>
               <SelectTrigger className="h-7 w-[80px] text-xs bg-white/5 border-white/10">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent className="bg-[#111] border-white/10">
                 {(['none', 'sum', 'avg', 'count', 'min', 'max'] as const).map(a => (
-                  <SelectItem key={a} value={a} className="text-xs uppercase">{a}</SelectItem>
+                  <SelectItem key={a} value={a} className="text-xs">{a}</SelectItem>
                 ))}
               </SelectContent>
             </Select>
@@ -658,7 +658,7 @@ export function DataCharts({ result }: DataChartsProps) {
         {/* Date Grouping */}
         {analysis.dateFields.length > 0 && chartType !== 'scatter' && chartType !== 'histogram' && (
           <div className="flex items-center gap-2">
-            <span className="text-xs text-zinc-600 uppercase tracking-wider">Group</span>
+            <span className="text-xs text-zinc-600r">Group</span>
             <Select value={dateGrouping || 'none'} onValueChange={(v) => setDateGrouping(v === 'none' ? '' : v as DateGrouping)}>
               <SelectTrigger className="h-7 w-[80px] text-xs bg-white/5 border-white/10">
                 <SelectValue />
@@ -721,7 +721,7 @@ export function DataCharts({ result }: DataChartsProps) {
         {/* Export Button */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="sm" className="h-7 text-xs font-bold uppercase text-zinc-500 hover:text-white gap-1">
+            <Button variant="ghost" size="sm" className="h-7 text-xs font-medium text-zinc-500 hover:text-white gap-1">
               <Download className="w-3 h-3" /> Export
             </Button>
           </DropdownMenuTrigger>
@@ -739,7 +739,7 @@ export function DataCharts({ result }: DataChartsProps) {
       {/* Chart Area */}
       <div ref={chartRef} className="flex-1 p-4 min-h-0">
         {yAxis.length === 0 ? (
-          <div className="h-full flex items-center justify-center text-zinc-600 text-sm">
+          <div className="h-full flex items-center justify-center text-zinc-600 text-xs">
             Select at least one numeric field for the chart
           </div>
         ) : (
diff --git a/src/components/DataImportModal.tsx b/src/components/DataImportModal.tsx
index 48bbe38..0915f0a 100644
--- a/src/components/DataImportModal.tsx
+++ b/src/components/DataImportModal.tsx
@@ -272,11 +272,11 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
           {(['upload', 'preview', 'configure', 'ready'] as ImportStep[]).map((s, idx) => (
             <React.Fragment key={s}>
               <div className={cn(
-                "flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider",
+                "flex items-center gap-1.5 text-xs font-mediumr",
                 step === s ? "text-blue-400" : idx < ['upload', 'preview', 'configure', 'ready'].indexOf(step) ? "text-emerald-400" : "text-zinc-600"
               )}>
                 <div className={cn(
-                  "w-5 h-5 rounded-full flex items-center justify-center text-label",
+                  "w-5 h-5 rounded-full flex items-center justify-center text-[0.625rem]",
                   step === s ? "bg-blue-500/20 border border-blue-500/40" :
                   idx < ['upload', 'preview', 'configure', 'ready'].indexOf(step) ? "bg-emerald-500/20 border border-emerald-500/40" :
                   "bg-white/5 border border-white/10"
@@ -305,7 +305,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                 className="border-2 border-dashed border-white/10 rounded-xl p-12 text-center cursor-pointer hover:border-blue-500/30 hover:bg-blue-500/5 transition-all"
               >
                 <Upload className="w-10 h-10 text-zinc-600 mx-auto mb-4" />
-                <p className="text-sm text-zinc-400 mb-1">
+                <p className="text-xs text-zinc-400 mb-1">
                   Drop a file here or click to browse
                 </p>
                 <p className="text-xs text-zinc-600">
@@ -352,7 +352,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                     <FileText className="w-5 h-5 text-emerald-400" />
                   )}
                   <div>
-                    <p className="text-sm font-medium">{fileName}</p>
+                    <p className="text-xs font-medium">{fileName}</p>
                     <p className="text-xs text-zinc-500">
                       {parsedData.totalRows} rows, {parsedData.headers.length} columns
                     </p>
@@ -374,7 +374,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                   <thead>
                     <tr className="bg-[#0d0d0d]">
                       {parsedData.headers.map(h => (
-                        <th key={h} className="px-3 py-2 text-left text-xs uppercase tracking-wider text-zinc-500 font-mono border-b border-white/5 whitespace-nowrap">
+                        <th key={h} className="px-3 py-2 text-left text-xs uppercase text-zinc-500 font-mono border-b border-white/5 whitespace-nowrap">
                           {h}
                         </th>
                       ))}
@@ -448,7 +448,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                     value={newTableName}
                     onChange={(e) => setNewTableName(e.target.value)}
                     placeholder="imported_data"
-                    className="mt-1 bg-[#111] border-white/10 text-sm h-9"
+                    className="mt-1 bg-[#111] border-white/10 text-xs h-9"
                   />
                 </div>
               ) : (
@@ -457,7 +457,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                   <select
                     value={targetTable}
                     onChange={(e) => setTargetTable(e.target.value)}
-                    className="w-full mt-1 bg-[#111] border border-white/10 rounded-md px-3 py-2 text-sm text-zinc-300 outline-none focus:border-blue-500/40"
+                    className="w-full mt-1 bg-[#111] border border-white/10 rounded-md px-3 py-2 text-xs text-zinc-300 outline-none focus:border-blue-500/40"
                   >
                     <option value="">-- Select a table --</option>
                     {tables.map(t => (
@@ -471,7 +471,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
               <div className="space-y-2">
                 <label className="text-xs text-zinc-400 font-medium">Column Mapping</label>
                 <div className="border border-white/5 rounded-lg overflow-hidden">
-                  <div className="bg-[#0d0d0d] grid grid-cols-[1fr,auto,1fr] gap-2 px-3 py-1.5 text-xs uppercase tracking-wider text-zinc-500 border-b border-white/5">
+                  <div className="bg-[#0d0d0d] grid grid-cols-[1fr,auto,1fr] gap-2 px-3 py-1.5 text-xs text-zinc-500 border-b border-white/5">
                     <span>Source Column</span>
                     <span></span>
                     <span>Target Column</span>
@@ -519,13 +519,13 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
             <div className="p-4 space-y-4">
               <div className="flex items-center justify-between">
                 <div>
-                  <p className="text-sm font-medium">Ready to Import</p>
+                  <p className="text-xs font-medium">Ready to Import</p>
                   <p className="text-xs text-zinc-500 mt-0.5">
                     {parsedData?.totalRows} rows into {createNewTable ? newTableName || 'imported_data' : targetTable}
                   </p>
                 </div>
                 {databaseType && (
-                  <span className="text-xs uppercase tracking-wider text-zinc-500 bg-white/5 px-2 py-1 rounded">
+                  <span className="text-xs text-zinc-500 bg-white/5 px-2 py-1 rounded">
                     {databaseType}
                   </span>
                 )}
diff --git a/src/components/DataProfiler.tsx b/src/components/DataProfiler.tsx
index 599d900..755c481 100644
--- a/src/components/DataProfiler.tsx
+++ b/src/components/DataProfiler.tsx
@@ -167,7 +167,7 @@ export function DataProfiler({
         <div className="flex items-center justify-between px-5 py-3 border-b border-white/5">
           <div className="flex items-center gap-2">
             <BarChart3 className="w-4 h-4 text-cyan-400" />
-            <span className="text-sm font-bold text-zinc-200">Data Profiler</span>
+            <span className="text-xs font-medium text-zinc-200">Data Profiler</span>
             <span className="text-xs text-zinc-500 font-mono">{tableName}</span>
           </div>
           <button onClick={onClose} className="p-1 rounded hover:bg-white/5 text-zinc-500">
@@ -180,7 +180,7 @@ export function DataProfiler({
           {isLoading && (
             <div className="flex items-center justify-center gap-2 py-12 text-zinc-500">
               <Loader2 className="w-5 h-5 animate-spin" />
-              <span className="text-sm">Profiling {tableName}...</span>
+              <span className="text-xs">Profiling {tableName}...</span>
             </div>
           )}
 
@@ -196,16 +196,16 @@ export function DataProfiler({
               {/* Summary Stats */}
               <div className="grid grid-cols-3 gap-3">
                 <div className="bg-[#0a0a0a] rounded-lg p-3 border border-white/5">
-                  <p className="text-xs font-bold text-zinc-500 uppercase tracking-wider">Total Rows</p>
-                  <p className="text-lg font-bold text-zinc-200 mt-1">{profile.totalRows.toLocaleString()}</p>
+                  <p className="text-xs font-medium text-zinc-500r">Total Rows</p>
+                  <p className="text-xs font-medium text-zinc-200 mt-1">{profile.totalRows.toLocaleString()}</p>
                 </div>
                 <div className="bg-[#0a0a0a] rounded-lg p-3 border border-white/5">
-                  <p className="text-xs font-bold text-zinc-500 uppercase tracking-wider">Columns</p>
-                  <p className="text-lg font-bold text-zinc-200 mt-1">{profile.columns.length}</p>
+                  <p className="text-xs font-medium text-zinc-500r">Columns</p>
+                  <p className="text-xs font-medium text-zinc-200 mt-1">{profile.columns.length}</p>
                 </div>
                 <div className="bg-[#0a0a0a] rounded-lg p-3 border border-white/5">
-                  <p className="text-xs font-bold text-zinc-500 uppercase tracking-wider">Avg Null %</p>
-                  <p className="text-lg font-bold text-zinc-200 mt-1">
+                  <p className="text-xs font-medium text-zinc-500r">Avg Null %</p>
+                  <p className="text-xs font-medium text-zinc-200 mt-1">
                     {profile.columns.length > 0
                       ? Math.round(profile.columns.reduce((sum, c) => sum + c.nullPercent, 0) / profile.columns.length)
                       : 0}%
@@ -215,13 +215,13 @@ export function DataProfiler({
 
               {/* Column Profiles */}
               <div className="space-y-2">
-                <h3 className="text-xs font-bold text-zinc-400 uppercase tracking-wider">Column Profiles</h3>
+                <h3 className="text-xs font-medium text-zinc-400r">Column Profiles</h3>
                 {profile.columns.map((col) => (
                   <div key={col.name} className="bg-[#0a0a0a] rounded-lg p-3 border border-white/5">
                     <div className="flex items-center justify-between mb-2">
                       <div className="flex items-center gap-2">
                         <Hash className="w-3 h-3 text-blue-400" />
-                        <span className="text-xs font-bold text-zinc-200">{col.name}</span>
+                        <span className="text-xs font-medium text-zinc-200">{col.name}</span>
                         {col.type && (
                           <span className="text-xs text-zinc-500 font-mono">{col.type}</span>
                         )}
@@ -314,7 +314,7 @@ export function DataProfiler({
                 <div className="bg-cyan-500/5 border border-cyan-500/10 rounded-lg p-4">
                   <div className="flex items-center gap-2 mb-2">
                     <Sparkles className="w-3.5 h-3.5 text-cyan-400" />
-                    <span className="text-xs font-bold text-cyan-400 uppercase tracking-wider">
+                    <span className="text-xs font-medium text-cyan-400r">
                       AI Analysis
                     </span>
                     {isAiLoading && <Loader2 className="w-3 h-3 animate-spin text-cyan-400" />}
diff --git a/src/components/DatabaseDocs.tsx b/src/components/DatabaseDocs.tsx
index d7eb533..607aa1a 100644
--- a/src/components/DatabaseDocs.tsx
+++ b/src/components/DatabaseDocs.tsx
@@ -111,8 +111,8 @@ export function DatabaseDocs({ schema, schemaContext, databaseType }: DatabaseDo
   // Simple markdown rendering for AI docs
   const renderMarkdown = (text: string) => {
     return text.split('\n').map((line, i) => {
-      if (line.startsWith('## ')) return <h2 key={i} className="text-sm font-bold text-zinc-200 mt-4 mb-2">{line.slice(3)}</h2>;
-      if (line.startsWith('### ')) return <h3 key={i} className="text-xs font-bold text-zinc-300 mt-3 mb-1">{line.slice(4)}</h3>;
+      if (line.startsWith('## ')) return <h2 key={i} className="text-xs font-medium text-zinc-200 mt-4 mb-2">{line.slice(3)}</h2>;
+      if (line.startsWith('### ')) return <h3 key={i} className="text-xs font-medium text-zinc-300 mt-3 mb-1">{line.slice(4)}</h3>;
       if (line.startsWith('- ')) {
         const content = line.slice(2).replace(/\*\*(.*?)\*\*/g, '<strong class="text-zinc-200">$1</strong>');
         return <li key={i} className="text-xs text-zinc-400 ml-4 leading-relaxed" dangerouslySetInnerHTML={{ __html: content }} />;
@@ -137,17 +137,17 @@ export function DatabaseDocs({ schema, schemaContext, databaseType }: DatabaseDo
           <div className="p-1 rounded bg-teal-500/10">
             <FileText className="w-3.5 h-3.5 text-teal-400" />
           </div>
-          <span className="text-xs font-bold text-teal-400 uppercase tracking-widest">
+          <span className="text-xs font-medium text-teal-400">
             Database Docs
           </span>
-          <span className="text-label text-zinc-500 font-mono">{schema.length} tables</span>
+          <span className="text-[0.625rem] text-zinc-500 font-mono">{schema.length} tables</span>
         </div>
         <div className="flex items-center gap-1.5">
           <button
             onClick={generateAiDocs}
             disabled={isAiLoading}
             className={cn(
-              "flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-bold transition-colors",
+              "flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors",
               isAiLoading
                 ? "bg-teal-600/20 text-teal-400 cursor-wait"
                 : "bg-teal-600 hover:bg-teal-500 text-white"
@@ -158,7 +158,7 @@ export function DatabaseDocs({ schema, schemaContext, databaseType }: DatabaseDo
           </button>
           <button
             onClick={exportMarkdown}
-            className="flex items-center gap-1 px-2.5 py-1 rounded-lg bg-white/5 text-zinc-400 text-xs font-bold hover:bg-white/10 transition-colors"
+            className="flex items-center gap-1 px-2.5 py-1 rounded-lg bg-white/5 text-zinc-400 text-xs font-medium hover:bg-white/10 transition-colors"
           >
             <Download className="w-3 h-3" /> Export MD
           </button>
@@ -191,7 +191,7 @@ export function DatabaseDocs({ schema, schemaContext, databaseType }: DatabaseDo
           <div className="bg-teal-500/5 border border-teal-500/10 rounded-lg p-4 mb-4">
             <div className="flex items-center gap-2 mb-3">
               <Sparkles className="w-3.5 h-3.5 text-teal-400" />
-              <span className="text-xs font-bold text-teal-400 uppercase tracking-wider">
+              <span className="text-xs font-medium text-teal-400">
                 AI-Generated Documentation
               </span>
               {isAiLoading && <Loader2 className="w-3 h-3 animate-spin text-teal-400" />}
@@ -205,12 +205,12 @@ export function DatabaseDocs({ schema, schemaContext, databaseType }: DatabaseDo
         )}
 
         {/* Table Reference */}
-        <h3 className="text-xs font-bold text-zinc-400 uppercase tracking-wider">Table Reference</h3>
+        <h3 className="text-xs font-medium text-zinc-400">Table Reference</h3>
         {filteredSchema.map(table => (
           <div key={table.name} className="bg-[#0a0a0a] border border-white/5 rounded-lg overflow-hidden">
             <div className="px-3 py-2 flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <span className="text-xs font-bold text-zinc-200">{table.name}</span>
+                <span className="text-xs font-medium text-zinc-200">{table.name}</span>
                 {table.rowCount !== undefined && (
                   <span className="text-xs text-zinc-500 font-mono">{table.rowCount.toLocaleString()} rows</span>
                 )}
@@ -219,7 +219,7 @@ export function DatabaseDocs({ schema, schemaContext, databaseType }: DatabaseDo
             </div>
             {table.columns && table.columns.length > 0 && (
               <div className="border-t border-white/5">
-                <table className="w-full text-body">
+                <table className="w-full text-xs">
                   <thead>
                     <tr className="text-zinc-500">
                       <th className="text-left px-3 py-1 font-normal">Column</th>
@@ -234,7 +234,7 @@ export function DatabaseDocs({ schema, schemaContext, databaseType }: DatabaseDo
                         <td className="px-3 py-1 text-zinc-300 font-mono">{col.name}</td>
                         <td className="px-3 py-1 text-zinc-500 font-mono">{col.type}</td>
                         <td className="px-3 py-1">
-                          {col.isPrimary && <span className="text-amber-400 text-label font-bold">PK</span>}
+                          {col.isPrimary && <span className="text-amber-400 text-[0.625rem] font-medium">PK</span>}
                         </td>
                         <td className="px-3 py-1 text-zinc-600">{col.nullable !== false ? 'Yes' : 'No'}</td>
                       </tr>
diff --git a/src/components/MaskingSettings.tsx b/src/components/MaskingSettings.tsx
index c5480f8..bfc5244 100644
--- a/src/components/MaskingSettings.tsx
+++ b/src/components/MaskingSettings.tsx
@@ -172,7 +172,7 @@ export function MaskingSettings() {
       {/* Global Toggle */}
       <Card>
         <CardHeader>
-          <CardTitle className="flex items-center gap-2 text-lg">
+          <CardTitle className="flex items-center gap-2 text-xs">
             <Shield className="h-5 w-5 text-purple-400" />
             Data Masking Settings
           </CardTitle>
@@ -181,7 +181,7 @@ export function MaskingSettings() {
           {/* Global Enable */}
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm font-medium">Enable Data Masking Globally</p>
+              <p className="text-xs font-medium">Enable Data Masking Globally</p>
               <p className="text-xs text-muted-foreground">
                 When enabled, sensitive columns are automatically detected and masked
               </p>
@@ -194,7 +194,7 @@ export function MaskingSettings() {
 
           {/* Role Permissions */}
           <div className="space-y-3">
-            <h3 className="text-sm font-semibold text-zinc-300">Role Permissions</h3>
+            <h3 className="text-xs font-medium text-zinc-300">Role Permissions</h3>
             <div className="grid gap-3 rounded-lg border border-white/10 p-4">
               {/* Admin Row */}
               <div className="flex items-center justify-between">
@@ -246,7 +246,7 @@ export function MaskingSettings() {
           {/* Masking Patterns */}
           <div className="space-y-3">
             <div className="flex items-center justify-between">
-              <h3 className="text-sm font-semibold text-zinc-300">Masking Patterns</h3>
+              <h3 className="text-xs font-medium text-zinc-300">Masking Patterns</h3>
               <Button variant="outline" size="sm" className="h-7 text-xs" onClick={openNewDialog}>
                 <Plus className="w-3 h-3 mr-1" />
                 Add Pattern
@@ -266,11 +266,11 @@ export function MaskingSettings() {
                       />
                       <div className="min-w-0 flex-1">
                         <div className="flex items-center gap-2">
-                          <span className="text-sm font-medium text-zinc-200">{pattern.name}</span>
+                          <span className="text-xs font-medium text-zinc-200">{pattern.name}</span>
                           {pattern.isBuiltin && (
-                            <Badge variant="secondary" className="text-label h-4 px-1">builtin</Badge>
+                            <Badge variant="secondary" className="text-[0.625rem] h-4 px-1">builtin</Badge>
                           )}
-                          <Badge variant="outline" className="text-label h-4 px-1">{pattern.maskType}</Badge>
+                          <Badge variant="outline" className="text-[0.625rem] h-4 px-1">{pattern.maskType}</Badge>
                         </div>
                         <p className="text-xs text-zinc-500 font-mono truncate mt-0.5">
                           {pattern.columnPatterns.join(', ')}
@@ -305,7 +305,7 @@ export function MaskingSettings() {
 
           {/* Preview */}
           <div className="space-y-3">
-            <h3 className="text-sm font-semibold text-zinc-300">Preview</h3>
+            <h3 className="text-xs font-medium text-zinc-300">Preview</h3>
             <div className="rounded-lg border border-white/5 bg-[#0a0a0a] p-4 space-y-2">
               {config.patterns.filter(p => p.enabled).slice(0, 5).map(pattern => {
                 const preview = MASK_TYPE_PREVIEWS[pattern.maskType];
@@ -382,7 +382,7 @@ export function MaskingSettings() {
             <div className="space-y-2">
               <label className="text-xs font-medium text-zinc-300">Column Patterns (one per line)</label>
               <textarea
-                className="w-full h-32 bg-[#0a0a0a] border border-white/10 rounded-md px-3 py-2 text-sm font-mono text-zinc-200 focus:outline-none focus:ring-1 focus:ring-purple-500/50 resize-none"
+                className="w-full h-32 bg-[#0a0a0a] border border-white/10 rounded-md px-3 py-2 text-xs font-mono text-zinc-200 focus:outline-none focus:ring-1 focus:ring-purple-500/50 resize-none"
                 value={editColumnPatterns}
                 onChange={(e) => setEditColumnPatterns(e.target.value)}
                 placeholder={"email\ne_mail\nuser_email"}
@@ -394,7 +394,7 @@ export function MaskingSettings() {
             {/* Preview */}
             <div className="rounded-lg border border-white/5 bg-[#0a0a0a] p-3">
               <p className="text-xs text-zinc-500 mb-1">Preview:</p>
-              <p className="text-sm font-mono text-purple-300">
+              <p className="text-xs font-mono text-purple-300">
                 {getPreviewMasked(editMaskType, editMaskType === 'custom' ? editCustomMask : undefined)}
               </p>
             </div>
diff --git a/src/components/MobileNav.tsx b/src/components/MobileNav.tsx
index 35018fe..6c2a919 100644
--- a/src/components/MobileNav.tsx
+++ b/src/components/MobileNav.tsx
@@ -38,7 +38,7 @@ export function MobileNav({ activeTab, onTabChange }: MobileNavProps) {
             )}>
               <Icon className="w-5 h-5" />
             </div>
-            <span className="text-xs font-medium uppercase tracking-wider">{tab.label}</span>
+            <span className="text-xs font-mediumr">{tab.label}</span>
             {isActive && (
               <div className="absolute -top-1 w-1 h-1 bg-blue-400 rounded-full" />
             )}
diff --git a/src/components/NL2SQLPanel.tsx b/src/components/NL2SQLPanel.tsx
index 3f7ec2f..1394869 100644
--- a/src/components/NL2SQLPanel.tsx
+++ b/src/components/NL2SQLPanel.tsx
@@ -152,11 +152,11 @@ export function NL2SQLPanel({
           <div className="p-1 rounded bg-violet-500/10">
             <MessageSquare className="w-3.5 h-3.5 text-violet-400" />
           </div>
-          <span className="text-xs font-bold text-violet-400 uppercase tracking-widest">
+          <span className="text-xs font-medium text-violet-400">
             Natural Language Query
           </span>
           {messages.length > 0 && (
-            <span className="text-label text-zinc-500 font-mono">
+            <span className="text-[0.625rem] text-zinc-500 font-mono">
               {messages.filter(m => m.role === 'user').length} questions
             </span>
           )}
@@ -185,7 +185,7 @@ export function NL2SQLPanel({
         {messages.length === 0 && (
           <div className="flex flex-col items-center justify-center h-full opacity-40">
             <Sparkles className="w-8 h-8 mb-3" />
-            <p className="text-sm font-medium">Ask a question in plain English</p>
+            <p className="text-xs font-medium">Ask a question in plain English</p>
             <p className="text-xs text-zinc-500 mt-1">
               e.g. &quot;Show me the top 10 employees by salary&quot;
             </p>
@@ -207,19 +207,19 @@ export function NL2SQLPanel({
                   {/* Show extracted query with action buttons */}
                   {msg.query && (
                     <div className="mb-2">
-                      <pre className="bg-[#050505] rounded p-2 text-body font-mono text-blue-300 overflow-x-auto whitespace-pre-wrap border border-white/5">
+                      <pre className="bg-[#050505] rounded p-2 text-xs font-mono text-blue-300 overflow-x-auto whitespace-pre-wrap border border-white/5">
                         {msg.query}
                       </pre>
                       <div className="flex gap-1.5 mt-1.5">
                         <button
                           onClick={() => onExecuteQuery(msg.query!)}
-                          className="flex items-center gap-1 px-2 py-1 rounded bg-blue-600/20 border border-blue-500/20 text-blue-400 text-xs font-bold hover:bg-blue-600/30 transition-colors"
+                          className="flex items-center gap-1 px-2 py-1 rounded bg-blue-600/20 border border-blue-500/20 text-blue-400 text-xs font-medium hover:bg-blue-600/30 transition-colors"
                         >
                           <Play className="w-3 h-3 fill-current" /> Run
                         </button>
                         <button
                           onClick={() => onLoadQuery(msg.query!)}
-                          className="flex items-center gap-1 px-2 py-1 rounded bg-white/5 border border-white/5 text-zinc-400 text-xs font-bold hover:bg-white/10 transition-colors"
+                          className="flex items-center gap-1 px-2 py-1 rounded bg-white/5 border border-white/5 text-zinc-400 text-xs font-medium hover:bg-white/10 transition-colors"
                         >
                           Load to Editor
                         </button>
@@ -228,7 +228,7 @@ export function NL2SQLPanel({
                   )}
                   {/* Show explanation text (non-code parts) */}
                   {msg.content.replace(/```[\s\S]*?```/g, '').trim() && (
-                    <p className="text-zinc-400 text-body leading-relaxed whitespace-pre-wrap">
+                    <p className="text-zinc-400 text-xs leading-relaxed whitespace-pre-wrap">
                       {msg.content.replace(/```[\s\S]*?```/g, '').trim()}
                     </p>
                   )}
@@ -270,7 +270,7 @@ export function NL2SQLPanel({
           <button
             type="submit"
             disabled={isLoading || !question.trim()}
-            className="bg-violet-600 hover:bg-violet-500 disabled:opacity-50 px-3 py-2 rounded-lg text-white text-xs font-bold transition-colors flex items-center gap-1.5"
+            className="bg-violet-600 hover:bg-violet-500 disabled:opacity-50 px-3 py-2 rounded-lg text-white text-xs font-medium transition-colors flex items-center gap-1.5"
           >
             {isLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Send className="w-3 h-3" />}
           </button>
diff --git a/src/components/PivotTable.tsx b/src/components/PivotTable.tsx
index 202cfbe..bd3d112 100644
--- a/src/components/PivotTable.tsx
+++ b/src/components/PivotTable.tsx
@@ -126,7 +126,7 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
     return (
       <div className="h-full flex flex-col items-center justify-center opacity-30">
         <Columns3 className="w-8 h-8 mb-3" />
-        <p className="text-sm font-medium">Pivot Table</p>
+        <p className="text-xs font-medium">Pivot Table</p>
         <p className="text-xs text-zinc-500 mt-1">Execute a query to create pivot tables</p>
       </div>
     );
@@ -138,11 +138,11 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
       <div className="flex items-center gap-3 px-4 py-2 border-b border-white/5 bg-[#0a0a0a] flex-wrap">
         {/* Row Field */}
         <div className="flex items-center gap-1.5">
-          <span className="text-xs text-zinc-500 font-bold uppercase">Rows:</span>
+          <span className="text-xs text-zinc-500 font-medium">Rows:</span>
           <select
             value={rowField || ''}
             onChange={e => setRowField(e.target.value || null)}
-            className="bg-[#111] border border-white/10 rounded px-2 py-1 text-body text-zinc-300 outline-none"
+            className="bg-[#111] border border-white/10 rounded px-2 py-1 text-xs text-zinc-300 outline-none"
           >
             <option value="">Select...</option>
             {fields.map(f => <option key={f} value={f}>{f}</option>)}
@@ -151,11 +151,11 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
 
         {/* Column Field */}
         <div className="flex items-center gap-1.5">
-          <span className="text-xs text-zinc-500 font-bold uppercase">Columns:</span>
+          <span className="text-xs text-zinc-500 font-medium">Columns:</span>
           <select
             value={colField || ''}
             onChange={e => setColField(e.target.value || null)}
-            className="bg-[#111] border border-white/10 rounded px-2 py-1 text-body text-zinc-300 outline-none"
+            className="bg-[#111] border border-white/10 rounded px-2 py-1 text-xs text-zinc-300 outline-none"
           >
             <option value="">None</option>
             {fields.filter(f => f !== rowField).map(f => <option key={f} value={f}>{f}</option>)}
@@ -164,11 +164,11 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
 
         {/* Value Field */}
         <div className="flex items-center gap-1.5">
-          <span className="text-xs text-zinc-500 font-bold uppercase">Values:</span>
+          <span className="text-xs text-zinc-500 font-medium">Values:</span>
           <select
             value={valueField || ''}
             onChange={e => setValueField(e.target.value || null)}
-            className="bg-[#111] border border-white/10 rounded px-2 py-1 text-body text-zinc-300 outline-none"
+            className="bg-[#111] border border-white/10 rounded px-2 py-1 text-xs text-zinc-300 outline-none"
           >
             <option value="">Count</option>
             {fields.filter(f => f !== rowField && f !== colField).map(f => <option key={f} value={f}>{f}</option>)}
@@ -182,7 +182,7 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
               key={fn}
               onClick={() => setAggFunction(fn)}
               className={cn(
-                "px-1.5 py-0.5 rounded text-xs font-bold transition-colors",
+                "px-1.5 py-0.5 rounded text-xs font-medium transition-colors",
                 aggFunction === fn
                   ? "bg-blue-500/20 text-blue-400 border border-blue-500/20"
                   : "text-zinc-600 hover:text-zinc-400"
@@ -200,7 +200,7 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
               const sql = generateSQL();
               if (sql) onLoadQuery(sql);
             }}
-            className="ml-auto flex items-center gap-1 px-2 py-1 rounded text-xs font-bold text-zinc-500 hover:text-blue-400 hover:bg-blue-500/10 transition-colors"
+            className="ml-auto flex items-center gap-1 px-2 py-1 rounded text-xs font-medium text-zinc-500 hover:text-blue-400 hover:bg-blue-500/10 transition-colors"
           >
             <ArrowRight className="w-3 h-3" /> Generate SQL
           </button>
@@ -210,14 +210,14 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
       {/* Pivot Result */}
       <div className="flex-1 overflow-auto">
         {pivotData && pivotData.pivotRows.length > 0 ? (
-          <table className="w-full text-body font-mono">
+          <table className="w-full text-xs font-mono">
             <thead className="sticky top-0 z-10 bg-[#0d0d0d]">
               <tr>
-                <th className="text-left px-3 py-2 text-zinc-500 border-b border-r border-white/5 font-bold uppercase tracking-wider">
+                <th className="text-left px-3 py-2 text-zinc-500 border-b border-r border-white/5 font-mediumr">
                   {rowField}
                 </th>
                 {pivotData.colKeys.map(ck => (
-                  <th key={ck} className="text-right px-3 py-2 text-zinc-500 border-b border-r border-white/5 font-bold">
+                  <th key={ck} className="text-right px-3 py-2 text-zinc-500 border-b border-r border-white/5 font-medium">
                     {ck === '__all__' ? `${AGG_LABELS[aggFunction]}(${valueField || '*'})` : ck}
                   </th>
                 ))}
diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
index 6fc9a7b..6cfde9c 100644
--- a/src/components/QueryEditor.tsx
+++ b/src/components/QueryEditor.tsx
@@ -493,7 +493,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
           <Button
             variant="ghost"
             size="sm"
-            className="h-7 text-xs font-bold uppercase tracking-widest text-white bg-blue-600 hover:bg-blue-500 hover:text-white gap-2 shadow-[0_0_10px_rgba(37,99,235,0.3)] animate-in fade-in zoom-in duration-200"
+            className="h-7 text-xs font-medium text-white bg-blue-600 hover:bg-blue-500 hover:text-white gap-2 shadow-[0_0_10px_rgba(37,99,235,0.3)] animate-in fade-in zoom-in duration-200"
             onClick={handleExecute}
           >
             <Play className="w-3 h-3 fill-current" /> Run Sel
@@ -503,7 +503,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
         <Button
           variant="ghost"
           size="sm"
-          className="h-7 text-xs font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-2"
+          className="h-7 text-xs font-medium text-zinc-500 hover:text-white gap-2"
           onClick={handleFormat}
           title={language === 'json' ? "Format JSON (Shift+Alt+F)" : "Format SQL (Shift+Alt+F)"}
         >
@@ -513,7 +513,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
         <Button
           variant="ghost"
           size="sm"
-          className="h-7 text-xs font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-2"
+          className="h-7 text-xs font-medium text-zinc-500 hover:text-white gap-2"
           onClick={handleCopy}
         >
           <Copy className="w-3 h-3" /> {hasSelection ? 'Copy Sel' : 'Copy'}
@@ -522,7 +522,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
         <Button
           variant="ghost"
           size="sm"
-          className="h-7 text-xs font-bold uppercase tracking-widest text-zinc-500 hover:text-red-400 gap-2"
+          className="h-7 text-xs font-medium text-zinc-500 hover:text-red-400 gap-2"
           onClick={handleClear}
         >
           <Trash2 className="w-3 h-3" /> Clear
@@ -534,7 +534,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
           variant="ghost"
           size="sm"
           className={cn(
-            "h-7 text-xs font-bold uppercase tracking-widest gap-2",
+            "h-7 text-xs font-medium gap-2",
             showLineNumbers ? "text-zinc-300" : "text-zinc-500 hover:text-white"
           )}
           onClick={() => setShowLineNumbers(!showLineNumbers)}
@@ -547,7 +547,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
           variant="ghost"
           size="sm"
           className={cn(
-            "h-7 text-xs font-bold uppercase tracking-widest gap-2",
+            "h-7 text-xs font-medium gap-2",
             showAi
               ? "text-white bg-blue-600 hover:bg-blue-500 hover:text-white shadow-[0_0_10px_rgba(37,99,235,0.4)]"
               : "text-zinc-500 hover:text-blue-400"
@@ -564,13 +564,13 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
               <Button
                 variant="ghost"
                 size="sm"
-                className="h-7 text-xs font-bold uppercase tracking-widest text-amber-500 hover:text-amber-400 gap-2"
+                className="h-7 text-xs font-medium text-amber-500 hover:text-amber-400 gap-2"
                 onClick={onExplain}
               >
                 <Zap className="w-3 h-3" /> Explain
               </Button>
             )}
-            <kbd className="px-1.5 py-0.5 rounded bg-zinc-900 border border-white/5 text-caption text-zinc-600 font-mono">
+            <kbd className="px-1.5 py-0.5 rounded bg-zinc-900 border border-white/5 text-[0.5625rem] text-zinc-600 font-mono">
               ⌘+Enter
             </kbd>
           </div>
@@ -594,20 +594,20 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
                     <div className="p-1 rounded-md bg-blue-500/10">
                       <Sparkles className="w-3.5 h-3.5 text-blue-400" />
                     </div>
-                    <span className="text-label font-black text-blue-400 uppercase tracking-[0.2em]">Expert DBA Mode</span>
+                    <span className="text-[0.625rem] font-black text-blue-400">Expert DBA Mode</span>
                   </div>
                   <div className="flex items-center gap-2">
                     {aiConversationHistory.length > 0 && (
                       <button
                         type="button"
                         onClick={() => setAiConversationHistory([])}
-                        className="text-label text-zinc-500 hover:text-zinc-300 font-medium px-1.5 py-0.5 rounded bg-white/5 hover:bg-white/10 transition-colors"
+                        className="text-[0.625rem] text-zinc-500 hover:text-zinc-300 font-medium px-1.5 py-0.5 rounded bg-white/5 hover:bg-white/10 transition-colors"
                         title="Clear conversation history"
                       >
                         {aiConversationHistory.length / 2} turns - Clear
                       </button>
                     )}
-                    <span className="text-label text-zinc-500 font-medium">Context: {tables.length} tables</span>
+                    <span className="text-[0.625rem] text-zinc-500 font-medium">Context: {tables.length} tables</span>
                     <div className="w-1 h-1 rounded-full bg-emerald-500 animate-pulse" />
                   </div>
                   </div>
@@ -625,8 +625,8 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
                             <X className="w-3 h-3 text-red-400" />
                           </div>
                           <div className="flex-1">
-                            <p className="text-body font-bold text-red-400 uppercase tracking-tight mb-0.5">AI Error</p>
-                            <p className="text-data text-red-300/90 leading-relaxed">{aiError}</p>
+                            <p className="text-xs font-medium text-red-400 mb-0.5">AI Error</p>
+                            <p className="text-xs text-red-300/90 leading-relaxed">{aiError}</p>
                           </div>
                           <button
                             type="button"
@@ -647,7 +647,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
                     value={aiPrompt}
                     onChange={(e) => setAiPrompt(e.target.value)}
                     placeholder="Describe the data you need in plain English... (e.g. 'Show me the revenue growth per month')"
-                    className="bg-transparent border-none outline-none text-body text-zinc-100 w-full h-12 placeholder:text-zinc-600 font-medium"
+                    className="bg-transparent border-none outline-none text-xs text-zinc-100 w-full h-12 placeholder:text-zinc-600 font-medium"
                   />
                   <div className="flex items-center gap-1.5">
                     <button
@@ -660,7 +660,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
                     <button
                       type="submit"
                       disabled={isAiLoading || !aiPrompt.trim()}
-                      className="bg-blue-600 hover:bg-blue-500 disabled:opacity-50 disabled:hover:bg-blue-600 px-4 py-2 rounded-xl text-white text-label font-bold transition-all shadow-lg shadow-blue-600/30 flex items-center gap-2"
+                      className="bg-blue-600 hover:bg-blue-500 disabled:opacity-50 disabled:hover:bg-blue-600 px-4 py-2 rounded-xl text-white text-[0.625rem] font-medium transition-all shadow-lg shadow-blue-600/30 flex items-center gap-2"
                     >
                       {isAiLoading ? (
                         <>
diff --git a/src/components/QueryHistory.tsx b/src/components/QueryHistory.tsx
index 85fe048..b158004 100644
--- a/src/components/QueryHistory.tsx
+++ b/src/components/QueryHistory.tsx
@@ -125,7 +125,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
               <HistoryIcon className="w-4 h-4 text-emerald-400" />
             </div>
             <div>
-              <h3 className="text-sm font-bold text-zinc-100 uppercase tracking-widest flex items-center gap-2">
+              <h3 className="text-xs font-medium text-zinc-100 flex items-center gap-2">
                 Query History
               </h3>
               <p className="text-xs text-zinc-500 font-medium">
@@ -137,7 +137,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
           <div className="flex items-center gap-2">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="sm" className="h-8 text-xs font-bold uppercase tracking-widest text-zinc-400 hover:text-white gap-2">
+                <Button variant="ghost" size="sm" className="h-8 text-xs font-medium text-zinc-400 hover:text-white gap-2">
                   <Download className="w-3.5 h-3.5" /> Export
                 </Button>
               </DropdownMenuTrigger>
@@ -155,7 +155,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
               variant="ghost" 
               size="sm" 
               onClick={handleClearHistory} 
-              className="h-8 text-xs font-bold uppercase tracking-widest text-red-400/70 hover:text-red-400 hover:bg-red-400/10"
+              className="h-8 text-xs font-medium text-red-400/70 hover:text-red-400 hover:bg-red-400/10"
             >
               <Trash2 className="w-3.5 h-3.5 mr-2" /> Clear
             </Button>
@@ -185,7 +185,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
             <button
               onClick={() => setIsGlobal(false)}
               className={cn(
-                "px-3 py-1.5 text-xs font-bold uppercase rounded-md transition-all",
+                "px-3 py-1.5 text-xs font-medium rounded-md transition-all",
                 !isGlobal ? "bg-emerald-600 text-white shadow-lg shadow-emerald-600/20" : "text-zinc-500 hover:text-zinc-300"
               )}
             >
@@ -194,7 +194,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
             <button
               onClick={() => setIsGlobal(true)}
               className={cn(
-                "px-3 py-1.5 text-xs font-bold uppercase rounded-md transition-all",
+                "px-3 py-1.5 text-xs font-medium rounded-md transition-all",
                 isGlobal ? "bg-emerald-600 text-white shadow-lg shadow-emerald-600/20" : "text-zinc-500 hover:text-zinc-300"
               )}
             >
@@ -208,7 +208,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
                 key={status}
                 onClick={() => setFilterStatus(status)}
                 className={cn(
-                  "px-3 py-1.5 text-xs font-bold uppercase rounded-md transition-all",
+                  "px-3 py-1.5 text-xs font-medium rounded-md transition-all",
                   filterStatus === status ? "bg-white/10 text-white" : "text-zinc-500 hover:text-zinc-300"
                 )}
               >
@@ -223,14 +223,14 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
         {filteredHistory.length === 0 ? (
           <div className="h-full flex flex-col items-center justify-center opacity-20 p-8 text-center">
             <HistoryIcon className="w-16 h-16 mb-4 text-zinc-600" />
-            <p className="text-sm font-medium">No history items found</p>
-            <p className="text-xs text-zinc-500 mt-1 uppercase tracking-widest">Run some queries to see them here</p>
+            <p className="text-xs font-medium">No history items found</p>
+            <p className="text-xs text-zinc-500 mt-1r">Run some queries to see them here</p>
           </div>
         ) : (
           <div className="min-w-[800px]">
             <table className="w-full text-left border-collapse">
               <thead>
-                <tr className="bg-white/[0.02] border-b border-white/5 text-xs font-bold uppercase tracking-wider text-zinc-500">
+                <tr className="bg-white/[0.02] border-b border-white/5 text-xs font-medium text-zinc-500">
                   <th className="px-4 py-3 w-10 text-center">Status</th>
                   <th className="px-4 py-3 cursor-pointer hover:text-zinc-300 transition-colors group" onClick={() => handleSort('executedAt')}>
                     <div className="flex items-center gap-2">
@@ -288,7 +288,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
                       <div className="flex flex-col gap-1">
                         <div className="flex items-center gap-1.5 text-zinc-300">
                           <Database className="w-3 h-3 text-blue-400" />
-                          <span className="font-semibold">{item.connectionName || 'Unknown'}</span>
+                          <span className="font-medium">{item.connectionName || 'Unknown'}</span>
                         </div>
                         <div className="flex items-center gap-1.5 text-zinc-500 text-xs">
                           <Hash className="w-2.5 h-2.5" />
@@ -298,7 +298,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
                     </td>
                     <td className="px-4 py-4 max-w-md">
                       <div className="bg-[#050505] border border-white/5 rounded-md p-2 relative group-hover:border-white/10 transition-colors">
-                        <pre className="text-body font-mono text-zinc-400 line-clamp-2 break-all whitespace-pre-wrap leading-relaxed">
+                        <pre className="text-xs font-mono text-zinc-400 line-clamp-2 break-all whitespace-pre-wrap leading-relaxed">
                           {item.query}
                         </pre>
                         {item.errorMessage && (
@@ -310,7 +310,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
                     </td>
                     <td className="px-4 py-4 whitespace-nowrap">
                       <span className={cn(
-                        "px-2 py-0.5 rounded text-xs font-mono font-bold",
+                        "px-2 py-0.5 rounded text-xs font-mono font-medium",
                         item.executionTime > 500 ? "text-amber-400 bg-amber-400/10" : "text-zinc-400 bg-white/5"
                       )}>
                         {item.executionTime}ms
diff --git a/src/components/QuerySafetyDialog.tsx b/src/components/QuerySafetyDialog.tsx
index b336d62..b34fddd 100644
--- a/src/components/QuerySafetyDialog.tsx
+++ b/src/components/QuerySafetyDialog.tsx
@@ -146,7 +146,7 @@ export function QuerySafetyDialog({
         <div className="flex items-center justify-between px-5 py-3 border-b border-white/5">
           <div className="flex items-center gap-2">
             <ShieldAlert className="w-4 h-4 text-amber-400" />
-            <span className="text-sm font-bold text-zinc-200">Query Safety Check</span>
+            <span className="text-xs font-medium text-zinc-200">Query Safety Check</span>
           </div>
           <button onClick={onClose} className="p-1 rounded hover:bg-white/5 text-zinc-500">
             <X className="w-4 h-4" />
@@ -155,7 +155,7 @@ export function QuerySafetyDialog({
 
         {/* Query Preview */}
         <div className="px-5 py-3 bg-[#0a0a0a] border-b border-white/5">
-          <pre className="text-body font-mono text-zinc-400 whitespace-pre-wrap max-h-24 overflow-auto">
+          <pre className="text-xs font-mono text-zinc-400 whitespace-pre-wrap max-h-24 overflow-auto">
             {query.length > 300 ? query.substring(0, 300) + '...' : query}
           </pre>
         </div>
@@ -165,7 +165,7 @@ export function QuerySafetyDialog({
           {isAnalyzing && (
             <div className="flex items-center justify-center gap-2 py-8 text-zinc-500">
               <Loader2 className="w-5 h-5 animate-spin" />
-              <span className="text-sm">Analyzing query safety...</span>
+              <span className="text-xs">Analyzing query safety...</span>
             </div>
           )}
 
@@ -181,7 +181,7 @@ export function QuerySafetyDialog({
               <div className={cn("flex items-center gap-2 px-3 py-2 rounded-lg", risk.bg, "border", risk.border)}>
                 <RiskIcon className={cn("w-5 h-5", risk.color)} />
                 <div>
-                  <span className={cn("text-sm font-bold", risk.color)}>{risk.label}</span>
+                  <span className={cn("text-xs font-medium", risk.color)}>{risk.label}</span>
                   <p className="text-xs text-zinc-400 mt-0.5">{analysis.summary}</p>
                 </div>
               </div>
@@ -196,7 +196,7 @@ export function QuerySafetyDialog({
                       w.severity === 'warning' ? 'bg-amber-500/5 border-amber-500/20' :
                       'bg-blue-500/5 border-blue-500/20'
                     )}>
-                      <p className="font-bold text-zinc-300">{w.message}</p>
+                      <p className="font-medium text-zinc-300">{w.message}</p>
                       <p className="text-zinc-500 mt-0.5">{w.detail}</p>
                     </div>
                   ))}
@@ -222,7 +222,7 @@ export function QuerySafetyDialog({
               {/* Recommendation */}
               {analysis.recommendation && (
                 <div className="bg-[#0a0a0a] rounded-lg p-3 border border-white/5">
-                  <p className="text-xs font-bold text-zinc-500 uppercase tracking-wider mb-1">Recommendation</p>
+                  <p className="text-xs font-medium text-zinc-500r mb-1">Recommendation</p>
                   <p className="text-xs text-zinc-300">{analysis.recommendation}</p>
                 </div>
               )}
@@ -239,7 +239,7 @@ export function QuerySafetyDialog({
         <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-white/5 bg-[#0a0a0a]">
           <button
             onClick={onClose}
-            className="px-4 py-2 rounded-lg bg-white/5 text-zinc-400 text-xs font-bold hover:bg-white/10 transition-colors"
+            className="px-4 py-2 rounded-lg bg-white/5 text-zinc-400 text-xs font-medium hover:bg-white/10 transition-colors"
           >
             Cancel
           </button>
@@ -247,7 +247,7 @@ export function QuerySafetyDialog({
             onClick={onProceed}
             disabled={isAnalyzing}
             className={cn(
-              "px-4 py-2 rounded-lg text-white text-xs font-bold transition-colors flex items-center gap-1.5",
+              "px-4 py-2 rounded-lg text-white text-xs font-medium transition-colors flex items-center gap-1.5",
               analysis?.riskLevel === 'critical' || analysis?.riskLevel === 'high'
                 ? "bg-red-600 hover:bg-red-500"
                 : "bg-blue-600 hover:bg-blue-500",
diff --git a/src/components/ResultsGrid.tsx b/src/components/ResultsGrid.tsx
index 24920da..77b18ef 100644
--- a/src/components/ResultsGrid.tsx
+++ b/src/components/ResultsGrid.tsx
@@ -237,7 +237,7 @@ export function ResultsGrid({
                     setColumnFilters(next);
                   }}
                   onKeyDown={e => { if (e.key === 'Escape' || e.key === 'Enter') setActiveFilterCol(null); }}
-                  className="w-full bg-[#050505] border border-white/10 rounded px-2 py-1 text-body text-zinc-200 outline-none focus:border-blue-500/30"
+                  className="w-full bg-[#050505] border border-white/10 rounded px-2 py-1 text-xs text-zinc-200 outline-none focus:border-blue-500/30"
                 />
                 {hasFilter && (
                   <button
@@ -404,7 +404,7 @@ export function ResultsGrid({
         <div className="w-16 h-16 rounded-2xl bg-zinc-900/50 flex items-center justify-center mb-6 border border-white/5 shadow-2xl">
           <span className="text-2xl text-zinc-500">&#x2205;</span>
         </div>
-        <p className="text-sm font-semibold text-zinc-400">Query returned no data</p>
+        <p className="text-xs font-medium text-zinc-400">Query returned no data</p>
         <p className="text-xs text-zinc-600 mt-2 max-w-[280px] leading-relaxed">
           The operation was successful, but the result set is currently empty.
         </p>
@@ -488,7 +488,7 @@ export function ResultsGrid({
                 <div
                   key={field}
                   className={cn(
-                    "h-10 px-4 flex items-center gap-1 border-r border-b border-white/5 text-xs uppercase font-mono tracking-wider text-zinc-500 bg-[#0d0d0d] whitespace-nowrap",
+                    "h-10 px-4 flex items-center gap-1 border-r border-b border-white/5 text-xs uppercase font-mono text-zinc-500 bg-[#0d0d0d] whitespace-nowrap",
                     idx === 0 && "sticky left-0 z-30 bg-[#0d0d0d] shadow-[2px_0_8px_rgba(0,0,0,0.3)]",
                     "min-w-[120px]"
                   )}
@@ -566,7 +566,7 @@ export function ResultsGrid({
                 <div
                   key={header.id}
                   style={{ width: header.getSize(), minWidth: header.getSize() }}
-                  className="h-10 px-4 flex items-center border-r border-b border-white/5 text-xs uppercase font-mono tracking-wider text-zinc-500 bg-[#0d0d0d] relative group shrink-0"
+                  className="h-10 px-4 flex items-center border-r border-b border-white/5 text-xs uppercase font-mono text-zinc-500 bg-[#0d0d0d] relative group shrink-0"
                 >
                   {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
 
diff --git a/src/components/SaveQueryModal.tsx b/src/components/SaveQueryModal.tsx
index b183952..86ceaee 100644
--- a/src/components/SaveQueryModal.tsx
+++ b/src/components/SaveQueryModal.tsx
@@ -47,7 +47,7 @@ export function SaveQueryModal({ isOpen, onClose, onSave, defaultQuery }: SaveQu
         
         <div className="grid gap-4 py-4">
           <div className="grid gap-2">
-            <Label htmlFor="name" className="text-xs font-bold uppercase tracking-widest text-zinc-500">Name</Label>
+            <Label htmlFor="name" className="text-xs font-medium text-zinc-500">Name</Label>
             <Input
               id="name"
               value={name}
@@ -57,7 +57,7 @@ export function SaveQueryModal({ isOpen, onClose, onSave, defaultQuery }: SaveQu
             />
           </div>
           <div className="grid gap-2">
-            <Label htmlFor="description" className="text-xs font-bold uppercase tracking-widest text-zinc-500">Description</Label>
+            <Label htmlFor="description" className="text-xs font-medium text-zinc-500">Description</Label>
             <Textarea
               id="description"
               value={description}
@@ -67,7 +67,7 @@ export function SaveQueryModal({ isOpen, onClose, onSave, defaultQuery }: SaveQu
             />
           </div>
           <div className="grid gap-2">
-            <Label htmlFor="tags" className="text-xs font-bold uppercase tracking-widest text-zinc-500 flex items-center gap-2">
+            <Label htmlFor="tags" className="text-xs font-medium text-zinc-500 flex items-center gap-2">
               <Tag className="w-3 h-3" /> Tags (comma separated)
             </Label>
             <Input
@@ -79,7 +79,7 @@ export function SaveQueryModal({ isOpen, onClose, onSave, defaultQuery }: SaveQu
             />
           </div>
           <div className="mt-2">
-            <Label className="text-xs font-bold uppercase tracking-widest text-zinc-500 mb-2 block">Preview</Label>
+            <Label className="text-xs font-medium text-zinc-500 mb-2 block">Preview</Label>
             <div className="bg-[#050505] p-3 rounded-md border border-white/5 max-h-[100px] overflow-y-auto">
               <pre className="text-xs font-mono text-zinc-500 italic whitespace-pre-wrap break-words">
                 {defaultQuery}
@@ -93,7 +93,7 @@ export function SaveQueryModal({ isOpen, onClose, onSave, defaultQuery }: SaveQu
           <Button 
             onClick={handleSave} 
             disabled={!name}
-            className="bg-blue-600 hover:bg-blue-500 text-white font-bold"
+            className="bg-blue-600 hover:bg-blue-500 text-white font-medium"
           >
             Save Query
           </Button>
diff --git a/src/components/SavedQueries.tsx b/src/components/SavedQueries.tsx
index d997326..0c7ca43 100644
--- a/src/components/SavedQueries.tsx
+++ b/src/components/SavedQueries.tsx
@@ -44,7 +44,7 @@ export function SavedQueries({ onSelectQuery, connectionType, refreshTrigger }:
   return (
     <div className="h-full flex flex-col bg-[#0a0a0a]">
       <div className="p-4 border-b border-white/5 flex flex-col gap-4">
-        <h3 className="text-sm font-bold text-zinc-400 uppercase tracking-widest flex items-center gap-2">
+        <h3 className="text-xs font-medium text-zinc-400 flex items-center gap-2">
           <Bookmark className="w-4 h-4" /> Saved Queries
         </h3>
         
@@ -63,7 +63,7 @@ export function SavedQueries({ onSelectQuery, connectionType, refreshTrigger }:
         {filteredQueries.length === 0 ? (
           <div className="h-full flex flex-col items-center justify-center opacity-20 p-8 text-center">
             <Bookmark className="w-12 h-12 mb-4" />
-            <p className="text-sm italic">No saved queries found</p>
+            <p className="text-xs italic">No saved queries found</p>
           </div>
         ) : (
           <div className="grid grid-cols-1 gap-px bg-white/5">
@@ -75,7 +75,7 @@ export function SavedQueries({ onSelectQuery, connectionType, refreshTrigger }:
               >
                 <div className="flex items-start justify-between mb-2">
                   <div>
-                    <h4 className="text-xs font-bold text-blue-400 mb-1 group-hover:text-blue-300 transition-colors">
+                    <h4 className="text-xs font-medium text-blue-400 mb-1 group-hover:text-blue-300 transition-colors">
                       {q.name}
                     </h4>
                     {q.description && (
@@ -105,16 +105,16 @@ export function SavedQueries({ onSelectQuery, connectionType, refreshTrigger }:
 
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
-                    <span className="px-1.5 py-0.5 rounded bg-blue-500/10 border border-blue-500/20 text-label font-bold text-blue-400 uppercase tracking-tighter">
+                    <span className="px-1.5 py-0.5 rounded bg-blue-500/10 border border-blue-500/20 text-[0.625rem] font-medium text-blue-400er">
                       {q.connectionType}
                     </span>
                     {q.tags?.map(tag => (
-                      <span key={tag} className="flex items-center gap-1 text-label text-zinc-500">
+                      <span key={tag} className="flex items-center gap-1 text-[0.625rem] text-zinc-500">
                         <Tag className="w-2.5 h-2.5" /> {tag}
                       </span>
                     ))}
                   </div>
-                  <span className="text-label text-zinc-600 flex items-center gap-1 font-mono">
+                  <span className="text-[0.625rem] text-zinc-600 flex items-center gap-1 font-mono">
                     <Calendar className="w-2.5 h-2.5" /> {format(q.updatedAt, 'MMM d, yyyy')}
                   </span>
                 </div>
diff --git a/src/components/SchemaDiagram.tsx b/src/components/SchemaDiagram.tsx
index d635eb7..549ddce 100644
--- a/src/components/SchemaDiagram.tsx
+++ b/src/components/SchemaDiagram.tsx
@@ -47,8 +47,8 @@ const TableNode = ({ data }: NodeProps<Node<TableNodeData>>) => {
     }`}>
       <div className="bg-blue-600/10 px-3 py-2 border-b border-white/5 flex items-center gap-2">
         <Database className="w-3.5 h-3.5 text-blue-400" />
-        <span className="text-xs font-bold text-zinc-100 uppercase tracking-wider">{table.name}</span>
-        <span className="text-label text-zinc-600 ml-auto">{table.columns?.length || 0} cols</span>
+        <span className="text-xs font-medium text-zinc-100r">{table.name}</span>
+        <span className="text-[0.625rem] text-zinc-600 ml-auto">{table.columns?.length || 0} cols</span>
       </div>
       {!isCompact && (
         <div className="p-1">
@@ -88,13 +88,13 @@ const TableNode = ({ data }: NodeProps<Node<TableNodeData>>) => {
                   </span>
                 </div>
                 <div className="flex items-center gap-1">
-                  {col.nullable === false && <span className="text-micro text-red-500/60">NN</span>}
-                  <span className="text-label text-zinc-600 font-mono uppercase">{col.type}</span>
+                  {col.nullable === false && <span className="text-[0.5rem] text-red-500/60">NN</span>}
+                  <span className="text-[0.625rem] text-zinc-600 font-mono uppercase">{col.type}</span>
                 </div>
 
                 {/* Hover tooltip */}
                 <div className="absolute left-full ml-2 top-0 z-50 hidden group-hover:block">
-                  <div className="bg-[#1a1a1a] border border-white/10 rounded px-2 py-1 text-label whitespace-nowrap shadow-xl">
+                  <div className="bg-[#1a1a1a] border border-white/10 rounded px-2 py-1 text-[0.625rem] whitespace-nowrap shadow-xl">
                     <div className="text-zinc-300">{col.name}: <span className="text-zinc-500">{col.type}</span></div>
                     {col.isPrimary && <div className="text-yellow-500">Primary Key</div>}
                     {isFk && <div className="text-blue-400">Foreign Key</div>}
@@ -349,7 +349,7 @@ function SchemaDiagramInner({ schema, onClose }: SchemaDiagramProps) {
     return (
       <div className="absolute inset-0 z-50 bg-[#050505] flex flex-col items-center justify-center">
         <Loader2 className="w-8 h-8 text-blue-500 animate-spin mb-4" />
-        <p className="text-zinc-500 text-sm">Generating ERD Diagram...</p>
+        <p className="text-zinc-500 text-xs">Generating ERD Diagram...</p>
       </div>
     );
   }
@@ -421,7 +421,7 @@ function SchemaDiagramInner({ schema, onClose }: SchemaDiagramProps) {
         {/* Info panel with stats and search */}
         <Panel position="top-left" className="p-4">
           <div className="bg-[#0d0d0d]/80 backdrop-blur-md border border-white/10 p-3 rounded-xl shadow-2xl space-y-2">
-            <h3 className="text-xs font-bold text-white uppercase tracking-widest mb-1 flex items-center gap-2">
+            <h3 className="text-xs font-medium text-white mb-1 flex items-center gap-2">
               <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
               ERD Visualizer
             </h3>
@@ -444,7 +444,7 @@ function SchemaDiagramInner({ schema, onClose }: SchemaDiagramProps) {
 
             {/* No FK warning */}
             {!hasForeignKeys && (
-              <div className="flex items-start gap-1.5 text-label text-amber-500/80">
+              <div className="flex items-start gap-1.5 text-[0.625rem] text-amber-500/80">
                 <Info className="w-3 h-3 mt-0.5 shrink-0" />
                 <span>No FK data available. Showing heuristic relationships (dashed).</span>
               </div>
@@ -453,7 +453,7 @@ function SchemaDiagramInner({ schema, onClose }: SchemaDiagramProps) {
             {/* Selected node info */}
             {selectedNode && (
               <div className="text-xs text-blue-400 border-t border-white/5 pt-2">
-                Selected: <span className="font-mono font-bold">{selectedNode}</span>
+                Selected: <span className="font-mono font-medium">{selectedNode}</span>
                 <button onClick={() => setSelectedNode(null)} className="ml-2 text-zinc-600 hover:text-zinc-400">clear</button>
               </div>
             )}
diff --git a/src/components/SchemaDiff.tsx b/src/components/SchemaDiff.tsx
index 93202ba..179eb41 100644
--- a/src/components/SchemaDiff.tsx
+++ b/src/components/SchemaDiff.tsx
@@ -160,13 +160,13 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
       {/* Header */}
       <div className="flex items-center gap-2 px-3 py-2 border-b border-white/5 bg-[#0a0a0a] flex-wrap">
         <GitCompare className="w-4 h-4 text-rose-400" />
-        <span className="text-xs font-bold uppercase text-zinc-400 tracking-wider">Schema Diff</span>
+        <span className="text-xs font-medium text-zinc-400r">Schema Diff</span>
 
         <div className="h-4 w-px bg-white/10" />
 
         {/* Source selector */}
         <div className="flex items-center gap-1">
-          <span className="text-xs text-zinc-600 uppercase">Source</span>
+          <span className="text-xs text-zinc-600">Source</span>
           <Select value={sourceId} onValueChange={setSourceId}>
             <SelectTrigger className="h-7 w-[180px] text-xs bg-white/5 border-white/10">
               <SelectValue placeholder="Select source" />
@@ -192,7 +192,7 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
 
         {/* Target selector */}
         <div className="flex items-center gap-1">
-          <span className="text-xs text-zinc-600 uppercase">Target</span>
+          <span className="text-xs text-zinc-600">Target</span>
           <Select value={targetId} onValueChange={(v) => {
             if (v.startsWith('conn:')) {
               fetchRemoteSchema(v.replace('conn:', ''));
@@ -218,7 +218,7 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
               ))}
               {allConnections.filter(c => c.id !== connection?.id).length > 0 && (
                 <>
-                  <div className="px-2 py-1 text-label text-zinc-600 uppercase border-t border-white/5 mt-1">
+                  <div className="px-2 py-1 text-[0.625rem] text-zinc-600 border-t border-white/5 mt-1">
                     Fetch from connection
                   </div>
                   {allConnections.filter(c => c.id !== connection?.id).map(c => (
@@ -263,7 +263,7 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
           <Button
             variant="ghost"
             size="sm"
-            className="h-7 text-xs font-bold uppercase text-zinc-500 hover:text-white gap-1"
+            className="h-7 text-xs font-medium text-zinc-500 hover:text-white gap-1"
             onClick={() => setShowLabelInput(true)}
             disabled={!connection}
           >
@@ -275,7 +275,7 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
           <Button
             variant="ghost"
             size="sm"
-            className="h-7 text-xs font-bold uppercase text-zinc-500 hover:text-white gap-1"
+            className="h-7 text-xs font-medium text-zinc-500 hover:text-white gap-1"
             onClick={() => setShowMigration(!showMigration)}
           >
             <FileCode className="w-3 h-3" /> {showMigration ? 'Diff View' : 'SQL Migration'}
@@ -288,7 +288,7 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
         {!targetId ? (
           <div className="flex-1 flex flex-col items-center justify-center text-zinc-600 gap-3">
             <GitCompare className="w-10 h-10 opacity-30" />
-            <p className="text-sm">Select source and target to compare schemas</p>
+            <p className="text-xs">Select source and target to compare schemas</p>
             <p className="text-xs text-zinc-700">Take a snapshot first, then compare with the current schema</p>
 
             {/* Snapshot Timeline */}
@@ -316,7 +316,7 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
             {/* Table List */}
             <div className="w-64 border-r border-white/5 overflow-auto">
               <div className="p-2 border-b border-white/5">
-                <div className="text-xs text-zinc-500 uppercase px-2 mb-1">
+                <div className="text-xs text-zinc-500 px-2 mb-1">
                   {diff.summary.added} added, {diff.summary.removed} removed, {diff.summary.modified} modified
                 </div>
               </div>
@@ -345,7 +345,7 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
               {selectedTable ? (
                 <TableDiffDetail diff={diff.tables.find(t => t.tableName === selectedTable)!} />
               ) : (
-                <div className="h-full flex items-center justify-center text-zinc-600 text-sm">
+                <div className="h-full flex items-center justify-center text-zinc-600 text-xs">
                   Select a table to view diff details
                 </div>
               )}
@@ -353,12 +353,12 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
           </>
         ) : diff && !diff.hasChanges ? (
           <div className="flex-1 flex items-center justify-center text-zinc-600 gap-2">
-            <span className="text-sm">No differences found between source and target</span>
+            <span className="text-xs">No differences found between source and target</span>
           </div>
         ) : (
           <div className="flex-1 flex items-center justify-center text-zinc-600 gap-2">
             <AlertTriangle className="w-4 h-4" />
-            <span className="text-sm">Cannot compare same schema with itself</span>
+            <span className="text-xs">Cannot compare same schema with itself</span>
           </div>
         )}
       </div>
@@ -371,7 +371,7 @@ function TableDiffDetail({ diff }: { diff: TableDiff }) {
     <div className="space-y-4">
       <div className="flex items-center gap-2">
         <Database className="w-4 h-4 text-zinc-400" />
-        <h3 className="text-sm font-bold text-zinc-200">{diff.tableName}</h3>
+        <h3 className="text-xs font-medium text-zinc-200">{diff.tableName}</h3>
         <Badge className={cn(
           "text-xs",
           diff.action === 'added' && "bg-green-500/20 text-green-400",
@@ -385,7 +385,7 @@ function TableDiffDetail({ diff }: { diff: TableDiff }) {
       {/* Columns */}
       {diff.columns.length > 0 && (
         <div>
-          <h4 className="text-xs uppercase text-zinc-500 mb-2 font-bold">Columns</h4>
+          <h4 className="text-xs text-zinc-500 mb-2 font-medium">Columns</h4>
           <div className="space-y-1">
             {diff.columns.map((col, i) => (
               <div key={i} className={cn(
@@ -418,7 +418,7 @@ function TableDiffDetail({ diff }: { diff: TableDiff }) {
       {/* Indexes */}
       {diff.indexes.length > 0 && (
         <div>
-          <h4 className="text-xs uppercase text-zinc-500 mb-2 font-bold">Indexes</h4>
+          <h4 className="text-xs text-zinc-500 mb-2 font-medium">Indexes</h4>
           <div className="space-y-1">
             {diff.indexes.map((idx, i) => (
               <div key={i} className={cn(
@@ -441,7 +441,7 @@ function TableDiffDetail({ diff }: { diff: TableDiff }) {
       {/* Foreign Keys */}
       {diff.foreignKeys.length > 0 && (
         <div>
-          <h4 className="text-xs uppercase text-zinc-500 mb-2 font-bold">Foreign Keys</h4>
+          <h4 className="text-xs text-zinc-500 mb-2 font-medium">Foreign Keys</h4>
           <div className="space-y-1">
             {diff.foreignKeys.map((fk, i) => (
               <div key={i} className={cn(
diff --git a/src/components/SnapshotTimeline.tsx b/src/components/SnapshotTimeline.tsx
index 2b9501f..5fe0cd9 100644
--- a/src/components/SnapshotTimeline.tsx
+++ b/src/components/SnapshotTimeline.tsx
@@ -50,7 +50,7 @@ export function SnapshotTimeline({ snapshots, onCompare, onDelete }: SnapshotTim
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between px-2">
-        <span className="text-xs uppercase text-zinc-500 font-bold">Timeline</span>
+        <span className="text-xs text-zinc-500 font-medium">Timeline</span>
         {canCompare && (
           <span className="text-xs text-blue-400">Comparing 2 snapshots</span>
         )}
@@ -92,10 +92,10 @@ export function SnapshotTimeline({ snapshots, onCompare, onDelete }: SnapshotTim
                 <div className="text-xs font-medium truncate max-w-[90px]">
                   {snapshot.label || snapshot.connectionName}
                 </div>
-                <div className="text-label text-zinc-600">
+                <div className="text-[0.625rem] text-zinc-600">
                   {date.toLocaleDateString()} {date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                 </div>
-                <Badge variant="secondary" className="text-label mt-1">
+                <Badge variant="secondary" className="text-[0.625rem] mt-1">
                   {snapshot.schema.length} tables
                 </Badge>
               </div>
diff --git a/src/components/Studio.tsx b/src/components/Studio.tsx
index f29180a..4ace2e0 100644
--- a/src/components/Studio.tsx
+++ b/src/components/Studio.tsx
@@ -353,7 +353,7 @@ export default function Studio() {
               {activeMobileTab === 'database' && (
                 <div className="md:hidden h-full bg-[#080808] overflow-auto p-4">
                   <div className="mb-4 flex items-center justify-between">
-                    <h2 className="text-sm font-bold text-zinc-300 uppercase tracking-widest">Connections</h2>
+                    <h2 className="text-xs font-medium text-zinc-300">Connections</h2>
                     <Button
                       variant="outline"
                       size="sm"
@@ -403,7 +403,7 @@ export default function Studio() {
                   ) : (
                     <div className="flex flex-col items-center justify-center h-full text-zinc-500">
                       <Database className="w-12 h-12 mb-4 opacity-30" />
-                      <p className="text-sm">Select a connection first</p>
+                      <p className="text-xs">Select a connection first</p>
                     </div>
                   )}
                 </div>
@@ -581,22 +581,22 @@ export default function Studio() {
                 <AlertTriangle className="w-5 h-5 text-amber-400" />
               </div>
               <div className="flex-1 min-w-0">
-                <AlertDialogTitle className="text-title font-semibold text-zinc-100 mb-1">
+                <AlertDialogTitle className="text-[0.8125rem] font-medium text-zinc-100 mb-1">
                   Load all results?
                 </AlertDialogTitle>
-                <AlertDialogDescription className="text-body text-zinc-500 leading-relaxed">
+                <AlertDialogDescription className="text-xs text-zinc-500 leading-relaxed">
                   This may slow down your browser. Max <span className="text-zinc-400">100K</span> rows will be loaded.
                 </AlertDialogDescription>
               </div>
             </div>
           </div>
           <div className="px-6 pb-6 flex gap-2">
-            <AlertDialogCancel className="flex-1 h-9 bg-white/5 border-0 text-zinc-400 text-body font-medium hover:bg-white/10 hover:text-zinc-200">
+            <AlertDialogCancel className="flex-1 h-9 bg-white/5 border-0 text-zinc-400 text-xs font-medium hover:bg-white/10 hover:text-zinc-200">
               Cancel
             </AlertDialogCancel>
             <AlertDialogAction
               onClick={queryExec.handleUnlimitedQuery}
-              className="flex-1 h-9 bg-amber-600 border-0 text-white text-body font-medium hover:bg-amber-500"
+              className="flex-1 h-9 bg-amber-600 border-0 text-white text-xs font-medium hover:bg-amber-500"
             >
               Load All
             </AlertDialogAction>
diff --git a/src/components/TestDataGenerator.tsx b/src/components/TestDataGenerator.tsx
index f5a43cf..02de1e3 100644
--- a/src/components/TestDataGenerator.tsx
+++ b/src/components/TestDataGenerator.tsx
@@ -166,7 +166,7 @@ export function TestDataGenerator({
         <div className="flex items-center justify-between px-5 py-3 border-b border-white/5">
           <div className="flex items-center gap-2">
             <Wand2 className="w-4 h-4 text-amber-400" />
-            <span className="text-sm font-bold text-zinc-200">Test Data Generator</span>
+            <span className="text-xs font-medium text-zinc-200">Test Data Generator</span>
             <span className="text-xs text-zinc-500 font-mono">{tableName}</span>
           </div>
           <button onClick={onClose} className="p-1 rounded hover:bg-white/5 text-zinc-500">
@@ -177,14 +177,14 @@ export function TestDataGenerator({
         {/* Controls */}
         <div className="px-5 py-3 border-b border-white/5 bg-[#0a0a0a] flex items-center gap-4">
           <div className="flex items-center gap-2">
-            <span className="text-xs text-zinc-500 uppercase tracking-wider font-bold">Rows:</span>
+            <span className="text-xs text-zinc-500r font-medium">Rows:</span>
             <div className="flex items-center gap-1">
               {[5, 10, 25, 50, 100].map(n => (
                 <button
                   key={n}
                   onClick={() => setRowCount(n)}
                   className={cn(
-                    "px-2 py-0.5 rounded text-xs font-bold transition-colors",
+                    "px-2 py-0.5 rounded text-xs font-medium transition-colors",
                     rowCount === n
                       ? "bg-amber-500/20 text-amber-400 border border-amber-500/20"
                       : "text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
@@ -197,7 +197,7 @@ export function TestDataGenerator({
           </div>
           <button
             onClick={() => setRefreshKey(k => k + 1)}
-            className="flex items-center gap-1 px-2 py-1 rounded text-xs font-bold text-zinc-500 hover:text-zinc-300 hover:bg-white/5 transition-colors"
+            className="flex items-center gap-1 px-2 py-1 rounded text-xs font-medium text-zinc-500 hover:text-zinc-300 hover:bg-white/5 transition-colors"
             title="Regenerate random data"
           >
             <RefreshCw className="w-3 h-3" /> Regenerate
@@ -226,7 +226,7 @@ export function TestDataGenerator({
 
         {/* Preview */}
         <div className="flex-1 overflow-auto relative">
-          <pre className="p-5 text-body font-mono text-blue-300 whitespace-pre-wrap leading-relaxed">
+          <pre className="p-5 text-xs font-mono text-blue-300 whitespace-pre-wrap leading-relaxed">
             {generatedQuery}
           </pre>
         </div>
@@ -239,7 +239,7 @@ export function TestDataGenerator({
           <div className="flex items-center gap-2">
             <button
               onClick={handleCopy}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/5 text-zinc-400 text-xs font-bold hover:bg-white/10 transition-colors"
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/5 text-zinc-400 text-xs font-medium hover:bg-white/10 transition-colors"
             >
               {copied ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
               {copied ? 'Copied!' : 'Copy'}
@@ -249,7 +249,7 @@ export function TestDataGenerator({
                 onExecuteQuery(generatedQuery);
                 onClose();
               }}
-              className="flex items-center gap-1.5 px-4 py-1.5 rounded-lg bg-amber-600 hover:bg-amber-500 text-white text-xs font-bold transition-colors"
+              className="flex items-center gap-1.5 px-4 py-1.5 rounded-lg bg-amber-600 hover:bg-amber-500 text-white text-xs font-medium transition-colors"
             >
               <Play className="w-3 h-3 fill-current" /> Execute
             </button>
diff --git a/src/components/VisualExplain.tsx b/src/components/VisualExplain.tsx
index c655e4a..009e60f 100644
--- a/src/components/VisualExplain.tsx
+++ b/src/components/VisualExplain.tsx
@@ -275,7 +275,7 @@ const PlanNode = ({ node, depth = 0, maxTime }: { node: ExplainPlanNode; depth?:
         {/* Type & Table */}
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2">
-            <span className="text-body font-medium text-zinc-200 truncate">{nodeType}</span>
+            <span className="text-xs font-medium text-zinc-200 truncate">{nodeType}</span>
             {node['Relation Name'] && (
               <span className="text-xs text-zinc-500 font-mono truncate">{node['Relation Name']}</span>
             )}
@@ -435,7 +435,7 @@ function AIExplainTab({
           elements.push(
             <div key={`code-${idx}`} className="my-3 relative group/code">
               <pre className={cn(
-                "text-body font-mono p-3 rounded-lg overflow-x-auto border",
+                "text-xs font-mono p-3 rounded-lg overflow-x-auto border",
                 isSql ? "bg-blue-500/5 border-blue-500/10 text-blue-300" : "bg-white/[0.02] border-white/5 text-zinc-400"
               )}>
                 {content}
@@ -443,7 +443,7 @@ function AIExplainTab({
               {isSql && onLoadQuery && (
                 <button
                   onClick={() => onLoadQuery(content)}
-                  className="absolute top-2 right-2 opacity-0 group-hover/code:opacity-100 transition-opacity px-2 py-1 rounded bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold flex items-center gap-1"
+                  className="absolute top-2 right-2 opacity-0 group-hover/code:opacity-100 transition-opacity px-2 py-1 rounded bg-blue-600 hover:bg-blue-500 text-white text-xs font-medium flex items-center gap-1"
                 >
                   <Play className="w-3 h-3" /> Try This
                 </button>
@@ -469,19 +469,19 @@ function AIExplainTab({
       // Headers
       if (line.startsWith('## ')) {
         elements.push(
-          <h2 key={idx} className="text-body font-bold text-zinc-200 mt-4 mb-2 flex items-center gap-2">
+          <h2 key={idx} className="text-xs font-medium text-zinc-200 mt-4 mb-2 flex items-center gap-2">
             {line.slice(3)}
           </h2>
         );
       } else if (line.startsWith('### ')) {
         elements.push(
-          <h3 key={idx} className="text-data font-semibold text-zinc-300 mt-3 mb-1">
+          <h3 key={idx} className="text-xs font-medium text-zinc-300 mt-3 mb-1">
             {line.slice(4)}
           </h3>
         );
       } else if (line.startsWith('- ')) {
         elements.push(
-          <div key={idx} className="flex items-start gap-2 text-body text-zinc-400 leading-relaxed ml-2 my-0.5">
+          <div key={idx} className="flex items-start gap-2 text-xs text-zinc-400 leading-relaxed ml-2 my-0.5">
             <span className="text-zinc-600 mt-1 shrink-0">•</span>
             <span>{renderInlineFormatting(line.slice(2))}</span>
           </div>
@@ -489,8 +489,8 @@ function AIExplainTab({
       } else if (/^\d+\.\s/.test(line)) {
         const num = line.match(/^(\d+)\./)?.[1];
         elements.push(
-          <div key={idx} className="flex items-start gap-2 text-body text-zinc-400 leading-relaxed ml-2 my-0.5">
-            <span className="text-blue-400 font-bold mt-0 shrink-0 w-4">{num}.</span>
+          <div key={idx} className="flex items-start gap-2 text-xs text-zinc-400 leading-relaxed ml-2 my-0.5">
+            <span className="text-blue-400 font-medium mt-0 shrink-0 w-4">{num}.</span>
             <span>{renderInlineFormatting(line.replace(/^\d+\.\s*/, ''))}</span>
           </div>
         );
@@ -498,7 +498,7 @@ function AIExplainTab({
         elements.push(<div key={idx} className="h-1" />);
       } else {
         elements.push(
-          <p key={idx} className="text-body text-zinc-400 leading-relaxed my-0.5">
+          <p key={idx} className="text-xs text-zinc-400 leading-relaxed my-0.5">
             {renderInlineFormatting(line)}
           </p>
         );
@@ -529,15 +529,15 @@ function AIExplainTab({
         <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-blue-500/10 flex items-center justify-center mb-4">
           <Sparkles className="w-7 h-7 text-purple-400" />
         </div>
-        <h3 className="text-sm font-semibold text-zinc-200 mb-1">AI Query Analysis</h3>
-        <p className="text-body text-zinc-500 max-w-[280px] leading-relaxed mb-4">
+        <h3 className="text-xs font-medium text-zinc-200 mb-1">AI Query Analysis</h3>
+        <p className="text-xs text-zinc-500 max-w-[280px] leading-relaxed mb-4">
           Get a plain-language explanation of your query&apos;s execution plan with concrete optimization suggestions.
         </p>
         <button
           onClick={analyzeWithAI}
           disabled={!query}
           className={cn(
-            "flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition-all",
+            "flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-medium transition-all",
             query
               ? "bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-900/20"
               : "bg-white/5 text-zinc-600 cursor-not-allowed"
@@ -559,12 +559,12 @@ function AIExplainTab({
       <div className="flex items-center justify-between px-4 py-2 border-b border-white/5 bg-[#0a0a0a]">
         <div className="flex items-center gap-2">
           <Sparkles className="w-3.5 h-3.5 text-purple-400" />
-          <span className="text-xs font-bold text-purple-400 uppercase tracking-wider">AI Analysis</span>
+          <span className="text-xs font-medium text-purple-400r">AI Analysis</span>
         </div>
         <button
           onClick={analyzeWithAI}
           disabled={isLoading}
-          className="flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-bold text-zinc-400 hover:text-white hover:bg-white/5 transition-all"
+          className="flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium text-zinc-400 hover:text-white hover:bg-white/5 transition-all"
         >
           {isLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Sparkles className="w-3 h-3" />}
           {isLoading ? 'Analyzing...' : 'Re-analyze'}
@@ -587,7 +587,7 @@ function AIExplainTab({
         )}
 
         {isLoading && !aiResponse && (
-          <div className="flex items-center gap-3 text-zinc-500 text-sm">
+          <div className="flex items-center gap-3 text-zinc-500 text-xs">
             <Loader2 className="w-4 h-4 animate-spin text-purple-400" />
             <span>Analyzing execution plan...</span>
           </div>
@@ -623,7 +623,7 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
         <div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center mb-4">
           <Activity className="w-6 h-6 text-zinc-600" />
         </div>
-        <h3 className="text-sm font-medium text-zinc-300 mb-1">No execution plan</h3>
+        <h3 className="text-xs font-medium text-zinc-300 mb-1">No execution plan</h3>
         <p className="text-xs text-zinc-600 max-w-[240px]">
           Run a SELECT query to see its execution plan and performance insights.
         </p>
@@ -642,21 +642,21 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
           <div className="flex items-center gap-6">
             <div className="flex items-center gap-2">
               <Clock className="w-3.5 h-3.5 text-blue-400" />
-              <span className="text-body font-medium text-zinc-200">
+              <span className="text-xs font-medium text-zinc-200">
                 {formatTime(analysis?.executionTime || 0)}
               </span>
               <span className="text-xs text-zinc-600">execution</span>
             </div>
             <div className="flex items-center gap-2">
               <TrendingUp className="w-3.5 h-3.5 text-zinc-500" />
-              <span className="text-body font-medium text-zinc-400">
+              <span className="text-xs font-medium text-zinc-400">
                 {formatNumber(analysis?.totalRows || 0)}
               </span>
               <span className="text-xs text-zinc-600">rows</span>
             </div>
             <div className="flex items-center gap-2">
               <HardDrive className="w-3.5 h-3.5 text-zinc-500" />
-              <span className="text-body font-medium text-zinc-400">
+              <span className="text-xs font-medium text-zinc-400">
                 {formatNumber(analysis?.totalCost || 0)}
               </span>
               <span className="text-xs text-zinc-600">cost</span>
@@ -670,7 +670,7 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
                 key={tab}
                 onClick={() => setActiveTab(tab)}
                 className={cn(
-                  "px-3 py-1 text-xs font-medium rounded-md transition-all uppercase tracking-wide",
+                  "px-3 py-1 text-xs font-medium rounded-md transition-all",
                   activeTab === tab
                     ? tab === 'ai' ? "bg-purple-500/20 text-purple-300" : "bg-white/10 text-zinc-200"
                     : "text-zinc-500 hover:text-zinc-300"
@@ -704,7 +704,7 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
             {/* Warnings */}
             {analysis && analysis.warnings.length > 0 && (
               <div className="space-y-2">
-                <h3 className="text-xs font-bold text-zinc-500 uppercase tracking-wider mb-2">
+                <h3 className="text-xs font-medium text-zinc-500r mb-2">
                   Performance Issues
                 </h3>
                 {analysis.warnings.map((warning, idx) => (
@@ -737,7 +737,7 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
                     </div>
                     <div className="flex-1 min-w-0">
                       <h4 className={cn(
-                        "text-body font-medium",
+                        "text-xs font-medium",
                         warning.type === 'critical'
                           ? "text-red-300"
                           : warning.type === 'warning'
@@ -762,7 +762,7 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
                   <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
                 </div>
                 <div>
-                  <h4 className="text-body font-medium text-emerald-300">Query looks good</h4>
+                  <h4 className="text-xs font-medium text-emerald-300">Query looks good</h4>
                   <p className="text-xs text-zinc-500">No obvious performance issues detected.</p>
                 </div>
               </div>
@@ -774,18 +774,18 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
                 <div key={idx} className="p-3 rounded-lg bg-white/[0.02] border border-white/5">
                   <div className="flex items-center gap-2 mb-1">
                     <StatusBadge status={insight.status} />
-                    <span className="text-label text-zinc-500 uppercase tracking-wider font-medium">
+                    <span className="text-[0.625rem] text-zinc-500r font-medium">
                       {insight.label}
                     </span>
                   </div>
-                  <span className="text-lg font-medium text-zinc-200">{insight.value}</span>
+                  <span className="text-xs font-medium text-zinc-200">{insight.value}</span>
                 </div>
               ))}
             </div>
 
             {/* Plan tree preview */}
             <div>
-              <h3 className="text-xs font-bold text-zinc-500 uppercase tracking-wider mb-2">
+              <h3 className="text-xs font-medium text-zinc-500r mb-2">
                 Execution Plan
               </h3>
               <div className="rounded-lg border border-white/5 bg-white/[0.01] p-2">
diff --git a/src/components/admin/tabs/AuditTab.tsx b/src/components/admin/tabs/AuditTab.tsx
index df2a69c..b00d5c2 100644
--- a/src/components/admin/tabs/AuditTab.tsx
+++ b/src/components/admin/tabs/AuditTab.tsx
@@ -183,7 +183,7 @@ function OperationsAudit() {
           <div className="p-8 text-center text-zinc-600 text-sm">
             <Wrench className="h-8 w-8 mx-auto mb-2 opacity-30" />
             <p>No audit events found.</p>
-            <p className="text-body mt-1 text-zinc-700">
+            <p className="text-xs mt-1 text-zinc-700">
               Operations will appear here when maintenance tasks are run.
             </p>
           </div>
@@ -221,7 +221,7 @@ function OperationsAudit() {
                   <TableCell className="py-2">
                     <Badge
                       variant="outline"
-                      className="text-label font-bold border-white/10"
+                      className="text-[0.625rem] font-bold border-white/10"
                     >
                       {event.action}
                     </Badge>
@@ -341,7 +341,7 @@ function QueryAudit() {
                     })}
                   </TableCell>
                   <TableCell className="py-2">
-                    <div className="font-mono text-body text-zinc-400 truncate max-w-[250px] lg:max-w-[400px]">
+                    <div className="font-mono text-xs text-zinc-400 truncate max-w-[250px] lg:max-w-[400px]">
                       {item.query}
                     </div>
                   </TableCell>
diff --git a/src/components/admin/tabs/OperationsTab.tsx b/src/components/admin/tabs/OperationsTab.tsx
index 7d75a66..06bec8b 100644
--- a/src/components/admin/tabs/OperationsTab.tsx
+++ b/src/components/admin/tabs/OperationsTab.tsx
@@ -164,15 +164,15 @@ export function OperationsTab() {
   const getStateBadge = (state: string) => {
     switch (state) {
       case 'active':
-        return <Badge className="bg-green-500/10 text-green-400 border border-green-500/20 text-label">Active</Badge>;
+        return <Badge className="bg-green-500/10 text-green-400 border border-green-500/20 text-[0.625rem]">Active</Badge>;
       case 'idle':
-        return <Badge variant="secondary" className="text-label">Idle</Badge>;
+        return <Badge variant="secondary" className="text-[0.625rem]">Idle</Badge>;
       case 'idle in transaction':
-        return <Badge className="bg-yellow-500/10 text-yellow-400 border border-yellow-500/20 text-label">Idle TX</Badge>;
+        return <Badge className="bg-yellow-500/10 text-yellow-400 border border-yellow-500/20 text-[0.625rem]">Idle TX</Badge>;
       case 'idle in transaction (aborted)':
-        return <Badge className="bg-red-500/10 text-red-400 border border-red-500/20 text-label">Abort</Badge>;
+        return <Badge className="bg-red-500/10 text-red-400 border border-red-500/20 text-[0.625rem]">Abort</Badge>;
       default:
-        return <Badge variant="outline" className="text-label">{state}</Badge>;
+        return <Badge variant="outline" className="text-[0.625rem]">{state}</Badge>;
     }
   };
 
@@ -274,7 +274,7 @@ export function OperationsTab() {
               </Button>
             </div>
             <h4 className="text-sm font-bold text-zinc-200 mb-1">Update Statistics</h4>
-            <p className="text-body text-zinc-500 leading-relaxed">
+            <p className="text-xs text-zinc-500 leading-relaxed">
               Updates query planner statistics for all tables.
             </p>
           </div>
@@ -299,7 +299,7 @@ export function OperationsTab() {
               </Button>
             </div>
             <h4 className="text-sm font-bold text-zinc-200 mb-1">Reclaim Space</h4>
-            <p className="text-body text-zinc-500 leading-relaxed">
+            <p className="text-xs text-zinc-500 leading-relaxed">
               Removes dead rows and returns space to the OS.
             </p>
           </div>
@@ -324,7 +324,7 @@ export function OperationsTab() {
               </Button>
             </div>
             <h4 className="text-sm font-bold text-zinc-200 mb-1">Rebuild Indexes</h4>
-            <p className="text-body text-zinc-500 leading-relaxed">
+            <p className="text-xs text-zinc-500 leading-relaxed">
               Reconstructs all indexes in the database.
             </p>
           </div>
@@ -333,11 +333,11 @@ export function OperationsTab() {
           <div className="p-4 rounded-xl border border-red-500/10 bg-red-500/5 flex flex-col justify-center">
             <div className="flex items-center gap-2 text-red-400 mb-2">
               <ShieldAlert className="w-4 h-4" />
-              <span className="text-body font-bold uppercase tracking-wider">
+              <span className="text-xs font-bold uppercase tracking-wider">
                 Warning
               </span>
             </div>
-            <p className="text-body text-red-400/70 leading-relaxed italic">
+            <p className="text-xs text-red-400/70 leading-relaxed italic">
               These operations can be resource-intensive. Avoid running them
               during peak traffic hours.
             </p>
@@ -392,7 +392,7 @@ export function OperationsTab() {
                         <span>-</span>
                         <span className="font-mono">{table.tableSize}</span>
                         {(table.bloatRatio ?? 0) > 10 && (
-                          <Badge variant="outline" className="text-label text-yellow-400 border-yellow-500/20 h-4">
+                          <Badge variant="outline" className="text-[0.625rem] text-yellow-400 border-yellow-500/20 h-4">
                             {(table.bloatRatio ?? 0).toFixed(0)}% bloat
                           </Badge>
                         )}
@@ -447,19 +447,19 @@ export function OperationsTab() {
             <div className="grid grid-cols-4 gap-2">
               <div className="rounded-lg bg-white/[0.03] p-2 text-center">
                 <div className="text-lg font-bold text-zinc-200 tabular-nums">{activeCount}</div>
-                <div className="text-label text-zinc-500 uppercase font-bold">Active</div>
+                <div className="text-[0.625rem] text-zinc-500 uppercase font-bold">Active</div>
               </div>
               <div className="rounded-lg bg-white/[0.03] p-2 text-center">
                 <div className="text-lg font-bold text-zinc-200 tabular-nums">{idleCount}</div>
-                <div className="text-label text-zinc-500 uppercase font-bold">Idle</div>
+                <div className="text-[0.625rem] text-zinc-500 uppercase font-bold">Idle</div>
               </div>
               <div className="rounded-lg bg-white/[0.03] p-2 text-center">
                 <div className={`text-lg font-bold tabular-nums ${idleInTxCount > 0 ? 'text-yellow-400' : 'text-zinc-200'}`}>{idleInTxCount}</div>
-                <div className="text-label text-zinc-500 uppercase font-bold">In TX</div>
+                <div className="text-[0.625rem] text-zinc-500 uppercase font-bold">In TX</div>
               </div>
               <div className="rounded-lg bg-white/[0.03] p-2 text-center">
                 <div className={`text-lg font-bold tabular-nums ${waitingCount > 0 ? 'text-orange-400' : 'text-zinc-200'}`}>{waitingCount}</div>
-                <div className="text-label text-zinc-500 uppercase font-bold">Wait</div>
+                <div className="text-[0.625rem] text-zinc-500 uppercase font-bold">Wait</div>
               </div>
             </div>
           </div>
@@ -523,7 +523,7 @@ export function OperationsTab() {
                                 ? 'outline'
                                 : 'secondary'
                           }
-                          className="text-label"
+                          className="text-[0.625rem]"
                         >
                           {session.duration}
                         </Badge>
@@ -575,7 +575,7 @@ export function OperationsTab() {
                 </span>
                 <Badge
                   variant="outline"
-                  className="text-label font-bold w-[70px] justify-center shrink-0 border-white/10"
+                  className="text-[0.625rem] font-bold w-[70px] justify-center shrink-0 border-white/10"
                 >
                   {entry.type}
                 </Badge>
diff --git a/src/components/admin/tabs/OverviewTab.tsx b/src/components/admin/tabs/OverviewTab.tsx
index 395d112..1b8fa18 100644
--- a/src/components/admin/tabs/OverviewTab.tsx
+++ b/src/components/admin/tabs/OverviewTab.tsx
@@ -514,7 +514,7 @@ function HeroStatusBanner({
                 animate={{ scale: [1, 1.05, 1], opacity: [0.7, 1, 0.7] }}
                 transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
               />
-              <span className="text-label font-bold text-emerald-400 uppercase tracking-widest">
+              <span className="text-[0.625rem] font-bold text-emerald-400 uppercase tracking-widest">
                 Live
               </span>
             </div>
@@ -532,7 +532,7 @@ function HeroStatusBanner({
                   {healthyCount > 0 && (
                     <Badge
                       variant="outline"
-                      className="border-emerald-500/30 text-emerald-400 h-5 text-label"
+                      className="border-emerald-500/30 text-emerald-400 h-5 text-[0.625rem]"
                     >
                       {healthyCount} healthy
                     </Badge>
@@ -540,7 +540,7 @@ function HeroStatusBanner({
                   {degradedCount > 0 && (
                     <Badge
                       variant="outline"
-                      className="border-amber-500/30 text-amber-400 h-5 text-label"
+                      className="border-amber-500/30 text-amber-400 h-5 text-[0.625rem]"
                     >
                       {degradedCount} degraded
                     </Badge>
@@ -548,7 +548,7 @@ function HeroStatusBanner({
                   {errorCount > 0 && (
                     <Badge
                       variant="outline"
-                      className="border-red-500/30 text-red-400 h-5 text-label"
+                      className="border-red-500/30 text-red-400 h-5 text-[0.625rem]"
                     >
                       {errorCount} error
                     </Badge>
@@ -559,7 +559,7 @@ function HeroStatusBanner({
                 {user && (
                   <Badge
                     variant="outline"
-                    className="border-white/10 text-zinc-500 h-5 text-label"
+                    className="border-white/10 text-zinc-500 h-5 text-[0.625rem]"
                   >
                     {user.username} ({user.role})
                   </Badge>
@@ -786,7 +786,7 @@ function FleetHealthSection({
                     {item.environment && (
                       <Badge
                         variant="outline"
-                        className="text-label h-4"
+                        className="text-[0.625rem] h-4"
                         style={{
                           borderColor:
                             ENVIRONMENT_COLORS[
@@ -824,7 +824,7 @@ function FleetHealthSection({
                   </div>
                 </div>
 
-                <div className="flex items-center gap-3 text-body text-zinc-500">
+                <div className="flex items-center gap-3 text-xs text-zinc-500">
                   <span className="font-mono text-zinc-400">
                     {item.status === 'error' ? 'timeout' : `${item.latencyMs}ms`}
                   </span>
@@ -958,7 +958,7 @@ function MetricGauge({
           >
             {displayValue ?? animatedValue}
           </span>
-          <span className="text-label text-zinc-500">{unit}</span>
+          <span className="text-[0.625rem] text-zinc-500">{unit}</span>
         </div>
       </div>
       <span className="text-xs text-zinc-500 mt-1 uppercase tracking-wider">
@@ -1206,10 +1206,10 @@ function QuickActionsSection() {
               <h3 className="text-sm font-bold text-zinc-200 mb-1">
                 {action.label}
               </h3>
-              <p className="text-body text-zinc-500 mb-3">
+              <p className="text-xs text-zinc-500 mb-3">
                 {action.description}
               </p>
-              <div className="flex items-center gap-1 text-body text-zinc-600 group-hover:text-zinc-400 transition-colors">
+              <div className="flex items-center gap-1 text-xs text-zinc-600 group-hover:text-zinc-400 transition-colors">
                 <span>Open</span>
                 <ArrowRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
               </div>
@@ -1308,7 +1308,7 @@ function EmptyState() {
               <div className="text-sm font-bold text-zinc-200 mb-1">
                 {f.label}
               </div>
-              <div className="text-body text-zinc-500">{f.description}</div>
+              <div className="text-xs text-zinc-500">{f.description}</div>
             </motion.div>
           ))}
         </motion.div>
diff --git a/src/components/admin/tabs/SecurityTab.tsx b/src/components/admin/tabs/SecurityTab.tsx
index ec1cc1c..64375fa 100644
--- a/src/components/admin/tabs/SecurityTab.tsx
+++ b/src/components/admin/tabs/SecurityTab.tsx
@@ -180,7 +180,7 @@ function ThresholdSettings() {
           <Activity className="h-4 w-4 text-blue-400" />
           Monitoring Thresholds
         </h3>
-        <p className="text-body text-zinc-500 mb-6">
+        <p className="text-xs text-zinc-500 mb-6">
           Configure warning and critical thresholds for monitoring alerts. These
           values are used by the monitoring dashboard to trigger visual alerts.
         </p>
diff --git a/src/components/community-section.tsx b/src/components/community-section.tsx
index a492718..92191a5 100644
--- a/src/components/community-section.tsx
+++ b/src/components/community-section.tsx
@@ -36,7 +36,7 @@ function DesktopCommunity() {
 
       <div className="flex items-center justify-between">
         <div className="space-y-1">
-          <h3 className="text-sm font-semibold text-zinc-200">Join the Community</h3>
+          <h3 className="text-xs font-medium text-zinc-200">Join the Community</h3>
           <p className="text-xs text-zinc-500">This project is open source. Your contributions make it better!</p>
         </div>
         <span className="shrink-0 text-xs font-medium px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
@@ -71,7 +71,7 @@ function MobileCommunity() {
     <div className="space-y-3">
       <div className="h-px bg-muted" />
 
-      <p className="text-xs font-semibold text-center text-muted-foreground">Join the Community</p>
+      <p className="text-xs font-medium text-center text-muted-foreground">Join the Community</p>
 
       <div className="flex flex-wrap justify-center gap-2">
         {communityActions.map((action) => (
diff --git a/src/components/monitoring/MonitoringDashboard.tsx b/src/components/monitoring/MonitoringDashboard.tsx
index 62b6a0d..56b1a67 100644
--- a/src/components/monitoring/MonitoringDashboard.tsx
+++ b/src/components/monitoring/MonitoringDashboard.tsx
@@ -113,7 +113,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
             )}
             <div className="flex items-center gap-2">
               <Activity className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
-              <h1 className="text-sm sm:text-lg font-semibold hidden xs:block">
+              <h1 className="text-xs sm:text-lg font-medium hidden xs:block">
                 <span className="hidden sm:inline">Database </span>Monitoring
               </h1>
             </div>
@@ -121,7 +121,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
 
           {/* Refresh Controls */}
           <div className="flex items-center gap-1 sm:gap-2">
-            <div className="hidden sm:flex items-center gap-2 text-sm text-muted-foreground mr-2">
+            <div className="hidden sm:flex items-center gap-2 text-xs text-muted-foreground mr-2">
               <div
                 className={`h-2 w-2 rounded-full ${autoRefresh ? 'bg-green-500 animate-pulse' : 'bg-muted'}`}
               />
@@ -209,7 +209,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
                 </SelectItem>
               ))}
               {connections.length === 0 && (
-                <div className="px-2 py-1 text-sm text-muted-foreground">
+                <div className="px-2 py-1 text-xs text-muted-foreground">
                   No connections available
                 </div>
               )}
@@ -223,7 +223,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
         <div className="flex flex-col items-center justify-center flex-1 gap-4 text-muted-foreground">
           <Database className="h-12 w-12" />
           <h2 className="text-lg font-medium">No Connection Selected</h2>
-          <p className="text-sm">Select a database connection to view monitoring data.</p>
+          <p className="text-xs">Select a database connection to view monitoring data.</p>
           <Button variant="outline" onClick={() => router.push('/')}>
             Manage Connections
           </Button>
@@ -232,7 +232,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
         <div className="flex flex-col items-center justify-center flex-1 gap-4 text-destructive">
           <Activity className="h-12 w-12" />
           <h2 className="text-lg font-medium">Connection Error</h2>
-          <p className="text-sm">{error}</p>
+          <p className="text-xs">{error}</p>
           <Button variant="outline" onClick={refresh}>
             Try Again
           </Button>
@@ -249,7 +249,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
               <TabsList className="h-12 w-full justify-between sm:justify-start rounded-none bg-transparent p-0">
                 <TabsTrigger
                   value="overview"
-                  className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-sm"
+                  className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-xs"
                   title="Overview"
                 >
                   <LayoutDashboard className="h-4 w-4 sm:h-4 sm:w-4" />
@@ -257,7 +257,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
                 </TabsTrigger>
                 <TabsTrigger
                   value="performance"
-                  className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-sm"
+                  className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-xs"
                   title="Performance"
                 >
                   <Activity className="h-4 w-4 sm:h-4 sm:w-4" />
@@ -265,7 +265,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
                 </TabsTrigger>
                 <TabsTrigger
                   value="queries"
-                  className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-sm"
+                  className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-xs"
                   title="Queries"
                 >
                   <Clock className="h-4 w-4 sm:h-4 sm:w-4" />
@@ -273,7 +273,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
                 </TabsTrigger>
                 <TabsTrigger
                   value="sessions"
-                  className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-sm"
+                  className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-xs"
                   title="Sessions"
                 >
                   <Users className="h-4 w-4 sm:h-4 sm:w-4" />
@@ -281,7 +281,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
                 </TabsTrigger>
                 <TabsTrigger
                   value="tables"
-                  className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-sm"
+                  className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-xs"
                   title="Tables"
                 >
                   <Table2 className="h-4 w-4 sm:h-4 sm:w-4" />
@@ -289,7 +289,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
                 </TabsTrigger>
                 <TabsTrigger
                   value="storage"
-                  className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-sm"
+                  className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-xs"
                   title="Storage"
                 >
                   <HardDrive className="h-4 w-4 sm:h-4 sm:w-4" />
@@ -297,7 +297,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
                 </TabsTrigger>
                 <TabsTrigger
                   value="pool"
-                  className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-sm"
+                  className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-xs"
                   title="Pool"
                 >
                   <Database className="h-4 w-4 sm:h-4 sm:w-4" />
diff --git a/src/components/monitoring/tabs/OverviewTab.tsx b/src/components/monitoring/tabs/OverviewTab.tsx
index 532a0a6..3c2fb4c 100644
--- a/src/components/monitoring/tabs/OverviewTab.tsx
+++ b/src/components/monitoring/tabs/OverviewTab.tsx
@@ -71,15 +71,15 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
         {/* Active Connections */}
         <Card className={`p-0 border-2 transition-colors ${getThresholdColor(connThreshold)}`}>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-3 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Connections
             </CardTitle>
             <Zap className="h-3 w-3 sm:h-4 sm:w-4 text-yellow-500" />
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">
+            <div className="text-lg sm:text-2xl font-medium">
               {overview?.activeConnections ?? 0}
-              <span className="text-xs sm:text-sm font-normal text-muted-foreground">
+              <span className="text-xs sm:text-xs font-normal text-muted-foreground">
                 /{overview?.maxConnections ?? 0}
               </span>
             </div>
@@ -93,13 +93,13 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
         {/* Database Size */}
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-3 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               DB Size
             </CardTitle>
             <Database className="h-3 w-3 sm:h-4 sm:w-4 text-blue-500" />
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{overview?.databaseSize || 'N/A'}</div>
+            <div className="text-lg sm:text-2xl font-medium">{overview?.databaseSize || 'N/A'}</div>
             <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               Total storage
             </p>
@@ -109,13 +109,13 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
         {/* Cache Hit Ratio */}
         <Card className={`p-0 border-2 transition-colors ${getThresholdColor(cacheThreshold)}`}>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-3 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Cache Hit
             </CardTitle>
             <Activity className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">
+            <div className="text-lg sm:text-2xl font-medium">
               {performance?.cacheHitRatio?.toFixed(1) ?? 0}%
             </div>
             <Progress
@@ -135,13 +135,13 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
         {/* Tables & Indexes */}
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-3 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Tables
             </CardTitle>
             <Table2 className="h-3 w-3 sm:h-4 sm:w-4 text-purple-500" />
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">
+            <div className="text-lg sm:text-2xl font-medium">
               {overview?.tableCount ?? 0}
             </div>
             <p className="text-xs sm:text-xs text-muted-foreground mt-1">
@@ -155,7 +155,7 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
       {connectionHistory.length >= 2 && (
         <Card className="p-0">
           <CardHeader className="p-3 sm:p-4 pb-1">
-            <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
+            <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
               <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
               Connection Trend
             </CardTitle>
@@ -171,33 +171,33 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
         {/* Performance Metrics */}
         <Card className="p-0">
           <CardHeader className="p-3 sm:p-4 pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
+            <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
               <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
               Performance
             </CardTitle>
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0 space-y-2 sm:space-y-3">
             <div className="flex justify-between items-center gap-2">
-              <span className="text-xs sm:text-sm text-muted-foreground">Buffer Pool</span>
+              <span className="text-xs sm:text-xs text-muted-foreground">Buffer Pool</span>
               <div className="flex items-center gap-1 sm:gap-2">
                 <Progress
                   value={performance?.bufferPoolUsage ?? 0}
                   className="w-16 sm:w-24 h-1.5 sm:h-2"
                 />
-                <span className="text-xs sm:text-sm font-medium w-8 sm:w-12 text-right">
+                <span className="text-xs sm:text-xs font-medium w-8 sm:w-12 text-right">
                   {performance?.bufferPoolUsage?.toFixed(0) ?? 0}%
                 </span>
               </div>
             </div>
             <div className="flex justify-between items-center">
-              <span className="text-xs sm:text-sm text-muted-foreground">Deadlocks</span>
+              <span className="text-xs sm:text-xs text-muted-foreground">Deadlocks</span>
               <Badge variant={performance?.deadlocks ? 'destructive' : 'secondary'} className="text-xs">
                 {performance?.deadlocks ?? 0}
               </Badge>
             </div>
             <div className="flex justify-between items-center">
-              <span className="text-xs sm:text-sm text-muted-foreground">Checkpoint</span>
-              <span className="text-xs sm:text-sm font-mono truncate max-w-[100px] sm:max-w-none">
+              <span className="text-xs sm:text-xs text-muted-foreground">Checkpoint</span>
+              <span className="text-xs sm:text-xs font-mono truncate max-w-[100px] sm:max-w-none">
                 {performance?.checkpointWriteTime || 'N/A'}
               </span>
             </div>
@@ -207,26 +207,26 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
         {/* Quick Stats */}
         <Card className="p-0">
           <CardHeader className="p-3 sm:p-4 pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
+            <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
               <Hash className="h-3 w-3 sm:h-4 sm:w-4" />
               Quick Stats
             </CardTitle>
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0 space-y-2 sm:space-y-3">
             <div className="flex justify-between items-center">
-              <span className="text-xs sm:text-sm text-muted-foreground">Slow Queries</span>
+              <span className="text-xs sm:text-xs text-muted-foreground">Slow Queries</span>
               <Badge variant={data?.slowQueries?.length ? 'outline' : 'secondary'} className="text-xs">
                 {data?.slowQueries?.length ?? 0}
               </Badge>
             </div>
             <div className="flex justify-between items-center">
-              <span className="text-xs sm:text-sm text-muted-foreground">Active</span>
+              <span className="text-xs sm:text-xs text-muted-foreground">Active</span>
               <Badge variant="secondary" className="text-xs">
                 {data?.activeSessions?.filter((s) => s.state === 'active').length ?? 0}
               </Badge>
             </div>
             <div className="flex justify-between items-center">
-              <span className="text-xs sm:text-sm text-muted-foreground">Idle</span>
+              <span className="text-xs sm:text-xs text-muted-foreground">Idle</span>
               <Badge variant="secondary" className="text-xs">
                 {data?.activeSessions?.filter((s) => s.state === 'idle').length ?? 0}
               </Badge>
diff --git a/src/components/monitoring/tabs/PerformanceTab.tsx b/src/components/monitoring/tabs/PerformanceTab.tsx
index 5ee8b49..d67a2ea 100644
--- a/src/components/monitoring/tabs/PerformanceTab.tsx
+++ b/src/components/monitoring/tabs/PerformanceTab.tsx
@@ -51,17 +51,17 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
         {/* Cache Hit Ratio */}
         <Card className={`p-0 border-2 transition-colors ${getThresholdColor(cacheThreshold)}`}>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Cache Hit
             </CardTitle>
             <Activity className={`h-3 w-3 sm:h-4 sm:w-4 ${cacheStatus.color}`} />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="flex items-end gap-1">
-              <span className="text-lg sm:text-3xl font-bold">
+              <span className="text-lg sm:text-3xl font-medium">
                 {performance?.cacheHitRatio?.toFixed(1) ?? 0}
               </span>
-              <span className="text-sm sm:text-xl text-muted-foreground">%</span>
+              <span className="text-xs sm:text-xl text-muted-foreground">%</span>
             </div>
             <Progress
               value={performance?.cacheHitRatio ?? 0}
@@ -79,17 +79,17 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
         {/* Buffer Pool Usage */}
         <Card className={`p-0 border-2 transition-colors ${getThresholdColor(bufferThreshold)}`}>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Buffer
             </CardTitle>
             <Gauge className={`h-3 w-3 sm:h-4 sm:w-4 ${bufferStatus.color}`} />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="flex items-end gap-1">
-              <span className="text-lg sm:text-3xl font-bold">
+              <span className="text-lg sm:text-3xl font-medium">
                 {performance?.bufferPoolUsage?.toFixed(0) ?? 0}
               </span>
-              <span className="text-sm sm:text-xl text-muted-foreground">%</span>
+              <span className="text-xs sm:text-xl text-muted-foreground">%</span>
             </div>
             <Progress
               value={performance?.bufferPoolUsage ?? 0}
@@ -107,7 +107,7 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
         {/* Deadlocks */}
         <Card className={`p-0 border-2 transition-colors ${getThresholdColor(deadlockThreshold)}`}>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Deadlocks
             </CardTitle>
             <AlertTriangle
@@ -116,7 +116,7 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="flex items-end gap-1">
-              <span className="text-lg sm:text-3xl font-bold">
+              <span className="text-lg sm:text-3xl font-medium">
                 {performance?.deadlocks ?? 0}
               </span>
             </div>
@@ -170,15 +170,15 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
         {/* Checkpoint Stats */}
         <Card className="p-0">
           <CardHeader className="p-3 sm:p-4 pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
+            <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
               <Zap className="h-3 w-3 sm:h-4 sm:w-4" />
               Checkpoint Stats
             </CardTitle>
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0 space-y-2 sm:space-y-4">
             <div className="p-2 sm:p-4 bg-muted/30 rounded-lg">
-              <p className="text-xs sm:text-sm text-muted-foreground">Write & Sync</p>
-              <p className="text-sm sm:text-lg font-mono mt-1 truncate">
+              <p className="text-xs sm:text-xs text-muted-foreground">Write & Sync</p>
+              <p className="text-xs sm:text-lg font-mono mt-1 truncate">
                 {performance?.checkpointWriteTime || 'N/A'}
               </p>
             </div>
@@ -191,7 +191,7 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
         {/* Performance Tips */}
         <Card className="p-0">
           <CardHeader className="p-3 sm:p-4 pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
+            <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
               <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
               Tips
             </CardTitle>
@@ -201,7 +201,7 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
               <div className="flex items-start gap-2 p-2 bg-yellow-500/10 rounded-md">
                 <AlertTriangle className="h-3 w-3 sm:h-4 sm:w-4 text-yellow-500 mt-0.5 flex-shrink-0" />
                 <div>
-                  <p className="text-xs sm:text-sm font-medium">Low Cache Hit</p>
+                  <p className="text-xs sm:text-xs font-medium">Low Cache Hit</p>
                   <p className="text-xs sm:text-xs text-muted-foreground hidden sm:block">
                     Increase shared_buffers
                   </p>
@@ -212,7 +212,7 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
               <div className="flex items-start gap-2 p-2 bg-red-500/10 rounded-md">
                 <AlertTriangle className="h-3 w-3 sm:h-4 sm:w-4 text-red-500 mt-0.5 flex-shrink-0" />
                 <div>
-                  <p className="text-xs sm:text-sm font-medium">Deadlocks</p>
+                  <p className="text-xs sm:text-xs font-medium">Deadlocks</p>
                   <p className="text-xs sm:text-xs text-muted-foreground hidden sm:block">
                     Review lock ordering
                   </p>
@@ -222,7 +222,7 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
             {(performance?.cacheHitRatio ?? 0) >= 90 && !(performance?.deadlocks) && (
               <div className="flex items-center gap-2 p-2 bg-green-500/10 rounded-md">
                 <Activity className="h-3 w-3 sm:h-4 sm:w-4 text-green-500 flex-shrink-0" />
-                <p className="text-xs sm:text-sm">Performing well!</p>
+                <p className="text-xs sm:text-xs">Performing well!</p>
               </div>
             )}
           </CardContent>
diff --git a/src/components/monitoring/tabs/PoolTab.tsx b/src/components/monitoring/tabs/PoolTab.tsx
index 2eaa9bd..0bbc585 100644
--- a/src/components/monitoring/tabs/PoolTab.tsx
+++ b/src/components/monitoring/tabs/PoolTab.tsx
@@ -69,7 +69,7 @@ export function PoolTab({ connection }: PoolTabProps) {
   if (error && !stats) {
     return (
       <div className="flex flex-col items-center justify-center h-full gap-2 text-destructive">
-        <p className="text-sm">{error}</p>
+        <p className="text-xs">{error}</p>
         <Button variant="outline" size="sm" onClick={fetchStats}>Try Again</Button>
       </div>
     );
@@ -85,7 +85,7 @@ export function PoolTab({ connection }: PoolTabProps) {
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <Server className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
-          <h2 className="text-sm sm:text-base font-semibold">Connection Pool</h2>
+          <h2 className="text-xs sm:text-base font-medium">Connection Pool</h2>
         </div>
         <Button
           variant="ghost"
@@ -99,7 +99,7 @@ export function PoolTab({ connection }: PoolTabProps) {
       </div>
 
       {stats?.message && (
-        <div className="text-sm text-muted-foreground bg-muted/30 rounded-lg p-3">
+        <div className="text-xs text-muted-foreground bg-muted/30 rounded-lg p-3">
           {stats.message}
         </div>
       )}
@@ -108,13 +108,13 @@ export function PoolTab({ connection }: PoolTabProps) {
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-4">
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-3 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Total
             </CardTitle>
             <Server className="h-3 w-3 sm:h-4 sm:w-4 text-blue-500" />
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{stats?.total ?? 0}</div>
+            <div className="text-lg sm:text-2xl font-medium">{stats?.total ?? 0}</div>
             <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               Max pool size
             </p>
@@ -123,13 +123,13 @@ export function PoolTab({ connection }: PoolTabProps) {
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-3 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Active
             </CardTitle>
             <Activity className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{stats?.active ?? 0}</div>
+            <div className="text-lg sm:text-2xl font-medium">{stats?.active ?? 0}</div>
             <Progress value={usagePercent} className="h-1 mt-1 sm:mt-2" />
             <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               {usagePercent}% utilized
@@ -139,13 +139,13 @@ export function PoolTab({ connection }: PoolTabProps) {
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-3 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Idle
             </CardTitle>
             <Clock className="h-3 w-3 sm:h-4 sm:w-4 text-yellow-500" />
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{stats?.idle ?? 0}</div>
+            <div className="text-lg sm:text-2xl font-medium">{stats?.idle ?? 0}</div>
             <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               Available
             </p>
@@ -154,7 +154,7 @@ export function PoolTab({ connection }: PoolTabProps) {
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-3 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Waiting
             </CardTitle>
             <Badge variant={stats?.waiting ? 'destructive' : 'secondary'} className="text-xs">
@@ -162,7 +162,7 @@ export function PoolTab({ connection }: PoolTabProps) {
             </Badge>
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{stats?.waiting ?? 0}</div>
+            <div className="text-lg sm:text-2xl font-medium">{stats?.waiting ?? 0}</div>
             <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               {stats?.waiting ? 'Queued requests' : 'No queue'}
             </p>
diff --git a/src/components/monitoring/tabs/QueriesTab.tsx b/src/components/monitoring/tabs/QueriesTab.tsx
index 42ebe0e..24bb42b 100644
--- a/src/components/monitoring/tabs/QueriesTab.tsx
+++ b/src/components/monitoring/tabs/QueriesTab.tsx
@@ -86,31 +86,31 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
       <div className="grid grid-cols-3 gap-2 sm:gap-4">
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Queries
             </CardTitle>
             <Search className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{formatNumber(totalQueries)}</div>
+            <div className="text-lg sm:text-2xl font-medium">{formatNumber(totalQueries)}</div>
           </CardContent>
         </Card>
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Avg Time
             </CardTitle>
             <Clock className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{formatTime(avgTime)}</div>
+            <div className="text-lg sm:text-2xl font-medium">{formatTime(avgTime)}</div>
           </CardContent>
         </Card>
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Slow
             </CardTitle>
             <AlertTriangle
@@ -118,7 +118,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
             />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{slowCount}</div>
+            <div className="text-lg sm:text-2xl font-medium">{slowCount}</div>
           </CardContent>
         </Card>
       </div>
@@ -126,7 +126,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
       {/* Queries Table */}
       <Card className="p-0">
         <CardHeader className="p-3 sm:p-4">
-          <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
+          <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
             <Clock className="h-3 w-3 sm:h-4 sm:w-4" />
             Slowest Queries
             {slowQueries.length === 0 && (
@@ -140,7 +140,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
           {slowQueries.length === 0 ? (
             <div className="text-center py-8 text-muted-foreground">
               <Search className="h-8 w-8 mx-auto mb-2 opacity-50" />
-              <p className="text-sm">No query statistics available.</p>
+              <p className="text-xs">No query statistics available.</p>
               <p className="text-xs mt-1">
                 Enable pg_stat_statements extension to see query stats.
               </p>
diff --git a/src/components/monitoring/tabs/SessionsTab.tsx b/src/components/monitoring/tabs/SessionsTab.tsx
index c47168b..948c247 100644
--- a/src/components/monitoring/tabs/SessionsTab.tsx
+++ b/src/components/monitoring/tabs/SessionsTab.tsx
@@ -92,49 +92,49 @@ export function SessionsTab({ data, loading, onKillSession, isAdmin = true }: Se
       <div className="grid grid-cols-4 gap-2 sm:gap-4">
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Active
             </CardTitle>
             <Activity className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{activeCount}</div>
+            <div className="text-lg sm:text-2xl font-medium">{activeCount}</div>
           </CardContent>
         </Card>
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Idle
             </CardTitle>
             <Clock className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{idleCount}</div>
+            <div className="text-lg sm:text-2xl font-medium">{idleCount}</div>
           </CardContent>
         </Card>
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               In TX
             </CardTitle>
             <Clock className={`h-3 w-3 sm:h-4 sm:w-4 ${idleInTxCount > 0 ? 'text-yellow-500' : 'text-muted-foreground'}`} />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{idleInTxCount}</div>
+            <div className="text-lg sm:text-2xl font-medium">{idleInTxCount}</div>
           </CardContent>
         </Card>
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Wait
             </CardTitle>
             <Users className={`h-3 w-3 sm:h-4 sm:w-4 ${waitingCount > 0 ? 'text-orange-500' : 'text-muted-foreground'}`} />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{waitingCount}</div>
+            <div className="text-lg sm:text-2xl font-medium">{waitingCount}</div>
           </CardContent>
         </Card>
       </div>
@@ -142,7 +142,7 @@ export function SessionsTab({ data, loading, onKillSession, isAdmin = true }: Se
       {/* Sessions Table */}
       <Card className="p-0">
         <CardHeader className="p-3 sm:p-4">
-          <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
+          <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
             <Users className="h-3 w-3 sm:h-4 sm:w-4" />
             Sessions ({sessions.length})
           </CardTitle>
@@ -151,7 +151,7 @@ export function SessionsTab({ data, loading, onKillSession, isAdmin = true }: Se
           {sessions.length === 0 ? (
             <div className="text-center py-8 text-muted-foreground">
               <Users className="h-8 w-8 mx-auto mb-2 opacity-50" />
-              <p className="text-sm">No active sessions found.</p>
+              <p className="text-xs">No active sessions found.</p>
             </div>
           ) : (
             <div className="overflow-x-auto">
@@ -257,7 +257,7 @@ export function SessionsTab({ data, loading, onKillSession, isAdmin = true }: Se
             <AlertDialogTitle>Terminate Session?</AlertDialogTitle>
             <AlertDialogDescription>
               Are you sure you want to terminate session{' '}
-              <span className="font-mono font-bold">{confirmKill?.pid}</span>?
+              <span className="font-mono font-medium">{confirmKill?.pid}</span>?
               <br />
               <br />
               User: <span className="font-medium">{confirmKill?.user}</span>
diff --git a/src/components/monitoring/tabs/StorageTab.tsx b/src/components/monitoring/tabs/StorageTab.tsx
index a61e1bb..4783529 100644
--- a/src/components/monitoring/tabs/StorageTab.tsx
+++ b/src/components/monitoring/tabs/StorageTab.tsx
@@ -55,13 +55,13 @@ export function StorageTab({ data, loading }: StorageTabProps) {
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-4">
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               DB Size
             </CardTitle>
             <Database className="h-3 w-3 sm:h-4 sm:w-4 text-blue-500" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold truncate">
+            <div className="text-lg sm:text-2xl font-medium truncate">
               {overview?.databaseSize || 'N/A'}
             </div>
           </CardContent>
@@ -69,13 +69,13 @@ export function StorageTab({ data, loading }: StorageTabProps) {
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Tables
             </CardTitle>
             <HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold truncate">{formatBytes(totalTableSize)}</div>
+            <div className="text-lg sm:text-2xl font-medium truncate">{formatBytes(totalTableSize)}</div>
             <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               {tablePercent.toFixed(1)}%
             </p>
@@ -84,13 +84,13 @@ export function StorageTab({ data, loading }: StorageTabProps) {
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Indexes
             </CardTitle>
             <Archive className="h-3 w-3 sm:h-4 sm:w-4 text-purple-500" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold truncate">{formatBytes(totalIndexSize)}</div>
+            <div className="text-lg sm:text-2xl font-medium truncate">{formatBytes(totalIndexSize)}</div>
             <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               {indexPercent.toFixed(1)}%
             </p>
@@ -99,13 +99,13 @@ export function StorageTab({ data, loading }: StorageTabProps) {
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               WAL
             </CardTitle>
             <FolderOpen className="h-3 w-3 sm:h-4 sm:w-4 text-orange-500" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold truncate">
+            <div className="text-lg sm:text-2xl font-medium truncate">
               {walStorage?.walSize || walStorage?.size || 'N/A'}
             </div>
           </CardContent>
@@ -115,7 +115,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
       {/* Storage Breakdown */}
       <Card className="p-0">
         <CardHeader className="p-3 sm:p-4 pb-2">
-          <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
+          <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
             <HardDrive className="h-3 w-3 sm:h-4 sm:w-4" />
             Storage Breakdown
           </CardTitle>
@@ -123,7 +123,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
         <CardContent className="p-3 sm:p-4 pt-0 space-y-3 sm:space-y-4">
           <div className="space-y-2 sm:space-y-3">
             <div>
-              <div className="flex items-center justify-between text-xs sm:text-sm mb-1">
+              <div className="flex items-center justify-between text-xs sm:text-xs mb-1">
                 <span className="flex items-center gap-1 sm:gap-2">
                   <div className="w-2 h-2 sm:w-3 sm:h-3 rounded-sm bg-green-500" />
                   Tables
@@ -134,7 +134,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
             </div>
 
             <div>
-              <div className="flex items-center justify-between text-xs sm:text-sm mb-1">
+              <div className="flex items-center justify-between text-xs sm:text-xs mb-1">
                 <span className="flex items-center gap-1 sm:gap-2">
                   <div className="w-2 h-2 sm:w-3 sm:h-3 rounded-sm bg-purple-500" />
                   Indexes
@@ -145,7 +145,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
             </div>
 
             <div>
-              <div className="flex items-center justify-between text-xs sm:text-sm mb-1">
+              <div className="flex items-center justify-between text-xs sm:text-xs mb-1">
                 <span className="flex items-center gap-1 sm:gap-2">
                   <div className="w-2 h-2 sm:w-3 sm:h-3 rounded-sm bg-muted-foreground" />
                   <span className="hidden sm:inline">Other (TOAST, FSM)</span>
@@ -164,7 +164,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
       {/* Tablespaces */}
       <Card className="p-0">
         <CardHeader className="p-3 sm:p-4 pb-2">
-          <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
+          <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
             <FolderOpen className="h-3 w-3 sm:h-4 sm:w-4" />
             Tablespaces
           </CardTitle>
@@ -173,7 +173,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
           {storage.length === 0 ? (
             <div className="text-center py-8 text-muted-foreground">
               <FolderOpen className="h-8 w-8 mx-auto mb-2 opacity-50" />
-              <p className="text-sm">No tablespace information available.</p>
+              <p className="text-xs">No tablespace information available.</p>
             </div>
           ) : (
             <div className="overflow-x-auto">
@@ -192,7 +192,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
                       <TableCell className="py-2">
                         <div className="flex items-center gap-1 sm:gap-2">
                           <FolderOpen className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground flex-shrink-0" />
-                          <span className="font-medium text-xs sm:text-sm truncate max-w-[80px] sm:max-w-none">{ts.name}</span>
+                          <span className="font-medium text-xs sm:text-xs truncate max-w-[80px] sm:max-w-none">{ts.name}</span>
                           {ts.name === 'pg_default' && (
                             <Badge variant="secondary" className="text-xs sm:text-xs hidden sm:inline-flex">Default</Badge>
                           )}
@@ -232,7 +232,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
       {/* Top Tables by Size */}
       <Card className="p-0">
         <CardHeader className="p-3 sm:p-4 pb-2">
-          <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
+          <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
             <Database className="h-3 w-3 sm:h-4 sm:w-4" />
             Largest Tables
           </CardTitle>
@@ -241,7 +241,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
           {tables.length === 0 ? (
             <div className="text-center py-8 text-muted-foreground">
               <Database className="h-8 w-8 mx-auto mb-2 opacity-50" />
-              <p className="text-sm">No table information available.</p>
+              <p className="text-xs">No table information available.</p>
             </div>
           ) : (
             <div className="overflow-x-auto">
@@ -267,7 +267,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
                         <TableRow key={`${table.schemaName}.${table.tableName}`}>
                           <TableCell className="py-2">
                             <div className="flex flex-col">
-                              <span className="font-medium text-xs sm:text-sm truncate max-w-[100px] sm:max-w-[200px]">{table.tableName}</span>
+                              <span className="font-medium text-xs sm:text-xs truncate max-w-[100px] sm:max-w-[200px]">{table.tableName}</span>
                               <span className="text-xs sm:text-xs text-muted-foreground">
                                 {table.schemaName}
                               </span>
diff --git a/src/components/monitoring/tabs/TablesTab.tsx b/src/components/monitoring/tabs/TablesTab.tsx
index f4119a4..48baa77 100644
--- a/src/components/monitoring/tabs/TablesTab.tsx
+++ b/src/components/monitoring/tabs/TablesTab.tsx
@@ -80,13 +80,13 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
       <div className="grid grid-cols-3 gap-2 sm:gap-4">
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Tables
             </CardTitle>
             <Table2 className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{tables.length}</div>
+            <div className="text-lg sm:text-2xl font-medium">{tables.length}</div>
             <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               {formatNumber(totalRows)} rows
             </p>
@@ -95,13 +95,13 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Size
             </CardTitle>
             <Search className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{formatBytes(totalSize)}</div>
+            <div className="text-lg sm:text-2xl font-medium">{formatBytes(totalSize)}</div>
             <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               Total
             </p>
@@ -110,7 +110,7 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
 
         <Card className="p-0">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
+            <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Vacuum
             </CardTitle>
             <AlertTriangle
@@ -118,7 +118,7 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
             />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{tablesNeedingVacuum}</div>
+            <div className="text-lg sm:text-2xl font-medium">{tablesNeedingVacuum}</div>
             <p className="text-xs sm:text-xs text-muted-foreground mt-1">
               {tablesNeedingVacuum > 0 ? 'Need' : 'OK'}
             </p>
@@ -130,7 +130,7 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
       <Card className="p-0">
         <CardHeader className="p-3 sm:p-4">
           <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-4">
-            <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
+            <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
               <Table2 className="h-3 w-3 sm:h-4 sm:w-4" />
               Table Statistics
             </CardTitle>
@@ -138,7 +138,7 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
               placeholder="Search..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full sm:w-[200px] h-8 text-sm"
+              className="w-full sm:w-[200px] h-8 text-xs"
             />
           </div>
         </CardHeader>
@@ -146,7 +146,7 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
           {filteredTables.length === 0 ? (
             <div className="text-center py-8 text-muted-foreground">
               <Table2 className="h-8 w-8 mx-auto mb-2 opacity-50" />
-              <p className="text-sm">No tables found.</p>
+              <p className="text-xs">No tables found.</p>
             </div>
           ) : (
             <div className="overflow-x-auto">
@@ -167,7 +167,7 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
                     <TableRow key={`${table.schemaName}.${table.tableName}`}>
                       <TableCell className="py-2">
                         <div className="flex flex-col">
-                          <span className="font-medium text-xs sm:text-sm truncate max-w-[100px] sm:max-w-[200px]">
+                          <span className="font-medium text-xs sm:text-xs truncate max-w-[100px] sm:max-w-[200px]">
                             {table.tableName}
                           </span>
                           <span className="text-xs sm:text-xs text-muted-foreground">
diff --git a/src/components/results-grid/ResultCard.tsx b/src/components/results-grid/ResultCard.tsx
index c984d3a..6545d23 100644
--- a/src/components/results-grid/ResultCard.tsx
+++ b/src/components/results-grid/ResultCard.tsx
@@ -63,7 +63,7 @@ export function ResultCard({
           </div>
           <div className="min-w-0 flex-1">
             <p className={cn(
-              "text-sm font-semibold truncate",
+              "text-xs font-medium truncate",
               maskingActive && sensitiveColumns?.has(primaryColumn) ? "text-zinc-500 italic" : "text-zinc-100"
             )}>
               {displayPrimary}
diff --git a/src/components/results-grid/RowDetailSheet.tsx b/src/components/results-grid/RowDetailSheet.tsx
index c512d15..54f0804 100644
--- a/src/components/results-grid/RowDetailSheet.tsx
+++ b/src/components/results-grid/RowDetailSheet.tsx
@@ -129,12 +129,12 @@ export function RowDetailSheet({
                 >
                   <div className="flex items-start justify-between gap-4">
                     <div className="flex-1 min-w-0">
-                      <p className="text-xs uppercase tracking-widest text-zinc-500 mb-1 font-mono flex items-center gap-1">
+                      <p className="text-xs text-zinc-500 mb-1 font-mono flex items-center gap-1">
                         {field}
                         {isMasked && <Lock className="w-2.5 h-2.5 text-purple-400" />}
                       </p>
                       <p className={cn(
-                        "font-mono text-sm break-all",
+                        "font-mono text-xs break-all",
                         isMasked ? "text-zinc-500 italic" : formatCellValue(row[field]).className,
                         isLongValue && "text-xs"
                       )}>
diff --git a/src/components/results-grid/StatsBar.tsx b/src/components/results-grid/StatsBar.tsx
index d21c208..a29ecf2 100644
--- a/src/components/results-grid/StatsBar.tsx
+++ b/src/components/results-grid/StatsBar.tsx
@@ -93,7 +93,7 @@ export function StatsBar({
               variant="ghost"
               size="sm"
               className={cn(
-                "h-6 px-2 text-xs font-bold gap-1",
+                "h-6 px-2 text-xs font-medium gap-1",
                 effectiveMaskingEnabled ? "text-purple-400 bg-purple-500/10" : "text-zinc-500"
               )}
               onClick={onToggleMasking}
@@ -103,7 +103,7 @@ export function StatsBar({
               {effectiveMaskingEnabled ? 'MASKED' : 'MASK'}
             </Button>
           ) : effectiveMaskingEnabled ? (
-            <span className="h-6 px-2 text-xs font-bold text-purple-400 bg-purple-500/10 rounded flex items-center gap-1">
+            <span className="h-6 px-2 text-xs font-medium text-purple-400 bg-purple-500/10 rounded flex items-center gap-1">
               <Lock className="w-3 h-3" />
               MASKED
             </span>
diff --git a/src/components/schema-explorer/ColumnList.tsx b/src/components/schema-explorer/ColumnList.tsx
index ed66801..396e9b2 100644
--- a/src/components/schema-explorer/ColumnList.tsx
+++ b/src/components/schema-explorer/ColumnList.tsx
@@ -23,7 +23,7 @@ export const ColumnList = React.memo(function ColumnList({ columns, indexes }: C
             </div>
           )}
 
-          <span className="text-data text-muted-foreground flex-1 truncate group-hover/col:text-foreground">
+          <span className="text-xs text-muted-foreground flex-1 truncate group-hover/col:text-foreground">
             {column.name}
           </span>
 
@@ -36,7 +36,7 @@ export const ColumnList = React.memo(function ColumnList({ columns, indexes }: C
         <div className="pt-2 pb-1">
           <div className="flex items-center gap-1.5 px-2 mb-1">
             <Hash className="w-2.5 h-2.5 text-purple-500/40" />
-            <span className="text-label uppercase tracking-wider font-bold text-muted-foreground">Indexes</span>
+            <span className="text-[0.625rem] font-medium text-muted-foreground">Indexes</span>
           </div>
           {indexes.map(idx => (
             <div key={idx.name} className="flex items-center gap-2 py-0.5 px-2">
diff --git a/src/components/schema-explorer/SchemaExplorer.tsx b/src/components/schema-explorer/SchemaExplorer.tsx
index b6ff901..0f5499e 100644
--- a/src/components/schema-explorer/SchemaExplorer.tsx
+++ b/src/components/schema-explorer/SchemaExplorer.tsx
@@ -80,7 +80,7 @@ export function SchemaExplorer({
           <Loader2 className="w-8 h-8 animate-spin text-blue-500/20" />
           <Database className="w-4 h-4 absolute inset-0 m-auto text-blue-500 animate-pulse" />
         </div>
-        <span className="text-xs uppercase tracking-[0.2em] font-bold animate-pulse">Scanning Schema...</span>
+        <span className="text-xs font-medium animate-pulse">Scanning Schema...</span>
       </div>
     );
   }
@@ -91,8 +91,8 @@ export function SchemaExplorer({
         <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4 border border-border">
           <AlertCircle className="w-6 h-6 text-muted-foreground" />
         </div>
-        <h3 className="text-foreground text-sm font-medium mb-1">No structures found</h3>
-        <p className="text-body text-muted-foreground leading-relaxed">
+        <h3 className="text-foreground text-xs font-medium mb-1">No structures found</h3>
+        <p className="text-xs text-muted-foreground leading-relaxed">
           We couldn&apos;t find any tables or views in this connection.
         </p>
       </div>
@@ -105,7 +105,7 @@ export function SchemaExplorer({
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <Database className="w-3.5 h-3.5 text-blue-500/50" />
-            <span className="text-xs font-bold uppercase tracking-[0.15em] text-muted-foreground">
+            <span className="text-xs font-medium text-muted-foreground">
               Explorer
             </span>
           </div>
@@ -132,7 +132,7 @@ export function SchemaExplorer({
                 <Plus className="w-3.5 h-3.5" />
               </Button>
             )}
-            <span className="text-label bg-blue-500/10 text-blue-400 px-1.5 py-0.5 rounded-full font-mono border border-blue-500/10">
+            <span className="text-[0.625rem] bg-blue-500/10 text-blue-400 px-1.5 py-0.5 rounded-full font-mono border border-blue-500/10">
               {schema.length}
             </span>
           </div>
@@ -144,7 +144,7 @@ export function SchemaExplorer({
             placeholder={labels?.searchPlaceholder || "Search tables or columns..."}
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="h-8 pl-8 pr-8 text-data bg-muted/50 border-border focus-visible:ring-1 focus-visible:ring-blue-500/50 placeholder:text-muted-foreground/50"
+            className="h-8 pl-8 pr-8 text-xs bg-muted/50 border-border focus-visible:ring-1 focus-visible:ring-blue-500/50 placeholder:text-muted-foreground/50"
           />
           {searchQuery && (
             <button
diff --git a/src/components/schema-explorer/TableItem.tsx b/src/components/schema-explorer/TableItem.tsx
index d4f762b..605d23c 100644
--- a/src/components/schema-explorer/TableItem.tsx
+++ b/src/components/schema-explorer/TableItem.tsx
@@ -156,7 +156,7 @@ export const TableItem = React.memo(function TableItem({
 
             <span
               className={cn(
-                'truncate min-w-0 flex-1 text-body font-medium transition-colors',
+                'truncate min-w-0 flex-1 text-xs font-medium transition-colors',
                 isExpanded ? 'text-foreground' : 'text-muted-foreground group-hover:text-foreground'
               )}
             >
@@ -165,7 +165,7 @@ export const TableItem = React.memo(function TableItem({
 
             <div className="shrink-0 relative w-8 h-6 flex items-center justify-center">
               {table.rowCount !== undefined && (
-                <span className="absolute inset-0 flex items-center justify-center text-label font-mono text-muted-foreground/70 whitespace-nowrap opacity-100 group-hover:opacity-0 transition-opacity pointer-events-none">
+                <span className="absolute inset-0 flex items-center justify-center text-[0.625rem] font-mono text-muted-foreground/70 whitespace-nowrap opacity-100 group-hover:opacity-0 transition-opacity pointer-events-none">
                   {table.rowCount >= 1000 ? `${(table.rowCount / 1000).toFixed(1)}k` : table.rowCount}
                 </span>
               )}
diff --git a/src/components/sidebar/ConnectionItem.tsx b/src/components/sidebar/ConnectionItem.tsx
index 63d3980..9d8b35a 100644
--- a/src/components/sidebar/ConnectionItem.tsx
+++ b/src/components/sidebar/ConnectionItem.tsx
@@ -25,7 +25,7 @@ export const ConnectionItem = React.memo(function ConnectionItem({
     <motion.div
       initial={false}
       className={cn(
-        'group flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-all duration-200 text-sm relative overflow-hidden',
+        'group flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-all duration-200 text-xs relative overflow-hidden',
         isActive
           ? 'bg-blue-600/10 text-blue-400'
           : 'hover:bg-accent/50 text-muted-foreground hover:text-foreground'
@@ -49,10 +49,10 @@ export const ConnectionItem = React.memo(function ConnectionItem({
       </div>
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-1.5">
-          <span className="truncate block font-medium text-body">{conn.name}</span>
+          <span className="truncate block font-medium text-xs">{conn.name}</span>
           {conn.environment && conn.environment !== 'other' && (
             <span
-              className="text-micro uppercase tracking-wider font-bold px-1.5 py-0.5 rounded-sm shrink-0"
+              className="text-[0.5rem] font-medium px-1.5 py-0.5 rounded-sm shrink-0"
               style={{
                 color: conn.color || '#6b7280',
                 backgroundColor: `${conn.color || '#6b7280'}15`,
diff --git a/src/components/sidebar/ConnectionsList.tsx b/src/components/sidebar/ConnectionsList.tsx
index 8c1d34c..3a4f91a 100644
--- a/src/components/sidebar/ConnectionsList.tsx
+++ b/src/components/sidebar/ConnectionsList.tsx
@@ -23,7 +23,7 @@ export function ConnectionsList({
   return (
     <section>
       <div className="px-3 mb-2 flex items-center justify-between">
-        <span className="text-xs font-bold uppercase tracking-[0.15em] text-muted-foreground">
+        <span className="text-xs font-medium text-muted-foreground">
           Connections
         </span>
         <div className="h-[1px] flex-1 bg-border/30 ml-3" />
@@ -32,7 +32,7 @@ export function ConnectionsList({
       <div className="space-y-0.5">
         {connections.length === 0 ? (
           <div className="px-3 py-6 text-center border border-dashed border-border/50 rounded-lg mx-2">
-            <p className="text-body text-muted-foreground mb-3 leading-relaxed">
+            <p className="text-xs text-muted-foreground mb-3 leading-relaxed">
               No database connections established yet.
             </p>
             <Button
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 14517b5..bbde21f 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -59,7 +59,7 @@ export function Sidebar({
           <div className="w-6 h-6 bg-blue-600 rounded-md flex items-center justify-center">
             <Zap className="w-3.5 h-3.5 text-white fill-current" />
           </div>
-          <span className="font-bold text-sm tracking-tight bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
+          <span className="font-medium text-xs tracking-tight bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
             LibreDB Studio
           </span>
         </div>
diff --git a/src/components/studio/BottomPanel.tsx b/src/components/studio/BottomPanel.tsx
index 774a7c8..249d1ee 100644
--- a/src/components/studio/BottomPanel.tsx
+++ b/src/components/studio/BottomPanel.tsx
@@ -42,7 +42,7 @@ function ChartDashboardLazy({ result }: { result: QueryResult | null }) {
     return (
       <div className="h-full flex flex-col items-center justify-center bg-[#080808] text-zinc-500 gap-2">
         <LayoutDashboard className="w-10 h-10 opacity-30" />
-        <p className="text-sm">No saved charts yet</p>
+        <p className="text-xs">No saved charts yet</p>
         <p className="text-xs text-zinc-600">Save charts from the Charts tab to display them here</p>
       </div>
     );
@@ -54,8 +54,8 @@ function ChartDashboardLazy({ result }: { result: QueryResult | null }) {
         {savedCharts.map(chart => (
           <div key={chart.id} className="bg-[#0d0d0d] border border-white/10 rounded-lg p-3">
             <div className="flex items-center justify-between mb-2">
-              <span className="text-xs font-bold text-zinc-300">{chart.name}</span>
-              <span className="text-xs text-zinc-600 uppercase">{chart.chartType}</span>
+              <span className="text-xs font-medium text-zinc-300">{chart.name}</span>
+              <span className="text-xs text-zinc-600">{chart.chartType}</span>
             </div>
             <div className="text-xs text-zinc-500">
               {chart.xAxis && <span>X: {chart.xAxis}</span>}
@@ -161,7 +161,7 @@ export function BottomPanel({
                 if (tab.key === 'nl2sql') onSetIsNL2SQLOpen(true);
               }}
               className={cn(
-                "h-full px-3 text-xs font-bold uppercase transition-all border-b-2 flex items-center gap-2",
+                "h-full px-3 text-xs font-medium transition-all border-b-2 flex items-center gap-2",
                 mode === tab.key
                   ? tab.activeClass
                   : "text-zinc-500 border-transparent hover:text-zinc-300"
@@ -179,7 +179,7 @@ export function BottomPanel({
             </span>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="sm" className="h-7 text-xs font-bold uppercase text-zinc-500 hover:text-white gap-2">
+                <Button variant="ghost" size="sm" className="h-7 text-xs font-medium text-zinc-500 hover:text-white gap-2">
                   <Download className="w-3 h-3" /> Export
                 </Button>
               </DropdownMenuTrigger>
@@ -276,8 +276,8 @@ export function BottomPanel({
         ) : (
           <div className="h-full flex flex-col items-center justify-center opacity-20 bg-[#0a0a0a]">
             <Terminal className="w-12 h-12 mb-4" />
-            <p className="text-sm font-medium">Execute a query or check history</p>
-            <p className="text-xs uppercase tracking-widest mt-2">Ready to query</p>
+            <p className="text-xs font-medium">Execute a query or check history</p>
+            <p className="text-xs mt-2">Ready to query</p>
           </div>
         )}
       </div>
diff --git a/src/components/studio/QueryToolbar.tsx b/src/components/studio/QueryToolbar.tsx
index 3e7b346..7fd296b 100644
--- a/src/components/studio/QueryToolbar.tsx
+++ b/src/components/studio/QueryToolbar.tsx
@@ -48,7 +48,7 @@ export function QueryToolbar({
       {playgroundMode && (
         <div className="hidden md:flex items-center justify-center gap-2 px-4 py-1 bg-emerald-500/10 border-b border-emerald-500/20 text-emerald-400">
           <FlaskConical className="w-3 h-3" />
-          <span className="text-xs font-bold uppercase tracking-widest">
+          <span className="text-xs font-mediumr">
             Sandbox Mode — All changes will be auto-rolled back
           </span>
         </div>
@@ -59,13 +59,13 @@ export function QueryToolbar({
         <div className="flex items-center gap-4">
           <div className="flex items-center gap-2 px-2 py-0.5 rounded bg-blue-500/5 border border-blue-500/10">
             <Terminal className="w-3 h-3 text-blue-400" />
-            <span className="text-xs font-bold text-blue-400 uppercase tracking-widest">Query</span>
+            <span className="text-xs font-medium text-blue-400">Query</span>
           </div>
           <div className="h-4 w-px bg-white/5" />
           <Button
             variant="ghost"
             size="sm"
-            className="h-7 text-xs font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-2"
+            className="h-7 text-xs font-medium text-zinc-500 hover:text-white gap-2"
             onClick={onSaveQuery}
           >
             <Save className="w-3 h-3" /> Save
@@ -74,7 +74,7 @@ export function QueryToolbar({
         {isExecuting ? (
           <Button
             size="sm"
-            className="bg-red-600 hover:bg-red-500 text-white font-bold text-body h-7 px-4 gap-2"
+            className="bg-red-600 hover:bg-red-500 text-white font-medium text-xs h-7 px-4 gap-2"
             onClick={onCancelQuery}
           >
             <Square className="w-3 h-3 fill-current" />
@@ -83,7 +83,7 @@ export function QueryToolbar({
         ) : (
           <Button
             size="sm"
-            className="bg-blue-600 hover:bg-blue-500 text-white font-bold text-body h-7 px-4 gap-2"
+            className="bg-blue-600 hover:bg-blue-500 text-white font-medium text-xs h-7 px-4 gap-2"
             onClick={onExecuteQuery}
             disabled={!activeConnection}
           >
@@ -97,13 +97,13 @@ export function QueryToolbar({
           <div className="flex items-center gap-1 ml-2 pl-2 border-l border-white/10">
             {transactionActive ? (
               <>
-                <span className="text-label font-bold text-amber-400 uppercase tracking-wider px-1.5 py-0.5 bg-amber-500/10 rounded border border-amber-500/20 mr-1">
+                <span className="text-[0.625rem] font-medium text-amber-400 px-1.5 py-0.5 bg-amber-500/10 rounded border border-amber-500/20 mr-1">
                   TXN
                 </span>
                 <Button
                   size="sm"
                   variant="ghost"
-                  className="h-7 text-xs font-bold text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10 gap-1"
+                  className="h-7 text-xs font-medium text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10 gap-1"
                   onClick={onCommitTransaction}
                 >
                   COMMIT
@@ -111,7 +111,7 @@ export function QueryToolbar({
                 <Button
                   size="sm"
                   variant="ghost"
-                  className="h-7 text-xs font-bold text-red-400 hover:text-red-300 hover:bg-red-500/10 gap-1"
+                  className="h-7 text-xs font-medium text-red-400 hover:text-red-300 hover:bg-red-500/10 gap-1"
                   onClick={onRollbackTransaction}
                 >
                   ROLLBACK
@@ -121,7 +121,7 @@ export function QueryToolbar({
               <Button
                 size="sm"
                 variant="ghost"
-                className="h-7 text-xs font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-1"
+                className="h-7 text-xs font-medium text-zinc-500 hover:text-white gap-1"
                 onClick={onBeginTransaction}
                 disabled={playgroundMode}
               >
@@ -133,7 +133,7 @@ export function QueryToolbar({
               size="sm"
               variant="ghost"
               className={cn(
-                "h-7 text-xs font-bold uppercase tracking-widest gap-1",
+                "h-7 text-xs font-medium gap-1",
                 playgroundMode
                   ? "text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20"
                   : "text-zinc-500 hover:text-white"
@@ -150,7 +150,7 @@ export function QueryToolbar({
               size="sm"
               variant="ghost"
               className={cn(
-                "h-7 text-xs font-bold uppercase tracking-widest gap-1",
+                "h-7 text-xs font-medium gap-1",
                 editingEnabled
                   ? "text-amber-400 bg-amber-500/10 hover:bg-amber-500/20"
                   : "text-zinc-500 hover:text-white"
@@ -165,7 +165,7 @@ export function QueryToolbar({
             <Button
               size="sm"
               variant="ghost"
-              className="h-7 text-xs font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-1"
+              className="h-7 text-xs font-medium text-zinc-500 hover:text-white gap-1"
               onClick={onImport}
               title="Import data from CSV/JSON"
             >
diff --git a/src/components/studio/StudioDesktopHeader.tsx b/src/components/studio/StudioDesktopHeader.tsx
index c2ff57c..0b35497 100644
--- a/src/components/studio/StudioDesktopHeader.tsx
+++ b/src/components/studio/StudioDesktopHeader.tsx
@@ -35,15 +35,15 @@ export function StudioDesktopHeader({
           <Database className="w-4 h-4 text-blue-400" />
         </div>
         <div>
-          <h1 className="text-sm font-semibold tracking-tight text-zinc-200 truncate max-w-[120px]">
+          <h1 className="text-xs font-medium text-zinc-200 truncate max-w-[120px]">
             {activeConnection ? activeConnection.name : 'Quick Access'}
           </h1>
           {activeConnection && (
-            <p className="text-xs text-zinc-500 font-mono uppercase tracking-widest leading-none mt-0.5">
+            <p className="text-xs text-zinc-500 font-mono uppercase leading-none mt-0.5">
               {activeConnection.type}
               {activeConnection.environment && activeConnection.environment !== 'other' && (
                 <span
-                  className="ml-1 font-bold"
+                  className="ml-1 font-medium"
                   style={{ color: activeConnection.color || '#22c55e' }}
                 >
                   • {activeConnection.environment}
@@ -66,7 +66,7 @@ export function StudioDesktopHeader({
               connectionPulse === 'degraded' && "bg-amber-500",
               connectionPulse === 'error' && "bg-red-500",
             )} />
-            <span className="text-xs font-bold uppercase tracking-widest text-zinc-500">
+            <span className="text-xs font-medium text-zinc-500">
               {connectionPulse === 'healthy' ? 'Online' : connectionPulse === 'degraded' ? 'Slow' : 'Error'}
             </span>
           </div>
@@ -75,7 +75,7 @@ export function StudioDesktopHeader({
         <Button
           variant="ghost"
           size="sm"
-          className="h-7 px-3 text-xs font-bold uppercase tracking-widest gap-2 text-zinc-500 hover:text-purple-400 hover:bg-purple-500/10"
+          className="h-7 px-3 text-xs font-medium gap-2 text-zinc-500 hover:text-purple-400 hover:bg-purple-500/10"
           onClick={() => router.push('/monitoring')}
         >
           <Gauge className="w-3 h-3" /> Monitoring
diff --git a/src/components/studio/StudioMobileHeader.tsx b/src/components/studio/StudioMobileHeader.tsx
index 92feb3b..08998bd 100644
--- a/src/components/studio/StudioMobileHeader.tsx
+++ b/src/components/studio/StudioMobileHeader.tsx
@@ -190,7 +190,7 @@ export function StudioMobileHeader({
             <Button
               variant="ghost"
               size="sm"
-              className="h-7 px-2 gap-1 text-xs font-bold text-zinc-500 hover:text-blue-400"
+              className="h-7 px-2 gap-1 text-xs font-medium text-zinc-500 hover:text-blue-400"
               onClick={() => queryEditorRef.current?.toggleAi()}
             >
               <Sparkles className="w-3.5 h-3.5" />
@@ -246,7 +246,7 @@ export function StudioMobileHeader({
 
                 <DropdownMenuSeparator className="bg-white/5" />
                 <div className="px-2 py-1">
-                  <span className="text-label font-bold text-zinc-600 uppercase tracking-widest">Advanced</span>
+                  <span className="text-[0.625rem] font-medium text-zinc-600">Advanced</span>
                 </div>
 
                 {!transactionActive ? (
@@ -302,12 +302,12 @@ export function StudioMobileHeader({
 
             {/* Status badges */}
             {transactionActive && (
-              <span className="text-label font-black text-amber-400 px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/20">
+              <span className="text-[0.625rem] font-medium text-amber-400 px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/20">
                 TXN
               </span>
             )}
             {playgroundMode && (
-              <span className="text-label font-black text-purple-400 px-1.5 py-0.5 rounded bg-purple-500/10 border border-purple-500/20">
+              <span className="text-[0.625rem] font-medium text-purple-400 px-1.5 py-0.5 rounded bg-purple-500/10 border border-purple-500/20">
                 SANDBOX
               </span>
             )}
@@ -316,7 +316,7 @@ export function StudioMobileHeader({
           {isExecuting ? (
             <Button
               size="sm"
-              className="bg-red-600 hover:bg-red-500 text-white font-bold text-body h-7 px-4 gap-1.5"
+              className="bg-red-600 hover:bg-red-500 text-white font-medium text-xs h-7 px-4 gap-1.5"
               onClick={onCancelQuery}
             >
               <Square className="w-3 h-3 fill-current" />
@@ -325,7 +325,7 @@ export function StudioMobileHeader({
           ) : (
             <Button
               size="sm"
-              className="bg-blue-600 hover:bg-blue-500 text-white font-bold text-body h-7 px-4 gap-1.5"
+              className="bg-blue-600 hover:bg-blue-500 text-white font-medium text-xs h-7 px-4 gap-1.5"
               onClick={onExecuteQuery}
               disabled={!activeConnection}
             >
diff --git a/src/workspace/StudioWorkspace.tsx b/src/workspace/StudioWorkspace.tsx
index bad3320..30f32c9 100644
--- a/src/workspace/StudioWorkspace.tsx
+++ b/src/workspace/StudioWorkspace.tsx
@@ -342,7 +342,7 @@ export function StudioWorkspace({
               {activeMobileTab === 'database' && (
                 <div className="md:hidden h-full bg-[#080808] overflow-auto p-4">
                   <div className="mb-4 flex items-center justify-between">
-                    <h2 className="text-sm font-bold text-zinc-300 uppercase tracking-widest">Connections</h2>
+                    <h2 className="text-xs font-medium text-zinc-300">Connections</h2>
                   </div>
                   <ConnectionsList
                     connections={conn.connections}
@@ -384,7 +384,7 @@ export function StudioWorkspace({
                   ) : (
                     <div className="flex flex-col items-center justify-center h-full text-zinc-500">
                       <Database className="w-12 h-12 mb-4 opacity-30" />
-                      <p className="text-sm">Select a connection first</p>
+                      <p className="text-xs">Select a connection first</p>
                     </div>
                   )}
                 </div>
@@ -565,22 +565,22 @@ export function StudioWorkspace({
                 <AlertTriangle className="w-5 h-5 text-amber-400" />
               </div>
               <div className="flex-1 min-w-0">
-                <AlertDialogTitle className="text-[15px] font-semibold text-zinc-100 mb-1">
+                <AlertDialogTitle className="text-xs font-medium text-zinc-100 mb-1">
                   Load all results?
                 </AlertDialogTitle>
-                <AlertDialogDescription className="text-[13px] text-zinc-500 leading-relaxed">
+                <AlertDialogDescription className="text-xs text-zinc-500 leading-relaxed">
                   This may slow down your browser. Max <span className="text-zinc-400">100K</span> rows will be loaded.
                 </AlertDialogDescription>
               </div>
             </div>
           </div>
           <div className="px-6 pb-6 flex gap-2">
-            <AlertDialogCancel className="flex-1 h-9 bg-white/5 border-0 text-zinc-400 text-[13px] font-medium hover:bg-white/10 hover:text-zinc-200">
+            <AlertDialogCancel className="flex-1 h-9 bg-white/5 border-0 text-zinc-400 text-xs font-medium hover:bg-white/10 hover:text-zinc-200">
               Cancel
             </AlertDialogCancel>
             <AlertDialogAction
               onClick={queryExec.handleUnlimitedQuery}
-              className="flex-1 h-9 bg-amber-600 border-0 text-white text-[13px] font-medium hover:bg-amber-500"
+              className="flex-1 h-9 bg-amber-600 border-0 text-white text-xs font-medium hover:bg-amber-500"
             >
               Load All
             </AlertDialogAction>

From f36ebb65e73fb92c694e494693af83100e7e18b7 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Fri, 27 Mar 2026 16:13:56 +0300
Subject: [PATCH 35/39] refactor: update icon stroke widths across components

Adjusted the stroke widths of various icons in components such as AIAutopilotPanel, CodeGenerator, CommandPalette, and others to enhance visual consistency and improve the overall UI experience. This change aims to standardize the appearance of icons throughout the application.
---
 src/components/AIAutopilotPanel.tsx           | 12 ++--
 src/components/CodeGenerator.tsx              |  8 +--
 src/components/CommandPalette.tsx             | 26 ++++-----
 src/components/ConnectionModal.tsx            | 32 +++++-----
 src/components/CreateTableModal.tsx           | 12 ++--
 src/components/DataCharts.tsx                 | 34 +++++------
 src/components/DataImportModal.tsx            | 34 +++++------
 src/components/DataProfiler.tsx               | 16 ++---
 src/components/DatabaseDocs.tsx               | 12 ++--
 src/components/MaskingSettings.tsx            | 10 ++--
 src/components/NL2SQLPanel.tsx                | 14 ++---
 src/components/PivotTable.tsx                 |  6 +-
 src/components/QueryEditor.tsx                | 26 ++++-----
 src/components/QueryHistory.tsx               | 22 +++----
 src/components/QuerySafetyDialog.tsx          |  8 +--
 src/components/ResultsGrid.tsx                | 12 ++--
 src/components/SaveQueryModal.tsx             |  4 +-
 src/components/SavedQueries.tsx               | 12 ++--
 src/components/SchemaDiagram.tsx              | 22 +++----
 src/components/SchemaDiff.tsx                 | 32 +++++-----
 src/components/SnapshotTimeline.tsx           |  4 +-
 src/components/Studio.tsx                     |  6 +-
 src/components/TestDataGenerator.tsx          | 10 ++--
 src/components/VisualExplain.tsx              | 58 +++++++++----------
 .../monitoring/MonitoringDashboard.tsx        | 26 ++++-----
 .../monitoring/tabs/OverviewTab.tsx           | 18 +++---
 .../monitoring/tabs/PerformanceTab.tsx        | 10 ++--
 src/components/monitoring/tabs/PoolTab.tsx    | 10 ++--
 src/components/monitoring/tabs/QueriesTab.tsx | 16 ++---
 .../monitoring/tabs/SessionsTab.tsx           | 12 ++--
 src/components/monitoring/tabs/StorageTab.tsx | 20 +++----
 src/components/monitoring/tabs/TablesTab.tsx  | 20 +++----
 src/components/results-grid/ResultCard.tsx    |  6 +-
 .../results-grid/RowDetailSheet.tsx           | 12 ++--
 src/components/results-grid/StatsBar.tsx      | 18 +++---
 src/components/schema-explorer/ColumnList.tsx |  4 +-
 .../schema-explorer/SchemaExplorer.tsx        | 32 +++++-----
 src/components/schema-explorer/TableItem.tsx  | 20 +++----
 src/components/sidebar/ConnectionItem.tsx     | 24 ++++----
 src/components/sidebar/Sidebar.tsx            | 24 ++++----
 src/components/studio/BottomPanel.tsx         | 28 ++++-----
 src/components/studio/QueryToolbar.tsx        | 16 ++---
 src/components/studio/StudioDesktopHeader.tsx | 14 ++---
 src/components/studio/StudioMobileHeader.tsx  | 50 ++++++++--------
 src/components/studio/StudioTabBar.tsx        |  6 +-
 src/workspace/StudioWorkspace.tsx             |  4 +-
 46 files changed, 405 insertions(+), 417 deletions(-)

diff --git a/src/components/AIAutopilotPanel.tsx b/src/components/AIAutopilotPanel.tsx
index 56ecaac..3d1b71a 100644
--- a/src/components/AIAutopilotPanel.tsx
+++ b/src/components/AIAutopilotPanel.tsx
@@ -130,7 +130,7 @@ export function AIAutopilotPanel({ connection, schemaContext, onExecuteQuery }:
                   className="p-1 rounded bg-white/10 hover:bg-white/20 text-zinc-400"
                   title="Copy"
                 >
-                  {copiedIndex === blockIndex ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
+                  {copiedIndex === blockIndex ? <Check strokeWidth={1.5} className="w-3 h-3 text-emerald-400" /> : <Copy strokeWidth={1.5} className="w-3 h-3" />}
                 </button>
                 {onExecuteQuery && (
                   <button
@@ -138,7 +138,7 @@ export function AIAutopilotPanel({ connection, schemaContext, onExecuteQuery }:
                     className="p-1 rounded bg-blue-600/20 hover:bg-blue-600/30 text-blue-400"
                     title="Execute"
                   >
-                    <Play className="w-3 h-3 fill-current" />
+                    <Play strokeWidth={1.5} className="w-3 h-3 fill-current" />
                   </button>
                 )}
               </div>
@@ -185,7 +185,7 @@ export function AIAutopilotPanel({ connection, schemaContext, onExecuteQuery }:
       <div className="flex items-center justify-between px-4 py-2 border-b border-white/5 bg-[#0a0a0a]">
         <div className="flex items-center gap-2">
           <div className="p-1 rounded bg-cyan-500/10">
-            <Sparkles className="w-3.5 h-3.5 text-cyan-400" />
+            <Sparkles strokeWidth={1.5} className="w-3 h-3 text-cyan-400" />
           </div>
           <span className="text-xs font-medium text-cyan-400">
             AI Performance Autopilot
@@ -202,9 +202,9 @@ export function AIAutopilotPanel({ connection, schemaContext, onExecuteQuery }:
           )}
         >
           {isLoading ? (
-            <><Loader2 className="w-3 h-3 animate-spin" /> Analyzing...</>
+            <><Loader2 strokeWidth={1.5} className="w-3 h-3 animate-spin" /> Analyzing...</>
           ) : (
-            <><RefreshCw className="w-3 h-3" /> {report ? 'Re-analyze' : 'Run Analysis'}</>
+            <><RefreshCw strokeWidth={1.5} className="w-3 h-3" /> {report ? 'Re-analyze' : 'Run Analysis'}</>
           )}
         </button>
       </div>
@@ -213,7 +213,7 @@ export function AIAutopilotPanel({ connection, schemaContext, onExecuteQuery }:
       <div ref={reportRef} className="flex-1 overflow-auto p-4">
         {!report && !isLoading && !error && (
           <div className="flex flex-col items-center justify-center h-full opacity-40">
-            <Sparkles className="w-8 h-8 mb-3" />
+            <Sparkles strokeWidth={1.5} className="w-8 h-8 mb-3" />
             <p className="text-xs font-medium">AI Performance Autopilot</p>
             <p className="text-xs text-zinc-500 mt-1">
               Click &quot;Run Analysis&quot; to get AI-powered optimization recommendations
diff --git a/src/components/CodeGenerator.tsx b/src/components/CodeGenerator.tsx
index f0658b2..afc652e 100644
--- a/src/components/CodeGenerator.tsx
+++ b/src/components/CodeGenerator.tsx
@@ -204,7 +204,7 @@ export function CodeGenerator({
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-3 border-b border-white/5">
           <div className="flex items-center gap-2">
-            <Code className="w-4 h-4 text-purple-400" />
+            <Code strokeWidth={1.5} className="w-3.5 h-3.5 text-purple-400" />
             <span className="text-xs font-medium text-zinc-200">Code Generator</span>
             <span className="text-xs text-zinc-500 font-mono">{tableName}</span>
             {databaseType && (
@@ -212,7 +212,7 @@ export function CodeGenerator({
             )}
           </div>
           <button onClick={onClose} className="p-1 rounded hover:bg-white/5 text-zinc-500">
-            <X className="w-4 h-4" />
+            <X strokeWidth={1.5} className="w-3.5 h-3.5" />
           </button>
         </div>
 
@@ -224,7 +224,7 @@ export function CodeGenerator({
               className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs text-zinc-300 hover:bg-white/10 transition-colors"
             >
               {currentLang.label}
-              <ChevronDown className="w-3 h-3 text-zinc-500" />
+              <ChevronDown strokeWidth={1.5} className="w-3 h-3 text-zinc-500" />
             </button>
             {showLangDropdown && (
               <div className="absolute top-full left-0 mt-1 bg-[#111] border border-white/10 rounded-lg shadow-xl z-10 py-1 w-48">
@@ -254,7 +254,7 @@ export function CodeGenerator({
             onClick={handleCopy}
             className="absolute top-3 right-3 flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-white/10 hover:bg-white/20 text-xs text-zinc-400 transition-colors"
           >
-            {copied ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
+            {copied ? <Check strokeWidth={1.5} className="w-3 h-3 text-emerald-400" /> : <Copy strokeWidth={1.5} className="w-3 h-3" />}
             {copied ? 'Copied!' : 'Copy'}
           </button>
         </div>
diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx
index 2d9b376..785d370 100644
--- a/src/components/CommandPalette.tsx
+++ b/src/components/CommandPalette.tsx
@@ -108,42 +108,42 @@ export function CommandPalette({
         {/* Quick Actions */}
         <CommandGroup heading="Actions">
           <CommandItem onSelect={() => runAction(onExecuteQuery)}>
-            <Play className="w-4 h-4 text-blue-400" />
+            <Play strokeWidth={1.5} className="w-3.5 h-3.5 text-blue-400" />
             <span>Run Query</span>
             <CommandShortcut>Ctrl+Enter</CommandShortcut>
           </CommandItem>
           <CommandItem onSelect={() => runAction(onFormatQuery)}>
-            <AlignLeft className="w-4 h-4 text-zinc-400" />
+            <AlignLeft strokeWidth={1.5} className="w-3.5 h-3.5 text-zinc-400" />
             <span>Format Query</span>
           </CommandItem>
           <CommandItem onSelect={() => runAction(onSaveQuery)}>
-            <Save className="w-4 h-4 text-zinc-400" />
+            <Save strokeWidth={1.5} className="w-3.5 h-3.5 text-zinc-400" />
             <span>Save Current Query</span>
           </CommandItem>
           <CommandItem onSelect={() => runAction(onToggleAI)}>
-            <Sparkles className="w-4 h-4 text-purple-400" />
+            <Sparkles strokeWidth={1.5} className="w-3.5 h-3.5 text-purple-400" />
             <span>AI Assistant</span>
           </CommandItem>
           <CommandItem onSelect={() => runAction(onAddConnection)}>
-            <Plus className="w-4 h-4 text-emerald-400" />
+            <Plus strokeWidth={1.5} className="w-3.5 h-3.5 text-emerald-400" />
             <span>New Connection</span>
           </CommandItem>
           <CommandItem onSelect={() => runAction(onNavigateHealth)}>
-            <Activity className="w-4 h-4 text-emerald-400" />
+            <Activity strokeWidth={1.5} className="w-3.5 h-3.5 text-emerald-400" />
             <span>Health Dashboard</span>
           </CommandItem>
           <CommandItem onSelect={() => runAction(onNavigateMonitoring)}>
-            <Gauge className="w-4 h-4 text-purple-400" />
+            <Gauge strokeWidth={1.5} className="w-3.5 h-3.5 text-purple-400" />
             <span>Monitoring</span>
           </CommandItem>
           {activeConnection && (
             <CommandItem onSelect={() => runAction(onShowDiagram)}>
-              <Layers className="w-4 h-4 text-cyan-400" />
+              <Layers strokeWidth={1.5} className="w-3.5 h-3.5 text-cyan-400" />
               <span>Schema Diagram (ERD)</span>
             </CommandItem>
           )}
           <CommandItem onSelect={() => runAction(onLogout)}>
-            <LogOut className="w-4 h-4 text-red-400" />
+            <LogOut strokeWidth={1.5} className="w-3.5 h-3.5 text-red-400" />
             <span>Logout</span>
           </CommandItem>
         </CommandGroup>
@@ -158,7 +158,7 @@ export function CommandPalette({
                   key={conn.id}
                   onSelect={() => runAction(() => onSelectConnection(conn))}
                 >
-                  <Icon className="w-4 h-4" />
+                  <Icon className="w-3.5 h-3.5" />
                   <span>{conn.name}</span>
                   {activeConnection?.id === conn.id && (
                     <span className="ml-auto text-xs text-emerald-500 font-medium">Active</span>
@@ -177,7 +177,7 @@ export function CommandPalette({
                 key={table.name}
                 onSelect={() => runAction(() => onTableClick(table.name))}
               >
-                <Table2 className="w-4 h-4 text-zinc-500" />
+                <Table2 strokeWidth={1.5} className="w-3.5 h-3.5 text-zinc-500" />
                 <span>{table.name}</span>
                 <span className="ml-auto text-xs text-zinc-600">
                   {table.columns.length} cols
@@ -196,7 +196,7 @@ export function CommandPalette({
                 key={sq.id}
                 onSelect={() => runAction(() => onLoadSavedQuery(sq.query))}
               >
-                <Bookmark className="w-4 h-4 text-purple-400" />
+                <Bookmark strokeWidth={1.5} className="w-3.5 h-3.5 text-purple-400" />
                 <span>{sq.name}</span>
                 <span className="ml-auto text-xs text-zinc-600 truncate max-w-[150px]">
                   {sq.query.substring(0, 40)}...
@@ -214,7 +214,7 @@ export function CommandPalette({
                 key={item.id}
                 onSelect={() => runAction(() => onLoadHistoryQuery(item.query))}
               >
-                <Clock className="w-4 h-4 text-zinc-500" />
+                <Clock strokeWidth={1.5} className="w-3.5 h-3.5 text-zinc-500" />
                 <span className="truncate max-w-[350px] text-zinc-400">{item.query.substring(0, 60)}</span>
                 <span className="ml-auto text-xs text-zinc-600">{item.executionTime}ms</span>
               </CommandItem>
diff --git a/src/components/ConnectionModal.tsx b/src/components/ConnectionModal.tsx
index 9d5bb5b..d70bfc4 100644
--- a/src/components/ConnectionModal.tsx
+++ b/src/components/ConnectionModal.tsx
@@ -92,7 +92,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
         <div className="mb-4 md:mb-8">
           <div className="flex items-center gap-3 mb-2">
             <div className="p-2 rounded-xl bg-blue-500/10 border border-blue-500/20">
-              <Zap className="w-5 h-5 text-blue-400" />
+              <Zap strokeWidth={1.5} className="w-5 h-5 text-blue-400" />
             </div>
             <h2 className="text-xs md:text-[0.8125rem] font-medium">
               {isEditMode ? 'Edit Connection' : 'New Connection'}
@@ -107,7 +107,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                 onClick={() => setShowPasteInput(!showPasteInput)}
                 className="flex items-center gap-1.5 text-xs font-mediumr text-blue-400 hover:text-blue-300 transition-colors px-2 py-1 rounded-md hover:bg-blue-500/10"
               >
-                <ClipboardPaste className="w-3 h-3" />
+                <ClipboardPaste strokeWidth={1.5} className="w-3 h-3" />
                 Paste URL
               </button>
             )}
@@ -155,7 +155,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
           {/* Connection Name - always visible */}
           <div className="space-y-2">
             <div className="flex items-center gap-2 mb-1">
-              <Database className="w-3 h-3 text-zinc-500" />
+              <Database strokeWidth={1.5} className="w-3 h-3 text-zinc-500" />
               <Label htmlFor="name" className="text-xs font-mediumr text-zinc-500">Connection Name</Label>
             </div>
             <Input
@@ -234,7 +234,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                             : "text-zinc-500 hover:text-zinc-300"
                         )}
                       >
-                        <Globe className="w-3 h-3" />
+                        <Globe strokeWidth={1.5} className="w-3 h-3" />
                         Host / Port
                       </button>
                       <button
@@ -246,7 +246,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                             : "text-zinc-500 hover:text-zinc-300"
                         )}
                       >
-                        <Link className="w-3 h-3" />
+                        <Link strokeWidth={1.5} className="w-3 h-3" />
                         Connection String
                       </button>
                     </div>
@@ -256,7 +256,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                     <>
                       <div className="space-y-2">
                         <div className="flex items-center gap-2 mb-1">
-                          <Link className="w-3 h-3 text-zinc-500" />
+                          <Link strokeWidth={1.5} className="w-3 h-3 text-zinc-500" />
                           <Label htmlFor="connectionString" className="text-xs font-mediumr text-zinc-500">Connection URI</Label>
                         </div>
                         <Input
@@ -269,7 +269,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                       </div>
                       <div className="space-y-2">
                         <div className="flex items-center gap-2 mb-1">
-                          <Database className="w-3 h-3 text-zinc-500" />
+                          <Database strokeWidth={1.5} className="w-3 h-3 text-zinc-500" />
                           <Label htmlFor="database" className="text-xs font-mediumr text-zinc-500">Database Name (optional override)</Label>
                         </div>
                         <Input
@@ -285,7 +285,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                     <>
                       <div className="space-y-2">
                         <div className="flex items-center gap-2 mb-1">
-                          <Globe className="w-3 h-3 text-zinc-500" />
+                          <Globe strokeWidth={1.5} className="w-3 h-3 text-zinc-500" />
                           <Label htmlFor="host" className="text-xs font-mediumr text-zinc-500">Host & Instance</Label>
                         </div>
                         <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
@@ -308,7 +308,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div className="space-y-2">
                           <div className="flex items-center gap-2 mb-1">
-                            <Key className="w-3 h-3 text-zinc-500" />
+                            <Key strokeWidth={1.5} className="w-3 h-3 text-zinc-500" />
                             <Label htmlFor="user" className="text-xs font-mediumr text-zinc-500">Username</Label>
                           </div>
                           <Input
@@ -321,7 +321,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                         </div>
                         <div className="space-y-2">
                           <div className="flex items-center gap-2 mb-1">
-                            <ShieldCheck className="w-3 h-3 text-zinc-500" />
+                            <ShieldCheck strokeWidth={1.5} className="w-3 h-3 text-zinc-500" />
                             <Label htmlFor="password" className="text-xs font-mediumr text-zinc-500">Password</Label>
                           </div>
                           <Input
@@ -337,7 +337,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
 
                       <div className="space-y-2">
                         <div className="flex items-center gap-2 mb-1">
-                          <Database className="w-3 h-3 text-zinc-500" />
+                          <Database strokeWidth={1.5} className="w-3 h-3 text-zinc-500" />
                           <Label htmlFor="database" className="text-xs font-mediumr text-zinc-500">Database Name</Label>
                         </div>
                         <Input
@@ -361,7 +361,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                 onClick={() => setShowAdvanced(!showAdvanced)}
                 className="flex items-center gap-2 w-full px-3 py-2 rounded-lg border border-white/5 hover:border-white/10 bg-zinc-900/30 text-xs font-medium text-zinc-400 hover:text-zinc-200 transition-all"
               >
-                <Settings2 className="w-3.5 h-3.5 text-orange-500" />
+                <Settings2 strokeWidth={1.5} className="w-3.5 h-3.5 text-orange-500" />
                 <span>Advanced</span>
                 {(serviceName || instanceName) && (
                   <span className="ml-1 px-1.5 py-0.5 rounded text-[0.625rem] bg-orange-500/10 text-orange-400 border border-orange-500/20">
@@ -423,7 +423,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                 onClick={() => setShowSSL(!showSSL)}
                 className="flex items-center gap-2 w-full px-3 py-2 rounded-lg border border-white/5 hover:border-white/10 bg-zinc-900/30 text-xs font-medium text-zinc-400 hover:text-zinc-200 transition-all"
               >
-                <Lock className="w-3.5 h-3.5 text-emerald-500" />
+                <Lock strokeWidth={1.5} className="w-3.5 h-3.5 text-emerald-500" />
                 <span>SSL / TLS</span>
                 {sslMode !== 'disable' && (
                   <span className="ml-1 px-1.5 py-0.5 rounded text-[0.625rem] bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
@@ -510,7 +510,7 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                 onClick={() => setShowSSH(!showSSH)}
                 className="flex items-center gap-2 w-full px-3 py-2 rounded-lg border border-white/5 hover:border-white/10 bg-zinc-900/30 text-xs font-medium text-zinc-400 hover:text-zinc-200 transition-all"
               >
-                <Terminal className="w-3.5 h-3.5 text-purple-500" />
+                <Terminal strokeWidth={1.5} className="w-3.5 h-3.5 text-purple-500" />
                 <span>SSH Tunnel</span>
                 {sshEnabled && (
                   <span className="ml-1 px-1.5 py-0.5 rounded text-[0.625rem] bg-purple-500/10 text-purple-400 border border-purple-500/20">
@@ -656,9 +656,9 @@ export function ConnectionModal({ isOpen, onClose, onConnect, editConnection, on
                     : "bg-red-500/5 border-red-500/20 text-red-400"
                 )}>
                   {testResult.success ? (
-                    <CheckCircle2 className="w-4 h-4 shrink-0" />
+                    <CheckCircle2 strokeWidth={1.5} className="w-3.5 h-3.5 shrink-0" />
                   ) : (
-                    <XCircle className="w-4 h-4 shrink-0" />
+                    <XCircle strokeWidth={1.5} className="w-3.5 h-3.5 shrink-0" />
                   )}
                   <span className="leading-relaxed">{testResult.message}</span>
                 </div>
diff --git a/src/components/CreateTableModal.tsx b/src/components/CreateTableModal.tsx
index 27de263..91020c5 100644
--- a/src/components/CreateTableModal.tsx
+++ b/src/components/CreateTableModal.tsx
@@ -125,7 +125,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
         <DialogHeader className="px-6 py-4 border-b border-white/5 bg-zinc-900/50">
           <div className="flex items-center gap-3">
             <div className="p-2 rounded-lg bg-blue-500/10 border border-blue-500/20">
-              <TableIcon className="w-5 h-5 text-blue-400" />
+              <TableIcon strokeWidth={1.5} className="w-5 h-5 text-blue-400" />
             </div>
             <div>
               <DialogTitle className="text-xs font-medium">Create New Table</DialogTitle>
@@ -138,7 +138,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
           {/* Table Name Section */}
           <div className="space-y-4">
             <div className="flex items-center gap-2">
-              <Settings2 className="w-4 h-4 text-blue-500/50" />
+              <Settings2 strokeWidth={1.5} className="w-3.5 h-3.5 text-blue-500/50" />
               <Label className="text-xs font-medium text-zinc-500">General Settings</Label>
             </div>
             <div className="grid gap-2">
@@ -157,7 +157,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
           <div className="space-y-4">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <Type className="w-4 h-4 text-emerald-500/50" />
+                <Type strokeWidth={1.5} className="w-3.5 h-3.5 text-emerald-500/50" />
                 <Label className="text-xs font-medium text-zinc-500">Column Definitions</Label>
               </div>
               <Button 
@@ -166,7 +166,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
                 onClick={addColumn}
                 className="h-7 text-xs font-medium gap-2 hover:bg-emerald-500/10 hover:text-emerald-400"
               >
-                <Plus className="w-3 h-3" /> Add Column
+                <Plus strokeWidth={1.5} className="w-3 h-3" /> Add Column
               </Button>
             </div>
 
@@ -240,7 +240,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
                     className="h-8 w-8 text-zinc-600 hover:text-red-400 hover:bg-red-500/10 mb-0.5"
                     onClick={() => removeColumn(index)}
                   >
-                    <Trash2 className="w-3.5 h-3.5" />
+                    <Trash2 strokeWidth={1.5} className="w-3.5 h-3.5" />
                   </Button>
                 </div>
               ))}
@@ -271,7 +271,7 @@ export function CreateTableModal({ isOpen, onClose, onTableCreated }: CreateTabl
             disabled={isSubmitting || !tableName}
             className="bg-blue-600 hover:bg-blue-500 text-white text-xs font-medium gap-2 px-6"
           >
-            {isSubmitting ? <Loader2 className="w-3 h-3 animate-spin" /> : <Plus className="w-3 h-3" />}
+            {isSubmitting ? <Loader2 strokeWidth={1.5} className="w-3 h-3 animate-spin" /> : <Plus strokeWidth={1.5} className="w-3 h-3" />}
             CREATE TABLE
           </Button>
         </DialogFooter>
diff --git a/src/components/DataCharts.tsx b/src/components/DataCharts.tsx
index 24c4655..672a27a 100644
--- a/src/components/DataCharts.tsx
+++ b/src/components/DataCharts.tsx
@@ -506,22 +506,22 @@ export function DataCharts({ result }: DataChartsProps) {
   }
 
   const chartTypes: { type: ChartType; icon: React.ReactNode; label: string }[] = [
-    { type: 'bar', icon: <BarChart3 className="w-4 h-4" />, label: 'Bar' },
-    { type: 'line', icon: <LineChartIcon className="w-4 h-4" />, label: 'Line' },
-    { type: 'pie', icon: <PieChartIcon className="w-4 h-4" />, label: 'Pie' },
-    { type: 'area', icon: <AreaChartIcon className="w-4 h-4" />, label: 'Area' },
-    { type: 'scatter', icon: <Circle className="w-4 h-4" />, label: 'Scatter' },
-    { type: 'histogram', icon: <BarChart2 className="w-4 h-4" />, label: 'Histogram' },
-    { type: 'stacked-bar', icon: <BarChart3 className="w-4 h-4" />, label: 'Stacked' },
-    { type: 'stacked-area', icon: <AreaChartIcon className="w-4 h-4" />, label: 'Stack Area' },
+    { type: 'bar', icon: <BarChart3 strokeWidth={1.5} className="w-3.5 h-3.5" />, label: 'Bar' },
+    { type: 'line', icon: <LineChartIcon strokeWidth={1.5} className="w-3.5 h-3.5" />, label: 'Line' },
+    { type: 'pie', icon: <PieChartIcon strokeWidth={1.5} className="w-3.5 h-3.5" />, label: 'Pie' },
+    { type: 'area', icon: <AreaChartIcon strokeWidth={1.5} className="w-3.5 h-3.5" />, label: 'Area' },
+    { type: 'scatter', icon: <Circle strokeWidth={1.5} className="w-3.5 h-3.5" />, label: 'Scatter' },
+    { type: 'histogram', icon: <BarChart2 strokeWidth={1.5} className="w-3.5 h-3.5" />, label: 'Histogram' },
+    { type: 'stacked-bar', icon: <BarChart3 strokeWidth={1.5} className="w-3.5 h-3.5" />, label: 'Stacked' },
+    { type: 'stacked-area', icon: <AreaChartIcon strokeWidth={1.5} className="w-3.5 h-3.5" />, label: 'Stack Area' },
   ];
 
   const getFieldIcon = (type: FieldAnalysis['type']) => {
     switch (type) {
-      case 'numeric': return <Hash className="w-3 h-3" />;
+      case 'numeric': return <Hash strokeWidth={1.5} className="w-3 h-3" />;
       case 'date': return <Calendar className="w-3 h-3" />;
-      case 'categorical': return <Type className="w-3 h-3" />;
-      default: return <AlertCircle className="w-3 h-3" />;
+      case 'categorical': return <Type strokeWidth={1.5} className="w-3 h-3" />;
+      default: return <AlertCircle strokeWidth={1.5} className="w-3 h-3" />;
     }
   };
 
@@ -582,7 +582,7 @@ export function DataCharts({ result }: DataChartsProps) {
             <DropdownMenuTrigger asChild>
               <Button variant="outline" size="sm" className="h-7 text-xs bg-white/5 border-white/10 gap-1">
                 {yAxis.length > 0 ? yAxis.join(', ') : 'Select fields'}
-                <Settings2 className="w-3 h-3 ml-1" />
+                <Settings2 strokeWidth={1.5} className="w-3 h-3 ml-1" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="bg-[#111] border-white/10">
@@ -595,7 +595,7 @@ export function DataCharts({ result }: DataChartsProps) {
                     yAxis.includes(field) && "bg-blue-600/20 text-blue-400"
                   )}
                 >
-                  <Hash className="w-3 h-3 mr-2" />
+                  <Hash strokeWidth={1.5} className="w-3 h-3 mr-2" />
                   {field}
                   {yAxis.includes(field) && <span className="ml-auto">✓</span>}
                 </DropdownMenuItem>
@@ -694,13 +694,13 @@ export function DataCharts({ result }: DataChartsProps) {
         ) : (
           <div className="flex items-center gap-1">
             <Button variant="ghost" size="sm" className="h-7 text-xs text-zinc-500 hover:text-white gap-1" onClick={() => setShowSaveDialog(true)}>
-              <Save className="w-3 h-3" /> Save
+              <Save strokeWidth={1.5} className="w-3 h-3" /> Save
             </Button>
             {savedCharts.length > 0 && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button variant="ghost" size="sm" className="h-7 text-xs text-zinc-500 hover:text-white gap-1">
-                    <FolderOpen className="w-3 h-3" /> Saved ({savedCharts.length})
+                    <FolderOpen strokeWidth={1.5} className="w-3 h-3" /> Saved ({savedCharts.length})
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="bg-[#111] border-white/10 max-h-48 overflow-auto">
@@ -708,7 +708,7 @@ export function DataCharts({ result }: DataChartsProps) {
                     <DropdownMenuItem key={chart.id} className="text-xs cursor-pointer flex items-center justify-between gap-4">
                       <span onClick={() => loadSavedChart(chart)}>{chart.name} <span className="text-zinc-600">({chart.chartType})</span></span>
                       <button onClick={(e) => { e.stopPropagation(); deleteSavedChart(chart.id); }} className="text-zinc-600 hover:text-red-400">
-                        <X className="w-3 h-3" />
+                        <X strokeWidth={1.5} className="w-3 h-3" />
                       </button>
                     </DropdownMenuItem>
                   ))}
@@ -722,7 +722,7 @@ export function DataCharts({ result }: DataChartsProps) {
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" size="sm" className="h-7 text-xs font-medium text-zinc-500 hover:text-white gap-1">
-              <Download className="w-3 h-3" /> Export
+              <Download strokeWidth={1.5} className="w-3 h-3" /> Export
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="bg-[#111] border-white/10">
diff --git a/src/components/DataImportModal.tsx b/src/components/DataImportModal.tsx
index 0915f0a..4722ffa 100644
--- a/src/components/DataImportModal.tsx
+++ b/src/components/DataImportModal.tsx
@@ -257,7 +257,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
       <DialogContent className="bg-[#0a0a0a] border-white/10 text-zinc-100 max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
-            <Upload className="w-5 h-5 text-blue-400" />
+            <Upload strokeWidth={1.5} className="w-5 h-5 text-blue-400" />
             Import Data
             {fileName && (
               <span className="text-xs text-zinc-500 font-normal ml-2">
@@ -282,14 +282,14 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                   "bg-white/5 border border-white/10"
                 )}>
                   {idx < ['upload', 'preview', 'configure', 'ready'].indexOf(step) ? (
-                    <Check className="w-3 h-3" />
+                    <Check strokeWidth={1.5} className="w-3 h-3" />
                   ) : (
                     idx + 1
                   )}
                 </div>
                 <span className="hidden sm:inline">{s === 'upload' ? 'Upload' : s === 'preview' ? 'Preview' : s === 'configure' ? 'Configure' : 'Import'}</span>
               </div>
-              {idx < 3 && <ArrowRight className="w-3 h-3 text-zinc-700" />}
+              {idx < 3 && <ArrowRight strokeWidth={1.5} className="w-3 h-3 text-zinc-700" />}
             </React.Fragment>
           ))}
         </div>
@@ -304,7 +304,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                 onClick={() => fileInputRef.current?.click()}
                 className="border-2 border-dashed border-white/10 rounded-xl p-12 text-center cursor-pointer hover:border-blue-500/30 hover:bg-blue-500/5 transition-all"
               >
-                <Upload className="w-10 h-10 text-zinc-600 mx-auto mb-4" />
+                <Upload strokeWidth={1.5} className="w-10 h-10 text-zinc-600 mx-auto mb-4" />
                 <p className="text-xs text-zinc-400 mb-1">
                   Drop a file here or click to browse
                 </p>
@@ -313,11 +313,11 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                 </p>
                 <div className="flex items-center justify-center gap-4 mt-4">
                   <div className="flex items-center gap-1.5 text-zinc-500">
-                    <FileSpreadsheet className="w-4 h-4" />
+                    <FileSpreadsheet strokeWidth={1.5} className="w-3.5 h-3.5" />
                     <span className="text-xs">CSV</span>
                   </div>
                   <div className="flex items-center gap-1.5 text-zinc-500">
-                    <FileJson className="w-4 h-4" />
+                    <FileJson strokeWidth={1.5} className="w-3.5 h-3.5" />
                     <span className="text-xs">JSON</span>
                   </div>
                 </div>
@@ -334,7 +334,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
               />
               {error && (
                 <div className="mt-4 p-3 rounded-lg bg-red-500/10 border border-red-500/20 flex items-center gap-2">
-                  <AlertTriangle className="w-4 h-4 text-red-400 shrink-0" />
+                  <AlertTriangle strokeWidth={1.5} className="w-3.5 h-3.5 text-red-400 shrink-0" />
                   <span className="text-xs text-red-400">{error}</span>
                 </div>
               )}
@@ -347,9 +347,9 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-3">
                   {fileType === 'json' ? (
-                    <FileJson className="w-5 h-5 text-amber-400" />
+                    <FileJson strokeWidth={1.5} className="w-5 h-5 text-amber-400" />
                   ) : (
-                    <FileText className="w-5 h-5 text-emerald-400" />
+                    <FileText strokeWidth={1.5} className="w-5 h-5 text-emerald-400" />
                   )}
                   <div>
                     <p className="text-xs font-medium">{fileName}</p>
@@ -364,7 +364,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                   className="h-7 text-xs text-zinc-500"
                   onClick={() => { resetState(); }}
                 >
-                  <X className="w-3 h-3 mr-1" /> Reset
+                  <X strokeWidth={1.5} className="w-3 h-3 mr-1" /> Reset
                 </Button>
               </div>
 
@@ -405,7 +405,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                   className="bg-blue-600 hover:bg-blue-500 h-8 text-xs gap-1"
                   onClick={() => setStep('configure')}
                 >
-                  Configure Import <ArrowRight className="w-3 h-3" />
+                  Configure Import <ArrowRight strokeWidth={1.5} className="w-3 h-3" />
                 </Button>
               </div>
             </div>
@@ -425,7 +425,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                     )}
                     onClick={() => setCreateNewTable(false)}
                   >
-                    <Table2 className="w-4 h-4 mb-1" />
+                    <Table2 strokeWidth={1.5} className="w-3.5 h-3.5 mb-1" />
                     Existing Table
                   </button>
                   <button
@@ -435,7 +435,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                     )}
                     onClick={() => setCreateNewTable(true)}
                   >
-                    <FileSpreadsheet className="w-4 h-4 mb-1" />
+                    <FileSpreadsheet strokeWidth={1.5} className="w-3.5 h-3.5 mb-1" />
                     New Table
                   </button>
                 </div>
@@ -480,7 +480,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                     {parsedData.headers.map(header => (
                       <div key={header} className="grid grid-cols-[1fr,auto,1fr] gap-2 items-center px-3 py-1.5 border-b border-white/5">
                         <span className="text-xs text-zinc-300 font-mono truncate">{header}</span>
-                        <ArrowRight className="w-3 h-3 text-zinc-600" />
+                        <ArrowRight strokeWidth={1.5} className="w-3 h-3 text-zinc-600" />
                         <Input
                           value={columnMapping[header] || ''}
                           onChange={(e) => setColumnMapping(prev => ({ ...prev, [header]: e.target.value }))}
@@ -508,7 +508,7 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                   onClick={() => setStep('ready')}
                   disabled={!createNewTable && !targetTable}
                 >
-                  Review SQL <ArrowRight className="w-3 h-3" />
+                  Review SQL <ArrowRight strokeWidth={1.5} className="w-3 h-3" />
                 </Button>
               </div>
             </div>
@@ -566,9 +566,9 @@ export function DataImportModal({ isOpen, onClose, onImport, tables, databaseTyp
                     disabled={isImporting}
                   >
                     {isImporting ? (
-                      <><Loader2 className="w-3 h-3 animate-spin" /> Importing...</>
+                      <><Loader2 strokeWidth={1.5} className="w-3 h-3 animate-spin" /> Importing...</>
                     ) : (
-                      <><Upload className="w-3 h-3" /> Execute Import</>
+                      <><Upload strokeWidth={1.5} className="w-3 h-3" /> Execute Import</>
                     )}
                   </Button>
                 </div>
diff --git a/src/components/DataProfiler.tsx b/src/components/DataProfiler.tsx
index 755c481..e91b8bc 100644
--- a/src/components/DataProfiler.tsx
+++ b/src/components/DataProfiler.tsx
@@ -166,12 +166,12 @@ export function DataProfiler({
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-3 border-b border-white/5">
           <div className="flex items-center gap-2">
-            <BarChart3 className="w-4 h-4 text-cyan-400" />
+            <BarChart3 strokeWidth={1.5} className="w-3.5 h-3.5 text-cyan-400" />
             <span className="text-xs font-medium text-zinc-200">Data Profiler</span>
             <span className="text-xs text-zinc-500 font-mono">{tableName}</span>
           </div>
           <button onClick={onClose} className="p-1 rounded hover:bg-white/5 text-zinc-500">
-            <X className="w-4 h-4" />
+            <X strokeWidth={1.5} className="w-3.5 h-3.5" />
           </button>
         </div>
 
@@ -179,14 +179,14 @@ export function DataProfiler({
         <div className="flex-1 overflow-auto p-5 space-y-4">
           {isLoading && (
             <div className="flex items-center justify-center gap-2 py-12 text-zinc-500">
-              <Loader2 className="w-5 h-5 animate-spin" />
+              <Loader2 strokeWidth={1.5} className="w-5 h-5 animate-spin" />
               <span className="text-xs">Profiling {tableName}...</span>
             </div>
           )}
 
           {error && (
             <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 text-xs text-red-400 flex items-center gap-2">
-              <AlertCircle className="w-4 h-4 shrink-0" />
+              <AlertCircle strokeWidth={1.5} className="w-3.5 h-3.5 shrink-0" />
               {error}
             </div>
           )}
@@ -220,13 +220,13 @@ export function DataProfiler({
                   <div key={col.name} className="bg-[#0a0a0a] rounded-lg p-3 border border-white/5">
                     <div className="flex items-center justify-between mb-2">
                       <div className="flex items-center gap-2">
-                        <Hash className="w-3 h-3 text-blue-400" />
+                        <Hash strokeWidth={1.5} className="w-3 h-3 text-blue-400" />
                         <span className="text-xs font-medium text-zinc-200">{col.name}</span>
                         {col.type && (
                           <span className="text-xs text-zinc-500 font-mono">{col.type}</span>
                         )}
                         {sensitiveColumnNames.has(col.name) && (
-                          <span title="Sensitive column - values masked"><Lock className="w-3 h-3 text-purple-400" /></span>
+                          <span title="Sensitive column - values masked"><Lock strokeWidth={1.5} className="w-3 h-3 text-purple-400" /></span>
                         )}
                       </div>
                       <span className="text-xs text-zinc-500">
@@ -313,11 +313,11 @@ export function DataProfiler({
               {(aiSummary || isAiLoading) && (
                 <div className="bg-cyan-500/5 border border-cyan-500/10 rounded-lg p-4">
                   <div className="flex items-center gap-2 mb-2">
-                    <Sparkles className="w-3.5 h-3.5 text-cyan-400" />
+                    <Sparkles strokeWidth={1.5} className="w-3.5 h-3.5 text-cyan-400" />
                     <span className="text-xs font-medium text-cyan-400r">
                       AI Analysis
                     </span>
-                    {isAiLoading && <Loader2 className="w-3 h-3 animate-spin text-cyan-400" />}
+                    {isAiLoading && <Loader2 strokeWidth={1.5} className="w-3 h-3 animate-spin text-cyan-400" />}
                   </div>
                   {aiSummary && (
                     <div className="text-xs text-zinc-400 leading-relaxed whitespace-pre-wrap">
diff --git a/src/components/DatabaseDocs.tsx b/src/components/DatabaseDocs.tsx
index 607aa1a..8768fae 100644
--- a/src/components/DatabaseDocs.tsx
+++ b/src/components/DatabaseDocs.tsx
@@ -135,7 +135,7 @@ export function DatabaseDocs({ schema, schemaContext, databaseType }: DatabaseDo
       <div className="flex items-center justify-between px-4 py-2 border-b border-white/5 bg-[#0a0a0a]">
         <div className="flex items-center gap-2">
           <div className="p-1 rounded bg-teal-500/10">
-            <FileText className="w-3.5 h-3.5 text-teal-400" />
+            <FileText strokeWidth={1.5} className="w-3 h-3 text-teal-400" />
           </div>
           <span className="text-xs font-medium text-teal-400">
             Database Docs
@@ -153,14 +153,14 @@ export function DatabaseDocs({ schema, schemaContext, databaseType }: DatabaseDo
                 : "bg-teal-600 hover:bg-teal-500 text-white"
             )}
           >
-            {isAiLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Sparkles className="w-3 h-3" />}
+            {isAiLoading ? <Loader2 strokeWidth={1.5} className="w-3 h-3 animate-spin" /> : <Sparkles strokeWidth={1.5} className="w-3 h-3" />}
             {aiDocs ? 'Regenerate' : 'AI Describe'}
           </button>
           <button
             onClick={exportMarkdown}
             className="flex items-center gap-1 px-2.5 py-1 rounded-lg bg-white/5 text-zinc-400 text-xs font-medium hover:bg-white/10 transition-colors"
           >
-            <Download className="w-3 h-3" /> Export MD
+            <Download strokeWidth={1.5} className="w-3 h-3" /> Export MD
           </button>
         </div>
       </div>
@@ -168,7 +168,7 @@ export function DatabaseDocs({ schema, schemaContext, databaseType }: DatabaseDo
       {/* Search */}
       <div className="px-4 py-2 border-b border-white/5 bg-[#0a0a0a]">
         <div className="relative">
-          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3 h-3 text-zinc-500" />
+          <Search strokeWidth={1.5} className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3 h-3 text-zinc-500" />
           <input
             value={search}
             onChange={e => setSearch(e.target.value)}
@@ -190,11 +190,11 @@ export function DatabaseDocs({ schema, schemaContext, databaseType }: DatabaseDo
         {(aiDocs || isAiLoading) && (
           <div className="bg-teal-500/5 border border-teal-500/10 rounded-lg p-4 mb-4">
             <div className="flex items-center gap-2 mb-3">
-              <Sparkles className="w-3.5 h-3.5 text-teal-400" />
+              <Sparkles strokeWidth={1.5} className="w-3 h-3 text-teal-400" />
               <span className="text-xs font-medium text-teal-400">
                 AI-Generated Documentation
               </span>
-              {isAiLoading && <Loader2 className="w-3 h-3 animate-spin text-teal-400" />}
+              {isAiLoading && <Loader2 strokeWidth={1.5} className="w-3 h-3 animate-spin text-teal-400" />}
             </div>
             {aiDocs && (
               <div className="prose prose-invert prose-xs max-w-none">
diff --git a/src/components/MaskingSettings.tsx b/src/components/MaskingSettings.tsx
index bfc5244..e9b0cf9 100644
--- a/src/components/MaskingSettings.tsx
+++ b/src/components/MaskingSettings.tsx
@@ -248,7 +248,7 @@ export function MaskingSettings() {
             <div className="flex items-center justify-between">
               <h3 className="text-xs font-medium text-zinc-300">Masking Patterns</h3>
               <Button variant="outline" size="sm" className="h-7 text-xs" onClick={openNewDialog}>
-                <Plus className="w-3 h-3 mr-1" />
+                <Plus strokeWidth={1.5} className="w-3 h-3 mr-1" />
                 Add Pattern
               </Button>
             </div>
@@ -284,7 +284,7 @@ export function MaskingSettings() {
                         className="h-7 w-7 p-0"
                         onClick={() => openEditDialog(pattern)}
                       >
-                        <Pencil className="w-3 h-3 text-zinc-500" />
+                        <Pencil strokeWidth={1.5} className="w-3 h-3 text-zinc-500" />
                       </Button>
                       {!pattern.isBuiltin && (
                         <Button
@@ -293,7 +293,7 @@ export function MaskingSettings() {
                           className="h-7 w-7 p-0 text-red-400 hover:text-red-300"
                           onClick={() => deletePattern(pattern.id)}
                         >
-                          <Trash2 className="w-3 h-3" />
+                          <Trash2 strokeWidth={1.5} className="w-3 h-3" />
                         </Button>
                       )}
                     </div>
@@ -312,7 +312,7 @@ export function MaskingSettings() {
                 const masked = getPreviewMasked(pattern.maskType, pattern.customMask);
                 return (
                   <div key={pattern.id} className="flex items-center gap-2 text-xs font-mono">
-                    <Lock className="w-3 h-3 text-purple-400 shrink-0" />
+                    <Lock strokeWidth={1.5} className="w-3 h-3 text-purple-400 shrink-0" />
                     <span className="text-zinc-500 w-24 truncate">{pattern.name}:</span>
                     <span className="text-zinc-600 line-through">{preview.sample}</span>
                     <span className="text-zinc-400 mx-1">&rarr;</span>
@@ -330,7 +330,7 @@ export function MaskingSettings() {
               Reset Defaults
             </Button>
             <Button size="sm" onClick={handleSave}>
-              <Save className="w-3 h-3 mr-1" />
+              <Save strokeWidth={1.5} className="w-3 h-3 mr-1" />
               Save Config
             </Button>
           </div>
diff --git a/src/components/NL2SQLPanel.tsx b/src/components/NL2SQLPanel.tsx
index 1394869..155bfed 100644
--- a/src/components/NL2SQLPanel.tsx
+++ b/src/components/NL2SQLPanel.tsx
@@ -150,7 +150,7 @@ export function NL2SQLPanel({
       <div className="flex items-center justify-between px-4 py-2 border-b border-white/5 bg-[#0a0a0a]">
         <div className="flex items-center gap-2">
           <div className="p-1 rounded bg-violet-500/10">
-            <MessageSquare className="w-3.5 h-3.5 text-violet-400" />
+            <MessageSquare strokeWidth={1.5} className="w-3 h-3 text-violet-400" />
           </div>
           <span className="text-xs font-medium text-violet-400">
             Natural Language Query
@@ -168,14 +168,14 @@ export function NL2SQLPanel({
               className="p-1.5 rounded hover:bg-white/5 text-zinc-500 hover:text-zinc-300 transition-colors"
               title="Clear conversation"
             >
-              <Trash2 className="w-3.5 h-3.5" />
+              <Trash2 strokeWidth={1.5} className="w-3 h-3" />
             </button>
           )}
           <button
             onClick={onClose}
             className="p-1.5 rounded hover:bg-white/5 text-zinc-500 hover:text-zinc-300 transition-colors"
           >
-            <X className="w-3.5 h-3.5" />
+            <X strokeWidth={1.5} className="w-3 h-3" />
           </button>
         </div>
       </div>
@@ -184,7 +184,7 @@ export function NL2SQLPanel({
       <div className="flex-1 overflow-auto p-4 space-y-3">
         {messages.length === 0 && (
           <div className="flex flex-col items-center justify-center h-full opacity-40">
-            <Sparkles className="w-8 h-8 mb-3" />
+            <Sparkles strokeWidth={1.5} className="w-8 h-8 mb-3" />
             <p className="text-xs font-medium">Ask a question in plain English</p>
             <p className="text-xs text-zinc-500 mt-1">
               e.g. &quot;Show me the top 10 employees by salary&quot;
@@ -215,7 +215,7 @@ export function NL2SQLPanel({
                           onClick={() => onExecuteQuery(msg.query!)}
                           className="flex items-center gap-1 px-2 py-1 rounded bg-blue-600/20 border border-blue-500/20 text-blue-400 text-xs font-medium hover:bg-blue-600/30 transition-colors"
                         >
-                          <Play className="w-3 h-3 fill-current" /> Run
+                          <Play strokeWidth={1.5} className="w-3 h-3 fill-current" /> Run
                         </button>
                         <button
                           onClick={() => onLoadQuery(msg.query!)}
@@ -241,7 +241,7 @@ export function NL2SQLPanel({
         {isLoading && (
           <div className="flex gap-2 justify-start">
             <div className="bg-[#111] border border-white/5 rounded-lg px-3 py-2 flex items-center gap-2 text-zinc-500 text-xs">
-              <Loader2 className="w-3 h-3 animate-spin" />
+              <Loader2 strokeWidth={1.5} className="w-3 h-3 animate-spin" />
               Generating query...
             </div>
           </div>
@@ -272,7 +272,7 @@ export function NL2SQLPanel({
             disabled={isLoading || !question.trim()}
             className="bg-violet-600 hover:bg-violet-500 disabled:opacity-50 px-3 py-2 rounded-lg text-white text-xs font-medium transition-colors flex items-center gap-1.5"
           >
-            {isLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Send className="w-3 h-3" />}
+            {isLoading ? <Loader2 strokeWidth={1.5} className="w-3 h-3 animate-spin" /> : <Send strokeWidth={1.5} className="w-3 h-3" />}
           </button>
         </div>
       </form>
diff --git a/src/components/PivotTable.tsx b/src/components/PivotTable.tsx
index bd3d112..cde9922 100644
--- a/src/components/PivotTable.tsx
+++ b/src/components/PivotTable.tsx
@@ -125,7 +125,7 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
   if (!result || rows.length === 0) {
     return (
       <div className="h-full flex flex-col items-center justify-center opacity-30">
-        <Columns3 className="w-8 h-8 mb-3" />
+        <Columns3 strokeWidth={1.5} className="w-8 h-8 mb-3" />
         <p className="text-xs font-medium">Pivot Table</p>
         <p className="text-xs text-zinc-500 mt-1">Execute a query to create pivot tables</p>
       </div>
@@ -202,7 +202,7 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
             }}
             className="ml-auto flex items-center gap-1 px-2 py-1 rounded text-xs font-medium text-zinc-500 hover:text-blue-400 hover:bg-blue-500/10 transition-colors"
           >
-            <ArrowRight className="w-3 h-3" /> Generate SQL
+            <ArrowRight strokeWidth={1.5} className="w-3 h-3" /> Generate SQL
           </button>
         )}
       </div>
@@ -240,7 +240,7 @@ export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
           </table>
         ) : (
           <div className="flex flex-col items-center justify-center h-full opacity-30">
-            <GripVertical className="w-6 h-6 mb-2" />
+            <GripVertical strokeWidth={1.5} className="w-6 h-6 mb-2" />
             <p className="text-xs">Select row and value fields to build pivot</p>
           </div>
         )}
diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
index 6cfde9c..7efb517 100644
--- a/src/components/QueryEditor.tsx
+++ b/src/components/QueryEditor.tsx
@@ -496,7 +496,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
             className="h-7 text-xs font-medium text-white bg-blue-600 hover:bg-blue-500 hover:text-white gap-2 shadow-[0_0_10px_rgba(37,99,235,0.3)] animate-in fade-in zoom-in duration-200"
             onClick={handleExecute}
           >
-            <Play className="w-3 h-3 fill-current" /> Run Sel
+            <Play strokeWidth={1.5} className="w-3 h-3 fill-current" /> Run Sel
           </Button>
         )}
 
@@ -507,7 +507,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
           onClick={handleFormat}
           title={language === 'json' ? "Format JSON (Shift+Alt+F)" : "Format SQL (Shift+Alt+F)"}
         >
-          <AlignLeft className="w-3 h-3" /> Format
+          <AlignLeft strokeWidth={1.5} className="w-3 h-3" /> Format
         </Button>
 
         <Button
@@ -516,7 +516,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
           className="h-7 text-xs font-medium text-zinc-500 hover:text-white gap-2"
           onClick={handleCopy}
         >
-          <Copy className="w-3 h-3" /> {hasSelection ? 'Copy Sel' : 'Copy'}
+          <Copy strokeWidth={1.5} className="w-3 h-3" /> {hasSelection ? 'Copy Sel' : 'Copy'}
         </Button>
 
         <Button
@@ -525,7 +525,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
           className="h-7 text-xs font-medium text-zinc-500 hover:text-red-400 gap-2"
           onClick={handleClear}
         >
-          <Trash2 className="w-3 h-3" /> Clear
+          <Trash2 strokeWidth={1.5} className="w-3 h-3" /> Clear
         </Button>
 
         <div className="h-4 w-px bg-white/5" />
@@ -540,7 +540,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
           onClick={() => setShowLineNumbers(!showLineNumbers)}
           title={showLineNumbers ? "Hide line numbers" : "Show line numbers"}
         >
-          <Hash className="w-3 h-3" /> Lines
+          <Hash strokeWidth={1.5} className="w-3 h-3" /> Lines
         </Button>
 
         <Button
@@ -567,7 +567,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
                 className="h-7 text-xs font-medium text-amber-500 hover:text-amber-400 gap-2"
                 onClick={onExplain}
               >
-                <Zap className="w-3 h-3" /> Explain
+                <Zap strokeWidth={1.5} className="w-3 h-3" /> Explain
               </Button>
             )}
             <kbd className="px-1.5 py-0.5 rounded bg-zinc-900 border border-white/5 text-[0.5625rem] text-zinc-600 font-mono">
@@ -592,7 +592,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
                 <div className="flex items-center justify-between px-3 py-1.5 border-b border-white/5 mb-1.5">
                   <div className="flex items-center gap-2">
                     <div className="p-1 rounded-md bg-blue-500/10">
-                      <Sparkles className="w-3.5 h-3.5 text-blue-400" />
+                      <Sparkles strokeWidth={1.5} className="w-3 h-3 text-blue-400" />
                     </div>
                     <span className="text-[0.625rem] font-black text-blue-400">Expert DBA Mode</span>
                   </div>
@@ -622,7 +622,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
                       >
                         <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-2.5 flex items-start gap-2.5">
                           <div className="p-1 rounded bg-red-500/20 mt-0.5">
-                            <X className="w-3 h-3 text-red-400" />
+                            <X strokeWidth={1.5} className="w-3 h-3 text-red-400" />
                           </div>
                           <div className="flex-1">
                             <p className="text-xs font-medium text-red-400 mb-0.5">AI Error</p>
@@ -633,7 +633,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
                             onClick={() => setAiError(null)}
                             className="text-red-400/50 hover:text-red-400 transition-colors"
                           >
-                            <X className="w-3.5 h-3.5" />
+                            <X strokeWidth={1.5} className="w-3 h-3" />
                           </button>
                         </div>
                       </motion.div>
@@ -655,7 +655,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
                       onClick={() => setShowAi(false)}
                       className="p-2.5 rounded-xl hover:bg-white/5 text-zinc-500 transition-colors"
                     >
-                      <X className="w-4.5 h-4.5" />
+                      <X strokeWidth={1.5} className="w-3.5 h-3.5" />
                     </button>
                     <button
                       type="submit"
@@ -664,13 +664,13 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
                     >
                       {isAiLoading ? (
                         <>
-                          <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                          <Loader2 strokeWidth={1.5} className="w-3 h-3 animate-spin" />
                           <span>Thinking...</span>
                         </>
                       ) : (
                         <>
                           <span>Generate</span>
-                          <Send className="w-3.5 h-3.5" />
+                          <Send strokeWidth={1.5} className="w-3 h-3" />
                         </>
                       )}
                     </button>
@@ -689,7 +689,7 @@ export const QueryEditor = forwardRef<QueryEditorRef, QueryEditorProps>(({
           value={value}
           beforeMount={handleBeforeMount}
           onChange={handleEditorChange}
-          loading={<div className="h-full w-full bg-[#050505] flex items-center justify-center"><Loader2 className="w-6 h-6 animate-spin text-zinc-800" /></div>}
+          loading={<div className="h-full w-full bg-[#050505] flex items-center justify-center"><Loader2 strokeWidth={1.5} className="w-6 h-6 animate-spin text-zinc-800" /></div>}
           onMount={(editor, monaco) => {
             editorRef.current = editor;
 
diff --git a/src/components/QueryHistory.tsx b/src/components/QueryHistory.tsx
index b158004..9970561 100644
--- a/src/components/QueryHistory.tsx
+++ b/src/components/QueryHistory.tsx
@@ -122,7 +122,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
             <div className="p-2 rounded-lg bg-emerald-500/10 border border-emerald-500/20">
-              <HistoryIcon className="w-4 h-4 text-emerald-400" />
+              <HistoryIcon strokeWidth={1.5} className="w-3.5 h-3.5 text-emerald-400" />
             </div>
             <div>
               <h3 className="text-xs font-medium text-zinc-100 flex items-center gap-2">
@@ -138,7 +138,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button variant="ghost" size="sm" className="h-8 text-xs font-medium text-zinc-400 hover:text-white gap-2">
-                  <Download className="w-3.5 h-3.5" /> Export
+                  <Download strokeWidth={1.5} className="w-3 h-3" /> Export
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="bg-[#0d0d0d] border-white/10 text-zinc-300">
@@ -157,14 +157,14 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
               onClick={handleClearHistory} 
               className="h-8 text-xs font-medium text-red-400/70 hover:text-red-400 hover:bg-red-400/10"
             >
-              <Trash2 className="w-3.5 h-3.5 mr-2" /> Clear
+              <Trash2 strokeWidth={1.5} className="w-3 h-3 mr-2" /> Clear
             </Button>
           </div>
         </div>
         
         <div className="flex flex-wrap items-center gap-3">
           <div className="relative flex-1 min-w-[240px]">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-zinc-500" />
+            <Search strokeWidth={1.5} className="absolute left-3 top-1/2 -translate-y-1/2 w-3 h-3 text-zinc-500" />
             <Input 
               placeholder="Search by query, connection or tab..." 
               value={search}
@@ -176,7 +176,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
                 onClick={() => setSearch('')}
                 className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-white"
               >
-                <X className="w-3 h-3" />
+                <X strokeWidth={1.5} className="w-3 h-3" />
               </button>
             )}
           </div>
@@ -222,7 +222,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
       <div className="flex-1 overflow-auto custom-scrollbar">
         {filteredHistory.length === 0 ? (
           <div className="h-full flex flex-col items-center justify-center opacity-20 p-8 text-center">
-            <HistoryIcon className="w-16 h-16 mb-4 text-zinc-600" />
+            <HistoryIcon strokeWidth={1.5} className="w-16 h-16 mb-4 text-zinc-600" />
             <p className="text-xs font-medium">No history items found</p>
             <p className="text-xs text-zinc-500 mt-1r">Run some queries to see them here</p>
           </div>
@@ -265,11 +265,11 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
                       <div className="flex justify-center">
                         {item.status === 'success' ? (
                           <div className="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20">
-                            <CheckCircle2 className="w-3 h-3 text-emerald-500" />
+                            <CheckCircle2 strokeWidth={1.5} className="w-3 h-3 text-emerald-500" />
                           </div>
                         ) : (
                           <div className="w-5 h-5 rounded-full bg-red-500/10 flex items-center justify-center border border-red-500/20">
-                            <AlertCircle className="w-3 h-3 text-red-500" />
+                            <AlertCircle strokeWidth={1.5} className="w-3 h-3 text-red-500" />
                           </div>
                         )}
                       </div>
@@ -287,11 +287,11 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
                     <td className="px-4 py-4 whitespace-nowrap">
                       <div className="flex flex-col gap-1">
                         <div className="flex items-center gap-1.5 text-zinc-300">
-                          <Database className="w-3 h-3 text-blue-400" />
+                          <Database strokeWidth={1.5} className="w-3 h-3 text-blue-400" />
                           <span className="font-medium">{item.connectionName || 'Unknown'}</span>
                         </div>
                         <div className="flex items-center gap-1.5 text-zinc-500 text-xs">
-                          <Hash className="w-2.5 h-2.5" />
+                          <Hash strokeWidth={1.5} className="w-2.5 h-2.5" />
                           <span>{item.tabName || 'Default Tab'}</span>
                         </div>
                       </div>
@@ -329,7 +329,7 @@ export function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger
                         onClick={() => onSelectQuery(item.query)}
                         title="Restore Query"
                       >
-                        <RotateCcw className="w-3.5 h-3.5" />
+                        <RotateCcw className="w-3 h-3" />
                       </Button>
                     </td>
                   </tr>
diff --git a/src/components/QuerySafetyDialog.tsx b/src/components/QuerySafetyDialog.tsx
index b34fddd..b78ecab 100644
--- a/src/components/QuerySafetyDialog.tsx
+++ b/src/components/QuerySafetyDialog.tsx
@@ -145,11 +145,11 @@ export function QuerySafetyDialog({
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-3 border-b border-white/5">
           <div className="flex items-center gap-2">
-            <ShieldAlert className="w-4 h-4 text-amber-400" />
+            <ShieldAlert strokeWidth={1.5} className="w-3.5 h-3.5 text-amber-400" />
             <span className="text-xs font-medium text-zinc-200">Query Safety Check</span>
           </div>
           <button onClick={onClose} className="p-1 rounded hover:bg-white/5 text-zinc-500">
-            <X className="w-4 h-4" />
+            <X strokeWidth={1.5} className="w-3.5 h-3.5" />
           </button>
         </div>
 
@@ -164,7 +164,7 @@ export function QuerySafetyDialog({
         <div className="px-5 py-4 max-h-80 overflow-auto">
           {isAnalyzing && (
             <div className="flex items-center justify-center gap-2 py-8 text-zinc-500">
-              <Loader2 className="w-5 h-5 animate-spin" />
+              <Loader2 strokeWidth={1.5} className="w-5 h-5 animate-spin" />
               <span className="text-xs">Analyzing query safety...</span>
             </div>
           )}
@@ -254,7 +254,7 @@ export function QuerySafetyDialog({
               isAnalyzing && "opacity-50 cursor-not-allowed"
             )}
           >
-            <Play className="w-3 h-3 fill-current" />
+            <Play strokeWidth={1.5} className="w-3 h-3 fill-current" />
             {analysis?.riskLevel === 'critical' ? 'Execute Anyway' :
              analysis?.riskLevel === 'high' ? 'Proceed with Caution' :
              'Execute Query'}
diff --git a/src/components/ResultsGrid.tsx b/src/components/ResultsGrid.tsx
index 77b18ef..f2fa9bf 100644
--- a/src/components/ResultsGrid.tsx
+++ b/src/components/ResultsGrid.tsx
@@ -199,15 +199,15 @@ export function ResultsGrid({
             >
               <span className="truncate">{field}</span>
               {isSensitive && (
-                <span title="Masked column"><Lock className="w-3 h-3 text-purple-400 shrink-0" /></span>
+                <span title="Masked column"><Lock strokeWidth={1.5} className="w-3 h-3 text-purple-400 shrink-0" /></span>
               )}
               <div className="flex-shrink-0 opacity-0 group-hover/header:opacity-100 transition-opacity">
                 {column.getIsSorted() === "asc" ? (
                   <ArrowUp className="w-3 h-3" />
                 ) : column.getIsSorted() === "desc" ? (
-                  <ArrowDown className="w-3 h-3" />
+                  <ArrowDown strokeWidth={1.5} className="w-3 h-3" />
                 ) : (
-                  <ArrowUpDown className="w-3 h-3" />
+                  <ArrowUpDown strokeWidth={1.5} className="w-3 h-3" />
                 )}
               </div>
             </div>
@@ -219,7 +219,7 @@ export function ResultsGrid({
               onClick={(e) => { e.stopPropagation(); setActiveFilterCol(activeFilterCol === field ? null : field); }}
               title="Filter column"
             >
-              <Filter className="w-3 h-3" />
+              <Filter strokeWidth={1.5} className="w-3 h-3" />
             </button>
             {activeFilterCol === field && (
               <div
@@ -329,7 +329,7 @@ export function ResultsGrid({
           return (
             <div className="truncate w-full h-full flex items-center gap-1">
               <span className={className}>{display}</span>
-              <Lock className="w-2.5 h-2.5 text-purple-400/50 shrink-0" />
+              <Lock strokeWidth={1.5} className="w-2.5 h-2.5 text-purple-400/50 shrink-0" />
             </div>
           );
         }
@@ -494,7 +494,7 @@ export function ResultsGrid({
                   )}
                 >
                   {field}
-                  {isSensitive && <Lock className="w-2.5 h-2.5 text-purple-400" />}
+                  {isSensitive && <Lock strokeWidth={1.5} className="w-2.5 h-2.5 text-purple-400" />}
                 </div>
               );
             })}
diff --git a/src/components/SaveQueryModal.tsx b/src/components/SaveQueryModal.tsx
index 86ceaee..c208415 100644
--- a/src/components/SaveQueryModal.tsx
+++ b/src/components/SaveQueryModal.tsx
@@ -38,7 +38,7 @@ export function SaveQueryModal({ isOpen, onClose, onSave, defaultQuery }: SaveQu
       <DialogContent className="bg-[#0d0d0d] border-white/10 text-zinc-300 sm:max-w-[425px]">
         <DialogHeader>
           <DialogTitle className="text-white flex items-center gap-2">
-            <Bookmark className="w-5 h-5 text-blue-500" /> Save Query
+            <Bookmark strokeWidth={1.5} className="w-5 h-5 text-blue-500" /> Save Query
           </DialogTitle>
           <DialogDescription className="text-zinc-500">
             Give your query a name and description to find it easily later.
@@ -68,7 +68,7 @@ export function SaveQueryModal({ isOpen, onClose, onSave, defaultQuery }: SaveQu
           </div>
           <div className="grid gap-2">
             <Label htmlFor="tags" className="text-xs font-medium text-zinc-500 flex items-center gap-2">
-              <Tag className="w-3 h-3" /> Tags (comma separated)
+              <Tag strokeWidth={1.5} className="w-3 h-3" /> Tags (comma separated)
             </Label>
             <Input
               id="tags"
diff --git a/src/components/SavedQueries.tsx b/src/components/SavedQueries.tsx
index 0c7ca43..8bc3d51 100644
--- a/src/components/SavedQueries.tsx
+++ b/src/components/SavedQueries.tsx
@@ -45,11 +45,11 @@ export function SavedQueries({ onSelectQuery, connectionType, refreshTrigger }:
     <div className="h-full flex flex-col bg-[#0a0a0a]">
       <div className="p-4 border-b border-white/5 flex flex-col gap-4">
         <h3 className="text-xs font-medium text-zinc-400 flex items-center gap-2">
-          <Bookmark className="w-4 h-4" /> Saved Queries
+          <Bookmark strokeWidth={1.5} className="w-3.5 h-3.5" /> Saved Queries
         </h3>
         
         <div className="relative">
-          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-zinc-500" />
+          <Search strokeWidth={1.5} className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3 h-3 text-zinc-500" />
           <Input 
             placeholder="Search saved queries..." 
             value={search}
@@ -62,7 +62,7 @@ export function SavedQueries({ onSelectQuery, connectionType, refreshTrigger }:
       <div className="flex-1 overflow-y-auto custom-scrollbar">
         {filteredQueries.length === 0 ? (
           <div className="h-full flex flex-col items-center justify-center opacity-20 p-8 text-center">
-            <Bookmark className="w-12 h-12 mb-4" />
+            <Bookmark strokeWidth={1.5} className="w-12 h-12 mb-4" />
             <p className="text-xs italic">No saved queries found</p>
           </div>
         ) : (
@@ -84,7 +84,7 @@ export function SavedQueries({ onSelectQuery, connectionType, refreshTrigger }:
                   </div>
                   <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                     <Button variant="ghost" size="icon" className="h-6 w-6 text-zinc-500 hover:text-white">
-                      <Edit3 className="w-3 h-3" />
+                      <Edit3 strokeWidth={1.5} className="w-3 h-3" />
                     </Button>
                     <Button 
                       variant="ghost" 
@@ -92,7 +92,7 @@ export function SavedQueries({ onSelectQuery, connectionType, refreshTrigger }:
                       className="h-6 w-6 text-zinc-500 hover:text-red-400"
                       onClick={(e) => handleDelete(q.id, e)}
                     >
-                      <Trash2 className="w-3 h-3" />
+                      <Trash2 strokeWidth={1.5} className="w-3 h-3" />
                     </Button>
                   </div>
                 </div>
@@ -110,7 +110,7 @@ export function SavedQueries({ onSelectQuery, connectionType, refreshTrigger }:
                     </span>
                     {q.tags?.map(tag => (
                       <span key={tag} className="flex items-center gap-1 text-[0.625rem] text-zinc-500">
-                        <Tag className="w-2.5 h-2.5" /> {tag}
+                        <Tag strokeWidth={1.5} className="w-2.5 h-2.5" /> {tag}
                       </span>
                     ))}
                   </div>
diff --git a/src/components/SchemaDiagram.tsx b/src/components/SchemaDiagram.tsx
index 549ddce..01c1f08 100644
--- a/src/components/SchemaDiagram.tsx
+++ b/src/components/SchemaDiagram.tsx
@@ -46,7 +46,7 @@ const TableNode = ({ data }: NodeProps<Node<TableNodeData>>) => {
       isHighlighted ? 'border-blue-500/60 ring-1 ring-blue-500/30' : 'border-white/10'
     }`}>
       <div className="bg-blue-600/10 px-3 py-2 border-b border-white/5 flex items-center gap-2">
-        <Database className="w-3.5 h-3.5 text-blue-400" />
+        <Database strokeWidth={1.5} className="w-3.5 h-3.5 text-blue-400" />
         <span className="text-xs font-medium text-zinc-100r">{table.name}</span>
         <span className="text-[0.625rem] text-zinc-600 ml-auto">{table.columns?.length || 0} cols</span>
       </div>
@@ -71,13 +71,13 @@ const TableNode = ({ data }: NodeProps<Node<TableNodeData>>) => {
 
                 <div className="flex items-center gap-2">
                   {col.isPrimary ? (
-                    <Key className="w-2.5 h-2.5 text-yellow-500" />
+                    <Key strokeWidth={1.5} className="w-2.5 h-2.5 text-yellow-500" />
                   ) : isFk ? (
-                    <Link2 className="w-2.5 h-2.5 text-blue-400" />
+                    <Link2 strokeWidth={1.5} className="w-2.5 h-2.5 text-blue-400" />
                   ) : col.type.toLowerCase().includes('int') ? (
-                    <Hash className="w-2.5 h-2.5 text-zinc-500" />
+                    <Hash strokeWidth={1.5} className="w-2.5 h-2.5 text-zinc-500" />
                   ) : (
-                    <Type className="w-2.5 h-2.5 text-zinc-500" />
+                    <Type strokeWidth={1.5} className="w-2.5 h-2.5 text-zinc-500" />
                   )}
                   <span className={
                     col.isPrimary ? "text-yellow-500/90 font-medium" :
@@ -348,7 +348,7 @@ function SchemaDiagramInner({ schema, onClose }: SchemaDiagramProps) {
   if (schema.length === 0) {
     return (
       <div className="absolute inset-0 z-50 bg-[#050505] flex flex-col items-center justify-center">
-        <Loader2 className="w-8 h-8 text-blue-500 animate-spin mb-4" />
+        <Loader2 strokeWidth={1.5} className="w-8 h-8 text-blue-500 animate-spin mb-4" />
         <p className="text-zinc-500 text-xs">Generating ERD Diagram...</p>
       </div>
     );
@@ -389,7 +389,7 @@ function SchemaDiagramInner({ schema, onClose }: SchemaDiagramProps) {
               className="bg-[#0d0d0d] border-white/10 hover:bg-white/5 text-xs gap-1"
               onClick={() => exportDiagram('png')}
             >
-              <Download className="w-3 h-3" /> PNG
+              <Download strokeWidth={1.5} className="w-3 h-3" /> PNG
             </Button>
             <Button
               variant="outline"
@@ -397,7 +397,7 @@ function SchemaDiagramInner({ schema, onClose }: SchemaDiagramProps) {
               className="bg-[#0d0d0d] border-white/10 hover:bg-white/5 text-xs gap-1"
               onClick={() => exportDiagram('svg')}
             >
-              <Download className="w-3 h-3" /> SVG
+              <Download strokeWidth={1.5} className="w-3 h-3" /> SVG
             </Button>
             <Button
               variant="outline"
@@ -413,7 +413,7 @@ function SchemaDiagramInner({ schema, onClose }: SchemaDiagramProps) {
               className="rounded-full bg-[#0d0d0d] border-white/10 hover:bg-white/5"
               onClick={onClose}
             >
-              <X className="w-4 h-4" />
+              <X strokeWidth={1.5} className="w-3.5 h-3.5" />
             </Button>
           </div>
         </Panel>
@@ -432,7 +432,7 @@ function SchemaDiagramInner({ schema, onClose }: SchemaDiagramProps) {
 
             {/* Search */}
             <div className="relative">
-              <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-zinc-600" />
+              <Search strokeWidth={1.5} className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-zinc-600" />
               <input
                 type="text"
                 placeholder="Filter tables..."
@@ -445,7 +445,7 @@ function SchemaDiagramInner({ schema, onClose }: SchemaDiagramProps) {
             {/* No FK warning */}
             {!hasForeignKeys && (
               <div className="flex items-start gap-1.5 text-[0.625rem] text-amber-500/80">
-                <Info className="w-3 h-3 mt-0.5 shrink-0" />
+                <Info strokeWidth={1.5} className="w-3 h-3 mt-0.5 shrink-0" />
                 <span>No FK data available. Showing heuristic relationships (dashed).</span>
               </div>
             )}
diff --git a/src/components/SchemaDiff.tsx b/src/components/SchemaDiff.tsx
index 179eb41..0e212ba 100644
--- a/src/components/SchemaDiff.tsx
+++ b/src/components/SchemaDiff.tsx
@@ -143,9 +143,9 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
 
   const getActionBadge = (action: string) => {
     switch (action) {
-      case 'added': return <Badge className="bg-green-500/20 text-green-400 border-green-500/30 text-xs"><Plus className="w-2.5 h-2.5 mr-0.5" />Added</Badge>;
+      case 'added': return <Badge className="bg-green-500/20 text-green-400 border-green-500/30 text-xs"><Plus strokeWidth={1.5} className="w-2.5 h-2.5 mr-0.5" />Added</Badge>;
       case 'removed': return <Badge className="bg-red-500/20 text-red-400 border-red-500/30 text-xs"><Minus className="w-2.5 h-2.5 mr-0.5" />Removed</Badge>;
-      case 'modified': return <Badge className="bg-yellow-500/20 text-yellow-400 border-yellow-500/30 text-xs"><Edit3 className="w-2.5 h-2.5 mr-0.5" />Modified</Badge>;
+      case 'modified': return <Badge className="bg-yellow-500/20 text-yellow-400 border-yellow-500/30 text-xs"><Edit3 strokeWidth={1.5} className="w-2.5 h-2.5 mr-0.5" />Modified</Badge>;
       default: return null;
     }
   };
@@ -159,7 +159,7 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
     <div className="h-full flex flex-col bg-[#080808]">
       {/* Header */}
       <div className="flex items-center gap-2 px-3 py-2 border-b border-white/5 bg-[#0a0a0a] flex-wrap">
-        <GitCompare className="w-4 h-4 text-rose-400" />
+        <GitCompare strokeWidth={1.5} className="w-3.5 h-3.5 text-rose-400" />
         <span className="text-xs font-medium text-zinc-400r">Schema Diff</span>
 
         <div className="h-4 w-px bg-white/10" />
@@ -174,13 +174,13 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
             <SelectContent className="bg-[#111] border-white/10">
               <SelectItem value="current" className="text-xs">
                 <div className="flex items-center gap-1">
-                  <Database className="w-3 h-3" /> Current Schema
+                  <Database strokeWidth={1.5} className="w-3 h-3" /> Current Schema
                 </div>
               </SelectItem>
               {snapshots.map(s => (
                 <SelectItem key={s.id} value={s.id} className="text-xs">
                   <div className="flex items-center gap-1">
-                    <Clock className="w-3 h-3" /> {formatSnapshotLabel(s)}
+                    <Clock strokeWidth={1.5} className="w-3 h-3" /> {formatSnapshotLabel(s)}
                   </div>
                 </SelectItem>
               ))}
@@ -206,13 +206,13 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
             <SelectContent className="bg-[#111] border-white/10">
               <SelectItem value="current" className="text-xs">
                 <div className="flex items-center gap-1">
-                  <Database className="w-3 h-3" /> Current Schema
+                  <Database strokeWidth={1.5} className="w-3 h-3" /> Current Schema
                 </div>
               </SelectItem>
               {snapshots.map(s => (
                 <SelectItem key={s.id} value={s.id} className="text-xs">
                   <div className="flex items-center gap-1">
-                    <Clock className="w-3 h-3" /> {formatSnapshotLabel(s)}
+                    <Clock strokeWidth={1.5} className="w-3 h-3" /> {formatSnapshotLabel(s)}
                   </div>
                 </SelectItem>
               ))}
@@ -224,9 +224,9 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
                   {allConnections.filter(c => c.id !== connection?.id).map(c => (
                     <SelectItem key={`conn:${c.id}`} value={`conn:${c.id}`} className="text-xs">
                       <div className="flex items-center gap-1">
-                        <Database className="w-3 h-3 text-blue-400" /> {c.name}
+                        <Database strokeWidth={1.5} className="w-3 h-3 text-blue-400" /> {c.name}
                         {c.environment === 'production' && (
-                          <AlertTriangle className="w-3 h-3 text-red-400" />
+                          <AlertTriangle strokeWidth={1.5} className="w-3 h-3 text-red-400" />
                         )}
                       </div>
                     </SelectItem>
@@ -287,7 +287,7 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
       <div className="flex-1 overflow-hidden flex">
         {!targetId ? (
           <div className="flex-1 flex flex-col items-center justify-center text-zinc-600 gap-3">
-            <GitCompare className="w-10 h-10 opacity-30" />
+            <GitCompare strokeWidth={1.5} className="w-10 h-10 opacity-30" />
             <p className="text-xs">Select source and target to compare schemas</p>
             <p className="text-xs text-zinc-700">Take a snapshot first, then compare with the current schema</p>
 
@@ -330,9 +330,9 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
                   )}
                 >
                   {selectedTable === table.tableName ? (
-                    <ChevronDown className="w-3 h-3 text-zinc-500" />
+                    <ChevronDown strokeWidth={1.5} className="w-3 h-3 text-zinc-500" />
                   ) : (
-                    <ChevronRight className="w-3 h-3 text-zinc-500" />
+                    <ChevronRight strokeWidth={1.5} className="w-3 h-3 text-zinc-500" />
                   )}
                   <span className="text-zinc-300">{table.tableName}</span>
                   <span className="ml-auto">{getActionBadge(table.action)}</span>
@@ -357,7 +357,7 @@ export function SchemaDiff({ schema, connection }: SchemaDiffProps) {
           </div>
         ) : (
           <div className="flex-1 flex items-center justify-center text-zinc-600 gap-2">
-            <AlertTriangle className="w-4 h-4" />
+            <AlertTriangle strokeWidth={1.5} className="w-3.5 h-3.5" />
             <span className="text-xs">Cannot compare same schema with itself</span>
           </div>
         )}
@@ -370,7 +370,7 @@ function TableDiffDetail({ diff }: { diff: TableDiff }) {
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-2">
-        <Database className="w-4 h-4 text-zinc-400" />
+        <Database strokeWidth={1.5} className="w-3.5 h-3.5 text-zinc-400" />
         <h3 className="text-xs font-medium text-zinc-200">{diff.tableName}</h3>
         <Badge className={cn(
           "text-xs",
@@ -465,9 +465,9 @@ function TableDiffDetail({ diff }: { diff: TableDiff }) {
 
 function getActionIcon(action: string) {
   switch (action) {
-    case 'added': return <Plus className="w-3 h-3 text-green-400" />;
+    case 'added': return <Plus strokeWidth={1.5} className="w-3 h-3 text-green-400" />;
     case 'removed': return <Minus className="w-3 h-3 text-red-400" />;
-    case 'modified': return <Edit3 className="w-3 h-3 text-yellow-400" />;
+    case 'modified': return <Edit3 strokeWidth={1.5} className="w-3 h-3 text-yellow-400" />;
     default: return null;
   }
 }
diff --git a/src/components/SnapshotTimeline.tsx b/src/components/SnapshotTimeline.tsx
index 5fe0cd9..0e3987f 100644
--- a/src/components/SnapshotTimeline.tsx
+++ b/src/components/SnapshotTimeline.tsx
@@ -73,7 +73,7 @@ export function SnapshotTimeline({ snapshots, onCompare, onDelete }: SnapshotTim
             >
               {/* Dot */}
               <div className={cn(
-                "w-4 h-4 rounded-full border-2 z-10 transition-all",
+                "w-3.5 h-3.5 rounded-full border-2 z-10 transition-all",
                 isSelected
                   ? "bg-blue-500 border-blue-400 scale-125"
                   : "bg-[#0d0d0d] border-white/20 hover:border-white/40"
@@ -105,7 +105,7 @@ export function SnapshotTimeline({ snapshots, onCompare, onDelete }: SnapshotTim
                 onClick={(e) => { e.stopPropagation(); onDelete(snapshot.id); }}
                 className="absolute -top-2 -right-1 p-0.5 text-zinc-600 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
               >
-                <Trash2 className="w-2.5 h-2.5" />
+                <Trash2 strokeWidth={1.5} className="w-2.5 h-2.5" />
               </button>
             </div>
           );
diff --git a/src/components/Studio.tsx b/src/components/Studio.tsx
index 4ace2e0..fbc192f 100644
--- a/src/components/Studio.tsx
+++ b/src/components/Studio.tsx
@@ -360,7 +360,7 @@ export default function Studio() {
                       className="h-8 text-xs border-white/10 hover:bg-white/5"
                       onClick={() => setIsConnectionModalOpen(true)}
                     >
-                      <Plus className="w-3 h-3 mr-1" /> Add
+                      <Plus strokeWidth={1.5} className="w-3 h-3 mr-1" /> Add
                     </Button>
                   </div>
                   <ConnectionsList
@@ -402,7 +402,7 @@ export default function Studio() {
                     />
                   ) : (
                     <div className="flex flex-col items-center justify-center h-full text-zinc-500">
-                      <Database className="w-12 h-12 mb-4 opacity-30" />
+                      <Database strokeWidth={1.5} className="w-12 h-12 mb-4 opacity-30" />
                       <p className="text-xs">Select a connection first</p>
                     </div>
                   )}
@@ -578,7 +578,7 @@ export default function Studio() {
           <div className="px-6 pt-6 pb-4">
             <div className="flex items-start gap-3">
               <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500/20 to-red-500/10 flex items-center justify-center shrink-0">
-                <AlertTriangle className="w-5 h-5 text-amber-400" />
+                <AlertTriangle strokeWidth={1.5} className="w-5 h-5 text-amber-400" />
               </div>
               <div className="flex-1 min-w-0">
                 <AlertDialogTitle className="text-[0.8125rem] font-medium text-zinc-100 mb-1">
diff --git a/src/components/TestDataGenerator.tsx b/src/components/TestDataGenerator.tsx
index 02de1e3..1bed25c 100644
--- a/src/components/TestDataGenerator.tsx
+++ b/src/components/TestDataGenerator.tsx
@@ -165,12 +165,12 @@ export function TestDataGenerator({
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-3 border-b border-white/5">
           <div className="flex items-center gap-2">
-            <Wand2 className="w-4 h-4 text-amber-400" />
+            <Wand2 strokeWidth={1.5} className="w-3.5 h-3.5 text-amber-400" />
             <span className="text-xs font-medium text-zinc-200">Test Data Generator</span>
             <span className="text-xs text-zinc-500 font-mono">{tableName}</span>
           </div>
           <button onClick={onClose} className="p-1 rounded hover:bg-white/5 text-zinc-500">
-            <X className="w-4 h-4" />
+            <X strokeWidth={1.5} className="w-3.5 h-3.5" />
           </button>
         </div>
 
@@ -200,7 +200,7 @@ export function TestDataGenerator({
             className="flex items-center gap-1 px-2 py-1 rounded text-xs font-medium text-zinc-500 hover:text-zinc-300 hover:bg-white/5 transition-colors"
             title="Regenerate random data"
           >
-            <RefreshCw className="w-3 h-3" /> Regenerate
+            <RefreshCw strokeWidth={1.5} className="w-3 h-3" /> Regenerate
           </button>
         </div>
 
@@ -241,7 +241,7 @@ export function TestDataGenerator({
               onClick={handleCopy}
               className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/5 text-zinc-400 text-xs font-medium hover:bg-white/10 transition-colors"
             >
-              {copied ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
+              {copied ? <Check strokeWidth={1.5} className="w-3 h-3 text-emerald-400" /> : <Copy strokeWidth={1.5} className="w-3 h-3" />}
               {copied ? 'Copied!' : 'Copy'}
             </button>
             <button
@@ -251,7 +251,7 @@ export function TestDataGenerator({
               }}
               className="flex items-center gap-1.5 px-4 py-1.5 rounded-lg bg-amber-600 hover:bg-amber-500 text-white text-xs font-medium transition-colors"
             >
-              <Play className="w-3 h-3 fill-current" /> Execute
+              <Play strokeWidth={1.5} className="w-3 h-3 fill-current" /> Execute
             </button>
           </div>
         </div>
diff --git a/src/components/VisualExplain.tsx b/src/components/VisualExplain.tsx
index 009e60f..3caeea4 100644
--- a/src/components/VisualExplain.tsx
+++ b/src/components/VisualExplain.tsx
@@ -220,15 +220,15 @@ function analyzePlan(plan: ExplainPlanResult[]): PlanAnalysis {
 // ============================================================================
 
 const NodeIcon = ({ type }: { type: string }) => {
-  if (type.includes('Seq Scan')) return <Search className="w-4 h-4 text-amber-400" />;
-  if (type.includes('Index Scan') || type.includes('Index Only')) return <Target className="w-4 h-4 text-emerald-400" />;
-  if (type.includes('Scan')) return <Search className="w-4 h-4 text-blue-400" />;
-  if (type.includes('Join')) return <Layers className="w-4 h-4 text-purple-400" />;
-  if (type.includes('Sort')) return <ArrowDown className="w-4 h-4 text-amber-400" />;
-  if (type.includes('Limit')) return <LayoutGrid className="w-4 h-4 text-zinc-400" />;
-  if (type.includes('Aggregate') || type.includes('Group')) return <Zap className="w-4 h-4 text-pink-400" />;
-  if (type.includes('Hash')) return <HardDrive className="w-4 h-4 text-cyan-400" />;
-  return <Database className="w-4 h-4 text-zinc-500" />;
+  if (type.includes('Seq Scan')) return <Search strokeWidth={1.5} className="w-3.5 h-3.5 text-amber-400" />;
+  if (type.includes('Index Scan') || type.includes('Index Only')) return <Target strokeWidth={1.5} className="w-3.5 h-3.5 text-emerald-400" />;
+  if (type.includes('Scan')) return <Search strokeWidth={1.5} className="w-3.5 h-3.5 text-blue-400" />;
+  if (type.includes('Join')) return <Layers strokeWidth={1.5} className="w-3.5 h-3.5 text-purple-400" />;
+  if (type.includes('Sort')) return <ArrowDown strokeWidth={1.5} className="w-3.5 h-3.5 text-amber-400" />;
+  if (type.includes('Limit')) return <LayoutGrid strokeWidth={1.5} className="w-3.5 h-3.5 text-zinc-400" />;
+  if (type.includes('Aggregate') || type.includes('Group')) return <Zap strokeWidth={1.5} className="w-3.5 h-3.5 text-pink-400" />;
+  if (type.includes('Hash')) return <HardDrive strokeWidth={1.5} className="w-3.5 h-3.5 text-cyan-400" />;
+  return <Database strokeWidth={1.5} className="w-3.5 h-3.5 text-zinc-500" />;
 };
 
 const StatusBadge = ({ status }: { status: 'good' | 'warning' | 'critical' }) => {
@@ -445,7 +445,7 @@ function AIExplainTab({
                   onClick={() => onLoadQuery(content)}
                   className="absolute top-2 right-2 opacity-0 group-hover/code:opacity-100 transition-opacity px-2 py-1 rounded bg-blue-600 hover:bg-blue-500 text-white text-xs font-medium flex items-center gap-1"
                 >
-                  <Play className="w-3 h-3" /> Try This
+                  <Play strokeWidth={1.5} className="w-3 h-3" /> Try This
                 </button>
               )}
             </div>
@@ -527,7 +527,7 @@ function AIExplainTab({
     return (
       <div className="h-full flex flex-col items-center justify-center p-8 text-center">
         <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500/20 to-blue-500/10 flex items-center justify-center mb-4">
-          <Sparkles className="w-7 h-7 text-purple-400" />
+          <Sparkles strokeWidth={1.5} className="w-7 h-7 text-purple-400" />
         </div>
         <h3 className="text-xs font-medium text-zinc-200 mb-1">AI Query Analysis</h3>
         <p className="text-xs text-zinc-500 max-w-[280px] leading-relaxed mb-4">
@@ -543,7 +543,7 @@ function AIExplainTab({
               : "bg-white/5 text-zinc-600 cursor-not-allowed"
           )}
         >
-          <Sparkles className="w-3.5 h-3.5" />
+          <Sparkles strokeWidth={1.5} className="w-3 h-3" />
           Analyze with AI
         </button>
         {!query && (
@@ -558,7 +558,7 @@ function AIExplainTab({
       {/* Re-analyze button */}
       <div className="flex items-center justify-between px-4 py-2 border-b border-white/5 bg-[#0a0a0a]">
         <div className="flex items-center gap-2">
-          <Sparkles className="w-3.5 h-3.5 text-purple-400" />
+          <Sparkles strokeWidth={1.5} className="w-3 h-3 text-purple-400" />
           <span className="text-xs font-medium text-purple-400r">AI Analysis</span>
         </div>
         <button
@@ -566,7 +566,7 @@ function AIExplainTab({
           disabled={isLoading}
           className="flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium text-zinc-400 hover:text-white hover:bg-white/5 transition-all"
         >
-          {isLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Sparkles className="w-3 h-3" />}
+          {isLoading ? <Loader2 strokeWidth={1.5} className="w-3 h-3 animate-spin" /> : <Sparkles strokeWidth={1.5} className="w-3 h-3" />}
           {isLoading ? 'Analyzing...' : 'Re-analyze'}
         </button>
       </div>
@@ -575,7 +575,7 @@ function AIExplainTab({
       <div className="flex-1 overflow-auto p-4">
         {error && (
           <div className="flex items-center gap-2 p-3 rounded-lg bg-red-500/5 border border-red-500/10 text-red-400 text-xs mb-4">
-            <AlertTriangle className="w-4 h-4 shrink-0" />
+            <AlertTriangle strokeWidth={1.5} className="w-3.5 h-3.5 shrink-0" />
             {error}
           </div>
         )}
@@ -588,14 +588,14 @@ function AIExplainTab({
 
         {isLoading && !aiResponse && (
           <div className="flex items-center gap-3 text-zinc-500 text-xs">
-            <Loader2 className="w-4 h-4 animate-spin text-purple-400" />
+            <Loader2 strokeWidth={1.5} className="w-3.5 h-3.5 animate-spin text-purple-400" />
             <span>Analyzing execution plan...</span>
           </div>
         )}
 
         {isLoading && aiResponse && (
           <div className="flex items-center gap-2 mt-2 text-zinc-600 text-xs">
-            <Loader2 className="w-3 h-3 animate-spin" />
+            <Loader2 strokeWidth={1.5} className="w-3 h-3 animate-spin" />
             <span>Still generating...</span>
           </div>
         )}
@@ -621,7 +621,7 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
     return (
       <div className="h-full flex flex-col items-center justify-center text-zinc-500 bg-[#080808] p-12 text-center">
         <div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center mb-4">
-          <Activity className="w-6 h-6 text-zinc-600" />
+          <Activity strokeWidth={1.5} className="w-6 h-6 text-zinc-600" />
         </div>
         <h3 className="text-xs font-medium text-zinc-300 mb-1">No execution plan</h3>
         <p className="text-xs text-zinc-600 max-w-[240px]">
@@ -641,21 +641,21 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
           {/* Quick stats */}
           <div className="flex items-center gap-6">
             <div className="flex items-center gap-2">
-              <Clock className="w-3.5 h-3.5 text-blue-400" />
+              <Clock strokeWidth={1.5} className="w-3 h-3 text-blue-400" />
               <span className="text-xs font-medium text-zinc-200">
                 {formatTime(analysis?.executionTime || 0)}
               </span>
               <span className="text-xs text-zinc-600">execution</span>
             </div>
             <div className="flex items-center gap-2">
-              <TrendingUp className="w-3.5 h-3.5 text-zinc-500" />
+              <TrendingUp className="w-3 h-3 text-zinc-500" />
               <span className="text-xs font-medium text-zinc-400">
                 {formatNumber(analysis?.totalRows || 0)}
               </span>
               <span className="text-xs text-zinc-600">rows</span>
             </div>
             <div className="flex items-center gap-2">
-              <HardDrive className="w-3.5 h-3.5 text-zinc-500" />
+              <HardDrive strokeWidth={1.5} className="w-3 h-3 text-zinc-500" />
               <span className="text-xs font-medium text-zinc-400">
                 {formatNumber(analysis?.totalCost || 0)}
               </span>
@@ -676,10 +676,10 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
                     : "text-zinc-500 hover:text-zinc-300"
                 )}
               >
-                {tab === 'insights' && <Zap className="w-3 h-3 inline mr-1" />}
-                {tab === 'ai' && <Sparkles className="w-3 h-3 inline mr-1" />}
-                {tab === 'tree' && <Layers className="w-3 h-3 inline mr-1" />}
-                {tab === 'raw' && <FileJson className="w-3 h-3 inline mr-1" />}
+                {tab === 'insights' && <Zap strokeWidth={1.5} className="w-3 h-3 inline mr-1" />}
+                {tab === 'ai' && <Sparkles strokeWidth={1.5} className="w-3 h-3 inline mr-1" />}
+                {tab === 'tree' && <Layers strokeWidth={1.5} className="w-3 h-3 inline mr-1" />}
+                {tab === 'raw' && <FileJson strokeWidth={1.5} className="w-3 h-3 inline mr-1" />}
                 {tab === 'ai' ? 'AI Explain' : tab}
               </button>
             ))}
@@ -728,11 +728,11 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
                         : "bg-blue-500/10"
                     )}>
                       {warning.type === 'critical' ? (
-                        <AlertTriangle className="w-3.5 h-3.5 text-red-400" />
+                        <AlertTriangle strokeWidth={1.5} className="w-3 h-3 text-red-400" />
                       ) : warning.type === 'warning' ? (
-                        <AlertTriangle className="w-3.5 h-3.5 text-amber-400" />
+                        <AlertTriangle strokeWidth={1.5} className="w-3 h-3 text-amber-400" />
                       ) : (
-                        <Info className="w-3.5 h-3.5 text-blue-400" />
+                        <Info strokeWidth={1.5} className="w-3 h-3 text-blue-400" />
                       )}
                     </div>
                     <div className="flex-1 min-w-0">
@@ -759,7 +759,7 @@ export function VisualExplain({ plan, query, schemaContext, databaseType, onLoad
             {analysis && analysis.warnings.length === 0 && (
               <div className="flex items-center gap-3 p-3 rounded-lg bg-emerald-500/5 border border-emerald-500/10">
                 <div className="p-1 rounded bg-emerald-500/10">
-                  <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
+                  <CheckCircle2 strokeWidth={1.5} className="w-3 h-3 text-emerald-400" />
                 </div>
                 <div>
                   <h4 className="text-xs font-medium text-emerald-300">Query looks good</h4>
diff --git a/src/components/monitoring/MonitoringDashboard.tsx b/src/components/monitoring/MonitoringDashboard.tsx
index 56b1a67..f6e0201 100644
--- a/src/components/monitoring/MonitoringDashboard.tsx
+++ b/src/components/monitoring/MonitoringDashboard.tsx
@@ -112,7 +112,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
               </Button>
             )}
             <div className="flex items-center gap-2">
-              <Activity className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
+              <Activity strokeWidth={1.5} className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
               <h1 className="text-xs sm:text-lg font-medium hidden xs:block">
                 <span className="hidden sm:inline">Database </span>Monitoring
               </h1>
@@ -160,7 +160,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
               {autoRefresh ? (
                 <Pause className="h-4 w-4" />
               ) : (
-                <Play className="h-4 w-4" />
+                <Play strokeWidth={1.5} className="h-4 w-4" />
               )}
             </Button>
 
@@ -187,7 +187,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
               <SelectValue placeholder="Select connection">
                 {selectedConnection ? (
                   <div className="flex items-center gap-2">
-                    <Database className="h-4 w-4 flex-shrink-0" />
+                    <Database strokeWidth={1.5} className="h-4 w-4 flex-shrink-0" />
                     <span className="truncate">{selectedConnection.name}</span>
                     <span className="text-xs text-muted-foreground hidden sm:inline">
                       ({selectedConnection.type})
@@ -202,7 +202,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
               {connections.map((conn) => (
                 <SelectItem key={conn.id} value={conn.id}>
                   <div className="flex items-center gap-2">
-                    <Database className="h-4 w-4" />
+                    <Database strokeWidth={1.5} className="h-4 w-4" />
                     <span>{conn.name}</span>
                     <span className="text-xs text-muted-foreground">({conn.type})</span>
                   </div>
@@ -221,7 +221,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
       {/* Main Content */}
       {!selectedConnection ? (
         <div className="flex flex-col items-center justify-center flex-1 gap-4 text-muted-foreground">
-          <Database className="h-12 w-12" />
+          <Database strokeWidth={1.5} className="h-12 w-12" />
           <h2 className="text-lg font-medium">No Connection Selected</h2>
           <p className="text-xs">Select a database connection to view monitoring data.</p>
           <Button variant="outline" onClick={() => router.push('/')}>
@@ -230,7 +230,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
         </div>
       ) : error && !data ? (
         <div className="flex flex-col items-center justify-center flex-1 gap-4 text-destructive">
-          <Activity className="h-12 w-12" />
+          <Activity strokeWidth={1.5} className="h-12 w-12" />
           <h2 className="text-lg font-medium">Connection Error</h2>
           <p className="text-xs">{error}</p>
           <Button variant="outline" onClick={refresh}>
@@ -252,7 +252,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
                   className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-xs"
                   title="Overview"
                 >
-                  <LayoutDashboard className="h-4 w-4 sm:h-4 sm:w-4" />
+                  <LayoutDashboard strokeWidth={1.5} className="h-4 w-4 sm:h-4 sm:w-4" />
                   <span className="hidden sm:inline">Overview</span>
                 </TabsTrigger>
                 <TabsTrigger
@@ -260,7 +260,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
                   className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-xs"
                   title="Performance"
                 >
-                  <Activity className="h-4 w-4 sm:h-4 sm:w-4" />
+                  <Activity strokeWidth={1.5} className="h-4 w-4 sm:h-4 sm:w-4" />
                   <span className="hidden sm:inline">Performance</span>
                 </TabsTrigger>
                 <TabsTrigger
@@ -268,7 +268,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
                   className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-xs"
                   title="Queries"
                 >
-                  <Clock className="h-4 w-4 sm:h-4 sm:w-4" />
+                  <Clock strokeWidth={1.5} className="h-4 w-4 sm:h-4 sm:w-4" />
                   <span className="hidden sm:inline">Queries</span>
                 </TabsTrigger>
                 <TabsTrigger
@@ -276,7 +276,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
                   className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-xs"
                   title="Sessions"
                 >
-                  <Users className="h-4 w-4 sm:h-4 sm:w-4" />
+                  <Users strokeWidth={1.5} className="h-4 w-4 sm:h-4 sm:w-4" />
                   <span className="hidden sm:inline">Sessions</span>
                 </TabsTrigger>
                 <TabsTrigger
@@ -284,7 +284,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
                   className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-xs"
                   title="Tables"
                 >
-                  <Table2 className="h-4 w-4 sm:h-4 sm:w-4" />
+                  <Table2 strokeWidth={1.5} className="h-4 w-4 sm:h-4 sm:w-4" />
                   <span className="hidden sm:inline">Tables</span>
                 </TabsTrigger>
                 <TabsTrigger
@@ -292,7 +292,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
                   className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-xs"
                   title="Storage"
                 >
-                  <HardDrive className="h-4 w-4 sm:h-4 sm:w-4" />
+                  <HardDrive strokeWidth={1.5} className="h-4 w-4 sm:h-4 sm:w-4" />
                   <span className="hidden sm:inline">Storage</span>
                 </TabsTrigger>
                 <TabsTrigger
@@ -300,7 +300,7 @@ export function MonitoringDashboard({ isEmbedded = false }: MonitoringDashboardP
                   className="flex-1 sm:flex-initial gap-2 px-2 sm:px-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent text-xs sm:text-xs"
                   title="Pool"
                 >
-                  <Database className="h-4 w-4 sm:h-4 sm:w-4" />
+                  <Database strokeWidth={1.5} className="h-4 w-4 sm:h-4 sm:w-4" />
                   <span className="hidden sm:inline">Pool</span>
                 </TabsTrigger>
               </TabsList>
diff --git a/src/components/monitoring/tabs/OverviewTab.tsx b/src/components/monitoring/tabs/OverviewTab.tsx
index 3c2fb4c..56c8902 100644
--- a/src/components/monitoring/tabs/OverviewTab.tsx
+++ b/src/components/monitoring/tabs/OverviewTab.tsx
@@ -52,11 +52,11 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
       {/* Version & Status */}
       <div className="flex items-center gap-2 sm:gap-4 flex-wrap">
         <Badge variant="outline" className="gap-1.5 sm:gap-2 py-1 sm:py-1.5 px-2 sm:px-3 text-xs">
-          <Server className="h-3 w-3 sm:h-4 sm:w-4" />
+          <Server strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4" />
           <span className="truncate max-w-[120px] sm:max-w-none">{overview?.version || 'Unknown'}</span>
         </Badge>
         <Badge variant="secondary" className="gap-1.5 sm:gap-2 py-1 sm:py-1.5 px-2 sm:px-3 text-xs">
-          <Clock className="h-3 w-3 sm:h-4 sm:w-4" />
+          <Clock strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4" />
           {overview?.uptime || 'N/A'}
         </Badge>
         {data?.timestamp && (
@@ -74,7 +74,7 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
             <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Connections
             </CardTitle>
-            <Zap className="h-3 w-3 sm:h-4 sm:w-4 text-yellow-500" />
+            <Zap strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-yellow-500" />
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-medium">
@@ -96,7 +96,7 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
             <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               DB Size
             </CardTitle>
-            <Database className="h-3 w-3 sm:h-4 sm:w-4 text-blue-500" />
+            <Database strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-blue-500" />
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-medium">{overview?.databaseSize || 'N/A'}</div>
@@ -112,7 +112,7 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
             <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Cache Hit
             </CardTitle>
-            <Activity className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
+            <Activity strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-medium">
@@ -138,7 +138,7 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
             <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Tables
             </CardTitle>
-            <Table2 className="h-3 w-3 sm:h-4 sm:w-4 text-purple-500" />
+            <Table2 strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-purple-500" />
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-medium">
@@ -156,7 +156,7 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
         <Card className="p-0">
           <CardHeader className="p-3 sm:p-4 pb-1">
             <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
-              <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
+              <Activity strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4" />
               Connection Trend
             </CardTitle>
           </CardHeader>
@@ -172,7 +172,7 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
         <Card className="p-0">
           <CardHeader className="p-3 sm:p-4 pb-2">
             <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
-              <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
+              <Activity strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4" />
               Performance
             </CardTitle>
           </CardHeader>
@@ -208,7 +208,7 @@ export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
         <Card className="p-0">
           <CardHeader className="p-3 sm:p-4 pb-2">
             <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
-              <Hash className="h-3 w-3 sm:h-4 sm:w-4" />
+              <Hash strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4" />
               Quick Stats
             </CardTitle>
           </CardHeader>
diff --git a/src/components/monitoring/tabs/PerformanceTab.tsx b/src/components/monitoring/tabs/PerformanceTab.tsx
index d67a2ea..455c3cd 100644
--- a/src/components/monitoring/tabs/PerformanceTab.tsx
+++ b/src/components/monitoring/tabs/PerformanceTab.tsx
@@ -171,7 +171,7 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
         <Card className="p-0">
           <CardHeader className="p-3 sm:p-4 pb-2">
             <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
-              <Zap className="h-3 w-3 sm:h-4 sm:w-4" />
+              <Zap strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4" />
               Checkpoint Stats
             </CardTitle>
           </CardHeader>
@@ -192,14 +192,14 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
         <Card className="p-0">
           <CardHeader className="p-3 sm:p-4 pb-2">
             <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
-              <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
+              <Activity strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4" />
               Tips
             </CardTitle>
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0 space-y-2 sm:space-y-3">
             {(performance?.cacheHitRatio ?? 100) < 90 && (
               <div className="flex items-start gap-2 p-2 bg-yellow-500/10 rounded-md">
-                <AlertTriangle className="h-3 w-3 sm:h-4 sm:w-4 text-yellow-500 mt-0.5 flex-shrink-0" />
+                <AlertTriangle strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-yellow-500 mt-0.5 flex-shrink-0" />
                 <div>
                   <p className="text-xs sm:text-xs font-medium">Low Cache Hit</p>
                   <p className="text-xs sm:text-xs text-muted-foreground hidden sm:block">
@@ -210,7 +210,7 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
             )}
             {(performance?.deadlocks ?? 0) > 0 && (
               <div className="flex items-start gap-2 p-2 bg-red-500/10 rounded-md">
-                <AlertTriangle className="h-3 w-3 sm:h-4 sm:w-4 text-red-500 mt-0.5 flex-shrink-0" />
+                <AlertTriangle strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-red-500 mt-0.5 flex-shrink-0" />
                 <div>
                   <p className="text-xs sm:text-xs font-medium">Deadlocks</p>
                   <p className="text-xs sm:text-xs text-muted-foreground hidden sm:block">
@@ -221,7 +221,7 @@ export function PerformanceTab({ data, loading, history = [] }: PerformanceTabPr
             )}
             {(performance?.cacheHitRatio ?? 0) >= 90 && !(performance?.deadlocks) && (
               <div className="flex items-center gap-2 p-2 bg-green-500/10 rounded-md">
-                <Activity className="h-3 w-3 sm:h-4 sm:w-4 text-green-500 flex-shrink-0" />
+                <Activity strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-green-500 flex-shrink-0" />
                 <p className="text-xs sm:text-xs">Performing well!</p>
               </div>
             )}
diff --git a/src/components/monitoring/tabs/PoolTab.tsx b/src/components/monitoring/tabs/PoolTab.tsx
index 0bbc585..f4659a0 100644
--- a/src/components/monitoring/tabs/PoolTab.tsx
+++ b/src/components/monitoring/tabs/PoolTab.tsx
@@ -60,7 +60,7 @@ export function PoolTab({ connection }: PoolTabProps) {
   if (loading && !stats) {
     return (
       <div className="flex items-center justify-center h-full gap-2 text-muted-foreground">
-        <Loader2 className="h-4 w-4 animate-spin" />
+        <Loader2 strokeWidth={1.5} className="h-4 w-4 animate-spin" />
         Loading pool statistics...
       </div>
     );
@@ -84,7 +84,7 @@ export function PoolTab({ connection }: PoolTabProps) {
       {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <Server className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
+          <Server strokeWidth={1.5} className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
           <h2 className="text-xs sm:text-base font-medium">Connection Pool</h2>
         </div>
         <Button
@@ -111,7 +111,7 @@ export function PoolTab({ connection }: PoolTabProps) {
             <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Total
             </CardTitle>
-            <Server className="h-3 w-3 sm:h-4 sm:w-4 text-blue-500" />
+            <Server strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-blue-500" />
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-medium">{stats?.total ?? 0}</div>
@@ -126,7 +126,7 @@ export function PoolTab({ connection }: PoolTabProps) {
             <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Active
             </CardTitle>
-            <Activity className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
+            <Activity strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-medium">{stats?.active ?? 0}</div>
@@ -142,7 +142,7 @@ export function PoolTab({ connection }: PoolTabProps) {
             <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Idle
             </CardTitle>
-            <Clock className="h-3 w-3 sm:h-4 sm:w-4 text-yellow-500" />
+            <Clock strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-yellow-500" />
           </CardHeader>
           <CardContent className="p-3 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-medium">{stats?.idle ?? 0}</div>
diff --git a/src/components/monitoring/tabs/QueriesTab.tsx b/src/components/monitoring/tabs/QueriesTab.tsx
index 24bb42b..44e2316 100644
--- a/src/components/monitoring/tabs/QueriesTab.tsx
+++ b/src/components/monitoring/tabs/QueriesTab.tsx
@@ -89,7 +89,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
             <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Queries
             </CardTitle>
-            <Search className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
+            <Search strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-medium">{formatNumber(totalQueries)}</div>
@@ -101,7 +101,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
             <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Avg Time
             </CardTitle>
-            <Clock className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
+            <Clock strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-medium">{formatTime(avgTime)}</div>
@@ -127,7 +127,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
       <Card className="p-0">
         <CardHeader className="p-3 sm:p-4">
           <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
-            <Clock className="h-3 w-3 sm:h-4 sm:w-4" />
+            <Clock strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4" />
             Slowest Queries
             {slowQueries.length === 0 && (
               <Badge variant="secondary" className="ml-2 text-xs sm:text-xs">
@@ -139,7 +139,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
         <CardContent className="p-0 sm:p-4 sm:pt-0">
           {slowQueries.length === 0 ? (
             <div className="text-center py-8 text-muted-foreground">
-              <Search className="h-8 w-8 mx-auto mb-2 opacity-50" />
+              <Search strokeWidth={1.5} className="h-8 w-8 mx-auto mb-2 opacity-50" />
               <p className="text-xs">No query statistics available.</p>
               <p className="text-xs mt-1">
                 Enable pg_stat_statements extension to see query stats.
@@ -159,7 +159,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
                         onClick={() => handleSort('calls')}
                       >
                         Calls
-                        <ArrowUpDown className="h-3 w-3" />
+                        <ArrowUpDown strokeWidth={1.5} className="h-3 w-3" />
                       </Button>
                     </TableHead>
                     <TableHead className="text-xs hidden md:table-cell">
@@ -170,7 +170,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
                         onClick={() => handleSort('totalTime')}
                       >
                         Total
-                        <ArrowUpDown className="h-3 w-3" />
+                        <ArrowUpDown strokeWidth={1.5} className="h-3 w-3" />
                       </Button>
                     </TableHead>
                     <TableHead className="text-xs">
@@ -181,7 +181,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
                         onClick={() => handleSort('avgTime')}
                       >
                         Avg
-                        <ArrowUpDown className="h-3 w-3" />
+                        <ArrowUpDown strokeWidth={1.5} className="h-3 w-3" />
                       </Button>
                     </TableHead>
                     <TableHead className="text-xs hidden lg:table-cell">
@@ -192,7 +192,7 @@ export function QueriesTab({ data, loading }: QueriesTabProps) {
                         onClick={() => handleSort('rows')}
                       >
                         Rows
-                        <ArrowUpDown className="h-3 w-3" />
+                        <ArrowUpDown strokeWidth={1.5} className="h-3 w-3" />
                       </Button>
                     </TableHead>
                   </TableRow>
diff --git a/src/components/monitoring/tabs/SessionsTab.tsx b/src/components/monitoring/tabs/SessionsTab.tsx
index 948c247..000a095 100644
--- a/src/components/monitoring/tabs/SessionsTab.tsx
+++ b/src/components/monitoring/tabs/SessionsTab.tsx
@@ -95,7 +95,7 @@ export function SessionsTab({ data, loading, onKillSession, isAdmin = true }: Se
             <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Active
             </CardTitle>
-            <Activity className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
+            <Activity strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-medium">{activeCount}</div>
@@ -107,7 +107,7 @@ export function SessionsTab({ data, loading, onKillSession, isAdmin = true }: Se
             <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Idle
             </CardTitle>
-            <Clock className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
+            <Clock strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-medium">{idleCount}</div>
@@ -143,14 +143,14 @@ export function SessionsTab({ data, loading, onKillSession, isAdmin = true }: Se
       <Card className="p-0">
         <CardHeader className="p-3 sm:p-4">
           <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
-            <Users className="h-3 w-3 sm:h-4 sm:w-4" />
+            <Users strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4" />
             Sessions ({sessions.length})
           </CardTitle>
         </CardHeader>
         <CardContent className="p-0 sm:p-4 sm:pt-0">
           {sessions.length === 0 ? (
             <div className="text-center py-8 text-muted-foreground">
-              <Users className="h-8 w-8 mx-auto mb-2 opacity-50" />
+              <Users strokeWidth={1.5} className="h-8 w-8 mx-auto mb-2 opacity-50" />
               <p className="text-xs">No active sessions found.</p>
             </div>
           ) : (
@@ -232,9 +232,9 @@ export function SessionsTab({ data, loading, onKillSession, isAdmin = true }: Se
                             disabled={killingPid === session.pid}
                           >
                             {killingPid === session.pid ? (
-                              <Loader2 className="h-3 w-3 sm:h-4 sm:w-4 animate-spin" />
+                              <Loader2 strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 animate-spin" />
                             ) : (
-                              <Skull className="h-3 w-3 sm:h-4 sm:w-4" />
+                              <Skull strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4" />
                             )}
                           </Button>
                         ) : (
diff --git a/src/components/monitoring/tabs/StorageTab.tsx b/src/components/monitoring/tabs/StorageTab.tsx
index 4783529..d18f3c4 100644
--- a/src/components/monitoring/tabs/StorageTab.tsx
+++ b/src/components/monitoring/tabs/StorageTab.tsx
@@ -58,7 +58,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
             <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               DB Size
             </CardTitle>
-            <Database className="h-3 w-3 sm:h-4 sm:w-4 text-blue-500" />
+            <Database strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-blue-500" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-medium truncate">
@@ -72,7 +72,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
             <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Tables
             </CardTitle>
-            <HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
+            <HardDrive strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-medium truncate">{formatBytes(totalTableSize)}</div>
@@ -87,7 +87,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
             <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Indexes
             </CardTitle>
-            <Archive className="h-3 w-3 sm:h-4 sm:w-4 text-purple-500" />
+            <Archive strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-purple-500" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-medium truncate">{formatBytes(totalIndexSize)}</div>
@@ -102,7 +102,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
             <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               WAL
             </CardTitle>
-            <FolderOpen className="h-3 w-3 sm:h-4 sm:w-4 text-orange-500" />
+            <FolderOpen strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-orange-500" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-medium truncate">
@@ -116,7 +116,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
       <Card className="p-0">
         <CardHeader className="p-3 sm:p-4 pb-2">
           <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
-            <HardDrive className="h-3 w-3 sm:h-4 sm:w-4" />
+            <HardDrive strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4" />
             Storage Breakdown
           </CardTitle>
         </CardHeader>
@@ -165,14 +165,14 @@ export function StorageTab({ data, loading }: StorageTabProps) {
       <Card className="p-0">
         <CardHeader className="p-3 sm:p-4 pb-2">
           <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
-            <FolderOpen className="h-3 w-3 sm:h-4 sm:w-4" />
+            <FolderOpen strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4" />
             Tablespaces
           </CardTitle>
         </CardHeader>
         <CardContent className="p-0 sm:p-4 sm:pt-0">
           {storage.length === 0 ? (
             <div className="text-center py-8 text-muted-foreground">
-              <FolderOpen className="h-8 w-8 mx-auto mb-2 opacity-50" />
+              <FolderOpen strokeWidth={1.5} className="h-8 w-8 mx-auto mb-2 opacity-50" />
               <p className="text-xs">No tablespace information available.</p>
             </div>
           ) : (
@@ -191,7 +191,7 @@ export function StorageTab({ data, loading }: StorageTabProps) {
                     <TableRow key={ts.name}>
                       <TableCell className="py-2">
                         <div className="flex items-center gap-1 sm:gap-2">
-                          <FolderOpen className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground flex-shrink-0" />
+                          <FolderOpen strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground flex-shrink-0" />
                           <span className="font-medium text-xs sm:text-xs truncate max-w-[80px] sm:max-w-none">{ts.name}</span>
                           {ts.name === 'pg_default' && (
                             <Badge variant="secondary" className="text-xs sm:text-xs hidden sm:inline-flex">Default</Badge>
@@ -233,14 +233,14 @@ export function StorageTab({ data, loading }: StorageTabProps) {
       <Card className="p-0">
         <CardHeader className="p-3 sm:p-4 pb-2">
           <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
-            <Database className="h-3 w-3 sm:h-4 sm:w-4" />
+            <Database strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4" />
             Largest Tables
           </CardTitle>
         </CardHeader>
         <CardContent className="p-0 sm:p-4 sm:pt-0">
           {tables.length === 0 ? (
             <div className="text-center py-8 text-muted-foreground">
-              <Database className="h-8 w-8 mx-auto mb-2 opacity-50" />
+              <Database strokeWidth={1.5} className="h-8 w-8 mx-auto mb-2 opacity-50" />
               <p className="text-xs">No table information available.</p>
             </div>
           ) : (
diff --git a/src/components/monitoring/tabs/TablesTab.tsx b/src/components/monitoring/tabs/TablesTab.tsx
index 48baa77..48f9239 100644
--- a/src/components/monitoring/tabs/TablesTab.tsx
+++ b/src/components/monitoring/tabs/TablesTab.tsx
@@ -83,7 +83,7 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
             <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Tables
             </CardTitle>
-            <Table2 className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
+            <Table2 strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-medium">{tables.length}</div>
@@ -98,7 +98,7 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
             <CardTitle className="text-xs sm:text-xs font-medium text-muted-foreground">
               Size
             </CardTitle>
-            <Search className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
+            <Search strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent className="p-2 sm:p-4 pt-0">
             <div className="text-lg sm:text-2xl font-medium">{formatBytes(totalSize)}</div>
@@ -131,7 +131,7 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
         <CardHeader className="p-3 sm:p-4">
           <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-4">
             <CardTitle className="text-xs sm:text-xs font-medium flex items-center gap-2">
-              <Table2 className="h-3 w-3 sm:h-4 sm:w-4" />
+              <Table2 strokeWidth={1.5} className="h-3 w-3 sm:h-4 sm:w-4" />
               Table Statistics
             </CardTitle>
             <Input
@@ -145,7 +145,7 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
         <CardContent className="p-0 sm:p-4 sm:pt-0">
           {filteredTables.length === 0 ? (
             <div className="text-center py-8 text-muted-foreground">
-              <Table2 className="h-8 w-8 mx-auto mb-2 opacity-50" />
+              <Table2 strokeWidth={1.5} className="h-8 w-8 mx-auto mb-2 opacity-50" />
               <p className="text-xs">No tables found.</p>
             </div>
           ) : (
@@ -218,9 +218,9 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
                               title="Analyze"
                             >
                               {actionLoading === `analyze-${table.tableName}` ? (
-                                <Loader2 className="h-3 w-3 animate-spin" />
+                                <Loader2 strokeWidth={1.5} className="h-3 w-3 animate-spin" />
                               ) : (
-                                <Search className="h-3 w-3" />
+                                <Search strokeWidth={1.5} className="h-3 w-3" />
                               )}
                             </Button>
                             <Button
@@ -232,9 +232,9 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
                               title="Vacuum"
                             >
                               {actionLoading === `vacuum-${table.tableName}` ? (
-                                <Loader2 className="h-3 w-3 animate-spin" />
+                                <Loader2 strokeWidth={1.5} className="h-3 w-3 animate-spin" />
                               ) : (
-                                <RefreshCw className="h-3 w-3" />
+                                <RefreshCw strokeWidth={1.5} className="h-3 w-3" />
                               )}
                             </Button>
                             <Button
@@ -246,9 +246,9 @@ export function TablesTab({ data, loading, onRunMaintenance, isAdmin = true }: T
                               title="Reindex"
                             >
                               {actionLoading === `reindex-${table.tableName}` ? (
-                                <Loader2 className="h-3 w-3 animate-spin" />
+                                <Loader2 strokeWidth={1.5} className="h-3 w-3 animate-spin" />
                               ) : (
-                                <Zap className="h-3 w-3" />
+                                <Zap strokeWidth={1.5} className="h-3 w-3" />
                               )}
                             </Button>
                           </div>
diff --git a/src/components/results-grid/ResultCard.tsx b/src/components/results-grid/ResultCard.tsx
index 6545d23..7656c8f 100644
--- a/src/components/results-grid/ResultCard.tsx
+++ b/src/components/results-grid/ResultCard.tsx
@@ -59,7 +59,7 @@ export function ResultCard({
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-2 flex-1 min-w-0">
           <div className="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center shrink-0">
-            <Hash className="w-4 h-4 text-blue-400" />
+            <Hash strokeWidth={1.5} className="w-3.5 h-3.5 text-blue-400" />
           </div>
           <div className="min-w-0 flex-1">
             <p className={cn(
@@ -73,7 +73,7 @@ export function ResultCard({
             )}
           </div>
         </div>
-        <ChevronRight className="w-4 h-4 text-zinc-600" />
+        <ChevronRight strokeWidth={1.5} className="w-3.5 h-3.5 text-zinc-600" />
       </div>
 
       {/* Preview Fields */}
@@ -92,7 +92,7 @@ export function ResultCard({
             <div key={field} className="flex items-center justify-between text-xs">
               <span className="text-zinc-500 truncate mr-2">
                 {field}
-                {isMasked && <Lock className="w-2.5 h-2.5 inline ml-1 text-purple-400" />}
+                {isMasked && <Lock strokeWidth={1.5} className="w-2.5 h-2.5 inline ml-1 text-purple-400" />}
               </span>
               <span className={cn("truncate max-w-[60%] text-right font-mono", className)}>
                 {displayValue}
diff --git a/src/components/results-grid/RowDetailSheet.tsx b/src/components/results-grid/RowDetailSheet.tsx
index 54f0804..364388f 100644
--- a/src/components/results-grid/RowDetailSheet.tsx
+++ b/src/components/results-grid/RowDetailSheet.tsx
@@ -97,7 +97,7 @@ export function RowDetailSheet({
           <div className="flex items-center justify-between">
             <SheetTitle className="text-zinc-100 flex items-center gap-2">
               <div className="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center">
-                <FileJson className="w-4 h-4 text-blue-400" />
+                <FileJson strokeWidth={1.5} className="w-3.5 h-3.5 text-blue-400" />
               </div>
               Row #{rowIndex + 1}
             </SheetTitle>
@@ -108,9 +108,9 @@ export function RowDetailSheet({
               onClick={copyAllAsJson}
             >
               {copiedField === '__all__' ? (
-                <><Check className="w-3 h-3 mr-1 text-emerald-400" /> Copied</>
+                <><Check strokeWidth={1.5} className="w-3 h-3 mr-1 text-emerald-400" /> Copied</>
               ) : (
-                <><Copy className="w-3 h-3 mr-1" /> Copy JSON</>
+                <><Copy strokeWidth={1.5} className="w-3 h-3 mr-1" /> Copy JSON</>
               )}
             </Button>
           </div>
@@ -131,7 +131,7 @@ export function RowDetailSheet({
                     <div className="flex-1 min-w-0">
                       <p className="text-xs text-zinc-500 mb-1 font-mono flex items-center gap-1">
                         {field}
-                        {isMasked && <Lock className="w-2.5 h-2.5 text-purple-400" />}
+                        {isMasked && <Lock strokeWidth={1.5} className="w-2.5 h-2.5 text-purple-400" />}
                       </p>
                       <p className={cn(
                         "font-mono text-xs break-all",
@@ -160,9 +160,9 @@ export function RowDetailSheet({
                         onClick={() => copyValue(field, row[field])}
                       >
                         {copiedField === field ? (
-                          <Check className="w-3.5 h-3.5 text-emerald-400" />
+                          <Check strokeWidth={1.5} className="w-3.5 h-3.5 text-emerald-400" />
                         ) : (
-                          <Copy className="w-3.5 h-3.5 text-zinc-500" />
+                          <Copy strokeWidth={1.5} className="w-3.5 h-3.5 text-zinc-500" />
                         )}
                       </Button>
                     </div>
diff --git a/src/components/results-grid/StatsBar.tsx b/src/components/results-grid/StatsBar.tsx
index a29ecf2..80d1b0b 100644
--- a/src/components/results-grid/StatsBar.tsx
+++ b/src/components/results-grid/StatsBar.tsx
@@ -73,9 +73,9 @@ export function StatsBar({
             onClick={onClearFilters}
             title="Clear all filters"
           >
-            <Filter className="w-3 h-3" />
+            <Filter strokeWidth={1.5} className="w-3 h-3" />
             {activeFilterCount} filter{activeFilterCount > 1 ? 's' : ''} &bull; {filteredRowCount} shown
-            <X className="w-3 h-3" />
+            <X strokeWidth={1.5} className="w-3 h-3" />
           </button>
         )}
         {result.pagination?.wasLimited && (
@@ -104,7 +104,7 @@ export function StatsBar({
             </Button>
           ) : effectiveMaskingEnabled ? (
             <span className="h-6 px-2 text-xs font-medium text-purple-400 bg-purple-500/10 rounded flex items-center gap-1">
-              <Lock className="w-3 h-3" />
+              <Lock strokeWidth={1.5} className="w-3 h-3" />
               MASKED
             </span>
           ) : null
@@ -122,7 +122,7 @@ export function StatsBar({
               className="h-6 px-1.5 text-xs text-emerald-400 hover:bg-emerald-500/10"
               onClick={onApplyChanges}
             >
-              <Save className="w-3 h-3" />
+              <Save strokeWidth={1.5} className="w-3 h-3" />
             </Button>
             <Button
               variant="ghost"
@@ -130,7 +130,7 @@ export function StatsBar({
               className="h-6 px-1.5 text-xs text-red-400 hover:bg-red-500/10"
               onClick={onDiscardChanges}
             >
-              <X className="w-3 h-3" />
+              <X strokeWidth={1.5} className="w-3 h-3" />
             </Button>
           </div>
         )}
@@ -149,7 +149,7 @@ export function StatsBar({
               viewMode === 'card' ? "bg-blue-600 text-white" : "text-zinc-500"
             )}
           >
-            <LayoutGrid className="w-4 h-4" />
+            <LayoutGrid strokeWidth={1.5} className="w-3.5 h-3.5" />
           </button>
           <button
             onClick={() => onSetViewMode('table')}
@@ -158,7 +158,7 @@ export function StatsBar({
               viewMode === 'table' ? "bg-blue-600 text-white" : "text-zinc-500"
             )}
           >
-            <Table2 className="w-4 h-4" />
+            <Table2 strokeWidth={1.5} className="w-3.5 h-3.5" />
           </button>
         </div>
       </div>
@@ -186,12 +186,12 @@ export function LoadMoreFooter({ hasMore, onLoadMore, isLoadingMore }: LoadMoreF
       >
         {isLoadingMore ? (
           <>
-            <Loader2 className="w-3 h-3 mr-2 animate-spin" />
+            <Loader2 strokeWidth={1.5} className="w-3 h-3 mr-2 animate-spin" />
             Loading...
           </>
         ) : (
           <>
-            <ChevronDown className="w-3 h-3 mr-2" />
+            <ChevronDown strokeWidth={1.5} className="w-3 h-3 mr-2" />
             Load More (500 rows)
           </>
         )}
diff --git a/src/components/schema-explorer/ColumnList.tsx b/src/components/schema-explorer/ColumnList.tsx
index 396e9b2..7bf1e2c 100644
--- a/src/components/schema-explorer/ColumnList.tsx
+++ b/src/components/schema-explorer/ColumnList.tsx
@@ -16,7 +16,7 @@ export const ColumnList = React.memo(function ColumnList({ columns, indexes }: C
           className="flex items-center gap-2 py-1 px-2 rounded-sm group/col hover:bg-accent/20 cursor-default"
         >
           {column.isPrimary ? (
-            <Key className="w-2.5 h-2.5 text-yellow-500/70" />
+            <Key strokeWidth={1.5} className="w-2.5 h-2.5 text-yellow-500/70" />
           ) : (
             <div className="w-2.5 h-2.5 flex items-center justify-center">
               <div className="w-1 h-1 rounded-full bg-muted-foreground/50" />
@@ -35,7 +35,7 @@ export const ColumnList = React.memo(function ColumnList({ columns, indexes }: C
       {indexes.length > 0 && (
         <div className="pt-2 pb-1">
           <div className="flex items-center gap-1.5 px-2 mb-1">
-            <Hash className="w-2.5 h-2.5 text-purple-500/40" />
+            <Hash strokeWidth={1.5} className="w-2.5 h-2.5 text-purple-500/40" />
             <span className="text-[0.625rem] font-medium text-muted-foreground">Indexes</span>
           </div>
           {indexes.map(idx => (
diff --git a/src/components/schema-explorer/SchemaExplorer.tsx b/src/components/schema-explorer/SchemaExplorer.tsx
index 0f5499e..93ca123 100644
--- a/src/components/schema-explorer/SchemaExplorer.tsx
+++ b/src/components/schema-explorer/SchemaExplorer.tsx
@@ -77,8 +77,8 @@ export function SchemaExplorer({
     return (
       <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
         <div className="relative mb-4">
-          <Loader2 className="w-8 h-8 animate-spin text-blue-500/20" />
-          <Database className="w-4 h-4 absolute inset-0 m-auto text-blue-500 animate-pulse" />
+          <Loader2 strokeWidth={1.5} className="w-8 h-8 animate-spin text-blue-500/20" />
+          <Database strokeWidth={1.5} className="w-3.5 h-3.5 absolute inset-0 m-auto text-blue-500 animate-pulse" />
         </div>
         <span className="text-xs font-medium animate-pulse">Scanning Schema...</span>
       </div>
@@ -89,7 +89,7 @@ export function SchemaExplorer({
     return (
       <div className="flex flex-col items-center justify-center py-12 px-6 text-center">
         <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4 border border-border">
-          <AlertCircle className="w-6 h-6 text-muted-foreground" />
+          <AlertCircle strokeWidth={1.5} className="w-6 h-6 text-muted-foreground" />
         </div>
         <h3 className="text-foreground text-xs font-medium mb-1">No structures found</h3>
         <p className="text-xs text-muted-foreground leading-relaxed">
@@ -104,33 +104,29 @@ export function SchemaExplorer({
       <div className="sticky top-0 z-10 px-3 pb-3 pt-1 space-y-3 bg-background">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <Database className="w-3.5 h-3.5 text-blue-500/50" />
+            <Database strokeWidth={1.5} className="w-3.5 h-3.5 text-blue-500/50" />
             <span className="text-xs font-medium text-muted-foreground">
               Explorer
             </span>
           </div>
           <div className="flex items-center gap-1.5">
             {isAdmin && (
-              <Button
-                variant="ghost"
-                size="icon"
-                className="w-6 h-6 hover:bg-accent text-muted-foreground hover:text-amber-400 transition-colors"
+              <button
+                className="p-1 rounded hover:bg-accent text-muted-foreground hover:text-amber-400 transition-colors"
                 onClick={() => onOpenMaintenance?.('global')}
                 title="Database Maintenance"
               >
-                <Settings className="w-3.5 h-3.5" />
-              </Button>
+                <Settings strokeWidth={1.5} className="w-3.5 h-3.5" />
+              </button>
             )}
             {(capabilities?.supportsCreateTable !== false) && (
-              <Button
-                variant="ghost"
-                size="icon"
-                className="w-6 h-6 hover:bg-accent text-muted-foreground hover:text-blue-400 transition-colors"
+              <button
+                className="p-1 rounded hover:bg-accent text-muted-foreground hover:text-blue-400 transition-colors"
                 onClick={onCreateTableClick}
                 title={`Create ${labels?.entityName || 'Table'}`}
               >
-                <Plus className="w-3.5 h-3.5" />
-              </Button>
+                <Plus strokeWidth={1.5} className="w-3.5 h-3.5" />
+              </button>
             )}
             <span className="text-[0.625rem] bg-blue-500/10 text-blue-400 px-1.5 py-0.5 rounded-full font-mono border border-blue-500/10">
               {schema.length}
@@ -139,7 +135,7 @@ export function SchemaExplorer({
         </div>
 
         <div className="relative group">
-          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground group-focus-within:text-blue-500 transition-colors" />
+          <Search strokeWidth={1.5} className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground group-focus-within:text-blue-500 transition-colors" />
           <Input
             placeholder={labels?.searchPlaceholder || "Search tables or columns..."}
             value={searchQuery}
@@ -151,7 +147,7 @@ export function SchemaExplorer({
               onClick={() => setSearchQuery('')}
               className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
             >
-              <Hash className="w-3 h-3 rotate-45" />
+              <Hash strokeWidth={1.5} className="w-3.5 h-3.5 rotate-45" />
             </button>
           )}
         </div>
diff --git a/src/components/schema-explorer/TableItem.tsx b/src/components/schema-explorer/TableItem.tsx
index 605d23c..06e3a05 100644
--- a/src/components/schema-explorer/TableItem.tsx
+++ b/src/components/schema-explorer/TableItem.tsx
@@ -67,39 +67,39 @@ function renderMenuItems(
   return (
     <>
       <Item onClick={() => callbacks.onTableClick?.(table.name)}>
-        <Play className="w-3.5 h-3.5 mr-2 text-green-500" />
+        <Play strokeWidth={1.5} className="w-3.5 h-3.5 mr-2 text-green-500" />
         {labels?.selectAction || 'Select Top 100'}
       </Item>
       <Item onClick={() => callbacks.onGenerateSelect?.(table.name)}>
-        <Filter className="w-3.5 h-3.5 mr-2 text-blue-500" />
+        <Filter strokeWidth={1.5} className="w-3.5 h-3.5 mr-2 text-blue-500" />
         {labels?.generateAction || 'Generate Query'}
       </Item>
       <Item onClick={() => copyToClipboard(table.name, `${labels?.entityName || 'Table'} name`)}>
-        <Copy className="w-3.5 h-3.5 mr-2 text-muted-foreground" />
+        <Copy strokeWidth={1.5} className="w-3.5 h-3.5 mr-2 text-muted-foreground" />
         Copy Name
       </Item>
       <Separator />
       <Item onClick={() => callbacks.onProfileTable?.(table.name)}>
-        <BarChart3 className="w-3.5 h-3.5 mr-2 text-cyan-500" />
+        <BarChart3 strokeWidth={1.5} className="w-3.5 h-3.5 mr-2 text-cyan-500" />
         Profile Table
       </Item>
       <Item onClick={() => callbacks.onGenerateCode?.(table.name)}>
-        <Code className="w-3.5 h-3.5 mr-2 text-purple-500" />
+        <Code strokeWidth={1.5} className="w-3.5 h-3.5 mr-2 text-purple-500" />
         Generate Code
       </Item>
       <Item onClick={() => callbacks.onGenerateTestData?.(table.name)}>
-        <Wand2 className="w-3.5 h-3.5 mr-2 text-amber-500" />
+        <Wand2 strokeWidth={1.5} className="w-3.5 h-3.5 mr-2 text-amber-500" />
         Generate Test Data
       </Item>
       {isAdmin && (
         <>
           <Separator />
           <Item onClick={() => callbacks.onOpenMaintenance?.('tables', table.name)}>
-            <Search className="w-3.5 h-3.5 mr-2 text-amber-500" />
+            <Search strokeWidth={1.5} className="w-3.5 h-3.5 mr-2 text-amber-500" />
             {labels?.analyzeAction || 'Analyze Table'}
           </Item>
           <Item onClick={() => callbacks.onOpenMaintenance?.('tables', table.name)}>
-            <Trash2 className="w-3.5 h-3.5 mr-2 text-blue-400" />
+            <Trash2 strokeWidth={1.5} className="w-3.5 h-3.5 mr-2 text-blue-400" />
             {labels?.vacuumAction || 'Vacuum Table'}
           </Item>
         </>
@@ -144,7 +144,7 @@ export const TableItem = React.memo(function TableItem({
               transition={{ duration: 0.2 }}
               className="shrink-0"
             >
-              <ChevronRight className="w-3 h-3 text-muted-foreground" />
+              <ChevronRight strokeWidth={1.5} className="w-3.5 h-3.5 text-muted-foreground" />
             </motion.div>
 
             <TableIcon
@@ -177,7 +177,7 @@ export const TableItem = React.memo(function TableItem({
                     className="absolute inset-0 w-full h-full opacity-0 group-hover:opacity-100 [@media(hover:none)]:opacity-100 focus-within:opacity-100 transition-opacity hover:bg-accent"
                     onClick={(e) => e.stopPropagation()}
                   >
-                    <MoreVertical className="w-4 h-4 text-muted-foreground group-hover:text-foreground" />
+                    <MoreVertical strokeWidth={1.5} className="w-3.5 h-3.5 text-muted-foreground group-hover:text-foreground" />
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-48">
diff --git a/src/components/sidebar/ConnectionItem.tsx b/src/components/sidebar/ConnectionItem.tsx
index 9d8b35a..5d8ed62 100644
--- a/src/components/sidebar/ConnectionItem.tsx
+++ b/src/components/sidebar/ConnectionItem.tsx
@@ -67,37 +67,33 @@ export const ConnectionItem = React.memo(function ConnectionItem({
           {conn.managed && (
             <div
               data-testid={`managed-lock-${conn.seedId || conn.id}`}
-              className="w-6 h-6 flex items-center justify-center text-amber-500/60"
+              className="flex items-center justify-center text-amber-500/60"
               title="Managed by administrator"
             >
-              <Lock className="w-3 h-3" />
+              <Lock strokeWidth={1.5} className="w-3 h-3" />
             </div>
           )}
           {!conn.managed && onEdit && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity hover:bg-blue-500/20 hover:text-blue-400"
+            <button
+              className="p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity hover:bg-blue-500/20 hover:text-blue-400"
               onClick={(e) => {
                 e.stopPropagation();
                 onEdit(conn);
               }}
             >
-              <Pencil className="w-3 h-3" />
-            </Button>
+              <Pencil strokeWidth={1.5} className="w-3 h-3" />
+            </button>
           )}
           {!conn.managed && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500/20 hover:text-red-400"
+            <button
+              className="p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500/20 hover:text-red-400"
               onClick={(e) => {
                 e.stopPropagation();
                 onDelete(conn.id);
               }}
             >
-              <Trash2 className="w-3 h-3" />
-            </Button>
+              <Trash2 strokeWidth={1.5} className="w-3 h-3" />
+            </button>
           )}
         </div>
     </motion.div>
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index bbde21f..93fd64e 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -56,8 +56,8 @@ export function Sidebar({
     <div className="flex w-full h-full border-r border-border flex-col bg-background select-none">
       <div className="h-14 px-4 flex items-center justify-between border-b border-border">
         <div className="flex items-center gap-2">
-          <div className="w-6 h-6 bg-blue-600 rounded-md flex items-center justify-center">
-            <Zap className="w-3.5 h-3.5 text-white fill-current" />
+          <div className="w-5 h-5 bg-blue-600 rounded flex items-center justify-center">
+            <Zap strokeWidth={1.5} className="w-3 h-3 text-white fill-current" />
           </div>
           <span className="font-medium text-xs tracking-tight bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
             LibreDB Studio
@@ -65,24 +65,20 @@ export function Sidebar({
         </div>
         <div className="flex items-center gap-1">
           {activeConnection && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+            <button
+              className="p-1 rounded hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
               onClick={onShowDiagram}
               title="Show ERD Diagram"
             >
-              <Layers className="w-4 h-4" />
-            </Button>
+              <Layers strokeWidth={1.5} className="w-3.5 h-3.5" />
+            </button>
           )}
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+          <button
+            className="p-1 rounded hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
             onClick={onAddConnection}
           >
-            <Plus className="w-4 h-4" />
-          </Button>
+            <Plus strokeWidth={1.5} className="w-3.5 h-3.5" />
+          </button>
         </div>
       </div>
 
diff --git a/src/components/studio/BottomPanel.tsx b/src/components/studio/BottomPanel.tsx
index 249d1ee..87b8d03 100644
--- a/src/components/studio/BottomPanel.tsx
+++ b/src/components/studio/BottomPanel.tsx
@@ -41,7 +41,7 @@ function ChartDashboardLazy({ result }: { result: QueryResult | null }) {
   if (savedCharts.length === 0) {
     return (
       <div className="h-full flex flex-col items-center justify-center bg-[#080808] text-zinc-500 gap-2">
-        <LayoutDashboard className="w-10 h-10 opacity-30" />
+        <LayoutDashboard strokeWidth={1.5} className="w-10 h-10 opacity-30" />
         <p className="text-xs">No saved charts yet</p>
         <p className="text-xs text-zinc-600">Save charts from the Charts tab to display them here</p>
       </div>
@@ -136,17 +136,17 @@ export function BottomPanel({
   onExportResults,
 }: BottomPanelProps) {
   const tabs: { key: BottomPanelMode; label: string; icon: React.ReactNode; activeClass: string }[] = [
-    { key: 'results', label: 'Results', icon: <LayoutGrid className="w-3 h-3" />, activeClass: 'text-blue-400 border-blue-500 bg-white/5' },
-    { key: 'explain', label: 'Explain', icon: <Zap className="w-3 h-3" />, activeClass: 'text-amber-400 border-amber-500 bg-white/5' },
-    { key: 'history', label: 'History', icon: <Clock className="w-3 h-3" />, activeClass: 'text-emerald-400 border-emerald-500 bg-white/5' },
-    { key: 'saved', label: 'Saved', icon: <Bookmark className="w-3 h-3" />, activeClass: 'text-purple-400 border-purple-500 bg-white/5' },
-    { key: 'charts', label: 'Charts', icon: <BarChart3 className="w-3 h-3" />, activeClass: 'text-cyan-400 border-cyan-500 bg-white/5' },
-    { key: 'nl2sql', label: 'NL2SQL', icon: <Sparkles className="w-3 h-3" />, activeClass: 'text-violet-400 border-violet-500 bg-white/5' },
-    { key: 'autopilot', label: 'Autopilot', icon: <Zap className="w-3 h-3" />, activeClass: 'text-cyan-400 border-cyan-500 bg-white/5' },
-    { key: 'pivot', label: 'Pivot', icon: <Columns3 className="w-3 h-3" />, activeClass: 'text-orange-400 border-orange-500 bg-white/5' },
-    { key: 'docs', label: 'Docs', icon: <FileText className="w-3 h-3" />, activeClass: 'text-teal-400 border-teal-500 bg-white/5' },
-    { key: 'schemadiff', label: 'Diff', icon: <GitCompare className="w-3 h-3" />, activeClass: 'text-rose-400 border-rose-500 bg-white/5' },
-    { key: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard className="w-3 h-3" />, activeClass: 'text-indigo-400 border-indigo-500 bg-white/5' },
+    { key: 'results', label: 'Results', icon: <LayoutGrid strokeWidth={1.5} className="w-3 h-3" />, activeClass: 'text-blue-400 border-blue-500 bg-white/5' },
+    { key: 'explain', label: 'Explain', icon: <Zap strokeWidth={1.5} className="w-3 h-3" />, activeClass: 'text-amber-400 border-amber-500 bg-white/5' },
+    { key: 'history', label: 'History', icon: <Clock strokeWidth={1.5} className="w-3 h-3" />, activeClass: 'text-emerald-400 border-emerald-500 bg-white/5' },
+    { key: 'saved', label: 'Saved', icon: <Bookmark strokeWidth={1.5} className="w-3 h-3" />, activeClass: 'text-purple-400 border-purple-500 bg-white/5' },
+    { key: 'charts', label: 'Charts', icon: <BarChart3 strokeWidth={1.5} className="w-3 h-3" />, activeClass: 'text-cyan-400 border-cyan-500 bg-white/5' },
+    { key: 'nl2sql', label: 'NL2SQL', icon: <Sparkles strokeWidth={1.5} className="w-3 h-3" />, activeClass: 'text-violet-400 border-violet-500 bg-white/5' },
+    { key: 'autopilot', label: 'Autopilot', icon: <Zap strokeWidth={1.5} className="w-3 h-3" />, activeClass: 'text-cyan-400 border-cyan-500 bg-white/5' },
+    { key: 'pivot', label: 'Pivot', icon: <Columns3 strokeWidth={1.5} className="w-3 h-3" />, activeClass: 'text-orange-400 border-orange-500 bg-white/5' },
+    { key: 'docs', label: 'Docs', icon: <FileText strokeWidth={1.5} className="w-3 h-3" />, activeClass: 'text-teal-400 border-teal-500 bg-white/5' },
+    { key: 'schemadiff', label: 'Diff', icon: <GitCompare strokeWidth={1.5} className="w-3 h-3" />, activeClass: 'text-rose-400 border-rose-500 bg-white/5' },
+    { key: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard strokeWidth={1.5} className="w-3 h-3" />, activeClass: 'text-indigo-400 border-indigo-500 bg-white/5' },
   ];
 
   return (
@@ -180,7 +180,7 @@ export function BottomPanel({
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button variant="ghost" size="sm" className="h-7 text-xs font-medium text-zinc-500 hover:text-white gap-2">
-                  <Download className="w-3 h-3" /> Export
+                  <Download strokeWidth={1.5} className="w-3 h-3" /> Export
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="bg-[#0d0d0d] border-white/10 text-zinc-300">
@@ -275,7 +275,7 @@ export function BottomPanel({
           )
         ) : (
           <div className="h-full flex flex-col items-center justify-center opacity-20 bg-[#0a0a0a]">
-            <Terminal className="w-12 h-12 mb-4" />
+            <Terminal strokeWidth={1.5} className="w-12 h-12 mb-4" />
             <p className="text-xs font-medium">Execute a query or check history</p>
             <p className="text-xs mt-2">Ready to query</p>
           </div>
diff --git a/src/components/studio/QueryToolbar.tsx b/src/components/studio/QueryToolbar.tsx
index 7fd296b..f95a085 100644
--- a/src/components/studio/QueryToolbar.tsx
+++ b/src/components/studio/QueryToolbar.tsx
@@ -47,7 +47,7 @@ export function QueryToolbar({
       {/* Playground Mode Banner */}
       {playgroundMode && (
         <div className="hidden md:flex items-center justify-center gap-2 px-4 py-1 bg-emerald-500/10 border-b border-emerald-500/20 text-emerald-400">
-          <FlaskConical className="w-3 h-3" />
+          <FlaskConical strokeWidth={1.5} className="w-3 h-3" />
           <span className="text-xs font-mediumr">
             Sandbox Mode — All changes will be auto-rolled back
           </span>
@@ -58,7 +58,7 @@ export function QueryToolbar({
       <div className="hidden md:flex items-center justify-between px-4 py-1.5 bg-[#0a0a0a] border-b border-white/5">
         <div className="flex items-center gap-4">
           <div className="flex items-center gap-2 px-2 py-0.5 rounded bg-blue-500/5 border border-blue-500/10">
-            <Terminal className="w-3 h-3 text-blue-400" />
+            <Terminal strokeWidth={1.5} className="w-3 h-3 text-blue-400" />
             <span className="text-xs font-medium text-blue-400">Query</span>
           </div>
           <div className="h-4 w-px bg-white/5" />
@@ -68,7 +68,7 @@ export function QueryToolbar({
             className="h-7 text-xs font-medium text-zinc-500 hover:text-white gap-2"
             onClick={onSaveQuery}
           >
-            <Save className="w-3 h-3" /> Save
+            <Save strokeWidth={1.5} className="w-3 h-3" /> Save
           </Button>
         </div>
         {isExecuting ? (
@@ -77,7 +77,7 @@ export function QueryToolbar({
             className="bg-red-600 hover:bg-red-500 text-white font-medium text-xs h-7 px-4 gap-2"
             onClick={onCancelQuery}
           >
-            <Square className="w-3 h-3 fill-current" />
+            <Square strokeWidth={1.5} className="w-3 h-3 fill-current" />
             CANCEL
           </Button>
         ) : (
@@ -87,7 +87,7 @@ export function QueryToolbar({
             onClick={onExecuteQuery}
             disabled={!activeConnection}
           >
-            <Play className="w-3 h-3 fill-current" />
+            <Play strokeWidth={1.5} className="w-3 h-3 fill-current" />
             RUN
           </Button>
         )}
@@ -142,7 +142,7 @@ export function QueryToolbar({
               disabled={transactionActive}
               title="Playground mode: queries are auto-rolled back"
             >
-              <FlaskConical className="w-3 h-3" />
+              <FlaskConical strokeWidth={1.5} className="w-3 h-3" />
               SANDBOX
             </Button>
 
@@ -158,7 +158,7 @@ export function QueryToolbar({
               onClick={onToggleEditing}
               title="Enable inline data editing"
             >
-              <Pencil className="w-3 h-3" />
+              <Pencil strokeWidth={1.5} className="w-3 h-3" />
               EDIT
             </Button>
 
@@ -169,7 +169,7 @@ export function QueryToolbar({
               onClick={onImport}
               title="Import data from CSV/JSON"
             >
-              <Upload className="w-3 h-3" />
+              <Upload strokeWidth={1.5} className="w-3 h-3" />
               IMPORT
             </Button>
           </div>
diff --git a/src/components/studio/StudioDesktopHeader.tsx b/src/components/studio/StudioDesktopHeader.tsx
index 0b35497..a85604b 100644
--- a/src/components/studio/StudioDesktopHeader.tsx
+++ b/src/components/studio/StudioDesktopHeader.tsx
@@ -32,7 +32,7 @@ export function StudioDesktopHeader({
     <header className="hidden md:flex h-14 border-b border-white/5 items-center justify-between px-4 bg-[#0a0a0a]/80 backdrop-blur-xl sticky top-0 z-30">
       <div className="flex items-center gap-3">
         <div className="p-1.5 rounded-lg bg-blue-500/10 border border-blue-500/20">
-          <Database className="w-4 h-4 text-blue-400" />
+          <Database strokeWidth={1.5} className="w-3.5 h-3.5 text-blue-400" />
         </div>
         <div>
           <h1 className="text-xs font-medium text-zinc-200 truncate max-w-[120px]">
@@ -78,33 +78,33 @@ export function StudioDesktopHeader({
           className="h-7 px-3 text-xs font-medium gap-2 text-zinc-500 hover:text-purple-400 hover:bg-purple-500/10"
           onClick={() => router.push('/monitoring')}
         >
-          <Gauge className="w-3 h-3" /> Monitoring
+          <Gauge strokeWidth={1.5} className="w-3 h-3" /> Monitoring
         </Button>
 
         {user && (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="ghost" size="sm" className="h-8 gap-2 hover:bg-white/5 px-2">
-                <User className="w-3.5 h-3.5 text-blue-400" />
+                <User strokeWidth={1.5} className="w-3 h-3 text-blue-400" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-56 bg-[#0d0d0d] border-white/10 text-zinc-300">
               {isAdmin && (
                 <DropdownMenuItem onClick={() => router.push('/admin')} className="cursor-pointer">
-                  <Settings className="w-4 h-4 mr-2" /> Admin Dashboard
+                  <Settings strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" /> Admin Dashboard
                 </DropdownMenuItem>
               )}
               <DropdownMenuItem onClick={() => router.push('/monitoring')} className="cursor-pointer">
-                <Gauge className="w-4 h-4 mr-2" /> Monitoring
+                <Gauge strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" /> Monitoring
               </DropdownMenuItem>
               <div className="border-t border-white/5 my-1" />
               <DropdownMenuItem onClick={onLogout} className="text-red-400 cursor-pointer">
-                <LogOut className="w-4 h-4 mr-2" /> Logout
+                <LogOut strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" /> Logout
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
         )}
-        <Settings className="w-4 h-4 text-zinc-400 cursor-pointer hover:text-white transition-colors mx-2" />
+        <Settings strokeWidth={1.5} className="w-3.5 h-3.5 text-zinc-400 cursor-pointer hover:text-white transition-colors mx-2" />
         <span className="text-xs text-zinc-500 font-mono">
           v{process.env.NEXT_PUBLIC_APP_VERSION}
         </span>
diff --git a/src/components/studio/StudioMobileHeader.tsx b/src/components/studio/StudioMobileHeader.tsx
index 08998bd..2e1f5f5 100644
--- a/src/components/studio/StudioMobileHeader.tsx
+++ b/src/components/studio/StudioMobileHeader.tsx
@@ -87,17 +87,17 @@ export function StudioMobileHeader({
                 size="sm"
                 className="h-8 px-2 gap-1 bg-[#111] border-white/10 hover:bg-white/5 text-zinc-300 max-w-[160px]"
               >
-                <Database className="w-3.5 h-3.5 text-blue-400 shrink-0" />
+                <Database strokeWidth={1.5} className="w-3 h-3 text-blue-400 shrink-0" />
                 <span className="truncate text-xs font-medium">
                   {activeConnection ? activeConnection.name : 'Select DB'}
                 </span>
-                <ChevronDown className="w-3 h-3 text-zinc-500 shrink-0" />
+                <ChevronDown strokeWidth={1.5} className="w-3 h-3 text-zinc-500 shrink-0" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start" className="w-64 bg-[#0d0d0d] border-white/10">
               {connections.length === 0 ? (
                 <DropdownMenuItem onClick={onAddConnection} className="text-zinc-400 cursor-pointer">
-                  <Plus className="w-4 h-4 mr-2" /> Add Connection
+                  <Plus strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" /> Add Connection
                 </DropdownMenuItem>
               ) : (
                 <>
@@ -110,7 +110,7 @@ export function StudioMobileHeader({
                         activeConnection?.id === c.id && "bg-blue-600/20 text-blue-400"
                       )}
                     >
-                      <Database className="w-4 h-4 mr-2" />
+                      <Database strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" />
                       <span className="truncate">{c.name}</span>
                       {activeConnection?.id === c.id && (
                         <div className="ml-auto w-1.5 h-1.5 rounded-full bg-blue-500" />
@@ -121,7 +121,7 @@ export function StudioMobileHeader({
                     onClick={onAddConnection}
                     className="text-zinc-500 cursor-pointer border-t border-white/5 mt-1"
                   >
-                    <Plus className="w-4 h-4 mr-2" /> Add New
+                    <Plus strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" /> Add New
                   </DropdownMenuItem>
                 </>
               )}
@@ -142,7 +142,7 @@ export function StudioMobileHeader({
             className="h-8 w-8 p-0 text-zinc-500 hover:text-purple-400"
             onClick={() => router.push('/monitoring')}
           >
-            <Gauge className="w-4 h-4" />
+            <Gauge strokeWidth={1.5} className="w-3.5 h-3.5" />
           </Button>
           {connectionPulse && (
             <div className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-white/5" title={`Connection: ${connectionPulse}`}>
@@ -158,21 +158,21 @@ export function StudioMobileHeader({
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-                  <User className="w-4 h-4 text-zinc-400" />
+                  <User strokeWidth={1.5} className="w-3.5 h-3.5 text-zinc-400" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="bg-[#0d0d0d] border-white/10">
                 {isAdmin && (
                   <DropdownMenuItem onClick={() => router.push('/admin')} className="cursor-pointer">
-                    <Settings className="w-4 h-4 mr-2" /> Admin Dashboard
+                    <Settings strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" /> Admin Dashboard
                   </DropdownMenuItem>
                 )}
                 <DropdownMenuItem onClick={() => router.push('/monitoring')} className="cursor-pointer">
-                  <Gauge className="w-4 h-4 mr-2" /> Monitoring
+                  <Gauge strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" /> Monitoring
                 </DropdownMenuItem>
                 <div className="border-t border-white/5 my-1" />
                 <DropdownMenuItem onClick={onLogout} className="text-red-400 cursor-pointer">
-                  <LogOut className="w-4 h-4 mr-2" /> Logout
+                  <LogOut strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" /> Logout
                 </DropdownMenuItem>
                 <div className="border-t border-white/5 mt-1 pt-1 px-2 pb-1">
                   <span className="text-xs text-zinc-500 font-mono">v{process.env.NEXT_PUBLIC_APP_VERSION}</span>
@@ -193,14 +193,14 @@ export function StudioMobileHeader({
               className="h-7 px-2 gap-1 text-xs font-medium text-zinc-500 hover:text-blue-400"
               onClick={() => queryEditorRef.current?.toggleAi()}
             >
-              <Sparkles className="w-3.5 h-3.5" />
+              <Sparkles strokeWidth={1.5} className="w-3 h-3" />
               AI
             </Button>
 
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button variant="ghost" size="sm" className="h-7 px-2 gap-1 text-xs text-zinc-500">
-                  <MoreVertical className="w-3.5 h-3.5" />
+                  <MoreVertical strokeWidth={1.5} className="w-3 h-3" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start" className="bg-[#0d0d0d] border-white/10 w-48">
@@ -208,7 +208,7 @@ export function StudioMobileHeader({
                   onClick={() => queryEditorRef.current?.format()}
                   className="cursor-pointer text-xs"
                 >
-                  <AlignLeft className="w-4 h-4 mr-2" /> Format SQL
+                  <AlignLeft strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" /> Format SQL
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   onClick={() => {
@@ -217,19 +217,19 @@ export function StudioMobileHeader({
                   }}
                   className="cursor-pointer text-xs"
                 >
-                  <Copy className="w-4 h-4 mr-2" /> Copy Query
+                  <Copy strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" /> Copy Query
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   onClick={onClearQuery}
                   className="cursor-pointer text-xs text-red-400"
                 >
-                  <Trash2 className="w-4 h-4 mr-2" /> Clear
+                  <Trash2 strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" /> Clear
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   onClick={onSaveQuery}
                   className="cursor-pointer text-xs"
                 >
-                  <Save className="w-4 h-4 mr-2" /> Save Query
+                  <Save strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" /> Save Query
                 </DropdownMenuItem>
 
                 {onExplain && (
@@ -239,7 +239,7 @@ export function StudioMobileHeader({
                       onClick={onExplain}
                       className="cursor-pointer text-xs text-amber-400"
                     >
-                      <Zap className="w-4 h-4 mr-2" /> Explain Plan
+                      <Zap strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" /> Explain Plan
                     </DropdownMenuItem>
                   </>
                 )}
@@ -255,7 +255,7 @@ export function StudioMobileHeader({
                     className="cursor-pointer text-xs"
                     disabled={!activeConnection}
                   >
-                    <PlayCircle className="w-4 h-4 mr-2" /> BEGIN Transaction
+                    <PlayCircle strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" /> BEGIN Transaction
                   </DropdownMenuItem>
                 ) : (
                   <>
@@ -263,13 +263,13 @@ export function StudioMobileHeader({
                       onClick={onCommitTransaction}
                       className="cursor-pointer text-xs text-emerald-400"
                     >
-                      <PlayCircle className="w-4 h-4 mr-2" /> COMMIT
+                      <PlayCircle strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" /> COMMIT
                     </DropdownMenuItem>
                     <DropdownMenuItem
                       onClick={onRollbackTransaction}
                       className="cursor-pointer text-xs text-red-400"
                     >
-                      <PlayCircle className="w-4 h-4 mr-2" /> ROLLBACK
+                      <PlayCircle strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" /> ROLLBACK
                     </DropdownMenuItem>
                   </>
                 )}
@@ -278,7 +278,7 @@ export function StudioMobileHeader({
                   onClick={onTogglePlayground}
                   className="cursor-pointer text-xs"
                 >
-                  <Pencil className="w-4 h-4 mr-2" />
+                  <Pencil strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" />
                   {playgroundMode ? 'Disable Sandbox' : 'Enable Sandbox'}
                 </DropdownMenuItem>
 
@@ -286,7 +286,7 @@ export function StudioMobileHeader({
                   onClick={onToggleEditing}
                   className="cursor-pointer text-xs"
                 >
-                  <Edit3 className="w-4 h-4 mr-2" />
+                  <Edit3 strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" />
                   {editingEnabled ? 'Disable Editing' : 'Enable Editing'}
                 </DropdownMenuItem>
 
@@ -295,7 +295,7 @@ export function StudioMobileHeader({
                   className="cursor-pointer text-xs"
                   disabled={!activeConnection}
                 >
-                  <Upload className="w-4 h-4 mr-2" /> Import Data
+                  <Upload strokeWidth={1.5} className="w-3.5 h-3.5 mr-2" /> Import Data
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -319,7 +319,7 @@ export function StudioMobileHeader({
               className="bg-red-600 hover:bg-red-500 text-white font-medium text-xs h-7 px-4 gap-1.5"
               onClick={onCancelQuery}
             >
-              <Square className="w-3 h-3 fill-current" />
+              <Square strokeWidth={1.5} className="w-3 h-3 fill-current" />
               CANCEL
             </Button>
           ) : (
@@ -329,7 +329,7 @@ export function StudioMobileHeader({
               onClick={onExecuteQuery}
               disabled={!activeConnection}
             >
-              <Play className="w-3 h-3 fill-current" />
+              <Play strokeWidth={1.5} className="w-3 h-3 fill-current" />
               RUN
             </Button>
           )}
diff --git a/src/components/studio/StudioTabBar.tsx b/src/components/studio/StudioTabBar.tsx
index 8c7a423..2d46d4e 100644
--- a/src/components/studio/StudioTabBar.tsx
+++ b/src/components/studio/StudioTabBar.tsx
@@ -45,7 +45,7 @@ export function StudioTabBar({
             activeTabId === tab.id ? "bg-[#141414] text-zinc-100 border-blue-500" : "text-zinc-500 hover:bg-white/5 border-transparent"
           )}
         >
-          {tab.type === 'sql' ? <Hash className="w-3 h-3" /> : <FileJson className="w-3 h-3" />}
+          {tab.type === 'sql' ? <Hash strokeWidth={1.5} className="w-3 h-3" /> : <FileJson strokeWidth={1.5} className="w-3 h-3" />}
           {editingTabId === tab.id ? (
             <input
               autoFocus
@@ -73,10 +73,10 @@ export function StudioTabBar({
           ) : (
             <span className="text-xs truncate font-medium">{tab.name}</span>
           )}
-          {tabs.length > 1 && <X className="w-3 h-3 ml-auto opacity-0 group-hover:opacity-100 hover:text-white shrink-0" onClick={(e) => onCloseTab(tab.id, e)} />}
+          {tabs.length > 1 && <X strokeWidth={1.5} className="w-3 h-3 ml-auto opacity-0 group-hover:opacity-100 hover:text-white shrink-0" onClick={(e) => onCloseTab(tab.id, e)} />}
         </div>
       ))}
-      <Plus className="w-4 h-4 text-zinc-500 cursor-pointer hover:text-white mx-2" onClick={onAddTab} />
+      <Plus strokeWidth={1.5} className="w-3.5 h-3.5 text-zinc-500 cursor-pointer hover:text-white mx-2" onClick={onAddTab} />
     </div>
   );
 }
diff --git a/src/workspace/StudioWorkspace.tsx b/src/workspace/StudioWorkspace.tsx
index 30f32c9..4bd448f 100644
--- a/src/workspace/StudioWorkspace.tsx
+++ b/src/workspace/StudioWorkspace.tsx
@@ -383,7 +383,7 @@ export function StudioWorkspace({
                     />
                   ) : (
                     <div className="flex flex-col items-center justify-center h-full text-zinc-500">
-                      <Database className="w-12 h-12 mb-4 opacity-30" />
+                      <Database strokeWidth={1.5} className="w-12 h-12 mb-4 opacity-30" />
                       <p className="text-xs">Select a connection first</p>
                     </div>
                   )}
@@ -562,7 +562,7 @@ export function StudioWorkspace({
           <div className="px-6 pt-6 pb-4">
             <div className="flex items-start gap-3">
               <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500/20 to-red-500/10 flex items-center justify-center shrink-0">
-                <AlertTriangle className="w-5 h-5 text-amber-400" />
+                <AlertTriangle strokeWidth={1.5} className="w-5 h-5 text-amber-400" />
               </div>
               <div className="flex-1 min-w-0">
                 <AlertDialogTitle className="text-xs font-medium text-zinc-100 mb-1">

From 3f6cfa4aa8ab8de0dd9340d0b10d3f58c0226657 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Fri, 27 Mar 2026 16:14:11 +0300
Subject: [PATCH 36/39] docs: enhance CLAUDE.md with critical platform
 integration rules and guidelines

Updated CLAUDE.md to include essential platform integration rules for the npm package `@libredb/studio`, emphasizing the importance of adhering to Tailwind CSS and component usage standards to prevent silent style/layout issues when embedded in libredb-platform. Added detailed sections on Tailwind CSS rules, Lucide icon usage, component guidelines, and verification workflows to ensure consistency and reliability across both standalone and embedded modes.
---
 CLAUDE.md | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/CLAUDE.md b/CLAUDE.md
index ea1c5c6..5326c4e 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -2,10 +2,16 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
+> **CRITICAL: This project is published as an npm package (`@libredb/studio`) and consumed by `libredb-platform`.**
+> Every CSS class, Tailwind utility, icon prop, and component choice MUST follow the Platform Integration Rules below.
+> Violations cause silent style/layout breakage that only appears when embedded in platform — not in standalone studio.
+
 ## Project Overview
 
 LibreDB Studio is a web-based SQL IDE for cloud-native teams. It supports PostgreSQL, MySQL, SQLite, Oracle, SQL Server, MongoDB, Redis with AI-powered query assistance.
 
+**Dual usage:** Studio runs both as a standalone Next.js app AND as an embedded npm package inside libredb-platform. The `build:lib` command (tsup) produces the package dist. Any UI change must be verified in both modes.
+
 ## Github
 * Repository: https://github.com/libredb/libredb-studio
 * Container Registry: https://github.com/libredb/libredb-studio/pkgs/container/libredb-studio
@@ -66,6 +72,51 @@ The project uses ESLint 9 for linting and `bun:test` for testing with `@testing-
 
 > **Important**: Always use `bun run test` instead of bare `bun test`. Component tests require isolated execution groups (handled by `tests/run-components.sh`) to prevent `mock.module()` cross-contamination between test files.
 
+## Platform Integration Rules (npm package @libredb/studio)
+
+Studio is consumed by libredb-platform as an npm package via `build:lib` (tsup). These rules prevent silent style/layout breakage that only appears when embedded in platform.
+
+### Tailwind CSS Rules
+
+| Do | Don't | Why |
+|----|-------|-----|
+| `text-xs`, `text-sm` (standard) | `text-body`, `text-data` (custom @theme) | `tailwind-merge` strips custom tokens silently |
+| `text-[0.625rem]` (arbitrary value) | `text-label` (custom @theme) | Arbitrary values are twMerge-safe |
+| `font-medium`, `font-normal` | `font-bold` everywhere | Studio is compact IDE, lighter weights |
+| `w-3 h-3`, `w-3.5 h-3.5` (icons) | `w-4 h-4` or larger | Studio icons smaller than platform |
+
+**Never define custom text tokens in `@theme` block.** `tailwind-merge` (used in `cn()`) interprets `text-body` as a color utility, not font-size. When combined with `text-muted-foreground`, twMerge silently removes `text-body` → no font-size applied → browser default 16px. This bug is invisible in standalone studio (Tailwind generates the CSS) but breaks embedded mode.
+
+### Lucide Icon Rules
+
+Always pass `strokeWidth={1.5}` to every Lucide icon:
+```tsx
+<Lock strokeWidth={1.5} className="w-3 h-3" />
+```
+Lucide defaults to `strokeWidth=2` and emits `width="24" height="24"` HTML attributes. Custom DB icons use `strokeWidth=1.5` without HTML size attributes. Without this prop, Lucide icons appear thicker and potentially larger than custom icons.
+
+### Component Rules
+
+- **Small icon buttons:** Use plain `<button className="p-1 rounded ...">` instead of shadcn `<Button size="icon">`. Platform's Button CSS can override studio's size classes due to specificity.
+- **Responsive classes:** `md:hidden`, `hidden md:block` etc. must work. If a component is in a tsup chunk, verify platform's `@source` scans that chunk.
+
+### Platform-Side Requirements
+
+Platform's `globals.css` must scan ALL studio dist files (tsup creates chunks):
+```css
+@source "../../node_modules/@libredb/studio/dist/workspace.mjs";
+@source "../../node_modules/@libredb/studio/dist/chunk-*.mjs";
+```
+Without chunk scanning, responsive/utility classes in chunked components won't generate CSS.
+
+### Verification Workflow
+
+After any UI change in studio:
+1. `bun run build:lib` — rebuild tsup dist
+2. `cp -r dist/* ../libredb-platform/node_modules/@libredb/studio/dist/` — copy to platform
+3. `rm -rf ../libredb-platform/.next` — clear platform cache (for CSS changes)
+4. Restart platform dev server and verify at `localhost:3000/workspace`
+
 ## Architecture
 
 ### Tech Stack

From 9ccdf5ef18d5525031a13ae74b0a4bfa480e08bb Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Fri, 27 Mar 2026 16:23:43 +0300
Subject: [PATCH 37/39] ci: add platform integration check workflow

Automated CI checks to prevent silent style/layout breakage when studio
is consumed as npm package by libredb-platform:

- No custom @theme text tokens (twMerge strips them silently)
- No custom text-* class usage in components
- Lucide icons strokeWidth consistency check
- No shadcn Button size=icon in sidebar/explorer
- Dist chunk responsive class coverage analysis

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .github/workflows/integration-check.yml | 91 +++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 .github/workflows/integration-check.yml

diff --git a/.github/workflows/integration-check.yml b/.github/workflows/integration-check.yml
new file mode 100644
index 0000000..e9c29b9
--- /dev/null
+++ b/.github/workflows/integration-check.yml
@@ -0,0 +1,91 @@
+name: Platform Integration Check
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+permissions:
+  contents: read
+
+jobs:
+  integration-rules:
+    name: Platform Integration Rules
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2
+        with:
+          bun-version: "1.3.9"
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Build library dist
+        run: bun run build:lib
+
+      - name: Check — No custom @theme text tokens
+        run: |
+          echo "Checking globals.css for custom text tokens..."
+          if grep -E '^\s*--text-[a-z]+:' src/app/globals.css | grep -v 'font-'; then
+            echo "::error::Custom text tokens found in @theme. tailwind-merge will silently strip these."
+            echo "Use standard Tailwind classes (text-xs, text-sm) or arbitrary values (text-[0.625rem]) instead."
+            exit 1
+          fi
+          echo "✓ No custom text tokens"
+
+      - name: Check — No custom text-* classes in components
+        run: |
+          echo "Checking for custom text token usage in components..."
+          CUSTOM=$(grep -rn '\btext-body\b\|\btext-data\b\|\btext-label\b\|\btext-title\b\|\btext-micro\b\|\btext-caption\b' \
+            src/components/ src/workspace/ --include="*.tsx" || true)
+          if [ -n "$CUSTOM" ]; then
+            echo "::error::Custom text tokens used in components. twMerge strips these silently."
+            echo "$CUSTOM"
+            exit 1
+          fi
+          echo "✓ No custom text token usage"
+
+      - name: Check — Lucide icons have strokeWidth
+        run: |
+          echo "Checking Lucide icons for strokeWidth prop..."
+          MISSING=$(grep -rn '<[A-Z][a-zA-Z]* className="w-' src/components/ src/workspace/ --include="*.tsx" \
+            | grep -v 'admin/' | grep -v 'ui/' \
+            | grep -v 'strokeWidth' \
+            | grep -v '<Button\|<Input\|<Label\|<Card\|<Dialog\|<Alert\|<Select\|<Textarea\|<Badge\|<Tooltip\|<Popover\|<Sheet\|<Tabs\|<Table\|<Drawer' \
+            | grep -v 'svg\|div\|span\|motion' || true)
+          if [ -n "$MISSING" ]; then
+            echo "::warning::Lucide icons without strokeWidth={1.5} found. These may render with inconsistent stroke weight."
+            echo "$MISSING" | head -20
+          fi
+          echo "✓ Lucide strokeWidth check complete"
+
+      - name: Check — No shadcn Button size=icon in sidebar/explorer
+        run: |
+          echo "Checking for shadcn Button in compact areas..."
+          BUTTONS=$(grep -rn 'size="icon"' \
+            src/components/sidebar/ src/components/schema-explorer/ --include="*.tsx" || true)
+          if [ -n "$BUTTONS" ]; then
+            echo "::error::shadcn Button size='icon' in sidebar/explorer. Use plain <button> to avoid platform CSS conflicts."
+            echo "$BUTTONS"
+            exit 1
+          fi
+          echo "✓ No Button size=icon in compact areas"
+
+      - name: Check — Dist chunks contain expected classes
+        run: |
+          echo "Checking dist for responsive class coverage..."
+          ALL_MD=$(grep -roh 'md:[a-z-]*' dist/*.mjs | sort -u)
+          WORKSPACE_MD=$(grep -roh 'md:[a-z-]*' dist/workspace.mjs | sort -u)
+          ONLY_IN_CHUNKS=$(comm -23 <(echo "$ALL_MD") <(echo "$WORKSPACE_MD"))
+          if [ -n "$ONLY_IN_CHUNKS" ]; then
+            echo "::notice::Responsive classes found only in chunks (not workspace.mjs):"
+            echo "$ONLY_IN_CHUNKS"
+            echo "Platform must scan chunk-*.mjs via @source directive."
+          fi
+          echo "✓ Dist chunk analysis complete"

From 91922bcb4cf149a969dec4518a5c7a4a60111e66 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Fri, 27 Mar 2026 16:27:05 +0300
Subject: [PATCH 38/39] fix: replace shadcn Button with plain button in
 TableItem
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes platform integration CI check — shadcn Button size="icon" in
schema-explorer causes CSS specificity conflicts when embedded in platform.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/schema-explorer/TableItem.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/schema-explorer/TableItem.tsx b/src/components/schema-explorer/TableItem.tsx
index 06e3a05..597c2cb 100644
--- a/src/components/schema-explorer/TableItem.tsx
+++ b/src/components/schema-explorer/TableItem.tsx
@@ -14,7 +14,6 @@ import {
   BarChart3,
   Wand2,
 } from 'lucide-react';
-import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
@@ -171,14 +170,12 @@ export const TableItem = React.memo(function TableItem({
               )}
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="absolute inset-0 w-full h-full opacity-0 group-hover:opacity-100 [@media(hover:none)]:opacity-100 focus-within:opacity-100 transition-opacity hover:bg-accent"
+                  <button
+                    className="absolute inset-0 w-full h-full opacity-0 group-hover:opacity-100 [@media(hover:none)]:opacity-100 focus-within:opacity-100 transition-opacity hover:bg-accent flex items-center justify-center"
                     onClick={(e) => e.stopPropagation()}
                   >
                     <MoreVertical strokeWidth={1.5} className="w-3.5 h-3.5 text-muted-foreground group-hover:text-foreground" />
-                  </Button>
+                  </button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-48">
                   {renderMenuItems(table, labels, isAdmin, callbacks, copyToClipboard, DropdownMenuItem, DropdownMenuSeparator)}

From a7a5dd699a34e9818e197d23dc623bad8bc5b7f1 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Fri, 27 Mar 2026 16:33:41 +0300
Subject: [PATCH 39/39] fix(tests): update selectors for font and icon changes

- QueryHistory: use .lucide-x selector instead of .w-3.h-3
- SchemaDiagram: update .font-bold to .font-medium after weight reduction

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 tests/components/QueryHistory.test.tsx  | 4 ++--
 tests/components/SchemaDiagram.test.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/components/QueryHistory.test.tsx b/tests/components/QueryHistory.test.tsx
index 23364a9..f719c96 100644
--- a/tests/components/QueryHistory.test.tsx
+++ b/tests/components/QueryHistory.test.tsx
@@ -327,8 +327,8 @@ describe('QueryHistory', () => {
     // Only one item visible
     expect(view.queryByText('DROP TABLE bad')).toBeNull();
 
-    // Click the X clear button
-    const clearSearchButton = container.querySelector('button .w-3.h-3')?.closest('button');
+    // Click the X clear button (find the button near the search input)
+    const clearSearchButton = container.querySelector('.lucide-x')?.closest('button');
     expect(clearSearchButton).not.toBeNull();
     await user.click(clearSearchButton!);
 
diff --git a/tests/components/SchemaDiagram.test.tsx b/tests/components/SchemaDiagram.test.tsx
index 767f4b5..8821591 100644
--- a/tests/components/SchemaDiagram.test.tsx
+++ b/tests/components/SchemaDiagram.test.tsx
@@ -775,7 +775,7 @@ describe('SchemaDiagram', () => {
       // Selection should appear with selected node name and clear button
       expect(view.queryByText('Selected:')).not.toBeNull();
       // The selected table name appears in a font-mono span
-      const selectedSpan = container.querySelector('.font-mono.font-bold');
+      const selectedSpan = container.querySelector('.font-mono.font-medium');
       expect(selectedSpan).not.toBeNull();
       expect(selectedSpan!.textContent).toBe('users');
       expect(view.queryByText('clear')).not.toBeNull();