Dialogue · Interactive Wireframes

Human + AI characters — interactive panel

Static wireframes for visual confirmation only — nothing is wired to a backend. A real person takes the floor and talks to three character personas — Li Ka-shing, Vladislav Doronin, and Shane Lauft — in a live group debate, all voiced by one model (the megaprompt engine). These two pages capture what the user sees and how the front and back ends fit together.

front end

Chat UI

The live discussion: a manageable cast roster (add / retire voices anytime), opening self-intros, a slide-out backstage-deliberation panel, one response per character, @-address, a per-turn token/cost meter, and a Send button that becomes ■ Stop. Roster, picker, @-chips, drawer, theme + Send/Stop are live.

open the mockup →
front ↔ back

Architecture

The topology — browser ↔ local SSE server ↔ one megaprompt context (the whole cast) ↔ the API ↔ the same artefacts the batch schemes emit — plus a step-by-step of one human turn: confer, then respond.

open the diagram →
how it works

Prompt caching

Why one model + a user in the loop still caches cheaply: the prefix rule, TTL, and the keep-confer vs drop-confer cases — colour-coded turn by turn.

open the explainer →

Design decisions locked in this session

engine
megaprompt only, for now — one model voices the whole cast. Most efficient, and the most flexible for changing format, cast size, or deliberation depth. (Python / isolation stays the batch thesis, deferred.)
the cast
starts as three — Li Ka-shing (investor), Vladislav Doronin (developer), Shane Lauft (realtor) — plus the human.
live cast
add or retire characters at any turn boundary. Add appends materials (a one-time cache write); retire is a parting line + a "stop voicing X" instruction (materials stay cached, dormant). Joiners are omniscient. Keep ≥1.
the human
a real user, not an actor — here a Shanghai buyer choosing among three properties (the exp-009A case). Strict in-world; identity undefined / adaptive.
opening
each character self-introduces briefly (own voice); the last invites the guest to say who they are and what they're deciding. No MC.
deliberation
before responding, the characters confer backstage — a flowing 3–4 exchange debate (no numbered rounds), shown in a slide-out side panel. No separate private <think>; the one model stages it all.
responses
one per character, relevance-led (the most-implicated leads); each follower answers the line actually delivered. Distinct, still disagreeing. @name → direct answer, confer skipped.
cost
each turn records its tokens + API cost — shown left of the floor marker, with a running session total in the sub-strip. Turn 1 is the dear cache-write; later turns are cheap cached reads.
controls
the Send button doubles as ■ Stop — while the panel is talking, pressing it interrupts and takes the floor back (replaces the separate "jump in").
artefacts
standard event-log.json + transcript.md on close (now with deliberation + per-turn cost events) → replays in the existing viewer, feeds the audit.
backend
local Python SSE server (not CF Pages); only the recorded session is published.

wireframe · 2026-05-30 · for design confirmation, not implementation