Adopt Biome for frontend formatting and linting (#327)

[peteski22]

Summary

Adopts Biome as the single linter+formatter for the frontend, replacing ESLint. The TypeScript style rules in .claude/rules/typescript.md (no semicolons, double quotes) were aspirational under ESLint; Biome makes them enforced.

Two commits:

1. chore(frontend): adopt Biome, replace ESLint; config-only swap.
2. style(frontend): apply Biome formatting and fix lint violations; the autofixed reformat plus manual fixes for a11y and other lint errors that ESLint never caught.

What changed

Config

• server/frontend/biome.json: recommended rules, double quotes, semicolons: asNeeded, organize imports, tailwindDirectives CSS parser.
• pnpm lint now runs biome check --write .; lint:check added for write-free CI verification.
• ESLint config and plugins removed.
• scripts/lint-frontend.sh now ends with git diff --exit-code so CI fails when Biome would change checked-in files.

Source fixes

• 26 files reformatted (semicolons, quotes, import ordering).
• type="button" added to 17 <button> elements (a11y/useButtonType).
• Modal backdrops in FilteredListModal and KnowledgeUnitModal refactored from clickable <div> overlays to <button> overlays (a11y/useSemanticElements, useKeyWithClickEvents, noStaticElementInteractions).
• Recent Activity in DashboardPage refactored from a <table> with role="button" rows to a <ul> of <li><button> grid items (a11y/useSemanticElements).
• <div role="group"> in ApiKeysPage filter row replaced with <fieldset>.
• 3 non-null assertions replaced with explicit null checks (style/noNonNullAssertion).
• headers["Authorization"] rewritten as headers.Authorization (complexity/useLiteralKeys).

Test plan

• pnpm exec biome check . clean (33 files, 0 errors)
• pnpm tsc -b passes
• pnpm test passes (11/11)
• bash scripts/lint-frontend.sh runs end-to-end with git diff --exit-code clean
• Manual browser smoke test of the reworked surfaces (modal backdrop click-to-close, Recent Activity row clicks, API Keys filter group, root null guard); not run by me, recommended before merge

Closes #327

[Copilot]

Pull request overview

Adopts Biome as the frontend’s unified formatter + linter (replacing ESLint) and applies the resulting formatting/lint/a11y fixes across the frontend codebase.

Changes:

• Replace ESLint with Biome, add biome.json, and update pnpm scripts/lockfile accordingly.
• Apply Biome formatting (imports/quotes/semicolons) across TS/TSX files and address newly surfaced lint rules.
• Improve accessibility semantics in several UI surfaces (button types, modal backdrops, and “Recent Activity” interactions).

Reviewed changes

Copilot reviewed 30 out of 31 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
server/frontend/vite.config.ts	Biome-driven import ordering and formatting updates.
server/frontend/src/utils.ts	Formatting-only changes (semicolon removal).
server/frontend/src/types.ts	Formatting-only changes to type declarations.
server/frontend/src/test-setup.ts	Formatting-only changes in test setup + localStorage mock.
server/frontend/src/pages/ReviewPage.tsx	Formatting + add type="button" and minor JSX restructuring.
server/frontend/src/pages/LoginPage.tsx	Formatting-only changes.
server/frontend/src/pages/DashboardPage.tsx	Formatting + a11y refactor of Recent Activity interactions and type="button" additions.
server/frontend/src/pages/ApiKeysPage.tsx	Formatting + semantic a11y improvements (fieldset, button types) and JSX wrapping.
server/frontend/src/pages/ApiKeysPage.test.tsx	Formatting + make tests more explicit/defensive around element lookups.
server/frontend/src/main.tsx	Replace non-null assertion with explicit root element null guard.
server/frontend/src/hooks/useCardDrag.ts	Formatting-only changes (plus ASI-safe leading semicolon insertion).
server/frontend/src/components/StatusBadge.tsx	Formatting-only changes.
server/frontend/src/components/ReviewCard.tsx	Import ordering + formatting and JSX wrapping.
server/frontend/src/components/ReviewActions.tsx	Formatting + add type="button" and expand inline control flow.
server/frontend/src/components/ProtectedRoute.tsx	Import ordering + formatting-only changes.
server/frontend/src/components/Layout.tsx	Formatting + add type="button" and minor promise formatting.
server/frontend/src/components/KnowledgeUnitModal.tsx	Formatting + modal backdrop refactor to semantic element/button.
server/frontend/src/components/FilteredListModal.tsx	Formatting + modal backdrop refactor to semantic element/button.
server/frontend/src/components/DragIndicators.tsx	Formatting-only changes and JSX wrapping for style objects.
server/frontend/src/components/DomainTags.tsx	Formatting-only changes.
server/frontend/src/components/ConfidenceBadge.tsx	Formatting-only changes (explicit JSX whitespace).
server/frontend/src/auth.tsx	Import ordering + formatting-only changes.
server/frontend/src/auth.test.tsx	Formatting-only changes and minor line wrapping.
server/frontend/src/api.ts	Formatting + minor refactor (headers.Authorization property access).
server/frontend/src/api.test.ts	Formatting-only changes.
server/frontend/src/App.tsx	Import ordering + formatting-only changes.
server/frontend/pnpm-lock.yaml	Add Biome packages; remove ESLint/TS-eslint related dependencies.
server/frontend/package.json	Replace lint script with Biome, add lint:check, drop ESLint deps, add Biome dep.
server/frontend/eslint.config.js	Remove ESLint configuration.
server/frontend/biome.json	Add Biome configuration (recommended rules + formatter preferences).
scripts/lint-frontend.sh	Update frontend lint script to run Biome (via pnpm lint) and fail on dirty tree.

Files not reviewed (1)

• server/frontend/pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[khaledosman]

can we enable the react-compiler aswell as any related lint rules to it?

https://react.dev/learn/react-compiler/installation#vite