feat (v1.0.0): initial refactor and redesign

app/ai/usage/components/PageHeader.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import Link from 'next/link'
+import { SiClaude, SiOpenai } from 'react-icons/si'
+import { toolThemes, type ToolTheme, type ProviderId } from '@/app/ai/theme'
+
+interface PageHeaderProps {
+  selectedProvider?: ProviderId
+  theme: ToolTheme
+}
+
+export default function PageHeader({ selectedProvider = 'all', theme }: PageHeaderProps) {
+  const iconSize = 60
+
+  const renderIcons = (): React.JSX.Element => {
+    if (selectedProvider === 'claudeCode') {
+      return <SiClaude size={iconSize} style={{ color: theme.accent }} />
+    } else if (selectedProvider === 'codex') {
+      return (
+        <SiOpenai
+          size={iconSize}
+          style={{ color: theme.accent }}
+          className="drop-shadow-[0_0_12px_rgba(255,255,255,0.25)]"
+        />
+      )
+    } else {
+      return (
+        <div className="flex gap-4 justify-center">
+          <SiClaude size={iconSize} style={{ color: toolThemes.claudeCode.accent }} />
+          <SiOpenai
+            size={iconSize}
+            style={{ color: toolThemes.codex.accent }}
+            className="drop-shadow-[0_0_12px_rgba(255,255,255,0.25)]"
+          />
+        </div>
+      )
+    }
+  }
+
+  const getTitle = (): string => {
+    if (selectedProvider === 'claudeCode') return 'Claude Code Usage'
+    if (selectedProvider === 'codex') return 'Codex Usage'
+    return 'AI Usage'
+  }
+
+  const getSubtitle = (): string => {
+    if (selectedProvider === 'claudeCode') return 'Track my Claude Code usage'
+    if (selectedProvider === 'codex') return 'Track my Codex usage'
+    return 'Track my AI usage across providers'
+  }
+
+  return (
+    <div className="relative">
+      <div className="container mx-auto px-4 relative">
+        <Link
+          href="/ai"
+          className="absolute top-5 left-2 text-gray-400 hover:text-gray-200 hover:underline transition-colors duration-200 px-2 py-1 text-sm sm:text-base z-10"
+        >
+          ← Back to AI
+        </Link>
+        <div className="py-12 text-center">
+          <div className="flex justify-center mb-6">
+            {renderIcons()}
+          </div>
+          <h1 className="text-4xl font-bold mb-2 text-gray-100 glow">{getTitle()}</h1>
+          <p className="text-gray-400">{getSubtitle()}</p>
+          <div className="mx-auto mt-6 h-1 w-16 rounded-full" style={{ backgroundColor: theme.accent }} />
+        </div>
+      </div>
+    </div>
+  )
+}