From 00a6e720dce121382af23ed75ec575b3862458d8 Mon Sep 17 00:00:00 2001
From: Xubin Ren <52506698+Re-bin@users.noreply.github.com>
Date: Sun, 24 May 2026 17:53:56 +0800
Subject: [PATCH] fix(webui): align inline file references with text

---
 webui/src/components/FileReferenceChip.tsx | 42 ++++++++++++++++------
 webui/src/tests/message-bubble.test.tsx    |  1 +
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/webui/src/components/FileReferenceChip.tsx b/webui/src/components/FileReferenceChip.tsx
index aa170538b..73bd76bf2 100644
--- a/webui/src/components/FileReferenceChip.tsx
+++ b/webui/src/components/FileReferenceChip.tsx
@@ -51,7 +51,7 @@ export function FileReferenceChip({
               data-testid={testId}
               aria-label={fullPath}
               className={cn(
-                "inline-flex max-w-full items-center gap-1 font-medium leading-[inherit]",
+                "inline-flex max-w-full items-baseline gap-[0.28em] font-medium leading-[inherit]",
                 "text-sky-600 transition-colors hover:text-sky-700",
                 "dark:text-sky-300 dark:hover:text-sky-200",
               )}
@@ -161,7 +161,7 @@ function FileReferenceIcon({ kind }: { kind: FileReferenceKind }) {
     return (
       <svg
         aria-hidden
-        className="h-[0.98em] w-[0.98em] shrink-0 text-sky-500 dark:text-sky-300"
+        className="h-[0.92em] w-[0.92em] shrink-0 translate-y-[0.11em] text-sky-500 dark:text-sky-300"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -180,7 +180,7 @@ function FileReferenceIcon({ kind }: { kind: FileReferenceKind }) {
     return (
       <svg
         aria-hidden
-        className="h-[0.98em] w-[0.98em] shrink-0 text-sky-500 dark:text-sky-300"
+        className="h-[0.92em] w-[0.92em] shrink-0 translate-y-[0.11em] text-sky-500 dark:text-sky-300"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -195,16 +195,36 @@ function FileReferenceIcon({ kind }: { kind: FileReferenceKind }) {
   }
   const label = fileKindLabel(kind);
   return (
-    <span
+    <svg
       aria-hidden
-      className={cn(
-        "inline-flex h-[1.05em] min-w-[1.05em] shrink-0 items-center justify-center",
-        "rounded-[4px] bg-sky-500/12 px-[0.22em] text-[0.58em] font-bold uppercase leading-none",
-        "text-sky-600 dark:bg-sky-400/15 dark:text-sky-300",
-      )}
+      className="h-[0.96em] w-[0.96em] shrink-0 translate-y-[0.12em] text-sky-500 dark:text-sky-300"
+      viewBox="0 0 24 24"
+      fill="none"
     >
-      {label}
-    </span>
+      <path
+        d="M7 3.5h6.6L18 7.9V19a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 19V5a1.5 1.5 0 0 1 1.5-1.5Z"
+        fill="currentColor"
+        opacity="0.12"
+      />
+      <path
+        d="M13.5 3.75V8h4.25M7 3.5h6.6L18 7.9V19a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 19V5a1.5 1.5 0 0 1 1.5-1.5Z"
+        stroke="currentColor"
+        strokeWidth="1.75"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <text
+        x="12"
+        y="15.7"
+        textAnchor="middle"
+        fill="currentColor"
+        fontSize={label.length > 1 ? "5.8" : "7.2"}
+        fontWeight="800"
+        letterSpacing="-0.2"
+      >
+        {label}
+      </text>
+    </svg>
   );
 }
 
diff --git a/webui/src/tests/message-bubble.test.tsx b/webui/src/tests/message-bubble.test.tsx
index f110b58f3..079f48b10 100644
--- a/webui/src/tests/message-bubble.test.tsx
+++ b/webui/src/tests/message-bubble.test.tsx
@@ -319,6 +319,7 @@ describe("MessageBubble", () => {
       expect(references[0].parentElement).not.toHaveClass("translate-y-[0.08em]");
       expect(references[0].parentElement).toHaveClass("align-baseline");
       expect(references[0].parentElement).toHaveClass("leading-[inherit]");
+      expect(references[0]).toHaveClass("items-baseline");
       expect(references[0]).toHaveTextContent("MarkdownTextRenderer.tsx");
       expect(references[0]).not.toHaveTextContent("webui/src/components");
       expect(screen.getByText("index.html")).toBeInTheDocument();