getcatalystiq/agent-plane
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·July 31, 2026
More findings
Verdict
A polished desktop admin shell hides brittle edges the moment conditions shift: smaller screens, missing data, mismatched native controls. The biggest risk is silent failure on missing tenant data, quietly hiding config instead of surfacing an error.
Files Rams reviewed
src/app/admin/(auth)/login/page.tsx
src/app/admin/(dashboard)/agents/[agentId]/page.tsx
src/app/admin/(dashboard)/agents/page.tsx
src/app/admin/(dashboard)/layout.tsx
src/app/admin/(dashboard)/mcp-servers/page.tsx
src/app/admin/(dashboard)/page.tsx
src/app/admin/(dashboard)/plugin-marketplaces/[marketplaceId]/page.tsx
src/app/admin/(dashboard)/plugin-marketplaces/[marketplaceId]/plugins/[...pluginName]/page.tsx
src/app/admin/(dashboard)/plugin-marketplaces/page.tsx
src/app/admin/(dashboard)/sessions/[sessionId]/page.tsx
src/app/admin/(dashboard)/sessions/page.tsx
src/app/admin/(dashboard)/settings/page.tsx
src/app/admin/(dashboard)/tenants/[tenantId]/page.tsx
src/app/admin/(dashboard)/tenants/page.tsx
src/app/admin/(auth)/layout.tsx
src/app/layout.tsx
src/app/admin/(dashboard)/agents/[agentId]/a2a-info-section.tsx
src/app/admin/(dashboard)/agents/[agentId]/agent-runs.tsx
src/app/admin/(dashboard)/agents/[agentId]/edit-form.tsx
src/app/admin/(dashboard)/agents/[agentId]/identity-tab.tsx
src/app/admin/(dashboard)/agents/[agentId]/import-skill-dialog.tsx
src/app/admin/(dashboard)/agents/[agentId]/import-soul-dialog.tsx
src/app/admin/(dashboard)/agents/[agentId]/loading.tsx
src/app/admin/(dashboard)/agents/[agentId]/mcp-tools-modal.tsx
src/app/admin/(dashboard)/agents/[agentId]/playground/page.tsx
src/app/admin/(dashboard)/agents/[agentId]/plugins-manager.tsx
src/app/admin/(dashboard)/agents/[agentId]/schedule-editor.tsx
src/app/admin/(dashboard)/agents/[agentId]/skills-editor.tsx
src/app/admin/(dashboard)/agents/[agentId]/tools-modal.tsx
src/app/admin/(dashboard)/agents/add-agent-form.tsx
UX
src/app/admin/(dashboard)/agents/[agentId]/page.tsx:64
Missing tenant fails silently and hides A2A config with no error
In AgentDetailPage, `const tenant = await queryOne(TenantRow, ...)` can resolve to null/undefined if the tenant row is missing, but the page never checks for that case explicitly. Instead it just gates `A2aInfoSection` behind `{tenant && (...)}` at line 64, so when tenant lookup fails the entire A2A configuration panel disappears from the page with zero indication to the admin that anything is wrong or missing.
Why it matters
An admin editing an agent with a broken tenant reference sees a page that looks complete but is silently missing a whole feature panel, so they can't tell whether A2A is disabled by design or broken by a data issue, and support time is spent chasing a bug that never surfaces an error.
Fix
Render an explicit inline warning when tenant is missing instead of silently omitting the section.
{tenant && (
<A2aInfoSection
agentId={agent.id}
tenantSlug={tenant.slug}
agentSlug={agent.slug}
baseUrl={getCallbackBaseUrl()}
initialEnabled={agent.a2a_enabled}
initialTags={agent.a2a_tags}
/>
)}{tenant ? (
<A2aInfoSection
agentId={agent.id}
tenantSlug={tenant.slug}
agentSlug={agent.slug}
baseUrl={getCallbackBaseUrl()}
initialEnabled={agent.a2a_enabled}
initialTags={agent.a2a_tags}
/>
) : (
<p className="text-sm text-destructive">Tenant record not found for this agent; A2A settings unavailable.</p>
)}src/app/admin/(dashboard)/layout.tsx:19
h-screen wrapper clips content under mobile browser chrome
The root layout div uses `flex h-screen overflow-hidden` to size the sidebar/main split. `h-screen` locks to `100vh`, which on mobile Safari and Chrome is measured with the address bar retracted, taller than the actually visible viewport when the bar is showing.
Why it matters
On a phone, the layout renders taller than the visible screen, so the bottom of `main` (and the sidebar footer with LogoutButton and ThemeToggle) gets clipped under the browser's address bar until the user scrolls or the bar auto-hides, which is inconsistent and confusing for a persistent admin shell.
Fix
Use the dynamic viewport unit so the layout height tracks the actually visible viewport on mobile browsers.
<div className="flex h-screen overflow-hidden bg-background text-foreground"><div className="flex h-dvh overflow-hidden bg-background text-foreground">Color
src/app/admin/(dashboard)/layout.tsx:16
Dark class toggles without color-scheme, leaving native UI light
The `theme-init` script toggles the `dark` class on `document.documentElement` based on stored preference or `prefers-color-scheme`, but never sets `document.documentElement.style.colorScheme` or a `color-scheme` meta/CSS property alongside it.
Why it matters
Without `color-scheme` set, native form controls, scrollbars, and browser-drawn UI (date pickers, select dropdowns, scrollbar track) stay rendered in light mode even while the app's own dark class is active, producing a visibly mismatched interface for any admin using dark mode.
Fix
Set the color-scheme property alongside the dark class toggle so native browser chrome matches the theme.
__html: `(function(){try{var t=localStorage.getItem('ap-theme');if(t==='dark'||(t!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches))document.documentElement.classList.add('dark');else document.documentElement.classList.remove('dark')}catch(e){}})()`,__html: `(function(){try{var t=localStorage.getItem('ap-theme');var d=t==='dark'||(t!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches);document.documentElement.classList.toggle('dark',d);document.documentElement.style.colorScheme=d?'dark':'light';}catch(e){}})()`,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 freeSpacing
src/app/admin/(dashboard)/agents/[agentId]/page.tsx:55
Fixed 6-column metric grid crushes cards on narrow admin screens
The metric row above `AgentEditForm` uses `grid grid-cols-6 gap-4` with no responsive variant, packing six MetricCards ("Runs", "Max Turns", "Budget", "Max Runtime", "Skills", "Plugins") into six equal fixed columns regardless of viewport width.
Why it matters
On a narrow admin viewport or a tablet, six columns squeeze each card down to a sliver, wrapping labels and numeric values awkwardly and making the metric row harder to scan than a single stacked or 2-3 column layout would be.
Fix
Add responsive column breakpoints so the grid collapses to fewer columns on smaller viewports.
<div className="grid grid-cols-6 gap-4"><div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">Accessibility
Typography
Components
Motion
Craft
Working well
- Using AgentTabs to lazily compose tab content by prop (general, identity, runs, connectors, skills) keeps each manager component isolated and the page function readable rather than one monolithic render tree.
- The Base URL cell truncates with `truncate max-w-xs` but pairs it with a `title` attribute carrying the full value, giving users a recovery path for the clipped text instead of losing it entirely.
- Sidebar bottom row groups LogoutButton and ThemeToggle with justify-between inside a bordered footer, keeping account controls visually separated from primary navigation.
Scored July 31, 2026 with Rams Engine v0.0.3 · Engine changelog
This page is an automated design review of getcatalystiq/agent-plane’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; any confirmed critical issue caps it at 59.
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.
