story-kit: start 269_story_file_references_in_web_ui_chat_input

frontend/src/api/client.ts

@@ -277,6 +277,9 @@ export const api = {
 	getHomeDirectory(baseUrl?: string) {
 		return requestJson<string>("/io/fs/home", {}, baseUrl);
 	},
+	listProjectFiles(baseUrl?: string) {
+		return requestJson<string[]>("/io/fs/files", {}, baseUrl);
+	},
 	searchFiles(query: string, baseUrl?: string) {
 		return requestJson<SearchResult[]>(
 			"/fs/search",

frontend/src/components/ChatInput.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
+import { api } from "../api/client";
 
-const { forwardRef, useEffect, useImperativeHandle, useRef, useState } = React;
+const { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } = React;
 
 export interface ChatInputHandle {
 	appendToInput(text: string): void;
@@ -14,6 +15,97 @@ interface ChatInputProps {
 	onRemoveQueuedMessage: (id: string) => void;
 }
 
+/** Fuzzy-match: returns true if all chars of `query` appear in order in `str`. */
+function fuzzyMatch(str: string, query: string): boolean {
+	if (!query) return true;
+	const lower = str.toLowerCase();
+	const q = query.toLowerCase();
+	let qi = 0;
+	for (let i = 0; i < lower.length && qi < q.length; i++) {
+		if (lower[i] === q[qi]) qi++;
+	}
+	return qi === q.length;
+}
+
+/** Score a fuzzy match: lower is better. Exact prefix match wins, then shorter paths. */
+function fuzzyScore(str: string, query: string): number {
+	const lower = str.toLowerCase();
+	const q = query.toLowerCase();
+	// Prefer matches where query appears as a contiguous substring
+	if (lower.includes(q)) return lower.indexOf(q);
+	return str.length;
+}
+
+interface FilePickerOverlayProps {
+	query: string;
+	files: string[];
+	selectedIndex: number;
+	onSelect: (file: string) => void;
+	onDismiss: () => void;
+	anchorRef: React.RefObject<HTMLTextAreaElement | null>;
+}
+
+function FilePickerOverlay({
+	query,
+	files,
+	selectedIndex,
+	onSelect,
+}: FilePickerOverlayProps) {
+	const filtered = files
+		.filter((f) => fuzzyMatch(f, query))
+		.sort((a, b) => fuzzyScore(a, query) - fuzzyScore(b, query))
+		.slice(0, 10);
+
+	if (filtered.length === 0) return null;
+
+	return (
+		<div
+			data-testid="file-picker-overlay"
+			style={{
+				position: "absolute",
+				bottom: "100%",
+				left: 0,
+				right: 0,
+				background: "#1e1e1e",
+				border: "1px solid #444",
+				borderRadius: "8px",
+				marginBottom: "6px",
+				overflow: "hidden",
+				zIndex: 100,
+				boxShadow: "0 4px 16px rgba(0,0,0,0.4)",
+				maxHeight: "240px",
+				overflowY: "auto",
+			}}
+		>
+			{filtered.map((file, idx) => (
+				<button
+					key={file}
+					type="button"
+					data-testid={`file-picker-item-${idx}`}
+					onClick={() => onSelect(file)}
+					style={{
+						display: "block",
+						width: "100%",
+						textAlign: "left",
+						padding: "8px 14px",
+						background: idx === selectedIndex ? "#2d4a6e" : "transparent",
+						border: "none",
+						color: idx === selectedIndex ? "#ececec" : "#aaa",
+						cursor: "pointer",
+						fontFamily: "monospace",
+						fontSize: "0.85rem",
+						whiteSpace: "nowrap",
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+					}}
+				>
+					{file}
+				</button>
+			))}
+		</div>
+	);
+}
+
 export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
 	function ChatInput(
 		{ loading, queuedMessages, onSubmit, onCancel, onRemoveQueuedMessage },
@@ -22,6 +114,12 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
 		const [input, setInput] = useState("");
 		const inputRef = useRef<HTMLTextAreaElement>(null);
 
+		// File picker state
+		const [projectFiles, setProjectFiles] = useState<string[]>([]);
+		const [pickerQuery, setPickerQuery] = useState<string | null>(null);
+		const [pickerSelectedIndex, setPickerSelectedIndex] = useState(0);
+		const [pickerAtStart, setPickerAtStart] = useState(0);
+
 		useImperativeHandle(ref, () => ({
 			appendToInput(text: string) {
 				setInput((prev) => (prev ? `${prev}\n${text}` : text));
@@ -32,10 +130,104 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
 			inputRef.current?.focus();
 		}, []);
 
+		// Compute filtered files for current picker query
+		const filteredFiles = pickerQuery !== null
+			? projectFiles
+				.filter((f) => fuzzyMatch(f, pickerQuery))
+				.sort((a, b) => fuzzyScore(a, pickerQuery) - fuzzyScore(b, pickerQuery))
+				.slice(0, 10)
+			: [];
+
+		const dismissPicker = useCallback(() => {
+			setPickerQuery(null);
+			setPickerSelectedIndex(0);
+		}, []);
+
+		const selectFile = useCallback(
+			(file: string) => {
+				// Replace the @query portion with @file
+				const before = input.slice(0, pickerAtStart);
+				const cursorPos = inputRef.current?.selectionStart ?? input.length;
+				const after = input.slice(cursorPos);
+				setInput(`${before}@${file}${after}`);
+				dismissPicker();
+				// Restore focus after state update
+				setTimeout(() => inputRef.current?.focus(), 0);
+			},
+			[input, pickerAtStart, dismissPicker],
+		);
+
+		const handleInputChange = useCallback(
+			(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+				const val = e.target.value;
+				setInput(val);
+
+				const cursor = e.target.selectionStart ?? val.length;
+				// Find the last @ before the cursor that starts a reference token
+				const textUpToCursor = val.slice(0, cursor);
+				// Match @ not preceded by non-whitespace (i.e. @ at start or after space/newline)
+				const atMatch = textUpToCursor.match(/(^|[\s\n])@([^\s@]*)$/);
+
+				if (atMatch) {
+					const query = atMatch[2];
+					const atPos = textUpToCursor.lastIndexOf("@");
+					setPickerAtStart(atPos);
+					setPickerQuery(query);
+					setPickerSelectedIndex(0);
+
+					// Lazily load files on first trigger
+					if (projectFiles.length === 0) {
+						api.listProjectFiles().then(setProjectFiles).catch(() => {});
+					}
+				} else {
+					if (pickerQuery !== null) dismissPicker();
+				}
+			},
+			[projectFiles.length, pickerQuery, dismissPicker],
+		);
+
+		const handleKeyDown = useCallback(
+			(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+				if (pickerQuery !== null && filteredFiles.length > 0) {
+					if (e.key === "ArrowDown") {
+						e.preventDefault();
+						setPickerSelectedIndex((i) => Math.min(i + 1, filteredFiles.length - 1));
+						return;
+					}
+					if (e.key === "ArrowUp") {
+						e.preventDefault();
+						setPickerSelectedIndex((i) => Math.max(i - 1, 0));
+						return;
+					}
+					if (e.key === "Enter" || e.key === "Tab") {
+						e.preventDefault();
+						selectFile(filteredFiles[pickerSelectedIndex] ?? filteredFiles[0]);
+						return;
+					}
+					if (e.key === "Escape") {
+						e.preventDefault();
+						dismissPicker();
+						return;
+					}
+				} else if (e.key === "Escape" && pickerQuery !== null) {
+					e.preventDefault();
+					dismissPicker();
+					return;
+				}
+
+				if (e.key === "Enter" && !e.shiftKey) {
+					e.preventDefault();
+					handleSubmit();
+				}
+			},
+			[pickerQuery, filteredFiles, pickerSelectedIndex, selectFile, dismissPicker],
+		);
+
 		const handleSubmit = () => {
 			if (!input.trim()) return;
 			onSubmit(input);
 			setInput("");
+			dismissPicker();
 		};
 
 		return (
@@ -135,24 +327,30 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
 							</button>
 						</div>
 					))}
-					{/* Input row */}
+					{/* Input row with file picker overlay */}
 					<div
 						style={{
 							display: "flex",
 							gap: "8px",
 							alignItems: "center",
+							position: "relative",
 						}}
 					>
+						{pickerQuery !== null && (
+							<FilePickerOverlay
+								query={pickerQuery}
+								files={projectFiles}
+								selectedIndex={pickerSelectedIndex}
+								onSelect={selectFile}
+								onDismiss={dismissPicker}
+								anchorRef={inputRef}
+							/>
+						)}
 						<textarea
 							ref={inputRef}
 							value={input}
-							onChange={(e) => setInput(e.target.value)}
-							onKeyDown={(e) => {
-								if (e.key === "Enter" && !e.shiftKey) {
-									e.preventDefault();
-									handleSubmit();
-								}
-							}}
+							onChange={handleInputChange}
+							onKeyDown={handleKeyDown}
 							placeholder="Send a message..."
 							rows={1}
 							style={{