## Problem/Motivation We currently have 2 modes in the property panel, and the user can switch between the two. However, that has potentially 2 caveats: - While reviewing a flow, the configured properties for each step are not visible - When navigating through the step data and using one of them for a property field, it's a bit tricky to provide a convenient way to insert it into the right field at the right place. E.g., users may want to append, insert, replace, or whatnot. Review mode also stacks up to four resizable sections into a 320px wide panel: playback controls with the step list, step data, global tokens and template tokens. Nothing is readable until the user drags the separators, and the two token sections repeat data that the `[` token picker already offers. {width=899 height=600} {width=895 height=600} {width=895 height=600} ## Proposed resolution The UX meeting rejected merging both views into one always-visible panel. The panel keeps its two modes, and the button that switches from properties into review mode stays as it is. Token insertion stays with the `[` picker, which already lists the step data, global and template categories. Review mode itself gets simplified. The panel header is emptied and carries a single "Back" control with a left arrow that returns to property mode. The global token and template token sections are removed from the panel body, because the picker already provides both. Once replay data is loaded, the body shows a single list, the steps. Selecting a step expands its step data inline underneath that step, so the separate step data section and the draggable section separators are gone. Step rows do not show a token count. Screenshots two and three above show the target layout. A keyboard shortcut toggles between property and review mode. It has to work on every OS and browser, so it uses `Alt+Shift+R` (`Option+Shift+R` on macOS) and matches `event.code`, not `event.key`. No major browser reserves that combination, and `event.code` keeps it working where Option produces a different character. ## Remaining tasks - Rebuild the review body as one step list with inline step data, and drop the vertical section resizing that only existed for the removed sections. - Replace the review header with the single back control, and wire the mode toggle shortcut through the existing `useKeyboardShortcuts` hook. - Update the modeler documentation, the keyboard shortcut reference and the generated screenshots. ## User interface changes In review mode the header shows only the back control. The Global Tokens, Template Tokens and Step Data sections are gone; step data renders under the selected step. `Alt+Shift+R` switches between the two panel modes. ## API changes No PHP API changes. In the React UI, `ReplayPanelContent` drops its `globalTokens`, `templateTokens` and `isTemplate` props, `useKeyboardShortcuts` gains an `onToggleReviewMode` callback with a matching capability flag, and the now unused `useVerticalPanelResize` hook is removed. ## Data model changes None. The `replaySectionRatios` localStorage entry is no longer read or written. <details><summary>LLM-summary - Click to expand</summary> ### Where the current behavior lives - `ui/src/components/PropertyPanel.tsx` owns the shared panel chrome. Its header is a three-zone grid (label, icons, switch). In review mode zone 1 renders an activity icon plus the "Review flow" label, zone 2 is empty, and zone 3 renders the "Properties" button that switches back. `panelMode` lives in `usePanelStore` and is deliberately not persisted. - `ui/src/components/ReplayPanelContent.tsx` renders the review body: the execution entry dropdown, then a `.resizable-sections` container holding the playback control section with the step list, the "Step Data" section, and the optional "Global Tokens" and "Template Tokens" sections. Section heights come from `useVerticalPanelResize`, persisted under the `replaySectionRatios` storage key. - `ui/src/components/ReplayPanel.tsx` is a thin standalone wrapper kept for stories and tests since the unified panel refactor in project/modeler#3576269. ### Why removing the token sections loses nothing `ui/src/utils/tokenPickerData.ts` builds the picker categories from the same `globalTokens` and `templateTokens` settings and pushes a `global` category, plus a `template` category when the model is a template. `PropertyPanel` passes those values into `TokenSourceContext`, independently of the review body, so the picker keeps full access after the sections are dropped. ### Shortcut selection `useKeyboardShortcuts` currently matches `event.key` for Delete, Ctrl/Cmd+C, V, F, Z, Y and Escape. A mode toggle must avoid browser reservations: Ctrl/Cmd+R and Ctrl/Cmd+Shift+R are reload and hard reload, Cmd+Option+R is "Reload from origin" in Safari, and most Ctrl+Shift+letter combinations are taken by devtools, bookmarks or private windows in Chrome or Firefox. `Alt+Shift+R` is free in Chrome, Firefox, Safari and Edge on Windows, Linux and macOS. On macOS, Option based combinations change `event.key` to the composed character, so the handler matches `event.code === 'KeyR'` together with `altKey && shiftKey` and no Ctrl or Meta. The toggle routes through the existing entry paths: in review mode it calls `setPanelMode('event')`, and in property mode it calls `Flow.requestReviewMode`, which keeps the structural validation and the per-event session logic intact. The shortcut is inactive while a form field has focus, like every other shortcut in the hook. ### Test and documentation impact - Unit tests: `ui/src/components/__tests__/ReplayPanel.test.tsx` asserts the Global Tokens and Template Tokens sections and the Step Data header; those assertions are replaced by the inline step data behavior. `ui/src/hooks/__tests__/useKeyboardShortcuts.test.ts` and `ui/src/components/__tests__/Flow.test.tsx` cover the new toggle. - E2E: `ui/tests/e2e/replay.spec.ts` and `ui/tests/e2e/screenshots.spec.ts` target `.data-content[aria-label="Step Data"]`, which no longer exists. - Docs: `docs/interface/replay-panel.md`, `docs/replay/tokens.md`, `docs/components/configuration.md`, `docs/accessibility.md`, `docs/features/keyboard-shortcuts.md` and `ui/docs/keyboard-shortcuts.md`. </details> AI-Generated: Yes (agent drafted this summary from the UX meeting decisions supplied by the maintainer and from reading the modeler UI source; reviewed by jurgenhaas).