From 1cfc6787590166223534abbe78160334feca05e9 Mon Sep 17 00:00:00 2001
From: Janin Nicole Manalili <janin.nicole.m@gmail.com>
Date: Sun, 5 Apr 2026 19:51:56 +0800
Subject: [PATCH] add: validation; edit: ui

---
 frontend/app/globals.css              | 194 ++++++++-
 frontend/app/page.tsx                 | 567 ++++++--------------------
 frontend/components/AnalysisPanel.tsx |  56 ++-
 frontend/components/FlowDiagram.tsx   |  30 +-
 frontend/components/QueryEditor.tsx   |  64 ++-
 frontend/package-lock.json            |  97 ++++-
 frontend/package.json                 |   2 +
 7 files changed, 512 insertions(+), 498 deletions(-)

diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index f3bde4f..d79d00b 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -14,21 +14,46 @@
   --border-bright: #3a3a42;
   --text: #e4e4e7;
   --text-dim: #71717a;
-  --accent: #7c6af7;
-  --accent-dim: #4a3fa0;
+  --accent: #10b981;
+  --accent-dim: #059669;
   --node-scan: #3b82f6;
   --node-filter: #10b981;
   --node-join: #f59e0b;
-  --node-aggregate: #8b5cf6;
+  --node-aggregate: #059669;
   --node-subquery: #ef4444;
   --node-sort: #06b6d4;
   --node-output: #6b7280;
-  --node-groupby: #ec4899;
+  --node-groupby: #047857;
   --cost-low: #10b981;
   --cost-medium: #f59e0b;
   --cost-high: #ef4444;
 }
 
+[data-theme="light"] {
+  --bg: #ffffff;
+  --surface-1: #f8f9fa;
+  --surface-2: #e9ecef;
+  --surface-3: #dee2e6;
+  --surface-4: #ced4da;
+  --border: #ced4da;
+  --border-bright: #adb5bd;
+  --text: #212529;
+  --text-dim: #6c757d;
+  --accent: #10b981;
+  --accent-dim: #059669;
+  --node-scan: #0d6efd;
+  --node-filter: #10b981;
+  --node-join: #fd7e14;
+  --node-aggregate: #059669;
+  --node-subquery: #dc3545;
+  --node-sort: #0dcaf0;
+  --node-output: #6c757d;
+  --node-groupby: #047857;
+  --cost-low: #10b981;
+  --cost-medium: #fd7e14;
+  --cost-high: #dc3545;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -121,3 +146,164 @@ body {
   color: var(--text);
   font-weight: 500;
 }
+
+/* App layout */
+.app-shell {
+  min-height: 100vh;
+  background: var(--bg);
+  display: flex;
+  flex-direction: column;
+}
+
+.app-header {
+  border-bottom: 1px solid var(--border);
+  padding: 0 24px;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.brand {
+  font-weight: 600;
+  font-size: 15px;
+  letter-spacing: -0.02em;
+  color: var(--text);
+}
+
+.brand-accent {
+  color: var(--accent);
+}
+
+.mode-toggle {
+  display: flex;
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 3px;
+  gap: 2px;
+}
+
+.toggle-button {
+  padding: 5px 14px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: "DM Sans", sans-serif;
+  background: transparent;
+  color: var(--text-dim);
+  transition: all 0.15s;
+}
+
+.toggle-button.active {
+  background: var(--accent);
+  color: white;
+}
+
+.theme-toggle {
+  background: var(--accent);
+  color: white;
+  border: none;
+  border-radius: 5px;
+  padding: 5px 14px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: "DM Sans", sans-serif;
+  transition: all 0.15s;
+}
+
+.theme-toggle:hover:not(:disabled) {
+  background: var(--accent-dim);
+}
+
+.theme-toggle:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.main-grid {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 1px;
+  background: var(--border);
+  overflow: hidden;
+  height: calc(100vh - 52px);
+}
+
+.panel-card {
+  background: var(--surface-1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.panel-card.full-height {
+  height: 100%;
+}
+
+.panel-header {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.panel-title {
+  font-size: 11px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 600;
+}
+
+.panel-body {
+  flex: 1;
+  overflow: hidden;
+}
+
+.panel-scroll {
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.panel-warning {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+  padding: 10px 12px;
+  background: var(--surface-2);
+  border-radius: 5px;
+  border-left: 3px solid var(--cost-medium);
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.5;
+}
+
+.empty-state {
+  color: var(--text-dim);
+  font-size: 13px;
+}
+
+.status-chip {
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 3px;
+  font-weight: 500;
+  background: var(--cost-low) 20;
+  color: var(--cost-low);
+}
+/* Error message styling */
+.analysis-content p:first-child {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--cost-high);
+  margin-bottom: 1rem;
+}
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index c57370b..7254097 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
 import dynamic from "next/dynamic";
 import AnalysisPanel from "@/components/AnalysisPanel";
 
@@ -33,6 +33,8 @@ WHERE id IN (
 
 type Mode = "single" | "compare";
 
+type Theme = "dark" | "light";
+
 interface Structure {
   nodes: any[];
   edges: any[];
@@ -42,6 +44,23 @@ interface Structure {
 
 export default function Home() {
   const [mode, setMode] = useState<Mode>("single");
+  const [theme, setTheme] = useState<Theme>("dark");
+
+  useEffect(() => {
+    const saved = window.localStorage.getItem("sqtip-theme");
+    if (saved === "light" || saved === "dark") {
+      setTheme(saved);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.dataset.theme = theme;
+    window.localStorage.setItem("sqtip-theme", theme);
+  }, [theme]);
+
+  const toggleTheme = useCallback(() => {
+    setTheme((current) => (current === "dark" ? "light" : "dark"));
+  }, []);
 
   // Single mode
   const [sql, setSql] = useState(SAMPLE_SINGLE);
@@ -67,10 +86,16 @@ export default function Home() {
         body: JSON.stringify({ sql }),
       });
       const data = await res.json();
-      setStructure(data.structure);
-      setAnalysis(data.analysis);
+      if (!res.ok) {
+        setAnalysis(`❌ ${data.error}`);
+        setStructure(null);
+      } else {
+        setStructure(data.structure);
+        setAnalysis(data.analysis);
+      }
     } catch (e) {
       setAnalysis("Error connecting to backend. Make sure Django is running.");
+      setStructure(null);
     }
     setLoading(false);
   }, [sql]);
@@ -85,233 +110,84 @@ export default function Home() {
         body: JSON.stringify({ sql1, sql2 }),
       });
       const data = await res.json();
-      setStructureA(data.query_a.structure);
-      setStructureB(data.query_b.structure);
-      setComparison(data.comparison);
+      if (!res.ok) {
+        setComparison(`❌ ${data.error}`);
+        setStructureA(null);
+        setStructureB(null);
+      } else {
+        setStructureA(data.query_a.structure);
+        setStructureB(data.query_b.structure);
+        setComparison(data.comparison);
+      }
     } catch (e) {
       setComparison(
         "Error connecting to backend. Make sure Django is running.",
       );
+      setStructureA(null);
+      setStructureB(null);
     }
     setLoadingCompare(false);
   }, [sql1, sql2]);
 
   return (
-    <div
-      style={{
-        minHeight: "100vh",
-        background: "#0a0a0b",
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
-      {/* Header */}
-      <header
-        style={{
-          borderBottom: "1px solid #2a2a2f",
-          padding: "0 24px",
-          height: "52px",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          flexShrink: 0,
-        }}
-      >
-        <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
-          <div
-            style={{
-              width: "22px",
-              height: "22px",
-              background: "#7c6af7",
-              borderRadius: "5px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-              <circle cx="6" cy="6" r="2" fill="white" />
-              <path
-                d="M6 1v2M6 9v2M1 6h2M9 6h2"
-                stroke="white"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-              />
-            </svg>
-          </div>
-          <span
-            style={{
-              fontWeight: 600,
-              fontSize: "15px",
-              letterSpacing: "-0.02em",
-            }}
-          >
-            SQTip
-          </span>
+    <div className="app-shell">
+      <header className="app-header">
+        <div className="brand">
+          sq<span className="brand-accent">tip</span>
         </div>
 
-        {/* Mode toggle */}
-        <div
-          style={{
-            display: "flex",
-            background: "#111113",
-            border: "1px solid #2a2a2f",
-            borderRadius: "6px",
-            padding: "3px",
-            gap: "2px",
-          }}
-        >
+        <div className="mode-toggle">
           {(["single", "compare"] as Mode[]).map((m) => (
             <button
               key={m}
+              className={`toggle-button ${mode === m ? "active" : ""}`}
               onClick={() => setMode(m)}
-              style={{
-                padding: "5px 14px",
-                borderRadius: "4px",
-                border: "none",
-                cursor: "pointer",
-                fontSize: "12px",
-                fontWeight: 500,
-                fontFamily: "DM Sans, sans-serif",
-                background: mode === m ? "#7c6af7" : "transparent",
-                color: mode === m ? "white" : "#71717a",
-                transition: "all 0.15s",
-              }}
+              type="button"
             >
               {m === "single" ? "Analyze" : "Compare"}
             </button>
           ))}
         </div>
 
-        <div style={{ width: "120px" }} />
+        <button className="theme-toggle" onClick={toggleTheme} type="button">
+          {theme === "dark" ? "Light mode" : "Dark mode"}
+        </button>
       </header>
 
-      {/* Single Mode */}
       {mode === "single" && (
-        <div
-          style={{
-            flex: 1,
-            display: "grid",
-            gridTemplateColumns: "1fr 1fr",
-            gridTemplateRows: "1fr 1fr",
-            gap: "1px",
-            background: "#2a2a2f",
-            overflow: "hidden",
-            height: "calc(100vh - 52px)",
-          }}
-        >
-          {/* Editor */}
-          <div
-            style={{
-              background: "#0a0a0b",
-              display: "flex",
-              flexDirection: "column",
-              overflow: "hidden",
-            }}
-          >
-            <div
-              style={{
-                padding: "10px 14px",
-                borderBottom: "1px solid #2a2a2f",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-              }}
-            >
-              <span
-                style={{
-                  fontSize: "11px",
-                  color: "#52525b",
-                  textTransform: "uppercase",
-                  letterSpacing: "0.08em",
-                  fontWeight: 600,
-                }}
-              >
-                SQL Query
-              </span>
+        <div className="main-grid">
+          <div className="panel-card full-height">
+            <div className="panel-header">
+              <span className="panel-title">SQL query</span>
               <button
+                className="theme-toggle"
                 onClick={runAnalysis}
+                type="button"
                 disabled={loading}
-                style={{
-                  background: "#7c6af7",
-                  color: "white",
-                  border: "none",
-                  borderRadius: "5px",
-                  padding: "5px 14px",
-                  fontSize: "12px",
-                  fontWeight: 500,
-                  cursor: loading ? "not-allowed" : "pointer",
-                  opacity: loading ? 0.7 : 1,
-                  fontFamily: "DM Sans, sans-serif",
-                }}
               >
                 {loading ? "Analyzing..." : "Analyze →"}
               </button>
             </div>
-            <div style={{ flex: 1, overflow: "hidden" }}>
+            <div className="panel-body">
               <QueryEditor
                 value={sql}
                 onChange={setSql}
                 placeholder="Write your SQL query here..."
+                theme={theme}
               />
             </div>
           </div>
 
-          {/* Flow diagram */}
-          <div
-            style={{
-              background: "#0a0a0b",
-              display: "flex",
-              flexDirection: "column",
-              overflow: "hidden",
-            }}
-          >
-            <div
-              style={{
-                padding: "10px 14px",
-                borderBottom: "1px solid #2a2a2f",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-              }}
-            >
-              <span
-                style={{
-                  fontSize: "11px",
-                  color: "#52525b",
-                  textTransform: "uppercase",
-                  letterSpacing: "0.08em",
-                  fontWeight: 600,
-                }}
-              >
-                Execution Flow
-              </span>
+          <div className="panel-card full-height">
+            <div className="panel-header">
+              <span className="panel-title">Execution flow</span>
               {structure && (
-                <span
-                  style={{
-                    fontSize: "10px",
-                    padding: "2px 8px",
-                    borderRadius: "3px",
-                    fontWeight: 500,
-                    background:
-                      structure.estimated_cost === "low"
-                        ? "#10b98120"
-                        : structure.estimated_cost === "high"
-                          ? "#ef444420"
-                          : "#f59e0b20",
-                    color:
-                      structure.estimated_cost === "low"
-                        ? "#10b981"
-                        : structure.estimated_cost === "high"
-                          ? "#ef4444"
-                          : "#f59e0b",
-                  }}
-                >
+                <span className="status-chip">
                   {structure.estimated_cost} cost
                 </span>
               )}
             </div>
-            <div style={{ flex: 1 }}>
+            <div className="panel-body">
               <FlowDiagram
                 nodes={structure?.nodes || []}
                 edges={structure?.edges || []}
@@ -319,61 +195,19 @@ export default function Home() {
             </div>
           </div>
 
-          {/* Warnings */}
-          <div
-            style={{
-              background: "#0a0a0b",
-              display: "flex",
-              flexDirection: "column",
-              overflow: "hidden",
-            }}
-          >
-            <div
-              style={{
-                padding: "10px 14px",
-                borderBottom: "1px solid #2a2a2f",
-              }}
-            >
-              <span
-                style={{
-                  fontSize: "11px",
-                  color: "#52525b",
-                  textTransform: "uppercase",
-                  letterSpacing: "0.08em",
-                  fontWeight: 600,
-                }}
-              >
-                Static Warnings
-              </span>
+          <div className="panel-card full-height">
+            <div className="panel-header">
+              <span className="panel-title">Static warnings</span>
             </div>
-            <div style={{ flex: 1, padding: "16px", overflowY: "auto" }}>
+            <div className="panel-body panel-scroll">
               {structure?.warnings?.length ? (
                 structure.warnings.map((w, i) => (
-                  <div
-                    key={i}
-                    style={{
-                      display: "flex",
-                      gap: "8px",
-                      marginBottom: "10px",
-                      padding: "10px 12px",
-                      background: "#18181b",
-                      borderRadius: "5px",
-                      borderLeft: "3px solid #f59e0b",
-                    }}
-                  >
-                    <span
-                      style={{
-                        fontSize: "12px",
-                        color: "#a1a1aa",
-                        lineHeight: 1.5,
-                      }}
-                    >
-                      {w}
-                    </span>
+                  <div key={i} className="panel-warning">
+                    {w}
                   </div>
                 ))
               ) : (
-                <p style={{ color: "#52525b", fontSize: "13px" }}>
+                <p className="empty-state">
                   {structure
                     ? "No warnings detected"
                     : "Run a query to see warnings"}
@@ -382,232 +216,71 @@ export default function Home() {
             </div>
           </div>
 
-          {/* Analysis */}
-          <div
-            style={{
-              background: "#0a0a0b",
-              display: "flex",
-              flexDirection: "column",
-              overflow: "hidden",
-            }}
-          >
-            <div
-              style={{
-                padding: "10px 14px",
-                borderBottom: "1px solid #2a2a2f",
-              }}
-            >
-              <span
-                style={{
-                  fontSize: "11px",
-                  color: "#52525b",
-                  textTransform: "uppercase",
-                  letterSpacing: "0.08em",
-                  fontWeight: 600,
-                }}
-              >
-                AI Analysis
-              </span>
+          <div className="panel-card full-height">
+            <div className="panel-header">
+              <span className="panel-title">AI analysis</span>
             </div>
-            <div style={{ flex: 1, overflow: "hidden" }}>
+            <div className="panel-body">
               <AnalysisPanel analysis={analysis} loading={loading} />
             </div>
           </div>
         </div>
       )}
 
-      {/* Compare Mode */}
       {mode === "compare" && (
-        <div
-          style={{
-            flex: 1,
-            display: "flex",
-            flexDirection: "column",
-            overflow: "hidden",
-            height: "calc(100vh - 52px)",
-          }}
-        >
-          {/* Top: two editors */}
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: "1px",
-              background: "#2a2a2f",
-              height: "240px",
-              flexShrink: 0,
-            }}
-          >
-            {[
-              { label: "Query A", value: sql1, onChange: setSql1 },
-              { label: "Query B", value: sql2, onChange: setSql2 },
-            ].map(({ label, value, onChange }) => (
-              <div
-                key={label}
-                style={{
-                  background: "#0a0a0b",
-                  display: "flex",
-                  flexDirection: "column",
-                  overflow: "hidden",
-                }}
-              >
-                <div
-                  style={{
-                    padding: "10px 14px",
-                    borderBottom: "1px solid #2a2a2f",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                  }}
-                >
-                  <span
-                    style={{
-                      fontSize: "11px",
-                      color: "#52525b",
-                      textTransform: "uppercase",
-                      letterSpacing: "0.08em",
-                      fontWeight: 600,
-                    }}
-                  >
-                    {label}
-                  </span>
-                  {label === "Query B" && (
-                    <button
-                      onClick={runComparison}
-                      disabled={loadingCompare}
-                      style={{
-                        background: "#7c6af7",
-                        color: "white",
-                        border: "none",
-                        borderRadius: "5px",
-                        padding: "5px 14px",
-                        fontSize: "12px",
-                        fontWeight: 500,
-                        cursor: loadingCompare ? "not-allowed" : "pointer",
-                        opacity: loadingCompare ? 0.7 : 1,
-                        fontFamily: "DM Sans, sans-serif",
-                      }}
-                    >
-                      {loadingCompare ? "Comparing..." : "Compare →"}
-                    </button>
-                  )}
-                </div>
-                <div style={{ flex: 1, overflow: "hidden" }}>
-                  <QueryEditor value={value} onChange={onChange} />
-                </div>
-              </div>
-            ))}
+        <div className="main-grid">
+          <div className="panel-card full-height">
+            <div className="panel-header">
+              <span className="panel-title">Query A</span>
+            </div>
+            <div className="panel-body">
+              <QueryEditor
+                value={sql1}
+                onChange={setSql1}
+                placeholder="First query"
+                theme={theme}
+              />
+            </div>
           </div>
 
-          {/* Middle: two diagrams */}
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: "1px",
-              background: "#2a2a2f",
-              flex: 1,
-              overflow: "hidden",
-            }}
-          >
-            {[
-              { label: "Flow A", structure: structureA },
-              { label: "Flow B", structure: structureB },
-            ].map(({ label, structure }) => (
-              <div
-                key={label}
-                style={{
-                  background: "#0a0a0b",
-                  display: "flex",
-                  flexDirection: "column",
-                  overflow: "hidden",
-                }}
+          <div className="panel-card full-height">
+            <div className="panel-header">
+              <span className="panel-title">Query B</span>
+              <button
+                className="theme-toggle"
+                onClick={runComparison}
+                type="button"
+                disabled={loadingCompare}
               >
-                <div
-                  style={{
-                    padding: "10px 14px",
-                    borderBottom: "1px solid #2a2a2f",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                  }}
-                >
-                  <span
-                    style={{
-                      fontSize: "11px",
-                      color: "#52525b",
-                      textTransform: "uppercase",
-                      letterSpacing: "0.08em",
-                      fontWeight: 600,
-                    }}
-                  >
-                    {label}
-                  </span>
-                  {structure && (
-                    <span
-                      style={{
-                        fontSize: "10px",
-                        padding: "2px 8px",
-                        borderRadius: "3px",
-                        fontWeight: 500,
-                        background:
-                          structure.estimated_cost === "low"
-                            ? "#10b98120"
-                            : structure.estimated_cost === "high"
-                              ? "#ef444420"
-                              : "#f59e0b20",
-                        color:
-                          structure.estimated_cost === "low"
-                            ? "#10b981"
-                            : structure.estimated_cost === "high"
-                              ? "#ef4444"
-                              : "#f59e0b",
-                      }}
-                    >
-                      {structure.estimated_cost} cost
-                    </span>
-                  )}
-                </div>
-                <div style={{ flex: 1 }}>
-                  <FlowDiagram
-                    nodes={structure?.nodes || []}
-                    edges={structure?.edges || []}
-                  />
-                </div>
-              </div>
-            ))}
+                {loadingCompare ? "Comparing..." : "Compare →"}
+              </button>
+            </div>
+            <div className="panel-body">
+              <QueryEditor
+                value={sql2}
+                onChange={setSql2}
+                placeholder="Second query"
+                theme={theme}
+              />
+            </div>
           </div>
 
-          {/* Bottom: comparison analysis */}
-          <div
-            style={{
-              height: "260px",
-              background: "#0a0a0b",
-              borderTop: "1px solid #2a2a2f",
-              display: "flex",
-              flexDirection: "column",
-              flexShrink: 0,
-            }}
-          >
-            <div
-              style={{
-                padding: "10px 14px",
-                borderBottom: "1px solid #2a2a2f",
-              }}
-            >
-              <span
-                style={{
-                  fontSize: "11px",
-                  color: "#52525b",
-                  textTransform: "uppercase",
-                  letterSpacing: "0.08em",
-                  fontWeight: 600,
-                }}
-              >
-                Comparison Analysis
-              </span>
+          <div className="panel-card full-height">
+            <div className="panel-header">
+              <span className="panel-title">Comparison</span>
+            </div>
+            <div className="panel-body panel-scroll">
+              <p className="empty-state">
+                {comparison || "Run comparison to see the diff"}
+              </p>
+            </div>
+          </div>
+
+          <div className="panel-card full-height">
+            <div className="panel-header">
+              <span className="panel-title">Analysis</span>
             </div>
-            <div style={{ flex: 1, overflow: "hidden" }}>
+            <div className="panel-body">
               <AnalysisPanel analysis={comparison} loading={loadingCompare} />
             </div>
           </div>
diff --git a/frontend/components/AnalysisPanel.tsx b/frontend/components/AnalysisPanel.tsx
index dca9ccd..58db797 100644
--- a/frontend/components/AnalysisPanel.tsx
+++ b/frontend/components/AnalysisPanel.tsx
@@ -1,41 +1,63 @@
-'use client'
-import ReactMarkdown from 'react-markdown'
+"use client";
+import ReactMarkdown from "react-markdown";
 
 interface Props {
-  analysis: string
-  loading: boolean
+  analysis: string;
+  loading: boolean;
 }
 
 export default function AnalysisPanel({ analysis, loading }: Props) {
   if (loading) {
     return (
-      <div style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <div
+        style={{
+          padding: "24px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "12px",
+        }}
+      >
         {[80, 60, 90, 50, 70].map((w, i) => (
-          <div key={i} style={{
-            height: '12px', width: `${w}%`,
-            background: '#18181b', borderRadius: '4px',
-            animation: 'pulse 1.5s ease-in-out infinite',
-            animationDelay: `${i * 0.1}s`,
-          }} />
+          <div
+            key={i}
+            style={{
+              height: "12px",
+              width: `${w}%`,
+              background: "var(--surface-2)",
+              borderRadius: "4px",
+              animation: "pulse 1.5s ease-in-out infinite",
+              animationDelay: `${i * 0.1}s`,
+            }}
+          />
         ))}
         <style>{`@keyframes pulse { 0%,100%{opacity:0.4} 50%{opacity:0.8} }`}</style>
       </div>
-    )
+    );
   }
 
   if (!analysis) {
     return (
-      <div style={{ padding: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-        <p style={{ color: '#52525b', fontSize: '13px' }}>Analysis will appear here</p>
+      <div
+        style={{
+          padding: "24px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+        }}
+      >
+        <p style={{ color: "var(--text-dim)", fontSize: "13px" }}>
+          Analysis will appear here
+        </p>
       </div>
-    )
+    );
   }
 
   return (
-    <div style={{ padding: '20px', overflowY: 'auto', height: '100%' }}>
+    <div style={{ padding: "20px", overflowY: "auto", height: "100%" }}>
       <div className="analysis-content">
         <ReactMarkdown>{analysis}</ReactMarkdown>
       </div>
     </div>
-  )
+  );
 }
diff --git a/frontend/components/FlowDiagram.tsx b/frontend/components/FlowDiagram.tsx
index d804c10..267432a 100644
--- a/frontend/components/FlowDiagram.tsx
+++ b/frontend/components/FlowDiagram.tsx
@@ -13,29 +13,29 @@ import "reactflow/dist/style.css";
 import { useEffect } from "react";
 
 const NODE_COLORS: Record<string, string> = {
-  scan: "#3b82f6",
-  filter: "#10b981",
-  join: "#f59e0b",
-  aggregate: "#8b5cf6",
-  subquery: "#ef4444",
-  sort: "#06b6d4",
-  output: "#6b7280",
-  groupby: "#ec4899",
+  scan: "var(--node-scan)",
+  filter: "var(--node-filter)",
+  join: "var(--node-join)",
+  aggregate: "var(--node-aggregate)",
+  subquery: "var(--node-subquery)",
+  sort: "var(--node-sort)",
+  output: "var(--node-output)",
+  groupby: "var(--node-groupby)",
 };
 
 const COST_COLORS: Record<string, string> = {
-  low: "#10b981",
-  medium: "#f59e0b",
-  high: "#ef4444",
+  low: "var(--cost-low)",
+  medium: "var(--cost-medium)",
+  high: "var(--cost-high)",
 };
 
 function SqlNode({ data }: { data: any }) {
-  const color = NODE_COLORS[data.type] || "#6b7280";
-  const costColor = COST_COLORS[data.cost] || "#6b7280";
+  const color = NODE_COLORS[data.type] || "var(--node-output)";
+  const costColor = COST_COLORS[data.cost] || "var(--node-output)";
   return (
     <div
       style={{
-        background: "#18181b",
+        background: "var(--surface-2)",
         border: `1px solid ${color}40`,
         borderLeft: `3px solid ${color}`,
         borderRadius: "6px",
@@ -81,7 +81,7 @@ function SqlNode({ data }: { data: any }) {
       <div
         style={{
           fontSize: "11px",
-          color: "#71717a",
+          color: "var(--text-dim)",
           fontFamily: "JetBrains Mono, monospace",
           whiteSpace: "nowrap",
           overflow: "hidden",
diff --git a/frontend/components/QueryEditor.tsx b/frontend/components/QueryEditor.tsx
index 28a3497..133e015 100644
--- a/frontend/components/QueryEditor.tsx
+++ b/frontend/components/QueryEditor.tsx
@@ -2,39 +2,73 @@
 import CodeMirror from "@uiw/react-codemirror";
 import { sql } from "@codemirror/lang-sql";
 import { EditorView } from "@codemirror/view";
+import {
+  syntaxHighlighting,
+  defaultHighlightStyle,
+} from "@codemirror/language";
 
 const darkTheme = EditorView.theme(
   {
-    "&": { background: "#111113 !important", color: "#e4e4e7" },
-    ".cm-content": { caretColor: "#7c6af7" },
-    ".cm-cursor": { borderLeftColor: "#7c6af7" },
-    ".cm-activeLine": { background: "#18181b" },
+    "&": { background: "var(--surface-1) !important", color: "var(--text)" },
+    ".cm-content": { caretColor: "var(--accent)" },
+    ".cm-cursor": { borderLeftColor: "var(--accent)" },
+    ".cm-activeLine": { background: "var(--surface-2)" },
     ".cm-gutters": {
-      background: "#111113",
-      borderRight: "1px solid #2a2a2f",
-      color: "#52525b",
+      background: "var(--surface-1)",
+      borderRight: "1px solid var(--border)",
+      color: "var(--text-dim)",
     },
-    ".cm-activeLineGutter": { background: "#18181b" },
-    ".cm-selectionBackground": { background: "#4a3fa0 !important" },
+    ".cm-activeLineGutter": { background: "var(--surface-2)" },
+    ".cm-selectionBackground": { background: "var(--accent-dim) !important" },
     "&.cm-focused .cm-selectionBackground": {
-      background: "#4a3fa0 !important",
+      background: "var(--accent-dim) !important",
     },
+    ".cm-keyword": { color: "#60a5fa !important" }, // Blue for SQL keywords in dark mode
+    ".cm-sql-keyword": { color: "#60a5fa !important" }, // Additional SQL keyword class
   },
   { dark: true },
 );
 
+const lightTheme = EditorView.theme(
+  {
+    "&": { background: "var(--surface-1) !important", color: "var(--text)" },
+    ".cm-content": { caretColor: "var(--accent)" },
+    ".cm-cursor": { borderLeftColor: "var(--accent)" },
+    ".cm-activeLine": { background: "var(--surface-2)" },
+    ".cm-gutters": {
+      background: "var(--surface-1)",
+      borderRight: "1px solid var(--border)",
+      color: "var(--text-dim)",
+    },
+    ".cm-activeLineGutter": { background: "var(--surface-2)" },
+    ".cm-selectionBackground": { background: "var(--accent-dim) !important" },
+    "&.cm-focused .cm-selectionBackground": {
+      background: "var(--accent-dim) !important",
+    },
+    ".cm-keyword": { color: "#2563eb !important" }, // Darker blue for SQL keywords in light mode
+    ".cm-sql-keyword": { color: "#2563eb !important" }, // Additional SQL keyword class
+  },
+  { dark: false },
+);
+
 interface Props {
   value: string;
   onChange: (val: string) => void;
   placeholder?: string;
+  theme?: "dark" | "light";
 }
 
-export default function QueryEditor({ value, onChange, placeholder }: Props) {
+export default function QueryEditor({
+  value,
+  onChange,
+  placeholder,
+  theme = "dark",
+}: Props) {
   return (
     <div
       style={{
         height: "100%",
-        background: "#111113",
+        background: "var(--surface-1)",
         borderRadius: "6px",
         overflow: "hidden",
       }}
@@ -42,7 +76,11 @@ export default function QueryEditor({ value, onChange, placeholder }: Props) {
       <CodeMirror
         value={value}
         height="100%"
-        extensions={[sql(), darkTheme]}
+        extensions={[
+          sql(),
+          syntaxHighlighting(defaultHighlightStyle),
+          theme === "dark" ? darkTheme : lightTheme,
+        ]}
         onChange={onChange}
         placeholder={placeholder}
         basicSetup={{
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 263e767..9da6ffe 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,14 +1,16 @@
 {
-  "name": "frontend",
+  "name": "sqtip-frontend",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "frontend",
+      "name": "sqtip-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@codemirror/highlight": "^0.19.8",
         "@codemirror/lang-sql": "^6.10.0",
+        "@codemirror/language": "^6.12.3",
         "@uiw/react-codemirror": "^4.25.9",
         "next": "16.2.2",
         "react": "19.2.4",
@@ -313,6 +315,71 @@
         "@lezer/common": "^1.1.0"
       }
     },
+    "node_modules/@codemirror/highlight": {
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@codemirror/highlight/-/highlight-0.19.8.tgz",
+      "integrity": "sha512-v/lzuHjrYR8MN2mEJcUD6fHSTXXli9C1XGYpr+ElV6fLBIUhMTNKR3qThp611xuWfXfwDxeL7ppcbkM/MzPV3A==",
+      "deprecated": "As of 0.20.0, this package has been split between @lezer/highlight and @codemirror/language",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.3",
+        "@codemirror/view": "^0.19.39",
+        "@lezer/common": "^0.15.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/highlight/node_modules/@codemirror/language": {
+      "version": "0.19.10",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-0.19.10.tgz",
+      "integrity": "sha512-yA0DZ3RYn2CqAAGW62VrU8c4YxscMQn45y/I9sjBlqB1e2OTQLg4CCkMBuMSLXk4xaqjlsgazeOQWaJQOKfV8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/text": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "@lezer/common": "^0.15.5",
+        "@lezer/lr": "^0.15.0"
+      }
+    },
+    "node_modules/@codemirror/highlight/node_modules/@codemirror/state": {
+      "version": "0.19.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.19.9.tgz",
+      "integrity": "sha512-psOzDolKTZkx4CgUqhBQ8T8gBc0xN5z4gzed109aF6x7D7umpDRoimacI/O6d9UGuyl4eYuDCZmDFr2Rq7aGOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/text": "^0.19.0"
+      }
+    },
+    "node_modules/@codemirror/highlight/node_modules/@codemirror/view": {
+      "version": "0.19.48",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.19.48.tgz",
+      "integrity": "sha512-0eg7D2Nz4S8/caetCTz61rK0tkHI17V/d15Jy0kLOT8dTLGGNJUponDnW28h2B6bERmPlVHKh8MJIr5OCp1nGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/rangeset": "^0.19.5",
+        "@codemirror/state": "^0.19.3",
+        "@codemirror/text": "^0.19.0",
+        "style-mod": "^4.0.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
+    "node_modules/@codemirror/highlight/node_modules/@lezer/common": {
+      "version": "0.15.12",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.12.tgz",
+      "integrity": "sha512-edfwCxNLnzq5pBA/yaIhwJ3U3Kz8VAUOTRg0hhxaizaI1N+qxV7EXDv/kLCkLeq2RzSFvxexlaj5Mzfn2kY0Ig==",
+      "license": "MIT"
+    },
+    "node_modules/@codemirror/highlight/node_modules/@lezer/lr": {
+      "version": "0.15.8",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-0.15.8.tgz",
+      "integrity": "sha512-bM6oE6VQZ6hIFxDNKk8bKPa14hqFrV07J/vHGOeiAbJReIaQXmkVb6xQu4MR+JBTLa5arGRyAAjJe1qaQt3Uvg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^0.15.0"
+      }
+    },
     "node_modules/@codemirror/lang-sql": {
       "version": "6.10.0",
       "resolved": "https://registry.npmjs.org/@codemirror/lang-sql/-/lang-sql-6.10.0.tgz",
@@ -352,6 +419,25 @@
         "crelt": "^1.0.5"
       }
     },
+    "node_modules/@codemirror/rangeset": {
+      "version": "0.19.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/rangeset/-/rangeset-0.19.9.tgz",
+      "integrity": "sha512-V8YUuOvK+ew87Xem+71nKcqu1SXd5QROMRLMS/ljT5/3MCxtgrRie1Cvild0G/Z2f1fpWxzX78V0U4jjXBorBQ==",
+      "deprecated": "As of 0.20.0, this package has been merged into @codemirror/state",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^0.19.0"
+      }
+    },
+    "node_modules/@codemirror/rangeset/node_modules/@codemirror/state": {
+      "version": "0.19.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.19.9.tgz",
+      "integrity": "sha512-psOzDolKTZkx4CgUqhBQ8T8gBc0xN5z4gzed109aF6x7D7umpDRoimacI/O6d9UGuyl4eYuDCZmDFr2Rq7aGOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/text": "^0.19.0"
+      }
+    },
     "node_modules/@codemirror/search": {
       "version": "6.6.0",
       "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.6.0.tgz",
@@ -372,6 +458,13 @@
         "@marijn/find-cluster-break": "^1.0.0"
       }
     },
+    "node_modules/@codemirror/text": {
+      "version": "0.19.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.19.6.tgz",
+      "integrity": "sha512-T9jnREMIygx+TPC1bOuepz18maGq/92q2a+n4qTqObKwvNMg+8cMTslb8yxeEDEq7S3kpgGWxgO1UWbQRij0dA==",
+      "deprecated": "As of 0.20.0, this package has been merged into @codemirror/state",
+      "license": "MIT"
+    },
     "node_modules/@codemirror/theme-one-dark": {
       "version": "6.1.3",
       "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 592cb7a..7588348 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,7 +9,9 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@codemirror/highlight": "^0.19.8",
     "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/language": "^6.12.3",
     "@uiw/react-codemirror": "^4.25.9",
     "next": "16.2.2",
     "react": "19.2.4",