feat: tab activation guards, startup re-entry restore order, specifier compatibility resolution.

Author: knightedcodemonkey

playwright/rendering-modes.spec.ts

@@ -13,6 +13,22 @@ import {
   waitForInitialRender,
 } from './helpers/app-test-helpers.js'
 
+const renameWorkspaceTab = async (
+  page: import('@playwright/test').Page,
+  {
+    from,
+    to,
+  }: {
+    from: string
+    to: string
+  },
+) => {
+  await page.getByRole('button', { name: `Rename tab ${from}` }).click()
+  const renameInput = page.getByLabel(`Rename ${from}`)
+  await renameInput.fill(to)
+  await renameInput.press('Enter')
+}
+
 test.beforeEach(async ({ page }) => {
   await resetWorkbenchStorage(page)
 })
@@ -626,6 +642,79 @@ test('workspace tabs resolve extensionless relative imports through virtual modu
   )
 })
 
+test('workspace tabs resolve .js specifiers to tsx workspace modules when exact match is missing', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  await ensurePanelToolsVisible(page, 'component')
+
+  await addWorkspaceTab(page)
+
+  await setWorkspaceTabSource(page, {
+    fileName: 'module.tsx',
+    source: "export const label = 'js specifier to tsx fallback'",
+  })
+
+  await setWorkspaceTabSource(page, {
+    fileName: 'App.tsx',
+    source: [
+      "import { label } from './module.js'",
+      'export const App = () => <button type="button">{label}</button>',
+    ].join('\n'),
+  })
+
+  await expect(page.getByRole('status', { name: 'App status' })).toHaveText('Rendered')
+  await expect(getPreviewFrame(page).getByRole('button')).toContainText(
+    'js specifier to tsx fallback',
+  )
+})
+
+test('workspace graph errors are deterministic for ambiguous extension compatibility matches', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  await ensurePanelToolsVisible(page, 'component')
+
+  await addWorkspaceTab(page)
+  await addWorkspaceTab(page)
+
+  await renameWorkspaceTab(page, {
+    from: 'module-2.tsx',
+    to: 'module.ts',
+  })
+
+  await setWorkspaceTabSource(page, {
+    fileName: 'module.tsx',
+    source: "export const label = 'from tsx'",
+  })
+
+  await setWorkspaceTabSource(page, {
+    fileName: 'module.ts',
+    source: "export const label = 'from ts'",
+  })
+
+  await setWorkspaceTabSource(page, {
+    fileName: 'App.tsx',
+    source: [
+      "import { label } from './module.js'",
+      'export const App = () => <button type="button">{label}</button>',
+    ].join('\n'),
+  })
+
+  await expect(page.getByRole('status', { name: 'App status' })).toHaveText('Error')
+  await expect(page.locator('#preview-host pre')).toContainText(
+    'Preview entry references ambiguous workspace module: ./module.js',
+  )
+  await expect(page.locator('#preview-host pre')).toContainText(
+    'src/components/module.ts',
+  )
+  await expect(page.locator('#preview-host pre')).toContainText(
+    'src/components/module.tsx',
+  )
+})
+
 test('workspace graph errors for missing modules remain deterministic', async ({
   page,
 }) => {

playwright/workspace-tabs.spec.ts

@@ -115,3 +115,62 @@ test('renaming module tab preserves source content', async ({ page }) => {
     .first()
   await expect(editorContent).toContainText('export const Value = () => <p>Kept</p>')
 })
+
+test('active tab remains source of truth for visible editor panel', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await addWorkspaceTab(page)
+  await addWorkspaceTab(page)
+
+  const componentPanel = page.locator('#editor-panel-component')
+  const stylesPanel = page.locator('#editor-panel-styles')
+
+  await page.getByRole('tab', { name: 'Open tab app.css' }).click()
+  await expect(page.getByRole('tab', { name: 'Open tab app.css' })).toHaveAttribute(
+    'aria-selected',
+    'true',
+  )
+  await expect(stylesPanel).not.toHaveAttribute('hidden', '')
+  await expect(componentPanel).toHaveAttribute('hidden', '')
+
+  await page.getByRole('tab', { name: 'Open tab module-2.tsx' }).click()
+  await expect(page.getByRole('tab', { name: 'Open tab module-2.tsx' })).toHaveAttribute(
+    'aria-selected',
+    'true',
+  )
+  await expect(componentPanel).not.toHaveAttribute('hidden', '')
+  await expect(stylesPanel).toHaveAttribute('hidden', '')
+
+  await page.locator('#collapse-component').click()
+  await page.getByRole('tab', { name: 'Open tab app.css' }).click()
+
+  await expect(page.getByRole('tab', { name: 'Open tab app.css' })).toHaveAttribute(
+    'aria-selected',
+    'true',
+  )
+  await expect(stylesPanel).not.toHaveAttribute('hidden', '')
+  await expect(componentPanel).toHaveAttribute('hidden', '')
+})
+
+test('startup restores last active workspace tab after reload', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await addWorkspaceTab(page)
+  await addWorkspaceTab(page)
+
+  await page.getByRole('tab', { name: 'Open tab module-2.tsx' }).click()
+  await expect(page.getByRole('tab', { name: 'Open tab module-2.tsx' })).toHaveAttribute(
+    'aria-selected',
+    'true',
+  )
+
+  await page.reload()
+  await waitForInitialRender(page)
+
+  await expect(page.getByRole('tab', { name: 'Open tab module-2.tsx' })).toHaveAttribute(
+    'aria-selected',
+    'true',
+  )
+  await expect(page.locator('#editor-panel-component')).not.toHaveAttribute('hidden', '')
+  await expect(page.locator('#editor-panel-styles')).toHaveAttribute('hidden', '')
+})

src/app.js

@@ -154,6 +154,7 @@ let workspaceSaver = null
 let activeWorkspaceRecordId = ''
 let activeWorkspaceCreatedAt = null
 let isApplyingWorkspaceSnapshot = false
+let hasCompletedInitialWorkspaceBootstrap = false
 const workspaceTabsState = createWorkspaceTabsState({
   tabs: [
     {
@@ -1093,6 +1094,21 @@ const ensureWorkspaceTabsShape = tabs => {
   })
 }
 
+const resolveWorkspaceActiveTabId = ({ tabs, requestedActiveTabId }) => {
+  const nextTabs = Array.isArray(tabs) ? tabs : []
+  const requestedId = toNonEmptyWorkspaceText(requestedActiveTabId)
+
+  if (requestedId && nextTabs.some(tab => tab?.id === requestedId)) {
+    return requestedId
+  }
+
+  if (nextTabs.some(tab => tab?.id === 'component')) {
+    return 'component'
+  }
+
+  return toNonEmptyWorkspaceText(nextTabs[0]?.id)
+}
+
 const buildWorkspaceTabsSnapshot = () => {
   const activeTabId = workspaceTabsState.getActiveTabId()
   return workspaceTabsState.getTabs().map(tab => {
@@ -1265,7 +1281,10 @@ const applyWorkspaceRecord = async (workspace, { silent = false } = {}) => {
 
     workspaceTabsState.replaceTabs({
       tabs: nextTabs,
-      activeTabId: workspace.activeTabId,
+      activeTabId: resolveWorkspaceActiveTabId({
+        tabs: nextTabs,
+        requestedActiveTabId: workspace.activeTabId,
+      }),
     })
 
     const nextRenderMode = normalizeRenderMode(workspace.renderMode)
@@ -1292,7 +1311,9 @@ const applyWorkspaceRecord = async (workspace, { silent = false } = {}) => {
 
     renderWorkspaceTabs()
 
-    maybeRender()
+    if (hasCompletedInitialWorkspaceBootstrap) {
+      maybeRender()
+    }
     await refreshLocalContextOptions()
     if (!silent) {
       setStatus('Loaded local workspace context.', 'neutral')
@@ -1345,13 +1366,15 @@ const setActiveWorkspaceTab = tabId => {
     return
   }
 
+  const currentActiveTabId = workspaceTabsState.getActiveTabId()
   const targetTab = workspaceTabsState.getTab(normalizedTabId)
   if (!targetTab) {
-    const fallbackTab = getActiveWorkspaceTab()
-    if (fallbackTab) {
-      loadWorkspaceTabIntoEditor(fallbackTab)
-      renderWorkspaceTabs()
-    }
+    return
+  }
+
+  if (targetTab.id === currentActiveTabId) {
+    loadWorkspaceTabIntoEditor(targetTab)
+    renderWorkspaceTabs()
     return
   }
 
@@ -2973,10 +2996,12 @@ setTypeDiagnosticsDetails({ headline: '' })
 renderRuntime.setStyleCompiling(false)
 setCdnLoading(true)
 initializePreviewBackgroundPicker()
-void loadPreferredWorkspaceContext().catch(() => {
+const workspaceRestoreReady = loadPreferredWorkspaceContext().catch(() => {
   setStatus('Could not restore local workspace context.', 'neutral')
 })
 void initializeCodeEditors().then(async () => {
+  await workspaceRestoreReady
+
   const activeTab = getActiveWorkspaceTab()
   if (activeTab) {
     setActiveWorkspaceTab(activeTab.id)
@@ -2988,5 +3013,6 @@ void initializeCodeEditors().then(async () => {
     setCssSource(stylesTab.content)
   }
 
+  hasCompletedInitialWorkspaceBootstrap = true
   await renderPreview()
 })