feat: SQL Query Interface UX — result table, chart layout, tooltips, prompt history (#62)

* fix: quote Retention column in KPIs query and coerce pg string counts to numbers for Recharts

* fix: use exact case-sensitive column names in LLM schema prompt to prevent Postgres quoting errors

* fix: chart ratios, tooltip overflow, and raw data table below viz

* feat: add POST /api/query-history for server-side audit logging

Appends JSONL entries to logs/query-history.jsonl on each POST.
Returns 400 on missing/invalid fields, 500 on write errors.
Adds logs/ to .gitignore so log file is not committed.

* feat: add prompt history panel with localStorage persistence and re-run

* fix: bar chart colors, tooltip contrast, bar width, remove API Query String field

- Replace hsl(var(--x)) with var(--x) throughout — CSS vars use oklch() not HSL,
  so the hsl() wrapper produced invalid colors (black bars, broken tooltips)
- Extract shared TOOLTIP_STYLE constant with popover-foreground color for contrast
- Add maxBarSize={48} to Bar to prevent bars spanning full category width
- Remove 'API Query String' field from QueryPlanPanel

* fix: remove bar chart hover cursor background

Author: William-Hill

codebenders-dashboard/.gitignore

@@ -31,3 +31,6 @@ yarn-error.log*
 # Typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Audit logs
+logs/

codebenders-dashboard/app/api/query-history/route.ts

@@ -0,0 +1,60 @@
+import { type NextRequest, NextResponse } from "next/server"
+import { mkdir, appendFile } from "fs/promises"
+import path from "path"
+
+const LOGS_DIR = path.join(process.cwd(), "logs")
+const LOG_FILE = path.join(LOGS_DIR, "query-history.jsonl")
+
+interface QueryHistoryEntry {
+  prompt: string
+  institution: string
+  vizType: string
+  rowCount: number
+  timestamp: string
+}
+
+export async function POST(request: NextRequest) {
+  let body: unknown
+
+  try {
+    body = await request.json()
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 })
+  }
+
+  const entry = body as Record<string, unknown>
+
+  // Validate required fields
+  if (
+    typeof entry.prompt !== "string" ||
+    typeof entry.institution !== "string" ||
+    typeof entry.vizType !== "string" ||
+    typeof entry.rowCount !== "number" ||
+    typeof entry.timestamp !== "string"
+  ) {
+    return NextResponse.json(
+      { error: "Missing or invalid required fields: prompt, institution, vizType, rowCount, timestamp" },
+      { status: 400 }
+    )
+  }
+
+  const record: QueryHistoryEntry = {
+    prompt: entry.prompt,
+    institution: entry.institution,
+    vizType: entry.vizType,
+    rowCount: entry.rowCount,
+    timestamp: entry.timestamp,
+  }
+
+  try {
+    await mkdir(LOGS_DIR, { recursive: true })
+    await appendFile(LOG_FILE, JSON.stringify(record) + "\n", "utf8")
+    return NextResponse.json({ ok: true }, { status: 200 })
+  } catch (error) {
+    console.error("query-history write error:", error)
+    return NextResponse.json(
+      { error: "Failed to write log entry" },
+      { status: 500 }
+    )
+  }
+}

codebenders-dashboard/app/query/page.tsx

@@ -9,9 +9,10 @@ import { Switch } from "@/components/ui/switch"
 import { Label } from "@/components/ui/label"
 import { AnalysisResult } from "@/components/analysis-result"
 import { QueryPlanPanel } from "@/components/query-plan-panel"
+import { QueryHistoryPanel } from "@/components/query-history-panel"
 import { analyzePrompt } from "@/lib/prompt-analyzer"
 import { executeQuery } from "@/lib/query-executor"
-import type { QueryPlan, QueryResult } from "@/lib/types"
+import type { QueryPlan, QueryResult, HistoryEntry } from "@/lib/types"
 import Link from "next/link"
 import { ArrowLeft } from "lucide-react"
 
@@ -29,10 +30,25 @@ export default function QueryPage() {
   const [queryPlan, setQueryPlan] = useState<QueryPlan | null>(null)
   const [queryResult, setQueryResult] = useState<QueryResult | null>(null)
   const [useDirectDB, setUseDirectDB] = useState(true)
+  const [history, setHistory] = useState<HistoryEntry[]>(() => {
+    // Read from localStorage on mount (client-only)
+    if (typeof window === "undefined") return []
+    try {
+      return JSON.parse(localStorage.getItem("bishop_query_history") || "[]")
+    } catch {
+      return []
+    }
+  })
 
-  const handleAnalyze = async () => {
-    console.log("handleAnalyze", prompt, institution)
-    if (!prompt.trim()) return
+  const handleAnalyze = async (
+    overridePrompt?: string,
+    overrideInstitution?: string,
+  ) => {
+    const activePrompt = overridePrompt ?? prompt
+    const activeInstitution = overrideInstitution ?? institution
+
+    console.log("handleAnalyze", activePrompt, activeInstitution)
+    if (!activePrompt.trim()) return
 
     setIsAnalyzing(true)
     try {
@@ -45,11 +61,11 @@ export default function QueryPage() {
         const response = await fetch("/api/analyze", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ prompt, institution }),
+          body: JSON.stringify({ prompt: activePrompt, institution: activeInstitution }),
         })
 
         console.log("response status:", response.status)
-        
+
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}))
           console.error("response error", response.status, errorData)
@@ -59,14 +75,37 @@ export default function QueryPage() {
         plan = await response.json()
         console.log("plan received:", plan)
       } else {
-        plan = analyzePrompt(prompt, institution)
+        plan = analyzePrompt(activePrompt, activeInstitution)
       }
 
       setQueryPlan(plan)
       console.log("executing query with plan:", plan)
-      const result = await executeQuery(plan, institution, useDirectDB)
+      const result = await executeQuery(plan, activeInstitution, useDirectDB)
       console.log("query result:", result)
       setQueryResult(result)
+
+      // Persist history entry
+      const entry: HistoryEntry = {
+        id: crypto.randomUUID(),
+        timestamp: new Date().toISOString(),
+        institution: activeInstitution,
+        prompt: activePrompt,
+        rowCount: result.rowCount,
+        vizType: plan.vizType,
+      }
+      // Prepend and cap at 50 entries
+      setHistory(prev => {
+        const updated = [entry, ...prev].slice(0, 50)
+        localStorage.setItem("bishop_query_history", JSON.stringify(updated))
+        return updated
+      })
+
+      // Fire-and-forget audit log — don't await or block on failure
+      fetch("/api/query-history", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(entry),
+      }).catch(() => {/* ignore audit failures */})
     } catch (error) {
       console.error("Error analyzing prompt:", error)
       alert("Error: " + (error instanceof Error ? error.message : String(error)))
@@ -75,6 +114,17 @@ export default function QueryPage() {
     }
   }
 
+  const handleRerun = (entry: HistoryEntry) => {
+    setInstitution(entry.institution)
+    setPrompt(entry.prompt)
+    handleAnalyze(entry.prompt, entry.institution)
+  }
+
+  const handleClear = () => {
+    setHistory([])
+    localStorage.removeItem("bishop_query_history")
+  }
+
   return (
     <div className="min-h-screen bg-background">
       <div className="container mx-auto p-6 space-y-6">
@@ -136,14 +186,22 @@ export default function QueryPage() {
               </div>
 
               <div className="flex items-end">
-                <Button onClick={handleAnalyze} disabled={isAnalyzing || !prompt.trim()} className="w-full md:w-auto">
+                <Button onClick={() => handleAnalyze()} disabled={isAnalyzing || !prompt.trim()} className="w-full md:w-auto">
                   {isAnalyzing ? "Analyzing..." : "Analyze"}
                 </Button>
               </div>
             </div>
           </CardContent>
         </Card>
 
+        {history.length > 0 && (
+          <QueryHistoryPanel
+            entries={history}
+            onRerun={handleRerun}
+            onClear={handleClear}
+          />
+        )}
+
         {queryResult && queryPlan && (
           <div className="grid gap-6 lg:grid-cols-[1fr_400px]">
             <AnalysisResult result={queryResult} plan={queryPlan} />
@@ -165,4 +223,3 @@ export default function QueryPage() {
     </div>
   )
 }
-