test: add specs before refactor.

Author: knightedcodemonkey

docs/next-steps.md

@@ -15,8 +15,9 @@ Focused follow-up work for `@knighted/develop`.
    - Prefer CDN-delivered tooling where possible and preserve graceful fallback behavior when unavailable.
 
 4. **In-browser component type checking**
-   - Explore TypeScript/JSX type checking for component source in-browser using CDN-delivered tooling.
-   - Keep diagnostics responsive and surface clear inline/editor feedback without blocking the preview loop.
+   - Add editor-linked diagnostics navigation so each issue can jump to the exact line/column in the component source.
+   - Surface line/column context directly in the diagnostics UI (not just message text) to speed up triage.
+   - Continue improving typecheck performance for first-run and large sources while keeping the preview loop non-blocking.
 
 5. **In-browser component testing**
    - Explore authoring and running component-focused tests in-browser (for example, a Vitest-compatible flow) using CDN-delivered tooling.

playwright/app.spec.ts

@@ -263,3 +263,61 @@ test('clearing styles keeps diagnostics error state but resets status styling',
   )
   await expect(page.locator('#diagnostics-toggle')).toHaveText(/Diagnostics \([1-9]\d*\)/)
 })
+
+test('clear component diagnostics removes type errors and restores rendered status', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  await setComponentEditorSource(
+    page,
+    ["const count: number = 'oops'", 'const App = () => <button>ready</button>'].join(
+      '\n',
+    ),
+  )
+
+  await page.getByRole('button', { name: 'Typecheck' }).click()
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--error/,
+  )
+  await expect(page.locator('#status')).toHaveText(/Rendered \(Type errors: [1-9]\d*\)/)
+
+  await page.locator('#diagnostics-toggle').click()
+  await page.locator('#diagnostics-clear-component').click()
+
+  await expect(page.locator('#diagnostics-component')).toContainText(
+    'No diagnostics yet.',
+  )
+  await expect(page.locator('#diagnostics-toggle')).toHaveText('Diagnostics')
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--neutral/,
+  )
+  await expect(page.locator('#status')).toHaveText('Rendered')
+  await expect(page.locator('#status')).toHaveClass(/status--neutral/)
+})
+
+test('clear all diagnostics removes style compile diagnostics', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await page.locator('#style-mode').selectOption('sass')
+  await setStylesEditorSource(page, '.card { color: $missing; }')
+
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--error/,
+  )
+
+  await page.locator('#diagnostics-toggle').click()
+  await expect(page.locator('#diagnostics-styles')).toContainText(
+    'Style compilation failed.',
+  )
+
+  await page.locator('#diagnostics-clear-all').click()
+  await expect(page.locator('#diagnostics-component')).toContainText(
+    'No diagnostics yet.',
+  )
+  await expect(page.locator('#diagnostics-styles')).toContainText('No diagnostics yet.')
+  await expect(page.locator('#diagnostics-toggle')).toHaveText('Diagnostics')
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--neutral/,
+  )
+})