ci: lint, typecheck, test and build the ui/ app

.github/workflows/ui.yml

@@ -0,0 +1,63 @@
+name: UI
+
+# The graph debugger in ui/ had no CI at all (#452): ci.yml runs only the Python
+# toolchain, so a change there could break the build and still merge green. It
+# had already happened — when this job was added, main carried six eslint errors
+# and two TypeScript errors that nothing had reported.
+#
+# Path-filtered so Python-only changes do not pay for a bun install, and the
+# workflow file itself is in the filter so an edit to it runs it.
+on:
+  push:
+    branches: [ main, dev, "feat/**", "fix/**", "docs/**" ]
+    paths: [ "ui/**", ".github/workflows/ui.yml" ]
+  pull_request:
+    branches: [ main ]
+    paths: [ "ui/**", ".github/workflows/ui.yml" ]
+
+permissions:
+  contents: read
+
+jobs:
+  ui-ci:
+    name: UI Verification
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ui
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5  # v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6  # v2.2.0
+        with:
+          # Pinned rather than "latest": the lockfile format moves with bun, and
+          # a runner picking up a new release must not be what turns this red.
+          bun-version: 1.3.14
+
+      - name: Install Dependencies
+        # --frozen-lockfile fails when bun.lock is out of step with package.json,
+        # the job's equivalent of `uv lock --check` in ci.yml. --ignore-scripts
+        # because no dependency here needs an install hook — verified by running
+        # every step below from a clean install with it — so none gets to run
+        # code on the runner (Sonar githubactions:S6505).
+        run: bun install --frozen-lockfile --ignore-scripts
+
+      - name: ESLint
+        run: bun run lint
+
+      - name: TypeScript
+        # Vite transpiles TypeScript without type-checking it, so `build` below
+        # passes a type error. This is the only step that reads the types.
+        # Through a package script, so it runs the `typescript` pinned in
+        # bun.lock; `bunx tsc` could fetch an unpinned one (Sonar S8543).
+        run: bun run typecheck
+
+      - name: Tests
+        # vitest, not `bun test`: the native runner has no `vi.mock` hoisting, and
+        # component tests that use it fail under it (ui/AGENTS.md).
+        run: bun run test:run
+
+      - name: Build
+        run: bun run build

ui/package.json

@@ -20,6 +20,7 @@
     "test:run": "vitest run",
     "preview": "vite preview",
     "lint": "eslint src/",
+    "typecheck": "tsc --noEmit -p .",
     "lint:fix": "eslint src/ --fix",
     "format": "prettier --write src/",
     "format:check": "prettier --check src/",

ui/src/components/ControlPanel.test.tsx

@@ -26,6 +26,8 @@ function renderControlPanel(props: Partial<Parameters<typeof ControlPanel>[0]> =
     onBackToRoot: vi.fn(),
     searchQuery: "",
     setSearchQuery: vi.fn(),
+    colorMode: "type" as const,
+    onToggleColorMode: vi.fn(),
   };
   return render(<ControlPanel {...defaults} {...props} />);
 }

ui/src/store/useGraphStore.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import type { Node, Edge } from '@xyflow/react'
-import type { GraphNode, GraphEdge } from '../types'
+import type { GraphNode, GraphEdge, NodeNamespace } from '../types'
 
 type EdgeTypeName = 'CALLS' | 'IMPORTS' | 'EXTENDS' | 'CONTAINS' | 'DECLARES'
 type ViewMode = 'full' | 'flow' | 'ego'
@@ -67,7 +67,7 @@ export const useGraphStore = create<GraphStore>((set) => ({
       ...new Set(
         graphNodes
           .map((n) => n.namespace)
-          .filter((ns): ns is string => typeof ns === 'string' && ns.length > 0)
+          .filter((ns): ns is NodeNamespace => typeof ns === 'string' && ns.length > 0)
       ),
     ]
     set((state) => ({

ui/src/utils/applyHeatmap.test.ts

@@ -1,7 +1,8 @@
 import { describe, it, expect } from 'vitest'
+import type { Node } from '@xyflow/react'
 import { applyHeatmapColors } from './applyHeatmap'
 
-function makeNode(id: string, metadata: Record<string, unknown> = {}) {
+function makeNode(id: string, metadata: Record<string, unknown> = {}): Node {
   return {
     id,
     type: 'default',
@@ -14,38 +15,38 @@ function makeNode(id: string, metadata: Record<string, unknown> = {}) {
 describe('applyHeatmapColors', () => {
   it('returns same array reference when disabled', () => {
     const nodes = [makeNode('a')]
-    const result = applyHeatmapColors(nodes as any, false)
+    const result = applyHeatmapColors(nodes, false)
     expect(result).toBe(nodes)
   })
 
   it('overrides background/border for healthy node (fan_out=1)', () => {
     const nodes = [makeNode('a', { fan_out: 1, in_cycle: false })]
-    const result = applyHeatmapColors(nodes as any, true)
+    const result = applyHeatmapColors(nodes, true)
     expect(result[0].style?.background).toBe('#1b3a1b')
     expect(result[0].style?.borderColor).toBe('#66bb6a')
   })
 
   it('uses critical color for in_cycle=true regardless of fan_out', () => {
     const nodes = [makeNode('a', { fan_out: 0, in_cycle: true })]
-    const result = applyHeatmapColors(nodes as any, true)
+    const result = applyHeatmapColors(nodes, true)
     expect(result[0].style?.background).toBe('#3b0000')
   })
 
   it('uses warning color for fan_out=7', () => {
     const nodes = [makeNode('a', { fan_out: 7, in_cycle: false })]
-    const result = applyHeatmapColors(nodes as any, true)
+    const result = applyHeatmapColors(nodes, true)
     expect(result[0].style?.background).toBe('#3b2a00')
   })
 
   it('preserves other style properties', () => {
     const nodes = [makeNode('a', { fan_out: 1, in_cycle: false })]
-    const result = applyHeatmapColors(nodes as any, true)
+    const result = applyHeatmapColors(nodes, true)
     expect(result[0].style).toBeDefined()
   })
 
   it('nodes without health metadata get healthy color', () => {
     const nodes = [makeNode('a', {})]
-    const result = applyHeatmapColors(nodes as any, true)
+    const result = applyHeatmapColors(nodes, true)
     expect(result[0].style?.background).toBe('#1b3a1b')
   })
 })