fix: resolve 25 error-level lint issues (P1-3)

Fix no-require-imports, no-explicit-any, no-html-link-for-pages,
set-state-in-effect, purity, static-components, and refs rules
across 15 files. 0 errors remain (52 warnings unchanged).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/ai-elements/code-block.tsx

@@ -389,27 +389,32 @@ export const CodeBlockContent = ({
   const rawTokens = useMemo(() => createRawTokens(code), [code]);
 
   // Try to get cached result synchronously, otherwise use raw tokens
-  const [tokenized, setTokenized] = useState<TokenizedCode>(
-    () => highlightCode(code, language) ?? rawTokens
+  const syncTokenized = useMemo(
+    () => highlightCode(code, language) ?? rawTokens,
+    [code, language, rawTokens]
   );
 
+  // Track async highlighting results keyed by code+language to avoid stale state
+  const [asyncResult, setAsyncResult] = useState<{ key: string; tokens: TokenizedCode } | null>(null);
+  const resultKey = `${code}:${language}`;
+
   useEffect(() => {
     let cancelled = false;
 
-    // Reset to raw tokens when code changes (shows current code, not stale tokens)
-    setTokenized(highlightCode(code, language) ?? rawTokens);
-
     // Subscribe to async highlighting result
     highlightCode(code, language, (result) => {
       if (!cancelled) {
-        setTokenized(result);
+        setAsyncResult({ key: `${code}:${language}`, tokens: result });
       }
     });
 
     return () => {
       cancelled = true;
     };
-  }, [code, language, rawTokens]);
+  }, [code, language]);
+
+  // Only use async result if it matches the current code+language
+  const tokenized = (asyncResult && asyncResult.key === resultKey) ? asyncResult.tokens : syncTokenized;
 
   return (
     <div className="relative overflow-auto">

src/components/ai-elements/shimmer.tsx

@@ -1,32 +1,16 @@
 "use client";
 
-import type { MotionProps } from "motion/react";
-import type { CSSProperties, ElementType, JSX } from "react";
+import type { CSSProperties } from "react";
 
 import { cn } from "@/lib/utils";
 import { motion } from "motion/react";
 import { memo, useMemo } from "react";
 
-type MotionHTMLProps = MotionProps & Record<string, unknown>;
-
-// Cache motion components at module level to avoid creating during render
-const motionComponentCache = new Map<
-  keyof JSX.IntrinsicElements,
-  React.ComponentType<MotionHTMLProps>
->();
-
-const getMotionComponent = (element: keyof JSX.IntrinsicElements) => {
-  let component = motionComponentCache.get(element);
-  if (!component) {
-    component = motion.create(element);
-    motionComponentCache.set(element, component);
-  }
-  return component;
-};
+// Pre-create the motion.p component at module level to avoid creating during render
+const MotionP = motion.create("p");
 
 export interface TextShimmerProps {
   children: string;
-  as?: ElementType;
   className?: string;
   duration?: number;
   spread?: number;
@@ -34,22 +18,17 @@ export interface TextShimmerProps {
 
 const ShimmerComponent = ({
   children,
-  as: Component = "p",
   className,
   duration = 2,
   spread = 2,
 }: TextShimmerProps) => {
-  const MotionComponent = getMotionComponent(
-    Component as keyof JSX.IntrinsicElements
-  );
-
   const dynamicSpread = useMemo(
     () => (children?.length ?? 0) * spread,
     [children, spread]
   );
 
   return (
-    <MotionComponent
+    <MotionP
       animate={{ backgroundPosition: "0% center" }}
       className={cn(
         "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
@@ -71,7 +50,7 @@ const ShimmerComponent = ({
       }}
     >
       {children}
-    </MotionComponent>
+    </MotionP>
   );
 };
 

src/components/ai-elements/tool-actions-group.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState } from 'react';
 import { motion, AnimatePresence } from 'motion/react';
 import { HugeiconsIcon } from "@hugeicons/react";
 import type { IconSvgElement } from "@hugeicons/react";
@@ -198,14 +198,11 @@ export function ToolActionsGroup({
 }: ToolActionsGroupProps) {
   const hasRunningTool = tools.some((t) => t.result === undefined);
 
-  const [userToggled, setUserToggled] = useState(false);
-  const [expanded, setExpanded] = useState(hasRunningTool);
+  // Track whether user has manually toggled and their chosen state
+  const [userExpandedState, setUserExpandedState] = useState<boolean | null>(null);
 
-  useEffect(() => {
-    if (!userToggled) {
-      setExpanded(hasRunningTool || isStreaming);
-    }
-  }, [hasRunningTool, isStreaming, userToggled]);
+  // Derived: if user has toggled, use their choice; otherwise auto-expand based on streaming state
+  const expanded = userExpandedState !== null ? userExpandedState : (hasRunningTool || isStreaming);
 
   if (tools.length === 0) return null;
 
@@ -214,8 +211,7 @@ export function ToolActionsGroup({
   const runningDesc = getRunningDescription(tools);
 
   const handleToggle = () => {
-    setUserToggled(true);
-    setExpanded((prev) => !prev);
+    setUserExpandedState((prev) => prev !== null ? !prev : !expanded);
   };
 
   // Build summary text parts