From 7ff493a89a801ce2592434372040e1dcbf40306e Mon Sep 17 00:00:00 2001
From: Vectry <hunter@repi.fun>
Date: Tue, 10 Feb 2026 18:06:47 +0000
Subject: [PATCH] feat: add command palette, accessibility, scroll animations,
 and keyboard navigation

Implements COMP-139 (command palette), COMP-140 (accessibility), COMP-141 (scroll animations), COMP-145 (keyboard navigation)

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-Claude)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 apps/web/package.json                         |   3 +-
 apps/web/src/app/globals.css                  |  40 ++
 apps/web/src/app/history/page.tsx             |  33 +-
 apps/web/src/app/layout.tsx                   |  12 +-
 apps/web/src/app/page.tsx                     | 150 +++--
 apps/web/src/components/command-palette.tsx   | 224 +++++++
 .../components/keyboard-shortcuts-help.tsx    | 121 ++++
 apps/web/src/components/navbar.tsx            |   5 +-
 apps/web/src/components/repo-input.tsx        |   6 +-
 apps/web/src/components/scroll-section.tsx    |  28 +
 apps/web/src/hooks/use-keyboard-nav.ts        | 112 ++++
 apps/web/src/hooks/use-scroll-animate.ts      |  52 ++
 package-lock.json                             | 601 +++++++++++++++++-
 13 files changed, 1308 insertions(+), 79 deletions(-)
 create mode 100644 apps/web/src/components/command-palette.tsx
 create mode 100644 apps/web/src/components/keyboard-shortcuts-help.tsx
 create mode 100644 apps/web/src/components/scroll-section.tsx
 create mode 100644 apps/web/src/hooks/use-keyboard-nav.ts
 create mode 100644 apps/web/src/hooks/use-scroll-animate.ts

diff --git a/apps/web/package.json b/apps/web/package.json
index 45832ed..56b71ba 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,10 +11,11 @@
     "db:push": "prisma db push --schema=../../packages/database/prisma/schema.prisma"
   },
   "dependencies": {
-    "@codeboard/shared": "*",
     "@codeboard/database": "*",
+    "@codeboard/shared": "*",
     "@tailwindcss/typography": "^0.5.19",
     "bullmq": "^5.34.0",
+    "cmdk": "^1.1.1",
     "ioredis": "^5.4.0",
     "lucide-react": "^0.563.0",
     "mermaid": "^11.4.0",
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index c5d05d4..8593cfc 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -36,6 +36,22 @@
   box-sizing: border-box;
 }
 
+:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--accent-blue);
+  border-radius: 0.25rem;
+}
+
+a:focus-visible,
+button:focus-visible,
+[role="button"]:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--accent-blue);
+}
+
 html {
   scroll-behavior: smooth;
 }
@@ -395,3 +411,27 @@ body {
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--border), transparent);
 }
+
+[data-animate] {
+  opacity: 0;
+  transform: translateY(32px);
+  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
+}
+
+[data-animate="visible"] {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+[data-animate][data-animate-delay="1"] { transition-delay: 0.1s; }
+[data-animate][data-animate-delay="2"] { transition-delay: 0.2s; }
+[data-animate][data-animate-delay="3"] { transition-delay: 0.3s; }
+[data-animate][data-animate-delay="4"] { transition-delay: 0.4s; }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-animate] {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
diff --git a/apps/web/src/app/history/page.tsx b/apps/web/src/app/history/page.tsx
index 34626fc..c71ce41 100644
--- a/apps/web/src/app/history/page.tsx
+++ b/apps/web/src/app/history/page.tsx
@@ -1,10 +1,13 @@
 "use client";
 
-import { Suspense, useEffect, useState } from "react";
+import { Suspense, useEffect, useState, useCallback } from "react";
 import { useSearchParams } from "next/navigation";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import type { GeneratedDocs } from "@codeboard/shared";
 import { MermaidDiagram } from "@/components/mermaid-diagram";
+import { useKeyboardNav } from "@/hooks/use-keyboard-nav";
+import { KeyboardShortcutsHelp } from "@/components/keyboard-shortcuts-help";
 import {
   ArrowLeft,
   Clock,
@@ -131,6 +134,7 @@ function ComparisonView({
             <button
               onClick={onClose}
               className="p-2 rounded-lg text-zinc-400 hover:text-white hover:bg-white/5 transition-colors"
+              aria-label="Close comparison view"
             >
               <X className="w-5 h-5" />
             </button>
@@ -410,6 +414,7 @@ function ComparisonView({
 function HistoryContent() {
   const searchParams = useSearchParams();
   const repo = searchParams.get("repo");
+  const router = useRouter();
 
   const [generations, setGenerations] = useState<Generation[]>([]);
   const [loading, setLoading] = useState(true);
@@ -421,6 +426,21 @@ function HistoryContent() {
   const [leftGen, setLeftGen] = useState<Generation | null>(null);
   const [rightGen, setRightGen] = useState<Generation | null>(null);
 
+  const handleKeyboardSelect = useCallback(
+    (index: number) => {
+      if (index >= 0 && index < generations.length) {
+        router.push(`/docs/${generations[index].id}`);
+      }
+    },
+    [generations, router]
+  );
+
+  const { activeIndex, showHelp, setShowHelp } = useKeyboardNav({
+    itemCount: generations.length,
+    onSelect: handleKeyboardSelect,
+    enabled: !loading && !comparing && generations.length > 1,
+  });
+
   useEffect(() => {
     if (!repo) {
       setLoading(false);
@@ -678,17 +698,21 @@ function HistoryContent() {
         </div>
 
         <div className="space-y-3">
-          {generations.map((gen) => {
+          {generations.map((gen, index) => {
             const isSelected = selectedIds.has(gen.id);
             const canSelect = selectedIds.size < 2 || isSelected;
+            const isKeyboardActive = activeIndex === index;
 
             return (
               <div
                 key={gen.id}
+                data-keyboard-index={index}
                 className={`glass rounded-xl p-4 transition-all ${
                   isSelected
                     ? "border-blue-500/50 bg-blue-500/5"
-                    : "border-white/10"
+                    : isKeyboardActive
+                      ? "border-blue-500/30 bg-white/[0.04] ring-1 ring-blue-500/20"
+                      : "border-white/10"
                 } ${!canSelect ? "opacity-50" : ""}`}
               >
                 <div className="flex items-center gap-4">
@@ -700,6 +724,7 @@ function HistoryContent() {
                         : "text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
                     } ${!canSelect ? "cursor-not-allowed" : ""}`}
                     disabled={!canSelect}
+                    aria-label={isSelected ? `Deselect version ${gen.commitHash.slice(0, 7)}` : `Select version ${gen.commitHash.slice(0, 7)} for comparison`}
                   >
                     {isSelected ? (
                       <CheckSquare className="w-5 h-5" />
@@ -760,6 +785,8 @@ function HistoryContent() {
         )}
       </div>
 
+      <KeyboardShortcutsHelp open={showHelp} onClose={() => setShowHelp(false)} />
+
       {leftDoc && rightDoc && leftGen && rightGen && (
         <ComparisonView
           left={leftDoc}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index c335c76..1ccced4 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -75,13 +75,19 @@ export default function RootLayout({
       <body
         className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased bg-[#0a0a0a] text-white min-h-screen`}
       >
+        <a
+          href="#main-content"
+          className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[200] focus:px-4 focus:py-2 focus:rounded-lg focus:bg-[var(--accent-blue)] focus:text-white focus:text-sm focus:font-medium focus:outline-none focus:ring-2 focus:ring-white/50"
+        >
+          Skip to content
+        </a>
         <div className="relative min-h-screen flex flex-col">
-          <div className="fixed inset-0 bg-gradient-radial pointer-events-none" />
-          <div className="fixed inset-0 bg-grid pointer-events-none opacity-50" />
+          <div className="fixed inset-0 bg-gradient-radial pointer-events-none" aria-hidden="true" />
+          <div className="fixed inset-0 bg-grid pointer-events-none opacity-50" aria-hidden="true" />
           
           <Navbar />
           
-          <main className="flex-1 relative">
+          <main id="main-content" className="flex-1 relative">
             {children}
           </main>
           
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index da2afc1..abaddc4 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,5 +1,6 @@
 import { RepoInput } from "@/components/repo-input";
 import { ExampleRepoCard } from "@/components/example-repo-card";
+import { ScrollSection } from "@/components/scroll-section";
 import {
   Link2,
   Code2,
@@ -287,41 +288,45 @@ export default function HomePage() {
 
       <section id="how-it-works" className="py-20 lg:py-32">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
-              How It Works
-            </h2>
-            <p className="text-zinc-400 max-w-xl mx-auto">
-              Four simple steps to comprehensive codebase documentation
-            </p>
-          </div>
+          <ScrollSection>
+            <div className="text-center mb-16">
+              <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
+                How It Works
+              </h2>
+              <p className="text-zinc-400 max-w-xl mx-auto">
+                Four simple steps to comprehensive codebase documentation
+              </p>
+            </div>
+          </ScrollSection>
 
           <div className="relative">
             <div className="hidden lg:block absolute top-24 left-[12.5%] right-[12.5%] h-px bg-gradient-to-r from-transparent via-zinc-700 to-transparent" />
 
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
-              {steps.map((step) => (
-                <div key={step.number} className="relative group">
-                  <div className="text-center">
-                    <div className="text-6xl font-bold text-zinc-800/50 mb-4 group-hover:text-blue-500/20 transition-colors">
-                      {step.number}
+              {steps.map((step, i) => (
+                <ScrollSection key={step.number} delay={i + 1}>
+                  <div className="relative group">
+                    <div className="text-center">
+                      <div className="text-6xl font-bold text-zinc-800/50 mb-4 group-hover:text-blue-500/20 transition-colors">
+                        {step.number}
+                      </div>
+
+                      <div className="relative inline-flex items-center justify-center w-16 h-16 rounded-2xl glass mb-6 group-hover:border-blue-500/30 transition-colors">
+                        <step.icon className="w-7 h-7 text-blue-400" />
+
+                        <div className="absolute inset-0 rounded-2xl bg-blue-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity" />
+                      </div>
+
+                      <h3 className="text-lg font-semibold text-white mb-2">
+                        {step.title}
+                      </h3>
+
+                      <p className="text-sm text-zinc-400 leading-relaxed">
+                        {step.description}
+                      </p>
                     </div>
-
-                    <div className="relative inline-flex items-center justify-center w-16 h-16 rounded-2xl glass mb-6 group-hover:border-blue-500/30 transition-colors">
-                      <step.icon className="w-7 h-7 text-blue-400" />
-
-                      <div className="absolute inset-0 rounded-2xl bg-blue-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity" />
-                    </div>
-
-                    <h3 className="text-lg font-semibold text-white mb-2">
-                      {step.title}
-                    </h3>
-
-                    <p className="text-sm text-zinc-400 leading-relaxed">
-                      {step.description}
-                    </p>
                   </div>
-                </div>
+                </ScrollSection>
               ))}
             </div>
           </div>
@@ -330,22 +335,26 @@ export default function HomePage() {
 
       <section className="py-20 lg:py-32">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-6">
-              <Github className="w-4 h-4 text-blue-400" />
-              <span className="text-sm text-zinc-300">Try It Out</span>
+          <ScrollSection>
+            <div className="text-center mb-16">
+              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-6">
+                <Github className="w-4 h-4 text-blue-400" />
+                <span className="text-sm text-zinc-300">Try It Out</span>
+              </div>
+              <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
+                Featured Examples
+              </h2>
+              <p className="text-zinc-400 max-w-xl mx-auto">
+                Pre-generated docs ready to explore — or paste any repo URL above
+              </p>
             </div>
-            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
-              Featured Examples
-            </h2>
-            <p className="text-zinc-400 max-w-xl mx-auto">
-              Pre-generated docs ready to explore — or paste any repo URL above
-            </p>
-          </div>
+          </ScrollSection>
 
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {exampleRepos.map((repo) => (
-              <ExampleRepoCard key={repo.name} repo={repo} />
+            {exampleRepos.map((repo, i) => (
+              <ScrollSection key={repo.name} delay={(i % 3) + 1}>
+                <ExampleRepoCard repo={repo} />
+              </ScrollSection>
             ))}
           </div>
         </div>
@@ -353,40 +362,41 @@ export default function HomePage() {
 
       <section id="features" className="py-20 lg:py-32">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
-              Everything You Need
-            </h2>
-            <p className="text-zinc-400 max-w-xl mx-auto">
-              Comprehensive documentation generated automatically from your codebase
-            </p>
-          </div>
+          <ScrollSection>
+            <div className="text-center mb-16">
+              <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
+                Everything You Need
+              </h2>
+              <p className="text-zinc-400 max-w-xl mx-auto">
+                Comprehensive documentation generated automatically from your codebase
+              </p>
+            </div>
+          </ScrollSection>
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {features.map((feature) => (
-              <div
-                key={feature.title}
-                className="group relative p-8 rounded-2xl glass hover:bg-white/[0.05] transition-all duration-300 hover:-translate-y-1"
-              >
-                <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/20 via-indigo-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity -z-10 blur-xl" />
+            {features.map((feature, i) => (
+              <ScrollSection key={feature.title} delay={(i % 2) + 1}>
+                <div className="group relative p-8 rounded-2xl glass hover:bg-white/[0.05] transition-all duration-300 hover:-translate-y-1">
+                  <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/20 via-indigo-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity -z-10 blur-xl" />
 
-                <div className="flex items-start gap-5">
-                  <div className="flex-shrink-0">
-                    <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center border border-white/10 group-hover:border-blue-500/30 transition-colors">
-                      <feature.icon className="w-6 h-6 text-blue-400" />
+                  <div className="flex items-start gap-5">
+                    <div className="flex-shrink-0">
+                      <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center border border-white/10 group-hover:border-blue-500/30 transition-colors">
+                        <feature.icon className="w-6 h-6 text-blue-400" />
+                      </div>
+                    </div>
+
+                    <div className="flex-1">
+                      <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-blue-300 transition-colors">
+                        {feature.title}
+                      </h3>
+                      <p className="text-zinc-400 leading-relaxed">
+                        {feature.description}
+                      </p>
                     </div>
                   </div>
-
-                  <div className="flex-1">
-                    <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-blue-300 transition-colors">
-                      {feature.title}
-                    </h3>
-                    <p className="text-zinc-400 leading-relaxed">
-                      {feature.description}
-                    </p>
-                  </div>
                 </div>
-              </div>
+              </ScrollSection>
             ))}
           </div>
         </div>
@@ -394,6 +404,7 @@ export default function HomePage() {
 
       <section className="py-20 lg:py-32">
         <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          <ScrollSection>
           <div className="relative rounded-3xl glass-strong p-8 sm:p-12 lg:p-16 overflow-hidden">
             <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
             <div className="absolute bottom-0 left-0 w-48 h-48 bg-gradient-to-tr from-indigo-500/10 to-cyan-500/10 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2" />
@@ -446,6 +457,7 @@ export default function HomePage() {
               </div>
             </div>
           </div>
+          </ScrollSection>
         </div>
       </section>
     </div>
diff --git a/apps/web/src/components/command-palette.tsx b/apps/web/src/components/command-palette.tsx
new file mode 100644
index 0000000..d46afb8
--- /dev/null
+++ b/apps/web/src/components/command-palette.tsx
@@ -0,0 +1,224 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { Command } from "cmdk";
+import {
+  Home,
+  Sparkles,
+  History,
+  Plus,
+  Search,
+  FileText,
+  Command as CommandIcon,
+} from "lucide-react";
+
+interface RecentDiagram {
+  id: string;
+  repoName: string;
+}
+
+export function CommandPalette() {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [recentDiagrams, setRecentDiagrams] = useState<RecentDiagram[]>([]);
+  const router = useRouter();
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
+    };
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      fetch("/api/history")
+        .then((res) => {
+          if (!res.ok) return [];
+          return res.json();
+        })
+        .then((data) => {
+          if (Array.isArray(data)) {
+            setRecentDiagrams(
+              data.slice(0, 5).map((item: { id: string; repoName: string }) => ({
+                id: item.id,
+                repoName: item.repoName,
+              }))
+            );
+          }
+        })
+        .catch(() => {});
+    }
+  }, [open]);
+
+  const runCommand = useCallback(
+    (command: () => void) => {
+      setOpen(false);
+      setSearch("");
+      command();
+    },
+    []
+  );
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="hidden md:flex items-center gap-2 px-3 py-1.5 text-sm text-zinc-500 hover:text-zinc-300 rounded-lg border border-white/10 bg-white/[0.02] hover:bg-white/[0.05] transition-colors"
+        aria-label="Open command palette"
+      >
+        <Search className="w-3.5 h-3.5" />
+        <span>Search...</span>
+        <kbd className="ml-2 pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-white/10 bg-white/[0.05] px-1.5 font-mono text-[10px] font-medium text-zinc-400">
+          <span className="text-xs">
+            {typeof navigator !== "undefined" &&
+            navigator.userAgent.includes("Mac")
+              ? "\u2318"
+              : "Ctrl"}
+          </span>
+          K
+        </kbd>
+      </button>
+
+      {open && (
+        <div className="fixed inset-0 z-[100]">
+          <div
+            className="fixed inset-0 bg-black/60 backdrop-blur-sm"
+            onClick={() => setOpen(false)}
+            aria-hidden="true"
+          />
+          <div className="fixed inset-0 flex items-start justify-center pt-[20vh] px-4">
+            <Command
+              label="Command palette"
+              loop
+              className="w-full max-w-lg rounded-xl border border-white/10 bg-[#111113] shadow-2xl shadow-black/50 overflow-hidden animate-scale-in"
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if (e.key === "Escape") {
+                  setOpen(false);
+                }
+              }}
+            >
+              <div className="flex items-center gap-3 px-4 border-b border-white/[0.06]">
+                <Search className="w-4 h-4 text-zinc-500 flex-shrink-0" />
+                <Command.Input
+                  value={search}
+                  onValueChange={setSearch}
+                  placeholder="Type a command or search..."
+                  className="flex-1 h-12 bg-transparent text-sm text-white placeholder-zinc-500 outline-none"
+                />
+                <kbd className="flex-shrink-0 inline-flex h-5 items-center rounded border border-white/10 bg-white/[0.05] px-1.5 font-mono text-[10px] text-zinc-500">
+                  ESC
+                </kbd>
+              </div>
+
+              <Command.List className="max-h-80 overflow-y-auto scrollbar-thin p-2">
+                <Command.Empty className="py-8 text-center text-sm text-zinc-500">
+                  No results found.
+                </Command.Empty>
+
+                <Command.Group
+                  heading="Navigation"
+                  className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-zinc-500"
+                >
+                  <Command.Item
+                    value="home"
+                    onSelect={() => runCommand(() => router.push("/"))}
+                    className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-zinc-300 cursor-pointer data-[selected=true]:bg-white/[0.06] data-[selected=true]:text-white transition-colors"
+                  >
+                    <Home className="w-4 h-4 text-zinc-500" />
+                    Home
+                  </Command.Item>
+                  <Command.Item
+                    value="generate"
+                    onSelect={() => runCommand(() => router.push("/generate"))}
+                    className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-zinc-300 cursor-pointer data-[selected=true]:bg-white/[0.06] data-[selected=true]:text-white transition-colors"
+                  >
+                    <Sparkles className="w-4 h-4 text-zinc-500" />
+                    Generate
+                  </Command.Item>
+                  <Command.Item
+                    value="history"
+                    onSelect={() => runCommand(() => router.push("/history"))}
+                    className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-zinc-300 cursor-pointer data-[selected=true]:bg-white/[0.06] data-[selected=true]:text-white transition-colors"
+                  >
+                    <History className="w-4 h-4 text-zinc-500" />
+                    History
+                  </Command.Item>
+                </Command.Group>
+
+                <Command.Separator className="my-2 h-px bg-white/[0.06]" />
+
+                <Command.Group
+                  heading="Actions"
+                  className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-zinc-500"
+                >
+                  <Command.Item
+                    value="new diagram"
+                    onSelect={() => runCommand(() => router.push("/"))}
+                    className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-zinc-300 cursor-pointer data-[selected=true]:bg-white/[0.06] data-[selected=true]:text-white transition-colors"
+                  >
+                    <Plus className="w-4 h-4 text-zinc-500" />
+                    New Diagram
+                  </Command.Item>
+                </Command.Group>
+
+                {recentDiagrams.length > 0 && (
+                  <>
+                    <Command.Separator className="my-2 h-px bg-white/[0.06]" />
+                    <Command.Group
+                      heading="Recent Diagrams"
+                      className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-zinc-500"
+                    >
+                      {recentDiagrams.map((diagram) => (
+                        <Command.Item
+                          key={diagram.id}
+                          value={diagram.repoName}
+                          onSelect={() =>
+                            runCommand(() => router.push(`/docs/${diagram.id}`))
+                          }
+                          className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-zinc-300 cursor-pointer data-[selected=true]:bg-white/[0.06] data-[selected=true]:text-white transition-colors"
+                        >
+                          <FileText className="w-4 h-4 text-zinc-500" />
+                          {diagram.repoName}
+                        </Command.Item>
+                      ))}
+                    </Command.Group>
+                  </>
+                )}
+              </Command.List>
+
+              <div className="flex items-center justify-between px-4 py-2.5 border-t border-white/[0.06]">
+                <div className="flex items-center gap-3 text-xs text-zinc-500">
+                  <span className="flex items-center gap-1">
+                    <kbd className="inline-flex h-4 items-center rounded border border-white/10 bg-white/[0.05] px-1 font-mono text-[10px]">
+                      &uarr;
+                    </kbd>
+                    <kbd className="inline-flex h-4 items-center rounded border border-white/10 bg-white/[0.05] px-1 font-mono text-[10px]">
+                      &darr;
+                    </kbd>
+                    navigate
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <kbd className="inline-flex h-4 items-center rounded border border-white/10 bg-white/[0.05] px-1 font-mono text-[10px]">
+                      &crarr;
+                    </kbd>
+                    select
+                  </span>
+                </div>
+                <div className="flex items-center gap-1 text-xs text-zinc-600">
+                  <CommandIcon className="w-3 h-3" />
+                  <span>CodeBoard</span>
+                </div>
+              </div>
+            </Command>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
new file mode 100644
index 0000000..d7737f8
--- /dev/null
+++ b/apps/web/src/components/keyboard-shortcuts-help.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { X } from "lucide-react";
+
+interface KeyboardShortcutsHelpProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+function Shortcut({ keys, label }: { keys: string[]; label: string }) {
+  return (
+    <div className="flex items-center justify-between py-2">
+      <span className="text-sm text-zinc-300">{label}</span>
+      <div className="flex items-center gap-1">
+        {keys.map((key) => (
+          <kbd
+            key={key}
+            className="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded border border-white/10 bg-white/[0.05] px-1.5 font-mono text-xs text-zinc-400"
+          >
+            {key}
+          </kbd>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function KeyboardShortcutsHelp({
+  open,
+  onClose,
+}: KeyboardShortcutsHelpProps) {
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape" || e.key === "?") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[90]" ref={overlayRef}>
+      <div
+        className="fixed inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div className="fixed inset-0 flex items-center justify-center px-4">
+        <div
+          role="dialog"
+          aria-label="Keyboard shortcuts"
+          className="w-full max-w-md rounded-xl border border-white/10 bg-[#111113] shadow-2xl shadow-black/50 animate-scale-in"
+        >
+          <div className="flex items-center justify-between px-5 py-4 border-b border-white/[0.06]">
+            <h2 className="text-base font-semibold text-white">
+              Keyboard Shortcuts
+            </h2>
+            <button
+              onClick={onClose}
+              className="p-1.5 rounded-lg text-zinc-400 hover:text-white hover:bg-white/[0.06] transition-colors"
+              aria-label="Close shortcuts help"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+
+          <div className="px-5 py-4 space-y-4">
+            <div>
+              <h3 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">
+                Navigation
+              </h3>
+              <div className="divide-y divide-white/[0.04]">
+                <Shortcut keys={["j"]} label="Move down" />
+                <Shortcut keys={["k"]} label="Move up" />
+                <Shortcut keys={["Enter"]} label="Open selected" />
+                <Shortcut keys={["Esc"]} label="Clear selection" />
+              </div>
+            </div>
+
+            <div>
+              <h3 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">
+                Go To
+              </h3>
+              <div className="divide-y divide-white/[0.04]">
+                <Shortcut keys={["g", "h"]} label="Go to Home" />
+                <Shortcut keys={["g", "g"]} label="Go to Generate" />
+              </div>
+            </div>
+
+            <div>
+              <h3 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">
+                General
+              </h3>
+              <div className="divide-y divide-white/[0.04]">
+                <Shortcut
+                  keys={["\u2318", "K"]}
+                  label="Command palette"
+                />
+                <Shortcut keys={["?"]} label="Show shortcuts" />
+              </div>
+            </div>
+          </div>
+
+          <div className="px-5 py-3 border-t border-white/[0.06]">
+            <p className="text-xs text-zinc-500 text-center">
+              Press <kbd className="inline-flex h-4 items-center rounded border border-white/10 bg-white/[0.05] px-1 font-mono text-[10px] text-zinc-400">?</kbd> or <kbd className="inline-flex h-4 items-center rounded border border-white/10 bg-white/[0.05] px-1 font-mono text-[10px] text-zinc-400">Esc</kbd> to close
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/navbar.tsx b/apps/web/src/components/navbar.tsx
index f89dfec..7144a71 100644
--- a/apps/web/src/components/navbar.tsx
+++ b/apps/web/src/components/navbar.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { Menu, X, Github } from "lucide-react";
+import { CommandPalette } from "@/components/command-palette";
 
 export function Navbar() {
   const [isOpen, setIsOpen] = useState(false);
@@ -15,7 +16,7 @@ export function Navbar() {
 
   return (
     <header className="fixed top-0 left-0 right-0 z-50">
-      <nav className="glass border-b border-white/5">
+      <nav className="glass border-b border-white/5" aria-label="Main navigation">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between h-16">
             <Link href="/" className="flex items-center gap-2 group">
@@ -41,6 +42,8 @@ export function Navbar() {
                   {link.label}
                 </Link>
               ))}
+
+              <CommandPalette />
               
               <a
                 href="https://gitea.repi.fun/repi/codeboard"
diff --git a/apps/web/src/components/repo-input.tsx b/apps/web/src/components/repo-input.tsx
index 9a5d07a..9a055c8 100644
--- a/apps/web/src/components/repo-input.tsx
+++ b/apps/web/src/components/repo-input.tsx
@@ -52,10 +52,14 @@ export function RepoInput() {
     <form onSubmit={handleSubmit} className="w-full">
       <div className="relative flex flex-col sm:flex-row gap-3">
         <div className="relative flex-1">
-          <div className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500">
+          <label htmlFor="repo-url-input" className="sr-only">
+            GitHub repository URL
+          </label>
+          <div className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500" aria-hidden="true">
             <Github className="w-5 h-5" />
           </div>
           <input
+            id="repo-url-input"
             type="text"
             value={url}
             onChange={(e) => {
diff --git a/apps/web/src/components/scroll-section.tsx b/apps/web/src/components/scroll-section.tsx
new file mode 100644
index 0000000..cf43b46
--- /dev/null
+++ b/apps/web/src/components/scroll-section.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { useScrollAnimate } from "@/hooks/use-scroll-animate";
+
+interface ScrollSectionProps {
+  children: React.ReactNode;
+  className?: string;
+  delay?: number;
+}
+
+export function ScrollSection({
+  children,
+  className = "",
+  delay,
+}: ScrollSectionProps) {
+  const ref = useScrollAnimate<HTMLDivElement>();
+
+  return (
+    <div
+      ref={ref}
+      data-animate="hidden"
+      data-animate-delay={delay}
+      className={className}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/apps/web/src/hooks/use-keyboard-nav.ts b/apps/web/src/hooks/use-keyboard-nav.ts
new file mode 100644
index 0000000..5f9682d
--- /dev/null
+++ b/apps/web/src/hooks/use-keyboard-nav.ts
@@ -0,0 +1,112 @@
+"use client";
+
+import { useEffect, useState, useCallback, useRef } from "react";
+import { useRouter } from "next/navigation";
+
+interface UseKeyboardNavOptions {
+  itemCount: number;
+  onSelect?: (index: number) => void;
+  enabled?: boolean;
+}
+
+export function useKeyboardNav({
+  itemCount,
+  onSelect,
+  enabled = true,
+}: UseKeyboardNavOptions) {
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [showHelp, setShowHelp] = useState(false);
+  const router = useRouter();
+  const gPrefixRef = useRef(false);
+  const gTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearGPrefix = useCallback(() => {
+    gPrefixRef.current = false;
+    if (gTimerRef.current) {
+      clearTimeout(gTimerRef.current);
+      gTimerRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const isInputFocused = () => {
+      const tag = document.activeElement?.tagName;
+      return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
+    };
+
+    const handler = (e: KeyboardEvent) => {
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      if (isInputFocused()) return;
+
+      if (gPrefixRef.current) {
+        clearGPrefix();
+        if (e.key === "h") {
+          e.preventDefault();
+          router.push("/");
+          return;
+        }
+        if (e.key === "g") {
+          e.preventDefault();
+          router.push("/generate");
+          return;
+        }
+        return;
+      }
+
+      switch (e.key) {
+        case "j":
+          e.preventDefault();
+          setActiveIndex((prev) => {
+            if (itemCount === 0) return -1;
+            return prev < itemCount - 1 ? prev + 1 : prev;
+          });
+          break;
+        case "k":
+          e.preventDefault();
+          setActiveIndex((prev) => {
+            if (itemCount === 0) return -1;
+            return prev > 0 ? prev - 1 : 0;
+          });
+          break;
+        case "Enter":
+          if (activeIndex >= 0 && onSelect) {
+            e.preventDefault();
+            onSelect(activeIndex);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          setActiveIndex(-1);
+          break;
+        case "g":
+          e.preventDefault();
+          gPrefixRef.current = true;
+          gTimerRef.current = setTimeout(clearGPrefix, 1000);
+          break;
+        case "?":
+          e.preventDefault();
+          setShowHelp((prev) => !prev);
+          break;
+      }
+    };
+
+    document.addEventListener("keydown", handler);
+    return () => {
+      document.removeEventListener("keydown", handler);
+      clearGPrefix();
+    };
+  }, [enabled, itemCount, activeIndex, onSelect, router, clearGPrefix]);
+
+  useEffect(() => {
+    if (activeIndex >= 0) {
+      const el = document.querySelector(
+        `[data-keyboard-index="${activeIndex}"]`
+      );
+      el?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  }, [activeIndex]);
+
+  return { activeIndex, setActiveIndex, showHelp, setShowHelp };
+}
diff --git a/apps/web/src/hooks/use-scroll-animate.ts b/apps/web/src/hooks/use-scroll-animate.ts
new file mode 100644
index 0000000..b724ad2
--- /dev/null
+++ b/apps/web/src/hooks/use-scroll-animate.ts
@@ -0,0 +1,52 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+interface UseScrollAnimateOptions {
+  threshold?: number;
+  rootMargin?: string;
+  once?: boolean;
+}
+
+export function useScrollAnimate<T extends HTMLElement = HTMLDivElement>({
+  threshold = 0.1,
+  rootMargin = "0px 0px -60px 0px",
+  once = true,
+}: UseScrollAnimateOptions = {}) {
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const prefersReducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
+
+    if (prefersReducedMotion) {
+      el.setAttribute("data-animate", "visible");
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.setAttribute("data-animate", "visible");
+            if (once) {
+              observer.unobserve(entry.target);
+            }
+          } else if (!once) {
+            entry.target.setAttribute("data-animate", "hidden");
+          }
+        });
+      },
+      { threshold, rootMargin }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [threshold, rootMargin, once]);
+
+  return ref;
+}
diff --git a/package-lock.json b/package-lock.json
index df4d688..d6cdb86 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,9 +23,11 @@
       "name": "@codeboard/web",
       "version": "0.0.1",
       "dependencies": {
+        "@codeboard/database": "*",
         "@codeboard/shared": "*",
         "@tailwindcss/typography": "^0.5.19",
         "bullmq": "^5.34.0",
+        "cmdk": "^1.1.1",
         "ioredis": "^5.4.0",
         "lucide-react": "^0.563.0",
         "mermaid": "^11.4.0",
@@ -48,6 +50,7 @@
       "name": "@codeboard/worker",
       "version": "0.0.1",
       "dependencies": {
+        "@codeboard/database": "*",
         "@codeboard/diagrams": "*",
         "@codeboard/llm": "*",
         "@codeboard/parser": "*",
@@ -1198,6 +1201,447 @@
         "@prisma/debug": "6.19.2"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
+      "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+      "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
+      "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@standard-schema/spec": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
@@ -1860,7 +2304,7 @@
       "version": "18.3.7",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^18.0.0"
@@ -1921,6 +2365,18 @@
         "node": ">= 8.0.0"
       }
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -2167,6 +2623,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/cmdk": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+      "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-id": "^1.1.0",
+        "@radix-ui/react-primitive": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2872,6 +3344,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -3197,6 +3675,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
@@ -5184,6 +5671,75 @@
         "react": ">=18"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -5760,6 +6316,49 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",