feat: beta impl of lint.

Author: knightedcodemonkey

docs/lint-workers.md

@@ -55,3 +55,11 @@ Focused follow-up work for `@knighted/develop`.
      - DOM mode still avoids React type graph hydration.
    - Suggested implementation prompt:
      - "Refactor `src/modules/type-diagnostics.js` to make TypeScript preprocessor parsing (`preProcessFile`) the source of truth for declaration graph discovery in the lazy React type loader. Keep current CDN fallback and lazy hydration semantics. Ensure references from comments are ignored, `*.d.ts`/relative path handling is correct, and candidate fetch ordering minimizes noisy failed requests. Add regression coverage for `global.d.ts` and commented `./user-context` examples. Validate with `npm run lint`, `npm run build:esm`, and targeted React/typecheck Playwright runs."
+
+6. **Deterministic E2E lane in CI**
+   - Add an integration-style E2E path that uses locally served/pinned copies of CDN runtime dependencies for test execution, while keeping production runtime behavior unchanged.
+   - Keep the current true CDN-backed E2E path as a separate smoke check, but make the deterministic lane the required gate for pull requests.
+   - Run this deterministic E2E suite on **every pull request** in CI.
+   - Ensure the deterministic lane still exercises the same user-facing flows (render, typecheck, lint, diagnostics drawer/button states), only swapping the source of runtime artifacts.
+   - Suggested implementation prompt:
+     - "Add a deterministic E2E execution mode for `@knighted/develop` that serves pinned runtime artifacts locally (instead of live CDN fetches) and wire it into CI as a required check on every PR. Keep a separate lightweight CDN-smoke E2E check for real-network coverage. Validate with `npm run lint`, deterministic Playwright PR checks, and one CDN-smoke Playwright run."

docs/next-steps.md

@@ -29,6 +29,16 @@ const setStylesEditorSource = async (page: Page, source: string) => {
   await editorContent.fill(source)
 }
 
+const runTypecheck = async (page: Page) => {
+  await ensurePanelToolsVisible(page, 'component')
+  await page.locator('#typecheck-button').click()
+}
+
+const runComponentLint = async (page: Page) => {
+  await ensurePanelToolsVisible(page, 'component')
+  await page.locator('#lint-component-button').click()
+}
+
 const getCollapseButton = (page: Page, panelName: 'component' | 'styles' | 'preview') =>
   page.locator(`#collapse-${panelName}`)
 
@@ -647,3 +657,174 @@ test('clear all diagnostics removes style compile diagnostics', async ({ page })
     /diagnostics-toggle--neutral/,
   )
 })
+
+test('typecheck success reports ok diagnostics state in button and drawer', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  await runTypecheck(page)
+
+  await expect(page.locator('#status')).toHaveText('Rendered')
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(/diagnostics-toggle--ok/)
+  await expect(page.locator('#diagnostics-toggle')).toHaveText('Diagnostics')
+
+  await page.locator('#diagnostics-toggle').click()
+  await expect(page.locator('#diagnostics-component')).toContainText(
+    'No TypeScript errors found.',
+  )
+})
+
+test('typecheck error reports diagnostics count in button and details in drawer', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  await setComponentEditorSource(
+    page,
+    ["const broken: number = 'oops'", 'const App = () => <button>hello</button>'].join(
+      '\n',
+    ),
+  )
+
+  await runTypecheck(page)
+
+  await expect(page.locator('#status')).toHaveText(/Rendered \(Type errors: [1-9]\d*\)/)
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--error/,
+  )
+  await expect(page.locator('#diagnostics-toggle')).toHaveText(/Diagnostics \([1-9]\d*\)/)
+
+  await page.locator('#diagnostics-toggle').click()
+  await expect(page.locator('#diagnostics-component')).toContainText('TypeScript found')
+  await expect(page.locator('#diagnostics-component')).toContainText('TS')
+})
+
+test('component lint error reports diagnostics count and details', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await setComponentEditorSource(
+    page,
+    ['const unusedValue = 1', 'const App = () => <button>lint me</button>'].join('\n'),
+  )
+
+  await runComponentLint(page)
+
+  await expect(page.locator('#status')).toHaveText(/Rendered \(Lint issues: [1-9]\d*\)/)
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--error/,
+  )
+  await expect(page.locator('#diagnostics-toggle')).toHaveText(/Diagnostics \([1-9]\d*\)/)
+
+  await page.locator('#diagnostics-toggle').click()
+  await expect(page.locator('#diagnostics-component')).toContainText(
+    'Biome reported issues.',
+  )
+})
+
+test('component lint ignores unused App View and render bindings', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await setComponentEditorSource(
+    page,
+    [
+      'function App() { return <button type="button">App</button> }',
+      'function View() { return <section>View</section> }',
+      'function render() { return null }',
+    ].join('\n'),
+  )
+
+  await runComponentLint(page)
+
+  await page.locator('#diagnostics-toggle').click()
+  await expect(page.locator('#diagnostics-component')).toContainText(
+    'No Biome issues found.',
+  )
+
+  await expect(page.locator('#status')).toHaveText('Rendered')
+  await expect(page.locator('#status')).toHaveClass(/status--neutral/)
+  await expect(page.locator('#diagnostics-toggle')).toHaveText('Diagnostics')
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(/diagnostics-toggle--ok/)
+
+  const diagnosticsText = await page.locator('#diagnostics-component').innerText()
+  expect(diagnosticsText).not.toContain('This variable App is unused')
+  expect(diagnosticsText).not.toContain('This variable View is unused')
+  expect(diagnosticsText).not.toContain('This variable render is unused')
+  expect(diagnosticsText).not.toContain('This function App is unused')
+  expect(diagnosticsText).not.toContain('This function View is unused')
+  expect(diagnosticsText).not.toContain('This function render is unused')
+})
+
+test('component lint with unresolved issues enters pending diagnostics state while typing', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  await setComponentEditorSource(
+    page,
+    ['const unusedValue = 1', 'const App = () => <button>pending</button>'].join('\n'),
+  )
+
+  await runComponentLint(page)
+
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--error/,
+  )
+
+  await setComponentEditorSource(
+    page,
+    ['const unusedValue = 1', 'const App = () => <button>pending now</button>'].join(
+      '\n',
+    ),
+  )
+
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--pending/,
+  )
+  await expect(page.locator('#diagnostics-toggle')).toHaveAttribute('aria-busy', 'true')
+
+  await expect(page.locator('#status')).toHaveText(/Rendered \(Lint issues: [1-9]\d*\)/)
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--error/,
+  )
+  await expect(page.locator('#diagnostics-toggle')).toHaveAttribute('aria-busy', 'false')
+})
+
+test('changing css dialect resets diagnostics after lint and typecheck runs', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+  await ensurePanelToolsVisible(page, 'styles')
+
+  await setComponentEditorSource(
+    page,
+    [
+      "const broken: number = 'oops'",
+      'const unusedValue = 1',
+      'const App = () => <button>reset me</button>',
+    ].join('\n'),
+  )
+
+  await runTypecheck(page)
+  await runComponentLint(page)
+
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--error/,
+  )
+  await expect(page.locator('#diagnostics-toggle')).toHaveText(/Diagnostics \([1-9]\d*\)/)
+
+  await page.locator('#style-mode').selectOption('less')
+
+  await expect(page.locator('#status')).toHaveText('Rendered')
+  await expect(page.locator('#status')).toHaveClass(/status--neutral/)
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--neutral/,
+  )
+  await expect(page.locator('#diagnostics-toggle')).toHaveText('Diagnostics')
+
+  await page.locator('#diagnostics-toggle').click()
+  await expect(page.locator('#diagnostics-component')).toContainText(
+    'No diagnostics yet.',
+  )
+  await expect(page.locator('#diagnostics-styles')).toContainText('No diagnostics yet.')
+})