fix(ui): truncate right panel paths from start

Use RTL ellipsis with bidi isolation so long paths keep the filename visible.

packages/ui/src/components/instance/shell/right-panel/tabs/ChangesTab.tsx

@@ -144,7 +144,7 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
             >
               <div class="file-list-item-content">
                 <div class="file-list-item-path" title={item.file}>
-                  {item.file}
+                  <span class="file-path-text">{item.file}</span>
                 </div>
                 <div class="file-list-item-stats">
                   <span class="file-list-item-additions">+{item.additions}</span>
@@ -170,7 +170,7 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
             >
               <div class="file-list-item-content">
                 <div class="file-list-item-path" title={item.file}>
-                  {item.file}
+                  <span class="file-path-text">{item.file}</span>
                 </div>
                 <div class="file-list-item-stats">
                   <span class="file-list-item-additions">+{item.additions}</span>
@@ -190,7 +190,7 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
         header={
           <>
             <span class="files-tab-selected-path" title={headerPath()}>
-              {headerPath()}
+              <span class="file-path-text">{headerPath()}</span>
             </span>
 
             <div class="files-tab-stats" style={{ flex: "0 0 auto" }}>

packages/ui/src/components/instance/shell/right-panel/tabs/FilesTab.tsx

@@ -105,7 +105,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
             <div class="file-list-item" onClick={() => props.onLoadEntries(p())}>
               <div class="file-list-item-content">
                 <div class="file-list-item-path" title={p()}>
-                  ..
+                  <span class="file-path-text">..</span>
                 </div>
               </div>
             </div>
@@ -131,7 +131,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
             >
               <div class="file-list-item-content">
                 <div class="file-list-item-path" title={item.path}>
-                  {item.name}
+                  <span class="file-path-text">{item.name}</span>
                 </div>
                 <div class="file-list-item-stats">
                   <span class="text-[10px] text-secondary">{item.type}</span>
@@ -150,7 +150,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
             <div class="files-tab-stats">
               <span class="files-tab-stat">
                 <span class="files-tab-selected-path" title={headerDisplayedPath()}>
-                  {headerDisplayedPath()}
+                  <span class="file-path-text">{headerDisplayedPath()}</span>
                 </span>
               </span>
               <Show when={props.browserLoading()}>

packages/ui/src/components/instance/shell/right-panel/tabs/GitChangesTab.tsx

@@ -157,7 +157,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
             >
               <div class="file-list-item-content">
                 <div class="file-list-item-path" title={item.path}>
-                  {item.path}
+                  <span class="file-path-text">{item.path}</span>
                 </div>
                 <div class="file-list-item-stats">
                   <Show when={item.status === "deleted"}>
@@ -188,7 +188,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
             >
               <div class="file-list-item-content">
                 <div class="file-list-item-path" title={item.path}>
-                  {item.path}
+                  <span class="file-path-text">{item.path}</span>
                 </div>
                 <div class="file-list-item-stats">
                   <Show when={item.status === "deleted"}>
@@ -213,7 +213,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
         header={
           <>
             <span class="files-tab-selected-path" title={selectedEntry?.path || "Git Changes"}>
-              {selectedEntry?.path || "Git Changes"}
+              <span class="file-path-text">{selectedEntry?.path || "Git Changes"}</span>
             </span>
 
             <div class="files-tab-stats" style={{ flex: "0 0 auto" }}>

packages/ui/src/styles/panels/right-panel.css

@@ -164,9 +164,15 @@
   @apply text-xs font-mono min-w-0 flex-1 overflow-hidden whitespace-nowrap;
   color: var(--text-primary);
   text-overflow: ellipsis;
+  /* Truncate from the start; keep filename visible. */
   direction: rtl;
   text-align: left;
-  unicode-bidi: plaintext;
+  unicode-bidi: isolate;
+}
+
+.files-tab-selected-path .file-path-text {
+  direction: ltr;
+  unicode-bidi: isolate;
 }
 
 .files-tab-stat {
@@ -240,9 +246,15 @@
   @apply text-xs font-mono min-w-0 flex-1 overflow-hidden whitespace-nowrap;
   color: var(--text-primary);
   text-overflow: ellipsis;
+  /* Truncate from the start; keep filename visible. */
   direction: rtl;
   text-align: left;
-  unicode-bidi: plaintext;
+  unicode-bidi: isolate;
+}
+
+.file-list-item-path .file-path-text {
+  direction: ltr;
+  unicode-bidi: isolate;
 }
 
 .file-list-item-stats {