feat: add command palette, accessibility, scroll animations, demo workspace, and keyboard navigation

- COMP-139: Command palette for quick navigation
- COMP-140: Accessibility improvements
- COMP-141: Scroll animations with animate-on-scroll component
- COMP-143: Demo workspace with seed data and demo banner
- COMP-145: Keyboard navigation and shortcuts help

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

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

apps/web/src/app/api/demo/seed/route.ts

@@ -0,0 +1,33 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+import { prisma } from "@/lib/prisma";
+import { seedDemoData } from "@/lib/demo-data";
+
+export async function POST() {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const user = await prisma.user.findUnique({
+      where: { id: session.user.id },
+      select: { demoSeeded: true },
+    });
+
+    if (!user) {
+      return NextResponse.json({ error: "User not found" }, { status: 404 });
+    }
+
+    if (user.demoSeeded) {
+      return NextResponse.json({ error: "Demo data already seeded" }, { status: 409 });
+    }
+
+    await seedDemoData(session.user.id);
+
+    return NextResponse.json({ success: true }, { status: 200 });
+  } catch (error) {
+    console.error("Error seeding demo data:", error);
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+  }
+}

apps/web/src/app/dashboard/keys/page.tsx

@@ -12,6 +12,7 @@ import {
   Shield,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { useKeyboardNav } from "@/hooks/use-keyboard-nav";
 
 interface ApiKey {
   id: string;
@@ -38,6 +39,21 @@ export default function ApiKeysPage() {
   const [revokingId, setRevokingId] = useState<string | null>(null);
   const [confirmRevokeId, setConfirmRevokeId] = useState<string | null>(null);
 
+  const handleKeySelect = useCallback(
+    (index: number) => {
+      const key = keys[index];
+      if (key) {
+        setConfirmRevokeId(key.id);
+      }
+    },
+    [keys]
+  );
+
+  const { selectedIndex } = useKeyboardNav({
+    itemCount: keys.length,
+    onSelect: handleKeySelect,
+  });
+
   const fetchKeys = useCallback(async () => {
     setIsLoading(true);
     try {
@@ -157,6 +173,7 @@ export default function ApiKeysPage() {
               onClick={() =>
                 copyToClipboard(newlyCreatedKey.key, "new-key")
               }
+              aria-label="Copy API key to clipboard"
               className={cn(
                 "p-3 rounded-lg border transition-all shrink-0",
                 copiedField === "new-key"
@@ -196,10 +213,11 @@ export default function ApiKeysPage() {
             <h2 className="text-sm font-semibold">Create New API Key</h2>
           </div>
           <div>
-            <label className="text-xs text-neutral-500 font-medium block mb-1.5">
+            <label htmlFor="key-name" className="text-xs text-neutral-500 font-medium block mb-1.5">
               Key Name (optional)
             </label>
             <input
+              id="key-name"
               type="text"
               value={newKeyName}
               onChange={(e) => setNewKeyName(e.target.value)}
@@ -271,10 +289,16 @@ export default function ApiKeysPage() {
             </div>
           ) : (
             <div className="divide-y divide-neutral-800">
-              {keys.map((apiKey) => (
+              {keys.map((apiKey, index) => (
                 <div
                   key={apiKey.id}
-                  className="flex items-center gap-4 px-6 py-4 group"
+                  data-keyboard-index={index}
+                  className={cn(
+                    "flex items-center gap-4 px-6 py-4 group transition-colors",
+                    index === selectedIndex
+                      ? "bg-emerald-500/5 ring-1 ring-inset ring-emerald-500/20"
+                      : ""
+                  )}
                 >
                   <div className="w-9 h-9 rounded-lg bg-neutral-800/50 border border-neutral-700/50 flex items-center justify-center shrink-0">
                     <Key className="w-4 h-4 text-neutral-500" />

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

@@ -16,6 +16,8 @@ import {
   Loader2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { CommandPalette } from "@/components/command-palette";
+import { KeyboardShortcutsHelp, ShortcutsHint } from "@/components/keyboard-shortcuts-help";
 
 interface NavItem {
   href: string;
@@ -151,6 +153,7 @@ function VerificationBanner() {
         </div>
         <button
           onClick={() => setDismissed(true)}
+          aria-label="Dismiss verification banner"
           className="p-1 rounded text-amber-400/60 hover:text-amber-300 transition-colors shrink-0"
         >
           <X className="w-4 h-4" />
@@ -165,6 +168,9 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
 
   return (
     <div className="min-h-screen bg-neutral-950 flex">
+      <CommandPalette />
+      <KeyboardShortcutsHelp />
+      <ShortcutsHint />
       {/* Desktop Sidebar */}
       <aside className="hidden lg:block w-64 h-screen sticky top-0">
         <Sidebar />
@@ -189,13 +195,14 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
       </aside>
 
       {/* Main Content */}
-      <main className="flex-1 min-w-0">
+      <main id="main-content" className="flex-1 min-w-0">
         <VerificationBanner />
         {/* Mobile Header */}
         <header className="lg:hidden sticky top-0 z-30 bg-neutral-950/80 backdrop-blur-md border-b border-neutral-800 px-4 py-3">
           <div className="flex items-center justify-between">
             <button
               onClick={() => setSidebarOpen(true)}
+              aria-label="Open navigation menu"
               className="p-2 rounded-lg bg-neutral-900 border border-neutral-800 text-neutral-400 hover:text-neutral-100 transition-colors"
             >
               <Menu className="w-5 h-5" />

apps/web/src/app/dashboard/page.tsx

@@ -1,24 +1,29 @@
 import { Suspense } from "react";
 import { TraceList } from "@/components/trace-list";
+import { DemoSeedTrigger } from "@/components/demo-seed-trigger";
+import { DemoBanner } from "@/components/demo-banner";
 
 export const dynamic = "force-dynamic";
 
+interface TraceItem {
+  id: string;
+  name: string;
+  status: "RUNNING" | "COMPLETED" | "ERROR";
+  startedAt: string;
+  endedAt: string | null;
+  durationMs: number | null;
+  tags: string[];
+  metadata: Record<string, unknown>;
+  isDemo?: boolean;
+  _count: {
+    decisionPoints: number;
+    spans: number;
+    events: number;
+  };
+}
+
 interface TracesResponse {
-  traces: Array<{
-    id: string;
-    name: string;
-    status: "RUNNING" | "COMPLETED" | "ERROR";
-    startedAt: string;
-    endedAt: string | null;
-    durationMs: number | null;
-    tags: string[];
-    metadata: Record<string, unknown>;
-    _count: {
-      decisionPoints: number;
-      spans: number;
-      events: number;
-    };
-  }>;
+  traces: TraceItem[];
   total: number;
   page: number;
   limit: number;
@@ -55,14 +60,21 @@ async function getTraces(
 export default async function DashboardPage() {
   const data = await getTraces(50, 1);
 
+  const hasTraces = data.traces.length > 0;
+  const allTracesAreDemo =
+    hasTraces && data.traces.every((t) => t.isDemo === true);
+
   return (
-    <Suspense fallback={<div className="p-8 text-zinc-400">Loading traces...</div>}>
-      <TraceList
-        initialTraces={data.traces}
-        initialTotal={data.total}
-        initialTotalPages={data.totalPages}
-        initialPage={data.page}
-      />
-    </Suspense>
+    <DemoSeedTrigger hasTraces={hasTraces}>
+      {allTracesAreDemo && <DemoBanner allTracesAreDemo={allTracesAreDemo} />}
+      <Suspense fallback={<div className="p-8 text-zinc-400">Loading traces...</div>}>
+        <TraceList
+          initialTraces={data.traces}
+          initialTotal={data.total}
+          initialTotalPages={data.totalPages}
+          initialPage={data.page}
+        />
+      </Suspense>
+    </DemoSeedTrigger>
   );
 }

apps/web/src/app/globals.css

@@ -36,3 +36,39 @@
     --font-mono: var(--font-jetbrains), 'JetBrains Mono', 'Fira Code', monospace;
   }
 }
+
+[data-animate="hidden"] {
+  opacity: 0;
+  transform: translateY(24px);
+  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
+    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+[data-animate="visible"] {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+[data-animate="hidden"][style*="animation-delay"] {
+  transition-delay: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-animate="hidden"] {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
+
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+[role="button"]:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}

apps/web/src/app/layout.tsx

@@ -74,6 +74,12 @@ export default function RootLayout({
   return (
     <html lang="en" className="dark">
       <body className={`${inter.variable} ${jetbrainsMono.variable} bg-neutral-950 text-neutral-100 antialiased`}>
+        <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-emerald-500 focus:text-neutral-950 focus:font-semibold focus:text-sm focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 focus:ring-offset-neutral-950"
+        >
+          Skip to content
+        </a>
         <SessionProvider>{children}</SessionProvider>
       </body>
     </html>

apps/web/src/app/page.tsx

@@ -17,10 +17,11 @@ import {
   Clipboard,
   Shield,
 } from "lucide-react";
+import { AnimateOnScroll } from "@/components/animate-on-scroll";
 
 export default function HomePage() {
   return (
-    <div className="min-h-screen bg-neutral-950">
+    <main id="main-content" className="min-h-screen bg-neutral-950">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{
@@ -161,6 +162,7 @@ export default function HomePage() {
       {/* Features Section */}
       <section className="py-24 border-b border-neutral-800/50">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          <AnimateOnScroll>
           <div className="text-center mb-16">
             <h2 className="text-3xl sm:text-4xl font-bold mb-4">
               Everything you need to understand your agents
@@ -169,9 +171,11 @@ export default function HomePage() {
               From decision trees to cost intelligence, get complete visibility into how your AI systems operate
             </p>
           </div>
+          </AnimateOnScroll>
 
           <div className="grid md:grid-cols-3 gap-8">
             {/* Feature 1: Decision Trees */}
+            <AnimateOnScroll delay={0}>
             <div className="group p-8 rounded-2xl border border-neutral-800/50 bg-gradient-to-b from-neutral-900/50 to-transparent hover:border-emerald-500/30 transition-all duration-300">
               <div className="w-14 h-14 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                 <GitBranch className="w-7 h-7 text-emerald-400" />
@@ -181,8 +185,10 @@ export default function HomePage() {
                 Visualize the complete reasoning behind every agent choice. See the branching logic, alternatives considered, and the path chosen.
               </p>
             </div>
+            </AnimateOnScroll>
 
             {/* Feature 2: Context Awareness */}
+            <AnimateOnScroll delay={100}>
             <div className="group p-8 rounded-2xl border border-neutral-800/50 bg-gradient-to-b from-neutral-900/50 to-transparent hover:border-emerald-500/30 transition-all duration-300">
               <div className="w-14 h-14 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                 <Brain className="w-7 h-7 text-emerald-400" />
@@ -192,8 +198,10 @@ export default function HomePage() {
                 Monitor context window utilization in real-time. Track what&apos;s being fed into your agents and what&apos;s being left behind.
               </p>
             </div>
+            </AnimateOnScroll>
 
             {/* Feature 3: Cost Intelligence */}
+            <AnimateOnScroll delay={200}>
             <div className="group p-8 rounded-2xl border border-neutral-800/50 bg-gradient-to-b from-neutral-900/50 to-transparent hover:border-emerald-500/30 transition-all duration-300">
               <div className="w-14 h-14 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                 <DollarSign className="w-7 h-7 text-emerald-400" />
@@ -203,6 +211,7 @@ export default function HomePage() {
                 Track spending per decision, per agent, per trace. Get granular insights into where every dollar goes in your AI operations.
               </p>
             </div>
+            </AnimateOnScroll>
           </div>
         </div>
       </section>
@@ -211,6 +220,7 @@ export default function HomePage() {
       <section className="py-24 border-b border-neutral-800/50 relative">
         <div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_40%_at_50%_50%,rgba(16,185,129,0.04),transparent)]" />
         <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          <AnimateOnScroll>
           <div className="text-center mb-16">
             <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-neutral-700 bg-neutral-800/30 text-neutral-400 text-sm mb-6">
               <Zap className="w-4 h-4" />
@@ -223,9 +233,11 @@ export default function HomePage() {
               Go from zero to full agent observability in under five minutes
             </p>
           </div>
+          </AnimateOnScroll>
 
           <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
             {/* Step 1: Install */}
+            <AnimateOnScroll delay={0}>
             <div className="relative p-8 rounded-2xl border border-neutral-800/50 bg-neutral-900/30">
               <div className="absolute -top-4 left-8">
                 <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-emerald-500 text-neutral-950 text-sm font-bold shadow-lg shadow-emerald-500/25">
@@ -243,8 +255,10 @@ export default function HomePage() {
                 <code className="text-sm font-mono text-emerald-400">pip install vectry-agentlens</code>
               </div>
             </div>
+            </AnimateOnScroll>
 
             {/* Step 2: Instrument */}
+            <AnimateOnScroll delay={100}>
             <div className="relative p-8 rounded-2xl border border-neutral-800/50 bg-neutral-900/30">
               <div className="absolute -top-4 left-8">
                 <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-emerald-500 text-neutral-950 text-sm font-bold shadow-lg shadow-emerald-500/25">
@@ -264,8 +278,10 @@ export default function HomePage() {
                 <code className="text-sm font-mono text-emerald-400">wrap_openai()</code>
               </div>
             </div>
+            </AnimateOnScroll>
 
             {/* Step 3: Observe */}
+            <AnimateOnScroll delay={200}>
             <div className="relative p-8 rounded-2xl border border-neutral-800/50 bg-neutral-900/30">
               <div className="absolute -top-4 left-8">
                 <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-emerald-500 text-neutral-950 text-sm font-bold shadow-lg shadow-emerald-500/25">
@@ -283,6 +299,7 @@ export default function HomePage() {
                 <code className="text-sm font-mono text-emerald-400">agentlens.vectry.tech</code>
               </div>
             </div>
+            </AnimateOnScroll>
           </div>
 
           {/* Connecting arrows decoration */}
@@ -302,6 +319,7 @@ export default function HomePage() {
       <section className="py-24 border-b border-neutral-800/50">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="grid lg:grid-cols-2 gap-12 items-start">
+            <AnimateOnScroll>
             <div className="lg:sticky lg:top-8">
               <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-neutral-700 bg-neutral-800/30 text-neutral-400 text-sm mb-6">
                 <Cpu className="w-4 h-4" />
@@ -331,8 +349,10 @@ export default function HomePage() {
                 ))}
               </ul>
             </div>
+            </AnimateOnScroll>
 
             {/* Code Blocks - Two patterns stacked */}
+            <AnimateOnScroll delay={150}>
             <div className="space-y-6">
               {/* Decorator Pattern */}
               <div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 backdrop-blur-sm">
@@ -480,6 +500,7 @@ export default function HomePage() {
                 </pre>
               </div>
             </div>
+            </AnimateOnScroll>
           </div>
         </div>
       </section>
@@ -488,6 +509,7 @@ export default function HomePage() {
       <section className="py-24 border-b border-neutral-800/50 relative">
         <div className="absolute inset-0 bg-[radial-gradient(ellipse_50%_50%_at_50%_50%,rgba(16,185,129,0.03),transparent)]" />
         <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          <AnimateOnScroll>
           <div className="text-center mb-16">
             <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-neutral-700 bg-neutral-800/30 text-neutral-400 text-sm mb-6">
               <Link2 className="w-4 h-4" />
@@ -500,7 +522,9 @@ export default function HomePage() {
               First-class support for the most popular AI frameworks. Drop in and start tracing.
             </p>
           </div>
+          </AnimateOnScroll>
 
+          <AnimateOnScroll>
           <div className="grid sm:grid-cols-3 gap-6 max-w-3xl mx-auto">
             {/* OpenAI */}
             <div className="group flex flex-col items-center p-8 rounded-2xl border border-neutral-800/50 bg-neutral-900/30 hover:border-emerald-500/20 transition-all duration-300">
@@ -538,6 +562,7 @@ export default function HomePage() {
               </span>
             </div>
           </div>
+          </AnimateOnScroll>
         </div>
       </section>
 
@@ -545,6 +570,7 @@ export default function HomePage() {
       <section className="py-24 border-b border-neutral-800/50 relative">
         <div className="absolute inset-0 bg-[radial-gradient(ellipse_70%_50%_at_50%_50%,rgba(16,185,129,0.04),transparent)]" />
         <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          <AnimateOnScroll>
           <div className="text-center mb-16">
             <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-neutral-700 bg-neutral-800/30 text-neutral-400 text-sm mb-6">
               <Shield className="w-4 h-4" />
@@ -557,7 +583,9 @@ export default function HomePage() {
               No hidden fees. Start free, scale as you grow. Every plan includes the full dashboard experience.
             </p>
           </div>
+          </AnimateOnScroll>
 
+          <AnimateOnScroll>
           <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
             {/* Free Tier */}
             <div className="relative flex flex-col p-8 rounded-2xl border border-neutral-800/50 bg-neutral-900/30 transition-all duration-300 hover:border-neutral-700">
@@ -657,6 +685,7 @@ export default function HomePage() {
               </a>
             </div>
           </div>
+          </AnimateOnScroll>
         </div>
       </section>
 
@@ -689,6 +718,6 @@ export default function HomePage() {
           </div>
         </div>
       </footer>
-    </div>
+    </main>
   );
 }