# Director Uplink — Transcript Overhaul Notes (Style A vs Style B) Mockup: `planning/mockups/chat-overhaul.html` (self-contained; open directly — all three panels render the SAME sample conversation through different renderers, so the comparison is exact). ## The shared cleanup (in BOTH styles) Today's transcript bounces the eye across three anchors: user lines are teal and **right-aligned** (`.msg-user` `text-align:right` + `margin-left:40px`), AI lines sit left but *italic* with tight leading and a right-side border + padding, and system lines are **centered italic** amber (`.msg-sys`). The mockup's TODAY panel reproduces this verbatim for reference. Both proposed styles replace it with one discipline: - **Everything left-anchored, full width** — no right-aligned user lines, no centered system lines, no side borders or margins eating 40–55px of a 412px screen. - **Hanging indent (14px)** — wrapped rows tuck under the first row's text start, so multi-line messages read as one tidy log entry. - **Voice is carried by color, weight, and size** (amber+glow = Overseer, phosphor green = user/terminal, dim small = system/machine log), not by alignment. - **AI italic dropped, leading opened up** — italic mono at 12.5px with `line-height:1.15` is the hardest-to-read text in the app today; upright at normal leading fixes it. - Tighter vertical rhythm (8px between lines) — noticeably more conversation per screen. Measured on the same 8-message sample at 412px: TODAY = 526px tall, Style A = 500px, Style B = 426px. ## Style A — CURRENT label treatment (source tag above the line) The shipped `.msg-tag--overseer` "OVERSEER" label on its own row above each AI line, transplanted into the clean layout — and, for symmetry, the user side gets a matching phosphor "TERMINAL" tag above its lines (user lines also keep the current `> ` chevron). Quick-logs keep the `[TERM]` text prefix; native tool lines keep `▸`. **Pros** - The tag row acts as a paragraph break — long AI narrative blocks get a clear visual "message start" without costing first-line width. - Message text starts flush at the line start (no prefix eating column width). - Familiar chat-app convention; least change from what shipped (the AI-side tag is already live). **Cons** - **Costs one extra row per labeled message** — for the same sample A is ~17% taller than B (500px vs 426px), and it gets worse the chattier the log gets. Pure vertical overhead on mobile. - User lines end up **double-marked** (TERMINAL tag *and* the `>` chevron). - The floating tag can orphan from its message when skimming fast — label and content are two rows competing with the 8px message gap. ## Style B — PROPOSED label treatment (inline callsign prefix) `OVERSEER: <message>` / `TERMINAL: <message>` on the same line, bold callsign, message text continues inline; wraps tuck under the hanging indent. Quick-log (`[TERM]`) and native-tool (`▸`) lines render **identically to Style A**, so the only variable between the two panels is label placement on the two voices. **Pros** - **Denser** — no label-only rows; every row carries content. ~15% shorter than A for the same conversation; best space usage at 412px. - **Diegetic** — reads as intercepted radio traffic / a monitored wire transcript, which is exactly the Director Uplink fiction (and matches the NV-machine mockup's voice). - Sender identity is read in the same saccade as the first words — no eye hop between a tag row and the message row. - Redundant with color (never color-alone, Protocol 17) and survives copy/paste of the log as plain text (`OVERSEER: …` still means something in an exported holotape). **Cons** - The callsign spends ~9–10 characters of every first line (~25% of a 412px row) — on long AI paragraphs the repeated `OVERSEER:` is slightly noisy. Mitigated by the hanging indent: only the FIRST row pays; wraps get full width. - Marginally less separation between consecutive messages than A's tag-row break provides. ## Recommendation: **Style B (inline callsign)** B wins on the owner's stated complaints — consistency, space usage, and tidiness — and lands the radio-log fiction better. The one real cost (the repeated bold `OVERSEER:`) is small at 12.5px and the first tuning knob is cheap: render the callsign at reduced opacity/weight so the eye skips it after the first read, without giving up the density. Style A's genuine advantage (a paragraph break for long AI messages) is largely recovered in B by the message gap + the color change between voices; if more is wanted, a slightly larger gap before each OVERSEER line (12px vs 8px) gives the break back for one CSS rule. ## Build contract (reskin only — Protocol 22) - Both styles are reskins of the existing **`appendToChat()`** pipeline — the label (tag or callsign) is **derived from the message's `sender`** at render time (`'user'` → TERMINAL, `'ai'` → OVERSEER, `'sys'` → system/log), display-only, never written into `text` or `chatHistory` — the same rule the shipped OVERSEER tag already follows, so history replays can never double a prefix. - B's callsign is a sibling span exactly like A's tag element — the typewriter's `.msg-content` scoping (which protects the label from being wiped) carries over unchanged. - The layout cleanup itself is CSS-only: `.msg-user` loses `text-align:right` + `margin-left:40px`, `.msg-sys` loses `text-align:center` + italic, `.msg-ai` loses italic/`line-height:1.15` and the right border. - Label strings should source from `GAME_DEFS[ctx].identity` via `getIdentity()` (Protocol 38) — OVERSEER/TERMINAL are the NV wording; colors ride the existing `--bezel-wire` / phosphor tokens (`[data-game]`-driven), so other games inherit their own wire color and persona wording with zero JS branches. ## Screenshots - `planning/mockups/chat-style-a-tag-412.png` — Style A at phone width (412px viewport) - `planning/mockups/chat-style-b-inline-412.png` — Style B at phone width (412px viewport) - `planning/mockups/chat-today-reference-412.png` — TODAY's shipped rendering, same conversation, for before/after context - `planning/mockups/chat-overhaul-desktop.png` — full page at 1280px: A and B side by side, TODAY reference below Rendered via Playwright; no horizontal overflow at 412px or 1280px. ## Questions for the owner 1. **Quick-log / tool lines:** the mockup keeps them as dim `[TERM]` / `▸` machine lines in both styles (they're hardware output, not a voice). If B wins, should they ALSO unify under the callsign grammar (`TERMINAL:` in the dim log style)? It's more consistent, but it blurs the line between what the *player said* and what the *machine logged* — the mockup deliberately keeps them distinct. 2. **The `>` chevron on user lines:** Style B replaces it with `TERMINAL:`; keep it as well (`TERMINAL: > copy…`), or drop it as shown? 3. **AI italic:** the cleanup drops the italic on Director lines for legibility — confirm (it's a look change independent of A-vs-B). 4. **Per-game callsigns:** confirm FO3's wording should come from its own `identity.overseer` block (e.g. a Vault-Tec persona) rather than reusing NV's OVERSEER/TERMINAL pair.