refactor: fixed layout.

Author: knightedcodemonkey

README.md

@@ -25,6 +25,7 @@ browser acts as the runtime host for render, lint, and typecheck flows.
 `@knighted/develop` lets you:
 
 - write component code in the browser
+- manage dynamic workspace tabs with add, rename, remove, and entry-role protection
 - switch render mode between DOM and React
 - switch style mode between native CSS, CSS Modules, Less, and Sass
 - run in-browser lint and type diagnostics
@@ -41,6 +42,10 @@ browser acts as the runtime host for render, lint, and typecheck flows.
 
 - GitHub PAT setup and usage: [docs/byot.md](docs/byot.md)
 
+## Editor Architecture
+
+- Workspace-first editor architecture and migration notes: [docs/editor-workspace-architecture.md](docs/editor-workspace-architecture.md)
+
 ## Fine-Grained PAT Quick Setup
 
 For PR/BYOT and AI chat flows, use a fine-grained GitHub PAT and follow the

docs/editor-workspace-architecture.md

@@ -0,0 +1,45 @@
+# Editor Workspace Architecture
+
+This document describes the current workspace-first editor model in `@knighted/develop`.
+
+## Overview
+
+- Workspace tabs are the source of truth for editor identity and content.
+- Tab metadata controls behavior, including entry resolution via `role: 'entry'`.
+- The default workspace starts with:
+  - `src/components/App.tsx` (entry tab)
+  - `src/styles/app.css` (style tab)
+- Only one editor panel is visible at a time in the current UI.
+- The preview compiles from the resolved entry tab and hydrates workspace module tabs.
+
+## Tab UX
+
+- Selecting any tab activates and reveals the matching editor content.
+- Add tab now requests an explicit tab name during creation.
+- Rename is first-class with a dedicated rename action on each tab.
+- Remove is available for non-entry tabs only.
+
+## Persistence Model
+
+- Workspace tab state is stored in IndexedDB workspace records.
+- Tab records persist tab role (`entry` or `module`) so entry behavior survives reload.
+- Local storage is intentionally limited to app/theme controls and GitHub integration state:
+  - BYOT token and selected repository
+  - PR drawer repository-scoped configuration
+  - layout/theme preferences
+
+## Migration Summary
+
+### Removed
+
+- Legacy DOM and CSS selectors tied to fixed `component-panel` and `styles-panel` naming.
+- Panel-era CSS branches that depended on those legacy class names.
+
+### Intentionally Legacy (for integration boundaries)
+
+- Distinct component/styles tool controls remain because diagnostics, lint actions, and PR sync flows still expose separate component and styles actions.
+- Collapse control keys still use `component` and `styles` internally for stable behavior and test coverage.
+
+### Follow-up
+
+- Introduce an optional dual-editor split/pin layout without changing tab identity and persistence semantics.

playwright/github-byot-ai.spec.ts

@@ -389,20 +389,22 @@ test('AI chat proposals can be confirmed, applied, and undone for component and
     page.getByRole('button', { name: 'Undo last Component apply' }),
   ).toBeVisible()
   await expect(page.getByRole('button', { name: 'Undo last Styles apply' })).toBeVisible()
-  await expect(page.locator('.component-panel .cm-content').first()).toContainText(
-    'Updated',
-  )
-  await expect(page.locator('.styles-panel .cm-content').first()).toContainText(
-    'rgb(10 20 30)',
-  )
+  await expect(
+    page.locator('.editor-panel[data-editor-kind="component"] .cm-content').first(),
+  ).toContainText('Updated')
+  await expect(
+    page.locator('.editor-panel[data-editor-kind="styles"] .cm-content').first(),
+  ).toContainText('rgb(10 20 30)')
 
   await page.getByRole('button', { name: 'Undo last Component apply' }).click()
-  await expect(page.locator('.component-panel .cm-content').first()).toContainText(
-    'Before',
-  )
+  await expect(
+    page.locator('.editor-panel[data-editor-kind="component"] .cm-content').first(),
+  ).toContainText('Before')
 
   await page.getByRole('button', { name: 'Undo last Styles apply' }).click()
-  await expect(page.locator('.styles-panel .cm-content').first()).toContainText('red')
+  await expect(
+    page.locator('.editor-panel[data-editor-kind="styles"] .cm-content').first(),
+  ).toContainText('red')
 })
 
 test('AI chat shows a single apply action when both editor proposals are available', async ({

playwright/helpers/app-test-helpers.ts

@@ -71,18 +71,24 @@ export const expectPreviewHasRenderedContent = async (page: Page) => {
 }
 
 export const setComponentEditorSource = async (page: Page, source: string) => {
-  const editorContent = page.locator('.component-panel .cm-content').first()
+  await page.getByRole('tab', { name: 'Open tab App.tsx' }).click()
+  const editorContent = page
+    .locator('.editor-panel[data-editor-kind="component"] .cm-content')
+    .first()
   await editorContent.fill(source)
 }
 
 export const setStylesEditorSource = async (page: Page, source: string) => {
-  const editorContent = page.locator('.styles-panel .cm-content').first()
+  await page.getByRole('tab', { name: 'Open tab app.css' }).click()
+  const editorContent = page
+    .locator('.editor-panel[data-editor-kind="styles"] .cm-content')
+    .first()
   await editorContent.fill(source)
 }
 
 export const getActiveComponentEditorLineNumber = async (page: Page) => {
   return page
-    .locator('#component-panel .cm-activeLineGutter')
+    .locator('#editor-panel-component .cm-activeLineGutter')
     .first()
     .innerText()
     .then(text => text.trim())
@@ -105,7 +111,7 @@ export const runStylesLint = async (page: Page) => {
 
 export const getActiveStylesEditorLineNumber = async (page: Page) => {
   return page
-    .locator('#styles-panel .cm-activeLineGutter')
+    .locator('#editor-panel-styles .cm-activeLineGutter')
     .first()
     .innerText()
     .then(text => text.trim())
@@ -123,6 +129,12 @@ export const ensurePanelToolsVisible = async (
   page: Page,
   panelName: 'component' | 'styles',
 ) => {
+  if (panelName === 'styles') {
+    await page.getByRole('tab', { name: 'Open tab app.css' }).click()
+  } else {
+    await page.getByRole('tab', { name: 'Open tab App.tsx' }).click()
+  }
+
   const button = getToolsButton(page, panelName)
   const isPressed = await button.getAttribute('aria-pressed')
   if (isPressed !== 'true') {

playwright/layout-panels.spec.ts

@@ -15,12 +15,9 @@ test('renders default playground preview', async ({ page }) => {
   await expectPreviewHasRenderedContent(page)
 })
 
-test('supports layout and theme toggles', async ({ page }) => {
+test('supports theme toggles', async ({ page }) => {
   await waitForInitialRender(page)
 
-  await page.getByLabel('Use side preview layout').click()
-  await expect(page.getByRole('main')).toHaveClass(/app-grid--preview-right/)
-
   await page.getByLabel('Use light theme').click()
   await expect(page.locator('html')).toHaveAttribute('data-theme', 'light')
 
@@ -33,14 +30,11 @@ test('supports layout and theme toggles', async ({ page }) => {
   expect(previewBackgroundColor).toBe('rgb(36, 86, 168)')
 })
 
-test('side layout keeps preview panel height within editor stack height', async ({
+test('fixed layout keeps preview panel height within editor stack height', async ({
   page,
 }) => {
   await waitForInitialRender(page)
 
-  await page.getByLabel('Use side preview layout').click()
-  await expect(page.getByRole('main')).toHaveClass(/app-grid--preview-right/)
-
   const metrics = await page.evaluate(() => {
     const stack = document.querySelector('.panels-stack--editors')
     const previewPanel = document.getElementById('preview-panel')
@@ -56,13 +50,9 @@ test('side layout keeps preview panel height within editor stack height', async
   expect(metrics.previewOverflowY).toBe('hidden')
 })
 
-test('side layout config keeps preview scrolling inside preview host', async ({
-  page,
-}) => {
+test('fixed layout keeps preview scrolling inside preview host', async ({ page }) => {
   await waitForInitialRender(page)
 
-  await page.getByLabel('Use side preview layout').click()
-
   const scrollConfig = await page.evaluate(() => {
     const previewPanel = document.getElementById('preview-panel')
     const previewHost = document.getElementById('preview-host')
@@ -87,85 +77,61 @@ test('side layout config keeps preview scrolling inside preview host', async ({
   expect(scrollConfig?.minHeight).toBe('0px')
 })
 
-test('expanded component and styles can shrink consistently in side layouts', async ({
+test('expanded component and styles can shrink consistently in fixed layout', async ({
   page,
 }) => {
   await waitForInitialRender(page)
 
-  for (const layoutLabel of ['Use side preview layout', 'Use left preview layout']) {
-    await page.getByLabel(layoutLabel).click()
-
-    const minHeights = await page.evaluate(() => {
-      const component = document.getElementById('component-panel')
-      const styles = document.getElementById('styles-panel')
-      return {
-        component: component
-          ? Number.parseFloat(getComputedStyle(component).minHeight)
-          : 0,
-        styles: styles ? Number.parseFloat(getComputedStyle(styles).minHeight) : 0,
-      }
-    })
-
-    expect(minHeights.component).toBeGreaterThanOrEqual(0)
-    expect(minHeights.styles).toBeGreaterThanOrEqual(0)
-    expect(Math.abs(minHeights.component - minHeights.styles)).toBeLessThanOrEqual(1)
-  }
+  const minHeights = await page.evaluate(() => {
+    const component = document.getElementById('editor-panel-component')
+    const styles = document.getElementById('editor-panel-styles')
+    return {
+      component: component ? Number.parseFloat(getComputedStyle(component).minHeight) : 0,
+      styles: styles ? Number.parseFloat(getComputedStyle(styles).minHeight) : 0,
+    }
+  })
+
+  expect(minHeights.component).toBeGreaterThanOrEqual(0)
+  expect(minHeights.styles).toBeGreaterThanOrEqual(0)
+  expect(Math.abs(minHeights.component - minHeights.styles)).toBeLessThanOrEqual(1)
 })
 
-test('panel collapse axis and direction adapt to active layout', async ({ page }) => {
+test('panel collapse axis and direction match fixed layout', async ({ page }) => {
   await waitForInitialRender(page)
-  await expect(page.getByRole('main')).toHaveClass(/app-grid/)
+  await expect(page.getByRole('main')).toHaveClass(/app-grid--preview-right/)
 
   await expectCollapseButtonState(page, 'component', {
-    axis: 'horizontal',
-    direction: 'left',
-    collapsed: false,
-  })
-  await expectCollapseButtonState(page, 'styles', {
-    axis: 'horizontal',
-    direction: 'right',
-    collapsed: false,
-  })
-  await expectCollapseButtonState(page, 'preview', {
     axis: 'vertical',
     direction: 'none',
     collapsed: false,
   })
-
-  await page.getByLabel('Use side preview layout').click()
-  await expectCollapseButtonState(page, 'preview', {
-    axis: 'horizontal',
-    direction: 'right',
-    collapsed: false,
-  })
-  await expectCollapseButtonState(page, 'component', {
+  await expectCollapseButtonState(page, 'styles', {
     axis: 'vertical',
     direction: 'none',
     collapsed: false,
   })
-
-  await page.getByLabel('Use left preview layout').click()
   await expectCollapseButtonState(page, 'preview', {
     axis: 'horizontal',
-    direction: 'left',
+    direction: 'right',
     collapsed: false,
   })
 })
 
 test('prevents collapsing all three panels at once', async ({ page }) => {
   await waitForInitialRender(page)
-  const componentPanel = page.getByRole('region', { name: 'Component' })
-  const stylesPanel = page.getByRole('region', { name: 'Styles' })
+  const componentPanel = page.locator('#editor-panel-component')
+  const stylesPanel = page.locator('#editor-panel-styles')
 
   await getCollapseButton(page, 'component').click()
+  await page.getByRole('tab', { name: 'Open tab app.css' }).click()
   await getCollapseButton(page, 'styles').click()
 
-  await expect(componentPanel).toHaveClass(/panel--collapsed-horizontal/)
-  await expect(stylesPanel).toHaveClass(/panel--collapsed-horizontal/)
+  await expect(componentPanel).toHaveClass(/panel--collapsed-vertical/)
+  await expect(stylesPanel).toHaveClass(/panel--collapsed-vertical/)
 
   await expectCollapseButtonState(page, 'preview', {
-    axis: 'vertical',
-    direction: 'none',
+    axis: 'horizontal',
+    direction: 'right',
     collapsed: false,
     disabled: true,
   })
@@ -174,24 +140,25 @@ test('prevents collapsing all three panels at once', async ({ page }) => {
     'At least one panel must remain expanded.',
   )
 
+  await page.getByRole('tab', { name: 'Open tab App.tsx' }).click()
   await getCollapseButton(page, 'component').click()
   await expectCollapseButtonState(page, 'preview', {
-    axis: 'vertical',
-    direction: 'none',
+    axis: 'horizontal',
+    direction: 'right',
     collapsed: false,
     disabled: false,
   })
 })
 
 test('does not persist panel collapse state across reload', async ({ page }) => {
   await waitForInitialRender(page)
-  const componentPanel = page.getByRole('region', { name: 'Component' })
+  const componentPanel = page.locator('#editor-panel-component')
 
   await getCollapseButton(page, 'component').click()
-  await expect(componentPanel).toHaveClass(/panel--collapsed-horizontal/)
+  await expect(componentPanel).toHaveClass(/panel--collapsed-vertical/)
   await expectCollapseButtonState(page, 'component', {
-    axis: 'horizontal',
-    direction: 'left',
+    axis: 'vertical',
+    direction: 'none',
     collapsed: true,
   })
 
@@ -202,8 +169,8 @@ test('does not persist panel collapse state across reload', async ({ page }) =>
     /panel--collapsed-horizontal|panel--collapsed-vertical/,
   )
   await expectCollapseButtonState(page, 'component', {
-    axis: 'horizontal',
-    direction: 'left',
+    axis: 'vertical',
+    direction: 'none',
     collapsed: false,
   })
 })
@@ -213,8 +180,8 @@ test('gear tools toggles default inactive and switch active/inactive per panel',
 }) => {
   await waitForInitialRender(page)
 
-  const componentPanel = page.getByRole('region', { name: 'Component' })
-  const stylesPanel = page.getByRole('region', { name: 'Styles' })
+  const componentPanel = page.locator('#editor-panel-component')
+  const stylesPanel = page.locator('#editor-panel-styles')
   const componentTools = getToolsButton(page, 'component')
   const stylesTools = getToolsButton(page, 'styles')
 
@@ -233,8 +200,24 @@ test('gear tools toggles default inactive and switch active/inactive per panel',
   await expect(componentTools).toHaveAttribute('aria-pressed', 'false')
   await expect(componentTools).toHaveAttribute('title', 'Show component tools')
 
+  await page.getByRole('tab', { name: 'Open tab app.css' }).click()
   await stylesTools.click()
   await expect(stylesPanel).not.toHaveClass(/panel--tools-hidden/)
   await expect(stylesTools).toHaveAttribute('aria-pressed', 'true')
   await expect(stylesTools).toHaveAttribute('title', 'Hide styles tools')
 })
+
+test('fixed layout keeps inactive editor panel hidden', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  const componentPanel = page.locator('#editor-panel-component')
+  const stylesPanel = page.locator('#editor-panel-styles')
+
+  const assertEntryPanelVisible = async () => {
+    await page.getByRole('tab', { name: 'Open tab App.tsx' }).click()
+    await expect(componentPanel).toBeVisible()
+    await expect(stylesPanel).toBeHidden()
+  }
+
+  await assertEntryPanelVisible()
+})

playwright/rendering-modes.spec.ts

@@ -486,10 +486,9 @@ test('auto render supports export default named component without App redeclarat
   await expect(page.locator('#preview-host pre')).toHaveCount(0)
 })
 
-test('persists layout and theme across reload', async ({ page }) => {
+test('persists theme across reload with fixed layout', async ({ page }) => {
   await waitForInitialRender(page)
 
-  await page.getByLabel('Use side preview layout').click()
   await page.getByLabel('Use light theme').click()
   await expect(page.getByRole('main')).toHaveClass(/app-grid--preview-right/)
   await expect(page.locator('html')).toHaveAttribute('data-theme', 'light')