add all files

ai_agents/cane_agent/ui/README.md

@@ -0,0 +1,35 @@
+# SQL Agent Web UI
+
+A lightweight FastAPI + vanilla JS frontend for interacting with the SugarScale SQL agent.
+
+## Backend
+
+Located at `db_agent/ui/backend/main.py`. It exposes:
+- `POST /api/query` – wraps the existing agent pipeline (LLM + optional SQL execution + logging).
+- `GET /health` – health probe.
+- Serves the static frontend and index page.
+
+### Run locally
+```powershell
+# Activate your virtual environment first
+uvicorn db_agent.ui.backend.main:app --reload --host 0.0.0.0 --port 8000
+```
+
+The UI will be available at `http://localhost:8000/`. Adjust the host/port as needed.
+
+## Frontend
+
+Files under `db_agent/ui/frontend/`:
+- `index.html` – main page with the question form and results display.
+- `static/app.js` – handles form submission, fetches `/api/query`, renders results.
+- `static/styles.css` – modern styling.
+
+## Configuration Notes
+- The backend reuses environment variables (`DB_SERVER`, `DB_DATABASE`, etc.) for SQL execution, so ensure they are set before starting the FastAPI server.
+- The backend expects the LLM endpoint configured in `db_agent/client.LlmConfig.base_url` (defaults to `http://192.168.0.30:8080`). Update if your TGI server runs elsewhere.
+- Interaction logs still append to `db_agent/logs/query_log.jsonl` by default.
+
+## Next Ideas
+- Add user authentication or API keys.
+- Save favorite queries or table presets.
+- Stream results for large datasets.

ai_agents/cane_agent/ui/backend/main.py

@@ -0,0 +1,181 @@
+from __future__ import annotations
+
+import logging
+import json
+from pathlib import Path
+from typing import Literal, Optional
+
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel, Field
+
+from db_agent.client import SqlAgentClient, default_client
+from db_agent.log_utils import log_interaction
+from db_agent.sql_executor import SqlExecutionResult, SqlValidationError, execute_sql
+
+logger = logging.getLogger("db_agent_ui")
+
+
+class QueryRequest(BaseModel):
+    question: str = Field(..., description="Natural language question")
+    tables: Optional[list[str]] = Field(default=None, description="Optional table hints")
+    execute: bool = Field(default=False, description="Run the generated SQL against MSSQL")
+    max_rows: int = Field(default=500, ge=1, description="Row cap applied via TOP clause")
+    feedback: Optional[str] = Field(default=None, description="Optional user feedback tag")
+
+
+class QueryResponse(BaseModel):
+    sql: str
+    summary: str
+    sanitized_sql: Optional[str] = None
+    rows: Optional[list[dict[str, object]]] = None
+    columns: Optional[list[str]] = None
+    row_count: Optional[int] = None
+    llm_warning: Optional[str] = None
+    execution_status: Optional[str] = None
+    execution_error: Optional[str] = None
+    user_feedback: Optional[str] = None
+
+
+app = FastAPI(title="SugarScale SQL Agent UI", version="0.1.0")
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+frontend_dir = Path(__file__).resolve().parent.parent / "frontend"
+static_dir = frontend_dir / "static"
+if static_dir.exists():
+    app.mount("/static", StaticFiles(directory=static_dir), name="static")
+
+_agent_client: Optional[SqlAgentClient] = None
+
+
+def get_client() -> SqlAgentClient:
+    global _agent_client
+    if _agent_client is None:
+        _agent_client = default_client()
+    return _agent_client
+
+
+class FeedbackRequest(BaseModel):
+    question: str = Field(..., description="Question that produced the answer")
+    sql: str = Field(..., description="Generated SQL that was reviewed")
+    summary: Optional[str] = None
+    sanitized_sql: Optional[str] = None
+    feedback: Literal["correct", "incorrect"] = Field(..., description="User feedback tag")
+
+
+@app.post("/api/query", response_model=QueryResponse)
+def query_endpoint(payload: QueryRequest) -> QueryResponse:
+    client = get_client()
+    response = client.query(question=payload.question, table_hints=payload.tables)
+
+    sql = response.get("sql", "").strip()
+    summary = response.get("summary", "").strip()
+    warning = response.get("llm_warning")
+    raw_response = json.dumps(response, ensure_ascii=False)
+    sanitized_sql = None
+    rows = None
+    columns = None
+    row_count = None
+    execution_status = None
+    execution_error = None
+
+    normalized_sql = sql.lstrip()
+    has_sql = bool(normalized_sql)
+    sql_is_select = normalized_sql.lower().startswith("select") if has_sql else False
+
+    if payload.execute:
+        if not has_sql:
+            warning = warning or "Model did not return executable SQL; nothing was run."
+        elif not sql_is_select:
+            warning = warning or "Model did not return a valid SELECT statement; execution skipped."
+        else:
+            try:
+                exec_result: SqlExecutionResult = execute_sql(
+                    normalized_sql,
+                    max_rows=payload.max_rows,
+                )
+            except SqlValidationError as exc:
+                execution_error = str(exc)
+                raise HTTPException(status_code=400, detail=str(exc)) from exc
+            except Exception as exc:  # pylint: disable=broad-except
+                logger.exception("SQL execution error")
+                execution_error = str(exc)
+                raise HTTPException(status_code=500, detail="SQL execution failed") from exc
+            else:
+                sanitized_sql = exec_result.sql
+                rows = exec_result.rows
+                columns = exec_result.columns
+                row_count = len(rows)
+                execution_status = "success"
+
+    log_interaction(
+        question=payload.question,
+        generated_sql=sql,
+        summary=summary,
+        sanitized_sql=sanitized_sql,
+        row_count=row_count,
+        execution_status=execution_status,
+        execution_error=execution_error,
+        raw_response=raw_response,
+        user_feedback=payload.feedback,
+        metadata={
+            "source": "ui",
+            "execute": payload.execute,
+            "tables": payload.tables,
+            "llm_warning": warning,
+        },
+    )
+
+    return QueryResponse(
+        sql=sql,
+        summary=summary,
+        sanitized_sql=sanitized_sql,
+        rows=rows,
+        columns=columns,
+        row_count=row_count,
+        llm_warning=warning,
+        execution_status=execution_status,
+        execution_error=execution_error,
+        user_feedback=payload.feedback,
+    )
+
+
+@app.post("/api/feedback")
+def record_feedback(payload: FeedbackRequest) -> dict[str, str]:
+    feedback_value = payload.feedback.lower()
+
+    log_interaction(
+        question=payload.question,
+        generated_sql=payload.sql,
+        summary=payload.summary or "",
+        sanitized_sql=payload.sanitized_sql,
+        row_count=None,
+        execution_status=None,
+        execution_error=None,
+        raw_response=None,
+        user_feedback=feedback_value,
+        metadata={
+            "source": "ui-feedback",
+            "feedback_only": True,
+        },
+    )
+
+    return {"status": "recorded"}
+
+
+@app.get("/health")
+def healthcheck() -> dict[str, str]:
+    return {"status": "ok"}
+
+
+@app.get("/")
+def index() -> FileResponse:
+    return FileResponse(frontend_dir / "index.html")

ai_agents/cane_agent/ui/frontend/index.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>SugarScale SQL Agent</title>
+    <link rel="stylesheet" href="/static/styles.css" />
+  </head>
+  <body>
+    <header>
+      <h1>SugarScale SQL Agent</h1>
+      <p>Ask natural-language questions and optionally execute the generated SQL.</p>
+    </header>
+
+    <main>
+      <section class="panel">
+        <form id="query-form">
+          <label for="question">Question</label>
+          <textarea id="question" name="question" rows="3" placeholder="e.g., How many loads were completed yesterday?" required></textarea>
+
+          <label for="tables">Table hints (comma-separated)</label>
+          <input id="tables" name="tables" type="text" placeholder="dbo.SugarLoadData" />
+
+          <div class="options">
+            <label>
+              <input type="checkbox" id="execute" name="execute" /> Execute SQL
+            </label>
+            <label for="max-rows">Max rows</label>
+            <input id="max-rows" name="max_rows" type="number" min="1" value="500" />
+          </div>
+
+          <button type="submit">Run</button>
+        </form>
+      </section>
+
+      <section class="panel" id="results" hidden>
+        <h2>Results</h2>
+        <div class="warning" id="warning" hidden></div>
+        <div id="summary"></div>
+        <details>
+          <summary>Generated SQL</summary>
+          <pre><code id="generated-sql"></code></pre>
+        </details>
+        <details id="sanitized-block" hidden>
+          <summary>Sanitized SQL (executed)</summary>
+          <pre><code id="sanitized-sql"></code></pre>
+        </details>
+        <div id="row-count"></div>
+        <table id="result-table" hidden>
+          <thead id="result-thead"></thead>
+          <tbody id="result-tbody"></tbody>
+        </table>
+        <div id="feedback-panel" hidden>
+          <h3>Was this answer helpful?</h3>
+          <div class="feedback-actions">
+            <button type="button" id="feedback-correct">Mark Correct</button>
+            <button type="button" id="feedback-incorrect" class="secondary">Needs Work</button>
+          </div>
+          <p id="feedback-status" hidden></p>
+        </div>
+      </section>
+
+      <section class="panel error" id="error" hidden>
+        <h2>Error</h2>
+        <pre id="error-message"></pre>
+      </section>
+    </main>
+
+    <footer>
+      <small>Powered by the SugarScale SQL agent.</small>
+    </footer>
+
+    <script src="/static/app.js" type="module"></script>
+  </body>
+</html>

ai_agents/cane_agent/ui/frontend/static/app.js

@@ -0,0 +1,182 @@
+const form = document.getElementById("query-form");
+const resultsPanel = document.getElementById("results");
+const errorPanel = document.getElementById("error");
+const warningEl = document.getElementById("warning");
+const summaryEl = document.getElementById("summary");
+const generatedSqlEl = document.getElementById("generated-sql");
+const sanitizedBlock = document.getElementById("sanitized-block");
+const sanitizedSqlEl = document.getElementById("sanitized-sql");
+const rowCountEl = document.getElementById("row-count");
+const tableEl = document.getElementById("result-table");
+const tableHeadEl = document.getElementById("result-thead");
+const tableBodyEl = document.getElementById("result-tbody");
+const errorMessageEl = document.getElementById("error-message");
+const feedbackPanel = document.getElementById("feedback-panel");
+const feedbackCorrectBtn = document.getElementById("feedback-correct");
+const feedbackIncorrectBtn = document.getElementById("feedback-incorrect");
+const feedbackStatus = document.getElementById("feedback-status");
+
+let latestResult = null;
+
+function resetPanels() {
+  resultsPanel.hidden = true;
+  errorPanel.hidden = true;
+  warningEl.hidden = true;
+  warningEl.textContent = "";
+  summaryEl.textContent = "";
+  generatedSqlEl.textContent = "";
+  sanitizedBlock.hidden = true;
+  sanitizedSqlEl.textContent = "";
+  rowCountEl.textContent = "";
+  tableEl.hidden = true;
+  tableHeadEl.innerHTML = "";
+  tableBodyEl.innerHTML = "";
+  errorMessageEl.textContent = "";
+  feedbackPanel.hidden = true;
+  feedbackStatus.hidden = true;
+  feedbackStatus.textContent = "";
+  latestResult = null;
+}
+
+function renderTable(columns, rows) {
+  if (!columns || !rows || rows.length === 0) {
+    tableEl.hidden = true;
+    return;
+  }
+
+  const headerRow = document.createElement("tr");
+  columns.forEach((col) => {
+    const th = document.createElement("th");
+    th.textContent = col;
+    headerRow.appendChild(th);
+  });
+  tableHeadEl.appendChild(headerRow);
+
+  rows.forEach((row) => {
+    const tr = document.createElement("tr");
+    columns.forEach((col) => {
+      const td = document.createElement("td");
+      const value = row[col];
+      td.textContent = value === null || value === undefined ? "" : String(value);
+      tr.appendChild(td);
+    });
+    tableBodyEl.appendChild(tr);
+  });
+
+  tableEl.hidden = false;
+}
+
+form.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  resetPanels();
+
+  const question = document.getElementById("question").value.trim();
+  const tablesValue = document.getElementById("tables").value.trim();
+  const execute = document.getElementById("execute").checked;
+  const maxRows = parseInt(document.getElementById("max-rows").value, 10) || 500;
+
+  if (!question) {
+    errorPanel.hidden = false;
+    errorMessageEl.textContent = "Please enter a question.";
+    return;
+  }
+
+  const payload = {
+    question,
+    tables: tablesValue ? tablesValue.split(",").map((s) => s.trim()).filter(Boolean) : undefined,
+    execute,
+    max_rows: maxRows,
+    feedback: null,
+  };
+
+  try {
+    const response = await fetch("/api/query", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      throw new Error(errorData.detail || `Request failed with status ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    summaryEl.textContent = data.summary || "(No summary provided)";
+    generatedSqlEl.textContent = data.sql || "";
+
+    if (data.llm_warning) {
+      warningEl.textContent = data.llm_warning;
+      warningEl.hidden = false;
+    }
+
+    if (data.sanitized_sql) {
+      sanitizedSqlEl.textContent = data.sanitized_sql;
+      sanitizedBlock.hidden = false;
+    }
+
+    if (typeof data.row_count === "number") {
+      rowCountEl.textContent = `Rows returned: ${data.row_count}`;
+    }
+
+    renderTable(data.columns, data.rows);
+
+    latestResult = {
+      question,
+      sql: data.sql || "",
+      summary: data.summary || "",
+      sanitized_sql: data.sanitized_sql || null,
+    };
+    feedbackPanel.hidden = false;
+    feedbackStatus.hidden = true;
+    feedbackStatus.textContent = "";
+
+    resultsPanel.hidden = false;
+  } catch (error) {
+    errorPanel.hidden = false;
+    errorMessageEl.textContent = error.message || String(error);
+  }
+});
+
+async function sendFeedback(tag) {
+  if (!latestResult) {
+    return;
+  }
+
+  const payload = {
+    question: latestResult.question,
+    sql: latestResult.sql,
+    summary: latestResult.summary,
+    sanitized_sql: latestResult.sanitized_sql,
+    feedback: tag,
+  };
+
+  feedbackStatus.hidden = false;
+  feedbackStatus.textContent = "Sending feedback...";
+  feedbackCorrectBtn.disabled = true;
+  feedbackIncorrectBtn.disabled = true;
+
+  try {
+    const response = await fetch("/api/feedback", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      throw new Error(errorData.detail || `Feedback request failed with status ${response.status}`);
+    }
+
+    feedbackStatus.textContent = tag === "correct" ? "Marked as correct." : "Marked as needs work.";
+  } catch (error) {
+    feedbackStatus.textContent = error.message || String(error);
+  } finally {
+    feedbackCorrectBtn.disabled = false;
+    feedbackIncorrectBtn.disabled = false;
+  }
+}
+
+feedbackCorrectBtn.addEventListener("click", () => sendFeedback("correct"));
+feedbackIncorrectBtn.addEventListener("click", () => sendFeedback("incorrect"));

ai_agents/cane_agent/ui/frontend/static/styles.css

@@ -0,0 +1,144 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  margin: 0;
+  padding: 0;
+  background: #f4f6f8;
+  color: #0f172a;
+}
+
+header,
+footer {
+  background: #0f172a;
+  color: #f8fafc;
+  padding: 1.5rem;
+  text-align: center;
+}
+
+main {
+  max-width: 960px;
+  margin: 2rem auto;
+  display: grid;
+  gap: 1.5rem;
+}
+
+.panel {
+  background: #ffffff;
+  padding: 1.5rem;
+  border-radius: 12px;
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
+}
+
+.panel.error {
+  border-left: 6px solid #ef4444;
+}
+
+.warning {
+  background: #fef3c7;
+  color: #92400e;
+  border-left: 4px solid #f59e0b;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  white-space: pre-wrap;
+}
+
+label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 0.35rem;
+}
+
+textarea,
+input,
+button {
+  width: 100%;
+  padding: 0.75rem;
+  border-radius: 8px;
+  border: 1px solid #cbd5f5;
+  font-size: 1rem;
+  margin-bottom: 1rem;
+}
+
+textarea:focus,
+input:focus {
+  outline: none;
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
+}
+
+.options {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.options label {
+  margin-bottom: 0;
+  font-weight: 500;
+}
+
+button {
+  background: linear-gradient(135deg, #2563eb, #1d4ed8);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  font-weight: 600;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
+}
+
+button.secondary {
+  background: linear-gradient(135deg, #64748b, #475569);
+}
+
+pre {
+  background: #0f172a;
+  color: #e2e8f0;
+  padding: 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 1rem;
+}
+
+th,
+td {
+  border: 1px solid #e2e8f0;
+  padding: 0.65rem;
+  text-align: left;
+}
+
+th {
+  background: #f1f5f9;
+}
+
+#error-message {
+  white-space: pre-wrap;
+}
+
+#feedback-panel {
+  margin-top: 1.5rem;
+}
+
+.feedback-actions {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+}
+
+#feedback-status {
+  color: #0369a1;
+  font-weight: 600;
+}