From cf01978e71b069cf0de60d1dc2ac7cedac11a571 Mon Sep 17 00:00:00 2001
From: Xubin Ren <52506698+Re-bin@users.noreply.github.com>
Date: Sun, 2 Aug 2026 23:15:54 +0800
Subject: [PATCH] feat(webui): link session mentions

---
 webui/src/components/CliAppMentionText.tsx | 11 ++++++++++-
 webui/src/tests/message-bubble.test.tsx    |  1 +
 webui/src/tests/thread-composer.test.tsx   |  6 +++---
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/webui/src/components/CliAppMentionText.tsx b/webui/src/components/CliAppMentionText.tsx
index e20a5ebd9..f7f6029d3 100644
--- a/webui/src/components/CliAppMentionText.tsx
+++ b/webui/src/components/CliAppMentionText.tsx
@@ -162,7 +162,7 @@ export function SessionMentionToken({
   variant: "composer" | "message";
 }) {
   const testIdPrefix = variant === "composer" ? "composer" : "message";
-  return (
+  const token = (
     <InlineTokenHighlight
       testId={`${testIdPrefix}-session-mention-${mention.name}`}
       title={`Session: ${mention.title || mention.name}`}
@@ -171,6 +171,15 @@ export function SessionMentionToken({
       {label}
     </InlineTokenHighlight>
   );
+  if (variant === "composer") return token;
+  return (
+    <a
+      href={`#/chat/${encodeURIComponent(mention.session_key)}`}
+      className="rounded-sm underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+    >
+      {token}
+    </a>
+  );
 }
 
 export function CliAppMentionToken({
diff --git a/webui/src/tests/message-bubble.test.tsx b/webui/src/tests/message-bubble.test.tsx
index 6f2f46302..6f2621a94 100644
--- a/webui/src/tests/message-bubble.test.tsx
+++ b/webui/src/tests/message-bubble.test.tsx
@@ -530,6 +530,7 @@ describe("MessageBubble", () => {
     const token = screen.getByTestId("message-session-mention-收费设计");
     expect(token).toHaveTextContent("@收费设计");
     expect(token).toHaveAttribute("title", "Session: 收费设计");
+    expect(token.closest("a")).toHaveAttribute("href", "#/chat/websocket%3Apricing");
   });
 
   it("copies completed assistant replies from the action row", async () => {
diff --git a/webui/src/tests/thread-composer.test.tsx b/webui/src/tests/thread-composer.test.tsx
index 6706b5caa..66b351591 100644
--- a/webui/src/tests/thread-composer.test.tsx
+++ b/webui/src/tests/thread-composer.test.tsx
@@ -1564,9 +1564,9 @@ describe("ThreadComposer", () => {
     fireEvent.keyDown(input, { key: "Tab" });
 
     expect(input).toHaveValue("参考 @收费设计 ");
-    expect(screen.getByTestId("composer-session-mention-收费设计")).toHaveTextContent(
-      "@收费设计",
-    );
+    const mention = screen.getByTestId("composer-session-mention-收费设计");
+    expect(mention).toHaveTextContent("@收费设计");
+    expect(mention.closest("a")).toBeNull();
 
     fireEvent.click(screen.getByRole("button", { name: "Send message" }));