3af105bccd
Replaces the client-side PIN login with real authentication against Azure Entra ID via PocketBase's built-in OAuth2 (OIDC) flow. Every Azure user is auto-provisioned as a team_member on first login. - pb_migrations: team_members becomes a PocketBase auth collection (OIDC provider configured from env); all collections require @request.auth.id - pb_hooks: provisioning of role (ENTRA_ADMIN_EMAILS allow-list) and enrollment_status, with admin-role re-sync on every login - frontend: "Sign in with Microsoft" login, pb.authStore-based session, TeamManager manages roster/roles (no PIN/manual create) - infra: Entra env wiring + pb_hooks mount for dev (Labs) and prod - src/lib/azureAuth.js + tests for the canonical role/allow-list logic - docs/auth-spec.md Knowledge base, generated tests and micro-learnings are left untouched. Existing PIN users are dropped (no migration required, per sign-off). Closes #16 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
367 lines
18 KiB
JavaScript
367 lines
18 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import { Database, FileText, Settings, Users, Network, Clock, CheckCircle2, AlertCircle, Save, Info, Layers, CheckSquare, CalendarDays, RefreshCw, AlertTriangle } from 'lucide-react';
|
|
import Card from '../../components/ui/Card';
|
|
import Tag from '../../components/ui/Tag';
|
|
import Button from '../../components/ui/Button';
|
|
import Input from '../../components/ui/Input';
|
|
import { storage } from '../../lib/storage';
|
|
import * as db from '../../lib/db';
|
|
import UploadZone from '../../components/admin/UploadZone';
|
|
import KnowledgeGraph from '../../components/admin/KnowledgeGraph';
|
|
import ContentManager from '../../components/admin/ContentManager';
|
|
import TestManager from '../../components/admin/TestManager';
|
|
import TeamManager from '../../components/admin/TeamManager';
|
|
import CurriculumManager from '../../components/admin/CurriculumManager';
|
|
import { Trash2 } from 'lucide-react';
|
|
|
|
const TIER_PLACEHOLDERS = {
|
|
fast: 'claude-haiku-4-5-20251001',
|
|
standard: 'claude-sonnet-4-6',
|
|
reasoning: 'claude-opus-4-7',
|
|
};
|
|
|
|
const Admin = () => {
|
|
const [activeTab, setActiveTab] = useState('sources');
|
|
const [sources, setSources] = useState([]);
|
|
const [modelFast, setModelFast] = useState('');
|
|
const [modelStandard, setModelStandard] = useState('');
|
|
const [modelReasoning, setModelReasoning] = useState('');
|
|
const [useSimulation, setUseSimulation] = useState(false);
|
|
const [saveStatus, setSaveStatus] = useState(null);
|
|
|
|
const [resetConfirmText, setResetConfirmText] = useState('');
|
|
const [resetIncludeProgress, setResetIncludeProgress] = useState(false);
|
|
const [isResetting, setIsResetting] = useState(false);
|
|
const [resetReport, setResetReport] = useState(null);
|
|
|
|
const loadSources = async () => {
|
|
const data = await db.getSources();
|
|
setSources(data);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (activeTab === 'sources') {
|
|
loadSources();
|
|
}
|
|
if (activeTab === 'settings') {
|
|
const legacyStandard = storage.get('admin:model', '');
|
|
setModelFast(storage.get('admin:model:fast', '') || '');
|
|
setModelStandard(storage.get('admin:model:standard', '') || legacyStandard || '');
|
|
setModelReasoning(storage.get('admin:model:reasoning', '') || '');
|
|
setUseSimulation(storage.get('admin:use_simulation', false));
|
|
}
|
|
}, [activeTab]);
|
|
|
|
const saveSettings = async (e) => {
|
|
e.preventDefault();
|
|
storage.set('admin:model:fast', modelFast.trim());
|
|
storage.set('admin:model:standard', modelStandard.trim());
|
|
storage.set('admin:model:reasoning', modelReasoning.trim());
|
|
storage.set('admin:use_simulation', useSimulation);
|
|
setSaveStatus('Saved!');
|
|
setTimeout(() => setSaveStatus(null), 3000);
|
|
};
|
|
|
|
const runSmokeReset = async () => {
|
|
setIsResetting(true);
|
|
setResetReport(null);
|
|
try {
|
|
const report = await db.resetForSmokeTest({
|
|
includeProgress: resetIncludeProgress,
|
|
});
|
|
setResetReport(report);
|
|
setResetConfirmText('');
|
|
} catch (err) {
|
|
setResetReport([{ collection: '(unexpected)', deleted: 0, error: err?.message || String(err) }]);
|
|
} finally {
|
|
setIsResetting(false);
|
|
}
|
|
};
|
|
|
|
const handleDeleteSource = async (id) => {
|
|
if (confirm('Are you sure you want to delete this source? This will not delete topics already extracted.')) {
|
|
await db.deleteSource(id);
|
|
await loadSources();
|
|
}
|
|
};
|
|
|
|
const navItems = [
|
|
{ key: 'sources', icon: Database, label: 'Sources' },
|
|
{ key: 'content', icon: Layers, label: 'Theme Content' },
|
|
{ key: 'tests', icon: CheckSquare, label: 'Topic Quizzes' },
|
|
{ key: 'curriculum', icon: CalendarDays, label: 'Curriculum' },
|
|
{ key: 'graph', icon: Network, label: 'Graph' },
|
|
{ key: 'team', icon: Users, label: 'Team' },
|
|
{ key: 'settings', icon: Settings, label: 'Settings', bottom: true },
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-col md:flex-row h-[calc(100vh-64px)] overflow-hidden">
|
|
<div className="w-full md:w-64 bg-paper border-r border-bg-warm flex-shrink-0 flex flex-row md:flex-col p-4 gap-2 overflow-x-auto md:overflow-y-auto">
|
|
<h2 className="hidden md:block text-teal font-bold text-lg mb-4 px-2">Knowledge Mgmt</h2>
|
|
|
|
{navItems.map(({ key, icon: Icon, label, bottom }) => (
|
|
<button
|
|
key={key}
|
|
onClick={() => setActiveTab(key)}
|
|
className={`flex flex-col md:flex-row items-center gap-3 p-3 rounded-[var(--r-sm)] transition-colors min-w-[80px] md:min-w-0 ${bottom ? 'mt-0 md:mt-auto' : ''} ${activeTab === key ? 'bg-bg-warm text-teal font-medium' : 'text-fg-muted hover:bg-bg-warm/50 hover:text-fg'}`}
|
|
>
|
|
<Icon size={20} />
|
|
<span className="text-sm mt-1 md:mt-0">{label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto p-4 md:p-8 bg-bg pb-24 md:pb-8">
|
|
|
|
{activeTab === 'sources' && (
|
|
<div className="animate-in fade-in duration-300 max-w-4xl mx-auto">
|
|
<h1 className="text-3xl text-teal mb-2">Source Material</h1>
|
|
<p className="text-fg-muted mb-8">Upload files to feed the AI knowledge extraction pipeline.</p>
|
|
|
|
<UploadZone onUploadComplete={loadSources} />
|
|
|
|
<h3 className="text-xl mb-4 mt-12">Recent Sources</h3>
|
|
<Card className="p-0 border border-bg-warm overflow-hidden">
|
|
<div className="divide-y divide-bg-warm">
|
|
{sources.length === 0 ? (
|
|
<div className="p-8 text-center text-fg-muted">No sources uploaded yet.</div>
|
|
) : (
|
|
sources.map((source) => (
|
|
<div key={source.id} className="p-4 flex items-center justify-between hover:bg-bg-warm/30 transition-colors">
|
|
<div className="flex items-center gap-4">
|
|
<div className={`p-2 rounded-full ${
|
|
source.status === 'completed' ? 'bg-teal-50 text-teal-600' :
|
|
source.status === 'processing' ? 'bg-purple-50 text-purple-600 animate-pulse' :
|
|
'bg-red-50 text-red-600'
|
|
}`}>
|
|
<FileText size={20} />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium">{source.name}</p>
|
|
<p className="text-xs text-fg-muted flex items-center gap-1 mt-1">
|
|
<Clock size={12} /> {source.created ? new Date(source.created).toLocaleString() : '—'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
{source.status === 'completed' && <Tag variant="success" className="flex items-center gap-1"><CheckCircle2 size={12}/> Completed</Tag>}
|
|
{source.status === 'processing' && <Tag variant="accent" className="flex items-center gap-1"><Clock size={12}/> Processing</Tag>}
|
|
{source.status === 'failed' && <Tag variant="dark" className="bg-red-100 text-red-800 flex items-center gap-1"><AlertCircle size={12}/> Failed</Tag>}
|
|
<button onClick={() => handleDeleteSource(source.id)} className="p-1.5 text-fg-muted hover:text-red-500 hover:bg-red-50 rounded-[var(--r-sm)] transition-colors" title="Delete Source">
|
|
<Trash2 size={16} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'content' && (
|
|
<div className="animate-in fade-in duration-300 max-w-4xl mx-auto">
|
|
<h1 className="text-3xl text-teal mb-2">Theme Content</h1>
|
|
<p className="text-fg-muted mb-8">Weekly theme sessions generated by the AI for the active curriculum. Each session covers all topics in that week's theme.</p>
|
|
<ContentManager />
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'tests' && (
|
|
<div className="animate-in fade-in duration-300 max-w-4xl mx-auto">
|
|
<h1 className="text-3xl text-teal mb-2">Topic Question Banks</h1>
|
|
<p className="text-fg-muted mb-8">Pre-generate and review per-topic quiz questions, grouped by theme. These power both the weekly theme test and the on-demand Topic Test.</p>
|
|
<TestManager />
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'curriculum' && (
|
|
<div className="animate-in fade-in duration-300 max-w-5xl mx-auto">
|
|
<h1 className="text-3xl text-teal mb-2">Curriculum</h1>
|
|
<p className="text-fg-muted mb-8">AI-generated 26-week learning cycle. Review and activate curriculum versions.</p>
|
|
<CurriculumManager />
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'graph' && (
|
|
<div className="animate-in fade-in duration-300 h-full flex flex-col">
|
|
<h1 className="text-3xl text-teal mb-2">Knowledge Graph</h1>
|
|
<p className="text-fg-muted mb-4">Visual map of all extracted Respellion knowledge.</p>
|
|
<Card className="flex-1 p-0 border border-bg-warm overflow-hidden bg-paper min-h-[400px]">
|
|
<KnowledgeGraph />
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'team' && (
|
|
<div className="animate-in fade-in duration-300 max-w-4xl mx-auto">
|
|
<h1 className="text-3xl text-teal mb-2">Team Management</h1>
|
|
<p className="text-fg-muted mb-8">Review team members and manage their roles. Accounts are created automatically via Microsoft (Azure) sign-in.</p>
|
|
<TeamManager />
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'settings' && (
|
|
<div className="animate-in fade-in duration-300 max-w-2xl">
|
|
<h1 className="text-3xl text-teal mb-2">Settings</h1>
|
|
<p className="text-fg-muted mb-8">Manage API keys and application configuration.</p>
|
|
|
|
<Card className="border border-bg-warm">
|
|
<form onSubmit={saveSettings} className="space-y-6">
|
|
<div>
|
|
<h3 className="text-lg font-medium mb-4">AI Configuration</h3>
|
|
<p className="text-sm text-fg-muted mb-4">
|
|
Models are split into three tiers. Leave a field blank to use its default. Check your Anthropic Console for available model IDs.
|
|
</p>
|
|
<div className="mt-4 space-y-4">
|
|
<div>
|
|
<Input
|
|
label="Fast tier (short, cheap calls)"
|
|
placeholder={TIER_PLACEHOLDERS.fast}
|
|
value={modelFast}
|
|
onChange={(e) => setModelFast(e.target.value)}
|
|
/>
|
|
<p className="text-xs text-fg-muted mt-1">Default: {TIER_PLACEHOLDERS.fast}</p>
|
|
</div>
|
|
<div>
|
|
<Input
|
|
label="Standard tier (most workloads)"
|
|
placeholder={TIER_PLACEHOLDERS.standard}
|
|
value={modelStandard}
|
|
onChange={(e) => setModelStandard(e.target.value)}
|
|
/>
|
|
<p className="text-xs text-fg-muted mt-1">Default: {TIER_PLACEHOLDERS.standard}</p>
|
|
</div>
|
|
<div>
|
|
<Input
|
|
label="Reasoning tier (complex graph + content tasks)"
|
|
placeholder={TIER_PLACEHOLDERS.reasoning}
|
|
value={modelReasoning}
|
|
onChange={(e) => setModelReasoning(e.target.value)}
|
|
/>
|
|
<p className="text-xs text-fg-muted mt-1">Default: {TIER_PLACEHOLDERS.reasoning}</p>
|
|
</div>
|
|
</div>
|
|
<p className="text-sm text-fg-muted mt-4">
|
|
Note: Your Anthropic API key is securely managed on the server side via environment variables.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="pt-4 border-t border-bg-warm">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div>
|
|
<h3 className="text-lg font-medium">Simulation Mode</h3>
|
|
<p className="text-sm text-fg-muted">Use simulated AI responses when the API is unavailable.</p>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
className="sr-only peer"
|
|
checked={useSimulation}
|
|
onChange={(e) => setUseSimulation(e.target.checked)}
|
|
/>
|
|
<div className="w-11 h-6 bg-bg-warm peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-teal"></div>
|
|
</label>
|
|
</div>
|
|
{useSimulation && (
|
|
<div className="p-3 bg-teal/5 border border-teal/20 rounded-[var(--r-sm)] flex gap-3 text-sm text-teal-800">
|
|
<Info size={18} className="flex-shrink-0" />
|
|
<p>When enabled, the platform will simulate AI processing without making real API calls. Ideal for UI testing.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 pt-4">
|
|
<Button type="submit">
|
|
<Save size={18} className="mr-2" /> Save Settings
|
|
</Button>
|
|
{saveStatus && <span className="text-teal font-medium">{saveStatus}</span>}
|
|
</div>
|
|
</form>
|
|
</Card>
|
|
|
|
<Card className="border border-red-300 bg-red-50/40 mt-8">
|
|
<div className="space-y-4">
|
|
<div className="flex items-start gap-3">
|
|
<AlertTriangle size={22} className="text-red-600 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<h3 className="text-lg font-medium text-red-700">Danger Zone — Reset for Smoke Test</h3>
|
|
<p className="text-sm text-fg-muted mt-1">
|
|
Deletes all AI-generated content so the platform can be exercised from a clean slate. Team members, settings, and LLM telemetry are preserved.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-sm text-fg-muted bg-paper border border-bg-warm rounded-[var(--r-sm)] p-3">
|
|
<p className="font-medium text-fg mb-2">Will be cleared:</p>
|
|
<ul className="list-disc list-inside space-y-0.5">
|
|
<li>Sources</li>
|
|
<li>Curriculum</li>
|
|
<li>Content (per-topic learning modules)</li>
|
|
<li>Quiz banks, quiz results, quiz cache</li>
|
|
<li>Topics & relations</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="flex items-center gap-2 text-sm cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={resetIncludeProgress}
|
|
onChange={(e) => setResetIncludeProgress(e.target.checked)}
|
|
className="rounded bg-bg-warm border-transparent focus:ring-0 text-teal"
|
|
/>
|
|
Also clear user progress & leaderboard
|
|
</label>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-xs text-fg-muted uppercase tracking-wider mb-1 block">
|
|
Type <span className="font-mono text-red-700">RESET</span> to confirm
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={resetConfirmText}
|
|
onChange={(e) => setResetConfirmText(e.target.value)}
|
|
placeholder="RESET"
|
|
className="w-full border border-bg-warm rounded-[var(--r-sm)] px-3 py-2 text-sm bg-paper font-mono"
|
|
disabled={isResetting}
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
onClick={runSmokeReset}
|
|
disabled={resetConfirmText !== 'RESET' || isResetting}
|
|
className="bg-red-600 hover:bg-red-700 text-white border-red-600 hover:border-red-700 flex items-center gap-2"
|
|
>
|
|
<RefreshCw size={16} className={isResetting ? 'animate-spin' : ''} />
|
|
{isResetting ? 'Resetting…' : 'Reset for Smoke Test'}
|
|
</Button>
|
|
|
|
{resetReport && (
|
|
<div className="mt-2 text-sm bg-paper border border-bg-warm rounded-[var(--r-sm)] p-3 space-y-1">
|
|
<p className="font-medium text-fg mb-1">Reset complete</p>
|
|
{resetReport.map((row) => (
|
|
<div key={row.collection} className="flex items-center justify-between font-mono text-xs">
|
|
<span className="text-fg-muted">{row.collection}</span>
|
|
{row.error ? (
|
|
<span className="text-red-600">error: {row.error}</span>
|
|
) : (
|
|
<span className="text-teal">{row.deleted} deleted</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Admin;
|