UX phase 1 — hierarchy & trust in the document view

[plosson]

Implements phase 1 of the UX rework (docs/plans/ux-rework/phase-1-hierarchy-and-trust.md). All client-side — no new routes or server APIs. Design tokens (CSS custom properties for ink / paper / accent / human / danger) now back every color.

What changed

Header (1.1) — three zones replace the row of seven identical pills:

• Breadcrumb <project> / <title>, where the title is derived live from the document's first heading (raw path moved to the tooltip), with a demoted connection dot (green/grey/red) instead of a chip.
• Overlapping presence avatar stack: round avatars for humans, squared accent-colored avatars for agents, owner/agent in the tooltip.
• Edit | Both | Read segmented mode toggle.
• A ⋯ menu holding ＋ comment, history, versions, rename, move, and a red delete.

View mode (1.1) — the URL hash now carries mode=edit|both|read, replacing the boolean preview=1 (no back-compat). Read mode renders the preview full-width with the editor hidden.

Prose ergonomics (1.2) — editor and preview cap at a 72ch centered column, prose renders in a proportional font (fenced code stays monospaced), markdown syntax marks are dimmed and headings enlarged via a CodeMirror HighlightStyle, and the line-number gutter is gone.

In-app dialogs & toasts (1.3) — new src/client/dialogs.ts (askText / askChoice / askConfirm / toast) replaces every native prompt/confirm/alert in src/client/ (verified by grep). Move-doc is now a clickable project picker; errors become error toasts, successes brief confirmations.

Project bar (1.4) — labeled ＋ new button plus a ⋯ project menu (rename / connect an agent / delete); the MCP dialog's clipped configure command line now wraps.

Empty states & login (1.5) — centered CTAs for an empty project (create a document / connect an agent) and an empty vault (create your first project); the login modal gained the wordmark and one line of product context and renders over the --paper background instead of the ghosted editor (#app is hidden until you join).

Trust fixes (1.6) — the project list refetches on window focus and after every own mutation; the versions dialog toasts on restore, refreshes the list, and disables save while a save is in flight.

Before / after

• Header — before: doc/path label, a "connected" chip, loose presence chips, and ＋ comment | preview | history | versions | rename | move | delete all as identical pills. After: main / Welcome to mdio breadcrumb + status dot, avatar stack, Edit|Both|Read, and a single ⋯ menu; destructive actions are red and one level down.
• Preview — before: a single preview toggle button (preview=1 in the hash). After: a three-way mode toggle with a full-width Read mode (mode= in the hash).
• CRUD — before: browser prompt()/confirm()/alert(). After: themed in-app dialogs and bottom-center toasts; move-doc is a project picker.
• Editor — before: full-width monospace with line numbers. After: 72ch proportional prose column, dimmed syntax, no gutter.
• Empty/first-run — before: dead editor chrome and a login box over a ghosted app. After: centered CTAs and a login modal with product context over a clean background.

Testing

bun test is green (156 tests across 9 files, including the Playwright e2e suite and the compiled-CLI suite). The e2e tests that drove CRUD through native page.on('dialog') handlers were rewritten to DOM interactions against the new dialogs, and the mode-toggle / ⋯-menu / avatar changes were threaded through the affected specs — all in this PR. Screenshots of the reworked header, dialogs, toasts, Read mode, empty states, and login were captured and reviewed.

Deliberately deferred to phase 2: sidebar doc-list first-heading titles (1.6, "optional") — it needs a GET /api/projects/:p/docs shape change to {path, title}, which phase 2's recents work needs anyway.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Gnrgu8jdLx12jkWY1B8vb3