story-kit: done 240_story_btw_side_question_slash_command

Implement /btw side question slash command — lets users ask quick
questions from conversation context without disrupting the main chat.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/SideQuestionOverlay.tsx

@@ -0,0 +1,159 @@
+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>
+	);
+}