fix(workspace): tables, headings and lists in agent replies get a typographic treatment (#2616)

[obasilakis]

Closes #2616

What was wrong

components/portal/PortalMarkdown.vue styled exactly four things — paragraphs, unordered lists, links, and code (#2515). Tailwind's preflight resets everything else, so every other element an agent can write arrived with the browser reset and nothing else: a GFM table with no rules, no padding and no header separation; headings at body weight and size; ordered lists with their numbers gone. The transcript was the one markdown surface in the app with no typographic treatment, and the table was simply where it showed worst.

What changed

All of it lands in PortalMarkdown.vue, the single mount point that already owns render + style + copy as one unit — so the bubble, the room and any future surface inherit one look instead of a second sheet being copied out.

• Tables get the platform's own anatomy (mono-caps header on chrome, 6/12 cell padding, a rule per row), as an object one step off the bubble tint — the same shape a code block already has, not a third look. The scroll-viewport pair is lifted from CanvasKit.vue (abilityai/trinity-enterprise#537 / bug(canvas): every block layout an agent can produce renders unbroken in the workspace column — gallery test + fixes #2583): display: block makes the table its own horizontal viewport so a ten-column table scrolls instead of widening the bubble, and overflow-wrap: normal in the cells stops an inherited "break anywhere" squeezing an auto-layout table to one character per line. width: fit-content keeps a two-column table from drawing its border around an acre of nothing.
• Numeric columns align right with tabular-nums. GFM alignment survives sanitising as the align attribute, but a presentational hint loses to author CSS, so the right/center cases are restated explicitly.
• Headings get a bounded ladder: # Title names a section of the reply, not the page, so it tops out at the design system's section size (18/650) and lands on the meta overline by h3 — three visibly distinct steps, all inside the six-size scale.
• Ordered lists, list items, nested lists, blockquotes and horizontal rules. The blockquote takes ck-callout's 3px left rule, so a quoted line reads the same whether the agent wrote it into a message or onto a canvas.

Kept the hand-rolled sheet rather than adopting prose prose-sm dark:prose-invert: the plugin would have had to be un-styled back off pre, code and the heading scale to preserve #2515 and keep an # h1 out of page-title size, which is a larger and riskier diff than covering the missing element set directly. The issue names either as acceptable.

Not touched

The sanitiser. This is CSS on platform-owned selectors — no new admitted tags, attributes, classes or inline styles. Code blocks keep their #2515 behaviour: labelled bar, always-visible Copy, wrap-at-the-edge pre.

One assertion narrowed, not deleted

portalAgentBubble.spec.js asserted the stylesheet contained no overflow-x at all. The claim #2515 actually makes is about the pre — a scroller inside a chat bubble hides the end of a line behind a gesture nobody makes — written as a claim about the whole sheet. A table must scroll in its own viewport (AC #2 here), so the assertion now looks at the pre rule it was always about.

Verification

• tests/unit/portalMarkdownTypography.spec.js — 12 new cases: what the configured marked emits (table with align attributes, ordered + nested lists, heading run, blockquote, hr) and that the sheet covers that element set, keeps the heading ladder bounded, keeps overflow-wrap: anywhere confined to the pre, admits nothing new through the sanitiser, and is still the only copy.
• npm run test:unit — 2599 passed. The one failure, portalAgentsAtCentre.spec.js > the agent row time is tight, reproduces on a clean origin/dev checkout and is unrelated to this branch.
• npm run check:tokens — OK.
• Visual: light and dark, at 1100px and at 430px, against the local stack.

The raw-colour baseline re-freeze is its own commit with the growth named (+21 gray in this file, raw_nongray still 0), per the contract's "never absorbed into a feature diff".

🤖 Generated with Claude Code

https://claude.ai/code/session_01GawbQRicLvNMaPknFT8BfR

[vybe]

merge-train 2026-09-10 (evening run): riding. Your 21018c48 dev merge already produced the union the ratchet needs — PortalMarkdown 13 → 34 named in its own note, fieldClasses.js at dev's 15, totals 8744 equal to the scanner on the merged tree, dev's named_increases notes intact — so nothing was pushed to your branch. 44/44 on the ratchet + both typography specs against that head.

For the record, since the next person to hit this conflict will reach for it: node scripts/scan-raw-colors.mjs . --baseline raw-color-baseline.json overwrites the file with only generated/branch/commit/files/totals and drops the whole refrozen block, so it is not a resolution for a baseline conflict; the hand-merge you did is.

Two nits, not blockers: ul, ol { margin: 0.5rem 0 } lacks the :first-child / :last-child zeroing every other block got, so a reply that opens or closes on a list picks up 8px it did not have before; and _2616_note sits at refrozen._2616_note while its three siblings live under refrozen.named_increases. GitHub Advanced Security's two comments are the single-pass comment-strip on a checked-in test fixture — not real, and you fixed them anyway.

[vybe]

merge-train: batch validated on train/20260911-0925 (#2701)