@jcjeon/integration-cli 0.2.0

package/apps/web/src/app/codex/page.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect } from "react";
+
+import { useCodexAuth } from "@/features/auth/hooks/useCodexAuth";
+import { CodexLoginPanel } from "@/features/auth/ui/CodexLoginPanel";
+import { ThemeToggle } from "@/lib/theme";
+
+const OPENAI_LOGO = (
+  <svg viewBox="0 0 24 24" fill="currentColor" className="h-7 w-7 text-gray-900/80 dark:text-white/80" aria-hidden="true">
+    <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z" />
+  </svg>
+);
+
+function CheckingSkeleton() {
+  return (
+    <div className="flex h-screen flex-col bg-[#faf8f5] dark:bg-[#07090e]">
+      <div className="flex items-center gap-2 border-b border-gray-900/[0.07] px-4 py-3 dark:border-white/[0.07]">
+        <div className="h-3.5 w-3.5 rounded bg-gray-900/[0.07] dark:bg-white/[0.07]" />
+        <div className="h-[14px] w-20 rounded bg-gray-900/[0.07] dark:bg-white/[0.07]" />
+      </div>
+      <div className="flex flex-1 flex-col items-center justify-center gap-3">
+        <span className="h-6 w-6 animate-spin rounded-full border-2 border-gray-900/[0.08] border-t-gray-900/60 dark:border-white/[0.08] dark:border-t-white/60" />
+        <span className="text-xs text-gray-900/20 dark:text-white/20">인증 확인 중…</span>
+      </div>
+    </div>
+  );
+}
+
+function NotInstalledView() {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-6 px-6">
+      <div className="flex flex-col items-center gap-3 text-center">
+        <div className="flex h-16 w-16 items-center justify-center rounded-2xl border border-gray-900/[0.08] bg-gray-900/[0.04] dark:border-white/[0.08] dark:bg-white/[0.04]">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="h-8 w-8 text-gray-900/30 dark:text-white/30">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+          </svg>
+        </div>
+        <h2 className="text-xl font-semibold text-gray-900/90 dark:text-white/90">Codex CLI가 설치되어 있지 않습니다</h2>
+        <p className="max-w-sm text-sm text-gray-900/40 dark:text-white/40">
+          먼저 CLI 도구를 설치해 주세요.
+        </p>
+        <code className="mt-1 rounded-lg border border-gray-900/[0.08] bg-gray-900/[0.03] px-4 py-2 font-mono text-sm text-gray-900/55 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-white/55">
+          jccli init
+        </code>
+      </div>
+    </div>
+  );
+}
+
+function AuthenticatedView() {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-4">
+      <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        <div className="absolute left-1/2 top-1/2 h-[500px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-900/[0.03] blur-[120px] dark:bg-white/[0.03]" />
+      </div>
+      <div className="relative flex h-14 w-14 items-center justify-center rounded-2xl border border-gray-900/[0.08] bg-gray-900/[0.04] dark:border-white/[0.08] dark:bg-white/[0.04]">
+        {OPENAI_LOGO}
+      </div>
+      <div className="relative text-center">
+        <p className="font-semibold text-gray-900/75 dark:text-white/75">Codex CLI</p>
+        <p className="mt-1 text-sm text-gray-900/30 dark:text-white/30">로그인되었습니다. 채팅 기능은 준비 중입니다.</p>
+      </div>
+    </div>
+  );
+}
+
+export default function CodexPage() {
+  const {
+    authState,
+    loginMethod,
+    setLoginMethod,
+    loginState,
+    loginOutput,
+    loginUrls,
+    deviceCode,
+    startDeviceLogin,
+    cancelDeviceLogin,
+    apiKeyLoginState,
+    configError,
+    saveApiKey,
+    checkAuth,
+  } = useCodexAuth();
+
+  useEffect(() => {
+    if (loginState === "done" || apiKeyLoginState === "done") void checkAuth();
+  }, [loginState, apiKeyLoginState, checkAuth]);
+
+  const pageHeader = (
+    <header className="flex items-center gap-2 border-b border-gray-900/[0.07] px-4 py-3 dark:border-white/[0.07]">
+      <Link href="/" className="text-gray-900/30 transition-colors hover:text-gray-900/60 dark:text-white/30 dark:hover:text-white/60">
+        ←
+      </Link>
+      <span className="text-sm font-semibold text-gray-900/80 dark:text-white/80">Codex CLI</span>
+      <div className="ml-auto">
+        <ThemeToggle />
+      </div>
+    </header>
+  );
+
+  if (authState === "checking") return <CheckingSkeleton />;
+
+  return (
+    <div className="flex h-screen flex-col bg-[#faf8f5] text-gray-900 dark:bg-[#07090e] dark:text-white">
+      {pageHeader}
+      {authState === "not-installed" && <NotInstalledView />}
+      {authState === "unauthenticated" && (
+        <CodexLoginPanel
+          loginMethod={loginMethod}
+          onMethodChange={setLoginMethod}
+          loginState={loginState}
+          loginOutput={loginOutput}
+          loginUrls={loginUrls}
+          deviceCode={deviceCode}
+          onStartDeviceLogin={startDeviceLogin}
+          onCancelDeviceLogin={cancelDeviceLogin}
+          apiKeyLoginState={apiKeyLoginState}
+          configError={configError}
+          onSaveApiKey={saveApiKey}
+        />
+      )}
+      {authState === "authenticated" && <AuthenticatedView />}
+    </div>
+  );
+}

package/apps/web/src/app/gemini/page.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect } from "react";
+
+import { useGeminiAuth } from "@/features/auth/hooks/useGeminiAuth";
+import { GeminiLoginPanel } from "@/features/auth/ui/GeminiLoginPanel";
+import { ThemeToggle } from "@/lib/theme";
+
+// ─── Checking Skeleton ────────────────────────────────────────────────────────
+
+function CheckingSkeleton() {
+  return (
+    <div className="flex h-screen flex-col bg-[#faf8f5] dark:bg-[#07090e]">
+      <div className="flex items-center gap-2 border-b border-gray-900/[0.07] px-4 py-3 dark:border-white/[0.07]">
+        <div className="h-3.5 w-3.5 rounded bg-gray-900/[0.07] dark:bg-white/[0.07]" />
+        <div className="h-[14px] w-20 rounded bg-gray-900/[0.07] dark:bg-white/[0.07]" />
+      </div>
+      <div className="flex flex-1 flex-col items-center justify-center gap-3">
+        <span className="h-6 w-6 animate-spin rounded-full border-2 border-gray-900/[0.08] border-t-blue-500 dark:border-white/[0.08]" />
+        <span className="text-xs text-gray-900/20 dark:text-white/20">인증 확인 중…</span>
+      </div>
+    </div>
+  );
+}
+
+// ─── Not Installed ────────────────────────────────────────────────────────────
+
+function NotInstalledView() {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-6 px-6">
+      <div className="flex flex-col items-center gap-3 text-center">
+        <div className="flex h-16 w-16 items-center justify-center rounded-2xl border border-gray-900/[0.08] bg-gray-900/[0.04] dark:border-white/[0.08] dark:bg-white/[0.04]">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="h-8 w-8 text-gray-900/30 dark:text-white/30">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+          </svg>
+        </div>
+        <h2 className="text-xl font-semibold text-gray-900/90 dark:text-white/90">Gemini CLI가 설치되어 있지 않습니다</h2>
+        <p className="max-w-sm text-sm text-gray-900/40 dark:text-white/40">
+          먼저 CLI 도구를 설치해 주세요.
+        </p>
+        <code className="mt-1 rounded-lg border border-gray-900/[0.08] bg-gray-900/[0.03] px-4 py-2 font-mono text-sm text-gray-900/55 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-white/55">
+          jccli init
+        </code>
+      </div>
+    </div>
+  );
+}
+
+// ─── Authenticated View ───────────────────────────────────────────────────────
+
+function AuthenticatedView() {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-4">
+      <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        <div className="absolute left-1/2 top-1/2 h-[500px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-500/[0.04] blur-[120px]" />
+      </div>
+      <div className="relative flex h-14 w-14 items-center justify-center rounded-2xl border border-gray-900/[0.08] bg-blue-500/[0.08] dark:border-white/[0.08]">
+        <svg viewBox="0 0 24 24" className="h-7 w-7" aria-hidden="true">
+          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+          <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+          <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+          <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+        </svg>
+      </div>
+      <div className="relative text-center">
+        <p className="font-semibold text-gray-900/75 dark:text-white/75">Gemini CLI</p>
+        <p className="mt-1 text-sm text-gray-900/30 dark:text-white/30">로그인되었습니다. 채팅 기능은 준비 중입니다.</p>
+      </div>
+    </div>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function GeminiPage() {
+  const {
+    authState,
+    loginState,
+    loginOutput,
+    loginUrls,
+    configError,
+    saveApiKey,
+    startGcaLogin,
+    cancelLogin,
+    resetLogin,
+    checkAuth,
+  } = useGeminiAuth();
+
+  useEffect(() => {
+    if (loginState === "done") void checkAuth();
+  }, [loginState, checkAuth]);
+
+  const pageHeader = (
+    <header className="flex items-center gap-2 border-b border-gray-900/[0.07] px-4 py-3 dark:border-white/[0.07]">
+      <Link href="/" className="text-gray-900/30 transition-colors hover:text-gray-900/60 dark:text-white/30 dark:hover:text-white/60">
+        ←
+      </Link>
+      <span className="text-sm font-semibold text-gray-900/80 dark:text-white/80">Gemini CLI</span>
+      <div className="ml-auto">
+        <ThemeToggle />
+      </div>
+    </header>
+  );
+
+  if (authState === "checking") return <CheckingSkeleton />;
+
+  return (
+    <div className="flex h-screen flex-col bg-[#faf8f5] text-gray-900 dark:bg-[#07090e] dark:text-white">
+      {pageHeader}
+
+      {authState === "not-installed" && <NotInstalledView />}
+
+      {authState === "unauthenticated" && (
+        <GeminiLoginPanel
+          loginState={loginState}
+          loginOutput={loginOutput}
+          loginUrls={loginUrls}
+          configError={configError}
+          onSaveApiKey={saveApiKey}
+          onStartGca={startGcaLogin}
+          onCancel={cancelLogin}
+          onReset={resetLogin}
+        />
+      )}
+
+      {authState === "authenticated" && <AuthenticatedView />}
+    </div>
+  );
+}

package/apps/web/src/app/globals.css

@@ -0,0 +1,149 @@
+@import "tailwindcss";
+@import "highlight.js/styles/github.css";
+
+/* ── Dark mode: class strategy ──────────────────────────────── */
+@variant dark (&:where(.dark, .dark *));
+
+/* ── Design tokens ──────────────────────────────────────────── */
+:root {
+  --background: #faf8f5;
+  --foreground: rgba(15, 17, 23, 0.87);
+
+  /* heading gradient */
+  --heading-gradient: linear-gradient(
+    160deg,
+    rgba(15, 17, 23, 0.92) 0%,
+    rgba(15, 17, 23, 0.52) 100%
+  );
+
+  /* dot grid */
+  --dot-color: rgba(0, 0, 0, 0.08);
+}
+
+.dark {
+  --background: #07090e;
+  --foreground: #ededed;
+
+  --heading-gradient: linear-gradient(
+    160deg,
+    rgba(255, 255, 255, 0.95) 0%,
+    rgba(255, 255, 255, 0.40) 100%
+  );
+
+  --dot-color: rgba(255, 255, 255, 0.07);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
+}
+
+/* ── Dark mode: override highlight.js ──────────────────────── */
+.dark .hljs                            { background: #0d1117; color: #e6edf3; }
+.dark .hljs-doctag,
+.dark .hljs-keyword,
+.dark .hljs-meta .hljs-keyword,
+.dark .hljs-template-tag,
+.dark .hljs-template-variable,
+.dark .hljs-type,
+.dark .hljs-variable.language_         { color: #ff7b72; }
+.dark .hljs-title,
+.dark .hljs-title.class_,
+.dark .hljs-title.class_.inherited__,
+.dark .hljs-title.function_            { color: #d2a8ff; }
+.dark .hljs-attr,
+.dark .hljs-attribute,
+.dark .hljs-literal,
+.dark .hljs-meta,
+.dark .hljs-number,
+.dark .hljs-operator,
+.dark .hljs-selector-attr,
+.dark .hljs-selector-class,
+.dark .hljs-selector-id,
+.dark .hljs-variable                   { color: #79c0ff; }
+.dark .hljs-string,
+.dark .hljs-meta .hljs-string          { color: #a5d6ff; }
+.dark .hljs-built_in,
+.dark .hljs-symbol                     { color: #ffa657; }
+.dark .hljs-comment,
+.dark .hljs-code,
+.dark .hljs-formula                    { color: #8b949e; }
+.dark .hljs-name,
+.dark .hljs-quote,
+.dark .hljs-selector-pseudo,
+.dark .hljs-selector-tag               { color: #7ee787; }
+.dark .hljs-subst                      { color: #c9d1d9; }
+.dark .hljs-section                    { color: #1f6feb; font-weight: bold; }
+.dark .hljs-bullet                     { color: #f2cc60; }
+.dark .hljs-emphasis                   { color: #c9d1d9; font-style: italic; }
+.dark .hljs-strong                     { color: #c9d1d9; font-weight: bold; }
+.dark .hljs-addition                   { color: #aff5b4; background: #033a16; }
+.dark .hljs-deletion                   { color: #ffdcd7; background: #67060c; }
+
+/* ── Animations ─────────────────────────────────────────────── */
+
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes toast-in {
+  from { opacity: 0; transform: translateX(calc(100% + 16px)); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes toast-out {
+  from { opacity: 1; transform: translateX(0); max-height: 100px; margin-bottom: 0; }
+  to   { opacity: 0; transform: translateX(calc(100% + 16px)); max-height: 0; margin-bottom: -8px; }
+}
+
+.animate-toast-in {
+  animation: toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.animate-toast-out {
+  animation: toast-out 0.2s ease-in forwards;
+}
+
+@keyframes shimmer {
+  from { background-position: 200% 0; }
+  to   { background-position: -200% 0; }
+}
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.35; }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.animate-shimmer-bg {
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.02) 0%,
+    rgba(0, 0, 0, 0.05) 40%,
+    rgba(0, 0, 0, 0.02) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 2s ease-in-out infinite;
+}
+
+.dark .animate-shimmer-bg {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.08) 40%,
+    rgba(255, 255, 255, 0.03) 100%
+  );
+  background-size: 200% 100%;
+}

package/apps/web/src/app/layout.tsx

@@ -0,0 +1,40 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { ThemeProvider } from "@/lib/theme";
+import { ToastProvider } from "@/lib/toast";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "ji-cli",
+  description: "하나의 플랫폼에서 모든 AI CLI를 제어합니다",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="flex min-h-full flex-col">
+        <ThemeProvider>
+          <ToastProvider>{children}</ToastProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/apps/web/src/app/login/page.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeToggle } from "@/lib/theme";
+import { LoginForm } from "@/features/auth/ui/LoginForm";
+
+// ─── Container ────────────────────────────────────────────────────────────────
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading] = useState(false);
+  const [error] = useState<string | null>(null);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // TODO: 로그인 로직 연결
+  };
+
+  const handleGuestLogin = () => {
+    // TODO: 게스트 로그인 로직 연결
+  };
+
+  return (
+    <div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-[#faf8f5] px-6 py-12 dark:bg-[#07090e]">
+      {/* Theme toggle */}
+      <div className="absolute right-4 top-4">
+        <ThemeToggle />
+      </div>
+
+      {/* Ambient background glows */}
+      <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        <div className="absolute left-1/2 top-[40%] h-[600px] w-[800px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500/[0.04] blur-[120px] dark:bg-orange-500/[0.035]" />
+        <div className="absolute -left-24 bottom-1/4 h-[350px] w-[450px] rounded-full bg-blue-600/[0.03] blur-[100px] dark:bg-blue-600/[0.025]" />
+        <div className="absolute -right-24 top-1/4 h-[300px] w-[400px] rounded-full bg-purple-600/[0.03] blur-[100px] dark:bg-purple-600/[0.025]" />
+      </div>
+
+      {/* Dot-grid pattern */}
+      <div
+        className="pointer-events-none absolute inset-0 opacity-60"
+        style={{
+          backgroundImage: "radial-gradient(circle, var(--dot-color) 1px, transparent 1px)",
+          backgroundSize: "28px 28px",
+          maskImage: "radial-gradient(ellipse 75% 65% at 50% 50%, black 30%, transparent 100%)",
+          WebkitMaskImage: "radial-gradient(ellipse 75% 65% at 50% 50%, black 30%, transparent 100%)",
+        }}
+      />
+
+      {/* Form */}
+      <div className="relative w-full flex justify-center">
+        <LoginForm
+          email={email}
+          password={password}
+          loading={loading}
+          error={error}
+          onEmailChange={setEmail}
+          onPasswordChange={setPassword}
+          onSubmit={handleSubmit}
+          onGuestLogin={handleGuestLogin}
+        />
+      </div>
+
+      {/* Bottom rule */}
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-gray-900/[0.05] to-transparent dark:via-white/[0.05]" />
+    </div>
+  );
+}