feat: dynamic tabs.

[knightedcodemonkey]

• closes Multi-Tab Workspace (Dynamic Tabs, Local IndexedDB Persistence, and Modular Preview Architecture) #62

[Copilot]

Pull request overview

This PR refactors the in-browser editor into a workspace-first, multi-tab experience with local persistence, and simplifies the app layout to a single fixed “preview-right” grid while updating the render pipeline to derive the preview entry from workspace tab metadata.

Changes:

• Introduces workspace tab state + persistence (IndexedDB) and adds UI for adding/renaming/removing tabs with an entry role.
• Updates the render runtime to build preview source from workspace tabs (entry resolution + dependency hydration).
• Simplifies layout/theme controls by removing layout switching and adjusting CSS/Playwright selectors to match the new DOM structure.

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/styles/panels-editor.css	Adds workspace tab styling and updates selectors to new .editor-panel structure.
src/styles/layout-shell.css	Reworks grid layout to a fixed preview-right configuration and adds workspace tabs strip styling.
src/styles/ai-controls.css	Styles Open PR drawer “Local contexts” controls.
src/modules/workspace-tabs-state.js	Adds a small in-memory tabs state container (active tab, upsert/remove/replace).
src/modules/workspace-storage.js	Extends workspace persistence to include per-tab role and updates tab record normalization.
src/modules/render-runtime.js	Adds workspace-tab driven preview entry resolution and multi-tab hydration logic.
src/modules/preview-entry-resolver.js	Prefers explicit tab.role === 'entry' when selecting the preview entry tab.
src/modules/layout-theme.js	Removes grid layout handling; theme-only controller.
src/modules/editor-pool-manager.js	Adds a small MRU-based mount/eviction utility for editor panels.
src/index.html	Replaces component/styles panels with unified editor panels and adds workspace tabs + local context select UI.
src/app.js	Wires workspace tabs, local context persistence, fixed layout collapse behavior, and new DOM ids/classes.
README.md	Documents workspace tab capability and links new architecture doc.
playwright/*.spec.ts	Updates tests for new layout/tabs UI; adds storage reset helper; removes several render/diagnostics specs.
playwright/helpers/app-test-helpers.ts	Adds resetWorkbenchStorage and updates helpers to activate tabs before interacting.
docs/webkit-open-pr-drawer-triage.md	Removes obsolete WebKit triage handoff doc.
docs/render-pipeline-multitab-spec-plan.md	Adds a follow-up test plan doc for the new render pipeline + multitab UX.
docs/issue-62-continuation-prompt.md	Adds a handoff prompt for remaining hardening scope related to issue #62.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 27 out of 27 changed files in this pull request and generated 4 comments.

Comments suppressed due to low confidence (1)

src/styles/preview-controls.css:93

• The .toggle styling was removed from this stylesheet, but index.html still uses <label class="toggle"> for the Auto render control. With no remaining .toggle / .toggle input rules anywhere in src/styles, the toggle layout/accent styling will regress (likely misaligned label + default checkbox styling). Consider restoring the toggle styles (either here or in a shared controls stylesheet) or removing the unused toggle class from the markup.

.controls label.color-control {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.controls input[type='color'] {
  width: 34px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.