diff --git a/surfsense_web/app/(home)/[slug]/page.tsx b/surfsense_web/app/(home)/[slug]/page.tsx
new file mode 100644
index 000000000..94a7912f7
--- /dev/null
+++ b/surfsense_web/app/(home)/[slug]/page.tsx
@@ -0,0 +1,94 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { ConnectorPage } from "@/components/connectors-marketing/connector-page";
+import { FAQJsonLd, JsonLd } from "@/components/seo/json-ld";
+import { getAllConnectorSlugs, getConnector } from "@/lib/connectors-marketing";
+
+interface PageProps {
+	params: Promise<{ slug: string }>;
+}
+
+// Only the known connector slugs are served; every other path falls through to 404.
+export const dynamicParams = false;
+
+export function generateStaticParams() {
+	return getAllConnectorSlugs().map((slug) => ({ slug }));
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+	const { slug } = await params;
+	const content = getConnector(slug);
+	if (!content) return { title: "Connector Not Found | SurfSense" };
+
+	const canonicalUrl = `https://www.surfsense.com/${content.slug}`;
+
+	return {
+		title: content.metaTitle,
+		description: content.metaDescription,
+		keywords: content.keywords,
+		alternates: { canonical: canonicalUrl },
+		openGraph: {
+			title: content.metaTitle,
+			description: content.metaDescription,
+			url: canonicalUrl,
+			siteName: "SurfSense",
+			type: "website",
+			images: [
+				{
+					url: "/og-image.png",
+					width: 1200,
+					height: 630,
+					alt: `${content.name} Scraper API on SurfSense`,
+				},
+			],
+		},
+		twitter: {
+			card: "summary_large_image",
+			title: content.metaTitle,
+			description: content.metaDescription,
+			images: ["/og-image.png"],
+		},
+	};
+}
+
+export default async function ConnectorMarketingPage({ params }: PageProps) {
+	const { slug } = await params;
+	const content = getConnector(slug);
+	if (!content) notFound();
+
+	const canonicalUrl = `https://www.surfsense.com/${content.slug}`;
+
+	return (
+		<>
+			<JsonLd
+				data={{
+					"@context": "https://schema.org",
+					"@type": "SoftwareApplication",
+					name: `${content.name} Scraper API`,
+					applicationCategory: "DeveloperApplication",
+					operatingSystem: "Web, API",
+					description: content.metaDescription,
+					url: canonicalUrl,
+					offers: {
+						"@type": "Offer",
+						price: "0",
+						priceCurrency: "USD",
+						description: "Free tier included",
+					},
+					provider: {
+						"@type": "Organization",
+						name: "SurfSense",
+						url: "https://www.surfsense.com",
+					},
+					isPartOf: {
+						"@type": "WebSite",
+						name: "SurfSense",
+						url: "https://www.surfsense.com",
+					},
+				}}
+			/>
+			<FAQJsonLd questions={content.faq} />
+			<ConnectorPage content={content} />
+		</>
+	);
+}
diff --git a/surfsense_web/app/(home)/connectors/page.tsx b/surfsense_web/app/(home)/connectors/page.tsx
new file mode 100644
index 000000000..06fc4e4aa
--- /dev/null
+++ b/surfsense_web/app/(home)/connectors/page.tsx
@@ -0,0 +1,100 @@
+import { ArrowRight, Plug } from "lucide-react";
+import type { Metadata } from "next";
+import Link from "next/link";
+import { getAllConnectors } from "@/lib/connectors-marketing";
+
+const canonicalUrl = "https://www.surfsense.com/connectors";
+
+const metaDescription =
+	"Platform-native scraper APIs for AI agents. Pull live data from the platforms your market uses through one typed API or the SurfSense MCP server. Explore every connector.";
+
+export const metadata: Metadata = {
+	title: "Scraper APIs for AI Agents: All Connectors | SurfSense",
+	description: metaDescription,
+	keywords: [
+		"scraper api",
+		"web scraping api",
+		"scraper api for ai agents",
+		"data connectors",
+		"mcp server",
+		"competitive intelligence platform",
+	],
+	alternates: { canonical: canonicalUrl },
+	openGraph: {
+		title: "Scraper APIs for AI Agents: All Connectors | SurfSense",
+		description: metaDescription,
+		url: canonicalUrl,
+		siteName: "SurfSense",
+		type: "website",
+		images: [{ url: "/og-image.png", width: 1200, height: 630, alt: "SurfSense connectors" }],
+	},
+};
+
+export default function ConnectorsIndexPage() {
+	const connectors = getAllConnectors();
+
+	return (
+		<div className="pt-28 pb-16 sm:pt-32">
+			<div className="mx-auto w-full max-w-7xl px-2 md:px-8 xl:px-0">
+				<header className="max-w-2xl">
+					<h1 className="text-3xl font-bold tracking-tight text-balance sm:text-4xl lg:text-5xl">
+						Connectors for every platform your market uses
+					</h1>
+					<p className="mt-5 text-base leading-relaxed text-muted-foreground sm:text-lg">
+						Each connector is a platform-native scraper API your AI agents can call directly, or
+						through the SurfSense MCP server. They are the live data behind the SurfSense{" "}
+						<Link href="/" className="font-medium text-foreground underline underline-offset-4">
+							competitive intelligence platform
+						</Link>
+						.
+					</p>
+				</header>
+
+				<div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+					{connectors.map((connector) => {
+						const Icon = connector.icon;
+						return (
+							<Link
+								key={connector.slug}
+								href={`/${connector.slug}`}
+								className="group flex flex-col rounded-xl border bg-card p-6 transition-colors hover:border-brand/40"
+							>
+								<span className="flex size-11 items-center justify-center rounded-lg border bg-muted/40 transition-transform duration-200 ease-out group-hover:scale-110 motion-reduce:transition-none motion-reduce:group-hover:scale-100">
+									<Icon className="size-5 text-foreground" />
+								</span>
+								<h2 className="mt-4 text-lg font-semibold">
+									{connector.cardTitle ?? `${connector.name} API`}
+								</h2>
+								<p className="mt-2 flex-1 text-sm leading-relaxed text-muted-foreground line-clamp-4">
+									{connector.heroLede}
+								</p>
+								<span className="mt-4 inline-flex items-center gap-1 text-sm font-medium text-foreground">
+									Explore
+									<ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
+								</span>
+							</Link>
+						);
+					})}
+					{/* Bespoke page (not in the scrape-API registry): SurfSense as an MCP client. */}
+					<Link
+						href="/mcp-connector"
+						className="group flex flex-col rounded-xl border bg-card p-6 transition-colors hover:border-brand/40"
+					>
+						<span className="flex size-11 items-center justify-center rounded-lg border bg-muted/40 transition-transform duration-200 ease-out group-hover:scale-110 motion-reduce:transition-none motion-reduce:group-hover:scale-100">
+							<Plug className="size-5 text-foreground" />
+						</span>
+						<h2 className="mt-4 text-lg font-semibold">MCP Connector</h2>
+						<p className="mt-2 flex-1 text-sm leading-relaxed text-muted-foreground line-clamp-4">
+							Bring any MCP server to your agents. Paste a config like you would in Cursor, tools
+							are auto-discovered, and Notion, Slack, Jira, and more connect with one-click OAuth.
+						</p>
+						<span className="mt-4 inline-flex items-center gap-1 text-sm font-medium text-foreground">
+							Explore
+							<ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
+						</span>
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/surfsense_web/app/(home)/mcp-connector/page.tsx b/surfsense_web/app/(home)/mcp-connector/page.tsx
new file mode 100644
index 000000000..7059025b4
--- /dev/null
+++ b/surfsense_web/app/(home)/mcp-connector/page.tsx
@@ -0,0 +1,369 @@
+import { IconBrandGithub } from "@tabler/icons-react";
+import { ArrowRight, Check, Plug, ShieldCheck, Wrench } from "lucide-react";
+import type { Metadata } from "next";
+import Link from "next/link";
+import { ConnectorFaq } from "@/components/connectors-marketing/connector-faq";
+import { Reveal } from "@/components/connectors-marketing/reveal";
+import { MarketingSection } from "@/components/marketing/section";
+import { BreadcrumbNav } from "@/components/seo/breadcrumb-nav";
+import { FAQJsonLd, JsonLd } from "@/components/seo/json-ld";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import type { FaqItem } from "@/lib/connectors-marketing/types";
+
+const canonicalUrl = "https://www.surfsense.com/mcp-connector";
+
+const metaDescription =
+	"The SurfSense MCP connector lets your AI agents use any MCP server. Paste a config, tools are auto-discovered, and every call runs with per-tool approval. Try it free.";
+
+export const metadata: Metadata = {
+	title: "MCP Connector for AI Agents: Add Any MCP Server | SurfSense",
+	description: metaDescription,
+	keywords: [
+		"mcp connector",
+		"what is an mcp connector",
+		"mcp client",
+		"add mcp server",
+		"connect mcp server",
+		"mcp integrations",
+		"mcp server for ai agents",
+	],
+	alternates: { canonical: canonicalUrl },
+	openGraph: {
+		title: "MCP Connector for AI Agents: Add Any MCP Server | SurfSense",
+		description: metaDescription,
+		url: canonicalUrl,
+		siteName: "SurfSense",
+		type: "website",
+		images: [{ url: "/og-image.png", width: 1200, height: 630, alt: "SurfSense MCP connector" }],
+	},
+	twitter: {
+		card: "summary_large_image",
+		title: "MCP Connector for AI Agents: Add Any MCP Server | SurfSense",
+		description: metaDescription,
+		images: ["/og-image.png"],
+	},
+};
+
+/* Mirrors the real server_config contract (stdio + HTTP transports). */
+const STDIO_CONFIG = `{
+  "command": "npx",
+  "args": ["-y", "@modelcontextprotocol/server-filesystem", "/data"],
+  "env": { "LOG_LEVEL": "info" },
+  "transport": "stdio"
+}`;
+
+const HTTP_CONFIG = `{
+  "url": "https://mcp.example.com/mcp",
+  "headers": { "Authorization": "Bearer <token>" },
+  "transport": "streamable-http"
+}`;
+
+const STEPS = [
+	{
+		icon: Plug,
+		title: "Paste a server config",
+		description:
+			"Add any MCP server the same way you would in Cursor: a local command for stdio servers, or a URL and headers for remote HTTP and SSE servers.",
+	},
+	{
+		icon: Wrench,
+		title: "Tools are auto-discovered",
+		description:
+			"SurfSense tests the connection and pulls the full tool list from the server. No manual tool configuration, no schema files to maintain.",
+	},
+	{
+		icon: ShieldCheck,
+		title: "Your agent uses them, safely",
+		description:
+			"Read-only tools run automatically. Anything that writes asks for your approval first, and you can trust a tool once to always allow it.",
+	},
+] as const;
+
+/** Hosted MCP apps with one-click OAuth (mirrors the backend MCP service registry). */
+const ONE_CLICK_APPS = [
+	"Notion",
+	"Slack",
+	"Jira",
+	"Confluence",
+	"Linear",
+	"ClickUp",
+	"Airtable",
+] as const;
+
+const FAQ: FaqItem[] = [
+	{
+		question: "What is an MCP connector?",
+		answer:
+			"An MCP connector links an AI application to an MCP (Model Context Protocol) server, so the app's agents can call the server's tools. In SurfSense, you add a server config once, its tools are auto-discovered, and every agent in your workspace can use them with per-tool approval.",
+	},
+	{
+		question: "How is an MCP connector different from an MCP server?",
+		answer:
+			"An MCP server exposes tools; an MCP connector consumes them. This page covers SurfSense acting as the client: plugging outside MCP servers into your agents. SurfSense also ships its own MCP server, which exposes connectors like Reddit and Google Maps as tools inside Claude, Cursor, or any MCP client.",
+	},
+	{
+		question: "Which MCP transports are supported?",
+		answer:
+			"All the common ones. Local stdio servers run as a process with a command, args, and environment variables. Remote servers connect over streamable HTTP, plain HTTP, or SSE with a URL and optional headers, which covers hosted MCP servers that require an auth token.",
+	},
+	{
+		question: "Is it safe to give an agent MCP tools?",
+		answer:
+			"Every MCP tool runs through SurfSense's permission layer. Read-only tools are allowed automatically, while any tool that can write or act asks for your approval before it executes. You can mark tools you rely on as trusted so they skip the prompt on later calls.",
+	},
+	{
+		question: "Can I connect Notion or Slack without writing a config?",
+		answer:
+			"Yes. Notion, Slack, Jira, Confluence, Linear, ClickUp, and Airtable connect through their official hosted MCP servers with one-click OAuth. SurfSense handles the token exchange and curates each app's tool list, so you sign in once and your agents can use them immediately.",
+	},
+];
+
+function ConfigCard() {
+	return (
+		<div className="rounded-xl border bg-card p-5 shadow-sm">
+			<p className="font-mono text-xs text-muted-foreground">Local server (stdio)</p>
+			<pre className="mt-2 overflow-x-auto rounded-lg bg-muted/50 p-4 font-mono text-xs leading-relaxed">
+				{STDIO_CONFIG}
+			</pre>
+			<p className="mt-4 font-mono text-xs text-muted-foreground">Remote server (HTTP / SSE)</p>
+			<pre className="mt-2 overflow-x-auto rounded-lg bg-muted/50 p-4 font-mono text-xs leading-relaxed">
+				{HTTP_CONFIG}
+			</pre>
+			<p className="mt-3 flex items-center gap-1.5 text-xs text-muted-foreground">
+				<Check className="size-3.5 text-brand" aria-hidden />
+				Tools auto-discovered on connect
+			</p>
+		</div>
+	);
+}
+
+export default function McpConnectorPage() {
+	return (
+		<>
+			<JsonLd
+				data={{
+					"@context": "https://schema.org",
+					"@type": "SoftwareApplication",
+					name: "SurfSense MCP Connector",
+					applicationCategory: "DeveloperApplication",
+					operatingSystem: "Web",
+					description: metaDescription,
+					url: canonicalUrl,
+					offers: {
+						"@type": "Offer",
+						price: "0",
+						priceCurrency: "USD",
+						description: "Free tier included",
+					},
+					provider: {
+						"@type": "Organization",
+						name: "SurfSense",
+						url: "https://www.surfsense.com",
+					},
+					isPartOf: { "@type": "WebSite", name: "SurfSense", url: "https://www.surfsense.com" },
+				}}
+			/>
+			<FAQJsonLd questions={FAQ} />
+
+			<div className="pb-4">
+				{/* Hero */}
+				<MarketingSection className="pt-28 pb-12 sm:pt-32 sm:pb-16">
+					<div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-14">
+						<div>
+							<BreadcrumbNav
+								className="mb-6"
+								items={[
+									{ name: "Connectors", href: "/connectors" },
+									{ name: "MCP Connector", href: "/mcp-connector" },
+								]}
+							/>
+							<Badge variant="outline" className="mb-5 gap-1.5 py-1">
+								<Plug className="size-3.5" />
+								MCP connector
+							</Badge>
+							<h1 className="text-3xl font-bold tracking-tight text-balance sm:text-4xl lg:text-5xl">
+								Bring any MCP server to your AI agents
+							</h1>
+							<p className="mt-5 max-w-xl text-base leading-relaxed text-muted-foreground sm:text-lg">
+								The SurfSense MCP connector turns your workspace into an MCP client. Add any MCP
+								server with the same config you'd use in Cursor, and its tools are auto-discovered
+								and handed to your agents, guarded by per-tool approval. Notion, Slack, Jira, and
+								more connect with one-click OAuth.
+							</p>
+							<div className="mt-8 flex flex-wrap items-center gap-3">
+								<Button asChild size="lg">
+									<Link href="/register">
+										Start for free
+										<ArrowRight className="size-4" />
+									</Link>
+								</Button>
+								<Button asChild variant="outline" size="lg">
+									<Link href="/docs">Read the docs</Link>
+								</Button>
+								<Button asChild variant="ghost" size="lg">
+									<Link
+										href="https://github.com/MODSetter/SurfSense"
+										target="_blank"
+										rel="noopener noreferrer"
+									>
+										<IconBrandGithub className="size-4" />
+										GitHub
+									</Link>
+								</Button>
+							</div>
+						</div>
+						<ConfigCard />
+					</div>
+				</MarketingSection>
+
+				{/* How it works */}
+				<MarketingSection>
+					<Reveal>
+						<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
+							From config to agent tool in three steps
+						</h2>
+					</Reveal>
+					<div className="mt-8 grid gap-4 sm:grid-cols-3">
+						{STEPS.map((step) => (
+							<Reveal key={step.title}>
+								<div className="h-full rounded-xl border bg-card p-6 transition-colors hover:border-brand/40">
+									<span className="flex size-10 items-center justify-center rounded-lg border bg-muted/40">
+										<step.icon className="size-5 text-foreground" aria-hidden />
+									</span>
+									<h3 className="mt-4 font-semibold">{step.title}</h3>
+									<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+										{step.description}
+									</p>
+								</div>
+							</Reveal>
+						))}
+					</div>
+				</MarketingSection>
+
+				{/* One-click apps */}
+				<MarketingSection>
+					<Reveal>
+						<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
+							Your work apps, no config required
+						</h2>
+						<p className="mt-3 max-w-2xl text-muted-foreground leading-relaxed">
+							These apps run on their official hosted MCP servers. Sign in once with OAuth and
+							SurfSense manages the tokens and curates each tool list, so your agents can search
+							Notion, read Slack threads, or file Jira issues alongside your market intelligence.
+						</p>
+					</Reveal>
+					<Reveal>
+						<div className="mt-8 flex flex-wrap gap-2">
+							{ONE_CLICK_APPS.map((app) => (
+								<span
+									key={app}
+									className="inline-flex items-center gap-1.5 rounded-full border bg-card px-4 py-2 text-sm font-medium"
+								>
+									<Check className="size-3.5 text-brand" aria-hidden />
+									{app}
+								</span>
+							))}
+						</div>
+					</Reveal>
+				</MarketingSection>
+
+				{/* Connector vs server */}
+				<MarketingSection>
+					<Reveal>
+						<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
+							MCP connector vs MCP server
+						</h2>
+						<p className="mt-3 max-w-2xl text-muted-foreground leading-relaxed">
+							They are two sides of the same protocol. The MCP connector on this page makes
+							SurfSense a <em>client</em>: it consumes tools from outside MCP servers. The SurfSense
+							MCP <em>server</em> does the reverse, exposing platform connectors like{" "}
+							<Link
+								href="/reddit"
+								className="font-medium text-foreground underline underline-offset-4"
+							>
+								Reddit
+							</Link>{" "}
+							and{" "}
+							<Link
+								href="/google-maps"
+								className="font-medium text-foreground underline underline-offset-4"
+							>
+								Google Maps
+							</Link>{" "}
+							as native tools inside Claude, Cursor, or any agent you already run. Use both and data
+							flows in either direction.
+						</p>
+					</Reveal>
+				</MarketingSection>
+
+				{/* FAQ */}
+				<MarketingSection>
+					<Reveal>
+						<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
+							MCP connector: frequently asked questions
+						</h2>
+					</Reveal>
+					<Reveal>
+						<div className="mt-6 max-w-3xl">
+							<ConnectorFaq items={FAQ} />
+						</div>
+					</Reveal>
+				</MarketingSection>
+
+				{/* Closing CTA + related */}
+				<MarketingSection>
+					<Reveal>
+						<div className="rounded-2xl border bg-card p-8 text-center sm:p-12">
+							<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
+								Give your agents every tool they need
+							</h2>
+							<p className="mx-auto mt-3 max-w-xl text-muted-foreground leading-relaxed">
+								The MCP connector is part of the SurfSense{" "}
+								<Link href="/" className="font-medium text-foreground underline underline-offset-4">
+									competitive intelligence platform
+								</Link>
+								. Start free, no credit card required.
+							</p>
+							<div className="mt-7 flex flex-wrap justify-center gap-3">
+								<Button asChild size="lg">
+									<Link href="/register">
+										Start for free
+										<ArrowRight className="size-4" />
+									</Link>
+								</Button>
+								<Button asChild variant="outline" size="lg">
+									<Link href="/pricing">See pricing</Link>
+								</Button>
+							</div>
+
+							<Separator className="my-8" />
+
+							<nav aria-label="Other connectors" className="flex flex-wrap justify-center gap-2">
+								<Button asChild variant="ghost" size="sm">
+									<Link href="/connectors">All connectors</Link>
+								</Button>
+								<Button asChild variant="ghost" size="sm">
+									<Link href="/reddit">Reddit API</Link>
+								</Button>
+								<Button asChild variant="ghost" size="sm">
+									<Link href="/youtube">YouTube API</Link>
+								</Button>
+								<Button asChild variant="ghost" size="sm">
+									<Link href="/google-maps">Google Maps API</Link>
+								</Button>
+								<Button asChild variant="ghost" size="sm">
+									<Link href="/google-search">SERP API</Link>
+								</Button>
+								<Button asChild variant="ghost" size="sm">
+									<Link href="/web-crawl">Web Crawl API</Link>
+								</Button>
+							</nav>
+						</div>
+					</Reveal>
+				</MarketingSection>
+			</div>
+		</>
+	);
+}
diff --git a/surfsense_web/app/(home)/page.tsx b/surfsense_web/app/(home)/page.tsx
index 367ef2dc5..94dc419b2 100644
--- a/surfsense_web/app/(home)/page.tsx
+++ b/surfsense_web/app/(home)/page.tsx
@@ -1,29 +1,23 @@
-import dynamic from "next/dynamic";
 import { AuthRedirect } from "@/components/homepage/auth-redirect";
-import { FeaturesBentoGrid } from "@/components/homepage/features-bento-grid";
-import { FeaturesCards } from "@/components/homepage/features-card";
+import { CommunityStrip } from "@/components/homepage/community-strip";
+import { CompareTable } from "@/components/homepage/compare-table";
+import { ConnectorGrid } from "@/components/homepage/connector-grid";
 import { HeroSection } from "@/components/homepage/hero-section";
-
-const WhySurfSense = dynamic(() =>
-	import("@/components/homepage/why-surfsense").then((m) => ({ default: m.WhySurfSense }))
-);
-
-const ExternalIntegrations = dynamic(() => import("@/components/homepage/integrations"));
-
-const CTAHomepage = dynamic(() =>
-	import("@/components/homepage/cta").then((m) => ({ default: m.CTAHomepage }))
-);
+import { HomeFaq } from "@/components/homepage/home-faq";
+import { HowItWorks } from "@/components/homepage/how-it-works";
+import { UseCasesRow } from "@/components/homepage/use-cases";
 
 export default function HomePage() {
 	return (
-		<div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 text-gray-900 dark:from-black dark:to-gray-900 dark:text-white">
+		<div className="min-h-screen bg-linear-to-b from-gray-50 to-gray-100 text-gray-900 dark:from-black dark:to-gray-900 dark:text-white">
 			<AuthRedirect />
 			<HeroSection />
-			<WhySurfSense />
-			<FeaturesCards />
-			<FeaturesBentoGrid />
-			<ExternalIntegrations />
-			<CTAHomepage />
+			<ConnectorGrid />
+			<HowItWorks />
+			<UseCasesRow />
+			<CompareTable />
+			<HomeFaq />
+			<CommunityStrip />
 		</div>
 	);
 }
diff --git a/surfsense_web/app/dashboard/[search_space_id]/artifacts/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/artifacts/page.tsx
deleted file mode 100644
index 8f8109156..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/artifacts/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client";
-
-import { useParams } from "next/navigation";
-import { ArtifactsLibrary } from "@/features/artifacts-library";
-
-export default function ArtifactsPage() {
-	const params = useParams();
-	const searchSpaceId = Number(params.search_space_id);
-
-	return <ArtifactsLibrary searchSpaceId={searchSpaceId} />;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/automation-detail-content.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/automation-detail-content.tsx
deleted file mode 100644
index 4085d47a8..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/automation-detail-content.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-"use client";
-import { ShieldAlert } from "lucide-react";
-import { useAutomation } from "@/hooks/use-automation";
-import { useAutomationPermissions } from "../hooks/use-automation-permissions";
-import { AutomationDefinitionSection } from "./components/automation-definition-section";
-import { AutomationDetailHeader } from "./components/automation-detail-header";
-import { AutomationDetailLoading } from "./components/automation-detail-loading";
-import { AutomationNotFound } from "./components/automation-not-found";
-import { AutomationRunsSection } from "./components/automation-runs-section";
-import { AutomationTriggersSection } from "./components/automation-triggers-section";
-
-interface AutomationDetailContentProps {
-	searchSpaceId: number;
-	automationId: number;
-}
-
-/**
- * Client orchestrator for one automation's detail view. Branches:
- *   - permissions loading → skeleton
- *   - no read permission → access denied panel
- *   - bad id (NaN) → not-found panel
- *   - detail fetching → skeleton
- *   - detail error / null → not-found panel (we don't distinguish 404
- *     from 403 in the UI)
- *   - detail loaded → header + definition + triggers
- *
- * Each child component is gated independently on the relevant permission
- * so the orchestrator stays thin.
- */
-export function AutomationDetailContent({
-	searchSpaceId,
-	automationId,
-}: AutomationDetailContentProps) {
-	const perms = useAutomationPermissions();
-	const validId = Number.isInteger(automationId) && automationId > 0;
-	const { data: automation, isLoading, error } = useAutomation(validId ? automationId : undefined);
-
-	if (perms.loading) {
-		return <AutomationDetailLoading />;
-	}
-
-	if (!perms.canRead) {
-		return (
-			<div className="rounded-lg border border-border/60 bg-muted/20 px-6 py-12 text-center">
-				<ShieldAlert className="mx-auto h-10 w-10 text-muted-foreground" aria-hidden />
-				<h2 className="mt-3 text-base font-semibold text-foreground">Access denied</h2>
-				<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
-					You don't have permission to view automations in this search space.
-				</p>
-			</div>
-		);
-	}
-
-	if (!validId) {
-		return <AutomationNotFound searchSpaceId={searchSpaceId} />;
-	}
-
-	if (isLoading) {
-		return <AutomationDetailLoading />;
-	}
-
-	if (error || !automation) {
-		return <AutomationNotFound searchSpaceId={searchSpaceId} error={error} />;
-	}
-
-	return (
-		<>
-			<AutomationDetailHeader
-				automation={automation}
-				searchSpaceId={searchSpaceId}
-				canUpdate={perms.canUpdate}
-				canDelete={perms.canDelete}
-			/>
-
-			<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-				<div className="space-y-6 min-w-0 lg:col-span-2">
-					<AutomationDefinitionSection definition={automation.definition} />
-					<AutomationRunsSection automationId={automation.id} />
-				</div>
-				<div className="space-y-6 min-w-0">
-					<AutomationTriggersSection
-						triggers={automation.triggers}
-						automationId={automation.id}
-						canUpdate={perms.canUpdate}
-						canDelete={perms.canDelete}
-					/>
-				</div>
-			</div>
-		</>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-definition-section.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-definition-section.tsx
deleted file mode 100644
index ab6168305..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-definition-section.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-"use client";
-import { Dot } from "lucide-react";
-import { useState } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import type { AutomationDefinition } from "@/contracts/types/automation.types";
-import { ExecutionSummary } from "./execution-summary";
-import { InputsSchemaPreview } from "./inputs-schema-preview";
-import { PlanStepCard } from "./plan-step-card";
-
-interface AutomationDefinitionSectionProps {
-	definition: AutomationDefinition;
-}
-
-/**
- * User-facing read view of the saved automation definition. Editing happens on
- * the sibling /edit route; this card should summarize behavior, not expose the
- * raw persisted schema.
- */
-export function AutomationDefinitionSection({ definition }: AutomationDefinitionSectionProps) {
-	const hasTags = definition.metadata.tags.length > 0;
-	const hasInputs = !!definition.inputs;
-	const [advancedOpen, setAdvancedOpen] = useState(false);
-	const stepCount = `${definition.plan.length} step${definition.plan.length === 1 ? "" : "s"}`;
-
-	return (
-		<Card className="border-border/60 bg-accent">
-			<CardHeader className="pb-4">
-				<CardTitle className="text-base font-semibold">Automation details</CardTitle>
-			</CardHeader>
-			<CardContent className="space-y-6">
-				{definition.goal && (
-					<Field label="Goal">
-						<p className="text-sm text-foreground">{definition.goal}</p>
-					</Field>
-				)}
-
-				{hasTags && (
-					<Field label="Tags">
-						<div className="flex flex-wrap gap-1.5">
-							{definition.metadata.tags.map((tag) => (
-								<span
-									key={tag}
-									className="inline-flex items-center rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground"
-								>
-									{tag}
-								</span>
-							))}
-						</div>
-					</Field>
-				)}
-
-				{hasInputs && (
-					<Field label="Inputs">
-						{definition.inputs && <InputsSchemaPreview inputs={definition.inputs} />}
-					</Field>
-				)}
-
-				<Field
-					label={
-						<span className="inline-flex items-center">
-							Plan
-							<Dot className="h-4 w-4 text-muted-foreground" aria-hidden />
-							{stepCount}
-						</span>
-					}
-				>
-					<div className="space-y-2">
-						{definition.plan.map((step, idx) => (
-							<PlanStepCard key={step.step_id} step={step} index={idx} />
-						))}
-					</div>
-					<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen} className="mt-3">
-						<CollapsibleTrigger className="text-xs font-medium text-muted-foreground underline-offset-2 hover:text-foreground hover:underline">
-							{advancedOpen ? "Hide advanced options" : "Advanced options"}
-						</CollapsibleTrigger>
-						<CollapsibleContent>
-							<div className="mt-3 rounded-md border border-border/60 bg-background/30 p-3">
-								<div className="mb-2 text-sm font-medium text-muted-foreground">
-									Execution defaults
-								</div>
-								<ExecutionSummary execution={definition.execution} />
-							</div>
-						</CollapsibleContent>
-					</Collapsible>
-				</Field>
-			</CardContent>
-		</Card>
-	);
-}
-
-function Field({ label, children }: { label: React.ReactNode; children: React.ReactNode }) {
-	return (
-		<div className="space-y-2">
-			<div className="text-sm font-medium text-muted-foreground">{label}</div>
-			{children}
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-detail-header.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-detail-header.tsx
deleted file mode 100644
index 71730baeb..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-detail-header.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-"use client";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Pause, Pencil, Play, Trash2 } from "lucide-react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useCallback, useState } from "react";
-import { updateAutomationMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
-import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/spinner";
-import type { Automation } from "@/contracts/types/automation.types";
-import { DeleteAutomationDialog } from "../../components/delete-automation-dialog";
-
-interface AutomationDetailHeaderProps {
-	automation: Automation;
-	searchSpaceId: number;
-	canUpdate: boolean;
-	canDelete: boolean;
-}
-
-/**
- * Title bar for the detail page: back link, name, status badge,
- * description, and the two destructive-ish primary actions (pause /
- * resume + delete). Same mutation atoms as the list-row actions to
- * keep caches coherent.
- *
- * Archived automations hide the pause/resume toggle (we don't unarchive
- * here — that flow comes later if we need it).
- */
-export function AutomationDetailHeader({
-	automation,
-	searchSpaceId,
-	canUpdate,
-	canDelete,
-}: AutomationDetailHeaderProps) {
-	const router = useRouter();
-	const { mutateAsync: updateAutomation, isPending: updating } = useAtomValue(
-		updateAutomationMutationAtom
-	);
-	const [deleteOpen, setDeleteOpen] = useState(false);
-
-	const canToggle = canUpdate && automation.status !== "archived";
-	const nextStatus = automation.status === "active" ? "paused" : "active";
-	const pauseLabel = automation.status === "active" ? "Pause" : "Resume";
-	const PauseIcon = automation.status === "active" ? Pause : Play;
-
-	const handleDeleted = useCallback(() => {
-		router.push(`/dashboard/${searchSpaceId}/automations`);
-	}, [router, searchSpaceId]);
-
-	async function handleTogglePause() {
-		await updateAutomation({
-			automationId: automation.id,
-			patch: { status: nextStatus },
-		});
-	}
-
-	return (
-		<>
-			<div className="space-y-3">
-				<Button asChild variant="ghost" size="sm" className="-ml-2 h-auto px-2 py-1">
-					<Link
-						href={`/dashboard/${searchSpaceId}/automations`}
-						className="text-xs text-muted-foreground"
-					>
-						<ArrowLeft className="mr-1.5 h-3.5 w-3.5" />
-						Back to automations
-					</Link>
-				</Button>
-
-				<div className="flex items-start justify-between gap-4 flex-wrap">
-					<div className="space-y-2 min-w-0 flex-1">
-						<h1 className="text-xl md:text-2xl font-semibold text-foreground break-words">
-							{automation.name}
-						</h1>
-						{automation.description && (
-							<p className="text-sm text-muted-foreground max-w-3xl">{automation.description}</p>
-						)}
-					</div>
-
-					<div className="flex items-center gap-2 shrink-0">
-						{canUpdate && (
-							<Button
-								asChild
-								type="button"
-								variant="ghost"
-								size="sm"
-								className="justify-start rounded-md bg-muted px-3 hover:bg-accent"
-							>
-								<Link href={`/dashboard/${searchSpaceId}/automations/${automation.id}/edit`}>
-									<Pencil className="mr-1 h-4 w-4" />
-									Edit
-								</Link>
-							</Button>
-						)}
-						{canToggle && (
-							<Button
-								type="button"
-								variant="ghost"
-								size="sm"
-								onClick={handleTogglePause}
-								disabled={updating}
-								className="relative justify-start rounded-md bg-muted px-3 hover:bg-accent"
-							>
-								<span
-									className={
-										updating
-											? "inline-flex items-center whitespace-nowrap opacity-0"
-											: "inline-flex items-center whitespace-nowrap"
-									}
-								>
-									<PauseIcon className="mr-1 h-4 w-4" />
-									{pauseLabel}
-								</span>
-								{updating && (
-									<Spinner
-										size="xs"
-										className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
-									/>
-								)}
-							</Button>
-						)}
-						{canDelete && (
-							<Button
-								type="button"
-								variant="ghost"
-								size="sm"
-								onClick={() => setDeleteOpen(true)}
-								className="justify-start rounded-md bg-muted px-3 hover:bg-accent"
-							>
-								<Trash2 className="mr-1 h-4 w-4" />
-								Delete
-							</Button>
-						)}
-					</div>
-				</div>
-			</div>
-
-			{canDelete && (
-				<DeleteAutomationDialog
-					open={deleteOpen}
-					onOpenChange={setDeleteOpen}
-					automationId={automation.id}
-					automationName={automation.name}
-					searchSpaceId={searchSpaceId}
-					onDeleted={handleDeleted}
-				/>
-			)}
-		</>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-detail-loading.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-detail-loading.tsx
deleted file mode 100644
index 0d6ba3110..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-detail-loading.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-"use client";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
-
-/**
- * Skeleton for the detail page. Mirrors the loaded view's main/sidebar
- * grid (Definition + Runs on the left, Triggers on the right) so layout
- * doesn't reflow when data arrives.
- */
-export function AutomationDetailLoading() {
-	return (
-		<>
-			<div className="space-y-3">
-				<Skeleton className="h-4 w-32" />
-				<div className="flex items-center gap-3">
-					<Skeleton className="h-7 w-64" />
-					<Skeleton className="h-5 w-16 rounded-md" />
-				</div>
-				<Skeleton className="h-4 w-96" />
-			</div>
-
-			<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-				<div className="space-y-6 min-w-0 lg:col-span-2">
-					<Card className="border-border/60 bg-accent">
-						<CardHeader>
-							<Skeleton className="h-5 w-32" />
-						</CardHeader>
-						<CardContent className="space-y-4">
-							<Skeleton className="h-4 w-3/4" />
-							<Skeleton className="h-4 w-1/2" />
-							<Skeleton className="h-24 w-full" />
-						</CardContent>
-					</Card>
-					<Card className="border-border/60 bg-accent">
-						<CardHeader>
-							<Skeleton className="h-5 w-32" />
-						</CardHeader>
-						<CardContent>
-							<Skeleton className="h-20 w-full" />
-						</CardContent>
-					</Card>
-				</div>
-				<div className="space-y-6 min-w-0">
-					<Card className="border-border/60 bg-accent">
-						<CardHeader>
-							<Skeleton className="h-5 w-24" />
-						</CardHeader>
-						<CardContent>
-							<Skeleton className="h-20 w-full" />
-						</CardContent>
-					</Card>
-				</div>
-			</div>
-		</>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-not-found.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-not-found.tsx
deleted file mode 100644
index 1681caf25..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-not-found.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client";
-import { ArrowLeft, FileWarning } from "lucide-react";
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
-
-interface AutomationNotFoundProps {
-	searchSpaceId: number;
-	error?: Error | null;
-}
-
-/**
- * Rendered when the detail fetch fails (404 / 403 / network) or the id
- * is not a number. We don't distinguish "missing" from "forbidden" in the
- * UI on purpose — leaking that an id exists you can't read is worse than
- * a vague message.
- */
-export function AutomationNotFound({ searchSpaceId, error }: AutomationNotFoundProps) {
-	return (
-		<div className="rounded-lg border border-border/60 bg-muted/20 px-6 py-12 text-center">
-			<FileWarning className="mx-auto h-10 w-10 text-muted-foreground" aria-hidden />
-			<h2 className="mt-3 text-base font-semibold text-foreground">Automation not found</h2>
-			<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
-				This automation doesn't exist or you don't have access to it.
-				{error?.message ? ` (${error.message})` : null}
-			</p>
-			<Button asChild variant="outline" size="sm" className="mt-6">
-				<Link href={`/dashboard/${searchSpaceId}/automations`}>
-					<ArrowLeft className="mr-2 h-4 w-4" />
-					Back to automations
-				</Link>
-			</Button>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-runs-section.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-runs-section.tsx
deleted file mode 100644
index bd683fe57..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-runs-section.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client";
-import { History } from "lucide-react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { useAutomationRuns } from "@/hooks/use-automation-runs";
-import { RunRow } from "./run-row";
-import { RunsLoading } from "./runs-loading";
-
-interface AutomationRunsSectionProps {
-	automationId: number;
-}
-
-const LIMIT = 20;
-
-/**
- * Run history card. Shows the most recent ``LIMIT`` runs; pagination is
- * intentionally deferred — for the foreseeable v1 surface (one-trigger
- * automations firing daily), 20 covers ~3 weeks of history which is
- * enough to tell whether things are working. Real "load more" lands if
- * we see usage spike past that.
- */
-export function AutomationRunsSection({ automationId }: AutomationRunsSectionProps) {
-	const { data, isLoading, error } = useAutomationRuns(automationId, { limit: LIMIT });
-	const runs = data?.items ?? [];
-
-	return (
-		<Card className="border-border/60 bg-accent">
-			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
-				<div className="space-y-1">
-					<CardTitle className="text-base font-semibold inline-flex items-center gap-2">
-						Recent runs
-					</CardTitle>
-					<p className="text-xs text-muted-foreground">
-						Most recent first. Click a row to inspect step results, output and artifacts.
-					</p>
-				</div>
-				{!isLoading && !error && data && (
-					<span className="text-xs text-muted-foreground">{data.total} total</span>
-				)}
-			</CardHeader>
-			<CardContent>
-				{isLoading ? (
-					<RunsLoading />
-				) : error ? (
-					<p className="text-sm text-muted-foreground">
-						Couldn't load runs{error.message ? `: ${error.message}` : "."}
-					</p>
-				) : runs.length === 0 ? (
-					<div className="rounded-md border border-dashed border-border/60 bg-muted/20 px-4 py-8 text-center">
-						<History className="mx-auto h-8 w-8 text-muted-foreground" aria-hidden />
-						<p className="mt-2 text-sm font-medium text-foreground">No runs yet</p>
-						<p className="mt-1 text-xs text-muted-foreground">
-							This automation hasn't fired. Once a trigger fires (or you invoke it manually), runs
-							will appear here.
-						</p>
-					</div>
-				) : (
-					<div className="space-y-2">
-						{runs.map((run) => (
-							<RunRow key={run.id} run={run} automationId={automationId} />
-						))}
-					</div>
-				)}
-			</CardContent>
-		</Card>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-triggers-section.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-triggers-section.tsx
deleted file mode 100644
index abe739dcc..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-triggers-section.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-"use client";
-import { CalendarClock } from "lucide-react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import type { Trigger } from "@/contracts/types/automation.types";
-import { TriggerCard } from "./trigger-card";
-
-interface AutomationTriggersSectionProps {
-	triggers: Trigger[];
-	automationId: number;
-	canUpdate: boolean;
-	canDelete: boolean;
-}
-
-/**
- * The Triggers card. Lists each attached trigger with its own enable
- * toggle and remove button. v1 attaches triggers at automation-creation
- * time only; there is no in-place "add trigger" affordance here.
- */
-export function AutomationTriggersSection({
-	triggers,
-	automationId,
-	canUpdate,
-	canDelete,
-}: AutomationTriggersSectionProps) {
-	return (
-		<Card className="border-border/60 bg-accent">
-			<CardHeader className="pb-4">
-				<CardTitle className="text-base font-semibold">Triggers</CardTitle>
-				<p className="text-xs text-muted-foreground">When this automation runs</p>
-			</CardHeader>
-			<CardContent>
-				{triggers.length === 0 ? (
-					<div className="rounded-md border border-dashed border-border/60 bg-muted/20 px-4 py-8 text-center">
-						<CalendarClock className="mx-auto h-8 w-8 text-muted-foreground" aria-hidden />
-						<p className="mt-2 text-sm font-medium text-foreground">No triggers attached</p>
-						<p className="mt-1 text-xs text-muted-foreground">
-							This automation can still be invoked, but nothing will fire it on its own.
-						</p>
-					</div>
-				) : (
-					<div className="space-y-3">
-						{triggers.map((trigger) => (
-							<TriggerCard
-								key={trigger.id}
-								trigger={trigger}
-								automationId={automationId}
-								canUpdate={canUpdate}
-								canDelete={canDelete}
-							/>
-						))}
-					</div>
-				)}
-			</CardContent>
-		</Card>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/delete-trigger-dialog.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/delete-trigger-dialog.tsx
deleted file mode 100644
index 71e905724..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/delete-trigger-dialog.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-"use client";
-import { useAtomValue } from "jotai";
-import { useState } from "react";
-import { removeTriggerMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Spinner } from "@/components/ui/spinner";
-
-interface DeleteTriggerDialogProps {
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-	automationId: number;
-	triggerId: number;
-	triggerLabel: string;
-}
-
-/**
- * Confirm + detach one trigger from its automation. The automation itself
- * is untouched; only this trigger row is removed. The mutation atom
- * invalidates the parent automation detail so the page rerenders.
- */
-export function DeleteTriggerDialog({
-	open,
-	onOpenChange,
-	automationId,
-	triggerId,
-	triggerLabel,
-}: DeleteTriggerDialogProps) {
-	const { mutateAsync: removeTrigger } = useAtomValue(removeTriggerMutationAtom);
-	const [submitting, setSubmitting] = useState(false);
-
-	async function handleConfirm() {
-		setSubmitting(true);
-		try {
-			await removeTrigger({ automationId, triggerId });
-			onOpenChange(false);
-		} finally {
-			setSubmitting(false);
-		}
-	}
-
-	return (
-		<AlertDialog open={open} onOpenChange={onOpenChange}>
-			<AlertDialogContent>
-				<AlertDialogHeader>
-					<AlertDialogTitle>Remove this trigger?</AlertDialogTitle>
-					<AlertDialogDescription>
-						<span className="font-medium text-foreground">{triggerLabel}</span> will be detached.
-						The automation itself stays, but it won't fire on this trigger anymore.
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogCancel disabled={submitting}>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={handleConfirm}
-						disabled={submitting}
-						className="bg-destructive text-white hover:bg-destructive/90"
-					>
-						{submitting ? (
-							<span className="inline-flex items-center gap-2">
-								<Spinner size="xs" />
-								Removing…
-							</span>
-						) : (
-							"Remove"
-						)}
-					</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/execution-summary.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/execution-summary.tsx
deleted file mode 100644
index 82abce173..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/execution-summary.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-import type { Execution } from "@/contracts/types/automation.types";
-
-interface ExecutionSummaryProps {
-	execution: Execution;
-}
-
-/**
- * Compact view of an automation's execution defaults (wall-clock cap,
- * retries, backoff, concurrency, on_failure presence). Per-step overrides
- * are shown inside each PlanStepCard, not here.
- */
-export function ExecutionSummary({ execution }: ExecutionSummaryProps) {
-	return (
-		<dl className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-2 text-xs">
-			<Item label="Timeout" value={`${execution.timeout_seconds}s`} />
-			<Item label="Max retries" value={String(execution.max_retries)} />
-			<Item label="Retry backoff" value={formatEnumValue(execution.retry_backoff)} />
-			<Item label="Concurrency" value={formatEnumValue(execution.concurrency)} />
-			{execution.on_failure.length > 0 && (
-				<Item
-					label="On failure"
-					value={`${execution.on_failure.length} step${execution.on_failure.length === 1 ? "" : "s"}`}
-				/>
-			)}
-		</dl>
-	);
-}
-
-function formatEnumValue(value: string): string {
-	const text = value.replace(/_/g, " ");
-	return text.charAt(0).toUpperCase() + text.slice(1);
-}
-
-function Item({ label, value }: { label: string; value: string }) {
-	return (
-		<div className="flex flex-col gap-0.5 min-w-0">
-			<dt className="text-muted-foreground">{label}</dt>
-			<dd className="text-foreground font-medium truncate">{value}</dd>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/inputs-schema-preview.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/inputs-schema-preview.tsx
deleted file mode 100644
index dce6ac4a7..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/inputs-schema-preview.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-"use client";
-import type { Inputs } from "@/contracts/types/automation.types";
-
-interface InputsSchemaPreviewProps {
-	inputs: Inputs;
-}
-
-/**
- * Read-only preview of an automation's accepted-inputs schema. Most
- * automations don't define inputs (defaults are baked into the trigger's
- * static_inputs), so the parent skips rendering this card when ``inputs``
- * is null.
- */
-export function InputsSchemaPreview({ inputs }: InputsSchemaPreviewProps) {
-	const fields = getInputFields(inputs.schema);
-
-	if (fields.length === 0) {
-		return <p className="text-sm text-muted-foreground">No extra inputs are required.</p>;
-	}
-
-	return (
-		<div className="rounded-md border border-border/60 bg-background/30">
-			{fields.map((field) => (
-				<div
-					key={field.name}
-					className="flex items-start justify-between gap-4 border-border/60 px-3 py-2 text-sm not-last:border-b"
-				>
-					<div className="min-w-0">
-						<div className="font-medium text-foreground">{field.name}</div>
-						{field.description ? (
-							<div className="mt-0.5 text-xs text-muted-foreground">{field.description}</div>
-						) : null}
-					</div>
-					<div className="shrink-0 text-xs text-muted-foreground">
-						{field.type}
-						{field.required ? " · required" : ""}
-					</div>
-				</div>
-			))}
-		</div>
-	);
-}
-
-function getInputFields(schema: Record<string, unknown>): {
-	name: string;
-	type: string;
-	description?: string;
-	required: boolean;
-}[] {
-	const properties = schema.properties;
-	if (!properties || typeof properties !== "object" || Array.isArray(properties)) {
-		return [];
-	}
-
-	const required = new Set(Array.isArray(schema.required) ? schema.required : []);
-	return Object.entries(properties as Record<string, unknown>).map(([name, value]) => {
-		const field = value && typeof value === "object" && !Array.isArray(value) ? value : {};
-		return {
-			name,
-			type: formatType((field as Record<string, unknown>).type),
-			description:
-				typeof (field as Record<string, unknown>).description === "string"
-					? ((field as Record<string, unknown>).description as string)
-					: undefined,
-			required: required.has(name),
-		};
-	});
-}
-
-function formatType(value: unknown): string {
-	if (Array.isArray(value)) return value.join(" or ");
-	if (typeof value === "string") return value;
-	return "value";
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/plan-step-card.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/plan-step-card.tsx
deleted file mode 100644
index 7505ef49b..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/plan-step-card.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-"use client";
-import type { PlanStep } from "@/contracts/types/automation.types";
-
-interface PlanStepCardProps {
-	step: PlanStep;
-	index: number;
-}
-
-/**
- * Read-only view of one plan step. Keep this user-facing: summarize what the
- * step does and only show advanced step controls when they are explicitly set.
- */
-export function PlanStepCard({ step, index }: PlanStepCardProps) {
-	const title = getStepTitle(step);
-	const details = getStepDetails(step);
-
-	return (
-		<div className="rounded-md border border-border/60 bg-background/30 px-4 py-3">
-			<div className="flex items-start gap-3">
-				<span className="mt-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
-					{index + 1}
-				</span>
-				<div className="min-w-0 flex-1">
-					<h3 className="text-sm font-medium text-foreground">{title}</h3>
-					{details.length > 0 ? (
-						<dl className="mt-3 grid grid-cols-1 gap-x-6 gap-y-1.5 text-xs sm:grid-cols-2">
-							{details.map((detail) => (
-								<DefRow key={detail.label} label={detail.label} value={detail.value} />
-							))}
-						</dl>
-					) : null}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function DefRow({ label, value }: { label: string; value: string }) {
-	return (
-		<div className="flex items-baseline gap-2 min-w-0">
-			<dt className="text-muted-foreground shrink-0">{label}:</dt>
-			<dd className="text-foreground min-w-0 truncate">{value}</dd>
-		</div>
-	);
-}
-
-function getStepTitle(step: PlanStep): string {
-	if (step.action === "agent_task") {
-		return readStringParam(step.params, "query") ?? "Run an agent task";
-	}
-	return sentenceCase(formatAction(step.action));
-}
-
-function getStepDetails(step: PlanStep): { label: string; value: string }[] {
-	const details: { label: string; value: string }[] = [];
-
-	if (step.action === "agent_task") {
-		if (typeof step.params.auto_approve_all === "boolean") {
-			details.push({
-				label: "Approval",
-				value: step.params.auto_approve_all ? "Auto-approve agent actions" : "Ask before actions",
-			});
-		}
-
-		const mentionSummary = summarizeMentions(step.params);
-		if (mentionSummary) {
-			details.push({ label: "Scope", value: mentionSummary });
-		}
-	} else {
-		const readableParams = Object.entries(step.params)
-			.filter(([, value]) => value !== null && value !== undefined && value !== "")
-			.map(([key, value]) => `${sentenceCase(formatKey(key))}: ${formatValue(value)}`);
-		if (readableParams.length > 0) {
-			details.push({ label: "Details", value: readableParams.join(" · ") });
-		}
-	}
-
-	if (step.when) details.push({ label: "Runs when", value: step.when });
-	if (step.output_as) details.push({ label: "Saves output as", value: step.output_as });
-	if (step.max_retries != null)
-		details.push({ label: "Max retries", value: String(step.max_retries) });
-	if (step.timeout_seconds != null)
-		details.push({ label: "Timeout", value: `${step.timeout_seconds}s` });
-
-	return details;
-}
-
-function readStringParam(params: Record<string, unknown>, key: string): string | null {
-	const value = params[key];
-	return typeof value === "string" && value.trim() ? value : null;
-}
-
-function summarizeMentions(params: Record<string, unknown>): string | null {
-	const parts: string[] = [];
-	addMentionTitles(parts, params.mentioned_documents, "Documents and folders");
-	addMentionTitles(parts, params.mentioned_connectors, "Connectors");
-	if (parts.length === 0) {
-		addCount(parts, params.mentioned_document_ids, "document");
-		addCount(parts, params.mentioned_folder_ids, "folder");
-		addCount(parts, params.mentioned_connector_ids, "connector");
-	}
-	return parts.length > 0 ? parts.join(", ") : null;
-}
-
-function addMentionTitles(parts: string[], value: unknown, label: string): void {
-	if (!Array.isArray(value) || value.length === 0) return;
-	const titles = value
-		.map((entry) => {
-			const record = asRecord(entry);
-			const title = typeof record.title === "string" ? record.title : null;
-			const accountName = typeof record.account_name === "string" ? record.account_name : null;
-			return title ?? accountName;
-		})
-		.filter((title): title is string => !!title);
-	if (titles.length === 0) return;
-	parts.push(`${label}: ${titles.join(", ")}`);
-}
-
-function addCount(parts: string[], value: unknown, singular: string): void {
-	if (!Array.isArray(value) || value.length === 0) return;
-	parts.push(`${value.length} ${singular}${value.length === 1 ? "" : "s"}`);
-}
-
-function formatAction(action: string): string {
-	return formatKey(action);
-}
-
-function formatKey(key: string): string {
-	return key.replace(/_/g, " ");
-}
-
-function sentenceCase(value: string): string {
-	return value.charAt(0).toUpperCase() + value.slice(1);
-}
-
-function asRecord(value: unknown): Record<string, unknown> {
-	return value && typeof value === "object" && !Array.isArray(value)
-		? (value as Record<string, unknown>)
-		: {};
-}
-
-function formatValue(value: unknown): string {
-	if (typeof value === "boolean") return value ? "Yes" : "No";
-	if (typeof value === "string" || typeof value === "number") return String(value);
-	if (Array.isArray(value)) return `${value.length} item${value.length === 1 ? "" : "s"}`;
-	if (value && typeof value === "object") return "Configured";
-	return String(value);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-details-panel.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-details-panel.tsx
deleted file mode 100644
index ab82589dc..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-details-panel.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-"use client";
-import {
-	AlertCircle,
-	ChevronDown,
-	FileOutput,
-	GitCommitHorizontal,
-	Package,
-	Settings2,
-} from "lucide-react";
-import { useState } from "react";
-import { JsonView } from "@/components/json-view";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Separator } from "@/components/ui/separator";
-import { Skeleton } from "@/components/ui/skeleton";
-import type { RunStatus, RunStepResult } from "@/contracts/types/automation.types";
-import { useAutomationRun } from "@/hooks/use-automation-runs";
-import { cn } from "@/lib/utils";
-import { RunStepResultCard } from "./run-step-result-card";
-
-interface RunDetailsPanelProps {
-	automationId: number;
-	runId: number;
-	/** Live step entries from Zero; rendered while the run is in-flight and
-	 * also kept as the authoritative source once it finishes. */
-	liveSteps: RunStepResult[];
-	/** Live run status from Zero. Used to hide diagnostic sections that
-	 * only make sense after the run reaches a terminal state. */
-	liveStatus: RunStatus;
-}
-
-/**
- * Expanded view of a single run. Steps render immediately from the live
- * Zero row so the panel updates as the run progresses; the heavy REST
- * payload (output, artifacts, resolved inputs, run-level error) is
- * fetched lazily and merged in when it arrives.
- *
- * Surfacing order is outcome-first: a run-level error (when present),
- * then per-step cards that render the agent's markdown ``final_message``
- * directly, and finally the structural artifacts/inputs. The full
- * ``definition_snapshot`` is omitted because it usually mirrors the live
- * definition — surfacing it would dominate the panel without informing
- * what the user is trying to learn ("did this work? what did it do?").
- */
-export function RunDetailsPanel({
-	automationId,
-	runId,
-	liveSteps,
-	liveStatus,
-}: RunDetailsPanelProps) {
-	const isTerminal = liveStatus !== "pending" && liveStatus !== "running";
-	// Defer the REST round-trip until the run can actually carry heavy
-	// fields — output/artifacts/error are only written at terminal mark.
-	const {
-		data: run,
-		isLoading,
-		error,
-	} = useAutomationRun(automationId, runId, {
-		enabled: isTerminal,
-	});
-
-	const runError = run?.error && Object.keys(run.error).length > 0 ? run.error : null;
-	const hasOutput = !!run?.output && Object.keys(run.output).length > 0;
-	const hasInputs = !!run && Object.keys(run.inputs ?? {}).length > 0;
-	const hasDiagnostics = !!run && (run.artifacts.length > 0 || hasInputs);
-	const heavyLoading = isTerminal && isLoading && !run;
-	const heavyError = isTerminal && !!error;
-
-	return (
-		<div className="flex flex-col gap-4 border-t border-border/60 bg-muted/20 p-4">
-			{runError ? <RunErrorSection error={runError} /> : null}
-
-			{hasOutput ? (
-				<Section icon={FileOutput} label="Output">
-					<JsonBlock value={run.output} />
-				</Section>
-			) : null}
-
-			<Section icon={GitCommitHorizontal} label={`Step results · ${liveSteps.length}`}>
-				{liveSteps.length === 0 ? (
-					<p className="text-xs text-muted-foreground">
-						{isTerminal ? "No steps recorded." : "Waiting for first step…"}
-					</p>
-				) : (
-					<div className="flex flex-col gap-2">
-						{liveSteps.map((step, index) => (
-							<RunStepResultCard key={step.step_id ?? index} step={step} />
-						))}
-					</div>
-				)}
-			</Section>
-
-			{heavyLoading ? (
-				<Skeleton className="h-16 w-full" />
-			) : heavyError ? (
-				<p className="text-xs text-muted-foreground">
-					Couldn't load run details{error?.message ? `: ${error.message}` : "."}
-				</p>
-			) : hasDiagnostics ? (
-				<>
-					<Separator className="bg-border/60" />
-					{run && run.artifacts.length > 0 ? (
-						<Section icon={Package} label={`Artifacts · ${run.artifacts.length}`}>
-							<JsonBlock value={run.artifacts} />
-						</Section>
-					) : null}
-					{hasInputs ? (
-						<Section icon={Settings2} label="Resolved inputs">
-							<JsonBlock value={run?.inputs} />
-						</Section>
-					) : null}
-				</>
-			) : null}
-		</div>
-	);
-}
-
-/**
- * Run-level error: a readable destructive alert when a message is present,
- * with the full structured error available behind a raw toggle.
- */
-function RunErrorSection({ error }: { error: Record<string, unknown> }) {
-	const [rawOpen, setRawOpen] = useState(false);
-	const message = typeof error.message === "string" ? error.message : null;
-	const type = typeof error.type === "string" ? error.type : "Run failed";
-
-	return (
-		<Section icon={AlertCircle} label="Error" tone="destructive">
-			{message ? (
-				<Alert variant="destructive">
-					<AlertCircle aria-hidden />
-					<AlertTitle>{type}</AlertTitle>
-					<AlertDescription className="wrap-break-word">{message}</AlertDescription>
-				</Alert>
-			) : null}
-			<Collapsible open={rawOpen} onOpenChange={setRawOpen} className="mt-2">
-				<CollapsibleTrigger asChild>
-					<Button
-						type="button"
-						variant="ghost"
-						size="sm"
-						className="h-7 w-fit px-2 text-xs text-muted-foreground"
-						aria-expanded={rawOpen}
-					>
-						<ChevronDown
-							className={cn(
-								"transition-transform motion-reduce:transition-none",
-								rawOpen && "rotate-180"
-							)}
-							aria-hidden
-						/>
-						{rawOpen ? "Hide raw" : "View raw"}
-					</Button>
-				</CollapsibleTrigger>
-				<CollapsibleContent>
-					<ScrollArea className="mt-2 max-h-64 rounded-md bg-muted/40 px-3 py-2">
-						<JsonView src={error} collapsed={1} />
-					</ScrollArea>
-				</CollapsibleContent>
-			</Collapsible>
-		</Section>
-	);
-}
-
-function Section({
-	icon: Icon,
-	label,
-	tone = "default",
-	children,
-}: {
-	icon: typeof AlertCircle;
-	label: string;
-	tone?: "default" | "destructive";
-	children: React.ReactNode;
-}) {
-	return (
-		<div className="flex flex-col gap-1.5">
-			<div
-				className={cn(
-					"flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wider",
-					tone === "destructive" ? "text-destructive" : "text-muted-foreground"
-				)}
-			>
-				<Icon className="size-3" aria-hidden />
-				{label}
-			</div>
-			{children}
-		</div>
-	);
-}
-
-function JsonBlock({ value }: { value: unknown }) {
-	return (
-		<ScrollArea className="max-h-64 rounded-md bg-muted/40 px-3 py-2">
-			<JsonView src={value} collapsed={1} />
-		</ScrollArea>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-row.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-row.tsx
deleted file mode 100644
index b48230e3f..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-row.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-"use client";
-import { ChevronDown, ChevronRight, Hand } from "lucide-react";
-import { useState } from "react";
-import type { LiveRunSummary } from "@/hooks/use-automation-runs";
-import { formatDuration } from "@/lib/automations/run-duration";
-import { formatRelativeDate } from "@/lib/format-date";
-import { RunDetailsPanel } from "./run-details-panel";
-import { RunStatusBadge } from "./run-status-badge";
-
-interface RunRowProps {
-	run: LiveRunSummary;
-	automationId: number;
-}
-
-/**
- * One run row. Click to expand → renders the details panel inline.
- * Status and step_results come live from the parent's Zero query; the
- * panel itself only fetches the heavy REST fields on first expand.
- */
-export function RunRow({ run, automationId }: RunRowProps) {
-	const [open, setOpen] = useState(false);
-	const duration = formatDuration(run.started_at, run.finished_at);
-	const startedLabel = run.started_at
-		? formatRelativeDate(run.started_at)
-		: formatRelativeDate(run.created_at);
-
-	return (
-		<div className="rounded-md border border-border/60 overflow-hidden">
-			<button
-				type="button"
-				onClick={() => setOpen((value) => !value)}
-				className="flex w-full items-center justify-between gap-4 px-4 py-3 text-left hover:bg-muted/30 transition-colors"
-				aria-expanded={open}
-			>
-				<div className="flex items-center gap-3 min-w-0">
-					{open ? (
-						<ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" aria-hidden />
-					) : (
-						<ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" aria-hidden />
-					)}
-					<RunStatusBadge status={run.status} />
-					<span className="text-xs text-muted-foreground truncate">{startedLabel}</span>
-				</div>
-				<div className="flex items-center gap-3 shrink-0 text-xs text-muted-foreground">
-					{duration && <span className="font-mono">{duration}</span>}
-					<TriggerSource triggerId={run.trigger_id ?? null} />
-				</div>
-			</button>
-
-			{open && (
-				<RunDetailsPanel
-					automationId={automationId}
-					runId={run.id}
-					liveSteps={run.step_results}
-					liveStatus={run.status}
-				/>
-			)}
-		</div>
-	);
-}
-
-function TriggerSource({ triggerId }: { triggerId: number | null }) {
-	if (triggerId == null) {
-		return (
-			<span className="inline-flex items-center gap-1">
-				<Hand className="h-3 w-3" aria-hidden />
-				Manual
-			</span>
-		);
-	}
-	return <span>via trigger #{triggerId}</span>;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-status-badge.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-status-badge.tsx
deleted file mode 100644
index e5532a500..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-status-badge.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client";
-import { AlertCircle, CheckCircle2, Clock, Loader2, TimerOff, XCircle } from "lucide-react";
-import type { RunStatus } from "@/contracts/types/automation.types";
-import { cn } from "@/lib/utils";
-
-const STATUS_STYLES: Record<
-	RunStatus,
-	{ label: string; icon: typeof CheckCircle2; classes: string; spin?: boolean }
-> = {
-	pending: {
-		label: "Pending",
-		icon: Clock,
-		classes: "bg-muted text-muted-foreground border-border/60",
-	},
-	running: {
-		label: "Running",
-		icon: Loader2,
-		classes: "bg-blue-500/10 text-blue-600 border-blue-500/20",
-		spin: true,
-	},
-	succeeded: {
-		label: "Succeeded",
-		icon: CheckCircle2,
-		classes: "bg-emerald-500/10 text-emerald-600 border-emerald-500/20",
-	},
-	failed: {
-		label: "Failed",
-		icon: XCircle,
-		classes: "bg-destructive/10 text-destructive border-destructive/20",
-	},
-	cancelled: {
-		label: "Cancelled",
-		icon: AlertCircle,
-		classes: "bg-muted text-muted-foreground border-border/60",
-	},
-	timed_out: {
-		label: "Timed out",
-		icon: TimerOff,
-		classes: "bg-amber-500/10 text-amber-600 border-amber-500/20",
-	},
-};
-
-export function RunStatusBadge({ status, className }: { status: RunStatus; className?: string }) {
-	const { label, icon: Icon, classes, spin } = STATUS_STYLES[status];
-	return (
-		<span
-			className={cn(
-				"inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium",
-				classes,
-				className
-			)}
-		>
-			<Icon className={cn("h-3 w-3", spin && "animate-spin")} aria-hidden />
-			{label}
-		</span>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-step-result-card.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-step-result-card.tsx
deleted file mode 100644
index eef572300..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-step-result-card.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-"use client";
-import { CheckCircle2, ChevronDown, MinusCircle, XCircle } from "lucide-react";
-import { memo, useState } from "react";
-import { JsonView } from "@/components/json-view";
-import { MarkdownViewer } from "@/components/markdown-viewer";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import type { RunStepResult } from "@/contracts/types/automation.types";
-import { formatDuration } from "@/lib/automations/run-duration";
-import { cn } from "@/lib/utils";
-
-type BadgeVariant = React.ComponentProps<typeof Badge>["variant"];
-
-const STATUS_BADGE: Record<
-	string,
-	{ label: string; variant: BadgeVariant; icon: typeof CheckCircle2 }
-> = {
-	succeeded: { label: "Succeeded", variant: "outline", icon: CheckCircle2 },
-	failed: { label: "Failed", variant: "destructive", icon: XCircle },
-	skipped: { label: "Skipped", variant: "secondary", icon: MinusCircle },
-};
-
-function StepStatusBadge({ status }: { status: string }) {
-	const meta = STATUS_BADGE[status] ?? {
-		label: status,
-		variant: "outline" as const,
-		icon: MinusCircle,
-	};
-	const Icon = meta.icon;
-	return (
-		<Badge variant={meta.variant} className="shrink-0">
-			<Icon aria-hidden />
-			{meta.label}
-		</Badge>
-	);
-}
-
-/**
- * One step from a run's ``step_results``. Surfaces the agent's markdown
- * ``final_message`` first-class (rendered, not raw), shows step errors as a
- * readable alert, and keeps the full structured payload behind a "View raw"
- * collapsible escape hatch.
- */
-export const RunStepResultCard = memo(function RunStepResultCard({
-	step,
-}: {
-	step: RunStepResult;
-}) {
-	const [rawOpen, setRawOpen] = useState(false);
-
-	const duration = formatDuration(step.started_at, step.finished_at);
-	const attempts = step.attempts ?? 0;
-	const finalMessage =
-		typeof step.result?.final_message === "string" ? step.result.final_message : null;
-	const errorMessage = step.error?.message;
-	const hasMeta = Boolean(duration) || attempts > 1;
-
-	return (
-		<Card className="border-border/60 shadow-none">
-			<CardHeader className="gap-2 space-y-0 p-3">
-				<div className="flex items-center justify-between gap-3">
-					<div className="flex min-w-0 items-center gap-2">
-						<span className="truncate font-mono text-xs font-medium">{step.action}</span>
-						<span className="truncate text-xs text-muted-foreground">{step.step_id}</span>
-					</div>
-					<StepStatusBadge status={step.status} />
-				</div>
-				{hasMeta ? (
-					<div className="flex items-center gap-3 text-[11px] text-muted-foreground tabular-nums">
-						{duration ? <span>{duration}</span> : null}
-						{attempts > 1 ? <span>{attempts} attempts</span> : null}
-					</div>
-				) : null}
-			</CardHeader>
-
-			<CardContent className="flex flex-col gap-3 p-3 pt-0">
-				{errorMessage ? (
-					<Alert variant="destructive">
-						<XCircle aria-hidden />
-						<AlertTitle>{step.error?.type ?? "Error"}</AlertTitle>
-						<AlertDescription className="wrap-break-word">{errorMessage}</AlertDescription>
-					</Alert>
-				) : null}
-
-				{finalMessage ? (
-					<div className="min-w-0 wrap-break-word rounded-md border border-border/60 bg-background px-3 py-2">
-						<MarkdownViewer content={finalMessage} />
-					</div>
-				) : null}
-
-				<Collapsible open={rawOpen} onOpenChange={setRawOpen}>
-					<CollapsibleTrigger asChild>
-						<Button
-							type="button"
-							variant="ghost"
-							size="sm"
-							className="h-7 w-fit px-2 text-xs text-muted-foreground"
-							aria-expanded={rawOpen}
-						>
-							<ChevronDown
-								className={cn(
-									"transition-transform motion-reduce:transition-none",
-									rawOpen && "rotate-180"
-								)}
-								aria-hidden
-							/>
-							{rawOpen ? "Hide raw" : "View raw"}
-						</Button>
-					</CollapsibleTrigger>
-					<CollapsibleContent>
-						<ScrollArea className="mt-2 max-h-64 rounded-md bg-muted/40 px-3 py-2">
-							<JsonView src={step} collapsed={1} />
-						</ScrollArea>
-					</CollapsibleContent>
-				</Collapsible>
-			</CardContent>
-		</Card>
-	);
-});
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/runs-loading.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/runs-loading.tsx
deleted file mode 100644
index 61ce25e32..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/runs-loading.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-"use client";
-import { Skeleton } from "@/components/ui/skeleton";
-
-const ROW_KEYS = ["a", "b", "c"] as const;
-
-export function RunsLoading() {
-	return (
-		<div className="space-y-2">
-			{ROW_KEYS.map((key) => (
-				<div
-					key={key}
-					className="flex items-center justify-between gap-4 rounded-md border border-border/60 px-4 py-3"
-				>
-					<div className="flex items-center gap-3">
-						<Skeleton className="h-5 w-20 rounded-md" />
-						<Skeleton className="h-3 w-32" />
-					</div>
-					<Skeleton className="h-3 w-16" />
-				</div>
-			))}
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/trigger-card.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/trigger-card.tsx
deleted file mode 100644
index de156a09c..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/trigger-card.tsx
+++ /dev/null
@@ -1,386 +0,0 @@
-"use client";
-import { useAtomValue } from "jotai";
-import { AlertCircle, MoreHorizontal, Pencil, Trash2 } from "lucide-react";
-import { useState } from "react";
-import { updateTriggerMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Spinner } from "@/components/ui/spinner";
-import { Switch } from "@/components/ui/switch";
-import { type Trigger, triggerUpdateRequest } from "@/contracts/types/automation.types";
-import { describeCron } from "@/lib/automations/describe-cron";
-import {
-	DEFAULT_SCHEDULE,
-	fromCron,
-	type ScheduleFrequency,
-	toCron,
-} from "@/lib/automations/schedule-builder";
-import { formatRelativeFutureDate } from "@/lib/format-date";
-import { TimezoneCombobox } from "../../components/builder/timezone-combobox";
-import { DeleteTriggerDialog } from "./delete-trigger-dialog";
-
-interface TriggerCardProps {
-	trigger: Trigger;
-	automationId: number;
-	canUpdate: boolean;
-	canDelete: boolean;
-}
-
-type SimpleFrequency = Extract<ScheduleFrequency, "hourly" | "daily" | "weekdays"> | "custom";
-
-interface TriggerDraft {
-	frequency: SimpleFrequency;
-	hour: number;
-	minute: number;
-	timezone: string;
-	cron: string;
-}
-
-const SIMPLE_FREQUENCIES = new Set<ScheduleFrequency>(["hourly", "daily", "weekdays"]);
-
-function draftFromTrigger(trigger: Trigger): TriggerDraft {
-	const cron = typeof trigger.params.cron === "string" ? trigger.params.cron : "";
-	const timezone = typeof trigger.params.timezone === "string" ? trigger.params.timezone : "UTC";
-	const model = fromCron(cron);
-	if (model && SIMPLE_FREQUENCIES.has(model.frequency)) {
-		return {
-			frequency: model.frequency as SimpleFrequency,
-			hour: model.hour,
-			minute: model.minute,
-			timezone,
-			cron,
-		};
-	}
-	return {
-		frequency: "custom",
-		hour: DEFAULT_SCHEDULE.hour,
-		minute: DEFAULT_SCHEDULE.minute,
-		timezone,
-		cron,
-	};
-}
-
-function pad(value: number): string {
-	return value.toString().padStart(2, "0");
-}
-
-function clampInt(raw: string, min: number, max: number): number {
-	const value = Number.parseInt(raw, 10);
-	if (Number.isNaN(value)) return min;
-	return Math.min(max, Math.max(min, value));
-}
-
-/**
- * One trigger row in the Triggers section of the detail page. Renders:
- *   - human-readable schedule
- *   - compact enable toggle
- *   - dropdown actions for edit/remove
- *
- * Inline edit keeps schedule editing intentionally small: common frequencies,
- * time, timezone, and raw cron only for schedules outside the simple model.
- * ``enabled`` stays on the Switch so the two surfaces don't fight.
- */
-export function TriggerCard({ trigger, automationId, canUpdate, canDelete }: TriggerCardProps) {
-	const { mutateAsync: updateTrigger, isPending: updating } =
-		useAtomValue(updateTriggerMutationAtom);
-	const [deleteOpen, setDeleteOpen] = useState(false);
-	const [isEditing, setIsEditing] = useState(false);
-	const [draft, setDraft] = useState<TriggerDraft>(() => draftFromTrigger(trigger));
-	const [issues, setIssues] = useState<string[]>([]);
-
-	const cron = typeof trigger.params.cron === "string" ? trigger.params.cron : undefined;
-	const human = cron ? describeCron(cron) : trigger.type;
-	const triggerLabel = human;
-	const showActions = (canUpdate && !isEditing) || canDelete;
-
-	async function handleToggle(checked: boolean) {
-		await updateTrigger({
-			automationId,
-			triggerId: trigger.id,
-			patch: { enabled: checked },
-		});
-	}
-
-	function startEdit() {
-		setDraft(draftFromTrigger(trigger));
-		setIssues([]);
-		setIsEditing(true);
-	}
-
-	function cancelEdit() {
-		setIsEditing(false);
-		setIssues([]);
-	}
-
-	async function saveEdit() {
-		setIssues([]);
-		const params =
-			draft.frequency === "custom"
-				? { cron: draft.cron.trim(), timezone: draft.timezone }
-				: {
-						cron: toCron({
-							...DEFAULT_SCHEDULE,
-							frequency: draft.frequency,
-							hour: draft.hour,
-							minute: draft.minute,
-						}),
-						timezone: draft.timezone,
-					};
-		const result = triggerUpdateRequest.safeParse({
-			params,
-			static_inputs: trigger.static_inputs ?? {},
-		});
-		if (!result.success) {
-			setIssues(
-				result.error.issues.map((issue) => `${issue.path.join(".") || "(root)"}: ${issue.message}`)
-			);
-			return;
-		}
-		try {
-			await updateTrigger({
-				automationId,
-				triggerId: trigger.id,
-				patch: result.data,
-			});
-			setIsEditing(false);
-		} catch (err) {
-			setIssues([(err as Error).message ?? "Update failed"]);
-		}
-	}
-
-	return (
-		<>
-			<div className="rounded-md border border-border/60 bg-background/30">
-				<div className="flex items-center justify-between gap-3 px-4 py-3">
-					<div className="min-w-0 truncate text-sm font-medium text-foreground">{human}</div>
-
-					<div className="flex shrink-0 items-center gap-2">
-						{canUpdate && (
-							<Switch
-								checked={trigger.enabled}
-								onCheckedChange={handleToggle}
-								disabled={updating || isEditing}
-								aria-label={trigger.enabled ? "Disable trigger" : "Enable trigger"}
-								className="h-5 w-9 [&>span]:h-4 [&>span]:w-4 [&>span[data-state=checked]]:translate-x-4"
-							/>
-						)}
-						{showActions && (
-							<DropdownMenu>
-								<DropdownMenuTrigger asChild>
-									<Button
-										variant="ghost"
-										size="icon"
-										className="h-6 w-6 hover:bg-transparent"
-										disabled={isEditing}
-										aria-label="Trigger actions"
-									>
-										<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
-									</Button>
-								</DropdownMenuTrigger>
-								<DropdownMenuContent align="end" className="w-32 z-80">
-									{canUpdate && !isEditing && (
-										<DropdownMenuItem onSelect={startEdit}>
-											<Pencil className="mr-2 h-4 w-4" />
-											Edit
-										</DropdownMenuItem>
-									)}
-									{canDelete && (
-										<DropdownMenuItem onSelect={() => setDeleteOpen(true)}>
-											<Trash2 className="mr-2 h-4 w-4" />
-											Delete
-										</DropdownMenuItem>
-									)}
-								</DropdownMenuContent>
-							</DropdownMenu>
-						)}
-					</div>
-				</div>
-
-				{!isEditing && trigger.next_fire_at ? (
-					<div className="flex items-center gap-3 border-t border-border/60 px-4 py-3 text-sm">
-						<div className="inline-flex items-center gap-1.5 text-muted-foreground">
-							<span>Next fire:</span>
-						</div>
-						<div
-							className={
-								trigger.enabled
-									? "min-w-0 truncate font-medium text-foreground"
-									: "min-w-0 truncate text-muted-foreground"
-							}
-							title={new Date(trigger.next_fire_at).toLocaleString()}
-						>
-							{formatRelativeFutureDate(trigger.next_fire_at)}
-						</div>
-					</div>
-				) : null}
-
-				{isEditing ? (
-					<div className="space-y-3 border-t border-border/60 px-4 py-3 text-xs">
-						<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-							<div className="space-y-1.5">
-								<label className="text-xs font-medium text-muted-foreground" htmlFor="trigger-runs">
-									Runs
-								</label>
-								<Select
-									value={draft.frequency}
-									onValueChange={(value) =>
-										setDraft((prev) => ({ ...prev, frequency: value as SimpleFrequency }))
-									}
-								>
-									<SelectTrigger id="trigger-runs" className="w-full">
-										<SelectValue />
-									</SelectTrigger>
-									<SelectContent>
-										<SelectItem value="hourly">Every hour</SelectItem>
-										<SelectItem value="daily">Daily</SelectItem>
-										<SelectItem value="weekdays">Weekdays</SelectItem>
-										<SelectItem value="custom">Custom cron</SelectItem>
-									</SelectContent>
-								</Select>
-							</div>
-
-							{draft.frequency === "hourly" ? (
-								<div className="space-y-1.5">
-									<label
-										className="text-xs font-medium text-muted-foreground"
-										htmlFor="trigger-minute"
-									>
-										At minute
-									</label>
-									<Input
-										id="trigger-minute"
-										type="number"
-										min={0}
-										max={59}
-										value={draft.minute}
-										onChange={(event) =>
-											setDraft((prev) => ({
-												...prev,
-												minute: clampInt(event.target.value, 0, 59),
-											}))
-										}
-									/>
-								</div>
-							) : draft.frequency !== "custom" ? (
-								<div className="space-y-1.5">
-									<label
-										className="text-xs font-medium text-muted-foreground"
-										htmlFor="trigger-time"
-									>
-										Time
-									</label>
-									<Input
-										id="trigger-time"
-										type="time"
-										value={`${pad(draft.hour)}:${pad(draft.minute)}`}
-										onChange={(event) => {
-											const [hour, minute] = event.target.value.split(":");
-											setDraft((prev) => ({
-												...prev,
-												hour: clampInt(hour, 0, 23),
-												minute: clampInt(minute, 0, 59),
-											}));
-										}}
-									/>
-								</div>
-							) : (
-								<div className="space-y-1.5">
-									<label
-										className="text-xs font-medium text-muted-foreground"
-										htmlFor="trigger-cron"
-									>
-										Schedule expression
-									</label>
-									<Input
-										id="trigger-cron"
-										value={draft.cron}
-										placeholder="0 9 * * 1-5"
-										className="font-mono"
-										onChange={(event) =>
-											setDraft((prev) => ({ ...prev, cron: event.target.value }))
-										}
-									/>
-								</div>
-							)}
-
-							<div className="space-y-1.5 sm:col-span-2">
-								<div className="text-xs font-medium text-muted-foreground">Timezone</div>
-								<TimezoneCombobox
-									value={draft.timezone}
-									onChange={(timezone) => setDraft((prev) => ({ ...prev, timezone }))}
-								/>
-							</div>
-						</div>
-
-						{issues.length > 0 && (
-							<Alert variant="destructive">
-								<AlertCircle aria-hidden />
-								<AlertTitle>
-									{issues.length === 1 ? "1 issue" : `${issues.length} issues`}
-								</AlertTitle>
-								<AlertDescription>
-									<ul className="list-inside list-disc">
-										{issues.map((issue) => (
-											<li key={issue}>{issue}</li>
-										))}
-									</ul>
-								</AlertDescription>
-							</Alert>
-						)}
-
-						<div className="flex items-center justify-end gap-2">
-							<Button
-								type="button"
-								variant="ghost"
-								size="sm"
-								onClick={cancelEdit}
-								disabled={updating}
-							>
-								Cancel
-							</Button>
-							<Button
-								type="button"
-								size="sm"
-								onClick={saveEdit}
-								disabled={updating}
-								className="relative"
-							>
-								<span className={updating ? "opacity-0" : undefined}>Save</span>
-								{updating ? (
-									<Spinner
-										size="xs"
-										className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
-									/>
-								) : null}
-							</Button>
-						</div>
-					</div>
-				) : null}
-			</div>
-
-			{canDelete && (
-				<DeleteTriggerDialog
-					open={deleteOpen}
-					onOpenChange={setDeleteOpen}
-					automationId={automationId}
-					triggerId={trigger.id}
-					triggerLabel={triggerLabel}
-				/>
-			)}
-		</>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/edit/automation-edit-content.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/edit/automation-edit-content.tsx
deleted file mode 100644
index c05bff7d9..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/edit/automation-edit-content.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-"use client";
-import { ShieldAlert } from "lucide-react";
-import { useAutomation } from "@/hooks/use-automation";
-import { AutomationBuilderForm } from "../../components/builder/automation-builder-form";
-import { useAutomationPermissions } from "../../hooks/use-automation-permissions";
-import { AutomationDetailLoading } from "../components/automation-detail-loading";
-import { AutomationNotFound } from "../components/automation-not-found";
-import { AutomationEditHeader } from "./components/automation-edit-header";
-
-interface AutomationEditContentProps {
-	searchSpaceId: number;
-	automationId: number;
-}
-
-/**
- * Client orchestrator for the edit route. Mirrors detail-content's branch
- * structure but gates on ``canUpdate`` instead of ``canRead``: a user who
- * can read but not update is bounced to the access-denied panel.
- */
-export function AutomationEditContent({ searchSpaceId, automationId }: AutomationEditContentProps) {
-	const perms = useAutomationPermissions();
-	const validId = Number.isInteger(automationId) && automationId > 0;
-	const { data: automation, isLoading, error } = useAutomation(validId ? automationId : undefined);
-
-	if (perms.loading) {
-		return <AutomationDetailLoading />;
-	}
-
-	if (!perms.canUpdate) {
-		return (
-			<div className="rounded-lg border border-border/60 bg-muted/20 px-6 py-12 text-center">
-				<ShieldAlert className="mx-auto h-10 w-10 text-muted-foreground" aria-hidden />
-				<h2 className="mt-3 text-base font-semibold text-foreground">Access denied</h2>
-				<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
-					You don't have permission to edit automations in this search space.
-				</p>
-			</div>
-		);
-	}
-
-	if (!validId) {
-		return <AutomationNotFound searchSpaceId={searchSpaceId} />;
-	}
-
-	if (isLoading) {
-		return <AutomationDetailLoading />;
-	}
-
-	if (error || !automation) {
-		return <AutomationNotFound searchSpaceId={searchSpaceId} error={error} />;
-	}
-
-	return (
-		<AutomationBuilderForm
-			mode="edit"
-			searchSpaceId={searchSpaceId}
-			automation={automation}
-			renderModeSwitcher={(modeSwitcher) => (
-				<AutomationEditHeader
-					automation={automation}
-					searchSpaceId={searchSpaceId}
-					modeSwitcher={modeSwitcher}
-				/>
-			)}
-		/>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/edit/components/automation-edit-header.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/edit/components/automation-edit-header.tsx
deleted file mode 100644
index ca477220e..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/edit/components/automation-edit-header.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client";
-import { ArrowLeft } from "lucide-react";
-import Link from "next/link";
-import type { ReactNode } from "react";
-import { Button } from "@/components/ui/button";
-import type { Automation } from "@/contracts/types/automation.types";
-
-interface AutomationEditHeaderProps {
-	automation: Automation;
-	searchSpaceId: number;
-	modeSwitcher?: ReactNode;
-}
-
-export function AutomationEditHeader({
-	automation,
-	searchSpaceId,
-	modeSwitcher,
-}: AutomationEditHeaderProps) {
-	const detailHref = `/dashboard/${searchSpaceId}/automations/${automation.id}`;
-
-	return (
-		<div className="space-y-3">
-			<Button asChild variant="ghost" size="sm" className="-ml-2 h-auto px-2 py-1">
-				<Link href={detailHref} className="text-xs text-muted-foreground">
-					<ArrowLeft className="mr-1.5 h-3.5 w-3.5" />
-					Back to automation
-				</Link>
-			</Button>
-			<div className="flex flex-wrap items-center justify-between gap-3">
-				<h1 className="text-xl md:text-2xl font-semibold text-foreground wrap-break-word">
-					Edit automation
-				</h1>
-				{modeSwitcher ? <div className="ml-auto">{modeSwitcher}</div> : null}
-			</div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/edit/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/edit/page.tsx
deleted file mode 100644
index 8477b9e12..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/edit/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { AutomationEditContent } from "./automation-edit-content";
-
-export default async function AutomationEditPage({
-	params,
-}: {
-	params: Promise<{ search_space_id: string; automation_id: string }>;
-}) {
-	const { search_space_id, automation_id } = await params;
-
-	return (
-		<div className="w-full space-y-6">
-			<AutomationEditContent
-				searchSpaceId={Number(search_space_id)}
-				automationId={Number(automation_id)}
-			/>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/page.tsx
deleted file mode 100644
index dbaceecdd..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { AutomationDetailContent } from "./automation-detail-content";
-
-export default async function AutomationDetailPage({
-	params,
-}: {
-	params: Promise<{ search_space_id: string; automation_id: string }>;
-}) {
-	const { search_space_id, automation_id } = await params;
-
-	return (
-		<div className="w-full space-y-6">
-			<AutomationDetailContent
-				searchSpaceId={Number(search_space_id)}
-				automationId={Number(automation_id)}
-			/>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/automations-content.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/automations-content.tsx
deleted file mode 100644
index d9c949058..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/automations-content.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-"use client";
-import { AlertCircle, ShieldAlert } from "lucide-react";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { useAutomations } from "@/hooks/use-automations";
-import { AutomationsEmptyState } from "./components/automations-empty-state";
-import { AutomationsHeader } from "./components/automations-header";
-import { AutomationsTable } from "./components/automations-table";
-import { useAutomationPermissions } from "./hooks/use-automation-permissions";
-
-interface AutomationsContentProps {
-	searchSpaceId: number;
-}
-
-/**
- * Client orchestrator for the automations list page. Pulls the active
- * search space's first page (via ``useAutomations`` → ``automationsListAtom``)
- * and the user's permissions, then decides between empty / loading / table.
- *
- * Read access is mandatory; anything else is hidden behind RBAC. The
- * permissions hook is co-located in this slice so adding/removing
- * surfaces is a one-file change.
- */
-export function AutomationsContent({ searchSpaceId }: AutomationsContentProps) {
-	const { automations, total, loading, error } = useAutomations();
-	const perms = useAutomationPermissions();
-
-	if (perms.loading) {
-		// Permissions gate the entire page; defer everything until we know.
-		return (
-			<>
-				<AutomationsHeader searchSpaceId={searchSpaceId} total={0} loading canCreate={false} />
-				<AutomationsTable
-					automations={[]}
-					searchSpaceId={searchSpaceId}
-					loading
-					canUpdate={false}
-					canDelete={false}
-				/>
-			</>
-		);
-	}
-
-	if (!perms.canRead) {
-		return (
-			<div className="rounded-lg border border-border/60 bg-muted/20 px-6 py-12 text-center">
-				<ShieldAlert className="mx-auto h-10 w-10 text-muted-foreground" aria-hidden />
-				<h2 className="mt-3 text-base font-semibold text-foreground">Access denied</h2>
-				<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
-					You don't have permission to view automations in this search space.
-				</p>
-			</div>
-		);
-	}
-
-	if (error) {
-		return (
-			<>
-				<AutomationsHeader
-					searchSpaceId={searchSpaceId}
-					total={0}
-					loading={false}
-					canCreate={perms.canCreate}
-				/>
-				<Alert variant="destructive">
-					<AlertCircle aria-hidden />
-					<AlertDescription>Couldn't load automations {error.message}</AlertDescription>
-				</Alert>
-			</>
-		);
-	}
-
-	if (!loading && automations.length === 0) {
-		return (
-			<>
-				<AutomationsHeader
-					searchSpaceId={searchSpaceId}
-					total={0}
-					loading={false}
-					canCreate={perms.canCreate}
-					showCreateCta={false}
-				/>
-				<AutomationsEmptyState searchSpaceId={searchSpaceId} canCreate={perms.canCreate} />
-			</>
-		);
-	}
-
-	return (
-		<>
-			<AutomationsHeader
-				searchSpaceId={searchSpaceId}
-				total={total}
-				loading={loading}
-				canCreate={perms.canCreate}
-			/>
-			<AutomationsTable
-				automations={automations}
-				searchSpaceId={searchSpaceId}
-				loading={loading}
-				canUpdate={perms.canUpdate}
-				canDelete={perms.canDelete}
-			/>
-		</>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automation-row-actions.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/automation-row-actions.tsx
deleted file mode 100644
index 95ee23445..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automation-row-actions.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-"use client";
-import { useAtomValue } from "jotai";
-import { MoreHorizontal, Pause, Play, Trash2 } from "lucide-react";
-import { useState } from "react";
-import { updateAutomationMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
-import { Button } from "@/components/ui/button";
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import type { AutomationSummary } from "@/contracts/types/automation.types";
-import { DeleteAutomationDialog } from "./delete-automation-dialog";
-
-interface AutomationRowActionsProps {
-	automation: AutomationSummary;
-	searchSpaceId: number;
-	canUpdate: boolean;
-	canDelete: boolean;
-}
-
-/**
- * Three-dot menu on each row: pause/resume (if updatable) and delete
- * (if deletable). The menu itself is hidden when the user has neither
- * permission so we don't render an empty trigger.
- */
-export function AutomationRowActions({
-	automation,
-	searchSpaceId,
-	canUpdate,
-	canDelete,
-}: AutomationRowActionsProps) {
-	const { mutateAsync: updateAutomation, isPending: updating } = useAtomValue(
-		updateAutomationMutationAtom
-	);
-	const [deleteOpen, setDeleteOpen] = useState(false);
-
-	if (!canUpdate && !canDelete) return null;
-
-	const nextStatus = automation.status === "active" ? "paused" : "active";
-	const pauseLabel = automation.status === "active" ? "Pause" : "Resume";
-	const PauseIcon = automation.status === "active" ? Pause : Play;
-	const canToggle = canUpdate && automation.status !== "archived";
-
-	async function handleTogglePause() {
-		await updateAutomation({
-			automationId: automation.id,
-			patch: { status: nextStatus },
-		});
-	}
-
-	return (
-		<>
-			<DropdownMenu>
-				<DropdownMenuTrigger asChild>
-					<Button
-						variant="ghost"
-						size="icon"
-						className="h-6 w-6 hover:bg-transparent"
-						aria-label={`Actions for ${automation.name}`}
-					>
-						<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
-					</Button>
-				</DropdownMenuTrigger>
-				<DropdownMenuContent align="end" className="w-32 z-80">
-					{canToggle && (
-						<DropdownMenuItem onSelect={handleTogglePause} disabled={updating}>
-							<PauseIcon className="mr-2 h-4 w-4" />
-							{pauseLabel}
-						</DropdownMenuItem>
-					)}
-					{canDelete && (
-						<DropdownMenuItem onSelect={() => setDeleteOpen(true)}>
-							<Trash2 className="mr-2 h-4 w-4" />
-							Delete
-						</DropdownMenuItem>
-					)}
-				</DropdownMenuContent>
-			</DropdownMenu>
-
-			{canDelete && (
-				<DeleteAutomationDialog
-					open={deleteOpen}
-					onOpenChange={setDeleteOpen}
-					automationId={automation.id}
-					automationName={automation.name}
-					searchSpaceId={searchSpaceId}
-				/>
-			)}
-		</>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automation-row.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/automation-row.tsx
deleted file mode 100644
index 74c95cee4..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automation-row.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-"use client";
-import Link from "next/link";
-import { TableCell, TableRow } from "@/components/ui/table";
-import type { AutomationSummary } from "@/contracts/types/automation.types";
-import { formatRelativeDate } from "@/lib/format-date";
-import { AutomationRowActions } from "./automation-row-actions";
-import { AutomationStatusBadge } from "./automation-status-badge";
-
-interface AutomationRowProps {
-	automation: AutomationSummary;
-	searchSpaceId: number;
-	canUpdate: boolean;
-	canDelete: boolean;
-}
-
-/**
- * One row in the automations table. The name links to the detail page;
- * actions are gated by ``canUpdate`` / ``canDelete``. Trigger summary
- * is intentionally left to the detail page — list responses don't
- * include triggers and we want to avoid N+1 detail fetches.
- */
-export function AutomationRow({
-	automation,
-	searchSpaceId,
-	canUpdate,
-	canDelete,
-}: AutomationRowProps) {
-	return (
-		<TableRow className="h-12 border-b border-border/60 hover:bg-muted/40">
-			<TableCell className="px-4 md:px-6 py-2.5 border-r border-border/60 align-middle">
-				<Link
-					href={`/dashboard/${searchSpaceId}/automations/${automation.id}`}
-					className="block truncate text-sm font-medium text-foreground hover:underline"
-				>
-					{automation.name}
-				</Link>
-			</TableCell>
-			<TableCell className="px-4 py-2.5 border-r border-border/60 w-32 align-middle">
-				<AutomationStatusBadge status={automation.status} />
-			</TableCell>
-			<TableCell className="hidden md:table-cell px-4 py-2.5 border-r border-border/60 w-40 align-middle text-xs text-muted-foreground">
-				{formatRelativeDate(automation.updated_at)}
-			</TableCell>
-			<TableCell className="px-4 md:px-6 py-2.5 w-16 align-middle">
-				<div className="flex justify-end">
-					<AutomationRowActions
-						automation={automation}
-						searchSpaceId={searchSpaceId}
-						canUpdate={canUpdate}
-						canDelete={canDelete}
-					/>
-				</div>
-			</TableCell>
-		</TableRow>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automation-status-badge.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/automation-status-badge.tsx
deleted file mode 100644
index c3cab1dc1..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automation-status-badge.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-"use client";
-import type { AutomationStatus } from "@/contracts/types/automation.types";
-import { cn } from "@/lib/utils";
-
-interface AutomationStatusBadgeProps {
-	status: AutomationStatus;
-	className?: string;
-}
-
-// Small borderless status pills, matching model-selector badges.
-const STATUS_STYLES: Record<AutomationStatus, { label: string; classes: string }> = {
-	active: {
-		label: "Active",
-		classes: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300",
-	},
-	paused: {
-		label: "Paused",
-		classes: "bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300",
-	},
-	archived: {
-		label: "Archived",
-		classes: "bg-muted text-muted-foreground",
-	},
-};
-
-export function AutomationStatusBadge({ status, className }: AutomationStatusBadgeProps) {
-	const { label, classes } = STATUS_STYLES[status];
-	return (
-		<span
-			className={cn(
-				"inline-flex items-center rounded-md border-0 px-1.5 py-0 text-sm font-medium leading-5",
-				classes,
-				className
-			)}
-		>
-			{label}
-		</span>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automation-triggers-summary.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/automation-triggers-summary.tsx
deleted file mode 100644
index 270a1f844..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automation-triggers-summary.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client";
-import { CalendarClock, Pause } from "lucide-react";
-import type { Trigger } from "@/contracts/types/automation.types";
-import { describeCron } from "@/lib/automations/describe-cron";
-
-interface AutomationTriggersSummaryProps {
-	triggers: Trigger[];
-}
-
-/**
- * One-line summary of an automation's triggers for the list view.
- *
- * v1 only registers ``schedule`` so this stays compact:
- *   - 0 triggers → "No triggers"
- *   - 1 schedule trigger → "Mon–Fri at 09:00 · UTC" + disabled badge if off
- *   - >1 → "N triggers"
- *
- * The detail page renders the full per-trigger editor.
- */
-export function AutomationTriggersSummary({ triggers }: AutomationTriggersSummaryProps) {
-	if (triggers.length === 0) {
-		return <span className="text-xs text-muted-foreground">No triggers</span>;
-	}
-
-	if (triggers.length > 1) {
-		return <span className="text-xs text-muted-foreground">{triggers.length} triggers</span>;
-	}
-
-	const [trigger] = triggers;
-
-	if (trigger.type === "schedule") {
-		const cron = typeof trigger.params.cron === "string" ? trigger.params.cron : undefined;
-		const tz = typeof trigger.params.timezone === "string" ? trigger.params.timezone : "UTC";
-		const human = cron ? describeCron(cron) : "Schedule";
-
-		return (
-			<span className="inline-flex items-center gap-1.5 text-xs">
-				<CalendarClock className="h-3.5 w-3.5 text-muted-foreground" aria-hidden />
-				<span className="text-foreground">{human}</span>
-				<span className="text-muted-foreground">· {tz}</span>
-				{!trigger.enabled && (
-					<span className="inline-flex items-center gap-1 rounded-md border border-border/60 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
-						<Pause className="h-2.5 w-2.5" aria-hidden />
-						Off
-					</span>
-				)}
-			</span>
-		);
-	}
-
-	return <span className="text-xs text-muted-foreground capitalize">{trigger.type}</span>;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-empty-state.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-empty-state.tsx
deleted file mode 100644
index 1ee71c636..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-empty-state.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"use client";
-import { AlarmClock } from "lucide-react";
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
-
-interface AutomationsEmptyStateProps {
-	searchSpaceId: number;
-	canCreate: boolean;
-}
-
-/**
- * Zero-state for the automations list. The primary CTA points to a new
- * chat — creation happens via the ``create_automation`` HITL tool, not a
- * "new automation" form. We surface the chat path explicitly so users
- * don't go hunting for an "add" button that doesn't exist.
- */
-export function AutomationsEmptyState({ searchSpaceId, canCreate }: AutomationsEmptyStateProps) {
-	return (
-		<div className="rounded-lg border border-dashed border-border/60 bg-muted/20 px-6 py-12 text-center">
-			<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted text-muted-foreground">
-				<AlarmClock className="h-6 w-6" aria-hidden />
-			</div>
-			<h3 className="mt-4 text-base font-semibold text-foreground">No automations yet</h3>
-			<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
-				Automations let SurfSense run agent tasks on a schedule. Describe what you want in chat and
-				SurfSense drafts the automation for your approval.
-			</p>
-			{canCreate ? (
-				<div className="mt-6 flex items-center justify-center gap-2 flex-wrap">
-					<Button asChild>
-						<Link href={`/dashboard/${searchSpaceId}/new-chat`}>Create via chat</Link>
-					</Button>
-					<Button
-						asChild
-						variant="ghost"
-						className="h-10 justify-start rounded-md bg-muted px-3 text-sm hover:bg-accent"
-					>
-						<Link href={`/dashboard/${searchSpaceId}/automations/new`}>Create manually</Link>
-					</Button>
-				</div>
-			) : (
-				<p className="mt-6 text-xs text-muted-foreground">
-					You don't have permission to create automations in this search space.
-				</p>
-			)}
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-header.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-header.tsx
deleted file mode 100644
index 5c1fcb507..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-header.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-"use client";
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
-
-interface AutomationsHeaderProps {
-	searchSpaceId: number;
-	total: number;
-	loading: boolean;
-	canCreate: boolean;
-	/**
-	 * Render the header's Create CTA. Defaults to true; the empty state owns
-	 * the primary CTA on its own card, so the orchestrator turns this off
-	 * there to avoid a duplicate button.
-	 */
-	showCreateCta?: boolean;
-}
-
-/**
- * Page header: title + count + "Create via chat" CTA. Creation is intent-driven
- * (the create_automation tool runs inside chat with a HITL approval card), so
- * the CTA links to a new chat rather than opening a form. Model eligibility is
- * handled per-automation in the builder + approval card, not gated here.
- */
-export function AutomationsHeader({
-	searchSpaceId,
-	total,
-	loading,
-	canCreate,
-	showCreateCta = true,
-}: AutomationsHeaderProps) {
-	return (
-		<div className="flex items-center justify-between gap-4 flex-wrap">
-			<div className="flex items-baseline gap-3">
-				<h1 className="text-xl md:text-2xl font-semibold text-foreground">Automations</h1>
-				{!loading && (
-					<span className="text-sm text-muted-foreground">
-						{total} {total === 1 ? "automation" : "automations"}
-					</span>
-				)}
-			</div>
-			{canCreate && showCreateCta && (
-				<div className="flex items-center gap-2">
-					<Button
-						asChild
-						size="sm"
-						variant="ghost"
-						className="justify-start rounded-md bg-muted px-3 hover:bg-accent"
-					>
-						<Link href={`/dashboard/${searchSpaceId}/automations/new`}>Create manually</Link>
-					</Button>
-					<Button asChild size="sm">
-						<Link href={`/dashboard/${searchSpaceId}/new-chat`}>Create via chat</Link>
-					</Button>
-				</div>
-			)}
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-loading.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-loading.tsx
deleted file mode 100644
index 1156be3f6..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-loading.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-import { Skeleton } from "@/components/ui/skeleton";
-import { TableCell, TableRow } from "@/components/ui/table";
-
-const ROW_KEYS = ["sk-1", "sk-2", "sk-3"];
-
-/**
- * Skeleton rows for the automations table. Number of rows is fixed since
- * we don't know the count ahead of time and three placeholders is enough
- * to communicate "loading" without flashing too much chrome.
- */
-export function AutomationsLoadingRows() {
-	return (
-		<>
-			{ROW_KEYS.map((key) => (
-				<TableRow key={key} className="border-b border-border/60 hover:bg-transparent">
-					<TableCell className="px-4 md:px-6 py-3 border-r border-border/60">
-						<div className="flex flex-col gap-1.5">
-							<Skeleton className="h-4 w-40" />
-							<Skeleton className="h-3 w-56" />
-						</div>
-					</TableCell>
-					<TableCell className="px-4 py-3 border-r border-border/60 w-32">
-						<Skeleton className="h-5 w-16 rounded-md" />
-					</TableCell>
-					<TableCell className="hidden md:table-cell px-4 py-3 border-r border-border/60 w-40">
-						<Skeleton className="h-3 w-20" />
-					</TableCell>
-					<TableCell className="px-4 md:px-6 py-3 w-16">
-						<Skeleton className="h-8 w-8 rounded-md ml-auto" />
-					</TableCell>
-				</TableRow>
-			))}
-		</>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-table.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-table.tsx
deleted file mode 100644
index 74c604173..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/automations-table.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-"use client";
-import { AlarmClock, CalendarDays, Info } from "lucide-react";
-import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import type { AutomationSummary } from "@/contracts/types/automation.types";
-import { AutomationRow } from "./automation-row";
-import { AutomationsLoadingRows } from "./automations-loading";
-
-interface AutomationsTableProps {
-	automations: AutomationSummary[];
-	searchSpaceId: number;
-	loading: boolean;
-	canUpdate: boolean;
-	canDelete: boolean;
-}
-
-/**
- * Table shell + header. Rows render below — loading state renders skeleton
- * rows in the same shell so the layout doesn't shift on data arrival.
- */
-export function AutomationsTable({
-	automations,
-	searchSpaceId,
-	loading,
-	canUpdate,
-	canDelete,
-}: AutomationsTableProps) {
-	return (
-		<div className="rounded-lg border border-border/60 bg-accent overflow-hidden">
-			<Table className="table-fixed w-full">
-				<TableHeader>
-					<TableRow className="hover:bg-transparent border-b border-border/60">
-						<TableHead className="px-4 md:px-6 border-r border-border/60">
-							<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
-								<AlarmClock size={14} className="opacity-60 text-muted-foreground" />
-								Name
-							</span>
-						</TableHead>
-						<TableHead className="border-r border-border/60 w-32">
-							<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
-								<Info size={14} className="opacity-60 text-muted-foreground" />
-								Status
-							</span>
-						</TableHead>
-						<TableHead className="hidden md:table-cell border-r border-border/60 w-40">
-							<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
-								<CalendarDays size={14} className="opacity-60 text-muted-foreground" />
-								Updated
-							</span>
-						</TableHead>
-						<TableHead className="px-4 md:px-6 w-16">
-							<span className="sr-only">Actions</span>
-						</TableHead>
-					</TableRow>
-				</TableHeader>
-				<TableBody>
-					{loading ? (
-						<AutomationsLoadingRows />
-					) : (
-						automations.map((automation) => (
-							<AutomationRow
-								key={automation.id}
-								automation={automation}
-								searchSpaceId={searchSpaceId}
-								canUpdate={canUpdate}
-								canDelete={canDelete}
-							/>
-						))
-					)}
-				</TableBody>
-			</Table>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/advanced-section.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/advanced-section.tsx
deleted file mode 100644
index 110de57f6..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/advanced-section.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-"use client";
-import { useState } from "react";
-import { Input } from "@/components/ui/input";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import type { BuilderExecution } from "@/lib/automations/builder-schema";
-import { Field } from "./form-field";
-
-interface AdvancedSectionProps {
-	execution: BuilderExecution;
-	tags: string[];
-	onExecutionChange: (patch: Partial<BuilderExecution>) => void;
-	onTagsChange: (tags: string[]) => void;
-}
-
-const BACKOFF_OPTIONS: ReadonlyArray<{ value: BuilderExecution["retryBackoff"]; label: string }> = [
-	{ value: "exponential", label: "Exponential" },
-	{ value: "linear", label: "Linear" },
-	{ value: "none", label: "None" },
-];
-
-const CONCURRENCY_OPTIONS: ReadonlyArray<{
-	value: BuilderExecution["concurrency"];
-	label: string;
-}> = [
-	{ value: "drop_if_running", label: "Skip if already running" },
-	{ value: "queue", label: "Queue the next run" },
-	{ value: "always", label: "Always run" },
-];
-
-function clampInt(raw: string, min: number, fallback: number): number {
-	const value = Number.parseInt(raw, 10);
-	if (Number.isNaN(value)) return fallback;
-	return Math.max(min, value);
-}
-
-export function AdvancedSection({
-	execution,
-	tags,
-	onExecutionChange,
-	onTagsChange,
-}: AdvancedSectionProps) {
-	const [tagsText, setTagsText] = useState(tags.join(", "));
-
-	function commitTags(text: string) {
-		const next = text
-			.split(",")
-			.map((tag) => tag.trim())
-			.filter(Boolean);
-		onTagsChange(next);
-	}
-
-	return (
-		<div className="space-y-4">
-			<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-				<Field label="Timeout (seconds)" hint="Wall-clock cap for the whole run">
-					<Input
-						type="number"
-						min={1}
-						value={execution.timeoutSeconds}
-						onChange={(e) =>
-							onExecutionChange({ timeoutSeconds: clampInt(e.target.value, 1, 600) })
-						}
-					/>
-				</Field>
-				<Field label="Max retries" hint="Per-step retry budget">
-					<Input
-						type="number"
-						min={0}
-						value={execution.maxRetries}
-						onChange={(e) => onExecutionChange({ maxRetries: clampInt(e.target.value, 0, 2) })}
-					/>
-				</Field>
-				<Field label="Retry backoff">
-					<Select
-						value={execution.retryBackoff}
-						onValueChange={(value) =>
-							onExecutionChange({ retryBackoff: value as BuilderExecution["retryBackoff"] })
-						}
-					>
-						<SelectTrigger className="w-full">
-							<SelectValue />
-						</SelectTrigger>
-						<SelectContent matchTriggerWidth={false} className="w-auto min-w-48">
-							{BACKOFF_OPTIONS.map((option) => (
-								<SelectItem key={option.value} value={option.value}>
-									{option.label}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
-				</Field>
-				<Field label="If already running">
-					<Select
-						value={execution.concurrency}
-						onValueChange={(value) =>
-							onExecutionChange({ concurrency: value as BuilderExecution["concurrency"] })
-						}
-					>
-						<SelectTrigger className="w-full">
-							<SelectValue />
-						</SelectTrigger>
-						<SelectContent matchTriggerWidth={false} className="w-auto min-w-64">
-							{CONCURRENCY_OPTIONS.map((option) => (
-								<SelectItem key={option.value} value={option.value}>
-									{option.label}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
-				</Field>
-			</div>
-
-			<Field label="Tags" hint="Comma-separated. Optional.">
-				<Input
-					value={tagsText}
-					placeholder="research, weekly"
-					onChange={(e) => setTagsText(e.target.value)}
-					onBlur={(e) => commitTags(e.target.value)}
-				/>
-			</Field>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/automation-builder-form.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/automation-builder-form.tsx
deleted file mode 100644
index a68e53a1c..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/automation-builder-form.tsx
+++ /dev/null
@@ -1,534 +0,0 @@
-"use client";
-import { useAtomValue } from "jotai";
-import { AlertCircle, Code2, LayoutList } from "lucide-react";
-import { useRouter } from "next/navigation";
-import type { ReactNode } from "react";
-import { useMemo, useState } from "react";
-import type { z } from "zod";
-import {
-	addTriggerMutationAtom,
-	createAutomationMutationAtom,
-	removeTriggerMutationAtom,
-	updateAutomationMutationAtom,
-	updateTriggerMutationAtom,
-} from "@/atoms/automations/automations-mutation.atoms";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import { Spinner } from "@/components/ui/spinner";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import {
-	type Automation,
-	automationCreateRequest,
-	automationUpdateRequest,
-} from "@/contracts/types/automation.types";
-import { useAutomationEligibleModels } from "@/hooks/use-automation-eligible-models";
-import {
-	type BuilderForm,
-	type BuilderModels,
-	buildCreatePayload,
-	builderFormSchema,
-	buildScheduleTrigger,
-	buildUpdatePayload,
-	createEmptyForm,
-	formFromAutomation,
-	type HydratableTrigger,
-	hasResolvedModels,
-	hydrateForm,
-} from "@/lib/automations/builder-schema";
-import { AdvancedSection } from "./advanced-section";
-import { AutomationModelFields } from "./automation-model-fields";
-import { BasicsSection } from "./basics-section";
-import { BuilderSummary } from "./builder-summary";
-import { JsonModePanel } from "./json-mode-panel";
-import { ScheduleSection } from "./schedule-section";
-import { TaskList } from "./task-list";
-import { UnattendedToggle } from "./unattended-toggle";
-
-interface AutomationBuilderFormProps {
-	mode: "create" | "edit";
-	searchSpaceId: number;
-	/** Required in edit mode; seeds the form and trigger reconciliation. */
-	automation?: Automation;
-	/**
-	 * Optional extra create-mode block reason (composed with the form's own
-	 * model-eligibility gate). Shown as the submit button's tooltip. Model
-	 * eligibility itself is now owned by the in-form pickers.
-	 */
-	submitDisabledReason?: string;
-	renderModeSwitcher?: (modeSwitcher: ReactNode) => ReactNode;
-}
-
-type Mode = "form" | "json";
-
-function mapFormErrors(error: z.ZodError): Record<string, string> {
-	const out: Record<string, string> = {};
-	for (const issue of error.issues) {
-		const path = issue.path;
-		let key: string;
-		if (path[0] === "tasks" && typeof path[1] === "number") key = `tasks.${path[1]}.query`;
-		else if (path[0] === "schedule") key = "schedule";
-		else key = String(path[0] ?? "_root");
-		if (!out[key]) out[key] = issue.message;
-	}
-	return out;
-}
-
-export function AutomationBuilderForm({
-	mode,
-	searchSpaceId,
-	automation,
-	submitDisabledReason,
-	renderModeSwitcher,
-}: AutomationBuilderFormProps) {
-	const router = useRouter();
-	const { mutateAsync: createAutomation } = useAtomValue(createAutomationMutationAtom);
-	const { mutateAsync: updateAutomation } = useAtomValue(updateAutomationMutationAtom);
-	const { mutateAsync: addTrigger } = useAtomValue(addTriggerMutationAtom);
-	const { mutateAsync: updateTrigger } = useAtomValue(updateTriggerMutationAtom);
-	const { mutateAsync: removeTrigger } = useAtomValue(removeTriggerMutationAtom);
-
-	// Initial state: create starts empty in form mode; edit hydrates, falling
-	// back to JSON mode when the definition can't be represented in the form.
-	const initial = useMemo(() => {
-		if (mode === "edit" && automation) {
-			const result = formFromAutomation(automation);
-			if (result.formable) {
-				return { mode: "form" as Mode, form: result.form, notice: undefined };
-			}
-			return {
-				mode: "json" as Mode,
-				form: createEmptyForm(),
-				notice: `This automation ${result.reason}, which the form can't show. Edit it as JSON below`,
-			};
-		}
-		return { mode: "form" as Mode, form: createEmptyForm(), notice: undefined };
-	}, [mode, automation]);
-
-	const [activeMode, setActiveMode] = useState<Mode>(initial.mode);
-	const [form, setForm] = useState<BuilderForm>(initial.form);
-	const [errors, setErrors] = useState<Record<string, string>>({});
-	const [rootError, setRootError] = useState<string | null>(null);
-
-	const [jsonValue, setJsonValue] = useState<Record<string, unknown>>(() =>
-		initial.mode === "json" ? jsonFromAutomation(automation) : {}
-	);
-	const [jsonIssues, setJsonIssues] = useState<string[]>([]);
-	const [jsonNotice, setJsonNotice] = useState<string | undefined>(initial.notice);
-
-	const [submitting, setSubmitting] = useState(false);
-
-	// Eligible models + the search-space-seeded defaults. Models are chosen per
-	// automation on create; in edit mode the backend preserves the captured
-	// snapshot, so the picker is create-only.
-	const eligibleModels = useAutomationEligibleModels();
-
-	// Resolve each slot during render: an explicit (non-zero) pick wins,
-	// otherwise fall back to the eligible default. No effect copies async hook
-	// data into state, so there's no flicker/loop and the user's pick is sticky.
-	const resolvedModels = useMemo<BuilderModels>(
-		() => ({
-			chatModelId: form.models.chatModelId || eligibleModels.llm.defaultId || 0,
-			imageConfigId: form.models.imageConfigId || eligibleModels.image.defaultId || 0,
-			visionConfigId: form.models.visionConfigId || eligibleModels.vision.defaultId || 0,
-		}),
-		[
-			form.models,
-			eligibleModels.llm.defaultId,
-			eligibleModels.image.defaultId,
-			eligibleModels.vision.defaultId,
-		]
-	);
-
-	// The form with resolved models folded in — what every payload builder reads.
-	const formForPayload = useMemo<BuilderForm>(
-		() => ({ ...form, models: resolvedModels }),
-		[form, resolvedModels]
-	);
-
-	function patchForm(patch: Partial<BuilderForm>) {
-		setForm((prev) => ({ ...prev, ...patch }));
-	}
-
-	function jsonFromCurrentForm(): Record<string, unknown> {
-		if (mode === "edit" && automation) {
-			return { ...buildUpdatePayload(formForPayload), status: automation.status };
-		}
-		const { search_space_id: _ignored, ...rest } = buildCreatePayload(
-			formForPayload,
-			searchSpaceId
-		);
-		return rest;
-	}
-
-	function switchToJson() {
-		setJsonValue(jsonFromCurrentForm());
-		setJsonIssues([]);
-		setJsonNotice(undefined);
-		setActiveMode("json");
-	}
-
-	function switchToForm() {
-		const result = tryJsonToForm();
-		if (result.ok) {
-			setForm(result.form);
-			setErrors({});
-			setRootError(null);
-			setActiveMode("form");
-			return;
-		}
-		setJsonIssues(result.issues);
-		setJsonNotice(result.notice);
-	}
-
-	function tryJsonToForm():
-		| { ok: true; form: BuilderForm }
-		| { ok: false; issues: string[]; notice?: string } {
-		// Read the raw tree defensively rather than strict-validating: an
-		// incomplete JSON edit should still round-trip into the form, where the
-		// form's own validation enforces completeness on submit.
-		const definition = jsonValue.definition;
-		if (!definition || typeof definition !== "object") {
-			return { ok: false, issues: [], notice: "Add a definition before switching to the form" };
-		}
-
-		const name =
-			typeof jsonValue.name === "string"
-				? jsonValue.name
-				: mode === "edit" && automation
-					? automation.name
-					: "";
-		const description = typeof jsonValue.description === "string" ? jsonValue.description : null;
-		const triggers =
-			mode === "edit" && automation
-				? (automation.triggers ?? [])
-				: extractTriggers(jsonValue.triggers);
-
-		const h = hydrateForm(name, description, definition, triggers);
-		return h.formable
-			? { ok: true, form: h.form }
-			: { ok: false, issues: [], notice: `Can't show in the form: it ${h.reason}` };
-	}
-
-	function validateForm(): Record<string, string> | null {
-		const result = builderFormSchema.safeParse(form);
-		const next = result.success ? {} : mapFormErrors(result.error);
-
-		// The schedule model fields aren't deeply validated by the schema.
-		if (form.schedule?.mode === "preset") {
-			const m = form.schedule.model;
-			if (m.frequency === "weekly" && m.daysOfWeek.length === 0) {
-				next.schedule = "Pick at least one day for the weekly schedule";
-			}
-		} else if (form.schedule?.mode === "cron" && !form.schedule.cron.trim()) {
-			next.schedule = "Enter a schedule expression";
-		}
-
-		return Object.keys(next).length > 0 ? next : null;
-	}
-
-	async function reconcileTriggers(automationId: number) {
-		const desired = buildScheduleTrigger(form);
-		const existing = (automation?.triggers ?? [])[0];
-		if (!existing && desired) {
-			await addTrigger({ automationId, payload: desired });
-		} else if (existing && !desired) {
-			await removeTrigger({ automationId, triggerId: existing.id });
-		} else if (existing && desired) {
-			await updateTrigger({
-				automationId,
-				triggerId: existing.id,
-				patch: { params: desired.params, enabled: desired.enabled },
-			});
-		}
-	}
-
-	async function submitForm() {
-		setRootError(null);
-		const formErrors = validateForm();
-		if (formErrors) {
-			setErrors(formErrors);
-			return;
-		}
-		setErrors({});
-
-		setSubmitting(true);
-		try {
-			if (mode === "edit" && automation) {
-				const payload = buildUpdatePayload(formForPayload);
-				const parsed = automationUpdateRequest.safeParse(payload);
-				if (!parsed.success) {
-					setRootError(zodIssueList(parsed.error).join("; "));
-					return;
-				}
-				await updateAutomation({ automationId: automation.id, patch: parsed.data });
-				await reconcileTriggers(automation.id);
-				router.push(`/dashboard/${searchSpaceId}/automations/${automation.id}`);
-			} else {
-				const payload = buildCreatePayload(formForPayload, searchSpaceId);
-				const parsed = automationCreateRequest.safeParse(payload);
-				if (!parsed.success) {
-					setRootError(zodIssueList(parsed.error).join("; "));
-					return;
-				}
-				const created = await createAutomation(parsed.data);
-				router.push(`/dashboard/${searchSpaceId}/automations/${created.id}`);
-			}
-		} catch (err) {
-			setRootError((err as Error).message ?? "Submit failed");
-		} finally {
-			setSubmitting(false);
-		}
-	}
-
-	async function submitJson() {
-		setJsonIssues([]);
-		setSubmitting(true);
-		try {
-			if (mode === "edit" && automation) {
-				const parsed = automationUpdateRequest.safeParse(jsonValue);
-				if (!parsed.success) {
-					setJsonIssues(zodIssueList(parsed.error));
-					return;
-				}
-				await updateAutomation({ automationId: automation.id, patch: parsed.data });
-				router.push(`/dashboard/${searchSpaceId}/automations/${automation.id}`);
-			} else {
-				const parsed = automationCreateRequest.safeParse({
-					...jsonValue,
-					search_space_id: searchSpaceId,
-				});
-				if (!parsed.success) {
-					setJsonIssues(zodIssueList(parsed.error));
-					return;
-				}
-				const created = await createAutomation(parsed.data);
-				router.push(`/dashboard/${searchSpaceId}/automations/${created.id}`);
-			}
-		} catch (err) {
-			setJsonIssues([(err as Error).message ?? "Submit failed"]);
-		} finally {
-			setSubmitting(false);
-		}
-	}
-
-	const submitLabel = mode === "edit" ? "Save changes" : "Create automation";
-	// Block creation until every model slot resolves to an eligible id. The
-	// per-field Alert already explains *why* a slot is empty; this just guards
-	// submit. `submitDisabledReason` (from the caller) still composes in.
-	const modelsUnresolved =
-		mode === "create" && !eligibleModels.isLoading && !hasResolvedModels(resolvedModels);
-	const effectiveDisabledReason =
-		submitDisabledReason ??
-		(modelsUnresolved
-			? "Set up a premium or your own (BYOK) agent, image, and vision model in role settings before creating an automation."
-			: undefined);
-	// Only gate creation; editing an existing automation isn't blocked here.
-	const submitBlocked = mode === "create" && !!effectiveDisabledReason;
-	const modeSwitcher = (
-		<Tabs
-			value={activeMode}
-			onValueChange={(value) => {
-				if (value === activeMode) return;
-				if (value === "form") switchToForm();
-				else if (value === "json") switchToJson();
-			}}
-		>
-			<TabsList className="h-6 gap-0 rounded-md bg-muted/60 p-0.5 select-none">
-				<TabsTrigger
-					value="form"
-					className="h-5 gap-1 px-1.5 text-[11px] select-none focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=active]:bg-muted-foreground/25 data-[state=active]:text-foreground data-[state=active]:shadow-none"
-				>
-					<LayoutList className="size-3 shrink-0" />
-					<span className="leading-none">Form</span>
-				</TabsTrigger>
-				<TabsTrigger
-					value="json"
-					className="h-5 gap-1 px-1.5 text-[11px] select-none focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=active]:bg-muted-foreground/25 data-[state=active]:text-foreground data-[state=active]:shadow-none"
-				>
-					<Code2 className="size-3 shrink-0" />
-					<span className="leading-none">Edit as JSON</span>
-				</TabsTrigger>
-			</TabsList>
-		</Tabs>
-	);
-
-	return (
-		<div className="space-y-4">
-			{renderModeSwitcher ? (
-				renderModeSwitcher(modeSwitcher)
-			) : (
-				<div className="flex items-center justify-end">{modeSwitcher}</div>
-			)}
-
-			{activeMode === "json" ? (
-				<JsonModePanel
-					value={jsonValue}
-					issues={jsonIssues}
-					notice={jsonNotice}
-					onChange={setJsonValue}
-				/>
-			) : (
-				<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-					<div className="lg:col-span-2">
-						<Card className="rounded-md border-accent bg-accent/20">
-							<section>
-								<CardHeader className="pb-3">
-									<CardTitle className="text-sm font-semibold">Basics</CardTitle>
-								</CardHeader>
-								<CardContent>
-									<BasicsSection
-										name={form.name}
-										description={form.description}
-										errors={errors}
-										onChange={patchForm}
-									/>
-								</CardContent>
-							</section>
-							<Separator className="mx-auto data-[orientation=horizontal]:w-[calc(100%-6rem)]" />
-							<section>
-								<CardHeader className="pb-3">
-									<CardTitle className="text-sm font-semibold">Tasks</CardTitle>
-								</CardHeader>
-								<CardContent className="space-y-4">
-									<TaskList
-										tasks={form.tasks}
-										errors={errors}
-										searchSpaceId={searchSpaceId}
-										onChange={(tasks) => patchForm({ tasks })}
-									/>
-									<UnattendedToggle
-										checked={form.unattended}
-										onChange={(unattended) => patchForm({ unattended })}
-									/>
-								</CardContent>
-							</section>
-							<Separator className="mx-auto data-[orientation=horizontal]:w-[calc(100%-6rem)]" />
-							<section>
-								<CardHeader className="pb-3">
-									<CardTitle className="text-sm font-semibold">Schedule</CardTitle>
-								</CardHeader>
-								<CardContent>
-									<ScheduleSection
-										schedule={form.schedule}
-										timezone={form.timezone}
-										errors={errors}
-										onScheduleChange={(schedule) => patchForm({ schedule })}
-										onTimezoneChange={(timezone) => patchForm({ timezone })}
-									/>
-								</CardContent>
-							</section>
-							<Separator className="mx-auto data-[orientation=horizontal]:w-[calc(100%-6rem)]" />
-							<section>
-								<CardHeader className="pb-3">
-									<CardTitle className="text-sm font-semibold">Models</CardTitle>
-								</CardHeader>
-								<CardContent>
-									<AutomationModelFields
-										searchSpaceId={searchSpaceId}
-										value={resolvedModels}
-										onChange={(patch) => patchForm({ models: { ...form.models, ...patch } })}
-									/>
-								</CardContent>
-							</section>
-							<Separator className="mx-auto data-[orientation=horizontal]:w-[calc(100%-6rem)]" />
-							<section>
-								<CardHeader className="pb-3">
-									<CardTitle className="text-sm font-semibold">Settings</CardTitle>
-								</CardHeader>
-								<CardContent>
-									<AdvancedSection
-										execution={form.execution}
-										tags={form.tags}
-										onExecutionChange={(patch) =>
-											patchForm({ execution: { ...form.execution, ...patch } })
-										}
-										onTagsChange={(tags) => patchForm({ tags })}
-									/>
-								</CardContent>
-							</section>
-						</Card>
-					</div>
-
-					<div className="lg:col-span-1">
-						<Card className="rounded-md border-accent bg-accent/20 lg:sticky lg:top-4">
-							<CardHeader className="pb-3">
-								<CardTitle className="text-sm font-semibold">Summary</CardTitle>
-							</CardHeader>
-							<CardContent>
-								<BuilderSummary form={form} />
-							</CardContent>
-						</Card>
-					</div>
-				</div>
-			)}
-
-			{rootError && (
-				<Alert variant="destructive">
-					<AlertCircle aria-hidden />
-					<AlertDescription>{rootError}</AlertDescription>
-				</Alert>
-			)}
-
-			<div className="flex items-center justify-end gap-2">
-				{submitBlocked ? (
-					<Tooltip>
-						<TooltipTrigger asChild>
-							{/* aria-disabled keeps the button focusable so the tooltip is
-							    reachable by hover and keyboard; onClick is a no-op. */}
-							<Button
-								type="button"
-								size="sm"
-								aria-disabled
-								className="cursor-not-allowed opacity-50"
-								onClick={(event) => event.preventDefault()}
-							>
-								{submitLabel}
-							</Button>
-						</TooltipTrigger>
-						<TooltipContent className="max-w-xs">{effectiveDisabledReason}</TooltipContent>
-					</Tooltip>
-				) : (
-					<Button
-						type="button"
-						size="sm"
-						disabled={submitting}
-						className="relative"
-						onClick={() => (activeMode === "json" ? submitJson() : submitForm())}
-					>
-						<span className={submitting ? "opacity-0" : ""}>{submitLabel}</span>
-						{submitting && <Spinner size="xs" className="absolute" />}
-					</Button>
-				)}
-			</div>
-		</div>
-	);
-}
-
-function extractTriggers(raw: unknown): HydratableTrigger[] {
-	if (!Array.isArray(raw)) return [];
-	return raw.map((entry) => {
-		const obj = entry && typeof entry === "object" ? (entry as Record<string, unknown>) : {};
-		return {
-			type: typeof obj.type === "string" ? obj.type : "",
-			params:
-				obj.params && typeof obj.params === "object" ? (obj.params as Record<string, unknown>) : {},
-		};
-	});
-}
-
-function zodIssueList(error: z.ZodError): string[] {
-	return error.issues.map((issue) => `${issue.path.join(".") || "(root)"}: ${issue.message}`);
-}
-
-function jsonFromAutomation(automation: Automation | undefined): Record<string, unknown> {
-	if (!automation) return {};
-	return {
-		name: automation.name,
-		description: automation.description ?? null,
-		status: automation.status,
-		definition: automation.definition,
-	};
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/automation-model-fields.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/automation-model-fields.tsx
deleted file mode 100644
index 6dd42366b..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/automation-model-fields.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-"use client";
-
-import { TriangleAlert } from "lucide-react";
-import Link from "next/link";
-import { memo, useId } from "react";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
-import {
-	Select,
-	SelectContent,
-	SelectGroup,
-	SelectItem,
-	SelectLabel,
-	SelectSeparator,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-	type EligibleModelKind,
-	type EligibleModelOption,
-	useAutomationEligibleModels,
-} from "@/hooks/use-automation-eligible-models";
-import { getProviderIcon } from "@/lib/provider-icons";
-import { Field } from "./form-field";
-
-export interface AutomationModelSelection {
-	chatModelId: number;
-	imageConfigId: number;
-	visionConfigId: number;
-}
-
-interface AutomationModelFieldsProps {
-	/** Resolved (effective) ids — never `0` once defaults are seeded. */
-	value: AutomationModelSelection;
-	onChange: (patch: Partial<AutomationModelSelection>) => void;
-	searchSpaceId: number;
-	errors?: Partial<Record<keyof AutomationModelSelection, string>>;
-}
-
-/**
- * Three eligible-only model pickers (Chat / Image / Vision) for the
- * automation builder + chat approval card. Options come from
- * {@link useAutomationEligibleModels} (premium globals + BYOK only); selection
- * is validated + snapshotted onto `definition.models` at create time.
- */
-export function AutomationModelFields({
-	value,
-	onChange,
-	searchSpaceId,
-	errors,
-}: AutomationModelFieldsProps) {
-	const { llm, image, vision, isLoading } = useAutomationEligibleModels();
-	const rolesHref = `/dashboard/${searchSpaceId}/search-space-settings/models`;
-
-	return (
-		<div className="flex flex-col gap-4">
-			<ModelSelectField
-				label="Chat model"
-				kind={llm}
-				value={value.chatModelId}
-				isLoading={isLoading}
-				rolesHref={rolesHref}
-				error={errors?.chatModelId}
-				onChange={(id) => onChange({ chatModelId: id })}
-			/>
-			<ModelSelectField
-				label="Image model"
-				kind={image}
-				value={value.imageConfigId}
-				isLoading={isLoading}
-				rolesHref={rolesHref}
-				error={errors?.imageConfigId}
-				onChange={(id) => onChange({ imageConfigId: id })}
-			/>
-			<ModelSelectField
-				label="Vision model"
-				kind={vision}
-				value={value.visionConfigId}
-				isLoading={isLoading}
-				rolesHref={rolesHref}
-				error={errors?.visionConfigId}
-				onChange={(id) => onChange({ visionConfigId: id })}
-			/>
-		</div>
-	);
-}
-
-interface ModelSelectFieldProps {
-	label: string;
-	kind: EligibleModelKind;
-	value: number;
-	isLoading: boolean;
-	rolesHref: string;
-	error?: string;
-	onChange: (id: number) => void;
-}
-
-const ModelSelectField = memo(function ModelSelectField({
-	label,
-	kind,
-	value,
-	isLoading,
-	rolesHref,
-	error,
-	onChange,
-}: ModelSelectFieldProps) {
-	const triggerId = useId();
-
-	if (isLoading) {
-		return (
-			<Field label={label}>
-				<Skeleton className="h-9 w-full" />
-			</Field>
-		);
-	}
-
-	if (kind.options.length === 0) {
-		return (
-			<Field label={label}>
-				<Alert variant="warning">
-					<TriangleAlert aria-hidden />
-					<AlertTitle>No eligible models</AlertTitle>
-					<AlertDescription className="block leading-5">
-						Use a premium model or your own (BYOK) model in{" "}
-						<Link href={rolesHref} className="font-medium underline underline-offset-2">
-							role settings
-						</Link>
-					</AlertDescription>
-				</Alert>
-			</Field>
-		);
-	}
-
-	const premium = kind.options.filter((o) => !o.isBYOK);
-	const byok = kind.options.filter((o) => o.isBYOK);
-	const selected = value ? kind.byId.get(value) : undefined;
-
-	return (
-		<Field label={label} htmlFor={triggerId} error={error}>
-			<Select value={value ? String(value) : undefined} onValueChange={(v) => onChange(Number(v))}>
-				<SelectTrigger
-					id={triggerId}
-					aria-label={label}
-					aria-invalid={error ? true : undefined}
-					className="w-full"
-				>
-					{selected ? (
-						<span className="flex items-center gap-2">
-							{getProviderIcon(selected.provider)}
-							<span className="truncate">{selected.name}</span>
-						</span>
-					) : (
-						<SelectValue placeholder="Select a model" />
-					)}
-				</SelectTrigger>
-				<SelectContent matchTriggerWidth={false} className="w-auto min-w-80 max-w-[90vw]">
-					{premium.length > 0 ? (
-						<SelectGroup>
-							<SelectLabel>Premium</SelectLabel>
-							{premium.map((option) => (
-								<ModelOption key={option.id} option={option} badge="Premium" />
-							))}
-						</SelectGroup>
-					) : null}
-					{premium.length > 0 && byok.length > 0 ? <SelectSeparator /> : null}
-					{byok.length > 0 ? (
-						<SelectGroup>
-							<SelectLabel>Your models</SelectLabel>
-							{byok.map((option) => (
-								<ModelOption key={option.id} option={option} badge="BYOK" />
-							))}
-						</SelectGroup>
-					) : null}
-				</SelectContent>
-			</Select>
-		</Field>
-	);
-});
-
-function ModelOption({
-	option,
-	badge,
-}: {
-	option: EligibleModelOption;
-	badge: "Premium" | "BYOK";
-}) {
-	return (
-		<SelectItem value={String(option.id)} description={option.modelName}>
-			<span className="flex items-center gap-2">
-				{getProviderIcon(option.provider)}
-				<span className="truncate">{option.name}</span>
-				<Badge variant={badge === "Premium" ? "secondary" : "outline"}>{badge}</Badge>
-			</span>
-		</SelectItem>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/basics-section.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/basics-section.tsx
deleted file mode 100644
index fdc9f4526..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/basics-section.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Field } from "./form-field";
-
-interface BasicsSectionProps {
-	name: string;
-	description: string | null;
-	errors: Record<string, string>;
-	onChange: (patch: { name?: string; description?: string | null }) => void;
-}
-
-export function BasicsSection({ name, description, errors, onChange }: BasicsSectionProps) {
-	return (
-		<div className="space-y-4">
-			<Field label="Name" htmlFor="automation-name" required error={errors.name}>
-				<Input
-					id="automation-name"
-					value={name}
-					maxLength={200}
-					placeholder="Weekly competitor digest"
-					onChange={(e) => onChange({ name: e.target.value })}
-				/>
-			</Field>
-
-			<Field
-				label="Description"
-				htmlFor="automation-description"
-				hint="Optional. A short note about what this automation is for."
-				error={errors.description}
-			>
-				<Textarea
-					id="automation-description"
-					value={description ?? ""}
-					rows={2}
-					placeholder="Summarize what changed and email me the highlights."
-					onChange={(e) => onChange({ description: e.target.value })}
-				/>
-			</Field>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/builder-summary.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/builder-summary.tsx
deleted file mode 100644
index 4ba9e4182..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/builder-summary.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-"use client";
-import { Dot } from "lucide-react";
-import { type BuilderForm, scheduleToCron } from "@/lib/automations/builder-schema";
-import { describeCron } from "@/lib/automations/describe-cron";
-
-interface BuilderSummaryProps {
-	form: BuilderForm;
-}
-
-/**
- * Live, read-only mirror of what will be created. Mirrors the layout of the
- * chat ``AutomationDraftPreview`` so the two creation paths feel consistent.
- */
-export function BuilderSummary({ form }: BuilderSummaryProps) {
-	const automationName = form.name.trim() || "Untitled automation";
-	const scheduleDescription = form.schedule ? describeCron(scheduleToCron(form.schedule)) : null;
-	const taskCountLabel = `${form.tasks.length} task${form.tasks.length === 1 ? "" : "s"}`;
-	const visibleTasks = form.tasks.slice(0, 2);
-	const hiddenTaskCount = form.tasks.length - visibleTasks.length;
-
-	return (
-		<div className="flex flex-col gap-4 text-sm">
-			<div className="flex flex-col gap-1">
-				<p className="truncate text-sm font-semibold text-muted-foreground" title={automationName}>
-					{automationName}
-				</p>
-			</div>
-
-			<div className="h-px bg-border/60" />
-
-			<div className="flex flex-col gap-3">
-				<SummaryRow label="Schedule">
-					{scheduleDescription ? (
-						<span className="flex flex-wrap items-center gap-x-1 gap-y-0.5">
-							<span>{scheduleDescription}</span>
-							<Dot className="size-4 text-muted-foreground" aria-hidden />
-							<span>{form.timezone}</span>
-						</span>
-					) : (
-						<span>No schedule — won't run automatically</span>
-					)}
-				</SummaryRow>
-
-				<SummaryRow label={taskCountLabel}>
-					<ol className="ml-4 space-y-1">
-						{visibleTasks.map((task, index) => (
-							<li key={task.id} className="flex gap-2">
-								<span className="shrink-0 text-muted-foreground">{index + 1}.</span>
-								<span className="line-clamp-1 min-w-0">
-									{task.query.trim() || "No instructions yet"}
-								</span>
-							</li>
-						))}
-						{hiddenTaskCount > 0 && (
-							<li className="text-muted-foreground">+{hiddenTaskCount} more tasks</li>
-						)}
-					</ol>
-				</SummaryRow>
-
-				<SummaryRow label="Approvals">
-					{form.unattended ? "Runs without approval prompts" : "Approval prompts are rejected"}
-				</SummaryRow>
-			</div>
-		</div>
-	);
-}
-
-function SummaryRow({ label, children }: { label: string; children: React.ReactNode }) {
-	return (
-		<div className="flex flex-col gap-1 text-xs">
-			<div className="font-medium text-muted-foreground">{label}</div>
-			<div className="text-foreground">{children}</div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/form-field.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/form-field.tsx
deleted file mode 100644
index 222efd9c6..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/form-field.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-import { AlertCircle } from "lucide-react";
-import type { ReactNode } from "react";
-import { Label } from "@/components/ui/label";
-import { cn } from "@/lib/utils";
-
-interface FieldProps {
-	label?: string;
-	htmlFor?: string;
-	hint?: string;
-	error?: string;
-	required?: boolean;
-	className?: string;
-	children: ReactNode;
-}
-
-/**
- * Label + control + (hint | inline error) stack shared by every builder
- * section. Keeps spacing and error styling consistent so individual sections
- * stay focused on their inputs.
- */
-export function Field({ label, htmlFor, hint, error, required, className, children }: FieldProps) {
-	return (
-		<div className={cn("space-y-1.5", className)}>
-			{label && (
-				<Label htmlFor={htmlFor} className="text-xs font-medium text-foreground">
-					{label}
-					{required && <span className="text-muted-foreground">*</span>}
-				</Label>
-			)}
-			{children}
-			{error ? (
-				<p className="flex items-center gap-1 text-xs text-destructive">
-					<AlertCircle className="h-3 w-3 shrink-0" aria-hidden />
-					{error}
-				</p>
-			) : hint ? (
-				<p className="text-xs text-muted-foreground">{hint}</p>
-			) : null}
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/json-mode-panel.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/json-mode-panel.tsx
deleted file mode 100644
index 412533d36..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/json-mode-panel.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client";
-import { AlertCircle, TriangleAlert } from "lucide-react";
-import { JsonView } from "@/components/json-view";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-
-interface JsonModePanelProps {
-	value: Record<string, unknown>;
-	issues: string[];
-	notice?: string;
-	onChange: (next: Record<string, unknown>) => void;
-}
-
-/**
- * Raw-JSON escape hatch. Edits the same payload the form produces; the
- * orchestrator validates it against the contract schema on submit. Shown when
- * the user opts into "Edit as JSON" or when an existing definition uses
- * features the form can't represent.
- */
-export function JsonModePanel({ value, issues, notice, onChange }: JsonModePanelProps) {
-	return (
-		<div className="space-y-4">
-			{notice && (
-				<Alert variant="warning">
-					<TriangleAlert aria-hidden />
-					<AlertDescription>{notice}</AlertDescription>
-				</Alert>
-			)}
-
-			<JsonView
-				src={value}
-				editable
-				onChange={(next) => onChange(next as Record<string, unknown>)}
-				collapsed={false}
-				className="max-h-144 overflow-auto rounded-md border border-accent bg-accent/20"
-			/>
-
-			{issues.length > 0 && (
-				<Alert variant="destructive">
-					<AlertCircle aria-hidden />
-					<AlertTitle>{issues.length === 1 ? "1 issue" : `${issues.length} issues`}</AlertTitle>
-					<AlertDescription>
-						<ul className="list-inside list-disc">
-							{issues.map((issue) => (
-								<li key={issue}>{issue}</li>
-							))}
-						</ul>
-					</AlertDescription>
-				</Alert>
-			)}
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/mention-task-input.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/mention-task-input.tsx
deleted file mode 100644
index c0651a90b..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/mention-task-input.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import type { MentionedDocumentInfo } from "@/atoms/chat/mentioned-documents.atom";
-import {
-	InlineMentionEditor,
-	type InlineMentionEditorRef,
-	type MentionChipInput,
-	type MentionedDocument,
-	type SuggestionAnchorRect,
-	type SuggestionTriggerInfo,
-} from "@/components/assistant-ui/inline-mention-editor";
-import { ComposerSuggestionPopoverContent } from "@/components/new-chat/composer-suggestion-popup";
-import {
-	DocumentMentionPicker,
-	type DocumentMentionPickerRef,
-} from "@/components/new-chat/document-mention-picker";
-import { Popover, PopoverAnchor } from "@/components/ui/popover";
-import { getMentionDocKey } from "@/lib/chat/mention-doc-key";
-import { cn } from "@/lib/utils";
-
-interface MentionTaskInputProps {
-	searchSpaceId: number;
-	value: string;
-	mentions: MentionedDocumentInfo[];
-	onChange: (text: string, mentions: MentionedDocumentInfo[]) => void;
-	placeholder?: string;
-	disabled?: boolean;
-}
-
-type AnchorPoint = { left: number; top: number };
-
-// Mirror of thread.tsx's getComposerSuggestionAnchorPoint -- kept local so the
-// chat composer stays untouched.
-function getAnchorPoint(rect: SuggestionAnchorRect | null): AnchorPoint | null {
-	if (!rect) return null;
-	return { left: rect.left, top: rect.bottom };
-}
-
-/** Project the editor's chip shape into the canonical mention info union. */
-function toMentionInfo(doc: MentionedDocument): MentionedDocumentInfo {
-	if (doc.kind === "connector") {
-		return {
-			id: doc.id,
-			title: doc.title,
-			kind: "connector",
-			connector_type: doc.connector_type ?? "UNKNOWN",
-			account_name: doc.account_name ?? doc.title,
-		};
-	}
-	if (doc.kind === "folder") {
-		return { id: doc.id, title: doc.title, kind: "folder" };
-	}
-	return {
-		id: doc.id,
-		title: doc.title,
-		document_type: doc.document_type ?? "UNKNOWN",
-		kind: "doc",
-	};
-}
-
-/** Project a mention info into the editor's chip-insertion shape. */
-function toChipInput(mention: MentionedDocumentInfo): MentionChipInput {
-	if (mention.kind === "connector") {
-		return {
-			id: mention.id,
-			title: mention.title,
-			kind: "connector",
-			connector_type: mention.connector_type,
-			account_name: mention.account_name,
-		};
-	}
-	if (mention.kind === "folder") {
-		return { id: mention.id, title: mention.title, kind: "folder" };
-	}
-	return {
-		id: mention.id,
-		title: mention.title,
-		kind: "doc",
-		document_type: mention.document_type,
-	};
-}
-
-function removeFirstToken(text: string, token: string): string {
-	const index = text.indexOf(token);
-	if (index === -1) return text;
-	return text.slice(0, index) + text.slice(index + token.length);
-}
-
-/**
- * Task input that reuses the chat ``@`` mention experience -- the same
- * ``InlineMentionEditor`` + ``DocumentMentionPicker`` as the composer. The
- * editor is the source of truth while mounted; ``onChange`` reports both the
- * plain text (chips rendered as ``@Title``) and the structured mention list
- * so the builder can persist IDs for the run.
- */
-export function MentionTaskInput({
-	searchSpaceId,
-	value,
-	mentions,
-	onChange,
-	placeholder,
-	disabled,
-}: MentionTaskInputProps) {
-	const editorRef = useRef<InlineMentionEditorRef>(null);
-	const pickerRef = useRef<DocumentMentionPickerRef>(null);
-
-	const [showPopover, setShowPopover] = useState(false);
-	const [mentionQuery, setMentionQuery] = useState("");
-	const [anchorPoint, setAnchorPoint] = useState<AnchorPoint | null>(null);
-
-	// One-shot hydration of existing mentions into real chips. ``initialText``
-	// seeds the literal ``@Title`` text; here we strip those tokens and
-	// re-insert them as chips so the editor reports the structured docs (and
-	// editing can't silently drop the mention IDs). Position isn't preserved
-	// on re-hydration -- chips append after the remaining prose.
-	const didHydrateRef = useRef(false);
-	useEffect(() => {
-		if (didHydrateRef.current) return;
-		didHydrateRef.current = true;
-		if (mentions.length === 0) return;
-		const editor = editorRef.current;
-		if (!editor) return;
-
-		let baseText = value;
-		for (const mention of mentions) {
-			baseText = removeFirstToken(baseText, `@${mention.title}`);
-		}
-		baseText = baseText.replace(/[ \t]{2,}/g, " ").trim();
-		editor.setText(baseText);
-		for (const mention of mentions) {
-			editor.insertMentionChip(toChipInput(mention), { removeTriggerText: false });
-		}
-	}, [mentions, value]);
-
-	const closePopover = useCallback(() => {
-		setShowPopover(false);
-		setMentionQuery("");
-		setAnchorPoint(null);
-	}, []);
-
-	const handleEditorChange = useCallback(
-		(text: string, docs: MentionedDocument[]) => {
-			onChange(text, docs.map(toMentionInfo));
-		},
-		[onChange]
-	);
-
-	const handleMentionTrigger = useCallback((trigger: SuggestionTriggerInfo) => {
-		const point = getAnchorPoint(trigger.anchorRect);
-		if (!point) {
-			setShowPopover(false);
-			setMentionQuery("");
-			setAnchorPoint(null);
-			return;
-		}
-		setAnchorPoint((current) => current ?? point);
-		setShowPopover(true);
-		setMentionQuery(trigger.query);
-	}, []);
-
-	const handleMentionClose = useCallback(() => {
-		setShowPopover((open) => {
-			if (open) {
-				setMentionQuery("");
-				setAnchorPoint(null);
-			}
-			return false;
-		});
-	}, []);
-
-	const handlePopoverOpenChange = useCallback((open: boolean) => {
-		setShowPopover(open);
-		if (!open) {
-			setMentionQuery("");
-			setAnchorPoint(null);
-		}
-	}, []);
-
-	const handleKeyDown = useCallback(
-		(e: React.KeyboardEvent) => {
-			if (!showPopover) return;
-			if (e.key === "ArrowDown") {
-				e.preventDefault();
-				pickerRef.current?.moveDown();
-			} else if (e.key === "ArrowUp") {
-				e.preventDefault();
-				pickerRef.current?.moveUp();
-			} else if (e.key === "Enter") {
-				e.preventDefault();
-				pickerRef.current?.selectHighlighted();
-			} else if (e.key === "Escape") {
-				e.preventDefault();
-				if (pickerRef.current?.goBack()) return;
-				closePopover();
-			}
-		},
-		[showPopover, closePopover]
-	);
-
-	const handleSelection = useCallback(
-		(picked: MentionedDocumentInfo[]) => {
-			const editor = editorRef.current;
-			const existing = new Set(
-				(editor?.getMentionedDocuments() ?? []).map((doc) => getMentionDocKey(doc))
-			);
-			for (const mention of picked) {
-				const key = getMentionDocKey(mention);
-				if (existing.has(key)) continue;
-				editor?.insertMentionChip(toChipInput(mention));
-				existing.add(key);
-			}
-			closePopover();
-		},
-		[closePopover]
-	);
-
-	return (
-		<div
-			className={cn(
-				"border-popover-border focus-within:border-ring focus-within:ring-ring/50 dark:bg-input/30 min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px]",
-				disabled && "cursor-not-allowed opacity-50"
-			)}
-		>
-			<Popover open={showPopover} onOpenChange={handlePopoverOpenChange}>
-				{anchorPoint ? (
-					<>
-						<PopoverAnchor
-							className="pointer-events-none fixed size-0"
-							style={{ left: anchorPoint.left, top: anchorPoint.top }}
-						/>
-						<ComposerSuggestionPopoverContent side="bottom">
-							<DocumentMentionPicker
-								ref={pickerRef}
-								searchSpaceId={searchSpaceId}
-								onSelectionChange={handleSelection}
-								onDone={closePopover}
-								initialSelectedDocuments={mentions}
-								externalSearch={mentionQuery}
-							/>
-						</ComposerSuggestionPopoverContent>
-					</>
-				) : null}
-			</Popover>
-			<InlineMentionEditor
-				ref={editorRef}
-				initialText={value}
-				placeholder={placeholder ?? "Type @ to reference files, folders, or connectors"}
-				disabled={disabled}
-				onChange={handleEditorChange}
-				onMentionTrigger={handleMentionTrigger}
-				onMentionClose={handleMentionClose}
-				onKeyDown={handleKeyDown}
-			/>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/schedule-section.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/schedule-section.tsx
deleted file mode 100644
index 810984acd..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/schedule-section.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-"use client";
-import { CalendarClock, CalendarOff, Dot, Plus, X } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { type BuilderSchedule, scheduleToCron } from "@/lib/automations/builder-schema";
-import { describeCron } from "@/lib/automations/describe-cron";
-import {
-	DEFAULT_SCHEDULE,
-	FREQUENCY_OPTIONS,
-	fromCron,
-	type ScheduleFrequency,
-	type ScheduleModel,
-	toCron,
-	WEEKDAY_OPTIONS,
-} from "@/lib/automations/schedule-builder";
-import { cn } from "@/lib/utils";
-import { Field } from "./form-field";
-import { TimezoneCombobox } from "./timezone-combobox";
-
-interface ScheduleSectionProps {
-	schedule: BuilderSchedule | null;
-	timezone: string;
-	errors: Record<string, string>;
-	onScheduleChange: (schedule: BuilderSchedule | null) => void;
-	onTimezoneChange: (timezone: string) => void;
-}
-
-function pad(value: number): string {
-	return value.toString().padStart(2, "0");
-}
-
-export function ScheduleSection({
-	schedule,
-	timezone,
-	errors,
-	onScheduleChange,
-	onTimezoneChange,
-}: ScheduleSectionProps) {
-	if (schedule === null) {
-		return (
-			<div className="rounded-lg border border-dashed border-border/60 bg-muted/20 px-4 py-6 text-center">
-				<CalendarOff className="mx-auto h-7 w-7 text-muted-foreground" aria-hidden />
-				<p className="mt-2 text-sm text-foreground">No schedule</p>
-				<p className="mt-0.5 text-xs text-muted-foreground">
-					This automation won't run automatically until you add one.
-				</p>
-				<Button
-					type="button"
-					variant="outline"
-					size="sm"
-					className="mt-3"
-					onClick={() => onScheduleChange({ mode: "preset", model: { ...DEFAULT_SCHEDULE } })}
-				>
-					<Plus className="mr-1.5 h-4 w-4" />
-					Add a schedule
-				</Button>
-			</div>
-		);
-	}
-
-	const cron = scheduleToCron(schedule);
-	const label = describeCron(cron);
-
-	return (
-		<div className="space-y-3">
-			<div className="flex items-center justify-between gap-3 rounded-md border border-border/60 bg-accent px-3 py-2">
-				<div className="flex items-center gap-2 text-sm min-w-0">
-					<CalendarClock className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
-					<span className="font-medium text-foreground truncate">{label}</span>
-					<Dot className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
-					<span className="text-muted-foreground shrink-0">{timezone}</span>
-				</div>
-				<Button
-					type="button"
-					variant="ghost"
-					size="icon"
-					className="h-6 w-6 shrink-0 text-muted-foreground hover:text-foreground"
-					aria-label="Remove schedule"
-					onClick={() => onScheduleChange(null)}
-				>
-					<X className="h-4 w-4" />
-				</Button>
-			</div>
-
-			{schedule.mode === "preset" ? (
-				<PresetEditor
-					model={schedule.model}
-					onChange={(model) => onScheduleChange({ mode: "preset", model })}
-					onSwitchToCron={() => onScheduleChange({ mode: "cron", cron: toCron(schedule.model) })}
-				/>
-			) : (
-				<CronEditor
-					cron={schedule.cron}
-					error={errors.schedule}
-					onChange={(value) => onScheduleChange({ mode: "cron", cron: value })}
-					onSwitchToPreset={() =>
-						onScheduleChange({
-							mode: "preset",
-							model: fromCron(schedule.cron) ?? { ...DEFAULT_SCHEDULE },
-						})
-					}
-				/>
-			)}
-
-			<Field label="Timezone">
-				<TimezoneCombobox value={timezone} onChange={onTimezoneChange} />
-			</Field>
-		</div>
-	);
-}
-
-interface PresetEditorProps {
-	model: ScheduleModel;
-	onChange: (model: ScheduleModel) => void;
-	onSwitchToCron: () => void;
-}
-
-function PresetEditor({ model, onChange, onSwitchToCron }: PresetEditorProps) {
-	const weeklyNoDays = model.frequency === "weekly" && model.daysOfWeek.length === 0;
-
-	return (
-		<div className="space-y-3">
-			<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-				<Field label="Frequency">
-					<Select
-						value={model.frequency}
-						onValueChange={(value) => onChange({ ...model, frequency: value as ScheduleFrequency })}
-					>
-						<SelectTrigger className="w-full">
-							<SelectValue />
-						</SelectTrigger>
-						<SelectContent matchTriggerWidth={false} className="w-auto min-w-64">
-							{FREQUENCY_OPTIONS.map((option) => (
-								<SelectItem key={option.value} value={option.value}>
-									{option.label}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
-				</Field>
-
-				{model.frequency === "hourly" ? (
-					<Field label="At minute">
-						<Input
-							type="number"
-							min={0}
-							max={59}
-							value={model.minute}
-							onChange={(e) => onChange({ ...model, minute: clampInt(e.target.value, 0, 59) })}
-						/>
-					</Field>
-				) : (
-					<Field label="At time">
-						<Input
-							type="time"
-							value={`${pad(model.hour)}:${pad(model.minute)}`}
-							onChange={(e) => {
-								const [h, m] = e.target.value.split(":");
-								onChange({
-									...model,
-									hour: clampInt(h, 0, 23),
-									minute: clampInt(m, 0, 59),
-								});
-							}}
-						/>
-					</Field>
-				)}
-			</div>
-
-			{model.frequency === "weekly" && (
-				<Field label="On days" error={weeklyNoDays ? "Pick at least one day" : undefined}>
-					<div className="flex flex-wrap gap-1.5">
-						{WEEKDAY_OPTIONS.map((day) => {
-							const active = model.daysOfWeek.includes(day.value);
-							return (
-								<button
-									key={day.value}
-									type="button"
-									aria-pressed={active}
-									onClick={() =>
-										onChange({ ...model, daysOfWeek: toggleDay(model.daysOfWeek, day.value) })
-									}
-									className={cn(
-										"rounded-md border px-2.5 py-1 text-xs font-medium transition-colors",
-										active
-											? "border-primary bg-primary text-primary-foreground"
-											: "border-border/60 bg-background text-muted-foreground hover:bg-muted"
-									)}
-								>
-									{day.short}
-								</button>
-							);
-						})}
-					</div>
-				</Field>
-			)}
-
-			{model.frequency === "monthly" && (
-				<Field label="Day of month" hint={"1\u201331."}>
-					<Input
-						type="number"
-						min={1}
-						max={31}
-						value={model.dayOfMonth}
-						onChange={(e) => onChange({ ...model, dayOfMonth: clampInt(e.target.value, 1, 31) })}
-						className="w-24"
-					/>
-				</Field>
-			)}
-
-			<button
-				type="button"
-				onClick={onSwitchToCron}
-				className="text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
-			>
-				Advanced: enter a schedule expression
-			</button>
-		</div>
-	);
-}
-
-interface CronEditorProps {
-	cron: string;
-	error?: string;
-	onChange: (cron: string) => void;
-	onSwitchToPreset: () => void;
-}
-
-function CronEditor({ cron, error, onChange, onSwitchToPreset }: CronEditorProps) {
-	const trimmed = cron.trim();
-	const label = trimmed ? describeCron(trimmed) : null;
-
-	return (
-		<div className="space-y-2">
-			<Field
-				label="Schedule expression"
-				hint="Five-field cron, e.g. 0 9 * * 1-5 (minute hour day month weekday)."
-				error={error}
-			>
-				<Input
-					value={cron}
-					placeholder="0 9 * * 1-5"
-					className="font-mono"
-					onChange={(e) => onChange(e.target.value)}
-				/>
-			</Field>
-			{label && label !== trimmed && <p className="text-xs text-muted-foreground">Runs: {label}</p>}
-			<button
-				type="button"
-				onClick={onSwitchToPreset}
-				className="text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
-			>
-				Use the simple picker
-			</button>
-		</div>
-	);
-}
-
-function clampInt(raw: string, min: number, max: number): number {
-	const value = Number.parseInt(raw, 10);
-	if (Number.isNaN(value)) return min;
-	return Math.min(max, Math.max(min, value));
-}
-
-function toggleDay(days: number[], value: number): number[] {
-	return days.includes(value)
-		? days.filter((day) => day !== value)
-		: [...days, value].sort((a, b) => a - b);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/task-item.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/task-item.tsx
deleted file mode 100644
index 3096d72a1..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/task-item.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-"use client";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown, ChevronRight, ChevronUp, Trash2 } from "lucide-react";
-import { Accordion, AccordionContent, AccordionItem } from "@/components/ui/accordion";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import type { BuilderTask } from "@/lib/automations/builder-schema";
-import { Field } from "./form-field";
-import { MentionTaskInput } from "./mention-task-input";
-
-interface TaskItemProps {
-	index: number;
-	total: number;
-	task: BuilderTask;
-	searchSpaceId: number;
-	error?: string;
-	onChange: (patch: Partial<BuilderTask>) => void;
-	onMoveUp: () => void;
-	onMoveDown: () => void;
-	onRemove: () => void;
-}
-
-function parseOptionalInt(raw: string): number | null {
-	const trimmed = raw.trim();
-	if (trimmed === "") return null;
-	const value = Number.parseInt(trimmed, 10);
-	return Number.isNaN(value) ? null : value;
-}
-
-export function TaskItem({
-	index,
-	total,
-	task,
-	searchSpaceId,
-	error,
-	onChange,
-	onMoveUp,
-	onMoveDown,
-	onRemove,
-}: TaskItemProps) {
-	return (
-		<div className="rounded-md border border-border/60 bg-transparent p-3 space-y-3">
-			<div className="flex items-center justify-between gap-2">
-				<span className="inline-flex items-center gap-2 text-xs font-medium text-muted-foreground">
-					<span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-foreground">
-						{index + 1}
-					</span>
-					Task {index + 1}
-				</span>
-				<div className="flex items-center gap-0.5">
-					<Button
-						type="button"
-						variant="ghost"
-						size="icon"
-						className="h-7 w-7 text-muted-foreground"
-						disabled={index === 0}
-						aria-label="Move task up"
-						onClick={onMoveUp}
-					>
-						<ChevronUp className="h-4 w-4" />
-					</Button>
-					<Button
-						type="button"
-						variant="ghost"
-						size="icon"
-						className="h-7 w-7 text-muted-foreground"
-						disabled={index === total - 1}
-						aria-label="Move task down"
-						onClick={onMoveDown}
-					>
-						<ChevronDown className="h-4 w-4" />
-					</Button>
-					<Button
-						type="button"
-						variant="ghost"
-						size="icon"
-						className="h-7 w-7 text-muted-foreground hover:text-destructive"
-						disabled={total === 1}
-						aria-label="Remove task"
-						onClick={onRemove}
-					>
-						<Trash2 className="h-4 w-4" />
-					</Button>
-				</div>
-			</div>
-
-			<Field
-				error={error}
-				hint="Type @ to reference files, folders, or connectors for extra context."
-			>
-				<MentionTaskInput
-					searchSpaceId={searchSpaceId}
-					value={task.query}
-					mentions={task.mentions}
-					placeholder="What should the agent do? e.g. Summarize new docs in @Marketing since the last run."
-					onChange={(query, mentions) => onChange({ query, mentions })}
-				/>
-			</Field>
-
-			<Accordion type="single" collapsible>
-				<AccordionItem value="advanced" className="border-b-0">
-					<AccordionPrimitive.Header className="flex">
-						<AccordionPrimitive.Trigger className="group flex flex-1 items-center justify-between rounded-md py-1.5 text-left text-xs font-medium text-muted-foreground outline-none transition-all focus-visible:ring-[3px] focus-visible:ring-ring/50">
-							Advanced
-							<ChevronRight className="pointer-events-none size-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" />
-						</AccordionPrimitive.Trigger>
-					</AccordionPrimitive.Header>
-					<AccordionContent className="pb-1">
-						<div className="grid grid-cols-2 gap-3">
-							<Field label="Max retries">
-								<Input
-									type="number"
-									min={0}
-									max={10}
-									value={task.maxRetries ?? ""}
-									placeholder="2 retries"
-									onChange={(e) => onChange({ maxRetries: parseOptionalInt(e.target.value) })}
-								/>
-							</Field>
-							<Field label="Timeout (seconds)">
-								<Input
-									type="number"
-									min={1}
-									value={task.timeoutSeconds ?? ""}
-									placeholder="600 seconds"
-									onChange={(e) => onChange({ timeoutSeconds: parseOptionalInt(e.target.value) })}
-								/>
-							</Field>
-						</div>
-					</AccordionContent>
-				</AccordionItem>
-			</Accordion>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/task-list.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/task-list.tsx
deleted file mode 100644
index 209241258..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/task-list.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-"use client";
-import { Plus } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { type BuilderTask, emptyTask } from "@/lib/automations/builder-schema";
-import { TaskItem } from "./task-item";
-
-interface TaskListProps {
-	tasks: BuilderTask[];
-	errors: Record<string, string>;
-	searchSpaceId: number;
-	onChange: (tasks: BuilderTask[]) => void;
-}
-
-/**
- * Ordered list of agent tasks. Steps run sequentially in the order shown.
- * Reordering is done with up/down buttons to avoid a drag-and-drop dependency.
- */
-export function TaskList({ tasks, errors, searchSpaceId, onChange }: TaskListProps) {
-	function updateAt(index: number, patch: Partial<BuilderTask>) {
-		onChange(tasks.map((task, i) => (i === index ? { ...task, ...patch } : task)));
-	}
-
-	function removeAt(index: number) {
-		onChange(tasks.filter((_, i) => i !== index));
-	}
-
-	function move(index: number, direction: -1 | 1) {
-		const target = index + direction;
-		if (target < 0 || target >= tasks.length) return;
-		const next = [...tasks];
-		[next[index], next[target]] = [next[target], next[index]];
-		onChange(next);
-	}
-
-	return (
-		<div className="space-y-3">
-			{tasks.map((task, index) => (
-				<TaskItem
-					key={task.id}
-					index={index}
-					total={tasks.length}
-					task={task}
-					searchSpaceId={searchSpaceId}
-					error={errors[`tasks.${index}.query`]}
-					onChange={(patch) => updateAt(index, patch)}
-					onMoveUp={() => move(index, -1)}
-					onMoveDown={() => move(index, 1)}
-					onRemove={() => removeAt(index)}
-				/>
-			))}
-
-			{errors.tasks && <p className="text-xs text-destructive">{errors.tasks}</p>}
-
-			<Button type="button" size="sm" onClick={() => onChange([...tasks, emptyTask()])}>
-				<Plus className="h-4 w-4" />
-				Add task
-			</Button>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/timezone-combobox.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/timezone-combobox.tsx
deleted file mode 100644
index ed0808bb3..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/timezone-combobox.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-"use client";
-import { Check, ChevronsUpDown } from "lucide-react";
-import { useMemo, useState } from "react";
-import { Button } from "@/components/ui/button";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-	CommandList,
-} from "@/components/ui/command";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { getTimezones } from "@/lib/automations/builder-schema";
-import { cn } from "@/lib/utils";
-
-interface TimezoneComboboxProps {
-	value: string;
-	onChange: (value: string) => void;
-}
-
-/**
- * Searchable IANA timezone picker. The full ``Intl.supportedValuesOf`` list is
- * long, so it lives behind a Command search instead of a flat Select.
- */
-export function TimezoneCombobox({ value, onChange }: TimezoneComboboxProps) {
-	const [open, setOpen] = useState(false);
-	const timezones = useMemo(() => getTimezones(), []);
-
-	return (
-		<Popover open={open} onOpenChange={setOpen}>
-			<PopoverTrigger asChild>
-				<Button
-					type="button"
-					variant="outline"
-					role="combobox"
-					aria-expanded={open}
-					className="w-full justify-between border-popover-border bg-transparent font-normal hover:bg-transparent"
-				>
-					<span className="truncate">{value || "Select timezone"}</span>
-					<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-				</Button>
-			</PopoverTrigger>
-			<PopoverContent
-				className="w-[calc(var(--radix-popover-trigger-width)/3)] min-w-72 max-w-[90vw] overflow-hidden border border-popover-border p-0"
-				align="start"
-			>
-				<Command className="bg-popover">
-					<CommandInput placeholder="Search timezone..." />
-					<CommandList>
-						<CommandEmpty>No timezone found.</CommandEmpty>
-						<CommandGroup className="p-0">
-							{timezones.map((tz) => (
-								<CommandItem
-									key={tz}
-									value={tz}
-									className="rounded-none px-3"
-									onSelect={() => {
-										onChange(tz);
-										setOpen(false);
-									}}
-								>
-									<Check
-										className={cn("mr-2 h-4 w-4", value === tz ? "opacity-100" : "opacity-0")}
-									/>
-									{tz}
-								</CommandItem>
-							))}
-						</CommandGroup>
-					</CommandList>
-				</Command>
-			</PopoverContent>
-		</Popover>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/unattended-toggle.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/unattended-toggle.tsx
deleted file mode 100644
index 861f22204..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/builder/unattended-toggle.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client";
-import { Switch } from "@/components/ui/switch";
-
-interface UnattendedToggleProps {
-	checked: boolean;
-	onChange: (checked: boolean) => void;
-}
-
-/**
- * Maps to ``auto_approve_all`` on every agent task. Automations run with no one
- * watching, so this defaults ON; turning it off means any approval prompt the
- * agent raises is rejected and the step can stall.
- */
-export function UnattendedToggle({ checked, onChange }: UnattendedToggleProps) {
-	return (
-		<div className="flex items-start justify-between gap-3 rounded-md bg-transparent">
-			<div className="space-y-0.5 min-w-0">
-				<div className="flex items-center gap-1.5">
-					<span className="text-sm font-medium text-foreground">
-						Run without asking for approvals
-					</span>
-				</div>
-				<p className="text-xs text-muted-foreground">
-					Tasks run automatically without asking for confirmation
-				</p>
-			</div>
-			<Switch
-				checked={checked}
-				onCheckedChange={onChange}
-				aria-label="Run without asking for approvals"
-			/>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/components/delete-automation-dialog.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/components/delete-automation-dialog.tsx
deleted file mode 100644
index 23fc522ca..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/components/delete-automation-dialog.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-"use client";
-import { useAtomValue } from "jotai";
-import { useState } from "react";
-import { deleteAutomationMutationAtom } from "@/atoms/automations/automations-mutation.atoms";
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Spinner } from "@/components/ui/spinner";
-
-interface DeleteAutomationDialogProps {
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-	automationId: number;
-	automationName: string;
-	searchSpaceId: number;
-	/**
-	 * Fired after a successful delete, before the dialog closes. The detail
-	 * page uses this to navigate back to the list (the row simply vanishes
-	 * on the list page so no callback is needed there).
-	 */
-	onDeleted?: () => void;
-}
-
-/**
- * Confirm + delete one automation. FK cascade on the backend wipes attached
- * triggers and runs, so we mention it explicitly. List re-fetch is handled
- * by the mutation atom's onSuccess.
- */
-export function DeleteAutomationDialog({
-	open,
-	onOpenChange,
-	automationId,
-	automationName,
-	searchSpaceId,
-	onDeleted,
-}: DeleteAutomationDialogProps) {
-	const { mutateAsync: deleteAutomation } = useAtomValue(deleteAutomationMutationAtom);
-	const [submitting, setSubmitting] = useState(false);
-
-	async function handleConfirm() {
-		setSubmitting(true);
-		try {
-			await deleteAutomation({ automationId, searchSpaceId });
-			onDeleted?.();
-			onOpenChange(false);
-		} finally {
-			setSubmitting(false);
-		}
-	}
-
-	return (
-		<AlertDialog open={open} onOpenChange={onOpenChange}>
-			<AlertDialogContent>
-				<AlertDialogHeader>
-					<AlertDialogTitle>Delete this automation?</AlertDialogTitle>
-					<AlertDialogDescription>
-						<span className="font-medium text-foreground">{automationName}</span> and all of its
-						triggers and run history will be removed. This cannot be undone.
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogCancel disabled={submitting}>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={handleConfirm}
-						disabled={submitting}
-						className="bg-destructive text-white hover:bg-destructive/90"
-					>
-						{submitting ? (
-							<span className="inline-flex items-center gap-2">
-								<Spinner size="xs" />
-								Deleting…
-							</span>
-						) : (
-							"Delete"
-						)}
-					</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/hooks/use-automation-permissions.ts b/surfsense_web/app/dashboard/[search_space_id]/automations/hooks/use-automation-permissions.ts
deleted file mode 100644
index 293688710..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/hooks/use-automation-permissions.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client";
-import { useAtomValue } from "jotai";
-import { useMemo } from "react";
-import { canPerform, myAccessAtom } from "@/atoms/members/members-query.atoms";
-
-/**
- * Centralized RBAC gates for the automations slice. Co-located with the
- * route so adding/removing surfaces stays a one-file change. Backed by
- * the same ``myAccessAtom`` the rest of the app uses; owners short-circuit
- * to ``true`` for every action.
- *
- * Mirrors backend permissions in ``app.db.permissions`` (automations:*).
- */
-export interface AutomationPermissions {
-	loading: boolean;
-	canCreate: boolean;
-	canRead: boolean;
-	canUpdate: boolean;
-	canDelete: boolean;
-	canExecute: boolean;
-}
-
-export function useAutomationPermissions(): AutomationPermissions {
-	const { data: access, isLoading } = useAtomValue(myAccessAtom);
-
-	return useMemo(
-		() => ({
-			loading: isLoading,
-			canCreate: canPerform(access, "automations:create"),
-			canRead: canPerform(access, "automations:read"),
-			canUpdate: canPerform(access, "automations:update"),
-			canDelete: canPerform(access, "automations:delete"),
-			canExecute: canPerform(access, "automations:execute"),
-		}),
-		[access, isLoading]
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/new/automation-new-content.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/new/automation-new-content.tsx
deleted file mode 100644
index cdf5761b1..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/new/automation-new-content.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-"use client";
-import { ShieldAlert } from "lucide-react";
-import { AutomationBuilderForm } from "../components/builder/automation-builder-form";
-import { useAutomationPermissions } from "../hooks/use-automation-permissions";
-import { AutomationNewHeader } from "./components/automation-new-header";
-
-interface AutomationNewContentProps {
-	searchSpaceId: number;
-}
-
-/**
- * Orchestrator for the create route. Gates on ``automations:create`` so users
- * who can't create don't even see the form; same panel as the detail page's
- * access-denied state for consistency. The builder defaults to the friendly
- * form with a raw-JSON escape hatch.
- *
- * Model eligibility is no longer gated here — the builder's own model pickers
- * list eligible (premium/BYOK) models, surface a per-slot notice when none
- * exist, and block submit until each slot resolves.
- */
-export function AutomationNewContent({ searchSpaceId }: AutomationNewContentProps) {
-	const perms = useAutomationPermissions();
-
-	if (perms.loading) {
-		return <div className="h-32 rounded-md border border-border/60 bg-muted/10 animate-pulse" />;
-	}
-
-	if (!perms.canCreate) {
-		return (
-			<div className="rounded-lg border border-border/60 bg-muted/20 px-6 py-12 text-center">
-				<ShieldAlert className="mx-auto h-10 w-10 text-muted-foreground" aria-hidden />
-				<h2 className="mt-3 text-base font-semibold text-foreground">Access denied</h2>
-				<p className="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
-					You don't have permission to create automations in this search space.
-				</p>
-			</div>
-		);
-	}
-
-	return (
-		<AutomationBuilderForm
-			mode="create"
-			searchSpaceId={searchSpaceId}
-			renderModeSwitcher={(modeSwitcher) => (
-				<AutomationNewHeader searchSpaceId={searchSpaceId} modeSwitcher={modeSwitcher} />
-			)}
-		/>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/new/components/automation-new-header.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/new/components/automation-new-header.tsx
deleted file mode 100644
index a2f7f85f0..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/new/components/automation-new-header.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-"use client";
-import { ArrowLeft } from "lucide-react";
-import Link from "next/link";
-import type { ReactNode } from "react";
-import { Button } from "@/components/ui/button";
-
-interface AutomationNewHeaderProps {
-	searchSpaceId: number;
-	modeSwitcher?: ReactNode;
-}
-
-export function AutomationNewHeader({ searchSpaceId, modeSwitcher }: AutomationNewHeaderProps) {
-	return (
-		<div className="space-y-3">
-			<div className="flex items-center justify-between gap-3">
-				<Button asChild variant="ghost" size="sm" className="-ml-2 h-auto px-2 py-1">
-					<Link
-						href={`/dashboard/${searchSpaceId}/automations`}
-						className="text-xs text-muted-foreground"
-					>
-						<ArrowLeft className="mr-1.5 h-3.5 w-3.5" />
-						Back to automations
-					</Link>
-				</Button>
-				{modeSwitcher ? <div className="shrink-0 md:hidden">{modeSwitcher}</div> : null}
-			</div>
-
-			<div className="flex items-start justify-between gap-4 flex-wrap">
-				<div className="space-y-1">
-					<h1 className="text-xl md:text-2xl font-semibold text-foreground">New automation</h1>
-					<p className="text-sm text-muted-foreground max-w-2xl">
-						Configure the task, schedule, and execution settings for this automation.
-					</p>
-				</div>
-				{modeSwitcher ? (
-					<div className="ml-auto hidden shrink-0 md:block">{modeSwitcher}</div>
-				) : null}
-			</div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/new/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/new/page.tsx
deleted file mode 100644
index f6e8e0008..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/new/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { AutomationNewContent } from "./automation-new-content";
-
-export default async function NewAutomationPage({
-	params,
-}: {
-	params: Promise<{ search_space_id: string }>;
-}) {
-	const { search_space_id } = await params;
-
-	return (
-		<div className="w-full space-y-6">
-			<AutomationNewContent searchSpaceId={Number(search_space_id)} />
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/page.tsx
deleted file mode 100644
index 0502d2310..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { AutomationsContent } from "./automations-content";
-
-export default async function AutomationsPage({
-	params,
-}: {
-	params: Promise<{ search_space_id: string }>;
-}) {
-	const { search_space_id } = await params;
-
-	return (
-		<div className="mx-auto w-full max-w-5xl space-y-6">
-			<AutomationsContent searchSpaceId={Number(search_space_id)} />
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/buy-more/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/buy-more/page.tsx
deleted file mode 100644
index 8ea4c1d7d..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/buy-more/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-"use client";
-
-import { AutoReloadSettings } from "@/components/settings/auto-reload-settings";
-import { BuyCreditsContent } from "@/components/settings/buy-credits-content";
-
-export default function BuyMorePage() {
-	return (
-		<div className="flex min-h-[37rem] w-full select-none items-center justify-center py-8">
-			<div className="w-full max-w-md space-y-8">
-				<BuyCreditsContent />
-				<AutoReloadSettings />
-			</div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/buy-pages/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/buy-pages/page.tsx
deleted file mode 100644
index f2439da44..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/buy-pages/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client";
-
-import { useParams, useRouter } from "next/navigation";
-import { useEffect } from "react";
-
-export default function BuyPagesPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params?.search_space_id ?? "";
-
-	useEffect(() => {
-		router.replace(`/dashboard/${searchSpaceId}/buy-more`);
-	}, [router, searchSpaceId]);
-
-	return null;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/buy-tokens/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/buy-tokens/page.tsx
deleted file mode 100644
index cfdbd3938..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/buy-tokens/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client";
-
-import { useParams, useRouter } from "next/navigation";
-import { useEffect } from "react";
-
-export default function BuyTokensPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params?.search_space_id ?? "";
-
-	useEffect(() => {
-		router.replace(`/dashboard/${searchSpaceId}/buy-more`);
-	}, [router, searchSpaceId]);
-
-	return null;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx b/surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx
deleted file mode 100644
index c3eeb2bf6..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-"use client";
-
-import { useAtomValue, useSetAtom } from "jotai";
-import { useParams, usePathname, useRouter } from "next/navigation";
-import { useTranslations } from "next-intl";
-import type React from "react";
-import { useEffect, useState } from "react";
-import { pendingUserImageDataUrlsAtom } from "@/atoms/chat/pending-user-images.atom";
-import { myAccessAtom } from "@/atoms/members/members-query.atoms";
-import {
-	globalLlmConfigStatusAtom,
-	globalModelConnectionsAtom,
-	modelConnectionsAtom,
-	modelRolesAtom,
-} from "@/atoms/model-connections/model-connections-query.atoms";
-import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
-import { DocumentUploadDialogProvider } from "@/components/assistant-ui/document-upload-popup";
-import { LayoutDataProvider } from "@/components/layout";
-import { OnboardingTour } from "@/components/onboarding-tour";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { useFolderSync } from "@/hooks/use-folder-sync";
-import { useGlobalLoadingEffect } from "@/hooks/use-global-loading";
-import { useElectronAPI } from "@/hooks/use-platform";
-import { isLlmOnboardingComplete } from "@/lib/onboarding";
-
-export function DashboardClientLayout({
-	children,
-	searchSpaceId,
-}: {
-	children: React.ReactNode;
-	searchSpaceId: string;
-}) {
-	const t = useTranslations("dashboard");
-	const router = useRouter();
-	const pathname = usePathname();
-	const { search_space_id } = useParams();
-	const activeSearchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
-	const setActiveSearchSpaceIdState = useSetAtom(activeSearchSpaceIdAtom);
-	const setPendingUserImageUrls = useSetAtom(pendingUserImageDataUrlsAtom);
-
-	const { data: modelRoles = {}, isLoading: loading, error } = useAtomValue(modelRolesAtom);
-	const { data: globalConnections = [], isLoading: globalConfigsLoading } = useAtomValue(
-		globalModelConnectionsAtom
-	);
-	const { data: modelConnections = [], isLoading: modelConnectionsLoading } =
-		useAtomValue(modelConnectionsAtom);
-	const { data: globalConfigStatus, isLoading: globalConfigStatusLoading } =
-		useAtomValue(globalLlmConfigStatusAtom);
-
-	const { data: access = null, isLoading: accessLoading } = useAtomValue(myAccessAtom);
-	const [hasCheckedOnboarding, setHasCheckedOnboarding] = useState(false);
-
-	const isOnboardingPage = pathname?.includes("/onboard");
-	const isOwner = access?.is_owner ?? false;
-	const isSearchSpaceReady = activeSearchSpaceId === searchSpaceId;
-
-	useEffect(() => {
-		if (isSearchSpaceReady) return;
-		setHasCheckedOnboarding(false);
-	}, [isSearchSpaceReady]);
-
-	useEffect(() => {
-		if (isOnboardingPage) {
-			setHasCheckedOnboarding(true);
-			return;
-		}
-
-		if (
-			isSearchSpaceReady &&
-			!loading &&
-			!accessLoading &&
-			!globalConfigsLoading &&
-			!globalConfigStatusLoading &&
-			!modelConnectionsLoading &&
-			!hasCheckedOnboarding
-		) {
-			// Onboarding is only relevant when no operator-provided
-			// global_llm_config.yaml exists. When it does, search spaces inherit
-			// the global config and should never be forced into onboarding.
-			if (globalConfigStatus?.exists) {
-				setHasCheckedOnboarding(true);
-				return;
-			}
-
-			const onboardingComplete = isLlmOnboardingComplete(
-				modelRoles.chat_model_id,
-				globalConnections,
-				modelConnections
-			);
-
-			if (onboardingComplete) {
-				setHasCheckedOnboarding(true);
-				return;
-			}
-
-			if (!isOwner) {
-				setHasCheckedOnboarding(true);
-				return;
-			}
-
-			router.push(`/dashboard/${searchSpaceId}/onboard`);
-			setHasCheckedOnboarding(true);
-		}
-	}, [
-		isSearchSpaceReady,
-		loading,
-		accessLoading,
-		globalConfigsLoading,
-		globalConfigStatusLoading,
-		globalConfigStatus,
-		modelConnectionsLoading,
-		modelRoles.chat_model_id,
-		globalConnections,
-		modelConnections,
-		isOnboardingPage,
-		isOwner,
-		router,
-		searchSpaceId,
-		hasCheckedOnboarding,
-	]);
-
-	const electronAPI = useElectronAPI();
-
-	useEffect(() => {
-		const htmlBackground = document.documentElement.style.backgroundColor;
-		const bodyBackground = document.body.style.backgroundColor;
-
-		document.documentElement.style.backgroundColor = "var(--panel)";
-		document.body.style.backgroundColor = "var(--panel)";
-
-		return () => {
-			document.documentElement.style.backgroundColor = htmlBackground;
-			document.body.style.backgroundColor = bodyBackground;
-		};
-	}, []);
-
-	useEffect(() => {
-		if (!electronAPI?.onChatScreenCapture) return;
-		return electronAPI.onChatScreenCapture((dataUrl: string) => {
-			if (typeof dataUrl !== "string" || !dataUrl.startsWith("data:image/")) return;
-			setPendingUserImageUrls((prev) => [...prev, dataUrl]);
-		});
-	}, [electronAPI, setPendingUserImageUrls]);
-
-	useEffect(() => {
-		const activeSeacrhSpaceId =
-			typeof search_space_id === "string"
-				? search_space_id
-				: Array.isArray(search_space_id) && search_space_id.length > 0
-					? search_space_id[0]
-					: "";
-		if (!activeSeacrhSpaceId) return;
-		setActiveSearchSpaceIdState(activeSeacrhSpaceId);
-
-		// Sync to Electron store if stored value is null (first navigation)
-		if (electronAPI?.getActiveSearchSpace && electronAPI.setActiveSearchSpace) {
-			const setActiveSearchSpace = electronAPI.setActiveSearchSpace;
-			electronAPI
-				.getActiveSearchSpace()
-				.then((stored: string | null) => {
-					if (!stored) {
-						setActiveSearchSpace(activeSeacrhSpaceId);
-					}
-				})
-				.catch(() => {});
-		}
-	}, [search_space_id, setActiveSearchSpaceIdState, electronAPI]);
-
-	// Determine if we should show loading
-	const shouldShowLoading =
-		!hasCheckedOnboarding &&
-		(!isSearchSpaceReady ||
-			loading ||
-			accessLoading ||
-			globalConfigsLoading ||
-			globalConfigStatusLoading ||
-			modelConnectionsLoading) &&
-		!isOnboardingPage;
-
-	// Use global loading screen - spinner animation won't reset
-	useGlobalLoadingEffect(shouldShowLoading);
-
-	// Wire desktop app file watcher -> single-file re-index API
-	useFolderSync();
-
-	if (shouldShowLoading) {
-		return null;
-	}
-
-	if (error && !hasCheckedOnboarding && !isOnboardingPage) {
-		return (
-			<div className="flex flex-col items-center justify-center min-h-screen space-y-4">
-				<Card className="w-[400px] bg-background/60 backdrop-blur-sm border-destructive/20">
-					<CardHeader className="pb-2">
-						<CardTitle className="text-xl font-medium text-destructive">
-							{t("config_error")}
-						</CardTitle>
-						<CardDescription>{t("failed_load_llm_config")}</CardDescription>
-					</CardHeader>
-					<CardContent>
-						<p className="text-sm text-muted-foreground">
-							{error instanceof Error ? error.message : String(error)}
-						</p>
-					</CardContent>
-				</Card>
-			</div>
-		);
-	}
-
-	if (isOnboardingPage) {
-		return <>{children}</>;
-	}
-
-	return (
-		<DocumentUploadDialogProvider>
-			<OnboardingTour />
-			<LayoutDataProvider searchSpaceId={searchSpaceId}>{children}</LayoutDataProvider>
-		</DocumentUploadDialogProvider>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/callback/route.ts b/surfsense_web/app/dashboard/[search_space_id]/connectors/callback/route.ts
deleted file mode 100644
index 96f7dc349..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/callback/route.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { OAUTH_RESULT_COOKIE, type OAuthCallbackResult } from "@/contracts/types/oauth.types";
-
-export async function GET(
-	request: NextRequest,
-	{ params }: { params: Promise<{ search_space_id: string }> }
-) {
-	const { search_space_id } = await params;
-	const searchParams = request.nextUrl.searchParams;
-
-	const payload: OAuthCallbackResult = {
-		success: searchParams.get("success"),
-		error: searchParams.get("error"),
-		connector: searchParams.get("connector"),
-		connectorId: searchParams.get("connectorId"),
-	};
-	const result = JSON.stringify(payload);
-
-	const response = new NextResponse(null, {
-		status: 302,
-		headers: {
-			Location: `/dashboard/${search_space_id}/new-chat`,
-		},
-	});
-	response.cookies.set(OAUTH_RESULT_COOKIE, result, {
-		path: "/",
-		maxAge: 60,
-		httpOnly: false,
-		sameSite: "lax",
-	});
-
-	return response;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/earn-credits/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/earn-credits/page.tsx
deleted file mode 100644
index 3ff4c3cf8..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/earn-credits/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client";
-
-import { EarnCreditsContent } from "@/components/settings/earn-credits-content";
-
-export default function EarnCreditsPage() {
-	return (
-		<div className="w-full select-none space-y-6">
-			<EarnCreditsContent />
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/layout.tsx b/surfsense_web/app/dashboard/[search_space_id]/layout.tsx
deleted file mode 100644
index 12f3b3963..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/layout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// Server component
-import type React from "react";
-import { use } from "react";
-import { DashboardClientLayout } from "./client-layout";
-
-export default function DashboardLayout({
-	params,
-	children,
-}: {
-	params: Promise<{ search_space_id: string }>;
-	children: React.ReactNode;
-}) {
-	const { search_space_id } = use(params);
-
-	return <DashboardClientLayout searchSpaceId={search_space_id}>{children}</DashboardClientLayout>;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
deleted file mode 100644
index dea1e16c2..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
+++ /dev/null
@@ -1,1257 +0,0 @@
-"use client";
-
-import {
-	type ColumnDef,
-	type ColumnFiltersState,
-	flexRender,
-	getCoreRowModel,
-	getFacetedUniqueValues,
-	getFilteredRowModel,
-	getPaginationRowModel,
-	getSortedRowModel,
-	type PaginationState,
-	type Row,
-	type SortingState,
-	useReactTable,
-	type VisibilityState,
-} from "@tanstack/react-table";
-import { useAtomValue } from "jotai";
-import {
-	AlertCircle,
-	AlertTriangle,
-	Bug,
-	CheckCircle2,
-	ChevronDown,
-	ChevronFirst,
-	ChevronLast,
-	ChevronLeft,
-	ChevronRight,
-	ChevronUp,
-	CircleAlert,
-	Clock,
-	Columns3,
-	Filter,
-	Info,
-	ListFilter,
-	MoreHorizontal,
-	RefreshCw,
-	Terminal,
-	Trash,
-	Workflow,
-	X,
-	Zap,
-} from "lucide-react";
-import { AnimatePresence, motion, type Variants } from "motion/react";
-import { useParams } from "next/navigation";
-import { useTranslations } from "next-intl";
-import React, { useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
-import { toast } from "sonner";
-import {
-	createLogMutationAtom,
-	deleteLogMutationAtom,
-	updateLogMutationAtom,
-} from "@/atoms/logs/log-mutation.atoms";
-import { JsonMetadataViewer } from "@/components/json-metadata-viewer";
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-	DropdownMenu,
-	DropdownMenuCheckboxItem,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Pagination, PaginationContent, PaginationItem } from "@/components/ui/pagination";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table";
-import type { CreateLogRequest, Log, UpdateLogRequest } from "@/contracts/types/log.types";
-import { useDebouncedValue } from "@/hooks/use-debounced-value";
-import { type LogLevel, type LogStatus, useLogs, useLogsSummary } from "@/hooks/use-logs";
-import { cn } from "@/lib/utils";
-
-// Define animation variants for reuse
-const fadeInScale: Variants = {
-	hidden: { opacity: 0, scale: 0.95 },
-	visible: {
-		opacity: 1,
-		scale: 1,
-		transition: { type: "spring", stiffness: 300, damping: 30 },
-	},
-	exit: {
-		opacity: 0,
-		scale: 0.95,
-		transition: { duration: 0.15 },
-	},
-};
-
-// Log level icons and colors
-const logLevelConfig = {
-	DEBUG: { icon: Bug, color: "text-muted-foreground", bgColor: "bg-muted/50" },
-	INFO: { icon: Info, color: "text-blue-600", bgColor: "bg-blue-50" },
-	WARNING: { icon: AlertTriangle, color: "text-yellow-600", bgColor: "bg-yellow-50" },
-	ERROR: { icon: AlertCircle, color: "text-red-600", bgColor: "bg-red-50" },
-	CRITICAL: { icon: Zap, color: "text-purple-600", bgColor: "bg-purple-50" },
-} as const;
-
-// Log status icons and colors
-const logStatusConfig = {
-	IN_PROGRESS: { icon: Clock, color: "text-blue-600", bgColor: "bg-blue-50" },
-	SUCCESS: { icon: CheckCircle2, color: "text-green-600", bgColor: "bg-green-50" },
-	FAILED: { icon: X, color: "text-red-600", bgColor: "bg-red-50" },
-} as const;
-
-function MessageDetails({
-	message,
-	taskName,
-	createdAt,
-	children,
-}: {
-	message: string;
-	taskName?: string;
-	metadata?: any;
-	createdAt?: string;
-	children: React.ReactNode;
-}) {
-	return (
-		<AlertDialog>
-			<AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
-			<AlertDialogContent className="max-w-3xl w-full">
-				<div className="flex items-start justify-between gap-4">
-					<div>
-						<AlertDialogTitle className="text-lg">Log details</AlertDialogTitle>
-						{createdAt && (
-							<p className="text-xs text-muted-foreground mt-1">
-								{new Date(createdAt).toLocaleString()}
-							</p>
-						)}
-					</div>
-					<div className="shrink-0">
-						<AlertDialogCancel className="text-sm">Close</AlertDialogCancel>
-					</div>
-				</div>
-
-				<div className="mt-4 space-y-4">
-					{taskName && (
-						<div className="text-xs text-muted-foreground font-mono bg-muted/50 px-2 py-1 rounded inline-block">
-							{taskName}
-						</div>
-					)}
-
-					<div className="bg-muted p-3 rounded max-h-[40vh] overflow-auto text-sm whitespace-pre-wrap">
-						{message}
-					</div>
-				</div>
-
-				<AlertDialogFooter />
-			</AlertDialogContent>
-		</AlertDialog>
-	);
-}
-
-const createColumns = (t: (key: string) => string): ColumnDef<Log>[] => [
-	{
-		id: "select",
-		header: ({ table }) => (
-			<Checkbox
-				checked={
-					table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")
-				}
-				onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-				aria-label="Select all"
-			/>
-		),
-		cell: ({ row }) => (
-			<Checkbox
-				checked={row.getIsSelected()}
-				onCheckedChange={(value) => row.toggleSelected(!!value)}
-				aria-label="Select row"
-			/>
-		),
-		size: 28,
-		enableSorting: false,
-		enableHiding: false,
-	},
-	{
-		header: t("level"),
-		accessorKey: "level",
-		cell: ({ row }) => {
-			const level = row.getValue("level") as LogLevel;
-			const config = logLevelConfig[level];
-			const Icon = config.icon;
-			return (
-				<motion.div
-					className="flex items-center gap-2"
-					whileHover={{ scale: 1.05 }}
-					transition={{ type: "spring", stiffness: 300 }}
-				>
-					<div
-						className={cn("flex h-7 w-7 items-center justify-center rounded-full", config.bgColor)}
-					>
-						<Icon size={16} className={config.color} />
-					</div>
-					<span className={cn("font-medium text-xs", config.color)}>{level}</span>
-				</motion.div>
-			);
-		},
-		size: 120,
-	},
-	{
-		header: t("status"),
-		accessorKey: "status",
-		cell: ({ row }) => {
-			const status = row.getValue("status") as LogStatus;
-			const config = logStatusConfig[status];
-			const Icon = config.icon;
-			return (
-				<motion.div
-					className="flex items-center gap-2"
-					whileHover={{ scale: 1.05 }}
-					transition={{ type: "spring", stiffness: 300 }}
-				>
-					<div
-						className={cn("flex h-6 w-6 items-center justify-center rounded-full", config.bgColor)}
-					>
-						<Icon size={14} className={config.color} />
-					</div>
-					<span className={cn("font-medium text-xs", config.color)}>
-						{status.replace("_", " ")}
-					</span>
-				</motion.div>
-			);
-		},
-		size: 140,
-	},
-	{
-		header: t("source"),
-		accessorKey: "source",
-		cell: ({ row }) => {
-			const source = row.getValue("source") as string;
-			return (
-				<motion.div
-					className="flex items-center gap-2"
-					whileHover={{ scale: 1.02 }}
-					transition={{ type: "spring", stiffness: 300 }}
-				>
-					<Terminal size={14} className="text-muted-foreground" />
-					<span className="text-sm font-mono">{source || t("system")}</span>
-				</motion.div>
-			);
-		},
-		size: 150,
-	},
-	{
-		header: t("message"),
-		accessorKey: "message",
-		cell: ({ row }) => {
-			const message = row.getValue("message") as string;
-			const taskName = row.original.log_metadata?.task_name;
-			const createdAt = row.getValue("created_at") as string;
-
-			return (
-				<MessageDetails
-					message={message}
-					taskName={taskName}
-					metadata={row.original.log_metadata}
-					createdAt={createdAt}
-				>
-					<div className="flex flex-col gap-1 max-w-[400px] cursor-pointer">
-						{taskName && (
-							<div
-								className="text-xs text-muted-foreground font-mono bg-muted/50 px-2 py-1 rounded truncate"
-								title={taskName}
-							>
-								{taskName}
-							</div>
-						)}
-						<div className="text-sm truncate" title={message}>
-							{message.length > 100 ? `${message.substring(0, 100)}...` : message}
-						</div>
-					</div>
-				</MessageDetails>
-			);
-		},
-		size: 400,
-	},
-	{
-		header: t("created_at"),
-		accessorKey: "created_at",
-		cell: ({ row }) => {
-			const date = new Date(row.getValue("created_at"));
-			return (
-				<div className="flex flex-col gap-1 text-xs">
-					<div>{date.toLocaleDateString()}</div>
-					<div className="text-muted-foreground">{date.toLocaleTimeString()}</div>
-				</div>
-			);
-		},
-		size: 120,
-	},
-	{
-		id: "actions",
-		header: () => <span className="sr-only">{t("actions")}</span>,
-		cell: ({ row }) => <LogRowActions row={row} t={t} />,
-		size: 60,
-		enableHiding: false,
-	},
-];
-
-// Default columns for backward compatibility
-const columns: ColumnDef<Log>[] = createColumns((key) => key);
-
-// Create a context to share functions
-const LogsContext = React.createContext<{
-	deleteLog: (id: number) => Promise<boolean>;
-	refreshLogs: () => Promise<void>;
-} | null>(null);
-
-export default function LogsManagePage() {
-	const t = useTranslations("logs");
-	const id = useId();
-	const params = useParams();
-	const searchSpaceId = Number(params.search_space_id);
-
-	const { mutateAsync: deleteLogMutation } = useAtomValue(deleteLogMutationAtom);
-	const { mutateAsync: updateLogMutation } = useAtomValue(updateLogMutationAtom);
-	const { mutateAsync: createLogMutation } = useAtomValue(createLogMutationAtom);
-
-	const createLog = useCallback(
-		async (data: CreateLogRequest) => {
-			try {
-				await createLogMutation(data);
-				return true;
-			} catch (error) {
-				console.error("Failed to create log:", error);
-				return false;
-			}
-		},
-		[createLogMutation]
-	);
-
-	const updateLog = useCallback(
-		async (logId: number, data: UpdateLogRequest) => {
-			try {
-				await updateLogMutation({ logId, data });
-				return true;
-			} catch (error) {
-				console.error("Failed to update log:", error);
-				return false;
-			}
-		},
-		[updateLogMutation]
-	);
-
-	const deleteLog = useCallback(
-		async (id: number) => {
-			try {
-				await deleteLogMutation({ id });
-				return true;
-			} catch (error) {
-				console.error("Failed to delete log:", error);
-				return false;
-			}
-		},
-		[deleteLogMutation]
-	);
-
-	const { logs, loading: logsLoading, error: logsError, refreshLogs } = useLogs(searchSpaceId);
-	const {
-		summary,
-		loading: summaryLoading,
-		error: summaryError,
-		refreshSummary,
-	} = useLogsSummary(searchSpaceId, 24);
-
-	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
-	const [pagination, setPagination] = useState<PaginationState>({
-		pageIndex: 0,
-		pageSize: 20,
-	});
-	const [sorting, setSorting] = useState<SortingState>([
-		{
-			id: "created_at",
-			desc: true,
-		},
-	]);
-
-	const inputRef = useRef<HTMLInputElement>(null);
-
-	// Create translated columns
-	const translatedColumns = useMemo(() => createColumns(t), [t]);
-
-	const table = useReactTable({
-		data: logs,
-		columns: translatedColumns,
-		getCoreRowModel: getCoreRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		onSortingChange: setSorting,
-		enableSortingRemoval: false,
-		getPaginationRowModel: getPaginationRowModel(),
-		onPaginationChange: setPagination,
-		onColumnFiltersChange: setColumnFilters,
-		onColumnVisibilityChange: setColumnVisibility,
-		getFilteredRowModel: getFilteredRowModel(),
-		getFacetedUniqueValues: getFacetedUniqueValues(),
-		state: {
-			sorting,
-			pagination,
-			columnFilters,
-			columnVisibility,
-		},
-	});
-
-	// Get unique values for filters
-	const uniqueLevels = useMemo(() => {
-		const levelColumn = table.getColumn("level");
-		if (!levelColumn) return [];
-		return Array.from(levelColumn.getFacetedUniqueValues().keys()).sort();
-	}, [table.getColumn]);
-
-	const uniqueStatuses = useMemo(() => {
-		const statusColumn = table.getColumn("status");
-		if (!statusColumn) return [];
-		return Array.from(statusColumn.getFacetedUniqueValues().keys()).sort();
-	}, [table.getColumn]);
-
-	const handleDeleteRows = async () => {
-		const selectedRows = table.getSelectedRowModel().rows;
-
-		if (selectedRows.length === 0) {
-			toast.error("No rows selected");
-			return;
-		}
-
-		const deletePromises = selectedRows.map((row) => deleteLog(row.original.id)); // Already passes { id } via wrapper
-
-		try {
-			const results = await Promise.all(deletePromises);
-			const allSuccessful = results.every((result) => result === true);
-
-			if (allSuccessful) {
-				toast.success(`Successfully deleted ${selectedRows.length} log(s)`);
-			} else {
-				toast.error("Some logs could not be deleted");
-			}
-
-			await refreshLogs();
-			table.resetRowSelection();
-		} catch (error: any) {
-			console.error("Error deleting logs:", error);
-			toast.error("Error deleting logs");
-		}
-	};
-
-	const [isRefreshing, setIsRefreshing] = useState(false);
-	const [isSummaryRefreshing, setIsSummaryRefreshing] = useState(false);
-
-	const handleRefresh = async () => {
-		if (isRefreshing) return;
-		setIsRefreshing(true);
-		try {
-			await Promise.all([refreshLogs(), refreshSummary()]);
-			toast.success("Logs refreshed");
-		} finally {
-			setIsRefreshing(false);
-		}
-	};
-
-	return (
-		<LogsContext.Provider
-			value={{
-				deleteLog: deleteLog || (() => Promise.resolve(false)),
-				refreshLogs: () => refreshLogs().then(() => void 0),
-			}}
-		>
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.3 }}
-				className="w-full px-6 py-4 space-y-6 min-h-[calc(100vh-64px)]"
-			>
-				{/* Summary Dashboard */}
-				<LogsSummaryDashboard
-					summary={summary}
-					loading={summaryLoading}
-					error={summaryError?.message ?? null}
-					onRefresh={async () => {
-						if (isSummaryRefreshing) return;
-						setIsSummaryRefreshing(true);
-						try {
-							await refreshSummary();
-						} finally {
-							setIsSummaryRefreshing(false);
-						}
-					}}
-					isRefreshing={isSummaryRefreshing}
-				/>
-
-				{/* Logs Table Header */}
-				<motion.div
-					className="flex items-center justify-between"
-					initial={{ opacity: 0, y: 10 }}
-					animate={{ opacity: 1, y: 0 }}
-					transition={{ delay: 0.1 }}
-				>
-					<div>
-						<h2 className="text-xl md:text-2xl font-bold tracking-tight">{t("title")}</h2>
-						<p className="text-xs md:text-sm text-muted-foreground">{t("subtitle")}</p>
-					</div>
-					<Button onClick={handleRefresh} variant="outline" size="sm" disabled={isRefreshing}>
-						<RefreshCw className={`w-4 h-4 mr-2 ${isRefreshing ? "animate-spin" : ""}`} />
-						{t("refresh")}
-					</Button>
-				</motion.div>
-
-				{/* Filters */}
-				<LogsFilters
-					table={table}
-					uniqueLevels={uniqueLevels}
-					uniqueStatuses={uniqueStatuses}
-					inputRef={inputRef}
-					onBulkDelete={handleDeleteRows}
-					id={id}
-				/>
-
-				{/* Logs Table */}
-				<LogsTable
-					table={table}
-					logs={logs}
-					loading={logsLoading}
-					error={logsError?.message ?? null}
-					onRefresh={refreshLogs}
-					id={id}
-					t={t}
-				/>
-			</motion.div>
-		</LogsContext.Provider>
-	);
-}
-
-// Summary Dashboard Component
-function LogsSummaryDashboard({
-	summary,
-	loading,
-	error,
-	onRefresh,
-	isRefreshing = false,
-}: {
-	summary: any;
-	loading: boolean;
-	error: string | null;
-	onRefresh: () => void | Promise<void>;
-	isRefreshing?: boolean;
-}) {
-	const t = useTranslations("logs");
-	if (loading) {
-		return (
-			<motion.div
-				className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
-				initial={{ opacity: 0 }}
-				animate={{ opacity: 1 }}
-			>
-				{[...Array(4)].map((_, i) => (
-					<Card key={i}>
-						<CardHeader className="pb-2">
-							<div className="h-4 bg-muted rounded animate-pulse" />
-						</CardHeader>
-						<CardContent>
-							<div className="h-8 bg-muted rounded animate-pulse" />
-						</CardContent>
-					</Card>
-				))}
-			</motion.div>
-		);
-	}
-
-	if (error || !summary) {
-		return (
-			<Card>
-				<CardContent className="flex items-center justify-center h-32">
-					<div className="flex flex-col items-center gap-2">
-						<AlertCircle className="h-8 w-8 text-destructive" />
-						<p className="text-sm text-destructive">{t("failed_load_summary")}</p>
-						<Button variant="outline" size="sm" onClick={onRefresh} disabled={isRefreshing}>
-							<RefreshCw className={`w-4 h-4 mr-2 ${isRefreshing ? "animate-spin" : ""}`} />
-							{t("retry")}
-						</Button>
-					</div>
-				</CardContent>
-			</Card>
-		);
-	}
-
-	return (
-		<motion.div
-			className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
-			initial={{ opacity: 0, y: 20 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{ staggerChildren: 0.1 }}
-		>
-			{/* Total Logs */}
-			<motion.div variants={fadeInScale}>
-				<Card>
-					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-						<CardTitle className="text-sm font-medium">{t("total_logs")}</CardTitle>
-						<Workflow className="h-4 w-4 text-muted-foreground" />
-					</CardHeader>
-					<CardContent>
-						<div className="text-2xl font-bold">{summary.total_logs}</div>
-						<p className="text-xs text-muted-foreground">
-							{t("last_hours", { hours: summary.time_window_hours })}
-						</p>
-					</CardContent>
-				</Card>
-			</motion.div>
-
-			{/* Active Tasks */}
-			<motion.div variants={fadeInScale}>
-				<Card>
-					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-						<CardTitle className="text-sm font-medium">{t("active_tasks")}</CardTitle>
-						<Clock className="h-4 w-4 text-blue-600" />
-					</CardHeader>
-					<CardContent>
-						<div className="text-2xl font-bold text-blue-600">
-							{summary.active_tasks?.length || 0}
-						</div>
-						<p className="text-xs text-muted-foreground">{t("currently_running")}</p>
-					</CardContent>
-				</Card>
-			</motion.div>
-
-			{/* Success Rate */}
-			<motion.div variants={fadeInScale}>
-				<Card>
-					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-						<CardTitle className="text-sm font-medium">{t("success_rate")}</CardTitle>
-						<CheckCircle2 className="h-4 w-4 text-green-600" />
-					</CardHeader>
-					<CardContent>
-						<div className="text-2xl font-bold text-green-600">
-							{summary.total_logs > 0
-								? Math.round(((summary.by_status?.SUCCESS || 0) / summary.total_logs) * 100)
-								: 0}
-							%
-						</div>
-						<p className="text-xs text-muted-foreground">
-							{summary.by_status?.SUCCESS || 0} {t("successful")}
-						</p>
-					</CardContent>
-				</Card>
-			</motion.div>
-
-			{/* Recent Failures */}
-			<motion.div variants={fadeInScale}>
-				<Card>
-					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-						<CardTitle className="text-sm font-medium">{t("recent_failures")}</CardTitle>
-						<AlertCircle className="h-4 w-4 text-red-600" />
-					</CardHeader>
-					<CardContent>
-						<div className="text-2xl font-bold text-red-600">
-							{summary.recent_failures?.length || 0}
-						</div>
-						<p className="text-xs text-muted-foreground">{t("need_attention")}</p>
-					</CardContent>
-				</Card>
-			</motion.div>
-		</motion.div>
-	);
-}
-
-// Filters Component
-function LogsFilters({
-	table,
-	uniqueLevels,
-	uniqueStatuses,
-	inputRef,
-	onBulkDelete,
-	id,
-}: {
-	table: any;
-	uniqueLevels: string[];
-	uniqueStatuses: string[];
-	inputRef: React.RefObject<HTMLInputElement | null>;
-	onBulkDelete: () => Promise<void>;
-	id: string;
-}) {
-	const t = useTranslations("logs");
-	const [filterInput, setFilterInput] = useState(
-		(table.getColumn("message")?.getFilterValue() ?? "") as string
-	);
-	const debouncedFilter = useDebouncedValue(filterInput, 300);
-
-	useEffect(() => {
-		table.getColumn("message")?.setFilterValue(debouncedFilter || undefined);
-	}, [debouncedFilter, table]);
-
-	return (
-		<motion.div
-			className="flex flex-wrap items-center justify-start gap-3 w-full"
-			initial={{ opacity: 0, y: 10 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{ delay: 0.2 }}
-		>
-			<div className="flex items-center gap-3 flex-wrap w-full sm:w-auto">
-				{/* Search Input */}
-				<motion.div className="relative w-full sm:w-auto" variants={fadeInScale}>
-					<Input
-						ref={inputRef}
-						className={cn("peer w-full sm:min-w-60 ps-9", Boolean(filterInput) && "pe-9")}
-						value={filterInput}
-						onChange={(e) => setFilterInput(e.target.value)}
-						placeholder={t("filter_by_message")}
-						type="text"
-					/>
-					<div className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80">
-						<ListFilter size={16} strokeWidth={2} />
-					</div>
-					{Boolean(filterInput) && (
-						<Button
-							className="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 hover:text-accent-foreground"
-							variant="ghost"
-							size="icon"
-							onClick={() => {
-								setFilterInput("");
-								table.getColumn("message")?.setFilterValue("");
-								inputRef.current?.focus();
-							}}
-						>
-							<X size={16} strokeWidth={2} />
-						</Button>
-					)}
-				</motion.div>
-
-				{/* Level Filter */}
-				<FilterDropdown
-					title={t("level")}
-					column={table.getColumn("level")}
-					options={uniqueLevels}
-					id={`${id}-level`}
-					t={t}
-				/>
-
-				{/* Status Filter */}
-				<FilterDropdown
-					title={t("status")}
-					column={table.getColumn("status")}
-					options={uniqueStatuses}
-					id={`${id}-status`}
-					t={t}
-				/>
-
-				{/* Column Visibility */}
-				<DropdownMenu>
-					<DropdownMenuTrigger asChild>
-						<Button variant="outline">
-							<Columns3 className="-ms-1 me-2 opacity-60" size={16} strokeWidth={2} />
-							{t("view")}
-						</Button>
-					</DropdownMenuTrigger>
-					<DropdownMenuContent align="end">
-						<DropdownMenuLabel>{t("toggle_columns")}</DropdownMenuLabel>
-						{table
-							.getAllColumns()
-							.filter((column: any) => column.getCanHide())
-							.map((column: any) => (
-								<DropdownMenuCheckboxItem
-									key={column.id}
-									className="capitalize"
-									checked={column.getIsVisible()}
-									onCheckedChange={(value) => column.toggleVisibility(!!value)}
-									onSelect={(event) => event.preventDefault()}
-								>
-									{column.id}
-								</DropdownMenuCheckboxItem>
-							))}
-					</DropdownMenuContent>
-				</DropdownMenu>
-			</div>
-
-			<div className="flex items-center gap-3 w-full sm:w-auto sm:ml-auto">
-				{table.getSelectedRowModel().rows.length > 0 && (
-					<AlertDialog>
-						<AlertDialogTrigger asChild>
-							<Button className="w-full sm:w-auto" variant="outline">
-								<Trash className="-ms-1 me-2 opacity-60" size={16} strokeWidth={2} />
-								{t("delete_selected")}
-								<span className="-me-1 ms-3 inline-flex h-5 max-h-full items-center rounded border border-border bg-background px-1 font-[inherit] text-[0.625rem] font-medium text-muted-foreground/70">
-									{table.getSelectedRowModel().rows.length}
-								</span>
-							</Button>
-						</AlertDialogTrigger>
-						<AlertDialogContent>
-							<div className="flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4">
-								<div className="flex size-9 shrink-0 items-center justify-center rounded-full border border-border">
-									<CircleAlert className="opacity-80" size={16} strokeWidth={2} />
-								</div>
-								<AlertDialogHeader>
-									<AlertDialogTitle>{t("confirm_title")}</AlertDialogTitle>
-									<AlertDialogDescription>
-										{t("confirm_delete_desc", { count: table.getSelectedRowModel().rows.length })}
-									</AlertDialogDescription>
-								</AlertDialogHeader>
-							</div>
-							<AlertDialogFooter>
-								<AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
-								<AlertDialogAction onClick={onBulkDelete}>{t("delete")}</AlertDialogAction>
-							</AlertDialogFooter>
-						</AlertDialogContent>
-					</AlertDialog>
-				)}
-			</div>
-		</motion.div>
-	);
-}
-
-// Filter Dropdown Component
-function FilterDropdown({
-	title,
-	column,
-	options,
-	id,
-	t,
-}: {
-	title: string;
-	column: any;
-	options: string[];
-	id: string;
-	t: (key: string) => string;
-}) {
-	const selectedValues = useMemo(() => {
-		const filterValue = column?.getFilterValue() as string[];
-		return filterValue ?? [];
-	}, [column?.getFilterValue]);
-
-	const handleValueChange = (checked: boolean, value: string) => {
-		const filterValue = column?.getFilterValue() as string[];
-		const newFilterValue = filterValue ? [...filterValue] : [];
-
-		if (checked) {
-			newFilterValue.push(value);
-		} else {
-			const index = newFilterValue.indexOf(value);
-			if (index > -1) {
-				newFilterValue.splice(index, 1);
-			}
-		}
-
-		column?.setFilterValue(newFilterValue.length ? newFilterValue : undefined);
-	};
-
-	return (
-		<Popover>
-			<PopoverTrigger asChild>
-				<Button variant="outline">
-					<Filter className="-ms-1 me-2 opacity-60" size={16} strokeWidth={2} />
-					{title}
-					{selectedValues.length > 0 && (
-						<span className="-me-1 ms-3 inline-flex h-5 max-h-full items-center rounded border border-border bg-background px-1 font-[inherit] text-[0.625rem] font-medium text-muted-foreground/70">
-							{selectedValues.length}
-						</span>
-					)}
-				</Button>
-			</PopoverTrigger>
-			<PopoverContent className="min-w-36 p-3" align="start">
-				<div className="space-y-3">
-					<div className="text-xs font-medium text-muted-foreground">
-						{t("filter_by")} {title}
-					</div>
-					<div className="space-y-2">
-						{options.map((value, i) => (
-							<div key={value} className="flex items-center gap-2">
-								<Checkbox
-									id={`${id}-${i}`}
-									checked={selectedValues.includes(value)}
-									onCheckedChange={(checked: boolean) => handleValueChange(checked, value)}
-								/>
-								<Label htmlFor={`${id}-${i}`} className="text-sm font-normal">
-									{value}
-								</Label>
-							</div>
-						))}
-					</div>
-				</div>
-			</PopoverContent>
-		</Popover>
-	);
-}
-
-// Logs Table Component
-function LogsTable({
-	table,
-	logs,
-	loading,
-	error,
-	onRefresh,
-	id,
-	t,
-}: {
-	table: any;
-	logs: Log[];
-	loading: boolean;
-	error: string | null;
-	onRefresh: () => void;
-	id: string;
-	t: (key: string, params?: any) => string;
-}) {
-	if (loading) {
-		return (
-			<motion.div
-				className="rounded-md border"
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-			>
-				<div className="flex h-[400px] w-full items-center justify-center">
-					<div className="flex flex-col items-center gap-2">
-						<div className="h-8 w-8 animate-spin rounded-full border-b-2 border-primary"></div>
-						<p className="text-sm text-muted-foreground">Loading logs...</p>
-					</div>
-				</div>
-			</motion.div>
-		);
-	}
-
-	if (error) {
-		return (
-			<motion.div
-				className="rounded-md border"
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-			>
-				<div className="flex h-[400px] w-full items-center justify-center">
-					<div className="flex flex-col items-center gap-2">
-						<AlertCircle className="h-8 w-8 text-destructive" />
-						<p className="text-sm text-destructive">Error loading logs</p>
-						<Button variant="outline" size="sm" onClick={onRefresh}>
-							Retry
-						</Button>
-					</div>
-				</div>
-			</motion.div>
-		);
-	}
-
-	if (logs.length === 0) {
-		return (
-			<motion.div
-				className="rounded-md border"
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-			>
-				<div className="flex h-[400px] w-full items-center justify-center">
-					<div className="flex flex-col items-center gap-2">
-						<Terminal className="h-8 w-8 text-muted-foreground" />
-						<p className="text-sm text-muted-foreground">{t("no_logs")}</p>
-					</div>
-				</div>
-			</motion.div>
-		);
-	}
-
-	return (
-		<>
-			<motion.div
-				className="rounded-md border overflow-hidden"
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ delay: 0.3 }}
-			>
-				<Table className="table-fixed">
-					<TableHeader>
-						{table.getHeaderGroups().map((headerGroup: any) => (
-							<TableRow key={headerGroup.id} className="hover:bg-transparent">
-								{headerGroup.headers.map((header: any) => (
-									<TableHead
-										key={header.id}
-										style={{ width: `${header.getSize()}px` }}
-										className={cn(
-											"h-12 px-4 py-3",
-											header.column.id === "select" ? "ps-4 pe-0" : "",
-											// keep Created At header from wrapping and align it
-											header.column.id === "created_at" ? "whitespace-nowrap text-right" : ""
-										)}
-									>
-										{header.isPlaceholder ? null : header.column.getCanSort() ? (
-											<Button
-												variant="ghost"
-												size="sm"
-												className={cn(
-													"flex h-full cursor-pointer select-none items-center justify-between gap-2"
-												)}
-												onClick={header.column.getToggleSortingHandler()}
-											>
-												{flexRender(header.column.columnDef.header, header.getContext())}
-												{{
-													asc: <ChevronUp className="shrink-0 opacity-60" size={16} />,
-													desc: <ChevronDown className="shrink-0 opacity-60" size={16} />,
-												}[header.column.getIsSorted() as string] ?? null}
-											</Button>
-										) : (
-											flexRender(header.column.columnDef.header, header.getContext())
-										)}
-									</TableHead>
-								))}
-							</TableRow>
-						))}
-					</TableHeader>
-					<TableBody>
-						<AnimatePresence mode="popLayout">
-							{table.getRowModel().rows?.length ? (
-								table.getRowModel().rows.map((row: any, index: number) => (
-									<motion.tr
-										key={row.id}
-										initial={{ opacity: 0, y: 10 }}
-										animate={{
-											opacity: 1,
-											y: 0,
-											transition: {
-												type: "spring",
-												stiffness: 300,
-												damping: 30,
-												delay: index * 0.03,
-											},
-										}}
-										exit={{ opacity: 0, y: -10 }}
-										className={cn(
-											"border-b transition-colors hover:bg-accent hover:text-accent-foreground",
-											row.getIsSelected() ? "bg-muted/50" : ""
-										)}
-									>
-										{row.getVisibleCells().map((cell: any) => {
-											const isCreatedAt = cell.column.id === "created_at";
-											const isMessage = cell.column.id === "message";
-											return (
-												<TableCell
-													key={cell.id}
-													className={cn(
-														"px-4 py-3 align-middle",
-														cell.column.id === "select" ? "ps-4 pe-0" : "overflow-hidden",
-														isCreatedAt
-															? "whitespace-nowrap text-xs text-muted-foreground text-right"
-															: "",
-														isMessage ? "overflow-hidden" : ""
-													)}
-												>
-													{flexRender(cell.column.columnDef.cell, cell.getContext())}
-												</TableCell>
-											);
-										})}
-									</motion.tr>
-								))
-							) : (
-								<TableRow>
-									<TableCell colSpan={columns.length} className="h-24 text-center">
-										{t("no_logs")}
-									</TableCell>
-								</TableRow>
-							)}
-						</AnimatePresence>
-					</TableBody>
-				</Table>
-			</motion.div>
-
-			{/* Pagination */}
-			<LogsPagination table={table} id={id} t={t} />
-		</>
-	);
-}
-
-// Pagination Component
-function LogsPagination({ table, id, t }: { table: any; id: string; t: (key: string) => string }) {
-	return (
-		<div className="flex items-center justify-between gap-8 mt-6">
-			<motion.div
-				className="flex items-center gap-3"
-				initial={{ opacity: 0, x: -20 }}
-				animate={{ opacity: 1, x: 0 }}
-			>
-				<Label htmlFor={id} className="max-sm:sr-only">
-					{t("rows_per_page")}
-				</Label>
-				<Select
-					value={table.getState().pagination.pageSize.toString()}
-					onValueChange={(value) => table.setPageSize(Number(value))}
-				>
-					<SelectTrigger id={id} className="w-fit whitespace-nowrap">
-						<SelectValue />
-					</SelectTrigger>
-					<SelectContent>
-						{[10, 20, 50, 100].map((pageSize) => (
-							<SelectItem key={pageSize} value={pageSize.toString()}>
-								{pageSize}
-							</SelectItem>
-						))}
-					</SelectContent>
-				</Select>
-			</motion.div>
-
-			<motion.div
-				className="flex grow justify-end whitespace-nowrap text-sm text-muted-foreground"
-				initial={{ opacity: 0 }}
-				animate={{ opacity: 1 }}
-				transition={{ delay: 0.2 }}
-			>
-				<p className="whitespace-nowrap text-sm text-muted-foreground">
-					<span className="text-foreground">
-						{table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}-
-						{Math.min(
-							table.getState().pagination.pageIndex * table.getState().pagination.pageSize +
-								table.getState().pagination.pageSize,
-							table.getRowCount()
-						)}
-					</span>{" "}
-					of <span className="text-foreground">{table.getRowCount()}</span>
-				</p>
-			</motion.div>
-
-			<div>
-				<Pagination>
-					<PaginationContent>
-						<PaginationItem>
-							<Button
-								size="icon"
-								variant="outline"
-								onClick={() => table.firstPage()}
-								disabled={!table.getCanPreviousPage()}
-							>
-								<ChevronFirst size={16} />
-							</Button>
-						</PaginationItem>
-						<PaginationItem>
-							<Button
-								size="icon"
-								variant="outline"
-								onClick={() => table.previousPage()}
-								disabled={!table.getCanPreviousPage()}
-							>
-								<ChevronLeft size={16} />
-							</Button>
-						</PaginationItem>
-						<PaginationItem>
-							<Button
-								size="icon"
-								variant="outline"
-								onClick={() => table.nextPage()}
-								disabled={!table.getCanNextPage()}
-							>
-								<ChevronRight size={16} />
-							</Button>
-						</PaginationItem>
-						<PaginationItem>
-							<Button
-								size="icon"
-								variant="outline"
-								onClick={() => table.lastPage()}
-								disabled={!table.getCanNextPage()}
-							>
-								<ChevronLast size={16} />
-							</Button>
-						</PaginationItem>
-					</PaginationContent>
-				</Pagination>
-			</div>
-		</div>
-	);
-}
-
-// Row Actions Component
-function LogRowActions({ row, t }: { row: Row<Log>; t: (key: string) => string }) {
-	const [isOpen, setIsOpen] = useState(false);
-	const [isDeleting, setIsDeleting] = useState(false);
-	const { deleteLog, refreshLogs } = useContext(LogsContext)!;
-	const log = row.original;
-
-	const handleDelete = async () => {
-		setIsDeleting(true);
-		try {
-			await deleteLog(log.id);
-			// toast.success(t("log_deleted_success"));
-			await refreshLogs();
-		} catch (error) {
-			console.error("Error deleting log:", error);
-			toast.error(t("log_deleted_error"));
-		} finally {
-			setIsDeleting(false);
-			setIsOpen(false);
-		}
-	};
-
-	return (
-		<div className="flex justify-end">
-			<DropdownMenu>
-				<DropdownMenuTrigger asChild>
-					<Button variant="ghost" className="h-8 w-8 p-0">
-						<MoreHorizontal className="h-4 w-4" />
-					</Button>
-				</DropdownMenuTrigger>
-				<DropdownMenuContent align="end">
-					<JsonMetadataViewer
-						title={`Log ${log.id} - Metadata`}
-						metadata={log.log_metadata}
-						trigger={
-							<DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-								{t("view_metadata")}
-							</DropdownMenuItem>
-						}
-					/>
-					<DropdownMenuSeparator />
-					<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
-						<AlertDialogTrigger asChild>
-							<DropdownMenuItem
-								onSelect={(e) => {
-									e.preventDefault();
-									setIsOpen(true);
-								}}
-							>
-								{t("delete")}
-							</DropdownMenuItem>
-						</AlertDialogTrigger>
-						<AlertDialogContent>
-							<AlertDialogHeader>
-								<AlertDialogTitle>{t("confirm_delete_log_title")}</AlertDialogTitle>
-								<AlertDialogDescription>{t("confirm_delete_log_desc")}</AlertDialogDescription>
-							</AlertDialogHeader>
-							<AlertDialogFooter>
-								<AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
-								<AlertDialogAction onClick={handleDelete} disabled={isDeleting}>
-									{isDeleting ? t("deleting") : t("delete")}
-								</AlertDialogAction>
-							</AlertDialogFooter>
-						</AlertDialogContent>
-					</AlertDialog>
-				</DropdownMenuContent>
-			</DropdownMenu>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/logs/loading.tsx b/surfsense_web/app/dashboard/[search_space_id]/logs/loading.tsx
deleted file mode 100644
index e734d4e53..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/logs/loading.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton";
-
-export default function Loading() {
-	return (
-		<div className="w-full px-6 py-4 space-y-6 min-h-[calc(100vh-64px)] animate-in fade-in duration-300">
-			{/* Summary Dashboard Skeleton */}
-			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-				{[...Array(4)].map((_, i) => (
-					<div key={i} className="rounded-lg border p-4">
-						<div className="flex flex-row items-center justify-between space-y-0 pb-2">
-							<Skeleton className="h-4 w-24" />
-							<Skeleton className="h-4 w-4 rounded-full" />
-						</div>
-						<div className="space-y-2">
-							<Skeleton className="h-8 w-16" />
-							<Skeleton className="h-3 w-32" />
-						</div>
-					</div>
-				))}
-			</div>
-
-			{/* Header Section Skeleton */}
-			<div className="flex items-center justify-between">
-				<div className="space-y-2">
-					<Skeleton className="h-8 w-48" />
-					<Skeleton className="h-4 w-64" />
-				</div>
-				<Skeleton className="h-9 w-24" />
-			</div>
-
-			{/* Filters Skeleton */}
-			<div className="flex flex-wrap items-center justify-start gap-3 w-full">
-				<div className="flex items-center gap-3 flex-wrap w-full sm:w-auto">
-					<Skeleton className="h-9 w-full sm:w-60" />
-					<Skeleton className="h-9 w-24" />
-					<Skeleton className="h-9 w-24" />
-					<Skeleton className="h-9 w-20" />
-				</div>
-			</div>
-
-			{/* Table Skeleton */}
-			<div className="rounded-md border overflow-hidden">
-				{/* Table Header */}
-				<div className="border-b bg-muted/50 px-4 py-3 flex items-center gap-4">
-					<Skeleton className="h-4 w-4" />
-					<Skeleton className="h-4 w-16" />
-					<Skeleton className="h-4 w-20" />
-					<Skeleton className="h-4 w-24" />
-					<Skeleton className="h-4 flex-1" />
-					<Skeleton className="h-4 w-24" />
-					<Skeleton className="h-4 w-8" />
-				</div>
-
-				{/* Table Rows */}
-				{[...Array(6)].map((_, i) => (
-					<div
-						key={i}
-						className="border-b px-4 py-3 flex items-center gap-4 hover:bg-accent hover:text-accent-foreground"
-					>
-						<Skeleton className="h-4 w-4" />
-						<Skeleton className="h-6 w-12 rounded-full" />
-						<Skeleton className="h-6 w-16 rounded-full" />
-						<div className="flex items-center gap-2">
-							<Skeleton className="h-4 w-4" />
-							<Skeleton className="h-4 w-20" />
-						</div>
-						<div className="flex-1 space-y-1">
-							<Skeleton className="h-4 w-32" />
-							<Skeleton className="h-3 w-48" />
-						</div>
-						<div className="space-y-1">
-							<Skeleton className="h-3 w-24" />
-							<Skeleton className="h-3 w-20" />
-						</div>
-						<Skeleton className="h-8 w-8" />
-					</div>
-				))}
-			</div>
-
-			{/* Pagination Skeleton */}
-			<div className="flex items-center justify-between gap-8 mt-4">
-				<div className="flex items-center gap-3">
-					<Skeleton className="h-4 w-20 max-sm:sr-only" />
-					<Skeleton className="h-9 w-16" />
-				</div>
-
-				<div className="flex grow justify-end">
-					<Skeleton className="h-4 w-40" />
-				</div>
-
-				<div className="flex items-center gap-2">
-					<Skeleton className="h-9 w-9" />
-					<Skeleton className="h-9 w-9" />
-					<Skeleton className="h-9 w-9" />
-					<Skeleton className="h-9 w-9" />
-				</div>
-			</div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/more-pages/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/more-pages/page.tsx
deleted file mode 100644
index 46f1965d0..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/more-pages/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client";
-
-import { useParams, useRouter } from "next/navigation";
-import { useEffect } from "react";
-
-// Legacy route kept as a redirect: older "insufficient credits" notifications
-// and bookmarks may still point at /more-pages.
-export default function MorePagesPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params?.search_space_id ?? "";
-
-	useEffect(() => {
-		router.replace(`/dashboard/${searchSpaceId}/earn-credits`);
-	}, [router, searchSpaceId]);
-
-	return null;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
deleted file mode 100644
index 64971c3bb..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
+++ /dev/null
@@ -1,2572 +0,0 @@
-"use client";
-
-import {
-	type AppendMessage,
-	AssistantRuntimeProvider,
-	type ThreadMessageLike,
-	useExternalStoreRuntime,
-} from "@assistant-ui/react";
-import { useQueryClient } from "@tanstack/react-query";
-import { useAtomValue, useSetAtom, useStore } from "jotai";
-import dynamic from "next/dynamic";
-import { useParams } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { toast } from "sonner";
-import { z } from "zod";
-import { agentFlagsAtom } from "@/atoms/agent/agent-flags-query.atom";
-import { disabledToolsAtom } from "@/atoms/agent-tools/agent-tools.atoms";
-import {
-	clearTargetCommentIdAtom,
-	currentThreadAtom,
-	setCurrentThreadMetadataAtom,
-	setTargetCommentIdAtom,
-} from "@/atoms/chat/current-thread.atom";
-import {
-	deriveMentionedPayload,
-	type MentionedDocumentInfo,
-	mentionedDocumentsAtom,
-	messageDocumentsMapAtom,
-	submittedMentionsAtom,
-} from "@/atoms/chat/mentioned-documents.atom";
-import { pendingUserImageDataUrlsAtom } from "@/atoms/chat/pending-user-images.atom";
-import {
-	clearPlanOwnerRegistry,
-	// extractWriteTodosFromContent,
-} from "@/atoms/chat/plan-state.atom";
-import { setPremiumAlertForThreadAtom } from "@/atoms/chat/premium-alert.atom";
-import { closeReportPanelAtom } from "@/atoms/chat/report-panel.atom";
-import { type AgentCreatedDocument, agentCreatedDocumentsAtom } from "@/atoms/documents/ui.atoms";
-import { closeEditorPanelAtom } from "@/atoms/editor/editor-panel.atom";
-import { membersAtom } from "@/atoms/members/members-query.atoms";
-import { removeChatTabAtom, syncChatTabAtom, updateChatTabTitleAtom } from "@/atoms/tabs/tabs.atom";
-import { currentUserAtom } from "@/atoms/user/user-query.atoms";
-import {
-	EditMessageDialog,
-	type EditMessageDialogChoice,
-} from "@/components/assistant-ui/edit-message-dialog";
-import { StepSeparatorDataUI } from "@/components/assistant-ui/step-separator";
-import { Thread } from "@/components/assistant-ui/thread";
-import {
-	createTokenUsageStore,
-	type TokenUsageData,
-	TokenUsageProvider,
-} from "@/components/assistant-ui/token-usage-context";
-import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
-import { useSyncChatArtifacts } from "@/features/chat-artifacts";
-import {
-	type HitlDecision,
-	PendingInterruptProvider,
-	type PendingInterruptState,
-} from "@/features/chat-messages/hitl";
-import { TimelineDataUI } from "@/features/chat-messages/timeline";
-import {
-	applyActionLogSse,
-	applyActionLogUpdatedSse,
-	markActionRevertedInCache,
-	useAgentActionsQuery,
-} from "@/hooks/use-agent-actions-query";
-import { useChatSessionStateSync } from "@/hooks/use-chat-session-state";
-import { useMessagesSync } from "@/hooks/use-messages-sync";
-import { useThreadDetail, useThreadMessages } from "@/hooks/use-thread-queries";
-import { getAgentFilesystemSelection } from "@/lib/agent-filesystem";
-import { documentsApiService } from "@/lib/apis/documents-api.service";
-import { authenticatedFetch } from "@/lib/auth-fetch";
-import { type ChatFlow, classifyChatError } from "@/lib/chat/chat-error-classifier";
-import { tagPreAcceptSendFailure, toHttpResponseError } from "@/lib/chat/chat-request-errors";
-import { getMentionDocKey } from "@/lib/chat/mention-doc-key";
-import {
-	convertToThreadMessage,
-	reconcileInterruptedAssistantMessages,
-} from "@/lib/chat/message-utils";
-import { createStreamFlushHelpers } from "@/lib/chat/stream-flush";
-import { consumeSseEvents, processSharedStreamEvent } from "@/lib/chat/stream-pipeline";
-import {
-	applyTurnIdToAssistantMessageList,
-	mergeChatTurnIdIntoMessage,
-	readStreamedChatTurnId,
-	readStreamedMessageId,
-} from "@/lib/chat/stream-side-effects";
-import {
-	addToolCall,
-	buildContentForUI,
-	type ContentPartsState,
-	type FrameBatchedUpdater,
-	type ThinkingStepData,
-	type ToolUIGate,
-	updateToolCall,
-} from "@/lib/chat/streaming-state";
-import {
-	appendMessage,
-	createThread,
-	getRegenerateUrl,
-	type ThreadListItem,
-	type ThreadListResponse,
-	type ThreadRecord,
-} from "@/lib/chat/thread-persistence";
-import {
-	extractUserTurnForNewChatApi,
-	type NewChatUserImagePayload,
-} from "@/lib/chat/user-turn-api-parts";
-import { buildBackendUrl } from "@/lib/env-config";
-import { NotFoundError } from "@/lib/error";
-import {
-	trackChatBlocked,
-	trackChatCreated,
-	trackChatErrorDetailed,
-	trackChatMessageSent,
-	trackChatResponseReceived,
-} from "@/lib/posthog/events";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
-
-const MobileEditorPanel = dynamic(
-	() =>
-		import("@/components/editor-panel/editor-panel").then((m) => ({
-			default: m.MobileEditorPanel,
-		})),
-	{ ssr: false }
-);
-const MobileHitlEditPanel = dynamic(
-	() =>
-		import("@/features/chat-messages/hitl").then((m) => ({
-			default: m.MobileHitlEditPanel,
-		})),
-	{ ssr: false }
-);
-const MobileReportPanel = dynamic(
-	() =>
-		import("@/components/report-panel/report-panel").then((m) => ({
-			default: m.MobileReportPanel,
-		})),
-	{ ssr: false }
-);
-const MobileArtifactsPanel = dynamic(
-	() =>
-		import("@/features/chat-artifacts/ui/artifacts-panel").then((m) => ({
-			default: m.MobileArtifactsPanel,
-		})),
-	{ ssr: false }
-);
-
-/**
- * Generate a synthetic ``toolCallId`` for an action_request that has no
- * matching streamed tool-call card (HITL-blocked subagent calls don't surface
- * as tool-call events). Suffixes a counter when the base id is already taken
- * — sequential interrupts for the same tool name otherwise collide on
- * ``interrupt-${name}-${i}`` and crash assistant-ui with a duplicate-key error.
- */
-function freshSynthToolCallId(
-	toolCallIndices: Map<string, number>,
-	toolName: string,
-	index: number
-): string {
-	const base = `interrupt-${toolName}-${index}`;
-	if (!toolCallIndices.has(base)) return base;
-	let n = 1;
-	while (toolCallIndices.has(`${base}-${n}`)) n++;
-	return `${base}-${n}`;
-}
-
-/**
- * Pair each ``action_request`` to a unique pending tool-call card, preserving
- * order so ``decisions[i]`` lines up with ``action_requests[i]`` on the wire.
- *
- * Same-name bundles (e.g. three ``create_jira_issue``) used to collapse onto
- * one card because the matcher keyed by name; this consumes each card via the
- * ``claimed`` set and walks forward in DOM order.
- */
-function pairBundleToolCallIds(
-	toolCallIndices: Map<string, number>,
-	contentParts: Array<{
-		type: string;
-		toolName?: string;
-		result?: unknown;
-	}>,
-	actionRequests: ReadonlyArray<{ name: string }>
-): Array<string | null> {
-	const claimed = new Set<string>();
-	const paired: Array<string | null> = [];
-	for (const action of actionRequests) {
-		let matched: string | null = null;
-		for (const [tcId, idx] of toolCallIndices) {
-			if (claimed.has(tcId)) continue;
-			const part = contentParts[idx];
-			if (!part || part.type !== "tool-call" || part.toolName !== action.name) continue;
-			const result = part.result as Record<string, unknown> | undefined | null;
-			if (result == null || (result.__interrupt__ === true && !result.__decided__)) {
-				matched = tcId;
-				claimed.add(tcId);
-				break;
-			}
-		}
-		paired.push(matched);
-	}
-	return paired;
-}
-
-/**
- * Zod schema for mentioned document info (for type-safe parsing).
- *
- * ``kind`` defaults to ``"doc"`` so messages persisted before folder
- * mentions existed deserialise unchanged.
- */
-const MentionedDocumentInfoSchema = z.object({
-	id: z.number(),
-	title: z.string(),
-	document_type: z.string().optional(),
-	kind: z
-		.union([z.literal("doc"), z.literal("folder"), z.literal("connector"), z.literal("thread")])
-		.optional()
-		.default("doc"),
-	connector_type: z.string().optional(),
-	account_name: z.string().optional(),
-});
-
-const MentionedDocumentsPartSchema = z.object({
-	type: z.literal("mentioned-documents"),
-	documents: z.array(MentionedDocumentInfoSchema),
-});
-
-/**
- * Extract mentioned documents from message content (type-safe with Zod)
- */
-function extractMentionedDocuments(content: unknown): MentionedDocumentInfo[] {
-	if (!Array.isArray(content)) return [];
-
-	for (const part of content) {
-		const result = MentionedDocumentsPartSchema.safeParse(part);
-		if (result.success) {
-			return result.data.documents.map<MentionedDocumentInfo>((doc) => {
-				if (doc.kind === "connector") {
-					return {
-						id: doc.id,
-						title: doc.title,
-						kind: "connector",
-						connector_type: doc.connector_type ?? doc.document_type ?? "UNKNOWN",
-						account_name: doc.account_name ?? doc.title,
-					};
-				}
-				if (doc.kind === "folder") {
-					return {
-						id: doc.id,
-						title: doc.title,
-						kind: "folder",
-					};
-				}
-				if (doc.kind === "thread") {
-					return {
-						id: doc.id,
-						title: doc.title,
-						kind: "thread",
-					};
-				}
-				return {
-					id: doc.id,
-					title: doc.title,
-					document_type: doc.document_type ?? "UNKNOWN",
-					kind: "doc",
-				};
-			});
-		}
-	}
-
-	return [];
-}
-
-/**
- * Every tool call renders a card. The legacy
- * ``BASE_TOOLS_WITH_UI`` allowlist used to drop unknown tool calls on the
- * floor; we now route everything through ``ToolFallback``. Persisted
- * payload size stays bounded because the backend's
- * ``format_thinking_step`` summarisation and the
- * ``result_length``-only default for unknown tools (see
- * ``stream_new_chat.py``) keep the JSON from ballooning.
- */
-const TOOLS_WITH_UI_ALL: ToolUIGate = "all";
-const TURN_CANCELLING_INITIAL_DELAY_MS = 200;
-const TURN_CANCELLING_BACKOFF_FACTOR = 2;
-const TURN_CANCELLING_MAX_DELAY_MS = 1500;
-const RECENT_CANCEL_WINDOW_MS = 5_000;
-
-function sleep(ms: number): Promise<void> {
-	return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-function computeFallbackTurnCancellingRetryDelay(attempt: number): number {
-	const safeAttempt = Math.max(1, attempt);
-	const raw =
-		TURN_CANCELLING_INITIAL_DELAY_MS * TURN_CANCELLING_BACKOFF_FACTOR ** (safeAttempt - 1);
-	return Math.min(raw, TURN_CANCELLING_MAX_DELAY_MS);
-}
-
-function parseUrlChatId(id: string | string[] | undefined): number {
-	let parsed = 0;
-	if (Array.isArray(id) && id.length > 0) {
-		parsed = Number.parseInt(id[0], 10);
-	} else if (typeof id === "string") {
-		parsed = Number.parseInt(id, 10);
-	}
-	return Number.isNaN(parsed) ? 0 : parsed;
-}
-
-function ThreadMessagesSkeleton() {
-	return (
-		<div
-			className="aui-root aui-thread-root @container flex h-full min-h-0 flex-col bg-panel"
-			style={{
-				["--thread-max-width" as string]: "42rem",
-			}}
-		>
-			<div
-				className="aui-thread-viewport relative flex flex-1 min-h-0 flex-col overflow-y-auto px-4 scroll-smooth"
-				style={{ scrollbarGutter: "stable" }}
-			>
-				<div
-					aria-hidden
-					className="aui-chat-viewport-top-fade pointer-events-none sticky top-0 z-10 -mx-4 h-2 shrink-0 bg-gradient-to-b from-panel from-20% to-transparent"
-				/>
-				<div className="mx-auto w-full max-w-(--thread-max-width) flex flex-1 flex-col gap-6 py-8">
-					<div className="flex justify-end">
-						<Skeleton className="h-12 w-[65%] max-w-56 rounded-2xl" />
-					</div>
-
-					<div className="flex flex-col gap-2">
-						<Skeleton className="h-4 w-full" />
-						<Skeleton className="h-4 w-[85%]" />
-						<Skeleton className="h-18 w-[40%]" />
-					</div>
-
-					<div className="flex gap-2 justify-end">
-						<Skeleton className="h-12 w-[78%] max-w-72 rounded-2xl" />
-					</div>
-
-					<div className="flex flex-col gap-2">
-						<Skeleton className="h-10 w-[30%]" />
-						<Skeleton className="h-4 w-[90%]" />
-						<Skeleton className="h-6 w-[60%]" />
-					</div>
-
-					<div className="flex gap-2 justify-end">
-						<Skeleton className="h-12 w-[85%] max-w-96 rounded-2xl" />
-					</div>
-				</div>
-
-				<div
-					className="aui-chat-composer-footer sticky bottom-0 z-20 -mx-4 mt-auto flex flex-col items-stretch bg-gradient-to-t from-panel from-60% to-transparent px-4 pt-6"
-					style={{ paddingBottom: "max(0.5rem, env(safe-area-inset-bottom))" }}
-				>
-					<div className="aui-chat-composer-area relative mx-auto flex w-full max-w-(--thread-max-width) flex-col gap-3 overflow-visible">
-						<Skeleton className="h-28 w-full rounded-3xl" />
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default function NewChatPage() {
-	const params = useParams();
-	const queryClient = useQueryClient();
-	const urlChatId = useMemo(() => parseUrlChatId(params.chat_id), [params.chat_id]);
-	const [threadId, setThreadId] = useState<number | null>(() => (urlChatId > 0 ? urlChatId : null));
-	const activeThreadId = urlChatId > 0 ? urlChatId : threadId;
-	const handledLoadErrorThreadRef = useRef<number | null>(null);
-	const [currentThread, setCurrentThread] = useState<ThreadRecord | null>(null);
-	const [messages, setMessages] = useState<ThreadMessageLike[]>([]);
-	const [isRunning, setIsRunning] = useState(false);
-	const [tokenUsageStore] = useState(() => createTokenUsageStore());
-	const abortControllerRef = useRef<AbortController | null>(null);
-	const recentCancelRequestedAtRef = useRef(0);
-	// One entry per paused subagent, in receipt order (which matches the
-	// backend's ``state.interrupts`` traversal — and therefore the order
-	// ``slice_decisions_by_tool_call`` consumes on resume). Cleared on submit
-	// or on a fresh user turn.
-	const [pendingInterrupts, setPendingInterrupts] = useState<PendingInterruptState[]>([]);
-	// Per-card staged decisions held until every pending card has submitted,
-	// at which point we batch them into one ``hitl-decision`` event in the
-	// same order as ``pendingInterrupts``. Using a ref because partial
-	// progress should not re-render the page.
-	const stagedDecisionsByInterruptIdRef = useRef<Map<string, HitlDecision[]>>(new Map());
-	const toolsWithUI = TOOLS_WITH_UI_ALL;
-	const setMessageDocumentsMap = useSetAtom(messageDocumentsMapAtom);
-
-	const persistAssistantErrorMessage = useCallback(
-		async ({
-			threadId,
-			assistantMsgId,
-			text,
-		}: {
-			threadId: number | null;
-			assistantMsgId: string;
-			text: string;
-		}) => {
-			setMessages((prev) =>
-				prev.map((m) =>
-					m.id === assistantMsgId
-						? {
-								...m,
-								content: [{ type: "text", text }],
-							}
-						: m
-				)
-			);
-
-			if (!threadId) return;
-
-			// Persist only temporary assistant placeholders to avoid duplicate rows
-			// when the message already has a database-backed ID.
-			if (!assistantMsgId.startsWith("msg-assistant-")) return;
-
-			try {
-				const savedMessage = await appendMessage(threadId, {
-					role: "assistant",
-					content: [{ type: "text", text }],
-				});
-				const newMsgId = `msg-${savedMessage.id}`;
-				tokenUsageStore.rename(assistantMsgId, newMsgId);
-				setMessages((prev) =>
-					prev.map((m) => (m.id === assistantMsgId ? { ...m, id: newMsgId } : m))
-				);
-			} catch (persistErr) {
-				console.error("Failed to persist assistant error message:", persistErr);
-			}
-		},
-		[tokenUsageStore]
-	);
-
-	// NOTE: ``persistUserTurn`` / ``persistAssistantTurn`` callbacks
-	// were removed in the SSE-based message ID handshake refactor.
-	// ``stream_new_chat`` and ``stream_resume_chat`` now persist both
-	// the user and assistant rows server-side via
-	// ``persist_user_turn`` / ``persist_assistant_shell`` and emit
-	// ``data-user-message-id`` / ``data-assistant-message-id`` SSE
-	// events; the consumers below rename the optimistic ids in real
-	// time. ``persistAssistantErrorMessage`` (above) is intentionally
-	// kept — it is the pre-stream-error fallback fired when the
-	// server NEVER accepted the request, and the BE has nothing to
-	// persist in that case.
-
-	// Get disabled tools from the tool toggle UI
-	const disabledTools = useAtomValue(disabledToolsAtom);
-
-	const jotaiStore = useStore();
-	const mentionedDocuments = useAtomValue(mentionedDocumentsAtom);
-	const messageDocumentsMap = useAtomValue(messageDocumentsMapAtom);
-	const setMentionedDocuments = useSetAtom(mentionedDocumentsAtom);
-	const currentThreadState = useAtomValue(currentThreadAtom);
-	const setCurrentThreadMetadata = useSetAtom(setCurrentThreadMetadataAtom);
-	const setPremiumAlertForThread = useSetAtom(setPremiumAlertForThreadAtom);
-	const setTargetCommentId = useSetAtom(setTargetCommentIdAtom);
-	const clearTargetCommentId = useSetAtom(clearTargetCommentIdAtom);
-	const closeReportPanel = useSetAtom(closeReportPanelAtom);
-	const closeEditorPanel = useSetAtom(closeEditorPanelAtom);
-	const syncChatTab = useSetAtom(syncChatTabAtom);
-	const updateChatTabTitle = useSetAtom(updateChatTabTitleAtom);
-	const removeChatTab = useSetAtom(removeChatTabAtom);
-	const setAgentCreatedDocuments = useSetAtom(agentCreatedDocumentsAtom);
-	const pendingUserImageUrls = useAtomValue(pendingUserImageDataUrlsAtom);
-	const setPendingUserImageUrls = useSetAtom(pendingUserImageDataUrlsAtom);
-	// Edit dialog state. Holds the message id being edited and
-	// the (already extracted) regenerate args so we can resume the edit
-	// after the user picks "revert all" / "continue" / "cancel".
-	const [editDialogState, setEditDialogState] = useState<{
-		fromMessageId: number;
-		userQuery: string | null;
-		userMessageContent: ThreadMessageLike["content"];
-		userImages: NewChatUserImagePayload[];
-		downstreamReversibleCount: number;
-		downstreamTotalCount: number;
-	} | null>(null);
-
-	// Get current user for author info in shared chats
-	const { data: currentUser } = useAtomValue(currentUserAtom);
-	const { data: agentFlags } = useAtomValue(agentFlagsAtom);
-	const localFilesystemEnabled = agentFlags?.enable_desktop_local_filesystem === true;
-	const threadDetailQuery = useThreadDetail(activeThreadId);
-	const threadMessagesQuery = useThreadMessages(activeThreadId);
-
-	// Live collaboration: sync session state and messages via Zero
-	useChatSessionStateSync(activeThreadId);
-	const { data: membersData } = useAtomValue(membersAtom);
-
-	const handleSyncedMessagesUpdate = useCallback(
-		(
-			syncedMessages: {
-				id: number;
-				thread_id: number;
-				role: string;
-				content: unknown;
-				author_id: string | null;
-				created_at: string;
-				// Forwarded so ``convertToThreadMessage`` can rebuild the
-				// ``metadata.custom.chatTurnId`` on the
-				// ``ThreadMessageLike``. Required by the inline Revert
-				// button's per-turn fallback.
-				turn_id?: string | null;
-			}[]
-		) => {
-			if (isRunning) {
-				return;
-			}
-
-			setMessages((prev) => {
-				if (syncedMessages.length < prev.length) {
-					return prev;
-				}
-
-				const memberById = new Map(membersData?.map((m) => [m.user_id, m]) ?? []);
-				const prevById = new Map(prev.map((m) => [m.id, m]));
-
-				return reconcileInterruptedAssistantMessages(syncedMessages).map((msg) => {
-					const member = msg.author_id ? (memberById.get(msg.author_id) ?? null) : null;
-
-					// Preserve existing author info if member lookup fails (e.g., cloned chats)
-					const existingMsg = prevById.get(`msg-${msg.id}`);
-					const existingAuthor = existingMsg?.metadata?.custom?.author as
-						| { displayName?: string | null; avatarUrl?: string | null }
-						| undefined;
-
-					return convertToThreadMessage({
-						id: msg.id,
-						thread_id: msg.thread_id,
-						role: msg.role.toLowerCase() as "user" | "assistant" | "system",
-						content: msg.content,
-						author_id: msg.author_id,
-						created_at: msg.created_at,
-						author_display_name: member?.user_display_name ?? existingAuthor?.displayName ?? null,
-						author_avatar_url: member?.user_avatar_url ?? existingAuthor?.avatarUrl ?? null,
-						// Forward the per-turn correlation id so the
-						// inline Revert button's ``(chat_turn_id,
-						// tool_name, position)`` fallback survives the
-						// post-stream Zero re-sync.
-						turn_id: msg.turn_id ?? null,
-					});
-				});
-			});
-		},
-		[isRunning, membersData]
-	);
-
-	useMessagesSync(activeThreadId, handleSyncedMessagesUpdate);
-
-	// Extract search_space_id from URL params
-	const searchSpaceId = useMemo(() => {
-		const id = params.search_space_id;
-		const parsed = typeof id === "string" ? Number.parseInt(id, 10) : 0;
-		return Number.isNaN(parsed) ? 0 : parsed;
-	}, [params.search_space_id]);
-
-	// Unified store for agent-action rows (the same react-query cache
-	// the agent-actions dialog, the inline Revert button, and the
-	// per-turn Revert button all read). Hydrates from
-	// ``GET /threads/{id}/actions`` and is updated incrementally by the
-	// SSE handlers + revert-batch results below — no atom side-channel.
-	const { items: agentActionItems } = useAgentActionsQuery(activeThreadId);
-
-	const handleChatFailure = useCallback(
-		async ({
-			error,
-			flow,
-			threadId,
-			assistantMsgId,
-		}: {
-			error: unknown;
-			flow: ChatFlow;
-			threadId: number | null;
-			assistantMsgId: string;
-		}) => {
-			const normalized = classifyChatError({
-				error,
-				flow,
-				context: {
-					searchSpaceId,
-					threadId,
-				},
-			});
-
-			const logger =
-				normalized.severity === "error"
-					? console.error
-					: normalized.severity === "warn"
-						? console.warn
-						: console.info;
-			logger(`[NewChatPage] ${flow} ${normalized.kind}:`, error);
-
-			const telemetryPayload = {
-				flow,
-				kind: normalized.kind,
-				error_code: normalized.errorCode,
-				severity: normalized.severity,
-				is_expected: normalized.isExpected,
-				message: normalized.userMessage,
-			};
-			if (normalized.telemetryEvent === "chat_blocked") {
-				trackChatBlocked(searchSpaceId, threadId, telemetryPayload);
-			} else {
-				trackChatErrorDetailed(searchSpaceId, threadId, telemetryPayload);
-			}
-
-			if (normalized.channel === "silent") {
-				return;
-			}
-
-			if (normalized.channel === "pinned_inline") {
-				if (threadId) {
-					setPremiumAlertForThread({
-						threadId,
-						message: normalized.userMessage,
-						userId: currentUser?.id ?? null,
-					});
-				}
-				if (normalized.assistantMessage) {
-					await persistAssistantErrorMessage({
-						threadId,
-						assistantMsgId,
-						text: normalized.assistantMessage,
-					});
-				}
-				return;
-			}
-
-			if (normalized.channel === "inline") {
-				if (normalized.assistantMessage) {
-					await persistAssistantErrorMessage({
-						threadId,
-						assistantMsgId,
-						text: normalized.assistantMessage,
-					});
-				}
-				toast.error(normalized.userMessage);
-				return;
-			}
-
-			toast.error(normalized.userMessage);
-		},
-		[currentUser?.id, persistAssistantErrorMessage, searchSpaceId, setPremiumAlertForThread]
-	);
-
-	const handleStreamTerminalError = useCallback(
-		async ({
-			error,
-			flow,
-			threadId,
-			assistantMsgId,
-			accepted,
-			onAbort,
-			onPreAcceptFailure,
-			onAcceptedStreamError,
-		}: {
-			error: unknown;
-			flow: ChatFlow;
-			threadId: number | null;
-			assistantMsgId: string;
-			accepted: boolean;
-			onAbort?: () => Promise<void>;
-			onPreAcceptFailure?: () => Promise<void>;
-			onAcceptedStreamError?: () => Promise<void>;
-		}) => {
-			if (error instanceof Error && error.name === "AbortError") {
-				await onAbort?.();
-				return;
-			}
-
-			if (!accepted) {
-				await onPreAcceptFailure?.();
-			} else {
-				await onAcceptedStreamError?.();
-			}
-
-			await handleChatFailure({
-				error: !accepted ? tagPreAcceptSendFailure(error) : error,
-				flow,
-				threadId,
-				assistantMsgId: accepted ? assistantMsgId : "no-persist-assistant",
-			});
-		},
-		[handleChatFailure]
-	);
-
-	const fetchWithTurnCancellingRetry = useCallback(async (runFetch: () => Promise<Response>) => {
-		const maxAttempts = 4;
-		for (let attempt = 1; attempt <= maxAttempts; attempt += 1) {
-			const response = await runFetch();
-			if (response.ok) {
-				return response;
-			}
-			const error = await toHttpResponseError(response);
-			const withMeta = error as Error & { errorCode?: string; retryAfterMs?: number };
-			const isTurnCancelling = withMeta.errorCode === "TURN_CANCELLING";
-			const isRecentThreadBusyAfterCancel =
-				withMeta.errorCode === "THREAD_BUSY" &&
-				Date.now() - recentCancelRequestedAtRef.current <= RECENT_CANCEL_WINDOW_MS;
-			if ((isTurnCancelling || isRecentThreadBusyAfterCancel) && attempt < maxAttempts) {
-				const waitMs = withMeta.retryAfterMs ?? computeFallbackTurnCancellingRetryDelay(attempt);
-				await sleep(waitMs);
-				continue;
-			}
-			throw error;
-		}
-
-		throw Object.assign(new Error("Turn cancellation retry limit exceeded"), {
-			errorCode: "TURN_CANCELLING",
-		});
-	}, []);
-
-	const hydratedMessagesRef = useRef<{
-		threadId: number | null;
-		data: typeof threadMessagesQuery.data;
-	}>({ threadId: null, data: undefined });
-
-	// Reset thread-local runtime state on route/search-space changes. Data fetching
-	// is handled by React Query below so the chat shell can render immediately.
-	useEffect(() => {
-		const nextThreadId = urlChatId > 0 ? urlChatId : null;
-		handledLoadErrorThreadRef.current = null;
-		hydratedMessagesRef.current = { threadId: null, data: undefined };
-		setThreadId(nextThreadId);
-		setMessages([]);
-		setCurrentThread(null);
-		setMentionedDocuments([]);
-		tokenUsageStore.clear();
-		setMessageDocumentsMap({});
-		clearPlanOwnerRegistry();
-		closeReportPanel();
-		closeEditorPanel();
-		// Note: agent-action data is keyed by threadId in react-query so
-		// switching threads naturally swaps caches; no explicit reset.
-	}, [
-		urlChatId,
-		setMentionedDocuments,
-		setMessageDocumentsMap,
-		tokenUsageStore,
-		closeReportPanel,
-		closeEditorPanel,
-	]);
-
-	useEffect(() => {
-		if (!activeThreadId) {
-			setCurrentThread(null);
-			return;
-		}
-		if (threadDetailQuery.data?.id === activeThreadId) {
-			const thread = threadDetailQuery.data;
-			setCurrentThread(thread);
-			syncChatTab({
-				chatId: thread.id,
-				title: thread.title,
-				chatUrl: `/dashboard/${thread.search_space_id ?? searchSpaceId}/new-chat/${thread.id}`,
-				searchSpaceId: thread.search_space_id ?? searchSpaceId,
-				visibility: thread.visibility,
-				hasComments: thread.has_comments ?? false,
-			});
-		}
-	}, [activeThreadId, searchSpaceId, syncChatTab, threadDetailQuery.data]);
-
-	useEffect(() => {
-		const messagesResponse = threadMessagesQuery.data;
-		if (!activeThreadId || !messagesResponse) return;
-
-		if (
-			hydratedMessagesRef.current.threadId === activeThreadId &&
-			hydratedMessagesRef.current.data === messagesResponse
-		) {
-			return;
-		}
-
-		if (isRunning) {
-			return;
-		}
-
-		const loadedMessages = reconcileInterruptedAssistantMessages(messagesResponse.messages).map(
-			convertToThreadMessage
-		);
-		if (messages.length > 0 && loadedMessages.length < messages.length) {
-			return;
-		}
-		setMessages(loadedMessages);
-
-		tokenUsageStore.clear();
-		const restoredDocsMap: Record<string, MentionedDocumentInfo[]> = {};
-		for (const msg of messagesResponse.messages) {
-			if (msg.token_usage) {
-				tokenUsageStore.set(`msg-${msg.id}`, msg.token_usage as TokenUsageData);
-			}
-			if (msg.role === "user") {
-				const docs = extractMentionedDocuments(msg.content);
-				if (docs.length > 0) {
-					restoredDocsMap[`msg-${msg.id}`] = docs;
-				}
-			}
-		}
-		setMessageDocumentsMap(restoredDocsMap);
-		hydratedMessagesRef.current = { threadId: activeThreadId, data: messagesResponse };
-	}, [
-		activeThreadId,
-		isRunning,
-		messages.length,
-		setMessageDocumentsMap,
-		threadMessagesQuery.data,
-		tokenUsageStore,
-	]);
-
-	useEffect(() => {
-		const loadError = threadDetailQuery.error ?? threadMessagesQuery.error;
-		if (!activeThreadId || !loadError) return;
-		if (handledLoadErrorThreadRef.current === activeThreadId) return;
-
-		handledLoadErrorThreadRef.current = activeThreadId;
-		console.error("[NewChatPage] Failed to load thread:", loadError);
-
-		if (loadError instanceof NotFoundError) {
-			removeChatTab(activeThreadId);
-			if (typeof window !== "undefined") {
-				window.history.replaceState(null, "", `/dashboard/${searchSpaceId}/new-chat`);
-			}
-			setThreadId(null);
-			setCurrentThread(null);
-			setMessages([]);
-			toast.error("This chat was deleted.");
-			return;
-		}
-
-		toast.error("Failed to load chat. Please try again.");
-	}, [
-		activeThreadId,
-		removeChatTab,
-		searchSpaceId,
-		threadDetailQuery.error,
-		threadMessagesQuery.error,
-	]);
-
-	// Prefetch document titles for @ mention picker
-	// Runs when user lands on page so data is ready when they type @
-	useEffect(() => {
-		if (!searchSpaceId) return;
-
-		const prefetchParams = {
-			search_space_id: searchSpaceId,
-			page: 0,
-			page_size: 20,
-		};
-
-		queryClient.prefetchQuery({
-			queryKey: ["document-titles", prefetchParams],
-			queryFn: () => documentsApiService.searchDocumentTitles({ queryParams: prefetchParams }),
-			staleTime: 60 * 1000,
-		});
-	}, [searchSpaceId, queryClient]);
-
-	// Handle scroll to comment from URL query params (e.g., from inbox item click)
-	// Read from window.location.search inside the effect instead of subscribing via
-	// useSearchParams() — avoids re-rendering this heavy component tree on every
-	// unrelated query-string change. (Vercel Best Practice: rerender-defer-reads 5.2)
-	useEffect(() => {
-		const readAndApplyCommentId = () => {
-			const params = new URLSearchParams(window.location.search);
-			const raw = params.get("commentId");
-			if (raw && activeThreadId) {
-				const commentId = Number.parseInt(raw, 10);
-				if (!Number.isNaN(commentId)) {
-					setTargetCommentId(commentId);
-				}
-			}
-		};
-
-		readAndApplyCommentId();
-
-		// Also respond to SPA navigations (back/forward) that change the query string
-		window.addEventListener("popstate", readAndApplyCommentId);
-
-		// Cleanup on unmount or when navigating away
-		return () => {
-			window.removeEventListener("popstate", readAndApplyCommentId);
-			clearTargetCommentId();
-		};
-	}, [activeThreadId, setTargetCommentId, clearTargetCommentId]);
-
-	// Sync current thread state to atom
-	useEffect(() => {
-		if (!currentThread) {
-			if (activeThreadId) {
-				return;
-			}
-			setCurrentThreadMetadata({
-				id: null,
-				searchSpaceId: null,
-				visibility: null,
-				hasComments: false,
-			});
-			return;
-		}
-
-		const visibility =
-			currentThreadState.id === currentThread.id && currentThreadState.visibility !== null
-				? currentThreadState.visibility
-				: currentThread.visibility;
-
-		setCurrentThreadMetadata({
-			id: currentThread.id,
-			searchSpaceId: currentThread.search_space_id ?? searchSpaceId,
-			visibility,
-			hasComments: currentThread.has_comments ?? false,
-		});
-	}, [
-		activeThreadId,
-		currentThread,
-		currentThreadState.id,
-		currentThreadState.visibility,
-		searchSpaceId,
-		setCurrentThreadMetadata,
-	]);
-
-	// Cleanup on unmount - abort any in-flight requests
-	useEffect(() => {
-		return () => {
-			if (abortControllerRef.current) {
-				abortControllerRef.current.abort();
-				abortControllerRef.current = null;
-			}
-		};
-	}, []);
-
-	// Cancel ongoing request
-	const cancelRun = useCallback(async () => {
-		if (threadId) {
-			try {
-				const response = await authenticatedFetch(
-					buildBackendUrl(`/api/v1/threads/${threadId}/cancel-active-turn`),
-					{
-						method: "POST",
-					}
-				);
-				if (response.ok) {
-					const payload = (await response.json()) as {
-						error_code?: string;
-					};
-					if (payload.error_code === "TURN_CANCELLING") {
-						recentCancelRequestedAtRef.current = Date.now();
-					}
-				}
-			} catch (error) {
-				console.warn("[NewChatPage] Failed to signal cancel-active-turn:", error);
-			}
-		}
-		if (abortControllerRef.current) {
-			abortControllerRef.current.abort();
-			abortControllerRef.current = null;
-		}
-		setIsRunning(false);
-	}, [threadId]);
-
-	// Handle new message from user
-	const onNew = useCallback(
-		async (message: AppendMessage) => {
-			// Abort any previous streaming request to prevent race conditions
-			// when user sends a second query while the first is still streaming
-			if (abortControllerRef.current) {
-				abortControllerRef.current.abort();
-				abortControllerRef.current = null;
-			}
-
-			// Prefer the submit-time snapshot; fall back to the live atom
-			// for the send-button path.
-			const submittedSnapshot = jotaiStore.get(submittedMentionsAtom);
-			jotaiStore.set(submittedMentionsAtom, null);
-			const activeMentions = submittedSnapshot ?? mentionedDocuments;
-			const mentionPayload = deriveMentionedPayload(activeMentions);
-			if (activeMentions.length > 0) {
-				setMentionedDocuments([]);
-			}
-
-			const urlsSnapshot = [...pendingUserImageUrls];
-			const { userQuery, userImages } = extractUserTurnForNewChatApi(message, urlsSnapshot);
-
-			if (!userQuery.trim() && userImages.length === 0) return;
-
-			// Lazy thread creation: create thread on first message if it doesn't exist
-			let currentThreadId = threadId;
-			let isNewThread = false;
-			if (!currentThreadId) {
-				try {
-					const newThread = await createThread(searchSpaceId, "New Chat");
-					currentThreadId = newThread.id;
-					setThreadId(currentThreadId);
-					// Set currentThread so share button in header appears immediately
-					setCurrentThread(newThread);
-					queryClient.setQueryData(cacheKeys.threads.detail(newThread.id), newThread);
-					queryClient.setQueryData(cacheKeys.threads.messages(newThread.id), { messages: [] });
-
-					// Track chat creation
-					trackChatCreated(searchSpaceId, currentThreadId);
-
-					isNewThread = true;
-					// Update URL silently using browser API (not router.replace) to avoid
-					// interrupting the ongoing fetch/streaming with React navigation
-					window.history.replaceState(
-						null,
-						"",
-						`/dashboard/${searchSpaceId}/new-chat/${currentThreadId}`
-					);
-				} catch (error) {
-					console.error("[NewChatPage] Failed to create thread:", error);
-					await handleChatFailure({
-						error: tagPreAcceptSendFailure(error),
-						flow: "new",
-						threadId: currentThreadId,
-						assistantMsgId: "no-persist-assistant",
-					});
-					return;
-				}
-			}
-
-			if (urlsSnapshot.length > 0) {
-				setPendingUserImageUrls((prev) => prev.filter((u) => !urlsSnapshot.includes(u)));
-			}
-
-			// Add user message to state. Mutable because the SSE
-			// ``data-user-message-id`` handler (below) renames this
-			// optimistic id to the canonical ``msg-{db_id}`` once the
-			// backend's ``persist_user_turn`` resolves the row, and
-			// the in-stream flush / interrupt closures need to see
-			// the post-rename value via this live ``let`` binding.
-			let userMsgId = `msg-user-${Date.now()}`;
-
-			// Always include author metadata so the UI layer can decide visibility
-			const authorMetadata = currentUser
-				? {
-						custom: {
-							author: {
-								displayName: currentUser.display_name ?? null,
-								avatarUrl: currentUser.avatar_url ?? null,
-							},
-						},
-					}
-				: undefined;
-
-			const existingImageUrls = new Set(
-				message.content
-					.filter(
-						(p): p is { type: "image"; image: string } =>
-							typeof p === "object" &&
-							p !== null &&
-							"type" in p &&
-							p.type === "image" &&
-							"image" in p
-					)
-					.map((p) => p.image)
-			);
-			const extraImageParts = urlsSnapshot
-				.filter((u) => !existingImageUrls.has(u))
-				.map((image) => ({ type: "image" as const, image }));
-			const userDisplayContent = [...message.content, ...extraImageParts];
-
-			const userMessage: ThreadMessageLike = {
-				id: userMsgId,
-				role: "user",
-				content: userDisplayContent,
-				createdAt: new Date(),
-				metadata: authorMetadata,
-			};
-			setMessages((prev) => [...prev, userMessage]);
-
-			// Track message sent
-			trackChatMessageSent(searchSpaceId, currentThreadId, {
-				hasAttachments: userImages.length > 0,
-				hasMentionedDocuments:
-					mentionPayload.document_ids.length > 0 ||
-					mentionPayload.folder_ids.length > 0 ||
-					mentionPayload.connector_ids.length > 0,
-				messageLength: userQuery.length,
-			});
-
-			// Collect unique mention chips for display & persistence.
-			// The ``kind`` field is forwarded to the backend
-			// so the persisted ``mentioned-documents`` content part
-			// can render the correct chip type on reload.
-			const allMentionedDocs: MentionedDocumentInfo[] = [];
-			const seenDocKeys = new Set<string>();
-			for (const doc of activeMentions) {
-				const key = getMentionDocKey(doc);
-				if (seenDocKeys.has(key)) continue;
-				seenDocKeys.add(key);
-				allMentionedDocs.push(doc);
-			}
-
-			if (allMentionedDocs.length > 0) {
-				setMessageDocumentsMap((prev) => ({
-					...prev,
-					[userMsgId]: allMentionedDocs,
-				}));
-			}
-
-			// Start streaming response
-			setIsRunning(true);
-			const controller = new AbortController();
-			abortControllerRef.current = controller;
-
-			// Prepare assistant message. Mutable for the same reason
-			// as ``userMsgId`` above — the ``data-assistant-message-id``
-			// SSE handler reassigns this once
-			// ``persist_assistant_shell`` returns its canonical id.
-			let assistantMsgId = `msg-assistant-${Date.now()}`;
-			const currentThinkingSteps = new Map<string, ThinkingStepData>();
-			const contentPartsState: ContentPartsState = {
-				contentParts: [],
-				currentTextPartIndex: -1,
-				currentReasoningPartIndex: -1,
-				toolCallIndices: new Map(),
-			};
-			const { contentParts } = contentPartsState;
-			let wasInterrupted = false;
-			let newAccepted = false;
-			let streamBatcher: FrameBatchedUpdater | null = null;
-
-			try {
-				const selection = await getAgentFilesystemSelection(searchSpaceId, {
-					localFilesystemEnabled,
-				});
-				if (
-					selection.filesystem_mode === "desktop_local_folder" &&
-					(!selection.local_filesystem_mounts || selection.local_filesystem_mounts.length === 0)
-				) {
-					toast.error("Select a local folder before using Local Folder mode.");
-					return;
-				}
-
-				// Build message history for context
-				const messageHistory = messages
-					.filter((m) => m.role === "user" || m.role === "assistant")
-					.map((m) => {
-						let text = "";
-						for (const part of m.content) {
-							if (typeof part === "object" && part.type === "text" && "text" in part) {
-								text += part.text;
-							}
-						}
-						return { role: m.role, content: text };
-					})
-					.filter((m) => m.content.length > 0);
-
-				// Backend expects each mention kind in its own payload bucket.
-				const hasDocumentIds = mentionPayload.document_ids.length > 0;
-				const hasFolderIds = mentionPayload.folder_ids.length > 0;
-				const hasConnectorIds = mentionPayload.connector_ids.length > 0;
-				const hasThreadIds = mentionPayload.thread_ids.length > 0;
-
-				const response = await fetchWithTurnCancellingRetry(() =>
-					authenticatedFetch(buildBackendUrl("/api/v1/new_chat"), {
-						method: "POST",
-						headers: {
-							"Content-Type": "application/json",
-						},
-						body: JSON.stringify({
-							chat_id: currentThreadId,
-							user_query: userQuery.trim(),
-							search_space_id: searchSpaceId,
-							filesystem_mode: selection.filesystem_mode,
-							client_platform: selection.client_platform,
-							local_filesystem_mounts: selection.local_filesystem_mounts,
-							messages: messageHistory,
-							mentioned_document_ids: hasDocumentIds ? mentionPayload.document_ids : undefined,
-							mentioned_folder_ids: hasFolderIds ? mentionPayload.folder_ids : undefined,
-							mentioned_connector_ids: hasConnectorIds ? mentionPayload.connector_ids : undefined,
-							mentioned_connectors: hasConnectorIds ? mentionPayload.connectors : undefined,
-							mentioned_thread_ids: hasThreadIds ? mentionPayload.thread_ids : undefined,
-							// Full mention metadata so the backend can persist a
-							// ``mentioned-documents`` ContentPart on the user message.
-							mentioned_documents: allMentionedDocs.length > 0 ? allMentionedDocs : undefined,
-							disabled_tools: disabledTools.length > 0 ? disabledTools : undefined,
-							...(userImages.length > 0 ? { user_images: userImages } : {}),
-						}),
-						signal: controller.signal,
-					})
-				);
-
-				if (!response.ok) {
-					throw await toHttpResponseError(response);
-				}
-				newAccepted = true;
-				setMessages((prev) => [
-					...prev,
-					{
-						id: assistantMsgId,
-						role: "assistant",
-						content: [{ type: "text", text: "" }],
-						createdAt: new Date(),
-					},
-				]);
-
-				const flushMessages = () => {
-					setMessages((prev) =>
-						prev.map((m) =>
-							m.id === assistantMsgId
-								? { ...m, content: buildContentForUI(contentPartsState, toolsWithUI) }
-								: m
-						)
-					);
-				};
-				const { batcher, scheduleFlush, forceFlush } = createStreamFlushHelpers(flushMessages);
-				streamBatcher = batcher;
-
-				await consumeSseEvents(response, async (parsed) => {
-					if (
-						processSharedStreamEvent(parsed, {
-							contentPartsState,
-							toolsWithUI,
-							currentThinkingSteps,
-							scheduleFlush,
-							forceFlush,
-							onTokenUsage: (data) => {
-								tokenUsageStore.set(assistantMsgId, data);
-							},
-							onTurnStatus: (data) => {
-								if (data.status === "cancelling") {
-									recentCancelRequestedAtRef.current = Date.now();
-								}
-							},
-						})
-					) {
-						return;
-					}
-					switch (parsed.type) {
-						case "data-thread-title-update": {
-							const titleData = parsed.data as { threadId: number; title: string };
-							if (titleData?.title && titleData?.threadId === currentThreadId) {
-								setCurrentThread((prev) => (prev ? { ...prev, title: titleData.title } : prev));
-								updateChatTabTitle({ chatId: currentThreadId, title: titleData.title });
-								queryClient.setQueriesData<ThreadListResponse>(
-									{ queryKey: ["threads", String(searchSpaceId)] },
-									(old) => {
-										if (!old) return old;
-										const updateTitle = (list: ThreadListItem[]) =>
-											list.map((t) =>
-												t.id === titleData.threadId ? { ...t, title: titleData.title } : t
-											);
-										return {
-											...old,
-											threads: updateTitle(old.threads),
-											archived_threads: updateTitle(old.archived_threads),
-										};
-									}
-								);
-							}
-							break;
-						}
-
-						case "data-documents-updated": {
-							const docEvent = parsed.data as {
-								action: string;
-								document: AgentCreatedDocument;
-							};
-							if (docEvent?.document?.id) {
-								setAgentCreatedDocuments((prev) => {
-									if (prev.some((d) => d.id === docEvent.document.id)) return prev;
-									return [...prev, docEvent.document];
-								});
-							}
-							break;
-						}
-
-						case "data-interrupt-request": {
-							wasInterrupted = true;
-							const interruptData = parsed.data as Record<string, unknown>;
-							const actionRequests = (interruptData.action_requests ?? []) as Array<{
-								name: string;
-								args: Record<string, unknown>;
-							}>;
-							const paired = pairBundleToolCallIds(
-								contentPartsState.toolCallIndices,
-								contentPartsState.contentParts,
-								actionRequests
-							);
-							const bundleToolCallIds: string[] = [];
-							for (let i = 0; i < actionRequests.length; i++) {
-								const action = actionRequests[i];
-								let targetTcId = paired[i];
-								if (!targetTcId) {
-									targetTcId = freshSynthToolCallId(
-										contentPartsState.toolCallIndices,
-										action.name,
-										i
-									);
-									addToolCall(
-										contentPartsState,
-										toolsWithUI,
-										targetTcId,
-										action.name,
-										action.args,
-										true
-									);
-								}
-								updateToolCall(contentPartsState, targetTcId, {
-									result: { __interrupt__: true, ...interruptData },
-								});
-								bundleToolCallIds.push(targetTcId);
-							}
-							setMessages((prev) =>
-								prev.map((m) =>
-									m.id === assistantMsgId
-										? { ...m, content: buildContentForUI(contentPartsState, toolsWithUI) }
-										: m
-								)
-							);
-							if (currentThreadId) {
-								// ``tool_call_id`` is stamped on the backend by
-								// ``checkpointed_subagent_middleware``. Without it we
-								// can't address the paused subagent on resume — skip
-								// rather than fabricate a synthetic key.
-								const interruptId = String(interruptData.tool_call_id ?? "");
-								if (interruptId) {
-									const incoming: PendingInterruptState = {
-										interruptId,
-										threadId: currentThreadId,
-										assistantMsgId,
-										interruptData,
-										bundleToolCallIds,
-									};
-									setPendingInterrupts((prev) => {
-										const without = prev.filter((p) => p.interruptId !== interruptId);
-										return [...without, incoming];
-									});
-								}
-							}
-							break;
-						}
-
-						case "data-action-log": {
-							applyActionLogSse(queryClient, currentThreadId, searchSpaceId, parsed.data);
-							break;
-						}
-
-						case "data-action-log-updated": {
-							applyActionLogUpdatedSse(
-								queryClient,
-								currentThreadId,
-								parsed.data.id,
-								parsed.data.reversible
-							);
-							break;
-						}
-
-						case "data-turn-info": {
-							const turnId = readStreamedChatTurnId(parsed.data);
-							if (turnId) {
-								setMessages((prev) =>
-									applyTurnIdToAssistantMessageList(prev, assistantMsgId, turnId)
-								);
-							}
-							break;
-						}
-
-						case "data-user-message-id": {
-							// Server-authoritative user message id resolved by
-							// ``persist_user_turn`` (or recovered via ON CONFLICT).
-							// Rename the optimistic ``msg-user-XXX`` placeholder to
-							// the canonical ``msg-{db_id}`` so DB-id-gated UI
-							// (comments, edit-from-this-message) unlocks immediately,
-							// migrate the local mentioned-documents map, and reassign
-							// the closure variable so all downstream
-							// ``m.id === userMsgId`` checks see the new value.
-							const parsedMsg = readStreamedMessageId(parsed.data);
-							if (!parsedMsg) break;
-							const newUserMsgId = `msg-${parsedMsg.messageId}`;
-							const oldUserMsgId = userMsgId;
-							setMessages((prev) =>
-								prev.map((m) =>
-									m.id === oldUserMsgId
-										? mergeChatTurnIdIntoMessage({ ...m, id: newUserMsgId }, parsedMsg.turnId)
-										: m
-								)
-							);
-							if (allMentionedDocs.length > 0) {
-								setMessageDocumentsMap((prev) => {
-									if (!(oldUserMsgId in prev)) {
-										return { ...prev, [newUserMsgId]: allMentionedDocs };
-									}
-									const { [oldUserMsgId]: _removed, ...rest } = prev;
-									return { ...rest, [newUserMsgId]: allMentionedDocs };
-								});
-							}
-							userMsgId = newUserMsgId;
-							if (isNewThread) {
-								// First user-side row landed in ``new_chat_messages``;
-								// refresh the sidebar so the freshly-bumped
-								// ``thread.updated_at`` reorders this thread.
-								queryClient.invalidateQueries({
-									queryKey: ["threads", String(searchSpaceId)],
-								});
-							}
-							break;
-						}
-
-						case "data-assistant-message-id": {
-							// Server-authoritative assistant message id resolved
-							// by ``persist_assistant_shell``. Rename the optimistic
-							// id, migrate ``tokenUsageStore`` so any pending
-							// ``data-token-usage`` payload binds to the new id,
-							// remap any in-flight ``pendingInterrupts`` entries,
-							// and reassign the closure variable so the in-stream
-							// flush callback (line ~1074) keeps writing to the
-							// renamed message.
-							const parsedMsg = readStreamedMessageId(parsed.data);
-							if (!parsedMsg) break;
-							const newAssistantMsgId = `msg-${parsedMsg.messageId}`;
-							const oldAssistantMsgId = assistantMsgId;
-							tokenUsageStore.rename(oldAssistantMsgId, newAssistantMsgId);
-							setMessages((prev) =>
-								prev.map((m) =>
-									m.id === oldAssistantMsgId
-										? mergeChatTurnIdIntoMessage({ ...m, id: newAssistantMsgId }, parsedMsg.turnId)
-										: m
-								)
-							);
-							setPendingInterrupts((prev) =>
-								prev.map((p) =>
-									p.assistantMsgId === oldAssistantMsgId
-										? { ...p, assistantMsgId: newAssistantMsgId }
-										: p
-								)
-							);
-							assistantMsgId = newAssistantMsgId;
-							break;
-						}
-					}
-				});
-
-				batcher.flush();
-
-				// Server-authoritative persistence: ``stream_new_chat``
-				// already wrote the user row in ``persist_user_turn``
-				// (the FE renamed the optimistic id mid-stream via
-				// ``data-user-message-id``) and finalises the assistant
-				// row in ``finalize_assistant_turn`` from a shielded
-				// ``finally`` block. Nothing left for the FE to persist
-				// here — track the response and unblock the UI.
-				if (contentParts.length > 0 && !wasInterrupted) {
-					trackChatResponseReceived(searchSpaceId, currentThreadId);
-				}
-			} catch (error) {
-				streamBatcher?.dispose();
-				await handleStreamTerminalError({
-					error,
-					flow: "new",
-					threadId: currentThreadId,
-					assistantMsgId,
-					accepted: newAccepted,
-					// Server-side ``finalize_assistant_turn`` runs from a
-					// shielded ``anyio.CancelScope(shield=True)`` finally
-					// block, so partial content (incl. abort-mid-stream)
-					// is already persisted by the BE for the assistant
-					// row, and ``persist_user_turn`` ran before any LLM
-					// call. The FE's only remaining responsibility on
-					// abort / accepted-stream-error is to surface the
-					// error toast (handled by ``handleStreamTerminalError``
-					// itself).
-					onPreAcceptFailure: async () => {
-						// Pre-accept failure means the BE never accepted the
-						// request — no server-side persistence ran. Roll
-						// back the optimistic UI insertions we made before
-						// the fetch so the user message and any local
-						// mentioned-docs metadata don't linger.
-						setMessages((prev) => prev.filter((m) => m.id !== userMsgId));
-						setMessageDocumentsMap((prev) => {
-							if (!(userMsgId in prev)) return prev;
-							const { [userMsgId]: _removed, ...rest } = prev;
-							return rest;
-						});
-					},
-				});
-			} finally {
-				setIsRunning(false);
-				abortControllerRef.current = null;
-				if (currentThreadId) {
-					void queryClient.invalidateQueries({
-						queryKey: cacheKeys.threads.messages(currentThreadId),
-					});
-					void queryClient.invalidateQueries({
-						queryKey: cacheKeys.threads.detail(currentThreadId),
-					});
-				}
-			}
-		},
-		[
-			threadId,
-			searchSpaceId,
-			messages,
-			jotaiStore,
-			mentionedDocuments,
-			setMentionedDocuments,
-			setMessageDocumentsMap,
-			setAgentCreatedDocuments,
-			queryClient,
-			currentUser,
-			localFilesystemEnabled,
-			disabledTools,
-			updateChatTabTitle,
-			tokenUsageStore,
-			pendingUserImageUrls,
-			setPendingUserImageUrls,
-			fetchWithTurnCancellingRetry,
-			handleStreamTerminalError,
-			handleChatFailure,
-		]
-	);
-
-	const handleResume = useCallback(
-		async (
-			decisions: Array<{
-				type: string;
-				message?: string;
-				edited_action?: { name: string; args: Record<string, unknown> };
-			}>
-		) => {
-			if (pendingInterrupts.length === 0) return;
-			// All cards in this turn share the same threadId/assistantMsgId
-			// (they're siblings of one parent agent step), so reading from
-			// the first entry is safe.
-			const resumeThreadId = pendingInterrupts[0].threadId;
-			// Destructured separately as ``let`` so the SSE
-			// ``data-assistant-message-id`` handler (resume always
-			// allocates a fresh server-side row) can rename it to
-			// the canonical ``msg-{db_id}`` mid-stream.
-			let assistantMsgId = pendingInterrupts[0].assistantMsgId;
-			// Concatenate every card's tool-call ids in pendingInterrupts order;
-			// this matches the ``decisions`` ordering produced by
-			// ``handleApprovalSubmit`` and the backend slicer's traversal of
-			// ``state.interrupts``.
-			const allBundleToolCallIds = pendingInterrupts.flatMap((p) => p.bundleToolCallIds);
-			setPendingInterrupts([]);
-			stagedDecisionsByInterruptIdRef.current.clear();
-			setIsRunning(true);
-
-			const controller = new AbortController();
-			abortControllerRef.current = controller;
-
-			const currentThinkingSteps = new Map<string, ThinkingStepData>();
-
-			const contentPartsState: ContentPartsState = {
-				contentParts: [],
-				currentTextPartIndex: -1,
-				currentReasoningPartIndex: -1,
-				toolCallIndices: new Map(),
-			};
-			const { contentParts, toolCallIndices } = contentPartsState;
-			let resumeAccepted = false;
-			let streamBatcher: FrameBatchedUpdater | null = null;
-
-			const existingMsg = messages.find((m) => m.id === assistantMsgId);
-			if (existingMsg && Array.isArray(existingMsg.content)) {
-				// See ``ContentPartsState.suppressStepSeparators`` doc.
-				contentPartsState.suppressStepSeparators = true;
-				for (const part of existingMsg.content) {
-					if (typeof part === "object" && part !== null) {
-						const p = part as Record<string, unknown>;
-						if (p.type === "text") {
-							contentParts.push({ type: "text", text: String(p.text ?? "") });
-							contentPartsState.currentTextPartIndex = contentParts.length - 1;
-						} else if (p.type === "tool-call") {
-							toolCallIndices.set(String(p.toolCallId), contentParts.length);
-							contentParts.push({
-								type: "tool-call",
-								toolCallId: String(p.toolCallId),
-								toolName: String(p.toolName),
-								args: (p.args as Record<string, unknown>) ?? {},
-								result: p.result as unknown,
-								// argsText: assistant-ui prefers it over
-								// JSON.stringify(args), so restoring it keeps
-								// pretty-printed JSON across reloads.
-								...(typeof p.argsText === "string" ? { argsText: p.argsText } : {}),
-								...(typeof p.langchainToolCallId === "string"
-									? { langchainToolCallId: p.langchainToolCallId }
-									: {}),
-								// metadata: spanId / thinkingStepId drive the
-								// timeline's step↔tool join. Dropping these
-								// here orphans every rehydrated tool-call.
-								...(p.metadata && typeof p.metadata === "object"
-									? { metadata: p.metadata as Record<string, unknown> }
-									: {}),
-							});
-							contentPartsState.currentTextPartIndex = -1;
-						} else if (p.type === "data-thinking-steps") {
-							const stepsData = p.data as { steps: ThinkingStepData[] } | undefined;
-							contentParts.push({
-								type: "data-thinking-steps",
-								data: { steps: stepsData?.steps ?? [] },
-							});
-							for (const step of stepsData?.steps ?? []) {
-								currentThinkingSteps.set(step.id, step);
-							}
-						}
-					}
-				}
-			}
-
-			// Apply each decision to its own card by toolCallId so mixed
-			// bundles (approve/edit/reject) and multi-edit bundles do not
-			// collapse onto ``decisions[0]``. Cards outside the bundle are
-			// untouched. Mirrors the host ``hitl-decision`` handler.
-			const decisionByTcId = new Map<string, (typeof decisions)[number]>();
-			const tcIds = allBundleToolCallIds;
-			if (decisions.length === tcIds.length) {
-				for (let i = 0; i < tcIds.length; i++) decisionByTcId.set(tcIds[i], decisions[i]);
-			}
-			if (decisionByTcId.size > 0) {
-				for (const part of contentParts) {
-					if (part.type !== "tool-call") continue;
-					const tcId = part.toolCallId as string | undefined;
-					const d = tcId ? decisionByTcId.get(tcId) : undefined;
-					if (!d) continue;
-					if (typeof part.result !== "object" || part.result === null) continue;
-					if (!("__interrupt__" in (part.result as Record<string, unknown>))) continue;
-					const decided = d.type;
-					if (decided === "edit" && d.edited_action) {
-						const mergedArgs = { ...part.args, ...d.edited_action.args };
-						part.args = mergedArgs;
-						// Sync argsText so the rendered card shows the
-						// edited inputs (assistant-ui prefers it over
-						// JSON.stringify(args)).
-						part.argsText = JSON.stringify(mergedArgs, null, 2);
-					}
-					part.result = {
-						...(part.result as Record<string, unknown>),
-						__decided__: decided,
-					};
-				}
-			}
-
-			try {
-				const selection = await getAgentFilesystemSelection(searchSpaceId, {
-					localFilesystemEnabled,
-				});
-				const response = await fetchWithTurnCancellingRetry(() =>
-					authenticatedFetch(buildBackendUrl(`/api/v1/threads/${resumeThreadId}/resume`), {
-						method: "POST",
-						headers: {
-							"Content-Type": "application/json",
-						},
-						body: JSON.stringify({
-							search_space_id: searchSpaceId,
-							decisions,
-							disabled_tools: disabledTools.length > 0 ? disabledTools : undefined,
-							filesystem_mode: selection.filesystem_mode,
-							client_platform: selection.client_platform,
-							local_filesystem_mounts: selection.local_filesystem_mounts,
-						}),
-						signal: controller.signal,
-					})
-				);
-
-				if (!response.ok) {
-					throw await toHttpResponseError(response);
-				}
-				resumeAccepted = true;
-
-				const flushMessages = () => {
-					setMessages((prev) =>
-						prev.map((m) =>
-							m.id === assistantMsgId
-								? { ...m, content: buildContentForUI(contentPartsState, toolsWithUI) }
-								: m
-						)
-					);
-				};
-				const { batcher, scheduleFlush, forceFlush } = createStreamFlushHelpers(flushMessages);
-				streamBatcher = batcher;
-
-				await consumeSseEvents(response, async (parsed) => {
-					if (
-						processSharedStreamEvent(parsed, {
-							contentPartsState,
-							toolsWithUI,
-							currentThinkingSteps,
-							scheduleFlush,
-							forceFlush,
-							onTokenUsage: (data) => {
-								tokenUsageStore.set(assistantMsgId, data);
-							},
-							onTurnStatus: (data) => {
-								if (data.status === "cancelling") {
-									recentCancelRequestedAtRef.current = Date.now();
-								}
-							},
-						})
-					) {
-						return;
-					}
-					switch (parsed.type) {
-						case "data-interrupt-request": {
-							const interruptData = parsed.data as Record<string, unknown>;
-							const actionRequests = (interruptData.action_requests ?? []) as Array<{
-								name: string;
-								args: Record<string, unknown>;
-							}>;
-							const paired = pairBundleToolCallIds(
-								contentPartsState.toolCallIndices,
-								contentPartsState.contentParts,
-								actionRequests
-							);
-							const bundleToolCallIds: string[] = [];
-							for (let i = 0; i < actionRequests.length; i++) {
-								const action = actionRequests[i];
-								let targetTcId = paired[i];
-								if (!targetTcId) {
-									targetTcId = freshSynthToolCallId(
-										contentPartsState.toolCallIndices,
-										action.name,
-										i
-									);
-									addToolCall(
-										contentPartsState,
-										toolsWithUI,
-										targetTcId,
-										action.name,
-										action.args,
-										true
-									);
-								}
-								updateToolCall(contentPartsState, targetTcId, {
-									result: { __interrupt__: true, ...interruptData },
-								});
-								bundleToolCallIds.push(targetTcId);
-							}
-							setMessages((prev) =>
-								prev.map((m) =>
-									m.id === assistantMsgId
-										? { ...m, content: buildContentForUI(contentPartsState, toolsWithUI) }
-										: m
-								)
-							);
-							{
-								const interruptId = String(interruptData.tool_call_id ?? "");
-								if (interruptId) {
-									const incoming: PendingInterruptState = {
-										interruptId,
-										threadId: resumeThreadId,
-										assistantMsgId,
-										interruptData,
-										bundleToolCallIds,
-									};
-									setPendingInterrupts((prev) => {
-										const without = prev.filter((p) => p.interruptId !== interruptId);
-										return [...without, incoming];
-									});
-								}
-							}
-							break;
-						}
-
-						case "data-action-log": {
-							applyActionLogSse(queryClient, resumeThreadId, searchSpaceId, parsed.data);
-							break;
-						}
-
-						case "data-action-log-updated": {
-							applyActionLogUpdatedSse(
-								queryClient,
-								resumeThreadId,
-								parsed.data.id,
-								parsed.data.reversible
-							);
-							break;
-						}
-
-						case "data-turn-info": {
-							const turnId = readStreamedChatTurnId(parsed.data);
-							if (turnId) {
-								setMessages((prev) =>
-									applyTurnIdToAssistantMessageList(prev, assistantMsgId, turnId)
-								);
-							}
-							break;
-						}
-
-						case "data-assistant-message-id": {
-							// Resume always allocates a fresh ``new_chat_messages``
-							// row anchored to a new ``turn_id`` (the original
-							// interrupted turn's row stays as-is), so this is a
-							// real id swap. Rename the optimistic placeholder to
-							// ``msg-{db_id}`` and reassign closure state. Resume
-							// does NOT emit ``data-user-message-id`` — the user
-							// row belongs to the original interrupted turn.
-							const parsedMsg = readStreamedMessageId(parsed.data);
-							if (!parsedMsg) break;
-							const newAssistantMsgId = `msg-${parsedMsg.messageId}`;
-							const oldAssistantMsgId = assistantMsgId;
-							tokenUsageStore.rename(oldAssistantMsgId, newAssistantMsgId);
-							setMessages((prev) =>
-								prev.map((m) =>
-									m.id === oldAssistantMsgId
-										? mergeChatTurnIdIntoMessage({ ...m, id: newAssistantMsgId }, parsedMsg.turnId)
-										: m
-								)
-							);
-							assistantMsgId = newAssistantMsgId;
-							break;
-						}
-					}
-				});
-
-				batcher.flush();
-
-				// Server-authoritative persistence: ``stream_resume_chat``
-				// finalises the assistant row in
-				// ``finalize_assistant_turn`` from a shielded
-				// ``finally`` block (covers both happy-path and
-				// abort-mid-stream). FE has no remaining persistence
-				// work here.
-			} catch (error) {
-				streamBatcher?.dispose();
-				await handleStreamTerminalError({
-					error,
-					flow: "resume",
-					threadId: resumeThreadId,
-					assistantMsgId,
-					accepted: resumeAccepted,
-				});
-			} finally {
-				setIsRunning(false);
-				abortControllerRef.current = null;
-				void queryClient.invalidateQueries({
-					queryKey: cacheKeys.threads.messages(resumeThreadId),
-				});
-				void queryClient.invalidateQueries({
-					queryKey: cacheKeys.threads.detail(resumeThreadId),
-				});
-			}
-		},
-		[
-			pendingInterrupts,
-			messages,
-			searchSpaceId,
-			localFilesystemEnabled,
-			disabledTools,
-			queryClient,
-			tokenUsageStore,
-			fetchWithTurnCancellingRetry,
-			handleStreamTerminalError,
-		]
-	);
-
-	useEffect(() => {
-		const handler = (e: Event) => {
-			const detail = (e as CustomEvent).detail as {
-				decisions: Array<{
-					type: string;
-					message?: string;
-					edited_action?: { name: string; args: Record<string, unknown> };
-				}>;
-			};
-			if (!detail?.decisions || pendingInterrupts.length === 0) return;
-			const incoming = detail.decisions;
-			if (incoming.length === 0) return;
-			// Concatenated tool-call ids across every pending card, in the
-			// order ``handleApprovalSubmit`` produced ``incoming``.
-			const tcIds = pendingInterrupts.flatMap((p) => p.bundleToolCallIds);
-			const N = tcIds.length;
-
-			// Refuse rather than silently broadcast or drop. The orchestrator
-			// only fires ``hitl-decision`` once every pending card has
-			// submitted, so a count mismatch indicates a contract drift
-			// (and would later make the backend slicer raise).
-			if (incoming.length !== N) {
-				toast.error(
-					`Cannot resume: ${incoming.length} decision(s) submitted for ${N} pending actions.`
-				);
-				return;
-			}
-
-			const byTcId = new Map<string, (typeof incoming)[number]>();
-			const submittedDecisions: typeof incoming = [];
-			for (let i = 0; i < tcIds.length; i++) {
-				const tcId = tcIds[i];
-				const decision = incoming[i];
-				if (tcId === undefined || decision === undefined) {
-					toast.error(
-						`Cannot resume: ${incoming.length} decision(s) submitted for ${N} pending actions.`
-					);
-					return;
-				}
-				byTcId.set(tcId, decision);
-				submittedDecisions.push(decision);
-			}
-
-			// All pending cards belong to the same assistant message, so a
-			// single content-update pass suffices.
-			const targetAssistantMsgId = pendingInterrupts[0].assistantMsgId;
-			setMessages((prev) =>
-				prev.map((m) => {
-					if (m.id !== targetAssistantMsgId) return m;
-					const parts = m.content as unknown as Array<Record<string, unknown>>;
-					const newContent = parts.map((part) => {
-						const tcId = part.toolCallId as string | undefined;
-						const d = tcId ? byTcId.get(tcId) : undefined;
-						if (!d || part.type !== "tool-call") return part;
-						if (typeof part.result !== "object" || part.result === null) return part;
-						if (!("__interrupt__" in (part.result as Record<string, unknown>))) return part;
-						const decided = d.type;
-						if (decided === "edit" && d.edited_action) {
-							return {
-								...part,
-								args: d.edited_action.args,
-								// Sync argsText so the card renders the edited
-								// inputs (assistant-ui prefers it over JSON.stringify).
-								argsText: JSON.stringify(d.edited_action.args, null, 2),
-								result: {
-									...(part.result as Record<string, unknown>),
-									__decided__: decided,
-								},
-							};
-						}
-						return {
-							...part,
-							result: {
-								...(part.result as Record<string, unknown>),
-								__decided__: decided,
-							},
-						};
-					});
-					return { ...m, content: newContent as unknown as ThreadMessageLike["content"] };
-				})
-			);
-			handleResume(submittedDecisions);
-		};
-		window.addEventListener("hitl-decision", handler);
-		return () => window.removeEventListener("hitl-decision", handler);
-	}, [handleResume, pendingInterrupts]);
-
-	// Convert message (pass through since already in correct format)
-	const convertMessage = useCallback(
-		(message: ThreadMessageLike): ThreadMessageLike => message,
-		[]
-	);
-
-	/**
-	 * Handle regeneration (edit or reload) by calling the regenerate endpoint
-	 * and streaming the response. This rewinds the LangGraph checkpointer state.
-	 *
-	 * @param newUserQuery - `null` = reload with same turn from the server. A string = edit
-	 *   (including an empty string when the edited turn is images-only); pass `editExtras` for images/content.
-	 */
-	const handleRegenerate = useCallback(
-		async (
-			newUserQuery: string | null,
-			editExtras?: {
-				userMessageContent: ThreadMessageLike["content"];
-				userImages: NewChatUserImagePayload[];
-				sourceUserMessageId?: string;
-			},
-			editFromPosition?: {
-				/** Message id (numeric, parsed from ``msg-<n>``) to rewind to. */
-				fromMessageId?: number | null;
-				/** When true, revert reversible downstream actions before stream. */
-				revertActions?: boolean;
-			}
-		) => {
-			if (!threadId) {
-				toast.error("Cannot regenerate: no active chat thread");
-				return;
-			}
-
-			const isEdit = newUserQuery !== null;
-
-			// Abort any previous streaming request
-			if (abortControllerRef.current) {
-				abortControllerRef.current.abort();
-				abortControllerRef.current = null;
-			}
-
-			// Extract the original user query BEFORE removing messages (for reload mode)
-			let userQueryToDisplay: string | undefined;
-			let originalUserMessageContent: ThreadMessageLike["content"] | null = null;
-			let originalUserMessageMetadata: ThreadMessageLike["metadata"] | undefined;
-			let sourceUserMessageId: string | undefined = editExtras?.sourceUserMessageId;
-
-			if (!isEdit) {
-				// Reload mode - find and preserve the last user message content
-				const lastUserMessage = [...messages].reverse().find((m) => m.role === "user");
-				if (lastUserMessage) {
-					sourceUserMessageId = lastUserMessage.id;
-					originalUserMessageContent = lastUserMessage.content;
-					originalUserMessageMetadata = lastUserMessage.metadata;
-					// Extract text for the API request
-					for (const part of lastUserMessage.content) {
-						if (typeof part === "object" && part.type === "text" && "text" in part) {
-							userQueryToDisplay = part.text;
-							break;
-						}
-					}
-				}
-			} else {
-				userQueryToDisplay = newUserQuery;
-			}
-
-			// Start streaming
-			setIsRunning(true);
-			const controller = new AbortController();
-			abortControllerRef.current = controller;
-
-			// Add placeholder user message if we have a new query (edit mode).
-			// Mutable for the same reason as in ``onNew`` — both ids are
-			// renamed mid-stream by the new ``data-user-message-id`` /
-			// ``data-assistant-message-id`` SSE handlers below.
-			let userMsgId = `msg-user-${Date.now()}`;
-			let assistantMsgId = `msg-assistant-${Date.now()}`;
-			const currentThinkingSteps = new Map<string, ThinkingStepData>();
-
-			const contentPartsState: ContentPartsState = {
-				contentParts: [],
-				currentTextPartIndex: -1,
-				currentReasoningPartIndex: -1,
-				toolCallIndices: new Map(),
-			};
-			const { contentParts } = contentPartsState;
-			let regenerateAccepted = false;
-			let streamBatcher: FrameBatchedUpdater | null = null;
-
-			// Add placeholder messages to UI
-			// Always add back the user message (with new query for edit, or original content for reload)
-			const userMessage: ThreadMessageLike = {
-				id: userMsgId,
-				role: "user",
-				content: isEdit
-					? (editExtras?.userMessageContent ?? [{ type: "text", text: newUserQuery ?? "" }])
-					: originalUserMessageContent || [{ type: "text", text: userQueryToDisplay || "" }],
-				createdAt: new Date(),
-				metadata: isEdit ? undefined : originalUserMessageMetadata,
-			};
-			const sourceMentionedDocs =
-				sourceUserMessageId && messageDocumentsMap[sourceUserMessageId]
-					? messageDocumentsMap[sourceUserMessageId]
-					: [];
-			try {
-				const selection = await getAgentFilesystemSelection(searchSpaceId, {
-					localFilesystemEnabled,
-				});
-				// Partition the source mentions back into doc/folder id buckets
-				// so the regenerate route can pass them to ``stream_new_chat``
-				// and the priority middleware sees the same ``[USER-MENTIONED]``
-				// priority entries the original turn did. Without this partition
-				// the regenerate flow silently dropped the agent's mention
-				// awareness — same architectural bug we fixed on the new-chat path.
-				const regenerateDocIds = sourceMentionedDocs
-					.filter((d) => d.kind === "doc")
-					.map((d) => d.id);
-				const regenerateFolderIds = sourceMentionedDocs
-					.filter((d) => d.kind === "folder")
-					.map((d) => d.id);
-				const regenerateConnectors = sourceMentionedDocs.filter((d) => d.kind === "connector");
-				const regenerateThreadIds = sourceMentionedDocs
-					.filter((d) => d.kind === "thread")
-					.map((d) => d.id);
-
-				const requestBody: Record<string, unknown> = {
-					search_space_id: searchSpaceId,
-					user_query: newUserQuery,
-					disabled_tools: disabledTools.length > 0 ? disabledTools : undefined,
-					filesystem_mode: selection.filesystem_mode,
-					client_platform: selection.client_platform,
-					local_filesystem_mounts: selection.local_filesystem_mounts,
-					mentioned_document_ids: regenerateDocIds.length > 0 ? regenerateDocIds : undefined,
-					mentioned_folder_ids: regenerateFolderIds.length > 0 ? regenerateFolderIds : undefined,
-					mentioned_connector_ids:
-						regenerateConnectors.length > 0 ? regenerateConnectors.map((d) => d.id) : undefined,
-					mentioned_connectors: regenerateConnectors.length > 0 ? regenerateConnectors : undefined,
-					mentioned_thread_ids: regenerateThreadIds.length > 0 ? regenerateThreadIds : undefined,
-					// Full mention metadata for the regenerate-specific
-					// source list. Only meaningful for edit (the BE only
-					// re-persists a user row when ``user_query`` is set);
-					// reload reuses the original turn's mentioned_documents.
-					mentioned_documents: sourceMentionedDocs.length > 0 ? sourceMentionedDocs : undefined,
-				};
-				if (isEdit) {
-					requestBody.user_images = editExtras?.userImages ?? [];
-				}
-				// Explicit edit-from-arbitrary-position. Only send
-				// ``from_message_id`` / ``revert_actions`` when the
-				// caller asked for them; otherwise the backend keeps the
-				// legacy "last 2 messages" behaviour for back-compat.
-				if (editFromPosition?.fromMessageId != null) {
-					requestBody.from_message_id = editFromPosition.fromMessageId;
-					if (editFromPosition.revertActions) {
-						requestBody.revert_actions = true;
-					}
-				}
-				const response = await fetchWithTurnCancellingRetry(() =>
-					authenticatedFetch(getRegenerateUrl(threadId), {
-						method: "POST",
-						headers: {
-							"Content-Type": "application/json",
-						},
-						body: JSON.stringify(requestBody),
-						signal: controller.signal,
-					})
-				);
-
-				if (!response.ok) {
-					throw await toHttpResponseError(response);
-				}
-				regenerateAccepted = true;
-
-				// Only switch UI to regenerated placeholder messages after the backend accepts
-				// regenerate. This avoids local message loss when regenerate fails early (e.g. 400).
-				//
-				// When an explicit ``editFromPosition.fromMessageId`` is passed, slice from
-				// that message forward so edit-from-arbitrary-position drops every downstream
-				// message; otherwise fall back to the legacy "drop the last 2" behaviour.
-				setMessages((prev) => {
-					let base = prev;
-					if (editFromPosition?.fromMessageId != null) {
-						const targetId = `msg-${editFromPosition.fromMessageId}`;
-						const sliceIndex = prev.findIndex((m) => m.id === targetId);
-						if (sliceIndex >= 0) {
-							base = prev.slice(0, sliceIndex);
-						}
-					} else if (prev.length >= 2) {
-						base = prev.slice(0, -2);
-					}
-					return [
-						...base,
-						userMessage,
-						{
-							id: assistantMsgId,
-							role: "assistant",
-							content: [{ type: "text", text: "" }],
-							createdAt: new Date(),
-						},
-					];
-				});
-				if (sourceMentionedDocs.length > 0) {
-					setMessageDocumentsMap((prev) => ({
-						...prev,
-						[userMsgId]: sourceMentionedDocs,
-					}));
-				}
-
-				const flushMessages = () => {
-					setMessages((prev) =>
-						prev.map((m) =>
-							m.id === assistantMsgId
-								? { ...m, content: buildContentForUI(contentPartsState, toolsWithUI) }
-								: m
-						)
-					);
-				};
-				const { batcher, scheduleFlush, forceFlush } = createStreamFlushHelpers(flushMessages);
-				streamBatcher = batcher;
-
-				await consumeSseEvents(response, async (parsed) => {
-					if (
-						processSharedStreamEvent(parsed, {
-							contentPartsState,
-							toolsWithUI,
-							currentThinkingSteps,
-							scheduleFlush,
-							forceFlush,
-							onTokenUsage: (data) => {
-								tokenUsageStore.set(assistantMsgId, data);
-							},
-							onTurnStatus: (data) => {
-								if (data.status === "cancelling") {
-									recentCancelRequestedAtRef.current = Date.now();
-								}
-							},
-						})
-					) {
-						return;
-					}
-					switch (parsed.type) {
-						case "data-action-log": {
-							if (threadId !== null) {
-								applyActionLogSse(queryClient, threadId, searchSpaceId, parsed.data);
-							}
-							break;
-						}
-
-						case "data-action-log-updated": {
-							if (threadId !== null) {
-								applyActionLogUpdatedSse(
-									queryClient,
-									threadId,
-									parsed.data.id,
-									parsed.data.reversible
-								);
-							}
-							break;
-						}
-
-						case "data-turn-info": {
-							const turnId = readStreamedChatTurnId(parsed.data);
-							if (turnId) {
-								setMessages((prev) =>
-									applyTurnIdToAssistantMessageList(prev, assistantMsgId, turnId)
-								);
-							}
-							break;
-						}
-
-						case "data-user-message-id": {
-							// Same role as in ``onNew`` but the regenerate-specific
-							// mention metadata (``sourceMentionedDocs``) is the
-							// list to migrate onto the canonical id key.
-							const parsedMsg = readStreamedMessageId(parsed.data);
-							if (!parsedMsg) break;
-							const newUserMsgId = `msg-${parsedMsg.messageId}`;
-							const oldUserMsgId = userMsgId;
-							setMessages((prev) =>
-								prev.map((m) =>
-									m.id === oldUserMsgId
-										? mergeChatTurnIdIntoMessage({ ...m, id: newUserMsgId }, parsedMsg.turnId)
-										: m
-								)
-							);
-							if (sourceMentionedDocs.length > 0) {
-								setMessageDocumentsMap((prev) => {
-									if (!(oldUserMsgId in prev)) {
-										return { ...prev, [newUserMsgId]: sourceMentionedDocs };
-									}
-									const { [oldUserMsgId]: _removed, ...rest } = prev;
-									return { ...rest, [newUserMsgId]: sourceMentionedDocs };
-								});
-							}
-							userMsgId = newUserMsgId;
-							break;
-						}
-
-						case "data-assistant-message-id": {
-							const parsedMsg = readStreamedMessageId(parsed.data);
-							if (!parsedMsg) break;
-							const newAssistantMsgId = `msg-${parsedMsg.messageId}`;
-							const oldAssistantMsgId = assistantMsgId;
-							tokenUsageStore.rename(oldAssistantMsgId, newAssistantMsgId);
-							setMessages((prev) =>
-								prev.map((m) =>
-									m.id === oldAssistantMsgId
-										? mergeChatTurnIdIntoMessage({ ...m, id: newAssistantMsgId }, parsedMsg.turnId)
-										: m
-								)
-							);
-							assistantMsgId = newAssistantMsgId;
-							break;
-						}
-
-						case "data-revert-results": {
-							const summary = parsed.data;
-							// failureCount must include every "not undone" bucket
-							// (not_reversible, permission_denied, failed) so the
-							// toast's "X could not be rolled back" math matches
-							// the response invariant ``total === sum(counters)``.
-							// ``skipped`` rows are batch revert artefacts (revert
-							// rows themselves) and are not user-facing failures.
-							const failureCount =
-								summary.failed + summary.not_reversible + (summary.permission_denied ?? 0);
-							if (failureCount > 0) {
-								toast.warning(
-									`Pre-revert: ${summary.reverted}/${summary.total} undone, ${failureCount} could not be rolled back.`
-								);
-							} else if (summary.reverted > 0) {
-								toast.success(
-									summary.reverted === 1
-										? "Reverted 1 downstream action before regenerating."
-										: `Reverted ${summary.reverted} downstream actions before regenerating.`
-								);
-							}
-							if (threadId !== null) {
-								for (const r of summary.results) {
-									if (r.status === "reverted" || r.status === "already_reverted") {
-										markActionRevertedInCache(
-											queryClient,
-											threadId,
-											r.action_id,
-											r.new_action_id ?? null
-										);
-									}
-								}
-							}
-							break;
-						}
-					}
-				});
-
-				batcher.flush();
-
-				// Server-authoritative persistence: ``stream_new_chat``
-				// (regenerate flow) wrote the user row in
-				// ``persist_user_turn`` and finalises the assistant row
-				// in ``finalize_assistant_turn`` from a shielded
-				// ``finally`` block (covers both happy-path and
-				// abort-mid-stream). FE only needs to track the
-				// successful response here.
-				if (contentParts.length > 0) {
-					trackChatResponseReceived(searchSpaceId, threadId);
-				}
-			} catch (error) {
-				streamBatcher?.dispose();
-				await handleStreamTerminalError({
-					error,
-					flow: "regenerate",
-					threadId,
-					assistantMsgId,
-					accepted: regenerateAccepted,
-				});
-			} finally {
-				setIsRunning(false);
-				abortControllerRef.current = null;
-				void queryClient.invalidateQueries({
-					queryKey: cacheKeys.threads.messages(threadId),
-				});
-				void queryClient.invalidateQueries({
-					queryKey: cacheKeys.threads.detail(threadId),
-				});
-			}
-		},
-		[
-			threadId,
-			searchSpaceId,
-			messages,
-			disabledTools,
-			localFilesystemEnabled,
-			messageDocumentsMap,
-			setMessageDocumentsMap,
-			queryClient,
-			tokenUsageStore,
-			fetchWithTurnCancellingRetry,
-			handleStreamTerminalError,
-		]
-	);
-
-	// Handle editing a message - truncates history and regenerates with new query.
-	//
-	// When ``message.sourceId`` is set (the assistant-ui way to say
-	// "this edit replaces an older message"), we pin
-	// ``from_message_id`` so the backend rewinds to the right LangGraph
-	// checkpoint instead of relying on the legacy "last 2 messages"
-	// rewind. We also count downstream reversible actions and prompt the
-	// user to revert / continue / cancel before regenerating.
-	const onEdit = useCallback(
-		async (message: AppendMessage) => {
-			const { userQuery, userImages } = extractUserTurnForNewChatApi(message, []);
-			const queryForApi = userQuery.trim();
-			if (!queryForApi && userImages.length === 0) {
-				toast.error("Cannot edit with empty message");
-				return;
-			}
-
-			const userMessageContent = message.content as unknown as ThreadMessageLike["content"];
-
-			// ``sourceId`` per @assistant-ui/core's ``AppendMessage`` is
-			// "the ID of the message that was edited". Parse the numeric
-			// suffix so we can map it back to a DB row.
-			const sourceId = (message as { sourceId?: string }).sourceId;
-			const fromMessageId =
-				sourceId && /^msg-\d+$/.test(sourceId)
-					? Number.parseInt(sourceId.replace(/^msg-/, ""), 10)
-					: null;
-
-			if (fromMessageId == null) {
-				// No source id (or non-DB id) — fall back to today's
-				// last-2 behaviour. The user gets the legacy edit flow.
-				await handleRegenerate(queryForApi, {
-					userMessageContent,
-					userImages,
-					sourceUserMessageId: sourceId,
-				});
-				return;
-			}
-
-			// Pre-flight: count reversible downstream actions so we can
-			// auto-skip the dialog for harmless edits.
-			//
-			// "Downstream" means messages AFTER the edited one. The
-			// previous slice ``messages.slice(editedIndex)`` included
-			// the edited message itself in both the total
-			// count and the reversibility scan (any actions on the
-			// edited turn would be double-counted). Slice from
-			// ``editedIndex + 1`` so the dialog text matches reality:
-			// "N downstream messages will be dropped".
-			const editedIndex = messages.findIndex((m) => m.id === `msg-${fromMessageId}`);
-			let downstreamReversibleCount = 0;
-			let downstreamTotalCount = 0;
-			if (editedIndex >= 0) {
-				const downstream = messages.slice(editedIndex + 1);
-				downstreamTotalCount = downstream.length;
-				const seenTurns = new Set<string>();
-				const downstreamTurnIds = new Set<string>();
-				for (const m of downstream) {
-					const meta = (m.metadata ?? {}) as { custom?: { chatTurnId?: string } };
-					const tid = meta.custom?.chatTurnId;
-					if (!tid || seenTurns.has(tid)) continue;
-					seenTurns.add(tid);
-					downstreamTurnIds.add(tid);
-				}
-				// Source of truth: the unified react-query cache. Every
-				// action whose ``chat_turn_id`` belongs to the slice we're
-				// about to drop counts toward the prompt.
-				for (const a of agentActionItems) {
-					if (!a.chat_turn_id || !downstreamTurnIds.has(a.chat_turn_id)) continue;
-					if (
-						a.reversible &&
-						(a.reverted_by_action_id === null || a.reverted_by_action_id === undefined) &&
-						!a.is_revert_action &&
-						(a.error === null || a.error === undefined)
-					) {
-						downstreamReversibleCount += 1;
-					}
-				}
-			}
-
-			if (downstreamReversibleCount === 0) {
-				// Nothing to revert — submit silently.
-				await handleRegenerate(
-					queryForApi,
-					{ userMessageContent, userImages, sourceUserMessageId: sourceId },
-					{ fromMessageId, revertActions: false }
-				);
-				return;
-			}
-
-			setEditDialogState({
-				fromMessageId,
-				userQuery: queryForApi,
-				userMessageContent,
-				userImages,
-				downstreamReversibleCount,
-				downstreamTotalCount,
-			});
-		},
-		[handleRegenerate, messages, agentActionItems]
-	);
-
-	const handleApprovalSubmit = useCallback(
-		(interruptId: string, decisions: HitlDecision[]) => {
-			// Stage this card's decisions; only fire the resume once every
-			// pending card in the current turn has submitted, so the
-			// backend slicer sees a single concatenated decisions list
-			// whose total matches the parent state's pending action count.
-			stagedDecisionsByInterruptIdRef.current.set(interruptId, decisions);
-			if (stagedDecisionsByInterruptIdRef.current.size < pendingInterrupts.length) {
-				return;
-			}
-			const ordered: HitlDecision[] = [];
-			for (const pi of pendingInterrupts) {
-				const staged = stagedDecisionsByInterruptIdRef.current.get(pi.interruptId);
-				if (!staged) {
-					// Defensive: a missing entry means the staging map and
-					// the pending list disagreed for one cycle. Bail rather
-					// than dispatch a count-mismatched batch.
-					return;
-				}
-				ordered.push(...staged);
-			}
-			stagedDecisionsByInterruptIdRef.current.clear();
-			window.dispatchEvent(new CustomEvent("hitl-decision", { detail: { decisions: ordered } }));
-		},
-		[pendingInterrupts]
-	);
-
-	const handleEditDialogChoice = useCallback(
-		async (choice: EditMessageDialogChoice) => {
-			const pending = editDialogState;
-			if (!pending) return;
-			setEditDialogState(null);
-			if (choice === "cancel") return;
-			await handleRegenerate(
-				pending.userQuery,
-				{
-					userMessageContent: pending.userMessageContent,
-					userImages: pending.userImages,
-					sourceUserMessageId: `msg-${pending.fromMessageId}`,
-				},
-				{
-					fromMessageId: pending.fromMessageId,
-					revertActions: choice === "revert",
-				}
-			);
-		},
-		[editDialogState, handleRegenerate]
-	);
-
-	// Handle reloading/refreshing the last AI response
-	const onReload = useCallback(async () => {
-		// parentId is the ID of the message to reload from (the user message)
-		// We call regenerate without a query to use the same query
-		await handleRegenerate(null);
-	}, [handleRegenerate]);
-
-	// Surface the thread's deliverables to the layout-level artifacts sidebar.
-	useSyncChatArtifacts(messages);
-
-	// Create external store runtime
-	const runtime = useExternalStoreRuntime({
-		messages,
-		isRunning,
-		onNew,
-		onEdit,
-		onReload,
-		convertMessage,
-		onCancel: cancelRun,
-	});
-
-	const threadLoadError = activeThreadId
-		? (threadDetailQuery.error ?? threadMessagesQuery.error)
-		: null;
-	const shouldShowThreadLoadError =
-		!!threadLoadError && !!activeThreadId && !currentThread && messages.length === 0;
-	const isThreadMessagesLoading =
-		!!activeThreadId &&
-		threadMessagesQuery.isPending &&
-		messages.length === 0 &&
-		!threadMessagesQuery.error;
-
-	if (shouldShowThreadLoadError) {
-		return (
-			<div className="flex h-full flex-col items-center justify-center gap-4">
-				<div className="text-destructive">Failed to load chat</div>
-				<Button
-					type="button"
-					onClick={() => {
-						void Promise.all([threadDetailQuery.refetch(), threadMessagesQuery.refetch()]);
-					}}
-				>
-					Try Again
-				</Button>
-			</div>
-		);
-	}
-
-	return (
-		<TokenUsageProvider store={tokenUsageStore}>
-			<AssistantRuntimeProvider runtime={runtime}>
-				<TimelineDataUI />
-				<StepSeparatorDataUI />
-				<PendingInterruptProvider
-					pendingInterrupts={pendingInterrupts}
-					onSubmit={handleApprovalSubmit}
-				>
-					<div key={searchSpaceId} className="flex h-full overflow-hidden">
-						<div className="relative flex-1 flex flex-col min-w-0 overflow-hidden">
-							<Thread hasActiveThread={!!activeThreadId} />
-							{isThreadMessagesLoading ? (
-								<div className="absolute inset-0 z-10 bg-panel">
-									<ThreadMessagesSkeleton />
-								</div>
-							) : null}
-						</div>
-						<MobileReportPanel />
-						<MobileEditorPanel />
-						<MobileHitlEditPanel />
-						<MobileArtifactsPanel />
-					</div>
-				</PendingInterruptProvider>
-				<EditMessageDialog
-					open={editDialogState !== null}
-					onOpenChange={(open) => {
-						if (!open) setEditDialogState(null);
-					}}
-					downstreamReversibleCount={editDialogState?.downstreamReversibleCount ?? 0}
-					downstreamTotalCount={editDialogState?.downstreamTotalCount ?? 0}
-					onChoose={handleEditDialogChoice}
-				/>
-			</AssistantRuntimeProvider>
-		</TokenUsageProvider>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/new-chat/loading.tsx b/surfsense_web/app/dashboard/[search_space_id]/new-chat/loading.tsx
deleted file mode 100644
index 108671662..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/new-chat/loading.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton";
-
-export default function Loading() {
-	return (
-		<div
-			className="aui-root aui-thread-root @container flex h-full min-h-0 flex-col bg-main-panel"
-			style={{
-				["--thread-max-width" as string]: "42rem",
-			}}
-		>
-			<div
-				className="aui-thread-viewport relative flex flex-1 min-h-0 flex-col overflow-y-auto px-4 scroll-smooth"
-				style={{ scrollbarGutter: "stable" }}
-			>
-				<div
-					aria-hidden
-					className="aui-chat-viewport-top-fade pointer-events-none sticky top-0 z-10 -mx-4 h-2 shrink-0 bg-gradient-to-b from-main-panel from-20% to-transparent"
-				/>
-				<div className="mx-auto w-full max-w-(--thread-max-width) flex flex-1 flex-col gap-6 py-8">
-					{/* User message */}
-					<div className="flex justify-end">
-						<Skeleton className="h-12 w-56 rounded-2xl" />
-					</div>
-
-					{/* Assistant message */}
-					<div className="flex flex-col gap-2">
-						<Skeleton className="h-4 w-full" />
-						<Skeleton className="h-4 w-[85%]" />
-						<Skeleton className="h-18 w-[40%]" />
-					</div>
-
-					{/* User message */}
-					<div className="flex gap-2 justify-end">
-						<Skeleton className="h-12 w-72 rounded-2xl" />
-					</div>
-
-					{/* Assistant message */}
-					<div className="flex flex-col gap-2">
-						<Skeleton className="h-10 w-[30%]" />
-						<Skeleton className="h-4 w-[90%]" />
-						<Skeleton className="h-6 w-[60%]" />
-					</div>
-
-					{/* User message */}
-					<div className="flex gap-2 justify-end">
-						<Skeleton className="h-12 w-96 rounded-2xl" />
-					</div>
-				</div>
-
-				{/* Input bar */}
-				<div
-					className="aui-chat-composer-footer sticky bottom-0 z-20 -mx-4 mt-auto flex flex-col items-stretch bg-gradient-to-t from-main-panel from-60% to-transparent px-4 pt-6"
-					style={{ paddingBottom: "max(0.5rem, env(safe-area-inset-bottom))" }}
-				>
-					<div className="aui-chat-composer-area relative mx-auto flex w-full max-w-(--thread-max-width) flex-col gap-3 overflow-visible">
-						<Skeleton className="h-28 w-full rounded-3xl" />
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
deleted file mode 100644
index 4c32d0b0e..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client";
-
-import { useAtomValue } from "jotai";
-import { useParams, useRouter } from "next/navigation";
-import { useEffect, useMemo } from "react";
-import {
-	globalLlmConfigStatusAtom,
-	globalModelConnectionsAtom,
-	modelConnectionsAtom,
-	modelRolesAtom,
-} from "@/atoms/model-connections/model-connections-query.atoms";
-import { Logo } from "@/components/Logo";
-import { ModelProviderConnectionsPanel } from "@/components/settings/model-connections/model-provider-connections-panel";
-import { Button } from "@/components/ui/button";
-import { useGlobalLoadingEffect } from "@/hooks/use-global-loading";
-import { useSession } from "@/hooks/use-session";
-import { redirectToLogin } from "@/lib/auth-utils";
-import { hasEnabledChatModel, isLlmOnboardingComplete } from "@/lib/onboarding";
-
-export default function OnboardPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = Number(params.search_space_id);
-	const session = useSession();
-	const { data: globalConnections = [], isLoading: globalLoading } = useAtomValue(
-		globalModelConnectionsAtom
-	);
-	const { data: connections = [] } = useAtomValue(modelConnectionsAtom);
-	const { data: roles = {}, isLoading: rolesLoading } = useAtomValue(modelRolesAtom);
-	const { data: globalConfigStatus, isLoading: globalConfigStatusLoading } =
-		useAtomValue(globalLlmConfigStatusAtom);
-
-	useEffect(() => {
-		if (session.status === "unauthenticated") redirectToLogin();
-	}, [session.status]);
-
-	const hasUsableChatModel = useMemo(
-		() => hasEnabledChatModel([...globalConnections, ...connections]),
-		[globalConnections, connections]
-	);
-
-	const onboardingComplete = isLlmOnboardingComplete(
-		roles.chat_model_id,
-		globalConnections,
-		connections
-	);
-
-	const isLoading =
-		session.status === "loading" || globalLoading || rolesLoading || globalConfigStatusLoading;
-
-	// Onboarding only applies when no global_llm_config.yaml exists. If a global
-	// config is present (or onboarding is already complete), leave this page.
-	const shouldLeaveOnboarding =
-		!isLoading && (Boolean(globalConfigStatus?.exists) || onboardingComplete);
-
-	useEffect(() => {
-		if (shouldLeaveOnboarding) {
-			router.replace(`/dashboard/${searchSpaceId}/new-chat`);
-		}
-	}, [shouldLeaveOnboarding, router, searchSpaceId]);
-
-	useGlobalLoadingEffect(isLoading || shouldLeaveOnboarding);
-
-	if (isLoading || shouldLeaveOnboarding) return null;
-
-	return (
-		<div className="flex min-h-screen select-none flex-col items-center justify-center bg-main-panel p-4">
-			<div className="w-full max-w-3xl space-y-6 text-center">
-				<Logo className="mx-auto h-12 w-12" />
-				<div className="space-y-2">
-					<h1 className="text-2xl font-semibold tracking-tight">Choose a model</h1>
-					<p className="text-sm text-muted-foreground">
-						Connect any supported provider, then enable the models you want SurfSense to use.
-					</p>
-				</div>
-				<ModelProviderConnectionsPanel
-					searchSpaceId={searchSpaceId}
-					connections={connections}
-					className="flex flex-col gap-6 text-left"
-					footerAction={
-						<Button
-							className="min-w-[112px]"
-							disabled={!onboardingComplete || !hasUsableChatModel}
-							onClick={() => router.push(`/dashboard/${searchSpaceId}/new-chat`)}
-						>
-							Start
-						</Button>
-					}
-					showAddProviderHeader={false}
-				/>
-			</div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/page.tsx
deleted file mode 100644
index 69aa47bc3..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { redirect } from "next/navigation";
-
-export default async function SearchSpaceDashboardPage({
-	params,
-}: {
-	params: Promise<{ search_space_id: string }>;
-}) {
-	const { search_space_id } = await params;
-	redirect(`/dashboard/${search_space_id}/new-chat`);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/purchase-cancel/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/purchase-cancel/page.tsx
deleted file mode 100644
index 174c5681d..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/purchase-cancel/page.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-
-import { CircleSlash2 } from "lucide-react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-
-export default function PurchaseCancelPage() {
-	const params = useParams();
-	const searchSpaceId = String(params.search_space_id ?? "");
-
-	return (
-		<div className="flex min-h-[calc(100vh-64px)] items-center justify-center px-4 py-8">
-			<Card className="w-full max-w-lg">
-				<CardHeader className="text-center">
-					<CircleSlash2 className="mx-auto h-10 w-10 text-muted-foreground" />
-					<CardTitle className="text-2xl">Checkout canceled</CardTitle>
-					<CardDescription>No charge was made and your account is unchanged.</CardDescription>
-				</CardHeader>
-				<CardContent className="text-center text-sm text-muted-foreground">
-					You can return to the pricing options and try again whenever you&apos;re ready.
-				</CardContent>
-				<CardFooter className="flex flex-col gap-2 sm:flex-row">
-					<Button asChild className="w-full">
-						<Link href={`/dashboard/${searchSpaceId}/buy-more`}>Back to Pricing</Link>
-					</Button>
-					<Button asChild variant="outline" className="w-full">
-						<Link href={`/dashboard/${searchSpaceId}/new-chat`}>Back to Dashboard</Link>
-					</Button>
-				</CardFooter>
-			</Card>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/purchase-success/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/purchase-success/page.tsx
deleted file mode 100644
index a8a88c5a5..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/purchase-success/page.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-"use client";
-
-import { AlertCircle, CheckCircle2, Loader2 } from "lucide-react";
-import Link from "next/link";
-import { useParams, useSearchParams } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import type { FinalizeCheckoutResponse } from "@/contracts/types/stripe.types";
-import { stripeApiService } from "@/lib/apis/stripe-api.service";
-
-type FinalizeState =
-	| { kind: "loading" }
-	| { kind: "completed"; data: FinalizeCheckoutResponse }
-	| { kind: "pending"; data: FinalizeCheckoutResponse }
-	| { kind: "still_pending"; data: FinalizeCheckoutResponse }
-	| { kind: "failed"; data: FinalizeCheckoutResponse }
-	| { kind: "error"; message: string }
-	| { kind: "no_session" };
-
-const POLL_INTERVAL_MS = 2000;
-const MAX_POLL_ATTEMPTS = 15; // ~30s total before falling back to the still_pending state
-
-export default function PurchaseSuccessPage() {
-	const params = useParams();
-	const searchParams = useSearchParams();
-	const searchSpaceId = String(params.search_space_id ?? "");
-	const sessionId = searchParams.get("session_id");
-
-	const [state, setState] = useState<FinalizeState>(
-		sessionId ? { kind: "loading" } : { kind: "no_session" }
-	);
-	// Tracks active polling so component unmount cancels it
-	const cancelledRef = useRef(false);
-
-	useEffect(() => {
-		if (!sessionId) return;
-
-		cancelledRef.current = false;
-
-		const poll = async (attempt: number): Promise<void> => {
-			if (cancelledRef.current) return;
-			try {
-				const data = await stripeApiService.finalizeCheckout(sessionId);
-				if (cancelledRef.current) return;
-
-				if (data.status === "completed") {
-					setState({ kind: "completed", data });
-					return;
-				}
-				if (data.status === "failed") {
-					setState({ kind: "failed", data });
-					return;
-				}
-
-				// Status is "pending" - either the user paid via async
-				// payment method (Klarna, ACH) or webhook + finalize both
-				// raced and lost. Keep polling up to MAX_POLL_ATTEMPTS,
-				// then fall back to a friendlier message that explains
-				// fulfilment may complete asynchronously.
-				if (attempt < MAX_POLL_ATTEMPTS) {
-					setState({ kind: "pending", data });
-					setTimeout(() => poll(attempt + 1), POLL_INTERVAL_MS);
-				} else {
-					setState({ kind: "still_pending", data });
-				}
-			} catch (err) {
-				if (cancelledRef.current) return;
-				const message = err instanceof Error ? err.message : "Unable to finalize checkout.";
-				setState({ kind: "error", message });
-			}
-		};
-
-		void poll(1);
-
-		return () => {
-			cancelledRef.current = true;
-		};
-	}, [sessionId]);
-
-	return (
-		<div className="flex min-h-[calc(100vh-64px)] items-center justify-center px-4 py-8">
-			<Card className="w-full max-w-lg">
-				<CardHeader className="text-center">
-					{state.kind === "loading" || state.kind === "pending" ? (
-						<Loader2 className="mx-auto h-10 w-10 animate-spin text-primary" />
-					) : state.kind === "completed" ? (
-						<CheckCircle2 className="mx-auto h-10 w-10 text-emerald-500" />
-					) : (
-						<AlertCircle className="mx-auto h-10 w-10 text-amber-500" />
-					)}
-					<CardTitle className="text-2xl">
-						{state.kind === "loading" && "Confirming payment…"}
-						{state.kind === "pending" && "Processing your payment…"}
-						{state.kind === "still_pending" && "Payment still processing"}
-						{state.kind === "completed" && "Purchase complete"}
-						{state.kind === "failed" && "Purchase failed"}
-						{state.kind === "error" && "Couldn't confirm payment"}
-						{state.kind === "no_session" && "Purchase complete"}
-					</CardTitle>
-					<CardDescription>
-						{state.kind === "loading" && "We're verifying your payment with Stripe."}
-						{state.kind === "pending" &&
-							"Your bank is taking a moment to confirm. This usually takes 5–30 seconds."}
-						{state.kind === "still_pending" &&
-							"Your payment is still being processed by your bank. We'll apply your purchase as soon as it clears — usually within a few minutes. You can safely close this page."}
-						{state.kind === "completed" &&
-							`Added ${formatCredit(state.data.credit_micros_granted ?? 0)} of credit to your account.`}
-						{state.kind === "failed" &&
-							"Stripe reported the checkout as failed or expired. Your card was not charged."}
-						{state.kind === "error" &&
-							"Don't worry — if your card was charged, your purchase will still apply within a minute or two."}
-						{state.kind === "no_session" && "Your purchase is being applied to your account."}
-					</CardDescription>
-				</CardHeader>
-				<CardContent className="space-y-3 text-center">
-					{state.kind === "completed" && (
-						<p className="text-sm text-muted-foreground">
-							New credit balance: {formatCredit(state.data.credit_micros_balance ?? 0)}
-						</p>
-					)}
-					{state.kind === "error" && (
-						<p className="text-sm text-muted-foreground">{state.message}</p>
-					)}
-				</CardContent>
-				<CardFooter className="flex flex-col gap-2">
-					<Button asChild className="w-full">
-						<Link href={`/dashboard/${searchSpaceId}/new-chat`}>Back to Dashboard</Link>
-					</Button>
-					<Button asChild variant="outline" className="w-full">
-						<Link href={`/dashboard/${searchSpaceId}/buy-more`}>Buy credits</Link>
-					</Button>
-				</CardFooter>
-			</Card>
-		</div>
-	);
-}
-
-function formatCredit(micros: number): string {
-	const dollars = micros / 1_000_000;
-	return new Intl.NumberFormat("en-US", {
-		style: "currency",
-		currency: "USD",
-		maximumFractionDigits: 2,
-	}).format(dollars);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/general/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/general/page.tsx
deleted file mode 100644
index 09124b3b0..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/general/page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { GeneralSettingsManager } from "@/components/settings/general-settings-manager";
-
-export default async function Page({ params }: { params: Promise<{ search_space_id: string }> }) {
-	const { search_space_id } = await params;
-	return <GeneralSettingsManager searchSpaceId={Number(search_space_id)} />;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/layout-shell.tsx b/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/layout-shell.tsx
deleted file mode 100644
index bb928f8f7..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/layout-shell.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-"use client";
-
-import { BookText, Cpu, Earth, Settings, UserKey } from "lucide-react";
-import Link from "next/link";
-import { useSelectedLayoutSegment } from "next/navigation";
-import { useTranslations } from "next-intl";
-import type React from "react";
-import { useCallback, useMemo, useState } from "react";
-import { Separator } from "@/components/ui/separator";
-import { cn } from "@/lib/utils";
-
-export type SearchSpaceSettingsTab =
-	| "general"
-	| "models"
-	| "team-roles"
-	| "prompts"
-	| "public-links";
-
-const DEFAULT_TAB: SearchSpaceSettingsTab = "general";
-
-interface SearchSpaceSettingsLayoutShellProps {
-	searchSpaceId: string;
-	children: React.ReactNode;
-}
-
-export function SearchSpaceSettingsLayoutShell({
-	searchSpaceId,
-	children,
-}: SearchSpaceSettingsLayoutShellProps) {
-	const t = useTranslations("searchSpaceSettings");
-	const segment = useSelectedLayoutSegment();
-	const [tabScrollPos, setTabScrollPos] = useState<"start" | "middle" | "end">("start");
-
-	const handleTabScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
-		const el = e.currentTarget;
-		const atStart = el.scrollLeft <= 2;
-		const atEnd = el.scrollWidth - el.scrollLeft - el.clientWidth <= 2;
-		setTabScrollPos(atStart ? "start" : atEnd ? "end" : "middle");
-	}, []);
-
-	const navItems = useMemo(
-		() => [
-			{
-				value: "general" as const,
-				label: t("nav_general"),
-				icon: <Settings className="h-4 w-4" />,
-			},
-			{
-				value: "models" as const,
-				label: t("nav_models"),
-				icon: <Cpu className="h-4 w-4" />,
-			},
-			{
-				value: "team-roles" as const,
-				label: t("nav_team_roles"),
-				icon: <UserKey className="h-4 w-4" />,
-			},
-			{
-				value: "prompts" as const,
-				label: t("nav_system_instructions"),
-				icon: <BookText className="h-4 w-4" />,
-			},
-			{
-				value: "public-links" as const,
-				label: t("nav_public_links"),
-				icon: <Earth className="h-4 w-4" />,
-			},
-		],
-		[t]
-	);
-
-	const activeTab: SearchSpaceSettingsTab =
-		segment && navItems.some((item) => item.value === segment)
-			? (segment as SearchSpaceSettingsTab)
-			: DEFAULT_TAB;
-	const selectedLabel = navItems.find((item) => item.value === activeTab)?.label ?? t("title");
-
-	const hrefFor = (tab: SearchSpaceSettingsTab) =>
-		`/dashboard/${searchSpaceId}/search-space-settings/${tab}`;
-
-	return (
-		<section className="flex h-full min-h-[min(680px,calc(100vh-5rem))] w-full select-none flex-col gap-6 md:pt-6 md:flex-row">
-			<div className="md:w-[220px] md:shrink-0">
-				<h1 className="mb-4 px-1 text-2xl font-semibold tracking-tight">{t("title")}</h1>
-				<nav className="hidden flex-col gap-0.5 md:flex">
-					{navItems.map((item) => (
-						<Link
-							key={item.value}
-							href={hrefFor(item.value)}
-							replace
-							scroll={false}
-							prefetch
-							className={cn(
-								"inline-flex h-auto items-center justify-start gap-3 rounded-md px-3 py-2.5 text-left text-sm font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
-								activeTab === item.value
-									? "bg-accent text-accent-foreground"
-									: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-							)}
-						>
-							{item.icon}
-							{item.label}
-						</Link>
-					))}
-				</nav>
-				<div
-					className="overflow-x-auto border-b border-border pb-3 md:hidden"
-					onScroll={handleTabScroll}
-					style={{
-						maskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
-						WebkitMaskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
-					}}
-				>
-					<div className="flex gap-1">
-						{navItems.map((item) => (
-							<Link
-								key={item.value}
-								href={hrefFor(item.value)}
-								replace
-								scroll={false}
-								prefetch
-								className={cn(
-									"inline-flex h-auto shrink-0 items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
-									activeTab === item.value
-										? "bg-accent text-accent-foreground"
-										: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-								)}
-							>
-								{item.icon}
-								{item.label}
-							</Link>
-						))}
-					</div>
-				</div>
-			</div>
-
-			<div className="min-w-0 flex-1">
-				<div className="hidden md:block">
-					<h2 className="text-lg font-semibold">{selectedLabel}</h2>
-					<Separator className="mt-4" />
-				</div>
-				<div className="min-w-0 pt-4 md:max-w-3xl">{children}</div>
-			</div>
-		</section>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/layout.tsx b/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/layout.tsx
deleted file mode 100644
index 330158da7..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/layout.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type React from "react";
-import { use } from "react";
-import { SearchSpaceSettingsLayoutShell } from "./layout-shell";
-
-export default function SearchSpaceSettingsLayout({
-	params,
-	children,
-}: {
-	params: Promise<{ search_space_id: string }>;
-	children: React.ReactNode;
-}) {
-	const { search_space_id } = use(params);
-
-	return (
-		<SearchSpaceSettingsLayoutShell searchSpaceId={search_space_id}>
-			{children}
-		</SearchSpaceSettingsLayoutShell>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/models/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/models/page.tsx
deleted file mode 100644
index c97ef7630..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/models/page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ModelConnectionsSettings } from "@/components/settings/model-connections-settings";
-
-export default async function Page({ params }: { params: Promise<{ search_space_id: string }> }) {
-	const { search_space_id } = await params;
-	return <ModelConnectionsSettings searchSpaceId={Number(search_space_id)} />;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/page.tsx
deleted file mode 100644
index 27c59328b..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { redirect } from "next/navigation";
-
-export default async function SearchSpaceSettingsPage({
-	params,
-}: {
-	params: Promise<{ search_space_id: string }>;
-}) {
-	const { search_space_id } = await params;
-	redirect(`/dashboard/${search_space_id}/search-space-settings/general`);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/prompts/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/prompts/page.tsx
deleted file mode 100644
index cc837299d..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/prompts/page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { PromptConfigManager } from "@/components/settings/prompt-config-manager";
-
-export default async function Page({ params }: { params: Promise<{ search_space_id: string }> }) {
-	const { search_space_id } = await params;
-	return <PromptConfigManager searchSpaceId={Number(search_space_id)} />;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/public-links/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/public-links/page.tsx
deleted file mode 100644
index 2cddfe3e0..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/public-links/page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { PublicChatSnapshotsManager } from "@/components/public-chat-snapshots/public-chat-snapshots-manager";
-
-export default async function Page({ params }: { params: Promise<{ search_space_id: string }> }) {
-	const { search_space_id } = await params;
-	return <PublicChatSnapshotsManager searchSpaceId={Number(search_space_id)} />;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/team-roles/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/team-roles/page.tsx
deleted file mode 100644
index a343eaacb..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/team-roles/page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { RolesManager } from "@/components/settings/roles-manager";
-
-export default async function Page({ params }: { params: Promise<{ search_space_id: string }> }) {
-	const { search_space_id } = await params;
-	return <RolesManager searchSpaceId={Number(search_space_id)} />;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
deleted file mode 100644
index c75eaf4e4..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { TeamContent } from "./team-content";
-
-export default async function TeamPage({
-	params,
-}: {
-	params: Promise<{ search_space_id: string }>;
-}) {
-	const { search_space_id } = await params;
-
-	return (
-		<div className="w-full select-none space-y-6">
-			<TeamContent searchSpaceId={Number(search_space_id)} />
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx
deleted file mode 100644
index 9245d7bdd..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx
+++ /dev/null
@@ -1,967 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { useAtomValue } from "jotai";
-import {
-	Calendar,
-	Check,
-	ChevronDown,
-	ChevronFirst,
-	ChevronLast,
-	ChevronLeft,
-	ChevronRight,
-	Clock,
-	Copy,
-	Hash,
-	Link2,
-	ShieldUser,
-	Trash2,
-	User,
-	UserPlus,
-	Users,
-} from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
-import {
-	createInviteMutationAtom,
-	deleteInviteMutationAtom,
-} from "@/atoms/invites/invites-mutation.atoms";
-import {
-	deleteMemberMutationAtom,
-	updateMemberMutationAtom,
-} from "@/atoms/members/members-mutation.atoms";
-import { canPerform, membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
-import { Calendar as CalendarComponent } from "@/components/ui/calendar";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Spinner } from "@/components/ui/spinner";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table";
-import type {
-	CreateInviteRequest,
-	DeleteInviteRequest,
-	Invite,
-} from "@/contracts/types/invites.types";
-import type {
-	DeleteMembershipRequest,
-	Membership,
-	UpdateMembershipRequest,
-} from "@/contracts/types/members.types";
-import type { Role } from "@/contracts/types/roles.types";
-import { invitesApiService } from "@/lib/apis/invites-api.service";
-import { rolesApiService } from "@/lib/apis/roles-api.service";
-import { formatRelativeDate } from "@/lib/format-date";
-import { trackSearchSpaceInviteSent, trackSearchSpaceUsersViewed } from "@/lib/posthog/events";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
-import { cn } from "@/lib/utils";
-
-function getAvatarInitials(member: Membership): string {
-	if (member.user_display_name) {
-		const parts = member.user_display_name.trim().split(/\s+/);
-		if (parts.length >= 2) {
-			return (parts[0][0] + parts[1][0]).toUpperCase();
-		}
-		return member.user_display_name.slice(0, 2).toUpperCase();
-	}
-	if (member.user_email) {
-		const emailName = member.user_email.split("@")[0];
-		return emailName.slice(0, 2).toUpperCase();
-	}
-	return "U";
-}
-
-const PAGE_SIZE = 5;
-const SKELETON_KEYS = Array.from({ length: PAGE_SIZE }, (_, i) => `skeleton-${i}`);
-
-interface TeamContentProps {
-	searchSpaceId: number;
-}
-
-export function TeamContent({ searchSpaceId }: TeamContentProps) {
-	const { data: access = null, isLoading: accessLoading } = useAtomValue(myAccessAtom);
-
-	const hasPermission = useCallback(
-		(permission: string) => canPerform(access, permission),
-		[access]
-	);
-	const { data: members = [], isLoading: membersLoading } = useAtomValue(membersAtom);
-
-	const { mutateAsync: updateMember } = useAtomValue(updateMemberMutationAtom);
-	const { mutateAsync: deleteMember } = useAtomValue(deleteMemberMutationAtom);
-	const { mutateAsync: createInvite } = useAtomValue(createInviteMutationAtom);
-	const { mutateAsync: revokeInvite } = useAtomValue(deleteInviteMutationAtom);
-
-	const handleRevokeInvite = useCallback(
-		async (inviteId: number): Promise<boolean> => {
-			const request: DeleteInviteRequest = {
-				search_space_id: searchSpaceId,
-				invite_id: inviteId,
-			};
-			await revokeInvite(request);
-			return true;
-		},
-		[revokeInvite, searchSpaceId]
-	);
-
-	const handleCreateInvite = useCallback(
-		async (inviteData: CreateInviteRequest["data"]) => {
-			const request: CreateInviteRequest = {
-				search_space_id: searchSpaceId,
-				data: inviteData,
-			};
-			return await createInvite(request);
-		},
-		[createInvite, searchSpaceId]
-	);
-
-	const handleUpdateMember = useCallback(
-		async (membershipId: number, roleId: number | null): Promise<Membership> => {
-			const request: UpdateMembershipRequest = {
-				search_space_id: searchSpaceId,
-				membership_id: membershipId,
-				data: { role_id: roleId },
-			};
-			return (await updateMember(request)) as Membership;
-		},
-		[updateMember, searchSpaceId]
-	);
-
-	const handleRemoveMember = useCallback(
-		async (membershipId: number) => {
-			const request: DeleteMembershipRequest = {
-				search_space_id: searchSpaceId,
-				membership_id: membershipId,
-			};
-			await deleteMember(request);
-			return true;
-		},
-		[deleteMember, searchSpaceId]
-	);
-
-	const { data: roles = [], isLoading: rolesLoading } = useQuery({
-		queryKey: cacheKeys.roles.all(searchSpaceId.toString()),
-		queryFn: () => rolesApiService.getRoles({ search_space_id: searchSpaceId }),
-		enabled: !!searchSpaceId,
-	});
-
-	const { data: invites = [], isLoading: invitesLoading } = useQuery({
-		queryKey: cacheKeys.invites.all(searchSpaceId.toString()),
-		queryFn: () => invitesApiService.getInvites({ search_space_id: searchSpaceId }),
-		staleTime: 5 * 60 * 1000,
-	});
-
-	const activeInvites = useMemo(() => invites.filter((i) => i.is_active), [invites]);
-
-	const canInvite = hasPermission("members:invite");
-	const canManageRoles = hasPermission("members:manage_roles");
-	const canRemove = hasPermission("members:remove");
-
-	const owners = useMemo(() => members.filter((m) => m.is_owner), [members]);
-	const nonOwnerMembers = useMemo(() => members.filter((m) => !m.is_owner), [members]);
-
-	const [pageIndex, setPageIndex] = useState(0);
-	const totalItems = nonOwnerMembers.length;
-	const lastPage = Math.max(0, Math.ceil(totalItems / PAGE_SIZE) - 1);
-
-	useEffect(() => {
-		if (pageIndex > lastPage) setPageIndex(lastPage);
-	}, [pageIndex, lastPage]);
-
-	const paginatedMembers = useMemo(() => {
-		const start = pageIndex * PAGE_SIZE;
-		const end = start + PAGE_SIZE;
-		return nonOwnerMembers.slice(
-			Math.min(start, nonOwnerMembers.length),
-			Math.min(end, nonOwnerMembers.length)
-		);
-	}, [nonOwnerMembers, pageIndex]);
-
-	const displayStart = totalItems > 0 ? pageIndex * PAGE_SIZE + 1 : 0;
-	const displayEnd = Math.min((pageIndex + 1) * PAGE_SIZE, totalItems);
-	const canPrev = pageIndex > 0;
-	const canNext = displayEnd < totalItems;
-
-	useEffect(() => {
-		if (members.length > 0 && !membersLoading) {
-			const ownerCount = members.filter((m) => m.is_owner).length;
-			trackSearchSpaceUsersViewed(searchSpaceId, members.length, ownerCount);
-		}
-	}, [members, membersLoading, searchSpaceId]);
-
-	if (accessLoading || membersLoading) {
-		return (
-			<div className="space-y-4 md:space-y-6">
-				<div className="flex items-center justify-between gap-4 flex-wrap">
-					<div className="flex items-baseline gap-3">
-						<h1 className="text-xl md:text-2xl font-semibold text-foreground">Members</h1>
-					</div>
-					<div className="flex items-center gap-2">
-						<Button
-							type="button"
-							variant="outline"
-							size="sm"
-							aria-disabled="true"
-							tabIndex={-1}
-							className="pointer-events-none gap-1.5 md:gap-2 text-xs md:text-sm bg-black text-white dark:bg-white dark:text-black"
-						>
-							<UserPlus className="h-3.5 w-3.5 md:h-4 md:w-4" />
-							Invite members
-						</Button>
-						<Button
-							type="button"
-							variant="ghost"
-							size="sm"
-							aria-disabled="true"
-							tabIndex={-1}
-							className="pointer-events-none gap-1.5 md:gap-2 rounded-md bg-muted px-3 text-xs md:text-sm hover:bg-accent"
-						>
-							<Link2 className="h-3.5 w-3.5 md:h-4 md:w-4 rotate-315" />
-							Active invites
-							<span className="inline-flex items-center justify-center h-4 md:h-5 min-w-4 md:min-w-5 px-1 rounded-full bg-neutral-700 text-neutral-200">
-								<Skeleton className="h-2.5 w-2.5 rounded-sm bg-neutral-500/60" />
-							</span>
-						</Button>
-					</div>
-				</div>
-				<div className="rounded-lg border border-border/60 bg-accent overflow-hidden">
-					<Table className="table-fixed w-full">
-						<TableHeader>
-							<TableRow className="hover:bg-transparent border-b border-border/60">
-								<TableHead className="w-[45%] px-4 md:px-6 border-r border-border/60">
-									<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
-										<User size={14} className="opacity-60 text-muted-foreground" />
-										Name
-									</span>
-								</TableHead>
-								<TableHead className="hidden md:table-cell w-[25%] border-r border-border/60">
-									<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
-										<Clock size={14} className="opacity-60 text-muted-foreground" />
-										Last logged in
-									</span>
-								</TableHead>
-								<TableHead className="w-[30%] px-4 md:px-6">
-									<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70 justify-end">
-										<ShieldUser size={14} className="opacity-60 text-muted-foreground" />
-										Role
-									</span>
-								</TableHead>
-							</TableRow>
-						</TableHeader>
-						<TableBody>
-							{SKELETON_KEYS.slice(0, 2).map((id) => (
-								<TableRow key={id} className="border-b border-border/60 hover:bg-transparent">
-									<TableCell className="w-[45%] py-2.5 px-4 md:px-6 border-r border-border/60">
-										<div className="flex items-center gap-3">
-											<Skeleton className="h-10 w-10 rounded-full shrink-0" />
-											<Skeleton className="h-4 w-28 md:w-32" />
-										</div>
-									</TableCell>
-									<TableCell className="hidden md:table-cell w-[25%] py-2.5 border-r border-border/60">
-										<Skeleton className="h-4 w-24" />
-									</TableCell>
-									<TableCell className="w-[30%] py-2.5 px-4 md:px-6">
-										<div className="flex justify-end">
-											<Skeleton className="h-4 w-12" />
-										</div>
-									</TableCell>
-								</TableRow>
-							))}
-						</TableBody>
-					</Table>
-				</div>
-			</div>
-		);
-	}
-
-	return (
-		<div className="space-y-4 md:space-y-6">
-			<div className="flex items-center justify-between gap-4 flex-wrap">
-				<div className="flex items-baseline gap-3">
-					<h1 className="text-xl md:text-2xl font-semibold text-foreground">Members</h1>
-					<p className="text-sm text-muted-foreground whitespace-nowrap">
-						{members.length} {members.length === 1 ? "member" : "members"}
-					</p>
-				</div>
-				{canInvite && (
-					<div className="flex items-center gap-2">
-						{rolesLoading ? (
-							<Button
-								type="button"
-								variant="outline"
-								size="sm"
-								aria-disabled="true"
-								tabIndex={-1}
-								className="pointer-events-none gap-1.5 md:gap-2 text-xs md:text-sm bg-black text-white dark:bg-white dark:text-black"
-							>
-								<UserPlus className="h-3.5 w-3.5 md:h-4 md:w-4" />
-								Invite members
-							</Button>
-						) : (
-							<CreateInviteDialog
-								roles={roles}
-								onCreateInvite={handleCreateInvite}
-								searchSpaceId={searchSpaceId}
-							/>
-						)}
-						{invitesLoading ? (
-							<Button
-								type="button"
-								variant="ghost"
-								size="sm"
-								aria-disabled="true"
-								tabIndex={-1}
-								className="pointer-events-none gap-1.5 md:gap-2 rounded-md bg-muted px-3 text-xs md:text-sm hover:bg-accent"
-							>
-								<Link2 className="h-3.5 w-3.5 md:h-4 md:w-4 rotate-315" />
-								Active invites
-								<span className="inline-flex items-center justify-center h-4 md:h-5 min-w-4 md:min-w-5 px-1 rounded-full bg-neutral-700 text-neutral-200">
-									<Skeleton className="h-2.5 w-2.5 rounded-sm bg-neutral-500/60" />
-								</span>
-							</Button>
-						) : (
-							<AllInvitesDialog invites={activeInvites} onRevokeInvite={handleRevokeInvite} />
-						)}
-					</div>
-				)}
-			</div>
-
-			<div className="rounded-lg border border-border/60 bg-accent overflow-hidden">
-				<Table className="table-fixed w-full">
-					<TableHeader>
-						<TableRow className="hover:bg-transparent border-b border-border/60">
-							<TableHead className="w-[45%] px-4 md:px-6 border-r border-border/60">
-								<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
-									<User size={14} className="opacity-60 text-muted-foreground" />
-									Name
-								</span>
-							</TableHead>
-							<TableHead className="hidden md:table-cell w-[25%] border-r border-border/60">
-								<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
-									<Clock size={14} className="opacity-60 text-muted-foreground" />
-									Last logged in
-								</span>
-							</TableHead>
-							<TableHead className="w-[30%] px-4 md:px-6">
-								<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70 justify-end">
-									<ShieldUser size={14} className="opacity-60 text-muted-foreground" />
-									Role
-								</span>
-							</TableHead>
-						</TableRow>
-					</TableHeader>
-					<TableBody>
-						{owners.map((member) => (
-							<MemberRow
-								key={`member-${member.id}`}
-								searchSpaceId={searchSpaceId}
-								member={member}
-								roles={roles}
-								canManageRoles={canManageRoles}
-								canRemove={canRemove}
-								onUpdateRole={handleUpdateMember}
-								onRemoveMember={handleRemoveMember}
-							/>
-						))}
-						{paginatedMembers.map((member) => (
-							<MemberRow
-								key={`member-${member.id}`}
-								searchSpaceId={searchSpaceId}
-								member={member}
-								roles={roles}
-								canManageRoles={canManageRoles}
-								canRemove={canRemove}
-								onUpdateRole={handleUpdateMember}
-								onRemoveMember={handleRemoveMember}
-							/>
-						))}
-						{members.length === 0 && (
-							<TableRow>
-								<TableCell colSpan={3} className="text-center py-12">
-									<div className="flex flex-col items-center gap-2">
-										<Users className="h-8 w-8 text-muted-foreground/50" />
-										<p className="text-muted-foreground">No members yet</p>
-									</div>
-								</TableCell>
-							</TableRow>
-						)}
-					</TableBody>
-				</Table>
-			</div>
-
-			{totalItems > PAGE_SIZE && (
-				<div className="flex items-center justify-end gap-3 py-3 px-2">
-					<span className="text-sm text-muted-foreground tabular-nums">
-						{displayStart}-{displayEnd} of {totalItems}
-					</span>
-					<div className="flex items-center gap-1">
-						<Button
-							variant="ghost"
-							size="icon"
-							className="h-8 w-8 disabled:opacity-40"
-							onClick={() => setPageIndex(0)}
-							disabled={!canPrev}
-							aria-label="Go to first page"
-						>
-							<ChevronFirst size={18} strokeWidth={2} />
-						</Button>
-						<Button
-							variant="ghost"
-							size="icon"
-							className="h-8 w-8 disabled:opacity-40"
-							onClick={() => setPageIndex((i) => Math.max(0, i - 1))}
-							disabled={!canPrev}
-							aria-label="Go to previous page"
-						>
-							<ChevronLeft size={18} strokeWidth={2} />
-						</Button>
-						<Button
-							variant="ghost"
-							size="icon"
-							className="h-8 w-8 disabled:opacity-40"
-							onClick={() => setPageIndex((i) => (canNext ? i + 1 : i))}
-							disabled={!canNext}
-							aria-label="Go to next page"
-						>
-							<ChevronRight size={18} strokeWidth={2} />
-						</Button>
-						<Button
-							variant="ghost"
-							size="icon"
-							className="h-8 w-8 disabled:opacity-40"
-							onClick={() => setPageIndex(lastPage)}
-							disabled={!canNext}
-							aria-label="Go to last page"
-						>
-							<ChevronLast size={18} strokeWidth={2} />
-						</Button>
-					</div>
-				</div>
-			)}
-		</div>
-	);
-}
-
-function MemberRow({
-	searchSpaceId,
-	member,
-	roles,
-	canManageRoles,
-	canRemove,
-	onUpdateRole,
-	onRemoveMember,
-}: {
-	searchSpaceId: number;
-	member: Membership;
-	roles: Role[];
-	canManageRoles: boolean;
-	canRemove: boolean;
-	onUpdateRole: (membershipId: number, roleId: number | null) => Promise<Membership>;
-	onRemoveMember: (membershipId: number) => Promise<boolean>;
-}) {
-	const router = useRouter();
-	const initials = getAvatarInitials(member);
-	const displayName = member.user_display_name || member.user_email || "Unknown";
-	const roleName = member.is_owner ? "Owner" : member.role?.name || "No role";
-	const showActions = !member.is_owner && (canManageRoles || canRemove);
-
-	return (
-		<TableRow className="border-b border-border/60 transition-colors hover:bg-accent hover:text-accent-foreground">
-			<TableCell className="w-[45%] py-2.5 px-4 md:px-6 max-w-0 border-r border-border/60">
-				<div className="flex items-center gap-3">
-					<Avatar className="size-10 shrink-0">
-						{member.user_avatar_url && (
-							<AvatarImage src={member.user_avatar_url} alt={displayName} />
-						)}
-						<AvatarFallback className="bg-popover text-sm text-popover-foreground">
-							{initials}
-						</AvatarFallback>
-					</Avatar>
-					<div className="min-w-0">
-						<p className="font-medium text-sm truncate select-text">{displayName}</p>
-						{member.user_display_name && member.user_email && (
-							<p className="text-xs text-muted-foreground truncate select-text">
-								{member.user_email}
-							</p>
-						)}
-					</div>
-				</div>
-			</TableCell>
-
-			<TableCell className="hidden md:table-cell w-[25%] py-2.5 text-sm text-foreground border-r border-border/60">
-				{member.user_last_login ? formatRelativeDate(member.user_last_login) : "Never"}
-			</TableCell>
-
-			<TableCell className="w-[30%] text-right py-2.5 px-4 md:px-6">
-				{showActions ? (
-					<DropdownMenu>
-						<DropdownMenuTrigger asChild>
-							<Button
-								type="button"
-								variant="ghost"
-								size="sm"
-								className="h-auto w-[74px] justify-end gap-1.5 px-0 py-0 text-sm text-muted-foreground hover:bg-transparent hover:text-accent-foreground has-[>svg]:px-0"
-							>
-								{roleName}
-								<ChevronDown className="h-4 w-4" />
-							</Button>
-						</DropdownMenuTrigger>
-						<DropdownMenuContent
-							align="end"
-							onCloseAutoFocus={(e) => e.preventDefault()}
-							className="min-w-[120px]"
-						>
-							{canManageRoles &&
-								roles
-									.filter((r) => r.name !== "Owner")
-									.map((role) => (
-										<DropdownMenuItem
-											key={role.id}
-											onClick={() => onUpdateRole(member.id, role.id)}
-										>
-											Make {role.name}
-										</DropdownMenuItem>
-									))}
-							{canRemove && (
-								<AlertDialog>
-									<AlertDialogTrigger asChild>
-										<DropdownMenuItem
-											onSelect={(e) => e.preventDefault()}
-											className="text-destructive focus:text-destructive"
-										>
-											Remove
-										</DropdownMenuItem>
-									</AlertDialogTrigger>
-									<AlertDialogContent>
-										<AlertDialogHeader>
-											<AlertDialogTitle>Remove member?</AlertDialogTitle>
-											<AlertDialogDescription>
-												This will remove <span className="font-medium">{member.user_email}</span>{" "}
-												from this search space. They will lose access to all resources.
-											</AlertDialogDescription>
-										</AlertDialogHeader>
-										<AlertDialogFooter>
-											<AlertDialogCancel>Cancel</AlertDialogCancel>
-											<AlertDialogAction
-												onClick={() => onRemoveMember(member.id)}
-												className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-											>
-												Remove
-											</AlertDialogAction>
-										</AlertDialogFooter>
-									</AlertDialogContent>
-								</AlertDialog>
-							)}
-							<DropdownMenuSeparator className="bg-popover-border" />
-							<DropdownMenuItem
-								onClick={() =>
-									router.push(`/dashboard/${searchSpaceId}/search-space-settings/team-roles`)
-								}
-							>
-								Manage Roles
-							</DropdownMenuItem>
-						</DropdownMenuContent>
-					</DropdownMenu>
-				) : (
-					<span className="text-sm text-foreground">{roleName}</span>
-				)}
-			</TableCell>
-		</TableRow>
-	);
-}
-
-function CreateInviteDialog({
-	roles,
-	onCreateInvite,
-	searchSpaceId,
-}: {
-	roles: Role[];
-	onCreateInvite: (data: CreateInviteRequest["data"]) => Promise<Invite>;
-	searchSpaceId: number;
-}) {
-	const [open, setOpen] = useState(false);
-	const [creating, setCreating] = useState(false);
-	const [name, setName] = useState("");
-	const [roleId, setRoleId] = useState<string>("");
-	const [maxUses, setMaxUses] = useState<string>("");
-	const [expiresAt, setExpiresAt] = useState<Date | undefined>(undefined);
-	const [createdInvite, setCreatedInvite] = useState<Invite | null>(null);
-	const [copiedLink, setCopiedLink] = useState(false);
-
-	const assignableRoles = useMemo(() => roles.filter((r) => r.name !== "Owner"), [roles]);
-	const defaultRole = useMemo(() => assignableRoles.find((r) => r.is_default), [assignableRoles]);
-
-	useEffect(() => {
-		if (defaultRole && !roleId) {
-			setRoleId(defaultRole.id.toString());
-		}
-	}, [defaultRole, roleId]);
-
-	const handleCreate = async () => {
-		setCreating(true);
-		try {
-			const data: CreateInviteRequest["data"] = {};
-			if (name) data.name = name;
-			if (roleId) data.role_id = Number(roleId);
-			if (maxUses) data.max_uses = Number(maxUses);
-			if (expiresAt) data.expires_at = expiresAt.toISOString();
-
-			const invite = await onCreateInvite(data);
-			setCreatedInvite(invite);
-
-			const roleName = roleId ? roles.find((r) => r.id.toString() === roleId)?.name : undefined;
-			trackSearchSpaceInviteSent(searchSpaceId, {
-				roleName,
-				hasExpiry: !!expiresAt,
-				hasMaxUses: !!maxUses,
-			});
-		} catch (error) {
-			console.error("Failed to create invite:", error);
-			toast.error("Failed to create invite. Please try again.");
-		} finally {
-			setCreating(false);
-		}
-	};
-
-	const handleClose = () => {
-		setOpen(false);
-		setName("");
-		setRoleId(defaultRole?.id.toString() ?? "");
-		setMaxUses("");
-		setExpiresAt(undefined);
-		setCreatedInvite(null);
-		setCopiedLink(false);
-	};
-
-	const copyLink = () => {
-		if (!createdInvite) return;
-		const link = `${window.location.origin}/invite/${createdInvite.invite_code}`;
-		navigator.clipboard.writeText(link);
-		setCopiedLink(true);
-		toast.success("Invite link copied to clipboard");
-	};
-
-	return (
-		<Dialog open={open} onOpenChange={(v) => (v ? setOpen(true) : handleClose())}>
-			<DialogTrigger asChild>
-				<Button
-					variant="outline"
-					size="sm"
-					className="gap-1.5 md:gap-2 text-xs md:text-sm bg-black text-white dark:bg-white dark:text-black hover:bg-black/90 dark:hover:bg-white/90"
-				>
-					<UserPlus className="h-3.5 w-3.5 md:h-4 md:w-4" />
-					Invite members
-				</Button>
-			</DialogTrigger>
-			<DialogContent
-				className="w-[92vw] max-w-[92vw] sm:max-w-md p-4 md:p-6 select-none"
-				onOpenAutoFocus={(e) => e.preventDefault()}
-			>
-				{createdInvite ? (
-					<>
-						<DialogHeader>
-							<DialogTitle className="flex items-center gap-2">
-								<Check className="h-5 w-5 text-emerald-500" />
-								Invite Created!
-							</DialogTitle>
-							<DialogDescription>
-								Share this link to invite people to your search space.
-							</DialogDescription>
-						</DialogHeader>
-						<div className="space-y-3 py-2 md:py-4">
-							<div className="flex items-center gap-2 p-3 bg-muted rounded-lg">
-								<code className="flex-1 min-w-0 text-sm break-all">
-									{window.location.origin}/invite/{createdInvite.invite_code}
-								</code>
-								<Button variant="outline" size="sm" onClick={copyLink} className="shrink-0">
-									{copiedLink ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-								</Button>
-							</div>
-							<div className="flex flex-wrap gap-2 text-sm text-muted-foreground">
-								<span className="flex items-center gap-1">
-									{createdInvite.role?.name || "Default role"}
-								</span>
-								{createdInvite.max_uses && (
-									<span className="flex items-center gap-1">
-										<Hash className="h-3 w-3" />
-										Max {createdInvite.max_uses} uses
-									</span>
-								)}
-								{createdInvite.expires_at && (
-									<span className="flex items-center gap-1">
-										<Clock className="h-3 w-3" />
-										Expires {new Date(createdInvite.expires_at).toLocaleDateString()}
-									</span>
-								)}
-							</div>
-						</div>
-						<DialogFooter>
-							<Button onClick={handleClose}>Done</Button>
-						</DialogFooter>
-					</>
-				) : (
-					<>
-						<DialogHeader>
-							<DialogTitle>Invite Members</DialogTitle>
-							<DialogDescription>
-								Create a link to invite people to this search space.
-							</DialogDescription>
-						</DialogHeader>
-						<div className="space-y-3 py-2 md:py-4">
-							<div className="space-y-2">
-								<Label htmlFor="invite-name">Name (optional)</Label>
-								<Input
-									id="invite-name"
-									placeholder="e.g., Marketing team invite"
-									value={name}
-									onChange={(e) => setName(e.target.value)}
-								/>
-							</div>
-							<div className="space-y-2">
-								<Label htmlFor="invite-role">Role</Label>
-								<Select value={roleId} onValueChange={setRoleId}>
-									<SelectTrigger className="border-popover-border">
-										<SelectValue placeholder="Assign a role" />
-									</SelectTrigger>
-									<SelectContent>
-										{assignableRoles.map((role) => (
-											<SelectItem key={role.id} value={role.id.toString()}>
-												<span className="flex items-center gap-2">
-													{role.name}
-													{role.is_default && (
-														<span className="text-xs text-muted-foreground">(default)</span>
-													)}
-												</span>
-											</SelectItem>
-										))}
-									</SelectContent>
-								</Select>
-							</div>
-							<div className="flex flex-col md:grid md:grid-cols-2 gap-3 md:gap-4">
-								<div className="space-y-2">
-									<Label htmlFor="max-uses">Max uses (optional)</Label>
-									<Input
-										id="max-uses"
-										type="number"
-										min="1"
-										placeholder="Unlimited"
-										value={maxUses}
-										onChange={(e) => setMaxUses(e.target.value)}
-									/>
-								</div>
-								<div className="space-y-2">
-									<Label>Expires on (optional)</Label>
-									<Popover>
-										<PopoverTrigger asChild>
-											<Button
-												variant="outline"
-												className={cn(
-													"w-full justify-start text-left font-normal bg-transparent border-popover-border",
-													!expiresAt && "text-muted-foreground"
-												)}
-											>
-												<Calendar className="mr-2 h-4 w-4" />
-												{expiresAt ? expiresAt.toLocaleDateString() : "Never"}
-											</Button>
-										</PopoverTrigger>
-										<PopoverContent className="w-auto p-0" align="start">
-											<CalendarComponent
-												mode="single"
-												selected={expiresAt}
-												onSelect={setExpiresAt}
-												disabled={(date) => date < new Date()}
-												initialFocus
-											/>
-										</PopoverContent>
-									</Popover>
-								</div>
-							</div>
-						</div>
-						<DialogFooter>
-							<Button variant="secondary" onClick={handleClose}>
-								Cancel
-							</Button>
-							<Button onClick={handleCreate} disabled={creating}>
-								{creating ? (
-									<>
-										<Spinner size="sm" className="mr-2" />
-										Creating
-									</>
-								) : (
-									"Create Invite"
-								)}
-							</Button>
-						</DialogFooter>
-					</>
-				)}
-			</DialogContent>
-		</Dialog>
-	);
-}
-
-function AllInvitesDialog({
-	invites,
-	onRevokeInvite,
-}: {
-	invites: Invite[];
-	onRevokeInvite: (inviteId: number) => Promise<boolean>;
-}) {
-	const [copiedId, setCopiedId] = useState<number | null>(null);
-
-	const copyLink = (invite: Invite) => {
-		const link = `${window.location.origin}/invite/${invite.invite_code}`;
-		navigator.clipboard.writeText(link);
-		setCopiedId(invite.id);
-		toast.success("Invite link copied");
-		setTimeout(() => setCopiedId(null), 2000);
-	};
-
-	return (
-		<Dialog>
-			<DialogTrigger asChild>
-				<Button
-					variant="ghost"
-					size="sm"
-					className="gap-1.5 md:gap-2 rounded-md bg-muted px-3 text-xs md:text-sm hover:bg-accent"
-				>
-					<Link2 className="h-3.5 w-3.5 md:h-4 md:w-4 rotate-315" />
-					Active invites
-					<span className="inline-flex items-center justify-center h-4 md:h-5 min-w-4 md:min-w-5 px-1 rounded-full bg-neutral-700 text-neutral-200 text-[10px] md:text-xs font-medium">
-						{invites.length}
-					</span>
-				</Button>
-			</DialogTrigger>
-			<DialogContent className="w-[92vw] max-w-[92vw] sm:max-w-lg p-4 md:p-6 select-none">
-				<DialogHeader>
-					<DialogTitle className="flex items-center gap-2">Active Invite Links</DialogTitle>
-					<DialogDescription>
-						{invites.length} active {invites.length === 1 ? "invite" : "invites"}. Copy a link or
-						revoke access.
-					</DialogDescription>
-				</DialogHeader>
-				<div className="max-h-[320px] overflow-y-auto -mx-1 px-1 space-y-3 py-2">
-					{invites.map((invite) => (
-						<div key={invite.id} className="rounded-lg border border-border/40 p-3 space-y-2.5">
-							<div className="flex items-center justify-between gap-2">
-								<div className="flex items-center gap-2 min-w-0">
-									<p className="text-sm font-medium truncate">{invite.name || "Unnamed invite"}</p>
-									<div className="flex flex-wrap gap-x-2 text-xs text-muted-foreground shrink-0">
-										{invite.role?.name && (
-											<span className="rounded bg-muted px-1.5 py-0.5">{invite.role.name}</span>
-										)}
-										{invite.max_uses != null && (
-											<span className="flex items-center gap-1 rounded bg-muted px-1.5 py-0.5">
-												<Hash className="h-3 w-3" />
-												{invite.uses_count}/{invite.max_uses}
-											</span>
-										)}
-										{invite.expires_at && (
-											<span className="flex items-center gap-1 rounded bg-muted px-1.5 py-0.5">
-												<Clock className="h-3 w-3" />
-												{new Date(invite.expires_at).toLocaleDateString()}
-											</span>
-										)}
-									</div>
-								</div>
-								<AlertDialog>
-									<AlertDialogTrigger asChild>
-										<Button
-											variant="ghost"
-											size="icon"
-											className="h-7 w-7 shrink-0 text-muted-foreground hover:text-destructive"
-										>
-											<Trash2 className="h-3.5 w-3.5" />
-										</Button>
-									</AlertDialogTrigger>
-									<AlertDialogContent>
-										<AlertDialogHeader>
-											<AlertDialogTitle>Revoke invite?</AlertDialogTitle>
-											<AlertDialogDescription>
-												This will permanently delete this invite link. Anyone with this link will no
-												longer be able to join.
-											</AlertDialogDescription>
-										</AlertDialogHeader>
-										<AlertDialogFooter>
-											<AlertDialogCancel>Cancel</AlertDialogCancel>
-											<AlertDialogAction
-												onClick={() => onRevokeInvite(invite.id)}
-												className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-											>
-												Revoke
-											</AlertDialogAction>
-										</AlertDialogFooter>
-									</AlertDialogContent>
-								</AlertDialog>
-							</div>
-							<div className="flex items-center gap-2 rounded-md bg-muted p-2">
-								<div className="flex-1 min-w-0 overflow-x-auto scrollbar-hide">
-									<code className="text-sm select-all whitespace-nowrap">
-										{typeof window !== "undefined"
-											? `${window.location.origin}/invite/${invite.invite_code}`
-											: `/invite/${invite.invite_code}`}
-									</code>
-								</div>
-								<Button
-									variant="ghost"
-									size="sm"
-									className="shrink-0"
-									onClick={() => copyLink(invite)}
-								>
-									{copiedId === invite.id ? (
-										<Check className="h-4 w-4" />
-									) : (
-										<Copy className="h-4 w-4" />
-									)}
-								</Button>
-							</div>
-						</div>
-					))}
-				</div>
-			</DialogContent>
-		</Dialog>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/agent-permissions/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/agent-permissions/page.tsx
deleted file mode 100644
index 2b925bd29..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/agent-permissions/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { AgentPermissionsContent } from "../components/AgentPermissionsContent";
-
-export default function Page() {
-	return <AgentPermissionsContent />;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/agent-status/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/agent-status/page.tsx
deleted file mode 100644
index dc5c61d2a..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/agent-status/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { AgentStatusContent } from "../components/AgentStatusContent";
-
-export default function Page() {
-	return <AgentStatusContent />;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/api-key/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/api-key/page.tsx
deleted file mode 100644
index e59e50042..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/api-key/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { ApiKeyContent } from "../components/ApiKeyContent";
-
-export default function Page() {
-	return <ApiKeyContent />;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/community-prompts/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/community-prompts/page.tsx
deleted file mode 100644
index e962cbed2..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/community-prompts/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { CommunityPromptsContent } from "../components/CommunityPromptsContent";
-
-export default function Page() {
-	return <CommunityPromptsContent />;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentPermissionsContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentPermissionsContent.tsx
deleted file mode 100644
index 5919abcd6..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentPermissionsContent.tsx
+++ /dev/null
@@ -1,487 +0,0 @@
-"use client";
-
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useAtomValue } from "jotai";
-import { AlertTriangle, Info, ShieldCheck, Trash2 } from "lucide-react";
-import { useCallback, useMemo, useState } from "react";
-import { toast } from "sonner";
-import { agentFlagsAtom } from "@/atoms/agent/agent-flags-query.atom";
-import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Spinner } from "@/components/ui/spinner";
-import {
-	type AgentPermissionAction,
-	type AgentPermissionRule,
-	type AgentPermissionRuleCreate,
-	agentPermissionsApiService,
-} from "@/lib/apis/agent-permissions-api.service";
-import { AppError } from "@/lib/error";
-import { formatRelativeDate } from "@/lib/format-date";
-import { cn } from "@/lib/utils";
-
-const ACTION_DESCRIPTIONS: Record<AgentPermissionAction, string> = {
-	allow: "Always run without prompting",
-	deny: "Block silently",
-	ask: "Pause and ask for approval",
-};
-
-const ACTION_BADGE: Record<AgentPermissionAction, { label: string; className: string }> = {
-	allow: { label: "Allow", className: "bg-emerald-500/10 text-emerald-600 border-emerald-500/30" },
-	deny: { label: "Deny", className: "bg-destructive/10 text-destructive border-destructive/30" },
-	ask: { label: "Ask", className: "bg-amber-500/10 text-amber-600 border-amber-500/30" },
-};
-
-const EMPTY_FORM: AgentPermissionRuleCreate = {
-	permission: "",
-	pattern: "*",
-	action: "ask",
-	user_id: null,
-	thread_id: null,
-};
-
-function permissionRulesQueryKey(searchSpaceId: number) {
-	return ["agent-permission-rules", searchSpaceId] as const;
-}
-
-function ScopeBadge({ rule }: { rule: AgentPermissionRule }) {
-	if (rule.thread_id !== null) {
-		return (
-			<Badge
-				variant="secondary"
-				className="text-[10px] px-1.5 py-0.5 border-0 text-muted-foreground bg-muted"
-			>
-				Thread #{rule.thread_id}
-			</Badge>
-		);
-	}
-	if (rule.user_id !== null) {
-		return (
-			<Badge
-				variant="secondary"
-				className="text-[10px] px-1.5 py-0.5 border-0 text-muted-foreground bg-muted"
-			>
-				User-specific
-			</Badge>
-		);
-	}
-	return (
-		<Badge
-			variant="secondary"
-			className="text-[10px] px-1.5 py-0.5 border-0 text-muted-foreground bg-muted"
-		>
-			Search space
-		</Badge>
-	);
-}
-
-export function AgentPermissionsContent() {
-	const searchSpaceIdRaw = useAtomValue(activeSearchSpaceIdAtom);
-	const searchSpaceId = searchSpaceIdRaw ? Number(searchSpaceIdRaw) : null;
-
-	const { data: flags } = useAtomValue(agentFlagsAtom);
-	const featureEnabled = !!flags?.enable_permission && !flags?.disable_new_agent_stack;
-
-	const queryClient = useQueryClient();
-
-	const {
-		data: rules,
-		isLoading,
-		isError,
-		error,
-	} = useQuery({
-		queryKey: searchSpaceId
-			? permissionRulesQueryKey(searchSpaceId)
-			: ["agent-permission-rules", "none"],
-		queryFn: () => agentPermissionsApiService.list(searchSpaceId as number),
-		enabled: !!searchSpaceId && featureEnabled,
-		staleTime: 60 * 1000,
-	});
-
-	const createMutation = useMutation({
-		mutationFn: (payload: AgentPermissionRuleCreate) =>
-			agentPermissionsApiService.create(searchSpaceId as number, payload),
-		onSuccess: () => {
-			toast.success("Rule created.");
-			queryClient.invalidateQueries({
-				queryKey: permissionRulesQueryKey(searchSpaceId as number),
-			});
-		},
-		onError: (err: unknown) => {
-			toast.error(err instanceof Error ? err.message : "Failed to create rule.");
-		},
-	});
-
-	const updateMutation = useMutation({
-		mutationFn: (params: { ruleId: number; action: AgentPermissionAction; pattern?: string }) =>
-			agentPermissionsApiService.update(searchSpaceId as number, params.ruleId, {
-				action: params.action,
-				pattern: params.pattern,
-			}),
-		onSuccess: () => {
-			queryClient.invalidateQueries({
-				queryKey: permissionRulesQueryKey(searchSpaceId as number),
-			});
-		},
-		onError: (err: unknown) => {
-			toast.error(err instanceof Error ? err.message : "Failed to update rule.");
-		},
-	});
-
-	const deleteMutation = useMutation({
-		mutationFn: (ruleId: number) =>
-			agentPermissionsApiService.remove(searchSpaceId as number, ruleId),
-		onSuccess: () => {
-			toast.success("Rule deleted.");
-			queryClient.invalidateQueries({
-				queryKey: permissionRulesQueryKey(searchSpaceId as number),
-			});
-		},
-		onError: (err: unknown) => {
-			toast.error(err instanceof Error ? err.message : "Failed to delete rule.");
-		},
-	});
-
-	const [showForm, setShowForm] = useState(false);
-	const [formData, setFormData] = useState<AgentPermissionRuleCreate>(EMPTY_FORM);
-	const [deleteTarget, setDeleteTarget] = useState<number | null>(null);
-
-	const sortedRules = useMemo(() => rules ?? [], [rules]);
-
-	const handleCreate = useCallback(async () => {
-		if (!formData.permission.trim()) {
-			toast.error("Permission is required.");
-			return;
-		}
-		try {
-			await createMutation.mutateAsync({
-				...formData,
-				permission: formData.permission.trim(),
-				pattern: formData.pattern.trim() || "*",
-			});
-			setFormData(EMPTY_FORM);
-			setShowForm(false);
-		} catch (err) {
-			if (err instanceof AppError && err.message) {
-				// already toasted by onError
-			}
-		}
-	}, [createMutation, formData]);
-
-	const handleConfirmDelete = useCallback(async () => {
-		if (deleteTarget === null) return;
-		try {
-			await deleteMutation.mutateAsync(deleteTarget);
-		} finally {
-			setDeleteTarget(null);
-		}
-	}, [deleteMutation, deleteTarget]);
-
-	if (!featureEnabled) {
-		return (
-			<Alert>
-				<Info />
-				<AlertTitle>Permission middleware is disabled</AlertTitle>
-				<AlertDescription>
-					<p>
-						Flip{" "}
-						<code className="rounded bg-popover px-1 py-0.5 text-[10px] text-popover-foreground">
-							SURFSENSE_ENABLE_PERMISSION
-						</code>{" "}
-						on the backend to manage allow/deny/ask rules from this panel.
-					</p>
-				</AlertDescription>
-			</Alert>
-		);
-	}
-
-	if (!searchSpaceId) {
-		return (
-			<p className="text-sm text-muted-foreground">Open a search space to manage agent rules.</p>
-		);
-	}
-
-	return (
-		<div className="min-w-0 space-y-6 overflow-visible">
-			<div className="flex items-start justify-between gap-3">
-				<div className="space-y-1">
-					<p className="text-sm text-muted-foreground">
-						Tell the agent which tools to allow, deny, or ask before running. Rules use wildcard
-						patterns and are evaluated at the most specific scope first.
-					</p>
-				</div>
-				<Button
-					size="sm"
-					onClick={() => {
-						setShowForm(true);
-						setFormData(EMPTY_FORM);
-					}}
-					className="shrink-0 gap-1.5"
-				>
-					New rule
-				</Button>
-			</div>
-
-			<Dialog
-				open={showForm}
-				onOpenChange={(open) => {
-					setShowForm(open);
-					if (!open) setFormData(EMPTY_FORM);
-				}}
-			>
-				<DialogContent className="max-w-lg bg-popover text-popover-foreground">
-					<DialogHeader>
-						<DialogTitle>New permission rule</DialogTitle>
-						<DialogDescription>
-							Tell the agent whether matching tool calls should be allowed, denied, or paused for
-							approval.
-						</DialogDescription>
-					</DialogHeader>
-
-					<div className="space-y-4">
-						<div className="grid gap-3">
-							<div className="space-y-2">
-								<Label htmlFor="permission-name">Permission</Label>
-								<Input
-									id="permission-name"
-									value={formData.permission}
-									placeholder="e.g. tool:create_linear_issue or tool:*"
-									onChange={(e) => setFormData((p) => ({ ...p, permission: e.target.value }))}
-								/>
-								<p className="text-[11px] text-muted-foreground">
-									Match a tool capability. Use <code className="font-mono">*</code> for wildcards.
-								</p>
-							</div>
-
-							<div className="space-y-2">
-								<Label htmlFor="pattern">Argument pattern</Label>
-								<Input
-									id="pattern"
-									value={formData.pattern}
-									placeholder="*"
-									onChange={(e) => setFormData((p) => ({ ...p, pattern: e.target.value }))}
-								/>
-								<p className="text-[11px] text-muted-foreground">
-									Wildcard against the canonical argument (e.g. <code>prod-*</code>).
-								</p>
-							</div>
-						</div>
-
-						<div className="space-y-2">
-							<Label>Action</Label>
-							<Select
-								value={formData.action}
-								onValueChange={(value) =>
-									setFormData((p) => ({ ...p, action: value as AgentPermissionAction }))
-								}
-							>
-								<SelectTrigger>
-									<SelectValue />
-								</SelectTrigger>
-								<SelectContent>
-									<SelectItem value="allow">Allow (run without asking)</SelectItem>
-									<SelectItem value="ask">Ask (pause for approval)</SelectItem>
-									<SelectItem value="deny">Deny (block silently)</SelectItem>
-								</SelectContent>
-							</Select>
-							<p className="text-[11px] text-muted-foreground">
-								{ACTION_DESCRIPTIONS[formData.action]}
-							</p>
-						</div>
-					</div>
-
-					<DialogFooter>
-						<Button
-							type="button"
-							variant="secondary"
-							size="sm"
-							onClick={() => {
-								setShowForm(false);
-								setFormData(EMPTY_FORM);
-							}}
-							disabled={createMutation.isPending}
-							className="text-sm h-9"
-						>
-							Cancel
-						</Button>
-						<Button
-							size="sm"
-							onClick={handleCreate}
-							disabled={createMutation.isPending || !formData.permission.trim()}
-							className="relative text-sm h-9 min-w-[96px]"
-						>
-							<span className={createMutation.isPending ? "opacity-0" : ""}>Create</span>
-							{createMutation.isPending && <Spinner size="sm" className="absolute" />}
-						</Button>
-					</DialogFooter>
-				</DialogContent>
-			</Dialog>
-
-			{isLoading && (
-				<div className="-m-1 space-y-2 p-1">
-					{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
-						<Card key={key} className="border-accent bg-accent/20">
-							<CardContent className="p-4 flex flex-col gap-3 min-h-24">
-								<Skeleton className="h-4 w-32 md:w-40 bg-accent" />
-								<Skeleton className="h-3 w-full bg-accent" />
-								<Skeleton className="h-3 w-24 md:w-28 bg-accent mt-auto" />
-							</CardContent>
-						</Card>
-					))}
-				</div>
-			)}
-
-			{isError && (
-				<Alert variant="destructive">
-					<AlertTriangle />
-					<AlertTitle>Failed to load rules</AlertTitle>
-					<AlertDescription>
-						{error instanceof Error ? error.message : "Unknown error."}
-					</AlertDescription>
-				</Alert>
-			)}
-
-			{!isLoading && !isError && sortedRules.length === 0 && !showForm && (
-				<div className="rounded-lg border border-dashed border-border/60 p-8 text-center">
-					<ShieldCheck className="mx-auto size-8 text-muted-foreground/40" />
-					<p className="mt-2 text-sm text-muted-foreground">No rules yet</p>
-					<p className="text-xs text-muted-foreground/60">
-						Without rules the agent uses the deployment default for every tool.
-					</p>
-				</div>
-			)}
-
-			{!isLoading && !isError && sortedRules.length > 0 && (
-				<div className="-m-1 space-y-2 p-1">
-					{sortedRules.map((rule) => {
-						const badge = ACTION_BADGE[rule.action];
-						const isUpdating =
-							updateMutation.isPending && updateMutation.variables?.ruleId === rule.id;
-						const isDeleting = deleteMutation.isPending && deleteMutation.variables === rule.id;
-
-						return (
-							<Card
-								key={rule.id}
-								className="group relative overflow-hidden transition-all duration-200 border-accent bg-accent/20 hover:shadow-md h-full"
-							>
-								<CardContent className="p-4 flex items-center justify-between gap-3 h-full">
-									<div className="flex min-w-0 flex-1 flex-col gap-1.5">
-										<div className="flex flex-wrap items-center gap-1.5">
-											<code className="truncate font-mono text-sm font-medium text-foreground">
-												{rule.permission}
-											</code>
-											{rule.pattern !== "*" && (
-												<span className="text-xs text-muted-foreground">
-													→ <code className="font-mono">{rule.pattern}</code>
-												</span>
-											)}
-											<ScopeBadge rule={rule} />
-										</div>
-										<p className="text-[11px] text-muted-foreground">
-											Created {formatRelativeDate(rule.created_at)}
-										</p>
-									</div>
-
-									<div className="flex shrink-0 items-center self-center gap-1">
-										<Select
-											value={rule.action}
-											onValueChange={(value) =>
-												updateMutation.mutate({
-													ruleId: rule.id,
-													action: value as AgentPermissionAction,
-												})
-											}
-											disabled={isUpdating || isDeleting}
-										>
-											<SelectTrigger
-												className={cn("h-8 gap-1 border px-2 text-[11px]", badge.className)}
-											>
-												<SelectValue>
-													<span className="flex items-center gap-1">{badge.label}</span>
-												</SelectValue>
-											</SelectTrigger>
-											<SelectContent>
-												<SelectItem value="allow">Allow</SelectItem>
-												<SelectItem value="ask">Ask</SelectItem>
-												<SelectItem value="deny">Deny</SelectItem>
-											</SelectContent>
-										</Select>
-
-										<Button
-											size="sm"
-											variant="ghost"
-											className="h-7 w-7 rounded-lg p-0 text-muted-foreground hover:text-destructive"
-											onClick={() => setDeleteTarget(rule.id)}
-											disabled={isUpdating || isDeleting}
-											aria-label="Delete rule"
-										>
-											<Trash2 className="size-3.5" />
-										</Button>
-									</div>
-								</CardContent>
-							</Card>
-						);
-					})}
-				</div>
-			)}
-
-			<AlertDialog
-				open={deleteTarget !== null}
-				onOpenChange={(open) => !open && setDeleteTarget(null)}
-			>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle>Delete this rule?</AlertDialogTitle>
-						<AlertDialogDescription>
-							The agent will fall back to deployment defaults for matching tool calls.
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<AlertDialogFooter>
-						<AlertDialogCancel disabled={deleteMutation.isPending}>Cancel</AlertDialogCancel>
-						<AlertDialogAction
-							onClick={(e) => {
-								e.preventDefault();
-								handleConfirmDelete();
-							}}
-							disabled={deleteMutation.isPending}
-							className="relative min-w-[88px]"
-						>
-							<span className={deleteMutation.isPending ? "opacity-0" : ""}>Delete</span>
-							{deleteMutation.isPending && <Spinner size="sm" className="absolute" />}
-						</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentStatusContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentStatusContent.tsx
deleted file mode 100644
index bc31dffed..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentStatusContent.tsx
+++ /dev/null
@@ -1,321 +0,0 @@
-"use client";
-
-import { useAtomValue } from "jotai";
-import { AlertTriangle, CircleCheck, CircleSlash, Info } from "lucide-react";
-import { Fragment, useMemo } from "react";
-import { agentFlagsAtom } from "@/atoms/agent/agent-flags-query.atom";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
-import { Separator } from "@/components/ui/separator";
-import { Skeleton } from "@/components/ui/skeleton";
-import type { AgentFeatureFlags } from "@/lib/apis/agent-flags-api.service";
-import { cn } from "@/lib/utils";
-
-type FlagKey = keyof AgentFeatureFlags;
-
-interface FlagDef {
-	key: FlagKey;
-	label: string;
-	description: string;
-	envVar: string;
-}
-
-interface FlagGroup {
-	id: string;
-	title: string;
-	subtitle: string;
-	flags: FlagDef[];
-}
-
-const FLAG_GROUPS: FlagGroup[] = [
-	{
-		id: "tier1",
-		title: "Tier 1 — Agent quality",
-		subtitle: "Context editing, retries, fallbacks, doom-loop, tool-call repair.",
-		flags: [
-			{
-				key: "enable_context_editing",
-				label: "Context editing",
-				description: "Trim tool outputs and spill old text into backend storage.",
-				envVar: "SURFSENSE_ENABLE_CONTEXT_EDITING",
-			},
-			{
-				key: "enable_compaction_v2",
-				label: "Compaction v2",
-				description: "SurfSense-aware compaction replacing safe summarization.",
-				envVar: "SURFSENSE_ENABLE_COMPACTION_V2",
-			},
-			{
-				key: "enable_retry_after",
-				label: "Retry-After",
-				description: "Honour rate-limit retry-after headers automatically.",
-				envVar: "SURFSENSE_ENABLE_RETRY_AFTER",
-			},
-			{
-				key: "enable_model_fallback",
-				label: "Model fallback",
-				description: "Fail over to a backup model on persistent errors.",
-				envVar: "SURFSENSE_ENABLE_MODEL_FALLBACK",
-			},
-			{
-				key: "enable_model_call_limit",
-				label: "Model call limit",
-				description: "Cap total model calls per turn to prevent budget run-aways.",
-				envVar: "SURFSENSE_ENABLE_MODEL_CALL_LIMIT",
-			},
-			{
-				key: "enable_tool_call_limit",
-				label: "Tool call limit",
-				description: "Cap total tool calls per turn.",
-				envVar: "SURFSENSE_ENABLE_TOOL_CALL_LIMIT",
-			},
-			{
-				key: "enable_tool_call_repair",
-				label: "Tool-call name repair",
-				description: "Recover from lower-cased / fuzzy tool names emitted by smaller models.",
-				envVar: "SURFSENSE_ENABLE_TOOL_CALL_REPAIR",
-			},
-			{
-				key: "enable_doom_loop",
-				label: "Doom-loop detection",
-				description: "Detect repeated identical tool calls and ask the user to confirm.",
-				envVar: "SURFSENSE_ENABLE_DOOM_LOOP",
-			},
-		],
-	},
-	{
-		id: "tier2",
-		title: "Tier 2 — Safety",
-		subtitle: "Permission rules, busy-mutex, smarter tool selection.",
-		flags: [
-			{
-				key: "enable_permission",
-				label: "Permission middleware",
-				description: "Apply allow/deny/ask rules from the Agent Permissions tab.",
-				envVar: "SURFSENSE_ENABLE_PERMISSION",
-			},
-			{
-				key: "enable_busy_mutex",
-				label: "Busy mutex",
-				description: "Prevent two concurrent runs from corrupting the same thread.",
-				envVar: "SURFSENSE_ENABLE_BUSY_MUTEX",
-			},
-			{
-				key: "enable_llm_tool_selector",
-				label: "LLM tool selector",
-				description: "Use a smaller model to pre-filter the tool list per turn.",
-				envVar: "SURFSENSE_ENABLE_LLM_TOOL_SELECTOR",
-			},
-		],
-	},
-	{
-		id: "tier4",
-		title: "Tier 4 — Skills + subagents",
-		subtitle: "Built-in skills, specialized subagents, KB planner runnable.",
-		flags: [
-			{
-				key: "enable_skills",
-				label: "Skills",
-				description: "Load on-demand skill packs (kb-research, report-writing, …).",
-				envVar: "SURFSENSE_ENABLE_SKILLS",
-			},
-			{
-				key: "enable_specialized_subagents",
-				label: "Specialized subagents",
-				description: "Spin up explore / report_writer / connector_negotiator subagents.",
-				envVar: "SURFSENSE_ENABLE_SPECIALIZED_SUBAGENTS",
-			},
-		],
-	},
-	{
-		id: "tier5",
-		title: "Tier 5 — Audit + revert",
-		subtitle: "Action log + revert route used by the Agent Actions dialog.",
-		flags: [
-			{
-				key: "enable_action_log",
-				label: "Action log",
-				description: "Persist every tool call to agent_action_log.",
-				envVar: "SURFSENSE_ENABLE_ACTION_LOG",
-			},
-			{
-				key: "enable_revert_route",
-				label: "Revert route",
-				description: "Allow reverting reversible actions from the action log.",
-				envVar: "SURFSENSE_ENABLE_REVERT_ROUTE",
-			},
-		],
-	},
-	{
-		id: "tier6",
-		title: "Tier 6 — Plugins",
-		subtitle: "Optional middleware loaded from entry points.",
-		flags: [
-			{
-				key: "enable_plugin_loader",
-				label: "Plugin loader",
-				description: "Load surfsense.plugins entry-point middleware.",
-				envVar: "SURFSENSE_ENABLE_PLUGIN_LOADER",
-			},
-		],
-	},
-	{
-		id: "obs",
-		title: "Observability",
-		subtitle: "Telemetry pipelines (orthogonal to feature gating).",
-		flags: [
-			{
-				key: "enable_otel",
-				label: "OpenTelemetry",
-				description: "Emit OTel spans (also requires OTEL_EXPORTER_OTLP_ENDPOINT).",
-				envVar: "SURFSENSE_ENABLE_OTEL",
-			},
-		],
-	},
-	{
-		id: "desktop",
-		title: "Desktop",
-		subtitle: "Desktop-only capabilities exposed by the backend deployment.",
-		flags: [
-			{
-				key: "enable_desktop_local_filesystem",
-				label: "Local filesystem",
-				description: "Allow Desktop chat sessions to operate directly on selected local folders.",
-				envVar: "ENABLE_DESKTOP_LOCAL_FILESYSTEM",
-			},
-		],
-	},
-];
-
-function FlagRow({ def, value }: { def: FlagDef; value: boolean }) {
-	return (
-		<div className="flex items-start justify-between gap-4 py-3">
-			<div className="flex min-w-0 flex-1 flex-col gap-1">
-				<div className="flex flex-wrap items-center gap-2">
-					<span className="text-sm font-medium">{def.label}</span>
-					<code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
-						{def.envVar}
-					</code>
-				</div>
-				<p className="text-xs text-muted-foreground">{def.description}</p>
-			</div>
-			<Badge
-				variant={value ? "default" : "secondary"}
-				className={cn(
-					"shrink-0 gap-1",
-					value
-						? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600"
-						: "text-muted-foreground"
-				)}
-			>
-				{value ? <CircleCheck className="size-3" /> : <CircleSlash className="size-3" />}
-				{value ? "On" : "Off"}
-			</Badge>
-		</div>
-	);
-}
-
-export function AgentStatusContent() {
-	const { data: flags, isLoading, isError, error } = useAtomValue(agentFlagsAtom);
-
-	const enabledCount = useMemo(() => {
-		if (!flags) return 0;
-		return Object.entries(flags).filter(([k, v]) => k !== "disable_new_agent_stack" && v === true)
-			.length;
-	}, [flags]);
-
-	if (isLoading) {
-		return (
-			<div className="flex flex-col gap-3">
-				<Skeleton className="h-12 w-full rounded-md" />
-				<Skeleton className="h-32 w-full rounded-md" />
-				<Skeleton className="h-32 w-full rounded-md" />
-			</div>
-		);
-	}
-
-	if (isError || !flags) {
-		return (
-			<Alert variant="destructive">
-				<AlertTriangle />
-				<AlertTitle>Failed to load agent status</AlertTitle>
-				<AlertDescription>
-					{error instanceof Error ? error.message : "Unknown error."}
-				</AlertDescription>
-			</Alert>
-		);
-	}
-
-	const masterOff = flags.disable_new_agent_stack;
-
-	return (
-		<div className="space-y-6">
-			{masterOff ? (
-				<Alert variant="destructive">
-					<AlertTriangle />
-					<AlertTitle>Master kill-switch is on</AlertTitle>
-					<AlertDescription>
-						<p>
-							Showing that{" "}
-							<code className="rounded bg-muted px-1 text-[10px]">
-								SURFSENSE_DISABLE_NEW_AGENT_STACK=true
-							</code>
-							, which forces every new middleware off, regardless of the individual flags below.
-							Restart the backend after changing it.
-						</p>
-					</AlertDescription>
-				</Alert>
-			) : (
-				<Alert>
-					<Info />
-					<AlertTitle className="flex items-center gap-2">
-						Agent stack
-						<Badge
-							variant="secondary"
-							className="rounded bg-popover px-1 py-0.5 text-[9px] text-popover-foreground"
-						>
-							{enabledCount} on
-						</Badge>
-					</AlertTitle>
-					<AlertDescription>
-						<p>
-							Showing a read-only mirror of the backend's <code>AgentFeatureFlags</code>. Flip an
-							env var and restart the backend to change a value.
-						</p>
-					</AlertDescription>
-				</Alert>
-			)}
-
-			{FLAG_GROUPS.map((group, groupIdx) => {
-				const allOff = group.flags.every((f) => !flags[f.key]);
-				return (
-					<div key={group.id}>
-						{groupIdx > 0 && <Separator className="my-4 bg-border" />}
-						<div className="rounded-lg border border-border/60 bg-card">
-							<div className="flex items-start justify-between gap-3 px-4 py-3">
-								<div>
-									<p className="text-sm font-semibold">{group.title}</p>
-									<p className="text-xs text-muted-foreground">{group.subtitle}</p>
-								</div>
-								{allOff && (
-									<Badge variant="outline" className="text-[10px] text-muted-foreground">
-										all off
-									</Badge>
-								)}
-							</div>
-							<Separator className="bg-border" />
-							<div className="px-4">
-								{group.flags.map((def, flagIdx) => (
-									<Fragment key={def.key}>
-										{flagIdx > 0 && <Separator className="bg-border" />}
-										<FlagRow def={def} value={flags[def.key]} />
-									</Fragment>
-								))}
-							</div>
-						</div>
-					</div>
-				);
-			})}
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent.tsx
deleted file mode 100644
index 8f0af894f..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent.tsx
+++ /dev/null
@@ -1,278 +0,0 @@
-"use client";
-
-import { Check, Copy, Info, Trash2 } from "lucide-react";
-import { useCallback, useMemo, useState } from "react";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Spinner } from "@/components/ui/spinner";
-import { usePats } from "@/hooks/use-pats";
-import { copyToClipboard as copyToClipboardUtil } from "@/lib/utils";
-
-export function ApiKeyContent() {
-	const { tokens, createdToken, setCreatedToken, isLoading, isMutating, createToken, deleteToken } =
-		usePats();
-	const [createOpen, setCreateOpen] = useState(false);
-	const [label, setLabel] = useState("");
-	const [expiresInDays, setExpiresInDays] = useState("");
-	const [copiedToken, setCopiedToken] = useState(false);
-	const [deleteTarget, setDeleteTarget] = useState<{ id: number; label: string } | null>(null);
-
-	const sortedTokens = useMemo(() => tokens, [tokens]);
-
-	const handleCreate = useCallback(async () => {
-		const trimmedLabel = label.trim();
-		if (!trimmedLabel) return;
-
-		await createToken({
-			label: trimmedLabel,
-			expires_in_days: expiresInDays ? Number(expiresInDays) : null,
-		});
-		setLabel("");
-		setExpiresInDays("");
-		setCreateOpen(false);
-	}, [createToken, expiresInDays, label]);
-
-	const copyCreatedToken = useCallback(async () => {
-		if (!createdToken) return;
-		const success = await copyToClipboardUtil(createdToken.token);
-		if (success) {
-			setCopiedToken(true);
-			setTimeout(() => setCopiedToken(false), 2000);
-		}
-	}, [createdToken]);
-
-	const handleConfirmDelete = useCallback(async () => {
-		if (!deleteTarget) return;
-
-		await deleteToken(deleteTarget.id);
-		setDeleteTarget(null);
-	}, [deleteTarget, deleteToken]);
-
-	return (
-		<div className="space-y-6 min-w-0">
-			<Alert>
-				<Info />
-				<AlertDescription>
-					API keys let extensions, Obsidian, and other apps connect to SurfSense.
-				</AlertDescription>
-			</Alert>
-
-			<div className="flex items-center justify-between gap-3">
-				<div>
-					<h3 className="text-sm font-semibold tracking-tight">API keys</h3>
-					<p className="text-xs text-muted-foreground">
-						Expired API keys stay listed until you delete them.
-					</p>
-				</div>
-				<Button size="sm" onClick={() => setCreateOpen(true)}>
-					Create API key
-				</Button>
-			</div>
-
-			{isLoading ? (
-				<div className="-m-1 grid grid-cols-1 gap-3 p-1">
-					{["skeleton-a", "skeleton-b"].map((key) => (
-						<Card
-							key={key}
-							className="group relative overflow-hidden transition-all duration-200 border-accent bg-accent/20 hover:shadow-md h-full"
-						>
-							<CardContent className="p-4 flex flex-col gap-3 h-full min-h-24">
-								<Skeleton className="h-4 w-32 md:w-40 bg-accent" />
-								<Skeleton className="h-3 w-full bg-accent" />
-								<Skeleton className="h-3 w-24 md:w-28 bg-accent" />
-							</CardContent>
-						</Card>
-					))}
-				</div>
-			) : sortedTokens.length > 0 ? (
-				<div className="-m-1 grid grid-cols-1 gap-3 p-1">
-					{sortedTokens.map((token) => {
-						const expiresAt = token.expires_at ? new Date(token.expires_at) : null;
-						const isExpired = expiresAt ? expiresAt.getTime() <= Date.now() : false;
-						return (
-							<Card
-								key={token.id}
-								className="group relative overflow-hidden transition-all duration-200 border-accent bg-accent/20 hover:shadow-md h-full"
-							>
-								<CardContent className="flex min-h-24 items-center gap-3 p-4">
-									<div className="min-w-0 flex-1">
-										<div className="flex flex-col gap-1">
-											<div className="flex items-center gap-2">
-												<h4 className="truncate text-sm font-semibold tracking-tight">
-													{token.label}
-												</h4>
-												{isExpired ? (
-													<span className="rounded-md border-0 bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
-														Expired
-													</span>
-												) : null}
-											</div>
-											<p className="truncate font-mono text-xs text-muted-foreground">
-												{token.prefix}...
-											</p>
-											<p className="text-xs text-muted-foreground">
-												Expires: {expiresAt ? expiresAt.toLocaleDateString() : "Never"} · Last used:{" "}
-												{token.last_used_at
-													? new Date(token.last_used_at).toLocaleString()
-													: "Never"}
-											</p>
-										</div>
-									</div>
-									<Button
-										variant="ghost"
-										size="icon"
-										disabled={isMutating}
-										onClick={() => setDeleteTarget({ id: token.id, label: token.label })}
-										className="h-7 w-7 shrink-0 rounded-lg text-muted-foreground transition-opacity duration-150 hover:text-accent-foreground sm:opacity-0 sm:pointer-events-none sm:group-hover:opacity-100 sm:group-hover:pointer-events-auto"
-									>
-										<Trash2 className="h-4 w-4" />
-									</Button>
-								</CardContent>
-							</Card>
-						);
-					})}
-				</div>
-			) : (
-				<p className="py-6 text-center text-sm text-muted-foreground">No API keys yet.</p>
-			)}
-
-			<Dialog open={createOpen} onOpenChange={setCreateOpen}>
-				<DialogContent>
-					<DialogHeader>
-						<DialogTitle>Create API key</DialogTitle>
-						<DialogDescription>
-							Name this API key so you can recognize where it is used later.
-						</DialogDescription>
-					</DialogHeader>
-					<div className="space-y-4">
-						<div className="space-y-2">
-							<Label htmlFor="pat-label">Name</Label>
-							<Input
-								id="pat-label"
-								value={label}
-								onChange={(event) => setLabel(event.target.value)}
-								placeholder="Obsidian vault"
-							/>
-						</div>
-						<div className="space-y-2">
-							<Label htmlFor="pat-expiry">Expires in days (optional)</Label>
-							<Input
-								id="pat-expiry"
-								type="number"
-								min={1}
-								value={expiresInDays}
-								onChange={(event) => setExpiresInDays(event.target.value)}
-								placeholder="Never expires"
-							/>
-						</div>
-					</div>
-					<DialogFooter>
-						<Button
-							type="button"
-							variant="secondary"
-							size="sm"
-							onClick={() => setCreateOpen(false)}
-							disabled={isMutating}
-							className="text-sm h-9"
-						>
-							Cancel
-						</Button>
-						<Button
-							size="sm"
-							disabled={isMutating || !label.trim()}
-							onClick={handleCreate}
-							className="relative text-sm h-9 min-w-[128px]"
-						>
-							<span className={isMutating ? "opacity-0" : ""}>Create API key</span>
-							{isMutating && <Spinner size="sm" className="absolute" />}
-						</Button>
-					</DialogFooter>
-				</DialogContent>
-			</Dialog>
-
-			<Dialog open={!!createdToken} onOpenChange={(open) => !open && setCreatedToken(null)}>
-				<DialogContent>
-					<DialogHeader>
-						<DialogTitle>Copy your API key now</DialogTitle>
-						<DialogDescription>
-							This API key is shown only once. Store it somewhere secure before closing this dialog.
-						</DialogDescription>
-					</DialogHeader>
-					<div className="flex items-center gap-2 rounded-md border border-border/60 bg-muted/30 p-2">
-						<code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap text-xs">
-							{createdToken?.token}
-						</code>
-						<Button
-							variant="outline"
-							size="sm"
-							onClick={copyCreatedToken}
-							className="border-0 bg-muted/30 hover:bg-muted/50"
-						>
-							{copiedToken ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-						</Button>
-					</div>
-					<DialogFooter>
-						<Button onClick={() => setCreatedToken(null)}>Done</Button>
-					</DialogFooter>
-				</DialogContent>
-			</Dialog>
-
-			<AlertDialog
-				open={deleteTarget !== null}
-				onOpenChange={(open) => !open && setDeleteTarget(null)}
-			>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle>Delete API key?</AlertDialogTitle>
-						<AlertDialogDescription>
-							<span className="font-medium text-foreground">{deleteTarget?.label}</span> will be
-							permanently removed. This cannot be undone.
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<AlertDialogFooter>
-						<AlertDialogCancel disabled={isMutating}>Cancel</AlertDialogCancel>
-						<AlertDialogAction
-							disabled={isMutating}
-							className="bg-destructive text-white hover:bg-destructive/90"
-							onClick={(event) => {
-								event.preventDefault();
-								void handleConfirmDelete();
-							}}
-						>
-							{isMutating ? (
-								<span className="inline-flex items-center gap-2">
-									<Spinner size="xs" />
-									Deleting...
-								</span>
-							) : (
-								"Delete"
-							)}
-						</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent.tsx
deleted file mode 100644
index f4454f343..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-"use client";
-
-import { useAtomValue } from "jotai";
-import { AlertTriangle, Copy, Library } from "lucide-react";
-import { useCallback, useState } from "react";
-import { copyPromptMutationAtom } from "@/atoms/prompts/prompts-mutation.atoms";
-import { publicPromptsAtom } from "@/atoms/prompts/prompts-query.atoms";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Spinner } from "@/components/ui/spinner";
-
-export function CommunityPromptsContent() {
-	const { data: prompts, isLoading, isError } = useAtomValue(publicPromptsAtom);
-	const { mutateAsync: copyPrompt } = useAtomValue(copyPromptMutationAtom);
-	const [copyingIds, setCopyingIds] = useState<Set<number>>(new Set());
-	const [expandedId, setExpandedId] = useState<number | null>(null);
-
-	const handleCopy = useCallback(
-		async (id: number) => {
-			setCopyingIds((prev) => new Set(prev).add(id));
-			try {
-				await copyPrompt(id);
-			} catch {
-				// toast handled by mutation atom
-			} finally {
-				setCopyingIds((prev) => {
-					const next = new Set(prev);
-					next.delete(id);
-					return next;
-				});
-			}
-		},
-		[copyPrompt]
-	);
-
-	const list = prompts ?? [];
-
-	return (
-		<div className="space-y-6 min-w-0">
-			<p className="text-sm text-muted-foreground">
-				Prompts shared by other users. Add any to your collection with one click.
-			</p>
-
-			{isLoading && (
-				<div className="-m-1 space-y-2 p-1">
-					{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
-						<Card key={key} className="border-accent bg-accent/20">
-							<CardContent className="p-4 flex flex-col gap-3 min-h-24">
-								<Skeleton className="h-4 w-32 md:w-40 bg-accent" />
-								<Skeleton className="h-3 w-full bg-accent" />
-								<Skeleton className="h-3 w-24 md:w-28 bg-accent mt-auto" />
-							</CardContent>
-						</Card>
-					))}
-				</div>
-			)}
-
-			{isError && (
-				<Alert variant="destructive">
-					<AlertTriangle />
-					<AlertTitle>Failed to load community prompts</AlertTitle>
-					<AlertDescription>Please try refreshing the page.</AlertDescription>
-				</Alert>
-			)}
-
-			{!isLoading && !isError && list.length === 0 && (
-				<div className="rounded-lg border border-dashed border-border/60 p-8 text-center">
-					<Library className="mx-auto size-8 text-muted-foreground" />
-					<p className="mt-2 text-sm text-muted-foreground">No community prompts yet</p>
-					<p className="text-xs text-muted-foreground/60">
-						Share your own prompts from the My Prompts tab
-					</p>
-				</div>
-			)}
-
-			{!isLoading && !isError && list.length > 0 && (
-				<div className="-m-1 space-y-2 p-1">
-					{list.map((prompt) => (
-						<Card
-							key={prompt.id}
-							className="group relative overflow-hidden transition-all duration-200 border-accent bg-accent/20 hover:shadow-md h-full"
-						>
-							<CardContent className="p-4 flex items-start gap-3 h-full">
-								<div className="flex-1 min-w-0">
-									<div className="flex items-center gap-2">
-										<span className="text-sm font-medium">{prompt.name}</span>
-										<span className="rounded-md border-0 bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
-											{prompt.mode}
-										</span>
-										{prompt.author_name && (
-											<span className="text-[11px] text-muted-foreground/60">
-												by {prompt.author_name}
-											</span>
-										)}
-									</div>
-									<p
-										className={`mt-1 text-xs text-muted-foreground ${expandedId === prompt.id ? "whitespace-pre-wrap" : "line-clamp-2"}`}
-									>
-										{prompt.prompt}
-									</p>
-									{prompt.prompt.length > 100 && (
-										<Button
-											type="button"
-											variant="link"
-											onClick={() => setExpandedId(expandedId === prompt.id ? null : prompt.id)}
-											className="mt-1 h-auto cursor-pointer px-0 py-0 text-[11px] text-primary"
-										>
-											{expandedId === prompt.id ? "See less" : "See more"}
-										</Button>
-									)}
-								</div>
-								<Button
-									variant="ghost"
-									size="sm"
-									className="h-7 shrink-0 gap-1.5 rounded-lg px-2 text-muted-foreground hover:text-accent-foreground"
-									disabled={copyingIds.has(prompt.id)}
-									onClick={() => handleCopy(prompt.id)}
-								>
-									{copyingIds.has(prompt.id) ? (
-										<Spinner className="size-3" />
-									) : (
-										<Copy className="size-3" />
-									)}
-									Add to mine
-								</Button>
-							</CardContent>
-						</Card>
-					))}
-				</div>
-			)}
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/DesktopContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/DesktopContent.tsx
deleted file mode 100644
index 97debca9d..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/DesktopContent.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
-import { Label } from "@/components/ui/label";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Switch } from "@/components/ui/switch";
-import type { SearchSpace } from "@/contracts/types/search-space.types";
-import { useElectronAPI } from "@/hooks/use-platform";
-import { searchSpacesApiService } from "@/lib/apis/search-spaces-api.service";
-
-export function DesktopContent() {
-	const api = useElectronAPI();
-	const [loading, setLoading] = useState(true);
-
-	const [searchSpaces, setSearchSpaces] = useState<SearchSpace[]>([]);
-	const [activeSpaceId, setActiveSpaceId] = useState<string | null>(null);
-
-	const [autoLaunchEnabled, setAutoLaunchEnabled] = useState(false);
-	const [autoLaunchHidden, setAutoLaunchHidden] = useState(true);
-	const [autoLaunchSupported, setAutoLaunchSupported] = useState(false);
-
-	useEffect(() => {
-		if (!api) {
-			setLoading(false);
-			return;
-		}
-
-		let mounted = true;
-		const hasAutoLaunchApi =
-			typeof api.getAutoLaunch === "function" && typeof api.setAutoLaunch === "function";
-		setAutoLaunchSupported(hasAutoLaunchApi);
-
-		Promise.all([
-			api.getActiveSearchSpace?.() ?? Promise.resolve(null),
-			searchSpacesApiService.getSearchSpaces(),
-			hasAutoLaunchApi ? api.getAutoLaunch() : Promise.resolve(null),
-		])
-			.then(([spaceId, spaces, autoLaunch]) => {
-				if (!mounted) return;
-				setActiveSpaceId(spaceId);
-				if (spaces) setSearchSpaces(spaces);
-				if (autoLaunch) {
-					setAutoLaunchEnabled(autoLaunch.enabled);
-					setAutoLaunchHidden(autoLaunch.openAsHidden);
-					setAutoLaunchSupported(autoLaunch.supported);
-				}
-				setLoading(false);
-			})
-			.catch(() => {
-				if (!mounted) return;
-				setLoading(false);
-			});
-
-		return () => {
-			mounted = false;
-		};
-	}, [api]);
-
-	if (!api) {
-		return (
-			<div className="flex flex-col items-center justify-center py-12 text-center">
-				<p className="text-sm text-muted-foreground">
-					App preferences are only available in the SurfSense desktop app.
-				</p>
-			</div>
-		);
-	}
-
-	if (loading) {
-		return (
-			<div className="flex flex-col gap-4 md:gap-6">
-				<section>
-					<div className="flex flex-col gap-2 pb-2 md:pb-3">
-						<Skeleton className="h-6 w-48 bg-accent" />
-						<Skeleton className="h-4 w-full max-w-2xl bg-accent" />
-					</div>
-					<Skeleton className="h-10 w-full bg-accent" />
-				</section>
-
-				<Separator className="bg-border" />
-
-				<section>
-					<div className="flex flex-col gap-2 pb-2 md:pb-3">
-						<Skeleton className="h-6 w-44 bg-accent" />
-						<Skeleton className="h-4 w-full max-w-3xl bg-accent" />
-					</div>
-					<div className="flex flex-col gap-3">
-						<Skeleton className="h-20 w-full bg-accent" />
-						<Skeleton className="h-20 w-full bg-accent" />
-					</div>
-				</section>
-			</div>
-		);
-	}
-
-	const handleAutoLaunchToggle = async (checked: boolean) => {
-		if (!autoLaunchSupported || !api.setAutoLaunch) {
-			toast.error("Please update the desktop app to configure launch on startup");
-			return;
-		}
-		setAutoLaunchEnabled(checked);
-		try {
-			const next = await api.setAutoLaunch(checked, autoLaunchHidden);
-			if (next) {
-				setAutoLaunchEnabled(next.enabled);
-				setAutoLaunchHidden(next.openAsHidden);
-				setAutoLaunchSupported(next.supported);
-			}
-			toast.success(checked ? "SurfSense will launch on startup" : "Launch on startup disabled");
-		} catch {
-			setAutoLaunchEnabled(!checked);
-			toast.error("Failed to update launch on startup");
-		}
-	};
-
-	const handleAutoLaunchHiddenToggle = async (checked: boolean) => {
-		if (!autoLaunchSupported || !api.setAutoLaunch) {
-			toast.error("Please update the desktop app to configure startup behavior");
-			return;
-		}
-		setAutoLaunchHidden(checked);
-		try {
-			await api.setAutoLaunch(autoLaunchEnabled, checked);
-		} catch {
-			setAutoLaunchHidden(!checked);
-			toast.error("Failed to update startup behavior");
-		}
-	};
-
-	const handleSearchSpaceChange = (value: string) => {
-		setActiveSpaceId(value);
-		api.setActiveSearchSpace?.(value);
-		toast.success("Default search space updated");
-	};
-
-	return (
-		<div className="flex flex-col gap-4 md:gap-6">
-			<section>
-				<div className="pb-2 md:pb-3">
-					<h2 className="text-base md:text-lg font-semibold">Default Search Space</h2>
-					<p className="text-xs md:text-sm text-muted-foreground">
-						Choose which search space General Assist, Screenshot Assist, and Quick Assist use by
-						default.
-					</p>
-				</div>
-				<div>
-					{searchSpaces.length > 0 ? (
-						<Select value={activeSpaceId ?? undefined} onValueChange={handleSearchSpaceChange}>
-							<SelectTrigger className="w-full">
-								<SelectValue placeholder="Select a search space" />
-							</SelectTrigger>
-							<SelectContent>
-								{searchSpaces.map((space) => (
-									<SelectItem key={space.id} value={String(space.id)}>
-										{space.name}
-									</SelectItem>
-								))}
-							</SelectContent>
-						</Select>
-					) : (
-						<p className="text-sm text-muted-foreground">
-							No search spaces found. Create one first.
-						</p>
-					)}
-				</div>
-			</section>
-
-			<Separator className="bg-border" />
-
-			<section>
-				<div className="pb-2 md:pb-3">
-					<h2 className="text-base md:text-lg font-semibold flex items-center gap-2">
-						Launch on Startup
-					</h2>
-					<p className="text-xs md:text-sm text-muted-foreground">
-						Automatically start SurfSense when you sign in to your computer so global shortcuts and
-						folder sync are always available.
-					</p>
-				</div>
-				<div className="flex flex-col gap-3">
-					<div className="flex items-center justify-between rounded-lg bg-accent p-4">
-						<div className="space-y-0.5">
-							<Label htmlFor="auto-launch-toggle" className="text-sm font-medium cursor-pointer">
-								Open SurfSense at login
-							</Label>
-							<p className="text-xs text-muted-foreground">
-								{autoLaunchSupported
-									? "Adds SurfSense to your system's login items."
-									: "Only available in the packaged desktop app."}
-							</p>
-						</div>
-						<Switch
-							id="auto-launch-toggle"
-							checked={autoLaunchEnabled}
-							onCheckedChange={handleAutoLaunchToggle}
-							disabled={!autoLaunchSupported}
-						/>
-					</div>
-					<div className="flex items-center justify-between rounded-lg bg-accent p-4">
-						<div className="space-y-0.5">
-							<Label
-								htmlFor="auto-launch-hidden-toggle"
-								className="text-sm font-medium cursor-pointer"
-							>
-								Start minimized to tray
-							</Label>
-							<p className="text-xs text-muted-foreground">
-								Skip the main window on boot. SurfSense lives in the system tray until you need it.
-							</p>
-						</div>
-						<Switch
-							id="auto-launch-hidden-toggle"
-							checked={autoLaunchHidden}
-							onCheckedChange={handleAutoLaunchHiddenToggle}
-							disabled={!autoLaunchSupported || !autoLaunchEnabled}
-						/>
-					</div>
-				</div>
-			</section>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/HotkeysContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/HotkeysContent.tsx
deleted file mode 100644
index 9916f6cda..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/HotkeysContent.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-"use client";
-
-import { Crop, Rocket, RotateCcw, Zap } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { toast } from "sonner";
-import { DEFAULT_SHORTCUTS, keyEventToAccelerator } from "@/components/desktop/shortcut-recorder";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-import { ShortcutKbd } from "@/components/ui/shortcut-kbd";
-import { Spinner } from "@/components/ui/spinner";
-import { useElectronAPI } from "@/hooks/use-platform";
-
-type ShortcutKey = "generalAssist" | "quickAsk" | "screenshotAssist";
-type ShortcutMap = typeof DEFAULT_SHORTCUTS;
-
-const HOTKEY_ROWS: Array<{ key: ShortcutKey; label: string; icon: React.ElementType }> = [
-	{ key: "generalAssist", label: "General Assist", icon: Rocket },
-	{ key: "screenshotAssist", label: "Screenshot Assist", icon: Crop },
-	{ key: "quickAsk", label: "Quick Assist", icon: Zap },
-];
-
-function acceleratorToKeys(accel: string, isMac: boolean): string[] {
-	if (!accel) return [];
-	return accel.split("+").map((part) => {
-		if (part === "CommandOrControl") {
-			return isMac ? "⌘" : "Ctrl";
-		}
-		if (part === "Alt") {
-			return isMac ? "⌥" : "Alt";
-		}
-		if (part === "Shift") {
-			return isMac ? "⇧" : "Shift";
-		}
-		if (part === "Space") return "Space";
-		return part.length === 1 ? part.toUpperCase() : part;
-	});
-}
-
-function HotkeyRow({
-	label,
-	value,
-	defaultValue,
-	icon: Icon,
-	isMac,
-	onChange,
-	onReset,
-}: {
-	label: string;
-	value: string;
-	defaultValue: string;
-	icon: React.ElementType;
-	isMac: boolean;
-	onChange: (accelerator: string) => void;
-	onReset: () => void;
-}) {
-	const [recording, setRecording] = useState(false);
-	const inputRef = useRef<HTMLButtonElement>(null);
-	const isDefault = value === defaultValue;
-	const displayKeys = useMemo(() => acceleratorToKeys(value, isMac), [value, isMac]);
-
-	const handleKeyDown = useCallback(
-		(e: React.KeyboardEvent) => {
-			if (!recording) return;
-			e.preventDefault();
-			e.stopPropagation();
-
-			if (e.key === "Escape") {
-				setRecording(false);
-				return;
-			}
-
-			const accel = keyEventToAccelerator(e);
-			if (accel) {
-				onChange(accel);
-				setRecording(false);
-			}
-		},
-		[onChange, recording]
-	);
-
-	return (
-		<div className="flex items-center justify-between gap-2.5 py-3">
-			<div className="flex items-center gap-2.5 min-w-0">
-				<div className="flex size-7 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
-					<Icon className="size-3.5" />
-				</div>
-				<p className="text-sm text-foreground truncate">{label}</p>
-			</div>
-			<div className="flex shrink-0 items-center gap-1">
-				{!isDefault && (
-					<Button
-						variant="ghost"
-						size="icon"
-						className="size-7 text-muted-foreground hover:text-accent-foreground"
-						onClick={onReset}
-						title="Reset to default"
-					>
-						<RotateCcw className="size-3" />
-					</Button>
-				)}
-				<Button
-					ref={inputRef}
-					type="button"
-					variant="ghost"
-					title={recording ? "Press shortcut keys" : "Click to edit shortcut"}
-					onClick={() => setRecording(true)}
-					onKeyDown={handleKeyDown}
-					onBlur={() => setRecording(false)}
-					className={
-						recording
-							? "h-7 border border-transparent bg-primary/5 px-0 outline-none ring-0 focus:outline-none focus-visible:outline-none focus-visible:ring-0"
-							: "h-7 cursor-pointer border border-transparent bg-transparent px-0 outline-none ring-0 transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:outline-none focus-visible:ring-0"
-					}
-				>
-					{recording ? (
-						<span className="px-2 text-[9px] text-primary whitespace-nowrap">Press hotkeys</span>
-					) : (
-						<ShortcutKbd keys={displayKeys} className="ml-0 px-1.5 text-foreground/85" />
-					)}
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-export function HotkeysContent() {
-	const api = useElectronAPI();
-	const [shortcuts, setShortcuts] = useState(DEFAULT_SHORTCUTS);
-	const [shortcutsLoaded, setShortcutsLoaded] = useState(false);
-	const isMac = api?.versions?.platform === "darwin";
-
-	useEffect(() => {
-		if (!api) {
-			setShortcutsLoaded(true);
-			return;
-		}
-
-		let mounted = true;
-		(api.getShortcuts?.() ?? Promise.resolve(null))
-			.then((config: ShortcutMap | null) => {
-				if (!mounted) return;
-				if (config) setShortcuts(config);
-				setShortcutsLoaded(true);
-			})
-			.catch(() => {
-				if (!mounted) return;
-				setShortcutsLoaded(true);
-			});
-
-		return () => {
-			mounted = false;
-		};
-	}, [api]);
-
-	if (!api) {
-		return (
-			<div className="flex flex-col items-center justify-center py-12 text-center">
-				<p className="text-sm text-muted-foreground">
-					Hotkeys are only available in the SurfSense desktop app.
-				</p>
-			</div>
-		);
-	}
-
-	const updateShortcut = (key: ShortcutKey, accelerator: string) => {
-		setShortcuts((prev) => {
-			const updated = { ...prev, [key]: accelerator };
-			api.setShortcuts?.({ [key]: accelerator }).catch(() => {
-				toast.error("Failed to update shortcut");
-			});
-			return updated;
-		});
-		toast.success("Shortcut updated");
-	};
-
-	const resetShortcut = (key: ShortcutKey) => {
-		updateShortcut(key, DEFAULT_SHORTCUTS[key]);
-	};
-
-	return shortcutsLoaded ? (
-		<div className="flex flex-col gap-3">
-			<div>
-				{HOTKEY_ROWS.map((row, index) => (
-					<div key={row.key}>
-						<HotkeyRow
-							label={row.label}
-							value={shortcuts[row.key]}
-							defaultValue={DEFAULT_SHORTCUTS[row.key]}
-							icon={row.icon}
-							isMac={isMac}
-							onChange={(accel) => updateShortcut(row.key, accel)}
-							onReset={() => resetShortcut(row.key)}
-						/>
-						{index < HOTKEY_ROWS.length - 1 ? <Separator className="bg-border" /> : null}
-					</div>
-				))}
-			</div>
-		</div>
-	) : (
-		<div className="flex justify-center py-4">
-			<Spinner size="sm" />
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/MessagingChannelsContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/MessagingChannelsContent.tsx
deleted file mode 100644
index b1e01c273..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/MessagingChannelsContent.tsx
+++ /dev/null
@@ -1,603 +0,0 @@
-"use client";
-
-import { AlertTriangle, RefreshCw, ShieldAlert } from "lucide-react";
-import { useParams } from "next/navigation";
-import { QRCodeSVG } from "qrcode.react";
-import { useCallback, useEffect, useState } from "react";
-import { toast } from "sonner";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
-import { Skeleton } from "@/components/ui/skeleton";
-import type { SearchSpace } from "@/contracts/types/search-space.types";
-import { searchSpacesApiService } from "@/lib/apis/search-spaces-api.service";
-import { authenticatedFetch } from "@/lib/auth-fetch";
-import { buildBackendUrl } from "@/lib/env-config";
-import { cn } from "@/lib/utils";
-
-type GatewayConnection = {
-	id: number;
-	account_id?: number | null;
-	route_type?: "account" | "binding";
-	platform: string;
-	mode?: string;
-	state: string;
-	search_space_id: number;
-	display_name?: string | null;
-	external_username?: string | null;
-	workspace_name?: string | null;
-	workspace_id?: string | null;
-	health_status: string;
-	suspended_reason?: string | null;
-};
-
-type GatewayConfig = {
-	enabled: boolean;
-	telegram_enabled: boolean;
-	whatsapp_intake_mode: "disabled" | "cloud" | "baileys";
-	slack_enabled: boolean;
-	discord_enabled: boolean;
-};
-
-type GatewayConfigState = GatewayConfig | null;
-
-const DISABLED_GATEWAY_CONFIG: GatewayConfig = {
-	enabled: false,
-	telegram_enabled: false,
-	whatsapp_intake_mode: "disabled",
-	slack_enabled: false,
-	discord_enabled: false,
-};
-
-type Pairing = {
-	binding_id: number;
-	code: string;
-	deep_link: string;
-	expires_at: string;
-};
-
-type PairingPlatform = "telegram" | "whatsapp";
-type GatewayPlatform = PairingPlatform | "slack" | "discord";
-
-type BaileysHealth = {
-	status: string;
-	hasQr: boolean;
-	qr?: string | null;
-	queueDepth?: number;
-	user?: unknown;
-};
-
-export function MessagingChannelsContent() {
-	const params = useParams<{ search_space_id: string }>();
-	const searchSpaceId = Number(params.search_space_id);
-	const [gatewayConfig, setGatewayConfig] = useState<GatewayConfigState>(null);
-	const [connections, setConnections] = useState<GatewayConnection[]>([]);
-	const [searchSpaces, setSearchSpaces] = useState<SearchSpace[]>([]);
-	const [pairing, setPairing] = useState<Pairing | null>(null);
-	const [pairingPlatform, setPairingPlatform] = useState<PairingPlatform | null>(null);
-	const [baileysHealth, setBaileysHealth] = useState<BaileysHealth | null>(null);
-	const [refreshingPlatform, setRefreshingPlatform] = useState<GatewayPlatform | null>(null);
-	const isGatewayConfigLoading = gatewayConfig === null;
-	const telegramGatewayEnabled = gatewayConfig?.telegram_enabled ?? false;
-	const whatsappMode = gatewayConfig?.whatsapp_intake_mode ?? "disabled";
-	const slackGatewayEnabled = gatewayConfig?.slack_enabled ?? false;
-	const discordGatewayEnabled = gatewayConfig?.discord_enabled ?? false;
-	const gatewayDisabled = gatewayConfig?.enabled === false;
-
-	const fetchConnections = useCallback(async (platform?: GatewayPlatform) => {
-		const res = await authenticatedFetch(
-			buildBackendUrl("/api/v1/gateway/connections", platform ? { platform } : undefined)
-		);
-		if (!res.ok) return [];
-		const data = await res.json();
-		return Array.isArray(data) ? (data as GatewayConnection[]) : [];
-	}, []);
-
-	const fetchGatewayConfig = useCallback(async (): Promise<GatewayConfig> => {
-		const res = await authenticatedFetch(buildBackendUrl("/api/v1/gateway/config"));
-		if (!res.ok) return DISABLED_GATEWAY_CONFIG;
-		const data = (await res.json()) as Partial<GatewayConfig>;
-		return {
-			...DISABLED_GATEWAY_CONFIG,
-			...data,
-			enabled: data.enabled ?? true,
-		};
-	}, []);
-
-	const refresh = useCallback(async () => {
-		const [nextConnections, spaces, nextGatewayConfig] = await Promise.all([
-			fetchConnections(),
-			searchSpacesApiService.getSearchSpaces(),
-			fetchGatewayConfig(),
-		]);
-		setConnections(nextConnections);
-		setSearchSpaces(spaces);
-		setGatewayConfig(nextGatewayConfig);
-	}, [fetchConnections, fetchGatewayConfig]);
-
-	useEffect(() => {
-		void refresh();
-	}, [refresh]);
-
-	const refreshPlatform = useCallback(
-		async (platform: GatewayPlatform) => {
-			setRefreshingPlatform(platform);
-			try {
-				const nextConnections = await fetchConnections(platform);
-				setConnections((current) => [
-					...current.filter((connection) => connection.platform !== platform),
-					...nextConnections,
-				]);
-			} finally {
-				setRefreshingPlatform(null);
-			}
-		},
-		[fetchConnections]
-	);
-
-	const refreshBaileysHealth = useCallback(async () => {
-		if (whatsappMode !== "baileys") return;
-		const res = await authenticatedFetch(
-			buildBackendUrl("/api/v1/gateway/whatsapp/baileys/health")
-		);
-		if (!res.ok) return;
-		const data = (await res.json()) as BaileysHealth;
-		setBaileysHealth(data);
-	}, [whatsappMode]);
-
-	useEffect(() => {
-		void refreshBaileysHealth();
-	}, [refreshBaileysHealth]);
-
-	async function startPairing(platform: PairingPlatform) {
-		const res = await authenticatedFetch(buildBackendUrl("/api/v1/gateway/bindings/start"), {
-			method: "POST",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ platform, search_space_id: searchSpaceId }),
-		});
-		setPairing(await res.json());
-		setPairingPlatform(platform);
-		await refreshPlatform(platform);
-	}
-
-	async function installSlackGateway() {
-		const res = await authenticatedFetch(
-			buildBackendUrl("/api/v1/gateway/slack/install", { search_space_id: searchSpaceId })
-		);
-		if (!res.ok) return;
-		const data = (await res.json()) as { auth_url?: string };
-		if (data.auth_url) {
-			window.location.href = data.auth_url;
-		}
-	}
-
-	async function installDiscordGateway() {
-		const res = await authenticatedFetch(
-			buildBackendUrl("/api/v1/gateway/discord/install", { search_space_id: searchSpaceId })
-		);
-		if (!res.ok) return;
-		const data = (await res.json()) as { auth_url?: string };
-		if (data.auth_url) {
-			window.location.href = data.auth_url;
-		}
-	}
-
-	async function refreshBaileys() {
-		await refreshBaileysHealth();
-		await refreshPlatform("whatsapp");
-	}
-
-	const connectionKey = (connection: GatewayConnection) =>
-		connection.route_type === "account" && connection.account_id
-			? `account:${connection.account_id}`
-			: `binding:${connection.id}`;
-
-	async function revoke(connection: GatewayConnection) {
-		const url =
-			connection.route_type === "account" && connection.account_id
-				? buildBackendUrl(`/api/v1/gateway/accounts/${connection.account_id}`)
-				: buildBackendUrl(`/api/v1/gateway/bindings/${connection.id}`);
-		await authenticatedFetch(url, {
-			method: "DELETE",
-		});
-		await refreshPlatform(connection.platform as GatewayPlatform);
-	}
-
-	async function updateConnectionSearchSpace(
-		connection: GatewayConnection,
-		nextSearchSpaceId: string
-	) {
-		const previousConnections = connections;
-		const parsedSearchSpaceId = Number(nextSearchSpaceId);
-		const targetKey = connectionKey(connection);
-		setConnections((current) =>
-			current.map((connection) =>
-				connectionKey(connection) === targetKey
-					? { ...connection, search_space_id: parsedSearchSpaceId }
-					: connection
-			)
-		);
-		const url =
-			connection.route_type === "account" && connection.account_id
-				? buildBackendUrl(`/api/v1/gateway/accounts/${connection.account_id}/search-space`)
-				: buildBackendUrl(`/api/v1/gateway/bindings/${connection.id}/search-space`);
-		const res = await authenticatedFetch(url, {
-			method: "PATCH",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ search_space_id: parsedSearchSpaceId }),
-		});
-		if (!res.ok) {
-			setConnections(previousConnections);
-			toast.error("Failed to update messaging route");
-			return;
-		}
-		toast.success("Messaging route updated");
-		await refreshPlatform(connection.platform as GatewayPlatform);
-	}
-
-	async function resume(connection: GatewayConnection) {
-		await authenticatedFetch(buildBackendUrl(`/api/v1/gateway/bindings/${connection.id}/resume`), {
-			method: "POST",
-		});
-		await refreshPlatform(connection.platform as GatewayPlatform);
-	}
-
-	const isConnectionInActiveMode = (connection: GatewayConnection) => {
-		if (connection.platform !== "whatsapp") return true;
-		if (whatsappMode === "baileys") return connection.mode === "self_host_byo";
-		if (whatsappMode === "cloud") return connection.mode !== "self_host_byo";
-		return false;
-	};
-	const baileysQr = baileysHealth?.qr || null;
-	const hasTelegramConnection = connections.some(
-		(connection) => connection.platform === "telegram"
-	);
-	const hasWhatsAppConnection = connections.some(
-		(connection) => connection.platform === "whatsapp" && isConnectionInActiveMode(connection)
-	);
-	const hasEnabledGateway =
-		telegramGatewayEnabled ||
-		whatsappMode !== "disabled" ||
-		slackGatewayEnabled ||
-		discordGatewayEnabled;
-	const isRefreshing = (platform: GatewayPlatform) => refreshingPlatform === platform;
-	const refreshButtonClassName = "gap-2";
-	const refreshIconClassName = (platform: GatewayPlatform) =>
-		cn("mr-2 h-4 w-4", isRefreshing(platform) && "animate-spin");
-	const platformLabel = (platform: string) => {
-		switch (platform) {
-			case "discord":
-				return "Discord";
-			case "slack":
-				return "Slack";
-			case "telegram":
-				return "Telegram";
-			case "whatsapp":
-				return "WhatsApp";
-			default:
-				return platform;
-		}
-	};
-	const connectionTitle = (connection: GatewayConnection) =>
-		connection.platform === "whatsapp" && connection.mode === "self_host_byo"
-			? "WhatsApp Bridge"
-			: connection.workspace_name ||
-				connection.display_name ||
-				connection.external_username ||
-				`${platformLabel(connection.platform)} connection`;
-	const renderConnectionRows = (platform: GatewayConnection["platform"], emptyText: string) => {
-		const platformConnections = connections.filter(
-			(connection) => connection.platform === platform && isConnectionInActiveMode(connection)
-		);
-
-		if (platformConnections.length === 0) {
-			return (
-				<div className="flex min-h-24 items-center justify-center text-center">
-					<p className="text-xs text-muted-foreground">{emptyText}</p>
-				</div>
-			);
-		}
-
-		return (
-			<div className="space-y-2">
-				<p className="text-xs font-medium text-muted-foreground">Connected accounts</p>
-				{platformConnections.map((connection, index) => (
-					<div key={connectionKey(connection)} className="space-y-2">
-						{index > 0 ? <Separator className="bg-accent" /> : null}
-						<div className="space-y-2">
-							<div className="min-w-0">
-								<p className="truncate text-xs font-medium">{connectionTitle(connection)}</p>
-								{connection.suspended_reason ? (
-									<p className="mt-1 flex items-center gap-1 text-xs text-destructive">
-										<ShieldAlert className="h-3 w-3" />
-										{connection.suspended_reason}
-									</p>
-								) : null}
-							</div>
-							<div className="flex flex-wrap items-center gap-2">
-								<Select
-									value={String(connection.search_space_id)}
-									onValueChange={(value) => updateConnectionSearchSpace(connection, value)}
-									disabled={searchSpaces.length === 0}
-								>
-									<SelectTrigger className="h-8 min-w-[180px] flex-1 text-xs">
-										<SelectValue placeholder="Select search space" />
-									</SelectTrigger>
-									<SelectContent>
-										{searchSpaces.map((space) => (
-											<SelectItem key={space.id} value={String(space.id)}>
-												{space.name}
-											</SelectItem>
-										))}
-									</SelectContent>
-								</Select>
-								{connection.state === "suspended" ? (
-									<Button
-										size="sm"
-										variant="outline"
-										className="h-8"
-										onClick={() => resume(connection)}
-									>
-										Resume
-									</Button>
-								) : null}
-								<Button
-									size="sm"
-									variant="destructive"
-									className="text-xs sm:text-sm flex-1 sm:flex-initial h-12 sm:h-auto py-3 sm:py-2"
-									onClick={() => revoke(connection)}
-								>
-									Disconnect
-								</Button>
-							</div>
-						</div>
-					</div>
-				))}
-			</div>
-		);
-	};
-	const renderPairingPanel = (platform: PairingPlatform) => {
-		if (!pairing || pairingPlatform !== platform) return null;
-
-		return (
-			<div className="rounded-lg border border-accent bg-accent/20 p-3">
-				<p className="text-xs font-medium">Pairing code</p>
-				<p className="mt-2 font-mono text-lg">{pairing.code}</p>
-				<a className="mt-2 block text-sm text-primary underline" href={pairing.deep_link}>
-					Open {platform === "whatsapp" ? "WhatsApp" : "Telegram"} pairing link
-				</a>
-				<p className="mt-2 text-xs text-muted-foreground">
-					Expires at {new Date(pairing.expires_at).toLocaleString()}. SurfSense stores this
-					channel's messages for agent memory and operational debugging.
-				</p>
-			</div>
-		);
-	};
-	const renderGatewaySkeletons = () => (
-		<>
-			{[0, 1].map((index) => (
-				<Card key={index} className="h-full overflow-hidden border-accent bg-accent/20">
-					<CardHeader className="space-y-3 p-4">
-						<Skeleton className="h-4 w-24 bg-accent" />
-						<Skeleton className="h-3 w-3/4 bg-accent" />
-					</CardHeader>
-					<CardContent className="space-y-3 p-4 pt-0">
-						<Skeleton className="h-8 w-40 bg-accent" />
-						<Separator className="bg-accent" />
-						<Skeleton className="h-10 w-full bg-accent" />
-					</CardContent>
-				</Card>
-			))}
-		</>
-	);
-
-	return (
-		<div className="grid items-stretch gap-3 sm:grid-cols-2">
-			{isGatewayConfigLoading ? renderGatewaySkeletons() : null}
-
-			{!isGatewayConfigLoading && gatewayDisabled ? (
-				<Alert className="col-span-full" variant="warning">
-					<AlertTriangle aria-hidden />
-					<AlertTitle>Messaging Channels coming soon</AlertTitle>
-					<AlertDescription>
-						<p>
-							Soon you'll be able to connect WhatsApp, Telegram, Slack, and Discord to your
-							SurfSense agent so you can ask questions, route messages to search spaces, and get
-							answers from your knowledge base without leaving your chat app.
-						</p>
-					</AlertDescription>
-				</Alert>
-			) : null}
-
-			{!isGatewayConfigLoading && !gatewayDisabled && !hasEnabledGateway ? (
-				<Card className="col-span-full border-accent bg-accent/20">
-					<CardHeader className="space-y-1.5 p-4">
-						<CardTitle className="text-sm">No messaging gateways enabled</CardTitle>
-					</CardHeader>
-				</Card>
-			) : null}
-
-			{!gatewayDisabled && telegramGatewayEnabled ? (
-				<Card className="order-1 group relative h-full overflow-hidden border-accent bg-accent/20 transition-all duration-200 hover:shadow-md">
-					<CardHeader className="space-y-1.5 p-4 pb-2">
-						<div className="flex items-center justify-between gap-3">
-							<CardTitle className="flex items-center gap-2 text-sm">Telegram</CardTitle>
-						</div>
-						<p className="text-xs text-muted-foreground">
-							Connect Telegram to chat with SurfSense.
-						</p>
-					</CardHeader>
-					<CardContent className="space-y-3 p-4 pt-0">
-						<div className="flex flex-wrap gap-2">
-							{hasTelegramConnection ? null : (
-								<Button size="sm" onClick={() => startPairing("telegram")}>
-									Pair Telegram Chat
-								</Button>
-							)}
-							<Button
-								size="sm"
-								variant="secondary"
-								className={refreshButtonClassName}
-								onClick={() => refreshPlatform("telegram")}
-								disabled={isRefreshing("telegram")}
-							>
-								<RefreshCw className={refreshIconClassName("telegram")} />
-								Refresh
-							</Button>
-						</div>
-
-						{hasTelegramConnection ? null : renderPairingPanel("telegram")}
-						<Separator className="bg-accent" />
-						{renderConnectionRows("telegram", "No Telegram chats connected yet.")}
-					</CardContent>
-				</Card>
-			) : null}
-
-			{!gatewayDisabled && slackGatewayEnabled ? (
-				<Card className="order-4 group relative h-full overflow-hidden border-accent bg-accent/20 transition-all duration-200 hover:shadow-md">
-					<CardHeader className="space-y-1.5 p-4 pb-2">
-						<div className="flex items-center justify-between gap-3">
-							<CardTitle className="flex items-center gap-2 text-sm">Slack</CardTitle>
-						</div>
-						<p className="text-xs text-muted-foreground">
-							Enable the SurfSense Slack bot so teammates can mention it in Slack.
-						</p>
-					</CardHeader>
-					<CardContent className="space-y-3 p-4 pt-0">
-						<div className="flex flex-wrap gap-2">
-							<Button size="sm" onClick={installSlackGateway}>
-								Add Slack Workspace
-							</Button>
-							<Button
-								size="sm"
-								variant="secondary"
-								className={refreshButtonClassName}
-								onClick={() => refreshPlatform("slack")}
-								disabled={isRefreshing("slack")}
-							>
-								<RefreshCw className={refreshIconClassName("slack")} />
-								Refresh
-							</Button>
-						</div>
-						<Separator className="bg-accent" />
-						{renderConnectionRows("slack", "No Slack workspaces connected yet.")}
-					</CardContent>
-				</Card>
-			) : null}
-
-			{!gatewayDisabled && discordGatewayEnabled ? (
-				<Card className="order-3 group relative h-full overflow-hidden border-accent bg-accent/20 transition-all duration-200 hover:shadow-md">
-					<CardHeader className="space-y-1.5 p-4 pb-2">
-						<div className="flex items-center justify-between gap-3">
-							<CardTitle className="flex items-center gap-2 text-sm">Discord</CardTitle>
-						</div>
-						<p className="text-xs text-muted-foreground">
-							Enable the SurfSense Discord bot so teammates can mention it in Discord.
-						</p>
-					</CardHeader>
-					<CardContent className="space-y-3 p-4 pt-0">
-						<div className="flex flex-wrap gap-2">
-							<Button size="sm" onClick={installDiscordGateway}>
-								Add Discord Server
-							</Button>
-							<Button
-								size="sm"
-								variant="secondary"
-								className={refreshButtonClassName}
-								onClick={() => refreshPlatform("discord")}
-								disabled={isRefreshing("discord")}
-							>
-								<RefreshCw className={refreshIconClassName("discord")} />
-								Refresh
-							</Button>
-						</div>
-						<Separator className="bg-accent" />
-						{renderConnectionRows("discord", "No Discord servers connected yet.")}
-					</CardContent>
-				</Card>
-			) : null}
-
-			{!gatewayDisabled && whatsappMode !== "disabled" ? (
-				<Card className="order-2 group relative h-full overflow-hidden border-accent bg-accent/20 transition-all duration-200 hover:shadow-md">
-					<CardHeader className="space-y-1.5 p-4 pb-2">
-						<div className="flex items-center justify-between gap-3">
-							<CardTitle className="flex items-center gap-2 text-sm">WhatsApp</CardTitle>
-						</div>
-						<p className="text-xs text-muted-foreground">
-							{whatsappMode === "baileys"
-								? 'Use "Message Yourself". Other chats are ignored.'
-								: "Connect WhatsApp to chat with Surfsense."}
-						</p>
-					</CardHeader>
-					<CardContent className="space-y-3 p-4 pt-0">
-						{whatsappMode === "cloud" ? (
-							<div className="space-y-3">
-								<div className="flex flex-wrap gap-2">
-									{hasWhatsAppConnection ? null : (
-										<Button size="sm" onClick={() => startPairing("whatsapp")}>
-											Pair WhatsApp
-										</Button>
-									)}
-									<Button
-										size="sm"
-										variant="secondary"
-										className={refreshButtonClassName}
-										onClick={() => refreshPlatform("whatsapp")}
-										disabled={isRefreshing("whatsapp")}
-									>
-										<RefreshCw className={refreshIconClassName("whatsapp")} />
-										Refresh
-									</Button>
-								</div>
-								{hasWhatsAppConnection ? null : renderPairingPanel("whatsapp")}
-							</div>
-						) : null}
-						{whatsappMode === "baileys" ? (
-							<div className="space-y-3">
-								<Button
-									size="sm"
-									variant="secondary"
-									className={refreshButtonClassName}
-									onClick={refreshBaileys}
-									disabled={isRefreshing("whatsapp")}
-								>
-									<RefreshCw className={refreshIconClassName("whatsapp")} />
-									Refresh
-								</Button>
-								{baileysQr ? (
-									<div className="rounded-lg border border-accent bg-accent/20 p-3">
-										<p className="text-sm font-medium">WhatsApp QR pairing</p>
-										<p className="mt-1 text-xs text-muted-foreground">
-											Scan this QR from WhatsApp &gt; Linked Devices &gt; Link a Device.
-										</p>
-										<div className="mt-3 inline-block rounded-md bg-white p-3">
-											<QRCodeSVG value={baileysQr} size={192} />
-										</div>
-									</div>
-								) : null}
-								{baileysHealth ? (
-									<p className="text-xs text-muted-foreground">
-										Bridge status: {baileysHealth.status}
-										{typeof baileysHealth.queueDepth === "number"
-											? `, queue: ${baileysHealth.queueDepth}`
-											: ""}
-									</p>
-								) : null}
-							</div>
-						) : null}
-						<Separator className="bg-accent" />
-						{renderConnectionRows("whatsapp", "No WhatsApp chats connected yet.")}
-					</CardContent>
-				</Card>
-			) : null}
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ProfileContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ProfileContent.tsx
deleted file mode 100644
index 89bc362eb..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ProfileContent.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-"use client";
-
-import { useAtomValue } from "jotai";
-import Image from "next/image";
-import { useTranslations } from "next-intl";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
-import { updateUserMutationAtom } from "@/atoms/user/user-mutation.atoms";
-import { currentUserAtom } from "@/atoms/user/user-query.atoms";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Spinner } from "@/components/ui/spinner";
-import { getUserAvatarColor, getUserInitials } from "@/lib/user-avatar";
-
-function AvatarDisplay({
-	url,
-	fallback,
-	bgColor,
-}: {
-	url?: string;
-	fallback: string;
-	bgColor: string;
-}) {
-	const [errorUrl, setErrorUrl] = useState<string>();
-	const hasError = errorUrl === url;
-
-	if (url && !hasError) {
-		return (
-			<Image
-				src={url}
-				alt="Avatar"
-				width={64}
-				height={64}
-				className="h-16 w-16 rounded-full object-cover select-none"
-				onError={() => setErrorUrl(url)}
-				referrerPolicy="no-referrer"
-				unoptimized
-			/>
-		);
-	}
-
-	return (
-		<div
-			className="flex h-16 w-16 shrink-0 items-center justify-center rounded-full text-xl font-semibold text-white select-none"
-			style={{ backgroundColor: bgColor }}
-		>
-			{fallback}
-		</div>
-	);
-}
-
-export function ProfileContent() {
-	const t = useTranslations("userSettings");
-	const { data: user, isLoading: isUserLoading } = useAtomValue(currentUserAtom);
-	const { mutateAsync: updateUser, isPending } = useAtomValue(updateUserMutationAtom);
-
-	const [displayName, setDisplayName] = useState("");
-
-	useEffect(() => {
-		if (user) {
-			setDisplayName(user.display_name || "");
-		}
-	}, [user]);
-
-	const handleSubmit = async (e: React.FormEvent) => {
-		e.preventDefault();
-
-		try {
-			await updateUser({
-				display_name: displayName || null,
-			});
-			toast.success(t("profile_saved"));
-		} catch {
-			toast.error(t("profile_save_error"));
-		}
-	};
-
-	const hasChanges = displayName !== (user?.display_name || "");
-	const avatarBgColor = getUserAvatarColor(user?.email || "");
-
-	return (
-		<div>
-			{isUserLoading ? (
-				<div className="flex items-center justify-center py-12">
-					<Spinner size="md" className="text-muted-foreground" />
-				</div>
-			) : (
-				<form onSubmit={handleSubmit} className="space-y-6">
-					<div className="rounded-lg bg-main-panel">
-						<div className="flex flex-col gap-6">
-							<div className="space-y-2">
-								<AvatarDisplay
-									url={user?.avatar_url || undefined}
-									fallback={getUserInitials(user?.email || "")}
-									bgColor={avatarBgColor}
-								/>
-							</div>
-
-							<div className="space-y-2">
-								<Label htmlFor="display-name">{t("profile_display_name")}</Label>
-								<Input
-									id="display-name"
-									type="text"
-									autoComplete="name"
-									maxLength={100}
-									placeholder={user?.email?.split("@")[0]}
-									value={displayName}
-									onChange={(e) => setDisplayName(e.target.value)}
-								/>
-								<p className="text-xs text-muted-foreground">{t("profile_display_name_hint")}</p>
-							</div>
-
-							<div className="space-y-2">
-								<Label>{t("profile_email")}</Label>
-								<Input type="email" value={user?.email || ""} disabled />
-							</div>
-						</div>
-					</div>
-
-					<div className="flex justify-end">
-						<Button
-							type="submit"
-							variant="outline"
-							disabled={isPending || !hasChanges}
-							className="relative gap-2 bg-white text-black hover:bg-accent hover:text-accent-foreground dark:bg-white dark:text-black"
-						>
-							<span className={isPending ? "opacity-0" : ""}>{t("profile_save")}</span>
-							{isPending && <Spinner size="sm" className="absolute" />}
-						</Button>
-					</div>
-				</form>
-			)}
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx
deleted file mode 100644
index 1d8cda12d..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx
+++ /dev/null
@@ -1,409 +0,0 @@
-"use client";
-
-import { useAtomValue } from "jotai";
-import { AlertTriangle, Globe, Lock, MoreHorizontal, Pencil, Sparkles, Trash2 } from "lucide-react";
-import { useCallback, useState } from "react";
-import { toast } from "sonner";
-import {
-	createPromptMutationAtom,
-	deletePromptMutationAtom,
-	updatePromptMutationAtom,
-} from "@/atoms/prompts/prompts-mutation.atoms";
-import { promptsAtom } from "@/atoms/prompts/prompts-query.atoms";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-} from "@/components/ui/dialog";
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { ShortcutKbd } from "@/components/ui/shortcut-kbd";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Spinner } from "@/components/ui/spinner";
-import { Switch } from "@/components/ui/switch";
-import type { PromptRead } from "@/contracts/types/prompts.types";
-
-interface PromptFormData {
-	name: string;
-	prompt: string;
-	mode: "transform" | "explore";
-	is_public: boolean;
-}
-
-const EMPTY_FORM: PromptFormData = { name: "", prompt: "", mode: "transform", is_public: false };
-
-export function PromptsContent() {
-	const { data: prompts, isLoading, isError } = useAtomValue(promptsAtom);
-	const { mutateAsync: createPrompt } = useAtomValue(createPromptMutationAtom);
-	const { mutateAsync: updatePrompt } = useAtomValue(updatePromptMutationAtom);
-	const { mutateAsync: deletePrompt } = useAtomValue(deletePromptMutationAtom);
-
-	const [showForm, setShowForm] = useState(false);
-	const [editingId, setEditingId] = useState<number | null>(null);
-	const [formData, setFormData] = useState<PromptFormData>(EMPTY_FORM);
-	const [isSaving, setIsSaving] = useState(false);
-	const [expandedId, setExpandedId] = useState<number | null>(null);
-	const [deleteTarget, setDeleteTarget] = useState<number | null>(null);
-	const [togglingPublicIds, setTogglingPublicIds] = useState<Set<number>>(new Set());
-
-	const handleSave = useCallback(async () => {
-		if (!formData.name.trim() || !formData.prompt.trim()) {
-			toast.error("Name and prompt are required");
-			return;
-		}
-
-		setIsSaving(true);
-		try {
-			if (editingId !== null) {
-				await updatePrompt({ id: editingId, ...formData });
-			} else {
-				await createPrompt(formData);
-			}
-			setShowForm(false);
-			setFormData(EMPTY_FORM);
-			setEditingId(null);
-		} catch {
-			// toast handled by mutation atoms
-		} finally {
-			setIsSaving(false);
-		}
-	}, [formData, editingId, createPrompt, updatePrompt]);
-
-	const handleEdit = useCallback((prompt: PromptRead) => {
-		setFormData({
-			name: prompt.name,
-			prompt: prompt.prompt,
-			mode: prompt.mode as "transform" | "explore",
-			is_public: prompt.is_public,
-		});
-		setEditingId(prompt.id);
-		setShowForm(true);
-	}, []);
-
-	const handleConfirmDelete = useCallback(async () => {
-		if (deleteTarget === null) return;
-		try {
-			await deletePrompt(deleteTarget);
-		} catch {
-			// toast handled by mutation atom
-		} finally {
-			setDeleteTarget(null);
-		}
-	}, [deleteTarget, deletePrompt]);
-
-	const handleTogglePublic = useCallback(
-		async (prompt: PromptRead) => {
-			if (togglingPublicIds.has(prompt.id)) return;
-			setTogglingPublicIds((prev) => new Set(prev).add(prompt.id));
-			try {
-				await updatePrompt({ id: prompt.id, is_public: !prompt.is_public });
-			} catch {
-				// toast handled by mutation atom
-			} finally {
-				setTogglingPublicIds((prev) => {
-					const next = new Set(prev);
-					next.delete(prompt.id);
-					return next;
-				});
-			}
-		},
-		[updatePrompt, togglingPublicIds]
-	);
-
-	const handleCancel = useCallback(() => {
-		setShowForm(false);
-		setFormData(EMPTY_FORM);
-		setEditingId(null);
-	}, []);
-
-	const list = prompts ?? [];
-
-	return (
-		<div className="space-y-6 min-w-0">
-			<div className="flex items-center justify-between">
-				<p className="text-sm text-muted-foreground">
-					Create prompt templates triggered with <ShortcutKbd keys={["/"]} className="ml-0" /> in
-					the chat composer.
-				</p>
-				<Button
-					size="sm"
-					onClick={() => {
-						setShowForm(true);
-						setEditingId(null);
-						setFormData(EMPTY_FORM);
-					}}
-					className="shrink-0 gap-1.5"
-				>
-					New
-				</Button>
-			</div>
-
-			<Dialog
-				open={showForm}
-				onOpenChange={(open) => {
-					setShowForm(open);
-					if (!open) {
-						setFormData(EMPTY_FORM);
-						setEditingId(null);
-					}
-				}}
-			>
-				<DialogContent className="max-w-lg bg-popover text-popover-foreground">
-					<DialogHeader>
-						<DialogTitle>{editingId !== null ? "Edit prompt" : "New prompt"}</DialogTitle>
-						<DialogDescription>
-							Create prompt templates triggered with / in the chat composer.
-						</DialogDescription>
-					</DialogHeader>
-
-					<div className="space-y-4">
-						<div className="space-y-2">
-							<Label htmlFor="prompt-name">Name</Label>
-							<Input
-								id="prompt-name"
-								value={formData.name}
-								onChange={(e) => setFormData((p) => ({ ...p, name: e.target.value }))}
-								placeholder="e.g. Fix grammar"
-							/>
-						</div>
-
-						<div className="space-y-2">
-							<Label htmlFor="prompt-template">Prompt template</Label>
-							<textarea
-								id="prompt-template"
-								value={formData.prompt}
-								onChange={(e) => setFormData((p) => ({ ...p, prompt: e.target.value }))}
-								placeholder="e.g. Fix the grammar in the following text:\n\n{selection}"
-								rows={4}
-								className="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm outline-none resize-none focus:ring-1 focus:ring-ring"
-							/>
-							<p className="text-xs text-muted-foreground">
-								Use{" "}
-								<code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px]">
-									{"{selection}"}
-								</code>{" "}
-								to insert the input text. If omitted, the text is appended automatically.
-							</p>
-						</div>
-
-						<div className="space-y-2">
-							<Label htmlFor="prompt-mode">Mode</Label>
-							<Select
-								value={formData.mode}
-								onValueChange={(value) =>
-									setFormData((p) => ({ ...p, mode: value as "transform" | "explore" }))
-								}
-							>
-								<SelectTrigger id="prompt-mode" className="w-full">
-									<SelectValue />
-								</SelectTrigger>
-								<SelectContent>
-									<SelectItem value="transform">
-										Transform — rewrites or modifies your text
-									</SelectItem>
-									<SelectItem value="explore">
-										Explore — answers a question about your text
-									</SelectItem>
-								</SelectContent>
-							</Select>
-						</div>
-
-						<div className="flex items-center gap-2">
-							<Switch
-								id="prompt-public"
-								checked={formData.is_public}
-								onCheckedChange={(checked) => setFormData((p) => ({ ...p, is_public: checked }))}
-							/>
-							<Label htmlFor="prompt-public" className="text-sm font-normal">
-								Share with community
-							</Label>
-						</div>
-					</div>
-
-					<DialogFooter>
-						<Button
-							type="button"
-							variant="secondary"
-							size="sm"
-							onClick={handleCancel}
-							disabled={isSaving}
-							className="text-sm h-9"
-						>
-							Cancel
-						</Button>
-						<Button
-							size="sm"
-							onClick={handleSave}
-							disabled={isSaving}
-							className="relative text-sm h-9 min-w-[96px]"
-						>
-							<span className={isSaving ? "opacity-0" : ""}>
-								{editingId !== null ? "Update" : "Create"}
-							</span>
-							{isSaving && <Spinner size="sm" className="absolute" />}
-						</Button>
-					</DialogFooter>
-				</DialogContent>
-			</Dialog>
-
-			{isLoading && (
-				<div className="-m-1 space-y-2 p-1">
-					{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
-						<Card key={key} className="border-accent bg-accent/20">
-							<CardContent className="p-4 flex flex-col gap-3 min-h-24">
-								<Skeleton className="h-4 w-32 md:w-40 bg-accent" />
-								<Skeleton className="h-3 w-full bg-accent" />
-								<Skeleton className="h-3 w-24 md:w-28 bg-accent mt-auto" />
-							</CardContent>
-						</Card>
-					))}
-				</div>
-			)}
-
-			{isError && (
-				<Alert variant="destructive">
-					<AlertTriangle />
-					<AlertTitle>Failed to load prompts</AlertTitle>
-					<AlertDescription>Please try refreshing the page.</AlertDescription>
-				</Alert>
-			)}
-
-			{!isLoading && !isError && list.length === 0 && !showForm && (
-				<div className="rounded-lg border border-dashed border-border/60 p-8 text-center">
-					<Sparkles className="mx-auto size-8 text-muted-foreground/40" />
-					<p className="mt-2 text-sm text-muted-foreground">No prompts yet</p>
-					<p className="text-xs text-muted-foreground/60">
-						Create prompts to quickly transform or explore text with /
-					</p>
-				</div>
-			)}
-
-			{!isLoading && !isError && list.length > 0 && (
-				<div className="-m-1 space-y-2 p-1">
-					{list.map((prompt) => (
-						<div
-							key={prompt.id}
-							className="group relative flex items-start gap-3 overflow-hidden rounded-lg border border-accent bg-accent/20 p-4 transition-all duration-200 hover:shadow-md"
-						>
-							<div className="flex-1 min-w-0">
-								<div className="flex items-center gap-2">
-									<span className="text-sm font-medium">{prompt.name}</span>
-									<span className="rounded-md border-0 bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
-										{prompt.mode}
-									</span>
-									{prompt.is_public && (
-										<span className="flex items-center gap-1 rounded-md border-0 bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
-											<Globe className="size-2.5" />
-											Public
-										</span>
-									)}
-								</div>
-								<p
-									className={`mt-1 text-xs text-muted-foreground ${expandedId === prompt.id ? "whitespace-pre-wrap" : "line-clamp-2"}`}
-								>
-									{prompt.prompt}
-								</p>
-								{prompt.prompt.length > 100 && (
-									<Button
-										type="button"
-										variant="link"
-										onClick={() => setExpandedId(expandedId === prompt.id ? null : prompt.id)}
-										className="mt-1 h-auto cursor-pointer px-0 py-0 text-[11px] text-primary"
-									>
-										{expandedId === prompt.id ? "See less" : "See more"}
-									</Button>
-								)}
-							</div>
-							<DropdownMenu>
-								<DropdownMenuTrigger asChild>
-									<Button
-										type="button"
-										variant="ghost"
-										size="icon"
-										className="h-7 w-7 shrink-0 self-center rounded-lg text-muted-foreground opacity-100 pointer-events-auto transition-opacity duration-150 hover:text-accent-foreground sm:opacity-0 sm:pointer-events-none sm:group-hover:opacity-100 sm:group-hover:pointer-events-auto"
-									>
-										<MoreHorizontal className="size-3.5" />
-										<span className="sr-only">Prompt actions</span>
-									</Button>
-								</DropdownMenuTrigger>
-								<DropdownMenuContent align="end">
-									<DropdownMenuItem
-										onClick={() => handleTogglePublic(prompt)}
-										disabled={togglingPublicIds.has(prompt.id)}
-									>
-										{togglingPublicIds.has(prompt.id) ? (
-											<Spinner className="size-4" />
-										) : prompt.is_public ? (
-											<Lock className="size-4" />
-										) : (
-											<Globe className="size-4" />
-										)}
-										{prompt.is_public ? "Make private" : "Share with community"}
-									</DropdownMenuItem>
-									<DropdownMenuItem onClick={() => handleEdit(prompt)}>
-										<Pencil className="size-4" />
-										Edit
-									</DropdownMenuItem>
-									<DropdownMenuItem
-										onClick={() => setDeleteTarget(prompt.id)}
-										className="text-destructive focus:text-destructive"
-									>
-										<Trash2 className="size-4" />
-										Delete
-									</DropdownMenuItem>
-								</DropdownMenuContent>
-							</DropdownMenu>
-						</div>
-					))}
-				</div>
-			)}
-
-			<AlertDialog
-				open={deleteTarget !== null}
-				onOpenChange={(open) => !open && setDeleteTarget(null)}
-			>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle>Delete prompt</AlertDialogTitle>
-						<AlertDialogDescription>
-							This action cannot be undone. The prompt will be permanently removed.
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<AlertDialogFooter>
-						<AlertDialogCancel>Cancel</AlertDialogCancel>
-						<AlertDialogAction onClick={handleConfirmDelete}>Delete</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PurchaseHistoryContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PurchaseHistoryContent.tsx
deleted file mode 100644
index 263a286c1..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PurchaseHistoryContent.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-"use client";
-
-import { useQueries } from "@tanstack/react-query";
-import { Coins, FileText, ReceiptText } from "lucide-react";
-import { useMemo } from "react";
-import { Badge } from "@/components/ui/badge";
-import { Spinner } from "@/components/ui/spinner";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table";
-import type { CreditPurchase, PagePurchase, PurchaseStatus } from "@/contracts/types/stripe.types";
-import { stripeApiService } from "@/lib/apis/stripe-api.service";
-import { cn } from "@/lib/utils";
-
-type PurchaseKind = "pages" | "credits";
-
-type UnifiedPurchase = {
-	id: string;
-	kind: PurchaseKind;
-	created_at: string;
-	status: PurchaseStatus;
-	/**
-	 * Granted units. Interpretation depends on ``kind``:
-	 *  - ``"pages"`` — integer number of indexed pages (legacy history).
-	 *  - ``"credits"`` — integer micro-USD of credit (1_000_000 = $1.00).
-	 * The ``Granted`` column formats accordingly.
-	 */
-	granted: number;
-	amount_total: number | null;
-	currency: string | null;
-};
-
-const STATUS_STYLES: Record<PurchaseStatus, { label: string; className: string }> = {
-	completed: {
-		label: "Completed",
-		className: "bg-emerald-600 text-white border-transparent hover:bg-emerald-600",
-	},
-	pending: {
-		label: "Pending",
-		className: "bg-yellow-600 text-white border-transparent hover:bg-yellow-600",
-	},
-	failed: {
-		label: "Failed",
-		className: "bg-destructive text-white border-transparent hover:bg-destructive",
-	},
-};
-
-const KIND_META: Record<
-	PurchaseKind,
-	{ label: string; icon: React.ComponentType<{ className?: string }>; iconClass: string }
-> = {
-	pages: {
-		label: "Pages",
-		icon: FileText,
-		iconClass: "text-sky-500",
-	},
-	credits: {
-		label: "Credits",
-		icon: Coins,
-		iconClass: "text-amber-500",
-	},
-};
-
-function formatDate(iso: string): string {
-	return new Date(iso).toLocaleDateString(undefined, {
-		year: "numeric",
-		month: "short",
-		day: "numeric",
-	});
-}
-
-function formatAmount(amount: number | null, currency: string | null): string {
-	if (amount == null) return "—";
-	const dollars = amount / 100;
-	const code = (currency ?? "usd").toUpperCase();
-	return `$${dollars.toFixed(2)} ${code}`;
-}
-
-function normalizePagePurchase(p: PagePurchase): UnifiedPurchase {
-	return {
-		id: p.id,
-		kind: "pages",
-		created_at: p.created_at,
-		status: p.status,
-		granted: p.pages_granted,
-		amount_total: p.amount_total,
-		currency: p.currency,
-	};
-}
-
-function normalizeCreditPurchase(p: CreditPurchase): UnifiedPurchase {
-	return {
-		id: p.id,
-		kind: "credits",
-		created_at: p.created_at,
-		status: p.status,
-		granted: p.credit_micros_granted,
-		amount_total: p.amount_total,
-		currency: p.currency,
-	};
-}
-
-function formatGranted(p: UnifiedPurchase): string {
-	if (p.kind === "credits") {
-		const dollars = p.granted / 1_000_000;
-		// Credit packs are always whole dollars at the moment, but future
-		// fractional grants (refunds, partial top-ups, auto-reload) shouldn't
-		// silently round to "$0".
-		if (dollars >= 1) return `$${dollars.toFixed(2)} of credit`;
-		if (dollars > 0) return `$${dollars.toFixed(3)} of credit`;
-		return "$0 of credit";
-	}
-	return p.granted.toLocaleString();
-}
-
-export function PurchaseHistoryContent() {
-	const results = useQueries({
-		queries: [
-			{
-				queryKey: ["stripe-purchases"],
-				queryFn: () => stripeApiService.getPagePurchases(),
-			},
-			{
-				queryKey: ["stripe-credit-purchases"],
-				queryFn: () => stripeApiService.getCreditPurchases(),
-			},
-		],
-	});
-
-	const [pagesQuery, creditsQuery] = results;
-	const isLoading = pagesQuery.isLoading || creditsQuery.isLoading;
-
-	const purchases = useMemo<UnifiedPurchase[]>(() => {
-		const pagePurchases = pagesQuery.data?.purchases ?? [];
-		const creditPurchases = creditsQuery.data?.purchases ?? [];
-		return [
-			...pagePurchases.map(normalizePagePurchase),
-			...creditPurchases.map(normalizeCreditPurchase),
-		].sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
-	}, [pagesQuery.data, creditsQuery.data]);
-
-	if (isLoading) {
-		return (
-			<div className="flex items-center justify-center py-12">
-				<Spinner size="md" className="text-muted-foreground" />
-			</div>
-		);
-	}
-
-	if (purchases.length === 0) {
-		return (
-			<div className="flex flex-col items-center justify-center gap-2 py-16 text-center">
-				<ReceiptText className="h-8 w-8 text-muted-foreground" />
-				<p className="text-sm font-medium">No purchases yet</p>
-				<p className="text-xs text-muted-foreground">
-					Your credit purchases will appear here after checkout.
-				</p>
-			</div>
-		);
-	}
-
-	return (
-		<div className="space-y-4">
-			<div className="rounded-lg border">
-				<Table>
-					<TableHeader>
-						<TableRow>
-							<TableHead>Date</TableHead>
-							<TableHead>Type</TableHead>
-							<TableHead className="text-right">Granted</TableHead>
-							<TableHead className="text-right">Amount</TableHead>
-							<TableHead className="text-center">Status</TableHead>
-						</TableRow>
-					</TableHeader>
-					<TableBody>
-						{purchases.map((p) => {
-							const statusStyle = STATUS_STYLES[p.status];
-							const kind = KIND_META[p.kind];
-							const KindIcon = kind.icon;
-							return (
-								<TableRow key={`${p.kind}-${p.id}`}>
-									<TableCell className="text-sm">{formatDate(p.created_at)}</TableCell>
-									<TableCell className="text-sm">
-										<div className="flex items-center gap-2">
-											<KindIcon className={cn("h-4 w-4", kind.iconClass)} />
-											<span>{kind.label}</span>
-										</div>
-									</TableCell>
-									<TableCell className="text-right tabular-nums text-sm">
-										{formatGranted(p)}
-									</TableCell>
-									<TableCell className="text-right tabular-nums text-sm">
-										{formatAmount(p.amount_total, p.currency)}
-									</TableCell>
-									<TableCell className="text-center">
-										<Badge className={cn("text-[10px]", statusStyle.className)}>
-											{statusStyle.label}
-										</Badge>
-									</TableCell>
-								</TableRow>
-							);
-						})}
-					</TableBody>
-				</Table>
-			</div>
-			<p className="text-center text-xs text-muted-foreground">
-				Showing your {purchases.length} most recent purchase
-				{purchases.length !== 1 ? "s" : ""}.
-			</p>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/desktop/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/desktop/page.tsx
deleted file mode 100644
index a7b0d1d27..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/desktop/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { DesktopContent } from "../components/DesktopContent";
-
-export default function Page() {
-	return <DesktopContent />;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/hotkeys/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/hotkeys/page.tsx
deleted file mode 100644
index 8f776f738..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/hotkeys/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { HotkeysContent } from "../components/HotkeysContent";
-
-export default function Page() {
-	return <HotkeysContent />;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/layout-shell.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/layout-shell.tsx
deleted file mode 100644
index 4aac4d2f6..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/layout-shell.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-"use client";
-
-import {
-	CircleUser,
-	Keyboard,
-	KeyRound,
-	Library,
-	MessageCircle,
-	Monitor,
-	ReceiptText,
-	ShieldCheck,
-	WandSparkles,
-	Workflow,
-} from "lucide-react";
-import Link from "next/link";
-import { useSelectedLayoutSegment } from "next/navigation";
-import { useTranslations } from "next-intl";
-import type React from "react";
-import { useCallback, useMemo, useState } from "react";
-import { Separator } from "@/components/ui/separator";
-import { usePlatform } from "@/hooks/use-platform";
-import { cn } from "@/lib/utils";
-
-export type UserSettingsTab =
-	| "profile"
-	| "api-key"
-	| "prompts"
-	| "community-prompts"
-	| "agent-permissions"
-	| "agent-status"
-	| "purchases"
-	| "desktop"
-	| "hotkeys"
-	| "messaging-channels";
-
-const DEFAULT_TAB: UserSettingsTab = "profile";
-
-interface UserSettingsLayoutShellProps {
-	searchSpaceId: string;
-	children: React.ReactNode;
-}
-
-export function UserSettingsLayoutShell({ searchSpaceId, children }: UserSettingsLayoutShellProps) {
-	const t = useTranslations("userSettings");
-	const { isDesktop } = usePlatform();
-	const segment = useSelectedLayoutSegment();
-	const [tabScrollPos, setTabScrollPos] = useState<"start" | "middle" | "end">("start");
-
-	const handleTabScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
-		const el = e.currentTarget;
-		const atStart = el.scrollLeft <= 2;
-		const atEnd = el.scrollWidth - el.scrollLeft - el.clientWidth <= 2;
-		setTabScrollPos(atStart ? "start" : atEnd ? "end" : "middle");
-	}, []);
-
-	const navItems = useMemo(
-		() => [
-			{
-				value: "profile" as const,
-				label: t("profile_nav_label"),
-				icon: <CircleUser className="h-4 w-4" />,
-			},
-			{
-				value: "api-key" as const,
-				label: t("api_key_nav_label"),
-				icon: <KeyRound className="h-4 w-4" />,
-			},
-			{
-				value: "prompts" as const,
-				label: "My Prompts",
-				icon: <WandSparkles className="h-4 w-4" />,
-			},
-			{
-				value: "community-prompts" as const,
-				label: "Community Prompts",
-				icon: <Library className="h-4 w-4" />,
-			},
-			{
-				value: "agent-permissions" as const,
-				label: "Agent Permissions",
-				icon: <ShieldCheck className="h-4 w-4" />,
-			},
-			{
-				value: "agent-status" as const,
-				label: "Agent Status",
-				icon: <Workflow className="h-4 w-4" />,
-			},
-			{
-				value: "messaging-channels" as const,
-				label: "Messaging Channels",
-				icon: <MessageCircle className="h-4 w-4" />,
-			},
-			{
-				value: "purchases" as const,
-				label: "Purchase History",
-				icon: <ReceiptText className="h-4 w-4" />,
-			},
-			...(isDesktop
-				? [
-						{
-							value: "desktop" as const,
-							label: "App Preferences",
-							icon: <Monitor className="h-4 w-4" />,
-						},
-						{
-							value: "hotkeys" as const,
-							label: "Hotkeys",
-							icon: <Keyboard className="h-4 w-4" />,
-						},
-					]
-				: []),
-		],
-		[t, isDesktop]
-	);
-
-	const activeTab: UserSettingsTab =
-		segment && navItems.some((item) => item.value === segment)
-			? (segment as UserSettingsTab)
-			: DEFAULT_TAB;
-	const selectedLabel = navItems.find((item) => item.value === activeTab)?.label ?? t("title");
-
-	const hrefFor = (tab: UserSettingsTab) => `/dashboard/${searchSpaceId}/user-settings/${tab}`;
-
-	return (
-		<section className="flex h-full min-h-[min(680px,calc(100vh-5rem))] w-full select-none flex-col gap-6 md:pt-10 md:flex-row">
-			<div className="md:w-[220px] md:shrink-0">
-				<h1 className="mb-4 px-1 text-2xl font-semibold tracking-tight">{t("title")}</h1>
-				<nav className="hidden flex-col gap-0.5 md:flex">
-					{navItems.map((item) => (
-						<Link
-							key={item.value}
-							href={hrefFor(item.value)}
-							replace
-							scroll={false}
-							prefetch
-							className={cn(
-								"inline-flex h-auto items-center justify-start gap-3 rounded-md px-3 py-2.5 text-left text-sm font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
-								activeTab === item.value
-									? "bg-accent text-accent-foreground"
-									: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-							)}
-						>
-							{item.icon}
-							{item.label}
-						</Link>
-					))}
-				</nav>
-				<div
-					className="overflow-x-auto border-b border-border pb-3 md:hidden"
-					onScroll={handleTabScroll}
-					style={{
-						maskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
-						WebkitMaskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
-					}}
-				>
-					<div className="flex gap-1">
-						{navItems.map((item) => (
-							<Link
-								key={item.value}
-								href={hrefFor(item.value)}
-								replace
-								scroll={false}
-								prefetch
-								className={cn(
-									"inline-flex h-auto shrink-0 items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
-									activeTab === item.value
-										? "bg-accent text-accent-foreground"
-										: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-								)}
-							>
-								{item.icon}
-								{item.label}
-							</Link>
-						))}
-					</div>
-				</div>
-			</div>
-
-			<div className="min-w-0 flex-1">
-				<div className="hidden md:block">
-					<h2 className="text-lg font-semibold">{selectedLabel}</h2>
-					<Separator className="mt-4 bg-border" />
-				</div>
-				<div className="min-w-0 pt-4 md:max-w-3xl">{children}</div>
-			</div>
-		</section>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/layout.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/layout.tsx
deleted file mode 100644
index e1f97a903..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/layout.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type React from "react";
-import { use } from "react";
-import { UserSettingsLayoutShell } from "./layout-shell";
-
-export default function UserSettingsLayout({
-	params,
-	children,
-}: {
-	params: Promise<{ search_space_id: string }>;
-	children: React.ReactNode;
-}) {
-	const { search_space_id } = use(params);
-
-	return (
-		<UserSettingsLayoutShell searchSpaceId={search_space_id}>{children}</UserSettingsLayoutShell>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/messaging-channels/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/messaging-channels/page.tsx
deleted file mode 100644
index 335c7f084..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/messaging-channels/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { MessagingChannelsContent } from "../components/MessagingChannelsContent";
-
-export default function Page() {
-	return <MessagingChannelsContent />;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/page.tsx
deleted file mode 100644
index dde643142..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { redirect } from "next/navigation";
-
-export default async function UserSettingsPage({
-	params,
-}: {
-	params: Promise<{ search_space_id: string }>;
-}) {
-	const { search_space_id } = await params;
-	redirect(`/dashboard/${search_space_id}/user-settings/profile`);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/profile/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/profile/page.tsx
deleted file mode 100644
index 9275ed26c..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/profile/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { ProfileContent } from "../components/ProfileContent";
-
-export default function Page() {
-	return <ProfileContent />;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/prompts/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/prompts/page.tsx
deleted file mode 100644
index 559ce0a95..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/prompts/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { PromptsContent } from "../components/PromptsContent";
-
-export default function Page() {
-	return <PromptsContent />;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/purchases/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/purchases/page.tsx
deleted file mode 100644
index 55647fe29..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/purchases/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { AutoReloadSettings } from "@/components/settings/auto-reload-settings";
-import { PurchaseHistoryContent } from "../components/PurchaseHistoryContent";
-
-export default function Page() {
-	return (
-		<div className="space-y-6">
-			<AutoReloadSettings />
-			<PurchaseHistoryContent />
-		</div>
-	);
-}
diff --git a/surfsense_web/app/layout.tsx b/surfsense_web/app/layout.tsx
index 22125665b..d9e915d0f 100644
--- a/surfsense_web/app/layout.tsx
+++ b/surfsense_web/app/layout.tsx
@@ -50,51 +50,27 @@ export const metadata: Metadata = {
 	alternates: {
 		canonical: "https://www.surfsense.com",
 	},
-	title: "SurfSense - Open Source, Privacy-Focused NotebookLM Alternative for Teams",
+	title: "SurfSense - Competitive Intelligence Platform for AI Agents",
 	description:
-		"Open source NotebookLM alternative for teams with no data limits. Use ChatGPT, Claude AI, and any AI model for free.",
+		"SurfSense is an open-source competitive intelligence platform. Your AI agents monitor competitors, track rankings, and listen to your market through one API or MCP server.",
 	keywords: [
-		"chatgpt online",
-		"online chatgpt",
-		"chat gpt free",
-		"chatgpt free",
-		"free chatgpt",
-		"free chat gpt",
-		"chatgpt no login",
-		"chatgpt online free",
-		"chatgpt free online",
-		"chatgpt without login",
-		"free chatgpt without login",
-		"free chatgpt no login",
-		"chatgpt for free",
-		"claude ai free",
-		"claude free",
-		"free claude ai",
-		"free claude",
-		"chatgpt alternative free",
-		"free chatgpt alternative",
-		"free alternative to chatgpt",
-		"alternative to chatgpt free",
-		"chatgpt alternative online free",
-		"ai like chatgpt",
-		"sites like chatgpt",
-		"free ai chatbot like chatgpt",
-		"apps like chatgpt for free",
-		"free ai chatbots like chatgpt",
-		"best free alternative to chatgpt",
-		"free chatgpt alternative app",
-		"free chatgpt alternative with image upload",
-		"free ai apps",
-		"ai with no restrictions",
-		"notebooklm alternative",
-		"notebooklm alternative for teams",
-		"open source notebooklm alternative",
+		"competitive intelligence platform",
+		"competitive intelligence software",
+		"market intelligence tools",
+		"competitor monitoring",
+		"competitor price monitoring",
+		"brand monitoring",
+		"rank tracking",
+		"social listening",
+		"mcp server",
+		"agent harness",
+		"open source competitive intelligence",
 		"SurfSense",
 	],
 	openGraph: {
-		title: "SurfSense - Open Source, Privacy-Focused NotebookLM Alternative for Teams",
+		title: "SurfSense - Competitive Intelligence Platform for AI Agents",
 		description:
-			"Open source NotebookLM alternative for teams with no data limits. Use ChatGPT, Claude, and any AI model for free.",
+			"SurfSense is an open-source competitive intelligence platform. Your AI agents monitor competitors, track rankings, and listen to your market through one API or MCP server.",
 		url: "https://www.surfsense.com",
 		siteName: "SurfSense",
 		type: "website",
@@ -103,16 +79,16 @@ export const metadata: Metadata = {
 				url: "/og-image.png",
 				width: 1200,
 				height: 630,
-				alt: "SurfSense - Open Source NotebookLM Alternative with Free ChatGPT and Claude AI",
+				alt: "SurfSense - Competitive Intelligence Platform for AI Agents",
 			},
 		],
 		locale: "en_US",
 	},
 	twitter: {
 		card: "summary_large_image",
-		title: "SurfSense - Open Source, Privacy-Focused NotebookLM Alternative for Teams",
+		title: "SurfSense - Competitive Intelligence Platform for AI Agents",
 		description:
-			"Open source NotebookLM alternative for teams with no data limits. Use ChatGPT, Claude AI, and any AI model for free.",
+			"SurfSense is an open-source competitive intelligence platform. Your AI agents monitor competitors, track rankings, and listen to your market through one API or MCP server.",
 		creator: "@SurfSenseAI",
 		site: "@SurfSenseAI",
 		images: [
@@ -120,7 +96,7 @@ export const metadata: Metadata = {
 				url: "/og-image-twitter.png",
 				width: 1200,
 				height: 630,
-				alt: "SurfSense - Open Source NotebookLM Alternative with Free ChatGPT and Claude AI",
+				alt: "SurfSense - Competitive Intelligence Platform for AI Agents",
 			},
 		],
 	},
diff --git a/surfsense_web/app/sitemap.ts b/surfsense_web/app/sitemap.ts
index d0de9fb3e..3ffed6531 100644
--- a/surfsense_web/app/sitemap.ts
+++ b/surfsense_web/app/sitemap.ts
@@ -1,6 +1,7 @@
 import { loader } from "fumadocs-core/source";
 import type { MetadataRoute } from "next";
 import { blog, changelog } from "@/.source/server";
+import { getAllConnectorSlugs } from "@/lib/connectors-marketing";
 import { SERVER_BACKEND_URL } from "@/lib/env-config";
 import { source as docsSource } from "@/lib/source";
 
@@ -39,6 +40,8 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
 	const staticPages: MetadataRoute.Sitemap = [
 		{ url: `${BASE_URL}/`, lastModified, changeFrequency: "daily", priority: 1 },
 		{ url: `${BASE_URL}/free`, lastModified, changeFrequency: "daily", priority: 0.95 },
+		{ url: `${BASE_URL}/connectors`, lastModified, changeFrequency: "weekly", priority: 0.9 },
+		{ url: `${BASE_URL}/mcp-connector`, lastModified, changeFrequency: "weekly", priority: 0.85 },
 		{ url: `${BASE_URL}/pricing`, lastModified, changeFrequency: "weekly", priority: 0.9 },
 		{ url: `${BASE_URL}/contact`, lastModified, changeFrequency: "monthly", priority: 0.7 },
 		{ url: `${BASE_URL}/blog`, lastModified, changeFrequency: "daily", priority: 0.9 },
@@ -59,6 +62,13 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
 		priority: 0.9,
 	}));
 
+	const connectorPages: MetadataRoute.Sitemap = getAllConnectorSlugs().map((slug) => ({
+		url: `${BASE_URL}/${slug}`,
+		lastModified,
+		changeFrequency: "weekly" as const,
+		priority: 0.85,
+	}));
+
 	const docsPages: MetadataRoute.Sitemap = docsSource.getPages().map((page) => ({
 		url: `${BASE_URL}${page.url}`,
 		lastModified,
@@ -80,5 +90,12 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
 		priority: 0.5,
 	}));
 
-	return [...staticPages, ...freeModelPages, ...docsPages, ...blogPages, ...changelogPages];
+	return [
+		...staticPages,
+		...connectorPages,
+		...freeModelPages,
+		...docsPages,
+		...blogPages,
+		...changelogPages,
+	];
 }
diff --git a/surfsense_web/components/connectors-marketing/agent-transcript.tsx b/surfsense_web/components/connectors-marketing/agent-transcript.tsx
new file mode 100644
index 000000000..62b0ac0ee
--- /dev/null
+++ b/surfsense_web/components/connectors-marketing/agent-transcript.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import { Check } from "lucide-react";
+import { motion, useReducedMotion, type Variants } from "motion/react";
+import { useEffect, useState } from "react";
+import type { AgentTranscript as AgentTranscriptModel } from "@/lib/connectors-marketing/types";
+import { cn } from "@/lib/utils";
+
+// Custom ease-out: fast start, gentle settle. Never ease-in for entrances.
+const EASE_OUT: [number, number, number, number] = [0.16, 1, 0.3, 1];
+
+const container: Variants = {
+	hidden: {},
+	show: { transition: { staggerChildren: 0.06, delayChildren: 0.08 } },
+};
+
+// Enter from a small offset + fade. Never from scale(0). Under 300ms per item.
+const item: Variants = {
+	hidden: { opacity: 0, y: 8 },
+	show: { opacity: 1, y: 0, transition: { duration: 0.24, ease: EASE_OUT } },
+};
+
+/** Reveal a string one character at a time. Returns the full string instantly when disabled. */
+function useTypedText(text: string, enabled: boolean, speedMs = 16) {
+	const [count, setCount] = useState(enabled ? 0 : text.length);
+
+	useEffect(() => {
+		if (!enabled) {
+			setCount(text.length);
+			return;
+		}
+		setCount(0);
+		let i = 0;
+		const id = window.setInterval(() => {
+			i += 1;
+			setCount(i);
+			if (i >= text.length) window.clearInterval(id);
+		}, speedMs);
+		return () => window.clearInterval(id);
+	}, [text, enabled, speedMs]);
+
+	return { shown: text.slice(0, count), done: count >= text.length };
+}
+
+export function AgentTranscript({
+	transcript,
+	className,
+}: {
+	transcript: AgentTranscriptModel;
+	className?: string;
+}) {
+	const reduce = useReducedMotion() ?? false;
+	const animate = !reduce;
+	const { shown: typedPrompt, done: promptDone } = useTypedText(transcript.prompt, animate);
+	const revealed = promptDone;
+
+	return (
+		<div
+			className={cn(
+				"w-full overflow-hidden rounded-xl border bg-card shadow-sm",
+				"font-mono text-sm",
+				className
+			)}
+		>
+			{/* Window chrome */}
+			<div className="flex items-center gap-2 border-b bg-muted/40 px-4 py-2.5">
+				<span className="flex gap-1.5" aria-hidden>
+					<span className="size-2.5 rounded-full bg-muted-foreground/25" />
+					<span className="size-2.5 rounded-full bg-muted-foreground/25" />
+					<span className="size-2.5 rounded-full bg-muted-foreground/25" />
+				</span>
+				<span className="ml-1 text-xs text-muted-foreground">agent · surfsense</span>
+			</div>
+
+			<div className="space-y-4 p-4 sm:p-5">
+				{/* Prompt line (typed) */}
+				<p className="flex flex-wrap items-baseline gap-x-2 leading-relaxed">
+					<span className="select-none text-muted-foreground">$</span>
+					<span className="text-foreground">
+						{typedPrompt}
+						{animate && !promptDone && (
+							<span className="ml-0.5 inline-block h-3.5 w-1.5 translate-y-0.5 animate-pulse bg-foreground/70" />
+						)}
+					</span>
+				</p>
+
+				{/* Tool call + results reveal only after the prompt is typed */}
+				<motion.div
+					className="space-y-4"
+					variants={container}
+					initial={animate ? "hidden" : false}
+					animate={revealed ? "show" : "hidden"}
+				>
+					<motion.pre
+						variants={item}
+						className="overflow-x-auto rounded-lg border bg-muted/50 px-3 py-2.5 text-xs leading-relaxed text-muted-foreground"
+					>
+						<code className="whitespace-pre-wrap wrap-break-word text-foreground/80">
+							{transcript.toolCall}
+						</code>
+					</motion.pre>
+
+					<ul className="space-y-2">
+						{transcript.rows.map((row) => (
+							<motion.li
+								key={row.primary}
+								variants={item}
+								className="flex items-start justify-between gap-3 rounded-lg border bg-background px-3 py-2.5"
+							>
+								<span className="min-w-0">
+									<span className="block truncate text-[13px] font-medium text-foreground">
+										{row.primary}
+									</span>
+									<span className="mt-0.5 block truncate text-xs text-muted-foreground">
+										{row.secondary}
+									</span>
+								</span>
+								{row.tag && (
+									<span className="shrink-0 rounded-full border border-brand/30 bg-brand/10 px-2 py-0.5 text-[10px] font-medium tracking-wide text-brand uppercase">
+										{row.tag}
+									</span>
+								)}
+							</motion.li>
+						))}
+					</ul>
+
+					<motion.p
+						variants={item}
+						className="flex items-center gap-1.5 text-xs text-muted-foreground"
+					>
+						<Check className="size-3.5 text-brand" aria-hidden />
+						{transcript.resultSummary}
+					</motion.p>
+				</motion.div>
+			</div>
+		</div>
+	);
+}
diff --git a/surfsense_web/components/connectors-marketing/api-mcp-tabs.tsx b/surfsense_web/components/connectors-marketing/api-mcp-tabs.tsx
new file mode 100644
index 000000000..6ca19c47b
--- /dev/null
+++ b/surfsense_web/components/connectors-marketing/api-mcp-tabs.tsx
@@ -0,0 +1,255 @@
+"use client";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { ApiSample } from "@/lib/connectors-marketing/types";
+
+/** Pretty-print the request body as canonical JSON (a valid JS/JSON object literal). */
+function prettyJson(requestBody: Record<string, unknown>): string {
+	return JSON.stringify(requestBody, null, 2);
+}
+
+/** Indent every line except the first by `pad` (for splicing a JSON block inline). */
+function indentRest(text: string, pad: string): string {
+	return text
+		.split("\n")
+		.map((line, i) => (i === 0 ? line : pad + line))
+		.join("\n");
+}
+
+/** Render one request-body value as a Python literal (True/False, not true/false). */
+function toPythonValue(value: unknown): string {
+	if (typeof value === "boolean") return value ? "True" : "False";
+	if (Array.isArray(value)) return `[${value.map((v) => JSON.stringify(v)).join(", ")}]`;
+	return JSON.stringify(value);
+}
+
+/**
+ * `"key" <arrow> <json-value>,` lines for languages whose literal syntax matches
+ * JSON scalar/array values (Ruby hashes, PHP arrays).
+ */
+function kvLines(requestBody: Record<string, unknown>, arrow: string, pad: string): string {
+	return Object.entries(requestBody)
+		.map(([k, v]) => `${pad}"${k}" ${arrow} ${JSON.stringify(v)},`)
+		.join("\n");
+}
+
+function buildCurl({ platform, verb, requestBody }: ApiSample): string {
+	const body = indentRest(prettyJson(requestBody), "  ");
+	return [
+		`curl -X POST "$SURFSENSE_API_URL/workspaces/$WORKSPACE_ID/scrapers/${platform}/${verb}" \\`,
+		`  -H "Authorization: Bearer $SURFSENSE_API_KEY" \\`,
+		`  -H "Content-Type: application/json" \\`,
+		`  -d '${body}'`,
+	].join("\n");
+}
+
+function buildPython({ platform, verb, requestBody }: ApiSample): string {
+	const entries = Object.entries(requestBody)
+		.map(([k, v]) => `        ${JSON.stringify(k)}: ${toPythonValue(v)},`)
+		.join("\n");
+	return [
+		"import os",
+		"import requests",
+		"",
+		"base = os.environ['SURFSENSE_API_URL']",
+		"key = os.environ['SURFSENSE_API_KEY']",
+		"",
+		"resp = requests.post(",
+		`    f"{base}/workspaces/{WORKSPACE_ID}/scrapers/${platform}/${verb}",`,
+		'    headers={"Authorization": f"Bearer {key}"},',
+		"    json={",
+		entries,
+		"    },",
+		")",
+		"resp.raise_for_status()",
+		'items = resp.json()["items"]',
+	].join("\n");
+}
+
+function buildJavaScript({ platform, verb, requestBody }: ApiSample): string {
+	return [
+		`const payload = ${prettyJson(requestBody)};`,
+		"",
+		"const res = await fetch(",
+		"  `${process.env.SURFSENSE_API_URL}/workspaces/${WORKSPACE_ID}/scrapers/" +
+			platform +
+			"/" +
+			verb +
+			"`,",
+		"  {",
+		'    method: "POST",',
+		"    headers: {",
+		"      Authorization: `Bearer ${process.env.SURFSENSE_API_KEY}`,",
+		'      "Content-Type": "application/json",',
+		"    },",
+		"    body: JSON.stringify(payload),",
+		"  },",
+		");",
+		"const { items } = await res.json();",
+	].join("\n");
+}
+
+function buildGo({ platform, verb, requestBody }: ApiSample): string {
+	return [
+		"package main",
+		"",
+		"import (",
+		'\t"bytes"',
+		'\t"net/http"',
+		'\t"os"',
+		")",
+		"",
+		"func main() {",
+		"\tpayload := []byte(`" + prettyJson(requestBody) + "`)",
+		'\turl := os.Getenv("SURFSENSE_API_URL") + "/workspaces/" +',
+		'\t\tos.Getenv("WORKSPACE_ID") + "/scrapers/' + platform + "/" + verb + '"',
+		'\treq, _ := http.NewRequest("POST", url, bytes.NewReader(payload))',
+		'\treq.Header.Set("Authorization", "Bearer "+os.Getenv("SURFSENSE_API_KEY"))',
+		'\treq.Header.Set("Content-Type", "application/json")',
+		"\tresp, _ := http.DefaultClient.Do(req)",
+		"\tdefer resp.Body.Close()",
+		"}",
+	].join("\n");
+}
+
+function buildPhp({ platform, verb, requestBody }: ApiSample): string {
+	return [
+		"<?php",
+		"$ch = curl_init();",
+		"curl_setopt_array($ch, [",
+		'    CURLOPT_URL => getenv("SURFSENSE_API_URL")',
+		'        . "/workspaces/" . getenv("WORKSPACE_ID")',
+		'        . "/scrapers/' + platform + "/" + verb + '",',
+		"    CURLOPT_POST => true,",
+		"    CURLOPT_RETURNTRANSFER => true,",
+		"    CURLOPT_HTTPHEADER => [",
+		'        "Authorization: Bearer " . getenv("SURFSENSE_API_KEY"),',
+		'        "Content-Type: application/json",',
+		"    ],",
+		"    CURLOPT_POSTFIELDS => json_encode([",
+		kvLines(requestBody, "=>", "        "),
+		"    ]),",
+		"]);",
+		'$items = json_decode(curl_exec($ch), true)["items"];',
+	].join("\n");
+}
+
+function buildRuby({ platform, verb, requestBody }: ApiSample): string {
+	return [
+		'require "net/http"',
+		'require "json"',
+		'require "uri"',
+		"",
+		"uri = URI(\"#{ENV['SURFSENSE_API_URL']}/workspaces/#{ENV['WORKSPACE_ID']}/scrapers/" +
+			platform +
+			"/" +
+			verb +
+			'")',
+		"req = Net::HTTP::Post.new(uri)",
+		'req["Authorization"] = "Bearer #{ENV[\'SURFSENSE_API_KEY\']}"',
+		'req["Content-Type"] = "application/json"',
+		"req.body = {",
+		kvLines(requestBody, "=>", "  "),
+		"}.to_json",
+		"",
+		"res = Net::HTTP.start(uri.host, uri.port, use_ssl: true) { |http| http.request(req) }",
+		'items = JSON.parse(res.body)["items"]',
+	].join("\n");
+}
+
+function buildJava({ platform, verb, requestBody }: ApiSample): string {
+	return [
+		"import java.net.URI;",
+		"import java.net.http.HttpClient;",
+		"import java.net.http.HttpRequest;",
+		"import java.net.http.HttpResponse;",
+		"",
+		"var client = HttpClient.newHttpClient();",
+		'String payload = """',
+		prettyJson(requestBody),
+		'""";',
+		"var request = HttpRequest.newBuilder()",
+		'    .uri(URI.create(System.getenv("SURFSENSE_API_URL")',
+		'        + "/workspaces/" + System.getenv("WORKSPACE_ID")',
+		'        + "/scrapers/' + platform + "/" + verb + '"))',
+		'    .header("Authorization", "Bearer " + System.getenv("SURFSENSE_API_KEY"))',
+		'    .header("Content-Type", "application/json")',
+		"    .POST(HttpRequest.BodyPublishers.ofString(payload))",
+		"    .build();",
+		"var response = client.send(request, HttpResponse.BodyHandlers.ofString());",
+	].join("\n");
+}
+
+function buildCsharp({ platform, verb, requestBody }: ApiSample): string {
+	return [
+		"using System;",
+		"using System.Net.Http;",
+		"using System.Text;",
+		"",
+		"var http = new HttpClient();",
+		'var url = Environment.GetEnvironmentVariable("SURFSENSE_API_URL")',
+		'    + "/workspaces/" + Environment.GetEnvironmentVariable("WORKSPACE_ID")',
+		'    + "/scrapers/' + platform + "/" + verb + '";',
+		'var payload = """',
+		prettyJson(requestBody),
+		'""";',
+		"var request = new HttpRequestMessage(HttpMethod.Post, url)",
+		"{",
+		'    Content = new StringContent(payload, Encoding.UTF8, "application/json"),',
+		"};",
+		'request.Headers.Add("Authorization", "Bearer " + Environment.GetEnvironmentVariable("SURFSENSE_API_KEY"));',
+		"var response = await http.SendAsync(request);",
+	].join("\n");
+}
+
+function buildMcp({ mcpTool }: ApiSample): string {
+	const config = {
+		mcpServers: {
+			surfsense: {
+				url: "https://mcp.surfsense.com",
+				headers: { Authorization: "Bearer ${SURFSENSE_API_KEY}" },
+			},
+		},
+	};
+	return `${JSON.stringify(config, null, 2)}\n\n# Your agent can now call the ${mcpTool} tool.`;
+}
+
+/** Ordered language set for the code-sample tabs. cURL is the default. */
+const SAMPLES: { value: string; label: string; build: (api: ApiSample) => string }[] = [
+	{ value: "curl", label: "cURL", build: buildCurl },
+	{ value: "python", label: "Python", build: buildPython },
+	{ value: "javascript", label: "JavaScript", build: buildJavaScript },
+	{ value: "go", label: "Go", build: buildGo },
+	{ value: "php", label: "PHP", build: buildPhp },
+	{ value: "ruby", label: "Ruby", build: buildRuby },
+	{ value: "java", label: "Java", build: buildJava },
+	{ value: "csharp", label: "C#", build: buildCsharp },
+	{ value: "mcp", label: "MCP", build: buildMcp },
+];
+
+function CodeBlock({ code }: { code: string }) {
+	return (
+		<pre className="overflow-x-auto rounded-lg border bg-muted/50 p-4 text-xs leading-relaxed">
+			<code className="font-mono text-foreground/90">{code}</code>
+		</pre>
+	);
+}
+
+export function ApiMcpTabs({ api }: { api: ApiSample }) {
+	return (
+		<Tabs defaultValue="curl" className="w-full">
+			<TabsList className="flex h-auto flex-wrap justify-start gap-1">
+				{SAMPLES.map((sample) => (
+					<TabsTrigger key={sample.value} value={sample.value}>
+						{sample.label}
+					</TabsTrigger>
+				))}
+			</TabsList>
+			{SAMPLES.map((sample) => (
+				<TabsContent key={sample.value} value={sample.value}>
+					<CodeBlock code={sample.build(api)} />
+				</TabsContent>
+			))}
+		</Tabs>
+	);
+}
diff --git a/surfsense_web/components/connectors-marketing/connector-faq.tsx b/surfsense_web/components/connectors-marketing/connector-faq.tsx
new file mode 100644
index 000000000..343b5845e
--- /dev/null
+++ b/surfsense_web/components/connectors-marketing/connector-faq.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import type { FaqItem } from "@/lib/connectors-marketing/types";
+
+export function ConnectorFaq({ items }: { items: FaqItem[] }) {
+	return (
+		<Accordion type="single" collapsible className="w-full">
+			{items.map((item, i) => (
+				<AccordionItem key={item.question} value={`item-${i}`}>
+					<AccordionTrigger className="text-base">{item.question}</AccordionTrigger>
+					<AccordionContent className="text-muted-foreground leading-relaxed">
+						{item.answer}
+					</AccordionContent>
+				</AccordionItem>
+			))}
+		</Accordion>
+	);
+}
diff --git a/surfsense_web/components/connectors-marketing/connector-page.tsx b/surfsense_web/components/connectors-marketing/connector-page.tsx
new file mode 100644
index 000000000..27fce9977
--- /dev/null
+++ b/surfsense_web/components/connectors-marketing/connector-page.tsx
@@ -0,0 +1,232 @@
+import { IconBrandGithub } from "@tabler/icons-react";
+import { ArrowRight, Check } from "lucide-react";
+import Link from "next/link";
+import { MarketingSection } from "@/components/marketing/section";
+import { BreadcrumbNav } from "@/components/seo/breadcrumb-nav";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import type { ConnectorPageContent } from "@/lib/connectors-marketing/types";
+import { AgentTranscript } from "./agent-transcript";
+import { ApiMcpTabs } from "./api-mcp-tabs";
+import { ConnectorFaq } from "./connector-faq";
+import { Reveal } from "./reveal";
+
+const GITHUB_URL = "https://github.com/MODSetter/SurfSense";
+
+export function ConnectorPage({ content }: { content: ConnectorPageContent }) {
+	const Icon = content.icon;
+	const label = content.cardTitle ?? `${content.name} API`;
+
+	return (
+		<div className="pb-4">
+			{/* Hero */}
+			<MarketingSection className="pt-28 pb-12 sm:pt-32 sm:pb-16">
+				<div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-14">
+					<div>
+						<BreadcrumbNav
+							className="mb-6"
+							items={[
+								{ name: "Connectors", href: "/connectors" },
+								{ name: content.name, href: `/${content.slug}` },
+							]}
+						/>
+						<Badge variant="outline" className="mb-5 gap-1.5 py-1">
+							<Icon className="size-3.5" />
+							{content.name} connector
+						</Badge>
+						<h1 className="text-3xl font-bold tracking-tight text-balance sm:text-4xl lg:text-5xl">
+							{content.h1}
+						</h1>
+						<p className="mt-5 max-w-xl text-base leading-relaxed text-muted-foreground sm:text-lg">
+							{content.heroLede}
+						</p>
+						<div className="mt-8 flex flex-wrap items-center gap-3">
+							<Button asChild size="lg">
+								<Link href="/register">
+									Start for free
+									<ArrowRight className="size-4" />
+								</Link>
+							</Button>
+							<Button asChild variant="outline" size="lg">
+								<Link href="/docs">Read the docs</Link>
+							</Button>
+							<Button asChild variant="ghost" size="lg">
+								<Link href={GITHUB_URL} target="_blank" rel="noopener noreferrer">
+									<IconBrandGithub className="size-4" />
+									GitHub
+								</Link>
+							</Button>
+						</div>
+					</div>
+					<AgentTranscript transcript={content.transcript} />
+				</div>
+			</MarketingSection>
+
+			{/* What you can extract */}
+			<MarketingSection>
+				<Reveal>
+					<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
+						What you can extract from {content.name}
+					</h2>
+					<p className="mt-3 max-w-2xl text-muted-foreground leading-relaxed">
+						{content.extractIntro}
+					</p>
+				</Reveal>
+				<Reveal>
+					<div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+						{content.extractFields.map((field) => (
+							<div
+								key={field.label}
+								className="rounded-xl border bg-card p-5 transition-colors hover:border-brand/40"
+							>
+								<h3 className="flex items-center gap-2 font-semibold">
+									<Check className="size-4 text-brand" aria-hidden />
+									{field.label}
+								</h3>
+								<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+									{field.description}
+								</p>
+							</div>
+						))}
+					</div>
+				</Reveal>
+			</MarketingSection>
+
+			{/* Use cases */}
+			<MarketingSection>
+				<Reveal>
+					<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
+						{content.useCasesHeading}
+					</h2>
+				</Reveal>
+				<div className="mt-8 grid gap-6 sm:grid-cols-2">
+					{content.useCases.map((useCase) => (
+						<Reveal key={useCase.title}>
+							<div className="h-full rounded-xl border bg-card p-6">
+								<h3 className="text-lg font-semibold">{useCase.title}</h3>
+								<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+									{useCase.description}
+								</p>
+							</div>
+						</Reveal>
+					))}
+				</div>
+			</MarketingSection>
+
+			{/* API / MCP */}
+			<MarketingSection>
+				<Reveal>
+					<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
+						Call it from your code or your agent
+					</h2>
+					<p className="mt-3 max-w-2xl text-muted-foreground leading-relaxed">
+						One typed endpoint, one API key. Or add the SurfSense MCP server and let your agent call{" "}
+						<code className="rounded bg-muted px-1.5 py-0.5 font-mono text-sm">
+							{content.api.mcpTool}
+						</code>{" "}
+						as a native tool.
+					</p>
+				</Reveal>
+				<Reveal>
+					{/* Code capped at a readable measure; left edge stays on the page grid. */}
+					<div className="mt-8 max-w-4xl">
+						<ApiMcpTabs api={content.api} />
+					</div>
+				</Reveal>
+			</MarketingSection>
+
+			{/* Comparison */}
+			<MarketingSection>
+				<Reveal>
+					<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
+						{content.comparison.heading}
+					</h2>
+					<p className="mt-3 max-w-2xl text-muted-foreground leading-relaxed">
+						{content.comparison.intro}
+					</p>
+				</Reveal>
+				<Reveal>
+					<div className="mt-8 overflow-x-auto rounded-xl border bg-card">
+						<table className="w-full min-w-xl text-sm">
+							<thead>
+								<tr className="border-b bg-muted/40 text-left">
+									<th className="p-4 font-medium">Feature</th>
+									<th className="p-4 font-medium text-muted-foreground">
+										{content.comparison.columnLabel}
+									</th>
+									<th className="p-4 font-medium text-brand">SurfSense</th>
+								</tr>
+							</thead>
+							<tbody>
+								{content.comparison.rows.map((row) => (
+									<tr key={row.feature} className="border-b last:border-b-0">
+										<th scope="row" className="p-4 text-left font-medium">
+											{row.feature}
+										</th>
+										<td className="p-4 text-muted-foreground">{row.official}</td>
+										<td className="bg-brand/5 p-4 text-foreground">{row.surfsense}</td>
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
+				</Reveal>
+			</MarketingSection>
+
+			{/* FAQ */}
+			<MarketingSection>
+				<Reveal>
+					<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
+						{label}: frequently asked questions
+					</h2>
+				</Reveal>
+				<Reveal>
+					{/* Accordion capped at a readable measure; left edge stays on the page grid. */}
+					<div className="mt-6 max-w-3xl">
+						<ConnectorFaq items={content.faq} />
+					</div>
+				</Reveal>
+			</MarketingSection>
+
+			{/* Closing CTA + related */}
+			<MarketingSection>
+				<Reveal>
+					<div className="rounded-2xl border bg-card p-8 text-center sm:p-12">
+						<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
+							Point your agents at {content.name}
+						</h2>
+						<p className="mx-auto mt-3 max-w-xl text-muted-foreground leading-relaxed">
+							The {content.name} connector is one of many in the SurfSense{" "}
+							<Link href="/" className="font-medium text-foreground underline underline-offset-4">
+								competitive intelligence platform
+							</Link>
+							. Start free, no credit card required.
+						</p>
+						<div className="mt-7 flex flex-wrap justify-center gap-3">
+							<Button asChild size="lg">
+								<Link href="/register">
+									Start for free
+									<ArrowRight className="size-4" />
+								</Link>
+							</Button>
+							<Button asChild variant="outline" size="lg">
+								<Link href="/pricing">See pricing</Link>
+							</Button>
+						</div>
+
+						<Separator className="my-8" />
+
+						<nav aria-label="Other connectors" className="flex flex-wrap justify-center gap-2">
+							{content.related.map((link) => (
+								<Button key={link.href} asChild variant="ghost" size="sm">
+									<Link href={link.href}>{link.label}</Link>
+								</Button>
+							))}
+						</nav>
+					</div>
+				</Reveal>
+			</MarketingSection>
+		</div>
+	);
+}
diff --git a/surfsense_web/components/connectors-marketing/reveal.tsx b/surfsense_web/components/connectors-marketing/reveal.tsx
new file mode 100644
index 000000000..f725764ac
--- /dev/null
+++ b/surfsense_web/components/connectors-marketing/reveal.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { motion, useReducedMotion } from "motion/react";
+import type { ReactNode } from "react";
+
+const EASE_OUT: [number, number, number, number] = [0.16, 1, 0.3, 1];
+
+/**
+ * One quiet scroll reveal per section: fade + small rise, triggered once when
+ * the block enters the viewport. Renders statically under prefers-reduced-motion.
+ */
+export function Reveal({
+	children,
+	className,
+	delay = 0,
+}: {
+	children: ReactNode;
+	className?: string;
+	delay?: number;
+}) {
+	const reduce = useReducedMotion() ?? false;
+
+	if (reduce) {
+		return <div className={className}>{children}</div>;
+	}
+
+	return (
+		<motion.div
+			className={className}
+			initial={{ opacity: 0, y: 12 }}
+			whileInView={{ opacity: 1, y: 0 }}
+			viewport={{ once: true, amount: 0.2 }}
+			transition={{ duration: 0.28, ease: EASE_OUT, delay }}
+		>
+			{children}
+		</motion.div>
+	);
+}
diff --git a/surfsense_web/components/homepage/community-strip.tsx b/surfsense_web/components/homepage/community-strip.tsx
new file mode 100644
index 000000000..2f4b04cd8
--- /dev/null
+++ b/surfsense_web/components/homepage/community-strip.tsx
@@ -0,0 +1,48 @@
+import { IconBrandDiscord, IconBrandGithub } from "@tabler/icons-react";
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+import { Reveal } from "@/components/connectors-marketing/reveal";
+import { MarketingSection } from "@/components/marketing/section";
+import { Button } from "@/components/ui/button";
+
+const GITHUB_URL = "https://github.com/MODSetter/SurfSense";
+const DISCORD_URL = "https://discord.gg/ejRNvftDp9";
+
+/** Closing CTA doubling as the GitHub/community strip (brief section 7). */
+export function CommunityStrip() {
+	return (
+		<MarketingSection>
+			<Reveal>
+				<div className="rounded-2xl border bg-card p-8 text-center sm:p-12">
+					<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
+						Open source, built in public
+					</h2>
+					<p className="mx-auto mt-3 max-w-xl text-muted-foreground leading-relaxed">
+						No CI incumbent can show you its code. SurfSense can. Star the repository, join the
+						community, or self-host the whole platform. Start free, no credit card required.
+					</p>
+					<div className="mt-7 flex flex-wrap justify-center gap-3">
+						<Button asChild size="lg">
+							<Link href="/register">
+								Start for free
+								<ArrowRight className="size-4" />
+							</Link>
+						</Button>
+						<Button asChild variant="outline" size="lg">
+							<Link href={GITHUB_URL} target="_blank" rel="noopener noreferrer">
+								<IconBrandGithub className="size-4" />
+								Star on GitHub
+							</Link>
+						</Button>
+						<Button asChild variant="ghost" size="lg">
+							<Link href={DISCORD_URL} target="_blank" rel="noopener noreferrer">
+								<IconBrandDiscord className="size-4" />
+								Join Discord
+							</Link>
+						</Button>
+					</div>
+				</div>
+			</Reveal>
+		</MarketingSection>
+	);
+}
diff --git a/surfsense_web/components/homepage/compare-table.tsx b/surfsense_web/components/homepage/compare-table.tsx
new file mode 100644
index 000000000..85ad84277
--- /dev/null
+++ b/surfsense_web/components/homepage/compare-table.tsx
@@ -0,0 +1,81 @@
+import { Reveal } from "@/components/connectors-marketing/reveal";
+import { MarketingSection } from "@/components/marketing/section";
+
+const ROWS = [
+	{
+		feature: "Who does the work",
+		suites: "Analysts read human dashboards",
+		scrapers: "You build everything on raw data",
+		surfsense: "Your AI agents gather, analyze, and alert",
+	},
+	{
+		feature: "Intelligence layer",
+		suites: "Curated but slow, human-in-the-loop",
+		scrapers: "None; data only",
+		surfsense: "Agent harness turns live data into briefs",
+	},
+	{
+		feature: "Pricing",
+		suites: "Enterprise contracts, annual quotes",
+		scrapers: "Usage-priced infrastructure",
+		surfsense: "Self-serve, pay per item, free tier",
+	},
+	{
+		feature: "Developer surface",
+		suites: "No agent surface",
+		scrapers: "APIs, but no MCP or harness",
+		surfsense: "REST API with your API key, plus an MCP server for agents",
+	},
+	{
+		feature: "Open source",
+		suites: "No",
+		scrapers: "No",
+		surfsense: "Yes, self-hostable",
+	},
+];
+
+export function CompareTable() {
+	return (
+		<MarketingSection>
+			<Reveal>
+				<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">How SurfSense compares</h2>
+				<p className="mt-3 max-w-2xl text-muted-foreground leading-relaxed">
+					CI suites sell dashboards to analysts. Scraper APIs sell raw data to engineers. SurfSense
+					gives AI agents the data and the harness in one open-source platform.
+				</p>
+			</Reveal>
+			<Reveal>
+				<div className="mt-8 overflow-x-auto rounded-xl border bg-card">
+					<table className="w-full min-w-2xl text-sm">
+						<thead>
+							<tr className="border-b bg-muted/40 text-left">
+								<th className="p-4 font-medium">Feature</th>
+								<th className="p-4 font-medium text-muted-foreground">
+									CI suites
+									<span className="block text-xs font-normal">Crayon, Klue</span>
+								</th>
+								<th className="p-4 font-medium text-muted-foreground">
+									Scraper APIs
+									<span className="block text-xs font-normal">Bright Data, Apify</span>
+								</th>
+								<th className="p-4 font-medium text-brand">SurfSense</th>
+							</tr>
+						</thead>
+						<tbody>
+							{ROWS.map((row) => (
+								<tr key={row.feature} className="border-b last:border-b-0">
+									<th scope="row" className="p-4 text-left font-medium">
+										{row.feature}
+									</th>
+									<td className="p-4 text-muted-foreground">{row.suites}</td>
+									<td className="p-4 text-muted-foreground">{row.scrapers}</td>
+									<td className="bg-brand/5 p-4 text-foreground">{row.surfsense}</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			</Reveal>
+		</MarketingSection>
+	);
+}
diff --git a/surfsense_web/components/homepage/connector-grid.tsx b/surfsense_web/components/homepage/connector-grid.tsx
new file mode 100644
index 000000000..00f4dd38b
--- /dev/null
+++ b/surfsense_web/components/homepage/connector-grid.tsx
@@ -0,0 +1,68 @@
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+import { Reveal } from "@/components/connectors-marketing/reveal";
+import { MarketingSection } from "@/components/marketing/section";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { getAllConnectors } from "@/lib/connectors-marketing";
+
+/** Registry-driven connector grid with a live count badge (brief: never list connectors in copy). */
+export function ConnectorGrid() {
+	const connectors = getAllConnectors();
+
+	return (
+		<MarketingSection>
+			<Reveal>
+				<div className="flex flex-wrap items-center gap-3">
+					<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
+						Connectors for every platform your market uses
+					</h2>
+					<Badge variant="outline" className="py-1">
+						{connectors.length} connectors and growing
+					</Badge>
+				</div>
+				<p className="mt-3 max-w-2xl text-muted-foreground leading-relaxed">
+					Each connector is a platform-native REST API. Call it from your own app with your
+					SurfSense API key, or hand it to your agents through the SurfSense MCP server. Live data
+					in, structured intelligence out.
+				</p>
+			</Reveal>
+			<Reveal>
+				<div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+					{connectors.map((connector) => {
+						const Icon = connector.icon;
+						return (
+							<Link
+								key={connector.slug}
+								href={`/${connector.slug}`}
+								className="group flex flex-col rounded-xl border bg-card p-5 transition-colors hover:border-brand/40"
+							>
+								<span className="flex size-10 items-center justify-center rounded-lg border bg-muted/40 transition-transform duration-200 ease-out group-hover:scale-110 motion-reduce:transition-none motion-reduce:group-hover:scale-100">
+									<Icon className="size-5 text-foreground" />
+								</span>
+								<h3 className="mt-3 font-semibold">
+									{connector.cardTitle ?? `${connector.name} API`}
+								</h3>
+								<p className="mt-1.5 flex-1 text-sm leading-relaxed text-muted-foreground line-clamp-2">
+									{connector.heroLede}
+								</p>
+								<span className="mt-3 inline-flex items-center gap-1 text-sm font-medium text-foreground">
+									Explore
+									<ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
+								</span>
+							</Link>
+						);
+					})}
+				</div>
+				<div className="mt-6">
+					<Button asChild variant="outline">
+						<Link href="/connectors">
+							View all connectors
+							<ArrowRight className="size-4" />
+						</Link>
+					</Button>
+				</div>
+			</Reveal>
+		</MarketingSection>
+	);
+}
diff --git a/surfsense_web/components/homepage/cta.tsx b/surfsense_web/components/homepage/cta.tsx
deleted file mode 100644
index 7e21a7fe2..000000000
--- a/surfsense_web/components/homepage/cta.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-"use client";
-import { IconMessageCircleQuestion } from "@tabler/icons-react";
-import Link from "next/link";
-import type React from "react";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-
-export function CTAHomepage() {
-	return (
-		<section className="w-full grid grid-cols-1 md:grid-cols-3 my-20 md:my-20 justify-start relative z-20 max-w-7xl mx-auto bg-gradient-to-br from-gray-100 to-white dark:from-neutral-900 dark:to-neutral-950">
-			<GridLineHorizontal className="top-0" offset="200px" />
-			<GridLineHorizontal className="bottom-0 top-auto" offset="200px" />
-			<GridLineVertical className="left-0" offset="80px" />
-			<GridLineVertical className="left-auto right-0" offset="80px" />
-			<div className="md:col-span-2 p-8 md:p-14">
-				<h2 className="text-left text-neutral-500 dark:text-neutral-200 text-xl md:text-3xl tracking-tight font-medium">
-					Transform how your team{" "}
-					<span className="font-bold text-black dark:text-white">discovers and collaborates</span>
-				</h2>
-				<p className="text-left text-neutral-500 mt-4 max-w-lg dark:text-neutral-200 text-xl md:text-3xl tracking-tight font-medium">
-					Unite your <span className="text-sky-700">team's knowledge</span> in one collaborative
-					space with <span className="text-indigo-700">intelligent search</span>.
-				</p>
-
-				<div className="flex items-start sm:items-center flex-col sm:flex-row sm:gap-4">
-					<Button
-						asChild
-						variant="ghost"
-						className="mt-8 h-auto gap-2 rounded-lg border border-neutral-200 px-4 py-2 text-base text-black shadow-[0px_2px_0px_0px_rgba(255,255,255,0.3)_inset] dark:border-neutral-800 dark:text-white"
-					>
-						<Link href="/contact" className="group">
-							<span>Talk to us</span>
-							<IconMessageCircleQuestion className="text-black dark:text-white group-hover:translate-x-1 stroke-[1px] h-3 w-3 mt-0.5 transition-transform duration-200" />
-						</Link>
-					</Button>
-				</div>
-			</div>
-			{/* <div className="border-t md:border-t-0 md:border-l border-dashed p-8 md:p-14">
-        <p className="text-base text-neutral-700 dark:text-neutral-200">
-          &quot;SurfSense has revolutionized how our team shares and discovers knowledge. 
-          Everyone can contribute and find what they need instantly. True collaboration at scale.&quot;
-        </p>
-        <div className="flex flex-col text-sm items-start mt-4 gap-1">
-          <p className="font-bold text-neutral-800 dark:text-neutral-200">
-            Sarah Chen
-          </p>
-          <p className="text-neutral-500 dark:text-neutral-400">
-            Research Lead
-          </p>
-        </div>
-      </div> */}
-		</section>
-	);
-}
-
-const GridLineHorizontal = ({ className, offset }: { className?: string; offset?: string }) => {
-	return (
-		<div
-			style={
-				{
-					"--background": "#ffffff",
-					"--color": "rgba(0, 0, 0, 0.2)",
-					"--height": "1px",
-					"--width": "5px",
-					"--fade-stop": "90%",
-					"--offset": offset || "200px", //-100px if you want to keep the line inside
-					"--color-dark": "rgba(255, 255, 255, 0.2)",
-					maskComposite: "exclude",
-				} as React.CSSProperties
-			}
-			className={cn(
-				"absolute w-[calc(100%+var(--offset))] h-[var(--height)] left-[calc(var(--offset)/2*-1)]",
-				"bg-[linear-gradient(to_right,var(--color),var(--color)_50%,transparent_0,transparent)]",
-				"[background-size:var(--width)_var(--height)]",
-				"[mask:linear-gradient(to_left,var(--background)_var(--fade-stop),transparent),_linear-gradient(to_right,var(--background)_var(--fade-stop),transparent),_linear-gradient(black,black)]",
-				"[mask-composite:exclude]",
-				"z-30",
-				"dark:bg-[linear-gradient(to_right,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)]",
-				className
-			)}
-		></div>
-	);
-};
-
-const GridLineVertical = ({ className, offset }: { className?: string; offset?: string }) => {
-	return (
-		<div
-			style={
-				{
-					"--background": "#ffffff",
-					"--color": "rgba(0, 0, 0, 0.2)",
-					"--height": "5px",
-					"--width": "1px",
-					"--fade-stop": "90%",
-					"--offset": offset || "150px", //-100px if you want to keep the line inside
-					"--color-dark": "rgba(255, 255, 255, 0.2)",
-					maskComposite: "exclude",
-				} as React.CSSProperties
-			}
-			className={cn(
-				"absolute h-[calc(100%+var(--offset))] w-[var(--width)] top-[calc(var(--offset)/2*-1)]",
-				"bg-[linear-gradient(to_bottom,var(--color),var(--color)_50%,transparent_0,transparent)]",
-				"[background-size:var(--width)_var(--height)]",
-				"[mask:linear-gradient(to_top,var(--background)_var(--fade-stop),transparent),_linear-gradient(to_bottom,var(--background)_var(--fade-stop),transparent),_linear-gradient(black,black)]",
-				"[mask-composite:exclude]",
-				"z-30",
-				"dark:bg-[linear-gradient(to_bottom,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)]",
-				className
-			)}
-		></div>
-	);
-};
diff --git a/surfsense_web/components/homepage/features-bento-grid.tsx b/surfsense_web/components/homepage/features-bento-grid.tsx
deleted file mode 100644
index 49884bf28..000000000
--- a/surfsense_web/components/homepage/features-bento-grid.tsx
+++ /dev/null
@@ -1,991 +0,0 @@
-import {
-	IconBinaryTree,
-	IconBolt,
-	IconMessage,
-	IconMicrophone,
-	IconSearch,
-	IconUsers,
-} from "@tabler/icons-react";
-import Image from "next/image";
-import React from "react";
-import { BentoGrid, BentoGridItem } from "@/components/ui/bento-grid";
-
-export function FeaturesBentoGrid() {
-	return (
-		<BentoGrid className="max-w-7xl my-8 mx-auto md:auto-rows-[20rem]">
-			{items.map((item, i) => (
-				<BentoGridItem
-					key={i}
-					title={item.title}
-					description={item.description}
-					header={item.header}
-					className={item.className}
-					icon={item.icon}
-				/>
-			))}
-		</BentoGrid>
-	);
-}
-
-const CitationIllustration = () => (
-	<div className="relative flex w-full h-full min-h-[6rem] items-center justify-center overflow-hidden rounded-xl bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 dark:from-blue-950/20 dark:via-purple-950/20 dark:to-pink-950/20 p-4">
-		<svg viewBox="0 0 400 200" className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
-			<title>Citation feature illustration showing clickable source reference</title>
-			{/* Background chat message */}
-			<g>
-				{/* Chat bubble */}
-				<rect
-					x="20"
-					y="30"
-					width="200"
-					height="60"
-					rx="12"
-					className="fill-white dark:fill-neutral-800"
-					opacity="0.9"
-				/>
-				{/* Text lines */}
-				<line
-					x1="35"
-					y1="50"
-					x2="150"
-					y2="50"
-					className="stroke-neutral-400 dark:stroke-neutral-600"
-					strokeWidth="3"
-					strokeLinecap="round"
-				/>
-				<line
-					x1="35"
-					y1="65"
-					x2="180"
-					y2="65"
-					className="stroke-neutral-400 dark:stroke-neutral-600"
-					strokeWidth="3"
-					strokeLinecap="round"
-				/>
-
-				{/* Citation badge with glow */}
-				<defs>
-					<filter id="glow">
-						<feGaussianBlur stdDeviation="2" result="coloredBlur" />
-						<feMerge>
-							<feMergeNode in="coloredBlur" />
-							<feMergeNode in="SourceGraphic" />
-						</feMerge>
-					</filter>
-				</defs>
-
-				{/* Clickable citation */}
-				<g className="cursor-pointer" filter="url(#glow)">
-					<rect
-						x="185"
-						y="57"
-						width="28"
-						height="20"
-						rx="6"
-						className="fill-blue-500 dark:fill-blue-600"
-					/>
-					<text
-						x="199"
-						y="70"
-						fontSize="12"
-						fontWeight="bold"
-						className="fill-white"
-						textAnchor="middle"
-					>
-						[1]
-					</text>
-				</g>
-			</g>
-
-			{/* Connecting line with animation effect */}
-			<g>
-				<path
-					d="M 199 77 Q 240 90, 260 110"
-					className="stroke-blue-500 dark:stroke-blue-400"
-					strokeWidth="2"
-					strokeDasharray="4,4"
-					fill="none"
-					opacity="0.6"
-				>
-					<animate
-						attributeName="stroke-dashoffset"
-						from="8"
-						to="0"
-						dur="1s"
-						repeatCount="indefinite"
-					/>
-				</path>
-
-				{/* Arrow head */}
-				<polygon
-					points="258,113 262,110 260,106"
-					className="fill-blue-500 dark:fill-blue-400"
-					opacity="0.6"
-				/>
-			</g>
-
-			{/* Citation popup card */}
-			<g>
-				{/* Card shadow */}
-				<rect
-					x="245"
-					y="113"
-					width="145"
-					height="75"
-					rx="10"
-					className="fill-black"
-					opacity="0.1"
-					transform="translate(2, 2)"
-				/>
-
-				{/* Main card */}
-				<rect
-					x="245"
-					y="113"
-					width="145"
-					height="75"
-					rx="10"
-					className="fill-white dark:fill-neutral-800 stroke-blue-500 dark:stroke-blue-400"
-					strokeWidth="2"
-				/>
-
-				{/* Card header */}
-				<rect
-					x="245"
-					y="113"
-					width="145"
-					height="25"
-					rx="10"
-					className="fill-blue-100 dark:fill-blue-900/50"
-				/>
-				<line
-					x1="245"
-					y1="138"
-					x2="390"
-					y2="138"
-					className="stroke-blue-200 dark:stroke-blue-800"
-					strokeWidth="1"
-				/>
-
-				{/* Header text */}
-				<text
-					x="317.5"
-					y="128"
-					fontSize="9"
-					fontWeight="600"
-					className="fill-blue-700 dark:fill-blue-300"
-					textAnchor="middle"
-				>
-					Referenced Chunk
-				</text>
-
-				{/* Content lines */}
-				<line
-					x1="255"
-					y1="150"
-					x2="365"
-					y2="150"
-					className="stroke-neutral-600 dark:stroke-neutral-400"
-					strokeWidth="2.5"
-					strokeLinecap="round"
-				/>
-				<line
-					x1="255"
-					y1="162"
-					x2="340"
-					y2="162"
-					className="stroke-neutral-500 dark:stroke-neutral-500"
-					strokeWidth="2.5"
-					strokeLinecap="round"
-				/>
-				<line
-					x1="255"
-					y1="174"
-					x2="380"
-					y2="174"
-					className="stroke-neutral-400 dark:stroke-neutral-600"
-					strokeWidth="2.5"
-					strokeLinecap="round"
-				/>
-			</g>
-
-			{/* Sparkle effects */}
-			<g className="opacity-60">
-				{/* Sparkle 1 */}
-				<circle cx="195" cy="45" r="2" className="fill-yellow-400">
-					<animate attributeName="opacity" values="0;1;0" dur="2s" repeatCount="indefinite" />
-				</circle>
-				<circle cx="195" cy="45" r="1" className="fill-white">
-					<animate attributeName="opacity" values="0;1;0" dur="2s" repeatCount="indefinite" />
-				</circle>
-
-				{/* Sparkle 2 */}
-				<circle cx="370" cy="125" r="2" className="fill-purple-400">
-					<animate
-						attributeName="opacity"
-						values="0;1;0"
-						dur="2.5s"
-						begin="0.5s"
-						repeatCount="indefinite"
-					/>
-				</circle>
-				<circle cx="370" cy="125" r="1" className="fill-white">
-					<animate
-						attributeName="opacity"
-						values="0;1;0"
-						dur="2.5s"
-						begin="0.5s"
-						repeatCount="indefinite"
-					/>
-				</circle>
-
-				{/* Sparkle 3 */}
-				<circle cx="250" cy="95" r="1.5" className="fill-blue-400">
-					<animate
-						attributeName="opacity"
-						values="0;1;0"
-						dur="3s"
-						begin="1s"
-						repeatCount="indefinite"
-					/>
-				</circle>
-			</g>
-
-			{/* AI Sparkle icon in corner */}
-			<g transform="translate(25, 100)">
-				<path
-					d="M 0,0 L 3,-8 L 6,0 L 14,3 L 6,6 L 3,14 L 0,6 L -8,3 Z"
-					className="fill-purple-500 dark:fill-purple-400"
-					opacity="0.7"
-				>
-					<animateTransform
-						attributeName="transform"
-						type="rotate"
-						from="0 3 3"
-						to="360 3 3"
-						dur="8s"
-						repeatCount="indefinite"
-					/>
-				</path>
-			</g>
-		</svg>
-	</div>
-);
-
-const CollaborationIllustration = () => (
-	<div className="relative flex w-full h-full min-h-44 flex-1 flex-col items-center justify-center overflow-hidden pointer-events-none select-none">
-		<div
-			role="img"
-			aria-label="Illustration of a realtime collaboration in a text editor."
-			className="pointer-events-none absolute inset-0 flex flex-col items-start justify-center pl-4 select-none"
-		>
-			<div className="relative flex h-fit w-fit flex-col items-start">
-				<div className="w-full text-2xl sm:text-3xl lg:text-4xl leading-tight text-neutral-700 dark:text-neutral-300">
-					<span className="flex items-stretch flex-wrap">
-						{/* <span>Real-time </span> */}
-						<span className="relative bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 px-1">
-							Real-time
-						</span>
-						<span className="relative z-10 inline-flex items-stretch justify-start">
-							<span className="absolute h-full w-0.5 rounded-b-sm bg-blue-500"></span>
-							<span className="absolute inline-flex h-6 sm:h-7 -translate-y-full items-center rounded-t-sm rounded-r-sm px-2 py-0.5 text-xs sm:text-sm font-medium text-white bg-blue-500">
-								Sarah
-							</span>
-						</span>
-						<span>collabo</span>
-						<span>orat</span>
-						<span className="relative z-10 inline-flex items-stretch justify-start">
-							<span className="absolute h-full w-0.5 rounded-b-sm bg-purple-600 dark:bg-purple-500"></span>
-							<span className="absolute inline-flex h-6 sm:h-7 -translate-y-full items-center rounded-t-sm rounded-r-sm px-2 py-0.5 text-xs sm:text-sm font-medium text-white bg-purple-600 dark:bg-purple-500">
-								Josh
-							</span>
-						</span>
-						<span>ion</span>
-					</span>
-				</div>
-			</div>
-			{/* Bottom gradient fade */}
-			<div className="absolute -right-4 bottom-0 -left-4 h-24 bg-gradient-to-t from-white dark:from-black to-transparent"></div>
-			{/* Right gradient fade */}
-			<div className="absolute top-0 -right-4 bottom-0 w-20 bg-gradient-to-l from-white dark:from-black to-transparent"></div>
-		</div>
-	</div>
-);
-
-const AnnotationIllustration = () => (
-	<div className="relative flex w-full h-full min-h-44 flex-1 flex-col items-center justify-center overflow-hidden pointer-events-none select-none">
-		<div
-			role="img"
-			aria-label="Illustration of a text editor with annotation comments."
-			className="pointer-events-none absolute inset-0 flex flex-col items-start justify-center pl-4 select-none md:left-1/2"
-		>
-			<div className="relative flex h-fit w-fit flex-col items-start justify-center gap-3.5">
-				{/* Text above the comment box */}
-				<div className="absolute left-0 h-fit -translate-x-full pr-7 text-3xl sm:text-4xl lg:text-5xl tracking-tight whitespace-nowrap text-neutral-400 dark:text-neutral-600">
-					<span className="relative">
-						Add context with
-						<div className="absolute inset-0 bg-gradient-to-r from-white dark:from-black via-white dark:via-black to-transparent"></div>
-					</span>{" "}
-					<span className="bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">
-						comments
-					</span>
-				</div>
-
-				{/* Comment card */}
-				<div className="flex flex-col items-start gap-4 rounded-xl bg-neutral-100 dark:bg-neutral-900/50 px-6 py-5 text-xl sm:text-2xl lg:text-3xl max-w-md">
-					<div className="truncate leading-normal text-neutral-600 dark:text-neutral-400">
-						<span>Let's discuss this tomorrow!</span>
-					</div>
-
-					{/* Reaction icons */}
-					<div className="flex items-center gap-3 opacity-30">
-						{/* @ icon */}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="32"
-							height="32"
-							fill="none"
-							viewBox="0 0 24 24"
-							className="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8"
-						>
-							<title>Mention icon</title>
-							<g
-								stroke="currentColor"
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								strokeWidth="1.8"
-							>
-								<path d="M11.998 15.6a3.6 3.6 0 1 0 0-7.2 3.6 3.6 0 0 0 0 7.2Z" />
-								<path d="M15.602 8.4v4.44c0 1.326 1.026 2.52 2.28 2.52a2.544 2.544 0 0 0 2.52-2.52V12a8.4 8.4 0 1 0-3.36 6.72" />
-							</g>
-						</svg>
-
-						{/* Emoji icon */}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="32"
-							height="32"
-							fill="none"
-							viewBox="0 0 24 24"
-							className="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8"
-						>
-							<title>Emoji icon</title>
-							<g
-								stroke="currentColor"
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								strokeWidth="1.8"
-							>
-								<path d="M12.002 20.4a8.4 8.4 0 1 0 0-16.8 8.4 8.4 0 0 0 0 16.8Z" />
-								<path d="M9 13.8s.9 1.8 3 1.8 3-1.8 3-1.8M9.6 9.6h.008M14.398 9.6h.009M9.597 9.9a.3.3 0 1 0 0-.6.3.3 0 0 0 0 .6ZM14.402 9.9a.3.3 0 1 0 0-.6.3.3 0 0 0 0 .6Z" />
-							</g>
-						</svg>
-
-						{/* Attachment icon */}
-						<svg
-							width="32"
-							height="32"
-							viewBox="0 0 24 24"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-							className="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8"
-						>
-							<title>Attachment icon</title>
-							<path
-								d="M16.8926 14.0829L12.425 18.4269C10.565 20.2353 7.47136 20.2353 5.61136 18.4269C3.75976 16.6269 3.75976 13.6029 5.61136 11.8029L12.4886 5.11529C13.7294 3.90809 15.7934 3.90689 17.0354 5.11169C18.2714 6.31169 18.2738 8.33009 17.039 9.53249L10.1462 16.2189C9.83929 16.5093 9.43285 16.6711 9.01036 16.6711C8.58786 16.6711 8.18142 16.5093 7.87456 16.2189C7.72623 16.0757 7.60817 15.9042 7.52737 15.7146C7.44656 15.525 7.40466 15.321 7.40416 15.1149C7.40416 14.7009 7.57216 14.3037 7.87456 14.0109L12.4178 9.59849"
-								stroke="currentColor"
-								strokeWidth="1.8"
-							/>
-						</svg>
-					</div>
-				</div>
-			</div>
-
-			{/* Bottom gradient fade */}
-			<div className="absolute -right-4 bottom-0 -left-4 h-20 bg-gradient-to-t from-white dark:from-black to-transparent"></div>
-			{/* Right gradient fade */}
-			<div className="absolute top-0 -right-4 bottom-0 w-20 bg-gradient-to-l from-white dark:from-black to-transparent"></div>
-		</div>
-	</div>
-);
-
-const AudioCommentIllustration = () => (
-	<div className="relative flex w-full h-full min-h-[6rem] overflow-hidden rounded-xl">
-		<Image
-			src="/homepage/comments-audio.webp"
-			alt="Audio Comment Illustration"
-			fill
-			sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
-			className="object-cover"
-		/>
-	</div>
-);
-
-const AiSortIllustration = () => (
-	<div className="relative flex w-full h-full min-h-[6rem] items-center justify-center overflow-hidden rounded-xl bg-gradient-to-br from-emerald-50 via-teal-50 to-cyan-50 dark:from-emerald-950/20 dark:via-teal-950/20 dark:to-cyan-950/20 p-4">
-		<svg viewBox="0 0 400 200" className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
-			<title>AI File Sorting illustration showing automatic folder organization</title>
-			{/* Scattered documents on the left */}
-			<g opacity="0.5">
-				<rect
-					x="20"
-					y="40"
-					width="35"
-					height="45"
-					rx="4"
-					className="fill-neutral-200 dark:fill-neutral-700"
-					transform="rotate(-8 37 62)"
-				/>
-				<rect
-					x="50"
-					y="80"
-					width="35"
-					height="45"
-					rx="4"
-					className="fill-neutral-200 dark:fill-neutral-700"
-					transform="rotate(5 67 102)"
-				/>
-				<rect
-					x="15"
-					y="110"
-					width="35"
-					height="45"
-					rx="4"
-					className="fill-neutral-200 dark:fill-neutral-700"
-					transform="rotate(-3 32 132)"
-				/>
-			</g>
-
-			{/* AI sparkle / magic in the center */}
-			<g transform="translate(140, 90)">
-				<path
-					d="M 0,-18 L 4,-6 L 16,-4 L 6,4 L 8,16 L 0,10 L -8,16 L -6,4 L -16,-4 L -4,-6 Z"
-					className="fill-emerald-500 dark:fill-emerald-400"
-					opacity="0.85"
-				>
-					<animateTransform
-						attributeName="transform"
-						type="rotate"
-						from="0"
-						to="360"
-						dur="10s"
-						repeatCount="indefinite"
-					/>
-				</path>
-				<circle cx="0" cy="0" r="3" className="fill-white dark:fill-emerald-200">
-					<animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite" />
-				</circle>
-			</g>
-
-			{/* Animated sorting arrows */}
-			<g
-				className="stroke-emerald-500 dark:stroke-emerald-400"
-				strokeWidth="2"
-				fill="none"
-				opacity="0.6"
-			>
-				<path d="M 100 70 Q 140 60, 180 50" strokeDasharray="4,4">
-					<animate
-						attributeName="stroke-dashoffset"
-						from="8"
-						to="0"
-						dur="1s"
-						repeatCount="indefinite"
-					/>
-				</path>
-				<path d="M 100 100 Q 140 100, 180 100" strokeDasharray="4,4">
-					<animate
-						attributeName="stroke-dashoffset"
-						from="8"
-						to="0"
-						dur="1s"
-						repeatCount="indefinite"
-					/>
-				</path>
-				<path d="M 100 130 Q 140 140, 180 150" strokeDasharray="4,4">
-					<animate
-						attributeName="stroke-dashoffset"
-						from="8"
-						to="0"
-						dur="1s"
-						repeatCount="indefinite"
-					/>
-				</path>
-			</g>
-
-			{/* Organized folder tree on the right */}
-			{/* Root folder */}
-			<g>
-				<rect
-					x="220"
-					y="30"
-					width="160"
-					height="28"
-					rx="6"
-					className="fill-white dark:fill-neutral-800"
-					opacity="0.9"
-				/>
-				<rect
-					x="228"
-					y="36"
-					width="16"
-					height="14"
-					rx="3"
-					className="fill-emerald-500 dark:fill-emerald-400"
-				/>
-				<line
-					x1="252"
-					y1="43"
-					x2="330"
-					y2="43"
-					className="stroke-neutral-400 dark:stroke-neutral-500"
-					strokeWidth="2.5"
-					strokeLinecap="round"
-				/>
-			</g>
-
-			{/* Subfolder 1 */}
-			<g>
-				<line
-					x1="240"
-					y1="58"
-					x2="240"
-					y2="76"
-					className="stroke-neutral-300 dark:stroke-neutral-600"
-					strokeWidth="1.5"
-				/>
-				<line
-					x1="240"
-					y1="76"
-					x2="250"
-					y2="76"
-					className="stroke-neutral-300 dark:stroke-neutral-600"
-					strokeWidth="1.5"
-				/>
-				<rect
-					x="250"
-					y="64"
-					width="130"
-					height="24"
-					rx="5"
-					className="fill-white dark:fill-neutral-800"
-					opacity="0.85"
-				/>
-				<rect
-					x="257"
-					y="70"
-					width="12"
-					height="11"
-					rx="2"
-					className="fill-teal-400 dark:fill-teal-500"
-				/>
-				<line
-					x1="276"
-					y1="76"
-					x2="340"
-					y2="76"
-					className="stroke-neutral-400 dark:stroke-neutral-500"
-					strokeWidth="2"
-					strokeLinecap="round"
-				/>
-			</g>
-
-			{/* Subfolder 2 */}
-			<g>
-				<line
-					x1="240"
-					y1="76"
-					x2="240"
-					y2="108"
-					className="stroke-neutral-300 dark:stroke-neutral-600"
-					strokeWidth="1.5"
-				/>
-				<line
-					x1="240"
-					y1="108"
-					x2="250"
-					y2="108"
-					className="stroke-neutral-300 dark:stroke-neutral-600"
-					strokeWidth="1.5"
-				/>
-				<rect
-					x="250"
-					y="96"
-					width="130"
-					height="24"
-					rx="5"
-					className="fill-white dark:fill-neutral-800"
-					opacity="0.85"
-				/>
-				<rect
-					x="257"
-					y="102"
-					width="12"
-					height="11"
-					rx="2"
-					className="fill-cyan-400 dark:fill-cyan-500"
-				/>
-				<line
-					x1="276"
-					y1="108"
-					x2="350"
-					y2="108"
-					className="stroke-neutral-400 dark:stroke-neutral-500"
-					strokeWidth="2"
-					strokeLinecap="round"
-				/>
-			</g>
-
-			{/* Subfolder 3 */}
-			<g>
-				<line
-					x1="240"
-					y1="108"
-					x2="240"
-					y2="140"
-					className="stroke-neutral-300 dark:stroke-neutral-600"
-					strokeWidth="1.5"
-				/>
-				<line
-					x1="240"
-					y1="140"
-					x2="250"
-					y2="140"
-					className="stroke-neutral-300 dark:stroke-neutral-600"
-					strokeWidth="1.5"
-				/>
-				<rect
-					x="250"
-					y="128"
-					width="130"
-					height="24"
-					rx="5"
-					className="fill-white dark:fill-neutral-800"
-					opacity="0.85"
-				/>
-				<rect
-					x="257"
-					y="134"
-					width="12"
-					height="11"
-					rx="2"
-					className="fill-emerald-400 dark:fill-emerald-500"
-				/>
-				<line
-					x1="276"
-					y1="140"
-					x2="325"
-					y2="140"
-					className="stroke-neutral-400 dark:stroke-neutral-500"
-					strokeWidth="2"
-					strokeLinecap="round"
-				/>
-			</g>
-
-			{/* Sparkle accents */}
-			<g className="opacity-60">
-				<circle cx="170" cy="45" r="2" className="fill-emerald-400">
-					<animate attributeName="opacity" values="0;1;0" dur="2s" repeatCount="indefinite" />
-				</circle>
-				<circle cx="190" cy="155" r="1.5" className="fill-teal-400">
-					<animate
-						attributeName="opacity"
-						values="0;1;0"
-						dur="2.5s"
-						begin="0.8s"
-						repeatCount="indefinite"
-					/>
-				</circle>
-				<circle cx="155" cy="120" r="1.5" className="fill-cyan-400">
-					<animate
-						attributeName="opacity"
-						values="0;1;0"
-						dur="3s"
-						begin="0.4s"
-						repeatCount="indefinite"
-					/>
-				</circle>
-			</g>
-		</svg>
-	</div>
-);
-
-const AutomationIllustration = () => (
-	<div className="relative flex w-full h-full min-h-[6rem] items-center justify-center overflow-hidden rounded-xl bg-gradient-to-br from-indigo-50 via-violet-50 to-fuchsia-50 dark:from-indigo-950/20 dark:via-violet-950/20 dark:to-fuchsia-950/20 p-4">
-		<svg viewBox="0 0 800 200" className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
-			<title>
-				AI automation flow illustration showing a trigger starting an AI agent that acts across
-				connectors
-			</title>
-
-			{/* Animated flow connectors */}
-			<g
-				className="stroke-violet-500 dark:stroke-violet-400"
-				strokeWidth="2.5"
-				fill="none"
-				opacity="0.7"
-			>
-				<path d="M 215 100 L 320 100" strokeDasharray="6,6">
-					<animate
-						attributeName="stroke-dashoffset"
-						from="12"
-						to="0"
-						dur="1s"
-						repeatCount="indefinite"
-					/>
-				</path>
-				<path d="M 480 100 L 585 100" strokeDasharray="6,6">
-					<animate
-						attributeName="stroke-dashoffset"
-						from="12"
-						to="0"
-						dur="1s"
-						repeatCount="indefinite"
-					/>
-				</path>
-			</g>
-			<g className="fill-violet-500 dark:fill-violet-400" opacity="0.7">
-				<polygon points="320,100 312,95 312,105" />
-				<polygon points="585,100 577,95 577,105" />
-			</g>
-
-			{/* Trigger node */}
-			<g>
-				<rect
-					x="40"
-					y="60"
-					width="175"
-					height="80"
-					rx="14"
-					className="fill-white dark:fill-neutral-800 stroke-indigo-300 dark:stroke-indigo-700"
-					strokeWidth="2"
-				/>
-				<text
-					x="127"
-					y="50"
-					fontSize="13"
-					fontWeight="600"
-					className="fill-indigo-600 dark:fill-indigo-300"
-					textAnchor="middle"
-				>
-					Trigger
-				</text>
-				{/* Schedule chip */}
-				<g transform="translate(58, 80)">
-					<rect
-						width="64"
-						height="22"
-						rx="11"
-						className="fill-indigo-100 dark:fill-indigo-900/50"
-					/>
-					<circle
-						cx="14"
-						cy="11"
-						r="6"
-						className="fill-none stroke-indigo-500 dark:stroke-indigo-400"
-						strokeWidth="2"
-					/>
-					<line
-						x1="14"
-						y1="11"
-						x2="14"
-						y2="7"
-						className="stroke-indigo-500 dark:stroke-indigo-400"
-						strokeWidth="2"
-						strokeLinecap="round"
-					/>
-					<line
-						x1="14"
-						y1="11"
-						x2="17"
-						y2="13"
-						className="stroke-indigo-500 dark:stroke-indigo-400"
-						strokeWidth="2"
-						strokeLinecap="round"
-					/>
-					<text
-						x="38"
-						y="15"
-						fontSize="9"
-						fontWeight="500"
-						className="fill-indigo-700 dark:fill-indigo-300"
-						textAnchor="middle"
-					>
-						Cron
-					</text>
-				</g>
-				{/* Event chip */}
-				<g transform="translate(58, 108)">
-					<rect
-						width="64"
-						height="22"
-						rx="11"
-						className="fill-fuchsia-100 dark:fill-fuchsia-900/40"
-					/>
-					<path
-						d="M 13 5 L 9 13 L 14 13 L 11 19 L 18 10 L 13 10 Z"
-						className="fill-fuchsia-500 dark:fill-fuchsia-400"
-					/>
-					<text
-						x="40"
-						y="15"
-						fontSize="9"
-						fontWeight="500"
-						className="fill-fuchsia-700 dark:fill-fuchsia-300"
-						textAnchor="middle"
-					>
-						Event
-					</text>
-				</g>
-			</g>
-
-			{/* AI Agent core */}
-			<g>
-				<rect
-					x="320"
-					y="50"
-					width="160"
-					height="100"
-					rx="16"
-					className="fill-white dark:fill-neutral-800 stroke-violet-400 dark:stroke-violet-500"
-					strokeWidth="2.5"
-				/>
-				<text
-					x="400"
-					y="40"
-					fontSize="13"
-					fontWeight="600"
-					className="fill-violet-600 dark:fill-violet-300"
-					textAnchor="middle"
-				>
-					AI Agent
-				</text>
-				{/* Sparkle */}
-				<g transform="translate(400, 92)">
-					<path
-						d="M 0,-22 L 5,-7 L 20,-5 L 7,5 L 10,20 L 0,12 L -10,20 L -7,5 L -20,-5 L -5,-7 Z"
-						className="fill-violet-500 dark:fill-violet-400"
-						opacity="0.9"
-					>
-						<animateTransform
-							attributeName="transform"
-							type="rotate"
-							from="0"
-							to="360"
-							dur="12s"
-							repeatCount="indefinite"
-						/>
-					</path>
-					<circle cx="0" cy="0" r="4" className="fill-white dark:fill-violet-200">
-						<animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite" />
-					</circle>
-				</g>
-			</g>
-
-			{/* Actions across connectors */}
-			<g>
-				<rect
-					x="585"
-					y="60"
-					width="175"
-					height="80"
-					rx="14"
-					className="fill-white dark:fill-neutral-800 stroke-fuchsia-300 dark:stroke-fuchsia-700"
-					strokeWidth="2"
-				/>
-				<text
-					x="672"
-					y="50"
-					fontSize="13"
-					fontWeight="600"
-					className="fill-fuchsia-600 dark:fill-fuchsia-300"
-					textAnchor="middle"
-				>
-					Act on Connectors
-				</text>
-				<g>
-					<circle cx="618" cy="100" r="13" className="fill-indigo-100 dark:fill-indigo-900/50" />
-					<circle cx="650" cy="100" r="13" className="fill-violet-100 dark:fill-violet-900/50" />
-					<circle cx="682" cy="100" r="13" className="fill-fuchsia-100 dark:fill-fuchsia-900/50" />
-					<circle cx="714" cy="100" r="13" className="fill-pink-100 dark:fill-pink-900/40" />
-					<text
-						x="730"
-						y="104"
-						fontSize="11"
-						fontWeight="600"
-						className="fill-fuchsia-600 dark:fill-fuchsia-300"
-						textAnchor="middle"
-					>
-						25+
-					</text>
-				</g>
-			</g>
-
-			{/* Sparkle accents */}
-			<g className="opacity-60">
-				<circle cx="270" cy="70" r="2" className="fill-violet-400">
-					<animate attributeName="opacity" values="0;1;0" dur="2s" repeatCount="indefinite" />
-				</circle>
-				<circle cx="530" cy="130" r="2" className="fill-fuchsia-400">
-					<animate
-						attributeName="opacity"
-						values="0;1;0"
-						dur="2.5s"
-						begin="0.6s"
-						repeatCount="indefinite"
-					/>
-				</circle>
-			</g>
-		</svg>
-	</div>
-);
-
-const items = [
-	{
-		title: "Find, Ask, Act",
-		description:
-			"Get instant information, detailed updates, and cited answers across company and personal knowledge.",
-		header: <CitationIllustration />,
-		className: "md:col-span-2",
-		icon: <IconSearch className="h-4 w-4 text-neutral-500" />,
-	},
-	{
-		title: "Work Together in Real Time",
-		description:
-			"Transform your company docs into multiplayer spaces with live edits, synced content, and presence.",
-		header: <CollaborationIllustration />,
-		className: "md:col-span-1",
-		icon: <IconUsers className="h-4 w-4 text-neutral-500" />,
-	},
-	{
-		title: "AI File Sorting",
-		description:
-			"Automatically organize documents into a smart folder hierarchy using AI-powered categorization by source, date, and topic.",
-		header: <AiSortIllustration />,
-		className: "md:col-span-1",
-		icon: <IconBinaryTree className="h-4 w-4 text-neutral-500" />,
-	},
-	{
-		title: "Collaborate Beyond Text",
-		description:
-			"Create podcasts and multimedia your team can comment on, share, and refine together.",
-		header: <AudioCommentIllustration />,
-		className: "md:col-span-1",
-		icon: <IconMicrophone className="h-4 w-4 text-neutral-500" />,
-	},
-	{
-		title: "Context Where It Counts",
-		description: "Add comments directly to your chats and docs for clear, in-the-moment feedback.",
-		header: <AnnotationIllustration />,
-		className: "md:col-span-1",
-		icon: <IconMessage className="h-4 w-4 text-neutral-500" />,
-	},
-	{
-		title: "Automate Your Workflows",
-		description:
-			"Describe an AI agent in plain English and SurfSense builds it. Run it on a schedule or trigger it when a document lands, acting across all your connectors hands-free.",
-		header: <AutomationIllustration />,
-		className: "md:col-span-3",
-		icon: <IconBolt className="h-4 w-4 text-neutral-500" />,
-	},
-];
diff --git a/surfsense_web/components/homepage/features-card.tsx b/surfsense_web/components/homepage/features-card.tsx
deleted file mode 100644
index 92e8bb4c3..000000000
--- a/surfsense_web/components/homepage/features-card.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Sliders, Users, Workflow } from "lucide-react";
-import type { ReactNode } from "react";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-
-export function FeaturesCards() {
-	return (
-		<section className="py-2 md:py-8 dark:bg-transparent">
-			<div className="@container mx-auto max-w-7xl">
-				<div className="text-center">
-					<h2 className="text-balance text-4xl font-semibold lg:text-5xl">
-						Your Team's AI-Powered Knowledge Hub
-					</h2>
-					<p className="mt-4">
-						Powerful features designed to enhance collaboration, boost productivity, and streamline
-						your workflow.
-					</p>
-				</div>
-				<div className="@min-4xl:max-w-full @min-4xl:grid-cols-3 mx-auto mt-8 grid max-w-sm gap-6 *:text-center md:mt-16">
-					<Card className="group shadow-black-950/5">
-						<CardHeader className="pb-3">
-							<CardDecorator>
-								<Workflow className="size-6" aria-hidden />
-							</CardDecorator>
-
-							<h3 className="mt-6 font-medium">Streamlined Workflow</h3>
-						</CardHeader>
-
-						<CardContent>
-							<p className="text-sm">
-								Centralize all your knowledge and resources in one intelligent workspace. Find what
-								you need instantly and accelerate decision-making.
-							</p>
-						</CardContent>
-					</Card>
-
-					<Card className="group shadow-black-950/5">
-						<CardHeader className="pb-3">
-							<CardDecorator>
-								<Users className="size-6" aria-hidden />
-							</CardDecorator>
-
-							<h3 className="mt-6 font-medium">Seamless Collaboration</h3>
-						</CardHeader>
-
-						<CardContent>
-							<p className="text-sm">
-								Work together effortlessly with real-time collaboration tools that keep your entire
-								team aligned.
-							</p>
-						</CardContent>
-					</Card>
-
-					<Card className="group shadow-black-950/5">
-						<CardHeader className="pb-3">
-							<CardDecorator>
-								<Sliders className="size-6" aria-hidden />
-							</CardDecorator>
-
-							<h3 className="mt-6 font-medium">Fully Customizable</h3>
-						</CardHeader>
-
-						<CardContent>
-							<p className="text-sm">
-								Choose from 100+ leading LLMs, seamlessly calling any model on demand. Even run
-								on-prem local LLM inference via vLLM, Ollama, llama.cpp, LM Studio, and more.
-							</p>
-						</CardContent>
-					</Card>
-				</div>
-			</div>
-		</section>
-	);
-}
-
-const CardDecorator = ({ children }: { children: ReactNode }) => (
-	<div
-		aria-hidden
-		className="relative mx-auto size-36 mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"
-	>
-		<div className="absolute inset-0 [--border:black] dark:[--border:white] bg-[linear-gradient(to_right,var(--border)_1px,transparent_1px),linear-gradient(to_bottom,var(--border)_1px,transparent_1px)] bg-size-[24px_24px] opacity-10" />
-		<div className="bg-background absolute inset-0 m-auto flex size-12 items-center justify-center border-t border-l">
-			{children}
-		</div>
-	</div>
-);
diff --git a/surfsense_web/components/homepage/flow-line.tsx b/surfsense_web/components/homepage/flow-line.tsx
new file mode 100644
index 000000000..e548b9c45
--- /dev/null
+++ b/surfsense_web/components/homepage/flow-line.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { motion, useReducedMotion } from "motion/react";
+
+const EASE_OUT: [number, number, number, number] = [0.16, 1, 0.3, 1];
+
+/** Column centers for the three equal-width step cards (1/6, 1/2, 5/6). */
+const NODES = ["16.666%", "50%", "83.333%"];
+
+/**
+ * Decorative data-flow line tying the three "How it works" steps together.
+ * Sequence on first view: nodes pop in, the line draws left-to-right, then a
+ * repeating dash pattern drifts forever to read as data flowing. Uses only
+ * transform and background-position; renders statically under reduced motion.
+ */
+export function FlowLine() {
+	const reduce = useReducedMotion() ?? false;
+
+	const dashes = {
+		backgroundImage: "repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 16px)",
+	};
+
+	return (
+		<div aria-hidden className="relative mt-8 mb-4 hidden h-3 text-brand md:block">
+			{/* Line track between the outer nodes */}
+			<div className="absolute top-1/2 left-[16.666%] h-0.5 w-[66.666%] -translate-y-1/2 overflow-hidden rounded-full opacity-70">
+				{reduce ? (
+					<div className="size-full" style={dashes} />
+				) : (
+					<motion.div
+						className="size-full origin-left"
+						initial={{ scaleX: 0 }}
+						whileInView={{ scaleX: 1 }}
+						viewport={{ once: true, amount: 0.5 }}
+						transition={{ duration: 0.7, ease: EASE_OUT, delay: 0.35 }}
+					>
+						<motion.div
+							className="size-full"
+							style={dashes}
+							animate={{ backgroundPositionX: ["0px", "32px"] }}
+							transition={{ duration: 1.6, ease: "linear", repeat: Infinity }}
+						/>
+					</motion.div>
+				)}
+			</div>
+
+			{/* Step nodes at each column center */}
+			{NODES.map((left, i) => (
+				<span
+					key={left}
+					className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2"
+					style={{ left }}
+				>
+					{reduce ? (
+						<span className="block size-3 rounded-full border-2 border-brand bg-background" />
+					) : (
+						<motion.span
+							className="block size-3 rounded-full border-2 border-brand bg-background"
+							initial={{ scale: 0 }}
+							whileInView={{ scale: 1 }}
+							viewport={{ once: true, amount: 0.5 }}
+							transition={{ duration: 0.3, ease: EASE_OUT, delay: 0.1 + i * 0.12 }}
+						/>
+					)}
+				</span>
+			))}
+		</div>
+	);
+}
diff --git a/surfsense_web/components/homepage/footer-new.tsx b/surfsense_web/components/homepage/footer-new.tsx
index 5943cc8ec..2a97aef00 100644
--- a/surfsense_web/components/homepage/footer-new.tsx
+++ b/surfsense_web/components/homepage/footer-new.tsx
@@ -21,6 +21,10 @@ export function FooterNew() {
 		//   title: "Clients",
 		//   href: "#",
 		// },
+		{
+			title: "Connectors",
+			href: "/connectors",
+		},
 		{
 			title: "Pricing",
 			href: "/pricing",
diff --git a/surfsense_web/components/homepage/hero-chat-demo.tsx b/surfsense_web/components/homepage/hero-chat-demo.tsx
new file mode 100644
index 000000000..db43df65d
--- /dev/null
+++ b/surfsense_web/components/homepage/hero-chat-demo.tsx
@@ -0,0 +1,361 @@
+"use client";
+
+import { ArrowUp, ChevronRightIcon, Plus } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { TextShimmerLoader } from "@/components/prompt-kit/loader";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export type HeroChatDemoStep = {
+	/** Timeline row title, phrased like the real tool display names ("Read webpage"). */
+	title: string;
+	/** Optional sub-bullets shown under the title while/after the step runs. */
+	items?: string[];
+};
+
+export type HeroChatDemoScript = {
+	/** The query the typewriter types and "sends". */
+	prompt: string;
+	/** Agent timeline steps, run sequentially like the real chat timeline. */
+	steps: HeroChatDemoStep[];
+	/** Bullet list in the final streamed answer. */
+	rows: { primary: string; secondary: string }[];
+	/** Closing line of the answer. */
+	summary: string;
+};
+
+type Stage = "typing" | "steps" | "answer" | "done";
+
+const PLACEHOLDER = "Ask anything, type / for prompts, type @ to mention docs";
+
+/** Blinking caret for the typewriter (overlay only, never inside the real input). */
+function Caret() {
+	return (
+		<span className="ml-px inline-block h-4 w-0.5 animate-pulse bg-foreground align-text-bottom" />
+	);
+}
+
+/** Status dot cloned from the real timeline: pulsing while running, muted when settled. */
+function StatusDot({ running }: { running: boolean }) {
+	if (running) {
+		return (
+			<span className="relative flex size-2">
+				<span className="absolute inline-flex size-full animate-ping rounded-full bg-primary/60" />
+				<span className="relative inline-flex size-2 rounded-full bg-primary" />
+			</span>
+		);
+	}
+	return <span className="size-2 rounded-full bg-muted-foreground/30" />;
+}
+
+/** Clone of the chat's collapsible agent timeline (dots, connector lines, shimmer header). */
+function DemoTimeline({
+	steps,
+	startedCount,
+	runningIndex,
+	settled,
+}: {
+	steps: HeroChatDemoStep[];
+	startedCount: number;
+	runningIndex: number;
+	settled: boolean;
+}) {
+	const [isOpen, setIsOpen] = useState(true);
+
+	// Mirror the real timeline: open while processing, auto-collapse once settled.
+	useEffect(() => {
+		setIsOpen(!settled);
+	}, [settled]);
+
+	const visible = steps.slice(0, startedCount);
+	const headerText = settled ? "Reviewed" : (steps[runningIndex]?.title ?? "Processing");
+
+	return (
+		<div className="w-full">
+			<Button
+				variant="ghost"
+				type="button"
+				onClick={() => setIsOpen((prev) => !prev)}
+				className="h-auto w-full justify-start gap-1.5 p-0 text-left text-sm font-normal text-muted-foreground transition-colors hover:bg-transparent hover:text-accent-foreground"
+			>
+				{settled ? <span>{headerText}</span> : <TextShimmerLoader text={headerText} size="sm" />}
+				<ChevronRightIcon
+					className={cn("size-4 transition-transform duration-200", isOpen && "rotate-90")}
+				/>
+			</Button>
+
+			<div
+				className={cn(
+					"grid transition-[grid-template-rows] duration-300 ease-out",
+					isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+				)}
+			>
+				<div className="overflow-hidden">
+					<div className="mt-3 pl-1">
+						{visible.map((step, i) => {
+							const running = !settled && i === runningIndex;
+							const isLast = i === visible.length - 1;
+							return (
+								<div key={step.title} className="relative flex gap-3">
+									<div className="relative flex w-2 flex-col items-center self-stretch">
+										{!isLast && (
+											<div className="absolute left-1/2 top-[15px] -bottom-[15px] w-px -translate-x-1/2 bg-muted-foreground/30" />
+										)}
+										<div className="relative z-10 mt-[7px] flex shrink-0 items-center justify-center">
+											<StatusDot running={running} />
+										</div>
+									</div>
+									<div className="min-w-0 flex-1 pb-4">
+										<div
+											className={cn(
+												"text-sm leading-5",
+												running ? "font-medium text-foreground" : "text-muted-foreground"
+											)}
+										>
+											{step.title}
+										</div>
+										{step.items && step.items.length > 0 && (
+											<div className="mt-1 space-y-0.5">
+												{step.items.map((item) => (
+													<div
+														key={item}
+														className="flex items-start gap-1.5 text-xs text-muted-foreground"
+													>
+														<span className="mt-1.5 size-1 shrink-0 rounded-full bg-muted-foreground/40" />
+														<span className="min-w-0">{item}</span>
+													</div>
+												))}
+											</div>
+										)}
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+/**
+ * Scripted clone of the new-chat UI: the demo types a use-case prompt into the
+ * composer, sends it, walks the agent timeline (like the real chat), then
+ * streams the answer. Focusing the input pauses the demo (it resumes on empty
+ * blur); sending anything routes to /login.
+ */
+export function HeroChatDemo({
+	demo,
+	reduceMotion,
+}: {
+	demo: HeroChatDemoScript;
+	reduceMotion: boolean;
+}) {
+	const router = useRouter();
+	const viewportRef = useRef<HTMLDivElement>(null);
+	const [interrupted, setInterrupted] = useState(false);
+	const [userText, setUserText] = useState("");
+	const [stage, setStage] = useState<Stage>("typing");
+	const [typed, setTyped] = useState("");
+	const [sent, setSent] = useState(false);
+	const [startedSteps, setStartedSteps] = useState(0);
+	const [revealedRows, setRevealedRows] = useState(0);
+
+	const animating = !reduceMotion && !interrupted;
+
+	useEffect(() => {
+		if (!animating) return;
+		let cancelled = false;
+		let timer: ReturnType<typeof setTimeout>;
+		const wait = (ms: number) =>
+			new Promise<void>((resolve) => {
+				timer = setTimeout(resolve, ms);
+			});
+
+		(async () => {
+			while (!cancelled) {
+				setStage("typing");
+				setTyped("");
+				setSent(false);
+				setStartedSteps(0);
+				setRevealedRows(0);
+				await wait(700);
+				for (let i = 1; i <= demo.prompt.length; i++) {
+					if (cancelled) return;
+					setTyped(demo.prompt.slice(0, i));
+					await wait(20);
+				}
+				await wait(550);
+				if (cancelled) return;
+				setSent(true);
+				setTyped("");
+				setStage("steps");
+				await wait(500);
+				for (let i = 1; i <= demo.steps.length; i++) {
+					if (cancelled) return;
+					setStartedSteps(i);
+					await wait(1400);
+				}
+				if (cancelled) return;
+				setStage("answer");
+				await wait(500); // timeline collapse
+				for (let i = 1; i <= demo.rows.length; i++) {
+					if (cancelled) return;
+					setRevealedRows(i);
+					await wait(500);
+				}
+				await wait(350);
+				setStage("done");
+				await wait(5600);
+			}
+		})();
+
+		return () => {
+			cancelled = true;
+			clearTimeout(timer);
+		};
+	}, [animating, demo]);
+
+	// Keep the newest streamed content visible in the small viewport.
+	// biome-ignore lint/correctness/useExhaustiveDependencies: demo progress states are scroll triggers, not effect inputs
+	useEffect(() => {
+		const el = viewportRef.current;
+		if (el) el.scrollTop = el.scrollHeight;
+	}, [stage, startedSteps, revealedRows, sent]);
+
+	// Reduced motion: show the finished conversation instead of looping.
+	const showSent = reduceMotion ? true : !interrupted && sent;
+	const shownStage: Stage = reduceMotion ? "done" : stage;
+	const shownSteps = reduceMotion ? demo.steps.length : startedSteps;
+	const shownRows = reduceMotion ? demo.rows.length : revealedRows;
+	const stepsSettled = shownStage === "answer" || shownStage === "done";
+
+	const handleSend = () => {
+		router.push("/login");
+	};
+
+	const composer = (
+		<div className="rounded-3xl border border-input/20 bg-muted pt-2 shadow-sm shadow-black/5 transition-[border-color] focus-within:border-input/60 hover:border-input/60">
+			<div className="relative px-4 pt-1 pb-1">
+				<textarea
+					rows={2}
+					value={userText}
+					onChange={(e) => setUserText(e.target.value)}
+					onFocus={() => setInterrupted(true)}
+					onBlur={() => {
+						if (!userText.trim()) setInterrupted(false);
+					}}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" && !e.shiftKey) {
+							e.preventDefault();
+							handleSend();
+						}
+					}}
+					placeholder={interrupted ? PLACEHOLDER : undefined}
+					aria-label="Try SurfSense: describe a task for your agent"
+					className="w-full resize-none bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
+				/>
+				{!interrupted && (
+					<div
+						aria-hidden
+						className="pointer-events-none absolute inset-0 overflow-hidden px-4 pt-1 pb-1 text-sm"
+					>
+						{typed ? (
+							<span className="text-foreground">
+								{typed}
+								<Caret />
+							</span>
+						) : (
+							<span className="text-muted-foreground">{PLACEHOLDER}</span>
+						)}
+					</div>
+				)}
+			</div>
+			{/* Action bar: attach on the left, round send on the right */}
+			<div className="mx-3 mb-3 flex items-center justify-between">
+				<span
+					aria-hidden
+					className="flex size-8 items-center justify-center rounded-full text-muted-foreground"
+				>
+					<Plus className="size-4" />
+				</span>
+				<Button
+					type="button"
+					size="icon"
+					onClick={handleSend}
+					aria-label="Send message"
+					className="size-9 shrink-0 rounded-full"
+				>
+					<ArrowUp className="size-5" />
+				</Button>
+			</div>
+		</div>
+	);
+
+	return (
+		<div className="flex h-88 flex-col overflow-hidden rounded-lg border bg-background sm:h-96 sm:rounded-xl">
+			{showSent ? (
+				<>
+					{/* Messages viewport */}
+					<div
+						ref={viewportRef}
+						className="flex-1 overflow-y-auto px-3 py-3 sm:px-4"
+						aria-hidden={!interrupted}
+					>
+						<div className="space-y-3">
+							{/* User message (real bubble style) */}
+							<div className="flex justify-end pl-8">
+								<div className="wrap-break-word rounded-xl bg-muted px-4 py-2.5 text-sm text-foreground">
+									{demo.prompt}
+								</div>
+							</div>
+
+							{/* Agent timeline */}
+							{shownSteps > 0 && (
+								<DemoTimeline
+									steps={demo.steps}
+									startedCount={shownSteps}
+									runningIndex={shownSteps - 1}
+									settled={stepsSettled}
+								/>
+							)}
+
+							{/* Streamed answer */}
+							{stepsSettled && shownRows > 0 && (
+								<div className="space-y-2 pr-6 text-sm leading-relaxed text-foreground">
+									<ul className="space-y-1.5">
+										{demo.rows.slice(0, shownRows).map((row) => (
+											<li
+												key={row.primary}
+												className="fade-in slide-in-from-bottom-1 flex animate-in items-start gap-2 duration-200"
+											>
+												<span className="mt-2 size-1 shrink-0 rounded-full bg-foreground/60" />
+												<span className="min-w-0">
+													<span className="font-medium">{row.primary}</span>
+													<span className="text-muted-foreground"> — {row.secondary}</span>
+												</span>
+											</li>
+										))}
+									</ul>
+									{shownStage === "done" && (
+										<p className="fade-in animate-in text-muted-foreground duration-300">
+											{demo.summary}
+										</p>
+									)}
+								</div>
+							)}
+						</div>
+					</div>
+					{/* Composer docked at the bottom while a thread is active */}
+					<div className="p-2 sm:p-3">{composer}</div>
+				</>
+			) : (
+				/* Empty thread: composer centered, like the real new-chat welcome */
+				<div className="flex flex-1 items-center p-3 sm:p-4">
+					<div className="w-full">{composer}</div>
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/surfsense_web/components/homepage/hero-section.tsx b/surfsense_web/components/homepage/hero-section.tsx
index c9430f098..4d6665c16 100644
--- a/surfsense_web/components/homepage/hero-section.tsx
+++ b/surfsense_web/components/homepage/hero-section.tsx
@@ -1,42 +1,15 @@
 "use client";
-import {
-	ChevronDown,
-	Clock,
-	CornerDownLeft,
-	Download,
-	Lightbulb,
-	Monitor,
-	Sparkles,
-} from "lucide-react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import Link from "next/link";
 import React, { memo, useCallback, useEffect, useRef, useState } from "react";
 import Balancer from "react-wrap-balancer";
+import { HeroChatDemo, type HeroChatDemoScript } from "@/components/homepage/hero-chat-demo";
 import { Button } from "@/components/ui/button";
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-	Empty,
-	EmptyDescription,
-	EmptyHeader,
-	EmptyMedia,
-	EmptyTitle,
-} from "@/components/ui/empty";
 import { ExpandedMediaOverlay, useExpandedMedia } from "@/components/ui/expanded-gif-overlay";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import {
-	GITHUB_RELEASES_URL,
-	getAssetLabel,
-	usePrimaryDownload,
-} from "@/lib/desktop-download-utils";
 import { buildBackendUrl } from "@/lib/env-config";
 import { trackLoginAttempt } from "@/lib/posthog/events";
 import { cn } from "@/lib/utils";
@@ -74,161 +47,509 @@ type HeroUseCase = {
 	title: string;
 	description: string;
 	src: string | null;
-	comingSoon?: boolean;
-	examples?: string[];
+	/** Scripted chat demo shown when there is no recorded video. */
+	demo?: HeroChatDemoScript;
 };
 
 type HeroCategory = {
 	id: string;
 	label: string;
-	desktopOnly?: boolean;
 	useCases: HeroUseCase[];
 };
 
 const HERO_TUTORIAL = "/homepage/hero_tutorial";
 const HERO_REALTIME = "/homepage/hero_realtime";
 
+/*
+ * Every scripted demo below mirrors a task the SurfSense agent has actually run
+ * end-to-end (see backend agent e2e suite). Recorded videos take precedence via
+ * `src`; everything else plays the chat demo.
+ */
 const CATEGORIES: HeroCategory[] = [
 	{
-		id: "desktop",
-		label: "Desktop App",
-		desktopOnly: true,
+		id: "competitor-monitoring",
+		label: "Competitor Monitoring",
 		useCases: [
 			{
-				id: "general",
-				title: "General Assist",
-				description: "Launch SurfSense instantly from any application with a global shortcut.",
-				src: `${HERO_TUTORIAL}/general_assist.mp4`,
+				id: "pricing-watch",
+				title: "Competitor Pricing Watch",
+				description:
+					"The agent extracts every plan from a competitor's pricing page, and an automation re-checks it so you hear about changes first.",
+				src: null,
+				demo: {
+					prompt: "Extract every plan, price, and limit from our top 3 competitors' pricing pages.",
+					steps: [
+						{
+							title: "Plan tasks",
+							items: ["Crawl 3 pricing pages", "Extract plans, prices, limits into one table"],
+						},
+						{
+							title: "Web Crawler",
+							items: [
+								"competitor-a.com/pricing · 4 plans",
+								"competitor-b.com/pricing · 3 plans",
+								"competitor-c.com/plans · 4 plans",
+							],
+						},
+						{
+							title: "Create automation",
+							items: ["Daily pricing re-check · alert on any change"],
+						},
+					],
+					rows: [
+						{
+							primary: "Competitor A — Pro $49/mo",
+							secondary: "10k credits · 3 seats · raised from $39 on Jun 12",
+						},
+						{
+							primary: "Competitor B — Team $99/mo",
+							secondary: "50k credits · unlimited seats · annual-only",
+						},
+						{
+							primary: "Competitor C — Free tier removed",
+							secondary: "Trial now 7 days · card required",
+						},
+					],
+					summary: "3 pages parsed · 11 plans in one table · daily re-check scheduled",
+				},
 			},
 			{
-				id: "quick",
-				title: "Quick Assist",
-				description: "Select text anywhere, then ask AI to explain, rewrite, or act on it.",
-				src: `${HERO_TUTORIAL}/quick_assist.mp4`,
+				id: "site-diff",
+				title: "Product & Changelog Tracking",
+				description:
+					"An automation crawls a rival's product, changelog, and careers pages and briefs you on what shipped.",
+				src: null,
+				demo: {
+					prompt:
+						"Every Monday, crawl our competitors' changelogs and brief me on what they shipped.",
+					steps: [
+						{
+							title: "Web Crawler",
+							items: [
+								"competitor-a.com/changelog · 6 entries",
+								"competitor-b.com/whats-new · 3 entries",
+							],
+						},
+						{
+							title: "Create automation",
+							items: ["Weekly changelog brief · Mondays 8:00"],
+						},
+					],
+					rows: [
+						{
+							primary: "Competitor A shipped SSO + audit logs",
+							secondary: "changelog · Jun 30 · enterprise push",
+						},
+						{
+							primary: "Competitor B launched API v2 beta",
+							secondary: "whats-new · Jul 2 · targets developers",
+						},
+					],
+					summary: "Brief saved to workspace · automation runs Mondays 8:00",
+				},
 			},
 			{
-				id: "screenshot",
-				title: "Screenshot Assist",
-				description: "Capture any region of your screen and ask AI about what’s in it.",
-				src: `${HERO_TUTORIAL}/screenshot_assist.mp4`,
-			},
-			{
-				id: "watch-folder",
-				title: "Watch Local Folder",
-				description: "Auto-sync a local folder to your knowledge base. Great for Obsidian vaults.",
-				src: `${HERO_TUTORIAL}/folder_watch.mp4`,
+				id: "serp-watch",
+				title: "Rank & Ad Monitoring",
+				description:
+					"Automations track the Google rankings, paid ads, and AI Overview citations your market actually sees.",
+				src: null,
+				demo: {
+					prompt: "Track who ranks and runs ads for our top 10 keywords in the US.",
+					steps: [
+						{
+							title: "Google Search",
+							items: ["Scraping 10 SERPs (US) · organic, ads, AI Overviews"],
+						},
+						{
+							title: "Plan tasks",
+							items: ["Diff against last capture", "Flag rank and ad movements"],
+						},
+						{
+							title: "Create automation",
+							items: ["Daily rank + ad watch on these keywords"],
+						},
+					],
+					rows: [
+						{
+							primary: '"competitive intelligence tools" — you #4, ↓1',
+							secondary: "Competitor A took #3 · runs 2 sponsored ads",
+						},
+						{
+							primary: "AI Overview cites Competitor B",
+							secondary: 'triggered on "brand monitoring software"',
+						},
+					],
+					summary: "10 SERPs captured · 3 movements flagged · daily automation on",
+				},
 			},
 		],
 	},
 	{
-		id: "deliverables",
-		label: "Deliverable Studio",
+		id: "lead-generation",
+		label: "B2B Lead Generation",
 		useCases: [
+			{
+				id: "local-leads",
+				title: "Local Business Leads",
+				description:
+					"Turn a category and a territory into a lead list with phones, websites, ratings, and decision-maker contacts.",
+				src: null,
+				demo: {
+					prompt:
+						"Find the top 5 burger places in San Jose and pull staff contacts from their websites.",
+					steps: [
+						{
+							title: "Google Maps",
+							items: ['Searching "burger san jose" · top 5 by rating and reviews'],
+						},
+						{
+							title: "Web Crawler",
+							items: ["Visiting 5 business sites", "Extracting staff and contact pages"],
+						},
+						{
+							title: "Save document",
+							items: ["Lead list with phones, sites, contacts"],
+						},
+					],
+					rows: [
+						{
+							primary: "The Counter — 4.5★ (2,310 reviews)",
+							secondary: "+1 408-423-9200 · thecounter.com · 2 contacts found",
+						},
+						{
+							primary: "Paper Plane — 4.6★ (1,882 reviews)",
+							secondary: "site crawled · owner + events email found",
+						},
+						{
+							primary: "Smoking Pig BBQ — 4.4★ (3,041 reviews)",
+							secondary: "+1 408-380-4784 · catering contact found",
+						},
+					],
+					summary: "5 places · 9 contacts with provenance · saved as lead list",
+				},
+			},
+			{
+				id: "team-rosters",
+				title: "Team Rosters & Contacts",
+				description:
+					"Spider any company site and pull the full team with emails, socials, and provenance, exported to CSV.",
+				src: null,
+				demo: {
+					prompt: "Get the complete a16z team roster and save it as a CSV in my workspace.",
+					steps: [
+						{
+							title: "Web Crawler",
+							items: ["a16z.com/team · following profile links", "142 profiles found"],
+						},
+						{
+							title: "Plan tasks",
+							items: ["Enrich each profile with email or LinkedIn"],
+						},
+						{
+							title: "Write file",
+							items: ["a16z-team.csv · saved to workspace"],
+						},
+					],
+					rows: [
+						{
+							primary: "142 team profiles extracted",
+							secondary: "name, role, focus area, profile URL",
+						},
+						{
+							primary: "89 enriched with email or LinkedIn",
+							secondary: "pulled from bios and linked pages",
+						},
+						{ primary: "a16z-team.csv", secondary: "saved to your workspace · ready to export" },
+					],
+					summary: "Full roster in 94s · every row cites its source page",
+				},
+			},
+			{
+				id: "portfolio-mapping",
+				title: "Portfolio & Market Mapping",
+				description:
+					"Map an investor's portfolio or a whole category, then enrich every company with pricing and contacts.",
+				src: null,
+				demo: {
+					prompt: "Get the a16z team and their portfolio companies.",
+					steps: [
+						{
+							title: "Web Crawler",
+							items: ["a16z.com/team · 142 profiles", "a16z.com/portfolio · 312 companies"],
+						},
+						{
+							title: "Plan tasks",
+							items: [
+								"Match partners to their portfolio boards",
+								"Enrich your category with pricing",
+							],
+						},
+					],
+					rows: [
+						{
+							primary: "312 portfolio companies mapped",
+							secondary: "sector, stage, website, one-line pitch",
+						},
+						{
+							primary: "48 in your category",
+							secondary: "enriched with pricing page + team size",
+						},
+					],
+					summary: "Market map saved · new investments auto-added by automation",
+				},
+			},
+		],
+	},
+	{
+		id: "brand-listening",
+		label: "Brand & Market Listening",
+		useCases: [
+			{
+				id: "reddit-listening",
+				title: "Reddit Brand Monitoring",
+				description:
+					"Hear what your market says about you, your competitors, and your category in the threads where buyers speak candidly.",
+				src: null,
+				demo: {
+					prompt: "Give me 20 posts on Reddit where people ask for an alternative to NotebookLM.",
+					steps: [
+						{
+							title: "Reddit",
+							items: [
+								'Searching "notebooklm alternative" across Reddit',
+								"37 posts found · ranking by relevance and upvotes",
+							],
+						},
+						{
+							title: "Plan tasks",
+							items: ["Tag each post: buying intent, churn signal, question"],
+						},
+					],
+					rows: [
+						{
+							primary: "Best NotebookLM alternative that's open source?",
+							secondary: "r/selfhosted · 214 upvotes · buying intent",
+						},
+						{
+							primary: "NotebookLM keeps losing my sources, what else?",
+							secondary: "r/artificial · 96 upvotes · churn signal",
+						},
+						{
+							primary: "Anything like NotebookLM but with an API?",
+							secondary: "r/LocalLLaMA · 71 upvotes · developer intent",
+						},
+					],
+					summary: "20 posts · 8 with buying intent · daily tracking automation on",
+				},
+			},
+			{
+				id: "youtube-sentiment",
+				title: "YouTube Audience Sentiment",
+				description:
+					"Pull videos, transcripts, and comments at scale to mine what audiences praise and complain about.",
+				src: null,
+				demo: {
+					prompt:
+						"Analyze the comments on our competitor's last 10 videos and cluster the complaints.",
+					steps: [
+						{
+							title: "Youtube",
+							items: ["Fetching last 10 videos", "4,812 comments pulled"],
+						},
+						{
+							title: "Plan tasks",
+							items: ["Cluster complaints by theme", "Score sentiment per cluster"],
+						},
+					],
+					rows: [
+						{
+							primary: "Pricing complaints — 31% of negative comments",
+							secondary: '"went from free to $20/mo overnight"',
+						},
+						{
+							primary: "Export limits — 22%",
+							secondary: '"can\'t get my own data out"',
+						},
+						{
+							primary: "Praise: onboarding — 18% positive",
+							secondary: "worth copying in your messaging",
+						},
+					],
+					summary: "4,812 comments clustered · sentiment report saved",
+				},
+			},
+			{
+				id: "switcher-mining",
+				title: "Switcher & Intent Mining",
+				description:
+					"Find the people actively looking for an alternative to a competitor, ranked by how ready they are to move.",
+				src: null,
+				demo: {
+					prompt: "Find people asking for alternatives to our biggest competitor this month.",
+					steps: [
+						{
+							title: "Reddit",
+							items: [
+								'Searching "alternative" mentions · past month',
+								"12 active switcher threads",
+							],
+						},
+						{
+							title: "Plan tasks",
+							items: ["Rank by recency and engagement", "Extract switching triggers"],
+						},
+					],
+					rows: [
+						{
+							primary: "12 threads with active switchers",
+							secondary: "ranked by recency and engagement",
+						},
+						{
+							primary: "Top trigger: API price increase",
+							secondary: "mentioned in 7 of 12 threads",
+						},
+					],
+					summary: "Outreach-ready summaries drafted for the 5 hottest threads",
+				},
+			},
+		],
+	},
+	{
+		id: "market-research",
+		label: "Market Research",
+		useCases: [
+			{
+				id: "deep-research",
+				title: "Deep Research on the Live Web",
+				description:
+					"The agent crawls dozens of live sources on a question and synthesizes a cited answer, not a stale index.",
+				src: null,
+				demo: {
+					prompt: "Research the AI note-taking market and build a landscape brief with citations.",
+					steps: [
+						{
+							title: "Research",
+							items: ["Crawling 38 live sources", "Vendor sites, reviews, pricing pages"],
+						},
+						{
+							title: "Generate report",
+							items: ["Landscape brief · 24 inline citations"],
+						},
+					],
+					rows: [
+						{
+							primary: "23 vendors mapped across 4 segments",
+							secondary: "consumer, prosumer, team, developer-first",
+						},
+						{
+							primary: "Pricing clusters at $10 and $20/mo",
+							secondary: "3 vendors moved upmarket this quarter",
+						},
+					],
+					summary: "Landscape brief saved · 24 inline citations you can check",
+				},
+			},
+			{
+				id: "geo-monitoring",
+				title: "AI Overview & GEO Tracking",
+				description:
+					"Capture when Google's AI Overviews answer your market's queries, and exactly which sources they cite.",
+				src: null,
+				demo: {
+					prompt: "Which of our target keywords trigger an AI Overview, and who gets cited?",
+					steps: [
+						{
+							title: "Google Search",
+							items: ["Scraping 25 SERPs", "Capturing AI Overviews and citations"],
+						},
+						{
+							title: "Plan tasks",
+							items: ["Map citations to competitors", "Compute your citation gap"],
+						},
+					],
+					rows: [
+						{
+							primary: "9 of 25 keywords trigger an AI Overview",
+							secondary: "up from 6 last month",
+						},
+						{
+							primary: "Competitor A cited on 4 · you on 1",
+							secondary: "their listicle wins 3 of those citations",
+						},
+					],
+					summary: "Citation gap report saved · weekly re-check scheduled",
+				},
+			},
+			{
+				id: "cited-briefs",
+				title: "Cited Briefs & Alerts",
+				description:
+					"Everything the agents gather lands in your workspace as briefs and alerts with sources you can check.",
+				src: null,
+				demo: {
+					prompt: "Send me a Monday brief of every competitor change detected last week.",
+					steps: [
+						{
+							title: "Plan tasks",
+							items: ["Collect pricing, changelog, SERP, Reddit signals"],
+						},
+						{
+							title: "Create automation",
+							items: ["Weekly brief · Mondays 8:00 · workspace + email"],
+						},
+					],
+					rows: [
+						{
+							primary: "Sources: pricing, changelogs, SERPs, Reddit",
+							secondary: "everything your agents tracked this week",
+						},
+						{
+							primary: "Delivered to workspace + email",
+							secondary: "every claim links to its source",
+						},
+					],
+					summary: "Automation created · first brief lands Monday 8:00",
+				},
+			},
+		],
+	},
+	{
+		id: "platform-agent",
+		label: "Platform Agent",
+		useCases: [
+			{
+				id: "chat-workspace",
+				title: "Chat With Everything You Gather",
+				description:
+					"Ask questions across every crawl, mention, and document in your workspace and get answers with inline citations.",
+				src: `${HERO_TUTORIAL}/BQnaGif_compressed.mp4`,
+			},
 			{
 				id: "report",
 				title: "AI Report Generator",
 				description:
-					"Generate cited research reports from your documents, then export to PDF or Markdown.",
+					"Turn your intelligence into cited research reports, then export to PDF or Markdown.",
 				src: `${HERO_TUTORIAL}/ReportGenGif_compressed.mp4`,
 			},
 			{
 				id: "podcast",
 				title: "AI Podcast Generator",
-				description: "Turn any document or folder into a two-host AI podcast in under 20 seconds.",
+				description: "Turn any brief or folder into a two-host AI podcast in under 20 seconds.",
 				src: `${HERO_TUTORIAL}/PodcastGenGif.mp4`,
 			},
 			{
 				id: "presentation",
 				title: "AI Presentation & Video Maker",
-				description: "Create editable slide decks and narrated video overviews from your sources.",
+				description: "Create editable slide decks and narrated video overviews from your findings.",
 				src: `${HERO_TUTORIAL}/video_gen_surf.mp4`,
 			},
 			{
-				id: "image",
-				title: "AI Image Generator",
-				description: "Generate high-quality images straight from your chats and documents.",
-				src: `${HERO_TUTORIAL}/ImageGenGif.mp4`,
-			},
-			{
-				id: "resume",
-				title: "AI Resume Builder",
-				description: "Tailor your existing resume to any job description and beat the ATS.",
-				src: null,
-				comingSoon: true,
-				examples: [
-					"Tailor my resume to this job description so it gets past ATS and lands an interview.",
-					"Optimize my resume for ATS by matching the keywords in this job posting.",
-					"Rewrite my resume bullet points to highlight the skills this role is asking for.",
-					"Compare my resume against this job description and list the gaps to fix.",
-					"Write a matching cover letter from my resume and this job description.",
-				],
-			},
-		],
-	},
-	{
-		id: "automations",
-		label: "Automations",
-		useCases: [
-			{
-				id: "schedule",
-				title: "Scheduled AI Workflows",
-				description: "Run an agent on a schedule: daily briefs, weekly digests, recurring reports.",
-				src: null,
-				comingSoon: true,
-				examples: [
-					"Email me a daily brief of new documents in my knowledge base every morning.",
-					"Generate a weekly status report from my Slack and Gmail every Friday.",
-					"Run a monthly competitor analysis report and save it to my workspace.",
-					"Summarize my GitHub and Linear activity into a daily standup update.",
-					"Create a recurring weekly research report on the topics I track.",
-				],
-			},
-			{
-				id: "event",
-				title: "Event-Triggered Automations",
+				id: "connect",
+				title: "Connect & Sync Your Tools",
 				description:
-					"Fire an agent the moment a document lands in a folder, then post the result to your tools.",
-				src: null,
-				comingSoon: true,
-				examples: [
-					"When a PDF lands in my Research folder, generate a cited AI summary.",
-					"When new meeting notes are added, turn them into meeting minutes with action items.",
-					"When an invoice is uploaded, extract the vendor, total, and due date into a table.",
-					"When a contract enters my Legal folder, flag key terms and renewal dates.",
-					"When a resume is added to Candidates, screen it against the job description.",
-				],
-			},
-			{
-				id: "chat-built",
-				title: "Chat-Built Automations",
-				description: "Describe an automation in plain English and SurfSense builds it for you.",
-				src: null,
-				comingSoon: true,
-				examples: [
-					"Build an AI agent that emails me a summary of new Notion pages each morning.",
-					"Create a no-code automation that posts a weekly research digest to Slack.",
-					"Set up an AI note taker that turns new meeting notes into minutes.",
-					"Make a workflow that extracts action items from meeting notes and assigns owners.",
-					"Automate a daily email brief from my Gmail and Google Drive.",
-				],
-			},
-		],
-	},
-	{
-		id: "search-chat",
-		label: "Search & Chat",
-		useCases: [
-			{
-				id: "chat-docs",
-				title: "Chat With Your PDFs & Docs",
-				description: "Ask questions across all your files and get answers with inline citations.",
-				src: `${HERO_TUTORIAL}/BQnaGif_compressed.mp4`,
-			},
-			{
-				id: "search",
-				title: "AI Search With Citations",
-				description: "Hybrid semantic and keyword search across your entire knowledge base.",
-				src: `${HERO_TUTORIAL}/BSNCGif.mp4`,
+					"Sync Notion, Slack, Google Drive, Gmail, GitHub, Linear and 25+ sources into the same searchable workspace.",
+				src: `${HERO_TUTORIAL}/ConnectorFlowGif.mp4`,
 			},
 			{
 				id: "collab",
@@ -236,45 +557,6 @@ const CATEGORIES: HeroCategory[] = [
 				description: "Work on AI conversations with your team in real time.",
 				src: `${HERO_REALTIME}/RealTimeChatGif.mp4`,
 			},
-			{
-				id: "comments",
-				title: "Comments & Mentions",
-				description: "Comment and tag teammates on any AI message.",
-				src: `${HERO_REALTIME}/RealTimeCommentsFlow.mp4`,
-			},
-		],
-	},
-	{
-		id: "connectors",
-		label: "Connectors & Integrations",
-		useCases: [
-			{
-				id: "connect",
-				title: "Connect & Sync Your Tools",
-				description:
-					"Sync Notion, Slack, Google Drive, Gmail, GitHub, Linear and 25+ sources into one searchable corpus.",
-				src: `${HERO_TUTORIAL}/ConnectorFlowGif.mp4`,
-			},
-			{
-				id: "upload",
-				title: "Chat With Uploaded Files",
-				description: "Drop in PDFs, Office docs, images and audio. Instantly searchable.",
-				src: `${HERO_TUTORIAL}/DocUploadGif.mp4`,
-			},
-			{
-				id: "write-back",
-				title: "Connector Write-Back",
-				description: "Let the agent post results back to Notion, Slack, Linear and Drive.",
-				src: null,
-				comingSoon: true,
-				examples: [
-					"Post this research summary to my Notion workspace.",
-					"Send these meeting action items to our team Slack channel.",
-					"Create a Jira ticket from this bug report.",
-					"Open a Linear issue from this feature request.",
-					"Save this generated report to Google Drive as a doc.",
-				],
-			},
 		],
 	},
 ];
@@ -285,24 +567,24 @@ export function HeroSection() {
 			<div className="mt-4 flex w-full min-w-0 flex-col items-start px-2 md:px-8 xl:px-0">
 				<h1
 					className={cn(
-						"relative mt-4 max-w-7xl text-left text-4xl font-bold tracking-tight text-balance text-neutral-900 sm:text-5xl md:text-6xl xl:text-8xl dark:text-neutral-50"
+						"relative mt-4 max-w-4xl text-left text-4xl font-bold tracking-tight text-balance text-neutral-900 sm:text-5xl md:text-6xl dark:text-neutral-50"
 					)}
 				>
-					<Balancer>NotebookLM for Teams</Balancer>
+					<Balancer>Give your AI agents competitive intelligence.</Balancer>
 				</h1>
-				<div className="mt-4 flex w-full flex-col items-start justify-between gap-4 md:mt-12 md:flex-row md:items-end md:gap-10">
+				<div className="mt-4 flex w-full flex-col items-start justify-between gap-4 md:mt-8 md:flex-row md:items-end md:gap-10">
 					<div>
 						<p
 							className={cn(
-								"relative mb-8 max-w-2xl text-left text-sm tracking-wide text-neutral-600 antialiased sm:text-base md:text-xl dark:text-neutral-400"
+								"relative mb-8 max-w-2xl text-left text-sm text-neutral-600 antialiased sm:text-base md:text-lg dark:text-neutral-400"
 							)}
 						>
-							A free, open source NotebookLM alternative for teams with no data limits. Use ChatGPT,
-							Claude AI, and any AI model for free.
+							SurfSense is an open-source competitive intelligence platform. Your AI agents monitor
+							competitors, track rankings, and listen to your market with live data from the
+							platforms that matter, through one API or MCP server.
 						</p>
 
 						<div className="relative mb-4 flex w-full flex-col justify-center gap-y-2 sm:flex-row sm:justify-start sm:space-y-0 sm:space-x-4">
-							<DownloadButton />
 							<GetStartedButton />
 						</div>
 					</div>
@@ -346,88 +628,6 @@ function GetStartedButton() {
 	);
 }
 
-function DownloadButton() {
-	const { os, primary, alternatives, isMobileOS } = usePrimaryDownload();
-
-	const fallbackUrl = GITHUB_RELEASES_URL;
-	const mobileDisabledLabel = "Desktop app unavailable on mobile";
-
-	if (isMobileOS) {
-		return (
-			<Button
-				type="button"
-				variant="ghost"
-				disabled
-				className="h-14 w-full gap-2 rounded-lg border border-neutral-200 bg-white text-center text-base font-medium text-neutral-700 shadow-sm transition duration-150 sm:w-auto sm:px-6 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200"
-			>
-				<Download className="size-4" />
-				{mobileDisabledLabel}
-			</Button>
-		);
-	}
-
-	if (!primary) {
-		return (
-			<Button
-				asChild
-				variant="ghost"
-				className="h-14 w-full gap-2 rounded-lg border border-neutral-200 bg-white text-center text-base font-medium text-neutral-700 shadow-sm transition duration-150 active:scale-98 hover:bg-neutral-50 sm:w-auto sm:px-6 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800"
-			>
-				<a href={fallbackUrl} target="_blank" rel="noopener noreferrer">
-					<Download className="size-4" />
-					Download for {os}
-				</a>
-			</Button>
-		);
-	}
-
-	return (
-		<div className="flex h-14 w-full items-stretch sm:w-auto">
-			<Button
-				asChild
-				variant="ghost"
-				className="h-auto flex-1 gap-2 rounded-l-lg rounded-r-none border border-r-0 border-neutral-200 bg-white px-5 text-base font-medium text-neutral-700 shadow-sm transition duration-150 active:scale-[0.99] hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800"
-			>
-				<a href={primary.url}>
-					<Download className="size-4 shrink-0" />
-					Download for {os}
-				</a>
-			</Button>
-			<DropdownMenu>
-				<DropdownMenuTrigger asChild>
-					<Button
-						type="button"
-						variant="ghost"
-						className="h-auto rounded-l-none rounded-r-lg border border-neutral-200 bg-white px-2.5 text-neutral-500 shadow-sm transition duration-150 hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800"
-					>
-						<ChevronDown className="size-4" />
-					</Button>
-				</DropdownMenuTrigger>
-				<DropdownMenuContent align="end" className="w-64">
-					{alternatives.map((asset) => (
-						<DropdownMenuItem key={asset.name} asChild>
-							<a href={asset.url} className="cursor-pointer">
-								<Download className="mr-2 size-3.5" />
-								{getAssetLabel(asset.name)}
-							</a>
-						</DropdownMenuItem>
-					))}
-					<DropdownMenuItem asChild>
-						<a
-							href={fallbackUrl}
-							target="_blank"
-							rel="noopener noreferrer"
-							className="cursor-pointer"
-						>
-							All downloads
-						</a>
-					</DropdownMenuItem>
-				</DropdownMenuContent>
-			</DropdownMenu>
-		</div>
-	);
-}
-
 const TabVideo = memo(function TabVideo({
 	src,
 	title,
@@ -478,52 +678,6 @@ const TabVideo = memo(function TabVideo({
 	);
 });
 
-const UseCasePlaceholder = ({ title }: { title: string }) => (
-	<Empty className="size-full justify-center rounded-lg border border-dashed bg-muted/30 sm:rounded-xl">
-		<EmptyHeader>
-			<EmptyMedia variant="icon">
-				<Clock aria-hidden="true" />
-			</EmptyMedia>
-			<EmptyTitle>Demo coming soon</EmptyTitle>
-			<EmptyDescription className="text-pretty">{`A walkthrough of ${title} is on the way.`}</EmptyDescription>
-		</EmptyHeader>
-	</Empty>
-);
-
-const UseCaseExamples = ({ examples }: { examples: string[] }) => (
-	<div className="flex size-full flex-col gap-3 rounded-lg border border-dashed bg-muted/30 p-4 sm:rounded-xl sm:p-5">
-		<div className="flex items-center gap-2">
-			<Lightbulb aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
-			<p className="text-sm font-medium text-foreground">Try prompts like these today</p>
-		</div>
-		<ul className="flex min-w-0 flex-col gap-2">
-			{examples.map((example) => (
-				<li key={example}>
-					<div className="flex items-start gap-2.5 rounded-md border bg-background px-3 py-2">
-						<CornerDownLeft
-							aria-hidden="true"
-							className="mt-0.5 size-3.5 shrink-0 text-muted-foreground/70"
-						/>
-						<span className="min-w-0 text-sm text-pretty text-muted-foreground">{example}</span>
-					</div>
-				</li>
-			))}
-		</ul>
-	</div>
-);
-
-const DesktopBadge = () => (
-	<Tooltip>
-		<TooltipTrigger asChild>
-			<span className="ml-0.5 inline-flex items-center text-amber-600 dark:text-amber-400">
-				<Monitor aria-hidden="true" className="size-3.5" />
-				<span className="sr-only">Desktop app only</span>
-			</span>
-		</TooltipTrigger>
-		<TooltipContent side="bottom">Desktop app only</TooltipContent>
-	</Tooltip>
-);
-
 const UseCasePane = memo(function UseCasePane({
 	useCase,
 	reduceMotion,
@@ -532,7 +686,7 @@ const UseCasePane = memo(function UseCasePane({
 	reduceMotion: boolean;
 }) {
 	const { expanded, open, close } = useExpandedMedia();
-	const hasVideo = !useCase.comingSoon && Boolean(useCase.src);
+	const hasVideo = Boolean(useCase.src);
 
 	const media = hasVideo ? (
 		<Button
@@ -546,13 +700,7 @@ const UseCasePane = memo(function UseCasePane({
 		</Button>
 	) : (
 		<div className="bg-neutral-50 p-2 sm:p-3 dark:bg-neutral-950">
-			{useCase.examples && useCase.examples.length > 0 ? (
-				<UseCaseExamples examples={useCase.examples} />
-			) : (
-				<div className="aspect-video w-full">
-					<UseCasePlaceholder title={useCase.title} />
-				</div>
-			)}
+			{useCase.demo && <HeroChatDemo demo={useCase.demo} reduceMotion={reduceMotion} />}
 		</div>
 	);
 
@@ -609,14 +757,6 @@ const CategoryPanel = memo(function CategoryPanel({
 }) {
 	return (
 		<div className="flex w-full flex-col gap-3">
-			{category.desktopOnly && (
-				<div className="flex items-start gap-2 rounded-lg border border-amber-300/60 bg-amber-50 px-3 py-2 text-xs text-amber-800 sm:text-sm dark:border-amber-500/40 dark:bg-amber-950/30 dark:text-amber-200">
-					<Sparkles aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
-					<span className="text-pretty">
-						The desktop app includes everything in SurfSense, plus these native-only superpowers.
-					</span>
-				</div>
-			)}
 			<Tabs
 				defaultValue={category.useCases[0]?.id}
 				orientation="vertical"
@@ -670,15 +810,9 @@ const BrowserWindow = () => {
 							<React.Fragment key={category.id}>
 								<TabsTrigger
 									value={category.id}
-									className={cn(
-										"h-auto shrink-0 touch-manipulation gap-1.5 rounded-md px-2.5 py-1 text-xs sm:text-sm",
-										category.desktopOnly
-											? "bg-amber-100/70 text-amber-800 hover:bg-amber-100 data-[state=active]:bg-amber-200/80 data-[state=active]:text-amber-900 data-[state=active]:shadow-sm dark:bg-amber-950/40 dark:text-amber-200 dark:hover:bg-amber-900/40 dark:data-[state=active]:bg-amber-900/60 dark:data-[state=active]:text-amber-50"
-											: "data-[state=active]:bg-background data-[state=active]:shadow"
-									)}
+									className="h-auto shrink-0 touch-manipulation gap-1.5 rounded-md px-2.5 py-1 text-xs data-[state=active]:bg-background data-[state=active]:shadow sm:text-sm"
 								>
 									{category.label}
-									{category.desktopOnly && <DesktopBadge />}
 								</TabsTrigger>
 								{index !== CATEGORIES.length - 1 && (
 									<Separator
diff --git a/surfsense_web/components/homepage/home-faq.tsx b/surfsense_web/components/homepage/home-faq.tsx
new file mode 100644
index 000000000..85ec9be12
--- /dev/null
+++ b/surfsense_web/components/homepage/home-faq.tsx
@@ -0,0 +1,52 @@
+import { ConnectorFaq } from "@/components/connectors-marketing/connector-faq";
+import { Reveal } from "@/components/connectors-marketing/reveal";
+import { MarketingSection } from "@/components/marketing/section";
+import { FAQJsonLd } from "@/components/seo/json-ld";
+
+/** Answers are 40-60 words, written as quotable definitions for AI Overviews. */
+export const HOME_FAQ = [
+	{
+		question: "What is competitive intelligence?",
+		answer:
+			"Competitive intelligence is the practice of gathering and analyzing public information about competitors and your market to make better decisions. It covers pricing, product moves, rankings, reviews, and what customers say online. SurfSense automates it: AI agents collect the live data and turn it into briefs and alerts.",
+	},
+	{
+		question: "What is an MCP server?",
+		answer:
+			"An MCP server exposes tools and data to AI agents through the Model Context Protocol, an open standard adopted by Claude, Cursor, and most agent frameworks. Add the SurfSense MCP server and your agents can call every connector, such as reddit.scrape or google_search.scrape, as native tools.",
+	},
+	{
+		question: "How is SurfSense different from a web scraping API?",
+		answer:
+			"A web scraping API returns raw data and leaves the intelligence to you. SurfSense pairs platform-native connectors with an agent harness: retries, structured output, credit metering, and an MCP server, so your agents go from a question to a brief without you building the plumbing in between.",
+	},
+	{
+		question: "Can I use the connector APIs directly in my own app?",
+		answer:
+			"Yes. Every platform connector is a typed REST endpoint you can call from any language with your SurfSense API key, no agent required. Send a POST request with your query and get structured JSON back. Each connector page has copy-paste examples in cURL, Python, JavaScript, Go, and more.",
+	},
+	{
+		question: "Can I self-host SurfSense?",
+		answer:
+			"Yes. SurfSense is open source and self-hostable, so you can run the entire platform on your own infrastructure and keep sensitive competitive research in-house. Use the cloud version to start in minutes, or deploy from the GitHub repository when you need full control.",
+	},
+];
+
+export function HomeFaq() {
+	return (
+		<MarketingSection>
+			<FAQJsonLd questions={HOME_FAQ} />
+			<Reveal>
+				<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
+					Frequently asked questions
+				</h2>
+			</Reveal>
+			<Reveal>
+				{/* Accordion capped at a readable measure; left edge stays on the page grid. */}
+				<div className="mt-6 max-w-3xl">
+					<ConnectorFaq items={HOME_FAQ} />
+				</div>
+			</Reveal>
+		</MarketingSection>
+	);
+}
diff --git a/surfsense_web/components/homepage/how-it-works.tsx b/surfsense_web/components/homepage/how-it-works.tsx
new file mode 100644
index 000000000..6aa6ee9ae
--- /dev/null
+++ b/surfsense_web/components/homepage/how-it-works.tsx
@@ -0,0 +1,49 @@
+import { Reveal } from "@/components/connectors-marketing/reveal";
+import { FlowLine } from "@/components/homepage/flow-line";
+import { MarketingSection } from "@/components/marketing/section";
+
+/** Numbered because the content is genuinely sequential: connect, gather, act. */
+const STEPS = [
+	{
+		number: "01",
+		title: "Connect",
+		description:
+			"Grab one API key and call any connector straight from your own code, or add the SurfSense MCP server to Claude, Cursor, or your own agents. Every connector is a REST endpoint and a native agent tool.",
+	},
+	{
+		number: "02",
+		title: "Agents gather",
+		description:
+			"Your agents pull live data through the agent harness: platform connectors, retries, structured output, and credit metering handled for you.",
+	},
+	{
+		number: "03",
+		title: "You act",
+		description:
+			"Get briefs and alerts instead of raw exports. A rank moves, a price changes, a thread turns on you, and you hear about it first.",
+	},
+];
+
+export function HowItWorks() {
+	return (
+		<MarketingSection>
+			<Reveal>
+				<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">How SurfSense works</h2>
+			</Reveal>
+			<FlowLine />
+			<div className="grid gap-6 md:mt-0 mt-8 md:grid-cols-3">
+				{STEPS.map((step, i) => (
+					<Reveal key={step.number} delay={i * 0.06}>
+						<div className="h-full rounded-xl border bg-card p-6">
+							<span className="font-mono text-sm font-medium text-brand">{step.number}</span>
+							<h3 className="mt-2 text-lg font-semibold">{step.title}</h3>
+							<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+								{step.description}
+							</p>
+						</div>
+					</Reveal>
+				))}
+			</div>
+		</MarketingSection>
+	);
+}
diff --git a/surfsense_web/components/homepage/integrations.tsx b/surfsense_web/components/homepage/integrations.tsx
deleted file mode 100644
index 83fff8604..000000000
--- a/surfsense_web/components/homepage/integrations.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import type React from "react";
-
-interface Integration {
-	name: string;
-	icon: string;
-}
-
-const INTEGRATIONS: Integration[] = [
-	// Search
-	{ name: "Tavily", icon: "/connectors/tavily.svg" },
-	{ name: "Elasticsearch", icon: "/connectors/elasticsearch.svg" },
-	{ name: "Baidu Search", icon: "/connectors/baidu-search.svg" },
-	{ name: "SearXNG", icon: "/connectors/searxng.svg" },
-
-	// Communication
-	{ name: "Slack", icon: "/connectors/slack.svg" },
-	{ name: "Discord", icon: "/connectors/discord.svg" },
-	{ name: "Gmail", icon: "/connectors/google-gmail.svg" },
-	{ name: "Microsoft Teams", icon: "/connectors/microsoft-teams.svg" },
-
-	// Project Management
-	{ name: "Linear", icon: "/connectors/linear.svg" },
-	{ name: "Jira", icon: "/connectors/jira.svg" },
-	{ name: "ClickUp", icon: "/connectors/clickup.svg" },
-	{ name: "Airtable", icon: "/connectors/airtable.svg" },
-
-	// Documentation & Knowledge
-	{ name: "Confluence", icon: "/connectors/confluence.svg" },
-	{ name: "Notion", icon: "/connectors/notion.svg" },
-	{ name: "BookStack", icon: "/connectors/bookstack.svg" },
-	{ name: "Obsidian", icon: "/connectors/obsidian.svg" },
-
-	// Cloud Storage
-	{ name: "Google Drive", icon: "/connectors/google-drive.svg" },
-	{ name: "OneDrive", icon: "/connectors/onedrive.svg" },
-	{ name: "Dropbox", icon: "/connectors/dropbox.svg" },
-
-	// Development
-	{ name: "GitHub", icon: "/connectors/github.svg" },
-
-	// Productivity
-	{ name: "Google Calendar", icon: "/connectors/google-calendar.svg" },
-	{ name: "Luma", icon: "/connectors/luma.svg" },
-
-	// Media
-	{ name: "YouTube", icon: "/connectors/youtube.svg" },
-
-	// Search
-	{ name: "Linkup", icon: "/connectors/linkup.svg" },
-
-	// Meetings
-	{ name: "Circleback", icon: "/connectors/circleback.svg" },
-
-	// AI
-	{ name: "MCP", icon: "/connectors/modelcontextprotocol.svg" },
-];
-
-// 5 vertical columns — 26 icons spread across categories
-const COLUMNS: number[][] = [
-	[2, 5, 10, 0, 21, 11],
-	[1, 7, 20, 17, 24],
-	[13, 6, 23, 4, 16, 25],
-	[12, 8, 15, 18],
-	[3, 9, 14, 22, 19],
-];
-
-// Different scroll speeds per column for organic feel (seconds)
-const SCROLL_DURATIONS = [26, 32, 22, 30, 28];
-
-function IntegrationCard({ integration }: { integration: Integration }) {
-	return (
-		<div
-			className="w-[60px] h-[60px] sm:w-[80px] sm:h-[80px] md:w-[120px] md:h-[120px] lg:w-[140px] lg:h-[140px] rounded-[16px] sm:rounded-[20px] md:rounded-[24px] flex items-center justify-center shrink-0 select-none"
-			style={{
-				background: "linear-gradient(145deg, var(--card-from), var(--card-to))",
-				boxShadow: "inset 0 1px 0 0 var(--card-highlight), 0 4px 24px var(--card-shadow)",
-			}}
-		>
-			<Image
-				src={integration.icon}
-				alt={integration.name}
-				className="w-6 h-6 sm:w-7 sm:h-7 md:w-10 md:h-10 lg:w-12 lg:h-12 object-contain select-none pointer-events-none"
-				loading="lazy"
-				draggable={false}
-				width={48}
-				height={48}
-			/>
-		</div>
-	);
-}
-
-function ScrollingColumn({
-	cards,
-	scrollUp,
-	duration,
-	colIndex,
-	isEdge,
-	isEdgeAdjacent,
-}: {
-	cards: number[];
-	scrollUp: boolean;
-	duration: number;
-	colIndex: number;
-	isEdge: boolean;
-	isEdgeAdjacent: boolean;
-}) {
-	// Edge columns get a heavy vertical mask; edge-adjacent columns get a lighter one to smooth the transition
-	const columnMask = isEdge
-		? {
-				maskImage:
-					"linear-gradient(to bottom, transparent 0%, transparent 20%, black 40%, black 60%, transparent 80%, transparent 100%)",
-				WebkitMaskImage:
-					"linear-gradient(to bottom, transparent 0%, transparent 20%, black 40%, black 60%, transparent 80%, transparent 100%)",
-			}
-		: isEdgeAdjacent
-			? {
-					maskImage:
-						"linear-gradient(to bottom, transparent 0%, transparent 10%, black 30%, black 70%, transparent 90%, transparent 100%)",
-					WebkitMaskImage:
-						"linear-gradient(to bottom, transparent 0%, transparent 10%, black 30%, black 70%, transparent 90%, transparent 100%)",
-				}
-			: {};
-
-	const cardSet = cards.map((integrationIndex, i) => (
-		<IntegrationCard
-			key={`${INTEGRATIONS[integrationIndex].name}-c${colIndex}-${i}`}
-			integration={INTEGRATIONS[integrationIndex]}
-		/>
-	));
-
-	return (
-		<div
-			className="shrink-0 overflow-hidden"
-			style={{ ...columnMask, contain: "layout style paint" }}
-		>
-			{/* Outer div has NO gap — each inner copy uses pb matching the gap so both halves are identical in height → seamless -50% loop */}
-			<div
-				className="flex flex-col"
-				style={{
-					animation: `${scrollUp ? "integrations-scroll-up" : "integrations-scroll-down"} ${duration}s linear infinite`,
-					willChange: "transform",
-					transform: "translateZ(0)",
-				}}
-			>
-				<div className="flex flex-col gap-2 sm:gap-3 md:gap-5 lg:gap-6 pb-2 sm:pb-3 md:pb-5 lg:pb-6">
-					{cardSet}
-				</div>
-				<div className="flex flex-col gap-2 sm:gap-3 md:gap-5 lg:gap-6 pb-2 sm:pb-3 md:pb-5 lg:pb-6">
-					{cardSet}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default function ExternalIntegrations() {
-	return (
-		<section
-			className={[
-				"relative py-20 md:py-28 overflow-hidden",
-				// No explicit background — inherits the page gradient for seamless blending
-				// CSS custom properties — light mode (card styling)
-				"[--card-from:rgba(255,255,255,0.9)]",
-				"[--card-to:rgba(245,245,248,0.92)]",
-				"[--card-highlight:rgba(255,255,255,0.5)]",
-				"[--card-lowlight:transparent]",
-				"[--card-shadow:transparent]",
-				"[--card-border:transparent]",
-				// CSS custom properties — dark mode (card styling)
-				"dark:[--card-from:rgb(28,28,32)]",
-				"dark:[--card-to:rgb(28,28,32)]",
-				"dark:[--card-highlight:rgba(255,255,255,0.03)]",
-				"dark:[--card-lowlight:rgba(0,0,0,0.1)]",
-				"dark:[--card-shadow:rgba(0,0,0,0.15)]",
-				"dark:[--card-border:rgba(255,255,255,0.03)]",
-			].join(" ")}
-		>
-			{/* Heading */}
-			<div className="text-center mb-12 md:mb-16 relative z-20 px-4">
-				<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white leading-[1.1] tracking-tight">
-					Integrate with your
-					<br />
-					team&apos;s most important tools
-				</h2>
-			</div>
-
-			{/* Scrolling columns container — masked at edges so the page background shows through seamlessly */}
-			<div
-				className="relative"
-				style={
-					{
-						maskImage:
-							"linear-gradient(to bottom, transparent 0%, black 25%, black 70%, transparent 100%), " +
-							"linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%)",
-						WebkitMaskImage:
-							"linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%), " +
-							"linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%)",
-						maskComposite: "intersect",
-						WebkitMaskComposite: "source-in",
-					} as React.CSSProperties
-				}
-			>
-				{/* 5 scrolling columns */}
-				<div className="flex justify-center gap-2 sm:gap-3 md:gap-5 lg:gap-6 h-[340px] sm:h-[420px] md:h-[560px] lg:h-[640px] overflow-hidden">
-					{COLUMNS.map((column, colIndex) => (
-						<ScrollingColumn
-							key={`col-${SCROLL_DURATIONS[colIndex]}-${colIndex}`}
-							cards={column}
-							scrollUp={colIndex % 2 === 0}
-							duration={SCROLL_DURATIONS[colIndex]}
-							colIndex={colIndex}
-							isEdge={colIndex === 0 || colIndex === COLUMNS.length - 1}
-							isEdgeAdjacent={colIndex === 1 || colIndex === COLUMNS.length - 2}
-						/>
-					))}
-				</div>
-			</div>
-		</section>
-	);
-}
diff --git a/surfsense_web/components/homepage/navbar.tsx b/surfsense_web/components/homepage/navbar.tsx
index bba76781d..4cce7ff82 100644
--- a/surfsense_web/components/homepage/navbar.tsx
+++ b/surfsense_web/components/homepage/navbar.tsx
@@ -1,8 +1,18 @@
 "use client";
-import { IconBrandDiscord, IconBrandReddit, IconMenu2, IconX } from "@tabler/icons-react";
-import { AnimatePresence, motion } from "motion/react";
+import {
+	IconBook,
+	IconBrandDiscord,
+	IconBrandReddit,
+	IconChevronDown,
+	IconMenu2,
+	IconNews,
+	IconSparkles,
+	IconSpeakerphone,
+	IconX,
+} from "@tabler/icons-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import Link from "next/link";
-import { useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { SignInButton } from "@/components/auth/sign-in-button";
 import { NavbarGitHubStars } from "@/components/homepage/github-stars-badge";
 import { Logo } from "@/components/Logo";
@@ -15,6 +25,38 @@ interface NavItem {
 	link: string;
 }
 
+interface ResourceItem extends NavItem {
+	description: string;
+	icon: typeof IconNews;
+}
+
+const resourceItems: ResourceItem[] = [
+	{
+		name: "Blog",
+		link: "/blog",
+		description: "Guides, comparisons, and deep dives",
+		icon: IconNews,
+	},
+	{
+		name: "Announcements",
+		link: "/announcements",
+		description: "Product news and updates",
+		icon: IconSpeakerphone,
+	},
+	{
+		name: "Changelog",
+		link: "/changelog",
+		description: "What's new in SurfSense",
+		icon: IconSparkles,
+	},
+	{
+		name: "Docs",
+		link: "/docs",
+		description: "Setup, connectors, and API reference",
+		icon: IconBook,
+	},
+];
+
 interface NavbarProps {
 	/** Override the scrolled-state background classes (desktop & mobile). */
 	scrolledBgClassName?: string;
@@ -35,13 +77,11 @@ interface MobileNavProps {
 export const Navbar = ({ scrolledBgClassName }: NavbarProps = {}) => {
 	const [isScrolled, setIsScrolled] = useState(false);
 
-	const navItems = [
-		{ name: "Free\u00A0AI", link: "/free" },
+	const navItems: NavItem[] = [
+		{ name: "Connectors", link: "/connectors" },
 		{ name: "Pricing", link: "/pricing" },
-		{ name: "Blog", link: "/blog" },
-		{ name: "Changelog", link: "/changelog" },
-		{ name: "Docs", link: "/docs" },
 		{ name: "Contact\u00A0Us", link: "/contact" },
+		{ name: "Free\u00A0AI", link: "/free" },
 	];
 
 	useEffect(() => {
@@ -72,6 +112,96 @@ export const Navbar = ({ scrolledBgClassName }: NavbarProps = {}) => {
 	);
 };
 
+const ResourcesDropdown = () => {
+	const [open, setOpen] = useState(false);
+	const shouldReduceMotion = useReducedMotion();
+	const closeTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	const openMenu = () => {
+		if (closeTimeout.current) clearTimeout(closeTimeout.current);
+		setOpen(true);
+	};
+
+	// ponytail: small close delay bridges the pointer gap between trigger and panel
+	const closeMenu = () => {
+		closeTimeout.current = setTimeout(() => setOpen(false), 100);
+	};
+
+	return (
+		// biome-ignore lint/a11y/noStaticElementInteractions: hover intent only; keyboard access lives on the button
+		<div
+			className="relative"
+			onMouseEnter={openMenu}
+			onMouseLeave={closeMenu}
+			onKeyDown={(e) => {
+				if (e.key === "Escape") setOpen(false);
+			}}
+			onBlur={(e) => {
+				if (!e.currentTarget.contains(e.relatedTarget as Node)) setOpen(false);
+			}}
+		>
+			<button
+				type="button"
+				aria-expanded={open}
+				aria-haspopup="menu"
+				onClick={() => setOpen((prev) => !prev)}
+				className={cn(
+					"flex cursor-pointer items-center gap-1 rounded-full px-4 py-2 text-neutral-600 outline-none transition-colors dark:text-neutral-300",
+					open && "bg-gray-100 dark:bg-neutral-800"
+				)}
+			>
+				Resources
+				<IconChevronDown
+					className={cn("h-3.5 w-3.5 transition-transform duration-200", open && "rotate-180")}
+				/>
+			</button>
+			<AnimatePresence>
+				{open && (
+					<div className="absolute left-1/2 top-full -translate-x-1/2 pt-2">
+						<motion.div
+							initial={{
+								opacity: 0,
+								scale: shouldReduceMotion ? 1 : 0.95,
+								y: shouldReduceMotion ? 0 : 6,
+							}}
+							animate={{ opacity: 1, scale: 1, y: 0 }}
+							exit={{
+								opacity: 0,
+								scale: shouldReduceMotion ? 1 : 0.97,
+								y: shouldReduceMotion ? 0 : 4,
+								transition: { duration: 0.12, ease: "easeIn" },
+							}}
+							transition={{ type: "spring", duration: 0.3, bounce: 0.15 }}
+							className="w-72 origin-top overflow-hidden rounded-2xl border border-white/20 bg-white/90 p-2 shadow-2xl backdrop-blur-xl dark:border-neutral-800/50 dark:bg-neutral-950/90"
+						>
+							{resourceItems.map((item) => (
+								<Link
+									key={item.link}
+									href={item.link}
+									onClick={() => setOpen(false)}
+									className="group flex items-start gap-3 rounded-xl px-3 py-2.5 transition-colors hover:bg-gray-100 dark:hover:bg-neutral-800"
+								>
+									<span className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-white text-neutral-500 transition-colors group-hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400 dark:group-hover:text-white">
+										<item.icon className="h-4 w-4" aria-hidden />
+									</span>
+									<span className="flex flex-col">
+										<span className="text-sm font-medium text-neutral-800 dark:text-neutral-100">
+											{item.name}
+										</span>
+										<span className="text-xs text-neutral-500 dark:text-neutral-400">
+											{item.description}
+										</span>
+									</span>
+								</Link>
+							))}
+						</motion.div>
+					</div>
+				)}
+			</AnimatePresence>
+		</div>
+	);
+};
+
 const DesktopNav = ({ navItems, isScrolled, scrolledBgClassName }: DesktopNavProps) => {
 	const [hovered, setHovered] = useState<number | null>(null);
 	return (
@@ -96,21 +226,23 @@ const DesktopNav = ({ navItems, isScrolled, scrolledBgClassName }: DesktopNavPro
 			</Link>
 			<div className="hidden flex-1 flex-row items-center justify-center space-x-2 text-sm font-medium text-zinc-600 transition duration-200 hover:text-zinc-800 lg:flex lg:space-x-2">
 				{navItems.map((navItem: NavItem, idx: number) => (
-					<Link
-						onMouseEnter={() => setHovered(idx)}
-						onMouseLeave={() => setHovered(null)}
-						className="relative px-4 py-2 text-neutral-600 dark:text-neutral-300"
-						key={navItem.link}
-						href={navItem.link}
-					>
-						{hovered === idx && (
-							<motion.div
-								layoutId="hovered"
-								className="absolute inset-0 h-full w-full rounded-full bg-gray-100 dark:bg-neutral-800"
-							/>
-						)}
-						<span className="relative z-20">{navItem.name}</span>
-					</Link>
+					<Fragment key={navItem.link}>
+						<Link
+							onMouseEnter={() => setHovered(idx)}
+							onMouseLeave={() => setHovered(null)}
+							className="relative px-4 py-2 text-neutral-600 dark:text-neutral-300"
+							href={navItem.link}
+						>
+							{hovered === idx && (
+								<motion.div
+									layoutId="hovered"
+									className="absolute inset-0 h-full w-full rounded-full bg-gray-100 dark:bg-neutral-800"
+								/>
+							)}
+							<span className="relative z-20">{navItem.name}</span>
+						</Link>
+						{navItem.link === "/pricing" && <ResourcesDropdown />}
+					</Fragment>
 				))}
 			</div>
 			<div className="flex flex-1 items-center justify-end gap-2">
@@ -206,13 +338,24 @@ const MobileNav = ({ navItems, isScrolled, scrolledBgClassName }: MobileNavProps
 						className="absolute inset-x-0 top-full mt-1 z-20 flex w-full flex-col items-start justify-start gap-4 rounded-xl bg-white/90 backdrop-blur-xl border border-white/20 shadow-2xl px-4 py-6 dark:bg-neutral-950/90 dark:border-neutral-800/50"
 					>
 						{navItems.map((navItem: NavItem) => (
-							<Link
-								key={navItem.link}
-								href={navItem.link}
-								className="relative text-neutral-600 dark:text-neutral-300"
-							>
-								<motion.span className="block">{navItem.name} </motion.span>
-							</Link>
+							<Fragment key={navItem.link}>
+								<Link
+									href={navItem.link}
+									className="relative text-neutral-600 dark:text-neutral-300"
+								>
+									<motion.span className="block">{navItem.name} </motion.span>
+								</Link>
+								{navItem.link === "/pricing" &&
+									resourceItems.map((item) => (
+										<Link
+											key={item.link}
+											href={item.link}
+											className="relative text-neutral-600 dark:text-neutral-300"
+										>
+											<motion.span className="block">{item.name} </motion.span>
+										</Link>
+									))}
+							</Fragment>
 						))}
 						<div className="flex w-full items-center gap-2 pt-2">
 							<Link
diff --git a/surfsense_web/components/homepage/use-case-art.tsx b/surfsense_web/components/homepage/use-case-art.tsx
new file mode 100644
index 000000000..a6acc3ceb
--- /dev/null
+++ b/surfsense_web/components/homepage/use-case-art.tsx
@@ -0,0 +1,301 @@
+"use client";
+
+import { motion, useReducedMotion } from "motion/react";
+
+const EASE_OUT: [number, number, number, number] = [0.16, 1, 0.3, 1];
+const VIEWPORT = { once: true, amount: 0.4 } as const;
+
+export type UseCaseArtVariant = "price" | "brand" | "leads" | "serp";
+
+/** Soft infinite pulse ring marking the "live" signal in each artifact. */
+function Pulse({
+	cx,
+	cy,
+	reduce,
+	delay = 0,
+}: {
+	cx: number;
+	cy: number;
+	reduce: boolean;
+	delay?: number;
+}) {
+	if (reduce) return null;
+	return (
+		<motion.circle
+			cx={cx}
+			cy={cy}
+			r={5}
+			className="fill-brand/40"
+			style={{ transformBox: "fill-box", transformOrigin: "center" }}
+			animate={{ scale: [1, 2.4], opacity: [0.5, 0] }}
+			transition={{ duration: 2, ease: "easeOut", repeat: Infinity, delay }}
+		/>
+	);
+}
+
+/** Competitor price monitoring: a price line steps up; the change point alerts. */
+function PriceArt({ reduce }: { reduce: boolean }) {
+	return (
+		<motion.svg
+			viewBox="0 0 240 96"
+			className="h-auto w-full"
+			initial={reduce ? undefined : "hidden"}
+			whileInView="visible"
+			viewport={VIEWPORT}
+		>
+			{/* Grid */}
+			{[24, 48, 72].map((y) => (
+				<line
+					key={y}
+					x1="12"
+					y1={y}
+					x2="228"
+					y2={y}
+					className="stroke-muted-foreground/15"
+					strokeWidth="1"
+				/>
+			))}
+			{/* Price line with a step change at x=132 */}
+			<motion.path
+				d="M 12 66 L 56 64 L 96 62 L 132 62 L 132 38 L 176 36 L 228 34"
+				fill="none"
+				className="stroke-brand"
+				strokeWidth="2"
+				strokeLinecap="round"
+				variants={{ hidden: { pathLength: 0 }, visible: { pathLength: 1 } }}
+				transition={{ duration: 0.9, ease: EASE_OUT }}
+			/>
+			{/* Alert at the step */}
+			<Pulse cx={132} cy={38} reduce={reduce} delay={0.9} />
+			<motion.circle
+				cx="132"
+				cy="38"
+				r="4"
+				className="fill-brand"
+				variants={{ hidden: { opacity: 0, scale: 0 }, visible: { opacity: 1, scale: 1 } }}
+				style={{ transformBox: "fill-box", transformOrigin: "center" }}
+				transition={{ duration: 0.3, ease: EASE_OUT, delay: 0.7 }}
+			/>
+			{/* Price-change tag */}
+			<motion.g
+				variants={{ hidden: { opacity: 0, y: 6 }, visible: { opacity: 1, y: 0 } }}
+				transition={{ duration: 0.3, ease: EASE_OUT, delay: 0.85 }}
+			>
+				<rect x="146" y="46" width="52" height="18" rx="4" className="fill-brand/10" />
+				<text x="172" y="59" textAnchor="middle" className="fill-brand text-[10px] font-medium">
+					+$10/mo
+				</text>
+			</motion.g>
+		</motion.svg>
+	);
+}
+
+/** Brand monitoring: a listening radar; mentions blip in around the brand. */
+function BrandArt({ reduce }: { reduce: boolean }) {
+	const blips = [
+		{ cx: 84, cy: 30, delay: 0.5 },
+		{ cx: 168, cy: 38, delay: 0.7 },
+		{ cx: 100, cy: 70, delay: 0.9 },
+	];
+	return (
+		<motion.svg
+			viewBox="0 0 240 96"
+			className="h-auto w-full"
+			initial={reduce ? undefined : "hidden"}
+			whileInView="visible"
+			viewport={VIEWPORT}
+		>
+			{/* Radar rings */}
+			{[16, 30, 44].map((r, i) => (
+				<motion.circle
+					key={r}
+					cx="120"
+					cy="48"
+					r={r}
+					fill="none"
+					className="stroke-muted-foreground/20"
+					strokeWidth="1"
+					variants={{ hidden: { opacity: 0, scale: 0.6 }, visible: { opacity: 1, scale: 1 } }}
+					style={{ transformBox: "fill-box", transformOrigin: "center" }}
+					transition={{ duration: 0.45, ease: EASE_OUT, delay: i * 0.12 }}
+				/>
+			))}
+			{/* Brand at the center */}
+			<motion.circle
+				cx="120"
+				cy="48"
+				r="4"
+				className="fill-brand"
+				variants={{ hidden: { opacity: 0, scale: 0 }, visible: { opacity: 1, scale: 1 } }}
+				style={{ transformBox: "fill-box", transformOrigin: "center" }}
+				transition={{ duration: 0.3, ease: EASE_OUT, delay: 0.35 }}
+			/>
+			<Pulse cx={120} cy={48} reduce={reduce} delay={0.6} />
+			{/* Mention blips */}
+			{blips.map((blip) => (
+				<motion.circle
+					key={`${blip.cx}-${blip.cy}`}
+					cx={blip.cx}
+					cy={blip.cy}
+					r="3"
+					className="fill-brand/70"
+					variants={{ hidden: { opacity: 0, scale: 0 }, visible: { opacity: 1, scale: 1 } }}
+					style={{ transformBox: "fill-box", transformOrigin: "center" }}
+					transition={{ duration: 0.3, ease: EASE_OUT, delay: blip.delay }}
+				/>
+			))}
+		</motion.svg>
+	);
+}
+
+/** B2B lead generation: a lead list fills in row by row, each verified. */
+function LeadsArt({ reduce }: { reduce: boolean }) {
+	const rows = [22, 48, 74];
+	return (
+		<motion.svg
+			viewBox="0 0 240 96"
+			className="h-auto w-full"
+			initial={reduce ? undefined : "hidden"}
+			whileInView="visible"
+			viewport={VIEWPORT}
+		>
+			{rows.map((y, i) => (
+				<motion.g
+					key={y}
+					variants={{ hidden: { opacity: 0, x: -10 }, visible: { opacity: 1, x: 0 } }}
+					transition={{ duration: 0.35, ease: EASE_OUT, delay: 0.15 + i * 0.18 }}
+				>
+					{/* Avatar */}
+					<circle cx="24" cy={y} r="7" className="fill-muted-foreground/20" />
+					{/* Name + contact lines */}
+					<rect
+						x="40"
+						y={y - 8}
+						width="92"
+						height="6"
+						rx="3"
+						className="fill-muted-foreground/30"
+					/>
+					<rect
+						x="40"
+						y={y + 3}
+						width="64"
+						height="5"
+						rx="2.5"
+						className="fill-muted-foreground/15"
+					/>
+					{/* Verified check */}
+					<motion.path
+						d={`M 206 ${y - 1} l 4 5 l 8 -10`}
+						fill="none"
+						className="stroke-brand"
+						strokeWidth="2.5"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						variants={{
+							hidden: { pathLength: 0, opacity: 0 },
+							visible: { pathLength: 1, opacity: 1 },
+						}}
+						transition={{ duration: 0.3, ease: EASE_OUT, delay: 0.45 + i * 0.18 }}
+					/>
+				</motion.g>
+			))}
+		</motion.svg>
+	);
+}
+
+/** Market research: SERP rows; your result climbs from #3 to #1. */
+function SerpArt({ reduce }: { reduce: boolean }) {
+	const swapDelay = 0.8;
+	const swapY = { duration: 0.5, ease: EASE_OUT, delay: swapDelay, times: [0, 0.6, 1] };
+	return (
+		<motion.svg
+			viewBox="0 0 240 96"
+			className="h-auto w-full"
+			initial={reduce ? undefined : "hidden"}
+			whileInView="visible"
+			viewport={VIEWPORT}
+		>
+			{/* Competitor rows: start at ranks 1 and 2, shift down one slot */}
+			{[
+				{ startY: 14, width: 148 },
+				{ startY: 40, width: 120 },
+			].map((row, i) => (
+				<motion.g
+					key={row.startY}
+					style={reduce ? { y: 26 } : undefined}
+					variants={
+						reduce
+							? undefined
+							: { hidden: { opacity: 0, y: 0 }, visible: { opacity: 1, y: [0, 0, 26] } }
+					}
+					transition={
+						reduce
+							? undefined
+							: { opacity: { duration: 0.35, ease: EASE_OUT, delay: 0.1 + i * 0.15 }, y: swapY }
+					}
+				>
+					<rect
+						x="34"
+						y={row.startY}
+						width={row.width}
+						height="8"
+						rx="4"
+						className="fill-muted-foreground/25"
+					/>
+					<rect
+						x="34"
+						y={row.startY + 12}
+						width={row.width * 0.6}
+						height="5"
+						rx="2.5"
+						className="fill-muted-foreground/12"
+					/>
+				</motion.g>
+			))}
+			{/* Your row: starts at rank 3, climbs to rank 1 */}
+			<motion.g
+				style={reduce ? { y: -52 } : undefined}
+				variants={
+					reduce
+						? undefined
+						: { hidden: { opacity: 0, y: 0 }, visible: { opacity: 1, y: [0, 0, -52] } }
+				}
+				transition={
+					reduce ? undefined : { opacity: { duration: 0.35, ease: EASE_OUT, delay: 0.4 }, y: swapY }
+				}
+			>
+				<rect x="34" y="66" width="160" height="8" rx="4" className="fill-brand" />
+				<rect x="34" y="78" width="96" height="5" rx="2.5" className="fill-brand/40" />
+				<motion.path
+					d="M 210 78 l 5 -7 l 5 7"
+					fill="none"
+					className="stroke-brand"
+					strokeWidth="2.5"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					variants={reduce ? undefined : { hidden: { opacity: 0 }, visible: { opacity: 1 } }}
+					transition={{ duration: 0.3, ease: EASE_OUT, delay: swapDelay }}
+				/>
+			</motion.g>
+		</motion.svg>
+	);
+}
+
+const ART: Record<UseCaseArtVariant, (props: { reduce: boolean }) => React.ReactNode> = {
+	price: PriceArt,
+	brand: BrandArt,
+	leads: LeadsArt,
+	serp: SerpArt,
+};
+
+/** Small animated artifact rendered at the top of each use-case card. */
+export function UseCaseArt({ variant }: { variant: UseCaseArtVariant }) {
+	const reduce = useReducedMotion() ?? false;
+	const Art = ART[variant];
+	return (
+		<div aria-hidden className="mb-4 rounded-lg border bg-muted/20 px-3 py-2">
+			<Art reduce={reduce} />
+		</div>
+	);
+}
diff --git a/surfsense_web/components/homepage/use-cases.tsx b/surfsense_web/components/homepage/use-cases.tsx
new file mode 100644
index 000000000..44609351d
--- /dev/null
+++ b/surfsense_web/components/homepage/use-cases.tsx
@@ -0,0 +1,79 @@
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+import { Reveal } from "@/components/connectors-marketing/reveal";
+import { UseCaseArt, type UseCaseArtVariant } from "@/components/homepage/use-case-art";
+import { MarketingSection } from "@/components/marketing/section";
+
+/** Buyer language from the high-CPC keyword clusters; each anchors to the connector that fulfills it. */
+const USE_CASES: {
+	title: string;
+	description: string;
+	href: string;
+	anchor: string;
+	art: UseCaseArtVariant;
+}[] = [
+	{
+		title: "Competitor price monitoring",
+		description:
+			"Crawl competitor pricing and product pages on a schedule and get an alert the day something changes, not the quarter after.",
+		href: "/web-crawl",
+		anchor: "Web Crawl API",
+		art: "price",
+	},
+	{
+		title: "Brand monitoring",
+		description:
+			"Track every mention of your brand, your competitors, and your category across the communities where buyers speak candidly.",
+		href: "/reddit",
+		anchor: "Reddit API",
+		art: "brand",
+	},
+	{
+		title: "B2B lead generation",
+		description:
+			"Turn a category and a territory into a clean lead list with phones, websites, and ratings, ready for your CRM.",
+		href: "/google-maps",
+		anchor: "Google Maps API",
+		art: "leads",
+	},
+	{
+		title: "Market research",
+		description:
+			"Watch the rankings, ads, and AI answers your market actually sees, and mine audience sentiment at scale.",
+		href: "/google-search",
+		anchor: "SERP API",
+		art: "serp",
+	},
+];
+
+export function UseCasesRow() {
+	return (
+		<MarketingSection>
+			<Reveal>
+				<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
+					What teams use SurfSense for
+				</h2>
+			</Reveal>
+			<div className="mt-8 grid gap-6 sm:grid-cols-2">
+				{USE_CASES.map((useCase) => (
+					<Reveal key={useCase.title}>
+						<div className="flex h-full flex-col rounded-xl border bg-card p-6">
+							<UseCaseArt variant={useCase.art} />
+							<h3 className="text-lg font-semibold">{useCase.title}</h3>
+							<p className="mt-2 flex-1 text-sm leading-relaxed text-muted-foreground">
+								{useCase.description}
+							</p>
+							<Link
+								href={useCase.href}
+								className="group mt-4 inline-flex items-center gap-1 text-sm font-medium text-foreground"
+							>
+								{useCase.anchor}
+								<ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
+							</Link>
+						</div>
+					</Reveal>
+				))}
+			</div>
+		</MarketingSection>
+	);
+}
diff --git a/surfsense_web/components/homepage/why-surfsense.tsx b/surfsense_web/components/homepage/why-surfsense.tsx
deleted file mode 100644
index 38f19559b..000000000
--- a/surfsense_web/components/homepage/why-surfsense.tsx
+++ /dev/null
@@ -1,426 +0,0 @@
-"use client";
-
-import { IconPointerFilled } from "@tabler/icons-react";
-import { Check, X } from "lucide-react";
-import { motion, useInView } from "motion/react";
-import { useRef, useState } from "react";
-import { Badge } from "@/components/ui/badge";
-import { Separator } from "@/components/ui/separator";
-import { cn } from "@/lib/utils";
-
-const cards = [
-	{
-		title: "Unlimited & Self-Hosted",
-		description:
-			"No caps on sources, notebooks, or file sizes. Deploy on your own infra and your data never leaves your control.",
-		skeleton: <UnlimitedSkeleton />,
-	},
-	{
-		title: "100+ LLMs, Zero Lock-in",
-		description:
-			"Swap between 100+ LLMs via OpenAI spec and LiteLLM, or run fully private with vLLM, Ollama, and more.",
-		skeleton: <LLMFlexibilitySkeleton />,
-	},
-	{
-		title: "Real-Time Multiplayer",
-		description:
-			"RBAC with Owner, Admin, Editor, and Viewer roles plus real-time chat and comment threads. Built for teams.",
-		skeleton: <MultiplayerSkeleton />,
-	},
-];
-
-export function WhySurfSense() {
-	return (
-		<section className="max-w-7xl mx-auto my-10">
-			<div className="mx-auto mb-10 text-center md:mb-16">
-				<p className="mb-3 text-sm font-semibold uppercase tracking-widest text-brand">
-					Why SurfSense
-				</p>
-				<h2 className="text-balance text-3xl font-bold tracking-tight text-foreground sm:text-4xl lg:text-5xl">
-					Everything NotebookLM should have been
-				</h2>
-				<p className="mx-auto mt-4 max-w-2xl text-base text-muted-foreground">
-					Open source. No data limits. No vendor lock-in. Built for teams that care about privacy
-					and flexibility.
-				</p>
-			</div>
-
-			<div className="grid mx-auto max-w-7xl grid-cols-1 divide-x-0 divide-y divide-border overflow-hidden rounded-2xl shadow-sm ring-1 ring-border md:grid-cols-3 md:divide-x md:divide-y-0">
-				{cards.map((card) => (
-					<FeatureCard key={card.title} {...card} />
-				))}
-			</div>
-
-			<ComparisonStrip />
-		</section>
-	);
-}
-
-function UnlimitedSkeleton({ className }: { className?: string }) {
-	const ref = useRef(null);
-	const isInView = useInView(ref, { once: true, margin: "-50px" });
-
-	const items = [
-		{ label: "Sources", notebookLm: "50-600", surfSense: "Unlimited", icon: "📄" },
-		{ label: "Notebooks", notebookLm: "100-500", surfSense: "Unlimited", icon: "📓" },
-		{ label: "File size", notebookLm: "200 MB", surfSense: "No limit", icon: "📦" },
-		{ label: "Self-host", notebookLm: "No", surfSense: "Yes", icon: "🏠" },
-	];
-
-	return (
-		<div ref={ref} className={cn("flex h-full flex-col justify-center gap-2.5", className)}>
-			{items.map((item, index) => (
-				<motion.div
-					key={item.label}
-					initial={{ opacity: 0, x: -16 }}
-					animate={isInView ? { opacity: 1, x: 0 } : {}}
-					transition={{ duration: 0.35, delay: index * 0.15 }}
-					className="flex items-center gap-2 rounded-lg bg-background px-3 py-2 shadow-sm ring-1 ring-border"
-				>
-					<span className="text-sm">{item.icon}</span>
-					<span className="min-w-[60px] text-xs font-medium text-foreground">{item.label}</span>
-					<div className="ml-auto flex items-center gap-2">
-						<span className="text-[10px] text-muted-foreground line-through">
-							{item.notebookLm}
-						</span>
-						<motion.div
-							initial={{ scale: 0.8 }}
-							animate={isInView ? { scale: 1 } : {}}
-							transition={{
-								duration: 0.3,
-								delay: index * 0.15 + 0.2,
-								type: "spring",
-								stiffness: 300,
-							}}
-						>
-							<Badge variant="secondary" className="text-[10px] px-1.5 py-0">
-								{item.surfSense}
-							</Badge>
-						</motion.div>
-					</div>
-				</motion.div>
-			))}
-		</div>
-	);
-}
-
-function LLMFlexibilitySkeleton({ className }: { className?: string }) {
-	const ref = useRef(null);
-	const isInView = useInView(ref, { once: true, margin: "-50px" });
-	const [selected, setSelected] = useState(0);
-
-	const models = [
-		{ name: "GPT-4o", provider: "OpenAI", color: "bg-green-500" },
-		{ name: "Claude 4", provider: "Anthropic", color: "bg-orange-500" },
-		{ name: "Gemini 2.5", provider: "Google", color: "bg-blue-500" },
-		{ name: "Llama 4", provider: "Local", color: "bg-purple-500" },
-		{ name: "DeepSeek R1", provider: "DeepSeek", color: "bg-cyan-500" },
-	];
-
-	return (
-		<div
-			ref={ref}
-			className={cn("flex h-full flex-col items-center justify-center gap-3", className)}
-		>
-			<motion.div
-				initial={{ opacity: 0, y: 8 }}
-				animate={isInView ? { opacity: 1, y: 0 } : {}}
-				transition={{ duration: 0.3 }}
-				className="flex w-full max-w-[180px] flex-col gap-1.5"
-			>
-				{models.map((model, index) => (
-					<motion.button
-						key={model.name}
-						type="button"
-						onClick={() => setSelected(index)}
-						initial={{ opacity: 0, x: 12 }}
-						animate={isInView ? { opacity: 1, x: 0 } : {}}
-						transition={{ duration: 0.3, delay: 0.1 + index * 0.1 }}
-						className={cn(
-							"flex w-full cursor-pointer items-center gap-2 rounded-lg px-2.5 py-1.5 text-left transition-all",
-							selected === index ? "bg-background shadow-sm ring-1 ring-border" : "hover:bg-accent"
-						)}
-					>
-						<div className={cn("size-2 shrink-0 rounded-full", model.color)} />
-						<div className="min-w-0">
-							<p className="truncate text-xs font-medium text-foreground">{model.name}</p>
-							<p className="text-[10px] text-muted-foreground">{model.provider}</p>
-						</div>
-						{selected === index && (
-							<motion.div
-								layoutId="model-check"
-								className="ml-auto"
-								transition={{ type: "spring", stiffness: 400, damping: 25 }}
-							>
-								<Check className="size-3 text-brand" />
-							</motion.div>
-						)}
-					</motion.button>
-				))}
-			</motion.div>
-		</div>
-	);
-}
-
-function MultiplayerSkeleton({ className }: { className?: string }) {
-	const ref = useRef(null);
-	const isInView = useInView(ref, { once: true, margin: "-50px" });
-
-	const collaborators = [
-		{
-			id: 1,
-			name: "Alice",
-			role: "Editor",
-			color: "#3b82f6",
-			path: [
-				{ x: 15, y: 10 },
-				{ x: 80, y: 40 },
-				{ x: 40, y: 80 },
-				{ x: 15, y: 10 },
-			],
-		},
-		{
-			id: 2,
-			name: "Bob",
-			role: "Viewer",
-			color: "#10b981",
-			path: [
-				{ x: 115, y: 70 },
-				{ x: 55, y: 20 },
-				{ x: 95, y: 50 },
-				{ x: 115, y: 70 },
-			],
-		},
-	];
-
-	const codeLines = [
-		{ indent: 0, width: "60%", color: "bg-chart-4/60" },
-		{ indent: 1, width: "75%", color: "bg-muted-foreground/20" },
-		{ indent: 1, width: "50%", color: "bg-chart-1/60" },
-		{ indent: 2, width: "80%", color: "bg-muted-foreground/20" },
-		{ indent: 2, width: "45%", color: "bg-chart-2/60" },
-		{ indent: 1, width: "30%", color: "bg-muted-foreground/20" },
-		{ indent: 0, width: "20%", color: "bg-chart-4/60" },
-	];
-
-	return (
-		<div
-			ref={ref}
-			className={cn("relative flex h-full items-center justify-center overflow-visible", className)}
-		>
-			<motion.div
-				className="relative w-full max-w-[160px] rounded-lg bg-background p-3 shadow-sm ring-1 ring-border"
-				initial={{ opacity: 0, y: 10 }}
-				animate={isInView ? { opacity: 1, y: 0 } : {}}
-				transition={{ duration: 0.4 }}
-			>
-				<div className="mb-2 flex items-center gap-1.5">
-					<div className="flex gap-1">
-						<div className="size-1.5 rounded-full bg-red-400" />
-						<div className="size-1.5 rounded-full bg-yellow-400" />
-						<div className="size-1.5 rounded-full bg-green-400" />
-					</div>
-					<div className="ml-2 h-1.5 w-12 rounded-full bg-muted" />
-				</div>
-
-				{codeLines.map((line, index) => (
-					<div
-						key={index}
-						className="my-1.5 flex items-center"
-						style={{ paddingLeft: line.indent * 8 }}
-					>
-						<div className={cn("h-1.5 rounded-full", line.color)} style={{ width: line.width }} />
-					</div>
-				))}
-			</motion.div>
-
-			{collaborators.map((collaborator, index) => (
-				<motion.div
-					key={collaborator.id}
-					className="absolute"
-					initial={{ opacity: 0 }}
-					animate={
-						isInView
-							? {
-									opacity: 1,
-									x: collaborator.path.map((p) => p.x),
-									y: collaborator.path.map((p) => p.y),
-								}
-							: {}
-					}
-					transition={{
-						opacity: { duration: 0.3, delay: 0.5 + index * 0.2 },
-						x: {
-							duration: 6,
-							delay: 0.5 + index * 0.3,
-							repeat: Infinity,
-							ease: "easeInOut",
-						},
-						y: {
-							duration: 6,
-							delay: 0.5 + index * 0.3,
-							repeat: Infinity,
-							ease: "easeInOut",
-						},
-					}}
-				>
-					<IconPointerFilled
-						className="size-5 drop-shadow-sm"
-						style={{ color: collaborator.color }}
-					/>
-					<div
-						className="absolute top-5 left-3 z-50 flex w-max items-center gap-1.5 rounded-full py-1 pr-2.5 pl-1 shadow-sm"
-						style={{ backgroundColor: collaborator.color }}
-					>
-						<div className="flex size-5 items-center justify-center rounded-full bg-white/20 text-[9px] font-bold text-white">
-							{collaborator.name[0]}
-						</div>
-						<span className="shrink-0 text-[10px] font-medium text-white">{collaborator.name}</span>
-						<span className="rounded bg-white/20 px-1 py-px text-[8px] text-white/80">
-							{collaborator.role}
-						</span>
-					</div>
-				</motion.div>
-			))}
-		</div>
-	);
-}
-
-function FeatureCard({
-	title,
-	description,
-	skeleton,
-}: {
-	title: string;
-	description: string;
-	skeleton: React.ReactNode;
-}) {
-	return (
-		<div className="flex h-full flex-col justify-between bg-card p-10 first:rounded-l-2xl last:rounded-r-2xl">
-			<div className="h-60 w-full overflow-visible rounded-md">{skeleton}</div>
-			<div className="mt-4">
-				<h3 className="text-base font-bold tracking-tight text-card-foreground">{title}</h3>
-				<p className="mt-2 text-sm leading-relaxed tracking-tight text-muted-foreground">
-					{description}
-				</p>
-			</div>
-		</div>
-	);
-}
-
-const comparisonRows: {
-	feature: string;
-	notebookLm: string | boolean;
-	surfSense: string | boolean;
-}[] = [
-	{
-		feature: "Sources per Notebook",
-		notebookLm: "50-600",
-		surfSense: "Unlimited",
-	},
-	{
-		feature: "LLM Support",
-		notebookLm: "Gemini only",
-		surfSense: "100+ LLMs",
-	},
-	{
-		feature: "Self-Hostable",
-		notebookLm: false,
-		surfSense: true,
-	},
-	{
-		feature: "Open Source",
-		notebookLm: false,
-		surfSense: true,
-	},
-	{
-		feature: "External Connectors",
-		notebookLm: "Limited",
-		surfSense: "27+",
-	},
-	{
-		feature: "Desktop App",
-		notebookLm: false,
-		surfSense: true,
-	},
-	{
-		feature: "Agentic Architecture",
-		notebookLm: false,
-		surfSense: true,
-	},
-	{
-		feature: "AI Automations & Agents",
-		notebookLm: false,
-		surfSense: "Scheduled & event-triggered",
-	},
-	{
-		feature: "AI File Sorting",
-		notebookLm: false,
-		surfSense: true,
-	},
-];
-
-function ComparisonStrip() {
-	const ref = useRef(null);
-	const isInView = useInView(ref, { once: true, margin: "-80px" });
-
-	return (
-		<motion.div
-			ref={ref}
-			initial={{ opacity: 0, y: 20 }}
-			animate={isInView ? { opacity: 1, y: 0 } : {}}
-			transition={{ duration: 0.5, delay: 0.1 }}
-			className="mx-auto mt-12 max-w-7xl overflow-hidden rounded-2xl bg-card shadow-sm ring-1 ring-border"
-		>
-			<div className="grid grid-cols-3 px-4 py-3 sm:px-6">
-				<span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-					Feature
-				</span>
-				<span className="text-center text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-					NotebookLM
-				</span>
-				<span className="text-center text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-					SurfSense
-				</span>
-			</div>
-
-			<Separator />
-
-			{comparisonRows.map((row, index) => (
-				<motion.div
-					key={row.feature}
-					initial={{ opacity: 0, x: -10 }}
-					animate={isInView ? { opacity: 1, x: 0 } : {}}
-					transition={{ duration: 0.3, delay: 0.15 + index * 0.06 }}
-				>
-					<div className="grid grid-cols-3 items-center px-4 py-2.5 text-sm sm:px-6">
-						<span className="font-medium text-card-foreground">{row.feature}</span>
-						<span className="flex justify-center">
-							{typeof row.notebookLm === "boolean" ? (
-								row.notebookLm ? (
-									<Check className="size-4 text-brand" />
-								) : (
-									<X className="size-4 text-muted-foreground/40" />
-								)
-							) : (
-								<span className="text-muted-foreground">{row.notebookLm}</span>
-							)}
-						</span>
-						<span className="flex justify-center">
-							{typeof row.surfSense === "boolean" ? (
-								row.surfSense ? (
-									<Check className="size-4 text-brand" />
-								) : (
-									<X className="size-4 text-muted-foreground/40" />
-								)
-							) : (
-								<Badge variant="secondary">{row.surfSense}</Badge>
-							)}
-						</span>
-					</div>
-					{index !== comparisonRows.length - 1 && <Separator />}
-				</motion.div>
-			))}
-		</motion.div>
-	);
-}
diff --git a/surfsense_web/components/marketing/section.tsx b/surfsense_web/components/marketing/section.tsx
new file mode 100644
index 000000000..b64a69342
--- /dev/null
+++ b/surfsense_web/components/marketing/section.tsx
@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Shared marketing-page section container. Mirrors the navbar/hero grid exactly
+ * (max-w-7xl with px-2 md:px-8 xl:px-0 gutters) so every section edge aligns
+ * across the homepage, connector pages, and the connectors hub.
+ */
+export function MarketingSection({
+	children,
+	className,
+}: {
+	children: ReactNode;
+	className?: string;
+}) {
+	return (
+		<section className={cn("py-12 sm:py-16", className)}>
+			<div className="mx-auto w-full max-w-7xl px-2 md:px-8 xl:px-0">{children}</div>
+		</section>
+	);
+}
diff --git a/surfsense_web/components/seo/json-ld.tsx b/surfsense_web/components/seo/json-ld.tsx
index abfb49f0a..632240fc5 100644
--- a/surfsense_web/components/seo/json-ld.tsx
+++ b/surfsense_web/components/seo/json-ld.tsx
@@ -19,8 +19,8 @@ export function OrganizationJsonLd() {
 				url: "https://www.surfsense.com",
 				logo: "https://www.surfsense.com/logo.png",
 				description:
-					"Open source NotebookLM alternative for teams with no data limits. Use ChatGPT, Claude AI, and any AI model for free.",
-				sameAs: ["https://github.com/MODSetter/SurfSense", "https://discord.gg/Cg2M4GUJ"],
+					"SurfSense is an open-source competitive intelligence platform. AI agents monitor competitors, track rankings, and listen to your market through one API or MCP server.",
+				sameAs: ["https://github.com/MODSetter/SurfSense", "https://discord.gg/ejRNvftDp9"],
 				contactPoint: {
 					"@type": "ContactPoint",
 					email: "rohan@surfsense.com",
@@ -40,7 +40,7 @@ export function WebSiteJsonLd() {
 				name: "SurfSense",
 				url: "https://www.surfsense.com",
 				description:
-					"Open source NotebookLM alternative for teams with no data limits. Free ChatGPT, Claude AI, and any AI model.",
+					"SurfSense is an open-source competitive intelligence platform for AI agents, with live data connectors served through one API or MCP server.",
 				potentialAction: {
 					"@type": "SearchAction",
 					target: {
@@ -70,23 +70,21 @@ export function SoftwareApplicationJsonLd() {
 					description: "Free plan with 500 pages included",
 				},
 				description:
-					"Open source NotebookLM alternative with free access to ChatGPT, Claude AI, and any model. Connect Slack, Google Drive, Notion, Confluence, GitHub, and dozens more data sources.",
+					"SurfSense is an open-source competitive intelligence platform. AI agents monitor competitors, track rankings, and listen to your market with platform-native connectors for Reddit, YouTube, Google Maps, Google Search, and the open web, through one API or MCP server.",
 				url: "https://www.surfsense.com",
 				downloadUrl: "https://github.com/MODSetter/SurfSense/releases",
 				featureList: [
-					"Free access to ChatGPT, Claude AI, and any AI model",
-					"AI-powered semantic search across all connected tools",
-					"Federated search across Slack, Google Drive, Notion, Confluence, GitHub",
+					"Platform-native connectors: Reddit, YouTube, Google Maps, Google Search, Web Crawl",
+					"MCP server that exposes every connector as a native agent tool",
+					"Agent harness with retries, structured output, and credit metering",
+					"Competitor, brand, and rank monitoring with briefs and alerts",
 					"AI automations and agents (scheduled and event-triggered workflows)",
-					"Connector write-back to Notion, Slack, Linear, Jira",
-					"Native desktop app with Quick, General, and Screenshot Assist",
-					"No data limits with open source self-hosting",
+					"AI-powered semantic search across connected tools and documents",
+					"Federated search across Slack, Google Drive, Notion, Confluence, GitHub",
+					"Document Q&A with citations, report, podcast, and video generation",
 					"Real-time collaborative team chats",
-					"Document Q&A with citations",
-					"Report generation",
-					"Podcast and video generation from sources",
-					"Enterprise knowledge management",
-					"Self-hostable and privacy-focused",
+					"Native desktop app with Quick, General, and Screenshot Assist",
+					"Open source and self-hostable with no data limits",
 				],
 			}}
 		/>
diff --git a/surfsense_web/components/tool-ui/automation/create-automation.tsx b/surfsense_web/components/tool-ui/automation/create-automation.tsx
index 8775b275b..92607beed 100644
--- a/surfsense_web/components/tool-ui/automation/create-automation.tsx
+++ b/surfsense_web/components/tool-ui/automation/create-automation.tsx
@@ -8,7 +8,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
 	AutomationModelFields,
 	type AutomationModelSelection,
-} from "@/app/dashboard/[search_space_id]/automations/components/builder/automation-model-fields";
+} from "@/app/dashboard/[workspace_id]/automations/components/builder/automation-model-fields";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
 import { JsonView } from "@/components/json-view";
 import { TextShimmerLoader } from "@/components/prompt-kit/loader";
diff --git a/surfsense_web/lib/connectors-marketing/google-maps.tsx b/surfsense_web/lib/connectors-marketing/google-maps.tsx
new file mode 100644
index 000000000..026733bc3
--- /dev/null
+++ b/surfsense_web/lib/connectors-marketing/google-maps.tsx
@@ -0,0 +1,182 @@
+import { IconMapPin } from "@tabler/icons-react";
+import type { ConnectorPageContent } from "./types";
+
+export const googleMaps: ConnectorPageContent = {
+	slug: "google-maps",
+	name: "Google Maps",
+	icon: IconMapPin,
+
+	metaTitle: "Google Maps Scraper API for Lead Generation | SurfSense",
+	metaDescription:
+		"Turn Google Maps into a B2B lead engine with the SurfSense Google Maps Scraper API. Extract business data, ratings, and reviews at scale for your AI agents. Start now.",
+	keywords: [
+		"google maps scraper",
+		"google maps scraper api",
+		"google maps data extraction",
+		"google maps lead generation",
+		"google maps lead scraper",
+		"businesses without websites",
+		"google maps reviews api",
+		"local business data api",
+		"google maps scraper python",
+	],
+
+	h1: "Google Maps API for Lead Generation and Local Market Intelligence",
+	heroLede:
+		"The SurfSense Google Maps API turns Maps into a B2B lead engine. Extract business names, categories, phones, websites, ratings, and reviews at scale, then point your AI agents at any territory or category to build lead lists and map a local market in minutes.",
+
+	transcript: {
+		prompt: "Find every dentist in Austin without a website",
+		toolCall:
+			'google_maps.scrape({ search_queries: ["dentist"], location: "Austin, TX",\n  max_places: 100, include_details: true })',
+		rows: [
+			{
+				primary: "Barton Springs Family Dental",
+				secondary: "4.9 ★ · 212 reviews · (512) 555-0148",
+				tag: "no website",
+			},
+			{
+				primary: "Congress Ave Dentistry",
+				secondary: "4.7 ★ · 88 reviews · (512) 555-0192",
+				tag: "no website",
+			},
+			{
+				primary: "East Austin Smiles",
+				secondary: "4.8 ★ · 141 reviews · (512) 555-0175",
+				tag: "no website",
+			},
+		],
+		resultSummary: "100 places · 23 without a website · surfaced in 4.0s",
+	},
+
+	extractIntro:
+		"Give the API a search query plus a location, a Maps URL, or a known place ID. It returns one structured item per place, with reviews and images attached on request.",
+	extractFields: [
+		{
+			label: "Business identity",
+			description: "Name, category, description, and Google place ID for every result.",
+		},
+		{
+			label: "Contact",
+			description: "Phone number and website when Google lists them, ready for outreach lists.",
+		},
+		{
+			label: "Address and geo",
+			description: "Full address, neighborhood, city, postal code, and latitude/longitude.",
+		},
+		{
+			label: "Ratings",
+			description: "Star rating, review count, and the full one-to-five-star distribution.",
+		},
+		{
+			label: "Reviews",
+			description: "Attach up to the review count you set per place, with text, stars, and author.",
+		},
+		{
+			label: "Details",
+			description: "Opening hours, popular times, and images when you enable detail pages.",
+		},
+	],
+
+	useCasesHeading: "What teams do with the Google Maps API",
+	useCases: [
+		{
+			title: "B2B lead lists",
+			description:
+				"Point an agent at a category and a territory and get back a clean list of businesses with phone numbers, ratings, and websites, ready to load into your CRM or outreach tool.",
+		},
+		{
+			title: "Businesses without websites",
+			description:
+				"Filter results down to places Google lists with no website, the classic warm lead for agencies and web shops. It is the highest-converting local lead-gen angle there is.",
+		},
+		{
+			title: "Competitor and review analysis",
+			description:
+				"Pull a competitor's rating, review count, and review text to see exactly what their customers praise and complain about, then brief an agent to summarize the gaps you can win on.",
+		},
+		{
+			title: "Territory and market mapping",
+			description:
+				"Scrape an entire category across a city or region to size a market, spot white space, and plan coverage before your sales team ever picks up the phone.",
+		},
+	],
+
+	comparison: {
+		heading: "A Google Maps API alternative for lead gen",
+		intro:
+			"Google's official Places API is metered per call and returns only a handful of reviews. Here is how SurfSense compares for lead generation and market research.",
+		columnLabel: "Official Places API",
+		rows: [
+			{
+				feature: "Results per query",
+				official: "Paginated and capped; bulk pulls are painful",
+				surfsense: "Up to 1,000 places per search query",
+			},
+			{
+				feature: "Reviews",
+				official: "Only about five reviews per place",
+				surfsense: "Attach up to the review count you set, or use the reviews verb for depth",
+			},
+			{
+				feature: "Pricing",
+				official: "Metered per API call, per field mask",
+				surfsense: "Pay per place returned, with a free tier to start",
+			},
+			{
+				feature: "Setup",
+				official: "Google Cloud project, billing, and API key",
+				surfsense: "One API key, or add the MCP server to your agent",
+			},
+			{
+				feature: "Agent-ready",
+				official: "No; you build the harness yourself",
+				surfsense: "MCP server exposes google_maps.scrape as a native tool",
+			},
+		],
+	},
+
+	api: {
+		platform: "google_maps",
+		verb: "scrape",
+		mcpTool: "google_maps.scrape",
+		requestBody: {
+			search_queries: ["dentist"],
+			location: "Austin, TX",
+			max_places: 100,
+			include_details: true,
+		},
+	},
+
+	faq: [
+		{
+			question: "Is scraping Google Maps legal?",
+			answer:
+				"SurfSense reads only public Google Maps listings, the business data any visitor can see. It collects no private data and cannot access anything behind a login. Review Google's terms and your own compliance needs, especially around personal data in reviews, before running at scale.",
+		},
+		{
+			question: "How many results can I get per search?",
+			answer:
+				"Up to 1,000 places per search query, and you can send up to 20 queries, URLs, or place IDs in a single call. Pair a query like 'dentist' with a location such as 'Austin, TX' to scope the search to one market.",
+		},
+		{
+			question: "Does it include reviews and contact details?",
+			answer:
+				"Yes. Every place includes its phone number and website when Google lists them, plus address and coordinates. Set max_reviews to attach review text and stars per place, or use the dedicated reviews verb when you need deep review history for one location.",
+		},
+		{
+			question: "How is this different from the official Places API?",
+			answer:
+				"The Places API is metered per call and returns only about five reviews per place. SurfSense returns up to 1,000 places per query with deeper reviews, no Cloud project to set up, and an MCP server so your agents can call it as a native tool.",
+		},
+	],
+
+	related: [
+		{ label: "Reddit API", href: "/reddit" },
+		{ label: "YouTube API", href: "/youtube" },
+		{ label: "SERP API", href: "/google-search" },
+		{ label: "Web Crawl API", href: "/web-crawl" },
+		{ label: "MCP Connector", href: "/mcp-connector" },
+		{ label: "Read the docs", href: "/docs" },
+	],
+};
diff --git a/surfsense_web/lib/connectors-marketing/google-search.tsx b/surfsense_web/lib/connectors-marketing/google-search.tsx
new file mode 100644
index 000000000..94253a032
--- /dev/null
+++ b/surfsense_web/lib/connectors-marketing/google-search.tsx
@@ -0,0 +1,189 @@
+import { IconBrandGoogle } from "@tabler/icons-react";
+import type { ConnectorPageContent } from "./types";
+
+export const googleSearch: ConnectorPageContent = {
+	slug: "google-search",
+	name: "Google Search",
+	cardTitle: "SERP API",
+	icon: IconBrandGoogle,
+
+	metaTitle: "SERP API for Rank Tracking and Competitor Intel | SurfSense",
+	metaDescription:
+		"Track rankings, competitor ads, and Google AI Overviews with the SurfSense SERP API. Scrape Google Search results as structured JSON via API or MCP. Start free.",
+	keywords: [
+		"serp api",
+		"serp api alternative",
+		"cheap serp api",
+		"scrape google search results",
+		"google search scraper",
+		"google search api",
+		"rank tracking api",
+		"serp scraper api",
+		"ai overview monitoring",
+		"serp api python",
+		"competitor rank tracking",
+		"serp analysis",
+	],
+
+	h1: "SERP API for Rank Tracking and Competitor SERP Intelligence",
+	heroLede:
+		"The SurfSense SERP API scrapes Google Search results as structured JSON: organic rankings, paid ads, AI Overviews, and People Also Ask. Point your AI agents at the queries that matter to your market and know the moment a rank moves, an ad appears, or an AI answer starts citing a competitor.",
+
+	transcript: {
+		prompt: "Track who's ranking and running ads for 'competitor pricing' in the US",
+		toolCall:
+			'google_search.scrape({ queries: ["competitor pricing"], country_code: "us",\n  max_pages_per_query: 2 })',
+		rows: [
+			{
+				primary: "competitor.com — #3 organic, up from #7",
+				secondary: "google.com/search · desktop · US",
+				tag: "+4 spots",
+			},
+			{
+				primary: "AI Overview cites competitor.com and 2 others",
+				secondary: "AI Overview · 3 sources",
+				tag: "GEO risk",
+			},
+			{
+				primary: "rival.com is running a paid ad at position 1",
+				secondary: "paid result · sitelinks · US",
+				tag: "new ad",
+			},
+		],
+		resultSummary: "20 organic · 3 ads · 1 AI Overview · surfaced in 2.4s",
+	},
+
+	extractIntro:
+		"Give the API a list of search terms or full Google URLs and a country. It returns one structured item per SERP page, with every block Google renders parsed into its own array.",
+	extractFields: [
+		{
+			label: "Organic results",
+			description:
+				"Title, URL, displayed URL, description, date, and rank position for every listing.",
+		},
+		{
+			label: "Paid ads",
+			description:
+				"Sponsored results and shopping ads with title, URL, sitelinks, prices, and ad position.",
+		},
+		{
+			label: "AI Overviews",
+			description:
+				"The AI Overview answer text and the exact pages Google cites, for GEO and AI-visibility tracking.",
+		},
+		{
+			label: "People Also Ask",
+			description: "The related questions and answers Google expands beneath the results.",
+		},
+		{
+			label: "Related searches",
+			description:
+				"Suggested and related queries, to map how your market actually phrases its search.",
+		},
+		{
+			label: "SERP metadata",
+			description:
+				"Total result count, device, page number, and the country and language of each result.",
+		},
+	],
+
+	useCasesHeading: "What teams do with the SERP API",
+	useCases: [
+		{
+			title: "Rank tracking at agent speed",
+			description:
+				"Track your rankings and your competitors' across the queries and countries you care about. Feed the positions to an agent that diffs each run and pings you the moment something moves.",
+		},
+		{
+			title: "Competitor ad monitoring",
+			description:
+				"See who is bidding on your keywords, what their ad copy and sitelinks say, and where they sit on the page. Watch a rival's paid strategy without a single manual search.",
+		},
+		{
+			title: "AI Overview and GEO monitoring",
+			description:
+				"Capture whether an AI Overview appears for a query and exactly which sources it cites. It is the cleanest way to measure your visibility in AI search, a signal almost nobody is tracking yet.",
+		},
+		{
+			title: "SERP and keyword research",
+			description:
+				"Pull People Also Ask and related queries at scale to see the questions and phrasings behind a topic, then brief an agent to turn them into a content plan.",
+		},
+	],
+
+	comparison: {
+		heading: "A SERP API alternative built for agents",
+		intro:
+			"Most SERP APIs bill per search, gate AI Overviews behind add-ons, and leave the rank-tracking logic to you. Here is how SurfSense compares.",
+		columnLabel: "Typical SERP API",
+		rows: [
+			{
+				feature: "Pricing",
+				official: "Per-search pricing that climbs fast at scale",
+				surfsense: "Pay per SERP page returned, with a free tier to start",
+			},
+			{
+				feature: "AI Overviews",
+				official: "Often a paid add-on, or not supported at all",
+				surfsense: "Parsed inline with the answer text and the sources it cites",
+			},
+			{
+				feature: "Rank tracking",
+				official: "You build the diffing and alerting yourself",
+				surfsense: "Structured positions your agent can diff and alert on",
+			},
+			{
+				feature: "Setup",
+				official: "A new vendor account and key management",
+				surfsense: "One API key, or add the MCP server to your agent",
+			},
+			{
+				feature: "Agent-ready",
+				official: "No; you wire the harness yourself",
+				surfsense: "MCP server exposes google_search.scrape as a native tool",
+			},
+		],
+	},
+
+	api: {
+		platform: "google_search",
+		verb: "scrape",
+		mcpTool: "google_search.scrape",
+		requestBody: {
+			queries: ["competitor pricing"],
+			country_code: "us",
+			max_pages_per_query: 2,
+		},
+	},
+
+	faq: [
+		{
+			question: "What is a SERP API?",
+			answer:
+				"A SERP API returns the contents of a search engine results page as structured data instead of raw HTML. The SurfSense SERP API scrapes Google Search and gives you organic results, ads, AI Overviews, and People Also Ask as clean JSON your agents can read.",
+		},
+		{
+			question: "Can I track keyword rankings with it?",
+			answer:
+				"Yes. Each organic result includes its rank position, and every item is stamped with the query, country, and language it came from. Run the same queries on a schedule and diff the positions to build rank tracking, without maintaining scrapers or proxies.",
+		},
+		{
+			question: "Does it capture Google AI Overviews?",
+			answer:
+				"It does. When an AI Overview appears for a query, the response includes its answer text and the list of pages Google cites as sources. That makes it straightforward to monitor whether AI search is surfacing you or your competitors.",
+		},
+		{
+			question: "How is this different from SerpApi or the Google Search API?",
+			answer:
+				"You get one API key instead of a new vendor relationship, AI Overviews parsed inline rather than as a paid add-on, and an MCP server so your agents can call google_search.scrape as a native tool. Pricing is per SERP page returned, with a free tier.",
+		},
+	],
+
+	related: [
+		{ label: "Web Crawl API", href: "/web-crawl" },
+		{ label: "Google Maps API", href: "/google-maps" },
+		{ label: "Reddit API", href: "/reddit" },
+		{ label: "MCP Connector", href: "/mcp-connector" },
+		{ label: "Read the docs", href: "/docs" },
+	],
+};
diff --git a/surfsense_web/lib/connectors-marketing/index.ts b/surfsense_web/lib/connectors-marketing/index.ts
new file mode 100644
index 000000000..901670f8a
--- /dev/null
+++ b/surfsense_web/lib/connectors-marketing/index.ts
@@ -0,0 +1,33 @@
+import { googleMaps } from "./google-maps";
+import { googleSearch } from "./google-search";
+import { reddit } from "./reddit";
+import type { ConnectorPageContent } from "./types";
+import { webCrawl } from "./web-crawl";
+import { youtube } from "./youtube";
+
+export type { ConnectorPageContent } from "./types";
+
+/** Registry order controls sitemap and cross-link ordering. */
+const CONNECTOR_LIST: ConnectorPageContent[] = [
+	reddit,
+	youtube,
+	googleMaps,
+	googleSearch,
+	webCrawl,
+];
+
+const CONNECTORS_BY_SLUG: Record<string, ConnectorPageContent> = Object.fromEntries(
+	CONNECTOR_LIST.map((c) => [c.slug, c])
+);
+
+export function getConnector(slug: string): ConnectorPageContent | undefined {
+	return CONNECTORS_BY_SLUG[slug];
+}
+
+export function getAllConnectors(): ConnectorPageContent[] {
+	return CONNECTOR_LIST;
+}
+
+export function getAllConnectorSlugs(): string[] {
+	return CONNECTOR_LIST.map((c) => c.slug);
+}
diff --git a/surfsense_web/lib/connectors-marketing/reddit.tsx b/surfsense_web/lib/connectors-marketing/reddit.tsx
new file mode 100644
index 000000000..eddaec3c9
--- /dev/null
+++ b/surfsense_web/lib/connectors-marketing/reddit.tsx
@@ -0,0 +1,187 @@
+import { IconBrandReddit } from "@tabler/icons-react";
+import type { ConnectorPageContent } from "./types";
+
+export const reddit: ConnectorPageContent = {
+	slug: "reddit",
+	name: "Reddit",
+	icon: IconBrandReddit,
+
+	metaTitle: "Reddit Scraper API for Brand Monitoring | SurfSense",
+	metaDescription:
+		"Track every brand and competitor mention across Reddit with the SurfSense Reddit Scraper API. No official API rate limits or pricing, plus a free tier. Start now.",
+	keywords: [
+		"reddit scraper",
+		"reddit scraper api",
+		"reddit api",
+		"reddit api alternative",
+		"scrape reddit",
+		"reddit data api",
+		"reddit comment scraper",
+		"reddit monitoring tool",
+		"reddit sentiment analysis",
+		"reddit mcp",
+		"social listening",
+		"brand monitoring tool",
+	],
+
+	h1: "Reddit API for Brand Monitoring and Market Research",
+	heroLede:
+		"The SurfSense Reddit API extracts posts, comments, subreddits, and user data without the official Reddit API's rate limits or per-call pricing. Give your AI agents a live feed of what your market says about your brand, your competitors, and your category, so you hear it first.",
+
+	transcript: {
+		prompt: "See what r/webscraping is saying about our competitor this week",
+		toolCall:
+			'reddit.scrape({ search_queries: ["competitor"], community: "webscraping",\n  sort: "top", time_filter: "week", max_comments: 50 })',
+		rows: [
+			{
+				primary: "Switched off Competitor after the API price hike",
+				secondary: "r/webscraping · 312 upvotes · 0.94 ratio",
+				tag: "pricing pain",
+			},
+			{
+				primary: "Anyone got a Competitor alternative that does comments?",
+				secondary: "r/webscraping · 148 upvotes · 61 comments",
+				tag: "buying intent",
+			},
+			{
+				primary: "Competitor keeps rate-limiting my agent, help",
+				secondary: "r/webscraping · 89 upvotes · 44 comments",
+				tag: "churn signal",
+			},
+		],
+		resultSummary: "37 posts · 1,204 comments · surfaced in 2.1s",
+	},
+
+	extractIntro:
+		"Every call returns structured items keyed by type: posts, comments, communities, and users. Point the API at a subreddit, a search query, a post, or a user profile.",
+	extractFields: [
+		{
+			label: "Posts",
+			description: "Title, body text, upvotes, upvote ratio, comment count, flair, and permalink.",
+		},
+		{
+			label: "Comments",
+			description: "Full comment trees with body, vote counts, reply counts, and parent threading.",
+		},
+		{
+			label: "Communities",
+			description: "Subreddit name, member count, and listing metadata for any /r/ community.",
+		},
+		{
+			label: "Users",
+			description: "Public profile and authored posts or comments for any /user/ handle.",
+		},
+		{
+			label: "Media",
+			description: "Image and video URLs, thumbnails, and NSFW flags attached to each post.",
+		},
+		{
+			label: "Timestamps",
+			description:
+				"Created and scraped times, with date limits for incremental, delta-only scrapes.",
+		},
+	],
+
+	useCasesHeading: "What teams do with the Reddit API",
+	useCases: [
+		{
+			title: "Brand and competitor monitoring",
+			description:
+				"Track every mention of your brand, your competitors, and your category across Reddit. Feed the stream to an agent that flags churn signals, pricing complaints, and buying intent the moment they surface.",
+		},
+		{
+			title: "Voice-of-customer and pain-point mining",
+			description:
+				"Mine real complaints and feature requests to find your next product idea. Reddit is where people say what they actually think, unfiltered by a survey or a support ticket.",
+		},
+		{
+			title: "Reddit sentiment analysis",
+			description:
+				"Pull comment trees at depth and score them for sentiment, so you can measure how a launch, a price change, or a competitor's move actually landed with your market.",
+		},
+		{
+			title: "Community research for go-to-market",
+			description:
+				"Map the subreddits, language, and objections of your buyers before you spend on ads. Turn community research into positioning your GTM team can act on.",
+		},
+	],
+
+	comparison: {
+		heading: "A Reddit API alternative built for agents",
+		intro:
+			"Reddit's official Data API added rate limits and per-call pricing in 2023. If you are hitting the paywall or the throttle, here is how SurfSense compares.",
+		columnLabel: "Official Reddit API",
+		rows: [
+			{
+				feature: "Rate limits",
+				official: "Per-OAuth-app quotas that throttle bulk and agent use",
+				surfsense: "Managed for you; scale reads without minding the throttle",
+			},
+			{
+				feature: "Pricing",
+				official: "Per-call pricing since the 2023 changes",
+				surfsense: "Pay per item returned, with a free tier to start",
+			},
+			{
+				feature: "Comment depth",
+				official: "Paginated; deep trees are slow and quota-heavy",
+				surfsense: "Full comment trees in one call, up to 100 items",
+			},
+			{
+				feature: "Setup",
+				official: "Register an OAuth app and manage tokens",
+				surfsense: "One API key, or add the MCP server to your agent",
+			},
+			{
+				feature: "Agent-ready",
+				official: "No; you build the harness yourself",
+				surfsense: "MCP server exposes reddit.scrape as a native tool",
+			},
+		],
+	},
+
+	api: {
+		platform: "reddit",
+		verb: "scrape",
+		mcpTool: "reddit.scrape",
+		requestBody: {
+			search_queries: ["your brand"],
+			community: "webscraping",
+			sort: "top",
+			time_filter: "week",
+			max_comments: 50,
+		},
+	},
+
+	faq: [
+		{
+			question: "Is scraping Reddit legal?",
+			answer:
+				"SurfSense reads only public Reddit data, the same posts and comments any logged-out visitor can see. It never logs in and cannot access private or deleted content. As always, review Reddit's terms and your own compliance needs before you run at scale.",
+		},
+		{
+			question: "Does this bypass the official Reddit API?",
+			answer:
+				"It is an independent alternative, not a wrapper. You do not register an OAuth app or manage Reddit tokens. You call the SurfSense API with one key, or add the MCP server to your agent, and get structured posts and comments back without the official API's limits.",
+		},
+		{
+			question: "What are the rate limits?",
+			answer:
+				"Each call caps at 100 returned items across all sources, with up to 20 URLs or search queries per request. SurfSense manages the underlying request budget for you, so you scale reads without registering apps or watching an OAuth quota.",
+		},
+		{
+			question: "How much historical data can I pull?",
+			answer:
+				"You can scrape a subreddit, user, or search back through its available public history, then use post and comment date limits to run incremental, delta-only scrapes. That keeps repeat monitoring cheap: pull only what is new since your last run.",
+		},
+	],
+
+	related: [
+		{ label: "YouTube API", href: "/youtube" },
+		{ label: "Google Maps API", href: "/google-maps" },
+		{ label: "SERP API", href: "/google-search" },
+		{ label: "Web Crawl API", href: "/web-crawl" },
+		{ label: "MCP Connector", href: "/mcp-connector" },
+		{ label: "Read the docs", href: "/docs" },
+	],
+};
diff --git a/surfsense_web/lib/connectors-marketing/types.ts b/surfsense_web/lib/connectors-marketing/types.ts
new file mode 100644
index 000000000..40bc71179
--- /dev/null
+++ b/surfsense_web/lib/connectors-marketing/types.ts
@@ -0,0 +1,104 @@
+import type { ComponentType } from "react";
+
+/** One extractable data point, rendered in the "What you can extract" grid. */
+export interface ExtractField {
+	label: string;
+	description: string;
+}
+
+/** An outcome-framed use case, rendered as an H3 under the use-cases H2. */
+export interface UseCase {
+	title: string;
+	description: string;
+}
+
+/** A single row in the "official API vs SurfSense" comparison table. */
+export interface ComparisonRow {
+	feature: string;
+	/** The incumbent / DIY column value. */
+	official: string;
+	/** The SurfSense column value. */
+	surfsense: string;
+}
+
+/** A FAQ entry. Answers are written to 40-60 words for featured-snippet fit. */
+export interface FaqItem {
+	question: string;
+	answer: string;
+}
+
+/** One structured result row revealed in the agent-transcript hero artifact. */
+export interface TranscriptRow {
+	primary: string;
+	secondary: string;
+	/** Optional short tag rendered as a pill (e.g. "no website", "+92%"). */
+	tag?: string;
+}
+
+/** The signature hero artifact: a realistic agent task and its structured output. */
+export interface AgentTranscript {
+	/** Natural-language task the agent is asked to perform. */
+	prompt: string;
+	/** The tool invocation the agent makes, mirroring the real capability surface. */
+	toolCall: string;
+	rows: TranscriptRow[];
+	/** One-line summary shown under the rows (e.g. "100 places · 23 without a website"). */
+	resultSummary: string;
+}
+
+/** A cross-link (to another connector, the homepage, or docs). */
+export interface RelatedLink {
+	label: string;
+	href: string;
+}
+
+/**
+ * The real capability surface for the API/MCP code samples. Values map 1:1 to
+ * the backend `ScrapeInput`/`CommentsInput` contracts so examples are truthful.
+ */
+export interface ApiSample {
+	/** Platform segment of the REST path, e.g. "google_maps". */
+	platform: string;
+	/** Verb segment of the REST path, e.g. "scrape". */
+	verb: string;
+	/** MCP tool name, e.g. "google_maps.scrape". */
+	mcpTool: string;
+	/** Request body keys/values, serialized into the cURL and Python samples. */
+	requestBody: Record<string, unknown>;
+}
+
+/** Everything needed to render one connector marketing page. */
+export interface ConnectorPageContent {
+	slug: string;
+	/** Platform display name, e.g. "Reddit". */
+	name: string;
+	/** Clean product label for cards and headings. Defaults to `${name} API`. */
+	cardTitle?: string;
+	icon: ComponentType<{ className?: string }>;
+	// SEO
+	/** <= 60 chars, primary keyword front-loaded. */
+	metaTitle: string;
+	/** 150-160 chars, ends with a CTA. */
+	metaDescription: string;
+	keywords: string[];
+	// Hero
+	h1: string;
+	/** Direct-answer paragraph placed in the first 150 words, keyword-rich. */
+	heroLede: string;
+	transcript: AgentTranscript;
+	// Body
+	extractIntro: string;
+	extractFields: ExtractField[];
+	useCasesHeading: string;
+	useCases: UseCase[];
+	comparison: {
+		heading: string;
+		intro: string;
+		/** Label for the incumbent column, e.g. "Official Reddit API". */
+		columnLabel: string;
+		rows: ComparisonRow[];
+	};
+	api: ApiSample;
+	faq: FaqItem[];
+	related: RelatedLink[];
+}
diff --git a/surfsense_web/lib/connectors-marketing/web-crawl.tsx b/surfsense_web/lib/connectors-marketing/web-crawl.tsx
new file mode 100644
index 000000000..b4affe9db
--- /dev/null
+++ b/surfsense_web/lib/connectors-marketing/web-crawl.tsx
@@ -0,0 +1,190 @@
+import { IconWorldWww } from "@tabler/icons-react";
+import type { ConnectorPageContent } from "./types";
+
+export const webCrawl: ConnectorPageContent = {
+	slug: "web-crawl",
+	name: "Web Crawl",
+	cardTitle: "Web Crawl API",
+	icon: IconWorldWww,
+
+	metaTitle: "Web Crawl API for AI Agents and Deep Research | SurfSense",
+	metaDescription:
+		"Point your agents at any URL and get clean, LLM-ready markdown, links, and contacts back. The SurfSense Web Crawl API for deep research and competitor monitoring. Start free.",
+	keywords: [
+		"web crawl api",
+		"web crawler api",
+		"web crawling api",
+		"firecrawl alternative",
+		"llm web scraping",
+		"agentic web scraping",
+		"deep research api",
+		"web scraping mcp",
+		"competitor price monitoring",
+		"crawl website for ai",
+		"website to markdown",
+		"web data for ai",
+	],
+
+	h1: "Web Crawl API: Turn Any Website into Agent-Ready Context",
+	heroLede:
+		"The SurfSense Web Crawl API points your AI agents at any URL and returns clean, LLM-ready markdown, structured links, and harvested contacts. Scrape a single page or spider a whole site, with the same agent harness that powers our platform connectors.",
+
+	transcript: {
+		prompt: "Crawl our top competitor's site and pull their pricing and contacts",
+		toolCall:
+			'web.crawl({ startUrls: ["https://competitor.com"], maxCrawlDepth: 2,\n  maxCrawlPages: 50 })',
+		rows: [
+			{
+				primary: "/pricing — Pro plan now $49/mo, up from $39",
+				secondary: "markdown · depth 1 · success",
+				tag: "price change",
+			},
+			{
+				primary: "sales@competitor.com",
+				secondary: "found on 12 pages · site-wide",
+				tag: "contact",
+			},
+			{
+				primary: "linkedin.com/in/their-head-of-sales",
+				secondary: "team page · anchor: 'VP Sales'",
+				tag: "social",
+			},
+		],
+		resultSummary: "50 pages · 41 markdown · 6 contacts · surfaced in 8.3s",
+	},
+
+	extractIntro:
+		"Give the API one or more start URLs. With depth 0 it scrapes just those pages; with a higher depth it spiders the site, bounded by your page cap, and returns one structured item per page.",
+	extractFields: [
+		{
+			label: "Clean markdown",
+			description:
+				"Cleaned, LLM-ready markdown for every page, truncated to the character limit you set.",
+		},
+		{
+			label: "Page metadata",
+			description:
+				"Title, description, and other metadata, plus the URL, fetch status, and crawl depth.",
+		},
+		{
+			label: "Links",
+			description:
+				"Every link with its anchor text and kind: internal, external, social, email, or tel.",
+		},
+		{
+			label: "Contacts",
+			description:
+				"Emails, phone numbers, and social profiles harvested from each page's raw HTML.",
+		},
+		{
+			label: "Site-wide contacts",
+			description:
+				"A deduplicated roll-up that separates company boilerplate from page-local people, with provenance.",
+		},
+		{
+			label: "Crawl control",
+			description:
+				"Depth, page cap, and include or exclude URL regex patterns to keep the spider on target.",
+		},
+	],
+
+	useCasesHeading: "What teams do with the Web Crawl API",
+	useCases: [
+		{
+			title: "Deep research over the open web",
+			description:
+				"Let an agent crawl dozens of sources on a topic, collect clean markdown, and synthesize an answer with citations. A deep-research API that reads the live web, not a stale index.",
+		},
+		{
+			title: "Competitor website monitoring",
+			description:
+				"Crawl a rival's pricing, product, and changelog pages on a schedule and diff them. Catch a price change, a new feature, or a repositioning the day it ships, not the quarter after.",
+		},
+		{
+			title: "Lead and contact enrichment",
+			description:
+				"Spider a company site and pull emails, phone numbers, and social profiles with provenance, so your agent knows which contact belongs to the company and which to a specific person.",
+		},
+		{
+			title: "RAG and knowledge-base ingestion",
+			description:
+				"Turn any set of sites into clean markdown ready to embed. Feed a knowledge base or a RAG pipeline without writing a parser or babysitting a headless browser.",
+		},
+	],
+
+	comparison: {
+		heading: "A Firecrawl alternative with an agent harness",
+		intro:
+			"Commodity crawlers hand you markdown and leave the rest to you. SurfSense adds the harness, the contact extraction, and the platform connectors around it.",
+		columnLabel: "Commodity crawler",
+		rows: [
+			{
+				feature: "Output",
+				official: "Markdown or HTML you post-process yourself",
+				surfsense: "Markdown plus parsed links, contacts, and site-wide roll-ups",
+			},
+			{
+				feature: "Contacts",
+				official: "Not extracted; you write the regex",
+				surfsense: "Emails, phones, and socials harvested with page provenance",
+			},
+			{
+				feature: "Scope",
+				official: "One site at a time",
+				surfsense: "Crawl the open web, then combine with platform connectors in one workflow",
+			},
+			{
+				feature: "Pricing",
+				official: "Per-page credits that add up quickly",
+				surfsense: "Pay per successful page, with a free tier to start",
+			},
+			{
+				feature: "Agent-ready",
+				official: "An SDK you wire into your own harness",
+				surfsense: "MCP server exposes web.crawl as a native tool",
+			},
+		],
+	},
+
+	api: {
+		platform: "web",
+		verb: "crawl",
+		mcpTool: "web.crawl",
+		requestBody: {
+			startUrls: ["https://competitor.com"],
+			maxCrawlDepth: 2,
+			maxCrawlPages: 50,
+		},
+	},
+
+	faq: [
+		{
+			question: "What formats does the Web Crawl API return?",
+			answer:
+				"Every page comes back as cleaned, LLM-ready markdown, alongside structured JSON for its metadata, links, and contacts. You set the maximum characters kept per page, so you control how much content each result carries.",
+		},
+		{
+			question: "Can it crawl a whole site or just one page?",
+			answer:
+				"Both. Set maxCrawlDepth to 0 to scrape only the URLs you pass in, or raise it to spider the site, following links hop by hop. maxCrawlPages caps the total pages fetched, and the spider stays on the start URL's site.",
+		},
+		{
+			question: "Does it handle JavaScript-heavy sites?",
+			answer:
+				"Yes. The underlying engine renders dynamic pages and waits for content to load automatically, so you get the same markdown a browser would show. You do not configure a headless browser or manage proxies yourself.",
+		},
+		{
+			question: "How is this different from Firecrawl?",
+			answer:
+				"You get more than markdown: parsed links, harvested contacts with provenance, and an MCP server that exposes web.crawl as a native agent tool. It shares one harness and workspace with the SurfSense platform connectors, so a crawl and a Reddit or Maps pull live in the same workflow.",
+		},
+	],
+
+	related: [
+		{ label: "SERP API", href: "/google-search" },
+		{ label: "Google Maps API", href: "/google-maps" },
+		{ label: "Reddit API", href: "/reddit" },
+		{ label: "MCP Connector", href: "/mcp-connector" },
+		{ label: "Read the docs", href: "/docs" },
+	],
+};
diff --git a/surfsense_web/lib/connectors-marketing/youtube.tsx b/surfsense_web/lib/connectors-marketing/youtube.tsx
new file mode 100644
index 000000000..0a211caea
--- /dev/null
+++ b/surfsense_web/lib/connectors-marketing/youtube.tsx
@@ -0,0 +1,184 @@
+import { IconBrandYoutube } from "@tabler/icons-react";
+import type { ConnectorPageContent } from "./types";
+
+export const youtube: ConnectorPageContent = {
+	slug: "youtube",
+	name: "YouTube",
+	icon: IconBrandYoutube,
+
+	metaTitle: "YouTube Scraper API for Audience Sentiment | SurfSense",
+	metaDescription:
+		"Scrape YouTube videos, comments, and transcripts at scale with the SurfSense YouTube Scraper API. No Data API quotas, plus a free tier for AI agents. Start now.",
+	keywords: [
+		"youtube scraper",
+		"youtube scraper api",
+		"youtube comment scraper",
+		"youtube comments api",
+		"youtube data api",
+		"youtube data api alternative",
+		"youtube channel scraper",
+		"youtube transcript scraper",
+		"youtube mcp server",
+		"youtube sentiment analysis",
+		"audience research tools",
+	],
+
+	h1: "YouTube API for Audience Sentiment and Content Intelligence",
+	heroLede:
+		"The SurfSense YouTube API pulls videos, channel stats, comments, and transcripts at scale, without YouTube Data API quotas. Feed your AI agents every comment and transcript that matters to your market, so you know what people actually think about your product and your competitors' content.",
+
+	transcript: {
+		prompt: "Summarize how people reacted in the comments on our launch video",
+		toolCall:
+			'youtube.comments({ urls: ["youtube.com/watch?v=launch"],\n  max_comments: 500, sort_by: "TOP_COMMENTS" })',
+		rows: [
+			{
+				primary: '"Finally an API that does not throttle my agent"',
+				secondary: "@devbuilds · 214 likes · creator hearted",
+				tag: "positive",
+			},
+			{
+				primary: '"How does pricing compare to the incumbent?"',
+				secondary: "@growthlee · 96 likes · 12 replies",
+				tag: "buying intent",
+			},
+			{
+				primary: '"Does it handle transcripts too or just metadata?"',
+				secondary: "@ml_ana · 71 likes · 8 replies",
+				tag: "feature ask",
+			},
+		],
+		resultSummary: "500 comments · 78% positive · surfaced in 3.4s",
+	},
+
+	extractIntro:
+		"Give the API video URLs, channel or playlist URLs, or search queries. It returns structured video items; a separate comments call returns full comment and reply trees for any video.",
+	extractFields: [
+		{
+			label: "Video metadata",
+			description: "Title, view count, likes, duration, publish date, hashtags, and description.",
+		},
+		{
+			label: "Channel stats",
+			description: "Subscriber count, total views, total videos, join date, and verified status.",
+		},
+		{
+			label: "Comments and replies",
+			description: "Author, comment text, vote counts, reply counts, and creator-heart flags.",
+		},
+		{
+			label: "Transcripts",
+			description: "Subtitle tracks per video in the language you request, ready as agent context.",
+		},
+		{
+			label: "Content types",
+			description: "Standard videos, Shorts, and live streams, capped independently per source.",
+		},
+		{
+			label: "Engagement",
+			description: "Likes, comment counts, and monetization or members-only flags per video.",
+		},
+	],
+
+	useCasesHeading: "What teams do with the YouTube API",
+	useCases: [
+		{
+			title: "Comment sentiment at scale",
+			description:
+				"Read every comment on your launch video or a competitor's ad, not a sample. Score product feedback and ad reaction so your team knows what actually resonated with the audience.",
+		},
+		{
+			title: "Competitor channel analysis",
+			description:
+				"Pull a rival channel's full catalog with views, likes, and cadence to see which content wins in your niche, then brief an agent to spot the patterns you should copy.",
+		},
+		{
+			title: "Influencer vetting",
+			description:
+				"Before you sponsor a creator, scrape their real view counts, comment sentiment, and posting history so you pay for genuine reach instead of a vanity subscriber number.",
+		},
+		{
+			title: "Transcripts as agent context",
+			description:
+				"Download transcripts to feed RAG pipelines and research agents. Turn hours of video into searchable, citable context your agents can reason over in seconds.",
+		},
+	],
+
+	comparison: {
+		heading: "A YouTube Data API alternative without the quota",
+		intro:
+			"The official YouTube Data API gives you 10,000 units a day, and reading comments burns through it fast. Here is how SurfSense compares.",
+		columnLabel: "YouTube Data API",
+		rows: [
+			{
+				feature: "Quota",
+				official: "10,000 units per day; comment reads drain it fast",
+				surfsense: "No daily unit quota; pay per item returned",
+			},
+			{
+				feature: "Comments",
+				official: "Paginated and quota-heavy at depth",
+				surfsense: "Up to 100,000 comments and replies per video",
+			},
+			{
+				feature: "Transcripts",
+				official: "Not available through the official API",
+				surfsense: "Subtitle tracks included, in the language you pick",
+			},
+			{
+				feature: "Setup",
+				official: "Google Cloud project, OAuth, and API key",
+				surfsense: "One API key, or add the MCP server to your agent",
+			},
+			{
+				feature: "Agent-ready",
+				official: "No; you build the harness yourself",
+				surfsense: "MCP server exposes youtube.scrape as a native tool",
+			},
+		],
+	},
+
+	api: {
+		platform: "youtube",
+		verb: "scrape",
+		mcpTool: "youtube.scrape",
+		requestBody: {
+			search_queries: ["your topic"],
+			max_results: 50,
+			download_subtitles: true,
+			subtitles_language: "en",
+		},
+	},
+
+	faq: [
+		{
+			question: "Is scraping YouTube legal?",
+			answer:
+				"SurfSense reads only public YouTube data, the videos, channels, and comments any visitor can see. It never signs in and cannot access private or unlisted content. Review YouTube's terms and your own compliance needs before running large jobs.",
+		},
+		{
+			question: "Are there quota limits like the YouTube Data API?",
+			answer:
+				"No daily unit quota. Each scrape call takes up to 20 sources with up to 1,000 results each, and a comments call returns up to 100,000 comments and replies per video. You pay per item returned instead of budgeting Google's 10,000 daily units.",
+		},
+		{
+			question: "Can it download transcripts, and in which languages?",
+			answer:
+				"Yes. Set download_subtitles to true and pass a language code such as en or fr, and each video comes back with its subtitle track. Transcripts make excellent context for RAG pipelines and research agents that need to reason over video content.",
+		},
+		{
+			question: "Does it support YouTube Shorts?",
+			answer:
+				"Yes. Channel sources return videos, Shorts, and live streams, each capped independently so one source can return all three types. You can also pass Shorts URLs directly, or use search queries to discover them across the platform.",
+		},
+	],
+
+	related: [
+		{ label: "Reddit API", href: "/reddit" },
+		{ label: "Google Maps API", href: "/google-maps" },
+		{ label: "SERP API", href: "/google-search" },
+		{ label: "Web Crawl API", href: "/web-crawl" },
+		{ label: "MCP Connector", href: "/mcp-connector" },
+		{ label: "Read the docs", href: "/docs" },
+	],
+};