Preview workspace — renderer-preserving tabs, panes, and breadcrumb

[jeonghun-jj-lee]

Important

Problem -- Preview's working single-file companion replaces the current file on each Sidebar or Chat selection. Researchers comparing a script with its output, or a specification with its implementation, lose their place. The prior workspace design tried to solve this by recreating renderer state from a new store; that duplicated existing renderer ownership and regressed normal scrolling and Markdown editing.

Approach -- Keep the existing Preview renderer stack intact and build a thin workspace shell around it. The shell owns only layout: unique open paths, tab-to-pane assignment, pane geometry, focused pane, pane zoom, dirty indicators, and an eight-tab cap. Each open path retains one live baseline renderer instance. Tab switches, pane moves, and outer-tab switches preserve that instance rather than reconstructing its document, CodeMirror state, PDF layout, scroll, or focus.

Scope -- in: inner tabs, persistent renderer hosts, recursive panes, drag-first reorder/transfer/edge split, CSS-only canvas overflow, pane-scoped controls, dirty-close confirmation, and breadcrumb sibling navigation. Out: a renderer-state hydration adapter, persisted workspace-canvas scroll, duplicated document/scroll/focus state, silent tab eviction, and changing the Sidebar's double-click behavior.

Assumptions -- Preview remains one outer Work Column tab. Its existing renderer components remain the source of truth for content, drafts, local scroll, and focus. A maximum of eight retained renderers is acceptable; opening a ninth file requires an explicit close.

Decision

Preview is a renderer-preserving multi-file workspace, not a second file-rendering system.

The outer Preview surface remains mounted while another outer tab is selected. It becomes hidden and inert rather than disposed. A CSS-only canvas may expose a pane tree larger than the Work Column, but it has no scroll listener, stored position, restoration behavior, or animation-frame scroll work.

A renderer host is stable per open path. Moving a tab between panes relocates that host without reconstructing the live renderer. The workspace stores only a dirty boolean for tab chrome, never draft content. Closing a dirty tab offers save, discard, or cancel.

Superseded Design

The previous body of this issue required a lifted WorkspaceState, one active renderer per pane, renderer-state hydration, and persisted canvas scroll. That design is superseded. It created a second owner for state already owned by PreviewFileView, CodeMirror, and PDF rendering, which produced interaction regressions.

Acceptance Criteria

• Sidebar single-click and Chat file-pill selection open a file in Preview; Sidebar double-click still opens the native VS Code editor.
• A file has at most one live inner tab across the workspace. Re-opening it focuses its existing pane and tab.
• At most eight renderer instances are open. A ninth open is refused with a clear close-a-tab affordance; clean tabs are never silently evicted.
• Every open file retains its live renderer through inner-tab changes, pane transfer or split, and outer-tab changes. Its draft, selection, local scroll, and loaded content remain intact while it stays open.
• Closing a dirty tab offers save, discard, or cancel. The workspace does not retain draft text itself.
• Dragging an inner tab reorders it, transfers it to another pane, or edge-splits a pane. A Preview-scoped DnD spike must prove non-interference with outer tabs before this ships.
• Recursive panes enforce a 150px leaf minimum. If the tree exceeds the Work Column, CSS-only overflow exposes it without persisting or restoring canvas position.
• Each pane has independent zoom and existing preview/edit controls. The existing renderer remains their implementation owner.
• Breadcrumb sibling navigation is added after tabs, renderer preservation, and pane interactions are proven. It opens files through the same unique-path route.
• Browser interaction tests prove stable Markdown focus after grammar loading, ordinary Preview scrolling, Cmd+S, outer-tab persistence, renderer identity across drag relocation, dirty-close confirmation, and DnD non-interference before another Dev Host workspace build is vendored.

Rewrite Order

• Preview workspace slice 1 — baseline renderer interaction contract #942: lock the baseline renderer interaction contract in real Chromium before production workspace code changes.
• Preview workspace slice 2 — persistent renderer pool and inner tabs #943: add persistent renderer hosts, one-pane inner tabs, unique-path routing, outer-tab retention, dirty close behavior, and the eight-tab limit.
• Preview workspace slice 3 — drag-first pane tree and renderer relocation #944: add the drag-first recursive pane tree, renderer-host relocation, full-footprint prospective-pane previews, and CSS-only overflow.
• Preview workspace slice 4 — pane-scoped controls and focused-pane chrome #945: add pane-scoped zoom/control wiring and focused-pane chrome without duplicating renderer state.
• Preview workspace slice 5 — breadcrumb navigation and interaction certification #946: add breadcrumb sibling navigation through the bounded Sidebar-visible-children bridge and run the complete browser certification gate.

Each child issue is rewritten against this parent before implementation resumes.

Constraints And Invariants

• The workspace shell does not read or write files, own draft text, touch CodeMirror, restore focus, or manage document scroll.
• The renderer pool is the only place an open file's renderer is created or retained.
• Preview remains a single outer side-panel tab; its inner workspace never changes outer tab semantics.
• No code from the prior hydration-adapter implementation is reused without re-establishing this ownership boundary and passing browser interaction tests.

Source

Amends the Preview workspace decision recorded in ADR 0013 and replaces this issue's original state-adapter implementation plan.

[jeonghun-jj-lee]

Implementation is staged for review across the two source repositories.\n\n- App workspace, pane tree, controls, and inner DnD: https://github.com/harmoniqs/opencode/pull/319\n- Extension breadcrumb visible-children bridge: https://github.com/harmoniqs/amicode/pull/949\n\nAvailable verification is green: fork unit + browser harnesses/typechecks; Amicode extension suite (3,082 tests) and build. The authored Playwright regressions remain pending a provisioned Chromium executable.

[jeonghun-jj-lee]

All five slices shipped: #942 (baseline contract), #943 (persistent renderer pool + inner tabs), #944 (drag-first pane tree), #945 (pane-scoped zoom + focused-pane chrome), #946 (breadcrumb navigation). The Preview workspace is live with renderer-preserving tabs, recursive panes, per-pane zoom, focused-pane tracking, and breadcrumb sibling navigation.