Details panel

Problem Context

• A work surface contains selectable objects such as tickets, records, assets, files, alerts, orders, map markers, comments, or tasks.
• Users benefit from comparing several nearby objects without leaving the current list, table, map, board, or feed.
• The details can be summarized in a durable side or adjacent region without requiring a modal response.
• The product can keep selection, sorting, filtering, empty state, focus, and detail refresh synchronized.

Selection Rules

• Choose details panel when a selected object needs durable side-by-side inspection while users browse neighboring objects.
• Use drawer when the surface is temporary, opened by a discrete command, and needs close behavior and focus movement into the panel.
• Use hover card when the content is a compact transient preview before navigation rather than a durable inspection area.
• Use accordion or disclosure details when the content belongs inline in the page flow rather than to a changing selected object.
• Use table, data grid, or expandable row when the needed detail should remain row-local inside the data surface.
• Use a full object page when users need deep reading, long editing, durable URL state, sharing, comments, history, or browser navigation.
• Use filter panel when the panel contains criteria that narrow results and synchronize active counts, not object details.
• Use preview panel when the panel's primary job is media or document preview rather than structured metadata inspection.
• Do not use a details panel when no stable selected object exists or when selection changes faster than the panel can stay accurate.

Required States

• No selection state with a clear prompt or preserved last-selection rule.
• Selected-object state with source item highlighted and panel title naming the same object.
• Keyboard list-navigation state where focus can move through objects without being stolen by the panel.
• Updated-selection state where metadata, status, activity, and actions refresh together.
• Filtered or sorted state where the panel either remains tied to a visible selected object or explains that selection was cleared.
• Loading or refreshing state that does not show stale details as current.
• Collapsed, resized, or narrow-screen state with a visible way to restore detail or open the full object.
• Full-page escalation state for deep reading, editing, comments, history, or shareable detail.

Interaction Contract

• Selecting an object updates both the source selection indicator and the details panel title.
• The panel content describes only the selected object unless a clearly labelled comparison mode is active.
• Keyboard focus remains in the source list, table, map, board, or feed while users move selection for review.
• The panel exposes safe secondary actions such as Open full record, Assign owner, or Copy link without hiding required primary task flows.
• If selection disappears because of filtering, sorting, deletion, permission change, or refresh, the panel updates to a clear empty or unavailable state.
• The panel can be collapsed, resized, or replaced by a full-page route when space is constrained.
• Panel actions preserve or intentionally update the selected object, and the status text confirms the result.

Implementation Checklist

• Define the owning selectable region and stable selected-object ID before rendering panel content.
• Show selected state in the source region and repeat the selected object's name or identifier in the panel heading.
• Separate inspection fields from actions; keep destructive or multi-step actions out of the panel unless routed to review.
• Keep focus in the source region during selection movement, and move focus into the panel only after an explicit panel action.
• Handle loading, stale data, missing permissions, deleted objects, filtered-away objects, and empty selection states.
• Provide collapse, resize, or full-page escalation when the panel competes with the workspace for width.
• Test row selection, keyboard movement, sort, filter, refresh, collapse, narrow viewport, and full-object routing.

Common Generated-UI Mistakes

• Showing a details panel with no selected-object identity.
• Keeping the previous ticket summary in the persistent panel after the highlighted row has moved to a different ticket.
• Stealing focus into the panel on every arrow-key movement through a list.
• Mixing object details with filters, navigation, global settings, and unrelated commands.
• Using a details panel for long primary editing that needs validation, saved progress, or route history.
• Clearing selection after sort or filter without updating the panel.
• Making the panel so wide that it prevents comparison with the source region.

Critique Questions

• Which exact object owns the panel content right now?
• Can users see the selected object and panel title at the same time?
• What happens when users move selection by keyboard, sort, filter, delete, or refresh the source region?
• Does the panel support inspection, or has it become a drawer, form, filter panel, preview panel, or object page?
• Where do users go for full detail, deep editing, comments, history, or sharing?
• How does the panel adapt when the viewport cannot support side-by-side inspection?