Add MySQL/MongoDB consoles, fit topology without scroll, longer flow lines.

Compact workbench panel, collapsible infra bar, narrower topology nodes with wider inter-stage gaps for visible connection lines.

ui/src/components/features/SqlWorkbench.tsx

@@ -14,32 +14,47 @@ type SqlResult = {
   sql?: string
 }
 
+type Engine = 'postgres' | 'mysql' | 'mongodb' | 'trino'
+
 type Props = {
-  engine: 'postgres' | 'trino'
+  engine: Engine
+  compact?: boolean
 }
 
-const ENGINE_META = {
+const ENGINE_META: Record<Engine, { title: string; sub: string; accent: string; queryLabel: string }> = {
   postgres: {
     title: 'PostgreSQL SQL Console',
     sub: 'DB Vault · 10.0.21.51:5432 · user mo',
     accent: 'text-blue-400',
+    queryLabel: 'SQL',
+  },
+  mysql: {
+    title: 'MySQL SQL Console',
+    sub: 'DB Vault · 10.0.21.51:3306 · database hr · user mo',
+    accent: 'text-amber-400',
+    queryLabel: 'SQL',
+  },
+  mongodb: {
+    title: 'MongoDB Query Console',
+    sub: 'DB Vault · 10.0.21.51:27017 · supplychain',
+    accent: 'text-emerald-400',
+    queryLabel: 'Command',
   },
   trino: {
     title: 'Trino SQL Console',
-    sub: 'Lakehouse · 10.0.21.50:8089 · federated lakehouse queries',
+    sub: 'Lakehouse · 10.0.21.50:8089 · federated queries',
     accent: 'text-violet-400',
+    queryLabel: 'SQL',
   },
 }
 
-export function SqlWorkbench({ engine }: Props) {
+export function SqlWorkbench({ engine, compact }: Props) {
   const meta = ENGINE_META[engine]
   const [samples, setSamples] = useState<Sample[]>([])
   const [sql, setSql] = useState('SELECT version();')
   const [result, setResult] = useState<SqlResult | null>(null)
   const [benchmark, setBenchmark] = useState<{
     comparison?: { postgres_ms?: number; trino_ms?: number; faster?: string; speedup_factor?: number }
-    postgres?: SqlResult
-    trino?: SqlResult
   } | null>(null)
   const [loading, setLoading] = useState(false)
   const [benchLoading, setBenchLoading] = useState(false)
@@ -106,40 +121,41 @@ export function SqlWorkbench({ engine }: Props) {
   }
 
   return (
-    <div className="flex h-full min-h-0 flex-col bg-[#0a0e14] text-foreground">
-      <header className="flex shrink-0 flex-wrap items-center justify-between gap-2 border-b border-border/60 px-3 py-2">
+    <div className="flex h-full min-h-0 flex-col text-foreground">
+      <header className={cn('flex shrink-0 flex-wrap items-center justify-between gap-2 border-b border-border/60', compact ? 'px-2 py-1' : 'px-3 py-2')}>
         <div>
-          <h3 className={cn('flex items-center gap-2 text-sm font-semibold', meta.accent)}>
-            <Database className="h-4 w-4" />
+          <h3 className={cn('flex items-center gap-1.5 font-semibold', meta.accent, compact ? 'text-xs' : 'text-sm')}>
+            <Database className={compact ? 'h-3 w-3' : 'h-4 w-4'} />
             {meta.title}
           </h3>
-          <p className="text-[10px] text-foreground-muted">{meta.sub}</p>
+          <p className="text-[9px] text-foreground-muted">{meta.sub}</p>
         </div>
-        <div className="flex gap-2">
-          <button type="button" onClick={() => run()} disabled={loading} className={cn('inline-flex items-center gap-1 rounded px-3 py-1.5 text-[11px]', subTabActive)}>
+        <div className="flex gap-1.5">
+          <button type="button" onClick={() => run()} disabled={loading} className={cn('inline-flex items-center gap-1 rounded px-2 py-1 text-[10px]', subTabActive)}>
             {loading ? <Loader2 className="h-3 w-3 animate-spin" /> : <Play className="h-3 w-3" />}
             Run
           </button>
-          <button type="button" onClick={runBenchmark} disabled={benchLoading} className={cn('inline-flex items-center gap-1 rounded px-3 py-1.5 text-[11px]', subTabIdle)}>
-            {benchLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : <Zap className="h-3 w-3 text-amber-400" />}
-            Postgres vs Trino
-          </button>
+          {(engine === 'postgres' || engine === 'trino') && (
+            <button type="button" onClick={runBenchmark} disabled={benchLoading} className={cn('inline-flex items-center gap-1 rounded px-2 py-1 text-[10px]', subTabIdle)}>
+              {benchLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : <Zap className="h-3 w-3 text-amber-400" />}
+              PG vs Trino
+            </button>
+          )}
         </div>
       </header>
 
-      <div className="flex min-h-0 flex-1 flex-col lg:flex-row">
-        <aside className="shrink-0 border-b border-border/60 p-2 lg:w-56 lg:border-b-0 lg:border-r">
-          <p className="mb-1 text-[9px] font-semibold uppercase tracking-wider text-foreground-faint">10 demo commands</p>
-          <div className="scrollbar-thin max-h-32 space-y-0.5 overflow-y-auto lg:max-h-none">
+      <div className="flex min-h-0 flex-1">
+        <aside className={cn('shrink-0 border-r border-border/60 p-1.5', compact ? 'w-44' : 'w-52')}>
+          <p className="mb-0.5 text-[8px] font-semibold uppercase tracking-wider text-foreground-faint">10 demo commands</p>
+          <div className="scrollbar-thin max-h-full space-y-0.5 overflow-y-auto">
             {samples.map((s) => (
               <button
                 key={s.id}
                 type="button"
                 onClick={() => { setSql(s.sql); run(s.sql) }}
-                className="block w-full rounded border border-transparent px-2 py-1 text-left text-[10px] hover:border-docker/30 hover:bg-docker/5"
+                className="block w-full rounded border border-transparent px-1.5 py-0.5 text-left text-[9px] hover:border-docker/30 hover:bg-docker/5"
               >
                 <span className="font-medium text-foreground">{s.label}</span>
-                <span className="mt-0.5 block truncate font-mono text-[8px] text-foreground-faint">{s.sql}</span>
               </button>
             ))}
           </div>
@@ -149,42 +165,45 @@ export function SqlWorkbench({ engine }: Props) {
           <textarea
             value={sql}
             onChange={(e) => setSql(e.target.value)}
-            className="min-h-[72px] shrink-0 resize-none border-b border-border/60 bg-black/40 p-2 font-mono text-[11px] text-emerald-100 outline-none focus:ring-1 focus:ring-docker/40"
+            className={cn(
+              'shrink-0 resize-none border-b border-border/60 bg-black/40 p-1.5 font-mono text-[10px] text-emerald-100 outline-none focus:ring-1 focus:ring-docker/40',
+              compact ? 'min-h-[40px]' : 'min-h-[56px]',
+            )}
             spellCheck={false}
+            placeholder={`${meta.queryLabel}…`}
           />
 
-          {error && <p className="shrink-0 px-3 py-1 text-[11px] text-danger">{error}</p>}
+          {error && <p className="shrink-0 px-2 py-0.5 text-[10px] text-danger">{error}</p>}
 
           {benchmark?.comparison && (
-            <div className="shrink-0 border-b border-amber-500/30 bg-amber-500/10 px-3 py-2 text-[11px]">
-              <span className="font-semibold text-amber-300">Benchmark (5M parallel compute): </span>
-              PostgreSQL <span className="font-mono">{benchmark.comparison.postgres_ms}ms</span>
-              {' · '}
-              Trino <span className="font-mono">{benchmark.comparison.trino_ms}ms</span>
+            <div className="shrink-0 border-b border-amber-500/30 bg-amber-500/10 px-2 py-1 text-[10px]">
+              <span className="font-semibold text-amber-300">Benchmark: </span>
+              PG <span className="font-mono">{benchmark.comparison.postgres_ms}ms</span>
+              {' · '}Trino <span className="font-mono">{benchmark.comparison.trino_ms}ms</span>
               {' — '}
               <span className="font-semibold text-success">
-                {benchmark.comparison.faster} {benchmark.comparison.speedup_factor ? `${benchmark.comparison.speedup_factor}× faster` : ''}
+                {benchmark.comparison.faster} {benchmark.comparison.speedup_factor ? `${benchmark.comparison.speedup_factor}×` : ''}
               </span>
             </div>
           )}
 
-          <div className="scrollbar-thin min-h-0 flex-1 overflow-auto p-2">
+          <div className="scrollbar-thin min-h-0 flex-1 overflow-auto p-1.5">
             {result?.ok && result.columns && (
               <>
-                <p className="mb-1 font-mono text-[9px] text-foreground-faint">
+                <p className="mb-0.5 font-mono text-[8px] text-foreground-faint">
                   {result.row_count} rows · {result.elapsed_ms}ms
                 </p>
-                <table className="w-full text-left font-mono text-[10px]">
+                <table className="w-full text-left font-mono text-[9px]">
                   <thead>
                     <tr className="border-b border-border text-docker">
-                      {result.columns.map((c) => <th key={c} className="px-2 py-1">{c}</th>)}
+                      {result.columns.map((c) => <th key={c} className="px-1 py-0.5">{c}</th>)}
                     </tr>
                   </thead>
                   <tbody>
                     {result.rows?.map((row, i) => (
                       <tr key={i} className="border-b border-border/30 hover:bg-white/5">
                         {row.map((cell, j) => (
-                          <td key={j} className="max-w-[200px] truncate px-2 py-1 text-foreground-muted">
+                          <td key={j} className="max-w-[160px] truncate px-1 py-0.5 text-foreground-muted">
                             {cell === null ? 'NULL' : String(cell)}
                           </td>
                         ))}
@@ -195,7 +214,7 @@ export function SqlWorkbench({ engine }: Props) {
               </>
             )}
             {!result && !loading && (
-              <p className="py-6 text-center text-[11px] text-foreground-faint">Pick a command or write SQL · click Run</p>
+              <p className="py-3 text-center text-[10px] text-foreground-faint">Pick a command or write {meta.queryLabel}</p>
             )}
           </div>
         </div>