refactor(a11y): single-page panel, compact rows, icon + category fixes

- Collapse the Dashboard/Violations tabs into one scrolling page: a sticky
  summary band (severity chips + counts + auto-scan/best-practice/clear
  controls) over the grouped, per-route violation list.
- Tighten the violation rows, chips, and group headers for a denser list.
- Fix icon rendering: pair every icon with a companion utility class (and mark
  it aria-hidden), matching how @antfu/design renders icons — a bare
  single-class `i-ph-*` span isn't extracted by UnoCSS, so Rescan/pin/clear
  icons were blank.
- Show the messages-feed entries under a short `a11y` category instead of the
  `devframes_plugin_a11y` dock id.

Co-authored-with an agent.

Author: antfubot

plugins/a11y/src/inject/messages.ts

@@ -31,6 +31,12 @@ export interface HubMessageInput {
   message: string
   description?: string
   level: 'info' | 'warn' | 'error' | 'success' | 'debug'
+  /**
+   * Grouping category shown in the messages panel. Set explicitly to a short
+   * `'a11y'` label — the hub client host otherwise defaults it to the dock id
+   * (e.g. `devframes_plugin_a11y`), and input fields win over that default.
+   */
+  category?: string
   labels?: string[]
   elementPosition?: {
     selector?: string
@@ -55,6 +61,8 @@ export interface A11yAgentContext {
   messages?: HubMessagesClient
 }
 
+/** Short, human-facing grouping label shown in the messages panel. */
+const MESSAGE_CATEGORY = 'a11y'
 /** One deduplicated summary entry tracks the scan lifecycle. */
 const SCAN_MESSAGE_ID = 'devframes:plugin:a11y:scan'
 /** One deduplicated entry per violated rule; removed when the rule clears. */
@@ -104,7 +112,9 @@ export function createMessagesReporter(
 ): MessagesReporter {
   let reportedRules = new Set<string>()
   // Fire-and-forget: the feed is a mirror, never a gate for the scan loop.
-  const send = (input: HubMessageInput) => void messages.add(input).catch(() => {})
+  // Every entry is grouped under the short `a11y` category.
+  const send = (input: HubMessageInput) =>
+    void messages.add({ category: MESSAGE_CATEGORY, ...input }).catch(() => {})
   const drop = (id: string) => void messages.remove(id).catch(() => {})
   const dockId = () => options.dockId?.() ?? A11Y_DEFAULT_DOCK_ID
 

plugins/a11y/src/spa/app.tsx

@@ -1,11 +1,10 @@
 import type { Impact, PinTarget, ScanReport, Violation, ViolationNode } from '../shared/protocol.ts'
-import type { TabId } from './components/header.tsx'
 import type { PinsApi, RouteGroupModel } from './components/violations.tsx'
 import { batch, createEffect, createMemo, createSignal, Match, on, Show, Switch } from 'solid-js'
 import { emptyCounts } from '../shared/protocol.ts'
-import { Dashboard } from './components/dashboard.tsx'
 import { Header, MetaLine } from './components/header.tsx'
 import { CheckCircle, PlugIcon } from './components/icons.tsx'
+import { SummaryBar } from './components/summary.tsx'
 import { ruleCardId, ViolationList } from './components/violations.tsx'
 import { createA11yChannel } from './lib/channel.ts'
 import { connectDevframeState } from './lib/devframe.ts'
@@ -24,7 +23,6 @@ export function App() {
   const channel = createA11yChannel()
   const devframe = connectDevframeState()
 
-  const [activeTab, setActiveTab] = createSignal<TabId>('dashboard')
   const [filter, setFilter] = createSignal<Impact | null>(null)
   const [showBestPractice, setShowBestPractice] = createSignal(true)
   const [expandedRoutes, setExpandedRoutes] = createSignal<Set<string>>(new Set())
@@ -68,16 +66,7 @@ export function App() {
   const totalRules = createMemo(() =>
     routes().reduce((n, r) => n + r.violations.filter(includeViolation).length, 0))
 
-  const routeSummaries = createMemo(() =>
-    routes().map(r => ({
-      route: r.route,
-      active: r.route === activeRoute(),
-      ruleCount: r.violations.filter(includeViolation).length,
-      nodeCount: r.violations.filter(includeViolation).reduce((m, v) => m + v.nodes.length, 0),
-    })))
-
-  // Grouped, filtered violations for the Violations tab — active route first,
-  // empty groups dropped.
+  // Grouped, filtered violations — active route first, empty groups dropped.
   const groups = createMemo<RouteGroupModel[]>(() => {
     const models = routes().map(r => ({
       report: r,
@@ -183,14 +172,15 @@ export function App() {
     if (cfg && act.dockId !== cfg.dockId)
       return
     const params = act.params ?? {}
-    const tab = params.tab === 'dashboard' ? 'dashboard' : 'violations'
-    setActiveTab(tab)
-    if (tab === 'dashboard')
-      return
     const route = typeof params.route === 'string' ? params.route : undefined
     const ruleId = typeof params.ruleId === 'string' ? params.ruleId : undefined
-    if (!route)
+
+    // A dashboard/summary activation (or one with no target) just scrolls to top.
+    if (params.tab === 'dashboard' || !route) {
+      document.querySelector('.scroll')?.scrollTo({ top: 0, behavior: 'smooth' })
       return
+    }
+
     batch(() => {
       setExpandedRoutes(prev => new Set(prev).add(route))
       if (ruleId)
@@ -205,7 +195,6 @@ export function App() {
           return [...prev, ...v.nodes.filter(n => !have.has(n.id)).map(n => nodePin(v, n))]
         })
       }
-      // Scroll the card into view once it has rendered.
       setTimeout(() => document.getElementById(ruleCardId(route, ruleId))?.scrollIntoView({ block: 'center', behavior: 'smooth' }), 60)
     }
   }, { defer: true }))
@@ -234,11 +223,6 @@ export function App() {
       return next
     })
   }
-  function selectRoute(route: string) {
-    setActiveTab('violations')
-    setExpandedRoutes(prev => new Set(prev).add(route))
-    setTimeout(() => document.getElementById(`group-${encodeURIComponent(route)}`)?.scrollIntoView({ block: 'start', behavior: 'smooth' }), 60)
-  }
 
   const announce = () => {
     if (!channel.state())
@@ -251,8 +235,6 @@ export function App() {
       <Header
         agentReady={channel.agentReady()}
         scanning={channel.scanning()}
-        activeTab={activeTab()}
-        onTab={setActiveTab}
         onRescan={channel.rescan}
       />
       <MetaLine
@@ -289,25 +271,7 @@ export function App() {
             </div>
           </Match>
 
-          {/* Dashboard. */}
-          <Match when={activeTab() === 'dashboard'}>
-            <Dashboard
-              counts={chipCounts()}
-              filter={filter()}
-              onToggleFilter={toggleFilter}
-              totalNodes={totalNodes()}
-              totalRules={totalRules()}
-              routes={routeSummaries()}
-              onSelectRoute={selectRoute}
-              autoScan={autoScan()}
-              onToggleAutoScan={setAutoScan}
-              showBestPractice={showBestPractice()}
-              onToggleBestPractice={setShowBestPractice}
-              onClearAll={channel.clearAll}
-            />
-          </Match>
-
-          {/* Violations — clean. */}
+          {/* Report in, nothing to flag. */}
           <Match when={totalFilterable() === 0}>
             <div class="state state--clean">
               <CheckCircle class="state__glyph" />
@@ -319,43 +283,48 @@ export function App() {
             </div>
           </Match>
 
-          {/* Violations — filtered to empty. */}
-          <Match when={shownViolations() === 0}>
-            <div class="state">
-              <CheckCircle class="state__glyph" />
-              <p class="state__title">Nothing matches the filter</p>
-              <p class="state__body">
-                {totalFilterable()}
-                {' '}
-                {totalFilterable() === 1 ? 'rule' : 'rules'}
-                {' '}
-                at other severities. Clear the filter to see them.
-              </p>
-            </div>
-          </Match>
+          {/* Single page: summary band + grouped violations. */}
+          <Match when={totalFilterable() > 0}>
+            <SummaryBar
+              counts={chipCounts()}
+              filter={filter()}
+              onToggleFilter={toggleFilter}
+              totalNodes={totalNodes()}
+              totalRules={totalRules()}
+              routeCount={routes().length}
+              autoScan={autoScan()}
+              onToggleAutoScan={setAutoScan}
+              showBestPractice={showBestPractice()}
+              onToggleBestPractice={setShowBestPractice}
+              onClearAll={channel.clearAll}
+            />
 
-          {/* Violations — grouped list. */}
-          <Match when={shownViolations() > 0}>
-            <Show when={shownViolations() !== totalFilterable()}>
-              <p class="filtered-note">
-                Showing
-                {' '}
-                {shownViolations()}
-                {' of '}
-                {totalFilterable()}
-                {' rules'}
-              </p>
+            <Show
+              when={shownViolations() > 0}
+              fallback={(
+                <div class="state">
+                  <CheckCircle class="state__glyph" />
+                  <p class="state__title">Nothing matches the filter</p>
+                  <p class="state__body">
+                    {totalFilterable()}
+                    {' '}
+                    {totalFilterable() === 1 ? 'rule' : 'rules'}
+                    {' at other severities. Clear the filter to see them.'}
+                  </p>
+                </div>
+              )}
+            >
+              <ViolationList
+                groups={groups()}
+                collapsedRoutes={collapsedRoutes()}
+                onToggleGroup={toggleGroup}
+                onClearRoute={channel.clearRoute}
+                expandedRules={expandedRules()}
+                onToggleRule={toggleRule}
+                channel={channel}
+                pins={pinsApi}
+              />
             </Show>
-            <ViolationList
-              groups={groups()}
-              collapsedRoutes={collapsedRoutes()}
-              onToggleGroup={toggleGroup}
-              onClearRoute={channel.clearRoute}
-              expandedRules={expandedRules()}
-              onToggleRule={toggleRule}
-              channel={channel}
-              pins={pinsApi}
-            />
           </Match>
         </Switch>
       </div>