Add keyboard navigation

[jadefw]

This PR adds keyboard navigation to the VariantSwitcher to make switching between views and variants way smoother:

• H: Navigate to home
• C: Go to comparison view
• 1-5: Switch between variants/iterations

Shortcuts are disabled when typing in input fields or using modifier keys (Ctrl/Cmd) to prevent accidental triggers.

[vercel]

@jadefw is attempting to deploy a commit to the Dara's projects Team on Vercel.

A member of the Team first needs to authorize it.

[SunkenInTime]

@codex tldr of the pr?

[chatgpt-codex-connector]

TL;DR

This PR adds keyboard shortcuts to the gallery’s variant switcher:

• H → return to the home page.
• C → open comparison view for the current model, group, and iteration.
• 1–5 → jump directly to that iteration. src/components/gallery/variant-header.tsxL54-L75

It also avoids triggering shortcuts while the user is typing in an input, textarea, or editable element, and ignores shortcuts combined with Ctrl, Cmd, or Alt. The keyboard listener is removed when the component unmounts. src/components/gallery/variant-header.tsxL40-L52 src/components/gallery/variant-header.tsxL78-L80

Checks

• ✅ git diff --stat 8bf39097eaa6a7166f7c04258ecd1a59dd067bdc..854e67962548f5648fd0b7282279cee8988142db
• ✅ git diff 8bf39097eaa6a7166f7c04258ecd1a59dd067bdc..854e67962548f5648fd0b7282279cee8988142db --
• ✅ git status --short --branch

No code changes were needed for this summary.

View task →

[SunkenInTime]

@jadefw fix the merge conflicts n i'll get to merge

[SunkenInTime]

@greptile-ai

[SunkenInTime]

@greptileai

[greptile-apps]

Greptile Summary

The gallery header adds keyboard navigation for home, comparison, and iteration selection. Browser validation confirmed that lowercase h and c navigate as intended, but their Shift-modified forms do not navigate because the handler only accepts lowercase key values. Update the letter-key matching before merging.

Confidence Score: 4/5

Not ready to merge because Shift-modified gallery navigation shortcuts fail in the rendered application.

A production build and Chromium browser session directly exercised the affected keyboard interactions. The observed URLs confirm that lowercase shortcuts work while Shift-modified equivalents do not.

Files Needing Attention: src/components/gallery/variant-header.tsx

T-Rex Logs

What T-Rex did

• T-Rex executed a Playwright shortcut probe to exercise the gallery shortcut flow.
• T-Rex observed the gallery shortcut navigation output during the probe.
• T-Rex captured visuals showing the lowercase h navigation to home and the subsequent state after Shift+H.
• T-Rex produced proofs for two P1 findings and linked them to their review comments.
• General contract validation confirmed that the lowercase h shortcut lands on the home path, the lowercase c shortcut lands on the compare path, and the Shift+H and Shift+C shortcuts fail to navigate to their destinations, staying on the gallery path.

_{Ran code and verified through T-Rex}

Comments Outside Diff (1)

1. General comment

   Shift-modified H and C gallery shortcuts do not navigate

   • Bug
     • On the live gallery variant route, lowercase h navigates to / and lowercase c navigates to the expected compare URL. With focus outside editable controls (BODY, EDITABLE=false), Shift+H and Shift+C remain at /with-design-skill/composer-1.5/1 instead of navigating.
   • Cause
     • src/components/gallery/variant-header.tsx uses exact lowercase checks at lines 54 and 60: e.key === "h" and e.key === "c". Shift-modified browser key events provide uppercase key values, so neither branch executes.
   • Fix
     • Normalize the key before comparison (for example, const key = e.key.toLowerCase() and compare key to "h" / "c") while retaining the existing modifier and editable-target guards.

   _{Ran code and verified through T-Rex}

_{Reviews (1): Last reviewed commit: "Add keyboard navigation" | Re-trigger Greptile}

[greptile-apps]

Shift-modified letter shortcuts do not navigate

The handler only matches lowercase "h" and "c". On the rendered gallery route, lowercase shortcuts navigate correctly, but Shift+H and Shift+C leave the visitor on the current variant even when focus is outside an editable element. Normalize the letter key before comparing it so navigation works regardless of Shift or Caps Lock state.

Artifacts

Executed Playwright shortcut probe source

• The authored Chromium Playwright probe opens the live gallery variant, sends lowercase and Shift-uppercase H/C keys outside editable controls, and records the resulting URLs; the executable test source establishes the reproduction method and takeaway.

Observed gallery shortcut navigation output

• Output captured from `node trex-artifacts/variant-shortcuts-probe.mjs` in `/home/user/repo` records each key, non-editable BODY focus, expected URL, and actual URL; lowercase navigation works while both Shift-uppercase routes fail, the takeaway.

▶ Lowercase h shortcut navigating from the gallery variant to home

• Chromium recording of the real gallery variant before the Shift-uppercase comparison, showing lowercase `h` navigating to the home URL; the baseline shortcut works, the takeaway.

Poster frame after lowercase h navigation to home

• Poster frame from the lowercase `h` recording after the gallery route navigated to home; it visually supports the working lowercase baseline, the takeaway.

▶ Shift+H shortcut remaining on the gallery variant

• Chromium recording of `Shift+H` on the same live gallery variant, showing the route remains unchanged rather than navigating home; the Shift-uppercase shortcut failure is confirmed, the takeaway.

Poster frame after Shift+H leaves the gallery variant unchanged

• Poster frame from the Shift+H recording showing the same gallery variant still rendered after the key press; uppercase navigation did not occur, the takeaway.

_{Ran code and verified through T-Rex}