Fix file path truncation for hidden files/folders

webview-ui/src/components/ChatRow.tsx

@@ -4,7 +4,7 @@ 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, { removeLeadingNonAlphanumeric } from "./CodeAccordian"
+import CodeAccordian, { formatFilePathForTruncation } from "./CodeAccordian"
 import CodeBlock, { CODE_BLOCK_BG_COLOR } from "./CodeBlock"
 import Thumbnails from "./Thumbnails"
 import { vscode } from "../utils/vscode"
@@ -228,8 +228,9 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 										marginRight: "8px",
 										direction: "rtl",
 										textAlign: "left",
+										unicodeBidi: "plaintext",
 									}}>
-									{removeLeadingNonAlphanumeric(tool.path ?? "") + "\u200E"}
+									{formatFilePathForTruncation(tool.path ?? "") + "\u200E"}
 								</span>
 								<span
 									className={`codicon codicon-link-external`}

webview-ui/src/components/CodeAccordian.tsx

@@ -13,12 +13,12 @@ interface CodeAccordianProps {
 }
 
 /*
-We need to remove leading non-alphanumeric characters from the path in order for our leading ellipses trick to work.
+We need to remove leading non-alphanumeric/period 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.
-The replace method removes these matched characters, effectively trimming the string up to the first alphanumeric character.
+[^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.
 */
-export const removeLeadingNonAlphanumeric = (path: string): string => path.replace(/^[^a-zA-Z0-9]+/, "")
+export const formatFilePathForTruncation = (path: string): string => path.replace(/^[^a-zA-Z0-9.]+/, "")
 
 const CodeAccordian = ({ code, diff, language, path, isFeedback, isExpanded, onToggleExpand }: CodeAccordianProps) => {
 	const inferredLanguage = useMemo(
@@ -73,8 +73,9 @@ const CodeAccordian = ({ code, diff, language, path, isFeedback, isExpanded, onT
 									// trick to get ellipsis at beginning of string
 									direction: "rtl",
 									textAlign: "left",
+									unicodeBidi: "plaintext",
 								}}>
-								{removeLeadingNonAlphanumeric(path ?? "") + "\u200E"}
+								{formatFilePathForTruncation(path ?? "") + "\u200E"}
 							</span>
 						</>
 					)}

webview-ui/src/components/ContextMenu.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react"
 import { getContextMenuOptions } from "../utils/mention-context"
-import { removeLeadingNonAlphanumeric } from "./CodeAccordian"
+import { formatFilePathForTruncation } from "./CodeAccordian"
 
 interface ContextMenuProps {
 	onSelect: (type: string, value: string) => void
@@ -79,8 +79,9 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 							textOverflow: "ellipsis",
 							direction: "rtl",
 							textAlign: "left",
+							unicodeBidi: "plaintext",
 						}}>
-						{removeLeadingNonAlphanumeric(option.value) + "\u200E"}
+						{formatFilePathForTruncation(option.value) + "\u200E"}
 					</span>
 				)
 		}