/* ============================================================================ DIVONCI WORLD — SCREENS: SKILL TREE · ACTIVITY LOG · NEXUS ========================================================================== */ /* ----------------------------------------------------------- SKILL TREE - */ function skillTreeGen(a) { if (DW.SKILLS[a.id]) return DW.SKILLS[a.id]; const ok = a.tools.filter(t => t.ok), locked = a.tools.filter(t => !t.ok); return { tiers: [ [{ n: a.domain + " Core", s: "lit" }], (ok.length ? ok : [{ n: "Operate" }]).slice(0, 3).map((t, i) => ({ n: t.n, s: i < 2 ? "lit" : "avail" })), [{ n: "Autonomy L3", s: "locked", why: "Diego grant" }].concat(locked.map(t => ({ n: t.n, s: "locked", why: t.why || "doctrine" }))).slice(0, 3), ] }; } function SkillTree({ agentId, nav }) { const a = DW.agent(agentId); const tree = skillTreeGen(a); const [sel, setSel] = useState(null); const tiers = tree.tiers; return (
{a.name} · CapabilitiesSkill Tree
{DW.AGENTS.map(ag => )}
lit available locked
} />
{tiers.map((tier, ti) => (
Tier {ti + 1}
{tier.map((node, ni) => { const lit = node.s === "lit", locked = node.s === "locked"; return ( ); })}
))}
{sel ? (
{sel.s === "locked" ? : }

{sel.n}

{sel.s === "lit" ? "Unlocked" : sel.s === "locked" ? "Locked" : "Available"} Tier {sel.tier}
{sel.why &&
requires · {sel.why}
}

{sel.s === "lit" ? "This capability is active and contributes to the agent's live telemetry." : sel.s === "locked" ? "Locked capability. Unlock requires the listed grant — escalate to Diego." : "Reachable next. No glow until unlocked."}

) :
Select a node to inspect its capability
}

Capabilities unlock left-to-right. A node only lights once every predecessor is lit. Tier-3 autonomy and self-approval are locked by doctrine — they require an explicit grant from Diego.

Lit
unlocked · glows · counts toward telemetry
Available
reachable next · no glow
Locked
needs Diego grant or upstream node
grant flow · TODO
); } /* --------------------------------------------------------- ACTIVITY LOG - */ const LOG_STATES = ["all", "active", "crisis", "caution", "clear", "focus", "standby"]; function ActivityLog({ nav }) { const [agentFilter, setAgentFilter] = useState("all"); const [stateFilter, setStateFilter] = useState("all"); const rows = DW.LOG.filter(e => (agentFilter === "all" || e.agent === agentFilter) && (stateFilter === "all" || e.state === stateFilter)); return (
Auditable · time-orderedActivity Log
The cockpit heartbeat. Newest first. Each LED uses the semantic state system so the column scans as a vertical state-ribbon.
Filters
{DW.AGENTS.map(a => )}
{LOG_STATES.map(s => )}
TimeEventAgent · domainState
{rows.map((e, i) => (
{e.t} {e.agent} {e.msg} {e.domain} {e.kind}
))} {rows.length === 0 &&
No events match these filters
}
{[["Running", "active"], ["Blocked", "caution"], ["Escalated", "crisis"], ["Completed", "clear"]].map(([k, s]) => (
{k}
{DW.LOG.filter(e => e.kind === k).length}
last 24 events
 ))}
); } /* --------------------------------------------------------- COUNCIL COMMS - */ const COMMS_REPLIES = { viiera: "Acknowledged. I will weigh it and command accordingly.", vv: "On it. I'll stage the work and hold for your clearance.", claws: "Understood. I'll shape the message and route it right.", brodex: "Copy. Running the checks before anyone moves.", nova: "Ooh — I have three ideas already. Want the wild one?", optimus: "Logged. I'll find the faster path and report the time saved.", }; function CommsAvatar({ id, size = 34 }) { if (id === "diego") return (
D
); const a = DW.agent(id); return {a.name}; } function commsName(id) { return id === "diego" ? "Diego" : DW.agent(id).name; } function commsColor(id) { return id === "diego" ? "var(--gold-bright)" : DW.agent(id).ac; } function CommsScreen({ nav }) { const [msgs, setMsgs] = useState(() => DW.CHAT.slice().reverse()); const [target, setTarget] = useState("all"); const [draft, setDraft] = useState(""); const feedRef = useRef(null); const last = msgs[msgs.length - 1]; useEffect(() => { if (feedRef.current) feedRef.current.scrollTop = feedRef.current.scrollHeight; }, [msgs.length]); function send() { const text = draft.trim(); if (!text) return; const t = new Date(); const stamp = `${String(t.getHours()).padStart(2,"0")}:${String(t.getMinutes()).padStart(2,"0")}:${String(t.getSeconds()).padStart(2,"0")}`; setMsgs(m => [...m, { t: stamp, from: "diego", to: target, state: "active", msg: text }]); setDraft(""); const responder = target === "all" ? "viiera" : target; setTimeout(() => { const t2 = new Date(); const stamp2 = `${String(t2.getHours()).padStart(2,"0")}:${String(t2.getMinutes()).padStart(2,"0")}:${String(t2.getSeconds()).padStart(2,"0")}`; setMsgs(m => [...m, { t: stamp2, from: responder, to: "diego", state: DW.agent(responder).state, msg: COMMS_REPLIES[responder] || "Received." }]); }, 950); } return (
Council channelCouncil Comms
The live channel between every member of the Council — and where you speak to them directly. Formal approvals still live in the War Room; this is the conversation around them.
{/* chat column */} {DW.AGENTS.length} online} /> {/* feed */}
{msgs.map((m, i) => { const mine = m.from === "diego"; return (
{commsName(m.from)} {m.to === "all" ? "→ all" : "→ " + commsName(m.to)} · {m.t}
{m.msg}
); })}
{/* composer */}
{DW.AGENTS.map(a => ( ))}
setDraft(e.target.value)} onKeyDown={e => { if (e.key === "Enter") send(); }} placeholder={`Message ${target === "all" ? "the Council" : commsName(target)}… (task, question, directive)`} style={{ flex: 1, fontFamily: "var(--font-ui)", fontSize: 13, color: "var(--ink)", background: "var(--panel-2)", border: "1px solid var(--hairline-2)", borderRadius: 9, padding: "11px 14px", outline: "none" }} />
{/* sidebar — own scroll region, page itself never moves */}
} />
{commsName(last.from)}
speaking now · {last.t}

{last.msg}

 } />
62% capacity · south relay degraded
{[["Eagle / Opus","focus","12 routes"],["Falcon / Sonnet","active","38 routes"],["Hawk / Haiku","clear","64 routes"]].map(([n,s,d],i)=>(
{n} {d}
))}
); } /* ----------------------------------------------------- COUNCIL RELATIONS - */ /* Viiera at the centre; the other five orbit her. Edges = AGENT_LINKS. */ const COUNCIL_RING = { viiera: { x: 0.5, y: 0.5 }, nova: { x: 0.5, y: 0.13 }, claws: { x: 0.85, y: 0.40 }, brodex: { x: 0.72, y: 0.87 }, vv: { x: 0.28, y: 0.87 }, optimus: { x: 0.15, y: 0.40 }, }; function CouncilNexus() { const wrapRef = useRef(null); const [size, setSize] = useState({ w: 800, h: 480 }); const [hover, setHover] = useState(null); // transient — drives the highlight/dim, cleared on mouse-out const [selected, setSelected] = useState("viiera"); // persists the inspector panel at rest const links = DW.AGENT_LINKS; useEffect(() => { const ro = new ResizeObserver(() => { const r = wrapRef.current.getBoundingClientRect(); setSize({ w: r.width, h: 480 }); }); if (wrapRef.current) ro.observe(wrapRef.current); return () => ro.disconnect(); }, []); const px = (id) => ({ x: COUNCIL_RING[id].x * size.w, y: COUNCIL_RING[id].y * size.h }); const focus = hover; // who the graph is currently emphasising (null = neutral) const insp = hover || selected; // inspector follows the cursor, falls back to selection const linkedToFocus = (id) => links.some(l => (l.a === focus && l.b === id) || (l.b === focus && l.a === id)); const hoverAgent = insp ? DW.agent(insp) : null; const hoverLinks = insp ? links.filter(l => l.a === insp || l.b === insp).map(l => ({ other: DW.agent(l.a === insp ? l.b : l.a), label: l.label })) : []; const hc = focus ? DW.agent(focus).ac : "var(--violet)"; return (
{DW.AGENTS.length} agents · {links.length} ties} />
{links.map((l, i) => { const pa = px(l.a), pb = px(l.b), active = focus && (l.a === focus || l.b === focus); const dimLine = focus && !active; return ; })} {links.map((l, i) => { const pa = px(l.a), pb = px(l.b), active = focus && (l.a === focus || l.b === focus); return ; })} {DW.AGENTS.map(a => { const p = px(a.id), isC = a.id === "viiera", on = focus === a.id, sel = insp === a.id; const dim = focus && !on && !linkedToFocus(a.id); const sz = isC ? 72 : 54; return ( ); })}
{hoverAgent && (
{hoverAgent.name}
{hoverAgent.name}
{hoverAgent.domain} · {hoverLinks.length} ties
{hoverLinks.map((l, i) => (
{l.other.name}
{l.other.name}
{l.label}
))}
hover any portrait to trace its ties · click to pin
)}
); } /* ---------------------------------------------------------------- NEXUS - */ function Nexus({ nav }) { const wrapRef = useRef(null); const [size, setSize] = useState({ w: 800, h: 460 }); const [hover, setHover] = useState(null); const [sel, setSel] = useState(null); const [tab, setTab] = useState("knowledge"); const { nodes, edges } = DW.NEXUS; useEffect(() => { const ro = new ResizeObserver(() => { const r = wrapRef.current.getBoundingClientRect(); setSize({ w: r.width, h: 460 }); }); if (wrapRef.current) ro.observe(wrapRef.current); return () => ro.disconnect(); }, []); const px = (n) => ({ x: n.x * size.w, y: n.y * size.h }); const kindIcon = { root: "crown", doc: "evidence", module: "studio", group: "council", data: "nexus", risk: "risk", ops: "ops" }; return (
{tab === "knowledge" ? "Knowledge graph" : "Council graph"}Nexus
{tab === "knowledge" ? "How the empire's knowledge connects. Nodes are concepts, modules, evidence and risks; edges preserve relationship context. Hover to trace, click to inspect." : "The agent relation map. Viiera sits at the centre — every domain reads through her. Hover a portrait to trace its ties across the Council."}
{tab === "knowledge" && (
{nodes.length} nodes · {edges.length} edges} />
{edges.map(([a, b], i) => { const na = nodes.find(n => n.id === a), nb = nodes.find(n => n.id === b); const pa = px(na), pb = px(nb); const active = hover && (hover === a || hover === b); return ; })} {edges.map(([a, b], i) => { const na = nodes.find(n => n.id === a), nb = nodes.find(n => n.id === b); const pa = px(na), pb = px(nb); return ; })} {nodes.map(n => { const p = px(n), c = DW.STATE_META[n.state].c, isRoot = n.kind === "root"; const dim = hover && hover !== n.id && !edges.some(([a, b]) => (a === hover && b === n.id) || (b === hover && a === n.id)); return ( ); })}
{sel ? (() => { const c = DW.STATE_META[sel.state].c; const linked = edges.filter(([a, b]) => a === sel.id || b === sel.id).map(([a, b]) => nodes.find(n => n.id === (a === sel.id ? b : a))); return
{sel.label}
{sel.kind}
Linked nodes · {linked.length}
{linked.map((l, i) => )}
{sel.kind === "risk" &&
}
; })() :
Select a node to trace its relationships
}
)} {tab === "council" && }
); } Object.assign(window, { SkillTree, ActivityLog, Nexus, CouncilNexus, CommsScreen });