From e9a6233655305c733abc70745bb7cff4987ea17b Mon Sep 17 00:00:00 2001
From: fawney19 <elky0401@gmail.com>
Date: Fri, 12 Dec 2025 16:15:16 +0800
Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=85=AC=E5=85=B1=E7=BB=84=E4=BB=B6=E5=92=8C=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 更新 Logo 相关组件 (AetherLogo, HeaderLogo, RippleLogo 等)
- 优化图表组件 (BarChart, LineChart, ScatterChart)
- 改进公共组件 (AlertDialog, EmptyState, LoadingState)
- 调整布局组件 (AppShell, SidebarNav, PageHeader 等)
- 优化 ActivityHeatmap 统计组件
---
 .../src/components/AetherLineByLineLogo.vue   | 110 ++-
 frontend/src/components/CodeHighlight.vue     |  16 +-
 frontend/src/components/GeminiStarCluster.vue | 185 +++-
 frontend/src/components/HeaderLogo.vue        |   4 +-
 frontend/src/components/PlatformSelect.vue    |  36 +-
 frontend/src/components/RippleLogo.vue        | 894 +++++++++++-------
 frontend/src/components/ToastWithProgress.vue |  24 +-
 frontend/src/components/charts/BarChart.vue   |  12 +-
 frontend/src/components/charts/LineChart.vue  |  10 +-
 .../src/components/charts/ScatterChart.vue    |  28 +-
 .../src/components/common/AlertDialog.vue     |  33 +-
 frontend/src/components/common/EmptyState.vue |  37 +-
 .../src/components/common/LoadingState.vue    |  24 +-
 frontend/src/components/icons/AetherLogo.vue  |  12 +-
 frontend/src/components/layout/AppShell.vue   |  14 +-
 .../src/components/layout/CardSection.vue     |  20 +-
 frontend/src/components/layout/MobileNav.vue  |   6 +-
 frontend/src/components/layout/PageHeader.vue |  20 +-
 frontend/src/components/layout/Section.vue    |  15 +-
 frontend/src/components/layout/SidebarNav.vue |  20 +-
 .../src/components/stats/ActivityHeatmap.vue  | 127 ++-
 21 files changed, 1130 insertions(+), 517 deletions(-)

diff --git a/frontend/src/components/AetherLineByLineLogo.vue b/frontend/src/components/AetherLineByLineLogo.vue
index dfceb6d..5383dd3 100644
--- a/frontend/src/components/AetherLineByLineLogo.vue
+++ b/frontend/src/components/AetherLineByLineLogo.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="line-by-line-logo" :style="{ width: `${size}px`, height: `${size}px` }">
+  <div
+    class="line-by-line-logo"
+    :style="{ width: `${size}px`, height: `${size}px` }"
+  >
     <svg
       :viewBox="viewBox"
       class="logo-svg"
@@ -7,12 +10,33 @@
     >
       <defs>
         <!-- Metallic gradient -->
-        <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" :stop-color="metallicColors.dark" />
-          <stop offset="25%" :stop-color="metallicColors.base" />
-          <stop offset="50%" :stop-color="metallicColors.light" />
-          <stop offset="75%" :stop-color="metallicColors.base" />
-          <stop offset="100%" :stop-color="metallicColors.dark" />
+        <linearGradient
+          :id="gradientId"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="100%"
+        >
+          <stop
+            offset="0%"
+            :stop-color="metallicColors.dark"
+          />
+          <stop
+            offset="25%"
+            :stop-color="metallicColors.base"
+          />
+          <stop
+            offset="50%"
+            :stop-color="metallicColors.light"
+          />
+          <stop
+            offset="75%"
+            :stop-color="metallicColors.base"
+          />
+          <stop
+            offset="100%"
+            :stop-color="metallicColors.dark"
+          />
         </linearGradient>
       </defs>
 
@@ -73,6 +97,41 @@ interface ColorScheme {
   secondary: string
 }
 
+const props = withDefaults(
+  defineProps<{
+    size?: number
+    lineDelay?: number
+    strokeDuration?: number
+    fillDuration?: number
+    autoStart?: boolean
+    loop?: boolean
+    loopPause?: number
+    outlineColor?: string
+    gradientColor?: string
+    strokeWidth?: number
+    cycleColors?: boolean
+    isDark?: boolean
+  }>(),
+  {
+    size: 400,
+    lineDelay: 60,
+    strokeDuration: 1200,
+    fillDuration: 800,
+    autoStart: true,
+    loop: true,
+    loopPause: 600,
+    outlineColor: '#cc785c',
+    gradientColor: '#e8a882',
+    strokeWidth: 2.5,
+    cycleColors: false,
+    isDark: false
+  }
+)
+const emit = defineEmits<{
+  (e: 'animationComplete'): void
+  (e: 'phaseChange', phase: AnimationPhase): void
+  (e: 'colorChange', colors: ColorScheme): void
+}>()
 // Constants
 const LINE_COUNT = AETHER_LINE_PATHS.length
 const DEFAULT_PATH_LENGTH = 3000
@@ -109,43 +168,6 @@ const DARK_MODE_SCHEMES: ColorScheme[] = [
   { primary: '#e879f9', secondary: '#f5d0fe' },
 ]
 
-const props = withDefaults(
-  defineProps<{
-    size?: number
-    lineDelay?: number
-    strokeDuration?: number
-    fillDuration?: number
-    autoStart?: boolean
-    loop?: boolean
-    loopPause?: number
-    outlineColor?: string
-    gradientColor?: string
-    strokeWidth?: number
-    cycleColors?: boolean
-    isDark?: boolean
-  }>(),
-  {
-    size: 400,
-    lineDelay: 60,
-    strokeDuration: 1200,
-    fillDuration: 800,
-    autoStart: true,
-    loop: true,
-    loopPause: 600,
-    outlineColor: '#cc785c',
-    gradientColor: '#e8a882',
-    strokeWidth: 2.5,
-    cycleColors: false,
-    isDark: false
-  }
-)
-
-const emit = defineEmits<{
-  (e: 'animationComplete'): void
-  (e: 'phaseChange', phase: AnimationPhase): void
-  (e: 'colorChange', colors: ColorScheme): void
-}>()
-
 // Unique ID for gradient
 const gradientId = `aether-gradient-${Math.random().toString(36).slice(2, 9)}`
 
diff --git a/frontend/src/components/CodeHighlight.vue b/frontend/src/components/CodeHighlight.vue
index 06503d7..002c3c4 100644
--- a/frontend/src/components/CodeHighlight.vue
+++ b/frontend/src/components/CodeHighlight.vue
@@ -1,6 +1,9 @@
 <template>
   <div :class="wrapperClass">
-    <pre><code :class="`language-${language}`" v-html="highlightedCode"></code></pre>
+    <pre><code
+:class="`language-${language}`"
+               v-html="highlightedCode"
+    /></pre>
   </div>
 </template>
 
@@ -12,6 +15,11 @@ import json from 'highlight.js/lib/languages/json'
 import ini from 'highlight.js/lib/languages/ini'
 import javascript from 'highlight.js/lib/languages/javascript'
 
+const props = defineProps<{
+  code: string
+  language: string
+  dense?: boolean
+}>()
 // 注册需要的语言
 hljs.registerLanguage('bash', bash)
 hljs.registerLanguage('sh', bash)
@@ -20,12 +28,6 @@ hljs.registerLanguage('toml', ini)
 hljs.registerLanguage('ini', ini)
 hljs.registerLanguage('javascript', javascript)
 
-const props = defineProps<{
-  code: string
-  language: string
-  dense?: boolean
-}>()
-
 const wrapperClass = computed(() =>
   ['code-highlight', props.dense ? 'code-highlight--dense' : '']
     .filter(Boolean)
diff --git a/frontend/src/components/GeminiStarCluster.vue b/frontend/src/components/GeminiStarCluster.vue
index 5762e91..f13e313 100644
--- a/frontend/src/components/GeminiStarCluster.vue
+++ b/frontend/src/components/GeminiStarCluster.vue
@@ -5,34 +5,106 @@
     :class="{ 'scattering': isScattering, 'fading-out': isFadingOut }"
   >
     <!-- SVG Defs for the Gemini multi-color gradient -->
-    <svg class="absolute w-0 h-0 overflow-hidden" aria-hidden="true">
+    <svg
+      class="absolute w-0 h-0 overflow-hidden"
+      aria-hidden="true"
+    >
       <defs>
         <!-- Main Gemini gradient (blue base with color overlays) -->
-        <linearGradient id="gemini-base" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stop-color="#1A73E8" />
-          <stop offset="50%" stop-color="#4285F4" />
-          <stop offset="100%" stop-color="#669DF6" />
+        <linearGradient
+          id="gemini-base"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="100%"
+        >
+          <stop
+            offset="0%"
+            stop-color="#1A73E8"
+          />
+          <stop
+            offset="50%"
+            stop-color="#4285F4"
+          />
+          <stop
+            offset="100%"
+            stop-color="#669DF6"
+          />
         </linearGradient>
         <!-- Red accent overlay - from top -->
-        <linearGradient id="gemini-red-overlay" x1="50%" y1="0%" x2="50%" y2="50%">
-          <stop offset="0%" stop-color="#EA4335" />
-          <stop offset="100%" stop-color="#EA4335" stop-opacity="0" />
+        <linearGradient
+          id="gemini-red-overlay"
+          x1="50%"
+          y1="0%"
+          x2="50%"
+          y2="50%"
+        >
+          <stop
+            offset="0%"
+            stop-color="#EA4335"
+          />
+          <stop
+            offset="100%"
+            stop-color="#EA4335"
+            stop-opacity="0"
+          />
         </linearGradient>
         <!-- Yellow accent overlay - from left -->
-        <linearGradient id="gemini-yellow-overlay" x1="0%" y1="50%" x2="50%" y2="50%">
-          <stop offset="0%" stop-color="#FBBC04" />
-          <stop offset="100%" stop-color="#FBBC04" stop-opacity="0" />
+        <linearGradient
+          id="gemini-yellow-overlay"
+          x1="0%"
+          y1="50%"
+          x2="50%"
+          y2="50%"
+        >
+          <stop
+            offset="0%"
+            stop-color="#FBBC04"
+          />
+          <stop
+            offset="100%"
+            stop-color="#FBBC04"
+            stop-opacity="0"
+          />
         </linearGradient>
         <!-- Green accent overlay - from bottom -->
-        <linearGradient id="gemini-green-overlay" x1="50%" y1="100%" x2="50%" y2="50%">
-          <stop offset="0%" stop-color="#34A853" />
-          <stop offset="100%" stop-color="#34A853" stop-opacity="0" />
+        <linearGradient
+          id="gemini-green-overlay"
+          x1="50%"
+          y1="100%"
+          x2="50%"
+          y2="50%"
+        >
+          <stop
+            offset="0%"
+            stop-color="#34A853"
+          />
+          <stop
+            offset="100%"
+            stop-color="#34A853"
+            stop-opacity="0"
+          />
         </linearGradient>
         <!-- Glow filter -->
-        <filter id="star-glow" x="-50%" y="-50%" width="200%" height="200%">
-          <feGaussianBlur stdDeviation="2" result="blur" />
-          <feFlood flood-color="#4285F4" flood-opacity="0.3" />
-          <feComposite in2="blur" operator="in" />
+        <filter
+          id="star-glow"
+          x="-50%"
+          y="-50%"
+          width="200%"
+          height="200%"
+        >
+          <feGaussianBlur
+            stdDeviation="2"
+            result="blur"
+          />
+          <feFlood
+            flood-color="#4285F4"
+            flood-opacity="0.3"
+          />
+          <feComposite
+            in2="blur"
+            operator="in"
+          />
           <feMerge>
             <feMergeNode />
             <feMergeNode in="SourceGraphic" />
@@ -50,11 +122,26 @@
         :class="{ 'star-visible': star.visible && hasScattered }"
         :style="getStarStyle(star)"
       >
-        <svg viewBox="0 0 24 24" class="star-svg">
-          <path :d="starPath" fill="url(#gemini-base)" />
-          <path :d="starPath" fill="url(#gemini-red-overlay)" />
-          <path :d="starPath" fill="url(#gemini-yellow-overlay)" />
-          <path :d="starPath" fill="url(#gemini-green-overlay)" />
+        <svg
+          viewBox="0 0 24 24"
+          class="star-svg"
+        >
+          <path
+            :d="starPath"
+            fill="url(#gemini-base)"
+          />
+          <path
+            :d="starPath"
+            fill="url(#gemini-red-overlay)"
+          />
+          <path
+            :d="starPath"
+            fill="url(#gemini-yellow-overlay)"
+          />
+          <path
+            :d="starPath"
+            fill="url(#gemini-green-overlay)"
+          />
         </svg>
       </div>
     </div>
@@ -68,11 +155,27 @@
         :class="{ 'star-visible': star.visible && hasScattered }"
         :style="getStarStyle(star)"
       >
-        <svg viewBox="0 0 24 24" class="star-svg" style="filter: url(#star-glow)">
-          <path :d="starPath" fill="url(#gemini-base)" />
-          <path :d="starPath" fill="url(#gemini-red-overlay)" />
-          <path :d="starPath" fill="url(#gemini-yellow-overlay)" />
-          <path :d="starPath" fill="url(#gemini-green-overlay)" />
+        <svg
+          viewBox="0 0 24 24"
+          class="star-svg"
+          style="filter: url(#star-glow)"
+        >
+          <path
+            :d="starPath"
+            fill="url(#gemini-base)"
+          />
+          <path
+            :d="starPath"
+            fill="url(#gemini-red-overlay)"
+          />
+          <path
+            :d="starPath"
+            fill="url(#gemini-yellow-overlay)"
+          />
+          <path
+            :d="starPath"
+            fill="url(#gemini-green-overlay)"
+          />
         </svg>
       </div>
     </div>
@@ -86,11 +189,27 @@
         :class="{ 'star-visible': star.visible && hasScattered }"
         :style="getStarStyle(star)"
       >
-        <svg viewBox="0 0 24 24" class="star-svg" style="filter: url(#star-glow)">
-          <path :d="starPath" fill="url(#gemini-base)" />
-          <path :d="starPath" fill="url(#gemini-red-overlay)" />
-          <path :d="starPath" fill="url(#gemini-yellow-overlay)" />
-          <path :d="starPath" fill="url(#gemini-green-overlay)" />
+        <svg
+          viewBox="0 0 24 24"
+          class="star-svg"
+          style="filter: url(#star-glow)"
+        >
+          <path
+            :d="starPath"
+            fill="url(#gemini-base)"
+          />
+          <path
+            :d="starPath"
+            fill="url(#gemini-red-overlay)"
+          />
+          <path
+            :d="starPath"
+            fill="url(#gemini-yellow-overlay)"
+          />
+          <path
+            :d="starPath"
+            fill="url(#gemini-green-overlay)"
+          />
         </svg>
       </div>
     </div>
diff --git a/frontend/src/components/HeaderLogo.vue b/frontend/src/components/HeaderLogo.vue
index a3043c9..bd1c41d 100644
--- a/frontend/src/components/HeaderLogo.vue
+++ b/frontend/src/components/HeaderLogo.vue
@@ -7,8 +7,8 @@
     <svg 
       xmlns="http://www.w3.org/2000/svg" 
       viewBox="0 0 799.31 752.14"
+      class="transition-colors duration-500 ease-out"
       :class="[
-        'transition-colors duration-500 ease-out',
         logoClass
       ]"
     >
@@ -32,7 +32,7 @@ const props = withDefaults(defineProps<Props>(), {
   className: ''
 })
 
-const containerClass = props.size + ' ' + props.className
+const containerClass = `${props.size  } ${  props.className}`
 const logoClass = 'w-full h-full'
 </script>
 
diff --git a/frontend/src/components/PlatformSelect.vue b/frontend/src/components/PlatformSelect.vue
index f0531f1..4a3fae2 100644
--- a/frontend/src/components/PlatformSelect.vue
+++ b/frontend/src/components/PlatformSelect.vue
@@ -10,16 +10,26 @@
     @keydown.escape.stop="closeDropdown"
   >
     <div class="platform-select__current">
-      <component :is="currentOption.icon" class="platform-select__icon" />
+      <component
+        :is="currentOption.icon"
+        class="platform-select__icon"
+      />
       <div class="platform-select__text">
-        <p class="platform-select__label">{{ currentOption.label }}</p>
-        <p class="platform-select__hint">{{ currentOption.hint }}</p>
+        <p class="platform-select__label">
+          {{ currentOption.label }}
+        </p>
+        <p class="platform-select__hint">
+          {{ currentOption.hint }}
+        </p>
       </div>
     </div>
     <ChevronDown class="platform-select__chevron" />
 
     <transition name="platform-select-fade">
-      <ul v-if="isOpen" class="platform-select__dropdown">
+      <ul
+        v-if="isOpen"
+        class="platform-select__dropdown"
+      >
         <li
           v-for="option in resolvedOptions"
           :key="option.value"
@@ -27,12 +37,22 @@
           :class="{ 'platform-select__option--active': option.value === modelValue }"
           @click.stop="selectOption(option.value)"
         >
-          <component :is="option.icon" class="platform-select__option-icon" />
+          <component
+            :is="option.icon"
+            class="platform-select__option-icon"
+          />
           <div class="platform-select__option-copy">
-            <p class="platform-select__option-label">{{ option.label }}</p>
-            <p class="platform-select__option-hint">{{ option.hint }}</p>
+            <p class="platform-select__option-label">
+              {{ option.label }}
+            </p>
+            <p class="platform-select__option-hint">
+              {{ option.hint }}
+            </p>
           </div>
-          <Check class="platform-select__option-check" v-if="option.value === modelValue" />
+          <Check
+            v-if="option.value === modelValue"
+            class="platform-select__option-check"
+          />
         </li>
       </ul>
     </transition>
diff --git a/frontend/src/components/RippleLogo.vue b/frontend/src/components/RippleLogo.vue
index a223a2e..b03483c 100644
--- a/frontend/src/components/RippleLogo.vue
+++ b/frontend/src/components/RippleLogo.vue
@@ -1,355 +1,599 @@
 <template>
-    <Transition name="logo-fade">
-      <!-- Adaptive Aether logo using external SVG with CSS-based dark mode -->
-      <!-- Animation sequence: stroke outline -> fill color -> ripple breathing -->
-      <div
-        v-if="type === 'aether' && useAdaptive"
-        :key="`aether-adaptive-${animationKey}`"
-        class="aether-adaptive-container"
-        :style="{ '--anim-delay': `${animDelay}ms` }"
-      >
-        <!-- Definitions for gradient and glow -->
-        <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" aria-hidden="true">
-          <defs>
-            <linearGradient id="adaptive-aether-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
-              <stop offset="0%" stop-color="#cc785c" />
-              <stop offset="50%" stop-color="#d4a27f" />
-              <stop offset="100%" stop-color="#cc785c" />
-            </linearGradient>
-            <filter id="adaptive-aether-glow" x="-50%" y="-50%" width="200%" height="200%">
-              <feGaussianBlur stdDeviation="3" result="coloredBlur" />
-              <feMerge>
-                <feMergeNode in="coloredBlur" />
-                <feMergeNode in="SourceGraphic" />
-              </feMerge>
-            </filter>
-          </defs>
-        </svg>
-
-        <!-- Ripple layers - start after fill completes -->
-        <div class="adaptive-ripple r-1" :class="{ active: adaptiveFillComplete }">
-           <svg viewBox="0 0 799.31 752.14" class="adaptive-logo-img">
-             <path :d="adaptiveAetherPath" fill="none" stroke="url(#adaptive-aether-gradient)" stroke-width="2" vector-effect="non-scaling-stroke" />
-           </svg>
-        </div>
-        <div class="adaptive-ripple r-2" :class="{ active: adaptiveFillComplete }">
-          <svg viewBox="0 0 799.31 752.14" class="adaptive-logo-img">
-             <path :d="adaptiveAetherPath" fill="none" stroke="url(#adaptive-aether-gradient)" stroke-width="2" vector-effect="non-scaling-stroke" />
-           </svg>
-        </div>
-        <div class="adaptive-ripple r-3" :class="{ active: adaptiveFillComplete }">
-          <svg viewBox="0 0 799.31 752.14" class="adaptive-logo-img">
-             <path :d="adaptiveAetherPath" fill="none" stroke="url(#adaptive-aether-gradient)" stroke-width="2" vector-effect="non-scaling-stroke" />
-           </svg>
-        </div>
-
-        <!-- Phase 1: Stroke outline drawing (SVG overlay) -->
-        <svg
-          class="adaptive-stroke-overlay"
-          :class="{ 'stroke-complete': adaptiveStrokeComplete }"
-          viewBox="0 0 799.31 752.14"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            class="adaptive-stroke-path"
-            :d="adaptiveAetherPath"
-            style="stroke: url(#adaptive-aether-gradient); filter: url(#adaptive-aether-glow);"
-          />
-        </svg>
-
-        <!-- Phase 2: Fill using SVG path -->
-        <div
-          class="adaptive-fill-layer"
-          :class="{ 'fill-active': adaptiveStrokeComplete, 'fill-complete': adaptiveFillComplete, 'breathing': adaptiveFillComplete }"
-        >
-          <svg viewBox="0 0 799.31 752.14" class="adaptive-fill-img">
-            <path :d="adaptiveAetherPath" fill="url(#adaptive-aether-gradient)" fill-rule="evenodd" />
-          </svg>
-        </div>
-      </div>
-
-<!-- Aether logo: single complex path with ripple effect -->
+  <Transition name="logo-fade">
+    <!-- Adaptive Aether logo using external SVG with CSS-based dark mode -->
+    <!-- Animation sequence: stroke outline -> fill color -> ripple breathing -->
+    <div
+      v-if="type === 'aether' && useAdaptive"
+      :key="`aether-adaptive-${animationKey}`"
+      class="aether-adaptive-container"
+      :style="{ '--anim-delay': `${animDelay}ms` }"
+    >
+      <!-- Definitions for gradient and glow -->
       <svg
-        v-else-if="type === 'aether'"
-        :key="`aether-${animationKey}`"
-        :viewBox="viewBox"
-        class="ripple-logo"
-        xmlns="http://www.w3.org/2000/svg"
-        :style="{ '--anim-delay': `${animDelay}ms` }"
+        style="position: absolute; width: 0; height: 0; overflow: hidden;"
+        aria-hidden="true"
       >
         <defs>
-          <path id="aether-path" :d="aetherPath" ref="aetherPathRef" />
-          <!-- Gradient for breathing glow effect -->
-          <linearGradient id="aether-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" stop-color="#cc785c" />
-            <stop offset="50%" stop-color="#d4a27f" />
-            <stop offset="100%" stop-color="#cc785c" />
+          <linearGradient
+            id="adaptive-aether-gradient"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop
+              offset="0%"
+              stop-color="#cc785c"
+            />
+            <stop
+              offset="50%"
+              stop-color="#d4a27f"
+            />
+            <stop
+              offset="100%"
+              stop-color="#cc785c"
+            />
           </linearGradient>
-          <!-- Glow filter for breathing effect -->
-          <filter id="aether-glow" x="-50%" y="-50%" width="200%" height="200%">
-            <feGaussianBlur stdDeviation="4" result="coloredBlur" />
+          <filter
+            id="adaptive-aether-glow"
+            x="-50%"
+            y="-50%"
+            width="200%"
+            height="200%"
+          >
+            <feGaussianBlur
+              stdDeviation="3"
+              result="coloredBlur"
+            />
             <feMerge>
               <feMergeNode in="coloredBlur" />
               <feMergeNode in="SourceGraphic" />
             </feMerge>
           </filter>
         </defs>
-
-        <!-- Static mode: just show filled logo with fade-in animation -->
-        <template v-if="static">
-          <use
-            href="#aether-path"
-            class="static-fill"
-            :style="{ fill: strokeColor }"
-          />
-        </template>
-
-        <!-- Animated mode -->
-        <template v-else>
-          <!-- Main logo - with stroke drawing animation -->
-          <use
-            href="#aether-path"
-            class="fine-line stroke-draw aether-stroke"
-            :class="{ 'draw-complete': drawComplete, 'breathing': drawComplete && !disableRipple }"
-            :style="{ stroke: drawComplete ? 'url(#aether-gradient)' : strokeColor, '--path-length': aetherPathLength, transformOrigin: aetherCenter }"
-            :filter="drawComplete ? 'url(#aether-glow)' : 'none'"
-          />
-          <!-- Main logo - fill (fade in after draw) -->
-          <use
-            href="#aether-path"
-            class="aether-fill"
-            :class="{ 'fill-active': drawComplete, 'breathing': drawComplete && !disableRipple }"
-            :style="{ fill: strokeColor, transformOrigin: aetherCenter }"
-          />
-          <use
-            v-if="!disableRipple"
-            href="#aether-path"
-            class="fine-line ripple d-1"
-            :class="{ 'ripple-active': drawComplete }"
-            :style="{ stroke: strokeColor, transformOrigin: aetherCenter }"
-          />
-          <use
-            v-if="!disableRipple"
-            href="#aether-path"
-            class="fine-line ripple d-2"
-            :class="{ 'ripple-active': drawComplete }"
-            :style="{ stroke: strokeColor, transformOrigin: aetherCenter }"
-          />
-          <use
-            v-if="!disableRipple"
-            href="#aether-path"
-            class="fine-line ripple d-3"
-            :class="{ 'ripple-active': drawComplete }"
-            :style="{ stroke: strokeColor, transformOrigin: aetherCenter }"
-          />
-        </template>
       </svg>
-  
-      <!-- Standard single-path logos -->
-      <svg
-        v-else
-        :key="`${type}-${animationKey}`"
-        :viewBox="viewBox"
-        class="ripple-logo"
-        xmlns="http://www.w3.org/2000/svg"
-        :style="{ '--anim-delay': `${animDelay}ms` }"
-      >
-        <defs>
-          <path :id="pathId" :d="pathData" />
-          <!-- Gemini multi-layer gradients -->
-          <template v-if="type === 'gemini'">
-            <!-- Fill gradients -->
-            <linearGradient gradientUnits="userSpaceOnUse" :id="`${pathId}-fill-0`" x1="7" x2="11" y1="15.5" y2="12">
-              <stop stop-color="#08B962"></stop>
-              <stop offset="1" stop-color="#08B962" stop-opacity="0"></stop>
-            </linearGradient>
-            <linearGradient gradientUnits="userSpaceOnUse" :id="`${pathId}-fill-1`" x1="8" x2="11.5" y1="5.5" y2="11">
-              <stop stop-color="#F94543"></stop>
-              <stop offset="1" stop-color="#F94543" stop-opacity="0"></stop>
-            </linearGradient>
-            <linearGradient gradientUnits="userSpaceOnUse" :id="`${pathId}-fill-2`" x1="3.5" x2="17.5" y1="13.5" y2="12">
-              <stop stop-color="#FABC12"></stop>
-              <stop offset=".46" stop-color="#FABC12" stop-opacity="0"></stop>
-            </linearGradient>
-            <!-- Stroke gradient for outline - 4 directional gradients to match logo colors -->
-            <!-- Top point = red, Right point = blue, Bottom point = green, Left point = yellow -->
-            <linearGradient gradientUnits="userSpaceOnUse" :id="`${pathId}-stroke-v`" x1="12" x2="12" y1="1" y2="23">
-              <stop offset="0%" stop-color="#F94543" />
-              <stop offset="50%" stop-color="#3186FF" />
-              <stop offset="100%" stop-color="#08B962" />
-            </linearGradient>
-            <linearGradient gradientUnits="userSpaceOnUse" :id="`${pathId}-stroke-h`" x1="1" x2="23" y1="12" y2="12">
-              <stop offset="0%" stop-color="#FABC12" />
-              <stop offset="50%" stop-color="#3186FF" />
-              <stop offset="100%" stop-color="#3186FF" />
-            </linearGradient>
-            <!-- Mask for fill-inward animation (controlled by JS) -->
-            <mask :id="`${pathId}-fill-mask`">
-              <rect x="-4" y="-4" width="32" height="32" fill="white" />
-              <circle cx="12" cy="12" :r="geminiFillRadius" fill="black" />
-            </mask>
-          </template>
-        </defs>
 
-        <!-- OpenAI special rendering: stroke outline -> fill -> rotate + breathe -->
-        <template v-if="type === 'openai'">
-          <!-- Outer breathing wrapper (scale pulse) -->
+      <!-- Ripple layers - start after fill completes -->
+      <div
+        class="adaptive-ripple r-1"
+        :class="{ active: adaptiveFillComplete }"
+      >
+        <svg
+          viewBox="0 0 799.31 752.14"
+          class="adaptive-logo-img"
+        >
+          <path
+            :d="adaptiveAetherPath"
+            fill="none"
+            stroke="url(#adaptive-aether-gradient)"
+            stroke-width="2"
+            vector-effect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+      <div
+        class="adaptive-ripple r-2"
+        :class="{ active: adaptiveFillComplete }"
+      >
+        <svg
+          viewBox="0 0 799.31 752.14"
+          class="adaptive-logo-img"
+        >
+          <path
+            :d="adaptiveAetherPath"
+            fill="none"
+            stroke="url(#adaptive-aether-gradient)"
+            stroke-width="2"
+            vector-effect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+      <div
+        class="adaptive-ripple r-3"
+        :class="{ active: adaptiveFillComplete }"
+      >
+        <svg
+          viewBox="0 0 799.31 752.14"
+          class="adaptive-logo-img"
+        >
+          <path
+            :d="adaptiveAetherPath"
+            fill="none"
+            stroke="url(#adaptive-aether-gradient)"
+            stroke-width="2"
+            vector-effect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+
+      <!-- Phase 1: Stroke outline drawing (SVG overlay) -->
+      <svg
+        class="adaptive-stroke-overlay"
+        :class="{ 'stroke-complete': adaptiveStrokeComplete }"
+        viewBox="0 0 799.31 752.14"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          class="adaptive-stroke-path"
+          :d="adaptiveAetherPath"
+          style="stroke: url(#adaptive-aether-gradient); filter: url(#adaptive-aether-glow);"
+        />
+      </svg>
+
+      <!-- Phase 2: Fill using SVG path -->
+      <div
+        class="adaptive-fill-layer"
+        :class="{ 'fill-active': adaptiveStrokeComplete, 'fill-complete': adaptiveFillComplete, 'breathing': adaptiveFillComplete }"
+      >
+        <svg
+          viewBox="0 0 799.31 752.14"
+          class="adaptive-fill-img"
+        >
+          <path
+            :d="adaptiveAetherPath"
+            fill="url(#adaptive-aether-gradient)"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </div>
+    </div>
+
+    <!-- Aether logo: single complex path with ripple effect -->
+    <svg
+      v-else-if="type === 'aether'"
+      :key="`aether-${animationKey}`"
+      :viewBox="viewBox"
+      class="ripple-logo"
+      xmlns="http://www.w3.org/2000/svg"
+      :style="{ '--anim-delay': `${animDelay}ms` }"
+    >
+      <defs>
+        <path
+          id="aether-path"
+          ref="aetherPathRef"
+          :d="aetherPath"
+        />
+        <!-- Gradient for breathing glow effect -->
+        <linearGradient
+          id="aether-gradient"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="100%"
+        >
+          <stop
+            offset="0%"
+            stop-color="#cc785c"
+          />
+          <stop
+            offset="50%"
+            stop-color="#d4a27f"
+          />
+          <stop
+            offset="100%"
+            stop-color="#cc785c"
+          />
+        </linearGradient>
+        <!-- Glow filter for breathing effect -->
+        <filter
+          id="aether-glow"
+          x="-50%"
+          y="-50%"
+          width="200%"
+          height="200%"
+        >
+          <feGaussianBlur
+            stdDeviation="4"
+            result="coloredBlur"
+          />
+          <feMerge>
+            <feMergeNode in="coloredBlur" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+
+      <!-- Static mode: just show filled logo with fade-in animation -->
+      <template v-if="static">
+        <use
+          href="#aether-path"
+          class="static-fill"
+          :style="{ fill: strokeColor }"
+        />
+      </template>
+
+      <!-- Animated mode -->
+      <template v-else>
+        <!-- Main logo - with stroke drawing animation -->
+        <use
+          href="#aether-path"
+          class="fine-line stroke-draw aether-stroke"
+          :class="{ 'draw-complete': drawComplete, 'breathing': drawComplete && !disableRipple }"
+          :style="{ stroke: drawComplete ? 'url(#aether-gradient)' : strokeColor, '--path-length': aetherPathLength, transformOrigin: aetherCenter }"
+          :filter="drawComplete ? 'url(#aether-glow)' : 'none'"
+        />
+        <!-- Main logo - fill (fade in after draw) -->
+        <use
+          href="#aether-path"
+          class="aether-fill"
+          :class="{ 'fill-active': drawComplete, 'breathing': drawComplete && !disableRipple }"
+          :style="{ fill: strokeColor, transformOrigin: aetherCenter }"
+        />
+        <use
+          v-if="!disableRipple"
+          href="#aether-path"
+          class="fine-line ripple d-1"
+          :class="{ 'ripple-active': drawComplete }"
+          :style="{ stroke: strokeColor, transformOrigin: aetherCenter }"
+        />
+        <use
+          v-if="!disableRipple"
+          href="#aether-path"
+          class="fine-line ripple d-2"
+          :class="{ 'ripple-active': drawComplete }"
+          :style="{ stroke: strokeColor, transformOrigin: aetherCenter }"
+        />
+        <use
+          v-if="!disableRipple"
+          href="#aether-path"
+          class="fine-line ripple d-3"
+          :class="{ 'ripple-active': drawComplete }"
+          :style="{ stroke: strokeColor, transformOrigin: aetherCenter }"
+        />
+      </template>
+    </svg>
+  
+    <!-- Standard single-path logos -->
+    <svg
+      v-else
+      :key="`${type}-${animationKey}`"
+      :viewBox="viewBox"
+      class="ripple-logo"
+      xmlns="http://www.w3.org/2000/svg"
+      :style="{ '--anim-delay': `${animDelay}ms` }"
+    >
+      <defs>
+        <path
+          :id="pathId"
+          :d="pathData"
+        />
+        <!-- Gemini multi-layer gradients -->
+        <template v-if="type === 'gemini'">
+          <!-- Fill gradients -->
+          <linearGradient
+            :id="`${pathId}-fill-0`"
+            gradientUnits="userSpaceOnUse"
+            x1="7"
+            x2="11"
+            y1="15.5"
+            y2="12"
+          >
+            <stop stop-color="#08B962" />
+            <stop
+              offset="1"
+              stop-color="#08B962"
+              stop-opacity="0"
+            />
+          </linearGradient>
+          <linearGradient
+            :id="`${pathId}-fill-1`"
+            gradientUnits="userSpaceOnUse"
+            x1="8"
+            x2="11.5"
+            y1="5.5"
+            y2="11"
+          >
+            <stop stop-color="#F94543" />
+            <stop
+              offset="1"
+              stop-color="#F94543"
+              stop-opacity="0"
+            />
+          </linearGradient>
+          <linearGradient
+            :id="`${pathId}-fill-2`"
+            gradientUnits="userSpaceOnUse"
+            x1="3.5"
+            x2="17.5"
+            y1="13.5"
+            y2="12"
+          >
+            <stop stop-color="#FABC12" />
+            <stop
+              offset=".46"
+              stop-color="#FABC12"
+              stop-opacity="0"
+            />
+          </linearGradient>
+          <!-- Stroke gradient for outline - 4 directional gradients to match logo colors -->
+          <!-- Top point = red, Right point = blue, Bottom point = green, Left point = yellow -->
+          <linearGradient
+            :id="`${pathId}-stroke-v`"
+            gradientUnits="userSpaceOnUse"
+            x1="12"
+            x2="12"
+            y1="1"
+            y2="23"
+          >
+            <stop
+              offset="0%"
+              stop-color="#F94543"
+            />
+            <stop
+              offset="50%"
+              stop-color="#3186FF"
+            />
+            <stop
+              offset="100%"
+              stop-color="#08B962"
+            />
+          </linearGradient>
+          <linearGradient
+            :id="`${pathId}-stroke-h`"
+            gradientUnits="userSpaceOnUse"
+            x1="1"
+            x2="23"
+            y1="12"
+            y2="12"
+          >
+            <stop
+              offset="0%"
+              stop-color="#FABC12"
+            />
+            <stop
+              offset="50%"
+              stop-color="#3186FF"
+            />
+            <stop
+              offset="100%"
+              stop-color="#3186FF"
+            />
+          </linearGradient>
+          <!-- Mask for fill-inward animation (controlled by JS) -->
+          <mask :id="`${pathId}-fill-mask`">
+            <rect
+              x="-4"
+              y="-4"
+              width="32"
+              height="32"
+              fill="white"
+            />
+            <circle
+              cx="12"
+              cy="12"
+              :r="geminiFillRadius"
+              fill="black"
+            />
+          </mask>
+        </template>
+      </defs>
+
+      <!-- OpenAI special rendering: stroke outline -> fill -> rotate + breathe -->
+      <template v-if="type === 'openai'">
+        <!-- Outer breathing wrapper (scale pulse) -->
+        <g
+          class="openai-breathe-group"
+          :class="{ 'breathing': drawComplete }"
+          :style="{ transformOrigin: transformOrigin }"
+        >
+          <!-- Inner rotation wrapper -->
           <g
-            class="openai-breathe-group"
-            :class="{ 'breathing': drawComplete }"
+            class="openai-rotate-group"
+            :class="{ 'rotating': drawComplete }"
             :style="{ transformOrigin: transformOrigin }"
           >
-            <!-- Inner rotation wrapper -->
-            <g
-              class="openai-rotate-group"
-              :class="{ 'rotating': drawComplete }"
-              :style="{ transformOrigin: transformOrigin }"
-            >
-              <!-- Step 1: Stroke outline drawing -->
-              <use
-                :href="`#${pathId}`"
-                class="openai-outline"
-                :class="{ 'outline-complete': drawComplete }"
-                stroke="currentColor"
-              />
-              <!-- Step 2: Fill layer (appears after outline) -->
-              <use
-                :href="`#${pathId}`"
-                class="openai-fill"
-                :class="{ 'fill-active': drawComplete }"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </g>
+            <!-- Step 1: Stroke outline drawing -->
+            <use
+              :href="`#${pathId}`"
+              class="openai-outline"
+              :class="{ 'outline-complete': drawComplete }"
+              stroke="currentColor"
+            />
+            <!-- Step 2: Fill layer (appears after outline) -->
+            <use
+              :href="`#${pathId}`"
+              class="openai-fill"
+              :class="{ 'fill-active': drawComplete }"
+              fill="currentColor"
+              fill-rule="evenodd"
+            />
           </g>
-        </template>
+        </g>
+      </template>
 
-        <!-- Claude special rendering: stroke outline -> fill -> ripple -->
-        <template v-else-if="type === 'claude'">
-          <!-- Step 1: Stroke outline drawing -->
-          <use
-            :href="`#${pathId}`"
-            class="claude-outline"
-            :class="{ 'outline-complete': drawComplete }"
-            stroke="#D97757"
-          />
-          <!-- Step 2: Fill layer (appears after outline) -->
-          <use
-            :href="`#${pathId}`"
-            class="claude-fill"
-            :class="{ 'fill-active': drawComplete }"
-            fill="#D97757"
-          />
-          <!-- Step 3: Ripple waves (after fill complete) -->
-          <use
-            :href="`#${pathId}`"
-            class="fine-line claude-ripple d-1"
-            :class="{ 'ripple-active': drawComplete }"
-            :style="{ stroke: '#D97757', transformOrigin: transformOrigin }"
-          />
-          <use
-            :href="`#${pathId}`"
-            class="fine-line claude-ripple d-2"
-            :class="{ 'ripple-active': drawComplete }"
-            :style="{ stroke: '#D97757', transformOrigin: transformOrigin }"
-          />
-          <use
-            :href="`#${pathId}`"
-            class="fine-line claude-ripple d-3"
-            :class="{ 'ripple-active': drawComplete }"
-            :style="{ stroke: '#D97757', transformOrigin: transformOrigin }"
-          />
-        </template>
+      <!-- Claude special rendering: stroke outline -> fill -> ripple -->
+      <template v-else-if="type === 'claude'">
+        <!-- Step 1: Stroke outline drawing -->
+        <use
+          :href="`#${pathId}`"
+          class="claude-outline"
+          :class="{ 'outline-complete': drawComplete }"
+          stroke="#D97757"
+        />
+        <!-- Step 2: Fill layer (appears after outline) -->
+        <use
+          :href="`#${pathId}`"
+          class="claude-fill"
+          :class="{ 'fill-active': drawComplete }"
+          fill="#D97757"
+        />
+        <!-- Step 3: Ripple waves (after fill complete) -->
+        <use
+          :href="`#${pathId}`"
+          class="fine-line claude-ripple d-1"
+          :class="{ 'ripple-active': drawComplete }"
+          :style="{ stroke: '#D97757', transformOrigin: transformOrigin }"
+        />
+        <use
+          :href="`#${pathId}`"
+          class="fine-line claude-ripple d-2"
+          :class="{ 'ripple-active': drawComplete }"
+          :style="{ stroke: '#D97757', transformOrigin: transformOrigin }"
+        />
+        <use
+          :href="`#${pathId}`"
+          class="fine-line claude-ripple d-3"
+          :class="{ 'ripple-active': drawComplete }"
+          :style="{ stroke: '#D97757', transformOrigin: transformOrigin }"
+        />
+      </template>
 
-        <!-- Gemini special rendering: stroke outline -> fill -> breathe -->
-        <template v-else-if="type === 'gemini'">
-          <!-- Step 1: Stroke outline drawing (multi-layer colorful) -->
-          <g class="gemini-outline-group" :class="{ 'outline-complete': drawComplete }">
-            <use :href="`#${pathId}`" class="gemini-outline" stroke="#3186FF" />
-            <use :href="`#${pathId}`" class="gemini-outline" :style="{ stroke: `url(#${pathId}-fill-0)` }" />
-            <use :href="`#${pathId}`" class="gemini-outline" :style="{ stroke: `url(#${pathId}-fill-1)` }" />
-            <use :href="`#${pathId}`" class="gemini-outline" :style="{ stroke: `url(#${pathId}-fill-2)` }" />
-          </g>
-          <!-- Step 2: Fill layer (appears after outline, with inward fill animation) -->
+      <!-- Gemini special rendering: stroke outline -> fill -> breathe -->
+      <template v-else-if="type === 'gemini'">
+        <!-- Step 1: Stroke outline drawing (multi-layer colorful) -->
+        <g
+          class="gemini-outline-group"
+          :class="{ 'outline-complete': drawComplete }"
+        >
+          <use
+            :href="`#${pathId}`"
+            class="gemini-outline"
+            stroke="#3186FF"
+          />
+          <use
+            :href="`#${pathId}`"
+            class="gemini-outline"
+            :style="{ stroke: `url(#${pathId}-fill-0)` }"
+          />
+          <use
+            :href="`#${pathId}`"
+            class="gemini-outline"
+            :style="{ stroke: `url(#${pathId}-fill-1)` }"
+          />
+          <use
+            :href="`#${pathId}`"
+            class="gemini-outline"
+            :style="{ stroke: `url(#${pathId}-fill-2)` }"
+          />
+        </g>
+        <!-- Step 2: Fill layer (appears after outline, with inward fill animation) -->
+        <g
+          class="gemini-fill"
+          :class="{ 'fill-complete': fillComplete }"
+          :mask="`url(#${pathId}-fill-mask)`"
+        >
+          <use
+            :href="`#${pathId}`"
+            fill="#3186FF"
+          />
+          <use
+            :href="`#${pathId}`"
+            :fill="`url(#${pathId}-fill-0)`"
+          />
+          <use
+            :href="`#${pathId}`"
+            :fill="`url(#${pathId}-fill-1)`"
+          />
+          <use
+            :href="`#${pathId}`"
+            :fill="`url(#${pathId}-fill-2)`"
+          />
+        </g>
+        <!-- Step 3: Ripple waves (after fill complete) -->
+        <g v-if="!disableRipple">
           <g
-            class="gemini-fill"
-            :class="{ 'fill-complete': fillComplete }"
-            :mask="`url(#${pathId}-fill-mask)`"
+            class="gemini-ripple d-1"
+            :class="{ 'ripple-active': fillComplete }"
+            :style="{ transformOrigin: transformOrigin }"
           >
-            <use :href="`#${pathId}`" fill="#3186FF" />
-            <use :href="`#${pathId}`" :fill="`url(#${pathId}-fill-0)`" />
-            <use :href="`#${pathId}`" :fill="`url(#${pathId}-fill-1)`" />
-            <use :href="`#${pathId}`" :fill="`url(#${pathId}-fill-2)`" />
+            <use
+              :href="`#${pathId}`"
+              fill="#3186FF"
+            />
+            <use
+              :href="`#${pathId}`"
+              :fill="`url(#${pathId}-fill-0)`"
+            />
+            <use
+              :href="`#${pathId}`"
+              :fill="`url(#${pathId}-fill-1)`"
+            />
+            <use
+              :href="`#${pathId}`"
+              :fill="`url(#${pathId}-fill-2)`"
+            />
           </g>
-          <!-- Step 3: Ripple waves (after fill complete) -->
-          <g v-if="!disableRipple">
-            <g
-              class="gemini-ripple d-1"
-              :class="{ 'ripple-active': fillComplete }"
-              :style="{ transformOrigin: transformOrigin }"
-            >
-              <use :href="`#${pathId}`" fill="#3186FF" />
-              <use :href="`#${pathId}`" :fill="`url(#${pathId}-fill-0)`" />
-              <use :href="`#${pathId}`" :fill="`url(#${pathId}-fill-1)`" />
-              <use :href="`#${pathId}`" :fill="`url(#${pathId}-fill-2)`" />
-            </g>
-            <g
-              class="gemini-ripple d-2"
-              :class="{ 'ripple-active': fillComplete }"
-              :style="{ transformOrigin: transformOrigin }"
-            >
-              <use :href="`#${pathId}`" fill="#3186FF" />
-              <use :href="`#${pathId}`" :fill="`url(#${pathId}-fill-0)`" />
-              <use :href="`#${pathId}`" :fill="`url(#${pathId}-fill-1)`" />
-              <use :href="`#${pathId}`" :fill="`url(#${pathId}-fill-2)`" />
-            </g>
-            <g
-              class="gemini-ripple d-3"
-              :class="{ 'ripple-active': fillComplete }"
-              :style="{ transformOrigin: transformOrigin }"
-            >
-              <use :href="`#${pathId}`" fill="#3186FF" />
-              <use :href="`#${pathId}`" :fill="`url(#${pathId}-fill-0)`" />
-              <use :href="`#${pathId}`" :fill="`url(#${pathId}-fill-1)`" />
-              <use :href="`#${pathId}`" :fill="`url(#${pathId}-fill-2)`" />
-            </g>
+          <g
+            class="gemini-ripple d-2"
+            :class="{ 'ripple-active': fillComplete }"
+            :style="{ transformOrigin: transformOrigin }"
+          >
+            <use
+              :href="`#${pathId}`"
+              fill="#3186FF"
+            />
+            <use
+              :href="`#${pathId}`"
+              :fill="`url(#${pathId}-fill-0)`"
+            />
+            <use
+              :href="`#${pathId}`"
+              :fill="`url(#${pathId}-fill-1)`"
+            />
+            <use
+              :href="`#${pathId}`"
+              :fill="`url(#${pathId}-fill-2)`"
+            />
           </g>
-        </template>
+          <g
+            class="gemini-ripple d-3"
+            :class="{ 'ripple-active': fillComplete }"
+            :style="{ transformOrigin: transformOrigin }"
+          >
+            <use
+              :href="`#${pathId}`"
+              fill="#3186FF"
+            />
+            <use
+              :href="`#${pathId}`"
+              :fill="`url(#${pathId}-fill-0)`"
+            />
+            <use
+              :href="`#${pathId}`"
+              :fill="`url(#${pathId}-fill-1)`"
+            />
+            <use
+              :href="`#${pathId}`"
+              :fill="`url(#${pathId}-fill-2)`"
+            />
+          </g>
+        </g>
+      </template>
 
-        <!-- Other logos: stroke-based rendering -->
-        <template v-else>
-          <!-- Static center icon with stroke drawing animation -->
+      <!-- Other logos: stroke-based rendering -->
+      <template v-else>
+        <!-- Static center icon with stroke drawing animation -->
+        <use
+          :href="`#${pathId}`"
+          class="fine-line stroke-draw"
+          :class="{ 'draw-complete': drawComplete }"
+          :style="{ stroke: strokeColor, '--path-length': pathLength }"
+        />
+
+        <!-- Ripple waves - only active after drawing completes -->
+        <g>
           <use
             :href="`#${pathId}`"
-            class="fine-line stroke-draw"
-            :class="{ 'draw-complete': drawComplete }"
-            :style="{ stroke: strokeColor, '--path-length': pathLength }"
+            class="fine-line ripple d-1"
+            :class="{ 'ripple-active': drawComplete }"
+            :style="{ stroke: strokeColor, transformOrigin: transformOrigin }"
           />
-
-          <!-- Ripple waves - only active after drawing completes -->
-          <g>
-            <use
-              :href="`#${pathId}`"
-              class="fine-line ripple d-1"
-              :class="{ 'ripple-active': drawComplete }"
-              :style="{ stroke: strokeColor, transformOrigin: transformOrigin }"
-            />
-            <use
-              :href="`#${pathId}`"
-              class="fine-line ripple d-2"
-              :class="{ 'ripple-active': drawComplete }"
-              :style="{ stroke: strokeColor, transformOrigin: transformOrigin }"
-            />
-            <use
-              :href="`#${pathId}`"
-              class="fine-line ripple d-3"
-              :class="{ 'ripple-active': drawComplete }"
-              :style="{ stroke: strokeColor, transformOrigin: transformOrigin }"
-            />
-          </g>
-        </template>
-      </svg>
-    </Transition>
+          <use
+            :href="`#${pathId}`"
+            class="fine-line ripple d-2"
+            :class="{ 'ripple-active': drawComplete }"
+            :style="{ stroke: strokeColor, transformOrigin: transformOrigin }"
+          />
+          <use
+            :href="`#${pathId}`"
+            class="fine-line ripple d-3"
+            :class="{ 'ripple-active': drawComplete }"
+            :style="{ stroke: strokeColor, transformOrigin: transformOrigin }"
+          />
+        </g>
+      </template>
+    </svg>
+  </Transition>
 </template>
 
 
diff --git a/frontend/src/components/ToastWithProgress.vue b/frontend/src/components/ToastWithProgress.vue
index a7d642a..76deb20 100644
--- a/frontend/src/components/ToastWithProgress.vue
+++ b/frontend/src/components/ToastWithProgress.vue
@@ -35,28 +35,42 @@
         />
       </svg>
       <!-- 图标 -->
-      <div class="absolute inset-0 flex items-center justify-center" :class="iconClasses">
-        <component :is="icon" class="w-4 h-4" />
+      <div
+        class="absolute inset-0 flex items-center justify-center"
+        :class="iconClasses"
+      >
+        <component
+          :is="icon"
+          class="w-4 h-4"
+        />
       </div>
     </div>
 
     <!-- 内容 -->
     <div class="flex-1 min-w-0">
-      <p v-if="toast.title" class="text-sm font-medium" :class="titleClasses">
+      <p
+        v-if="toast.title"
+        class="text-sm font-medium"
+        :class="titleClasses"
+      >
         {{ toast.title }}
       </p>
-      <p v-if="toast.message" class="text-sm" :class="messageClasses">
+      <p
+        v-if="toast.message"
+        class="text-sm"
+        :class="messageClasses"
+      >
         {{ toast.message }}
       </p>
     </div>
 
     <!-- 关闭按钮 -->
     <button
-      @click="$emit('remove')"
       class="shrink-0 p-1 rounded transition-colors opacity-40 hover:opacity-100"
       :class="closeClasses"
       type="button"
       aria-label="关闭"
+      @click="$emit('remove')"
     >
       <X class="w-3.5 h-3.5" />
     </button>
diff --git a/frontend/src/components/charts/BarChart.vue b/frontend/src/components/charts/BarChart.vue
index b8634a6..9791aa3 100644
--- a/frontend/src/components/charts/BarChart.vue
+++ b/frontend/src/components/charts/BarChart.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full">
-    <canvas ref="chartRef"></canvas>
+    <canvas ref="chartRef" />
   </div>
 </template>
 
@@ -19,6 +19,11 @@ import {
   type ChartOptions
 } from 'chart.js'
 
+const props = withDefaults(defineProps<Props>(), {
+  height: 300,
+  stacked: true
+})
+
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -36,11 +41,6 @@ interface Props {
   stacked?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  height: 300,
-  stacked: true
-})
-
 const chartRef = ref<HTMLCanvasElement>()
 let chart: ChartJS<'bar'> | null = null
 
diff --git a/frontend/src/components/charts/LineChart.vue b/frontend/src/components/charts/LineChart.vue
index bedd944..2d2d2dd 100644
--- a/frontend/src/components/charts/LineChart.vue
+++ b/frontend/src/components/charts/LineChart.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full">
-    <canvas ref="chartRef"></canvas>
+    <canvas ref="chartRef" />
   </div>
 </template>
 
@@ -20,6 +20,10 @@ import {
   type ChartOptions
 } from 'chart.js'
 
+const props = withDefaults(defineProps<Props>(), {
+  height: 300
+})
+
 // 注册 Chart.js 组件
 ChartJS.register(
   CategoryScale,
@@ -38,10 +42,6 @@ interface Props {
   height?: number
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  height: 300
-})
-
 const chartRef = ref<HTMLCanvasElement>()
 let chart: ChartJS<'line'> | null = null
 
diff --git a/frontend/src/components/charts/ScatterChart.vue b/frontend/src/components/charts/ScatterChart.vue
index 3ecd639..8c08d99 100644
--- a/frontend/src/components/charts/ScatterChart.vue
+++ b/frontend/src/components/charts/ScatterChart.vue
@@ -1,18 +1,26 @@
 <template>
   <div class="w-full h-full relative">
-    <canvas ref="chartRef"></canvas>
+    <canvas ref="chartRef" />
     <div
       v-if="crosshairStats"
       class="absolute top-2 right-2 bg-gray-800/90 text-gray-100 px-3 py-2 rounded-lg text-sm shadow-lg border border-gray-600"
     >
-      <div class="font-medium text-yellow-400">Y = {{ crosshairStats.yValue.toFixed(1) }} 分钟</div>
+      <div class="font-medium text-yellow-400">
+        Y = {{ crosshairStats.yValue.toFixed(1) }} 分钟
+      </div>
       <!-- 单个 dataset 时显示简单统计 -->
-      <div v-if="crosshairStats.datasets.length === 1" class="mt-1">
+      <div
+        v-if="crosshairStats.datasets.length === 1"
+        class="mt-1"
+      >
         <span class="text-green-400">{{ crosshairStats.datasets[0].belowCount }}</span> / {{ crosshairStats.datasets[0].totalCount }} 点在横线以下
         <span class="ml-2 text-blue-400">({{ crosshairStats.datasets[0].belowPercent.toFixed(1) }}%)</span>
       </div>
       <!-- 多个 dataset 时按模型分别显示 -->
-      <div v-else class="mt-1 space-y-0.5">
+      <div
+        v-else
+        class="mt-1 space-y-0.5"
+      >
         <div
           v-for="ds in crosshairStats.datasets"
           :key="ds.label"
@@ -55,6 +63,10 @@ import {
 } from 'chart.js'
 import 'chartjs-adapter-date-fns'
 
+const props = withDefaults(defineProps<Props>(), {
+  height: 300
+})
+
 ChartJS.register(
   LinearScale,
   PointElement,
@@ -87,10 +99,6 @@ interface CrosshairStats {
   totalBelowPercent: number
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  height: 300
-})
-
 const chartRef = ref<HTMLCanvasElement>()
 let chart: ChartJS<'scatter'> | null = null
 
@@ -252,7 +260,7 @@ const defaultOptions: ChartOptions<'scatter'> = {
       ticks: {
         color: 'rgb(107, 114, 128)',
         // 自定义刻度值：在实际值 0, 2, 5, 10, 30, 60, 120 处显示
-        callback: function(this: Scale, tickValue: string | number) {
+        callback(this: Scale, tickValue: string | number) {
           const displayVal = Number(tickValue)
           const realVal = toRealValue(displayVal)
           // 只在特定的显示位置显示刻度
@@ -273,7 +281,7 @@ const defaultOptions: ChartOptions<'scatter'> = {
         text: '间隔 (分钟)',
         color: 'rgb(107, 114, 128)'
       },
-      afterBuildTicks: function(scale: Scale) {
+      afterBuildTicks(scale: Scale) {
         // 在特定实际值处设置刻度
         const targetTicks = [0, 2, 5, 10, 30, 60, 120]
         scale.ticks = targetTicks.map(val => ({
diff --git a/frontend/src/components/common/AlertDialog.vue b/frontend/src/components/common/AlertDialog.vue
index b746f53..f5dceac 100644
--- a/frontend/src/components/common/AlertDialog.vue
+++ b/frontend/src/components/common/AlertDialog.vue
@@ -1,11 +1,21 @@
 <template>
-  <Dialog :modelValue="modelValue" @update:modelValue="handleClose" :zIndex="80">
+  <Dialog
+    :model-value="modelValue"
+    :z-index="80"
+    @update:model-value="handleClose"
+  >
     <template #header>
       <div class="border-b border-border px-6 py-4">
         <div class="flex items-center gap-3">
-          <component :is="icon" class="h-5 w-5 flex-shrink-0" :class="iconColorClass" />
+          <component
+            :is="icon"
+            class="h-5 w-5 flex-shrink-0"
+            :class="iconColorClass"
+          />
           <div class="flex-1 min-w-0">
-            <h3 class="text-lg font-semibold text-foreground leading-tight">{{ title }}</h3>
+            <h3 class="text-lg font-semibold text-foreground leading-tight">
+              {{ title }}
+            </h3>
           </div>
         </div>
       </div>
@@ -14,22 +24,26 @@
     <template #default>
       <!-- 描述 -->
       <div class="space-y-3">
-        <p v-for="(line, index) in descriptionLines" :key="index" :class="getLineClass(index)">
+        <p
+          v-for="(line, index) in descriptionLines"
+          :key="index"
+          :class="getLineClass(index)"
+        >
           {{ line }}
         </p>
       </div>
 
       <!-- 自定义内容插槽 -->
-      <slot></slot>
+      <slot />
     </template>
 
     <template #footer>
       <!-- 取消按钮 -->
       <Button
         variant="outline"
-        @click="handleCancel"
         :disabled="loading"
         class="h-10 px-5"
+        @click="handleCancel"
       >
         {{ cancelText }}
       </Button>
@@ -37,11 +51,14 @@
       <!-- 确认按钮 -->
       <Button
         :variant="confirmVariant"
-        @click="handleConfirm"
         :disabled="loading"
         class="h-10 px-5"
+        @click="handleConfirm"
       >
-        <Loader2 v-if="loading" class="animate-spin h-4 w-4 mr-2" />
+        <Loader2
+          v-if="loading"
+          class="animate-spin h-4 w-4 mr-2"
+        />
         {{ confirmText }}
       </Button>
     </template>
diff --git a/frontend/src/components/common/EmptyState.vue b/frontend/src/components/common/EmptyState.vue
index b2a0b85..84defe8 100644
--- a/frontend/src/components/common/EmptyState.vue
+++ b/frontend/src/components/common/EmptyState.vue
@@ -3,49 +3,68 @@
     <!-- 图标 -->
     <div :class="iconContainerClasses">
       <component
-        v-if="icon"
         :is="icon"
+        v-if="icon"
         :class="iconClasses"
       />
       <component
-        v-else
         :is="defaultIcon"
+        v-else
         :class="iconClasses"
       />
     </div>
 
     <!-- 标题 -->
-    <h3 v-if="title" :class="titleClasses">
+    <h3
+      v-if="title"
+      :class="titleClasses"
+    >
       {{ title }}
     </h3>
 
     <!-- 描述 -->
-    <p v-if="description" :class="descriptionClasses">
+    <p
+      v-if="description"
+      :class="descriptionClasses"
+    >
       {{ description }}
     </p>
 
     <!-- 自定义内容插槽 -->
-    <div v-if="$slots.default" class="mt-4">
+    <div
+      v-if="$slots.default"
+      class="mt-4"
+    >
       <slot />
     </div>
 
     <!-- 操作按钮 -->
-    <div v-if="$slots.actions || actionText" class="mt-6 flex flex-wrap items-center justify-center gap-3">
+    <div
+      v-if="$slots.actions || actionText"
+      class="mt-6 flex flex-wrap items-center justify-center gap-3"
+    >
       <slot name="actions">
         <Button
           v-if="actionText"
-          @click="handleAction"
           :variant="actionVariant"
           :size="actionSize"
+          @click="handleAction"
         >
-          <component v-if="actionIcon" :is="actionIcon" class="mr-2 h-4 w-4" />
+          <component
+            :is="actionIcon"
+            v-if="actionIcon"
+            class="mr-2 h-4 w-4"
+          />
           {{ actionText }}
         </Button>
       </slot>
     </div>
 
     <!-- 次要操作 -->
-    <div v-if="$slots.secondary" class="mt-3">
+    <div
+      v-if="$slots.secondary"
+      class="mt-3"
+    >
       <slot name="secondary" />
     </div>
   </div>
diff --git a/frontend/src/components/common/LoadingState.vue b/frontend/src/components/common/LoadingState.vue
index 4b3640f..566ccf6 100644
--- a/frontend/src/components/common/LoadingState.vue
+++ b/frontend/src/components/common/LoadingState.vue
@@ -1,22 +1,34 @@
 <template>
   <div :class="containerClasses">
     <div class="flex flex-col items-center gap-4">
-      <Skeleton v-if="variant === 'skeleton'" :class="skeletonClasses" />
+      <Skeleton
+        v-if="variant === 'skeleton'"
+        :class="skeletonClasses"
+      />
 
-      <div v-else-if="variant === 'spinner'" class="relative">
-        <div class="h-12 w-12 animate-spin rounded-full border-4 border-muted border-t-primary"></div>
+      <div
+        v-else-if="variant === 'spinner'"
+        class="relative"
+      >
+        <div class="h-12 w-12 animate-spin rounded-full border-4 border-muted border-t-primary" />
       </div>
 
-      <div v-else-if="variant === 'pulse'" class="flex gap-2">
+      <div
+        v-else-if="variant === 'pulse'"
+        class="flex gap-2"
+      >
         <div
           v-for="i in 3"
           :key="i"
           class="h-3 w-3 animate-pulse rounded-full bg-primary"
           :style="{ animationDelay: `${i * 150}ms` }"
-        ></div>
+        />
       </div>
 
-      <div v-if="message" class="text-sm text-muted-foreground">
+      <div
+        v-if="message"
+        class="text-sm text-muted-foreground"
+      >
         {{ message }}
       </div>
     </div>
diff --git a/frontend/src/components/icons/AetherLogo.vue b/frontend/src/components/icons/AetherLogo.vue
index fea8bbf..b8b46d2 100644
--- a/frontend/src/components/icons/AetherLogo.vue
+++ b/frontend/src/components/icons/AetherLogo.vue
@@ -1,5 +1,13 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 799.31 752.14" fill="currentColor">
-    <path d="M569.100 368.700Q569.900 371.900 570.200 378.100Q571.100 396.300 568.300 413.400C565.100 433.000 558.700 452.800 548.800 470.200Q542.500 481.100 539.100 486.100Q527.900 502.600 513.100 516.300Q499.300 529.000 480.800 539.600C463.100 549.800 445.200 557.800 425.700 563.800Q410.400 568.400 405.600 569.500C390.300 573.100 370.600 576.200 352.900 580.400Q338.100 584.000 330.500 586.200C306.900 592.900 283.100 604.600 264.000 618.500C248.800 629.500 235.500 643.500 223.600 658.300Q212.700 671.900 203.500 690.300Q191.400 714.300 188.700 720.800Q184.400 731.100 176.500 750.800A0.600 0.600 0 0 0 177.000 751.600L198.800 751.600A2.400 2.400 9.8 0 0 201.100 750.000C210.500 723.800 222.200 698.700 238.300 676.100Q250.400 659.200 263.000 647.800Q283.300 629.300 308.900 617.200Q324.400 609.900 349.200 602.700Q357.300 600.400 381.000 596.000Q404.200 591.600 412.800 589.500Q425.100 586.400 443.400 580.300Q458.800 575.100 473.000 568.000Q491.000 559.000 505.500 549.500A0.400 0.300 62.9 0 1 506.100 549.600Q506.900 551.800 507.800 553.500Q515.800 569.100 546.000 626.000Q554.400 641.700 555.400 643.700Q562.300 657.300 564.600 661.500C569.700 670.600 573.900 679.800 578.900 688.500Q586.000 700.800 588.100 704.400C597.100 719.200 613.800 733.700 630.300 741.200Q634.300 743.100 646.000 746.700Q652.200 748.600 659.400 749.300Q671.600 750.600 673.100 750.600Q691.500 751.600 725.100 751.600Q751.900 751.600 794.900 751.400Q796.800 751.400 798.600 748.600A1.200 1.200 0 0 0 798.800 747.700Q797.900 744.400 795.800 740.200Q780.100 708.200 769.300 687.400Q766.700 682.500 765.700 680.600Q754.700 658.800 739.000 628.800C726.200 604.300 717.600 587.300 705.800 565.100Q701.200 556.400 691.100 536.900Q683.000 521.000 671.400 499.900C666.400 490.800 656.800 470.600 648.500 456.000C640.200 441.400 631.800 423.800 625.100 411.400Q616.100 395.000 609.600 382.100C600.700 364.400 591.200 347.100 581.800 329.000Q562.500 292.000 552.500 273.200C546.700 262.300 540.300 249.200 535.500 240.200Q520.300 211.500 506.000 183.800C495.700 163.800 483.600 141.800 473.700 122.500C466.700 108.900 458.500 94.200 451.900 81.300Q445.100 67.900 435.600 50.400Q426.400 33.500 414.700 10.400C412.000 5.100 408.600 0.600 402.500 0.500C397.900 0.400 394.300 2.900 392.100 6.900Q386.700 16.300 378.700 31.500Q360.600 65.900 349.200 86.700Q341.500 100.800 334.600 114.500Q331.300 121.200 319.900 142.200Q315.600 150.000 308.200 164.300Q305.300 169.900 296.500 186.300C285.400 206.800 274.800 227.400 264.900 245.700C251.400 270.800 237.100 298.400 225.100 320.900C216.600 336.800 207.700 354.700 199.400 370.000C186.800 393.100 175.400 415.600 161.900 440.600C155.200 453.000 145.300 472.900 137.100 487.600Q129.400 501.400 121.200 517.900Q116.500 527.300 85.500 585.600Q67.700 619.000 64.800 624.900C57.700 638.900 47.100 658.100 40.500 671.200Q25.700 700.300 11.600 727.600Q7.200 736.300 0.600 750.500A0.800 0.800 12.4 0 0 1.300 751.600L23.900 751.600A1.400 1.400 -77.4 0 0 25.200 750.800Q40.000 719.200 51.100 698.700Q52.000 697.100 67.600 667.200Q84.900 634.200 103.200 608.200Q123.000 580.200 152.700 554.100C157.700 549.700 163.500 545.700 169.200 541.200Q175.100 536.500 182.000 532.000Q222.200 505.400 266.800 491.800Q277.100 488.700 293.800 484.100Q302.500 481.800 309.400 480.600C334.800 476.000 358.000 471.700 381.400 465.400Q392.800 462.300 399.400 459.700Q415.400 453.400 432.400 444.600Q443.500 438.800 451.600 433.000C465.000 423.400 476.400 412.300 487.200 399.300C503.500 379.800 515.500 355.900 522.500 331.500A0.200 0.200 0 0 1 522.800 331.500Q523.200 332.700 522.900 334.400Q520.700 349.300 515.900 364.900Q511.000 380.600 503.900 393.800C486.600 425.800 457.300 453.500 424.000 470.000Q403.300 480.200 380.600 487.100Q369.500 490.500 350.900 494.200Q309.900 502.300 300.400 504.800C252.800 517.300 207.600 540.700 172.000 574.400Q160.300 585.400 155.000 590.800Q149.100 597.000 137.700 611.400C130.400 620.600 125.200 628.800 117.900 639.600Q111.300 649.300 104.800 661.500C88.800 691.300 74.600 719.700 60.400 750.600A0.700 0.700 0 0 0 61.000 751.600L84.000 751.600A1.000 0.900 14.4 0 0 84.800 751.100Q86.200 748.500 89.100 742.100Q100.600 716.900 117.200 684.500C124.600 669.900 132.800 656.100 141.500 643.000C152.500 626.600 165.000 612.000 176.200 600.200Q193.300 582.200 217.100 565.400Q233.500 553.800 253.000 544.500Q278.800 532.400 303.600 525.600Q312.900 523.000 334.800 518.900Q363.800 513.400 386.500 507.200Q419.800 498.200 450.700 479.200Q488.100 456.300 513.000 419.300C529.900 394.200 540.200 364.300 544.200 334.400Q544.700 331.100 544.600 319.700A0.200 0.200 0 0 1 544.900 319.500L545.300 319.500A0.100 0.100 0 0 1 545.400 319.600Q551.700 350.700 545.400 381.400C543.200 392.000 539.700 405.500 534.500 416.700Q528.300 430.000 527.300 431.600Q513.400 453.800 500.000 467.700C484.800 483.500 465.800 497.400 445.100 507.600Q431.900 514.200 428.300 515.600Q409.000 523.200 389.700 528.500C374.400 532.600 357.700 534.800 342.000 538.000Q331.300 540.200 312.200 545.400Q275.000 555.500 242.500 575.700Q223.600 587.400 208.200 601.800Q191.800 617.100 179.300 633.800Q159.000 661.000 140.900 698.900Q135.600 709.900 123.100 736.900C120.800 741.900 119.200 746.300 117.100 750.700A0.700 0.700 0 0 0 117.700 751.600L139.800 751.600A1.300 1.300 0 0 0 140.800 751.100Q142.100 749.500 142.500 748.400Q145.900 739.800 149.400 732.200Q157.900 714.000 168.200 693.400Q177.600 674.600 184.600 664.000Q194.700 648.700 204.700 636.900Q236.300 599.400 281.300 579.100C299.000 571.100 319.700 563.700 339.400 559.900C365.500 555.000 389.900 550.700 413.500 543.300C437.400 535.800 461.000 525.000 481.700 510.600C492.400 503.200 503.000 495.400 511.400 486.900C523.200 475.000 535.100 460.500 543.600 445.400Q549.300 435.300 551.100 431.600Q563.200 406.600 567.400 378.500Q568.600 370.400 568.900 368.700A0.100 0.100 0 0 1 569.100 368.700 M507.900 291.500C509.300 280.500 508.500 268.100 507.4 257.8Q506.700 251.800 506.1 249.000C504.4 241.300 503.6 234.6 501.2 227.3Q496.5 213.100 493.5 207.3Q471.2 164.4 471.000 164.1C462.2 146.8 452.1 129.7 443.4 112.1C439.9 104.9 432.6 90.9 426.8 80.8C422.6 73.5 419.4 66.2 415.2 58.5Q409.1 47.7 409.000 47.5C408.1 45.5 407.7 44.1 407.000 42.6A0.3 0.3 0 0 0 406.4 42.7Q400.6 75.2 412.000 106.2Q418.5 124.000 423.1 132.3Q438.5 160.2 446.9 176.9C455.6 194.000 465.9 212.000 473.9 228.000C481.2 242.4 491.1 259.4 498.3 274.2Q502.7 283.5 507.3 291.6A0.3 0.3 0 0 0 507.9 291.5 M383.5 78.7C380.9 85.5 379.9 91.9 378.5 100.000C373.8 127.5 381.000 155.2 393.9 179.1Q399.2 188.9 412.3 214.000C425.3 238.8 431.4 249.5 443.7 273.000Q449.2 283.4 457.1 297.9Q469.000 319.7 470.5 322.8Q479.6 340.9 486.8 353.5Q487.5 354.7 488.5 357.4A0.4 0.4 0 0 0 489.3 357.4Q496.1 343.9 501.6 329.1A2.1 2.1 52.5 0 0 501.8 328.2Q501.5 325.4 500.7 323.9Q491.2 306.4 483.2 291.000Q464.9 256.2 450.8 229.8Q449.8 228.000 446.4 221.8C434.2 199.1 422.000 175.6 409.9 153.7C399.1 134.2 389.8 115.5 386.5 95.9Q385.3 89.4 383.9 78.8A0.2 0.2 0 0 0 383.5 78.7 M355.6 127.9Q345.3 163.000 354.6 199.5Q359.9 220.2 370.9 241.4Q389.6 277.3 422.000 337.3Q441.1 372.8 452.7 395.000Q453.6 396.8 456.5 400.7A0.5 0.5 0 0 0 457.2 400.7C463.9 393.9 470.6 387.000 475.6 379.6A1.1 1.1 54.1 0 0 475.8 378.6Q475.5 377.7 473.6 374.2Q458.6 346.9 451.6 333.5C434.000 299.9 414.9 265.000 397.1 231.4Q388.000 214.000 372.1 183.9Q358.3 157.7 356.2 128.000A0.3 0.3 0 0 0 355.6 127.9 M133.7 541.9A0.5 0.5 0 0 0 134.4 542.4C145.4 532.3 157.3 522.5 170.3 514.4Q173.9 512.2 184.8 504.9A6.7 6.5 -88.8 0 0 186.6 503.2Q189.1 499.7 191.4 495.1Q202.2 474.1 212.9 453.8C217.3 445.5 220.6 439.9 223.6 433.9Q227.7 425.4 231.2 418.7Q239.2 403.3 241.8 398.5C252.1 379.6 261.8 360.1 273.6 338.4Q280.000 326.5 288.3 310.6C297.5 292.9 308.2 273.7 318.1 254.3C324.1 242.6 331.000 230.6 336.8 219.4A2.8 2.8 -39.3 0 0 337.000 217.4Q331.000 196.2 328.8 172.9A0.4 0.4 0 0 0 328.000 172.8Q326.9 174.9 326.7 175.3Q321.2 185.4 309.4 208.2Q303.9 218.9 300.3 225.6C290.1 244.5 281.4 261.4 268.4 285.6Q257.4 306.2 245.7 328.4Q203.6 407.9 187.3 438.4C185.000 442.9 183.000 447.3 180.4 452.1Q159.9 490.000 139.5 530.3C137.6 534.1 134.5 537.5 133.7 541.9 M348.3 244.7A0.3 0.3 0 0 0 347.7 244.7L220.2 485.5A0.3 0.3 0 0 0 220.6 486.000L256.4 472.1A0.3 0.3 0 0 0 256.6 471.9L362.5 271.9A0.3 0.3 0 0 0 362.5 271.5L348.3 244.7 M374.8 295.8A0.3 0.3 0 0 0 374.2 295.9L285.3 463.8A0.3 0.3 0 0 0 285.6 464.3L319.7 457.000A0.3 0.3 0 0 0 320.000 456.8L390.2 324.1A0.3 0.3 0 0 0 390.2 323.8L374.8 295.8 M401.7 347.4Q393.7 363.6 389.3 371.6C378.000 392.3 364.8 418.2 356.8 433.1Q350.8 444.3 346.8 451.000A0.4 0.4 -79.4 0 0 347.2 451.6Q363.000 449.000 377.8 444.6Q410.1 434.9 438.8 416.4A1.3 1.3 -34.8 0 0 439.1 414.5Q437.2 411.9 436.000 409.7Q422.3 383.5 402.4 347.4A0.4 0.4 44 0 0 401.7 347.4 M591.7 397.1Q590.1 421.4 584.1 443.000A4.9 4.9 38.7 0 0 584.5 446.6Q604.000 482.7 615.1 503.8C619.2 511.6 622.6 517.4 626.000 524.4Q629.4 531.3 633.9 539.9C639.7 550.9 642.4 556.5 647.4 565.1Q650.9 571.1 658.000 585.6C665.2 600.2 679.2 625.2 688.2 643.5C697.000 661.3 704.000 675.2 714.2 689.8Q723.6 703.1 732.000 710.1Q746.6 722.4 764.6 728.000Q764.8 728.000 765.1 727.9A0.5 0.5 -31.1 0 0 765.3 727.2Q758.7 716.1 751.5 701.3Q744.6 687.1 738.1 675.000C728.5 657.2 719.8 639.3 710.6 622.1Q701.3 604.6 690.4 583.000C682.9 568.3 675.1 554.1 667.8 540.000Q659.6 523.9 651.000 507.7Q637.2 481.8 623.3 455.4Q612.000 434.000 599.9 410.8Q596.1 403.8 592.5 397.000A0.4 0.4 -57.1 0 0 591.7 397.1 M573.1 471.2A0.4 0.4 0 0 0 572.5 471.3Q566.3 483.3 561.3 491.7C560.3 493.4 559.1 494.7 558.1 496.000A2.8 2.8 0 0 0 558.000 499.000Q576.2 532.2 586.7 552.7Q591.2 561.4 593.9 566.2Q598.6 574.6 609.000 594.7Q618.7 613.4 624.000 623.4Q630.6 635.7 646.7 668.1Q655.5 685.8 667.2 698.9Q687.9 722.1 718.8 727.5A0.4 0.4 0 0 0 719.1 726.8Q711.9 720.8 704.4 712.5Q698.9 706.5 693.6 698.2Q685.8 685.9 684.2 682.8Q674.6 664.6 666.8 649.5Q614.4 548.1 576.9 477.7Q574.8 473.8 573.1 471.2 M667.5 728.3A0.3 0.3 0 0 0 667.7 727.7Q663.2 724.7 658.3 720.4Q653.6 716.1 650.000 711.9C634.2 693.5 625.2 674.4 613.4 650.7Q608.8 641.6 602.2 629.1C593.8 613.4 586.3 598.2 580.5 587.2C571.2 569.5 558.3 546.000 550.7 530.6Q547.6 524.3 543.3 517.4A0.9 0.9 0 0 0 541.9 517.3C535.1 524.7 530.2 530.1 523.8 535.2A0.8 0.7 59.4 0 0 523.6 536.1Q525.000 539.6 525.2 539.8C529.3 547.2 533.000 554.7 536.6 561.2Q546.6 579.1 554.6 595.3Q561.7 609.9 569.1 622.8Q575.4 634.1 585.9 655.000C591.9 667.1 598.4 678.7 605.5 690.5Q610.6 698.8 616.3 705.5C628.8 720.000 648.6 727.7 667.5 728.3" fill-rule="evenodd" stroke="none"/>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 799.31 752.14"
+    fill="currentColor"
+  >
+    <path
+      d="M569.100 368.700Q569.900 371.900 570.200 378.100Q571.100 396.300 568.300 413.400C565.100 433.000 558.700 452.800 548.800 470.200Q542.500 481.100 539.100 486.100Q527.900 502.600 513.100 516.300Q499.300 529.000 480.800 539.600C463.100 549.800 445.200 557.800 425.700 563.800Q410.400 568.400 405.600 569.500C390.300 573.100 370.600 576.200 352.900 580.400Q338.100 584.000 330.500 586.200C306.900 592.900 283.100 604.600 264.000 618.500C248.800 629.500 235.500 643.500 223.600 658.300Q212.700 671.900 203.500 690.300Q191.400 714.300 188.700 720.800Q184.400 731.100 176.500 750.800A0.600 0.600 0 0 0 177.000 751.600L198.800 751.600A2.400 2.400 9.8 0 0 201.100 750.000C210.500 723.800 222.200 698.700 238.300 676.100Q250.400 659.200 263.000 647.800Q283.300 629.300 308.900 617.200Q324.400 609.900 349.200 602.700Q357.300 600.400 381.000 596.000Q404.200 591.600 412.800 589.500Q425.100 586.400 443.400 580.300Q458.800 575.100 473.000 568.000Q491.000 559.000 505.500 549.500A0.400 0.300 62.9 0 1 506.100 549.600Q506.900 551.800 507.800 553.500Q515.800 569.100 546.000 626.000Q554.400 641.700 555.400 643.700Q562.300 657.300 564.600 661.500C569.700 670.600 573.900 679.800 578.900 688.500Q586.000 700.800 588.100 704.400C597.100 719.200 613.800 733.700 630.300 741.200Q634.300 743.100 646.000 746.700Q652.200 748.600 659.400 749.300Q671.600 750.600 673.100 750.600Q691.500 751.600 725.100 751.600Q751.900 751.600 794.900 751.400Q796.800 751.400 798.600 748.600A1.200 1.200 0 0 0 798.800 747.700Q797.900 744.400 795.800 740.200Q780.100 708.200 769.300 687.400Q766.700 682.500 765.700 680.600Q754.700 658.800 739.000 628.800C726.200 604.300 717.600 587.300 705.800 565.100Q701.200 556.400 691.100 536.900Q683.000 521.000 671.400 499.900C666.400 490.800 656.800 470.600 648.500 456.000C640.200 441.400 631.800 423.800 625.100 411.400Q616.100 395.000 609.600 382.100C600.700 364.400 591.200 347.100 581.800 329.000Q562.500 292.000 552.500 273.200C546.700 262.300 540.300 249.200 535.500 240.200Q520.300 211.500 506.000 183.800C495.700 163.800 483.600 141.800 473.700 122.500C466.700 108.900 458.500 94.200 451.900 81.300Q445.100 67.900 435.600 50.400Q426.400 33.500 414.700 10.400C412.000 5.100 408.600 0.600 402.500 0.500C397.900 0.400 394.300 2.900 392.100 6.900Q386.700 16.300 378.700 31.500Q360.600 65.900 349.200 86.700Q341.500 100.800 334.600 114.500Q331.300 121.200 319.900 142.200Q315.600 150.000 308.200 164.300Q305.300 169.900 296.500 186.300C285.400 206.800 274.800 227.400 264.900 245.700C251.400 270.800 237.100 298.400 225.100 320.900C216.600 336.800 207.700 354.700 199.400 370.000C186.800 393.100 175.400 415.600 161.900 440.600C155.200 453.000 145.300 472.900 137.100 487.600Q129.400 501.400 121.200 517.900Q116.500 527.300 85.500 585.600Q67.700 619.000 64.800 624.900C57.700 638.900 47.100 658.100 40.500 671.200Q25.700 700.300 11.600 727.600Q7.200 736.300 0.600 750.500A0.800 0.800 12.4 0 0 1.300 751.600L23.900 751.600A1.400 1.400 -77.4 0 0 25.200 750.800Q40.000 719.200 51.100 698.700Q52.000 697.100 67.600 667.200Q84.900 634.200 103.200 608.200Q123.000 580.200 152.700 554.100C157.700 549.700 163.500 545.700 169.200 541.200Q175.100 536.500 182.000 532.000Q222.200 505.400 266.800 491.800Q277.100 488.700 293.800 484.100Q302.500 481.800 309.400 480.600C334.800 476.000 358.000 471.700 381.400 465.400Q392.800 462.300 399.400 459.700Q415.400 453.400 432.400 444.600Q443.500 438.800 451.600 433.000C465.000 423.400 476.400 412.300 487.200 399.300C503.500 379.800 515.500 355.900 522.500 331.500A0.200 0.200 0 0 1 522.800 331.500Q523.200 332.700 522.900 334.400Q520.700 349.300 515.900 364.900Q511.000 380.600 503.900 393.800C486.600 425.800 457.300 453.500 424.000 470.000Q403.300 480.200 380.600 487.100Q369.500 490.500 350.900 494.200Q309.900 502.300 300.400 504.800C252.800 517.300 207.600 540.700 172.000 574.400Q160.300 585.400 155.000 590.800Q149.100 597.000 137.700 611.400C130.400 620.600 125.200 628.800 117.900 639.600Q111.300 649.300 104.800 661.500C88.800 691.300 74.600 719.700 60.400 750.600A0.700 0.700 0 0 0 61.000 751.600L84.000 751.600A1.000 0.900 14.4 0 0 84.800 751.100Q86.200 748.500 89.100 742.100Q100.600 716.900 117.200 684.500C124.600 669.900 132.800 656.100 141.500 643.000C152.500 626.600 165.000 612.000 176.200 600.200Q193.300 582.200 217.100 565.400Q233.500 553.800 253.000 544.500Q278.800 532.400 303.600 525.600Q312.900 523.000 334.800 518.900Q363.800 513.400 386.500 507.200Q419.800 498.200 450.700 479.200Q488.100 456.300 513.000 419.300C529.900 394.200 540.200 364.300 544.200 334.400Q544.700 331.100 544.600 319.700A0.200 0.200 0 0 1 544.900 319.500L545.300 319.500A0.100 0.100 0 0 1 545.400 319.600Q551.700 350.700 545.400 381.400C543.200 392.000 539.700 405.500 534.500 416.700Q528.300 430.000 527.300 431.600Q513.400 453.800 500.000 467.700C484.800 483.500 465.800 497.400 445.100 507.600Q431.900 514.200 428.300 515.600Q409.000 523.200 389.700 528.500C374.400 532.600 357.700 534.800 342.000 538.000Q331.300 540.200 312.200 545.400Q275.000 555.500 242.500 575.700Q223.600 587.400 208.200 601.800Q191.800 617.100 179.300 633.800Q159.000 661.000 140.900 698.900Q135.600 709.900 123.100 736.900C120.800 741.900 119.200 746.300 117.100 750.700A0.700 0.700 0 0 0 117.700 751.600L139.800 751.600A1.300 1.300 0 0 0 140.800 751.100Q142.100 749.500 142.500 748.400Q145.900 739.800 149.400 732.200Q157.900 714.000 168.200 693.400Q177.600 674.600 184.600 664.000Q194.700 648.700 204.700 636.900Q236.300 599.400 281.300 579.100C299.000 571.100 319.700 563.700 339.400 559.900C365.500 555.000 389.900 550.700 413.500 543.300C437.400 535.800 461.000 525.000 481.700 510.600C492.400 503.200 503.000 495.400 511.400 486.900C523.200 475.000 535.100 460.500 543.600 445.400Q549.300 435.300 551.100 431.600Q563.200 406.600 567.400 378.500Q568.600 370.400 568.900 368.700A0.100 0.100 0 0 1 569.100 368.700 M507.900 291.500C509.300 280.500 508.500 268.100 507.4 257.8Q506.700 251.800 506.1 249.000C504.4 241.300 503.6 234.6 501.2 227.3Q496.5 213.100 493.5 207.3Q471.2 164.4 471.000 164.1C462.2 146.8 452.1 129.7 443.4 112.1C439.9 104.9 432.6 90.9 426.8 80.8C422.6 73.5 419.4 66.2 415.2 58.5Q409.1 47.7 409.000 47.5C408.1 45.5 407.7 44.1 407.000 42.6A0.3 0.3 0 0 0 406.4 42.7Q400.6 75.2 412.000 106.2Q418.5 124.000 423.1 132.3Q438.5 160.2 446.9 176.9C455.6 194.000 465.9 212.000 473.9 228.000C481.2 242.4 491.1 259.4 498.3 274.2Q502.7 283.5 507.3 291.6A0.3 0.3 0 0 0 507.9 291.5 M383.5 78.7C380.9 85.5 379.9 91.9 378.5 100.000C373.8 127.5 381.000 155.2 393.9 179.1Q399.2 188.9 412.3 214.000C425.3 238.8 431.4 249.5 443.7 273.000Q449.2 283.4 457.1 297.9Q469.000 319.7 470.5 322.8Q479.6 340.9 486.8 353.5Q487.5 354.7 488.5 357.4A0.4 0.4 0 0 0 489.3 357.4Q496.1 343.9 501.6 329.1A2.1 2.1 52.5 0 0 501.8 328.2Q501.5 325.4 500.7 323.9Q491.2 306.4 483.2 291.000Q464.9 256.2 450.8 229.8Q449.8 228.000 446.4 221.8C434.2 199.1 422.000 175.6 409.9 153.7C399.1 134.2 389.8 115.5 386.5 95.9Q385.3 89.4 383.9 78.8A0.2 0.2 0 0 0 383.5 78.7 M355.6 127.9Q345.3 163.000 354.6 199.5Q359.9 220.2 370.9 241.4Q389.6 277.3 422.000 337.3Q441.1 372.8 452.7 395.000Q453.6 396.8 456.5 400.7A0.5 0.5 0 0 0 457.2 400.7C463.9 393.9 470.6 387.000 475.6 379.6A1.1 1.1 54.1 0 0 475.8 378.6Q475.5 377.7 473.6 374.2Q458.6 346.9 451.6 333.5C434.000 299.9 414.9 265.000 397.1 231.4Q388.000 214.000 372.1 183.9Q358.3 157.7 356.2 128.000A0.3 0.3 0 0 0 355.6 127.9 M133.7 541.9A0.5 0.5 0 0 0 134.4 542.4C145.4 532.3 157.3 522.5 170.3 514.4Q173.9 512.2 184.8 504.9A6.7 6.5 -88.8 0 0 186.6 503.2Q189.1 499.7 191.4 495.1Q202.2 474.1 212.9 453.8C217.3 445.5 220.6 439.9 223.6 433.9Q227.7 425.4 231.2 418.7Q239.2 403.3 241.8 398.5C252.1 379.6 261.8 360.1 273.6 338.4Q280.000 326.5 288.3 310.6C297.5 292.9 308.2 273.7 318.1 254.3C324.1 242.6 331.000 230.6 336.8 219.4A2.8 2.8 -39.3 0 0 337.000 217.4Q331.000 196.2 328.8 172.9A0.4 0.4 0 0 0 328.000 172.8Q326.9 174.9 326.7 175.3Q321.2 185.4 309.4 208.2Q303.9 218.9 300.3 225.6C290.1 244.5 281.4 261.4 268.4 285.6Q257.4 306.2 245.7 328.4Q203.6 407.9 187.3 438.4C185.000 442.9 183.000 447.3 180.4 452.1Q159.9 490.000 139.5 530.3C137.6 534.1 134.5 537.5 133.7 541.9 M348.3 244.7A0.3 0.3 0 0 0 347.7 244.7L220.2 485.5A0.3 0.3 0 0 0 220.6 486.000L256.4 472.1A0.3 0.3 0 0 0 256.6 471.9L362.5 271.9A0.3 0.3 0 0 0 362.5 271.5L348.3 244.7 M374.8 295.8A0.3 0.3 0 0 0 374.2 295.9L285.3 463.8A0.3 0.3 0 0 0 285.6 464.3L319.7 457.000A0.3 0.3 0 0 0 320.000 456.8L390.2 324.1A0.3 0.3 0 0 0 390.2 323.8L374.8 295.8 M401.7 347.4Q393.7 363.6 389.3 371.6C378.000 392.3 364.8 418.2 356.8 433.1Q350.8 444.3 346.8 451.000A0.4 0.4 -79.4 0 0 347.2 451.6Q363.000 449.000 377.8 444.6Q410.1 434.9 438.8 416.4A1.3 1.3 -34.8 0 0 439.1 414.5Q437.2 411.9 436.000 409.7Q422.3 383.5 402.4 347.4A0.4 0.4 44 0 0 401.7 347.4 M591.7 397.1Q590.1 421.4 584.1 443.000A4.9 4.9 38.7 0 0 584.5 446.6Q604.000 482.7 615.1 503.8C619.2 511.6 622.6 517.4 626.000 524.4Q629.4 531.3 633.9 539.9C639.7 550.9 642.4 556.5 647.4 565.1Q650.9 571.1 658.000 585.6C665.2 600.2 679.2 625.2 688.2 643.5C697.000 661.3 704.000 675.2 714.2 689.8Q723.6 703.1 732.000 710.1Q746.6 722.4 764.6 728.000Q764.8 728.000 765.1 727.9A0.5 0.5 -31.1 0 0 765.3 727.2Q758.7 716.1 751.5 701.3Q744.6 687.1 738.1 675.000C728.5 657.2 719.8 639.3 710.6 622.1Q701.3 604.6 690.4 583.000C682.9 568.3 675.1 554.1 667.8 540.000Q659.6 523.9 651.000 507.7Q637.2 481.8 623.3 455.4Q612.000 434.000 599.9 410.8Q596.1 403.8 592.5 397.000A0.4 0.4 -57.1 0 0 591.7 397.1 M573.1 471.2A0.4 0.4 0 0 0 572.5 471.3Q566.3 483.3 561.3 491.7C560.3 493.4 559.1 494.7 558.1 496.000A2.8 2.8 0 0 0 558.000 499.000Q576.2 532.2 586.7 552.7Q591.2 561.4 593.9 566.2Q598.6 574.6 609.000 594.7Q618.7 613.4 624.000 623.4Q630.6 635.7 646.7 668.1Q655.5 685.8 667.2 698.9Q687.9 722.1 718.8 727.5A0.4 0.4 0 0 0 719.1 726.8Q711.9 720.8 704.4 712.5Q698.9 706.5 693.6 698.2Q685.8 685.9 684.2 682.8Q674.6 664.6 666.8 649.5Q614.4 548.1 576.9 477.7Q574.8 473.8 573.1 471.2 M667.5 728.3A0.3 0.3 0 0 0 667.7 727.7Q663.2 724.7 658.3 720.4Q653.6 716.1 650.000 711.9C634.2 693.5 625.2 674.4 613.4 650.7Q608.8 641.6 602.2 629.1C593.8 613.4 586.3 598.2 580.5 587.2C571.2 569.5 558.3 546.000 550.7 530.6Q547.6 524.3 543.3 517.4A0.9 0.9 0 0 0 541.9 517.3C535.1 524.7 530.2 530.1 523.8 535.2A0.8 0.7 59.4 0 0 523.6 536.1Q525.000 539.6 525.2 539.8C529.3 547.2 533.000 554.7 536.6 561.2Q546.6 579.1 554.6 595.3Q561.7 609.9 569.1 622.8Q575.4 634.1 585.9 655.000C591.9 667.1 598.4 678.7 605.5 690.5Q610.6 698.8 616.3 705.5C628.8 720.000 648.6 727.7 667.5 728.3"
+      fill-rule="evenodd"
+      stroke="none"
+    />
   </svg>
 </template>
diff --git a/frontend/src/components/layout/AppShell.vue b/frontend/src/components/layout/AppShell.vue
index d8985ba..4227bd5 100644
--- a/frontend/src/components/layout/AppShell.vue
+++ b/frontend/src/components/layout/AppShell.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="app-shell" :class="{ 'pt-24': showNotice }">
+  <div
+    class="app-shell"
+    :class="{ 'pt-24': showNotice }"
+  >
     <div
       v-if="showNotice"
       class="fixed top-6 left-0 right-0 z-50 flex justify-center px-4"
@@ -8,8 +11,8 @@
     </div>
 
     <div class="app-shell__backdrop">
-      <div class="app-shell__gradient app-shell__gradient--primary"></div>
-      <div class="app-shell__gradient app-shell__gradient--accent"></div>
+      <div class="app-shell__gradient app-shell__gradient--primary" />
+      <div class="app-shell__gradient app-shell__gradient--accent" />
     </div>
 
     <div class="app-shell__body">
@@ -21,7 +24,10 @@
         <slot name="sidebar" />
       </aside>
 
-      <div class="app-shell__content" :class="contentClass">
+      <div
+        class="app-shell__content"
+        :class="contentClass"
+      >
         <slot name="header" />
         <main :class="mainClass">
           <slot />
diff --git a/frontend/src/components/layout/CardSection.vue b/frontend/src/components/layout/CardSection.vue
index 1875725..9d7de46 100644
--- a/frontend/src/components/layout/CardSection.vue
+++ b/frontend/src/components/layout/CardSection.vue
@@ -1,13 +1,22 @@
 <template>
   <Card :class="cardClasses">
-    <div v-if="title || description || $slots.header" :class="headerClasses">
+    <div
+      v-if="title || description || $slots.header"
+      :class="headerClasses"
+    >
       <slot name="header">
         <div class="flex items-center justify-between">
           <div>
-            <h3 v-if="title" class="text-lg font-medium leading-6 text-foreground">
+            <h3
+              v-if="title"
+              class="text-lg font-medium leading-6 text-foreground"
+            >
               {{ title }}
             </h3>
-            <p v-if="description" class="mt-1 text-sm text-muted-foreground">
+            <p
+              v-if="description"
+              class="mt-1 text-sm text-muted-foreground"
+            >
               {{ description }}
             </p>
           </div>
@@ -22,7 +31,10 @@
       <slot />
     </div>
 
-    <div v-if="$slots.footer" :class="footerClasses">
+    <div
+      v-if="$slots.footer"
+      :class="footerClasses"
+    >
       <slot name="footer" />
     </div>
   </Card>
diff --git a/frontend/src/components/layout/MobileNav.vue b/frontend/src/components/layout/MobileNav.vue
index 5dcae4c..efe7e8e 100644
--- a/frontend/src/components/layout/MobileNav.vue
+++ b/frontend/src/components/layout/MobileNav.vue
@@ -4,7 +4,11 @@
       <!-- Logo头部 - 移动端优化 -->
       <div class="flex items-center gap-3 rounded-2xl bg-card/90 px-4 py-3 shadow-lg shadow-primary/20 ring-1 ring-border backdrop-blur">
         <div class="flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-2xl bg-background shadow-md shadow-primary/20 flex-shrink-0">
-          <img src="/aether_adaptive.svg" alt="Logo" class="h-8 w-8 sm:h-10 sm:w-10" />
+          <img
+            src="/aether_adaptive.svg"
+            alt="Logo"
+            class="h-8 w-8 sm:h-10 sm:w-10"
+          >
         </div>
         <!-- 文字部分 - 小屏隐藏 -->
         <div class="hidden sm:block">
diff --git a/frontend/src/components/layout/PageHeader.vue b/frontend/src/components/layout/PageHeader.vue
index f514e41..3534447 100644
--- a/frontend/src/components/layout/PageHeader.vue
+++ b/frontend/src/components/layout/PageHeader.vue
@@ -3,8 +3,14 @@
     <div class="flex-1">
       <div class="flex items-center gap-3">
         <slot name="icon">
-          <div v-if="icon" class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10">
-            <component :is="icon" class="h-5 w-5 text-primary" />
+          <div
+            v-if="icon"
+            class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10"
+          >
+            <component
+              :is="icon"
+              class="h-5 w-5 text-primary"
+            />
           </div>
         </slot>
 
@@ -12,14 +18,20 @@
           <h1 class="text-2xl font-semibold text-foreground sm:text-3xl">
             {{ title }}
           </h1>
-          <p v-if="description" class="mt-1 text-sm text-muted-foreground">
+          <p
+            v-if="description"
+            class="mt-1 text-sm text-muted-foreground"
+          >
             {{ description }}
           </p>
         </div>
       </div>
     </div>
 
-    <div v-if="$slots.actions" class="flex items-center gap-2">
+    <div
+      v-if="$slots.actions"
+      class="flex items-center gap-2"
+    >
       <slot name="actions" />
     </div>
   </div>
diff --git a/frontend/src/components/layout/Section.vue b/frontend/src/components/layout/Section.vue
index 43f8431..751c733 100644
--- a/frontend/src/components/layout/Section.vue
+++ b/frontend/src/components/layout/Section.vue
@@ -1,13 +1,22 @@
 <template>
   <section :class="sectionClasses">
-    <div v-if="title || description || $slots.header" class="mb-6">
+    <div
+      v-if="title || description || $slots.header"
+      class="mb-6"
+    >
       <slot name="header">
         <div class="flex items-center justify-between">
           <div>
-            <h2 v-if="title" class="text-lg font-medium text-foreground">
+            <h2
+              v-if="title"
+              class="text-lg font-medium text-foreground"
+            >
               {{ title }}
             </h2>
-            <p v-if="description" class="mt-1 text-sm text-muted-foreground">
+            <p
+              v-if="description"
+              class="mt-1 text-sm text-muted-foreground"
+            >
               {{ description }}
             </p>
           </div>
diff --git a/frontend/src/components/layout/SidebarNav.vue b/frontend/src/components/layout/SidebarNav.vue
index ab8c69a..b05e839 100644
--- a/frontend/src/components/layout/SidebarNav.vue
+++ b/frontend/src/components/layout/SidebarNav.vue
@@ -1,16 +1,26 @@
 <template>
   <nav class="sidebar-nav w-full px-3">
-    <div v-for="(group, index) in items" :key="index" class="space-y-1 mb-5">
-
+    <div
+      v-for="(group, index) in items"
+      :key="index"
+      class="space-y-1 mb-5"
+    >
       <!-- Section Header -->
-      <div v-if="group.title" class="px-2.5 pb-1 flex items-center gap-2" :class="index > 0 ? 'pt-1' : ''">
+      <div
+        v-if="group.title"
+        class="px-2.5 pb-1 flex items-center gap-2"
+        :class="index > 0 ? 'pt-1' : ''"
+      >
         <span class="text-[10px] font-medium text-muted-foreground/50 font-mono tabular-nums">{{ String(index + 1).padStart(2, '0') }}</span>
         <span class="text-[10px] font-semibold text-muted-foreground/70 uppercase tracking-[0.1em]">{{ group.title }}</span>
       </div>
 
       <!-- Links -->
       <div class="space-y-0.5">
-        <template v-for="item in group.items" :key="item.href">
+        <template
+          v-for="item in group.items"
+          :key="item.href"
+        >
           <RouterLink
             :to="item.href"
             class="group relative flex items-center justify-between px-2.5 py-2 rounded-lg transition-all duration-200"
@@ -35,7 +45,7 @@
             <div
               v-if="isItemActive(item.href)"
               class="w-1 h-1 rounded-full bg-primary"
-            ></div>
+            />
           </RouterLink>
         </template>
       </div>
diff --git a/frontend/src/components/stats/ActivityHeatmap.vue b/frontend/src/components/stats/ActivityHeatmap.vue
index ee1a048..b5553d7 100644
--- a/frontend/src/components/stats/ActivityHeatmap.vue
+++ b/frontend/src/components/stats/ActivityHeatmap.vue
@@ -1,46 +1,100 @@
 <template>
   <div class="space-y-4 w-full overflow-visible">
-    <div v-if="showHeader" class="flex items-center justify-between gap-4">
+    <div
+      v-if="showHeader"
+      class="flex items-center justify-between gap-4"
+    >
       <div class="flex-shrink-0">
-        <p class="text-sm font-semibold">{{ title }}</p>
-        <p v-if="subtitle" class="text-xs text-muted-foreground">{{ subtitle }}</p>
+        <p class="text-sm font-semibold">
+          {{ title }}
+        </p>
+        <p
+          v-if="subtitle"
+          class="text-xs text-muted-foreground"
+        >
+          {{ subtitle }}
+        </p>
       </div>
-      <div v-if="weekColumns.length > 0" class="flex items-center gap-1 text-[11px] text-muted-foreground flex-shrink-0">
+      <div
+        v-if="weekColumns.length > 0"
+        class="flex items-center gap-1 text-[11px] text-muted-foreground flex-shrink-0"
+      >
         <span class="flex-shrink-0">少</span>
         <div
           v-for="(level, index) in legendLevels"
           :key="index"
           class="w-3 h-3 rounded-[3px] flex-shrink-0"
           :style="getLegendStyle(level)"
-        ></div>
+        />
         <span class="flex-shrink-0">多</span>
       </div>
     </div>
 
-    <div v-if="weekColumns.length > 0" class="flex w-full gap-3 overflow-visible">
-      <div class="flex flex-col text-[10px] text-muted-foreground flex-shrink-0" :style="verticalGapStyle">
+    <div
+      v-if="weekColumns.length > 0"
+      class="flex w-full gap-3 overflow-visible"
+    >
+      <div
+        class="flex flex-col text-[10px] text-muted-foreground flex-shrink-0"
+        :style="verticalGapStyle"
+      >
         <!-- Placeholder to align with month markers -->
-        <div class="text-[10px] mb-3 invisible">M</div>
-        <span :style="dayLabelStyle" class="flex items-center invisible">周日</span>
-        <span :style="dayLabelStyle" class="flex items-center">一</span>
-        <span :style="dayLabelStyle" class="flex items-center invisible">周二</span>
-        <span :style="dayLabelStyle" class="flex items-center">三</span>
-        <span :style="dayLabelStyle" class="flex items-center invisible">周四</span>
-        <span :style="dayLabelStyle" class="flex items-center">五</span>
-        <span :style="dayLabelStyle" class="flex items-center invisible">周六</span>
+        <div class="text-[10px] mb-3 invisible">
+          M
+        </div>
+        <span
+          :style="dayLabelStyle"
+          class="flex items-center invisible"
+        >周日</span>
+        <span
+          :style="dayLabelStyle"
+          class="flex items-center"
+        >一</span>
+        <span
+          :style="dayLabelStyle"
+          class="flex items-center invisible"
+        >周二</span>
+        <span
+          :style="dayLabelStyle"
+          class="flex items-center"
+        >三</span>
+        <span
+          :style="dayLabelStyle"
+          class="flex items-center invisible"
+        >周四</span>
+        <span
+          :style="dayLabelStyle"
+          class="flex items-center"
+        >五</span>
+        <span
+          :style="dayLabelStyle"
+          class="flex items-center invisible"
+        >周六</span>
       </div>
       <div class="flex-1 min-w-[240px] overflow-visible">
-        <div ref="heatmapWrapper" class="relative block w-full">
+        <div
+          ref="heatmapWrapper"
+          class="relative block w-full"
+        >
           <div
             v-if="tooltip.visible && tooltip.day"
             class="fixed z-10 rounded-lg border border-border/70 bg-background px-3 py-2 text-xs shadow-lg backdrop-blur pointer-events-none"
             :style="tooltipStyle"
           >
-            <p class="font-medium">{{ tooltip.day.date }}</p>
-            <p class="mt-0.5">{{ tooltip.day.requests }} 次请求 · {{ formatTokens(tooltip.day.total_tokens) }}</p>
-            <p class="text-[11px] text-muted-foreground">成本 {{ formatCurrency(tooltip.day.total_cost) }}</p>
+            <p class="font-medium">
+              {{ tooltip.day.date }}
+            </p>
+            <p class="mt-0.5">
+              {{ tooltip.day.requests }} 次请求 · {{ formatTokens(tooltip.day.total_tokens) }}
+            </p>
+            <p class="text-[11px] text-muted-foreground">
+              成本 {{ formatCurrency(tooltip.day.total_cost) }}
+            </p>
           </div>
-          <div class="flex text-[10px] text-muted-foreground/80 mb-3" :style="horizontalGapStyle">
+          <div
+            class="flex text-[10px] text-muted-foreground/80 mb-3"
+            :style="horizontalGapStyle"
+          >
             <div
               v-for="(week, weekIndex) in weekColumns"
               :key="`month-${weekIndex}`"
@@ -50,9 +104,21 @@
               <span v-if="monthMarkers[weekIndex]">{{ monthMarkers[weekIndex] }}</span>
             </div>
           </div>
-          <div class="flex" :style="horizontalGapStyle">
-            <div v-for="(week, weekIndex) in weekColumns" :key="weekIndex" class="flex flex-col" :style="verticalGapStyle">
-              <div v-for="(day, dayIndex) in week" :key="dayIndex" class="relative group">
+          <div
+            class="flex"
+            :style="horizontalGapStyle"
+          >
+            <div
+              v-for="(week, weekIndex) in weekColumns"
+              :key="weekIndex"
+              class="flex flex-col"
+              :style="verticalGapStyle"
+            >
+              <div
+                v-for="(day, dayIndex) in week"
+                :key="dayIndex"
+                class="relative group"
+              >
                 <div
                   v-if="day"
                   class="rounded-[4px] transition-all duration-200 hover:shadow-lg cursor-pointer cell-emerge"
@@ -60,15 +126,24 @@
                   :title="buildTooltip(day)"
                   @mouseenter="handleHover(day, $event)"
                   @mouseleave="clearHover"
-                ></div>
-                <div v-else :style="cellSquareStyle" class="rounded-[4px] bg-transparent"></div>
+                />
+                <div
+                  v-else
+                  :style="cellSquareStyle"
+                  class="rounded-[4px] bg-transparent"
+                />
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <p v-else class="text-xs text-muted-foreground">暂无活跃数据</p>
+    <p
+      v-else
+      class="text-xs text-muted-foreground"
+    >
+      暂无活跃数据
+    </p>
   </div>
 </template>