storkit/frontend/src/components/Chat.tsx

import * as React from "react";
import Markdown from "react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
import { api, ChatWebSocket } from "../api/client";
import type { ReviewStory, UpcomingStory } from "../api/workflow";
import { workflowApi } from "../api/workflow";
import type { Message, ProviderConfig, ToolCall } from "../types";
import { AgentPanel } from "./AgentPanel";
import { ChatHeader } from "./ChatHeader";
import { GatePanel } from "./GatePanel";
import { ReviewPanel } from "./ReviewPanel";
import { TodoPanel } from "./TodoPanel";
import { UpcomingPanel } from "./UpcomingPanel";

const { useCallback, useEffect, useRef, useState } = React;

interface ChatProps {
	projectPath: string;
	onCloseProject: () => void;
}

interface GateState {
	canAccept: boolean;
	reasons: string[];
	warning: string | null;
	summary: {
		total: number;
		passed: number;
		failed: number;
	};
	missingCategories: string[];
	coverageReport: {
		currentPercent: number;
		thresholdPercent: number;
		baselinePercent: number | null;
	} | null;
}

export function Chat({ projectPath, onCloseProject }: ChatProps) {
	const [messages, setMessages] = useState<Message[]>([]);
	const [input, setInput] = useState("");
	const [loading, setLoading] = useState(false);
	const [model, setModel] = useState("llama3.1");
	const [enableTools, setEnableTools] = useState(true);
	const [availableModels, setAvailableModels] = useState<string[]>([]);
	const [claudeModels, setClaudeModels] = useState<string[]>([]);
	const [streamingContent, setStreamingContent] = useState("");
	const [showApiKeyDialog, setShowApiKeyDialog] = useState(false);
	const [apiKeyInput, setApiKeyInput] = useState("");
	const [hasAnthropicKey, setHasAnthropicKey] = useState(false);
	const [gateState, setGateState] = useState<GateState | null>(null);
	const [gateError, setGateError] = useState<string | null>(null);
	const [isGateLoading, setIsGateLoading] = useState(false);
	const [reviewQueue, setReviewQueue] = useState<ReviewStory[]>([]);
	const [reviewError, setReviewError] = useState<string | null>(null);
	const [isReviewLoading, setIsReviewLoading] = useState(false);
	const [proceedingStoryId, setProceedingStoryId] = useState<string | null>(
		null,
	);
	const [proceedError, setProceedError] = useState<string | null>(null);
	const [proceedSuccess, setProceedSuccess] = useState<string | null>(null);
	const [lastReviewRefresh, setLastReviewRefresh] = useState<Date | null>(null);
	const [lastGateRefresh, setLastGateRefresh] = useState<Date | null>(null);
	const [isCollectingCoverage, setIsCollectingCoverage] = useState(false);
	const [coverageError, setCoverageError] = useState<string | null>(null);
	const [storyTodos, setStoryTodos] = useState<
		{ storyId: string; storyName: string | null; items: string[] }[]
	>([]);
	const [todoError, setTodoError] = useState<string | null>(null);
	const [isTodoLoading, setIsTodoLoading] = useState(false);
	const [lastTodoRefresh, setLastTodoRefresh] = useState<Date | null>(null);
	const [upcomingStories, setUpcomingStories] = useState<UpcomingStory[]>([]);
	const [upcomingError, setUpcomingError] = useState<string | null>(null);
	const [isUpcomingLoading, setIsUpcomingLoading] = useState(false);
	const [lastUpcomingRefresh, setLastUpcomingRefresh] = useState<Date | null>(
		null,
	);

	const storyId = "26_establish_tdd_workflow_and_gates";
	const gateStatusColor = isGateLoading
		? "#aaa"
		: gateState?.canAccept
			? "#7ee787"
			: "#ff7b72";
	const gateStatusLabel = isGateLoading
		? "Checking..."
		: gateState?.canAccept
			? "Ready to accept"
			: "Blocked";

	const wsRef = useRef<ChatWebSocket | null>(null);
	const messagesEndRef = useRef<HTMLDivElement>(null);
	const inputRef = useRef<HTMLInputElement>(null);
	const scrollContainerRef = useRef<HTMLDivElement>(null);
	const shouldAutoScrollRef = useRef(true);
	const lastScrollTopRef = useRef(0);
	const userScrolledUpRef = useRef(false);
	const pendingMessageRef = useRef<string>("");

	const estimateTokens = (text: string): number => Math.ceil(text.length / 4);

	const getContextWindowSize = (modelName: string): number => {
		if (modelName.startsWith("claude-")) return 200000;
		if (modelName.includes("llama3")) return 8192;
		if (modelName.includes("qwen2.5")) return 32768;
		if (modelName.includes("deepseek")) return 16384;
		return 8192;
	};

	const calculateContextUsage = (): {
		used: number;
		total: number;
		percentage: number;
	} => {
		let totalTokens = 0;

		totalTokens += 200;

		for (const msg of messages) {
			totalTokens += estimateTokens(msg.content);
			if (msg.tool_calls) {
				totalTokens += estimateTokens(JSON.stringify(msg.tool_calls));
			}
		}

		if (streamingContent) {
			totalTokens += estimateTokens(streamingContent);
		}

		const contextWindow = getContextWindowSize(model);
		const percentage = Math.round((totalTokens / contextWindow) * 100);

		return {
			used: totalTokens,
			total: contextWindow,
			percentage,
		};
	};

	const contextUsage = calculateContextUsage();

	useEffect(() => {
		api
			.getOllamaModels()
			.then(async (models) => {
				if (models.length > 0) {
					const sortedModels = models.sort((a, b) =>
						a.toLowerCase().localeCompare(b.toLowerCase()),
					);
					setAvailableModels(sortedModels);

					try {
						const savedModel = await api.getModelPreference();
						if (savedModel) {
							setModel(savedModel);
						} else if (sortedModels.length > 0) {
							setModel(sortedModels[0]);
						}
					} catch (e) {
						console.error(e);
					}
				}
			})
			.catch((err) => console.error(err));

		api
			.getAnthropicApiKeyExists()
			.then((exists) => {
				setHasAnthropicKey(exists);
			})
			.catch((err) => {
				console.error(err);
				setHasAnthropicKey(false);
			});

		api
			.getAnthropicModels()
			.then((models) => {
				if (models.length > 0) {
					const sortedModels = models.sort((a, b) =>
						a.toLowerCase().localeCompare(b.toLowerCase()),
					);
					setClaudeModels(sortedModels);
				} else {
					setClaudeModels([]);
				}
			})
			.catch((err) => {
				console.error(err);
				setClaudeModels([]);
			});
	}, []);

	useEffect(() => {
		let active = true;
		setIsGateLoading(true);
		setGateError(null);

		workflowApi
			.getAcceptance({ story_id: storyId })
			.then((response) => {
				if (!active) return;
				setGateState({
					canAccept: response.can_accept,
					reasons: response.reasons,
					warning: response.warning ?? null,
					summary: response.summary,
					missingCategories: response.missing_categories,
					coverageReport: response.coverage_report
						? {
								currentPercent: response.coverage_report.current_percent,
								thresholdPercent: response.coverage_report.threshold_percent,
								baselinePercent:
									response.coverage_report.baseline_percent ?? null,
							}
						: null,
				});
				setLastGateRefresh(new Date());
			})
			.catch((error) => {
				if (!active) return;
				const message =
					error instanceof Error
						? error.message
						: "Failed to load workflow gates.";
				setGateError(message);
				setGateState(null);
			})
			.finally(() => {
				if (active) {
					setIsGateLoading(false);
				}
			});

		return () => {
			active = false;
		};
	}, [storyId]);

	useEffect(() => {
		let active = true;
		setIsReviewLoading(true);
		setReviewError(null);

		workflowApi
			.getReviewQueueAll()
			.then((response) => {
				if (!active) return;
				setReviewQueue(response.stories);
				setLastReviewRefresh(new Date());
			})
			.catch((error) => {
				if (!active) return;
				const message =
					error instanceof Error
						? error.message
						: "Failed to load review queue.";
				setReviewError(message);
				setReviewQueue([]);
			})
			.finally(() => {
				if (active) {
					setIsReviewLoading(false);
				}
			});

		return () => {
			active = false;
		};
	}, []);

	useEffect(() => {
		let active = true;
		setIsTodoLoading(true);
		setTodoError(null);

		workflowApi
			.getStoryTodos()
			.then((response) => {
				if (!active) return;
				setStoryTodos(
					response.stories.map((s) => ({
						storyId: s.story_id,
						storyName: s.story_name,
						items: s.todos,
					})),
				);
				setLastTodoRefresh(new Date());
			})
			.catch((error) => {
				if (!active) return;
				const message =
					error instanceof Error
						? error.message
						: "Failed to load story TODOs.";
				setTodoError(message);
				setStoryTodos([]);
			})
			.finally(() => {
				if (active) {
					setIsTodoLoading(false);
				}
			});

		return () => {
			active = false;
		};
	}, []);

	const refreshTodos = async () => {
		setIsTodoLoading(true);
		setTodoError(null);

		try {
			const response = await workflowApi.getStoryTodos();
			setStoryTodos(
				response.stories.map((s) => ({
					storyId: s.story_id,
					storyName: s.story_name,
					items: s.todos,
				})),
			);
			setLastTodoRefresh(new Date());
		} catch (error) {
			const message =
				error instanceof Error ? error.message : "Failed to load story TODOs.";
			setTodoError(message);
			setStoryTodos([]);
		} finally {
			setIsTodoLoading(false);
		}
	};

	const refreshGateState = async (targetStoryId: string = storyId) => {
		setIsGateLoading(true);
		setGateError(null);

		try {
			const response = await workflowApi.getAcceptance({
				story_id: targetStoryId,
			});
			setGateState({
				canAccept: response.can_accept,
				reasons: response.reasons,
				warning: response.warning ?? null,
				summary: response.summary,
				missingCategories: response.missing_categories,
				coverageReport: response.coverage_report
					? {
							currentPercent: response.coverage_report.current_percent,
							thresholdPercent: response.coverage_report.threshold_percent,
							baselinePercent:
								response.coverage_report.baseline_percent ?? null,
						}
					: null,
			});
			setLastGateRefresh(new Date());
		} catch (error) {
			const message =
				error instanceof Error
					? error.message
					: "Failed to load workflow gates.";
			setGateError(message);
			setGateState(null);
		} finally {
			setIsGateLoading(false);
		}
	};

	const handleCollectCoverage = async () => {
		setIsCollectingCoverage(true);
		setCoverageError(null);
		try {
			await workflowApi.collectCoverage({ story_id: storyId });
			await refreshGateState(storyId);
		} catch (error) {
			const message =
				error instanceof Error ? error.message : "Failed to collect coverage.";
			setCoverageError(message);
		} finally {
			setIsCollectingCoverage(false);
		}
	};

	useEffect(() => {
		let active = true;
		setIsUpcomingLoading(true);
		setUpcomingError(null);

		workflowApi
			.getUpcomingStories()
			.then((response) => {
				if (!active) return;
				setUpcomingStories(response.stories);
				setLastUpcomingRefresh(new Date());
			})
			.catch((error) => {
				if (!active) return;
				const message =
					error instanceof Error
						? error.message
						: "Failed to load upcoming stories.";
				setUpcomingError(message);
				setUpcomingStories([]);
			})
			.finally(() => {
				if (active) {
					setIsUpcomingLoading(false);
				}
			});

		return () => {
			active = false;
		};
	}, []);

	const refreshUpcomingStories = async () => {
		setIsUpcomingLoading(true);
		setUpcomingError(null);

		try {
			const response = await workflowApi.getUpcomingStories();
			setUpcomingStories(response.stories);
			setLastUpcomingRefresh(new Date());
		} catch (error) {
			const message =
				error instanceof Error
					? error.message
					: "Failed to load upcoming stories.";
			setUpcomingError(message);
			setUpcomingStories([]);
		} finally {
			setIsUpcomingLoading(false);
		}
	};

	const refreshReviewQueue = async () => {
		setIsReviewLoading(true);
		setReviewError(null);

		try {
			const response = await workflowApi.getReviewQueueAll();
			setReviewQueue(response.stories);
			setLastReviewRefresh(new Date());
		} catch (error) {
			const message =
				error instanceof Error ? error.message : "Failed to load review queue.";
			setReviewError(message);
			setReviewQueue([]);
		} finally {
			setIsReviewLoading(false);
		}
	};

	const handleProceed = async (storyIdToProceed: string) => {
		setProceedingStoryId(storyIdToProceed);
		setProceedError(null);
		setProceedSuccess(null);
		try {
			await workflowApi.ensureAcceptance({
				story_id: storyIdToProceed,
			});
			setProceedSuccess(`Proceeding with ${storyIdToProceed}.`);
			await refreshReviewQueue();
			if (storyIdToProceed === storyId) {
				await refreshGateState(storyId);
			}
		} catch (error) {
			const message =
				error instanceof Error
					? error.message
					: "Failed to proceed with review.";
			setProceedError(message);
		} finally {
			setProceedingStoryId(null);
		}
	};

	useEffect(() => {
		const ws = new ChatWebSocket();
		wsRef.current = ws;

		ws.connect({
			onToken: (content) => {
				setStreamingContent((prev: string) => prev + content);
			},
			onUpdate: (history) => {
				setMessages(history);
				setStreamingContent("");
				const last = history[history.length - 1];
				if (last?.role === "assistant" && !last.tool_calls) {
					setLoading(false);
				}
			},
			onError: (message) => {
				console.error("WebSocket error:", message);
				setLoading(false);
			},
		});

		return () => {
			ws.close();
			wsRef.current = null;
		};
	}, []);

	const scrollToBottom = useCallback(() => {
		const element = scrollContainerRef.current;
		if (element) {
			element.scrollTop = element.scrollHeight;
			lastScrollTopRef.current = element.scrollHeight;
		}
	}, []);

	const handleScroll = () => {
		const element = scrollContainerRef.current;
		if (!element) return;

		const currentScrollTop = element.scrollTop;
		const isAtBottom =
			element.scrollHeight - element.scrollTop - element.clientHeight < 5;

		if (currentScrollTop < lastScrollTopRef.current) {
			userScrolledUpRef.current = true;
			shouldAutoScrollRef.current = false;
		}

		if (isAtBottom) {
			userScrolledUpRef.current = false;
			shouldAutoScrollRef.current = true;
		}

		lastScrollTopRef.current = currentScrollTop;
	};

	const autoScrollKey = messages.length + streamingContent.length;

	useEffect(() => {
		if (
			autoScrollKey >= 0 &&
			shouldAutoScrollRef.current &&
			!userScrolledUpRef.current
		) {
			scrollToBottom();
		}
	}, [autoScrollKey, scrollToBottom]);

	useEffect(() => {
		inputRef.current?.focus();
	}, []);

	const cancelGeneration = async () => {
		try {
			wsRef.current?.cancel();
			await api.cancelChat();

			if (streamingContent) {
				setMessages((prev: Message[]) => [
					...prev,
					{ role: "assistant", content: streamingContent },
				]);
				setStreamingContent("");
			}

			setLoading(false);
		} catch (e) {
			console.error("Failed to cancel chat:", e);
		}
	};

	const sendMessage = async (messageOverride?: string) => {
		const messageToSend = messageOverride ?? input;
		if (!messageToSend.trim() || loading) return;

		const isClaudeCode = model === "claude-code-pty";
		if (!isClaudeCode && model.startsWith("claude-")) {
			const hasKey = await api.getAnthropicApiKeyExists();
			if (!hasKey) {
				pendingMessageRef.current = messageToSend;
				setShowApiKeyDialog(true);
				return;
			}
		}

		const userMsg: Message = { role: "user", content: messageToSend };
		const newHistory = [...messages, userMsg];

		setMessages(newHistory);
		if (!messageOverride || messageOverride === input) {
			setInput("");
		}
		setLoading(true);
		setStreamingContent("");

		try {
			const provider = isClaudeCode
				? "claude-code"
				: model.startsWith("claude-")
					? "anthropic"
					: "ollama";
			const config: ProviderConfig = {
				provider,
				model,
				base_url: "http://localhost:11434",
				enable_tools: enableTools,
			};

			wsRef.current?.sendChat(newHistory, config);
		} catch (e) {
			console.error("Chat error:", e);
			const errorMessage = String(e);
			if (!errorMessage.includes("Chat cancelled by user")) {
				setMessages((prev: Message[]) => [
					...prev,
					{ role: "assistant", content: `**Error:** ${e}` },
				]);
			}
			setLoading(false);
		}
	};

	const handleSaveApiKey = async () => {
		if (!apiKeyInput.trim()) return;

		try {
			await api.setAnthropicApiKey(apiKeyInput);
			setShowApiKeyDialog(false);
			setApiKeyInput("");

			const pendingMessage = pendingMessageRef.current;
			pendingMessageRef.current = "";

			if (pendingMessage.trim()) {
				sendMessage(pendingMessage);
			}
		} catch (e) {
			console.error("Failed to save API key:", e);
			alert(`Failed to save API key: ${e}`);
		}
	};

	const clearSession = async () => {
		const confirmed = window.confirm(
			"Are you sure? This will clear all messages and reset the conversation context.",
		);

		if (confirmed) {
			try {
				await api.cancelChat();
				wsRef.current?.cancel();
			} catch (e) {
				console.error("Failed to cancel chat:", e);
			}

			setMessages([]);
			setStreamingContent("");
			setLoading(false);
		}
	};

	return (
		<div
			className="chat-container"
			style={{
				display: "flex",
				flexDirection: "column",
				height: "100%",
				backgroundColor: "#171717",
				color: "#ececec",
			}}
		>
			<ChatHeader
				projectPath={projectPath}
				onCloseProject={onCloseProject}
				contextUsage={contextUsage}
				onClearSession={clearSession}
				model={model}
				availableModels={availableModels}
				claudeModels={claudeModels}
				hasAnthropicKey={hasAnthropicKey}
				onModelChange={(newModel) => {
					setModel(newModel);
					api.setModelPreference(newModel).catch(console.error);
				}}
				enableTools={enableTools}
				onToggleTools={setEnableTools}
			/>

			<div
				style={{
					maxWidth: "768px",
					margin: "0 auto",
					width: "100%",
					padding: "12px 24px 0",
				}}
			>
				<div
					style={{
						display: "flex",
						flexDirection: "column",
						gap: "12px",
					}}
				>
					<ReviewPanel
						reviewQueue={reviewQueue}
						isReviewLoading={isReviewLoading}
						reviewError={reviewError}
						proceedingStoryId={proceedingStoryId}
						storyId={storyId}
						isGateLoading={isGateLoading}
						proceedError={proceedError}
						proceedSuccess={proceedSuccess}
						lastReviewRefresh={lastReviewRefresh}
						onRefresh={refreshReviewQueue}
						onProceed={handleProceed}
					/>

					<GatePanel
						gateState={gateState}
						gateStatusLabel={gateStatusLabel}
						gateStatusColor={gateStatusColor}
						isGateLoading={isGateLoading}
						gateError={gateError}
						coverageError={coverageError}
						lastGateRefresh={lastGateRefresh}
						onRefresh={() => refreshGateState(storyId)}
						onCollectCoverage={handleCollectCoverage}
						isCollectingCoverage={isCollectingCoverage}
					/>

					<TodoPanel
						todos={storyTodos}
						isTodoLoading={isTodoLoading}
						todoError={todoError}
						lastTodoRefresh={lastTodoRefresh}
						onRefresh={refreshTodos}
					/>

					<UpcomingPanel
						stories={upcomingStories}
						isLoading={isUpcomingLoading}
						error={upcomingError}
						lastRefresh={lastUpcomingRefresh}
						onRefresh={refreshUpcomingStories}
					/>

					<AgentPanel stories={upcomingStories} />
				</div>
			</div>

			<div
				ref={scrollContainerRef}
				onScroll={handleScroll}
				style={{
					flex: 1,
					overflowY: "auto",
					padding: "20px 0",
					display: "flex",
					flexDirection: "column",
					gap: "24px",
				}}
			>
				<div
					style={{
						maxWidth: "768px",
						margin: "0 auto",
						width: "100%",
						padding: "0 24px",
						display: "flex",
						flexDirection: "column",
						gap: "24px",
					}}
				>
					{messages.map((msg: Message, idx: number) => (
						<div
							key={`msg-${idx}-${msg.role}-${msg.content.substring(0, 20)}`}
							style={{
								display: "flex",
								flexDirection: "column",
								alignItems: msg.role === "user" ? "flex-end" : "flex-start",
							}}
						>
							<div
								style={{
									maxWidth: "100%",
									padding: msg.role === "user" ? "10px 16px" : "0",
									borderRadius: msg.role === "user" ? "20px" : "0",
									background:
										msg.role === "user"
											? "#2f2f2f"
											: msg.role === "tool"
												? "#222"
												: "transparent",
									color: "#ececec",
									border: msg.role === "tool" ? "1px solid #333" : "none",
									fontFamily: msg.role === "tool" ? "monospace" : "inherit",
									fontSize: msg.role === "tool" ? "0.85em" : "1em",
									fontWeight: "500",
									whiteSpace: msg.role === "tool" ? "pre-wrap" : "normal",
									lineHeight: "1.6",
								}}
							>
								{msg.role === "user" ? (
									msg.content
								) : msg.role === "tool" ? (
									<details style={{ cursor: "pointer" }}>
										<summary
											style={{
												color: "#aaa",
												fontSize: "0.9em",
												marginBottom: "8px",
												listStyle: "none",
												display: "flex",
												alignItems: "center",
												gap: "6px",
											}}
										>
											<span style={{ fontSize: "0.8em" }}>▶</span>
											<span>
												Tool Output
												{msg.tool_call_id && ` (${msg.tool_call_id})`}
											</span>
										</summary>
										<pre
											style={{
												maxHeight: "300px",
												overflow: "auto",
												margin: 0,
												padding: "8px",
												background: "#1a1a1a",
												borderRadius: "4px",
												fontSize: "0.85em",
												whiteSpace: "pre-wrap",
												wordBreak: "break-word",
											}}
										>
											{msg.content}
										</pre>
									</details>
								) : (
									<div className="markdown-body">
										<Markdown
											components={{
												// eslint-disable-next-line @typescript-eslint/no-explicit-any
												// biome-ignore lint/suspicious/noExplicitAny: react-markdown requires any for component props
												code: ({ className, children, ...props }: any) => {
													const match = /language-(\w+)/.exec(className || "");
													const isInline = !className;
													return !isInline && match ? (
														<SyntaxHighlighter
															// biome-ignore lint/suspicious/noExplicitAny: oneDark style types are incompatible
															style={oneDark as any}
															language={match[1]}
															PreTag="div"
														>
															{String(children).replace(/\n$/, "")}
														</SyntaxHighlighter>
													) : (
														<code className={className} {...props}>
															{children}
														</code>
													);
												},
											}}
										>
											{msg.content}
										</Markdown>
									</div>
								)}

								{msg.tool_calls && (
									<div
										style={{
											marginTop: "12px",
											fontSize: "0.85em",
											color: "#aaa",
											display: "flex",
											flexDirection: "column",
											gap: "8px",
										}}
									>
										{msg.tool_calls.map((tc: ToolCall, i: number) => {
											let argsSummary = "";
											try {
												const args = JSON.parse(tc.function.arguments);
												const firstKey = Object.keys(args)[0];
												if (firstKey && args[firstKey]) {
													argsSummary = String(args[firstKey]);
													if (argsSummary.length > 50) {
														argsSummary = `${argsSummary.substring(0, 47)}...`;
													}
												}
											} catch (_e) {
												// ignore
											}

											return (
												<div
													key={`tool-${i}-${tc.function.name}`}
													style={{
														display: "flex",
														alignItems: "center",
														gap: "8px",
														fontFamily: "monospace",
													}}
												>
													<span style={{ color: "#888" }}>▶</span>
													<span
														style={{
															background: "#333",
															padding: "2px 6px",
															borderRadius: "4px",
														}}
													>
														{tc.function.name}
														{argsSummary && `(${argsSummary})`}
													</span>
												</div>
											);
										})}
									</div>
								)}
							</div>
						</div>
					))}
					{loading && streamingContent && (
						<div
							style={{
								display: "flex",
								flexDirection: "column",
								alignItems: "flex-start",
							}}
						>
							<div
								style={{
									maxWidth: "85%",
									padding: "16px 20px",
									borderRadius: "12px",
									background: "#262626",
									color: "#fff",
									border: "1px solid #404040",
									fontFamily: "system-ui, -apple-system, sans-serif",
									fontSize: "0.95rem",
									fontWeight: 400,
									whiteSpace: "pre-wrap",
									lineHeight: 1.6,
								}}
							>
								<Markdown
									components={{
										// eslint-disable-next-line @typescript-eslint/no-explicit-any
										// biome-ignore lint/suspicious/noExplicitAny: react-markdown requires any for component props
										code: ({ className, children, ...props }: any) => {
											const match = /language-(\w+)/.exec(className || "");
											const isInline = !className;
											return !isInline && match ? (
												<SyntaxHighlighter
													// biome-ignore lint/suspicious/noExplicitAny: oneDark style types are incompatible
													style={oneDark as any}
													language={match[1]}
													PreTag="div"
												>
													{String(children).replace(/\n$/, "")}
												</SyntaxHighlighter>
											) : (
												<code className={className} {...props}>
													{children}
												</code>
											);
										},
									}}
								>
									{streamingContent}
								</Markdown>
							</div>
						</div>
					)}
					{loading && !streamingContent && (
						<div
							style={{
								alignSelf: "flex-start",
								color: "#888",
								fontSize: "0.9em",
								marginTop: "10px",
							}}
						>
							<span className="pulse">Thinking...</span>
						</div>
					)}
					<div ref={messagesEndRef} />
				</div>
			</div>

			<div
				style={{
					padding: "24px",
					background: "#171717",
					display: "flex",
					justifyContent: "center",
				}}
			>
				<div
					style={{
						maxWidth: "768px",
						width: "100%",
						display: "flex",
						gap: "8px",
						alignItems: "center",
					}}
				>
					<input
						ref={inputRef}
						value={input}
						onChange={(e) => setInput(e.target.value)}
						onKeyDown={(e) => {
							if (e.key === "Enter") {
								sendMessage();
							}
						}}
						placeholder="Send a message..."
						style={{
							flex: 1,
							padding: "14px 20px",
							borderRadius: "24px",
							border: "1px solid #333",
							outline: "none",
							fontSize: "1rem",
							fontWeight: "500",
							background: "#2f2f2f",
							color: "#ececec",
							boxShadow: "0 2px 6px rgba(0,0,0,0.02)",
						}}
					/>
					<button
						type="button"
						onClick={loading ? cancelGeneration : () => sendMessage()}
						disabled={!loading && !input.trim()}
						style={{
							background: "#ececec",
							color: "black",
							border: "none",
							borderRadius: "50%",
							width: "32px",
							height: "32px",
							display: "flex",
							alignItems: "center",
							justifyContent: "center",
							cursor: "pointer",
							opacity: !loading && !input.trim() ? 0.5 : 1,
							flexShrink: 0,
						}}
					>
						{loading ? "■" : "↑"}
					</button>
				</div>
			</div>

			{showApiKeyDialog && (
				<div
					style={{
						position: "fixed",
						top: 0,
						left: 0,
						right: 0,
						bottom: 0,
						backgroundColor: "rgba(0, 0, 0, 0.7)",
						display: "flex",
						alignItems: "center",
						justifyContent: "center",
						zIndex: 1000,
					}}
				>
					<div
						style={{
							backgroundColor: "#2f2f2f",
							padding: "32px",
							borderRadius: "12px",
							maxWidth: "500px",
							width: "90%",
							border: "1px solid #444",
						}}
					>
						<h2 style={{ marginTop: 0, color: "#ececec" }}>
							Enter Anthropic API Key
						</h2>
						<p
							style={{ color: "#aaa", fontSize: "0.9em", marginBottom: "20px" }}
						>
							To use Claude models, please enter your Anthropic API key. Your
							key will be stored server-side and reused across sessions.
						</p>
						<input
							type="password"
							value={apiKeyInput}
							onChange={(e) => setApiKeyInput(e.target.value)}
							onKeyDown={(e) => e.key === "Enter" && handleSaveApiKey()}
							placeholder="sk-ant-..."
							style={{
								width: "100%",
								padding: "12px",
								borderRadius: "8px",
								border: "1px solid #555",
								backgroundColor: "#1a1a1a",
								color: "#ececec",
								fontSize: "1em",
								marginBottom: "20px",
								outline: "none",
							}}
						/>
						<div
							style={{
								display: "flex",
								gap: "12px",
								justifyContent: "flex-end",
							}}
						>
							<button
								type="button"
								onClick={() => {
									setShowApiKeyDialog(false);
									setApiKeyInput("");
									pendingMessageRef.current = "";
								}}
								style={{
									padding: "10px 20px",
									borderRadius: "8px",
									border: "1px solid #555",
									backgroundColor: "transparent",
									color: "#aaa",
									cursor: "pointer",
									fontSize: "0.9em",
								}}
							>
								Cancel
							</button>
							<button
								type="button"
								onClick={handleSaveApiKey}
								disabled={!apiKeyInput.trim()}
								style={{
									padding: "10px 20px",
									borderRadius: "8px",
									border: "none",
									backgroundColor: apiKeyInput.trim() ? "#ececec" : "#555",
									color: apiKeyInput.trim() ? "#000" : "#888",
									cursor: apiKeyInput.trim() ? "pointer" : "not-allowed",
									fontSize: "0.9em",
								}}
							>
								Save Key
							</button>
						</div>
					</div>
				</div>
			)}
		</div>
	);
}