Fix file path leading ellipsis

webview-ui/src/components/ChatRow.tsx

@@ -4,11 +4,11 @@ import React, { memo, useMemo } from "react"
 import ReactMarkdown from "react-markdown"
 import { ClaudeMessage, ClaudeSayTool } from "../../../src/shared/ExtensionMessage"
 import { COMMAND_OUTPUT_STRING } from "../../../src/shared/combineCommandSequences"
-import CodeAccordian, { formatFilePathForTruncation } from "./CodeAccordian"
-import CodeBlock, { CODE_BLOCK_BG_COLOR } from "./CodeBlock"
-import Thumbnails from "./Thumbnails"
 import { vscode } from "../utils/vscode"
+import CodeAccordian, { removeLeadingNonAlphanumeric } from "./CodeAccordian"
+import CodeBlock, { CODE_BLOCK_BG_COLOR } from "./CodeBlock"
 import { highlightMentions } from "./TaskHeader"
+import Thumbnails from "./Thumbnails"
 
 interface ChatRowProps {
 	message: ClaudeMessage
@@ -209,7 +209,6 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 								style={{
 									color: "var(--vscode-descriptionForeground)",
 									display: "flex",
-									justifyContent: "space-between",
 									alignItems: "center",
 									padding: "9px 10px",
 									cursor: "pointer",
@@ -221,6 +220,7 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 								onClick={() => {
 									vscode.postMessage({ type: "openFile", text: tool.content })
 								}}>
+								{tool.path?.startsWith(".") && <span>.</span>}
 								<span
 									style={{
 										whiteSpace: "nowrap",
@@ -229,10 +229,10 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 										marginRight: "8px",
 										direction: "rtl",
 										textAlign: "left",
-										unicodeBidi: "plaintext",
 									}}>
-									{formatFilePathForTruncation(tool.path ?? "") + "\u200E"}
+									{removeLeadingNonAlphanumeric(tool.path ?? "") + "\u200E"}
 								</span>
+								<div style={{ flexGrow: 1 }}></div>
 								<span
 									className={`codicon codicon-link-external`}
 									style={{ fontSize: 13.5, margin: "1px 0" }}></span>

webview-ui/src/components/CodeAccordian.tsx

@@ -13,12 +13,12 @@ interface CodeAccordianProps {
 }
 
 /*
-We need to remove leading non-alphanumeric/period characters from the path in order for our leading ellipses trick to work.
+We need to remove leading non-alphanumeric characters from the path in order for our leading ellipses trick to work.
 ^: Anchors the match to the start of the string.
-[^a-zA-Z0-9.]+: Matches one or more characters that are not alphanumeric or a dot.
-The replace method removes these matched characters, effectively trimming the string up to the first alphanumeric/period character.
+[^a-zA-Z0-9]+: Matches one or more characters that are not alphanumeric.
+The replace method removes these matched characters, effectively trimming the string up to the first alphanumeric character.
 */
-export const formatFilePathForTruncation = (path: string): string => path.replace(/^[^a-zA-Z0-9.]+/, "")
+export const removeLeadingNonAlphanumeric = (path: string): string => path.replace(/^[^a-zA-Z0-9]+/, "")
 
 const CodeAccordian = ({ code, diff, language, path, isFeedback, isExpanded, onToggleExpand }: CodeAccordianProps) => {
 	const inferredLanguage = useMemo(
@@ -39,7 +39,6 @@ const CodeAccordian = ({ code, diff, language, path, isFeedback, isExpanded, onT
 					style={{
 						color: "var(--vscode-descriptionForeground)",
 						display: "flex",
-						justifyContent: "space-between",
 						alignItems: "center",
 						padding: "9px 10px",
 						cursor: "pointer",
@@ -64,6 +63,7 @@ const CodeAccordian = ({ code, diff, language, path, isFeedback, isExpanded, onT
 						</div>
 					) : (
 						<>
+							{path?.startsWith(".") && <span>.</span>}
 							<span
 								style={{
 									whiteSpace: "nowrap",
@@ -73,10 +73,10 @@ const CodeAccordian = ({ code, diff, language, path, isFeedback, isExpanded, onT
 									// trick to get ellipsis at beginning of string
 									direction: "rtl",
 									textAlign: "left",
-									unicodeBidi: "plaintext",
 								}}>
-								{formatFilePathForTruncation(path ?? "") + "\u200E"}
+								{removeLeadingNonAlphanumeric(path ?? "") + "\u200E"}
 							</span>
+							<div style={{ flexGrow: 1 }}></div>
 						</>
 					)}
 					<span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"}`}></span>

webview-ui/src/components/ContextMenu.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useRef } from "react"
 import { ContextMenuOptionType, ContextMenuQueryItem, getContextMenuOptions } from "../utils/context-mentions"
-import { formatFilePathForTruncation } from "./CodeAccordian"
+import { removeLeadingNonAlphanumeric } from "./CodeAccordian"
 
 interface ContextMenuProps {
 	onSelect: (type: ContextMenuOptionType, value?: string) => void
@@ -56,17 +56,20 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 			case ContextMenuOptionType.Folder:
 				if (option.value) {
 					return (
-						<span
-							style={{
-								whiteSpace: "nowrap",
-								overflow: "hidden",
-								textOverflow: "ellipsis",
-								direction: "rtl",
-								textAlign: "left",
-								unicodeBidi: "plaintext",
-							}}>
-							{formatFilePathForTruncation(option.value || "") + "\u200E"}
-						</span>
+						<>
+							<span>/</span>
+							{option.value?.startsWith("/.") && <span>.</span>}
+							<span
+								style={{
+									whiteSpace: "nowrap",
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+									direction: "rtl",
+									textAlign: "left",
+								}}>
+								{removeLeadingNonAlphanumeric(option.value || "") + "\u200E"}
+							</span>
+						</>
 					)
 				} else {
 					return <span>Add {option.type === ContextMenuOptionType.File ? "File" : "Folder"}</span>