feat: show query result table in history sidebar modal

app.py

@@ -99,8 +99,14 @@ def chat_endpoint(req: QuestionRequest):
         (result.get("sql") or "").replace("\n", " ")[:200],
     )
 
-    # Persist this turn for future context
-    add_turn(conversation_id, req.question, result["answer"], result["sql"])
+    # Persist this turn for future context (store up to 200 rows so modal can show them)
+    add_turn(
+        conversation_id,
+        req.question,
+        result["answer"],
+        result["sql"],
+        query_result=(result["data"][:200] if result.get("data") else None),
+    )
 
     return ChatResponse(**result)
 

db/memory.py

@@ -6,6 +6,7 @@ use recent context for follow‑up questions.
 
 from __future__ import annotations
 
+import json
 from typing import Any, List, Dict
 
 from sqlalchemy import text
@@ -17,38 +18,51 @@ _TABLE_CREATED = False
 
 
 def _ensure_table() -> None:
-    """Create the chat_history table if it doesn't exist."""
+    """Create the chat_history table if it doesn't exist, and add query_result column if missing."""
     global _TABLE_CREATED
     if _TABLE_CREATED:
         return
 
-    ddl = text(
-        """
-        CREATE TABLE IF NOT EXISTS chat_history (
-            id BIGSERIAL PRIMARY KEY,
-            conversation_id TEXT NOT NULL,
-            question TEXT NOT NULL,
-            answer TEXT NOT NULL,
-            sql_query TEXT,
-            created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
-        );
-        """
-    )
     engine = get_engine()
     with engine.begin() as conn:
-        conn.execute(ddl)
+        conn.execute(text(
+            """
+            CREATE TABLE IF NOT EXISTS chat_history (
+                id BIGSERIAL PRIMARY KEY,
+                conversation_id TEXT NOT NULL,
+                question TEXT NOT NULL,
+                answer TEXT NOT NULL,
+                sql_query TEXT,
+                query_result TEXT,
+                created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+            );
+            """
+        ))
+        # Migrate existing tables that don't have the query_result column yet
+        conn.execute(text(
+            """
+            ALTER TABLE chat_history ADD COLUMN IF NOT EXISTS query_result TEXT;
+            """
+        ))
 
     _TABLE_CREATED = True
 
 
-def add_turn(conversation_id: str, question: str, answer: str, sql_query: str | None) -> None:
+def add_turn(
+    conversation_id: str,
+    question: str,
+    answer: str,
+    sql_query: str | None,
+    query_result: list | None = None,
+) -> None:
     """Append a single Q/A turn to the history."""
     _ensure_table()
     engine = get_engine()
+    result_json = json.dumps(query_result, default=str) if query_result else None
     insert_stmt = text(
         """
-        INSERT INTO chat_history (conversation_id, question, answer, sql_query)
-        VALUES (:conversation_id, :question, :answer, :sql_query)
+        INSERT INTO chat_history (conversation_id, question, answer, sql_query, query_result)
+        VALUES (:conversation_id, :question, :answer, :sql_query, :query_result)
         """
     )
     with engine.begin() as conn:
@@ -59,6 +73,7 @@ def add_turn(conversation_id: str, question: str, answer: str, sql_query: str |
                 "question": question,
                 "answer": answer,
                 "sql_query": sql_query,
+                "query_result": result_json,
             },
         )
 
@@ -80,7 +95,7 @@ def get_full_history(conversation_id: str) -> List[Dict[str, Any]]:
     engine = get_engine()
     query = text(
         """
-        SELECT id, question, answer, sql_query, created_at
+        SELECT id, question, answer, sql_query, query_result, created_at
         FROM chat_history
         WHERE conversation_id = :conversation_id
         ORDER BY created_at ASC
@@ -90,7 +105,18 @@ def get_full_history(conversation_id: str) -> List[Dict[str, Any]]:
         rows = conn.execute(
             query, {"conversation_id": conversation_id}
         ).mappings().all()
-    return [dict(r) for r in rows]
+
+    result = []
+    for r in rows:
+        row = dict(r)
+        # Deserialize query_result JSON string back to a list
+        if row.get("query_result"):
+            try:
+                row["query_result"] = json.loads(row["query_result"])
+            except (json.JSONDecodeError, TypeError):
+                row["query_result"] = None
+        result.append(row)
+    return result
 
 
 def get_recent_history(conversation_id: str, limit: int = 5) -> List[Dict[str, Any]]:

frontend/script.js

@@ -145,6 +145,27 @@
     }
 
     // ── History modal ─────────────────────────────────────────────────────
+    function buildModalTable(rows) {
+        if (!rows || rows.length === 0) return '<p class="modal-no-data">No data returned.</p>';
+        const cols = Object.keys(rows[0]);
+        let html = '<div class="modal-table-wrapper"><table class="modal-table"><thead><tr>';
+        cols.forEach(c => { html += `<th>${escapeHtml(c)}</th>`; });
+        html += "</tr></thead><tbody>";
+        rows.forEach(row => {
+            html += "<tr>";
+            cols.forEach(c => {
+                const val = row[c];
+                html += `<td>${escapeHtml(val === null || val === undefined ? "NULL" : String(val))}</td>`;
+            });
+            html += "</tr>";
+        });
+        html += "</tbody></table></div>";
+        if (rows.length === 200) {
+            html += '<p class="modal-no-data" style="margin-top:0.5rem;">Showing first 200 rows.</p>';
+        }
+        return html;
+    }
+
     function openHistoryModal(turn) {
         modalTitle.textContent = turn.question.length > 60
             ? turn.question.slice(0, 60) + "…"
@@ -153,6 +174,9 @@
         const date = new Date(turn.created_at);
         const timeStr = date.toLocaleString();
 
+        const rowCount = turn.query_result ? turn.query_result.length : 0;
+        const rowLabel = rowCount === 1 ? "1 row" : `${rowCount} rows`;
+
         modalBody.innerHTML = `
             <div class="modal-section">
                 <span class="modal-section-label">Question</span>
@@ -163,6 +187,10 @@
                 <span class="modal-section-label">Generated SQL</span>
                 <div class="modal-section-content modal-sql">${escapeHtml(turn.sql_query)}</div>
             </div>` : ""}
+            <div class="modal-section">
+                <span class="modal-section-label">Query Result${turn.query_result ? ` · ${rowLabel}` : ""}</span>
+                ${buildModalTable(turn.query_result)}
+            </div>
             <div class="modal-section">
                 <span class="modal-section-label">AI Explanation</span>
                 <div class="modal-section-content">${escapeHtml(turn.answer)}</div>

frontend/style.css

@@ -423,6 +423,65 @@ body {
     margin-top: -0.5rem;
 }
 
+.modal-table-wrapper {
+    overflow-x: auto;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    background: var(--bg-secondary);
+}
+
+.modal-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.8rem;
+    font-family: var(--font-mono);
+}
+
+.modal-table thead th {
+    background: rgba(16,185,129,0.08);
+    color: var(--accent-emerald);
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0.55rem 0.75rem;
+    text-align: left;
+    border-bottom: 1px solid var(--border-subtle);
+    white-space: nowrap;
+}
+
+.modal-table tbody tr {
+    border-bottom: 1px solid var(--border-subtle);
+    transition: background var(--transition-fast);
+}
+
+.modal-table tbody tr:last-child {
+    border-bottom: none;
+}
+
+.modal-table tbody tr:hover {
+    background: rgba(16,185,129,0.04);
+}
+
+.modal-table tbody td {
+    padding: 0.5rem 0.75rem;
+    color: var(--text-secondary);
+    white-space: nowrap;
+    max-width: 260px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.modal-no-data {
+    font-size: 0.82rem;
+    color: var(--text-muted);
+    padding: 0.75rem 1rem;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    margin: 0;
+}
+
 /* ── Background Effects ─────────────────────────────────────────────────── */
 
 .bg-effects {