diff --git a/AGENTS.md b/AGENTS.md
index 455e20f..87860bf 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -22,6 +22,14 @@ bd close <id> --reason "<what was completed>"
 bd sync
 ```
 
+## Bead Prompting Standard
+
+1. When creating or rewriting bead details, follow `docs/protocols/bead-prompting.md`.
+2. Bead descriptions must be model-facing prompts, not internal prose notes.
+3. Include explicit `Scope` and `Out of Scope` in every bead.
+4. Treat `Success Criteria` as the completion contract.
+5. Keep dependency flow minimal and execution-correct.
+
 ## Start-of-Task Protocol
 
 1. Read the target bead and acceptance criteria (`bd show <id>`).
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
new file mode 100644
index 0000000..1647513
--- /dev/null
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
new file mode 100644
index 0000000..5341821
--- /dev/null
+++ b/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
new file mode 100644
index 0000000..4eca918
--- /dev/null
+++ b/components/ui/select.tsx
@@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        position === "popper" &&
+          "data-[state=open]:slide-in-from-top-2 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
new file mode 100644
index 0000000..26eb109
--- /dev/null
+++ b/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
new file mode 100644
index 0000000..9f9a6dc
--- /dev/null
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/docs/plans/2026-02-19-swarm-page-redesign.md b/docs/plans/2026-02-19-swarm-page-redesign.md
new file mode 100644
index 0000000..ccd310b
--- /dev/null
+++ b/docs/plans/2026-02-19-swarm-page-redesign.md
@@ -0,0 +1,224 @@
+# Swarm Page Redesign
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Replace label-based swarm grouping with proper `bd swarm` orchestration UI showing epic-level work coordination.
+
+**Architecture:** Query `bd swarm list/status/validate` directly via new API routes. Swarm cards show computed progress from epic DAGs. Activity panel filters to selected swarm's epic children.
+
+**Tech Stack:** Next.js API routes, existing BD CLI, reuse ActivityPanel and card patterns.
+
+---
+
+## Background: How `bd swarm` Actually Works
+
+### NOT Labels
+The current UI incorrectly uses `swarm:*` labels to group agents. `bd swarm` does NOT use labels.
+
+### How It Actually Works
+
+**Create:**
+```bash
+bd swarm create <epic-id>
+```
+Creates a **molecule bead** with `issue_type: "molecule"` and `mol_type: "swarm"`:
+```json
+{
+  "id": "codex-f4r",
+  "title": "Swarm: Test Epic",
+  "issue_type": "molecule",
+  "mol_type": "swarm",
+  "dependencies": [{ "id": "codex-dq9", "dependency_type": "relates-to" }]
+}
+```
+
+**Status (computed, not stored):**
+```bash
+bd swarm status <epic-or-swarm-id> --json
+```
+Returns:
+```json
+{
+  "epic_id": "codex-dq9",
+  "epic_title": "Test Epic",
+  "completed": [...],
+  "active": [...],    // in_progress issues
+  "ready": [...],     // unblocked, open issues
+  "blocked": [...],   // waiting on dependencies
+  "progress_percent": 40
+}
+```
+
+**List:**
+```bash
+bd swarm list --json
+```
+Returns:
+```json
+{
+  "swarms": [{
+    "id": "codex-f4r",
+    "title": "Swarm: Test Epic",
+    "epic_id": "codex-dq9",
+    "epic_title": "Test Epic",
+    "status": "open",
+    "coordinator": "",
+    "total_issues": 5,
+    "completed_issues": 2,
+    "active_issues": 1,
+    "progress_percent": 40
+  }]
+}
+```
+
+**Validate:**
+```bash
+bd swarm validate <epic-id> --verbose
+```
+Returns DAG quality, ready fronts, max parallelism.
+
+---
+
+## Data Contract
+
+### GET /api/swarm/list
+Returns `bd swarm list --json` output directly.
+
+### GET /api/swarm/status?epic=<epic-id>
+Returns `bd swarm status <epic> --json` output.
+
+### POST /api/swarm/create
+Body: `{ "epicId": "codex-dq9", "coordinator": "witness" (optional) }`
+Returns created swarm molecule.
+
+### POST /api/swarm/close
+Body: `{ "swarmId": "codex-f4r" }`
+Closes the swarm molecule.
+
+---
+
+## Page Layout
+
+**Existing structure (unified-shell.tsx) - no changes to layout:**
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  TOP BAR                                                            │
+├──────────────┬────────────────────────────────┬─────────────────────┤
+│  LEFT PANEL  │  MIDDLE CONTENT                │  RIGHT PANEL        │
+│  (filters)   │  (SwarmPage cards)             │  (ActivityPanel)    │
+│              │                                │  ← filter by swarm  │
+│              │  [swarm cards grid]            │                     │
+│              │                                │                     │
+├──────────────┴────────────────────────────────┴─────────────────────┤
+│  MOBILE NAV                                                         │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+**SwarmPage:**
+- Header with title + "Create Swarm" button
+- Responsive cards grid (1-4 columns)
+- Click card → sets `swarmId` in URL → right panel filters to that swarm
+
+---
+
+## Swarm Card Design
+
+```
+┌─────────────────────────────────────┐
+│  🐝 Swarm: Feature Auth             │  ← title from swarm molecule
+│  codex-f4r                          │  ← swarm molecule ID
+│  ─────────────────────────────────  │
+│  Progress ████████░░░░ 40%          │  ← progress_percent
+│  Epic: codex-dq9                    │  ← linked epic ID
+│  ─────────────────────────────────  │
+│  ✓ 2 completed                      │  ← completed count
+│  ▶ 1 active                         │  ← in_progress count
+│  ⏳ 2 ready                         │  ← unblocked, open
+│  ⚠ 1 blocked                        │  ← waiting on deps
+│  ─────────────────────────────────  │
+│  Coordinator: (none)                │  ← optional coordinator
+│  Last: 5 minutes ago                │  ← most recent update
+└─────────────────────────────────────┘
+```
+
+**Mini-DAG (optional, expandable):**
+- Show just the ready/front nodes as clickable badges
+- "Ready to pick up: Task A, Task B"
+
+---
+
+## Implementation Phases
+
+### Phase 1: API Layer
+
+**Files to create:**
+- `src/app/api/swarm/list/route.ts` - wraps `bd swarm list --json`
+- `src/app/api/swarm/status/route.ts` - wraps `bd swarm status <epic> --json`
+- `src/app/api/swarm/create/route.ts` - wraps `bd swarm create <epic>`
+- `src/app/api/swarm/close/route.ts` - wraps `bd close <swarm-id>`
+
+**Pattern:** Follow existing `/api/beads/...` routes. Use `runBdCommand` from `src/lib/bridge.ts`.
+
+### Phase 2: UI Layer
+
+**Files to modify:**
+- `src/lib/swarm-cards.ts` → replace with API calls or repurpose
+- `src/components/swarm/swarm-page.tsx` → fetch from API, add create button
+- `src/components/swarm/swarm-card.tsx` → new layout with status metrics
+
+**Files to create:**
+- `src/components/swarm/create-swarm-dialog.tsx` - form to create new swarm
+
+### Phase 3: Activity Filter
+
+**Files to modify:**
+- `src/components/activity/activity-panel.tsx` - add `filterByEpicId?: string` prop
+- `src/components/shared/unified-shell.tsx` - pass epicId when swarm selected
+
+**Logic:** When `swarmId` is set, look up the swarm's epic_id and pass to ActivityPanel.
+
+### Phase 4: Create Flow
+
+**Entry points:**
+1. Swarm page empty state → "Create Swarm" button
+2. (Future) Epic detail page → "Create Swarm" action
+
+**Dialog:**
+- Dropdown to select epic (from `bd list --type=epic`)
+- Optional: assign coordinator (from agent list)
+- Submit → `POST /api/swarm/create`
+
+---
+
+## Files Summary
+
+### New Files
+- `src/app/api/swarm/list/route.ts`
+- `src/app/api/swarm/status/route.ts`
+- `src/app/api/swarm/create/route.ts`
+- `src/app/api/swarm/close/route.ts`
+- `src/components/swarm/create-swarm-dialog.tsx`
+
+### Modified Files
+- `src/lib/swarm-cards.ts` - refactor for API data or deprecate
+- `src/components/swarm/swarm-page.tsx` - use API, add create
+- `src/components/swarm/swarm-card.tsx` - new card layout
+- `src/components/activity/activity-panel.tsx` - add filter prop
+- `src/components/shared/unified-shell.tsx` - wire epic filter
+
+### Tests
+- `tests/app/api/swarm/*.test.ts`
+- Update `tests/components/swarm/*.test.tsx`
+- Update `tests/lib/swarm-cards.test.ts`
+
+---
+
+## Success Criteria
+
+1. Swarm page shows swarms from `bd swarm list` (not labels)
+2. Cards display progress, active/ready/blocked counts
+3. Clicking swarm filters ActivityPanel to epic children
+4. "Create Swarm" dialog works from empty state
+5. Existing tests updated, new tests for API routes
+6. No `swarm:*` label usage in swarm page logic
\ No newline at end of file
diff --git a/docs/plans/2026-02-19-visual-truth-spec.md b/docs/plans/2026-02-19-visual-truth-spec.md
new file mode 100644
index 0000000..f88c913
--- /dev/null
+++ b/docs/plans/2026-02-19-visual-truth-spec.md
@@ -0,0 +1,96 @@
+# Visual Truth Spec (Command Grid + Thread Takeover)
+
+## Source Of Truth
+- Target A: Command Grid shell screenshot.
+- Target B: Open thread takeover screenshot.
+- Current app screenshots are validation artifacts only.
+
+## Geometry Contract (Desktop)
+- App viewport composition:
+  - Top bar height: `60px`
+  - Main region: `calc(100vh - 60px)`
+- Columns:
+  - Left rail: `256px`
+  - Center: fluid
+  - Right rail: `332px`
+- Dividers:
+  - 1px hard separators between rails/center.
+- Center content max width:
+  - `1080px` on 1920 viewport.
+  - `960px` on 1440 viewport.
+
+## Top Bar Contract (Target A)
+- Left brand block:
+  - Icon tile `32x32`, label stack (`COMMAND GRID`, version line).
+- Metric tiles (equal height, hard borders):
+  - `TOTAL TASKS`, `CRITICAL ALERTS`, `IDLE`, `BUSY`.
+- Primary actions:
+  - `BLOCKED ITEMS` outlined red pill.
+  - `NEW TASK` filled green pill.
+- No tab switcher in top bar.
+
+## Left Rail Contract (Target A)
+- Header text: `NAVIGATION / EPICS` mono smallcaps.
+- Epic tree rows:
+  - 36px row rhythm.
+  - Nested children at +16px indent.
+- Footer user identity block anchored bottom.
+
+## Center Feed Contract (Target A)
+- Section headers:
+  - `READY`, `IN PROGRESS`, `BLOCKED`, mono uppercase with count chips.
+- Cards:
+  - Radius `14px`, panel fill darker than shell.
+  - Header row: status chip, priority, title, id.
+  - Summary text 2-3 lines.
+  - Dependency sub-panel for `BLOCKED BY` / `UNBLOCKS`.
+  - Assignee row with avatar.
+  - Footer with stage text + compact actions.
+
+## Right Rail Contract (Target A)
+- Upper block:
+  - `AGENT POOL MONITOR` with compact rows.
+- Lower block:
+  - `ACTIVITY / BLOCKERS FEED` timeline rows.
+- Single vertical divider between center and rail.
+
+## Thread Takeover Contract (Target B)
+- Center takeover frame:
+  - Max width `1120px`, radius `12px`.
+- Header strip:
+  - Task id, status, title, edit/close actions.
+- Summary row:
+  - Summary text + assignee + due date columns.
+- Conversation area:
+  - Left incoming / right outgoing bubbles.
+- Composer bar:
+  - Sticky bottom, rounded input + send CTA.
+
+## Palette / Type Contract
+- Base backgrounds:
+  - app `#070d16`
+  - shell `#0c1420`
+  - panel `#111c2a`
+  - card `#1a2431`
+- Text:
+  - primary `#e8edf5`
+  - muted `#8f9caf`
+- Accents:
+  - ready `#35d98f`
+  - blocked `#ff4c72`
+  - warning `#ffb24a`
+  - info `#35c9ff`
+- Font stack:
+  - Sans: `Inter, Segoe UI, system-ui, sans-serif`
+  - Mono: `JetBrains Mono, Cascadia Code, monospace`
+
+## Breakpoint Contract
+- Desktop: `>= 1280px` full 3-column shell.
+- Tablet: `768px-1279px` collapsible rails.
+- Mobile: `< 768px` bottom nav + full-screen takeover.
+
+## Acceptance
+- Pixel-close to target hierarchy and rhythm at:
+  - `1920x1080`
+  - `1440x1024`
+  - `390x844`
diff --git a/docs/plans/2026-02-20-swarm-view-remake-design.md b/docs/plans/2026-02-20-swarm-view-remake-design.md
index 762fb79..2a87334 100644
--- a/docs/plans/2026-02-20-swarm-view-remake-design.md
+++ b/docs/plans/2026-02-20-swarm-view-remake-design.md
@@ -120,23 +120,24 @@ This view only renders if a mission (Epic) is selected. It completely replaces t
     *   Mission Title, Epic ID, and overall health status.
     *   **Action Strip:** Buttons for "Summon Polecats" (assign agents based on a template), "Halt Swarm", and "Run Debrief".
 *   **Convoy Stepper:** The visual orchestration pipeline (Planning -> Deployment -> Execution -> Debrief).
-*   **The Telemetry Grid (Replacing the DAG):**
-    *   **Card 1: Active Roster (Who is here?):** A list of all agents currently assigned to tasks within this epic. Displays their Name, Avatar (colored by Archetype), current Bead ID, and status (e.g., "Writing Code", "Waiting for API").
-    *   **Card 2: Priority Attention (What is blocked?):** A focused feed of *only* the `blocked` beads or beads that require Human-In-The-Loop (HITL) intervention for this specific mission.
-    *   **Card 3: Mission Metrics:** Simple burn-down stats or a mini-feed of the last 5 completed tasks to show velocity.
+*   **The Telemetry Grid (Hybrid Layout):**
+    *   **Top/Left Pane (Specialized Agent DAG):** Unlike the generic global graph, this graph specifically visualizes *who* is doing *what*. Nodes should emphasize Agent Avatars and archetype colors. Edges should represent the flow of work between agents (e.g., Coder -> Reviewer) rather than just raw task dependencies.
+    *   **Bottom/Right Pane (Metrics & Attention):**
+        *   **Priority Attention (What is blocked?):** A highly focused feed of *only* the `blocked` beads or beads that require Human-In-The-Loop (HITL) intervention for this specific mission.
+        *   **Mission Roster:** A quick summary of active agents.
 
 ### 4.3 Tab 2: `<ArchetypesArmory />`
 *   **Layout:** CSS Grid of archetype cards.
 *   **Card Design:** Shows Name, Color badge, Capabilities tags, and truncated description.
 *   **Interaction:** 
-    * Cards are highly interactive. Clicking a card opens a `<ArchetypeEditor />` sheet/modal to edit the metadata.
+    * Cards are highly interactive. Clicking a card opens a central popup (reusing the app's existing Dialog/Popup pattern) to edit the metadata.
     * Includes a focused text area to edit the raw `systemPrompt`.
     * A primary "Create New Archetype" button exists at the top.
 
 ### 4.4 Tab 3: `<TemplatesManager />`
 *   **Layout:** List or Grid view of templates.
 *   **Interaction:** 
-    * Cards are highly interactive. Clicking a card opens a `<TemplateEditor />` sheet/modal.
+    * Cards are highly interactive. Clicking a card opens a central `<TemplateEditor />` popup.
     * **Key UI Feature:** An intuitive interface to build the `team` array (e.g., click "Add Role", select "Architect" from the Archetypes list, set count to "1").
     * A primary "Create New Template" button exists at the top.
 
diff --git a/docs/prompts/2026-02-19-beads-cgo-fix-pr.md b/docs/prompts/2026-02-19-beads-cgo-fix-pr.md
new file mode 100644
index 0000000..7072d13
--- /dev/null
+++ b/docs/prompts/2026-02-19-beads-cgo-fix-pr.md
@@ -0,0 +1,285 @@
+# Prompt: Fix CGO-Enabled Release Builds for steveyegge/beads
+
+## Mission
+
+Submit a PR to https://github.com/steveyegge/beads that fixes issue #1856: "Install script binary has CGO_ENABLED=0 — Dolt embedded mode fails"
+
+## Background Context
+
+### The Problem
+
+1. All release builds run on `ubuntu-latest` (see `.github/workflows/release.yml`)
+2. Windows/macOS builds use cross-compilation:
+   - Windows: `x86_64-w64-mingw32-gcc`
+   - macOS: Zig wrappers (`/tmp/zigcc/cc-x86_64-macos`)
+3. Only Linux ICU is installed: `sudo apt-get install libicu-dev`
+4. CGO requires target-platform ICU headers/libraries
+5. When CGO can't find ICU for the target platform, Go silently produces a non-CGO binary
+6. Users get: `Error: failed to open database: dolt backend requires CGO`
+
+### Evidence
+
+```bash
+# From installed binary on macOS:
+strings ~/.local/bin/bd | grep CGO_ENABLED
+CGO_ENABLED=0  # <-- PROBLEM
+
+# The .goreleaser.yml SAYS CGO_ENABLED=1, but cross-compilation fails silently
+```
+
+### Affected Platforms
+
+- Windows AMD64 (cross-compiled with mingw)
+- Windows ARM64 (cross-compiled with Zig)
+- macOS AMD64 (cross-compiled with Zig)
+- macOS ARM64 (cross-compiled with Zig)
+
+Linux builds work because they're native.
+
+## The Fix: Native Builds Per Platform
+
+### Approach
+
+Instead of cross-compiling from Ubuntu, use native runners:
+
+| Platform | Runner | CGO Support |
+|----------|--------|-------------|
+| Linux AMD64 | ubuntu-latest | Native gcc + libicu-dev |
+| Linux ARM64 | ubuntu-latest | Cross-compile (aarch64-linux-gnu-gcc) |
+| macOS AMD64 | macos-latest | Native clang + icu4c (brew) |
+| macOS ARM64 | macos-latest | Native clang + icu4c (brew) |
+| Windows AMD64 | windows-latest | Native gcc via MSYS2 UCRT64 |
+| Windows ARM64 | windows-latest | Cross-compile with Zig |
+
+### Why This Works
+
+- Native builds have native ICU available via package managers
+- CGO "just works" when the compiler can find headers/libs
+- No fragile cross-compilation setup needed
+
+## TDD Approach (REQUIRED)
+
+### Step 1: Write Failing Test FIRST
+
+Add a verification step in release.yml that checks for CGO:
+
+```yaml
+- name: Verify CGO enabled in binary
+  run: |
+    # For each built binary, verify CGO is enabled
+    for binary in dist/*/bd; do
+      if strings "$binary" | grep -q "CGO_ENABLED=0"; then
+        echo "ERROR: $binary was built without CGO support"
+        exit 1
+      fi
+      echo "OK: $binary has CGO support"
+    done
+```
+
+**This test will FAIL on current main branch** - proving the bug exists.
+
+### Step 2: Implement Fix
+
+Split the release workflow into platform-specific jobs.
+
+### Step 3: Test Passes
+
+After fix, the verification step passes on all platforms.
+
+## Files to Modify
+
+### 1. `.github/workflows/release.yml`
+
+Split into 3 jobs:
+
+```yaml
+jobs:
+  build-linux:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+        with: { fetch-depth: 0 }
+      - uses: actions/setup-go@v6
+        with: { go-version-file: 'go.mod' }
+      - run: sudo apt-get update && sudo apt-get install -y gcc libicu-dev
+      - uses: goreleaser/goreleaser-action@v6
+        with:
+          args: build --single-target --config .goreleaser-linux.yml
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Verify CGO enabled
+        run: |
+          if strings dist/bd_linux_amd64/bd | grep -q "CGO_ENABLED=0"; then
+            echo "ERROR: Linux binary lacks CGO"
+            exit 1
+          fi
+
+  build-macos:
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v6
+        with: { fetch-depth: 0 }
+      - uses: actions/setup-go@v6
+        with: { go-version-file: 'go.mod' }
+      - run: brew install icu4c
+      - uses: goreleaser/goreleaser-action@v6
+        with:
+          args: build --single-target --config .goreleaser-macos.yml
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CGO_CFLAGS: "-I$(brew --prefix icu4c)/include"
+          CGO_LDFLAGS: "-L$(brew --prefix icu4c)/lib"
+      - name: Verify CGO enabled
+        run: |
+          for binary in dist/*/bd; do
+            if strings "$binary" | grep -q "CGO_ENABLED=0"; then
+              echo "ERROR: $binary lacks CGO"
+              exit 1
+            fi
+          fi
+
+  build-windows:
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v6
+        with: { fetch-depth: 0 }
+      - uses: actions/setup-go@v6
+        with: { go-version-file: 'go.mod' }
+      - uses: msys2/setup-msys2@v2
+        with:
+          msystem: UCRT64
+          update: true
+          install: mingw-w64-ucrt-x86_64-gcc mingw-w64-ucrt-x86_64-icu
+      - uses: goreleaser/goreleaser-action@v6
+        with:
+          args: build --single-target --config .goreleaser-windows.yml
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CGO_ENABLED: 1
+          CC: C:/msys64/ucrt64/bin/gcc.exe
+          PATH: C:/msys64/ucrt64/bin;${{ env.PATH }}
+      - name: Verify CGO enabled
+        run: |
+          if (Select-String -Path "dist\bd_windows_amd64\bd.exe" -Pattern "CGO_ENABLED=0" -Quiet) {
+            Write-Error "ERROR: Windows binary lacks CGO"
+            exit 1
+          }
+
+  release:
+    needs: [build-linux, build-macos, build-windows]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - name: Download all artifacts
+        uses: actions/download-artifact@v4
+      - uses: goreleaser/goreleaser-action@v6
+        with:
+          args: release --clean
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+```
+
+### 2. Split `.goreleaser.yml` (optional, or use build IDs)
+
+Either split into separate config files, or use build IDs with `goos`/`goarch` filters.
+
+## Best Practices for PR Acceptance
+
+### 1. Be Respectful and Clear
+
+- Open with: "Thank you for beads! It's an excellent tool."
+- Acknowledge existing work: "I see the goreleaser config already specifies CGO_ENABLED=1"
+- Frame as collaborative: "This PR proposes a fix for #1856"
+
+### 2. Keep It Minimal
+
+- Don't refactor unrelated code
+- Don't add features
+- Only change what's needed to fix the CGO issue
+
+### 3. Explain the "Why"
+
+In PR description:
+- Cross-compilation + CGO + ICU is fragile
+- Native builds are simpler and guaranteed to work
+- This aligns with how Homebrew builds beads (native on macOS)
+
+### 4. Reference Existing Issue
+
+```
+Fixes #1856
+```
+
+### 5. Test Evidence
+
+Include in PR:
+- Link to your fork's CI run showing test pass
+- Or screenshots of `strings bd.exe | grep CGO` showing no CGO_ENABLED=0
+
+## PR Description Template
+
+```markdown
+## Summary
+
+Fixes #1856 - Release binaries were built with CGO_ENABLED=0, causing "Dolt backend requires CGO" errors for users.
+
+## Problem
+
+Cross-compilation from `ubuntu-latest` for Windows/macOS targets cannot find ICU headers for the target platform. Go silently produces non-CGO binaries when CGO dependencies are missing.
+
+## Solution
+
+Use native runners for each platform:
+- `ubuntu-latest` for Linux (existing)
+- `macos-latest` for macOS (native CGO with icu4c)
+- `windows-latest` for Windows (native CGO with MSYS2/UCRT64)
+
+## Testing
+
+Added CI verification step that fails if binary contains `CGO_ENABLED=0`:
+```yaml
+- name: Verify CGO enabled
+  run: |
+    if strings dist/bd | grep -q "CGO_ENABLED=0"; then
+      echo "ERROR: Binary built without CGO"
+      exit 1
+    fi
+```
+
+This test currently fails on main; passes with this fix.
+
+## Files Changed
+
+- `.github/workflows/release.yml` - Split into platform-native jobs
+
+## Notes
+
+- Homebrew already builds beads natively on macOS (and it works)
+- This approach is more maintainable than fixing cross-compilation ICU paths
+- Linux ARM64 still cross-compiles (no arm64 GitHub runner for free tiers)
+```
+
+## Fork Setup
+
+1. Fork https://github.com/steveyegge/beads
+2. Clone your fork: `git clone https://github.com/YOUR_USERNAME/beads.git`
+3. Create branch: `git checkout -b fix/cgo-native-builds`
+4. Make changes
+5. Push: `git push origin fix/cgo-native-builds`
+6. Open PR against `steveyegge/beads:main`
+
+## References
+
+- Issue: https://github.com/steveyegge/beads/issues/1856
+- Current release.yml: `.github/wo
+rkflows/release.yml
+- Current goreleaser: `.goreleaser.yml`
+- Our local build succeeded with MSYS2 UCRT64 on Windows
+
+## Related Bead
+
+- `bb-zbt`: PR: Fix CGO-enabled release builds for beads (beadboard project)
+
+---
+
+Good luck! Be excellent to the maintainers.
diff --git a/docs/protocols/bead-prompting.md b/docs/protocols/bead-prompting.md
new file mode 100644
index 0000000..c6564eb
--- /dev/null
+++ b/docs/protocols/bead-prompting.md
@@ -0,0 +1,166 @@
+# Bead Prompting Pack (Model-Facing)
+
+Use this file when authoring bead descriptions.  
+Descriptions should be written as prompts for another AI model, not as internal notes.
+
+## 0) Critical Rule
+
+Do not paste the full system prompt text into bead descriptions.  
+Use it as authoring guidance, then write a bead-specific prompt with concrete task details.
+
+## 1) Canonical Prompting Strategy (Reference)
+
+```text
+You are an expert autonomous assistant designed for deep, multi-step problem solving and real-world execution.
+
+OVERALL BEHAVIOR
+- Think in clear, explicit steps: understand -> plan -> gather context -> act -> verify.
+- Prefer concrete action over endless analysis, but never skip critical checks.
+- Keep answers concise and structured, even for complex tasks.
+- Optimize for correctness, stability over long horizons, and usefulness to the user.
+
+GOALS AND SUCCESS
+- Always start by restating the user’s goal in your own words.
+- Ask clarifying questions only when absolutely necessary to proceed safely or correctly.
+- Define what “success” looks like for the task (acceptance criteria).
+- Treat acceptance criteria as the contract you must satisfy before you consider the task complete.
+
+PLANNING
+- Before detailed work, produce a short, numbered plan of 3–7 steps.
+- Break large tasks into manageable sub-tasks with clear dependencies.
+- As you work, update the plan if you discover new constraints or information.
+- Surface tradeoffs explicitly when there are multiple viable approaches.
+
+CONTEXT AND INFORMATION
+- Use only the minimal context needed to perform the task correctly.
+- When you have access to retrieval or external data, follow this pattern:
+  1) Identify what you need to know.
+  2) Retrieve or inspect only the most relevant items.
+  3) Summarize and deduplicate what you found.
+  4) Stop searching as soon as you can act effectively.
+- Do not repeat the same query or reread the same large context unnecessarily.
+- When context is huge, summarize it into key points before detailed reasoning.
+
+TOOL AND API USAGE
+- Treat tools as powerful but optional aids.
+- Use tools when information is missing, when verification is required, or when an action must be taken in an external system.
+- Before calling a tool, briefly state what you are trying to achieve with it.
+- After each tool call, summarize what the result means and how it changes your plan.
+- Avoid redundant or looping tool calls; each call should move you closer to the goal.
+
+REASONING DEPTH AND SPEED
+- Choose effort level based on task complexity:
+  - Fast: for simple, routine questions; minimize chain-of-thought and focus on direct, correct answers.
+  - Balanced: for multi-step but bounded tasks; give a brief plan and short explanations.
+  - Deep: for complex, high-stakes, or architectural work; provide detailed reasoning, careful tradeoff analysis, and explicit checks.
+- Do not over-think trivial tasks, and do not under-think complex, risky, or ambiguous ones.
+
+OUTPUT STRUCTURE
+- Always structure your response so it is easy to scan and act on.
+- By default, organize your response into the following sections:
+  1) Goal: what you are solving.
+  2) Plan: brief, numbered list of steps.
+  3) Execution: what you did, step by step.
+  4) Result: the final answer, artifact, or decision.
+  5) Verification: checks performed, remaining risks, and suggested next actions.
+- When asked for specific formats (JSON, YAML, schema, code diff), follow the requested format exactly and avoid extra commentary inside structured blocks.
+
+CODING AND TECHNICAL WORK
+- When editing code:
+  - Preserve existing style, patterns, and conventions.
+  - Keep changes as small as possible while solving the problem.
+  - Prefer targeted edits over large rewrites, unless explicitly asked for a redesign.
+- When generating new code:
+  - Start from a clear specification of inputs, outputs, and constraints.
+  - Consider edge cases, error handling, performance, and security.
+  - Provide minimal but meaningful docstrings or comments only where they clarify non-obvious logic.
+- For debugging:
+  - Reproduce or restate the bug clearly.
+  - Form a hypothesis, then methodically test or reason through it.
+  - Explain what changed and why your fix addresses the root cause, not just the symptom.
+
+COMMUNICATION STYLE
+- Use clear, direct language and avoid unnecessary jargon.
+- Prefer short paragraphs and bullet lists when they improve readability.
+- Make important decisions, assumptions, and tradeoffs explicit.
+- When something is uncertain, say what you do and do not know and propose how to reduce the uncertainty.
+
+SELF-VERIFICATION AND QUALITY
+- Before finalizing any answer:
+  1) Re-read the user’s request and your restated goal.
+  2) Check that each acceptance criterion is satisfied.
+  3) Scan for internal inconsistencies or obvious mistakes.
+  4) Note any remaining open questions, assumptions, or limitations.
+- If an issue can be fixed with a small additional step, perform that step instead of leaving an avoidable gap.
+
+SAFETY, LIMITS, AND SCOPE
+- Stay strictly within the requested scope unless broadening is clearly necessary to avoid errors.
+- If the user’s request conflicts with higher-level instructions or constraints you must follow, explain the conflict briefly and offer the closest acceptable alternative.
+- When a task is impossible or severely under-specified, say so plainly and redirect to the most useful next steps.
+
+DEFAULT ANSWER TEMPLATE
+Unless the user requests a different format, follow this layout:
+
+1) Goal
+   - One or two sentences summarizing what you’re doing.
+
+2) Plan
+   - 3–7 concise bullets describing your intended steps.
+
+3) Execution
+   - Brief notes on how you carried out each step, focusing on decisions and key reasoning.
+
+4) Result
+   - The final answer, artifact, code, or recommendation, presented cleanly.
+
+5) Verification
+   - What you checked, any limitations, and suggested next actions or improvements.
+
+Always prioritize being accurate, actionable, and easy to work with over being verbose.
+```
+
+## 2) Bead Task Prompt Template (Fill For This Bead)
+
+```text
+TASK CONTEXT
+- Bead ID: <bead-id>
+- Title: <bead-title>
+- Parent/Epic: <parent-id-or-none>
+- Dependencies (must be done first): <comma-separated-bead-ids-or-none>
+
+TASK CONTRACT
+- Goal: <1-2 sentence goal>
+- Success Criteria:
+  - <criterion 1>
+  - <criterion 2>
+- Scope:
+  - <in-scope item 1>
+  - <in-scope item 2>
+- Out of Scope:
+  - <non-goal 1>
+  - <non-goal 2>
+
+IMPLEMENTATION CONSTRAINTS
+- Preserve existing backend/API contracts unless explicitly stated otherwise.
+- Reuse shared components and logic; avoid one-off forks.
+- Keep changes targeted and minimal for this bead.
+
+VERIFICATION REQUIREMENTS
+- Required commands:
+  - npm run typecheck
+  - npm run lint
+  - npm run test
+- Required artifacts:
+  - <screenshots/audit/report paths>
+- Report any remaining risks and follow-up beads explicitly.
+```
+
+## 3) Bead Description Authoring Rules
+
+1. Write the bead description as a filled, bead-specific prompt.
+2. Do not include "copy this verbatim" instructions in bead descriptions.
+3. Do not include the full boilerplate system prompt in bead descriptions.
+4. Include `Scope` and `Out of Scope` in every bead.
+5. Make acceptance criteria observable and testable.
+6. Keep dependency flow minimal and execution-correct.
+7. Avoid vague verbs without measurable outcomes.
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 1cc2254..29a92b5 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,11 +1,21 @@
-import nextCoreWebVitals from 'eslint-config-next/core-web-vitals';
-import nextTypeScript from 'eslint-config-next/typescript';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({ baseDirectory: __dirname });
 
 const eslintConfig = [
-  ...nextCoreWebVitals,
-  ...nextTypeScript,
+  ...compat.extends('next/core-web-vitals', 'next/typescript'),
   {
-    ignores: ['nul'],
+    ignores: [
+      'nul',
+      '.next/**',
+      '.agents/**',
+      'skills/**',
+      'next-env.d.ts',
+    ],
   },
   {
     files: ['**/*.{js,jsx,mjs,cjs,ts,tsx,mts,cts}'],
@@ -14,6 +24,7 @@ const eslintConfig = [
       'prefer-const': 'off',
       '@typescript-eslint/no-empty-object-type': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/ban-ts-comment': 'off',
     },
   },
 ];
diff --git a/package-lock.json b/package-lock.json
index d6b22d9..66a14df 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,11 +10,18 @@
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-avatar": "^1.1.11",
+        "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-scroll-area": "^1.2.10",
+        "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-separator": "^1.1.8",
         "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-tooltip": "^1.2.8",
+        "@remotion/google-fonts": "^4.0.422",
+        "@remotion/tailwind": "^4.0.422",
+        "@remotion/zod-types": "^4.0.422",
         "@xyflow/react": "^12.10.0",
         "chokidar": "^5.0.0",
         "class-variance-authority": "^0.7.1",
@@ -25,18 +32,21 @@
         "next": "15.5.7",
         "react": "19.2.1",
         "react-dom": "19.2.1",
+        "remotion": "^4.0.422",
         "tailwind-merge": "^3.4.1",
-        "tailwindcss-animate": "^1.0.7"
+        "tailwindcss-animate": "^1.0.7",
+        "zod": "3.22.3"
       },
       "devDependencies": {
         "@playwright/test": "^1.58.2",
+        "@remotion/cli": "^4.0.422",
         "@types/dagre": "^0.7.53",
         "@types/node": "^22.10.0",
         "@types/react": "^19.0.0",
         "@types/react-dom": "^19.0.0",
         "autoprefixer": "^10.4.24",
         "eslint": "9.39.2",
-        "eslint-config-next": "16.1.6",
+        "eslint-config-next": "^15.5.7",
         "playwright": "^1.58.2",
         "postcss": "^8.5.6",
         "tailwindcss": "^3.4.17",
@@ -60,7 +70,6 @@
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
       "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.28.5",
@@ -71,196 +80,21 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/compat-data": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.0.tgz",
-      "integrity": "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/core": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
-      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.29.0",
-        "@babel/generator": "^7.29.0",
-        "@babel/helper-compilation-targets": "^7.28.6",
-        "@babel/helper-module-transforms": "^7.28.6",
-        "@babel/helpers": "^7.28.6",
-        "@babel/parser": "^7.29.0",
-        "@babel/template": "^7.28.6",
-        "@babel/traverse": "^7.29.0",
-        "@babel/types": "^7.29.0",
-        "@jridgewell/remapping": "^2.3.5",
-        "convert-source-map": "^2.0.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.3",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/babel"
-      }
-    },
-    "node_modules/@babel/core/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@babel/generator": {
-      "version": "7.29.1",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
-      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.29.0",
-        "@babel/types": "^7.29.0",
-        "@jridgewell/gen-mapping": "^0.3.12",
-        "@jridgewell/trace-mapping": "^0.3.28",
-        "jsesc": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
-      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/compat-data": "^7.28.6",
-        "@babel/helper-validator-option": "^7.27.1",
-        "browserslist": "^4.24.0",
-        "lru-cache": "^5.1.1",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@babel/helper-globals": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
-      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-imports": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
-      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.28.6",
-        "@babel/types": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
-      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.28.6",
-        "@babel/helper-validator-identifier": "^7.28.5",
-        "@babel/traverse": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
-      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-validator-identifier": {
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
       "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-validator-option": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
-      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helpers": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.6.tgz",
-      "integrity": "sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/template": "^7.28.6",
-        "@babel/types": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/parser": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
-      "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz",
+      "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.29.0"
-      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -268,52 +102,750 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/template": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
-      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
-      "dev": true,
+    "node_modules/@csstools/cascade-layer-name-parser": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.13.tgz",
+      "integrity": "sha512-MX0yLTwtZzr82sQ0zOjqimpZbzjMaK/h2pmlrLK7DCzlmiZLYFpoO94WmN1akRVo6ll/TdpHb53vihHLUMyvng==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
       "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.28.6",
-        "@babel/parser": "^7.28.6",
-        "@babel/types": "^7.28.6"
-      },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^2.7.1",
+        "@csstools/css-tokenizer": "^2.4.1"
       }
     },
-    "node_modules/@babel/traverse": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
-      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.29.0",
-        "@babel/generator": "^7.29.0",
-        "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.29.0",
-        "@babel/template": "^7.28.6",
-        "@babel/types": "^7.29.0",
-        "debug": "^4.3.1"
-      },
+    "node_modules/@csstools/color-helpers": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-4.2.1.tgz",
+      "integrity": "sha512-CEypeeykO9AN7JWkr1OEOQb0HRzZlPWGwV0Ya6DuVgFdDi6g3ma/cPZ5ZPZM4AWQikDpq/0llnGGlIL+j8afzw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14 || ^16 || >=18"
       }
     },
-    "node_modules/@babel/types": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
-      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
-      "dev": true,
+    "node_modules/@csstools/css-calc": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-1.2.4.tgz",
+      "integrity": "sha512-tfOuvUQeo7Hz+FcuOd3LfXVp+342pnWUJ7D2y8NUpu1Ww6xnTbHLpz018/y6rtbHifJ3iIEf9ttxXd8KG7nL0Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^2.7.1",
+        "@csstools/css-tokenizer": "^2.4.1"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-1.6.3.tgz",
+      "integrity": "sha512-pQPUPo32HW3/NuZxrwr3VJHE+vGqSTVI5gK4jGbuJ7eOFUrsTmZikXcVdInCVWOvuxK5xbCzwDWoTlZUCAKN+A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.28.5"
+        "@csstools/color-helpers": "^4.1.0",
+        "@csstools/css-calc": "^1.2.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^2.6.1",
+        "@csstools/css-tokenizer": "^2.2.4"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.7.1.tgz",
+      "integrity": "sha512-2SJS42gxmACHgikc1WGesXLIT8d/q2l0UFM7TaEeIzdFCE/FPMtTiizcPGGJtlPo2xuQzY09OhrLTzRxqJqwGw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^2.4.1"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.4.1.tgz",
+      "integrity": "sha512-eQ9DIktFJBhGjioABJRtUucoWR2mwllurfnM8LuNGAqX3ViZXaUchqk+1s7jjtkFiT9ySdACsFEA3etErkALUg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      }
+    },
+    "node_modules/@csstools/media-query-list-parser": {
+      "version": "2.1.13",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.13.tgz",
+      "integrity": "sha512-XaHr+16KRU9Gf8XLi3q8kDlI18d5vzKSKCY510Vrtc9iNR0NJzbY9hhTmwhzYZj/ZwGL4VmB3TA9hJW0Um2qFA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^2.7.1",
+        "@csstools/css-tokenizer": "^2.4.1"
+      }
+    },
+    "node_modules/@csstools/postcss-cascade-layers": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-3.0.1.tgz",
+      "integrity": "sha512-dD8W98dOYNOH/yX4V4HXOhfCOnvVAg8TtsL+qCGNoKXuq5z2C/d026wGWgySgC8cajXXo/wNezS31Glj5GcqrA==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/selector-specificity": "^2.0.2",
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-color-function": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-2.2.3.tgz",
+      "integrity": "sha512-b1ptNkr1UWP96EEHqKBWWaV5m/0hgYGctgA/RVZhONeP1L3T/8hwoqDm9bB23yVCfOgE9U93KI9j06+pEkJTvw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/css-color-parser": "^1.2.0",
+        "@csstools/css-parser-algorithms": "^2.1.1",
+        "@csstools/css-tokenizer": "^2.1.1",
+        "@csstools/postcss-progressive-custom-properties": "^2.3.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-color-mix-function": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-function/-/postcss-color-mix-function-1.0.3.tgz",
+      "integrity": "sha512-QGXjGugTluqFZWzVf+S3wCiRiI0ukXlYqCi7OnpDotP/zaVTyl/aqZujLFzTOXy24BoWnu89frGMc79ohY5eog==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/css-color-parser": "^1.2.0",
+        "@csstools/css-parser-algorithms": "^2.1.1",
+        "@csstools/css-tokenizer": "^2.1.1",
+        "@csstools/postcss-progressive-custom-properties": "^2.3.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-font-format-keywords": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-2.0.2.tgz",
+      "integrity": "sha512-iKYZlIs6JsNT7NKyRjyIyezTCHLh4L4BBB3F5Nx7Dc4Z/QmBgX+YJFuUSar8IM6KclGiAUFGomXFdYxAwJydlA==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-gradients-interpolation-method": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-gradients-interpolation-method/-/postcss-gradients-interpolation-method-3.0.6.tgz",
+      "integrity": "sha512-rBOBTat/YMmB0G8VHwKqDEx+RZ4KCU9j42K8LwS0IpZnyThalZZF7BCSsZ6TFlZhcRZKlZy3LLFI2pLqjNVGGA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/css-color-parser": "^1.2.0",
+        "@csstools/css-parser-algorithms": "^2.1.1",
+        "@csstools/css-tokenizer": "^2.1.1",
+        "@csstools/postcss-progressive-custom-properties": "^2.3.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-hwb-function": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-2.2.2.tgz",
+      "integrity": "sha512-W5Y5oaJ382HSlbdGfPf60d7dAK6Hqf10+Be1yZbd/TNNrQ/3dDdV1c07YwOXPQ3PZ6dvFMhxbIbn8EC3ki3nEg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/css-color-parser": "^1.2.0",
+        "@csstools/css-parser-algorithms": "^2.1.1",
+        "@csstools/css-tokenizer": "^2.1.1"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-ic-unit": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-2.0.4.tgz",
+      "integrity": "sha512-9W2ZbV7whWnr1Gt4qYgxMWzbevZMOvclUczT5vk4yR6vS53W/njiiUhtm/jh/BKYwQ1W3PECZjgAd2dH4ebJig==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/postcss-progressive-custom-properties": "^2.3.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-is-pseudo-class": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-3.2.1.tgz",
+      "integrity": "sha512-AtANdV34kJl04Al62is3eQRk/BfOfyAvEmRJvbt+nx5REqImLC+2XhuE6skgkcPli1l8ONS67wS+l1sBzySc3Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/selector-specificity": "^2.0.0",
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-logical-float-and-clear": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-float-and-clear/-/postcss-logical-float-and-clear-1.0.1.tgz",
+      "integrity": "sha512-eO9z2sMLddvlfFEW5Fxbjyd03zaO7cJafDurK4rCqyRt9P7aaWwha0LcSzoROlcZrw1NBV2JAp2vMKfPMQO1xw==",
+      "license": "CC0-1.0",
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-logical-resize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-resize/-/postcss-logical-resize-1.0.1.tgz",
+      "integrity": "sha512-x1ge74eCSvpBkDDWppl+7FuD2dL68WP+wwP2qvdUcKY17vJksz+XoE1ZRV38uJgS6FNUwC0AxrPW5gy3MxsDHQ==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-logical-viewport-units": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-viewport-units/-/postcss-logical-viewport-units-1.0.3.tgz",
+      "integrity": "sha512-6zqcyRg9HSqIHIPMYdt6THWhRmE5/tyHKJQLysn2TeDf/ftq7Em9qwMTx98t2C/7UxIsYS8lOiHHxAVjWn2WUg==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/css-tokenizer": "^2.1.1"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-media-minmax": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-media-minmax/-/postcss-media-minmax-1.1.8.tgz",
+      "integrity": "sha512-KYQCal2i7XPNtHAUxCECdrC7tuxIWQCW+s8eMYs5r5PaAiVTeKwlrkRS096PFgojdNCmHeG0Cb7njtuNswNf+w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^1.2.4",
+        "@csstools/css-parser-algorithms": "^2.7.1",
+        "@csstools/css-tokenizer": "^2.4.1",
+        "@csstools/media-query-list-parser": "^2.1.13"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-1.0.4.tgz",
+      "integrity": "sha512-IwyTbyR8E2y3kh6Fhrs251KjKBJeUPV5GlnUKnpU70PRFEN2DolWbf2V4+o/B9+Oj77P/DullLTulWEQ8uFtAA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/css-parser-algorithms": "^2.2.0",
+        "@csstools/css-tokenizer": "^2.1.1",
+        "@csstools/media-query-list-parser": "^2.1.1"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-nested-calc": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-2.0.2.tgz",
+      "integrity": "sha512-jbwrP8rN4e7LNaRcpx3xpMUjhtt34I9OV+zgbcsYAAk6k1+3kODXJBf95/JMYWhu9g1oif7r06QVUgfWsKxCFw==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-normalize-display-values": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-2.0.1.tgz",
+      "integrity": "sha512-TQT5g3JQ5gPXC239YuRK8jFceXF9d25ZvBkyjzBGGoW5st5sPXFVQS8OjYb9IJ/K3CdfK4528y483cgS2DJR/w==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-oklab-function": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-2.2.3.tgz",
+      "integrity": "sha512-AgJ2rWMnLCDcbSMTHSqBYn66DNLBym6JpBpCaqmwZ9huGdljjDRuH3DzOYzkgQ7Pm2K92IYIq54IvFHloUOdvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/css-color-parser": "^1.2.0",
+        "@csstools/css-parser-algorithms": "^2.1.1",
+        "@csstools/css-tokenizer": "^2.1.1",
+        "@csstools/postcss-progressive-custom-properties": "^2.3.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-progressive-custom-properties": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-2.3.0.tgz",
+      "integrity": "sha512-Zd8ojyMlsL919TBExQ1I0CTpBDdyCpH/yOdqatZpuC3sd22K4SwC7+Yez3Q/vmXMWSAl+shjNeFZ7JMyxMjK+Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-relative-color-syntax": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-1.0.2.tgz",
+      "integrity": "sha512-juCoVInkgH2TZPfOhyx6tIal7jW37L/0Tt+Vcl1LoxqQA9sxcg3JWYZ98pl1BonDnki6s/M7nXzFQHWsWMeHgw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/css-color-parser": "^1.2.0",
+        "@csstools/css-parser-algorithms": "^2.1.1",
+        "@csstools/css-tokenizer": "^2.1.1",
+        "@csstools/postcss-progressive-custom-properties": "^2.3.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-scope-pseudo-class": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-scope-pseudo-class/-/postcss-scope-pseudo-class-2.0.2.tgz",
+      "integrity": "sha512-6Pvo4uexUCXt+Hz5iUtemQAcIuCYnL+ePs1khFR6/xPgC92aQLJ0zGHonWoewiBE+I++4gXK3pr+R1rlOFHe5w==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-stepped-value-functions": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-2.1.1.tgz",
+      "integrity": "sha512-YCvdF0GCZK35nhLgs7ippcxDlRVe5QsSht3+EghqTjnYnyl3BbWIN6fYQ1dKWYTJ+7Bgi41TgqQFfJDcp9Xy/w==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/css-calc": "^1.1.1",
+        "@csstools/css-parser-algorithms": "^2.1.1",
+        "@csstools/css-tokenizer": "^2.1.1"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-text-decoration-shorthand": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-2.2.4.tgz",
+      "integrity": "sha512-zPN56sQkS/7YTCVZhOBVCWf7AiNge8fXDl7JVaHLz2RyT4pnyK2gFjckWRLpO0A2xkm1lCgZ0bepYZTwAVd/5A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/color-helpers": "^2.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-text-decoration-shorthand/node_modules/@csstools/color-helpers": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-2.1.0.tgz",
+      "integrity": "sha512-OWkqBa7PDzZuJ3Ha7T5bxdSVfSCfTq6K1mbAhbO1MD+GSULGjrp45i5RudyJOedstSarN/3mdwu9upJE7gDXfw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      }
+    },
+    "node_modules/@csstools/postcss-trigonometric-functions": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-2.1.1.tgz",
+      "integrity": "sha512-XcXmHEFfHXhvYz40FtDlA4Fp4NQln2bWTsCwthd2c+MCnYArUYU3YaMqzR5CrKP3pMoGYTBnp5fMqf1HxItNyw==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/css-calc": "^1.1.1",
+        "@csstools/css-parser-algorithms": "^2.1.1",
+        "@csstools/css-tokenizer": "^2.1.1"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-unset-value": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-2.0.1.tgz",
+      "integrity": "sha512-oJ9Xl29/yU8U7/pnMJRqAZd4YXNCfGEdcP4ywREuqm/xMqcgDNDppYRoCGDt40aaZQIEKBS79LytUDN/DHf0Ew==",
+      "license": "CC0-1.0",
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/selector-specificity": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz",
+      "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==",
+      "license": "CC0-1.0",
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      }
+    },
+    "node_modules/@csstools/utilities": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/utilities/-/utilities-1.0.0.tgz",
+      "integrity": "sha512-tAgvZQe/t2mlvpNosA4+CkMiZ2azISW5WPAcdSalZlEjQvUfghHxfQcrCiK/7/CrfAWVxyM88kGFYO82heIGDg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
       }
     },
     "node_modules/@emnapi/core": {
@@ -1501,17 +2033,6 @@
         "@jridgewell/trace-mapping": "^0.3.24"
       }
     },
-    "node_modules/@jridgewell/remapping": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
-      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -1521,6 +2042,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
@@ -1557,9 +2088,9 @@
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.1.6.tgz",
-      "integrity": "sha512-/Qq3PTagA6+nYVfryAtQ7/9FEr/6YVyvOtl6rZnGsbReGLf0jZU6gkpr1FuChAQpvV46a78p4cmHOVP8mbfSMQ==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-15.5.7.tgz",
+      "integrity": "sha512-DtRU2N7BkGr8r+pExfuWHwMEPX5SD57FeA6pxdgCHODo+b/UgIgjE+rgWKtJAbEbGhVZ2jtHn4g3wNhWFoNBQQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2000,6 +2531,98 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
+      "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
@@ -2267,6 +2890,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.8.tgz",
+      "integrity": "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-menu": {
       "version": "2.1.16",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
@@ -2737,6 +3383,105 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
+      "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.8.tgz",
@@ -2778,6 +3523,92 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
+      "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
@@ -2971,6 +3802,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
@@ -3077,6 +3923,1042 @@
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
       "license": "MIT"
     },
+    "node_modules/@remotion/bundler": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/bundler/-/bundler-4.0.424.tgz",
+      "integrity": "sha512-xYmcnEMxJ518Yt3QWE8RLzzSSkSp8OFUE1wB33dgIMdv9zJ5yDE//EcsUy8RFu9WBwAHlQORRoNb7tFOHPWoBw==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "@remotion/media-parser": "4.0.424",
+        "@remotion/studio": "4.0.424",
+        "@remotion/studio-shared": "4.0.424",
+        "css-loader": "5.2.7",
+        "esbuild": "0.25.0",
+        "react-refresh": "0.9.0",
+        "remotion": "4.0.424",
+        "source-map": "0.7.3",
+        "style-loader": "4.0.0",
+        "webpack": "5.105.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.0.tgz",
+      "integrity": "sha512-O7vun9Sf8DFjH2UtqK8Ku3LkquL9SZL8OLY1T5NZkA34+wG3OQF7cl4Ql8vdNzM6fzBbYfLaiRLIOZ+2FOCgBQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/android-arm": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.0.tgz",
+      "integrity": "sha512-PTyWCYYiU0+1eJKmw21lWtC+d08JDZPQ5g+kFyxP0V+es6VPPSUhM6zk8iImp2jbV6GwjX4pap0JFbUQN65X1g==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/android-arm64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.0.tgz",
+      "integrity": "sha512-grvv8WncGjDSyUBjN9yHXNt+cq0snxXbDxy5pJtzMKGmmpPxeAmAhWxXI+01lU5rwZomDgD3kJwulEnhTRUd6g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/android-x64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.0.tgz",
+      "integrity": "sha512-m/ix7SfKG5buCnxasr52+LI78SQ+wgdENi9CqyCXwjVR2X4Jkz+BpC3le3AoBPYTC9NHklwngVXvbJ9/Akhrfg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.0.tgz",
+      "integrity": "sha512-mVwdUb5SRkPayVadIOI78K7aAnPamoeFR2bT5nszFUZ9P8UpK4ratOdYbZZXYSqPKMHfS1wdHCJk1P1EZpRdvw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.0.tgz",
+      "integrity": "sha512-DgDaYsPWFTS4S3nWpFcMn/33ZZwAAeAFKNHNa1QN0rI4pUjgqf0f7ONmXf6d22tqTY+H9FNdgeaAa+YIFUn2Rg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.0.tgz",
+      "integrity": "sha512-VN4ocxy6dxefN1MepBx/iD1dH5K8qNtNe227I0mnTRjry8tj5MRk4zprLEdG8WPyAPb93/e4pSgi1SoHdgOa4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.0.tgz",
+      "integrity": "sha512-mrSgt7lCh07FY+hDD1TxiTyIHyttn6vnjesnPoVDNmDfOmggTLXRv8Id5fNZey1gl/V2dyVK1VXXqVsQIiAk+A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/linux-arm": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.0.tgz",
+      "integrity": "sha512-vkB3IYj2IDo3g9xX7HqhPYxVkNQe8qTK55fraQyTzTX/fxaDtXiEnavv9geOsonh2Fd2RMB+i5cbhu2zMNWJwg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.0.tgz",
+      "integrity": "sha512-9QAQjTWNDM/Vk2bgBl17yWuZxZNQIF0OUUuPZRKoDtqF2k4EtYbpyiG5/Dk7nqeK6kIJWPYldkOcBqjXjrUlmg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.0.tgz",
+      "integrity": "sha512-43ET5bHbphBegyeqLb7I1eYn2P/JYGNmzzdidq/w0T8E2SsYL1U6un2NFROFRg1JZLTzdCoRomg8Rvf9M6W6Gg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.0.tgz",
+      "integrity": "sha512-fC95c/xyNFueMhClxJmeRIj2yrSMdDfmqJnyOY4ZqsALkDrrKJfIg5NTMSzVBr5YW1jf+l7/cndBfP3MSDpoHw==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.0.tgz",
+      "integrity": "sha512-nkAMFju7KDW73T1DdH7glcyIptm95a7Le8irTQNO/qtkoyypZAnjchQgooFUDQhNAy4iu08N79W4T4pMBwhPwQ==",
+      "cpu": [
+        "mips64el"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.0.tgz",
+      "integrity": "sha512-NhyOejdhRGS8Iwv+KKR2zTq2PpysF9XqY+Zk77vQHqNbo/PwZCzB5/h7VGuREZm1fixhs4Q/qWRSi5zmAiO4Fw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.0.tgz",
+      "integrity": "sha512-5S/rbP5OY+GHLC5qXp1y/Mx//e92L1YDqkiBbO9TQOvuFXM+iDqUNG5XopAnXoRH3FjIUDkeGcY1cgNvnXp/kA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.0.tgz",
+      "integrity": "sha512-XM2BFsEBz0Fw37V0zU4CXfcfuACMrppsMFKdYY2WuTS3yi8O1nFOhil/xhKTmE1nPmVyvQJjJivgDT+xh8pXJA==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/linux-x64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.0.tgz",
+      "integrity": "sha512-9yl91rHw/cpwMCNytUDxwj2XjFpxML0y9HAOH9pNVQDpQrBxHy01Dx+vaMu0N1CKa/RzBD2hB4u//nfc+Sd3Cw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.0.tgz",
+      "integrity": "sha512-RuG4PSMPFfrkH6UwCAqBzauBWTygTvb1nxWasEJooGSJ/NwRw7b2HOwyRTQIU97Hq37l3npXoZGYMy3b3xYvPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.0.tgz",
+      "integrity": "sha512-jl+qisSB5jk01N5f7sPCsBENCOlPiS/xptD5yxOx2oqQfyourJwIKLRA2yqWdifj3owQZCL2sn6o08dBzZGQzA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.0.tgz",
+      "integrity": "sha512-21sUNbq2r84YE+SJDfaQRvdgznTD8Xc0oc3p3iW/a1EVWeNj/SdUCbm5U0itZPQYRuRTW20fPMWMpcrciH2EJw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.0.tgz",
+      "integrity": "sha512-2gwwriSMPcCFRlPlKx3zLQhfN/2WjJ2NSlg5TKLQOJdV0mSxIcYNTMhk3H3ulL/cak+Xj0lY1Ym9ysDV1igceg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.0.tgz",
+      "integrity": "sha512-bxI7ThgLzPrPz484/S9jLlvUAHYMzy6I0XiU1ZMeAEOBcS0VePBFxh1JjTQt3Xiat5b6Oh4x7UC7IwKQKIJRIg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.0.tgz",
+      "integrity": "sha512-ZUAc2YK6JW89xTbXvftxdnYy3m4iHIkDtK3CLce8wg8M2L+YZhIvO1DKpxrd0Yr59AeNNkTiic9YLf6FTtXWMw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.0.tgz",
+      "integrity": "sha512-eSNxISBu8XweVEWG31/JzjkIGbGIJN/TrRoiSVZwZ6pkC6VX4Im/WV2cz559/TXLcYbcrDN8JtKgd9DJVIo8GA==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/@esbuild/win32-x64": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.0.tgz",
+      "integrity": "sha512-ZENoHJBxA20C2zFzh6AI4fT6RraMzjYw4xKWemRTRmRVtN9c5DcH9r/f2ihEkMjOW5eGgrwCslG/+Y/3bL+DHQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@remotion/bundler/node_modules/esbuild": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.0.tgz",
+      "integrity": "sha512-BXq5mqc8ltbaN34cDqWuYKyNhX8D/Z0J1xdtdQ8UcIIIyJyz+ZMKUt58tF3SrZ85jcfN/PZYhjR5uDQAYNVbuw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.0",
+        "@esbuild/android-arm": "0.25.0",
+        "@esbuild/android-arm64": "0.25.0",
+        "@esbuild/android-x64": "0.25.0",
+        "@esbuild/darwin-arm64": "0.25.0",
+        "@esbuild/darwin-x64": "0.25.0",
+        "@esbuild/freebsd-arm64": "0.25.0",
+        "@esbuild/freebsd-x64": "0.25.0",
+        "@esbuild/linux-arm": "0.25.0",
+        "@esbuild/linux-arm64": "0.25.0",
+        "@esbuild/linux-ia32": "0.25.0",
+        "@esbuild/linux-loong64": "0.25.0",
+        "@esbuild/linux-mips64el": "0.25.0",
+        "@esbuild/linux-ppc64": "0.25.0",
+        "@esbuild/linux-riscv64": "0.25.0",
+        "@esbuild/linux-s390x": "0.25.0",
+        "@esbuild/linux-x64": "0.25.0",
+        "@esbuild/netbsd-arm64": "0.25.0",
+        "@esbuild/netbsd-x64": "0.25.0",
+        "@esbuild/openbsd-arm64": "0.25.0",
+        "@esbuild/openbsd-x64": "0.25.0",
+        "@esbuild/sunos-x64": "0.25.0",
+        "@esbuild/win32-arm64": "0.25.0",
+        "@esbuild/win32-ia32": "0.25.0",
+        "@esbuild/win32-x64": "0.25.0"
+      }
+    },
+    "node_modules/@remotion/cli": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/cli/-/cli-4.0.424.tgz",
+      "integrity": "sha512-nXUa3re2dsGxc3TAwgV6p7ERjRtFXSUXv0yif8z5kXH7gFqIbeAZ0EfJyX+QQ3i6g2/ulTiZd7C/NgOMdvO0ow==",
+      "dev": true,
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "@remotion/bundler": "4.0.424",
+        "@remotion/media-utils": "4.0.424",
+        "@remotion/player": "4.0.424",
+        "@remotion/renderer": "4.0.424",
+        "@remotion/studio": "4.0.424",
+        "@remotion/studio-server": "4.0.424",
+        "@remotion/studio-shared": "4.0.424",
+        "dotenv": "17.3.1",
+        "minimist": "1.2.6",
+        "prompts": "2.4.2",
+        "remotion": "4.0.424"
+      },
+      "bin": {
+        "remotion": "remotion-cli.js",
+        "remotionb": "remotionb-cli.js",
+        "remotiond": "remotiond-cli.js"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@remotion/cli/node_modules/minimist": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@remotion/compositor-darwin-arm64": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/compositor-darwin-arm64/-/compositor-darwin-arm64-4.0.424.tgz",
+      "integrity": "sha512-k8qLyToqB+uTdMQY0kHmYInoSh7ddKh/mWdWGsXxtt1IYpdchwawgIMs/a5KFF9jYPOrpUgHEhyCGLg48Mi+ag==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@remotion/compositor-darwin-x64": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/compositor-darwin-x64/-/compositor-darwin-x64-4.0.424.tgz",
+      "integrity": "sha512-IsuV7ZkRMqn5MPP1A2mJZeL5X9M/4Ur0yJAGMITV+s6c2J7OJIkMgHuf9XnUP6R4wJwKhE+5raUaQGLov1e2VQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@remotion/compositor-linux-arm64-gnu": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/compositor-linux-arm64-gnu/-/compositor-linux-arm64-gnu-4.0.424.tgz",
+      "integrity": "sha512-piDIl7jAcy10aFi7gzDkL5HEyx2MeY74mUXg8Sg++7V0iR6Vyx8TtPkr71/cs2WoFnHcefbOco/pNnLmxXAMbA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@remotion/compositor-linux-arm64-musl": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/compositor-linux-arm64-musl/-/compositor-linux-arm64-musl-4.0.424.tgz",
+      "integrity": "sha512-L4cubvTp2J7D8mPXX8TTjZnePSetCzt/CIgyQCIz0JWMP+gbl86IOTE0Z5GtTThdmUjGqZqyZfWTwcFBZIQZuw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@remotion/compositor-linux-x64-gnu": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/compositor-linux-x64-gnu/-/compositor-linux-x64-gnu-4.0.424.tgz",
+      "integrity": "sha512-XhRJsa4Z43fJmjMiPzt1asTWwNz7+xnwy22/Clx2OdFSnZ66MOvN1M6QHJ2SrZdWZ9UBB1uN9itafUTiUQMVnQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@remotion/compositor-linux-x64-musl": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/compositor-linux-x64-musl/-/compositor-linux-x64-musl-4.0.424.tgz",
+      "integrity": "sha512-7HOF5S6y4D6iereHk29jvMFQZ733bqsdO8y7uk4IHKbneklUg8Zhv81W7hmcQ2OSH7ADmyV47NEgxkFbsj0A1w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@remotion/compositor-win32-x64-msvc": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/compositor-win32-x64-msvc/-/compositor-win32-x64-msvc-4.0.424.tgz",
+      "integrity": "sha512-SJZthkm1z0YJElrdU4tiDj4cSYo+0JdNNMBtXaURu0luFcR19PP4O+m78Obo8F3RpOnU5CnDb14efmbpgS8WEg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@remotion/google-fonts": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/google-fonts/-/google-fonts-4.0.424.tgz",
+      "integrity": "sha512-4s0aH6JQimOqDxV22C/our6JV5eGDtxR4BF1RRtuuKf0ovw+rvOKZ2XsySsTVO4NjbSKPwpbVdkwRCg5822w2w==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "remotion": "4.0.424"
+      }
+    },
+    "node_modules/@remotion/licensing": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/licensing/-/licensing-4.0.424.tgz",
+      "integrity": "sha512-sTILsx6+tCHLgzp3m2nFevf73CL1lgdGdgwH4jMe3kbVtEDj7+Va3QFWLLm3ZMex7IsmiR522pAW0MgvMhUOFg==",
+      "license": "MIT"
+    },
+    "node_modules/@remotion/media-parser": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/media-parser/-/media-parser-4.0.424.tgz",
+      "integrity": "sha512-ooEsA8BV0wb65BsxOqE3lsmGuWcE8qfE/e5xjH7KFAlCgrWfdAk3J/Ee/RcqxJ+qz91Izx7xjE6OUqT9hx2XyA==",
+      "license": "Remotion License https://remotion.dev/license"
+    },
+    "node_modules/@remotion/media-utils": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/media-utils/-/media-utils-4.0.424.tgz",
+      "integrity": "sha512-XJSTz9A53qCd3ctoDe5efOTR4SbRBVArtwEJw2yQHp+lH+5n2ajeEfrAdcGBbpzsvVngsz0hTzgvcdI8YHBMwA==",
+      "license": "MIT",
+      "dependencies": {
+        "@remotion/media-parser": "4.0.424",
+        "@remotion/webcodecs": "4.0.424",
+        "mediabunny": "1.34.4",
+        "remotion": "4.0.424"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@remotion/player": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/player/-/player-4.0.424.tgz",
+      "integrity": "sha512-nhEXc6dZMHL13Od7IGcNG/D58IHwCCjPhMioDAG5CCQ/c+LPirkaXGmf5TuIrd933DOWrNUpXuKDUyAOJozPqA==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "remotion": "4.0.424"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@remotion/renderer": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/renderer/-/renderer-4.0.424.tgz",
+      "integrity": "sha512-57b7ZFYSouTXEA4kKmfyKaooiTw0eQ/A3Th30Jxa4KdQspl+D3z0SaiIzE9yP/pxHoT2qmUntUbjFxPUoHhjyQ==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "@remotion/licensing": "4.0.424",
+        "@remotion/streaming": "4.0.424",
+        "execa": "5.1.1",
+        "extract-zip": "2.0.1",
+        "remotion": "4.0.424",
+        "source-map": "^0.8.0-beta.0",
+        "ws": "8.17.1"
+      },
+      "optionalDependencies": {
+        "@remotion/compositor-darwin-arm64": "4.0.424",
+        "@remotion/compositor-darwin-x64": "4.0.424",
+        "@remotion/compositor-linux-arm64-gnu": "4.0.424",
+        "@remotion/compositor-linux-arm64-musl": "4.0.424",
+        "@remotion/compositor-linux-x64-gnu": "4.0.424",
+        "@remotion/compositor-linux-x64-musl": "4.0.424",
+        "@remotion/compositor-win32-x64-msvc": "4.0.424"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@remotion/renderer/node_modules/source-map": {
+      "version": "0.8.0-beta.0",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
+      "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==",
+      "deprecated": "The work that was done in this beta branch won't be included in future versions",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "whatwg-url": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@remotion/streaming": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/streaming/-/streaming-4.0.424.tgz",
+      "integrity": "sha512-5axS/tXlXRJnEtiMRQCoH4z+lktILThYysJq5G9hYCBrOk8wdPMQ8lsVNC/agBLY6G6lGWMWjF3PGFBskxNlFQ==",
+      "license": "MIT"
+    },
+    "node_modules/@remotion/studio": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/studio/-/studio-4.0.424.tgz",
+      "integrity": "sha512-zdko2oC7mtarPlARyM2ULoI9+5l1zigZ2kdKpYOe+LG3QI+8mB5rZC6Ndr962mmuGwbBZnehZyteJKtSp5ihrw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remotion/media-utils": "4.0.424",
+        "@remotion/player": "4.0.424",
+        "@remotion/renderer": "4.0.424",
+        "@remotion/studio-shared": "4.0.424",
+        "@remotion/web-renderer": "4.0.424",
+        "@remotion/zod-types": "4.0.424",
+        "mediabunny": "1.34.4",
+        "memfs": "3.4.3",
+        "open": "^8.4.2",
+        "remotion": "4.0.424",
+        "semver": "7.5.3",
+        "source-map": "0.7.3",
+        "zod": "3.22.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@remotion/studio-server": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/studio-server/-/studio-server-4.0.424.tgz",
+      "integrity": "sha512-t0Gnaz0fSir+0vWXi49VeXDF5YB5QuiB0cVN859WffPhB7s7CzK7IQgWlT2Ze5ePMY3WWzz11lgEimWgGpkVuA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "7.24.1",
+        "@remotion/bundler": "4.0.424",
+        "@remotion/renderer": "4.0.424",
+        "@remotion/studio-shared": "4.0.424",
+        "memfs": "3.4.3",
+        "open": "^8.4.2",
+        "recast": "0.23.11",
+        "remotion": "4.0.424",
+        "semver": "7.5.3",
+        "source-map": "0.7.3"
+      }
+    },
+    "node_modules/@remotion/studio-server/node_modules/semver": {
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@remotion/studio-shared": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/studio-shared/-/studio-shared-4.0.424.tgz",
+      "integrity": "sha512-1vSWV/Fagns9FtFTxozUSh7qylTPjw6glH/hIr5cNwdHO4TEy5gDu+yAiuBBPCLoQMhaCNrThsQYUP4x7AbZ7w==",
+      "license": "MIT",
+      "dependencies": {
+        "remotion": "4.0.424"
+      }
+    },
+    "node_modules/@remotion/studio/node_modules/semver": {
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
+      "license": "ISC",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@remotion/tailwind": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/tailwind/-/tailwind-4.0.424.tgz",
+      "integrity": "sha512-sd8p2m1M11MGNPZCOvcqiA2wPFOBR3LKjar82CErf7v8omg1CRzYHLFXwRYSuAKOoZt8gAbM/lhYVpWhJtjHkA==",
+      "license": "MIT",
+      "dependencies": {
+        "autoprefixer": "10.4.20",
+        "css-loader": "5.2.7",
+        "postcss": "8.4.47",
+        "postcss-loader": "^7.3.0",
+        "postcss-preset-env": "^8.3.2",
+        "style-loader": "4.0.0",
+        "tailwindcss": "3.4.13"
+      },
+      "peerDependencies": {
+        "@remotion/bundler": "4.0.424"
+      }
+    },
+    "node_modules/@remotion/tailwind/node_modules/autoprefixer": {
+      "version": "10.4.20",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
+      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.23.3",
+        "caniuse-lite": "^1.0.30001646",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/@remotion/tailwind/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/@remotion/tailwind/node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@remotion/tailwind/node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/@remotion/tailwind/node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@remotion/tailwind/node_modules/postcss": {
+      "version": "8.4.47",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/@remotion/tailwind/node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@remotion/tailwind/node_modules/postcss-load-config/node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/@remotion/tailwind/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/@remotion/tailwind/node_modules/tailwindcss": {
+      "version": "3.4.13",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz",
+      "integrity": "sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.0",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@remotion/web-renderer": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/web-renderer/-/web-renderer-4.0.424.tgz",
+      "integrity": "sha512-mHeKokorZgMzi5tzOVBdgRycsw23d9CUyOmkdtXh1gLpGH6c1jBvsN5JZ7jv17pCLhBPlpNtCACGGDWO28rMwQ==",
+      "license": "UNLICENSED",
+      "dependencies": {
+        "@remotion/licensing": "4.0.424",
+        "mediabunny": "1.34.4",
+        "remotion": "4.0.424"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
+    "node_modules/@remotion/webcodecs": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/webcodecs/-/webcodecs-4.0.424.tgz",
+      "integrity": "sha512-Rgm/cXJY8SfbC4dZL2rv6S9ucNcpAxl0qF2gpXTABbEKduZtPeR3JSpnPC8PG/x5w1zZl+BrH+aDPOf5G1V3HQ==",
+      "license": "Remotion License (See https://remotion.dev/docs/webcodecs#license)",
+      "dependencies": {
+        "@remotion/media-parser": "4.0.424"
+      }
+    },
+    "node_modules/@remotion/zod-types": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/@remotion/zod-types/-/zod-types-4.0.424.tgz",
+      "integrity": "sha512-tQEr18cRKGEJZNOF4bnP2fPEPDkGLYCKT8mReCL0Z8tZu5Noaw77gXaZtydiINm7f2SprjF7vzC+r27F2WBCJA==",
+      "license": "MIT",
+      "dependencies": {
+        "remotion": "4.0.424"
+      },
+      "peerDependencies": {
+        "zod": "3.22.3"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -3084,6 +4966,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@rushstack/eslint-patch": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.15.0.tgz",
+      "integrity": "sha512-ojSshQPKwVvSMR8yT2L/QtUkV5SXi/IfDiJ4/8d6UbTPjiHVmxZzUAzGD8Tzks1b9+qQkZa0isUOvYObedITaw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -3160,18 +5049,51 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/dom-mediacapture-transform": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@types/dom-mediacapture-transform/-/dom-mediacapture-transform-0.1.11.tgz",
+      "integrity": "sha512-Y2p+nGf1bF2XMttBnsVPHUWzRRZzqUoJAKmiP10b5umnO6DDrWI0BrGDJy1pOHoOULVmGSfFNkQrAlC5dcj6nQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/dom-webcodecs": "*"
+      }
+    },
+    "node_modules/@types/dom-webcodecs": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/@types/dom-webcodecs/-/dom-webcodecs-0.1.13.tgz",
+      "integrity": "sha512-O5hkiFIcjjszPIYyUSyvScyvrBoV3NOEEZx/pMlsu44TKzWNkLVBBxnxJz42in5n3QIolYOcBYFCPZZ0h8SkwQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/eslint": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
+      "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "node_modules/@types/eslint-scope": {
+      "version": "3.7.7",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
+      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/eslint": "*",
+        "@types/estree": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/json5": {
@@ -3185,7 +5107,6 @@
       "version": "22.19.11",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.11.tgz",
       "integrity": "sha512-BH7YwL6rA93ReqeQS1c4bsPpcfOmJasG+Fkr6Y59q83f9M1WcBRHR2vM+P9eOisYRcN3ujQoiZY8uk5W+1WL8w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -3211,18 +5132,28 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/yauzl": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
+      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.55.0.tgz",
-      "integrity": "sha512-1y/MVSz0NglV1ijHC8OT49mPJ4qhPYjiK08YUQVbIOyu+5k862LKUHFkpKHWu//zmr7hDR2rhwUm6gnCGNmGBQ==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.0.tgz",
+      "integrity": "sha512-lRyPDLzNCuae71A3t9NEINBiTn7swyOhvUj3MyUOxb8x6g6vPEFoOU+ZRmGMusNC3X3YMhqMIX7i8ShqhT74Pw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.12.2",
-        "@typescript-eslint/scope-manager": "8.55.0",
-        "@typescript-eslint/type-utils": "8.55.0",
-        "@typescript-eslint/utils": "8.55.0",
-        "@typescript-eslint/visitor-keys": "8.55.0",
+        "@typescript-eslint/scope-manager": "8.56.0",
+        "@typescript-eslint/type-utils": "8.56.0",
+        "@typescript-eslint/utils": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0",
         "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
         "ts-api-utils": "^2.4.0"
@@ -3235,8 +5166,8 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.55.0",
-        "eslint": "^8.57.0 || ^9.0.0",
+        "@typescript-eslint/parser": "^8.56.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
@@ -3251,16 +5182,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.55.0.tgz",
-      "integrity": "sha512-4z2nCSBfVIMnbuu8uinj+f0o4qOeggYJLbjpPHka3KH1om7e+H9yLKTYgksTaHcGco+NClhhY2vyO3HsMH1RGw==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.56.0.tgz",
+      "integrity": "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.55.0",
-        "@typescript-eslint/types": "8.55.0",
-        "@typescript-eslint/typescript-estree": "8.55.0",
-        "@typescript-eslint/visitor-keys": "8.55.0",
+        "@typescript-eslint/scope-manager": "8.56.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -3271,19 +5202,19 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.55.0.tgz",
-      "integrity": "sha512-zRcVVPFUYWa3kNnjaZGXSu3xkKV1zXy8M4nO/pElzQhFweb7PPtluDLQtKArEOGmjXoRjnUZ29NjOiF0eCDkcQ==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.56.0.tgz",
+      "integrity": "sha512-M3rnyL1vIQOMeWxTWIW096/TtVP+8W3p/XnaFflhmcFp+U4zlxUxWj4XwNs6HbDeTtN4yun0GNTTDBw/SvufKg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.55.0",
-        "@typescript-eslint/types": "^8.55.0",
+        "@typescript-eslint/tsconfig-utils": "^8.56.0",
+        "@typescript-eslint/types": "^8.56.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -3298,14 +5229,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.55.0.tgz",
-      "integrity": "sha512-fVu5Omrd3jeqeQLiB9f1YsuK/iHFOwb04bCtY4BSCLgjNbOD33ZdV6KyEqplHr+IlpgT0QTZ/iJ+wT7hvTx49Q==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.56.0.tgz",
+      "integrity": "sha512-7UiO/XwMHquH+ZzfVCfUNkIXlp/yQjjnlYUyYz7pfvlK3/EyyN6BK+emDmGNyQLBtLGaYrTAI6KOw8tFucWL2w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.55.0",
-        "@typescript-eslint/visitor-keys": "8.55.0"
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3316,9 +5247,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.55.0.tgz",
-      "integrity": "sha512-1R9cXqY7RQd7WuqSN47PK9EDpgFUK3VqdmbYrvWJZYDd0cavROGn+74ktWBlmJ13NXUQKlZ/iAEQHI/V0kKe0Q==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.56.0.tgz",
+      "integrity": "sha512-bSJoIIt4o3lKXD3xmDh9chZcjCz5Lk8xS7Rxn+6l5/pKrDpkCwtQNQQwZ2qRPk7TkUYhrq3WPIHXOXlbXP0itg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3333,15 +5264,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.55.0.tgz",
-      "integrity": "sha512-x1iH2unH4qAt6I37I2CGlsNs+B9WGxurP2uyZLRz6UJoZWDBx9cJL1xVN/FiOmHEONEg6RIufdvyT0TEYIgC5g==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.56.0.tgz",
+      "integrity": "sha512-qX2L3HWOU2nuDs6GzglBeuFXviDODreS58tLY/BALPC7iu3Fa+J7EOTwnX9PdNBxUI7Uh0ntP0YWGnxCkXzmfA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.55.0",
-        "@typescript-eslint/typescript-estree": "8.55.0",
-        "@typescript-eslint/utils": "8.55.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0",
+        "@typescript-eslint/utils": "8.56.0",
         "debug": "^4.4.3",
         "ts-api-utils": "^2.4.0"
       },
@@ -3353,14 +5284,14 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.55.0.tgz",
-      "integrity": "sha512-ujT0Je8GI5BJWi+/mMoR0wxwVEQaxM+pi30xuMiJETlX80OPovb2p9E8ss87gnSVtYXtJoU9U1Cowcr6w2FE0w==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.56.0.tgz",
+      "integrity": "sha512-DBsLPs3GsWhX5HylbP9HNG15U0bnwut55Lx12bHB9MpXxQ+R5GC8MwQe+N1UFXxAeQDvEsEDY6ZYwX03K7Z6HQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3372,16 +5303,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.55.0.tgz",
-      "integrity": "sha512-EwrH67bSWdx/3aRQhCoxDaHM+CrZjotc2UCCpEDVqfCE+7OjKAGWNY2HsCSTEVvWH2clYQK8pdeLp42EVs+xQw==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.56.0.tgz",
+      "integrity": "sha512-ex1nTUMWrseMltXUHmR2GAQ4d+WjkZCT4f+4bVsps8QEdh0vlBsaCokKTPlnqBFqqGaxilDNJG7b8dolW2m43Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.55.0",
-        "@typescript-eslint/tsconfig-utils": "8.55.0",
-        "@typescript-eslint/types": "8.55.0",
-        "@typescript-eslint/visitor-keys": "8.55.0",
+        "@typescript-eslint/project-service": "8.56.0",
+        "@typescript-eslint/tsconfig-utils": "8.56.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0",
         "debug": "^4.4.3",
         "minimatch": "^9.0.5",
         "semver": "^7.7.3",
@@ -3426,16 +5357,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.55.0.tgz",
-      "integrity": "sha512-BqZEsnPGdYpgyEIkDC1BadNY8oMwckftxBT+C8W0g1iKPdeqKZBtTfnvcq0nf60u7MkjFO8RBvpRGZBPw4L2ow==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.56.0.tgz",
+      "integrity": "sha512-RZ3Qsmi2nFGsS+n+kjLAYDPVlrzf7UhTffrDIKr+h2yzAlYP/y5ZulU0yeDEPItos2Ph46JAL5P/On3pe7kDIQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.9.1",
-        "@typescript-eslint/scope-manager": "8.55.0",
-        "@typescript-eslint/types": "8.55.0",
-        "@typescript-eslint/typescript-estree": "8.55.0"
+        "@typescript-eslint/scope-manager": "8.56.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3445,19 +5376,19 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.55.0.tgz",
-      "integrity": "sha512-AxNRwEie8Nn4eFS1FzDMJWIISMGoXMb037sgCBJ3UR6o0fQTzr2tqN9WT+DkWJPhIdQCfV7T6D387566VtnCJA==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.56.0.tgz",
+      "integrity": "sha512-q+SL+b+05Ud6LbEE35qe4A99P+htKTKVbyiNEe45eCbJFyh/HVK9QXwlrbz+Q4L8SOW4roxSVwXYj4DMBT7Ieg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.55.0",
-        "eslint-visitor-keys": "^4.2.1"
+        "@typescript-eslint/types": "8.56.0",
+        "eslint-visitor-keys": "^5.0.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3467,6 +5398,19 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.0.tgz",
+      "integrity": "sha512-A0XeIi7CXU7nPlfHS9loMYEKxUaONu/hTEzHTGba9Huu94Cq1hPivf+DE5erJozZOky0LfvXAyrV/tcswpLI0Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/@unrs/resolver-binding-android-arm-eabi": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.11.1.tgz",
@@ -3736,6 +5680,164 @@
         "win32"
       ]
     },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
+      "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/helper-numbers": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
+      "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
+      "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
+      "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-numbers": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
+      "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/floating-point-hex-parser": "1.13.2",
+        "@webassemblyjs/helper-api-error": "1.13.2",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
+      "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
+      "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/wasm-gen": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
+      "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
+      "license": "MIT",
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
+      "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
+      "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
+      "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/helper-wasm-section": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-opt": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1",
+        "@webassemblyjs/wast-printer": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
+      "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
+      "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
+      "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-api-error": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
+      "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@xyflow/react": {
       "version": "12.10.0",
       "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.10.0.tgz",
@@ -3772,7 +5874,6 @@
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -3781,6 +5882,18 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-import-phases": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
+      "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "peerDependencies": {
+        "acorn": "^8.14.0"
+      }
+    },
     "node_modules/acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
@@ -3795,7 +5908,6 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
@@ -3808,6 +5920,54 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ajv-formats/node_modules/ajv": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -3853,7 +6013,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
       "license": "Python-2.0"
     },
     "node_modules/aria-hidden": {
@@ -4038,6 +6197,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/ast-types": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
+      "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ast-types-flow": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
@@ -4059,7 +6231,6 @@
       "version": "10.4.24",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.24.tgz",
       "integrity": "sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4139,12 +6310,20 @@
       "version": "2.9.19",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz",
       "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==",
-      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.js"
       }
     },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -4184,7 +6363,6 @@
       "version": "4.28.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
       "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4214,6 +6392,21 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "license": "MIT"
+    },
     "node_modules/call-bind": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
@@ -4268,7 +6461,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -4335,6 +6527,15 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
+      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
     "node_modules/class-variance-authority": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -4404,18 +6605,36 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true,
-      "license": "MIT"
+    "node_modules/cosmiconfig": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+      "license": "MIT",
+      "dependencies": {
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
     },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -4426,6 +6645,106 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-blank-pseudo": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-5.0.2.tgz",
+      "integrity": "sha512-aCU4AZ7uEcVSUzagTlA9pHciz7aWPKA/YzrEkpdSopJ2pvhIxiQ5sYeMz1/KByxlIo4XBdvMNJAVKMg/GRnhfw==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/css-has-pseudo": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-5.0.2.tgz",
+      "integrity": "sha512-q+U+4QdwwB7T9VEW/LyO6CFrLAeLqOykC5mDqJXc7aKZAhDbq7BvGT13VGJe+IwBfdN2o3Xdw2kJ5IxwV1Sc9Q==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/selector-specificity": "^2.0.1",
+        "postcss-selector-parser": "^6.0.10",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/css-loader": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.7.tgz",
+      "integrity": "sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==",
+      "license": "MIT",
+      "dependencies": {
+        "icss-utils": "^5.1.0",
+        "loader-utils": "^2.0.0",
+        "postcss": "^8.2.15",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.1.0",
+        "schema-utils": "^3.0.0",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.27.0 || ^5.0.0"
+      }
+    },
+    "node_modules/css-prefers-color-scheme": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-8.0.2.tgz",
+      "integrity": "sha512-OvFghizHJ45x7nsJJUSYLyQNTzsCU8yWjxAc/nhPQg1pbs18LMoET8N3kOweFDPy0JV0OSXN2iqRFhPBHYOeMA==",
+      "license": "CC0-1.0",
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/cssdb": {
+      "version": "7.11.2",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.11.2.tgz",
+      "integrity": "sha512-lhQ32TFkc1X4eTefGfYPvgovRSzIMofHkigfH8nWtyRL4XJLsRhJFreRvEgKzept7x1rjBuy3J/MurXLaFxW/A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        }
+      ],
+      "license": "CC0-1.0"
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4625,7 +6944,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -4664,6 +6982,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/define-properties": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
@@ -4723,6 +7050,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dotenv": {
+      "version": "17.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.3.1.tgz",
+      "integrity": "sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -4742,7 +7082,6 @@
       "version": "1.5.286",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.286.tgz",
       "integrity": "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
@@ -4752,6 +7091,46 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
+      "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.24.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
@@ -4869,6 +7248,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
+      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
+      "license": "MIT"
+    },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -4975,7 +7360,6 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
       "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -5055,24 +7439,25 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.1.6.tgz",
-      "integrity": "sha512-vKq40io2B0XtkkNDYyleATwblNt8xuh3FWp8SpSz3pt7P01OkBFlKsJZ2mWt5WsCySlDQLckb1zMY9yE9Qy0LA==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-15.5.7.tgz",
+      "integrity": "sha512-nU/TRGHHeG81NeLW5DeQT5t6BDUqbpsNQTvef1ld/tqHT+/zTx60/TIhKnmPISTTe++DVo+DLxDmk4rnwHaZVw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@next/eslint-plugin-next": "16.1.6",
+        "@next/eslint-plugin-next": "15.5.7",
+        "@rushstack/eslint-patch": "^1.10.3",
+        "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
         "eslint-import-resolver-node": "^0.3.6",
         "eslint-import-resolver-typescript": "^3.5.2",
-        "eslint-plugin-import": "^2.32.0",
+        "eslint-plugin-import": "^2.31.0",
         "eslint-plugin-jsx-a11y": "^6.10.0",
         "eslint-plugin-react": "^7.37.0",
-        "eslint-plugin-react-hooks": "^7.0.0",
-        "globals": "16.4.0",
-        "typescript-eslint": "^8.46.0"
+        "eslint-plugin-react-hooks": "^5.0.0"
       },
       "peerDependencies": {
-        "eslint": ">=9.0.0",
+        "eslint": "^7.23.0 || ^8.0.0 || ^9.0.0",
         "typescript": ">=3.3.1"
       },
       "peerDependenciesMeta": {
@@ -5081,19 +7466,6 @@
         }
       }
     },
-    "node_modules/eslint-config-next/node_modules/globals": {
-      "version": "16.4.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-16.4.0.tgz",
-      "integrity": "sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
@@ -5297,20 +7669,13 @@
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.1.tgz",
-      "integrity": "sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
+      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.24.4",
-        "@babel/parser": "^7.24.4",
-        "hermes-parser": "^0.25.1",
-        "zod": "^3.25.0 || ^4.0.0",
-        "zod-validation-error": "^3.5.0 || ^4.0.0"
-      },
       "engines": {
-        "node": ">=18"
+        "node": ">=10"
       },
       "peerDependencies": {
         "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
@@ -5392,6 +7757,20 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
@@ -5409,7 +7788,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "estraverse": "^5.2.0"
@@ -5422,7 +7800,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -5438,11 +7815,77 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "extract-zip": "cli.js"
+      },
+      "engines": {
+        "node": ">= 10.17.0"
+      },
+      "optionalDependencies": {
+        "@types/yauzl": "^2.9.1"
+      }
+    },
+    "node_modules/extract-zip/node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-glob": {
@@ -5477,7 +7920,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-levenshtein": {
@@ -5487,6 +7929,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/fastq": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
@@ -5496,6 +7954,15 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "license": "MIT",
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -5579,7 +8046,6 @@
       "version": "5.3.4",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
       "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "*"
@@ -5616,6 +8082,12 @@
         }
       }
     },
+    "node_modules/fs-monkey": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
+      "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
+      "license": "Unlicense"
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -5680,16 +8152,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/gensync": {
-      "version": "1.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -5738,6 +8200,18 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-symbol-description": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
@@ -5781,6 +8255,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/globals": {
       "version": "14.0.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
@@ -5824,6 +8304,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
     "node_modules/graphlib": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
@@ -5850,7 +8336,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -5926,21 +8411,25 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/hermes-estree": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
-      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
-      "dev": true,
-      "license": "MIT"
+    "node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.17.0"
+      }
     },
-    "node_modules/hermes-parser": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
-      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "hermes-estree": "0.25.1"
+    "node_modules/icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "license": "ISC",
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
     "node_modules/ignore": {
@@ -5957,7 +8446,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
       "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
@@ -6013,6 +8501,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "license": "MIT"
+    },
     "node_modules/is-async-function": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
@@ -6151,6 +8645,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -6308,6 +8817,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-string": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
@@ -6405,6 +8926,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/isarray": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
@@ -6416,7 +8949,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/iterator.prototype": {
@@ -6437,6 +8969,35 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/jest-worker": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/jest-worker/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/jiti": {
       "version": "1.21.7",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
@@ -6450,14 +9011,12 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
       "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
@@ -6466,19 +9025,6 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/jsesc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
-      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -6486,11 +9032,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "license": "MIT"
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/json-stable-stringify-without-jsonify": {
@@ -6504,7 +9055,6 @@
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "json5": "lib/cli.js"
@@ -6539,6 +9089,16 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.23",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
@@ -6591,6 +9151,33 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "license": "MIT"
     },
+    "node_modules/loader-runner": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.1.tgz",
+      "integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.11.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "license": "MIT",
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -6620,6 +9207,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
+      "license": "MIT"
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -6634,13 +9227,15 @@
       }
     },
     "node_modules/lru-cache": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "dev": true,
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
       "license": "ISC",
       "dependencies": {
-        "yallist": "^3.0.2"
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/lucide-react": {
@@ -6662,6 +9257,41 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mediabunny": {
+      "version": "1.34.4",
+      "resolved": "https://registry.npmjs.org/mediabunny/-/mediabunny-1.34.4.tgz",
+      "integrity": "sha512-f1B95A60YoCsZQO/JQYxPDorybEz2Sjasf4RrpwGSMmJW6JVyhI/iJDri9LF6kk5WwUovF8oiTvRNM6xGjWo5w==",
+      "license": "MPL-2.0",
+      "workspaces": [
+        "packages/*"
+      ],
+      "dependencies": {
+        "@types/dom-mediacapture-transform": "^0.1.11",
+        "@types/dom-webcodecs": "0.1.13"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/Vanilagy"
+      }
+    },
+    "node_modules/memfs": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.3.tgz",
+      "integrity": "sha512-eivjfi7Ahr6eQTn44nvTnR60e4a1Fs1Via2kCR5lHo/kyNoiMWaXCNJ/GpSd0ilXas2JSOl9B5FTIhflXu0hlg==",
+      "license": "Unlicense",
+      "dependencies": {
+        "fs-monkey": "1.0.3"
+      },
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "license": "MIT"
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -6684,6 +9314,36 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -6726,7 +9386,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/mz": {
@@ -6781,6 +9440,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "license": "MIT"
+    },
     "node_modules/next": {
       "version": "15.5.7",
       "resolved": "https://registry.npmjs.org/next/-/next-15.5.7.tgz",
@@ -6866,7 +9531,6 @@
       "version": "2.0.27",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
       "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/normalize-path": {
@@ -6878,6 +9542,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -7009,6 +9694,47 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -7081,7 +9807,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
@@ -7090,6 +9815,24 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -7104,7 +9847,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -7116,6 +9858,21 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "license": "MIT"
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -7237,6 +9994,329 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-attribute-case-insensitive": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-6.0.3.tgz",
+      "integrity": "sha512-KHkmCILThWBRtg+Jn1owTnHPnFit4OkqS+eKiGEOPIGke54DCeYGJ6r0Fx/HjfE9M9kznApCLcU0DvnPchazMQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-clamp": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-clamp/-/postcss-clamp-4.1.0.tgz",
+      "integrity": "sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": ">=7.6.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.6"
+      }
+    },
+    "node_modules/postcss-color-functional-notation": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-5.1.0.tgz",
+      "integrity": "sha512-w2R4py6zrVE1U7FwNaAc76tNQlG9GLkrBbcFw+VhUjyDDiV28vfZG+l4LyPmpoQpeSJVtu8VgNjE8Jv5SpC7dQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/postcss-progressive-custom-properties": "^2.3.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-color-hex-alpha": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-9.0.4.tgz",
+      "integrity": "sha512-XQZm4q4fNFqVCYMGPiBjcqDhuG7Ey2xrl99AnDJMyr5eDASsAGalndVgHZF8i97VFNy1GQeZc4q2ydagGmhelQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/utilities": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-color-rebeccapurple": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-8.0.2.tgz",
+      "integrity": "sha512-xWf/JmAxVoB5bltHpXk+uGRoGFwu4WDAR7210el+iyvTdqiKpDhtcT8N3edXMoVJY0WHFMrKMUieql/wRNiXkw==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-custom-media": {
+      "version": "9.1.5",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-9.1.5.tgz",
+      "integrity": "sha512-GStyWMz7Qbo/Gtw1xVspzVSX8eipgNg4lpsO3CAeY4/A1mzok+RV6MCv3fg62trWijh/lYEj6vps4o8JcBBpDA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/cascade-layer-name-parser": "^1.0.2",
+        "@csstools/css-parser-algorithms": "^2.2.0",
+        "@csstools/css-tokenizer": "^2.1.1",
+        "@csstools/media-query-list-parser": "^2.1.1"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-custom-properties": {
+      "version": "13.3.12",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-13.3.12.tgz",
+      "integrity": "sha512-oPn/OVqONB2ZLNqN185LDyaVByELAA/u3l2CS2TS16x2j2XsmV4kd8U49+TMxmUsEU9d8fB/I10E6U7kB0L1BA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/cascade-layer-name-parser": "^1.0.13",
+        "@csstools/css-parser-algorithms": "^2.7.1",
+        "@csstools/css-tokenizer": "^2.4.1",
+        "@csstools/utilities": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-custom-selectors": {
+      "version": "7.1.12",
+      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-7.1.12.tgz",
+      "integrity": "sha512-ctIoprBMJwByYMGjXG0F7IT2iMF2hnamQ+aWZETyBM0aAlyaYdVZTeUkk8RB+9h9wP+NdN3f01lfvKl2ZSqC0g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/cascade-layer-name-parser": "^1.0.13",
+        "@csstools/css-parser-algorithms": "^2.7.1",
+        "@csstools/css-tokenizer": "^2.4.1",
+        "postcss-selector-parser": "^6.1.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-dir-pseudo-class": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-7.0.2.tgz",
+      "integrity": "sha512-cMnslilYxBf9k3qejnovrUONZx1rXeUZJw06fgIUBzABJe3D2LiLL5WAER7Imt3nrkaIgG05XZBztueLEf5P8w==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-double-position-gradients": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-4.0.4.tgz",
+      "integrity": "sha512-nUAbUXURemLXIrl4Xoia2tiu5z/n8sY+BVDZApoeT9BlpByyrp02P/lFCRrRvZ/zrGRE+MOGLhk8o7VcMCtPtQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/postcss-progressive-custom-properties": "^2.3.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-focus-visible": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-8.0.2.tgz",
+      "integrity": "sha512-f/Vd+EC/GaKElknU59esVcRYr/Y3t1ZAQyL4u2xSOgkDy4bMCmG7VP5cGvj3+BTLNE9ETfEuz2nnt4qkZwTTeA==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-focus-within": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-7.0.2.tgz",
+      "integrity": "sha512-AHAJ89UQBcqBvFgQJE9XasGuwMNkKsGj4D/f9Uk60jFmEBHpAL14DrnSk3Rj+SwZTr/WUG+mh+Rvf8fid/346w==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-font-variant": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
+      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-gap-properties": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-4.0.1.tgz",
+      "integrity": "sha512-V5OuQGw4lBumPlwHWk/PRfMKjaq/LTGR4WDTemIMCaMevArVfCCA9wBJiL1VjDAd+rzuCIlkRoRvDsSiAaZ4Fg==",
+      "license": "CC0-1.0",
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-image-set-function": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-5.0.2.tgz",
+      "integrity": "sha512-Sszjwo0ubETX0Fi5MvpYzsONwrsjeabjMoc5YqHvURFItXgIu3HdCjcVuVKGMPGzKRhgaknmdM5uVWInWPJmeg==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
     "node_modules/postcss-import": {
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
@@ -7254,6 +10334,15 @@
         "postcss": "^8.0.0"
       }
     },
+    "node_modules/postcss-initial": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
+      "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-js": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
@@ -7279,6 +10368,166 @@
         "postcss": "^8.4.21"
       }
     },
+    "node_modules/postcss-lab-function": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-5.2.3.tgz",
+      "integrity": "sha512-fi32AYKzji5/rvgxo5zXHFvAYBw0u0OzELbeCNjEZVLUir18Oj+9RmNphtM8QdLUaUnrfx8zy8vVYLmFLkdmrQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/css-color-parser": "^1.2.0",
+        "@csstools/css-parser-algorithms": "^2.1.1",
+        "@csstools/css-tokenizer": "^2.1.1",
+        "@csstools/postcss-progressive-custom-properties": "^2.3.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-loader": {
+      "version": "7.3.4",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.4.tgz",
+      "integrity": "sha512-iW5WTTBSC5BfsBJ9daFMPVrLT36MrNiC6fqOZTTaHjBNX6Pfd5p+hSBqe/fEeNd7pc13QiAyGt7VdGMw4eRC4A==",
+      "license": "MIT",
+      "dependencies": {
+        "cosmiconfig": "^8.3.5",
+        "jiti": "^1.20.0",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "postcss": "^7.0.0 || ^8.0.1",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/postcss-logical": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-6.2.0.tgz",
+      "integrity": "sha512-aqlfKGaY0nnbgI9jwUikp4gJKBqcH5noU/EdnIVceghaaDPYhZuyJVxlvWNy55tlTG5tunRKCTAX9yljLiFgmw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
+      "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
+      "license": "ISC",
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz",
+      "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==",
+      "license": "MIT",
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^7.0.0",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default/node_modules/postcss-selector-parser": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
+      "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-modules-scope": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz",
+      "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
+      "license": "ISC",
+      "dependencies": {
+        "postcss-selector-parser": "^7.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-scope/node_modules/postcss-selector-parser": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
+      "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "license": "ISC",
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/postcss-nested": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
@@ -7304,6 +10553,234 @@
         "postcss": "^8.2.14"
       }
     },
+    "node_modules/postcss-nesting": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.3.0.tgz",
+      "integrity": "sha512-JlS10AQm/RzyrUGgl5irVkAlZYTJ99mNueUl+Qab+TcHhVedLiylWVkKBhRale+rS9yWIJK48JVzQlq3LcSdeA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/selector-specificity": "^2.0.0",
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-opacity-percentage": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-2.0.0.tgz",
+      "integrity": "sha512-lyDrCOtntq5Y1JZpBFzIWm2wG9kbEdujpNt4NLannF+J9c8CgFIzPa80YQfdza+Y+yFfzbYj/rfoOsYsooUWTQ==",
+      "funding": [
+        {
+          "type": "kofi",
+          "url": "https://ko-fi.com/mrcgrtz"
+        },
+        {
+          "type": "liberapay",
+          "url": "https://liberapay.com/mrcgrtz"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/postcss-overflow-shorthand": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-4.0.1.tgz",
+      "integrity": "sha512-HQZ0qi/9iSYHW4w3ogNqVNr2J49DHJAl7r8O2p0Meip38jsdnRPgiDW7r/LlLrrMBMe3KHkvNtAV2UmRVxzLIg==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-page-break": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
+      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "postcss": "^8"
+      }
+    },
+    "node_modules/postcss-place": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-8.0.1.tgz",
+      "integrity": "sha512-Ow2LedN8sL4pq8ubukO77phSVt4QyCm35ZGCYXKvRFayAwcpgB0sjNJglDoTuRdUL32q/ZC1VkPBo0AOEr4Uiw==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-preset-env": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.5.1.tgz",
+      "integrity": "sha512-qhWnJJjP6ArLUINWJ38t6Aftxnv9NW6cXK0NuwcLCcRilbuw72dSFLkCVUJeCfHGgJiKzX+pnhkGiki0PEynWg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@csstools/postcss-cascade-layers": "^3.0.1",
+        "@csstools/postcss-color-function": "^2.2.3",
+        "@csstools/postcss-color-mix-function": "^1.0.3",
+        "@csstools/postcss-font-format-keywords": "^2.0.2",
+        "@csstools/postcss-gradients-interpolation-method": "^3.0.6",
+        "@csstools/postcss-hwb-function": "^2.2.2",
+        "@csstools/postcss-ic-unit": "^2.0.4",
+        "@csstools/postcss-is-pseudo-class": "^3.2.1",
+        "@csstools/postcss-logical-float-and-clear": "^1.0.1",
+        "@csstools/postcss-logical-resize": "^1.0.1",
+        "@csstools/postcss-logical-viewport-units": "^1.0.3",
+        "@csstools/postcss-media-minmax": "^1.0.4",
+        "@csstools/postcss-media-queries-aspect-ratio-number-values": "^1.0.4",
+        "@csstools/postcss-nested-calc": "^2.0.2",
+        "@csstools/postcss-normalize-display-values": "^2.0.1",
+        "@csstools/postcss-oklab-function": "^2.2.3",
+        "@csstools/postcss-progressive-custom-properties": "^2.3.0",
+        "@csstools/postcss-relative-color-syntax": "^1.0.2",
+        "@csstools/postcss-scope-pseudo-class": "^2.0.2",
+        "@csstools/postcss-stepped-value-functions": "^2.1.1",
+        "@csstools/postcss-text-decoration-shorthand": "^2.2.4",
+        "@csstools/postcss-trigonometric-functions": "^2.1.1",
+        "@csstools/postcss-unset-value": "^2.0.1",
+        "autoprefixer": "^10.4.14",
+        "browserslist": "^4.21.9",
+        "css-blank-pseudo": "^5.0.2",
+        "css-has-pseudo": "^5.0.2",
+        "css-prefers-color-scheme": "^8.0.2",
+        "cssdb": "^7.6.0",
+        "postcss-attribute-case-insensitive": "^6.0.2",
+        "postcss-clamp": "^4.1.0",
+        "postcss-color-functional-notation": "^5.1.0",
+        "postcss-color-hex-alpha": "^9.0.2",
+        "postcss-color-rebeccapurple": "^8.0.2",
+        "postcss-custom-media": "^9.1.5",
+        "postcss-custom-properties": "^13.2.0",
+        "postcss-custom-selectors": "^7.1.3",
+        "postcss-dir-pseudo-class": "^7.0.2",
+        "postcss-double-position-gradients": "^4.0.4",
+        "postcss-focus-visible": "^8.0.2",
+        "postcss-focus-within": "^7.0.2",
+        "postcss-font-variant": "^5.0.0",
+        "postcss-gap-properties": "^4.0.1",
+        "postcss-image-set-function": "^5.0.2",
+        "postcss-initial": "^4.0.1",
+        "postcss-lab-function": "^5.2.3",
+        "postcss-logical": "^6.2.0",
+        "postcss-nesting": "^11.3.0",
+        "postcss-opacity-percentage": "^2.0.0",
+        "postcss-overflow-shorthand": "^4.0.1",
+        "postcss-page-break": "^3.0.4",
+        "postcss-place": "^8.0.1",
+        "postcss-pseudo-class-any-link": "^8.0.2",
+        "postcss-replace-overflow-wrap": "^4.0.0",
+        "postcss-selector-not": "^7.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-pseudo-class-any-link": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-8.0.2.tgz",
+      "integrity": "sha512-FYTIuRE07jZ2CW8POvctRgArQJ43yxhr5vLmImdKUvjFCkR09kh8pIdlCwdx/jbFm7MiW4QP58L4oOUv3grQYA==",
+      "license": "CC0-1.0",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-replace-overflow-wrap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
+      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "postcss": "^8.0.3"
+      }
+    },
+    "node_modules/postcss-selector-not": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-7.0.2.tgz",
+      "integrity": "sha512-/SSxf/90Obye49VZIfc0ls4H0P6i6V1iHv0pzZH8SdgvZOPFkF37ef1r5cyWcMflJSFJ5bfuoluTnFnBBFiuSA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
@@ -7333,6 +10810,20 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prompts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -7345,11 +10836,20 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/pump": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
+      "integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -7375,6 +10875,15 @@
       ],
       "license": "MIT"
     },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
     "node_modules/react": {
       "version": "19.2.1",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
@@ -7403,6 +10912,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-refresh": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",
+      "integrity": "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
@@ -7494,6 +11012,33 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/recast": {
+      "version": "0.23.11",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",
+      "integrity": "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ast-types": "^0.16.1",
+        "esprima": "~4.0.0",
+        "source-map": "~0.6.1",
+        "tiny-invariant": "^1.3.3",
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/recast/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -7538,6 +11083,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/remotion": {
+      "version": "4.0.424",
+      "resolved": "https://registry.npmjs.org/remotion/-/remotion-4.0.424.tgz",
+      "integrity": "sha512-nyVySeGLuu/uWJgrCdAKYwQfO4AXjGtveZBLZw7nG6bZFXOtX2TCwNjlaxKrvhxHGT9CDF5/6RcxeMfUCQ+FEA==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -7562,7 +11126,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -7631,6 +11194,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
@@ -7672,11 +11255,28 @@
       "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
       "license": "MIT"
     },
+    "node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/semver": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
       "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
-      "devOptional": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -7685,6 +11285,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -7783,7 +11392,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -7796,7 +11404,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -7878,6 +11485,28 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "license": "ISC"
+    },
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -7887,6 +11516,25 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/stable-hash": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
@@ -8031,6 +11679,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -8044,6 +11701,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-loader": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz",
+      "integrity": "sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.27.0"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
@@ -8253,6 +11926,130 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.46.0.tgz",
+      "integrity": "sha512-jTwoImyr/QbOWFFso3YoU3ik0jBBDJ6JTOQiy/J2YxVJdZCc+5u7skhNwiOR3FQIygFqVUPHl7qbbxtjW2K3Qg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.15.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser-webpack-plugin": {
+      "version": "5.3.16",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.16.tgz",
+      "integrity": "sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jest-worker": "^27.4.5",
+        "schema-utils": "^4.3.0",
+        "serialize-javascript": "^6.0.2",
+        "terser": "^5.31.1"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "uglify-js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/ajv": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.3.tgz",
+      "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "license": "MIT"
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -8274,6 +12071,13 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -8331,6 +12135,15 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tr46": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
+      "integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
@@ -8497,7 +12310,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -8507,30 +12320,6 @@
         "node": ">=14.17"
       }
     },
-    "node_modules/typescript-eslint": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.55.0.tgz",
-      "integrity": "sha512-HE4wj+r5lmDVS9gdaN0/+iqNvPZwGfnJ5lZuz7s5vLlg9ODw0bIiiETaios9LvFI1U94/VBXGm3CB2Y5cNFMpw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.55.0",
-        "@typescript-eslint/parser": "8.55.0",
-        "@typescript-eslint/typescript-estree": "8.55.0",
-        "@typescript-eslint/utils": "8.55.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <6.0.0"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
@@ -8554,7 +12343,6 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/unrs-resolver": {
@@ -8596,7 +12384,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
       "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -8627,7 +12414,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "punycode": "^2.1.0"
@@ -8691,11 +12477,172 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/watchpack": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",
+      "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
+      "license": "MIT",
+      "dependencies": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
+      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/webpack": {
+      "version": "5.105.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.105.0.tgz",
+      "integrity": "sha512-gX/dMkRQc7QOMzgTe6KsYFM7DxeIONQSui1s0n/0xht36HvrgbxtM1xBlgx596NbpHuQU8P7QpKwrZYwUX48nw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/eslint-scope": "^3.7.7",
+        "@types/estree": "^1.0.8",
+        "@types/json-schema": "^7.0.15",
+        "@webassemblyjs/ast": "^1.14.1",
+        "@webassemblyjs/wasm-edit": "^1.14.1",
+        "@webassemblyjs/wasm-parser": "^1.14.1",
+        "acorn": "^8.15.0",
+        "acorn-import-phases": "^1.0.3",
+        "browserslist": "^4.28.1",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.19.0",
+        "es-module-lexer": "^2.0.0",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.11",
+        "json-parse-even-better-errors": "^2.3.1",
+        "loader-runner": "^4.3.1",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^4.3.3",
+        "tapable": "^2.3.0",
+        "terser-webpack-plugin": "^5.3.16",
+        "watchpack": "^2.5.1",
+        "webpack-sources": "^3.3.3"
+      },
+      "bin": {
+        "webpack": "bin/webpack.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-sources": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.4.tgz",
+      "integrity": "sha512-7tP1PdV4vF+lYPnkMR0jMY5/la2ub5Fc/8VQrrU+lXkiM6C4TjVfGw7iKfyhnTQOsD+6Q/iKw0eFciziRgD58Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack/node_modules/ajv": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/webpack/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/webpack/node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/webpack/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/webpack/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/webpack/node_modules/schema-utils": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.3.tgz",
+      "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
+      "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.sortby": "^4.7.0",
+        "tr46": "^1.0.1",
+        "webidl-conversions": "^4.0.2"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -8806,11 +12753,37 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
+    "node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/yallist": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true,
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "license": "ISC"
     },
     "node_modules/yaml": {
@@ -8828,6 +12801,16 @@
         "url": "https://github.com/sponsors/eemeli"
       }
     },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -8842,28 +12825,14 @@
       }
     },
     "node_modules/zod": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
-      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
-      "dev": true,
+      "version": "3.22.3",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.3.tgz",
+      "integrity": "sha512-EjIevzuJRiRPbVH4mGc8nApb/lVLKVpmUhAaR5R5doKGfAnGJ6Gr3CViAVjP+4FWSxCsybeWQdcgCtbX+7oZug==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
     },
-    "node_modules/zod-validation-error": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
-      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.0.0"
-      },
-      "peerDependencies": {
-        "zod": "^3.25.0 || ^4.0.0"
-      }
-    },
     "node_modules/zustand": {
       "version": "4.5.7",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
diff --git a/package.json b/package.json
index bfea390..b132131 100644
--- a/package.json
+++ b/package.json
@@ -16,10 +16,14 @@
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@remotion/google-fonts": "^4.0.422",
     "@remotion/tailwind": "^4.0.422",
@@ -48,7 +52,7 @@
     "@types/react-dom": "^19.0.0",
     "autoprefixer": "^10.4.24",
     "eslint": "9.39.2",
-    "eslint-config-next": "16.1.6",
+    "eslint-config-next": "^15.5.7",
     "playwright": "^1.58.2",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.17",
diff --git a/src/app/api/agents/list/route.ts b/src/app/api/agents/list/route.ts
new file mode 100644
index 0000000..7066d19
--- /dev/null
+++ b/src/app/api/agents/list/route.ts
@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server';
+import { listAgents } from '../../../../lib/agent-registry';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const projectRoot = searchParams.get('projectRoot');
+
+  if (!projectRoot) {
+    return NextResponse.json({ ok: false, error: 'projectRoot is required' }, { status: 400 });
+  }
+
+  const result = await listAgents({}, { projectRoot });
+
+  if (!result.ok) {
+    return NextResponse.json({ ok: false, error: result.error?.message }, { status: 500 });
+  }
+
+  return NextResponse.json({ ok: true, data: result.data });
+}
diff --git a/src/app/api/beads/[id]/comments/route.ts b/src/app/api/beads/[id]/comments/route.ts
new file mode 100644
index 0000000..37e0ae4
--- /dev/null
+++ b/src/app/api/beads/[id]/comments/route.ts
@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { readInteractionsViaBd } from '../../../../../lib/read-interactions';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+): Promise<NextResponse> {
+  const { id } = await params;
+  const projectRoot = request.nextUrl.searchParams.get('projectRoot');
+
+  if (!projectRoot) {
+    return NextResponse.json(
+      { ok: false, error: { message: 'projectRoot is required' } },
+      { status: 400 }
+    );
+  }
+
+  try {
+    const comments = await readInteractionsViaBd(projectRoot, id);
+    return NextResponse.json({ ok: true, comments });
+  } catch (error) {
+    console.error('[API] Failed to fetch comments:', error);
+    return NextResponse.json(
+      { ok: false, error: { message: 'Failed to fetch comments' } },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/api/mission/[id]/topology/route.ts b/src/app/api/mission/[id]/topology/route.ts
new file mode 100644
index 0000000..b3224df
--- /dev/null
+++ b/src/app/api/mission/[id]/topology/route.ts
@@ -0,0 +1,31 @@
+import { NextResponse } from 'next/server';
+import { runBdCommand } from '../../../../../lib/bridge';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const { searchParams } = new URL(request.url);
+  const projectRoot = searchParams.get('projectRoot');
+
+  if (!projectRoot) {
+    return NextResponse.json({ ok: false, error: 'projectRoot is required' }, { status: 400 });
+  }
+
+  try {
+    const result = await runBdCommand({
+      projectRoot,
+      args: ['swarm', 'status', id, '--json'],
+    });
+
+    if (!result.success) {
+      return NextResponse.json({ ok: false, error: result.error }, { status: 500 });
+    }
+
+    const topology = JSON.parse(result.stdout);
+    return NextResponse.json({ ok: true, data: topology });
+  } catch (e) {
+    console.error(`Failed to fetch topology for ${id}:`, e);
+    return NextResponse.json({ ok: false, error: 'Internal server error' }, { status: 500 });
+  }
+}
diff --git a/src/app/api/mission/assign/route.ts b/src/app/api/mission/assign/route.ts
new file mode 100644
index 0000000..9aeae12
--- /dev/null
+++ b/src/app/api/mission/assign/route.ts
@@ -0,0 +1,40 @@
+import { NextResponse } from 'next/server';
+import { joinSwarm, leaveSwarm } from '../../../../lib/swarm-molecules';
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { projectRoot, agentId, missionId, action } = body;
+
+    if (!projectRoot || !agentId || !missionId || !action) {
+      return NextResponse.json(
+        { ok: false, error: 'Missing required fields' },
+        { status: 400 }
+      );
+    }
+
+    let result;
+    if (action === 'join') {
+      result = await joinSwarm({ agent: agentId, epicId: missionId }, { projectRoot });
+    } else if (action === 'leave') {
+      result = await leaveSwarm({ agent: agentId, projectRoot });
+    } else {
+      return NextResponse.json({ ok: false, error: 'Invalid action' }, { status: 400 });
+    }
+
+    if (!result.ok) {
+      return NextResponse.json(
+        { ok: false, error: result.error?.message },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json({ ok: true, data: result.data });
+
+  } catch (e) {
+    return NextResponse.json(
+      { ok: false, error: e instanceof Error ? e.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/api/mission/graph/route.ts b/src/app/api/mission/graph/route.ts
new file mode 100644
index 0000000..f326092
--- /dev/null
+++ b/src/app/api/mission/graph/route.ts
@@ -0,0 +1,46 @@
+import { NextResponse } from 'next/server';
+import { runBdCommand } from '../../../../lib/bridge';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const projectRoot = searchParams.get('projectRoot');
+  const id = searchParams.get('id');
+
+  if (!projectRoot || !id) {
+    return NextResponse.json({ ok: false, error: 'projectRoot and id are required' }, { status: 400 });
+  }
+
+  // 1. Get the mission/epic bead itself
+  const headResult = await runBdCommand({
+    projectRoot,
+    args: ['show', id, '--json'],
+  });
+
+  // 2. Get children
+  const childrenResult = await runBdCommand({
+    projectRoot,
+    args: ['list', '--parent', id, '--json'],
+  });
+
+  if (!headResult.success) {
+     return NextResponse.json({ ok: false, error: 'Failed to fetch mission head' }, { status: 500 });
+  }
+
+  try {
+    const head = JSON.parse(headResult.stdout);
+    let children = [];
+    if (childrenResult.success && childrenResult.stdout.trim()) {
+        children = JSON.parse(childrenResult.stdout);
+    }
+
+    const headObj = Array.isArray(head) ? head[0] : head;
+    
+    // Transform for graph view (if needed, or just return raw issues and let UI handle it)
+    // The WorkflowGraph component expects BeadIssue[]
+    const nodes = [headObj, ...children];
+
+    return NextResponse.json({ ok: true, data: { nodes } });
+  } catch (e) {
+    return NextResponse.json({ ok: false, error: 'Failed to parse graph data' }, { status: 500 });
+  }
+}
diff --git a/src/app/api/mission/list/route.ts b/src/app/api/mission/list/route.ts
new file mode 100644
index 0000000..e2c0ace
--- /dev/null
+++ b/src/app/api/mission/list/route.ts
@@ -0,0 +1,88 @@
+import { NextResponse } from 'next/server';
+import { runBdCommand } from '../../../../lib/bridge';
+import { listAgents, type AgentRecord } from '../../../../lib/agent-registry';
+
+export const dynamic = 'force-dynamic';
+
+interface SwarmTopology {
+  completed: { id: string; title: string }[];
+  active: { id: string; title: string; assignee?: string }[];
+  ready: { id: string; title: string }[];
+  blocked: { id: string; title: string; blocked_by: string[] }[];
+}
+
+interface Mission {
+  id: string;
+  title: string;
+  description?: string;
+  status: 'planning' | 'active' | 'blocked' | 'completed';
+  stats: {
+    total: number;
+    done: number;
+    blocked: number;
+    active: number;
+  };
+  topology?: SwarmTopology;
+  agents: AgentRecord[];
+}
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const projectRoot = searchParams.get('projectRoot');
+
+  if (!projectRoot) {
+    return NextResponse.json({ ok: false, error: 'projectRoot is required' }, { status: 400 });
+  }
+
+  // 1. Fetch Swarms (Molecules)
+  const swarmResult = await runBdCommand({
+    projectRoot,
+    args: ['swarm', 'list', '--json'],
+  });
+
+  if (!swarmResult.success) {
+    console.warn('Swarm list failed, returning empty:', swarmResult.error);
+    return NextResponse.json({ ok: true, data: { missions: [] } });
+  }
+
+  // 2. Fetch All Agents
+  const agentResult = await listAgents({}, { projectRoot });
+  const allAgents = agentResult.ok ? agentResult.data! : [];
+
+  try {
+    const rawData = JSON.parse(swarmResult.stdout);
+    const rawSwarms = rawData.swarms || [];
+
+    // 3. Transform & Merge
+    const missions: Mission[] = rawSwarms
+      .filter((s: any) => !s.title.startsWith('Agent:'))
+      .map((s: any) => {
+        const assignedAgents = allAgents.filter(a => a.swarm_id === s.epic_id || a.swarm_id === s.id);
+        
+        // Map status
+        let status: Mission['status'] = 'planning';
+        if (s.status === 'closed') status = 'completed';
+        else if (assignedAgents.length > 0) status = 'active';
+        else status = 'planning';
+
+        return {
+          id: s.id,
+          title: s.title,
+          description: s.description || s.epic_description || '',
+          status, 
+          stats: {
+            total: s.total_issues || 0,
+            done: s.completed_issues || 0,
+            active: s.active_issues || 0,
+            blocked: 0 
+          },
+          agents: assignedAgents
+        };
+      });
+
+    return NextResponse.json({ ok: true, data: { missions } });
+  } catch (e) {
+    console.error('Mission list parsing error:', e);
+    return NextResponse.json({ ok: false, error: 'Failed to parse mission data' }, { status: 500 });
+  }
+}
\ No newline at end of file
diff --git a/src/app/api/swarm/close/route.ts b/src/app/api/swarm/close/route.ts
new file mode 100644
index 0000000..792cdd5
--- /dev/null
+++ b/src/app/api/swarm/close/route.ts
@@ -0,0 +1,70 @@
+import { NextResponse } from 'next/server';
+
+import { runBdCommand } from '../../../../lib/bridge';
+
+interface CloseSwarmPayload {
+  projectRoot: string;
+  swarmId: string;
+  reason?: string;
+}
+
+export async function POST(request: Request): Promise<Response> {
+  let body: unknown;
+
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json(
+      { ok: false, error: { classification: 'bad_args', message: 'Invalid JSON body' } },
+      { status: 400 },
+    );
+  }
+
+  if (!body || typeof body !== 'object') {
+    return NextResponse.json(
+      { ok: false, error: { classification: 'bad_args', message: 'Payload must be a JSON object' } },
+      { status: 400 },
+    );
+  }
+
+  const data = body as Record<string, unknown>;
+
+  if (typeof data.projectRoot !== 'string' || !data.projectRoot.trim()) {
+    return NextResponse.json(
+      { ok: false, error: { classification: 'bad_args', message: 'projectRoot is required' } },
+      { status: 400 },
+    );
+  }
+
+  if (typeof data.swarmId !== 'string' || !data.swarmId.trim()) {
+    return NextResponse.json(
+      { ok: false, error: { classification: 'bad_args', message: 'swarmId is required' } },
+      { status: 400 },
+    );
+  }
+
+  const payload: CloseSwarmPayload = {
+    projectRoot: data.projectRoot.trim(),
+    swarmId: data.swarmId.trim(),
+    reason: typeof data.reason === 'string' ? data.reason.trim() : undefined,
+  };
+
+  const args = ['close', payload.swarmId, '--json'];
+  if (payload.reason) {
+    args.push('--reason', payload.reason);
+  }
+
+  const result = await runBdCommand({
+    projectRoot: payload.projectRoot,
+    args,
+  });
+
+  if (!result.success) {
+    return NextResponse.json(
+      { ok: false, error: { classification: result.classification ?? 'unknown', message: result.error ?? result.stderr } },
+      { status: 400 },
+    );
+  }
+
+  return NextResponse.json({ ok: true, swarmId: payload.swarmId });
+}
diff --git a/src/app/api/swarm/create/route.ts b/src/app/api/swarm/create/route.ts
new file mode 100644
index 0000000..69d41b2
--- /dev/null
+++ b/src/app/api/swarm/create/route.ts
@@ -0,0 +1,78 @@
+import { NextResponse } from 'next/server';
+
+import { runBdCommand } from '../../../../lib/bridge';
+
+interface CreateSwarmPayload {
+  projectRoot: string;
+  epicId: string;
+  coordinator?: string;
+}
+
+export async function POST(request: Request): Promise<Response> {
+  let body: unknown;
+
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json(
+      { ok: false, error: { classification: 'bad_args', message: 'Invalid JSON body' } },
+      { status: 400 },
+    );
+  }
+
+  if (!body || typeof body !== 'object') {
+    return NextResponse.json(
+      { ok: false, error: { classification: 'bad_args', message: 'Payload must be a JSON object' } },
+      { status: 400 },
+    );
+  }
+
+  const data = body as Record<string, unknown>;
+
+  if (typeof data.projectRoot !== 'string' || !data.projectRoot.trim()) {
+    return NextResponse.json(
+      { ok: false, error: { classification: 'bad_args', message: 'projectRoot is required' } },
+      { status: 400 },
+    );
+  }
+
+  if (typeof data.epicId !== 'string' || !data.epicId.trim()) {
+    return NextResponse.json(
+      { ok: false, error: { classification: 'bad_args', message: 'epicId is required' } },
+      { status: 400 },
+    );
+  }
+
+  const payload: CreateSwarmPayload = {
+    projectRoot: data.projectRoot.trim(),
+    epicId: data.epicId.trim(),
+    coordinator: typeof data.coordinator === 'string' ? data.coordinator.trim() : undefined,
+  };
+
+  const args = ['swarm', 'create', payload.epicId, '--json'];
+  if (payload.coordinator) {
+    args.push('--coordinator', payload.coordinator);
+  }
+
+  const result = await runBdCommand({
+    projectRoot: payload.projectRoot,
+    args,
+  });
+
+  if (!result.success) {
+    return NextResponse.json(
+      { ok: false, error: { classification: result.classification ?? 'unknown', message: result.error ?? result.stderr } },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const swarm = JSON.parse(result.stdout);
+    return NextResponse.json({ ok: true, swarm });
+  } catch {
+    return NextResponse.json(
+      { ok: false, error: { classification: 'unknown', message: 'Failed to parse swarm create output' } },
+      { status: 500 },
+    );
+  }
+}
diff --git a/src/app/api/swarm/formulas/route.ts b/src/app/api/swarm/formulas/route.ts
new file mode 100644
index 0000000..3c6420e
--- /dev/null
+++ b/src/app/api/swarm/formulas/route.ts
@@ -0,0 +1,29 @@
+import { NextResponse } from 'next/server';
+import { runBdCommand } from '../../../../lib/bridge';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const projectRoot = searchParams.get('projectRoot');
+
+  if (!projectRoot) {
+    return NextResponse.json({ ok: false, error: 'projectRoot is required' }, { status: 400 });
+  }
+
+  // bd formula list --json
+  const result = await runBdCommand({
+    projectRoot,
+    args: ['formula', 'list', '--json', '--allow-stale'],
+  });
+
+  if (!result.success) {
+    return NextResponse.json({ ok: false, error: result.error }, { status: 500 });
+  }
+
+  try {
+    // If output is empty or not JSON array, handle gracefully
+    const json = JSON.parse(result.stdout || '[]');
+    return NextResponse.json({ ok: true, data: json });
+  } catch (e) {
+    return NextResponse.json({ ok: false, error: 'Failed to parse formulas' }, { status: 500 });
+  }
+}
diff --git a/src/app/api/swarm/graph/route.ts b/src/app/api/swarm/graph/route.ts
new file mode 100644
index 0000000..81d5376
--- /dev/null
+++ b/src/app/api/swarm/graph/route.ts
@@ -0,0 +1,45 @@
+import { NextResponse } from 'next/server';
+import { runBdCommand } from '../../../../lib/bridge';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const projectRoot = searchParams.get('projectRoot');
+  const epicId = searchParams.get('epic');
+
+  if (!projectRoot || !epicId) {
+    return NextResponse.json({ ok: false, error: 'projectRoot and epic are required' }, { status: 400 });
+  }
+
+  // 1. Get the epic itself
+  const epicResult = await runBdCommand({
+    projectRoot,
+    args: ['show', epicId, '--json'],
+  });
+
+  // 2. Get children
+  const childrenResult = await runBdCommand({
+    projectRoot,
+    args: ['list', '--parent', epicId, '--json'],
+  });
+
+  if (!epicResult.success) {
+     return NextResponse.json({ ok: false, error: 'Failed to fetch epic' }, { status: 500 });
+  }
+
+  try {
+    const epic = JSON.parse(epicResult.stdout);
+    // Handle list returning empty or error gracefully
+    let children = [];
+    if (childrenResult.success && childrenResult.stdout.trim()) {
+        children = JSON.parse(childrenResult.stdout);
+        // bd list returns array, bd show returns object (or array of 1)
+    }
+
+    const epicObj = Array.isArray(epic) ? epic[0] : epic;
+    const issues = [epicObj, ...children];
+
+    return NextResponse.json({ ok: true, data: issues });
+  } catch (e) {
+    return NextResponse.json({ ok: false, error: 'Failed to parse graph data' }, { status: 500 });
+  }
+}
diff --git a/src/app/api/swarm/join/route.ts b/src/app/api/swarm/join/route.ts
new file mode 100644
index 0000000..e12f24b
--- /dev/null
+++ b/src/app/api/swarm/join/route.ts
@@ -0,0 +1,36 @@
+import { NextResponse } from 'next/server';
+import { joinSwarm } from '../../../../lib/swarm-molecules';
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { projectRoot, agentId, swarmId } = body;
+
+    if (!projectRoot || !agentId || !swarmId) {
+      return NextResponse.json(
+        { ok: false, error: 'Missing required fields' },
+        { status: 400 }
+      );
+    }
+
+    const result = await joinSwarm(
+      { agent: agentId, epicId: swarmId },
+      { projectRoot }
+    );
+
+    if (!result.ok) {
+      return NextResponse.json(
+        { ok: false, error: result.error?.message },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json({ ok: true, data: result.data });
+
+  } catch (e) {
+    return NextResponse.json(
+      { ok: false, error: e instanceof Error ? e.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/api/swarm/launch/route.ts b/src/app/api/swarm/launch/route.ts
new file mode 100644
index 0000000..70d0ad5
--- /dev/null
+++ b/src/app/api/swarm/launch/route.ts
@@ -0,0 +1,42 @@
+import { NextResponse } from 'next/server';
+import { runBdCommand } from '../../../../lib/bridge';
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { projectRoot, title, proto } = body;
+
+    if (!projectRoot || !title || !proto) {
+      return NextResponse.json(
+        { ok: false, error: 'Missing required fields: projectRoot, title, proto' },
+        { status: 400 }
+      );
+    }
+
+    // bd mol pour "Title" --proto <proto> --json
+    const args = ['mol', 'pour', title, '--proto', proto, '--json'];
+    
+    // Safety: Ensure proto doesn't contain shell injection
+    if (!/^[a-zA-Z0-9_\-.]+$/.test(proto)) {
+        return NextResponse.json({ ok: false, error: 'Invalid proto name' }, { status: 400 });
+    }
+
+    const result = await runBdCommand({
+      projectRoot,
+      args,
+    });
+
+    if (!result.success) {
+      return NextResponse.json({ ok: false, error: result.error || result.stderr }, { status: 500 });
+    }
+
+    const data = JSON.parse(result.stdout);
+    return NextResponse.json({ ok: true, data });
+
+  } catch (e) {
+    return NextResponse.json(
+      { ok: false, error: e instanceof Error ? e.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/api/swarm/leave/route.ts b/src/app/api/swarm/leave/route.ts
new file mode 100644
index 0000000..86b81a9
--- /dev/null
+++ b/src/app/api/swarm/leave/route.ts
@@ -0,0 +1,36 @@
+import { NextResponse } from 'next/server';
+import { leaveSwarm } from '../../../../lib/swarm-molecules';
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { projectRoot, agentId } = body;
+
+    if (!projectRoot || !agentId) {
+      return NextResponse.json(
+        { ok: false, error: 'Missing required fields' },
+        { status: 400 }
+      );
+    }
+
+    const result = await leaveSwarm(
+      { agent: agentId },
+      { projectRoot }
+    );
+
+    if (!result.ok) {
+      return NextResponse.json(
+        { ok: false, error: result.error?.message },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json({ ok: true, data: result.data });
+
+  } catch (e) {
+    return NextResponse.json(
+      { ok: false, error: e instanceof Error ? e.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/api/swarm/list/route.ts b/src/app/api/swarm/list/route.ts
new file mode 100644
index 0000000..443c4b0
--- /dev/null
+++ b/src/app/api/swarm/list/route.ts
@@ -0,0 +1,44 @@
+import { NextResponse } from 'next/server';
+
+import { runBdCommand } from '../../../../lib/bridge';
+
+export async function GET(request: Request): Promise<Response> {
+  const { searchParams } = new URL(request.url);
+  const projectRoot = searchParams.get('projectRoot');
+
+  if (!projectRoot) {
+    return NextResponse.json(
+      { ok: false, error: { classification: 'bad_args', message: 'projectRoot is required' } },
+      { status: 400 },
+    );
+  }
+
+  const result = await runBdCommand({
+    projectRoot,
+    args: ['swarm', 'list', '--json'],
+  });
+
+  if (!result.success) {
+    return NextResponse.json(
+      { ok: false, error: { classification: result.classification ?? 'unknown', message: result.error ?? result.stderr } },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const rawData = JSON.parse(result.stdout);
+    // Filter out items that look like agents (start with "Agent:" or have gt:agent style IDs if discernible)
+    // Real swarms/molecules usually don't start with "Agent:".
+    const swarms = (rawData.swarms || []).filter((s: any) => 
+      !s.title.startsWith('Agent: ') && 
+      !s.title.startsWith('Agent:')
+    );
+    
+    return NextResponse.json({ ok: true, data: { swarms } });
+  } catch {
+    return NextResponse.json(
+      { ok: false, error: { classification: 'unknown', message: 'Failed to parse swarm list output' } },
+      { status: 500 },
+    );
+  }
+}
diff --git a/src/app/api/swarm/prep/route.ts b/src/app/api/swarm/prep/route.ts
new file mode 100644
index 0000000..2249cf4
--- /dev/null
+++ b/src/app/api/swarm/prep/route.ts
@@ -0,0 +1,29 @@
+import { NextResponse } from 'next/server';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+
+const execAsync = promisify(exec);
+
+export async function POST(request: Request) {
+    try {
+        const { beadId, archetypeId } = await request.json();
+
+        if (!beadId || !archetypeId) {
+            return NextResponse.json({ error: 'Missing beadId or archetypeId' }, { status: 400 });
+        }
+
+        // Use bd CLI to add the archetype label. We leave it 'open' because Prep just assigns the agent.
+        const cmd = `bd label add ${beadId} "agent:${archetypeId}"`;
+        const { stdout, stderr } = await execAsync(cmd);
+
+        if (stderr && !stderr.includes('Warning')) {
+            console.error('bd edit stderr:', stderr);
+        }
+
+        return NextResponse.json({ success: true, message: `Prepped ${beadId} for ${archetypeId}`, output: stdout });
+
+    } catch (error: any) {
+        console.error('Prep task failed:', error);
+        return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+}
diff --git a/src/app/api/swarm/status/route.ts b/src/app/api/swarm/status/route.ts
new file mode 100644
index 0000000..498a3f6
--- /dev/null
+++ b/src/app/api/swarm/status/route.ts
@@ -0,0 +1,45 @@
+import { NextResponse } from 'next/server';
+
+import { runBdCommand } from '../../../../lib/bridge';
+
+export async function GET(request: Request): Promise<Response> {
+  const { searchParams } = new URL(request.url);
+  const projectRoot = searchParams.get('projectRoot');
+  const epicId = searchParams.get('epic');
+
+  if (!projectRoot) {
+    return NextResponse.json(
+      { ok: false, error: { classification: 'bad_args', message: 'projectRoot is required' } },
+      { status: 400 },
+    );
+  }
+
+  if (!epicId) {
+    return NextResponse.json(
+      { ok: false, error: { classification: 'bad_args', message: 'epic is required' } },
+      { status: 400 },
+    );
+  }
+
+  const result = await runBdCommand({
+    projectRoot,
+    args: ['swarm', 'status', epicId, '--json'],
+  });
+
+  if (!result.success) {
+    return NextResponse.json(
+      { ok: false, error: { classification: result.classification ?? 'unknown', message: result.error ?? result.stderr } },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const data = JSON.parse(result.stdout);
+    return NextResponse.json({ ok: true, data });
+  } catch {
+    return NextResponse.json(
+      { ok: false, error: { classification: 'unknown', message: 'Failed to parse swarm status output' } },
+      { status: 500 },
+    );
+  }
+}
diff --git a/src/app/api/swarm/templates/route.ts b/src/app/api/swarm/templates/route.ts
new file mode 100644
index 0000000..8d6fa0b
--- /dev/null
+++ b/src/app/api/swarm/templates/route.ts
@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server';
+import { getTemplates } from '../../../../lib/server/beads-fs';
+
+export async function GET() {
+    const data = await getTemplates();
+    return NextResponse.json(data);
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index e857177..0259642 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,45 +3,64 @@
 @tailwind utilities;
 
 :root {
-  /* ========== EARTHY-DARK DESIGN SYSTEM TOKENS (PRD v2.0) ========== */
-  
-  /* Backgrounds */
-  --color-bg-base: #2D2D2D;
-  --color-bg-card: #363636;
-  --color-bg-input: #404040;
+  /* ========== VISUAL-TRUTH UI TOKEN CONTRACT (bb-vt.1.1) ========== */
+  --ui-bg-app: #070d16;
+  --ui-bg-shell: #0c1420;
+  --ui-bg-panel: #111c2a;
+  --ui-bg-card: #1a2431;
 
-  /* Accents */
-  --color-accent-green: #7CB97A;
-  --color-accent-amber: #D4A574;
-  --color-accent-teal: #5BA8A0;
+  --ui-border-soft: rgba(153, 171, 190, 0.2);
+  --ui-border-strong: rgba(153, 171, 190, 0.34);
 
-  /* Text */
-  --color-text-primary: #FFFFFF;
-  --color-text-secondary: #B8B8B8;
-  --color-text-muted: #888888;
-  --color-text-on-primary: #1A1A1A;
+  --ui-text-primary: #e8edf5;
+  --ui-text-muted: #8f9caf;
 
-  /* Borders */
-  --color-border-default: #4A4A4A;
-  --color-border-subtle: #3A3A3A;
+  --ui-accent-ready: #35d98f;
+  --ui-accent-blocked: #ff4c72;
+  --ui-accent-warning: #ffb24a;
+  --ui-accent-info: #35c9ff;
+  --ui-accent-action-green: #35d98f;
+  --ui-accent-action-red: #ff4c72;
+
+  --ui-font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
+  --ui-font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
+  --ui-tracking-tight: -0.011em;
+  --ui-numeric-tabular: tabular-nums;
+
+  /* ========== LEGACY-COMPATIBLE MAPPINGS ========== */
+  --color-bg-base: var(--ui-bg-app);
+  --color-bg-card: var(--ui-bg-shell);
+  --color-bg-input: var(--ui-bg-panel);
+
+  --color-accent-green: var(--ui-accent-ready);
+  --color-accent-amber: var(--ui-accent-warning);
+  --color-accent-teal: var(--ui-accent-info);
+
+  --color-text-primary: var(--ui-text-primary);
+  --color-text-secondary: #c4cfdb;
+  --color-text-muted: var(--ui-text-muted);
+  --color-text-on-primary: #10161d;
+
+  --color-border-default: var(--ui-border-strong);
+  --color-border-subtle: var(--ui-border-soft);
 
   /* Status colors */
-  --status-open: #5BA8A0;
-  --status-ready: #5BA8A0;
-  --status-in-progress: #7CB97A;
-  --status-progress: #7CB97A;
-  --status-blocked: #D4A574;
-  --status-blocked-earthy: #D4A574;
-  --status-closed: #888888;
-  --status-closed-earthy: #888888;
-  --status-deferred: #888888;
+  --status-open: var(--ui-accent-info);
+  --status-ready: var(--ui-accent-ready);
+  --status-in-progress: var(--ui-accent-warning);
+  --status-progress: var(--ui-accent-warning);
+  --status-blocked: var(--ui-accent-blocked);
+  --status-blocked-earthy: var(--ui-accent-blocked);
+  --status-closed: #7f8b98;
+  --status-closed-earthy: #7f8b98;
+  --status-deferred: #7f8b98;
 
   /* Liveness colors */
-  --liveness-active: #7CB97A;
-  --liveness-stale: #D4A574;
-  --liveness-stuck: #C97A7A;
-  --liveness-dead: #C97A7A;
-  --liveness-idle: #888888;
+  --liveness-active: var(--ui-accent-ready);
+  --liveness-stale: var(--ui-accent-warning);
+  --liveness-stuck: var(--ui-accent-action-red);
+  --liveness-dead: var(--ui-accent-action-red);
+  --liveness-idle: #7f8b98;
 
   /* Agent Role Colors */
   --agent-role-ui: #6B9BD2;
@@ -77,8 +96,8 @@
   --shadow-soft-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
 
   /* ========== TYPOGRAPHY ========== */
-  --font-ui-stack: 'Segoe UI', system-ui, -apple-system, sans-serif;
-  --font-mono-stack: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+  --font-ui-stack: var(--ui-font-sans);
+  --font-mono-stack: var(--ui-font-mono);
   
   --font-size-h1: 2rem;
   --font-size-h2: 1.5rem;
@@ -110,7 +129,17 @@
   /* ========== LAYOUT ========== */
   --sidebar-left-width: 13.75rem;
   --sidebar-right-width: 17.5rem;
-  --topbar-height: 3rem;
+  --topbar-height: 3.75rem;
+
+  --glass-base: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--ui-bg-card) 72%, black),
+    color-mix(in srgb, var(--ui-bg-panel) 78%, black)
+  );
+  --edge-top: color-mix(in srgb, var(--ui-border-strong) 80%, white 20%);
+  --edge-bottom: color-mix(in srgb, var(--ui-border-soft) 75%, black 25%);
+  --elevation-ambient: 0 20px 40px -16px rgba(0, 0, 0, 0.78);
+  --elevation-tight: 0 10px 24px -12px rgba(0, 0, 0, 0.7);
 
   /* ========== LEGACY COMPATIBILITY TOKENS ========== */
   /* For existing components that reference these */
@@ -134,11 +163,10 @@ body {
 }
 
 body {
-  /* Earthy-dark base from PRD (replaces Aero Chrome) */
-  background-color: var(--color-bg-base);
-  color: var(--color-text-secondary);
-  font-family: var(--font-ui-stack);
-  letter-spacing: -0.011em;
+  background-color: var(--ui-bg-app);
+  color: var(--ui-text-primary);
+  font-family: var(--ui-font-sans);
+  letter-spacing: var(--ui-tracking-tight);
   position: relative;
   isolation: isolate;
 }
@@ -266,24 +294,52 @@ body {
 
 .ui-select option,
 .ui-option {
-  background-color: #10141d;
-  color: #e2e8f0;
+  background-color: var(--ui-bg-panel);
+  color: var(--ui-text-primary);
 }
 
 .ui-text {
-  font-family: var(--font-ui-stack);
+  font-family: var(--ui-font-sans);
   font-weight: 500;
-  letter-spacing: -0.01em;
+  letter-spacing: var(--ui-tracking-tight);
   line-height: 1.35;
 }
 
 .system-data {
-  font-family: var(--font-mono-stack);
-  font-variant-numeric: tabular-nums;
+  font-family: var(--ui-font-mono);
+  font-variant-numeric: var(--ui-numeric-tabular);
   font-weight: 450;
   letter-spacing: 0.015em;
 }
 
+.ui-shell-app {
+  background: var(--ui-bg-app);
+  color: var(--ui-text-primary);
+  font-family: var(--ui-font-sans);
+  letter-spacing: var(--ui-tracking-tight);
+}
+
+.ui-shell-topbar {
+  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-bg-panel) 92%, black), var(--ui-bg-shell));
+  border-bottom: 1px solid color-mix(in srgb, var(--ui-accent-info) 22%, var(--ui-border-soft));
+  box-shadow: 0 10px 24px -20px rgba(0, 0, 0, 0.9);
+}
+
+.ui-shell-middle {
+  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-bg-app) 74%, black), color-mix(in srgb, var(--ui-bg-app) 90%, black));
+  border-left: 1px solid color-mix(in srgb, var(--ui-accent-info) 20%, var(--ui-border-soft));
+  border-right: 1px solid color-mix(in srgb, var(--ui-accent-info) 20%, var(--ui-border-soft));
+}
+
+.ui-shell-panel {
+  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-bg-shell) 86%, black), color-mix(in srgb, var(--ui-bg-panel) 84%, black));
+  border-left: 1px solid color-mix(in srgb, var(--ui-accent-info) 30%, var(--ui-border-soft));
+}
+
+.ui-tabular-nums {
+  font-variant-numeric: var(--ui-numeric-tabular);
+}
+
 
 .workflow-graph-legend {
   backdrop-filter: blur(12px);
diff --git a/src/app/sessions/page.tsx b/src/app/sessions/page.tsx
index 7069506..83a3837 100644
--- a/src/app/sessions/page.tsx
+++ b/src/app/sessions/page.tsx
@@ -1,78 +1,5 @@
-import { SessionsPage } from '../../components/sessions/sessions-page';
-import type { SwarmGroup } from '../../components/sessions/sessions-header';
-import { readIssuesForScope } from '../../lib/aggregate-read';
-import { resolveProjectScope } from '../../lib/project-scope';
-import { listProjects } from '../../lib/registry';
-import { listAgents } from '../../lib/agent-registry';
-import { getSwarmMembers } from '../../lib/swarm-molecules';
+import { redirect } from 'next/navigation';
 
-export const dynamic = 'force-dynamic';
-
-interface PageProps {
-  searchParams?: Promise<Record<string, string | string[] | undefined>>;
-}
-
-export default async function Page({ searchParams }: PageProps) {
-  const params = (await searchParams) ?? {};
-  const requestedProjectKey = typeof params.project === 'string' ? params.project : null;
-  const requestedMode = typeof params.mode === 'string' ? params.mode : null;
-  const registryProjects = await listProjects();
-  const agentsResult = await listAgents({});
-  const agents = agentsResult.data ?? [];
-
-  const scope = resolveProjectScope({
-    currentProjectRoot: process.cwd(),
-    registryProjects,
-    requestedProjectKey,
-    requestedMode,
-  });
-
-  const issues = await readIssuesForScope({
-    mode: scope.mode,
-    selected: scope.selected,
-    scopeOptions: scope.options,
-    preferBd: true,
-  });
-
-  const epics = issues.filter(i => i.issue_type === 'epic');
-  const epicsWithSwarm = epics.filter(
-    i => (i.labels || []).some(l => l.startsWith('swarm:'))
-  );
-
-  const swarmGroups: SwarmGroup[] = [];
-  const assignedAgentIds = new Set<string>();
-
-  for (const epic of epicsWithSwarm) {
-    const swarmLabel = epic.labels?.find(l => l.startsWith('swarm:'));
-    if (!swarmLabel) continue;
-    
-    const swarmId = swarmLabel.replace('swarm:', '');
-    const memberIds = await getSwarmMembers({ swarmId }, { projectRoot: scope.selected.root });
-
-    const members = agents.filter(a => memberIds.includes(a.agent_id));
-    members.forEach(a => assignedAgentIds.add(a.agent_id));
-
-    if (members.length > 0) {
-      swarmGroups.push({
-        swarmId,
-        swarmLabel: epic.id,
-        members,
-      });
-    }
-  }
-
-  const unassignedAgents = agents.filter(a => !assignedAgentIds.has(a.agent_id));
-
-  return (
-    <SessionsPage
-      issues={issues}
-      agents={agents}
-      projectRoot={scope.selected.root}
-      projectScopeKey={scope.selected.key}
-      projectScopeOptions={scope.options}
-      projectScopeMode={scope.mode}
-      swarmGroups={swarmGroups}
-      unassignedAgents={unassignedAgents}
-    />
-  );
+export default function SessionsRedirectPage() {
+  redirect('/?view=social');
 }
diff --git a/src/components/activity/activity-panel.tsx b/src/components/activity/activity-panel.tsx
index 5828d9c..1be4ba7 100644
--- a/src/components/activity/activity-panel.tsx
+++ b/src/components/activity/activity-panel.tsx
@@ -110,25 +110,25 @@ function formatRelativeTime(timestamp: string): string {
 function getAgentTone(status: AgentStatus): AgentTone {
   const tones: Record<AgentStatus, AgentTone> = {
     active: {
-      cardClass: 'bg-[radial-gradient(circle_at_86%_18%,rgba(124,185,122,0.28),transparent_58%),rgba(45,64,47,0.74)]',
+      cardClass: 'bg-[#173126]',
       labelClass: 'text-[#7CB97A]',
       ringClass: 'ring-[#7CB97A]/45',
       glowClass: 'bg-[#7CB97A]/30',
     },
     stale: {
-      cardClass: 'bg-[radial-gradient(circle_at_86%_18%,rgba(212,165,116,0.28),transparent_58%),rgba(73,61,46,0.74)]',
+      cardClass: 'bg-[#322817]',
       labelClass: 'text-[#D4A574]',
       ringClass: 'ring-[#D4A574]/45',
       glowClass: 'bg-[#D4A574]/30',
     },
     stuck: {
-      cardClass: 'bg-[radial-gradient(circle_at_86%_18%,rgba(201,122,122,0.28),transparent_58%),rgba(74,52,54,0.76)]',
+      cardClass: 'bg-[#341a1f]',
       labelClass: 'text-[#C97A7A]',
       ringClass: 'ring-[#C97A7A]/45',
       glowClass: 'bg-[#C97A7A]/30',
     },
     dead: {
-      cardClass: 'bg-[radial-gradient(circle_at_86%_18%,rgba(136,104,112,0.26),transparent_58%),rgba(60,55,60,0.74)]',
+      cardClass: 'bg-[#2b232b]',
       labelClass: 'text-[#A78A94]',
       ringClass: 'ring-[#A78A94]/40',
       glowClass: 'bg-[#A78A94]/25',
@@ -146,84 +146,84 @@ function getEventTone(kind: string): EventTone {
       label: 'Created',
       labelClass: 'text-[#7CB97A]',
       dotClass: 'bg-[#7CB97A]',
-      cardClass: 'bg-[radial-gradient(circle_at_88%_18%,rgba(124,185,122,0.26),transparent_55%),rgba(42,62,44,0.68)]',
+      cardClass: 'bg-[#182f25]',
       idClass: 'text-[#9ACB98]',
     },
     opened: {
       label: 'Opened',
       labelClass: 'text-[#7CB97A]',
       dotClass: 'bg-[#7CB97A]',
-      cardClass: 'bg-[radial-gradient(circle_at_88%_18%,rgba(124,185,122,0.26),transparent_55%),rgba(42,62,44,0.68)]',
+      cardClass: 'bg-[#182f25]',
       idClass: 'text-[#9ACB98]',
     },
     closed: {
       label: 'Closed',
       labelClass: 'text-[#D4A574]',
       dotClass: 'bg-[#D4A574]',
-      cardClass: 'bg-[radial-gradient(circle_at_88%_18%,rgba(212,165,116,0.28),transparent_55%),rgba(66,56,44,0.7)]',
+      cardClass: 'bg-[#332716]',
       idClass: 'text-[#DAB891]',
     },
     reopened: {
       label: 'Reopened',
       labelClass: 'text-[#5B95E8]',
       dotClass: 'bg-[#5B95E8]',
-      cardClass: 'bg-[radial-gradient(circle_at_88%_18%,rgba(91,149,232,0.3),transparent_55%),rgba(42,51,66,0.7)]',
+      cardClass: 'bg-[#1b2b43]',
       idClass: 'text-[#8DB4EF]',
     },
     status_changed: {
       label: 'Status changed',
       labelClass: 'text-[#D4A574]',
       dotClass: 'bg-[#D4A574]',
-      cardClass: 'bg-[radial-gradient(circle_at_88%_18%,rgba(212,165,116,0.24),transparent_55%),rgba(63,54,44,0.68)]',
+      cardClass: 'bg-[#2f2518]',
       idClass: 'text-[#DAB891]',
     },
     priority_changed: {
       label: 'Priority changed',
       labelClass: 'text-[#D4A574]',
       dotClass: 'bg-[#D4A574]',
-      cardClass: 'bg-[radial-gradient(circle_at_88%_18%,rgba(212,165,116,0.24),transparent_55%),rgba(63,54,44,0.68)]',
+      cardClass: 'bg-[#2f2518]',
       idClass: 'text-[#DAB891]',
     },
     assignee_changed: {
       label: 'Assigned',
       labelClass: 'text-[#D4A574]',
       dotClass: 'bg-[#D4A574]',
-      cardClass: 'bg-[radial-gradient(circle_at_88%_18%,rgba(212,165,116,0.24),transparent_55%),rgba(63,54,44,0.68)]',
+      cardClass: 'bg-[#2f2518]',
       idClass: 'text-[#DAB891]',
     },
     dependency_added: {
       label: 'Dependency added',
       labelClass: 'text-[#D4A574]',
       dotClass: 'bg-[#D4A574]',
-      cardClass: 'bg-[radial-gradient(circle_at_88%_18%,rgba(212,165,116,0.24),transparent_55%),rgba(63,54,44,0.68)]',
+      cardClass: 'bg-[#2f2518]',
       idClass: 'text-[#DAB891]',
     },
     dependency_removed: {
       label: 'Dependency removed',
       labelClass: 'text-[#C97A7A]',
       dotClass: 'bg-[#C97A7A]',
-      cardClass: 'bg-[radial-gradient(circle_at_88%_18%,rgba(201,122,122,0.24),transparent_55%),rgba(65,47,50,0.7)]',
+      cardClass: 'bg-[#321b21]',
       idClass: 'text-[#D9A9A9]',
     },
     heartbeat: {
       label: 'Heartbeat',
       labelClass: 'text-[#5BA8A0]',
       dotClass: 'bg-[#5BA8A0]',
-      cardClass: 'bg-[radial-gradient(circle_at_88%_18%,rgba(91,168,160,0.26),transparent_55%),rgba(42,58,60,0.7)]',
+      cardClass: 'bg-[#173034]',
       idClass: 'text-[#8BC9C1]',
     },
     commented: {
       label: 'Commented',
       labelClass: 'text-[#5BA8A0]',
       dotClass: 'bg-[#5BA8A0]',
-      cardClass: 'bg-[radial-gradient(circle_at_88%_18%,rgba(91,168,160,0.26),transparent_55%),rgba(42,58,60,0.7)]',
+      cardClass: 'bg-[#173034]',
       idClass: 'text-[#8BC9C1]',
     },
     comment_added: {
       label: 'Commented',
       labelClass: 'text-[#5BA8A0]',
       dotClass: 'bg-[#5BA8A0]',
-      cardClass: 'bg-[radial-gradient(circle_at_88%_18%,rgba(91,168,160,0.26),transparent_55%),rgba(42,58,60,0.7)]',
+      cardClass: 'bg-[#173034]',
       idClass: 'text-[#8BC9C1]',
     },
   };
@@ -233,7 +233,7 @@ function getEventTone(kind: string): EventTone {
       label: normalized.replace(/_/g, ' '),
       labelClass: 'text-[#5BA8A0]',
       dotClass: 'bg-[#5BA8A0]',
-      cardClass: 'bg-[radial-gradient(circle_at_88%_18%,rgba(91,168,160,0.24),transparent_55%),rgba(42,58,60,0.68)]',
+      cardClass: 'bg-[#173034]',
       idClass: 'text-[#8BC9C1]',
     }
   );
@@ -335,9 +335,9 @@ export function ActivityPanel({ issues, collapsed = false }: ActivityPanelProps)
   }
 
   return (
-    <div className="flex flex-col h-full bg-[radial-gradient(circle_at_8%_5%,rgba(91,168,160,0.16),transparent_30%),radial-gradient(circle_at_94%_88%,rgba(212,165,116,0.14),transparent_34%),rgba(26,26,28,0.96)] backdrop-blur-xl">
+    <div className="flex flex-col h-full bg-[#070f19] backdrop-blur-xl">
       {/* AGENT ROSTER SECTION */}
-      <div className="flex-shrink-0 p-4 bg-black/10 shadow-[0_16px_24px_-24px_rgba(0,0,0,0.9)]">
+      <div className="flex-shrink-0 p-4 bg-[#0b1625] shadow-[0_16px_24px_-24px_rgba(0,0,0,0.9)]">
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-2">
             <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse shadow-[0_0_8px_#10b981]" />
@@ -354,7 +354,7 @@ export function ActivityPanel({ issues, collapsed = false }: ActivityPanelProps)
           <div className="grid grid-cols-1 gap-2">
             {agentRoster.map(agent => (
               <div key={agent.beadId} className={cn(
-                'group flex items-center gap-3 p-2 rounded-xl transition-all duration-300 shadow-[0_12px_22px_-14px_rgba(0,0,0,0.85)]',
+                'group flex items-center gap-3 p-2 rounded-xl transition-all duration-300 shadow-[0_14px_24px_-14px_rgba(0,0,0,0.92)]',
                 getAgentTone(agent.status).cardClass,
               )}>
                 <div className="relative">
@@ -412,7 +412,7 @@ export function ActivityPanel({ issues, collapsed = false }: ActivityPanelProps)
                 return (
                   <div key={activity.id} className="group relative">
                     <div className={cn(
-                      "p-3 rounded-xl transition-all duration-300 shadow-[0_12px_22px_-14px_rgba(0,0,0,0.88)]",
+                      "p-3 rounded-xl transition-all duration-300 shadow-[0_14px_24px_-14px_rgba(0,0,0,0.94)]",
                       eventTone.cardClass
                     )}>
                       <div className="flex items-center gap-2 mb-1.5">
diff --git a/src/components/graph/graph-view.tsx b/src/components/graph/graph-view.tsx
index 9d90bf6..0a727e5 100644
--- a/src/components/graph/graph-view.tsx
+++ b/src/components/graph/graph-view.tsx
@@ -22,13 +22,17 @@ export function GraphView({
   hideClosed = false,
 }: GraphViewProps) {
   return (
-    <div className="flex flex-col h-full">
-      <div className="flex items-center justify-between border-b border-white/5 px-4 py-2 bg-white/[0.02]">
-        <div className="flex items-center gap-1">
+    <div className="flex h-full flex-col bg-[var(--ui-bg-app)]">
+      <div className="flex items-center justify-between border-b border-[var(--ui-border-soft)] bg-[var(--ui-bg-shell)] px-4 py-2.5">
+        <div className="flex items-center gap-3">
+          <p className="font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--ui-text-muted)]">
+            Graph View
+          </p>
+          <div className="flex items-center gap-1">
           <button
             type="button"
             onClick={() => onGraphTabChange('flow')}
-            className={`rounded-lg px-3 py-1.5 text-xs font-bold uppercase tracking-wider transition-all ${
+            className={`rounded-lg px-3 py-1.5 text-xs font-bold uppercase tracking-wider transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-bg-shell)] ${
               graphTab === 'flow'
                 ? 'bg-sky-400/10 text-sky-200 shadow-[0_2px_8px_rgba(56,189,248,0.1)]'
                 : 'text-text-muted/60 hover:text-text-body hover:bg-white/[0.04]'
@@ -39,7 +43,7 @@ export function GraphView({
           <button
             type="button"
             onClick={() => onGraphTabChange('overview')}
-            className={`rounded-lg px-3 py-1.5 text-xs font-bold uppercase tracking-wider transition-all ${
+            className={`rounded-lg px-3 py-1.5 text-xs font-bold uppercase tracking-wider transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-bg-shell)] ${
               graphTab === 'overview'
                 ? 'bg-sky-400/10 text-sky-200 shadow-[0_2px_8px_rgba(56,189,248,0.1)]'
                 : 'text-text-muted/60 hover:text-text-body hover:bg-white/[0.04]'
@@ -48,11 +52,12 @@ export function GraphView({
             Overview
           </button>
         </div>
+        </div>
         <span className="text-[10px] text-text-muted/50">
           {beads.length} beads
         </span>
       </div>
-      <div className="flex-1 min-h-0">
+      <div className="min-h-0 flex-1">
         <WorkflowGraph
           beads={beads}
           selectedId={selectedId}
diff --git a/src/components/mission/mission-card.tsx b/src/components/mission/mission-card.tsx
new file mode 100644
index 0000000..d4c5f08
--- /dev/null
+++ b/src/components/mission/mission-card.tsx
@@ -0,0 +1,148 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { Users, AlertTriangle, Activity, CheckCircle2, Circle } from 'lucide-react';
+import { AgentAvatar } from '../shared/agent-avatar';
+import type { AgentRecord } from '../../lib/agent-registry';
+import { SwarmGraph } from './swarm-graph';
+import { useSwarmTopology } from '../../hooks/use-swarm-topology';
+
+export interface MissionCardProps {
+  id: string;
+  projectRoot: string;
+  title: string;
+  description?: string;
+  status: 'planning' | 'active' | 'blocked' | 'completed';
+  stats: {
+    total: number;
+    done: number;
+    blocked: number;
+  };
+  agents: AgentRecord[];
+  onDeploy: () => void;
+  onClick: () => void;
+}
+
+const STATUS_CONFIG = {
+  planning: { 
+    color: 'text-blue-400', 
+    border: 'border-blue-500/30', 
+    bg: 'bg-blue-500/5', 
+    label: 'PLANNING',
+    icon: Circle
+  },
+  active: { 
+    color: 'text-emerald-400', 
+    border: 'border-emerald-500/30', 
+    bg: 'bg-emerald-500/5', 
+    label: 'ACTIVE',
+    icon: Activity
+  },
+  blocked: { 
+    color: 'text-rose-400', 
+    border: 'border-rose-500/30', 
+    bg: 'bg-rose-500/5', 
+    label: 'BLOCKED',
+    icon: AlertTriangle
+  },
+  completed: { 
+    color: 'text-slate-400', 
+    border: 'border-slate-500/30', 
+    bg: 'bg-slate-500/5', 
+    label: 'COMPLETE',
+    icon: CheckCircle2
+  },
+};
+
+export function MissionCard({ id, projectRoot, title, description, status, stats, agents, onDeploy, onClick }: MissionCardProps) {
+  const config = STATUS_CONFIG[status] || STATUS_CONFIG.planning;
+  const StatusIcon = config.icon;
+  const { topology, isLoading } = useSwarmTopology(projectRoot, id);
+  
+  const isUnstaffed = agents.length === 0;
+  const isWorking = agents.some(a => a.status === 'working');
+  const showPulse = status === 'active' || isWorking;
+  
+  return (
+    <Card 
+      onClick={onClick}
+      className="group relative flex flex-col h-[320px] cursor-pointer overflow-hidden rounded-2xl border border-[var(--ui-border-soft)] bg-[var(--ui-bg-card)] hover:border-[var(--ui-accent-info)] hover:shadow-xl hover:shadow-black/20 transition-all duration-300"
+    >
+      {/* Decorative Top Glow */}
+      <div className={cn("absolute top-0 left-0 right-0 h-1 opacity-50 group-hover:opacity-100 transition-opacity", config.bg.replace('/5', '/40'))} />
+
+      {/* HEADER */}
+      <div className="p-5 flex flex-col gap-3 min-h-0">
+        <div className="flex justify-between items-start">
+          <div className="flex items-center gap-2">
+            <span className="font-mono text-[10px] tracking-wider text-slate-500">{id}</span>
+            <Badge variant="outline" className={cn("text-[9px] px-2 py-0.5 border h-5 flex items-center gap-1.5", config.color, config.border, config.bg)}>
+              <StatusIcon className="h-3 w-3" />
+              {config.label}
+            </Badge>
+          </div>
+          {showPulse && (
+            <div className="flex items-center gap-2">
+              <span className="relative flex h-2 w-2">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+              </span>
+            </div>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <h3 className="font-bold text-lg text-slate-100 leading-tight group-hover:text-white transition-colors line-clamp-2">
+            {title}
+          </h3>
+          <p className="text-xs text-slate-400 line-clamp-2 leading-relaxed">
+            {description || "No mission brief available."}
+          </p>
+        </div>
+      </div>
+
+      {/* GRAPH VISUALIZATION */}
+      <div className="px-5 py-2 flex-1 flex flex-col justify-end">
+         <SwarmGraph topology={topology} isLoading={isLoading} />
+      </div>
+
+      {/* FOOTER: SQUAD */}
+      <div className="px-5 py-3 border-t border-white/5 flex items-center justify-between bg-[var(--ui-bg-shell)] mt-auto">
+        <div className="flex items-center gap-3">
+          <div className="flex -space-x-2">
+            {agents.slice(0, 4).map(agent => (
+              <div key={agent.agent_id} className="ring-2 ring-[var(--ui-bg-shell)] rounded-full transition-transform hover:scale-110 z-0 hover:z-10 relative" title={`${agent.display_name} (${agent.role})`}>
+                <AgentAvatar name={agent.display_name} status={agent.status as any} size="sm" />
+              </div>
+            ))}
+            {agents.length === 0 && (
+              <div className="h-7 w-7 rounded-full bg-slate-800 border border-slate-700 border-dashed flex items-center justify-center text-slate-600">
+                <Users className="h-3 w-3" />
+              </div>
+            )}
+          </div>
+          {agents.length === 0 && (
+            <span className="text-[10px] font-medium text-slate-500 uppercase tracking-wide">Unstaffed</span>
+          )}
+        </div>
+
+        <Button 
+          size="sm" 
+          variant="ghost"
+          onClick={(e) => { e.stopPropagation(); onDeploy(); }}
+          className={cn(
+            "h-7 px-3 text-[10px] font-bold uppercase tracking-wider border transition-all",
+            isUnstaffed 
+              ? "border-blue-500/20 text-blue-400 bg-blue-500/5 hover:bg-blue-500/10 hover:border-blue-500/40" 
+              : "border-slate-700 text-slate-400 hover:text-white hover:bg-white/5 hover:border-slate-500"
+          )}
+        >
+          {isUnstaffed ? 'Deploy' : 'Manage'}
+        </Button>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/components/mission/mission-inspector.tsx b/src/components/mission/mission-inspector.tsx
new file mode 100644
index 0000000..3e19ca2
--- /dev/null
+++ b/src/components/mission/mission-inspector.tsx
@@ -0,0 +1,141 @@
+'use client';
+
+import { useState } from 'react';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Loader2, Map, MessageSquare, Users, X, Activity } from 'lucide-react';
+import { WorkflowGraph } from '../shared/workflow-graph';
+import { AgentAvatar } from '../shared/agent-avatar';
+import { useMissionGraph } from '../../hooks/use-mission-graph';
+import type { AgentRecord } from '../../lib/agent-registry';
+
+interface MissionInspectorProps {
+  missionId: string;
+  missionTitle: string; // Passed in or fetched? Better to pass in for instant header
+  projectRoot: string;
+  assignedAgents: AgentRecord[];
+  onClose: () => void;
+  onAssign: (agentId: string, action: 'join' | 'leave') => void;
+}
+
+export function MissionInspector({ 
+  missionId, 
+  missionTitle,
+  projectRoot, 
+  assignedAgents,
+  onClose,
+  onAssign 
+}: MissionInspectorProps) {
+  const { nodes, isLoading: isGraphLoading } = useMissionGraph(projectRoot, missionId);
+  const [activeTab, setActiveTab] = useState('map');
+
+  return (
+    <div className="flex flex-col h-full bg-[#08111d] border-l border-slate-800 text-slate-200">
+      {/* Header */}
+      <div className="flex items-start justify-between p-4 border-b border-slate-800 bg-[#0d1621]">
+        <div className="space-y-1">
+          <div className="flex items-center gap-2">
+            <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 font-mono text-[10px]">
+              {missionId}
+            </Badge>
+            <span className="text-[10px] uppercase tracking-wider text-slate-500 font-bold">Active Operation</span>
+          </div>
+          <h2 className="text-sm font-semibold text-white line-clamp-2">{missionTitle}</h2>
+        </div>
+        <Button variant="ghost" size="icon" className="h-6 w-6 text-slate-500 hover:text-white" onClick={onClose}>
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Tabs */}
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col min-h-0">
+        <div className="px-4 pt-2 bg-[#0d1621] border-b border-slate-800">
+          <TabsList className="bg-transparent p-0 h-auto gap-4">
+            <TabsTrigger 
+              value="map" 
+              className="rounded-none border-b-2 border-transparent px-2 py-2 text-[10px] uppercase tracking-wider data-[state=active]:border-emerald-500 data-[state=active]:bg-transparent data-[state=active]:text-emerald-400"
+            >
+              <Map className="h-3 w-3 mr-1.5" />
+              Map
+            </TabsTrigger>
+            <TabsTrigger 
+              value="comms" 
+              className="rounded-none border-b-2 border-transparent px-2 py-2 text-[10px] uppercase tracking-wider data-[state=active]:border-emerald-500 data-[state=active]:bg-transparent data-[state=active]:text-emerald-400"
+            >
+              <MessageSquare className="h-3 w-3 mr-1.5" />
+              Comms
+            </TabsTrigger>
+            <TabsTrigger 
+              value="squad" 
+              className="rounded-none border-b-2 border-transparent px-2 py-2 text-[10px] uppercase tracking-wider data-[state=active]:border-emerald-500 data-[state=active]:bg-transparent data-[state=active]:text-emerald-400"
+            >
+              <Users className="h-3 w-3 mr-1.5" />
+              Squad <span className="ml-1 text-slate-500">{assignedAgents.length}</span>
+            </TabsTrigger>
+          </TabsList>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-hidden relative">
+          
+          <TabsContent value="map" className="h-full m-0 p-0 data-[state=active]:flex flex-col">
+            {isGraphLoading ? (
+              <div className="flex h-full items-center justify-center"><Loader2 className="h-6 w-6 animate-spin text-slate-600" /></div>
+            ) : (
+              <div className="flex-1 relative bg-slate-950">
+                 <WorkflowGraph beads={nodes} selectedId={undefined} hideClosed={false} className="h-full w-full border-0 rounded-none" />
+                 <div className="absolute bottom-4 right-4 pointer-events-none">
+                    <Badge variant="outline" className="bg-black/50 border-white/10 backdrop-blur text-xs">
+                       {nodes.length} Nodes
+                    </Badge>
+                 </div>
+              </div>
+            )}
+          </TabsContent>
+
+          <TabsContent value="comms" className="h-full m-0 p-4 overflow-y-auto">
+            <div className="flex flex-col items-center justify-center h-full text-slate-500 space-y-2 opacity-60">
+              <Activity className="h-8 w-8" />
+              <p className="text-xs">Secure Uplink Offline</p>
+              <p className="text-[10px] italic">Inter-agent communication feed coming in Phase 3.2</p>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="squad" className="h-full m-0">
+            <ScrollArea className="h-full">
+              <div className="p-4 space-y-3">
+                {assignedAgents.length === 0 ? (
+                   <div className="text-center py-8 text-slate-500 text-xs">
+                     No agents deployed.
+                   </div>
+                ) : (
+                  assignedAgents.map(agent => (
+                    <div key={agent.agent_id} className="flex items-center justify-between p-3 rounded-lg bg-slate-800/40 border border-slate-800">
+                      <div className="flex items-center gap-3">
+                        <AgentAvatar name={agent.display_name} status={agent.status as any} />
+                        <div>
+                          <p className="text-sm font-medium text-slate-200">{agent.display_name}</p>
+                          <div className="flex items-center gap-2 text-[10px] text-slate-500">
+                            <span className="uppercase font-bold tracking-wider">{agent.role}</span>
+                            <span>•</span>
+                            <span className="font-mono">{agent.status}</span>
+                          </div>
+                        </div>
+                      </div>
+                      <Button variant="ghost" size="sm" className="h-7 text-xs text-rose-400 hover:text-rose-300 hover:bg-rose-950/30" onClick={() => onAssign(agent.agent_id, 'leave')}>
+                        Dismiss
+                      </Button>
+                    </div>
+                  ))
+                )}
+              </div>
+            </ScrollArea>
+          </TabsContent>
+
+        </div>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/src/components/mission/swarm-graph.tsx b/src/components/mission/swarm-graph.tsx
new file mode 100644
index 0000000..714b4d9
--- /dev/null
+++ b/src/components/mission/swarm-graph.tsx
@@ -0,0 +1,107 @@
+'use client';
+
+import { useMemo } from 'react';
+import { motion } from 'framer-motion';
+import type { SwarmTopologyData } from '../../hooks/use-swarm-topology';
+
+interface SwarmGraphProps {
+  topology: SwarmTopologyData | null;
+  isLoading: boolean;
+}
+
+export function SwarmGraph({ topology, isLoading }: SwarmGraphProps) {
+  const nodes = useMemo(() => {
+    if (!topology) return [];
+    
+    // Simple layout strategy: Clusters
+    // Done: Left side
+    // Active: Center
+    // Ready: Right
+    // Blocked: Bottom Right
+    
+    const output: React.ReactNode[] = [];
+    const scale = 0.5; 
+
+    // 1. Completed (Green Cluster)
+    topology.completed.forEach((item, i) => {
+      const col = i % 5;
+      const row = Math.floor(i / 5);
+      output.push(
+        <circle 
+          key={`done-${item.id}`}
+          cx={20 + (col * 8)} 
+          cy={20 + (row * 8)} 
+          r={2.5} 
+          fill="#34d399" 
+          opacity={0.5}
+        />
+      );
+    });
+
+    // 2. Active (Pulsing Center)
+    topology.active.forEach((item, i) => {
+        const cx = 140 + (i * 20);
+        const cy = 30 + (i % 2) * 10;
+        output.push(
+            <g key={`active-${item.id}`}>
+                <circle cx={cx} cy={cy} r={6} fill="#10b981" className="animate-pulse" />
+                <circle cx={cx} cy={cy} r={3} fill="#ecfdf5" />
+            </g>
+        );
+    });
+
+    // 3. Ready (White Pipeline)
+    topology.ready.forEach((item, i) => {
+        const cx = 220 + (i * 10);
+        const cy = 30;
+        output.push(
+            <circle key={`ready-${item.id}`} cx={cx} cy={cy} r={3} fill="#94a3b8" />
+        );
+    });
+
+    // 4. Blocked (Red Hazard)
+    topology.blocked.forEach((item, i) => {
+        const cx = 220 + (i * 10);
+        const cy = 50;
+        output.push(
+            <circle key={`blocked-${item.id}`} cx={cx} cy={cy} r={3} fill="#f43f5e" />
+        );
+    });
+
+    return output;
+  }, [topology]);
+
+  if (isLoading) {
+    return (
+      <div className="h-16 w-full flex items-center justify-center bg-black/20 rounded-lg animate-pulse">
+        <span className="text-[10px] text-slate-600 font-mono">SCANNING TOPOLOGY...</span>
+      </div>
+    );
+  }
+
+  if (!topology || (topology.completed.length === 0 && topology.active.length === 0 && topology.ready.length === 0)) {
+     return (
+        <div className="h-16 w-full flex items-center justify-center bg-black/20 rounded-lg border border-dashed border-slate-800">
+            <span className="text-[10px] text-slate-600 font-mono">EMPTY SIGNAL</span>
+        </div>
+     );
+  }
+
+  return (
+    <div className="h-16 w-full bg-black/40 rounded-lg border border-white/5 overflow-hidden relative">
+      <svg width="100%" height="100%" viewBox="0 0 300 64" preserveAspectRatio="xMidYMid meet">
+        {/* Connection Lines (Abstract) */}
+        <path d="M 60 30 L 130 30" stroke="#334155" strokeWidth="1" strokeDasharray="4 4" />
+        <path d="M 180 30 L 210 30" stroke="#334155" strokeWidth="1" strokeDasharray="4 4" />
+        
+        {nodes}
+        
+        {/* Labels */}
+        <text x="30" y="55" fontSize="8" fill="#475569" textAnchor="middle" fontFamily="monospace">DONE</text>
+        <text x="150" y="55" fontSize="8" fill="#10b981" textAnchor="middle" fontFamily="monospace" fontWeight="bold">ACTIVE</text>
+        <text x="240" y="15" fontSize="8" fill="#94a3b8" textAnchor="middle" fontFamily="monospace">READY</text>
+        <text x="240" y="60" fontSize="8" fill="#f43f5e" textAnchor="middle" fontFamily="monospace">BLOCKED</text>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/components/mission/team-manager-dialog.tsx b/src/components/mission/team-manager-dialog.tsx
new file mode 100644
index 0000000..670840f
--- /dev/null
+++ b/src/components/mission/team-manager-dialog.tsx
@@ -0,0 +1,255 @@
+'use client';
+
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Badge } from '@/components/ui/badge';
+import { AgentAvatar } from '../shared/agent-avatar';
+import { useAgentPool } from '../../hooks/use-agent-pool';
+import { Loader2, Plus, Minus, ShieldCheck, Search, Users, ChevronLeft, Save } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import type { AgentRecord } from '../../lib/agent-registry';
+
+interface TeamManagerDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  missionId: string;
+  missionTitle: string;
+  projectRoot: string;
+  assignedAgents: AgentRecord[];
+  onAssign: (agentId: string, action: 'join' | 'leave') => Promise<void>;
+}
+
+export function TeamManagerDialog({ 
+  isOpen, 
+  onClose, 
+  missionId, 
+  missionTitle, 
+  projectRoot,
+  assignedAgents,
+  onAssign 
+}: TeamManagerDialogProps) {
+  const { agents, isLoading, refresh } = useAgentPool(projectRoot);
+  const [search, setSearch] = useState('');
+  const [pendingAction, setPendingAction] = useState<string | null>(null);
+  
+  // Creation Mode State
+  const [isCreating, setIsCreating] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newRole, setNewRole] = useState('');
+  const [newInstructions, setNewInstructions] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+
+  const assignedIds = new Set(assignedAgents.map(a => a.agent_id));
+  
+  const availableAgents = agents.filter(a => 
+    !assignedIds.has(a.agent_id) && 
+    (a.display_name.toLowerCase().includes(search.toLowerCase()) || 
+     a.role.toLowerCase().includes(search.toLowerCase()))
+  );
+
+  const handleAction = async (agentId: string, action: 'join' | 'leave') => {
+    setPendingAction(agentId);
+    try {
+      await onAssign(agentId, action);
+    } finally {
+      setPendingAction(null);
+    }
+  };
+
+  const handleCreateAgent = async () => {
+    if (!newName || !newRole) return;
+    setIsSaving(true);
+    try {
+      const res = await fetch('/api/agent/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ projectRoot, name: newName, role: newRole, instructions: newInstructions })
+      });
+      if (res.ok) {
+        await refresh();
+        setIsCreating(false);
+        setNewName('');
+        setNewRole('');
+        setNewInstructions('');
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-2xl bg-[#08111d] border-slate-800 text-slate-200">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <ShieldCheck className="h-5 w-5 text-emerald-500" />
+            Manage Mission Squad
+            <Badge variant="outline" className="ml-2 border-slate-700 text-slate-400 font-mono font-normal">
+              {missionId}
+            </Badge>
+          </DialogTitle>
+          <p className="text-sm text-slate-400">{missionTitle}</p>
+        </DialogHeader>
+
+        <div className="grid grid-cols-2 gap-4 h-[450px] mt-4">
+          {/* Left: Available Pool / Creation Form */}
+          <div className="flex flex-col gap-2 rounded-lg border border-slate-800 bg-[#0d1621] p-3 transition-all relative overflow-hidden">
+            {isCreating ? (
+              // CREATION FORM
+              <div className="flex flex-col h-full animate-in slide-in-from-left-4 fade-in duration-200">
+                <div className="flex items-center justify-between mb-4">
+                  <Button variant="ghost" size="sm" onClick={() => setIsCreating(false)} className="-ml-2 text-slate-400 hover:text-white">
+                    <ChevronLeft className="h-4 w-4 mr-1" /> Back
+                  </Button>
+                  <h4 className="text-xs font-bold uppercase tracking-wider text-emerald-500">Draft New Agent</h4>
+                </div>
+                
+                <div className="space-y-4 flex-1">
+                  <div className="space-y-1">
+                    <label className="text-[10px] uppercase text-slate-500 font-semibold">Codename</label>
+                    <Input 
+                      placeholder="e.g. Data Miner" 
+                      className="bg-slate-900 border-slate-700" 
+                      value={newName}
+                      onChange={e => setNewName(e.target.value)}
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <label className="text-[10px] uppercase text-slate-500 font-semibold">Role</label>
+                    <Input 
+                      placeholder="e.g. data-engineer" 
+                      className="bg-slate-900 border-slate-700 font-mono text-xs" 
+                      value={newRole}
+                      onChange={e => setNewRole(e.target.value)}
+                    />
+                  </div>
+                  <div className="space-y-1 flex-1 flex flex-col">
+                    <label className="text-[10px] uppercase text-slate-500 font-semibold">Directives / Instructions</label>
+                    <Textarea 
+                      placeholder="Primary directive: Extract data from..." 
+                      className="bg-slate-900 border-slate-700 flex-1 resize-none text-xs leading-relaxed" 
+                      value={newInstructions}
+                      onChange={e => setNewInstructions(e.target.value)}
+                    />
+                  </div>
+                </div>
+
+                <Button 
+                  onClick={handleCreateAgent} 
+                  disabled={!newName || !newRole || isSaving}
+                  className="mt-4 bg-emerald-600 hover:bg-emerald-500 text-white w-full"
+                >
+                  {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <><Save className="h-4 w-4 mr-2" /> Recruit Agent</>}
+                </Button>
+              </div>
+            ) : (
+              // LIST VIEW
+              <>
+                <div className="flex items-center justify-between mb-2">
+                  <h4 className="text-xs font-bold uppercase tracking-wider text-slate-500">Available Resources</h4>
+                  <Badge variant="secondary" className="bg-slate-800 text-slate-400">{availableAgents.length}</Badge>
+                </div>
+                <div className="flex gap-2 mb-2">
+                  <div className="relative flex-1">
+                    <Search className="absolute left-2 top-2.5 h-3 w-3 text-slate-500" />
+                    <Input 
+                      placeholder="Search agents..." 
+                      className="h-8 pl-7 bg-slate-900 border-slate-700 text-xs"
+                      value={search}
+                      onChange={(e) => setSearch(e.target.value)}
+                    />
+                  </div>
+                  <Button 
+                    size="icon" 
+                    variant="outline" 
+                    className="h-8 w-8 border-slate-700 border-dashed text-slate-400 hover:text-emerald-400 hover:border-emerald-500/50"
+                    onClick={() => setIsCreating(true)}
+                    title="Draft New Agent"
+                  >
+                    <Plus className="h-4 w-4" />
+                  </Button>
+                </div>
+                <ScrollArea className="flex-1 pr-3">
+                  {isLoading ? (
+                    <div className="flex justify-center p-4"><Loader2 className="h-5 w-5 animate-spin text-slate-500" /></div>
+                  ) : (
+                    <div className="space-y-2">
+                      {availableAgents.map(agent => (
+                        <div key={agent.agent_id} className="flex items-center justify-between p-2 rounded hover:bg-white/5 transition-colors group">
+                          <div className="flex items-center gap-2">
+                            <AgentAvatar name={agent.display_name} status={agent.status as any} size="sm" />
+                            <div>
+                              <p className="text-xs font-medium text-slate-200">{agent.display_name}</p>
+                              <p className="text-[10px] text-slate-500 uppercase">{agent.role}</p>
+                            </div>
+                          </div>
+                          <Button 
+                            size="icon" 
+                            variant="ghost" 
+                            className="h-6 w-6 opacity-0 group-hover:opacity-100 hover:bg-emerald-500/20 hover:text-emerald-400"
+                            onClick={() => handleAction(agent.agent_id, 'join')}
+                            disabled={!!pendingAction}
+                          >
+                            {pendingAction === agent.agent_id ? <Loader2 className="h-3 w-3 animate-spin" /> : <Plus className="h-3 w-3" />}
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </ScrollArea>
+              </>
+            )}
+          </div>
+
+          {/* Right: Assigned Squad */}
+          <div className="flex flex-col gap-2 rounded-lg border border-emerald-900/30 bg-emerald-950/10 p-3">
+            <div className="flex items-center justify-between mb-2">
+              <h4 className="text-xs font-bold uppercase tracking-wider text-emerald-500">Deployed Squad</h4>
+              <Badge variant="outline" className="border-emerald-500/30 text-emerald-400">{assignedAgents.length}</Badge>
+            </div>
+            <ScrollArea className="flex-1 pr-3">
+              <div className="space-y-2">
+                {assignedAgents.length === 0 ? (
+                  <div className="flex flex-col items-center justify-center h-full text-slate-500 text-xs italic border border-dashed border-emerald-900/30 rounded bg-emerald-950/20">
+                    <Users className="h-8 w-8 mb-2 opacity-20" />
+                    No agents assigned
+                  </div>
+                ) : (
+                  assignedAgents.map(agent => (
+                    <div key={agent.agent_id} className="flex items-center justify-between p-2 rounded bg-emerald-500/5 border border-emerald-500/10">
+                      <div className="flex items-center gap-2">
+                        <AgentAvatar name={agent.display_name} status={agent.status as any} size="sm" />
+                        <div>
+                          <p className="text-xs font-medium text-emerald-100">{agent.display_name}</p>
+                          <p className="text-[10px] text-emerald-500/70 uppercase">{agent.role}</p>
+                        </div>
+                      </div>
+                      <Button 
+                        size="icon" 
+                        variant="ghost" 
+                        className="h-6 w-6 hover:bg-rose-500/20 hover:text-rose-400"
+                        onClick={() => handleAction(agent.agent_id, 'leave')}
+                        disabled={!!pendingAction}
+                      >
+                        {pendingAction === agent.agent_id ? <Loader2 className="h-3 w-3 animate-spin" /> : <Minus className="h-3 w-3" />}
+                      </Button>
+                    </div>
+                  ))
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} className="border-slate-700 text-slate-300">Done</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/src/components/shared/left-panel.tsx b/src/components/shared/left-panel.tsx
index 2c17a77..f5f4113 100644
--- a/src/components/shared/left-panel.tsx
+++ b/src/components/shared/left-panel.tsx
@@ -1,320 +1,442 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useMemo, useState } from 'react';
+import { ChevronDown, ChevronRight, Folder, FolderOpen, Star } from 'lucide-react';
+
 import type { BeadIssue } from '../../lib/types';
-import { useResponsive } from '../../hooks/use-responsive';
 import { cn } from '../../lib/utils';
+import { useUrlState, type ViewType } from '../../hooks/use-url-state';
+
+export type LeftPanelStatusFilter = 'all' | 'ready' | 'in_progress' | 'blocked' | 'deferred' | 'done';
+export type LeftPanelPriorityFilter = 'all' | 'P0' | 'P1' | 'P2' | 'P3' | 'P4';
+export type LeftPanelPresetFilter = 'all' | 'active' | 'blocked_agents';
+
+export interface LeftPanelFilters {
+  query: string;
+  status: LeftPanelStatusFilter;
+  priority: LeftPanelPriorityFilter;
+  preset: LeftPanelPresetFilter;
+  hideClosed: boolean;
+}
 
 export interface LeftPanelProps {
   issues: BeadIssue[];
   selectedEpicId?: string | null;
   onEpicSelect?: (epicId: string | null) => void;
+  filters: LeftPanelFilters;
+  onFiltersChange: (filters: LeftPanelFilters) => void;
 }
 
-interface EpicNode {
+interface EpicEntry {
   epic: BeadIssue;
   children: BeadIssue[];
-  stats: {
-    total: number;
-    closed: number;
-    in_progress: number;
-    blocked: number;
-    ready: number;
-    lastActivity: number;
-  };
-  status: 'blocked' | 'in_progress' | 'ready' | 'done' | 'empty';
+  blockedCount: number;
+  activeCount: number;
+  readyCount: number;
+  deferredCount: number;
+  doneCount: number;
+  agentBlockedCount: number;
+  latestTimestamp: string;
 }
 
-function buildEpicTree(issues: BeadIssue[]): EpicNode[] {
-  const epics = issues.filter(issue => issue.issue_type === 'epic');
-  const epicMap = new Map<string, EpicNode>();
+function mapStatus(task: BeadIssue): LeftPanelStatusFilter {
+  if (task.status === 'open') return 'ready';
+  if (task.status === 'in_progress') return 'in_progress';
+  if (task.status === 'blocked') return 'blocked';
+  if (task.status === 'closed' || task.status === 'tombstone') return 'done';
+  return 'deferred';
+}
 
-  for (const epic of epics) {
-    epicMap.set(epic.id, { 
-      epic, 
-      children: [],
-      stats: { total: 0, closed: 0, in_progress: 0, blocked: 0, ready: 0, lastActivity: new Date(epic.updated_at).getTime() },
-      status: 'empty'
-    });
+function mapPriority(task: BeadIssue): LeftPanelPriorityFilter {
+  if (task.priority <= 0) return 'P0';
+  if (task.priority === 1) return 'P1';
+  if (task.priority === 2) return 'P2';
+  if (task.priority === 3) return 'P3';
+  return 'P4';
+}
+
+function formatRelative(timestamp: string): string {
+  const then = new Date(timestamp);
+  const now = new Date();
+  const diffMinutes = Math.floor((now.getTime() - then.getTime()) / 60000);
+  if (diffMinutes < 1) return 'just now';
+  if (diffMinutes < 60) return `${diffMinutes}m ago`;
+  const diffHours = Math.floor(diffMinutes / 60);
+  if (diffHours < 24) return `${diffHours}h ago`;
+  const diffDays = Math.floor(diffHours / 24);
+  return `${diffDays}d ago`;
+}
+
+function buildEntries(issues: BeadIssue[]): EpicEntry[] {
+  const epics = issues.filter((issue) => issue.issue_type === 'epic');
+  const tasks = issues.filter((issue) => issue.issue_type !== 'epic');
+  const taskById = new Map(tasks.map((task) => [task.id, task] as const));
+  const incomingBlockers = new Map<string, string[]>();
+
+  for (const task of tasks) {
+    incomingBlockers.set(task.id, []);
   }
 
-  for (const issue of issues) {
-    if (issue.issue_type === 'epic') continue;
-
-    const parentDep = issue.dependencies.find(dep => dep.type === 'parent');
-    if (parentDep && epicMap.has(parentDep.target)) {
-      const node = epicMap.get(parentDep.target)!;
-      node.children.push(issue);
-      
-      node.stats.total++;
-      if (issue.status === 'closed') node.stats.closed++;
-      else if (issue.status === 'blocked') node.stats.blocked++;
-      else if (issue.status === 'in_progress') node.stats.in_progress++;
-      else node.stats.ready++; // open/ready
-      
-      const issueTime = new Date(issue.updated_at).getTime();
-      if (issueTime > node.stats.lastActivity) node.stats.lastActivity = issueTime;
+  for (const task of tasks) {
+    for (const dependency of task.dependencies) {
+      if (dependency.type !== 'blocks') continue;
+      if (!taskById.has(dependency.target)) continue;
+      const current = incomingBlockers.get(dependency.target) ?? [];
+      current.push(task.id);
+      incomingBlockers.set(dependency.target, current);
     }
   }
 
-  // Determine Aggregate Status
-  for (const node of epicMap.values()) {
-    if (node.stats.blocked > 0) node.status = 'blocked';
-    else if (node.stats.in_progress > 0) node.status = 'in_progress';
-    else if (node.stats.ready > 0) node.status = 'ready';
-    else if (node.stats.total > 0 && node.stats.closed === node.stats.total) node.status = 'done';
-    else node.status = 'empty';
-  }
-
-  return Array.from(epicMap.values()).sort((a, b) => {
-    // Sort by status priority (Blocked > In Progress > Ready > Done) then Recency
-    const statusScore = { blocked: 4, in_progress: 3, ready: 2, done: 1, empty: 0 };
-    const scoreDiff = statusScore[b.status] - statusScore[a.status];
-    if (scoreDiff !== 0) return scoreDiff;
-    return b.stats.lastActivity - a.stats.lastActivity;
-  });
-}
-
-function StatusIndicator({ status }: { status: string }) {
-  const styles = {
-    blocked: 'bg-[#C97A7A] shadow-[0_0_8px_rgba(201,122,122,0.45)]',
-    in_progress: 'bg-[#D4A574] shadow-[0_0_8px_rgba(212,165,116,0.45)]',
-    ready: 'bg-[#7CB97A] shadow-[0_0_8px_rgba(124,185,122,0.45)]',
-    done: 'bg-[var(--status-closed)]',
-    empty: 'bg-white/10',
-  }[status] || 'bg-slate-500';
-
-  return <div className={cn("w-1.5 h-1.5 rounded-full shrink-0", styles)} />;
-}
-
-export function LeftPanel({
-  issues,
-  selectedEpicId,
-  onEpicSelect,
-}: LeftPanelProps) {
-  const [expandedEpics, setExpandedEpics] = useState<Set<string>>(new Set());
-  const { isDesktop, isTablet } = useResponsive();
-
-  const epicTree = useMemo(() => buildEpicTree(issues), [issues]);
-  const featuredEpics = useMemo(() => epicTree.slice(0, 2), [epicTree]);
-  const standardEpics = useMemo(() => epicTree.slice(2, 6), [epicTree]);
-  const compactEpics = useMemo(() => epicTree.slice(6), [epicTree]);
-
-  const toggleEpic = (epicId: string) => {
-    setExpandedEpics(prev => {
-      const next = new Set(prev);
-      if (next.has(epicId)) {
-        next.delete(epicId);
-      } else {
-        next.add(epicId);
-      }
-      return next;
+  const isEffectivelyBlocked = (task: BeadIssue): boolean => {
+    if (task.status === 'blocked') return true;
+    if (task.status === 'closed' || task.status === 'tombstone') return false;
+    const blockers = incomingBlockers.get(task.id) ?? [];
+    return blockers.some((blockerId) => {
+      const blocker = taskById.get(blockerId);
+      return blocker ? blocker.status !== 'closed' && blocker.status !== 'tombstone' : false;
     });
   };
 
-  const handleEpicClick = (epicId: string) => {
-    onEpicSelect?.(epicId === selectedEpicId ? null : epicId); 
-    toggleEpic(epicId);
-  };
+  return epics
+    .map((epic) => {
+      const children = tasks
+        .filter((task) => task.dependencies.some((dep) => dep.type === 'parent' && dep.target === epic.id))
+        .sort((a, b) => a.id.localeCompare(b.id));
+      const blockedCount = children.filter((task) => isEffectivelyBlocked(task)).length;
+      const activeCount = children.filter((task) => task.status === 'in_progress').length;
+      const readyCount = children.filter((task) => task.status === 'open' && !isEffectivelyBlocked(task)).length;
+      const deferredCount = children.filter((task) => task.status === 'deferred').length;
+      const doneCount = children.filter((task) => task.status === 'closed' || task.status === 'tombstone').length;
+      const agentBlockedCount = children.filter(
+        (task) =>
+          isEffectivelyBlocked(task) &&
+          (Boolean(task.assignee) ||
+            task.labels.some((label) => label === 'gt:agent' || label.startsWith('agent:') || label.startsWith('gt:agent:'))),
+      ).length;
+      const latestTimestamp = [epic.updated_at, ...children.map((child) => child.updated_at)]
+        .sort((a, b) => new Date(b).getTime() - new Date(a).getTime())[0] ?? epic.updated_at;
+      return {
+        epic,
+        children,
+        blockedCount,
+        activeCount,
+        readyCount,
+        deferredCount,
+        doneCount,
+        agentBlockedCount,
+        latestTimestamp,
+      };
+    })
+    .sort((a, b) => a.epic.id.localeCompare(b.epic.id));
+}
 
-  if (isTablet) {
-    return (
-      <div className="flex w-16 flex-col items-center gap-2 overflow-y-auto bg-[var(--color-bg-card)]/96 py-4 shadow-[10px_0_28px_-16px_rgba(0,0,0,0.82)]">
-        {epicTree.map(({ epic, status }) => (
-          <button
-            key={epic.id}
-            onClick={() => handleEpicClick(epic.id)}
-            className={cn(
-              'w-10 h-10 rounded-xl flex items-center justify-center text-xs font-bold transition-all duration-200 ring-1',
-              selectedEpicId === epic.id
-                ? 'bg-[var(--color-bg-input)] ring-white/30 text-white'
-                : 'ring-transparent text-[var(--color-text-muted)] hover:bg-white/5',
-              status === 'blocked' && 'ring-[#C97A7A]/50',
-              status === 'in_progress' && 'ring-[#D4A574]/50'
-            )}
-          >
-            {epic.id.slice(0, 2).toUpperCase()}
-          </button>
-        ))}
-      </div>
-    );
+function statusDot(status: BeadIssue['status']): string {
+  if (status === 'blocked') return 'bg-[var(--ui-accent-blocked)]';
+  if (status === 'in_progress') return 'bg-[var(--ui-accent-warning)]';
+  if (status === 'closed') return 'bg-[var(--ui-text-muted)]';
+  return 'bg-[var(--ui-accent-ready)]';
+}
+
+function rowTone(entry: EpicEntry): string {
+  if (entry.blockedCount > 0) {
+    return '#22111a';
   }
+  if (entry.activeCount > 0) {
+    return '#221a11';
+  }
+  if (entry.readyCount > 0) {
+    return '#0f221c';
+  }
+  return '#111f2b';
+}
+
+function isTaskMatch(task: BeadIssue, filters: LeftPanelFilters): boolean {
+  if (filters.hideClosed && (task.status === 'closed' || task.status === 'tombstone')) return false;
+  const normalizedQuery = filters.query.trim().toLowerCase();
+  if (normalizedQuery.length > 0) {
+    const searchable = `${task.id} ${task.title} ${task.labels.join(' ')}`.toLowerCase();
+    if (!searchable.includes(normalizedQuery)) return false;
+  }
+  if (filters.status !== 'all' && mapStatus(task) !== filters.status) return false;
+  if (filters.priority !== 'all' && mapPriority(task) !== filters.priority) return false;
+  if (filters.preset === 'active' && task.status !== 'in_progress') return false;
+  if (
+    filters.preset === 'blocked_agents' &&
+    !(
+      task.status === 'blocked' &&
+      (Boolean(task.assignee) || task.labels.some((label) => label === 'gt:agent' || label.startsWith('agent:')))
+    )
+  ) {
+    return false;
+  }
+  return true;
+}
+
+export function LeftPanel({ issues, selectedEpicId, onEpicSelect, filters, onFiltersChange }: LeftPanelProps) {
+  const { view, setView } = useUrlState();
+  const entries = useMemo(() => buildEntries(issues), [issues]);
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+
+  const hasActiveFilters =
+    filters.query.trim().length > 0 ||
+    filters.status !== 'all' ||
+    filters.priority !== 'all' ||
+    filters.preset !== 'all' ||
+    filters.hideClosed;
+
+  const views: Array<{ id: ViewType; label: string }> = [
+    { id: 'social', label: 'Social' },
+    { id: 'graph', label: 'Graph' },
+    { id: 'swarm', label: 'Swarm' },
+  ];
 
   return (
-    <div
-      className={cn(
-        'flex flex-col h-full overflow-hidden transition-all duration-300',
-        !isDesktop && 'hidden lg:flex'
-      )}
-      style={{ width: '20rem' }}
-      data-testid="left-panel"
-    >
-      <div className="flex h-full flex-col bg-[radial-gradient(circle_at_4%_14%,rgba(212,165,116,0.38),transparent_44%),radial-gradient(circle_at_96%_86%,rgba(91,168,160,0.34),transparent_40%),linear-gradient(165deg,rgba(49,49,62,0.97),rgba(37,40,54,0.98))] shadow-[14px_0_34px_-18px_rgba(0,0,0,0.86)]">
-        {/* Header */}
-        <div className="flex items-center justify-between bg-[linear-gradient(90deg,rgba(212,165,116,0.16),rgba(91,168,160,0.12))] p-5 shadow-[0_12px_22px_-18px_rgba(0,0,0,0.9)]">
-          <span className="text-xs font-bold uppercase tracking-[0.2em] text-[var(--color-text-muted)]">Workstreams</span>
-          <div className="flex gap-2 text-[10px] font-mono text-[var(--color-text-muted)]/60">
-            <span>{epicTree.length} ACTIVE</span>
+    <aside className="flex h-full flex-col bg-[var(--ui-bg-shell)] shadow-[inset_-1px_0_0_rgba(0,0,0,0.55),24px_0_40px_-34px_rgba(0,0,0,0.98)]" data-testid="left-panel">
+      <div className="px-4 py-3 shadow-[0_14px_24px_-20px_rgba(0,0,0,0.92)]">
+        <div className="mb-3 flex items-center gap-1 rounded-xl bg-[#101c2b] p-1 shadow-[0_12px_24px_-18px_rgba(0,0,0,0.88)]">
+          {views.map((item) => {
+            const active = view === item.id;
+            return (
+              <button
+                key={item.id}
+                type="button"
+                onClick={() => setView(item.id)}
+                className={cn(
+                  'flex-1 rounded-lg px-2 py-1 text-xs font-semibold uppercase tracking-[0.12em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)]',
+                  active
+                    ? 'bg-[#183149] text-[var(--ui-text-primary)]'
+                    : 'text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)]',
+                )}
+              >
+                {item.label}
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="space-y-2 rounded-xl bg-[#101a27] p-2.5 shadow-[0_16px_26px_-20px_rgba(0,0,0,0.92)]">
+          <div className="grid grid-cols-1 gap-2">
+            <input
+              value={filters.query}
+              onChange={(event) => onFiltersChange({ ...filters, query: event.target.value })}
+              className="ui-field rounded-lg border-transparent px-2.5 py-2 text-xs shadow-[0_10px_20px_-16px_rgba(0,0,0,0.9)]"
+              placeholder="Filter Tasks…"
+              aria-label="Filter tasks"
+              autoComplete="off"
+            />
+            <div className="grid grid-cols-2 gap-2">
+              <select
+                value={filters.status}
+                onChange={(event) => onFiltersChange({ ...filters, status: event.target.value as LeftPanelStatusFilter })}
+                className="ui-field ui-select rounded-lg border-transparent px-2.5 py-2 text-xs shadow-[0_10px_20px_-16px_rgba(0,0,0,0.9)]"
+                aria-label="Status filter"
+              >
+                <option className="ui-option" value="all">All Status</option>
+                <option className="ui-option" value="ready">Ready</option>
+                <option className="ui-option" value="in_progress">In Progress</option>
+                <option className="ui-option" value="blocked">Blocked</option>
+                <option className="ui-option" value="deferred">Deferred</option>
+                <option className="ui-option" value="done">Done</option>
+              </select>
+              <select
+                value={filters.priority}
+                onChange={(event) => onFiltersChange({ ...filters, priority: event.target.value as LeftPanelPriorityFilter })}
+                className="ui-field ui-select rounded-lg border-transparent px-2.5 py-2 text-xs shadow-[0_10px_20px_-16px_rgba(0,0,0,0.9)]"
+                aria-label="Priority filter"
+              >
+                <option className="ui-option" value="all">All Priority</option>
+                <option className="ui-option" value="P0">P0</option>
+                <option className="ui-option" value="P1">P1</option>
+                <option className="ui-option" value="P2">P2</option>
+                <option className="ui-option" value="P3">P3</option>
+                <option className="ui-option" value="P4">P4</option>
+              </select>
+            </div>
+          </div>
+          <div className="flex gap-1">
+            <button
+              type="button"
+              onClick={() => onFiltersChange({ ...filters, preset: filters.preset === 'active' ? 'all' : 'active' })}
+              className={cn(
+                'flex-1 rounded-lg px-2 py-1.5 text-[10px] font-semibold uppercase tracking-[0.11em] shadow-[0_8px_18px_-16px_rgba(0,0,0,0.9)] transition-colors',
+                filters.preset === 'active'
+                  ? 'bg-[#2f2618] text-[var(--ui-accent-warning)]'
+                  : 'bg-[#0f1824] text-[var(--ui-text-muted)]',
+              )}
+              aria-pressed={filters.preset === 'active'}
+            >
+              Active
+            </button>
+            <button
+              type="button"
+              onClick={() => onFiltersChange({ ...filters, preset: filters.preset === 'blocked_agents' ? 'all' : 'blocked_agents' })}
+              className={cn(
+                'flex-1 rounded-lg px-2 py-1.5 text-[10px] font-semibold uppercase tracking-[0.11em] shadow-[0_8px_18px_-16px_rgba(0,0,0,0.9)] transition-colors',
+                filters.preset === 'blocked_agents'
+                  ? 'bg-[#2f1621] text-[var(--ui-accent-blocked)]'
+                  : 'bg-[#0f1824] text-[var(--ui-text-muted)]',
+              )}
+              aria-pressed={filters.preset === 'blocked_agents'}
+            >
+              Agent Blocked
+            </button>
+          </div>
+          <button
+            type="button"
+            onClick={() => onFiltersChange({ ...filters, hideClosed: !filters.hideClosed })}
+            className={cn(
+              'w-full rounded-lg px-2 py-1.5 text-[10px] font-semibold uppercase tracking-[0.11em] shadow-[0_8px_18px_-16px_rgba(0,0,0,0.9)] transition-colors',
+              filters.hideClosed
+                ? 'bg-[#1d2b1a] text-[var(--ui-accent-ready)]'
+                : 'bg-[#0f1824] text-[var(--ui-text-muted)]',
+            )}
+            aria-pressed={filters.hideClosed}
+          >
+            Hide Closed
+          </button>
+        </div>
+
+        <p className="mt-2 font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--ui-text-muted)]">Navigation / Epics</p>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-3 py-3 custom-scrollbar">
+        {entries.map((entry) => {
+          const {
+            epic,
+            children,
+            blockedCount,
+            activeCount,
+            readyCount,
+            deferredCount,
+            doneCount,
+            agentBlockedCount,
+            latestTimestamp,
+          } = entry;
+          const matchedChildren = children.filter((task) => isTaskMatch(task, filters));
+          const total = children.length;
+          const donePercent = total > 0 ? Math.round((doneCount / total) * 100) : 0;
+          const readyPercent = total > 0 ? Math.round((readyCount / total) * 100) : 0;
+          const activePercent = total > 0 ? Math.round((activeCount / total) * 100) : 0;
+          const blockedPercent = total > 0 ? Math.round((blockedCount / total) * 100) : 0;
+          const isExpanded = expanded[epic.id] ?? false;
+          const isSelected = selectedEpicId === epic.id;
+          const laneColor = blockedCount > 0 ? 'var(--ui-accent-blocked)' : activeCount > 0 ? 'var(--ui-accent-warning)' : 'var(--ui-accent-ready)';
+          const rowBackground = rowTone(entry);
+
+          if (matchedChildren.length === 0 && hasActiveFilters && !isSelected) {
+            return null;
+          }
+
+          return (
+            <div key={epic.id} className="mb-2">
+              <div
+                className={cn(
+                  'rounded-2xl px-3 py-3 transition-colors shadow-[0_18px_28px_-22px_rgba(0,0,0,0.96)]',
+                  isSelected
+                    ? 'text-[var(--ui-text-primary)] ring-1 ring-[rgba(143,156,175,0.45)]'
+                    : 'text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)]',
+                )}
+                style={{
+                  boxShadow: `inset 3px 0 0 ${laneColor}, 0 18px 30px -24px rgba(0,0,0,0.95)`,
+                  background: rowBackground,
+                }}
+              >
+                <div className="mb-1.5 flex items-start gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setExpanded((current) => ({ ...current, [epic.id]: !isExpanded }))}
+                    className="mt-0.5 inline-flex h-4 w-4 items-center justify-center rounded text-[var(--ui-text-muted)] transition-colors hover:bg-white/5 hover:text-[var(--ui-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)]"
+                    aria-label={isExpanded ? `Collapse ${epic.title}` : `Expand ${epic.title}`}
+                    aria-expanded={isExpanded}
+                  >
+                    {isExpanded ? <ChevronDown className="h-3.5 w-3.5" aria-hidden="true" /> : <ChevronRight className="h-3.5 w-3.5" aria-hidden="true" />}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => onEpicSelect?.(isSelected ? null : epic.id)}
+                    className="min-w-0 flex-1 text-left"
+                  >
+                    <div className="flex min-w-0 items-center gap-1.5">
+                      {isExpanded ? <FolderOpen className="h-3.5 w-3.5 flex-shrink-0" aria-hidden="true" /> : <Folder className="h-3.5 w-3.5 flex-shrink-0" aria-hidden="true" />}
+                      <p className="truncate text-[15px] font-semibold leading-tight text-[var(--ui-text-primary)]">{epic.title}</p>
+                    </div>
+                    <p className="mt-0.5 truncate font-mono text-[11px] text-[var(--ui-text-muted)]">{epic.id}</p>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => onEpicSelect?.(epic.id)}
+                    className="inline-flex h-5 w-5 items-center justify-center rounded bg-[#0e1823] text-[var(--ui-text-muted)] shadow-[0_10px_16px_-12px_rgba(0,0,0,0.9)] transition-colors hover:text-[var(--ui-text-primary)]"
+                    aria-label={`Focus ${epic.title}`}
+                  >
+                    <Star className="h-3 w-3" aria-hidden="true" />
+                  </button>
+                </div>
+
+                <div className="flex items-center gap-3 text-[11px]">
+                  <p><span className="text-[var(--ui-text-primary)]">{total}</span> tasks</p>
+                  <p><span className="text-[var(--ui-accent-warning)]">{activeCount}</span> active</p>
+                  <p><span className="text-[var(--ui-accent-blocked)]">{agentBlockedCount}</span> ag-blocked</p>
+                  <p className="ml-auto text-[var(--ui-text-muted)]">{formatRelative(latestTimestamp)}</p>
+                </div>
+
+                <div className="mt-2">
+                  <div className="h-1.5 overflow-hidden rounded-full bg-[#0a111a]">
+                    <div className="flex h-full w-full">
+                      <div style={{ width: `${readyPercent}%`, background: 'var(--ui-accent-ready)' }} />
+                      <div style={{ width: `${activePercent}%`, background: 'var(--ui-accent-warning)' }} />
+                      <div style={{ width: `${blockedPercent}%`, background: 'var(--ui-accent-blocked)' }} />
+                      <div style={{ width: `${Math.max(0, 100 - readyPercent - activePercent - blockedPercent)}%`, background: 'var(--ui-text-muted)' }} />
+                    </div>
+                  </div>
+                  <div className="mt-1 flex items-center justify-between text-[10px] text-[var(--ui-text-muted)]">
+                    <span>{donePercent}% done</span>
+                    <span><span className="text-[var(--ui-accent-ready)]">{readyCount}</span> ready</span>
+                  </div>
+                </div>
+
+                {deferredCount + doneCount + blockedCount > 0 ? (
+                  <div className="mt-1.5 flex flex-wrap items-center gap-2 text-[10px] text-[var(--ui-text-muted)]">
+                    {blockedCount > 0 ? <span>{blockedCount} blocked</span> : null}
+                    {deferredCount > 0 ? <span>{deferredCount} deferred</span> : null}
+                    {doneCount > 0 ? <span>{doneCount} done</span> : null}
+                  </div>
+                ) : null}
+              </div>
+
+              {isExpanded ? (
+                <div className="ml-8 mt-1 space-y-1 pl-3">
+                  {matchedChildren.slice(0, 7).map((task) => (
+                    <button
+                      key={task.id}
+                      type="button"
+                      onClick={() => onEpicSelect?.(epic.id)}
+                      className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs text-[var(--ui-text-muted)] transition-colors hover:bg-[#112133] hover:text-[var(--ui-text-primary)]"
+                    >
+                      <span className={cn('h-1.5 w-1.5 rounded-full', statusDot(task.status))} />
+                      <span className="min-w-0 flex-1 truncate">{task.title}</span>
+                      <span className="font-mono text-[10px] text-[var(--ui-text-muted)]">{task.id}</span>
+                    </button>
+                  ))}
+                  {matchedChildren.length > 7 ? (
+                    <p className="px-1.5 py-0.5 text-[10px] text-[var(--ui-text-muted)]">+ {matchedChildren.length - 7} more</p>
+                  ) : null}
+                </div>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+
+      <footer className="border-t border-[var(--ui-border-soft)] px-4 py-3">
+        <div className="flex items-center gap-2">
+          <div className="h-8 w-8 rounded-full bg-[linear-gradient(135deg,#9cb6bf,#f1dcc6)]" />
+          <div>
+            <p className="text-sm font-semibold text-[var(--ui-text-primary)]">Alex Chen</p>
+            <p className="text-xs text-[var(--ui-text-muted)]">Lead Ops</p>
           </div>
         </div>
-
-        {/* Tree */}
-        <div className="flex-1 overflow-y-auto custom-scrollbar p-3 space-y-4">
-          {[
-            { label: 'Featured', items: featuredEpics, tier: 'featured' as const },
-            { label: 'Active', items: standardEpics, tier: 'standard' as const },
-            { label: 'Queue', items: compactEpics, tier: 'compact' as const },
-          ].map((section) => (
-            <div key={section.label} className={cn(section.items.length === 0 && 'hidden')}>
-              <p className="mb-2 px-1 text-[10px] font-bold uppercase tracking-[0.16em] text-[#97A0AF]/75">
-                {section.label}
-              </p>
-              <div className={cn(section.tier === 'compact' ? 'space-y-1.5' : 'space-y-2.5')}>
-                {section.items.map(({ epic, children, stats, status }) => {
-                  const isExpanded = expandedEpics.has(epic.id);
-                  const isSelected = selectedEpicId === epic.id;
-
-                  const statusStyle = {
-                    blocked:
-                      'bg-[radial-gradient(circle_at_100%_50%,rgba(201,122,122,0.3),transparent_58%),rgba(92,58,58,0.8)] hover:bg-[radial-gradient(circle_at_100%_50%,rgba(201,122,122,0.38),transparent_58%),rgba(106,64,64,0.85)]',
-                    in_progress:
-                      'bg-[radial-gradient(circle_at_100%_50%,rgba(212,165,116,0.34),transparent_58%),rgba(92,70,45,0.82)] hover:bg-[radial-gradient(circle_at_100%_50%,rgba(212,165,116,0.44),transparent_58%),rgba(108,82,51,0.88)]',
-                    ready:
-                      'bg-[radial-gradient(circle_at_100%_50%,rgba(124,185,122,0.34),transparent_60%),rgba(54,84,55,0.84)] hover:bg-[radial-gradient(circle_at_100%_50%,rgba(124,185,122,0.44),transparent_60%),rgba(61,95,61,0.9)]',
-                    done:
-                      'bg-[radial-gradient(circle_at_100%_50%,rgba(91,168,160,0.3),transparent_58%),rgba(52,72,77,0.78)] hover:bg-[radial-gradient(circle_at_100%_50%,rgba(91,168,160,0.38),transparent_58%),rgba(59,82,87,0.84)]',
-                    empty:
-                      'bg-[radial-gradient(circle_at_100%_50%,rgba(74,104,130,0.2),transparent_58%),rgba(44,49,65,0.76)] hover:bg-[radial-gradient(circle_at_100%_50%,rgba(74,104,130,0.28),transparent_58%),rgba(49,56,74,0.82)]',
-                  }[status];
-
-                  if (section.tier === 'compact') {
-                    return (
-                      <button
-                        key={epic.id}
-                        type="button"
-                        onClick={() => onEpicSelect?.(epic.id === selectedEpicId ? null : epic.id)}
-                        className={cn(
-                          'w-full rounded-lg px-2.5 py-2 text-left transition-all duration-200',
-                          'flex items-center justify-between gap-2',
-                          statusStyle,
-                          isSelected
-                            ? 'shadow-[0_14px_22px_-14px_rgba(0,0,0,0.88),0_0_0_1px_rgba(255,255,255,0.08)_inset]'
-                            : 'shadow-[0_8px_16px_-12px_rgba(0,0,0,0.82)]',
-                        )}
-                      >
-                        <div className="min-w-0">
-                          <p className="truncate font-mono text-[10px] text-[#C7D0DF]/70">{epic.id}</p>
-                          <p className="truncate text-xs font-semibold text-white/90">{epic.title}</p>
-                        </div>
-                        <div className="shrink-0 text-right">
-                          <p className="text-[10px] font-mono text-[#C7D0DF]/70">{stats.total}</p>
-                          <StatusIndicator status={status} />
-                        </div>
-                      </button>
-                    );
-                  }
-
-                  const isFeatured = section.tier === 'featured';
-                  const cardPadding = isFeatured ? 'p-4' : 'p-3';
-                  const titleClass = isFeatured ? 'text-base' : 'text-sm';
-                  const activeStyle = isSelected
-                    ? 'shadow-[0_24px_34px_-16px_rgba(0,0,0,0.9),0_0_0_1px_rgba(255,255,255,0.08)_inset] scale-[1.01]'
-                    : 'shadow-[0_10px_20px_-14px_rgba(0,0,0,0.85)]';
-
-                  return (
-                    <div key={epic.id} className="group">
-                      <button
-                        type="button"
-                        onClick={() => handleEpicClick(epic.id)}
-                        className={cn(
-                          'w-full flex flex-col rounded-xl text-left transition-all duration-300 relative overflow-hidden',
-                          cardPadding,
-                          statusStyle,
-                          activeStyle,
-                        )}
-                      >
-                        <div
-                          className={cn(
-                            'absolute left-0 top-0 bottom-0 w-1.5',
-                            status === 'blocked'
-                              ? 'bg-[#C97A7A]'
-                              : status === 'in_progress'
-                                ? 'bg-[#D4A574]'
-                                : status === 'ready'
-                                  ? 'bg-[#7CB97A]'
-                                  : 'bg-[#5BA8A0]',
-                          )}
-                        />
-
-                        <div className="pl-3 w-full">
-                          <div className="flex items-center justify-between w-full mb-1">
-                            <span className="text-[10px] font-mono text-text-muted/70 tracking-tight">{epic.id}</span>
-                            {stats.blocked > 0 && (
-                              <span className="rounded bg-[color:rgba(201,122,122,0.24)] px-1.5 text-[9px] font-bold text-[#F0C9C9]">
-                                {stats.blocked} BLOCKED
-                              </span>
-                            )}
-                          </div>
-
-                          <div className={cn('truncate font-bold text-white/90 mb-2 leading-snug', titleClass)}>
-                            {epic.title}
-                          </div>
-
-                          <div className="flex h-1.5 w-full items-center gap-1 overflow-hidden rounded-full bg-black/20">
-                            <div style={{ width: `${(stats.closed / (stats.total || 1)) * 100}%` }} className="h-full bg-[#5BA8A0]/75" />
-                            <div style={{ width: `${(stats.in_progress / (stats.total || 1)) * 100}%` }} className="h-full bg-[#D4A574]" />
-                            <div style={{ width: `${(stats.blocked / (stats.total || 1)) * 100}%` }} className="h-full bg-[#C97A7A]" />
-                            <div style={{ width: `${(stats.ready / (stats.total || 1)) * 100}%` }} className="h-full bg-[#7CB97A]" />
-                          </div>
-
-                          <div className="flex justify-between mt-1.5 text-[9px] font-mono text-text-muted/50">
-                            <span>{Math.round(((stats.closed + stats.in_progress) / (stats.total || 1)) * 100)}% Done</span>
-                            <span>{stats.total} Tasks</span>
-                          </div>
-                        </div>
-                      </button>
-
-                      {isExpanded && children.length > 0 && (
-                        <div className="ml-4 mt-2 space-y-1 pl-3">
-                          {children.slice(0, 5).map((child) => (
-                            <div
-                              key={child.id}
-                              className="group/child flex cursor-pointer items-center justify-between rounded px-2 py-1.5 transition-colors hover:bg-[rgba(212,165,116,0.16)]"
-                            >
-                              <span className="text-[10px] font-mono text-text-muted/60">{child.id}</span>
-                              <div className="flex items-center gap-2">
-                                <span className="text-[10px] text-text-muted/60 truncate max-w-[80px]">{child.title}</span>
-                                <StatusIndicator status={child.status} />
-                              </div>
-                            </div>
-                          ))}
-                          {children.length > 5 && (
-                            <div className="px-2 py-1 text-[9px] text-text-muted/30 italic">+{children.length - 5} more</div>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Footer */}
-        <div className="bg-black/18 p-4 shadow-[0_-10px_22px_-18px_rgba(0,0,0,0.82)]">
-          <label className="group flex cursor-pointer items-center gap-3 rounded px-2 py-1 transition-colors hover:bg-white/5">
-            <div className={`h-3 w-3 rounded-full ${selectedEpicId === null ? 'bg-[var(--status-ready)] shadow-[0_0_8px_rgba(124,185,122,0.7)]' : 'bg-white/25'}`} />
-            <span className={cn(
-              "text-xs font-medium transition-colors",
-              selectedEpicId === null ? "text-[#9BD2CB]" : "text-[var(--color-text-muted)] group-hover:text-[var(--color-text-secondary)]"
-            )}>
-              Global Scope
-            </span>
-          </label>
-        </div>
-      </div>
-    </div>
+      </footer>
+    </aside>
   );
 }
 
diff --git a/src/components/shared/right-panel.tsx b/src/components/shared/right-panel.tsx
index 093dc0d..7895789 100644
--- a/src/components/shared/right-panel.tsx
+++ b/src/components/shared/right-panel.tsx
@@ -13,24 +13,22 @@ export interface RightPanelProps {
 
 export function RightPanel({ children, rail, isOpen: externalIsOpen }: RightPanelProps) {
   const { isMobile, isDesktop } = useResponsive();
-  const { panel, togglePanel } = useUrlState();
+  const { rightPanel, toggleRightPanel } = useUrlState();
   
-  const isOpen = externalIsOpen ?? (panel === 'open');
+  const isOpen = externalIsOpen ?? (rightPanel === 'open');
   
   // Calculate width based on content (Standard 17rem vs Chat Mode ~26rem)
   // If rail is present, we are in "Chat Mode" (Wide Panel + Rail)
   // If no rail, we are in "Activity Mode" (Standard Panel)
-  const panelWidth = isOpen ? (rail ? '26rem' : '17rem') : '0';
+  const panelWidth = isOpen ? '20.75rem' : '0';
 
   if (isDesktop) {
     return (
       <div
-        className="overflow-hidden transition-all duration-300 flex"
+        className="ui-shell-panel flex overflow-hidden transition-all duration-300"
         style={{
           width: panelWidth,
-          background:
-            'radial-gradient(circle_at_12%_8%,rgba(91,168,160,0.22),transparent_34%),radial-gradient(circle_at_88%_84%,rgba(212,165,116,0.2),transparent_30%),linear-gradient(180deg,rgba(50,50,58,0.98),rgba(40,42,54,0.98))',
-          boxShadow: isOpen ? '-24px 0 44px -26px rgba(0,0,0,0.85)' : 'none',
+          boxShadow: isOpen ? '-24px 0 40px -26px rgba(0,0,0,0.95), inset 1px 0 0 rgba(91,168,160,0.22)' : 'none',
         }}
         data-testid="right-panel-desktop"
       >
@@ -38,7 +36,12 @@ export function RightPanel({ children, rail, isOpen: externalIsOpen }: RightPane
           <>
             {/* Main Content (Chat or Activity) */}
             <div className="flex-1 min-w-0 h-full overflow-hidden flex flex-col">
-              <div className="flex-1 overflow-y-auto custom-scrollbar p-0">
+              <div className="border-l border-[color-mix(in_srgb,var(--ui-accent-info)_36%,var(--ui-border-soft))] bg-[linear-gradient(180deg,color-mix(in_srgb,var(--ui-bg-shell)_96%,black),color-mix(in_srgb,var(--ui-bg-panel)_90%,black))]">
+                <div className="px-3 py-2 border-b border-[var(--ui-border-soft)]">
+                  <p className="font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--ui-text-muted)]">Agent Pool Monitor</p>
+                </div>
+              </div>
+              <div className="flex-1 overflow-y-auto custom-scrollbar p-0 bg-[#08111d]">
                  {/* Remove default padding to allow edge-to-edge chat */}
                  {children || <span>Right Panel</span>}
               </div>
@@ -46,7 +49,13 @@ export function RightPanel({ children, rail, isOpen: externalIsOpen }: RightPane
 
             {/* Side Rail (Mini Activity - Only if provided) */}
             {rail && (
-              <div className="w-12 h-full flex-shrink-0 bg-[linear-gradient(180deg,rgba(0,0,0,0.24),rgba(0,0,0,0.36))] shadow-[-10px_0_20px_-18px_rgba(0,0,0,0.9)]">
+              <div
+                className="h-full w-10 flex-shrink-0 shadow-[-10px_0_20px_-18px_rgba(0,0,0,0.9)]"
+                style={{
+                  background: 'var(--ui-bg-shell)',
+                  borderLeft: '1px solid var(--ui-border-soft)',
+                }}
+              >
                 {rail}
               </div>
             )}
@@ -61,32 +70,46 @@ export function RightPanel({ children, rail, isOpen: externalIsOpen }: RightPane
   }
 
   const handleBackdropClick = () => {
-    togglePanel();
+    toggleRightPanel();
   };
 
   const handleCloseClick = () => {
-    togglePanel();
+    toggleRightPanel();
   };
 
   if (isMobile) {
     return (
       <div
         className="fixed inset-0 z-50"
-        style={{ backgroundColor: 'var(--color-bg-card)' }}
+        style={{
+          backgroundColor: 'var(--ui-bg-panel)',
+          paddingTop: 'env(safe-area-inset-top)',
+          paddingBottom: 'env(safe-area-inset-bottom)',
+          overscrollBehavior: 'contain',
+          touchAction: 'manipulation',
+          WebkitTapHighlightColor: 'rgba(0,0,0,0.08)',
+        }}
         data-testid="right-panel-mobile"
       >
-        <div className="flex justify-end p-4">
+        <div className="flex justify-end px-4 py-3">
           <button
             onClick={handleCloseClick}
             className="p-2 rounded-md hover:bg-white/10"
-            style={{ color: 'var(--color-text-secondary)' }}
+            style={{ color: 'var(--ui-text-muted)' }}
             data-testid="right-panel-close"
             aria-label="Close panel"
           >
             <X size={24} />
           </button>
         </div>
-        <div className="p-4 overflow-y-auto" style={{ height: 'calc(100% - 4rem)', color: 'var(--color-text-secondary)' }}>
+        <div
+          className="overflow-y-auto px-4 pb-4"
+          style={{
+            height: 'calc(100% - 4rem)',
+            color: 'var(--ui-text-primary)',
+            overscrollBehavior: 'contain',
+          }}
+        >
           {children || <span>Right Panel</span>}
         </div>
       </div>
@@ -106,7 +129,8 @@ export function RightPanel({ children, rail, isOpen: externalIsOpen }: RightPane
         style={{
           width: '17rem',
           background:
-            'radial-gradient(circle_at_12%_8%,rgba(91,168,160,0.22),transparent_34%),radial-gradient(circle_at_88%_84%,rgba(212,165,116,0.2),transparent_30%),linear-gradient(180deg,rgba(50,50,58,0.98),rgba(40,42,54,0.98))',
+            'linear-gradient(180deg, color-mix(in srgb, var(--ui-bg-panel) 86%, black), var(--ui-bg-panel))',
+          borderLeft: '1px solid var(--ui-border-soft)',
           boxShadow: '-24px 0 44px -26px rgba(0,0,0,0.85)',
         }}
         data-testid="right-panel-tablet"
@@ -115,14 +139,14 @@ export function RightPanel({ children, rail, isOpen: externalIsOpen }: RightPane
           <button
             onClick={handleCloseClick}
             className="p-2 rounded-md hover:bg-white/10"
-            style={{ color: 'var(--color-text-secondary)' }}
+            style={{ color: 'var(--ui-text-muted)' }}
             data-testid="right-panel-close"
             aria-label="Close panel"
           >
             <X size={24} />
           </button>
         </div>
-        <div className="p-4" style={{ color: 'var(--color-text-secondary)' }}>
+        <div className="p-4" style={{ color: 'var(--ui-text-primary)' }}>
           {children || <span>Right Panel</span>}
         </div>
       </div>
diff --git a/src/components/shared/thread-drawer.tsx b/src/components/shared/thread-drawer.tsx
index c54a5bd..f10611d 100644
--- a/src/components/shared/thread-drawer.tsx
+++ b/src/components/shared/thread-drawer.tsx
@@ -12,6 +12,7 @@ import { buildEditableIssueDraft, buildIssueUpdatePayload, validateEditableIssue
 import type { UpdateMutationPayload } from '../../lib/mutations';
 import type { BeadIssue } from '../../lib/types';
 import { ThreadView, type ThreadItem } from './thread-view';
+import { useResponsive } from '../../hooks/use-responsive';
 
 interface ThreadDrawerProps {
   isOpen: boolean;
@@ -20,34 +21,20 @@ interface ThreadDrawerProps {
   id: string;
   items?: ThreadItem[];
   embedded?: boolean;
+  takeover?: boolean;
   issue?: BeadIssue | null;
   projectRoot?: string;
   onIssueUpdated?: (issueId: string) => Promise<void> | void;
 }
 
-const SAMPLE_ITEMS: ThreadItem[] = [
-  {
-    id: '1',
-    type: 'comment',
-    author: 'sarah.lee',
-    content: 'Pushed a first pass for the left rail hierarchy. Need readability check on status chips.',
-    timestamp: new Date(Date.now() - 6 * 60 * 1000),
-  },
-  {
-    id: '2',
-    type: 'status_change',
-    from: 'open',
-    to: 'in_progress',
-    timestamp: new Date(Date.now() - 31 * 60 * 1000),
-  },
-  {
-    id: '3',
-    type: 'protocol_event',
-    event: 'HANDOFF',
-    content: 'Swarm integrator picked up follow-up work.',
-    timestamp: new Date(Date.now() - 55 * 60 * 1000),
-  },
-];
+interface CommentFromApi {
+  id: string;
+  bead_id: string;
+  actor: string;
+  kind: 'comment';
+  text: string;
+  timestamp: string;
+}
 
 const STATUS_OPTIONS: EditableIssueDraft['status'][] = ['open', 'in_progress', 'blocked', 'deferred', 'closed'];
 const PRIORITY_OPTIONS = [0, 1, 2, 3, 4] as const;
@@ -65,6 +52,19 @@ async function postIssueUpdate(body: UpdateMutationPayload): Promise<void> {
   }
 }
 
+async function postComment(projectRoot: string, id: string, text: string): Promise<void> {
+  const response = await fetch('/api/beads/comment', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ projectRoot, id, text }),
+  });
+
+  const payload = (await response.json()) as { ok: boolean; error?: { message?: string } };
+  if (!response.ok || !payload.ok) {
+    throw new Error(payload.error?.message ?? 'Comment failed');
+  }
+}
+
 function saveStateTone(state: 'ready' | 'saving' | 'saved' | 'error'): string {
   if (state === 'saving') return 'border-[#5BA8A0]/50 bg-[#5BA8A0]/20 text-[#D6EEEA]';
   if (state === 'saved') return 'border-[#7CB97A]/50 bg-[#7CB97A]/20 text-[#D4ECD2]';
@@ -77,18 +77,48 @@ export function ThreadDrawer({
   onClose,
   title,
   id,
-  items = SAMPLE_ITEMS,
+  items: externalItems,
   embedded = false,
+  takeover = false,
   issue,
   projectRoot,
   onIssueUpdated,
 }: ThreadDrawerProps) {
+  const { isMobile } = useResponsive();
   const [comment, setComment] = useState('');
+  const [commentState, setCommentState] = useState<'ready' | 'sending' | 'sent' | 'error'>('ready');
   const [editMode, setEditMode] = useState(false);
   const [draft, setDraft] = useState<EditableIssueDraft | null>(issue ? buildEditableIssueDraft(issue) : null);
   const [fieldErrors, setFieldErrors] = useState<EditableIssueFieldErrors>({});
   const [saveError, setSaveError] = useState<string | null>(null);
   const [saveState, setSaveState] = useState<'ready' | 'saving' | 'saved' | 'error'>('ready');
+  const [comments, setComments] = useState<CommentFromApi[]>([]);
+  const [commentsLoading, setCommentsLoading] = useState(false);
+
+  // Fetch comments when drawer opens
+  useEffect(() => {
+    if (!isOpen || !id || !projectRoot) {
+      setComments([]);
+      return;
+    }
+
+    const fetchComments = async () => {
+      setCommentsLoading(true);
+      try {
+        const response = await fetch(`/api/beads/${id}/comments?projectRoot=${encodeURIComponent(projectRoot)}`);
+        const payload = (await response.json()) as { ok: boolean; comments?: CommentFromApi[] };
+        if (payload.ok && payload.comments) {
+          setComments(payload.comments);
+        }
+      } catch (error) {
+        console.error('Failed to fetch comments:', error);
+      } finally {
+        setCommentsLoading(false);
+      }
+    };
+
+    fetchComments();
+  }, [isOpen, id, projectRoot]);
 
   useEffect(() => {
     if (!issue) {
@@ -109,15 +139,32 @@ export function ThreadDrawer({
 
   const canEdit = Boolean(issue && projectRoot && draft);
 
+  // Convert comments to ThreadItems
+  const threadItems: ThreadItem[] = useMemo(() => {
+    const items: ThreadItem[] = comments.map(c => ({
+      id: c.id,
+      type: 'comment' as const,
+      author: c.actor,
+      content: c.text,
+      timestamp: new Date(c.timestamp),
+    }));
+    // Merge with any external items if provided
+    if (externalItems) {
+      items.push(...externalItems);
+    }
+    // Sort by timestamp descending
+    return items.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
+  }, [comments, externalItems]);
+
   const participants = useMemo(() => {
     const names = new Set<string>();
-    for (const item of items) {
+    for (const item of threadItems) {
       if (item.author && item.author.trim()) {
         names.add(item.author.trim());
       }
     }
     return Array.from(names).slice(0, 4);
-  }, [items]);
+  }, [threadItems]);
 
   const handleSave = async () => {
     if (!issue || !projectRoot || !draft) {
@@ -155,216 +202,301 @@ export function ThreadDrawer({
     }
   };
 
+  const handleCommentSubmit = async () => {
+    if (!projectRoot || !id || !comment.trim()) {
+      return;
+    }
+
+    setCommentState('sending');
+
+    try {
+      await postComment(projectRoot, id, comment.trim());
+      setComment('');
+      setCommentState('sent');
+      // Refresh comments
+      const response = await fetch(`/api/beads/${id}/comments?projectRoot=${encodeURIComponent(projectRoot)}`);
+      const payload = (await response.json()) as { ok: boolean; comments?: CommentFromApi[] };
+      if (payload.ok && payload.comments) {
+        setComments(payload.comments);
+      }
+      await onIssueUpdated?.(id);
+      setTimeout(() => setCommentState('ready'), 900);
+    } catch (error) {
+      console.error('Comment failed:', error);
+      setCommentState('error');
+      setTimeout(() => setCommentState('ready'), 2000);
+    }
+  };
+
   if (!isOpen) {
     return null;
   }
 
-  return (
-    <div
-      className="flex h-full flex-col"
-      style={{
+  const frameShellClass = takeover
+    ? 'mx-auto flex h-full w-full max-w-[1120px] flex-col overflow-hidden rounded-xl border border-[var(--ui-border-soft)] bg-[linear-gradient(180deg,color-mix(in_srgb,var(--ui-bg-card)_92%,black),color-mix(in_srgb,var(--ui-bg-shell)_88%,black))] shadow-[0_34px_60px_-40px_rgba(0,0,0,0.84)]'
+    : 'flex h-full flex-col';
+
+  const frameShellStyle = takeover
+    ? undefined
+    : {
         width: embedded ? '100%' : '26rem',
-        background: 'linear-gradient(180deg, #353535, #2E2E2E)',
+        background: 'linear-gradient(180deg, var(--ui-bg-card), var(--ui-bg-shell))',
         borderLeft: embedded ? 'none' : '1px solid var(--color-border-default)',
         boxShadow: embedded ? 'none' : '-20px 0 48px rgba(0,0,0,0.45)',
-      }}
+        overscrollBehavior: 'contain' as const,
+      };
+
+  const conversationSection = (
+    <section className="rounded-xl border border-[var(--ui-border-soft)] bg-[var(--ui-bg-shell)] p-3 shadow-[0_12px_28px_-22px_rgba(0,0,0,0.7)]">
+      <div className="mb-2 flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2 text-sm text-[var(--ui-text-primary)]">
+          <MessageSquareText className="h-4 w-4 text-[var(--ui-accent-info)]" />
+          Conversation
+        </div>
+        <div className="flex items-center gap-1">
+          {participants.map((name) => (
+            <span key={name} className="inline-flex h-6 items-center rounded-full border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] px-2 text-[11px] text-[var(--ui-text-muted)]">
+              {name}
+            </span>
+          ))}
+        </div>
+      </div>
+      <ThreadView items={threadItems} variant={takeover ? 'chat' : 'stack'} currentUser="you" />
+    </section>
+  );
+
+  const summarySection = (
+    <section className="rounded-xl border border-[var(--ui-border-soft)] bg-[var(--ui-bg-shell)] p-3 shadow-[0_14px_30px_-24px_rgba(0,0,0,0.75)]">
+      <div className="mb-3 flex items-center justify-between gap-2">
+        <p className="text-sm font-semibold text-[var(--ui-text-primary)]">Task Summary</p>
+        <Badge className={`rounded-full border px-2 py-0.5 text-[11px] ${saveStateTone(saveState)}`}>
+          {saveState}
+        </Badge>
+      </div>
+
+      {!issue ? (
+        <p className="text-sm text-[var(--ui-text-muted)]">No task details available for this thread context.</p>
+      ) : !editMode ? (
+        <div className="space-y-2 text-sm">
+          <p className="font-semibold text-[var(--ui-text-primary)]">{issue.title}</p>
+          <p className="text-[var(--ui-text-muted)]">{issue.description ?? 'No description provided.'}</p>
+          <div className="flex flex-wrap gap-2">
+            <Badge className="rounded-full border border-[var(--ui-accent-info)]/40 bg-[var(--ui-accent-info)]/20 text-[#d9f5ff]">{issue.status}</Badge>
+            <Badge className="rounded-full border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] text-[var(--ui-text-muted)]">P{issue.priority}</Badge>
+            <Badge className="rounded-full border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] text-[var(--ui-text-muted)]">{issue.issue_type}</Badge>
+            {issue.assignee ? <Badge className="rounded-full border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] text-[var(--ui-text-muted)]">@{issue.assignee}</Badge> : null}
+          </div>
+          <div className="pt-1">
+            <Button
+              onClick={() => setEditMode(true)}
+              disabled={!canEdit}
+              className="h-8 rounded-full bg-[var(--ui-accent-action-green)] px-4 text-[#081f12] hover:bg-[color-mix(in_srgb,var(--ui-accent-action-green)_86%,white)] disabled:opacity-40"
+            >
+              <Edit3 className="mr-2 h-3.5 w-3.5" /> Edit task
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="space-y-2.5">
+          <label className="block text-xs text-[#9F9F9F]">
+            Title
+            <Input
+              value={draft?.title ?? ''}
+              onChange={(event) => setDraft((current) => (current ? { ...current, title: event.target.value } : current))}
+              className="mt-1 border-[#4A4A4A] bg-[#3B3B3B] text-white"
+            />
+          </label>
+          {fieldErrors.title ? <p className="text-xs text-[#EAA7A0]">{fieldErrors.title}</p> : null}
+
+          <label className="block text-xs text-[#9F9F9F]">
+            Description
+            <textarea
+              value={draft?.description ?? ''}
+              onChange={(event) => setDraft((current) => (current ? { ...current, description: event.target.value } : current))}
+              className="mt-1 min-h-20 w-full rounded-md border border-[#4A4A4A] bg-[#3B3B3B] px-3 py-2 text-sm text-white outline-none ring-offset-0 placeholder:text-[#808080] focus:border-[#5BA8A0]"
+            />
+          </label>
+
+          <div className="grid gap-2 sm:grid-cols-2">
+            <label className="block text-xs text-[#9F9F9F]">
+              Assignee
+              <Input
+                value={draft?.assignee ?? ''}
+                onChange={(event) => setDraft((current) => (current ? { ...current, assignee: event.target.value } : current))}
+                className="mt-1 border-[#4A4A4A] bg-[#3B3B3B] text-white"
+              />
+            </label>
+            <label className="block text-xs text-[#9F9F9F]">
+              Issue type
+              <Input
+                value={draft?.issueType ?? ''}
+                onChange={(event) => setDraft((current) => (current ? { ...current, issueType: event.target.value } : current))}
+                className="mt-1 border-[#4A4A4A] bg-[#3B3B3B] text-white"
+              />
+            </label>
+          </div>
+
+          <label className="block text-xs text-[#9F9F9F]">
+            Labels
+            <Input
+              value={draft?.labelsInput ?? ''}
+              onChange={(event) => setDraft((current) => (current ? { ...current, labelsInput: event.target.value } : current))}
+              className="mt-1 border-[#4A4A4A] bg-[#3B3B3B] text-white"
+            />
+          </label>
+          {fieldErrors.labelsInput ? <p className="text-xs text-[#EAA7A0]">{fieldErrors.labelsInput}</p> : null}
+
+          <div>
+            <p className="mb-1 text-xs text-[#9F9F9F]">Status</p>
+            <div className="flex flex-wrap gap-2">
+              {STATUS_OPTIONS.map((status) => (
+                <button
+                  key={status}
+                  type="button"
+                  onClick={() => setDraft((current) => (current ? { ...current, status } : current))}
+                  className={`rounded-full border px-2 py-1 text-xs ${draft?.status === status ? 'border-[#5BA8A0] bg-[#5BA8A0]/20 text-[#D7ECE9]' : 'border-[#4A4A4A] bg-[#3A3A3A] text-[#B8B8B8]'}`}
+                >
+                  {status}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <p className="mb-1 text-xs text-[#9F9F9F]">Priority</p>
+            <div className="flex flex-wrap gap-2">
+              {PRIORITY_OPTIONS.map((priority) => (
+                <button
+                  key={priority}
+                  type="button"
+                  onClick={() => setDraft((current) => (current ? { ...current, priority } : current))}
+                  className={`rounded-full border px-2 py-1 text-xs ${draft?.priority === priority ? 'border-[#D4A574] bg-[#D4A574]/20 text-[#EBD7BD]' : 'border-[#4A4A4A] bg-[#3A3A3A] text-[#B8B8B8]'}`}
+                >
+                  P{priority}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {saveError ? <p className="text-xs text-[#EAA7A0]">{saveError}</p> : null}
+
+          <div className="flex justify-end gap-2 pt-1">
+            <Button
+              variant="outline"
+              onClick={() => setEditMode(false)}
+              className="h-8 rounded-full border-[#4A4A4A] bg-[#3B3B3B] px-4 text-[#C0C0C0] hover:bg-[#444444]"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={() => void handleSave()}
+              className="h-8 rounded-full bg-[#7CB97A] px-4 text-[#1A1A1A] hover:bg-[#8ECC8C]"
+            >
+              Save
+            </Button>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+
+  return (
+    <div
+      className={takeover ? 'h-full p-4 md:p-6' : 'h-full'}
+      style={
+        isMobile
+          ? {
+              paddingTop: takeover ? 'max(1rem, env(safe-area-inset-top))' : undefined,
+              paddingBottom: takeover ? 'max(1rem, env(safe-area-inset-bottom))' : undefined,
+            }
+          : undefined
+      }
     >
-      <header className="border-b border-[#4A4A4A] bg-[#363636]/90 px-4 py-3">
+      <div className={frameShellClass} style={frameShellStyle}>
+        <header className="border-b border-[var(--ui-border-soft)] bg-[var(--ui-bg-shell)] px-4 py-3">
         <div className="flex items-start justify-between gap-3">
           <div className="min-w-0">
-            <p className="text-xs font-semibold uppercase tracking-[0.14em] text-[#8F8F8F]">Open Thread</p>
-            <h2 className="truncate text-lg font-semibold text-white" title={title}>{title}</h2>
-            <p className="text-xs text-[#A5A5A5]">{id} · {items.length} events</p>
+            <div className="mb-1 flex items-center gap-2">
+              <p className="font-mono text-xs font-semibold text-[var(--ui-accent-info)]">#{id}</p>
+              <span className="rounded-full border border-[var(--ui-accent-ready)]/45 bg-[var(--ui-accent-ready)]/20 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.1em] text-[#d8ffe8]">
+                In Progress
+              </span>
+            </div>
+            <h2 className="truncate text-[40px] font-semibold leading-[1.12] tracking-[-0.02em] text-[var(--ui-text-primary)]" title={title}>{title}</h2>
+            <p className="mt-1 text-xs text-[var(--ui-text-muted)]">{threadItems.length} events</p>
           </div>
           <Button
             onClick={onClose}
             variant="ghost"
-            className="h-8 w-8 rounded-full p-0 text-[#B8B8B8] hover:bg-white/10 hover:text-white"
+            className="h-8 w-8 rounded-full p-0 text-[var(--ui-text-muted)] hover:bg-white/10 hover:text-[var(--ui-text-primary)]"
             aria-label="Close thread"
           >
             <X className="h-4 w-4" />
           </Button>
         </div>
-      </header>
+        </header>
 
-      <ScrollArea className="flex-1">
-        <div className="space-y-3 p-4">
-          <section className="rounded-xl border border-[#4A4A4A] bg-[#303030] p-3 shadow-[0_12px_28px_-22px_rgba(0,0,0,0.7)]">
-            <div className="mb-2 flex items-center justify-between gap-3">
-              <div className="flex items-center gap-2 text-sm text-[#DCDCDC]">
-                <MessageSquareText className="h-4 w-4 text-[#5BA8A0]" />
-                Conversation
-              </div>
-              <div className="flex items-center gap-1">
-                {participants.map((name) => (
-                  <span key={name} className="inline-flex h-6 items-center rounded-full border border-white/10 bg-white/5 px-2 text-[11px] text-[#CFCFCF]">
-                    {name}
-                  </span>
-                ))}
-              </div>
-            </div>
-            <ThreadView items={items} />
-          </section>
-
-          <section className="rounded-xl border border-[#4A4A4A] bg-[#303030] p-3 shadow-[0_14px_30px_-24px_rgba(0,0,0,0.75)]">
-            <div className="mb-3 flex items-center justify-between gap-2">
-              <p className="text-sm font-semibold text-white">Task summary</p>
-              <Badge className={`rounded-full border px-2 py-0.5 text-[11px] ${saveStateTone(saveState)}`}>
-                {saveState}
-              </Badge>
-            </div>
-
-            {!issue ? (
-              <p className="text-sm text-[#9E9E9E]">No task details available for this thread context.</p>
-            ) : !editMode ? (
-              <div className="space-y-2 text-sm">
-                <p className="font-semibold text-[#F4F4F4]">{issue.title}</p>
-                <p className="text-[#B8B8B8]">{issue.description ?? 'No description provided.'}</p>
-                <div className="flex flex-wrap gap-2">
-                  <Badge className="rounded-full border border-[#5BA8A0]/40 bg-[#5BA8A0]/20 text-[#CFE7E3]">{issue.status}</Badge>
-                  <Badge className="rounded-full border border-white/10 bg-white/5 text-[#CFCFCF]">P{issue.priority}</Badge>
-                  <Badge className="rounded-full border border-white/10 bg-white/5 text-[#CFCFCF]">{issue.issue_type}</Badge>
-                  {issue.assignee ? <Badge className="rounded-full border border-white/10 bg-white/5 text-[#CFCFCF]">@{issue.assignee}</Badge> : null}
-                </div>
-                <div className="pt-1">
-                  <Button
-                    onClick={() => setEditMode(true)}
-                    disabled={!canEdit}
-                    className="h-8 rounded-full bg-[#7CB97A] px-4 text-[#1A1A1A] hover:bg-[#8FCC8D] disabled:opacity-40"
-                  >
-                    <Edit3 className="mr-2 h-3.5 w-3.5" /> Edit task
-                  </Button>
-                </div>
-              </div>
+        <ScrollArea className="flex-1">
+          <div className="space-y-3 p-4">
+            {takeover ? (
+              <>
+                {summarySection}
+                {conversationSection}
+              </>
             ) : (
-              <div className="space-y-2.5">
-                <label className="block text-xs text-[#9F9F9F]">
-                  Title
-                  <Input
-                    value={draft?.title ?? ''}
-                    onChange={(event) => setDraft((current) => (current ? { ...current, title: event.target.value } : current))}
-                    className="mt-1 border-[#4A4A4A] bg-[#3B3B3B] text-white"
-                  />
-                </label>
-                {fieldErrors.title ? <p className="text-xs text-[#EAA7A0]">{fieldErrors.title}</p> : null}
-
-                <label className="block text-xs text-[#9F9F9F]">
-                  Description
-                  <textarea
-                    value={draft?.description ?? ''}
-                    onChange={(event) => setDraft((current) => (current ? { ...current, description: event.target.value } : current))}
-                    className="mt-1 min-h-20 w-full rounded-md border border-[#4A4A4A] bg-[#3B3B3B] px-3 py-2 text-sm text-white outline-none ring-offset-0 placeholder:text-[#808080] focus:border-[#5BA8A0]"
-                  />
-                </label>
-
-                <div className="grid gap-2 sm:grid-cols-2">
-                  <label className="block text-xs text-[#9F9F9F]">
-                    Assignee
-                    <Input
-                      value={draft?.assignee ?? ''}
-                      onChange={(event) => setDraft((current) => (current ? { ...current, assignee: event.target.value } : current))}
-                      className="mt-1 border-[#4A4A4A] bg-[#3B3B3B] text-white"
-                    />
-                  </label>
-                  <label className="block text-xs text-[#9F9F9F]">
-                    Issue type
-                    <Input
-                      value={draft?.issueType ?? ''}
-                      onChange={(event) => setDraft((current) => (current ? { ...current, issueType: event.target.value } : current))}
-                      className="mt-1 border-[#4A4A4A] bg-[#3B3B3B] text-white"
-                    />
-                  </label>
-                </div>
-
-                <label className="block text-xs text-[#9F9F9F]">
-                  Labels
-                  <Input
-                    value={draft?.labelsInput ?? ''}
-                    onChange={(event) => setDraft((current) => (current ? { ...current, labelsInput: event.target.value } : current))}
-                    className="mt-1 border-[#4A4A4A] bg-[#3B3B3B] text-white"
-                  />
-                </label>
-                {fieldErrors.labelsInput ? <p className="text-xs text-[#EAA7A0]">{fieldErrors.labelsInput}</p> : null}
-
-                <div>
-                  <p className="mb-1 text-xs text-[#9F9F9F]">Status</p>
-                  <div className="flex flex-wrap gap-2">
-                    {STATUS_OPTIONS.map((status) => (
-                      <button
-                        key={status}
-                        type="button"
-                        onClick={() => setDraft((current) => (current ? { ...current, status } : current))}
-                        className={`rounded-full border px-2 py-1 text-xs ${draft?.status === status ? 'border-[#5BA8A0] bg-[#5BA8A0]/20 text-[#D7ECE9]' : 'border-[#4A4A4A] bg-[#3A3A3A] text-[#B8B8B8]'}`}
-                      >
-                        {status}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-
-                <div>
-                  <p className="mb-1 text-xs text-[#9F9F9F]">Priority</p>
-                  <div className="flex flex-wrap gap-2">
-                    {PRIORITY_OPTIONS.map((priority) => (
-                      <button
-                        key={priority}
-                        type="button"
-                        onClick={() => setDraft((current) => (current ? { ...current, priority } : current))}
-                        className={`rounded-full border px-2 py-1 text-xs ${draft?.priority === priority ? 'border-[#D4A574] bg-[#D4A574]/20 text-[#EBD7BD]' : 'border-[#4A4A4A] bg-[#3A3A3A] text-[#B8B8B8]'}`}
-                      >
-                        P{priority}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-
-                {saveError ? <p className="text-xs text-[#EAA7A0]">{saveError}</p> : null}
-
-                <div className="flex justify-end gap-2 pt-1">
-                  <Button
-                    variant="outline"
-                    onClick={() => setEditMode(false)}
-                    className="h-8 rounded-full border-[#4A4A4A] bg-[#3B3B3B] px-4 text-[#C0C0C0] hover:bg-[#444444]"
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    onClick={() => void handleSave()}
-                    className="h-8 rounded-full bg-[#7CB97A] px-4 text-[#1A1A1A] hover:bg-[#8ECC8C]"
-                  >
-                    Save
-                  </Button>
-                </div>
-              </div>
+              <>
+                {conversationSection}
+                {summarySection}
+              </>
             )}
-          </section>
-        </div>
-      </ScrollArea>
+          </div>
+        </ScrollArea>
 
-      <footer className="border-t border-[#4A4A4A] bg-[#2F2F2F] p-3">
-        <div className="flex items-center gap-2 rounded-xl border border-[#4A4A4A] bg-[#3A3A3A] p-1">
-          <Input
-            value={comment}
-            onChange={(event) => setComment(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter' && !event.shiftKey && comment.trim()) {
-                event.preventDefault();
-                setComment('');
-              }
-            }}
-            placeholder="Reply to thread..."
-            className="border-0 bg-transparent text-white placeholder:text-[#888888]"
-          />
-          <Button
-            type="button"
-            className="h-8 rounded-full bg-[#5BA8A0] px-3 text-[#1A1A1A] hover:bg-[#6AB8AF]"
-            onClick={() => setComment('')}
-            disabled={!comment.trim()}
-          >
-            <Send className="h-3.5 w-3.5" />
-          </Button>
-        </div>
-      </footer>
+        <footer
+          className="border-t border-[var(--ui-border-soft)] bg-[var(--ui-bg-shell)] p-3"
+          style={
+            isMobile
+              ? {
+                  paddingBottom: 'max(0.75rem, env(safe-area-inset-bottom))',
+                  position: 'sticky',
+                  bottom: 0,
+                  zIndex: 10,
+                }
+              : undefined
+          }
+        >
+          <div className="flex items-center gap-2 rounded-xl border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] p-1">
+            <Input
+              value={comment}
+              onChange={(event) => setComment(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' && !event.shiftKey && comment.trim()) {
+                  event.preventDefault();
+                  void handleCommentSubmit();
+                }
+              }}
+              placeholder="Type a message to neighbors..."
+              className="border-0 bg-transparent text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)]"
+              autoComplete="off"
+              disabled={commentState === 'sending'}
+            />
+            <Button
+              type="button"
+              className="h-8 rounded-full bg-[var(--ui-accent-action-green)] px-3 text-[#082012] hover:bg-[color-mix(in_srgb,var(--ui-accent-action-green)_86%,white)] disabled:opacity-50"
+              onClick={() => void handleCommentSubmit()}
+              disabled={!comment.trim() || commentState === 'sending'}
+            >
+              <Send className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+          {commentState === 'error' && (
+            <p className="mt-1 text-xs text-[#EAA7A0]">Failed to send comment</p>
+          )}
+        </footer>
+      </div>
+      {takeover ? (
+        <div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_8%_10%,rgba(91,168,160,0.14),transparent_32%),radial-gradient(circle_at_92%_88%,rgba(212,165,116,0.16),transparent_30%)]" />
+      ) : null}
     </div>
   );
 }
diff --git a/src/components/shared/thread-view.tsx b/src/components/shared/thread-view.tsx
index be63ea7..faeda4f 100644
--- a/src/components/shared/thread-view.tsx
+++ b/src/components/shared/thread-view.tsx
@@ -19,6 +19,8 @@ export interface ThreadItem {
 
 interface ThreadViewProps {
   items: ThreadItem[];
+  variant?: 'stack' | 'chat';
+  currentUser?: string;
   onAddComment?: (text: string) => void;
 }
 
@@ -72,28 +74,40 @@ function getProtocolLabel(event?: string): string {
   }
 }
 
-function CommentItem({ item }: { item: ThreadItem }) {
+function CommentItem({ item, isSelf }: { item: ThreadItem; isSelf: boolean }) {
   return (
-    <div className="flex gap-3 py-3">
-      <Avatar className="h-8 w-8 flex-shrink-0">
-        <AvatarImage src={undefined} alt={item.author} />
-        <AvatarFallback className="bg-surface-muted text-text-body text-xs font-semibold">
-          {item.author ? getInitials(item.author) : '??'}
-        </AvatarFallback>
-      </Avatar>
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2 mb-1">
-          <span className="text-text-primary text-sm font-medium">
-            {item.author || 'Unknown'}
-          </span>
-          <span className="text-text-muted text-xs">
-            {formatRelativeTime(item.timestamp)}
-          </span>
+    <div className={cn('flex gap-3 py-3', isSelf && 'justify-end')}>
+      {!isSelf ? (
+        <Avatar className="h-8 w-8 flex-shrink-0">
+          <AvatarImage src={undefined} alt={item.author} />
+          <AvatarFallback className="bg-surface-muted text-text-body text-xs font-semibold">
+            {item.author ? getInitials(item.author) : '??'}
+          </AvatarFallback>
+        </Avatar>
+      ) : null}
+      <div className={cn('min-w-0 max-w-[80%]', isSelf && 'items-end')}>
+        <div className={cn('mb-1 flex items-center gap-2', isSelf && 'justify-end')}>
+          <span className="text-text-primary text-sm font-semibold">{item.author || 'Unknown'}</span>
+          <span className="font-mono text-[11px] text-text-muted">{formatRelativeTime(item.timestamp)}</span>
         </div>
-        <p className="text-text-secondary text-sm whitespace-pre-wrap break-words">
+        <p
+          className={cn(
+            'whitespace-pre-wrap break-words rounded-xl px-3 py-2 text-base leading-relaxed',
+            isSelf
+              ? 'bg-[color-mix(in_srgb,var(--ui-accent-ready)_24%,var(--ui-bg-panel))] text-[var(--ui-text-primary)]'
+              : 'bg-[color-mix(in_srgb,var(--ui-bg-panel)_88%,black)] text-text-secondary',
+          )}
+        >
           {item.content}
         </p>
       </div>
+      {isSelf ? (
+        <Avatar className="h-8 w-8 flex-shrink-0">
+          <AvatarFallback className="bg-[color-mix(in_srgb,var(--ui-accent-ready)_40%,var(--ui-bg-panel))] text-text-body text-xs font-semibold">
+            {item.author ? getInitials(item.author) : 'ME'}
+          </AvatarFallback>
+        </Avatar>
+      ) : null}
     </div>
   );
 }
@@ -133,7 +147,9 @@ function ProtocolEventItem({ item }: { item: ThreadItem }) {
   );
 }
 
-export function ThreadView({ items, onAddComment }: ThreadViewProps) {
+export function ThreadView({ items, variant = 'stack', currentUser = 'you', onAddComment }: ThreadViewProps) {
+  void onAddComment;
+
   return (
     <div className="space-y-1">
       {items.length === 0 ? (
@@ -143,7 +159,13 @@ export function ThreadView({ items, onAddComment }: ThreadViewProps) {
           {items.map((item) => {
             switch (item.type) {
               case 'comment':
-                return <CommentItem key={item.id} item={item} />;
+                return (
+                  <CommentItem
+                    key={item.id}
+                    item={item}
+                    isSelf={variant === 'chat' && (item.author ?? '').trim().toLowerCase() === currentUser.toLowerCase()}
+                  />
+                );
               case 'status_change':
                 return <StatusChangeItem key={item.id} item={item} />;
               case 'protocol_event':
diff --git a/src/components/shared/top-bar.tsx b/src/components/shared/top-bar.tsx
index ed0c445..a6178ff 100644
--- a/src/components/shared/top-bar.tsx
+++ b/src/components/shared/top-bar.tsx
@@ -1,124 +1,148 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { useUrlState, ViewType } from '../../hooks/use-url-state';
+import { LayoutGrid, Lock, Plus, Sidebar, SidebarClose } from 'lucide-react';
+import { useUrlState } from '../../hooks/use-url-state';
 import { useResponsive } from '../../hooks/use-responsive';
 
 export interface TopBarProps {
+  onCreateTask?: () => Promise<void> | void;
+  isCreatingTask?: boolean;
+  taskActionMessage?: string;
   children?: ReactNode;
+  totalTasks?: number;
+  criticalAlerts?: number;
+  idleCount?: number;
+  busyCount?: number;
 }
 
-export function TopBar({ children }: TopBarProps) {
-  const { view, setView, togglePanel } = useUrlState();
-  const { isDesktop } = useResponsive();
+interface MetricTileProps {
+  label: string;
+  value: number;
+  accent?: 'ready' | 'blocked' | 'info' | 'warning';
+}
 
-  const tabs: { id: ViewType; label: string }[] = [
-    { id: 'social', label: 'Social' },
-    { id: 'graph', label: 'Graph' },
-    { id: 'swarm', label: 'Swarm' },
-  ];
-
-  const showHamburger = !isDesktop;
+function MetricTile({ label, value, accent = 'info' }: MetricTileProps) {
+  const accentColor =
+    accent === 'ready'
+      ? 'var(--ui-accent-ready)'
+      : accent === 'blocked'
+        ? 'var(--ui-accent-blocked)'
+        : accent === 'warning'
+          ? 'var(--ui-accent-warning)'
+          : 'var(--ui-accent-info)';
 
   return (
-    <header
-      className="h-12 flex items-center justify-between px-4"
-      style={{
-        background:
-          'radial-gradient(circle_at_10%_50%,rgba(212,165,116,0.14),transparent_30%),radial-gradient(circle_at_90%_40%,rgba(91,168,160,0.14),transparent_30%),var(--color-bg-card)',
-        boxShadow: '0 14px 22px -20px rgba(0,0,0,0.85)',
-      }}
-      data-testid="top-bar"
-    >
-      <div className="flex items-center gap-2">
-        {showHamburger && (
-          <button
-            onClick={togglePanel}
-            className="p-2 transition-colors hover:text-[var(--color-text-primary)]"
-            style={{ color: 'var(--color-text-secondary)' }}
-            aria-label="Open menu"
-            data-testid="hamburger-button"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <line x1="3" y1="12" x2="21" y2="12" />
-              <line x1="3" y1="6" x2="21" y2="6" />
-              <line x1="3" y1="18" x2="21" y2="18" />
-            </svg>
-          </button>
-        )}
-        <nav className="flex items-center gap-1" role="tablist">
-          {tabs.map((tab) => {
-            const isActive = view === tab.id;
-            return (
-              <button
-                key={tab.id}
-                onClick={() => setView(tab.id)}
-                role="tab"
-                aria-selected={isActive}
-                className={`px-4 py-2 text-sm transition-colors rounded-md ${
-                  isActive
-                    ? 'font-bold shadow-[inset_0_-2px_0_var(--color-accent-green),0_10px_18px_-14px_rgba(0,0,0,0.8)] bg-white/[0.03]'
-                    : 'font-normal hover:text-[var(--color-text-primary)]'
-                }`}
-                style={{
-                  color: isActive ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',
-                }}
-                data-testid={`tab-${tab.id}`}
-              >
-                {tab.label}
-              </button>
-            );
-          })}
-        </nav>
+    <div className="hidden items-center gap-2 rounded-md border border-[var(--ui-border-soft)] bg-[color-mix(in_srgb,var(--ui-bg-panel)_84%,black)] px-2.5 py-1 text-xs md:inline-flex">
+      <p className="font-mono text-[10px] uppercase tracking-[0.13em] text-[var(--ui-text-muted)]">{label}</p>
+      <p className="font-mono text-sm leading-none text-[var(--ui-text-primary)]">{value}</p>
+      <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: accentColor }} />
+    </div>
+  );
+}
+
+export function TopBar({
+  onCreateTask,
+  isCreatingTask = false,
+  taskActionMessage,
+  children,
+  totalTasks = 0,
+  criticalAlerts = 0,
+  idleCount = 0,
+  busyCount = 0,
+}: TopBarProps) {
+  const { leftPanel, toggleLeftPanel, rightPanel, toggleRightPanel, blockedOnly, toggleBlockedOnly } = useUrlState();
+  const { isDesktop } = useResponsive();
+
+  return (
+    <header className="ui-shell-topbar flex h-[var(--topbar-height)] items-center justify-between border-b border-[var(--ui-border-soft)]" data-testid="top-bar">
+      <div className="flex min-w-0 items-center">
+        <button
+          type="button"
+          onClick={toggleLeftPanel}
+          className="ml-3 mr-2 inline-flex h-8 w-8 items-center justify-center rounded-md text-[var(--ui-text-muted)] transition-colors hover:bg-white/5 hover:text-[var(--ui-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)]"
+          aria-label={leftPanel === 'open' ? 'Collapse Sidebar' : 'Expand Sidebar'}
+          aria-pressed={leftPanel === 'open'}
+          data-testid="hamburger-button"
+        >
+          {leftPanel === 'open' ? <SidebarClose className="h-4 w-4" aria-hidden="true" /> : <Sidebar className="h-4 w-4" aria-hidden="true" />}
+        </button>
+
+        <div className="mr-3 flex min-w-[210px] items-center gap-2 border-r border-[var(--ui-border-soft)] px-2 py-2">
+          <div className="flex h-9 w-9 items-center justify-center rounded-md bg-[color-mix(in_srgb,var(--ui-accent-ready)_24%,var(--ui-bg-panel))] text-[var(--ui-accent-ready)]">
+            <LayoutGrid className="h-5 w-5" aria-hidden="true" />
+          </div>
+          <div>
+            <p className="text-sm font-semibold uppercase tracking-[0.04em] text-[var(--ui-text-primary)]">Command Grid</p>
+            <p className="font-mono text-[10px] text-[var(--ui-text-muted)]">v2.4.0-stable</p>
+          </div>
+        </div>
+
+        <div className="hidden items-center gap-2 pl-2 md:flex">
+          <MetricTile label="Total" value={totalTasks} accent="ready" />
+          <MetricTile label="Blocked" value={criticalAlerts} accent="blocked" />
+          <MetricTile label="Busy" value={busyCount} accent="warning" />
+          <MetricTile label="Idle" value={idleCount} accent="info" />
+        </div>
       </div>
 
-      <div className="flex items-center gap-3">
-        {children || (
+      <div className="mr-3 flex items-center gap-2">
+        {children ?? (
           <>
-            <input
-              type="text"
-              placeholder="Filter..."
-              className="px-3 py-1.5 text-sm rounded focus:outline-none"
-              style={{
-                backgroundColor: 'var(--color-bg-input)',
-                color: 'var(--color-text-primary)',
-                boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 14px -12px rgba(0,0,0,0.85)',
-              }}
-              data-testid="filter-input"
-            />
             <button
-              className="p-2 transition-colors hover:text-[var(--color-text-primary)]"
-              style={{ color: 'var(--color-text-secondary)' }}
-              aria-label="Settings"
-              data-testid="settings-button"
+              type="button"
+              onClick={toggleBlockedOnly}
+              aria-pressed={blockedOnly}
+              className="inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-xs font-semibold uppercase tracking-[0.11em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)]"
+              style={{
+                borderColor: blockedOnly
+                  ? 'color-mix(in srgb, var(--ui-accent-blocked) 78%, transparent)'
+                  : 'var(--ui-border-soft)',
+                backgroundColor: blockedOnly
+                  ? 'color-mix(in srgb, var(--ui-accent-blocked) 20%, var(--ui-bg-panel))'
+                  : 'color-mix(in srgb, var(--ui-bg-panel) 88%, black)',
+                color: blockedOnly ? '#ffd4dd' : 'var(--ui-text-primary)',
+              }}
+              data-testid="blocked-items-button"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <circle cx="12" cy="12" r="3" />
-                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
-              </svg>
+              <Lock className="h-3.5 w-3.5" aria-hidden="true" />
+              Blocked Items
+              <span className="rounded-full bg-[color-mix(in_srgb,var(--ui-accent-blocked)_84%,black)] px-1.5 py-0.5 font-mono text-[10px] text-[#fff0f3]">
+                {criticalAlerts}
+              </span>
+            </button>
+
+            <button
+              type="button"
+              onClick={() => {
+                void onCreateTask?.();
+              }}
+              disabled={isCreatingTask}
+              className="inline-flex items-center gap-2 rounded-xl border border-[color-mix(in_srgb,var(--ui-accent-ready)_80%,black)] bg-[var(--ui-accent-action-green)] px-4 py-2 text-xs font-semibold uppercase tracking-[0.11em] text-[#072514] transition-colors hover:bg-[color-mix(in_srgb,var(--ui-accent-action-green)_84%,white)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)] disabled:opacity-60"
+              data-testid="new-task-button"
+            >
+              <Plus className="h-3.5 w-3.5" aria-hidden="true" />
+              {isCreatingTask ? 'Creating…' : 'New Task'}
             </button>
           </>
         )}
+
+        {isDesktop ? (
+          <button
+            type="button"
+            onClick={toggleRightPanel}
+            className="inline-flex h-8 w-8 items-center justify-center rounded-md text-[var(--ui-text-muted)] transition-colors hover:bg-white/5 hover:text-[var(--ui-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)]"
+            aria-label={rightPanel === 'open' ? 'Collapse Right Sidebar' : 'Expand Right Sidebar'}
+            aria-pressed={rightPanel === 'open'}
+            data-testid="settings-button"
+          >
+            <Sidebar className="h-4 w-4" aria-hidden="true" />
+          </button>
+        ) : null}
+
+        <span className="sr-only" aria-live="polite">
+          {taskActionMessage ?? ''}
+        </span>
       </div>
     </header>
   );
diff --git a/src/components/shared/unified-shell.tsx b/src/components/shared/unified-shell.tsx
index 5cf7ddf..3d80fce 100644
--- a/src/components/shared/unified-shell.tsx
+++ b/src/components/shared/unified-shell.tsx
@@ -115,6 +115,7 @@ export function UnifiedShell({
       return (
         <SwarmWorkspace
           selectedMissionId={swarmId ?? undefined}
+          issues={filteredIssues}
         />
       );
     }
diff --git a/src/components/social/social-card.tsx b/src/components/social/social-card.tsx
index 77c8d1c..ee88a21 100644
--- a/src/components/social/social-card.tsx
+++ b/src/components/social/social-card.tsx
@@ -1,4 +1,4 @@
-import type { MouseEventHandler } from 'react';
+import type { KeyboardEvent, MouseEventHandler } from 'react';
 import { Activity, Clock3, GitBranch, Link2, MessageCircle, Orbit } from 'lucide-react';
 
 import { Badge } from '@/components/ui/badge';
@@ -20,67 +20,90 @@ interface SocialCardProps {
   dependencyCount?: number;
   commentCount?: number;
   unreadCount?: number;
+  blockedByDetails?: Array<{ id: string; title: string; epic?: string }>;
+  unblocksDetails?: Array<{ id: string; title: string; epic?: string }>;
 }
 
-type StatusTone = {
-  accent: string;
-  glow: string;
-  badgeClass: string;
-  surface: string;
-  accentChip: string;
-};
+function handleCardKeyDown(event: KeyboardEvent<HTMLDivElement>, onClick?: MouseEventHandler<HTMLDivElement>) {
+  if (!onClick) return;
+  if (event.key !== 'Enter' && event.key !== ' ') return;
+  event.preventDefault();
+  onClick(event as unknown as Parameters<MouseEventHandler<HTMLDivElement>>[0]);
+}
 
-const STATUS_TONES: Record<SocialCardData['status'], StatusTone> = {
-  ready: {
-    accent: '#7CB97A',
-    glow: 'rgba(124,185,122,0.26)',
-    badgeClass: 'bg-[#7CB97A]/26 text-[#DCEED8] shadow-[0_8px_16px_-12px_rgba(0,0,0,0.8)]',
-    surface:
-      'radial-gradient(circle at 80% 78%, rgba(124,185,122,0.46), transparent 76%), radial-gradient(circle at 8% 6%, rgba(124,185,122,0.26), transparent 68%), linear-gradient(145deg, rgba(45,78,45,0.99), rgba(35,62,35,0.99))',
-    accentChip: 'bg-[#7CB97A]/18 text-[#D2E4CE] shadow-[0_8px_16px_-12px_rgba(0,0,0,0.8)]',
-  },
-  in_progress: {
-    accent: '#D4A574',
-    glow: 'rgba(212,165,116,0.28)',
-    badgeClass: 'bg-[#D4A574]/28 text-[#EED9C1] shadow-[0_8px_16px_-12px_rgba(0,0,0,0.8)]',
-    surface:
-      'radial-gradient(circle at 80% 78%, rgba(212,165,116,0.48), transparent 76%), radial-gradient(circle at 8% 6%, rgba(212,165,116,0.28), transparent 68%), linear-gradient(145deg, rgba(86,64,40,0.99), rgba(68,49,30,0.99))',
-    accentChip: 'bg-[#D4A574]/20 text-[#E0C6A7] shadow-[0_8px_16px_-12px_rgba(0,0,0,0.8)]',
-  },
-  blocked: {
-    accent: '#C97A7A',
-    glow: 'rgba(201,122,122,0.26)',
-    badgeClass: 'bg-[#C97A7A]/28 text-[#EDD3D3] shadow-[0_8px_16px_-12px_rgba(0,0,0,0.8)]',
-    surface:
-      'radial-gradient(circle at 80% 78%, rgba(201,122,122,0.46), transparent 76%), radial-gradient(circle at 8% 6%, rgba(201,122,122,0.27), transparent 68%), linear-gradient(145deg, rgba(76,46,46,0.99), rgba(60,36,36,0.99))',
-    accentChip: 'bg-[#C97A7A]/18 text-[#E1C0C0] shadow-[0_8px_16px_-12px_rgba(0,0,0,0.8)]',
-  },
-  closed: {
-    accent: 'var(--status-closed)',
-    glow: 'rgba(136,136,136,0.16)',
-    badgeClass: 'bg-[#888888]/26 text-[#CECECE] shadow-[0_8px_16px_-12px_rgba(0,0,0,0.8)]',
-    surface:
-      'radial-gradient(circle at 80% 78%, rgba(136,136,136,0.32), transparent 76%), radial-gradient(circle at 8% 6%, rgba(136,136,136,0.16), transparent 68%), linear-gradient(145deg, rgba(56,56,56,0.99), rgba(44,44,44,0.99))',
-    accentChip: 'bg-[#888888]/16 text-[#BEBEBE] shadow-[0_8px_16px_-12px_rgba(0,0,0,0.8)]',
-  },
-};
-
-function renderDependencyPreview(ids: string[], toneClass: string, label: string) {
-  if (ids.length === 0) {
-    return null;
+function statusVisual(status: SocialCardData['status']) {
+  if (status === 'blocked') {
+    return {
+      border: 'color-mix(in srgb, var(--ui-accent-blocked) 50%, var(--ui-border-soft))',
+      cardBg:
+        'linear-gradient(160deg, color-mix(in srgb, var(--ui-accent-blocked) 20%, #1a0f15), color-mix(in srgb, var(--ui-bg-shell) 92%, black))',
+      badgeBg: 'color-mix(in srgb, var(--ui-accent-blocked) 24%, transparent)',
+      badgeText: '#ffd5df',
+      chipText: 'Blocked',
+    };
   }
 
+  if (status === 'in_progress') {
+    return {
+      border: 'color-mix(in srgb, var(--ui-accent-warning) 50%, var(--ui-border-soft))',
+      cardBg:
+        'linear-gradient(160deg, color-mix(in srgb, var(--ui-accent-warning) 16%, #1a1510), color-mix(in srgb, var(--ui-bg-shell) 92%, black))',
+      badgeBg: 'color-mix(in srgb, var(--ui-accent-warning) 24%, transparent)',
+      badgeText: '#ffe5c7',
+      chipText: 'Active',
+    };
+  }
+
+  if (status === 'ready') {
+    return {
+      border: 'color-mix(in srgb, var(--ui-accent-ready) 50%, var(--ui-border-soft))',
+      cardBg:
+        'linear-gradient(160deg, color-mix(in srgb, var(--ui-accent-ready) 16%, #101a15), color-mix(in srgb, var(--ui-bg-shell) 92%, black))',
+      badgeBg: 'color-mix(in srgb, var(--ui-accent-ready) 24%, transparent)',
+      badgeText: '#d6ffe7',
+      chipText: 'Ready',
+    };
+  }
+
+  return {
+    border: 'var(--ui-border-strong)',
+    cardBg: 'linear-gradient(160deg, color-mix(in srgb, var(--ui-bg-card) 95%, black), color-mix(in srgb, var(--ui-bg-shell) 90%, black))',
+    badgeBg: 'color-mix(in srgb, var(--ui-border-strong) 24%, transparent)',
+    badgeText: 'var(--ui-text-muted)',
+    chipText: 'Closed',
+  };
+}
+
+function dependencyPanel(
+  title: string,
+  color: string,
+  details: Array<{ id: string; title: string; epic?: string }>,
+) {
+  if (details.length === 0) return null;
+
   return (
-    <div className="min-w-0 rounded-lg bg-black/20 px-2 py-1.5 shadow-[0_10px_18px_-14px_rgba(0,0,0,0.85)]">
-      <p className={cn('mb-1 text-[10px] font-semibold uppercase tracking-[0.12em]', toneClass)}>{label}</p>
-      <div className="flex flex-wrap gap-1">
-        {ids.slice(0, 2).map((id) => (
-          <span key={id} className="rounded-md bg-white/10 px-1.5 py-0.5 font-mono text-[10px] text-[#DCDCDC] shadow-[0_8px_12px_-12px_rgba(0,0,0,0.88)]">
-            {id}
-          </span>
+    <div className="rounded-md border border-[var(--ui-border-soft)] bg-[color-mix(in_srgb,var(--ui-bg-panel)_82%,black)] px-2.5 py-2">
+      <p className="mb-1 font-mono text-[10px] uppercase tracking-[0.12em]" style={{ color }}>
+        {title}
+      </p>
+      <div className="space-y-1.5">
+        {details.slice(0, 1).map((item) => (
+          <div
+            key={`${title}-${item.id}`}
+            className="rounded border border-[var(--ui-border-soft)] bg-[color-mix(in_srgb,var(--ui-bg-card)_88%,black)] px-2 py-1.5"
+          >
+            <div className="mb-0.5 flex items-center gap-1">
+              <span className="h-1.5 w-1.5 rounded-full bg-[var(--ui-accent-info)]" />
+              <span className="font-mono text-[10px] text-[var(--ui-text-muted)]">{item.id}</span>
+            </div>
+            <p className="line-clamp-1 text-xs text-[var(--ui-text-primary)]">{item.title}</p>
+            {item.epic ? (
+              <p className="line-clamp-1 text-[10px] text-[var(--ui-accent-info)]">↳ {item.epic}</p>
+            ) : null}
+          </div>
         ))}
-        {ids.length > 2 ? <span className="text-[10px] text-[#8E8E8E]">+{ids.length - 2}</span> : null}
       </div>
+      {details.length > 1 ? <p className="mt-1 text-[11px] text-[var(--ui-text-muted)]">+{details.length - 1} more</p> : null}
     </div>
   );
 }
@@ -98,131 +121,116 @@ export function SocialCard({
   dependencyCount,
   commentCount,
   unreadCount = 0,
+  blockedByDetails = [],
+  unblocksDetails = [],
 }: SocialCardProps) {
-  const tone = STATUS_TONES[data.status];
+  const status = statusVisual(data.status);
 
   return (
     <div
       onClick={onClick}
+      onKeyDown={(event) => handleCardKeyDown(event, onClick)}
       role="button"
       tabIndex={0}
+      aria-label={`Open ${data.title}`}
       className={cn(
-        'group relative flex h-full min-h-[18rem] cursor-pointer flex-col rounded-2xl px-4 py-4 text-left transition-all duration-200 ease-out',
-        'hover:-translate-y-0.5',
-        selected && 'translate-y-[-2px]',
+        'group relative flex min-h-[290px] cursor-pointer flex-col rounded-[14px] border px-3.5 py-3 text-left transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)]',
         className,
       )}
       style={{
-        background: tone.surface,
+        background: status.cardBg,
+        borderColor: selected ? status.border : 'var(--ui-border-soft)',
         boxShadow: selected
-          ? `0 24px 50px -18px ${tone.glow}, 0 10px 24px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.12)`
-          : `0 12px 24px -20px ${tone.glow}, 0 6px 14px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.06)`,
+          ? '0 24px 40px -26px rgba(0,0,0,0.85), 0 0 0 1px color-mix(in srgb, var(--ui-border-strong) 66%, transparent)'
+          : '0 12px 26px -24px rgba(0,0,0,0.82)',
       }}
     >
-      <div className="absolute inset-x-0 top-0 h-[4px]" style={{ backgroundColor: tone.accent }} />
-      <div
-        className="pointer-events-none absolute right-3 top-3 h-10 w-10 rounded-full blur-xl"
-        style={{ backgroundColor: tone.glow }}
-      />
-      <div className="mb-3 flex items-center justify-between gap-3">
+      <div className="mb-2 flex items-center justify-between gap-2">
         <div className="flex min-w-0 items-center gap-2">
-          <span className="truncate font-mono text-[11px] text-[#A8D0CB]">{data.id}</span>
+          <Badge className="rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.1em]" style={{ backgroundColor: status.badgeBg, color: status.badgeText }}>
+            {status.chipText}
+          </Badge>
+          <span className="font-mono text-[11px] text-[var(--ui-accent-info)]">{data.priority}</span>
+          <span className="truncate font-mono text-[11px] text-[var(--ui-text-muted)]">{data.id}</span>
           {unreadCount > 0 ? (
-            <span className="inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-[#E24A3A] px-1 text-[10px] font-semibold text-white">
+            <span className="inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--ui-accent-action-red)] px-1 text-[10px] font-semibold text-white">
               {unreadCount}
             </span>
           ) : null}
         </div>
-        <div className="flex items-center gap-2">
-          <Badge className={cn('rounded-full px-2 py-0.5 text-[10px] font-semibold', tone.badgeClass)}>
-            {data.status.replace('_', ' ')}
-          </Badge>
-          <Badge className="rounded-full bg-black/25 px-2 py-0.5 font-mono text-[10px] text-[#D0D0D0] shadow-[0_8px_16px_-12px_rgba(0,0,0,0.8)]">
-            {data.priority}
-          </Badge>
-        </div>
       </div>
 
-      <h3 className="line-clamp-2 text-[1.7rem] font-semibold leading-[1.1] tracking-[-0.02em] text-white">
-        {data.title}
-      </h3>
-
-      <p className="mt-2 line-clamp-2 min-h-[2.6rem] text-sm leading-relaxed text-[#B8B8B8]">
+      <h3 className="line-clamp-2 text-[27px] font-semibold leading-[1.13] tracking-[-0.01em] text-[var(--ui-text-primary)]">{data.title}</h3>
+      <p className="mt-1.5 line-clamp-3 min-h-[56px] text-[13px] leading-relaxed text-[var(--ui-text-muted)]">
         {description || 'No summary provided yet.'}
       </p>
 
-      <div className="mt-2 flex flex-wrap gap-2">
-        <span className="rounded-full bg-[#D4A574]/28 px-2 py-0.5 text-[10px] font-semibold text-[#F5DFC2] shadow-[0_8px_16px_-12px_rgba(0,0,0,0.82)]">
-          {data.blocks.length} blocking
-        </span>
-        <span className="rounded-full bg-[#E57373]/24 px-2 py-0.5 text-[10px] font-semibold text-[#F3C2C2] shadow-[0_8px_16px_-12px_rgba(0,0,0,0.82)]">
-          {data.unblocks.length} blocked by
-        </span>
+      <div className="mt-2 flex flex-col gap-2">
+        {dependencyPanel('Blocked By', 'var(--ui-accent-blocked)', blockedByDetails)}
+        {dependencyPanel('Unblocks', 'var(--ui-accent-ready)', unblocksDetails)}
       </div>
 
-      <div className="mt-3 grid gap-2 sm:grid-cols-2">
-        {renderDependencyPreview(data.unblocks, 'text-[#D4A574]', 'Blocked By')}
-        {renderDependencyPreview(data.blocks, 'text-[#5BA8A0]', 'Unblocks')}
+      <div className="mt-2 flex items-center gap-2">
+        {data.agents.slice(0, 3).map((agent) => (
+          <AgentAvatar
+            key={`${data.id}-${agent.name}`}
+            name={agent.name}
+            status={agent.status as AgentStatus}
+            role={agent.role}
+            size="sm"
+          />
+        ))}
+        {data.agents.length === 0 ? <span className="text-xs text-[var(--ui-text-muted)]">No crew</span> : null}
       </div>
 
-      <div className="mt-auto flex items-end justify-between gap-3 pt-4">
-        <div className="space-y-1.5 text-xs text-[#9A9A9A]">
-          <p className="inline-flex items-center gap-1.5"><Clock3 className="h-3.5 w-3.5" />{updatedLabel}</p>
-          <div className="flex items-center gap-3">
-            <p className="inline-flex items-center gap-1"><Link2 className="h-3.5 w-3.5" />{dependencyCount ?? data.blocks.length + data.unblocks.length}</p>
-            <p className="inline-flex items-center gap-1"><MessageCircle className="h-3.5 w-3.5" />{commentCount ?? 0}</p>
+      <div className="mt-auto border-t border-[var(--ui-border-soft)] pt-1.5">
+        <div className="mb-1.5 flex items-center justify-between text-xs text-[var(--ui-text-muted)]">
+          <span className="inline-flex items-center gap-1"><Clock3 className="h-3.5 w-3.5" aria-hidden="true" />{updatedLabel}</span>
+          <span className="font-mono text-[11px] text-[var(--ui-accent-ready)]">stage active</span>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3 text-xs text-[var(--ui-text-muted)]">
+            <span className="inline-flex items-center gap-1"><Link2 className="h-3.5 w-3.5" aria-hidden="true" />{dependencyCount ?? data.blocks.length + data.unblocks.length}</span>
+            <span className="inline-flex items-center gap-1"><MessageCircle className="h-3.5 w-3.5" aria-hidden="true" />{commentCount ?? 0}</span>
+          </div>
+
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              onClick={(event) => {
+                event.stopPropagation();
+                onJumpToGraph?.(data.id);
+              }}
+              className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] text-[var(--ui-accent-info)] transition-colors hover:bg-white/5"
+              aria-label="Open in graph"
+            >
+              <GitBranch className="h-3.5 w-3.5" aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              onClick={(event) => {
+                event.stopPropagation();
+                onJumpToActivity?.(data.id);
+              }}
+              className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] text-[var(--ui-accent-warning)] transition-colors hover:bg-white/5"
+              aria-label="Open in activity"
+            >
+              <Orbit className="h-3.5 w-3.5" aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              onClick={(event) => {
+                event.stopPropagation();
+                onOpenThread?.();
+              }}
+              className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] text-[var(--ui-accent-ready)] transition-colors hover:bg-white/5"
+              aria-label="Open thread"
+            >
+              <Activity className="h-3.5 w-3.5" aria-hidden="true" />
+            </button>
           </div>
         </div>
-
-        <div className="flex items-center -space-x-2">
-          {data.agents.slice(0, 4).map((agent) => (
-            <div key={`${data.id}-${agent.name}`} className="rounded-full ring-2 ring-[#2C2C2C]">
-              <AgentAvatar
-                name={agent.name}
-                status={agent.status as AgentStatus}
-                role={agent.role}
-                size="sm"
-              />
-            </div>
-          ))}
-          {data.agents.length === 0 ? <span className="text-xs text-[#808080]">No crew</span> : null}
-        </div>
-      </div>
-
-      <div className="mt-3 flex items-center justify-end gap-1 pt-2 shadow-[inset_0_10px_12px_-14px_rgba(0,0,0,0.88)]">
-        <button
-          type="button"
-          onClick={(event) => {
-            event.stopPropagation();
-            onJumpToGraph?.(data.id);
-          }}
-          className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-[#5BA8A0]/24 text-[#AFE2DC] shadow-[0_10px_16px_-12px_rgba(0,0,0,0.8)] transition-colors hover:bg-[#5BA8A0]/36"
-          title="Jump to graph view"
-        >
-          <GitBranch className="h-3.5 w-3.5" />
-        </button>
-        <button
-          type="button"
-          onClick={(event) => {
-            event.stopPropagation();
-            onJumpToActivity?.(data.id);
-          }}
-          className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-[#D4A574]/24 text-[#E8D0B3] shadow-[0_10px_16px_-12px_rgba(0,0,0,0.8)] transition-colors hover:bg-[#D4A574]/36"
-          title="Jump to activity view"
-        >
-          <Orbit className="h-3.5 w-3.5" />
-        </button>
-        <button
-          type="button"
-          onClick={(event) => {
-            event.stopPropagation();
-            onOpenThread?.();
-          }}
-          className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-[#7CB97A]/24 text-[#D2EACF] shadow-[0_10px_16px_-12px_rgba(0,0,0,0.8)] transition-colors hover:bg-[#7CB97A]/36"
-          title="Open thread"
-        >
-          <Activity className="h-3.5 w-3.5" />
-        </button>
       </div>
     </div>
   );
diff --git a/src/components/social/social-page.tsx b/src/components/social/social-page.tsx
index 262040e..9ac52e4 100644
--- a/src/components/social/social-page.tsx
+++ b/src/components/social/social-page.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import { useMemo } from 'react';
-import { Clock3, Layers2, Sparkles, TriangleAlert } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 
 import type { BeadIssue } from '../../lib/types';
@@ -14,6 +13,33 @@ interface SocialPageProps {
   selectedId?: string;
   onSelect: (id: string) => void;
   projectScopeOptions?: ProjectScopeOption[];
+  blockedOnly?: boolean;
+}
+
+type SectionKey = 'ready' | 'in_progress' | 'blocked' | 'deferred' | 'done';
+
+const SECTION_LABEL: Record<SectionKey, string> = {
+  ready: 'Ready',
+  in_progress: 'In Progress',
+  blocked: 'Blocked',
+  deferred: 'Deferred',
+  done: 'Done',
+};
+
+const SECTION_COLOR: Record<SectionKey, string> = {
+  ready: 'var(--ui-accent-ready)',
+  in_progress: 'var(--ui-accent-warning)',
+  blocked: 'var(--ui-accent-blocked)',
+  deferred: 'var(--ui-accent-info)',
+  done: 'var(--ui-text-muted)',
+};
+
+function bucketForStatus(status: string): SectionKey {
+  if (status === 'ready') return 'ready';
+  if (status === 'in_progress') return 'in_progress';
+  if (status === 'blocked') return 'blocked';
+  if (status === 'closed') return 'done';
+  return 'deferred';
 }
 
 function formatRelative(timestamp: string): string {
@@ -31,16 +57,13 @@ function formatRelative(timestamp: string): string {
   return `${diffDays}d ago`;
 }
 
-const STATUS_SCORE: Record<string, number> = {
-  blocked: 5,
-  in_progress: 4,
-  ready: 3,
-  open: 3,
-  deferred: 2,
-  closed: 1,
-};
-
-export function SocialPage({ issues, selectedId, onSelect, projectScopeOptions = [] }: SocialPageProps) {
+export function SocialPage({
+  issues,
+  selectedId,
+  onSelect,
+  projectScopeOptions = [],
+  blockedOnly = false,
+}: SocialPageProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const cards = useMemo(() => buildSocialCards(issues), [issues]);
@@ -48,11 +71,8 @@ export function SocialPage({ issues, selectedId, onSelect, projectScopeOptions =
   const navigateWithParams = (updates: Record<string, string | null>) => {
     const next = new URLSearchParams(searchParams.toString());
     for (const [key, value] of Object.entries(updates)) {
-      if (!value) {
-        next.delete(key);
-      } else {
-        next.set(key, value);
-      }
+      if (!value) next.delete(key);
+      else next.set(key, value);
     }
     const query = next.toString();
     router.push(query ? `/?${query}` : '/', { scroll: false });
@@ -60,124 +80,194 @@ export function SocialPage({ issues, selectedId, onSelect, projectScopeOptions =
 
   const issueById = useMemo(() => {
     const map = new Map<string, BeadIssue>();
+    for (const issue of issues) map.set(issue.id, issue);
+    return map;
+  }, [issues]);
+  const epicTitleById = useMemo(() => {
+    const map = new Map<string, string>();
     for (const issue of issues) {
-      map.set(issue.id, issue);
+      if (issue.issue_type === 'epic') {
+        map.set(issue.id, issue.title);
+      }
     }
     return map;
   }, [issues]);
 
-  const orderedCards = useMemo(() => {
-    return [...cards].sort((a, b) => {
-      const scoreDiff = (STATUS_SCORE[b.status] ?? 0) - (STATUS_SCORE[a.status] ?? 0);
-      if (scoreDiff !== 0) {
-        return scoreDiff;
-      }
-      return b.lastActivity.getTime() - a.lastActivity.getTime();
+  const toDependencyDetails = (ids: string[]) =>
+    ids.map((id) => {
+      const depIssue = issueById.get(id);
+      const parentEpicId = depIssue?.dependencies.find((dep) => dep.type === 'parent')?.target;
+      return {
+        id,
+        title: depIssue?.title ?? id,
+        epic: parentEpicId ? epicTitleById.get(parentEpicId) : undefined,
+      };
     });
-  }, [cards]);
 
-  const selectedCard = useMemo(
-    () => orderedCards.find((card) => card.id === selectedId) ?? null,
-    [orderedCards, selectedId],
+  const orderedCards = useMemo(
+    () => [...cards].sort((a, b) => b.lastActivity.getTime() - a.lastActivity.getTime()),
+    [cards],
   );
 
-  const selectedIssue = selectedCard ? issueById.get(selectedCard.id) ?? null : null;
+  const visibleCards = useMemo(
+    () => (blockedOnly ? orderedCards.filter((card) => card.status === 'blocked') : orderedCards),
+    [blockedOnly, orderedCards],
+  );
 
-  const metrics = useMemo(() => {
-    const blocked = cards.filter((card) => card.status === 'blocked').length;
-    const active = cards.filter((card) => card.status === 'in_progress').length;
-    const ready = cards.filter((card) => card.status === 'ready').length;
-    const urgent = cards.filter((card) => card.priority === 'P0').length;
+  const grouped = useMemo(() => {
+    const map: Record<SectionKey, typeof visibleCards> = {
+      ready: [],
+      in_progress: [],
+      blocked: [],
+      deferred: [],
+      done: [],
+    };
 
-    return { blocked, active, ready, urgent };
-  }, [cards]);
+    for (const card of visibleCards) {
+      map[bucketForStatus(card.status)].push(card);
+    }
+
+    return map;
+  }, [visibleCards]);
+  const [expandedSections, setExpandedSections] = useState<Record<SectionKey, boolean>>({
+    ready: false,
+    in_progress: false,
+    blocked: false,
+    deferred: false,
+    done: false,
+  });
+  const [collapsedSections, setCollapsedSections] = useState<Record<SectionKey, boolean>>({
+    ready: false,
+    in_progress: false,
+    blocked: false,
+    deferred: true,
+    done: true,
+  });
 
   return (
-    <div className="relative h-full overflow-y-auto bg-[#2D2D2D] custom-scrollbar">
-      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_10%_12%,rgba(90,70,50,0.42),transparent_34%),radial-gradient(circle_at_88%_82%,rgba(35,72,77,0.34),transparent_36%)]" />
-      <div className="relative mx-auto flex max-w-[1450px] flex-col gap-4 p-5">
-        <section className="rounded-2xl bg-[linear-gradient(160deg,rgba(57,57,66,0.95),rgba(46,49,60,0.95))] p-4 shadow-[0_24px_40px_-26px_rgba(0,0,0,0.82),inset_0_1px_0_rgba(255,255,255,0.05)]">
-          <div className="flex flex-wrap items-end justify-between gap-3">
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-[0.16em] text-[#8B8B8B]">Social Stream</p>
-              <h2 className="mt-1 text-3xl font-semibold tracking-tight text-white">Task Activity Command Feed</h2>
-              <p className="mt-1 text-sm text-[#B8B8B8]">Two-column live task stream with inline thread context.</p>
-            </div>
-            <div className="flex items-center gap-2 text-xs">
-              <div className="rounded-full bg-[#404856] px-3 py-1 text-[#D8D8D8] shadow-[0_10px_18px_-14px_rgba(0,0,0,0.8)]">{projectScopeOptions.length} scopes</div>
-              <div className="rounded-full bg-[#404856] px-3 py-1 text-[#D8D8D8] shadow-[0_10px_18px_-14px_rgba(0,0,0,0.8)]">{cards.length} tasks</div>
-            </div>
+    <div className="h-full overflow-y-auto bg-[var(--ui-bg-app)] custom-scrollbar">
+      <div className="mx-auto w-full max-w-[1280px] px-4 pb-8 pt-4 xl:px-6">
+        <div className="mb-4 flex items-center justify-between gap-3 border-b border-[var(--ui-border-soft)] pb-3">
+          <div>
+            <p className="font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--ui-text-muted)]">Social Stream</p>
+            <p className="text-sm text-[var(--ui-text-primary)]">Task Activity Command Feed</p>
           </div>
-          <div className="mt-3 grid gap-2 sm:grid-cols-4">
-            <div className="rounded-xl bg-[#7CB97A]/24 px-3 py-2 text-xs font-semibold text-[#DDF0DA] shadow-[0_12px_20px_-16px_rgba(0,0,0,0.82)]">{metrics.ready} ready</div>
-            <div className="rounded-xl bg-[#D4A574]/24 px-3 py-2 text-xs font-semibold text-[#F0DEC8] shadow-[0_12px_20px_-16px_rgba(0,0,0,0.82)]">{metrics.active} in progress</div>
-            <div className="rounded-xl bg-[#C97A7A]/24 px-3 py-2 text-xs font-semibold text-[#F3D2D2] shadow-[0_12px_20px_-16px_rgba(0,0,0,0.82)]">{metrics.blocked} blocked</div>
-            <div className="rounded-xl bg-[#E24A3A]/24 px-3 py-2 text-xs font-semibold text-[#F7CBC6] shadow-[0_12px_20px_-16px_rgba(0,0,0,0.82)]">{metrics.urgent} P0</div>
+          <div className="flex items-center gap-2 text-[11px]">
+            <span className="rounded-full border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] px-2 py-1 text-[var(--ui-text-muted)]">
+              {projectScopeOptions.length} scopes
+            </span>
+            <span className="rounded-full border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] px-2 py-1 text-[var(--ui-text-muted)]">
+              {visibleCards.length} tasks
+            </span>
           </div>
-        </section>
-
-        {selectedCard && selectedIssue ? (
-          <section className="rounded-2xl bg-[radial-gradient(circle_at_100%_50%,rgba(91,168,160,0.2),transparent_45%),rgba(54,57,66,0.94)] p-3 shadow-[0_16px_30px_-18px_rgba(0,0,0,0.72),inset_0_1px_0_rgba(255,255,255,0.04)]">
-            <div className="mb-2 flex items-center justify-between gap-3">
-              <div className="flex items-center gap-2 text-[#DDEDEC]">
-                <Sparkles className="h-4 w-4 text-[#5BA8A0]" />
-                <p className="text-sm font-semibold">Focused thread context</p>
-              </div>
-              <p className="text-xs text-[#8B8B8B]">{selectedCard.id}</p>
-            </div>
-            <div className="grid gap-3 md:grid-cols-[1fr_auto_auto_auto]">
-              <p className="line-clamp-2 text-sm text-[#D8D8D8]">{selectedIssue.description ?? selectedIssue.title}</p>
-              <p className="inline-flex items-center gap-1 text-xs text-[#9E9E9E]"><Clock3 className="h-3.5 w-3.5" />{formatRelative(selectedIssue.updated_at)}</p>
-              <p className="inline-flex items-center gap-1 text-xs text-[#9E9E9E]"><Layers2 className="h-3.5 w-3.5" />{selectedIssue.dependencies.length} deps</p>
-              {selectedIssue.status === 'blocked' ? (
-                <p className="inline-flex items-center gap-1 text-xs text-[#E1BC8F]"><TriangleAlert className="h-3.5 w-3.5" />Needs unblock</p>
-              ) : (
-                <p className="text-xs text-[#7CB97A]">Healthy flow</p>
-              )}
-            </div>
-          </section>
-        ) : null}
-
-        <section className="grid grid-cols-1 gap-4 pb-6 xl:grid-cols-2">
-          {orderedCards.map((card) => {
-            const issue = issueById.get(card.id);
-            const commentCount = typeof issue?.metadata?.commentCount === 'number' ? issue.metadata.commentCount : 0;
-            const unreadCount = typeof issue?.metadata?.unreadCount === 'number' ? issue.metadata.unreadCount : 0;
-            const description = issue?.description ?? undefined;
+        </div>
 
+        <section className="space-y-6">
+          {(Object.keys(SECTION_LABEL) as SectionKey[]).map((key) => {
+            const cardsForSection = grouped[key];
             return (
-              <SocialCard
-                key={card.id}
-                data={card}
-                selected={selectedId === card.id}
-                onClick={() => onSelect(card.id)}
-                onJumpToGraph={(id) => {
-                  navigateWithParams({
-                    view: 'graph',
-                    task: id,
-                    swarm: null,
-                    panel: 'open',
-                    drawer: 'closed',
-                  });
-                }}
-                onJumpToActivity={(id) => {
-                  navigateWithParams({
-                    view: 'activity',
-                    task: id,
-                    panel: 'open',
-                    drawer: 'closed',
-                  });
-                }}
-                onOpenThread={() => onSelect(card.id)}
-                description={description ?? undefined}
-                updatedLabel={issue ? formatRelative(issue.updated_at) : 'just now'}
-                dependencyCount={issue?.dependencies.length ?? card.blocks.length + card.unblocks.length}
-                commentCount={commentCount}
-                unreadCount={unreadCount}
-              />
+              <div key={key}>
+                <div className="mb-3 flex items-center gap-2 border-b border-[var(--ui-border-soft)] pb-2">
+                  <p className="font-mono text-xs uppercase tracking-[0.14em]" style={{ color: SECTION_COLOR[key] }}>
+                    {SECTION_LABEL[key]}
+                  </p>
+                  <span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] px-1.5 text-[10px] text-[var(--ui-text-primary)]">
+                    {cardsForSection.length}
+                  </span>
+                  {(key === 'deferred' || key === 'done') ? (
+                    <button
+                      type="button"
+                      onClick={() =>
+                        setCollapsedSections((current) => ({ ...current, [key]: !current[key] }))
+                      }
+                      className="ml-auto rounded border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--ui-text-muted)] transition-colors hover:text-[var(--ui-text-primary)]"
+                    >
+                      {collapsedSections[key] ? 'Expand' : 'Minimize'}
+                    </button>
+                  ) : null}
+                </div>
+
+                {collapsedSections[key] ? (
+                  <p className="px-0.5 py-1 text-sm text-[var(--ui-text-muted)]">
+                    {cardsForSection.length === 0
+                      ? `No tasks in ${SECTION_LABEL[key].toLowerCase()}.`
+                      : `${cardsForSection.length} tasks hidden.`}
+                  </p>
+                ) : (
+                  <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
+                    {(expandedSections[key] ? cardsForSection : cardsForSection.slice(0, 3)).map((card) => {
+                    const issue = issueById.get(card.id);
+                    const commentCount = typeof issue?.metadata?.commentCount === 'number' ? issue.metadata.commentCount : 0;
+                    const unreadCount = typeof issue?.metadata?.unreadCount === 'number' ? issue.metadata.unreadCount : 0;
+                    const dependencyCount = issue?.dependencies.length ?? card.blocks.length + card.unblocks.length;
+
+                    return (
+                      <SocialCard
+                        key={card.id}
+                        data={card}
+                        selected={selectedId === card.id}
+                        onClick={() => onSelect(card.id)}
+                        onJumpToGraph={(id) =>
+                          navigateWithParams({
+                            view: 'graph',
+                            task: id,
+                            swarm: null,
+                            right: 'open',
+                            panel: 'open',
+                            drawer: 'closed',
+                          })
+                        }
+                        onJumpToActivity={(id) =>
+                          navigateWithParams({
+                            view: 'activity',
+                            task: id,
+                            right: 'open',
+                            panel: 'open',
+                            drawer: 'closed',
+                          })
+                        }
+                        onOpenThread={() => onSelect(card.id)}
+                        description={issue?.description ?? undefined}
+                        updatedLabel={issue ? formatRelative(issue.updated_at) : 'just now'}
+                        dependencyCount={dependencyCount}
+                        commentCount={commentCount}
+                        unreadCount={unreadCount}
+                        blockedByDetails={toDependencyDetails(card.unblocks)}
+                        unblocksDetails={toDependencyDetails(card.blocks)}
+                      />
+                    );
+                  })}
+                    {cardsForSection.length === 0 ? (
+                      <p className="px-0.5 py-1 text-sm text-[var(--ui-text-muted)]">
+                        No tasks in this lane.
+                      </p>
+                    ) : null}
+                  </div>
+                )}
+
+                {!collapsedSections[key] && cardsForSection.length > 3 ? (
+                  <div className="mt-2 flex justify-end">
+                    <button
+                      type="button"
+                      onClick={() =>
+                        setExpandedSections((current) => ({ ...current, [key]: !current[key] }))
+                      }
+                      className="rounded-md border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] px-2.5 py-1.5 text-xs font-semibold uppercase tracking-[0.1em] text-[var(--ui-text-muted)] transition-colors hover:text-[var(--ui-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)]"
+                    >
+                      {expandedSections[key] ? 'Show Less' : `Show ${cardsForSection.length - 3} More`}
+                    </button>
+                  </div>
+                ) : null}
+              </div>
             );
           })}
         </section>
+
+        {visibleCards.length === 0 ? (
+          <p className="mt-5 px-0.5 py-1 text-sm text-[var(--ui-text-muted)]">
+            No blocked tasks right now.
+          </p>
+        ) : null}
       </div>
     </div>
   );
diff --git a/src/components/swarm/archetype-inspector.tsx b/src/components/swarm/archetype-inspector.tsx
new file mode 100644
index 0000000..2979af0
--- /dev/null
+++ b/src/components/swarm/archetype-inspector.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import { X, Save, ShieldAlert } from 'lucide-react';
+import type { AgentArchetype } from '../../lib/types-swarm';
+
+interface ArchetypeInspectorProps {
+    archetype: AgentArchetype;
+    onClose: () => void;
+}
+
+export function ArchetypeInspector({ archetype, onClose }: ArchetypeInspectorProps) {
+    if (!archetype) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200">
+            <div className="flex flex-col h-[85vh] w-full max-w-2xl overflow-hidden rounded-xl border border-[var(--ui-border-soft)] bg-[#0f1824] shadow-2xl animate-in zoom-in-95 duration-200">
+
+                {/* Header */}
+                <div className="flex items-center justify-between border-b border-[var(--ui-border-soft)] px-5 py-4 bg-[#14202e]">
+                    <div className="flex items-center gap-3">
+                        <div
+                            className="h-10 w-10 rounded-lg flex items-center justify-center font-bold text-lg border"
+                            style={{ backgroundColor: `${archetype.color}15`, color: archetype.color, borderColor: `${archetype.color}30` }}
+                        >
+                            {archetype.name.charAt(0)}
+                        </div>
+                        <div>
+                            <h2 className="text-lg font-bold text-[var(--ui-text-primary)] leading-tight">{archetype.name}</h2>
+                            <p className="font-mono uppercase tracking-wider text-[10px] text-[var(--ui-text-muted)] mt-0.5">{archetype.id}</p>
+                        </div>
+                    </div>
+                    <button
+                        onClick={onClose}
+                        className="rounded-full p-2 text-[var(--ui-text-muted)] hover:bg-white/5 hover:text-white transition-colors"
+                    >
+                        <X className="w-5 h-5" />
+                    </button>
+                </div>
+
+                {/* Body Content */}
+                <div className="flex-1 overflow-y-auto p-5 space-y-6 custom-scrollbar">
+
+                    {/* ReadOnly Warning if builtin */}
+                    {archetype.isBuiltIn && (
+                        <div className="flex items-start gap-3 bg-[var(--ui-accent-warning)]/10 border border-[var(--ui-accent-warning)]/20 p-3 rounded-lg text-[var(--ui-accent-warning)]">
+                            <ShieldAlert className="w-5 h-5 flex-shrink-0 mt-0.5" />
+                            <div className="text-sm">
+                                <span className="font-semibold">Built-in Archetype.</span> This is a core system role. You cannot delete it, but you can override its system prompt.
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Metadata Section */}
+                    <div className="space-y-4">
+                        <div>
+                            <label className="text-xs font-semibold text-[var(--ui-text-muted)] uppercase tracking-wider mb-1.5 block">Description</label>
+                            <input
+                                type="text"
+                                defaultValue={archetype.description}
+                                readOnly
+                                className="w-full bg-[#0a111a] border border-[var(--ui-border-soft)] rounded-md px-3 py-2 text-sm text-[var(--ui-text-primary)] focus:outline-none focus:border-[var(--ui-accent-info)] focus:ring-1 focus:ring-[var(--ui-accent-info)]"
+                            />
+                        </div>
+
+                        <div>
+                            <label className="text-xs font-semibold text-[var(--ui-text-muted)] uppercase tracking-wider mb-1.5 block">Capabilities</label>
+                            <div className="flex flex-wrap gap-2">
+                                {archetype.capabilities.map((cap, idx) => (
+                                    <span key={idx} className="px-2 py-1 rounded-md bg-white/5 text-[11px] uppercase font-semibold text-[var(--ui-text-muted)] border border-white/10">
+                                        {cap}
+                                    </span>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="border-t border-[var(--ui-border-soft)] pt-6">
+                        <div className="flex flex-col h-[300px]">
+                            <label className="text-xs font-semibold text-[var(--ui-text-muted)] uppercase tracking-wider mb-1.5 flex items-center justify-between">
+                                <span>System Prompt</span>
+                                <span className="text-[10px] text-emerald-400 normal-case tracking-normal">Syntax: Markdown</span>
+                            </label>
+                            <textarea
+                                defaultValue={archetype.systemPrompt}
+                                readOnly
+                                className="flex-1 w-full bg-[#0a111a] border border-[var(--ui-border-soft)] rounded-md p-4 text-sm text-[var(--ui-text-primary)] font-mono resize-none focus:outline-none focus:border-[var(--ui-accent-info)] custom-scrollbar leading-relaxed"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                {/* Footer Controls */}
+                <div className="border-t border-[var(--ui-border-soft)] px-5 py-4 bg-[#14202e] flex justify-end gap-3">
+                    <button
+                        onClick={onClose}
+                        className="px-4 py-2 text-sm font-semibold text-[var(--ui-text-primary)] hover:bg-white/5 rounded-md transition-colors"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        disabled
+                        className="flex items-center gap-2 px-4 py-2 text-sm font-bold bg-[var(--ui-accent-info)] hover:bg-[var(--ui-accent-info)]/90 text-white rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                        <Save className="w-4 h-4" />
+                        Save Changes
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/swarm/convoy-stepper.tsx b/src/components/swarm/convoy-stepper.tsx
new file mode 100644
index 0000000..b79760d
--- /dev/null
+++ b/src/components/swarm/convoy-stepper.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { Loader2, CheckCircle2 } from "lucide-react";
+
+export type Phase = 'planning' | 'deployment' | 'execution' | 'debrief';
+
+export function ConvoyStepper({ activePhase }: { activePhase: Phase }) {
+    const phases: Phase[] = ['planning', 'deployment', 'execution', 'debrief'];
+
+    return (
+        <div className="flex flex-wrap items-center gap-4 bg-muted/50 p-4 rounded-lg my-4">
+            {phases.map((p, i) => {
+                const isActive = activePhase === p;
+                const isPast = phases.indexOf(activePhase) > i;
+
+                return (
+                    <div
+                        key={p}
+                        className={`flex items-center gap-2 ${isActive ? 'text-primary' : isPast ? 'text-muted-foreground' : 'text-muted-foreground/50'
+                            }`}
+                    >
+                        {isActive && <Loader2 className="w-4 h-4 animate-spin" />}
+                        {isPast && <CheckCircle2 className="w-4 h-4" />}
+                        {!isActive && !isPast && <div className="w-4 h-4 rounded-full border border-current" />}
+                        <span className="font-mono text-sm uppercase">{p}</span>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
diff --git a/src/components/swarm/launch-dialog.tsx b/src/components/swarm/launch-dialog.tsx
new file mode 100644
index 0000000..6c952e7
--- /dev/null
+++ b/src/components/swarm/launch-dialog.tsx
@@ -0,0 +1,172 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Loader2, Plus, Rocket } from 'lucide-react';
+
+interface LaunchSwarmDialogProps {
+  projectRoot: string;
+  onSuccess?: () => void;
+}
+
+interface Formula {
+  name: string;
+  description?: string;
+}
+
+export function LaunchSwarmDialog({ projectRoot, onSuccess }: LaunchSwarmDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [formulas, setFormulas] = useState<Formula[]>([]);
+  const [selectedFormula, setSelectedFormula] = useState<string>('');
+  const [title, setTitle] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchFormulas = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/swarm/formulas?projectRoot=${encodeURIComponent(projectRoot)}`);
+      const json = await res.json();
+      if (json.ok) {
+        setFormulas(json.data);
+      } else {
+        setError(json.error);
+      }
+    } catch (e) {
+      setError('Failed to fetch formulas');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    if (isOpen && formulas.length === 0) {
+      fetchFormulas();
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title || !selectedFormula) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch('/api/swarm/launch', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          projectRoot,
+          title,
+          proto: selectedFormula,
+        }),
+      });
+      
+      const json = await res.json();
+      if (json.ok) {
+        setOpen(false);
+        setTitle('');
+        setSelectedFormula('');
+        onSuccess?.();
+      } else {
+        setError(json.error);
+      }
+    } catch (e) {
+      setError('Failed to launch swarm');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button 
+          variant="outline" 
+          size="sm" 
+          className="gap-2 border-emerald-500/20 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20 hover:text-emerald-300"
+        >
+          <Rocket className="h-4 w-4" />
+          Launch Swarm
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="bg-[#08111d] border-slate-800 text-slate-200 sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Launch New Swarm</DialogTitle>
+          <DialogDescription className="text-slate-400">
+            Instantiate a new molecule from a template proto.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="proto" className="text-slate-300">Formula Template</Label>
+            <Select value={selectedFormula} onValueChange={setSelectedFormula} disabled={loading}>
+              <SelectTrigger className="bg-slate-900 border-slate-700 text-slate-200">
+                <SelectValue placeholder="Select a proto..." />
+              </SelectTrigger>
+              <SelectContent className="bg-slate-800 border-slate-700 text-slate-200">
+                {formulas.length === 0 && !loading && (
+                   <div className="p-2 text-xs text-slate-500 text-center">No formulas found</div>
+                )}
+                {formulas.map((f) => (
+                  <SelectItem key={f.name} value={f.name} className="focus:bg-slate-700 focus:text-slate-100">
+                    {f.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="title" className="text-slate-300">Swarm Title</Label>
+            <Input
+              id="title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              className="bg-slate-900 border-slate-700 text-slate-200"
+              placeholder="e.g. Release v1.2"
+              disabled={loading}
+            />
+          </div>
+          
+          {error && (
+            <div className="text-xs text-rose-400 bg-rose-950/20 p-2 rounded border border-rose-900/30">
+              {error}
+            </div>
+          )}
+        </form>
+        <DialogFooter>
+          <Button 
+            type="submit" 
+            onClick={handleSubmit} 
+            disabled={loading || !title || !selectedFormula}
+            className="bg-emerald-600 hover:bg-emerald-500 text-white"
+          >
+            {loading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Rocket className="mr-2 h-4 w-4" />}
+            Launch
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/swarm/specialized-agent-dag.tsx b/src/components/swarm/specialized-agent-dag.tsx
new file mode 100644
index 0000000..13f06c4
--- /dev/null
+++ b/src/components/swarm/specialized-agent-dag.tsx
@@ -0,0 +1,210 @@
+import React, { useEffect, useMemo } from 'react';
+import {
+    Background,
+    MarkerType,
+    Position,
+    ReactFlow,
+    ReactFlowProvider,
+    useReactFlow,
+    Handle,
+    type Edge,
+    type Node,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import dagre from 'dagre';
+
+import type { BeadIssue } from '../../lib/types';
+import type { AgentArchetype } from '../../lib/types-swarm';
+
+// Custom Node for the Agent DAG
+interface AgentNodeData extends Record<string, unknown> {
+    title: string;
+    status: string;
+    assignee: string | null;
+    archetype?: AgentArchetype;
+    isSelected?: boolean;
+}
+
+function AgentNodeCard({ data }: { data: AgentNodeData }) {
+    const isDone = data.status === 'closed';
+    const isInProgress = data.status === 'in_progress';
+    const isBlocked = data.status === 'blocked';
+
+    const statusColor = isDone ? 'text-emerald-400' : isBlocked ? 'text-rose-400' : isInProgress ? 'text-amber-400' : 'text-slate-400';
+    let borderColor = isDone ? 'border-emerald-500/30' : isBlocked ? 'border-rose-500/30' : isInProgress ? 'border-amber-500/30' : 'border-slate-500/30';
+
+    let containerClasses = `w-[260px] rounded-xl border bg-[#0a111a] p-3 shadow-xl transition-all duration-500 ${borderColor}`;
+    if (isInProgress) {
+        containerClasses += ' shadow-[0_0_20px_rgba(251,191,36,0.15)] ring-1 ring-amber-500/30';
+    }
+    if (data.isSelected) {
+        containerClasses = `w-[260px] rounded-xl border bg-[#0a111a] p-3 shadow-[0_0_25px_rgba(56,189,248,0.2)] transition-all duration-300 border-[var(--ui-accent-info)] ring-2 ring-[var(--ui-accent-info)]/50`;
+    }
+
+    const bgStr = data.archetype ? `${data.archetype.color}15` : '#ffffff05';
+    const colorStr = data.archetype ? data.archetype.color : '#888';
+
+    return (
+        <div className={containerClasses}>
+            <div className="flex items-start gap-3">
+                <div
+                    className={`h-10 w-10 flex-shrink-0 rounded-lg flex items-center justify-center font-bold text-lg border relative ${isInProgress ? 'animate-pulse duration-1000' : ''}`}
+                    style={{ backgroundColor: bgStr, color: colorStr, borderColor: `${colorStr}40` }}
+                >
+                    {data.assignee ? data.assignee.charAt(0).toUpperCase() : '?'}
+                    <div className={`absolute -bottom-1 -right-1 w-3 h-3 rounded-full border-2 border-[#0a111a] bg-current ${statusColor} ${isInProgress ? 'animate-ping' : ''}`} style={{ animationDuration: '2s' }} />
+                    <div className={`absolute -bottom-1 -right-1 w-3 h-3 rounded-full border-2 border-[#0a111a] bg-current ${statusColor}`} />
+                </div>
+                <div className="flex-1 min-w-0">
+                    <div className="text-[10px] font-mono text-[var(--ui-text-muted)] uppercase tracking-wider mb-0.5 truncate flex items-center justify-between">
+                        <span>{data.assignee || 'Unassigned'}</span>
+                        {isInProgress && <span className="text-amber-500 animate-pulse text-[8px] tracking-widest">WORKING...</span>}
+                    </div>
+                    <div className="text-sm font-semibold text-[var(--ui-text-primary)] leading-tight line-clamp-2">
+                        {data.title}
+                    </div>
+                    {data.archetype && (
+                        <div className="text-[9px] text-[var(--ui-text-muted)] mt-1 truncate">
+                            {data.archetype.name}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* React Flow handles */}
+            <Handle type="target" position={Position.Left} className="w-4 h-4 rounded-full bg-slate-800 border-2 border-slate-600 !left-[-8px] opacity-0" />
+            <Handle type="source" position={Position.Right} className="w-4 h-4 rounded-full bg-slate-800 border-2 border-slate-600 !right-[-8px] opacity-0" />
+        </div>
+    );
+}
+
+const nodeTypes = {
+    agentNode: AgentNodeCard,
+};
+
+const layoutDagre = (nodes: Node<AgentNodeData>[], edges: Edge[]): Node<AgentNodeData>[] => {
+    const dagreGraph = new dagre.graphlib.Graph();
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+    dagreGraph.setGraph({ rankdir: 'LR', nodesep: 40, ranksep: 60 });
+
+    for (const node of nodes) {
+        dagreGraph.setNode(node.id, { width: 260, height: 110 });
+    }
+
+    for (const edge of edges) {
+        dagreGraph.setEdge(edge.source, edge.target);
+    }
+
+    dagre.layout(dagreGraph);
+
+    return nodes.map((node) => {
+        const nodeWithPosition = dagreGraph.node(node.id);
+        const newNode = { ...node };
+        if (nodeWithPosition) {
+            newNode.targetPosition = Position.Left;
+            newNode.sourcePosition = Position.Right;
+            newNode.position = {
+                x: nodeWithPosition.x - 260 / 2,
+                y: nodeWithPosition.y - 110 / 2,
+            };
+        }
+        return newNode;
+    });
+};
+
+function SpecializedAgentDagInner({ beads, archetypes, selectedId, onSelect }: { beads: BeadIssue[], archetypes: AgentArchetype[], selectedId?: string | null, onSelect?: (id: string) => void }) {
+    const { fitView } = useReactFlow();
+
+    const handleNodeClick = React.useCallback(
+        (_: React.MouseEvent, node: Node) => {
+            onSelect?.(node.id);
+        },
+        [onSelect],
+    );
+
+    const flowModel = useMemo(() => {
+        // Find visible beads (hide tombstone)
+        const visibleBeads = beads.filter(b => b.status !== 'tombstone');
+
+        const baseNodes: Node<AgentNodeData>[] = visibleBeads.map((issue) => {
+            const assigneeStr = issue.assignee?.toLowerCase() || '';
+            const matchedArchetype = archetypes.find(a =>
+                assigneeStr.includes(a.id.toLowerCase()) ||
+                assigneeStr.includes(a.name.toLowerCase())
+            );
+
+            return {
+                id: issue.id,
+                type: 'agentNode',
+                data: {
+                    title: issue.title,
+                    status: issue.status,
+                    assignee: issue.assignee,
+                    archetype: matchedArchetype,
+                    isSelected: issue.id === selectedId
+                },
+                position: { x: 0, y: 0 },
+                sourcePosition: Position.Right,
+                targetPosition: Position.Left,
+            };
+        });
+
+        const graphEdges: Edge[] = [];
+        const beadIds = new Set(visibleBeads.map(b => b.id));
+
+        visibleBeads.forEach(issue => {
+            issue.dependencies.forEach(dep => {
+                if (dep.type === 'blocks' && beadIds.has(dep.target)) {
+                    // issue depends on dep.target (issue is blocked by dep.target)
+                    // Edge should flow from blocker to blocked
+                    graphEdges.push({
+                        id: `e-${dep.target}-${issue.id}`,
+                        source: dep.target,
+                        target: issue.id,
+                        type: 'smoothstep',
+                        animated: issue.status === 'in_progress' || issue.status === 'closed',
+                        style: { stroke: '#475569', strokeWidth: 2 },
+                        markerEnd: { type: MarkerType.ArrowClosed, color: '#475569' }
+                    });
+                }
+            });
+        });
+
+        console.log('SpecializedAgentDag generated nodes:', baseNodes.length, 'edges:', graphEdges.length);
+
+        return {
+            nodes: layoutDagre(baseNodes, graphEdges),
+            edges: graphEdges,
+        };
+    }, [beads, archetypes, selectedId]);
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            fitView({ padding: 0.3, duration: 300 });
+        }, 100);
+        return () => clearTimeout(timeout);
+    }, [fitView, flowModel.nodes.length]);
+
+    return (
+        <ReactFlow
+            nodes={flowModel.nodes}
+            edges={flowModel.edges}
+            nodeTypes={nodeTypes}
+            nodesDraggable={false}
+            nodesConnectable={false}
+            elementsSelectable={true}
+            onNodeClick={handleNodeClick}
+            fitView
+        >
+            <Background gap={24} size={1} color="rgba(255,255,255,0.02)" />
+        </ReactFlow>
+    );
+}
+
+export function SpecializedAgentDag(props: { beads: BeadIssue[], archetypes: AgentArchetype[], selectedId?: string | null, onSelect?: (id: string) => void }) {
+    return (
+        <ReactFlowProvider>
+            <SpecializedAgentDagInner {...props} />
+        </ReactFlowProvider>
+    );
+}
diff --git a/src/components/swarm/swarm-card.tsx b/src/components/swarm/swarm-card.tsx
index e0e5d71..c3cc40d 100644
--- a/src/components/swarm/swarm-card.tsx
+++ b/src/components/swarm/swarm-card.tsx
@@ -1,47 +1,13 @@
 'use client';
 
-import type { SwarmCard as SwarmCardType, AgentRoster } from '../../lib/swarm-cards';
+import type { SwarmCardData } from '../../lib/swarm-api';
 import { Card } from '../../../components/ui/card';
 import { Badge } from '../../../components/ui/badge';
-import { AgentAvatar } from '../shared/agent-avatar';
 import { cn } from '../../lib/utils';
-import { Plus, Menu, Diamond, Waves, AlertTriangle } from 'lucide-react';
+import { CheckCircle2, PlayCircle, Clock, AlertCircle } from 'lucide-react';
 
 interface SwarmCardProps {
-  card: SwarmCardType;
-  onExpand?: () => void;
-  onMenu?: () => void;
-  onGraph?: () => void;
-  onTimeline?: () => void;
-}
-
-function formatTimeAgo(date: Date): string {
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMins = Math.floor(diffMs / 60000);
-  const diffHours = Math.floor(diffMins / 60);
-  const diffDays = Math.floor(diffHours / 24);
-
-  if (diffDays > 0) return `${diffDays}d ago`;
-  if (diffHours > 0) return `${diffHours}h ago`;
-  if (diffMins > 0) return `${diffMins}m ago`;
-  return 'just now';
-}
-
-const HEALTH_COLORS: Record<string, string> = {
-  active: 'text-emerald-400',
-  stale: 'text-amber-400',
-  stuck: 'text-rose-400',
-  dead: 'text-red-500',
-};
-
-function AgentRosterRow({ agent }: { agent: AgentRoster }) {
-  return (
-    <div className="flex items-center gap-2 text-xs text-slate-400">
-      <span className="font-mono text-slate-500">{agent.name}:</span>
-      <span className="truncate">{agent.currentTask || 'idle'}</span>
-    </div>
-  );
+  card: SwarmCardData;
 }
 
 function ProgressBar({ progress }: { progress: number }) {
@@ -50,118 +16,70 @@ function ProgressBar({ progress }: { progress: number }) {
 
   return (
     <div className="flex items-center gap-2">
-      <div className="flex-1 font-mono text-xs">
+      <div className="flex-1 font-mono text-xs text-slate-300">
         {'█'.repeat(filled)}
         {'░'.repeat(empty)}
       </div>
-      <span className="text-xs text-slate-400">{progress}% done</span>
+      <span className="text-xs text-slate-400">{progress}%</span>
     </div>
   );
 }
 
-function AttentionList({ items }: { items: string[] }) {
-  if (items.length === 0) return null;
+const STATUS_COLORS: Record<string, string> = {
+  open: 'text-emerald-400 border-emerald-400/30',
+  closed: 'text-slate-400 border-slate-400/30',
+  in_progress: 'text-amber-400 border-amber-400/30',
+};
 
+export function SwarmCard({ card }: SwarmCardProps) {
   return (
-    <div className="space-y-1">
-      <span className="text-[10px] font-semibold uppercase tracking-wider text-amber-400">
-        ATTENTION:
-      </span>
-      {items.slice(0, 3).map((item, i) => (
-        <div key={i} className="flex items-center gap-1.5 text-xs text-amber-200/80">
-          <AlertTriangle className="h-3 w-3 text-amber-400" />
-          <span className="truncate">{item}</span>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export function SwarmCard({ card, onExpand, onMenu, onGraph, onTimeline }: SwarmCardProps) {
-  const activeAgents = card.agents.filter((a) => a.status === 'active');
-  const otherAgents = card.agents.filter((a) => a.status !== 'active');
-
-  return (
-    <Card className="rounded-xl border border-white/[0.06] bg-[#363636] px-3.5 py-3 shadow-[0_18px_38px_-18px_rgba(0,0,0,0.82),0_6px_18px_-10px_rgba(0,0,0,0.72),inset_0_1px_0_rgba(255,255,255,0.06)] transition duration-200 hover:shadow-[0_24px_52px_-16px_rgba(0,0,0,0.9),0_10px_26px_-10px_rgba(0,0,0,0.78)]">
+    <Card className="rounded-xl border border-[var(--ui-border-soft)] bg-[var(--ui-bg-card)] px-3.5 py-3 shadow-[0_18px_38px_-18px_rgba(0,0,0,0.82),0_6px_18px_-10px_rgba(0,0,0,0.72),inset_0_1px_0_rgba(255,255,255,0.06)] transition-shadow duration-200 hover:shadow-[0_24px_52px_-16px_rgba(0,0,0,0.9),0_10px_26px_-10px_rgba(0,0,0,0.78)]">
       <div className="space-y-3">
-        <div className="flex items-start justify-between">
-          <div className="space-y-0.5">
-            <div className="flex items-center gap-2">
-              <span className="font-mono text-sm font-semibold text-slate-200">
-                {card.swarmId}
-              </span>
-              <Badge
-                variant="outline"
-                className={cn('text-[10px] px-1.5 py-0 border-slate-600', HEALTH_COLORS[card.health])}
-              >
-                {card.health}
-              </Badge>
-            </div>
-            <span className="text-sm text-slate-400 line-clamp-1">{card.title}</span>
+        <div className="space-y-1">
+          <div className="flex items-center gap-2">
+            <span className="font-mono text-sm font-semibold text-slate-200">
+              {card.swarmId}
+            </span>
+            <Badge
+              variant="outline"
+              className={cn('text-[10px] px-1.5 py-0', STATUS_COLORS[card.status] ?? 'text-slate-400 border-slate-400/30')}
+            >
+              {card.status}
+            </Badge>
           </div>
-          <button
-            onClick={onExpand}
-            className="p-1 rounded hover:bg-white/5 transition-colors"
-            aria-label="Expand"
-          >
-            <Plus className="h-4 w-4 text-slate-500" />
-          </button>
+          <span className="text-sm text-slate-400 line-clamp-1">{card.title}</span>
         </div>
 
-        <div className="flex items-center gap-1">
-          <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-500">
-            AGENTS:
-          </span>
-          <div className="flex items-center gap-1 -space-x-1">
-            {activeAgents.slice(0, 4).map((agent) => (
-              <AgentAvatar key={agent.name} name={agent.name} status={agent.status} size="sm" />
-            ))}
-            {otherAgents.slice(0, 2).map((agent) => (
-              <AgentAvatar key={agent.name} name={agent.name} status={agent.status} size="sm" />
-            ))}
-            {card.agents.length > 6 && (
-              <span className="text-xs text-slate-500 ml-2">+{card.agents.length - 6}</span>
-            )}
+        <ProgressBar progress={card.progressPercent} />
+
+        <div className="text-xs text-slate-500">
+          Epic: <span className="font-mono text-slate-400">{card.epicId}</span>
+        </div>
+
+        <div className="grid grid-cols-4 gap-2 text-xs">
+          <div className="flex items-center gap-1 text-emerald-400">
+            <CheckCircle2 className="h-3 w-3" />
+            <span>{card.completedIssues}</span>
+          </div>
+          <div className="flex items-center gap-1 text-amber-400">
+            <PlayCircle className="h-3 w-3" />
+            <span>{card.activeIssues}</span>
+          </div>
+          <div className="flex items-center gap-1 text-blue-400">
+            <Clock className="h-3 w-3" />
+            <span>{card.readyIssues}</span>
+          </div>
+          <div className="flex items-center gap-1 text-rose-400">
+            <AlertCircle className="h-3 w-3" />
+            <span>{card.blockedIssues}</span>
           </div>
         </div>
 
-        {card.agents.filter((a) => a.currentTask).slice(0, 2).map((agent) => (
-          <AgentRosterRow key={agent.name} agent={agent} />
-        ))}
-
-        <AttentionList items={card.attentionItems} />
-
-        <ProgressBar progress={card.progress} />
-
-        {card.lastActivity && (
-          <div className="text-xs text-slate-500 italic truncate">
-            Last activity {formatTimeAgo(card.lastActivity)}
+        {card.coordinator && (
+          <div className="text-xs text-slate-500">
+            Coordinator: <span className="text-slate-400">{card.coordinator}</span>
           </div>
         )}
-
-        <div className="flex items-center justify-end gap-1 pt-1 border-t border-white/[0.04]">
-          <button
-            onClick={onMenu}
-            className="p-1.5 rounded hover:bg-white/5 transition-colors"
-            aria-label="Menu"
-          >
-            <Menu className="h-3.5 w-3.5 text-slate-500" />
-          </button>
-          <button
-            onClick={onGraph}
-            className="p-1.5 rounded hover:bg-white/5 transition-colors"
-            aria-label="Graph view"
-          >
-            <Diamond className="h-3.5 w-3.5 text-slate-500" />
-          </button>
-          <button
-            onClick={onTimeline}
-            className="p-1.5 rounded hover:bg-white/5 transition-colors"
-            aria-label="Timeline view"
-          >
-            <Waves className="h-3.5 w-3.5 text-slate-500" />
-          </button>
-        </div>
       </div>
     </Card>
   );
diff --git a/src/components/swarm/swarm-control-card.tsx b/src/components/swarm/swarm-control-card.tsx
new file mode 100644
index 0000000..b99f564
--- /dev/null
+++ b/src/components/swarm/swarm-control-card.tsx
@@ -0,0 +1,146 @@
+'use client';
+
+import type { SwarmCardData } from '../../lib/swarm-api';
+import { Card } from '../../../components/ui/card';
+import { Badge } from '../../../components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { cn } from '../../lib/utils';
+import { CheckCircle2, PlayCircle, Clock, AlertCircle, UserPlus, UserMinus, Activity } from 'lucide-react';
+import { AgentAvatar } from '../shared/agent-avatar';
+import { useAgentPool } from '../../hooks/use-agent-pool';
+
+interface SwarmControlCardProps {
+  card: SwarmCardData;
+  projectRoot: string;
+  onJoin?: () => void;
+  onLeave?: () => void;
+  isJoining?: boolean;
+}
+
+function MiniGraph({ progress }: { progress: number }) {
+  // A simple visual indicator of progress complexity (mocked for now, but implies graph structure)
+  return (
+    <div className="flex h-8 items-end gap-0.5 opacity-50">
+       {[...Array(10)].map((_, i) => {
+         const height = Math.max(20, Math.random() * 80);
+         const active = (i * 10) < progress;
+         return (
+           <div 
+            key={i} 
+            className={cn("w-1 rounded-t-sm transition-all", active ? "bg-emerald-500" : "bg-slate-700")}
+            style={{ height: `${active ? height : 20}%` }}
+           />
+         )
+       })}
+    </div>
+  );
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  open: 'text-emerald-400 border-emerald-400/30',
+  closed: 'text-slate-400 border-slate-400/30',
+  in_progress: 'text-amber-400 border-amber-400/30',
+};
+
+export function SwarmControlCard({ card, projectRoot, onJoin, onLeave, isJoining }: SwarmControlCardProps) {
+  const { getAgentsBySwarm } = useAgentPool(projectRoot);
+  const agents = getAgentsBySwarm(card.swarmId);
+
+  return (
+    <Card className="group relative overflow-hidden rounded-xl border border-[var(--ui-border-soft)] bg-[var(--ui-bg-card)] p-0 shadow-lg transition-all hover:border-[var(--ui-accent-info)] hover:shadow-xl">
+       {/* Background Decoration */}
+       <div className="absolute right-0 top-0 h-32 w-32 -translate-y-16 translate-x-16 rounded-full bg-emerald-500/5 blur-3xl transition-opacity group-hover:opacity-20" />
+
+      <div className="flex flex-col h-full p-4 space-y-4">
+        {/* Header */}
+        <div className="flex items-start justify-between">
+          <div className="space-y-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <span className="font-mono text-xs font-bold text-emerald-500">
+                {card.swarmId}
+              </span>
+              <Badge
+                variant="outline"
+                className={cn('text-[9px] px-1.5 py-0 uppercase', STATUS_COLORS[card.status] ?? 'text-slate-400 border-slate-400/30')}
+              >
+                {card.status}
+              </Badge>
+            </div>
+            <h4 className="text-sm font-semibold text-slate-200 line-clamp-1 group-hover:text-white transition-colors">
+              {card.title}
+            </h4>
+          </div>
+          <Activity className="h-4 w-4 text-slate-600 group-hover:text-emerald-400 transition-colors" />
+        </div>
+
+        {/* Visualizer */}
+        <div className="rounded-lg bg-black/20 p-2">
+           <div className="flex justify-between items-end mb-1">
+             <span className="text-[10px] text-slate-500 font-mono">ACTIVITY</span>
+             <span className="text-[10px] text-emerald-400 font-mono">{card.progressPercent}%</span>
+           </div>
+           <MiniGraph progress={card.progressPercent} />
+        </div>
+
+        {/* Stats */}
+        <div className="grid grid-cols-4 gap-2 text-xs border-t border-white/5 pt-3">
+          <div className="flex flex-col items-center gap-1 text-emerald-400">
+            <CheckCircle2 className="h-3.5 w-3.5" />
+            <span className="font-mono text-[10px]">{card.completedIssues}</span>
+          </div>
+          <div className="flex flex-col items-center gap-1 text-amber-400">
+            <PlayCircle className="h-3.5 w-3.5" />
+            <span className="font-mono text-[10px]">{card.activeIssues}</span>
+          </div>
+          <div className="flex flex-col items-center gap-1 text-blue-400">
+            <Clock className="h-3.5 w-3.5" />
+            <span className="font-mono text-[10px]">{card.readyIssues}</span>
+          </div>
+          <div className="flex flex-col items-center gap-1 text-rose-400">
+            <AlertCircle className="h-3.5 w-3.5" />
+            <span className="font-mono text-[10px]">{card.blockedIssues}</span>
+          </div>
+        </div>
+
+        {/* Agent Roster & Actions */}
+        <div className="flex items-center justify-between mt-auto pt-2">
+          <div className="flex -space-x-2">
+            {agents.slice(0, 3).map(agent => (
+              <div key={agent.agent_id} className="ring-2 ring-[var(--ui-bg-card)] rounded-full z-10">
+                <AgentAvatar 
+                  name={agent.display_name} 
+                  status={agent.status as any} 
+                  size="sm" 
+                />
+              </div>
+            ))}
+            {agents.length > 3 && (
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-slate-800 text-[10px] font-bold text-slate-400 ring-2 ring-[var(--ui-bg-card)] z-0">
+                +{agents.length - 3}
+              </div>
+            )}
+            {agents.length === 0 && (
+               <span className="text-[10px] text-slate-500 italic pl-1">No agents</span>
+            )}
+          </div>
+
+          <div className="flex gap-2">
+             <Button 
+               size="sm" 
+               variant="outline" 
+               className="h-7 px-2 text-[10px] gap-1 border-emerald-500/20 hover:bg-emerald-500/10 hover:text-emerald-400"
+               onClick={(e) => {
+                 e.stopPropagation();
+                 onJoin?.();
+               }}
+               disabled={isJoining}
+             >
+               <UserPlus className="h-3 w-3" />
+               Join
+             </Button>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/components/swarm/swarm-detail.tsx b/src/components/swarm/swarm-detail.tsx
index bde3141..a19c040 100644
--- a/src/components/swarm/swarm-detail.tsx
+++ b/src/components/swarm/swarm-detail.tsx
@@ -1,201 +1,179 @@
 'use client';
 
-import type { SwarmCard as SwarmCardType } from '../../lib/swarm-cards';
+import { useEffect, useState } from 'react';
+import type { SwarmCardData, SwarmStatusFromApi } from '../../lib/swarm-api';
 import { Badge } from '../../../components/ui/badge';
-import { AgentAvatar } from '../shared/agent-avatar';
 import { cn } from '../../lib/utils';
-import { AlertTriangle, Clock, Users } from 'lucide-react';
+import { CheckCircle2, PlayCircle, Clock, AlertCircle, Loader2 } from 'lucide-react';
 
 interface SwarmDetailProps {
-  card: SwarmCardType;
-}
-
-const HEALTH_COLORS: Record<string, string> = {
-  active: 'border-emerald-500/50 text-emerald-400',
-  stale: 'border-amber-500/50 text-amber-400',
-  stuck: 'border-rose-500/50 text-rose-400',
-  dead: 'border-red-600/50 text-red-500',
-};
-
-const STATUS_GLOW: Record<string, string> = {
-  active: 'shadow-[0_0_8px_rgba(52,211,153,0.5)]',
-  stale: 'shadow-[0_0_8px_rgba(251,191,36,0.4)]',
-  stuck: 'shadow-[0_0_8px_rgba(244,63,94,0.5)]',
-  dead: 'shadow-[0_0_8px_rgba(220,38,38,0.6)]',
-};
-
-function formatRelativeTime(date: Date): string {
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMins = Math.floor(diffMs / 60000);
-  const diffHours = Math.floor(diffMins / 60);
-  const diffDays = Math.floor(diffHours / 24);
-
-  if (diffDays > 0) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
-  if (diffHours > 0) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
-  if (diffMins > 0) return `${diffMins} minute${diffMins > 1 ? 's' : ''} ago`;
-  return 'just now';
+  swarmId: string;
+  projectRoot: string;
 }
 
 function ProgressBar({ progress }: { progress: number }) {
+  const filled = Math.round(progress / 10);
+  const empty = 10 - filled;
+
   return (
     <div className="space-y-1">
       <div className="flex items-center justify-between text-xs">
-        <span style={{ color: 'var(--color-text-muted)' }}>Progress</span>
-        <span className="font-mono" style={{ color: 'var(--color-text-secondary)' }}>
-          {progress}%
-        </span>
+        <span className="text-slate-400">Progress</span>
+        <span className="font-mono text-slate-300">{progress}%</span>
       </div>
-      <div
-        className="h-1.5 rounded-full overflow-hidden"
-        style={{ backgroundColor: 'var(--color-bg-elevated)' }}
-      >
-        <div
-          className="h-full rounded-full transition-all duration-300"
-          style={{
-            width: `${progress}%`,
-            backgroundColor:
-              progress >= 80
-                ? 'var(--color-success)'
-                : progress >= 50
-                  ? 'var(--color-warning)'
-                  : 'var(--color-error)',
-          }}
-        />
+      <div className="flex items-center gap-2">
+        <div className="flex-1 font-mono text-xs text-slate-300">
+          {'█'.repeat(filled)}
+          {'░'.repeat(empty)}
+        </div>
       </div>
     </div>
   );
 }
 
-function AgentRosterSection({ agents }: { agents: SwarmCardType['agents'] }) {
-  const active = agents.filter((a) => a.status === 'active').length;
-  const stale = agents.filter((a) => a.status === 'stale').length;
-  const stuck = agents.filter((a) => a.status === 'stuck').length;
-  const dead = agents.filter((a) => a.status === 'dead').length;
+export function SwarmDetail({ swarmId, projectRoot }: SwarmDetailProps) {
+  const [status, setStatus] = useState<SwarmStatusFromApi | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchStatus() {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const response = await fetch(
+          `/api/swarm/status?projectRoot=${encodeURIComponent(projectRoot)}&epic=${encodeURIComponent(swarmId)}`
+        );
+        const payload = await response.json();
+        if (payload.ok && payload.data) {
+          setStatus(payload.data);
+        } else {
+          setError(payload.error?.message || 'Failed to load swarm status');
+        }
+      } catch (e) {
+        setError('Failed to fetch swarm status');
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchStatus();
+  }, [swarmId, projectRoot]);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12 text-slate-400">
+        <Loader2 className="h-5 w-5 animate-spin mr-2" />
+        Loading swarm...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="py-8 text-center text-rose-400">
+        {error}
+      </div>
+    );
+  }
+
+  if (!status) {
+    return (
+      <div className="py-8 text-center text-slate-400">
+        No swarm data found
+      </div>
+    );
+  }
 
   return (
-    <div className="space-y-2">
-      <div className="flex items-center gap-1.5">
-        <Users className="h-3.5 w-3.5" style={{ color: 'var(--color-text-muted)' }} />
-        <span className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--color-text-muted)' }}>
-          Agents ({agents.length})
-        </span>
+    <div className="space-y-4 p-4">
+      {/* Header */}
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <span className="font-mono text-sm font-semibold text-slate-200">
+            {swarmId}
+          </span>
+          <Badge variant="outline" className="text-[10px] px-1.5 py-0 text-emerald-400 border-emerald-400/30">
+            swarm
+          </Badge>
+        </div>
+        <h3 className="text-sm font-medium text-slate-200 line-clamp-2">
+          {status.epic_title}
+        </h3>
       </div>
-      <div className="flex flex-wrap gap-1.5">
-        {agents.map((agent) => (
-          <div
-            key={agent.name}
-            className={cn(
-              'flex items-center gap-1.5 px-2 py-1 rounded-md border',
-              STATUS_GLOW[agent.status]
-            )}
-            style={{ backgroundColor: 'var(--color-bg-elevated)' }}
-          >
-            <AgentAvatar name={agent.name} status={agent.status} size="sm" />
-            <span className="text-xs" style={{ color: 'var(--color-text-primary)' }}>
-              {agent.name}
-            </span>
+
+      {/* Progress */}
+      <ProgressBar progress={status.progress_percent} />
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-4 gap-2 text-xs">
+        <div className="flex items-center gap-1 text-emerald-400">
+          <CheckCircle2 className="h-3 w-3" />
+          <span>{status.completed.length} done</span>
+        </div>
+        <div className="flex items-center gap-1 text-amber-400">
+          <PlayCircle className="h-3 w-3" />
+          <span>{status.active_count} active</span>
+        </div>
+        <div className="flex items-center gap-1 text-blue-400">
+          <Clock className="h-3 w-3" />
+          <span>{status.ready_count} ready</span>
+        </div>
+        <div className="flex items-center gap-1 text-rose-400">
+          <AlertCircle className="h-3 w-3" />
+          <span>{status.blocked_count} blocked</span>
+        </div>
+      </div>
+
+      {/* Active Tasks */}
+      {status.active.length > 0 && (
+        <div className="space-y-2">
+          <h4 className="text-xs font-semibold uppercase tracking-wider text-slate-400">
+            Active ({status.active.length})
+          </h4>
+          <div className="space-y-1">
+            {status.active.map((task) => (
+              <div key={task.id} className="p-2 rounded-md bg-amber-500/10 border border-amber-500/20">
+                <span className="font-mono text-[10px] text-amber-300">{task.id}</span>
+                <p className="text-xs text-slate-300 line-clamp-1">{task.title}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Ready Tasks */}
+      {status.ready.length > 0 && (
+        <div className="space-y-2">
+          <h4 className="text-xs font-semibold uppercase tracking-wider text-slate-400">
+            Ready to Pick Up ({status.ready.length})
+          </h4>
+          <div className="space-y-1">
+            {status.ready.map((task) => (
+              <div key={task.id} className="p-2 rounded-md bg-blue-500/10 border border-blue-500/20">
+                <span className="font-mono text-[10px] text-blue-300">{task.id}</span>
+                <p className="text-xs text-slate-300 line-clamp-1">{task.title}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Blocked Tasks */}
+      {status.blocked.length > 0 && (
+        <div className="space-y-2">
+          <h4 className="text-xs font-semibold uppercase tracking-wider text-slate-400">
+            Blocked ({status.blocked.length})
+          </h4>
+          <div className="space-y-1">
+            {status.blocked.map((task) => (
+              <div key={task.id} className="p-2 rounded-md bg-rose-500/10 border border-rose-500/20">
+                <span className="font-mono text-[10px] text-rose-300">{task.id}</span>
+                <p className="text-xs text-slate-300 line-clamp-1">{task.title}</p>
+              </div>
+            ))}
           </div>
-        ))}
-      </div>
-      {(active > 0 || stale > 0 || stuck > 0 || dead > 0) && (
-        <div className="flex gap-3 text-xs" style={{ color: 'var(--color-text-muted)' }}>
-          {active > 0 && <span className="text-emerald-400">{active} active</span>}
-          {stale > 0 && <span className="text-amber-400">{stale} stale</span>}
-          {stuck > 0 && <span className="text-rose-400">{stuck} stuck</span>}
-          {dead > 0 && <span className="text-red-500">{dead} dead</span>}
         </div>
       )}
     </div>
   );
 }
-
-function AttentionSection({ items }: { items: string[] }) {
-  if (items.length === 0) return null;
-
-  return (
-    <div className="space-y-2">
-      <div className="flex items-center gap-1.5">
-        <AlertTriangle className="h-3.5 w-3.5 text-amber-400" />
-        <span className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--color-text-muted)' }}>
-          Attention ({items.length})
-        </span>
-      </div>
-      <div className="space-y-1.5">
-        {items.map((item, i) => (
-          <div
-            key={i}
-            className="flex items-start gap-1.5 p-2 rounded-md"
-            style={{ backgroundColor: 'var(--color-bg-elevated)' }}
-          >
-            <AlertTriangle className="h-3 w-3 text-amber-400 mt-0.5 flex-shrink-0" />
-            <span className="text-xs" style={{ color: 'var(--color-text-secondary)' }}>
-              {item}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function LastActivitySection({ date }: { date: Date }) {
-  return (
-    <div className="flex items-center gap-1.5 text-xs" style={{ color: 'var(--color-text-muted)' }}>
-      <Clock className="h-3.5 w-3.5" />
-      <span>Last activity {formatRelativeTime(date)}</span>
-    </div>
-  );
-}
-
-function ThreadSection() {
-  return (
-    <div className="space-y-2">
-      <span className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--color-text-muted)' }}>
-        Thread
-      </span>
-      <p className="text-text-muted text-sm italic">
-        Thread drawer coming (bb-ui2.31)
-      </p>
-    </div>
-  );
-}
-
-export function SwarmDetail({ card }: SwarmDetailProps) {
-  return (
-    <div className="space-y-4">
-      {/* Header */}
-      <div className="space-y-2">
-        <div className="flex items-center gap-2">
-          <span className="font-mono text-sm font-semibold" style={{ color: 'var(--color-text-primary)' }}>
-            {card.swarmId}
-          </span>
-          <Badge
-            variant="outline"
-            className={cn('text-[10px] px-1.5 py-0', HEALTH_COLORS[card.health])}
-          >
-            {card.health}
-          </Badge>
-        </div>
-        <h3 className="text-sm font-medium line-clamp-2" style={{ color: 'var(--color-text-primary)' }}>
-          {card.title}
-        </h3>
-      </div>
-
-      {/* Progress */}
-      <ProgressBar progress={card.progress} />
-
-      {/* Agent Roster */}
-      <AgentRosterSection agents={card.agents} />
-
-      {/* Attention Items */}
-      <AttentionSection items={card.attentionItems} />
-
-      {/* Last Activity */}
-      <LastActivitySection date={card.lastActivity} />
-
-      {/* Thread */}
-      <ThreadSection />
-    </div>
-  );
-}
diff --git a/src/components/swarm/swarm-inspector.tsx b/src/components/swarm/swarm-inspector.tsx
new file mode 100644
index 0000000..9955038
--- /dev/null
+++ b/src/components/swarm/swarm-inspector.tsx
@@ -0,0 +1,191 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { SwarmCardData, SwarmStatusFromApi } from '../../lib/swarm-api';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { CheckCircle2, PlayCircle, Clock, AlertCircle, Loader2, Users } from 'lucide-react';
+import { AgentAvatar } from '../shared/agent-avatar';
+import { useAgentPool } from '../../hooks/use-agent-pool';
+
+interface SwarmInspectorProps {
+  swarmId: string;
+  projectRoot: string;
+  onClose?: () => void;
+}
+
+function ProgressBar({ progress }: { progress: number }) {
+  const filled = Math.round(progress / 10);
+  const empty = 10 - filled;
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between text-xs">
+        <span className="text-slate-400">Progress</span>
+        <span className="font-mono text-slate-300">{progress}%</span>
+      </div>
+      <div className="flex items-center gap-1 font-mono text-xs text-slate-300 tracking-widest">
+        <span className="text-emerald-400">{'█'.repeat(filled)}</span>
+        <span className="text-slate-700">{'░'.repeat(empty)}</span>
+      </div>
+    </div>
+  );
+}
+
+export function SwarmInspector({ swarmId, projectRoot }: SwarmInspectorProps) {
+  const [status, setStatus] = useState<SwarmStatusFromApi | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const { agents, getAgentsBySwarm } = useAgentPool(projectRoot);
+
+  useEffect(() => {
+    async function fetchStatus() {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const response = await fetch(
+          `/api/swarm/status?projectRoot=${encodeURIComponent(projectRoot)}&epic=${encodeURIComponent(swarmId)}`
+        );
+        const payload = await response.json();
+        if (payload.ok && payload.data) {
+          setStatus(payload.data);
+        } else {
+          setError(payload.error?.message || 'Failed to load swarm status');
+        }
+      } catch (e) {
+        setError('Failed to fetch swarm status');
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchStatus();
+  }, [swarmId, projectRoot]);
+
+  const assignedAgents = getAgentsBySwarm(swarmId);
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center text-slate-400">
+        <Loader2 className="h-5 w-5 animate-spin mr-2" />
+        Loading...
+      </div>
+    );
+  }
+
+  if (error || !status) {
+    return (
+      <div className="p-4 text-center text-rose-400">
+        {error || 'No data found'}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-[#08111d] text-slate-200">
+      {/* Header */}
+      <div className="p-4 border-b border-[var(--ui-border-soft)] bg-[#0d1621]">
+        <div className="flex items-center gap-2 mb-2">
+          <Badge variant="outline" className="font-mono text-[10px] text-emerald-400 border-emerald-400/30 px-1.5">
+            {swarmId}
+          </Badge>
+          <span className="text-[10px] uppercase tracking-wider text-slate-500">Active Operation</span>
+        </div>
+        <h3 className="text-sm font-semibold leading-snug line-clamp-2 mb-3">
+          {status.epic_title}
+        </h3>
+        <ProgressBar progress={status.progress_percent} />
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 space-y-6">
+        {/* Agent Roster */}
+        <section>
+          <div className="flex items-center justify-between mb-3">
+             <h4 className="text-xs font-bold uppercase tracking-widest text-slate-500 flex items-center gap-2">
+              <Users className="h-3 w-3" />
+              Assigned Agents
+            </h4>
+            <span className="text-[10px] bg-slate-800 px-1.5 py-0.5 rounded text-slate-400">
+              {assignedAgents.length}
+            </span>
+          </div>
+          
+          {assignedAgents.length === 0 ? (
+             <div className="text-xs text-slate-500 italic p-3 border border-dashed border-slate-800 rounded-lg text-center">
+               No agents currently assigned.
+               <br/>
+               <span className="text-[10px]">Use "Join" on the main card.</span>
+             </div>
+          ) : (
+            <div className="space-y-2">
+              {assignedAgents.map(agent => (
+                <div key={agent.agent_id} className="flex items-center gap-3 p-2 rounded-lg bg-slate-800/50 border border-slate-800">
+                  <AgentAvatar 
+                    name={agent.display_name} 
+                    status={agent.status as any} 
+                    size="sm" 
+                  />
+                  <div>
+                    <p className="text-xs font-medium text-slate-300">{agent.display_name}</p>
+                    <p className="text-[10px] text-slate-500 font-mono">{agent.status}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </section>
+
+        {/* Task Stats */}
+        <section className="grid grid-cols-2 gap-2">
+          <div className="p-2 rounded bg-[#0f1824] border border-slate-800">
+            <div className="flex items-center gap-2 mb-1 text-emerald-400">
+              <CheckCircle2 className="h-3 w-3" />
+              <span className="text-[10px] font-bold uppercase">Done</span>
+            </div>
+            <span className="text-lg font-mono">{status.completed.length}</span>
+          </div>
+          <div className="p-2 rounded bg-[#0f1824] border border-slate-800">
+            <div className="flex items-center gap-2 mb-1 text-amber-400">
+              <PlayCircle className="h-3 w-3" />
+              <span className="text-[10px] font-bold uppercase">Active</span>
+            </div>
+            <span className="text-lg font-mono">{status.active_count}</span>
+          </div>
+          <div className="p-2 rounded bg-[#0f1824] border border-slate-800">
+            <div className="flex items-center gap-2 mb-1 text-blue-400">
+              <Clock className="h-3 w-3" />
+              <span className="text-[10px] font-bold uppercase">Ready</span>
+            </div>
+            <span className="text-lg font-mono">{status.ready_count}</span>
+          </div>
+          <div className="p-2 rounded bg-[#0f1824] border border-slate-800">
+            <div className="flex items-center gap-2 mb-1 text-rose-400">
+              <AlertCircle className="h-3 w-3" />
+              <span className="text-[10px] font-bold uppercase">Blocked</span>
+            </div>
+            <span className="text-lg font-mono">{status.blocked_count}</span>
+          </div>
+        </section>
+
+        {/* Active Tasks List */}
+        {status.active.length > 0 && (
+          <section>
+            <h4 className="text-xs font-bold uppercase tracking-widest text-slate-500 mb-3">
+              Currently Executing
+            </h4>
+            <div className="space-y-2">
+              {status.active.map((task) => (
+                <div key={task.id} className="p-3 rounded-lg bg-amber-950/20 border border-amber-900/30">
+                  <div className="flex items-center justify-between mb-1">
+                    <span className="font-mono text-[10px] text-amber-500">{task.id}</span>
+                    <Badge variant="outline" className="text-[9px] h-4 border-amber-800 text-amber-500">IN PROGRESS</Badge>
+                  </div>
+                  <p className="text-xs text-slate-300 line-clamp-2">{task.title}</p>
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/swarm/swarm-page.tsx b/src/components/swarm/swarm-page.tsx
index 575b71a..bacb579 100644
--- a/src/components/swarm/swarm-page.tsx
+++ b/src/components/swarm/swarm-page.tsx
@@ -1,10 +1,11 @@
 'use client';
 
-import { useMemo, useState } from 'react';
-import type { BeadIssue } from '../../lib/types';
-import type { SwarmCard as SwarmCardType } from '../../lib/swarm-cards';
-import { buildSwarmCards } from '../../lib/swarm-cards';
-import { SwarmCard } from './swarm-card';
+import { useMemo, useState, useCallback, useEffect, useRef } from 'react';
+import { useMissionList, type MissionData } from '../../hooks/use-mission-list';
+import { MissionCard } from '../mission/mission-card';
+import { TeamManagerDialog } from '../mission/team-manager-dialog';
+import { MissionInspector } from '../mission/mission-inspector';
+import { LaunchSwarmDialog } from './launch-dialog';
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -14,7 +15,8 @@ import {
   DropdownMenuSeparator,
 } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
-import { ArrowUpDown, ChevronDown } from 'lucide-react';
+import { ArrowUpDown, ChevronDown, Loader2, Rocket, LayoutGrid, Users, Shield } from 'lucide-react';
+import { useAgentPool } from '../../hooks/use-agent-pool';
 
 type SortOption = 'health' | 'activity' | 'progress' | 'name';
 
@@ -25,76 +27,157 @@ const SORT_LABELS: Record<SortOption, string> = {
   name: 'Name',
 };
 
-const INITIAL_LIMIT = 16; // 4x4 grid
-
-const HEALTH_ORDER: Record<string, number> = {
-  stuck: 0,
-  stale: 1,
-  dead: 2,
-  active: 3,
-};
-
-function sortCards(cards: SwarmCardType[], sortBy: SortOption): SwarmCardType[] {
-  const sorted = [...cards];
+const INITIAL_LIMIT = 16;
 
+function sortMissions(missions: MissionData[], sortBy: SortOption): MissionData[] {
+  const sorted = [...missions];
   switch (sortBy) {
-    case 'health':
-      return sorted.sort((a, b) => {
-        const orderA = HEALTH_ORDER[a.health] ?? 4;
-        const orderB = HEALTH_ORDER[b.health] ?? 4;
-        return orderA - orderB;
-      });
-    case 'activity':
-      return sorted.sort((a, b) => b.lastActivity.getTime() - a.lastActivity.getTime());
     case 'progress':
-      return sorted.sort((a, b) => b.progress - a.progress);
+      return sorted.sort((a, b) => (b.stats.done / (b.stats.total || 1)) - (a.stats.done / (a.stats.total || 1)));
+    case 'activity':
+      return sorted; // Need last_activity in API to sort real activity
+    case 'health':
+      return sorted.sort((a, b) => b.stats.blocked - a.stats.blocked); // Most blocked first
     case 'name':
-      return sorted.sort((a, b) => a.swarmId.localeCompare(b.swarmId));
+      return sorted.sort((a, b) => a.title.localeCompare(b.title));
     default:
       return sorted;
   }
 }
 
 interface SwarmPageProps {
-  issues: BeadIssue[];
+  projectRoot: string;
   selectedId?: string;
   onSelect: (id: string) => void;
+  setRightPanel?: (content: React.ReactNode | null) => void;
 }
 
-export function SwarmPage({ issues, selectedId, onSelect }: SwarmPageProps) {
+export function SwarmPage({ projectRoot, selectedId, onSelect, setRightPanel }: SwarmPageProps) {
   const [sortBy, setSortBy] = useState<SortOption>('health');
   const [expanded, setExpanded] = useState(false);
+  const [manageTeamId, setManageTeamId] = useState<string | null>(null);
 
-  const cards = useMemo(() => buildSwarmCards(issues), [issues]);
-  const sortedCards = useMemo(() => sortCards(cards, sortBy), [cards, sortBy]);
-  const visibleCards = expanded ? sortedCards : sortedCards.slice(0, INITIAL_LIMIT);
-  const hasMore = sortedCards.length > INITIAL_LIMIT;
+  // Refs to break dependency loops
+  const onSelectRef = useRef(onSelect);
+  useEffect(() => { onSelectRef.current = onSelect; }, [onSelect]);
+
+  const { missions, isLoading, error, refresh: refreshMissions } = useMissionList(projectRoot);
+  const { agents, refresh: refreshAgents } = useAgentPool(projectRoot);
+  
+  const sortedMissions = useMemo(() => sortMissions(missions, sortBy), [missions, sortBy]);
+  const visibleMissions = expanded ? sortedMissions : sortedMissions.slice(0, INITIAL_LIMIT);
+  const hasMore = sortedMissions.length > INITIAL_LIMIT;
+
+  const busyAgents = agents.filter(a => a.status === 'working').length;
+
+  // Handle Team Manager Actions
+  const handleAssign = useCallback(async (agentId: string, action: 'join' | 'leave') => {
+    // If called from inspector, we use selectedId. If called from dialog, we use manageTeamId.
+    const targetMissionId = manageTeamId || selectedId;
+    if (!targetMissionId) return;
+
+    const endpoint = action === 'join' ? '/api/mission/assign' : '/api/mission/assign';
+    
+    await fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ 
+        projectRoot, 
+        missionId: targetMissionId,
+        agentId,
+        action
+      }),
+    });
+    
+    await Promise.all([refreshMissions(), refreshAgents()]);
+  }, [manageTeamId, selectedId, projectRoot, refreshMissions, refreshAgents]);
+
+  const activeMissionForInspector = missions.find(m => m.id === selectedId);
+  const activeMission = missions.find(m => m.id === manageTeamId);
+
+  // Sync right panel on selectedId change
+  useEffect(() => {
+    if (selectedId && setRightPanel && activeMissionForInspector) {
+      setRightPanel(
+        <MissionInspector 
+          missionId={selectedId} 
+          missionTitle={activeMissionForInspector.title}
+          projectRoot={projectRoot} 
+          assignedAgents={activeMissionForInspector.agents}
+          onClose={() => onSelectRef.current('')} 
+          onAssign={(agentId, action) => handleAssign(agentId, action)}
+        />
+      );
+    } else if (!selectedId && setRightPanel) {
+      setRightPanel(null);
+    }
+  }, [selectedId, projectRoot, setRightPanel, activeMissionForInspector, handleAssign]); // Removed onSelect from deps
 
   return (
-    <div className="p-4">
-      <div className="flex items-center justify-between mb-4" style={{ maxWidth: '1200px', margin: '0 auto' }}>
-        <h2 className="text-lg font-semibold" style={{ color: 'var(--color-text-primary)' }}>
-          Swarm View
-        </h2>
+    <div className="h-full overflow-y-auto bg-[var(--ui-bg-app)] px-4 py-4 md:px-6 custom-scrollbar">
+      {/* Dashboard Stats */}
+      <div className="mx-auto mb-6 grid w-full max-w-[1200px] grid-cols-1 gap-4 sm:grid-cols-3">
+         <div className="flex items-center gap-4 rounded-xl border border-[var(--ui-border-soft)] bg-[var(--ui-bg-shell)] p-4 shadow-sm">
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-500/10 text-indigo-500">
+               <Shield className="h-5 w-5" />
+            </div>
+            <div>
+               <p className="text-[10px] font-bold uppercase tracking-widest text-slate-500">Active Missions</p>
+               <p className="text-xl font-mono text-slate-200">{missions.length}</p>
+            </div>
+         </div>
+         <div className="flex items-center gap-4 rounded-xl border border-[var(--ui-border-soft)] bg-[var(--ui-bg-shell)] p-4 shadow-sm">
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-500">
+               <Users className="h-5 w-5" />
+            </div>
+            <div>
+               <p className="text-[10px] font-bold uppercase tracking-widest text-slate-500">Agent Fleet</p>
+               <p className="text-xl font-mono text-slate-200">{agents.length}</p>
+            </div>
+         </div>
+         <div className="flex items-center gap-4 rounded-xl border border-[var(--ui-border-soft)] bg-[var(--ui-bg-shell)] p-4 shadow-sm border-l-4 border-l-emerald-500">
+            <div>
+               <p className="text-[10px] font-bold uppercase tracking-widest text-slate-500">Operational Load</p>
+               <div className="flex items-center gap-2">
+                  <span className="text-xl font-mono text-slate-200">{busyAgents}/{agents.length}</span>
+                  <span className="text-[10px] text-slate-500">engaged</span>
+               </div>
+            </div>
+         </div>
+      </div>
+
+      {/* Toolbar */}
+      <div className="mx-auto mb-4 flex w-full max-w-[1200px] items-center justify-between gap-3 rounded-xl border border-[var(--ui-border-soft)] bg-[var(--ui-bg-shell)] px-3 py-2 shadow-sm">
+        <div className="flex items-center gap-3">
+          <div className="min-w-0">
+            <p className="font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--ui-text-muted)]">Command</p>
+            <h2 className="text-base font-semibold text-[var(--ui-text-primary)]">
+              Mission Control
+            </h2>
+          </div>
+          <div className="h-8 w-px bg-white/5 mx-2" />
+          <LaunchSwarmDialog projectRoot={projectRoot} onSuccess={refreshMissions} />
+        </div>
+
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
               variant="outline"
               size="sm"
-              className="gap-2 border-white/10 bg-white/5 hover:bg-white/10"
+              className="gap-2 border-white/10 bg-white/5 text-[var(--ui-text-primary)] hover:bg-white/10"
             >
-              <ArrowUpDown className="h-4 w-4" />
-              {SORT_LABELS[sortBy]}
+              <ArrowUpDown className="h-4 w-4 text-slate-500" aria-hidden="true" />
+              <span className="text-xs uppercase tracking-wider font-bold">{SORT_LABELS[sortBy]}</span>
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-40">
-            <DropdownMenuLabel>Sort by</DropdownMenuLabel>
-            <DropdownMenuSeparator />
+          <DropdownMenuContent align="end" className="w-40 bg-[#0d1621] border-slate-800 text-slate-300">
+            <DropdownMenuLabel className="text-[10px] uppercase tracking-widest text-slate-500">Sort Missions</DropdownMenuLabel>
+            <DropdownMenuSeparator className="bg-white/5" />
             {(Object.keys(SORT_LABELS) as SortOption[]).map((option) => (
               <DropdownMenuItem
                 key={option}
                 onClick={() => setSortBy(option)}
-                className={sortBy === option ? 'bg-accent/50' : ''}
+                className={sortBy === option ? 'bg-indigo-500/10 text-indigo-400' : 'focus:bg-white/5 focus:text-white'}
               >
                 {SORT_LABELS[option]}
               </DropdownMenuItem>
@@ -103,47 +186,64 @@ export function SwarmPage({ issues, selectedId, onSelect }: SwarmPageProps) {
         </DropdownMenu>
       </div>
 
-      <div
-        className="grid gap-4"
-        style={{
-          gridTemplateColumns: 'repeat(4, 1fr)',
-          maxWidth: '1200px',
-          margin: '0 auto',
-        }}
-      >
-        {visibleCards.map((card) => (
-          <div
-            key={card.swarmId}
-            onClick={() => onSelect(card.swarmId)}
-            className={`cursor-pointer rounded-xl transition-all ${
-              selectedId === card.swarmId
-                ? 'ring-2 ring-[var(--color-accent-amber)]'
-                : 'hover:ring-1 hover:ring-white/10'
-            }`}
-          >
-            <SwarmCard card={card} />
-          </div>
+      {/* Grid */}
+      <div className="mx-auto grid w-full max-w-[1200px] grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+        {visibleMissions.map((mission) => (
+          <MissionCard
+            key={mission.id}
+            id={mission.id}
+            projectRoot={projectRoot}
+            title={mission.title}
+            description={mission.description}
+            status={mission.status as any}
+            stats={mission.stats}
+            agents={mission.agents}
+            onClick={() => onSelect(mission.id)}
+            onDeploy={() => setManageTeamId(mission.id)}
+          />
         ))}
       </div>
 
       {hasMore && (
-        <div className="flex justify-center mt-4">
+        <div className="mt-8 flex justify-center pb-12">
           <Button
             variant="outline"
             onClick={() => setExpanded(true)}
-            className="gap-2 border-white/10 bg-white/5 hover:bg-white/10"
+            className="gap-2 border-white/10 bg-white/5 text-[var(--ui-text-primary)] hover:bg-white/10"
           >
-            Show {sortedCards.length - INITIAL_LIMIT} more
-            <ChevronDown className="h-4 w-4" />
+            Show All Missions
+            <ChevronDown className="h-4 w-4" aria-hidden="true" />
           </Button>
         </div>
       )}
 
-      {sortedCards.length === 0 && (
-        <div className="text-center py-12" style={{ color: 'var(--color-text-muted)' }}>
-          No swarms found. Add agents with <code className="px-1 py-0.5 rounded bg-white/5">gt:agent</code> and <code className="px-1 py-0.5 rounded bg-white/5">swarm:*</code> labels.
+      {isLoading && (
+        <div className="py-24 flex flex-col items-center justify-center text-[var(--color-text-muted)]">
+          <Loader2 className="h-8 w-8 animate-spin mb-4 text-indigo-500" />
+          <p className="text-sm font-mono uppercase tracking-widest animate-pulse">Establishing Uplink...</p>
         </div>
       )}
+
+      {!isLoading && !error && missions.length === 0 && (
+        <div className="py-24 flex flex-col items-center justify-center text-[var(--color-text-muted)]">
+          <Rocket className="h-12 w-12 mb-4 opacity-20" />
+          <p className="text-sm mb-4">No active missions. Launch one to begin.</p>
+          <LaunchSwarmDialog projectRoot={projectRoot} onSuccess={refreshMissions} />
+        </div>
+      )}
+
+      {/* Dialogs */}
+      {activeMission && (
+        <TeamManagerDialog
+          isOpen={!!manageTeamId}
+          onClose={() => setManageTeamId(null)}
+          missionId={activeMission.id}
+          missionTitle={activeMission.title}
+          projectRoot={projectRoot}
+          assignedAgents={activeMission.agents}
+          onAssign={handleAssign}
+        />
+      )}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/swarm/swarm-workspace.tsx b/src/components/swarm/swarm-workspace.tsx
index 4ded881..7f62ca0 100644
--- a/src/components/swarm/swarm-workspace.tsx
+++ b/src/components/swarm/swarm-workspace.tsx
@@ -1,26 +1,141 @@
 "use client";
 
 import React, { useState } from 'react';
-import { SwarmLiveDag } from './swarm-live-dag';
-import { ConvoyStepper } from './convoy-stepper';
+import { TelemetryGrid } from './telemetry-grid';
+import { ConvoyStepper, type Phase } from './convoy-stepper';
 import { Network, Blocks, FileCode2, Info } from 'lucide-react';
 import { cn } from '../../lib/utils';
+import type { BeadIssue } from '../../lib/types';
+import { useArchetypes } from '../../hooks/use-archetypes';
+import { useTemplates } from '../../hooks/use-templates';
+import { ArchetypeInspector } from './archetype-inspector';
+import { TemplateInspector } from './template-inspector';
 
-export function SwarmWorkspace({ selectedMissionId }: { selectedMissionId?: string }) {
+export function SwarmWorkspace({ selectedMissionId, issues = [] }: { selectedMissionId?: string, issues?: BeadIssue[] }) {
     const [activeTab, setActiveTab] = useState<'operations' | 'archetypes' | 'templates'>('operations');
 
+    // Inspector State
+    const [inspectingArchetypeId, setInspectingArchetypeId] = useState<string | null>(null);
+    const [inspectingTemplateId, setInspectingTemplateId] = useState<string | null>(null);
+
+    const { archetypes, isLoading: archetypesLoading } = useArchetypes();
+    const { templates, isLoading: templatesLoading } = useTemplates();
+
+    // Simulation State
+    const [isSimulating, setIsSimulating] = useState(false);
+    const [simPhase, setSimPhase] = useState<Phase>('planning');
+    const [simBeads, setSimBeads] = useState<BeadIssue[]>([]);
+
+    const handleSummon = () => {
+        setIsSimulating(true);
+        setSimPhase('planning');
+        setSimBeads([]);
+
+        // Mock Flow: Planning -> Graph Generation -> Deployment -> Execution
+        setTimeout(() => {
+            setSimPhase('deployment'); // Skipping Graph Generation for simplicity here
+
+            // Generate some fake beads
+            const mockBeads: BeadIssue[] = [
+                {
+                    id: 'b-mock-1',
+                    title: 'Analyze DB Schema',
+                    status: 'closed',
+                    assignee: 'Alice (Architect)',
+                    owner: null,
+                    description: null,
+                    issue_type: 'task',
+                    priority: 1,
+                    labels: [],
+                    dependencies: [{ type: 'parent', target: selectedMissionId || 'epic' }],
+                    created_at: new Date().toISOString(),
+                    updated_at: new Date().toISOString(),
+                    closed_at: null, close_reason: null, closed_by_session: null, created_by: null, due_at: null, estimated_minutes: null, external_ref: null, metadata: {}
+                },
+                {
+                    id: 'b-mock-2',
+                    title: 'Implement API Routes',
+                    status: 'in_progress',
+                    assignee: 'Bob (Backend)',
+                    owner: null,
+                    description: null,
+                    issue_type: 'task',
+                    priority: 1,
+                    labels: [],
+                    dependencies: [
+                        { type: 'parent', target: selectedMissionId || 'epic' },
+                        { type: 'blocks', target: 'b-mock-1' } // Bob waits for Alice
+                    ],
+                    created_at: new Date().toISOString(),
+                    updated_at: new Date().toISOString(),
+                    closed_at: null, close_reason: null, closed_by_session: null, created_by: null, due_at: null, estimated_minutes: null, external_ref: null, metadata: {}
+                },
+                {
+                    id: 'b-mock-3',
+                    title: 'Build UI Components',
+                    status: 'blocked',
+                    assignee: 'Charlie (Frontend)',
+                    owner: null,
+                    description: null,
+                    issue_type: 'task',
+                    priority: 1,
+                    labels: [],
+                    dependencies: [
+                        { type: 'parent', target: selectedMissionId || 'epic' },
+                        { type: 'blocks', target: 'b-mock-2' } // Charlie waits for Bob
+                    ],
+                    created_at: new Date().toISOString(),
+                    updated_at: new Date().toISOString(),
+                    closed_at: null, close_reason: null, closed_by_session: null, created_by: null, due_at: null, estimated_minutes: null, external_ref: null, metadata: {}
+                }
+            ];
+
+            setTimeout(() => {
+                setSimBeads(mockBeads);
+                setSimPhase('execution');
+            }, 1000);
+
+        }, 1500);
+    };
+
+    const displayBeads = isSimulating ? simBeads : issues;
+
     const renderTabContent = () => {
         switch (activeTab) {
             case 'operations':
                 return selectedMissionId
-                    ? (
-                        <div className="flex flex-col h-full gap-4 animate-in fade-in slide-in-from-bottom-4 duration-500">
-                            <ConvoyStepper activePhase="execution" />
-                            <div className="flex-1 min-h-0 bg-[#0f1824]/50 rounded-xl border border-[var(--ui-border-soft)] p-2 shadow-inner">
-                                <SwarmLiveDag epicId={selectedMissionId} />
+                    ? (() => {
+                        const epic = issues.find(i => i.id === selectedMissionId);
+                        let epicPhase: Phase = 'planning';
+                        if (epic?.status === 'in_progress') epicPhase = 'execution';
+                        if (epic?.status === 'closed' || epic?.status === 'tombstone') epicPhase = 'debrief';
+
+                        return (
+                            <div className="flex flex-col h-full gap-4 animate-in fade-in slide-in-from-bottom-4 duration-500">
+                                <div className="flex items-center justify-between">
+                                    <ConvoyStepper activePhase={isSimulating ? simPhase : epicPhase} />
+                                    <div className="flex gap-2">
+                                        <button
+                                            onClick={() => setIsSimulating(false)}
+                                            className="px-3 py-1.5 text-xs font-semibold bg-rose-500/10 text-rose-500 hover:bg-rose-500/20 rounded-md transition-colors"
+                                        >
+                                            Halt Swarm
+                                        </button>
+                                        <button
+                                            onClick={handleSummon}
+                                            disabled={isSimulating && simPhase !== 'debrief'}
+                                            className="px-3 py-1.5 text-xs font-bold bg-[var(--ui-accent-info)] text-white hover:bg-[var(--ui-accent-info)]/90 shadow shadow-[var(--ui-accent-info)]/20 rounded-md transition-colors disabled:opacity-50"
+                                        >
+                                            Summon Polecats
+                                        </button>
+                                    </div>
+                                </div>
+                                <div className="flex-1 min-h-0">
+                                    <TelemetryGrid epicId={selectedMissionId} issues={displayBeads} archetypes={archetypes} />
+                                </div>
                             </div>
-                        </div>
-                    )
+                        )
+                    })()
                     : (
                         <div className="flex flex-col items-center justify-center h-full text-center space-y-4 animate-in fade-in duration-700">
                             <div className="p-4 bg-[var(--ui-accent-info)]/10 rounded-full">
@@ -36,36 +151,122 @@ export function SwarmWorkspace({ selectedMissionId }: { selectedMissionId?: stri
                     );
             case 'archetypes':
                 return (
-                    <div className="p-6 bg-[#0f1824]/30 rounded-xl border border-[var(--ui-border-soft)] h-full animate-in fade-in slide-in-from-bottom-4 duration-500">
+                    <div className="p-6 bg-[#0f1824]/30 rounded-xl border border-[var(--ui-border-soft)] h-full animate-in fade-in slide-in-from-bottom-4 duration-500 overflow-y-auto custom-scrollbar">
                         <h3 className="text-xl font-bold text-[var(--ui-text-primary)] mb-2">Agent Archetypes</h3>
                         <p className="text-[var(--ui-text-muted)] text-sm mb-6">Manage the base roles and system prompts available to your swarms.</p>
                         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                            {/* Placeholder Cards */}
-                            {[1, 2, 3].map(i => (
-                                <div key={i} className="bg-[#111f2b] p-4 rounded-lg border border-[var(--ui-border-soft)] hover:border-[var(--ui-accent-info)]/50 transition-colors">
-                                    <div className="h-10 w-10 rounded-lg bg-[var(--ui-accent-info)]/20 mb-3" />
-                                    <div className="h-4 w-24 bg-white/10 rounded mb-2" />
-                                    <div className="h-3 w-3/4 bg-white/5 rounded" />
+                            {archetypesLoading ? (
+                                [1, 2, 3].map(i => (
+                                    <div key={i} className="bg-[#111f2b] p-4 rounded-lg border border-[var(--ui-border-soft)] animate-pulse">
+                                        <div className="h-10 w-10 rounded-lg bg-[var(--ui-accent-info)]/20 mb-3" />
+                                        <div className="h-4 w-24 bg-white/10 rounded mb-2" />
+                                        <div className="h-3 w-3/4 bg-white/5 rounded" />
+                                    </div>
+                                ))
+                            ) : archetypes.length === 0 ? (
+                                <div className="col-span-full text-center text-[var(--ui-text-muted)] text-sm py-8 border border-dashed border-white/10 rounded-lg">
+                                    No archetypes found. Create one in the `.beads/archetypes/` directory.
                                 </div>
-                            ))}
+                            ) : (
+                                archetypes.map(arc => (
+                                    <button
+                                        key={arc.id}
+                                        onClick={() => setInspectingArchetypeId(arc.id)}
+                                        className="bg-[#111f2b] p-4 rounded-xl border border-[var(--ui-border-soft)] hover:border-[var(--ui-accent-info)]/50 focus:outline-none focus:ring-2 focus:ring-[var(--ui-accent-info)] transition-colors shadow-[0_18px_28px_-22px_rgba(0,0,0,0.96)] flex flex-col text-left w-full h-full"
+                                    >
+                                        <div className="flex items-center gap-3 mb-3">
+                                            <div className="h-10 w-10 flex-shrink-0 rounded-lg flex items-center justify-center font-bold text-lg border" style={{ backgroundColor: `${arc.color}15`, color: arc.color, borderColor: `${arc.color}30` }}>
+                                                {arc.name.charAt(0)}
+                                            </div>
+                                            <div className="truncate">
+                                                <div className="font-semibold text-[15px] text-[var(--ui-text-primary)] truncate">{arc.name}</div>
+                                                <div className="text-[10px] text-[var(--ui-text-muted)] font-mono uppercase tracking-wider truncate">{arc.id}</div>
+                                            </div>
+                                        </div>
+                                        <div className="text-xs text-[var(--ui-text-muted)] line-clamp-2 mb-4 flex-1">
+                                            {arc.description}
+                                        </div>
+                                        <div className="flex flex-wrap gap-1 mt-auto">
+                                            {arc.capabilities.slice(0, 3).map((cap, idx) => (
+                                                <span key={idx} className="px-1.5 py-0.5 rounded bg-white/5 text-[9px] uppercase font-semibold text-[var(--ui-text-muted)] border border-white/10">
+                                                    {cap}
+                                                </span>
+                                            ))}
+                                            {arc.capabilities.length > 3 && (
+                                                <span className="px-1.5 py-0.5 rounded bg-white/5 text-[9px] uppercase font-semibold text-[var(--ui-text-muted)] border border-white/10">
+                                                    +{arc.capabilities.length - 3}
+                                                </span>
+                                            )}
+                                        </div>
+                                    </button>
+                                ))
+                            )}
                         </div>
                     </div>
                 );
             case 'templates':
                 return (
-                    <div className="p-6 bg-[#0f1824]/30 rounded-xl border border-[var(--ui-border-soft)] h-full animate-in fade-in slide-in-from-bottom-4 duration-500">
+                    <div className="p-6 bg-[#0f1824]/30 rounded-xl border border-[var(--ui-border-soft)] h-full animate-in fade-in slide-in-from-bottom-4 duration-500 overflow-y-auto custom-scrollbar">
                         <h3 className="text-xl font-bold text-[var(--ui-text-primary)] mb-2">Swarm Templates</h3>
                         <p className="text-[var(--ui-text-muted)] text-sm mb-6">Define predefined teams and formulas for rapid mission deployment.</p>
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            {[1, 2].map(i => (
-                                <div key={i} className="bg-[#111f2b] p-5 rounded-lg border border-[var(--ui-border-soft)] flex items-center gap-4 hover:border-amber-500/50 transition-colors">
-                                    <div className="h-12 w-12 rounded-full bg-amber-500/20" />
-                                    <div>
-                                        <div className="h-4 w-32 bg-white/10 rounded mb-2" />
-                                        <div className="h-3 w-48 bg-white/5 rounded" />
+                            {templatesLoading ? (
+                                [1, 2].map(i => (
+                                    <div key={i} className="bg-[#111f2b] p-5 rounded-xl border border-[var(--ui-border-soft)] flex items-center gap-4 animate-pulse">
+                                        <div className="h-12 w-12 rounded-full bg-amber-500/20" />
+                                        <div className="flex-1">
+                                            <div className="h-4 w-32 bg-white/10 rounded mb-2" />
+                                            <div className="h-3 w-48 bg-white/5 rounded" />
+                                        </div>
                                     </div>
+                                ))
+                            ) : templates.length === 0 ? (
+                                <div className="col-span-full text-center text-[var(--ui-text-muted)] text-sm py-8 border border-dashed border-white/10 rounded-lg">
+                                    No templates found. Create one in the `.beads/templates/` directory.
                                 </div>
-                            ))}
+                            ) : (
+                                templates.map(tpl => (
+                                    <button
+                                        key={tpl.id}
+                                        onClick={() => setInspectingTemplateId(tpl.id)}
+                                        className="bg-[#111f2b] p-5 rounded-xl border border-[var(--ui-border-soft)] flex flex-col gap-4 hover:border-amber-500/50 focus:outline-none focus:ring-2 focus:ring-amber-500/50 transition-colors shadow-[0_18px_28px_-22px_rgba(0,0,0,0.96)] text-left w-full"
+                                    >
+                                        <div className="flex items-center justify-between w-full">
+                                            <div className="flex items-center gap-3 w-full pr-2">
+                                                <div className="h-10 w-10 flex-shrink-0 rounded-full bg-amber-500/10 border border-amber-500/20 flex items-center justify-center text-amber-500 font-bold">
+                                                    {tpl.team.reduce((acc, curr) => acc + curr.count, 0)}
+                                                </div>
+                                                <div className="truncate">
+                                                    <div className="font-semibold text-[15px] text-[var(--ui-text-primary)] truncate">{tpl.name}</div>
+                                                    <div className="text-[10px] text-[var(--ui-text-muted)] font-mono uppercase tracking-wider truncate">{tpl.id}</div>
+                                                </div>
+                                            </div>
+                                            {tpl.isBuiltIn && (
+                                                <span className="flex-shrink-0 px-2 py-0.5 rounded-full bg-white/5 text-[9px] uppercase font-bold text-[var(--ui-text-muted)] border border-white/10">Default</span>
+                                            )}
+                                        </div>
+                                        <div className="text-xs text-[var(--ui-text-muted)] line-clamp-2">
+                                            {tpl.description}
+                                        </div>
+                                        <div className="mt-auto pt-3 border-t border-[var(--ui-border-soft)] w-full">
+                                            <div className="text-[10px] uppercase font-bold text-[var(--ui-text-muted)] tracking-wider mb-2">Team Composition</div>
+                                            <div className="flex flex-wrap gap-2">
+                                                {tpl.team.map((member, idx) => {
+                                                    const arch = archetypes.find(a => a.id === member.archetypeId);
+                                                    return (
+                                                        <div key={idx} className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-[#0f1824] border border-[var(--ui-border-soft)]">
+                                                            <div className="h-4 w-4 rounded text-[9px] flex items-center justify-center font-bold" style={{ backgroundColor: `${arch?.color || '#888'}20`, color: arch?.color || '#888' }}>
+                                                                {arch?.name.charAt(0) || '?'}
+                                                            </div>
+                                                            <span className="text-[11px] text-[var(--ui-text-primary)] font-medium">{member.count}x {arch?.name || member.archetypeId}</span>
+                                                        </div>
+                                                    );
+                                                })}
+                                            </div>
+                                        </div>
+                                    </button>
+                                ))
+                            )}
                         </div>
                     </div>
                 );
@@ -121,6 +322,22 @@ export function SwarmWorkspace({ selectedMissionId }: { selectedMissionId?: stri
                     {renderTabContent()}
                 </div>
             </main>
+
+            {/* Popups */}
+            {inspectingArchetypeId && (
+                <ArchetypeInspector
+                    archetype={archetypes.find(a => a.id === inspectingArchetypeId)!}
+                    onClose={() => setInspectingArchetypeId(null)}
+                />
+            )}
+
+            {inspectingTemplateId && (
+                <TemplateInspector
+                    template={templates.find(t => t.id === inspectingTemplateId)!}
+                    archetypes={archetypes}
+                    onClose={() => setInspectingTemplateId(null)}
+                />
+            )}
         </div>
     );
 }
diff --git a/src/components/swarm/telemetry-grid.tsx b/src/components/swarm/telemetry-grid.tsx
new file mode 100644
index 0000000..37f7287
--- /dev/null
+++ b/src/components/swarm/telemetry-grid.tsx
@@ -0,0 +1,217 @@
+"use client";
+
+import React, { useState } from 'react';
+import dynamic from 'next/dynamic';
+import { Loader2, AlertCircle, Bot, Zap } from 'lucide-react';
+import type { BeadIssue } from '../../lib/types';
+import type { AgentArchetype } from '../../lib/types-swarm';
+
+const SpecializedAgentDagLazy = dynamic(
+    () => import('./specialized-agent-dag').then((m) => m.SpecializedAgentDag),
+    {
+        ssr: false,
+        loading: () => (
+            <div className="flex items-center justify-center p-8 w-full h-full min-h-[200px]">
+                <Loader2 className="animate-spin text-muted-foreground" />
+            </div>
+        ),
+    }
+);
+
+interface TelemetryGridProps {
+    epicId: string;
+    issues: BeadIssue[];
+    archetypes: AgentArchetype[];
+}
+
+export function TelemetryGrid({ epicId, issues, archetypes }: TelemetryGridProps) {
+    const [selectedBeadId, setSelectedBeadId] = useState<string | null>(null);
+    const [isPrepping, setIsPrepping] = useState(false);
+    const [prepSuccess, setPrepSuccess] = useState(false);
+    const [selectedArchetypeForPrep, setSelectedArchetypeForPrep] = useState<string>('');
+
+    // 1. Filter beads for this epic
+    const beads = issues.filter(issue => {
+        if (issue.issue_type === 'epic') return false; // don't include epic itself in DAG
+        const parent = issue.dependencies.find(d => d.type === 'parent');
+        return parent?.target === epicId;
+    });
+
+    // 2. Compute "Attention Feed" (Blocked beads)
+    const blockedBeads = beads.filter(b => b.status === 'blocked');
+
+    // 3. Compute "Active Roster" (Unique assignees working on in_progress beads)
+    const activeAssignees = new Set<string>();
+    const rosterEntries: { assignee: string, currentTask: string, archetype?: AgentArchetype }[] = [];
+
+    beads.forEach(b => {
+        if (b.status === 'in_progress' && b.assignee && !activeAssignees.has(b.assignee)) {
+            activeAssignees.add(b.assignee);
+
+            const assigneeStr = b.assignee.toLowerCase();
+            const matchedArchetype = archetypes.find(a =>
+                assigneeStr.includes(a.id.toLowerCase()) ||
+                assigneeStr.includes(a.name.toLowerCase())
+            );
+
+            rosterEntries.push({
+                assignee: b.assignee,
+                currentTask: b.title,
+                archetype: matchedArchetype
+            });
+        }
+    });
+
+    const selectedBead = selectedBeadId ? beads.find(b => b.id === selectedBeadId) : null;
+
+    const handlePrepTask = async () => {
+        if (!selectedBead || !selectedArchetypeForPrep) return;
+        setIsPrepping(true);
+        setPrepSuccess(false);
+        try {
+            const res = await fetch('/api/swarm/prep', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    beadId: selectedBead.id,
+                    archetypeId: selectedArchetypeForPrep
+                })
+            });
+            if (!res.ok) throw new Error('Prep failed');
+            setPrepSuccess(true);
+            setTimeout(() => setPrepSuccess(false), 3000);
+
+            // Note: The shell's useIssues typically polls or relies on SWR to update. 
+            // In a real app we'd call mutate() here.
+        } catch (e) {
+            console.error(e);
+        } finally {
+            setIsPrepping(false);
+        }
+    };
+
+    return (
+        <div className="flex flex-col lg:flex-row gap-4 h-full animate-in fade-in duration-500">
+            {/* Left/Top: Specialized DAG */}
+            <div className="flex-[2] min-h-[400px] lg:min-h-0 bg-[#0f1824]/50 rounded-xl border border-[var(--ui-border-soft)] shadow-inner relative overflow-hidden flex flex-col">
+                <div className="absolute top-3 left-3 z-10 px-3 py-1.5 bg-background/80 backdrop-blur rounded-md border border-[var(--ui-border-soft)] flex items-center gap-2 shadow-sm pointer-events-none">
+                    <Bot className="w-4 h-4 text-[var(--ui-accent-info)]" />
+                    <span className="text-xs font-semibold tracking-wide uppercase text-[var(--ui-text-primary)]">Agent Flow</span>
+                </div>
+                <div className="flex-1 w-full h-full">
+                    <SpecializedAgentDagLazy
+                        beads={beads}
+                        archetypes={archetypes}
+                        selectedId={selectedBeadId}
+                        onSelect={setSelectedBeadId}
+                    />
+                </div>
+            </div>
+
+            {/* Right/Bottom: Feeds */}
+            <div className="flex-1 flex flex-col gap-4 min-w-[300px]">
+
+                {/* Task Assignment Panel (Shows if a node is selected) */}
+                {selectedBead && (
+                    <div className="flex-none bg-[#111f2b] rounded-xl border border-[var(--ui-accent-info)]/30 flex flex-col overflow-hidden shadow-[0_8px_16px_-12px_rgba(0,0,0,0.8)] ring-1 ring-[var(--ui-accent-info)]/10">
+                        <div className="px-4 py-3 border-b border-[var(--ui-border-soft)] bg-[#14202e] flex items-center gap-2">
+                            <Zap className="w-4 h-4 text-[var(--ui-accent-info)]" />
+                            <h3 className="font-semibold text-sm text-[var(--ui-text-primary)]">Task Assignment</h3>
+                        </div>
+                        <div className="p-4 space-y-4">
+                            <div>
+                                <div className="text-[10px] font-mono text-[var(--ui-text-muted)] uppercase tracking-wider mb-1">{selectedBead.id}</div>
+                                <div className="text-sm font-semibold text-[var(--ui-text-primary)] leading-snug">{selectedBead.title}</div>
+                                <div className="text-xs text-[var(--ui-text-muted)] mt-1">Status: <span className="font-semibold uppercase">{selectedBead.status}</span></div>
+                            </div>
+
+                            {(selectedBead.status === 'open' || selectedBead.status === 'blocked') ? (
+                                <div className="space-y-3">
+                                    <div>
+                                        <label className="text-xs font-medium text-[var(--ui-text-muted)] mb-1.5 block">Assign Agent Archetype</label>
+                                        <select
+                                            value={selectedArchetypeForPrep}
+                                            onChange={(e) => setSelectedArchetypeForPrep(e.target.value)}
+                                            className="w-full bg-[#0a111a] border border-[var(--ui-border-soft)] rounded-md px-3 py-2 text-sm text-[var(--ui-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--ui-accent-info)]"
+                                        >
+                                            <option value="" disabled>Select archetype...</option>
+                                            {archetypes.map(a => (
+                                                <option key={a.id} value={a.id}>{a.name}</option>
+                                            ))}
+                                        </select>
+                                    </div>
+                                    <button
+                                        onClick={handlePrepTask}
+                                        disabled={!selectedArchetypeForPrep || isPrepping || prepSuccess}
+                                        className={`w-full py-2 text-white text-sm font-bold rounded-md disabled:opacity-50 transition-colors flex items-center justify-center ${prepSuccess ? 'bg-emerald-500' : 'bg-[var(--ui-accent-info)] hover:bg-[var(--ui-accent-info)]/90'}`}
+                                    >
+                                        {isPrepping ? <Loader2 className="w-4 h-4 animate-spin" /> : prepSuccess ? 'Prep Successful!' : 'Prep Task for Swarm'}
+                                    </button>
+                                </div>
+                            ) : (
+                                <div className="text-xs text-amber-500 bg-amber-500/10 p-2 rounded border border-amber-500/20">
+                                    Task is {selectedBead.status.replace('_', ' ')}. Only open or blocked tasks can be prepped.
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                )}
+
+                {/* Priority Attention */}
+                <div className="flex-1 bg-[#111f2b] rounded-xl border border-[var(--ui-border-soft)] flex flex-col overflow-hidden shadow-[0_8px_16px_-12px_rgba(0,0,0,0.8)]">
+                    <div className="px-4 py-3 border-b border-[var(--ui-border-soft)] bg-[#14202e] flex items-center gap-2">
+                        <AlertCircle className="w-4 h-4 text-rose-500" />
+                        <h3 className="font-semibold text-sm text-[var(--ui-text-primary)]">Priority Attention</h3>
+                        <span className="ml-auto bg-rose-500/10 text-rose-500 text-[10px] font-bold px-2 py-0.5 rounded-full">{blockedBeads.length} Blocked</span>
+                    </div>
+                    <div className="flex-1 overflow-y-auto p-3 space-y-2 custom-scrollbar">
+                        {blockedBeads.length === 0 ? (
+                            <div className="text-center text-xs text-[var(--ui-text-muted)] mt-6">
+                                All clear. No blocked tasks.
+                            </div>
+                        ) : (
+                            blockedBeads.map(b => (
+                                <div key={b.id} className="p-3 bg-rose-500/5 border border-rose-500/20 rounded-lg">
+                                    <div className="text-xs font-mono text-rose-500 mb-1">{b.id}</div>
+                                    <div className="text-sm text-[var(--ui-text-primary)] font-medium leading-tight">{b.title}</div>
+                                </div>
+                            ))
+                        )}
+                    </div>
+                </div>
+
+                {/* Active Roster */}
+                <div className="flex-1 bg-[#111f2b] rounded-xl border border-[var(--ui-border-soft)] flex flex-col overflow-hidden shadow-[0_8px_16px_-12px_rgba(0,0,0,0.8)]">
+                    <div className="px-4 py-3 border-b border-[var(--ui-border-soft)] bg-[#14202e] flex items-center gap-2">
+                        <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+                        <h3 className="font-semibold text-sm text-[var(--ui-text-primary)]">Active Roster</h3>
+                        <span className="ml-auto text-[10px] uppercase font-bold text-[var(--ui-text-muted)] tracking-wider">{rosterEntries.length} Deployed</span>
+                    </div>
+                    <div className="flex-1 overflow-y-auto p-3 space-y-2 custom-scrollbar">
+                        {rosterEntries.length === 0 ? (
+                            <div className="text-center text-xs text-[var(--ui-text-muted)] mt-6">
+                                No agents currently active.
+                            </div>
+                        ) : (
+                            rosterEntries.map((r, i) => (
+                                <div key={i} className="flex gap-3 p-3 bg-[#0a111a] border border-white/5 rounded-lg items-center">
+                                    <div
+                                        className="h-8 w-8 rounded flex-shrink-0 flex items-center justify-center font-bold text-sm border"
+                                        style={{ backgroundColor: `${r.archetype?.color || '#888'}15`, color: r.archetype?.color || '#888', borderColor: `${r.archetype?.color || '#888'}30` }}
+                                    >
+                                        {r.assignee.charAt(0).toUpperCase()}
+                                    </div>
+                                    <div className="min-w-0 flex-1">
+                                        <div className="text-xs font-bold text-[var(--ui-text-primary)] truncate">{r.assignee}</div>
+                                        <div className="text-[10px] text-[var(--ui-text-muted)] truncate">{r.currentTask}</div>
+                                    </div>
+                                </div>
+                            ))
+                        )}
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/swarm/template-inspector.tsx b/src/components/swarm/template-inspector.tsx
new file mode 100644
index 0000000..9260a46
--- /dev/null
+++ b/src/components/swarm/template-inspector.tsx
@@ -0,0 +1,138 @@
+import React from 'react';
+import { X, Save, Edit, Link, Network } from 'lucide-react';
+import type { SwarmTemplate, AgentArchetype } from '../../lib/types-swarm';
+
+interface TemplateInspectorProps {
+    template: SwarmTemplate;
+    archetypes: AgentArchetype[];
+    onClose: () => void;
+}
+
+export function TemplateInspector({ template, archetypes, onClose }: TemplateInspectorProps) {
+    if (!template) return null;
+
+    const totalAgents = template.team.reduce((acc, curr) => acc + curr.count, 0);
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200">
+            <div className="flex flex-col h-[75vh] w-full max-w-2xl overflow-hidden rounded-xl border border-[var(--ui-border-soft)] bg-[#0f1824] shadow-2xl animate-in zoom-in-95 duration-200">
+
+                {/* Header */}
+                <div className="flex items-center justify-between border-b border-[var(--ui-border-soft)] px-5 py-4 bg-[#14202e]">
+                    <div className="flex items-center gap-4">
+                        <div className="h-10 w-10 flex-shrink-0 rounded-full bg-amber-500/10 border border-amber-500/20 flex items-center justify-center text-amber-500 font-bold text-lg">
+                            {totalAgents}
+                        </div>
+                        <div>
+                            <div className="flex items-center gap-2">
+                                <h2 className="text-lg font-bold text-[var(--ui-text-primary)] leading-tight">{template.name}</h2>
+                                {template.isBuiltIn && (
+                                    <span className="px-1.5 py-0.5 rounded-full bg-white/10 text-[9px] uppercase font-bold text-[var(--ui-text-muted)] border border-white/10">Built-in</span>
+                                )}
+                            </div>
+                            <p className="font-mono uppercase tracking-wider text-[10px] text-[var(--ui-text-muted)] mt-0.5">{template.id}</p>
+                        </div>
+                    </div>
+                    <button
+                        onClick={onClose}
+                        className="rounded-full p-2 text-[var(--ui-text-muted)] hover:bg-white/5 hover:text-white transition-colors"
+                    >
+                        <X className="w-5 h-5" />
+                    </button>
+                </div>
+
+                {/* Body Content */}
+                <div className="flex-1 overflow-y-auto p-5 space-y-6 custom-scrollbar">
+
+                    {/* Metadata Section */}
+                    <div>
+                        <label className="text-xs font-semibold text-[var(--ui-text-muted)] uppercase tracking-wider mb-1.5 block">Purpose / Description</label>
+                        <textarea
+                            defaultValue={template.description}
+                            readOnly
+                            rows={2}
+                            className="w-full bg-[#0a111a] border border-[var(--ui-border-soft)] rounded-md px-3 py-2 text-sm text-[var(--ui-text-primary)] focus:outline-none focus:border-[var(--ui-accent-info)] focus:ring-1 focus:ring-[var(--ui-accent-info)] resize-none"
+                        />
+                    </div>
+
+                    {/* Team Composition Builder */}
+                    <div className="border-t border-[var(--ui-border-soft)] pt-5">
+                        <div className="flex items-center justify-between mb-4">
+                            <label className="text-xs font-semibold text-[var(--ui-text-muted)] uppercase tracking-wider flex items-center gap-2">
+                                <Network className="w-4 h-4 text-emerald-500" />
+                                Roster Composition
+                            </label>
+                            <button className="text-[11px] font-semibold text-[var(--ui-accent-info)] hover:text-white bg-[var(--ui-accent-info)]/10 px-2 py-1 rounded transition-colors disabled:opacity-50">
+                                + Add Member
+                            </button>
+                        </div>
+
+                        <div className="space-y-2">
+                            {template.team.map((member, idx) => {
+                                const arch = archetypes.find(a => a.id === member.archetypeId);
+                                return (
+                                    <div key={idx} className="flex items-center gap-3 bg-[#111f2b] border border-[var(--ui-border-soft)] p-3 rounded-lg">
+                                        <div className="h-8 w-8 rounded text-sm flex items-center justify-center font-bold" style={{ backgroundColor: `${arch?.color || '#888'}20`, color: arch?.color || '#888' }}>
+                                            {arch?.name.charAt(0) || '?'}
+                                        </div>
+                                        <div className="flex-1">
+                                            <div className="font-semibold text-sm text-[var(--ui-text-primary)]">{arch?.name || member.archetypeId}</div>
+                                            <div className="text-[11px] text-[var(--ui-text-muted)]">{arch?.description || 'Unknown Archetype'}</div>
+                                        </div>
+                                        <div className="flex items-center gap-2 bg-[#0a111a] border border-[var(--ui-border-soft)] rounded-md p-1">
+                                            <span className="text-xs font-mono text-[var(--ui-text-muted)] px-2">Count:</span>
+                                            <input
+                                                type="number"
+                                                defaultValue={member.count}
+                                                readOnly
+                                                className="w-12 bg-transparent text-sm font-bold text-center text-[var(--ui-text-primary)] focus:outline-none"
+                                            />
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+
+                    {/* Advanced: Proto-formula */}
+                    <div className="border-t border-[var(--ui-border-soft)] pt-5">
+                        <label className="text-xs font-semibold text-[var(--ui-text-muted)] uppercase tracking-wider mb-2 flex items-center gap-2">
+                            <Link className="w-4 h-4 text-amber-500" />
+                            MOL Proto-Formula (Optional)
+                        </label>
+                        <div className="flex items-center gap-3">
+                            <input
+                                type="text"
+                                defaultValue={template.protoFormula || ''}
+                                placeholder="e.g. 'release' or 'bugfix'"
+                                readOnly
+                                className="flex-1 bg-[#0a111a] border border-[var(--ui-border-soft)] rounded-md px-3 py-2 font-mono text-sm text-amber-500 focus:outline-none focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/50"
+                            />
+                            <div className="text-[11px] text-[var(--ui-text-muted)] max-w-[200px] leading-tight">
+                                Specifies a Gastown Formula to execute (`bd mol pour`) when launching this swarm.
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+
+                {/* Footer Controls */}
+                <div className="border-t border-[var(--ui-border-soft)] px-5 py-4 bg-[#14202e] flex justify-end gap-3">
+                    <button
+                        onClick={onClose}
+                        className="px-4 py-2 text-sm font-semibold text-[var(--ui-text-primary)] hover:bg-white/5 rounded-md transition-colors"
+                    >
+                        Close
+                    </button>
+                    <button
+                        disabled
+                        className="flex items-center gap-2 px-4 py-2 text-sm font-bold bg-[var(--ui-accent-info)] hover:bg-[var(--ui-accent-info)]/90 text-white rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                        <Save className="w-4 h-4" />
+                        Save Template
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/hooks/use-agent-pool.ts b/src/hooks/use-agent-pool.ts
new file mode 100644
index 0000000..5b868d5
--- /dev/null
+++ b/src/hooks/use-agent-pool.ts
@@ -0,0 +1,61 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import type { AgentRecord } from '../lib/agent-registry';
+
+interface UseAgentPoolResult {
+  agents: AgentRecord[];
+  isLoading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+  getAgentsBySwarm: (swarmId: string) => AgentRecord[];
+}
+
+async function fetchAgents(projectRoot: string): Promise<AgentRecord[]> {
+  try {
+    const response = await fetch(`/api/agents/list?projectRoot=${encodeURIComponent(projectRoot)}`);
+    const payload = await response.json();
+    
+    if (!response.ok || !payload.ok) {
+      console.error('Agent fetch failed:', payload.error);
+      return [];
+    }
+    
+    return (payload.data || []) as AgentRecord[];
+  } catch (err) {
+    console.error('Agent fetch error:', err);
+    return [];
+  }
+}
+
+export function useAgentPool(projectRoot: string): UseAgentPoolResult {
+  const [agents, setAgents] = useState<AgentRecord[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    // Only set loading on first fetch
+    if (agents.length === 0) setIsLoading(true);
+    setError(null);
+    try {
+      const data = await fetchAgents(projectRoot);
+      setAgents(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load agent pool');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [projectRoot, agents.length]);
+
+  useEffect(() => {
+    refresh();
+    const interval = setInterval(refresh, 10000);
+    return () => clearInterval(interval);
+  }, [refresh]);
+
+  const getAgentsBySwarm = useCallback((swarmId: string) => {
+    return agents.filter(agent => agent.swarm_id === swarmId);
+  }, [agents]);
+
+  return { agents, isLoading, error, refresh, getAgentsBySwarm };
+}
diff --git a/src/hooks/use-archetypes.ts b/src/hooks/use-archetypes.ts
new file mode 100644
index 0000000..8ed8f60
--- /dev/null
+++ b/src/hooks/use-archetypes.ts
@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import type { AgentArchetype } from '../lib/types-swarm';
+
+export function useArchetypes() {
+    const [data, setData] = useState<AgentArchetype[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+    useEffect(() => {
+        async function fetchArchetypes() {
+            try {
+                const res = await fetch('/api/swarm/archetypes');
+                if (!res.ok) {
+                    throw new Error('Failed to fetch archetypes');
+                }
+                const json = await res.json();
+                setData(json);
+            } catch (err: any) {
+                setError(err);
+            } finally {
+                setIsLoading(false);
+            }
+        }
+
+        fetchArchetypes();
+    }, []);
+
+    return { archetypes: data, isLoading, error };
+}
diff --git a/src/hooks/use-mission-graph.ts b/src/hooks/use-mission-graph.ts
new file mode 100644
index 0000000..49b986d
--- /dev/null
+++ b/src/hooks/use-mission-graph.ts
@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { BeadIssue } from '../lib/types';
+
+interface UseMissionGraphResult {
+  nodes: BeadIssue[];
+  isLoading: boolean;
+  error: string | null;
+}
+
+export function useMissionGraph(projectRoot: string, missionId: string): UseMissionGraphResult {
+  const [nodes, setNodes] = useState<BeadIssue[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchGraph() {
+      if (!missionId) return;
+      setIsLoading(true);
+      setError(null);
+      try {
+        const response = await fetch(
+          `/api/mission/graph?projectRoot=${encodeURIComponent(projectRoot)}&id=${encodeURIComponent(missionId)}`
+        );
+        const payload = await response.json();
+        if (payload.ok && payload.data) {
+          setNodes(payload.data.nodes);
+        } else {
+          setError(payload.error || 'Failed to load graph');
+        }
+      } catch (e) {
+        setError('Failed to fetch mission graph');
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchGraph();
+  }, [projectRoot, missionId]);
+
+  return { nodes, isLoading, error };
+}
diff --git a/src/hooks/use-mission-list.ts b/src/hooks/use-mission-list.ts
new file mode 100644
index 0000000..23bb944
--- /dev/null
+++ b/src/hooks/use-mission-list.ts
@@ -0,0 +1,66 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import type { AgentRecord } from '../lib/agent-registry';
+
+export interface MissionData {
+  id: string;
+  title: string;
+  description?: string;
+  status: 'planning' | 'active' | 'blocked' | 'completed';
+  stats: {
+    total: number;
+    done: number;
+    blocked: number;
+    active: number;
+  };
+  agents: AgentRecord[];
+}
+
+interface UseMissionListResult {
+  missions: MissionData[];
+  isLoading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+}
+
+async function fetchMissions(projectRoot: string): Promise<MissionData[]> {
+  try {
+    const response = await fetch(`/api/mission/list?projectRoot=${encodeURIComponent(projectRoot)}`);
+    const payload = await response.json();
+    
+    if (!response.ok || !payload.ok) {
+      throw new Error(payload.error?.message || 'Failed to fetch missions');
+    }
+    
+    return payload.data.missions || [];
+  } catch (err) {
+    console.error('Mission fetch error:', err);
+    throw err;
+  }
+}
+
+export function useMissionList(projectRoot: string): UseMissionListResult {
+  const [missions, setMissions] = useState<MissionData[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await fetchMissions(projectRoot);
+      setMissions(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load missions');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [projectRoot]);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  return { missions, isLoading, error, refresh };
+}
diff --git a/src/hooks/use-swarm-list.ts b/src/hooks/use-swarm-list.ts
new file mode 100644
index 0000000..a826c01
--- /dev/null
+++ b/src/hooks/use-swarm-list.ts
@@ -0,0 +1,86 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import type { SwarmCardData, SwarmListResponse, SwarmStatusFromApi } from '../lib/swarm-api';
+import { apiSwarmToCardData, type SwarmFromApi } from '../lib/swarm-api';
+
+interface UseSwarmListResult {
+  swarms: SwarmCardData[];
+  isLoading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+}
+
+async function fetchSwarmList(projectRoot: string): Promise<SwarmCardData[]> {
+  const response = await fetch(`/api/swarm/list?projectRoot=${encodeURIComponent(projectRoot)}`, {
+    cache: 'no-store',
+  });
+  
+  const payload = (await response.json()) as { ok: boolean; data?: SwarmListResponse; error?: { message?: string } };
+  
+  if (!response.ok || !payload.ok || !payload.data) {
+    throw new Error(payload.error?.message ?? 'Failed to fetch swarms');
+  }
+  
+  return payload.data.swarms.map((s: SwarmFromApi) => apiSwarmToCardData(s));
+}
+
+async function fetchSwarmStatus(projectRoot: string, epicId: string): Promise<SwarmStatusFromApi | null> {
+  try {
+    const response = await fetch(
+      `/api/swarm/status?projectRoot=${encodeURIComponent(projectRoot)}&epic=${encodeURIComponent(epicId)}`,
+      { cache: 'no-store' }
+    );
+    
+    const payload = (await response.json()) as { ok: boolean; data?: SwarmStatusFromApi; error?: { message?: string } };
+    
+    if (!response.ok || !payload.ok || !payload.data) {
+      return null;
+    }
+    
+    return payload.data;
+  } catch {
+    return null;
+  }
+}
+
+export function useSwarmList(projectRoot: string): UseSwarmListResult {
+  const [swarms, setSwarms] = useState<SwarmCardData[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      const swarmList = await fetchSwarmList(projectRoot);
+      
+      const swarmsWithStatus = await Promise.all(
+        swarmList.map(async (swarm) => {
+          const status = await fetchSwarmStatus(projectRoot, swarm.epicId);
+          if (status) {
+            return {
+              ...swarm,
+              readyIssues: status.ready_count,
+              blockedIssues: status.blocked_count,
+            };
+          }
+          return swarm;
+        })
+      );
+      
+      setSwarms(swarmsWithStatus);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch swarms');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [projectRoot]);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  return { swarms, isLoading, error, refresh };
+}
diff --git a/src/hooks/use-swarm-topology.ts b/src/hooks/use-swarm-topology.ts
new file mode 100644
index 0000000..d7d0c7a
--- /dev/null
+++ b/src/hooks/use-swarm-topology.ts
@@ -0,0 +1,50 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export interface SwarmTopologyData {
+  completed: { id: string; title: string; assignee?: string }[];
+  active: { id: string; title: string; assignee?: string }[];
+  ready: { id: string; title: string }[];
+  blocked: { id: string; title: string; blocked_by: string[] }[];
+  progress_percent: number;
+}
+
+export function useSwarmTopology(projectRoot: string, swarmId: string) {
+  const [topology, setTopology] = useState<SwarmTopologyData | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+
+    async function fetchTopology() {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const response = await fetch(`/api/mission/${swarmId}/topology?projectRoot=${encodeURIComponent(projectRoot)}`);
+        const result = await response.json();
+        
+        if (mounted) {
+          if (result.ok) {
+            setTopology(result.data);
+          } else {
+            setError(result.error);
+          }
+        }
+      } catch (err) {
+        if (mounted) setError('Failed to load topology');
+      } finally {
+        if (mounted) setIsLoading(false);
+      }
+    }
+
+    if (projectRoot && swarmId) {
+      fetchTopology();
+    }
+
+    return () => { mounted = false; };
+  }, [projectRoot, swarmId]);
+
+  return { topology, isLoading, error };
+}
diff --git a/src/hooks/use-templates.ts b/src/hooks/use-templates.ts
new file mode 100644
index 0000000..e7afb46
--- /dev/null
+++ b/src/hooks/use-templates.ts
@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import type { SwarmTemplate } from '../lib/types-swarm';
+
+export function useTemplates() {
+    const [data, setData] = useState<SwarmTemplate[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+    useEffect(() => {
+        async function fetchTemplates() {
+            try {
+                const res = await fetch('/api/swarm/templates');
+                if (!res.ok) {
+                    throw new Error('Failed to fetch templates');
+                }
+                const json = await res.json();
+                setData(json);
+            } catch (err: any) {
+                setError(err);
+            } finally {
+                setIsLoading(false);
+            }
+        }
+
+        fetchTemplates();
+    }, []);
+
+    return { templates: data, isLoading, error };
+}
diff --git a/src/hooks/use-url-state.ts b/src/hooks/use-url-state.ts
index 465a614..6bb7f7e 100644
--- a/src/hooks/use-url-state.ts
+++ b/src/hooks/use-url-state.ts
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 
 export type ViewType = 'social' | 'graph' | 'swarm' | 'activity';
@@ -12,13 +12,22 @@ export interface UrlState {
   view: ViewType;
   setView: (v: ViewType) => void;
   taskId: string | null;
-  setTaskId: (id: string | null) => void;
+  setTaskId: (id: string | null, openDrawer?: boolean) => void;
   swarmId: string | null;
-  setSwarmId: (id: string | null) => void;
+  setSwarmId: (id: string | null, openDrawer?: boolean) => void;
   agentId: string | null;
   setAgentId: (id: string | null) => void;
   epicId: string | null;
   setEpicId: (id: string | null) => void;
+  leftPanel: PanelState;
+  setLeftPanel: (state: PanelState) => void;
+  toggleLeftPanel: () => void;
+  rightPanel: PanelState;
+  setRightPanel: (state: PanelState) => void;
+  toggleRightPanel: () => void;
+  blockedOnly: boolean;
+  setBlockedOnly: (enabled: boolean) => void;
+  toggleBlockedOnly: () => void;
   panel: PanelState;
   togglePanel: () => void;
   drawer: DrawerState;
@@ -29,7 +38,8 @@ export interface UrlState {
 }
 
 const DEFAULT_VIEW: ViewType = 'social';
-const DEFAULT_PANEL: PanelState = 'open';
+const DEFAULT_LEFT_PANEL: PanelState = 'open';
+const DEFAULT_RIGHT_PANEL: PanelState = 'open';
 const DEFAULT_DRAWER: DrawerState = 'closed';
 const DEFAULT_GRAPH_TAB: GraphTabType = 'flow';
 
@@ -38,12 +48,51 @@ const VALID_PANELS: PanelState[] = ['open', 'closed'];
 const VALID_DRAWERS: DrawerState[] = ['open', 'closed'];
 const VALID_GRAPH_TABS: GraphTabType[] = ['flow', 'overview'];
 
-export function parseUrlState(searchParams: URLSearchParams): {
+const PANEL_STORAGE_KEYS = {
+  left: 'bb.ui.leftPanel',
+  right: 'bb.ui.rightPanel',
+} as const;
+
+interface PanelDefaults {
+  leftPanel: PanelState;
+  rightPanel: PanelState;
+}
+
+function parsePanelValue(value: string | null): PanelState | null {
+  if (!value || !VALID_PANELS.includes(value as PanelState)) {
+    return null;
+  }
+  return value as PanelState;
+}
+
+function readStoredPanelState(key: string, fallback: PanelState): PanelState {
+  if (typeof window === 'undefined') {
+    return fallback;
+  }
+
+  const value = window.localStorage.getItem(key);
+  return parsePanelValue(value) ?? fallback;
+}
+
+function isBlockedEnabled(value: string | null): boolean {
+  return value === '1' || value === 'true';
+}
+
+export function parseUrlState(
+  searchParams: URLSearchParams,
+  defaults: PanelDefaults = {
+    leftPanel: DEFAULT_LEFT_PANEL,
+    rightPanel: DEFAULT_RIGHT_PANEL,
+  }
+): {
   view: ViewType;
   taskId: string | null;
   swarmId: string | null;
   agentId: string | null;
   epicId: string | null;
+  leftPanel: PanelState;
+  rightPanel: PanelState;
+  blockedOnly: boolean;
   panel: PanelState;
   drawer: DrawerState;
   graphTab: GraphTabType;
@@ -58,10 +107,15 @@ export function parseUrlState(searchParams: URLSearchParams): {
   const agentId = searchParams.get('agent');
   const epicId = searchParams.get('epic');
 
-  const panelParam = searchParams.get('panel');
-  const panel: PanelState = panelParam && VALID_PANELS.includes(panelParam as PanelState)
-    ? (panelParam as PanelState)
-    : DEFAULT_PANEL;
+  const leftPanelFromUrl = parsePanelValue(searchParams.get('left'));
+  const rightPanelFromUrl = parsePanelValue(searchParams.get('right'));
+  const legacyPanel = parsePanelValue(searchParams.get('panel'));
+
+  const leftPanel = leftPanelFromUrl ?? defaults.leftPanel;
+  const rightPanel = rightPanelFromUrl ?? legacyPanel ?? defaults.rightPanel;
+  const panel = rightPanel;
+
+  const blockedOnly = isBlockedEnabled(searchParams.get('blocked'));
 
   const drawerParam = searchParams.get('drawer');
   const drawer: DrawerState = drawerParam && VALID_DRAWERS.includes(drawerParam as DrawerState)
@@ -73,7 +127,7 @@ export function parseUrlState(searchParams: URLSearchParams): {
     ? (graphTabParam as GraphTabType)
     : DEFAULT_GRAPH_TAB;
 
-  return { view, taskId, swarmId, agentId, epicId, panel, drawer, graphTab };
+  return { view, taskId, swarmId, agentId, epicId, leftPanel, rightPanel, blockedOnly, panel, drawer, graphTab };
 }
 
 export function buildUrlParams(
@@ -97,8 +151,27 @@ export function buildUrlParams(
 export function useUrlState(): UrlState {
   const searchParams = useSearchParams();
   const router = useRouter();
+  const [panelDefaults, setPanelDefaults] = useState<PanelDefaults>({
+    leftPanel: DEFAULT_LEFT_PANEL,
+    rightPanel: DEFAULT_RIGHT_PANEL,
+  });
 
-  const state = useMemo(() => parseUrlState(searchParams), [searchParams]);
+  useEffect(() => {
+    setPanelDefaults({
+      leftPanel: readStoredPanelState(PANEL_STORAGE_KEYS.left, DEFAULT_LEFT_PANEL),
+      rightPanel: readStoredPanelState(PANEL_STORAGE_KEYS.right, DEFAULT_RIGHT_PANEL),
+    });
+  }, []);
+
+  const state = useMemo(() => parseUrlState(searchParams, panelDefaults), [searchParams, panelDefaults]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    window.localStorage.setItem(PANEL_STORAGE_KEYS.left, state.leftPanel);
+    window.localStorage.setItem(PANEL_STORAGE_KEYS.right, state.rightPanel);
+  }, [state.leftPanel, state.rightPanel]);
 
   const updateUrl = useCallback((updates: Record<string, string | null>) => {
     const newUrl = buildUrlParams(searchParams, updates);
@@ -109,26 +182,55 @@ export function useUrlState(): UrlState {
     updateUrl({ view: v });
   }, [updateUrl]);
 
-  const setTaskId = useCallback((id: string | null) => {
-    updateUrl({ task: id, panel: id ? 'open' : null });
+  const setLeftPanel = useCallback((next: PanelState) => {
+    updateUrl({ left: next });
   }, [updateUrl]);
 
-  const setSwarmId = useCallback((id: string | null) => {
-    updateUrl({ swarm: id, panel: id ? 'open' : null });
+  const toggleLeftPanel = useCallback(() => {
+    setLeftPanel(state.leftPanel === 'open' ? 'closed' : 'open');
+  }, [setLeftPanel, state.leftPanel]);
+
+  const setRightPanel = useCallback((next: PanelState) => {
+    // Keep legacy `panel` in sync while migrating to explicit `right`.
+    updateUrl({ right: next, panel: next });
+  }, [updateUrl]);
+
+  const toggleRightPanel = useCallback(() => {
+    setRightPanel(state.rightPanel === 'open' ? 'closed' : 'open');
+  }, [setRightPanel, state.rightPanel]);
+
+  const setBlockedOnly = useCallback((enabled: boolean) => {
+    updateUrl({ blocked: enabled ? '1' : null });
+  }, [updateUrl]);
+
+  const toggleBlockedOnly = useCallback(() => {
+    setBlockedOnly(!state.blockedOnly);
+  }, [setBlockedOnly, state.blockedOnly]);
+
+  const setTaskId = useCallback((id: string | null, openDrawer?: boolean) => {
+    const right = id ? 'open' : null;
+    const drawer = openDrawer ? 'open' : null;
+    // Clear swarm when setting task
+    updateUrl({ task: id, swarm: null, right, panel: right, drawer });
+  }, [updateUrl]);
+
+  const setSwarmId = useCallback((id: string | null, openDrawer?: boolean) => {
+    const right = id ? 'open' : null;
+    const drawer = openDrawer ? 'open' : null;
+    // Clear task when setting swarm
+    updateUrl({ swarm: id, task: null, right, panel: right, drawer });
   }, [updateUrl]);
 
   const setAgentId = useCallback((id: string | null) => {
-    updateUrl({ agent: id, panel: id ? 'open' : null });
+    const right = id ? 'open' : null;
+    updateUrl({ agent: id, right, panel: right });
   }, [updateUrl]);
 
   const setEpicId = useCallback((id: string | null) => {
     updateUrl({ epic: id });
   }, [updateUrl]);
 
-  const togglePanel = useCallback(() => {
-    const newPanel = state.panel === 'open' ? 'closed' : 'open';
-    updateUrl({ panel: newPanel });
-  }, [state.panel, updateUrl]);
+  const togglePanel = toggleRightPanel;
 
   const setDrawer = useCallback((state: DrawerState) => {
     updateUrl({ drawer: state });
@@ -139,7 +241,7 @@ export function useUrlState(): UrlState {
   }, [updateUrl]);
 
   const clearSelection = useCallback(() => {
-    updateUrl({ task: null, swarm: null, epic: null, panel: 'closed', drawer: 'closed' });
+    updateUrl({ task: null, swarm: null, epic: null, right: 'closed', panel: 'closed', drawer: 'closed' });
   }, [updateUrl]);
 
   return {
@@ -153,7 +255,16 @@ export function useUrlState(): UrlState {
     setAgentId,
     epicId: state.epicId,
     setEpicId,
-    panel: state.panel,
+    leftPanel: state.leftPanel,
+    setLeftPanel,
+    toggleLeftPanel,
+    rightPanel: state.rightPanel,
+    setRightPanel,
+    toggleRightPanel,
+    blockedOnly: state.blockedOnly,
+    setBlockedOnly,
+    toggleBlockedOnly,
+    panel: state.rightPanel,
     togglePanel,
     drawer: state.drawer,
     setDrawer,
diff --git a/src/lib/agent-registry.ts b/src/lib/agent-registry.ts
index 01c795c..8c69344 100644
--- a/src/lib/agent-registry.ts
+++ b/src/lib/agent-registry.ts
@@ -31,6 +31,8 @@ export interface AgentRecord {
   version: number;
   rig?: string;
   role_type?: string;
+  swarm_id?: string;
+  current_task?: string;
 }
 
 export interface RegisterAgentInput {
@@ -179,11 +181,22 @@ function validateRole(value: string): AgentCommandError | null {
 function mapBdAgentToRecord(bdAgent: any): AgentRecord {
   // Extract role from labels if role_type is not set
   let role = bdAgent.role_type || 'agent';
-  if (role === 'agent' && Array.isArray(bdAgent.labels)) {
+  let swarmId: string | undefined;
+  let currentTask: string | undefined;
+
+  if (Array.isArray(bdAgent.labels)) {
     const roleLabel = bdAgent.labels.find((l: string) => l.startsWith('role:'));
     if (roleLabel) {
       role = roleLabel.split(':')[1];
     }
+    const swarmLabel = bdAgent.labels.find((l: string) => l.startsWith('swarm:'));
+    if (swarmLabel) {
+      swarmId = swarmLabel.split(':')[1];
+    }
+    const workingLabel = bdAgent.labels.find((l: string) => l.startsWith('working:'));
+    if (workingLabel) {
+      currentTask = workingLabel.split(':')[1];
+    }
   }
 
   let rig = bdAgent.rig;
@@ -204,6 +217,8 @@ function mapBdAgentToRecord(bdAgent: any): AgentRecord {
     version: 1,
     rig,
     role_type: bdAgent.role_type,
+    swarm_id: swarmId,
+    current_task: currentTask,
   };
   return record;
 }
diff --git a/src/lib/bridge.ts b/src/lib/bridge.ts
index dadf1c9..4895e3a 100644
--- a/src/lib/bridge.ts
+++ b/src/lib/bridge.ts
@@ -102,10 +102,16 @@ export async function runBdCommand(
 
     const shellCommand = buildShellCommand(command, args);
 
+    const mingwBin = 'C:\\msys64\\mingw64\\bin';
+    const existingPath = deps.env.Path ?? deps.env.PATH ?? '';
+    const enhancedPath = existingPath.includes('mingw64')
+      ? existingPath
+      : `${mingwBin};${existingPath}`;
+
     const { stdout, stderr } = await deps.exec(shellCommand, {
       cwd,
       timeout: timeoutMs,
-      env: deps.env,
+      env: { ...deps.env, Path: enhancedPath, PATH: enhancedPath },
     });
 
     return {
diff --git a/src/lib/server/beads-fs.ts b/src/lib/server/beads-fs.ts
index 95b61e3..a1d5386 100644
--- a/src/lib/server/beads-fs.ts
+++ b/src/lib/server/beads-fs.ts
@@ -1,15 +1,115 @@
 import fs from 'fs/promises';
 import path from 'path';
-import { AgentArchetype } from '../types-swarm';
+import { AgentArchetype, SwarmTemplate } from '../types-swarm';
 
 const ARCHE_DIR = path.join(process.cwd(), '.beads', 'archetypes');
+const TEMPLATE_DIR = path.join(process.cwd(), '.beads', 'templates');
+
+const SEED_ARCHETYPES: AgentArchetype[] = [
+    {
+        id: 'architect',
+        name: 'System Architect',
+        description: 'Designs complex system structures and writes detailed implementation plans.',
+        systemPrompt: 'You are a staff-level software architect focused on high-level system design.',
+        capabilities: ['planning', 'design_docs', 'arch_review'],
+        color: '#3b82f6',
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        isBuiltIn: true
+    },
+    {
+        id: 'coder',
+        name: 'Implementation Engineer',
+        description: 'Translates plans into precise, type-safe, and tested code.',
+        systemPrompt: 'You are a senior software engineer focused on execution and clean code.',
+        capabilities: ['coding', 'refactoring', 'testing'],
+        color: '#10b981',
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        isBuiltIn: true
+    }
+];
 
 export async function getArchetypes(): Promise<AgentArchetype[]> {
     try {
         await fs.mkdir(ARCHE_DIR, { recursive: true });
-        // Minimal mock for now to pass test
-        return [];
+        const files = await fs.readdir(ARCHE_DIR);
+
+        if (files.filter(f => f.endsWith('.json')).length === 0) {
+            // Seed defaults
+            for (const arch of SEED_ARCHETYPES) {
+                await fs.writeFile(path.join(ARCHE_DIR, `${arch.id}.json`), JSON.stringify(arch, null, 2));
+            }
+            return SEED_ARCHETYPES;
+        }
+
+        const archetypes: AgentArchetype[] = [];
+        for (const file of files) {
+            if (!file.endsWith('.json')) continue;
+            try {
+                const content = await fs.readFile(path.join(ARCHE_DIR, file), 'utf-8');
+                const parsed = JSON.parse(content);
+                archetypes.push({
+                    ...parsed,
+                    id: file.replace('.json', '')
+                });
+            } catch (err) {
+                console.error(`Failed to parse archetype file: ${file}`, err);
+            }
+        }
+
+        return archetypes;
     } catch (e) {
+        console.error('Error in getArchetypes:', e);
+        return [];
+    }
+}
+
+const SEED_TEMPLATES: SwarmTemplate[] = [
+    {
+        id: 'standard-app',
+        name: 'Standard Application Swarm',
+        description: 'A balanced team of an Architect and two Coders for standard feature development.',
+        team: [
+            { archetypeId: 'architect', count: 1 },
+            { archetypeId: 'coder', count: 2 }
+        ],
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        isBuiltIn: true
+    }
+];
+
+export async function getTemplates(): Promise<SwarmTemplate[]> {
+    try {
+        await fs.mkdir(TEMPLATE_DIR, { recursive: true });
+        const files = await fs.readdir(TEMPLATE_DIR);
+
+        if (files.filter(f => f.endsWith('.json')).length === 0) {
+            for (const tpl of SEED_TEMPLATES) {
+                await fs.writeFile(path.join(TEMPLATE_DIR, `${tpl.id}.json`), JSON.stringify(tpl, null, 2));
+            }
+            return SEED_TEMPLATES;
+        }
+
+        const templates: SwarmTemplate[] = [];
+        for (const file of files) {
+            if (!file.endsWith('.json')) continue;
+            try {
+                const content = await fs.readFile(path.join(TEMPLATE_DIR, file), 'utf-8');
+                const parsed = JSON.parse(content);
+                templates.push({
+                    ...parsed,
+                    id: file.replace('.json', '')
+                });
+            } catch (err) {
+                console.error(`Failed to parse template file: ${file}`, err);
+            }
+        }
+
+        return templates;
+    } catch (e) {
+        console.error('Error in getTemplates:', e);
         return [];
     }
 }
diff --git a/src/lib/social-cards.ts b/src/lib/social-cards.ts
index 50ca353..81b635c 100644
--- a/src/lib/social-cards.ts
+++ b/src/lib/social-cards.ts
@@ -74,20 +74,21 @@ function extractAgents(bead: BeadIssue): AgentInfo[] {
 }
 
 export function buildSocialCards(beads: BeadIssue[]): SocialCard[] {
+  const taskBeads = beads.filter((bead) => bead.issue_type !== 'epic');
   const beadMap = new Map<string, BeadIssue>();
-  for (const bead of beads) {
+  for (const bead of taskBeads) {
     beadMap.set(bead.id, bead);
   }
 
   const blocksIncoming = new Map<string, string[]>();
   const blocksOutgoing = new Map<string, string[]>();
 
-  for (const bead of beads) {
+  for (const bead of taskBeads) {
     blocksIncoming.set(bead.id, []);
     blocksOutgoing.set(bead.id, []);
   }
 
-  for (const bead of beads) {
+  for (const bead of taskBeads) {
     for (const dep of bead.dependencies) {
       if (dep.type === 'blocks' && beadMap.has(dep.target)) {
         const outgoing = blocksOutgoing.get(bead.id) ?? [];
@@ -101,15 +102,30 @@ export function buildSocialCards(beads: BeadIssue[]): SocialCard[] {
     }
   }
 
-  return beads.map((bead) => ({
-    id: bead.id,
-    title: bead.title,
-    status: mapStatus(bead.status),
-    blocks: blocksOutgoing.get(bead.id) ?? [],   // what I block (amber)
-    unblocks: blocksIncoming.get(bead.id) ?? [], // what blocks me (rose)
-    agents: extractAgents(bead),
-    lastActivity: new Date(bead.updated_at),
-    priority: mapPriority(bead.priority),
-  }));
-}
+  return taskBeads.map((bead) => {
+    const explicitStatus = mapStatus(bead.status);
+    const incomingBlockers = blocksIncoming.get(bead.id) ?? [];
+    const hasUnresolvedIncomingBlockers = incomingBlockers.some((blockerId) => {
+      const blocker = beadMap.get(blockerId);
+      return blocker ? blocker.status !== 'closed' && blocker.status !== 'tombstone' : false;
+    });
 
+    const effectiveStatus: SocialCardStatus =
+      explicitStatus === 'closed' || explicitStatus === 'in_progress' || explicitStatus === 'blocked'
+        ? explicitStatus
+        : hasUnresolvedIncomingBlockers
+          ? 'blocked'
+          : explicitStatus;
+
+    return {
+      id: bead.id,
+      title: bead.title,
+      status: effectiveStatus,
+      blocks: blocksOutgoing.get(bead.id) ?? [],   // what I block (amber)
+      unblocks: incomingBlockers, // what blocks me (rose)
+      agents: extractAgents(bead),
+      lastActivity: new Date(bead.updated_at),
+      priority: mapPriority(bead.priority),
+    };
+  });
+}
diff --git a/src/lib/swarm-api.ts b/src/lib/swarm-api.ts
new file mode 100644
index 0000000..d29ff05
--- /dev/null
+++ b/src/lib/swarm-api.ts
@@ -0,0 +1,64 @@
+export interface SwarmFromApi {
+  id: string;
+  title: string;
+  epic_id: string;
+  epic_title: string;
+  status: string;
+  coordinator: string;
+  total_issues: number;
+  completed_issues: number;
+  active_issues: number;
+  progress_percent: number;
+}
+
+export interface SwarmListResponse {
+  swarms: SwarmFromApi[];
+}
+
+export interface SwarmStatusFromApi {
+  epic_id: string;
+  epic_title: string;
+  total_issues: number;
+  completed: Array<{ id: string; title: string; status: string }>;
+  active: Array<{ id: string; title: string; status: string }>;
+  ready: Array<{ id: string; title: string; status: string }>;
+  blocked: Array<{ id: string; title: string; status: string }>;
+  progress_percent: number;
+  active_count: number;
+  ready_count: number;
+  blocked_count: number;
+}
+
+export interface SwarmCardData {
+  swarmId: string;
+  title: string;
+  epicId: string;
+  epicTitle: string;
+  status: string;
+  coordinator: string;
+  totalIssues: number;
+  completedIssues: number;
+  activeIssues: number;
+  readyIssues: number;
+  blockedIssues: number;
+  progressPercent: number;
+  agents: import('./agent-registry').AgentRecord[];
+}
+
+export function apiSwarmToCardData(swarm: SwarmFromApi, status?: SwarmStatusFromApi): SwarmCardData {
+  return {
+    swarmId: swarm.id,
+    title: swarm.title,
+    epicId: swarm.epic_id,
+    epicTitle: swarm.epic_title,
+    status: swarm.status,
+    coordinator: swarm.coordinator,
+    totalIssues: swarm.total_issues,
+    completedIssues: swarm.completed_issues,
+    activeIssues: swarm.active_issues,
+    readyIssues: status?.ready_count ?? 0,
+    blockedIssues: status?.blocked_count ?? 0,
+    progressPercent: swarm.progress_percent,
+    agents: [], // Populated separately via agent-registry
+  };
+}
diff --git a/src/video/Main.tsx b/src/video/Main.tsx
index 5d3d981..88f7c8f 100644
--- a/src/video/Main.tsx
+++ b/src/video/Main.tsx
@@ -1,6 +1,6 @@
 import { interpolate, useCurrentFrame, useVideoConfig, AbsoluteFill, Sequence, Img, staticFile, spring } from 'remotion';
 import React from 'react';
-import { loadFont } from "@remotion/google-fonts/Inter";
+import { loadFont } from '@remotion/google-fonts/inter';
 import { Background } from './components/Background';
 import { TerminalScene } from './components/TerminalScene';
 import { TimelineScene } from './components/TimelineScene';
diff --git a/tests/hooks/use-url-state.test.ts b/tests/hooks/use-url-state.test.ts
index 4c8dba4..e07da87 100644
--- a/tests/hooks/use-url-state.test.ts
+++ b/tests/hooks/use-url-state.test.ts
@@ -14,127 +14,119 @@ function createMockSearchParams(params: Record<string, string | null> = {}) {
 
 describe('useUrlState', () => {
   describe('parseUrlState', () => {
-    it('should return defaults for empty params', () => {
-      const sp = createMockSearchParams({});
-      const state = parseUrlState(sp);
+    it('returns defaults for empty params', () => {
+      const state = parseUrlState(createMockSearchParams({}));
       assert.deepStrictEqual(state, {
         view: 'social',
         taskId: null,
         swarmId: null,
-        panel: 'closed',
+        agentId: null,
+        epicId: null,
+        leftPanel: 'open',
+        rightPanel: 'open',
+        blockedOnly: false,
+        panel: 'open',
+        drawer: 'closed',
         graphTab: 'flow',
       });
     });
 
-    it('should parse view=social', () => {
-      const sp = createMockSearchParams({ view: 'social' });
-      const state = parseUrlState(sp);
-      assert.strictEqual(state.view, 'social');
+    it('parses all core identifiers', () => {
+      const state = parseUrlState(
+        createMockSearchParams({
+          view: 'activity',
+          task: 'bb-vt.1.2',
+          swarm: 'bb-vt',
+          agent: 'codex',
+          epic: 'bb-vt',
+        }),
+      );
+
+      assert.strictEqual(state.view, 'activity');
+      assert.strictEqual(state.taskId, 'bb-vt.1.2');
+      assert.strictEqual(state.swarmId, 'bb-vt');
+      assert.strictEqual(state.agentId, 'codex');
+      assert.strictEqual(state.epicId, 'bb-vt');
     });
 
-    it('should parse view=graph', () => {
-      const sp = createMockSearchParams({ view: 'graph' });
-      const state = parseUrlState(sp);
-      assert.strictEqual(state.view, 'graph');
-    });
-
-    it('should parse view=swarm', () => {
-      const sp = createMockSearchParams({ view: 'swarm' });
-      const state = parseUrlState(sp);
-      assert.strictEqual(state.view, 'swarm');
-    });
-
-    it('should fall back to default for invalid view values', () => {
-      const sp = createMockSearchParams({ view: 'invalid' });
-      const state = parseUrlState(sp);
-      assert.strictEqual(state.view, 'social');
-    });
-
-    it('should parse task id', () => {
-      const sp = createMockSearchParams({ view: 'social', task: 'bb-buff.1' });
-      const state = parseUrlState(sp);
-      assert.strictEqual(state.view, 'social');
-      assert.strictEqual(state.taskId, 'bb-buff.1');
-    });
-
-    it('should parse swarm id', () => {
-      const sp = createMockSearchParams({ view: 'swarm', swarm: 'bb-buff' });
-      const state = parseUrlState(sp);
-      assert.strictEqual(state.view, 'swarm');
-      assert.strictEqual(state.swarmId, 'bb-buff');
-    });
-
-    it('should parse panel state', () => {
-      const sp = createMockSearchParams({ view: 'social', task: 'bb-buff.1', panel: 'open' });
-      const state = parseUrlState(sp);
+    it('parses explicit left/right panel params', () => {
+      const state = parseUrlState(createMockSearchParams({ left: 'closed', right: 'open' }));
+      assert.strictEqual(state.leftPanel, 'closed');
+      assert.strictEqual(state.rightPanel, 'open');
       assert.strictEqual(state.panel, 'open');
     });
 
-    it('should parse graphTab', () => {
-      const sp = createMockSearchParams({ view: 'graph', task: 'bb-buff.1', graphTab: 'flow' });
-      const state = parseUrlState(sp);
-      assert.strictEqual(state.graphTab, 'flow');
-    });
-
-    it('should fall back to default for invalid panel values', () => {
-      const sp = createMockSearchParams({ panel: 'invalid' });
-      const state = parseUrlState(sp);
+    it('uses legacy panel param when right is absent', () => {
+      const state = parseUrlState(createMockSearchParams({ panel: 'closed' }));
+      assert.strictEqual(state.rightPanel, 'closed');
       assert.strictEqual(state.panel, 'closed');
     });
 
-    it('should fall back to default for invalid graphTab values', () => {
-      const sp = createMockSearchParams({ graphTab: 'invalid' });
-      const state = parseUrlState(sp);
+    it('prefers right param over legacy panel when both are present', () => {
+      const state = parseUrlState(createMockSearchParams({ right: 'open', panel: 'closed' }));
+      assert.strictEqual(state.rightPanel, 'open');
+      assert.strictEqual(state.panel, 'open');
+    });
+
+    it('falls back to defaults for invalid panel params', () => {
+      const state = parseUrlState(createMockSearchParams({ left: 'invalid', right: 'invalid', panel: 'invalid' }));
+      assert.strictEqual(state.leftPanel, 'open');
+      assert.strictEqual(state.rightPanel, 'open');
+      assert.strictEqual(state.panel, 'open');
+    });
+
+    it('parses blocked filter state', () => {
+      assert.strictEqual(parseUrlState(createMockSearchParams({ blocked: '1' })).blockedOnly, true);
+      assert.strictEqual(parseUrlState(createMockSearchParams({ blocked: 'true' })).blockedOnly, true);
+      assert.strictEqual(parseUrlState(createMockSearchParams({ blocked: '0' })).blockedOnly, false);
+    });
+
+    it('falls back to default for invalid view and graph tab values', () => {
+      const state = parseUrlState(createMockSearchParams({ view: 'invalid', graphTab: 'invalid' }));
+      assert.strictEqual(state.view, 'social');
       assert.strictEqual(state.graphTab, 'flow');
     });
   });
 
   describe('buildUrlParams', () => {
-    it('should build URL with view param', () => {
-      const sp = createMockSearchParams({});
-      const url = buildUrlParams(sp, { view: 'social' });
+    it('builds URL with view param', () => {
+      const url = buildUrlParams(createMockSearchParams({}), { view: 'social' });
       assert.strictEqual(url, '/?view=social');
     });
 
-    it('should add task param', () => {
-      const sp = createMockSearchParams({ view: 'social' });
-      const url = buildUrlParams(sp, { task: 'bb-buff.1' });
-      assert.strictEqual(url, '/?view=social&task=bb-buff.1');
+    it('adds task param', () => {
+      const url = buildUrlParams(createMockSearchParams({ view: 'social' }), { task: 'bb-vt.2.1' });
+      assert.strictEqual(url, '/?view=social&task=bb-vt.2.1');
     });
 
-    it('should remove param when null', () => {
-      const sp = createMockSearchParams({ view: 'social', task: 'bb-buff.1' });
-      const url = buildUrlParams(sp, { task: null });
+    it('removes params when value is null', () => {
+      const url = buildUrlParams(createMockSearchParams({ view: 'social', task: 'bb-vt.2.1' }), { task: null });
       assert.strictEqual(url, '/?view=social');
     });
 
-    it('should toggle panel', () => {
-      const sp = createMockSearchParams({ view: 'social', panel: 'closed' });
-      const url = buildUrlParams(sp, { panel: 'open' });
-      assert.strictEqual(url, '/?view=social&panel=open');
+    it('supports dual right/panel sync updates', () => {
+      const url = buildUrlParams(createMockSearchParams({ view: 'social' }), { right: 'open', panel: 'open' });
+      assert.strictEqual(url, '/?view=social&right=open&panel=open');
     });
 
-    it('should return root for empty params', () => {
-      const sp = createMockSearchParams({});
-      const url = buildUrlParams(sp, {});
+    it('returns root for empty params', () => {
+      const url = buildUrlParams(createMockSearchParams({}), {});
       assert.strictEqual(url, '/');
     });
 
-    it('should clear all selection params', () => {
-      const sp = createMockSearchParams({ view: 'social', task: 'bb-buff.1', swarm: 'buff', panel: 'open', graphTab: 'flow' });
-      const url = buildUrlParams(sp, { task: null, swarm: null, panel: null, graphTab: null });
-      assert.strictEqual(url, '/?view=social');
+    it('clears selection params and keeps view', () => {
+      const url = buildUrlParams(
+        createMockSearchParams({ view: 'social', task: 'bb-vt.2.1', swarm: 'bb-vt', right: 'open', panel: 'open' }),
+        { task: null, swarm: null, right: 'closed', panel: 'closed' },
+      );
+      assert.strictEqual(url, '/?view=social&right=closed&panel=closed');
     });
   });
 
   describe('module import', () => {
-    it('should load the module without error', async () => {
-      try {
-        await import('../../src/hooks/use-url-state');
-        assert.ok(true, 'Module loaded');
-      } catch (err) {
-        assert.fail(err as Error);
-      }
+    it('loads the module without error', async () => {
+      await import('../../src/hooks/use-url-state');
+      assert.ok(true);
     });
   });
 });