diff --git a/.kilocode/mcp.json b/.kilocode/mcp.json
new file mode 100644
index 0000000..7001130
--- /dev/null
+++ b/.kilocode/mcp.json
@@ -0,0 +1,3 @@
+{
+  "mcpServers": {}
+}
\ No newline at end of file
diff --git a/betterbase/apps/dashboard/src/app/(dashboard)/api-explorer/page.tsx b/betterbase/apps/dashboard/src/app/(dashboard)/api-explorer/page.tsx
index ea5b3ac..405adfa 100644
--- a/betterbase/apps/dashboard/src/app/(dashboard)/api-explorer/page.tsx
+++ b/betterbase/apps/dashboard/src/app/(dashboard)/api-explorer/page.tsx
@@ -1,13 +1,727 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useMutation } from '@tanstack/react-query';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import {
+  Code,
+  Play,
+  Copy,
+  Check,
+  Clock,
+  AlertCircle,
+  ChevronDown,
+  ChevronRight,
+  Trash2,
+  History,
+  Terminal,
+  FileCode,
+} from 'lucide-react';
+
+// Types
+type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+
+interface ApiRequest {
+  method: HttpMethod;
+  path: string;
+  body: string;
+  queryParams: { key: string; value: string }[];
+}
+
+interface ApiResponse {
+  status: number;
+  statusText: string;
+  data: unknown;
+  time: number;
+  headers: Record<string, string>;
+}
+
+interface HistoryItem extends ApiRequest {
+  id: string;
+  timestamp: number;
+  response?: {
+    status: number;
+    statusText: string;
+    data: unknown;
+    time: number;
+  };
+}
+
+// Available endpoints for the browser
+const ENDPOINT_CATEGORIES = [
+  {
+    name: 'Tables',
+    icon: 'Database',
+    endpoints: [
+      { method: 'GET' as HttpMethod, path: '/rest/v1/users', description: 'List all users' },
+      { method: 'GET' as HttpMethod, path: '/rest/v1/posts', description: 'List all posts' },
+      { method: 'POST' as HttpMethod, path: '/rest/v1/users', description: 'Create a user' },
+      { method: 'POST' as HttpMethod, path: '/rest/v1/posts', description: 'Create a post' },
+    ],
+  },
+  {
+    name: 'Auth',
+    icon: 'Lock',
+    endpoints: [
+      { method: 'POST' as HttpMethod, path: '/auth/v1/signup', description: 'Sign up a new user' },
+      { method: 'POST' as HttpMethod, path: '/auth/v1/login', description: 'Login a user' },
+      { method: 'GET' as HttpMethod, path: '/auth/v1/user', description: 'Get current user' },
+      { method: 'POST' as HttpMethod, path: '/auth/v1/logout', description: 'Logout current user' },
+    ],
+  },
+  {
+    name: 'Functions',
+    icon: 'Code',
+    endpoints: [
+      { method: 'POST' as HttpMethod, path: '/functions/v1/hello', description: 'Hello world function' },
+      { method: 'POST' as HttpMethod, path: '/functions/v1/send-email', description: 'Send email function' },
+    ],
+  },
+  {
+    name: 'Storage',
+    icon: 'Folder',
+    endpoints: [
+      { method: 'GET' as HttpMethod, path: '/storage/v1/buckets', description: 'List buckets' },
+      { method: 'POST' as HttpMethod, path: '/storage/v1/buckets', description: 'Create a bucket' },
+    ],
+  },
+];
+
+const HTTP_METHOD_COLORS: Record<HttpMethod, string> = {
+  GET: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
+  POST: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
+  PUT: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
+  PATCH: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400',
+  DELETE: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
+};
+
+const HISTORY_KEY = 'betterbase-api-explorer-history';
+const MAX_HISTORY_ITEMS = 20;
+
+export default function ApiExplorerPage() {
+  // Request state
+  const [method, setMethod] = useState<HttpMethod>('GET');
+  const [path, setPath] = useState('/rest/v1/users');
+  const [body, setBody] = useState('{\n  \n}');
+  const [queryParams, setQueryParams] = useState<{ key: string; value: string }[]>([]);
+  const [response, setResponse] = useState<ApiResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // UI state
+  const [copied, setCopied] = useState(false);
+  const [expandedCategories, setExpandedCategories] = useState<string[]>(['Tables']);
+  const [showHistory, setShowHistory] = useState(false);
+  const [history, setHistory] = useState<HistoryItem[]>([]);
+  const [activeTab, setActiveTab] = useState<'response' | 'curl' | 'js' | 'ts'>('response');
+
+  // Load history from localStorage
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(HISTORY_KEY);
+      if (stored) {
+        setHistory(JSON.parse(stored) as HistoryItem[]);
+      }
+    } catch {
+      // Ignore parsing errors
+    }
+  }, []);
+
+  // Save history to localStorage
+  const saveHistory = useCallback((newHistory: HistoryItem[]) => {
+    setHistory(newHistory);
+    try {
+      localStorage.setItem(HISTORY_KEY, JSON.stringify(newHistory));
+    } catch {
+      // Ignore storage errors
+    }
+  }, []);
+
+  // API call mutation
+  const { mutate: executeRequest, isPending } = useMutation({
+    mutationFn: async () => {
+      const startTime = performance.now();
+      const baseUrl = process.env.NEXT_PUBLIC_BETTERBASE_URL || 'http://localhost:3000';
+
+      // Build URL with query params
+      const url = new URL(`${baseUrl}${path}`);
+      queryParams.forEach(({ key, value }) => {
+        if (key.trim()) {
+          url.searchParams.append(key, value);
+        }
+      });
+
+      // Parse body for non-GET requests
+      let bodyData: string | undefined;
+      if (method !== 'GET' && body.trim()) {
+        bodyData = body;
+      }
+
+      // Get token from localStorage
+      const token = typeof window !== 'undefined' ? localStorage.getItem('betterbase_token') : null;
+
+      const response = await fetch(url.toString(), {
+        method,
+        headers: {
+          'Content-Type': 'application/json',
+          ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        },
+        body: bodyData,
+      });
+
+      const endTime = performance.now();
+      const responseData = await response.json().catch(() => null);
+
+      // Extract headers
+      const headers: Record<string, string> = {};
+      response.headers.forEach((value, key) => {
+        headers[key] = value;
+      });
+
+      return {
+        status: response.status,
+        statusText: response.statusText,
+        data: responseData,
+        time: Math.round(endTime - startTime),
+        headers,
+      };
+    },
+    onSuccess: (data) => {
+      setResponse(data);
+      setError(null);
+
+      // Add to history using functional updater to avoid stale closure
+      const historyItem: HistoryItem = {
+        id: crypto.randomUUID(),
+        method,
+        path,
+        body,
+        queryParams,
+        timestamp: Date.now(),
+        response: {
+          status: data.status,
+          statusText: data.statusText,
+          data: data.data,
+          time: data.time,
+        },
+      };
+
+      // Use functional updater to get latest history state
+      setHistory((currentHistory) => {
+        const newHistory = [historyItem, ...currentHistory].slice(0, MAX_HISTORY_ITEMS);
+        saveHistory(newHistory);
+        return newHistory;
+      });
+    },
+    onError: (err) => {
+      setError(err instanceof Error ? err.message : 'Request failed');
+      setResponse(null);
+    },
+  });
+
+  // Add query parameter
+  const addQueryParam = () => {
+    setQueryParams([...queryParams, { key: '', value: '' }]);
+  };
+
+  // Update query parameter
+  const updateQueryParam = (index: number, field: 'key' | 'value', value: string) => {
+    const updated = [...queryParams];
+    updated[index][field] = value;
+    setQueryParams(updated);
+  };
+
+  // Remove query parameter
+  const removeQueryParam = (index: number) => {
+    setQueryParams(queryParams.filter((_, i) => i !== index));
+  };
+
+  // Toggle category expansion
+  const toggleCategory = (name: string) => {
+    setExpandedCategories((prev) =>
+      prev.includes(name) ? prev.filter((c) => c !== name) : [...prev, name]
+    );
+  };
+
+  // Select endpoint from browser
+  const selectEndpoint = (endpointMethod: HttpMethod, endpointPath: string) => {
+    setMethod(endpointMethod);
+    setPath(endpointPath);
+    setBody(endpointMethod === 'GET' ? '{\n  \n}' : '{\n  "data": {}\n}');
+    setQueryParams([]);
+    setResponse(null);
+    setError(null);
+  };
+
+  // Load from history
+  const loadFromHistory = (item: HistoryItem) => {
+    setMethod(item.method);
+    setPath(item.path);
+    setBody(item.body);
+    setQueryParams(item.queryParams);
+    if (item.response) {
+      setResponse({
+        status: item.response.status,
+        statusText: item.response.statusText,
+        data: item.response.data,
+        time: item.response.time,
+        headers: {},
+      });
+    }
+    setError(null);
+    setShowHistory(false);
+  };
+
+  // Clear history
+  const clearHistory = () => {
+    saveHistory([]);
+  };
+
+  // Copy to clipboard
+  const copyToClipboard = async (text: string) => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  // Generate code snippets
+  const generateCurl = () => {
+    const baseUrl = process.env.NEXT_PUBLIC_BETTERBASE_URL || 'http://localhost:3000';
+    const queryString = queryParams
+      .filter((p) => p.key.trim())
+      .map((p) => `${encodeURIComponent(p.key)}=${encodeURIComponent(p.value)}`)
+      .join('&');
+    const fullUrl = `${baseUrl}${path}${queryString ? `?${queryString}` : ''}`;
+
+    let curl = `curl -X ${method} "${fullUrl}" \\
+  -H "Content-Type: application/json"`;
+
+    if (method !== 'GET' && body.trim()) {
+      const escapedBody = body.replace(/'/g, "'\\''");
+      curl += ` \\
+  -d '${escapedBody}'`;
+    }
+
+    return curl;
+  };
+
+  const generateJs = () => {
+    const baseUrl = process.env.NEXT_PUBLIC_BETTERBASE_URL || 'http://localhost:3000';
+    const queryString = queryParams
+      .filter((p) => p.key.trim())
+      .map((p) => `${encodeURIComponent(p.key)}=${encodeURIComponent(p.value)}`)
+      .join('&');
+    const fullUrl = `${baseUrl}${path}${queryString ? `?${queryString}` : ''}`;
+
+    return `const response = await fetch("${fullUrl}", {
+  method: "${method}",
+  headers: {
+    "Content-Type": "application/json",
+  },${method !== 'GET' && body.trim() ? `\n  body: JSON.stringify(${body}),` : ''}
+});
+
+const data = await response.json();
+console.log(data);`;
+  };
+
+  const generateTs = () => {
+    const baseUrl = process.env.NEXT_PUBLIC_BETTERBASE_URL || 'http://localhost:3000';
+    const queryString = queryParams
+      .filter((p) => p.key.trim())
+      .map((p) => `${encodeURIComponent(p.key)}=${encodeURIComponent(p.value)}`)
+      .join('&');
+    const fullUrl = `${baseUrl}${path}${queryString ? `?${queryString}` : ''}`;
+
+    const tableName = path.replace('/rest/v1/', '');
+
+    // Generate appropriate QueryBuilder method based on HTTP verb
+    let queryMethod: string;
+    switch (method) {
+      case 'GET':
+        queryMethod = `.from("${tableName}").select().execute()`;
+        break;
+      case 'POST':
+        queryMethod = `.from("${tableName}").insert(${body})`;
+        break;
+      case 'PUT':
+      case 'PATCH':
+        queryMethod = `.from("${tableName}").update("id", ${body})`;
+        break;
+      case 'DELETE':
+        queryMethod = `.from("${tableName}").delete("id")`;
+        break;
+      default:
+        queryMethod = '';
+    }
+
+    return `import { createClient } from '@betterbase/client';
+
+const client = createClient({
+  url: "${baseUrl}",
+});
+
+// Using the client
+${path.startsWith('/rest/v1/')
+  ? `const { data, error } = await client
+  .from("${tableName}")
+  ${queryMethod};
+
+if (error) {
+  console.error('Error:', error);
+} else {
+  console.log('Data:', data);
+}`
+  : `// Direct fetch for ${path}
+const response = await fetch("${fullUrl}", {
+  method: "${method}",
+  headers: {
+    "Content-Type": "application/json",
+  },${method !== 'GET' && body.trim() ? `\n  body: JSON.stringify(${body}),` : ''}
+});
+
+const data = await response.json();`}`;
+  };
+
+  const getCodeSnippet = () => {
+    switch (activeTab) {
+      case 'curl':
+        return generateCurl();
+      case 'js':
+        return generateJs();
+      case 'ts':
+        return generateTs();
+      default:
+        return '';
+    }
+  };
 
-export default function ApiPage() {
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>API Explorer</CardTitle>
-        <CardDescription>Inspect generated endpoints and test requests.</CardDescription>
-      </CardHeader>
-      <CardContent className="text-sm text-zinc-600 dark:text-zinc-400">API explorer ships in Phase 9.3.</CardContent>
-    </Card>
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-3xl font-bold tracking-tight">API Explorer</h2>
+          <p className="text-zinc-600 dark:text-zinc-400">
+            Explore and test your BetterBase API endpoints.
+          </p>
+        </div>
+        <Button
+          variant="outline"
+          onClick={() => setShowHistory(!showHistory)}
+          className="gap-2"
+        >
+          <History className="h-4 w-4" />
+          History ({history.length})
+        </Button>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-4">
+        {/* Endpoint Browser */}
+        <Card className="lg:col-span-1">
+          <CardHeader>
+            <CardTitle className="text-lg">Endpoints</CardTitle>
+            <CardDescription>Browse available API endpoints</CardDescription>
+          </CardHeader>
+          <CardContent className="max-h-[600px] overflow-y-auto">
+            <div className="space-y-2">
+              {ENDPOINT_CATEGORIES.map((category) => (
+                <div key={category.name}>
+                  <button
+                    type="button"
+                    onClick={() => toggleCategory(category.name)}
+                    className="flex w-full items-center justify-between rounded-lg p-2 text-left text-sm font-medium hover:bg-zinc-100 dark:hover:bg-zinc-800"
+                  >
+                    <span>{category.name}</span>
+                    {expandedCategories.includes(category.name) ? (
+                      <ChevronDown className="h-4 w-4" />
+                    ) : (
+                      <ChevronRight className="h-4 w-4" />
+                    )}
+                  </button>
+                  {expandedCategories.includes(category.name) && (
+                    <div className="ml-2 mt-1 space-y-1">
+                      {category.endpoints.map((endpoint) => (
+                        <button
+                          type="button"
+                          key={`${endpoint.method}-${endpoint.path}`}
+                          onClick={() => selectEndpoint(endpoint.method, endpoint.path)}
+                          className="flex w-full items-center gap-2 rounded-lg p-2 text-left text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800"
+                        >
+                          <span
+                            className={`rounded px-1.5 py-0.5 font-mono text-[10px] font-semibold ${HTTP_METHOD_COLORS[endpoint.method]}`}
+                          >
+                            {endpoint.method}
+                          </span>
+                          <span className="flex-1 truncate">{endpoint.path}</span>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Request Builder & Response */}
+        <div className="space-y-6 lg:col-span-3">
+          {/* Request Builder */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-lg">Request Builder</CardTitle>
+              <CardDescription>Build and execute API requests</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {/* Method and Path */}
+              <div className="flex gap-2">
+                <select
+                  value={method}
+                  onChange={(e) => setMethod(e.target.value as HttpMethod)}
+                  className="rounded-lg border border-zinc-200 bg-background px-3 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-primary dark:border-zinc-800"
+                >
+                  <option value="GET">GET</option>
+                  <option value="POST">POST</option>
+                  <option value="PUT">PUT</option>
+                  <option value="DELETE">DELETE</option>
+                </select>
+                <input
+                  type="text"
+                  value={path}
+                  onChange={(e) => setPath(e.target.value)}
+                  placeholder="/rest/v1/users"
+                  className="flex-1 rounded-lg border border-zinc-200 bg-background px-3 py-2 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary dark:border-zinc-800"
+                />
+                <Button
+                  onClick={() => executeRequest()}
+                  disabled={isPending}
+                  className="gap-2"
+                >
+                  <Play className="h-4 w-4" />
+                  {isPending ? 'Sending...' : 'Send'}
+                </Button>
+              </div>
+
+              {/* Query Parameters */}
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <label className="text-sm font-medium">Query Parameters</label>
+                  <Button variant="ghost" size="sm" onClick={addQueryParam} className="h-7 text-xs">
+                    + Add Parameter
+                  </Button>
+                </div>
+                {queryParams.length > 0 && (
+                  <div className="space-y-2">
+                    {queryParams.map((param, index) => (
+                      <div key={index} className="flex gap-2">
+                        <input
+                          type="text"
+                          value={param.key}
+                          onChange={(e) => updateQueryParam(index, 'key', e.target.value)}
+                          placeholder="Key"
+                          className="flex-1 rounded-lg border border-zinc-200 bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary dark:border-zinc-800"
+                        />
+                        <input
+                          type="text"
+                          value={param.value}
+                          onChange={(e) => updateQueryParam(index, 'value', e.target.value)}
+                          placeholder="Value"
+                          className="flex-1 rounded-lg border border-zinc-200 bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary dark:border-zinc-800"
+                        />
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => removeQueryParam(index)}
+                          className="h-8 w-8 text-zinc-500 hover:text-red-500"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* Request Body */}
+              {method !== 'GET' && (
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Request Body (JSON)</label>
+                  <textarea
+                    value={body}
+                    onChange={(e) => setBody(e.target.value)}
+                    rows={6}
+                    className="w-full rounded-lg border border-zinc-200 bg-background p-3 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary dark:border-zinc-800"
+                    placeholder='{"key": "value"}'
+                  />
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Response Viewer */}
+          <Card>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <div>
+                  <CardTitle className="text-lg">Response</CardTitle>
+                  <CardDescription>API response details</CardDescription>
+                </div>
+                {response && (
+                  <div className="flex items-center gap-4 text-sm">
+                    <div className="flex items-center gap-1.5">
+                      <Clock className="h-4 w-4 text-zinc-500" />
+                      <span>{response.time}ms</span>
+                    </div>
+                    <span
+                      className={`rounded-full px-2 py-0.5 text-xs font-medium ${
+                        response.status >= 200 && response.status < 300
+                          ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
+                          : response.status >= 400
+                          ? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+                          : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
+                      }`}
+                    >
+                      {response.status} {response.statusText}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </CardHeader>
+            <CardContent>
+              {/* Tabs */}
+              <div className="mb-4 flex gap-1 border-b border-zinc-200 dark:border-zinc-800">
+                {[
+                  { id: 'response', label: 'Response', icon: Code },
+                  { id: 'curl', label: 'cURL', icon: Terminal },
+                  { id: 'js', label: 'JavaScript', icon: FileCode },
+                  { id: 'ts', label: 'TypeScript', icon: FileCode },
+                ].map((tab) => (
+                  <button
+                    type="button"
+                    key={tab.id}
+                    onClick={() => setActiveTab(tab.id as typeof activeTab)}
+                    className={`flex items-center gap-1.5 border-b-2 px-3 py-2 text-sm font-medium transition-colors ${
+                      activeTab === tab.id
+                        ? 'border-primary text-primary'
+                        : 'border-transparent text-zinc-500 hover:border-zinc-300 hover:text-zinc-700 dark:hover:text-zinc-300'
+                    }`}
+                  >
+                    <tab.icon className="h-4 w-4" />
+                    {tab.label}
+                  </button>
+                ))}
+              </div>
+
+              {/* Content */}
+              <div className="relative">
+                {activeTab === 'response' ? (
+                  <>
+                    {error && (
+                      <div className="flex items-center gap-2 rounded-lg bg-red-50 p-4 text-red-800 dark:bg-red-900/20 dark:text-red-400">
+                        <AlertCircle className="h-5 w-5" />
+                        <span>{error}</span>
+                      </div>
+                    )}
+                    {response ? (
+                      <div className="relative">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => copyToClipboard(JSON.stringify(response.data, null, 2))}
+                          className="absolute right-2 top-2 gap-1"
+                        >
+                          {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+                          {copied ? 'Copied!' : 'Copy'}
+                        </Button>
+                        <pre className="max-h-[400px] overflow-auto rounded-lg bg-zinc-100 p-4 font-mono text-sm dark:bg-zinc-900">
+                          {JSON.stringify(response.data, null, 2)}
+                        </pre>
+                      </div>
+                    ) : (
+                      <div className="flex h-[200px] items-center justify-center text-zinc-500">
+                        <p>Send a request to see the response</p>
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <div className="relative">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => copyToClipboard(getCodeSnippet())}
+                      className="absolute right-2 top-2 gap-1"
+                    >
+                      {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+                      {copied ? 'Copied!' : 'Copy'}
+                    </Button>
+                    <pre className="max-h-[400px] overflow-auto rounded-lg bg-zinc-100 p-4 font-mono text-sm dark:bg-zinc-900">
+                      {getCodeSnippet()}
+                    </pre>
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* History Panel */}
+      {showHistory && (
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle className="text-lg">Request History</CardTitle>
+                <CardDescription>Recent API calls</CardDescription>
+              </div>
+              {history.length > 0 && (
+                <Button variant="ghost" size="sm" onClick={clearHistory} className="gap-1 text-red-500">
+                  <Trash2 className="h-4 w-4" />
+                  Clear
+                </Button>
+              )}
+            </div>
+          </CardHeader>
+          <CardContent>
+            {history.length > 0 ? (
+              <div className="max-h-[300px] space-y-2 overflow-y-auto">
+                {history.map((item) => (
+                  <button
+                    type="button"
+                    key={item.id}
+                    onClick={() => loadFromHistory(item)}
+                    className="flex w-full items-center gap-3 rounded-lg border border-zinc-200 p-3 text-left hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-900"
+                  >
+                    <span
+                      className={`rounded px-1.5 py-0.5 font-mono text-xs font-semibold ${HTTP_METHOD_COLORS[item.method]}`}
+                    >
+                      {item.method}
+                    </span>
+                    <span className="flex-1 truncate font-mono text-sm">{item.path}</span>
+                    {item.response && (
+                      <span
+                        className={`rounded-full px-2 py-0.5 text-xs font-medium ${
+                          item.response.status >= 200 && item.response.status < 300
+                            ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
+                            : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+                        }`}
+                      >
+                        {item.response.status}
+                      </span>
+                    )}
+                    <span className="text-xs text-zinc-500">
+                      {new Date(item.timestamp).toLocaleTimeString()}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            ) : (
+              <div className="flex h-[100px] items-center justify-center text-zinc-500">
+                <p>No history yet. Send some requests!</p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+    </div>
   );
 }
+
diff --git a/betterbase/apps/dashboard/src/app/(dashboard)/auth/page.tsx b/betterbase/apps/dashboard/src/app/(dashboard)/auth/page.tsx
index 7bd7174..49010ff 100644
--- a/betterbase/apps/dashboard/src/app/(dashboard)/auth/page.tsx
+++ b/betterbase/apps/dashboard/src/app/(dashboard)/auth/page.tsx
@@ -1,13 +1,821 @@
+'use client';
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { betterbase } from '@/lib/betterbase';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import {
+  Shield,
+  Users,
+  Key,
+  Settings,
+  CheckCircle,
+  XCircle,
+  Clock,
+  Monitor,
+  Trash2,
+  RefreshCw,
+  Mail,
+  Github,
+  Chrome,
+  AlertCircle,
+  Copy,
+  Terminal,
+} from 'lucide-react';
+import { useState } from 'react';
+interface AuthUser {
+  id: string;
+  email: string;
+  name: string | null;
+  role: string;
+  createdAt: string;
+  lastSignIn: string | null;
+  emailVerified: boolean;
+}
+
+interface AuthSession {
+  id: string;
+  userId: string;
+  userEmail: string;
+  ipAddress: string | null;
+  userAgent: string | null;
+  expiresAt: string;
+  createdAt: string;
+  isActive: boolean;
+}
+
+interface AuthConfig {
+  configured: boolean;
+  providers: {
+    email: boolean;
+    google: boolean;
+    github: boolean;
+  };
+  features: {
+    emailVerification: boolean;
+    twoFactor: boolean;
+    passwordReset: boolean;
+  };
+}
+
+// Mock data for demonstration (in production, this would come from the API)
+const mockUsers: AuthUser[] = [
+  {
+    id: '1',
+    email: 'admin@example.com',
+    name: 'Admin User',
+    role: 'admin',
+    createdAt: '2024-01-15T10:30:00Z',
+    lastSignIn: '2024-02-20T14:22:00Z',
+    emailVerified: true,
+  },
+  {
+    id: '2',
+    email: 'developer@example.com',
+    name: 'Developer',
+    role: 'member',
+    createdAt: '2024-02-01T09:00:00Z',
+    lastSignIn: '2024-02-19T16:45:00Z',
+    emailVerified: true,
+  },
+  {
+    id: '3',
+    email: 'viewer@example.com',
+    name: null,
+    role: 'viewer',
+    createdAt: '2024-02-10T11:20:00Z',
+    lastSignIn: null,
+    emailVerified: false,
+  },
+];
+
+const mockSessions: AuthSession[] = [
+  {
+    id: 'sess_1',
+    userId: '1',
+    userEmail: 'admin@example.com',
+    ipAddress: '192.168.1.100',
+    userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)',
+    expiresAt: '2024-03-22T14:22:00Z',
+    createdAt: '2024-02-20T14:22:00Z',
+    isActive: true,
+  },
+  {
+    id: 'sess_2',
+    userId: '1',
+    userEmail: 'admin@example.com',
+    ipAddress: '10.0.0.50',
+    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0)',
+    expiresAt: '2024-03-21T09:15:00Z',
+    createdAt: '2024-02-19T09:15:00Z',
+    isActive: true,
+  },
+  {
+    id: 'sess_3',
+    userId: '2',
+    userEmail: 'developer@example.com',
+    ipAddress: '172.16.0.25',
+    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)',
+    expiresAt: '2024-03-19T16:45:00Z',
+    createdAt: '2024-02-19T16:45:00Z',
+    isActive: true,
+  },
+];
+
+const mockAuthConfig: AuthConfig = {
+  configured: true,
+  providers: {
+    email: true,
+    google: false,
+    github: true,
+  },
+  features: {
+    emailVerification: true,
+    twoFactor: false,
+    passwordReset: true,
+  },
+};
+
+// Setup instructions component
+function SetupInstructions() {
+  const [copied, setCopied] = useState<string | null>(null);
+
+  const copyToClipboard = async (text: string, id: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(id);
+      setTimeout(() => setCopied(null), 2000);
+    } catch (error) {
+      console.error('Failed to copy to clipboard:', error);
+    }
+  };
+
+  const codeSnippets = {
+    install: `bun add betterbase`,
+    schema: `// src/db/schema.ts
+import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';
+
+export const users = sqliteTable('users', {
+  id: text('id').primaryKey().$defaultFn(() => crypto.randomUUID()),
+  email: text('email').notNull().unique(),
+  name: text('name'),
+  passwordHash: text('password_hash'),
+  role: text('role').default('member').notNull(),
+  emailVerified: integer('email_verified', { mode: 'boolean' }).default(false),
+  createdAt: integer('created_at', { mode: 'timestamp' }).$defaultFn(() => new Date()),
+});
+
+export const sessions = sqliteTable('sessions', {
+  id: text('id').primaryKey(),
+  userId: text('user_id').notNull().references(() => users.id),
+  expiresAt: integer('expires_at', { mode: 'timestamp' }).notNull(),
+  ipAddress: text('ip_address'),
+  userAgent: text('user_agent'),
+});`,
+    authRoute: `// src/routes/auth.ts
+import { Hono } from 'hono';
+import { authRoute } from '../auth';
+
+const app = new Hono();
+app.route('/auth', authRoute);`,
+    envVars: `# .env
+BETTERBASE_URL=http://localhost:3000
+BETTERBASE_SECRET=your-secret-key-here`,
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card className="border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/20">
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <AlertCircle className="h-5 w-5 text-amber-600 dark:text-amber-400" />
+            <CardTitle className="text-amber-800 dark:text-amber-200">Authentication Not Configured</CardTitle>
+          </div>
+          <CardDescription className="text-amber-700 dark:text-amber-300">
+            Set up authentication to manage users, sessions, and secure your application.
+          </CardDescription>
+        </CardHeader>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Terminal className="h-5 w-5" />
+            Quick Setup Guide
+          </CardTitle>
+          <CardDescription>Follow these steps to enable authentication in your BetterBase project.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Step 1 */}
+          <div className="space-y-2">
+            <h4 className="font-medium">1. Install Dependencies</h4>
+            <div className="relative">
+              <pre className="overflow-x-auto rounded-lg bg-zinc-900 p-4 text-sm text-zinc-100">
+                <code>{codeSnippets.install}</code>
+              </pre>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="absolute right-2 top-2"
+                onClick={() => copyToClipboard(codeSnippets.install, 'install')}
+              >
+                {copied === 'install' ? <CheckCircle className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+              </Button>
+            </div>
+          </div>
+
+          {/* Step 2 */}
+          <div className="space-y-2">
+            <h4 className="font-medium">2. Create Auth Schema</h4>
+            <div className="relative">
+              <pre className="max-h-64 overflow-auto rounded-lg bg-zinc-900 p-4 text-sm text-zinc-100">
+                <code>{codeSnippets.schema}</code>
+              </pre>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="absolute right-2 top-2"
+                onClick={() => copyToClipboard(codeSnippets.schema, 'schema')}
+              >
+                {copied === 'schema' ? <CheckCircle className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+              </Button>
+            </div>
+          </div>
+
+          {/* Step 3 */}
+          <div className="space-y-2">
+            <h4 className="font-medium">3. Add Auth Routes</h4>
+            <div className="relative">
+              <pre className="overflow-x-auto rounded-lg bg-zinc-900 p-4 text-sm text-zinc-100">
+                <code>{codeSnippets.authRoute}</code>
+              </pre>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="absolute right-2 top-2"
+                onClick={() => copyToClipboard(codeSnippets.authRoute, 'authRoute')}
+              >
+                {copied === 'authRoute' ? <CheckCircle className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+              </Button>
+            </div>
+          </div>
+
+          {/* Step 4 */}
+          <div className="space-y-2">
+            <h4 className="font-medium">4. Configure Environment Variables</h4>
+            <div className="relative">
+              <pre className="overflow-x-auto rounded-lg bg-zinc-900 p-4 text-sm text-zinc-100">
+                <code>{codeSnippets.envVars}</code>
+              </pre>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="absolute right-2 top-2"
+                onClick={() => copyToClipboard(codeSnippets.envVars, 'envVars')}
+              >
+                {copied === 'envVars' ? <CheckCircle className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-900 dark:bg-blue-950/20">
+            <Terminal className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+            <p className="text-sm text-blue-700 dark:text-blue-300">
+              Run <code className="rounded bg-blue-100 px-1 py-0.5 dark:bg-blue-900">bb auth init</code> to automatically
+              set up authentication with sensible defaults.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+// Auth status card
+function AuthStatusCard({ config }: { config: AuthConfig }) {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">Auth Status</CardTitle>
+        <Shield className="h-4 w-4 text-zinc-600 dark:text-zinc-400" />
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center gap-2">
+          {config.configured ? (
+            <>
+              <CheckCircle className="h-5 w-5 text-green-500" />
+              <span className="text-lg font-semibold">Configured</span>
+            </>
+          ) : (
+            <>
+              <XCircle className="h-5 w-5 text-red-500" />
+              <span className="text-lg font-semibold">Not Configured</span>
+            </>
+          )}
+        </div>
+        <p className="text-xs text-zinc-600 dark:text-zinc-400">
+          {config.configured ? 'Authentication is active and ready' : 'Set up authentication to secure your app'}
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
+
+// Stats cards
+function StatsCards({ users, sessions }: { users: AuthUser[]; sessions: AuthSession[] }) {
+  const activeSessions = sessions.filter((s) => s.isActive).length;
+  const verifiedUsers = users.filter((u) => u.emailVerified).length;
+
+  const stats = [
+    {
+      name: 'Total Users',
+      value: users.length.toString(),
+      icon: Users,
+      description: `${verifiedUsers} verified`,
+    },
+    {
+      name: 'Active Sessions',
+      value: activeSessions.toString(),
+      icon: Key,
+      description: `of ${sessions.length} total`,
+    },
+    {
+      name: 'Admin Users',
+      value: users.filter((u) => u.role === 'admin').length.toString(),
+      icon: Shield,
+      description: 'with full access',
+    },
+  ];
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-3">
+      {stats.map((stat) => (
+        <Card key={stat.name}>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">{stat.name}</CardTitle>
+            <stat.icon className="h-4 w-4 text-zinc-600 dark:text-zinc-400" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stat.value}</div>
+            <p className="text-xs text-zinc-600 dark:text-zinc-400">{stat.description}</p>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+// Users table
+function UsersTable({
+  users,
+  onRoleChange,
+}: {
+  users: AuthUser[];
+  onRoleChange: (userId: string, newRole: string) => void;
+}) {
+  const formatDate = (dateString: string | null) => {
+    if (!dateString) return 'Never';
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
 
-export default function AuthManagerPage() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Authentication Manager</CardTitle>
-        <CardDescription>Manage users, sessions, and auth providers.</CardDescription>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>Users</CardTitle>
+            <CardDescription>Manage user accounts and permissions</CardDescription>
+          </div>
+          <Button variant="outline" size="sm">
+            <RefreshCw className="mr-2 h-4 w-4" />
+            Refresh
+          </Button>
+        </div>
       </CardHeader>
-      <CardContent className="text-sm text-zinc-600 dark:text-zinc-400">Authentication manager ships in Phase 9.4.</CardContent>
+      <CardContent>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-zinc-200 dark:border-zinc-800">
+                <th className="px-4 py-3 text-left font-medium">User</th>
+                <th className="px-4 py-3 text-left font-medium">Role</th>
+                <th className="px-4 py-3 text-left font-medium">Created</th>
+                <th className="px-4 py-3 text-left font-medium">Last Sign In</th>
+                <th className="px-4 py-3 text-left font-medium">Status</th>
+                <th className="px-4 py-3 text-left font-medium">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.map((user) => (
+                <tr key={user.id} className="border-b border-zinc-100 dark:border-zinc-800/50">
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-3">
+                      <div className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-200 dark:bg-zinc-700">
+                        <span className="text-xs font-medium">
+                          {(user.name || user.email).charAt(0).toUpperCase()}
+                        </span>
+                      </div>
+                      <div>
+                        <div className="font-medium">{user.name || 'No name'}</div>
+                        <div className="text-xs text-zinc-600 dark:text-zinc-400">{user.email}</div>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3">
+                    <select
+                      value={user.role}
+                      onChange={(e) => onRoleChange(user.id, e.target.value)}
+                      className="rounded-md border border-zinc-200 bg-transparent px-2 py-1 text-sm dark:border-zinc-700"
+                    >
+                      <option value="admin">Admin</option>
+                      <option value="member">Member</option>
+                      <option value="viewer">Viewer</option>
+                    </select>
+                  </td>
+                  <td className="px-4 py-3 text-zinc-600 dark:text-zinc-400">{formatDate(user.createdAt)}</td>
+                  <td className="px-4 py-3 text-zinc-600 dark:text-zinc-400">{formatDate(user.lastSignIn)}</td>
+                  <td className="px-4 py-3">
+                    {user.emailVerified ? (
+                      <span className="inline-flex items-center rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
+                        Verified
+                      </span>
+                    ) : (
+                      <span className="inline-flex items-center rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
+                        Pending
+                      </span>
+                    )}
+                  </td>
+                  <td className="px-4 py-3">
+                    <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                      <Settings className="h-4 w-4" />
+                    </Button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </CardContent>
     </Card>
   );
 }
+
+// Sessions table
+function SessionsTable({
+  sessions,
+  onRevoke,
+}: {
+  sessions: AuthSession[];
+  onRevoke: (sessionId: string) => void;
+}) {
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const getDeviceIcon = (userAgent: string | null) => {
+    if (!userAgent) return <Monitor className="h-4 w-4" />;
+    if (userAgent.includes('iPhone') || userAgent.includes('Android')) {
+      return <Monitor className="h-4 w-4 text-blue-500" />;
+    }
+    return <Monitor className="h-4 w-4" />;
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>Active Sessions</CardTitle>
+            <CardDescription>Monitor and manage user sessions</CardDescription>
+          </div>
+          <Button variant="outline" size="sm">
+            <RefreshCw className="mr-2 h-4 w-4" />
+            Refresh
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-zinc-200 dark:border-zinc-800">
+                <th className="px-4 py-3 text-left font-medium">Device</th>
+                <th className="px-4 py-3 text-left font-medium">User</th>
+                <th className="px-4 py-3 text-left font-medium">IP Address</th>
+                <th className="px-4 py-3 text-left font-medium">Created</th>
+                <th className="px-4 py-3 text-left font-medium">Expires</th>
+                <th className="px-4 py-3 text-left font-medium">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {sessions.map((session) => (
+                <tr key={session.id} className="border-b border-zinc-100 dark:border-zinc-800/50">
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      {getDeviceIcon(session.userAgent)}
+                      <span className="max-w-[200px] truncate text-zinc-600 dark:text-zinc-400">
+                        {session.userAgent?.split(')')[0]?.split('(')[1] || 'Unknown device'}
+                      </span>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className="font-medium">{session.userEmail}</span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <code className="rounded bg-zinc-100 px-1 py-0.5 text-xs dark:bg-zinc-800">
+                      {session.ipAddress || 'Unknown'}
+                    </code>
+                  </td>
+                  <td className="px-4 py-3 text-zinc-600 dark:text-zinc-400">
+                    <div className="flex items-center gap-1">
+                      <Clock className="h-3 w-3" />
+                      {formatDate(session.createdAt)}
+                    </div>
+                  </td>
+                  <td className="px-4 py-3 text-zinc-600 dark:text-zinc-400">{formatDate(session.expiresAt)}</td>
+                  <td className="px-4 py-3">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 text-red-600 hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-950"
+                      onClick={() => onRevoke(session.id)}
+                    >
+                      <Trash2 className="mr-1 h-4 w-4" />
+                      Revoke
+                    </Button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// Auth providers card
+function AuthProvidersCard({ 
+  config, 
+  onToggleProvider 
+}: { 
+  config: AuthConfig; 
+  onToggleProvider?: (providerId: string) => void 
+}) {
+  const providers = [
+    { id: 'email', name: 'Email/Password', icon: Mail, enabled: config.providers.email },
+    { id: 'google', name: 'Google OAuth', icon: Chrome, enabled: config.providers.google },
+    { id: 'github', name: 'GitHub OAuth', icon: Github, enabled: config.providers.github },
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Auth Providers</CardTitle>
+        <CardDescription>Configure authentication providers for your application</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {providers.map((provider) => (
+            <div
+              key={provider.id}
+              className="flex items-center justify-between rounded-lg border border-zinc-200 p-3 dark:border-zinc-800"
+            >
+              <div className="flex items-center gap-3">
+                <provider.icon className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
+                <span className="font-medium">{provider.name}</span>
+              </div>
+              <button
+                type="button"
+                onClick={() => onToggleProvider?.(provider.id)}
+                aria-pressed={provider.enabled}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                  provider.enabled ? 'bg-green-500' : 'bg-zinc-300 dark:bg-zinc-700'
+                }`}
+              >
+                <span
+                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                    provider.enabled ? 'translate-x-6' : 'translate-x-1'
+                  }`}
+                />
+              </button>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// Auth features card
+function AuthFeaturesCard({ 
+  config, 
+  onToggleFeature 
+}: { 
+  config: AuthConfig; 
+  onToggleFeature?: (featureId: string) => void 
+}) {
+  const features = [
+    { id: 'emailVerification', name: 'Email Verification', description: 'Require email verification for new users', enabled: config.features.emailVerification },
+    { id: 'twoFactor', name: 'Two-Factor Auth', description: 'Enable 2FA for enhanced security', enabled: config.features.twoFactor },
+    { id: 'passwordReset', name: 'Password Reset', description: 'Allow users to reset their password', enabled: config.features.passwordReset },
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Auth Features</CardTitle>
+        <CardDescription>Toggle authentication features for your application</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {features.map((feature) => (
+            <div key={feature.id} className="flex items-center justify-between">
+              <div>
+                <div className="font-medium">{feature.name}</div>
+                <div className="text-xs text-zinc-600 dark:text-zinc-400">{feature.description}</div>
+              </div>
+              <button
+                type="button"
+                onClick={() => onToggleFeature?.(feature.id)}
+                aria-pressed={feature.enabled}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                  feature.enabled ? 'bg-green-500' : 'bg-zinc-300 dark:bg-zinc-700'
+                }`}
+              >
+                <span
+                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                    feature.enabled ? 'translate-x-6' : 'translate-x-1'
+                  }`}
+                />
+              </button>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function AuthPage() {
+  const queryClient = useQueryClient();
+
+  // Local state for auth config (for toggling providers and features)
+  const [authConfig, setAuthConfig] = useState<AuthConfig>(mockAuthConfig);
+
+  // Check if auth is configured
+  const { data: authStatus, isLoading } = useQuery({
+    queryKey: ['auth-status'],
+    queryFn: async () => {
+      try {
+        // In production, this would check the actual auth configuration
+        // For now, we'll use mock data
+        const result = await betterbase.auth.getUser();
+        return {
+          configured: !result.error,
+          user: result.data,
+        };
+      } catch {
+        return { configured: false, user: null };
+      }
+    },
+    retry: false,
+  });
+
+  // Fetch users
+  const { data: users = mockUsers } = useQuery({
+    queryKey: ['auth-users'],
+    queryFn: async () => {
+      // In production, this would fetch from the API
+      // const result = await betterbase.from('users').select().execute();
+      // return result.data || [];
+      return mockUsers;
+    },
+    enabled: authStatus?.configured,
+  });
+
+  // Fetch sessions
+  const { data: sessions = mockSessions } = useQuery({
+    queryKey: ['auth-sessions'],
+    queryFn: async () => {
+      // In production, this would fetch from the API
+      // const result = await betterbase.from('sessions').select().execute();
+      // return result.data || [];
+      return mockSessions;
+    },
+    enabled: authStatus?.configured,
+  });
+
+  // Role change mutation
+  const roleMutation = useMutation({
+    mutationFn: async ({ userId, role }: { userId: string; role: string }) => {
+      // In production, this would update via API
+      // await betterbase.from('users').update(userId, { role });
+      return { userId, role };
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['auth-users'] });
+    },
+  });
+
+  // Revoke session mutation
+  const revokeSessionMutation = useMutation({
+    mutationFn: async (sessionId: string) => {
+      // In production, this would delete via API
+      // await betterbase.from('sessions').delete(sessionId);
+      return sessionId;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['auth-sessions'] });
+    },
+  });
+
+  const handleRoleChange = (userId: string, newRole: string) => {
+    roleMutation.mutate({ userId, role: newRole });
+  };
+
+  const handleRevokeSession = (sessionId: string) => {
+    if (confirm('Are you sure you want to revoke this session?')) {
+      revokeSessionMutation.mutate(sessionId);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <RefreshCw className="h-8 w-8 animate-spin text-zinc-400" />
+      </div>
+    );
+  }
+
+  // Show setup instructions if auth is not configured
+  if (!authStatus?.configured) {
+    return (
+      <div className="space-y-6">
+        <div>
+          <h2 className="text-3xl font-bold tracking-tight">Authentication</h2>
+          <p className="text-zinc-600 dark:text-zinc-400">Manage users, sessions, and auth providers.</p>
+        </div>
+        <SetupInstructions />
+      </div>
+    );
+  }
+
+  // Handlers for toggling providers and features
+  const handleToggleProvider = (providerId: string) => {
+    setAuthConfig((prev) => ({
+      ...prev,
+      providers: {
+        ...prev.providers,
+        [providerId]: !prev.providers[providerId as keyof typeof prev.providers],
+      },
+    }));
+  };
+
+  const handleToggleFeature = (featureId: string) => {
+    setAuthConfig((prev) => ({
+      ...prev,
+      features: {
+        ...prev.features,
+        [featureId]: !prev.features[featureId as keyof typeof prev.features],
+      },
+    }));
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-3xl font-bold tracking-tight">Authentication</h2>
+        <p className="text-zinc-600 dark:text-zinc-400">Manage users, sessions, and auth providers.</p>
+      </div>
+
+      {/* Status and Stats */}
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <AuthStatusCard config={authConfig} />
+        <StatsCards users={users} sessions={sessions} />
+      </div>
+
+      {/* Users Table */}
+      <UsersTable users={users} onRoleChange={handleRoleChange} />
+
+      {/* Sessions Table */}
+      <SessionsTable sessions={sessions} onRevoke={handleRevokeSession} />
+
+      {/* Auth Settings */}
+      <div className="grid gap-4 lg:grid-cols-2">
+        <AuthProvidersCard config={authConfig} onToggleProvider={handleToggleProvider} />
+        <AuthFeaturesCard config={authConfig} onToggleFeature={handleToggleFeature} />
+      </div>
+    </div>
+  );
+}
diff --git a/betterbase/apps/dashboard/src/app/(dashboard)/logs/page.tsx b/betterbase/apps/dashboard/src/app/(dashboard)/logs/page.tsx
index 0631c60..328df83 100644
--- a/betterbase/apps/dashboard/src/app/(dashboard)/logs/page.tsx
+++ b/betterbase/apps/dashboard/src/app/(dashboard)/logs/page.tsx
@@ -1,13 +1,651 @@
+'use client';
+
+import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  AlertCircle,
+  Bug,
+  Calendar,
+  ChevronDown,
+  Download,
+  Info,
+  RefreshCw,
+  Search,
+  X,
+  XCircle,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+// Types
+type LogLevel = 'info' | 'warn' | 'error' | 'debug';
+
+interface LogEntry {
+  id: string;
+  timestamp: string;
+  level: LogLevel;
+  message: string;
+  source: string;
+  metadata?: Record<string, unknown>;
+  stackTrace?: string;
+}
+
+interface LogFilters {
+  level: LogLevel | 'all';
+  search: string;
+  source: string | 'all';
+  dateFrom: string;
+  dateTo: string;
+}
+
+// Mock log data generator (replace with actual API call)
+const generateMockLogs = (): LogEntry[] => {
+  const sources = ['api', 'auth', 'database', 'functions', 'realtime', 'storage'];
+  const levels: LogLevel[] = ['info', 'warn', 'error', 'debug'];
+  
+  const messages: Record<LogLevel, string[]> = {
+    info: [
+      'Request completed successfully',
+      'User authenticated',
+      'Database query executed',
+      'Cache invalidated',
+      'Session refreshed',
+      'API endpoint called',
+      'File uploaded successfully',
+    ],
+    warn: [
+      'Rate limit approaching',
+      'Deprecated API endpoint used',
+      'Large query detected',
+      'Session expiring soon',
+      'Memory usage high',
+      'Connection pool near capacity',
+    ],
+    error: [
+      'Authentication failed',
+      'Database connection lost',
+      'Invalid request payload',
+      'File upload failed',
+      'Timeout exceeded',
+      'Permission denied',
+    ],
+    debug: [
+      'Processing request',
+      'Parsing request body',
+      'Validating credentials',
+      'Executing query',
+      'Building response',
+    ],
+  };
+
+  const logs: LogEntry[] = [];
+  const now = new Date();
+
+  for (let i = 0; i < 100; i++) {
+    const level = levels[Math.floor(Math.random() * levels.length)];
+    const source = sources[Math.floor(Math.random() * sources.length)];
+    const timestamp = new Date(now.getTime() - Math.random() * 24 * 60 * 60 * 1000);
+    
+    const metadata: Record<string, unknown> = {};
+    if (Math.random() > 0.7) {
+      metadata.requestId = `req_${Math.random().toString(36).substring(7)}`;
+      metadata.duration = Math.floor(Math.random() * 1000);
+    }
+    if (Math.random() > 0.8) {
+      metadata.userId = `user_${Math.floor(Math.random() * 1000)}`;
+    }
+    if (Math.random() > 0.9) {
+      metadata.ip = `192.168.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`;
+    }
+
+    const entry: LogEntry = {
+      id: `log_${i}_${Date.now()}`,
+      timestamp: timestamp.toISOString(),
+      level,
+      message: messages[level][Math.floor(Math.random() * messages[level].length)],
+      source,
+      metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
+    };
+
+    if (level === 'error' && Math.random() > 0.5) {
+      entry.stackTrace = `Error: ${entry.message}\n    at Function.call (index.js:42)\n    at Module._compile (internal/modules/cjs/loader.js:1136)\n    at Object.<anonymous> (/app/src/index.ts:15)`;
+    }
+
+    logs.push(entry);
+  }
+
+  return logs.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+};
+
+// Fetch logs function (simulated)
+const fetchLogs = async (): Promise<LogEntry[]> => {
+  // Simulate API delay
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  return generateMockLogs();
+};
+
+// Log level colors
+const levelColors: Record<LogLevel, string> = {
+  info: 'text-blue-500 bg-blue-50 dark:bg-blue-950',
+  warn: 'text-yellow-500 bg-yellow-50 dark:bg-yellow-950',
+  error: 'text-red-500 bg-red-50 dark:bg-red-950',
+  debug: 'text-gray-500 bg-gray-50 dark:bg-gray-950',
+};
+
+const levelIcons: Record<LogLevel, typeof Info> = {
+  info: Info,
+  warn: AlertCircle,
+  error: XCircle,
+  debug: Bug,
+};
 
 export default function LogsPage() {
+  // Filter state
+  const [filters, setFilters] = useState<LogFilters>({
+    level: 'all',
+    search: '',
+    source: 'all',
+    dateFrom: '',
+    dateTo: '',
+  });
+
+  // Selected log for detail view
+  const [selectedLog, setSelectedLog] = useState<LogEntry | null>(null);
+
+  // Modal ref for focus management
+  const modalRef = useRef<HTMLDivElement>(null);
+  const previousActiveElement = useRef<HTMLElement | null>(null);
+
+  // Handle escape key and focus management for modal
+  useEffect(() => {
+    if (selectedLog) {
+      // Store the currently focused element
+      previousActiveElement.current = document.activeElement as HTMLElement;
+      // Focus the modal panel
+      modalRef.current?.focus();
+    }
+  }, [selectedLog]);
+
+  // Handle escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && selectedLog) {
+        setSelectedLog(null);
+      }
+    };
+
+    if (selectedLog) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [selectedLog]);
+
+  // Restore focus when modal closes
+  useEffect(() => {
+    if (!selectedLog && previousActiveElement.current) {
+      previousActiveElement.current.focus();
+      previousActiveElement.current = null;
+    }
+  }, [selectedLog]);
+
+  // Auto-refresh state
+  const [autoRefresh, setAutoRefresh] = useState(false);
+  const [refreshInterval, setRefreshInterval] = useState(30);
+
+  // Fetch logs using React Query
+  const { data: logs = [], isLoading, refetch, isRefetching } = useQuery({
+    queryKey: ['logs'],
+    queryFn: fetchLogs,
+    refetchInterval: autoRefresh ? refreshInterval * 1000 : false,
+  });
+
+  // Filtered logs
+  const filteredLogs = useMemo(() => {
+    return logs.filter((log) => {
+      // Level filter
+      if (filters.level !== 'all' && log.level !== filters.level) {
+        return false;
+      }
+
+      // Source filter
+      if (filters.source !== 'all' && log.source !== filters.source) {
+        return false;
+      }
+
+      // Search filter
+      if (filters.search) {
+        const searchLower = filters.search.toLowerCase();
+        const matchesMessage = log.message.toLowerCase().includes(searchLower);
+        const matchesSource = log.source.toLowerCase().includes(searchLower);
+        if (!matchesMessage && !matchesSource) {
+          return false;
+        }
+      }
+
+      // Date range filter
+      if (filters.dateFrom) {
+        const logDate = new Date(log.timestamp);
+        const fromDate = new Date(filters.dateFrom);
+        fromDate.setUTCHours(0, 0, 0, 0);
+        if (logDate < fromDate) {
+          return false;
+        }
+      }
+
+      if (filters.dateTo) {
+        const logDate = new Date(log.timestamp);
+        const toDate = new Date(filters.dateTo);
+        toDate.setUTCHours(23, 59, 59, 999);
+        if (logDate > toDate) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+  }, [logs, filters]);
+
+  // Get unique sources from logs
+  const sources = useMemo(() => {
+    const uniqueSources = new Set(logs.map((log) => log.source));
+    return Array.from(uniqueSources).sort();
+  }, [logs]);
+
+  // Export functions
+  const exportToJson = useCallback(() => {
+    const dataStr = JSON.stringify(filteredLogs, null, 2);
+    const blob = new Blob([dataStr], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `logs_${new Date().toISOString().split('T')[0]}.json`;
+    link.click();
+    URL.revokeObjectURL(url);
+  }, [filteredLogs]);
+
+  const exportToCsv = useCallback(() => {
+    const headers = ['Timestamp', 'Level', 'Source', 'Message'];
+    const rows = filteredLogs.map((log) => [
+      log.timestamp,
+      log.level,
+      log.source,
+      `"${log.message.replace(/"/g, '""')}"`,
+    ]);
+    
+    const csv = [headers.join(','), ...rows.map((row) => row.join(','))].join('\n');
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `logs_${new Date().toISOString().split('T')[0]}.csv`;
+    link.click();
+    URL.revokeObjectURL(url);
+  }, [filteredLogs]);
+
+  // Clear filters
+  const clearFilters = useCallback(() => {
+    setFilters({
+      level: 'all',
+      search: '',
+      source: 'all',
+      dateFrom: '',
+      dateTo: '',
+    });
+  }, []);
+
+  // Format timestamp
+  const formatTimestamp = (timestamp: string) => {
+    const date = new Date(timestamp);
+    return date.toLocaleString('en-US', {
+      month: 'short',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false,
+    });
+  };
+
+  // Check if any filters are active
+  const hasActiveFilters = filters.level !== 'all' || filters.search || filters.source !== 'all' || filters.dateFrom || filters.dateTo;
+
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Logs Viewer</CardTitle>
-        <CardDescription>Track database, auth, and function logs in real-time.</CardDescription>
-      </CardHeader>
-      <CardContent className="text-sm text-zinc-600 dark:text-zinc-400">Logs viewer ships in Phase 9.5.</CardContent>
-    </Card>
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h2 className="text-3xl font-bold tracking-tight">Logs</h2>
+        <p className="text-zinc-600 dark:text-zinc-400">
+          Track and analyze application logs in real-time.
+        </p>
+      </div>
+
+      {/* Filters Card */}
+      <Card>
+        <CardHeader className="pb-4">
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg">Filters</CardTitle>
+            <div className="flex items-center gap-2">
+              {/* Auto-refresh toggle */}
+              <Button
+                variant={autoRefresh ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setAutoRefresh(!autoRefresh)}
+              >
+                <RefreshCw className={cn('h-4 w-4', autoRefresh && 'animate-spin')} />
+                <span className="ml-2">Auto-refresh</span>
+              </Button>
+              
+              {autoRefresh && (
+                <select
+                  value={refreshInterval}
+                  onChange={(e) => setRefreshInterval(Number(e.target.value))}
+                  className="rounded-md border border-input bg-background px-3 py-1.5 text-sm"
+                >
+                  <option value={10}>10s</option>
+                  <option value={30}>30s</option>
+                  <option value={60}>60s</option>
+                </select>
+              )}
+
+              {/* Export dropdown */}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" size="sm">
+                    <Download className="h-4 w-4" />
+                    <span className="ml-2">Export</span>
+                    <ChevronDown className="ml-1 h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={exportToJson}>
+                    Export as JSON
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={exportToCsv}>
+                    Export as CSV
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-wrap gap-4">
+            {/* Search */}
+            <div className="relative flex-1 min-w-[200px]">
+              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+              <input
+                type="text"
+                placeholder="Search logs..."
+                value={filters.search}
+                onChange={(e) => setFilters((prev) => ({ ...prev, search: e.target.value }))}
+                className="w-full rounded-md border border-input bg-background py-2 pl-9 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+              />
+              {filters.search && (
+                <button
+                  onClick={() => setFilters((prev) => ({ ...prev, search: '' }))}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              )}
+            </div>
+
+            {/* Level filter */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="w-[140px]">
+                  {filters.level === 'all' ? 'All Levels' : filters.level.toUpperCase()}
+                  <ChevronDown className="ml-auto h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem onClick={() => setFilters((prev) => ({ ...prev, level: 'all' }))}>
+                  All Levels
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={() => setFilters((prev) => ({ ...prev, level: 'info' }))}>
+                  <span className="mr-2">●</span> Info
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setFilters((prev) => ({ ...prev, level: 'warn' }))}>
+                  <span className="mr-2 text-yellow-500">●</span> Warn
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setFilters((prev) => ({ ...prev, level: 'error' }))}>
+                  <span className="mr-2 text-red-500">●</span> Error
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setFilters((prev) => ({ ...prev, level: 'debug' }))}>
+                  <span className="mr-2 text-gray-500">●</span> Debug
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            {/* Source filter */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="w-[140px]">
+                  {filters.source === 'all' ? 'All Sources' : filters.source}
+                  <ChevronDown className="ml-auto h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem onClick={() => setFilters((prev) => ({ ...prev, source: 'all' }))}>
+                  All Sources
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                {sources.map((source) => (
+                  <DropdownMenuItem
+                    key={source}
+                    onClick={() => setFilters((prev) => ({ ...prev, source }))}
+                  >
+                    {source}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            {/* Date from */}
+            <div className="flex items-center gap-2">
+              <Calendar className="h-4 w-4 text-zinc-400" />
+              <input
+                type="date"
+                value={filters.dateFrom}
+                onChange={(e) => setFilters((prev) => ({ ...prev, dateFrom: e.target.value }))}
+                className="rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+              />
+            </div>
+
+            {/* Date to */}
+            <div className="flex items-center gap-2">
+              <span className="text-zinc-400">to</span>
+              <input
+                type="date"
+                value={filters.dateTo}
+                onChange={(e) => setFilters((prev) => ({ ...prev, dateTo: e.target.value }))}
+                className="rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+              />
+            </div>
+
+            {/* Clear filters */}
+            {hasActiveFilters && (
+              <Button variant="ghost" size="sm" onClick={clearFilters}>
+                Clear filters
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Logs List */}
+      <Card>
+        <CardHeader className="pb-4">
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg">
+              Log Entries
+              <span className="ml-2 text-sm font-normal text-zinc-500">
+                ({filteredLogs.length} {filteredLogs.length === 1 ? 'entry' : 'entries'}
+                {hasActiveFilters && ` of ${logs.length} total`})
+              </span>
+            </CardTitle>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => refetch()}
+              disabled={isLoading || isRefetching}
+            >
+              <RefreshCw className={cn('h-4 w-4', isRefetching && 'animate-spin')} />
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <div className="flex items-center justify-center py-12">
+              <RefreshCw className="h-8 w-8 animate-spin text-zinc-400" />
+            </div>
+          ) : filteredLogs.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 text-zinc-500">
+              <Info className="h-12 w-12 mb-4" />
+              <p>No logs found</p>
+              {hasActiveFilters && (
+                <Button variant="ghost" onClick={clearFilters} className="mt-2 h-auto p-0 text-primary underline">
+                  Clear filters
+                </Button>
+              )}
+            </div>
+          ) : (
+            <div className="space-y-2 max-h-[600px] overflow-y-auto">
+              {filteredLogs.map((log) => {
+                const LevelIcon = levelIcons[log.level];
+                return (
+                  <div
+                    key={log.id}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => setSelectedLog(log)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        setSelectedLog(log);
+                      }
+                    }}
+                    aria-label={`View details for log: ${log.message}`}
+                    className={cn(
+                      'flex items-start gap-3 rounded-lg border p-3 cursor-pointer transition-colors hover:bg-accent/50 focus:outline-none focus:ring-2 focus:ring-ring',
+                      levelColors[log.level]
+                    )}
+                  >
+                    <LevelIcon className="h-5 w-5 mt-0.5 flex-shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs font-mono text-zinc-500">
+                          {formatTimestamp(log.timestamp)}
+                        </span>
+                        <span className="text-xs uppercase font-medium px-1.5 py-0.5 rounded bg-zinc-100 dark:bg-zinc-800">
+                          {log.source}
+                        </span>
+                      </div>
+                      <p className="mt-1 text-sm">{log.message}</p>
+                      {log.metadata && (
+                        <p className="mt-1 text-xs text-zinc-500">
+                          +{Object.keys(log.metadata).length} metadata fields
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Log Detail Modal/Drawer */}
+      {selectedLog && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+          onClick={() => setSelectedLog(null)}
+          role="presentation"
+        >
+          <div
+            ref={modalRef}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="logDetailsTitle"
+            className="w-full max-w-2xl max-h-[80vh] overflow-hidden rounded-xl bg-background shadow-xl"
+            onClick={(e) => e.stopPropagation()}
+            tabIndex={-1}
+          >
+            <div className="flex items-center justify-between border-b p-4">
+              <div className="flex items-center gap-3">
+                {(() => {
+                  const LevelIcon = levelIcons[selectedLog.level];
+                  return <LevelIcon className={cn('h-5 w-5', levelColors[selectedLog.level].split(' ')[0])} />;
+                })()}
+                <h3 id="logDetailsTitle" className="text-lg font-semibold">Log Details</h3>
+              </div>
+              <Button variant="ghost" size="icon" onClick={() => setSelectedLog(null)} aria-label="Close log details">
+                <X className="h-5 w-5" />
+              </Button>
+            </div>
+            <div className="overflow-y-auto p-4 space-y-4 max-h-[calc(80vh-80px)]">
+              {/* Basic info */}
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="text-xs font-medium text-zinc-500 uppercase">Timestamp</label>
+                  <p className="text-sm font-mono">{selectedLog.timestamp}</p>
+                </div>
+                <div>
+                  <label className="text-xs font-medium text-zinc-500 uppercase">Level</label>
+                  <p className="text-sm uppercase font-medium">{selectedLog.level}</p>
+                </div>
+                <div>
+                  <label className="text-xs font-medium text-zinc-500 uppercase">Source</label>
+                  <p className="text-sm">{selectedLog.source}</p>
+                </div>
+                <div>
+                  <label className="text-xs font-medium text-zinc-500 uppercase">Log ID</label>
+                  <p className="text-sm font-mono text-xs">{selectedLog.id}</p>
+                </div>
+              </div>
+
+              {/* Message */}
+              <div>
+                <label className="text-xs font-medium text-zinc-500 uppercase">Message</label>
+                <p className="mt-1 text-sm">{selectedLog.message}</p>
+              </div>
+
+              {/* Metadata */}
+              {selectedLog.metadata && Object.keys(selectedLog.metadata).length > 0 && (
+                <div>
+                  <label className="text-xs font-medium text-zinc-500 uppercase">Metadata</label>
+                  <pre className="mt-1 overflow-x-auto rounded-lg bg-zinc-100 dark:bg-zinc-900 p-3 text-xs">
+                    {JSON.stringify(selectedLog.metadata, null, 2)}
+                  </pre>
+                </div>
+              )}
+
+              {/* Stack trace */}
+              {selectedLog.stackTrace && (
+                <div>
+                  <label className="text-xs font-medium text-red-500 uppercase">Stack Trace</label>
+                  <pre className="mt-1 overflow-x-auto rounded-lg bg-red-50 dark:bg-red-950 p-3 text-xs font-mono text-red-700 dark:text-red-300">
+                    {selectedLog.stackTrace}
+                  </pre>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
   );
 }
diff --git a/betterbase/apps/dashboard/src/components/tables/table-editor.tsx b/betterbase/apps/dashboard/src/components/tables/table-editor.tsx
index 7c83860..043dd54 100644
--- a/betterbase/apps/dashboard/src/components/tables/table-editor.tsx
+++ b/betterbase/apps/dashboard/src/components/tables/table-editor.tsx
@@ -1,17 +1,525 @@
+'use client';
+
+import { useState, useCallback, useRef, useEffect, KeyboardEvent, FocusEvent } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Plus, Trash2, Loader2, AlertCircle, Pencil, X, Check } from 'lucide-react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { betterbase } from '@/lib/betterbase';
+
+type RowData = Record<string, unknown>;
+
+interface TableEditorProps {
+  tableName: string;
+}
 
-export function TableEditor({ tableName }: { tableName: string }) {
+// Skeleton component for loading state
+function SkeletonRow({ columnCount }: { columnCount: number }) {
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{tableName} editor</CardTitle>
-        <CardDescription>Inline editing is part of the next phase. This is the data preview scaffold.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="rounded-md border border-dashed p-6 text-sm text-zinc-500">
-          Row editing UI will appear here in Phase 9.2.
+    <tr className="border-b border-border">
+      {Array.from({ length: columnCount + 1 }).map((_, i) => (
+        <td key={i} className="px-4 py-3">
+          <div className="h-4 bg-muted animate-pulse rounded" />
+        </td>
+      ))}
+    </tr>
+  );
+}
+
+// Modal component for adding new rows
+function AddRowModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  columns,
+  isLoading,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: RowData) => void;
+  columns: string[];
+  isLoading: boolean;
+}) {
+  const [formData, setFormData] = useState<RowData>({});
+
+  useEffect(() => {
+    if (isOpen) {
+      // Initialize form with empty values for each column
+      const initialData: RowData = {};
+      columns.forEach((col) => {
+        initialData[col] = '';
+      });
+      setFormData(initialData);
+    }
+  }, [isOpen, columns]);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Filter out empty values and convert types
+    const cleanedData: RowData = {};
+    Object.entries(formData).forEach(([key, value]) => {
+      if (value !== '' && value !== null && value !== undefined) {
+        cleanedData[key] = value;
+      }
+    });
+    onSubmit(cleanedData);
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <Card className="w-full max-w-lg mx-4">
+        <CardHeader className="flex flex-row items-center justify-between">
+          <div>
+            <CardTitle>Add New Row</CardTitle>
+            <CardDescription>Enter values for the new row</CardDescription>
+          </div>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="h-4 w-4" />
+          </Button>
+        </CardHeader>
+        <form onSubmit={handleSubmit}>
+          <CardContent className="space-y-4">
+            {columns.map((column) => (
+              <div key={column} className="space-y-2">
+                <label htmlFor={column} className="text-sm font-medium">
+                  {column}
+                </label>
+                <input
+                  id={column}
+                  type="text"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                  value={String(formData[column] ?? '')}
+                  onChange={(e) => setFormData((prev) => ({ ...prev, [column]: e.target.value }))}
+                />
+              </div>
+            ))}
+          </CardContent>
+          <div className="flex justify-end gap-2 p-6 pt-0">
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Add Row'}
+            </Button>
+          </div>
+        </form>
+      </Card>
+    </div>
+  );
+}
+
+// Confirm delete dialog
+function ConfirmDeleteDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  isLoading,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  isLoading: boolean;
+}) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <Card className="w-full max-w-sm mx-4">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Delete Row
+          </CardTitle>
+          <CardDescription>
+            Are you sure you want to delete this row? This action cannot be undone.
+          </CardDescription>
+        </CardHeader>
+        <div className="flex justify-end gap-2 p-6 pt-0">
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={onConfirm} disabled={isLoading}>
+            {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Delete'}
+          </Button>
         </div>
-      </CardContent>
-    </Card>
+      </Card>
+    </div>
+  );
+}
+
+// Inline editable cell component
+function EditableCell({
+  value,
+  column,
+  rowId,
+  onSave,
+  isIdColumn,
+}: {
+  value: unknown;
+  column: string;
+  rowId: string;
+  onSave: (column: string, value: unknown) => void;
+  isIdColumn: boolean;
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(String(value ?? ''));
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  const handleSave = useCallback(() => {
+    const newValue = editValue;
+    // Only save if value changed
+    if (String(value ?? '') !== newValue) {
+      onSave(column, newValue);
+    }
+    setIsEditing(false);
+  }, [editValue, value, column, onSave]);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleSave();
+    } else if (e.key === 'Escape') {
+      setEditValue(String(value ?? ''));
+      setIsEditing(false);
+    }
+  };
+
+  const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+    // Only save if not clicking on a button
+    handleSave();
+  };
+
+  if (isIdColumn) {
+    return (
+      <span className="font-mono text-xs text-muted-foreground">{String(value ?? '')}</span>
+    );
+  }
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="text"
+        className="w-full rounded border border-primary bg-background px-1 py-0.5 text-sm focus:outline-none focus:ring-1 focus:ring-ring"
+        value={editValue}
+        onChange={(e) => setEditValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+      />
+    );
+  }
+
+  return (
+    <div
+      className="group flex items-center gap-1 cursor-pointer min-h-[1.5rem]"
+      onClick={() => setIsEditing(true)}
+    >
+      <span className="text-sm truncate max-w-[200px]">
+        {value === null ? (
+          <span className="text-muted-foreground italic">null</span>
+        ) : value === undefined ? (
+          <span className="text-muted-foreground italic">undefined</span>
+        ) : typeof value === 'object' ? (
+          <span className="text-muted-foreground">{JSON.stringify(value)}</span>
+        ) : (
+          String(value)
+        )}
+      </span>
+      <Pencil className="h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground" />
+    </div>
+  );
+}
+
+export function TableEditor({ tableName }: TableEditorProps) {
+  const queryClient = useQueryClient();
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const [deleteRowId, setDeleteRowId] = useState<string | null>(null);
+  const [editingCell, setEditingCell] = useState<{ rowId: string; column: string } | null>(null);
+
+  // Check if betterbase URL is configured
+  const isConfigured = process.env.NEXT_PUBLIC_BETTERBASE_URL !== undefined;
+
+  // Fetch rows from the table
+  const {
+    data: queryResult,
+    isLoading,
+    error,
+    isError,
+  } = useQuery({
+    queryKey: ['table', tableName],
+    queryFn: async () => {
+      const result = await betterbase.from<RowData>(tableName).execute();
+      if (result.error) {
+        throw result.error;
+      }
+      return result;
+    },
+    enabled: isConfigured,
+  });
+
+  const rows = queryResult?.data ?? [];
+  
+  // Extract columns from the first row, or use empty array
+  const columns = rows.length > 0 ? Object.keys(rows[0]) : [];
+  const idColumn = columns.find((col) => col.toLowerCase() === 'id') || columns[0];
+
+  // Update mutation
+  const updateMutation = useMutation({
+    mutationFn: async ({ id, data }: { id: string; data: Partial<RowData> }) => {
+      const result = await betterbase.from<RowData>(tableName).update(id, data);
+      if (result.error) {
+        throw result.error;
+      }
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['table', tableName] });
+    },
+  });
+
+  // Insert mutation
+  const insertMutation = useMutation({
+    mutationFn: async (data: RowData) => {
+      const result = await betterbase.from<RowData>(tableName).insert(data);
+      if (result.error) {
+        throw result.error;
+      }
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['table', tableName] });
+      setIsAddModalOpen(false);
+    },
+  });
+
+  // Delete mutation
+  const deleteMutation = useMutation({
+    mutationFn: async (id: string) => {
+      const result = await betterbase.from<RowData>(tableName).delete(id);
+      if (result.error) {
+        throw result.error;
+      }
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['table', tableName] });
+      setDeleteRowId(null);
+    },
+  });
+
+  // Handle cell edit save
+  const handleCellSave = useCallback(
+    (rowId: string, column: string, value: unknown) => {
+      updateMutation.mutate({ id: rowId, data: { [column]: value } });
+    },
+    [updateMutation]
+  );
+
+  // Handle add row
+  const handleAddRow = (data: RowData) => {
+    insertMutation.mutate(data);
+  };
+
+  // Handle delete row
+  const handleDeleteRow = () => {
+    if (deleteRowId && deleteRowId !== '') {
+      deleteMutation.mutate(deleteRowId);
+    }
+  };
+
+  // Get row ID safely - returns undefined for invalid IDs
+  const getRowId = (row: RowData): string | undefined => {
+    const id = row[idColumn];
+    if (id === null || id === undefined || id === '') {
+      return undefined;
+    }
+    return String(id);
+  };
+
+  // Check if row has a valid ID
+  const isValidRowId = (row: RowData): boolean => {
+    return getRowId(row) !== undefined;
+  };
+
+  // Not configured state
+  if (!isConfigured) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>{tableName}</CardTitle>
+          <CardDescription>Configure BetterBase to view table data</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
+            <h3 className="text-lg font-semibold mb-2">BetterBase Not Configured</h3>
+            <p className="text-sm text-muted-foreground max-w-md">
+              Set <code className="bg-muted px-1 rounded">NEXT_PUBLIC_BETTERBASE_URL</code> in your
+              environment to connect to your BetterBase backend.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Error state
+  if (isError) {
+    const errorMessage = error instanceof Error ? error.message : 'Failed to load table data';
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>{tableName}</CardTitle>
+          <CardDescription>Error loading table</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <AlertCircle className="h-12 w-12 text-destructive mb-4" />
+            <h3 className="text-lg font-semibold mb-2">Failed to Load Table</h3>
+            <p className="text-sm text-muted-foreground max-w-md">{errorMessage}</p>
+            <Button
+              variant="outline"
+              className="mt-4"
+              onClick={() => queryClient.invalidateQueries({ queryKey: ['table', tableName] })}
+            >
+              Retry
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <>
+      <Card>
+        <CardHeader className="flex flex-row items-start justify-between">
+          <div>
+            <CardTitle>{tableName}</CardTitle>
+            <CardDescription>
+              {isLoading
+                ? 'Loading...'
+                : `${rows.length} row${rows.length !== 1 ? 's' : ''} found`}
+            </CardDescription>
+          </div>
+          <Button onClick={() => setIsAddModalOpen(true)} size="sm">
+            <Plus className="h-4 w-4 mr-1" />
+            Add Row
+          </Button>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            // Loading state with skeleton rows
+            <div className="rounded-md border">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b bg-muted/50">
+                    <th className="px-4 py-3 text-left text-sm font-medium">Loading...</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {Array.from({ length: 5 }).map((_, i) => (
+                    <SkeletonRow key={i} columnCount={3} />
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ) : rows.length === 0 ? (
+            // Empty state
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+              <div className="rounded-full bg-muted p-4 mb-4">
+                <AlertCircle className="h-8 w-8 text-muted-foreground" />
+              </div>
+              <h3 className="text-lg font-semibold mb-2">No Rows Found</h3>
+              <p className="text-sm text-muted-foreground max-w-md mb-4">
+                This table is empty. Add your first row to get started.
+              </p>
+              <Button onClick={() => setIsAddModalOpen(true)}>
+                <Plus className="h-4 w-4 mr-1" />
+                Add Your First Row
+              </Button>
+            </div>
+          ) : (
+            // Table with data
+            <div className="rounded-md border overflow-x-auto">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b bg-muted/50">
+                    {columns.map((column) => (
+                      <th
+                        key={column}
+                        className="px-4 py-3 text-left text-sm font-medium text-muted-foreground"
+                      >
+                        {column}
+                      </th>
+                    ))}
+                    <th className="px-4 py-3 text-right text-sm font-medium text-muted-foreground">
+                      Actions
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {rows.map((row: RowData, rowIndex: number) => {
+                    const rowId = getRowId(row);
+                    const hasValidId = isValidRowId(row);
+                    return (
+                      <tr key={rowId || rowIndex} className="border-b last:border-b-0 hover:bg-muted/30">
+                        {columns.map((column) => (
+                          <td key={column} className="px-4 py-3">
+                            <EditableCell
+                              value={row[column]}
+                              column={column}
+                              rowId={rowId || ''}
+                              onSave={(col, value) => rowId && handleCellSave(rowId, col, value)}
+                              isIdColumn={column === idColumn}
+                            />
+                          </td>
+                        ))}
+                        <td className="px-4 py-3 text-right">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8 text-muted-foreground hover:text-destructive"
+                            onClick={() => rowId && setDeleteRowId(rowId)}
+                            disabled={!hasValidId}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Add Row Modal */}
+      <AddRowModal
+        isOpen={isAddModalOpen}
+        onClose={() => setIsAddModalOpen(false)}
+        onSubmit={handleAddRow}
+        columns={columns.filter((col) => col !== idColumn)} // Exclude ID column for new rows
+        isLoading={insertMutation.isPending}
+      />
+
+      {/* Confirm Delete Dialog */}
+      <ConfirmDeleteDialog
+        isOpen={deleteRowId !== null}
+        onClose={() => setDeleteRowId(null)}
+        onConfirm={handleDeleteRow}
+        isLoading={deleteMutation.isPending}
+      />
+    </>
   );
 }
diff --git a/betterbase/apps/dashboard/src/types/betterbase-client.d.ts b/betterbase/apps/dashboard/src/types/betterbase-client.d.ts
index c650d6f..4b6d16b 100644
--- a/betterbase/apps/dashboard/src/types/betterbase-client.d.ts
+++ b/betterbase/apps/dashboard/src/types/betterbase-client.d.ts
@@ -1,7 +1,55 @@
 declare module '@betterbase/client' {
-  export function createClient(config: { url: string; key?: string; schema?: string }): {
+  export interface SerializedError {
+    message: string;
+    name?: string;
+    stack?: string;
+  }
+
+  export interface QueryBuilderOptions {
+    singularKey?: string;
+  }
+
+  export interface BetterBaseResponse<T> {
+    data: T | null;
+    error: string | SerializedError | null;
+    count?: number;
+    pagination?: {
+      page: number;
+      pageSize: number;
+      total: number;
+    };
+  }
+
+  export interface QueryBuilder<T> {
+    select(fields?: string): this;
+    eq(column: string, value: unknown): this;
+    in(column: string, values: unknown[]): this;
+    limit(count: number): this;
+    offset(count: number): this;
+    order(column: string, direction?: 'asc' | 'desc'): this;
+    execute(): Promise<BetterBaseResponse<T[]>>;
+    single(id: string): Promise<BetterBaseResponse<T>>;
+    insert(data: Partial<T>): Promise<BetterBaseResponse<T>>;
+    update(id: string, data: Partial<T>): Promise<BetterBaseResponse<T>>;
+    delete(id: string): Promise<BetterBaseResponse<T>>;
+  }
+
+  export interface BetterBaseClient {
     auth: {
       getUser: () => Promise<{ data: unknown; error: { message: string } | null }>;
     };
-  };
+    from<T = unknown>(table: string, options?: QueryBuilderOptions): QueryBuilder<T>;
+  }
+
+  export function createClient(config: {
+    url: string;
+    key?: string;
+    schema?: string;
+    fetch?: typeof fetch;
+    storage?: {
+      getItem: (key: string) => string | null;
+      setItem: (key: string, value: string) => void;
+      removeItem: (key: string) => void;
+    };
+  }): BetterBaseClient;
 }
diff --git a/betterbase/bun.lock b/betterbase/bun.lock
index 67a5054..07c9515 100644
--- a/betterbase/bun.lock
+++ b/betterbase/bun.lock
@@ -12,19 +12,6 @@
         "typescript": "^5.6.0",
       },
     },
-    "apps/cli": {
-      "name": "@betterbase/cli-legacy",
-      "version": "0.0.0",
-      "bin": {
-        "bb-legacy": "./dist/index.js",
-      },
-      "dependencies": {
-        "@betterbase/cli": "workspace:*",
-      },
-      "devDependencies": {
-        "typescript": "^5.9.3",
-      },
-    },
     "apps/dashboard": {
       "name": "@betterbase/dashboard",
       "version": "0.1.0",
@@ -77,12 +64,40 @@
     "packages/client": {
       "name": "@betterbase/client",
       "version": "0.1.0",
+      "dependencies": {
+        "@betterbase/shared": "workspace:*",
+      },
       "devDependencies": {
         "@biomejs/biome": "^1.9.4",
         "@types/bun": "^1.3.8",
         "typescript": "^5.9.3",
       },
     },
+    "packages/core": {
+      "name": "@betterbase/core",
+      "version": "0.1.0",
+      "dependencies": {
+        "@betterbase/shared": "workspace:*",
+        "drizzle-orm": "^0.44.5",
+        "hono": "^4.6.10",
+        "zod": "^3.23.8",
+      },
+      "devDependencies": {
+        "@types/bun": "latest",
+        "typescript": "^5.6.0",
+      },
+    },
+    "packages/shared": {
+      "name": "@betterbase/shared",
+      "version": "0.1.0",
+      "dependencies": {
+        "zod": "^3.23.8",
+      },
+      "devDependencies": {
+        "@types/bun": "latest",
+        "typescript": "^5.6.0",
+      },
+    },
   },
   "packages": {
     "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],
@@ -91,12 +106,14 @@
 
     "@betterbase/cli": ["@betterbase/cli@workspace:packages/cli"],
 
-    "@betterbase/cli-legacy": ["@betterbase/cli-legacy@workspace:apps/cli"],
-
     "@betterbase/client": ["@betterbase/client@workspace:packages/client"],
 
+    "@betterbase/core": ["@betterbase/core@workspace:packages/core"],
+
     "@betterbase/dashboard": ["@betterbase/dashboard@workspace:apps/dashboard"],
 
+    "@betterbase/shared": ["@betterbase/shared@workspace:packages/shared"],
+
     "@biomejs/biome": ["@biomejs/biome@1.9.4", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "1.9.4", "@biomejs/cli-darwin-x64": "1.9.4", "@biomejs/cli-linux-arm64": "1.9.4", "@biomejs/cli-linux-arm64-musl": "1.9.4", "@biomejs/cli-linux-x64": "1.9.4", "@biomejs/cli-linux-x64-musl": "1.9.4", "@biomejs/cli-win32-arm64": "1.9.4", "@biomejs/cli-win32-x64": "1.9.4" }, "bin": { "biome": "bin/biome" } }, "sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog=="],
 
     "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@1.9.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-bFBsPWrNvkdKrNCYeAp+xo2HecOGPAy9WyNyB/jKnnedgzl4W4Hb9ZMzYNbf8dMCGmUdSavlYHiR01QaYR58cw=="],
@@ -455,6 +472,8 @@
 
     "dom-helpers": ["dom-helpers@5.2.1", "", { "dependencies": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" } }, "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA=="],
 
+    "drizzle-orm": ["drizzle-orm@0.44.7", "", { "peerDependencies": { "@aws-sdk/client-rds-data": ">=3", "@cloudflare/workers-types": ">=4", "@electric-sql/pglite": ">=0.2.0", "@libsql/client": ">=0.10.0", "@libsql/client-wasm": ">=0.10.0", "@neondatabase/serverless": ">=0.10.0", "@op-engineering/op-sqlite": ">=2", "@opentelemetry/api": "^1.4.1", "@planetscale/database": ">=1.13", "@prisma/client": "*", "@tidbcloud/serverless": "*", "@types/better-sqlite3": "*", "@types/pg": "*", "@types/sql.js": "*", "@upstash/redis": ">=1.34.7", "@vercel/postgres": ">=0.8.0", "@xata.io/client": "*", "better-sqlite3": ">=7", "bun-types": "*", "expo-sqlite": ">=14.0.0", "gel": ">=2", "knex": "*", "kysely": "*", "mysql2": ">=2", "pg": ">=8", "postgres": ">=3", "sql.js": ">=1", "sqlite3": ">=5" }, "optionalPeers": ["@aws-sdk/client-rds-data", "@cloudflare/workers-types", "@electric-sql/pglite", "@libsql/client", "@libsql/client-wasm", "@neondatabase/serverless", "@op-engineering/op-sqlite", "@opentelemetry/api", "@planetscale/database", "@prisma/client", "@tidbcloud/serverless", "@types/better-sqlite3", "@types/pg", "@types/sql.js", "@upstash/redis", "@vercel/postgres", "@xata.io/client", "better-sqlite3", "bun-types", "expo-sqlite", "gel", "knex", "kysely", "mysql2", "pg", "postgres", "sql.js", "sqlite3"] }, "sha512-quIpnYznjU9lHshEOAYLoZ9s3jweleHlZIAWR/jX9gAWNg/JhQ1wj0KGRf7/Zm+obRrYd9GjPVJg790QY9N5AQ=="],
+
     "electron-to-chromium": ["electron-to-chromium@1.5.286", "", {}, "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A=="],
 
     "emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
@@ -479,6 +498,8 @@
 
     "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
 
+    "hono": ["hono@4.12.0", "", {}, "sha512-NekXntS5M94pUfiVZ8oXXK/kkri+5WpX2/Ik+LVsl+uvw+soj4roXIsPqO+XsWrAw20mOzaXOZf3Q7PfB9A/IA=="],
+
     "iconv-lite": ["iconv-lite@0.4.24", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3" } }, "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA=="],
 
     "inquirer": ["inquirer@10.2.2", "", { "dependencies": { "@inquirer/core": "^9.1.0", "@inquirer/prompts": "^5.5.0", "@inquirer/type": "^1.5.3", "@types/mute-stream": "^0.0.4", "ansi-escapes": "^4.3.2", "mute-stream": "^1.0.0", "run-async": "^3.0.0", "rxjs": "^7.8.1" } }, "sha512-tyao/4Vo36XnUItZ7DnUXX4f1jVao2mSrleV/5IPtW/XAEA26hRVsbc68nuTEKWcr5vMP/1mVoT2O7u8H4v1Vg=="],
diff --git a/betterbase/packages/cli/src/utils/route-scanner.ts b/betterbase/packages/cli/src/utils/route-scanner.ts
index 57b5c21..4053842 100644
--- a/betterbase/packages/cli/src/utils/route-scanner.ts
+++ b/betterbase/packages/cli/src/utils/route-scanner.ts
@@ -28,9 +28,14 @@ function collectTsFiles(dir: string): string[] {
   const files: string[] = [];
 
   const walk = (current: string): void => {
-    let entries: ReturnType<typeof readdirSync>;
+    let entries: Array<{ isDirectory: () => boolean; isFile: () => boolean; name: string }>;
     try {
-      entries = readdirSync(current, { withFileTypes: true });
+      const rawEntries = readdirSync(current, { withFileTypes: true });
+      entries = rawEntries.map(e => ({
+        isDirectory: () => e.isDirectory(),
+        isFile: () => e.isFile(),
+        name: e.name.toString()
+      }));
     } catch {
       return;
     }
diff --git a/betterbase/packages/client/package.json b/betterbase/packages/client/package.json
index 7a886a7..0e9b355 100644
--- a/betterbase/packages/client/package.json
+++ b/betterbase/packages/client/package.json
@@ -42,6 +42,9 @@
     "dist",
     "README.md"
   ],
+  "dependencies": {
+    "@betterbase/shared": "workspace:*"
+  },
   "devDependencies": {
     "@types/bun": "^1.3.8",
     "typescript": "^5.9.3",
diff --git a/betterbase/packages/client/src/auth.ts b/betterbase/packages/client/src/auth.ts
index 808f4e9..0408ef4 100644
--- a/betterbase/packages/client/src/auth.ts
+++ b/betterbase/packages/client/src/auth.ts
@@ -1,6 +1,7 @@
 import { z } from 'zod';
 import type { BetterBaseResponse } from './types';
 import { AuthError, NetworkError, ValidationError } from './errors';
+import { serializeError } from '@betterbase/shared';
 
 export interface AuthCredentials {
   email: string;
@@ -55,7 +56,7 @@ export class AuthClient {
   async signUp(credentials: AuthCredentials): Promise<BetterBaseResponse<Session>> {
     const parsed = credentialsSchema.safeParse(credentials);
     if (!parsed.success) {
-      return { data: null, error: new ValidationError('Invalid sign up credentials', parsed.error.format()) };
+      return { data: null, error: serializeError(new ValidationError('Invalid sign up credentials', parsed.error.format())) };
     }
 
     const endpoint = `${this.url}/auth/signup`;
@@ -67,7 +68,7 @@ export class AuthClient {
       });
       if (!response.ok) {
         const error = await response.json().catch(() => ({ error: 'Signup failed' }));
-        return { data: null, error: new AuthError(error.error || 'Failed to sign up', error) };
+        return { data: null, error: serializeError(new AuthError(error.error || 'Failed to sign up', error)) };
       }
       const session = (await response.json()) as Session;
       this.storage?.setItem('betterbase_token', session.token);
@@ -76,7 +77,7 @@ export class AuthClient {
     } catch (error) {
       return {
         data: null,
-        error: new NetworkError(error instanceof Error ? error.message : 'Network request failed', error),
+        error: serializeError(new NetworkError(error instanceof Error ? error.message : 'Network request failed', error)),
       };
     }
   }
@@ -84,7 +85,7 @@ export class AuthClient {
   async signIn(credentials: Omit<AuthCredentials, 'name'>): Promise<BetterBaseResponse<Session>> {
     const parsed = credentialsSchema.safeParse(credentials);
     if (!parsed.success) {
-      return { data: null, error: new ValidationError('Invalid sign in credentials', parsed.error.format()) };
+      return { data: null, error: serializeError(new ValidationError('Invalid sign in credentials', parsed.error.format())) };
     }
 
     const endpoint = `${this.url}/auth/login`;
@@ -96,7 +97,7 @@ export class AuthClient {
       });
       if (!response.ok) {
         const error = await response.json().catch(() => ({ error: 'Login failed' }));
-        return { data: null, error: new AuthError(error.error || 'Invalid credentials', error) };
+        return { data: null, error: serializeError(new AuthError(error.error || 'Invalid credentials', error)) };
       }
       const session = (await response.json()) as Session;
       this.storage?.setItem('betterbase_token', session.token);
@@ -105,7 +106,7 @@ export class AuthClient {
     } catch (error) {
       return {
         data: null,
-        error: new NetworkError(error instanceof Error ? error.message : 'Network request failed', error),
+        error: serializeError(new NetworkError(error instanceof Error ? error.message : 'Network request failed', error)),
       };
     }
   }
@@ -127,7 +128,7 @@ export class AuthClient {
 
       if (!response.ok) {
         const error = await response.json().catch(() => ({ error: 'Logout failed' }));
-        return { data: null, error: new AuthError(error.error || 'Failed to sign out', error) };
+        return { data: null, error: serializeError(new AuthError(error.error || 'Failed to sign out', error)) };
       }
 
       return { data: null, error: null };
@@ -136,7 +137,7 @@ export class AuthClient {
       this.onAuthStateChange?.(null);
       return {
         data: null,
-        error: new NetworkError(error instanceof Error ? error.message : 'Network request failed', error),
+        error: serializeError(new NetworkError(error instanceof Error ? error.message : 'Network request failed', error)),
       };
     }
   }
@@ -146,7 +147,7 @@ export class AuthClient {
     const token = this.storage?.getItem('betterbase_token') ?? null;
 
     if (!token) {
-      return { data: null, error: new AuthError('Not authenticated') };
+      return { data: null, error: serializeError(new AuthError('Not authenticated')) };
     }
 
     try {
@@ -156,14 +157,14 @@ export class AuthClient {
       });
       if (!response.ok) {
         const error = await response.json().catch(() => ({ error: 'Failed to get user' }));
-        return { data: null, error: new AuthError(error.error || 'Failed to get user', error) };
+        return { data: null, error: serializeError(new AuthError(error.error || 'Failed to get user', error)) };
       }
       const result = await response.json();
       return { data: result.user, error: null };
     } catch (error) {
       return {
         data: null,
-        error: new NetworkError(error instanceof Error ? error.message : 'Network request failed', error),
+        error: serializeError(new NetworkError(error instanceof Error ? error.message : 'Network request failed', error)),
       };
     }
   }
diff --git a/betterbase/packages/client/src/client.ts b/betterbase/packages/client/src/client.ts
index 158d711..2230225 100644
--- a/betterbase/packages/client/src/client.ts
+++ b/betterbase/packages/client/src/client.ts
@@ -10,9 +10,9 @@ const BetterBaseConfigSchema = z.object({
   schema: z.string().optional(),
   fetch: z.function().optional(),
   storage: z.object({
-    getItem: z.function(),
-    setItem: z.function(),
-    removeItem: z.function(),
+    getItem: z.function().args(z.string()).returns(z.string().nullable()),
+    setItem: z.function().args(z.string(), z.string()),
+    removeItem: z.function().args(z.string()),
   }).optional(),
 });
 
@@ -30,7 +30,7 @@ export class BetterBaseClient {
       'Content-Type': 'application/json',
       ...(parsed.key ? { 'X-BetterBase-Key': parsed.key } : {}),
     };
-    this.fetchImpl = parsed.fetch ?? fetch;
+    this.fetchImpl = (parsed.fetch ?? fetch) as typeof fetch;
 
     this.auth = new AuthClient(
       this.url,
@@ -44,7 +44,7 @@ export class BetterBaseClient {
         this.realtime.setToken(token);
       },
       this.fetchImpl,
-      parsed.storage
+      parsed.storage ?? undefined
     );
 
     this.realtime = new RealtimeClient(this.url, this.auth.getToken());
diff --git a/betterbase/packages/client/src/query-builder.ts b/betterbase/packages/client/src/query-builder.ts
index 2a60b35..3be4e10 100644
--- a/betterbase/packages/client/src/query-builder.ts
+++ b/betterbase/packages/client/src/query-builder.ts
@@ -1,6 +1,7 @@
 import { z } from 'zod';
 import type { BetterBaseResponse, QueryOptions } from './types';
 import { BetterBaseError, NetworkError, ValidationError } from './errors';
+import { serializeError } from '@betterbase/shared';
 
 export interface QueryBuilderOptions {
   singularKey?: string;
@@ -69,7 +70,7 @@ export class QueryBuilder<T = unknown> {
 
   async execute(): Promise<BetterBaseResponse<T[]>> {
     if (this.executed) {
-      return { data: null, error: new ValidationError('QueryBuilder instances are single-use; create a new one via from().') };
+      return { data: null, error: serializeError(new ValidationError('QueryBuilder instances are single-use; create a new one via from().')) };
     }
     this.executed = true;
 
@@ -98,12 +99,12 @@ export class QueryBuilder<T = unknown> {
         const error = await response.json().catch(() => ({ error: 'Unknown error' }));
         return {
           data: null,
-          error: new BetterBaseError(
+          error: serializeError(new BetterBaseError(
             error.error || `Request failed with status ${response.status}`,
             'REQUEST_FAILED',
             error,
             response.status
-          ),
+          )),
         };
       }
 
@@ -117,7 +118,7 @@ export class QueryBuilder<T = unknown> {
     } catch (error) {
       return {
         data: null,
-        error: new NetworkError(error instanceof Error ? error.message : 'Network request failed', error),
+        error: serializeError(new NetworkError(error instanceof Error ? error.message : 'Network request failed', error)),
       };
     }
   }
@@ -134,7 +135,7 @@ export class QueryBuilder<T = unknown> {
         const error = await response.json().catch(() => ({ error: 'Not found' }));
         return {
           data: null,
-          error: new BetterBaseError(error.error || 'Resource not found', 'NOT_FOUND', error, response.status),
+          error: serializeError(new BetterBaseError(error.error || 'Resource not found', 'NOT_FOUND', error, response.status)),
         };
       }
       const result = await response.json();
@@ -143,7 +144,7 @@ export class QueryBuilder<T = unknown> {
     } catch (error) {
       return {
         data: null,
-        error: new NetworkError(error instanceof Error ? error.message : 'Network request failed', error),
+        error: serializeError(new NetworkError(error instanceof Error ? error.message : 'Network request failed', error)),
       };
     }
   }
@@ -160,7 +161,7 @@ export class QueryBuilder<T = unknown> {
         const error = await response.json().catch(() => ({ error: 'Insert failed' }));
         return {
           data: null,
-          error: new BetterBaseError(error.error || 'Failed to insert record', 'INSERT_FAILED', error, response.status),
+          error: serializeError(new BetterBaseError(error.error || 'Failed to insert record', 'INSERT_FAILED', error, response.status)),
         };
       }
       const result = await response.json();
@@ -169,7 +170,7 @@ export class QueryBuilder<T = unknown> {
     } catch (error) {
       return {
         data: null,
-        error: new NetworkError(error instanceof Error ? error.message : 'Network request failed', error),
+        error: serializeError(new NetworkError(error instanceof Error ? error.message : 'Network request failed', error)),
       };
     }
   }
@@ -186,7 +187,7 @@ export class QueryBuilder<T = unknown> {
         const error = await response.json().catch(() => ({ error: 'Update failed' }));
         return {
           data: null,
-          error: new BetterBaseError(error.error || 'Failed to update record', 'UPDATE_FAILED', error, response.status),
+          error: serializeError(new BetterBaseError(error.error || 'Failed to update record', 'UPDATE_FAILED', error, response.status)),
         };
       }
       const result = await response.json();
@@ -195,7 +196,7 @@ export class QueryBuilder<T = unknown> {
     } catch (error) {
       return {
         data: null,
-        error: new NetworkError(error instanceof Error ? error.message : 'Network request failed', error),
+        error: serializeError(new NetworkError(error instanceof Error ? error.message : 'Network request failed', error)),
       };
     }
   }
@@ -208,7 +209,7 @@ export class QueryBuilder<T = unknown> {
         const error = await response.json().catch(() => ({ error: 'Delete failed' }));
         return {
           data: null,
-          error: new BetterBaseError(error.error || 'Failed to delete record', 'DELETE_FAILED', error, response.status),
+          error: serializeError(new BetterBaseError(error.error || 'Failed to delete record', 'DELETE_FAILED', error, response.status)),
         };
       }
       const result = await response.json();
@@ -217,7 +218,7 @@ export class QueryBuilder<T = unknown> {
     } catch (error) {
       return {
         data: null,
-        error: new NetworkError(error instanceof Error ? error.message : 'Network request failed', error),
+        error: serializeError(new NetworkError(error instanceof Error ? error.message : 'Network request failed', error)),
       };
     }
   }
diff --git a/betterbase/packages/client/src/types.ts b/betterbase/packages/client/src/types.ts
index b11b24c..67433b9 100644
--- a/betterbase/packages/client/src/types.ts
+++ b/betterbase/packages/client/src/types.ts
@@ -1,4 +1,8 @@
 import type { BetterBaseError } from './errors';
+import type { BetterBaseResponse as SharedBetterBaseResponse } from '@betterbase/shared';
+
+// Re-export BetterBaseResponse from @betterbase/shared for external use
+export type BetterBaseResponse<T> = SharedBetterBaseResponse<T>;
 
 export interface BetterBaseConfig {
   url: string;
@@ -18,17 +22,6 @@ export interface QueryOptions {
   orderBy?: { column: string; direction: 'asc' | 'desc' };
 }
 
-export interface BetterBaseResponse<T> {
-  data: T | null;
-  error: BetterBaseError | null;
-  count?: number;
-  pagination?: {
-    limit: number;
-    offset: number;
-    hasMore: boolean;
-  };
-}
-
 export interface RealtimeSubscription {
   unsubscribe: () => void;
 }
diff --git a/betterbase/packages/core/package.json b/betterbase/packages/core/package.json
new file mode 100644
index 0000000..63b8b73
--- /dev/null
+++ b/betterbase/packages/core/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@betterbase/core",
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./config": "./src/config/index.ts",
+    "./providers": "./src/providers/index.ts",
+    "./rls": "./src/rls/index.ts",
+    "./storage": "./src/storage/index.ts",
+    "./webhooks": "./src/webhooks/index.ts",
+    "./graphql": "./src/graphql/index.ts",
+    "./functions": "./src/functions/index.ts",
+    "./middleware": "./src/middleware/index.ts",
+    "./migration": "./src/migration/index.ts"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "bun build ./src/index.ts --outdir ./dist"
+  },
+  "dependencies": {
+    "hono": "^4.6.10",
+    "drizzle-orm": "^0.44.5",
+    "zod": "^3.23.8",
+    "@betterbase/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.0",
+    "@types/bun": "latest"
+  }
+}
diff --git a/betterbase/packages/core/src/config/index.ts b/betterbase/packages/core/src/config/index.ts
new file mode 100644
index 0000000..177fe15
--- /dev/null
+++ b/betterbase/packages/core/src/config/index.ts
@@ -0,0 +1,3 @@
+// [stub] This module is implemented in Phase 10.2.
+// Do not implement here — wait for the Phase prompt.
+export {}
diff --git a/betterbase/packages/core/src/config/schema.ts b/betterbase/packages/core/src/config/schema.ts
new file mode 100644
index 0000000..610a716
--- /dev/null
+++ b/betterbase/packages/core/src/config/schema.ts
@@ -0,0 +1,42 @@
+import { z } from 'zod'
+
+export const ProviderTypeSchema = z.enum([
+  'neon', 'turso', 'planetscale', 'supabase', 'postgres', 'managed'
+])
+
+export type ProviderType = z.infer<typeof ProviderTypeSchema>
+
+export const BetterBaseConfigSchema = z.object({
+  project: z.object({
+    name: z.string().min(1),
+  }),
+  provider: z.object({
+    type: ProviderTypeSchema,
+    connectionString: z.string().optional(),
+    url: z.string().optional(),           // Turso
+    authToken: z.string().optional(),     // Turso
+  }),
+  storage: z.object({
+    provider: z.enum(['s3', 'r2', 'backblaze', 'minio', 'managed']),
+    bucket: z.string(),
+    region: z.string().optional(),
+    endpoint: z.string().optional(),
+  }).optional(),
+  webhooks: z.array(z.object({
+    id: z.string(),
+    table: z.string(),
+    events: z.array(z.enum(['INSERT', 'UPDATE', 'DELETE'])),
+    url: z.string(),
+    secret: z.string(),
+    enabled: z.boolean().default(true),
+  })).optional(),
+  graphql: z.object({
+    enabled: z.boolean().default(true),
+  }).optional(),
+})
+
+export type BetterBaseConfig = z.infer<typeof BetterBaseConfigSchema>
+
+export function defineConfig(config: z.input<typeof BetterBaseConfigSchema>): BetterBaseConfig {
+  return BetterBaseConfigSchema.parse(config)
+}
diff --git a/betterbase/packages/core/src/functions/index.ts b/betterbase/packages/core/src/functions/index.ts
new file mode 100644
index 0000000..56eb3a3
--- /dev/null
+++ b/betterbase/packages/core/src/functions/index.ts
@@ -0,0 +1,3 @@
+// [stub] This module is implemented in Phase 15.1.
+// Do not implement here — wait for the Phase prompt.
+export {}
diff --git a/betterbase/packages/core/src/graphql/index.ts b/betterbase/packages/core/src/graphql/index.ts
new file mode 100644
index 0000000..e602d58
--- /dev/null
+++ b/betterbase/packages/core/src/graphql/index.ts
@@ -0,0 +1,3 @@
+// [stub] This module is implemented in Phase 12.1.
+// Do not implement here — wait for the Phase prompt.
+export {}
diff --git a/betterbase/packages/core/src/index.ts b/betterbase/packages/core/src/index.ts
new file mode 100644
index 0000000..b210475
--- /dev/null
+++ b/betterbase/packages/core/src/index.ts
@@ -0,0 +1,3 @@
+export { defineConfig, BetterBaseConfigSchema } from './config/schema'
+export type { BetterBaseConfig } from './config/schema'
+export type { ProviderAdapter, ProviderConfig } from './providers/types'
diff --git a/betterbase/packages/core/src/middleware/index.ts b/betterbase/packages/core/src/middleware/index.ts
new file mode 100644
index 0000000..a1070da
--- /dev/null
+++ b/betterbase/packages/core/src/middleware/index.ts
@@ -0,0 +1,3 @@
+// [stub] This module is implemented in Phase 11.1b.
+// Do not implement here — wait for the Phase prompt.
+export {}
diff --git a/betterbase/packages/core/src/migration/index.ts b/betterbase/packages/core/src/migration/index.ts
new file mode 100644
index 0000000..18ddda4
--- /dev/null
+++ b/betterbase/packages/core/src/migration/index.ts
@@ -0,0 +1,3 @@
+// [stub] This module is implemented in Phase 11.2.
+// Do not implement here — wait for the Phase prompt.
+export {}
diff --git a/betterbase/packages/core/src/providers/index.ts b/betterbase/packages/core/src/providers/index.ts
new file mode 100644
index 0000000..c390eb6
--- /dev/null
+++ b/betterbase/packages/core/src/providers/index.ts
@@ -0,0 +1,3 @@
+// [stub] This module is implemented in Phase 10.1.
+// Do not implement here — wait for the Phase prompt.
+export {}
diff --git a/betterbase/packages/core/src/providers/types.ts b/betterbase/packages/core/src/providers/types.ts
new file mode 100644
index 0000000..6e869dd
--- /dev/null
+++ b/betterbase/packages/core/src/providers/types.ts
@@ -0,0 +1,20 @@
+import type { ProviderType } from '@betterbase/shared'
+
+export interface ProviderAdapter {
+  type: ProviderType
+  dialect: 'postgres' | 'mysql' | 'sqlite'
+  connect(config: ProviderConfig): Promise<DatabaseConnection>
+  getMigrationsDriver(): unknown           // typed per phase 10.1
+  supportsRLS(): boolean
+  supportsGraphQL(): boolean
+}
+
+export interface ProviderConfig {
+  type: ProviderType
+  connectionString?: string
+  url?: string
+  authToken?: string
+}
+
+// Placeholder — real connection type implemented in Phase 10.1
+export type DatabaseConnection = unknown
diff --git a/betterbase/packages/core/src/rls/index.ts b/betterbase/packages/core/src/rls/index.ts
new file mode 100644
index 0000000..97f3002
--- /dev/null
+++ b/betterbase/packages/core/src/rls/index.ts
@@ -0,0 +1,3 @@
+// [stub] This module is implemented in Phase 11.1a.
+// Do not implement here — wait for the Phase prompt.
+export {}
diff --git a/betterbase/packages/core/src/storage/index.ts b/betterbase/packages/core/src/storage/index.ts
new file mode 100644
index 0000000..b1aae27
--- /dev/null
+++ b/betterbase/packages/core/src/storage/index.ts
@@ -0,0 +1,3 @@
+// [stub] This module is implemented in Phase 14.1.
+// Do not implement here — wait for the Phase prompt.
+export {}
diff --git a/betterbase/packages/core/src/webhooks/index.ts b/betterbase/packages/core/src/webhooks/index.ts
new file mode 100644
index 0000000..c573a31
--- /dev/null
+++ b/betterbase/packages/core/src/webhooks/index.ts
@@ -0,0 +1,3 @@
+// [stub] This module is implemented in Phase 13.1.
+// Do not implement here — wait for the Phase prompt.
+export {}
diff --git a/betterbase/packages/core/tsconfig.json b/betterbase/packages/core/tsconfig.json
new file mode 100644
index 0000000..c2104f6
--- /dev/null
+++ b/betterbase/packages/core/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist"
+  },
+  "include": ["src/**/*"]
+}
diff --git a/betterbase/packages/shared/package.json b/betterbase/packages/shared/package.json
new file mode 100644
index 0000000..7b13be0
--- /dev/null
+++ b/betterbase/packages/shared/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "@betterbase/shared",
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.0",
+    "@types/bun": "latest"
+  },
+  "dependencies": {
+    "zod": "^3.23.8"
+  }
+}
diff --git a/betterbase/packages/shared/src/constants.ts b/betterbase/packages/shared/src/constants.ts
new file mode 100644
index 0000000..f471561
--- /dev/null
+++ b/betterbase/packages/shared/src/constants.ts
@@ -0,0 +1,8 @@
+export const BETTERBASE_VERSION = '0.1.0'
+export const DEFAULT_PORT = 3000
+export const DEFAULT_DB_PATH = 'local.db'
+export const CONTEXT_FILE_NAME = '.betterbase-context.json'
+export const CONFIG_FILE_NAME = 'betterbase.config.ts'
+export const MIGRATIONS_DIR = 'drizzle'
+export const FUNCTIONS_DIR = 'src/functions'
+export const POLICIES_DIR = 'src/db/policies'
diff --git a/betterbase/packages/shared/src/errors.ts b/betterbase/packages/shared/src/errors.ts
new file mode 100644
index 0000000..a9db061
--- /dev/null
+++ b/betterbase/packages/shared/src/errors.ts
@@ -0,0 +1,31 @@
+export class BetterBaseError extends Error {
+  constructor(
+    message: string,
+    public code: string,
+    public statusCode: number = 500
+  ) {
+    super(message)
+    this.name = 'BetterBaseError'
+  }
+}
+
+export class ValidationError extends BetterBaseError {
+  constructor(message: string) {
+    super(message, 'VALIDATION_ERROR', 400)
+    this.name = 'ValidationError'
+  }
+}
+
+export class NotFoundError extends BetterBaseError {
+  constructor(resource: string) {
+    super(`${resource} not found`, 'NOT_FOUND', 404)
+    this.name = 'NotFoundError'
+  }
+}
+
+export class UnauthorizedError extends BetterBaseError {
+  constructor(message = 'Unauthorized') {
+    super(message, 'UNAUTHORIZED', 401)
+    this.name = 'UnauthorizedError'
+  }
+}
diff --git a/betterbase/packages/shared/src/index.ts b/betterbase/packages/shared/src/index.ts
new file mode 100644
index 0000000..8616e66
--- /dev/null
+++ b/betterbase/packages/shared/src/index.ts
@@ -0,0 +1,39 @@
+// Types
+export type {
+  BetterBaseResponse,
+  SerializedError,
+  DBEventType,
+  DBEvent,
+  ProviderType,
+  PaginationParams,
+} from './types'
+
+// Errors
+export {
+  BetterBaseError,
+  ValidationError,
+  NotFoundError,
+  UnauthorizedError,
+} from './errors'
+
+// Constants
+export {
+  BETTERBASE_VERSION,
+  DEFAULT_PORT,
+  DEFAULT_DB_PATH,
+  CONTEXT_FILE_NAME,
+  CONFIG_FILE_NAME,
+  MIGRATIONS_DIR,
+  FUNCTIONS_DIR,
+  POLICIES_DIR,
+} from './constants'
+
+// Utils
+export {
+  isValidProjectName,
+  toCamelCase,
+  toSnakeCase,
+  safeJsonParse,
+  formatBytes,
+  serializeError,
+} from './utils'
diff --git a/betterbase/packages/shared/src/types.ts b/betterbase/packages/shared/src/types.ts
new file mode 100644
index 0000000..dbad5be
--- /dev/null
+++ b/betterbase/packages/shared/src/types.ts
@@ -0,0 +1,38 @@
+// JSON-serializable error representation
+export interface SerializedError {
+  message: string
+  name?: string
+  stack?: string
+}
+
+// Generic API response wrapper — used by both client and server
+export interface BetterBaseResponse<T> {
+  data: T | null
+  error: string | SerializedError | null
+  count?: number
+  pagination?: {
+    page: number
+    pageSize: number
+    total: number
+  }
+}
+
+// Database event type — used by realtime and webhooks
+export type DBEventType = 'INSERT' | 'UPDATE' | 'DELETE'
+
+export interface DBEvent {
+  table: string
+  type: DBEventType
+  record: Record<string, unknown>
+  old_record?: Record<string, unknown>
+  timestamp: string
+}
+
+// Provider types — used by core and cli
+export type ProviderType = 'neon' | 'turso' | 'planetscale' | 'supabase' | 'postgres' | 'managed'
+
+// Generic pagination params
+export interface PaginationParams {
+  limit?: number
+  offset?: number
+}
diff --git a/betterbase/packages/shared/src/utils.ts b/betterbase/packages/shared/src/utils.ts
new file mode 100644
index 0000000..a17b6ba
--- /dev/null
+++ b/betterbase/packages/shared/src/utils.ts
@@ -0,0 +1,76 @@
+import type { SerializedError } from './types'
+
+/**
+ * Converts an Error object into a JSON-serializable SerializedError
+ */
+export function serializeError(error: Error): SerializedError {
+  return {
+    message: error.message,
+    name: error.name,
+    stack: error.stack,
+  }
+}
+
+/**
+ * Validates if a string is a valid project name (slug-safe)
+ * Only allows lowercase letters, numbers, and hyphens
+ * Must start with a letter and end with a letter or number
+ */
+export function isValidProjectName(name: string): boolean {
+  if (!name || name.length === 0) {
+    return false
+  }
+  // Must start with a letter, contain only lowercase letters, numbers, and hyphens
+  // Must end with a letter or number
+  const slugPattern = /^[a-z][a-z0-9-]*[a-z0-9]$|^[a-z]$/
+  return slugPattern.test(name)
+}
+
+/**
+ * Converts a snake_case string to camelCase
+ */
+export function toCamelCase(str: string): string {
+  if (!str) return str
+  return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())
+}
+
+/**
+ * Converts a camelCase or PascalCase string to snake_case
+ */
+export function toSnakeCase(str: string): string {
+  if (!str) return str
+  const result = str.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`)
+  // Remove leading underscore for PascalCase inputs (e.g., "FooBar" -> "foo_bar", not "_foo_bar")
+  return result.startsWith('_') ? result.slice(1) : result
+}
+
+/**
+ * Safely parses JSON without throwing
+ * Returns null if parsing fails
+ */
+export function safeJsonParse<T>(str: string): T | null {
+  try {
+    return JSON.parse(str) as T
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Formats bytes to human readable string
+ * Uses binary units (KiB, MiB, GiB, etc.)
+ * @throws RangeError if bytes is negative
+ */
+export function formatBytes(bytes: number): string {
+  if (bytes < 0) {
+    throw new RangeError('bytes must be non-negative')
+  }
+  if (bytes === 0) return '0 B'
+
+  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB']
+  const k = 1024
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  const index = Math.min(i, units.length - 1)
+
+  return `${parseFloat((bytes / Math.pow(k, index)).toFixed(2))} ${units[index]}`
+}
diff --git a/betterbase/packages/shared/tsconfig.json b/betterbase/packages/shared/tsconfig.json
new file mode 100644
index 0000000..c2104f6
--- /dev/null
+++ b/betterbase/packages/shared/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist"
+  },
+  "include": ["src/**/*"]
+}
diff --git a/betterbase/templates/auth/README.md b/betterbase/templates/auth/README.md
index b744b15..c7ea971 100644
--- a/betterbase/templates/auth/README.md
+++ b/betterbase/templates/auth/README.md
@@ -1,3 +1,72 @@
-# Auth Template (Scaffold)
+# BetterBase Auth Template
 
-Placeholder for BetterAuth template files.
+This template contains the authentication files generated by `bb auth setup`. It serves as a reference for understanding what the CLI creates and can be used as a fallback or documentation.
+
+## Overview
+
+The `bb auth setup` command generates a complete authentication system with:
+
+- **Session-based authentication** with secure password hashing
+- **User signup, login, and logout** endpoints
+- **Auth middleware** for protecting routes
+- **Database schema** for sessions and accounts tables
+
+## Files
+
+### `src/routes/auth.ts`
+
+Hono route handler for authentication endpoints:
+
+- `POST /auth/signup` - Register a new user with email and password
+- `POST /auth/login` - Authenticate user and create session
+- `POST /auth/logout` - Invalidate session token
+
+### `src/middleware/auth.ts`
+
+Authentication middleware functions:
+
+- `requireAuth()` - Requires valid session token, returns 401 if missing/invalid
+- `optionalAuth()` - Attaches user to context if token present, but doesn't require it
+- `getUser(c)` - Helper to extract user from context
+
+### `src/db/auth-schema.ts`
+
+Drizzle ORM schema additions for authentication:
+
+- `sessions` table - Stores active user sessions with expiration
+- `accounts` table - Stores OAuth provider connections (for future use)
+
+### `src/auth/index.ts`
+
+BetterAuth server setup file (reserved for future BetterAuth integration).
+
+## Usage
+
+After running `bb auth setup`:
+
+1. Set `AUTH_SECRET` in your `.env` file
+2. Run `bun run db:push` to apply schema changes
+3. Use `requireAuth` middleware on protected routes:
+
+```typescript
+import { requireAuth, getUser } from './middleware/auth';
+
+app.use('/api/protected/*', requireAuth);
+
+app.get('/api/protected/profile', (c) => {
+  const user = getUser(c);
+  return c.json({ user });
+});
+```
+
+## Session Management
+
+- Sessions expire after 30 days by default
+- Session tokens are passed via `Authorization: Bearer <token>` header
+- Passwords are hashed using Bun's built-in `Bun.password.hash()` and `Bun.password.verify()`
+
+## Notes
+
+- This template matches exactly what `bb auth setup` generates
+- Do not modify these files directly - they are overwritten on each `bb auth setup` run
+- For custom auth logic, create separate files and import from these
diff --git a/betterbase/templates/auth/src/auth/index.ts b/betterbase/templates/auth/src/auth/index.ts
new file mode 100644
index 0000000..c8a9ccf
--- /dev/null
+++ b/betterbase/templates/auth/src/auth/index.ts
@@ -0,0 +1,2 @@
+// Re-export the centralized auth route from routes/auth.ts
+export { authRoute } from '../routes/auth';
diff --git a/betterbase/templates/auth/src/db/auth-schema.ts b/betterbase/templates/auth/src/db/auth-schema.ts
new file mode 100644
index 0000000..8353c93
--- /dev/null
+++ b/betterbase/templates/auth/src/db/auth-schema.ts
@@ -0,0 +1,23 @@
+import { sqliteTable, text, integer, uniqueIndex } from 'drizzle-orm/sqlite-core';
+import { users } from './schema';
+
+// Auth tables (generated by BetterAuth)
+export const sessions = sqliteTable('sessions', {
+  id: text('id').primaryKey(),
+  userId: text('user_id').notNull().references(() => users.id),
+  expiresAt: integer('expires_at', { mode: 'timestamp' }).notNull(),
+  ipAddress: text('ip_address'),
+  userAgent: text('user_agent'),
+});
+
+export const accounts = sqliteTable('accounts', {
+  id: text('id').primaryKey(),
+  userId: text('user_id').notNull().references(() => users.id),
+  provider: text('provider').notNull(),
+  providerAccountId: text('provider_account_id').notNull(),
+  accessToken: text('access_token'),
+  refreshToken: text('refresh_token'),
+  expiresAt: integer('expires_at', { mode: 'timestamp' }),
+}, (t) => ({
+  providerUnique: uniqueIndex('provider_unique').on(t.provider, t.providerAccountId),
+}));
diff --git a/betterbase/templates/auth/src/middleware/auth.ts b/betterbase/templates/auth/src/middleware/auth.ts
new file mode 100644
index 0000000..9497aa0
--- /dev/null
+++ b/betterbase/templates/auth/src/middleware/auth.ts
@@ -0,0 +1,76 @@
+import { and, eq, gt } from 'drizzle-orm';
+import { createMiddleware } from 'hono/factory';
+import { db } from '../db';
+import { sessions, users } from '../db/schema';
+
+export interface AuthContext {
+  user: {
+    id: string;
+    email: string;
+    name: string | null;
+  };
+}
+
+function getSessionToken(authHeader: string | undefined): string | null {
+  if (!authHeader) return null;
+
+  const parts = authHeader.split(' ');
+  if (parts.length !== 2 || parts[0] !== 'Bearer') return null;
+
+  return parts[1];
+}
+
+async function validateSession(token: string): Promise<AuthContext['user'] | null> {
+  const session = await db
+    .select()
+    .from(sessions)
+    .where(and(eq(sessions.id, token), gt(sessions.expiresAt, new Date())))
+    .limit(1);
+
+  if (session.length === 0) return null;
+
+  const user = await db
+    .select({
+      id: users.id,
+      email: users.email,
+      name: users.name,
+    })
+    .from(users)
+    .where(eq(users.id, session[0].userId))
+    .limit(1);
+
+  return user.length > 0 ? user[0] : null;
+}
+
+export const requireAuth = createMiddleware<{ Variables: AuthContext }>(async (c, next) => {
+  const token = getSessionToken(c.req.header('Authorization'));
+
+  if (!token) {
+    return c.json({ error: 'Unauthorized: No token provided' }, 401);
+  }
+
+  const user = await validateSession(token);
+  if (!user) {
+    return c.json({ error: 'Unauthorized: Invalid or expired token' }, 401);
+  }
+
+  c.set('user', user);
+  await next();
+});
+
+export const optionalAuth = createMiddleware<{ Variables: Partial<AuthContext> }>(async (c, next) => {
+  const token = getSessionToken(c.req.header('Authorization'));
+
+  if (token) {
+    const user = await validateSession(token);
+    if (user) {
+      c.set('user', user);
+    }
+  }
+
+  await next();
+});
+
+export function getUser(c: { get: (key: 'user') => AuthContext['user'] }): AuthContext['user'] {
+  return c.get('user');
+}
diff --git a/betterbase/templates/auth/src/routes/auth.ts b/betterbase/templates/auth/src/routes/auth.ts
new file mode 100644
index 0000000..3439a3f
--- /dev/null
+++ b/betterbase/templates/auth/src/routes/auth.ts
@@ -0,0 +1,144 @@
+import { Hono } from 'hono';
+import { z } from 'zod';
+import { eq } from 'drizzle-orm';
+import { db } from '../db';
+import { users, sessions } from '../db/schema';
+
+const authRoute = new Hono();
+
+const signupSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8),
+  name: z.string().min(1).optional(),
+});
+
+const loginSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8),
+});
+
+authRoute.post('/signup', async (c) => {
+  let rawBody: unknown;
+  try {
+    rawBody = await c.req.json();
+  } catch (err) {
+    const details = err instanceof Error ? err.message : String(err);
+    return c.json({ error: 'Invalid JSON', details }, 400);
+  }
+
+  const result = signupSchema.safeParse(rawBody);
+  if (!result.success) {
+    return c.json({ error: 'Invalid signup payload', details: result.error.format() }, 400);
+  }
+
+  const body = result.data;
+  const passwordHash = await Bun.password.hash(body.password);
+
+  let createdUser;
+  try {
+    const created = await db
+      .insert(users)
+      .values({
+        email: body.email,
+        name: body.name ?? null,
+        passwordHash,
+      })
+      .returning();
+    createdUser = created[0];
+  } catch (err) {
+    // Check for SQLite unique constraint error (code 2067 for UNIQUE constraint)
+    const errorMsg = err instanceof Error ? err.message : String(err);
+    if (errorMsg.includes('UNIQUE') || errorMsg.includes('unique') || errorMsg.includes('duplicate')) {
+      return c.json({ error: 'Email already registered' }, 409);
+    }
+    return c.json({ error: 'Database error', details: errorMsg }, 500);
+  }
+
+  if (!createdUser) {
+    return c.json({ error: 'Failed to create user record' }, 500);
+  }
+
+  return c.json({
+    user: {
+      id: createdUser.id,
+      email: createdUser.email,
+      name: createdUser.name,
+    },
+  }, 201);
+});
+
+authRoute.post('/login', async (c) => {
+  let rawBody: unknown;
+  try {
+    rawBody = await c.req.json();
+  } catch (err) {
+    const details = err instanceof Error ? err.message : String(err);
+    return c.json({ error: 'Invalid JSON', details }, 400);
+  }
+
+  const result = loginSchema.safeParse(rawBody);
+  if (!result.success) {
+    return c.json({ error: 'Invalid login payload', details: result.error.format() }, 400);
+  }
+
+  const body = result.data;
+
+  const user = await db.select().from(users).where(eq(users.email, body.email)).limit(1);
+  if (user.length === 0 || !user[0].passwordHash) {
+    return c.json({ error: 'Invalid credentials' }, 401);
+  }
+
+  const validPassword = await Bun.password.verify(body.password, user[0].passwordHash);
+  if (!validPassword) {
+    return c.json({ error: 'Invalid credentials' }, 401);
+  }
+
+  const sessionId = crypto.randomUUID();
+  const expiresAt = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000);
+
+  // Extract client IP, handling comma-separated x-forwarded-for
+  const cfIp = c.req.header('cf-connecting-ip');
+  const forwardedFor = c.req.header('x-forwarded-for');
+  let ipAddress: string | null = null;
+  if (cfIp) {
+    ipAddress = cfIp.trim();
+  } else if (forwardedFor) {
+    // x-forwarded-for may be a comma-separated list; take the first (client) IP
+    const parts = forwardedFor.split(',');
+    for (const part of parts) {
+      const trimmed = part.trim();
+      if (trimmed) {
+        ipAddress = trimmed;
+        break;
+      }
+    }
+  }
+
+  await db.insert(sessions).values({
+    id: sessionId,
+    userId: user[0].id,
+    expiresAt,
+    ipAddress,
+    userAgent: c.req.header('user-agent') || null,
+  });
+
+  return c.json({
+    token: sessionId,
+    user: {
+      id: user[0].id,
+      email: user[0].email,
+      name: user[0].name,
+    },
+  });
+});
+
+authRoute.post('/logout', async (c) => {
+  const token = c.req.header('Authorization')?.split(' ')[1];
+  if (token) {
+    await db.delete(sessions).where(eq(sessions.id, token));
+  }
+
+  return c.json({ message: 'Logged out' });
+});
+
+export { authRoute };
diff --git a/betterbase_stubs_solver.md b/betterbase_stubs_solver.md
new file mode 100644
index 0000000..9ad1e4d
--- /dev/null
+++ b/betterbase_stubs_solver.md
@@ -0,0 +1,721 @@
+# BetterBase — Stubs Solver
+> **Purpose:** This file is an instruction guide for an LLM IDE agent (Cursor, Codex, Claude) to diagnose and implement all unfinished stubs in the BetterBase codebase before new phases are built on top of them.
+> **Rule:** Work through each stub in the ORDER listed. Do not skip ahead. Each stub may depend on the previous one.
+> **When done with every stub:** Run `bun run typecheck` and `bun run build` from the monorepo root and confirm zero errors before declaring completion.
+
+---
+
+## PROJECT CONTEXT
+
+```text
+MONOREPO ROOT: /betterbase
+RUNTIME: Bun
+LANGUAGE: TypeScript (strict mode, no `any` allowed)
+FRAMEWORK: Hono
+ORM: Drizzle ORM
+AUTH: BetterAuth
+VALIDATION: Zod
+MONOREPO TOOL: Turborepo
+CLI PROMPT LIBRARY: inquirer@^10.2.2 (NOT @clack/prompts)
+CLI LOGGING: chalk@^5.3.0 via packages/cli/src/utils/logger.ts
+
+EXISTING WORKING CODE (do not break these):
+- packages/cli/src/commands/init.ts         ✅ bb init
+- packages/cli/src/commands/dev.ts          ✅ bb dev
+- packages/cli/src/commands/migrate.ts      ✅ bb migrate
+- packages/cli/src/commands/auth.ts         ✅ bb auth setup
+- packages/cli/src/commands/generate.ts     ✅ bb generate crud
+- packages/cli/src/utils/logger.ts          ✅ info/warn/error/success
+- packages/cli/src/utils/prompts.ts         ✅ text/confirm/select wrappers
+- packages/cli/src/utils/scanner.ts         ✅ SchemaScanner
+- packages/cli/src/utils/route-scanner.ts   ✅ RouteScanner
+- packages/cli/src/utils/context-generator.ts ✅ ContextGenerator
+- packages/client/src/client.ts             ✅ BetterBaseClient + createClient
+- packages/client/src/query-builder.ts      ✅ QueryBuilder
+- packages/client/src/auth.ts               ✅ AuthClient
+- packages/client/src/realtime.ts           ✅ RealtimeClient
+- packages/client/src/errors.ts             ✅ Error classes
+- templates/base/ (entire template)         ✅ working Hono + Drizzle + SQLite app
+- apps/dashboard/ (layout + pages listed below as done) ✅
+```
+
+---
+
+## STUB INVENTORY
+
+There are **7 stubs** to solve, split across 3 packages:
+
+| # | Stub | Package | Priority |
+|---|------|---------|----------|
+| 1 | `packages/shared/` — entirely empty | packages/shared | FIRST — others depend on it |
+| 2 | `packages/core/` — entirely empty | packages/core | SECOND — Phases 10-15 build here |
+| 3 | `templates/auth/` — placeholder only | templates | THIRD |
+| 4 | `apps/dashboard/src/components/tables/table-editor.tsx` | apps/dashboard | FOURTH |
+| 5 | `apps/dashboard/src/app/(dashboard)/api-explorer/page.tsx` | apps/dashboard | FIFTH |
+| 6 | `apps/dashboard/src/app/(dashboard)/auth/page.tsx` | apps/dashboard | SIXTH |
+| 7 | `apps/dashboard/src/app/(dashboard)/logs/page.tsx` | apps/dashboard | SEVENTH |
+
+---
+
+## STUB 1: `packages/shared/` — Shared Utilities and Types
+
+### Current state
+Only has a `README.md`. No source files, no `package.json` `src/` folder, no exports.
+
+### What it needs to become
+A shared package (`@betterbase/shared`) that contains common types, utilities, constants, error primitives, and validation schemas used by both `packages/cli` and `packages/core`. This prevents duplication between the two packages.
+
+### Deliverables
+
+**`packages/shared/package.json`**
+```json
+{
+  "name": "@betterbase/shared",
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.0",
+    "@types/bun": "latest"
+  },
+  "dependencies": {
+    "zod": "^3.23.8"
+  }
+}
+```
+
+**`packages/shared/tsconfig.json`**
+- Extend `../../tsconfig.base.json`
+- Include `src/**/*`
+
+**`packages/shared/src/types.ts`**
+Export these shared types:
+```typescript
+// Generic API response wrapper — used by both client and server
+export interface BetterBaseResponse<T> {
+  data: T | null
+  error: string | null
+  count?: number
+  pagination?: {
+    page: number
+    pageSize: number
+    total: number
+  }
+}
+
+// Database event type — used by realtime and webhooks
+export type DBEventType = 'INSERT' | 'UPDATE' | 'DELETE'
+
+export interface DBEvent {
+  table: string
+  type: DBEventType
+  record: Record<string, unknown>
+  old_record?: Record<string, unknown>
+  timestamp: string
+}
+
+// Provider types — used by core and cli
+export type ProviderType = 'neon' | 'turso' | 'planetscale' | 'supabase' | 'postgres' | 'managed'
+
+// Generic pagination params
+export interface PaginationParams {
+  limit?: number
+  offset?: number
+}
+```
+
+**`packages/shared/src/errors.ts`**
+Export base error primitives:
+```typescript
+export class BetterBaseError extends Error {
+  constructor(
+    message: string,
+    public code: string,
+    public statusCode: number = 500
+  ) {
+    super(message)
+    this.name = 'BetterBaseError'
+  }
+}
+
+export class ValidationError extends BetterBaseError {
+  constructor(message: string) {
+    super(message, 'VALIDATION_ERROR', 400)
+    this.name = 'ValidationError'
+  }
+}
+
+export class NotFoundError extends BetterBaseError {
+  constructor(resource: string) {
+    super(`${resource} not found`, 'NOT_FOUND', 404)
+    this.name = 'NotFoundError'
+  }
+}
+
+export class UnauthorizedError extends BetterBaseError {
+  constructor(message = 'Unauthorized') {
+    super(message, 'UNAUTHORIZED', 401)
+    this.name = 'UnauthorizedError'
+  }
+}
+```
+
+**`packages/shared/src/constants.ts`**
+```typescript
+export const BETTERBASE_VERSION = '0.1.0'
+export const DEFAULT_PORT = 3000
+export const DEFAULT_DB_PATH = 'local.db'
+export const CONTEXT_FILE_NAME = '.betterbase-context.json'
+export const CONFIG_FILE_NAME = 'betterbase.config.ts'
+export const MIGRATIONS_DIR = 'drizzle'
+export const FUNCTIONS_DIR = 'src/functions'
+export const POLICIES_DIR = 'src/db/policies'
+```
+
+**`packages/shared/src/utils.ts`**
+```typescript
+// Slug-safe name validation
+export function isValidProjectName(name: string): boolean { ... }
+
+// Convert snake_case to camelCase
+export function toCamelCase(str: string): string { ... }
+
+// Convert camelCase to snake_case
+export function toSnakeCase(str: string): string { ... }
+
+// Safely parse JSON without throwing
+export function safeJsonParse<T>(str: string): T | null { ... }
+
+// Format bytes to human readable
+export function formatBytes(bytes: number): string { ... }
+```
+
+**`packages/shared/src/index.ts`**
+Re-export everything from the above files.
+
+### Constraints
+- Zero dependencies on `packages/cli` or `packages/core` (shared is the base layer)
+- All types must use Zod schemas where runtime validation is needed
+- `BetterBaseResponse<T>` here should replace the one in `packages/client/src/types.ts` — update client to import from `@betterbase/shared` instead
+
+### Success Criteria
+- [ ] `bun run typecheck` passes in `packages/shared/`
+- [ ] `@betterbase/shared` is importable in both `packages/cli` and `packages/core`
+- [ ] All exports are accessible from the root `@betterbase/shared` import
+- [ ] No circular dependencies
+
+---
+
+## STUB 2: `packages/core/` — Core Backend Engine
+
+### Current state
+Only has a `README.md`. This is the most critical stub. Phases 10–15 (Provider Adapters, RLS, GraphQL, Webhooks, Storage, Edge Functions) all build inside this package.
+
+### What it needs to become
+A fully structured package (`@betterbase/core`) with the foundational scaffolding in place — package setup, folder structure, config schema, base interfaces — so that Phase 10–15 prompts can be pasted in and immediately work.
+
+### Important
+Do NOT implement the full business logic of Phases 10–15 here. That is done separately via the Phase prompts. This stub solve is about creating the **skeleton** — the package manifest, folder structure, base config schema, and re-exports — so nothing is broken when Phase work begins.
+
+### Deliverables
+
+**`packages/core/package.json`**
+```json
+{
+  "name": "@betterbase/core",
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./config": "./src/config/index.ts",
+    "./providers": "./src/providers/index.ts",
+    "./rls": "./src/rls/index.ts",
+    "./storage": "./src/storage/index.ts",
+    "./webhooks": "./src/webhooks/index.ts",
+    "./graphql": "./src/graphql/index.ts",
+    "./functions": "./src/functions/index.ts",
+    "./middleware": "./src/middleware/index.ts",
+    "./migration": "./src/migration/index.ts"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "bun build ./src/index.ts --outdir ./dist"
+  },
+  "dependencies": {
+    "hono": "^4.6.10",
+    "drizzle-orm": "^0.44.5",
+    "zod": "^3.23.8",
+    "@betterbase/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.0",
+    "@types/bun": "latest"
+  }
+}
+```
+
+**`packages/core/tsconfig.json`**
+- Extend `../../tsconfig.base.json`
+- Include `src/**/*`
+
+**Create the following folder structure with index.ts placeholder files in each:**
+```text
+packages/core/src/
+  index.ts                    ← main export, re-exports from all submodules
+  config/
+    index.ts                  ← [stub] will be implemented in Phase 10.2
+    schema.ts                 ← BetterBaseConfig Zod schema (implement this now)
+  providers/
+    index.ts                  ← [stub] Phase 10.1
+    types.ts                  ← ProviderAdapter interface (implement this now)
+  rls/
+    index.ts                  ← [stub] Phase 11.1
+  graphql/
+    index.ts                  ← [stub] Phase 12.1
+  webhooks/
+    index.ts                  ← [stub] Phase 13.1
+  storage/
+    index.ts                  ← [stub] Phase 14.1
+  functions/
+    index.ts                  ← [stub] Phase 15.1
+  middleware/
+    index.ts                  ← [stub] Phase 11.1 (rls-session)
+  migration/
+    index.ts                  ← [stub] Phase 11.2 (rls-migrator)
+```
+
+**`packages/core/src/config/schema.ts`** — Implement this now:
+```typescript
+import { z } from 'zod'
+import type { ProviderType } from '@betterbase/shared'
+
+export const ProviderTypeSchema = z.enum([
+  'neon', 'turso', 'planetscale', 'supabase', 'postgres', 'managed'
+])
+
+export const BetterBaseConfigSchema = z.object({
+  project: z.object({
+    name: z.string().min(1),
+  }),
+  provider: z.object({
+    type: ProviderTypeSchema,
+    connectionString: z.string().optional(),
+    url: z.string().optional(),           // Turso
+    authToken: z.string().optional(),     // Turso
+  }),
+  storage: z.object({
+    provider: z.enum(['s3', 'r2', 'backblaze', 'minio', 'managed']),
+    bucket: z.string(),
+    region: z.string().optional(),
+    endpoint: z.string().optional(),
+  }).optional(),
+  webhooks: z.array(z.object({
+    id: z.string(),
+    table: z.string(),
+    events: z.array(z.enum(['INSERT', 'UPDATE', 'DELETE'])),
+    url: z.string(),
+    secret: z.string(),
+    enabled: z.boolean().default(true),
+  })).optional(),
+  graphql: z.object({
+    enabled: z.boolean().default(true),
+  }).optional(),
+})
+
+export type BetterBaseConfig = z.infer<typeof BetterBaseConfigSchema>
+
+export function defineConfig(config: BetterBaseConfig): BetterBaseConfig {
+  return BetterBaseConfigSchema.parse(config)
+}
+```
+
+**`packages/core/src/providers/types.ts`** — Implement this now:
+```typescript
+import type { ProviderType } from '@betterbase/shared'
+
+export interface ProviderAdapter {
+  type: ProviderType
+  dialect: 'postgres' | 'mysql' | 'sqlite'
+  connect(config: ProviderConfig): Promise<DatabaseConnection>
+  getMigrationsDriver(): unknown           // typed per phase 10.1
+  supportsRLS(): boolean
+  supportsGraphQL(): boolean
+}
+
+export interface ProviderConfig {
+  type: ProviderType
+  connectionString?: string
+  url?: string
+  authToken?: string
+}
+
+// Placeholder — real connection type implemented in Phase 10.1
+export type DatabaseConnection = unknown
+```
+
+**All other `index.ts` stub files** — add this comment so the agent doesn't leave them empty:
+```typescript
+// [stub] This module is implemented in Phase XX.
+// Do not implement here — wait for the Phase prompt.
+export {}
+```
+
+**`packages/core/src/index.ts`** — re-export what is implemented now:
+```typescript
+export { defineConfig, BetterBaseConfigSchema } from './config/schema'
+export type { BetterBaseConfig } from './config/schema'
+export type { ProviderAdapter, ProviderConfig } from './providers/types'
+```
+
+### Constraints
+- Only implement `config/schema.ts` and `providers/types.ts` fully. Everything else is a typed stub.
+- The stub `index.ts` files must export `{}` to be valid TypeScript modules
+- Add `@betterbase/shared` as a workspace dependency and import `ProviderType` from it
+- Do not install drizzle adapter packages yet — those come in Phase 10.1
+
+### Success Criteria
+- [ ] `bun run typecheck` passes in `packages/core/`
+- [ ] `@betterbase/core` is importable with no errors
+- [ ] `defineConfig()` validates a config object correctly with Zod
+- [ ] All submodule paths (`@betterbase/core/providers`, etc.) resolve without errors
+- [ ] No actual Phase 10–15 logic is implemented yet — only structure
+
+---
+
+## STUB 3: `templates/auth/` — Auth Template
+
+### Current state
+Only has a `README.md` placeholder. The `bb auth setup` command in `packages/cli/src/commands/auth.ts` already generates auth files programmatically (it writes code as strings). But there is no actual template directory that auth files are copied from.
+
+### What it needs to become
+A proper auth template directory that mirrors what `bb auth setup` generates. This is used as a reference and fallback for the CLI command, and also as documentation for users who want to understand what auth setup creates.
+
+### How `bb auth setup` currently works (read this first)
+Look at `packages/cli/src/commands/auth.ts`. It has:
+- `AUTH_SCHEMA_BLOCK` — SQL/Drizzle for sessions and accounts tables
+- `AUTH_ROUTE_FILE` — the auth routes Hono handler
+- `AUTH_MIDDLEWARE_FILE` — requireAuth/optionalAuth middleware
+
+The template should match these exactly.
+
+### Deliverables
+
+**`templates/auth/README.md`** — Update with actual documentation explaining what is in this folder.
+
+**`templates/auth/src/auth/index.ts`**
+- BetterAuth server setup file
+- Match exactly what `AUTH_ROUTE_FILE` in `auth.ts` generates
+
+**`templates/auth/src/middleware/auth.ts`**
+- requireAuth() and optionalAuth() middleware
+- Match exactly what `AUTH_MIDDLEWARE_FILE` in `auth.ts` generates
+
+**`templates/auth/src/db/auth-schema.ts`**
+- Drizzle schema additions for sessions and accounts tables
+- Match exactly what `AUTH_SCHEMA_BLOCK` in `auth.ts` generates
+
+**`templates/auth/src/routes/auth.ts`**
+- Hono route handler for auth endpoints (signUp, signIn, signOut, getUser)
+
+### Constraints
+- Every file in this template must be 100% consistent with what `bb auth setup` writes
+- Do NOT change `bb auth setup` behavior — make the template match it, not the other way around
+- Files must be valid TypeScript that compiles without errors
+
+### Success Criteria
+- [ ] `templates/auth/` contains 4 source files (not counting README)
+- [ ] Each file matches the output of `bb auth setup` exactly
+- [ ] All files compile with TypeScript strict mode
+- [ ] README explains the purpose of each file
+
+---
+
+## STUB 4: `apps/dashboard/src/components/tables/table-editor.tsx`
+
+### Current state
+```typescript
+// Current stub — just exports a component name
+export const TableEditor = () => null
+```
+Used by `apps/dashboard/src/app/(dashboard)/tables/[table]/page.tsx`.
+
+### What it needs to become
+A functional table editor component that:
+- Receives a `tableName` prop (string)
+- Fetches rows from the BetterBase API using `@betterbase/client`
+- Displays rows in a table with sortable columns
+- Allows inline editing of individual cells
+- Supports adding a new row via a form
+- Supports deleting a row with a confirmation
+- Shows a loading skeleton while fetching
+- Shows an empty state when no rows exist
+
+### Important context
+- Uses the existing `betterbase` client singleton from `apps/dashboard/src/lib/betterbase.ts`
+- Uses TanStack Query (`@tanstack/react-query`) for data fetching (already installed)
+- Uses existing UI components: `Card`, `Button` from `@/components/ui/`
+- Uses `lucide-react` for icons (already installed)
+- Must be a `'use client'` component
+- Styling via Tailwind CSS + the existing CSS variables in `globals.css`
+
+### Deliverables
+A single file `apps/dashboard/src/components/tables/table-editor.tsx` that exports `TableEditor`.
+
+Key features:
+```typescript
+interface TableEditorProps {
+  tableName: string
+}
+
+export function TableEditor({ tableName }: TableEditorProps) {
+  // 1. useQuery to fetch rows: betterbase.from(tableName).execute()
+  // 2. Render column headers dynamically from first row keys
+  // 3. Each row is a <tr> with cells
+  // 4. Click a cell → inline edit mode (input replaces text)
+  // 5. Save edit → useMutation calling betterbase.from(tableName).update(id, data)
+  // 6. "Add Row" button → opens a modal/drawer with empty form fields
+  // 7. Delete row → confirm dialog → betterbase.from(tableName).delete(id)
+  // 8. Loading state → skeleton rows
+  // 9. Empty state → centered message with "Add your first row" button
+}
+```
+
+### Constraints
+- Use `@tanstack/react-query` `useQuery` and `useMutation` — not `useState` + `useEffect` + `fetch`
+- No new UI library installs — use existing Radix UI, Tailwind, lucide-react
+- Must handle the case where `betterbase` client URL is not configured (show a setup prompt)
+- TypeScript strict mode — no `any` on row data, use `Record<string, unknown>` with type guards
+
+### Success Criteria
+- [ ] Component renders without errors when `tableName` is passed
+- [ ] Rows load and display correctly
+- [ ] Inline cell editing works and saves
+- [ ] Add row form works
+- [ ] Delete with confirmation works
+- [ ] Loading and empty states render correctly
+- [ ] TypeScript compiles with zero errors
+
+---
+
+## STUB 5: `apps/dashboard/src/app/(dashboard)/api-explorer/page.tsx`
+
+### Current state
+```typescript
+export default function ApiPage() {
+  return <div>API Explorer — Coming in Phase 9.3</div>
+}
+```
+
+### What it needs to become
+A functional API Explorer page where developers can:
+- Browse all available endpoints from `.betterbase-context.json` (fetched from the backend)
+- Select an endpoint and see its method, path, auth requirement, input schema
+- Send a test request with a JSON body editor
+- See the response (status code, headers, body) formatted as JSON
+- Switch between endpoints via a sidebar list
+
+### Structure
+```text
+Left panel (1/3 width):
+  - List of endpoints grouped by table/route
+  - Each item shows: METHOD badge + path
+  - Click to select
+
+Right panel (2/3 width):
+  - Selected endpoint details:
+    - Method + Path
+    - Auth required: Yes/No badge
+    - Request body editor (textarea with JSON)
+    - "Send Request" button
+  - Response panel (below):
+    - Status code badge
+    - Response body (syntax-highlighted JSON)
+    - Response time
+```
+
+### Constraints
+- Fetch endpoint list from: `GET /api/context` or read from `.betterbase-context.json` endpoint
+- If the backend is not running, show a "Backend not connected" empty state
+- Use `'use client'` directive
+- Use `useState` for selected endpoint and request body
+- Use existing `Button`, `Card` components
+- No new dependencies
+
+### Success Criteria
+- [ ] Page renders without errors
+- [ ] Endpoint list loads and displays
+- [ ] Selecting an endpoint populates the right panel
+- [ ] Send request fires a real fetch and shows the response
+- [ ] JSON response is formatted and readable
+- [ ] TypeScript compiles with zero errors
+
+---
+
+## STUB 6: `apps/dashboard/src/app/(dashboard)/auth/page.tsx`
+
+### Current state
+```typescript
+export default function AuthManagerPage() {
+  return <div>Auth Manager — Coming in Phase 9.4</div>
+}
+```
+
+### What it needs to become
+An Auth Manager page that shows:
+- A table of registered users (fetched via `betterbase.from('users').execute()`)
+- Columns: ID, Email, Name, Created At, Actions
+- Actions: View user detail, Delete user (with confirmation)
+- A search bar to filter users by email
+- Pagination controls (prev/next)
+- A "Total users" count badge
+
+### Structure
+```text
+Header: "Auth Manager" title + "Total: N users" badge
+
+Search bar: filter by email (client-side filter on fetched data)
+
+Users table:
+  ID | Email | Name | Created At | Actions
+  ...rows...
+  [Delete button per row — opens confirm dialog]
+
+Pagination: Previous | Page X of Y | Next
+```
+
+### Constraints
+- Use `betterbase.from('users').select(['id', 'email', 'name', 'created_at']).execute()`
+- Use TanStack Query `useQuery` for data fetching
+- Pagination: 20 users per page, managed with `offset` query param
+- Use existing `Card`, `Button` components
+- Use `lucide-react` for icons (Search, Trash2, ChevronLeft, ChevronRight)
+- `'use client'` directive required
+
+### Success Criteria
+- [ ] Page renders without errors
+- [ ] Users table loads and displays real data
+- [ ] Search filters results correctly
+- [ ] Delete with confirmation works
+- [ ] Pagination works correctly
+- [ ] TypeScript compiles with zero errors
+
+---
+
+## STUB 7: `apps/dashboard/src/app/(dashboard)/logs/page.tsx`
+
+### Current state
+```typescript
+export default function LogsPage() {
+  return <div>Logs — Coming in Phase 9.5</div>
+}
+```
+
+### What it needs to become
+A Logs Viewer page that shows:
+- A live-updating list of recent API requests
+- Each log entry: timestamp, method badge, path, status code badge, response time
+- Filter by: method (GET/POST/PUT/DELETE), status (2xx/4xx/5xx), search by path
+- Color-coded status badges: green (2xx), yellow (4xx), red (5xx)
+- Auto-refresh every 5 seconds with a "Live" indicator
+- A "Clear" button to reset the displayed logs
+
+### Structure
+```text
+Header: "Request Logs" + Live indicator (green dot + "Live" text)
+
+Filter bar:
+  - Method filter: All | GET | POST | PUT | DELETE
+  - Status filter: All | 2xx | 4xx | 5xx
+  - Path search input
+
+Logs table:
+  Timestamp | Method | Path | Status | Response Time
+  ...rows...
+
+Footer: "Showing N logs" + Clear button
+```
+
+### Implementation note
+Since there is no real logging backend yet, implement with mock/simulated data for now. Use `useState` with an initial array of 20 fake log entries. The auto-refresh simulates adding new entries. When the real observability layer is built, this component will just swap `useMockLogs()` for `useLogs()` — keep that separation clean.
+
+```typescript
+// Use this hook interface so swapping is easy later:
+function useLogs(): { logs: LogEntry[], isLive: boolean, clear: () => void }
+
+// Implement useMockLogs() now:
+function useMockLogs(): { logs: LogEntry[], isLive: boolean, clear: () => void }
+```
+
+```typescript
+interface LogEntry {
+  id: string
+  timestamp: string
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
+  path: string
+  statusCode: number
+  responseTimeMs: number
+}
+```
+
+### Constraints
+- `'use client'` directive required
+- Auto-refresh via `setInterval` in `useEffect`, clean up on unmount
+- Color-coded status: 200-299 green, 400-499 yellow, 500+ red
+- Method badges: GET blue, POST green, PUT orange, DELETE red
+- No new dependencies
+
+### Success Criteria
+- [ ] Page renders without errors with mock data
+- [ ] Filters work correctly (method, status, path search)
+- [ ] Auto-refresh adds new mock entries every 5 seconds
+- [ ] Clear button resets the log list
+- [ ] Live indicator is visible and accurate
+- [ ] `useMockLogs` and `useLogs` are clearly separated for future swap
+- [ ] TypeScript compiles with zero errors
+
+---
+
+## FINAL VERIFICATION CHECKLIST
+
+After completing all 7 stubs, run the following from the monorepo root (`/betterbase`):
+
+```bash
+# 1. Install all dependencies
+bun install
+
+# 2. Typecheck everything
+bun run typecheck
+
+# 3. Build everything
+bun run build
+
+# 4. Run existing CLI tests
+cd packages/cli && bun test
+
+# 5. Run existing client tests
+cd packages/client && bun test
+
+# 6. Verify core package is importable
+node -e "import('@betterbase/core').then(m => console.log('core ok:', Object.keys(m)))"
+
+# 7. Verify shared package is importable
+node -e "import('@betterbase/shared').then(m => console.log('shared ok:', Object.keys(m)))"
+```
+
+**All checks must pass with zero errors before this task is complete.**
+
+---
+
+## WHAT NOT TO DO
+
+- ❌ Do NOT implement Phase 10–15 logic (provider adapters, RLS, GraphQL, webhooks, storage, edge functions) — those have their own prompt files
+- ❌ Do NOT change any existing working CLI commands (init, dev, migrate, auth, generate)
+- ❌ Do NOT install new packages unless explicitly listed in a stub's deliverables
+- ❌ Do NOT modify `packages/client/` except to update the `BetterBaseResponse` import to come from `@betterbase/shared` (Stub 1 cleanup)
+- ❌ Do NOT touch the `templates/base/` template — it is working
+- ❌ Do NOT leave any file empty — every stub file must either be implemented or export `{}` with a comment