feat: rich tooltips in SQL Explorer charts show all row values

Hover over any bar, line point, or scatter dot to see every column
value for that data point. The Y-axis column is highlighted in
brand color, X-axis in white, and other columns in gray. Works
for all chart types (bar, line, scatter, auto).

frontend/src/pages/SqlExplorer.tsx

@@ -149,14 +149,40 @@ export function SqlExplorerPage() {
     ? result.rows.map((row) => {
         const yRaw = row[effectiveYCol];
         const yNum = yRaw != null ? parseFloat(String(yRaw)) : NaN;
-        return {
+        const entry: Record<string, unknown> = {
           x: row[effectiveXCol],
           y: isNaN(yNum) ? 0 : yNum,
           label: String(row[effectiveXCol] ?? ''),
         };
+        // Attach all column values for rich tooltips
+        for (let i = 0; i < result.columns.length; i++) {
+          entry[`_col${i}`] = row[i];
+        }
+        return entry;
       })
     : [];
 
+  // Custom tooltip that shows all row values on hover
+  const renderTooltip = (props: { active?: boolean; payload?: Array<{ payload: Record<string, unknown> }> }) => {
+    if (!props.active || !props.payload?.length || !result) return null;
+    const data = props.payload[0].payload;
+    return (
+      <div className="rounded-lg border border-surface-700 bg-surface-900 px-3 py-2 text-xs shadow-lg">
+        {result.columns.map((col, i) => {
+          const val = data[`_col${i}`];
+          const isY = i === effectiveYCol;
+          const isX = i === effectiveXCol;
+          return (
+            <div key={i} className={`flex justify-between gap-4 ${isY ? 'font-semibold text-brand-300' : isX ? 'text-gray-200' : 'text-gray-400'}`}>
+              <span>{col.name}:</span>
+              <span>{val == null ? 'NULL' : String(val)}</span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
   // Split saved queries into pre-built (no id-based delete) and user-saved
   const preBuiltNames = new Set([
     'Company Overview', 'Recent Recommendations', 'High Confidence Buys',
@@ -342,7 +368,7 @@ export function SqlExplorerPage() {
                     <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
                     <XAxis dataKey="label" tick={{ fill: '#6b7280', fontSize: 10 }} />
                     <YAxis tick={{ fill: '#6b7280', fontSize: 10 }} />
-                    <Tooltip contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: 8 }} />
+                    <Tooltip content={renderTooltip} />
                     <Bar dataKey="y" fill="#3b82f6" />
                   </BarChart>
                 ) : effectiveChartType === 'line' ? (
@@ -350,7 +376,7 @@ export function SqlExplorerPage() {
                     <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
                     <XAxis dataKey="label" tick={{ fill: '#6b7280', fontSize: 10 }} />
                     <YAxis tick={{ fill: '#6b7280', fontSize: 10 }} />
-                    <Tooltip contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: 8 }} />
+                    <Tooltip content={renderTooltip} />
                     <Line type="monotone" dataKey="y" stroke="#3b82f6" dot={false} />
                   </LineChart>
                 ) : (
@@ -358,7 +384,7 @@ export function SqlExplorerPage() {
                     <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
                     <XAxis dataKey="x" tick={{ fill: '#6b7280', fontSize: 10 }} name={result.columns[effectiveXCol]?.name} />
                     <YAxis dataKey="y" tick={{ fill: '#6b7280', fontSize: 10 }} name={result.columns[effectiveYCol]?.name} />
-                    <Tooltip contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: 8 }} />
+                    <Tooltip content={renderTooltip} />
                     <Scatter data={chartData} fill="#3b82f6" />
                   </ScatterChart>
                 )}