fix(web): polish PathHeader rendering for SHAs and empty paths

- Lift `truncateSha` (was a private helper in getDiffToolComponent) to
  `lib/utils` so PathHeader can reuse it. The branch/ref display now
  renders a 40-char SHA as `abc1234`, preserving any `^` / `~N` suffix.
- Hide the `·` separator and the path's CopyIconButton when there's no
  path (repo root). Previously a dangling `·` and copy button rendered
  with nothing between them.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: brendan-kellam

packages/web/src/app/(app)/components/pathHeader.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { cn, getCodeHostInfoForRepo } from "@/lib/utils";
+import { cn, getCodeHostInfoForRepo, truncateSha } from "@/lib/utils";
 import Image from "next/image";
 import { getBrowsePath } from "../browse/hooks/utils";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
@@ -233,10 +233,12 @@ export const PathHeader = ({
                     }}
                 >
                     <span className="mr-0.5">@</span>
-                    {`${branchDisplayName.replace(/^refs\/(heads|tags)\//, '')}`}
+                    {truncateSha(branchDisplayName.replace(/^refs\/(heads|tags)\//, ''))}
                 </p>
             )}
-            <span>·</span>
+            {breadcrumbSegments.length > 0 && (
+                <span>·</span>
+            )}
             <div ref={containerRef} className="flex-1 flex items-center overflow-hidden mt-0.5">
                 <div ref={breadcrumbsRef} className="flex items-center overflow-hidden">
                     {hiddenSegments.length > 0 && (
@@ -296,10 +298,12 @@ export const PathHeader = ({
                         </div>
                     ))}
                 </div>
-                <CopyIconButton
-                    onCopy={onCopyPath}
-                    className="ml-2"
-                />
+                {breadcrumbSegments.length > 0 && (
+                    <CopyIconButton
+                        onCopy={onCopyPath}
+                        className="ml-2"
+                    />
+                )}
             </div>
         </div>
     )

packages/web/src/features/chat/components/chatThread/tools/getDiffToolComponent.tsx

@@ -2,17 +2,10 @@
 
 import { Separator } from '@/components/ui/separator';
 import { GetDiffMetadata, ToolResult } from '@/features/tools';
+import { truncateSha } from '@/lib/utils';
 import { GitCommitHorizontalIcon } from 'lucide-react';
 import { RepoBadge } from './repoBadge';
 
-function truncateSha(ref: string): string {
-    const match = ref.match(/^([0-9a-f]{40})(.*)$/i);
-    if (match) {
-        return match[1].substring(0, 7) + match[2];
-    }
-    return ref;
-}
-
 export const GetDiffToolComponent = ({ metadata }: ToolResult<GetDiffMetadata>) => {
     const fileCount = metadata.files.length;
 

packages/web/src/lib/utils.ts

@@ -22,6 +22,19 @@ export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs))
 }
 
+/**
+ * If `ref` starts with a 40-character hex SHA, truncate the SHA portion to
+ * 7 characters and preserve any trailing operator suffix (e.g. `^`, `~1`).
+ * Returns the input unchanged for symbolic refs (branches, tags, etc.).
+ */
+export function truncateSha(ref: string): string {
+    const match = ref.match(/^([0-9a-f]{40})(.*)$/i);
+    if (match) {
+        return match[1].slice(0, 7) + match[2];
+    }
+    return ref;
+}
+
 /**
  * Creates an invite link URL from the base URL and invite ID
  * @param baseUrl The base URL of the application