storkit/frontend/src/components/SideQuestionOverlay.tsx

import * as React from "react";
import Markdown from "react-markdown";

const { useEffect, useRef } = React;

interface SideQuestionOverlayProps {
	question: string;
	/** Streaming response text. Empty while loading. */
	response: string;
	loading: boolean;
	onDismiss: () => void;
}

/**
 * Dismissible overlay that shows a /btw side question and its streamed response.
 * The question and response are NOT part of the main conversation history.
 * Dismiss with Escape, Enter, or Space.
 */
export function SideQuestionOverlay({
	question,
	response,
	loading,
	onDismiss,
}: SideQuestionOverlayProps) {
	const dismissRef = useRef(onDismiss);
	dismissRef.current = onDismiss;

	useEffect(() => {
		const handler = (e: KeyboardEvent) => {
			if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
				e.preventDefault();
				dismissRef.current();
			}
		};
		window.addEventListener("keydown", handler);
		return () => window.removeEventListener("keydown", handler);
	}, []);

	return (
		// biome-ignore lint/a11y/noStaticElementInteractions: backdrop dismiss is supplementary; keyboard handled via window keydown
		// biome-ignore lint/a11y/useKeyWithClickEvents: keyboard dismiss handled via window keydown listener
		<div
			data-testid="side-question-overlay"
			onClick={onDismiss}
			style={{
				position: "fixed",
				inset: 0,
				background: "rgba(0,0,0,0.55)",
				display: "flex",
				alignItems: "center",
				justifyContent: "center",
				zIndex: 1000,
			}}
		>
			{/* biome-ignore lint/a11y/useKeyWithClickEvents: stop-propagation only; no real interaction */}
			{/* biome-ignore lint/a11y/noStaticElementInteractions: stop-propagation only; no real interaction */}
			<div
				data-testid="side-question-panel"
				onClick={(e) => e.stopPropagation()}
				style={{
					background: "#2f2f2f",
					border: "1px solid #444",
					borderRadius: "12px",
					padding: "24px",
					maxWidth: "640px",
					width: "90vw",
					maxHeight: "60vh",
					display: "flex",
					flexDirection: "column",
					gap: "16px",
					boxShadow: "0 8px 32px rgba(0,0,0,0.5)",
				}}
			>
				{/* Header */}
				<div
					style={{
						display: "flex",
						alignItems: "flex-start",
						justifyContent: "space-between",
						gap: "12px",
					}}
				>
					<div>
						<span
							style={{
								display: "block",
								fontSize: "0.7rem",
								fontWeight: 700,
								letterSpacing: "0.08em",
								textTransform: "uppercase",
								color: "#a0d4a0",
								marginBottom: "4px",
							}}
						>
							/btw
						</span>
						<span
							style={{
								fontSize: "1rem",
								color: "#ececec",
								fontWeight: 500,
							}}
						>
							{question}
						</span>
					</div>
					<button
						type="button"
						onClick={onDismiss}
						title="Dismiss (Escape, Enter, or Space)"
						style={{
							background: "none",
							border: "none",
							color: "#666",
							cursor: "pointer",
							fontSize: "1.1rem",
							padding: "2px 6px",
							borderRadius: "4px",
							flexShrink: 0,
						}}
					>
						✕
					</button>
				</div>

				{/* Response area */}
				<div
					style={{
						overflowY: "auto",
						flex: 1,
						color: "#ccc",
						fontSize: "0.95rem",
						lineHeight: "1.6",
					}}
				>
					{loading && !response && (
						<span style={{ color: "#666", fontStyle: "italic" }}>
							Thinking…
						</span>
					)}
					{response && <Markdown>{response}</Markdown>}
				</div>

				{/* Footer hint */}
				{!loading && (
					<div
						style={{
							fontSize: "0.75rem",
							color: "#555",
							textAlign: "center",
						}}
					>
						Press Escape, Enter, or Space to dismiss
					</div>
				)}
			</div>
		</div>
	);
}