Badge Chat and Document activity with one still petrol dot, and even out the title bar

[MaggieAppleton]

Three fixes to the document sheet's two header bars, all from Maggie's screenshots.

1. Chat toggle badge. With the document expanded, the toggle shows the Chat speech-bubble glyph (MessageIcon, the composer's Chat icon) in place of the inward arrows. The unread mark moves onto the glyph's top-right corner: an 8px petrol dot (was 6px) with a 2px ring in the surface colour, so it cuts cleanly out of the glyph and never touches the label. The ring follows the ghost button's hover and pressed fills, so no halo shows. Its accessible name still announces state (Show chat, 1 unread, Show chat, Planner working). The appear motion reuses the existing count feedback (opacity and scale, pointer input only, off under reduced motion). The chat-open state keeps its ExpandIcon.

2. Document "new changes" mark. The mark was a hollow, pulsing ring for "writing" and a 6px dot overlapping the end of "Document". It's now the same solid 8px petrol dot as the Chat badge, inline after the label and vertically centred. The tab grows to fit it (gap-1.5). The pulse is gone. Accessible names are unchanged (Document, new changes, Document, Planner writing). On the phone tab bar, the Chat and Document marks use the same treatment: an 8px fill with a 2px page ring. Before, the 2px border left only a 4px fill.

3. Title bar evenness

• Project, separator, title and the Zoom root crumb go from --text-xs (12.3px) to --text-sm (14px), the size the views bar, the Chat label and the counts already use. Both bars now read at one size.
• The repository icon (DocumentIcon, the one in the header before Put the document's title and views on its sheet, and zoom children by default #507) returns before the project name. It is 14px like the toggle glyphs, centred on the text, tertiary colour, and sits 6px from the project, the same as glyph to label in the toggle.
• After the toggle's rule, the slot gains --control-padding-inline. The icon now sits 16px after the divider, matching the 16px from the bar edge to the toggle glyph and from the "Chat" label to the divider.

Chat open

Before	After

Expanded, unread chat

Before	After

After, hover / keyboard focus / pressed:

Document "new changes"

Before	After

Zoom child crumb (1440 and 820 wide; the title still truncates first)

Before	After

Phone tab bar (Chat unread, Document new changes)

Before	After

Checked in the browser (headless, 2x)

• The Chat badge appears when another member posts and clears after Chat is opened and read. The Document dot appears after an MCP edit made while Decisions is in front, and clears after viewing.
• Hover, pressed and keyboard focus ring on the toggle. Under coarse pointer the badge doesn't affect the expanded hit area.

Tests

• e2e/responsive-activity.e2e.ts: the badge sits left of the "Chat" label.
• e2e/document-activity.e2e.ts: on desktop the dot has no animation, stays inside the tab and is centred on it.
• document-activity.test.ts: the pulse test is replaced by "the document mark stays still".
• icon-assets.test.ts: the workspace now uses MessageIcon, not CollapseIcon.
• Local e2e was skipped because other sessions hold the e2e ports, so this relies on CI.

Needs a look

• Text size. The brief said both "the smaller UI size" and "≈14px". The breadcrumb was the smaller one, at 12.3px, so I went with the ≈14px token, --text-sm, which the views already use. If the bars should come down to 12.3px instead, it's a one-line token swap.
• Design-contract review. There is a separate Renew design-contract review for the Chat toggle badge commit. The data flow is unchanged: feedback still reaches two spans in SurfaceToggle.

🤖 Generated with Claude Code

[MaggieAppleton]

Review: Changes needed (one small fix)

I checked this in a headless browser on a fake-GitHub server, at 1440×900 (1x and 2x), 1024 and 820 wide, and on a 390×844 phone (3x). I looked at the unread Chat badge at rest, on hover, while pressed and with keyboard focus, at the Document dot and its hover state, and at the phone tab bar.

What works

• The badge sits on the glyph's top-right corner (glyph 278–292px, dot 287–295px). It stays clear of the "Chat" label, which starts at 298px. The ring takes the button's fill on hover (gray-200) and while pressed (gray-300), so no halo shows. Accessible name: Show chat, 1 unread.
• The Document dot is 6px after the word and its centre is exactly on the tab's centre (72/72). It has no animation (animation-name: none). Name: Document, new changes.
• The project, separator, title, Chat label and view tabs all compute to the same --text-sm (14.04px), and they scale together at 1024 and 820 wide. The repository icon is 14px like the toggle glyph and centred on the text (31.5/31.5). It sits 16px after the divider.
• The pulse removal leaves no dead CSS. chat-work-dot is still used by the Chat work indicator and .question-relation-dot. The design-contract renewal in workspace.tsx checks out: feedback still goes to the glyph span and the badge span, so the data flow is unchanged.
• The unit tests pass, and oxlint is clean on the changed files.

Findings

1. The knockout ring is 1px on every Retina screen, not 2px. apps/web/src/theme.css (.activity-badge) and apps/web/src/phone-workspace.css:439 use outline-width: calc(var(--edge-width) * 2). But theme.css:353 sets --edge-width: 0.5px under min-resolution: 2x. I measured outline-width: 1px at 2x desktop and on the phone. On the phone this is a regression: the old ring was a literal 2px border. Next to the Decisions count badge, which has a thicker page ring, the Chat and Document dots now look thinner and inconsistent. --edge-width is a hairline token, so it is the wrong base here. Use a fixed calc(var(--spacing) / 2) (2px) for both rules.
2. The repository icon is 4px from the project name, not 6px. The PR says the gap matches the toggle's glyph-to-label gap, which measures 6px (glyph ends at 292, "Chat" starts at 298). The icon ends at 376.5 and "score" starts at 380.5. The cause is margin-inline-end: calc(var(--spacing) / 2) added to the group's gap-0.5, which gives 2 + 2. Use var(--spacing) so the gap comes to 6px.
3. Nit: the Document tab widens by 14px when the dot appears (85 → 99px), which pushes Decisions and Build sideways while the reader is on Decisions. This is acceptable given "never overlap text", so I'm only flagging it. Reserving the dot's width when the tab isn't current would remove the shift.
4. Nit: .document-activity-dot no longer has any styles. It survives as a test hook and in the unit test's no-animation regex. That's fine, but data-document-activity already serves as the hook.

I didn't test a long title truncating next to the icon or a Zoom child crumb locally (the fake server has no child documents). The PR's 1440 and 820 before/after shots cover the Zoom crumb.

CI: container, e2e, and format/lint/types/tests all pass.

[MaggieAppleton]

Addressed the review in commit 448f346:

1. Ring width: the knockout ring is now calc(var(--spacing) / 2) (2px at every density) in .activity-badge and phone-workspace.css.
2. Repository icon gap: no change. Measured glyph to glyph, it's already 6px: the icon ends at 376.5, the .document-project-prefix box starts at 380.5, and its own 2px inline padding puts the text at 382.5. That matches the toggle's icon-to-label gap (292 to 298). The 4px reading was to the prefix box, not the text. Using var(--spacing) would make it 8px.
3. Reserving the Document dot's space: not done. Reserving it would leave a permanent 14px gap after "Document" at rest, wider than the space between tabs, and that reads as a layout bug. The shift only happens when the mark appears. It's 14px and stays outside the active tab, since the active Document tab never shows the dot.
4. Dot class: dropped .document-activity-dot. The test now asserts that no [data-document-activity…] or .activity-dot rule animates.

No change to workspace.tsx, so its review hash stands.

Updated crops at 2x: