feat: diagnostics jump-to with keyboard navigation.

Author: knightedcodemonkey

docs/next-steps.md

@@ -16,8 +16,6 @@ Focused follow-up work for `@knighted/develop`.
      - "Audit the current Biome lint rules used by `@knighted/develop`, propose and apply a refined rule profile for component/styles linting, and add/update Playwright coverage to keep diagnostics UX stable under the new rules. Preserve intentional suppressions only when justified and document the reasoning. Validate with `npm run lint`, `npm run build:esm`, and targeted lint diagnostics Playwright tests."
 
 2. **In-browser component type checking**
-   - 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.
    - Prioritize first-run performance improvements in CDN/type graph hydration (request ordering, cache reuse, and avoiding redundant fetches) before deeper host refactors.
    - Continue improving warm-run typecheck performance for large sources while keeping the preview loop non-blocking.
 

playwright/app.spec.ts

@@ -29,6 +29,14 @@ const setStylesEditorSource = async (page: Page, source: string) => {
   await editorContent.fill(source)
 }
 
+const getActiveComponentEditorLineNumber = async (page: Page) => {
+  return page
+    .locator('#component-panel .cm-activeLineGutter')
+    .first()
+    .innerText()
+    .then(text => text.trim())
+}
+
 const runTypecheck = async (page: Page) => {
   await ensurePanelToolsVisible(page, 'component')
   await page.locator('#typecheck-button').click()
@@ -39,6 +47,19 @@ const runComponentLint = async (page: Page) => {
   await page.locator('#lint-component-button').click()
 }
 
+const runStylesLint = async (page: Page) => {
+  await ensurePanelToolsVisible(page, 'styles')
+  await page.locator('#lint-styles-button').click()
+}
+
+const getActiveStylesEditorLineNumber = async (page: Page) => {
+  return page
+    .locator('#styles-panel .cm-activeLineGutter')
+    .first()
+    .innerText()
+    .then(text => text.trim())
+}
+
 const getCollapseButton = (page: Page, panelName: 'component' | 'styles' | 'preview') =>
   page.locator(`#collapse-${panelName}`)
 
@@ -750,6 +771,73 @@ test('typecheck error reports diagnostics count in button and details in drawer'
   await expect(page.locator('#diagnostics-component')).toContainText('TS')
 })
 
+test('component diagnostics rows navigate editor to reported line', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await setComponentEditorSource(
+    page,
+    [
+      "const brokenCount: number = 'oops'",
+      'const App = () => <button>{brokenCount.toUpperCase()}</button>',
+    ].join('\n'),
+  )
+
+  await runTypecheck(page)
+
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--error/,
+  )
+  await page.locator('#diagnostics-toggle').click()
+
+  const targetDiagnostic = page
+    .locator('#diagnostics-component .diagnostic-line-button[data-diagnostic-line="2"]')
+    .first()
+  await expect(targetDiagnostic).toBeVisible()
+
+  await targetDiagnostic.click()
+  await expect(targetDiagnostic).toHaveClass(/diagnostic-line-button--active/)
+  await expect.poll(() => getActiveComponentEditorLineNumber(page)).toBe('2')
+})
+
+test('component diagnostics support arrow navigation and enter jump', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  await setComponentEditorSource(
+    page,
+    [
+      "const broken: number = 'oops'",
+      'const App = () => <button>{missingName}</button>',
+    ].join('\n'),
+  )
+
+  await runTypecheck(page)
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--error/,
+  )
+
+  await page.locator('#diagnostics-toggle').click()
+
+  const firstDiagnostic = page
+    .locator('#diagnostics-component .diagnostic-line-button')
+    .first()
+  const secondDiagnostic = page
+    .locator('#diagnostics-component .diagnostic-line-button')
+    .nth(1)
+
+  await expect(firstDiagnostic).toBeVisible()
+  await expect(secondDiagnostic).toBeVisible()
+
+  await firstDiagnostic.focus()
+  await firstDiagnostic.press('ArrowDown')
+  await expect(secondDiagnostic).toBeFocused()
+
+  await secondDiagnostic.press('Enter')
+  await expect(secondDiagnostic).toHaveClass(/diagnostic-line-button--active/)
+  await expect.poll(() => getActiveComponentEditorLineNumber(page)).toBe('2')
+})
+
 test('component lint error reports diagnostics count and details', async ({ page }) => {
   await waitForInitialRender(page)
 
@@ -772,6 +860,32 @@ test('component lint error reports diagnostics count and details', async ({ page
   )
 })
 
+test('styles diagnostics rows navigate editor to reported line', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await ensurePanelToolsVisible(page, 'styles')
+  await setStylesEditorSource(
+    page,
+    ['.card {', '  color: red', '  color: blue;', '}'].join('\n'),
+  )
+
+  await runStylesLint(page)
+
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--error/,
+  )
+  await page.locator('#diagnostics-toggle').click()
+
+  const targetDiagnostic = page
+    .locator('#diagnostics-styles .diagnostic-line-button[data-diagnostic-line="3"]')
+    .first()
+  await expect(targetDiagnostic).toBeVisible()
+
+  await targetDiagnostic.click()
+  await expect(targetDiagnostic).toHaveClass(/diagnostic-line-button--active/)
+  await expect.poll(() => getActiveStylesEditorLineNumber(page)).toBe('3')
+})
+
 test('clear component diagnostics resets rendered lint-issue status pill', async ({
   page,
 }) => {

src/app.js

@@ -280,12 +280,88 @@ const togglePanelCollapse = panelName => {
   applyPanelCollapseState()
 }
 
+const toTextareaOffset = (source, line, column = 1) => {
+  if (typeof source !== 'string' || source.length === 0) {
+    return 0
+  }
+
+  const targetLine = Number.isFinite(line) ? Math.max(1, Number(line)) : 1
+  const targetColumn = Number.isFinite(column) ? Math.max(1, Number(column)) : 1
+
+  let currentLine = 1
+  let lineStartOffset = 0
+
+  for (let index = 0; index < source.length; index += 1) {
+    if (currentLine === targetLine) {
+      lineStartOffset = index
+      break
+    }
+
+    if (source[index] === '\n') {
+      currentLine += 1
+      lineStartOffset = index + 1
+    }
+  }
+
+  const nextNewlineOffset = source.indexOf('\n', lineStartOffset)
+  const lineEndOffset = nextNewlineOffset === -1 ? source.length : nextNewlineOffset
+  return Math.min(lineStartOffset + targetColumn - 1, lineEndOffset)
+}
+
+const navigateToComponentDiagnostic = ({ line, column }) => {
+  if (jsxCodeEditor && typeof jsxCodeEditor.revealPosition === 'function') {
+    jsxCodeEditor.revealPosition({ line, column })
+    return
+  }
+
+  if (!(jsxEditor instanceof HTMLTextAreaElement)) {
+    return
+  }
+
+  const source = jsxEditor.value
+  const offset = toTextareaOffset(source, line, column)
+  jsxEditor.focus()
+  jsxEditor.setSelectionRange(offset, offset)
+}
+
+const navigateToStylesDiagnostic = ({ line, column }) => {
+  if (cssCodeEditor && typeof cssCodeEditor.revealPosition === 'function') {
+    cssCodeEditor.revealPosition({ line, column })
+    return
+  }
+
+  if (!(cssEditor instanceof HTMLTextAreaElement)) {
+    return
+  }
+
+  const source = cssEditor.value
+  const offset = toTextareaOffset(source, line, column)
+  cssEditor.focus()
+  cssEditor.setSelectionRange(offset, offset)
+}
+
 const diagnosticsUi = createDiagnosticsUiController({
   diagnosticsToggle,
   diagnosticsDrawer,
   diagnosticsComponent,
   diagnosticsStyles,
   statusNode,
+  onNavigateDiagnostic: diagnostic => {
+    if (diagnostic?.scope === 'component') {
+      navigateToComponentDiagnostic({
+        line: diagnostic.line,
+        column: diagnostic.column,
+      })
+      return
+    }
+
+    if (diagnostic?.scope === 'styles') {
+      navigateToStylesDiagnostic({
+        line: diagnostic.line,
+        column: diagnostic.column,
+      })
+    }
+  },
 })
 
 const {