mirajchokshi/agentacta
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
2 files reviewed·July 25, 2026
More findings
Verdict
A clean multi-theme token system sits on top of a navigation that keyboard users can't operate at all. The badge and color layer looks disciplined until you check the edges, where hardcoded hex and undeclared tokens quietly break the pattern.
Files Rams reviewed
public/index.html
public/style.css
Color
public/style.css:1010
Confusion badge dark-mode override never applies in default theme
".confusion-green" ships light pastel colors (#dcfce7 background, #166534 text) with a "[data-theme=\"dark\"]" override intended to darken it. But dark is this app's unattributed default state in :root, while the file's theme switches are [data-theme="light"] and [data-theme="oled"]. The dark-theme selector for .confusion-green never matches, so the badge renders light-mode pastel colors against the dark background by default.
Why it matters
The confusion-severity badge is meant to be color-coded status information; on the default dark theme it shows washed-out pastel colors against a dark surface, degrading contrast and the color signal users rely on to read severity at a glance.
Fix
Put the dark-mode values in the unattributed default (:root) and reserve the attribute selector for the light-theme override.
.confusion-green { background: #dcfce7; color: #166534; }
[data-theme="dark"] .confusion-green { background: #14532d; color: #86efac; }.confusion-green { background: #14532d; color: #86efac; }
[data-theme="light"] .confusion-green { background: #dcfce7; color: #166534; }public/style.css:617
Session project badge hardcodes color while sibling badges use tokens
".session-project" sets "color: #7fb4ff" and "background: rgba(39, 94, 182, 0.18)" directly, while its siblings ".session-model" and ".session-agent" use "color: var(--purple); background: var(--purple-soft)" and "color: var(--teal); background: var(--teal-soft)" respectively.
Why it matters
Every other status badge in this group re-themes automatically through its token when the app switches to light or oled mode; this one badge is frozen at its dark-mode blue and will clash or lose contrast when the theme changes.
Fix
Replace hardcoded hex/rgba values with the same -soft token pattern used by sibling badges.
.session-project {
font-size: 11px;
font-weight: 500;
color: #7fb4ff;
background: rgba(39, 94, 182, 0.18);
padding: 2px 10px;
border-radius: 10px;
}.session-project {
font-size: 11px;
font-weight: 500;
color: var(--blue);
background: var(--blue-soft);
padding: 2px 10px;
border-radius: 10px;
}public/style.css:891
Settings gear, insight hover, and callout divider reference undeclared tokens
The gear icon color, the .insight-row hover background, and the .insight-callout border all reference --text-muted, --hover-bg, and --border-color respectively. None of these custom properties are declared in :root or in the theme override blocks visible in this file, which use --text-tertiary, --bg-hover, and --border-subtle instead.
Why it matters
An undeclared custom property resolves to its initial value (usually transparent or unset), so the gear icon, hover feedback, and callout divider silently disappear or render invisibly instead of the intended muted tone.
Fix
Reference only tokens that are declared in :root and the theme override blocks.
.settings-gear { color: var(--text-muted); }
.insight-row:hover { background: var(--hover-bg); }
.insight-callout { border-bottom: 1px solid var(--border-color); }.settings-gear { color: var(--text-tertiary); }
.insight-row:hover { background: var(--bg-hover); }
.insight-callout { border-bottom: 1px solid var(--border-subtle); }Accessibility
public/index.html:32
Sidebar navigation is unusable without a mouse
The five primary nav items "Overview", "Sessions", "Insights", "Timeline", and "Files" are all rendered as plain <div class="nav-item" data-view="..."> elements with no role, no tabindex, and no keydown handler visible in the markup. There is no way to Tab to these or activate them from the keyboard.
Why it matters
Keyboard-only and screen reader users cannot switch views at all, which locks them out of the app's core navigation, not a degraded experience but a total blocker.
Fix
Use native <button> elements for interactive controls so focus, keyboard activation, and accessible role come for free.
<div class="nav-item active" data-view="overview">
<svg .../>
<span>Overview</span>
</div><button class="nav-item active" data-view="overview" type="button">
<svg .../>
<span>Overview</span>
</button>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 freeTypography
public/index.html:9
Inter and JetBrains Mono load from Google's CDN, not self-hosted
The <head> loads "Inter" and "JetBrains Mono" via a fonts.googleapis.com stylesheet link rather than self-hosted font files served alongside style.css.
Why it matters
The extra DNS lookup and round trip to a third-party origin delays when the intended typeface paints, so text renders in a fallback font and reflows once Inter/JetBrains Mono arrive.
Fix
Self-host font files and reference them locally to remove the third-party round trip.
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"><link rel="stylesheet" href="/fonts/fonts.css">Spacing
Components
Motion
UX
Craft
Working well
- The badge system (.badge-message, .badge-user, .badge-assistant, .badge-tool_call) consistently pairs each semantic color with its own -soft background token, keeping status color coded and theme-aware in one place, which is exactly what the session-model and session-agent badges do correctly.
- The three-theme token architecture (:root, [data-theme="light"], [data-theme="oled"]) cleanly remaps the full palette per theme rather than inverting values, which is the right way to build multi-theme color systems.
- Icon-only buttons like "#theme-toggle", "#settings-btn", and "#cmdkBtn" all carry both aria-label and title, giving screen reader and mouse users a clear name for controls that have no visible text.
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: 59/100.
This page is an automated design review of mirajchokshi/agentacta’s UI code: 2 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.
