feat(FN-2946): merge fusion/fn-2946

- test(FN-2946): complete Step 2 — add maxLength 40 truncation tests
- feat(FN-2946): complete Step 1 — reduce truncation length to 40
- feat(FN-2941): merge fusion/fn-2941
- feat(FN-2938): merge fusion/fn-2938

Fusion-Task-Id: FN-2946

packages/dashboard/app/components/ChangesDiffModal.tsx

@@ -223,7 +223,7 @@ export function ChangesDiffModal({
                   >
                     {getStatusLabel(file.status)}
                   </span>
-                  <span className="changes-diff-file-path">{truncateMiddle(file.path)}</span>
+                  <span className="changes-diff-file-path">{truncateMiddle(file.path, 40)}</span>
                   <span className="changes-diff-file-stat">
                     +{file.additions} -{file.deletions}
                   </span>

packages/dashboard/app/components/GitManagerModal.tsx

@@ -1115,7 +1115,7 @@ function ChangesPanel({
                     />
                   </label>
                   <FileStatusIcon status={f.status} />
-                  <span className="gm-file-name" title={f.file}>{truncateMiddle(f.file)}</span>
+                  <span className="gm-file-name" title={f.file}>{truncateMiddle(f.file, 40)}</span>
                   <FileStatusBadge status={f.status} />
                   <button
                     className="gm-icon-btn"
@@ -1187,7 +1187,7 @@ function ChangesPanel({
                     />
                   </label>
                   <FileStatusIcon status={f.status} />
-                  <span className="gm-file-name" title={f.file}>{truncateMiddle(f.file)}</span>
+                  <span className="gm-file-name" title={f.file}>{truncateMiddle(f.file, 40)}</span>
                   <FileStatusBadge status={f.status} />
                   <button
                     className="gm-icon-btn"

packages/dashboard/app/components/TaskChangesTab.tsx

@@ -244,7 +244,7 @@ export function TaskChangesTab({ taskId, worktree, projectId, column, mergeDetai
                     {getStatusLabel("unknown")}
                   </span>
                   <span className="changes-file-path" title={path}>
-                    {truncateMiddle(path)}
+                    {truncateMiddle(path, 40)}
                   </span>
                 </div>
               </div>
@@ -381,7 +381,7 @@ export function TaskChangesTab({ taskId, worktree, projectId, column, mergeDetai
                   {getStatusLabel(file.status)}
                 </span>
                 <span className="changes-file-path" title={file.path}>
-                  {truncateMiddle(file.path)}
+                  {truncateMiddle(file.path, 40)}
                 </span>
                 <span
                   className="changes-file-stat"

packages/dashboard/app/utils/__tests__/truncatePath.test.ts

@@ -114,4 +114,31 @@ describe("truncateMiddle", () => {
     expect(result).toBe("...verylongname.test.tsx");
     expect(result.endsWith(".test.tsx")).toBe(true);
   });
+
+  it("keeps filename visible for typical component paths at maxLength 40", () => {
+    const path = "packages/dashboard/app/components/SomeComponent.tsx";
+    const result = truncateMiddle(path, 40);
+
+    expect(result.endsWith("SomeComponent.tsx")).toBe(true);
+    expect(result).toContain("...");
+    expect(result.length).toBeLessThanOrEqual(40);
+  });
+
+  it("shows nested filename suffix for very deep paths at maxLength 40", () => {
+    const path = "a/b/c/d/e/f/g/h/i/j/k/l/m/n/Component.tsx";
+    const result = truncateMiddle(path, 40);
+
+    expect(result.endsWith("/Component.tsx")).toBe(true);
+    expect(result).toContain("...");
+    expect(result.length).toBeLessThanOrEqual(40);
+  });
+
+  it("truncates from the end when filename alone nearly consumes maxLength 40", () => {
+    const path = "a/12345678901234567890123456789012345.tsx";
+    const result = truncateMiddle(path, 40);
+
+    expect(result.length).toBeLessThanOrEqual(40);
+    expect(result).toContain("...");
+    expect(result.endsWith("6789012345.tsx")).toBe(true);
+  });
 });