Location row: shorten long paths from the left in code, not CSS (#7)

The direction:rtl trick rendered the leading "/" at the end of the path
("…/26f5e17b/"). tailPath() now keeps whole trailing segments under a length
budget and prefixes "…"; e2e asserts the shown text is a real suffix of the
full path with no stray separator.

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

Author: BunsDev

apps/desktop/e2e/app.spec.ts

@@ -158,6 +158,11 @@ test("⇧⌘N creates a worktree thread and the header shows its branch and path
   const pathTitle = await page.locator(".location .location-path").getAttribute("title");
   expect(pathTitle).toContain(path.join(home, "worktrees"));
   expect(fs.existsSync(path.join(pathTitle!, "README.md"))).toBe(true);
+  // Long paths are shortened from the left, keeping whole trailing segments and no stray separators.
+  const shown = await page.locator(".location .location-path").innerText();
+  expect(shown.startsWith("…") || shown === pathTitle).toBe(true);
+  expect(pathTitle!.endsWith(shown.replace(/^…/, ""))).toBe(true);
+  expect(shown.endsWith("/")).toBe(false);
   await expect(page.locator(".location .location-kind")).toHaveText("⑂");
   await page.locator(".location button", { hasText: "Copy path" }).click();
   expect(await page.evaluate(() => navigator.clipboard.readText())).toBe(pathTitle);

apps/desktop/src/renderer/components/ThreadView.tsx

@@ -27,6 +27,19 @@ export function shortenHome(p: string): string {
   return p.replace(/^\/(?:Users|home)\/[^/]+(?=\/|$)/, "~").replace(/^[A-Za-z]:\\Users\\[^\\]+(?=\\|$)/, "~");
 }
 
+/** Keeps the tail of a long path (the part that distinguishes worktrees), dropping whole leading segments. */
+export function tailPath(p: string, max = 60): string {
+  if (p.length <= max) return p;
+  const parts = p.split("/");
+  let out = "";
+  for (let i = parts.length - 1; i > 0; i--) {
+    const next = "/" + parts[i] + out;
+    if (next.length + 1 > max) break;
+    out = next;
+  }
+  return "…" + (out || p.slice(-(max - 1)));
+}
+
 export function ThreadView({ thread, project, items, onSend, onStop, onAnswer, onUpdate, showChanges, onToggleChanges, changedCount, models, modelsError, inputRef, onOpenPath, onOpenTerminal, platform }: Props) {
   const scroller = useRef<HTMLDivElement>(null);
   const busy = thread.status === "running" || thread.status === "waiting";
@@ -59,7 +72,7 @@ export function ThreadView({ thread, project, items, onSend, onStop, onAnswer, o
           {thread.worktree ? "⑂" : "▸"}
         </span>
         {thread.worktree && <code className="location-branch" title="Branch">{thread.worktree.branch}</code>}
-        <code className="location-path" title={thread.cwd}>{shortenHome(thread.cwd)}</code>
+        <code className="location-path" title={thread.cwd}>{tailPath(shortenHome(thread.cwd))}</code>
         <span className="spacer" />
         <button className="btn small ghost" onClick={() => onOpenPath(thread.cwd)} title={`Open ${thread.cwd} in ${platform === "darwin" ? "Finder" : "the file manager"}`}>
           {platform === "darwin" ? "Finder" : "Files"}

apps/desktop/src/renderer/styles.css

@@ -255,5 +255,5 @@ kbd { font: 11px var(--mono); background: rgba(255,255,255,.08); border: 1px sol
 .location { display: flex; align-items: center; gap: 8px; padding: 4px 16px; border-bottom: 1px solid var(--line); background: var(--bg-1); flex: none; font-size: 12px; color: var(--fg-2); min-width: 0; }
 .location-kind { width: 14px; text-align: center; color: var(--accent); }
 .location-branch { background: rgba(124, 156, 255, .12); border: 1px solid rgba(124, 156, 255, .35); color: var(--accent); border-radius: 999px; padding: 0 8px; font-size: 11.5px; white-space: nowrap; }
-.location-path { color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; direction: rtl; text-align: left; }
+.location-path { color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
 .location .btn.small { padding: 1px 8px; font-size: 12px; }