refactor: address comments, add clear styles button.

Author: knightedcodemonkey

AGENTS.md

@@ -48,8 +48,8 @@ Repository structure:
 
 ## CDN and runtime expectations
 
-- Keep dependency loading compatible with existing provider/fallback model in src/cdn.js.
-- Treat src/cdn.js as the source of truth for CDN-managed runtime libraries; add/update
+- Keep dependency loading compatible with existing provider/fallback model in src/modules/cdn.js.
+- Treat src/modules/cdn.js as the source of truth for CDN-managed runtime libraries; add/update
   CDN candidates there instead of hardcoding module URLs in feature modules.
 - Prefer extending existing CDN import key patterns instead of ad hoc dynamic imports.
 - Maintain graceful fallback behavior when CDN modules fail to load.

docs/build-and-deploy.md

@@ -2,7 +2,7 @@
 
 This project uses two runtime modes:
 
-- Local development mode: dynamic CDN resolution from `src/cdn.js` with esm.sh as default.
+- Local development mode: dynamic CDN resolution from `src/modules/cdn.js` with esm.sh as default.
 - Production mode: CDN-first build artifacts in `dist`, with `build:esm` as the current preferred deploy build.
 
 ## Local Development
@@ -45,8 +45,8 @@ npm run build:importmap-mode
 | Mode | Resolver | Import map step | JSPM index needed | Typical use |
 | --- | --- | --- | --- | --- |
 | `importMap` | Import map in `dist/index.html` | Yes | Yes | Default production mode |
-| `esm` | `src/cdn.js` (`esm.sh` primary) | No | No | Stable fallback mode |
-| `jspmGa` | `src/cdn.js` (`ga.jspm.io` primary) | No | No | Direct ga.jspm.io testing |
+| `esm` | `src/modules/cdn.js` (`esm.sh` primary) | No | No | Stable fallback mode |
+| `jspmGa` | `src/modules/cdn.js` (`ga.jspm.io` primary) | No | No | Direct ga.jspm.io testing |
 <!-- prettier-ignore-end -->
 
 Mode notes:
@@ -72,7 +72,7 @@ This runs two steps:
   - `sass=1.93.2`
   - `less=4.4.2`
 - Traces generated `dist/prod-imports.js`
-- Import specifiers come from `importMap` entries in `src/cdn.js` (`cdnImportSpecs`)
+- Import specifiers come from `importMap` entries in `src/modules/cdn.js` (`cdnImportSpecs`)
 
 Preview the built site locally:
 
@@ -99,20 +99,20 @@ Related docs:
 
 - `docs/code-mirror.md` for CodeMirror CDN integration rules, fallback behavior, and validation checklist.
 
-- `src/cdn.js` is the source of truth for CDN-managed runtime libraries (including fallback candidates). Add/update CDN specs there instead of hardcoding module URLs inside feature modules.
+- `src/modules/cdn.js` is the source of truth for CDN-managed runtime libraries (including fallback candidates). Add/update CDN specs there instead of hardcoding module URLs inside feature modules.
 
 - In production, the current preferred deploy mode is ESM resolution (`window.__KNIGHTED_PRIMARY_CDN__ = "esm"`).
 - In `importMap` mode, runtime resolution is import-map first; if a specifier is missing from the generated map, runtime falls back through the CDN
-  provider chain configured in `src/cdn.js`.
-- In `esm` and `jspmGa` modes, runtime resolution is handled entirely by the CDN provider chain configured in `src/cdn.js` without an import map.
+  provider chain configured in `src/modules/cdn.js`.
+- In `esm` and `jspmGa` modes, runtime resolution is handled entirely by the CDN provider chain configured in `src/modules/cdn.js` without an import map.
 
 ### Sass Loading Gotchas
 
 - Symptom: switching to Sass mode shows `Unable to load Sass compiler for browser usage: Dynamic require of "url" is not supported`.
 - Cause: some `esm.sh` Sass outputs currently include runtime paths that are not browser-safe for this app.
-- Current mitigation: `src/cdn.js` keeps `esm.sh` first, then falls back to `unpkg` for Sass via `sass@1.93.2/sass.default.js?module`.
+- Current mitigation: `src/modules/cdn.js` keeps `esm.sh` first, then falls back to `unpkg` for Sass via `sass@1.93.2/sass.default.js?module`.
 - Important context: this can appear even if the Sass URL has not changed in this repo, because CDN-transformed module output can change upstream.
 - If this regresses again:
-  - Verify Sass import candidates in `src/cdn.js`.
+  - Verify Sass import candidates in `src/modules/cdn.js`.
   - Reproduce directly in browser devtools with `await import('<candidate-url>')`.
   - Keep at least one known browser-safe fallback provider in the Sass candidate list.

playwright/app.spec.ts

@@ -658,6 +658,34 @@ test('clear all diagnostics removes style compile diagnostics', async ({ page })
   )
 })
 
+test('clear styles diagnostics removes style compile diagnostics', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await ensurePanelToolsVisible(page, 'styles')
+
+  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-styles').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/,
+  )
+})
+
 test('typecheck success reports ok diagnostics state in button and drawer', async ({
   page,
 }) => {
@@ -722,6 +750,38 @@ test('component lint error reports diagnostics count and details', async ({ page
   )
 })
 
+test('clear component diagnostics resets rendered lint-issue status pill', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  await setComponentEditorSource(
+    page,
+    [
+      'const unusedValue = 1',
+      'const App = () => <button type="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('#status')).toHaveClass(/status--error/)
+
+  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('component lint ignores unused App View and render bindings', async ({ page }) => {
   await waitForInitialRender(page)
 

src/app.js

@@ -40,6 +40,7 @@ const diagnosticsToggle = document.getElementById('diagnostics-toggle')
 const diagnosticsDrawer = document.getElementById('diagnostics-drawer')
 const diagnosticsClose = document.getElementById('diagnostics-close')
 const diagnosticsClearComponent = document.getElementById('diagnostics-clear-component')
+const diagnosticsClearStyles = document.getElementById('diagnostics-clear-styles')
 const diagnosticsClearAll = document.getElementById('diagnostics-clear-all')
 const diagnosticsComponent = document.getElementById('diagnostics-component')
 const diagnosticsStyles = document.getElementById('diagnostics-styles')
@@ -469,7 +470,8 @@ const syncLintPendingState = () => {
 
 const runComponentLint = async () => {
   activeComponentLintAbortController?.abort()
-  activeComponentLintAbortController = new AbortController()
+  const controller = new AbortController()
+  activeComponentLintAbortController = controller
   componentLintPending = false
   syncLintPendingState()
   incrementLintDiagnosticsRuns()
@@ -478,20 +480,24 @@ const runComponentLint = async () => {
 
   try {
     const result = await lintDiagnostics.lintComponent({
-      signal: activeComponentLintAbortController.signal,
+      signal: controller.signal,
     })
     if (result) {
       lastComponentLintIssueCount = result.issueCount
     }
   } finally {
     decrementLintDiagnosticsRuns()
-    setLintButtonLoading({ button: lintComponentButton, isLoading: false })
+    if (activeComponentLintAbortController === controller) {
+      activeComponentLintAbortController = null
+      setLintButtonLoading({ button: lintComponentButton, isLoading: false })
+    }
   }
 }
 
 const runStylesLint = async () => {
   activeStylesLintAbortController?.abort()
-  activeStylesLintAbortController = new AbortController()
+  const controller = new AbortController()
+  activeStylesLintAbortController = controller
   stylesLintPending = false
   syncLintPendingState()
   incrementLintDiagnosticsRuns()
@@ -500,14 +506,17 @@ const runStylesLint = async () => {
 
   try {
     const result = await lintDiagnostics.lintStyles({
-      signal: activeStylesLintAbortController.signal,
+      signal: controller.signal,
     })
     if (result) {
       lastStylesLintIssueCount = result.issueCount
     }
   } finally {
     decrementLintDiagnosticsRuns()
-    setLintButtonLoading({ button: lintStylesButton, isLoading: false })
+    if (activeStylesLintAbortController === controller) {
+      activeStylesLintAbortController = null
+      setLintButtonLoading({ button: lintStylesButton, isLoading: false })
+    }
   }
 }
 
@@ -797,6 +806,12 @@ if (diagnosticsClearComponent) {
     }
   })
 }
+if (diagnosticsClearStyles) {
+  diagnosticsClearStyles.addEventListener('click', () => {
+    clearDiagnosticsScope('styles')
+    clearStylesLintDiagnosticsState()
+  })
+}
 if (diagnosticsClearAll) {
   diagnosticsClearAll.addEventListener('click', () => {
     clearAllDiagnostics()

src/index.html

@@ -379,6 +379,9 @@ <h2>Diagnostics</h2>
           <button class="render-button" id="diagnostics-clear-component" type="button">
             Clear component
           </button>
+          <button class="render-button" id="diagnostics-clear-styles" type="button">
+            Clear styles
+          </button>
           <button class="render-button" id="diagnostics-clear-all" type="button">
             Clear all
           </button>

src/modules/diagnostics-ui.js

@@ -52,6 +52,10 @@ export const createDiagnosticsUiController = ({
     diagnosticsByScope.component.level === 'ok' ||
     diagnosticsByScope.styles.level === 'ok'
 
+  const hasDiagnosticsErrorResult = () =>
+    diagnosticsByScope.component.level === 'error' ||
+    diagnosticsByScope.styles.level === 'error'
+
   const hasActiveDiagnosticsRuns = () =>
     activeTypeDiagnosticsRuns > 0 || activeLintDiagnosticsRuns > 0
 
@@ -60,7 +64,7 @@ export const createDiagnosticsUiController = ({
       return 'pending'
     }
 
-    if (getDiagnosticsIssueCount() > 0) {
+    if (getDiagnosticsIssueCount() > 0 || hasDiagnosticsErrorResult()) {
       return 'error'
     }
 
@@ -73,6 +77,19 @@ export const createDiagnosticsUiController = ({
 
   const updateUiIssueIndicators = () => {
     const diagnosticsLevel = getDiagnosticsIssueLevel()
+    const hasIssues = getDiagnosticsIssueCount() > 0
+    const isDiagnosticsPending = typeDiagnosticsPending || lintDiagnosticsPending
+
+    if (
+      !hasIssues &&
+      !isDiagnosticsPending &&
+      statusLevel === 'error' &&
+      (statusNode.textContent.startsWith('Rendered (Type errors:') ||
+        statusNode.textContent.startsWith('Rendered (Lint issues:'))
+    ) {
+      statusNode.textContent = 'Rendered'
+      statusLevel = 'neutral'
+    }
 
     statusNode.classList.remove('status--neutral', 'status--pending', 'status--error')
     statusNode.classList.add(`status--${statusLevel}`)

src/styles/diagnostics.css

@@ -167,6 +167,13 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .diagnostics-toggle--pending::after {
+    animation: none;
+    border-right-color: color-mix(in srgb, var(--accent) 70%, var(--panel-text));
+  }
+}
+
 @media (max-width: 900px) {
   .diagnostics-drawer {
     top: auto;