Nico's Catalogue is functionally proven end-to-end — authoring, preview, evidence, lifecycle and provisioning all work. The look is the gap: the two conversational surfaces (agent authoring and preview) render as raw forms, and operator plumbing competes with content at equal weight. This redesign keeps every field and flow, and re-expresses the surface in EmuBrain's own cockpit language — using the real .cockpit-v2 tokens, no new palette invented.
Prompt textarea + a full-size readonly x-request-id input + a "turns" list styled as an evidence log (role pill + gray <small>). It reads as a debug form, not a conversation.<small> under a request-id.x-request-id, session id, payloadSha256 digest, "Stable retry body" — are first-class labeled inputs at the same weight as the prompt.font-weight:850 — the eye can't find the primary action; labels shout in uppercase-900.The surface is really a two-step workflow. Group the panels into a labelled Authoring studio (converse ⇄ living draft) and a Readiness rail (preview · lifecycle · evidence · provision), with a step marker on each. Instantly legible instead of six equal boxes.
Speaker-aligned bubbles — operator right (accent), agent left with a glyph + name. A proper composer (auto-grow textarea + a round accent send button) anchored at the bottom. The agent's authoring turns carry a small "✓ updated · Instructions, Invariants" chip so you see what the conversation changed in the draft.
Request IDs, session id, digest and expiry drop to a single --mono metadata strip in --tx2 beneath each chat — visible for operators, no longer competing. "New request ID / New session" become quiet text links, not buttons.
The blueprint form sits beside the authoring chat as the artifact it produces, organised into collapsible sections — Identity · Instructions · Runtime · Child safety · Tavus · Tools — the ones you touch open, the rest one click away. Chat and draft now read as one authoring surface.
One solid-accent primary per zone (Save version, Send, Submit for review); everything else a ghost button. Evidence becomes a pass/fail gate checklist so readiness reads at a glance. Eyebrows drop from 900/uppercase to a calmer 700 / .09em.
Minimal-diff by design: no data flow, no API, no state changes — only markup structure in two components + one additive CSS block. All new classes are namespaced .cat-* and live alongside the existing .catalogue-*. Full class set is in catalogue.css (PART B) and NICO_HANDOFF.md.
| File | Change |
|---|---|
| CockpitCataloguePage.tsx AuthoringChatPanel | Wrap the turns list as .cat-chat-log with .cat-msg.me/.agent bubbles; move the prompt <textarea> into a .cat-composer with a round .cat-send; collapse the x-request-id label into a .cat-meta-strip. Same handlers (submitAuthorPrompt, createProvisionRequestId). |
| CockpitCataloguePage.tsx PreviewPanel | Same chat treatment for previewTurns (render text as .me, reply as .agent); runtime readback → .cat-readback chips; session/digest/expiry → one .cat-meta-strip. "New session / Replay" move to the head as .cat-btn.ghost.sm. |
| CockpitCataloguePage.tsx work-grid layout | Replace the flat .catalogue-work-grid with two zones: .cat-studio (BlueprintAuthorForm as the sectioned .cat-draft + AuthoringChatPanel) and .cat-rail (Preview · lifecycle · Evidence · Provision). BlueprintAuthorForm's .catalogue-form-grid becomes <details.cat-section> groups — same inputs, same set(). |
| cockpit.css | Append the .cat-* block (≈180 lines, additive — nothing removed). Existing .catalogue-* rules stay for anything not yet migrated. |
Suggested order: (1) drop in the CSS, (2) convert the two chat panels — that alone clears Khoa's "ugly" call, (3) the studio/rail regrouping + sectioned form as a follow-up. I'll pair with you on the exact JSX for the two panels whenever you pick it up.
Keystack Catalogue chat-authoring + preview redesign · Sana → Lena / Nico · 2026-07-23 · design-only mocks, Nico implements on PR #8.
Grounded in origin/nico/keystack-catalogue-authoring-preview (CockpitCataloguePage.tsx) + the live .cockpit-v2 tokens. No product code touched. The redesign's chats are clickable — type in either composer.