refactor: status styling and biome config.

playwright/diagnostics.spec.ts

@@ -330,6 +330,19 @@ test('component lint error reports diagnostics count and details', async ({ page
   await expect(page.getByText('Biome reported issues.')).toBeVisible()
 })
 
+test('component lint reports missing button type prop', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await setComponentEditorSource(page, 'const App = () => <button>lint me</button>')
+
+  await runComponentLint(page)
+
+  await expect(page.getByText(/Rendered \(Lint issues: [1-9]\d*\)/)).toBeVisible()
+  await ensureDiagnosticsDrawerOpen(page)
+  await expect(page.getByText('Biome reported issues.')).toBeVisible()
+  await expect(page.getByText(/a11y\/useButtonType/)).toBeVisible()
+})
+
 test('styles diagnostics rows navigate editor to reported line', async ({ page }) => {
   await waitForInitialRender(page)
 
@@ -354,6 +367,19 @@ test('styles diagnostics rows navigate editor to reported line', async ({ page }
   await expect.poll(() => getActiveStylesEditorLineNumber(page)).toBe('3')
 })
 
+test('styles lint reports CSS syntax errors', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await ensurePanelToolsVisible(page, 'styles')
+  await setStylesEditorSource(page, ['p {', '  color green;', '}'].join('\n'))
+
+  await runStylesLint(page)
+
+  await expect(page.getByText(/Rendered \(Lint issues: [1-9]\d*\)/)).toBeVisible()
+  await ensureDiagnosticsDrawerOpen(page)
+  await expect(page.getByText('Biome reported issues.')).toBeVisible()
+})
+
 test('sass compiler warnings surface in styles diagnostics', async ({ page }) => {
   await waitForInitialRender(page)
 

src/app.js

@@ -1097,7 +1097,7 @@ const githubWorkflows = createGitHubWorkflowsSetup({
       workspacePrSessionHandoffController.archivePrWorkspaceAndStartFreshLocal({
         archivedState: 'closed',
         statusMessage:
-          'PR context closed. Click Workspaces to open a stored workspace or continue with this fresh local workspace.',
+          'PR context closed. Open Workspaces to load a saved workspace or continue with this local workspace.',
       })
     },
     onPrContextDisconnected: result => {
@@ -1106,7 +1106,7 @@ const githubWorkflows = createGitHubWorkflowsSetup({
       workspacePrSessionHandoffController.archivePrWorkspaceAndStartFreshLocal({
         archivedState: 'disconnected',
         statusMessage:
-          'PR context disconnected. Click Workspaces to open a stored workspace or continue with this fresh local workspace.',
+          'PR context disconnected. Open Workspaces to load a saved workspace or continue with this local workspace.',
       })
     },
     getPersistedActivePrContext,

src/modules/diagnostics/lint-diagnostics.js

@@ -9,6 +9,9 @@ const biomeConfiguration = {
     enabled: true,
     rules: {
       recommended: true,
+      a11y: {
+        useButtonType: 'error',
+      },
     },
   },
 }
@@ -277,7 +280,7 @@ export const createLintDiagnosticsController = ({
 
     try {
       const result = workspace.pullDiagnostics({
-        categories: ['lint'],
+        categories: ['lint', 'syntax'],
         path,
         projectKey,
         pullCodeActions: false,

src/styles/layout-shell.css

@@ -11,6 +11,10 @@
   backdrop-filter: blur(8px);
 }
 
+.app-header > div:first-child {
+  min-width: 0;
+}
+
 .app-header h1 {
   margin: 0 0 6px;
   font-size: 1.4rem;
@@ -61,6 +65,19 @@
   color: var(--status-fg);
 }
 
+.app-header .status {
+  flex: 0 0 auto;
+  width: fit-content;
+  max-inline-size: min(52ch, 48vw);
+  max-block-size: 5.2em;
+  align-items: first baseline;
+  overflow-y: auto;
+  overflow-x: hidden;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  scrollbar-width: thin;
+}
+
 .status::before {
   content: '';
   width: 8px;
@@ -262,6 +279,7 @@
 
   .app-header .status {
     align-self: flex-start;
+    max-inline-size: min(52ch, 100%);
   }
 }