fix

backend/api/demo.py

@@ -442,6 +442,55 @@ async def execute_query_stream(req: ExecuteQueryRequest):
     return EventSourceResponse(event_generator())
 
 
+# ─── /api/suggest-questions ──────────────────────────────────────
+
+@router.get("/suggest-questions")
+async def suggest_questions():
+    """
+    Generate example questions based on the currently active database schema.
+    Returns up to 5 short natural-language questions the user might want to ask.
+    """
+    from env.sql_env import _make_client, _MODEL
+    from env.database import get_schema_info as _get_schema
+
+    schema = _get_schema()
+    client = _make_client()
+    try:
+        resp = await client.chat.completions.create(
+            model=_MODEL,
+            messages=[
+                {
+                    "role": "system",
+                    "content": (
+                        "You are a helpful data analyst. Given a database schema, "
+                        "return ONLY a JSON array of 5 short natural-language questions "
+                        "(5-10 words each) a user might want to ask about the data. "
+                        "No markdown, no explanation — just the JSON array."
+                    ),
+                },
+                {
+                    "role": "user",
+                    "content": f"Schema:\n{schema}\n\nGenerate 5 example questions.",
+                },
+            ],
+            temperature=0.7,
+            max_tokens=250,
+        )
+        raw = (resp.choices[0].message.content or "").strip()
+        # Strip markdown fences if present
+        if raw.startswith("```"):
+            raw = raw.split("```")[1]
+            if raw.startswith("json"):
+                raw = raw[4:]
+        questions = json.loads(raw)
+        if not isinstance(questions, list):
+            questions = []
+        return {"questions": [str(q) for q in questions[:5]]}
+    except Exception as e:
+        logger.error("suggest-questions failed: %s", e)
+        return {"questions": []}
+
+
 # ─── /api/benchmark-questions ────────────────────────────────────
 
 @router.get("/benchmark-questions")

frontend/src/App.tsx

@@ -28,7 +28,7 @@ export default function App() {
   const [demoOpen, setDemoOpen] = useState(false)
   const [connectDbOpen, setConnectDbOpen] = useState(false)
 
-  const { theme, setDbSeeded, setTables, setSchemaGraph, setDbLabel, taskDifficulty } = useStore()
+  const { theme, setDbSeeded, setTables, setSchemaGraph, setDbLabel, taskDifficulty, isCustomDb } = useStore()
 
   // Apply theme on mount / change
   useEffect(() => {
@@ -92,6 +92,11 @@ export default function App() {
     setRightOpen(false)
   }, [activeTab])
 
+  // If custom DB is enabled while benchmark tab is active, switch to chat
+  useEffect(() => {
+    if (isCustomDb && activeTab === 'benchmark') setActiveTab('chat')
+  }, [isCustomDb, activeTab])
+
   return (
     <div
       className="h-screen flex flex-col overflow-hidden theme-bg-primary theme-text-primary"
@@ -153,7 +158,7 @@ export default function App() {
             className="flex items-center gap-1 px-2 sm:px-4 py-2.5 border-b theme-border shrink-0 overflow-x-auto scrollbar-none"
             style={{ background: 'var(--bg-secondary)' }}
           >
-            {TABS.map((tab) => (
+            {TABS.filter((tab) => !(isCustomDb && tab.id === 'benchmark')).map((tab) => (
               <button
                 key={tab.id}
                 onClick={() => setActiveTab(tab.id)}

frontend/src/components/ChatPanel.tsx

@@ -154,9 +154,28 @@ const SUGGESTED: Record<string, string[]> = {
   hard: ['Rolling 7-day revenue', 'Seller ranking with rank change', 'Cohort retention analysis'],
 }
 
+function SuggestionSkeleton() {
+  return (
+    <div className="flex flex-col gap-2 w-full max-w-sm">
+      {[90, 110, 80].map((w, i) => (
+        <div
+          key={i}
+          className="flex items-center gap-2 px-3 py-2.5 rounded-xl border border-white/[0.06] bg-white/[0.02]"
+        >
+          <div className="w-1 h-3 rounded bg-violet-500/20 animate-pulse shrink-0" />
+          <div
+            className="h-3 rounded bg-white/8 animate-pulse"
+            style={{ width: w }}
+          />
+        </div>
+      ))}
+    </div>
+  )
+}
+
 function EmptyState({ onSelect }: { onSelect: (q: string) => void }) {
-  const { taskDifficulty } = useStore()
-  const suggestions = SUGGESTED[taskDifficulty] ?? SUGGESTED.easy
+  const { taskDifficulty, isCustomDb, customDbSuggestions, suggestionsLoading } = useStore()
+  const suggestions = isCustomDb ? customDbSuggestions : (SUGGESTED[taskDifficulty] ?? SUGGESTED.easy)
 
   return (
     <div className="flex flex-col items-center justify-center h-full gap-6 px-8 text-center">
@@ -176,18 +195,22 @@ function EmptyState({ onSelect }: { onSelect: (q: string) => void }) {
 
       <div className="flex flex-col gap-2 w-full max-w-sm">
         <div className="text-[10px] text-gray-600 uppercase tracking-wider mb-0.5">
-          Try these queries
+          {isCustomDb && suggestionsLoading ? 'Generating suggestions…' : 'Try these queries'}
         </div>
-        {suggestions.map((q) => (
-          <button
-            key={q}
-            onClick={() => onSelect(q)}
-            className="flex items-center gap-2 px-3 py-2.5 rounded-xl border border-white/[0.06] bg-white/[0.02] hover:bg-white/[0.05] hover:border-violet-500/30 transition-all text-left group"
-          >
-            <span className="text-violet-500 shrink-0 group-hover:text-violet-400">›</span>
-            <span className="text-xs text-gray-300">{q}</span>
-          </button>
-        ))}
+        {isCustomDb && suggestionsLoading ? (
+          <SuggestionSkeleton />
+        ) : suggestions.length > 0 ? (
+          suggestions.map((q) => (
+            <button
+              key={q}
+              onClick={() => onSelect(q)}
+              className="flex items-center gap-2 px-3 py-2.5 rounded-xl border border-white/[0.06] bg-white/[0.02] hover:bg-white/[0.05] hover:border-violet-500/30 transition-all text-left group"
+            >
+              <span className="text-violet-500 shrink-0 group-hover:text-violet-400">›</span>
+              <span className="text-xs text-gray-300">{q}</span>
+            </button>
+          ))
+        ) : null}
       </div>
     </div>
   )
@@ -413,6 +436,7 @@ export function ChatPanel() {
     taskId, taskDifficulty,
     optimizingBanner, setOptimizingBanner,
     promptGeneration,
+    isCustomDb, customDbSuggestions,
   } = useStore()
 
   const [input, setInput] = useState('')
@@ -546,7 +570,9 @@ export function ChatPanel() {
     }
   }
 
-  const suggestions = SUGGESTED[taskDifficulty] ?? SUGGESTED.easy
+  const suggestions = isCustomDb
+    ? customDbSuggestions
+    : (SUGGESTED[taskDifficulty] ?? SUGGESTED.easy)
 
   return (
     <div className="flex flex-col h-full">
@@ -615,7 +641,7 @@ export function ChatPanel() {
               value={input}
               onChange={(e) => setInput(e.target.value)}
               onKeyDown={handleKeyDown}
-              placeholder="Ask about products, orders, sellers..."
+              placeholder={isCustomDb ? 'Ask anything about your data…' : 'Ask about products, orders, sellers...'}
               disabled={isExecuting}
               rows={1}
               className="w-full px-3 py-2.5 pr-10 text-sm text-white rounded-xl border border-white/[0.06] bg-white/[0.03] placeholder-gray-600 resize-none focus:outline-none focus:border-violet-500/40 focus:bg-white/[0.05] transition-all disabled:opacity-50"

frontend/src/components/ConnectDB.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { motion } from 'framer-motion'
 import { X, PlugZap, Database, CheckCircle2, XCircle, Loader2, RotateCcw } from 'lucide-react'
 import { useStore } from '../store/useStore'
-import { connectExternalDb } from '../lib/api'
+import { connectExternalDb, fetchSuggestQuestions } from '../lib/api'
 
 interface ConnectDBProps {
   onClose: () => void
@@ -21,7 +21,7 @@ const POSTGRES_EXAMPLES = [
 ]
 
 export function ConnectDB({ onClose }: ConnectDBProps) {
-  const { dbLabel, setDbLabel, setTables, setDbSeeded } = useStore()
+  const { dbLabel, setDbLabel, setTables, setDbSeeded, setIsCustomDb, setCustomDbSuggestions, setSuggestionsLoading } = useStore()
   const [dbType, setDbType] = useState<DbType>('sqlite')
   const [value, setValue] = useState('')
   const [status, setStatus] = useState<'idle' | 'connecting' | 'success' | 'error'>('idle')
@@ -51,8 +51,15 @@ export function ConnectDB({ onClose }: ConnectDBProps) {
         setDbLabel(res.dbLabel)
         setTables(res.tables)
         setDbSeeded(true)
+        setIsCustomDb(true)
         setStatus('success')
         setMessage(res.message)
+        // Start generating suggestions in the background (cached by DSN)
+        setCustomDbSuggestions([])
+        setSuggestionsLoading(true)
+        fetchSuggestQuestions(dsn)
+          .then((qs) => { setCustomDbSuggestions(qs); setSuggestionsLoading(false) })
+          .catch(() => setSuggestionsLoading(false))
       } else {
         setStatus('error')
         setMessage(res.message)
@@ -71,6 +78,9 @@ export function ConnectDB({ onClose }: ConnectDBProps) {
         setDbLabel(res.dbLabel)
         setTables(res.tables)
         setDbSeeded(true)
+        setIsCustomDb(false)
+        setCustomDbSuggestions([])
+        setSuggestionsLoading(false)
         setStatus('success')
         setMessage('Reset to built-in benchmark database')
       } else {

frontend/src/components/Header.tsx

@@ -48,9 +48,9 @@ export function Header({ onToggleLeft, onToggleRight, onDemo, onConnectDb }: Hea
       <div className="flex items-center gap-2 sm:gap-3">
         {/* Connection status */}
         {dbSeeded ? (
-          <div className="hidden sm:flex items-center gap-1.5 text-[10px] text-green-400">
-            <span className="w-1.5 h-1.5 rounded-full bg-green-400 inline-block" />
-            benchmark db
+          <div className="hidden sm:flex items-center gap-1.5 text-[10px] text-green-400 max-w-[140px] truncate">
+            <span className="w-1.5 h-1.5 rounded-full bg-green-400 inline-block shrink-0" />
+            <span className="truncate">{dbLabel}</span>
           </div>
         ) : (
           <div className="hidden sm:flex items-center gap-1.5 text-[10px] text-amber-400">

frontend/src/components/LeftSidebar.tsx

@@ -11,42 +11,44 @@ const DIFFICULTY_CONFIG: Record<Difficulty, { label: string; bg: string; text: s
 }
 
 export function LeftSidebar() {
-  const { tables, taskDifficulty, setTaskDifficulty, dbSeeded } = useStore()
+  const { tables, taskDifficulty, setTaskDifficulty, dbSeeded, isCustomDb, dbLabel } = useStore()
   const [tablesExpanded, setTablesExpanded] = useState(true)
 
   const cfg = DIFFICULTY_CONFIG[taskDifficulty]
 
   return (
     <div className="flex flex-col gap-4 py-1">
-      {/* Task Difficulty */}
-      <section>
-        <div className="text-[10px] font-semibold text-gray-500 uppercase tracking-widest mb-2 flex items-center gap-1.5">
-          <GitFork size={10} className="text-violet-400" />
-          Task Difficulty
-        </div>
-        <div className="flex flex-col gap-1">
-          {(Object.keys(DIFFICULTY_CONFIG) as Difficulty[]).map((d) => {
-            const c = DIFFICULTY_CONFIG[d]
-            const active = d === taskDifficulty
-            return (
-              <button
-                key={d}
-                onClick={() => setTaskDifficulty(d)}
-                className={`flex items-center justify-between px-3 py-2 rounded-lg border text-xs font-medium transition-all ${
-                  active
-                    ? `${c.bg} ${c.text} ${c.border}`
-                    : 'border-transparent text-gray-500 hover:text-gray-300 hover:bg-white/5'
-                }`}
-              >
-                <span>{c.label}</span>
-                {active && (
-                  <span className={`text-[9px] font-mono ${c.text} opacity-70`}>selected</span>
-                )}
-              </button>
-            )
-          })}
-        </div>
-      </section>
+      {/* Task Difficulty — hidden for custom databases */}
+      {!isCustomDb && (
+        <section>
+          <div className="text-[10px] font-semibold text-gray-500 uppercase tracking-widest mb-2 flex items-center gap-1.5">
+            <GitFork size={10} className="text-violet-400" />
+            Task Difficulty
+          </div>
+          <div className="flex flex-col gap-1">
+            {(Object.keys(DIFFICULTY_CONFIG) as Difficulty[]).map((d) => {
+              const c = DIFFICULTY_CONFIG[d]
+              const active = d === taskDifficulty
+              return (
+                <button
+                  key={d}
+                  onClick={() => setTaskDifficulty(d)}
+                  className={`flex items-center justify-between px-3 py-2 rounded-lg border text-xs font-medium transition-all ${
+                    active
+                      ? `${c.bg} ${c.text} ${c.border}`
+                      : 'border-transparent text-gray-500 hover:text-gray-300 hover:bg-white/5'
+                  }`}
+                >
+                  <span>{c.label}</span>
+                  {active && (
+                    <span className={`text-[9px] font-mono ${c.text} opacity-70`}>selected</span>
+                  )}
+                </button>
+              )
+            })}
+          </div>
+        </section>
+      )}
 
       {/* Schema Tables */}
       <section>
@@ -114,44 +116,55 @@ export function LeftSidebar() {
           className="rounded-xl border border-white/[0.05] p-3 text-[11px] text-gray-500 leading-relaxed"
           style={{ background: 'var(--bg-card)' }}
         >
-          <p className="mb-2 text-gray-400 font-medium">E-Commerce Marketplace</p>
-          <p>
-            Multi-vendor marketplace with products, orders, sellers, users, and reviews.
-            Supports complex analytical queries across sales, inventory, and user behavior.
-          </p>
-          <div className="mt-2 flex flex-wrap gap-1">
-            {['Products', 'Orders', 'Sellers', 'Users', 'Reviews', 'Categories'].map((t) => (
-              <span
-                key={t}
-                className="text-[9px] px-1.5 py-0.5 rounded border border-white/[0.06] text-gray-600"
-              >
-                {t}
-              </span>
-            ))}
-          </div>
+          {isCustomDb ? (
+            <p className="text-gray-600 italic">
+              Connected to <span className="text-violet-400 not-italic font-medium">{dbLabel}</span>.
+              Ask questions about your data in natural language.
+            </p>
+          ) : (
+            <>
+              <p className="mb-2 text-gray-400 font-medium">E-Commerce Marketplace</p>
+              <p>
+                Multi-vendor marketplace with products, orders, sellers, users, and reviews.
+                Supports complex analytical queries across sales, inventory, and user behavior.
+              </p>
+              <div className="mt-2 flex flex-wrap gap-1">
+                {['Products', 'Orders', 'Sellers', 'Users', 'Reviews', 'Categories'].map((t) => (
+                  <span
+                    key={t}
+                    className="text-[9px] px-1.5 py-0.5 rounded border border-white/[0.06] text-gray-600"
+                  >
+                    {t}
+                  </span>
+                ))}
+              </div>
+            </>
+          )}
         </div>
       </section>
 
-      {/* Current task badge */}
-      <section>
-        <div
-          className={`rounded-xl border ${cfg.border} ${cfg.bg} p-3 flex flex-col gap-1.5`}
-        >
-          <div className="flex items-center justify-between">
-            <span className={`text-[10px] font-semibold uppercase tracking-wider ${cfg.text}`}>
-              Current Task
-            </span>
-            <span className={`text-[10px] font-mono ${cfg.text}`}>{cfg.label}</span>
+      {/* Current task badge — hidden for custom databases */}
+      {!isCustomDb && (
+        <section>
+          <div
+            className={`rounded-xl border ${cfg.border} ${cfg.bg} p-3 flex flex-col gap-1.5`}
+          >
+            <div className="flex items-center justify-between">
+              <span className={`text-[10px] font-semibold uppercase tracking-wider ${cfg.text}`}>
+                Current Task
+              </span>
+              <span className={`text-[10px] font-mono ${cfg.text}`}>{cfg.label}</span>
+            </div>
+            <p className="text-[11px] text-gray-400 leading-relaxed">
+              {taskDifficulty === 'easy'
+                ? 'Simple SELECT queries, basic filtering and aggregation'
+                : taskDifficulty === 'medium'
+                ? 'Multi-table JOINs, GROUP BY, subqueries, window functions'
+                : 'Complex CTEs, rolling aggregations, cohort analysis, ranking'}
+            </p>
           </div>
-          <p className="text-[11px] text-gray-400 leading-relaxed">
-            {taskDifficulty === 'easy'
-              ? 'Simple SELECT queries, basic filtering and aggregation'
-              : taskDifficulty === 'medium'
-              ? 'Multi-table JOINs, GROUP BY, subqueries, window functions'
-              : 'Complex CTEs, rolling aggregations, cohort analysis, ranking'}
-          </p>
-        </div>
-      </section>
+        </section>
+      )}
     </div>
   )
 }

frontend/src/lib/api.ts

@@ -108,6 +108,17 @@ export async function fetchBenchmarkQuestions(
   return res.json()
 }
 
+const _suggestionsCache = new Map<string, string[]>()
+
+export async function fetchSuggestQuestions(cacheKey: string): Promise<string[]> {
+  if (_suggestionsCache.has(cacheKey)) return _suggestionsCache.get(cacheKey)!
+  const res = await fetch(`${BASE_URL}/api/suggest-questions`)
+  if (!res.ok) return []
+  const data = await res.json() as { questions: string[] }
+  _suggestionsCache.set(cacheKey, data.questions ?? [])
+  return data.questions ?? []
+}
+
 export async function connectExternalDb(path: string): Promise<{ success: boolean; message: string; tables: { name: string; rows: number }[]; dbLabel: string }> {
   const res = await fetch(`${BASE_URL}/api/connect-db`, {
     method: 'POST',

frontend/src/store/useStore.ts

@@ -23,6 +23,12 @@ interface Store {
   // DB
   dbLabel: string
   setDbLabel: (label: string) => void
+  isCustomDb: boolean
+  setIsCustomDb: (v: boolean) => void
+  customDbSuggestions: string[]
+  setCustomDbSuggestions: (qs: string[]) => void
+  suggestionsLoading: boolean
+  setSuggestionsLoading: (v: boolean) => void
 
   // Init / DB
   dbSeeded: boolean
@@ -104,6 +110,12 @@ export const useStore = create<Store>((set) => ({
   // DB
   dbLabel: 'benchmark (built-in)',
   setDbLabel: (label) => set({ dbLabel: label }),
+  isCustomDb: false,
+  setIsCustomDb: (v) => set({ isCustomDb: v }),
+  customDbSuggestions: [],
+  setCustomDbSuggestions: (qs) => set({ customDbSuggestions: qs }),
+  suggestionsLoading: false,
+  setSuggestionsLoading: (v) => set({ suggestionsLoading: v }),
 
   // Init
   dbSeeded: false,