[dastratakos]

Summary

The developer said: "I think the focus rings on file headers don't look good please fix."

The file card the keys stand on (J/K's current file, #3304) wore the keyboard's focus ring around its header (.diff-list-head[data-standing]). The ring was drawn inset, and the inset ran into the card's own 1px border and its rounded clip, so:

• it looked thicker at the top and bottom than at the sides;
• it looked clipped at the corners;
• it stood beside the card's border as a second border.

The current file is now marked the way a selected card is marked across the app (border-color: var(--luke-color-border-selected), as in desktop.css, settings.css and tasks.css). The card's own 1px edge switches to the selected edge's ink. The card is Pierre's diffs-container, the element the header stands in. The edge goes around a folded header or around the whole open file. It marks which file the keys act on; it is not keyboard focus.

• Keyboard focus is unchanged: it rings the control in the header that holds it (the fold, a path, Viewed) with the window's one ring from base.css. That ring is the same on every side, follows the control's radius, and stays inside the card.
• How the edge is drawn: a document rule, .diff-list diffs-container:has(.diff-list-head[data-standing]), sets the edge. A document rule wins over the bundle's :host border, so the bundle doesn't change.
• Deep-link landing (feat(panel): deep links to review threads in the Pull request tab #3884): the data-search-landed ring on a landed thread inside the card is untouched, and still reads as a brief 2px highlight on the thread.

Before / after

These come from the real built renderer (styles.css and diff-view.js from node scripts/build.mjs), on main and on this branch. The diff list is mounted with mountList and drawn with the real header markup from FileHead, in headless Chromium.

	before	after
Folded card stood on, light
Folded card stood on, dark
Open card stood on, light
Open card stood on, dark
Sticky header stuck, light
Sticky header stuck, dark
Keyboard focus on the fold, light
Keyboard focus on the fold, dark
Landing ring on a thread in the stood-on file (frozen mid-animation)

Evidence

• tsc --noEmit for panel: clean.
• vitest run packages/panel/src/styles packages/panel/src/tasks/agent-changes-tab.test.ts: 158 passed.
• ./scripts/repository-checks.sh: passed.
• ./scripts/oxlint.sh: 0 warnings, 0 errors.
• pnpm knip: clean.
• biome check: clean.
• Bundle budget: node scripts/build.mjs passes.
• New test styles/file-head-current.test.ts: it builds the list's markup (card, Pierre's header slot, the kept element, header) and reads what the laid sheets declare.
  • The stood-on card's edge is var(--luke-color-border-selected), another card declares no edge, and no header wears an outline.
  • It fails on main, where the header declares the ring.

Invariants

• ./scripts/check.sh green: its pieces were run one by one, as listed above, and CI runs the whole of it.
• JSON Schema goldens unchanged.
• Every behavior change has, in this PR, the test that fails without it; no change-detector test added.
• Gateway envelope goldens unchanged.
• No new as type assertion.
• No Effect.run*.
• No new raw async primitives.
• No discarded Effect.
• Test count +1.
• No hand-rolled file replaced.
• No CLAUDE.md/AGENTS.md change needed.
• PRIVACY.md unchanged.
• Deps unchanged.
• No barrel or door change.

Notes

• Desktop and panel only, so no Preview run is needed.

Made with Luke

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
luke-web	Ready	Preview	Oct 20, 2026 6:11pm UTC

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.