refactor(core): harden API parsing and improve type safety

src/components/common/PageTransition.tsx

@@ -1,14 +1,13 @@
 import {
   ReactNode,
-  createContext,
   useCallback,
-  useContext,
   useLayoutEffect,
   useRef,
   useState,
 } from 'react';
 import { useLocation, type Location } from 'react-router-dom';
 import gsap from 'gsap';
+import { PageTransitionLayerContext, type LayerStatus } from './PageTransitionLayer';
 import './PageTransition.scss';
 
 interface PageTransitionProps {
@@ -27,8 +26,6 @@ const IOS_EXIT_TO_X_PERCENT_BACKWARD = 100;
 const IOS_ENTER_FROM_X_PERCENT_BACKWARD = -30;
 const IOS_EXIT_DIM_OPACITY = 0.72;
 
-type LayerStatus = 'current' | 'exiting' | 'stacked';
-
 type Layer = {
   key: string;
   location: Location;
@@ -39,16 +36,6 @@ type TransitionDirection = 'forward' | 'backward';
 
 type TransitionVariant = 'vertical' | 'ios';
 
-type PageTransitionLayerContextValue = {
-  status: LayerStatus;
-};
-
-const PageTransitionLayerContext = createContext<PageTransitionLayerContextValue | null>(null);
-
-export function usePageTransitionLayer() {
-  return useContext(PageTransitionLayerContext);
-}
-
 export function PageTransition({
   render,
   getRouteOrder,

src/components/common/PageTransitionLayer.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+export type LayerStatus = 'current' | 'exiting' | 'stacked';
+
+type PageTransitionLayerContextValue = {
+  status: LayerStatus;
+};
+
+export const PageTransitionLayerContext =
+  createContext<PageTransitionLayerContextValue | null>(null);
+
+export function usePageTransitionLayer() {
+  return useContext(PageTransitionLayerContext);
+}
+

src/components/layout/MainLayout.tsx

@@ -441,7 +441,8 @@ export function MainLayout() {
     setCheckingVersion(true);
     try {
       const data = await versionApi.checkLatest();
-      const latest = data?.['latest-version'] ?? data?.latest_version ?? data?.latest ?? '';
+      const latestRaw = data?.['latest-version'] ?? data?.latest_version ?? data?.latest ?? '';
+      const latest = typeof latestRaw === 'string' ? latestRaw : String(latestRaw ?? '');
       const comparison = compareVersions(latest, serverVersion);
 
       if (!latest) {
@@ -459,8 +460,11 @@ export function MainLayout() {
       } else {
         showNotification(t('system_info.version_is_latest'), 'success');
       }
-    } catch (error: any) {
-      showNotification(`${t('system_info.version_check_error')}: ${error?.message || ''}`, 'error');
+    } catch (error: unknown) {
+      const message =
+        error instanceof Error ? error.message : typeof error === 'string' ? error : '';
+      const suffix = message ? `: ${message}` : '';
+      showNotification(`${t('system_info.version_check_error')}${suffix}`, 'error');
     } finally {
       setCheckingVersion(false);
     }

src/components/modelAlias/ModelMappingDiagram.tsx

@@ -285,7 +285,6 @@ export const ModelMappingDiagram = forwardRef<ModelMappingDiagramRef, ModelMappi
 
   useLayoutEffect(() => {
     // updateLines is called after layout is calculated, ensuring elements are in place.
-    updateLines();
     const raf = requestAnimationFrame(updateLines);
     window.addEventListener('resize', updateLines);
     return () => {
@@ -295,7 +294,6 @@ export const ModelMappingDiagram = forwardRef<ModelMappingDiagramRef, ModelMappi
   }, [updateLines, aliasNodes]);
 
   useLayoutEffect(() => {
-    updateLines();
     const raf = requestAnimationFrame(updateLines);
     return () => cancelAnimationFrame(raf);
   }, [providerGroupHeights, updateLines]);

src/components/providers/ProviderNav/ProviderNav.tsx

@@ -1,7 +1,7 @@
 import { CSSProperties, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useLocation } from 'react-router-dom';
-import { usePageTransitionLayer } from '@/components/common/PageTransition';
+import { usePageTransitionLayer } from '@/components/common/PageTransitionLayer';
 import { useThemeStore } from '@/stores';
 import iconGemini from '@/assets/icons/gemini.svg';
 import iconOpenaiLight from '@/assets/icons/openai-light.svg';
@@ -135,8 +135,9 @@ export function ProviderNav() {
     window.addEventListener('scroll', handleScroll, { passive: true });
     contentScroller?.addEventListener('scroll', handleScroll, { passive: true });
     window.addEventListener('resize', handleScroll);
-    handleScroll();
+    const raf = requestAnimationFrame(handleScroll);
     return () => {
+      cancelAnimationFrame(raf);
       window.removeEventListener('scroll', handleScroll);
       window.removeEventListener('resize', handleScroll);
       contentScroller?.removeEventListener('scroll', handleScroll);
@@ -168,7 +169,8 @@ export function ProviderNav() {
 
   useLayoutEffect(() => {
     if (!shouldShow) return;
-    updateIndicator(activeProvider);
+    const raf = requestAnimationFrame(() => updateIndicator(activeProvider));
+    return () => cancelAnimationFrame(raf);
   }, [activeProvider, shouldShow, updateIndicator]);
 
   // Expose overlay height to the page, so it can reserve bottom padding and avoid being covered.

src/components/usage/hooks/useUsageData.ts

@@ -45,8 +45,8 @@ export function useUsageData(): UseUsageDataReturn {
     setError('');
     try {
       const data = await usageApi.getUsage();
-      const payload = data?.usage ?? data;
-      setUsage(payload);
+      const payload = (data?.usage ?? data) as unknown;
+      setUsage(payload && typeof payload === 'object' ? (payload as UsagePayload) : null);
     } catch (err: unknown) {
       const message = err instanceof Error ? err.message : t('usage_stats.loading_error');
       setError(message);