355 lines
17 KiB
JavaScript
355 lines
17 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { login, refresh, fetchPacks, fetchAdminPacks, fetchPackValidation, fetchPackProvenance, fetchPackVersions, fetchPackComments, upsertPack, publishPack, governanceAction, addReviewComment, listLearners, createLearner, fetchLearnerState, fetchRecommendations, postEvidence, submitEvaluatorJob, fetchEvaluatorHistory, fetchEvaluatorTrace } from "./api";
|
|
import { loadAuth, saveAuth, clearAuth } from "./authStore";
|
|
|
|
function LoginView({ onAuth }) {
|
|
const [username, setUsername] = useState("wesley");
|
|
const [password, setPassword] = useState("demo-pass");
|
|
const [error, setError] = useState("");
|
|
async function doLogin() {
|
|
try {
|
|
const result = await login(username, password);
|
|
saveAuth(result);
|
|
onAuth(result);
|
|
} catch { setError("Login failed"); }
|
|
}
|
|
return (
|
|
<div className="page narrow-page">
|
|
<section className="card narrow">
|
|
<h1>Didactopus login</h1>
|
|
<label>Username<input value={username} onChange={(e) => setUsername(e.target.value)} /></label>
|
|
<label>Password<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} /></label>
|
|
<button className="primary" onClick={doLogin}>Login</button>
|
|
{error ? <div className="error">{error}</div> : null}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function NavTabs({ tab, setTab, role }) {
|
|
return (
|
|
<div className="tab-row">
|
|
<button className={tab==="learner" ? "active-tab" : ""} onClick={() => setTab("learner")}>Learner</button>
|
|
<button className={tab==="history" ? "active-tab" : ""} onClick={() => setTab("history")}>Evaluator history</button>
|
|
<button className={tab==="manage" ? "active-tab" : ""} onClick={() => setTab("manage")}>Learners</button>
|
|
{role === "admin" ? <>
|
|
<button className={tab==="admin" ? "active-tab" : ""} onClick={() => setTab("admin")}>Pack admin</button>
|
|
<button className={tab==="review" ? "active-tab" : ""} onClick={() => setTab("review")}>Governance review</button>
|
|
</> : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PackAuthorForm({ value, onChange, onSave }) {
|
|
function setField(field, val) { onChange({ ...value, [field]: val }); }
|
|
function setCompliance(field, val) { onChange({ ...value, compliance: { ...value.compliance, [field]: val } }); }
|
|
return (
|
|
<div className="form-grid">
|
|
<label>Pack ID<input value={value.id} onChange={(e) => setField("id", e.target.value)} /></label>
|
|
<label>Title<input value={value.title} onChange={(e) => setField("title", e.target.value)} /></label>
|
|
<label className="full">Subtitle<input value={value.subtitle} onChange={(e) => setField("subtitle", e.target.value)} /></label>
|
|
<label>Level<input value={value.level} onChange={(e) => setField("level", e.target.value)} /></label>
|
|
<label>Source count<input type="number" value={value.compliance.sources} onChange={(e) => setCompliance("sources", Number(e.target.value))} /></label>
|
|
<label className="full">Onboarding headline<input value={value.onboarding.headline} onChange={(e) => onChange({ ...value, onboarding: { ...value.onboarding, headline: e.target.value } })} /></label>
|
|
<label className="full">Onboarding body<textarea value={value.onboarding.body} onChange={(e) => onChange({ ...value, onboarding: { ...value.onboarding, body: e.target.value } })} /></label>
|
|
<div className="checkrow full">
|
|
<label><input type="checkbox" checked={value.compliance.attributionRequired} onChange={(e) => setCompliance("attributionRequired", e.target.checked)} /> Attribution required</label>
|
|
<label><input type="checkbox" checked={value.compliance.shareAlikeRequired} onChange={(e) => setCompliance("shareAlikeRequired", e.target.checked)} /> Share-alike</label>
|
|
<label><input type="checkbox" checked={value.compliance.noncommercialOnly} onChange={(e) => setCompliance("noncommercialOnly", e.target.checked)} /> Noncommercial only</label>
|
|
</div>
|
|
<div className="full"><button className="primary" onClick={onSave}>Save draft</button></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function App() {
|
|
const [auth, setAuth] = useState(loadAuth());
|
|
const [tab, setTab] = useState("learner");
|
|
const [packs, setPacks] = useState([]);
|
|
const [adminPacks, setAdminPacks] = useState([]);
|
|
const [learners, setLearners] = useState([]);
|
|
const [selectedLearnerId, setSelectedLearnerId] = useState("wesley-learner");
|
|
const [selectedPackId, setSelectedPackId] = useState("");
|
|
const [learnerState, setLearnerState] = useState(null);
|
|
const [cards, setCards] = useState([]);
|
|
const [history, setHistory] = useState([]);
|
|
const [selectedTrace, setSelectedTrace] = useState(null);
|
|
const [validation, setValidation] = useState(null);
|
|
const [provenance, setProvenance] = useState(null);
|
|
const [versions, setVersions] = useState([]);
|
|
const [comments, setComments] = useState([]);
|
|
const [commentText, setCommentText] = useState("Looks structurally plausible.");
|
|
const [reviewSummary, setReviewSummary] = useState("Reviewed and ready for next stage.");
|
|
const [newLearnerId, setNewLearnerId] = useState("wesley-learner");
|
|
const [formPack, setFormPack] = useState({ id: "new-pack", title: "New Pack", subtitle: "Editable governance scaffold", level: "novice-friendly", concepts: [], onboarding: { headline: "Start here", body: "Begin", checklist: [] }, compliance: { sources: 0, attributionRequired: false, shareAlikeRequired: false, noncommercialOnly: false, flags: [] } });
|
|
const [message, setMessage] = useState("");
|
|
|
|
async function refreshAuthToken() {
|
|
if (!auth?.refresh_token) return null;
|
|
try {
|
|
const result = await refresh(auth.refresh_token);
|
|
saveAuth(result);
|
|
setAuth(result);
|
|
return result;
|
|
} catch {
|
|
clearAuth();
|
|
setAuth(null);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function guarded(fn) {
|
|
try { return await fn(auth.access_token); }
|
|
catch {
|
|
const next = await refreshAuthToken();
|
|
if (!next) throw new Error("auth failed");
|
|
return await fn(next.access_token);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!auth) return;
|
|
async function load() {
|
|
const p = await guarded((token) => fetchPacks(token));
|
|
setPacks(p);
|
|
setSelectedPackId((prev) => prev || p[0]?.id || "");
|
|
let ls = await guarded((token) => listLearners(token));
|
|
if (ls.length === 0) {
|
|
await guarded((token) => createLearner(token, selectedLearnerId, selectedLearnerId));
|
|
ls = await guarded((token) => listLearners(token));
|
|
}
|
|
setLearners(ls);
|
|
if (auth.role === "admin") {
|
|
setAdminPacks(await guarded((token) => fetchAdminPacks(token)));
|
|
}
|
|
}
|
|
load();
|
|
}, [auth]);
|
|
|
|
useEffect(() => {
|
|
if (!auth || !selectedLearnerId || !selectedPackId) return;
|
|
async function loadStuff() {
|
|
setLearnerState(await guarded((token) => fetchLearnerState(token, selectedLearnerId)));
|
|
const recs = await guarded((token) => fetchRecommendations(token, selectedLearnerId, selectedPackId));
|
|
setCards(recs.cards || []);
|
|
setHistory(await guarded((token) => fetchEvaluatorHistory(token, selectedLearnerId)));
|
|
if (auth.role === "admin") {
|
|
setValidation(await guarded((token) => fetchPackValidation(token, selectedPackId)));
|
|
setProvenance(await guarded((token) => fetchPackProvenance(token, selectedPackId)));
|
|
setVersions(await guarded((token) => fetchPackVersions(token, selectedPackId)));
|
|
setComments(await guarded((token) => fetchPackComments(token, selectedPackId)));
|
|
}
|
|
}
|
|
loadStuff();
|
|
}, [auth, selectedLearnerId, selectedPackId]);
|
|
|
|
async function simulateCard(card) {
|
|
await guarded((token) => postEvidence(token, selectedLearnerId, { concept_id: card.conceptId, dimension: "mastery", score: card.scoreHint, confidence_hint: card.confidenceHint, timestamp: new Date().toISOString(), kind: "checkpoint", source_id: `ui-${card.id}` }));
|
|
setLearnerState(await guarded((token) => fetchLearnerState(token, selectedLearnerId)));
|
|
const recs = await guarded((token) => fetchRecommendations(token, selectedLearnerId, selectedPackId));
|
|
setCards(recs.cards || []);
|
|
setMessage(card.reward);
|
|
}
|
|
|
|
async function runEvaluator() {
|
|
const conceptId = packs.find((p) => p.id === selectedPackId)?.concepts?.[0]?.id || "prior";
|
|
await guarded((token) => submitEvaluatorJob(token, selectedLearnerId, { pack_id: selectedPackId, concept_id: conceptId, submitted_text: "This is a moderately detailed learner response intended to trigger a somewhat better prototype evaluator score.", kind: "checkpoint" }));
|
|
setTimeout(async () => {
|
|
setHistory(await guarded((token) => fetchEvaluatorHistory(token, selectedLearnerId)));
|
|
setLearnerState(await guarded((token) => fetchLearnerState(token, selectedLearnerId)));
|
|
const recs = await guarded((token) => fetchRecommendations(token, selectedLearnerId, selectedPackId));
|
|
setCards(recs.cards || []);
|
|
}, 1200);
|
|
}
|
|
|
|
async function createLearnerNow() {
|
|
await guarded((token) => createLearner(token, newLearnerId, newLearnerId));
|
|
const ls = await guarded((token) => listLearners(token));
|
|
setLearners(ls);
|
|
setSelectedLearnerId(newLearnerId);
|
|
}
|
|
|
|
async function savePack() {
|
|
await guarded((token) => upsertPack(token, { pack: formPack, is_published: false, change_summary: "Submitted from form editor" }));
|
|
setAdminPacks(await guarded((token) => fetchAdminPacks(token)));
|
|
setPacks(await guarded((token) => fetchPacks(token)));
|
|
setMessage("Draft saved");
|
|
}
|
|
|
|
async function togglePublish(packId, isPublished) {
|
|
await guarded((token) => publishPack(token, packId, isPublished));
|
|
setAdminPacks(await guarded((token) => fetchAdminPacks(token)));
|
|
setPacks(await guarded((token) => fetchPacks(token)));
|
|
}
|
|
|
|
async function doGovernance(status) {
|
|
await guarded((token) => governanceAction(token, selectedPackId, { status, review_summary: reviewSummary }));
|
|
setAdminPacks(await guarded((token) => fetchAdminPacks(token)));
|
|
setVersions(await guarded((token) => fetchPackVersions(token, selectedPackId)));
|
|
setMessage(`Pack moved to ${status}`);
|
|
}
|
|
|
|
async function addCommentNow() {
|
|
const versionNumber = versions[0]?.version_number || 1;
|
|
await guarded((token) => addReviewComment(token, selectedPackId, versionNumber, { comment_text: commentText, disposition: "comment" }));
|
|
setComments(await guarded((token) => fetchPackComments(token, selectedPackId)));
|
|
setMessage("Review comment added");
|
|
}
|
|
|
|
async function loadTrace(jobId) {
|
|
setSelectedTrace(await guarded((token) => fetchEvaluatorTrace(token, jobId)));
|
|
}
|
|
|
|
if (!auth) return <LoginView onAuth={setAuth} />;
|
|
|
|
return (
|
|
<div className="page">
|
|
<header className="hero">
|
|
<div>
|
|
<h1>Didactopus review governance layer</h1>
|
|
<p>Versioning, review comments, governance states, evaluator traces, and curator-facing pack workflows.</p>
|
|
<div className="muted">Signed in as {auth.username} ({auth.role})</div>
|
|
{message ? <div className="message">{message}</div> : null}
|
|
</div>
|
|
<div className="hero-controls">
|
|
<label>Learner<select value={selectedLearnerId} onChange={(e) => setSelectedLearnerId(e.target.value)}>{learners.map((l) => <option key={l.learner_id} value={l.learner_id}>{l.display_name || l.learner_id}</option>)}</select></label>
|
|
<label>Pack<select value={selectedPackId} onChange={(e) => setSelectedPackId(e.target.value)}>{packs.map((p) => <option key={p.id} value={p.id}>{p.title}</option>)}</select></label>
|
|
<button onClick={() => { clearAuth(); setAuth(null); }}>Logout</button>
|
|
</div>
|
|
</header>
|
|
|
|
<NavTabs tab={tab} setTab={setTab} role={auth.role} />
|
|
|
|
{tab === "learner" && (
|
|
<main className="layout onecol">
|
|
<section className="card">
|
|
<h2>Learner dashboard</h2>
|
|
<button onClick={runEvaluator}>Submit demo evaluator job</button>
|
|
<div className="steps-stack">
|
|
{cards.length ? cards.map((card) => (
|
|
<div key={card.id} className="step-card">
|
|
<div className="step-header">
|
|
<div><h4>{card.title}</h4><div className="muted">{card.minutes} minutes</div></div>
|
|
<div className="reward-pill">{card.reward}</div>
|
|
</div>
|
|
<p>{card.reason}</p>
|
|
<details><summary>Why this is recommended</summary><ul>{card.why.map((w, idx) => <li key={idx}>{w}</li>)}</ul></details>
|
|
<button className="primary" onClick={() => simulateCard(card)}>Simulate step</button>
|
|
</div>
|
|
)) : <div className="muted">No recommendations available.</div>}
|
|
</div>
|
|
<h3>Learner state snapshot</h3>
|
|
<pre className="prebox">{JSON.stringify(learnerState, null, 2)}</pre>
|
|
</section>
|
|
</main>
|
|
)}
|
|
|
|
{tab === "history" && (
|
|
<main className="layout twocol">
|
|
<section className="card">
|
|
<h2>Evaluator history</h2>
|
|
{history.length ? (
|
|
<table className="table">
|
|
<thead><tr><th>Job</th><th>Status</th><th>Concept</th><th>Score</th><th>Trace</th></tr></thead>
|
|
<tbody>
|
|
{history.map((row) => (
|
|
<tr key={row.job_id}>
|
|
<td>{row.job_id}</td>
|
|
<td>{row.status}</td>
|
|
<td>{row.concept_id}</td>
|
|
<td>{row.result_score ?? "-"}</td>
|
|
<td><button onClick={() => loadTrace(row.job_id)}>Inspect trace</button></td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
) : <div className="muted">No evaluator jobs yet.</div>}
|
|
</section>
|
|
<section className="card">
|
|
<h2>Evaluator trace</h2>
|
|
<pre className="prebox">{JSON.stringify(selectedTrace, null, 2)}</pre>
|
|
</section>
|
|
</main>
|
|
)}
|
|
|
|
{tab === "manage" && (
|
|
<main className="layout twocol">
|
|
<section className="card">
|
|
<h2>Learner management</h2>
|
|
<label>New learner ID<input value={newLearnerId} onChange={(e) => setNewLearnerId(e.target.value)} /></label>
|
|
<button className="primary" onClick={createLearnerNow}>Create learner</button>
|
|
</section>
|
|
<section className="card">
|
|
<h2>Existing learners</h2>
|
|
<table className="table">
|
|
<thead><tr><th>Learner ID</th><th>Display name</th><th>Owner</th></tr></thead>
|
|
<tbody>
|
|
{learners.map((row) => (
|
|
<tr key={row.learner_id}>
|
|
<td>{row.learner_id}</td>
|
|
<td>{row.display_name}</td>
|
|
<td>{row.owner_user_id}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
</main>
|
|
)}
|
|
|
|
{tab === "admin" && auth.role === "admin" && (
|
|
<main className="layout twocol">
|
|
<section className="card">
|
|
<h2>Pack authoring</h2>
|
|
<PackAuthorForm value={formPack} onChange={setFormPack} onSave={savePack} />
|
|
</section>
|
|
<section className="card">
|
|
<h2>Pack administration</h2>
|
|
<table className="table">
|
|
<thead><tr><th>ID</th><th>Version</th><th>State</th><th>Published</th><th>Action</th></tr></thead>
|
|
<tbody>
|
|
{adminPacks.map((row) => (
|
|
<tr key={row.id}>
|
|
<td>{row.id}</td>
|
|
<td>{row.current_version}</td>
|
|
<td>{row.governance_state}</td>
|
|
<td>{String(row.is_published)}</td>
|
|
<td><button onClick={() => togglePublish(row.id, !row.is_published)}>{row.is_published ? "Unpublish" : "Publish"}</button></td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
</main>
|
|
)}
|
|
|
|
{tab === "review" && auth.role === "admin" && (
|
|
<main className="layout twocol">
|
|
<section className="card">
|
|
<h2>Governance review</h2>
|
|
<div className="button-row">
|
|
<button onClick={() => doGovernance("in_review")}>Move to in_review</button>
|
|
<button onClick={() => doGovernance("approved")}>Approve</button>
|
|
<button onClick={() => doGovernance("rejected")}>Reject</button>
|
|
</div>
|
|
<label>Review summary<textarea value={reviewSummary} onChange={(e) => setReviewSummary(e.target.value)} /></label>
|
|
<h3>Validation</h3>
|
|
<pre className="prebox">{JSON.stringify(validation, null, 2)}</pre>
|
|
<h3>Provenance</h3>
|
|
<pre className="prebox">{JSON.stringify(provenance, null, 2)}</pre>
|
|
</section>
|
|
<section className="card">
|
|
<h2>Versions and comments</h2>
|
|
<h3>Pack versions</h3>
|
|
<pre className="prebox">{JSON.stringify(versions, null, 2)}</pre>
|
|
<label>Reviewer comment<textarea value={commentText} onChange={(e) => setCommentText(e.target.value)} /></label>
|
|
<button className="primary" onClick={addCommentNow}>Add comment</button>
|
|
<h3>Review comments</h3>
|
|
<pre className="prebox">{JSON.stringify(comments, null, 2)}</pre>
|
|
</section>
|
|
</main>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|