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:
144
apps/admin/src/app/reward-analytics/page.tsx
Normal file
144
apps/admin/src/app/reward-analytics/page.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { AdminShell } from '@/components/AdminShell';
|
||||
import { getRewardAnalytics } from '@/lib/api';
|
||||
|
||||
const ACTION_COLORS: Record<string, string> = {
|
||||
done: 'bg-green-500',
|
||||
helpful: 'bg-teal-500',
|
||||
snooze: 'bg-yellow-500',
|
||||
not_helpful: 'bg-orange-500',
|
||||
dismiss: 'bg-red-500',
|
||||
};
|
||||
|
||||
export default function RewardAnalyticsPage() {
|
||||
const [days, setDays] = useState(30);
|
||||
const [data, setData] = useState<Awaited<ReturnType<typeof getRewardAnalytics>> | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
getRewardAnalytics(days)
|
||||
.then(setData)
|
||||
.catch((e) => setError(e.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, [days]);
|
||||
|
||||
// Aggregate totals per action across all days
|
||||
const totals: Record<string, number> = {};
|
||||
for (const row of data?.daily ?? []) {
|
||||
totals[row.action] = (totals[row.action] ?? 0) + Number(row.count);
|
||||
}
|
||||
const grandTotal = Object.values(totals).reduce((a, b) => a + b, 0);
|
||||
|
||||
// Aggregate per policy
|
||||
const policyMap: Record<string, Record<string, number>> = {};
|
||||
for (const row of data?.byPolicy ?? []) {
|
||||
if (!row.policy) continue;
|
||||
policyMap[row.policy] ??= {};
|
||||
if (row.action) policyMap[row.policy][row.action] = (policyMap[row.policy][row.action] ?? 0) + Number(row.count);
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminShell>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<h1 className="text-xl font-semibold">Reward analytics</h1>
|
||||
<select value={days} onChange={(e) => setDays(Number(e.target.value))} className="bg-gray-900 border border-gray-700 rounded px-2 py-1 text-sm text-gray-300">
|
||||
<option value={7}>Last 7 days</option>
|
||||
<option value={30}>Last 30 days</option>
|
||||
<option value={90}>Last 90 days</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red-400 text-sm">{error}</p>}
|
||||
{loading && <p className="text-gray-500 text-sm">Loading…</p>}
|
||||
|
||||
{/* Reaction breakdown bar */}
|
||||
{grandTotal > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-sm font-medium text-gray-400">Reaction distribution ({grandTotal} total)</h2>
|
||||
<div className="flex rounded overflow-hidden h-6">
|
||||
{Object.entries(totals).map(([action, count]) => (
|
||||
<div
|
||||
key={action}
|
||||
title={`${action}: ${count} (${((count / grandTotal) * 100).toFixed(1)}%)`}
|
||||
className={`${ACTION_COLORS[action] ?? 'bg-gray-500'} transition-all`}
|
||||
style={{ width: `${(count / grandTotal) * 100}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3 text-xs text-gray-400">
|
||||
{Object.entries(totals).map(([action, count]) => (
|
||||
<span key={action} className="flex items-center gap-1">
|
||||
<span className={`inline-block w-2 h-2 rounded-full ${ACTION_COLORS[action] ?? 'bg-gray-500'}`} />
|
||||
{action}: {count} ({((count / grandTotal) * 100).toFixed(1)}%)
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Per-policy table */}
|
||||
{Object.keys(policyMap).length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-sm font-medium text-gray-400">Per-policy reactions</h2>
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-800 text-gray-500 text-left">
|
||||
<th className="py-2 pr-4">Policy</th>
|
||||
{['done', 'helpful', 'snooze', 'not_helpful', 'dismiss'].map((a) => (
|
||||
<th key={a} className="py-2 pr-4">{a}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Object.entries(policyMap).map(([policy, actions]) => (
|
||||
<tr key={policy} className="border-b border-gray-800/50">
|
||||
<td className="py-2 pr-4 font-medium text-indigo-300">{policy}</td>
|
||||
{['done', 'helpful', 'snooze', 'not_helpful', 'dismiss'].map((a) => (
|
||||
<td key={a} className="py-2 pr-4 text-gray-300">{actions[a] ?? 0}</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Daily table */}
|
||||
{(data?.daily?.length ?? 0) > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-sm font-medium text-gray-400">Daily breakdown</h2>
|
||||
<div className="overflow-x-auto max-h-80">
|
||||
<table className="w-full text-xs font-mono">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-800 text-gray-500 text-left">
|
||||
<th className="py-1.5 pr-4">Date</th>
|
||||
<th className="py-1.5 pr-4">Action</th>
|
||||
<th className="py-1.5">Count</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data!.daily.map((row, i) => (
|
||||
<tr key={i} className="border-b border-gray-800/40">
|
||||
<td className="py-1 pr-4 text-gray-500">{row.date}</td>
|
||||
<td className="py-1 pr-4 text-gray-300">{row.action}</td>
|
||||
<td className="py-1 text-gray-300">{row.count}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && grandTotal === 0 && (
|
||||
<p className="text-gray-500 text-sm">No reaction data in this period.</p>
|
||||
)}
|
||||
</div>
|
||||
</AdminShell>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user