feat(appearance): app-wide font size and conversation density with Crew previews by devin-ai-integration[bot] · Pull Request #317 · Nuncio-hq/crew

devin-ai-integration · 2026-08-22T10:07:43Z

Summary

Ports the Buzz 0.5.18 Tier 2 appearance work (block#5644, block#6193) onto Crew: an
app-wide font size preference (smaller | default | larger) and a
conversation density preference (compact | comfortable | spacious), both
persisted in local storage, applied to the root element before React renders,
and previewed live in Appearance settings.

Mechanically, both preferences drive CSS variables rather than component
branches:

:root { --buzz-type-rem: 16px }            /* font size + Cmd +/- write this */
--text-xs/sm/base/... = calc(var(--buzz-type-rem) * ratio)
--conversation-{body-gap,row-padding-block,paragraph-gap,list-item-gap}
  ← overridden by :root[data-conversation-density="compact"|"spacious"]

Conversation surfaces then use semantic Tailwind tokens (text-message,
text-message-timestamp, leading-message-author, py-conversation-row,
mt-conversation-body, mt-conversation-paragraph) instead of fixed
text-sm leading-5 / py-1 literals, so channels, DMs, threads, Inbox,
Markdown and the composer all follow the preferences from one place.

Notable behaviour change: useWebviewZoomShortcuts (Cmd +/-) now scales
--buzz-type-rem instead of document.documentElement.style.fontSize. The real
root stays at 16px, so zoom scales text without also resizing rem-based
widths, gaps, radii and controls. tests/e2e/top-chrome-zoom-clearance.spec.ts
was updated to assert the virtual type scale (and that the real root holds at
16px) — its intent (fixed nav geometry under zoom) is unchanged and still
enforced.

Crew divergences from upstream

Chrome stays Crew Dark / Crew Light (+ system); the retired Buzz
yellow-green sidebar gradient is not restored (Crew Dark theme (Cursor-flavored): color-is-information token set + chrome/syntax theme split #204, D-063). The new
preview card is transparent so it renders in the active Crew chrome.
Syntax palette stays an independent selection from chrome theme.
Channel-first IA from upstream(sync): Guardrail — preserve channel-first IA during 0.5.18 merge #278 is untouched: no Projects/Workbench rail, no
navigation changes. Only the appearance scope of upstream(sync): Tier 2 appearance — font/density + previews with Crew Dark (#5644, #6193) #290 is ported.
Crew's existing Links (link preview style) and Thread layout settings are
kept as-is under Preferences; the new controls live in a Display group.

Related issue

Fixes #290 (part of the 0.5.18 sync stack, meta #285)

Testing

TDD: fontSizePreference.test.mjs and conversationDensityPreference.test.mjs
were added first (RED: 2 failures, modules missing), then the modules; the new
tests/e2e/crew-appearance-density.spec.ts failed against a bundle built from
main (no font-size-control / conversation-density-control) before the
settings work landed.

Gates (all run individually; just ci not run — its mobile dart format leg
hangs in this environment):

Gate	Result
`pnpm --filter buzz check`	pass
`pnpm --filter buzz typecheck`	pass
`pnpm --filter buzz test`	pass — 5541 passed, 0 failed, 1 skipped
`pnpm exec playwright test --project=smoke` (full)	1045 passed, 63 failed
`just test-unit`	fails on pre-existing `buzz-cli` / `buzz-db` inventory assertions

No Rust files changed, so just check-compile was not required. The two
just test-unit failures (buzz-cli command-inventory count, buzz-db
embedded_migrator_contains_consolidated_initial_schema 31 vs 30) reproduce
unchanged on a clean base worktree at the merge base — they are not from this
change. Of the 63 full-smoke failures, 60 reproduce on a base-built bundle
(project-pr-review, project-commit-detail, thread-pr-hub,
responsive-matrix, …); the remaining three were the three
top-chrome-zoom-clearance zoom assertions, which pass after the spec update,
plus one flaky 1px video-attachment hover assertion that passes on re-run.

Full-window evidence (1280x720 viewport, fullPage, whole app: sidebar +
settings/timeline):

Appearance settings, before → after (scrolled to the bottom of the panel)

Timeline density: comfortable → compact → spacious

Font size: larger

NOTES (handover)

DONE

fontSizePreference.ts + conversationDensityPreference.ts (storage keys
buzz.appearance.fontSize, buzz.appearance.conversationDensity; root
attributes data-font-size, data-conversation-density), initialised in
main.tsx before render, with unit tests (*.test.mjs).
shared/styles/globals/typography.css (virtual type rem + density
variables), Tailwind typography/spacing tokens, cn.ts tailwind-merge
extension for the new text-message* group.
Density/type tokens applied to MessageRow, MessageHeader,
MessageTimestamp, markdown.tsx, composer.css, useRichTextEditor,
InboxMessageRow, InboxListPane.
SegmentedControl + ConversationDisplaySettings (font size, conversation
density, live conversation preview) in a Display group in Appearance.
Cmd +/- rewired to the virtual type scale; top-chrome-zoom-clearance spec
updated accordingly.
New E2E spec crew-appearance-density.spec.ts (registered in the smoke
project): settings controls + Crew guardrails, density persistence and
timeline metrics, font-size scaling — all full-page screenshots.
Gates as tabled above. Evidence:
/home/ubuntu/evidence/{before,after}/*.png,
red-unit-tests.log, gate-check.log, gate-typecheck.log,
gate-unit-tests.log, gate-just-test-unit.log, red-e2e-appearance.log,
green-e2e-appearance.log, e2e-smoke-full.log,
e2e-base-failing-subset.log, gate-e2e-zoom-video.log.

IN PROGRESS

Nothing half-implemented. Wound down on the stop-and-document order right after
pushing; the only unfinished activity was CI observation (deliberately skipped —
the parent session serialises CI).

TODO / NEXT

CI has not been observed for this branch; cancelled runs are expected per the
parent session's serialisation.
Not ported from Add appearance preference previews block/buzz#6193: any upstream link-preview preview affordance beyond
Crew's existing Links setting — judged out of upstream(sync): Tier 2 appearance — font/density + previews with Crew Dark (#5644, #6193) #290's scope; revisit if the
meta issue disagrees.
Known risks / conflicts: tailwind.config.js, cn.ts, markdown.tsx and
AppearanceSettingsControls.tsx are likely conflict points with sibling
0.5.18 sync PRs. just test-unit remains red on main for unrelated
buzz-cli/buzz-db inventory assertions and will stay red here.

Link to Devin session: https://app.devin.ai/sessions/f7f9afbc9e094854b3fafc2ac373fdcc
Requested by: @oscarlehuu

devin-ai-integration · 2026-08-22T10:07:47Z

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

Disable automatic comment, CI, and merge conflict monitoring

devin-ai-integration · 2026-08-22T10:07:52Z

NOTES (handover)

DONE

fontSizePreference.ts + conversationDensityPreference.ts (storage keys
buzz.appearance.fontSize, buzz.appearance.conversationDensity; root
attributes data-font-size, data-conversation-density), initialised in
main.tsx before render, with unit tests (*.test.mjs).
shared/styles/globals/typography.css (virtual type rem + density
variables), Tailwind typography/spacing tokens, cn.ts tailwind-merge
extension for the new text-message* group.
Density/type tokens applied to MessageRow, MessageHeader,
MessageTimestamp, markdown.tsx, composer.css, useRichTextEditor,
InboxMessageRow, InboxListPane.
SegmentedControl + ConversationDisplaySettings (font size, conversation
density, live conversation preview) in a Display group in Appearance.
Cmd +/- rewired to the virtual type scale; top-chrome-zoom-clearance spec
updated accordingly.
New E2E spec crew-appearance-density.spec.ts (registered in the smoke
project): settings controls + Crew guardrails, density persistence and
timeline metrics, font-size scaling — all full-page screenshots.
Gates as tabled above. Evidence:
/home/ubuntu/evidence/{before,after}/*.png,
red-unit-tests.log, gate-check.log, gate-typecheck.log,
gate-unit-tests.log, gate-just-test-unit.log, red-e2e-appearance.log,
green-e2e-appearance.log, e2e-smoke-full.log,
e2e-base-failing-subset.log, gate-e2e-zoom-video.log.

IN PROGRESS

Nothing half-implemented. Wound down on the stop-and-document order right after
pushing; the only unfinished activity was CI observation (deliberately skipped —
the parent session serialises CI).

TODO / NEXT

CI has not been observed for this branch; cancelled runs are expected per the
parent session's serialisation.
Not ported from Add appearance preference previews block/buzz#6193: any upstream link-preview preview affordance beyond
Crew's existing Links setting — judged out of upstream(sync): Tier 2 appearance — font/density + previews with Crew Dark (#5644, #6193) #290's scope; revisit if the
meta issue disagrees.
Known risks / conflicts: tailwind.config.js, cn.ts, markdown.tsx and
AppearanceSettingsControls.tsx are likely conflict points with sibling
0.5.18 sync PRs. just test-unit remains red on main for unrelated
buzz-cli/buzz-db inventory assertions and will stay red here.

Port the upstream Buzz 0.5.18 font-size and conversation-density preferences onto Crew's appearance settings, keeping Crew Dark/Light as the chrome themes and the syntax palette independent. Cmd +/- and the font-size preference now drive a virtual typography rem (--buzz-type-rem) instead of the real root font size, so text scales without resizing rem-based layout geometry. Fixes #290 Signed-off-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-Authored-By: Oscar Le <oscar.lehuu@gmail.com>

cursor · 2026-08-22T10:33:43Z

Screenshots + recording (after rebase onto main)

Full-window evidence of Appearance → Display (font size, conversation density, live preview) and the #general timeline at comfortable / compact / spacious / larger type. Video walks the same path.

appearance-font-density-walkthrough.mp4