diff --git a/.github/workflows/scour.yml b/.github/workflows/scour.yml
new file mode 100644
index 0000000..ab5d0f8
--- /dev/null
+++ b/.github/workflows/scour.yml
@@ -0,0 +1,23 @@
+name: Scour
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  scour:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Run scour
+        uses: carsonSgit/scour@v0.4.0
+        with:
+          fail-on: error
+          triage: "true"
diff --git a/.gitignore b/.gitignore
index 55f0e7c..31d72ef 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,3 +47,9 @@ next-env.d.ts
 /videos/*.mov
 /videos/*.avi
 /videos/*.mkv
+.codex
+.claude
+.agents
+.mcp.json
+.omx
+.cursor
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..82b8a5e
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+public-hoist-pattern[]=@mux/mux-player
diff --git a/app/(dashboard)/ai-chat/[id]/chat-client.tsx b/app/(dashboard)/ai-chat/[id]/chat-client.tsx
index 27fc83d..e4e69e3 100644
--- a/app/(dashboard)/ai-chat/[id]/chat-client.tsx
+++ b/app/(dashboard)/ai-chat/[id]/chat-client.tsx
@@ -3,13 +3,16 @@
 import type { UIMessage } from "@ai-sdk/react";
 import { useChat } from "@ai-sdk/react";
 import {
+  IconArrowUp,
   IconBolt,
   IconDatabase,
-  IconSparkles,
+  IconFeather,
   IconUniverse,
 } from "@tabler/icons-react";
-import { createIdGenerator, DefaultChatTransport } from "ai";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { createIdGenerator, DefaultChatTransport, type ToolUIPart } from "ai";
+import { motion } from "framer-motion";
+import type { ReactNode } from "react";
+import { useMemo, useRef, useState } from "react";
 import { AssetDisplay } from "@/components/ai-elements/asset";
 import {
   Conversation,
@@ -19,15 +22,11 @@ import { EventCard } from "@/components/ai-elements/event-card";
 import { Loader } from "@/components/ai-elements/loader";
 import { Message, MessageContent } from "@/components/ai-elements/message";
 import {
-  PromptInput,
-  PromptInputFooter,
   PromptInputModelSelect,
   PromptInputModelSelectContent,
   PromptInputModelSelectItem,
   PromptInputModelSelectTrigger,
   PromptInputModelSelectValue,
-  PromptInputSubmit,
-  PromptInputTextarea,
   PromptInputTools,
 } from "@/components/ai-elements/prompt-input";
 import {
@@ -72,18 +71,64 @@ interface ChatClientProps {
   initialMessages: UIMessage[];
 }
 
+/** Shape of a tool-invocation message part as streamed by the AI SDK. */
+interface ToolMessagePart {
+  state?: ToolUIPart["state"];
+  output?: ToolUIPart["output"];
+  errorText?: ToolUIPart["errorText"];
+  toolName?: string;
+  text?: string;
+}
+
+/**
+ * Renders a tool-invocation part's lifecycle: a loading line while running,
+ * the output via `renderOutput` when available, and an error line on failure.
+ */
+function ToolStatePart({
+  part,
+  loadingLabel,
+  errorLabel,
+  renderOutput,
+}: {
+  part: ToolMessagePart;
+  loadingLabel: string;
+  errorLabel: string;
+  renderOutput: (output: any) => ReactNode;
+}) {
+  if (part.state === "input-available") {
+    return (
+      <div className="flex items-center gap-2 text-sm text-muted-foreground my-2">
+        <div className="animate-pulse">{loadingLabel}</div>
+      </div>
+    );
+  }
+  if (part.state === "output-available") {
+    return <div className="my-3">{renderOutput(part.output)}</div>;
+  }
+  if (part.state === "output-error") {
+    return (
+      <div className="my-2 text-sm text-destructive">
+        {errorLabel}: {part.errorText}
+      </div>
+    );
+  }
+  return null;
+}
+
+const STARTER_PROMPTS = [
+  "Show me the highest-severity events",
+  "What did the cameras detect today?",
+  "Summarize activity at the loading dock",
+  "Create an incident report for this week",
+];
+
 export default function ChatClient({ id, initialMessages }: ChatClientProps) {
   const [selectedModel, setSelectedModel] = useState("claude-haiku-4.5");
   const [input, setInput] = useState("");
   const selectedModelRef = useRef(selectedModel);
+  selectedModelRef.current = selectedModel;
 
-  // Keep ref in sync with state
-  useEffect(() => {
-    selectedModelRef.current = selectedModel;
-  }, [selectedModel]);
-
-  // Create a custom transport that reads model at request time
-  // Using useMemo to ensure transport is only created once per chat id
+  // Created once per chat id; reads the selected model at request time via ref.
   const transport = useMemo(
     () =>
       new DefaultChatTransport({
@@ -96,15 +141,6 @@ export default function ChatClient({ id, initialMessages }: ChatClientProps) {
     [id],
   );
 
-  // Cleanup transport on unmount
-  useEffect(() => {
-    return () => {
-      // DefaultChatTransport doesn't have explicit cleanup methods,
-      // but we ensure it's garbage collected by clearing the reference
-      // The abort controller in the transport will handle ongoing requests
-    };
-  }, [transport]);
-
   const { messages, sendMessage, status } = useChat({
     id,
     messages: initialMessages,
@@ -114,27 +150,137 @@ export default function ChatClient({ id, initialMessages }: ChatClientProps) {
     }),
     transport,
   });
+  const ready = status === "ready";
+
+  const submitPrompt = (text: string) => {
+    const trimmed = text.trim();
+    if (!trimmed || !ready) return;
+    sendMessage({ text: trimmed });
+    setInput("");
+  };
+
+  const modelPicker = (
+    <PromptInputTools>
+      <PromptInputModelSelect
+        onValueChange={setSelectedModel}
+        value={selectedModel}
+      >
+        <PromptInputModelSelectTrigger>
+          <PromptInputModelSelectValue />
+        </PromptInputModelSelectTrigger>
+        <PromptInputModelSelectContent>
+          <TooltipProvider delayDuration={200}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <PromptInputModelSelectItem value="claude-sonnet-4.5">
+                  <IconUniverse className="size-4 mr-2" />
+                  Claude Sonnet 4.5
+                </PromptInputModelSelectItem>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                Advanced reasoning, complex analysis, and deep thinking
+                capabilities
+              </TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <PromptInputModelSelectItem value="claude-haiku-4.5">
+                  <IconFeather className="size-4 mr-2" />
+                  Claude Haiku 4.5
+                </PromptInputModelSelectItem>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                Fast, efficient responses with excellent accuracy
+              </TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <PromptInputModelSelectItem value="kimi-k2">
+                  <IconBolt className="size-4 mr-2" />
+                  Kimi K2 (Provided by Groq)
+                </PromptInputModelSelectItem>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                High-performance alternative with rapid response times
+              </TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <PromptInputModelSelectItem value="stateful-argus">
+                  <IconDatabase className="size-4 mr-2" />
+                  Stateful (Letta Agent)
+                </PromptInputModelSelectItem>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                Long-term memory, file system access, and self-improvement
+                capabilities
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </PromptInputModelSelectContent>
+      </PromptInputModelSelect>
+    </PromptInputTools>
+  );
 
   return (
-    <div className="flex flex-1 flex-col overflow-hidden">
+    <div className="flex min-h-0 w-full flex-1 flex-col overflow-hidden">
       <SiteHeader title="AI Chat">
         <ChatHistoryDropdown currentChatId={id} />
       </SiteHeader>
-      <div className="@container/main flex flex-1 flex-col overflow-hidden">
-        <Conversation className="flex-1 overflow-y-auto">
-          <ConversationContent className="mx-auto w-full max-w-4xl p-4">
+      <div className="@container/main flex min-h-0 flex-1 flex-col overflow-hidden">
+        <Conversation className="min-h-0 flex-1 overflow-y-auto">
+          <ConversationContent className="mx-auto flex min-h-full w-full max-w-4xl flex-col p-4">
             {messages.length === 0 && (
-              <div className="flex h-full min-h-[400px] items-center justify-center">
-                <div className="flex flex-col items-center justify-center h-full w-full">
-                  <div className="text-center">
-                    <h2 className="mb-2 font-medium text-2xl text-muted-foreground">
-                      Start a conversation
-                    </h2>
-                    <p className="text-muted-foreground text-sm">
-                      Ask me anything about your surveillance footage
+              <div className="relative flex min-h-[520px] flex-1 items-center justify-center overflow-hidden px-2 py-8">
+                <div className="pointer-events-none absolute inset-x-0 bottom-0 h-48 bg-[radial-gradient(ellipse_at_bottom,rgba(94,106,210,0.18),rgba(39,166,68,0.08)_42%,transparent_72%)] dark:bg-[radial-gradient(ellipse_at_bottom,rgba(130,143,255,0.16),rgba(39,166,68,0.08)_42%,transparent_72%)]" />
+                <motion.div
+                  initial={{ opacity: 0, y: 14 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.35, ease: "easeOut" }}
+                  className="relative z-10 flex w-full max-w-3xl flex-col items-center gap-7 text-center"
+                >
+                  <div className="flex flex-col gap-3">
+                    <p className="text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground">
+                      Argus AI
                     </p>
+                    <h1 className="text-3xl font-semibold tracking-tight text-foreground sm:text-5xl">
+                      Ask about your footage.
+                    </h1>
+                    <p className="mx-auto max-w-xl text-muted-foreground text-sm leading-6 sm:text-base">
+                      Search events, open recordings, summarize activity, and
+                      generate investigation reports from the demo workspace.
+                    </p>
+                  </div>
+
+                  <ChatHeroComposer
+                    input={input}
+                    ready={ready}
+                    helper="Events, recordings, cameras, and reports"
+                    modelPicker={modelPicker}
+                    onInputChange={setInput}
+                    onSubmit={submitPrompt}
+                  />
+
+                  <div className="grid w-full gap-2 sm:grid-cols-2">
+                    {STARTER_PROMPTS.map((prompt) => (
+                      <motion.button
+                        key={prompt}
+                        type="button"
+                        onClick={() => submitPrompt(prompt)}
+                        disabled={!ready}
+                        whileHover={{ y: -2 }}
+                        whileTap={{ scale: 0.99 }}
+                        transition={{ duration: 0.16, ease: "easeOut" }}
+                        className="cursor-pointer rounded-lg bg-card px-3.5 py-3 text-left text-muted-foreground text-sm leading-5 shadow-sm ring-1 ring-black/5 transition-colors hover:bg-accent hover:text-foreground disabled:opacity-50 dark:ring-white/10"
+                      >
+                        {prompt}
+                      </motion.button>
+                    ))}
                   </div>
-                </div>
+                </motion.div>
               </div>
             )}
 
@@ -148,12 +294,10 @@ export default function ChatClient({ id, initialMessages }: ChatClientProps) {
                 <Message from={message.role} key={message.id}>
                   <MessageContent variant="flat">
                     {message.parts.map((part, index) => {
-                      // Render text parts
                       if (part.type === "text") {
                         return <Response key={index}>{part.text}</Response>;
                       }
 
-                      // Render reasoning parts
                       if (part.type === "reasoning") {
                         return (
                           <Reasoning
@@ -163,161 +307,84 @@ export default function ChatClient({ id, initialMessages }: ChatClientProps) {
                           >
                             <ReasoningTrigger />
                             <ReasoningContent>
-                              {(part as any).text}
+                              {(part as ToolMessagePart).text ?? ""}
                             </ReasoningContent>
                           </Reasoning>
                         );
                       }
 
-                      // Render event display tools with EventCard
                       if (
                         part.type === "tool-displayEvent" ||
                         part.type === "tool-displayEventById"
                       ) {
-                        const state = (part as any).state;
-
-                        if (state === "input-available") {
-                          return (
-                            <div
-                              key={index}
-                              className="flex items-center gap-2 text-sm text-muted-foreground my-2"
-                            >
-                              <div className="animate-pulse">
-                                Loading event...
-                              </div>
-                            </div>
-                          );
-                        }
-
-                        if (state === "output-available") {
-                          return (
-                            <div key={index} className="my-3">
-                              <EventCard {...(part as any).output} />
-                            </div>
-                          );
-                        }
-
-                        if (state === "output-error") {
-                          return (
-                            <div
-                              key={index}
-                              className="my-2 text-sm text-destructive"
-                            >
-                              Error loading event: {(part as any).errorText}
-                            </div>
-                          );
-                        }
-
-                        return null;
+                        return (
+                          <ToolStatePart
+                            key={index}
+                            part={part as ToolMessagePart}
+                            loadingLabel="Loading event..."
+                            errorLabel="Error loading event"
+                            renderOutput={(output) => <EventCard {...output} />}
+                          />
+                        );
                       }
 
-                      // Render asset display tools with AssetDisplay
                       if (part.type === "tool-displayAsset") {
-                        const state = (part as any).state;
-
-                        if (state === "input-available") {
-                          return (
-                            <div
-                              key={index}
-                              className="flex items-center gap-2 text-sm text-muted-foreground my-2"
-                            >
-                              <div className="animate-pulse">
-                                Loading video...
-                              </div>
-                            </div>
-                          );
-                        }
-
-                        if (state === "output-available") {
-                          return (
-                            <div key={index} className="my-3">
-                              <AssetDisplay {...(part as any).output} />
-                            </div>
-                          );
-                        }
-
-                        if (state === "output-error") {
-                          return (
-                            <div
-                              key={index}
-                              className="my-2 text-sm text-destructive"
-                            >
-                              Error loading video: {(part as any).errorText}
-                            </div>
-                          );
-                        }
-
-                        return null;
+                        return (
+                          <ToolStatePart
+                            key={index}
+                            part={part as ToolMessagePart}
+                            loadingLabel="Loading video..."
+                            errorLabel="Error loading video"
+                            renderOutput={(output) => (
+                              <AssetDisplay {...output} />
+                            )}
+                          />
+                        );
                       }
 
-                      // Render report creation tool with Report preview
                       if (part.type === "tool-createReport") {
-                        const state = (part as any).state;
-
-                        if (state === "input-available") {
-                          return (
-                            <div
-                              key={index}
-                              className="flex items-center gap-2 text-sm text-muted-foreground my-2"
-                            >
-                              <div className="animate-pulse">
-                                Creating report...
-                              </div>
-                            </div>
-                          );
-                        }
-
-                        if (state === "output-available") {
-                          return (
-                            <div key={index} className="my-3">
-                              <Report data={(part as any).output} />
-                            </div>
-                          );
-                        }
-
-                        if (state === "output-error") {
-                          return (
-                            <div
-                              key={index}
-                              className="my-2 text-sm text-destructive"
-                            >
-                              Error creating report: {(part as any).errorText}
-                            </div>
-                          );
-                        }
-
-                        return null;
+                        return (
+                          <ToolStatePart
+                            key={index}
+                            part={part as ToolMessagePart}
+                            loadingLabel="Creating report..."
+                            errorLabel="Error creating report"
+                            renderOutput={(output) => <Report data={output} />}
+                          />
+                        );
                       }
 
-                      // Render tool invocations (both static and dynamic)
+                      // Generic fallback for any other tool invocation.
                       if (
                         part.type.startsWith("tool-") ||
                         part.type === "dynamic-tool"
                       ) {
+                        const p = part as ToolMessagePart;
                         const toolName =
                           part.type === "dynamic-tool"
-                            ? (part as any).toolName
+                            ? p.toolName
                             : part.type.replace("tool-", "");
 
-                        const displayName = TOOL_NAME_MAP[toolName] || toolName;
+                        const displayName =
+                          TOOL_NAME_MAP[toolName ?? ""] || toolName;
 
                         const toolType =
                           part.type === "dynamic-tool"
-                            ? (`tool-${(part as any).toolName}` as `tool-${string}`)
+                            ? (`tool-${p.toolName}` as `tool-${string}`)
                             : (part.type as `tool-${string}`);
 
                         return (
                           <Tool key={index}>
                             <ToolHeader
-                              state={(part as any).state}
+                              state={p.state ?? "input-streaming"}
                               title={displayName}
                               type={toolType}
                             />
-                            {(part as any).state === "output-available" && (
+                            {p.state === "output-available" && (
                               <ToolContent>
                                 <ToolOutput
-                                  output={(part as any).output}
-                                  errorText={(part as any).errorText}
+                                  output={p.output}
+                                  errorText={p.errorText}
                                 />
                               </ToolContent>
                             )}
@@ -342,94 +409,92 @@ export default function ChatClient({ id, initialMessages }: ChatClientProps) {
           </ConversationContent>
         </Conversation>
 
-        <div className="border-t bg-background p-4">
-          <div className="mx-auto w-full max-w-4xl">
-            <PromptInput
-              onSubmit={(message, event) => {
-                event.preventDefault();
-                if (input.trim() && status === "ready") {
-                  sendMessage({ text: input });
-                  setInput("");
-                }
-              }}
-            >
-              <PromptInputTextarea
-                onChange={(e) => setInput(e.target.value)}
-                placeholder="Ask about your videos..."
-                value={input}
-                disabled={status !== "ready"}
+        {messages.length > 0 && (
+          <div className="bg-background p-4">
+            <div className="mx-auto w-full max-w-4xl">
+              <ChatHeroComposer
+                compact
+                input={input}
+                ready={ready}
+                helper="Events, recordings, cameras, and reports"
+                modelPicker={modelPicker}
+                onInputChange={setInput}
+                onSubmit={submitPrompt}
               />
-              <PromptInputFooter>
-                <PromptInputTools>
-                  <PromptInputModelSelect
-                    onValueChange={setSelectedModel}
-                    value={selectedModel}
-                  >
-                    <PromptInputModelSelectTrigger>
-                      <PromptInputModelSelectValue />
-                    </PromptInputModelSelectTrigger>
-                    <PromptInputModelSelectContent>
-                      <TooltipProvider delayDuration={200}>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <PromptInputModelSelectItem value="claude-sonnet-4.5">
-                              <IconUniverse className="size-4 mr-2" />
-                              Claude Sonnet 4.5
-                            </PromptInputModelSelectItem>
-                          </TooltipTrigger>
-                          <TooltipContent side="right">
-                            Advanced reasoning, complex analysis, and deep
-                            thinking capabilities
-                          </TooltipContent>
-                        </Tooltip>
-
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <PromptInputModelSelectItem value="claude-haiku-4.5">
-                              <IconSparkles className="size-4 mr-2" />
-                              Claude Haiku 4.5
-                            </PromptInputModelSelectItem>
-                          </TooltipTrigger>
-                          <TooltipContent side="right">
-                            Fast, efficient responses with excellent accuracy
-                          </TooltipContent>
-                        </Tooltip>
-
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <PromptInputModelSelectItem value="kimi-k2">
-                              <IconBolt className="size-4 mr-2" />
-                              Kimi K2 (Provided by Groq)
-                            </PromptInputModelSelectItem>
-                          </TooltipTrigger>
-                          <TooltipContent side="right">
-                            High-performance alternative with rapid response
-                            times
-                          </TooltipContent>
-                        </Tooltip>
-
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <PromptInputModelSelectItem value="stateful-argus">
-                              <IconDatabase className="size-4 mr-2" />
-                              Stateful (Letta Agent)
-                            </PromptInputModelSelectItem>
-                          </TooltipTrigger>
-                          <TooltipContent side="right">
-                            Long-term memory, file system access, and
-                            self-improvement capabilities
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                    </PromptInputModelSelectContent>
-                  </PromptInputModelSelect>
-                </PromptInputTools>
-                <PromptInputSubmit disabled={status !== "ready"} />
-              </PromptInputFooter>
-            </PromptInput>
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );
 }
+
+function ChatHeroComposer({
+  input,
+  ready,
+  helper,
+  modelPicker,
+  compact = false,
+  onInputChange,
+  onSubmit,
+}: {
+  input: string;
+  ready: boolean;
+  helper: string;
+  modelPicker: ReactNode;
+  compact?: boolean;
+  onInputChange: (value: string) => void;
+  onSubmit: (text: string) => void;
+}) {
+  const submit = () => {
+    if (!ready) return;
+    onSubmit(input);
+  };
+
+  return (
+    <motion.div
+      layout
+      className="w-full rounded-xl bg-card p-2 shadow-xl shadow-black/10 ring-1 ring-black/5 dark:shadow-black/30 dark:ring-white/10"
+    >
+      <div
+        className={`flex flex-col gap-3 rounded-lg bg-muted p-3 text-left ${
+          compact ? "min-h-24" : "min-h-28"
+        }`}
+      >
+        <textarea
+          value={input}
+          onChange={(event) => onInputChange(event.currentTarget.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && !event.shiftKey) {
+              event.preventDefault();
+              submit();
+            }
+          }}
+          disabled={!ready}
+          placeholder="Ask about your videos..."
+          className={`resize-none bg-transparent text-foreground outline-none placeholder:text-muted-foreground ${
+            compact ? "min-h-14 text-sm" : "min-h-20 text-base"
+          }`}
+        />
+        <div className="flex items-center justify-between gap-3">
+          <div className="min-w-0 flex items-center gap-2">
+            <span className="hidden text-muted-foreground text-xs sm:inline">
+              {helper}
+            </span>
+            {modelPicker}
+          </div>
+          <motion.button
+            type="button"
+            onClick={submit}
+            disabled={!input.trim() || !ready}
+            aria-label="Send message"
+            whileTap={{ scale: 0.94 }}
+            className="flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-md bg-slate-900 text-white transition-colors hover:bg-slate-700 disabled:opacity-40 dark:bg-slate-100 dark:text-slate-950 dark:hover:bg-white"
+          >
+            <IconArrowUp className="size-4" />
+          </motion.button>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
diff --git a/app/(dashboard)/database/page.tsx b/app/(dashboard)/database/page.tsx
index 74366ca..a8d71d2 100644
--- a/app/(dashboard)/database/page.tsx
+++ b/app/(dashboard)/database/page.tsx
@@ -1,165 +1,104 @@
 "use client";
 
-import { AlertTriangle, Database, RefreshCw } from "lucide-react";
-import { useState } from "react";
-import { SiteHeader } from "@/components/site-header";
+import { useMemo, useState } from "react";
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+  assetColumns,
+  cameraColumns,
+  eventColumns,
+  jobColumns,
+} from "@/components/database/columns";
+import { DataTable } from "@/components/database/data-table";
+import { StatTile } from "@/components/database/stat-tile";
+import { PageContainer } from "@/components/page-container";
+import { PageHeader } from "@/components/page-header";
+import { SiteHeader } from "@/components/site-header";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useDemoSession } from "@/hooks/use-demo-session";
+import { isDemoMode } from "@/lib/demo/flag";
 import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-
-export default function DatabasePage() {
-  const [syncing, setSyncing] = useState(false);
-  const [syncResult, setSyncResult] = useState<{
-    events: number;
-    analysis: number;
-  } | null>(null);
+  mockAnalysisJobs,
+  mockAssets,
+  mockCameras,
+  mockEvents,
+} from "@/lib/demo/mock-data";
 
-  const handleReindex = async () => {
-    setSyncing(true);
-    setSyncResult(null);
+const TABS = ["Cameras", "Recordings", "Events", "Jobs"] as const;
+type Tab = (typeof TABS)[number];
 
-    try {
-      const response = await fetch("/api/search/sync?type=all", {
-        method: "POST",
-      });
+export default function DatabasePage() {
+  const session = useDemoSession();
+  const [tab, setTab] = useState<Tab>("Cameras");
 
-      const data = await response.json();
+  const cameras = useMemo(
+    () => (isDemoMode ? [...session.cameras, ...mockCameras] : mockCameras),
+    [session.cameras],
+  );
 
-      if (response.ok) {
-        setSyncResult(data.counts);
-      } else {
-        console.error("Reindex error:", data.error);
-        alert(`Reindex failed: ${data.error}`);
-      }
-    } catch (error) {
-      console.error("Reindex failed:", error);
-      alert("Reindex failed. Check console for details.");
-    } finally {
-      setSyncing(false);
-    }
+  const counts: Record<Tab, number> = {
+    Cameras: cameras.length,
+    Recordings: mockAssets.length,
+    Events: mockEvents.length,
+    Jobs: mockAnalysisJobs.length,
   };
 
   return (
     <div className="flex flex-1 flex-col">
-      <SiteHeader title="Database" />
-      <div className="@container/main flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6">
-        <Card>
-          <CardHeader>
-            <CardTitle>Database</CardTitle>
-            <CardDescription>
-              Explore Events, Entities, and more.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <p className="text-muted-foreground">Database UI coming soon.</p>
-          </CardContent>
-        </Card>
+      <SiteHeader title="Data Explorer" />
+      <PageContainer>
+        <PageHeader
+          title="Data Explorer"
+          description="Browse every camera, recording, detected event, and analysis job in the workspace."
+        />
 
-        {/* Admin Section */}
-        <Card className="border-orange-500/50">
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <div>
-                <CardTitle className="flex items-center gap-2">
-                  <Database className="h-5 w-5" />
-                  Admin Tools
-                  <Badge variant="outline" className="text-orange-600">
-                    <AlertTriangle className="h-3 w-3 mr-1" />
-                    Dev/Admin Only
-                  </Badge>
-                </CardTitle>
-                <CardDescription>
-                  Administrative operations for managing search indices
-                </CardDescription>
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {/* Reindex Button */}
-            <div className="flex flex-col gap-3 p-4 border rounded-lg bg-muted/50">
-              <div className="flex items-start justify-between">
-                <div className="flex-1">
-                  <h3 className="font-semibold mb-1">Reindex Search Data</h3>
-                  <p className="text-sm text-muted-foreground mb-3">
-                    Clear and rebuild the Elasticsearch index with all events
-                    and analysis results from the database. This will sync all
-                    existing data to make it searchable.
-                  </p>
-                </div>
-              </div>
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+          <StatTile label="Cameras" value={counts.Cameras} />
+          <StatTile label="Recordings" value={counts.Recordings} />
+          <StatTile label="Events" value={counts.Events} />
+          <StatTile label="Analysis jobs" value={counts.Jobs} />
+        </div>
 
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button
-                    variant="outline"
-                    disabled={syncing}
-                    className="w-fit"
-                  >
-                    <RefreshCw
-                      className={`h-4 w-4 mr-2 ${syncing ? "animate-spin" : ""}`}
-                    />
-                    {syncing ? "Reindexing..." : "Reindex All Search Data"}
-                  </Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent>
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>Reindex Search Data?</AlertDialogTitle>
-                    <AlertDialogDescription>
-                      This will reindex all events and analysis results to
-                      Elasticsearch. This operation may take a few moments
-                      depending on the amount of data.
-                      <br />
-                      <br />
-                      <strong>
-                        This is safe to run and won't delete any database data.
-                      </strong>
-                    </AlertDialogDescription>
-                  </AlertDialogHeader>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel>Cancel</AlertDialogCancel>
-                    <AlertDialogAction onClick={handleReindex}>
-                      Continue
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
+        <Tabs value={tab} onValueChange={(value) => setTab(value as Tab)}>
+          <TabsList>
+            {TABS.map((t) => (
+              <TabsTrigger key={t} value={t}>
+                {t}
+                <span className="ml-1.5 text-xs text-muted-foreground">
+                  {counts[t]}
+                </span>
+              </TabsTrigger>
+            ))}
+          </TabsList>
 
-              {syncResult && (
-                <div className="mt-3 p-3 bg-green-500/10 border border-green-500/20 rounded-md">
-                  <p className="text-sm font-medium text-green-700 dark:text-green-400">
-                    ✓ Reindex completed successfully
-                  </p>
-                  <div className="mt-2 flex gap-4 text-xs text-muted-foreground">
-                    <span>
-                      Events: <strong>{syncResult.events}</strong>
-                    </span>
-                    <span>
-                      Analysis: <strong>{syncResult.analysis}</strong>
-                    </span>
-                  </div>
-                </div>
-              )}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
+          <TabsContent value="Cameras">
+            <DataTable
+              columns={cameraColumns}
+              data={cameras}
+              searchPlaceholder="Search cameras…"
+            />
+          </TabsContent>
+          <TabsContent value="Recordings">
+            <DataTable
+              columns={assetColumns}
+              data={mockAssets}
+              searchPlaceholder="Search recordings…"
+            />
+          </TabsContent>
+          <TabsContent value="Events">
+            <DataTable
+              columns={eventColumns}
+              data={mockEvents}
+              searchPlaceholder="Search events…"
+            />
+          </TabsContent>
+          <TabsContent value="Jobs">
+            <DataTable
+              columns={jobColumns}
+              data={mockAnalysisJobs}
+              searchPlaceholder="Search jobs…"
+            />
+          </TabsContent>
+        </Tabs>
+      </PageContainer>
     </div>
   );
 }
diff --git a/app/(dashboard)/debug/page.tsx b/app/(dashboard)/debug/page.tsx
index a47e3b9..56e7ee3 100644
--- a/app/(dashboard)/debug/page.tsx
+++ b/app/(dashboard)/debug/page.tsx
@@ -1,23 +1,66 @@
 "use client";
 
 import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 import { toast } from "sonner";
-import { Button } from "@/components/ui/button";
+import { PageContainer } from "@/components/page-container";
+import { PageHeader } from "@/components/page-header";
 import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+  Surface,
+  SurfaceContent,
+  SurfaceDescription,
+  SurfaceHeader,
+  SurfaceTitle,
+} from "@/components/surface";
+import { Button } from "@/components/ui/button";
+import { isDemoMode } from "@/lib/demo/flag";
+
+type Severity = "High" | "Medium";
+
+interface CriticalEventPreview {
+  severity: Severity;
+  title: string;
+  description: string;
+  timestamp: string;
+}
+
+const SEVERITY_PILL_CLASS: Record<Severity, string> = {
+  High: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
+  Medium:
+    "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
+};
+
+const SAMPLE_CRITICAL_EVENTS: Record<"high" | "medium", CriticalEventPreview> =
+  {
+    high: {
+      severity: "High",
+      title: "Shoplifting Incident",
+      description:
+        "A person wearing a blue jacket is seen taking a product from the shelf and concealing it without paying.",
+      timestamp: "0:05",
+    },
+    medium: {
+      severity: "Medium",
+      title: "Suspicious Behavior",
+      description:
+        "Individual loitering near high-value merchandise for extended period.",
+      timestamp: "2:34",
+    },
+  };
 
 export default function DebugPage() {
   const router = useRouter();
 
+  // Debug tools are not part of the public demo — redirect home.
+  useEffect(() => {
+    if (isDemoMode) router.replace("/watch");
+  }, [router]);
+
+  if (isDemoMode) return null;
+
   const showRegularToast = () => {
     toast("Regular Toast", {
-      description:
-        "This is a regular Sonner toast notification with JetBrains Mono font.",
+      description: "This is a regular Sonner toast notification.",
     });
   };
 
@@ -51,55 +94,26 @@ export default function DebugPage() {
     });
   };
 
-  const showCriticalEventToast = () => {
+  const showCriticalEventToast = (event: CriticalEventPreview) => {
     toast.warning(
       <div className="flex flex-col gap-2 max-w-sm">
         <div className="flex items-center gap-2">
-          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
-            High
-          </span>
-          <div className="font-semibold">Shoplifting Incident</div>
-        </div>
-        <div className="text-sm text-muted-foreground line-clamp-2">
-          A person wearing a blue jacket is seen taking a product from the shelf
-          and concealing it without paying.
-        </div>
-        <div className="flex items-center justify-between mt-1">
-          <span className="text-xs text-muted-foreground">0:05</span>
-          <button
-            onClick={() => {
-              toast.info("View Video clicked!", {
-                description:
-                  "This would navigate to the video at the specified timestamp.",
-              });
-            }}
-            className="inline-flex items-center px-3 py-1 rounded-md text-xs font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+          <span
+            className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${SEVERITY_PILL_CLASS[event.severity]}`}
           >
-            View Video
-          </button>
-        </div>
-      </div>,
-      {
-        duration: 8000,
-      },
-    );
-  };
-
-  const showCriticalEventMediumSeverity = () => {
-    toast.warning(
-      <div className="flex flex-col gap-2 max-w-sm">
-        <div className="flex items-center gap-2">
-          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
-            Medium
+            {event.severity}
           </span>
-          <div className="font-semibold">Suspicious Behavior</div>
+          <div className="font-semibold">{event.title}</div>
         </div>
         <div className="text-sm text-muted-foreground line-clamp-2">
-          Individual loitering near high-value merchandise for extended period.
+          {event.description}
         </div>
         <div className="flex items-center justify-between mt-1">
-          <span className="text-xs text-muted-foreground">2:34</span>
+          <span className="text-xs text-muted-foreground">
+            {event.timestamp}
+          </span>
           <button
+            type="button"
             onClick={() => {
               toast.info("View Video clicked!", {
                 description:
@@ -112,32 +126,26 @@ export default function DebugPage() {
           </button>
         </div>
       </div>,
-      {
-        duration: 8000,
-      },
+      { duration: 8000 },
     );
   };
 
   return (
-    <div className="flex-1 overflow-auto p-8">
-      <div className="max-w-4xl mx-auto space-y-6">
-        <div>
-          <h1 className="text-3xl font-bold mb-2">Debug Tools</h1>
-          <p className="text-muted-foreground">
-            Test various components and features in development
-          </p>
-        </div>
+    <div className="flex-1 overflow-auto">
+      <PageContainer>
+        <PageHeader
+          title="Debug Tools"
+          description="Test various components and features in development."
+        />
 
-        {/* Sonner Toast Tests */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Sonner Toast Notifications</CardTitle>
-            <CardDescription>
-              Test different types of toast notifications with JetBrains Mono
-              font
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
+        <Surface>
+          <SurfaceHeader>
+            <SurfaceTitle>Sonner Toast Notifications</SurfaceTitle>
+            <SurfaceDescription>
+              Test different types of toast notifications
+            </SurfaceDescription>
+          </SurfaceHeader>
+          <SurfaceContent className="space-y-4">
             <div>
               <h3 className="text-sm font-semibold mb-3">Standard Toasts</h3>
               <div className="flex flex-wrap gap-2">
@@ -167,11 +175,18 @@ export default function DebugPage() {
                 Critical Event Toasts
               </h3>
               <div className="flex flex-wrap gap-2">
-                <Button onClick={showCriticalEventToast} variant="destructive">
+                <Button
+                  onClick={() =>
+                    showCriticalEventToast(SAMPLE_CRITICAL_EVENTS.high)
+                  }
+                  variant="destructive"
+                >
                   Critical Event (High)
                 </Button>
                 <Button
-                  onClick={showCriticalEventMediumSeverity}
+                  onClick={() =>
+                    showCriticalEventToast(SAMPLE_CRITICAL_EVENTS.medium)
+                  }
                   variant="default"
                 >
                   Critical Event (Medium)
@@ -183,24 +198,9 @@ export default function DebugPage() {
                 right.
               </p>
             </div>
-          </CardContent>
-        </Card>
-
-        {/* Placeholder for future debug tools */}
-        <Card>
-          <CardHeader>
-            <CardTitle>More Debug Tools</CardTitle>
-            <CardDescription>
-              Additional debugging utilities will be added here
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <p className="text-sm text-muted-foreground">
-              More debug tools coming soon...
-            </p>
-          </CardContent>
-        </Card>
-      </div>
+          </SurfaceContent>
+        </Surface>
+      </PageContainer>
     </div>
   );
 }
diff --git a/app/(dashboard)/jobs/page.tsx b/app/(dashboard)/jobs/page.tsx
index b4ca455..7623d1c 100644
--- a/app/(dashboard)/jobs/page.tsx
+++ b/app/(dashboard)/jobs/page.tsx
@@ -21,6 +21,8 @@ import {
 } from "lucide-react";
 import React from "react";
 import { columns } from "@/components/jobs/columns";
+import { PageContainer } from "@/components/page-container";
+import { PageHeader } from "@/components/page-header";
 import { SiteHeader } from "@/components/site-header";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -124,7 +126,11 @@ export default function JobsPage() {
   return (
     <div className="flex flex-1 flex-col overflow-hidden">
       <SiteHeader title="AI Analysis Jobs" />
-      <div className="@container/main flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6 overflow-hidden">
+      <PageContainer className="overflow-hidden">
+        <PageHeader
+          title="AI Analysis Jobs"
+          description="Monitor the AI analysis queue across uploads and live streams."
+        />
         {/* Stats Cards */}
         <div className="grid gap-4 md:grid-cols-6">
           <Card variant="revealed-pointer">
@@ -464,7 +470,7 @@ export default function JobsPage() {
             </div>
           </CardContent>
         </Card>
-      </div>
+      </PageContainer>
     </div>
   );
 }
diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
index ac95922..60b7d96 100644
--- a/app/(dashboard)/layout.tsx
+++ b/app/(dashboard)/layout.tsx
@@ -4,9 +4,9 @@ import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 
 export default function DashboardLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) {
   return (
     <SidebarProvider
       className="h-full"
diff --git a/app/(dashboard)/reports/page.tsx b/app/(dashboard)/reports/page.tsx
index 079ccb7..17f5e3d 100644
--- a/app/(dashboard)/reports/page.tsx
+++ b/app/(dashboard)/reports/page.tsx
@@ -4,9 +4,11 @@ import { IconLoader2, IconPlus } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { toast } from "sonner";
+import { CtaLink } from "@/components/cta-link";
+import { PageContainer } from "@/components/page-container";
+import { PageHeader } from "@/components/page-header";
 import { ReportsList } from "@/components/reports/reports-list";
 import { SiteHeader } from "@/components/site-header";
-import { Button } from "@/components/ui/button";
 import { useReportsRealtime } from "@/hooks/use-reports-realtime";
 
 export default function ReportsPage() {
@@ -55,47 +57,42 @@ export default function ReportsPage() {
 
   return (
     <div className="flex flex-1 flex-col overflow-hidden">
-      <SiteHeader title="Reports">
-        <Button
-          onClick={handleCreateReport}
-          disabled={creating}
-          className="gap-2"
-        >
-          {creating ? (
-            <>
-              <IconLoader2 className="h-4 w-4 animate-spin" />
-              Creating...
-            </>
-          ) : (
-            <>
-              <IconPlus className="h-4 w-4" />
-              New Report
-            </>
-          )}
-        </Button>
-      </SiteHeader>
+      <SiteHeader title="Reports" />
 
       <div className="flex-1 overflow-y-auto">
-        <div className="container mx-auto max-w-7xl p-6">
-          <div className="mb-8">
-            <h2 className="mb-2 font-semibold text-3xl">Your Reports</h2>
-            <p className="text-muted-foreground">
-              Create and manage your documentation and reports
-            </p>
-          </div>
+        <PageContainer>
+          <PageHeader
+            title="Your Reports"
+            description="Create and manage your documentation and reports."
+            actions={
+              <CtaLink onClick={handleCreateReport} disabled={creating}>
+                {creating ? (
+                  <>
+                    <IconLoader2 className="h-4 w-4 animate-spin" />
+                    Creating...
+                  </>
+                ) : (
+                  <>
+                    <IconPlus className="h-4 w-4" />
+                    New Report
+                  </>
+                )}
+              </CtaLink>
+            }
+          />
 
           {loading ? (
             <div className="flex h-[400px] items-center justify-center">
               <IconLoader2 className="h-8 w-8 animate-spin text-muted-foreground" />
             </div>
           ) : error ? (
-            <div className="rounded-lg border border-destructive bg-destructive/10 p-4">
+            <div className="border border-destructive bg-destructive/10 p-4">
               <p className="text-destructive text-sm">{error}</p>
             </div>
           ) : (
             <ReportsList reports={reports} onDelete={handleDeleteReport} />
           )}
-        </div>
+        </PageContainer>
       </div>
     </div>
   );
diff --git a/app/(dashboard)/search/page.tsx b/app/(dashboard)/search/page.tsx
index 293360d..8f5675f 100644
--- a/app/(dashboard)/search/page.tsx
+++ b/app/(dashboard)/search/page.tsx
@@ -9,19 +9,21 @@ import {
   X,
 } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useState, Suspense } from "react";
+import { Suspense, useCallback, useEffect, useState } from "react";
 import type { DateRange } from "react-day-picker";
+import { PageContainer } from "@/components/page-container";
+import { PageHeader } from "@/components/page-header";
 import { SiteHeader } from "@/components/site-header";
+import {
+  Surface,
+  SurfaceContent,
+  SurfaceDescription,
+  SurfaceHeader,
+  SurfaceTitle,
+} from "@/components/surface";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -44,6 +46,7 @@ import type {
   SearchHit,
 } from "@/lib/types/elasticsearch";
 import { formatDuration, getThumbnailUrl } from "@/lib/types/elasticsearch";
+import { cn } from "@/lib/utils";
 
 interface SearchResponse {
   query: string;
@@ -72,6 +75,57 @@ const EVENT_TYPES: EventType[] = [
 
 const SEVERITIES: EventSeverity[] = ["Minor", "Medium", "High"];
 
+interface FilterToggleBadgeProps {
+  label: string;
+  active: boolean;
+  onToggle: () => void;
+  activeClassName?: string;
+}
+
+function FilterToggleBadge({
+  label,
+  active,
+  onToggle,
+  activeClassName,
+}: FilterToggleBadgeProps) {
+  return (
+    <Badge
+      variant={active && !activeClassName ? "default" : "outline"}
+      className={cn(
+        "cursor-pointer transition-colors",
+        active ? activeClassName : "hover:bg-accent",
+      )}
+      onClick={onToggle}
+    >
+      {label}
+    </Badge>
+  );
+}
+
+interface ActiveFilterBadgeProps {
+  label: string;
+  onRemove: () => void;
+}
+
+function ActiveFilterBadge({ label, onRemove }: ActiveFilterBadgeProps) {
+  return (
+    <Badge variant="secondary" className="text-xs">
+      {label}
+      <button
+        type="button"
+        className="ml-1 inline-flex items-center rounded-sm hover:bg-accent hover:text-accent-foreground"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onRemove();
+        }}
+      >
+        <X className="h-3 w-3" />
+      </button>
+    </Badge>
+  );
+}
+
 function SearchContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -115,13 +169,8 @@ function SearchContent() {
   // Debounced search
   const handleSearch = useCallback(
     async (searchQuery: string) => {
-      // Allow search with just filters (no query required)
-      if (!searchQuery.trim() && !hasActiveFilters) {
-        setResults([]);
-        setSearchResponse(null);
-        return;
-      }
-
+      // No query and no filters → show recent results (wildcard) instead of an
+      // empty screen, so the page is always populated.
       setLoading(true);
       try {
         const params = new URLSearchParams();
@@ -162,7 +211,7 @@ function SearchContent() {
         setLoading(false);
       }
     },
-    [selectedSeverities, selectedEventTypes, dateRange, hasActiveFilters],
+    [selectedSeverities, selectedEventTypes, dateRange],
   );
 
   // Debounce search as user types
@@ -172,7 +221,9 @@ function SearchContent() {
     }, 300); // 300ms debounce
 
     return () => clearTimeout(timer);
-  }, [query, selectedSeverities, selectedEventTypes, dateRange, handleSearch]);
+    // handleSearch already changes when the filters change, so depending on it
+    // (plus the query) covers every input without re-listing each filter.
+  }, [query, handleSearch]);
 
   // Update URL params when search state changes
   useEffect(() => {
@@ -274,19 +325,21 @@ function SearchContent() {
     <div className="flex flex-1 flex-col min-h-0">
       <SiteHeader title="Search" />
       <ScrollArea className="flex-1 min-h-0">
-        <div className="@container/main flex flex-col gap-4 p-4 md:gap-6 md:p-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Search Content</CardTitle>
-              <CardDescription>
+        <PageContainer>
+          <PageHeader
+            title="Search"
+            description="Query AI analysis and event documents indexed in Elasticsearch."
+          />
+          <Surface>
+            <SurfaceHeader>
+              <SurfaceTitle>Search Content</SurfaceTitle>
+              <SurfaceDescription>
                 Search across AI-detected events and video analysis
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              {/* Search Bar with Filters */}
+              </SurfaceDescription>
+            </SurfaceHeader>
+            <SurfaceContent className="space-y-4">
               <div className="flex flex-col gap-2">
                 <div className="flex gap-2">
-                  {/* Search Input with Icon */}
                   <div className="relative flex-1">
                     <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                     <Input
@@ -302,7 +355,6 @@ function SearchContent() {
                     )}
                   </div>
 
-                  {/* Filters Dropdown */}
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                       <Button
@@ -320,55 +372,41 @@ function SearchContent() {
                       <DropdownMenuLabel>Filters</DropdownMenuLabel>
                       <DropdownMenuSeparator />
 
-                      {/* Severity Filter with Badges */}
                       <div className="px-2 py-3">
                         <div className="text-sm font-medium mb-3">Severity</div>
                         <div className="flex flex-wrap gap-2">
                           {SEVERITIES.map((severity) => (
-                            <Badge
+                            <FilterToggleBadge
                               key={severity}
-                              variant="outline"
-                              className={`cursor-pointer transition-colors ${
-                                selectedSeverities.includes(severity)
-                                  ? getSeverityBadgeClass(severity)
-                                  : "hover:bg-accent"
-                              }`}
-                              onClick={() => toggleSeverity(severity)}
-                            >
-                              {severity}
-                            </Badge>
+                              label={severity}
+                              active={selectedSeverities.includes(severity)}
+                              activeClassName={getSeverityBadgeClass(severity)}
+                              onToggle={() => toggleSeverity(severity)}
+                            />
                           ))}
                         </div>
                       </div>
 
                       <DropdownMenuSeparator />
 
-                      {/* Event Type Filter with Badges */}
                       <div className="px-2 py-3">
                         <div className="text-sm font-medium mb-3">
                           Event Type
                         </div>
                         <div className="flex flex-wrap gap-2 max-h-48 overflow-y-auto">
                           {EVENT_TYPES.map((eventType) => (
-                            <Badge
+                            <FilterToggleBadge
                               key={eventType}
-                              variant={
-                                selectedEventTypes.includes(eventType)
-                                  ? "default"
-                                  : "outline"
-                              }
-                              className="cursor-pointer"
-                              onClick={() => toggleEventType(eventType)}
-                            >
-                              {eventType}
-                            </Badge>
+                              label={eventType}
+                              active={selectedEventTypes.includes(eventType)}
+                              onToggle={() => toggleEventType(eventType)}
+                            />
                           ))}
                         </div>
                       </div>
 
                       <DropdownMenuSeparator />
 
-                      {/* Date Range Filter with Calendar */}
                       <div className="px-2 py-3">
                         <div className="text-sm font-medium mb-3">
                           <CalendarIcon className="h-4 w-4 inline mr-1" />
@@ -427,65 +465,27 @@ function SearchContent() {
                   </DropdownMenu>
                 </div>
 
-                {/* Active Filters Display */}
                 {hasActiveFilters && (
                   <div className="flex flex-wrap gap-2">
                     {selectedSeverities.map((severity) => (
-                      <Badge
+                      <ActiveFilterBadge
                         key={severity}
-                        variant="secondary"
-                        className="text-xs"
-                      >
-                        Severity: {severity}
-                        <button
-                          type="button"
-                          className="ml-1 inline-flex items-center rounded-sm hover:bg-accent hover:text-accent-foreground"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            toggleSeverity(severity);
-                          }}
-                        >
-                          <X className="h-3 w-3" />
-                        </button>
-                      </Badge>
+                        label={`Severity: ${severity}`}
+                        onRemove={() => toggleSeverity(severity)}
+                      />
                     ))}
                     {selectedEventTypes.map((eventType) => (
-                      <Badge
+                      <ActiveFilterBadge
                         key={eventType}
-                        variant="secondary"
-                        className="text-xs"
-                      >
-                        {eventType}
-                        <button
-                          type="button"
-                          className="ml-1 inline-flex items-center rounded-sm hover:bg-accent hover:text-accent-foreground"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            toggleEventType(eventType);
-                          }}
-                        >
-                          <X className="h-3 w-3" />
-                        </button>
-                      </Badge>
+                        label={eventType}
+                        onRemove={() => toggleEventType(eventType)}
+                      />
                     ))}
                     {dateRange?.from && dateRange?.to && (
-                      <Badge variant="secondary" className="text-xs">
-                        {format(dateRange.from, "LLL dd, y")} to{" "}
-                        {format(dateRange.to, "LLL dd, y")}
-                        <button
-                          type="button"
-                          className="ml-1 inline-flex items-center rounded-sm hover:bg-accent hover:text-accent-foreground"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            setDateRange(undefined);
-                          }}
-                        >
-                          <X className="h-3 w-3" />
-                        </button>
-                      </Badge>
+                      <ActiveFilterBadge
+                        label={`${format(dateRange.from, "LLL dd, y")} to ${format(dateRange.to, "LLL dd, y")}`}
+                        onRemove={() => setDateRange(undefined)}
+                      />
                     )}
                   </div>
                 )}
@@ -498,7 +498,6 @@ function SearchContent() {
                 </div>
               )}
 
-              {/* Results */}
               {results.length > 0 && (
                 <div className="space-y-6">
                   {Array.from(groupedResults.entries()).map(
@@ -523,7 +522,6 @@ function SearchContent() {
                           ? firstResult.camera_name || "Live Stream"
                           : "Video";
 
-                      // Sort hits by score descending and limit to top 3
                       const sortedHits = [...hits].sort(
                         (a, b) => b.score - a.score,
                       );
@@ -532,13 +530,11 @@ function SearchContent() {
 
                       return (
                         <div key={assetId} className="space-y-2">
-                          {/* Asset Header */}
                           <div className="text-sm font-medium text-muted-foreground">
                             {assetTitle} - {assetDate} - {assetTime} (
                             {hits.length} result{hits.length > 1 ? "s" : ""})
                           </div>
 
-                          {/* Results for this asset */}
                           <div className="space-y-3">
                             {displayedHits.map((hit) => {
                               const source = hit.source;
@@ -554,30 +550,25 @@ function SearchContent() {
                                 : analysisDoc!.asset_start_seconds;
 
                               return (
-                                <Card
+                                <Surface
                                   key={hit.id}
-                                  className="cursor-pointer transition-all hover:shadow-md py-0"
+                                  className="cursor-pointer transition-colors hover:bg-accent/30"
                                   onClick={() => handleResultClick(hit)}
                                 >
-                                  <CardContent className="p-4">
+                                  <SurfaceContent className="p-4">
                                     <div className="flex gap-4">
-                                      {/* Left: Content */}
                                       <div className="flex-1 min-w-0">
-                                        {/* Title */}
                                         <h3 className="font-semibold text-lg mb-2">
                                           {source.title}
                                         </h3>
 
-                                        {/* Description */}
                                         <p className="text-sm text-muted-foreground mb-3">
                                           {isEvent
                                             ? eventDoc!.description
                                             : analysisDoc!.summary}
                                         </p>
 
-                                        {/* Metadata Badges */}
                                         <div className="flex flex-wrap gap-2 mb-2">
-                                          {/* Event-specific badges */}
                                           {isEvent && eventDoc && (
                                             <>
                                               <Badge
@@ -594,7 +585,6 @@ function SearchContent() {
                                             </>
                                           )}
 
-                                          {/* Analysis-specific badges */}
                                           {!isEvent &&
                                             analysisDoc &&
                                             analysisDoc.tags.length > 0 && (
@@ -625,7 +615,6 @@ function SearchContent() {
                                               </>
                                             )}
 
-                                          {/* Entities */}
                                           {isEvent &&
                                             eventDoc &&
                                             eventDoc.affected_entities.length >
@@ -654,7 +643,6 @@ function SearchContent() {
                                             )}
                                         </div>
 
-                                        {/* Footer Info */}
                                         <div className="flex items-center gap-4 text-xs text-muted-foreground">
                                           <span>
                                             @ {formatDuration(timestamp)}
@@ -674,7 +662,6 @@ function SearchContent() {
                                         </div>
                                       </div>
 
-                                      {/* Right: Thumbnail */}
                                       <div className="flex-shrink-0">
                                         <img
                                           src={getThumbnailUrl(
@@ -682,7 +669,7 @@ function SearchContent() {
                                             timestamp,
                                           )}
                                           alt={source.title}
-                                          className="w-48 h-28 object-cover rounded border"
+                                          className="w-48 h-28 object-cover border border-border"
                                           onError={(e) => {
                                             // Fallback to placeholder if thumbnail fails
                                             e.currentTarget.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='80'%3E%3Crect fill='%23ddd' width='128' height='80'/%3E%3Ctext fill='%23999' font-family='sans-serif' font-size='14' x='50%25' y='50%25' text-anchor='middle' dy='.3em'%3ENo preview%3C/text%3E%3C/svg%3E`;
@@ -690,12 +677,11 @@ function SearchContent() {
                                         />
                                       </div>
                                     </div>
-                                  </CardContent>
-                                </Card>
+                                  </SurfaceContent>
+                                </Surface>
                               );
                             })}
 
-                            {/* Show +X others if there are more than 3 results */}
                             {remainingCount > 0 && (
                               <div className="text-sm text-muted-foreground text-center py-2">
                                 +{remainingCount} other
@@ -720,9 +706,9 @@ function SearchContent() {
                   )}
                 </div>
               )}
-            </CardContent>
-          </Card>
-        </div>
+            </SurfaceContent>
+          </Surface>
+        </PageContainer>
       </ScrollArea>
     </div>
   );
@@ -730,17 +716,19 @@ function SearchContent() {
 
 export default function SearchPage() {
   return (
-    <Suspense fallback={
-      <div className="flex flex-1 flex-col min-h-0">
-        <SiteHeader title="Search" />
-        <div className="flex-1 min-h-0 flex items-center justify-center">
-          <div className="text-center">
-            <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent mx-auto mb-4" />
-            <p className="text-muted-foreground">Loading search...</p>
+    <Suspense
+      fallback={
+        <div className="flex flex-1 flex-col min-h-0">
+          <SiteHeader title="Search" />
+          <div className="flex-1 min-h-0 flex items-center justify-center">
+            <div className="text-center">
+              <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent mx-auto mb-4" />
+              <p className="text-muted-foreground">Loading search...</p>
+            </div>
           </div>
         </div>
-      </div>
-    }>
+      }
+    >
       <SearchContent />
     </Suspense>
   );
diff --git a/app/(dashboard)/stats/page.tsx b/app/(dashboard)/stats/page.tsx
index d469a98..97c4c96 100644
--- a/app/(dashboard)/stats/page.tsx
+++ b/app/(dashboard)/stats/page.tsx
@@ -9,6 +9,8 @@ import {
   TrendingUp,
 } from "lucide-react";
 import { useEffect, useState } from "react";
+import { PageContainer } from "@/components/page-container";
+import { PageHeader } from "@/components/page-header";
 import { SiteHeader } from "@/components/site-header";
 import { AssetDurationChart } from "@/components/stats/asset-duration-chart";
 import { CameraActivityChart } from "@/components/stats/camera-activity-chart";
@@ -140,7 +142,11 @@ export default function StatsPage() {
       </SiteHeader>
 
       <ScrollArea className="h-[calc(100vh-6rem)]">
-        <div className="@container/main flex flex-1 flex-col gap-4 p-4 pb-0 md:gap-6 md:p-6 md:pb-0">
+        <PageContainer className="pb-0 lg:pb-0">
+          <PageHeader
+            title="Statistics"
+            description="Activity, detections, and processing metrics across your streams."
+          />
           {/* Controls */}
           <div className="flex items-center justify-between gap-3">
             <div key="section-tabs">
@@ -491,7 +497,7 @@ export default function StatsPage() {
               </Card>
             )}
           </div>
-        </div>
+        </PageContainer>
       </ScrollArea>
     </div>
   );
diff --git a/app/(dashboard)/stream/page.tsx b/app/(dashboard)/stream/page.tsx
index b3c4713..1591cb5 100644
--- a/app/(dashboard)/stream/page.tsx
+++ b/app/(dashboard)/stream/page.tsx
@@ -1,6 +1,9 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
+import { DemoDisabledNotice } from "@/components/demo/demo-disabled-notice";
+import { PageContainer } from "@/components/page-container";
+import { PageHeader } from "@/components/page-header";
 import { SiteHeader } from "@/components/site-header";
 import { ExternalStreamSetup } from "@/components/stream/external-stream-setup";
 import { NetworkStats } from "@/components/stream/network-stats";
@@ -11,6 +14,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { useCameraRealtime } from "@/hooks/use-camera-realtime";
 import { useStreamManager } from "@/hooks/use-stream-manager";
 import { useStreamState } from "@/hooks/use-stream-state";
+import { isDemoMode } from "@/lib/demo/flag";
 
 export default function StreamPage() {
   const state = useStreamState();
@@ -173,7 +177,7 @@ export default function StreamPage() {
     state.setStreaming(true);
     const settings = streamManager.getRecorderSettings();
     console.log("📹 MediaRecorder settings:", settings);
-    
+
     const protocol = window.location.protocol.replace("http", "ws");
     const wsUrl = new URL(`${protocol}//${window.location.host}/rtmp`);
     wsUrl.searchParams.set("format", settings.format);
@@ -181,7 +185,10 @@ export default function StreamPage() {
     wsUrl.searchParams.set("audio", settings.audio);
     wsUrl.searchParams.set("key", state.streamKey);
 
-    console.log("🔌 Connecting to streaming server:", wsUrl.toString().replace(state.streamKey, "***"));
+    console.log(
+      "🔌 Connecting to streaming server:",
+      wsUrl.toString().replace(state.streamKey, "***"),
+    );
     wsRef.current = new WebSocket(wsUrl.toString());
 
     wsRef.current.addEventListener("open", () => {
@@ -213,7 +220,7 @@ export default function StreamPage() {
           if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
             try {
               wsRef.current.send(e.data);
-              
+
               bytesSentRef.current += e.data.size;
               const now = Date.now();
               const timeDiff = (now - lastUpdateTimeRef.current) / 1000;
@@ -277,7 +284,7 @@ export default function StreamPage() {
           mimeType: mediaRecorderRef.current?.mimeType,
         });
       });
-      
+
       mediaRecorderRef.current.addEventListener("start", () => {
         console.log("MediaRecorder started event", {
           state: mediaRecorderRef.current?.state,
@@ -337,7 +344,10 @@ export default function StreamPage() {
       if (requestAnimationRef.current) {
         cancelAnimationFrame(requestAnimationRef.current);
       }
-      if (mediaRecorderRef.current && mediaRecorderRef.current.state === "recording") {
+      if (
+        mediaRecorderRef.current &&
+        mediaRecorderRef.current.state === "recording"
+      ) {
         console.log("Stopping MediaRecorder on unmount");
         mediaRecorderRef.current.stop();
       }
@@ -359,7 +369,12 @@ export default function StreamPage() {
     <div className="flex min-h-0 flex-1 flex-col">
       <SiteHeader title="Stream" />
       <ScrollArea className="flex min-h-0 flex-1">
-        <div className="@container/main flex min-h-0 flex-col gap-4 p-4 md:gap-6 md:p-6">
+        <PageContainer>
+          <PageHeader
+            title="Stream"
+            description="Broadcast a live feed from your browser or an external RTMP source."
+          />
+          {isDemoMode && <DemoDisabledNotice />}
           <div className="flex justify-center">
             <AnimatedTabs
               tabs={["From Browser", "From Other"]}
@@ -443,7 +458,7 @@ export default function StreamPage() {
               </div>
             </>
           )}
-        </div>
+        </PageContainer>
       </ScrollArea>
     </div>
   );
diff --git a/app/(dashboard)/watch/page.tsx b/app/(dashboard)/watch/page.tsx
index 4690a66..e8d2989 100644
--- a/app/(dashboard)/watch/page.tsx
+++ b/app/(dashboard)/watch/page.tsx
@@ -1,23 +1,34 @@
 "use client";
 
 import { useSearchParams } from "next/navigation";
-import React, { useEffect, useState, Suspense } from "react";
+import { Suspense, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { BrailleLoader } from "@/components/braille-loader";
+import { PageContainer } from "@/components/page-container";
+import { PageHeader } from "@/components/page-header";
 import { SiteHeader } from "@/components/site-header";
 import { AnimatedTabs } from "@/components/ui/animated-tabs";
 import { CameraGrid } from "@/components/watch/camera-grid";
+import { FirstRunNextStepsCard } from "@/components/watch/first-run-next-steps-card";
 import { RecordingGrid } from "@/components/watch/recording-grid";
 import { useAssetsRealtime } from "@/hooks/use-assets-realtime";
 import { useCamerasRealtime } from "@/hooks/use-cameras-realtime";
+import { useDemoSession } from "@/hooks/use-demo-session";
+import { isDemoMode } from "@/lib/demo/flag";
+import { removeCamera, renameCamera } from "@/lib/demo/session-store";
 
 const WATCH_TAB_STORAGE_KEY = "watch-last-tab";
+const WATCH_NEXT_STEPS_SEEN_KEY = "argus.demo.watch.nextStepsSeen.v1";
 
 function WatchContent() {
   const searchParams = useSearchParams();
 
   const { cameras, loading: loadingCameras } = useCamerasRealtime();
   const { assets, loading: loadingAssets } = useAssetsRealtime();
+  const session = useDemoSession();
 
   const [activeTab, setActiveTab] = useState<string>("cameras");
+  const [showNextSteps, setShowNextSteps] = useState(false);
 
   useEffect(() => {
     const urlTab = searchParams.get("tab");
@@ -32,6 +43,14 @@ function WatchContent() {
     }
   }, [searchParams]);
 
+  useEffect(() => {
+    if (!session.onboardingComplete) {
+      setShowNextSteps(false);
+      return;
+    }
+    setShowNextSteps(!localStorage.getItem(WATCH_NEXT_STEPS_SEEN_KEY));
+  }, [session.onboardingComplete]);
+
   const handleTabChange = (tab: string) => {
     // Map display name to internal value
     const value = tab === "Live Cameras" ? "cameras" : "recordings";
@@ -39,7 +58,22 @@ function WatchContent() {
     localStorage.setItem(WATCH_TAB_STORAGE_KEY, value);
   };
 
+  const dismissNextSteps = () => {
+    localStorage.setItem(WATCH_NEXT_STEPS_SEEN_KEY, "true");
+    setShowNextSteps(false);
+  };
+
+  const openRecordings = () => {
+    setActiveTab("recordings");
+    localStorage.setItem(WATCH_TAB_STORAGE_KEY, "recordings");
+  };
+
   const handleRenameCamera = async (cameraId: string, newName: string) => {
+    // Session-added cameras live in the client overlay, not the backend.
+    if (isDemoMode && cameraId.startsWith("session-cam-")) {
+      renameCamera(cameraId, newName);
+      return;
+    }
     try {
       const response = await fetch(`/api/cameras/${cameraId}`, {
         method: "PATCH",
@@ -54,11 +88,15 @@ function WatchContent() {
       }
     } catch (error) {
       console.error("Error updating camera:", error);
-      alert("Failed to update camera name");
+      toast.error("Failed to update camera name");
     }
   };
 
   const handleDeleteCamera = async (cameraId: string) => {
+    if (isDemoMode && cameraId.startsWith("session-cam-")) {
+      removeCamera(cameraId);
+      return;
+    }
     try {
       const response = await fetch(`/api/cameras/${cameraId}`, {
         method: "DELETE",
@@ -69,7 +107,7 @@ function WatchContent() {
       }
     } catch (error) {
       console.error("Error deleting camera:", error);
-      alert("Failed to delete camera");
+      toast.error("Failed to delete camera");
     }
   };
 
@@ -91,7 +129,7 @@ function WatchContent() {
       }
     } catch (error) {
       console.error("Error updating asset:", error);
-      alert("Failed to update recording");
+      toast.error("Failed to update recording");
     }
   };
 
@@ -106,14 +144,24 @@ function WatchContent() {
       }
     } catch (error) {
       console.error("Error deleting asset:", error);
-      alert("Failed to delete recording");
+      toast.error("Failed to delete recording");
     }
   };
 
   return (
     <div className="flex flex-1 flex-col min-h-0">
       <SiteHeader title="Watch" />
-      <div className="@container/main flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6 min-h-0">
+      <PageContainer>
+        <PageHeader
+          title="Watch"
+          description="Live cameras and recordings from every connected stream."
+        />
+        {showNextSteps && (
+          <FirstRunNextStepsCard
+            onDismiss={dismissNextSteps}
+            onOpenRecordings={openRecordings}
+          />
+        )}
         <div className="flex flex-col flex-1 min-h-0">
           <AnimatedTabs
             tabs={["Live Cameras", "Recordings"]}
@@ -139,24 +187,28 @@ function WatchContent() {
             )}
           </div>
         </div>
-      </div>
+      </PageContainer>
     </div>
   );
 }
 
 export default function WatchPage() {
   return (
-    <Suspense fallback={
-      <div className="flex flex-1 flex-col min-h-0">
-        <SiteHeader title="Watch" />
-        <div className="flex-1 min-h-0 flex items-center justify-center">
-          <div className="text-center">
-            <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent mx-auto mb-4" />
-            <p className="text-muted-foreground">Loading watch...</p>
+    <Suspense
+      fallback={
+        <div className="flex flex-1 flex-col min-h-0">
+          <SiteHeader title="Watch" />
+          <div className="flex-1 min-h-0 flex items-center justify-center">
+            <div className="flex flex-col items-center gap-3 text-muted-foreground">
+              <BrailleLoader className="text-3xl font-mono" />
+              <p className="text-sm">
+                Loading watch...
+              </p>
+            </div>
           </div>
         </div>
-      </div>
-    }>
+      }
+    >
       <WatchContent />
     </Suspense>
   );
diff --git a/app/api/ai-analysis/events/[assetId]/route.ts b/app/api/ai-analysis/events/[assetId]/route.ts
index bf8ab42..839f50b 100644
--- a/app/api/ai-analysis/events/[assetId]/route.ts
+++ b/app/api/ai-analysis/events/[assetId]/route.ts
@@ -5,6 +5,8 @@
 
 import { NextResponse } from "next/server";
 import { getEventsForAsset } from "@/lib/ai-analysis-queries";
+import { isDemoMode } from "@/lib/demo/flag";
+import { mockEvents } from "@/lib/demo/mock-data";
 
 export async function GET(
   request: Request,
@@ -24,6 +26,14 @@ export async function GET(
       ? Number.parseInt(searchParams.get("limit")!, 10)
       : undefined;
 
+    if (isDemoMode) {
+      let events = mockEvents.filter((e) => e.asset_id === assetId);
+      if (severity) events = events.filter((e) => e.severity === severity);
+      if (type) events = events.filter((e) => e.type === type);
+      if (limit) events = events.slice(0, limit);
+      return NextResponse.json(events);
+    }
+
     const events = await getEventsForAsset(assetId, {
       severity: severity || undefined,
       type: type || undefined,
diff --git a/app/api/ai-analysis/events/critical/route.ts b/app/api/ai-analysis/events/critical/route.ts
index 81474e9..7f025f6 100644
--- a/app/api/ai-analysis/events/critical/route.ts
+++ b/app/api/ai-analysis/events/critical/route.ts
@@ -5,6 +5,8 @@
 
 import { NextResponse } from "next/server";
 import { getCriticalEvents } from "@/lib/ai-analysis-queries";
+import { isDemoMode } from "@/lib/demo/flag";
+import { mockEvents } from "@/lib/demo/mock-data";
 
 export async function GET(request: Request) {
   try {
@@ -13,6 +15,13 @@ export async function GET(request: Request) {
       ? Number.parseInt(searchParams.get("limit")!, 10)
       : 20;
 
+    if (isDemoMode) {
+      const events = mockEvents
+        .filter((e) => e.severity === "High")
+        .slice(0, limit);
+      return NextResponse.json(events);
+    }
+
     const events = await getCriticalEvents(limit);
     return NextResponse.json(events);
   } catch (error) {
diff --git a/app/api/ai-analysis/results/[sourceId]/route.ts b/app/api/ai-analysis/results/[sourceId]/route.ts
index 23e371b..02d264f 100644
--- a/app/api/ai-analysis/results/[sourceId]/route.ts
+++ b/app/api/ai-analysis/results/[sourceId]/route.ts
@@ -5,6 +5,8 @@
 
 import { NextResponse } from "next/server";
 import { getResultsForSource } from "@/lib/ai-analysis-queries";
+import { isDemoMode } from "@/lib/demo/flag";
+import { mockAnalysisJobs, mockAnalysisResults } from "@/lib/demo/mock-data";
 
 export async function GET(
   request: Request,
@@ -15,6 +17,18 @@ export async function GET(
     const { searchParams } = new URL(request.url);
     const limit = Number.parseInt(searchParams.get("limit") || "100", 10);
 
+    if (isDemoMode) {
+      const jobIds = new Set(
+        mockAnalysisJobs
+          .filter((j) => j.source_id === sourceId)
+          .map((j) => j.id),
+      );
+      const results = mockAnalysisResults
+        .filter((r) => jobIds.has(r.job_id))
+        .slice(0, limit);
+      return NextResponse.json(results);
+    }
+
     const results = await getResultsForSource(sourceId, limit);
     return NextResponse.json(results);
   } catch (error) {
diff --git a/app/api/ai-analysis/search/route.ts b/app/api/ai-analysis/search/route.ts
index cc66274..9760b3f 100644
--- a/app/api/ai-analysis/search/route.ts
+++ b/app/api/ai-analysis/search/route.ts
@@ -6,12 +6,34 @@
 
 import { NextResponse } from "next/server";
 import { getRecentResults, searchByTag } from "@/lib/ai-analysis-queries";
+import { isDemoMode } from "@/lib/demo/flag";
+import { mockAnalysisResults } from "@/lib/demo/mock-data";
 
 export async function GET(request: Request) {
   try {
     const { searchParams } = new URL(request.url);
     const tag = searchParams.get("tag");
 
+    if (isDemoMode) {
+      if (tag) {
+        const limit = Number.parseInt(searchParams.get("limit") || "50", 10);
+        const results = mockAnalysisResults
+          .filter((r) => (r.tags as string[])?.includes(tag))
+          .slice(0, limit);
+        return NextResponse.json(results);
+      }
+      const page = Number.parseInt(searchParams.get("page") || "0", 10);
+      const pageSize = Number.parseInt(
+        searchParams.get("pageSize") || "20",
+        10,
+      );
+      const from = page * pageSize;
+      return NextResponse.json({
+        results: mockAnalysisResults.slice(from, from + pageSize),
+        total: mockAnalysisResults.length,
+      });
+    }
+
     if (tag) {
       // Search by tag
       const limit = Number.parseInt(searchParams.get("limit") || "50", 10);
diff --git a/app/api/ai-analysis/stats/route.ts b/app/api/ai-analysis/stats/route.ts
index 2306e7f..a096863 100644
--- a/app/api/ai-analysis/stats/route.ts
+++ b/app/api/ai-analysis/stats/route.ts
@@ -5,9 +5,17 @@
 
 import { NextResponse } from "next/server";
 import { getJobStats } from "@/lib/ai-analysis-queries";
+import { isDemoMode } from "@/lib/demo/flag";
+import { mockStats } from "@/lib/demo/mock-data";
 
 export async function GET() {
   try {
+    if (isDemoMode) {
+      // The mock carries an extra successRate; drop it to match the leaner
+      // AnalysisJobSummary shape that getJobStats() returns in prod.
+      const { successRate: _successRate, ...rest } = mockStats.jobStats;
+      return NextResponse.json(rest);
+    }
     const stats = await getJobStats();
     return NextResponse.json(stats);
   } catch (error) {
diff --git a/app/api/assets/[id]/route.ts b/app/api/assets/[id]/route.ts
index 432e607..baeff1e 100644
--- a/app/api/assets/[id]/route.ts
+++ b/app/api/assets/[id]/route.ts
@@ -1,4 +1,6 @@
 import { type NextRequest, NextResponse } from "next/server";
+import { isDemoMode } from "@/lib/demo/flag";
+import { mockAssets } from "@/lib/demo/mock-data";
 import { deleteDocumentsByAssetId } from "@/lib/elasticsearch";
 
 const MUX_TOKEN_ID = process.env.MUX_TOKEN_ID;
@@ -9,6 +11,10 @@ export async function PATCH(
   request: NextRequest,
   { params }: { params: { id: string } },
 ) {
+  if (isDemoMode) {
+    const asset = mockAssets.find((a) => a.id === params.id);
+    return NextResponse.json({ asset: asset ?? null });
+  }
   if (!MUX_TOKEN_ID || !MUX_TOKEN_SECRET) {
     return NextResponse.json(
       { error: "Mux credentials not configured" },
@@ -68,6 +74,9 @@ export async function DELETE(
   request: NextRequest,
   { params }: { params: { id: string } },
 ) {
+  if (isDemoMode) {
+    return NextResponse.json({ success: true, demo: true });
+  }
   if (!MUX_TOKEN_ID || !MUX_TOKEN_SECRET) {
     return NextResponse.json(
       { error: "Mux credentials not configured" },
diff --git a/app/api/cameras/[id]/route.ts b/app/api/cameras/[id]/route.ts
index d1ee9a2..fb461d6 100644
--- a/app/api/cameras/[id]/route.ts
+++ b/app/api/cameras/[id]/route.ts
@@ -1,4 +1,6 @@
 import { type NextRequest, NextResponse } from "next/server";
+import { isDemoMode } from "@/lib/demo/flag";
+import { mockCameras } from "@/lib/demo/mock-data";
 import { supabase } from "@/lib/supabase";
 
 const MUX_TOKEN_ID = process.env.MUX_TOKEN_ID;
@@ -9,6 +11,15 @@ export async function PATCH(
   request: NextRequest,
   { params }: { params: { id: string } },
 ) {
+  if (isDemoMode) {
+    const body = await request.json().catch(() => ({}));
+    const cam = mockCameras.find((c) => c.id === params.id);
+    return NextResponse.json({
+      camera: cam
+        ? { ...cam, camera_name: body.cameraName ?? cam.camera_name }
+        : null,
+    });
+  }
   try {
     const { cameraName } = await request.json();
     const streamId = params.id;
@@ -54,6 +65,9 @@ export async function DELETE(
   request: NextRequest,
   { params }: { params: { id: string } },
 ) {
+  if (isDemoMode) {
+    return NextResponse.json({ success: true, demo: true });
+  }
   if (!MUX_TOKEN_ID || !MUX_TOKEN_SECRET) {
     return NextResponse.json(
       { error: "Mux credentials not configured" },
diff --git a/app/api/cameras/route.ts b/app/api/cameras/route.ts
index c13a82d..54e91f8 100644
--- a/app/api/cameras/route.ts
+++ b/app/api/cameras/route.ts
@@ -1,8 +1,13 @@
 import { type NextRequest, NextResponse } from "next/server";
+import { isDemoMode } from "@/lib/demo/flag";
+import { mockCameras } from "@/lib/demo/mock-data";
 import { supabase } from "@/lib/supabase";
 
 // GET all cameras (live streams with browser_id)
 export async function GET(request: NextRequest) {
+  if (isDemoMode) {
+    return NextResponse.json({ cameras: mockCameras });
+  }
   try {
     const { data, error } = await supabase
       .schema("mux")
@@ -35,6 +40,11 @@ export async function GET(request: NextRequest) {
 // POST update camera status or last_connected_at
 // Note: Status updates from Mux webhooks will override this, which is correct behavior
 export async function POST(request: NextRequest) {
+  if (isDemoMode) {
+    const body = await request.json().catch(() => ({}));
+    const camera = mockCameras.find((c) => c.browser_id === body.browserId);
+    return NextResponse.json({ camera: camera ?? null });
+  }
   try {
     const body = await request.json();
     const { browserId, status, lastConnectedAt } = body;
diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
index 4ed90b7..0d78ec7 100644
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@@ -5,29 +5,123 @@ import { lettaCloud } from "@letta-ai/vercel-ai-sdk-provider";
 import {
   convertToModelMessages,
   createIdGenerator,
+  createUIMessageStream,
+  createUIMessageStreamResponse,
+  generateId,
   stepCountIs,
   streamText,
+  type JSONValue,
+  type LanguageModel,
+  type ToolSet,
+  type UIMessage,
 } from "ai";
-import { aiTools } from "@/lib/ai-tools";
-import { loadChat, saveChat } from "@/lib/chat-store";
+import { aiTools, onboardingTools } from "@/lib/ai-tools";
+import { extractTextFromParts, saveChat } from "@/lib/chat-store";
+import { isDemoMode } from "@/lib/demo/flag";
+import { OPENROUTER_DEFAULT_MODEL, openrouter } from "@/lib/demo/openrouter";
+import { checkRateLimit, clientKeyFromRequest } from "@/lib/demo/rate-limit";
+import {
+  type ScriptedCall,
+  scriptedAssistantText,
+  scriptedOnboardingTurn,
+} from "@/lib/demo/scripted-copilot";
+import {
+  DEMO_SYSTEM_PROMPT,
+  ELASTIC_SYSTEM_PROMPT,
+  FALLBACK_SYSTEM_PROMPT,
+  ONBOARDING_SYSTEM_PROMPT,
+} from "@/lib/prompts";
+
+export const maxDuration = 60;
+
+type ProviderOptions = Record<string, Record<string, JSONValue>>;
+
+interface ScriptContextInput {
+  hasOrgName?: boolean;
+  cameraNames?: string[];
+  ruleLabels?: string[];
+}
 
-export const maxDuration = 30;
+/** Pull the most recent user message's text out of UI messages. */
+function lastUserText(messages: UIMessage[]): string {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const m = messages[i];
+    if (m?.role !== "user") continue;
+    return extractTextFromParts(m).trim();
+  }
+  return "";
+}
+
+/** Stream a fixed assistant reply plus optional tool calls, with no LLM. */
+function scriptedStreamResponse(text: string, calls: ScriptedCall[]) {
+  const stream = createUIMessageStream({
+    execute({ writer }) {
+      // The UI message stream envelope (start … finish) is required for
+      // useChat to mark the turn complete — without it the client streams
+      // forever. createUIMessageStream does NOT add these automatically.
+      writer.write({ type: "start" });
+      writer.write({ type: "start-step" });
+
+      const textId = generateId();
+      writer.write({ type: "text-start", id: textId });
+      writer.write({ type: "text-delta", id: textId, delta: text });
+      writer.write({ type: "text-end", id: textId });
+
+      for (const call of calls) {
+        const toolCallId = generateId();
+        writer.write({
+          type: "tool-input-available",
+          toolCallId,
+          toolName: call.toolName,
+          input: call.input,
+        });
+        // Scripted onboarding tools don't run server-side; the client renders
+        // the call's input directly, so echo it back as the output.
+        writer.write({
+          type: "tool-output-available",
+          toolCallId,
+          output: call.input,
+        });
+      }
+
+      writer.write({ type: "finish-step" });
+      writer.write({ type: "finish" });
+    },
+  });
+  return createUIMessageStreamResponse({ stream });
+}
 
 export async function POST(req: Request) {
-  const { messages, chatId, model: selectedModel } = await req.json();
+  const {
+    messages,
+    chatId,
+    model: selectedModel,
+    onboarding,
+    sessionContext,
+  } = (await req.json()) as {
+    messages: UIMessage[];
+    chatId: string;
+    model?: string;
+    onboarding?: boolean;
+    sessionContext?: ScriptContextInput;
+  };
+  const isOnboarding =
+    onboarding === true || selectedModel === "onboarding-guide";
 
-  // Initialize MCP client for Elastic Agent Builder
+  // Elastic Agent Builder MCP client (disabled in demo).
   let mcpClient:
     | Awaited<ReturnType<typeof experimental_createMCPClient>>
     | undefined;
-  let tools = { ...aiTools };
+  let tools: ToolSet = isOnboarding
+    ? { ...onboardingTools }
+    : { ...aiTools };
 
   const elasticsearchUrl = process.env.ELASTICSEARCH_URL;
   const apiKey = process.env.ELASTICSEARCH_API_KEY;
 
-  if (elasticsearchUrl && apiKey) {
+  if (!isDemoMode && elasticsearchUrl && apiKey) {
     try {
-      // Convert Elasticsearch URL to Kibana URL
+      // Agent Builder lives on Kibana, not Elasticsearch — derive its host.
       const kibanaUrl = elasticsearchUrl
         .replace(".es.", ".kb.")
         .replace(":443", "");
@@ -42,7 +136,6 @@ export async function POST(req: Request) {
         },
       });
 
-      // Get all available tools from the MCP server and merge with AI tools
       const mcpTools = await mcpClient.tools();
       tools = { ...aiTools, ...mcpTools };
       console.log(
@@ -51,98 +144,148 @@ export async function POST(req: Request) {
       );
     } catch (error) {
       console.error("Failed to connect to Elastic MCP server:", error);
-      // Continue without MCP tools if connection fails
+      // Continue without MCP tools if connection fails.
     }
   }
 
-  // Validate API keys
-  if (
-    !process.env.ANTHROPIC_API_KEY &&
-    !process.env.GROQ_API_KEY &&
-    !process.env.LETTA_API_KEY
-  ) {
-    return new Response(
-      "Missing API keys. Please configure ANTHROPIC_API_KEY, GROQ_API_KEY, or LETTA_API_KEY.",
-      { status: 500 },
-    );
-  }
+  let model: LanguageModel | undefined;
+  let effectiveModel = selectedModel;
 
-  // Select the appropriate model and provider
-  let model;
-  switch (selectedModel) {
-    case "claude-sonnet-4.5":
-      if (!process.env.ANTHROPIC_API_KEY) {
-        return new Response("ANTHROPIC_API_KEY not configured", {
-          status: 500,
-        });
-      }
-      model = anthropic("claude-sonnet-4-20250929");
-      break;
+  if (isDemoMode) {
+    // Best-effort per-IP rate limit so the public demo can't be hammered.
+    const rl = checkRateLimit(clientKeyFromRequest(req));
+    if (!rl.ok) {
+      return scriptedStreamResponse(
+        `You're sending messages a little fast — give me about ${rl.retryAfterSeconds}s and try again.`,
+        [],
+      );
+    }
 
-    case "claude-haiku-4.5":
-      if (!process.env.ANTHROPIC_API_KEY) {
-        return new Response("ANTHROPIC_API_KEY not configured", {
-          status: 500,
-        });
-      }
+    // Provider tiering: Anthropic Haiku → OpenRouter → deterministic scripted.
+    if (process.env.ANTHROPIC_API_KEY) {
       model = anthropic("claude-haiku-4-5-20251001");
-      break;
-
-    case "kimi-k2":
-      if (!process.env.GROQ_API_KEY) {
-        return new Response("GROQ_API_KEY not configured", { status: 500 });
+      effectiveModel = "anthropic";
+    } else if (process.env.OPENROUTER_API_KEY) {
+      const demoModel =
+        selectedModel === "claude-sonnet-4.5"
+          ? "anthropic/claude-3.5-sonnet"
+          : selectedModel === "kimi-k2"
+            ? "moonshotai/kimi-k2"
+            : selectedModel === "claude-haiku-4.5"
+              ? "anthropic/claude-3.5-haiku"
+              : OPENROUTER_DEFAULT_MODEL;
+      model = openrouter(demoModel);
+      effectiveModel = "openrouter";
+    } else {
+      // No provider key configured — never 500. Stream a scripted reply that
+      // still drives the onboarding wizard via tool calls.
+      const userText = lastUserText(messages);
+      if (isOnboarding) {
+        const ctx: ScriptContextInput = sessionContext ?? {};
+        const { text, calls } = scriptedOnboardingTurn(userText, {
+          hasOrgName: ctx.hasOrgName ?? false,
+          existingCameraNames: ctx.cameraNames ?? [],
+          existingRuleLabels: ctx.ruleLabels ?? [],
+        });
+        return scriptedStreamResponse(text, calls);
       }
-      model = groq("moonshotai/kimi-k2-instruct-0905");
-      break;
+      return scriptedStreamResponse(scriptedAssistantText(), []);
+    }
+  } else {
+    if (
+      !process.env.ANTHROPIC_API_KEY &&
+      !process.env.GROQ_API_KEY &&
+      !process.env.LETTA_API_KEY
+    ) {
+      return new Response(
+        "Missing API keys. Please configure ANTHROPIC_API_KEY, GROQ_API_KEY, or LETTA_API_KEY.",
+        { status: 500 },
+      );
+    }
 
-    case "stateful-argus":
-      if (!process.env.LETTA_API_KEY) {
-        return new Response("LETTA_API_KEY not configured", { status: 500 });
-      }
-      if (!process.env.LETTA_AGENT_ID) {
-        return new Response(
-          "LETTA_AGENT_ID not configured. Please set the ID of your 'stateful argus' agent.",
-          { status: 500 },
-        );
-      }
-      model = lettaCloud();
-      break;
+    switch (selectedModel) {
+      case "claude-sonnet-4.5":
+        if (!process.env.ANTHROPIC_API_KEY) {
+          return new Response("ANTHROPIC_API_KEY not configured", {
+            status: 500,
+          });
+        }
+        model = anthropic("claude-sonnet-4-20250929");
+        break;
 
-    default:
-      // Default to Claude Haiku if no model specified
-      if (process.env.ANTHROPIC_API_KEY) {
+      case "claude-haiku-4.5":
+        if (!process.env.ANTHROPIC_API_KEY) {
+          return new Response("ANTHROPIC_API_KEY not configured", {
+            status: 500,
+          });
+        }
         model = anthropic("claude-haiku-4-5-20251001");
-      } else {
-        return new Response("No API keys configured", { status: 500 });
-      }
+        break;
+
+      case "kimi-k2":
+        if (!process.env.GROQ_API_KEY) {
+          return new Response("GROQ_API_KEY not configured", { status: 500 });
+        }
+        model = groq("moonshotai/kimi-k2-instruct-0905");
+        break;
+
+      case "stateful-argus":
+        if (!process.env.LETTA_API_KEY) {
+          return new Response("LETTA_API_KEY not configured", { status: 500 });
+        }
+        if (!process.env.LETTA_AGENT_ID) {
+          return new Response(
+            "LETTA_AGENT_ID not configured. Please set the ID of your 'stateful argus' agent.",
+            { status: 500 },
+          );
+        }
+        model = lettaCloud();
+        break;
+
+      default:
+        // No explicit model selected — default to Claude Haiku.
+        if (process.env.ANTHROPIC_API_KEY) {
+          model = anthropic("claude-haiku-4-5-20251001");
+        } else {
+          return new Response("No API keys configured", { status: 500 });
+        }
+    }
   }
 
-  // Convert UIMessages to ModelMessages
   const modelMessages = convertToModelMessages(messages);
 
-  // Configure provider-specific options
-  const providerOptions: any = {
-    anthropic: {
+  if (!model) {
+    return new Response("No model configured", { status: 500 });
+  }
+
+  const providerOptions: ProviderOptions = {};
+  if (!isDemoMode) {
+    providerOptions.anthropic = {
       thinking: {
         type: "enabled",
         budgetTokens: 10000,
       },
-    },
-  };
+    };
+  }
 
-  // Add Letta-specific options when using Letta model
-  if (selectedModel === "stateful-argus") {
+  if (!isDemoMode && selectedModel === "stateful-argus") {
     providerOptions.letta = {
       agent: {
-        id: process.env.LETTA_AGENT_ID,
+        id: process.env.LETTA_AGENT_ID ?? "",
         maxSteps: 10,
         streamTokens: true,
       },
     };
   }
 
-  // Build streamText config
-  const streamConfig: any = {
+  const streamConfig: {
+    model: LanguageModel;
+    messages: ReturnType<typeof convertToModelMessages>;
+    tools: ToolSet;
+    providerOptions: ProviderOptions;
+    stopWhen: ReturnType<typeof stepCountIs>;
+    system?: string;
+  } = {
     model,
     messages: modelMessages,
     tools,
@@ -150,9 +293,9 @@ export async function POST(req: Request) {
     stopWhen: stepCountIs(10),
   };
 
-  // Only add system prompt for non-Letta models
-  // Letta agents use their own configured system prompt from Letta Cloud
-  if (selectedModel !== "stateful-argus") {
+  // Letta agents carry their own system prompt from Letta Cloud; injecting one
+  // here would override it, so only set `system` for the other providers.
+  if (effectiveModel !== "stateful-argus") {
     const currentDateTime = new Date().toLocaleString("en-US", {
       weekday: "long",
       year: "numeric",
@@ -166,17 +309,21 @@ export async function POST(req: Request) {
 
     const baseSystemPrompt = `Current date and time: ${currentDateTime}\n\n`;
 
-    streamConfig.system =
-      elasticsearchUrl && apiKey
-        ? baseSystemPrompt +
-          "You are a helpful AI assistant named Argus with access to a video content database through Elastic Agent Builder. When users ask about videos, streams, or recorded content, use the available search tools to find relevant information. For more advanced filtering and complex queries, you can use the generate_esql tool to create ES|QL queries and then execute them with the execute_esql tool. When you mention specific events from search results, use the displayEvent or displayEventById tools to show them as interactive cards that users can click to watch the video at that moment. To show a full video asset with a player, use the displayAsset tool with the asset ID. You can also create comprehensive reports using the createReport tool - use this to generate documentation, analysis summaries, or investigation reports with properly formatted markdown content. Provide clear, concise responses based on the search results."
-        : baseSystemPrompt +
-          "You are a helpful AI assistant for a video streaming platform. You can help users with questions about their video content, streams, and recordings. When discussing specific events, use the displayEvent or displayEventById tools to show them as interactive cards. To show a full video asset with a player, use the displayAsset tool with the asset ID. You can also create comprehensive reports using the createReport tool - use this to generate documentation, analysis summaries, or investigation reports with properly formatted markdown content.";
+    if (isOnboarding) {
+      streamConfig.system = baseSystemPrompt + ONBOARDING_SYSTEM_PROMPT;
+    } else if (isDemoMode) {
+      streamConfig.system = baseSystemPrompt + DEMO_SYSTEM_PROMPT;
+    } else {
+      streamConfig.system =
+        elasticsearchUrl && apiKey
+          ? baseSystemPrompt + ELASTIC_SYSTEM_PROMPT
+          : baseSystemPrompt + FALLBACK_SYSTEM_PROMPT;
+    }
   }
 
   const result = streamText(streamConfig);
 
-  // Consume stream to ensure completion even if client disconnects
+  // Consume the stream so generation completes even if the client disconnects.
   result.consumeStream();
 
   return result.toUIMessageStreamResponse({
diff --git a/app/api/detections/route.ts b/app/api/detections/route.ts
index f2f3732..9d33c95 100644
--- a/app/api/detections/route.ts
+++ b/app/api/detections/route.ts
@@ -1,4 +1,6 @@
 import { type NextRequest, NextResponse } from "next/server";
+import { isDemoMode } from "@/lib/demo/flag";
+import { getMockDetectionsForAsset } from "@/lib/demo/mock-data";
 import { getDetectionsForSource } from "@/lib/detection-queries";
 
 /**
@@ -23,6 +25,17 @@ export async function GET(request: NextRequest) {
     );
   }
 
+  if (isDemoMode) {
+    const start = startTime ? Number.parseFloat(startTime) : undefined;
+    const end = endTime ? Number.parseFloat(endTime) : undefined;
+    const frames = getMockDetectionsForAsset(sourceId).filter((f) => {
+      if (start !== undefined && f.frame_timestamp < start) return false;
+      if (end !== undefined && f.frame_timestamp > end) return false;
+      return true;
+    });
+    return NextResponse.json({ detections: frames });
+  }
+
   try {
     const detections = await getDetectionsForSource(
       sourceId,
diff --git a/app/api/live-streams/route.ts b/app/api/live-streams/route.ts
index 70feba7..f5898d4 100644
--- a/app/api/live-streams/route.ts
+++ b/app/api/live-streams/route.ts
@@ -1,9 +1,26 @@
 import { type NextRequest, NextResponse } from "next/server";
+import { isDemoMode } from "@/lib/demo/flag";
+import { mockCameras } from "@/lib/demo/mock-data";
 
 const MUX_TOKEN_ID = process.env.MUX_TOKEN_ID;
 const MUX_TOKEN_SECRET = process.env.MUX_TOKEN_SECRET;
 
 export async function GET(request: NextRequest) {
+  if (isDemoMode) {
+    const streams = mockCameras.map((c) => ({
+      id: c.id,
+      streamKey: c.stream_key,
+      status: c.status,
+      playbackId: Array.isArray(c.playback_ids)
+        ? c.playback_ids[0]?.id
+        : undefined,
+      createdAt: c.created_at,
+      recentAssetIds: c.recent_asset_ids ?? [],
+      reconnectWindow: c.reconnect_window_seconds ?? 60,
+      latencyMode: c.latency_mode ?? "low",
+    }));
+    return NextResponse.json({ streams });
+  }
   if (!MUX_TOKEN_ID || !MUX_TOKEN_SECRET) {
     return NextResponse.json(
       { error: "Mux credentials not configured" },
diff --git a/app/api/mux/upload/route.ts b/app/api/mux/upload/route.ts
index 103d635..da4f223 100644
--- a/app/api/mux/upload/route.ts
+++ b/app/api/mux/upload/route.ts
@@ -1,9 +1,19 @@
 import { NextResponse } from "next/server";
+import { isDemoMode } from "@/lib/demo/flag";
 
 const MUX_TOKEN_ID = process.env.MUX_TOKEN_ID;
 const MUX_TOKEN_SECRET = process.env.MUX_TOKEN_SECRET;
 
 export async function POST() {
+  if (isDemoMode) {
+    return NextResponse.json(
+      {
+        disabled: true,
+        reason: "Video uploads are disabled in the demo deployment.",
+      },
+      { status: 501 },
+    );
+  }
   if (!MUX_TOKEN_ID || !MUX_TOKEN_SECRET) {
     return NextResponse.json(
       {
diff --git a/app/api/reports/[id]/route.ts b/app/api/reports/[id]/route.ts
index e6fb7e9..0f49754 100644
--- a/app/api/reports/[id]/route.ts
+++ b/app/api/reports/[id]/route.ts
@@ -1,4 +1,6 @@
 import { type NextRequest, NextResponse } from "next/server";
+import { isDemoMode } from "@/lib/demo/flag";
+import { demoReportStore } from "@/lib/demo/mock-data";
 import { supabase } from "@/lib/supabase";
 
 // GET /api/reports/[id] - Get a specific report
@@ -9,6 +11,17 @@ export async function GET(
   try {
     const { id } = await params;
 
+    if (isDemoMode) {
+      const report = demoReportStore().find((r) => r.id === id);
+      if (!report) {
+        return NextResponse.json(
+          { error: "Report not found" },
+          { status: 404 },
+        );
+      }
+      return NextResponse.json({ report });
+    }
+
     const { data: report, error } = await supabase
       .from("reports")
       .select("*")
@@ -40,6 +53,25 @@ export async function PATCH(
     const body = await req.json();
     const { title, content } = body;
 
+    if (isDemoMode) {
+      const store = demoReportStore();
+      const idx = store.findIndex((r) => r.id === id);
+      if (idx < 0) {
+        return NextResponse.json(
+          { error: "Report not found" },
+          { status: 404 },
+        );
+      }
+      const updated = {
+        ...store[idx],
+        ...(title !== undefined ? { title } : {}),
+        ...(content !== undefined ? { content } : {}),
+        updated_at: new Date().toISOString(),
+      };
+      store[idx] = updated;
+      return NextResponse.json({ report: updated });
+    }
+
     const updateData: any = {};
     if (title !== undefined) updateData.title = title;
     if (content !== undefined) updateData.content = content;
@@ -77,6 +109,13 @@ export async function DELETE(
   try {
     const { id } = await params;
 
+    if (isDemoMode) {
+      const store = demoReportStore();
+      const idx = store.findIndex((r) => r.id === id);
+      if (idx >= 0) store.splice(idx, 1);
+      return NextResponse.json({ success: true });
+    }
+
     const { error } = await supabase.from("reports").delete().eq("id", id);
 
     if (error) {
diff --git a/app/api/reports/route.ts b/app/api/reports/route.ts
index 25622ca..e255387 100644
--- a/app/api/reports/route.ts
+++ b/app/api/reports/route.ts
@@ -5,12 +5,18 @@ import TaskList from "@tiptap/extension-task-list";
 import Underline from "@tiptap/extension-underline";
 import { generateJSON } from "@tiptap/html";
 import StarterKit from "@tiptap/starter-kit";
+import { generateId } from "ai";
 import { marked } from "marked";
 import { type NextRequest, NextResponse } from "next/server";
+import { isDemoMode } from "@/lib/demo/flag";
+import { demoReportStore } from "@/lib/demo/mock-data";
 import { supabase } from "@/lib/supabase";
 
 // GET /api/reports - List all reports
 export async function GET() {
+  if (isDemoMode) {
+    return NextResponse.json({ reports: demoReportStore() });
+  }
   try {
     const { data: reports, error } = await supabase
       .from("reports")
@@ -42,7 +48,10 @@ export async function POST(req: NextRequest) {
     const { title = "Untitled Report", markdown } = body;
 
     // Convert markdown to Tiptap JSON if provided
-    let content = { type: "doc", content: [{ type: "paragraph" }] };
+    let content: Record<string, unknown> = {
+      type: "doc",
+      content: [{ type: "paragraph" }],
+    };
 
     if (markdown) {
       try {
@@ -86,6 +95,19 @@ export async function POST(req: NextRequest) {
       }
     }
 
+    if (isDemoMode) {
+      const now = new Date().toISOString();
+      const report = {
+        id: `demo-report-${generateId()}`,
+        title,
+        content,
+        created_at: now,
+        updated_at: now,
+      };
+      demoReportStore().unshift(report);
+      return NextResponse.json({ report }, { status: 201 });
+    }
+
     const { data: report, error } = await supabase
       .from("reports")
       .insert({
diff --git a/app/api/search/route.ts b/app/api/search/route.ts
index 26584a4..80ba210 100644
--- a/app/api/search/route.ts
+++ b/app/api/search/route.ts
@@ -1,4 +1,6 @@
 import { type NextRequest, NextResponse } from "next/server";
+import { isDemoMode } from "@/lib/demo/flag";
+import { mockAssets, mockEvents } from "@/lib/demo/mock-data";
 import { searchContent } from "@/lib/elasticsearch";
 import { supabase } from "@/lib/supabase";
 import type {
@@ -8,6 +10,15 @@ import type {
   SearchFilters,
 } from "@/lib/types/elasticsearch";
 
+/**
+ * Parse a comma-separated query param into a typed array, dropping empties.
+ * Returns `[]` when the param is absent or blank.
+ */
+function parseCsvParam<T extends string>(value: string | null): T[] {
+  if (!value) return [];
+  return value.split(",").filter(Boolean) as T[];
+}
+
 export async function GET(request: NextRequest) {
   try {
     const { searchParams } = new URL(request.url);
@@ -18,7 +29,6 @@ export async function GET(request: NextRequest) {
     const from = searchParams.get("from");
     const to = searchParams.get("to");
 
-    // Validate query parameter
     if (!query || query.trim().length === 0) {
       return NextResponse.json(
         { error: "Query parameter 'q' is required" },
@@ -26,7 +36,77 @@ export async function GET(request: NextRequest) {
       );
     }
 
-    // Validate doc_type parameter
+    if (isDemoMode) {
+      const q = query.trim().toLowerCase();
+      const isWildcard = q === "*" || q === "";
+      const severityList = parseCsvParam<EventSeverity>(severityParam);
+      const eventTypeList = parseCsvParam<EventType>(eventTypeParam);
+      const matches = mockEvents.filter((e) => {
+        const textMatch =
+          isWildcard ||
+          e.name.toLowerCase().includes(q) ||
+          e.description.toLowerCase().includes(q) ||
+          e.type.toLowerCase().includes(q);
+        const severityMatch =
+          severityList.length === 0 || severityList.includes(e.severity);
+        const typeMatch =
+          eventTypeList.length === 0 ||
+          eventTypeList.includes(e.type as EventType);
+        return textMatch && severityMatch && typeMatch;
+      });
+      // Synthetic hits intentionally diverge from SearchHit/EventDocument:
+      // playback_id/duration may be null and we add event_id/entities the real
+      // index doesn't carry, so these stay structurally typed rather than cast.
+      const hits = matches.map((e) => {
+        const asset = mockAssets.find((a) => a.id === e.asset_id);
+        const playbackId =
+          (Array.isArray(asset?.playback_ids) && asset?.playback_ids[0]?.id) ||
+          undefined;
+        return {
+          id: `event-${e.id}`,
+          score: 1,
+          source: {
+            doc_type: "event",
+            asset_id: e.asset_id,
+            event_id: e.id,
+            name: e.name,
+            title: e.name,
+            description: e.description,
+            severity: e.severity,
+            event_type: e.type,
+            timestamp_seconds: e.timestamp_seconds,
+            affected_entities: e.affected_entities ?? [],
+            tags: [],
+            entities: e.affected_entities ?? [],
+            asset_type: "vod",
+            playback_id: playbackId,
+            duration: asset?.duration_seconds ?? null,
+            created_at: e.created_at,
+          },
+        };
+      });
+      const grouped: Record<string, typeof hits> = {};
+      for (const h of hits) {
+        (grouped[h.source.asset_id] ??= []).push(h);
+      }
+      return NextResponse.json({
+        query: query.trim(),
+        results: hits,
+        grouped,
+        total: hits.length,
+        took: 1,
+        filters: {
+          doc_type: docType || null,
+          severity: severityParam ? severityParam.split(",") : null,
+          event_type: eventTypeParam ? eventTypeParam.split(",") : null,
+          dateRange: from && to ? { from, to } : null,
+        },
+        assets: mockAssets
+          .filter((a) => grouped[a.id])
+          .map((a) => ({ id: a.id, created_at: a.created_at })),
+      });
+    }
+
     if (docType && !["event", "analysis"].includes(docType)) {
       return NextResponse.json(
         { error: "Invalid doc_type. Must be 'event' or 'analysis'" },
@@ -34,50 +114,37 @@ export async function GET(request: NextRequest) {
       );
     }
 
-    // Build filters object
     const filters: SearchFilters = {};
 
     if (docType) {
       filters.doc_type = docType;
     }
 
-    // Parse severity filter (comma-separated)
-    if (severityParam) {
-      const severityList = severityParam
-        .split(",")
-        .filter(Boolean) as EventSeverity[];
-      if (severityList.length > 0) {
-        filters.severity = severityList;
-      }
+    const severityList = parseCsvParam<EventSeverity>(severityParam);
+    if (severityList.length > 0) {
+      filters.severity = severityList;
     }
 
-    // Parse event_type filter (comma-separated)
-    if (eventTypeParam) {
-      const eventTypeList = eventTypeParam
-        .split(",")
-        .filter(Boolean) as EventType[];
-      if (eventTypeList.length > 0) {
-        filters.event_type = eventTypeList;
-      }
+    const eventTypeList = parseCsvParam<EventType>(eventTypeParam);
+    if (eventTypeList.length > 0) {
+      filters.event_type = eventTypeList;
     }
 
     if (from && to) {
       filters.dateRange = { from, to };
     }
 
-    // Perform the search
     const results = await searchContent(query.trim(), filters);
 
-    // Validate that assets still exist in mux.assets table
+    // Search results can outlive their Mux asset; drop hits whose asset has
+    // since been deleted so the UI never links to missing video.
     let validatedHits = results.hits;
 
     if (results.hits.length > 0) {
-      // Get unique asset IDs from search results
       const assetIds = [
         ...new Set(results.hits.map((hit) => hit.source.asset_id)),
       ];
 
-      // Query mux.assets to check which assets still exist
       const { data: existingAssets, error: assetsError } = await supabase
         .schema("mux")
         .from("assets")
@@ -89,12 +156,9 @@ export async function GET(request: NextRequest) {
           "[Search API] Error checking assets existence:",
           assetsError,
         );
-        // Continue with unvalidated results if the check fails
+        // Continue with unvalidated results if the check fails.
       } else {
-        // Create a Set of valid asset IDs for fast lookup
         const validAssetIds = new Set(existingAssets?.map((a) => a.id) || []);
-
-        // Filter results to only include those with valid assets
         const originalCount = results.hits.length;
         validatedHits = results.hits.filter((hit) =>
           validAssetIds.has(hit.source.asset_id),
@@ -108,7 +172,6 @@ export async function GET(request: NextRequest) {
       }
     }
 
-    // Group results by asset_id
     const groupedResults = new Map<string, typeof validatedHits>();
     for (const hit of validatedHits) {
       const assetId = hit.source.asset_id;
diff --git a/app/api/search/sync/route.ts b/app/api/search/sync/route.ts
index 81dc0e2..72dee67 100644
--- a/app/api/search/sync/route.ts
+++ b/app/api/search/sync/route.ts
@@ -1,4 +1,5 @@
 import { type NextRequest, NextResponse } from "next/server";
+import { isDemoMode } from "@/lib/demo/flag";
 import {
   syncAllToElasticsearch,
   syncAnalysisToElasticsearch,
@@ -15,6 +16,13 @@ import {
  * - id: event_id or job_id (required if type is 'event' or 'analysis')
  */
 export async function POST(request: NextRequest) {
+  if (isDemoMode) {
+    return NextResponse.json({
+      success: true,
+      demo: true,
+      message: "Elasticsearch sync is a no-op in demo mode.",
+    });
+  }
   try {
     const searchParams = request.nextUrl.searchParams;
     const type = searchParams.get("type");
diff --git a/app/api/stats/route.ts b/app/api/stats/route.ts
index 338d44a..80f3e74 100644
--- a/app/api/stats/route.ts
+++ b/app/api/stats/route.ts
@@ -4,6 +4,8 @@
  */
 
 import { NextResponse } from "next/server";
+import { isDemoMode } from "@/lib/demo/flag";
+import { mockStats } from "@/lib/demo/mock-data";
 import {
   getAllElasticsearchStats,
   getTimeRangeFromFilter,
@@ -16,6 +18,10 @@ export async function GET(request: Request) {
     const range =
       (searchParams.get("range") as "24h" | "7d" | "30d" | "all") || "all";
 
+    if (isDemoMode) {
+      return NextResponse.json(mockStats);
+    }
+
     // Validate range parameter
     if (!["24h", "7d", "30d", "all"].includes(range)) {
       return NextResponse.json(
diff --git a/app/api/stream/create/route.ts b/app/api/stream/create/route.ts
index 49a3a80..2c99043 100644
--- a/app/api/stream/create/route.ts
+++ b/app/api/stream/create/route.ts
@@ -1,10 +1,20 @@
 import { type NextRequest, NextResponse } from "next/server";
+import { isDemoMode } from "@/lib/demo/flag";
 import { supabase } from "@/lib/supabase";
 
 const MUX_TOKEN_ID = process.env.MUX_TOKEN_ID;
 const MUX_TOKEN_SECRET = process.env.MUX_TOKEN_SECRET;
 
+const DEMO_DISABLED_BODY = {
+  disabled: true,
+  reason: "Live streaming is disabled in the demo deployment.",
+};
+
 export async function POST(request: NextRequest) {
+  if (isDemoMode) {
+    return NextResponse.json(DEMO_DISABLED_BODY, { status: 501 });
+  }
+
   if (!MUX_TOKEN_ID || !MUX_TOKEN_SECRET) {
     return NextResponse.json(
       {
@@ -87,11 +97,11 @@ export async function POST(request: NextRequest) {
     // Wait for the Mux webhook to create the live_streams record using realtime
     console.log("Waiting for webhook to sync stream:", streamId);
 
-    const streamReady = await new Promise((resolve, reject) => {
+    await new Promise((resolve, reject) => {
       const timeout = setTimeout(() => {
         cleanup();
         reject(new Error("Timeout waiting for webhook sync"));
-      }, 10000); // 10 second timeout as safety net
+      }, 10000);
 
       const channel = supabase
         .channel(`wait_for_stream_${streamId}`)
@@ -103,8 +113,7 @@ export async function POST(request: NextRequest) {
             table: "live_streams",
             filter: `id=eq.${streamId}`,
           },
-          (payload) => {
-            console.log("Stream synced via webhook:", streamId);
+          () => {
             cleanup();
             resolve(true);
           },
@@ -116,7 +125,6 @@ export async function POST(request: NextRequest) {
         supabase.removeChannel(channel);
       };
 
-      // Also check if it already exists (race condition)
       supabase
         .schema("mux")
         .from("live_streams")
@@ -125,14 +133,12 @@ export async function POST(request: NextRequest) {
         .maybeSingle()
         .then(({ data: existing }) => {
           if (existing) {
-            console.log("Stream already exists in DB:", streamId);
             cleanup();
             resolve(true);
           }
         });
     });
 
-    // Now update the live_streams record with browser_id and camera_name
     const { data: updatedStream, error: updateError } = await supabase
       .schema("mux")
       .from("live_streams")
@@ -146,11 +152,6 @@ export async function POST(request: NextRequest) {
       .maybeSingle();
 
     if (updateError || !updatedStream) {
-      console.error(
-        "Failed to update live stream with camera info:",
-        updateError,
-      );
-      // Fallback: return Mux data if update somehow fails
       return NextResponse.json({
         streamKey: data.data.stream_key,
         streamId: streamId,
@@ -162,7 +163,6 @@ export async function POST(request: NextRequest) {
       });
     }
 
-    // Successfully updated - return the database data
     return NextResponse.json({
       streamKey: updatedStream.stream_key,
       streamId: updatedStream.id,
diff --git a/app/api/stream/delete/route.ts b/app/api/stream/delete/route.ts
index 4337dc7..7327f31 100644
--- a/app/api/stream/delete/route.ts
+++ b/app/api/stream/delete/route.ts
@@ -1,9 +1,19 @@
 import { type NextRequest, NextResponse } from "next/server";
+import { isDemoMode } from "@/lib/demo/flag";
 
 const MUX_TOKEN_ID = process.env.MUX_TOKEN_ID;
 const MUX_TOKEN_SECRET = process.env.MUX_TOKEN_SECRET;
 
 export async function DELETE(request: NextRequest) {
+  if (isDemoMode) {
+    return NextResponse.json(
+      {
+        disabled: true,
+        reason: "Live streaming is disabled in the demo deployment.",
+      },
+      { status: 501 },
+    );
+  }
   if (!MUX_TOKEN_ID || !MUX_TOKEN_SECRET) {
     return NextResponse.json(
       { error: "Mux credentials not configured" },
diff --git a/app/globals.css b/app/globals.css
index 1123e22..1a951d5 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,8 +6,9 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-jetbrains-mono);
-  --font-mono: var(--font-jetbrains-mono);
+  /* Use the general sans (Inter) everywhere, including former mono text. */
+  --font-sans: var(--font-inter);
+  --font-mono: var(--font-inter);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -41,14 +42,6 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
-  --color-main: var(--main);
-  --color-main-secondary: var(--main-secondary);
-  --color-main-foreground: var(--main-foreground);
-  --color-main-muted: var(--main-muted);
-  --color-main-background: var(--main-background);
-  --color-main-invert: var(--main-invert);
-  --color-primary-muted: var(--primary-muted);
-  --color-primary-invert: var(--primary-invert);
 }
 
 :root {
@@ -59,7 +52,8 @@
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0 0 0);
+  /* Linear lavender accent (#5e6ad2) */
+  --primary: oklch(0.532 0.137 275);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
@@ -70,7 +64,7 @@
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --ring: oklch(0.532 0.137 275);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -84,61 +78,64 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
-  
-  /* Luxe UI variables */
-  --main: oklch(0.97 0 0);
-  --main-secondary: oklch(97% 0 0);
-  --main-foreground: oklch(0.925 0 0);
-  --main-muted: oklch(0.96 0 0);
-  --main-background: oklch(0.97 0 0);
-  --main-invert: oklch(0.205 0 0);
-  --primary-muted: oklch(0.556 0 0);
-  --primary-invert: oklch(1 0 0);
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
+  /* Linear near-black canvas (#010102) + surface-1 cards (#0f1011) */
+  --background: oklch(0.07 0.005 275);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
+  --card: oklch(0.18 0.004 275);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
+  --popover: oklch(0.18 0.004 275);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(1 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
+  /* Lavender accent on dark (#5e6ad2 with white text) */
+  --primary: oklch(0.532 0.137 275);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.205 0.004 275);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
+  --muted: oklch(0.205 0.004 275);
   --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
+  --accent: oklch(0.22 0.004 275);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
+  --ring: oklch(0.532 0.137 275);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
+  --sidebar: oklch(0.12 0.004 275);
   --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary: oklch(0.532 0.137 275);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent: oklch(0.22 0.004 275);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-  
-  /* Luxe UI dark mode variables */
-  --main: oklch(0.178 0 0);
-  --main-foreground: oklch(0.269 0 0);
-  --main-muted: oklch(0.168 0 0);
-  --main-background: oklch(0.145 0 0);
-  --primary-muted: oklch(0.708 0 0);
-  --primary-invert: oklch(0 0 0);
+  --sidebar-ring: oklch(0.532 0.137 275);
 }
 
-
+/* ──────────────────────────────────────────────────────────────────────
+   Linear design tokens (per DESIGN-linear.app.md). Used by the onboarding
+   wizard and other Linear-styled surfaces. Scarce lavender accent.
+   ────────────────────────────────────────────────────────────────────── */
+:root {
+  --linear-canvas: #010102;
+  --linear-surface-1: #0f1011;
+  --linear-surface-2: #141516;
+  --linear-surface-3: #18191a;
+  --linear-hairline: #23252a;
+  --linear-hairline-strong: #34343a;
+  --linear-ink: #f7f8f8;
+  --linear-ink-muted: #d0d6e0;
+  --linear-ink-subtle: #8a8f98;
+  --linear-ink-tertiary: #62666d;
+  --linear-primary: #5e6ad2;
+  --linear-primary-hover: #828fff;
+  --linear-primary-focus: #5e69d1;
+  --linear-success: #27a644;
+}
 
 @layer base {
   * {
@@ -148,15 +145,15 @@
   html {
     scroll-behavior: smooth;
   }
-  
+
   html,
   body,
   #__next {
     @apply h-full;
   }
-  
+
   body {
-    @apply overflow-x-hidden overflow-y-auto;
+    @apply overflow-x-hidden overflow-y-auto bg-background text-foreground font-sans;
   }
 
   /* shadcn-inspired scrollbar */
@@ -173,17 +170,21 @@
     background: transparent;
   }
   ::-webkit-scrollbar-thumb {
-    background-color: color-mix(in oklab, var(--muted-foreground) 45%, transparent);
+    background-color: color-mix(
+      in oklab,
+      var(--muted-foreground) 45%,
+      transparent
+    );
     border-radius: 9999px;
     border: 2px solid transparent;
     background-clip: padding-box;
   }
   ::-webkit-scrollbar-thumb:hover {
-    background-color: color-mix(in oklab, var(--muted-foreground) 65%, transparent);
-  }
-
-  body {
-    @apply bg-background text-foreground font-sans;
+    background-color: color-mix(
+      in oklab,
+      var(--muted-foreground) 65%,
+      transparent
+    );
   }
 
   @keyframes breathe {
@@ -202,41 +203,40 @@
     animation: breathe 5s ease-in-out infinite;
   }
 
-  @keyframes shine {
-    0% {
-      background-position: 0% 0%;
-    }
-    50% {
-      background-position: 100% 100%;
+  @keyframes feed-in {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
     }
-    100% {
-      background-position: 0% 0%;
+    to {
+      opacity: 1;
+      transform: translateY(0);
     }
   }
 
-  .animate-shine {
-    animation: shine 10s linear infinite;
+  .animate-feed-in {
+    animation: feed-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
   }
 
-  @keyframes brightness {
+  @keyframes scanline {
     0% {
+      transform: translateY(0);
       opacity: 0;
-      transform: translateX(-100%) skewX(-45deg);
     }
-    5% {
+    10% {
       opacity: 1;
     }
-    95% {
+    90% {
       opacity: 1;
     }
     100% {
+      transform: translateY(100%);
       opacity: 0;
-      transform: translateX(200%) skewX(-45deg);
     }
   }
 
-  .animate-brightness {
-    animation: brightness 2s ease-in-out infinite;
+  .animate-scanline {
+    animation: scanline 4s ease-in-out infinite;
   }
 }
 
diff --git a/app/layout.tsx b/app/layout.tsx
index 2fa5018..0924bec 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,19 +1,19 @@
 import type { Metadata } from "next";
-import { JetBrains_Mono } from "next/font/google";
+import { Inter } from "next/font/google";
 import "./globals.css";
 import { CriticalEventsMonitor } from "@/components/critical-events-monitor";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 
-const jetbrainsMono = JetBrains_Mono({
-  variable: "--font-jetbrains-mono",
+const inter = Inter({
+  variable: "--font-inter",
   subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
   title: "Argus",
   description:
-    "Stream live from your browser to Mux RTMP and watch recorded streams",
+    "Computer-vision analytics for live and recorded video, with an AI assistant for search and insights.",
 };
 
 export default function RootLayout({
@@ -23,10 +23,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`${jetbrainsMono.variable} antialiased`}>
+      <body className={`${inter.variable} antialiased`}>
         <ThemeProvider
           attribute="class"
-          defaultTheme="system"
+          defaultTheme="light"
           enableSystem
           disableTransitionOnChange
         >
diff --git a/app/onboarding/layout.tsx b/app/onboarding/layout.tsx
new file mode 100644
index 0000000..c11271b
--- /dev/null
+++ b/app/onboarding/layout.tsx
@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import { OnboardingThemeScope } from "@/components/onboarding/onboarding-theme-scope";
+
+export const metadata: Metadata = {
+  title: "Set up Argus",
+  description:
+    "Configure your AI surveillance workspace with the setup copilot.",
+};
+
+export default function OnboardingLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <div className="min-h-dvh bg-background text-foreground antialiased">
+      <OnboardingThemeScope>{children}</OnboardingThemeScope>
+    </div>
+  );
+}
diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
new file mode 100644
index 0000000..18927bd
--- /dev/null
+++ b/app/onboarding/page.tsx
@@ -0,0 +1,5 @@
+import { OnboardingWizard } from "@/components/onboarding/onboarding-wizard";
+
+export default function OnboardingPage() {
+  return <OnboardingWizard />;
+}
diff --git a/app/page.tsx b/app/page.tsx
index 8a724b9..af44e94 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,308 +1,193 @@
 "use client";
 
 import Link from "next/link";
-import Image from "next/image";
-import { useEffect, useState } from "react";
 import { AsciiEye } from "@/components/ascii-eye";
-import Dither from '@/components/dither'
-import { FeaturesAlternating } from "@/components/features-alternating";
-import { NavigationMenuItem, NavigationMenuLink, NavigationMenuList } from "@/components/ui/navigation-menu";
-import { SiteFooter } from "@/components/site-footer";
-import { BrowserComponent } from "@/components/browser-component";
-import DecryptedText from "@/components/fancy/text/decrypted-text";
-import { NavigationMenu } from "@/components/ui/navigation-menu";
-import { LuxeButton } from "@/components/ui/luxe-button";
-import { ModelsSection } from "@/components/models-section";
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
-import { Menu } from "lucide-react";
+import { FeatureShot } from "@/components/landing/feature-shot";
+import {
+  type FeatureItem,
+  LandingSections,
+} from "@/components/landing/style-manifest";
+import { ModeToggle } from "@/components/mode-toggle";
 import { Button } from "@/components/ui/button";
 
-export default function Home() {
-  const [isLoading, setIsLoading] = useState(true);
-  const [fadeOut, setFadeOut] = useState(false);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-
-  useEffect(() => {
-    const loadContent = async () => {
-      // Wait for typing animation to complete
-      // "WELCOME TO ARGUS" = ~17 chars * 50ms = 850ms + 2000ms pause = ~2850ms
-      await new Promise((resolve) => setTimeout(resolve, 3500));
-
-      // Start fade out animation
-      setFadeOut(true);
-
-      // Remove loading screen after fade completes
-      await new Promise((resolve) => setTimeout(resolve, 800));
-      setIsLoading(false);
-    };
-
-    loadContent();
-  }, []);
-
-  const featuresContent = [
-    {
-      title: "Live Dashboard",
-      description: "Dashboard showcasing all current RTMP streams with automated video asset creation.",
-      content: (
-        <div className="space-y-4">
-          <BrowserComponent url="argus.io/dashboard" className="h-auto">
-            <Image 
-              src="/assets/argusdash.webp" 
-              alt="Argus Dashboard"
-              height={1080}
-              width={1920}
-              className="w-full h-auto object-contain"
-            />
-          </BrowserComponent>
-        </div>
-      ),
-    },
-    {
-      title: "Entity & Event Detection",
-      description: "Entity and event detection with AI-powered analysis.",
-      content: (
-        <div className="space-y-4">
-          <BrowserComponent url="argus.io/watch/{asset_id}" className="h-auto">
-            <Image 
-              src="/assets/argusdetection.webp" 
-              alt="Argus Detection"
-              height={1080}
-              width={1920}
-              className="w-full h-auto object-contain"
-              priority
-              unoptimized
-            />
-          </BrowserComponent>
-        </div>
-      ),
-    },
-    {
-      title: "Analytics & Statistics",
-      description: "Comprehensive stats from all events and anomalies detected.",
-      content: (
-        <div className="space-y-4">
-          <BrowserComponent url="argus.io/stats" className="h-auto">
-            <Image 
-              src="/assets/argusstats.webp" 
-              alt="Argus Statistics"
-              height={1080}
-              width={1920}
-              className="w-full h-auto object-contain"
-            />
-          </BrowserComponent>
-        </div>
-      ),
-    },
-    {
-      title: "Automated Reports",
-      description: "Auto-generated editable rich incident reports based on detected events.",
-      content: (
-        <div className="space-y-4">
-          <BrowserComponent url="argus.io/reports" className="h-auto">
-            <Image 
-              src="/assets/argusreports.webp" 
-              alt="Argus Reports"
-              height={1080}
-              width={1920}
-              className="w-full h-auto object-contain"
-            />
-          </BrowserComponent>
-        </div>
-      ),
-    },
-    {
-      title: "Elasticsearch Agent",
-      description: "Search through all detected anomalies and events with powerful Elasticsearch Agent integration.",
-      content: (
-        <div className="space-y-4">
-          <BrowserComponent url="argus.io/search" className="h-auto">
-            <Image 
-              src="/assets/argussearch.webp" 
-              alt="Argus Search"
-              height={1080}
-              width={1920}
-              className="w-full h-auto object-contain"
-            />
-          </BrowserComponent>
-        </div>
-      ),
-    },
-    {
-      title: "AI Assistant",
-      description: "Search for specific event types, ask questions, generate reports, and more.",
-      content: (
-        <div className="space-y-4">
-          <BrowserComponent url="argus.io/chat" className="h-auto">
-            <Image 
-              src="/assets/arguschat.webp" 
-              alt="Argus Chat"
-              height={1080}
-              width={1920}
-              className="w-full h-auto object-contain"
-            />
-          </BrowserComponent>
-        </div>
-      ),
-    },
-  ];
+const features: Array<{
+  title: string;
+  description: string;
+  url: string;
+  src: string;
+  alt: string;
+}> = [
+  {
+    title: "Live Dashboard",
+    description:
+      "Dashboard showcasing all current RTMP streams with automated video asset creation.",
+    url: "argus.io/dashboard",
+    src: "/assets/argusdash.webp",
+    alt: "Argus Dashboard",
+  },
+  {
+    title: "Entity & Event Detection",
+    description: "Entity and event detection with AI-powered analysis.",
+    url: "argus.io/watch/{asset_id}",
+    src: "/assets/argusdetection.webp",
+    alt: "Argus Detection",
+  },
+  {
+    title: "Analytics & Statistics",
+    description: "Comprehensive stats from all events and anomalies detected.",
+    url: "argus.io/stats",
+    src: "/assets/argusstats.webp",
+    alt: "Argus Statistics",
+  },
+  {
+    title: "Automated Reports",
+    description:
+      "Auto-generated editable rich incident reports based on detected events.",
+    url: "argus.io/reports",
+    src: "/assets/argusreports.webp",
+    alt: "Argus Reports",
+  },
+  {
+    title: "Elasticsearch Agent",
+    description:
+      "Search through all detected anomalies and events with powerful Elasticsearch Agent integration.",
+    url: "argus.io/search",
+    src: "/assets/argussearch.webp",
+    alt: "Argus Search",
+  },
+  {
+    title: "AI Assistant",
+    description:
+      "Search for specific event types, ask questions, generate reports, and more.",
+    url: "argus.io/chat",
+    src: "/assets/arguschat.webp",
+    alt: "Argus Chat",
+  },
+];
+
+const featuresContent: FeatureItem[] = features.map((feature, i) => ({
+  title: feature.title,
+  description: feature.description,
+  content: (
+    <FeatureShot
+      url={feature.url}
+      src={feature.src}
+      alt={feature.alt}
+      priority={i === 1}
+    />
+  ),
+}));
 
+export default function Home() {
   return (
     <>
-      {/* Loading Screen */}
-      {isLoading && (
-        <div
-          className={`fixed inset-0 z-50 flex items-center justify-center bg-black transition-opacity duration-800 ${
-            fadeOut ? "opacity-0" : "opacity-100"
-          }`}
-        >
-          <div className="flex flex-col items-center gap-6">
-            <DecryptedText
-              text="ARGUS"
-              revealDurationMs={1400}
-              scrambleSpeed={24}
-              className="text-6xl md:text-8xl font-extrabold tracking-widest text-white"
-            />
-            <DecryptedText
-              text="Computer Vision • Analytics • AI Assistant"
-              revealDurationMs={1600}
-              scrambleSpeed={28}
-              className="text-white/70 text-base md:text-lg tracking-wide"
-            />
-          </div>
-        </div>
-      )}
-
-      <div className="fixed inset-0 z-0 bg-gradient-to-b from-background via-muted/30 to-background">
-        <Dither
-          waveColor={[0.15, 0.03, 0.03]}
-          disableAnimation={false}
-          enableMouseInteraction={false}
-          mouseRadius={1}
-          colorNum={4}
-          waveAmplitude={0.3}
-          waveFrequency={1}
-          waveSpeed={0.05}
-        />
+      <div className="fixed top-4 right-4 z-20">
+        <ModeToggle />
       </div>
 
-      {/* Desktop Navigation */}
-      <div className="hidden md:flex fixed top-0 left-0 right-0 z-20 items-center justify-center p-4">
-        <NavigationMenu>
-          <NavigationMenuList>
-            <NavigationMenuItem>
-              <NavigationMenuLink href="#overview">Overview</NavigationMenuLink>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-              <NavigationMenuLink href="#models">Models</NavigationMenuLink>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-              <NavigationMenuLink href="#features">Features</NavigationMenuLink>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-              <NavigationMenuLink href="/watch">Dashboard</NavigationMenuLink>
-            </NavigationMenuItem>
-          </NavigationMenuList>
-        </NavigationMenu>
-      </div>
-
-      {/* Mobile Navigation */}
-      <div className="md:hidden fixed top-4 right-4 z-20">
-        <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
-          <SheetTrigger asChild>
-            <Button variant="outline" size="icon" className="bg-background/80 backdrop-blur-sm">
-              <Menu className="h-5 w-5" />
-              <span className="sr-only">Toggle menu</span>
-            </Button>
-          </SheetTrigger>
-          <SheetContent side="right" className="w-[250px] sm:w-[300px]">
-            <nav className="flex flex-col gap-4 mt-8">
-              <Link 
-                href="#overview" 
-                className="text-lg font-medium hover:text-primary transition-colors py-2 border-b border-border"
-                onClick={() => setMobileMenuOpen(false)}
-              >
-                Overview
-              </Link>
-              <Link 
-                href="#models" 
-                className="text-lg font-medium hover:text-primary transition-colors py-2 border-b border-border"
-                onClick={() => setMobileMenuOpen(false)}
-              >
-                Models
-              </Link>
-              <Link 
-                href="#features" 
-                className="text-lg font-medium hover:text-primary transition-colors py-2 border-b border-border"
-                onClick={() => setMobileMenuOpen(false)}
-              >
-                Features
-              </Link>
-              <Link 
-                href="/watch" 
-                className="text-lg font-medium hover:text-primary transition-colors py-2"
-                onClick={() => setMobileMenuOpen(false)}
-              >
-                Dashboard
-              </Link>
-            </nav>
-          </SheetContent>
-        </Sheet>
-      </div>
-
-      <main id="overview" className="w-full min-h-screen flex items-center justify-center lg:justify-between overflow-hidden relative [scrollbar-width:none] [&::-webkit-scrollbar]:hidden scroll-mt-24">
-
-        {/* Desktop Layout */}
-        <div className="hidden lg:flex z-10 ml-0 w-1/3 items-start justify-center relative pointer-events-none">
-          <div className="text-left">
-            <h1 className="text-7xl mt-0 font-bold mb-4 pb-4">ARGUS</h1>
-            <LuxeButton variant="animated-border" className="pointer-events-auto px-4 py-2 text-base">
-              <Link href="/watch">Open Argus</Link>
-            </LuxeButton>
-          </div>
-        </div>
-
-        <div className="hidden lg:flex z-10 mt-10 w-1/2 h-full items-center justify-center relative pointer-events-none">
-          <div className="w-full h-full flex items-center justify-center">
-            <AsciiEye />
-          </div>
-        </div>
-
-        {/* Mobile Layout - Centered with Overlay */}
-        <div className="lg:hidden relative w-full h-screen flex items-center justify-center px-4">
-          {/* ASCII Eye Background */}
-          <div className="absolute inset-0 flex items-center justify-center pointer-events-none scale-90 sm:scale-100">
-            <AsciiEye />
-          </div>
-          
-          {/* Overlayed Text Content */}
-          <div className="relative z-20 flex flex-col items-center justify-center text-center space-y-6">
-            <h1 className="text-5xl sm:text-6xl md:text-7xl font-bold text-white drop-shadow-2xl">ARGUS</h1>
-            <LuxeButton variant="animated-border" className="pointer-events-auto px-6 py-3 text-base">
-              <Link href="/watch">Open Argus</Link>
-            </LuxeButton>
+      <main
+        id="overview"
+        className="w-full bg-background text-foreground scroll-mt-24"
+      >
+        <div className="min-h-dvh flex flex-col justify-center">
+          <div className="max-w-[1500px] mx-auto px-6 sm:px-10 lg:px-12 pt-24 pb-16">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 lg:items-center">
+              <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-5">
+                  <span className="inline-flex w-fit items-center gap-2 border border-border py-1.5 pr-3 pl-1.5 text-[10px] uppercase tracking-widest text-muted-foreground">
+                    <span className="relative flex size-1.5 items-center justify-center">
+                      <span
+                        className="absolute inline-flex size-full rounded-full animate-ping motion-reduce:hidden"
+                        style={{ backgroundColor: "var(--linear-success)" }}
+                      />
+                      <span
+                        className="relative size-1.5 rounded-full"
+                        style={{ backgroundColor: "var(--linear-success)" }}
+                      />
+                    </span>
+                    Live · real-time surveillance intelligence
+                  </span>
+                  <h1 className="font-semibold text-5xl sm:text-6xl lg:text-7xl tracking-tight text-balance max-w-[14ch]">
+                    The watcher, catalogued.
+                  </h1>
+                </div>
+                <p className="text-lg text-muted-foreground text-pretty max-w-[44ch]">
+                  Computer vision, analytics, and an AI assistant — watching
+                  your streams so you don&apos;t have to.
+                </p>
+                <div className="flex flex-wrap items-center gap-3">
+                  <Button
+                    asChild
+                    className="h-auto px-6 py-3 text-white hover:bg-[var(--linear-primary-hover)] transition-colors"
+                  >
+                    <Link href="/onboarding">
+                      Get Started <span aria-hidden>→</span>
+                    </Link>
+                  </Button>
+                  <Button
+                    asChild
+                    variant="outline"
+                    className="h-auto px-6 py-3 transition-colors"
+                  >
+                    <Link href="/watch">Skip to Dashboard</Link>
+                  </Button>
+                </div>
+              </div>
+
+              <div className="relative aspect-square w-full max-w-[560px] lg:ml-auto">
+                <div className="absolute inset-0 border border-border" />
+
+                {/* Targeting brackets */}
+                <span
+                  aria-hidden
+                  className="absolute -top-px -left-px size-4 border-t-2 border-l-2 border-foreground/40"
+                />
+                <span
+                  aria-hidden
+                  className="absolute -top-px -right-px size-4 border-t-2 border-r-2 border-foreground/40"
+                />
+                <span
+                  aria-hidden
+                  className="absolute -bottom-px -left-px size-4 border-b-2 border-l-2 border-foreground/40"
+                />
+                <span
+                  aria-hidden
+                  className="absolute -bottom-px -right-px size-4 border-b-2 border-r-2 border-foreground/40"
+                />
+
+                {/* Viewfinder scanline */}
+                <div
+                  aria-hidden
+                  className="pointer-events-none absolute inset-0 overflow-hidden"
+                >
+                  <div className="absolute inset-x-0 top-0 h-px bg-primary/50 animate-scanline motion-reduce:hidden" />
+                </div>
+
+                {/* REC + tracking labels */}
+                <div
+                  aria-hidden
+                  className="pointer-events-none absolute top-3 left-3 flex items-center gap-1.5 text-[10px] uppercase tracking-widest text-muted-foreground"
+                >
+                  <span className="size-1.5 rounded-full bg-destructive animate-pulse motion-reduce:animate-none" />
+                  Rec
+                </div>
+                <div
+                  aria-hidden
+                  className="pointer-events-none absolute bottom-3 right-3 text-[10px] uppercase tracking-widest text-muted-foreground tabular-nums"
+                >
+                  Trk · 48.42°N
+                </div>
+
+                <div className="absolute inset-3 [&_span]:!text-foreground flex items-center justify-center">
+                  <AsciiEye />
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </main>
 
-      <section id="models" className="w-full py-12 lg:py-20 relative z-10 scroll-mt-24">
-        <div className="container mx-auto px-4">
-          <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-4 lg:mb-6 text-foreground">Technology for the Future</h2>
-          <p className="text-center text-sm sm:text-base text-muted-foreground mb-8 lg:mb-12 max-w-2xl mx-auto px-4">Argus is built on the latest and greatest technologies to deliver the best possible experience for you and your team.</p>
-          <ModelsSection />
-        </div>
-      </section>
-
-      <section id="features" className="w-full py-12 lg:py-20 relative z-10 scroll-mt-24">
-        <div className="container mx-auto px-4">
-          <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-3 lg:mb-4 text-foreground">Features</h2>
-          <p className="text-center text-sm sm:text-base text-muted-foreground mb-8 lg:mb-12 max-w-2xl mx-auto px-4">
-            Discover the powerful capabilities that make Argus the ultimate surveillance and monitoring solution.
-          </p>
-          <FeaturesAlternating features={featuresContent} />
-        </div>
-      </section>
-
-      <SiteFooter />
+      <LandingSections features={featuresContent} />
     </>
   );
 }
diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx
index 3b40a1d..ce966be 100644
--- a/components/app-sidebar.tsx
+++ b/components/app-sidebar.tsx
@@ -1,17 +1,6 @@
 "use client";
 
-import {
-  IconBug,
-  IconChartBar,
-  IconDatabase,
-  IconEye,
-  IconFileText,
-  IconList,
-  IconMessageChatbot,
-  IconPlayerPlay,
-  IconSearch,
-  IconVideo,
-} from "@tabler/icons-react";
+import { IconEye, IconRefresh } from "@tabler/icons-react";
 import type * as React from "react";
 import { ModeToggle } from "@/components/mode-toggle";
 import { NavMain } from "@/components/nav-main";
@@ -21,97 +10,31 @@ import {
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
 } from "@/components/ui/sidebar";
 import { UserNav } from "@/components/user-nav";
-
-const data = {
-  navMain: [
-    {
-      title: "Stream",
-      items: [
-        {
-          title: "Create Stream",
-          url: "/stream",
-          icon: IconVideo,
-        },
-      ],
-    },
-    {
-      title: "Dashboard",
-      items: [
-        {
-          title: "Watch",
-          url: "/watch",
-          icon: IconPlayerPlay,
-        },
-        {
-          title: "Stats",
-          url: "/stats",
-          icon: IconChartBar,
-        },
-        {
-          title: "Search",
-          url: "/search",
-          icon: IconSearch,
-        },
-        {
-          title: "AI Chat",
-          url: "/ai-chat",
-          icon: IconMessageChatbot,
-        },
-        {
-          title: "Reports",
-          url: "/reports",
-          icon: IconFileText,
-        },
-      ],
-    },
-    {
-      title: "Admin",
-      items: [
-        {
-          title: "Jobs",
-          url: "/jobs",
-          icon: IconList,
-        },
-        {
-          title: "Database",
-          url: "/database",
-          icon: IconDatabase,
-        },
-        {
-          title: "Debug",
-          url: "/debug",
-          icon: IconBug,
-        },
-      ],
-    },
-  ],
-};
+import { isDemoMode } from "@/lib/demo/flag";
+import { navSections, resetDemoAndReload } from "@/lib/navigation";
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   return (
     <Sidebar collapsible="offcanvas" {...props}>
-      <SidebarHeader>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton
-              asChild
-              className="data-[slot=sidebar-menu-button]:!p-1.5"
-            >
-              <a href="/">
-                <IconEye className="size-5" />
-                <span className="text-base font-semibold">Argus</span>
-              </a>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
+      <SidebarHeader className="px-4 pt-5 pb-4">
+        <div className="flex items-center justify-between gap-2">
+          <a href="/" aria-label="Homepage" className="flex items-center gap-2">
+            <IconEye className="size-4 text-muted-foreground" />
+            <span className="text-xs font-semibold uppercase tracking-widest">
+              argus
+            </span>
+          </a>
+          {isDemoMode && (
+            <span className="rounded-full border border-border bg-muted px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+              Demo
+            </span>
+          )}
+        </div>
       </SidebarHeader>
       <SidebarContent>
-        <NavMain items={data.navMain} />
+        <NavMain items={navSections} labelClassName="hidden" />
         <div className="mt-auto px-3 py-2">
           <div className="flex items-center justify-between">
             <span className="text-xs text-muted-foreground">Theme</span>
@@ -120,6 +43,16 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         </div>
       </SidebarContent>
       <SidebarFooter>
+        {isDemoMode && (
+          <button
+            type="button"
+            onClick={resetDemoAndReload}
+            className="mx-2 flex items-center gap-2 rounded-md px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          >
+            <IconRefresh className="size-4" />
+            Reset demo
+          </button>
+        )}
         <Separator />
         <UserNav />
       </SidebarFooter>
diff --git a/components/ascii-eye.tsx b/components/ascii-eye.tsx
index 10556b4..a2ab3b5 100644
--- a/components/ascii-eye.tsx
+++ b/components/ascii-eye.tsx
@@ -133,18 +133,27 @@ export const AsciiEye = memo(function AsciiEye() {
   useEffect(() => {
     let colorInterval: NodeJS.Timeout | undefined;
     let scrambleInterval: NodeJS.Timeout | undefined;
-    
+
     // Color update - every 2000ms (increased from 800ms)
     colorInterval = setInterval(() => {
       // Update only a small batch of characters
-      const batchSize = Math.min(50, Math.ceil(nonWhitespaceIndicesRef.current.length / 10));
-      const startIdx = Math.floor(Math.random() * (nonWhitespaceIndicesRef.current.length - batchSize));
-      
-      for (let i = startIdx; i < startIdx + batchSize && i < nonWhitespaceIndicesRef.current.length; i++) {
+      const batchSize = Math.min(
+        50,
+        Math.ceil(nonWhitespaceIndicesRef.current.length / 10),
+      );
+      const startIdx = Math.floor(
+        Math.random() * (nonWhitespaceIndicesRef.current.length - batchSize),
+      );
+
+      for (
+        let i = startIdx;
+        i < startIdx + batchSize && i < nonWhitespaceIndicesRef.current.length;
+        i++
+      ) {
         const idx = nonWhitespaceIndicesRef.current[i];
         const char = charData[idx];
         const span = spansRef.current[idx];
-        
+
         if (span) {
           const newColor = getRandomColor(char.isDarkChar);
           span.style.color = newColor;
@@ -156,13 +165,15 @@ export const AsciiEye = memo(function AsciiEye() {
     scrambleInterval = setInterval(() => {
       const numToScramble = 10; // Reduced from 15-20
       const scrambledIndices: number[] = [];
-      
+
       // Scramble random characters
       for (let i = 0; i < numToScramble; i++) {
-        const randomIdx = Math.floor(Math.random() * nonWhitespaceIndicesRef.current.length);
+        const randomIdx = Math.floor(
+          Math.random() * nonWhitespaceIndicesRef.current.length,
+        );
         const idx = nonWhitespaceIndicesRef.current[randomIdx];
         scrambledIndices.push(idx);
-        
+
         const span = spansRef.current[idx];
         if (span) {
           span.textContent = getRandomBrailleChar();
@@ -173,7 +184,7 @@ export const AsciiEye = memo(function AsciiEye() {
       if (scrambleTimeoutRef.current) {
         window.clearTimeout(scrambleTimeoutRef.current);
       }
-      
+
       scrambleTimeoutRef.current = window.setTimeout(() => {
         scrambledIndices.forEach((idx) => {
           const span = spansRef.current[idx];
diff --git a/components/braille-loader.tsx b/components/braille-loader.tsx
new file mode 100644
index 0000000..1263303
--- /dev/null
+++ b/components/braille-loader.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+export function BrailleLoader({
+  className = "text-2xl",
+  label = "Loading",
+}: {
+  className?: string;
+  label?: string;
+}) {
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    const id = setInterval(() => setFrame((f) => (f + 1) % FRAMES.length), 80);
+    return () => clearInterval(id);
+  }, []);
+
+  return (
+    <span role="status" aria-label={label} className={className}>
+      <span aria-hidden>{FRAMES[frame]}</span>
+    </span>
+  );
+}
diff --git a/components/browser-component.tsx b/components/browser-component.tsx
index aca3a04..15db71b 100644
--- a/components/browser-component.tsx
+++ b/components/browser-component.tsx
@@ -1,31 +1,27 @@
-import { cn } from '@/utils/cn'
+import { cn } from "@/lib/utils";
 
-export const BrowserComponent: React.FC<{ children?: React.ReactNode; className?: string; url?: string }> = ({
-  className,
-  children,
-  url = "yourwebsite.com/admin/sales"
-}) => (
+function WindowDot() {
+  return <div className="w-2 h-2 rounded-full bg-muted-foreground/30" />;
+}
+
+export const BrowserComponent: React.FC<{
+  children?: React.ReactNode;
+  className?: string;
+  url?: string;
+}> = ({ className, children, url = "yourwebsite.com/admin/sales" }) => (
   <div
     className={cn(
-      'relative text-sm dark:text-neutral-400 text-neutral-950 border dark:border-neutral-800 rounded-lg w-full h-[600px] dark:shadow-none shadow-lg shadow-gray-200 dark:dots-neutral-800 dots-gray-300 dark:bg-neutral-950 bg-white',
-      className
+      "flex flex-col text-sm text-muted-foreground rounded-lg overflow-hidden w-full bg-background border border-border",
+      className,
     )}
   >
-    <div
-      className={
-        'border-b border-inherit flex items-center justify-between w-full py-2 px-4 bg-inherit rounded-t-lg'
-      }
-    >
-      <div className={'flex gap-2'}>
-        <div className={'w-3 h-3 rounded-full dark:bg-neutral-800 bg-neutral-300'} />
-        <div className={'w-3 h-3 rounded-full dark:bg-neutral-800 bg-neutral-300'} />
-        <div className={'w-3 h-3 rounded-full dark:bg-neutral-800 bg-neutral-300'} />
+    <div className="border-b border-inherit flex items-center justify-between w-full py-1 px-3 bg-inherit shrink-0">
+      <div className="flex gap-1.5">
+        <WindowDot />
+        <WindowDot />
+        <WindowDot />
       </div>
-      <div
-        className={
-          'border border-inherit rounded-md flex gap-2 px-1.5 py-1 font-sans w-fit min-w-1/3'
-        }
-      >
+      <div className="border border-inherit rounded flex gap-1.5 px-1.5 py-0.5 w-fit min-w-1/3">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -33,19 +29,17 @@ export const BrowserComponent: React.FC<{ children?: React.ReactNode; className?
           viewBox="0 0 24 24"
           fill="none"
           strokeWidth="2"
-          className={'dark:stroke-neutral-700 stroke-neutral-300 w-4 max-w-5'}
+          className="stroke-muted-foreground/40 w-3 max-w-4"
           strokeLinecap="round"
           strokeLinejoin="round"
         >
           <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
           <path d="M7 11V7a5 5 0 0 1 10 0v4" />
         </svg>
-        <span className={'text-sm flex items-center justify-center'}>
-          {url}
-        </span>
+        <span className="text-xs flex items-center justify-center">{url}</span>
       </div>
       <div />
     </div>
-    <div className={'w-full h-full absolute top-0 left-0 pt-12'}>{children}</div>
+    <div className="w-full">{children}</div>
   </div>
-)
+);
diff --git a/components/command-menu.tsx b/components/command-menu.tsx
index 434f487..0159373 100644
--- a/components/command-menu.tsx
+++ b/components/command-menu.tsx
@@ -1,17 +1,6 @@
 "use client";
 
-import {
-  IconBug,
-  IconChartBar,
-  IconDatabase,
-  IconEye,
-  IconFileText,
-  IconList,
-  IconMessageChatbot,
-  IconPlayerPlay,
-  IconSearch,
-  IconVideo,
-} from "@tabler/icons-react";
+import { IconRefresh, IconRocket } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import * as React from "react";
 
@@ -24,69 +13,8 @@ import {
   CommandList,
   CommandSeparator,
 } from "@/components/ui/command";
-
-const navigationItems = [
-  {
-    group: "Stream",
-    items: [
-      {
-        title: "Create Stream",
-        url: "/stream",
-        icon: IconVideo,
-      },
-    ],
-  },
-  {
-    group: "Dashboard",
-    items: [
-      {
-        title: "Watch",
-        url: "/watch",
-        icon: IconPlayerPlay,
-      },
-      {
-        title: "Stats",
-        url: "/stats",
-        icon: IconChartBar,
-      },
-      {
-        title: "Search",
-        url: "/search",
-        icon: IconSearch,
-      },
-      {
-        title: "AI Chat",
-        url: "/ai-chat",
-        icon: IconMessageChatbot,
-      },
-      {
-        title: "Reports",
-        url: "/reports",
-        icon: IconFileText,
-      },
-    ],
-  },
-  {
-    group: "Admin",
-    items: [
-      {
-        title: "Jobs",
-        url: "/jobs",
-        icon: IconList,
-      },
-      {
-        title: "Database",
-        url: "/database",
-        icon: IconDatabase,
-      },
-      {
-        title: "Debug",
-        url: "/debug",
-        icon: IconBug,
-      },
-    ],
-  },
-];
+import { isDemoMode } from "@/lib/demo/flag";
+import { navSections, resetDemoAndReload } from "@/lib/navigation";
 
 export function CommandMenu() {
   const [open, setOpen] = React.useState(false);
@@ -109,15 +37,20 @@ export function CommandMenu() {
     router.push(url);
   };
 
+  const handleResetDemo = () => {
+    setOpen(false);
+    resetDemoAndReload();
+  };
+
   return (
     <CommandDialog open={open} onOpenChange={setOpen}>
       <CommandInput placeholder="Type a command or search..." />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
-        {navigationItems.map((section, idx) => (
-          <React.Fragment key={section.group}>
+        {navSections.map((section, idx) => (
+          <React.Fragment key={section.title}>
             {idx > 0 && <CommandSeparator />}
-            <CommandGroup heading={section.group}>
+            <CommandGroup heading={section.title}>
               {section.items.map((item) => {
                 const Icon = item.icon;
                 return (
@@ -134,6 +67,27 @@ export function CommandMenu() {
             </CommandGroup>
           </React.Fragment>
         ))}
+        {isDemoMode && (
+          <>
+            <CommandSeparator />
+            <CommandGroup heading="Demo">
+              <CommandItem
+                onSelect={() => handleSelect("/onboarding")}
+                className="cursor-pointer"
+              >
+                <IconRocket className="mr-2 h-4 w-4" />
+                <span>Run setup copilot</span>
+              </CommandItem>
+              <CommandItem
+                onSelect={handleResetDemo}
+                className="cursor-pointer"
+              >
+                <IconRefresh className="mr-2 h-4 w-4" />
+                <span>Reset demo</span>
+              </CommandItem>
+            </CommandGroup>
+          </>
+        )}
       </CommandList>
     </CommandDialog>
   );
diff --git a/components/cta-link.tsx b/components/cta-link.tsx
new file mode 100644
index 0000000..a18c7b2
--- /dev/null
+++ b/components/cta-link.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import Link from "next/link";
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+const baseClasses =
+  "inline-flex items-center gap-2 rounded-md bg-foreground text-background px-5 py-2.5 text-sm font-medium hover:opacity-90 transition-opacity";
+
+const disabledClasses = "opacity-50 cursor-not-allowed pointer-events-none";
+
+type CtaLinkAsLink = {
+  href: string;
+  onClick?: never;
+  type?: never;
+} & Omit<React.ComponentPropsWithoutRef<typeof Link>, "href" | "className">;
+
+type CtaLinkAsButton = {
+  href?: never;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  type?: "button" | "submit" | "reset";
+} & Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "onClick" | "type" | "className"
+>;
+
+type CtaLinkProps = {
+  className?: string;
+  disabled?: boolean;
+  children: React.ReactNode;
+} & (CtaLinkAsLink | CtaLinkAsButton);
+
+export function CtaLink({
+  className,
+  disabled,
+  children,
+  ...props
+}: CtaLinkProps) {
+  const composed = cn(baseClasses, disabled && disabledClasses, className);
+
+  if ("href" in props && props.href !== undefined) {
+    const { href, ...rest } = props;
+    return (
+      <Link
+        href={href}
+        className={composed}
+        aria-disabled={disabled || undefined}
+        tabIndex={disabled ? -1 : undefined}
+        {...rest}
+      >
+        {children}
+      </Link>
+    );
+  }
+
+  const { type = "button", onClick, ...rest } = props as CtaLinkAsButton;
+  return (
+    <button
+      type={type}
+      className={composed}
+      disabled={disabled}
+      onClick={onClick}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/components/database/columns.tsx b/components/database/columns.tsx
new file mode 100644
index 0000000..685acee
--- /dev/null
+++ b/components/database/columns.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import type { ColumnDef } from "@tanstack/react-table";
+import { Badge } from "@/components/ui/badge";
+import { formatClockDuration, relativeTime } from "@/lib/format";
+import type {
+  AIAnalysisEvent,
+  AIAnalysisJob,
+  Asset,
+  Camera,
+} from "@/lib/supabase";
+
+const statusVariant: Record<string, "default" | "secondary" | "outline"> = {
+  active: "default",
+  succeeded: "default",
+  ready: "default",
+  idle: "secondary",
+  queued: "secondary",
+  processing: "secondary",
+  disabled: "outline",
+  failed: "outline",
+};
+
+const severityClass: Record<string, string> = {
+  High: "bg-red-500/15 text-red-500 border-red-500/30",
+  Medium:
+    "bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/30",
+  Minor: "bg-muted text-muted-foreground border-border",
+};
+
+function StatusBadge({ status }: { status: string }) {
+  return <Badge variant={statusVariant[status] ?? "outline"}>{status}</Badge>;
+}
+
+function MonoId({ value }: { value: string | number }) {
+  return (
+    <span className="font-mono text-xs text-muted-foreground">{value}</span>
+  );
+}
+
+export const cameraColumns: ColumnDef<Camera>[] = [
+  { accessorKey: "camera_name", header: "Name" },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <StatusBadge status={row.original.status} />,
+  },
+  {
+    accessorKey: "last_connected_at",
+    header: "Last connected",
+    cell: ({ row }) => relativeTime(row.original.last_connected_at),
+  },
+  {
+    accessorKey: "id",
+    header: "ID",
+    cell: ({ row }) => <MonoId value={row.original.id} />,
+  },
+];
+
+export const assetColumns: ColumnDef<Asset>[] = [
+  {
+    id: "title",
+    header: "Title",
+    accessorFn: (a) => a.meta?.title ?? a.id,
+    cell: ({ row }) => row.original.meta?.title ?? row.original.id,
+  },
+  {
+    accessorKey: "duration_seconds",
+    header: "Duration",
+    cell: ({ row }) => formatClockDuration(row.original.duration_seconds),
+  },
+  { accessorKey: "resolution_tier", header: "Resolution" },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <StatusBadge status={row.original.status} />,
+  },
+  {
+    accessorKey: "created_at",
+    header: "Created",
+    cell: ({ row }) => relativeTime(row.original.created_at),
+  },
+];
+
+export const eventColumns: ColumnDef<AIAnalysisEvent>[] = [
+  { accessorKey: "name", header: "Event" },
+  { accessorKey: "type", header: "Type" },
+  {
+    accessorKey: "severity",
+    header: "Severity",
+    cell: ({ row }) => (
+      <span
+        className={`inline-flex items-center rounded-full border px-2 py-0.5 text-xs ${severityClass[row.original.severity]}`}
+      >
+        {row.original.severity}
+      </span>
+    ),
+  },
+  {
+    accessorKey: "asset_id",
+    header: "Asset",
+    cell: ({ row }) => <MonoId value={row.original.asset_id} />,
+  },
+  {
+    accessorKey: "created_at",
+    header: "Detected",
+    cell: ({ row }) => relativeTime(row.original.created_at),
+  },
+];
+
+export const jobColumns: ColumnDef<AIAnalysisJob>[] = [
+  {
+    accessorKey: "id",
+    header: "Job",
+    cell: ({ row }) => (
+      <span className="font-mono text-xs">#{row.original.id}</span>
+    ),
+  },
+  { accessorKey: "source_type", header: "Source" },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <StatusBadge status={row.original.status} />,
+  },
+  { accessorKey: "attempts", header: "Attempts" },
+  {
+    accessorKey: "created_at",
+    header: "Created",
+    cell: ({ row }) => relativeTime(row.original.created_at),
+  },
+];
diff --git a/components/database/data-table.tsx b/components/database/data-table.tsx
new file mode 100644
index 0000000..c55f7a8
--- /dev/null
+++ b/components/database/data-table.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { IconArrowsSort, IconSearch } from "@tabler/icons-react";
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface DataTableProps<T> {
+  columns: ColumnDef<T>[];
+  data: T[];
+  searchPlaceholder?: string;
+  className?: string;
+}
+
+export function DataTable<T>({
+  columns,
+  data,
+  searchPlaceholder = "Search…",
+  className,
+}: DataTableProps<T>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [globalFilter, setGlobalFilter] = useState("");
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: { sorting, globalFilter },
+    onSortingChange: setSorting,
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+  });
+
+  return (
+    <div className={cn("flex flex-col gap-3", className)}>
+      <div className="relative max-w-xs">
+        <IconSearch className="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          value={globalFilter}
+          onChange={(e) => setGlobalFilter(e.target.value)}
+          placeholder={searchPlaceholder}
+          className="h-9 pl-8"
+        />
+      </div>
+      <div className="border border-border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((hg) => (
+              <TableRow key={hg.id}>
+                {hg.headers.map((header) => {
+                  const canSort = header.column.getCanSort();
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <button
+                          type="button"
+                          disabled={!canSort}
+                          onClick={header.column.getToggleSortingHandler()}
+                          className="inline-flex items-center gap-1 disabled:cursor-default"
+                        >
+                          {flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                          {canSort && (
+                            <IconArrowsSort className="size-3 text-muted-foreground" />
+                          )}
+                        </button>
+                      )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center text-muted-foreground"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        {table.getFilteredRowModel().rows.length} of {data.length} rows
+      </p>
+    </div>
+  );
+}
diff --git a/components/database/stat-tile.tsx b/components/database/stat-tile.tsx
new file mode 100644
index 0000000..476cae5
--- /dev/null
+++ b/components/database/stat-tile.tsx
@@ -0,0 +1,23 @@
+import { cn } from "@/lib/utils";
+
+interface StatTileProps {
+  label: string;
+  value: number;
+  className?: string;
+}
+
+export function StatTile({ label, value, className }: StatTileProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-1 border border-border bg-background px-4 py-3",
+        className,
+      )}
+    >
+      <span className="text-2xl font-semibold tabular-nums tracking-tight">
+        {value}
+      </span>
+      <span className="text-xs text-muted-foreground">{label}</span>
+    </div>
+  );
+}
diff --git a/components/demo/demo-disabled-notice.tsx b/components/demo/demo-disabled-notice.tsx
new file mode 100644
index 0000000..4912fd8
--- /dev/null
+++ b/components/demo/demo-disabled-notice.tsx
@@ -0,0 +1,34 @@
+import { IconInfoCircle } from "@tabler/icons-react";
+
+export function DemoDisabledNotice({
+  title = "Live streaming is disabled in this demo",
+  description = "The browser → RTMP → Mux pipeline needs a persistent server and isn't available on the demo deployment. The rest of Argus is fully functional with sample data.",
+}: {
+  title?: string;
+  description?: string;
+}) {
+  return (
+    <div className="rounded-lg border border-amber-500/40 bg-amber-500/10 p-4 text-sm">
+      <div className="flex gap-3">
+        <IconInfoCircle className="size-5 shrink-0 text-amber-500" />
+        <div className="space-y-1">
+          <p className="font-medium text-amber-900 dark:text-amber-200">
+            {title}
+          </p>
+          <p className="text-amber-900/80 dark:text-amber-200/80">
+            {description}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function DemoBadge() {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-amber-900 dark:text-amber-200">
+      <span className="size-1.5 rounded-full bg-amber-500" />
+      Demo
+    </span>
+  );
+}
diff --git a/components/fancy/text/decrypted-text.tsx b/components/fancy/text/decrypted-text.tsx
deleted file mode 100644
index 5b0d664..0000000
--- a/components/fancy/text/decrypted-text.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useRef, useState } from "react";
-
-type DecryptedTextProps = {
-  text: string;
-  revealDurationMs?: number;
-  scrambleSpeed?: number;
-  characters?: string;
-  className?: string;
-};
-
-export default function DecryptedText({
-  text,
-  revealDurationMs = 1500,
-  scrambleSpeed = 30,
-  characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+{}[]<>?",
-  className,
-}: DecryptedTextProps) {
-  const [display, setDisplay] = useState(text);
-  const startTsRef = useRef<number | null>(null);
-  const rafRef = useRef<number | null>(null);
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  const charPool = useMemo(() => characters.split(""), [characters]);
-
-  useEffect(() => {
-    // Reset state when text changes
-    setDisplay(text);
-    startTsRef.current = null;
-
-    const tick = (ts: number) => {
-      if (startTsRef.current == null) startTsRef.current = ts;
-      const elapsed = ts - startTsRef.current;
-      const progress = Math.min(1, elapsed / revealDurationMs);
-      const revealCount = Math.floor(progress * text.length);
-
-      setDisplay((prev) => {
-        const revealed = text.slice(0, revealCount);
-        const remaining = text
-          .slice(revealCount)
-          .split("")
-          .map((ch) => (ch === " " ? " " : charPool[Math.floor(Math.random() * charPool.length)]))
-          .join("");
-        return revealed + remaining;
-      });
-
-      if (progress < 1) {
-        rafRef.current = requestAnimationFrame(tick);
-      } else {
-        setDisplay(text);
-      }
-    };
-
-    // Keep scrambling unrevealed characters between RAF frames for a smoother effect
-    intervalRef.current = setInterval(() => {
-      if (startTsRef.current == null) return;
-      const elapsed = performance.now() - startTsRef.current;
-      const progress = Math.min(1, elapsed / revealDurationMs);
-      const revealCount = Math.floor(progress * text.length);
-      setDisplay((prev) => {
-        const revealed = text.slice(0, revealCount);
-        const remaining = text
-          .slice(revealCount)
-          .split("")
-          .map((ch) => (ch === " " ? " " : charPool[Math.floor(Math.random() * charPool.length)]))
-          .join("");
-        return revealed + remaining;
-      });
-    }, scrambleSpeed);
-
-    rafRef.current = requestAnimationFrame(tick);
-
-    return () => {
-      if (rafRef.current) cancelAnimationFrame(rafRef.current);
-      if (intervalRef.current) clearInterval(intervalRef.current);
-    };
-  }, [text, revealDurationMs, scrambleSpeed, charPool]);
-
-  return <span className={className}>{display}</span>;
-}
-
-
diff --git a/components/fancy/text/scramble-hover.tsx b/components/fancy/text/scramble-hover.tsx
deleted file mode 100644
index 6ae8025..0000000
--- a/components/fancy/text/scramble-hover.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-"use client"
-
-import { useEffect, useState } from "react"
-import { motion } from "motion/react"
-
-import { cn } from "@/lib/utils"
-
-interface ScrambleHoverProps {
-  text: string
-  scrambleSpeed?: number
-  maxIterations?: number
-  sequential?: boolean
-  revealDirection?: "start" | "end" | "center"
-  useOriginalCharsOnly?: boolean
-  characters?: string
-  className?: string
-  scrambledClassName?: string
-}
-
-const ScrambleHover: React.FC<ScrambleHoverProps> = ({
-  text,
-  scrambleSpeed = 50,
-  maxIterations = 10,
-  useOriginalCharsOnly = false,
-  characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+",
-  className,
-  scrambledClassName,
-  sequential = false,
-  revealDirection = "start",
-  ...props
-}) => {
-  const [displayText, setDisplayText] = useState(text)
-  const [isHovering, setIsHovering] = useState(false)
-  const [isScrambling, setIsScrambling] = useState(false)
-  const [revealedIndices, setRevealedIndices] = useState(new Set<number>())
-
-  useEffect(() => {
-    let interval: NodeJS.Timeout
-    let currentIteration = 0
-
-    const getNextIndex = () => {
-      const textLength = text.length
-      switch (revealDirection) {
-        case "start":
-          return revealedIndices.size
-        case "end":
-          return textLength - 1 - revealedIndices.size
-        case "center":
-          const middle = Math.floor(textLength / 2)
-          const offset = Math.floor(revealedIndices.size / 2)
-          const nextIndex =
-            revealedIndices.size % 2 === 0
-              ? middle + offset
-              : middle - offset - 1
-
-          if (
-            nextIndex >= 0 &&
-            nextIndex < textLength &&
-            !revealedIndices.has(nextIndex)
-          ) {
-            return nextIndex
-          }
-
-          for (let i = 0; i < textLength; i++) {
-            if (!revealedIndices.has(i)) return i
-          }
-          return 0
-        default:
-          return revealedIndices.size
-      }
-    }
-
-    const shuffleText = (text: string) => {
-      if (useOriginalCharsOnly) {
-        const positions = text.split("").map((char, i) => ({
-          char,
-          isSpace: char === " ",
-          index: i,
-          isRevealed: revealedIndices.has(i),
-        }))
-
-        const nonSpaceChars = positions
-          .filter((p) => !p.isSpace && !p.isRevealed)
-          .map((p) => p.char)
-
-        // Shuffle remaining non-revealed, non-space characters
-        for (let i = nonSpaceChars.length - 1; i > 0; i--) {
-          const j = Math.floor(Math.random() * (i + 1))
-          ;[nonSpaceChars[i], nonSpaceChars[j]] = [
-            nonSpaceChars[j],
-            nonSpaceChars[i],
-          ]
-        }
-
-        let charIndex = 0
-        return positions
-          .map((p) => {
-            if (p.isSpace) return " "
-            if (p.isRevealed) return text[p.index]
-            return nonSpaceChars[charIndex++]
-          })
-          .join("")
-      } else {
-        return text
-          .split("")
-          .map((char, i) => {
-            if (char === " ") return " "
-            if (revealedIndices.has(i)) return text[i]
-            return availableChars[
-              Math.floor(Math.random() * availableChars.length)
-            ]
-          })
-          .join("")
-      }
-    }
-
-    const availableChars = useOriginalCharsOnly
-      ? Array.from(new Set(text.split(""))).filter((char) => char !== " ")
-      : characters.split("")
-
-    if (isHovering) {
-      setIsScrambling(true)
-      interval = setInterval(() => {
-        if (sequential) {
-          if (revealedIndices.size < text.length) {
-            const nextIndex = getNextIndex()
-            revealedIndices.add(nextIndex)
-            setDisplayText(shuffleText(text))
-          } else {
-            clearInterval(interval)
-            setIsScrambling(false)
-          }
-        } else {
-          setDisplayText(shuffleText(text))
-          currentIteration++
-          if (currentIteration >= maxIterations) {
-            clearInterval(interval)
-            setIsScrambling(false)
-            setDisplayText(text)
-          }
-        }
-      }, scrambleSpeed)
-    } else {
-      setDisplayText(text)
-      revealedIndices.clear()
-    }
-
-    return () => {
-      if (interval) clearInterval(interval)
-    }
-  }, [
-    isHovering,
-    text,
-    characters,
-    scrambleSpeed,
-    useOriginalCharsOnly,
-    sequential,
-    revealDirection,
-    maxIterations,
-  ])
-
-  return (
-    <motion.span
-      onHoverStart={() => setIsHovering(true)}
-      onHoverEnd={() => setIsHovering(false)}
-      className={cn("inline-block whitespace-pre-wrap", className)}
-      {...props}
-    >
-      <span className="sr-only">{displayText}</span>
-      <span aria-hidden="true">
-        {displayText.split("").map((char, index) => (
-          <span
-            key={index}
-            className={cn(
-              revealedIndices.has(index) || !isScrambling || !isHovering
-                ? className
-                : scrambledClassName
-            )}
-          >
-            {char}
-          </span>
-        ))}
-      </span>
-    </motion.span>
-  )
-}
-
-export default ScrambleHover
diff --git a/components/fancy/text/text-highlighter.tsx b/components/fancy/text/text-highlighter.tsx
deleted file mode 100644
index 0e7d035..0000000
--- a/components/fancy/text/text-highlighter.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-"use client"
-
-import {
-  ElementType,
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from "react"
-import { motion, Transition, useInView, UseInViewOptions } from "motion/react"
-
-import { cn } from "@/lib/utils"
-
-type HighlightDirection = "ltr" | "rtl" | "ttb" | "btt"
-
-type TextHighlighterProps = {
-  /**
-   * The text content to be highlighted
-   */
-  children: React.ReactNode
-
-  /**
-   * HTML element to render as
-   * @default "p"
-   */
-  as?: ElementType
-
-  /**
-   * How to trigger the animation
-   * @default "inView"
-   */
-  triggerType?: "hover" | "ref" | "inView" | "auto"
-
-  /**
-   * Animation transition configuration
-   * @default { duration: 0.4, type: "spring", bounce: 0 }
-   */
-  transition?: Transition
-
-  /**
-   * Options for useInView hook when triggerType is "inView"
-   */
-  useInViewOptions?: UseInViewOptions
-
-  /**
-   * Class name for the container element
-   */
-  className?: string
-
-  /**
-   * Highlight color (CSS color string). Also can be a function that returns a color string, eg:
-   * @default 'hsl(60, 90%, 68%)' (yellow)
-   */
-  highlightColor?: string
-
-  /**
-   * Direction of the highlight animation
-   * @default "ltr" (left to right)
-   */
-  direction?: HighlightDirection
-} & React.HTMLAttributes<HTMLElement>
-
-export type TextHighlighterRef = {
-  /**
-   * Trigger the highlight animation
-   * @param direction - Optional direction override for this animation
-   */
-  animate: (direction?: HighlightDirection) => void
-
-  /**
-   * Reset the highlight animation
-   */
-  reset: () => void
-}
-
-export const TextHighlighter = forwardRef<
-  TextHighlighterRef,
-  TextHighlighterProps
->(
-  (
-    {
-      children,
-      as = "span",
-      triggerType = "inView",
-      transition = { type: "spring", duration: 1, delay: 0, bounce: 0 },
-      useInViewOptions = {
-        once: true,
-        initial: false,
-        amount: 0.1,
-      },
-      className,
-      highlightColor = "hsl(25, 90%, 80%)",
-      direction = "ltr",
-      ...props
-    },
-    ref
-  ) => {
-    const componentRef = useRef<HTMLDivElement>(null)
-    const [isAnimating, setIsAnimating] = useState(false)
-    const [isHovered, setIsHovered] = useState(false)
-    const [currentDirection, setCurrentDirection] =
-      useState<HighlightDirection>(direction)
-
-    // this allows us to change the direction whenever the direction prop changes
-    useEffect(() => {
-      setCurrentDirection(direction)
-    }, [direction])
-
-    const isInView =
-      triggerType === "inView"
-        ? useInView(componentRef, useInViewOptions)
-        : false
-
-    useImperativeHandle(ref, () => ({
-      animate: (animationDirection?: HighlightDirection) => {
-        if (animationDirection) {
-          setCurrentDirection(animationDirection)
-        }
-        setIsAnimating(true)
-      },
-      reset: () => setIsAnimating(false),
-    }))
-
-    const shouldAnimate =
-      triggerType === "hover"
-        ? isHovered
-        : triggerType === "inView"
-          ? isInView
-          : triggerType === "ref"
-            ? isAnimating
-            : triggerType === "auto"
-              ? true
-              : false
-
-    const ElementTag = as || "span"
-
-    // Get background size based on direction
-    const getBackgroundSize = (animated: boolean) => {
-      switch (currentDirection) {
-        case "ltr":
-          return animated ? "100% 100%" : "0% 100%"
-        case "rtl":
-          return animated ? "100% 100%" : "0% 100%"
-        case "ttb":
-          return animated ? "100% 100%" : "100% 0%"
-        case "btt":
-          return animated ? "100% 100%" : "100% 0%"
-        default:
-          return animated ? "100% 100%" : "0% 100%"
-      }
-    }
-
-    // Get background position based on direction
-    const getBackgroundPosition = () => {
-      switch (currentDirection) {
-        case "ltr":
-          return "0% 0%"
-        case "rtl":
-          return "100% 0%"
-        case "ttb":
-          return "0% 0%"
-        case "btt":
-          return "0% 100%"
-        default:
-          return "0% 0%"
-      }
-    }
-
-    const animatedSize = useMemo(() => getBackgroundSize(shouldAnimate), [shouldAnimate, currentDirection])
-    const initialSize = useMemo(() => getBackgroundSize(false), [currentDirection])
-    const backgroundPosition = useMemo(() => getBackgroundPosition(), [currentDirection])
-
-    const highlightStyle = {
-      backgroundImage: `linear-gradient(${highlightColor}, ${highlightColor})`,
-      backgroundRepeat: "no-repeat",
-      backgroundPosition: backgroundPosition,
-      backgroundSize: animatedSize,
-      boxDecorationBreak: "clone",
-      WebkitBoxDecorationBreak: "clone",
-    } as React.CSSProperties
-
-    return (
-      <ElementTag
-        ref={componentRef}
-        onMouseEnter={() => triggerType === "hover" && setIsHovered(true)}
-        onMouseLeave={() => triggerType === "hover" && setIsHovered(false)}
-        {...props}
-      >
-        <motion.span
-          className={cn("inline", className)}
-          style={highlightStyle}
-          animate={{
-            backgroundSize: animatedSize,
-          }}
-          initial={{
-            backgroundSize: initialSize,
-          }}
-          transition={transition}
-        >
-          {children}
-        </motion.span>
-      </ElementTag>
-    )
-  }
-)
-
-TextHighlighter.displayName = "TextHighlighter"
-
-export default TextHighlighter
diff --git a/components/features-alternating.tsx b/components/features-alternating.tsx
deleted file mode 100644
index 98e8ec6..0000000
--- a/components/features-alternating.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-import { gsap } from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-import { LuxeCard, LuxeCardHeader, LuxeCardTitle, LuxeCardDescription } from "@/components/ui/luxe-card";
-
-gsap.registerPlugin(ScrollTrigger);
-
-interface FeaturesAlternatingProps {
-  features: Array<{
-    title: string;
-    description: string;
-    content: React.ReactNode;
-  }>;
-}
-
-export function FeaturesAlternating({
-  features,
-}: FeaturesAlternatingProps) {
-  const sectionRefs = useRef<(HTMLDivElement | null)[]>([]);
-
-  useEffect(() => {
-    sectionRefs.current.forEach((section, index) => {
-      if (!section) return;
-
-      const isEven = index % 2 === 0;
-      const cardElement = section.querySelector('.feature-card');
-      const contentElement = section.querySelector('.feature-content');
-
-      // Animate card sliding in from its side
-      if (cardElement) {
-        gsap.fromTo(
-          cardElement,
-          {
-            x: isEven ? -100 : 100,
-            opacity: 0,
-          },
-          {
-            x: 0,
-            opacity: 1,
-            duration: 0.8,
-            ease: "power3.out",
-            scrollTrigger: {
-              trigger: section,
-              start: "top 80%",
-              end: "top 50%",
-              toggleActions: "play none none reverse",
-            },
-          }
-        );
-      }
-
-      // Animate content sliding in from opposite side
-      if (contentElement) {
-        gsap.fromTo(
-          contentElement,
-          {
-            x: isEven ? 100 : -100,
-            opacity: 0,
-          },
-          {
-            x: 0,
-            opacity: 1,
-            duration: 0.8,
-            ease: "power3.out",
-            scrollTrigger: {
-              trigger: section,
-              start: "top 80%",
-              end: "top 50%",
-              toggleActions: "play none none reverse",
-            },
-          }
-        );
-      }
-    });
-
-    return () => {
-      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
-    };
-  }, [features]);
-
-  return (
-    <div className="w-full max-w-[95%] lg:max-w-[80%] mx-auto space-y-12 lg:space-y-24">
-      {features.map((feature, index) => {
-        const isEven = index % 2 === 0;
-        
-        return (
-          <div
-            key={index}
-            ref={(el) => {
-              sectionRefs.current[index] = el;
-            }}
-            className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-12 items-start"
-          >
-            {isEven ? (
-              <>
-                {/* Left: Text Content */}
-                <LuxeCard variant="revealed-pointer" className="feature-card">
-                  <LuxeCardHeader>
-                    <LuxeCardTitle className="text-xl lg:text-2xl">
-                      {feature.title}
-                    </LuxeCardTitle>
-                    <LuxeCardDescription className="text-base lg:text-lg">
-                      {feature.description}
-                    </LuxeCardDescription>
-                  </LuxeCardHeader>
-                </LuxeCard>
-
-                {/* Right: Browser Component */}
-                <div className="w-full min-h-[300px] lg:min-h-[600px] feature-content">
-                  {feature.content}
-                </div>
-              </>
-            ) : (
-              <>
-                {/* Left: Browser Component */}
-                <div className="w-full min-h-[300px] lg:min-h-[600px] feature-content lg:order-first">
-                  {feature.content}
-                </div>
-
-                {/* Right: Text Content */}
-                <LuxeCard variant="revealed-pointer" className="feature-card lg:order-last">
-                  <LuxeCardHeader>
-                    <LuxeCardTitle className="text-xl lg:text-2xl">
-                      {feature.title}
-                    </LuxeCardTitle>
-                    <LuxeCardDescription className="text-base lg:text-lg">
-                      {feature.description}
-                    </LuxeCardDescription>
-                  </LuxeCardHeader>
-                </LuxeCard>
-              </>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
diff --git a/components/jobs/columns.tsx b/components/jobs/columns.tsx
index 810fab5..beadb88 100644
--- a/components/jobs/columns.tsx
+++ b/components/jobs/columns.tsx
@@ -4,7 +4,7 @@ import {
   IconExclamationCircle,
   IconReportAnalytics,
 } from "@tabler/icons-react";
-import type { ColumnDef } from "@tanstack/react-table";
+import type { ColumnDef, HeaderContext } from "@tanstack/react-table";
 import { ArrowUpDown, Copy, Eye, MoreHorizontal } from "lucide-react";
 import Link from "next/link";
 import { toast } from "sonner";
@@ -49,54 +49,47 @@ function formatTimestamp(timestamp: string): string {
   });
 }
 
-function formatDuration(
+function formatTimeWindow(
   startEpoch: number,
   endEpoch: number,
   sourceType: string,
 ): string {
+  // VOD stores relative seconds; live stores Unix epochs.
   if (sourceType === "vod") {
-    // For VOD, these are relative seconds
     return `${startEpoch}s - ${endEpoch}s`;
-  } else {
-    // For live, these are Unix epochs
-    const duration = endEpoch - startEpoch;
-    return `${duration}s segment`;
   }
+  return `${endEpoch - startEpoch}s segment`;
+}
+
+/** Header renderer for a sortable column: a ghost button that toggles sorting. */
+function sortableHeader(label: string) {
+  return function SortableColumnHeader({
+    column,
+  }: HeaderContext<AIAnalysisJob, unknown>) {
+    return (
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+      >
+        {label}
+        <ArrowUpDown className="ml-2 h-4 w-4" />
+      </Button>
+    );
+  };
 }
 
 export const columns: ColumnDef<AIAnalysisJob>[] = [
   {
     accessorKey: "id",
-    header: ({ column }) => {
-      return (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-        >
-          Job ID
-          <ArrowUpDown className="ml-2 h-4 w-4" />
-        </Button>
-      );
-    },
+    header: sortableHeader("Job ID"),
     cell: ({ row }) => (
       <div className="font-mono text-sm">#{row.getValue("id")}</div>
     ),
   },
   {
     accessorKey: "status",
-    header: ({ column }) => {
-      return (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-        >
-          Status
-          <ArrowUpDown className="ml-2 h-4 w-4" />
-        </Button>
-      );
-    },
+    header: sortableHeader("Status"),
     cell: ({ row }) => {
       const status = row.getValue("status") as AIAnalysisJob["status"];
       return (
@@ -148,25 +141,33 @@ export const columns: ColumnDef<AIAnalysisJob>[] = [
       const sourceType = row.original.source_type;
       return (
         <div className="text-sm">
-          {formatDuration(startEpoch, endEpoch, sourceType)}
+          {formatTimeWindow(startEpoch, endEpoch, sourceType)}
         </div>
       );
     },
   },
   {
-    accessorKey: "attempts",
-    header: ({ column }) => {
+    id: "models",
+    header: "Models",
+    cell: ({ row }) => {
+      const models = row.original.models ?? [];
+      if (models.length === 0) {
+        return <span className="text-xs text-muted-foreground">—</span>;
+      }
       return (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-        >
-          Attempts
-          <ArrowUpDown className="ml-2 h-4 w-4" />
-        </Button>
+        <div className="flex max-w-[260px] flex-wrap gap-1">
+          {models.map((m) => (
+            <Badge key={m} variant="secondary" className="text-[10px]">
+              {m.split(/[:—]/)[0].trim()}
+            </Badge>
+          ))}
+        </div>
       );
     },
+  },
+  {
+    accessorKey: "attempts",
+    header: sortableHeader("Attempts"),
     cell: ({ row }) => {
       const attempts = row.getValue("attempts") as number;
       return (
@@ -180,47 +181,21 @@ export const columns: ColumnDef<AIAnalysisJob>[] = [
   },
   {
     accessorKey: "created_at",
-    header: ({ column }) => {
-      return (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-        >
-          Created
-          <ArrowUpDown className="ml-2 h-4 w-4" />
-        </Button>
-      );
-    },
-    cell: ({ row }) => {
-      return (
-        <div className="text-sm text-muted-foreground">
-          {formatTimestamp(row.getValue("created_at"))}
-        </div>
-      );
-    },
+    header: sortableHeader("Created"),
+    cell: ({ row }) => (
+      <div className="text-sm text-muted-foreground">
+        {formatTimestamp(row.getValue("created_at"))}
+      </div>
+    ),
   },
   {
     accessorKey: "updated_at",
-    header: ({ column }) => {
-      return (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-        >
-          Updated
-          <ArrowUpDown className="ml-2 h-4 w-4" />
-        </Button>
-      );
-    },
-    cell: ({ row }) => {
-      return (
-        <div className="text-sm text-muted-foreground">
-          {formatTimestamp(row.getValue("updated_at"))}
-        </div>
-      );
-    },
+    header: sortableHeader("Updated"),
+    cell: ({ row }) => (
+      <div className="text-sm text-muted-foreground">
+        {formatTimestamp(row.getValue("updated_at"))}
+      </div>
+    ),
   },
   {
     id: "actions",
diff --git a/components/landing-animated-tabs.tsx b/components/landing-animated-tabs.tsx
deleted file mode 100644
index f9894ec..0000000
--- a/components/landing-animated-tabs.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-"use client"; // @NOTE: Add in case you are using Next.js
-
-import { useEffect, useRef } from "react";
-
-import { cn } from "@/utils/cn";
-
-type AnimatedTabsProps = {
-  tabs: Array<string>;
-  activeTab: string;
-  onTabChange: (tab: string) => void;
-};
-
-export function AnimatedTabs({ tabs, activeTab, onTabChange }: AnimatedTabsProps) {
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const activeTabRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    const container = containerRef.current;
-
-    if (container && activeTab) {
-      const activeTabElement = activeTabRef.current;
-
-      if (activeTabElement) {
-        const { offsetLeft, offsetWidth } = activeTabElement;
-
-        const clipLeft = offsetLeft;
-        const clipRight = offsetLeft + offsetWidth;
-
-        container.style.clipPath = `inset(0 ${Number(100 - (clipRight / container.offsetWidth) * 100).toFixed()}% 0 ${Number((clipLeft / container.offsetWidth) * 100).toFixed()}% round 17px)`;
-      }
-    }
-  }, [activeTab]);
-
-  return (
-    <div className="relative mx-auto flex w-fit flex-col items-center rounded-full">
-      <div
-        ref={containerRef}
-        className="absolute z-10 w-full overflow-hidden [clip-path:inset(0px_75%_0px_0%_round_17px)] [transition:clip-path_0.25s_ease]"
-      >
-        <div className="relative flex w-full justify-center bg-primary">
-          {tabs.map((tab, index) => (
-            <button
-              key={index.toString()}
-              type="button"
-              onClick={() => onTabChange(tab)}
-              className={cn(
-                "flex h-8 items-center rounded-full p-3 font-medium text-primary-invert text-sm/5.5 max-sm:last:hidden",
-              )}
-              tabIndex={-1}
-            >
-              {tab}
-            </button>
-          ))}
-        </div>
-      </div>
-      <div className="relative flex w-full justify-center">
-        {tabs.map((tab, index) => {
-          const isActive = activeTab === tab;
-
-          return (
-            <button
-              key={index.toString()}
-              type="button"
-              ref={isActive ? activeTabRef : null}
-              onClick={() => onTabChange(tab)}
-              className="flex h-8 items-center rounded-full p-3 font-medium text-primary-muted text-sm/5.5 max-sm:last:hidden"
-            >
-              {tab}
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
diff --git a/components/landing/braille-bg.tsx b/components/landing/braille-bg.tsx
new file mode 100644
index 0000000..37c1612
--- /dev/null
+++ b/components/landing/braille-bg.tsx
@@ -0,0 +1,245 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export type BrailleVariant = "matrix" | "wave" | "pulse" | "vortex";
+
+export const DENSITY_CHARS = Array.from({ length: 256 }, (_, i) => {
+  let count = 0;
+  for (let b = 0; b < 8; b++) {
+    if ((i >> b) & 1) count++;
+  }
+  return { char: String.fromCharCode(0x2800 + i), count };
+})
+  .sort((a, b) => a.count - b.count)
+  .map((x) => x.char);
+
+const VARIANT_STYLES: Record<
+  BrailleVariant,
+  { colorClass: string; duration: string }
+> = {
+  matrix: {
+    colorClass: "from-emerald-400/90 via-teal-500/70 to-emerald-600/90",
+    duration: "8s",
+  },
+  wave: {
+    colorClass: "from-orange-400/90 via-amber-500/70 to-rose-600/90",
+    duration: "12s",
+  },
+  pulse: {
+    colorClass: "from-indigo-400/90 via-purple-500/70 to-blue-600/90",
+    duration: "10s",
+  },
+  vortex: {
+    colorClass: "from-yellow-300/90 via-rose-500/80 to-red-700/90",
+    duration: "6s",
+  },
+};
+
+/**
+ * Shared animation loop that fills a `rows x cols` braille grid on an interval.
+ * `enabled === false` pauses the loop. `compute` returns the density value
+ * (0..1) for a cell given the current frame count.
+ */
+function useBrailleGrid(
+  rows: number,
+  cols: number,
+  enabled: boolean,
+  compute: (
+    r: number,
+    c: number,
+    frameCount: number,
+    cols: number,
+    rows: number,
+  ) => number,
+  deps: React.DependencyList,
+) {
+  const [grid, setGrid] = useState<string[][]>([]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (!enabled) return;
+    let frameCount = 0;
+
+    const id = setInterval(() => {
+      frameCount++;
+      const next: string[][] = Array(rows)
+        .fill(null)
+        .map(() => Array(cols).fill(""));
+
+      for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+          const v = compute(r, c, frameCount, cols, rows);
+          const charIdx = Math.min(255, Math.max(0, Math.floor(v * 255)));
+          next[r][c] = DENSITY_CHARS[charIdx];
+        }
+      }
+      setGrid(next);
+    }, 50);
+
+    return () => clearInterval(id);
+  }, deps);
+
+  return grid;
+}
+
+export function MiniBrailleBg({
+  variant,
+  active,
+}: {
+  variant: BrailleVariant;
+  active: boolean;
+}) {
+  const rows = 25;
+  const cols = 45;
+
+  // `matrix` keeps per-column drop state that advances every frame; recreated
+  // whenever the loop (re)starts via the dependency list below.
+  const grid = useBrailleGrid(
+    rows,
+    cols,
+    active,
+    (() => {
+      const drops = Array.from({ length: cols }, () => ({
+        y: Math.random() * -rows,
+        speed: 0.2 + Math.random() * 0.5,
+        length: 5 + Math.random() * 10,
+      }));
+      let lastFrame = 0;
+
+      return (r, c, frameCount, cols, rows) => {
+        // Advance drops once per frame (on the first cell of each frame).
+        if (variant === "matrix" && frameCount !== lastFrame) {
+          lastFrame = frameCount;
+          for (let i = 0; i < cols; i++) {
+            drops[i].y += drops[i].speed;
+            if (drops[i].y - drops[i].length > rows) {
+              drops[i].y = Math.random() * -10;
+              drops[i].speed = 0.2 + Math.random() * 0.5;
+            }
+          }
+        }
+
+        let v = 0;
+        if (variant === "matrix") {
+          const drop = drops[c];
+          const dist = drop.y - r;
+          if (dist >= 0 && dist < drop.length) {
+            v = 1 - dist / drop.length;
+            v = v * 0.8 + Math.random() * 0.2;
+          } else {
+            v = Math.random() > 0.98 ? Math.random() * 0.2 : 0;
+          }
+        } else if (variant === "wave") {
+          const phase1 = frameCount * 0.1 + c * 0.2;
+          const phase2 = frameCount * 0.05 + c * 0.1;
+          const y1 = Math.sin(phase1) * 5 + rows / 2;
+          const y2 = Math.cos(phase2) * 5 + rows / 2;
+          const dist1 = Math.abs(r - y1);
+          const dist2 = Math.abs(r - y2);
+          const dist = Math.min(dist1, dist2);
+          v = dist < 4 ? 1 - dist / 4 : 0;
+          v = v * (0.7 + Math.random() * 0.3);
+        } else if (variant === "pulse") {
+          const t = frameCount * 0.05;
+          const x1 = cols / 2 + Math.sin(t) * 10;
+          const y1 = rows / 2 + Math.cos(t * 1.3) * 5;
+          const x2 = cols / 2 + Math.cos(t * 0.8) * 15;
+          const y2 = rows / 2 + Math.sin(t * 1.1) * 8;
+          const d1 = Math.sqrt((c - x1) ** 2 + ((r - y1) * 2) ** 2);
+          const d2 = Math.sqrt((c - x2) ** 2 + ((r - y2) * 2) ** 2);
+          v = Math.max(d1 < 12 ? 1 - d1 / 12 : 0, d2 < 12 ? 1 - d2 / 12 : 0);
+          if (v > 0) v = v * 0.8 + Math.random() * 0.2;
+        } else if (variant === "vortex") {
+          const t = frameCount * 0.04;
+          const cx = cols / 2;
+          const cy = rows / 2;
+          const dx = c - cx;
+          const dy = (r - cy) * 2.2;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          const angle = Math.atan2(dy, dx);
+          // Two counter-rotating spiral arms tightening toward center
+          const spiralPhase = angle - dist * 0.35 + t * 2.5;
+          const arm = Math.max(0, Math.cos(spiralPhase * 2)) ** 2;
+          const falloff = dist < 22 ? (1 - dist / 22) ** 0.6 : 0;
+          v = arm * falloff;
+          // Inner core glow
+          if (dist < 3) v = Math.max(v, 0.6 + Math.random() * 0.4);
+          if (v > 0) v = v * (0.75 + Math.random() * 0.25);
+        }
+        return v;
+      };
+    })(),
+    [variant, active],
+  );
+
+  const { colorClass, duration } = VARIANT_STYLES[variant];
+
+  return (
+    <div className="absolute inset-0 z-0 pointer-events-none overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-700">
+      <style>{`
+        @keyframes braille-gradient-shift {
+          0% { background-position: 0% 50%; }
+          50% { background-position: 100% 50%; }
+          100% { background-position: 0% 50%; }
+        }
+      `}</style>
+      <div className="absolute top-0 left-0 right-0 flex items-start justify-center">
+        <div
+          className={`font-mono text-[16px] leading-[16px] tracking-[0.25em] whitespace-pre pt-4 bg-clip-text text-transparent bg-gradient-to-br ${colorClass}`}
+          style={{
+            backgroundSize: "200% 200%",
+            animation: `braille-gradient-shift ${duration} ease infinite`,
+          }}
+        >
+          {grid.map((row, i) => (
+            <div key={i}>{row.join("")}</div>
+          ))}
+        </div>
+      </div>
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/90 to-background" />
+    </div>
+  );
+}
+
+export function ButtonBrailleBg() {
+  const grid = useBrailleGrid(
+    8,
+    50,
+    true,
+    (r, c, frameCount) => {
+      const x = c * 0.15;
+      const y = r * 0.3;
+      const t = frameCount * 0.06;
+
+      const n1 = Math.sin(x + t);
+      const n2 = Math.cos(y - t * 0.8);
+      const n3 = Math.sin(x * 0.5 + y * 0.5 + t * 1.2);
+
+      const noise = (n1 + n2 + n3) / 3;
+
+      let v = noise * 0.5 + 0.5;
+      v = v > 0.55 ? (v - 0.55) * 2.2 : 0;
+      return v;
+    },
+    [],
+  );
+
+  return (
+    <div
+      className="absolute inset-0 z-0 pointer-events-none overflow-hidden opacity-[0.65] flex items-center justify-center"
+      style={{
+        maskImage:
+          "radial-gradient(ellipse at center, transparent 45%, black 100%)",
+        WebkitMaskImage:
+          "radial-gradient(ellipse at center, transparent 45%, black 100%)",
+      }}
+    >
+      <div className="font-mono text-[8px] leading-[8px] tracking-[0.2em] whitespace-pre text-background">
+        {grid.map((row, i) => (
+          <div key={i}>{row.join("")}</div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/landing/feature-shot.tsx b/components/landing/feature-shot.tsx
new file mode 100644
index 0000000..3e4f727
--- /dev/null
+++ b/components/landing/feature-shot.tsx
@@ -0,0 +1,32 @@
+import Image from "next/image";
+import { BrowserComponent } from "@/components/browser-component";
+
+export function FeatureShot({
+  url,
+  src,
+  alt,
+  priority = false,
+  className,
+}: {
+  url: string;
+  src: string;
+  alt: string;
+  priority?: boolean;
+  className?: string;
+}) {
+  return (
+    <div className={className}>
+      <BrowserComponent url={url} className="h-auto">
+        <Image
+          src={src}
+          alt={alt}
+          height={1080}
+          width={1920}
+          className="w-full h-auto object-contain"
+          priority={priority || undefined}
+          unoptimized={priority || undefined}
+        />
+      </BrowserComponent>
+    </div>
+  );
+}
diff --git a/components/landing/pricing-section.tsx b/components/landing/pricing-section.tsx
new file mode 100644
index 0000000..8ba31c2
--- /dev/null
+++ b/components/landing/pricing-section.tsx
@@ -0,0 +1,284 @@
+"use client";
+
+import { Check } from "lucide-react";
+import { useState } from "react";
+import {
+  ButtonBrailleBg,
+  type BrailleVariant,
+  MiniBrailleBg,
+} from "@/components/landing/braille-bg";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { cn } from "@/lib/utils";
+
+const tiers = [
+  {
+    name: "Self-Hosted",
+    monthlyPrice: null as number | null,
+    yearlyPrice: null as number | null,
+    priceLabel: "Free",
+    description:
+      "For developers who want full control over their own infrastructure.",
+    features: [
+      "Bring Your Own Key (BYOK)",
+      "1 camera stream",
+      "Basic AI threat detection",
+      "Community support",
+      "Standard rate limits",
+    ],
+    buttonText: "Deploy for free",
+    variant: "matrix" as BrailleVariant,
+    popular: false,
+  },
+  {
+    name: "Starter",
+    monthlyPrice: 299,
+    yearlyPrice: 239,
+    priceLabel: null as string | null,
+    description:
+      "For small teams securing physical spaces with intelligent monitoring.",
+    features: [
+      "Up to 3 cameras",
+      "AI threat detection (Gemini 2.5 Pro)",
+      "Semantic event search",
+      "AI chat assistant",
+      "30-day event retention",
+      "Basic analytics dashboard",
+      "Email support",
+    ],
+    buttonText: "Get Started",
+    variant: "wave" as BrailleVariant,
+    popular: false,
+  },
+  {
+    name: "Professional",
+    monthlyPrice: 699,
+    yearlyPrice: 559,
+    priceLabel: null as string | null,
+    description:
+      "For security teams that need the full power of agentic AI surveillance.",
+    features: [
+      "Up to 15 cameras",
+      "Full AI model suite (Claude + Gemini)",
+      "Advanced analytics & custom reports",
+      "Automated incident report generation",
+      "Unlimited event retention",
+      "Real-time alerts & notifications",
+      "Job queue management",
+      "Priority support",
+    ],
+    buttonText: "Get Started",
+    variant: "pulse" as BrailleVariant,
+    popular: true,
+  },
+  {
+    name: "Enterprise",
+    monthlyPrice: null as number | null,
+    yearlyPrice: null as number | null,
+    priceLabel: "Custom",
+    description:
+      "For organizations with mission-critical security and compliance requirements.",
+    features: [
+      "Unlimited cameras",
+      "All Professional features",
+      "Custom AI model configuration",
+      "On-premise deployment",
+      "Dedicated account manager",
+      "Custom SLA guarantees",
+      "White-label options",
+      "Full API access",
+    ],
+    buttonText: "Contact Sales",
+    variant: "vortex" as BrailleVariant,
+    popular: false,
+  },
+];
+
+const billingOptions = [
+  { label: "Monthly", yearly: false },
+  { label: "Yearly", yearly: true },
+] as const;
+
+function SegmentedToggle({
+  isYearly,
+  onChange,
+}: {
+  isYearly: boolean;
+  onChange: (yearly: boolean) => void;
+}) {
+  return (
+    <div className="flex items-center gap-0 border border-border shrink-0">
+      {billingOptions.map((option) => {
+        const active = option.yearly === isYearly;
+        return (
+          <button
+            key={option.label}
+            onClick={() => onChange(option.yearly)}
+            className={cn(
+              "text-xs font-bold uppercase tracking-wider px-5 py-2.5",
+              option.yearly && "flex items-center gap-2",
+              active
+                ? "bg-foreground text-background"
+                : "bg-transparent text-muted-foreground hover:text-foreground",
+            )}
+          >
+            {option.label}
+            {option.yearly && (
+              <span
+                className={cn(
+                  "text-[0.625rem] font-bold px-1.5 py-0.5",
+                  active
+                    ? "bg-background/20 text-background"
+                    : "bg-foreground/10 text-foreground",
+                )}
+              >
+                −20%
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export function PricingSection({ className }: { className?: string }) {
+  const [isYearly, setIsYearly] = useState(false);
+  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
+  const [noticeOpen, setNoticeOpen] = useState(false);
+
+  return (
+    <section
+      id="pricing"
+      className={cn(
+        "w-full bg-background text-foreground border-border relative",
+        className,
+      )}
+    >
+      <div className="max-w-[1500px] mx-auto px-6 sm:px-10 lg:px-12 py-20 lg:py-28 relative z-10">
+        <div className="mb-14 flex flex-col sm:flex-row sm:items-end justify-between gap-8">
+          <div>
+            <h2 className="font-semibold text-5xl sm:text-6xl tracking-tight text-balance max-w-[14ch]">
+              Pricing
+            </h2>
+            <p className="text-muted-foreground text-sm mt-3">
+              Per seat. Cancel anytime.
+            </p>
+          </div>
+
+          <SegmentedToggle isYearly={isYearly} onChange={setIsYearly} />
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-0 border border-border">
+          {tiers.map((tier, idx) => {
+            const isPopular = tier.popular;
+            const price =
+              tier.monthlyPrice !== null
+                ? isYearly
+                  ? tier.yearlyPrice
+                  : tier.monthlyPrice
+                : null;
+
+            return (
+              // biome-ignore lint/a11y/noStaticElementInteractions: hover only drives a decorative background animation
+              <div
+                key={tier.name}
+                onMouseEnter={() => setHoveredIdx(idx)}
+                onMouseLeave={() => setHoveredIdx(null)}
+                className={cn(
+                  "flex flex-col justify-between h-full group relative overflow-hidden transition-all duration-300 bg-background",
+                  idx < tiers.length - 1 && "border-r border-border",
+                )}
+              >
+                <MiniBrailleBg
+                  variant={tier.variant}
+                  active={hoveredIdx === idx}
+                />
+
+                <div className="p-8 lg:p-10 relative z-10 pt-10">
+                  <h3 className="font-semibold text-3xl tracking-tight mb-2 text-foreground">
+                    {tier.name}
+                  </h3>
+
+                  <div className="flex items-baseline gap-1 mb-1 tabular-nums">
+                    <span className="font-bold text-2xl tracking-tight text-foreground">
+                      {price !== null ? `$${price}` : tier.priceLabel}
+                    </span>
+                    {price !== null && (
+                      <span className="text-sm text-muted-foreground">
+                        /seat/mo
+                      </span>
+                    )}
+                  </div>
+
+                  {price !== null && isYearly && (
+                    <p className="text-xs text-muted-foreground mb-1">
+                      billed annually
+                    </p>
+                  )}
+
+                  <p className="text-sm text-muted-foreground text-pretty mt-4 mb-10 min-h-[56px]">
+                    {tier.description}
+                  </p>
+
+                  <ul className="space-y-4" role="list">
+                    {tier.features.map((feature) => (
+                      <li key={feature} className="flex items-start gap-3">
+                        <Check className="size-4 shrink-0 mt-0.5 text-foreground opacity-50" />
+                        <span className="text-sm text-foreground/80">
+                          {feature}
+                        </span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+
+                <div className="p-8 lg:p-10 pt-0 relative z-10">
+                  <button
+                    type="button"
+                    onClick={() => setNoticeOpen(true)}
+                    className={cn(
+                      "relative overflow-hidden w-full px-6 py-4 text-xs font-bold uppercase tracking-wider rounded-none",
+                      isPopular
+                        ? "bg-foreground text-background hover:bg-foreground/90"
+                        : "bg-secondary text-secondary-foreground hover:bg-foreground/10",
+                    )}
+                  >
+                    {isPopular && <ButtonBrailleBg />}
+                    <span className="relative z-10">{tier.buttonText}</span>
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        <p className="text-xs text-muted-foreground mt-6">
+          All paid plans include a 14-day free trial. No credit card required.
+        </p>
+      </div>
+
+      <AlertDialog open={noticeOpen} onOpenChange={setNoticeOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Coming soon</AlertDialogTitle>
+            <AlertDialogDescription>
+              Our general release is still in the works and not quite ready yet.
+              Check back soon.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction>Got it</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </section>
+  );
+}
diff --git a/components/landing/section.tsx b/components/landing/section.tsx
new file mode 100644
index 0000000..4abaa8a
--- /dev/null
+++ b/components/landing/section.tsx
@@ -0,0 +1,28 @@
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+function Section({ className, ...props }: React.ComponentProps<"section">) {
+  return (
+    <section
+      className={cn(
+        "w-full bg-background text-foreground border-t border-border",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SectionInner({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "max-w-[1500px] mx-auto px-6 sm:px-10 lg:px-12 py-20 lg:py-28",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Section, SectionInner };
diff --git a/components/landing/style-manifest.tsx b/components/landing/style-manifest.tsx
new file mode 100644
index 0000000..13ad50d
--- /dev/null
+++ b/components/landing/style-manifest.tsx
@@ -0,0 +1,169 @@
+"use client";
+
+import Image from "next/image";
+import { CtaLink } from "@/components/cta-link";
+import { PricingSection } from "@/components/landing/pricing-section";
+import { Section, SectionInner } from "@/components/landing/section";
+import { WorkflowPipeline } from "@/components/landing/workflow-pipeline";
+import { SiteFooter } from "@/components/site-footer";
+import { cn } from "@/lib/utils";
+
+export type FeatureItem = {
+  title: string;
+  description: string;
+  content: React.ReactNode;
+};
+
+const aiModels = [
+  { code: "OBJDET", name: "Roboflow 3.0 Object Detection" },
+  { code: "AGENT", name: "Letta Stateful Agent" },
+  { code: "SEARCH", name: "Elasticsearch Agent" },
+  { code: "LLM-A", name: "Groq Kimi K2 Instruct" },
+  { code: "LLM-B", name: "Gemini 2.5 Pro" },
+  { code: "LLM-C", name: "Claude 4.5 Haiku" },
+  { code: "LLM-D", name: "Claude 4.5 Sonnet" },
+];
+
+function ModelsSection() {
+  return (
+    <Section id="models" className="scroll-mt-24">
+      <SectionInner>
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-12 mb-14">
+          <div className="lg:col-span-7">
+            <h2 className="font-semibold text-5xl sm:text-6xl lg:text-[64px] tracking-tight text-balance max-w-[14ch]">
+              Technology, catalogued.
+            </h2>
+          </div>
+          <div className="lg:col-span-5 lg:pl-8 lg:border-l border-border flex flex-col justify-end gap-4">
+            <p className="text-base text-muted-foreground text-pretty max-w-[44ch]">
+              Argus is built on a real-time streaming pipeline — Mux ingest,
+              FFmpeg transmuxing, Roboflow detection at the edge, Gemini
+              summaries, indexed in Elasticsearch and served through Supabase
+              Realtime.
+            </p>
+            <p className="text-base text-muted-foreground text-pretty max-w-[44ch]">
+              Each component is a working part of that loop — no vapourware, no
+              stand-ins.
+            </p>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-px bg-border border border-border">
+          {aiModels.map((m) => (
+            <div key={m.code} className="bg-background p-6 flex flex-col gap-2">
+              <span className="text-[10px] uppercase tracking-widest text-muted-foreground">
+                {m.code}
+              </span>
+              <span className="font-semibold text-base sm:text-lg tracking-tight">
+                {m.name}
+              </span>
+            </div>
+          ))}
+        </div>
+      </SectionInner>
+    </Section>
+  );
+}
+
+function CtaSection() {
+  return (
+    <Section>
+      <SectionInner className="py-12 lg:py-16 flex justify-end">
+        <CtaLink href="/watch" className="rounded-none px-6 py-3">
+          Open Argus <span aria-hidden>→</span>
+        </CtaLink>
+      </SectionInner>
+    </Section>
+  );
+}
+
+function FeatureBlock({
+  feature,
+  index,
+  bg,
+  reverse,
+}: {
+  readonly feature: FeatureItem;
+  readonly index: number;
+  readonly bg: string;
+  readonly reverse: boolean;
+}) {
+  return (
+    <SectionInner className="py-0">
+      <div className="grid grid-cols-1 lg:grid-cols-2 border border-border min-h-[520px]">
+        <div
+          className={cn("relative overflow-hidden", reverse && "lg:order-2")}
+        >
+          <Image
+            src={bg}
+            alt=""
+            fill
+            sizes="(min-width: 1024px) 50vw, 100vw"
+            className="object-cover"
+            priority={index === 0}
+          />
+          <div className="absolute inset-0 flex flex-col justify-center p-4 sm:p-6 lg:p-8">
+            <div className="w-full max-w-[640px] self-center">
+              {feature.content}
+            </div>
+          </div>
+        </div>
+
+        <div
+          className={cn(
+            "flex flex-col justify-center p-10 lg:p-16",
+            reverse && "lg:order-1",
+          )}
+        >
+          <p className="text-lg text-muted-foreground max-w-[44ch] text-pretty">
+            {feature.description}
+          </p>
+        </div>
+      </div>
+    </SectionInner>
+  );
+}
+
+function FeaturesAlternating({
+  features,
+}: {
+  readonly features: FeatureItem[];
+}) {
+  const backgrounds = [
+    "/assets/bg1.webp",
+    "/assets/bg2.webp",
+    "/assets/bg3.webp",
+    "/assets/bg4.webp",
+    "/assets/bg5.webp",
+  ];
+
+  return (
+    <div
+      id="features"
+      className="w-full bg-background py-16 lg:py-24 space-y-12 lg:space-y-16 border-t border-border"
+    >
+      {features.map((feature, i) => (
+        <FeatureBlock
+          key={feature.title}
+          feature={feature}
+          index={i}
+          bg={backgrounds[i % backgrounds.length]}
+          reverse={i % 2 === 1}
+        />
+      ))}
+    </div>
+  );
+}
+
+export function LandingSections({ features }: { features: FeatureItem[] }) {
+  return (
+    <>
+      <WorkflowPipeline />
+      <ModelsSection />
+      <FeaturesAlternating features={features} />
+      <CtaSection />
+      <PricingSection />
+      <SiteFooter />
+    </>
+  );
+}
diff --git a/components/landing/workflow-pipeline.tsx b/components/landing/workflow-pipeline.tsx
new file mode 100644
index 0000000..2b050dc
--- /dev/null
+++ b/components/landing/workflow-pipeline.tsx
@@ -0,0 +1,588 @@
+"use client";
+
+import { Collapsible } from "@base-ui/react/collapsible";
+import { Progress } from "@base-ui/react/progress";
+import { Check, Search, Sparkles } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useEffect, useState } from "react";
+import { Section, SectionInner } from "@/components/landing/section";
+import { cn } from "@/lib/utils";
+
+const DETECTIONS = [
+  {
+    label: "Unattended bag",
+    camera: "Terminal B",
+    severity: "critical",
+    confidence: "91%",
+    time: "14:31:12",
+  },
+  {
+    label: "Loitering flagged",
+    camera: "Main lobby",
+    severity: "warning",
+    confidence: "88%",
+    time: "14:31:38",
+  },
+  {
+    label: "Vehicle entering",
+    camera: "North gate",
+    severity: "info",
+    confidence: "94%",
+    time: "14:31:54",
+  },
+];
+
+const SEARCH_RESULTS = [
+  ["Loitering near loading bay", "CAM-02", "94%", "14:28-14:33"],
+  ["Person re-entered frame", "CAM-02", "89%", "14:36-14:37"],
+  ["Group lingering by door", "CAM-04", "81%", "21:12-21:18"],
+];
+
+const TOOL_STEPS = [
+  {
+    label: "Ingesting Stream...",
+    tool: "mux.ingest_stream",
+    output: 'stream: "CAM-02", status: "recording"',
+  },
+  {
+    label: "Detecting Entities...",
+    tool: "roboflow.detect_objects",
+    output: 'entities: ["worker", "pallet_jack"], confidence: 0.91',
+  },
+  {
+    label: "Detection analysis...",
+    tool: "gemini.summarize_scene",
+    output: 'summary: "worker moving loaded pallet through dock"',
+  },
+  {
+    label: "Adding index to ElasticSearch...",
+    tool: "elasticsearch.index_event",
+    output: 'index: "analysis_events", searchable: true',
+  },
+  {
+    label: "Documenting Event...",
+    tool: "reports.create_event_note",
+    output: 'event: "loading dock activity", status: "documented"',
+  },
+];
+
+const fadeUp = {
+  hidden: { opacity: 0, y: 24 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] as const },
+  },
+};
+
+function useReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+
+  useEffect(() => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(query.matches);
+
+    const update = () => setReduced(query.matches);
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, []);
+
+  return reduced;
+}
+
+function useCycle(length: number, intervalMs: number, enabled: boolean) {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const id = window.setInterval(() => {
+      setIndex((previous) => (previous + 1) % length);
+    }, intervalMs);
+    return () => window.clearInterval(id);
+  }, [enabled, intervalMs, length]);
+
+  return index;
+}
+
+function AppShell({
+  children,
+  label,
+}: {
+  children: React.ReactNode;
+  label: string;
+}) {
+  return (
+    <div className="overflow-hidden rounded-xl bg-card shadow-xl shadow-neutral-950/5 dark:bg-neutral-950 dark:shadow-none">
+      <div className="flex items-center justify-between bg-secondary/40 p-3 dark:bg-white/[0.03]">
+        <div className="flex shrink-0 gap-1.5">
+          <span className="size-2 rounded-full bg-red-400" />
+          <span className="size-2 rounded-full bg-amber-400" />
+          <span className="size-2 rounded-full bg-emerald-400" />
+        </div>
+        <div className="min-w-0 rounded-md bg-background/80 px-3 py-1 dark:bg-black/20">
+          <p className="truncate text-[0.6875rem] font-medium text-muted-foreground dark:text-white/60">
+            {label}
+          </p>
+        </div>
+        <div className="size-9" />
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function LiveDot({ tone = "ok" }: { tone?: "ok" | "warn" | "alert" }) {
+  return (
+    <span
+      className={cn(
+        "relative flex size-2 shrink-0 items-center justify-center rounded-full",
+        tone === "ok" && "bg-emerald-500",
+        tone === "warn" && "bg-amber-500",
+        tone === "alert" && "bg-red-500",
+      )}
+    >
+      <span
+        className={cn(
+          "absolute size-full rounded-full animate-ping motion-reduce:hidden",
+          tone === "ok" && "bg-emerald-500",
+          tone === "warn" && "bg-amber-500",
+          tone === "alert" && "bg-red-500",
+        )}
+      />
+    </span>
+  );
+}
+
+function WorkflowCopy({
+  step,
+  eyebrow,
+  title,
+  description,
+  points,
+}: {
+  step: string;
+  eyebrow: string;
+  title: string;
+  description: string;
+  points: string[];
+}) {
+  return (
+    <div className="flex flex-col justify-center gap-8">
+      <div className="flex flex-col gap-4">
+        <p className="text-sm font-medium text-primary">
+          {step} / {eyebrow}
+        </p>
+        <h3 className="max-w-[24ch] text-balance text-4xl font-semibold tracking-tight sm:text-5xl">
+          {title}
+        </h3>
+        <p className="max-w-[48ch] text-lg text-muted-foreground text-pretty sm:text-base">
+          {description}
+        </p>
+      </div>
+      <ul className="grid gap-3">
+        {points.map((point) => (
+          <li key={point} className="flex items-start gap-3">
+            <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-primary/10 dark:bg-primary/15">
+              <Check className="size-4 shrink-0 stroke-primary" aria-hidden />
+            </span>
+            <p className="text-base text-foreground/80 sm:text-sm">{point}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+type ToolStepState = "complete" | "loading" | "queued";
+
+function StepProgress({ state }: { state: ToolStepState }) {
+  const value = state === "complete" ? 100 : state === "loading" ? null : 0;
+
+  return (
+    <Progress.Root
+      value={value}
+      aria-valuetext={
+        state === "loading"
+          ? "Running"
+          : state === "complete"
+            ? "Complete"
+            : "Queued"
+      }
+      className={cn(
+        "flex size-8 shrink-0 items-center justify-center rounded-lg",
+        state === "complete" && "bg-emerald-500/10 dark:bg-emerald-400/10",
+        state === "loading" && "bg-primary/10 dark:bg-primary/15",
+        state === "queued" && "bg-secondary/60 dark:bg-white/[0.04]",
+      )}
+    >
+      <Progress.Track className="relative flex size-4 items-center justify-center rounded-full">
+        {state === "complete" ? (
+          <Check
+            className="size-4 shrink-0 stroke-emerald-600 dark:stroke-emerald-400"
+            aria-hidden
+          />
+        ) : null}
+        {state === "loading" ? (
+          <Progress.Indicator className="absolute inset-0 rounded-full border-2 border-primary/20 border-t-primary animate-spin" />
+        ) : null}
+        {state === "queued" ? (
+          <span className="size-1.5 rounded-full bg-muted-foreground/40 dark:bg-white/30" />
+        ) : null}
+      </Progress.Track>
+    </Progress.Root>
+  );
+}
+
+function ToolCallStep({
+  item,
+  state,
+}: {
+  item: (typeof TOOL_STEPS)[number];
+  state: ToolStepState;
+}) {
+  const open = state === "loading";
+
+  return (
+    <Collapsible.Root open={open} className="grid gap-2">
+      <Collapsible.Trigger
+        disabled
+        className="flex cursor-default items-start gap-3 rounded-lg bg-card/90 p-4 text-left dark:bg-white/[0.04]"
+      >
+        <StepProgress state={state} />
+        <div className="min-w-0 flex-1">
+          <p
+            className={cn(
+              "truncate text-base font-medium text-foreground sm:text-sm dark:text-white",
+              state === "queued" && "text-muted-foreground dark:text-white/40",
+            )}
+          >
+            {item.label}
+          </p>
+          <p className="truncate text-[0.6875rem] text-muted-foreground dark:text-white/45">
+            {item.tool}
+          </p>
+        </div>
+      </Collapsible.Trigger>
+      <Collapsible.Panel>
+        <AnimatePresence mode="wait">
+          {open ? (
+            <motion.pre
+              key={item.tool}
+              initial={{ opacity: 0, y: 8 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -8 }}
+              className="overflow-hidden rounded-lg bg-secondary/70 p-3 text-[0.75rem] text-muted-foreground dark:bg-black/30 dark:text-white/65"
+            >
+              {item.output}
+            </motion.pre>
+          ) : null}
+        </AnimatePresence>
+      </Collapsible.Panel>
+    </Collapsible.Root>
+  );
+}
+
+function ToolCallCard({
+  name,
+  status = "completed",
+  children,
+}: {
+  name: string;
+  status?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="overflow-hidden rounded-lg bg-card/90 dark:bg-white/[0.04]">
+      <div className="flex items-center justify-between gap-4 bg-secondary/35 p-3 dark:bg-black/20">
+        <p className="truncate text-base font-medium sm:text-sm dark:text-white">
+          {name}
+        </p>
+        <div className="flex shrink-0 items-center gap-2">
+          <LiveDot />
+          <p className="text-[0.6875rem] font-medium text-muted-foreground dark:text-white/50">
+            {status}
+          </p>
+        </div>
+      </div>
+      <div className="p-4">{children}</div>
+    </div>
+  );
+}
+
+function IngestCard({ active }: { active: number }) {
+  return (
+    <AppShell label="argus.io/pipeline/live">
+      <div className="p-5 sm:p-6">
+        <div className="rounded-xl bg-secondary/45 p-5 sm:p-6 dark:bg-white/[0.04]">
+          <div className="mb-6 flex items-center justify-between gap-4">
+            <p className="text-base font-medium sm:text-sm dark:text-white">
+              Agent run
+            </p>
+            <p className="text-[0.6875rem] font-medium text-muted-foreground dark:text-white/45">
+              video pipeline
+            </p>
+          </div>
+
+          <ol className="grid gap-3">
+            {TOOL_STEPS.map((item, index) => {
+              const state: ToolStepState =
+                index < active
+                  ? "complete"
+                  : index === active
+                    ? "loading"
+                    : "queued";
+
+              return (
+                <li key={item.tool} className="grid gap-2">
+                  <ToolCallStep item={item} state={state} />
+                </li>
+              );
+            })}
+          </ol>
+        </div>
+      </div>
+    </AppShell>
+  );
+}
+
+function DetectionCard({ active }: { active: number }) {
+  const selected = DETECTIONS[active];
+
+  return (
+    <AppShell label="argus.io/events/triage">
+      <div className="p-5 sm:p-6">
+        <ToolCallCard name="roboflow.detect_objects">
+          <pre className="overflow-hidden text-[0.75rem] text-muted-foreground">
+            {`{
+  object: "${selected.label}",
+  camera: "${selected.camera}",
+  confidence: "${selected.confidence}",
+  severity: "${selected.severity}"
+}`}
+          </pre>
+        </ToolCallCard>
+      </div>
+    </AppShell>
+  );
+}
+
+function SearchCard({ active }: { active: number }) {
+  const [label, camera, score, range] = SEARCH_RESULTS[active];
+
+  return (
+    <AppShell label="argus.io/search/evidence">
+      <div className="grid gap-5 p-5 sm:p-6">
+        <div className="grid gap-4 rounded-xl bg-secondary/45 p-4 dark:bg-white/[0.04]">
+          <div className="flex items-center gap-3">
+            <Search
+              className="size-4 h-lh shrink-0 stroke-muted-foreground"
+              aria-hidden
+            />
+            <p className="min-w-0 flex-1 truncate text-base font-medium sm:text-sm">
+              people loitering near the loading bay after 9pm
+            </p>
+            <Sparkles
+              className="size-4 h-lh shrink-0 stroke-primary"
+              aria-hidden
+            />
+          </div>
+          <div className="relative h-16 overflow-hidden rounded-lg bg-background/80 dark:bg-black/20">
+            <motion.div
+              animate={{ x: ["-8%", "86%"] }}
+              transition={{ duration: 4.4, repeat: Number.POSITIVE_INFINITY }}
+              className="absolute inset-y-0 w-1 rounded-full bg-primary"
+            />
+            <div className="grid h-full grid-cols-12 gap-px">
+              {Array.from({ length: 12 }).map((_, index) => (
+                <div
+                  // biome-ignore lint/suspicious/noArrayIndexKey: static timeline divisions
+                  key={index}
+                  className={cn(
+                    "bg-border/40",
+                    [2, 5, 9].includes(index) && "bg-primary/20",
+                  )}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <ToolCallCard name="elasticsearch.semantic_search">
+          <div className="flex items-start justify-between gap-4">
+            <div className="min-w-0">
+              <p className="text-base font-medium text-pretty sm:text-sm">
+                {label}
+              </p>
+              <p className="mt-1 truncate text-base text-muted-foreground sm:text-sm">
+                {camera} / {range}
+              </p>
+            </div>
+            <p className="shrink-0 text-base font-medium tabular-nums sm:text-sm">
+              {score}
+            </p>
+          </div>
+        </ToolCallCard>
+      </div>
+    </AppShell>
+  );
+}
+
+function AssistantCard({ active }: { active: number }) {
+  const actions = [
+    ["Flagged event", "Warning severity applied"],
+    ["Opened clip", "CAM-05 at 14:31:54"],
+    ["Drafted report", "Ready for supervisor review"],
+  ];
+
+  return (
+    <AppShell label="argus.io/copilot/incident">
+      <div className="grid gap-5 p-5 sm:p-6 lg:grid-cols-[5fr_7fr]">
+        <ToolCallCard name="assistant.answer">
+          <div className="grid gap-3">
+            <p className="text-base text-muted-foreground sm:text-sm">
+              What happened at the north gate?
+            </p>
+            <p className="text-xl font-medium tracking-tight">
+              Three events, one warning, and one linked clip are ready.
+            </p>
+          </div>
+        </ToolCallCard>
+
+        <ToolCallCard name="reports.create_incident_brief">
+          <pre className="overflow-hidden text-[0.75rem] text-muted-foreground">
+            {`{
+  summary: "Vehicle idled for five minutes",
+  evidence: "3 clips / 2 cameras",
+  status: "${actions[active][0]}"
+}`}
+          </pre>
+        </ToolCallCard>
+      </div>
+    </AppShell>
+  );
+}
+
+function WorkflowStory({
+  reverse = false,
+  copy,
+  children,
+}: {
+  reverse?: boolean;
+  copy: React.ComponentProps<typeof WorkflowCopy>;
+  children: React.ReactNode;
+}) {
+  return (
+    <motion.div
+      variants={fadeUp}
+      initial="hidden"
+      whileInView="show"
+      viewport={{ once: true, amount: 0.22 }}
+      className="grid gap-10 py-16 first:pt-0 last:pb-0 lg:grid-cols-2 lg:items-center lg:gap-12 lg:py-24"
+    >
+      <div className={cn(reverse && "lg:order-2")}>
+        <WorkflowCopy {...copy} />
+      </div>
+      <div className={cn(reverse && "lg:order-1")}>{children}</div>
+    </motion.div>
+  );
+}
+
+export function WorkflowPipeline() {
+  const reduced = useReducedMotion();
+  const pipelineStep = useCycle(TOOL_STEPS.length, 6500, !reduced);
+  const detectionStep = useCycle(DETECTIONS.length, 7000, !reduced);
+  const searchStep = useCycle(SEARCH_RESULTS.length, 7200, !reduced);
+  const assistantStep = useCycle(3, 7600, !reduced);
+
+  return (
+    <Section id="workflow" className="scroll-mt-24 overflow-hidden">
+      <SectionInner>
+        <div className="mb-16 grid grid-cols-1 gap-10 lg:grid-cols-12 lg:gap-12">
+          <div className="lg:col-span-7">
+            <p className="text-sm font-medium text-primary">Product workflow</p>
+            <h2 className="mt-4 max-w-[20ch] text-balance text-5xl font-semibold tracking-tight sm:text-6xl lg:text-7xl">
+              From raw video to review-ready intelligence.
+            </h2>
+          </div>
+          <div className="flex flex-col justify-end gap-4 border-border lg:col-span-5 lg:border-l lg:pl-8">
+            <p className="max-w-[48ch] text-lg text-muted-foreground text-pretty sm:text-base">
+              Argus works like a product workflow, not a wall of camera feeds.
+              Each stream becomes structured events, searchable evidence, and
+              assistant-ready context.
+            </p>
+          </div>
+        </div>
+
+        <WorkflowStory
+          copy={{
+            step: "01",
+            eyebrow: "Ingest",
+            title: "Every stream enters the same clean processing path.",
+            description:
+              "Live feeds move through ingest, detection, analysis, indexing, and realtime surfacing without asking an operator to manage the pipeline.",
+            points: [
+              "RTMP ingest through Mux.",
+              "Frame-level detection with Roboflow.",
+              "Gemini summaries indexed for search.",
+            ],
+          }}
+        >
+          <IngestCard active={pipelineStep} />
+        </WorkflowStory>
+
+        <WorkflowStory
+          reverse
+          copy={{
+            step: "02",
+            eyebrow: "Detect",
+            title: "Events arrive as prioritized work, not visual noise.",
+            description:
+              "Argus pulls the important moments forward with confidence, severity, camera, and location already attached.",
+            points: [
+              "Critical events stand apart from routine detections.",
+              "Operators can triage without opening every clip.",
+              "Realtime updates keep the queue current.",
+            ],
+          }}
+        >
+          <DetectionCard active={detectionStep} />
+        </WorkflowStory>
+
+        <WorkflowStory
+          copy={{
+            step: "03",
+            eyebrow: "Search",
+            title: "Find the moment by describing what happened.",
+            description:
+              "Semantic search turns months of footage into a queryable evidence layer across cameras, summaries, labels, and reports.",
+            points: [
+              "Plain-language queries over indexed events.",
+              "Ranked clip matches with confidence scores.",
+              "Searches across camera context and generated reports.",
+            ],
+          }}
+        >
+          <SearchCard active={searchStep} />
+        </WorkflowStory>
+
+        <WorkflowStory
+          reverse
+          copy={{
+            step: "04",
+            eyebrow: "Assistant",
+            title: "Ask for the answer, then move straight to action.",
+            description:
+              "The assistant explains what happened, opens the right clip, flags the incident, and drafts the report from the same evidence trail.",
+            points: [
+              "Answers grounded in camera events.",
+              "One flow for investigation and handoff.",
+              "Reports generated from the verified incident trail.",
+            ],
+          }}
+        >
+          <AssistantCard active={assistantStep} />
+        </WorkflowStory>
+      </SectionInner>
+    </Section>
+  );
+}
diff --git a/components/landing/workflows.tsx b/components/landing/workflows.tsx
new file mode 100644
index 0000000..e5ae4c6
--- /dev/null
+++ b/components/landing/workflows.tsx
@@ -0,0 +1,683 @@
+"use client";
+
+import {
+  Activity,
+  ArrowUpRight,
+  Check,
+  Database,
+  type LucideIcon,
+  Radio,
+  ScanEye,
+  Search,
+  Send,
+  Sparkles,
+  User,
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Section, SectionInner } from "@/components/landing/section";
+import { cn } from "@/lib/utils";
+
+/* ───────────────────────── shared data ───────────────────────── */
+
+type Stage = { code: string; label: string; vendor: string; icon: LucideIcon };
+
+const STAGES: Stage[] = [
+  { code: "01", label: "Ingest", vendor: "Mux · RTMP", icon: Radio },
+  { code: "02", label: "Detect", vendor: "Roboflow", icon: ScanEye },
+  { code: "03", label: "Analyze", vendor: "Gemini", icon: Sparkles },
+  { code: "04", label: "Index", vendor: "Elasticsearch", icon: Database },
+  { code: "05", label: "Surface", vendor: "Realtime", icon: Activity },
+];
+
+type Severity = "info" | "warn" | "alert";
+
+type EventDef = {
+  type: string;
+  cam: string;
+  time: string;
+  conf: number;
+  sev: Severity;
+};
+
+const EVENTS: EventDef[] = [
+  { type: "Person detected", cam: "CAM-02 · Loading Bay", time: "14:32:07", conf: 97, sev: "info" },
+  { type: "Vehicle entering", cam: "CAM-05 · North Gate", time: "14:31:54", conf: 94, sev: "info" },
+  { type: "Loitering flagged", cam: "CAM-01 · Main Lobby", time: "14:31:38", conf: 88, sev: "warn" },
+  { type: "Unattended bag", cam: "CAM-07 · Terminal B", time: "14:31:12", conf: 91, sev: "alert" },
+  { type: "Crowd forming", cam: "CAM-03 · West Plaza", time: "14:30:45", conf: 86, sev: "warn" },
+  { type: "Tailgating detected", cam: "CAM-09 · Side Entry", time: "14:30:21", conf: 90, sev: "warn" },
+];
+
+const SEVERITY_STYLES: Record<Severity, string> = {
+  info: "text-muted-foreground border-border",
+  warn: "text-amber-600 dark:text-amber-400 border-amber-500/30 bg-amber-500/10",
+  alert: "text-destructive border-destructive/30 bg-destructive/10",
+};
+
+type Query = {
+  text: string;
+  results: { label: string; cam: string; score: number }[];
+};
+
+const QUERIES: Query[] = [
+  {
+    text: "people loitering near the loading bay after 9pm",
+    results: [
+      { label: "Loitering · 4 min dwell", cam: "CAM-02 · Loading Bay", score: 0.94 },
+      { label: "Person re-entered frame", cam: "CAM-02 · Loading Bay", score: 0.89 },
+      { label: "Group lingering by door", cam: "CAM-04 · Dock 3", score: 0.81 },
+    ],
+  },
+  {
+    text: "unattended bags in the terminal today",
+    results: [
+      { label: "Unattended bag · 2 min", cam: "CAM-07 · Terminal B", score: 0.96 },
+      { label: "Object left on bench", cam: "CAM-08 · Gate 12", score: 0.84 },
+    ],
+  },
+  {
+    text: "vehicles idling at the north gate this hour",
+    results: [
+      { label: "Truck idling > 5 min", cam: "CAM-05 · North Gate", score: 0.92 },
+      { label: "Vehicle entering", cam: "CAM-05 · North Gate", score: 0.88 },
+      { label: "Vehicle exiting", cam: "CAM-06 · North Gate", score: 0.8 },
+    ],
+  },
+];
+
+type ChatMessage = { role: "user" | "assistant"; text: string; chips?: string[] };
+
+const CHAT: ChatMessage[] = [
+  { role: "user", text: "What happened at the north gate in the last hour?" },
+  {
+    role: "assistant",
+    text: "Three events. A vehicle entered at 14:31, a truck idled for over five minutes, then a vehicle exited.",
+    chips: ["Vehicle entering", "Truck idling", "Vehicle exiting"],
+  },
+  { role: "user", text: "Flag the idling truck and open the clip." },
+  {
+    role: "assistant",
+    text: "Flagged as a warning and pinned to your review queue. Opening CAM-05 at 14:31:54.",
+    chips: ["CAM-05 · 14:31:54"],
+  },
+];
+
+/* ───────────────────────── helpers ───────────────────────── */
+
+function useReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(mq.matches);
+    const onChange = () => setReduced(mq.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+
+function useCycle(length: number, intervalMs: number, enabled: boolean) {
+  const [index, setIndex] = useState(0);
+  useEffect(() => {
+    if (!enabled) return;
+    const id = setInterval(
+      () => setIndex((p) => (p + 1) % length),
+      intervalMs,
+    );
+    return () => clearInterval(id);
+  }, [length, intervalMs, enabled]);
+  return index;
+}
+
+function LiveDot({ color = "var(--linear-success)" }: { color?: string }) {
+  return (
+    <span className="relative flex size-2 items-center justify-center">
+      <span
+        className="absolute inline-flex size-full rounded-full animate-ping motion-reduce:hidden"
+        style={{ backgroundColor: color }}
+      />
+      <span
+        className="relative size-2 rounded-full"
+        style={{ backgroundColor: color }}
+      />
+    </span>
+  );
+}
+
+/* ───────────────────────── workflow 1 · pipeline ───────────────────────── */
+
+function PipelineFlow({ reduced }: { reduced: boolean }) {
+  const active = useCycle(STAGES.length, 1100, !reduced);
+  const fillPct = ((active + 1) / STAGES.length) * 100;
+  const dotPct = ((active + 0.5) / STAGES.length) * 100;
+
+  return (
+    <div className="p-6 lg:p-8">
+      <div className="relative mx-1 mb-5 hidden h-px bg-border lg:block">
+        {!reduced && (
+          <>
+            <span
+              className="absolute inset-y-0 left-0 bg-primary transition-all duration-700 ease-out"
+              style={{ width: `${fillPct}%` }}
+            />
+            <span
+              className="absolute top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary ring-4 ring-background transition-all duration-700 ease-out"
+              style={{ left: `${dotPct}%` }}
+            />
+          </>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 gap-px border border-border bg-border sm:grid-cols-2 lg:grid-cols-5">
+        {STAGES.map((stage, i) => {
+          const isActive = !reduced && i === active;
+          const Icon = stage.icon;
+          return (
+            <div
+              key={stage.code}
+              className={cn(
+                "relative flex flex-col gap-3 bg-background p-4 transition-colors lg:p-5",
+                isActive && "bg-secondary/40",
+              )}
+            >
+              {isActive && (
+                <span className="absolute inset-x-0 top-0 h-0.5 bg-primary" />
+              )}
+              <div className="flex items-center justify-between">
+                <Icon
+                  className={cn(
+                    "size-5 transition-colors",
+                    isActive ? "text-primary" : "text-muted-foreground",
+                  )}
+                  aria-hidden
+                />
+                <span className="text-[10px] uppercase tracking-widest text-muted-foreground tabular-nums">
+                  {stage.code}
+                </span>
+              </div>
+              <div>
+                <div className="font-medium text-sm tracking-tight">
+                  {stage.label}
+                </div>
+                <div className="mt-1 truncate text-[10px] uppercase tracking-widest text-muted-foreground">
+                  {stage.vendor}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/* ───────────────────────── workflow 2 · live feed ───────────────────────── */
+
+type FeedItem = { id: number; event: number };
+
+const SEED_FEED: FeedItem[] = [
+  { id: 4, event: 4 },
+  { id: 3, event: 3 },
+  { id: 2, event: 2 },
+  { id: 1, event: 1 },
+  { id: 0, event: 0 },
+];
+
+function EventFeed({ reduced }: { reduced: boolean }) {
+  const [feed, setFeed] = useState<FeedItem[]>(SEED_FEED);
+  const idRef = useRef(SEED_FEED.length);
+  const eventRef = useRef(SEED_FEED.length - 1);
+
+  useEffect(() => {
+    if (reduced) return;
+    const id = setInterval(() => {
+      eventRef.current = (eventRef.current + 1) % EVENTS.length;
+      const next: FeedItem = { id: idRef.current, event: eventRef.current };
+      idRef.current += 1;
+      setFeed((prev) => [next, ...prev].slice(0, 5));
+    }, 2300);
+    return () => clearInterval(id);
+  }, [reduced]);
+
+  const newestId = feed[0]?.id ?? -1;
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex items-center justify-between border-b border-border px-5 py-3.5">
+        <div className="flex items-center gap-2">
+          <LiveDot />
+          <span className="font-medium text-sm">Live detections</span>
+        </div>
+        <span className="text-[10px] uppercase tracking-widest text-muted-foreground tabular-nums">
+          {feed.length} events
+        </span>
+      </div>
+      <ul className="divide-y divide-border">
+        {feed.map((item) => {
+          const e = EVENTS[item.event];
+          return (
+            <li
+              key={item.id}
+              className={cn(
+                "flex items-center gap-4 px-5 py-3.5",
+                item.id === newestId &&
+                  "animate-feed-in motion-reduce:animate-none",
+              )}
+            >
+              <div className="flex size-11 shrink-0 items-center justify-center border border-border bg-secondary/40">
+                <ScanEye className="size-4 text-muted-foreground" aria-hidden />
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="truncate font-medium text-sm">{e.type}</span>
+                  <span
+                    className={cn(
+                      "shrink-0 border px-1.5 py-0.5 text-[10px] uppercase tracking-wider",
+                      SEVERITY_STYLES[e.sev],
+                    )}
+                  >
+                    {e.sev}
+                  </span>
+                </div>
+                <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                  {e.cam} · {e.time}
+                </p>
+              </div>
+              <div className="hidden w-24 shrink-0 flex-col items-end gap-1.5 sm:flex">
+                <span className="text-xs text-muted-foreground tabular-nums">
+                  {e.conf}%
+                </span>
+                <span className="h-1 w-full overflow-hidden bg-secondary">
+                  <span
+                    className="block h-full bg-foreground/40"
+                    style={{ width: `${e.conf}%` }}
+                  />
+                </span>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+/* ───────────────────────── workflow 3 · semantic search ───────────────────────── */
+
+function SemanticSearch({ reduced }: { reduced: boolean }) {
+  const [qIndex, setQIndex] = useState(0);
+  const [typed, setTyped] = useState(0);
+  const [showResults, setShowResults] = useState(false);
+
+  useEffect(() => {
+    if (reduced) {
+      setTyped(QUERIES[0].text.length);
+      setShowResults(true);
+      return;
+    }
+    let cancelled = false;
+    const timers: number[] = [];
+    const wait = (ms: number) =>
+      new Promise<void>((resolve) => {
+        timers.push(window.setTimeout(resolve, ms));
+      });
+
+    void (async () => {
+      let qi = 0;
+      while (!cancelled) {
+        setQIndex(qi);
+        setShowResults(false);
+        setTyped(0);
+        const text = QUERIES[qi].text;
+        for (let c = 1; c <= text.length; c++) {
+          if (cancelled) return;
+          setTyped(c);
+          await wait(42);
+        }
+        await wait(450);
+        if (cancelled) return;
+        setShowResults(true);
+        await wait(2800);
+        qi = (qi + 1) % QUERIES.length;
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      timers.forEach((t) => clearTimeout(t));
+    };
+  }, [reduced]);
+
+  const query = QUERIES[qIndex];
+  const typedText = query.text.slice(0, typed);
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="border-b border-border p-5">
+        <div className="flex items-center gap-3 border border-border bg-secondary/30 px-4 py-3">
+          <Search className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+          <span className="truncate text-sm text-foreground">
+            {typedText}
+            {!reduced && (
+              <span className="ml-0.5 inline-block h-4 w-px translate-y-0.5 bg-foreground animate-pulse motion-reduce:hidden" />
+            )}
+          </span>
+        </div>
+      </div>
+      <div className="flex-1 p-5">
+        <div className="mb-3 flex items-center justify-between">
+          <span className="text-[10px] uppercase tracking-widest text-muted-foreground">
+            {showResults ? `${query.results.length} matches` : "Searching…"}
+          </span>
+          <span className="text-[10px] uppercase tracking-widest text-muted-foreground">
+            Elasticsearch agent
+          </span>
+        </div>
+        <div className="grid grid-cols-1 gap-px border border-border bg-border sm:grid-cols-2 lg:grid-cols-3">
+          {showResults
+            ? query.results.map((r, i) => (
+                <div
+                  key={r.label}
+                  className="flex animate-feed-in flex-col gap-2 bg-background p-4 motion-reduce:animate-none"
+                  style={{ animationDelay: `${i * 70}ms` }}
+                >
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="text-[10px] uppercase tracking-widest text-muted-foreground tabular-nums">
+                      {(r.score * 100).toFixed(0)}% match
+                    </span>
+                    <ArrowUpRight
+                      className="size-3.5 text-muted-foreground"
+                      aria-hidden
+                    />
+                  </div>
+                  <span className="text-pretty font-medium text-sm tracking-tight">
+                    {r.label}
+                  </span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {r.cam}
+                  </span>
+                </div>
+              ))
+            : Array.from({ length: 3 }).map((_, i) => (
+                <div
+                  // biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
+                  key={i}
+                  className="flex flex-col gap-2.5 bg-background p-4"
+                >
+                  <div className="h-3 w-16 bg-secondary" />
+                  <div className="h-4 w-3/4 bg-secondary" />
+                  <div className="h-3 w-1/2 bg-secondary" />
+                </div>
+              ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ───────────────────────── workflow 4 · assistant ───────────────────────── */
+
+function ChatBubble({ message }: { message: ChatMessage }) {
+  const isUser = message.role === "user";
+  return (
+    <div
+      className={cn(
+        "flex animate-feed-in gap-3 motion-reduce:animate-none",
+        isUser && "flex-row-reverse",
+      )}
+    >
+      <div
+        className={cn(
+          "flex size-7 shrink-0 items-center justify-center border border-border",
+          isUser ? "bg-secondary" : "bg-primary/10",
+        )}
+      >
+        {isUser ? (
+          <User className="size-3.5 text-muted-foreground" aria-hidden />
+        ) : (
+          <Sparkles className="size-3.5 text-primary" aria-hidden />
+        )}
+      </div>
+      <div className={cn("flex max-w-[78%] flex-col gap-2", isUser && "items-end")}>
+        <div
+          className={cn(
+            "text-pretty border px-3.5 py-2.5 text-sm",
+            isUser
+              ? "border-foreground bg-foreground text-background"
+              : "border-border bg-background",
+          )}
+        >
+          {message.text}
+        </div>
+        {message.chips && (
+          <div className={cn("flex flex-wrap gap-1.5", isUser && "justify-end")}>
+            {message.chips.map((chip) => (
+              <span
+                key={chip}
+                className="border border-border px-1.5 py-0.5 text-[10px] uppercase tracking-wider text-muted-foreground"
+              >
+                {chip}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function TypingBubble() {
+  return (
+    <div className="flex animate-feed-in gap-3">
+      <div className="flex size-7 shrink-0 items-center justify-center border border-border bg-primary/10">
+        <Sparkles className="size-3.5 text-primary" aria-hidden />
+      </div>
+      <div className="flex items-center gap-1 border border-border bg-background px-3.5 py-3">
+        <span className="size-1.5 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.3s]" />
+        <span className="size-1.5 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:-0.15s]" />
+        <span className="size-1.5 animate-bounce rounded-full bg-muted-foreground/60" />
+      </div>
+    </div>
+  );
+}
+
+function AssistantChat({ reduced }: { reduced: boolean }) {
+  const [shown, setShown] = useState(reduced ? CHAT.length : 0);
+  const [typing, setTyping] = useState(false);
+
+  useEffect(() => {
+    if (reduced) return;
+    let cancelled = false;
+    const timers: number[] = [];
+    const wait = (ms: number) =>
+      new Promise<void>((resolve) => {
+        timers.push(window.setTimeout(resolve, ms));
+      });
+
+    void (async () => {
+      while (!cancelled) {
+        setShown(0);
+        setTyping(false);
+        await wait(700);
+        for (let i = 0; i < CHAT.length; i++) {
+          if (cancelled) return;
+          if (CHAT[i].role === "assistant") {
+            setTyping(true);
+            await wait(1100);
+            if (cancelled) return;
+            setTyping(false);
+          } else {
+            await wait(500);
+          }
+          if (cancelled) return;
+          setShown(i + 1);
+          await wait(CHAT[i].role === "assistant" ? 1500 : 900);
+        }
+        await wait(3000);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      timers.forEach((t) => clearTimeout(t));
+    };
+  }, [reduced]);
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex items-center justify-between border-b border-border px-5 py-3.5">
+        <div className="flex items-center gap-2">
+          <Sparkles className="size-4 text-primary" aria-hidden />
+          <span className="font-medium text-sm">AI assistant</span>
+        </div>
+        <span className="text-[10px] uppercase tracking-widest text-muted-foreground">
+          Claude · Gemini
+        </span>
+      </div>
+      <div className="flex min-h-[300px] flex-1 flex-col justify-end gap-3 p-5">
+        {CHAT.slice(0, shown).map((message, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: fixed scripted transcript
+          <ChatBubble key={i} message={message} />
+        ))}
+        {typing && <TypingBubble />}
+      </div>
+      <div className="border-t border-border p-3">
+        <div className="flex items-center gap-2 border border-border bg-secondary/30 px-3 py-2">
+          <span className="flex-1 truncate text-sm text-muted-foreground">
+            Ask anything…
+          </span>
+          <span className="flex size-7 items-center justify-center bg-foreground text-background">
+            <Send className="size-3.5" aria-hidden />
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ───────────────────────── row layout ───────────────────────── */
+
+function WorkflowRow({
+  eyebrow,
+  title,
+  description,
+  points,
+  children,
+}: {
+  eyebrow: string;
+  title: string;
+  description: string;
+  points: string[];
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="grid grid-cols-1 border border-border lg:grid-cols-12">
+      <div className="flex flex-col justify-center gap-6 p-8 lg:col-span-4 lg:border-r border-border lg:p-10">
+        <div className="flex flex-col gap-3">
+          <span className="text-[10px] uppercase tracking-widest text-muted-foreground">
+            {eyebrow}
+          </span>
+          <h3 className="max-w-[18ch] text-balance font-medium text-2xl sm:text-3xl tracking-tight">
+            {title}
+          </h3>
+          <p className="max-w-[44ch] text-pretty text-sm text-muted-foreground">
+            {description}
+          </p>
+        </div>
+        <ul className="flex flex-col gap-2.5">
+          {points.map((point) => (
+            <li key={point} className="flex items-center gap-2.5">
+              <Check className="size-3.5 shrink-0 text-foreground opacity-50" />
+              <span className="text-sm text-foreground/80">{point}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className="relative lg:col-span-8">{children}</div>
+    </div>
+  );
+}
+
+/* ───────────────────────── section ───────────────────────── */
+
+export function Workflows() {
+  const reduced = useReducedMotion();
+
+  return (
+    <Section id="workflow" className="scroll-mt-24">
+      <SectionInner>
+        <div className="mb-14 grid grid-cols-1 gap-10 lg:grid-cols-12 lg:gap-12">
+          <div className="lg:col-span-7">
+            <span className="text-[10px] uppercase tracking-widest text-muted-foreground">
+              How it works
+            </span>
+            <h2 className="mt-4 max-w-[14ch] text-balance font-semibold text-5xl sm:text-6xl lg:text-[64px] tracking-tight">
+              The system, in motion.
+            </h2>
+          </div>
+          <div className="flex flex-col justify-end gap-4 border-border lg:col-span-5 lg:border-l lg:pl-8">
+            <p className="max-w-[44ch] text-pretty text-base text-muted-foreground">
+              Four live workflows — the ingest pipeline, the detection feed,
+              semantic search, and the AI assistant — running the same loop
+              you&apos;d see in production.
+            </p>
+          </div>
+        </div>
+
+        <div className="space-y-6 lg:space-y-8">
+          <WorkflowRow
+            eyebrow="Ingest pipeline"
+            title="From stream to event"
+            description="Every frame runs the same path — ingested, detected, analyzed, indexed, and surfaced in near real time."
+            points={[
+              "RTMP ingest via Mux",
+              "Edge detection with Roboflow",
+              "Summarized by Gemini",
+            ]}
+          >
+            <PipelineFlow reduced={reduced} />
+          </WorkflowRow>
+
+          <WorkflowRow
+            eyebrow="Live detections"
+            title="Events as they happen"
+            description="Detections stream into a single feed the moment they're flagged, ranked by confidence and triaged by severity."
+            points={[
+              "Confidence scoring",
+              "Severity triage",
+              "Realtime via Supabase",
+            ]}
+          >
+            <EventFeed reduced={reduced} />
+          </WorkflowRow>
+
+          <WorkflowRow
+            eyebrow="Semantic search"
+            title="Ask in plain language"
+            description="Search months of footage by describing what you're looking for — the Elasticsearch agent does the rest."
+            points={[
+              "Natural-language queries",
+              "Months of footage",
+              "Ranked, scored results",
+            ]}
+          >
+            <SemanticSearch reduced={reduced} />
+          </WorkflowRow>
+
+          <WorkflowRow
+            eyebrow="AI assistant"
+            title="Answers, not footage"
+            description="Ask questions, flag events, and generate reports in one conversation with your entire camera network."
+            points={[
+              "Cross-camera context",
+              "One-click flagging",
+              "Report generation",
+            ]}
+          >
+            <AssistantChat reduced={reduced} />
+          </WorkflowRow>
+        </div>
+      </SectionInner>
+    </Section>
+  );
+}
diff --git a/components/models-section.tsx b/components/models-section.tsx
deleted file mode 100644
index 85ccd91..0000000
--- a/components/models-section.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-"use client";
-
-import TextHighlighter from "@/components/fancy/text/text-highlighter";
-import ScrambleHover from "@/components/fancy/text/scramble-hover";
-import { Badge } from "@/components/ui/badge";
-
-const aiModels = [
-  "Letta Stateful Agent",
-  "Elasticsearch Agent",
-  "Groq Kimi K2 Instruct",
-  "Gemini 2.5 Pro",
-  "Claude 4.5 Haiku",
-  "Claude 4.5 Sonnet",
-  "Roboflow 3.0 Object Detection",
-];
-
-export function ModelsSection() {
-  return (
-    <div className="w-full max-w-[95%] lg:max-w-[80%] mx-auto">
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start">
-        {/* Left: Text with Highlighter */}
-        <div className="space-y-4 lg:space-y-6">
-          <p className="text-base lg:text-lg leading-relaxed lg:leading-loose">
-            Argus leverages the{" "}
-            <TextHighlighter
-              triggerType="inView"
-              highlightColor="hsl(0, 100%, 31%)"
-              direction="ltr"
-            >
-              best in AI technology
-            </TextHighlighter>
-            , combining cutting-edge{" "}
-            <TextHighlighter
-              triggerType="inView"
-              highlightColor="hsl(0, 100%, 31%)"
-              direction="ltr"
-            >
-              computer vision
-            </TextHighlighter>{" "}
-            and{" "}
-            <TextHighlighter
-              triggerType="inView"
-              highlightColor="hsl(0, 100%, 31%)"
-              direction="ltr"
-            >
-              natural language processing
-            </TextHighlighter>{" "}
-            to deliver unparalleled{" "}
-            <TextHighlighter
-              triggerType="inView"
-              highlightColor="hsl(0, 100%, 31%)"
-              direction="ltr"
-            >
-              security and surveillance
-            </TextHighlighter>{" "}
-            capabilities. Argus intelligently analyzes video feeds in{" "} 
-            <TextHighlighter
-              triggerType="inView"
-              highlightColor="hsl(0, 100%, 31%)"
-              direction="ltr"
-            >
-              real-time
-            </TextHighlighter>, detecting {" "}
-            <TextHighlighter
-              triggerType="inView"
-              highlightColor="hsl(0, 100%, 31%)"
-              direction="ltr"
-            >
-              anomalies
-            </TextHighlighter>, identifying threats, and generating{" "}
-            <TextHighlighter
-              triggerType="inView"
-              highlightColor="hsl(0, 100%, 31%)"
-              direction="ltr"
-            >
-              comprehensive reports
-            </TextHighlighter> to keep you informed and protected.
-            
-            <br />
-
-           </p>
-          <p className="text-base lg:text-lg leading-relaxed lg:leading-loose">
-            Built on a {" "}
-            <TextHighlighter
-              triggerType="inView"
-              highlightColor="hsl(0, 100%, 31%)"
-              direction="ltr"
-            >
-              real-time streaming pipeline
-            </TextHighlighter>{" "}
-            with {" "}
-            <TextHighlighter
-              triggerType="inView"
-              highlightColor="hsl(0, 100%, 31%)"
-              direction="ltr"
-            >
-              Mux
-            </TextHighlighter>{" "}
-            and {" "}
-            <TextHighlighter
-              triggerType="inView"
-              highlightColor="hsl(0, 100%, 31%)"
-              direction="ltr"
-            >
-              FFmpeg transmuxing
-            </TextHighlighter>
-            , Argus delivers {" "}
-            <TextHighlighter
-              triggerType="inView"
-              highlightColor="hsl(0, 100%, 31%)"
-              direction="ltr"
-            >
-              low-latency playback
-            </TextHighlighter>{" "}
-            and resilient delivery while segments are scheduled and analyzed at the edge.
-          </p>
-
-          <p className="text-base lg:text-lg leading-relaxed lg:leading-loose">
-            Detections from {" "}
-            <TextHighlighter
-              triggerType="inView"
-              highlightColor="hsl(0, 100%, 31%)"
-              direction="ltr"
-            >
-              Roboflow object detection
-            </TextHighlighter>{" "}
-            and AI summaries from {" "}
-            <TextHighlighter
-              triggerType="inView"
-              highlightColor="hsl(0, 100%, 31%)"
-              direction="ltr"
-            >
-              Gemini
-            </TextHighlighter>{" "}
-            are indexed into {" "}
-            <TextHighlighter
-              triggerType="inView"
-              highlightColor="hsl(0, 100%, 31%)"
-              direction="ltr"
-            >
-              Elasticsearch
-            </TextHighlighter>{" "}
-            with rich {" "}
-            <TextHighlighter
-              triggerType="inView"
-              highlightColor="hsl(0, 100%, 31%)"
-              direction="ltr"
-            >
-              structured metadata
-            </TextHighlighter>
-            , and persisted via {" "}
-            <TextHighlighter
-              triggerType="inView"
-              highlightColor="hsl(0, 100%, 31%)"
-              direction="ltr"
-            >
-              Supabase Realtime & Edge Functions
-            </TextHighlighter>{" "}
-             so you're always in the loop.
-          </p>
-        </div>
-
-        {/* Right: AI Models List */}
-        <div className="space-y-4 lg:space-y-6 lg:pl-12">
-          <div className="mb-2 lg:mb-4 text-center lg:text-right">
-            <Badge variant="secondary" className="mb-4 lg:mb-6">
-              Powered by
-            </Badge>
-          </div>
-          <div className="space-y-4 lg:space-y-8 text-center lg:text-right">
-            {aiModels.map((model, index) => (
-              <div key={index} className="text-xl lg:text-2xl font-semibold">
-                <ScrambleHover
-                  text={model}
-                  sequential={true}
-                  revealDirection="start"
-                  scrambleSpeed={30}
-                  maxIterations={8}
-                />
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
diff --git a/components/nav-main.tsx b/components/nav-main.tsx
index 0fd8049..8fc067a 100644
--- a/components/nav-main.tsx
+++ b/components/nav-main.tsx
@@ -14,7 +14,8 @@ import {
 
 export function NavMain({
   items,
-}: {
+  labelClassName,
+}: Readonly<{
   items: {
     title?: string;
     items: {
@@ -23,7 +24,8 @@ export function NavMain({
       icon?: Icon;
     }[];
   }[];
-}) {
+  labelClassName?: string;
+}>) {
   const pathname = usePathname();
 
   return (
@@ -31,7 +33,9 @@ export function NavMain({
       {items.map((section) => (
         <SidebarGroup key={section.title || "main"}>
           {section.title && (
-            <SidebarGroupLabel>{section.title}</SidebarGroupLabel>
+            <SidebarGroupLabel className={labelClassName}>
+              {section.title}
+            </SidebarGroupLabel>
           )}
           <SidebarGroupContent className="flex flex-col gap-2">
             <SidebarMenu>
diff --git a/components/onboarding/apply-tool-event.ts b/components/onboarding/apply-tool-event.ts
new file mode 100644
index 0000000..78c08da
--- /dev/null
+++ b/components/onboarding/apply-tool-event.ts
@@ -0,0 +1,55 @@
+import type { OnboardingToolEvent } from "@/components/onboarding/onboarding-types";
+import {
+  addCamera,
+  addDetectionRule,
+  setAlerts,
+  setOrgName,
+} from "@/lib/demo/session-store";
+
+/**
+ * Apply a single onboarding tool event to the demo-session store.
+ *
+ * Pure with respect to UI: it performs the store mutations a tool call implies
+ * and returns `true` when the event signals that onboarding is complete (so the
+ * caller can advance to the confirm phase). It does not deduplicate — callers
+ * are responsible for invoking each event at most once.
+ */
+export function applyToolEvent(event: OnboardingToolEvent): boolean {
+  switch (event.type) {
+    case "tool-setOrgName": {
+      const out = event.output;
+      if (out.name) setOrgName(out.name);
+      return false;
+    }
+    case "tool-addCamera": {
+      const out = event.output;
+      if (out.name) addCamera({ name: out.name, location: out.location });
+      return false;
+    }
+    case "tool-addDetectionRule": {
+      const out = event.output;
+      if (out.label) {
+        addDetectionRule({
+          label: out.label,
+          description: out.description,
+          severity: out.severity,
+        });
+      }
+      return false;
+    }
+    case "tool-setAlerts": {
+      const out = event.output;
+      setAlerts({
+        channels: out.channels,
+        severityThreshold: out.severityThreshold,
+        email: out.email,
+        phone: out.phone,
+      });
+      return false;
+    }
+    case "tool-completeOnboarding":
+      return true;
+    default:
+      return false;
+  }
+}
diff --git a/components/onboarding/assembly-sequence.tsx b/components/onboarding/assembly-sequence.tsx
new file mode 100644
index 0000000..d7664d6
--- /dev/null
+++ b/components/onboarding/assembly-sequence.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import {
+  IconBell,
+  IconBuilding,
+  IconCheck,
+  IconDeviceCctv,
+  IconLoader2,
+  IconShieldCheck,
+} from "@tabler/icons-react";
+import { AnimatePresence, motion } from "framer-motion";
+import type { OnboardingToolEvent } from "@/components/onboarding/onboarding-types";
+import { cn } from "@/lib/utils";
+
+function iconFor(type: OnboardingToolEvent["type"]) {
+  switch (type) {
+    case "tool-setOrgName":
+      return IconBuilding;
+    case "tool-addCamera":
+      return IconDeviceCctv;
+    case "tool-addDetectionRule":
+      return IconShieldCheck;
+    case "tool-setAlerts":
+      return IconBell;
+    default:
+      return IconCheck;
+  }
+}
+
+export function AssemblySequence({
+  events,
+  busy,
+  className,
+}: {
+  events: OnboardingToolEvent[];
+  busy: boolean;
+  className?: string;
+}) {
+  return (
+    <main
+      className={cn(
+        "flex h-dvh items-center justify-center overflow-hidden px-5 py-10",
+        className,
+      )}
+    >
+      <div className="w-full max-w-xl">
+        <motion.div
+          initial={{ opacity: 0, y: 12 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="rounded-xl bg-[var(--card)] p-6 shadow-xl shadow-black/10 ring-1 ring-black/5 dark:shadow-black/30 dark:ring-white/10"
+        >
+          <div className="mb-6 flex items-center gap-3">
+            <span className="flex size-10 items-center justify-center rounded-lg bg-blue-50 text-blue-700 dark:bg-blue-400/10 dark:text-blue-300">
+              <IconLoader2 className={`size-5 ${busy ? "animate-spin" : ""}`} />
+            </span>
+            <div>
+              <h1 className="text-lg font-semibold tracking-tight text-[var(--foreground)]">
+                Building your workspace
+              </h1>
+              <p className="text-sm text-[var(--muted-foreground)]">
+                Argus is translating your description into cameras, rules, and
+                alert settings.
+              </p>
+            </div>
+          </div>
+
+          <div className="min-h-48 space-y-2">
+            <AnimatePresence initial={false}>
+              {events.map((event) => {
+                const Icon = iconFor(event.type);
+                return (
+                  <motion.div
+                    key={event.id}
+                    initial={{ opacity: 0, y: 8, scale: 0.98 }}
+                    animate={{ opacity: 1, y: 0, scale: 1 }}
+                    exit={{ opacity: 0, y: -4 }}
+                    transition={{ duration: 0.28, ease: "easeOut" }}
+                    className="flex items-center gap-3 rounded-lg bg-[var(--muted)] px-3.5 py-3"
+                  >
+                    <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-emerald-50 text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-300">
+                      <Icon className="size-4" />
+                    </span>
+                    <span className="min-w-0 flex-1 truncate text-sm text-[var(--foreground)]">
+                      {event.label}
+                    </span>
+                    <IconCheck className="size-4 shrink-0 text-emerald-600 dark:text-emerald-300" />
+                  </motion.div>
+                );
+              })}
+            </AnimatePresence>
+
+            {events.length === 0 && (
+              <motion.div
+                initial={{ opacity: 0, y: 6 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.22, ease: "easeOut" }}
+                className="flex h-36 items-center justify-center rounded-lg bg-[var(--muted)] text-sm text-[var(--muted-foreground)]"
+              >
+                Waiting for setup actions...
+              </motion.div>
+            )}
+          </div>
+        </motion.div>
+      </div>
+    </main>
+  );
+}
diff --git a/components/onboarding/collapsible-copilot-panel.tsx b/components/onboarding/collapsible-copilot-panel.tsx
new file mode 100644
index 0000000..c796d56
--- /dev/null
+++ b/components/onboarding/collapsible-copilot-panel.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import type { UIMessage } from "@ai-sdk/react";
+import {
+  IconLayoutSidebarRightCollapse,
+  IconMessageCircle,
+} from "@tabler/icons-react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import { CopilotPanel } from "@/components/onboarding/copilot-panel";
+import { cn } from "@/lib/utils";
+
+interface CollapsibleCopilotPanelProps {
+  messages: UIMessage[];
+  status: string;
+  input: string;
+  onInputChange: (value: string) => void;
+  onSend: (text: string) => void;
+  visibleToolCallIds?: Set<string>;
+  className?: string;
+}
+
+export function CollapsibleCopilotPanel({
+  messages,
+  status,
+  input,
+  onInputChange,
+  onSend,
+  visibleToolCallIds,
+  className,
+}: CollapsibleCopilotPanelProps) {
+  const [open, setOpen] = useState(true);
+  const [isDesktop, setIsDesktop] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia("(min-width: 1024px)");
+    const update = () => setIsDesktop(media.matches);
+    update();
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, []);
+
+  return (
+    <motion.aside
+      layout
+      initial={false}
+      animate={{
+        width: isDesktop ? (open ? "clamp(380px, 28vw, 420px)" : 56) : "auto",
+        height: isDesktop ? "auto" : open ? "42dvh" : 48,
+      }}
+      transition={{ type: "spring", stiffness: 360, damping: 34 }}
+      className={cn(
+        "m-2 min-h-0 shrink-0 overflow-hidden rounded-lg bg-[var(--card)] shadow-sm ring-1 ring-black/5 dark:ring-white/10",
+        open ? "h-[42dvh] lg:h-auto" : "h-12 lg:h-auto",
+        className,
+      )}
+    >
+      <div className="hidden h-full lg:block">
+        <AnimatePresence mode="wait" initial={false}>
+          {open ? (
+            <motion.div
+              key="panel"
+              initial={{ opacity: 0, x: 8 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 8 }}
+              transition={{ duration: 0.18, ease: "easeOut" }}
+              className="relative h-full"
+            >
+              <motion.button
+                type="button"
+                onClick={() => setOpen(false)}
+                aria-label="Collapse setup copilot"
+                whileTap={{ scale: 0.96 }}
+                className="absolute right-3 top-3 z-10 flex size-8 cursor-pointer items-center justify-center rounded-md text-[var(--muted-foreground)] transition-colors hover:bg-[var(--accent)] hover:text-[var(--foreground)]"
+              >
+                <IconLayoutSidebarRightCollapse className="size-4" />
+              </motion.button>
+              <CopilotPanel
+                messages={messages}
+                status={status}
+                input={input}
+                onInputChange={onInputChange}
+                onSend={onSend}
+                visibleToolCallIds={visibleToolCallIds}
+              />
+            </motion.div>
+          ) : (
+            <motion.button
+              key="rail"
+              type="button"
+              onClick={() => setOpen(true)}
+              aria-label="Open setup copilot"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              whileTap={{ scale: 0.96 }}
+              transition={{ duration: 0.16, ease: "easeOut" }}
+              className="flex h-full w-full cursor-pointer items-start justify-center rounded-lg pt-4 text-[var(--muted-foreground)] transition-colors hover:bg-[var(--accent)] hover:text-[var(--foreground)]"
+            >
+              <IconMessageCircle className="size-5" />
+            </motion.button>
+          )}
+        </AnimatePresence>
+      </div>
+
+      <div className="h-full min-h-0 lg:hidden">
+        <CopilotPanel
+          messages={messages}
+          status={status}
+          input={input}
+          onInputChange={onInputChange}
+          onSend={onSend}
+          visibleToolCallIds={visibleToolCallIds}
+        />
+      </div>
+    </motion.aside>
+  );
+}
diff --git a/components/onboarding/completion.ts b/components/onboarding/completion.ts
new file mode 100644
index 0000000..e7ea953
--- /dev/null
+++ b/components/onboarding/completion.ts
@@ -0,0 +1,19 @@
+import type { DemoSessionState } from "@/lib/demo/session-store";
+
+/**
+ * Whether each onboarding section is "complete", in marker order:
+ * [organization, cameras, detection rules, alerts]. Shared by the review
+ * canvas progress markers and the per-section "done" indicators.
+ */
+export function sectionCompletion(
+  session: DemoSessionState,
+): [boolean, boolean, boolean, boolean] {
+  return [
+    !!session.orgName,
+    session.cameras.length > 0,
+    session.detectionRules.length > 0,
+    session.alertPrefs.channels.length > 1 ||
+      !!session.alertPrefs.email ||
+      !!session.alertPrefs.phone,
+  ];
+}
diff --git a/components/onboarding/composer.tsx b/components/onboarding/composer.tsx
new file mode 100644
index 0000000..f7427f3
--- /dev/null
+++ b/components/onboarding/composer.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { IconArrowUp } from "@tabler/icons-react";
+import { motion } from "framer-motion";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface ComposerProps {
+  input: string;
+  busy: boolean;
+  onInputChange: (value: string) => void;
+  onSubmit: (text: string) => void;
+  /** Accessible label for the send button. */
+  sendLabel: string;
+  /** Footer hint shown beside the send button. */
+  hint?: string;
+  placeholder?: string;
+  /** Tighter min-heights and smaller text for the docked panel composer. */
+  compact?: boolean;
+  className?: string;
+}
+
+/**
+ * Shared composer: card → muted box → textarea (Enter-to-submit) → footer hint
+ * + send button. Used by the onboarding hero and the copilot panel.
+ */
+export function Composer({
+  input,
+  busy,
+  onInputChange,
+  onSubmit,
+  sendLabel,
+  hint = "Cameras, rules, alerts, and launch settings",
+  placeholder = "Describe your space...",
+  compact = false,
+  className,
+}: ComposerProps) {
+  const submit = () => {
+    const text = input.trim();
+    if (!text || busy) return;
+    onSubmit(text);
+  };
+
+  return (
+    <motion.div
+      layout
+      className={cn(
+        "w-full rounded-xl bg-card p-2 shadow-xl shadow-black/10 ring-1 ring-black/5 dark:shadow-black/30 dark:ring-white/10",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          "flex flex-col gap-3 rounded-lg bg-muted p-3 text-left",
+          compact ? "min-h-24" : "min-h-28",
+        )}
+      >
+        <textarea
+          value={input}
+          onChange={(event) => onInputChange(event.currentTarget.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && !event.shiftKey) {
+              event.preventDefault();
+              submit();
+            }
+          }}
+          disabled={busy}
+          placeholder={placeholder}
+          className={cn(
+            "resize-none bg-transparent text-foreground outline-none placeholder:text-muted-foreground",
+            compact ? "min-h-14 text-sm" : "min-h-20 text-base",
+          )}
+        />
+        <div className="flex items-center justify-between gap-3">
+          <span className="text-muted-foreground text-xs">{hint}</span>
+          <Button
+            asChild
+            size="icon"
+            className="shrink-0 cursor-pointer bg-slate-900 text-white hover:bg-slate-700 disabled:opacity-40 dark:bg-slate-100 dark:text-slate-950 dark:hover:bg-white"
+          >
+            <motion.button
+              type="button"
+              onClick={submit}
+              disabled={!input.trim() || busy}
+              aria-label={sendLabel}
+              whileTap={{ scale: 0.94 }}
+            >
+              <IconArrowUp className="size-4" />
+            </motion.button>
+          </Button>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
diff --git a/components/onboarding/confirm-launch.tsx b/components/onboarding/confirm-launch.tsx
new file mode 100644
index 0000000..fd58e70
--- /dev/null
+++ b/components/onboarding/confirm-launch.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import {
+  IconArrowRight,
+  IconBell,
+  IconDeviceCctv,
+  IconShieldCheck,
+} from "@tabler/icons-react";
+import { motion } from "framer-motion";
+import type React from "react";
+import { Button } from "@/components/ui/button";
+import type { DemoSessionState } from "@/lib/demo/session-store";
+import { cn } from "@/lib/utils";
+
+export function ConfirmLaunch({
+  session,
+  finishing,
+  onBack,
+  onLaunch,
+  className,
+}: {
+  session: DemoSessionState;
+  finishing: boolean;
+  onBack: () => void;
+  onLaunch: () => void;
+  className?: string;
+}) {
+  const alertChannels = session.alertPrefs.channels.join(", ") || "dashboard";
+
+  return (
+    <main
+      className={cn(
+        "flex min-h-[calc(100dvh-49px)] items-center justify-center px-5 py-8",
+        className,
+      )}
+    >
+      <section className="w-full max-w-2xl rounded-xl bg-[var(--card)] p-6 shadow-xl shadow-black/10 ring-1 ring-black/5 dark:shadow-black/30 dark:ring-white/10">
+        <div className="mb-6">
+          <p className="text-xs font-medium uppercase tracking-[0.22em] text-[var(--muted-foreground)]">
+            Confirm launch
+          </p>
+          <h1 className="mt-2 text-2xl font-semibold tracking-tight text-[var(--foreground)]">
+            {session.orgName ?? "Your workspace"} is ready.
+          </h1>
+          <p className="mt-2 text-sm leading-6 text-[var(--muted-foreground)]">
+            Argus will open the live dashboard with your session cameras merged
+            into the demo workspace.
+          </p>
+        </div>
+
+        <div className="grid gap-3 sm:grid-cols-3">
+          <SummaryTile
+            icon={IconDeviceCctv}
+            label="Cameras"
+            value={`${session.cameras.length}`}
+          />
+          <SummaryTile
+            icon={IconShieldCheck}
+            label="Rules"
+            value={`${session.detectionRules.length}`}
+          />
+          <SummaryTile icon={IconBell} label="Alerts" value={alertChannels} />
+        </div>
+
+        <div className="mt-6 rounded-lg bg-[var(--muted)] p-4">
+          <h2 className="text-sm font-medium text-[var(--foreground)]">
+            Launch summary
+          </h2>
+          <ul className="mt-3 space-y-2 text-sm text-[var(--muted-foreground)]">
+            <li>Organization: {session.orgName ?? "Unnamed workspace"}</li>
+            <li>
+              Cameras:{" "}
+              {session.cameras.length
+                ? session.cameras.map((camera) => camera.camera_name).join(", ")
+                : "none yet"}
+            </li>
+            <li>
+              Rules:{" "}
+              {session.detectionRules.length
+                ? session.detectionRules.map((rule) => rule.label).join(", ")
+                : "none yet"}
+            </li>
+            <li>
+              Alerts: {alertChannels}, {session.alertPrefs.severityThreshold}+
+            </li>
+          </ul>
+        </div>
+
+        <div className="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
+          <motion.button
+            type="button"
+            onClick={onBack}
+            disabled={finishing}
+            whileTap={{ scale: 0.98 }}
+            className="cursor-pointer rounded-md bg-[var(--muted)] px-4 py-2.5 text-sm text-[var(--foreground)] transition-colors hover:bg-[var(--accent)] disabled:opacity-50"
+          >
+            Back to review
+          </motion.button>
+          <Button
+            asChild
+            className="h-auto cursor-pointer bg-slate-900 px-4 py-2.5 text-white hover:bg-slate-700 dark:bg-slate-100 dark:text-slate-950 dark:hover:bg-white"
+          >
+            <motion.button
+              type="button"
+              onClick={onLaunch}
+              disabled={finishing}
+              whileTap={{ scale: 0.98 }}
+            >
+              Launch workspace
+              <IconArrowRight className="size-4" />
+            </motion.button>
+          </Button>
+        </div>
+      </section>
+    </main>
+  );
+}
+
+function SummaryTile({
+  icon: Icon,
+  label,
+  value,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  value: string;
+}) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 6 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2, ease: "easeOut" }}
+      className="rounded-lg bg-[var(--muted)] p-4"
+    >
+      <Icon className="mb-3 size-4 text-slate-600 dark:text-slate-300" />
+      <p className="text-xs text-[var(--muted-foreground)]">{label}</p>
+      <p className="mt-1 truncate text-sm font-medium text-[var(--foreground)]">
+        {value}
+      </p>
+    </motion.div>
+  );
+}
diff --git a/components/onboarding/constants.ts b/components/onboarding/constants.ts
new file mode 100644
index 0000000..7e5dec7
--- /dev/null
+++ b/components/onboarding/constants.ts
@@ -0,0 +1,74 @@
+import type {
+  OnboardingToolOutput,
+  OnboardingToolOutputMap,
+  OnboardingToolType,
+} from "@/components/onboarding/onboarding-types";
+import { ONBOARDING_TOOL_TYPE_TUPLE } from "@/components/onboarding/onboarding-types";
+
+/** Runtime set of recognised tool-call types, derived from the shared tuple. */
+export const ONBOARDING_TOOL_TYPES = new Set<OnboardingToolType>(
+  ONBOARDING_TOOL_TYPE_TUPLE,
+);
+
+export function isOnboardingToolType(type: string): type is OnboardingToolType {
+  return ONBOARDING_TOOL_TYPES.has(type as OnboardingToolType);
+}
+
+/**
+ * Human-readable summaries of a completed tool call. Typed per tool so each
+ * label receives exactly its own output payload (no weak intersection).
+ */
+type ToolLabelMap = {
+  [K in OnboardingToolType]: (output: OnboardingToolOutputMap[K]) => string;
+};
+
+export const TOOL_LABELS: ToolLabelMap = {
+  "tool-setOrgName": (o) => `Named your workspace "${o.name ?? ""}"`,
+  "tool-addCamera": (o) =>
+    `Added camera: ${o.name ?? "Camera"}${o.location ? ` - ${o.location}` : ""}`,
+  "tool-addDetectionRule": (o) => `Enabled rule: ${o.label ?? "Detection"}`,
+  "tool-setAlerts": (o) =>
+    `Set alerts: ${(o.channels ?? []).join(", ") || "dashboard"}`,
+  "tool-completeOnboarding": () => "Finished setup",
+};
+
+const DEFAULT_TOOL_LABEL = "Updated setup";
+
+/**
+ * Resolve the human-readable label for a tool call given its runtime `type` and
+ * raw output. Falls back to a generic label for unrecognised types. Centralises
+ * the type → payload narrowing the streamed (loosely-typed) output can't express.
+ */
+export function toolLabel(
+  type: string,
+  output: OnboardingToolOutput | undefined,
+): string {
+  if (!isOnboardingToolType(type)) return DEFAULT_TOOL_LABEL;
+  const label = TOOL_LABELS[type] as (o: OnboardingToolOutput) => string;
+  return label(output ?? {});
+}
+
+/** Short titles for the tool header in the copilot transcript. */
+export const TOOL_TITLES: Record<string, string> = {
+  "tool-setOrgName": "Set workspace name",
+  "tool-addCamera": "Add camera",
+  "tool-addDetectionRule": "Add detection rule",
+  "tool-setAlerts": "Configure alerts",
+  "tool-completeOnboarding": "Complete onboarding",
+};
+
+/**
+ * Shared class for the filled (muted-background) text inputs used across the
+ * onboarding sections and editable lists. Kept here so the single style lives in
+ * one place; the project's `Input`/`Textarea` use a bordered/transparent style
+ * that doesn't match this filled treatment, so this is intentionally separate.
+ */
+export const ONBOARDING_INPUT_CLASS =
+  "w-full rounded-md bg-[var(--muted)] px-3 py-2 text-sm text-[var(--foreground)] outline-none ring-1 ring-black/5 transition-shadow placeholder:text-[var(--muted-foreground)] focus:ring-[var(--ring)] dark:ring-white/10";
+
+/** Example prompts offered on the hero and empty copilot panel. */
+export const SUGGESTIONS = [
+  "3-story office - watch the lobby and parking, flag weapons and medical emergencies",
+  "Retail store, cover the entrance and stockroom, alert me about theft and loitering",
+  "Warehouse with a loading dock and perimeter - detect unauthorized access and safety issues",
+];
diff --git a/components/onboarding/copilot-panel.tsx b/components/onboarding/copilot-panel.tsx
new file mode 100644
index 0000000..02e1bd8
--- /dev/null
+++ b/components/onboarding/copilot-panel.tsx
@@ -0,0 +1,192 @@
+"use client";
+
+import type { UIMessage } from "@ai-sdk/react";
+import { AnimatePresence, motion } from "framer-motion";
+import {
+  Conversation,
+  ConversationContent,
+} from "@/components/ai-elements/conversation";
+import { Loader } from "@/components/ai-elements/loader";
+import { Message, MessageContent } from "@/components/ai-elements/message";
+import { Response } from "@/components/ai-elements/response";
+import { Tool, ToolContent, ToolHeader } from "@/components/ai-elements/tool";
+import { Composer } from "@/components/onboarding/composer";
+import { TOOL_TITLES, toolLabel } from "@/components/onboarding/constants";
+import type {
+  TextPart,
+  ToolPart,
+} from "@/components/onboarding/onboarding-types";
+import { isBusy } from "@/components/onboarding/status";
+import { SuggestionCards } from "@/components/onboarding/suggestion-cards";
+import { cn } from "@/lib/utils";
+
+interface CopilotPanelProps {
+  messages: UIMessage[];
+  status: string;
+  input: string;
+  onInputChange: (value: string) => void;
+  onSend: (text: string) => void;
+  visibleToolCallIds?: Set<string>;
+  className?: string;
+}
+
+export function CopilotPanel({
+  messages,
+  status,
+  input,
+  onInputChange,
+  onSend,
+  visibleToolCallIds,
+  className,
+}: CopilotPanelProps) {
+  const busy = isBusy(status);
+
+  const submitText = (text: string) => {
+    const trimmed = text.trim();
+    if (!trimmed || busy) return;
+    onSend(trimmed);
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex h-full min-h-0 flex-col overflow-hidden rounded-lg bg-background",
+        className,
+      )}
+    >
+      <Conversation className="min-h-0 flex-1 overflow-y-auto">
+        <ConversationContent className="mx-auto flex w-full max-w-3xl flex-col gap-1 p-4">
+          {messages.length === 0 && (
+            <motion.div
+              initial={{ opacity: 0, y: 8 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.2, ease: "easeOut" }}
+              className="flex h-full min-h-[26rem] flex-col justify-center gap-6 py-3 text-center"
+            >
+              <div className="flex flex-col gap-3">
+                <p className="font-medium text-muted-foreground text-xs uppercase tracking-[0.22em]">
+                  Argus setup
+                </p>
+                <h2 className="font-semibold text-3xl text-foreground tracking-tight">
+                  Describe your space.
+                </h2>
+                <p className="mx-auto max-w-sm text-muted-foreground text-sm leading-6">
+                  Tell Argus what kind of site you run, which areas need
+                  cameras, and what the AI should flag.
+                </p>
+              </div>
+
+              <Composer
+                input={input}
+                busy={busy}
+                onInputChange={onInputChange}
+                onSubmit={submitText}
+                sendLabel="Send setup request"
+              />
+              <SuggestionCards onSelect={submitText} disabled={busy} />
+            </motion.div>
+          )}
+
+          <AnimatePresence initial={false}>
+            {messages.map((message) => (
+              <motion.div
+                key={message.id}
+                layout
+                initial={{ opacity: 0, y: 8 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -4 }}
+                transition={{ duration: 0.2, ease: "easeOut" }}
+              >
+                <Message from={message.role}>
+                  <MessageContent variant="flat">
+                    {message.parts.map((part) => {
+                      if (part.type === "text") {
+                        const text = (part as TextPart).text;
+                        return (
+                          <Response key={`${message.id}:text:${text}`}>
+                            {text}
+                          </Response>
+                        );
+                      }
+
+                      if (
+                        typeof part.type === "string" &&
+                        part.type.startsWith("tool-")
+                      ) {
+                        const toolPart = part as ToolPart;
+                        const callId = toolPart.toolCallId;
+                        if (
+                          visibleToolCallIds &&
+                          callId &&
+                          !visibleToolCallIds.has(callId)
+                        ) {
+                          return null;
+                        }
+
+                        const state = toolPart.state ?? "input-available";
+                        const label = toolLabel(part.type, toolPart.output);
+                        const title =
+                          TOOL_TITLES[part.type] ??
+                          part.type.replace("tool-", "");
+
+                        return (
+                          <Tool
+                            key={`${message.id}:tool:${callId ?? part.type}`}
+                          >
+                            <ToolHeader
+                              state={state}
+                              title={title}
+                              type={part.type as `tool-${string}`}
+                            />
+                            {state === "output-available" && (
+                              <ToolContent>
+                                <div className="px-4 pb-4 text-muted-foreground text-sm">
+                                  {label}
+                                </div>
+                              </ToolContent>
+                            )}
+                          </Tool>
+                        );
+                      }
+
+                      return null;
+                    })}
+                  </MessageContent>
+                </Message>
+              </motion.div>
+            ))}
+          </AnimatePresence>
+
+          <AnimatePresence>
+            {busy && (
+              <motion.div
+                initial={{ opacity: 0, y: 4 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -4 }}
+              >
+                <Message from="assistant">
+                  <MessageContent variant="flat">
+                    <Loader className="my-2" />
+                  </MessageContent>
+                </Message>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </ConversationContent>
+      </Conversation>
+
+      {messages.length > 0 && (
+        <div className="shrink-0 bg-background p-4">
+          <Composer
+            input={input}
+            busy={busy}
+            compact
+            onInputChange={onInputChange}
+            onSubmit={submitText}
+            sendLabel="Send setup request"
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/onboarding/editable-list.tsx b/components/onboarding/editable-list.tsx
new file mode 100644
index 0000000..ebcf288
--- /dev/null
+++ b/components/onboarding/editable-list.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { IconPlus, IconX } from "@tabler/icons-react";
+import { AnimatePresence, motion } from "framer-motion";
+import type React from "react";
+import { useState } from "react";
+import { ONBOARDING_INPUT_CLASS } from "@/components/onboarding/constants";
+import { cn } from "@/lib/utils";
+
+interface EditableListItem {
+  id: string;
+}
+
+interface EditableListProps<T extends EditableListItem> {
+  items: T[];
+  /** Row content rendered inside the removable row. */
+  renderItem: (item: T) => React.ReactNode;
+  /** Add an item from the (trimmed, non-empty) input value. */
+  onAdd: (value: string) => void;
+  onRemove: (id: string) => void;
+  /** Accessible label for a row's remove button, given the item. */
+  removeLabel: (item: T) => string;
+  placeholder: string;
+  className?: string;
+}
+
+/**
+ * Generic editable list: an animated stack of removable rows plus an input and
+ * add button. Used for the cameras and detection-rule sections.
+ */
+export function EditableList<T extends EditableListItem>({
+  items,
+  renderItem,
+  onAdd,
+  onRemove,
+  removeLabel,
+  placeholder,
+  className,
+}: EditableListProps<T>) {
+  const [value, setValue] = useState("");
+
+  const add = () => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    onAdd(trimmed);
+    setValue("");
+  };
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      <AnimatePresence initial={false}>
+        {items.map((item) => (
+          <motion.div
+            key={item.id}
+            layout
+            initial={{ opacity: 0, y: -6 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, height: 0 }}
+            className="flex items-center justify-between gap-3 rounded-md bg-[var(--muted)] px-3 py-2"
+          >
+            {renderItem(item)}
+            <motion.button
+              type="button"
+              onClick={() => onRemove(item.id)}
+              aria-label={removeLabel(item)}
+              whileTap={{ scale: 0.94 }}
+              className="shrink-0 text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)]"
+            >
+              <IconX className="size-4" />
+            </motion.button>
+          </motion.div>
+        ))}
+      </AnimatePresence>
+      <div className="flex gap-2">
+        <input
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && add()}
+          placeholder={placeholder}
+          className={ONBOARDING_INPUT_CLASS}
+        />
+        <AddButton onClick={add} />
+      </div>
+    </div>
+  );
+}
+
+function AddButton({ onClick }: { onClick: () => void }) {
+  return (
+    <motion.button
+      type="button"
+      onClick={onClick}
+      aria-label="Add"
+      whileTap={{ scale: 0.94 }}
+      className="flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-md bg-[var(--muted)] text-[var(--foreground)] transition-colors hover:bg-[var(--accent)]"
+    >
+      <IconPlus className="size-4" />
+    </motion.button>
+  );
+}
diff --git a/components/onboarding/onboarding-hero.tsx b/components/onboarding/onboarding-hero.tsx
new file mode 100644
index 0000000..838417c
--- /dev/null
+++ b/components/onboarding/onboarding-hero.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { IconArrowRight } from "@tabler/icons-react";
+import { motion } from "framer-motion";
+import { Composer } from "@/components/onboarding/composer";
+import { isBusy } from "@/components/onboarding/status";
+import { SuggestionCards } from "@/components/onboarding/suggestion-cards";
+import { cn } from "@/lib/utils";
+
+interface OnboardingHeroProps {
+  input: string;
+  status: string;
+  onInputChange: (value: string) => void;
+  onSubmit: (text: string) => void;
+  onManual: () => void;
+  className?: string;
+}
+
+export function OnboardingHero({
+  input,
+  status,
+  onInputChange,
+  onSubmit,
+  onManual,
+  className,
+}: OnboardingHeroProps) {
+  const busy = isBusy(status);
+
+  return (
+    <main
+      className={cn(
+        "relative flex h-dvh items-center justify-center overflow-hidden px-5 py-10",
+        className,
+      )}
+    >
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-52 bg-[radial-gradient(ellipse_at_bottom,rgba(94,106,210,0.18),rgba(39,166,68,0.08)_42%,transparent_72%)] dark:bg-[radial-gradient(ellipse_at_bottom,rgba(130,143,255,0.16),rgba(39,166,68,0.08)_42%,transparent_72%)]" />
+      <motion.div
+        initial={{ opacity: 0, y: 14 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.45, ease: "easeOut" }}
+        className="relative z-10 flex w-full max-w-3xl flex-col items-center gap-7 text-center"
+      >
+        <div className="flex flex-col gap-3">
+          <p className="text-xs font-medium uppercase tracking-[0.24em] text-[var(--muted-foreground)]">
+            Argus setup
+          </p>
+          <h1 className="text-3xl font-semibold tracking-tight text-[var(--foreground)] sm:text-5xl">
+            Describe your space.
+          </h1>
+          <p className="mx-auto max-w-xl text-sm leading-6 text-[var(--muted-foreground)] sm:text-base">
+            Tell Argus what kind of site you run, which areas need cameras, and
+            what the AI should flag.
+          </p>
+        </div>
+
+        <Composer
+          input={input}
+          busy={busy}
+          onInputChange={onInputChange}
+          onSubmit={onSubmit}
+          sendLabel="Build workspace"
+        />
+
+        <SuggestionCards
+          onSelect={onSubmit}
+          disabled={busy}
+          className="sm:grid-cols-3"
+        />
+
+        <motion.button
+          type="button"
+          onClick={onManual}
+          whileTap={{ scale: 0.98 }}
+          className="inline-flex cursor-pointer items-center gap-1 text-sm text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)]"
+        >
+          or set it up manually
+          <IconArrowRight className="size-3.5" />
+        </motion.button>
+      </motion.div>
+    </main>
+  );
+}
diff --git a/components/onboarding/onboarding-sections.tsx b/components/onboarding/onboarding-sections.tsx
new file mode 100644
index 0000000..e49a89a
--- /dev/null
+++ b/components/onboarding/onboarding-sections.tsx
@@ -0,0 +1,273 @@
+"use client";
+
+import {
+  IconBell,
+  IconBuilding,
+  IconCheck,
+  IconDeviceCctv,
+  IconShieldCheck,
+} from "@tabler/icons-react";
+import { motion } from "framer-motion";
+import type React from "react";
+import { ONBOARDING_INPUT_CLASS } from "@/components/onboarding/constants";
+import { EditableList } from "@/components/onboarding/editable-list";
+import type { DemoSessionState, Severity } from "@/lib/demo/session-store";
+import {
+  addCamera,
+  addDetectionRule,
+  removeCamera,
+  removeDetectionRule,
+  setAlerts,
+  setOrgName,
+} from "@/lib/demo/session-store";
+
+type IconComponent = React.ComponentType<{ className?: string }>;
+type Tone = "slate" | "blue" | "emerald" | "amber" | "rose";
+
+const TONE_CLASS: Record<Tone, string> = {
+  slate: "bg-slate-100 text-slate-700 dark:bg-slate-500/15 dark:text-slate-300",
+  blue: "bg-blue-50 text-blue-700 dark:bg-blue-400/10 dark:text-blue-300",
+  emerald:
+    "bg-emerald-50 text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-300",
+  amber: "bg-amber-50 text-amber-700 dark:bg-amber-400/10 dark:text-amber-300",
+  rose: "bg-rose-50 text-rose-700 dark:bg-rose-400/10 dark:text-rose-300",
+};
+
+const SEVERITY_DOT: Record<Severity, string> = {
+  High: "bg-red-400",
+  Medium: "bg-amber-400",
+  Minor: "bg-[var(--muted-foreground)]",
+};
+
+const CHANNELS: Array<{ key: "dashboard" | "email" | "sms"; label: string }> = [
+  { key: "dashboard", label: "Dashboard" },
+  { key: "email", label: "Email" },
+  { key: "sms", label: "SMS" },
+];
+
+function Section({
+  icon: Icon,
+  title,
+  description,
+  done,
+  tone,
+  children,
+}: {
+  icon: IconComponent;
+  title: string;
+  description: string;
+  done: boolean;
+  tone: Tone;
+  children: React.ReactNode;
+}) {
+  return (
+    <motion.section
+      layout
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.22, ease: "easeOut" }}
+      className="rounded-lg bg-[var(--card)] p-5 shadow-sm ring-1 ring-black/5 dark:ring-white/10"
+    >
+      <div className="mb-4 flex items-start gap-3">
+        <span
+          className={`mt-0.5 flex size-7 items-center justify-center rounded-md ${
+            done
+              ? TONE_CLASS[tone]
+              : "bg-[var(--muted)] text-[var(--muted-foreground)]"
+          }`}
+        >
+          {done ? (
+            <IconCheck className="size-4" />
+          ) : (
+            <Icon className="size-4" />
+          )}
+        </span>
+        <div className="min-w-0 flex-1">
+          <h2 className="text-sm font-medium text-[var(--foreground)]">
+            {title}
+          </h2>
+          <p className="text-xs text-[var(--muted-foreground)]">
+            {description}
+          </p>
+        </div>
+      </div>
+      {children}
+    </motion.section>
+  );
+}
+
+export function OrgSection({
+  name,
+  done,
+}: {
+  name: string | null;
+  done: boolean;
+}) {
+  return (
+    <Section
+      icon={IconBuilding}
+      title="Organization"
+      description="What should we call this deployment?"
+      done={done}
+      tone="slate"
+    >
+      <input
+        value={name ?? ""}
+        onChange={(e) => setOrgName(e.target.value)}
+        placeholder="e.g. Office HQ"
+        className={ONBOARDING_INPUT_CLASS}
+      />
+    </Section>
+  );
+}
+
+export function CamerasSection({
+  cameras,
+  done,
+}: {
+  cameras: DemoSessionState["cameras"];
+  done: boolean;
+}) {
+  return (
+    <Section
+      icon={IconDeviceCctv}
+      title="Cameras"
+      description="Add the areas you want to monitor."
+      done={done}
+      tone="blue"
+    >
+      <EditableList
+        items={cameras}
+        onAdd={(name) => addCamera({ name })}
+        onRemove={removeCamera}
+        removeLabel={(c) => `Remove ${c.camera_name}`}
+        placeholder="Add a camera (e.g. Lobby)"
+        renderItem={(c) => (
+          <span className="flex min-w-0 items-center gap-2 text-sm text-[var(--foreground)]">
+            <span className="size-1.5 shrink-0 rounded-full bg-blue-500" />
+            <span className="truncate">{c.camera_name}</span>
+          </span>
+        )}
+      />
+    </Section>
+  );
+}
+
+export function RulesSection({
+  rules,
+  done,
+}: {
+  rules: DemoSessionState["detectionRules"];
+  done: boolean;
+}) {
+  return (
+    <Section
+      icon={IconShieldCheck}
+      title="Detection rules"
+      description="What should the AI flag?"
+      done={done}
+      tone="emerald"
+    >
+      <EditableList
+        items={rules}
+        onAdd={(label) => addDetectionRule({ label })}
+        onRemove={removeDetectionRule}
+        removeLabel={(r) => `Remove ${r.label}`}
+        placeholder="Add a rule (e.g. Weapons)"
+        renderItem={(r) => (
+          <span className="flex min-w-0 items-center gap-2 text-sm text-[var(--foreground)]">
+            <span
+              className={`size-1.5 shrink-0 rounded-full ${SEVERITY_DOT[r.severity]}`}
+            />
+            <span className="truncate">{r.label}</span>
+            {r.description && (
+              <span className="hidden truncate text-xs text-[var(--muted-foreground)] sm:inline">
+                - {r.description}
+              </span>
+            )}
+          </span>
+        )}
+      />
+    </Section>
+  );
+}
+
+export function AlertsSection({
+  prefs,
+  done,
+}: {
+  prefs: DemoSessionState["alertPrefs"];
+  done: boolean;
+}) {
+  const toggleChannel = (key: "dashboard" | "email" | "sms") => {
+    const has = prefs.channels.includes(key);
+    const channels = has
+      ? prefs.channels.filter((c) => c !== key)
+      : [...prefs.channels, key];
+    setAlerts({ channels });
+  };
+  const severities: Severity[] = ["Minor", "Medium", "High"];
+
+  return (
+    <Section
+      icon={IconBell}
+      title="Alerts"
+      description="How and when should we notify you?"
+      done={done}
+      tone="amber"
+    >
+      <div className="flex flex-col gap-4">
+        <div>
+          <p className="mb-2 text-xs text-[var(--muted-foreground)]">
+            Channels
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {CHANNELS.map((ch) => {
+              const active = prefs.channels.includes(ch.key);
+              return (
+                <motion.button
+                  key={ch.key}
+                  type="button"
+                  onClick={() => toggleChannel(ch.key)}
+                  whileTap={{ scale: 0.97 }}
+                  className={`cursor-pointer rounded-md border px-3 py-1.5 text-xs transition-colors ${
+                    active
+                      ? "border-transparent bg-amber-50 text-amber-700 dark:bg-amber-400/10 dark:text-amber-300"
+                      : "border-transparent bg-[var(--muted)] text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+                  }`}
+                >
+                  {ch.label}
+                </motion.button>
+              );
+            })}
+          </div>
+        </div>
+        <div>
+          <p className="mb-2 text-xs text-[var(--muted-foreground)]">
+            Minimum severity
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {severities.map((sev) => {
+              const active = prefs.severityThreshold === sev;
+              return (
+                <motion.button
+                  key={sev}
+                  type="button"
+                  onClick={() => setAlerts({ severityThreshold: sev })}
+                  whileTap={{ scale: 0.97 }}
+                  className={`cursor-pointer rounded-md border px-3 py-1.5 text-xs transition-colors ${
+                    active
+                      ? "border-transparent bg-rose-50 text-rose-700 dark:bg-rose-400/10 dark:text-rose-300"
+                      : "border-transparent bg-[var(--muted)] text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+                  }`}
+                >
+                  {sev}
+                </motion.button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </Section>
+  );
+}
diff --git a/components/onboarding/onboarding-theme-scope.tsx b/components/onboarding/onboarding-theme-scope.tsx
new file mode 100644
index 0000000..d0f867a
--- /dev/null
+++ b/components/onboarding/onboarding-theme-scope.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import type React from "react";
+import { useEffect } from "react";
+
+/** next-themes' default localStorage key for the persisted theme choice. */
+const THEME_STORAGE_KEY = "theme";
+
+export function OnboardingThemeScope({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { setTheme } = useTheme();
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!window.localStorage.getItem(THEME_STORAGE_KEY)) {
+      setTheme("light");
+    }
+  }, [setTheme]);
+
+  return <>{children}</>;
+}
diff --git a/components/onboarding/onboarding-types.ts b/components/onboarding/onboarding-types.ts
new file mode 100644
index 0000000..a5fda3d
--- /dev/null
+++ b/components/onboarding/onboarding-types.ts
@@ -0,0 +1,99 @@
+import type { Severity } from "@/lib/demo/session-store";
+
+export type OnboardingPhase = "hero" | "assembling" | "review" | "confirm";
+
+/**
+ * Single source of truth for the onboarding tool-call types. The runtime set
+ * (`ONBOARDING_TOOL_TYPES` in constants.ts) is derived from this tuple, and the
+ * `OnboardingToolType` union below is derived from it too — so the literal list
+ * is maintained in exactly one place.
+ */
+export const ONBOARDING_TOOL_TYPE_TUPLE = [
+  "tool-setOrgName",
+  "tool-addCamera",
+  "tool-addDetectionRule",
+  "tool-setAlerts",
+  "tool-completeOnboarding",
+] as const;
+
+export type OnboardingToolType = (typeof ONBOARDING_TOOL_TYPE_TUPLE)[number];
+
+/**
+ * Tool output payloads, one interface per tool type. These mirror the input
+ * shapes consumed by the session-store mutators.
+ */
+export interface SetOrgNameOutput {
+  name?: string;
+}
+
+export interface AddCameraOutput {
+  name?: string;
+  location?: string;
+}
+
+export interface AddDetectionRuleOutput {
+  label?: string;
+  description?: string;
+  severity?: Severity;
+}
+
+export interface SetAlertsOutput {
+  channels?: Array<"dashboard" | "email" | "sms">;
+  severityThreshold?: Severity;
+  email?: string;
+  phone?: string;
+}
+
+export interface CompleteOnboardingOutput {
+  confirm?: boolean;
+}
+
+/**
+ * Maps each tool type to its output payload. The discriminated unions below are
+ * derived from this map so the literal type → payload pairing lives in one place
+ * and narrowing on `type` gives the exact payload (no weak intersection, so no
+ * spurious `o?.field` optional chaining is forced on consumers).
+ */
+export interface OnboardingToolOutputMap {
+  "tool-setOrgName": SetOrgNameOutput;
+  "tool-addCamera": AddCameraOutput;
+  "tool-addDetectionRule": AddDetectionRuleOutput;
+  "tool-setAlerts": SetAlertsOutput;
+  "tool-completeOnboarding": CompleteOnboardingOutput;
+}
+
+/** Union of every tool output payload, for code that handles a raw payload. */
+export type OnboardingToolOutput =
+  OnboardingToolOutputMap[keyof OnboardingToolOutputMap];
+
+/**
+ * A discovered tool call: a discriminated union over `type` where each member
+ * carries the matching output payload, so `switch (event.type)` narrows
+ * `event.output` to the exact shape.
+ */
+export type OnboardingToolEvent = {
+  [K in OnboardingToolType]: {
+    id: string;
+    type: K;
+    output: OnboardingToolOutputMap[K];
+    label: string;
+  };
+}[OnboardingToolType];
+
+/** A streamed text part of an assistant message. */
+export interface TextPart {
+  type: "text";
+  text: string;
+}
+
+/** A streamed tool-call part of an assistant message. */
+export interface ToolPart {
+  type: string;
+  state?:
+    | "input-streaming"
+    | "input-available"
+    | "output-available"
+    | "output-error";
+  toolCallId?: string;
+  output?: OnboardingToolOutput;
+}
diff --git a/components/onboarding/onboarding-wizard.tsx b/components/onboarding/onboarding-wizard.tsx
new file mode 100644
index 0000000..b5963bc
--- /dev/null
+++ b/components/onboarding/onboarding-wizard.tsx
@@ -0,0 +1,329 @@
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { IconCheck } from "@tabler/icons-react";
+import { DefaultChatTransport, generateId } from "ai";
+import { AnimatePresence, motion } from "framer-motion";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ModeToggle } from "@/components/mode-toggle";
+import { applyToolEvent } from "@/components/onboarding/apply-tool-event";
+import { AssemblySequence } from "@/components/onboarding/assembly-sequence";
+import { CollapsibleCopilotPanel } from "@/components/onboarding/collapsible-copilot-panel";
+import { ConfirmLaunch } from "@/components/onboarding/confirm-launch";
+import {
+  isOnboardingToolType,
+  toolLabel,
+} from "@/components/onboarding/constants";
+import { OnboardingHero } from "@/components/onboarding/onboarding-hero";
+import type {
+  OnboardingPhase,
+  OnboardingToolEvent,
+  ToolPart,
+} from "@/components/onboarding/onboarding-types";
+import { ReviewCanvas } from "@/components/onboarding/review-canvas";
+import { isBusy } from "@/components/onboarding/status";
+import { useDemoSession } from "@/hooks/use-demo-session";
+import { completeOnboarding, reset } from "@/lib/demo/session-store";
+
+/** AI model that drives the onboarding copilot. */
+const ONBOARDING_MODEL = "onboarding-guide";
+
+/** Delay before redirecting to the live dashboard after launch. */
+const LAUNCH_REDIRECT_MS = 1600;
+
+/** Stagger for revealing assembly events: first one is quick, the rest pace out. */
+const FIRST_REVEAL_MS = 300;
+const NEXT_REVEAL_MS = 620;
+
+/** Settle delay before advancing from "assembling" to "review". */
+const ASSEMBLY_SETTLE_MS = 850;
+
+export function OnboardingWizard() {
+  const router = useRouter();
+  const session = useDemoSession();
+  const [phase, setPhase] = useState<OnboardingPhase>("hero");
+  const [input, setInput] = useState("");
+  const [finishing, setFinishing] = useState(false);
+  const [pendingEvents, setPendingEvents] = useState<OnboardingToolEvent[]>([]);
+  const [revealedEvents, setRevealedEvents] = useState<OnboardingToolEvent[]>(
+    [],
+  );
+  const [visibleToolCallIds, setVisibleToolCallIds] = useState<Set<string>>(
+    () => new Set(),
+  );
+  const [assemblyObservedTurn, setAssemblyObservedTurn] = useState(false);
+
+  const [chatId] = useState(() => generateId());
+  const sessionRef = useRef(session);
+  const discoveredRef = useRef<Set<string>>(new Set());
+  const appliedRef = useRef<Set<string>>(new Set());
+  const assemblyStartMessageCountRef = useRef(0);
+
+  useEffect(() => {
+    sessionRef.current = session;
+  }, [session]);
+
+  const transport = useMemo(
+    () =>
+      new DefaultChatTransport({
+        api: "/api/chat",
+        body: () => ({
+          chatId,
+          onboarding: true,
+          model: ONBOARDING_MODEL,
+          sessionContext: {
+            hasOrgName: !!sessionRef.current.orgName,
+            cameraNames: sessionRef.current.cameras.map((c) => c.camera_name),
+            ruleLabels: sessionRef.current.detectionRules.map((r) => r.label),
+          },
+        }),
+      }),
+    [chatId],
+  );
+
+  const { messages, sendMessage, status } = useChat({ id: chatId, transport });
+  const busy = isBusy(status);
+
+  const handleFinish = useCallback(() => {
+    if (finishing) return;
+    completeOnboarding(true);
+    setFinishing(true);
+    window.setTimeout(() => router.push("/watch"), LAUNCH_REDIRECT_MS);
+  }, [finishing, router]);
+
+  const applyEvent = useCallback((event: OnboardingToolEvent) => {
+    if (appliedRef.current.has(event.id)) return;
+    appliedRef.current.add(event.id);
+    if (applyToolEvent(event)) setPhase("confirm");
+  }, []);
+
+  useEffect(() => {
+    if (
+      phase === "assembling" &&
+      messages.length > assemblyStartMessageCountRef.current
+    ) {
+      setAssemblyObservedTurn(true);
+    }
+
+    const discovered: OnboardingToolEvent[] = [];
+    for (const message of messages) {
+      for (const part of message.parts) {
+        const type = part.type as string;
+        if (!isOnboardingToolType(type)) continue;
+        const p = part as ToolPart;
+        if (p.state !== "output-available") continue;
+        const callId = p.toolCallId ?? `${message.id}:${type}`;
+        if (discoveredRef.current.has(callId)) continue;
+        discoveredRef.current.add(callId);
+
+        const output = p.output ?? {};
+        // `type` is validated by isOnboardingToolType above; the streamed output
+        // is loosely typed, so assert the discriminated-union member here.
+        discovered.push({
+          id: callId,
+          type,
+          output,
+          label: toolLabel(type, output),
+        } as OnboardingToolEvent);
+      }
+    }
+
+    if (!discovered.length) return;
+    setAssemblyObservedTurn(true);
+
+    if (phase === "assembling") {
+      setPendingEvents((current) => [...current, ...discovered]);
+      return;
+    }
+
+    setVisibleToolCallIds((current) => {
+      const next = new Set(current);
+      for (const event of discovered) next.add(event.id);
+      return next;
+    });
+    for (const event of discovered) applyEvent(event);
+  }, [applyEvent, messages, phase]);
+
+  useEffect(() => {
+    if (phase !== "assembling" || pendingEvents.length === 0) return;
+
+    const timeout = window.setTimeout(
+      () => {
+        const [nextEvent] = pendingEvents;
+        setPendingEvents((current) => current.slice(1));
+        setRevealedEvents((current) => [...current, nextEvent]);
+        setVisibleToolCallIds((current) => {
+          const next = new Set(current);
+          next.add(nextEvent.id);
+          return next;
+        });
+        applyEvent(nextEvent);
+      },
+      revealedEvents.length === 0 ? FIRST_REVEAL_MS : NEXT_REVEAL_MS,
+    );
+
+    return () => window.clearTimeout(timeout);
+  }, [applyEvent, pendingEvents, phase, revealedEvents.length]);
+
+  useEffect(() => {
+    if (phase !== "assembling" || busy || pendingEvents.length > 0) return;
+    if (!assemblyObservedTurn) return;
+
+    const timeout = window.setTimeout(
+      () => setPhase("review"),
+      ASSEMBLY_SETTLE_MS,
+    );
+    return () => window.clearTimeout(timeout);
+  }, [assemblyObservedTurn, busy, pendingEvents.length, phase]);
+
+  const handleHeroSubmit = (text: string) => {
+    const trimmed = text.trim();
+    if (!trimmed || busy) return;
+    assemblyStartMessageCountRef.current = messages.length;
+    setAssemblyObservedTurn(false);
+    setPendingEvents([]);
+    setRevealedEvents([]);
+    setPhase("assembling");
+    sendMessage({ text: trimmed });
+    setInput("");
+  };
+
+  const handleCopilotSend = (text: string) => {
+    const trimmed = text.trim();
+    if (!trimmed || busy) return;
+    sendMessage({ text: trimmed });
+    setInput("");
+  };
+
+  const handleManual = () => {
+    reset();
+    setPendingEvents([]);
+    setRevealedEvents([]);
+    setPhase("review");
+  };
+
+  return (
+    <div className="flex h-dvh flex-col overflow-hidden bg-[var(--background)] text-[var(--foreground)]">
+      {(phase === "hero" || phase === "assembling") && (
+        <div className="fixed right-4 top-4 z-20">
+          <ModeToggle />
+        </div>
+      )}
+      {phase !== "hero" && phase !== "assembling" && (
+        <header className="flex h-12 shrink-0 items-center justify-between px-5">
+          <div className="flex items-center gap-3">
+            <span className="text-xs font-semibold uppercase tracking-widest text-[var(--foreground)]">
+              Argus setup
+            </span>
+            <Link
+              href="/watch"
+              className="text-xs text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)]"
+            >
+              Skip to dashboard
+            </Link>
+          </div>
+          <ModeToggle />
+        </header>
+      )}
+
+      <AnimatePresence mode="wait">
+        {phase === "hero" && (
+          <motion.div
+            key="hero"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          >
+            <OnboardingHero
+              input={input}
+              status={status}
+              onInputChange={setInput}
+              onSubmit={handleHeroSubmit}
+              onManual={handleManual}
+            />
+          </motion.div>
+        )}
+
+        {phase === "assembling" && (
+          <motion.div
+            key="assembling"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          >
+            <AssemblySequence events={revealedEvents} busy={busy} />
+          </motion.div>
+        )}
+
+        {phase === "review" && (
+          <motion.div
+            key="review"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="flex h-[calc(100dvh-3rem)] min-h-0 flex-col overflow-hidden lg:flex-row"
+          >
+            <div className="min-h-0 flex-1 overflow-y-auto">
+              <ReviewCanvas
+                session={session}
+                onConfirm={() => setPhase("confirm")}
+              />
+            </div>
+            <CollapsibleCopilotPanel
+              messages={messages}
+              status={status}
+              input={input}
+              onInputChange={setInput}
+              onSend={handleCopilotSend}
+              visibleToolCallIds={visibleToolCallIds}
+            />
+          </motion.div>
+        )}
+
+        {phase === "confirm" && (
+          <motion.div
+            key="confirm"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="flex-1"
+          >
+            <ConfirmLaunch
+              session={session}
+              finishing={finishing}
+              onBack={() => setPhase("review")}
+              onLaunch={handleFinish}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <AnimatePresence>
+        {finishing && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 flex flex-col items-center justify-center gap-4 bg-[var(--background)]/90 backdrop-blur"
+          >
+            <motion.span
+              initial={{ scale: 0.6, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              className="flex size-14 items-center justify-center rounded-full bg-[var(--primary)] text-white"
+            >
+              <IconCheck className="size-7" />
+            </motion.span>
+            <p className="text-lg font-medium text-[var(--foreground)]">
+              {session.orgName ?? "Your workspace"} is ready
+            </p>
+            <p className="text-sm text-[var(--muted-foreground)]">
+              Taking you to the live dashboard...
+            </p>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/components/onboarding/review-canvas.tsx b/components/onboarding/review-canvas.tsx
new file mode 100644
index 0000000..1bc26cb
--- /dev/null
+++ b/components/onboarding/review-canvas.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import {
+  IconBell,
+  IconBuilding,
+  IconDeviceCctv,
+  IconShieldCheck,
+} from "@tabler/icons-react";
+import { motion } from "framer-motion";
+import { sectionCompletion } from "@/components/onboarding/completion";
+import {
+  AlertsSection,
+  CamerasSection,
+  OrgSection,
+  RulesSection,
+} from "@/components/onboarding/onboarding-sections";
+import { Button } from "@/components/ui/button";
+import type { DemoSessionState } from "@/lib/demo/session-store";
+import { cn } from "@/lib/utils";
+
+const MARKERS = [
+  {
+    label: "Organization",
+    icon: IconBuilding,
+    barClass: "bg-slate-500",
+    iconClass: "text-slate-600 dark:text-slate-300",
+  },
+  {
+    label: "Cameras",
+    icon: IconDeviceCctv,
+    barClass: "bg-blue-500",
+    iconClass: "text-blue-600 dark:text-blue-300",
+  },
+  {
+    label: "Detection",
+    icon: IconShieldCheck,
+    barClass: "bg-emerald-500",
+    iconClass: "text-emerald-600 dark:text-emerald-300",
+  },
+  {
+    label: "Alerts",
+    icon: IconBell,
+    barClass: "bg-amber-500",
+    iconClass: "text-amber-600 dark:text-amber-300",
+  },
+];
+
+export function ReviewCanvas({
+  session,
+  onConfirm,
+  className,
+}: {
+  session: DemoSessionState;
+  onConfirm: () => void;
+  className?: string;
+}) {
+  const done = sectionCompletion(session);
+  const completed = done.filter(Boolean).length;
+
+  return (
+    <div
+      className={cn(
+        "mx-auto flex w-full max-w-3xl flex-col gap-6 px-5 py-7 pb-24 lg:px-8",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-3">
+        <div className="flex items-end justify-between gap-4">
+          <div>
+            <h1 className="text-2xl font-semibold tracking-tight text-[var(--foreground)]">
+              Review your workspace
+            </h1>
+            <p className="mt-1 text-sm text-[var(--muted-foreground)]">
+              Everything is editable before launch.
+            </p>
+          </div>
+          <span className="shrink-0 text-xs text-[var(--muted-foreground)]">
+            {completed}/{done.length} complete
+          </span>
+        </div>
+
+        <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+          {MARKERS.map((marker, index) => (
+            <motion.div
+              key={marker.label}
+              layout
+              initial={{ opacity: 0, y: 4 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.18, ease: "easeOut" }}
+              className="min-w-0"
+            >
+              <div
+                className={`h-1 rounded-full ${
+                  done[index] ? marker.barClass : "bg-[var(--muted)]"
+                }`}
+              />
+              <div className="mt-2 flex items-center gap-1.5">
+                <marker.icon
+                  className={`size-3.5 ${
+                    done[index]
+                      ? marker.iconClass
+                      : "text-[var(--muted-foreground)]"
+                  }`}
+                />
+                <span
+                  className={`truncate text-xs ${
+                    done[index]
+                      ? "text-[var(--foreground)]"
+                      : "text-[var(--muted-foreground)]"
+                  }`}
+                >
+                  {marker.label}
+                </span>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <OrgSection name={session.orgName} done={done[0]} />
+        <CamerasSection cameras={session.cameras} done={done[1]} />
+        <RulesSection rules={session.detectionRules} done={done[2]} />
+        <AlertsSection prefs={session.alertPrefs} done={done[3]} />
+      </div>
+
+      <div className="sticky bottom-0 -mx-5 bg-[var(--background)]/90 px-5 py-4 backdrop-blur lg:-mx-8 lg:px-8">
+        <Button
+          asChild
+          className="h-auto w-full cursor-pointer bg-slate-900 px-4 py-2.5 text-white shadow-sm hover:bg-slate-700 dark:bg-slate-100 dark:text-slate-950 dark:hover:bg-white"
+        >
+          <motion.button
+            type="button"
+            onClick={onConfirm}
+            whileTap={{ scale: 0.99 }}
+          >
+            Continue to launch
+          </motion.button>
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/components/onboarding/status.ts b/components/onboarding/status.ts
new file mode 100644
index 0000000..a6b83c7
--- /dev/null
+++ b/components/onboarding/status.ts
@@ -0,0 +1,4 @@
+/** A chat is "busy" while a request is in flight or a response is streaming. */
+export function isBusy(status: string): boolean {
+  return status === "streaming" || status === "submitted";
+}
diff --git a/components/onboarding/suggestion-cards.tsx b/components/onboarding/suggestion-cards.tsx
new file mode 100644
index 0000000..fe12cb2
--- /dev/null
+++ b/components/onboarding/suggestion-cards.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { SUGGESTIONS } from "@/components/onboarding/constants";
+import { cn } from "@/lib/utils";
+
+interface SuggestionCardsProps {
+  onSelect: (suggestion: string) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * Grid of example prompts. Selecting one submits it. Call sites control the
+ * grid columns via `className` (e.g. `sm:grid-cols-3` on the hero).
+ */
+export function SuggestionCards({
+  onSelect,
+  disabled = false,
+  className,
+}: SuggestionCardsProps) {
+  return (
+    <div className={cn("grid w-full gap-2", className)}>
+      {SUGGESTIONS.map((suggestion) => (
+        <motion.button
+          key={suggestion}
+          type="button"
+          onClick={() => onSelect(suggestion)}
+          disabled={disabled}
+          whileHover={{ y: -2 }}
+          whileTap={{ scale: 0.99 }}
+          transition={{ duration: 0.16, ease: "easeOut" }}
+          className="cursor-pointer rounded-lg bg-card px-3.5 py-3 text-left text-muted-foreground text-xs leading-5 shadow-sm ring-1 ring-black/5 transition-colors hover:bg-accent hover:text-foreground disabled:opacity-50 dark:ring-white/10"
+        >
+          {suggestion}
+        </motion.button>
+      ))}
+    </div>
+  );
+}
diff --git a/components/page-container.tsx b/components/page-container.tsx
new file mode 100644
index 0000000..c5a7593
--- /dev/null
+++ b/components/page-container.tsx
@@ -0,0 +1,26 @@
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+interface PageContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  bleed?: boolean;
+}
+
+export function PageContainer({
+  className,
+  bleed = false,
+  children,
+  ...props
+}: PageContainerProps) {
+  return (
+    <div
+      className={cn(
+        "@container/main mx-auto flex w-full min-h-0 flex-1 flex-col gap-6 px-6 py-6 sm:px-10 lg:px-12 lg:py-8",
+        !bleed && "max-w-[1500px]",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/components/page-header.tsx b/components/page-header.tsx
new file mode 100644
index 0000000..33c3974
--- /dev/null
+++ b/components/page-header.tsx
@@ -0,0 +1,39 @@
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+interface PageHeaderProps {
+  title: React.ReactNode;
+  description?: string;
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+export function PageHeader({
+  title,
+  description,
+  actions,
+  className,
+}: PageHeaderProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-2">
+        <h1 className="font-semibold text-3xl sm:text-4xl tracking-tight text-balance">
+          {title}
+        </h1>
+        {description && (
+          <p className="text-base text-muted-foreground text-pretty max-w-[60ch]">
+            {description}
+          </p>
+        )}
+      </div>
+      {actions && (
+        <div className="flex items-center gap-2 sm:shrink-0">{actions}</div>
+      )}
+    </div>
+  );
+}
diff --git a/components/site-footer.tsx b/components/site-footer.tsx
index a4fb290..a8d9281 100644
--- a/components/site-footer.tsx
+++ b/components/site-footer.tsx
@@ -1,33 +1,75 @@
-"use client";
+import { cn } from "@/lib/utils";
 
-export function SiteFooter() {
+const contributors = [
+  {
+    n: "01",
+    name: "Carson Spriggs-Audet",
+    links: [
+      { label: "LinkedIn", href: "https://www.linkedin.com/in/carsonspriggs" },
+      { label: "GitHub", href: "https://github.com/carsonSgit" },
+    ],
+  },
+  {
+    n: "02",
+    name: "Marcus Lee",
+    links: [
+      { label: "LinkedIn", href: "https://www.linkedin.com/in/marcus-m-lee/" },
+      { label: "GitHub", href: "https://github.com/godpuffin" },
+    ],
+  },
+];
+
+export function SiteFooter({ className }: { className?: string }) {
   return (
-    <footer className="relative z-20">
-      <div className="container mx-auto px-4">
-        <div className="py-12 flex flex-col items-center gap-6">
-          <h3 className="text-2xl font-bold tracking-widest">ARGUS</h3>
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 w-full max-w-2xl">
-            <div className="text-center">
-              <p className="text-sm text-muted-foreground">Built by</p>
-              <p className="font-medium text-foreground">Carson Spriggs-Audet</p>
-              <div className="mt-2 flex items-center justify-center gap-4 text-sm">
-                <a href="https://www.linkedin.com/in/carsonspriggs" target="_blank" rel="noreferrer" className="text-muted-foreground hover:text-foreground underline-offset-4 hover:underline">LinkedIn</a>
-                <a href="https://github.com/carsonSgit" target="_blank" rel="noreferrer" className="text-muted-foreground hover:text-foreground underline-offset-4 hover:underline">GitHub</a>
-              </div>
+    <footer
+      className={cn(
+        "w-full bg-background text-foreground border-t border-border",
+        className,
+      )}
+    >
+      <div className="max-w-[1500px] mx-auto px-6 sm:px-10 lg:px-12 py-16 lg:py-20">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-12 items-start">
+          <div className="lg:col-span-5">
+            <div className="font-semibold text-5xl sm:text-6xl lg:text-7xl tracking-tight">
+              ARGUS
             </div>
-            <div className="text-center">
-              <p className="text-sm text-muted-foreground">Built by</p>
-              <p className="font-medium text-foreground">Marcus Lee</p>
-              <div className="mt-2 flex items-center justify-center gap-4 text-sm">
-                <a href="https://www.linkedin.com/in/marcus-m-lee/" target="_blank" rel="noreferrer" className="text-muted-foreground hover:text-foreground underline-offset-4 hover:underline">LinkedIn</a>
-                <a href="https://github.com/godpuffin" target="_blank" rel="noreferrer" className="text-muted-foreground hover:text-foreground underline-offset-4 hover:underline">GitHub</a>
-              </div>
+            <p className="mt-6 text-sm text-muted-foreground max-w-[36ch] text-pretty">
+              Computer vision, analytics, and an AI assistant — watching your
+              streams so you don&apos;t have to.
+            </p>
+          </div>
+
+          <div className="lg:col-span-7 lg:pl-8 lg:border-l border-border">
+            <div className="grid grid-cols-2 gap-px bg-border border border-border">
+              {contributors.map((p) => (
+                <div key={p.n} className="bg-background p-6">
+                  <div className="font-semibold text-xl tracking-tight">
+                    {p.name}
+                  </div>
+                  <div className="mt-3 flex gap-4">
+                    {p.links.map((l) => (
+                      <a
+                        key={l.label}
+                        href={l.href}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="text-xs text-muted-foreground hover:text-foreground underline-offset-4 hover:underline"
+                      >
+                        {l.label}
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              ))}
             </div>
           </div>
         </div>
+
+        <div className="mt-10 pt-4 border-t border-border flex items-center justify-between text-[10px] tracking-widest uppercase text-muted-foreground">
+          <span>© {new Date().getFullYear()} Argus</span>
+          <span>v1.0</span>
+        </div>
       </div>
     </footer>
   );
 }
-
-
diff --git a/components/site-header.tsx b/components/site-header.tsx
index 4e0a90a..81fcc46 100644
--- a/components/site-header.tsx
+++ b/components/site-header.tsx
@@ -1,23 +1,21 @@
-import { Separator } from "@/components/ui/separator";
+import { DemoBadge } from "@/components/demo/demo-disabled-notice";
 import { SidebarTrigger } from "@/components/ui/sidebar";
+import { isDemoMode } from "@/lib/demo/flag";
 
 export function SiteHeader({
   title = "Argus",
   children,
-}: {
+}: Readonly<{
   title?: string;
   children?: React.ReactNode;
-}) {
+}>) {
   return (
-    <header className="flex h-14 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear">
-      <div className="flex w-full items-center justify-between gap-1 px-4 lg:gap-2 lg:px-6">
-        <div className="flex items-center gap-1 lg:gap-2">
+    <header className="flex h-12 shrink-0 items-center gap-2 border-b border-border/50 transition-[width,height] ease-linear">
+      <div className="flex w-full items-center justify-between px-4 lg:px-6">
+        <div className="flex items-center gap-3">
           <SidebarTrigger className="-ml-1" />
-          <Separator
-            orientation="vertical"
-            className="mx-2 data-[orientation=vertical]:h-4"
-          />
-          <h1 className="text-base font-medium">{title}</h1>
+          <h1 className="text-sm font-medium text-muted-foreground">{title}</h1>
+          {isDemoMode && <DemoBadge />}
         </div>
         {children && <div className="flex items-center gap-2">{children}</div>}
       </div>
diff --git a/components/stats/asset-duration-chart.tsx b/components/stats/asset-duration-chart.tsx
index 66f1646..50f74fb 100644
--- a/components/stats/asset-duration-chart.tsx
+++ b/components/stats/asset-duration-chart.tsx
@@ -8,14 +8,8 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import {
-  LuxeCard as Card,
-  LuxeCardContent as CardContent,
-  LuxeCardDescription as CardDescription,
-  LuxeCardHeader as CardHeader,
-  LuxeCardTitle as CardTitle,
-} from "@/components/ui/luxe-card";
-import { ChartBackground } from "./chart-background";
+import { useChartAnimation } from "@/hooks/use-chart-animation";
+import { ChartShell } from "./chart-shell";
 
 interface AssetDurationChartProps {
   data: Array<{ range: string; count: number }>;
@@ -29,56 +23,47 @@ const chartConfig = {
 };
 
 export function AssetDurationChart({ data }: AssetDurationChartProps) {
+  const chartAnimation = useChartAnimation("asset-duration");
   const chartData = data.map((item) => ({
     range: item.range,
     count: item.count,
   }));
 
   const total = data.reduce((sum, item) => sum + item.count, 0);
-  const maxCount = Math.max(...data.map((d) => d.count), 0);
 
   return (
-    <Card variant="revealed-pointer">
-      <CardHeader>
-        <CardTitle>Recording Length Distribution</CardTitle>
-        <CardDescription>
-          {total > 0
-            ? `Duration breakdown of ${total.toLocaleString()} recordings`
-            : "No recording data yet"}
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pb-6">
-        <ChartBackground>
-          {chartData.length > 0 ? (
-            <ChartContainer config={chartConfig} className="h-[300px] w-full">
-              <LineChart data={chartData} margin={{ left: 0, right: 10 }}>
-                <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
-                <XAxis
-                  dataKey="range"
-                  stroke="hsl(var(--muted-foreground))"
-                  fontSize={12}
-                />
-                <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
-                <ChartTooltip content={<ChartTooltipContent />} />
-                <ChartLegend content={<ChartLegendContent />} />
-                <Line
-                  type="monotone"
-                  dataKey="count"
-                  stroke={chartConfig.count.color}
-                  strokeWidth={3}
-                  dot={{ r: 4, strokeWidth: 2, fill: chartConfig.count.color }}
-                  activeDot={{ r: 6 }}
-                  animationDuration={800}
-                />
-              </LineChart>
-            </ChartContainer>
-          ) : (
-            <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-              No recording duration data available
-            </div>
-          )}
-        </ChartBackground>
-      </CardContent>
-    </Card>
+    <ChartShell
+      title="Recording Length Distribution"
+      description={
+        total > 0
+          ? `Duration breakdown of ${total.toLocaleString()} recordings`
+          : "No recording data yet"
+      }
+      isEmpty={chartData.length === 0}
+      emptyMessage="No recording duration data available"
+    >
+      <ChartContainer config={chartConfig} className="h-[300px] w-full">
+        <LineChart data={chartData} margin={{ left: 0, right: 10 }}>
+          <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
+          <XAxis
+            dataKey="range"
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={12}
+          />
+          <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <ChartLegend content={<ChartLegendContent />} />
+          <Line
+            type="monotone"
+            dataKey="count"
+            stroke={chartConfig.count.color}
+            strokeWidth={3}
+            dot={{ r: 4, strokeWidth: 2, fill: chartConfig.count.color }}
+            activeDot={{ r: 6 }}
+            {...chartAnimation}
+          />
+        </LineChart>
+      </ChartContainer>
+    </ChartShell>
   );
 }
diff --git a/components/stats/camera-activity-chart.tsx b/components/stats/camera-activity-chart.tsx
index 6243b4d..29db412 100644
--- a/components/stats/camera-activity-chart.tsx
+++ b/components/stats/camera-activity-chart.tsx
@@ -6,95 +6,71 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import {
-  LuxeCard as Card,
-  LuxeCardContent as CardContent,
-  LuxeCardDescription as CardDescription,
-  LuxeCardHeader as CardHeader,
-  LuxeCardTitle as CardTitle,
-} from "@/components/ui/luxe-card";
+import { useChartAnimation } from "@/hooks/use-chart-animation";
 import { getColorblindSafeColor } from "@/lib/chart-colors";
-import { ChartBackground } from "./chart-background";
+import { buildDynamicChartConfig, ChartShell } from "./chart-shell";
 
 interface CameraActivityChartProps {
   data: Array<{ camera_name: string; event_count: number; camera_id: string }>;
 }
 
 export function CameraActivityChart({ data }: CameraActivityChartProps) {
+  const chartAnimation = useChartAnimation("camera-activity");
   const chartData = data.slice(0, 10).map((item, index) => ({
     camera: item.camera_name,
     jobs: item.event_count,
     fill: getColorblindSafeColor(index),
   }));
 
-  // Build chart config dynamically
-  const chartConfig = chartData.reduce(
-    (acc, item) => {
-      acc[item.camera] = {
-        label: item.camera,
-        color: item.fill,
-      };
-      return acc;
-    },
-    {} as Record<string, { label: string; color: string }>,
+  const chartConfig = buildDynamicChartConfig(
+    chartData,
+    (item) => item.camera,
+    (item) => item.fill,
   );
 
   const total = data.reduce((sum, item) => sum + item.event_count, 0);
 
   return (
-    <Card variant="revealed-pointer">
-      <CardHeader>
-        <CardTitle>Camera Analysis Activity</CardTitle>
-        <CardDescription>
-          {total > 0
-            ? `AI jobs processed per camera (${total.toLocaleString()} total)`
-            : "No camera activity yet"}
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pb-6">
-        <ChartBackground>
-          {chartData.length > 0 ? (
-            <ChartContainer config={chartConfig} className="h-[300px] w-full">
-              <BarChart
-                data={chartData}
-                layout="vertical"
-                margin={{ left: 10, right: 10 }}
-              >
-                <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
-                <XAxis
-                  type="number"
-                  stroke="hsl(var(--muted-foreground))"
-                  fontSize={12}
-                />
-                <YAxis
-                  dataKey="camera"
-                  type="category"
-                  width={120}
-                  stroke="hsl(var(--muted-foreground))"
-                  fontSize={12}
-                />
-                <ChartTooltip
-                  cursor={{ fill: "hsl(var(--muted))" }}
-                  content={<ChartTooltipContent hideLabel />}
-                />
-                <Bar
-                  dataKey="jobs"
-                  radius={[0, 4, 4, 0]}
-                  animationDuration={800}
-                >
-                  {chartData.map((entry) => (
-                    <Cell key={entry.camera} fill={entry.fill} />
-                  ))}
-                </Bar>
-              </BarChart>
-            </ChartContainer>
-          ) : (
-            <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-              No camera activity data available
-            </div>
-          )}
-        </ChartBackground>
-      </CardContent>
-    </Card>
+    <ChartShell
+      title="Camera Analysis Activity"
+      description={
+        total > 0
+          ? `AI jobs processed per camera (${total.toLocaleString()} total)`
+          : "No camera activity yet"
+      }
+      isEmpty={chartData.length === 0}
+      emptyMessage="No camera activity data available"
+    >
+      <ChartContainer config={chartConfig} className="h-[300px] w-full">
+        <BarChart
+          data={chartData}
+          layout="vertical"
+          margin={{ left: 10, right: 10 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
+          <XAxis
+            type="number"
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={12}
+          />
+          <YAxis
+            dataKey="camera"
+            type="category"
+            width={120}
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={12}
+          />
+          <ChartTooltip
+            cursor={{ fill: "hsl(var(--muted))" }}
+            content={<ChartTooltipContent hideLabel />}
+          />
+          <Bar dataKey="jobs" radius={[0, 4, 4, 0]} {...chartAnimation}>
+            {chartData.map((entry) => (
+              <Cell key={entry.camera} fill={entry.fill} />
+            ))}
+          </Bar>
+        </BarChart>
+      </ChartContainer>
+    </ChartShell>
   );
 }
diff --git a/components/stats/chart-shell.tsx b/components/stats/chart-shell.tsx
new file mode 100644
index 0000000..e590ca4
--- /dev/null
+++ b/components/stats/chart-shell.tsx
@@ -0,0 +1,115 @@
+import type * as React from "react";
+import type { ChartConfig } from "@/components/ui/chart";
+import {
+  LuxeCard as Card,
+  LuxeCardContent as CardContent,
+  LuxeCardDescription as CardDescription,
+  LuxeCardHeader as CardHeader,
+  LuxeCardTitle as CardTitle,
+} from "@/components/ui/luxe-card";
+import { cn } from "@/lib/utils";
+import { ChartBackground } from "./chart-background";
+
+interface ChartShellProps {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** When true, the empty placeholder is shown instead of `children`. */
+  isEmpty: boolean;
+  /** Message shown in the empty placeholder. */
+  emptyMessage?: string;
+  className?: string;
+  contentClassName?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * Shared frame for every dashboard chart: a revealed-pointer card with a
+ * header, the framed chart background, and a consistent empty state. Individual
+ * charts only supply their title, copy, an `isEmpty` flag, and the chart body.
+ */
+export function ChartShell({
+  title,
+  description,
+  isEmpty,
+  emptyMessage = "No data available",
+  className,
+  contentClassName,
+  children,
+}: ChartShellProps) {
+  return (
+    <Card variant="revealed-pointer" className={className}>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        {description ? <CardDescription>{description}</CardDescription> : null}
+      </CardHeader>
+      <CardContent className={cn("pb-6", contentClassName)}>
+        <ChartBackground>
+          {isEmpty ? <EmptyChartState message={emptyMessage} /> : children}
+        </ChartBackground>
+      </CardContent>
+    </Card>
+  );
+}
+
+/** Centered placeholder filling a chart's footprint when there is no data. */
+export function EmptyChartState({
+  message = "No data available",
+  className,
+}: {
+  message?: string;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex h-[300px] items-center justify-center text-muted-foreground",
+        className,
+      )}
+    >
+      {message}
+    </div>
+  );
+}
+
+/**
+ * Single-line summary shown beneath a chart, e.g. "Avg 12 events per day".
+ * Pass an already-styled `icon` element; multi-stat footers stay bespoke.
+ */
+export function ChartFootnote({
+  icon,
+  className,
+  children,
+}: {
+  icon?: React.ReactNode;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={cn(
+        "mt-3 flex items-center gap-2 px-2 pb-2 text-sm",
+        className,
+      )}
+    >
+      {icon}
+      <span className="text-muted-foreground">{children}</span>
+    </div>
+  );
+}
+
+/**
+ * Builds a Recharts `ChartConfig` from a row set whose categories are only
+ * known at runtime (camera names, tags, entities, …). `getKey` names each
+ * series and `getColor` supplies its swatch.
+ */
+export function buildDynamicChartConfig<T>(
+  rows: T[],
+  getKey: (row: T) => string,
+  getColor: (row: T) => string,
+): ChartConfig {
+  return rows.reduce<ChartConfig>((acc, row) => {
+    const key = getKey(row);
+    acc[key] = { label: key, color: getColor(row) };
+    return acc;
+  }, {});
+}
diff --git a/components/stats/detection-class-chart.tsx b/components/stats/detection-class-chart.tsx
index 537d731..666d58c 100644
--- a/components/stats/detection-class-chart.tsx
+++ b/components/stats/detection-class-chart.tsx
@@ -1,26 +1,21 @@
 "use client";
 
-import { Cell, Legend, Pie, PieChart } from "recharts";
+import { Pie, PieChart } from "recharts";
 import {
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import {
-  LuxeCard as Card,
-  LuxeCardContent as CardContent,
-  LuxeCardDescription as CardDescription,
-  LuxeCardHeader as CardHeader,
-  LuxeCardTitle as CardTitle,
-} from "@/components/ui/luxe-card";
+import { useChartAnimation } from "@/hooks/use-chart-animation";
 import { DETECTION_CLASS_COLORS } from "@/lib/chart-colors";
-import { ChartBackground } from "./chart-background";
+import { ChartShell } from "./chart-shell";
 
 interface DetectionClassChartProps {
   data: Array<{ class: string; count: number }>;
 }
 
 export function DetectionClassChart({ data }: DetectionClassChartProps) {
+  const chartAnimation = useChartAnimation("detection-class");
   const chartData = data.map((item, index) => ({
     name: item.class,
     value: item.count,
@@ -30,52 +25,39 @@ export function DetectionClassChart({ data }: DetectionClassChartProps) {
   const total = data.reduce((sum, item) => sum + item.count, 0);
 
   return (
-    <Card variant="revealed-pointer">
-      <CardHeader>
-        <CardTitle>Object Detection Classes</CardTitle>
-        <CardDescription>
-          {total > 0
-            ? `Total ${total.toLocaleString()} detections`
-            : "No detections yet"}
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pb-6">
-        <ChartBackground>
-          {total > 0 ? (
-            <ChartContainer
-              config={{}}
-              className="mx-auto aspect-square max-h-[300px] w-full"
-            >
-              <PieChart>
-                <ChartTooltip
-                  cursor={false}
-                  content={<ChartTooltipContent hideLabel />}
-                />
-                <Pie
-                  data={chartData}
-                  dataKey="value"
-                  nameKey="name"
-                  cx="50%"
-                  cy="50%"
-                  innerRadius={60}
-                  outerRadius={90}
-                  strokeWidth={2}
-                  stroke="hsl(var(--background))"
-                  label={({ name, percent }) =>
-                    percent > 0.05 ? `${(percent * 100).toFixed(0)}%` : ""
-                  }
-                  labelLine={false}
-                  paddingAngle={2}
-                />
-              </PieChart>
-            </ChartContainer>
-          ) : (
-            <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-              No detection data available
-            </div>
-          )}
-        </ChartBackground>
-      </CardContent>
-    </Card>
+    <ChartShell
+      title="Object Detection Classes"
+      description={
+        total > 0 ? `Total ${total.toLocaleString()} detections` : "No detections yet"
+      }
+      isEmpty={total === 0}
+      emptyMessage="No detection data available"
+    >
+      <ChartContainer
+        config={{}}
+        className="mx-auto aspect-square max-h-[300px] w-full"
+      >
+        <PieChart>
+          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+          <Pie
+            data={chartData}
+            dataKey="value"
+            nameKey="name"
+            cx="50%"
+            cy="50%"
+            innerRadius={60}
+            outerRadius={90}
+            strokeWidth={2}
+            stroke="hsl(var(--background))"
+            label={({ name, percent }) =>
+              percent > 0.05 ? `${(percent * 100).toFixed(0)}%` : ""
+            }
+            labelLine={false}
+            paddingAngle={2}
+            {...chartAnimation}
+          />
+        </PieChart>
+      </ChartContainer>
+    </ChartShell>
   );
 }
diff --git a/components/stats/detections-by-hour-chart.tsx b/components/stats/detections-by-hour-chart.tsx
index 3b19d6a..7c780f3 100644
--- a/components/stats/detections-by-hour-chart.tsx
+++ b/components/stats/detections-by-hour-chart.tsx
@@ -6,14 +6,8 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import {
-  LuxeCard as Card,
-  LuxeCardContent as CardContent,
-  LuxeCardDescription as CardDescription,
-  LuxeCardHeader as CardHeader,
-  LuxeCardTitle as CardTitle,
-} from "@/components/ui/luxe-card";
-import { ChartBackground } from "./chart-background";
+import { useChartAnimation } from "@/hooks/use-chart-animation";
+import { ChartShell } from "./chart-shell";
 
 interface DetectionsByHourChartProps {
   data: Array<{ timestamp: number; count: number }>;
@@ -27,12 +21,10 @@ const chartConfig = {
 };
 
 export function DetectionsByHourChart({ data }: DetectionsByHourChartProps) {
-  // Group detections by hour
+  const chartAnimation = useChartAnimation("detections-by-hour");
   const hourlyData = new Map<number, number>();
-
   for (const item of data) {
-    const date = new Date(item.timestamp * 1000);
-    const hour = date.getHours();
+    const hour = new Date(item.timestamp * 1000).getHours();
     hourlyData.set(hour, (hourlyData.get(hour) || 0) + item.count);
   }
 
@@ -42,45 +34,36 @@ export function DetectionsByHourChart({ data }: DetectionsByHourChartProps) {
   }));
 
   return (
-    <Card variant="revealed-pointer">
-      <CardHeader>
-        <CardTitle>Detections by Hour</CardTitle>
-        <CardDescription>Hourly detection patterns over time</CardDescription>
-      </CardHeader>
-      <CardContent className="pb-6">
-        <ChartBackground>
-          {data.length > 0 ? (
-            <ChartContainer config={chartConfig} className="h-[300px] w-full">
-              <BarChart data={chartData} margin={{ left: 0, right: 0 }}>
-                <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
-                <XAxis
-                  dataKey="hour"
-                  stroke="hsl(var(--muted-foreground))"
-                  fontSize={11}
-                  angle={-45}
-                  textAnchor="end"
-                  height={60}
-                />
-                <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
-                <ChartTooltip
-                  cursor={{ fill: "hsl(var(--muted))" }}
-                  content={<ChartTooltipContent />}
-                />
-                <Bar
-                  dataKey="count"
-                  fill={chartConfig.count.color}
-                  radius={[4, 4, 0, 0]}
-                  animationDuration={800}
-                />
-              </BarChart>
-            </ChartContainer>
-          ) : (
-            <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-              No hourly data available
-            </div>
-          )}
-        </ChartBackground>
-      </CardContent>
-    </Card>
+    <ChartShell
+      title="Detections by Hour"
+      description="Hourly detection patterns over time"
+      isEmpty={data.length === 0}
+      emptyMessage="No hourly data available"
+    >
+      <ChartContainer config={chartConfig} className="h-[300px] w-full">
+        <BarChart data={chartData} margin={{ left: 0, right: 0 }}>
+          <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
+          <XAxis
+            dataKey="hour"
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={11}
+            angle={-45}
+            textAnchor="end"
+            height={60}
+          />
+          <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
+          <ChartTooltip
+            cursor={{ fill: "hsl(var(--muted))" }}
+            content={<ChartTooltipContent />}
+          />
+          <Bar
+            dataKey="count"
+            fill={chartConfig.count.color}
+            radius={[4, 4, 0, 0]}
+            {...chartAnimation}
+          />
+        </BarChart>
+      </ChartContainer>
+    </ChartShell>
   );
 }
diff --git a/components/stats/detections-timeline-chart.tsx b/components/stats/detections-timeline-chart.tsx
index e1cdad7..bf8cfd1 100644
--- a/components/stats/detections-timeline-chart.tsx
+++ b/components/stats/detections-timeline-chart.tsx
@@ -8,15 +8,9 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import {
-  LuxeCard as Card,
-  LuxeCardContent as CardContent,
-  LuxeCardDescription as CardDescription,
-  LuxeCardHeader as CardHeader,
-  LuxeCardTitle as CardTitle,
-} from "@/components/ui/luxe-card";
+import { useChartAnimation } from "@/hooks/use-chart-animation";
 import { DETECTIONS_TIMELINE_COLORS } from "@/lib/chart-colors";
-import { ChartBackground } from "./chart-background";
+import { ChartFootnote, ChartShell } from "./chart-shell";
 
 interface DetectionsTimelineChartProps {
   data: Array<{ date: string; detections: number; frames: number }>;
@@ -36,6 +30,7 @@ const chartConfig = {
 export function DetectionsTimelineChart({
   data,
 }: DetectionsTimelineChartProps) {
+  const chartAnimation = useChartAnimation("detections-timeline");
   const chartData = data.map((item) => ({
     ...item,
     date: new Date(item.date).toLocaleDateString("en-US", {
@@ -50,59 +45,44 @@ export function DetectionsTimelineChart({
     totalFrames > 0 ? (totalDetections / totalFrames).toFixed(2) : "0";
 
   return (
-    <Card variant="revealed-pointer">
-      <CardHeader>
-        <CardTitle>Detections Timeline</CardTitle>
-        <CardDescription>
-          Daily detection activity and frame processing
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pb-6">
-        <ChartBackground>
-          {chartData.length > 0 ? (
-            <>
-              <ChartContainer config={chartConfig} className="h-[300px] w-full">
-                <LineChart data={chartData} margin={{ left: 0, right: 10 }}>
-                  <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
-                  <XAxis
-                    dataKey="date"
-                    stroke="hsl(var(--muted-foreground))"
-                    fontSize={12}
-                  />
-                  <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
-                  <ChartTooltip content={<ChartTooltipContent />} />
-                  <ChartLegend content={<ChartLegendContent />} />
-                  <Line
-                    type="monotone"
-                    dataKey="detections"
-                    stroke={chartConfig.detections.color}
-                    strokeWidth={3}
-                    dot={{ r: 3, strokeWidth: 2 }}
-                    activeDot={{ r: 5 }}
-                    animationDuration={800}
-                  />
-                  <Line
-                    type="monotone"
-                    dataKey="frames"
-                    stroke={chartConfig.frames.color}
-                    strokeWidth={3}
-                    dot={{ r: 3, strokeWidth: 2 }}
-                    activeDot={{ r: 5 }}
-                    animationDuration={800}
-                  />
-                </LineChart>
-              </ChartContainer>
-              <div className="mt-3 text-sm text-muted-foreground px-2 pb-2">
-                Average {avgPerFrame} detections per frame
-              </div>
-            </>
-          ) : (
-            <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-              No detection timeline data available
-            </div>
-          )}
-        </ChartBackground>
-      </CardContent>
-    </Card>
+    <ChartShell
+      title="Detections Timeline"
+      description="Daily detection activity and frame processing"
+      isEmpty={chartData.length === 0}
+      emptyMessage="No detection timeline data available"
+    >
+      <ChartContainer config={chartConfig} className="h-[300px] w-full">
+        <LineChart data={chartData} margin={{ left: 0, right: 10 }}>
+          <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
+          <XAxis
+            dataKey="date"
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={12}
+          />
+          <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <ChartLegend content={<ChartLegendContent />} />
+          <Line
+            type="monotone"
+            dataKey="detections"
+            stroke={chartConfig.detections.color}
+            strokeWidth={3}
+            dot={{ r: 3, strokeWidth: 2 }}
+            activeDot={{ r: 5 }}
+            {...chartAnimation}
+          />
+          <Line
+            type="monotone"
+            dataKey="frames"
+            stroke={chartConfig.frames.color}
+            strokeWidth={3}
+            dot={{ r: 3, strokeWidth: 2 }}
+            activeDot={{ r: 5 }}
+            {...chartAnimation}
+          />
+        </LineChart>
+      </ChartContainer>
+      <ChartFootnote>Average {avgPerFrame} detections per frame</ChartFootnote>
+    </ChartShell>
   );
 }
diff --git a/components/stats/entity-type-chart.tsx b/components/stats/entity-type-chart.tsx
index 7966d35..8e3939e 100644
--- a/components/stats/entity-type-chart.tsx
+++ b/components/stats/entity-type-chart.tsx
@@ -8,48 +8,25 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import {
-  LuxeCard as Card,
-  LuxeCardContent as CardContent,
-  LuxeCardDescription as CardDescription,
-  LuxeCardHeader as CardHeader,
-  LuxeCardTitle as CardTitle,
-} from "@/components/ui/luxe-card";
+import { useChartAnimation } from "@/hooks/use-chart-animation";
 import { ENTITY_TYPE_COLORS, getEntityTypeColor } from "@/lib/chart-colors";
-import { ChartBackground } from "./chart-background";
+import { ChartShell } from "./chart-shell";
 
 interface EntityTypeChartProps {
   data: Array<{ type: string; count: number }>;
 }
 
 const chartConfig = {
-  person: {
-    label: "Person",
-    color: ENTITY_TYPE_COLORS.person,
-  },
-  object: {
-    label: "Object",
-    color: ENTITY_TYPE_COLORS.object,
-  },
-  location: {
-    label: "Location",
-    color: ENTITY_TYPE_COLORS.location,
-  },
-  vehicle: {
-    label: "Vehicle",
-    color: ENTITY_TYPE_COLORS.vehicle,
-  },
-  animal: {
-    label: "Animal",
-    color: ENTITY_TYPE_COLORS.animal,
-  },
-  unknown: {
-    label: "Unknown",
-    color: ENTITY_TYPE_COLORS.unknown,
-  },
+  person: { label: "Person", color: ENTITY_TYPE_COLORS.person },
+  object: { label: "Object", color: ENTITY_TYPE_COLORS.object },
+  location: { label: "Location", color: ENTITY_TYPE_COLORS.location },
+  vehicle: { label: "Vehicle", color: ENTITY_TYPE_COLORS.vehicle },
+  animal: { label: "Animal", color: ENTITY_TYPE_COLORS.animal },
+  unknown: { label: "Unknown", color: ENTITY_TYPE_COLORS.unknown },
 };
 
 export function EntityTypeChart({ data }: EntityTypeChartProps) {
+  const chartAnimation = useChartAnimation("entity-type");
   const chartData = data.map((item) => ({
     name: item.type,
     value: item.count,
@@ -59,52 +36,41 @@ export function EntityTypeChart({ data }: EntityTypeChartProps) {
   const total = data.reduce((sum, item) => sum + item.count, 0);
 
   return (
-    <Card variant="revealed-pointer">
-      <CardHeader>
-        <CardTitle>Entity Type Distribution</CardTitle>
-        <CardDescription>
-          {total > 0
-            ? `Total ${total.toLocaleString()} entities detected`
-            : "No entities yet"}
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pb-6">
-        <ChartBackground>
-          {total > 0 ? (
-            <ChartContainer
-              config={chartConfig}
-              className="mx-auto aspect-square max-h-[300px] w-full"
-            >
-              <PieChart>
-                <ChartTooltip
-                  cursor={false}
-                  content={<ChartTooltipContent hideLabel />}
-                />
-                <Pie
-                  data={chartData}
-                  dataKey="value"
-                  nameKey="name"
-                  cx="50%"
-                  cy="50%"
-                  innerRadius={60}
-                  outerRadius={90}
-                  strokeWidth={2}
-                  stroke="hsl(var(--background))"
-                  label={({ name, percent }) =>
-                    percent > 0.05 ? `${(percent * 100).toFixed(0)}%` : ""
-                  }
-                  labelLine={false}
-                />
-                <ChartLegend content={<ChartLegendContent />} />
-              </PieChart>
-            </ChartContainer>
-          ) : (
-            <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-              No entity data available
-            </div>
-          )}
-        </ChartBackground>
-      </CardContent>
-    </Card>
+    <ChartShell
+      title="Entity Type Distribution"
+      description={
+        total > 0
+          ? `Total ${total.toLocaleString()} entities detected`
+          : "No entities yet"
+      }
+      isEmpty={total === 0}
+      emptyMessage="No entity data available"
+    >
+      <ChartContainer
+        config={chartConfig}
+        className="mx-auto aspect-square max-h-[300px] w-full"
+      >
+        <PieChart>
+          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+          <Pie
+            data={chartData}
+            dataKey="value"
+            nameKey="name"
+            cx="50%"
+            cy="50%"
+            innerRadius={60}
+            outerRadius={90}
+            strokeWidth={2}
+            stroke="hsl(var(--background))"
+            label={({ name, percent }) =>
+              percent > 0.05 ? `${(percent * 100).toFixed(0)}%` : ""
+            }
+            labelLine={false}
+            {...chartAnimation}
+          />
+          <ChartLegend content={<ChartLegendContent />} />
+        </PieChart>
+      </ChartContainer>
+    </ChartShell>
   );
 }
diff --git a/components/stats/event-severity-chart.tsx b/components/stats/event-severity-chart.tsx
index f1d8389..857af4e 100644
--- a/components/stats/event-severity-chart.tsx
+++ b/components/stats/event-severity-chart.tsx
@@ -8,36 +8,22 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import {
-  LuxeCard as Card,
-  LuxeCardContent as CardContent,
-  LuxeCardDescription as CardDescription,
-  LuxeCardHeader as CardHeader,
-  LuxeCardTitle as CardTitle,
-} from "@/components/ui/luxe-card";
+import { useChartAnimation } from "@/hooks/use-chart-animation";
 import { getSeverityChartColor } from "@/lib/severity-styles";
-import { ChartBackground } from "./chart-background";
+import { ChartShell } from "./chart-shell";
 
 interface EventSeverityChartProps {
   data: Array<{ severity: string; count: number }>;
 }
 
 const chartConfig = {
-  High: {
-    label: "High",
-    color: getSeverityChartColor("High"),
-  },
-  Medium: {
-    label: "Medium",
-    color: getSeverityChartColor("Medium"),
-  },
-  Minor: {
-    label: "Minor",
-    color: getSeverityChartColor("Minor"),
-  },
+  High: { label: "High", color: getSeverityChartColor("High") },
+  Medium: { label: "Medium", color: getSeverityChartColor("Medium") },
+  Minor: { label: "Minor", color: getSeverityChartColor("Minor") },
 };
 
 export function EventSeverityChart({ data }: EventSeverityChartProps) {
+  const chartAnimation = useChartAnimation("event-severity");
   const chartData = data.map((item) => ({
     name: item.severity,
     value: item.count,
@@ -49,52 +35,39 @@ export function EventSeverityChart({ data }: EventSeverityChartProps) {
   const total = data.reduce((sum, item) => sum + item.count, 0);
 
   return (
-    <Card variant="revealed-pointer">
-      <CardHeader>
-        <CardTitle>Event Severity Distribution</CardTitle>
-        <CardDescription>
-          {total > 0
-            ? `Total ${total.toLocaleString()} events`
-            : "No events yet"}
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pb-6">
-        <ChartBackground>
-          {total > 0 ? (
-            <ChartContainer
-              config={chartConfig}
-              className="mx-auto aspect-square max-h-[300px] w-full"
-            >
-              <PieChart>
-                <ChartTooltip
-                  cursor={false}
-                  content={<ChartTooltipContent hideLabel />}
-                />
-                <Pie
-                  data={chartData}
-                  dataKey="value"
-                  nameKey="name"
-                  cx="50%"
-                  cy="50%"
-                  innerRadius={60}
-                  outerRadius={90}
-                  strokeWidth={2}
-                  stroke="hsl(var(--background))"
-                  label={({ name, percent }) =>
-                    percent > 0.05 ? `${(percent * 100).toFixed(0)}%` : ""
-                  }
-                  labelLine={false}
-                />
-                <ChartLegend content={<ChartLegendContent />} />
-              </PieChart>
-            </ChartContainer>
-          ) : (
-            <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-              No event data available
-            </div>
-          )}
-        </ChartBackground>
-      </CardContent>
-    </Card>
+    <ChartShell
+      title="Event Severity Distribution"
+      description={
+        total > 0 ? `Total ${total.toLocaleString()} events` : "No events yet"
+      }
+      isEmpty={total === 0}
+      emptyMessage="No event data available"
+    >
+      <ChartContainer
+        config={chartConfig}
+        className="mx-auto aspect-square max-h-[300px] w-full"
+      >
+        <PieChart>
+          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+          <Pie
+            data={chartData}
+            dataKey="value"
+            nameKey="name"
+            cx="50%"
+            cy="50%"
+            innerRadius={60}
+            outerRadius={90}
+            strokeWidth={2}
+            stroke="hsl(var(--background))"
+            label={({ name, percent }) =>
+              percent > 0.05 ? `${(percent * 100).toFixed(0)}%` : ""
+            }
+            labelLine={false}
+            {...chartAnimation}
+          />
+          <ChartLegend content={<ChartLegendContent />} />
+        </PieChart>
+      </ChartContainer>
+    </ChartShell>
   );
 }
diff --git a/components/stats/event-timeline-chart.tsx b/components/stats/event-timeline-chart.tsx
index fcd3dd7..0bc7701 100644
--- a/components/stats/event-timeline-chart.tsx
+++ b/components/stats/event-timeline-chart.tsx
@@ -7,14 +7,8 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import {
-  LuxeCard as Card,
-  LuxeCardContent as CardContent,
-  LuxeCardDescription as CardDescription,
-  LuxeCardHeader as CardHeader,
-  LuxeCardTitle as CardTitle,
-} from "@/components/ui/luxe-card";
-import { ChartBackground } from "./chart-background";
+import { useChartAnimation } from "@/hooks/use-chart-animation";
+import { ChartFootnote, ChartShell } from "./chart-shell";
 
 interface EventTimelineChartProps {
   data: Array<{ date: string; count: number }>;
@@ -28,6 +22,7 @@ const chartConfig = {
 };
 
 export function EventTimelineChart({ data }: EventTimelineChartProps) {
+  const chartAnimation = useChartAnimation("event-timeline");
   const chartData = data.map((item) => ({
     ...item,
     date: new Date(item.date).toLocaleDateString("en-US", {
@@ -40,70 +35,50 @@ export function EventTimelineChart({ data }: EventTimelineChartProps) {
   const avgPerDay = data.length > 0 ? (total / data.length).toFixed(1) : "0";
 
   return (
-    <Card variant="revealed-pointer">
-      <CardHeader>
-        <CardTitle>Event Timeline</CardTitle>
-        <CardDescription>Daily event detection trends</CardDescription>
-      </CardHeader>
-      <CardContent className="pb-6">
-        <ChartBackground>
-          {chartData.length > 0 ? (
-            <>
-              <ChartContainer config={chartConfig} className="h-[300px] w-full">
-                <AreaChart data={chartData} margin={{ left: 0, right: 10 }}>
-                  <defs>
-                    <linearGradient
-                      id="fillEventCount"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="1"
-                    >
-                      <stop
-                        offset="5%"
-                        stopColor={chartConfig.count.color}
-                        stopOpacity={0.8}
-                      />
-                      <stop
-                        offset="95%"
-                        stopColor={chartConfig.count.color}
-                        stopOpacity={0.1}
-                      />
-                    </linearGradient>
-                  </defs>
-                  <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
-                  <XAxis
-                    dataKey="date"
-                    stroke="hsl(var(--muted-foreground))"
-                    fontSize={12}
-                  />
-                  <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
-                  <ChartTooltip content={<ChartTooltipContent />} />
-                  <Area
-                    type="monotone"
-                    dataKey="count"
-                    stroke={chartConfig.count.color}
-                    strokeWidth={3}
-                    fillOpacity={1}
-                    fill="url(#fillEventCount)"
-                    animationDuration={800}
-                  />
-                </AreaChart>
-              </ChartContainer>
-              <div className="mt-3 flex items-center gap-2 text-sm px-2 pb-2">
-                <TrendingUp className="h-4 w-4 text-red-500" />
-                <span className="text-muted-foreground">
-                  Avg {avgPerDay} events per day
-                </span>
-              </div>
-            </>
-          ) : (
-            <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-              No timeline data available
-            </div>
-          )}
-        </ChartBackground>
-      </CardContent>
-    </Card>
+    <ChartShell
+      title="Event Timeline"
+      description="Daily event detection trends"
+      isEmpty={chartData.length === 0}
+      emptyMessage="No timeline data available"
+    >
+      <ChartContainer config={chartConfig} className="h-[300px] w-full">
+        <AreaChart data={chartData} margin={{ left: 0, right: 10 }}>
+          <defs>
+            <linearGradient id="fillEventCount" x1="0" y1="0" x2="0" y2="1">
+              <stop
+                offset="5%"
+                stopColor={chartConfig.count.color}
+                stopOpacity={0.8}
+              />
+              <stop
+                offset="95%"
+                stopColor={chartConfig.count.color}
+                stopOpacity={0.1}
+              />
+            </linearGradient>
+          </defs>
+          <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
+          <XAxis
+            dataKey="date"
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={12}
+          />
+          <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <Area
+            type="monotone"
+            dataKey="count"
+            stroke={chartConfig.count.color}
+            strokeWidth={3}
+            fillOpacity={1}
+            fill="url(#fillEventCount)"
+            {...chartAnimation}
+          />
+        </AreaChart>
+      </ChartContainer>
+      <ChartFootnote icon={<TrendingUp className="h-4 w-4 text-red-500" />}>
+        Avg {avgPerDay} events per day
+      </ChartFootnote>
+    </ChartShell>
   );
 }
diff --git a/components/stats/event-type-chart.tsx b/components/stats/event-type-chart.tsx
index ba7bf54..ec0a44b 100644
--- a/components/stats/event-type-chart.tsx
+++ b/components/stats/event-type-chart.tsx
@@ -8,96 +8,69 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import {
-  LuxeCard as Card,
-  LuxeCardContent as CardContent,
-  LuxeCardDescription as CardDescription,
-  LuxeCardHeader as CardHeader,
-  LuxeCardTitle as CardTitle,
-} from "@/components/ui/luxe-card";
+import { useChartAnimation } from "@/hooks/use-chart-animation";
 import { EVENT_TYPE_COLORS } from "@/lib/chart-colors";
-import { ChartBackground } from "./chart-background";
+import { buildDynamicChartConfig, ChartShell } from "./chart-shell";
 
 interface EventTypeChartProps {
   data: Array<{ type: string; count: number }>;
 }
 
 export function EventTypeChart({ data }: EventTypeChartProps) {
+  const chartAnimation = useChartAnimation("event-type");
   const chartData = data.slice(0, 8).map((item, index) => ({
     type: item.type,
     count: item.count,
     fill: EVENT_TYPE_COLORS[index % EVENT_TYPE_COLORS.length],
   }));
 
-  // Build chart config dynamically
-  const chartConfig = chartData.reduce(
-    (acc, item) => {
-      acc[item.type] = {
-        label: item.type,
-        color: item.fill,
-      };
-      return acc;
-    },
-    {} as Record<string, { label: string; color: string }>,
+  const chartConfig = buildDynamicChartConfig(
+    chartData,
+    (item) => item.type,
+    (item) => item.fill,
   );
 
   const total = data.reduce((sum, item) => sum + item.count, 0);
 
   return (
-    <Card variant="revealed-pointer">
-      <CardHeader>
-        <CardTitle>Event Types</CardTitle>
-        <CardDescription>
-          {total > 0
-            ? `Distribution of ${total.toLocaleString()} events by type`
-            : "No events yet"}
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pb-6">
-        <ChartBackground>
-          {chartData.length > 0 ? (
-            <ChartContainer config={chartConfig} className="h-[300px] w-full">
-              <BarChart
-                data={chartData}
-                margin={{ left: 10, right: 10, bottom: 20 }}
-              >
-                <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
-                <XAxis
-                  dataKey="type"
-                  stroke="hsl(var(--muted-foreground))"
-                  fontSize={12}
-                  angle={-45}
-                  textAnchor="end"
-                  height={80}
-                />
-                <YAxis
-                  type="number"
-                  stroke="hsl(var(--muted-foreground))"
-                  fontSize={12}
-                />
-                <ChartTooltip
-                  cursor={{ fill: "hsl(var(--muted))" }}
-                  content={<ChartTooltipContent hideLabel />}
-                />
-                <Bar
-                  dataKey="count"
-                  radius={[4, 4, 0, 0]}
-                  animationDuration={800}
-                >
-                  {chartData.map((entry) => (
-                    <Cell key={entry.type} fill={entry.fill} />
-                  ))}
-                </Bar>
-                <ChartLegend content={<ChartLegendContent />} />
-              </BarChart>
-            </ChartContainer>
-          ) : (
-            <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-              No event type data available
-            </div>
-          )}
-        </ChartBackground>
-      </CardContent>
-    </Card>
+    <ChartShell
+      title="Event Types"
+      description={
+        total > 0
+          ? `Distribution of ${total.toLocaleString()} events by type`
+          : "No events yet"
+      }
+      isEmpty={chartData.length === 0}
+      emptyMessage="No event type data available"
+    >
+      <ChartContainer config={chartConfig} className="h-[300px] w-full">
+        <BarChart data={chartData} margin={{ left: 10, right: 10, bottom: 20 }}>
+          <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
+          <XAxis
+            dataKey="type"
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={12}
+            angle={-45}
+            textAnchor="end"
+            height={80}
+          />
+          <YAxis
+            type="number"
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={12}
+          />
+          <ChartTooltip
+            cursor={{ fill: "hsl(var(--muted))" }}
+            content={<ChartTooltipContent hideLabel />}
+          />
+          <Bar dataKey="count" radius={[4, 4, 0, 0]} {...chartAnimation}>
+            {chartData.map((entry) => (
+              <Cell key={entry.type} fill={entry.fill} />
+            ))}
+          </Bar>
+          <ChartLegend content={<ChartLegendContent />} />
+        </BarChart>
+      </ChartContainer>
+    </ChartShell>
   );
 }
diff --git a/components/stats/job-status-chart.tsx b/components/stats/job-status-chart.tsx
index 1f7530d..6681963 100644
--- a/components/stats/job-status-chart.tsx
+++ b/components/stats/job-status-chart.tsx
@@ -1,20 +1,14 @@
 "use client";
 
-import { Cell, Legend, Pie, PieChart, ResponsiveContainer } from "recharts";
+import { Pie, PieChart } from "recharts";
 import {
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import {
-  LuxeCard as Card,
-  LuxeCardContent as CardContent,
-  LuxeCardDescription as CardDescription,
-  LuxeCardHeader as CardHeader,
-  LuxeCardTitle as CardTitle,
-} from "@/components/ui/luxe-card";
+import { useChartAnimation } from "@/hooks/use-chart-animation";
 import { JOB_STATUS_COLORS } from "@/lib/chart-colors";
-import { ChartBackground } from "./chart-background";
+import { ChartShell } from "./chart-shell";
 
 interface JobStatusChartProps {
   data: {
@@ -27,29 +21,15 @@ interface JobStatusChartProps {
 }
 
 const chartConfig = {
-  queued: {
-    label: "Queued",
-    color: JOB_STATUS_COLORS.queued,
-  },
-  processing: {
-    label: "Processing",
-    color: JOB_STATUS_COLORS.processing,
-  },
-  succeeded: {
-    label: "Succeeded",
-    color: JOB_STATUS_COLORS.succeeded,
-  },
-  failed: {
-    label: "Failed",
-    color: JOB_STATUS_COLORS.failed,
-  },
-  dead: {
-    label: "Dead",
-    color: JOB_STATUS_COLORS.dead,
-  },
+  queued: { label: "Queued", color: JOB_STATUS_COLORS.queued },
+  processing: { label: "Processing", color: JOB_STATUS_COLORS.processing },
+  succeeded: { label: "Succeeded", color: JOB_STATUS_COLORS.succeeded },
+  failed: { label: "Failed", color: JOB_STATUS_COLORS.failed },
+  dead: { label: "Dead", color: JOB_STATUS_COLORS.dead },
 };
 
 export function JobStatusChart({ data }: JobStatusChartProps) {
+  const chartAnimation = useChartAnimation("job-status");
   const chartData = [
     { name: "Queued", value: data.queued, fill: chartConfig.queued.color },
     {
@@ -70,49 +50,35 @@ export function JobStatusChart({ data }: JobStatusChartProps) {
     data.queued + data.processing + data.succeeded + data.failed + data.dead;
 
   return (
-    <Card variant="revealed-pointer">
-      <CardHeader>
-        <CardTitle>AI Job Status Distribution</CardTitle>
-        <CardDescription>
-          {total > 0 ? `Total ${total.toLocaleString()} jobs` : "No jobs yet"}
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pb-6">
-        <ChartBackground>
-          {total > 0 ? (
-            <ChartContainer
-              config={chartConfig}
-              className="mx-auto aspect-square max-h-[300px] w-full"
-            >
-              <PieChart>
-                <ChartTooltip
-                  cursor={false}
-                  content={<ChartTooltipContent hideLabel />}
-                />
-                <Pie
-                  data={chartData}
-                  dataKey="value"
-                  nameKey="name"
-                  cx="50%"
-                  cy="50%"
-                  innerRadius={60}
-                  outerRadius={90}
-                  strokeWidth={2}
-                  stroke="hsl(var(--background))"
-                  label={({ name, percent }) =>
-                    percent > 0.05 ? `${(percent * 100).toFixed(0)}%` : ""
-                  }
-                  labelLine={false}
-                />
-              </PieChart>
-            </ChartContainer>
-          ) : (
-            <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-              No data available
-            </div>
-          )}
-        </ChartBackground>
-      </CardContent>
-    </Card>
+    <ChartShell
+      title="AI Job Status Distribution"
+      description={total > 0 ? `Total ${total.toLocaleString()} jobs` : "No jobs yet"}
+      isEmpty={total === 0}
+    >
+      <ChartContainer
+        config={chartConfig}
+        className="mx-auto aspect-square max-h-[300px] w-full"
+      >
+        <PieChart>
+          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+          <Pie
+            data={chartData}
+            dataKey="value"
+            nameKey="name"
+            cx="50%"
+            cy="50%"
+            innerRadius={60}
+            outerRadius={90}
+            strokeWidth={2}
+            stroke="hsl(var(--background))"
+            label={({ name, percent }) =>
+              percent > 0.05 ? `${(percent * 100).toFixed(0)}%` : ""
+            }
+            labelLine={false}
+            {...chartAnimation}
+          />
+        </PieChart>
+      </ChartContainer>
+    </ChartShell>
   );
 }
diff --git a/components/stats/jobs-timeline-chart.tsx b/components/stats/jobs-timeline-chart.tsx
index f74760b..a83f373 100644
--- a/components/stats/jobs-timeline-chart.tsx
+++ b/components/stats/jobs-timeline-chart.tsx
@@ -9,15 +9,9 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import {
-  LuxeCard as Card,
-  LuxeCardContent as CardContent,
-  LuxeCardDescription as CardDescription,
-  LuxeCardHeader as CardHeader,
-  LuxeCardTitle as CardTitle,
-} from "@/components/ui/luxe-card";
+import { useChartAnimation } from "@/hooks/use-chart-animation";
 import { JOBS_TIMELINE_COLORS } from "@/lib/chart-colors";
-import { ChartBackground } from "./chart-background";
+import { ChartFootnote, ChartShell } from "./chart-shell";
 
 interface JobsTimelineChartProps {
   data: Array<{
@@ -29,21 +23,13 @@ interface JobsTimelineChartProps {
 }
 
 const chartConfig = {
-  created: {
-    label: "Created",
-    color: JOBS_TIMELINE_COLORS.created,
-  },
-  succeeded: {
-    label: "Succeeded",
-    color: JOBS_TIMELINE_COLORS.succeeded,
-  },
-  failed: {
-    label: "Failed",
-    color: JOBS_TIMELINE_COLORS.failed,
-  },
+  created: { label: "Created", color: JOBS_TIMELINE_COLORS.created },
+  succeeded: { label: "Succeeded", color: JOBS_TIMELINE_COLORS.succeeded },
+  failed: { label: "Failed", color: JOBS_TIMELINE_COLORS.failed },
 };
 
 export function JobsTimelineChart({ data }: JobsTimelineChartProps) {
+  const chartAnimation = useChartAnimation("jobs-timeline");
   const chartData = data.map((item) => ({
     ...item,
     date: new Date(item.date).toLocaleDateString("en-US", {
@@ -58,71 +44,55 @@ export function JobsTimelineChart({ data }: JobsTimelineChartProps) {
     totalCreated > 0 ? ((totalSucceeded / totalCreated) * 100).toFixed(1) : "0";
 
   return (
-    <Card variant="revealed-pointer">
-      <CardHeader>
-        <CardTitle>Jobs Timeline</CardTitle>
-        <CardDescription>
-          Daily job creation and completion trends
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pb-6">
-        <ChartBackground>
-          {chartData.length > 0 ? (
-            <>
-              <ChartContainer config={chartConfig} className="h-[300px] w-full">
-                <LineChart data={chartData} margin={{ left: 0, right: 10 }}>
-                  <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
-                  <XAxis
-                    dataKey="date"
-                    stroke="hsl(var(--muted-foreground))"
-                    fontSize={12}
-                  />
-                  <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
-                  <ChartTooltip content={<ChartTooltipContent />} />
-                  <ChartLegend content={<ChartLegendContent />} />
-                  <Line
-                    type="monotone"
-                    dataKey="created"
-                    stroke={chartConfig.created.color}
-                    strokeWidth={3}
-                    dot={{ r: 3, strokeWidth: 2 }}
-                    activeDot={{ r: 5 }}
-                    animationDuration={800}
-                  />
-                  <Line
-                    type="monotone"
-                    dataKey="succeeded"
-                    stroke={chartConfig.succeeded.color}
-                    strokeWidth={3}
-                    dot={{ r: 3, strokeWidth: 2 }}
-                    activeDot={{ r: 5 }}
-                    animationDuration={800}
-                  />
-                  <Line
-                    type="monotone"
-                    dataKey="failed"
-                    stroke={chartConfig.failed.color}
-                    strokeWidth={3}
-                    dot={{ r: 3, strokeWidth: 2 }}
-                    activeDot={{ r: 5 }}
-                    animationDuration={800}
-                  />
-                </LineChart>
-              </ChartContainer>
-              <div className="mt-3 flex items-center gap-2 text-sm px-2 pb-2">
-                <TrendingUp className="h-4 w-4 text-green-500" />
-                <span className="text-muted-foreground">
-                  {successRate}% success rate
-                </span>
-              </div>
-            </>
-          ) : (
-            <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-              No timeline data available
-            </div>
-          )}
-        </ChartBackground>
-      </CardContent>
-    </Card>
+    <ChartShell
+      title="Jobs Timeline"
+      description="Daily job creation and completion trends"
+      isEmpty={chartData.length === 0}
+      emptyMessage="No timeline data available"
+    >
+      <ChartContainer config={chartConfig} className="h-[300px] w-full">
+        <LineChart data={chartData} margin={{ left: 0, right: 10 }}>
+          <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
+          <XAxis
+            dataKey="date"
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={12}
+          />
+          <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <ChartLegend content={<ChartLegendContent />} />
+          <Line
+            type="monotone"
+            dataKey="created"
+            stroke={chartConfig.created.color}
+            strokeWidth={3}
+            dot={{ r: 3, strokeWidth: 2 }}
+            activeDot={{ r: 5 }}
+            {...chartAnimation}
+          />
+          <Line
+            type="monotone"
+            dataKey="succeeded"
+            stroke={chartConfig.succeeded.color}
+            strokeWidth={3}
+            dot={{ r: 3, strokeWidth: 2 }}
+            activeDot={{ r: 5 }}
+            {...chartAnimation}
+          />
+          <Line
+            type="monotone"
+            dataKey="failed"
+            stroke={chartConfig.failed.color}
+            strokeWidth={3}
+            dot={{ r: 3, strokeWidth: 2 }}
+            activeDot={{ r: 5 }}
+            {...chartAnimation}
+          />
+        </LineChart>
+      </ChartContainer>
+      <ChartFootnote icon={<TrendingUp className="h-4 w-4 text-green-500" />}>
+        {successRate}% success rate
+      </ChartFootnote>
+    </ChartShell>
   );
 }
diff --git a/components/stats/occupancy-chart.tsx b/components/stats/occupancy-chart.tsx
index 917440f..91a5550 100644
--- a/components/stats/occupancy-chart.tsx
+++ b/components/stats/occupancy-chart.tsx
@@ -7,15 +7,9 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import {
-  LuxeCard as Card,
-  LuxeCardContent as CardContent,
-  LuxeCardDescription as CardDescription,
-  LuxeCardHeader as CardHeader,
-  LuxeCardTitle as CardTitle,
-} from "@/components/ui/luxe-card";
+import { useChartAnimation } from "@/hooks/use-chart-animation";
 import { OCCUPANCY_COLOR } from "@/lib/chart-colors";
-import { ChartBackground } from "./chart-background";
+import { ChartShell } from "./chart-shell";
 
 interface OccupancyChartProps {
   data: Array<{ timestamp: number; count: number }>;
@@ -29,41 +23,32 @@ const chartConfig = {
 };
 
 export function OccupancyChart({ data }: OccupancyChartProps) {
-  // Sample data points for visualization (take every nth point to avoid clutter)
+  const chartAnimation = useChartAnimation("occupancy");
+  // Thin the series to ~100 points so dense streams stay legible.
   const sampleRate = Math.max(1, Math.floor(data.length / 100));
   const sampledData = data.filter((_, index) => index % sampleRate === 0);
 
-  // Check if data spans multiple days
   const timestamps = sampledData.map((d) => d.timestamp * 1000);
   const minTime = Math.min(...timestamps);
   const maxTime = Math.max(...timestamps);
   const spansDays = maxTime - minTime > 24 * 60 * 60 * 1000;
 
+  // Multi-day spans need the date on each tick; single-day spans show time only.
   const chartData = sampledData.map((item) => {
     const date = new Date(item.timestamp * 1000);
-    let timeLabel: string;
-
-    if (spansDays) {
-      // Show date and time for multi-day spans
-      timeLabel = date.toLocaleString("en-US", {
-        month: "short",
-        day: "numeric",
-        hour: "2-digit",
-        minute: "2-digit",
-      });
-    } else {
-      // Show just time for single-day spans
-      timeLabel = date.toLocaleTimeString("en-US", {
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-      });
-    }
-
-    return {
-      time: timeLabel,
-      count: item.count,
-    };
+    const time = spansDays
+      ? date.toLocaleString("en-US", {
+          month: "short",
+          day: "numeric",
+          hour: "2-digit",
+          minute: "2-digit",
+        })
+      : date.toLocaleTimeString("en-US", {
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit",
+        });
+    return { time, count: item.count };
   });
 
   const maxOccupancy = Math.max(...data.map((d) => d.count), 0);
@@ -73,75 +58,58 @@ export function OccupancyChart({ data }: OccupancyChartProps) {
       : "0";
 
   return (
-    <Card variant="revealed-pointer">
-      <CardHeader>
-        <CardTitle>Occupancy Over Time</CardTitle>
-        <CardDescription>
-          People count detected in video streams
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pb-6">
-        <ChartBackground>
-          {chartData.length > 0 ? (
-            <>
-              <ChartContainer config={chartConfig} className="h-[300px] w-full">
-                <AreaChart data={chartData} margin={{ left: 0, right: 10 }}>
-                  <defs>
-                    <linearGradient id="fillCount" x1="0" y1="0" x2="0" y2="1">
-                      <stop
-                        offset="5%"
-                        stopColor={chartConfig.count.color}
-                        stopOpacity={0.8}
-                      />
-                      <stop
-                        offset="95%"
-                        stopColor={chartConfig.count.color}
-                        stopOpacity={0.1}
-                      />
-                    </linearGradient>
-                  </defs>
-                  <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
-                  <XAxis
-                    dataKey="time"
-                    stroke="hsl(var(--muted-foreground))"
-                    fontSize={11}
-                    angle={-45}
-                    textAnchor="end"
-                    height={80}
-                    interval="preserveStartEnd"
-                  />
-                  <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
-                  <ChartTooltip content={<ChartTooltipContent />} />
-                  <Area
-                    type="monotone"
-                    dataKey="count"
-                    stroke={chartConfig.count.color}
-                    strokeWidth={3}
-                    fillOpacity={1}
-                    fill="url(#fillCount)"
-                    animationDuration={800}
-                  />
-                </AreaChart>
-              </ChartContainer>
-              <div className="mt-3 flex items-center gap-4 text-sm px-2 pb-2">
-                <div className="flex items-center gap-2">
-                  <Users className="h-4 w-4 text-muted-foreground" />
-                  <span className="text-muted-foreground">
-                    Avg: {avgOccupancy} people
-                  </span>
-                </div>
-                <span className="text-muted-foreground">
-                  Peak: {maxOccupancy} people
-                </span>
-              </div>
-            </>
-          ) : (
-            <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-              No occupancy data available
-            </div>
-          )}
-        </ChartBackground>
-      </CardContent>
-    </Card>
+    <ChartShell
+      title="Occupancy Over Time"
+      description="People count detected in video streams"
+      isEmpty={chartData.length === 0}
+      emptyMessage="No occupancy data available"
+    >
+      <ChartContainer config={chartConfig} className="h-[300px] w-full">
+        <AreaChart data={chartData} margin={{ left: 0, right: 10 }}>
+          <defs>
+            <linearGradient id="fillCount" x1="0" y1="0" x2="0" y2="1">
+              <stop
+                offset="5%"
+                stopColor={chartConfig.count.color}
+                stopOpacity={0.8}
+              />
+              <stop
+                offset="95%"
+                stopColor={chartConfig.count.color}
+                stopOpacity={0.1}
+              />
+            </linearGradient>
+          </defs>
+          <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
+          <XAxis
+            dataKey="time"
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={11}
+            angle={-45}
+            textAnchor="end"
+            height={80}
+            interval="preserveStartEnd"
+          />
+          <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <Area
+            type="monotone"
+            dataKey="count"
+            stroke={chartConfig.count.color}
+            strokeWidth={3}
+            fillOpacity={1}
+            fill="url(#fillCount)"
+            {...chartAnimation}
+          />
+        </AreaChart>
+      </ChartContainer>
+      <div className="mt-3 flex items-center gap-4 px-2 pb-2 text-sm">
+        <div className="flex items-center gap-2">
+          <Users className="h-4 w-4 text-muted-foreground" />
+          <span className="text-muted-foreground">Avg: {avgOccupancy} people</span>
+        </div>
+        <span className="text-muted-foreground">Peak: {maxOccupancy} people</span>
+      </div>
+    </ChartShell>
   );
 }
diff --git a/components/stats/processing-volume-chart.tsx b/components/stats/processing-volume-chart.tsx
index 981af6b..e23da82 100644
--- a/components/stats/processing-volume-chart.tsx
+++ b/components/stats/processing-volume-chart.tsx
@@ -7,15 +7,9 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import {
-  LuxeCard as Card,
-  LuxeCardContent as CardContent,
-  LuxeCardDescription as CardDescription,
-  LuxeCardHeader as CardHeader,
-  LuxeCardTitle as CardTitle,
-} from "@/components/ui/luxe-card";
+import { useChartAnimation } from "@/hooks/use-chart-animation";
 import { PROCESSING_VOLUME_COLOR } from "@/lib/chart-colors";
-import { ChartBackground } from "./chart-background";
+import { ChartFootnote, ChartShell } from "./chart-shell";
 
 interface ProcessingVolumeChartProps {
   data: Array<{ date: string; volume: number }>;
@@ -29,6 +23,7 @@ const chartConfig = {
 };
 
 export function ProcessingVolumeChart({ data }: ProcessingVolumeChartProps) {
+  const chartAnimation = useChartAnimation("processing-volume");
   const chartData = data.map((item) => ({
     date: new Date(item.date).toLocaleDateString("en-US", {
       month: "short",
@@ -42,64 +37,50 @@ export function ProcessingVolumeChart({ data }: ProcessingVolumeChartProps) {
     data.length > 0 ? (totalVolume / data.length).toFixed(1) : "0";
 
   return (
-    <Card variant="revealed-pointer">
-      <CardHeader>
-        <CardTitle>Processing Volume</CardTitle>
-        <CardDescription>Daily analysis job completion trends</CardDescription>
-      </CardHeader>
-      <CardContent className="pb-6">
-        <ChartBackground>
-          {chartData.length > 0 ? (
-            <>
-              <ChartContainer config={chartConfig} className="h-[300px] w-full">
-                <AreaChart data={chartData} margin={{ left: 0, right: 10 }}>
-                  <defs>
-                    <linearGradient id="fillVolume" x1="0" y1="0" x2="0" y2="1">
-                      <stop
-                        offset="5%"
-                        stopColor={chartConfig.volume.color}
-                        stopOpacity={0.8}
-                      />
-                      <stop
-                        offset="95%"
-                        stopColor={chartConfig.volume.color}
-                        stopOpacity={0.1}
-                      />
-                    </linearGradient>
-                  </defs>
-                  <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
-                  <XAxis
-                    dataKey="date"
-                    stroke="hsl(var(--muted-foreground))"
-                    fontSize={12}
-                  />
-                  <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
-                  <ChartTooltip content={<ChartTooltipContent />} />
-                  <Area
-                    type="monotone"
-                    dataKey="volume"
-                    stroke={chartConfig.volume.color}
-                    strokeWidth={3}
-                    fillOpacity={1}
-                    fill="url(#fillVolume)"
-                    animationDuration={800}
-                  />
-                </AreaChart>
-              </ChartContainer>
-              <div className="mt-3 flex items-center gap-2 text-sm px-2 pb-2">
-                <Activity className="h-4 w-4 text-muted-foreground" />
-                <span className="text-muted-foreground">
-                  Average {avgDaily} jobs per day
-                </span>
-              </div>
-            </>
-          ) : (
-            <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-              No processing volume data available
-            </div>
-          )}
-        </ChartBackground>
-      </CardContent>
-    </Card>
+    <ChartShell
+      title="Processing Volume"
+      description="Daily analysis job completion trends"
+      isEmpty={chartData.length === 0}
+      emptyMessage="No processing volume data available"
+    >
+      <ChartContainer config={chartConfig} className="h-[300px] w-full">
+        <AreaChart data={chartData} margin={{ left: 0, right: 10 }}>
+          <defs>
+            <linearGradient id="fillVolume" x1="0" y1="0" x2="0" y2="1">
+              <stop
+                offset="5%"
+                stopColor={chartConfig.volume.color}
+                stopOpacity={0.8}
+              />
+              <stop
+                offset="95%"
+                stopColor={chartConfig.volume.color}
+                stopOpacity={0.1}
+              />
+            </linearGradient>
+          </defs>
+          <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
+          <XAxis
+            dataKey="date"
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={12}
+          />
+          <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <Area
+            type="monotone"
+            dataKey="volume"
+            stroke={chartConfig.volume.color}
+            strokeWidth={3}
+            fillOpacity={1}
+            fill="url(#fillVolume)"
+            {...chartAnimation}
+          />
+        </AreaChart>
+      </ChartContainer>
+      <ChartFootnote icon={<Activity className="h-4 w-4 text-muted-foreground" />}>
+        Average {avgDaily} jobs per day
+      </ChartFootnote>
+    </ChartShell>
   );
 }
diff --git a/components/stats/stream-status-chart.tsx b/components/stats/stream-status-chart.tsx
index b3735d0..78d925f 100644
--- a/components/stats/stream-status-chart.tsx
+++ b/components/stats/stream-status-chart.tsx
@@ -6,15 +6,9 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import {
-  LuxeCard as Card,
-  LuxeCardContent as CardContent,
-  LuxeCardDescription as CardDescription,
-  LuxeCardHeader as CardHeader,
-  LuxeCardTitle as CardTitle,
-} from "@/components/ui/luxe-card";
+import { useChartAnimation } from "@/hooks/use-chart-animation";
 import { STREAM_STATUS_COLORS } from "@/lib/chart-colors";
-import { ChartBackground } from "./chart-background";
+import { ChartShell } from "./chart-shell";
 
 interface StreamStatusChartProps {
   data: {
@@ -25,78 +19,53 @@ interface StreamStatusChartProps {
 }
 
 const chartConfig = {
-  active: {
-    label: "Active",
-    color: STREAM_STATUS_COLORS.active,
-  },
-  idle: {
-    label: "Idle",
-    color: STREAM_STATUS_COLORS.idle,
-  },
-  disabled: {
-    label: "Disabled",
-    color: STREAM_STATUS_COLORS.disabled,
-  },
+  active: { label: "Active", color: STREAM_STATUS_COLORS.active },
+  idle: { label: "Idle", color: STREAM_STATUS_COLORS.idle },
+  disabled: { label: "Disabled", color: STREAM_STATUS_COLORS.disabled },
 };
 
 export function StreamStatusChart({ data }: StreamStatusChartProps) {
+  const chartAnimation = useChartAnimation("stream-status");
   const chartData = [
     { name: "Active", value: data.active, fill: chartConfig.active.color },
     { name: "Idle", value: data.idle, fill: chartConfig.idle.color },
-    {
-      name: "Disabled",
-      value: data.disabled,
-      fill: chartConfig.disabled.color,
-    },
+    { name: "Disabled", value: data.disabled, fill: chartConfig.disabled.color },
   ].filter((item) => item.value > 0);
 
   const total = data.active + data.idle + data.disabled;
 
   return (
-    <Card variant="revealed-pointer">
-      <CardHeader>
-        <CardTitle>Stream Status</CardTitle>
-        <CardDescription>
-          {total > 0 ? `Total ${total} streams` : "No streams configured"}
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pb-6">
-        <ChartBackground>
-          {total > 0 ? (
-            <ChartContainer
-              config={chartConfig}
-              className="mx-auto aspect-square max-h-[300px] w-full"
-            >
-              <PieChart>
-                <ChartTooltip
-                  cursor={false}
-                  content={<ChartTooltipContent hideLabel />}
-                />
-                <Pie
-                  data={chartData}
-                  dataKey="value"
-                  nameKey="name"
-                  cx="50%"
-                  cy="50%"
-                  innerRadius={60}
-                  outerRadius={90}
-                  strokeWidth={2}
-                  stroke="hsl(var(--background))"
-                  label={({ name, percent }) =>
-                    percent > 0.05 ? `${(percent * 100).toFixed(0)}%` : ""
-                  }
-                  labelLine={false}
-                  paddingAngle={2}
-                />
-              </PieChart>
-            </ChartContainer>
-          ) : (
-            <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-              No stream data available
-            </div>
-          )}
-        </ChartBackground>
-      </CardContent>
-    </Card>
+    <ChartShell
+      title="Stream Status"
+      description={total > 0 ? `Total ${total} streams` : "No streams configured"}
+      isEmpty={total === 0}
+      emptyMessage="No stream data available"
+    >
+      <ChartContainer
+        config={chartConfig}
+        className="mx-auto aspect-square max-h-[300px] w-full"
+      >
+        <PieChart>
+          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+          <Pie
+            data={chartData}
+            dataKey="value"
+            nameKey="name"
+            cx="50%"
+            cy="50%"
+            innerRadius={60}
+            outerRadius={90}
+            strokeWidth={2}
+            stroke="hsl(var(--background))"
+            label={({ name, percent }) =>
+              percent > 0.05 ? `${(percent * 100).toFixed(0)}%` : ""
+            }
+            labelLine={false}
+            paddingAngle={2}
+            {...chartAnimation}
+          />
+        </PieChart>
+      </ChartContainer>
+    </ChartShell>
   );
 }
diff --git a/components/stats/top-entities-chart.tsx b/components/stats/top-entities-chart.tsx
index c3f507b..013e004 100644
--- a/components/stats/top-entities-chart.tsx
+++ b/components/stats/top-entities-chart.tsx
@@ -8,21 +8,16 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import {
-  LuxeCard as Card,
-  LuxeCardContent as CardContent,
-  LuxeCardDescription as CardDescription,
-  LuxeCardHeader as CardHeader,
-  LuxeCardTitle as CardTitle,
-} from "@/components/ui/luxe-card";
+import { useChartAnimation } from "@/hooks/use-chart-animation";
 import { getEntityTypeColor } from "@/lib/chart-colors";
-import { ChartBackground } from "./chart-background";
+import { buildDynamicChartConfig, ChartShell } from "./chart-shell";
 
 interface TopEntitiesChartProps {
   data: Array<{ entity: string; count: number; type?: string }>;
 }
 
 export function TopEntitiesChart({ data }: TopEntitiesChartProps) {
+  const chartAnimation = useChartAnimation("top-entities");
   const total = data.reduce((sum, item) => sum + item.count, 0);
   const topData = data.slice(0, 10).map((item) => ({
     entity: item.entity,
@@ -30,73 +25,50 @@ export function TopEntitiesChart({ data }: TopEntitiesChartProps) {
     fill: item.type ? getEntityTypeColor(item.type) : "hsl(0, 0%, 50%)",
   }));
 
-  // Build chart config dynamically
-  const chartConfig = topData.reduce(
-    (acc, item) => {
-      acc[item.entity] = {
-        label: item.entity,
-        color: item.fill,
-      };
-      return acc;
-    },
-    {} as Record<string, { label: string; color: string }>,
+  const chartConfig = buildDynamicChartConfig(
+    topData,
+    (item) => item.entity,
+    (item) => item.fill,
   );
 
   return (
-    <Card variant="revealed-pointer">
-      <CardHeader>
-        <CardTitle>Top Detected Entities</CardTitle>
-        <CardDescription>
-          {total > 0
-            ? `Most frequently detected entities (${total.toLocaleString()} total)`
-            : "No entities yet"}
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pb-6">
-        <ChartBackground>
-          {topData.length > 0 ? (
-            <ChartContainer config={chartConfig} className="h-[300px] w-full">
-              <BarChart
-                data={topData}
-                layout="vertical"
-                margin={{ left: 10, right: 10 }}
-              >
-                <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
-                <XAxis
-                  type="number"
-                  stroke="hsl(var(--muted-foreground))"
-                  fontSize={12}
-                />
-                <YAxis
-                  dataKey="entity"
-                  type="category"
-                  width={100}
-                  stroke="hsl(var(--muted-foreground))"
-                  fontSize={12}
-                />
-                <ChartTooltip
-                  cursor={{ fill: "hsl(var(--muted))" }}
-                  content={<ChartTooltipContent hideLabel />}
-                />
-                <Bar
-                  dataKey="count"
-                  radius={[0, 4, 4, 0]}
-                  animationDuration={800}
-                >
-                  {topData.map((entry) => (
-                    <Cell key={entry.entity} fill={entry.fill} />
-                  ))}
-                </Bar>
-                <ChartLegend content={<ChartLegendContent />} />
-              </BarChart>
-            </ChartContainer>
-          ) : (
-            <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-              No entity data available
-            </div>
-          )}
-        </ChartBackground>
-      </CardContent>
-    </Card>
+    <ChartShell
+      title="Top Detected Entities"
+      description={
+        total > 0
+          ? `Most frequently detected entities (${total.toLocaleString()} total)`
+          : "No entities yet"
+      }
+      isEmpty={topData.length === 0}
+      emptyMessage="No entity data available"
+    >
+      <ChartContainer config={chartConfig} className="h-[300px] w-full">
+        <BarChart data={topData} layout="vertical" margin={{ left: 10, right: 10 }}>
+          <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
+          <XAxis
+            type="number"
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={12}
+          />
+          <YAxis
+            dataKey="entity"
+            type="category"
+            width={100}
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={12}
+          />
+          <ChartTooltip
+            cursor={{ fill: "hsl(var(--muted))" }}
+            content={<ChartTooltipContent hideLabel />}
+          />
+          <Bar dataKey="count" radius={[0, 4, 4, 0]} {...chartAnimation}>
+            {topData.map((entry) => (
+              <Cell key={entry.entity} fill={entry.fill} />
+            ))}
+          </Bar>
+          <ChartLegend content={<ChartLegendContent />} />
+        </BarChart>
+      </ChartContainer>
+    </ChartShell>
   );
 }
diff --git a/components/stats/top-tags-chart.tsx b/components/stats/top-tags-chart.tsx
index 7aa4265..46289fd 100644
--- a/components/stats/top-tags-chart.tsx
+++ b/components/stats/top-tags-chart.tsx
@@ -8,92 +8,63 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import {
-  LuxeCard as Card,
-  LuxeCardContent as CardContent,
-  LuxeCardDescription as CardDescription,
-  LuxeCardHeader as CardHeader,
-  LuxeCardTitle as CardTitle,
-} from "@/components/ui/luxe-card";
+import { useChartAnimation } from "@/hooks/use-chart-animation";
 import { getTagColor } from "@/lib/chart-colors";
-import { ChartBackground } from "./chart-background";
+import { buildDynamicChartConfig, ChartShell } from "./chart-shell";
 
 interface TopTagsChartProps {
   data: Array<{ tag: string; count: number }>;
 }
 
 export function TopTagsChart({ data }: TopTagsChartProps) {
+  const chartAnimation = useChartAnimation("top-tags");
   const chartData = data.slice(0, 10).map((item) => ({
     tag: item.tag,
     count: item.count,
     fill: getTagColor(item.tag),
   }));
 
-  // Build chart config dynamically
-  const chartConfig = chartData.reduce(
-    (acc, item) => {
-      acc[item.tag] = {
-        label: item.tag,
-        color: item.fill,
-      };
-      return acc;
-    },
-    {} as Record<string, { label: string; color: string }>,
+  const chartConfig = buildDynamicChartConfig(
+    chartData,
+    (item) => item.tag,
+    (item) => item.fill,
   );
 
   return (
-    <Card variant="revealed-pointer">
-      <CardHeader>
-        <CardTitle>Top AI Analysis Tags</CardTitle>
-        <CardDescription>
-          Most common tags from AI analysis results
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pb-6">
-        <ChartBackground>
-          {chartData.length > 0 ? (
-            <ChartContainer config={chartConfig} className="h-[300px] w-full">
-              <BarChart
-                data={chartData}
-                margin={{ left: 10, right: 10, bottom: 20 }}
-              >
-                <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
-                <XAxis
-                  dataKey="tag"
-                  stroke="hsl(var(--muted-foreground))"
-                  fontSize={12}
-                  angle={-45}
-                  textAnchor="end"
-                  height={80}
-                />
-                <YAxis
-                  type="number"
-                  stroke="hsl(var(--muted-foreground))"
-                  fontSize={12}
-                />
-                <ChartTooltip
-                  cursor={{ fill: "hsl(var(--muted))" }}
-                  content={<ChartTooltipContent hideLabel />}
-                />
-                <Bar
-                  dataKey="count"
-                  radius={[4, 4, 0, 0]}
-                  animationDuration={800}
-                >
-                  {chartData.map((entry) => (
-                    <Cell key={entry.tag} fill={entry.fill} />
-                  ))}
-                </Bar>
-                <ChartLegend content={<ChartLegendContent />} />
-              </BarChart>
-            </ChartContainer>
-          ) : (
-            <div className="flex h-[300px] items-center justify-center text-muted-foreground">
-              No tag data available
-            </div>
-          )}
-        </ChartBackground>
-      </CardContent>
-    </Card>
+    <ChartShell
+      title="Top AI Analysis Tags"
+      description="Most common tags from AI analysis results"
+      isEmpty={chartData.length === 0}
+      emptyMessage="No tag data available"
+    >
+      <ChartContainer config={chartConfig} className="h-[300px] w-full">
+        <BarChart data={chartData} margin={{ left: 10, right: 10, bottom: 20 }}>
+          <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
+          <XAxis
+            dataKey="tag"
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={12}
+            angle={-45}
+            textAnchor="end"
+            height={80}
+          />
+          <YAxis
+            type="number"
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={12}
+          />
+          <ChartTooltip
+            cursor={{ fill: "hsl(var(--muted))" }}
+            content={<ChartTooltipContent hideLabel />}
+          />
+          <Bar dataKey="count" radius={[4, 4, 0, 0]} {...chartAnimation}>
+            {chartData.map((entry) => (
+              <Cell key={entry.tag} fill={entry.fill} />
+            ))}
+          </Bar>
+          <ChartLegend content={<ChartLegendContent />} />
+        </BarChart>
+      </ChartContainer>
+    </ChartShell>
   );
 }
diff --git a/components/stream/stream-controls.tsx b/components/stream/stream-controls.tsx
index 6eef39d..08f303a 100644
--- a/components/stream/stream-controls.tsx
+++ b/components/stream/stream-controls.tsx
@@ -11,8 +11,13 @@ import {
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { isDemoMode } from "@/lib/demo/flag";
+import { cn } from "@/lib/utils";
+
+const DEMO_DISABLED_TITLE = isDemoMode ? "Disabled in demo" : undefined;
 
 interface StreamControlsProps {
+  className?: string;
   cameraName: string;
   editingName: boolean;
   editNameValue: string;
@@ -36,6 +41,7 @@ interface StreamControlsProps {
 }
 
 export function StreamControls({
+  className,
   cameraName,
   editingName,
   editNameValue,
@@ -59,7 +65,7 @@ export function StreamControls({
 }: StreamControlsProps) {
   const isBrowserStream = streamType === "browser";
   return (
-    <Card>
+    <Card className={cn(className)}>
       <CardHeader>
         <div className="flex items-center gap-2">
           {editingName ? (
@@ -152,12 +158,15 @@ export function StreamControls({
             {!cameraEnabled ? (
               <Button
                 onClick={onEnableCamera}
-                disabled={!streamKey || loadingStream}
+                disabled={isDemoMode || !streamKey || loadingStream}
                 className="w-full"
                 size="lg"
+                title={DEMO_DISABLED_TITLE}
               >
                 <IconVideo className="mr-2 size-5" />
-                Enable Camera
+                {isDemoMode
+                  ? "Live streaming disabled in demo"
+                  : "Enable Camera"}
               </Button>
             ) : streaming ? (
               <Button
@@ -165,6 +174,8 @@ export function StreamControls({
                 variant="destructive"
                 className="w-full"
                 size="lg"
+                disabled={isDemoMode}
+                title={DEMO_DISABLED_TITLE}
               >
                 <IconVideoOff className="mr-2 size-5" />
                 Stop Streaming
@@ -172,12 +183,15 @@ export function StreamControls({
             ) : (
               <Button
                 onClick={onStartStreaming}
-                disabled={!streamKey}
+                disabled={isDemoMode || !streamKey}
                 className="w-full"
                 size="lg"
+                title={DEMO_DISABLED_TITLE}
               >
                 <IconVideo className="mr-2 size-5" />
-                Start Streaming
+                {isDemoMode
+                  ? "Live streaming disabled in demo"
+                  : "Start Streaming"}
               </Button>
             )}
           </>
diff --git a/components/surface.tsx b/components/surface.tsx
new file mode 100644
index 0000000..05df104
--- /dev/null
+++ b/components/surface.tsx
@@ -0,0 +1,83 @@
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+function Surface({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="surface"
+      className={cn(
+        "flex flex-col bg-background border border-border",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SurfaceHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="surface-header"
+      className={cn(
+        "flex flex-col gap-1 px-5 py-4 border-b border-border",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SurfaceTitle({ className, ...props }: React.ComponentProps<"h3">) {
+  return (
+    <h3
+      data-slot="surface-title"
+      className={cn("font-semibold text-base tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function SurfaceDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="surface-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function SurfaceContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="surface-content"
+      className={cn("px-5 py-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SurfaceFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="surface-footer"
+      className={cn(
+        "flex items-center px-5 py-4 border-t border-border",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Surface,
+  SurfaceHeader,
+  SurfaceTitle,
+  SurfaceDescription,
+  SurfaceContent,
+  SurfaceFooter,
+};
diff --git a/components/ui/flip-words.tsx b/components/ui/flip-words.tsx
deleted file mode 100644
index 43e1cc5..0000000
--- a/components/ui/flip-words.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-"use client";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { AnimatePresence, motion, LayoutGroup } from "motion/react";
-import { cn } from "@/lib/utils";
-
-export const FlipWords = ({
-  words,
-  duration = 3000,
-  className,
-}: {
-  words: string[];
-  duration?: number;
-  className?: string;
-}) => {
-  const [currentWord, setCurrentWord] = useState(words[0]);
-  const [isAnimating, setIsAnimating] = useState<boolean>(false);
-
-  // thanks for the fix Julian - https://github.com/Julian-AT
-  const startAnimation = useCallback(() => {
-    const word = words[words.indexOf(currentWord) + 1] || words[0];
-    setCurrentWord(word);
-    setIsAnimating(true);
-  }, [currentWord, words]);
-
-  useEffect(() => {
-    if (!isAnimating)
-      setTimeout(() => {
-        startAnimation();
-      }, duration);
-  }, [isAnimating, duration, startAnimation]);
-
-  return (
-    <AnimatePresence
-      onExitComplete={() => {
-        setIsAnimating(false);
-      }}
-    >
-      <motion.div
-        initial={{
-          opacity: 0,
-          y: 10,
-        }}
-        animate={{
-          opacity: 1,
-          y: 0,
-        }}
-        transition={{
-          type: "spring",
-          stiffness: 100,
-          damping: 10,
-        }}
-        exit={{
-          opacity: 0,
-          y: -40,
-          x: 40,
-          filter: "blur(8px)",
-          scale: 2,
-          position: "absolute",
-        }}
-        className={cn(
-          "z-10 inline-block relative text-left text-primary-invert pl-4",
-          className
-        )}
-        key={currentWord}
-      >
-        {/* edit suggested by Sajal: https://x.com/DewanganSajal */}
-        {currentWord.split(" ").map((word, wordIndex) => (
-          <motion.span
-            key={word + wordIndex}
-            initial={{ opacity: 0, y: 10, filter: "blur(8px)" }}
-            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
-            transition={{
-              delay: wordIndex * 0.3,
-              duration: 0.3,
-            }}
-            className="inline-block whitespace-nowrap"
-          >
-            {word.split("").map((letter, letterIndex) => (
-              <motion.span
-                key={word + letterIndex}
-                initial={{ opacity: 0, y: 10, filter: "blur(8px)" }}
-                animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
-                transition={{
-                  delay: wordIndex * 0.3 + letterIndex * 0.05,
-                  duration: 0.2,
-                }}
-                className="inline-block"
-              >
-                {letter}
-              </motion.span>
-            ))}
-            <span className="inline-block">&nbsp;</span>
-          </motion.span>
-        ))}
-      </motion.div>
-    </AnimatePresence>
-  );
-};
diff --git a/components/ui/input.test.md b/components/ui/input.test.md
deleted file mode 100644
index 7d9f301..0000000
--- a/components/ui/input.test.md
+++ /dev/null
@@ -1,120 +0,0 @@
-# Luxe UI Input Component - Migration Complete
-
-## Overview
-Successfully migrated from basic shadcn Input to animated Luxe-style Input component with smooth animations and enhanced UX.
-
-## New Features
-
-### 1. Smooth Focus Animations
-- **Border animation**: Animated gradient border appears at bottom on focus
-- **Ring animation**: Smooth ring effect with 300ms transition
-- **Shadow effects**: Subtle shadow transitions on hover and focus
-
-### 2. Placeholder Animations
-- Placeholder text slides slightly right and becomes more transparent on focus
-- Smooth 300ms transition for professional feel
-
-### 3. Enhanced Visual Feedback
-- Hover state: Border color changes and subtle shadow appears
-- Focus state: Ring effect with gradient border indicator
-- Disabled state: Reduced opacity with proper cursor handling
-- Invalid state: Red border and ring for form validation
-
-### 4. Smooth Transitions
-- All state changes use 300ms ease-in-out transitions
-- Border, shadow, and transform animations are synchronized
-- Maintains accessibility while adding visual polish
-
-## Component Changes
-
-### Before (Basic shadcn)
-```tsx
-<input
-  type={type}
-  className="border rounded-md px-3 py-1 ..."
-  {...props}
-/>
-```
-
-### After (Luxe-style animated)
-```tsx
-<div className="relative w-full">
-  <input
-    className="... transition-all duration-300 ..."
-    onFocus={handleFocus}
-    onBlur={handleBlur}
-    {...props}
-  />
-  <div className="animated-border-indicator" />
-</div>
-```
-
-## Compatibility
-
-### All existing Input usages work without changes:
-✅ **Search Page** (`app/(dashboard)/search/page.tsx`)
-- Line 144: Search input with placeholder, value, onChange, onKeyPress
-
-✅ **Stream Controls** (`components/stream/stream-controls.tsx`)
-- Line 58: Name edit input with type, value, onChange
-- Line 130: Text overlay input with id, type, value, placeholder
-
-✅ **Recording Card** (`components/watch/recording-card.tsx`)
-- Filter/search inputs (import verified)
-
-✅ **Camera Card** (`components/watch/camera-card.tsx`)
-- Camera name/config inputs (import verified)
-
-## Testing Checklist
-
-### Functionality Tests
-- [ ] Search input accepts text and triggers search
-- [ ] Enter key works in search input
-- [ ] Stream name editing works correctly
-- [ ] Text overlay input updates state
-- [ ] All onChange handlers fire properly
-- [ ] onFocus and onBlur events work
-
-### Animation Tests
-- [ ] Focus animation appears smoothly
-- [ ] Blur animation removes effects smoothly
-- [ ] Placeholder slides on focus
-- [ ] Border indicator scales from center
-- [ ] Hover effects work on all inputs
-- [ ] No animation jank or flickering
-
-### Visual Tests
-- [ ] Dark mode compatibility
-- [ ] Light mode appearance
-- [ ] Mobile responsiveness
-- [ ] Disabled state styling
-- [ ] Invalid/error state styling
-- [ ] Focus ring is visible and appropriate size
-
-### Edge Cases
-- [ ] File input type works (if used)
-- [ ] Password input type works
-- [ ] Number input type works
-- [ ] Email input type works
-- [ ] Programmatic focus/blur works
-- [ ] Rapid focus changes don't break animation
-
-## Browser Compatibility
-- Modern browsers (Chrome, Firefox, Safari, Edge) - Full support
-- CSS transitions and transforms are widely supported
-- Fallback: Input works without animations on older browsers
-
-## Performance Notes
-- Minimal state: Only 2 state variables (isFocused, hasValue)
-- Efficient event handlers
-- CSS transitions (GPU accelerated)
-- No layout thrashing
-- Smooth 60fps animations
-
-## Migration Status
-✅ Component updated: `components/ui/input.tsx`
-✅ All imports compatible (no changes needed)
-✅ Backward compatible with all existing usages
-✅ Enhanced with Luxe-style animations
-✅ No breaking changes
-
diff --git a/components/ui/luxe-button.tsx b/components/ui/luxe-button.tsx
deleted file mode 100644
index baad29a..0000000
--- a/components/ui/luxe-button.tsx
+++ /dev/null
@@ -1,271 +0,0 @@
-'use client' // @NOTE: Add in case you are using Next.js
-
-import { useRef, useState } from 'react'
-
-import { motion } from 'motion/react'
-import * as Slot from '@radix-ui/react-slot'
-
-import { cn } from '@/utils/cn'
-
-type Variant = {
-  variant: string
-  component: React.FC<React.ComponentProps<'button'>>
-}
-
-const variants = [
-  {
-    variant: 'default',
-    component: ({ className, ...props }) => (
-      <button
-        {...props}
-        className={cn(
-          'relative overflow-hidden rounded-xl border border-transparent bg-neutral-900 px-4 py-2 text-neutral-200 shadow-inner transition-all duration-200',
-          'shadow-main-foreground/70 hover:bg-main-invert/90 dark:shadow-main-foreground/80 dark:hover:bg-main-foreground/56',
-          className,
-        )}
-      />
-    ),
-  },
-  {
-    variant: 'outline',
-    component: ({ className, ...props }) => (
-      <button
-        {...props}
-        className={cn(
-          'relative rounded-xl border border-border bg-main-background px-4 py-2 transition-all duration-200',
-          'text-primary-foreground hover:bg-main-foreground/40',
-          className,
-        )}
-      />
-    ),
-  },
-  {
-    variant: 'success',
-    component: ({ className, ...props }) => (
-      <button
-        {...props}
-        className={cn(
-          'rounded-xl bg-gradient-to-t from-green-700 to-green-600 px-4 py-2 text-white',
-          className,
-        )}
-      />
-    ),
-  },
-  {
-    variant: 'destructive',
-    component: ({ className, ...props }) => (
-      <button
-        {...props}
-        className={cn(
-          'rounded-xl bg-gradient-to-t from-red-600 to-red-500 px-4 py-2 text-white',
-          className,
-        )}
-      />
-    ),
-  },
-  {
-    variant: 'shine',
-    component: ({ className, ...props }) => (
-      <button
-        {...props}
-        className={cn(
-          'animate-shine items-center justify-center rounded-xl border border-border bg-[length:400%_100%]',
-          'px-4 py-2 text-primary-invert/90 transition-colors dark:text-primary-invert',
-					"bg-[linear-gradient(110deg,#000000,45%,#303030,55%,#000000)]",
-          'dark:bg-[linear-gradient(110deg,#000103,45%,#303030,55%,#000103)]',
-          className,
-        )}
-      />
-    ),
-  },
-  {
-    variant: 'animated-border',
-    component: ({ children, className, ...props }) => (
-      <button
-        {...props}
-        className={cn(
-          'relative rounded-xl border border-primary/10 bg-main-background px-4 py-2 duration-200 hover:bg-main-foreground/40',
-          className,
-        )}
-      >
-        <div
-          className={cn(
-            '-inset-px pointer-events-none absolute rounded-[inherit] border border-transparent [mask-clip:padding-box,border-box]',
-            '[mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)]',
-          )}
-        >
-          <motion.div
-            className={cn(
-              'absolute aspect-square bg-gradient-to-r from-transparent via-neutral-300 to-neutral-400',
-              'dark:from-transparent dark:via-neutral-600 dark:to-neutral-400',
-            )}
-            animate={{
-              offsetDistance: ['0%', '100%'],
-            }}
-            style={{
-              width: 20,
-              offsetPath: `rect(0 auto auto 0 round ${20}px)`,
-            }}
-            transition={{
-              repeat: Number.POSITIVE_INFINITY,
-              duration: 5,
-              ease: 'linear',
-            }}
-          />
-        </div>
-        <span className="relative z-10 text-primary-muted">
-          {children}
-        </span>
-      </button>
-    ),
-  },
-  {
-    variant: 'rotate-border',
-    component: ({ children, className, ...props }) => (
-      <button
-        {...props}
-        className="relative inline-flex overflow-hidden rounded-xl p-px"
-      >
-        <span
-          className={cn(
-            'absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#4e4e4e_0%,#d4d4d4_50%,#414141_100%)]',
-            'dark:bg-[conic-gradient(from_90deg_at_50%_50%,#c2c2c2_0%,#505050_50%,#bebebe_100%)]',
-          )}
-        />
-        <span
-          className={cn(
-            'inline-flex size-full items-center justify-center rounded-[11px] bg-main-background px-4 py-2 text-primary-foreground backdrop-blur-3xl',
-            className,
-          )}
-        >
-          {children}
-        </span>
-      </button>
-    ),
-  },
-  {
-    variant: 'glitch-brightness',
-    component: ({ children, className, ...props }) => {
-      return (
-        <button
-          {...props}
-          className={cn(
-            'group relative overflow-hidden rounded-xl px-4 py-2 text-primary-invert duration-300',
-            'bg-primary/80 dark:hover:bg-primary',
-            className,
-          )}
-        >
-          <TextGlitch>{children}</TextGlitch>
-          <Brightness />
-        </button>
-      )
-
-      function TextGlitch({ children }: { children: React.ReactNode }) {
-        return (
-          <div className="relative overflow-hidden">
-            <span className="invisible">{children}</span>
-            <span
-              className='group-hover:-translate-y-full absolute top-0 left-0 transition-transform duration-500 ease-in-out hover:duration-300'
-            >
-              {children}
-            </span>
-            <span
-              className='absolute top-0 left-0 translate-y-full transition-transform duration-500 ease-in-out hover:duration-300 group-hover:translate-y-0'
-            >
-              {children}
-            </span>
-          </div>
-        )
-      }
-
-      function Brightness() {
-        return (
-          <div
-            aria-hidden
-            className='absolute inset-0 flex h-full w-full animate-brightness justify-center'
-          >
-            <div className='relative h-full w-8 bg-white/20 blur dark:bg-white/40' />
-          </div>
-        )
-      }
-    },
-  },
-] as const satisfies readonly Variant[]
-
-export type LuxeButtonProps = {
-  variant?: (typeof variants)[number]['variant']
-  isMagnetic?: boolean
-} & React.ComponentProps<'button'>
-
-export function LuxeButton({
-  variant = 'default',
-  isMagnetic = false,
-  className,
-  ...props
-}: LuxeButtonProps) {
-  const FALLBACK_INDEX = 0
-  
-  const variantComponent = variants.find(v => v.variant === variant)?.component
-
-  const Component = variantComponent || variants[FALLBACK_INDEX].component
-
-  const buttonContent = (
-    <Slot.Root className={cn('font-medium text-sm')}>
-      <Component {...props} className={className} />
-    </Slot.Root>
-  )
-
-  if (isMagnetic) {
-    return (
-      <Magnetic>
-        {buttonContent}
-      </Magnetic>
-    )
-  }
-
-  return buttonContent
-}
-
-function Magnetic({ children }: { children: React.ReactNode }) {
-  const { ref, handleMouseMove, handleMouseLeave, x, y } = useMagnetic()
-
-  return (
-    <motion.div 
-      ref={ref} 
-      onMouseMove={handleMouseMove} 
-      onMouseLeave={handleMouseLeave} 
-      animate={{ x, y }}
-      transition={{
-        type: 'spring',
-        damping: 15,
-        stiffness: 150,
-        mass: 0.1,
-      }}
-    >
-      {children}
-    </motion.div>
-  )
-}
-
-function useMagnetic() {
-  const [position, setPosition] = useState({ x: 0, y: 0 })
-  const ref = useRef<HTMLDivElement>(null)
-
-  function handleMouseMove(e: React.MouseEvent) {
-    const { clientX, clientY } = e
-    const { height, width, left, top } = ref.current!.getBoundingClientRect()
-
-    const middleX = clientX - (left + width / 2)
-    const middleY = clientY - (top + height / 2)
-
-    setPosition({ x: middleX, y: middleY })
-  }
-
-  function handleMouseLeave() {
-    setPosition({ x: 0, y: 0 })
-  }
-
-  const { x, y } = position
-
-  return { ref, handleMouseMove, handleMouseLeave, x, y }
-}
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
deleted file mode 100644
index 3b50737..0000000
--- a/components/ui/navigation-menu.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-'use client' // @NOTE: Add in case you are using Next.js
-
-import { useState } from 'react'
-
-import * as RadixNavigationMenu from '@radix-ui/react-navigation-menu'
-import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
-
-import { cn } from '@/utils/cn'
-
-type NavigationMenuProps = React.ComponentProps<typeof RadixNavigationMenu.Root>
-
-export function NavigationMenu({
-  className,
-  children,
-  ...props
-}: NavigationMenuProps) {
-  return (
-    <RadixNavigationMenu.Root
-      data-slot="navigation-menu"
-      data-viewport={false}
-      className={cn(
-        'relative flex max-w-max flex-1 items-center justify-center',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </RadixNavigationMenu.Root>
-  )
-}
-
-type NavigationMenuListProps = React.ComponentProps<
-  typeof RadixNavigationMenu.List
->
-
-export function NavigationMenuList({
-  className,
-  ...props
-}: NavigationMenuListProps) {
-  return (
-    <RadixNavigationMenu.List
-      data-slot="navigation-menu-list"
-      className={cn(
-        'group flex flex-1 list-none items-center justify-center gap-1',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-type NavigationMenuItemProps = React.ComponentProps<
-  typeof RadixNavigationMenu.Item
->
-
-export function NavigationMenuItem({
-  className,
-  ...props
-}: NavigationMenuItemProps) {
-  return (
-    <RadixNavigationMenu.Item
-      data-slot="navigation-menu-item"
-      className={cn('relative', className)}
-      {...props}
-    />
-  )
-}
-
-type NavigationMenuTriggerProps = React.ComponentProps<
-  typeof RadixNavigationMenu.Trigger
->
-
-export function NavigationMenuTrigger({
-  className,
-  children,
-  ...props
-}: NavigationMenuTriggerProps) {
-  return (
-    <RadixNavigationMenu.Trigger
-      data-slot="navigation-menu-trigger"
-      className={cn(
-        'group inline-flex h-9 w-max items-center justify-center rounded-md bg-main-background px-4 py-2 font-medium text-sm hover:bg-main-foreground hover:text-primary',
-        'text-primary-muted focus:bg-main-foreground focus:text-primary disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-primary',
-        'outline-none data-[state=open]:bg-main-foreground data-[state=open]:focus:bg-main-foreground',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <svg
-        aria-hidden
-        xmlns="http://www.w3.org/2000/svg"
-        className="relative top-[1px] ml-1 size-3 group-data-[state=open]:rotate-180 motion-safe:transition motion-safe:duration-200"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <title>Chevron Down</title>
-        <path d="m6 9 6 6 6-6" />
-      </svg>
-    </RadixNavigationMenu.Trigger>
-  )
-}
-
-type NavigationMenuContentProps = React.ComponentProps<
-  typeof RadixNavigationMenu.Content
->
-
-export function NavigationMenuContent({
-  className,
-  ...props
-}: NavigationMenuContentProps) {
-  return (
-    <RadixNavigationMenu.Content
-      data-slot="navigation-menu-content"
-      className={cn(
-        'top-full left-0 z-50 mt-1.5 w-full overflow-hidden rounded-xl border border-border bg-main-muted p-2.5 text-primary-muted shadow md:absolute md:left-1/2 md:w-auto',
-        '**:data-[slot=navigation-menu-link]:focus:outline-none **:data-[slot=navigation-menu-link]:focus:ring-0',
-        'motion-safe:data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52',
-        'motion-safe:data-[motion=to-end]:slide-out-to-right-52 motion-safe:data-[motion=to-start]:slide-out-to-left-52 md:-translate-x-1/2',
-        'motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[motion^=from-]:animate-in motion-safe:data-[motion^=to-]:animate-out',
-        'motion-safe:duration-200 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in',
-        'motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[state=closed]:fade-out-0',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-type NavigationMenuContentItemProps = React.ComponentProps<
-  typeof RadixNavigationMenu.Link
->
-
-export function NavigationMenuContentItem({
-  children,
-  className,
-  ...props
-}: NavigationMenuContentItemProps) {
-  const [isHovered, setIsHovered] = useState(false)
-
-  const isReducedMotion = useReducedMotion()
-
-  const interactionProps = !isReducedMotion && {
-    onMouseEnter: () => setIsHovered(true),
-    onMouseLeave: () => setIsHovered(false),
-    onFocus: () => setIsHovered(true),
-    onBlur: () => setIsHovered(false),
-  }
-
-  return (
-    <RadixNavigationMenu.Link
-      data-slot="navigation-menu-content-item"
-      className={cn(
-        'relative rounded-lg p-3 outline-none',
-        isReducedMotion && 'hover:bg-main-foreground',
-      )}
-      {...props}
-      {...interactionProps}
-    >
-      <div className={cn('relative z-10 flex flex-col gap-0.5', className)}>
-        {children}
-      </div>
-      {!isReducedMotion && (
-        <AnimatePresence initial={false}>
-          {isHovered && (
-            <motion.div
-              className="absolute inset-0 z-[1] rounded-[inherit] bg-main-foreground"
-              layoutId="background"
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{
-                duration: 0.3,
-                type: 'spring',
-                bounce: 0,
-              }}
-            />
-          )}
-        </AnimatePresence>
-      )}
-    </RadixNavigationMenu.Link>
-  )
-}
-
-type NavigationMenuLinkProps = React.ComponentProps<
-  typeof RadixNavigationMenu.Link
->
-
-export function NavigationMenuLink({
-  className,
-  ...props
-}: NavigationMenuLinkProps) {
-  return (
-    <RadixNavigationMenu.Link
-      data-slot="navigation-menu-link"
-      className={cn(
-        'text-primary-muted data-[active=true]:bg-main-foreground data-[active=true]:text-primary data-[active=true]:focus:bg-main-foreground',
-        'flex hover:bg-main-foreground hover:text-primary focus:bg-main-foreground focus:text-primary data-[active=true]:hover:bg-main-foreground',
-        'h-9 flex-col gap-1 rounded-md px-4 py-2 font-medium text-sm outline-none transition-all focus-within:ring-border focus-visible:outline-1',
-        'focus-visible:ring-1 [&_svg:not([class*="size-"])]:size-4 [&_svg:not([class*="text-"])]:text-main-muted',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
index 3ede847..8af8206 100644
--- a/components/ui/sonner.tsx
+++ b/components/ui/sonner.tsx
@@ -10,7 +10,7 @@ import {
 import { useTheme } from "next-themes";
 import { Toaster as Sonner, type ToasterProps } from "sonner";
 
-const Toaster = ({ ...props }: ToasterProps) => {
+const Toaster = (props: ToasterProps) => {
   const { theme = "system" } = useTheme();
 
   return (
@@ -30,7 +30,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
           "--normal-text": "var(--popover-foreground)",
           "--normal-border": "var(--border)",
           "--border-radius": "var(--radius)",
-          fontFamily: "var(--font-jetbrains-mono), 'JetBrains Mono', monospace",
+          fontFamily: "var(--font-inter), system-ui, sans-serif",
         } as React.CSSProperties
       }
       {...props}
diff --git a/components/ui/sticky-scroll-reveal.tsx b/components/ui/sticky-scroll-reveal.tsx
deleted file mode 100644
index 1d99094..0000000
--- a/components/ui/sticky-scroll-reveal.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-"use client";
-import React, { useEffect, useRef, useState } from "react";
-import { useMotionValueEvent, useScroll } from "motion/react";
-import { motion } from "motion/react";
-import { cn } from "@/lib/utils";
-
-export const StickyScroll = ({
-  content,
-  contentClassName,
-  onActiveCardChange,
-  scrollContainerRef,
-}: {
-  content: {
-    title: string;
-    description: string;
-    content?: React.ReactNode | any;
-  }[];
-  contentClassName?: string;
-  onActiveCardChange?: (index: number) => void;
-  scrollContainerRef?: React.RefObject<any>;
-}) => {
-  const [activeCard, setActiveCard] = React.useState(0);
-  const ref = scrollContainerRef || useRef<any>(null);
-  const { scrollYProgress } = useScroll({
-    // uncomment line 22 and comment line 23 if you DONT want the overflow container and want to have it change on the entire page scroll
-    // target: ref
-    container: ref,
-    offset: ["start start", "end start"],
-  });
-  const cardLength = content.length;
-
-  useMotionValueEvent(scrollYProgress, "change", (latest) => {
-    // Calculate which card should be active based on scroll progress
-    // Divide scroll progress into equal segments for each card
-    const newActiveCard = Math.min(
-      cardLength - 1,
-      Math.floor(latest * cardLength)
-    );
-    
-    if (newActiveCard !== activeCard) {
-      setActiveCard(newActiveCard);
-      if (onActiveCardChange) {
-        onActiveCardChange(newActiveCard);
-      }
-    }
-  });
-
-
-  return (
-    <motion.div
-      className="relative flex h-[60rem] justify-center space-x-40 overflow-y-auto rounded-md p-10 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-      ref={ref}
-    >
-      <div className="div relative flex items-start px-4">
-        <div className="max-w-2xl">
-          {content.map((item, index) => (
-            <div key={item.title + index} className="min-h-[800px] flex items-center">
-              <div className="bg-primary-foreground/70 p-6 rounded-md border border-primary/10">
-                <motion.h2
-                  initial={{
-                    opacity: 0,
-                  }}
-                  animate={{
-                    opacity: activeCard === index ? 1 : 0.3,
-                  }}
-                  className="text-2xl font-bold text-slate-100"
-                >
-                  {item.title}
-                </motion.h2>
-                <motion.p
-                  initial={{
-                    opacity: 0,
-                  }}
-                  animate={{
-                    opacity: activeCard === index ? 1 : 0.3,
-                  }}
-                  className="text-kg mt-6 max-w-sm text-slate-300"
-                >
-                  {item.description}
-                </motion.p>
-              </div>
-            </div>
-          ))}
-          <div className="h-[200px]" />
-        </div>
-      </div>
-      <div
-        className={cn(
-          "sticky top-10 hidden overflow-hidden rounded-md bg-transparent lg:block w-[1200px]",
-          contentClassName,
-        )}
-      >
-        {content[activeCard].content ?? null}
-      </div>
-    </motion.div>
-  );
-};
diff --git a/components/user-nav.tsx b/components/user-nav.tsx
index cd4fb1e..5d9a77f 100644
--- a/components/user-nav.tsx
+++ b/components/user-nav.tsx
@@ -17,6 +17,28 @@ import {
   SidebarMenuItem,
 } from "@/components/ui/sidebar";
 
+const USER = {
+  name: "Admin",
+  email: "admin@argus.ai",
+  avatar: "/assets/admin.png",
+  initials: "AD",
+};
+
+function UserIdentity() {
+  return (
+    <>
+      <Avatar className="h-8 w-8 rounded-lg">
+        <AvatarImage src={USER.avatar} alt={USER.name} />
+        <AvatarFallback className="rounded-lg">{USER.initials}</AvatarFallback>
+      </Avatar>
+      <div className="grid flex-1 text-left text-sm leading-tight">
+        <span className="truncate font-semibold">{USER.name}</span>
+        <span className="truncate text-xs">{USER.email}</span>
+      </div>
+    </>
+  );
+}
+
 export function UserNav() {
   return (
     <SidebarMenu>
@@ -27,16 +49,7 @@ export function UserNav() {
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
-              <Avatar className="h-8 w-8 rounded-lg">
-                <AvatarImage 
-                    src="assets/admin.png"
-                    alt="Admin"
-                  />
-              </Avatar>
-              <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-semibold">Admin</span>
-                <span className="truncate text-xs">admin@argus.ai</span>
-              </div>
+              <UserIdentity />
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent
@@ -47,16 +60,7 @@ export function UserNav() {
           >
             <DropdownMenuLabel className="p-0 font-normal">
               <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                <Avatar className="h-8 w-8 rounded-lg">
-                  <AvatarImage 
-                    src="assets/admin.png"
-                    alt="Admin"
-                  />
-                </Avatar>
-                <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-semibold">Admin</span>
-                  <span className="truncate text-xs">admin@argus.ai</span>
-                </div>
+                <UserIdentity />
               </div>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
diff --git a/components/watch/first-run-next-steps-card.tsx b/components/watch/first-run-next-steps-card.tsx
new file mode 100644
index 0000000..293ef16
--- /dev/null
+++ b/components/watch/first-run-next-steps-card.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { IconMessageCircle, IconPlayerPlay, IconX } from "@tabler/icons-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+export function FirstRunNextStepsCard({
+  onDismiss,
+  onOpenRecordings,
+}: {
+  onDismiss: () => void;
+  onOpenRecordings: () => void;
+}) {
+  return (
+    <section className="mb-4 rounded-lg border border-border bg-card p-4">
+      <div className="flex gap-4">
+        <div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/15 text-primary">
+          <IconPlayerPlay className="size-4" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <h2 className="text-sm font-medium text-foreground">
+                Workspace launched
+              </h2>
+              <p className="mt-1 text-sm text-muted-foreground">
+                Your onboarding cameras are now merged into the demo dashboard.
+                Next, ask AI about the setup or open a recording.
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={onDismiss}
+              aria-label="Dismiss next steps"
+              className="flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+            >
+              <IconX className="size-4" />
+            </button>
+          </div>
+          <div className="mt-4 flex flex-wrap gap-2">
+            <Button
+              asChild
+              className="h-auto gap-2 px-3 py-2 text-xs text-white"
+            >
+              <Link href="/ai-chat">
+                <IconMessageCircle className="size-3.5" />
+                Ask AI
+              </Link>
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onOpenRecordings}
+              className="h-auto gap-2 px-3 py-2 text-xs shadow-none"
+            >
+              <IconPlayerPlay className="size-3.5" />
+              Open recordings
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/watch/recording-info-modal.tsx b/components/watch/recording-info-modal.tsx
index 6983038..cd85dd5 100644
--- a/components/watch/recording-info-modal.tsx
+++ b/components/watch/recording-info-modal.tsx
@@ -1,19 +1,18 @@
 "use client";
 
-import { IconHelpCircle, IconInfoCircle } from "@tabler/icons-react";
+import { IconInfoCircle } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Spinner } from "@/components/ui/shadcn-io/spinner";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
 import {
   Table,
   TableBody,
@@ -22,8 +21,43 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { isDemoMode } from "@/lib/demo/flag";
+import { formatClockDuration } from "@/lib/format";
 import { type Asset, supabase } from "@/lib/supabase";
 
+// Minimal shapes for the Mux JSONB fields stored on Asset (typed as `any`).
+interface PlaybackId {
+  id: string;
+  policy: string;
+}
+
+interface AssetTrack {
+  id: string;
+  type: string;
+  primary?: boolean;
+  max_width?: number;
+  max_height?: number;
+  max_channels?: number;
+  language_code?: string;
+  name?: string;
+  status?: string;
+}
+
+interface RecordingTime {
+  started_at: string | number;
+  duration: number;
+  type: string;
+}
+
+interface StaticRenditionFile {
+  name: string;
+  width?: number;
+  height?: number;
+  resolution_tier?: string;
+  filesize?: string;
+  status: string;
+}
+
 interface RecordingInfoModalProps {
   asset: Asset;
   open: boolean;
@@ -38,13 +72,6 @@ export function RecordingInfoModal({
   const [cameraName, setCameraName] = useState<string | null>(null);
   const [loadingCamera, setLoadingCamera] = useState(false);
 
-  const formatDuration = (seconds: number) => {
-    if (!seconds) return "N/A";
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${mins}:${secs.toString().padStart(2, "0")}`;
-  };
-
   const formatDate = (timestamp: string | number) => {
     // Handle both ISO strings and Unix timestamps
     const date =
@@ -62,6 +89,8 @@ export function RecordingInfoModal({
   useEffect(() => {
     const fetchCameraName = async () => {
       if (!asset.live_stream_id) return;
+      // No backend in demo — skip the Supabase lookup.
+      if (isDemoMode) return;
 
       setLoadingCamera(true);
       try {
@@ -93,15 +122,15 @@ export function RecordingInfoModal({
   }, [asset.live_stream_id, open]);
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-4xl max-h-[90vh]">
-        <DialogHeader>
-          <DialogTitle>Recording Details</DialogTitle>
-          <DialogDescription>Recording metadata</DialogDescription>
-        </DialogHeader>
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-full gap-0 p-0 sm:max-w-2xl">
+        <SheetHeader className="border-b">
+          <SheetTitle>Recording Details</SheetTitle>
+          <SheetDescription>Recording metadata</SheetDescription>
+        </SheetHeader>
 
-        <ScrollArea className="max-h-[70vh]">
-          <div className="space-y-6 pr-4">
+        <ScrollArea className="min-h-0 flex-1">
+          <div className="space-y-6 p-4">
             {/* Basic Info */}
             <div className="space-y-3">
               <h3 className="font-semibold text-sm border-b pb-2">
@@ -124,7 +153,7 @@ export function RecordingInfoModal({
                 <div>
                   <p className="text-muted-foreground text-xs">Duration</p>
                   <p className="text-xs">
-                    {formatDuration(asset.duration_seconds || 0)}
+                    {formatClockDuration(asset.duration_seconds, "N/A")}
                   </p>
                 </div>
                 <div>
@@ -256,24 +285,26 @@ export function RecordingInfoModal({
                       </TableRow>
                     </TableHeader>
                     <TableBody>
-                      {asset.playback_ids.map((playback: any, idx: number) => (
-                        <TableRow key={idx}>
-                          <TableCell className="font-mono text-xs">
-                            {playback.id}
-                          </TableCell>
-                          <TableCell>
-                            <Badge
-                              variant={
-                                playback.policy === "public"
-                                  ? "default"
-                                  : "secondary"
-                              }
-                            >
-                              {playback.policy}
-                            </Badge>
-                          </TableCell>
-                        </TableRow>
-                      ))}
+                      {asset.playback_ids.map(
+                        (playback: PlaybackId, idx: number) => (
+                          <TableRow key={idx}>
+                            <TableCell className="font-mono text-xs">
+                              {playback.id}
+                            </TableCell>
+                            <TableCell>
+                              <Badge
+                                variant={
+                                  playback.policy === "public"
+                                    ? "default"
+                                    : "secondary"
+                                }
+                              >
+                                {playback.policy}
+                              </Badge>
+                            </TableCell>
+                          </TableRow>
+                        ),
+                      )}
                     </TableBody>
                   </Table>
                 </div>
@@ -294,7 +325,7 @@ export function RecordingInfoModal({
                       </TableRow>
                     </TableHeader>
                     <TableBody>
-                      {asset.tracks.map((track: any) => (
+                      {asset.tracks.map((track: AssetTrack) => (
                         <TableRow key={track.id}>
                           <TableCell>
                             <Badge variant="outline">{track.type}</Badge>
@@ -350,13 +381,13 @@ export function RecordingInfoModal({
                     </TableHeader>
                     <TableBody>
                       {asset.recording_times.map(
-                        (recording: any, idx: number) => (
+                        (recording: RecordingTime, idx: number) => (
                           <TableRow key={idx}>
                             <TableCell className="text-xs">
                               {formatDate(recording.started_at)}
                             </TableCell>
                             <TableCell>
-                              {formatDuration(recording.duration)}
+                              {formatClockDuration(recording.duration, "N/A")}
                             </TableCell>
                             <TableCell>
                               <Badge
@@ -449,7 +480,7 @@ export function RecordingInfoModal({
                       </TableHeader>
                       <TableBody>
                         {asset.static_renditions.files.map(
-                          (file: any, idx: number) => (
+                          (file: StaticRenditionFile, idx: number) => (
                             <TableRow key={idx}>
                               <TableCell className="font-mono text-xs">
                                 {file.name}
@@ -499,14 +530,16 @@ export function RecordingInfoModal({
                         {asset.errors.type}
                       </p>
                     )}
-                    {asset.errors.messages.map((message: any, idx: number) => (
-                      <div
-                        key={idx}
-                        className="text-sm p-2 bg-destructive/10 rounded border border-destructive/20"
-                      >
-                        {message}
-                      </div>
-                    ))}
+                    {asset.errors.messages.map(
+                      (message: string, idx: number) => (
+                        <div
+                          key={idx}
+                          className="text-sm p-2 bg-destructive/10 rounded border border-destructive/20"
+                        >
+                          {message}
+                        </div>
+                      ),
+                    )}
                   </div>
                 </div>
               )}
@@ -565,8 +598,8 @@ export function RecordingInfoModal({
             )}
           </div>
         </ScrollArea>
-      </DialogContent>
-    </Dialog>
+      </SheetContent>
+    </Sheet>
   );
 }
 
diff --git a/hooks/use-assets-realtime.ts b/hooks/use-assets-realtime.ts
index d8a9cdb..4c3114a 100644
--- a/hooks/use-assets-realtime.ts
+++ b/hooks/use-assets-realtime.ts
@@ -1,13 +1,18 @@
 import type { RealtimeChannel } from "@supabase/supabase-js";
 import { useEffect, useState } from "react";
+import { isDemoMode } from "@/lib/demo/flag";
+import { mockAssets } from "@/lib/demo/mock-data";
+import { useDemoListState } from "@/lib/demo/use-realtime-demo";
 import { type Asset, supabase } from "@/lib/supabase";
 
 export function useAssetsRealtime() {
-  const [assets, setAssets] = useState<Asset[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [assets, setAssets, loading, setLoading] =
+    useDemoListState<Asset>(mockAssets);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    if (isDemoMode) return;
+
     // Initial fetch from mux.assets table
     const fetchAssets = async () => {
       try {
@@ -40,8 +45,6 @@ export function useAssetsRealtime() {
           table: "assets",
         },
         (payload) => {
-          console.log("Asset realtime event:", payload);
-
           if (payload.eventType === "INSERT") {
             const newAsset = payload.new as Asset;
             setAssets((current) => [newAsset, ...current]);
diff --git a/hooks/use-camera-realtime.ts b/hooks/use-camera-realtime.ts
index 12b6823..d900177 100644
--- a/hooks/use-camera-realtime.ts
+++ b/hooks/use-camera-realtime.ts
@@ -1,5 +1,7 @@
 import type { RealtimeChannel } from "@supabase/supabase-js";
 import { useEffect, useState } from "react";
+import { isDemoMode } from "@/lib/demo/flag";
+import { mockCameras } from "@/lib/demo/mock-data";
 import { type Camera, supabase } from "@/lib/supabase";
 
 /**
@@ -7,10 +9,19 @@ import { type Camera, supabase } from "@/lib/supabase";
  * Now uses mux.live_streams table for instant status updates from Mux webhooks
  */
 export function useCameraRealtime(browserId: string | null) {
-  const [camera, setCamera] = useState<Camera | null>(null);
+  const [camera, setCamera] = useState<Camera | null>(
+    isDemoMode
+      ? (mockCameras.find((c) => c.browser_id === browserId) ?? null)
+      : null,
+  );
 
   useEffect(() => {
     if (!browserId) return;
+    // No backend in demo — resolve from mock cameras, skip Supabase.
+    if (isDemoMode) {
+      setCamera(mockCameras.find((c) => c.browser_id === browserId) ?? null);
+      return;
+    }
 
     // Fetch initial camera data from mux.live_streams
     const fetchCamera = async () => {
@@ -48,8 +59,6 @@ export function useCameraRealtime(browserId: string | null) {
           filter: `browser_id=eq.${browserId}`,
         },
         (payload) => {
-          console.log("Camera realtime event:", payload);
-
           if (
             payload.eventType === "INSERT" ||
             payload.eventType === "UPDATE"
diff --git a/hooks/use-cameras-realtime.ts b/hooks/use-cameras-realtime.ts
index 2f649c4..b744e0e 100644
--- a/hooks/use-cameras-realtime.ts
+++ b/hooks/use-cameras-realtime.ts
@@ -1,5 +1,8 @@
 import type { RealtimeChannel } from "@supabase/supabase-js";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { useDemoSession } from "@/hooks/use-demo-session";
+import { isDemoMode } from "@/lib/demo/flag";
+import { mockCameras } from "@/lib/demo/mock-data";
 import { type Camera, supabase } from "@/lib/supabase";
 
 export function useCamerasRealtime() {
@@ -7,7 +10,17 @@ export function useCamerasRealtime() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  // In demo mode there is no backend: layer session-added cameras (from the
+  // onboarding overlay) in front of the base mocks and skip the subscription.
+  const { cameras: sessionCameras } = useDemoSession();
+  const demoCameras = useMemo(
+    () => [...sessionCameras, ...mockCameras],
+    [sessionCameras],
+  );
+
   useEffect(() => {
+    if (isDemoMode) return;
+
     // Initial fetch from mux.live_streams table
     const fetchCameras = async () => {
       try {
@@ -43,8 +56,6 @@ export function useCamerasRealtime() {
           table: "live_streams",
         },
         (payload) => {
-          console.log("Live stream realtime event:", payload);
-
           if (payload.eventType === "INSERT") {
             const newCamera = payload.new as Camera;
             // Only add if it has a browser_id (is a camera)
@@ -88,5 +99,9 @@ export function useCamerasRealtime() {
     };
   }, []);
 
+  if (isDemoMode) {
+    return { cameras: demoCameras, loading: false, error: null };
+  }
+
   return { cameras, loading, error };
 }
diff --git a/hooks/use-chart-animation.ts b/hooks/use-chart-animation.ts
new file mode 100644
index 0000000..7283e12
--- /dev/null
+++ b/hooks/use-chart-animation.ts
@@ -0,0 +1,34 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const DEFAULT_ANIMATION_DURATION = 800;
+
+const playedChartIds = new Set<string>();
+
+// Clear the played-id cache on HMR so animations replay after a hot reload in dev.
+declare const module: { hot?: { dispose: (cb: () => void) => void } };
+if (typeof module !== "undefined" && module.hot) {
+  module.hot.dispose(() => playedChartIds.clear());
+}
+
+/** Recharts series props that animate a chart only the first time it mounts. */
+export interface ChartAnimationProps {
+  isAnimationActive: boolean;
+  animationDuration: number;
+}
+
+/**
+ * Returns Recharts animation props that play once per chart `id` per session,
+ * so charts animate on first reveal but not on every re-render. Spread the
+ * result onto each animated series, e.g. `<Bar {...chartAnimation} />`.
+ */
+export function useChartAnimation(id: string): ChartAnimationProps {
+  const [isAnimationActive] = useState(() => !playedChartIds.has(id));
+
+  useEffect(() => {
+    playedChartIds.add(id);
+  }, [id]);
+
+  return { isAnimationActive, animationDuration: DEFAULT_ANIMATION_DURATION };
+}
diff --git a/hooks/use-critical-events-realtime.ts b/hooks/use-critical-events-realtime.ts
index a937ef0..2dad2e0 100644
--- a/hooks/use-critical-events-realtime.ts
+++ b/hooks/use-critical-events-realtime.ts
@@ -1,13 +1,23 @@
 import type { RealtimeChannel } from "@supabase/supabase-js";
 import { useEffect, useState } from "react";
+import { isDemoMode } from "@/lib/demo/flag";
+import { mockEvents } from "@/lib/demo/mock-data";
+import { useDemoListState } from "@/lib/demo/use-realtime-demo";
 import { type AIAnalysisEvent, supabase } from "@/lib/supabase";
 
+const demoCriticalEvents = mockEvents
+  .filter((e) => e.severity === "High")
+  .slice(0, 20);
+
 export function useCriticalEventsRealtime() {
-  const [events, setEvents] = useState<AIAnalysisEvent[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [events, setEvents, loading, setLoading] =
+    useDemoListState<AIAnalysisEvent>(demoCriticalEvents);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    // No backend in demo — serve mock critical events, skip Supabase.
+    if (isDemoMode) return;
+
     // Initial fetch of recent critical events
     const fetchCriticalEvents = async () => {
       try {
@@ -46,8 +56,6 @@ export function useCriticalEventsRealtime() {
           filter: "severity=eq.High",
         },
         (payload) => {
-          console.log("Critical event realtime:", payload);
-
           const newEvent = payload.new as AIAnalysisEvent;
           setEvents((current) => [newEvent, ...current].slice(0, 20)); // Keep only recent 20
         },
diff --git a/hooks/use-demo-session.ts b/hooks/use-demo-session.ts
new file mode 100644
index 0000000..0621cda
--- /dev/null
+++ b/hooks/use-demo-session.ts
@@ -0,0 +1,30 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import {
+  type DemoSessionState,
+  getServerSnapshot,
+  getSnapshot,
+  subscribe,
+} from "@/lib/demo/session-store";
+
+/**
+ * Subscribe to the demo-session overlay store. SSR-safe: returns the empty
+ * snapshot on the server / during hydration, then the hydrated localStorage
+ * snapshot on the client.
+ */
+export function useDemoSession(): DemoSessionState {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// Re-export mutators for convenience so callers can do a single import.
+export {
+  addCamera,
+  addDetectionRule,
+  completeOnboarding,
+  removeCamera,
+  removeDetectionRule,
+  reset,
+  setAlerts,
+  setOrgName,
+} from "@/lib/demo/session-store";
diff --git a/hooks/use-detections.ts b/hooks/use-detections.ts
index 585141f..0aa8b99 100644
--- a/hooks/use-detections.ts
+++ b/hooks/use-detections.ts
@@ -1,4 +1,6 @@
 import { useEffect, useState } from "react";
+import { isDemoMode } from "@/lib/demo/flag";
+import { getMockDetectionsForAsset } from "@/lib/demo/mock-data";
 import type { DetectionFrame } from "@/lib/detection-queries";
 
 interface UseDetectionsOptions {
@@ -34,6 +36,13 @@ export function useDetections(
       return;
     }
 
+    if (isDemoMode) {
+      setDetections(getMockDetectionsForAsset(sourceId));
+      setLoading(false);
+      setError(null);
+      return;
+    }
+
     // Create AbortController to cancel request on unmount or dependency change
     const controller = new AbortController();
 
diff --git a/hooks/use-events-realtime.ts b/hooks/use-events-realtime.ts
index 3913461..a718dab 100644
--- a/hooks/use-events-realtime.ts
+++ b/hooks/use-events-realtime.ts
@@ -1,5 +1,7 @@
 import type { RealtimeChannel } from "@supabase/supabase-js";
 import { useEffect, useState } from "react";
+import { isDemoMode } from "@/lib/demo/flag";
+import { mockEvents } from "@/lib/demo/mock-data";
 import { type AIAnalysisEvent, supabase } from "@/lib/supabase";
 
 export function useEventsRealtime(assetId: string | null) {
@@ -14,6 +16,12 @@ export function useEventsRealtime(assetId: string | null) {
       return;
     }
 
+    if (isDemoMode) {
+      setEvents(mockEvents.filter((e) => e.asset_id === assetId));
+      setLoading(false);
+      return;
+    }
+
     // Initial fetch from ai_analysis_events table
     const fetchEvents = async () => {
       try {
@@ -47,8 +55,6 @@ export function useEventsRealtime(assetId: string | null) {
           filter: `asset_id=eq.${assetId}`,
         },
         (payload) => {
-          console.log("Event realtime update:", payload);
-
           if (payload.eventType === "INSERT") {
             const newEvent = payload.new as AIAnalysisEvent;
             setEvents((current) => {
diff --git a/hooks/use-jobs-realtime.ts b/hooks/use-jobs-realtime.ts
index fa24847..f37608e 100644
--- a/hooks/use-jobs-realtime.ts
+++ b/hooks/use-jobs-realtime.ts
@@ -1,13 +1,18 @@
 import type { RealtimeChannel } from "@supabase/supabase-js";
 import { useEffect, useState } from "react";
+import { isDemoMode } from "@/lib/demo/flag";
+import { mockAnalysisJobs } from "@/lib/demo/mock-data";
+import { useDemoListState } from "@/lib/demo/use-realtime-demo";
 import { type AIAnalysisJob, supabase } from "@/lib/supabase";
 
 export function useJobsRealtime() {
-  const [jobs, setJobs] = useState<AIAnalysisJob[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [jobs, setJobs, loading, setLoading] =
+    useDemoListState<AIAnalysisJob>(mockAnalysisJobs);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    if (isDemoMode) return;
+
     // Initial fetch from ai_analysis_jobs table
     const fetchJobs = async () => {
       try {
@@ -39,8 +44,6 @@ export function useJobsRealtime() {
           table: "ai_analysis_jobs",
         },
         (payload) => {
-          console.log("Job realtime event:", payload);
-
           if (payload.eventType === "INSERT") {
             const newJob = payload.new as AIAnalysisJob;
             setJobs((current) => [newJob, ...current]);
diff --git a/hooks/use-reports-realtime.ts b/hooks/use-reports-realtime.ts
index 40f92b0..b48caed 100644
--- a/hooks/use-reports-realtime.ts
+++ b/hooks/use-reports-realtime.ts
@@ -1,13 +1,19 @@
 import type { RealtimeChannel } from "@supabase/supabase-js";
 import { useEffect, useState } from "react";
+import { isDemoMode } from "@/lib/demo/flag";
+import { demoReportStore } from "@/lib/demo/mock-data";
+import { useDemoListState } from "@/lib/demo/use-realtime-demo";
 import { type Report, supabase } from "@/lib/supabase";
 
 export function useReportsRealtime() {
-  const [reports, setReports] = useState<Report[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [reports, setReports, loading, setLoading] = useDemoListState<Report>(
+    isDemoMode ? demoReportStore() : [],
+  );
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    if (isDemoMode) return;
+
     // Initial fetch from reports table
     const fetchReports = async () => {
       try {
@@ -42,8 +48,6 @@ export function useReportsRealtime() {
           table: "reports",
         },
         (payload) => {
-          console.log("Report realtime event:", payload);
-
           if (payload.eventType === "INSERT") {
             const newReport = payload.new as Report;
             setReports((current) => [newReport, ...current]);
diff --git a/hooks/use-stats-realtime.ts b/hooks/use-stats-realtime.ts
index 64fabcc..9c2644e 100644
--- a/hooks/use-stats-realtime.ts
+++ b/hooks/use-stats-realtime.ts
@@ -4,6 +4,7 @@
  */
 
 import { useCallback, useEffect, useState } from "react";
+import { isDemoMode } from "@/lib/demo/flag";
 import type { StatsData } from "@/lib/stats-queries";
 import { supabase } from "@/lib/supabase";
 
@@ -16,32 +17,16 @@ export function useStatsRealtime({
   enabled,
   onUpdate,
 }: UseStatsRealtimeOptions) {
-  const [updateCount, setUpdateCount] = useState(0);
   const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
 
-  const handleJobChange = useCallback(() => {
-    setUpdateCount((prev) => prev + 1);
+  // Both subscriptions just signal the parent to refetch and stamp the time.
+  const handleChange = useCallback(() => {
     setLastUpdate(new Date());
-
-    // Trigger a refetch in the parent component
-    if (onUpdate) {
-      // Signal that jobs data needs to be refetched
-      onUpdate({});
-    }
-  }, [onUpdate]);
-
-  const handleDetectionChange = useCallback(() => {
-    setUpdateCount((prev) => prev + 1);
-    setLastUpdate(new Date());
-
-    if (onUpdate) {
-      // Signal that detection data needs to be refetched
-      onUpdate({});
-    }
+    onUpdate?.({});
   }, [onUpdate]);
 
   useEffect(() => {
-    if (!enabled) {
+    if (!enabled || isDemoMode) {
       return;
     }
 
@@ -55,7 +40,7 @@ export function useStatsRealtime({
           schema: "public",
           table: "ai_analysis_jobs",
         },
-        handleJobChange,
+        handleChange,
       )
       .subscribe();
 
@@ -69,7 +54,7 @@ export function useStatsRealtime({
           schema: "public",
           table: "ai_object_detections",
         },
-        handleDetectionChange,
+        handleChange,
       )
       .subscribe();
 
@@ -78,11 +63,7 @@ export function useStatsRealtime({
       supabase.removeChannel(jobsChannel);
       supabase.removeChannel(detectionsChannel);
     };
-  }, [enabled, handleJobChange, handleDetectionChange]);
+  }, [enabled, handleChange]);
 
-  return {
-    updateCount,
-    lastUpdate,
-    isActive: enabled,
-  };
+  return { lastUpdate };
 }
diff --git a/hooks/use-stream-manager.ts b/hooks/use-stream-manager.ts
index 13f68c9..e30353b 100644
--- a/hooks/use-stream-manager.ts
+++ b/hooks/use-stream-manager.ts
@@ -11,7 +11,7 @@ const getRecorderSettings = () => {
     video: "",
     audio: "",
   };
-  
+
   // Prefer WebM for streaming - it handles continuous streams better than MP4
   // MP4 chunks have complete container metadata that can confuse streaming parsers
   if (MediaRecorder.isTypeSupported("video/webm;codecs=h264,opus")) {
diff --git a/lib/ai-tools.ts b/lib/ai-tools.ts
index a44d15b..e17c3a9 100644
--- a/lib/ai-tools.ts
+++ b/lib/ai-tools.ts
@@ -1,6 +1,17 @@
-import { tool } from "ai";
+import { generateId, tool } from "ai";
 import { z } from "zod";
-import { supabase } from "./supabase";
+import { isDemoMode } from "./demo/flag";
+import { demoReportStore, mockEvents } from "./demo/mock-data";
+import { type AIAnalysisEvent, supabase } from "./supabase";
+
+/** Resolve an event by id from the in-memory demo fixtures. */
+function getDemoEventById(eventId: number): AIAnalysisEvent {
+  const event = mockEvents.find((e) => e.id === eventId);
+  if (!event) {
+    throw new Error(`Event ${eventId} not found in demo data`);
+  }
+  return event;
+}
 
 // Event severity and type enums matching database schema
 const eventSeverityEnum = z.enum(["Minor", "Medium", "High"]);
@@ -47,7 +58,6 @@ export const displayEvent = tool({
     timestamp_seconds,
     affected_entities,
   }) => {
-    // Passthrough - return data as-is for UI rendering
     return {
       asset_id,
       event_id,
@@ -72,22 +82,24 @@ export const displayEventById = tool({
     event_id: z.number().describe("The event ID to fetch and display"),
   }),
   execute: async ({ event_id }) => {
-    // Fetch event from database
-    const { data: event, error } = await supabase
-      .from("ai_analysis_events")
-      .select("*")
-      .eq("id", event_id)
-      .single();
-
-    if (error) {
-      throw new Error(`Failed to fetch event ${event_id}: ${error.message}`);
+    let event: AIAnalysisEvent;
+    if (isDemoMode) {
+      event = getDemoEventById(event_id);
+    } else {
+      const { data, error } = await supabase
+        .from("ai_analysis_events")
+        .select("*")
+        .eq("id", event_id)
+        .single();
+      if (error) {
+        throw new Error(`Failed to fetch event ${event_id}: ${error.message}`);
+      }
+      if (!data) {
+        throw new Error(`Event ${event_id} not found`);
+      }
+      event = data as AIAnalysisEvent;
     }
 
-    if (!event) {
-      throw new Error(`Event ${event_id} not found`);
-    }
-
-    // Return formatted event data
     return {
       asset_id: event.asset_id,
       event_id: event.id,
@@ -112,7 +124,6 @@ export const displayAsset = tool({
     asset_id: z.string().describe("The video asset ID to display"),
   }),
   execute: async ({ asset_id }) => {
-    // Passthrough - return data as-is for UI rendering
     return {
       asset_id,
     };
@@ -135,7 +146,6 @@ export const createReport = tool({
       ),
   }),
   execute: async ({ title, markdown }) => {
-    // Import required modules
     const { marked } = await import("marked");
     const { generateJSON } = await import("@tiptap/html");
     const StarterKit = (await import("@tiptap/starter-kit")).default;
@@ -145,10 +155,13 @@ export const createReport = tool({
     const TaskItem = (await import("@tiptap/extension-task-item")).default;
     const ListItem = (await import("@tiptap/extension-list-item")).default;
 
-    // Convert markdown to HTML first
-    let content = { type: "doc", content: [{ type: "paragraph" }] };
+    // Default to an empty doc; replaced below once markdown is converted.
+    let content: Record<string, unknown> = {
+      type: "doc",
+      content: [{ type: "paragraph" }],
+    };
     try {
-      // Configure marked to preserve line breaks and use GFM (GitHub Flavored Markdown)
+      // GFM + breaks so report markdown renders the way users expect.
       marked.setOptions({
         breaks: true,
         gfm: true,
@@ -156,7 +169,6 @@ export const createReport = tool({
 
       const html = await marked(markdown);
 
-      // Convert HTML to Tiptap JSON with all extensions
       content = generateJSON(html, [
         StarterKit.configure({
           listItem: false, // We use custom ListItem
@@ -169,7 +181,7 @@ export const createReport = tool({
       ]);
     } catch (err) {
       console.error("Error converting markdown:", err);
-      // If conversion fails, create a simple paragraph with the markdown text
+      // Fall back to the raw markdown as plain text so the report still saves.
       content = {
         type: "doc",
         content: [
@@ -186,6 +198,24 @@ export const createReport = tool({
       };
     }
 
+    if (isDemoMode) {
+      const store = demoReportStore();
+      const now = new Date().toISOString();
+      const report = {
+        id: `demo-report-${generateId()}`,
+        title,
+        content,
+        created_at: now,
+        updated_at: now,
+      };
+      store.unshift(report);
+      return {
+        id: report.id,
+        title: report.title,
+        created_at: report.created_at,
+      };
+    }
+
     const { data: report, error } = await supabase
       .from("reports")
       .insert({
@@ -199,7 +229,6 @@ export const createReport = tool({
       throw new Error(`Failed to create report: ${error.message}`);
     }
 
-    // Return report data for UI rendering
     return {
       id: report.id,
       title: report.title,
@@ -208,10 +237,105 @@ export const createReport = tool({
   },
 });
 
-// Export tools object
+// ────────────────────────────────────────────────────────────────────────
+// Onboarding copilot tools
+//
+// Pass-through tools (mirrors the displayEvent pattern): `execute` simply
+// returns the validated args. The onboarding client reads these outputs from
+// the streamed message parts and applies them to the demo-session store.
+// ────────────────────────────────────────────────────────────────────────
+
+export const setOrgName = tool({
+  description:
+    "Set the organization / site name for the workspace being configured. Call this once you know what to call the deployment.",
+  inputSchema: z.object({
+    name: z
+      .string()
+      .describe("The organization or site name, e.g. 'Office HQ'"),
+  }),
+  execute: async ({ name }) => ({ name }),
+});
+
+export const addCamera = tool({
+  description:
+    "Add a camera to the workspace for a specific area the user wants to monitor. Call once per camera. Prefer short, location-based names.",
+  inputSchema: z.object({
+    name: z
+      .string()
+      .describe("Camera name, usually the area it watches, e.g. 'Lobby'"),
+    location: z
+      .string()
+      .optional()
+      .describe("Optional finer location detail, e.g. 'North entrance'"),
+  }),
+  execute: async ({ name, location }) => ({ name, location }),
+});
+
+export const addDetectionRule = tool({
+  description:
+    "Add an AI detection rule describing something the user wants flagged (e.g. weapons, medical emergencies, theft). Call once per rule.",
+  inputSchema: z.object({
+    label: z.string().describe("Short rule name, e.g. 'Weapons Detection'"),
+    description: z
+      .string()
+      .optional()
+      .describe("What the rule should detect, in one sentence."),
+    severity: eventSeverityEnum
+      .optional()
+      .describe("How serious a match is. Defaults to Medium."),
+  }),
+  execute: async ({ label, description, severity }) => ({
+    label,
+    description,
+    severity: severity ?? "Medium",
+  }),
+});
+
+export const setAlerts = tool({
+  description:
+    "Configure how the user is notified about detections: which channels (dashboard, email, sms) and the minimum severity that triggers an alert.",
+  inputSchema: z.object({
+    channels: z
+      .array(z.enum(["dashboard", "email", "sms"]))
+      .optional()
+      .describe("Notification channels to enable."),
+    severityThreshold: eventSeverityEnum
+      .optional()
+      .describe("Only alert at or above this severity."),
+    email: z.string().optional().describe("Email address for alerts."),
+    phone: z.string().optional().describe("Phone number for SMS alerts."),
+  }),
+  execute: async ({ channels, severityThreshold, email, phone }) => ({
+    channels: channels ?? ["dashboard"],
+    severityThreshold: severityThreshold ?? "Medium",
+    email,
+    phone,
+  }),
+});
+
+export const completeOnboarding = tool({
+  description:
+    "Finish onboarding once the user confirms their setup looks good. Only call after summarizing what was configured and getting confirmation.",
+  inputSchema: z.object({
+    confirm: z
+      .boolean()
+      .optional()
+      .describe("Whether the user confirmed completion."),
+  }),
+  execute: async ({ confirm }) => ({ confirm: confirm ?? true }),
+});
+
 export const aiTools = {
   displayEvent,
   displayEventById,
   displayAsset,
   createReport,
 };
+
+export const onboardingTools = {
+  setOrgName,
+  addCamera,
+  addDetectionRule,
+  setAlerts,
+  completeOnboarding,
+};
diff --git a/lib/chart-colors.ts b/lib/chart-colors.ts
index b5005b8..0fde80e 100644
--- a/lib/chart-colors.ts
+++ b/lib/chart-colors.ts
@@ -5,8 +5,6 @@
  */
 
 import { hcl } from "d3-color";
-import { scaleOrdinal, scaleSequential } from "d3-scale";
-import { interpolateRainbow, schemeTableau10 } from "d3-scale-chromatic";
 
 /**
  * Generate perceptually uniform colors using HCL color space
@@ -43,7 +41,7 @@ export function generateHCLColors(
 /**
  * Convert hex to HSL string for compatibility with existing chart configs
  */
-export function hexToHSL(hex: string): string {
+function hexToHSL(hex: string): string {
   const color = hcl(hex);
   const h = Math.round(color.h || 0);
   const c = Math.round((color.c / 100) * 100); // Chroma as percentage
@@ -55,7 +53,7 @@ export function hexToHSL(hex: string): string {
  * Colorblind-safe palette based on Tableau 10
  * Optimized for distinguishability and dark backgrounds
  */
-export const COLORBLIND_SAFE_PALETTE = [
+const COLORBLIND_SAFE_PALETTE = [
   hcl(210, 70, 65).formatHex(), // Blue
   hcl(25, 75, 62).formatHex(), // Orange
   hcl(130, 65, 58).formatHex(), // Green
diff --git a/lib/chat-store.ts b/lib/chat-store.ts
index f664960..d2c73d5 100644
--- a/lib/chat-store.ts
+++ b/lib/chat-store.ts
@@ -1,13 +1,162 @@
 import type { UIMessage } from "ai";
 import { generateId } from "ai";
+import { isDemoMode } from "./demo/flag";
+import { mockEvents } from "./demo/mock-data";
 import { supabase } from "./supabase";
 
+const NEW_CHAT = "New Chat";
+
+/** Concatenate the text from a message's text parts (ignores tool parts etc.). */
+export function extractTextFromParts(message: UIMessage): string {
+  const texts: string[] = [];
+  for (const part of message.parts) {
+    if (part.type === "text") texts.push(part.text);
+  }
+  return texts.join(" ");
+}
+
+interface DemoChatRecord {
+  id: string;
+  title: string | null;
+  messages: UIMessage[];
+  updated_at: string;
+}
+
+// A pre-baked example conversation so the AI Chat history is populated in demo.
+function seedDemoChats(store: Map<string, DemoChatRecord>) {
+  const highEvent =
+    mockEvents.find((e) => e.severity === "High") ?? mockEvents[0];
+  const welcome: DemoChatRecord = {
+    id: "demo-chat-welcome",
+    title: "Most serious incidents this week",
+    updated_at: new Date(Date.now() - 2 * 3600 * 1000).toISOString(),
+    messages: [
+      {
+        id: "seed-u1",
+        role: "user",
+        parts: [
+          {
+            type: "text",
+            text: "What were the most serious incidents this week?",
+          },
+        ],
+      },
+      {
+        id: "seed-a1",
+        role: "assistant",
+        parts: [
+          {
+            type: "text",
+            text: `This week the analysis pipeline (Roboflow detection + SAM 2 segmentation) flagged ${mockEvents.filter((e) => e.severity === "High").length} high-severity events across your cameras. The most urgent one:`,
+          },
+          {
+            type: "tool-displayEvent",
+            toolCallId: "seed-call-1",
+            state: "output-available",
+            input: { event_id: highEvent.id },
+            output: {
+              asset_id: highEvent.asset_id,
+              event_id: highEvent.id,
+              name: highEvent.name,
+              description: highEvent.description,
+              severity: highEvent.severity,
+              type: highEvent.type,
+              timestamp_seconds: highEvent.timestamp_seconds,
+              affected_entities: highEvent.affected_entities ?? [],
+            },
+          },
+          {
+            type: "text",
+            text: "Want me to compile the week's high-severity events into an incident report?",
+          },
+        ],
+      },
+      // The `tool-displayEvent` part is shaped exactly like the SDK's streamed
+      // tool-output part, but `UIMessage`'s generic tool-part union isn't
+      // structurally inferable from a plain object literal, so a single cast is
+      // the cleanest way to seed this fixture.
+    ] as UIMessage[],
+  };
+  store.set(welcome.id, welcome);
+}
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __demoChatStore: Map<string, DemoChatRecord> | undefined;
+}
+function demoChats(): Map<string, DemoChatRecord> {
+  if (!globalThis.__demoChatStore) {
+    const store = new Map<string, DemoChatRecord>();
+    if (isDemoMode) seedDemoChats(store);
+    globalThis.__demoChatStore = store;
+  }
+  return globalThis.__demoChatStore;
+}
+
+/**
+ * In-memory implementation of the chat store used in demo mode. Mirrors the
+ * Supabase-backed code paths below; each public function branches here once.
+ *
+ * This state is scoped to a single warm server instance. On serverless hosts,
+ * cold starts or requests routed to a different instance may fall back to the
+ * seeded demo history, which is acceptable for an ephemeral public demo.
+ */
+const demoChatStore = {
+  create(id: string): void {
+    demoChats().set(id, {
+      id,
+      title: null,
+      messages: [],
+      updated_at: new Date().toISOString(),
+    });
+  },
+  load(id: string): UIMessage[] {
+    return demoChats().get(id)?.messages ?? [];
+  },
+  save(chatId: string, messages: UIMessage[], derivedTitle: string): void {
+    const store = demoChats();
+    const existing = store.get(chatId);
+    store.set(chatId, {
+      id: chatId,
+      title: existing?.title ?? derivedTitle,
+      messages,
+      updated_at: new Date().toISOString(),
+    });
+  },
+  list(
+    limit: number,
+  ): Array<{ id: string; title: string; updated_at: string }> {
+    return Array.from(demoChats().values())
+      .sort((a, b) => (a.updated_at < b.updated_at ? 1 : -1))
+      .slice(0, limit)
+      .map((c) => ({
+        id: c.id,
+        title: c.title ?? NEW_CHAT,
+        updated_at: c.updated_at,
+      }));
+  },
+  delete(id: string): void {
+    demoChats().delete(id);
+  },
+};
+
+/** Derive a chat title from the first user message, falling back to NEW_CHAT. */
+function deriveTitle(messages: UIMessage[]): string {
+  const firstUserMessage = messages.find((m) => m.role === "user");
+  return firstUserMessage ? generateChatTitle(firstUserMessage) : NEW_CHAT;
+}
+
 /**
  * Create a new chat with empty messages
  */
 export async function createChat(): Promise<string> {
   const id = generateId();
 
+  if (isDemoMode) {
+    demoChatStore.create(id);
+    return id;
+  }
+
   const { error } = await supabase.from("chats").insert({ id, messages: [] });
 
   if (error) {
@@ -22,6 +171,10 @@ export async function createChat(): Promise<string> {
  * Load chat messages by ID
  */
 export async function loadChat(id: string): Promise<UIMessage[]> {
+  if (isDemoMode) {
+    return demoChatStore.load(id);
+  }
+
   const { data, error } = await supabase
     .from("chats")
     .select("messages")
@@ -52,6 +205,14 @@ export async function saveChat({
     return;
   }
 
+  // Title to use when the chat doesn't already have one (same in both stores).
+  const derivedTitle = deriveTitle(messages);
+
+  if (isDemoMode) {
+    demoChatStore.save(chatId, messages, derivedTitle);
+    return;
+  }
+
   // Auto-generate title from first user message if not already set
   const { data: existingChat } = await supabase
     .from("chats")
@@ -59,17 +220,7 @@ export async function saveChat({
     .eq("id", chatId)
     .single();
 
-  let title = existingChat?.title;
-
-  // Generate title if not set
-  if (!title) {
-    const firstUserMessage = messages.find((m) => m.role === "user");
-    if (firstUserMessage) {
-      title = generateChatTitle(firstUserMessage);
-    } else {
-      title = "New Chat";
-    }
-  }
+  const title = existingChat?.title || derivedTitle;
 
   const { error } = await supabase
     .from("chats")
@@ -96,6 +247,10 @@ export async function listChats(limit = 10): Promise<
     updated_at: string;
   }>
 > {
+  if (isDemoMode) {
+    return demoChatStore.list(limit);
+  }
+
   const { data, error } = await supabase
     .from("chats")
     .select("id, title, updated_at")
@@ -114,6 +269,11 @@ export async function listChats(limit = 10): Promise<
  * Delete a chat by ID
  */
 export async function deleteChat(id: string): Promise<void> {
+  if (isDemoMode) {
+    demoChatStore.delete(id);
+    return;
+  }
+
   const { error } = await supabase.from("chats").delete().eq("id", id);
 
   if (error) {
@@ -126,16 +286,11 @@ export async function deleteChat(id: string): Promise<void> {
  * Generate a chat title from the first user message
  */
 export function generateChatTitle(message: UIMessage): string {
-  // Extract text from message parts
-  const textParts = message.parts
-    .filter((part) => part.type === "text")
-    .map((part) => (part as any).text)
-    .join(" ");
-
-  // Truncate to 50 characters
-  if (textParts.length > 50) {
-    return textParts.substring(0, 50).trim() + "...";
+  const text = extractTextFromParts(message);
+
+  if (text.length > 50) {
+    return `${text.substring(0, 50).trim()}...`;
   }
 
-  return textParts || "New Chat";
+  return text || NEW_CHAT;
 }
diff --git a/lib/demo/flag.ts b/lib/demo/flag.ts
new file mode 100644
index 0000000..7c08fdc
--- /dev/null
+++ b/lib/demo/flag.ts
@@ -0,0 +1 @@
+export const isDemoMode = process.env.DEMO_MODE === "true";
diff --git a/lib/demo/mock-data.ts b/lib/demo/mock-data.ts
new file mode 100644
index 0000000..f51c595
--- /dev/null
+++ b/lib/demo/mock-data.ts
@@ -0,0 +1,678 @@
+/**
+ * Argus Demo Mock Data
+ *
+ * Central fixture module used whenever DEMO_MODE=true. All API routes that
+ * would normally hit Supabase/Mux/Elasticsearch return slices of this data.
+ *
+ * Timestamps are computed relative to `now()` at module load so deploys feel
+ * fresh, but stay consistent across a single process / request tree.
+ */
+
+import type {
+  AIAnalysisEvent,
+  AIAnalysisJob,
+  AIAnalysisResult,
+  Asset,
+  Camera,
+  Report,
+} from "@/lib/supabase";
+
+const NOW = Date.now();
+const HOUR = 3600 * 1000;
+const DAY = 24 * HOUR;
+
+const isoAt = (msAgo: number) => new Date(NOW - msAgo).toISOString();
+
+// Public Mux demo playback IDs (Mux publishes these as sample content). Shared
+// with the demo-session store so session-added cameras render live tiles too.
+export const PUBLIC_PLAYBACKS = [
+  "DS00Spx1CV902MCtPj5WknGlR102V5HFkDe",
+  "qxb01i6T202018GFS02vp9RIe01icTcDCjVzQpmaB00CUisJ4",
+  "VZtzUzGRv02OhRnZCxcNg49OilvolTqdnFLEqBsTwaxU",
+  "OZpQKVuPJhKyp9cAMuAx63GVAjtDLfLuurGLCSx01oxgI",
+];
+
+// Deterministic 0–99 pseudo-random value from an index, used to vary fixtures
+// without pulling in real randomness (so renders stay stable).
+const pseudoRandom = (i: number) => (i * 37) % 100;
+
+// First IDs for the demo event / job sequences (kept clear of real-data ranges).
+const EVENT_ID_BASE = 1000;
+const JOB_ID_BASE = 500;
+
+// ────────────────────────────────────────────────────────────────────────
+// Cameras
+// ────────────────────────────────────────────────────────────────────────
+
+const CAMERA_DEFS: Array<{
+  name: string;
+  status: Camera["status"];
+  lastMsAgo: number | null;
+}> = [
+  { name: "Lobby North", status: "active", lastMsAgo: 2 * 60 * 1000 },
+  { name: "Parking Lot A", status: "active", lastMsAgo: 45 * 1000 },
+  { name: "Loading Dock", status: "idle", lastMsAgo: 4 * HOUR },
+  { name: "Server Room", status: "active", lastMsAgo: 10 * 60 * 1000 },
+  { name: "Rear Entrance", status: "idle", lastMsAgo: 12 * HOUR },
+  { name: "Reception", status: "active", lastMsAgo: 30 * 1000 },
+  { name: "Warehouse West", status: "active", lastMsAgo: 5 * 60 * 1000 },
+  { name: "Rooftop", status: "disabled", lastMsAgo: 3 * DAY },
+];
+
+export const mockCameras: Camera[] = CAMERA_DEFS.map((c, i) => ({
+  id: `demo-cam-${String(i + 1).padStart(3, "0")}`,
+  browser_id: `demo-browser-${i + 1}`,
+  camera_name: c.name,
+  stream_key: `demo-key-${i + 1}-xxxx-xxxx`,
+  playback_ids: [
+    { id: PUBLIC_PLAYBACKS[i % PUBLIC_PLAYBACKS.length], policy: "public" },
+  ],
+  status: c.status,
+  created_at: isoAt((7 + i) * DAY),
+  last_connected_at: c.lastMsAgo === null ? null : isoAt(c.lastMsAgo),
+  active_asset_id: c.status === "active" ? `demo-asset-${i + 1}` : null,
+  recent_asset_ids: [`demo-asset-${i + 1}`, `demo-asset-${i + 1}-b`],
+  latency_mode: "low",
+  reconnect_window_seconds: 60,
+}));
+
+// ────────────────────────────────────────────────────────────────────────
+// Assets (recordings)
+// ────────────────────────────────────────────────────────────────────────
+
+const ASSET_DEFS = [
+  { cameraIdx: 0, durationSec: 1847, hoursAgo: 2 },
+  { cameraIdx: 0, durationSec: 3620, hoursAgo: 20 },
+  { cameraIdx: 1, durationSec: 920, hoursAgo: 6 },
+  { cameraIdx: 1, durationSec: 2405, hoursAgo: 36 },
+  { cameraIdx: 2, durationSec: 4812, hoursAgo: 10 },
+  { cameraIdx: 3, durationSec: 1200, hoursAgo: 3 },
+  { cameraIdx: 4, durationSec: 680, hoursAgo: 48 },
+  { cameraIdx: 5, durationSec: 540, hoursAgo: 1 },
+  { cameraIdx: 5, durationSec: 2100, hoursAgo: 26 },
+  { cameraIdx: 6, durationSec: 1590, hoursAgo: 14 },
+  { cameraIdx: 6, durationSec: 3300, hoursAgo: 72 },
+  { cameraIdx: 7, durationSec: 450, hoursAgo: 96 },
+];
+
+export const mockAssets: Asset[] = ASSET_DEFS.map((a, i) => {
+  const camera = mockCameras[a.cameraIdx];
+  const playbackId = PUBLIC_PLAYBACKS[i % PUBLIC_PLAYBACKS.length];
+  return {
+    id: `demo-asset-${i + 1}`,
+    status: "ready",
+    created_at: isoAt(a.hoursAgo * HOUR),
+    duration_seconds: a.durationSec,
+    max_stored_frame_rate: 30,
+    aspect_ratio: "16:9",
+    playback_ids: [{ id: playbackId, policy: "public" }],
+    tracks: [],
+    errors: null,
+    master_access: "none",
+    master: null,
+    normalize_audio: false,
+    is_live: false,
+    static_renditions: null,
+    test: false,
+    passthrough: camera.id,
+    live_stream_id: camera.id,
+    ingest_type: "live_stream",
+    source_asset_id: null,
+    upload_id: null,
+    input_info: null,
+    video_quality: "plus",
+    resolution_tier: "1080p",
+    non_standard_input_reasons: null,
+    progress: null,
+    meta: { title: `${camera.camera_name} • Recording ${i + 1}` },
+    max_resolution_tier: "1080p",
+    recording_times: null,
+    playbackId,
+    createdAt: isoAt(a.hoursAgo * HOUR),
+    maxStoredResolution: "1920x1080",
+    duration: a.durationSec,
+  };
+});
+
+// ────────────────────────────────────────────────────────────────────────
+// AI analysis events
+// ────────────────────────────────────────────────────────────────────────
+
+type EventSeed = {
+  name: string;
+  description: string;
+  severity: AIAnalysisEvent["severity"];
+  type: AIAnalysisEvent["type"];
+};
+
+const EVENT_SEEDS: EventSeed[] = [
+  {
+    name: "Unauthorized person detected",
+    description:
+      "An individual entered the loading dock outside of scheduled delivery hours.",
+    severity: "High",
+    type: "Crime",
+  },
+  {
+    name: "Person collapsed near reception",
+    description:
+      "A visitor appears to have fallen near the reception desk and remains on the floor.",
+    severity: "High",
+    type: "Medical Emergency",
+  },
+  {
+    name: "Vehicle collision in parking lot",
+    description:
+      "Two vehicles made contact in Parking Lot A; minor damage visible on both.",
+    severity: "Medium",
+    type: "Traffic Incident",
+  },
+  {
+    name: "Broken window observed",
+    description: "A panel on the rear entrance door appears shattered.",
+    severity: "Medium",
+    type: "Property Damage",
+  },
+  {
+    name: "Wet floor with no signage",
+    description:
+      "A spill is visible in the lobby with no warning sign deployed.",
+    severity: "Minor",
+    type: "Safety Hazard",
+  },
+  {
+    name: "Individual loitering near entrance",
+    description:
+      "Same person has been observed pacing outside the rear entrance for over 15 minutes.",
+    severity: "Medium",
+    type: "Suspicious Activity",
+  },
+  {
+    name: "Staff check-in",
+    description: "Employee badge-in at the main reception.",
+    severity: "Minor",
+    type: "Normal Activity",
+  },
+  {
+    name: "Camera view obstructed",
+    description: "Rooftop camera view has been partially blocked by debris.",
+    severity: "Medium",
+    type: "Camera Interference",
+  },
+  {
+    name: "Forklift operating without spotter",
+    description:
+      "A forklift is moving pallets in the warehouse with no secondary observer present.",
+    severity: "Medium",
+    type: "Safety Hazard",
+  },
+  {
+    name: "Unattended package at entrance",
+    description:
+      "A package has been left unattended near the front lobby doors for over 20 minutes.",
+    severity: "High",
+    type: "Suspicious Activity",
+  },
+  {
+    name: "Speeding vehicle",
+    description:
+      "A vehicle entered the parking area at substantially higher than the posted limit.",
+    severity: "Medium",
+    type: "Traffic Incident",
+  },
+  {
+    name: "Damaged pallet",
+    description: "A pallet near the dock appears split and unsafe to load.",
+    severity: "Minor",
+    type: "Property Damage",
+  },
+  {
+    name: "Individual tampering with camera",
+    description:
+      "A person has been observed adjusting the orientation of a perimeter camera.",
+    severity: "High",
+    type: "Camera Interference",
+  },
+  {
+    name: "Group gathering in restricted area",
+    description:
+      "Three individuals have congregated in the server room vestibule, which is access-controlled.",
+    severity: "High",
+    type: "Crime",
+  },
+  {
+    name: "Normal delivery arrival",
+    description:
+      "Scheduled carrier arrived at the loading dock and proceeded to unload.",
+    severity: "Minor",
+    type: "Normal Activity",
+  },
+];
+
+export const mockEvents: AIAnalysisEvent[] = [];
+let _eventId = EVENT_ID_BASE;
+for (let i = 0; i < 30; i++) {
+  const seed = EVENT_SEEDS[i % EVENT_SEEDS.length];
+  const asset = mockAssets[i % mockAssets.length];
+  mockEvents.push({
+    id: _eventId++,
+    job_id: JOB_ID_BASE + (i % mockAssets.length),
+    asset_id: asset.id,
+    name: seed.name,
+    description: seed.description,
+    severity: seed.severity,
+    type: seed.type,
+    timestamp_seconds: Math.floor(
+      (asset.duration_seconds ?? 600) * (0.05 + (0.9 * pseudoRandom(i)) / 100),
+    ),
+    affected_entities:
+      seed.type === "Traffic Incident"
+        ? [
+            { type: "vehicle", label: "Sedan (black)" },
+            { type: "vehicle", label: "SUV (silver)" },
+          ]
+        : seed.severity === "High"
+          ? [{ type: "person", label: "Unidentified individual" }]
+          : [],
+    created_at: isoAt((i + 1) * 35 * 60 * 1000),
+  });
+}
+
+// ────────────────────────────────────────────────────────────────────────
+// AI analysis jobs / results
+// ────────────────────────────────────────────────────────────────────────
+
+// CV pipeline catalog — the models that ran over the footage in this demo.
+// Mirrors a realistic Roboflow + SAM + supporting-model stack.
+export const CV_MODELS = [
+  "Roboflow: People Detection (YOLOv8)",
+  "SAM 2 — instance segmentation",
+  "Roboflow: PPE & Safety Compliance",
+  "Roboflow: Vehicle & ALPR",
+  "Roboflow: Weapon Detection",
+  "CLIP — scene embeddings",
+  "Whisper — audio transcript",
+  "DETR — object detection",
+];
+
+// Deterministically assign 2–3 models to a job by index.
+function pickModels(i: number): string[] {
+  const a = CV_MODELS[i % CV_MODELS.length];
+  const b = CV_MODELS[(i * 3 + 1) % CV_MODELS.length];
+  const c = CV_MODELS[(i * 5 + 2) % CV_MODELS.length];
+  return Array.from(new Set([a, b, ...(i % 2 === 0 ? [c] : [])]));
+}
+
+// Status assigned to demo jobs, cycled by index.
+const JOB_STATUS_CYCLE: AIAnalysisJob["status"][] = [
+  "succeeded",
+  "succeeded",
+  "succeeded",
+  "processing",
+  "queued",
+  "failed",
+];
+
+export const mockAnalysisJobs: AIAnalysisJob[] = mockAssets.map((asset, i) => {
+  const status = JOB_STATUS_CYCLE[i % JOB_STATUS_CYCLE.length];
+  return {
+    id: JOB_ID_BASE + i,
+    source_type: "vod",
+    source_id: asset.id,
+    playback_id:
+      (Array.isArray(asset.playback_ids) && asset.playback_ids[0]?.id) ||
+      PUBLIC_PLAYBACKS[0],
+    start_epoch: Math.floor(new Date(asset.created_at).getTime() / 1000),
+    end_epoch:
+      Math.floor(new Date(asset.created_at).getTime() / 1000) +
+      (asset.duration_seconds ?? 600),
+    asset_start_seconds: 0,
+    asset_end_seconds: asset.duration_seconds ?? 600,
+    status,
+    attempts: 1,
+    error: status === "failed" ? "Worker timed out after 300s" : null,
+    // Succeeded jobs reference their result row.
+    result_ref: status === "succeeded" ? JOB_ID_BASE + i : null,
+    created_at: asset.created_at,
+    updated_at: asset.created_at,
+    models: pickModels(i),
+  };
+});
+
+export const mockAnalysisResults: AIAnalysisResult[] = mockAnalysisJobs
+  .filter((j) => j.status === "succeeded")
+  .map((j, i) => {
+    const cameraName =
+      mockAssets.find((a) => a.id === j.source_id)?.meta?.title ?? "camera";
+    const personCount = 2 + (i % 4);
+    const vehicleCount = i % 3;
+    const models = j.models ?? CV_MODELS.slice(0, 2);
+    return {
+      job_id: j.id,
+      summary: `${models[0].split(":")[0].trim()} + ${
+        models[1]?.split("—")[0].trim() ?? "SAM 2"
+      } processed ${cameraName}. Detected ${personCount} ${
+        personCount === 1 ? "person" : "people"
+      }${vehicleCount ? ` and ${vehicleCount} vehicle(s)` : ""}. ${
+        i % 3 === 0
+          ? "Flagged brief loitering near the entrance."
+          : "No safety violations or anomalies."
+      }`,
+      tags: [
+        "person",
+        ...(vehicleCount ? ["vehicle"] : []),
+        i % 2 === 0 ? "indoor" : "outdoor",
+        i % 3 === 0 ? "loitering" : "normal",
+      ],
+      entities: [
+        { type: "person", count: personCount },
+        { type: "vehicle", count: vehicleCount },
+      ],
+      transcript_ref: models.some((m) => m.includes("Whisper"))
+        ? `transcript-${j.id}`
+        : null,
+      embeddings_ref: models.some((m) => m.includes("CLIP"))
+        ? `clip-${j.id}`
+        : null,
+      raw: {
+        models,
+        pipeline: "roboflow-workflow → sam2 → vlm-summary",
+        frames_processed: Math.round((j.asset_end_seconds ?? 600) / 2),
+        mean_confidence: 0.78 + (i % 10) / 100,
+      },
+      created_at: j.updated_at,
+    };
+  });
+
+// ────────────────────────────────────────────────────────────────────────
+// Detections (object detection frames per asset)
+// ────────────────────────────────────────────────────────────────────────
+
+export interface MockDetectionFrame {
+  frame_timestamp: number;
+  detections: Array<{
+    class: string;
+    confidence: number;
+    bbox: { x: number; y: number; width: number; height: number };
+  }>;
+}
+
+export function getMockDetectionsForAsset(
+  assetId: string,
+): MockDetectionFrame[] {
+  const asset = mockAssets.find((a) => a.id === assetId);
+  if (!asset) return [];
+  const frames: MockDetectionFrame[] = [];
+  const duration = asset.duration_seconds ?? 600;
+  const frameCount = Math.min(60, Math.floor(duration / 5));
+  for (let i = 0; i < frameCount; i++) {
+    const t = (duration * i) / frameCount;
+    const detections = [];
+    const personCount = (i * 7) % 4;
+    for (let p = 0; p < personCount; p++) {
+      detections.push({
+        class: "person",
+        confidence: 0.72 + ((i + p) % 20) / 100,
+        bbox: {
+          x: 0.1 + ((i * 11 + p * 30) % 60) / 100,
+          y: 0.2 + ((i * 13 + p * 20) % 40) / 100,
+          width: 0.08 + ((i + p) % 5) / 100,
+          height: 0.18 + ((i + p) % 7) / 100,
+        },
+      });
+    }
+    if (i % 5 === 0) {
+      detections.push({
+        class: "vehicle",
+        confidence: 0.81,
+        bbox: { x: 0.55, y: 0.45, width: 0.22, height: 0.18 },
+      });
+    }
+    frames.push({ frame_timestamp: t, detections });
+  }
+  return frames;
+}
+
+// ────────────────────────────────────────────────────────────────────────
+// Reports (Tiptap JSON)
+// ────────────────────────────────────────────────────────────────────────
+
+function tiptapDoc(blocks: Array<{ h?: string; p?: string }>) {
+  return {
+    type: "doc",
+    content: blocks.map((b) => {
+      if (b.h) {
+        return {
+          type: "heading",
+          attrs: { level: 2 },
+          content: [{ type: "text", text: b.h }],
+        };
+      }
+      return {
+        type: "paragraph",
+        content: b.p ? [{ type: "text", text: b.p }] : [],
+      };
+    }),
+  };
+}
+
+export const mockReports: Report[] = [
+  {
+    id: "demo-report-001",
+    title: "Weekly Security Summary — Week 16",
+    content: tiptapDoc([
+      { h: "Overview" },
+      {
+        p: "This week recorded 34 AI-flagged events across 8 cameras, with 6 events classified as high severity. Overall activity was within expected baselines.",
+      },
+      { h: "High-severity incidents" },
+      {
+        p: "Two unauthorized-person events were detected at the Loading Dock outside of business hours. Both were resolved by on-site staff within 15 minutes.",
+      },
+      { h: "Recommendations" },
+      {
+        p: "Extend motion-lighting coverage at the rear entrance. Review access-card usage for the server room vestibule.",
+      },
+    ]),
+    created_at: isoAt(4 * DAY),
+    updated_at: isoAt(4 * DAY),
+  },
+  {
+    id: "demo-report-002",
+    title: "Incident Review: Parking Lot A — Vehicle Contact",
+    content: tiptapDoc([
+      { h: "Incident" },
+      {
+        p: "At approximately 14:22 local time, two vehicles made contact in Parking Lot A. Both drivers exited their vehicles and exchanged information without further incident.",
+      },
+      { h: "Footage references" },
+      {
+        p: "Primary footage: camera demo-cam-002. Secondary angle from demo-cam-001 available for context.",
+      },
+      { h: "Outcome" },
+      {
+        p: "No injuries reported. Insurance information exchanged on-site. No further follow-up required.",
+      },
+    ]),
+    created_at: isoAt(1 * DAY),
+    updated_at: isoAt(1 * DAY),
+  },
+  {
+    id: "demo-report-003",
+    title: "Monthly Operations Metrics",
+    content: tiptapDoc([
+      { h: "Camera uptime" },
+      {
+        p: "Average uptime across active cameras was 99.2%. Rooftop camera remains disabled pending hardware replacement.",
+      },
+      { h: "Processing volume" },
+      {
+        p: "384 AI analysis jobs completed this month, with a success rate of 96.3%.",
+      },
+    ]),
+    created_at: isoAt(10 * DAY),
+    updated_at: isoAt(10 * DAY),
+  },
+];
+
+// In-memory store so POST /api/reports + createReport tool persist during a
+// single warm server instance. On serverless hosts, cold starts or requests
+// routed to a different instance may fall back to seeded reports, which is
+// acceptable for an ephemeral public demo.
+declare global {
+  // eslint-disable-next-line no-var
+  var __demoReportStore: Report[] | undefined;
+}
+export function demoReportStore(): Report[] {
+  if (!globalThis.__demoReportStore) {
+    globalThis.__demoReportStore = [...mockReports];
+  }
+  return globalThis.__demoReportStore;
+}
+
+// ────────────────────────────────────────────────────────────────────────
+// Stats (for /api/stats dashboard)
+// ────────────────────────────────────────────────────────────────────────
+
+function dailyTimeline<T extends Record<string, number>>(
+  days: number,
+  make: (dayIdx: number) => T,
+): Array<T & { date: string }> {
+  const out: Array<T & { date: string }> = [];
+  for (let d = days - 1; d >= 0; d--) {
+    const date = new Date(NOW - d * DAY).toISOString().split("T")[0];
+    out.push({ date, ...make(days - 1 - d) });
+  }
+  return out;
+}
+
+export const mockStats = {
+  jobStats: {
+    total: mockAnalysisJobs.length,
+    queued: mockAnalysisJobs.filter((j) => j.status === "queued").length,
+    processing: mockAnalysisJobs.filter((j) => j.status === "processing")
+      .length,
+    succeeded: mockAnalysisJobs.filter((j) => j.status === "succeeded").length,
+    failed: mockAnalysisJobs.filter((j) => j.status === "failed").length,
+    dead: 0,
+    successRate:
+      (mockAnalysisJobs.filter((j) => j.status === "succeeded").length /
+        mockAnalysisJobs.length) *
+      100,
+  },
+  topTags: [
+    { tag: "person", count: 128 },
+    { tag: "vehicle", count: 74 },
+    { tag: "outdoor", count: 61 },
+    { tag: "indoor", count: 54 },
+    { tag: "package", count: 22 },
+    { tag: "forklift", count: 18 },
+  ],
+  assetStats: {
+    total: mockAssets.length,
+    ready: mockAssets.length,
+    processing: 0,
+    errored: 0,
+  },
+  streamStats: {
+    total: mockCameras.length,
+    active: mockCameras.filter((c) => c.status === "active").length,
+    idle: mockCameras.filter((c) => c.status === "idle").length,
+    disabled: mockCameras.filter((c) => c.status === "disabled").length,
+  },
+  detectionStats: {
+    totalDetections: 1842,
+    totalFrames: 612,
+    averageDetectionsPerFrame: 3.01,
+    classCounts: [
+      { class: "person", count: 1204 },
+      { class: "vehicle", count: 412 },
+      { class: "package", count: 126 },
+      { class: "forklift", count: 100 },
+    ],
+  },
+  cameraActivity: mockCameras.map((c, i) => ({
+    camera_id: c.id,
+    camera_name: c.camera_name,
+    event_count: 40 - i * 4,
+  })),
+  jobsTimeline: dailyTimeline(14, (d) => ({
+    created: 8 + (d % 5),
+    succeeded: 7 + (d % 4),
+    failed: d % 3 === 0 ? 1 : 0,
+  })),
+  detectionsTimeline: dailyTimeline(14, (d) => ({
+    detections: 80 + d * 6,
+    frames: 30 + d * 2,
+  })),
+  occupancyData: Array.from({ length: 60 }, (_, i) => ({
+    timestamp: (NOW - (60 - i) * 60 * 1000) / 1000,
+    count: Math.max(0, Math.round(3 + Math.sin(i / 5) * 2 + (i % 4))),
+  })),
+  processingVolume: dailyTimeline(14, (d) => ({ volume: 6 + (d % 4) })),
+  assetDurations: [
+    { range: "0-30s", count: 2 },
+    { range: "30s-1m", count: 3 },
+    { range: "1-5m", count: 4 },
+    { range: "5-15m", count: 2 },
+    { range: "15-30m", count: 1 },
+  ],
+  esMetrics: {
+    eventSeverity: [
+      {
+        severity: "High",
+        count: mockEvents.filter((e) => e.severity === "High").length,
+      },
+      {
+        severity: "Medium",
+        count: mockEvents.filter((e) => e.severity === "Medium").length,
+      },
+      {
+        severity: "Minor",
+        count: mockEvents.filter((e) => e.severity === "Minor").length,
+      },
+    ],
+    eventTypes: Array.from(
+      mockEvents.reduce((acc, e) => {
+        acc.set(e.type, (acc.get(e.type) ?? 0) + 1);
+        return acc;
+      }, new Map<string, number>()),
+    ).map(([type, count]) => ({ type, count })),
+    eventTimeline: dailyTimeline(14, (d) => ({ count: 2 + (d % 4) })),
+    topEntities: [
+      { entity: "person", count: 92, type: "person" },
+      { entity: "vehicle", count: 54, type: "vehicle" },
+      { entity: "package", count: 18, type: "object" },
+    ],
+    entityTypes: [
+      { type: "person", count: 92 },
+      { type: "vehicle", count: 54 },
+      { type: "object", count: 24 },
+    ],
+    assetTypes: [
+      {
+        type: "live" as const,
+        count: mockCameras.filter((c) => c.status === "active").length,
+      },
+      { type: "vod" as const, count: mockAssets.length },
+    ],
+    cameraEventPatterns: mockCameras.map((c) => {
+      const evs = mockEvents.filter((e) =>
+        mockAssets.some(
+          (a) => a.id === e.asset_id && a.live_stream_id === c.id,
+        ),
+      );
+      const high = evs.filter((e) => e.severity === "High").length;
+      const medium = evs.filter((e) => e.severity === "Medium").length;
+      const minor = evs.filter((e) => e.severity === "Minor").length;
+      return {
+        camera_id: c.id,
+        camera_name: c.camera_name,
+        high,
+        medium,
+        minor,
+        total: high + medium + minor,
+      };
+    }),
+  },
+};
diff --git a/lib/demo/openrouter.ts b/lib/demo/openrouter.ts
new file mode 100644
index 0000000..6b2ebcf
--- /dev/null
+++ b/lib/demo/openrouter.ts
@@ -0,0 +1,20 @@
+import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
+
+const openRouterProvider = createOpenAICompatible({
+  name: "openrouter",
+  baseURL: "https://openrouter.ai/api/v1",
+  apiKey: process.env.OPENROUTER_API_KEY ?? "",
+  headers: {
+    "HTTP-Referer":
+      process.env.NEXT_PUBLIC_APP_URL ?? "https://argus.demo.local",
+    "X-Title": "Argus Demo",
+  },
+});
+
+export function openrouter(modelId: string) {
+  return openRouterProvider.chatModel(modelId);
+}
+
+// Cheap / free-tier models that work well with tool calling.
+export const OPENROUTER_DEFAULT_MODEL =
+  process.env.OPENROUTER_MODEL ?? "openai/gpt-4o-mini";
diff --git a/lib/demo/rate-limit.ts b/lib/demo/rate-limit.ts
new file mode 100644
index 0000000..83b166f
--- /dev/null
+++ b/lib/demo/rate-limit.ts
@@ -0,0 +1,86 @@
+/**
+ * Best-effort in-memory rate limiter for the public demo.
+ *
+ * A per-IP token bucket guards `/api/chat` against runaway cost/abuse on a
+ * public showcase. It is intentionally simple: state lives on `globalThis` so
+ * it survives module reloads within a warm serverless instance, but resets on
+ * cold start and is NOT shared across instances. Acceptable for a demo; a
+ * hardened deploy would back this with Redis/Upstash.
+ */
+
+interface Bucket {
+  tokens: number;
+  updatedAt: number;
+}
+
+interface RateLimiterConfig {
+  /** Maximum burst size. */
+  capacity: number;
+  /** Tokens refilled per second. */
+  refillPerSecond: number;
+}
+
+const DEFAULT_CONFIG: RateLimiterConfig = {
+  capacity: 12,
+  refillPerSecond: 12 / 60,
+};
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __demoRateBuckets: Map<string, Bucket> | undefined;
+}
+
+function buckets(): Map<string, Bucket> {
+  if (!globalThis.__demoRateBuckets) {
+    globalThis.__demoRateBuckets = new Map();
+  }
+  return globalThis.__demoRateBuckets;
+}
+
+export interface RateLimitResult {
+  ok: boolean;
+  remaining: number;
+  retryAfterSeconds: number;
+}
+
+export function checkRateLimit(
+  key: string,
+  config: RateLimiterConfig = DEFAULT_CONFIG,
+): RateLimitResult {
+  const now = Date.now();
+  const store = buckets();
+  const bucket = store.get(key) ?? { tokens: config.capacity, updatedAt: now };
+
+  const elapsedSeconds = (now - bucket.updatedAt) / 1000;
+  bucket.tokens = Math.min(
+    config.capacity,
+    bucket.tokens + elapsedSeconds * config.refillPerSecond,
+  );
+  bucket.updatedAt = now;
+
+  if (bucket.tokens >= 1) {
+    bucket.tokens -= 1;
+    store.set(key, bucket);
+    return {
+      ok: true,
+      remaining: Math.floor(bucket.tokens),
+      retryAfterSeconds: 0,
+    };
+  }
+
+  store.set(key, bucket);
+  const tokensNeeded = 1 - bucket.tokens;
+  const retryAfterSeconds = Math.ceil(tokensNeeded / config.refillPerSecond);
+  return { ok: false, remaining: 0, retryAfterSeconds };
+}
+
+/** Extract a best-effort client identifier from request headers. */
+export function clientKeyFromRequest(req: Request): string {
+  const fwd = req.headers.get("x-forwarded-for");
+  if (fwd) return (fwd.split(",")[0] ?? fwd).trim();
+  return (
+    req.headers.get("x-real-ip") ??
+    req.headers.get("cf-connecting-ip") ??
+    "anonymous"
+  );
+}
diff --git a/lib/demo/scripted-copilot.ts b/lib/demo/scripted-copilot.ts
new file mode 100644
index 0000000..f6e538d
--- /dev/null
+++ b/lib/demo/scripted-copilot.ts
@@ -0,0 +1,280 @@
+/**
+ * Deterministic scripted copilot — the no-LLM fallback for the onboarding
+ * wizard. When no provider key is configured (or the rate limiter trips), this
+ * pattern-matches the visitor's setup description and emits the same tool calls
+ * the real model would, so the wizard always works on stage.
+ *
+ * It is intentionally rule-based and dependency-free. The route turns the
+ * returned plan into a UI message stream (text + tool parts).
+ */
+
+import type { Severity } from "@/lib/demo/types";
+
+export type ScriptedToolName =
+  | "setOrgName"
+  | "addCamera"
+  | "addDetectionRule"
+  | "setAlerts"
+  | "completeOnboarding";
+
+export interface ScriptedCall {
+  toolName: ScriptedToolName;
+  input: Record<string, unknown>;
+}
+
+export interface ScriptedTurn {
+  text: string;
+  calls: ScriptedCall[];
+}
+
+interface LocationRule {
+  re: RegExp;
+  name: string;
+}
+
+const LOCATION_RULES: LocationRule[] = [
+  { re: /\block(by|bies)\b|lobby/i, name: "Lobby" },
+  { re: /parking|\bgarage\b|\blot\b/i, name: "Parking Lot" },
+  { re: /reception|front desk/i, name: "Reception" },
+  { re: /(loading )?dock/i, name: "Loading Dock" },
+  {
+    re: /front (door|entrance|entry)|main (entrance|entry)/i,
+    name: "Front Entrance",
+  },
+  { re: /(rear|back) (door|entrance|entry)/i, name: "Rear Entrance" },
+  { re: /warehouse/i, name: "Warehouse" },
+  { re: /server room|data ?center|server/i, name: "Server Room" },
+  { re: /roof(top)?/i, name: "Rooftop" },
+  { re: /hall(way)?|corridor/i, name: "Hallway" },
+  { re: /elevator|\blift\b/i, name: "Elevator" },
+  { re: /stair(well|s|way)?/i, name: "Stairwell" },
+  { re: /perimeter|fence|\byard\b/i, name: "Perimeter" },
+  { re: /\bexit\b/i, name: "Exit" },
+];
+
+interface DetectionRuleMatch {
+  re: RegExp;
+  label: string;
+  severity: Severity;
+  description: string;
+}
+
+const DETECTION_RULES: DetectionRuleMatch[] = [
+  {
+    re: /weapon|\bgun\b|knife|firearm|pistol|rifle/i,
+    label: "Weapons Detection",
+    severity: "High",
+    description: "Flag any visible weapon in frame.",
+  },
+  {
+    re: /medical|health|\bfall(s|en|ing)?\b|collaps|injur|faint|seizure/i,
+    label: "Medical Emergency",
+    severity: "High",
+    description: "Detect people who have fallen or appear in distress.",
+  },
+  {
+    re: /\bfire\b|smoke|flame/i,
+    label: "Fire & Smoke",
+    severity: "High",
+    description: "Detect fire or smoke and escalate immediately.",
+  },
+  {
+    re: /theft|shoplift|steal|stolen|robbery|robber/i,
+    label: "Theft",
+    severity: "High",
+    description: "Flag concealment of merchandise and suspected theft.",
+  },
+  {
+    re: /intrud|trespass|unauthor|break-?in|breaking in|burglar/i,
+    label: "Unauthorized Access",
+    severity: "High",
+    description: "Detect people entering restricted areas.",
+  },
+  {
+    re: /loiter/i,
+    label: "Loitering",
+    severity: "Medium",
+    description: "Flag individuals lingering for extended periods.",
+  },
+  {
+    re: /crowd|gathering|congregat/i,
+    label: "Crowding",
+    severity: "Medium",
+    description: "Detect unusual crowd density.",
+  },
+  {
+    re: /vehicle|traffic|collision|crash|\bcar\b|speeding/i,
+    label: "Traffic Incident",
+    severity: "Medium",
+    description: "Detect vehicle collisions and unsafe driving.",
+  },
+  {
+    re: /\bppe\b|helmet|hard ?hat|safety vest|safety/i,
+    label: "Safety Compliance",
+    severity: "Medium",
+    description: "Flag missing PPE in work zones.",
+  },
+  {
+    re: /vandal|graffiti|damage/i,
+    label: "Vandalism",
+    severity: "Medium",
+    description: "Detect property damage and vandalism.",
+  },
+  {
+    re: /tailgat|piggyback/i,
+    label: "Tailgating",
+    severity: "Medium",
+    description: "Detect unauthorized following through secure doors.",
+  },
+];
+
+const BUILDING_RULES: Array<{ re: RegExp; org: string }> = [
+  { re: /office|workplace|corporate/i, org: "Office HQ" },
+  { re: /warehouse|distribution|fulfil/i, org: "Warehouse Facility" },
+  { re: /retail|store|shop|boutique/i, org: "Retail Store" },
+  { re: /school|campus|university|college/i, org: "Campus Security" },
+  { re: /hospital|clinic|medical center/i, org: "Medical Center" },
+  { re: /apartment|residential|condo|housing/i, org: "Residential Complex" },
+  { re: /factory|plant|manufactur/i, org: "Manufacturing Plant" },
+  { re: /hotel|hospitality|resort/i, org: "Hotel & Resort" },
+  { re: /parking|garage/i, org: "Parking Operations" },
+];
+
+const CONFIRM_RE =
+  /\b(confirm|finish|done|complete|looks good|that'?s all|all set|launch|go ahead|let'?s go|proceed|finalize|wrap up)\b/i;
+
+function extractOrgName(text: string): string | null {
+  // Explicit naming: "company X", "called X", "org is X", quoted names.
+  const explicit = text.match(
+    /(?:org(?:anization)?|company|business|site|building|facility|office|store|name(?:d)?)\s+(?:is\s+|called\s+|named\s+|=\s*)?["']([^"']{2,40})["']/i,
+  );
+  if (explicit) return explicit[1].trim();
+  const called = text.match(
+    /\b(?:called|named)\s+["']?([A-Z][\w&'.-]*(?:\s+[A-Z][\w&'.-]*){0,3})["']?/,
+  );
+  if (called) return called[1].trim();
+  // Building-type fallback.
+  for (const b of BUILDING_RULES) {
+    if (b.re.test(text)) return b.org;
+  }
+  return null;
+}
+
+interface ScriptContext {
+  hasOrgName: boolean;
+  existingCameraNames: string[];
+  existingRuleLabels: string[];
+}
+
+/**
+ * Produce the scripted plan for a single user turn given the current overlay
+ * context (so we don't re-emit duplicates the user already has).
+ */
+export function scriptedOnboardingTurn(
+  userText: string,
+  ctx: ScriptContext,
+): ScriptedTurn {
+  const text = userText ?? "";
+  const calls: ScriptedCall[] = [];
+  const summaryParts: string[] = [];
+
+  // Organization name.
+  if (!ctx.hasOrgName) {
+    const org = extractOrgName(text);
+    if (org) {
+      calls.push({ toolName: "setOrgName", input: { name: org } });
+      summaryParts.push(`set your organization to **${org}**`);
+    }
+  }
+
+  // Cameras.
+  const existing = new Set(ctx.existingCameraNames.map((n) => n.toLowerCase()));
+  const addedCameras: string[] = [];
+  for (const loc of LOCATION_RULES) {
+    if (loc.re.test(text) && !existing.has(loc.name.toLowerCase())) {
+      existing.add(loc.name.toLowerCase());
+      addedCameras.push(loc.name);
+      calls.push({ toolName: "addCamera", input: { name: loc.name } });
+    }
+  }
+  if (addedCameras.length) {
+    summaryParts.push(
+      `added ${addedCameras.length} camera${addedCameras.length > 1 ? "s" : ""} (${addedCameras.join(", ")})`,
+    );
+  }
+
+  // Detection rules.
+  const existingRules = new Set(
+    ctx.existingRuleLabels.map((n) => n.toLowerCase()),
+  );
+  const addedRules: string[] = [];
+  for (const rule of DETECTION_RULES) {
+    if (rule.re.test(text) && !existingRules.has(rule.label.toLowerCase())) {
+      existingRules.add(rule.label.toLowerCase());
+      addedRules.push(rule.label);
+      calls.push({
+        toolName: "addDetectionRule",
+        input: {
+          label: rule.label,
+          description: rule.description,
+          severity: rule.severity,
+        },
+      });
+    }
+  }
+  if (addedRules.length) {
+    summaryParts.push(`enabled detection for ${addedRules.join(", ")}`);
+  }
+
+  // Alerts.
+  const wantsEmail = /email|e-mail/i.test(text);
+  const wantsSms = /\bsms\b|text message|texts?\b|phone/i.test(text);
+  const highOnly =
+    /high(\s|-)?only|critical(\s|-)?only|only (high|critical)/i.test(text);
+  if (wantsEmail || wantsSms || highOnly) {
+    const channels = ["dashboard"];
+    if (wantsEmail) channels.push("email");
+    if (wantsSms) channels.push("sms");
+    calls.push({
+      toolName: "setAlerts",
+      input: {
+        channels,
+        severityThreshold: highOnly ? "High" : "Medium",
+      },
+    });
+    summaryParts.push(`configured alerts via ${channels.join(", ")}`);
+  }
+
+  // Completion.
+  if (CONFIRM_RE.test(text)) {
+    calls.push({ toolName: "completeOnboarding", input: { confirm: true } });
+  }
+
+  // Build a friendly, grounded reply.
+  let reply: string;
+  if (calls.some((c) => c.toolName === "completeOnboarding")) {
+    reply =
+      "All set — your workspace is ready. Taking you to the live dashboard now.";
+  } else if (summaryParts.length) {
+    const joined =
+      summaryParts.length > 1
+        ? `${summaryParts.slice(0, -1).join(", ")} and ${summaryParts.at(-1)}`
+        : summaryParts[0];
+    reply = `Done — I ${joined}. Tell me about anything else you'd like to watch or flag, or say "finish" when you're ready.`;
+  } else {
+    reply =
+      "Tell me about your space — what kind of site it is, which areas you want cameras on (e.g. lobby, parking, loading dock), and what you'd like flagged (e.g. weapons, medical emergencies, theft). I'll set it all up.";
+  }
+
+  return { text: reply, calls };
+}
+
+/** Generic non-onboarding fallback text for the main AI chat with no key. */
+export function scriptedAssistantText(): string {
+  return (
+    "I'm running in offline demo mode right now, so live AI responses are " +
+    "paused. You can still explore the dashboard, watch cameras, browse " +
+    "events and reports, and try the onboarding copilot. Add an " +
+    "`ANTHROPIC_API_KEY` to enable full conversational AI."
+  );
+}
diff --git a/lib/demo/session-store.ts b/lib/demo/session-store.ts
new file mode 100644
index 0000000..8d9d8d9
--- /dev/null
+++ b/lib/demo/session-store.ts
@@ -0,0 +1,231 @@
+/**
+ * Demo-session overlay store
+ *
+ * A tiny `localStorage`-backed module store that holds the visitor's onboarding
+ * choices (org name, session-added cameras, detection rules, alert prefs) and an
+ * `onboardingComplete` flag. Dashboard hooks merge this overlay on top of the
+ * base mock fixtures so a visitor's "added" cameras show up alongside the seed
+ * data for the rest of their session.
+ *
+ * Designed for `useSyncExternalStore`:
+ *   - `subscribe(cb)` registers a listener, returns an unsubscribe fn.
+ *   - `getSnapshot()` returns a referentially-stable snapshot (new object only
+ *     when state actually changes), hydrated lazily from `localStorage`.
+ *   - `getServerSnapshot()` returns a constant empty snapshot so SSR + hydration
+ *     stay stable (React de-opts the subscribed value to a client re-render).
+ *
+ * The store is client-only. Server routes can't read `localStorage`, so the
+ * overlay is intentionally never sent to the server — camera/stat merges happen
+ * in client hooks (see `hooks/use-cameras-realtime.ts`).
+ */
+
+import { PUBLIC_PLAYBACKS } from "@/lib/demo/mock-data";
+import type {
+  AlertPrefs,
+  DemoSessionState,
+  DetectionRule,
+  Severity,
+} from "@/lib/demo/types";
+import type { Camera } from "@/lib/supabase";
+
+// `@/lib/demo/types` is the canonical home for these domain types; new code
+// should import them from there. This re-export is kept only because several
+// existing UI modules still import them via the session-store path.
+export type {
+  AlertChannel,
+  AlertPrefs,
+  DemoSessionState,
+  DetectionRule,
+  Severity,
+} from "@/lib/demo/types";
+
+const STORAGE_KEY = "argus.demo.session.v1";
+
+export const EMPTY_SESSION: DemoSessionState = {
+  orgName: null,
+  cameras: [],
+  detectionRules: [],
+  alertPrefs: { channels: ["dashboard"], severityThreshold: "Medium" },
+  onboardingComplete: false,
+};
+
+// ────────────────────────────────────────────────────────────────────────
+// Internal state + subscription plumbing
+// ────────────────────────────────────────────────────────────────────────
+
+let state: DemoSessionState = EMPTY_SESSION;
+let hydrated = false;
+const listeners = new Set<() => void>();
+
+function hydrateOnce() {
+  if (hydrated || typeof window === "undefined") return;
+  hydrated = true;
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw) as Partial<DemoSessionState>;
+      state = {
+        ...EMPTY_SESSION,
+        ...parsed,
+        cameras: parsed.cameras ?? [],
+        detectionRules: parsed.detectionRules ?? [],
+        alertPrefs: { ...EMPTY_SESSION.alertPrefs, ...parsed.alertPrefs },
+      };
+    }
+  } catch {
+    // Corrupt payload — fall back to empty and overwrite on next persist.
+    state = EMPTY_SESSION;
+  }
+}
+
+function persist() {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch {
+    // Quota / private-mode errors are non-fatal for a demo overlay.
+  }
+}
+
+function setState(next: DemoSessionState) {
+  state = next;
+  persist();
+  for (const l of listeners) l();
+}
+
+// Cross-tab + reset propagation.
+if (typeof window !== "undefined") {
+  window.addEventListener("storage", (e) => {
+    if (e.key !== STORAGE_KEY) return;
+    hydrated = false;
+    hydrateOnce();
+    for (const l of listeners) l();
+  });
+}
+
+// ────────────────────────────────────────────────────────────────────────
+// useSyncExternalStore contract
+// ────────────────────────────────────────────────────────────────────────
+
+export function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function getSnapshot(): DemoSessionState {
+  hydrateOnce();
+  return state;
+}
+
+export function getServerSnapshot(): DemoSessionState {
+  return EMPTY_SESSION;
+}
+
+// ────────────────────────────────────────────────────────────────────────
+// Mutators
+// ────────────────────────────────────────────────────────────────────────
+
+function slug(input: string) {
+  return input
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 32);
+}
+
+export function setOrgName(orgName: string) {
+  hydrateOnce();
+  setState({ ...state, orgName: orgName.trim() || null });
+}
+
+export interface AddCameraInput {
+  name: string;
+  location?: string;
+  status?: Camera["status"];
+}
+
+/**
+ * Build a fully-formed `Camera` for a session-added entry. Active cameras get a
+ * public playback ID so the watch tile renders live video, matching the base
+ * mock cameras.
+ */
+export function addCamera(input: AddCameraInput): Camera {
+  hydrateOnce();
+  const index = state.cameras.length;
+  const status: Camera["status"] = input.status ?? "active";
+  const playback = PUBLIC_PLAYBACKS[index % PUBLIC_PLAYBACKS.length];
+  const id = `session-cam-${slug(input.name) || "camera"}-${index + 1}`;
+  const camera: Camera = {
+    id,
+    browser_id: `session-browser-${index + 1}`,
+    camera_name: input.location
+      ? `${input.name} — ${input.location}`
+      : input.name,
+    stream_key: `session-key-${index + 1}`,
+    playback_ids: [{ id: playback, policy: "public" }],
+    status,
+    created_at: new Date().toISOString(),
+    last_connected_at: status === "active" ? new Date().toISOString() : null,
+    active_asset_id: null,
+    recent_asset_ids: [],
+    latency_mode: "low",
+    reconnect_window_seconds: 60,
+  };
+  setState({ ...state, cameras: [...state.cameras, camera] });
+  return camera;
+}
+
+export function removeCamera(id: string) {
+  hydrateOnce();
+  setState({ ...state, cameras: state.cameras.filter((c) => c.id !== id) });
+}
+
+export function renameCamera(id: string, camera_name: string) {
+  hydrateOnce();
+  setState({
+    ...state,
+    cameras: state.cameras.map((c) =>
+      c.id === id ? { ...c, camera_name } : c,
+    ),
+  });
+}
+
+export interface AddDetectionRuleInput {
+  label: string;
+  description?: string;
+  severity?: Severity;
+}
+
+export function addDetectionRule(input: AddDetectionRuleInput): DetectionRule {
+  hydrateOnce();
+  const rule: DetectionRule = {
+    id: `rule-${slug(input.label) || "rule"}-${state.detectionRules.length + 1}`,
+    label: input.label,
+    description: input.description,
+    severity: input.severity ?? "Medium",
+  };
+  setState({ ...state, detectionRules: [...state.detectionRules, rule] });
+  return rule;
+}
+
+export function removeDetectionRule(id: string) {
+  hydrateOnce();
+  setState({
+    ...state,
+    detectionRules: state.detectionRules.filter((r) => r.id !== id),
+  });
+}
+
+export function setAlerts(prefs: Partial<AlertPrefs>) {
+  hydrateOnce();
+  setState({ ...state, alertPrefs: { ...state.alertPrefs, ...prefs } });
+}
+
+export function completeOnboarding(complete = true) {
+  hydrateOnce();
+  setState({ ...state, onboardingComplete: complete });
+}
+
+export function reset() {
+  setState({ ...EMPTY_SESSION, alertPrefs: { ...EMPTY_SESSION.alertPrefs } });
+}
diff --git a/lib/demo/types.ts b/lib/demo/types.ts
new file mode 100644
index 0000000..295572e
--- /dev/null
+++ b/lib/demo/types.ts
@@ -0,0 +1,36 @@
+/**
+ * Shared domain types for the demo-session overlay. This module is the single
+ * source of truth; `lib/demo/session-store.ts` re-exports them for older UI
+ * modules that still import via the session-store path.
+ */
+
+import type { Camera } from "@/lib/supabase";
+
+export type Severity = "Minor" | "Medium" | "High";
+
+/** Notification channels an alert can be delivered through. */
+export type AlertChannel = "dashboard" | "email" | "sms";
+
+export interface DetectionRule {
+  id: string;
+  label: string;
+  description?: string;
+  severity: Severity;
+}
+
+export interface AlertPrefs {
+  email?: string;
+  phone?: string;
+  /** Notification channels, e.g. ["email", "sms", "dashboard"]. */
+  channels: AlertChannel[];
+  /** Only alert at or above this severity. */
+  severityThreshold: Severity;
+}
+
+export interface DemoSessionState {
+  orgName: string | null;
+  cameras: Camera[];
+  detectionRules: DetectionRule[];
+  alertPrefs: AlertPrefs;
+  onboardingComplete: boolean;
+}
diff --git a/lib/demo/use-realtime-demo.ts b/lib/demo/use-realtime-demo.ts
new file mode 100644
index 0000000..0b0e98e
--- /dev/null
+++ b/lib/demo/use-realtime-demo.ts
@@ -0,0 +1,28 @@
+/**
+ * Shared demo-mode helpers for the realtime hooks.
+ *
+ * In demo mode there is no Supabase backend: hooks serve static mock fixtures
+ * and never open a realtime channel. These helpers remove the copy-pasted
+ * boilerplate that branched on `isDemoMode` in every hook.
+ */
+
+import { type Dispatch, type SetStateAction, useState } from "react";
+import { isDemoMode } from "@/lib/demo/flag";
+
+/**
+ * Initial `[data, loading]` state for a "list" realtime hook. In demo mode the
+ * data starts as the provided mock fixture and `loading` is false (there is
+ * nothing to fetch); otherwise it starts empty and loading.
+ */
+export function useDemoListState<T>(
+  mock: T[],
+): [
+  T[],
+  Dispatch<SetStateAction<T[]>>,
+  boolean,
+  Dispatch<SetStateAction<boolean>>,
+] {
+  const [data, setData] = useState<T[]>(isDemoMode ? mock : []);
+  const [loading, setLoading] = useState(!isDemoMode);
+  return [data, setData, loading, setLoading];
+}
diff --git a/lib/format.ts b/lib/format.ts
new file mode 100644
index 0000000..e98d7e7
--- /dev/null
+++ b/lib/format.ts
@@ -0,0 +1,25 @@
+/** Shared, locale-aware display formatters used across dashboard surfaces. */
+
+/** Compact relative age of a timestamp, e.g. "just now", "5m ago", "3d ago". */
+export function relativeTime(timestamp: string | null): string {
+  if (!timestamp) return "—";
+  const diff = Date.now() - new Date(timestamp).getTime();
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+  if (minutes < 1) return "just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  return `${days}d ago`;
+}
+
+/** Formats a duration in seconds as `m:ss`; returns `fallback` for empty values. */
+export function formatClockDuration(
+  seconds: number | null | undefined,
+  fallback = "—",
+): string {
+  if (!seconds) return fallback;
+  const minutes = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${minutes}:${String(secs).padStart(2, "0")}`;
+}
diff --git a/lib/navigation.ts b/lib/navigation.ts
new file mode 100644
index 0000000..675bfcf
--- /dev/null
+++ b/lib/navigation.ts
@@ -0,0 +1,59 @@
+import {
+  type Icon,
+  IconBug,
+  IconChartBar,
+  IconDatabase,
+  IconFileText,
+  IconList,
+  IconMessageChatbot,
+  IconPlayerPlay,
+  IconSearch,
+  IconVideo,
+} from "@tabler/icons-react";
+import { isDemoMode } from "@/lib/demo/flag";
+import { reset as resetDemoSession } from "@/lib/demo/session-store";
+
+export interface NavItem {
+  title: string;
+  url: string;
+  icon: Icon;
+}
+
+export interface NavSection {
+  title: string;
+  items: NavItem[];
+}
+
+/** Single source of truth for primary app navigation (sidebar + command menu). */
+export const navSections: NavSection[] = [
+  {
+    title: "Stream",
+    items: [{ title: "Create Stream", url: "/stream", icon: IconVideo }],
+  },
+  {
+    title: "Dashboard",
+    items: [
+      { title: "Watch", url: "/watch", icon: IconPlayerPlay },
+      { title: "Stats", url: "/stats", icon: IconChartBar },
+      { title: "Search", url: "/search", icon: IconSearch },
+      { title: "AI Chat", url: "/ai-chat", icon: IconMessageChatbot },
+      { title: "Reports", url: "/reports", icon: IconFileText },
+    ],
+  },
+  {
+    title: "Admin",
+    items: [
+      { title: "Jobs", url: "/jobs", icon: IconList },
+      { title: "Database", url: "/database", icon: IconDatabase },
+      // Debug tools are hidden in the public demo.
+      ...(isDemoMode ? [] : [{ title: "Debug", url: "/debug", icon: IconBug }]),
+    ],
+  },
+];
+
+/** Resets demo session state and reloads to the base demo view. */
+export function resetDemoAndReload() {
+  resetDemoSession();
+  // Full reload returns every hook to base fixtures + first-run onboarding.
+  window.location.href = "/watch";
+}
diff --git a/lib/prompts.ts b/lib/prompts.ts
new file mode 100644
index 0000000..be0fc01
--- /dev/null
+++ b/lib/prompts.ts
@@ -0,0 +1,36 @@
+/**
+ * System prompts for the chat API route.
+ *
+ * Each constant holds the exact prompt body used for a given mode. The route
+ * prepends a runtime header (current date/time) before sending them to the
+ * model, so these stay free of interpolation.
+ */
+
+/** Guides a new user through configuring their surveillance workspace. */
+export const ONBOARDING_SYSTEM_PROMPT = `You are the Argus setup copilot, guiding a new user through configuring their AI surveillance workspace.
+
+Walk them through four areas, in order, but adapt to whatever they tell you:
+1. Organization / site name — call setOrgName.
+2. Cameras — call addCamera ONCE for each area they want to watch (e.g. lobby, parking, loading dock).
+3. AI detection rules — call addDetectionRule ONCE for each thing they want flagged (e.g. weapons, medical emergencies, theft).
+4. Alerts — call setAlerts to choose channels (dashboard, email, sms) and the minimum severity.
+
+Guidelines:
+- STRONGLY prefer calling tools to fill the form over just describing steps. When the user describes their space, immediately make the relevant tool calls.
+- Infer sensible values from their description; you don't need to ask about every detail.
+- Keep replies short, warm, and concrete — one or two sentences.
+- After you've set things up, summarize what you configured and ask the user to confirm.
+- Only call completeOnboarding AFTER the user confirms they're happy.
+- This is a demo with sample data; live streaming is simulated.`;
+
+/** Demo environment: tool-driven assistant grounded in sample fixtures. */
+export const DEMO_SYSTEM_PROMPT =
+  "You are Argus, an AI assistant for a video surveillance platform. You are currently running in a DEMO environment with sample data. When users ask about cameras, events, recordings, or reports, use the available tools to display them as interactive cards. Use displayEvent or displayEventById for specific events, displayAsset for video recordings, and createReport to generate investigation summaries or documentation. Keep responses concise, helpful, and grounded in the demo fixtures. Live streaming is disabled in this demo.";
+
+/** Production with Elastic Agent Builder MCP tools available. */
+export const ELASTIC_SYSTEM_PROMPT =
+  "You are a helpful AI assistant named Argus with access to a video content database through Elastic Agent Builder. When users ask about videos, streams, or recorded content, use the available search tools to find relevant information. For more advanced filtering and complex queries, you can use the generate_esql tool to create ES|QL queries and then execute them with the execute_esql tool. When you mention specific events from search results, use the displayEvent or displayEventById tools to show them as interactive cards that users can click to watch the video at that moment. To show a full video asset with a player, use the displayAsset tool with the asset ID. You can also create comprehensive reports using the createReport tool - use this to generate documentation, analysis summaries, or investigation reports with properly formatted markdown content. Provide clear, concise responses based on the search results.";
+
+/** Production fallback when Elasticsearch/Kibana is not configured. */
+export const FALLBACK_SYSTEM_PROMPT =
+  "You are a helpful AI assistant for a video streaming platform. You can help users with questions about their video content, streams, and recordings. When discussing specific events, use the displayEvent or displayEventById tools to show them as interactive cards. To show a full video asset with a player, use the displayAsset tool with the asset ID. You can also create comprehensive reports using the createReport tool - use this to generate documentation, analysis summaries, or investigation reports with properly formatted markdown content.";
diff --git a/lib/supabase.ts b/lib/supabase.ts
index 1c7ea4f..676aa02 100644
--- a/lib/supabase.ts
+++ b/lib/supabase.ts
@@ -1,16 +1,29 @@
 import { createClient } from "@supabase/supabase-js";
+import { isDemoMode } from "./demo/flag";
 
-const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
-const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
 
-if (!supabaseUrl || !supabaseAnonKey) {
+if (!isDemoMode && (!supabaseUrl || !supabaseAnonKey)) {
   throw new Error(
     "Missing Supabase environment variables. Please set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY",
   );
 }
 
-// Client for both frontend and backend (no RLS in demo project)
-export const supabase = createClient(supabaseUrl, supabaseAnonKey);
+// Placeholder credentials for demo mode, where the client is never actually
+// used (these are never sent anywhere).
+const DEMO_SUPABASE_URL = "https://demo.invalid.supabase.co";
+const DEMO_SUPABASE_ANON_KEY = "demo-anon-key";
+
+// In demo mode the client is never used — all API routes short-circuit to
+// mock data before touching it. We still export a typed placeholder so
+// imports don't fail at module load.
+export const supabase = isDemoMode
+  ? createClient(
+      supabaseUrl || DEMO_SUPABASE_URL,
+      supabaseAnonKey || DEMO_SUPABASE_ANON_KEY,
+    )
+  : createClient(supabaseUrl!, supabaseAnonKey!);
 
 // Database types
 // Camera is now based on mux.live_streams table with camera-specific fields
@@ -99,6 +112,8 @@ export interface AIAnalysisJob {
   result_ref: number | null;
   created_at: string;
   updated_at: string;
+  // CV pipeline that processed this job (e.g. Roboflow, SAM). Demo metadata.
+  models?: string[];
 }
 
 export interface AIAnalysisResult {
diff --git a/next.config.ts b/next.config.ts
index 707e78e..8bc6305 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -3,7 +3,15 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   // Set the root directory for output file tracing to fix lockfile warning
   outputFileTracingRoot: __dirname,
-  
+
+  // Expose DEMO_MODE to client bundles too. `isDemoMode` (lib/demo/flag.ts) is
+  // read in client components (watch grid, sidebar, etc.); without this the
+  // browser would see `process.env.DEMO_MODE` as undefined and take non-demo
+  // paths even when the server is in demo mode.
+  env: {
+    DEMO_MODE: process.env.DEMO_MODE,
+  },
+
   // Disable tracing to prevent EPERM errors on Windows
   experimental: {
     disableOptimizedLoading: false,
diff --git a/package.json b/package.json
index 4861da2..cddadbb 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "nodemon server.js",
     "build": "next build",
+    "vercel-build": "next build",
     "start": "dotenv -e .env.prod -- cross-env NODE_ENV=production node server.js",
     "lint": "biome check --write",
     "format": "biome format --write"
@@ -25,7 +26,9 @@
     "@ai-sdk/anthropic": "^2.0.37",
     "@ai-sdk/groq": "^2.0.24",
     "@ai-sdk/mcp": "^0.0.1",
+    "@ai-sdk/openai-compatible": "^1.0.23",
     "@ai-sdk/react": "^2.0.79",
+    "@base-ui/react": "^1.6.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
@@ -102,8 +105,8 @@
     "gsap": "^3.13.0",
     "lodash.throttle": "^4.1.1",
     "lucide-react": "^0.546.0",
-    "mini-svg-data-uri": "^1.4.4",
     "marked": "^16.4.1",
+    "mini-svg-data-uri": "^1.4.4",
     "motion": "^12.23.24",
     "nanoid": "^5.1.6",
     "next": "15.5.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ec80e83..d3b0428 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,9 +17,15 @@ importers:
       '@ai-sdk/mcp':
         specifier: ^0.0.1
         version: 0.0.1(zod@4.1.12)
+      '@ai-sdk/openai-compatible':
+        specifier: ^1.0.23
+        version: 1.0.36(zod@4.1.12)
       '@ai-sdk/react':
         specifier: ^2.0.79
         version: 2.0.79(react@19.1.0)(zod@4.1.12)
+      '@base-ui/react':
+        specifier: ^1.6.0
+        version: 1.6.0(@date-fns/tz@1.4.1)(@types/react@19.2.2)(date-fns@4.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@dnd-kit/core':
         specifier: ^6.3.1
         version: 6.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -190,7 +196,7 @@ importers:
         version: 3.8.0
       '@tiptap/react':
         specifier: ^3.8.0
-        version: 3.8.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.8.0(@tiptap/pm@3.8.0))(@tiptap/pm@3.8.0)(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        version: 3.8.0(@floating-ui/dom@1.7.6)(@tiptap/core@3.8.0(@tiptap/pm@3.8.0))(@tiptap/pm@3.8.0)(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@tiptap/starter-kit':
         specifier: ^3.8.0
         version: 3.8.0
@@ -396,6 +402,12 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
+  '@ai-sdk/openai-compatible@1.0.36':
+    resolution: {integrity: sha512-ePJ1nj1Wv2QcG9m8zA3zT20WBInFqEfwV17KT0JBeRyQucmiJBwIhzLkOq95O0sBwUutJJJrQNG8pEYxGf6w3w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   '@ai-sdk/provider-utils@2.2.8':
     resolution: {integrity: sha512-fqhG+4sCVv8x7nFzYnFo19ryhAa3w096Kmc3hWxMQfW/TubPOmt3A6tYZhl4mUfQWWQMsuSkLrtjlWuXBVSGQA==}
     engines: {node: '>=18'}
@@ -408,6 +420,12 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
+  '@ai-sdk/provider-utils@3.0.23':
+    resolution: {integrity: sha512-60GYsRj5wIJQRcq5YwYJq4KhwLeStceXEJiZdecP1miiH+6FMmrnc7lZDOJoQ6m9lrudEb+uI4LEwddLz5+rPQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   '@ai-sdk/provider@1.1.3':
     resolution: {integrity: sha512-qZMxYJ0qqX/RfnuIaab+zp8UAeJn/ygXXAffR5I4N0n1IrvA6qBsjc8hXLmBiMV2zoXlifkacF7sEFnYnjBcqg==}
     engines: {node: '>=18'}
@@ -416,6 +434,10 @@ packages:
     resolution: {integrity: sha512-6o7Y2SeO9vFKB8lArHXehNuusnpddKPk7xqL7T2/b+OvXMRIXUO1rR4wcv1hAFUAT9avGZshty3Wlua/XA7TvA==}
     engines: {node: '>=18'}
 
+  '@ai-sdk/provider@2.0.1':
+    resolution: {integrity: sha512-KCUwswvsC5VsW2PWFqF8eJgSCu5Ysj7m1TxiHTVA6g7k360bk0RNQENT8KTMAYEs+8fWPD3Uu4dEmzGHc+jGng==}
+    engines: {node: '>=18'}
+
   '@ai-sdk/react@2.0.79':
     resolution: {integrity: sha512-rAz7cYdBYFExngZm/o2tt6w5NgXeTalQEzEOQbD4Rlm35IDJauCsgtuQI7CBt/v9WCuMQUSEHwJ4f1zsGM3PqA==}
     engines: {node: '>=18'}
@@ -446,6 +468,37 @@ packages:
     resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
+  '@base-ui/react@1.6.0':
+    resolution: {integrity: sha512-/jzjTWJYXhRFO45Bev9lc3cHbmjzCMpUqbMZ2AgKy/z25mY9B6shGSNcXcjQar9n5doM0KYW1W8fcFv2jZBuMw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@date-fns/tz': ^1.2.0
+      '@types/react': ^17 || ^18 || ^19
+      date-fns: ^4.0.0
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@date-fns/tz':
+        optional: true
+      '@types/react':
+        optional: true
+      date-fns:
+        optional: true
+
+  '@base-ui/utils@0.3.1':
+    resolution: {integrity: sha512-gFFiltORVmW/N6IILTGxizP3PBpVpysqML1ALY5Vk0mH+7faVkCknOU31goYHN5Aoek2dkjxva1XOD2Ce9WuIg==}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@biomejs/biome@2.2.0':
     resolution: {integrity: sha512-3On3RSYLsX+n9KnoSgfoYlckYBoU6VRM22cw1gB4Y0OuUVSYd/O/2saOJMrA4HFfA1Ff0eacOvMN1yAAvHtzIw==}
     engines: {node: '>=14.21.3'}
@@ -565,15 +618,27 @@ packages:
   '@floating-ui/core@1.7.3':
     resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
 
+  '@floating-ui/core@1.7.5':
+    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
+
   '@floating-ui/dom@1.7.4':
     resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
 
+  '@floating-ui/dom@1.7.6':
+    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
+
   '@floating-ui/react-dom@2.1.6':
     resolution: {integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
+  '@floating-ui/react-dom@2.1.8':
+    resolution: {integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
   '@floating-ui/react@0.27.16':
     resolution: {integrity: sha512-9O8N4SeG2z++TSM8QA/KTeKFBVCNEz/AGS7gWPJf6KFRzmRWixFRnCnkPHRDwSVZW6QPDO6uT0P2SpWNKCc9/g==}
     peerDependencies:
@@ -583,6 +648,9 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
+  '@floating-ui/utils@0.2.11':
+    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
@@ -3664,6 +3732,9 @@ packages:
   remark-stringify@11.0.0:
     resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
 
+  reselect@5.2.0:
+    resolution: {integrity: sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==}
+
   robust-predicates@3.0.2:
     resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
 
@@ -4133,6 +4204,12 @@ snapshots:
       pkce-challenge: 5.0.0
       zod: 4.1.12
 
+  '@ai-sdk/openai-compatible@1.0.36(zod@4.1.12)':
+    dependencies:
+      '@ai-sdk/provider': 2.0.1
+      '@ai-sdk/provider-utils': 3.0.23(zod@4.1.12)
+      zod: 4.1.12
+
   '@ai-sdk/provider-utils@2.2.8(zod@4.1.12)':
     dependencies:
       '@ai-sdk/provider': 1.1.3
@@ -4147,6 +4224,13 @@ snapshots:
       eventsource-parser: 3.0.6
       zod: 4.1.12
 
+  '@ai-sdk/provider-utils@3.0.23(zod@4.1.12)':
+    dependencies:
+      '@ai-sdk/provider': 2.0.1
+      '@standard-schema/spec': 1.0.0
+      eventsource-parser: 3.0.6
+      zod: 4.1.12
+
   '@ai-sdk/provider@1.1.3':
     dependencies:
       json-schema: 0.4.0
@@ -4155,6 +4239,10 @@ snapshots:
     dependencies:
       json-schema: 0.4.0
 
+  '@ai-sdk/provider@2.0.1':
+    dependencies:
+      json-schema: 0.4.0
+
   '@ai-sdk/react@2.0.79(react@19.1.0)(zod@4.1.12)':
     dependencies:
       '@ai-sdk/provider-utils': 3.0.12(zod@4.1.12)
@@ -4183,6 +4271,33 @@ snapshots:
 
   '@babel/runtime@7.28.4': {}
 
+  '@babel/runtime@7.29.7': {}
+
+  '@base-ui/react@1.6.0(@date-fns/tz@1.4.1)(@types/react@19.2.2)(date-fns@4.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@base-ui/utils': 0.3.1(@types/react@19.2.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@floating-ui/react-dom': 2.1.8(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@floating-ui/utils': 0.2.11
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      use-sync-external-store: 1.6.0(react@19.1.0)
+    optionalDependencies:
+      '@date-fns/tz': 1.4.1
+      '@types/react': 19.2.2
+      date-fns: 4.1.0
+
+  '@base-ui/utils@0.3.1(@types/react@19.2.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@floating-ui/utils': 0.2.11
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      reselect: 5.2.0
+      use-sync-external-store: 1.6.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@biomejs/biome@2.2.0':
     optionalDependencies:
       '@biomejs/cli-darwin-arm64': 2.2.0
@@ -4304,17 +4419,32 @@ snapshots:
     dependencies:
       '@floating-ui/utils': 0.2.10
 
+  '@floating-ui/core@1.7.5':
+    dependencies:
+      '@floating-ui/utils': 0.2.11
+
   '@floating-ui/dom@1.7.4':
     dependencies:
       '@floating-ui/core': 1.7.3
       '@floating-ui/utils': 0.2.10
 
+  '@floating-ui/dom@1.7.6':
+    dependencies:
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/utils': 0.2.11
+
   '@floating-ui/react-dom@2.1.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@floating-ui/dom': 1.7.4
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
 
+  '@floating-ui/react-dom@2.1.8(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   '@floating-ui/react@0.27.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@floating-ui/react-dom': 2.1.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -4325,6 +4455,8 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
+  '@floating-ui/utils@0.2.11': {}
+
   '@iconify/types@2.0.0': {}
 
   '@iconify/utils@3.0.2':
@@ -5458,9 +5590,9 @@ snapshots:
     dependencies:
       '@tiptap/extensions': 3.8.0(@tiptap/core@3.8.0(@tiptap/pm@3.8.0))(@tiptap/pm@3.8.0)
 
-  '@tiptap/extension-floating-menu@3.8.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.8.0(@tiptap/pm@3.8.0))(@tiptap/pm@3.8.0)':
+  '@tiptap/extension-floating-menu@3.8.0(@floating-ui/dom@1.7.6)(@tiptap/core@3.8.0(@tiptap/pm@3.8.0))(@tiptap/pm@3.8.0)':
     dependencies:
-      '@floating-ui/dom': 1.7.4
+      '@floating-ui/dom': 1.7.6
       '@tiptap/core': 3.8.0(@tiptap/pm@3.8.0)
       '@tiptap/pm': 3.8.0
     optional: true
@@ -5591,7 +5723,7 @@ snapshots:
       prosemirror-transform: 1.10.4
       prosemirror-view: 1.41.3
 
-  '@tiptap/react@3.8.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.8.0(@tiptap/pm@3.8.0))(@tiptap/pm@3.8.0)(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@tiptap/react@3.8.0(@floating-ui/dom@1.7.6)(@tiptap/core@3.8.0(@tiptap/pm@3.8.0))(@tiptap/pm@3.8.0)(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@tiptap/core': 3.8.0(@tiptap/pm@3.8.0)
       '@tiptap/pm': 3.8.0
@@ -5604,7 +5736,7 @@ snapshots:
       use-sync-external-store: 1.6.0(react@19.1.0)
     optionalDependencies:
       '@tiptap/extension-bubble-menu': 3.8.0(@tiptap/core@3.8.0(@tiptap/pm@3.8.0))(@tiptap/pm@3.8.0)
-      '@tiptap/extension-floating-menu': 3.8.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.8.0(@tiptap/pm@3.8.0))(@tiptap/pm@3.8.0)
+      '@tiptap/extension-floating-menu': 3.8.0(@floating-ui/dom@1.7.6)(@tiptap/core@3.8.0(@tiptap/pm@3.8.0))(@tiptap/pm@3.8.0)
     transitivePeerDependencies:
       - '@floating-ui/dom'
 
@@ -7817,6 +7949,8 @@ snapshots:
       mdast-util-to-markdown: 2.1.2
       unified: 11.0.5
 
+  reselect@5.2.0: {}
+
   robust-predicates@3.0.2: {}
 
   rope-sequence@1.3.4: {}
diff --git a/public/assets/bg1.webp b/public/assets/bg1.webp
new file mode 100644
index 0000000..f1d455b
Binary files /dev/null and b/public/assets/bg1.webp differ
diff --git a/public/assets/bg2.webp b/public/assets/bg2.webp
new file mode 100644
index 0000000..9b83bb6
Binary files /dev/null and b/public/assets/bg2.webp differ
diff --git a/public/assets/bg3.webp b/public/assets/bg3.webp
new file mode 100644
index 0000000..8f0c4e4
Binary files /dev/null and b/public/assets/bg3.webp differ
diff --git a/public/assets/bg4.webp b/public/assets/bg4.webp
new file mode 100644
index 0000000..02ed23b
Binary files /dev/null and b/public/assets/bg4.webp differ
diff --git a/public/assets/bg5.webp b/public/assets/bg5.webp
new file mode 100644
index 0000000..f667f96
Binary files /dev/null and b/public/assets/bg5.webp differ
diff --git a/server.js b/server.js
index ceefd6d..b761efc 100644
--- a/server.js
+++ b/server.js
@@ -54,7 +54,7 @@ app.prepare().then(() => {
   // Track active connections
   let connectionCount = 0;
   const activeConnections = new Map();
-  
+
   // WebSocket send queue configuration
   const WS_BUFFER_THRESHOLD = 1024 * 1024; // 1MB - pause if buffer exceeds this
 
@@ -164,13 +164,13 @@ app.prepare().then(() => {
       "60", // keyframe every 2 seconds at 30fps
       "-sc_threshold",
       "0",
-      
+
       // Additional buffering for input stability
       "-probesize",
       "10M",
       "-analyzeduration",
       "5M",
-      
+
       "-f",
       "flv",
       "-flvflags",
@@ -185,7 +185,7 @@ app.prepare().then(() => {
       // This helps prevent data loss during brief network hiccups
       stdio: ["pipe", "pipe", "pipe"],
     });
-    
+
     // Increase stdin buffer size to handle bursty data better
     if (ffmpeg.stdin && ffmpeg.stdin.setDefaultEncoding) {
       ffmpeg.stdin.setMaxListeners(0);
@@ -343,7 +343,7 @@ app.prepare().then(() => {
           // Check if ffmpeg stdin buffer is getting full
           // If it is, we might want to apply backpressure
           const canWrite = ffmpeg.stdin.write(msg);
-          
+
           if (!canWrite) {
             // Buffer is full, wait for drain event
             // This implements backpressure to prevent memory issues
diff --git a/skills-lock.json b/skills-lock.json
new file mode 100644
index 0000000..f05b92a
--- /dev/null
+++ b/skills-lock.json
@@ -0,0 +1,95 @@
+{
+  "version": 1,
+  "skills": {
+    "caveman": {
+      "source": "mattpocock/skills",
+      "sourceType": "github",
+      "skillPath": "skills/productivity/caveman/SKILL.md",
+      "computedHash": "536908fcfcb232600a5875aa85f1fd50fd13305e9d67379bcd95f07c8c916f3f"
+    },
+    "diagnose": {
+      "source": "mattpocock/skills",
+      "sourceType": "github",
+      "skillPath": "skills/engineering/diagnose/SKILL.md",
+      "computedHash": "1c3c85517ac42116fe5f2bfb5150f7b3e38ad23808e40b33fbb01f1afb611983"
+    },
+    "grill-me": {
+      "source": "mattpocock/skills",
+      "sourceType": "github",
+      "skillPath": "skills/productivity/grill-me/SKILL.md",
+      "computedHash": "daf64ca15f4fa081a6747766db538e2dbd1131725ed4fcdd3d538dc62c7035ba"
+    },
+    "grill-with-docs": {
+      "source": "mattpocock/skills",
+      "sourceType": "github",
+      "skillPath": "skills/engineering/grill-with-docs/SKILL.md",
+      "computedHash": "7c212cee6a823b956aaec7dff2a846814fe9986caa2e62313734010c7bd3db70"
+    },
+    "handoff": {
+      "source": "mattpocock/skills",
+      "sourceType": "github",
+      "skillPath": "skills/productivity/handoff/SKILL.md",
+      "computedHash": "3fdffd9dce6fc3e9f9f756ba79d694c5f162e11c7e7fbc72a0958f204312e0b1"
+    },
+    "improve-codebase-architecture": {
+      "source": "mattpocock/skills",
+      "sourceType": "github",
+      "skillPath": "skills/engineering/improve-codebase-architecture/SKILL.md",
+      "computedHash": "5d9444ffe5c240f2d20081c42c547112e1b8c372375a14e4c98df4d94bde11e1"
+    },
+    "prototype": {
+      "source": "mattpocock/skills",
+      "sourceType": "github",
+      "skillPath": "skills/engineering/prototype/SKILL.md",
+      "computedHash": "f52c019c3e0af2ad1807332d553b9ee7282a28c162d78cdeddd89dc8456b73ff"
+    },
+    "setup-matt-pocock-skills": {
+      "source": "mattpocock/skills",
+      "sourceType": "github",
+      "skillPath": "skills/engineering/setup-matt-pocock-skills/SKILL.md",
+      "computedHash": "f686b246e95afeaeeb3ff21b0f9f2c1ab29b02958468170cc9802fb477508488"
+    },
+    "tdd": {
+      "source": "mattpocock/skills",
+      "sourceType": "github",
+      "skillPath": "skills/engineering/tdd/SKILL.md",
+      "computedHash": "78b31b2120c5fe7aced1cebfd4c7c94acb0037fd4f89c83c67584414aa4173bd"
+    },
+    "teach": {
+      "source": "mattpocock/skills",
+      "sourceType": "github",
+      "skillPath": "skills/productivity/teach/SKILL.md",
+      "computedHash": "d1c64f5747de3da32afd390096ecc9a116245e3b4a17c587b5de345e8235522a"
+    },
+    "to-issues": {
+      "source": "mattpocock/skills",
+      "sourceType": "github",
+      "skillPath": "skills/engineering/to-issues/SKILL.md",
+      "computedHash": "41915d1686991b0d3796eb0b52f3aa8e9021abc5f268d14e6dc62e95dbf8e044"
+    },
+    "to-prd": {
+      "source": "mattpocock/skills",
+      "sourceType": "github",
+      "skillPath": "skills/engineering/to-prd/SKILL.md",
+      "computedHash": "1f5f7a475757eb4030155130f4fd7f161a20e5731c4b39edd4abe2df9cc72901"
+    },
+    "triage": {
+      "source": "mattpocock/skills",
+      "sourceType": "github",
+      "skillPath": "skills/engineering/triage/SKILL.md",
+      "computedHash": "56ff15b41bbebfa4cb329d96150d9b297c1d919ce30784d883b8755b4bfd8e7e"
+    },
+    "write-a-skill": {
+      "source": "mattpocock/skills",
+      "sourceType": "github",
+      "skillPath": "skills/productivity/write-a-skill/SKILL.md",
+      "computedHash": "3b58a16bde08f84ed490cd449ecdc40289216d660e070c485f53bc2d1ed2b843"
+    },
+    "zoom-out": {
+      "source": "mattpocock/skills",
+      "sourceType": "github",
+      "skillPath": "skills/engineering/zoom-out/SKILL.md",
+      "computedHash": "a8b8ed45609fdfa9f184d0c9f69326e43822a42eebea14db2792d777373de562"
+    }
+  }
+}
diff --git a/utils/cn.ts b/utils/cn.ts
deleted file mode 100644
index 365058c..0000000
--- a/utils/cn.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..cfd1475
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,7 @@
+{
+  "framework": "nextjs",
+  "buildCommand": "next build",
+  "functions": {
+    "app/api/chat/route.ts": { "maxDuration": 60 }
+  }
+}
diff --git a/worker/.dockerignore b/worker/.dockerignore
new file mode 100644
index 0000000..b70b154
--- /dev/null
+++ b/worker/.dockerignore
@@ -0,0 +1,7 @@
+node_modules
+.next
+dist
+coverage
+npm-debug.log
+pnpm-debug.log
+*.log