feat: M1 admin console — all 10 remaining pages + signal/quality/ops infrastructure
Admin console (issues #63–72): - Event stream viewer: live-tail ring buffer (500 events) with subject/user filters - Feature store browser: per-user feature vector history from ml/serving - Model registry panel: MLflow embed at /admin/models - Experiment dashboard: LinUCB per-user stats (pulls, reward, θ) + bandit reset - Recommendation log: per-tip explainability (policy, score, features, latency) - Reward analytics: daily reaction breakdown + per-policy compare - Data quality widget: missing-feature rate, stale-token rate, daily completeness - Ops actions: replay-signal, policy enable/disable; user actions link to Users page - SQL runner: read-only SELECT runner with saved queries - Health rollup: fan-out to api/ml/sqlite/event-bus with auto-refresh Backend: - tip_scores table: logs features+policy+score+latency at every scoring call (#67) - saved_queries table: per-admin saved SQL (#71) - Event bus: 500-event ring buffer + tail() API (#63) - Admin routes: /events, /tips, /reward-analytics, /data-quality, /health, /policies, /replay-signal, /sql, /saved-queries endpoints - /api/ml/* admin-gated proxy to ml/serving (#64, #66) - Shadow-policy registry in recommender (#56) ML serving: - /reset/{user_id}: clear bandit state + feature history (#66) - /stats/{user_id}: pulls, cumulative reward, estimated mean, θ (#66) - /features/{user_id}: last 100 feature vectors logged at scoring time (#64) - Meta (pulls, rewards) persisted alongside A/b matrices Web: - Tip action sheet adds Helpful / Not helpful buttons (#62) - TipFeedback type extended with helpful/not_helpful actions - Rewards mapped: helpful=+0.5, not_helpful=−0.5 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
152
apps/admin/src/app/sql/page.tsx
Normal file
152
apps/admin/src/app/sql/page.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { AdminShell } from '@/components/AdminShell';
|
||||
import { runSql, getSavedQueries, saveQuery, deleteSavedQuery, SavedQuery } from '@/lib/api';
|
||||
|
||||
const EXAMPLE_QUERIES = [
|
||||
'SELECT * FROM users ORDER BY created_at DESC LIMIT 20',
|
||||
'SELECT action, count(*) as cnt FROM tip_feedback GROUP BY action',
|
||||
'SELECT policy, count(*) as cnt FROM tip_scores GROUP BY policy',
|
||||
'SELECT date(served_at) as day, count(*) as tips FROM tip_views GROUP BY day ORDER BY day DESC LIMIT 14',
|
||||
];
|
||||
|
||||
export default function SqlPage() {
|
||||
const [query, setQuery] = useState(EXAMPLE_QUERIES[0]);
|
||||
const [rows, setRows] = useState<unknown[]>([]);
|
||||
const [cols, setCols] = useState<string[]>([]);
|
||||
const [rowCount, setRowCount] = useState<number | null>(null);
|
||||
const [running, setRunning] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [savedQueries, setSavedQueries] = useState<SavedQuery[]>([]);
|
||||
const [saveName, setSaveName] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
getSavedQueries().then((r) => setSavedQueries(r.queries)).catch(() => {});
|
||||
}, []);
|
||||
|
||||
const run = async () => {
|
||||
if (!query.trim()) return;
|
||||
setRunning(true);
|
||||
setError('');
|
||||
try {
|
||||
const res = await runSql(query);
|
||||
const r = res.rows as Record<string, unknown>[];
|
||||
setRows(r);
|
||||
setRowCount(res.rowCount);
|
||||
setCols(r.length > 0 ? Object.keys(r[0] as object) : []);
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
setRows([]);
|
||||
setRowCount(null);
|
||||
} finally {
|
||||
setRunning(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!saveName.trim()) return;
|
||||
await saveQuery(saveName, query);
|
||||
const res = await getSavedQueries();
|
||||
setSavedQueries(res.queries);
|
||||
setSaveName('');
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
await deleteSavedQuery(id);
|
||||
setSavedQueries((prev) => prev.filter((q) => q.id !== id));
|
||||
};
|
||||
|
||||
return (
|
||||
<AdminShell>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-xl font-semibold">SQL runner</h1>
|
||||
<span className="text-xs text-gray-500">Read-only · SELECT only · sunsets in M4</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
{/* Editor */}
|
||||
<div className="flex-1 space-y-2">
|
||||
<textarea
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
onKeyDown={(e) => { if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') run(); }}
|
||||
rows={6}
|
||||
spellCheck={false}
|
||||
className="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm font-mono text-gray-200 focus:outline-none focus:border-indigo-500"
|
||||
placeholder="SELECT ..."
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={run}
|
||||
disabled={running}
|
||||
className="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white rounded px-4 py-1.5 text-sm"
|
||||
>
|
||||
{running ? 'Running…' : 'Run (⌘↵)'}
|
||||
</button>
|
||||
<input
|
||||
value={saveName}
|
||||
onChange={(e) => setSaveName(e.target.value)}
|
||||
placeholder="Save as…"
|
||||
className="bg-gray-900 border border-gray-700 rounded px-3 py-1.5 text-sm text-gray-300 w-40"
|
||||
/>
|
||||
<button onClick={handleSave} className="text-sm text-gray-400 hover:text-white border border-gray-700 rounded px-3 py-1.5">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Saved / examples */}
|
||||
<div className="w-56 space-y-2 flex-shrink-0">
|
||||
<p className="text-xs text-gray-500 font-medium uppercase tracking-wide">Saved queries</p>
|
||||
{savedQueries.length === 0 && (
|
||||
<p className="text-xs text-gray-600">None saved yet</p>
|
||||
)}
|
||||
{savedQueries.map((q) => (
|
||||
<div key={q.id} className="flex items-start justify-between gap-1">
|
||||
<button onClick={() => setQuery(q.sql)} className="text-xs text-indigo-400 hover:text-indigo-300 text-left">{q.name}</button>
|
||||
<button onClick={() => handleDelete(q.id)} className="text-xs text-gray-600 hover:text-red-400">✕</button>
|
||||
</div>
|
||||
))}
|
||||
<p className="text-xs text-gray-500 font-medium uppercase tracking-wide pt-2">Examples</p>
|
||||
{EXAMPLE_QUERIES.map((q, i) => (
|
||||
<button key={i} onClick={() => setQuery(q)} className="block text-xs text-gray-500 hover:text-gray-300 text-left truncate w-full">
|
||||
{q.slice(0, 40)}…
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red-400 text-sm">{error}</p>}
|
||||
|
||||
{rowCount !== null && (
|
||||
<p className="text-xs text-gray-500">{rowCount} rows returned</p>
|
||||
)}
|
||||
|
||||
{cols.length > 0 && (
|
||||
<div className="overflow-auto max-h-[50vh] border border-gray-800 rounded">
|
||||
<table className="w-full text-xs font-mono">
|
||||
<thead className="sticky top-0 bg-gray-950">
|
||||
<tr className="border-b border-gray-800">
|
||||
{cols.map((c) => (
|
||||
<th key={c} className="text-left py-2 px-3 text-gray-500 font-medium">{c}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(rows as Record<string, unknown>[]).map((row, i) => (
|
||||
<tr key={i} className="border-b border-gray-800/40 hover:bg-gray-900/40">
|
||||
{cols.map((c) => (
|
||||
<td key={c} className="py-1.5 px-3 text-gray-300">{String(row[c] ?? '')}</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</AdminShell>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user