/* ============================================================================ DIVONCI WORLD — AGENT DEVELOPMENT (governance cockpit) (screens_agent_development.jsx) ---------------------------------------------------------------------------- Agent Development is the evidence-governed path to EARN tool-execution authority. It is NOT the Arsenal (tool library) and NOT the Command Console (identity/personality). Here live: trust, restrictions, delegated owners, evidence gates, training, evaluations, and the development timeline. Data comes from the live Worker snapshot via window.DWSnapshot (Supabase mode) with a clearly-labelled fixture fallback. Every block derives from the snapshot — nothing is hardcoded into the views. Writes are Worker-gated. ========================================================================== */ const { useState: useStateAd, useMemo: useMemoAd, useEffect: useEffectAd } = React; /* ── live snapshot hook ───────────────────────────────────────────────────── */ function useSnapshot() { const [, force] = useStateAd(0); useEffectAd(() => { const un = DWSnapshot.subscribe(() => force((n) => n + 1)); DWSnapshot.load(); return un; }, []); return { snap: DWSnapshot.get(), state: DWSnapshot.state(), source: DWSnapshot.source(), error: DWSnapshot.error() }; } /* trust / level doctrine (taxonomy) lives in dev_data.js → DEVD */ /* ── tiny helpers ─────────────────────────────────────────────────────────── */ function agentFrom(snap, id) { return (snap.agents || []).find((a) => a.id === id) || (typeof DW !== "undefined" && DW.agent ? DW.agent(id) : null) || { id, name: id, accent: "var(--ink-3)", domain: "", role: "" }; } const OWNER_LABEL = { diego: "Diego · Sovereign" }; function AgentAvatar({ agent, size = 30 }) { const ac = agent.accent || agent.ac || "var(--violet-bright)"; const head = agent.head && typeof window.assetUrl === "function" ? window.assetUrl(agent.head) : agent.head; if (head) return {agent.name}; return ( {(agent.name || "?").slice(0, 1).toUpperCase()} ); } function OwnerChip({ id, snap }) { if (OWNER_LABEL[id]) return {OWNER_LABEL[id]}; const a = agentFrom(snap, id); return {a.name}; } function TrustBadge({ trust }) { const m = DEVD.trustMeta(trust); const c = DW.STATE_META[m.state].c; return {m.label}; } function DevWarning({ text, icon = "shield", tone = "caution" }) { const c = "var(--state-" + tone + ")"; return (
{text}
); } function DevBlankRow({ icon = "skill", title, hint }) { return (
{title}
{hint &&
{hint}
}
); } /* ── competence ladder (0–5) ──────────────────────────────────────────────── */ function LevelLadder({ current, target, compact }) { const ci = current == null ? -1 : current, ti = target == null ? -1 : target; return (
{DEVD.LEVELS.map((lv, i) => { const isCur = i === ci, isTgt = i === ti, inPath = ci >= 0 && ti >= 0 && i > ci && i <= ti; const accent = isCur ? "var(--state-active)" : isTgt ? "var(--state-caution)" : inPath ? "var(--violet-ink)" : "var(--ink-4)"; return (
{lv.id}
{!compact &&
{lv.label}
} {isCur &&
NOW
} {isTgt &&
TARGET
}
); })}
); } /* ── source badge + connect control ───────────────────────────────────────── */ function SourceControl({ state, source }) { const [open, setOpen] = useStateAd(false); const [base, setBase] = useStateAd(() => { try { return localStorage.getItem("dw_api_base") || "https://api.divonci.world"; } catch (e) { return "https://api.divonci.world"; } }); const [token, setToken] = useStateAd(""); const live = state === "live"; const tone = live ? "clear" : state === "error" ? "crisis" : state === "loading" ? "active" : "caution"; const c = DW.STATE_META[tone].c; const label = live ? "LIVE" : state === "loading" ? "LOADING" : state === "error" ? "API UNAVAILABLE" : "FIXTURE"; return (
{open && (
Connect to live Worker
Source: {source}. The token is stored only in this browser (localStorage) and never written into source.
)}
); } /* ════════════════════════════════════════════════════════════════════════════ TOOL AUTHORITY — use vs execute vs admin (governed access ≠ competence) ════════════════════════════════════════════════════════════════════════ */ function ToolAuthority({ agentId, snap }) { const cats = useMemoAd(() => { const m = {}; (snap.toolCategories || []).forEach((c) => (m[c.id] = c.name)); return m; }, [snap.toolCategories]); const tools = useMemoAd(() => { const m = {}; (snap.tools || []).forEach((t) => (m[t.id] = t)); return m; }, [snap.tools]); const perms = useMemoAd(() => (snap.toolPermissions || []).filter((p) => p.agent_id === agentId), [snap.toolPermissions, agentId]); const rank = (p) => (p.can_admin ? 0 : p.can_execute ? 1 : 2); const rows = useMemoAd(() => perms.slice().sort((a, b) => rank(a) - rank(b) || ((tools[a.tool_id] || {}).name || a.tool_id).localeCompare((tools[b.tool_id] || {}).name || b.tool_id)), [perms, tools]); const exec = perms.filter((p) => p.can_execute).length; const admin = perms.filter((p) => p.can_admin).length; const blocked = perms.filter((p) => p.can_use && !p.can_execute && !p.can_admin).length; const Cell = ({ on, kind }) => ( {on ? ✓ : ·} ); return ( {perms.length} accessible · {exec} exec · {admin} admin · {blocked} exec-blocked} />
{perms.length === 0 ? : (
ToolCategoryType UseExecAdmin
{rows.map((p) => { const t = tools[p.tool_id] || { name: p.tool_id }; const isBlocked = p.can_use && !p.can_execute && !p.can_admin; return (
{t.name} {isBlocked && exec-blocked} {cats[t.category_id] || t.category_id || "—"} {t.tool_type || "—"}
); })}
)} ); } /* ════════════════════════════════════════════════════════════════════════════ DELEGATION MAP — who performs the work this agent cannot ════════════════════════════════════════════════════════════════════════ */ function DelegationMap({ track, snap }) { const map = useMemoAd(() => { const m = {}; const push = (owner, kind, label) => { (m[owner] || (m[owner] = { restrictions: [], gates: [] }))[kind].push(label); }; (track.restrictions || []).forEach((r) => push(r.delegates_to, "restrictions", r.restriction)); (track.gates || []).forEach((g) => push(g.owner, "gates", g.name)); return m; }, [track]); const owners = Object.keys(map); return ( {owners.length} owners} />
{owners.map((o) => (
{map[o].restrictions.map((r, i) => (
{r}
))} {map[o].gates.map((g, i) => (
{g}
))}
))}
); } /* ── evidence gates checklist ─────────────────────────────────────────────── */ function EvidenceGates({ track, snap }) { const gates = track.gates || []; return ( 0 / {gates.length} passed} /> {gates.length === 0 ? :
{gates.map((g, i) => (
{g.name}{g.required && required}
))}
} ); } /* ── required evidence checklist ──────────────────────────────────────────── */ function RequiredEvidence({ track }) { const reqs = track.required_evidence || []; return ( {DEVD.COPY.noPromo}} /> {reqs.length === 0 ? :
{reqs.map((r, i) => (
{typeof r === "string" ? r : r.label || r.name} {DEVD.COPY.evidenceReq}
))}
} ); } /* ── development timeline ─────────────────────────────────────────────────── */ function DevTimeline({ events }) { const sorted = useMemoAd(() => events.slice().sort((a, b) => (a.created_at < b.created_at ? 1 : -1)), [events]); const fmt = (s) => { try { const d = new Date(s); return d.toLocaleString(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }); } catch (e) { return s; } }; return ( {events.length}} /> {sorted.length === 0 ? :
{sorted.map((ev, i) => (
{i < sorted.length - 1 && }
{ev.event_type} {fmt(ev.created_at)}
{ev.summary}
{ev.detail &&
{ev.detail}
}
))}
} ); } /* ════════════════════════════════════════════════════════════════════════════ DEVELOPMENT RECORD — the full per-agent governance cockpit ════════════════════════════════════════════════════════════════════════ */ function AgentDevRecord({ agentId, snap, state, nav, embedded }) { const agent = agentFrom(snap, agentId); const track = (snap.agentDevelopmentTracks || []).find((t) => t.agent_id === agentId) || null; const events = (snap.agentDevelopmentEvents || []).filter((e) => e.agent_id === agentId); const evals = (snap.agentEvaluations || []).filter((e) => e.agent_id === agentId); const trust = track ? track.trust_state : "unproven"; const lvlCur = DEVD.levelFromInt(track ? track.current_level : null); const lvlTgt = DEVD.levelFromInt(track ? track.target_level : null); const restrictions = track ? track.restrictions || [] : []; return (
{/* top summary band */}
{agent.name}
{agent.role}{agent.domain ? " · " + agent.domain : ""}
Track
{track ? track.name : "—"}
Level
{lvlCur ? lvlCur.id : "—"} → {lvlTgt ? lvlTgt.id : "—"}
Priority
{track ? track.priority : "—"}
Restrictions
{restrictions.length}
Track owner
{track && track.owner_agent_id ? agentFrom(snap, track.owner_agent_id).name : "—"}
Status
{track ? track.status : "no track"}
{track && (
Competence ladder · current → target
)} {!track && (
)} {/* next action */} {track && track.next_action && (
Next action · training state {trust}
{track.next_action}
 )} {/* governance grid */}
{track && } {track && } {track && } {/* restrictions */} {track && ( non-bypassable} />
{restrictions.map((r, i) => (
{r.restriction}
))}
 )} {/* evaluations (empty state) */} {evals.length}} /> {evals.length === 0 ? :
{evals.slice(0, 6).map((e) => (
{e.title} {e.verdict}
))}
} {/* timeline spans both columns */}
{/* tool authority spans both columns */}
{nav && (
)}
); } /* embed used on council profile pages */ function AgentDevelopmentRecord({ agentId, nav }) { const { snap, state } = useSnapshot(); const agent = agentFrom(snap, agentId); return (
} />
); } /* ════════════════════════════════════════════════════════════════════════════ AGENT DEVELOPMENT BOARD — route "agent-development" ════════════════════════════════════════════════════════════════════════ */ function DevMetric({ k, v, state }) { const c = state ? DW.STATE_META[state].c : "var(--ink)"; return
{k}
{v}
; } /* ── roster OVERLAY: glides in over the tab content, staggered cards ─────────── Flow: pick an agent → roster glides off → that agent's cockpit is revealed. The roster and the detail are never read at the same time. */ function DevRoster({ agents, trackByAgent, sel, open, onSelect, onClose }) { const [shown, setShown] = useStateAd(false); const [mounted, setMounted] = useStateAd(open); const [filter, setFilter] = useStateAd("all"); useEffectAd(() => { let raf1, raf2, t; if (open) { setMounted(true); raf1 = requestAnimationFrame(() => { raf2 = requestAnimationFrame(() => setShown(true)); }); } else { setShown(false); t = setTimeout(() => setMounted(false), 640); } return () => { cancelAnimationFrame(raf1); cancelAnimationFrame(raf2); clearTimeout(t); }; }, [open]); useEffectAd(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open]); if (!mounted) return null; const trustOf = (a) => { const t = trackByAgent[a.id]; return t ? t.trust_state : "unproven"; }; const FILTERS = [ { id: "all", label: "All", test: () => true }, { id: "training", label: "In training", test: (a) => trustOf(a) === "training" }, { id: "active", label: "Active track", test: (a) => { const t = trackByAgent[a.id]; return t && t.status === "active"; } }, { id: "restricted", label: "Restricted", test: (a) => { const t = trackByAgent[a.id]; return t && (t.restrictions || []).length > 0; } }, { id: "awaiting", label: "Awaiting track", test: (a) => !trackByAgent[a.id] }, ]; const counts = {}; FILTERS.forEach((f) => (counts[f.id] = agents.filter(f.test).length)); const active = FILTERS.find((f) => f.id === filter) || FILTERS[0]; const list = agents.filter(active.test); const n = list.length; return (
Pick an agent{agents.length}
{FILTERS.map((f) => ( ))}
{list.map((a, i) => { const t = trackByAgent[a.id]; const trust = trustOf(a); const lvl = DEVD.levelFromInt(t ? t.current_level : null); const tgt = t ? DEVD.levelFromInt(t.target_level) : null; const rx = t && t.restrictions ? t.restrictions.length : 0; const delay = (shown ? i * 0.04 : (n - 1 - i) * 0.022) + "s"; return ( ); })} {n === 0 &&
No agents match this filter.
}
{DEVD.COPY.noTrack} {DEVD.COPY.createAfter} {DEVD.COPY.noPromo}
); } /* ── slim bar above the cockpit — shows who you're viewing + reopen roster ── */ function SwitchBar({ agent, trust, track, count, onChange }) { const lvl = DEVD.levelFromInt(track ? track.current_level : null); const tgt = track ? DEVD.levelFromInt(track.target_level) : null; return (
{agent.name}
{agent.role}
{lvl && {lvl.id}→{tgt.id}}
); } function AgentDevelopmentScreen({ nav }) { const { snap, state, source } = useSnapshot(); const agents = snap.agents || []; const tracks = snap.agentDevelopmentTracks || []; const evals = snap.agentEvaluations || []; const [sel, setSel] = useStateAd("viiera"); const [rosterOpen, setRosterOpen] = useStateAd(true); const [view, setView] = useStateAd("develop"); useEffectAd(() => { if (agents.length && !agents.some((a) => a.id === sel)) setSel((tracks[0] && tracks[0].agent_id) || agents[0].id); }, [snap]); const withTracks = new Set(tracks.map((t) => t.agent_id)); const trackByAgent = useMemoAd(() => { const m = {}; tracks.forEach((t) => (m[t.agent_id] = t)); return m; }, [tracks]); const metrics = [ { k: "Total agents", v: agents.length }, { k: "Active tracks", v: tracks.filter((t) => t.status === "active").length, state: "active" }, { k: "In training", v: tracks.filter((t) => t.trust_state === "training").length, state: "focus" }, { k: "Awaiting first track", v: agents.filter((a) => !withTracks.has(a.id)).length, state: agents.length && tracks.length < agents.length ? "caution" : null }, { k: "Passed evals", v: evals.filter((e) => e.verdict === "pass").length, state: "clear" }, { k: "Failed evals", v: evals.filter((e) => e.verdict === "fail").length, state: evals.some((e) => e.verdict === "fail") ? "crisis" : null }, ]; return (
Governance · CompetenceAgent Development
The evidence-governed path to earn tool-execution authority. Separate from Arsenal (tool library) and Command Console (identity). Trust is earned through evaluations — never assumed.
{window.DevBoardGuideButton ? : null}
{view === "routing" ? ( window.AgentModelRouting ? : null ) : ( {state === "error" &&
}
{metrics.map((m, i) => )}
{/* reusable track template + clone-to-other-agents action (board-level) */} {window.TrackTemplatePanel ?
: null} {/* switch-agent bar — who you're viewing + reopen the roster overlay */} {sel && setRosterOpen(true)} />} {/* selected agent cockpit (detail) */} {sel && } {/* board-level governance: unknown mission-code escalations + protected execution */} {window.UnknownMissionEscalations ?
: null} {window.ProtectedExecutionPanel ?
: null} {/* roster overlay — glides in over the content, staggered cards */} { setSel(id); setRosterOpen(false); }} onClose={() => setRosterOpen(false)} /> )}
); } /* ════════════════════════════════════════════════════════════════════════════ NEW TRAINING TARGET — composer (Worker-gated; drafts the row, no DB write) ════════════════════════════════════════════════════════════════════════ */ function GatedWrite({ label, icon = "plus", agentId }) { const [open, setOpen] = useStateAd(false); return (
Worker-gated · no direct DB write setOpen(false)} agentId={agentId} />
); } function TrainingTargetDialog({ open, onClose, agentId }) { const snap = DWSnapshot.get(); const agents = snap.agents || []; const [f, setF] = useStateAd(() => ({ agent_id: agentId || (agents[0] && agents[0].id) || "viiera", name: "", domain: "", current_level: 0, target_level: 1, priority: "medium", required_evidence: "", next_action: "" })); const [queued, setQueued] = useStateAd(null); const set = (k, v) => setF((p) => ({ ...p, [k]: v, ...(k === "agent_id" ? { domain: (agentFrom(snap, v) || {}).domain || p.domain } : null) })); if (!open) return null; const a = agentFrom(snap, f.agent_id); const valid = f.name.trim() && f.target_level > f.current_level; const row = { agent_id: f.agent_id, name: f.name.trim(), domain: f.domain.trim(), status: "planned", trust_state: "training", current_level: f.current_level, target_level: f.target_level, priority: f.priority, required_evidence: f.required_evidence.split("\n").map((s) => s.trim()).filter(Boolean), gates: [], restrictions: [], next_action: f.next_action.trim() || null, owner_agent_id: "qa-agent", evidence_record_id: null, }; const ROUTE = "POST /api/divonci-world/agent-development/tracks"; return (
e.stopPropagation()}>
New Training Target
Drafts a development track. Submission routes to the Worker endpoint — the browser never writes to Supabase.
{queued ? (
Queued — pending Worker endpoint
{ROUTE}
This is the exact row the endpoint will insert once wired:
{JSON.stringify(queued, null, 2)}
) : (