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:
93
apps/admin/src/app/events/page.tsx
Normal file
93
apps/admin/src/app/events/page.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { AdminShell } from '@/components/AdminShell';
|
||||
import { getEvents, StoredEvent } from '@/lib/api';
|
||||
|
||||
const SUBJECTS = ['', 'signals.tip', 'signals.task', 'signals.tip.served', 'signals.tip.feedback', 'signals.task.synced'];
|
||||
|
||||
export default function EventsPage() {
|
||||
const [events, setEvents] = useState<StoredEvent[]>([]);
|
||||
const [subject, setSubject] = useState('');
|
||||
const [userId, setUserId] = useState('');
|
||||
const [live, setLive] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const sinceRef = useRef(0);
|
||||
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
const fetchEvents = async (reset = false) => {
|
||||
try {
|
||||
const since = reset ? 0 : sinceRef.current;
|
||||
const res = await getEvents({ subject: subject || undefined, userId: userId || undefined, limit: 100, since });
|
||||
sinceRef.current = res.nextSince;
|
||||
setEvents((prev) => {
|
||||
const next = reset ? res.events : [...prev, ...res.events];
|
||||
return next.slice(-500); // keep last 500
|
||||
});
|
||||
setError('');
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
sinceRef.current = 0;
|
||||
fetchEvents(true);
|
||||
}, [subject, userId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (live) {
|
||||
timerRef.current = setInterval(() => fetchEvents(false), 2000);
|
||||
} else if (timerRef.current) {
|
||||
clearInterval(timerRef.current);
|
||||
}
|
||||
return () => { if (timerRef.current) clearInterval(timerRef.current); };
|
||||
}, [live, subject, userId]);
|
||||
|
||||
return (
|
||||
<AdminShell>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-xl font-semibold">Event stream</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="flex items-center gap-1.5 text-sm text-gray-400 cursor-pointer">
|
||||
<input type="checkbox" checked={live} onChange={(e) => setLive(e.target.checked)} className="accent-indigo-500" />
|
||||
Live
|
||||
</label>
|
||||
<button onClick={() => { sinceRef.current = 0; fetchEvents(true); }} className="text-xs text-gray-400 hover:text-white border border-gray-700 rounded px-2 py-1">
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<select value={subject} onChange={(e) => setSubject(e.target.value)} className="bg-gray-900 border border-gray-700 rounded px-2 py-1 text-sm text-gray-300">
|
||||
{SUBJECTS.map((s) => <option key={s} value={s}>{s || 'All subjects'}</option>)}
|
||||
</select>
|
||||
<input
|
||||
value={userId}
|
||||
onChange={(e) => setUserId(e.target.value)}
|
||||
placeholder="Filter by user ID"
|
||||
className="bg-gray-900 border border-gray-700 rounded px-2 py-1 text-sm text-gray-300 w-64"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red-400 text-sm">{error}</p>}
|
||||
|
||||
<div className="font-mono text-xs space-y-1 max-h-[70vh] overflow-y-auto">
|
||||
{events.length === 0 && (
|
||||
<p className="text-gray-500 text-sm">No events yet. Waiting…</p>
|
||||
)}
|
||||
{[...events].reverse().map((e) => (
|
||||
<div key={e.id} className="flex gap-3 border-b border-gray-800 pb-1">
|
||||
<span className="text-gray-600 w-12 flex-shrink-0">{e.id}</span>
|
||||
<span className="text-gray-500 w-24 flex-shrink-0">{e.ts.slice(11, 19)}</span>
|
||||
<span className="text-indigo-400 w-40 flex-shrink-0">{e.subject}</span>
|
||||
<span className="text-gray-300 break-all">{JSON.stringify(e.payload)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</AdminShell>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user