Format file paths and truncate in menu

src/integrations/WorkspaceTracker.ts

@@ -3,6 +3,8 @@ import * as path from "path"
 import { listFiles } from "../parse-source-code/index"
 import { ClaudeDevProvider } from "../providers/ClaudeDevProvider"
 
+const cwd = vscode.workspace.workspaceFolders?.map((folder) => folder.uri.fsPath).at(0)
+
 class WorkspaceTracker {
 	private providerRef: WeakRef<ClaudeDevProvider>
 	private disposables: vscode.Disposable[] = []
@@ -15,12 +17,17 @@ class WorkspaceTracker {
 
 	async initializeFilePaths() {
 		// should not auto get filepaths for desktop since it would immediately show permission popup before claude every creates a file
-		const cwd = vscode.workspace.workspaceFolders?.map((folder) => folder.uri.fsPath).at(0)
+
 		if (!cwd) {
 			return
 		}
 		const [files, _] = await listFiles(cwd, true, 500)
-		files.forEach((file) => this.filePaths.add(file))
+		files
+			.map((file) => {
+				const relativePath = path.relative(cwd, file)
+				return file.endsWith("/") ? relativePath + "/" : relativePath
+			})
+			.forEach((file) => this.filePaths.add(file))
 		this.workspaceDidUpdate()
 	}
 
@@ -74,8 +81,16 @@ class WorkspaceTracker {
 
 	private async onWorkspaceFoldersChanged(event: vscode.WorkspaceFoldersChangeEvent) {
 		for (const folder of event.added) {
-			const [files, _] = await listFiles(folder.uri.fsPath, true, 50)
-			files.forEach((file) => this.filePaths.add(file))
+			const [files, _] = await listFiles(folder.uri.fsPath, true, 50) // at most 50 files
+			if (!cwd) {
+				continue
+			}
+			files
+				.map((file) => {
+					const relativePath = path.relative(cwd, file)
+					return file.endsWith("/") ? relativePath + "/" : relativePath
+				})
+				.forEach((file) => this.filePaths.add(file))
 		}
 		for (const folder of event.removed) {
 			this.filePaths.forEach((filePath) => {

webview-ui/src/components/ChatTextArea.tsx

@@ -55,10 +55,12 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 		const searchPaths = React.useMemo(() => {
 			return [
 				{ type: "problems", path: "problems" },
-				...filePaths.map((path) => ({
-					type: path.endsWith("/") ? "folder" : "file",
-					path: path,
-				})),
+				...filePaths
+					.map((file) => "/" + file)
+					.map((path) => ({
+						type: path.endsWith("/") ? "folder" : "file",
+						path: path,
+					})),
 			]
 		}, [filePaths])
 

webview-ui/src/components/ContextMenu.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react"
 import { getContextMenuOptions } from "../utils/mention-context"
+import { removeLeadingNonAlphanumeric } from "./CodeAccordian"
 
 interface ContextMenuProps {
 	onSelect: (type: string, value: string) => void
@@ -45,6 +46,46 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 		}
 	}, [selectedIndex])
 
+	const renderOptionContent = (option: { type: string; value: string }) => {
+		switch (option.value) {
+			case "file":
+			case "folder":
+			case "problems":
+			case "url":
+				return (
+					<span
+						style={{
+							whiteSpace: "nowrap",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+						}}>
+						{option.value === "file"
+							? "Add File"
+							: option.value === "folder"
+							? "Add Folder"
+							: option.value === "problems"
+							? "Problems"
+							: option.value === "url"
+							? "Paste URL to scrape"
+							: ""}
+					</span>
+				)
+			default:
+				return (
+					<span
+						style={{
+							whiteSpace: "nowrap",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							direction: "rtl",
+							textAlign: "left",
+						}}>
+						{removeLeadingNonAlphanumeric(option.value) + "\u200E"}
+					</span>
+				)
+		}
+	}
+
 	return (
 		<div
 			style={{
@@ -52,6 +93,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 				bottom: "calc(100% - 10px)",
 				left: 15,
 				right: 15,
+				overflowX: "hidden",
 			}}
 			onMouseDown={onMouseDown}>
 			<div
@@ -83,29 +125,36 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 								index === selectedIndex && option.type !== "url"
 									? "var(--vscode-list-activeSelectionBackground)"
 									: "",
-							// opacity: option.type === "url" ? 0.5 : 1, // Make URL option appear disabled
 						}}
 						onMouseEnter={() => option.type !== "url" && setSelectedIndex(index)}>
-						<div style={{ display: "flex", alignItems: "center" }}>
-							<i className={`codicon codicon-${option.icon}`} style={{ marginRight: "8px" }} />
-							{option.value === "file"
-								? "Add File"
-								: option.value === "folder"
-								? "Add Folder"
-								: option.value === "problems"
-								? "Problems"
-								: option.value === "url"
-								? "Paste URL to scrape"
-								: option.value}
+						<div
+							style={{
+								display: "flex",
+								alignItems: "center",
+								flex: 1,
+								minWidth: 0, // Allows child to shrink below content size
+								overflow: "hidden", // Ensures content doesn't overflow
+							}}>
+							<i
+								className={`codicon codicon-${option.icon}`}
+								style={{ marginRight: "8px", flexShrink: 0, fontSize: "14px" }}
+							/>
+							{renderOptionContent(option)}
 						</div>
 						{(option.value === "file" || option.value === "folder") && (
-							<i className="codicon codicon-chevron-right" style={{ fontSize: "14px" }} />
+							<i
+								className="codicon codicon-chevron-right"
+								style={{ fontSize: "14px", flexShrink: 0, marginLeft: 8 }}
+							/>
 						)}
 						{(option.type === "problems" ||
 							((option.type === "file" || option.type === "folder") &&
 								option.value !== "file" &&
 								option.value !== "folder")) && (
-							<i className="codicon codicon-add" style={{ fontSize: "14px" }} />
+							<i
+								className="codicon codicon-add"
+								style={{ fontSize: "14px", flexShrink: 0, marginLeft: 8 }}
+							/>
 						)}
 					</div>
 				))}