fix(dashboard): functional, a11y & type-check bug sweep

Final correctness and quality pass.

- Route diagnostics per-file to the correct language server.
- Functional + a11y bug sweep across all tabs.
- Resolve poe type-check (mypy) errors.
- Enforce Svelte 5 patterns in CLAUDE.md and add a Serena memory.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: paul-basanets

.serena/memories/core.md

@@ -11,7 +11,7 @@ Serena is an MCP-based "IDE for coding agents": semantic code retrieval/editing/
   - `config/` — `serena_config.py`, `context_mode.py`, `client_setup.py`
   - `resources/config/contexts/*.yml`, `resources/config/modes/*.yml` — context/mode definitions
   - `code_editor.py`, `symbol.py`, `ls_manager.py` — symbolic editing / LS lifecycle
-  - `dashboard.py`, `gui_log_viewer.py` — web dashboard / log viewer
+  - `dashboard.py`, `gui_log_viewer.py` — web dashboard backend (frozen API) / log viewer; the Svelte frontend lives in `dashboard/` — see `mem:dashboard_frontend`
   - `prompt_factory.py` + `generated/generated_prompt_factory.py` — prompts (regenerate with `scripts/gen_prompt_factory.py`)
 - `src/solidlsp/` — LSP client framework; per-language servers under `language_servers/`
 - `src/interprompt/` — prompt template library (synced from external repo; see `.syncCommitId.*`)

.serena/memories/dashboard_frontend.md

@@ -0,0 +1,42 @@
+# Dashboard Frontend
+
+Svelte 5 (runes) + TS + Vite SPA in `dashboard/`. Built into
+`src/serena/resources/dashboard/` and served by Flask in `src/serena/dashboard.py`
+at `/dashboard/`. **`dashboard/CLAUDE.md` is the authoritative ruleset** — read it
+before editing anything under `dashboard/`; this memory only records the
+hard invariants.
+
+## Hard invariants
+
+- **Backend is a frozen contract.** `dashboard.py` endpoint names, request/response
+  shapes, ports, and the host-header check must not change from the frontend.
+  Canonical route list = `API_ROUTES` in `dashboard/vite.config.ts`.
+- **Build output is committed & CI-enforced.** After any `dashboard/src` change:
+  `npm run build` (writes hashed assets to `src/serena/resources/dashboard/`) and
+  commit the regenerated `index.html` + `assets/`. Stale output fails CI
+  (`.github/workflows/dashboard.yml`; poe task `poe build-dashboard`).
+- Before committing dashboard work: `npm run format` and **stage all changes** — a
+  partial stage leaves files prettier-dirty and CI's `prettier --check` fails.
+- `prebuild` (`scripts/clean-assets.mjs`) clears `assets/` because
+  `emptyOutDir: false` (the dir also holds icon/logo PNGs).
+
+## Commands (run from `dashboard/`)
+
+`npm run dev` (Vite :5273, proxies API to a Serena server on :24282) ·
+`npm run build` · `npm run check` (svelte-check) · `npm test` (Vitest) ·
+`npm run lint` / `npm run format`. Dev needs a running Serena MCP server with the
+dashboard enabled; logos/icons 404 under dev (backend-served).
+
+## Architecture invariants
+
+- Layered: `lib/api/` (`types.ts` → `endpoints.ts` → `client.ts`, the only `fetch`)
+  → `lib/stores/*.svelte.ts` (runes singletons, getter-only) → components. Never
+  `fetch` from a component.
+- Two backend failure channels (non-2xx `ApiError` AND HTTP-200
+  `{status:'error'}`); normalize every mutation through `runMutation()`.
+- `$derived` for computed values; `$effect` only for true side effects (never to
+  sync state). Reactive collections use `SvelteSet`/`SvelteMap`. Colors via
+  `var(--token)` from `styles/tokens.css`, never hardcoded. Charts only through
+  `ChartPanel.svelte`. Snippets, not `<slot>`. No jQuery.
+- Each store/lib gets a unit test; each component a render+interaction test.
+  Vitest + jsdom; chart-mounting tests must mock `chart.js/auto`.

.serena/project.yml

@@ -3,27 +3,24 @@ project_name: "serena"
 
 
 # list of languages for which language servers are started; choose from:
-#   al                  angular             ansible             bash                clojure
-#   cpp                 cpp_ccls            crystal             csharp              csharp_omnisharp
-#   dart                elixir              elm                 erlang              fortran
-#   fsharp              go                  groovy              haskell             haxe
-#   hlsl                html                java                json                julia
-#   kotlin              lean4               lua                 luau                markdown
-#   matlab              msl                 nix                 ocaml               pascal
-#   perl                php                 php_phpactor        powershell          python
-#   python_jedi         python_ty           r                   rego                ruby
-#   ruby_solargraph     rust                scala               scss                solidity
-#   svelte              swift               systemverilog       terraform           toml
-#   typescript          typescript_vts      vue                 yaml                zig
+#   al                  ansible             bash                clojure             cpp
+#   cpp_ccls            crystal             csharp              csharp_omnisharp    dart
+#   elixir              elm                 erlang              fortran             fsharp
+#   go                  groovy              haskell             haxe                hlsl
+#   java                json                julia               kotlin              lean4
+#   lua                 luau                markdown            matlab              msl
+#   nix                 ocaml               pascal              perl                php
+#   php_phpactor        powershell          python              python_jedi         python_ty
+#   r                   rego                ruby                ruby_solargraph     rust
+#   scala               solidity            swift               systemverilog       terraform
+#   toml                typescript          typescript_vts      vue                 yaml
+#   zig
 #   (This list may be outdated. For the current list, see values of Language enum here:
 #   https://github.com/oraios/serena/blob/main/src/solidlsp/ls_config.py
 #   For some languages, there are alternative language servers, e.g. csharp_omnisharp, ruby_solargraph.)
 # Note:
 #   - For C, use cpp
 #   - For JavaScript, use typescript
-#   - For Angular projects, use angular (subsumes typescript+html; requires `npm install` in the project root)
-#   - For Svelte projects, use svelte (subsumes typescript/javascript for .svelte projects; requires npm)
-#   - For SCSS / Sass / plain CSS, use scss (some-sass-language-server handles all three)
 #   - For Free Pascal/Lazarus, use pascal
 # Special requirements:
 #   Some languages require additional setup/installations.
@@ -33,7 +30,7 @@ project_name: "serena"
 # Note that when using the JetBrains backend, language servers are not used and this list is correspondingly ignored.
 languages:
 - python
-- svelte
+- typescript
 
 # whether to use project's .gitignore files to ignore files
 ignore_all_files_in_gitignore: true

dashboard/CLAUDE.md

@@ -26,16 +26,41 @@ and fail CI's `prettier --check`). `prebuild` (`scripts/clean-assets.mjs`) clear
 
 ## Architecture rules
 
-- Components are small, single-purpose: props in, events out (`on*` callback
-  props, not `createEventDispatcher`), scoped CSS. Compose `common/` primitives
-  (`Card`, `Button`, `Modal`, `Spinner`, `Combobox`, `Collapsible`) — don't
-  re-implement their markup.
+- Components are small, single-purpose: a typed `interface Props` +
+  `let {...} = $props()`, props in / events out (`on*` callback props, **not**
+  `createEventDispatcher`), scoped CSS. Compose `common/` primitives (`Button`,
+  `Card`, `Collapsible`, `Combobox`, `FilterDropdown`, `Icon`, `Modal`,
+  `Popover`, `Spinner`) — don't re-implement their markup.
+- **Derive, don't sync.** Compute reactive values with `$derived`; reserve
+  `$effect` for true side effects (DOM, Chart.js, subscriptions, autoscroll).
+  Never use `$effect` to copy one piece of state into another — that's a
+  `$derived`.
+- Icons: import a `@lucide/svelte` component and pass it to `Icon`
+  (`<Icon icon={Foo} label="…" />`); the `label` toggles `role="img"`/`aria-label`
+  vs `aria-hidden`, so a11y stays centralized. No raw inline `<svg>`, no bare
+  lucide component in markup.
 - Colors come from `src/styles/tokens.css` (light + `[data-theme='dark']`).
   Never hardcode hex; use `var(--token)`.
+- Pass markup into a component as **snippets** (`children` typed `Snippet`,
+  rendered with `{@render children()}`) — never the deprecated `<slot>`.
 - Charts go **only** through `src/components/stats/ChartPanel.svelte`.
 - Never `fetch` from a component — all network goes through `src/lib/api/`.
 - Never reintroduce jQuery.
 
+## Recipes
+
+- **Backend-backed feature:** type in `api/types.ts` → typed fn in
+  `api/endpoints.ts` (+ add the route to `API_ROUTES` in `vite.config.ts`) →
+  store under `stores/*.svelte.ts` → component → Vitest test → `npm run build` &
+  commit output.
+- **Modal:** extend `ModalState` (`stores/modal.svelte.ts`) → add a case in
+  `ModalHost.svelte` → build the component (wrap `ConfirmModal` if confirm-style;
+  `createModalAction()` if it mutates).
+- **Chart:** add a pure `ChartSpec` builder in `charts.ts`, render via
+  `ChartPanel` — never import `chart.js` elsewhere.
+- **Common primitive:** add to `components/common/`, drive variants by props,
+  expose content as snippets, style with `var(--token)` only.
+
 ## State: runes stores (`src/lib/stores/*.svelte.ts`)
 
 `$state` only lives in `.svelte.ts` modules. Each store is a factory returning
@@ -59,6 +84,14 @@ export const x = createXStore(); // import the singleton; factory exists for tes
 Never expose the `$state` variable directly — only getters, so reads stay
 reactive and writes funnel through methods.
 
+- Reactive `Set`/`Map` use `SvelteSet`/`SvelteMap` from `svelte/reactivity` (see
+  `expanded` in `code.svelte.ts`) — plain `Set`/`Map` mutations don't trigger
+  updates.
+- Guard overlapping async writes with a plain (non-reactive) **epoch counter**:
+  bump + snapshot it before the `await`, then drop the result if the snapshot is
+  stale (see `searchEpoch`/`diagEpoch` in `code.svelte.ts`). Stops a slow earlier
+  request from clobbering a newer one.
+
 ## API layer (`src/lib/api/`)
 
 - `types.ts` — TS mirrors of backend JSON. `endpoints.ts` — one typed fn per

dashboard/src/components/code/DiagnosticsPanel.svelte

@@ -182,6 +182,14 @@
     </div>
   {/if}
 
+  {#if code.diag_skipped_unsupported > 0 && !code.diag_loading}
+    <div class="skipped" role="note">
+      {code.diag_skipped_unsupported}
+      {code.diag_skipped_unsupported === 1 ? 'file was' : 'files were'} not analyzed — no language server
+      is running for {code.diag_skipped_unsupported === 1 ? 'its type' : 'their types'}.
+    </div>
+  {/if}
+
   {#if code.diag_files.length === 0 && !code.diag_loading && !code.diag_error}
     {#if code.diag_last_scope}
       <p class="empty">
@@ -331,6 +339,15 @@
     padding: var(--space-2);
     margin-bottom: var(--space-2);
   }
+  .skipped {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: var(--space-1) var(--space-2);
+    margin-bottom: var(--space-2);
+    color: var(--text-secondary);
+    font-size: 0.85em;
+  }
   .error-card {
     border-color: var(--log-error);
     color: var(--log-error);

dashboard/src/components/code/WorkspaceSearch.svelte

@@ -37,7 +37,7 @@
   {/if}
   {#if code.search_results.length > 0}
     <ul class="results">
-      {#each code.search_results as m (m.path + ':' + m.name + ':' + m.range.start.line)}
+      {#each code.search_results as m (m.path + ':' + m.name + ':' + m.range.start.line + ':' + m.range.start.character)}
         <li>
           <button type="button" onclick={() => selectMatch(m.path)} class="match">
             <span class="kind">{m.kind}</span>

dashboard/src/components/common/Modal.svelte

@@ -1,3 +1,9 @@
+<script module lang="ts">
+  // Per-instance counter for unique title ids (so aria-labelledby resolves even
+  // with multiple modals mounted across a session).
+  let modalUid = 0;
+</script>
+
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { onDestroy } from 'svelte';
@@ -17,6 +23,7 @@
 
   let contentEl = $state<HTMLDivElement | null>(null);
   let previouslyFocused: HTMLElement | null = null;
+  const titleId = `modal-title-${modalUid++}`;
 
   // Move focus into the dialog when it opens, and restore it to the trigger on close,
   // so keyboard/screen-reader users land inside the modal instead of behind it.
@@ -41,10 +48,14 @@
     const first = focusable[0];
     const last = focusable[focusable.length - 1];
     const activeEl = document.activeElement;
-    if (e.shiftKey && activeEl === first) {
+    // Initial focus sits on the dialog container (tabindex=-1), which is NOT in
+    // the focusable list. Treat "focus not within the list" as a boundary too,
+    // otherwise the very first Shift+Tab escapes the trap to the page behind.
+    const withinList = Array.prototype.indexOf.call(focusable, activeEl) !== -1;
+    if (e.shiftKey && (activeEl === first || !withinList)) {
       e.preventDefault();
       last.focus();
-    } else if (!e.shiftKey && activeEl === last) {
+    } else if (!e.shiftKey && (activeEl === last || !withinList)) {
       e.preventDefault();
       first.focus();
     }
@@ -59,6 +70,7 @@
       class="modal-content"
       role="dialog"
       aria-modal="true"
+      aria-labelledby={title ? titleId : undefined}
       tabindex="-1"
       bind:this={contentEl}
       onclick={(e) => e.stopPropagation()}
@@ -71,7 +83,7 @@
     >
       <button type="button" class="modal-close" aria-label="Close" onclick={onclose}>&times;</button
       >
-      {#if title}<h3>{title}</h3>{/if}
+      {#if title}<h3 id={titleId}>{title}</h3>{/if}
       {#if error}<p class="modal-error" role="alert">{error}</p>{/if}
       {@render children()}
     </div>

dashboard/src/components/stats/ChartPanel.svelte

@@ -31,7 +31,9 @@
       cssVar('--chart-3', '#7fb77e'),
       cssVar('--chart-4', '#d88c8c'),
       cssVar('--chart-5', '#b39ddb'),
-      cssVar('--chart-6', '#e0a458'),
+      cssVar('--chart-6', '#4db6ac'),
+      cssVar('--chart-7', '#e57aa8'),
+      cssVar('--chart-8', '#a1887f'),
     ];
   }
 

dashboard/src/components/stats/RateChart.svelte

@@ -6,13 +6,18 @@
   type WindowMinutes = 15 | 30 | 60 | 360;
   let windowMinutes = $state<WindowMinutes>(15);
   let stacked = $state(false);
-  let enabledTools = $state<Set<string>>(new Set());
+  // null = "all tools" (the default, and what "Show all" restores — new tools
+  // auto-included). An explicit Set is the user's selection; an empty Set means
+  // "Disable all" (show none), which a plain empty Set could not distinguish
+  // from the initial state.
+  let enabledTools = $state<Set<string> | null>(null);
 
   const allTools = $derived(Array.from(new Set(timeline.records.map((r) => r.tool))).sort());
-  // When stacked is on and the user hasn't picked any tool, show all of them.
-  const activeTools = $derived(
-    stacked ? allTools.filter((t) => enabledTools.size === 0 || enabledTools.has(t)) : [],
-  );
+  const activeTools = $derived.by(() => {
+    if (!stacked) return [];
+    const sel = enabledTools;
+    return sel === null ? allTools : allTools.filter((t) => sel.has(t));
+  });
 
   // Re-bucket on every tick so the current minute keeps catching live calls
   // (B17 — current minute is the LAST bucket, never dropped).
@@ -27,7 +32,7 @@
   const spec = $derived(rateChartSpec(timeline.records, nowS, windowMinutes, stacked, activeTools));
 
   function showAll() {
-    enabledTools = new Set(allTools);
+    enabledTools = null;
   }
   function disableAll() {
     enabledTools = new Set();

dashboard/src/lib/api/types.ts

@@ -211,4 +211,8 @@ export interface FileDiagnostics {
 export interface ResponseDiagnosticsSummary {
   files: FileDiagnostics[];
   truncated: boolean;
+  // Count of in-scope files no language server handles (e.g. Markdown/JSON in a
+  // Python-only project). Skipped rather than mis-linted; optional for backward
+  // compatibility with older backends that omit it.
+  skipped_unsupported?: number;
 }