block/buzz
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·July 25, 2026
More findings
Verdict
Careful engineering everywhere except the one component that most needs it: the reconnect overlay. Duplicated positioning logic, arbitrary pixel values, and a missed reduced-motion guard undercut what is otherwise disciplined touch-target and layout work.
Files Rams reviewed
desktop/src/app/routes/index.tsx
desktop/src/app/AppShellContext.tsx
desktop/src/app/AppShellOverlays.tsx
desktop/src/app/AppTopChrome.tsx
desktop/src/app/RelayConnectionOverlay.tsx
desktop/src/app/routes/ChannelRouteScreen.tsx
desktop/src/app/routes/agents.tsx
desktop/src/app/routes/channels.$channelId.posts.$postId.tsx
desktop/src/app/routes/channels.$channelId.tsx
desktop/src/app/routes/projects.$projectId.tsx
desktop/src/app/routes/pulse.tsx
desktop/src/features/huddle/components/AddAgentDialog.tsx
desktop/src/features/huddle/components/HuddleAttachment.tsx
desktop/src/features/huddle/components/HuddleIndicator.tsx
desktop/src/features/huddle/components/ParticipantList.tsx
web/src/app/routes/index.tsx
desktop/src/app/BuzzThemeSurfaces.tsx
desktop/src/app/ThemeGrainientBackground.tsx
desktop/src/app/router.tsx
desktop/src/app/routes/WorkflowsRouteScreen.tsx
desktop/src/app/routes/messages.new.tsx
desktop/src/app/routes/projects.tsx
desktop/src/app/routes/reminders.tsx
desktop/src/app/routes/root.tsx
desktop/src/app/routes/settings.tsx
desktop/src/app/routes/workflows.$workflowId.tsx
desktop/src/app/routes/workflows.tsx
desktop/src/features/forum/ui/ForumComposerCompactLayout.tsx
web/src/app/App.tsx
web/src/app/router.tsx
Accessibility
desktop/src/app/AppTopChrome.tsx:30
Back/forward navigation buttons render below minimum touch target size
In AppTopChrome.tsx, HISTORY_ICON_BUTTON_CLASS sets the "Go back" and "Go forward" buttons to h-[28px] w-[24px]. That's a 24×28px hit target, under the 44×44px target Apple/WCAG recommend and even under the 24px floor on the width axis alone.
Why it matters
Trackpad and touch users miscliick history navigation more often, and the effect compounds for anyone with reduced motor precision. A 24px-wide hit target next to the 28px-wide sidebar trigger also reads as an inconsistent click affordance in the same row.
Fix
Size interactive icon buttons to at least a 28px square (or pad the hit area with padding/a larger invisible tap zone) rather than shrinking width below height.
const HISTORY_ICON_BUTTON_CLASS =
"h-[28px] w-[24px] rounded-[4px] text-sidebar-foreground/65 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [&_svg]:size-[16px]";const HISTORY_ICON_BUTTON_CLASS =
"h-[28px] w-[28px] rounded-[4px] text-sidebar-foreground/65 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [&_svg]:size-[16px]";Spacing
desktop/src/app/RelayConnectionOverlay.tsx:61
Reconnect overlay positioning uses arbitrary pixel values instead of scale tokens
The overlay wrapper in RelayConnectionOverlay.tsx sets w-[284px] and left-[60px] as raw arbitrary Tailwind values instead of scale-based utilities, and this exact className string (line 61-66) is repeated verbatim wherever the overlay renders.
Why it matters
Arbitrary pixel values disconnected from the spacing scale drift out of sync with the rest of the layout system over time, so a later change to sidebar width or rail offset has no single source of truth to update from.
Fix
Replace ad hoc pixel values with existing spacing-scale tokens or shared layout constants (e.g. a SIDEBAR_RAIL_OFFSET constant) so the width and offset live in one place.
"pointer-events-none fixed z-50 w-[284px]",
hasCommunityRail ? "left-[60px]" : "left-3","pointer-events-none fixed z-50 w-72",
hasCommunityRail ? "left-16" : "left-3",Get this score on every PR.
Rams reviews each pull request on your repo and posts inline one-click fixes — about a minute per review.
Install Rams freeMotion
desktop/src/app/RelayConnectionOverlay.tsx:59
Reconnect overlay slides in and out with no reduced-motion guard
The motion.div wrapping the sidebar reconnect card in RelayConnectionOverlay.tsx animates opacity and a 20px y-translate on both entry (initial={{ opacity: 0, y: -20 }}) and exit (exit={{ opacity: 0, y: 20 }}), with no prefers-reduced-motion check or MotionConfig reducedMotion wrapper anywhere in this file.
Why it matters
Users with vestibular motion sensitivity who have prefers-reduced-motion set at the OS level still get the full translate animation every time the relay connection drops and reconnects, which can trigger discomfort on a state they don't control.
Fix
Wrap the AnimatePresence tree in a MotionConfig reducedMotion="user" or check usePrefersReducedMotion() and drop the y-translate to 0 when the user has motion reduction enabled.
<motion.div
animate={{ opacity: 1, y: 0 }}
...
exit={{ opacity: 0, y: 20 }}
initial={{ opacity: 0, y: -20 }}
key="relay-connection-overlay"
transition={{ duration: 0.25, ease: [0.22, 1, 0.36, 1] }}
><motion.div
animate={{ opacity: 1, y: prefersReducedMotion ? 0 : 0 }}
...
exit={{ opacity: 0, y: prefersReducedMotion ? 0 : 20 }}
initial={{ opacity: 0, y: prefersReducedMotion ? 0 : -20 }}
key="relay-connection-overlay"
transition={{ duration: prefersReducedMotion ? 0 : 0.25, ease: [0.22, 1, 0.36, 1] }}
>Typography
Color
Components
UX
Craft
Working well
- The error fallback in RelayConnectionOverlay uses role="alert" and aria-hidden on the decorative AlertCircle icon, so screen reader users get the disconnect message once without redundant icon noise.
- HomeRouteComponent handles data/navigation wiring while HomeScreen owns UI rendering, which keeps routing logic and presentation reviewable as separate concerns instead of one tangled component.
- Context default values in the read-state model carry inline comments explaining intent, which saves future maintainers from having to reverse-engineer behavior by tracing every consumer.
Scored July 25, 2026 with Rams Engine v0.0.3 · Engine changelog
First scored July 22, 2026: 59/100. This rescore on v0.0.3: 92/100.
This page is an automated design review of block/buzz’s UI code: 30 files read against 291 versioned rules covering accessibility, color, typography, spacing, components, UX, motion, and craft. The score is out of 100; confirmed criticals cap it — one at 59, two at 49, three or more at 39.
More design scores
Score your own repo.
Free on public repos, no account. The same engine that scored this page reads your UI code and mints a score page like this one.
Public repos only. The full engine reviews the UI code and mints a public score page — we email you the link too. Already-scored repos open instantly.
