From 7bf7469d9002d706e97199e43e6ad51dd1fe5c79 Mon Sep 17 00:00:00 2001
From: chengyongru <61816729+chengyongru@users.noreply.github.com>
Date: Wed, 22 Jul 2026 11:47:45 +0800
Subject: [PATCH] feat(webui): show pin indicators for pinned chats (#5025)

---
 webui/src/components/ChatList.tsx  | 20 ++++++++++++++++++--
 webui/src/tests/chat-list.test.tsx | 26 ++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/webui/src/components/ChatList.tsx b/webui/src/components/ChatList.tsx
index 889e1a10..9d7bba1b 100644
--- a/webui/src/components/ChatList.tsx
+++ b/webui/src/components/ChatList.tsx
@@ -274,6 +274,7 @@ export const ChatList = memo(function ChatList({
                                 <span className="min-w-0 flex-1 truncate font-medium leading-5">
                                   {title}
                                 </span>
+                                {isPinned ? <PinnedChatIndicator label={labels.pinned} /> : null}
                                 {timestamp ? (
                                   <span className="shrink-0 text-[11.5px] font-medium text-muted-foreground/58">
                                     {timestamp}
@@ -281,8 +282,11 @@ export const ChatList = memo(function ChatList({
                                 ) : null}
                               </span>
                             ) : (
-                              <span className="block w-full truncate font-medium leading-5">
-                                {title}
+                              <span className="flex w-full min-w-0 items-center gap-1.5">
+                                <span className="min-w-0 flex-1 truncate font-medium leading-5">
+                                  {title}
+                                </span>
+                                {isPinned ? <PinnedChatIndicator label={labels.pinned} /> : null}
                               </span>
                             )}
                             {showPreview ? (
@@ -488,6 +492,18 @@ function ChatsGroupHeader({ label }: { label: string }) {
   );
 }
 
+function PinnedChatIndicator({ label }: { label: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      title={label}
+      className="inline-flex shrink-0 items-center text-muted-foreground/65"
+    >
+      <Pin className="h-3.5 w-3.5" aria-hidden="true" />
+    </span>
+  );
+}
+
 function ChatsFoldFooter({
   folded,
   hiddenCount,
diff --git a/webui/src/tests/chat-list.test.tsx b/webui/src/tests/chat-list.test.tsx
index 439c7657..88ed2dc9 100644
--- a/webui/src/tests/chat-list.test.tsx
+++ b/webui/src/tests/chat-list.test.tsx
@@ -56,6 +56,32 @@ describe("ChatList", () => {
     expect(text.indexOf("Middle chat")).toBeLessThan(text.indexOf("Older chat"));
   });
 
+  it("shows a pin indicator for pinned chats", () => {
+    const sessions = [
+      session({ chatId: "pinned", title: "Pinned chat" }),
+      session({ chatId: "normal", title: "Normal chat" }),
+    ];
+
+    render(
+      <ChatList
+        sessions={sessions}
+        activeKey={null}
+        onSelect={vi.fn()}
+        onRequestDelete={vi.fn()}
+        onTogglePin={vi.fn()}
+        onRequestRename={vi.fn()}
+        onToggleArchive={vi.fn()}
+        pinnedKeys={["websocket:pinned"]}
+      />,
+    );
+
+    const pinnedSection = screen.getByRole("region", { name: "Pinned" });
+    expect(within(pinnedSection).getByTitle("Pinned")).toBeInTheDocument();
+    expect(
+      within(screen.getByRole("region", { name: "Earlier" })).queryByTitle("Pinned"),
+    ).not.toBeInTheDocument();
+  });
+
   it("groups WebUI chats by workspace project while preserving in-project sorting and activity", () => {
     const sessions = [
       session({