MC Chat-First Simplification Audit

Sprint: MC-3841 · Date: 2026-05-20 Reference: mc-chat-first-design.md, mc-chat-first-test-plan-v2.md, mc-ux-journey.html Benchmark: Claude Code mobile, Aion UI, Loveable, Replit AI Agent

5-line summary

MC's visual foundation is solid (dark theme, bubbles, thread rail, glass-box tool rows). Remaining gap vs best-of-breed AI chat: (1) ops-dashboard chrome bleeds into the chat surface (H1 header redundant above status bar, status bar has 13 elements that wrap on mobile, Settings sheet is 400 lines of old dashboard behind a gear); (2) composer chat bubbles use ghost-coloured fills — the correct blue-accent bubble already exists in ticket.html:61 but wasn't reused; (3) three mode-routing tabs expose internal orchestrator decisions the user shouldn't make; (4) workbench is a terminal emulator with zero DNA from the chat shell. Phase count: 8.

Top 3 simplifications: 1. Remove "Luci, do it now" + "Quick Ticket" mode buttons — orchestrator mc-action cards already own this routing. 2. Gut Settings sheet to Appearance + Persistent Luci card (currently 400 lines of dashboard crammed behind a gear). 3. Remove base.html H1 from the dashboard route — greeting already in the status bar.

1. Look-and-feel gaps (each with file:line)

1.1 Redundant H1 header — base.html:49-55 renders "Mission Control" above mc-status-bar greeting. Two title rows. Fix: empty {% block heading %} in dashboard.html.

1.2 Status bar: 13 elements, wraps to 3-4 rows on mobile — dashboard.html:22-37 / style.css:2222. Hide Health/Disk/task-fail/unattended pills on <768px; add flex-wrap:nowrap.

1.3 Chat bubble identity — composer (session_composer.html inline CSS 6-8) uses var(--surface2) ghost fill; the correct blue-accent style exists in ticket.html:61-62 but wasn't reused. Fix: .session-chat-user { background: var(--accent); color:#fff; border-bottom-right-radius:3px; }. Highest-impact visual change.

1.4 Composer monospace font — style.css:292. Override at style.css:1633 already corrects; consolidate to one source.

1.5 "+ New Session" composer header — always expanded on dashboard; non-functional. Fix: body[data-page="dashboard"] .session-composer-header { display:none; }.

1.6 Mode-routing tabs — session_composer.html:76-80 exposes internal codes (plan / implement_now / quick_ticket). Orchestrator mc-action cards already do this. Fix: hide non-plan modes on dashboard.

1.7 Icon inconsistency — dashboard.html:33-36 uses Unicode glyphs (☰ ⊞ ⚒ ⚙); nav uses SVG (nav.html:5-66). Replace with consistent SVG.

1.8 Quick-action chips — session_composer.html:125-131 Bug/Research/Refactor — dev-workflow specific, always-visible. Remove from dashboard.

1.9 Settings sheet is the old dashboard — dashboard.html:262-655 (~400 lines) includes Plan usage, profile selectors, Larry config, org chart, server health, data feeds, services, recent tickets, recent activity, system links, dispatch stats, skills stats, life manager. Target: Appearance + Persistent Luci card only.

1.10 Native browser dialogs — dashboard.html:1057/1071/1083 uses window.prompt/confirm for thread create/archive/rename. Replace with inline UX (auto-name from first message; swipe-archive; double-tap rename).

1.11 "View in console →" link — session_composer.html:123 leaks terminal nav into chat surface. Hide on dashboard.

2. Workbench-as-chat

Currently terminal-first (ticket_runtime_workbench.html): wb-rail (260px), wb-status-strip, runtime-feed-tools toolbar, dense 11px chat-activity-line rows. None share CSS with the chat shell.

Target: Default to chat mode — chat-bubble-agent bubbles wrapping la-group collapsible tool-call rows (CSS at style.css:1912-1966). [⌨ Raw] toggle falls back to existing terminal feed. Active session shown as 1-3 chip pills in workbench header. Persist mode via localStorage('wb-view-mode'). Non-destructive — Raw mode stays intact.

3. Dead-weight removal (ordered by ease)

3.1 REMOVE "Luci, do it now" button — dashboard only. 3.2 REMOVE "Quick Ticket" button — dashboard only. 3.3 REMOVE "+ New Session" composer header — dashboard only. 3.4 REMOVE composer hints row — placeholder text covers it. 3.5 REMOVE "View in console →" link — Settings has it. 3.6 REMOVE quick-action chips — dev-workflow specific. 3.7 REMOVE runtime picker in composer details — ops affordance. 3.8 GUT Settings sheet to Appearance + Persistent Luci card. Move ops content to /status + /settings routes. 3.9 REMOVE base H1 on dashboard — greeting in status bar. 3.10 Fix dev-leak strings (Ctrl+Enter on mobile, debug fallback message, runtime jargon copy).

4. Mobile-first reflow

4.1 Current keyboard bug: .mc-chat-shell { height: calc(100dvh - 240px) } is fragile + iOS keyboard does NOT shrink 100dvh. Chat log disappears behind keyboard.

4.2 Fix — visualViewport-aware:

@media (max-width: 768px) {
    body[data-page="dashboard"] .container {
        display: flex; flex-direction: column;
        min-height: calc(var(--vv-height, 100dvh) - var(--bottom-nav-height) - var(--safe-bottom));
        padding-bottom: 0;
    }
    body[data-page="dashboard"] .session-composer {
        position: sticky; bottom: 0; flex: 0 0 auto;
        background: var(--bg); z-index: 50;
    }
    body[data-page="dashboard"] .session-chat-log {
        flex: 1 1 auto; overflow-y: auto;
        overscroll-behavior: contain;
    }
}

if (window.visualViewport) {
    function syncVV() { document.documentElement.style.setProperty('--vv-height', window.visualViewport.height + 'px'); }
    window.visualViewport.addEventListener('resize', syncVV); syncVV();
}

4.3 Thread sheet last-item hidden — style.css:2451. Add padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 8px) to .mc-thread-sheet .mc-thread-list.

4.4 Status bar single-row on mobile — flex-wrap:nowrap + hide ops pills (see 1.2).

4.5 Bubble font 13→14px — Apple readability guideline.

5. Phased implementation (8 phases, smallest first)

Phase A — Header + status bar cleanup (CSS+1 template line, ~1h) Empty {% block heading %} in dashboard.html; mobile .mc-status-bar hides ops pills; SVG icons for 4 status buttons; hide .session-composer-header on dashboard.

Phase B — Composer dead-weight removal (CSS-only, ~30min) Hide mode buttons except plan on dashboard; hide hints row; hide #session-chat-console; hide quick-action chips; hide runtime picker row.

Phase C — Chat bubble unification (CSS + small JS, ~1h) .session-chat-user { background: var(--accent); color:#fff; }; remove monospace at style.css:292; bubble font 14px.

Phase D — Settings sheet gutting (HTML remove + stub routes, ~2h) Settings = Appearance + Persistent Luci card. Stub /status + /settings routes.

Phase E — Mobile keyboard-safe viewport (CSS + small JS, ~2h) Replace fixed-height with flex-fill + visualViewport listener; sticky composer; overscroll-contain.

Phase F — Thread UX inline (JS refactor, ~2h) Remove window.prompt/confirm; swipe-archive (reuse style.css:618-627); double-tap rename (contenteditable).

Phase G — Workbench chat shell (structural, ~4h) [Chat]/[Raw] toggle; .wb-chat-mode body class hides terminal chrome; render activity as chat-bubble-agent + la-group; persist mode.

Phase H — Workbench inline via side panel (additive, ~1h) /partials/workbench-panel route; mcSidePanel.defs.workbench switches iframe→htmx; mc-action open_workbench uses sidepanel on desktop.

File reference index

File	Phases
`mission-control/templates/dashboard.html`	A, D, E, F, H
`mission-control/templates/partials/session_composer.html`	A, B, C
`mission-control/templates/ticket_runtime_workbench.html`	G, H
`mission-control/templates/ticket.html`	C (reference)
`mission-control/templates/partials/nav.html`	A (reference)
`mission-control/templates/base.html`	A
`mission-control/static/style.css`	A, B, C, E, G

Phases A/B/C/E are CSS-only or near-CSS — lowest risk, highest impact, dispatch first.