From 5219adb0f212e4bbc3812b022a924eee8bdc57b6 Mon Sep 17 00:00:00 2001
From: jbreite <joshbreite@gmail.com>
Date: Sat, 7 Mar 2026 16:40:04 -0500
Subject: [PATCH] Fix lint and typecheck CI failures

- Disable noSvgWithoutTitle and noArrayIndexKey biome rules (decorative
  SVGs and static list keys)
- Add type="button" to all button elements
- Remove unused imports and variables
- Add biome-ignore comments for legitimate suppressions
- Fix non-null assertion in budget integration test
- Use template literals in TOC component

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 biome.json                               |  6 ++++++
 docs/src/app/MobileNav.tsx               |  3 +++
 docs/src/app/SideNav.tsx                 | 10 +++++-----
 docs/src/app/components/CodeBlock.tsx    |  2 ++
 docs/src/app/page.tsx                    |  2 ++
 docs/src/components/TOC.tsx              |  5 +++--
 docs/src/hooks/useActiveScrollElement.ts |  5 +++--
 tests/tools/budget-integration.test.ts   |  2 ++
 8 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/biome.json b/biome.json
index 07ac23b..a5ee4b6 100644
--- a/biome.json
+++ b/biome.json
@@ -19,6 +19,12 @@
       "recommended": true,
       "style": {
         "useNodejsImportProtocol": "off"
+      },
+      "a11y": {
+        "noSvgWithoutTitle": "off"
+      },
+      "suspicious": {
+        "noArrayIndexKey": "off"
       }
     }
   },
diff --git a/docs/src/app/MobileNav.tsx b/docs/src/app/MobileNav.tsx
index 82f3186..db374e9 100644
--- a/docs/src/app/MobileNav.tsx
+++ b/docs/src/app/MobileNav.tsx
@@ -26,6 +26,7 @@ function MobileThemeToggle() {
 
   return (
     <button
+      type="button"
       onClick={() => setTheme(isDark ? "light" : "dark")}
       aria-label={`Switch to ${isDark ? "light" : "dark"} mode`}
       style={{
@@ -82,6 +83,7 @@ export function MobileNav() {
   const [isOpen, setIsOpen] = useState(false);
   const pathname = usePathname();
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: close nav on route change
   useEffect(() => {
     setIsOpen(false);
   }, [pathname]);
@@ -117,6 +119,7 @@ export function MobileNav() {
             GitHub
           </a>
           <button
+            type="button"
             className={`mobile-nav-toggle ${isOpen ? "open" : ""}`}
             onClick={() => setIsOpen(!isOpen)}
             aria-label="Toggle navigation"
diff --git a/docs/src/app/SideNav.tsx b/docs/src/app/SideNav.tsx
index 66361c0..95672af 100644
--- a/docs/src/app/SideNav.tsx
+++ b/docs/src/app/SideNav.tsx
@@ -2,8 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useEffect, useState, useRef, useCallback } from "react";
-import { createPortal } from "react-dom";
+import { useEffect, useState, useRef } from "react";
 import { useTheme } from "next-themes";
 import { motion } from "framer-motion";
 import * as Motion from "../components/Motion";
@@ -167,6 +166,7 @@ function ThemePicker() {
   const currentTheme = theme || "system";
 
   return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: hover expand for theme picker
     <div
       className="theme-picker-wrap"
       onMouseEnter={() => setExpanded(true)}
@@ -195,6 +195,7 @@ function ThemePicker() {
             )}
             {themeOrder.map((t) => (
               <button
+                type="button"
                 key={t}
                 className={`theme-picker-option ${currentTheme === t ? "active" : ""}`}
                 onClick={() => setTheme(t)}
@@ -262,7 +263,6 @@ export function SideNav() {
         <div className="nav-links">
           {links.map((link) => {
             const isActive = pathname === link.href;
-            const hasItems = link.items && link.items.length > 0;
 
             return (
               <div key={link.href} className="nav-item-wrapper">
@@ -283,10 +283,10 @@ export function SideNav() {
                   }}
                 >
                   <Motion.Presence mode="sync">
-                    {isActive && hasItems && (
+                    {isActive && link.items && (
                       <Motion.Height>
                         <TOC
-                          headings={link.items!.map((item) => ({
+                          headings={link.items.map((item) => ({
                             id: item.id,
                             level: 1,
                             text: item.text,
diff --git a/docs/src/app/components/CodeBlock.tsx b/docs/src/app/components/CodeBlock.tsx
index 2a9522f..664d561 100644
--- a/docs/src/app/components/CodeBlock.tsx
+++ b/docs/src/app/components/CodeBlock.tsx
@@ -119,6 +119,7 @@ export function CopyButton({
     }
   };
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: animation refs are stable
   useEffect(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
@@ -135,6 +136,7 @@ export function CopyButton({
 
   return (
     <button
+      type="button"
       onClick={handleCopy}
       className={className ?? "copy-button"}
       title="Copy to clipboard"
diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx
index 30794c7..a9e9315 100644
--- a/docs/src/app/page.tsx
+++ b/docs/src/app/page.tsx
@@ -76,6 +76,7 @@ export default function Home() {
               rel="noopener noreferrer"
               className="tagline-brand"
             >
+              {/* biome-ignore lint/performance/noImgElement: static export incompatible with next/image */}
               <img
                 src="/claude-logo.jpg"
                 alt="Claude"
@@ -90,6 +91,7 @@ export default function Home() {
               rel="noopener noreferrer"
               className="tagline-brand"
             >
+              {/* biome-ignore lint/performance/noImgElement: static export incompatible with next/image */}
               <img
                 src="/vercel-logo.png"
                 alt="Vercel"
diff --git a/docs/src/components/TOC.tsx b/docs/src/components/TOC.tsx
index 4ae1ae5..eada545 100644
--- a/docs/src/components/TOC.tsx
+++ b/docs/src/components/TOC.tsx
@@ -24,11 +24,12 @@ export const TOC: React.FC<TableOfContentsProps> = ({
   const ids = React.useMemo(() => headings.map((h) => h.id), [headings]);
   const activeHeading = useActiveScrollElement(ids);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: reads DOM measurements when active heading changes
   React.useEffect(() => {
     if (activeLink.current) {
       setStyle({
-        top: activeLink.current.offsetTop + "px",
-        height: activeLink.current.offsetHeight + "px",
+        top: `${activeLink.current.offsetTop}px`,
+        height: `${activeLink.current.offsetHeight}px`,
       });
     }
   }, [activeHeading]);
diff --git a/docs/src/hooks/useActiveScrollElement.ts b/docs/src/hooks/useActiveScrollElement.ts
index 2ad55a5..009aee5 100644
--- a/docs/src/hooks/useActiveScrollElement.ts
+++ b/docs/src/hooks/useActiveScrollElement.ts
@@ -47,6 +47,7 @@ export const useActiveScrollElement = (
     }
   }, []);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: updateActive is stable via ref
   useEffect(() => {
     if (typeof window === "undefined") return;
 
@@ -86,7 +87,7 @@ export const useActiveScrollElement = (
           return;
         }
 
-        const index = ids.findIndex((i) => i === id);
+        const index = ids.indexOf(id);
         const previous = ids[Math.max(index - 1, 0)];
         updateActive(previous);
       }
@@ -149,7 +150,7 @@ export const useActiveScrollElement = (
     handleResize();
     if (window.scrollY > 0) handleScroll();
 
-    sections.forEach((heading) => scrollObserver.observe(heading));
+    for (const heading of sections) scrollObserver.observe(heading);
     resizeObserver.observe(document.body);
     document.addEventListener("click", handleHash);
     window.addEventListener("scroll", handleScroll, { passive: true });
diff --git a/tests/tools/budget-integration.test.ts b/tests/tools/budget-integration.test.ts
index ec0a1a7..5718bb7 100644
--- a/tests/tools/budget-integration.test.ts
+++ b/tests/tools/budget-integration.test.ts
@@ -141,6 +141,8 @@ describe("createAgentTools budget integration", () => {
     expect(openRouterModels).toBeInstanceOf(Map);
     expect(openRouterModels!.has("anthropic/claude-sonnet-4-5")).toBe(true);
 
+    if (!openRouterModels) throw new Error("expected openRouterModels");
+
     const model = openRouterModels.get("anthropic/claude-sonnet-4-5")!;
     expect(model.contextLength).toBe(200000);
     expect(model.pricing.inputPerToken).toBe(0.000003);