/* ============================================================================
   DIVONCI WORLD — SCREENS: WAR ROOM · WORKRATE · MODULES · EVIDENCE · RISK
   ========================================================================== */

/* --------------------------------------------------------------- WAR ROOM */
function WarRoom({ nav }) {
  const [sel, setSel] = useState(DW.WARROOM[1].id);
  const thread = DW.WARROOM.find(w => w.id === sel);
  return (
    <div className="screen">
      <div className="screen-head">
        <div className="title"><span className="sub">Strategy · decisions</span>War Room</div>
        <div className="screen-actions">
          <span className="todochip"><Icon name="crown" style={{ width: 11, height: 11 }} />3 awaiting Diego</span>
          <button className="btn primary" onClick={() => nav("council")}>Convene Council</button>
        </div>
      </div>

      <div className="cols c-8-4">
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--s-6)" }}>
          {/* decision queue */}
          <Panel className="tight">
            <PHead icon="crown" eyebrow="Decisions awaiting Diego" title="Nothing deploys without command" />
            {DW.DECISIONS.map(d => (
              <div key={d.id} style={{ display: "flex", gap: 13, padding: "16px 18px", borderBottom: "1px solid var(--hairline)" }}>
                <Led state={d.state} size={9} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, color: "var(--ink)", lineHeight: 1.45 }}>{d.q}</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-4)", marginTop: 5, letterSpacing: "0.04em" }}>{d.from}{d.weight === "critical" && <span style={{ color: "var(--state-crisis)" }}> · CRITICAL</span>}</div>
                </div>
                <div style={{ display: "flex", gap: 8, alignSelf: "center" }}>
                  <button className="btn ghost" style={{ padding: "6px 12px" }}>Hold</button>
                  <button className="btn primary" style={{ padding: "6px 14px" }}>Approve</button>
                </div>
              </div>
            ))}
          </Panel>
          {/* strategic threads */}
          <Panel className="tight">
            <PHead icon="warroom" eyebrow="Strategic threads" right={<span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-4)" }}>{DW.WARROOM.length} active</span>} />
            <div className="cols c-2" style={{ gap: 0 }}>
              {DW.WARROOM.map((w, i) => {
                const a = DW.agent(w.owner), c = DW.STATE_META[w.state].c;
                return (
                  <div key={w.id} className="rowlink" onClick={() => setSel(w.id)} style={{ padding: 18, borderBottom: "1px solid var(--hairline)", borderRight: i % 2 === 0 ? "1px solid var(--hairline)" : "none", cursor: "pointer", background: sel === w.id ? "var(--panel-2)" : "transparent", borderLeft: sel === w.id ? `2px solid ${c}` : "2px solid transparent" }}>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 9 }}>
                      <span className="sbadge" style={{ color: c, fontSize: 9 }}>{w.horizon}</span>
                      <Led state={w.state} size={7} />
                    </div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 600, marginBottom: 6 }}>{w.title}</div>
                    <div style={{ display: "flex", alignItems: "center", gap: 7, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-3)" }}>
                      <span style={{ width: 7, height: 7, borderRadius: 99, background: a.ac, boxShadow: `0 0 6px ${a.ac}` }} />{a.name} · conf {w.confidence}%
                    </div>
                  </div>
                );
              })}
            </div>
          </Panel>
        </div>

        {/* thread inspector */}
        <Panel glow style={{ alignSelf: "flex-start", position: "sticky", top: 0 }}>
          <PHead icon="bolt" eyebrow="Thread detail" right={<Led state={thread.state} />} />
          <div className="pbody">
            <span className="sbadge" style={{ color: DW.STATE_META[thread.state].c, fontSize: 9 }}>{thread.horizon}</span>
            <h3 style={{ margin: "12px 0 8px", fontFamily: "var(--font-display)", fontSize: 19 }}>{thread.title}</h3>
            <p className="body" style={{ fontSize: 13 }}>{thread.note}</p>
            <div className="hr tight" />
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <Gauge p={thread.confidence} color={DW.STATE_META[thread.state].c} label={thread.confidence + "%"} unit="confidence" size={92} />
              <div>
                <div className="eyebrow">Owned by</div>
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 8 }}>
                  <Sigil a={DW.agent(thread.owner)} size={30} /><b style={{ fontSize: 14 }}>{DW.agent(thread.owner).name}</b>
                </div>
              </div>
            </div>
            <div className="hr tight" />
            <div className="eyebrow">Council read</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 10 }}>
              {DW.AGENTS.map(a => <div key={a.id} style={{ display: "flex", alignItems: "center", gap: 9 }}>
                <span style={{ width: 7, height: 7, borderRadius: 99, background: a.ac, boxShadow: `0 0 6px ${a.ac}`, flex: "none" }} />
                <span style={{ flex: 1, fontSize: 12.5 }}>{a.name}</span><StateChip state={a.state} label={a.stateLabel} />
              </div>)}
            </div>
          </div>
        </Panel>
      </div>
    </div>
  );
}

/* ----------------------------------------------------- PROJECT DEBRIEF -- */
function ProjectDetail({ id, nav }) {
  const p = DW.PROJECTS.find(x => x.id === id) || DW.PROJECTS[0];
  const owner = DW.agent(p.owner), c = DW.STATE_META[p.state].c;
  const [status, setStatus] = useState(p.status);
  const [pauseLabel, setPauseLabel] = useState(p.status === "paused" ? "held · awaiting clearance" : "");
  const [limit, setLimit] = useState(p.tokens.limit);
  const [todo, setTodo] = useState(p.todo);
  const [agents, setAgents] = useState(p.agents);
  const [steerLog, setSteerLog] = useState([]);
  const [files, setFiles] = useState([{ n: "brief.md", k: "doc" }, { n: "spec_v2.pdf", k: "pdf" }]);
  const [draft, setDraft] = useState("");
  const [mode, setMode] = useState("steer");

  const spentPct = Math.min(100, Math.round(p.tokens.spent / limit * 100));
  const overBudget = p.tokens.spent > limit;
  const stamp = () => { const t = new Date(); return `${String(t.getHours()).padStart(2,"0")}:${String(t.getMinutes()).padStart(2,"0")}`; };

  function pauseFor(label) { setStatus("paused"); setPauseLabel(label); }
  function resume() { setStatus("running"); setPauseLabel(""); }
  function send() {
    const v = draft.trim(); if (!v) return;
    if (mode === "queue") { setTodo(t => [...t, v]); setSteerLog(l => [{ t: stamp(), kind: "queued", msg: v }, ...l]); }
    else setSteerLog(l => [{ t: stamp(), kind: "steer", msg: v }, ...l]);
    setDraft("");
  }
  function removeAgent(aid) { setAgents(a => a.filter(x => x !== aid)); }
  function assign(aid) { setAgents(a => a.includes(aid) ? a : [...a, aid]); }
  function addFile() { const names = ["asset_pack.zip","notes.md","render_03.png","data.csv","mock_v4.fig"]; setFiles(f => [...f, { n: names[f.length % names.length], k: "file" }]); }

  const Stat = ({ k, v, color }) => (
    <div style={{ flex: 1 }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-4)" }}>{k}</div>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 20, fontWeight: 600, marginTop: 3, color: color || "var(--ink)" }}>{v}</div>
    </div>
  );

  return (
    <div className="screen">
      <div className="screen-head">
        <div className="title"><span className="sub">Project · debrief</span>{p.name}</div>
        <div className="screen-actions">
          <button className="btn ghost" onClick={() => nav("projects")}>← Projects</button>
          <button className="btn ghost" onClick={() => nav(p.owner)}>Owner · {owner.name}</button>
          <StateChip state={p.state} label={p.stage} />
        </div>
      </div>

      {/* MASTER CONTROL BAR */}
      <Panel style={{ "--ac": owner.ac, marginBottom: "var(--s-6)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 18, padding: "16px 18px", flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 190 }}>
            <span className={status === "running" ? "pulse" : ""} style={{ width: 11, height: 11, borderRadius: 99, background: status === "running" ? "var(--state-clear)" : "var(--state-caution)", boxShadow: `0 0 10px ${status === "running" ? "var(--state-clear)" : "var(--state-caution)"}` }} />
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15, textTransform: "capitalize" }}>{status}</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--ink-4)" }}>{pauseLabel || "executing normally"}</div>
            </div>
          </div>
          <div style={{ display: "flex", gap: 7, flexWrap: "wrap" }}>
            {status === "running"
              ? <button className="btn" onClick={() => pauseFor("paused · indefinite")}><Icon name="pause" style={{ width: 12, height: 12, marginRight: 6, verticalAlign: "-2px" }} />Pause</button>
              : <button className="btn primary" onClick={resume}><Icon name="play" style={{ width: 12, height: 12, marginRight: 6, verticalAlign: "-2px" }} />Resume</button>}
            <button className="btn ghost" onClick={() => pauseFor("resumes in ~15m")}>15m</button>
            <button className="btn ghost" onClick={() => pauseFor("resumes in ~1h")}>1h</button>
            <button className="btn ghost" onClick={() => pauseFor("resumes in ~4h")}>4h</button>
          </div>
          <div style={{ flex: 1 }} />
          <div style={{ display: "flex", gap: 22, minWidth: 280 }}>
            <Stat k="Progress" v={p.progress + "%"} color={c} />
            <Stat k="Tasks" v={`${p.tasksDone}/${p.tasksTotal}`} />
            <Stat k="Tokens" v={DW.fmtTok(p.tokens.spent)} color={overBudget ? "var(--state-crisis)" : "var(--ink)"} />
            <Stat k="Team" v={agents.length} />
          </div>
        </div>
        <div className="riskbar" style={{ height: 5, borderRadius: 0 }}><i style={{ width: `${p.progress}%`, background: c }} /></div>
      </Panel>

      <div className="cols c-8-4">
        {/* LEFT */}
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--s-6)" }}>
          {/* progress + tasks */}
          <Panel className="tight">
            <PHead icon="workrate" eyebrow="Progress" title={p.name} right={<span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: c }}>{p.progress}% complete</span>} />
            <div className="pbody">
              <p className="body" style={{ fontSize: 13, marginTop: 0 }}>{p.summary}</p>
              <div className="riskbar" style={{ height: 8, marginTop: 12 }}><i style={{ width: `${p.progress}%`, background: c }} /></div>
              <div className="cols c-2" style={{ marginTop: 18, gap: 18 }}>
                <div>
                  <div className="eyebrow" style={{ color: "var(--state-clear)" }}><Icon name="check" style={{ width: 12, height: 12 }} />Completed · {p.tasksDone}</div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 10 }}>
                    {p.done.map((d, i) => <div key={i} style={{ display: "flex", gap: 8, fontSize: 12.5, color: "var(--ink-2)", alignItems: "center" }}><Icon name="check" style={{ width: 13, height: 13, color: "var(--state-clear)", flex: "none" }} />{d}</div>)}
                  </div>
                </div>
                <div>
                  <div className="eyebrow"><Icon name="workrate" style={{ width: 12, height: 12 }} />Remaining · {todo.length}</div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 10 }}>
                    {todo.map((d, i) => <div key={i} style={{ display: "flex", gap: 8, fontSize: 12.5, color: "var(--ink)", alignItems: "center" }}><span style={{ width: 13, height: 13, borderRadius: 4, border: "1.5px solid var(--ink-4)", flex: "none" }} />{d}</div>)}
                  </div>
                </div>
              </div>
            </div>
          </Panel>

          {/* steer / queue */}
          <Panel className="tight">
            <PHead icon="comms" eyebrow="Steer &amp; queue" title="Direct the project" right={
              <div className="seg" style={{ margin: 0 }}>
                <button className={mode === "steer" ? "on" : ""} onClick={() => setMode("steer")}>Steer</button>
                <button className={mode === "queue" ? "on" : ""} onClick={() => setMode("queue")}>Queue task</button>
              </div>} />
            <div className="pbody">
              <div style={{ display: "flex", gap: 9 }}>
                <input value={draft} onChange={e => setDraft(e.target.value)} onKeyDown={e => { if (e.key === "Enter") send(); }}
                  placeholder={mode === "steer" ? "Steer the agents mid-flight…" : "Queue a new task for the project…"}
                  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" }} />
                <button className="btn primary" onClick={send} style={{ padding: "10px 18px" }}>{mode === "steer" ? "Send" : "Queue"}</button>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 14 }}>
                {steerLog.length === 0 && <div className="note">No steering yet — messages and queued tasks land here.</div>}
                {steerLog.map((s, i) => (
                  <div key={i} style={{ display: "flex", gap: 10, padding: "9px 11px", borderRadius: 8, background: "var(--panel-2)", border: "1px solid var(--hairline)" }}>
                    <span className="sbadge" style={{ color: s.kind === "queued" ? "var(--state-active)" : "var(--violet-ink)", fontSize: 8.5, flex: "none" }}>{s.kind}</span>
                    <span style={{ flex: 1, fontSize: 12.5 }}>{s.msg}</span>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--ink-4)" }}>{s.t}</span>
                  </div>
                ))}
              </div>
            </div>
          </Panel>

          {/* files */}
          <Panel className="tight">
            <PHead icon="evidence" eyebrow="Files" title={`${files.length} attached`} right={<button className="minilink" onClick={addFile}>+ add file</button>} />
            <div className="pbody" style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {files.map((f, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 11px", borderRadius: 8, background: "var(--panel-2)", border: "1px solid var(--hairline)" }}>
                  <Icon name="evidence" style={{ width: 14, height: 14, color: owner.ac }} /><span style={{ fontSize: 12.5 }}>{f.n}</span>
                </div>
              ))}
            </div>
          </Panel>
        </div>

        {/* RIGHT */}
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--s-6)" }}>
          {/* tokens */}
          <Panel glow>
            <PHead icon="finance" eyebrow="Token budget" right={overBudget ? <StateChip state="crisis" label="Over" /> : <StateChip state={spentPct > 85 ? "caution" : "clear"} label={spentPct + "%"} />} />
            <div className="pbody">
              <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 26, fontWeight: 600, color: overBudget ? "var(--state-crisis)" : "var(--ink)" }}>{DW.fmtTok(p.tokens.spent)}</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)" }}>/ {DW.fmtTok(limit)} limit</span>
              </div>
              <div className="riskbar" style={{ height: 8, marginTop: 10 }}><i style={{ width: `${spentPct}%`, background: overBudget ? "var(--state-crisis)" : spentPct > 85 ? "var(--state-caution)" : "var(--state-clear)" }} /></div>
              <div className="eyebrow" style={{ marginTop: 16 }}>Adjust limit</div>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 8 }}>
                <button className="btn ghost" onClick={() => setLimit(l => Math.max(250000, l - 250000))} style={{ padding: "6px 14px", fontSize: 16 }}>−</button>
                <div style={{ flex: 1, textAlign: "center", fontFamily: "var(--font-mono)", fontSize: 15, fontWeight: 600 }}>{DW.fmtTok(limit)}</div>
                <button className="btn ghost" onClick={() => setLimit(l => l + 250000)} style={{ padding: "6px 14px", fontSize: 16 }}>+</button>
              </div>
              <div className="note" style={{ marginTop: 8 }}>Steps of 250k · hard cap halts the project at limit.</div>
            </div>
          </Panel>

          {/* team + roles */}
          <Panel className="tight">
            <PHead icon="council" eyebrow="Team &amp; roles" title={`${agents.length} of ${p.roles.length} seats`} />
            <div className="pbody" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {p.roles.map((r, i) => {
                const filled = agents.includes(r.agent), a = DW.agent(r.agent);
                return filled ? (
                  <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 11px", borderRadius: 9, background: "var(--panel-2)", border: "1px solid var(--hairline)" }}>
                    <Sigil a={a} size={34} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 600 }}>{a.name}</div>
                      <div style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em" }}>{r.kind}</div>
                    </div>
                    <button className="iconbtn" title={"Remove " + a.name} onClick={() => removeAgent(r.agent)} style={{ width: 26, height: 26 }}><Icon name="check" style={{ width: 13, height: 13 }} /></button>
                  </div>
                ) : (
                  <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 11px", borderRadius: 9, background: "color-mix(in srgb, var(--state-caution) 8%, var(--panel-2))", border: "1px dashed color-mix(in srgb, var(--state-caution) 45%, transparent)" }}>
                    <div style={{ width: 34, height: 34, borderRadius: 10, border: "1px dashed var(--ink-4)", display: "grid", placeItems: "center", flex: "none" }}><Icon name="plus" style={{ width: 15, height: 15, color: "var(--state-caution)" }} /></div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 600, color: "var(--state-caution)" }}>Seat open</div>
                      <div style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em" }}>needs a {r.kind}</div>
                    </div>
                    <button className="btn ghost" style={{ padding: "6px 12px" }} onClick={() => assign(r.agent)}>Fill</button>
                  </div>
                );
              })}
              <div className="note" style={{ marginTop: 4 }}>Remove a seat and the role opens — fill it with the right archetype.</div>
            </div>
          </Panel>
        </div>
      </div>
    </div>
  );
}

/* --------------------------------------------------------------- WORKRATE */
function WorkRate({ nav }) {
  const laneState = { Queued: "standby", Running: "active", Verifying: "focus", Blocked: "caution", Done: "clear" };
  return (
    <div className="screen">
      <div className="screen-head">
        <div className="title"><span className="sub">Execution · throughput</span>WorkRate</div>
        <div className="meta">Every unit of work the Council is executing, by lane. VV owns deploy; BroDex gates verify; nothing crosses to Done without clearing both.</div>
      </div>

      <div className="cols c-4" style={{ marginBottom: "var(--s-6)" }}>
        <Panel><div className="mtile"><div className="k"><Icon name="workrate" style={{ width: 12, height: 12 }} />Throughput · 24h</div><div className="v">+12<small>%</small></div><div style={{ marginTop: 8 }}><Sparkline data={[4,5,5,6,6,7,8]} color="var(--state-clear)" h={32} /></div></div></Panel>
        <Panel><div className="mtile"><div className="k">In flight</div><div className="v" style={{ color: "var(--state-active)" }}>3</div><div className="d">across Running</div></div></Panel>
        <Panel><div className="mtile"><div className="k">Blocked</div><div className="v" style={{ color: "var(--state-caution)" }}>1</div><div className="d">deploy #A7F2</div></div></Panel>
        <Panel><div className="mtile"><div className="k">Cycle time</div><div className="v">TODO</div><div className="d"><span className="todochip" style={{ fontSize: 9 }}>needs metric</span></div></div></Panel>
      </div>

      <div className="cols" style={{ gridTemplateColumns: "repeat(5, 1fr)" }}>
        {DW.WORKRATE.map(lane => (
          <Panel key={lane.lane} className="tight" style={{ alignSelf: "flex-start" }}>
            <div className="phead" style={{ padding: "12px 14px" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 7 }}><Led state={laneState[lane.lane]} size={7} /><span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--ink-2)" }}>{lane.lane}</span></div>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-4)" }}>{lane.items.length}</span>
            </div>
            <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 8 }}>
              {lane.items.map((it, i) => {
                const a = DW.agent(it.agent);
                return <div key={i} className="rowlink" style={{ padding: 11, borderRadius: 8, background: "var(--panel-2)", border: "1px solid var(--hairline)", cursor: "pointer", borderLeft: `2px solid ${a.ac}` }} onClick={() => nav(it.agent === "viiera" ? "viiera" : it.agent === "vv" ? "vv" : "profile:" + it.agent)}>
                  <div style={{ fontSize: 12.5, color: "var(--ink)", lineHeight: 1.4, marginBottom: 8 }}>{it.n}</div>
                  <div style={{ display: "flex", alignItems: "center", gap: 6, fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--ink-3)" }}>
                    <span style={{ width: 6, height: 6, borderRadius: 99, background: a.ac, boxShadow: `0 0 6px ${a.ac}` }} />{a.name}
                  </div>
                </div>;
              })}
              {lane.items.length === 0 && <div className="note" style={{ textAlign: "center", padding: 16 }}>empty</div>}
            </div>
          </Panel>
        ))}
      </div>
    </div>
  );
}

/* ----------------------------------------------------------- MODULE PAGES */
const MODULES = {
  foundry: { icon: "foundry", title: "Foundry", sub: "Build module", color: "var(--state-focus)", progress: 64,
    desc: "Where ideas become buildable artifacts. Nova's sparks land here, get scoped, and pass to VV for execution.",
    stat: [["intake", "9"], ["scoped", "4"], ["passed to VV", "2"]],
    feed: ["Drone relay concept · scoping", "Studio v2 components · building", "Council doctrine · drafting"] },
  studio: { icon: "studio", title: "Viiera Studio", sub: "Creative module", color: "var(--magenta)", progress: 78,
    desc: "The render and creative surface. Generates key art, character renders, and visual assets for the empire.",
    stat: [["renders / 7d", "37"], ["in queue", "5"], ["GPU headroom", "62%"]],
    feed: ["Viiera key art v3 · rendering", "VV mask studies · queued", "Empire map textures · done"] },
};
function ModulePage({ id, nav }) {
  const m = MODULES[id];
  return (
    <div className="screen">
      <div className="screen-head">
        <div className="title"><span className="sub">{m.sub}</span>{m.title}</div>
        <div className="screen-actions"><span className="todochip">module preview · TODO depth</span><button className="btn primary">Open module →</button></div>
      </div>
      <div className="cols c-12-4">
        <Panel className="tight" style={{ overflow: "hidden" }}>
          <PHead icon={m.icon} eyebrow={m.sub} title={m.title} right={<div style={{ display: "flex", alignItems: "center", gap: 12 }}><span style={{ fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, color: m.color }}>{m.progress}%</span><StateChip state="active" label="Online" /></div>} />
          {/* hero render slot */}
          <div className="slot" style={{ border: "none", borderRadius: 0, height: 300, background: `radial-gradient(60% 80% at 50% 30%, color-mix(in srgb, ${m.color} 14%, transparent), transparent), var(--graphite)` }}>
            <div className="tag"><Icon name={m.icon} style={{ width: 34, height: 34, color: m.color, margin: "0 auto 10px" }} /><small>{m.title} canvas / preview<br /><span style={{ color: m.color }}>drop module render here</span></small></div>
          </div>
          <div style={{ padding: "14px 16px", borderTop: "1px solid var(--hairline)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
              <span className="eyebrow" style={{ margin: 0 }}>Module progress</span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>{m.progress}% complete</span>
            </div>
            <div className="riskbar" style={{ height: 8 }}><i style={{ width: `${m.progress}%`, background: m.color }} /></div>
          </div>
          <div className="cols c-3" style={{ gap: 0 }}>
            {m.stat.map(([k, v], i) => <div key={i} className="mtile" style={{ borderRight: i < 2 ? "1px solid var(--hairline)" : "none", borderTop: "1px solid var(--hairline)" }}><div className="k">{k}</div><div className="v" style={{ fontSize: 22 }}>{v}</div></div>)}
          </div>
        </Panel>
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--s-6)" }}>
          <Panel>
            <PHead icon="workrate" eyebrow="Module feed" />
            <div className="pbody" style={{ display: "flex", flexDirection: "column", gap: 9 }}>
              {m.feed.map((f, i) => <div key={i} style={{ display: "flex", alignItems: "center", gap: 9, padding: "9px 11px", borderRadius: 7, background: "var(--panel-2)", border: "1px solid var(--hairline)" }}>
                <span style={{ width: 7, height: 7, borderRadius: 99, background: m.color, boxShadow: `0 0 6px ${m.color}`, flex: "none" }} /><span style={{ fontSize: 12.5 }}>{f}</span>
              </div>)}
            </div>
          </Panel>
          <Panel>
            <PHead icon="nexus" eyebrow="Other modules" />
            <div className="pbody" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {Object.entries(MODULES).filter(([k]) => k !== id).map(([k, mm]) => <button key={k} className="rowlink focusable" onClick={() => nav(k)} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", borderRadius: 8, background: "var(--panel-2)", border: "1px solid var(--hairline)", cursor: "pointer", textAlign: "left" }}>
                <Icon name={mm.icon} style={{ width: 16, height: 16, color: mm.color }} /><span style={{ flex: 1, fontSize: 13 }}>{mm.title}</span><Icon name="chevron" style={{ width: 14, height: 14, color: "var(--ink-4)" }} />
              </button>)}
              <div className="note" style={{ marginTop: 4 }}>Nexus · WorkRate · Evidence are full screens in the rail.</div>
            </div>
          </Panel>
        </div>
      </div>
    </div>
  );
}

/* --------------------------------------------------------------- EVIDENCE */
function Evidence({ nav }) {
  return (
    <div className="screen">
      <div className="screen-head">
        <div className="title"><span className="sub">BroDex · verification</span>Evidence Console</div>
        <div className="meta">Every claim that touches a deploy is checked. BroDex may summon a second reasoning agent to argue both sides before a verdict is written.</div>
      </div>

      <div className="cols c-12-4">
        <Panel className="tight">
          <PHead icon="evidence" eyebrow="Evidence ledger · deploy #A7F2" right={<button className="minilink" onClick={() => nav("risk")}>risk console →</button>} />
          <div>
            {DW.EVIDENCE.map((e, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "12px 1fr 120px", gap: 14, alignItems: "center", padding: "15px 18px", borderBottom: "1px solid var(--hairline)" }}>
                <Led state={e.state} />
                <span style={{ fontSize: 13.5, color: "var(--ink)" }}>{e.claim}</span>
                <span style={{ textAlign: "right" }}><span className="sbadge" style={{ color: DW.STATE_META[e.state].c }}>{e.label}</span></span>
              </div>
            ))}
          </div>
        </Panel>
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--s-6)" }}>
          <Panel glow>
            <PHead icon="eye" eyebrow="Dual reasoning" right={<Led state="focus" />} />
            <div className="pbody">
              <p className="body" style={{ fontSize: 13 }}>A second reasoning agent is arguing both sides of <b style={{ color: "var(--ink)" }}>deploy #A7F2</b>.</p>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 14 }}>
                <div style={{ padding: 12, borderRadius: 8, background: "color-mix(in srgb, var(--state-clear) 10%, var(--panel-2))", border: "1px solid color-mix(in srgb, var(--state-clear) 30%, transparent)" }}>
                  <div className="eyebrow" style={{ color: "var(--state-clear)" }}>For</div>
                  <p style={{ fontSize: 12, color: "var(--ink-2)", margin: "6px 0 0", lineHeight: 1.5 }}>SBOM clean, license compatible, render farm has headroom.</p>
                </div>
                <div style={{ padding: 12, borderRadius: 8, background: "color-mix(in srgb, var(--state-crisis) 10%, var(--panel-2))", border: "1px solid color-mix(in srgb, var(--state-crisis) 30%, transparent)" }}>
                  <div className="eyebrow" style={{ color: "var(--state-crisis)" }}>Against</div>
                  <p style={{ fontSize: 12, color: "var(--ink-2)", margin: "6px 0 0", lineHeight: 1.5 }}>One dependency of unverified origin. Maintainer dormant 9mo.</p>
                </div>
              </div>
              <div style={{ marginTop: 14, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span className="todochip">verdict pending</span>
                <button className="btn danger" onClick={() => nav("risk")}>Escalate →</button>
              </div>
            </div>
          </Panel>
          <Panel>
            <PHead icon="evidence" eyebrow="Verdict tally" />
            <div className="pbody" style={{ display: "flex", gap: 7, flexWrap: "wrap" }}>
              <StateChip state="clear" label="2 confirmed" /><StateChip state="caution" label="1 warning" /><StateChip state="crisis" label="1 failed" /><StateChip state="standby" label="1 stale" />
            </div>
          </Panel>
        </div>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------- RISK */
function RiskConsole({ nav }) {
  const [sel, setSel] = useState(DW.RISKS[0].id);
  const r = DW.RISKS.find(x => x.id === sel);
  return (
    <div className="screen">
      <div className="screen-head">
        <div className="title"><span className="sub">Threat · risk</span>Risk Console</div>
        <div className="meta">Scored risk records across the empire. The highest band drives the World Map crisis indicator and gates the deploy queue.</div>
      </div>
      <div className="cols c-8-4">
        <Panel className="tight">
          <PHead icon="risk" eyebrow="Risk register" right={<span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-4)" }}>{DW.RISKS.length} records</span>} />
          <div style={{ display: "grid", gridTemplateColumns: "12px 1fr 70px 90px 110px", gap: 14, padding: "10px 18px", borderBottom: "1px solid var(--hairline-2)", fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-4)" }}>
            <span></span><span>Record</span><span>Score</span><span>Band</span><span>Owner</span>
          </div>
          {DW.RISKS.map(rk => (
            <div key={rk.id} className="rowlink" onClick={() => setSel(rk.id)} style={{ display: "grid", gridTemplateColumns: "12px 1fr 70px 90px 110px", gap: 14, alignItems: "center", padding: "14px 18px", borderBottom: "1px solid var(--hairline)", cursor: "pointer", background: sel === rk.id ? "var(--panel-2)" : "transparent", borderLeft: sel === rk.id ? `2px solid ${DW.STATE_META[rk.state].c}` : "2px solid transparent" }}>
              <Led state={rk.state} />
              <span style={{ fontSize: 13, color: "var(--ink)" }}>{rk.name}</span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 15, fontWeight: 600, color: DW.STATE_META[rk.state].c }}>{rk.score}</span>
              <span><span className="sbadge" style={{ color: DW.STATE_META[rk.state].c, fontSize: 9 }}>{rk.band}</span></span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>{rk.owner}</span>
            </div>
          ))}
        </Panel>
        <Panel glow style={{ alignSelf: "flex-start" }}>
          <PHead icon="risk" eyebrow="Record detail" right={<Led state={r.state} />} />
          <div className="pbody" style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
            <Gauge p={r.score * 10} color={DW.STATE_META[r.state].c} label={r.score.toFixed(1)} unit={`${r.band} band`} size={120} />
            <h3 style={{ margin: "14px 0 6px", fontFamily: "var(--font-display)", fontSize: 17, textAlign: "center" }}>{r.name}</h3>
            <div style={{ display: "flex", gap: 8 }}><StateChip state={r.state} /><span className="evchip">owner · {r.owner}</span></div>
            <div className="hr tight" style={{ width: "100%" }} />
            <div style={{ width: "100%" }}>
              <div className="eyebrow">Mitigation</div>
              <p className="body" style={{ fontSize: 12.5, marginTop: 8 }}>{r.band === "HIGH" ? "Hold deploy. Verify dependency origin via BroDex before any clearance. Escalated to Diego." : r.band === "MED" ? "Monitor. Re-route comms load off the degraded south relay." : "Accept · watch. No action required this cycle."}</p>
              <div style={{ marginTop: 12, display: "flex", gap: 8 }}>
                <button className="btn ghost" style={{ flex: 1 }} onClick={() => nav("evidence")}>Evidence</button>
                {r.band === "HIGH" && <button className="btn danger" style={{ flex: 1 }} onClick={() => nav("warroom")}>War Room</button>}
              </div>
            </div>
          </div>
        </Panel>
      </div>
    </div>
  );
}

Object.assign(window, { WarRoom, WorkRate, ModulePage, Evidence, RiskConsole, MODULES, ProjectDetail });