"use client"

import {
	type ReactNode,
	useCallback,
	useEffect,
	useMemo,
	useRef,
	useState,
} from "react"
import type { UIMessage } from "@ai-sdk/react"
import { useQuery } from "@tanstack/react-query"
import { Streamdown } from "streamdown"
import {
	BookOpenIcon,
	CheckIcon,
	ChevronDownIcon,
	ChevronRightIcon,
	ClockIcon,
	CopyIcon,
	DownloadIcon,
	ExternalLinkIcon,
	GlobeIcon,
	ListIcon,
	Loader2,
	PlusIcon,
	SearchIcon,
	TerminalIcon,
	WrenchIcon,
	XCircleIcon,
	ZapIcon,
} from "lucide-react"
import { $fetch } from "@lib/api"
import { cn } from "@lib/utils"
import { GoogleDrive, Granola, Notion, OneDrive } from "@ui/assets/icons"
import { GranolaConnectModal } from "@/components/granola-connect-modal"
import { isWebSearchToolName } from "@/lib/chat-web-search-tools"
import {
	deriveKnowledgeConnectorState,
	isNovaKnowledgeConnectionWindowOpen,
	isNovaKnowledgeBaseProvider,
	navigateReservedNovaKnowledgeConnectionWindow,
	releaseNovaKnowledgeConnectionWindow,
	reserveNovaKnowledgeConnectionWindow,
	type KnowledgeConnection,
	type NovaKnowledgeBaseProvider,
	type NovaKnowledgeBaseStatus,
} from "@/lib/chat-knowledge-connectors"
import {
	buildCitationIndex,
	fetchDocumentsByIds,
	getDocumentSourceUrl,
	isMemoryToolOutputReady,
	mapDocumentsByKnownIds,
	type CitationTarget,
	type DocumentWithMemories,
	extractMemoryToolOutputs,
} from "@/lib/chat-memory-tools"
import {
	isSafeSourceId,
	parseSourceAnnotatedMarkdown,
	stripSourceMarkup,
} from "@/lib/source-annotations"
import { modelNames, type ModelId } from "@/lib/models"
import {
	formatResearchDuration,
	normalizeResearchMarkdownForDisplay,
	type NovaResearchSource,
} from "@/lib/nova-research"
import { RelatedMemories } from "./related-memories"
import { MessageActions } from "./message-actions"

const TOOL_META: Record<string, { label: string; icon: typeof SearchIcon }> = {
	bash: { label: "Memory", icon: TerminalIcon },
	recallContext: { label: "Recall Memories", icon: BookOpenIcon },
	discoverSpaces: { label: "Discover Spaces", icon: SearchIcon },
	web_search: { label: "Web search", icon: GlobeIcon },
	google_search: { label: "Google search", icon: GlobeIcon },
	// legacy tool names kept for existing persisted messages
	searchMemories: { label: "Search Memories", icon: SearchIcon },
	addMemory: { label: "Add Memory", icon: PlusIcon },
	fetchMemory: { label: "Fetch Memory", icon: BookOpenIcon },
	forgetMemory: { label: "Forget Memory", icon: XCircleIcon },
	updateMemory: { label: "Update Memory", icon: BookOpenIcon },
	forgetDocument: { label: "Forget Document", icon: XCircleIcon },
	scheduleTask: { label: "Schedule Task", icon: ClockIcon },
	listSchedules: { label: "List Schedules", icon: ListIcon },
	cancelSchedule: { label: "Cancel Schedule", icon: XCircleIcon },
}

type ToolCallDisplayPart = {
	type: string
	state?: string
	input?: unknown
	output?: unknown
	toolCallId?: string
	errorText?: string
}

type SourceUrlPart = {
	type: "source-url"
	sourceId: string
	url: string
	title?: string
}

type ActionSource = {
	id: string
	title: string
	subtitle?: string
	url?: string
	type: "memory" | "web"
}

function sourceHost(url: string): string {
	try {
		return new URL(url).hostname.replace(/^www\./, "")
	} catch {
		return url
	}
}

function faviconUrl(host: string): string {
	return `https://www.google.com/s2/favicons?sz=64&domain=${host}`
}

type NovaConnectorStatus =
	| "active"
	| "syncing"
	| "error"
	| "setup_pending"
	| "not_connected"
	| "upgrade_required"
	| "setup_available"

type NovaConnectorStep = {
	title?: string
	description?: string
	code?: string
	link?: { url: string; label: string }
	createPluginKey?: boolean
}

type NovaConnectorCardData = {
	kind?: "plugin" | "mcp" | "knowledge"
	id?: string
	provider?: NovaKnowledgeBaseProvider
	name?: string
	icon?: string
	description?: string
	features?: string[]
	docsUrl?: string
	repoUrl?: string
	installSteps?: NovaConnectorStep[]
	status?: NovaConnectorStatus
	requiresPro?: boolean
	canGenerateKey?: boolean
	keyPluginId?: string
	connectMode?: "oauth" | "api_key"
	canConnect?: boolean
	disabledReason?: string
	connectionCount?: number
	documentCount?: number
	lastSyncStatus?: "running" | "completed" | "failed"
	lastSyncAt?: string
	syncError?: string
}

type NovaConnectorToolOutput = {
	success?: boolean
	error?: string
	kind?: string
	connectors?: NovaConnectorCardData[]
	connector?: NovaConnectorCardData
	keyReveal?: { pluginId: string; label?: string } | null
	available?: Array<{
		kind: "plugin" | "mcp" | "knowledge"
		id: string
		name: string
	}>
}

const NOVA_CONNECTOR_TOOLS = new Set([
	"listNovaConnectors",
	"getNovaConnectorSetup",
	"prepareNovaPluginSetup",
	"listNovaKnowledgeBases",
	"getNovaKnowledgeBase",
	"startNovaKnowledgeBaseConnection",
])

const CONNECTOR_ICON_FALLBACKS: Record<string, string> = {
	codex: "/images/plugins/codex.png",
	cursor: "/images/plugins/cursor.png",
	mcp_cursor: "/mcp-supported-tools/cursor.png",
}

const KNOWLEDGE_CONNECTION_TIMEOUT_MS = 2 * 60 * 1000

function KnowledgeBaseProviderIcon({
	provider,
}: {
	provider: NovaKnowledgeBaseProvider
}) {
	if (provider === "google-drive") {
		return <GoogleDrive className="size-6 shrink-0 text-[#737373]" />
	}
	if (provider === "notion") {
		return <Notion className="size-6 shrink-0 text-[#737373]" />
	}
	if (provider === "onedrive") {
		return <OneDrive className="size-6 shrink-0 text-[#737373]" />
	}
	return <Granola className="size-6 shrink-0 text-[#737373]" />
}

const STATUS_COPY: Record<
	NovaConnectorStatus,
	{ label: string; className: string }
> = {
	active: {
		label: "Active",
		className: "border-emerald-400/20 bg-emerald-400/10 text-emerald-300",
	},
	syncing: {
		label: "Syncing",
		className: "border-blue-400/20 bg-blue-400/10 text-blue-300",
	},
	error: {
		label: "Needs attention",
		className: "border-red-400/20 bg-red-400/10 text-red-300",
	},
	setup_pending: {
		label: "Finish setup",
		className: "border-amber-400/20 bg-amber-400/10 text-amber-300",
	},
	not_connected: {
		label: "Not connected",
		className: "border-white/10 bg-white/[0.05] text-white/55",
	},
	upgrade_required: {
		label: "Pro required",
		className: "border-[#4BA0FA]/25 bg-[#4BA0FA]/10 text-[#4BA0FA]",
	},
	setup_available: {
		label: "Setup available",
		className: "border-white/10 bg-white/[0.05] text-white/65",
	},
}

function connectorToolName(part: ToolCallDisplayPart): string {
	return part.type.startsWith("tool-")
		? part.type.slice("tool-".length)
		: part.type
}

function connectorToolNameFromPart(part: unknown): string | null {
	if (!part || typeof part !== "object") return null
	const record = part as { type?: string; toolName?: string }
	if (record.type === "dynamic-tool") return record.toolName ?? null
	if (record.type?.startsWith("tool-")) return record.type.slice("tool-".length)
	return null
}

function parseConnectorOutput(value: string): NovaConnectorToolOutput | null {
	try {
		return JSON.parse(value) as NovaConnectorToolOutput
	} catch {
		return null
	}
}

function safeExternalUrl(url: string | null | undefined): string | null {
	if (!url) return null
	if (url.startsWith("/") && !url.startsWith("//")) return url
	if (url.startsWith("#") && !url.startsWith("#sm-source:")) return url
	try {
		const parsed = new URL(url)
		return parsed.protocol === "http:" || parsed.protocol === "https:"
			? url
			: null
	} catch {
		return null
	}
}

function unwrapToolOutput(output: unknown): NovaConnectorToolOutput | null {
	if (typeof output === "string") {
		return parseConnectorOutput(output)
	}
	if (!output || typeof output !== "object") return null
	const record = output as Record<string, unknown>
	for (const key of ["value", "result", "data", "output"]) {
		const nested = record[key]
		if (nested && nested !== output) {
			const parsed = unwrapToolOutput(nested)
			if (parsed) return parsed
		}
	}
	if (
		record.type === "json" &&
		record.value &&
		typeof record.value === "object"
	) {
		return record.value as NovaConnectorToolOutput
	}
	if (record.type === "text" && typeof record.value === "string") {
		return parseConnectorOutput(record.value)
	}
	if (typeof record.text === "string") {
		return parseConnectorOutput(record.text)
	}
	return record as NovaConnectorToolOutput
}

function connectorIconSrc(
	connector: NovaConnectorCardData,
): string | undefined {
	if (connector.id && CONNECTOR_ICON_FALLBACKS[connector.id]) {
		return CONNECTOR_ICON_FALLBACKS[connector.id]
	}
	if (connector.icon?.endsWith("/codex.svg"))
		return CONNECTOR_ICON_FALLBACKS.codex
	if (connector.icon?.endsWith("/cursor.svg"))
		return CONNECTOR_ICON_FALLBACKS.cursor
	return connector.icon
}

function connectorCardKey(connector: NovaConnectorCardData): string {
	return `${connector.kind ?? "connector"}-${connector.id ?? connector.name ?? "unknown"}`
}

function connectorIdentity(
	output: NovaConnectorToolOutput | null,
): string | null {
	if (!output) return null
	if (output.connectors && output.connectors.length !== 1) return null
	const connector = output.connector ?? output.connectors?.[0]
	if (!connector) return null
	return `${connector.kind ?? "connector"}:${connector.id ?? connector.name ?? ""}`
}

function connectorOutputFromPart(
	part: unknown,
): NovaConnectorToolOutput | null {
	if (!part || typeof part !== "object") return null
	const record = part as {
		type?: string
		toolName?: string
		output?: unknown
	}
	const toolName = connectorToolNameFromPart(record)
	if (!toolName || !NOVA_CONNECTOR_TOOLS.has(toolName)) return null
	return unwrapToolOutput(record.output)
}

function connectorToolPriority(toolName: string | null): number {
	if (toolName === "prepareNovaPluginSetup") return 2
	if (
		toolName === "getNovaConnectorSetup" ||
		toolName === "getNovaKnowledgeBase" ||
		toolName === "startNovaKnowledgeBaseConnection"
	)
		return 1
	return 0
}

function shouldSkipNovaConnectorPart(parts: unknown[], index: number): boolean {
	const part = parts[index]
	const toolName = connectorToolNameFromPart(part)
	if (!toolName || !NOVA_CONNECTOR_TOOLS.has(toolName)) return false
	const identity = connectorIdentity(connectorOutputFromPart(part))
	if (!identity) return false
	const priority = connectorToolPriority(toolName)

	for (let i = 0; i < parts.length; i++) {
		if (i === index) continue
		const otherTool = connectorToolNameFromPart(parts[i])
		if (!otherTool || !NOVA_CONNECTOR_TOOLS.has(otherTool)) continue
		const otherIdentity = connectorIdentity(connectorOutputFromPart(parts[i]))
		if (otherIdentity !== identity) continue
		const otherPriority = connectorToolPriority(otherTool)
		if (i < index && otherPriority >= priority) return true
		if (i > index && otherPriority > priority) return true
	}
	return false
}

function StatusPill({ status }: { status?: NovaConnectorStatus }) {
	const copy =
		STATUS_COPY[status ?? "not_connected"] ?? STATUS_COPY.not_connected
	return (
		<span
			className={cn(
				"inline-flex h-6 shrink-0 items-center rounded-full border px-2 text-[11px] font-medium",
				copy.className,
			)}
		>
			{copy.label}
		</span>
	)
}

function MiniCopyButton({ text, label }: { text: string; label?: string }) {
	const [copied, setCopied] = useState(false)
	return (
		<button
			type="button"
			aria-label={`Copy ${label ?? "value"}`}
			onClick={async () => {
				try {
					await navigator.clipboard.writeText(text)
					setCopied(true)
					setTimeout(() => setCopied(false), 1800)
				} catch {
					setCopied(false)
				}
			}}
			className="flex size-7 shrink-0 items-center justify-center rounded-full bg-[#0D121A] text-white/45 transition-colors hover:text-white/80"
		>
			{copied ? (
				<CheckIcon className="size-3.5 text-emerald-300" />
			) : (
				<CopyIcon className="size-3.5" />
			)}
		</button>
	)
}

function ConnectorCodeBlock({
	code,
	apiKey,
}: {
	code: string
	apiKey?: string
}) {
	const rendered = apiKey ? code.replaceAll("sm_...", apiKey) : code
	return (
		<div className="group flex min-w-0 items-center gap-2 rounded-[10px] border border-white/[0.07] bg-[#080B10] px-3 py-2.5">
			<pre
				className={cn(
					"scrollbar-none min-w-0 flex-1 overflow-x-auto whitespace-pre font-mono text-[12px] leading-[1.6] text-[#E4E4E7]",
					code.includes("sm_...") &&
						!apiKey &&
						"select-none blur-[4px] transition-[filter] group-hover:blur-none",
				)}
			>
				{rendered}
			</pre>
			<MiniCopyButton text={rendered} label="setup step" />
		</div>
	)
}

function RevealPluginKeyButton({
	pluginId,
	onReveal,
}: {
	pluginId: string
	onReveal: (key: string) => void
}) {
	const [state, setState] = useState<"idle" | "loading" | "copied" | "error">(
		"idle",
	)
	return (
		<button
			type="button"
			disabled={state === "loading"}
			onClick={async () => {
				setState("loading")
				try {
					const API_URL =
						process.env.NEXT_PUBLIC_BACKEND_URL ?? "https://api.supermemory.ai"
					const params = new URLSearchParams({ client: pluginId })
					const res = await fetch(`${API_URL}/v3/auth/key?${params}`, {
						credentials: "include",
					})
					if (!res.ok) throw new Error("Failed to create plugin key")
					const data = (await res.json()) as { key?: string }
					if (!data.key) throw new Error("Plugin key missing")
					onReveal(data.key)
					await navigator.clipboard.writeText(data.key).catch(() => undefined)
					setState("copied")
					setTimeout(() => setState("idle"), 2200)
				} catch {
					setState("error")
					setTimeout(() => setState("idle"), 2200)
				}
			}}
			className={cn(
				"inline-flex h-8 items-center gap-1.5 rounded-full bg-[#0D121A] px-3 text-[12px] font-medium text-[#FAFAFA]",
				"shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.7)] transition-opacity hover:opacity-80 disabled:opacity-60",
			)}
		>
			{state === "loading" ? (
				<Loader2 className="size-3.5 animate-spin" />
			) : state === "copied" ? (
				<CheckIcon className="size-3.5 text-emerald-300" />
			) : state === "error" ? (
				<XCircleIcon className="size-3.5 text-red-300" />
			) : null}
			{state === "copied"
				? "Key copied"
				: state === "error"
					? "Try again"
					: state === "loading"
						? "Generating"
						: "Generate key"}
		</button>
	)
}

function knowledgeFallbackStatus(
	status: NovaConnectorStatus | undefined,
): NovaKnowledgeBaseStatus {
	if (
		status === "active" ||
		status === "syncing" ||
		status === "error" ||
		status === "upgrade_required"
	) {
		return status
	}
	return "not_connected"
}

function KnowledgeBaseConnectAction({
	connector,
	onConnected,
	onPendingChange,
	attemptKey,
}: {
	connector: NovaConnectorCardData
	onConnected: () => void
	onPendingChange?: (pending: boolean) => void
	attemptKey?: string
}) {
	const [granolaOpen, setGranolaOpen] = useState(false)
	const [connectionState, setConnectionState] = useState<
		"idle" | "starting" | "waiting" | "error"
	>("idle")
	const [error, setError] = useState<string | null>(null)
	const granolaSucceededRef = useRef(false)
	const startingConnectionCountRef = useRef(connector.connectionCount ?? 0)
	const provider = connector.provider
	const disabled =
		connector.canConnect === false ||
		connectionState === "starting" ||
		connectionState === "waiting"
	const buttonLabel =
		connector.status === "active" || connector.status === "syncing"
			? "Add another"
			: connector.status === "error"
				? "Reconnect"
				: "Connect"

	const clearPendingAttempt = useCallback(() => {
		if (attemptKey) sessionStorage.removeItem(attemptKey)
	}, [attemptKey])
	const stopWaiting = useCallback(
		(message: string) => {
			if (provider) releaseNovaKnowledgeConnectionWindow(provider)
			clearPendingAttempt()
			onPendingChange?.(false)
			setError(message)
			setConnectionState("error")
		},
		[clearPendingAttempt, onPendingChange, provider],
	)

	const connect = useCallback(
		async (reserveTab = false) => {
			if (!provider || connector.kind !== "knowledge") return
			startingConnectionCountRef.current = connector.connectionCount ?? 0
			setError(null)
			setConnectionState("starting")
			onPendingChange?.(true)
			if (provider === "granola") {
				granolaSucceededRef.current = false
				setGranolaOpen(true)
				setConnectionState("waiting")
				return
			}
			if (reserveTab) reserveNovaKnowledgeConnectionWindow(provider)

			try {
				const response = await $fetch("@post/connections/:provider", {
					params: { provider },
					body: {
						redirectUrl: window.location.href,
						containerTags: [],
					},
				})
				if (response.error) {
					throw new Error(
						response.error.message || "Failed to start connection",
					)
				}
				const data = response.data as { authLink?: string } | undefined
				const authLink = safeExternalUrl(data?.authLink)
				if (!authLink) throw new Error("Connection link was not returned")
				if (attemptKey) sessionStorage.setItem(attemptKey, String(Date.now()))
				if (
					!navigateReservedNovaKnowledgeConnectionWindow(provider, authLink)
				) {
					clearPendingAttempt()
					throw new Error(
						"Your browser blocked the connection tab. Allow pop-ups for Supermemory and try again.",
					)
				}
				setConnectionState("waiting")
			} catch (cause) {
				stopWaiting(
					cause instanceof Error ? cause.message : "Failed to connect",
				)
			}
		},
		[
			attemptKey,
			clearPendingAttempt,
			connector.connectionCount,
			connector.kind,
			onPendingChange,
			provider,
			stopWaiting,
		],
	)

	useEffect(() => {
		if (connectionState !== "waiting" || !provider || provider === "granola") {
			return
		}

		const closedCheck = window.setInterval(() => {
			if (!isNovaKnowledgeConnectionWindowOpen(provider)) {
				stopWaiting("Connection cancelled. You can try again.")
			}
		}, 500)
		const timeout = window.setTimeout(() => {
			stopWaiting("Connection timed out. You can try again.")
		}, KNOWLEDGE_CONNECTION_TIMEOUT_MS)

		return () => {
			window.clearInterval(closedCheck)
			window.clearTimeout(timeout)
		}
	}, [connectionState, provider, stopWaiting])

	useEffect(() => {
		const connectionCompleted =
			(connector.connectionCount ?? 0) > startingConnectionCountRef.current ||
			(startingConnectionCountRef.current === 0 &&
				(connector.status === "active" || connector.status === "syncing"))
		if (connectionState !== "waiting" || !connectionCompleted) return
		clearPendingAttempt()
		if (provider) releaseNovaKnowledgeConnectionWindow(provider)
		setConnectionState("idle")
		onPendingChange?.(false)
		onConnected()
	}, [
		clearPendingAttempt,
		connectionState,
		connector.connectionCount,
		connector.status,
		onConnected,
		onPendingChange,
		provider,
	])

	if (!provider || connector.kind !== "knowledge") return null

	return (
		<div className="flex min-w-0 flex-col items-end gap-1.5">
			{connectionState === "starting" || connectionState === "waiting" ? (
				<div className="flex items-center gap-1.5">
					<div className="inline-flex h-9 min-w-[116px] items-center justify-center gap-1.5 rounded-full bg-[#0D121A] px-5 text-[14px] font-medium text-[#A1A1AA] shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.7)]">
						<Loader2 className="size-3.5 animate-spin text-[#4BA0FA]" />
						{connectionState === "starting" ? "Opening…" : "Waiting…"}
					</div>
					{connectionState === "waiting" ? (
						<button
							type="button"
							onClick={() =>
								stopWaiting("Connection cancelled. You can try again.")
							}
							className="h-9 rounded-full px-3 text-[12px] font-medium text-[#737373] transition-colors hover:bg-[#0D121A] hover:text-[#FAFAFA]"
						>
							Cancel
						</button>
					) : null}
				</div>
			) : (
				<button
					type="button"
					disabled={disabled}
					onClick={() => void connect(true)}
					className="inline-flex h-9 min-w-[116px] items-center justify-center rounded-full bg-[#0D121A] px-5 text-[14px] font-medium text-[#FAFAFA] shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.7)] transition-opacity hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
				>
					{connectionState === "error" ? "Try again" : buttonLabel}
				</button>
			)}
			{connector.canConnect === false && connector.disabledReason ? (
				<p className="basis-full text-[11px] text-[#A1A1AA]">
					{connector.disabledReason}
				</p>
			) : null}
			{error ? (
				<p className="text-right text-[11px] text-red-300">{error}</p>
			) : null}
			{provider === "granola" ? (
				<GranolaConnectModal
					open={granolaOpen}
					onOpenChange={(open) => {
						setGranolaOpen(open)
						if (!open && !granolaSucceededRef.current) {
							stopWaiting("Connection cancelled. You can try again.")
						}
					}}
					containerTags={[]}
					onSuccess={() => {
						granolaSucceededRef.current = true
						clearPendingAttempt()
						setError(null)
						setConnectionState("idle")
						onPendingChange?.(false)
						onConnected()
					}}
				/>
			) : null}
		</div>
	)
}

function NovaConnectorCard({
	connector,
	onConnectionsChanged,
	onConnectionPendingChange,
	connectionAttemptKey,
}: {
	connector: NovaConnectorCardData
	onConnectionsChanged?: () => void
	onConnectionPendingChange?: (pending: boolean) => void
	connectionAttemptKey?: string
}) {
	const [revealedKey, setRevealedKey] = useState<string | undefined>()
	const displayedConnector = connector
	const needsKey = Boolean(
		displayedConnector.canGenerateKey && displayedConnector.keyPluginId,
	)
	const isUpgrade = displayedConnector.status === "upgrade_required"
	const iconSrc = connectorIconSrc(displayedConnector)
	if (
		displayedConnector.kind === "knowledge" &&
		isNovaKnowledgeBaseProvider(displayedConnector.provider)
	) {
		const connectionCount = displayedConnector.connectionCount ?? 0
		const indexedItems = displayedConnector.documentCount ?? 0
		const statusText =
			displayedConnector.status === "syncing"
				? "Syncing memories…"
				: displayedConnector.status === "error"
					? (displayedConnector.syncError ?? "Connection needs attention")
					: connectionCount > 0
						? `${connectionCount} connection${connectionCount === 1 ? "" : "s"} · ${indexedItems} indexed items`
						: displayedConnector.description

		return (
			<div className="flex min-h-[190px] w-full max-w-[520px] flex-col rounded-[12px] bg-[#14161A] p-4 text-white shadow-[inset_2.42px_2.42px_4.263px_rgba(11,15,21,0.7)]">
				<div className="flex items-start justify-between gap-3">
					<div className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-[#080B0F] shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.6)]">
						<KnowledgeBaseProviderIcon provider={displayedConnector.provider} />
					</div>
					{isUpgrade ? (
						<span className="shrink-0 pt-1 text-[10px] font-semibold uppercase tracking-wide text-[#4BA0FA]">
							Pro
						</span>
					) : null}
				</div>
				<div className="mt-4 min-w-0 flex-1">
					<p className="truncate text-[16px] font-medium text-[#FAFAFA]">
						{displayedConnector.name ?? "Knowledge base"}
					</p>
					{statusText ? (
						<p className="mt-1 line-clamp-2 text-[14px] leading-snug text-[#A1A1AA]">
							{statusText}
						</p>
					) : null}
				</div>
				<div className="mt-4 flex justify-end">
					{isUpgrade ? (
						<div className="inline-flex h-9 min-w-[116px] items-center justify-center rounded-full bg-[#0D121A] px-5 text-[14px] font-medium text-[#4BA0FA] shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.7)]">
							Upgrade
						</div>
					) : (
						<KnowledgeBaseConnectAction
							connector={displayedConnector}
							onConnected={() => onConnectionsChanged?.()}
							onPendingChange={onConnectionPendingChange}
							attemptKey={connectionAttemptKey}
						/>
					)}
				</div>
			</div>
		)
	}
	return (
		<div className="rounded-xl border border-white/[0.08] bg-[#0D121A] p-3 text-sm text-white/90 shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.55)]">
			<div className="flex items-start gap-3">
				<div className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-[#080B0F]">
					{iconSrc ? (
						<img
							src={iconSrc}
							alt=""
							className="size-6 rounded object-contain"
							onError={(event) => {
								const img = event.currentTarget
								const fallback = displayedConnector.id
									? CONNECTOR_ICON_FALLBACKS[displayedConnector.id]
									: undefined
								if (fallback && img.dataset.fallbackApplied !== "true") {
									img.dataset.fallbackApplied = "true"
									img.src = fallback
								} else {
									img.style.display = "none"
								}
							}}
						/>
					) : (
						<WrenchIcon className="size-5 text-white/50" />
					)}
				</div>
				<div className="min-w-0 flex-1">
					<div className="flex min-w-0 items-center gap-2">
						<p className="truncate text-[14px] font-semibold text-[#FAFAFA]">
							{displayedConnector.name ?? displayedConnector.id ?? "Connector"}
						</p>
						<StatusPill status={displayedConnector.status} />
					</div>
					{displayedConnector.description ? (
						<p className="mt-1 text-[12px] leading-snug text-[#A1A1AA]">
							{displayedConnector.description}
						</p>
					) : null}
					{displayedConnector.kind === "knowledge" ? (
						<p className="mt-1 text-[11px] text-[#737373]">
							{displayedConnector.connectionCount ?? 0} connection
							{displayedConnector.connectionCount === 1 ? "" : "s"} ·{" "}
							{displayedConnector.documentCount ?? 0} indexed items
						</p>
					) : null}
					{displayedConnector.syncError ? (
						<p className="mt-1 text-[11px] text-red-300">
							{displayedConnector.syncError}
						</p>
					) : null}
				</div>
			</div>

			{displayedConnector.installSteps?.length ? (
				<ol className="mt-3 space-y-3">
					{displayedConnector.installSteps.map((step, index) => (
						<li key={`${step.title}-${index}`} className="flex gap-2.5">
							<span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-[#080B10] text-[10px] font-semibold text-[#4BA0FA]">
								{index + 1}
							</span>
							<div className="min-w-0 flex-1 space-y-1.5">
								<p className="text-[12px] font-medium text-[#FAFAFA]">
									{step.title}
								</p>
								{step.description ? (
									<p className="text-[12px] leading-snug text-[#A1A1AA]">
										{step.description}
									</p>
								) : null}
								{step.code ? (
									<ConnectorCodeBlock code={step.code} apiKey={revealedKey} />
								) : null}
								{step.link ? (
									<a
										href={step.link.url}
										target="_blank"
										rel="noopener noreferrer"
										className="inline-flex items-center gap-1 text-[12px] text-[#4BA0FA] hover:text-[#86C5FF]"
									>
										{step.link.label}
										<ExternalLinkIcon className="size-3" />
									</a>
								) : null}
							</div>
						</li>
					))}
				</ol>
			) : null}

			<div className="mt-3 flex flex-wrap items-center gap-2">
				{needsKey && displayedConnector.keyPluginId && !isUpgrade ? (
					<RevealPluginKeyButton
						pluginId={displayedConnector.keyPluginId}
						onReveal={setRevealedKey}
					/>
				) : null}
				{isUpgrade ? (
					<span className="inline-flex h-8 items-center gap-1.5 rounded-full bg-[#0D121A] px-3 text-[12px] font-medium text-[#4BA0FA]">
						<ZapIcon className="size-3.5" />
						Upgrade to connect
					</span>
				) : null}
				{displayedConnector.kind === "knowledge" && !isUpgrade ? (
					<KnowledgeBaseConnectAction
						connector={displayedConnector}
						onConnected={() => onConnectionsChanged?.()}
						onPendingChange={onConnectionPendingChange}
						attemptKey={connectionAttemptKey}
					/>
				) : null}
				{displayedConnector.docsUrl ? (
					<a
						href={displayedConnector.docsUrl}
						target="_blank"
						rel="noopener noreferrer"
						className="inline-flex h-8 items-center gap-1.5 rounded-full px-3 text-[12px] text-[#A1A1AA] transition-colors hover:text-white"
					>
						<BookOpenIcon className="size-3.5" />
						Docs
					</a>
				) : null}
			</div>
		</div>
	)
}

function NovaConnectorCompactCard({
	connector,
	expanded,
	onToggle,
}: {
	connector: NovaConnectorCardData
	expanded: boolean
	onToggle: () => void
}) {
	const iconSrc = connectorIconSrc(connector)
	return (
		<div className="min-w-0 rounded-xl">
			<button
				type="button"
				aria-expanded={expanded}
				onClick={onToggle}
				className={cn(
					"flex min-h-14 w-full cursor-pointer items-center gap-2 rounded-xl border px-2.5 py-2 text-left transition-colors focus:outline-none focus-visible:border-[#4BA0FA]/50",
					expanded
						? "border-[#4BA0FA]/30 bg-[#111820]"
						: "border-white/[0.08] bg-[#0D121A] hover:border-white/[0.14] hover:bg-[#111820]",
				)}
			>
				<div className="flex size-8 shrink-0 items-center justify-center rounded-[8px] bg-[#080B0F]">
					{iconSrc ? (
						<img
							src={iconSrc}
							alt=""
							className="size-5 rounded object-contain"
							onError={(event) => {
								event.currentTarget.style.display = "none"
							}}
						/>
					) : (
						<WrenchIcon className="size-4 text-white/50" />
					)}
				</div>
				<div className="min-w-0 flex-1">
					<p className="truncate text-[12px] font-semibold text-[#FAFAFA]">
						{connector.name ?? connector.id ?? "Connector"}
					</p>
					<p className="mt-0.5 truncate text-[11px] text-[#737373]">
						{connector.kind === "mcp"
							? "MCP"
							: connector.kind === "knowledge"
								? "Knowledge base"
								: "Plugin"}
					</p>
				</div>
				<StatusPill status={connector.status} />
				{expanded ? (
					<ChevronDownIcon className="size-3.5 shrink-0 text-[#737373]" />
				) : (
					<ChevronRightIcon className="size-3.5 shrink-0 text-[#737373]" />
				)}
			</button>
		</div>
	)
}

function NovaConnectorToolDisplay({ part }: { part: ToolCallDisplayPart }) {
	const [expandedConnectorKey, setExpandedConnectorKey] = useState<
		string | null
	>(null)
	const [connectionPending, setConnectionPending] = useState(false)
	const toolName = connectorToolName(part)
	const output = unwrapToolOutput(part.output)
	const connectionAttemptKey = part.toolCallId
		? `nova-knowledge-connect:${part.toolCallId}`
		: undefined
	const connectors = output?.connector
		? [output.connector]
		: (output?.connectors ?? [])
	const hasKnowledgeBases = connectors.some(
		(connector) =>
			connector.kind === "knowledge" &&
			isNovaKnowledgeBaseProvider(connector.provider),
	)
	const { data: liveConnections, refetch: refetchConnections } = useQuery({
		queryKey: ["connections"],
		queryFn: async () => {
			const response = await $fetch("@post/connections/list", {
				body: { containerTags: [] },
			})
			if (response.error) {
				throw new Error(response.error.message || "Failed to load connections")
			}
			return response.data as KnowledgeConnection[]
		},
		enabled: hasKnowledgeBases && output?.success !== false,
		staleTime: 30 * 1000,
		refetchInterval: (query) => {
			if (connectionPending) return 3000
			const connections = query.state.data as KnowledgeConnection[] | undefined
			return connections?.some(
				(connection) => connection.lastSyncRun?.status === "running",
			)
				? 5000
				: false
		},
		refetchIntervalInBackground: connectionPending,
	})
	const displayedConnectors = connectors.map((connector) => {
		if (
			!liveConnections ||
			connector.kind !== "knowledge" ||
			!isNovaKnowledgeBaseProvider(connector.provider)
		) {
			return connector
		}
		return {
			...connector,
			...deriveKnowledgeConnectorState({
				provider: connector.provider,
				connections: liveConnections,
				fallbackStatus: knowledgeFallbackStatus(connector.status),
			}),
		}
	})
	const isLoading =
		part.state === "input-streaming" || part.state === "input-available"
	const isError = part.state === "error" || part.state === "output-error"
	if (isLoading) {
		return (
			<div className="my-2 flex items-center gap-2 rounded-xl border border-white/[0.08] bg-[#0D121A] px-3 py-2 text-xs text-white/55">
				<Loader2 className="size-3.5 animate-spin text-[#4BA0FA]" />
				<span>
					{toolName === "listNovaKnowledgeBases" ||
					toolName === "getNovaKnowledgeBase" ||
					toolName === "startNovaKnowledgeBaseConnection"
						? "Checking knowledge bases…"
						: "Checking Supermemory setup…"}
				</span>
			</div>
		)
	}
	if (isError) {
		return (
			<div className="my-2 rounded-xl border border-red-400/15 bg-red-400/10 px-3 py-2 text-xs text-red-200">
				Couldn't load connector setup.
			</div>
		)
	}
	if (!output) return null
	if (output.success === false) {
		return (
			<div className="my-2 rounded-xl border border-white/[0.08] bg-[#0D121A] p-3 text-sm text-white/80">
				<p className="font-medium text-[#FAFAFA]">
					{output.error ?? "Connector not found"}
				</p>
				{output.available?.length ? (
					<p className="mt-1 text-xs text-[#A1A1AA]">
						Try one of: {output.available.map((item) => item.name).join(", ")}
					</p>
				) : null}
			</div>
		)
	}
	const isConnectorList =
		(toolName === "listNovaConnectors" ||
			toolName === "listNovaKnowledgeBases") &&
		displayedConnectors.length > 1
	const expandedConnector =
		isConnectorList && expandedConnectorKey
			? displayedConnectors.find(
					(connector) => connectorCardKey(connector) === expandedConnectorKey,
				)
			: null
	return (
		<div className="my-2 space-y-2">
			{isConnectorList ? (
				<p className="px-1 text-[11px] font-medium uppercase tracking-[0.08em] text-[#737373]">
					{toolName === "listNovaKnowledgeBases"
						? "Knowledge bases"
						: "Supermemory setup options"}
				</p>
			) : null}
			<div
				className={cn(
					isConnectorList && "grid grid-cols-1 gap-2 sm:grid-cols-2",
					!isConnectorList && "space-y-2",
				)}
			>
				{displayedConnectors.map((connector) =>
					isConnectorList ? (
						<NovaConnectorCompactCard
							key={connectorCardKey(connector)}
							connector={connector}
							expanded={connectorCardKey(connector) === expandedConnectorKey}
							onToggle={() => {
								const nextKey = connectorCardKey(connector)
								setExpandedConnectorKey((current) =>
									current === nextKey ? null : nextKey,
								)
							}}
						/>
					) : (
						<NovaConnectorCard
							key={connectorCardKey(connector)}
							connector={connector}
							onConnectionsChanged={() => void refetchConnections()}
							onConnectionPendingChange={setConnectionPending}
							connectionAttemptKey={connectionAttemptKey}
						/>
					),
				)}
			</div>
			{expandedConnector ? (
				<div className="pt-1">
					<NovaConnectorCard
						connector={expandedConnector}
						onConnectionsChanged={() => void refetchConnections()}
						onConnectionPendingChange={setConnectionPending}
						connectionAttemptKey={connectionAttemptKey}
					/>
				</div>
			) : null}
		</div>
	)
}

function isWebSearchPart(part: { type: string; toolName?: string }): boolean {
	if (part.type === "dynamic-tool") {
		return isWebSearchToolName(part.toolName ?? "")
	}
	if (part.type.startsWith("tool-")) {
		return isWebSearchToolName(part.type.slice("tool-".length))
	}
	return false
}

function isMemoryRetrievalToolName(toolName: string): boolean {
	return (
		toolName === "searchMemories" ||
		toolName === "recallContext" ||
		toolName === "discoverSpaces"
	)
}

export function isChatToolDisplayPartType(type: string): boolean {
	return (
		type === "tool-searchMemories" ||
		type === "tool-recallContext" ||
		type === "tool-discoverSpaces" ||
		type === "tool-forgetMemory" ||
		type === "tool-updateMemory" ||
		type === "tool-forgetDocument"
	)
}

function CitationLink({
	href,
	label,
	source,
}: {
	href: string
	label: string
	source?: SourceUrlPart
}) {
	const url = safeExternalUrl(source?.url ?? href) ?? ""
	if (!url) return <>{label}</>
	const host = sourceHost(url)
	const rawTitle = source?.title?.trim()
	const hasTitle =
		!!rawTitle && rawTitle !== host && !/^https?:\/\//i.test(rawTitle)
	let path = ""
	try {
		path = new URL(url).pathname.replace(/\/$/, "")
	} catch {}
	return (
		<span className="group/cite relative inline">
			<a
				href={url}
				target="_blank"
				rel="noopener noreferrer"
				className="text-blue-400 no-underline hover:text-blue-300"
			>
				{label}
			</a>
			<span className="pointer-events-none absolute bottom-full left-1/2 z-[1000] hidden -translate-x-1/2 pb-1.5 group-hover/cite:block">
				<a
					href={url}
					target="_blank"
					rel="noopener noreferrer"
					className="pointer-events-auto block w-64 overflow-hidden rounded-lg border border-white/10 bg-[#0B0F16]/95 p-2.5 no-underline shadow-[0_12px_32px_rgba(0,0,0,0.4)] backdrop-blur-xl"
				>
					<span className="flex items-center gap-2">
						<img
							src={faviconUrl(host)}
							alt=""
							className="size-4 shrink-0 rounded bg-white/10"
							loading="lazy"
							referrerPolicy="no-referrer"
						/>
						<span className="truncate text-xs font-medium text-white/85">
							{host}
						</span>
					</span>
					{hasTitle ? (
						<span className="mt-1.5 block line-clamp-2 text-xs leading-snug text-white/60">
							{rawTitle}
						</span>
					) : path ? (
						<span className="mt-1 block truncate text-[11px] text-white/35">
							{path}
						</span>
					) : null}
				</a>
			</span>
		</span>
	)
}

function sourceTitle(
	target: CitationTarget,
	document?: DocumentWithMemories,
): string {
	return (
		document?.title?.trim() ||
		target.title?.trim() ||
		document?.customId ||
		target.customId ||
		target.documentId ||
		target.sourceId
	)
}

function sourceSummary(
	target: CitationTarget,
	document?: DocumentWithMemories,
): string | null {
	const summary =
		document?.summary ||
		target.summary ||
		(document as { content?: string } | undefined)?.content ||
		null
	return summary ? summary.trim() : null
}

function sourceKind(
	target: CitationTarget,
	document?: DocumentWithMemories,
): string {
	return (document?.type || target.type || "memory").replaceAll("_", " ")
}

function SourceCitationLink({
	sourceId,
	children,
	citationIndex,
	documentByKnownId,
}: {
	sourceId: string
	children: ReactNode
	citationIndex: Map<string, CitationTarget>
	documentByKnownId: Map<string, DocumentWithMemories>
}) {
	const target = citationIndex.get(sourceId)
	if (!target) return <>{children}</>

	const document =
		(target.documentId
			? documentByKnownId.get(target.documentId)
			: undefined) ??
		(target.customId ? documentByKnownId.get(target.customId) : undefined)
	const url = safeExternalUrl(
		document ? getDocumentSourceUrl(document) : target.url,
	)
	const title = sourceTitle(target, document)
	const summary = sourceSummary(target, document)
	const citationContent =
		typeof children === "string" &&
		(children === sourceId || children === "memory") ? (
			<span className="inline-flex h-4 items-center justify-center rounded-full border border-white/10 bg-white/[0.04] px-1.5 text-[9px] font-medium leading-none text-white/50 transition-colors group-hover/source:text-white/70 group-focus-within/source:text-white/70">
				{sourceId}
			</span>
		) : (
			<>
				{children}
				<span className="ml-1 inline-flex h-3.5 min-w-3.5 translate-y-[-1px] items-center justify-center rounded-full border border-white/10 bg-white/[0.04] px-1 text-[9px] font-medium leading-none text-white/45 transition-colors group-hover/source:text-white/65 group-focus-within/source:text-white/65">
					{sourceId}
				</span>
			</>
		)

	return (
		<span className="group/source relative inline rounded-[3px] border-b border-dotted border-white/20 bg-white/[0.025] px-px text-white/90 transition-colors hover:border-white/35 hover:bg-white/[0.045] focus-within:border-white/35 focus-within:bg-white/[0.045]">
			{url ? (
				<a
					href={url}
					target="_blank"
					rel="noopener noreferrer"
					className="text-inherit no-underline outline-none focus-visible:ring-1 focus-visible:ring-white/25"
				>
					{citationContent}
				</a>
			) : (
				<button
					type="button"
					className="cursor-help border-0 bg-transparent p-0 text-inherit"
				>
					{citationContent}
				</button>
			)}
			<span className="pointer-events-none absolute bottom-full left-1/2 z-[1000] hidden w-72 -translate-x-1/2 pb-2 group-hover/source:block group-focus-within/source:block">
				<span className="pointer-events-auto block rounded-xl border border-white/10 bg-[#0B0F16]/95 p-3 text-left shadow-[0_16px_44px_rgba(0,0,0,0.48)] backdrop-blur-xl">
					<span className="mb-1 flex items-center justify-between gap-2">
						<span className="truncate text-xs font-medium text-white/85">
							{title}
						</span>
						<span className="shrink-0 rounded-full bg-white/5 px-2 py-0.5 text-[10px] capitalize text-white/40">
							{sourceKind(target, document)}
						</span>
					</span>
					{summary ? (
						<span className="line-clamp-3 text-xs leading-snug text-white/55">
							{summary}
						</span>
					) : null}
					{url ? (
						<span className="mt-2 block text-xs font-medium text-blue-300">
							Open source
						</span>
					) : null}
				</span>
			</span>
		</span>
	)
}

function makeMarkdownComponents(
	sources: SourceUrlPart[],
	citationIndex: Map<string, CitationTarget>,
	documentByKnownId: Map<string, DocumentWithMemories>,
) {
	return {
		a: ({ href, children }: { href?: string; children?: ReactNode }) => {
			if (href?.startsWith("#sm-source:")) {
				const sourceId = (() => {
					try {
						return decodeURIComponent(href.slice("#sm-source:".length))
					} catch {
						return null
					}
				})()
				if (!sourceId) return <>{children}</>
				return (
					<SourceCitationLink
						sourceId={sourceId}
						citationIndex={citationIndex}
						documentByKnownId={documentByKnownId}
					>
						{children}
					</SourceCitationLink>
				)
			}
			const label =
				typeof children === "string"
					? children
					: Array.isArray(children)
						? children.join("")
						: ""
			const match = label.match(/^\[?(\d+)\]?$/)
			const safeHref = safeExternalUrl(href)
			if (match && safeHref) {
				const n = Number(match[1])
				const source = sources.find((s) => s.url === safeHref) ?? sources[n - 1]
				return <CitationLink href={safeHref} label={label} source={source} />
			}
			if (!safeHref) return <>{children}</>
			return (
				<a
					href={safeHref}
					target="_blank"
					rel="noopener noreferrer"
					className="text-blue-400 hover:underline"
				>
					{children}
				</a>
			)
		},
	}
}

function SourcesPill({ sources }: { sources: ActionSource[] }) {
	const [expanded, setExpanded] = useState(false)
	const ref = useRef<HTMLDivElement>(null)

	useEffect(() => {
		if (!expanded) return
		const onDown = (e: MouseEvent) => {
			if (ref.current && !ref.current.contains(e.target as Node)) {
				setExpanded(false)
			}
		}
		document.addEventListener("mousedown", onDown)
		return () => document.removeEventListener("mousedown", onDown)
	}, [expanded])

	if (sources.length === 0) return null

	const faviconHosts: string[] = []
	for (const source of sources) {
		if (!source.url) continue
		const host = sourceHost(source.url)
		if (!faviconHosts.includes(host)) faviconHosts.push(host)
		if (faviconHosts.length >= 3) break
	}
	const count = sources.length

	return (
		<div ref={ref} className="relative">
			<button
				type="button"
				onClick={() => setExpanded((v) => !v)}
				className="flex cursor-pointer items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.04] py-1 pr-2.5 pl-1.5 text-xs text-white/65 transition-colors hover:bg-white/[0.08] hover:text-white/80"
				aria-expanded={expanded}
				aria-label={`${count} ${count === 1 ? "source" : "sources"}`}
			>
				<span className="flex -space-x-1.5">
					{faviconHosts.length > 0 ? (
						faviconHosts.map((host) => (
							<img
								key={host}
								src={faviconUrl(host)}
								alt=""
								className="size-4 rounded-full border border-[#0B0F16] bg-white/10 object-cover"
								loading="lazy"
								referrerPolicy="no-referrer"
							/>
						))
					) : (
						<GlobeIcon className="size-3.5 text-emerald-400" />
					)}
				</span>
				<span>{count === 1 ? "1 source" : `${count} sources`}</span>
			</button>
			{expanded && (
				<div className="absolute bottom-full left-0 z-[1000] mb-2 w-[min(22rem,calc(100vw-2rem))] overflow-hidden rounded-xl border border-white/10 bg-[#0B0F16]/95 p-1.5 shadow-[0_12px_32px_rgba(0,0,0,0.4)] backdrop-blur-xl">
					<ul className="max-h-72 list-none space-y-0.5 overflow-y-auto">
						{sources.map((source) => {
							const host = source.url ? sourceHost(source.url) : null
							const content = (
								<>
									{host ? (
										<img
											src={faviconUrl(host)}
											alt=""
											className="mt-0.5 size-4 shrink-0 rounded-full bg-white/10"
											loading="lazy"
											referrerPolicy="no-referrer"
										/>
									) : (
										<BookOpenIcon className="mt-0.5 size-4 shrink-0 text-white/35" />
									)}
									<span className="min-w-0">
										<span className="block truncate text-white/80">
											{source.title}
										</span>
										<span className="block truncate text-[11px] text-white/40">
											{source.subtitle || host || "Saved memory"}
										</span>
									</span>
								</>
							)
							return (
								<li key={source.id}>
									{source.url ? (
										<a
											href={source.url}
											target="_blank"
											rel="noopener noreferrer"
											className="flex items-start gap-2 rounded-lg px-2 py-1.5 transition-colors hover:bg-white/[0.06]"
										>
											{content}
										</a>
									) : (
										<div className="flex items-start gap-2 rounded-lg px-2 py-1.5">
											{content}
										</div>
									)}
								</li>
							)
						})}
					</ul>
				</div>
			)}
		</div>
	)
}

function BashToolDisplay({ part }: { part: ToolCallDisplayPart }) {
	const [expanded, setExpanded] = useState(false)
	const isLoading =
		part.state === "input-streaming" || part.state === "input-available"
	const isDone = part.state === "output-available"
	const isError = part.state === "error" || part.state === "output-error"

	const cmd =
		part.input && typeof part.input === "object" && "cmd" in part.input
			? String((part.input as { cmd: string }).cmd)
			: undefined

	const output =
		isDone && part.output && typeof part.output === "object"
			? (part.output as { stdout?: string; stderr?: string; exitCode?: number })
			: undefined

	const hasOutput =
		output &&
		((output.stdout && output.stdout.length > 0) ||
			(output.stderr && output.stderr.length > 0))
	const errorText = part.errorText
	const hasExpandable = hasOutput || (isError && errorText)

	return (
		<div className="rounded-lg border border-[#1E2128] bg-[#0D121A] text-xs my-1 overflow-hidden font-mono">
			<button
				type="button"
				onClick={() => setExpanded(!expanded)}
				className={cn(
					"flex items-center gap-2 w-full px-3 py-2 cursor-pointer hover:bg-[#141922] transition-colors",
					expanded && hasExpandable && "border-b border-[#1E2128]",
				)}
			>
				{isLoading ? (
					<Loader2 className="size-3 animate-spin text-blue-400 shrink-0" />
				) : (
					<TerminalIcon
						className={cn(
							"size-3 shrink-0",
							isDone
								? output?.exitCode === 0
									? "text-emerald-400"
									: "text-amber-400"
								: isError
									? "text-red-400"
									: "text-white/50",
						)}
					/>
				)}
				<span className={cn("text-white/50", isLoading && "text-blue-400/60")}>
					$
				</span>
				<span
					className={cn(
						"flex-1 text-left truncate",
						isDone
							? output?.exitCode === 0
								? "text-emerald-300"
								: "text-amber-300"
							: isLoading
								? "text-blue-300"
								: isError
									? "text-red-300"
									: "text-white/70",
					)}
				>
					{cmd ?? "…"}
				</span>
				{isLoading && <span className="text-white/30 shrink-0">running…</span>}
				{isDone && !hasOutput && (
					<span className="text-white/30 shrink-0">done</span>
				)}
				{isError && <span className="text-red-400/60 shrink-0">error</span>}
				{hasExpandable &&
					(expanded ? (
						<ChevronDownIcon className="size-3 text-white/30 shrink-0" />
					) : (
						<ChevronRightIcon className="size-3 text-white/30 shrink-0" />
					))}
			</button>

			{expanded && (hasOutput || (isError && errorText)) && (
				<div className="px-3 py-2 space-y-1">
					{output?.stdout && output.stdout.length > 0 && (
						<pre className="text-white/70 bg-[#080B10] rounded p-2 overflow-x-auto max-h-48 overflow-y-auto whitespace-pre-wrap break-all text-[11px]">
							{output.stdout}
						</pre>
					)}
					{output?.stderr && output.stderr.length > 0 && (
						<pre className="text-amber-300/70 bg-[#080B10] rounded p-2 overflow-x-auto max-h-24 overflow-y-auto whitespace-pre-wrap break-all text-[11px]">
							{output.stderr}
						</pre>
					)}
					{isError && errorText && (
						<pre className="text-red-300/90 bg-[#080B10] rounded p-2 overflow-x-auto max-h-24 overflow-y-auto whitespace-pre-wrap break-all text-[11px]">
							{errorText}
						</pre>
					)}
				</div>
			)}
		</div>
	)
}

function ToolCallDisplay({ part }: { part: ToolCallDisplayPart }) {
	const [expanded, setExpanded] = useState(false)
	const toolName = connectorToolName(part)
	if (NOVA_CONNECTOR_TOOLS.has(toolName)) {
		return <NovaConnectorToolDisplay part={part} />
	}
	if (toolName === "bash") {
		return <BashToolDisplay part={part} />
	}
	if (isWebSearchToolName(toolName)) {
		if (part.state === "output-available") return null
		if (part.state === "error" || part.state === "output-error") {
			return (
				<div className="my-1 flex items-center gap-2 text-xs text-red-400/80">
					<GlobeIcon className="size-3.5 shrink-0" />
					<span>Web search failed</span>
				</div>
			)
		}
		return (
			<div className="my-1 flex items-center gap-2 text-xs text-white/50">
				<Loader2 className="size-3.5 shrink-0 animate-spin text-emerald-400/80" />
				<span>Searching the web…</span>
			</div>
		)
	}
	const meta =
		TOOL_META[toolName] ??
		(isWebSearchToolName(toolName)
			? { label: "Web search", icon: GlobeIcon }
			: undefined)
	const Icon = meta?.icon ?? WrenchIcon
	const label = meta?.label ?? toolName

	const isLoading =
		part.state === "input-streaming" || part.state === "input-available"
	const isDone = part.state === "output-available"
	const isError = part.state === "error" || part.state === "output-error"
	const errorText = part.errorText
	if (isMemoryRetrievalToolName(toolName) && isMemoryToolOutputReady(part)) {
		return null
	}

	return (
		<div className="rounded-lg border border-[#1E2128] bg-[#0D121A] text-xs my-1 overflow-hidden">
			<button
				type="button"
				onClick={() => setExpanded(!expanded)}
				className={cn(
					"flex items-center gap-2 w-full px-3 py-2 cursor-pointer hover:bg-[#141922] transition-colors",
					expanded && "border-b border-[#1E2128]",
				)}
			>
				{isLoading ? (
					<Loader2 className="size-3 animate-spin text-blue-400 shrink-0" />
				) : (
					<Icon
						className={cn(
							"size-3 shrink-0",
							isDone
								? "text-emerald-400"
								: isError
									? "text-red-400"
									: "text-white/50",
						)}
					/>
				)}
				<span
					className={cn(
						"font-medium",
						isDone
							? "text-emerald-400"
							: isError
								? "text-red-400"
								: "text-blue-400",
					)}
				>
					{label}
				</span>
				{isLoading && <span className="text-white/40 ml-auto">running…</span>}
				{isDone && <span className="text-white/40 ml-auto">done</span>}
				{isError && <span className="text-red-400/60 ml-auto">error</span>}
				{expanded ? (
					<ChevronDownIcon className="size-3 text-white/30 shrink-0" />
				) : (
					<ChevronRightIcon className="size-3 text-white/30 shrink-0" />
				)}
			</button>

			{expanded && (
				<div className="px-3 py-2 space-y-2">
					{part.input !== undefined && (
						<div>
							<div className="text-white/40 mb-1">Input</div>
							<pre className="text-white/70 bg-[#080B10] rounded p-2 overflow-x-auto max-h-40 overflow-y-auto whitespace-pre-wrap break-all">
								{typeof part.input === "string"
									? part.input
									: JSON.stringify(part.input, null, 2)}
							</pre>
						</div>
					)}
					{isDone && part.output !== undefined && (
						<div>
							<div className="text-white/40 mb-1">Output</div>
							<pre className="text-white/70 bg-[#080B10] rounded p-2 overflow-x-auto max-h-40 overflow-y-auto whitespace-pre-wrap break-all">
								{typeof part.output === "string"
									? part.output
									: JSON.stringify(part.output, null, 2)}
							</pre>
						</div>
					)}
					{isError && errorText && (
						<div>
							<div className="text-red-400/80 mb-1">Error</div>
							<pre className="text-red-300/90 bg-[#080B10] rounded p-2 overflow-x-auto max-h-24 whitespace-pre-wrap break-all text-xs">
								{errorText}
							</pre>
						</div>
					)}
				</div>
			)}
		</div>
	)
}

function SaveResearchToMemoryButton({
	runId,
	apiBase,
	className,
}: {
	runId: string
	apiBase: string
	className?: string
}) {
	const [saveState, setSaveState] = useState<
		"idle" | "saving" | "saved" | "error"
	>("idle")
	const { data } = useQuery({
		queryKey: ["nova-research-memory-status", runId],
		queryFn: async () => {
			const response = await fetch(`${apiBase}/chat/research/${runId}`, {
				credentials: "include",
			})
			if (!response.ok) throw new Error("Could not load research status")
			return (await response.json()) as {
				run?: { reportDocumentId?: string | null }
			}
		},
		staleTime: 30 * 1000,
	})
	const saved = saveState === "saved" || Boolean(data?.run?.reportDocumentId)
	const saving = saveState === "saving"

	const save = async () => {
		if (saved || saving) return
		setSaveState("saving")
		try {
			const response = await fetch(
				`${apiBase}/chat/research/${runId}/save-to-memory`,
				{ method: "POST", credentials: "include" },
			)
			const result = (await response.json().catch(() => null)) as {
				error?: string
				saved?: boolean
			} | null
			if (!response.ok || !result?.saved) {
				throw new Error(result?.error || "Could not save this report")
			}
			setSaveState("saved")
		} catch {
			setSaveState("error")
		}
	}

	const label = saved
		? "Saved to memory"
		: saveState === "error"
			? "Try saving again"
			: "Save to memory"

	return (
		<button
			type="button"
			onClick={() => void save()}
			disabled={saved || saving}
			title={label}
			className={cn(
				"inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] transition-colors",
				saved
					? "text-emerald-400/75"
					: saveState === "error"
						? "text-red-300/75 hover:bg-red-400/10"
						: "text-white/50 hover:bg-white/10 hover:text-white/80",
				className,
			)}
		>
			{saving ? (
				<Loader2 className="size-3.5 animate-spin" />
			) : saved ? (
				<CheckIcon className="size-3.5" />
			) : (
				<BookOpenIcon className="size-3.5" />
			)}
			<span>{saving ? "Saving…" : label}</span>
		</button>
	)
}

interface AgentMessageProps {
	message: UIMessage
	index: number
	messagesLength: number
	hoveredMessageId: string | null
	copiedMessageId: string | null
	messageFeedback: Record<string, "like" | "dislike" | null>
	expandedMemories: string | null
	responseModel: ModelId | null
	onCopy: (messageId: string, text: string) => void
	onLike: (messageId: string) => void
	onDislike: (messageId: string) => void
	onToggleMemories: (messageId: string) => void
}

export function AgentMessage({
	message,
	index,
	messagesLength,
	hoveredMessageId,
	copiedMessageId,
	messageFeedback,
	expandedMemories,
	responseModel,
	onCopy,
	onLike,
	onDislike,
	onToggleMemories,
}: AgentMessageProps) {
	const isLastAgentMessage =
		index === messagesLength - 1 && message.role === "assistant"
	const isHovered = hoveredMessageId === message.id
	const messageText = message.parts
		.filter((part) => part.type === "text")
		.map((part) => part.text)
		.join(" ")
	const researchMetadata = (
		message as UIMessage & {
			metadata?: {
				research?: {
					runId?: string
					title?: string
					artifact?: string
					durationMs?: number
					sources?: NovaResearchSource[]
				}
			}
		}
	).metadata?.research
	const copyText = researchMetadata
		? normalizeResearchMarkdownForDisplay(stripSourceMarkup(messageText))
		: stripSourceMarkup(messageText)
	const memoryOutputs = useMemo(
		() => extractMemoryToolOutputs(message),
		[message],
	)
	const citationIndex = useMemo(() => {
		const index = buildCitationIndex(memoryOutputs)
		for (const source of researchMetadata?.sources ?? []) {
			if (
				source.type !== "memory" ||
				!source.sourceId ||
				!isSafeSourceId(source.sourceId) ||
				index.has(source.sourceId)
			) {
				continue
			}
			index.set(source.sourceId, {
				sourceId: source.sourceId,
				documentId: source.documentId,
				title: source.title ?? source.space,
				type: "memory",
				url: source.url,
			})
		}
		return index
	}, [memoryOutputs, researchMetadata?.sources])
	const allowedSourceIds = useMemo(
		() => new Set(citationIndex.keys()),
		[citationIndex],
	)
	const sourceDocumentIds = useMemo(() => {
		const ids = new Set<string>()
		for (const target of citationIndex.values()) {
			if (target.documentId) ids.add(target.documentId)
			if (target.customId) ids.add(target.customId)
		}
		return [...ids].sort()
	}, [citationIndex])
	const { data: sourceDocuments = [] } = useQuery({
		queryKey: ["chat-source-documents", sourceDocumentIds],
		queryFn: () => fetchDocumentsByIds(sourceDocumentIds),
		enabled: sourceDocumentIds.length > 0,
		staleTime: 5 * 60 * 1000,
	})
	const documentByKnownId = useMemo(
		() => mapDocumentsByKnownIds(sourceDocuments),
		[sourceDocuments],
	)
	const webSources = useMemo(() => {
		const seen = new Set<string>()
		const out: SourceUrlPart[] = []
		for (const part of message.parts) {
			if (part.type !== "source-url") continue
			const source = part as SourceUrlPart
			if (seen.has(source.url)) continue
			seen.add(source.url)
			out.push(source)
		}
		return out
	}, [message.parts])
	const actionSources = useMemo(() => {
		const seen = new Set<string>()
		const sources: ActionSource[] = []
		for (const source of webSources) {
			const id = `web:${source.url}`
			if (seen.has(id)) continue
			seen.add(id)
			sources.push({
				id,
				type: "web",
				title: source.title?.trim() || sourceHost(source.url),
				subtitle: sourceHost(source.url),
				url: source.url,
			})
		}
		for (const source of researchMetadata?.sources ?? []) {
			const id = source.url ? `web:${source.url}` : source.id
			if (seen.has(id)) continue
			seen.add(id)
			sources.push({
				id,
				type: source.type,
				title:
					source.title?.trim() ||
					source.space ||
					(source.type === "memory" ? "Saved memory" : "Web source"),
				subtitle:
					source.space || source.sourceId || source.documentId || undefined,
				url: source.url,
			})
		}
		return sources
	}, [researchMetadata?.sources, webSources])
	const hasAssistantText = message.parts.some(
		(p) => p.type === "text" && (p as { text?: string }).text?.trim(),
	)
	const hasAutoStartKnowledgeConnection = message.parts.some(
		(part) =>
			connectorToolNameFromPart(part) === "startNovaKnowledgeBaseConnection",
	)
	const markdownComponents = useMemo(
		() => makeMarkdownComponents(webSources, citationIndex, documentByKnownId),
		[webSources, citationIndex, documentByKnownId],
	)
	const responseModelLabel = responseModel
		? `${modelNames[responseModel].name} ${modelNames[responseModel].version}`
		: null
	const researchApiBase =
		process.env.NEXT_PUBLIC_BACKEND_URL ?? "https://api.supermemory.ai"
	const researchDuration = formatResearchDuration(researchMetadata?.durationMs)

	return (
		<div className="flex flex-col gap-1 w-full">
			<div className="flex gap-2">
				<div className="flex flex-col gap-2 w-full">
					<RelatedMemories
						message={message}
						expandedMemories={expandedMemories}
						onToggle={onToggleMemories}
					/>
					{researchDuration ? (
						<p className="mb-1 text-xs text-white/40">
							Research completed in{" "}
							<span className="tabular-nums text-white/60">
								{researchDuration}
							</span>
						</p>
					) : null}

					{message.parts.map((part, partIndex) => {
						if (part.type === "source-url") {
							return null
						}
						if (isWebSearchPart(part)) {
							return null
						}
						if (part.type === "source-document") {
							const doc = part as {
								type: "source-document"
								sourceId: string
								title: string
								filename?: string
							}
							return (
								<div
									key={`${message.id}-doc-${doc.sourceId}-${partIndex}`}
									className="rounded-lg border border-[#1E2128] bg-[#0D121A] px-3 py-2 text-xs my-1"
								>
									<div className="text-white/40 mb-0.5">Document</div>
									<div className="text-white/80">{doc.title}</div>
									{doc.filename && (
										<div className="text-white/50 text-[11px] mt-0.5">
											{doc.filename}
										</div>
									)}
								</div>
							)
						}
						if (part.type === "text") {
							if (hasAutoStartKnowledgeConnection) return null
							// Skip fragments mid-run — source-url citations split one answer into
							// many text parts; rendering each separately tears markdown (lists etc.).
							let prev = partIndex - 1
							while (prev >= 0 && message.parts[prev]?.type === "source-url") {
								prev--
							}
							if (prev >= 0 && message.parts[prev]?.type === "text") {
								return null
							}
							let runText = ""
							for (let j = partIndex; j < message.parts.length; j++) {
								const p = message.parts[j]
								if (p?.type === "text") runText += p.text
								else if (p?.type === "source-url") continue
								else break
							}
							return (
								<div
									key={`${message.id}-${partIndex}`}
									className={cn("text-sm text-white/90 chat-markdown-content")}
								>
									<Streamdown components={markdownComponents}>
										{researchMetadata
											? normalizeResearchMarkdownForDisplay(
													parseSourceAnnotatedMarkdown(
														runText,
														allowedSourceIds,
													).markdown,
												)
											: parseSourceAnnotatedMarkdown(runText, allowedSourceIds)
													.markdown}
									</Streamdown>
								</div>
							)
						}
						if (part.type === "dynamic-tool") {
							if (shouldSkipNovaConnectorPart(message.parts, partIndex)) {
								return null
							}
							const dt = part as {
								type: "dynamic-tool"
								toolName: string
								toolCallId: string
								state?: string
								input?: unknown
								output?: unknown
								errorText?: string
							}
							const displayState =
								dt.state === "output-error" ? "error" : dt.state
							return (
								<ToolCallDisplay
									key={`${message.id}-${dt.toolCallId}-${partIndex}`}
									part={{
										type: `tool-${dt.toolName}`,
										state: displayState,
										input: dt.input,
										output:
											dt.state === "output-available" ? dt.output : undefined,
										toolCallId: dt.toolCallId,
										errorText: dt.errorText,
									}}
								/>
							)
						}
						if (part.type.startsWith("tool-")) {
							if (shouldSkipNovaConnectorPart(message.parts, partIndex)) {
								return null
							}
							return (
								<ToolCallDisplay
									key={`${message.id}-${partIndex}`}
									part={part as ToolCallDisplayPart}
								/>
							)
						}
						return null
					})}
				</div>
			</div>
			{hasAssistantText && !hasAutoStartKnowledgeConnection && (
				<div className="flex min-h-7 items-center gap-2">
					<MessageActions
						messageId={message.id}
						messageText={copyText}
						isLastMessage={isLastAgentMessage}
						isHovered={isHovered}
						copiedMessageId={copiedMessageId}
						messageFeedback={messageFeedback}
						onCopy={onCopy}
						onLike={onLike}
						onDislike={onDislike}
					/>
					{actionSources.length > 0 && (
						<div
							className={cn(
								"transition-opacity duration-200",
								isHovered || isLastAgentMessage ? "opacity-100" : "opacity-0",
							)}
						>
							<SourcesPill sources={actionSources} />
						</div>
					)}
					{researchMetadata?.runId ? (
						<>
							<SaveResearchToMemoryButton
								runId={researchMetadata.runId}
								apiBase={researchApiBase}
								className={
									isHovered || isLastAgentMessage ? "opacity-100" : "opacity-0"
								}
							/>
							<a
								href={`${researchApiBase}/chat/research/${researchMetadata.runId}/report.md`}
								download
								title="Download research as Markdown"
								className={cn(
									"rounded p-1.5 text-white/50 transition-colors hover:bg-white/10 hover:text-white/80",
									isHovered || isLastAgentMessage ? "opacity-100" : "opacity-0",
								)}
							>
								<DownloadIcon className="size-3.5" />
							</a>
						</>
					) : null}
					{responseModelLabel && (
						<span
							className={cn(
								"text-[10px] leading-none text-white/25 transition-opacity duration-200",
								isHovered ? "opacity-100" : "opacity-0",
							)}
						>
							{responseModelLabel}
						</span>
					)}
				</div>
			)}
		</div>
	)
}