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 01/22] 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 02/22] 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 03/22] 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 04/22] 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 05/22] 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 06/22] 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 07/22] 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 08/22] 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 09/22] 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 10/22] 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 11/22] 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 12/22] 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 13/22] 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 14/22] 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 15/22] 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 16/22] 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 17/22] 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 18/22] 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 19/22] 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 20/22] 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 21/22] 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 22/22] 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');
   });