diff --git a/apps/web/components/app-shell.tsx b/apps/web/components/app-shell.tsx
deleted file mode 100644
index b0cd9f7..0000000
--- a/apps/web/components/app-shell.tsx
+++ /dev/null
@@ -1,597 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import Link from "next/link";
-import { usePathname, useRouter } from "next/navigation";
-import { useEffect, useState, type ReactNode } from "react";
-import {
-  Bell,
-  Bookmark,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  CircleCheck,
-  Hash,
-  House,
-  ListTodo,
-  LogOut,
-  Menu,
-  Moon,
-  PanelRightOpen,
-  Search,
-  Settings,
-  SquarePen,
-  Sun,
-  X,
-} from "lucide-react";
-import { authClient } from "@muster/auth/client";
-import { Avatar } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { CommandPalette } from "@/components/command-palette";
-import {
-  demoDirectRooms,
-  demoMode,
-  demoOrganisation,
-  demoRooms,
-} from "@/lib/demo-data";
-import { cn } from "@/lib/utils";
-
-type NavigationRoom = {
-  id: string;
-  slug: string;
-  displayName: string;
-  topic: string;
-  roomType: string;
-  favourite: boolean | null;
-  muted: boolean | null;
-  sidebarPosition: number | null;
-  sidebarGroup: string | null;
-  unreadCount?: number;
-  mentionCount?: number;
-};
-
-const initialNavigationRooms: NavigationRoom[] = [
-  ...demoRooms.map((room) => ({
-    id: roomIdFromSlug(room.slug),
-    slug: room.slug,
-    displayName: room.name,
-    topic: room.topic,
-    roomType: "operations",
-    favourite: room.favourite,
-    muted: false,
-    sidebarPosition: 0,
-    sidebarGroup: null,
-    unreadCount: room.unread,
-    mentionCount: room.mentions,
-  })),
-  ...demoDirectRooms.map((room) => ({
-    id: roomIdFromSlug(room.slug),
-    slug: room.slug,
-    displayName: room.name,
-    topic: room.topic,
-    roomType: "direct",
-    favourite: false,
-    muted: false,
-    sidebarPosition: 0,
-    sidebarGroup: null,
-    unreadCount: 0,
-    mentionCount: 0,
-  })),
-];
-
-function roomIdFromSlug(slug: string) {
-  return `demo:${slug}`;
-}
-
-function initials(name: string) {
-  return name
-    .split(/\s+/)
-    .slice(0, 2)
-    .map((part) => part[0] ?? "")
-    .join("")
-    .toUpperCase();
-}
-
-function NavGroup({ label, children }: { label: string; children: ReactNode }) {
-  const [expanded, setExpanded] = useState(true);
-  return (
-    <section className="mb-3">
-      <button
-        type="button"
-        aria-expanded={expanded}
-        onClick={() => setExpanded((current) => !current)}
-        className="mb-1 flex min-h-7 w-full items-center gap-1 rounded px-2 text-left text-xs font-semibold text-muted-foreground hover:bg-muted hover:text-foreground"
-      >
-        <ChevronDown
-          className={cn(
-            "size-3 transition-transform",
-            !expanded && "-rotate-90",
-          )}
-          aria-hidden="true"
-        />
-        <span className="flex-1">{label}</span>
-      </button>
-      {expanded && <div className="space-y-0.5">{children}</div>}
-    </section>
-  );
-}
-
-function ChannelLink({
-  room,
-  onNavigate,
-}: {
-  room: NavigationRoom;
-  onNavigate: (() => void) | undefined;
-}) {
-  const pathname = usePathname();
-  const active = pathname === `/rooms/${room.slug}`;
-  return (
-    <Link
-      href={`/rooms/${room.slug}`}
-      {...(onNavigate ? { onClick: onNavigate } : {})}
-      aria-current={active ? "page" : undefined}
-      className={cn(
-        "flex min-h-7 items-center gap-1.5 rounded px-2 text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
-        active && "sidebar-active font-semibold text-foreground",
-        Boolean(room.unreadCount) && !active && "font-semibold text-foreground",
-      )}
-    >
-      <Hash className="size-3.5 shrink-0" aria-hidden="true" />
-      <span className="min-w-0 flex-1 truncate">{room.displayName}</span>
-      {room.muted && <span className="sr-only">Muted</span>}
-      {Boolean(room.mentionCount) ? (
-        <Badge className="min-w-5 justify-center bg-[var(--color-accent)] px-1 text-primary-foreground">
-          {room.mentionCount}
-        </Badge>
-      ) : Boolean(room.unreadCount) ? (
-        <span className="size-1.5 rounded-full bg-[var(--color-accent)]" />
-      ) : null}
-    </Link>
-  );
-}
-
-function DirectLink({
-  room,
-  onNavigate,
-}: {
-  room: NavigationRoom;
-  onNavigate: (() => void) | undefined;
-}) {
-  const pathname = usePathname();
-  const active = pathname === `/rooms/${room.slug}`;
-  return (
-    <Link
-      href={`/rooms/${room.slug}`}
-      {...(onNavigate ? { onClick: onNavigate } : {})}
-      aria-current={active ? "page" : undefined}
-      className={cn(
-        "flex min-h-8 items-center gap-2 rounded px-2 text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
-        active && "sidebar-active font-semibold text-foreground",
-      )}
-    >
-      <span className="relative">
-        <Avatar initials={initials(room.displayName)} size="sm" />
-        <span className="absolute -bottom-0.5 -right-0.5 size-2 rounded-full border border-[var(--color-paper-2)] bg-[var(--color-success)]" />
-      </span>
-      <span className="min-w-0 flex-1 truncate">{room.displayName}</span>
-    </Link>
-  );
-}
-
-function QuickLink({
-  href,
-  label,
-  icon: Icon,
-  badge,
-  onNavigate,
-}: {
-  href: string;
-  label: string;
-  icon: typeof House;
-  badge?: string;
-  onNavigate: (() => void) | undefined;
-}) {
-  return (
-    <Link
-      href={href}
-      {...(onNavigate ? { onClick: onNavigate } : {})}
-      className="flex min-h-8 items-center gap-2 rounded px-2 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
-    >
-      <Icon className="size-3.5" aria-hidden="true" />
-      <span className="flex-1">{label}</span>
-      {badge && (
-        <Badge className="bg-[var(--color-accent)] text-primary-foreground">
-          {badge}
-        </Badge>
-      )}
-    </Link>
-  );
-}
-
-function MainNavigation({
-  onNavigate,
-  onOpenPalette,
-}: {
-  onNavigate?: () => void;
-  onOpenPalette: () => void;
-}) {
-  const [rooms, setRooms] = useState(initialNavigationRooms);
-  const [roomsLoaded, setRoomsLoaded] = useState(false);
-  useEffect(() => {
-    const controller = new AbortController();
-    void fetch("/api/v1/rooms?membership=joined", {
-      signal: controller.signal,
-    })
-      .then(async (response) => {
-        if (!response.ok) return;
-        const payload = (await response.json()) as {
-          data: NavigationRoom[];
-        };
-        setRooms(payload.data);
-      })
-      .catch(() => undefined)
-      .finally(() => setRoomsLoaded(true));
-    return () => controller.abort();
-  }, []);
-  const favourites = rooms.filter(
-    (room) => room.favourite && room.roomType !== "direct",
-  );
-  const channels = rooms.filter(
-    (room) => !room.favourite && room.roomType !== "direct",
-  );
-  const channelGroups = new Map<string, NavigationRoom[]>();
-  for (const room of channels) {
-    const label = room.sidebarGroup?.trim() || "Channels";
-    channelGroups.set(label, [...(channelGroups.get(label) ?? []), room]);
-  }
-  const directRooms = rooms.filter((room) => room.roomType === "direct");
-
-  return (
-    <nav
-      aria-label="Workspace"
-      aria-busy={!roomsLoaded}
-      className="h-full overflow-y-auto px-2 py-2"
-    >
-      <div className="mb-3 space-y-0.5">
-        <QuickLink
-          href="/rooms/soc-operations"
-          label="Home"
-          icon={House}
-          onNavigate={onNavigate}
-        />
-        <QuickLink
-          href="/tasks"
-          label="Tasks"
-          icon={ListTodo}
-          {...(demoMode ? { badge: "4" } : {})}
-          onNavigate={onNavigate}
-        />
-        <QuickLink
-          href="/search"
-          label="Mentions"
-          icon={Bell}
-          {...(demoMode ? { badge: "12" } : {})}
-          onNavigate={onNavigate}
-        />
-        <QuickLink
-          href="/rooms"
-          label="Browse rooms"
-          icon={Hash}
-          onNavigate={onNavigate}
-        />
-        <QuickLink
-          href="/search"
-          label="Saved items"
-          icon={Bookmark}
-          onNavigate={onNavigate}
-        />
-        <button
-          type="button"
-          onClick={onOpenPalette}
-          className="flex min-h-8 w-full items-center gap-2 rounded px-2 text-left text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
-        >
-          <Search className="size-3.5" />
-          <span className="flex-1">Search</span>
-          <kbd className="rounded border px-1 text-xs">⌘K</kbd>
-        </button>
-      </div>
-
-      {roomsLoaded && (
-        <>
-          <NavGroup label="Starred">
-            {favourites.map((room) => (
-              <ChannelLink
-                key={room.slug}
-                room={room}
-                onNavigate={onNavigate}
-              />
-            ))}
-          </NavGroup>
-          {[...channelGroups.entries()].map(([label, groupedRooms]) => (
-            <NavGroup key={label} label={label}>
-              {groupedRooms.map((room) => (
-                <ChannelLink
-                  key={room.slug}
-                  room={room}
-                  onNavigate={onNavigate}
-                />
-              ))}
-            </NavGroup>
-          ))}
-          <NavGroup label="Direct messages">
-            {directRooms.map((room) => (
-              <DirectLink key={room.slug} room={room} onNavigate={onNavigate} />
-            ))}
-          </NavGroup>
-        </>
-      )}
-    </nav>
-  );
-}
-
-export function AppShell({
-  children,
-  context,
-}: {
-  children: ReactNode;
-  context?: ReactNode;
-}) {
-  const router = useRouter();
-  const [paletteOpen, setPaletteOpen] = useState(false);
-  const [mobileNavOpen, setMobileNavOpen] = useState(false);
-  const [mobileContextOpen, setMobileContextOpen] = useState(false);
-  const [userMenuOpen, setUserMenuOpen] = useState(false);
-  const [theme, setTheme] = useState<"dark" | "light">("dark");
-
-  useEffect(() => {
-    const handler = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
-        event.preventDefault();
-        setPaletteOpen(true);
-      }
-    };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, []);
-
-  useEffect(() => {
-    document.documentElement.dataset.theme = theme;
-  }, [theme]);
-
-  useEffect(() => {
-    const openContext = () => setMobileContextOpen(true);
-    window.addEventListener("muster:open-context", openContext);
-    return () => window.removeEventListener("muster:open-context", openContext);
-  }, []);
-
-  const closeMobileNavigation = () => setMobileNavOpen(false);
-  const openPalette = () => {
-    setMobileNavOpen(false);
-    setPaletteOpen(true);
-  };
-
-  return (
-    <div className={cn("app-grid", !context && "app-grid-no-context")}>
-      <header className="topbar z-40 flex items-center gap-2 border-b bg-background px-2">
-        <Button
-          variant="ghost"
-          size="icon"
-          className="desktop:hidden"
-          aria-label="Open navigation"
-          onClick={() => setMobileNavOpen(true)}
-        >
-          <Menu />
-        </Button>
-        <div className="hidden items-center gap-1 desktop:flex">
-          <Button
-            variant="ghost"
-            size="icon"
-            aria-label="Go back"
-            onClick={() => router.back()}
-          >
-            <ChevronLeft />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            aria-label="Go forward"
-            onClick={() => router.forward()}
-          >
-            <ChevronRight />
-          </Button>
-        </div>
-        <button
-          type="button"
-          onClick={openPalette}
-          className="mx-auto flex h-8 min-w-0 max-w-xl flex-1 items-center gap-2 rounded-md border bg-muted/70 px-3 text-left text-xs text-muted-foreground hover:border-[var(--color-rule-strong)]"
-        >
-          <Search className="size-3.5" />
-          <span className="min-w-0 flex-1 truncate">
-            Search {demoOrganisation.name}
-          </span>
-          <kbd className="hidden rounded border bg-background px-1.5 py-0.5 text-xs tablet:inline">
-            ⌘K
-          </kbd>
-        </button>
-        <div className="relative flex items-center gap-1">
-          <span className="hidden items-center gap-1.5 text-xs text-[var(--color-success)] wide:flex">
-            <span className="size-1.5 rounded-full bg-[var(--color-success)]" />
-            Connected
-          </span>
-          <Button
-            variant="ghost"
-            size="icon"
-            aria-label="Pending approvals"
-            onClick={() => router.push("/approvals")}
-          >
-            <CircleCheck />
-            <span className="sr-only">
-              {demoMode ? "2 pending approvals" : "No pending approvals"}
-            </span>
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            aria-label="Notifications (coming soon)"
-            title="Notifications are not available yet"
-            disabled
-          >
-            <Bell />
-          </Button>
-          {context && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="context-mobile-trigger"
-              aria-label="Open context panel"
-              onClick={() => setMobileContextOpen(true)}
-            >
-              <PanelRightOpen />
-            </Button>
-          )}
-          <button
-            type="button"
-            className="ml-1 rounded-md"
-            aria-label="User menu and theme"
-            aria-expanded={userMenuOpen}
-            aria-haspopup="menu"
-            onClick={() => setUserMenuOpen((current) => !current)}
-          >
-            <Avatar initials={demoMode ? "JB" : "MA"} />
-          </button>
-          {userMenuOpen && (
-            <div
-              role="menu"
-              aria-label="User menu"
-              className="absolute right-0 top-10 z-50 w-44 rounded-md border bg-background p-1 shadow-lg"
-            >
-              <button
-                type="button"
-                role="menuitem"
-                className="flex min-h-9 w-full items-center gap-2 rounded px-2 text-left text-xs hover:bg-muted"
-                onClick={() => {
-                  setTheme(theme === "dark" ? "light" : "dark");
-                  setUserMenuOpen(false);
-                }}
-              >
-                {theme === "dark" ? (
-                  <Sun className="size-4" />
-                ) : (
-                  <Moon className="size-4" />
-                )}
-                {theme === "dark" ? "Use light theme" : "Use dark theme"}
-              </button>
-              <button
-                type="button"
-                role="menuitem"
-                className="flex min-h-9 w-full items-center gap-2 rounded px-2 text-left text-xs hover:bg-muted"
-                onClick={async () => {
-                  await authClient.signOut();
-                  window.location.assign("/login");
-                }}
-              >
-                <LogOut className="size-4" />
-                Sign out
-              </button>
-            </div>
-          )}
-        </div>
-      </header>
-
-      <aside className="navigation-sidebar hidden min-h-0 border-r bg-[var(--color-paper-2)] desktop:flex desktop:flex-col">
-        <div className="flex h-12 shrink-0 items-center gap-2 border-b px-3">
-          <Image
-            src="/icons/muster-32.png"
-            alt=""
-            width={30}
-            height={30}
-            className="rounded-md"
-            aria-hidden="true"
-          />
-          <div className="min-w-0 flex-1">
-            <p className="truncate text-xs font-bold">Muster</p>
-            <p className="truncate text-xs text-muted-foreground">
-              {demoOrganisation.name}
-            </p>
-          </div>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-8 min-h-8"
-            aria-label="New message"
-            onClick={openPalette}
-          >
-            <SquarePen />
-          </Button>
-        </div>
-        <div className="min-h-0 flex-1">
-          <MainNavigation onOpenPalette={openPalette} />
-        </div>
-        <div className="flex items-center gap-2 border-t p-2">
-          <Avatar initials={demoMode ? "JB" : "MA"} size="sm" />
-          <div className="min-w-0 flex-1">
-            <p className="truncate text-xs font-semibold">
-              {demoMode ? "Jordan Blake" : "Muster Administrator"}
-            </p>
-            <p className="truncate text-xs text-muted-foreground">
-              {demoMode ? "Security Lead" : "Administrator"}
-            </p>
-          </div>
-          <Link
-            href="/settings"
-            className="grid size-8 place-items-center rounded text-muted-foreground hover:bg-muted hover:text-foreground"
-            aria-label="Settings"
-          >
-            <Settings className="size-3.5" />
-          </Link>
-        </div>
-      </aside>
-
-      <main className="main-workspace flex min-h-0 flex-col bg-background">
-        {children}
-      </main>
-      {context && (
-        <aside
-          className={cn(
-            "context-panel min-h-0 border-l bg-[var(--color-paper-2)]",
-            mobileContextOpen && "mobile-context-open",
-          )}
-        >
-          {context}
-        </aside>
-      )}
-      {context && mobileContextOpen && (
-        <button
-          type="button"
-          className="mobile-context-backdrop"
-          aria-label="Close context panel"
-          onClick={() => setMobileContextOpen(false)}
-        />
-      )}
-
-      {mobileNavOpen && (
-        <div className="fixed inset-0 z-50 bg-[var(--color-overlay)] desktop:hidden">
-          <aside className="flex h-full w-[min(20rem,88vw)] flex-col border-r bg-background shadow-2xl">
-            <div className="flex h-14 items-center justify-between border-b px-3">
-              <span className="font-display text-sm font-bold">Muster</span>
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={closeMobileNavigation}
-                aria-label="Close navigation"
-              >
-                <X />
-              </Button>
-            </div>
-            <MainNavigation
-              onNavigate={closeMobileNavigation}
-              onOpenPalette={openPalette}
-            />
-          </aside>
-        </div>
-      )}
-      <CommandPalette open={paletteOpen} onOpenChange={setPaletteOpen} />
-    </div>
-  );
-}
diff --git a/apps/web/components/command-palette.tsx b/apps/web/components/command-palette.tsx
deleted file mode 100644
index 8f9987c..0000000
--- a/apps/web/components/command-palette.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useRef, useState } from "react";
-import { useRouter } from "next/navigation";
-import {
-  Bot,
-  Hash,
-  ListTodo,
-  MessageSquare,
-  Moon,
-  Search,
-  Sun,
-} from "lucide-react";
-import { demoDirectRooms, demoMode, demoRooms } from "@/lib/demo-data";
-import { cn } from "@/lib/utils";
-
-const baseCommands = [
-  {
-    label: "Search messages and security memory",
-    href: "/search",
-    icon: Search,
-    hint: "S",
-  },
-  { label: "Open task board", href: "/tasks", icon: ListTodo, hint: "T" },
-  ...(demoMode
-    ? [
-        { label: "Open #alerts", href: "/rooms/alerts", icon: Hash, hint: "A" },
-        {
-          label: "Open #active-incidents",
-          href: "/rooms/active-incidents",
-          icon: Hash,
-          hint: "I",
-        },
-      ]
-    : []),
-] as const;
-
-export function CommandPalette({
-  open,
-  onOpenChange,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}) {
-  const router = useRouter();
-  const dialogRef = useRef<HTMLDialogElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [query, setQuery] = useState("");
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) {
-      dialog.showModal();
-      inputRef.current?.focus();
-    }
-    if (!open && dialog.open) dialog.close();
-  }, [open]);
-
-  const commands = useMemo(
-    () =>
-      [
-        ...baseCommands,
-        ...demoRooms.map((room) => ({
-          label: `# ${room.name}`,
-          href: `/rooms/${room.slug}`,
-          icon: Hash,
-          hint: "Room",
-        })),
-        ...demoDirectRooms.map((room) => ({
-          label: `Message ${room.name}`,
-          href: `/rooms/${room.slug}`,
-          icon: room.agent ? Bot : MessageSquare,
-          hint: room.agent ? "Agent" : "DM",
-        })),
-      ].filter((command) =>
-        command.label.toLowerCase().includes(query.toLowerCase()),
-      ),
-    [query],
-  );
-
-  useEffect(() => setSelectedIndex(0), [query]);
-
-  function choose(href: string) {
-    onOpenChange(false);
-    setQuery("");
-    router.push(href);
-  }
-
-  return (
-    <dialog
-      ref={dialogRef}
-      aria-label="Command palette"
-      onClose={() => onOpenChange(false)}
-      onClick={(event) => {
-        if (event.target === dialogRef.current) dialogRef.current.close();
-      }}
-      className="m-auto w-[min(42rem,calc(100%-2rem))] rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-2xl backdrop:bg-[var(--color-overlay)]"
-    >
-      <div className="flex items-center gap-3 border-b px-4">
-        <Search className="size-4 text-muted-foreground" aria-hidden="true" />
-        <input
-          ref={inputRef}
-          value={query}
-          onChange={(event) => setQuery(event.target.value)}
-          onKeyDown={(event) => {
-            if (event.key === "ArrowDown") {
-              event.preventDefault();
-              setSelectedIndex((current) =>
-                commands.length === 0
-                  ? 0
-                  : Math.min(current + 1, commands.length - 1),
-              );
-            } else if (event.key === "ArrowUp") {
-              event.preventDefault();
-              setSelectedIndex((current) => Math.max(current - 1, 0));
-            } else if (event.key === "Enter") {
-              event.preventDefault();
-              const command = commands[selectedIndex];
-              if (command) choose(command.href);
-            } else if (event.key === "Escape") {
-              onOpenChange(false);
-            }
-          }}
-          placeholder="Type a command or search rooms"
-          className="h-13 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
-        />
-        <kbd className="rounded border px-1.5 py-0.5 text-xs text-muted-foreground">
-          Esc
-        </kbd>
-      </div>
-      <div className="max-h-[24rem] overflow-y-auto p-2">
-        {commands.map((command, index) => (
-          <button
-            key={`${command.href}-${command.label}`}
-            onClick={() => choose(command.href)}
-            className={cn(
-              "flex min-h-11 w-full items-center gap-3 rounded-md px-3 text-left text-sm hover:bg-muted",
-              index === selectedIndex && "bg-muted",
-            )}
-            onMouseEnter={() => setSelectedIndex(index)}
-          >
-            <command.icon
-              className="size-4 text-muted-foreground"
-              aria-hidden="true"
-            />
-            <span className="flex-1">{command.label}</span>
-            <span className="text-xs text-muted-foreground">
-              {command.hint}
-            </span>
-          </button>
-        ))}
-        {commands.length === 0 && (
-          <p className="p-6 text-center text-sm text-muted-foreground">
-            No matching commands.
-          </p>
-        )}
-      </div>
-      <div className="flex items-center justify-between border-t px-4 py-2 text-xs text-muted-foreground">
-        <span>Results filtered by your capabilities</span>
-        <span className="flex items-center gap-2">
-          <Sun className="size-3" /> / <Moon className="size-3" /> theme in
-          settings
-        </span>
-      </div>
-    </dialog>
-  );
-}
diff --git a/apps/web/components/operations-chart.tsx b/apps/web/components/operations-chart.tsx
deleted file mode 100644
index 59322f7..0000000
--- a/apps/web/components/operations-chart.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-
-import {
-  CartesianGrid,
-  Line,
-  LineChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
-import { operationsTrend } from "@/lib/demo-data";
-
-export function OperationsChart() {
-  return (
-    <div className="h-48 w-full" role="img" aria-label="Alerts and investigations over seven hours">
-      <ResponsiveContainer width="100%" height="100%">
-        <LineChart data={operationsTrend} margin={{ top: 8, right: 8, left: -24, bottom: 0 }} accessibilityLayer>
-          <CartesianGrid vertical={false} className="chart-grid" />
-          <XAxis dataKey="time" tickLine={false} axisLine={false} className="chart-axis" fontSize={10} />
-          <YAxis tickLine={false} axisLine={false} className="chart-axis" fontSize={10} />
-          <Tooltip
-            contentStyle={{
-              background: "var(--color-paper-3)",
-              border: "1px solid var(--color-rule)",
-              borderRadius: "var(--radius-md)",
-              fontSize: 11,
-            }}
-          />
-          <Line type="monotone" dataKey="alerts" className="chart-line-primary" strokeWidth={2} dot={false} isAnimationActive={false} />
-          <Line type="monotone" dataKey="investigations" className="chart-line-secondary" strokeWidth={2} dot={false} isAnimationActive={false} />
-        </LineChart>
-      </ResponsiveContainer>
-    </div>
-  );
-}
diff --git a/apps/web/components/room-admin-view.tsx b/apps/web/components/room-admin-view.tsx
deleted file mode 100644
index e2262c2..0000000
--- a/apps/web/components/room-admin-view.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import { AppShell } from "@/components/app-shell";
-import { PageHeader } from "@/components/page-header";
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-
-type AdminData = {
-  rooms: Array<{
-    id: string;
-    displayName: string;
-    visibility: string;
-    roomType: string;
-    owner: string | null;
-    memberCount: number;
-  }>;
-  actors: Array<{
-    id: string;
-    displayName: string;
-    actorType: string;
-    status: string;
-    jobTitle: string | null;
-    timezone: string | null;
-  }>;
-  invitations: Array<{
-    id: string;
-    roomName: string;
-    actorName: string;
-    role: string;
-    status: string;
-    accessExpiresAt: string | null;
-  }>;
-  owners: Array<{
-    roomId: string;
-    actorName: string;
-    role: string;
-  }>;
-  guests: Array<{
-    roomId: string;
-    actorName: string;
-    accessExpiresAt: string | null;
-  }>;
-  agents: Array<{
-    roomId: string;
-    actorName: string;
-    accessExpiresAt: string | null;
-  }>;
-  audit: Array<{
-    id: string;
-    action: string;
-    targetId: string;
-    actorId: string;
-    createdAt: string;
-  }>;
-};
-
-const tabs = [
-  "Invitations",
-  "Users",
-  "Guests",
-  "Agents",
-  "Ownership",
-  "Audit",
-] as const;
-
-export function RoomAdminView() {
-  const [data, setData] = useState<AdminData | null>(null);
-  const [tab, setTab] = useState<(typeof tabs)[number]>("Invitations");
-  const [error, setError] = useState("");
-
-  useEffect(() => {
-    void fetch("/api/v1/rooms/admin")
-      .then(async (response) => {
-        if (!response.ok) {
-          const payload = (await response.json().catch(() => null)) as {
-            detail?: string;
-          } | null;
-          throw new Error(payload?.detail ?? "Administration unavailable");
-        }
-        const payload = (await response.json()) as { data: AdminData };
-        setData(payload.data);
-      })
-      .catch((cause: unknown) =>
-        setError(
-          cause instanceof Error ? cause.message : "Administration unavailable",
-        ),
-      );
-  }, []);
-
-  return (
-    <AppShell>
-      <PageHeader
-        eyebrow="Configure"
-        title="Room governance"
-        description="Organisation-wide invitations, users, guests, agents, ownership and room audit."
-        actions={
-          <Link
-            href="/rooms"
-            className="inline-flex min-h-9 items-center rounded-md border px-3 text-xs font-semibold hover:bg-muted"
-          >
-            Back to rooms
-          </Link>
-        }
-      />
-      <div className="scroll-region min-h-0 flex-1 overflow-y-auto p-3 tablet:p-5">
-        <div className="mx-auto max-w-6xl">
-          {error && (
-            <div role="alert" className="rounded-lg border p-6 text-sm">
-              <p className="font-bold">Room administration is restricted.</p>
-              <p className="mt-2 text-xs text-muted-foreground">{error}</p>
-            </div>
-          )}
-          {data && (
-            <>
-              <div
-                role="tablist"
-                aria-label="Room administration sections"
-                className="flex gap-1 overflow-x-auto border-b"
-              >
-                {tabs.map((candidate) => (
-                  <button
-                    key={candidate}
-                    type="button"
-                    role="tab"
-                    aria-selected={tab === candidate}
-                    onClick={() => setTab(candidate)}
-                    className={cn(
-                      "min-h-10 shrink-0 border-b-2 border-transparent px-3 text-xs text-muted-foreground",
-                      tab === candidate &&
-                        "border-[var(--color-accent)] font-semibold text-foreground",
-                    )}
-                  >
-                    {candidate}
-                  </button>
-                ))}
-              </div>
-              <div className="mt-4 grid gap-3">
-                {tab === "Invitations" &&
-                  data.invitations.map((item) => (
-                    <AdminRow
-                      key={item.id}
-                      title={`${item.actorName} → ${item.roomName}`}
-                      meta={`${item.role} · ${
-                        item.accessExpiresAt
-                          ? `expires ${new Date(
-                              item.accessExpiresAt,
-                            ).toLocaleString()}`
-                          : "no expiry"
-                      }`}
-                      badge={item.status}
-                    />
-                  ))}
-                {tab === "Users" &&
-                  data.actors.map((item) => (
-                    <AdminRow
-                      key={item.id}
-                      title={item.displayName}
-                      meta={`${item.actorType} · ${item.jobTitle || "No title"} · ${
-                        item.timezone || "No timezone"
-                      }`}
-                      badge={item.status}
-                    />
-                  ))}
-                {tab === "Guests" &&
-                  data.guests.map((item) => (
-                    <AdminRow
-                      key={`${item.roomId}:${item.actorName}`}
-                      title={item.actorName}
-                      meta={`Room ${item.roomId} · ${
-                        item.accessExpiresAt
-                          ? `expires ${new Date(
-                              item.accessExpiresAt,
-                            ).toLocaleString()}`
-                          : "expiry missing"
-                      }`}
-                      badge="guest"
-                    />
-                  ))}
-                {tab === "Agents" &&
-                  data.agents.map((item) => (
-                    <AdminRow
-                      key={`${item.roomId}:${item.actorName}`}
-                      title={item.actorName}
-                      meta={`Room ${item.roomId}`}
-                      badge="agent"
-                    />
-                  ))}
-                {tab === "Ownership" &&
-                  data.rooms.map((room) => (
-                    <AdminRow
-                      key={room.id}
-                      title={room.displayName}
-                      meta={`${room.visibility} · ${room.roomType} · ${room.memberCount} members`}
-                      badge={room.owner || "No owner"}
-                    />
-                  ))}
-                {tab === "Audit" &&
-                  data.audit.map((item) => (
-                    <AdminRow
-                      key={item.id}
-                      title={item.action}
-                      meta={`${new Date(item.createdAt).toLocaleString()} · room ${item.targetId}`}
-                      badge="audited"
-                    />
-                  ))}
-                {((tab === "Invitations" && data.invitations.length === 0) ||
-                  (tab === "Guests" && data.guests.length === 0) ||
-                  (tab === "Agents" && data.agents.length === 0) ||
-                  (tab === "Audit" && data.audit.length === 0)) && (
-                  <p className="rounded border border-dashed p-8 text-center text-xs text-muted-foreground">
-                    No records in this section.
-                  </p>
-                )}
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-    </AppShell>
-  );
-}
-
-function AdminRow({
-  title,
-  meta,
-  badge,
-}: {
-  title: string;
-  meta: string;
-  badge: string;
-}) {
-  return (
-    <article className="flex flex-wrap items-center gap-3 rounded-lg border bg-[var(--color-paper-2)] p-4">
-      <div className="min-w-0 flex-1">
-        <p className="truncate text-sm font-semibold">{title}</p>
-        <p className="mt-1 break-all text-xs text-muted-foreground">{meta}</p>
-      </div>
-      <Badge>{badge}</Badge>
-    </article>
-  );
-}
diff --git a/apps/web/components/room-agent-activity.tsx b/apps/web/components/room-agent-activity.tsx
deleted file mode 100644
index 0e17b5b..0000000
--- a/apps/web/components/room-agent-activity.tsx
+++ /dev/null
@@ -1,341 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { ArrowLeft, Bot, Clock3, X } from "lucide-react";
-import { Avatar } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-
-type ActivityAgent = {
-  agentId: string;
-  agentName: string;
-  agentAvatar: string | null;
-  runId: string;
-  status: "queued" | "running";
-  headline: string;
-  activityAt: string | null;
-  activeSince: string;
-  lastCompletedAt: string | null;
-};
-
-type ActivityData = {
-  roomId: string;
-  roomName: string;
-  activeAgents: ActivityAgent[];
-};
-
-type RunDetail = {
-  runId: string;
-  status: string;
-  startedAt: string | null;
-  completedAt: string | null;
-  events: Array<{
-    id: string;
-    eventType: string;
-    message: string;
-    createdAt: string;
-  }>;
-};
-
-function initials(name: string): string {
-  return name
-    .split(/\s+/)
-    .map((part) => part[0])
-    .join("")
-    .slice(0, 2)
-    .toUpperCase();
-}
-
-function elapsed(since: string): string {
-  const seconds = Math.max(
-    0,
-    Math.floor((Date.now() - new Date(since).getTime()) / 1_000),
-  );
-  if (seconds < 60) return `${seconds}s`;
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m`;
-  return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
-}
-
-function recent(value: string): string {
-  const seconds = Math.max(
-    0,
-    Math.floor((Date.now() - new Date(value).getTime()) / 1_000),
-  );
-  if (seconds < 60) return `${seconds}s ago`;
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.floor(minutes / 60);
-  return hours < 24 ? `${hours}h ago` : `${Math.floor(hours / 24)}d ago`;
-}
-
-export function RoomAgentActivity({
-  roomId,
-  roomResolved,
-  showDemoFallback = false,
-}: {
-  roomId: string;
-  roomResolved: boolean;
-  showDemoFallback?: boolean;
-}) {
-  const [data, setData] = useState<ActivityData | null>(null);
-  const [panelOpen, setPanelOpen] = useState(false);
-  const [selectedRunId, setSelectedRunId] = useState<string | null>(null);
-  const [runDetail, setRunDetail] = useState<RunDetail | null>(null);
-  const [runLoading, setRunLoading] = useState(false);
-  const [runError, setRunError] = useState<string | null>(null);
-
-  useEffect(() => {
-    setPanelOpen(false);
-    setSelectedRunId(null);
-    setRunDetail(null);
-    setData(null);
-    if (!roomResolved) return;
-    const controller = new AbortController();
-    const refresh = async () => {
-      const response = await fetch(`/api/v1/rooms/${roomId}/agent-activity`, {
-        signal: controller.signal,
-      });
-      if (!response.ok) return;
-      const payload = (await response.json()) as { data: ActivityData };
-      setData(payload.data);
-    };
-    void refresh().catch(() => undefined);
-    const timer = window.setInterval(
-      () => void refresh().catch(() => undefined),
-      5_000,
-    );
-    return () => {
-      controller.abort();
-      window.clearInterval(timer);
-    };
-  }, [roomId, roomResolved]);
-
-  useEffect(() => {
-    if (data && data.activeAgents.length < 2) setPanelOpen(false);
-  }, [data]);
-
-  useEffect(() => {
-    if (!panelOpen) return;
-    const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setPanelOpen(false);
-    };
-    window.addEventListener("keydown", closeOnEscape);
-    return () => window.removeEventListener("keydown", closeOnEscape);
-  }, [panelOpen]);
-
-  async function openRun(runId: string) {
-    setSelectedRunId(runId);
-    setRunDetail(null);
-    setRunError(null);
-    setRunLoading(true);
-    try {
-      const response = await fetch(`/api/v1/agent-runs/${runId}/timeline`);
-      if (!response.ok) throw new Error("Run timeline unavailable.");
-      const payload = (await response.json()) as { data: RunDetail };
-      setRunDetail(payload.data);
-    } catch {
-      setRunError("Run timeline unavailable.");
-    } finally {
-      setRunLoading(false);
-    }
-  }
-
-  const agents = data?.activeAgents ?? [];
-  if (agents.length === 0) {
-    if (!showDemoFallback) return null;
-    return (
-      <div className="mx-4 mt-3 flex items-center gap-2 rounded border border-[var(--color-accent)] bg-[var(--color-accent-soft)] p-2 text-xs">
-        <Bot className="size-4 text-[var(--color-agent)]" />
-        <span className="flex-1">
-          <strong>Detection Engineering Agent</strong> is drafting Sigma and KQL
-          proposals…
-        </span>
-        <Badge className="agent-surface">Running · 01:18</Badge>
-      </div>
-    );
-  }
-
-  const single = agents[0]!;
-  return (
-    <>
-      <div
-        role="status"
-        aria-live="polite"
-        data-testid="room-agent-activity"
-        className="mx-4 mt-3 flex min-w-0 items-center gap-2 rounded border border-[var(--color-accent)] bg-[var(--color-accent-soft)] p-2 text-xs"
-      >
-        <Bot className="size-4 shrink-0 text-[var(--color-agent)]" />
-        {agents.length === 1 ? (
-          <>
-            <span className="min-w-0 flex-1 truncate">
-              <strong>{single.agentName}</strong> · {single.headline}
-            </span>
-            <Badge className="agent-surface shrink-0">
-              {single.status === "running" ? "Running" : "Queued"} ·{" "}
-              {elapsed(single.activeSince)}
-            </Badge>
-          </>
-        ) : (
-          <>
-            <span className="min-w-0 flex-1 truncate">
-              <strong>{agents.length} agents working</strong> ·{" "}
-              {single.headline}
-            </span>
-            <Button
-              size="sm"
-              variant="ghost"
-              className="h-7 min-h-7 shrink-0 px-2"
-              onClick={() => setPanelOpen(true)}
-            >
-              View all
-            </Button>
-          </>
-        )}
-      </div>
-
-      {panelOpen && (
-        <>
-          <button
-            type="button"
-            aria-label="Close agent activity"
-            className="fixed inset-0 z-40 bg-black/30"
-            onClick={() => setPanelOpen(false)}
-          />
-          <aside
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby="agent-activity-title"
-            data-testid="agent-activity-panel"
-            className="fixed inset-y-0 right-0 z-50 flex w-full flex-col border-l bg-background shadow-xl tablet:w-[28rem]"
-          >
-            <header className="flex min-h-14 items-center gap-2 border-b px-4">
-              {selectedRunId && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  aria-label="Back to all active agents"
-                  onClick={() => {
-                    setSelectedRunId(null);
-                    setRunDetail(null);
-                    setRunError(null);
-                  }}
-                >
-                  <ArrowLeft />
-                </Button>
-              )}
-              <div className="min-w-0 flex-1">
-                <h2
-                  id="agent-activity-title"
-                  className="truncate font-display text-sm font-bold"
-                >
-                  {selectedRunId ? "Run timeline" : "Agents working now"}
-                </h2>
-                <p className="truncate text-xs text-muted-foreground">
-                  {data?.roomName}
-                </p>
-              </div>
-              <Button
-                variant="ghost"
-                size="icon"
-                aria-label="Close agent activity panel"
-                onClick={() => setPanelOpen(false)}
-              >
-                <X />
-              </Button>
-            </header>
-
-            <div className="min-h-0 flex-1 overflow-y-auto p-4">
-              {selectedRunId ? (
-                <>
-                  {runLoading && (
-                    <p className="text-sm text-muted-foreground">
-                      Loading append-only timeline…
-                    </p>
-                  )}
-                  {runError && (
-                    <p role="alert" className="text-sm text-destructive">
-                      {runError}
-                    </p>
-                  )}
-                  {runDetail && (
-                    <ol className="space-y-3">
-                      {runDetail.events.map((event) => (
-                        <li
-                          key={event.id}
-                          className="border-b pb-3 last:border-b-0"
-                        >
-                          <div className="flex items-center justify-between gap-3">
-                            <strong className="text-xs">
-                              {event.eventType.replaceAll("_", " ")}
-                            </strong>
-                            <time className="shrink-0 text-xs text-muted-foreground">
-                              {new Date(event.createdAt).toLocaleTimeString()}
-                            </time>
-                          </div>
-                          <p className="mt-1 break-words text-xs leading-5 text-muted-foreground">
-                            {event.message}
-                          </p>
-                        </li>
-                      ))}
-                    </ol>
-                  )}
-                </>
-              ) : (
-                <div className="space-y-3">
-                  {agents.map((agent) => (
-                    <article
-                      key={agent.runId}
-                      className="rounded border bg-card p-3"
-                    >
-                      <div className="flex items-start gap-3">
-                        <Avatar
-                          initials={initials(agent.agentName)}
-                          agent
-                          size="sm"
-                        />
-                        <div className="min-w-0 flex-1">
-                          <div className="flex items-center justify-between gap-2">
-                            <h3 className="truncate text-sm font-bold">
-                              {agent.agentName}
-                            </h3>
-                            <Badge className="agent-surface shrink-0">
-                              {agent.status === "running"
-                                ? "Running"
-                                : "Queued"}
-                            </Badge>
-                          </div>
-                          <p className="mt-1 text-xs text-muted-foreground">
-                            In {data?.roomName} · {elapsed(agent.activeSince)}
-                          </p>
-                          <p className="mt-2 line-clamp-2 break-words text-xs leading-5">
-                            {agent.headline}
-                          </p>
-                          <div className="mt-3 flex items-center justify-between gap-3">
-                            <span className="flex min-w-0 items-center gap-1 text-xs text-muted-foreground">
-                              <Clock3 className="size-3 shrink-0" />
-                              {agent.lastCompletedAt
-                                ? `Last completed ${recent(agent.lastCompletedAt)}`
-                                : "No prior completion in this room"}
-                            </span>
-                            <Button
-                              size="sm"
-                              variant="outline"
-                              onClick={() => void openRun(agent.runId)}
-                            >
-                              View
-                            </Button>
-                          </div>
-                        </div>
-                      </div>
-                    </article>
-                  ))}
-                </div>
-              )}
-            </div>
-          </aside>
-        </>
-      )}
-    </>
-  );
-}
diff --git a/apps/web/components/room-agent-handoffs.tsx b/apps/web/components/room-agent-handoffs.tsx
deleted file mode 100644
index 6d971b9..0000000
--- a/apps/web/components/room-agent-handoffs.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { AgentHandoffCard } from "@/components/agent-handoff-card";
-import type { AgentHandoff } from "@/lib/agent-handoff-domain";
-
-export function RoomAgentHandoffs({
-  roomId,
-  roomResolved,
-}: {
-  roomId: string;
-  roomResolved: boolean;
-}) {
-  const [handoffs, setHandoffs] = useState<AgentHandoff[]>([]);
-
-  useEffect(() => {
-    setHandoffs([]);
-    if (!roomResolved) return;
-    const controller = new AbortController();
-    const refresh = async () => {
-      const response = await fetch(
-        `/api/v1/rooms/${roomId}/agent-handoffs`,
-        {
-          cache: "no-store",
-          signal: controller.signal,
-        },
-      );
-      if (!response.ok) return;
-      const payload = (await response.json()) as {
-        data: AgentHandoff[];
-      };
-      setHandoffs(payload.data);
-    };
-    void refresh().catch(() => undefined);
-    const timer = window.setInterval(
-      () => void refresh().catch(() => undefined),
-      5_000,
-    );
-    return () => {
-      controller.abort();
-      window.clearInterval(timer);
-    };
-  }, [roomId, roomResolved]);
-
-  if (handoffs.length === 0) return null;
-  return (
-    <section
-      aria-label="Completed agent handoffs"
-      data-testid="room-agent-handoffs"
-      className="mx-4 my-3 space-y-2"
-    >
-      <h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
-        Completed agent handoffs
-      </h2>
-      {handoffs.map((handoff) => (
-        <AgentHandoffCard key={handoff.runId} handoff={handoff} compact />
-      ))}
-    </section>
-  );
-}
diff --git a/apps/web/components/room-composer.tsx b/apps/web/components/room-composer.tsx
deleted file mode 100644
index e989135..0000000
--- a/apps/web/components/room-composer.tsx
+++ /dev/null
@@ -1,983 +0,0 @@
-"use client";
-
-import {
-  useEffect,
-  useRef,
-  useState,
-  type ClipboardEvent,
-  type KeyboardEvent,
-} from "react";
-import { EditorContent, useEditor } from "@tiptap/react";
-import Placeholder from "@tiptap/extension-placeholder";
-import StarterKit from "@tiptap/starter-kit";
-import {
-  AtSign,
-  Bold,
-  Bot,
-  Code2,
-  FileUp,
-  Italic,
-  Link2,
-  ListChecks,
-  RefreshCw,
-  Send,
-  ShieldCheck,
-  SmilePlus,
-  X,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import {
-  VisualReactionAsset,
-  type VisualReactionAssetData,
-} from "@/components/visual-reaction-asset";
-import { browserUuid } from "@/lib/browser-uuid";
-import { roomIdBySlug } from "@/lib/demo-data";
-
-export type RoomMessageRecord = {
-  id: string;
-  roomId?: string;
-  threadParentId: string | null;
-  authorActorId: string;
-  authorName?: string;
-  authorType?: "human" | "agent" | "product" | "service" | "system";
-  messageType?: string;
-  dataClassification?: string;
-  document?: Record<string, unknown>;
-  plainText: string;
-  createdAt: string;
-  editedAt?: string | null;
-  deletedAt?: string | null;
-  reactions?: Array<{
-    emoji: string;
-    count: number;
-    reactedByMe: boolean;
-  }>;
-  replyCount?: number;
-  participantActorIds?: string[];
-  pinned?: boolean;
-  saved?: boolean;
-  following?: boolean;
-  canEdit?: boolean;
-  canPin?: boolean;
-  unread?: boolean;
-  relatedAlertId?: string | null;
-  relatedInvestigationId?: string | null;
-  relatedCaseId?: string | null;
-  relatedAgentRunId?: string | null;
-  relatedWorkflowRunId?: string | null;
-  clientId?: string;
-  idempotencyKey?: string;
-  deliveryState?: "pending" | "delivered" | "failed";
-};
-
-type SendPayload = {
-  document: Record<string, unknown>;
-  plainText: string;
-  messageType: "text";
-  dataClassification: "internal";
-  idempotencyKey: string;
-};
-
-type AttachmentUpload = {
-  clientId: string;
-  id?: string;
-  label: string;
-  mimeType: string;
-  size: number;
-  progress: number;
-  state: "uploading" | "stored" | "failed";
-  error?: string | undefined;
-  file?: File | undefined;
-};
-
-type ReactionCatalogPack = {
-  id: string;
-  displayName: string;
-  revisionId: string;
-  revision: number;
-  assets: Array<
-    VisualReactionAssetData & {
-      name: string;
-      mimeType: string;
-      width: number;
-      height: number;
-      frameCount: number;
-      url: string;
-    }
-  >;
-};
-
-export function RoomComposer({
-  roomSlug,
-  roomLabel,
-  onDeliveryChange,
-}: {
-  roomSlug: string;
-  roomLabel?: string;
-  onDeliveryChange?: (message: RoomMessageRecord) => void;
-}) {
-  const [state, setState] = useState<"idle" | "sending" | "error">("idle");
-  const [editorReady, setEditorReady] = useState(false);
-  const [uploads, setUploads] = useState<AttachmentUpload[]>([]);
-  const [enterToSend, setEnterToSend] = useState(true);
-  const [linkOpen, setLinkOpen] = useState(false);
-  const [linkUrl, setLinkUrl] = useState("");
-  const [reactionPickerOpen, setReactionPickerOpen] = useState(false);
-  const [reactionPacks, setReactionPacks] = useState<ReactionCatalogPack[]>([]);
-  const [reactionCatalogLoaded, setReactionCatalogLoaded] = useState(false);
-  const [reactionSending, setReactionSending] = useState(false);
-  const [reactionError, setReactionError] = useState("");
-  const stateRef = useRef(state);
-  const uploadsRef = useRef<AttachmentUpload[]>([]);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const idempotencyKeyRef = useRef(browserUuid());
-  const lastSubmittedRef = useRef<SendPayload | null>(null);
-  const typingStopRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const lastTypingAtRef = useRef(0);
-  const storageKey = `muster:draft:${roomSlug}`;
-  const enterToSendKey = "muster:composer:enter-send";
-  const roomId =
-    roomIdBySlug[roomSlug] ??
-    roomIdBySlug["investigation-suspicious-powershell"];
-
-  useEffect(() => {
-    let cancelled = false;
-    void fetch("/api/v1/reaction-packs/catalog")
-      .then(async (response) => {
-        if (!response.ok) throw new Error("Reaction catalog unavailable");
-        return (await response.json()) as { data: ReactionCatalogPack[] };
-      })
-      .then((payload) => {
-        if (!cancelled) setReactionPacks(payload.data);
-      })
-      .catch(() => {
-        if (!cancelled) setReactionPacks([]);
-      })
-      .finally(() => {
-        if (!cancelled) setReactionCatalogLoaded(true);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!reactionPickerOpen) return;
-    function closeOnEscape(event: globalThis.KeyboardEvent) {
-      if (event.key === "Escape") setReactionPickerOpen(false);
-    }
-    document.addEventListener("keydown", closeOnEscape);
-    return () => document.removeEventListener("keydown", closeOnEscape);
-  }, [reactionPickerOpen]);
-
-  function updateState(next: "idle" | "sending" | "error") {
-    stateRef.current = next;
-    setState(next);
-  }
-
-  function reportTyping(active: boolean) {
-    if (!roomId) return;
-    void fetch(`/api/v1/rooms/${roomId}/typing`, {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({ active }),
-    }).catch(() => undefined);
-  }
-
-  function persistDraft(document: Record<string, unknown>) {
-    localStorage.setItem(
-      storageKey,
-      JSON.stringify({
-        document,
-        idempotencyKey: idempotencyKeyRef.current,
-        attachments: uploadsRef.current
-          .filter(
-            (
-              upload,
-            ): upload is AttachmentUpload & {
-              id: string;
-              state: "stored";
-            } => upload.state === "stored" && Boolean(upload.id),
-          )
-          .map(({ id, label, mimeType, size }) => ({
-            id,
-            label,
-            mimeType,
-            size,
-          })),
-      }),
-    );
-  }
-
-  const editor = useEditor({
-    extensions: [
-      StarterKit.configure({
-        link: {
-          openOnClick: false,
-          HTMLAttributes: {
-            rel: "noopener noreferrer nofollow",
-            target: "_blank",
-          },
-        },
-      }),
-      Placeholder.configure({
-        placeholder: `Message ${roomLabel ?? `#${roomSlug}`} or type / for commands`,
-      }),
-    ],
-    editorProps: {
-      attributes: {
-        "aria-label": `Message ${roomLabel ?? `#${roomSlug}`}`,
-        "aria-multiline": "true",
-        role: "textbox",
-      },
-    },
-    immediatelyRender: false,
-    onUpdate({ editor: current }) {
-      persistDraft(current.getJSON());
-      const now = Date.now();
-      if (now - lastTypingAtRef.current > 1_500) {
-        lastTypingAtRef.current = now;
-        reportTyping(true);
-      }
-      if (typingStopRef.current) clearTimeout(typingStopRef.current);
-      typingStopRef.current = setTimeout(() => reportTyping(false), 2_500);
-    },
-  });
-
-  useEffect(() => {
-    setEnterToSend(localStorage.getItem(enterToSendKey) !== "false");
-  }, []);
-
-  useEffect(() => {
-    if (!editor) return;
-    const draft = localStorage.getItem(storageKey);
-    if (!draft) {
-      setEditorReady(true);
-      return;
-    }
-    try {
-      const parsed = JSON.parse(draft) as {
-        document?: Record<string, unknown>;
-        idempotencyKey?: string;
-        attachments?: Array<{
-          id: string;
-          label: string;
-          mimeType: string;
-          size: number;
-        }>;
-        type?: string;
-      };
-      if (parsed.document) {
-        editor.commands.setContent(parsed.document);
-        if (parsed.idempotencyKey) {
-          idempotencyKeyRef.current = parsed.idempotencyKey;
-        }
-        const restored = (parsed.attachments ?? []).map((attachment) => ({
-          ...attachment,
-          clientId: `stored:${attachment.id}`,
-          progress: 100,
-          state: "stored" as const,
-        }));
-        uploadsRef.current = restored;
-        setUploads(restored);
-      } else if (parsed.type === "doc") {
-        editor.commands.setContent(parsed);
-      }
-    } catch {
-      localStorage.removeItem(storageKey);
-    } finally {
-      setEditorReady(true);
-    }
-  }, [editor, storageKey]);
-
-  useEffect(() => {
-    uploadsRef.current = uploads;
-    if (!editor || !editorReady || (editor.isEmpty && uploads.length === 0))
-      return;
-    persistDraft(editor.getJSON());
-  }, [editor, editorReady, uploads, storageKey]);
-
-  useEffect(
-    () => () => {
-      if (typingStopRef.current) clearTimeout(typingStopRef.current);
-      reportTyping(false);
-    },
-    [roomId],
-  );
-
-  async function send(retry = false) {
-    if (!editor || stateRef.current === "sending" || !roomId) return;
-    const storedAttachments = uploadsRef.current.filter(
-      (upload): upload is AttachmentUpload & { id: string; state: "stored" } =>
-        upload.state === "stored" && Boolean(upload.id),
-    );
-    const payload =
-      retry && lastSubmittedRef.current
-        ? lastSubmittedRef.current
-        : (() => {
-            const editorDocument = editor.getJSON();
-            const attachmentText = storedAttachments.map(
-              (attachment) => `Evidence attachment: ${attachment.label}`,
-            );
-            return {
-              document: {
-                ...editorDocument,
-                content: [
-                  ...(Array.isArray(editorDocument.content)
-                    ? editorDocument.content
-                    : []),
-                  ...storedAttachments.map((attachment) => ({
-                    type: "attachment",
-                    attrs: { id: attachment.id, label: attachment.label },
-                  })),
-                ],
-              },
-              plainText: [editor.getText().trim(), ...attachmentText]
-                .filter(Boolean)
-                .join("\n"),
-              messageType: "text" as const,
-              dataClassification: "internal" as const,
-              idempotencyKey: idempotencyKeyRef.current,
-            };
-          })();
-    if (!payload.plainText) return;
-    lastSubmittedRef.current = payload;
-    const clientId = `client:${payload.idempotencyKey}`;
-    updateState("sending");
-    reportTyping(false);
-    onDeliveryChange?.({
-      id: clientId,
-      clientId,
-      threadParentId: null,
-      authorActorId: "",
-      plainText: payload.plainText,
-      createdAt: new Date().toISOString(),
-      idempotencyKey: payload.idempotencyKey,
-      deliveryState: "pending",
-    });
-    try {
-      const response = await fetch(`/api/v1/rooms/${roomId}/messages`, {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify(payload),
-      });
-      if (!response.ok)
-        throw new Error(`Message send failed (${response.status})`);
-      const result = (await response.json()) as { data: RoomMessageRecord };
-      onDeliveryChange?.({
-        ...result.data,
-        clientId,
-        idempotencyKey: payload.idempotencyKey,
-        deliveryState: "delivered",
-      });
-      uploadsRef.current = [];
-      setUploads([]);
-      editor.commands.clearContent();
-      localStorage.removeItem(storageKey);
-      idempotencyKeyRef.current = browserUuid();
-      lastSubmittedRef.current = null;
-      updateState("idle");
-    } catch {
-      updateState("error");
-      onDeliveryChange?.({
-        id: clientId,
-        clientId,
-        threadParentId: null,
-        authorActorId: "",
-        plainText: payload.plainText,
-        createdAt: new Date().toISOString(),
-        idempotencyKey: payload.idempotencyKey,
-        deliveryState: "failed",
-      });
-    }
-  }
-
-  async function sendVisualReaction(
-    pack: ReactionCatalogPack,
-    asset: ReactionCatalogPack["assets"][number],
-  ) {
-    if (!roomId || reactionSending) return;
-    setReactionSending(true);
-    setReactionError("");
-    const payload = {
-      document: {
-        type: "doc",
-        content: [
-          {
-            type: "visualReaction",
-            attrs: {
-              assetId: asset.id,
-              revisionId: pack.revisionId,
-              sha256: asset.sha256,
-              altText: asset.altText,
-              frameCount: asset.frameCount,
-            },
-          },
-        ],
-      },
-      plainText: `[Visual reaction: ${asset.altText}]`,
-      messageType: "text",
-      dataClassification: "internal",
-      idempotencyKey: browserUuid(),
-    };
-    try {
-      const response = await fetch(`/api/v1/rooms/${roomId}/messages`, {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify(payload),
-      });
-      if (!response.ok) {
-        const problem = (await response.json().catch(() => null)) as {
-          detail?: string;
-        } | null;
-        throw new Error(problem?.detail ?? "Visual reaction failed to send.");
-      }
-      const result = (await response.json()) as { data: RoomMessageRecord };
-      onDeliveryChange?.(result.data);
-      setReactionPickerOpen(false);
-    } catch (error) {
-      setReactionError(
-        error instanceof Error
-          ? error.message
-          : "Visual reaction failed to send.",
-      );
-    } finally {
-      setReactionSending(false);
-    }
-  }
-
-  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
-    if (
-      event.key !== "Enter" ||
-      !enterToSend ||
-      event.shiftKey ||
-      event.nativeEvent.isComposing ||
-      window.matchMedia("(pointer: coarse)").matches
-    ) {
-      return;
-    }
-    event.preventDefault();
-    void send();
-  }
-
-  function applyLink() {
-    if (!editor) return;
-    const raw = linkUrl.trim();
-    if (!raw) return;
-    const candidate = /^[a-z][a-z0-9+.-]*:/i.test(raw) ? raw : `https://${raw}`;
-    let href: string;
-    try {
-      const parsed = new URL(candidate);
-      if (!["http:", "https:"].includes(parsed.protocol)) return;
-      href = parsed.toString();
-    } catch {
-      return;
-    }
-    if (editor.state.selection.empty) {
-      editor
-        .chain()
-        .focus()
-        .insertContent({
-          type: "text",
-          text: href,
-          marks: [{ type: "link", attrs: { href } }],
-        })
-        .run();
-    } else {
-      editor.chain().focus().extendMarkRange("link").setLink({ href }).run();
-    }
-    setLinkOpen(false);
-    setLinkUrl("");
-  }
-
-  function updateUpload(clientId: string, changes: Partial<AttachmentUpload>) {
-    setUploads((current) =>
-      current.map((upload) =>
-        upload.clientId === clientId ? { ...upload, ...changes } : upload,
-      ),
-    );
-  }
-
-  function uploadFile(file: File, existingClientId?: string) {
-    if (!roomId) return;
-    const clientId = existingClientId ?? browserUuid();
-    if (!existingClientId) {
-      if (uploadsRef.current.length >= 10) return;
-      setUploads((current) => [
-        ...current,
-        {
-          clientId,
-          label: file.name,
-          mimeType: file.type,
-          size: file.size,
-          progress: 0,
-          state: "uploading",
-          file,
-        },
-      ]);
-    } else {
-      updateUpload(clientId, {
-        progress: 0,
-        state: "uploading",
-        error: undefined,
-      });
-    }
-    const form = new FormData();
-    form.set("file", file);
-    form.set("classification", "internal");
-    const request = new XMLHttpRequest();
-    request.open("POST", `/api/v1/rooms/${roomId}/attachments`);
-    request.upload.addEventListener("progress", (event) => {
-      if (event.lengthComputable) {
-        updateUpload(clientId, {
-          progress: Math.round((event.loaded / event.total) * 100),
-        });
-      }
-    });
-    request.addEventListener("load", () => {
-      const response = (() => {
-        try {
-          return JSON.parse(request.responseText) as {
-            data?: {
-              id?: string;
-              label?: string;
-              mimeType?: string;
-              size?: number;
-            };
-            detail?: string;
-          };
-        } catch {
-          return null;
-        }
-      })();
-      if (request.status >= 200 && request.status < 300 && response?.data?.id) {
-        updateUpload(clientId, {
-          id: response.data.id,
-          label: response.data.label ?? file.name,
-          mimeType: response.data.mimeType ?? file.type,
-          size: response.data.size ?? file.size,
-          progress: 100,
-          state: "stored",
-          error: undefined,
-          file: undefined,
-        });
-        return;
-      }
-      updateUpload(clientId, {
-        state: "failed",
-        error: response?.detail ?? `Upload failed (${request.status})`,
-      });
-    });
-    request.addEventListener("error", () => {
-      updateUpload(clientId, {
-        state: "failed",
-        error: "Upload failed. Retry is safe.",
-      });
-    });
-    request.send(form);
-  }
-
-  function handlePaste(event: ClipboardEvent<HTMLDivElement>) {
-    const files = Array.from(event.clipboardData.files);
-    if (files.length === 0) return;
-    event.preventDefault();
-    files.forEach((file) => uploadFile(file));
-  }
-
-  return (
-    <div className="border-t bg-background p-2">
-      <div className="mx-auto max-w-5xl rounded-lg border bg-card shadow-sm focus-within:border-[var(--color-focus)]">
-        <EditorContent
-          editor={editor}
-          className="px-3 py-1.5 text-sm"
-          onKeyDown={handleKeyDown}
-          onPaste={handlePaste}
-        />
-        {uploads.length > 0 && (
-          <div
-            className="space-y-1 border-t px-3 py-2"
-            aria-label="Evidence attachments"
-          >
-            {uploads.map((upload) => (
-              <div
-                key={upload.clientId}
-                className="flex items-center gap-2 text-xs"
-              >
-                <FileUp className="size-3.5 shrink-0" />
-                <span className="min-w-0 flex-1 truncate">{upload.label}</span>
-                {upload.state === "uploading" && (
-                  <>
-                    <progress
-                      className="h-1.5 w-24"
-                      max={100}
-                      value={upload.progress}
-                      aria-label={`Uploading ${upload.label}`}
-                    />
-                    <span>{upload.progress}%</span>
-                  </>
-                )}
-                {upload.state === "stored" && (
-                  <span className="text-[var(--color-success)]">
-                    Stored · pending scan
-                  </span>
-                )}
-                {upload.state === "failed" && (
-                  <>
-                    <span role="alert" className="text-[var(--color-error)]">
-                      {upload.error}
-                    </span>
-                    {upload.file && (
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        onClick={() =>
-                          uploadFile(upload.file!, upload.clientId)
-                        }
-                      >
-                        Retry upload
-                      </Button>
-                    )}
-                  </>
-                )}
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="size-7 min-h-7"
-                  aria-label={`Remove ${upload.label}`}
-                  onClick={() =>
-                    setUploads((current) =>
-                      current.filter(
-                        (candidate) => candidate.clientId !== upload.clientId,
-                      ),
-                    )
-                  }
-                >
-                  <X />
-                </Button>
-              </div>
-            ))}
-          </div>
-        )}
-        <div className="flex flex-wrap items-center justify-between gap-2 border-t px-2 py-1.5">
-          <div className="flex items-center">
-            <Button
-              size="icon"
-              variant="ghost"
-              aria-label="Bold"
-              aria-pressed={editor?.isActive("bold") ?? false}
-              onClick={() => editor?.chain().focus().toggleBold().run()}
-            >
-              <Bold />
-            </Button>
-            <Button
-              size="icon"
-              variant="ghost"
-              aria-label="Italic"
-              aria-pressed={editor?.isActive("italic") ?? false}
-              onClick={() => editor?.chain().focus().toggleItalic().run()}
-            >
-              <Italic />
-            </Button>
-            <Button
-              size="icon"
-              variant="ghost"
-              aria-label="Inline code"
-              aria-pressed={editor?.isActive("code") ?? false}
-              onClick={() => editor?.chain().focus().toggleCode().run()}
-            >
-              <Code2 />
-            </Button>
-            <Button
-              size="icon"
-              variant="ghost"
-              aria-label="Attach evidence"
-              title="Upload governed evidence to this room"
-              onClick={() => fileInputRef.current?.click()}
-            >
-              <FileUp />
-            </Button>
-            <input
-              ref={fileInputRef}
-              className="sr-only"
-              type="file"
-              multiple
-              accept=".json,.pdf,.zip,.txt,.csv,.png,.jpg,.jpeg"
-              aria-label="Choose evidence files"
-              onChange={(event) => {
-                Array.from(event.target.files ?? []).forEach((file) =>
-                  uploadFile(file),
-                );
-                event.target.value = "";
-              }}
-            />
-            <div className="relative">
-              <Button
-                size="icon"
-                variant="ghost"
-                aria-label="Add visual reaction"
-                aria-expanded={reactionPickerOpen}
-                title={
-                  reactionPacks.length > 0
-                    ? "Send an approved visual reaction"
-                    : "No approved visual reaction packs installed"
-                }
-                className={
-                  reactionCatalogLoaded && reactionPacks.length === 0
-                    ? "text-muted-foreground"
-                    : undefined
-                }
-                onClick={() => {
-                  setReactionError("");
-                  setReactionPickerOpen((open) => !open);
-                }}
-              >
-                <SmilePlus />
-              </Button>
-              {reactionPickerOpen && (
-                <div
-                  role="dialog"
-                  aria-label="Visual reactions"
-                  className="absolute bottom-11 left-0 z-30 w-72 rounded-md border bg-popover p-3 shadow-lg"
-                  onKeyDown={(event) => {
-                    if (event.key === "Escape") setReactionPickerOpen(false);
-                  }}
-                >
-                  <div className="flex items-center justify-between gap-2">
-                    <p className="text-xs font-bold">Visual reactions</p>
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      className="size-7 min-h-7"
-                      aria-label="Close visual reactions"
-                      onClick={() => setReactionPickerOpen(false)}
-                    >
-                      <X />
-                    </Button>
-                  </div>
-                  {!reactionCatalogLoaded ? (
-                    <p className="mt-3 text-xs text-muted-foreground">
-                      Loading approved packs…
-                    </p>
-                  ) : reactionPacks.length === 0 ? (
-                    <div className="mt-3 rounded border border-dashed p-3 text-xs">
-                      <p className="font-semibold">
-                        No approved packs installed
-                      </p>
-                      <a
-                        href="/settings/reaction-packs"
-                        className="mt-1 inline-block text-[var(--color-accent)] underline"
-                      >
-                        Open organisation reaction settings
-                      </a>
-                    </div>
-                  ) : (
-                    <div className="mt-2 max-h-72 space-y-3 overflow-y-auto">
-                      {reactionPacks.map((pack) => (
-                        <section
-                          key={pack.id}
-                          aria-label={`${pack.displayName} revision ${pack.revision}`}
-                        >
-                          <p className="text-xs font-semibold">
-                            {pack.displayName}
-                          </p>
-                          <div className="mt-1 grid grid-cols-4 gap-1">
-                            {pack.assets.map((asset) => (
-                              <button
-                                key={asset.id}
-                                type="button"
-                                className="flex min-h-16 items-center justify-center rounded border p-1 hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--color-focus)]"
-                                aria-label={`Send ${asset.altText}`}
-                                disabled={reactionSending}
-                                onClick={() =>
-                                  void sendVisualReaction(pack, asset)
-                                }
-                              >
-                                <VisualReactionAsset
-                                  asset={{
-                                    ...asset,
-                                    revisionId: pack.revisionId,
-                                  }}
-                                  compact
-                                />
-                              </button>
-                            ))}
-                          </div>
-                        </section>
-                      ))}
-                    </div>
-                  )}
-                  {reactionError && (
-                    <p
-                      role="alert"
-                      className="mt-2 text-xs text-[var(--color-error)]"
-                    >
-                      {reactionError}
-                    </p>
-                  )}
-                  <p className="mt-2 text-xs text-muted-foreground">
-                    Decorative only. Reactions never change operational state.
-                  </p>
-                </div>
-              )}
-            </div>
-            <Button
-              size="icon"
-              variant="ghost"
-              aria-label="Mention a person or agent"
-              title="Type @name in the composer"
-              onClick={() => editor?.chain().focus().insertContent("@").run()}
-            >
-              <AtSign />
-            </Button>
-            <Button
-              size="icon"
-              variant="ghost"
-              aria-label="Mention agent"
-              title="Type an agent name after @"
-              onClick={() => editor?.chain().focus().insertContent("@").run()}
-            >
-              <Bot />
-            </Button>
-            <Button
-              size="icon"
-              variant="ghost"
-              aria-label="Add link"
-              aria-expanded={linkOpen}
-              title="Add a safe HTTP or HTTPS link"
-              onClick={() => setLinkOpen((current) => !current)}
-            >
-              <Link2 />
-            </Button>
-            <Button
-              size="sm"
-              variant="ghost"
-              aria-label="Link security reference"
-              title="Insert an authorised Muster reference"
-              onClick={() =>
-                editor?.chain().focus().insertContent("/reference ").run()
-              }
-            >
-              Reference
-            </Button>
-            <Button
-              size="icon"
-              variant="ghost"
-              aria-label="Record decision"
-              title="Insert the decision slash command"
-              onClick={() =>
-                editor?.chain().focus().insertContent("/decision ").run()
-              }
-            >
-              <ShieldCheck />
-            </Button>
-            <Button
-              size="icon"
-              variant="ghost"
-              aria-label="Start workflow"
-              title="Insert the workflow slash command"
-              onClick={() =>
-                editor?.chain().focus().insertContent("/workflow ").run()
-              }
-            >
-              <ListChecks />
-            </Button>
-          </div>
-          {linkOpen && (
-            <div className="flex w-full items-center gap-2 border-t px-1 pt-2">
-              <label className="sr-only" htmlFor="room-composer-link">
-                Link URL
-              </label>
-              <input
-                id="room-composer-link"
-                className="h-9 min-w-48 flex-1 rounded border bg-background px-2 text-xs"
-                type="url"
-                inputMode="url"
-                placeholder="https://example.test/reference"
-                value={linkUrl}
-                onChange={(event) => setLinkUrl(event.target.value)}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter") {
-                    event.preventDefault();
-                    applyLink();
-                  }
-                }}
-              />
-              <Button size="sm" variant="outline" onClick={applyLink}>
-                Apply link
-              </Button>
-              {editor?.isActive("link") && (
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  onClick={() => editor.chain().focus().unsetLink().run()}
-                >
-                  Remove link
-                </Button>
-              )}
-            </div>
-          )}
-          <div className="flex items-center gap-2">
-            <label className="hidden items-center gap-1.5 text-xs text-muted-foreground tablet:flex">
-              <input
-                type="checkbox"
-                className="size-6 shrink-0"
-                checked={enterToSend}
-                onChange={(event) => {
-                  const enabled = event.target.checked;
-                  setEnterToSend(enabled);
-                  localStorage.setItem(enterToSendKey, String(enabled));
-                }}
-              />
-              Enter sends
-            </label>
-            <span className="sr-only" aria-live="polite">
-              {state === "sending"
-                ? "Sending message"
-                : state === "error"
-                  ? "Message failed. Draft preserved."
-                  : "Composer ready"}
-            </span>
-            {state === "error" && (
-              <>
-                <span
-                  role="alert"
-                  className="text-xs text-[var(--color-error)]"
-                >
-                  Message failed. Draft preserved.
-                </span>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => void send(true)}
-                >
-                  <RefreshCw /> Retry
-                </Button>
-              </>
-            )}
-            <Button
-              onClick={() => void send()}
-              autoComplete="off"
-              disabled={
-                state === "sending" ||
-                !editorReady ||
-                !editor ||
-                uploads.some((upload) => upload.state === "uploading") ||
-                (editor.isEmpty &&
-                  !uploads.some((upload) => upload.state === "stored"))
-              }
-              state={
-                state === "sending"
-                  ? "loading"
-                  : state === "error"
-                    ? "error"
-                    : "default"
-              }
-            >
-              {state === "sending" ? "Sending…" : "Send"} <Send />
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/components/room-view.tsx b/apps/web/components/room-view.tsx
deleted file mode 100644
index 6e5acb3..0000000
--- a/apps/web/components/room-view.tsx
+++ /dev/null
@@ -1,2895 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import {
-  Fragment,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
-import {
-  AlertTriangle,
-  Bookmark,
-  Bot,
-  ChevronDown,
-  Check,
-  CircleCheck,
-  Clock3,
-  Copy,
-  Edit3,
-  FileText,
-  Hash,
-  MessageSquare,
-  MoreHorizontal,
-  Pin,
-  Search,
-  SmilePlus,
-  ShieldCheck,
-  Trash2,
-  Users,
-  WifiOff,
-  X,
-} from "lucide-react";
-import { browserUuid } from "@/lib/browser-uuid";
-import { AppShell } from "@/components/app-shell";
-import {
-  RoomComposer,
-  type RoomMessageRecord,
-} from "@/components/room-composer";
-import { RoomAgentActivity } from "@/components/room-agent-activity";
-import { RoomAgentHandoffs } from "@/components/room-agent-handoffs";
-import {
-  VisualReactionAsset,
-  type VisualReactionAssetData,
-} from "@/components/visual-reaction-asset";
-import { SeverityBadge } from "@/components/severity";
-import { Avatar } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  activeInvestigation,
-  demoAgents,
-  demoDirectRooms,
-  demoMode,
-  demoPeople,
-  demoRooms,
-  roomIdBySlug,
-  roomTimeline,
-} from "@/lib/demo-data";
-import { cn } from "@/lib/utils";
-
-type TimelineItem = (typeof roomTimeline)[number];
-type ThreadParent = TimelineItem | RoomMessageRecord;
-
-const persistedTimelineIds = new Set([
-  "019e7a10-0000-7000-8000-000000000701",
-  "019e7a10-0000-7000-8000-000000000705",
-]);
-const seededThreadMessageIds = new Set([
-  "019e7a10-0000-7000-8000-000000000702",
-  "019e7a10-0000-7000-8000-000000000703",
-  "019e7a10-0000-7000-8000-000000000704",
-]);
-const actorIdentity: Record<
-  string,
-  { name: string; initials: string; agent: boolean }
-> = Object.fromEntries([
-  ...demoPeople.map((actor) => [
-    actor.id,
-    { name: actor.name, initials: actor.initials, agent: false },
-  ]),
-  ...demoAgents.map((actor) => [
-    actor.id,
-    { name: actor.name, initials: actor.initials, agent: true },
-  ]),
-]);
-
-function MessageActions({
-  canPersist,
-  onThread,
-  onReact,
-}: {
-  canPersist: boolean;
-  onThread: () => void;
-  onReact: () => void;
-}) {
-  return (
-    <div className="message-actions absolute right-3 top-1 hidden items-center rounded border bg-popover p-0.5 shadow-sm group-hover:flex group-focus-within:flex">
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-7 min-h-7"
-        aria-label="React"
-        disabled={!canPersist}
-        onClick={onReact}
-      >
-        <SmilePlus />
-      </Button>
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-7 min-h-7"
-        aria-label="Start thread"
-        disabled={!canPersist}
-        onClick={onThread}
-      >
-        <MessageSquare />
-      </Button>
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-7 min-h-7"
-        aria-label="Pin (coming soon)"
-        disabled
-      >
-        <Pin />
-      </Button>
-    </div>
-  );
-}
-
-function TimelineEntry({
-  item,
-  onThread,
-  onReact,
-  reactionCounts,
-}: {
-  item: TimelineItem;
-  onThread: (item: TimelineItem) => void;
-  onReact: (item: TimelineItem, emoji: "eyes" | "check" | "thumbsup") => void;
-  reactionCounts: Record<string, number>;
-}) {
-  const canPersist = persistedTimelineIds.has(item.id);
-  const defaultEmoji =
-    item.type === "human" && item.reactions?.[0]?.emoji === "check"
-      ? "check"
-      : "eyes";
-  if (item.type === "system") {
-    return (
-      <div className="flex items-center gap-3 px-4 py-2 text-xs text-muted-foreground">
-        <span className="h-px flex-1 bg-border" />
-        <CircleCheck className="size-3.5" />
-        <span>
-          <strong className="text-foreground">{item.title}</strong> ·{" "}
-          {item.body} · {item.time}
-        </span>
-        <span className="h-px flex-1 bg-border" />
-      </div>
-    );
-  }
-
-  if (item.type === "human") {
-    return (
-      <article className="group relative flex gap-3 px-4 py-3 hover:bg-muted/50">
-        <Avatar initials={item.initials} />
-        <div className="min-w-0 flex-1">
-          <div className="flex items-baseline gap-2">
-            <p className="text-sm font-bold">{item.author}</p>
-            <span className="text-xs text-muted-foreground">
-              {item.role} · {item.time}
-            </span>
-          </div>
-          <p className="message-prose mt-1 text-sm leading-5 text-[var(--color-ink-2)]">
-            {item.body}
-          </p>
-          <div className="mt-2 flex items-center gap-2">
-            {item.reactions?.map((reaction) => (
-              <button
-                key={reaction.label}
-                onClick={() => onReact(item, reaction.emoji)}
-                className="rounded border bg-muted px-2 py-0.5 text-xs"
-                aria-label={`${reaction.label}, ${reactionCounts[`${item.id}:${reaction.emoji}`] ?? reaction.count}`}
-              >
-                {reaction.emoji === "eyes" ? "Reviewing" : "Agreed"} ·{" "}
-                {reactionCounts[`${item.id}:${reaction.emoji}`] ??
-                  reaction.count}
-              </button>
-            ))}
-            {item.replies > 0 && (
-              <button
-                onClick={() => onThread(item)}
-                className="text-xs font-semibold text-[var(--color-accent)]"
-              >
-                {item.replies} replies
-              </button>
-            )}
-          </div>
-        </div>
-        <MessageActions
-          canPersist={canPersist}
-          onThread={() => onThread(item)}
-          onReact={() => onReact(item, defaultEmoji)}
-        />
-      </article>
-    );
-  }
-
-  if (item.type === "agent") {
-    return (
-      <article className="group relative mx-4 my-2 border bg-card">
-        <div className="flex gap-3 p-3">
-          <Avatar initials={item.initials} agent />
-          <div className="min-w-0 flex-1">
-            <div className="flex flex-wrap items-center gap-2">
-              <p className="text-sm font-bold">{item.author}</p>
-              <Badge className="agent-surface border border-[var(--color-agent)]">
-                Agent
-              </Badge>
-              <Badge className="success-surface text-[var(--color-success)]">
-                <Check className="size-3" />
-                {item.status}
-              </Badge>
-              <span className="text-xs text-muted-foreground">{item.time}</span>
-            </div>
-            <p className="mt-1 text-xs text-muted-foreground">{item.role}</p>
-            <p className="mt-2 text-sm leading-5">{item.body}</p>
-            <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
-              <span>
-                Confidence{" "}
-                <strong className="text-foreground">{item.confidence}%</strong>
-              </span>
-              <span>
-                Evidence{" "}
-                <strong className="text-foreground">{item.evidence}</strong>
-              </span>
-              <span>
-                Human review{" "}
-                <strong className="text-[var(--color-success)]">
-                  Complete
-                </strong>
-              </span>
-            </div>
-            <div className="mt-2 flex flex-wrap gap-1">
-              {item.tools.map((tool) => (
-                <code
-                  key={tool}
-                  className="rounded border bg-background/50 px-1.5 py-0.5 text-xs"
-                >
-                  {tool}
-                </code>
-              ))}
-            </div>
-          </div>
-        </div>
-        <MessageActions
-          canPersist={canPersist}
-          onThread={() => onThread(item)}
-          onReact={() => onReact(item, defaultEmoji)}
-        />
-      </article>
-    );
-  }
-
-  const isApproval = item.type === "approval";
-  return (
-    <article
-      className={cn(
-        "group relative mx-4 my-2 border bg-card",
-        isApproval && "border-[var(--color-warning)] approval-surface",
-      )}
-    >
-      <div className="flex gap-3 p-3">
-        <div
-          className={cn(
-            "grid size-9 shrink-0 place-items-center rounded-md border",
-            item.type === "finding"
-              ? "severity-critical"
-              : isApproval
-                ? "text-[var(--color-warning)]"
-                : "active-indicator",
-          )}
-        >
-          {isApproval ? (
-            <ShieldCheck className="size-4" />
-          ) : item.type === "case" ? (
-            <Hash className="size-4" />
-          ) : (
-            <CircleCheck className="size-4" />
-          )}
-        </div>
-        <div className="min-w-0 flex-1">
-          <div className="flex flex-wrap items-center gap-2">
-            {"severity" in item && item.severity && (
-              <SeverityBadge severity={item.severity} />
-            )}
-            <p className="text-sm font-bold">{item.title}</p>
-            <span className="text-xs text-muted-foreground">{item.time}</span>
-          </div>
-          <p className="mt-2 text-sm leading-5 text-[var(--color-ink-2)]">
-            {item.body}
-          </p>
-          {"meta" in item && (
-            <p className="mono mt-2 text-xs text-muted-foreground">
-              {item.meta}
-            </p>
-          )}
-          {isApproval && (
-            <div className="mt-3 flex flex-wrap gap-2">
-              <Button
-                size="sm"
-                disabled
-                title="Approval actions are not available yet"
-              >
-                <Check />
-                Approve isolation
-              </Button>
-              <Button
-                size="sm"
-                variant="outline"
-                disabled
-                title="Approval actions are not available yet"
-              >
-                Reject
-              </Button>
-              <Button
-                size="sm"
-                variant="ghost"
-                disabled
-                title="Evidence review is not available yet"
-              >
-                Review evidence
-              </Button>
-            </div>
-          )}
-        </div>
-      </div>
-      <MessageActions
-        canPersist={canPersist}
-        onThread={() => onThread(item)}
-        onReact={() => onReact(item, defaultEmoji)}
-      />
-    </article>
-  );
-}
-
-const reactionLabels: Record<string, string> = {
-  eyes: "Reviewing",
-  check: "Agreed",
-  thumbsup: "Thumbs up",
-  heart: "Support",
-  tada: "Celebrate",
-  warning: "Needs attention",
-};
-
-function MessageText({ text }: { text: string }) {
-  const parts = text.split(/([@#][a-z0-9._-]+)/gi);
-  return (
-    <>
-      {parts.map((part, index) =>
-        part.startsWith("@") || part.startsWith("#") ? (
-          <span
-            key={`${part}-${index}`}
-            className="rounded bg-[var(--color-accent-soft)] px-0.5 font-semibold text-[var(--color-accent)]"
-          >
-            {part}
-          </span>
-        ) : (
-          part
-        ),
-      )}
-    </>
-  );
-}
-
-function safeMessageHref(value: unknown) {
-  if (typeof value !== "string") return null;
-  try {
-    const url = new URL(value);
-    return ["http:", "https:"].includes(url.protocol) ? url.toString() : null;
-  } catch {
-    return null;
-  }
-}
-
-function MessageDocument({ document }: { document: Record<string, unknown> }) {
-  function renderNode(value: unknown, key: string): ReactNode {
-    if (!value || typeof value !== "object" || Array.isArray(value))
-      return null;
-    const node = value as Record<string, unknown>;
-    const content = Array.isArray(node.content)
-      ? node.content.map((child, index) => renderNode(child, `${key}-${index}`))
-      : null;
-
-    if (node.type === "text" && typeof node.text === "string") {
-      let rendered: ReactNode = <MessageText text={node.text} />;
-      if (Array.isArray(node.marks)) {
-        node.marks.forEach((mark, index) => {
-          if (!mark || typeof mark !== "object" || Array.isArray(mark)) return;
-          const typedMark = mark as Record<string, unknown>;
-          const markKey = `${key}-mark-${index}`;
-          if (typedMark.type === "bold")
-            rendered = <strong key={markKey}>{rendered}</strong>;
-          if (typedMark.type === "italic")
-            rendered = <em key={markKey}>{rendered}</em>;
-          if (typedMark.type === "code")
-            rendered = <code key={markKey}>{rendered}</code>;
-          if (
-            typedMark.type === "link" &&
-            typedMark.attrs &&
-            typeof typedMark.attrs === "object" &&
-            !Array.isArray(typedMark.attrs)
-          ) {
-            const href = safeMessageHref(
-              (typedMark.attrs as Record<string, unknown>).href,
-            );
-            if (href) {
-              rendered = (
-                <a
-                  key={markKey}
-                  href={href}
-                  target="_blank"
-                  rel="noopener noreferrer nofollow"
-                  className="text-[var(--color-accent)] underline"
-                >
-                  {rendered}
-                </a>
-              );
-            }
-          }
-        });
-      }
-      return <Fragment key={key}>{rendered}</Fragment>;
-    }
-
-    switch (node.type) {
-      case "doc":
-        return <Fragment key={key}>{content}</Fragment>;
-      case "paragraph":
-        return <p key={key}>{content}</p>;
-      case "heading": {
-        const level =
-          node.attrs &&
-          typeof node.attrs === "object" &&
-          !Array.isArray(node.attrs) &&
-          (node.attrs as Record<string, unknown>).level === 3
-            ? "h3"
-            : "h2";
-        return level === "h3" ? (
-          <h3 key={key}>{content}</h3>
-        ) : (
-          <h2 key={key}>{content}</h2>
-        );
-      }
-      case "bulletList":
-        return <ul key={key}>{content}</ul>;
-      case "orderedList":
-        return <ol key={key}>{content}</ol>;
-      case "listItem":
-        return <li key={key}>{content}</li>;
-      case "blockquote":
-        return <blockquote key={key}>{content}</blockquote>;
-      case "codeBlock":
-        return (
-          <pre key={key}>
-            <code>{content}</code>
-          </pre>
-        );
-      case "hardBreak":
-        return <br key={key} />;
-      default:
-        return null;
-    }
-  }
-
-  return <>{renderNode(document, "document")}</>;
-}
-
-function messageAttachments(document: Record<string, unknown> | undefined) {
-  const attachments: Array<{ id: string; label: string }> = [];
-  function visit(value: unknown) {
-    if (!value || typeof value !== "object" || Array.isArray(value)) return;
-    const node = value as Record<string, unknown>;
-    if (
-      node.type === "attachment" &&
-      node.attrs &&
-      typeof node.attrs === "object" &&
-      !Array.isArray(node.attrs)
-    ) {
-      const attrs = node.attrs as Record<string, unknown>;
-      if (typeof attrs.id === "string" && typeof attrs.label === "string") {
-        attachments.push({ id: attrs.id, label: attrs.label });
-      }
-    }
-    if (Array.isArray(node.content)) node.content.forEach(visit);
-  }
-  visit(document);
-  return attachments;
-}
-
-function messageVisualReactions(document: Record<string, unknown> | undefined) {
-  const reactions: VisualReactionAssetData[] = [];
-  function visit(value: unknown) {
-    if (!value || typeof value !== "object" || Array.isArray(value)) return;
-    const node = value as Record<string, unknown>;
-    if (
-      node.type === "visualReaction" &&
-      node.attrs &&
-      typeof node.attrs === "object" &&
-      !Array.isArray(node.attrs)
-    ) {
-      const attrs = node.attrs as Record<string, unknown>;
-      if (
-        typeof attrs.assetId === "string" &&
-        typeof attrs.revisionId === "string" &&
-        typeof attrs.sha256 === "string" &&
-        typeof attrs.altText === "string" &&
-        typeof attrs.frameCount === "number"
-      ) {
-        reactions.push({
-          id: attrs.assetId,
-          revisionId: attrs.revisionId,
-          sha256: attrs.sha256,
-          altText: attrs.altText,
-          frameCount: attrs.frameCount,
-        });
-      }
-    }
-    if (Array.isArray(node.content)) node.content.forEach(visit);
-  }
-  visit(document);
-  return reactions;
-}
-
-const structuredMessageLabels: Record<string, string> = {
-  system: "System activity",
-  alert: "Security alert",
-  finding: "Investigation finding",
-  decision: "Recorded decision",
-  approval: "Approval record",
-  workflow: "Workflow activity",
-  "agent-status": "Agent status",
-  "query-result": "Query result",
-  evidence: "Evidence record",
-  "case-event": "Case activity",
-  "response-action": "Response action",
-};
-
-function StructuredMessageCard({
-  message,
-  type,
-}: {
-  message: RoomMessageRecord;
-  type: string;
-}) {
-  const references = [
-    message.relatedAlertId && ["Alert", message.relatedAlertId],
-    message.relatedInvestigationId && [
-      "Investigation",
-      message.relatedInvestigationId,
-    ],
-    message.relatedCaseId && ["Case", message.relatedCaseId],
-    message.relatedAgentRunId && ["Agent run", message.relatedAgentRunId],
-    message.relatedWorkflowRunId && [
-      "Workflow run",
-      message.relatedWorkflowRunId,
-    ],
-  ].filter((entry): entry is string[] => Boolean(entry));
-
-  return (
-    <div className="mt-2 border bg-[var(--color-paper-2)] p-3">
-      <div className="flex items-center gap-2">
-        {type === "alert" || type === "response-action" ? (
-          <AlertTriangle className="size-4 text-[var(--color-high)]" />
-        ) : (
-          <ShieldCheck className="size-4 text-[var(--color-accent)]" />
-        )}
-        <strong className="text-xs uppercase tracking-wide">
-          {structuredMessageLabels[type] ?? type.replaceAll("-", " ")}
-        </strong>
-      </div>
-      <p className="mt-2 whitespace-pre-wrap text-sm leading-5">
-        <MessageText text={message.plainText} />
-      </p>
-      <details className="mt-2 text-xs">
-        <summary className="cursor-pointer font-semibold text-[var(--color-accent)]">
-          Record details
-        </summary>
-        <dl className="mt-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 border-t pt-2">
-          <dt className="text-muted-foreground">Type</dt>
-          <dd>{structuredMessageLabels[type] ?? type}</dd>
-          <dt className="text-muted-foreground">Classification</dt>
-          <dd>{message.dataClassification ?? "internal"}</dd>
-          {references.map(([label, value]) => (
-            <Fragment key={`${label}-${value}`}>
-              <dt className="text-muted-foreground">{label}</dt>
-              <dd className="mono break-all">{value}</dd>
-            </Fragment>
-          ))}
-        </dl>
-      </details>
-    </div>
-  );
-}
-
-function DynamicMessageEntry({
-  message,
-  onChange,
-  onThread,
-}: {
-  message: RoomMessageRecord;
-  onChange: (message: RoomMessageRecord) => void;
-  onThread: (message: RoomMessageRecord) => void;
-}) {
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [reactionPickerOpen, setReactionPickerOpen] = useState(false);
-  const [editing, setEditing] = useState(false);
-  const [editText, setEditText] = useState(message.plainText);
-  const [actionError, setActionError] = useState<string | null>(null);
-  const isAgent = message.authorType === "agent";
-  const structured =
-    message.messageType && message.messageType !== "text"
-      ? message.messageType
-      : null;
-  const attachments = messageAttachments(message.document);
-  const visualReactions = messageVisualReactions(message.document);
-  const displayText = attachments
-    .reduce(
-      (text, attachment) =>
-        text.replace(
-          `${text.includes("\n") ? "\n" : ""}Evidence attachment: ${attachment.label}`,
-          "",
-        ),
-      message.plainText,
-    )
-    .replace(/^\[Visual reaction: .+\]$/, "")
-    .trim();
-  const authorName =
-    message.authorName ?? (demoMode ? "Jordan Blake" : "Muster Administrator");
-  const initials = authorName
-    .split(/\s+/)
-    .slice(0, 2)
-    .map((part) => part[0] ?? "")
-    .join("")
-    .toUpperCase();
-
-  async function react(emoji: keyof typeof reactionLabels) {
-    setActionError(null);
-    const response = await fetch(`/api/v1/messages/${message.id}/reactions`, {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({ emoji, idempotencyKey: browserUuid() }),
-    });
-    if (!response.ok) {
-      setActionError("Reaction failed");
-      return;
-    }
-    const payload = (await response.json()) as {
-      data: { active: boolean; count: number };
-    };
-    const current = message.reactions ?? [];
-    onChange({
-      ...message,
-      reactions: [
-        ...current.filter((reaction) => reaction.emoji !== emoji),
-        ...(payload.data.count > 0
-          ? [
-              {
-                emoji,
-                count: payload.data.count,
-                reactedByMe: payload.data.active,
-              },
-            ]
-          : []),
-      ],
-    });
-    setReactionPickerOpen(false);
-  }
-
-  async function setAction(
-    action: "save" | "pin" | "follow_thread",
-    active: boolean,
-  ) {
-    setActionError(null);
-    setMenuOpen(false);
-    const response = await fetch(`/api/v1/messages/${message.id}/actions`, {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({
-        action,
-        active,
-        idempotencyKey: browserUuid(),
-      }),
-    });
-    if (!response.ok) {
-      setActionError(`${action.replaceAll("_", " ")} failed`);
-      return;
-    }
-    onChange({
-      ...message,
-      ...(action === "save" ? { saved: active } : {}),
-      ...(action === "pin" ? { pinned: active } : {}),
-      ...(action === "follow_thread" ? { following: active } : {}),
-    });
-  }
-
-  async function saveEdit() {
-    const plainText = editText.trim();
-    if (!plainText) return;
-    setActionError(null);
-    const response = await fetch(`/api/v1/messages/${message.id}`, {
-      method: "PATCH",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({
-        plainText,
-        document: {
-          type: "doc",
-          content: [
-            {
-              type: "paragraph",
-              content: [{ type: "text", text: plainText }],
-            },
-          ],
-        },
-        idempotencyKey: browserUuid(),
-      }),
-    });
-    if (!response.ok) {
-      setActionError("Edit failed");
-      return;
-    }
-    const payload = (await response.json()) as {
-      data: RoomMessageRecord;
-    };
-    onChange({ ...message, ...payload.data });
-    setEditing(false);
-  }
-
-  async function deleteMessage() {
-    if (
-      !window.confirm("Delete this message? Its revision history is retained.")
-    ) {
-      return;
-    }
-    setActionError(null);
-    const response = await fetch(`/api/v1/messages/${message.id}`, {
-      method: "DELETE",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({ idempotencyKey: browserUuid() }),
-    });
-    if (!response.ok) {
-      setActionError("Delete failed");
-      return;
-    }
-    const payload = (await response.json()) as {
-      data: RoomMessageRecord;
-    };
-    onChange({ ...message, ...payload.data });
-    setMenuOpen(false);
-  }
-
-  async function copyLink() {
-    const url = new URL(window.location.href);
-    url.searchParams.set("message", message.id);
-    await navigator.clipboard.writeText(url.toString());
-    setMenuOpen(false);
-  }
-
-  return (
-    <article
-      id={`message-${message.id}`}
-      className={cn(
-        "group relative mx-1 flex gap-3 px-3 py-3 hover:bg-muted/50",
-        !menuOpen &&
-          !reactionPickerOpen &&
-          !editing &&
-          "[contain-intrinsic-size:0_72px] [content-visibility:auto]",
-        structured && "my-2 border bg-card",
-        message.deliveryState === "failed" &&
-          "ring-1 ring-inset ring-[var(--color-error)]",
-        message.unread && "bg-[var(--color-accent-soft)]/40",
-      )}
-      data-dynamic-message="true"
-      data-delivery-state={message.deliveryState ?? "delivered"}
-    >
-      <Avatar initials={initials || "MA"} agent={isAgent} />
-      <div className="min-w-0 flex-1">
-        <div className="flex flex-wrap items-baseline gap-2">
-          <p className="text-sm font-bold">{authorName}</p>
-          {isAgent && <Badge className="agent-surface">Agent</Badge>}
-          {structured && (
-            <Badge className="uppercase">
-              {structured.replaceAll("-", " ")}
-            </Badge>
-          )}
-          <span className="text-xs text-muted-foreground">
-            {new Date(message.createdAt).toLocaleTimeString("en-AU", {
-              hour: "2-digit",
-              minute: "2-digit",
-              hour12: false,
-            })}
-          </span>
-          {message.editedAt && (
-            <span className="text-xs text-muted-foreground">(edited)</span>
-          )}
-          {message.pinned && (
-            <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
-              <Pin className="size-3" /> Pinned
-            </span>
-          )}
-          {message.deliveryState === "pending" && (
-            <span className="text-xs text-muted-foreground">Sending…</span>
-          )}
-          {message.deliveryState === "failed" && (
-            <span role="alert" className="text-xs text-[var(--color-error)]">
-              Failed · use Retry in the composer
-            </span>
-          )}
-        </div>
-        {editing ? (
-          <div className="mt-2">
-            <textarea
-              aria-label="Edit message"
-              className="min-h-20 w-full rounded border bg-background p-2 text-sm"
-              value={editText}
-              onChange={(event) => setEditText(event.target.value)}
-            />
-            <div className="mt-2 flex gap-2">
-              <Button size="sm" onClick={() => void saveEdit()}>
-                Save changes
-              </Button>
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={() => setEditing(false)}
-              >
-                Cancel
-              </Button>
-            </div>
-          </div>
-        ) : structured ? (
-          <StructuredMessageCard message={message} type={structured} />
-        ) : displayText ? (
-          <div
-            className={cn(
-              "message-prose mt-1 whitespace-pre-wrap text-sm leading-5 text-[var(--color-ink-2)]",
-              message.deletedAt && "italic text-muted-foreground",
-            )}
-          >
-            {message.document ? (
-              <MessageDocument document={message.document} />
-            ) : (
-              <p>
-                <MessageText text={displayText} />
-              </p>
-            )}
-          </div>
-        ) : null}
-        {attachments.length > 0 && (
-          <div
-            className="mt-2 space-y-1"
-            aria-label="Governed evidence attachments"
-          >
-            {attachments.map((attachment) => (
-              <div
-                key={attachment.id}
-                className="flex items-center gap-2 rounded border bg-muted px-2 py-1.5 text-xs"
-              >
-                <FileText className="size-3.5 text-[var(--color-accent)]" />
-                <span className="min-w-0 flex-1 truncate">
-                  {attachment.label}
-                </span>
-                <span className="text-muted-foreground">
-                  Stored evidence · pending scan
-                </span>
-              </div>
-            ))}
-          </div>
-        )}
-        {visualReactions.length > 0 && !message.deletedAt && (
-          <div
-            className="mt-2 flex flex-wrap gap-2"
-            aria-label="Decorative visual reaction"
-          >
-            {visualReactions.map((reaction) => (
-              <VisualReactionAsset key={reaction.id} asset={reaction} />
-            ))}
-            <span className="sr-only">
-              Decorative only. This reaction does not change operational state.
-            </span>
-          </div>
-        )}
-        <div className="mt-2 flex flex-wrap items-center gap-2">
-          {(message.reactions ?? []).map((reaction) => (
-            <button
-              key={reaction.emoji}
-              className={cn(
-                "rounded border bg-muted px-2 py-0.5 text-xs",
-                reaction.reactedByMe &&
-                  "border-[var(--color-accent)] bg-[var(--color-accent-soft)]",
-              )}
-              aria-label={`${reactionLabels[reaction.emoji] ?? reaction.emoji}, ${reaction.count}`}
-              aria-pressed={reaction.reactedByMe}
-              onClick={() =>
-                void react(reaction.emoji as keyof typeof reactionLabels)
-              }
-            >
-              {reactionLabels[reaction.emoji] ?? reaction.emoji} ·{" "}
-              {reaction.count}
-            </button>
-          ))}
-          {(message.replyCount ?? 0) > 0 && (
-            <button
-              className="text-xs font-semibold text-[var(--color-accent)]"
-              onClick={() => onThread(message)}
-            >
-              {message.replyCount}{" "}
-              {message.replyCount === 1 ? "reply" : "replies"}
-            </button>
-          )}
-          {message.following && (
-            <span className="text-xs text-muted-foreground">
-              Following thread
-            </span>
-          )}
-        </div>
-        {actionError && (
-          <p role="alert" className="mt-2 text-xs text-[var(--color-error)]">
-            {actionError}
-          </p>
-        )}
-      </div>
-      {!message.id.startsWith("client:") && !message.deletedAt && (
-        <div className="absolute right-3 top-1 flex items-center rounded border bg-popover p-0.5 opacity-0 shadow-sm group-hover:opacity-100 group-focus-within:opacity-100">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-7 min-h-7"
-            aria-label="Add reaction"
-            aria-expanded={reactionPickerOpen}
-            onClick={() => setReactionPickerOpen((open) => !open)}
-          >
-            <SmilePlus />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-7 min-h-7"
-            aria-label="Open thread"
-            onClick={() => onThread(message)}
-          >
-            <MessageSquare />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-7 min-h-7"
-            aria-label="More message actions"
-            aria-expanded={menuOpen}
-            onClick={() => setMenuOpen((open) => !open)}
-          >
-            <MoreHorizontal />
-          </Button>
-          {reactionPickerOpen && (
-            <div
-              role="menu"
-              aria-label="Reactions"
-              className="absolute right-0 top-9 z-20 flex rounded border bg-popover p-1 shadow-lg"
-            >
-              {Object.entries(reactionLabels).map(([emoji, label]) => (
-                <button
-                  key={emoji}
-                  role="menuitem"
-                  className="rounded px-2 py-1 text-xs hover:bg-muted focus:bg-muted"
-                  onClick={() =>
-                    void react(emoji as keyof typeof reactionLabels)
-                  }
-                >
-                  {label}
-                </button>
-              ))}
-            </div>
-          )}
-          {menuOpen && (
-            <div
-              role="menu"
-              aria-label="Message actions"
-              className="absolute right-0 top-9 z-20 min-w-44 rounded border bg-popover p-1 text-xs shadow-lg"
-            >
-              <button
-                role="menuitem"
-                className="flex w-full items-center gap-2 rounded px-2 py-1.5 hover:bg-muted"
-                onClick={() => void setAction("save", !message.saved)}
-              >
-                <Bookmark className="size-3.5" />
-                {message.saved ? "Remove from saved" : "Save message"}
-              </button>
-              {message.canPin && (
-                <button
-                  role="menuitem"
-                  className="flex w-full items-center gap-2 rounded px-2 py-1.5 hover:bg-muted"
-                  onClick={() => void setAction("pin", !message.pinned)}
-                >
-                  <Pin className="size-3.5" />
-                  {message.pinned ? "Unpin" : "Pin to room"}
-                </button>
-              )}
-              <button
-                role="menuitem"
-                className="flex w-full items-center gap-2 rounded px-2 py-1.5 hover:bg-muted"
-                onClick={() =>
-                  void setAction("follow_thread", !message.following)
-                }
-              >
-                <MessageSquare className="size-3.5" />
-                {message.following ? "Unfollow thread" : "Follow thread"}
-              </button>
-              <button
-                role="menuitem"
-                className="flex w-full items-center gap-2 rounded px-2 py-1.5 hover:bg-muted"
-                onClick={() => void copyLink()}
-              >
-                <Copy className="size-3.5" /> Copy link
-              </button>
-              {message.canEdit && visualReactions.length === 0 && (
-                <>
-                  <button
-                    role="menuitem"
-                    className="flex w-full items-center gap-2 rounded px-2 py-1.5 hover:bg-muted"
-                    onClick={() => {
-                      setEditing(true);
-                      setMenuOpen(false);
-                    }}
-                  >
-                    <Edit3 className="size-3.5" /> Edit
-                  </button>
-                  <button
-                    role="menuitem"
-                    className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-[var(--color-error)] hover:bg-muted"
-                    onClick={() => void deleteMessage()}
-                  >
-                    <Trash2 className="size-3.5" /> Delete
-                  </button>
-                </>
-              )}
-            </div>
-          )}
-        </div>
-      )}
-    </article>
-  );
-}
-
-type GovernedRoomDetails = {
-  room: {
-    id: string;
-    displayName: string;
-    description: string;
-    topic: string;
-    visibility: string;
-    roomType: string;
-    membershipRole: string | null;
-  };
-  members: Array<{
-    actorId: string;
-    displayName: string;
-    actorType: string;
-    status: string;
-    role: string;
-    joinedAt: string;
-    accessExpiresAt: string | null;
-  }>;
-  agents: GovernedRoomDetails["members"];
-  invitations: Array<{
-    id: string;
-    invitedActorId: string;
-    membershipRole: string;
-    status: string;
-    accessExpiresAt: string | null;
-  }>;
-  pinned: Array<{
-    id: string;
-    plainText: string;
-    createdAt: string;
-  }>;
-  files: Array<{
-    id: string;
-    fileName: string;
-    mimeType: string;
-    size: number;
-    classification: string;
-    scanState: string;
-    uploadedAt: string;
-  }>;
-  workflows: Array<{
-    id: string;
-    status: string;
-    startedAt: string | null;
-    completedAt: string | null;
-  }>;
-  integrations: Array<{
-    id: string;
-    product: string;
-    displayName: string;
-    status: string;
-  }>;
-  audit: Array<{
-    id: string;
-    action: string;
-    actorId: string;
-    createdAt: string;
-  }>;
-};
-
-const detailTabs = [
-  "About",
-  "Members",
-  "Agents",
-  "Pinned",
-  "Files",
-  "Workflows",
-  "Integrations",
-  "Audit",
-] as const;
-
-function GovernedDetailsPanel({ roomId }: { roomId: string }) {
-  const [details, setDetails] = useState<GovernedRoomDetails | null>(null);
-  const [tab, setTab] = useState<(typeof detailTabs)[number]>("About");
-  const [error, setError] = useState("");
-  const [directory, setDirectory] = useState<
-    Array<{
-      id: string;
-      displayName: string;
-      actorType: string;
-      status: string;
-    }>
-  >([]);
-  const [inviteActorId, setInviteActorId] = useState("");
-  const [inviteRole, setInviteRole] = useState<
-    "member" | "moderator" | "guest" | "agent_member"
-  >("member");
-  const [inviteExpiry, setInviteExpiry] = useState("");
-
-  const refresh = useCallback(async () => {
-    const response = await fetch(`/api/v1/rooms/${roomId}/details`);
-    if (!response.ok) {
-      setError("Room details unavailable");
-      return;
-    }
-    const payload = (await response.json()) as { data: GovernedRoomDetails };
-    setDetails(payload.data);
-    setError("");
-  }, [roomId]);
-
-  useEffect(() => {
-    void refresh();
-  }, [refresh]);
-
-  useEffect(() => {
-    if (
-      details?.room.membershipRole !== "owner" &&
-      details?.room.membershipRole !== "moderator"
-    ) {
-      return;
-    }
-    void fetch("/api/v1/directory")
-      .then(async (response) => {
-        if (!response.ok) return;
-        const payload = (await response.json()) as {
-          data: Array<{
-            id: string;
-            displayName: string;
-            actorType: string;
-            status: string;
-          }>;
-        };
-        setDirectory(
-          payload.data.filter(
-            (actor) =>
-              actor.status === "active" &&
-              !details.members.some((member) => member.actorId === actor.id),
-          ),
-        );
-      })
-      .catch(() => undefined);
-  }, [details]);
-
-  async function inviteMember() {
-    if (!inviteActorId) {
-      setError("Select an actor to invite");
-      return;
-    }
-    const response = await fetch(`/api/v1/rooms/${roomId}/members`, {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({
-        actorIds: [inviteActorId],
-        membershipRole: inviteRole,
-        accessExpiresAt: inviteExpiry
-          ? new Date(inviteExpiry).toISOString()
-          : null,
-        idempotencyKey: `member-invite:${browserUuid()}`,
-      }),
-    });
-    if (!response.ok) {
-      const payload = (await response.json().catch(() => null)) as {
-        detail?: string;
-      } | null;
-      setError(payload?.detail ?? "Invitation could not be created");
-      return;
-    }
-    setInviteActorId("");
-    setInviteExpiry("");
-    await refresh();
-  }
-
-  async function removeMember(actorId: string) {
-    const response = await fetch(`/api/v1/rooms/${roomId}/members/${actorId}`, {
-      method: "DELETE",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({
-        idempotencyKey: `member-remove:${browserUuid()}`,
-      }),
-    });
-    if (!response.ok) {
-      setError("Member could not be removed");
-      return;
-    }
-    await refresh();
-  }
-
-  async function transferOwnership(actorId: string) {
-    const response = await fetch(`/api/v1/rooms/${roomId}/ownership`, {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({
-        actorId,
-        idempotencyKey: `ownership-transfer:${browserUuid()}`,
-      }),
-    });
-    if (!response.ok) {
-      setError("Ownership could not be transferred");
-      return;
-    }
-    await refresh();
-  }
-
-  async function updateRoom(formData: FormData) {
-    const response = await fetch(`/api/v1/rooms/${roomId}`, {
-      method: "PATCH",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({
-        displayName: String(formData.get("displayName") ?? ""),
-        topic: String(formData.get("topic") ?? ""),
-        description: String(formData.get("description") ?? ""),
-        visibility: String(formData.get("visibility") ?? "organisation"),
-        idempotencyKey: `room-update:${browserUuid()}`,
-      }),
-    });
-    if (!response.ok) {
-      const payload = (await response.json().catch(() => null)) as {
-        detail?: string;
-      } | null;
-      setError(payload?.detail ?? "Room could not be updated");
-      return;
-    }
-    await refresh();
-  }
-
-  async function exportRoom() {
-    if (!details) return;
-    const response = await fetch(`/api/v1/rooms/${roomId}/export`);
-    if (!response.ok) {
-      const payload = (await response.json().catch(() => null)) as {
-        detail?: string;
-      } | null;
-      setError(payload?.detail ?? "Room export is unavailable");
-      return;
-    }
-    const payload = (await response.json()) as { data: unknown };
-    const blob = new Blob([JSON.stringify(payload.data, null, 2)], {
-      type: "application/json",
-    });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `${details.room.displayName
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, "-")}-muster-export.json`;
-    link.click();
-    URL.revokeObjectURL(url);
-  }
-
-  if (!details) {
-    return (
-      <div className="grid h-full place-items-center p-4 text-xs text-muted-foreground">
-        {error || "Loading room details…"}
-      </div>
-    );
-  }
-  const canManage =
-    details.room.membershipRole === "owner" ||
-    details.room.membershipRole === "moderator";
-  const records =
-    tab === "Members"
-      ? details.members.filter((member) => member.actorType !== "agent")
-      : tab === "Agents"
-        ? details.agents
-        : [];
-
-  return (
-    <div className="flex h-full flex-col">
-      <div className="border-b px-3 py-3">
-        <h2 className="truncate text-xs font-bold">
-          {details.room.displayName}
-        </h2>
-        <p className="truncate text-xs text-muted-foreground">
-          {details.room.visibility} · {details.room.roomType}
-        </p>
-      </div>
-      <div
-        role="tablist"
-        aria-label="Room details"
-        className="flex gap-1 overflow-x-auto border-b p-2"
-      >
-        {detailTabs.map((candidate) => (
-          <button
-            key={candidate}
-            type="button"
-            role="tab"
-            aria-selected={tab === candidate}
-            onClick={() => setTab(candidate)}
-            className={cn(
-              "min-h-8 shrink-0 rounded px-2 text-xs text-muted-foreground hover:bg-muted",
-              tab === candidate && "bg-muted font-semibold text-foreground",
-            )}
-          >
-            {candidate}
-          </button>
-        ))}
-      </div>
-      <div className="min-h-0 flex-1 overflow-y-auto p-3 text-xs">
-        {error && (
-          <p role="alert" className="mb-3 text-[var(--color-error)]">
-            {error}
-          </p>
-        )}
-        {tab === "About" && (
-          <div className="space-y-4">
-            {canManage ? (
-              <form
-                className="space-y-3"
-                onSubmit={(event) => {
-                  event.preventDefault();
-                  void updateRoom(new FormData(event.currentTarget));
-                }}
-              >
-                <label className="block font-bold">
-                  Name
-                  <input
-                    name="displayName"
-                    defaultValue={details.room.displayName}
-                    minLength={2}
-                    maxLength={120}
-                    required
-                    className="mt-1 h-9 w-full rounded border bg-background px-2 font-normal"
-                  />
-                </label>
-                <label className="block font-bold">
-                  Topic
-                  <input
-                    name="topic"
-                    defaultValue={details.room.topic}
-                    maxLength={500}
-                    className="mt-1 h-9 w-full rounded border bg-background px-2 font-normal"
-                  />
-                </label>
-                <label className="block font-bold">
-                  Purpose
-                  <textarea
-                    name="description"
-                    defaultValue={details.room.description}
-                    maxLength={2_000}
-                    rows={3}
-                    className="mt-1 w-full rounded border bg-background p-2 font-normal"
-                  />
-                </label>
-                <label className="block font-bold">
-                  Visibility
-                  <select
-                    name="visibility"
-                    defaultValue={details.room.visibility}
-                    disabled={details.room.roomType === "direct"}
-                    className="mt-1 h-9 w-full rounded border bg-background px-2 font-normal"
-                  >
-                    <option value="organisation">Organisation</option>
-                    <option value="private">Private</option>
-                    <option value="restricted">Restricted</option>
-                  </select>
-                </label>
-                <Button size="sm" type="submit">
-                  Save room details
-                </Button>
-              </form>
-            ) : (
-              <>
-                <section>
-                  <p className="font-bold">Purpose</p>
-                  <p className="mt-1 leading-5 text-muted-foreground">
-                    {details.room.description || "No purpose recorded."}
-                  </p>
-                </section>
-                <section>
-                  <p className="font-bold">Topic</p>
-                  <p className="mt-1 leading-5 text-muted-foreground">
-                    {details.room.topic || "No topic recorded."}
-                  </p>
-                </section>
-              </>
-            )}
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => void exportRoom()}
-            >
-              Export room manifest
-            </Button>
-            <RoomNotificationPreferences roomId={roomId} />
-          </div>
-        )}
-        {(tab === "Members" || tab === "Agents") && (
-          <div className="space-y-2">
-            {tab === "Members" && canManage && (
-              <section className="mb-3 space-y-2 rounded border bg-background p-2">
-                <p className="font-bold">Invite member or agent</p>
-                <label className="block">
-                  <span className="sr-only">Actor</span>
-                  <select
-                    value={inviteActorId}
-                    onChange={(event) => {
-                      const actor = directory.find(
-                        (candidate) => candidate.id === event.target.value,
-                      );
-                      setInviteActorId(event.target.value);
-                      if (actor?.actorType === "agent") {
-                        setInviteRole("agent_member");
-                      } else if (inviteRole === "agent_member") {
-                        setInviteRole("member");
-                      }
-                    }}
-                    className="h-9 w-full rounded border bg-background px-2"
-                  >
-                    <option value="">Select actor</option>
-                    {directory.map((actor) => (
-                      <option key={actor.id} value={actor.id}>
-                        {actor.displayName}
-                        {actor.actorType === "agent" ? " (agent)" : ""}
-                      </option>
-                    ))}
-                  </select>
-                </label>
-                <div className="grid grid-cols-2 gap-2">
-                  <label>
-                    <span className="sr-only">Role</span>
-                    <select
-                      value={inviteRole}
-                      onChange={(event) =>
-                        setInviteRole(event.target.value as typeof inviteRole)
-                      }
-                      className="h-9 w-full rounded border bg-background px-2"
-                    >
-                      <option value="member">Member</option>
-                      <option value="moderator">Moderator</option>
-                      <option value="guest">Guest</option>
-                      <option value="agent_member">Agent member</option>
-                    </select>
-                  </label>
-                  <label>
-                    <span className="sr-only">Access expiry</span>
-                    <input
-                      type="datetime-local"
-                      value={inviteExpiry}
-                      onChange={(event) => setInviteExpiry(event.target.value)}
-                      className="h-9 w-full rounded border bg-background px-2"
-                    />
-                  </label>
-                </div>
-                <Button size="sm" onClick={() => void inviteMember()}>
-                  Invite
-                </Button>
-              </section>
-            )}
-            {records.map((member) => (
-              <div
-                key={member.actorId}
-                className="rounded border bg-background p-2"
-              >
-                <div className="flex items-center gap-2">
-                  <Avatar
-                    initials={member.displayName
-                      .split(/\s+/)
-                      .slice(0, 2)
-                      .map((part) => part[0] ?? "")
-                      .join("")
-                      .toUpperCase()}
-                    agent={member.actorType === "agent"}
-                    size="sm"
-                  />
-                  <span className="min-w-0 flex-1 truncate font-semibold">
-                    {member.displayName}
-                  </span>
-                  <Badge>{member.role}</Badge>
-                </div>
-                {member.accessExpiresAt && (
-                  <p className="mt-2 text-muted-foreground">
-                    Access expires{" "}
-                    {new Date(member.accessExpiresAt).toLocaleString()}
-                  </p>
-                )}
-                {canManage && member.role !== "owner" && (
-                  <div className="mt-2 flex flex-wrap gap-2">
-                    {member.actorType !== "agent" &&
-                      member.role !== "guest" && (
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          onClick={() => void transferOwnership(member.actorId)}
-                        >
-                          Make owner
-                        </Button>
-                      )}
-                    <Button
-                      size="sm"
-                      variant="destructive"
-                      onClick={() => void removeMember(member.actorId)}
-                    >
-                      Remove
-                    </Button>
-                  </div>
-                )}
-              </div>
-            ))}
-            {records.length === 0 && (
-              <p className="text-muted-foreground">No records.</p>
-            )}
-            {tab === "Members" && details.invitations.length > 0 && (
-              <section className="mt-4 border-t pt-3">
-                <p className="font-bold">Invitations</p>
-                {details.invitations.map((invitation) => (
-                  <p key={invitation.id} className="mt-2 text-muted-foreground">
-                    {invitation.membershipRole} · {invitation.status}
-                  </p>
-                ))}
-              </section>
-            )}
-          </div>
-        )}
-        {tab === "Pinned" && (
-          <RecordList
-            empty="No pinned messages."
-            records={details.pinned.map((item) => ({
-              id: item.id,
-              title: item.plainText,
-              meta: new Date(item.createdAt).toLocaleString(),
-            }))}
-          />
-        )}
-        {tab === "Files" && (
-          <RecordList
-            empty="No governed files."
-            records={details.files.map((item) => ({
-              id: item.id,
-              title: item.fileName,
-              meta: `${item.classification} · ${item.scanState} · ${item.size} bytes`,
-            }))}
-          />
-        )}
-        {tab === "Workflows" && (
-          <RecordList
-            empty="No workflow runs."
-            records={details.workflows.map((item) => ({
-              id: item.id,
-              title: item.status,
-              meta: item.startedAt
-                ? new Date(item.startedAt).toLocaleString()
-                : "Queued",
-            }))}
-          />
-        )}
-        {tab === "Integrations" && (
-          <RecordList
-            empty="No bound integrations."
-            records={details.integrations.map((item) => ({
-              id: item.id,
-              title: item.displayName,
-              meta: `${item.product} · ${item.status}`,
-            }))}
-          />
-        )}
-        {tab === "Audit" && (
-          <RecordList
-            empty="No room audit events."
-            records={details.audit.map((item) => ({
-              id: item.id,
-              title: item.action,
-              meta: new Date(item.createdAt).toLocaleString(),
-            }))}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
-
-function RecordList({
-  records,
-  empty,
-}: {
-  records: Array<{ id: string; title: string; meta: string }>;
-  empty: string;
-}) {
-  if (records.length === 0)
-    return <p className="text-muted-foreground">{empty}</p>;
-  return (
-    <div className="space-y-2">
-      {records.map((record) => (
-        <div key={record.id} className="rounded border bg-background p-2">
-          <p className="font-semibold">{record.title}</p>
-          <p className="mt-1 text-muted-foreground">{record.meta}</p>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function RoomDetailsPanel({
-  slug,
-  roomId,
-  governed,
-}: {
-  slug: string;
-  roomId: string;
-  governed: boolean;
-}) {
-  const directRoom = demoDirectRooms.find((room) => room.slug === slug);
-
-  if (directRoom) {
-    return (
-      <div className="flex h-full flex-col">
-        <div className="flex h-12 items-center border-b px-3">
-          <h2 className="text-xs font-bold">Conversation details</h2>
-        </div>
-        <div className="p-4">
-          <div className="flex items-center gap-3">
-            <Avatar initials={directRoom.initials} agent={directRoom.agent} />
-            <div>
-              <p className="text-sm font-bold">{directRoom.name}</p>
-              <p className="text-xs text-muted-foreground">
-                {directRoom.topic}
-              </p>
-            </div>
-          </div>
-          <p className="mt-4 border-t pt-4 text-xs leading-5 text-muted-foreground">
-            {directRoom.agent
-              ? "Permission-scoped agent. Tool use, learned skills and self-improvement notes remain auditable."
-              : "Direct messages remain organisation-scoped and searchable."}
-          </p>
-          <RoomNotificationPreferences roomId={roomId} />
-        </div>
-      </div>
-    );
-  }
-
-  if (governed) {
-    return <GovernedDetailsPanel key={roomId} roomId={roomId} />;
-  }
-
-  if (!demoMode) {
-    return (
-      <div className="grid h-full place-items-center p-4 text-xs text-muted-foreground">
-        Resolving governed room…
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex h-full flex-col">
-      <div className="flex h-12 items-center border-b px-3">
-        <div className="min-w-0 flex-1">
-          <h2 className="text-xs font-bold">Investigation</h2>
-          <p className="mono truncate text-xs text-muted-foreground">
-            {activeInvestigation.number}
-          </p>
-        </div>
-        <Badge className="success-surface text-[var(--color-success)]">
-          Open
-        </Badge>
-      </div>
-      <div className="min-h-0 flex-1 overflow-y-auto p-3 text-xs">
-        <RoomNotificationPreferences roomId={roomId} />
-        <section className="border-b pb-3">
-          <p className="mb-2 font-bold">Linked signals</p>
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <AlertTriangle className="size-3.5 text-[var(--color-critical)]" />
-              <span className="mono flex-1">ALT-2026-1042</span>
-              <SeverityBadge severity="critical" />
-            </div>
-            <div className="flex items-center gap-2">
-              <AlertTriangle className="size-3.5 text-[var(--color-high)]" />
-              <span className="mono flex-1">ALT-2026-1041</span>
-              <SeverityBadge severity="high" />
-            </div>
-          </div>
-        </section>
-        <section className="border-b py-3">
-          <p className="mb-2 font-bold">Key observables</p>
-          <div className="space-y-2 text-foreground">
-            <p className="mono">203.0.113.44</p>
-            <p className="mono">cdn-auth-check.example</p>
-            <p className="mono">WS-1042 · jsmith</p>
-          </div>
-        </section>
-        <section className="border-b py-3">
-          <p className="mb-2 font-bold">Linked case</p>
-          <p className="mono text-[var(--color-accent)]">
-            {activeInvestigation.linkedCase}
-          </p>
-          <p className="mt-1 leading-4 text-muted-foreground">
-            Kelpie remains authoritative for formal case lifecycle.
-          </p>
-        </section>
-        <section className="py-3">
-          <div className="mb-2 flex items-center justify-between">
-            <p className="font-bold">Room members</p>
-            <span className="text-muted-foreground">18</span>
-          </div>
-          <div className="space-y-2">
-            {[
-              demoPeople[1]!,
-              demoPeople[0]!,
-              demoAgents[0]!,
-              demoAgents[1]!,
-            ].map((member) => (
-              <div key={member.id} className="flex items-center gap-2">
-                <Avatar
-                  initials={member.initials}
-                  agent={"runtime" in member}
-                  size="sm"
-                />
-                <span className="min-w-0 flex-1 truncate">{member.name}</span>
-                {"runtime" in member && (
-                  <Badge className="agent-surface px-1 text-xs">Agent</Badge>
-                )}
-                <span className="size-1.5 rounded-full bg-[var(--color-success)]" />
-              </div>
-            ))}
-          </div>
-        </section>
-      </div>
-    </div>
-  );
-}
-
-function RoomNotificationPreferences({ roomId }: { roomId: string }) {
-  const [level, setLevel] = useState<"all" | "mentions" | "nothing">("all");
-  const [notifyReplies, setNotifyReplies] = useState(true);
-  const [notifyFollowedThreads, setNotifyFollowedThreads] = useState(true);
-  const [muted, setMuted] = useState(false);
-  const [saving, setSaving] = useState(false);
-
-  useEffect(() => {
-    const controller = new AbortController();
-    void fetch(`/api/v1/rooms/${roomId}/notifications`, {
-      signal: controller.signal,
-    })
-      .then(async (response) => {
-        if (!response.ok) return;
-        const payload = (await response.json()) as {
-          data: {
-            notificationLevel: "all" | "mentions" | "nothing";
-            notifyReplies: boolean;
-            notifyFollowedThreads: boolean;
-            muted: boolean;
-          };
-        };
-        setLevel(payload.data.notificationLevel);
-        setNotifyReplies(payload.data.notifyReplies);
-        setNotifyFollowedThreads(payload.data.notifyFollowedThreads);
-        setMuted(payload.data.muted);
-      })
-      .catch(() => undefined);
-    return () => controller.abort();
-  }, [roomId]);
-
-  async function save(
-    notificationLevel: "all" | "mentions" | "nothing",
-    nextMuted: boolean,
-    nextNotifyReplies = notifyReplies,
-    nextNotifyFollowedThreads = notifyFollowedThreads,
-  ) {
-    setSaving(true);
-    try {
-      const response = await fetch(`/api/v1/rooms/${roomId}/notifications`, {
-        method: "PUT",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({
-          notificationLevel,
-          muted: nextMuted,
-          notifyReplies: nextNotifyReplies,
-          notifyFollowedThreads: nextNotifyFollowedThreads,
-        }),
-      });
-      if (!response.ok) return;
-      setLevel(notificationLevel);
-      setNotifyReplies(nextNotifyReplies);
-      setNotifyFollowedThreads(nextNotifyFollowedThreads);
-      setMuted(nextMuted);
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  return (
-    <section className="mb-4 border-b pb-4 text-xs">
-      <label className="font-bold" htmlFor={`room-notifications-${roomId}`}>
-        Notifications
-      </label>
-      <select
-        id={`room-notifications-${roomId}`}
-        className="mt-2 h-9 w-full rounded border bg-background px-2"
-        value={level}
-        disabled={saving}
-        onChange={(event) =>
-          void save(event.target.value as "all" | "mentions" | "nothing", muted)
-        }
-      >
-        <option value="all">All room activity</option>
-        <option value="mentions">Mentions and replies</option>
-        <option value="nothing">Nothing</option>
-      </select>
-      <label className="mt-2 flex items-center gap-2">
-        <input
-          type="checkbox"
-          className="size-6 shrink-0"
-          checked={notifyReplies}
-          disabled={saving || muted}
-          onChange={(event) =>
-            void save(level, muted, event.target.checked, notifyFollowedThreads)
-          }
-        />
-        Replies to my messages
-      </label>
-      <label className="mt-2 flex items-center gap-2">
-        <input
-          type="checkbox"
-          className="size-6 shrink-0"
-          checked={notifyFollowedThreads}
-          disabled={saving || muted}
-          onChange={(event) =>
-            void save(level, muted, notifyReplies, event.target.checked)
-          }
-        />
-        Activity in followed threads
-      </label>
-      <label className="mt-2 flex items-center gap-2">
-        <input
-          type="checkbox"
-          className="size-6 shrink-0"
-          checked={muted}
-          disabled={saving}
-          onChange={(event) => void save(level, event.target.checked)}
-        />
-        Mute this room
-      </label>
-    </section>
-  );
-}
-
-function ThreadPanel({
-  parent,
-  messages,
-  roomId,
-  onClose,
-  onReply,
-}: {
-  parent: ThreadParent;
-  messages: RoomMessageRecord[];
-  roomId: string;
-  onClose?: () => void;
-  onReply: (message: RoomMessageRecord) => void;
-}) {
-  const [reply, setReply] = useState("");
-  const [sending, setSending] = useState(false);
-  const [actionsOpen, setActionsOpen] = useState(false);
-  const [exporting, setExporting] = useState(false);
-  const [exportFeedback, setExportFeedback] = useState<{
-    kind: "success" | "error";
-    message: string;
-  } | null>(null);
-  const replies = messages
-    .filter((message) => message.threadParentId === parent.id)
-    .sort(
-      (left, right) =>
-        new Date(left.createdAt).getTime() -
-        new Date(right.createdAt).getTime(),
-    );
-  const parentAuthor =
-    "authorName" in parent && parent.authorName
-      ? parent.authorName
-      : "author" in parent
-        ? parent.author
-        : "title" in parent
-          ? parent.title
-          : "Muster";
-  const parentInitials =
-    "initials" in parent
-      ? parent.initials
-      : parentAuthor.slice(0, 2).toUpperCase();
-  const parentBody = "plainText" in parent ? parent.plainText : parent.body;
-  const parentTime =
-    "createdAt" in parent
-      ? new Date(parent.createdAt).toLocaleTimeString("en-AU", {
-          hour: "2-digit",
-          minute: "2-digit",
-          hour12: false,
-        })
-      : parent.time;
-
-  async function sendReply() {
-    const plainText = reply.trim();
-    if (!plainText || sending) return;
-    setSending(true);
-    try {
-      const response = await fetch(`/api/v1/rooms/${roomId}/messages`, {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({
-          threadParentId: parent.id,
-          document: {
-            type: "doc",
-            content: [
-              {
-                type: "paragraph",
-                content: [{ type: "text", text: plainText }],
-              },
-            ],
-          },
-          plainText,
-          messageType: "text",
-          dataClassification: "internal",
-          idempotencyKey: browserUuid(),
-        }),
-      });
-      if (!response.ok) return;
-      const payload = (await response.json()) as { data: RoomMessageRecord };
-      onReply(payload.data);
-      setReply("");
-    } finally {
-      setSending(false);
-    }
-  }
-
-  async function copyThread() {
-    if (exporting) return;
-    setExporting(true);
-    setActionsOpen(false);
-    setExportFeedback(null);
-    try {
-      const response = await fetch(
-        `/api/v1/rooms/${encodeURIComponent(roomId)}/threads/${encodeURIComponent(parent.id)}/export`,
-      );
-      if (!response.ok) throw new Error("Thread export failed.");
-      const payload = (await response.json()) as {
-        data: { markdown: string; fileName: string };
-      };
-      try {
-        if (!navigator.clipboard?.writeText) {
-          throw new Error("Clipboard unavailable.");
-        }
-        await navigator.clipboard.writeText(payload.data.markdown);
-        setExportFeedback({
-          kind: "success",
-          message: "Thread copied as Markdown.",
-        });
-      } catch {
-        const url = URL.createObjectURL(
-          new Blob([payload.data.markdown], {
-            type: "text/markdown;charset=utf-8",
-          }),
-        );
-        const link = document.createElement("a");
-        link.href = url;
-        link.download = payload.data.fileName;
-        link.click();
-        URL.revokeObjectURL(url);
-        setExportFeedback({
-          kind: "success",
-          message: "Clipboard unavailable; Markdown downloaded.",
-        });
-      }
-    } catch {
-      setExportFeedback({
-        kind: "error",
-        message: "Thread export failed. Try again.",
-      });
-    } finally {
-      setExporting(false);
-    }
-  }
-
-  return (
-    <div className="flex h-full flex-col">
-      <div className="flex h-14 items-center gap-2 border-b px-3">
-        <MessageSquare className="size-4" />
-        <h2 className="flex-1 font-display text-sm font-bold">Thread</h2>
-        <div className="relative">
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={() => setActionsOpen((open) => !open)}
-            aria-label="Thread actions"
-            aria-expanded={actionsOpen}
-            disabled={exporting}
-          >
-            <MoreHorizontal />
-          </Button>
-          {actionsOpen && (
-            <div
-              role="menu"
-              className="absolute right-0 top-10 z-30 w-44 rounded-md border bg-popover p-1 shadow-lg"
-            >
-              <button
-                type="button"
-                role="menuitem"
-                className="flex w-full items-center gap-2 rounded px-2 py-2 text-left text-xs hover:bg-muted"
-                onClick={() => void copyThread()}
-              >
-                <Copy className="size-3.5" />
-                Copy thread
-              </button>
-            </div>
-          )}
-        </div>
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={onClose}
-          aria-label="Close thread"
-        >
-          <X />
-        </Button>
-      </div>
-      {exportFeedback && (
-        <div
-          role={exportFeedback.kind === "error" ? "alert" : "status"}
-          className={cn(
-            "border-b px-3 py-2 text-xs",
-            exportFeedback.kind === "error"
-              ? "text-destructive"
-              : "text-muted-foreground",
-          )}
-        >
-          {exportFeedback.message}
-        </div>
-      )}
-      <div className="flex-1 overflow-y-auto">
-        <div className="border-b p-3">
-          <div className="flex items-center gap-2">
-            <Avatar initials={parentInitials} size="sm" />
-            <strong className="text-xs">{parentAuthor}</strong>
-            <span className="text-xs text-muted-foreground">{parentTime}</span>
-          </div>
-          <p className="mt-2 whitespace-pre-wrap text-xs leading-5">
-            {parentBody}
-          </p>
-        </div>
-        {replies.map((message) => {
-          const actor = actorIdentity[message.authorActorId] ?? {
-            name: "Jordan Blake",
-            initials: "JB",
-            agent: false,
-          };
-          return (
-            <div
-              key={message.id}
-              className="flex gap-2 border-b p-3"
-              data-dynamic-message={
-                seededThreadMessageIds.has(message.id) ? undefined : "true"
-              }
-            >
-              <Avatar initials={actor.initials} size="sm" agent={actor.agent} />
-              <div>
-                <p className="text-xs font-bold">
-                  {actor.name}{" "}
-                  <span className="font-normal text-muted-foreground">
-                    ·{" "}
-                    {new Date(message.createdAt).toLocaleTimeString("en-AU", {
-                      hour: "2-digit",
-                      minute: "2-digit",
-                      hour12: false,
-                    })}
-                  </span>
-                </p>
-                <p className="mt-1 text-xs leading-5">{message.plainText}</p>
-                {message.editedAt && (
-                  <span className="text-xs text-muted-foreground">
-                    (edited)
-                  </span>
-                )}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      <div className="border-t p-3">
-        <textarea
-          aria-label="Reply to thread"
-          placeholder="Reply…"
-          value={reply}
-          onChange={(event) => setReply(event.target.value)}
-          onKeyDown={(event) => {
-            if (
-              event.key === "Enter" &&
-              !event.shiftKey &&
-              !event.nativeEvent.isComposing &&
-              !window.matchMedia("(pointer: coarse)").matches
-            ) {
-              event.preventDefault();
-              void sendReply();
-            }
-          }}
-          className="min-h-20 w-full resize-none rounded-md border bg-background p-2 text-xs outline-none"
-        />
-        <div className="mt-2 flex items-center justify-between gap-2">
-          <span className="text-xs text-muted-foreground">
-            Enter to reply on desktop · Shift+Enter for new line
-          </span>
-          <Button
-            size="sm"
-            disabled={sending || !reply.trim()}
-            onClick={() => void sendReply()}
-          >
-            {sending ? "Replying…" : "Reply"}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function RoomView({ slug }: { slug: string }) {
-  const [threadOpen, setThreadOpen] = useState(false);
-  const [threadParent, setThreadParent] = useState<ThreadParent | null>(
-    roomTimeline[1] ?? null,
-  );
-  const [messages, setMessages] = useState<RoomMessageRecord[]>([]);
-  const [reactionCounts, setReactionCounts] = useState<Record<string, number>>(
-    {},
-  );
-  const [liveEvents, setLiveEvents] = useState<
-    Array<{ id: string; type: string }>
-  >([]);
-  const [typingActors, setTypingActors] = useState<string[]>([]);
-  const [presentSessions, setPresentSessions] = useState<
-    Array<{ actorId: string; sessionId: string }>
-  >([]);
-  const [realtimeConnected, setRealtimeConnected] = useState(false);
-  const [governedRoom, setGovernedRoom] = useState<{
-    id: string;
-    slug: string;
-    displayName: string;
-    topic: string;
-    roomType: string;
-  } | null>(null);
-  const [searchOpen, setSearchOpen] = useState(false);
-  const [roomQuery, setRoomQuery] = useState("");
-  const [showJumpToLatest, setShowJumpToLatest] = useState(false);
-  const [loadingOlder, setLoadingOlder] = useState(false);
-  const [pageInfo, setPageInfo] = useState<{
-    hasMore: boolean;
-    nextBefore: string | null;
-  }>({ hasMore: false, nextBefore: null });
-  const timelineRef = useRef<HTMLDivElement | null>(null);
-  const loadedOlderRef = useRef(false);
-  const restoredScrollRoomRef = useRef<string | null>(null);
-  const typingTimersRef = useRef(
-    new Map<string, ReturnType<typeof setTimeout>>(),
-  );
-  const presenceTimersRef = useRef(
-    new Map<string, ReturnType<typeof setTimeout>>(),
-  );
-  const presenceSessionRef = useRef(browserUuid());
-  const roomId =
-    governedRoom?.id ??
-    roomIdBySlug[slug] ??
-    roomIdBySlug["investigation-suspicious-powershell"]!;
-  const roomResolved = Boolean(
-    governedRoom || (demoMode && roomIdBySlug[slug]),
-  );
-
-  useEffect(() => {
-    if (demoMode && roomIdBySlug[slug]) return;
-    const controller = new AbortController();
-    const parameters = new URLSearchParams({
-      q: slug.replaceAll("-", " "),
-      includeArchived: "true",
-    });
-    void fetch(`/api/v1/rooms?${parameters}`, { signal: controller.signal })
-      .then(async (response) => {
-        if (!response.ok) return;
-        const payload = (await response.json()) as {
-          data: Array<{
-            id: string;
-            slug: string;
-            displayName: string;
-            topic: string;
-            roomType: string;
-          }>;
-        };
-        const exact = payload.data.find((room) => room.slug === slug);
-        if (exact) setGovernedRoom(exact);
-      })
-      .catch(() => undefined);
-    return () => controller.abort();
-  }, [slug]);
-
-  const refreshMessages = useCallback(
-    async (signal?: AbortSignal) => {
-      if (!roomResolved) return;
-      const response = await fetch(
-        `/api/v1/rooms/${roomId}/messages`,
-        signal ? { signal } : undefined,
-      );
-      if (!response.ok) return;
-      const payload = (await response.json()) as {
-        data: RoomMessageRecord[];
-        page: { hasMore: boolean; nextBefore: string | null };
-      };
-      setMessages((current) => {
-        const serverIds = new Set(payload.data.map((message) => message.id));
-        const serverKeys = new Set(
-          payload.data.flatMap(({ idempotencyKey }) =>
-            idempotencyKey ? [idempotencyKey] : [],
-          ),
-        );
-        const retained = current.filter(
-          (message) =>
-            !serverIds.has(message.id) &&
-            ((message.id.startsWith("client:") &&
-              (!message.idempotencyKey ||
-                !serverKeys.has(message.idempotencyKey)) &&
-              message.deliveryState !== "delivered") ||
-              message.roomId === roomId),
-        );
-        return [...payload.data, ...retained].sort(
-          (left, right) =>
-            new Date(left.createdAt).getTime() -
-            new Date(right.createdAt).getTime(),
-        );
-      });
-      if (!loadedOlderRef.current) setPageInfo(payload.page);
-      const latest = payload.data.at(-1);
-      if (latest) {
-        void fetch(`/api/v1/rooms/${roomId}/read`, {
-          method: "POST",
-          headers: { "content-type": "application/json" },
-          body: JSON.stringify({ messageId: latest.id }),
-        }).catch(() => undefined);
-      }
-    },
-    [roomId, roomResolved],
-  );
-
-  useEffect(() => {
-    const controller = new AbortController();
-    setMessages([]);
-    setPageInfo({ hasMore: false, nextBefore: null });
-    loadedOlderRef.current = false;
-    restoredScrollRoomRef.current = null;
-    void refreshMessages(controller.signal).catch(() => undefined);
-    return () => controller.abort();
-  }, [refreshMessages]);
-
-  useEffect(() => {
-    if (
-      messages.length === 0 ||
-      restoredScrollRoomRef.current === slug ||
-      !timelineRef.current
-    ) {
-      return;
-    }
-    restoredScrollRoomRef.current = slug;
-    const stored = sessionStorage.getItem(`muster:room-scroll:${slug}`);
-    if (!stored) return;
-    const scrollTop = Number(stored);
-    if (!Number.isFinite(scrollTop)) return;
-    requestAnimationFrame(() =>
-      timelineRef.current?.scrollTo({ top: scrollTop }),
-    );
-  }, [messages, slug]);
-
-  useEffect(() => {
-    const messageId = new URL(window.location.href).searchParams.get("message");
-    if (!messageId || messages.length === 0) return;
-    requestAnimationFrame(() => {
-      document
-        .getElementById(`message-${messageId}`)
-        ?.scrollIntoView({ block: "center" });
-    });
-  }, [messages]);
-
-  useEffect(() => {
-    if (!roomResolved) return;
-    const source = new EventSource("/api/v1/events/stream");
-    const reportPresence = (active: boolean) =>
-      fetch(`/api/v1/rooms/${roomId}/presence`, {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({
-          active,
-          sessionId: presenceSessionRef.current,
-        }),
-        keepalive: !active,
-      }).catch(() => undefined);
-    source.addEventListener("connected", () => {
-      setRealtimeConnected(true);
-      void reportPresence(true);
-    });
-    source.addEventListener("update", (event) => {
-      const data = JSON.parse((event as MessageEvent<string>).data) as {
-        type?: string;
-        data?: {
-          messageId?: string;
-          roomId?: string;
-          actorId?: string;
-          sessionId?: string;
-          active?: boolean;
-        };
-      };
-      if (data.data?.roomId && data.data.roomId !== roomId) return;
-      if (data.type === "room.typing" && data.data?.actorId) {
-        const actorId = data.data.actorId;
-        const existing = typingTimersRef.current.get(actorId);
-        if (existing) clearTimeout(existing);
-        if (data.data.active) {
-          setTypingActors((current) =>
-            current.includes(actorId) ? current : [...current, actorId],
-          );
-          typingTimersRef.current.set(
-            actorId,
-            setTimeout(() => {
-              setTypingActors((current) =>
-                current.filter((candidate) => candidate !== actorId),
-              );
-              typingTimersRef.current.delete(actorId);
-            }, 4_000),
-          );
-        } else {
-          setTypingActors((current) =>
-            current.filter((candidate) => candidate !== actorId),
-          );
-          typingTimersRef.current.delete(actorId);
-        }
-        return;
-      }
-      if (
-        data.type === "room.presence" &&
-        data.data?.actorId &&
-        data.data.sessionId
-      ) {
-        const { actorId, sessionId } = data.data;
-        const existing = presenceTimersRef.current.get(sessionId);
-        if (existing) clearTimeout(existing);
-        if (data.data.active) {
-          setPresentSessions((current) =>
-            current.some((session) => session.sessionId === sessionId)
-              ? current.map((session) =>
-                  session.sessionId === sessionId
-                    ? { actorId, sessionId }
-                    : session,
-                )
-              : [...current, { actorId, sessionId }],
-          );
-          presenceTimersRef.current.set(
-            sessionId,
-            setTimeout(() => {
-              setPresentSessions((current) =>
-                current.filter((session) => session.sessionId !== sessionId),
-              );
-              presenceTimersRef.current.delete(sessionId);
-            }, 45_000),
-          );
-        } else {
-          setPresentSessions((current) =>
-            current.filter((session) => session.sessionId !== sessionId),
-          );
-          presenceTimersRef.current.delete(sessionId);
-        }
-        return;
-      }
-      setLiveEvents((current) => [
-        ...current.slice(-4),
-        { id: browserUuid(), type: data.type ?? "update" },
-      ]);
-      if (data.type?.startsWith("room.")) {
-        void refreshMessages().catch(() => undefined);
-      }
-    });
-    source.onerror = () => setRealtimeConnected(false);
-    const heartbeat = setInterval(() => void reportPresence(true), 25_000);
-    return () => {
-      void reportPresence(false);
-      source.close();
-      clearInterval(heartbeat);
-      for (const timer of typingTimersRef.current.values()) clearTimeout(timer);
-      typingTimersRef.current.clear();
-      for (const timer of presenceTimersRef.current.values())
-        clearTimeout(timer);
-      presenceTimersRef.current.clear();
-      setPresentSessions([]);
-    };
-  }, [refreshMessages, roomId, roomResolved]);
-
-  const presentActorCount = new Set(
-    presentSessions.map((session) => session.actorId),
-  ).size;
-
-  function changeMessage(message: RoomMessageRecord) {
-    setMessages((current) =>
-      current.some((item) => item.id === message.id)
-        ? current.map((item) => (item.id === message.id ? message : item))
-        : [...current, message].sort(
-            (left, right) =>
-              new Date(left.createdAt).getTime() -
-              new Date(right.createdAt).getTime(),
-          ),
-    );
-  }
-
-  function handleDelivery(message: RoomMessageRecord) {
-    setMessages((current) => {
-      const withoutClient = current.filter(
-        (item) =>
-          item.id !== message.clientId &&
-          item.id !== message.id &&
-          (!message.idempotencyKey ||
-            item.idempotencyKey !== message.idempotencyKey),
-      );
-      return [...withoutClient, message].sort(
-        (left, right) =>
-          new Date(left.createdAt).getTime() -
-          new Date(right.createdAt).getTime(),
-      );
-    });
-  }
-
-  async function loadOlderMessages() {
-    if (loadingOlder || !pageInfo.hasMore || !pageInfo.nextBefore) return;
-    setLoadingOlder(true);
-    const timeline = timelineRef.current;
-    const previousHeight = timeline?.scrollHeight ?? 0;
-    try {
-      const response = await fetch(
-        `/api/v1/rooms/${roomId}/messages?before=${encodeURIComponent(pageInfo.nextBefore)}`,
-      );
-      if (!response.ok) return;
-      const payload = (await response.json()) as {
-        data: RoomMessageRecord[];
-        page: { hasMore: boolean; nextBefore: string | null };
-      };
-      setMessages((current) => {
-        const byId = new Map(
-          [...payload.data, ...current].map((message) => [message.id, message]),
-        );
-        return Array.from(byId.values()).sort(
-          (left, right) =>
-            new Date(left.createdAt).getTime() -
-            new Date(right.createdAt).getTime(),
-        );
-      });
-      loadedOlderRef.current = true;
-      setPageInfo(payload.page);
-      requestAnimationFrame(() => {
-        if (!timeline) return;
-        timeline.scrollTop += timeline.scrollHeight - previousHeight;
-      });
-    } finally {
-      setLoadingOlder(false);
-    }
-  }
-
-  function openThread(parent: ThreadParent) {
-    setThreadParent(parent);
-    setThreadOpen(true);
-    const url = new URL(window.location.href);
-    url.searchParams.set("thread", parent.id);
-    window.history.pushState({}, "", url);
-    window.dispatchEvent(new Event("muster:open-context"));
-  }
-
-  function closeThread() {
-    setThreadOpen(false);
-    const url = new URL(window.location.href);
-    url.searchParams.delete("thread");
-    window.history.pushState({}, "", url);
-  }
-
-  useEffect(() => {
-    function restoreThreadFromUrl() {
-      const id = new URL(window.location.href).searchParams.get("thread");
-      if (!id) {
-        setThreadOpen(false);
-        return;
-      }
-      const parent =
-        messages.find((message) => message.id === id) ??
-        roomTimeline.find((message) => message.id === id);
-      if (parent) {
-        setThreadParent(parent);
-        setThreadOpen(true);
-        window.dispatchEvent(new Event("muster:open-context"));
-      }
-    }
-    restoreThreadFromUrl();
-    window.addEventListener("popstate", restoreThreadFromUrl);
-    return () => window.removeEventListener("popstate", restoreThreadFromUrl);
-  }, [messages]);
-
-  async function toggleReaction(
-    item: TimelineItem,
-    emoji: "eyes" | "check" | "thumbsup",
-  ) {
-    if (!persistedTimelineIds.has(item.id)) return;
-    const response = await fetch(`/api/v1/messages/${item.id}/reactions`, {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({ emoji, idempotencyKey: browserUuid() }),
-    });
-    if (!response.ok) return;
-    const payload = (await response.json()) as {
-      data: { count: number };
-    };
-    setReactionCounts((current) => ({
-      ...current,
-      [`${item.id}:${emoji}`]: payload.data.count,
-    }));
-  }
-
-  const newRootMessages = messages
-    .filter(
-      (message) =>
-        !message.threadParentId && !persistedTimelineIds.has(message.id),
-    )
-    .sort(
-      (left, right) =>
-        new Date(left.createdAt).getTime() -
-        new Date(right.createdAt).getTime(),
-    );
-  const visibleRootMessages = roomQuery.trim()
-    ? newRootMessages.filter((message) =>
-        message.plainText.toLowerCase().includes(roomQuery.toLowerCase()),
-      )
-    : newRootMessages;
-  const firstUnreadId = visibleRootMessages.find(
-    (message) => message.unread,
-  )?.id;
-  const room = demoRooms.find((item) => item.slug === slug);
-  const directRoom = demoDirectRooms.find((item) => item.slug === slug);
-  const displayName =
-    governedRoom?.displayName ?? directRoom?.name ?? room?.name ?? slug;
-  const topic =
-    governedRoom?.topic ??
-    directRoom?.topic ??
-    room?.topic ??
-    "Security operations collaboration";
-  const isDirect = governedRoom?.roomType === "direct" || Boolean(directRoom);
-  const isIncident =
-    slug.includes("incident") || slug.includes("investigation");
-  return (
-    <AppShell
-      context={
-        threadOpen && threadParent ? (
-          <ThreadPanel
-            parent={threadParent}
-            messages={messages}
-            roomId={roomId}
-            onReply={changeMessage}
-            onClose={closeThread}
-          />
-        ) : (
-          <RoomDetailsPanel
-            slug={slug}
-            roomId={roomId}
-            governed={Boolean(governedRoom)}
-          />
-        )
-      }
-    >
-      <header className="border-b">
-        <div className="flex min-h-12 items-center gap-2 px-4">
-          {directRoom ? (
-            <Avatar
-              initials={directRoom.initials}
-              agent={directRoom.agent}
-              size="sm"
-            />
-          ) : (
-            <Hash className="size-4 text-muted-foreground" />
-          )}
-          <div className="min-w-0 flex-1">
-            <div className="flex min-w-0 items-center gap-2">
-              <h1 className="truncate font-display text-sm font-bold">
-                {displayName}
-              </h1>
-              {directRoom?.agent && (
-                <Badge className="agent-surface">Agent</Badge>
-              )}
-              {isIncident && <SeverityBadge severity="critical" />}
-            </div>
-            <p className="truncate text-xs text-muted-foreground">{topic}</p>
-          </div>
-          <div className="hidden -space-x-1 tablet:flex">
-            {(demoMode
-              ? ["MC", "PN", "JB", "TH"]
-              : ["MA", "AL", "JE", "PA"]
-            ).map((initials) => (
-              <Avatar
-                key={initials}
-                initials={initials}
-                agent={initials === "TH"}
-                size="sm"
-                className="ring-2 ring-background"
-              />
-            ))}
-          </div>
-          <Badge className="hidden tablet:inline-flex">
-            {demoMode ? 18 : 4}
-          </Badge>
-          <span
-            className="hidden items-center gap-1 text-xs text-muted-foreground tablet:inline-flex"
-            title={
-              realtimeConnected
-                ? "Live room updates connected"
-                : "Live updates reconnecting; durable history remains available"
-            }
-          >
-            {realtimeConnected ? (
-              <span className="size-1.5 rounded-full bg-[var(--color-success)]" />
-            ) : (
-              <WifiOff className="size-3.5" />
-            )}
-            {realtimeConnected ? "Live" : "Reconnecting"}
-          </span>
-          {realtimeConnected && (
-            <span
-              className="hidden text-xs text-muted-foreground tablet:inline"
-              data-testid="room-presence"
-            >
-              {presentActorCount} present
-            </span>
-          )}
-          <Button
-            variant="ghost"
-            size="icon"
-            aria-label="Search room"
-            aria-expanded={searchOpen}
-            onClick={() => setSearchOpen((open) => !open)}
-          >
-            <Search />
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="hidden tablet:inline-flex"
-            disabled
-            title="Assign work to an agent from Tasks"
-          >
-            <Bot /> Ask agent
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            aria-label="Room details"
-            onClick={() =>
-              window.dispatchEvent(new Event("muster:open-context"))
-            }
-          >
-            <Users />
-          </Button>
-        </div>
-        {searchOpen && (
-          <div className="border-t px-4 py-2">
-            <label className="sr-only" htmlFor="room-search">
-              Search within this room
-            </label>
-            <input
-              id="room-search"
-              autoFocus
-              type="search"
-              value={roomQuery}
-              onChange={(event) => setRoomQuery(event.target.value)}
-              placeholder="Search this room"
-              className="h-8 w-full rounded border bg-background px-3 text-sm outline-none focus:border-[var(--color-focus)]"
-            />
-          </div>
-        )}
-        <nav
-          aria-label="Room sections"
-          className="flex h-8 items-end gap-5 overflow-x-auto px-4 text-xs text-muted-foreground"
-        >
-          <a
-            href="#room-timeline"
-            className="flex h-full items-center border-b-2 border-[var(--color-accent)] font-semibold text-foreground"
-          >
-            Messages
-          </a>
-          <a
-            href="#room-timeline"
-            className="flex h-full items-center hover:text-foreground"
-          >
-            Timeline
-          </a>
-          <Link
-            href="/search"
-            className="flex h-full items-center hover:text-foreground"
-          >
-            Evidence
-          </Link>
-          <Link
-            href="/approvals"
-            className="flex h-full items-center hover:text-foreground"
-          >
-            Responses
-          </Link>
-          <Link
-            href="/workflows"
-            className="flex h-full items-center hover:text-foreground"
-          >
-            Playbook
-          </Link>
-          <button
-            type="button"
-            className="flex h-full items-center hover:text-foreground"
-            onClick={() =>
-              window.dispatchEvent(new Event("muster:open-context"))
-            }
-          >
-            Members
-          </button>
-        </nav>
-      </header>
-      <div
-        id="room-timeline"
-        ref={timelineRef}
-        className="scroll-region min-h-0 flex-1 overflow-y-auto"
-        onScroll={(event) => {
-          const element = event.currentTarget;
-          sessionStorage.setItem(
-            `muster:room-scroll:${slug}`,
-            String(element.scrollTop),
-          );
-          setShowJumpToLatest(
-            element.scrollHeight - element.scrollTop - element.clientHeight >
-              160,
-          );
-        }}
-      >
-        <div className="mx-auto max-w-5xl py-3">
-          {pageInfo.hasMore && (
-            <div className="flex justify-center px-4 pb-3">
-              <Button
-                size="sm"
-                variant="outline"
-                disabled={loadingOlder}
-                onClick={() => void loadOlderMessages()}
-              >
-                <Clock3 />
-                {loadingOlder ? "Loading…" : "Load older messages"}
-              </Button>
-            </div>
-          )}
-          {(roomTimeline.length > 0 || newRootMessages.length > 0) && (
-            <div className="mb-2 flex items-center gap-2 px-4 text-xs font-bold uppercase tracking-wider text-muted-foreground">
-              <Clock3 className="size-3" /> Today
-            </div>
-          )}
-          {roomTimeline
-            .filter(
-              (item) =>
-                !roomQuery.trim() ||
-                item.body.toLowerCase().includes(roomQuery.toLowerCase()),
-            )
-            .map((item) => (
-              <TimelineEntry
-                key={item.id}
-                item={item}
-                reactionCounts={reactionCounts}
-                onReact={(selected, emoji) =>
-                  void toggleReaction(selected, emoji)
-                }
-                onThread={openThread}
-              />
-            ))}
-          {visibleRootMessages.map((message) => (
-            <div key={message.id} className="relative focus-within:z-30">
-              {message.id === firstUnreadId && (
-                <div
-                  role="separator"
-                  aria-label="New messages"
-                  className="my-2 flex items-center gap-2 px-4 text-xs font-semibold text-[var(--color-accent)]"
-                >
-                  <span className="h-px flex-1 bg-[var(--color-accent)]" />
-                  New messages
-                  <span className="h-px flex-1 bg-[var(--color-accent)]" />
-                </div>
-              )}
-              <DynamicMessageEntry
-                message={message}
-                onChange={changeMessage}
-                onThread={openThread}
-              />
-            </div>
-          ))}
-          {liveEvents.map((event) => (
-            <div
-              key={event.id}
-              data-testid="live-event"
-              className="pointer-events-none mx-4 my-2 flex items-center gap-2 border border-[var(--color-success)] bg-[var(--color-success-soft)] p-3 text-xs"
-            >
-              <Check className="size-4 text-[var(--color-success)]" />
-              <strong>Live update received</strong>
-              <span className="mono text-muted-foreground">{event.type}</span>
-            </div>
-          ))}
-          {!demoMode &&
-            roomTimeline.length === 0 &&
-            newRootMessages.length === 0 && (
-              <div className="mx-auto mt-16 max-w-md px-6 text-center">
-                <Hash className="mx-auto size-7 text-muted-foreground" />
-                <h2 className="mt-3 text-sm font-bold">
-                  Start the conversation
-                </h2>
-                <p className="mt-1 text-xs leading-5 text-muted-foreground">
-                  Messages, agent work, decisions, and security events posted
-                  here become the durable room history.
-                </p>
-              </div>
-            )}
-          <RoomAgentHandoffs roomId={roomId} roomResolved={roomResolved} />
-          <RoomAgentActivity
-            roomId={roomId}
-            roomResolved={roomResolved}
-            showDemoFallback={demoMode}
-          />
-          {typingActors.length > 0 && (
-            <div
-              role="status"
-              aria-live="polite"
-              data-testid="typing-indicator"
-              className="mx-4 mt-2 text-xs text-muted-foreground"
-            >
-              {typingActors.length === 1
-                ? "A room member is typing…"
-                : `${typingActors.length} room members are typing…`}
-            </div>
-          )}
-        </div>
-      </div>
-      {showJumpToLatest && (
-        <Button
-          size="sm"
-          variant="outline"
-          className="mx-auto mb-2"
-          onClick={() =>
-            timelineRef.current?.scrollTo({
-              top: timelineRef.current.scrollHeight,
-              behavior: window.matchMedia("(prefers-reduced-motion: reduce)")
-                .matches
-                ? "auto"
-                : "smooth",
-            })
-          }
-        >
-          <ChevronDown /> Jump to latest
-        </Button>
-      )}
-      <RoomComposer
-        roomSlug={slug}
-        roomLabel={isDirect ? displayName : `#${displayName}`}
-        onDeliveryChange={handleDelivery}
-      />
-    </AppShell>
-  );
-}
diff --git a/apps/web/components/rooms-browser.tsx b/apps/web/components/rooms-browser.tsx
deleted file mode 100644
index 49db107..0000000
--- a/apps/web/components/rooms-browser.tsx
+++ /dev/null
@@ -1,795 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  Archive,
-  Hash,
-  LockKeyhole,
-  MessageSquare,
-  Plus,
-  RefreshCw,
-  Search,
-  Star,
-  Users,
-  Volume2,
-  VolumeX,
-} from "lucide-react";
-import { AppShell } from "@/components/app-shell";
-import { PageHeader } from "@/components/page-header";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { browserUuid } from "@/lib/browser-uuid";
-import { cn } from "@/lib/utils";
-
-type RoomRecord = {
-  id: string;
-  slug: string;
-  displayName: string;
-  description: string;
-  topic: string;
-  roomType: string;
-  visibility: "organisation" | "private" | "restricted";
-  archivedAt: string | null;
-  membershipRole: string | null;
-  favourite: boolean | null;
-  muted: boolean | null;
-  sidebarPosition: number | null;
-  sidebarGroup: string | null;
-  memberCount: number;
-  owner: string | null;
-  lastActivityAt: string | null;
-};
-
-type DirectoryActor = {
-  id: string;
-  displayName: string;
-  actorType: string;
-  status: string;
-  jobTitle: string | null;
-  team: string | null;
-  presenceState: string | null;
-  timezone: string | null;
-};
-
-type PendingInvitation = {
-  id: string;
-  roomId: string;
-  roomName: string;
-  membershipRole: string;
-  accessExpiresAt: string | null;
-  createdAt: string;
-};
-
-const roomTypes = [
-  "operations",
-  "incident",
-  "investigation",
-  "hunt",
-  "engineering",
-  "private",
-  "system",
-] as const;
-
-function idempotencyKey(prefix: string) {
-  return `${prefix}:${browserUuid()}`;
-}
-
-async function problemDetail(response: Response) {
-  const payload = (await response.json().catch(() => null)) as {
-    detail?: string;
-  } | null;
-  return payload?.detail ?? `Request failed (${response.status})`;
-}
-
-export function RoomsBrowser() {
-  const [rooms, setRooms] = useState<RoomRecord[]>([]);
-  const [directory, setDirectory] = useState<DirectoryActor[]>([]);
-  const [invitations, setInvitations] = useState<PendingInvitation[]>([]);
-  const [query, setQuery] = useState("");
-  const [visibility, setVisibility] = useState("all");
-  const [membership, setMembership] = useState("all");
-  const [includeArchived, setIncludeArchived] = useState(false);
-  const [showCreate, setShowCreate] = useState(false);
-  const [showDirect, setShowDirect] = useState(false);
-  const [selectedActors, setSelectedActors] = useState<string[]>([]);
-  const [busy, setBusy] = useState<string | null>("load");
-  const [error, setError] = useState("");
-  const [notice, setNotice] = useState("");
-
-  const refresh = useCallback(async () => {
-    setBusy("load");
-    setError("");
-    const parameters = new URLSearchParams({
-      q: query,
-      visibility,
-      membership,
-      includeArchived: String(includeArchived),
-    });
-    try {
-      const response = await fetch(`/api/v1/rooms?${parameters}`);
-      if (!response.ok) throw new Error(await problemDetail(response));
-      const payload = (await response.json()) as { data: RoomRecord[] };
-      setRooms(payload.data);
-    } catch (cause) {
-      setError(cause instanceof Error ? cause.message : "Rooms unavailable");
-    } finally {
-      setBusy(null);
-    }
-  }, [includeArchived, membership, query, visibility]);
-
-  useEffect(() => {
-    const timer = window.setTimeout(() => void refresh(), 180);
-    return () => window.clearTimeout(timer);
-  }, [refresh]);
-
-  useEffect(() => {
-    if (!showDirect) return;
-    void fetch("/api/v1/directory")
-      .then(async (response) => {
-        if (!response.ok) throw new Error(await problemDetail(response));
-        const payload = (await response.json()) as { data: DirectoryActor[] };
-        setDirectory(
-          payload.data.filter(
-            (actor) =>
-              actor.status === "active" && actor.actorType !== "system",
-          ),
-        );
-      })
-      .catch((cause: unknown) =>
-        setError(
-          cause instanceof Error ? cause.message : "Directory unavailable",
-        ),
-      );
-  }, [showDirect]);
-
-  useEffect(() => {
-    void fetch("/api/v1/room-invitations")
-      .then(async (response) => {
-        if (!response.ok) return;
-        const payload = (await response.json()) as {
-          data: PendingInvitation[];
-        };
-        setInvitations(payload.data);
-      })
-      .catch(() => undefined);
-  }, []);
-
-  async function roomAction(
-    room: RoomRecord,
-    action: "join" | "leave" | "archive" | "restore",
-  ) {
-    setBusy(room.id);
-    setError("");
-    const response = await fetch(`/api/v1/rooms/${room.id}/lifecycle`, {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({
-        action,
-        idempotencyKey: idempotencyKey(`room-${action}`),
-      }),
-    });
-    if (!response.ok) {
-      setError(await problemDetail(response));
-      setBusy(null);
-      return;
-    }
-    setNotice(`${room.displayName}: ${action} complete`);
-    await refresh();
-  }
-
-  async function sidebarAction(
-    room: RoomRecord,
-    changes: Record<string, unknown>,
-  ) {
-    setBusy(room.id);
-    setError("");
-    const response = await fetch(`/api/v1/rooms/${room.id}/sidebar`, {
-      method: "PATCH",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify(changes),
-    });
-    if (!response.ok) {
-      setError(await problemDetail(response));
-      setBusy(null);
-      return;
-    }
-    await refresh();
-  }
-
-  async function createRoom(formData: FormData) {
-    setBusy("create");
-    setError("");
-    const displayName = String(formData.get("displayName") ?? "").trim();
-    const roomType = String(formData.get("roomType") ?? "operations");
-    const visibilityValue = String(
-      formData.get("visibility") ?? "organisation",
-    );
-    const slug = displayName
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, "-")
-      .replace(/^-|-$/g, "")
-      .slice(0, 64);
-    const response = await fetch("/api/v1/rooms", {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({
-        name: displayName,
-        slug,
-        displayName,
-        description: String(formData.get("description") ?? ""),
-        topic: String(formData.get("topic") ?? ""),
-        roomType,
-        visibility: visibilityValue,
-        policies: {
-          guestInvites: formData.get("guestInvites") === "on",
-          agentInvites: formData.get("agentInvites") === "on",
-          memberInvites: formData.get("memberInvites") === "on",
-          broadMentions: formData.get("broadMentions") === "on",
-          exportAllowed: formData.get("exportAllowed") === "on",
-          retentionDays: null,
-          archiveAfterDays: null,
-        },
-      }),
-    });
-    if (!response.ok) {
-      setError(await problemDetail(response));
-      setBusy(null);
-      return;
-    }
-    setShowCreate(false);
-    setNotice(`${displayName} created`);
-    await refresh();
-  }
-
-  async function createDirect() {
-    if (selectedActors.length === 0) {
-      setError("Select at least one person or agent");
-      return;
-    }
-    setBusy("direct");
-    const response = await fetch("/api/v1/rooms/direct", {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({
-        actorIds: selectedActors,
-        idempotencyKey: idempotencyKey("direct-room"),
-      }),
-    });
-    if (!response.ok) {
-      setError(await problemDetail(response));
-      setBusy(null);
-      return;
-    }
-    const payload = (await response.json()) as { data: RoomRecord };
-    setShowDirect(false);
-    setSelectedActors([]);
-    window.location.assign(`/rooms/${payload.data.slug}`);
-  }
-
-  async function respondInvitation(
-    invitation: PendingInvitation,
-    action: "accept" | "decline",
-  ) {
-    setBusy(invitation.id);
-    const response = await fetch(`/api/v1/room-invitations/${invitation.id}`, {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({
-        action,
-        idempotencyKey: idempotencyKey(`invitation-${action}`),
-      }),
-    });
-    if (!response.ok) {
-      setError(await problemDetail(response));
-      setBusy(null);
-      return;
-    }
-    setInvitations((current) =>
-      current.filter((candidate) => candidate.id !== invitation.id),
-    );
-    setNotice(
-      action === "accept"
-        ? `${invitation.roomName} invitation accepted`
-        : `${invitation.roomName} invitation declined`,
-    );
-    await refresh();
-  }
-
-  const groupedRooms = useMemo(() => {
-    const groups = new Map<string, RoomRecord[]>();
-    for (const room of rooms) {
-      const label =
-        room.sidebarGroup ||
-        (room.roomType === "direct" ? "Direct messages" : "Rooms");
-      groups.set(label, [...(groups.get(label) ?? []), room]);
-    }
-    return [...groups.entries()];
-  }, [rooms]);
-
-  return (
-    <AppShell>
-      <PageHeader
-        eyebrow="Configure"
-        title="Rooms"
-        description="Discover, join and govern organisation rooms without exposing private work."
-        actions={
-          <>
-            <Button
-              variant="outline"
-              onClick={() => setShowDirect((open) => !open)}
-            >
-              <MessageSquare /> New message
-            </Button>
-            <Button
-              variant="outline"
-              onClick={() => window.location.assign("/rooms/admin")}
-            >
-              <Users /> Administration
-            </Button>
-            <Button onClick={() => setShowCreate((open) => !open)}>
-              <Plus /> Create room
-            </Button>
-          </>
-        }
-      />
-      <div className="scroll-region min-h-0 flex-1 overflow-y-auto p-3 tablet:p-5">
-        <div className="mx-auto max-w-6xl space-y-4">
-          <section
-            aria-label="Room filters"
-            className="grid gap-3 rounded-lg border bg-[var(--color-paper-2)] p-3 tablet:grid-cols-[minmax(12rem,1fr)_repeat(3,auto)]"
-          >
-            <label className="relative">
-              <span className="sr-only">Search rooms</span>
-              <Search className="pointer-events-none absolute left-3 top-2.5 size-4 text-muted-foreground" />
-              <input
-                type="search"
-                value={query}
-                onChange={(event) => setQuery(event.target.value)}
-                placeholder="Search name, purpose or topic"
-                className="h-9 w-full rounded-md border bg-background pl-9 pr-3 text-xs outline-none focus:border-[var(--color-focus)]"
-              />
-            </label>
-            <label className="flex items-center gap-2 text-xs">
-              <span>Visibility</span>
-              <select
-                value={visibility}
-                onChange={(event) => setVisibility(event.target.value)}
-                className="h-9 rounded-md border bg-background px-2"
-              >
-                <option value="all">All</option>
-                <option value="organisation">Organisation</option>
-                <option value="private">Private</option>
-                <option value="restricted">Restricted</option>
-              </select>
-            </label>
-            <label className="flex items-center gap-2 text-xs">
-              <span>Membership</span>
-              <select
-                value={membership}
-                onChange={(event) => setMembership(event.target.value)}
-                className="h-9 rounded-md border bg-background px-2"
-              >
-                <option value="all">All visible</option>
-                <option value="joined">Joined</option>
-                <option value="available">Available</option>
-              </select>
-            </label>
-            <label className="flex min-h-9 items-center gap-2 text-xs">
-              <input
-                type="checkbox"
-                checked={includeArchived}
-                onChange={(event) => setIncludeArchived(event.target.checked)}
-                className="size-5"
-              />
-              Archived
-            </label>
-          </section>
-
-          {invitations.length > 0 && (
-            <section className="rounded-lg border border-[var(--color-accent)] bg-[var(--color-accent-soft)] p-4">
-              <h2 className="font-display text-sm font-bold">
-                Room invitations
-              </h2>
-              <div className="mt-3 space-y-2">
-                {invitations.map((invitation) => (
-                  <div
-                    key={invitation.id}
-                    className="flex flex-wrap items-center gap-2 rounded border bg-background p-3 text-xs"
-                  >
-                    <span className="min-w-0 flex-1">
-                      <span className="block font-semibold">
-                        {invitation.roomName}
-                      </span>
-                      <span className="text-muted-foreground">
-                        {invitation.membershipRole}
-                        {invitation.accessExpiresAt
-                          ? ` · expires ${new Date(
-                              invitation.accessExpiresAt,
-                            ).toLocaleString()}`
-                          : ""}
-                      </span>
-                    </span>
-                    <Button
-                      size="sm"
-                      onClick={() =>
-                        void respondInvitation(invitation, "accept")
-                      }
-                    >
-                      Accept
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      onClick={() =>
-                        void respondInvitation(invitation, "decline")
-                      }
-                    >
-                      Decline
-                    </Button>
-                  </div>
-                ))}
-              </div>
-            </section>
-          )}
-
-          {showCreate && (
-            <form
-              className="rounded-lg border bg-[var(--color-paper-2)] p-4"
-              onSubmit={(event) => {
-                event.preventDefault();
-                void createRoom(new FormData(event.currentTarget));
-              }}
-            >
-              <h2 className="font-display text-sm font-bold">Create room</h2>
-              <div className="mt-3 grid gap-3 tablet:grid-cols-2">
-                <label className="text-xs font-semibold">
-                  Name
-                  <input
-                    name="displayName"
-                    required
-                    minLength={2}
-                    maxLength={80}
-                    className="mt-1 h-9 w-full rounded-md border bg-background px-3 font-normal"
-                  />
-                </label>
-                <label className="text-xs font-semibold">
-                  Type
-                  <select
-                    name="roomType"
-                    className="mt-1 h-9 w-full rounded-md border bg-background px-3 font-normal"
-                  >
-                    {roomTypes.map((roomType) => (
-                      <option key={roomType} value={roomType}>
-                        {roomType}
-                      </option>
-                    ))}
-                  </select>
-                </label>
-                <label className="text-xs font-semibold">
-                  Visibility
-                  <select
-                    name="visibility"
-                    className="mt-1 h-9 w-full rounded-md border bg-background px-3 font-normal"
-                  >
-                    <option value="organisation">Organisation</option>
-                    <option value="private">Private</option>
-                    <option value="restricted">Restricted</option>
-                  </select>
-                </label>
-                <label className="text-xs font-semibold">
-                  Topic
-                  <input
-                    name="topic"
-                    maxLength={500}
-                    className="mt-1 h-9 w-full rounded-md border bg-background px-3 font-normal"
-                  />
-                </label>
-                <label className="text-xs font-semibold tablet:col-span-2">
-                  Purpose
-                  <textarea
-                    name="description"
-                    maxLength={2_000}
-                    rows={3}
-                    className="mt-1 w-full rounded-md border bg-background p-3 font-normal"
-                  />
-                </label>
-              </div>
-              <fieldset className="mt-3 flex flex-wrap gap-4 text-xs">
-                <legend className="mb-2 font-semibold">Room policy</legend>
-                {[
-                  ["guestInvites", "Guest invites"],
-                  ["agentInvites", "Agent invites"],
-                  ["memberInvites", "Member invites"],
-                  ["broadMentions", "Broad mentions"],
-                  ["exportAllowed", "Export"],
-                ].map(([name, label]) => (
-                  <label key={name} className="flex min-h-9 items-center gap-2">
-                    <input name={name} type="checkbox" className="size-5" />
-                    {label}
-                  </label>
-                ))}
-              </fieldset>
-              <div className="mt-4 flex gap-2">
-                <Button type="submit" disabled={busy === "create"}>
-                  {busy === "create" ? "Creating…" : "Create"}
-                </Button>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  onClick={() => setShowCreate(false)}
-                >
-                  Cancel
-                </Button>
-              </div>
-            </form>
-          )}
-
-          {showDirect && (
-            <section className="rounded-lg border bg-[var(--color-paper-2)] p-4">
-              <h2 className="font-display text-sm font-bold">
-                New direct or group message
-              </h2>
-              <p className="mt-1 text-xs text-muted-foreground">
-                The same participant set always reopens the same private
-                conversation.
-              </p>
-              <div className="mt-3 grid max-h-64 gap-2 overflow-y-auto tablet:grid-cols-2">
-                {directory.map((actor) => (
-                  <label
-                    key={actor.id}
-                    className="flex min-h-11 items-center gap-3 rounded border bg-background px-3 text-xs"
-                  >
-                    <input
-                      type="checkbox"
-                      className="size-5"
-                      checked={selectedActors.includes(actor.id)}
-                      onChange={(event) =>
-                        setSelectedActors((current) =>
-                          event.target.checked
-                            ? [...current, actor.id]
-                            : current.filter((id) => id !== actor.id),
-                        )
-                      }
-                    />
-                    <span className="min-w-0 flex-1">
-                      <span className="block truncate font-semibold">
-                        {actor.displayName}
-                      </span>
-                      <span className="block truncate text-muted-foreground">
-                        {actor.actorType === "agent"
-                          ? "Agent"
-                          : actor.jobTitle ||
-                            actor.team ||
-                            actor.timezone ||
-                            "Member"}
-                      </span>
-                    </span>
-                  </label>
-                ))}
-              </div>
-              <div className="mt-4 flex gap-2">
-                <Button
-                  onClick={() => void createDirect()}
-                  disabled={busy === "direct"}
-                >
-                  <MessageSquare />
-                  {busy === "direct" ? "Opening…" : "Open conversation"}
-                </Button>
-                <Button variant="ghost" onClick={() => setShowDirect(false)}>
-                  Cancel
-                </Button>
-              </div>
-            </section>
-          )}
-
-          {error && (
-            <p
-              role="alert"
-              className="rounded border border-[var(--color-error)] p-3 text-xs text-[var(--color-error)]"
-            >
-              {error}
-            </p>
-          )}
-          {notice && (
-            <p
-              role="status"
-              className="rounded border success-surface p-3 text-xs text-[var(--color-success)]"
-            >
-              {notice}
-            </p>
-          )}
-
-          {busy === "load" && rooms.length === 0 ? (
-            <div className="grid min-h-40 place-items-center text-xs text-muted-foreground">
-              <RefreshCw className="mb-2 size-5 animate-spin" />
-              Loading governed rooms
-            </div>
-          ) : groupedRooms.length === 0 ? (
-            <div className="rounded-lg border border-dashed p-10 text-center">
-              <Hash className="mx-auto size-6 text-muted-foreground" />
-              <p className="mt-2 text-sm font-semibold">No visible rooms</p>
-              <p className="mt-1 text-xs text-muted-foreground">
-                Private rooms only appear after an invitation is accepted.
-              </p>
-            </div>
-          ) : (
-            groupedRooms.map(([group, groupRooms]) => (
-              <section key={group}>
-                <h2 className="mb-2 text-xs font-bold uppercase tracking-wider text-muted-foreground">
-                  {group}
-                </h2>
-                <div className="grid gap-3 wide:grid-cols-2">
-                  {groupRooms.map((room) => (
-                    <article
-                      key={room.id}
-                      className={cn(
-                        "rounded-lg border bg-[var(--color-paper-2)] p-4",
-                        room.archivedAt && "opacity-70",
-                      )}
-                    >
-                      <div className="flex items-start gap-3">
-                        <span className="grid size-9 shrink-0 place-items-center rounded-md bg-muted">
-                          {room.roomType === "direct" ? (
-                            <MessageSquare className="size-4" />
-                          ) : room.visibility === "organisation" ? (
-                            <Hash className="size-4" />
-                          ) : (
-                            <LockKeyhole className="size-4" />
-                          )}
-                        </span>
-                        <div className="min-w-0 flex-1">
-                          <div className="flex flex-wrap items-center gap-2">
-                            <Link
-                              href={`/rooms/${room.slug}`}
-                              className="truncate font-display text-sm font-bold hover:underline"
-                            >
-                              {room.displayName}
-                            </Link>
-                            <Badge>{room.roomType}</Badge>
-                            {room.archivedAt && <Badge>Archived</Badge>}
-                          </div>
-                          <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
-                            {room.description ||
-                              room.topic ||
-                              "No purpose recorded"}
-                          </p>
-                          <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
-                            <span className="inline-flex items-center gap-1">
-                              <Users className="size-3" /> {room.memberCount}
-                            </span>
-                            <span>Owner: {room.owner || "Unassigned"}</span>
-                            <span>{room.visibility}</span>
-                          </div>
-                        </div>
-                      </div>
-                      <div className="mt-4 flex flex-wrap items-center gap-2 border-t pt-3">
-                        {room.membershipRole ? (
-                          <>
-                            <Button
-                              size="sm"
-                              variant={room.favourite ? "secondary" : "ghost"}
-                              aria-label={
-                                room.favourite
-                                  ? `Remove ${room.displayName} from starred`
-                                  : `Star ${room.displayName}`
-                              }
-                              onClick={() =>
-                                void sidebarAction(room, {
-                                  favourite: !room.favourite,
-                                })
-                              }
-                            >
-                              <Star
-                                className={cn(room.favourite && "fill-current")}
-                              />
-                            </Button>
-                            <Button
-                              size="sm"
-                              variant="ghost"
-                              aria-label={
-                                room.muted
-                                  ? `Unmute ${room.displayName}`
-                                  : `Mute ${room.displayName}`
-                              }
-                              onClick={() =>
-                                void sidebarAction(room, { muted: !room.muted })
-                              }
-                            >
-                              {room.muted ? <VolumeX /> : <Volume2 />}
-                            </Button>
-                            {room.membershipRole !== "owner" && (
-                              <Button
-                                size="sm"
-                                variant="ghost"
-                                onClick={() => void roomAction(room, "leave")}
-                              >
-                                Leave
-                              </Button>
-                            )}
-                            {(room.membershipRole === "owner" ||
-                              room.membershipRole === "moderator") && (
-                              <Button
-                                size="sm"
-                                variant="outline"
-                                onClick={() =>
-                                  void roomAction(
-                                    room,
-                                    room.archivedAt ? "restore" : "archive",
-                                  )
-                                }
-                              >
-                                <Archive />
-                                {room.archivedAt ? "Restore" : "Archive"}
-                              </Button>
-                            )}
-                          </>
-                        ) : (
-                          <Button
-                            size="sm"
-                            onClick={() => void roomAction(room, "join")}
-                            disabled={room.visibility !== "organisation"}
-                          >
-                            Join
-                          </Button>
-                        )}
-                      </div>
-                      {room.membershipRole && (
-                        <details className="mt-2 text-xs">
-                          <summary className="min-h-8 cursor-pointer py-2 text-muted-foreground">
-                            Sidebar group and order
-                          </summary>
-                          <form
-                            className="grid grid-cols-[1fr_6rem_auto] gap-2"
-                            onSubmit={(event) => {
-                              event.preventDefault();
-                              const form = new FormData(event.currentTarget);
-                              void sidebarAction(room, {
-                                sidebarGroup:
-                                  String(
-                                    form.get("sidebarGroup") ?? "",
-                                  ).trim() || null,
-                                sidebarPosition: Number(
-                                  form.get("sidebarPosition") ?? 0,
-                                ),
-                              });
-                            }}
-                          >
-                            <label>
-                              <span className="sr-only">Sidebar group</span>
-                              <input
-                                name="sidebarGroup"
-                                defaultValue={room.sidebarGroup ?? ""}
-                                maxLength={80}
-                                placeholder="Group"
-                                className="h-9 w-full rounded border bg-background px-2"
-                              />
-                            </label>
-                            <label>
-                              <span className="sr-only">Sidebar order</span>
-                              <input
-                                name="sidebarPosition"
-                                type="number"
-                                min={0}
-                                max={10_000}
-                                defaultValue={room.sidebarPosition ?? 0}
-                                className="h-9 w-full rounded border bg-background px-2"
-                              />
-                            </label>
-                            <Button type="submit" size="sm" variant="outline">
-                              Save
-                            </Button>
-                          </form>
-                        </details>
-                      )}
-                    </article>
-                  ))}
-                </div>
-              </section>
-            ))
-          )}
-        </div>
-      </div>
-    </AppShell>
-  );
-}
diff --git a/apps/web/components/search-view.tsx b/apps/web/components/search-view.tsx
deleted file mode 100644
index 0b7b94d..0000000
--- a/apps/web/components/search-view.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { FileSearch, Search, X } from "lucide-react";
-import { AppShell } from "@/components/app-shell";
-import { PageHeader } from "@/components/page-header";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { removeSearchFilter, type SearchFilterName } from "@/lib/search-query";
-
-interface SearchResult {
-  id: string;
-  type: string;
-  title: string;
-  roomId: string;
-  roomName: string;
-  roomSlug: string;
-  actorName: string | null;
-  createdAt: string;
-  rank: number;
-}
-
-interface ActiveFilter {
-  name: SearchFilterName;
-  value: string;
-  label: string;
-}
-
-interface SearchResponse {
-  data?: SearchResult[];
-  filters?: ActiveFilter[];
-  detail?: string;
-}
-
-export function SearchView() {
-  const [query, setQuery] = useState("");
-  const [submitted, setSubmitted] = useState("");
-  const [results, setResults] = useState<SearchResult[]>([]);
-  const [filters, setFilters] = useState<ActiveFilter[]>([]);
-  const [error, setError] = useState("");
-  const [loading, setLoading] = useState(false);
-  const requestSequence = useRef(0);
-
-  const search = useCallback(async (rawQuery: string) => {
-    const requestId = ++requestSequence.current;
-    const trimmed = rawQuery.trim();
-    setSubmitted(trimmed);
-    setError("");
-    if (!trimmed) {
-      setResults([]);
-      setFilters([]);
-      setLoading(false);
-      return;
-    }
-
-    setLoading(true);
-    try {
-      const response = await fetch(
-        `/api/v1/search?q=${encodeURIComponent(trimmed)}`,
-      );
-      const body = (await response.json()) as SearchResponse;
-      if (requestId !== requestSequence.current) return;
-      if (!response.ok) {
-        setResults([]);
-        setFilters([]);
-        setError(body.detail ?? "Search could not be completed.");
-        return;
-      }
-      setResults(body.data ?? []);
-      setFilters(body.filters ?? []);
-    } catch {
-      if (requestId !== requestSequence.current) return;
-      setResults([]);
-      setFilters([]);
-      setError("Search could not be completed. Check your connection.");
-    } finally {
-      if (requestId === requestSequence.current) setLoading(false);
-    }
-  }, []);
-
-  const navigate = useCallback(
-    (rawQuery: string, mode: "push" | "replace") => {
-      const trimmed = rawQuery.trim();
-      const url = trimmed
-        ? `/search?q=${encodeURIComponent(trimmed)}`
-        : "/search";
-      window.history[`${mode}State`]({}, "", url);
-      void search(trimmed);
-    },
-    [search],
-  );
-
-  useEffect(() => {
-    const initialQuery =
-      new URL(window.location.href).searchParams.get("q") ?? "";
-    setQuery(initialQuery);
-    void search(initialQuery);
-    const handlePopState = () => {
-      const restored =
-        new URL(window.location.href).searchParams.get("q") ?? "";
-      setQuery(restored);
-      void search(restored);
-    };
-    window.addEventListener("popstate", handlePopState);
-    return () => window.removeEventListener("popstate", handlePopState);
-  }, [search]);
-
-  return (
-    <AppShell>
-      <PageHeader
-        eyebrow="Operate"
-        title="Search"
-        description="Organisation-scoped, permission-filtered search"
-      />
-      <form
-        onSubmit={(event) => {
-          event.preventDefault();
-          navigate(query, "push");
-        }}
-        className="border-b bg-[var(--color-paper-2)] p-3"
-      >
-        <div className="flex gap-2">
-          <label className="flex h-10 min-w-0 flex-1 items-center gap-2 rounded-md border bg-background px-3">
-            <Search className="size-4 text-muted-foreground" />
-            <span className="sr-only">Search Muster</span>
-            <input
-              value={query}
-              onChange={(event) => setQuery(event.target.value)}
-              placeholder="Search or filter with from:, in:, after:, before:"
-              className="min-w-0 flex-1 bg-transparent text-sm outline-none"
-            />
-          </label>
-          <Button type="submit" disabled={loading}>
-            {loading ? "Searching…" : "Search"}
-          </Button>
-        </div>
-        {filters.length > 0 ? (
-          <div
-            className="mt-2 flex flex-wrap gap-2"
-            aria-label="Active search filters"
-          >
-            {filters.map((filter) => (
-              <button
-                key={filter.name}
-                type="button"
-                onClick={() => {
-                  const nextQuery = removeSearchFilter(query, filter.name);
-                  setQuery(nextQuery);
-                  navigate(nextQuery, "push");
-                }}
-                className="inline-flex items-center gap-1 rounded-full border bg-background px-2.5 py-1 text-xs font-medium"
-                aria-label={`Remove ${filter.name} filter`}
-              >
-                {filter.name}:{filter.label}
-                <X className="size-3" />
-              </button>
-            ))}
-          </div>
-        ) : null}
-      </form>
-      <div className="scroll-region min-h-0 flex-1 overflow-y-auto p-3 tablet:p-5">
-        <div className="mx-auto max-w-4xl">
-          {error ? (
-            <div
-              role="alert"
-              className="mb-3 border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive"
-            >
-              {error}
-            </div>
-          ) : null}
-          <p className="mb-3 text-xs text-muted-foreground" aria-live="polite">
-            {loading
-              ? "Searching permission-filtered activity…"
-              : `${results.length} permission-filtered result${results.length === 1 ? "" : "s"}`}
-            {!loading && submitted ? (
-              <>
-                {" "}
-                for <strong className="text-foreground">“{submitted}”</strong>
-              </>
-            ) : null}
-          </p>
-          {!loading && results.length > 0 ? (
-            <div
-              className="divide-y border bg-card"
-              data-testid="search-results"
-            >
-              {results.map((result) => (
-                <article
-                  key={`${result.type}-${result.id}`}
-                  className="hover-row p-4"
-                >
-                  <div className="flex flex-wrap items-center gap-2">
-                    <FileSearch className="size-4 text-muted-foreground" />
-                    <Badge className="bg-muted text-muted-foreground">
-                      {result.type}
-                    </Badge>
-                    <span className="text-xs text-muted-foreground">
-                      {result.roomName}
-                      {result.actorName ? ` · ${result.actorName}` : ""}
-                      {" · "}
-                      {new Date(result.createdAt).toLocaleString()}
-                    </span>
-                  </div>
-                  <h2 className="mt-2 text-sm font-semibold">{result.title}</h2>
-                </article>
-              ))}
-            </div>
-          ) : !loading && !error ? (
-            <div className="border border-dashed p-10 text-center">
-              <FileSearch className="mx-auto size-6 text-muted-foreground" />
-              <h2 className="mt-3 text-sm font-bold">
-                {submitted ? "No matching activity" : "Search your workspace"}
-              </h2>
-              <p className="mt-1 text-xs text-muted-foreground">
-                {submitted
-                  ? "Try different terms or remove a filter."
-                  : "Use text, from:, in:, after:, and before: filters."}
-              </p>
-            </div>
-          ) : null}
-        </div>
-      </div>
-    </AppShell>
-  );
-}
diff --git a/apps/web/components/visual-reaction-asset.tsx b/apps/web/components/visual-reaction-asset.tsx
deleted file mode 100644
index 327b4b9..0000000
--- a/apps/web/components/visual-reaction-asset.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { ImageOff } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-export type VisualReactionAssetData = {
-  id: string;
-  revisionId: string;
-  sha256: string;
-  altText: string;
-  frameCount?: number;
-  url?: string;
-};
-
-export function VisualReactionAsset({
-  asset,
-  compact = false,
-}: {
-  asset: VisualReactionAssetData;
-  compact?: boolean;
-}) {
-  const [failed, setFailed] = useState(false);
-  const src =
-    asset.url ??
-    `/api/v1/reaction-assets/${asset.id}?revision=${asset.revisionId}&digest=${asset.sha256}`;
-
-  if (failed) {
-    return (
-      <span
-        role="img"
-        aria-label={`${asset.altText}. Reaction unavailable.`}
-        className={cn(
-          "inline-flex items-center gap-1 rounded border border-dashed bg-muted text-xs text-muted-foreground",
-          compact ? "min-h-12 px-2 py-1" : "min-h-24 px-4 py-3",
-        )}
-      >
-        <ImageOff className="size-4" aria-hidden="true" />
-        Reaction unavailable
-      </span>
-    );
-  }
-
-  return (
-    <>
-      <img
-        src={src}
-        alt={asset.altText}
-        width={compact ? 56 : 160}
-        height={compact ? 56 : 160}
-        className={cn(
-          "object-contain",
-          compact ? "size-14" : "max-h-40 max-w-40",
-          (asset.frameCount ?? 1) > 1 && "motion-reduce:hidden",
-        )}
-        onError={() => setFailed(true)}
-      />
-      {(asset.frameCount ?? 1) > 1 && (
-        <span
-          role="img"
-          aria-label={`${asset.altText}. Animation paused for reduced motion.`}
-          className={cn(
-            "hidden items-center justify-center rounded border bg-muted text-center text-xs text-muted-foreground motion-reduce:inline-flex",
-            compact ? "size-14 p-1" : "min-h-24 min-w-32 p-3",
-          )}
-        >
-          {asset.altText}
-        </span>
-      )}
-    </>
-  );
-}
diff --git a/apps/web/lib/demo-data.ts b/apps/web/lib/demo-data.ts
index fc8b408..e7c1eeb 100644
--- a/apps/web/lib/demo-data.ts
+++ b/apps/web/lib/demo-data.ts
@@ -65,476 +65,8 @@ export type Severity = "critical" | "high" | "medium" | "low" | "informational";
 
 export const demoMode = process.env.NEXT_PUBLIC_MUSTER_DEMO_MODE === "true";
 
-export const demoOrganisation = demoMode
-  ? {
-      id: demoIds.organisation,
-      name: "Muster Demo Workspace",
-      slug: "muster-demo",
-    }
-  : {
-      id: starterIds.organisation,
-      name: "Muster Workspace",
-      slug: "muster",
-    };
-
-const demoPeopleRows = [
-  {
-    id: demoIds.actors.jordan,
-    name: "Jordan Blake",
-    initials: "JB",
-    role: "Security Lead",
-    presence: "online",
-    type: "human",
-  },
-  {
-    id: demoIds.actors.maya,
-    name: "Maya Chen",
-    initials: "MC",
-    role: "Senior Analyst",
-    presence: "online",
-    type: "human",
-  },
-  {
-    id: demoIds.actors.daniel,
-    name: "Daniel Brooks",
-    initials: "DB",
-    role: "Detection Engineer",
-    presence: "away",
-    type: "human",
-  },
-  {
-    id: demoIds.actors.priya,
-    name: "Priya Nair",
-    initials: "PN",
-    role: "Incident Responder",
-    presence: "online",
-    type: "human",
-  },
-  {
-    id: demoIds.actors.alex,
-    name: "Alex Morgan",
-    initials: "AM",
-    role: "Read-only Auditor",
-    presence: "offline",
-    type: "human",
-  },
-] as const;
-
-export const demoPeople = demoMode
-  ? demoPeopleRows
-  : ([
-      {
-        id: starterIds.actors.jordan,
-        name: "Muster Administrator",
-        initials: "MA",
-        role: "Administrator",
-        presence: "online",
-        type: "human",
-      },
-    ] as const);
-
-const starterAgents = [
-  {
-    id: demoIds.actors.triage,
-    name: "Triage Agent",
-    initials: "TA",
-    purpose: "Correlates alerts and recommends disposition.",
-    runtime: "Codex subscription",
-    model: "Configured Codex model",
-    status: "active",
-    owner: "Jordan Blake",
-    tools: ["alerts.read", "investigations.update", "knowledge.search"],
-    rooms: 4,
-    lastRun: "3 min ago",
-    successRate: "96.8%",
-    killSwitch: false,
-  },
-  {
-    id: demoIds.actors.tawnyHunt,
-    name: "Tawny Hunt Agent",
-    initials: "TH",
-    purpose: "Runs bounded endpoint telemetry hunts.",
-    runtime: "Codex subscription",
-    model: "Configured Codex model",
-    status: "running",
-    owner: "Priya Nair",
-    tools: ["tawny.telemetry.read", "tawny.hunts.execute"],
-    rooms: 3,
-    lastRun: "now",
-    successRate: "98.2%",
-    killSwitch: false,
-  },
-  {
-    id: demoIds.actors.bowerHealth,
-    name: "Bower Health Agent",
-    initials: "BH",
-    purpose: "Explains collector gaps and delivery posture.",
-    runtime: "Codex subscription",
-    model: "Configured Codex model",
-    status: "active",
-    owner: "Daniel Brooks",
-    tools: ["bower.fleet.read", "bower.policy.read"],
-    rooms: 2,
-    lastRun: "11 min ago",
-    successRate: "99.4%",
-    killSwitch: false,
-  },
-  {
-    id: demoIds.actors.kelpieCase,
-    name: "Kelpie Case Agent",
-    initials: "KC",
-    purpose: "Drafts and synchronises formal case context.",
-    runtime: "Codex subscription",
-    model: "Configured Codex model",
-    status: "active",
-    owner: "Jordan Blake",
-    tools: ["kelpie.cases.read", "kelpie.cases.create"],
-    rooms: 2,
-    lastRun: "18 min ago",
-    successRate: "97.1%",
-    killSwitch: false,
-  },
-  {
-    id: demoIds.actors.sentinelQuery,
-    name: "Sentinel Query Agent",
-    initials: "SQ",
-    purpose: "Builds and runs bounded KQL queries.",
-    runtime: "Codex subscription",
-    model: "Configured Codex model",
-    status: "active",
-    owner: "Daniel Brooks",
-    tools: ["sentinel.query.execute", "sentinel.rules.read"],
-    rooms: 3,
-    lastRun: "27 min ago",
-    successRate: "94.6%",
-    killSwitch: false,
-  },
-  {
-    id: demoIds.actors.threatIntel,
-    name: "Threat Intelligence Agent",
-    initials: "TI",
-    purpose: "Enriches indicators using approved sources.",
-    runtime: "Codex subscription",
-    model: "Configured Codex model",
-    status: "active",
-    owner: "Maya Chen",
-    tools: ["threat-intel.lookup", "knowledge.search"],
-    rooms: 4,
-    lastRun: "6 min ago",
-    successRate: "97.9%",
-    killSwitch: false,
-  },
-] as const;
-
-export const demoAgents = demoMode
-  ? starterAgents
-  : ([
-      {
-        id: starterIds.actors.triage,
-        name: "Alfie",
-        initials: "AL",
-        purpose:
-          "Researches threat news, vendor developments, and security platform changes.",
-        runtime: "Codex subscription",
-        model: "Configured Codex model",
-        status: "active",
-        owner: "Muster Administrator",
-        tools: ["alerts.read", "kelpie.cases.read", "sentinel.rules.read"],
-        rooms: 2,
-        lastRun: "Never",
-        successRate: "—",
-        killSwitch: false,
-      },
-      {
-        id: starterIds.actors.tawnyHunt,
-        name: "Jessie",
-        initials: "JE",
-        purpose:
-          "Runs bounded threat hunts, maps IoCs to TTPs, and guides analysts.",
-        runtime: "Codex subscription",
-        model: "Configured Codex model",
-        status: "active",
-        owner: "Muster Administrator",
-        tools: [
-          "tawny.telemetry.read",
-          "tawny.hunts.execute",
-          "sentinel.query.execute",
-        ],
-        rooms: 2,
-        lastRun: "Never",
-        successRate: "—",
-        killSwitch: false,
-      },
-      {
-        id: starterIds.actors.threatIntel,
-        name: "Parker",
-        initials: "PA",
-        purpose:
-          "Produces evidence-linked operational reports and executive briefings.",
-        runtime: "Codex subscription",
-        model: "Configured Codex model",
-        status: "active",
-        owner: "Muster Administrator",
-        tools: ["investigations.read", "kelpie.cases.read", "audit.read"],
-        rooms: 2,
-        lastRun: "Never",
-        successRate: "—",
-        killSwitch: false,
-      },
-    ] as const);
-
-const demoRoomRows = [
-  {
-    slug: "soc-operations",
-    name: "soc-operations",
-    topic: "Daily coordination, shift handover and operational updates",
-    unread: 8,
-    mentions: 2,
-    type: "operations",
-    favourite: true,
-  },
-  {
-    slug: "alerts",
-    name: "alerts",
-    topic: "Incoming security signals and triage discussion",
-    unread: 12,
-    mentions: 3,
-    type: "system",
-    favourite: true,
-  },
-  {
-    slug: "active-incidents",
-    name: "active-incidents",
-    topic: "Coordination for active security incidents",
-    unread: 4,
-    mentions: 1,
-    type: "incident",
-    favourite: true,
-  },
-  {
-    slug: "threat-intelligence",
-    name: "threat-intelligence",
-    topic: "Indicator enrichment and intelligence sharing",
-    unread: 0,
-    mentions: 0,
-    type: "operations",
-    favourite: false,
-  },
-  {
-    slug: "detection-engineering",
-    name: "detection-engineering",
-    topic: "Detection proposals, reviews and releases",
-    unread: 3,
-    mentions: 0,
-    type: "engineering",
-    favourite: false,
-  },
-  {
-    slug: "endpoint-security",
-    name: "endpoint-security",
-    topic: "Tawny detections, endpoint hunts and response",
-    unread: 0,
-    mentions: 0,
-    type: "operations",
-    favourite: false,
-  },
-  {
-    slug: "bower-telemetry-health",
-    name: "bower-telemetry-health",
-    topic: "Collector posture, source coverage and delivery health",
-    unread: 1,
-    mentions: 0,
-    type: "system",
-    favourite: false,
-  },
-  {
-    slug: "incident-KP-2026-0042",
-    name: "incident-KP-2026-0042",
-    topic: "Malicious PowerShell — credential access",
-    unread: 6,
-    mentions: 2,
-    type: "incident",
-    favourite: true,
-  },
-  {
-    slug: "investigation-suspicious-powershell",
-    name: "investigation-suspicious-powershell",
-    topic: "Correlating Bower identity signals with Tawny endpoint activity",
-    unread: 5,
-    mentions: 1,
-    type: "investigation",
-    favourite: true,
-  },
-] as const;
-
-export const demoRooms = demoMode
-  ? demoRoomRows
-  : ([
-      {
-        slug: "soc-operations",
-        name: "soc-operations",
-        topic: "Security operations coordination",
-        unread: 0,
-        mentions: 0,
-        type: "operations",
-        favourite: true,
-      },
-    ] as const);
-
-const demoDirectRoomRows = [
-  {
-    slug: "dm-maya-chen",
-    name: "Maya Chen",
-    topic: "Senior Analyst",
-    initials: "MC",
-    presence: "online",
-    agent: false,
-  },
-  {
-    slug: "dm-triage-agent",
-    name: "Triage Agent",
-    topic: "Correlates signals and recommends disposition",
-    initials: "TA",
-    presence: "online",
-    agent: true,
-  },
-  {
-    slug: "dm-tawny-hunt-agent",
-    name: "Tawny Hunt Agent",
-    topic: "Runs bounded endpoint telemetry hunts",
-    initials: "TH",
-    presence: "away",
-    agent: true,
-  },
-  {
-    slug: "dm-parker",
-    name: "Parker",
-    topic: "Operational reports and executive briefings",
-    initials: "PA",
-    presence: "online",
-    agent: true,
-  },
-] as const;
-
-export const demoDirectRooms = demoMode
-  ? demoDirectRoomRows
-  : ([
-      {
-        slug: "dm-alfie",
-        name: "Alfie",
-        topic: "Threat and technology research",
-        initials: "AL",
-        presence: "online",
-        agent: true,
-      },
-      {
-        slug: "dm-jessie",
-        name: "Jessie",
-        topic: "Threat hunting, enrichment, and analyst guidance",
-        initials: "JE",
-        presence: "online",
-        agent: true,
-      },
-      {
-        slug: "dm-parker",
-        name: "Parker",
-        topic: "Operational reports and executive briefings",
-        initials: "PA",
-        presence: "online",
-        agent: true,
-      },
-    ] as const);
-
 const activeIds = demoMode ? demoIds : starterIds;
 
-export const roomIdBySlug: Record<string, string> = {
-  "soc-operations": activeIds.rooms.soc,
-  "active-incidents": activeIds.rooms.activeIncidents,
-  "threat-intelligence": activeIds.rooms.threatIntel,
-  "detection-engineering": activeIds.rooms.detection,
-  "endpoint-security": activeIds.rooms.endpoint,
-  "bower-telemetry-health": activeIds.rooms.bower,
-  "incident-KP-2026-0042": activeIds.rooms.incident,
-  "investigation-suspicious-powershell": activeIds.rooms.investigation,
-  alerts: activeIds.rooms.alerts,
-  "dm-maya-chen": activeIds.rooms.mayaDirect,
-  "dm-triage-agent": activeIds.rooms.triageDirect,
-  "dm-tawny-hunt-agent": activeIds.rooms.tawnyDirect,
-  "dm-alfie": activeIds.rooms.triageDirect,
-  "dm-jessie": activeIds.rooms.tawnyDirect,
-  "dm-parker": activeIds.rooms.parkerDirect,
-};
-
-const demoAlertRows = [
-  {
-    id: "ALT-2026-1042",
-    severity: "critical" as Severity,
-    title: "Suspicious PowerShell with encoded command",
-    source: "Tawny",
-    rule: "Suspicious PowerShell execution",
-    entity: "WS-1042 · jsmith",
-    occurred: "16:21:08",
-    received: "16:21:11",
-    status: "investigating",
-    assignee: "Maya Chen",
-    correlations: 7,
-  },
-  {
-    id: "ALT-2026-1041",
-    severity: "high" as Severity,
-    title: "Repeated authentication failures from legacy portal",
-    source: "Bower",
-    rule: "Authentication failure burst",
-    entity: "jsmith · 203.0.113.44",
-    occurred: "16:18:39",
-    received: "16:18:43",
-    status: "promoted",
-    assignee: "Maya Chen",
-    correlations: 12,
-  },
-  {
-    id: "ALT-2026-1040",
-    severity: "high" as Severity,
-    title: "Impossible travel between Sydney and Frankfurt",
-    source: "Sentinel",
-    rule: "Identity impossible travel",
-    entity: "a.romero@example.invalid",
-    occurred: "15:57:12",
-    received: "15:59:02",
-    status: "new",
-    assignee: "Unassigned",
-    correlations: 3,
-  },
-  {
-    id: "ALT-2026-1039",
-    severity: "medium" as Severity,
-    title: "Unsigned binary created in user startup path",
-    source: "Tawny",
-    rule: "Persistence startup folder",
-    entity: "WS-1098 · lwu",
-    occurred: "15:44:50",
-    received: "15:44:55",
-    status: "acknowledged",
-    assignee: "Priya Nair",
-    correlations: 2,
-  },
-  {
-    id: "ALT-2026-1038",
-    severity: "low" as Severity,
-    title: "Bower collector policy hash drift",
-    source: "Bower",
-    rule: "Collector policy drift",
-    entity: "legacy-finance-au-02",
-    occurred: "15:31:03",
-    received: "15:31:29",
-    status: "new",
-    assignee: "Daniel Brooks",
-    correlations: 1,
-  },
-] as const;
-
-export const demoAlerts = demoMode ? demoAlertRows : [];
-
 export const activeInvestigation = {
   id: activeIds.investigation,
   number: "INV-2026-0178",
@@ -635,215 +167,6 @@ export const activeInvestigation = {
   ],
 } as const;
 
-const demoRoomTimeline = [
-  {
-    id: "msg-1",
-    type: "system",
-    time: "16:23",
-    title: "Investigation created",
-    body: "INV-2026-0178 created from ALT-2026-1041 and ALT-2026-1042.",
-  },
-  {
-    id: demoIds.messages.mayaParent,
-    type: "human",
-    author: "Maya Chen",
-    initials: "MC",
-    role: "Senior Analyst",
-    time: "16:24",
-    body: "The Bower and Tawny events share the same user and source IP. Starting with endpoint activity from 16:10 to 16:30.",
-    reactions: [{ emoji: "eyes", label: "Reviewing", count: 3 }],
-    replies: 3,
-  },
-  {
-    id: "msg-3",
-    type: "alert",
-    time: "16:25",
-    severity: "critical" as Severity,
-    title: "Suspicious PowerShell with encoded command",
-    body: "WS-1042 · jsmith · sigma-123 · 7 correlated events",
-    meta: "Tawny · ALT-2026-1042",
-  },
-  {
-    id: "msg-4",
-    type: "agent",
-    author: "Tawny Hunt Agent",
-    initials: "TH",
-    role: "Agent · Codex subscription",
-    time: "16:27",
-    body: "Hunt completed. Found a PowerShell process tree, two outbound connections, and one file write matching the investigation window.",
-    status: "completed",
-    confidence: 94,
-    tools: ["tawny.hunt", "tawny.process_tree", "tawny.network"],
-    evidence: 5,
-    reviewed: true,
-    replies: 2,
-  },
-  {
-    id: "msg-5",
-    type: "finding",
-    time: "16:29",
-    severity: "critical" as Severity,
-    title: "Encoded PowerShell retrieved second-stage content",
-    body: "Process, network, and file telemetry support malicious execution with 94% confidence.",
-    meta: "FND-87 · 5 evidence references · human reviewed",
-  },
-  {
-    id: demoIds.messages.priyaParent,
-    type: "human",
-    author: "Priya Nair",
-    initials: "PN",
-    role: "Incident Responder",
-    time: "16:31",
-    body: "Endpoint is still online. I support isolation, but preserve current sessions and memory acquisition status first.",
-    reactions: [{ emoji: "check", label: "Agreed", count: 2 }],
-    replies: 0,
-  },
-  {
-    id: "msg-7",
-    type: "approval",
-    time: "16:34",
-    severity: "high" as Severity,
-    title: "Approval required: isolate WS-1042",
-    body: "Stops network activity on a production finance endpoint. Existing sessions may terminate.",
-    meta: "Requested by Triage Agent · expires in 22 min · 1 approval required",
-    status: "pending",
-  },
-  {
-    id: "msg-8",
-    type: "case",
-    time: "16:37",
-    severity: "critical" as Severity,
-    title: "Kelpie case linked: KP-2026-0042",
-    body: "Credential access and endpoint execution, assigned to Priya Nair. Playbook: Compromised endpoint and identity.",
-    meta: "Kelpie mock · authoritative case lifecycle",
-  },
-] as const;
-
-export const roomTimeline = demoMode ? demoRoomTimeline : [];
-
-export const needsAttention = [
-  {
-    severity: "critical" as Severity,
-    title: "Suspicious PowerShell on WS-1042",
-    source: "Tawny",
-    owner: "Maya Chen",
-    age: "18 min",
-    state: "Investigating",
-    action: "Open",
-    href: "/rooms/investigation-suspicious-powershell",
-  },
-  {
-    severity: "high" as Severity,
-    title: "Endpoint isolation awaiting approval",
-    source: "Muster",
-    owner: "Jordan Blake",
-    age: "9 min",
-    state: "Pending",
-    action: "Review",
-    href: "/approvals",
-  },
-  {
-    severity: "high" as Severity,
-    title: "Collector legacy-finance-au-02 is stale",
-    source: "Bower",
-    owner: "Daniel Brooks",
-    age: "34 min",
-    state: "Degraded",
-    action: "Inspect",
-    href: "/integrations/bower",
-  },
-  {
-    severity: "medium" as Severity,
-    title: "Identity enrichment workflow stalled",
-    source: "Worker",
-    owner: "Unassigned",
-    age: "11 min",
-    state: "Retrying",
-    action: "Resume",
-    href: "/workflows/identity-enrichment",
-  },
-] as const;
-
-export const activeIncidents = [
-  {
-    case: "KP-2026-0042",
-    title: "Credential access and endpoint execution",
-    severity: "critical" as Severity,
-    state: "Containment",
-    commander: "Priya Nair",
-    age: "42 min",
-    activity: "2 min ago",
-    room: "incident-KP-2026-0042",
-    sla: "On track",
-  },
-  {
-    case: "KP-2026-0039",
-    title: "Exposed cloud service principal",
-    severity: "high" as Severity,
-    state: "Investigation",
-    commander: "Jordan Blake",
-    age: "3 h",
-    activity: "14 min ago",
-    room: "active-incidents",
-    sla: "38 min left",
-  },
-] as const;
-
-export const investigationQueue = [
-  {
-    number: "INV-2026-0178",
-    title: activeInvestigation.title,
-    severity: "critical" as Severity,
-    lead: "Maya Chen",
-    alerts: 2,
-    agents: 4,
-    activity: "2 min ago",
-    recommendation: "Promote",
-  },
-  {
-    number: "INV-2026-0177",
-    title: "Impossible travel for privileged identity",
-    severity: "high" as Severity,
-    lead: "Unassigned",
-    alerts: 3,
-    agents: 1,
-    activity: "19 min ago",
-    recommendation: "Investigate",
-  },
-  {
-    number: "INV-2026-0174",
-    title: "Unsigned persistence artefact",
-    severity: "medium" as Severity,
-    lead: "Priya Nair",
-    alerts: 1,
-    agents: 2,
-    activity: "1 h ago",
-    recommendation: "Monitor",
-  },
-] as const;
-
-export const platformHealth = [
-  { name: "Muster worker", status: "healthy", detail: "9 queues active" },
-  { name: "PostgreSQL", status: "healthy", detail: "18 ms" },
-  { name: "Redis", status: "healthy", detail: "6 ms" },
-  { name: "Object storage", status: "healthy", detail: "MinIO · mock" },
-  { name: "Agent gateway", status: "healthy", detail: "3 runtimes" },
-  { name: "Kelpie", status: "healthy", detail: "Mock · 42 ms" },
-  { name: "Tawny", status: "healthy", detail: "Mock · 57 ms" },
-  { name: "Bower", status: "degraded", detail: "1 stale collector" },
-  { name: "Sentinel", status: "healthy", detail: "Mock · 83 ms" },
-] as const;
-
-export const operationsTrend = [
-  { time: "10:00", alerts: 11, investigations: 2 },
-  { time: "11:00", alerts: 18, investigations: 4 },
-  { time: "12:00", alerts: 14, investigations: 3 },
-  { time: "13:00", alerts: 27, investigations: 6 },
-  { time: "14:00", alerts: 21, investigations: 5 },
-  { time: "15:00", alerts: 32, investigations: 7 },
-  { time: "16:00", alerts: 24, investigations: 5 },
-] as const;
-
 export const workflows = [
   {
     id: "suspicious-powershell-triage",
@@ -1045,48 +368,3 @@ export const integrationData = {
     ],
   },
 } as const;
-
-const demoSearchResults = [
-  {
-    group: "Messages",
-    title: "Encoded PowerShell retrieved second-stage content",
-    context: "#investigation-suspicious-powershell · Tawny Hunt Agent",
-    snippet:
-      "Found a PowerShell process tree, two outbound connections, and one file write…",
-  },
-  {
-    group: "Alerts",
-    title: "ALT-2026-1042 · Suspicious PowerShell with encoded command",
-    context: "Tawny · critical · WS-1042",
-    snippet:
-      "Sigma rule sigma-123 matched powershell.exe with encoded command line.",
-  },
-  {
-    group: "Investigations",
-    title: "INV-2026-0178 · Legacy portal credential access",
-    context: "Awaiting approval · Maya Chen",
-    snippet:
-      "Bower authentication failures and Tawny endpoint activity correlate on jsmith…",
-  },
-  {
-    group: "Cases",
-    title: "KP-2026-0042 · Credential access and endpoint execution",
-    context: "Kelpie · Containment · Priya Nair",
-    snippet: "Formal incident linked to INV-2026-0178.",
-  },
-  {
-    group: "Findings",
-    title: "FND-87 · Encoded PowerShell retrieved content",
-    context: "94% confidence · 5 evidence references",
-    snippet:
-      "Contacted cdn-auth-check.example and wrote update.dat before execution.",
-  },
-  {
-    group: "Evidence",
-    title: "WS-1042-process-tree.json",
-    context: "SHA-256 68b3…91ad · restricted",
-    snippet: "Tawny endpoint evidence · scan clean · object lock enabled.",
-  },
-] as const;
-
-export const searchResults = demoMode ? demoSearchResults : [];