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/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;
+  }
+}

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}

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>
           

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>

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>
+      )}
+    </>
+  );
+}

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>
+  );
+}

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"

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) => {

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>
+  );
+}

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 };
+}

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;
+}