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

server/src/http/ws.rs

@@ -35,6 +35,14 @@ enum WsRequest {
     /// Heartbeat ping from the client. The server responds with `Pong` so the
     /// client can detect stale (half-closed) connections.
     Ping,
+    /// A quick side question answered from current conversation context.
+    /// The question and response are NOT added to the conversation history
+    /// and no tool calls are made.
+    SideQuestion {
+        question: String,
+        context_messages: Vec<Message>,
+        config: chat::ProviderConfig,
+    },
 }
 
 #[derive(Serialize)]
@@ -116,6 +124,14 @@ enum WsResponse {
     OnboardingStatus {
         needs_onboarding: bool,
     },
+    /// Streaming token from a `/btw` side question response.
+    SideQuestionToken {
+        content: String,
+    },
+    /// Final signal that the `/btw` side question has been fully answered.
+    SideQuestionDone {
+        response: String,
+    },
 }
 
 impl From<WatcherEvent> for Option<WsResponse> {
@@ -344,6 +360,33 @@ pub async fn ws_handler(ws: WebSocket, ctx: Data<&Arc<AppContext>>) -> impl poem
                                     Ok(WsRequest::Ping) => {
                                         let _ = tx.send(WsResponse::Pong);
                                     }
+                                    Ok(WsRequest::SideQuestion { question, context_messages, config }) => {
+                                        let tx_side = tx.clone();
+                                        let store = ctx.store.clone();
+                                        tokio::spawn(async move {
+                                            let result = chat::side_question(
+                                                context_messages,
+                                                question,
+                                                config,
+                                                store.as_ref(),
+                                                |token| {
+                                                    let _ = tx_side.send(WsResponse::SideQuestionToken {
+                                                        content: token.to_string(),
+                                                    });
+                                                },
+                                            ).await;
+                                            match result {
+                                                Ok(response) => {
+                                                    let _ = tx_side.send(WsResponse::SideQuestionDone { response });
+                                                }
+                                                Err(err) => {
+                                                    let _ = tx_side.send(WsResponse::SideQuestionDone {
+                                                        response: format!("Error: {err}"),
+                                                    });
+                                                }
+                                            }
+                                        });
+                                    }
                                     _ => {}
                                 }
                             }
@@ -370,6 +413,39 @@ pub async fn ws_handler(ws: WebSocket, ctx: Data<&Arc<AppContext>>) -> impl poem
                 Ok(WsRequest::PermissionResponse { .. }) => {
                     // Permission responses outside an active chat are ignored.
                 }
+                Ok(WsRequest::SideQuestion {
+                    question,
+                    context_messages,
+                    config,
+                }) => {
+                    let tx_side = tx.clone();
+                    let store = ctx.store.clone();
+                    tokio::spawn(async move {
+                        let result = chat::side_question(
+                            context_messages,
+                            question,
+                            config,
+                            store.as_ref(),
+                            |token| {
+                                let _ = tx_side.send(WsResponse::SideQuestionToken {
+                                    content: token.to_string(),
+                                });
+                            },
+                        )
+                        .await;
+                        match result {
+                            Ok(response) => {
+                                let _ = tx_side
+                                    .send(WsResponse::SideQuestionDone { response });
+                            }
+                            Err(err) => {
+                                let _ = tx_side.send(WsResponse::SideQuestionDone {
+                                    response: format!("Error: {err}"),
+                                });
+                            }
+                        }
+                    });
+                }
                 Err(err) => {
                     let _ = tx.send(WsResponse::Error {
                         message: format!("Invalid request: {err}"),

server/src/llm/chat.rs

@@ -409,6 +409,83 @@ where
     })
 }
 
+/// Answer a one-off side question using the existing conversation as context.
+///
+/// Unlike `chat`, this function:
+/// - Does NOT perform tool calls.
+/// - Does NOT modify the main conversation history.
+/// - Does NOT touch the shared cancel signal.
+/// - Performs a single LLM call and returns the response text.
+pub async fn side_question<U>(
+    context_messages: Vec<Message>,
+    question: String,
+    config: ProviderConfig,
+    store: &dyn StoreOps,
+    mut on_token: U,
+) -> Result<String, String>
+where
+    U: FnMut(&str) + Send,
+{
+    use crate::llm::providers::anthropic::AnthropicProvider;
+    use crate::llm::providers::ollama::OllamaProvider;
+
+    // Use a local cancel channel that is never cancelled, so the side question
+    // runs to completion independently of any main chat cancel signal.
+    // Keep `_cancel_tx` alive for the duration of the function so the channel
+    // stays open and `changed()` inside the providers does not spuriously fire.
+    let (_cancel_tx, cancel_rx) = tokio::sync::watch::channel(false);
+    let mut cancel_rx = cancel_rx;
+    cancel_rx.borrow_and_update();
+
+    let base_url = config
+        .base_url
+        .clone()
+        .unwrap_or_else(|| "http://localhost:11434".to_string());
+
+    let is_claude_code = config.provider == "claude-code";
+    let is_claude = !is_claude_code && config.model.starts_with("claude-");
+
+    // Build a minimal history: existing context + the side question.
+    let mut history = context_messages;
+    history.push(Message {
+        role: Role::User,
+        content: question,
+        tool_calls: None,
+        tool_call_id: None,
+    });
+
+    // No tools for side questions.
+    let tools: &[ToolDefinition] = &[];
+
+    let response = if is_claude {
+        let api_key = get_anthropic_api_key_impl(store)?;
+        let provider = AnthropicProvider::new(api_key);
+        provider
+            .chat_stream(
+                &config.model,
+                &history,
+                tools,
+                &mut cancel_rx,
+                |token| on_token(token),
+                |_tool_name| {},
+            )
+            .await
+            .map_err(|e| format!("Anthropic Error: {e}"))?
+    } else if is_claude_code {
+        return Err("Claude Code provider does not support side questions".to_string());
+    } else {
+        let provider = OllamaProvider::new(base_url);
+        provider
+            .chat_stream(&config.model, &history, tools, &mut cancel_rx, |token| {
+                on_token(token)
+            })
+            .await
+            .map_err(|e| format!("Ollama Error: {e}"))?
+    };
+
+    Ok(response.content.unwrap_or_default())
+}
+
 async fn execute_tool(call: &ToolCall, state: &SessionState) -> String {
     use crate::io::{fs, search, shell};