story-kit: start 269_story_file_references_in_web_ui_chat_input

.story_kit/work/2_current/269_story_file_references_in_web_ui_chat_input.md

@@ -0,0 +1,23 @@
+---
+name: "@ file references in web UI chat input"
+merge_failure: "Rename/rename conflict on story file: master moved it to 4_merge/ while the feature branch has it in 2_current/. The auto-resolver cannot handle rename/rename conflicts. The story file needs to be resolved manually (likely by accepting the 4_merge/ location on master and removing the 2_current/ version from the feature branch), then re-triggering the merge."
+---
+
+# Story 269: @ file references in web UI chat input
+
+## User Story
+
+As a user chatting in the web UI, I want to type @ to get an autocomplete overlay listing project files, so that I can reference specific files in my messages the same way Zed and Claude Code do.
+
+## Acceptance Criteria
+
+- [ ] Typing @ in the chat input triggers a file picker overlay
+- [ ] Overlay searches project files with fuzzy matching as the user types after @
+- [ ] Selecting a file inserts a reference into the message (e.g. @path/to/file.rs)
+- [ ] The referenced file contents are included as context when the message is sent to the LLM
+- [ ] Overlay is dismissable with Escape
+- [ ] Multiple @ references can be used in a single message
+
+## Out of Scope
+
+- TBD

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)}
+							onChange={handleInputChange}
-							onKeyDown={(e) => {
+							onKeyDown={handleKeyDown}
-								if (e.key === "Enter" && !e.shiftKey) {
-									e.preventDefault();
-									handleSubmit();
-								}
-							}}
 							placeholder="Send a message..."
 							rows={1}
 							style={{

server/src/http/io.rs

@@ -103,6 +103,15 @@ impl IoApi {
         Ok(Json(home))
     }
 
+    /// List all files in the project recursively, respecting .gitignore.
+    #[oai(path = "/io/fs/files", method = "get")]
+    async fn list_project_files(&self) -> OpenApiResult<Json<Vec<String>>> {
+        let files = io_fs::list_project_files(&self.ctx.state)
+            .await
+            .map_err(bad_request)?;
+        Ok(Json(files))
+    }
+
     /// Search the currently open project for files containing the provided query string.
     #[oai(path = "/io/search", method = "post")]
     async fn search_files(
@@ -316,6 +325,53 @@ mod tests {
         );
     }
 
+    // --- list_project_files ---
+
+    #[tokio::test]
+    async fn list_project_files_returns_file_paths() {
+        let dir = TempDir::new().unwrap();
+        std::fs::create_dir(dir.path().join("src")).unwrap();
+        std::fs::write(dir.path().join("src/main.rs"), "fn main() {}").unwrap();
+        std::fs::write(dir.path().join("README.md"), "# readme").unwrap();
+
+        let api = make_api(&dir);
+        let result = api.list_project_files().await.unwrap();
+        let files = &result.0;
+
+        assert!(files.contains(&"README.md".to_string()));
+        assert!(files.contains(&"src/main.rs".to_string()));
+    }
+
+    #[tokio::test]
+    async fn list_project_files_excludes_directories() {
+        let dir = TempDir::new().unwrap();
+        std::fs::create_dir(dir.path().join("subdir")).unwrap();
+        std::fs::write(dir.path().join("file.txt"), "").unwrap();
+
+        let api = make_api(&dir);
+        let result = api.list_project_files().await.unwrap();
+        let files = &result.0;
+
+        assert!(files.contains(&"file.txt".to_string()));
+        // Directories should not appear
+        assert!(!files.iter().any(|f| f == "subdir"));
+    }
+
+    #[tokio::test]
+    async fn list_project_files_returns_sorted_paths() {
+        let dir = TempDir::new().unwrap();
+        std::fs::write(dir.path().join("z_last.txt"), "").unwrap();
+        std::fs::write(dir.path().join("a_first.txt"), "").unwrap();
+
+        let api = make_api(&dir);
+        let result = api.list_project_files().await.unwrap();
+        let files = &result.0;
+
+        let a_idx = files.iter().position(|f| f == "a_first.txt").unwrap();
+        let z_idx = files.iter().position(|f| f == "z_last.txt").unwrap();
+        assert!(a_idx < z_idx);
+    }
+
     // --- list_directory (project-scoped) ---
 
     #[tokio::test]

server/src/io/fs.rs

@@ -727,6 +727,42 @@ pub async fn create_directory_absolute(path: String) -> Result<bool, String> {
     .map_err(|e| format!("Task failed: {}", e))?
 }
 
+/// List all files in the project recursively, respecting .gitignore.
+/// Returns relative paths from the project root (files only, not directories).
+pub async fn list_project_files(state: &SessionState) -> Result<Vec<String>, String> {
+    let root = state.get_project_root()?;
+    list_project_files_impl(root).await
+}
+
+pub async fn list_project_files_impl(root: PathBuf) -> Result<Vec<String>, String> {
+    use ignore::WalkBuilder;
+
+    let root_clone = root.clone();
+    let files = tokio::task::spawn_blocking(move || {
+        let mut result = Vec::new();
+        let walker = WalkBuilder::new(&root_clone).git_ignore(true).build();
+
+        for entry in walker.flatten() {
+            if entry.file_type().map(|ft| ft.is_file()).unwrap_or(false) {
+                let relative = entry
+                    .path()
+                    .strip_prefix(&root_clone)
+                    .unwrap_or(entry.path())
+                    .to_string_lossy()
+                    .to_string();
+                result.push(relative);
+            }
+        }
+
+        result.sort();
+        result
+    })
+    .await
+    .map_err(|e| format!("Task failed: {e}"))?;
+
+    Ok(files)
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -1588,4 +1624,68 @@ mod tests {
             "scaffold should not overwrite existing project.toml"
         );
     }
+
+    // --- list_project_files_impl ---
+
+    #[tokio::test]
+    async fn list_project_files_returns_all_files() {
+        let dir = tempdir().unwrap();
+        fs::create_dir(dir.path().join("src")).unwrap();
+        fs::write(dir.path().join("src/main.rs"), "fn main() {}").unwrap();
+        fs::write(dir.path().join("README.md"), "# readme").unwrap();
+
+        let files = list_project_files_impl(dir.path().to_path_buf())
+            .await
+            .unwrap();
+
+        assert!(files.contains(&"README.md".to_string()));
+        assert!(files.contains(&"src/main.rs".to_string()));
+    }
+
+    #[tokio::test]
+    async fn list_project_files_excludes_dirs_from_output() {
+        let dir = tempdir().unwrap();
+        fs::create_dir(dir.path().join("subdir")).unwrap();
+        fs::write(dir.path().join("file.txt"), "").unwrap();
+
+        let files = list_project_files_impl(dir.path().to_path_buf())
+            .await
+            .unwrap();
+
+        assert!(files.contains(&"file.txt".to_string()));
+        assert!(!files.iter().any(|f| f == "subdir"));
+    }
+
+    #[tokio::test]
+    async fn list_project_files_returns_sorted() {
+        let dir = tempdir().unwrap();
+        fs::write(dir.path().join("z.txt"), "").unwrap();
+        fs::write(dir.path().join("a.txt"), "").unwrap();
+
+        let files = list_project_files_impl(dir.path().to_path_buf())
+            .await
+            .unwrap();
+
+        let a_idx = files.iter().position(|f| f == "a.txt").unwrap();
+        let z_idx = files.iter().position(|f| f == "z.txt").unwrap();
+        assert!(a_idx < z_idx);
+    }
+
+    #[tokio::test]
+    async fn list_project_files_with_state() {
+        let dir = tempdir().unwrap();
+        fs::write(dir.path().join("hello.rs"), "").unwrap();
+        let state = make_state_with_root(dir.path().to_path_buf());
+
+        let files = list_project_files(&state).await.unwrap();
+
+        assert!(files.contains(&"hello.rs".to_string()));
+    }
+
+    #[tokio::test]
+    async fn list_project_files_errors_without_project() {
+        let state = SessionState::default();
+        let result = list_project_files(&state).await;
+        assert!(result.is_err());
+    }
 }