memhouse 0.0.1 → 0.3.1

package/ui/src/pages/Settings.jsx

@@ -0,0 +1,241 @@
+import { useState, useEffect } from 'react'
+import { Settings as SettingsIcon, EyeOff, Eye, FolderOpen, Search, ShieldCheck, ShieldOff, AlertTriangle, X } from 'lucide-react'
+import { fetchConfig, updateConfig, fetchAllProjects } from '../lib/api'
+import { editorLabel, formatNumber, formatDate } from '../lib/constants'
+import EditorIcon from '../components/EditorIcon'
+import SectionTitle from '../components/SectionTitle'
+import AnimatedLoader from '../components/AnimatedLoader'
+import PageHeader from '../components/PageHeader'
+
+export default function Settings() {
+  const [config, setConfig] = useState(null)
+  const [projects, setProjects] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [search, setSearch] = useState('')
+  const [showConfirm, setShowConfirm] = useState(false)
+
+  useEffect(() => {
+    Promise.all([fetchConfig(), fetchAllProjects()]).then(([cfg, projs]) => {
+      setConfig(cfg)
+      setProjects(projs)
+      setLoading(false)
+    }).catch(() => setLoading(false))
+  }, [])
+
+  if (loading || !config) {
+    return <AnimatedLoader label="Loading settings..." />
+  }
+
+  const hiddenProjects = config.hiddenProjects || []
+
+  const toggleProject = async (folder) => {
+    setSaving(true)
+    const isHidden = hiddenProjects.includes(folder)
+    const updated = isHidden
+      ? hiddenProjects.filter(f => f !== folder)
+      : [...hiddenProjects, folder]
+    const newConfig = await updateConfig({ hiddenProjects: updated })
+    setConfig(newConfig)
+    setSaving(false)
+  }
+
+  const filtered = projects.filter(p => {
+    if (!search) return true
+    const q = search.toLowerCase()
+    return p.folder.toLowerCase().includes(q) || p.name.toLowerCase().includes(q)
+  })
+
+  const sorted = [...filtered].sort((a, b) => a.name.localeCompare(b.name))
+
+  const subscriptionAccess = !!config.allowSubscriptionAccess
+
+  const toggleSubscriptionAccess = async () => {
+    setSaving(true)
+    const newConfig = await updateConfig({ allowSubscriptionAccess: !subscriptionAccess })
+    setConfig(newConfig)
+    setSaving(false)
+    setShowConfirm(false)
+  }
+
+  return (
+    <div className="fade-in space-y-3">
+      <PageHeader icon={SettingsIcon} title="Settings" />
+
+      <div className="card overflow-hidden">
+        <div className="px-3 py-2 flex items-center justify-between" style={{ borderBottom: '1px solid var(--c-border)' }}>
+          <SectionTitle>
+            {subscriptionAccess ? <ShieldCheck size={11} className="inline mr-1" /> : <ShieldOff size={11} className="inline mr-1" />}
+            subscription access
+          </SectionTitle>
+          <button
+            onClick={() => setShowConfirm(true)}
+            disabled={saving}
+            className="text-[11px] px-2 py-0.5 rounded transition"
+            style={{
+              background: subscriptionAccess ? 'rgba(34,197,94,0.08)' : 'rgba(239,68,68,0.08)',
+              color: subscriptionAccess ? '#22c55e' : '#ef4444',
+              border: `1px solid ${subscriptionAccess ? 'rgba(34,197,94,0.15)' : 'rgba(239,68,68,0.15)'}`,
+            }}
+          >
+            {subscriptionAccess ? 'Enabled' : 'Disabled'}
+          </button>
+        </div>
+        <div className="text-[11px] px-3 py-2" style={{ color: 'var(--c-text3)' }}>
+          When enabled, Agentlytics reads locally stored auth tokens (Keychain, SQLite, config files) to show your plan and usage info for each editor.
+          Tokens are kept in-memory only and <span style={{ color: 'var(--c-text2)' }}>never sent to any third-party service</span>.
+        </div>
+      </div>
+
+      <div className="card overflow-hidden">
+        <div className="px-3 py-2 flex items-center justify-between" style={{ borderBottom: '1px solid var(--c-border)' }}>
+          <SectionTitle>
+            <FolderOpen size={11} className="inline mr-1" />
+            projects ({projects.length})
+          </SectionTitle>
+          <div className="flex items-center gap-2">
+            {hiddenProjects.length > 0 && (
+              <span className="text-[10px] px-1.5 py-0.5" style={{ background: 'rgba(239,68,68,0.08)', color: '#ef4444', border: '1px solid rgba(239,68,68,0.15)' }}>
+                {hiddenProjects.length} hidden
+              </span>
+            )}
+            <div className="relative">
+              <Search size={11} className="absolute left-2 top-1/2 -translate-y-1/2" style={{ color: 'var(--c-text3)' }} />
+              <input
+                type="text"
+                value={search}
+                onChange={e => setSearch(e.target.value)}
+                placeholder="Filter projects..."
+                className="pl-6 pr-2 py-1 text-[11px] outline-none w-[180px]"
+                style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="text-[11px] px-3 py-1.5" style={{ color: 'var(--c-text3)', borderBottom: '1px solid var(--c-border)', background: 'var(--c-bg3)' }}>
+          Hidden projects are excluded from all dashboard stats, sessions, costs, and analytics.
+        </div>
+
+        {sorted.map(p => (
+          <ProjectRow key={p.folder} project={p} hidden={hiddenProjects.includes(p.folder)} onToggle={toggleProject} saving={saving} />
+        ))}
+
+        {sorted.length === 0 && (
+          <div className="text-center py-6 text-[12px]" style={{ color: 'var(--c-text3)' }}>no projects match filter</div>
+        )}
+      </div>
+      {showConfirm && (
+        <ConfirmModal
+          enabling={!subscriptionAccess}
+          saving={saving}
+          onConfirm={toggleSubscriptionAccess}
+          onCancel={() => setShowConfirm(false)}
+        />
+      )}
+    </div>
+  )
+}
+
+function ConfirmModal({ enabling, saving, onConfirm, onCancel }) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center" style={{ background: 'rgba(0,0,0,0.6)' }} onClick={onCancel}>
+      <div className="card w-[420px] mx-4" onClick={e => e.stopPropagation()} style={{ background: 'var(--c-bg2)', border: '1px solid var(--c-border)' }}>
+        <div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--c-border)' }}>
+          <div className="flex items-center gap-2 text-[13px] font-medium" style={{ color: 'var(--c-white)' }}>
+            <AlertTriangle size={14} style={{ color: enabling ? '#fbbf24' : '#ef4444' }} />
+            {enabling ? 'Enable' : 'Disable'} Subscription Access
+          </div>
+          <button onClick={onCancel} className="p-1 rounded hover:bg-[var(--c-bg3)]" style={{ color: 'var(--c-text3)' }}>
+            <X size={14} />
+          </button>
+        </div>
+        <div className="px-4 py-3 text-[11px] space-y-2" style={{ color: 'var(--c-text2)' }}>
+          {enabling ? (
+            <>
+              <p>This will allow Agentlytics to read locally stored auth tokens from:</p>
+              <ul className="space-y-1 pl-3" style={{ color: 'var(--c-text3)' }}>
+                <li>Claude Code &ndash; macOS Keychain / Linux secret-tool</li>
+                <li>Cursor &ndash; local SQLite (state.vscdb)</li>
+                <li>Copilot / VS Code &ndash; ~/.config/github-copilot/apps.json</li>
+                <li>Codex &ndash; local auth.json (JWT decode only)</li>
+                <li>Devin &ndash; local SQLite (state.vscdb)</li>
+              </ul>
+              <p style={{ color: 'var(--c-text2)' }}>Tokens are kept <strong>in-memory only</strong> and never sent to any third-party service.</p>
+            </>
+          ) : (
+            <p>This will stop Agentlytics from reading any local auth tokens. Subscription and plan details will no longer be collected.</p>
+          )}
+        </div>
+        <div className="flex justify-end gap-2 px-4 py-3" style={{ borderTop: '1px solid var(--c-border)' }}>
+          <button
+            onClick={onCancel}
+            className="text-[11px] px-3 py-1 rounded transition"
+            style={{ color: 'var(--c-text3)', border: '1px solid var(--c-border)' }}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={saving}
+            className="text-[11px] px-3 py-1 rounded transition font-medium"
+            style={{
+              background: enabling ? 'rgba(34,197,94,0.12)' : 'rgba(239,68,68,0.12)',
+              color: enabling ? '#22c55e' : '#ef4444',
+              border: `1px solid ${enabling ? 'rgba(34,197,94,0.2)' : 'rgba(239,68,68,0.2)'}`,
+            }}
+          >
+            {saving ? 'Saving...' : enabling ? 'Yes, enable' : 'Yes, disable'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ProjectRow({ project: p, hidden, onToggle, saving }) {
+  const editors = Object.entries(p.editors || {}).sort((a, b) => b[1] - a[1])
+
+  return (
+    <div
+      className="flex items-center gap-3 px-3 py-2 transition"
+      style={{
+        borderBottom: '1px solid var(--c-border)',
+        opacity: hidden ? 0.5 : 1,
+      }}
+      onMouseEnter={e => e.currentTarget.style.background = 'var(--c-bg3)'}
+      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+    >
+      <button
+        onClick={() => onToggle(p.folder)}
+        disabled={saving}
+        className="shrink-0 p-1 rounded transition hover:bg-[var(--c-bg)]"
+        style={{ color: hidden ? '#ef4444' : 'var(--c-text3)', border: '1px solid var(--c-border)' }}
+        title={hidden ? 'Show this project' : 'Hide this project'}
+      >
+        {hidden ? <EyeOff size={12} /> : <Eye size={12} />}
+      </button>
+      <div className="min-w-0 flex-1">
+        <div className="text-[12px] font-medium truncate" style={{ color: hidden ? 'var(--c-text3)' : 'var(--c-white)' }}>
+          {p.name}
+        </div>
+        <div className="text-[10px] truncate" style={{ color: 'var(--c-text3)' }} title={p.folder}>
+          {p.folder}
+        </div>
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        {editors.slice(0, 3).map(([src, count]) => (
+          <span key={src} className="flex items-center gap-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
+            <EditorIcon source={src} size={10} />
+            {count}
+          </span>
+        ))}
+      </div>
+      <div className="text-[11px] font-mono shrink-0" style={{ color: 'var(--c-text2)' }}>
+        {formatNumber(p.totalSessions)}
+      </div>
+      <div className="text-[10px] shrink-0 w-[80px] text-right" style={{ color: 'var(--c-text3)' }}>
+        {formatDate(p.lastSeen)}
+      </div>
+    </div>
+  )
+}

package/ui/src/pages/SqlViewer.jsx

@@ -0,0 +1,370 @@
+import { useState, useEffect, useRef, useMemo } from 'react'
+import { Play, Database, Table2, ChevronDown, Copy, Download, BarChart3, LineChart, PieChart } from 'lucide-react'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, PointElement, LineElement, Filler } from 'chart.js'
+import { Bar, Line, Doughnut } from 'react-chartjs-2'
+import { executeQuery, fetchSchema } from '../lib/api'
+import { useTheme } from '../lib/theme'
+import PageHeader from '../components/PageHeader'
+
+ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, PointElement, LineElement, Filler)
+
+// Two backends share this SPA: the typed mem-house house (sessions / messages /
+// tool_calls + the sessions_v rollup) and the legacy agentlytics cache (chats /
+// chat_stats). Both are ClickHouse — the flavor is detected from /api/schema
+// (sessions_v present → typed) and the matching example set is offered.
+const TYPED_EXAMPLES = [
+  { label: 'Sessions per editor', sql: `SELECT source, count() AS count FROM sessions_v GROUP BY source ORDER BY count DESC` },
+  { label: 'Top 10 projects', sql: `SELECT project, count() AS sessions, sum(total_msgs) AS messages FROM sessions_v WHERE project != '' GROUP BY project ORDER BY sessions DESC LIMIT 10` },
+  { label: 'Messages per day', sql: `SELECT toDate(ts) AS day, count() AS count FROM messages GROUP BY day ORDER BY day` },
+  { label: 'Top models', sql: `SELECT model, count() AS count FROM messages WHERE model NOT IN ('', '<synthetic>') GROUP BY model ORDER BY count DESC LIMIT 10` },
+  { label: 'Top tools', sql: `SELECT tool_name, count() AS count FROM tool_calls GROUP BY tool_name ORDER BY count DESC LIMIT 15` },
+  { label: 'Token usage by editor', sql: `SELECT source, sum(input_tokens) AS input_tokens, sum(output_tokens) AS output_tokens FROM sessions_v GROUP BY source ORDER BY input_tokens DESC` },
+  { label: 'Sessions by mode', sql: `SELECT mode, count() AS count FROM sessions_v WHERE mode != '' GROUP BY mode ORDER BY count DESC` },
+  { label: 'Hourly distribution', sql: `SELECT toHour(ts) AS hour, count() AS count FROM messages GROUP BY hour ORDER BY hour` },
+  // Grouped by (session_id, user_id), matching the table's ORDER BY. In a team-pool
+  // house two members can ship the same adapter-local session id; grouping on
+  // session_id alone would merge them and make any(source) an arbitrary member's.
+  { label: 'Full-text search', sql: `SELECT session_id, user_id, any(source) AS source, count() AS hits FROM messages WHERE text_ngram LIKE '%clickhouse%' GROUP BY session_id, user_id ORDER BY hits DESC LIMIT 10` },
+]
+const LEGACY_EXAMPLES = [
+  { label: 'Sessions per editor', sql: `SELECT source, count() AS count FROM chats GROUP BY source ORDER BY count DESC` },
+  { label: 'Top 10 projects', sql: `SELECT folder, count() AS sessions, sum(bubble_count) AS messages FROM chats WHERE folder IS NOT NULL GROUP BY folder ORDER BY sessions DESC LIMIT 10` },
+  { label: 'Messages per day', sql: `SELECT toDate(toDateTime(intDiv(created_at, 1000))) AS day, count() AS count FROM chats WHERE created_at IS NOT NULL GROUP BY day ORDER BY day` },
+  { label: 'Top models', sql: `SELECT model, count() AS count FROM messages WHERE model IS NOT NULL GROUP BY model ORDER BY count DESC LIMIT 10` },
+  { label: 'Top tools', sql: `SELECT tool_name, count() AS count FROM tool_calls GROUP BY tool_name ORDER BY count DESC LIMIT 15` },
+  { label: 'Token usage by editor', sql: `SELECT c.source AS source, sum(cs.total_input_tokens) AS input_tokens, sum(cs.total_output_tokens) AS output_tokens FROM chat_stats AS cs JOIN chats AS c ON c.id = cs.chat_id GROUP BY c.source ORDER BY input_tokens DESC` },
+  { label: 'Sessions by mode', sql: `SELECT mode, count() AS count FROM chats WHERE mode IS NOT NULL GROUP BY mode ORDER BY count DESC` },
+  { label: 'Hourly distribution', sql: `SELECT toHour(toDateTime(intDiv(created_at, 1000))) AS hour, count() AS count FROM chats WHERE created_at IS NOT NULL GROUP BY hour ORDER BY hour` },
+]
+
+export default function SqlViewer() {
+  const { dark } = useTheme()
+  // Three states, and they must stay distinguishable: 'loading' while /api/schema is
+  // in flight, an array once the house's flavor is known, and null when the request
+  // finished without telling us. Guessing wrong offers queries against tables that do
+  // not exist, so nothing is offered until the answer is in — but a page that is
+  // merely still loading must not claim detection failed.
+  const [examples, setExamples] = useState('loading')
+  const [sql, setSql] = useState('')
+  const [result, setResult] = useState(null)
+  const [error, setError] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [schema, setSchema] = useState(null)
+  const [showSchema, setShowSchema] = useState(false)
+  const [chartType, setChartType] = useState('bar')
+  const [elapsed, setElapsed] = useState(null)
+  const textareaRef = useRef(null)
+
+  useEffect(() => {
+    fetchSchema().then(s => {
+      setSchema(s)
+      // Three outcomes, not two. The typed house has the sessions_v rollup; the
+      // legacy one has chats. Anything else — an error object with no `tables`, a
+      // half-applied schema with neither marker — is indeterminate, and offering
+      // either set would hand the user queries that error.
+      const tables = s?.tables
+      const ex = !Array.isArray(tables) ? null
+        : tables.includes('sessions_v') ? TYPED_EXAMPLES
+          : tables.includes('chats') ? LEGACY_EXAMPLES
+            : null
+      setExamples(ex)
+      if (!ex) return
+      // Swap the prefilled query only if the user hasn't edited it yet.
+      setSql(prev => (prev === '' || prev === TYPED_EXAMPLES[0].sql || prev === LEGACY_EXAMPLES[0].sql) ? ex[0].sql : prev)
+    }).catch(() => setExamples(null))
+  }, [])
+
+  const runQuery = async () => {
+    // Guard here, not only on the button: ⌘+Enter reaches this directly, and an
+    // empty submit comes back as a bare "sql string required" from /api/query.
+    if (!sql.trim() || loading) return
+    setLoading(true)
+    setError(null)
+    setResult(null)
+    const t0 = performance.now()
+    try {
+      const data = await executeQuery(sql.trim())
+      setElapsed(((performance.now() - t0)).toFixed(0))
+      if (data.error) {
+        setError(data.error)
+      } else {
+        setResult(data)
+      }
+    } catch (e) {
+      setError(e.message)
+      setElapsed(null)
+    }
+    setLoading(false)
+  }
+
+  const handleKeyDown = (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault()
+      runQuery()
+    }
+  }
+
+  const copyResults = () => {
+    if (!result) return
+    const header = result.columns.join('\t')
+    const rows = result.rows.map(r => result.columns.map(c => r[c] ?? '').join('\t'))
+    navigator.clipboard.writeText([header, ...rows].join('\n'))
+  }
+
+  const downloadCsv = () => {
+    if (!result) return
+    const escape = (v) => {
+      const s = String(v ?? '')
+      return s.includes(',') || s.includes('"') || s.includes('\n') ? `"${s.replace(/"/g, '""')}"` : s
+    }
+    const header = result.columns.map(escape).join(',')
+    const rows = result.rows.map(r => result.columns.map(c => escape(r[c])).join(','))
+    const blob = new Blob([header + '\n' + rows.join('\n')], { type: 'text/csv' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'query-results.csv'
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  // Auto-detect chartable data
+  const chartData = useMemo(() => {
+    if (!result || result.columns.length < 2 || result.rows.length === 0) return null
+    const cols = result.columns
+    // Find a label column (string-like) and value columns (numeric)
+    const labelCol = cols.find(c => result.rows.every(r => typeof r[c] === 'string' || r[c] === null)) || cols[0]
+    const valueCols = cols.filter(c => c !== labelCol && result.rows.some(r => typeof r[c] === 'number'))
+    if (valueCols.length === 0) return null
+
+    const labels = result.rows.map(r => String(r[labelCol] ?? ''))
+    const palette = ['#6366f1', '#f59e0b', '#06b6d4', '#10b981', '#f97316', '#ec4899', '#8b5cf6', '#3b82f6', '#ef4444', '#14b8a6']
+
+    const datasets = valueCols.map((col, i) => ({
+      label: col,
+      data: result.rows.map(r => r[col] ?? 0),
+      backgroundColor: chartType === 'doughnut'
+        ? palette.slice(0, labels.length)
+        : palette[i % palette.length] + '99',
+      borderColor: palette[i % palette.length],
+      borderWidth: chartType === 'line' ? 2 : 1,
+      borderRadius: chartType === 'bar' ? 4 : 0,
+      tension: 0.3,
+      fill: chartType === 'line',
+      pointRadius: chartType === 'line' ? 3 : 0,
+    }))
+
+    return { labels, datasets }
+  }, [result, chartType])
+
+  const chartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { display: chartData?.datasets?.length > 1 || chartType === 'doughnut', labels: { color: dark ? '#ccc' : '#555', font: { size: 11 } } },
+      tooltip: { backgroundColor: dark ? '#1e1e2e' : '#fff', titleColor: dark ? '#fff' : '#111', bodyColor: dark ? '#ccc' : '#555', borderColor: dark ? '#333' : '#ddd', borderWidth: 1 },
+    },
+    scales: chartType !== 'doughnut' ? {
+      x: { ticks: { color: dark ? '#888' : '#666', font: { size: 10 }, maxRotation: 45 }, grid: { color: dark ? '#ffffff08' : '#00000008' } },
+      y: { ticks: { color: dark ? '#888' : '#666', font: { size: 10 } }, grid: { color: dark ? '#ffffff08' : '#00000008' } },
+    } : undefined,
+  }
+
+  const txtStyle = { color: 'var(--c-text)' }
+  const txt2Style = { color: 'var(--c-text2)' }
+  const cardBg = { background: 'var(--c-card)', border: '1px solid var(--c-border)' }
+
+  return (
+    <div className="fade-in space-y-3">
+      {/* Header */}
+      <PageHeader icon={Database} title="SQL Viewer">
+        <span className="text-[10px] px-1.5 py-0.5" style={{ color: 'var(--c-text3)', background: 'var(--c-bg3)' }}>cache.db</span>
+        <div className="ml-auto">
+          <button
+            onClick={() => setShowSchema(!showSchema)}
+            className="flex items-center gap-1 text-[11px] px-2 py-1 transition hover:bg-[var(--c-card)]"
+            style={{ color: 'var(--c-text2)', border: '1px solid var(--c-border)' }}
+          >
+            <Table2 size={11} />
+            Schema
+            <ChevronDown size={10} className={`transition ${showSchema ? 'rotate-180' : ''}`} />
+          </button>
+        </div>
+      </PageHeader>
+
+      {/* Schema panel */}
+      {showSchema && schema && (
+        <div className="rounded-lg p-3 space-y-2 text-[12px]" style={cardBg}>
+          <div className="flex flex-wrap gap-4">
+            {schema.tables.map(table => (
+              <div key={table} className="min-w-[180px]">
+                <div className="font-semibold mb-1" style={txtStyle}>{table}</div>
+                <div className="space-y-0.5">
+                  {schema.schema[table]?.map(col => (
+                    <div key={col.name} className="flex gap-2" style={txt2Style}>
+                      <span style={txtStyle}>{col.name}</span>
+                      <span className="text-[11px] opacity-60">{col.type}</span>
+                      {col.pk ? <span className="text-[10px] px-1 rounded" style={{ background: '#6366f133', color: '#6366f1' }}>PK</span> : null}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Example queries — withheld until the schema flavor is known, since the
+          typed and legacy sets target entirely different tables. */}
+      <div className="flex flex-wrap gap-1">
+        {examples === 'loading' ? (
+          <span className="text-[11px]" style={txt2Style}>loading examples…</span>
+        ) : examples === null ? (
+          <span className="text-[11px]" style={txt2Style}>
+            examples unavailable — could not determine the schema from /api/schema
+          </span>
+        ) : examples.map((q, i) => (
+          <button
+            key={i}
+            onClick={() => setSql(q.sql)}
+            className="text-[11px] px-2 py-0.5 rounded transition hover:bg-[var(--c-card)]"
+            style={{ ...txt2Style, border: '1px solid var(--c-border)' }}
+          >
+            {q.label}
+          </button>
+        ))}
+      </div>
+
+      {/* SQL editor */}
+      <div className="rounded-lg overflow-hidden" style={cardBg}>
+        <div className="flex items-center justify-between px-3 py-1.5" style={{ borderBottom: '1px solid var(--c-border)' }}>
+          <span className="text-[11px] font-mono" style={txt2Style}>SQL</span>
+          <div className="flex items-center gap-1">
+            <span className="text-[11px]" style={txt2Style}>⌘+Enter to run</span>
+          </div>
+        </div>
+        <textarea
+          ref={textareaRef}
+          value={sql}
+          onChange={e => setSql(e.target.value)}
+          onKeyDown={handleKeyDown}
+          spellCheck={false}
+          className="w-full p-3 text-[12px] font-mono resize-y outline-none"
+          style={{ background: 'transparent', color: 'var(--c-text)', minHeight: 80, maxHeight: 300 }}
+          rows={4}
+        />
+        <div className="flex items-center gap-2 px-3 py-1.5" style={{ borderTop: '1px solid var(--c-border)' }}>
+          <button
+            onClick={runQuery}
+            disabled={loading || !sql.trim()}
+            className="flex items-center gap-1.5 px-3 py-1 text-[12px] font-medium rounded transition"
+            style={{ background: '#6366f1', color: '#fff', opacity: loading ? 0.5 : 1 }}
+          >
+            <Play size={11} />
+            {loading ? 'Running...' : 'Run Query'}
+          </button>
+          {elapsed && result && (
+            <span className="text-[11px]" style={txt2Style}>
+              {result.count} row{result.count !== 1 ? 's' : ''} in {elapsed}ms
+            </span>
+          )}
+          {result && (
+            <div className="ml-auto flex items-center gap-1">
+              <button onClick={copyResults} className="p-1 rounded hover:bg-[var(--c-bg2)] transition" style={txt2Style} title="Copy to clipboard">
+                <Copy size={12} />
+              </button>
+              <button onClick={downloadCsv} className="p-1 rounded hover:bg-[var(--c-bg2)] transition" style={txt2Style} title="Download CSV">
+                <Download size={12} />
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Error */}
+      {error && (
+        <div className="rounded-lg px-3 py-2 text-[12px]" style={{ background: '#ef444420', border: '1px solid #ef444440', color: '#ef4444' }}>
+          {error}
+        </div>
+      )}
+
+      {/* Results table */}
+      {result && result.rows.length > 0 && (
+        <div className="rounded-lg overflow-hidden" style={cardBg}>
+          <div className="overflow-x-auto" style={{ maxHeight: 400 }}>
+            <table className="w-full text-[12px]" style={{ borderCollapse: 'collapse' }}>
+              <thead>
+                <tr style={{ borderBottom: '1px solid var(--c-border)' }}>
+                  {result.columns.map(col => (
+                    <th key={col} className="text-left px-3 py-1.5 font-semibold sticky top-0" style={{ ...txtStyle, background: 'var(--c-card)' }}>
+                      {col}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {result.rows.map((row, i) => (
+                  <tr key={i} className="hover:bg-[var(--c-bg2)] transition" style={{ borderBottom: '1px solid var(--c-border)' }}>
+                    {result.columns.map(col => (
+                      <td key={col} className="px-3 py-1 font-mono" style={txt2Style}>
+                        {formatCell(row[col])}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {result && result.rows.length === 0 && (
+        <div className="rounded-lg px-3 py-6 text-center text-[12px]" style={{ ...cardBg, ...txt2Style }}>
+          Query returned 0 rows
+        </div>
+      )}
+
+      {/* Chart visualization */}
+      {chartData && (
+        <div className="rounded-lg p-4" style={cardBg}>
+          <div className="flex items-center gap-2 mb-3">
+            <span className="text-[12px] font-semibold" style={txtStyle}>Visualization</span>
+            <div className="flex gap-0.5 ml-2" style={{ border: '1px solid var(--c-border)', borderRadius: 6 }}>
+              {[
+                { type: 'bar', icon: BarChart3 },
+                { type: 'line', icon: LineChart },
+                { type: 'doughnut', icon: PieChart },
+              ].map(({ type, icon: Icon }) => (
+                <button
+                  key={type}
+                  onClick={() => setChartType(type)}
+                  className="p-1.5 transition"
+                  style={{
+                    background: chartType === type ? 'var(--c-bg2)' : 'transparent',
+                    color: chartType === type ? 'var(--c-white)' : 'var(--c-text3)',
+                    borderRadius: 4,
+                  }}
+                >
+                  <Icon size={12} />
+                </button>
+              ))}
+            </div>
+          </div>
+          <div style={{ height: chartType === 'doughnut' ? 280 : 260 }}>
+            {chartType === 'bar' && <Bar data={chartData} options={chartOptions} />}
+            {chartType === 'line' && <Line data={chartData} options={chartOptions} />}
+            {chartType === 'doughnut' && <Doughnut data={chartData} options={chartOptions} />}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function formatCell(value) {
+  if (value === null || value === undefined) return <span className="opacity-30">NULL</span>
+  if (typeof value === 'number') return value.toLocaleString()
+  const str = String(value)
+  if (str.length > 120) return str.substring(0, 120) + '…'
+  return str
+}