From 2f945ec0326dff1458619c04c6667830f434915e Mon Sep 17 00:00:00 2001
From: Pedram Amini <pedram.amini@gmail.com>
Date: Mon, 2 Feb 2026 02:34:10 -0600
Subject: [PATCH] fix(ui): truncate document paths from left to show filename

Apply RTL text direction with LTR text isolation to show the rightmost
(filename) portion of document paths when truncated, while maintaining
full path on hover via title attribute.

Updated components:
- DocumentsPanel: Auto Run document list entries
- RightPanel: Auto Run progress indicator (single and multi-doc views)
---
 src/renderer/components/DocumentsPanel.tsx | 32 +++++++++++++++++--
 src/renderer/components/RightPanel.tsx     | 36 +++++++++++++++-------
 2 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/DocumentsPanel.tsx b/src/renderer/components/DocumentsPanel.tsx
index 5ada7155..031cf513 100644
--- a/src/renderer/components/DocumentsPanel.tsx
+++ b/src/renderer/components/DocumentsPanel.tsx
@@ -14,6 +14,8 @@ import {
 } from 'lucide-react';
 import type { Theme, BatchDocumentEntry } from '../types';
 import { generateId } from '../utils/ids';
+import { useLayerStack } from '../contexts/LayerStackContext';
+import { MODAL_PRIORITIES } from '../constants/modalPriorities';
 
 // Platform detection helper (userAgentData is newer but not in all TS types yet)
 const isMacPlatform = (): boolean => {
@@ -71,6 +73,27 @@ function DocumentSelectorModal({
 	onAdd,
 	onRefresh,
 }: DocumentSelectorModalProps) {
+	// Layer stack for escape handling
+	const { registerLayer, unregisterLayer } = useLayerStack();
+	const onCloseRef = useRef(onClose);
+	onCloseRef.current = onClose;
+
+	// Register with layer stack for escape handling
+	useEffect(() => {
+		const id = registerLayer({
+			type: 'modal',
+			priority: MODAL_PRIORITIES.DOCUMENT_SELECTOR,
+			blocksLowerLayers: true,
+			capturesFocus: true,
+			focusTrap: 'strict',
+			ariaLabel: 'Select Documents',
+			onEscape: () => {
+				onCloseRef.current();
+			},
+		});
+		return () => unregisterLayer(id);
+	}, [registerLayer, unregisterLayer]);
+
 	// Pre-select currently added documents
 	const [selectedDocs, setSelectedDocs] = useState<Set<string>>(() => {
 		return new Set(documents.map((d) => d.filename));
@@ -956,14 +979,17 @@ export function DocumentsPanel({
 												}}
 											/>
 
-											{/* Document Name */}
+											{/* Document Name - truncates from left to show filename */}
 											<span
-												className={`flex-1 text-sm font-medium truncate ${doc.isMissing ? 'line-through' : ''}`}
+												className={`flex-1 text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap ${doc.isMissing ? 'line-through' : ''}`}
 												style={{
 													color: doc.isMissing ? theme.colors.error : theme.colors.textMain,
+													direction: 'rtl',
+													textAlign: 'left',
 												}}
+												title={`${doc.filename}.md`}
 											>
-												{doc.filename}.md
+												<bdi>{doc.filename}.md</bdi>
 											</span>
 
 											{/* Missing Indicator */}
diff --git a/src/renderer/components/RightPanel.tsx b/src/renderer/components/RightPanel.tsx
index d9de7bfb..ceaa5903 100644
--- a/src/renderer/components/RightPanel.tsx
+++ b/src/renderer/components/RightPanel.tsx
@@ -586,8 +586,16 @@ export const RightPanel = memo(
 						{currentSessionBatchState.documents &&
 							currentSessionBatchState.documents.length === 1 && (
 								<div className="mb-2">
-									<span className="text-xs" style={{ color: theme.colors.textDim }}>
-										{currentSessionBatchState.documents[0]}.md
+									<span
+										className="text-xs overflow-hidden text-ellipsis whitespace-nowrap block"
+										style={{
+											color: theme.colors.textDim,
+											direction: 'rtl',
+											textAlign: 'left',
+										}}
+										title={`${currentSessionBatchState.documents[0]}.md`}
+									>
+										<bdi>{currentSessionBatchState.documents[0]}.md</bdi>
 									</span>
 								</div>
 							)}
@@ -599,17 +607,23 @@ export const RightPanel = memo(
 									{/* Document name with progress bar */}
 									<div className="flex items-center gap-2 min-w-0">
 										<span
-											className="text-xs font-medium truncate min-w-0"
-											style={{ color: theme.colors.textMain }}
+											className="text-xs font-medium overflow-hidden text-ellipsis whitespace-nowrap min-w-0"
+											style={{
+												color: theme.colors.textMain,
+												direction: 'rtl',
+												textAlign: 'left',
+											}}
 											title={`Document ${currentSessionBatchState.currentDocumentIndex + 1}/${currentSessionBatchState.documents.length}: ${currentSessionBatchState.documents[currentSessionBatchState.currentDocumentIndex]}.md`}
 										>
-											Document {currentSessionBatchState.currentDocumentIndex + 1}/
-											{currentSessionBatchState.documents.length}:{' '}
-											{
-												currentSessionBatchState.documents[
-													currentSessionBatchState.currentDocumentIndex
-												]
-											}
+											<bdi>
+												Document {currentSessionBatchState.currentDocumentIndex + 1}/
+												{currentSessionBatchState.documents.length}:{' '}
+												{
+													currentSessionBatchState.documents[
+														currentSessionBatchState.currentDocumentIndex
+													]
+												}
+											</bdi>
 										</span>
 										<div
 											className="flex-1 h-1 rounded-full overflow-hidden shrink-0"