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/api/client.ts

@@ -13,7 +13,13 @@ export type WsRequest =
 			approved: boolean;
 			always_allow: boolean;
 	  }
-	| { type: "ping" };
+	| { type: "ping" }
+	| {
+			type: "side_question";
+			question: string;
+			context_messages: Message[];
+			config: ProviderConfig;
+	  };
 
 export interface AgentAssignment {
 	agent_name: string;
@@ -73,7 +79,11 @@ export type WsResponse =
 	/** Sent on connect when the project still needs onboarding (specs are placeholders). */
 	| { type: "onboarding_status"; needs_onboarding: boolean }
 	/** Streaming thinking token from an extended-thinking block, separate from regular text. */
-	| { type: "thinking_token"; content: string };
+	| { type: "thinking_token"; content: string }
+	/** Streaming token from a /btw side question response. */
+	| { type: "side_question_token"; content: string }
+	/** Final signal that the /btw side question has been fully answered. */
+	| { type: "side_question_done"; response: string };
 
 export interface ProviderConfig {
 	provider: string;
@@ -324,6 +334,8 @@ export class ChatWebSocket {
 	private onAgentConfigChanged?: () => void;
 	private onAgentStateChanged?: () => void;
 	private onOnboardingStatus?: (needsOnboarding: boolean) => void;
+	private onSideQuestionToken?: (content: string) => void;
+	private onSideQuestionDone?: (response: string) => void;
 	private connected = false;
 	private closeTimer?: number;
 	private wsPath = DEFAULT_WS_PATH;
@@ -405,6 +417,10 @@ export class ChatWebSocket {
 				if (data.type === "agent_state_changed") this.onAgentStateChanged?.();
 				if (data.type === "onboarding_status")
 					this.onOnboardingStatus?.(data.needs_onboarding);
+				if (data.type === "side_question_token")
+					this.onSideQuestionToken?.(data.content);
+				if (data.type === "side_question_done")
+					this.onSideQuestionDone?.(data.response);
 				if (data.type === "pong") {
 					window.clearTimeout(this.heartbeatTimeout);
 					this.heartbeatTimeout = undefined;
@@ -458,6 +474,8 @@ export class ChatWebSocket {
 			onAgentConfigChanged?: () => void;
 			onAgentStateChanged?: () => void;
 			onOnboardingStatus?: (needsOnboarding: boolean) => void;
+			onSideQuestionToken?: (content: string) => void;
+			onSideQuestionDone?: (response: string) => void;
 		},
 		wsPath = DEFAULT_WS_PATH,
 	) {
@@ -473,6 +491,8 @@ export class ChatWebSocket {
 		this.onAgentConfigChanged = handlers.onAgentConfigChanged;
 		this.onAgentStateChanged = handlers.onAgentStateChanged;
 		this.onOnboardingStatus = handlers.onOnboardingStatus;
+		this.onSideQuestionToken = handlers.onSideQuestionToken;
+		this.onSideQuestionDone = handlers.onSideQuestionDone;
 		this.wsPath = wsPath;
 		this.shouldReconnect = true;
 
@@ -498,6 +518,19 @@ export class ChatWebSocket {
 		this.send({ type: "chat", messages, config });
 	}
 
+	sendSideQuestion(
+		question: string,
+		contextMessages: Message[],
+		config: ProviderConfig,
+	) {
+		this.send({
+			type: "side_question",
+			question,
+			context_messages: contextMessages,
+			config,
+		});
+	}
+
 	cancel() {
 		this.send({ type: "cancel" });
 	}

frontend/src/components/Chat.tsx

@@ -12,6 +12,7 @@ import type { ChatInputHandle } from "./ChatInput";
 import { ChatInput } from "./ChatInput";
 import { LozengeFlyProvider } from "./LozengeFlyContext";
 import { MessageItem } from "./MessageItem";
+import { SideQuestionOverlay } from "./SideQuestionOverlay";
 import { StagePanel } from "./StagePanel";
 import { WorkItemDetailPanel } from "./WorkItemDetailPanel";
 
@@ -197,6 +198,11 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 	const [queuedMessages, setQueuedMessages] = useState<
 		{ id: string; text: string }[]
 	>([]);
+	const [sideQuestion, setSideQuestion] = useState<{
+		question: string;
+		response: string;
+		loading: boolean;
+	} | null>(null);
 	// Ref so stale WebSocket callbacks can read the current queued messages
 	const queuedMessagesRef = useRef<{ id: string; text: string }[]>([]);
 	const queueIdCounterRef = useRef(0);
@@ -360,6 +366,16 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 			onOnboardingStatus: (onboarding: boolean) => {
 				setNeedsOnboarding(onboarding);
 			},
+			onSideQuestionToken: (content) => {
+				setSideQuestion((prev) =>
+					prev ? { ...prev, response: prev.response + content } : prev,
+				);
+			},
+			onSideQuestionDone: (response) => {
+				setSideQuestion((prev) =>
+					prev ? { ...prev, response, loading: false } : prev,
+				);
+			},
 		});
 
 		return () => {
@@ -459,6 +475,28 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 	const sendMessage = async (messageText: string) => {
 		if (!messageText.trim()) return;
 
+		// /btw <question> — answered from context without disrupting main chat
+		const btwMatch = messageText.match(/^\/btw\s+(.+)/s);
+		if (btwMatch) {
+			const question = btwMatch[1].trim();
+			setSideQuestion({ question, response: "", loading: true });
+
+			const isClaudeCode = model === "claude-code-pty";
+			const provider = isClaudeCode
+				? "claude-code"
+				: model.startsWith("claude-")
+					? "anthropic"
+					: "ollama";
+			const config: ProviderConfig = {
+				provider,
+				model,
+				base_url: "http://localhost:11434",
+				enable_tools: false,
+			};
+			wsRef.current?.sendSideQuestion(question, messages, config);
+			return;
+		}
+
 		// Agent is busy — queue the message instead of dropping it
 		if (loading) {
 			const newItem = {
@@ -1154,6 +1192,15 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 					</div>
 				</div>
 			)}
+
+			{sideQuestion && (
+				<SideQuestionOverlay
+					question={sideQuestion.question}
+					response={sideQuestion.response}
+					loading={sideQuestion.loading}
+					onDismiss={() => setSideQuestion(null)}
+				/>
+			)}
 		</div>
 	);
 }

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>
+	);
+}