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/components/demo-banner.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { Beaker, ArrowRight, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const DISMISS_KEY = "agentlens-demo-banner-dismissed";
+
+interface DemoBannerProps {
+  allTracesAreDemo: boolean;
+}
+
+export function DemoBanner({ allTracesAreDemo }: DemoBannerProps) {
+  const [dismissed, setDismissed] = useState(true);
+
+  useEffect(() => {
+    setDismissed(localStorage.getItem(DISMISS_KEY) === "true");
+  }, []);
+
+  if (dismissed || !allTracesAreDemo) return null;
+
+  function handleDismiss() {
+    setDismissed(true);
+    localStorage.setItem(DISMISS_KEY, "true");
+  }
+
+  return (
+    <div
+      className={cn(
+        "relative mb-6 rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-4",
+        "flex items-center gap-4"
+      )}
+    >
+      <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-emerald-500/10 border border-emerald-500/20 shrink-0">
+        <Beaker className="w-5 h-5 text-emerald-400" />
+      </div>
+
+      <div className="flex-1 min-w-0">
+        <p className="text-sm text-emerald-200 font-medium">
+          You are viewing sample data.
+        </p>
+        <p className="text-xs text-emerald-400/60 mt-0.5">
+          Connect your agent to start collecting real traces.
+        </p>
+      </div>
+
+      <Link
+        href="/docs/getting-started"
+        className="hidden sm:flex items-center gap-1.5 px-4 py-2 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-sm font-medium text-emerald-400 hover:bg-emerald-500/20 transition-colors shrink-0"
+      >
+        View Setup Guide
+        <ArrowRight className="w-3.5 h-3.5" />
+      </Link>
+
+      <button
+        onClick={handleDismiss}
+        aria-label="Dismiss demo banner"
+        className="p-1.5 rounded-lg text-emerald-400/40 hover:text-emerald-400/80 hover:bg-emerald-500/10 transition-colors shrink-0"
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </div>
+  );
+}