fix: require app in entry, hide workspaces without pat, remove star important.

playwright/github-byot-ai.spec.ts

@@ -23,20 +23,28 @@
     exact: true,
     includeHidden: true,
   })
+  const workspacesToggle = page.getByRole('button', {
+    name: 'Workspaces',
+    exact: true,
+    includeHidden: true,
+  })
   await expect(byotControls).toBeVisible()
   await expect(page.getByRole('textbox', { name: 'GitHub token' })).toBeVisible()
   await expect(page.getByRole('button', { name: 'Add GitHub token' })).toBeVisible()
   await expect(page.getByRole('button', { name: 'Chat' })).toBeHidden()
   await expect(page.getByRole('heading', { name: 'AI Chat' })).toBeHidden()
   await expect(prToggle).toHaveCount(1)
   await expect(prToggle).toBeHidden()
+  await expect(workspacesToggle).toHaveCount(1)
+  await expect(workspacesToggle).toBeHidden()
 })
 
 test('chat becomes available after token connect', async ({ page }) => {
   await waitForAppReady(page)
   await connectByotWithSingleRepo(page)
 
   await expect(page.getByRole('button', { name: 'Open pull request' })).toBeVisible()
+  await expect(page.getByRole('button', { name: 'Workspaces' })).toBeVisible()
   await expect(page.getByRole('button', { name: 'Chat' })).toBeVisible()
 })
 
@@ -49,12 +57,19 @@
     exact: true,
     includeHidden: true,
   })
+  const workspacesToggle = page.getByRole('button', {
+    name: 'Workspaces',
+    exact: true,
+    includeHidden: true,
+  })
   await expect(byotControls).toBeVisible()
   await expect(page.getByRole('textbox', { name: 'GitHub token' })).toBeVisible()
   await expect(page.getByRole('button', { name: 'Add GitHub token' })).toBeVisible()
   await expect(page.getByRole('button', { name: 'Chat' })).toBeHidden()
   await expect(prToggle).toHaveCount(1)
   await expect(prToggle).toBeHidden()
+  await expect(workspacesToggle).toHaveCount(1)
+  await expect(workspacesToggle).toBeHidden()
 })
 
 test('GitHub token info panel reflects missing and present token states', async ({
@@ -758,7 +773,7 @@
 
   await page.reload()
   await expect(page.getByRole('heading', { name: '@knighted/develop' })).toBeVisible()
   await expect(page.getByRole('status', { name: 'App status' })).toHaveText(
     'Loaded 2 writable repositories',
     {
       timeout: 60_000,

playwright/helpers/app-test-helpers.ts

@@ -59,7 +59,7 @@
     attempt += 1
 
     try {
       await page.goto(path, { waitUntil: 'domcontentloaded' })
       return
     } catch (error) {
       if (attempt >= 3 || !isRetryableGotoError(error)) {
@@ -171,6 +171,22 @@
   await page.getByRole('button', { name: pattern }).click()
 }
 
+const replaceEditorSource = async ({
+  editorContent,
+  source,
+}: {
+  editorContent: ReturnType<Page['locator']>
+  source: string
+}) => {
+  for (let attempt = 0; attempt < 2; attempt += 1) {
+    await editorContent.fill('')
+    await editorContent.fill(source)
+    await editorContent.press('End')
+    await editorContent.type(' ')
+    await editorContent.press('Backspace')
+  }
+}
+
 export const reorderWorkspaceTabBefore = async (
   page: Page,
   { from, to }: { from: string; to: string },
@@ -199,35 +215,29 @@
   },
 ) => {
   await openWorkspaceTab(page, fileName)
+  await expect(page.getByRole('region', { name: fileName })).toBeVisible()
   const editorContent = page
     .locator(`.editor-panel[data-editor-kind="${kind}"] .cm-content`)
     .first()
-  await editorContent.fill(source)
-  await editorContent.press('End')
-  await editorContent.type(' ')
-  await editorContent.press('Backspace')
+  await replaceEditorSource({ editorContent, source })
 }
 
 export const setComponentEditorSource = async (page: Page, source: string) => {
   await page.getByRole('button', { name: 'Open tab App.tsx' }).click()
+  await expect(page.getByRole('region', { name: 'App.tsx' })).toBeVisible()
   const editorContent = page
     .locator('.editor-panel[data-editor-kind="component"] .cm-content')
     .first()
-  await editorContent.fill(source)
-  await editorContent.press('End')
-  await editorContent.type(' ')
-  await editorContent.press('Backspace')
+  await replaceEditorSource({ editorContent, source })
 }
 
 export const setStylesEditorSource = async (page: Page, source: string) => {
   await page.getByRole('button', { name: 'Open tab app.css' }).click()
+  await expect(page.getByRole('region', { name: 'app.css' })).toBeVisible()
   const editorContent = page
     .locator('.editor-panel[data-editor-kind="styles"] .cm-content')
     .first()
-  await editorContent.fill(source)
-  await editorContent.press('End')
-  await editorContent.type(' ')
-  await editorContent.press('Backspace')
+  await replaceEditorSource({ editorContent, source })
 }
 
 export const getActiveComponentEditorLineNumber = async (page: Page) => {

playwright/rendering-modes.spec.ts

@@ -1,3 +1,3 @@
 import { expect, test } from '@playwright/test'
 import {
   addWorkspaceTab,
@@ -577,7 +577,7 @@
   )
 })
 
-test('auto render implicitly wraps source with App in dom and react modes', async ({
+test('auto render shows App-only error in dom and react modes when App is missing', async ({
   page,
 }) => {
   await waitForInitialRender(page)
@@ -589,9 +589,9 @@
     'const Button = () => <button type="button">implicit app dom</button>',
   )
 
-  await expect(page.getByRole('status', { name: 'App status' })).toHaveText('Rendered')
-  await expect(getPreviewFrame(page).getByRole('button')).toContainText(
-    'implicit app dom',
+  await expect(page.getByRole('status', { name: 'App status' })).toHaveText('Error')
+  await expect(page.locator('#preview-host pre')).toContainText(
+    'Expected a function or const named App.',
   )
 
   await page.getByRole('combobox', { name: 'Render mode' }).selectOption('react')
@@ -604,13 +604,13 @@
     page.locator('.editor-panel[data-editor-kind="component"] .cm-content').first(),
   ).toContainText('implicit app react')
 
-  await expect(page.getByRole('status', { name: 'App status' })).toHaveText('Rendered')
-  await expect(getPreviewFrame(page).getByRole('button')).toContainText(
-    'implicit app react',
+  await expect(page.getByRole('status', { name: 'App status' })).toHaveText('Error')
+  await expect(page.locator('#preview-host pre')).toContainText(
+    'Expected a function or const named App.',
   )
 })
 
-test('auto render implicit App includes multiple component declarations', async ({
+test('auto render renders successfully when explicit App is defined in dom and react modes', async ({
   page,
 }) => {
   await waitForInitialRender(page)
@@ -619,15 +619,25 @@
 
   await setComponentEditorSource(
     page,
-    [
-      'const OtherButton = () => <button type="button">bar</button>',
-      'const Button = () => <button type="button">foo</button>',
-    ].join('\n'),
+    'const App = () => <button type="button">explicit app dom</button>',
   )
 
   await expect(page.getByRole('status', { name: 'App status' })).toHaveText('Rendered')
-  await expect(getPreviewFrame(page).getByRole('button')).toHaveCount(2)
-  await expect(getPreviewFrame(page).getByRole('button')).toContainText(['bar', 'foo'])
+  await expect(getPreviewFrame(page).getByRole('button')).toContainText(
+    'explicit app dom',
+  )
+
+  await page.getByRole('combobox', { name: 'Render mode' }).selectOption('react')
+  await expect(page.getByRole('combobox', { name: 'Render mode' })).toHaveValue('react')
+  await setComponentEditorSource(
+    page,
+    'const App = () => <button type="button">explicit app react</button>',
+  )
+
+  await expect(page.getByRole('status', { name: 'App status' })).toHaveText('Rendered')
+  await expect(getPreviewFrame(page).getByRole('button')).toContainText(
+    'explicit app react',
+  )
 })
 
 test('auto render does not treat lowercase helpers as implicit components', async ({
@@ -651,7 +661,7 @@
   )
 })
 
-test('auto render wraps standalone JSX with trailing semicolon and comment', async ({
+test('auto render shows App-only error for standalone JSX expression', async ({
   page,
 }) => {
   await waitForInitialRender(page)
@@ -663,13 +673,13 @@
     '(<button type="button">implicit app from jsx expression</button>) as any; // trailing',
   )
 
-  await expect(page.getByRole('status', { name: 'App status' })).toHaveText('Rendered')
-  await expect(getPreviewFrame(page).getByRole('button')).toContainText(
-    'implicit app from jsx expression',
+  await expect(page.getByRole('status', { name: 'App status' })).toHaveText('Error')
+  await expect(page.locator('#preview-host pre')).toContainText(
+    'Expected a function or const named App.',
   )
 })
 
-test('auto render requires explicit App for declarations plus top-level JSX expression', async ({
+test('auto render shows App-only error for declarations plus top-level JSX expression', async ({
   page,
 }) => {
   await waitForInitialRender(page)
@@ -687,7 +697,7 @@
 
   await expect(page.getByRole('status', { name: 'App status' })).toHaveText('Error')
   await expect(page.locator('#preview-host pre')).toContainText(
-    'Top-level JSX with declarations or imports requires an explicit App component.',
+    'Expected a function or const named App.',
   )
 })
 

src/index.html

@@ -165,6 +165,7 @@ <h1>
             aria-controls="workspaces-drawer"
             title="Manage local workspaces"
             disabled
+            hidden
           >
             <svg class="workspaces-toggle__icon" viewBox="0 0 24 24" aria-hidden="true">
               <path

src/modules/app-core/github-pr-context-ui.js

@@ -111,25 +111,35 @@ export const createGitHubPrContextUiController = ({
         workspacesToggle.disabled = false
       }
 
-      aiChatToggle?.removeAttribute('hidden')
+      if (aiChatToggle instanceof HTMLElement) {
+        aiChatToggle.hidden = false
+      }
 
-      githubPrToggle?.removeAttribute('hidden')
+      if (githubPrToggle instanceof HTMLElement) {
+        githubPrToggle.hidden = false
+      }
       if (!contextState.activePrContext) {
-        workspacesToggle?.removeAttribute('hidden')
+        if (workspacesToggle instanceof HTMLElement) {
+          workspacesToggle.hidden = false
+        }
       }
 
       if (contextState.activePrContext) {
         githubPrContextClose?.removeAttribute('hidden')
         githubPrContextDisconnect?.removeAttribute('hidden')
-        workspacesToggle?.setAttribute('hidden', '')
+        if (workspacesToggle instanceof HTMLElement) {
+          workspacesToggle.hidden = true
+        }
       } else {
         githubPrContextClose?.setAttribute('hidden', '')
         githubPrContextDisconnect?.setAttribute('hidden', '')
       }
       return
     }
 
-    aiChatToggle?.setAttribute('hidden', '')
+    if (aiChatToggle instanceof HTMLElement) {
+      aiChatToggle.hidden = true
+    }
     aiChatToggle?.setAttribute('aria-expanded', 'false')
     if (workspacesToggle instanceof HTMLButtonElement) {
       workspacesToggle.disabled = true
@@ -139,9 +149,13 @@ export const createGitHubPrContextUiController = ({
     contextState.hasSyncedActivePrEditorContent = false
     syncEditorPrContextIndicators(false)
     setGitHubPrToggleVisual('open-pr')
-    githubPrToggle?.setAttribute('hidden', '')
+    if (githubPrToggle instanceof HTMLElement) {
+      githubPrToggle.hidden = true
+    }
     githubPrToggle?.setAttribute('aria-expanded', 'false')
-    workspacesToggle?.setAttribute('hidden', '')
+    if (workspacesToggle instanceof HTMLElement) {
+      workspacesToggle.hidden = true
+    }
     workspacesToggle?.setAttribute('aria-expanded', 'false')
     githubPrContextClose?.setAttribute('hidden', '')
     githubPrContextDisconnect?.setAttribute('hidden', '')

src/modules/app-core/github-workflows.js

@@ -187,9 +187,6 @@ const initializeGitHubWorkflows = ({
     onActivePrContextChange: activeContext => {
       prContextUi.setActivePrContext(activeContext)
       prContextUi.syncAiChatTokenVisibility(getTokenForVisibility())
-      if (workspacesToggle instanceof HTMLButtonElement) {
-        workspacesToggle.hidden = Boolean(activeContext)
-      }
 
       if (activeContext) {
         closeWorkspacesDrawer()

src/modules/app-core/workspace-controllers-setup.js

@@ -111,9 +111,6 @@ const createWorkspaceControllersSetup = ({
   const setActiveWorkspaceTab = tabId =>
     workspaceTabSelectionController.setActiveWorkspaceTab(tabId)
 
-  const syncEditorFromActiveWorkspaceTabDelegate = () =>
-    workspaceTabSelectionController.syncEditorFromActiveWorkspaceTab()
-
   workspaceTabMutationsController = createWorkspaceTabMutationsController({
     toNonEmptyWorkspaceText,
     workspaceTabsState,
@@ -186,7 +183,6 @@ const createWorkspaceControllersSetup = ({
     getShouldShowEditedDesign,
     workspaceTabsShell,
     workspaceTabAddWrap,
-    syncEditorFromActiveWorkspaceTab: syncEditorFromActiveWorkspaceTabDelegate,
   })
 
   const workspaceContextController = createWorkspaceContextController({

src/modules/app-core/workspace-tabs-renderer.js

@@ -22,7 +22,6 @@ const createWorkspaceTabsRenderer = ({
   getShouldShowEditedDesign,
   workspaceTabsShell,
   workspaceTabAddWrap,
-  syncEditorFromActiveWorkspaceTab,
 }) => {
   const clearWorkspaceTabDragState = () => {
     setDraggedWorkspaceTabId('')
@@ -294,8 +293,6 @@ const createWorkspaceTabsRenderer = ({
       renderWorkspaceTabs()
       return
     }
-
-    syncEditorFromActiveWorkspaceTab()
   }
 
   return {