PR Custody

feat(preview-panel): structured header API + dialog a11y (shared component)

@Malayvasachecks n/achecks…claude/preview-panel-core → main18 files · +816 −426review: @shamsharoonupdated 2d ago

▸Description· 4 comments · 1 noise

Foundation PR for the row-click slide-over redesign (logs / sessions / users / auth-configs / triggers / toolkit-detail). Additive and backward-compatible — no instance changes here; each instance migrates on its own follow-up PR, then a final cleanup removes the legacy prop.

Structured header (the core fix)

Today every instance hand-builds its header and makes the opaque ID the title (ses_…, user_…, ac_…), with the human-readable name absent, generic-iconed, inline-after-a-"·", or demoted to a subtitle — inconsistently.

New props render one consistent identity:

icon — entity icon / AppLogo
title — human-readable, primary
id={{ value, label, trackEvent }} — copyable mono line, secondary
ariaLabel — dialog label

The legacy header ReactNode still works and is rendered whenever title is absent, so un-migrated instances are untouched. The structured path also absorbs the [&_svg]:opacity-100 copy-reveal hack that was copy-pasted into all four headers.

Dialog a11y (lighter tier, per decision — no focus trap)

role="dialog" + aria-label, aria-modal="false"
Escape closes the panel (was click-outside / X only)
focus moves into the panel on open and restores to the trigger row on close
aria-label on Expand + Close icon buttons (were tooltip-only → no accessible name)
role="tablist"/role="tab"/aria-selected on the tab bar

These land in the shared animation wrapper, so all instances gain Escape + focus management immediately, before their header migration.

Deliberately not touched

Panel widths stay per-instance (logs 480 vs others 550) — log detail is denser; that's an intentional product difference, not drift.

Follow-ups

Per-instance PRs migrate sessions, users, auth-configs, triggers, logs (LogDetailPanel), and toolkit-detail to the structured header; final PR drops the deprecated header prop.

🤖 Generated with Claude Code

@Malayvasa2d ago

Pushed fixes for all three Bugbot findings (each verified against the code first) plus one design change:

Escape gated on onClickOutside — confirmed, and worse than reported: only logs passes onClickOutside. The primary Escape handler now lives in PreviewPanel itself, keyed off onClose (which every instance passes) — so Escape works on all shared instances with zero instance changes. The wrapper keeps a copy (gated on onClickOutside) to cover bespoke children like the logs detail panel; double-firing is idempotent.
Refocus on row change — confirmed. Focus now tracks open-state transitions (wasOpenRef): moves in only on closed→open, restores only on open→closed; prev/next row navigation leaves focus where the user put it.
Focus outside the labeled dialog — confirmed. role="dialog", aria-label (new ariaLabel prop on the wrapper, default "Details"), and tabIndex={-1} are now colocated on the focused motion.div; removed from the inner component.

Also: panel surface bg-background → bg-card (dark: oklch 0.159 → 0.218) so the slide-over reads as an elevated layer above the page rather than a same-level region — proper dark-theme elevation via surface step + the existing border-l.

@Malayvasa2d ago

Pushed the instance migrations (same PR per discussion):

Instance	Title (was: raw ID)	ID line	Notes
Triggers	humanized trigger name (promoted from subtitle)	`trigger_xxx` copyable	toolkit logo icon kept; "· toolkit-slug" header text dropped (already a details row)
Auth configs	config name e.g. `gmail-cq89z5`

▸ 1 bot/status comment hidden

@vercel[bot]2d ago

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

Project	Deployment	Actions	Updated (UTC)
dashboard	Ready	Preview, Comment	Jun 11, 2026 5:14am

loading diff…

Structured header (the core fix)

New props render one consistent identity:

icon — entity icon / AppLogo

title — human-readable, primary

id={{ value, label, trackEvent }} — copyable mono line, secondary

ariaLabel — dialog label

Dialog a11y (lighter tier, per decision — no focus trap)

role="dialog" + aria-label, aria-modal="false"

Escape closes the panel (was click-outside / X only)

focus moves into the panel on open and restores to the trigger row on close

aria-label on Expand + Close icon buttons (were tooltip-only → no accessible name)

role="tablist"/role="tab"/aria-selected on the tab bar

These land in the shared animation wrapper, so all instances gain Escape + focus management immediately, before their header migration.

@Malayvasa2d ago

Pushed fixes for all three Bugbot findings (each verified against the code first) plus one design change:

Escape gated on onClickOutside — confirmed, and worse than reported: only logs passes onClickOutside. The primary Escape handler now lives in PreviewPanel itself, keyed off onClose (which every instance passes) — so Escape works on all shared instances with zero instance changes. The wrapper keeps a copy (gated on onClickOutside) to cover bespoke children like the logs detail panel; double-firing is idempotent.
Refocus on row change — confirmed. Focus now tracks open-state transitions (wasOpenRef): moves in only on closed→open, restores only on open→closed; prev/next row navigation leaves focus where the user put it.
Focus outside the labeled dialog — confirmed. role="dialog", aria-label (new ariaLabel prop on the wrapper, default "Details"), and tabIndex={-1} are now colocated on the focused motion.div; removed from the inner component.

Instance

Title (was: raw ID)

ID line

Notes

Triggers

humanized trigger name (promoted from subtitle)

trigger_xxx copyable

toolkit logo icon kept; "· toolkit-slug" header text dropped (already a details row)

Auth configs

config name e.g. gmail-cq89z5

Project

Deployment

Actions

Updated (UTC)

dashboard

Ready

Preview, Comment

Jun 11, 2026 5:14am

Before	After
Filter widget portaled into the panel's tab bar	No filter in the panel — filtering lives on the session detail page (one click via expand)
Each event = bordered card; errors = filled `bg-destructive/10` red slabs	Borderless rows with hairline dividers; errors marked by icon + tool-name color only
`w-24` "Tool Call" label + provider/slug + duration + time + chevron per row	Icon carries the event type; the tool slug (mono) gets the freed space
Timeline rail + branch connectors eating left margin	Flat list — rail reserved for the detail page