polish: subtle refinement pass across all 5 pages

[NiveditJain]

Summary

Stacks on top of #397. Targets stable (not main) so the diff stays focused on the polish pass and doesn't relitigate any of the audit / auth feature work.

Same brutalist pixel-craft aesthetic — pink corner-glyphs, dashed panels, JetBrains Mono + Bitcount Prop Single, --radius: 0 — just more carefully made. Nothing was redesigned.

What changed

Shared chrome — app/globals.css

• Global ::selection pink wash so prose / code fragments tie back to the accent.
• :focus-visible ring system on every interactive element (a, button, input, .btn, .tab, .btn-press). Keyboard-only — pointer users see nothing different.
• .btn / .btn-press / .tab / .panel transitions repointed at the cubic-bezier(0.22, 1, 0.36, 1) curve that .audit-bar-fill already uses. Away from transition: all 120ms ease, which was animating layout properties unintentionally.
• New micro-motion: .btn:active press-down, .btn-press:active collapse to (4px, 4px) zero-shadow, .tab::after underline that emerges from center on hover for inactive tabs.
• Opt-in .panel.is-interactive: hovering grows the pink corner brackets from 10px → 16px and softens the border. Not applied anywhere yet — reserved for clickable card-shaped panels.
• All new motion respects prefers-reduced-motion: reduce.

Audit — app/audit/audit-styles.css

• prefers-reduced-motion guard on the dot-live pulse, the running terminal cursor blink, the spinner step, the bar-shine marquee, and the auth status pill dot. Functional bar-fill progress still updates.

app/projects/page.tsx

• Section mast with ━━ projects glyph + folder counter.
• Headline lowered from Projects to the audit-style your agent footprint..
• Empty state gets a 6×6 pixel-grid sigil with a 4px hard-offset pink shadow, matching the audit empty state's visual rhythm. Microcopy reframed from "make sure the directory exists" to "run an agent in any folder and it will show up here".

app/projects/loading.tsx

• 8 skeleton rows staggered with the audit-row-enter keyframe (60ms per row) instead of all blinking in lockstep.
• aria-busy="loading…" pip in the section mast.

app/project/[name]/page.tsx

• Migrated from shadcn-style container mx-auto bg-card rounded-lg chrome to the unified .report + .section + .panel shell.
• <ArrowLeft /> → .btn with the ━━ glyph + [ back to projects ] label.
• Path / Modified pair is a tight green-eyebrow <dl> grid (uppercase 10px labels, mono body).
• Sessions block gets its own section-mast with the ━━ sessions label.

components/navbar.tsx

• Slipping-through badge aria tightened: pluralised label, role="status", native title tooltip.

Test plan

• bun run lint — no new warnings (4 pre-existing <img> warnings, all unrelated to this PR)
• bunx tsc --noEmit — clean
• bun run test:run — 1769 / 1769 pass
• bun run dev — all 5 routes return 200, no compilation errors

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8698f2a6-b4eb-4320-9996-8af35d92fa8a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[NiveditJain]

Superseded by SiddarthAA#1 — same diff, but targeting the actual feature branch (SiddarthAA:stable, where PR #397's work lives) instead of the upstream mirror of that branch. The head branch FailproofAI:stable-design-polish stays around since it powers the new cross-fork PR.