feat: add inline citations and thread management features

Citations: - Add citations parsing utilities for extracting source references from AI responses - Render inline citations as hover card badges in message content - Display citation cards with title, URL, and description on hover - Add citation badge rendering in artifact markdown preview - Update prompt to guide AI to output citations in correct format Thread Management: - Add rename functionality for chat threads with dialog UI - Add share functionality to copy thread link to clipboard - Share links use Vercel URL for production accessibility - Add useRenameThread hook for thread title updates i18n: - Add translations for rename, share, cancel, save, and linkCopied Co-authored-by: Cursor <cursoragent@cursor.com>
2026-04-03 14:22:13 +08:00 · 2026-01-28 19:15:11 +08:00
parent a010953880
commit f8d2d88727
10 changed files with 658 additions and 66 deletions
--- a/backend/src/agents/lead_agent/prompt.py
+++ b/backend/src/agents/lead_agent/prompt.py
@@ -122,6 +122,34 @@ You have access to skills that provide optimized workflows for specific tasks. E
 - Action-Oriented: Focus on delivering results, not explaining processes
 </response_style>

+<citations_format>
+**AUTOMATIC CITATION REQUIREMENT**: After using web_search tool, you MUST include citations in your response.
+
+**FORMAT** - Your response MUST start with a citations block, then content with inline links:
+<citations>
+{{"id": "cite-1", "title": "Page Title", "url": "https://example.com/page", "snippet": "Brief description"}}
+{{"id": "cite-2", "title": "Another Source", "url": "https://another.com/article", "snippet": "What this covers"}}
+</citations>
+
+Then your content: According to [Source Name](url), the findings show... [Another Source](url2) also reports...
+
+**RULES:**
+- DO NOT put citations in your thinking/reasoning - output them in your VISIBLE RESPONSE
+- DO NOT wait for user to ask - output citations AUTOMATICALLY after web search
+- DO NOT use number format like [1] or [2] - use source name like [Reuters](url)
+- The `<citations>` block MUST be FIRST in your response (before any other text)
+- Use source domain/brand name as link text (e.g., "Reuters", "TechCrunch", "智源研究院")
+- The URL in markdown link must match a URL in your citations block
+
+**IF writing markdown files**: When user asks you to create a report/document and you use write_file, use `[Source Name](url)` links in the file content (no <citations> block needed in files).
+
+**Example:**
+<citations>
+{{"id": "cite-1", "title": "AI Trends 2026", "url": "https://techcrunch.com/ai-trends", "snippet": "Tech industry predictions"}}
+</citations>
+Based on [TechCrunch](https://techcrunch.com/ai-trends), the key AI trends for 2026 include...
+</citations_format>
+
 <critical_reminders>
 - **Clarification First**: ALWAYS clarify unclear/missing/ambiguous requirements BEFORE starting work - never assume or guess
 - Skill First: Always load the relevant skill before starting **complex** tasks.
--- a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
+++ b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
@@ -2,6 +2,7 @@ import {
  Code2Icon,
  CopyIcon,
  DownloadIcon,
+  ExternalLinkIcon,
  EyeIcon,
  SquareArrowOutUpRightIcon,
  XIcon,
@@ -18,6 +19,13 @@ import {
  ArtifactHeader,
  ArtifactTitle,
 } from "@/components/ai-elements/artifact";
+import {
+  InlineCitationCard,
+  InlineCitationCardBody,
+  InlineCitationSource,
+} from "@/components/ai-elements/inline-citation";
+import { Badge } from "@/components/ui/badge";
+import { HoverCardTrigger } from "@/components/ui/hover-card";
 import { Select, SelectItem } from "@/components/ui/select";
 import {
  SelectContent,
@@ -29,6 +37,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { CodeEditor } from "@/components/workspace/code-editor";
 import { useArtifactContent } from "@/core/artifacts/hooks";
 import { urlOfArtifact } from "@/core/artifacts/utils";
+import { extractDomainFromUrl } from "@/core/citations";
 import { useI18n } from "@/core/i18n/hooks";
 import { checkCodeFile, getFileName } from "@/core/utils/files";
 import { cn } from "@/lib/utils";
@@ -216,7 +225,38 @@ export function ArtifactFilePreview({
  if (language === "markdown") {
    return (
      <div className="size-full px-4">
-        <Streamdown className="size-full">{content ?? ""}</Streamdown>
+        <Streamdown
+          className="size-full"
+          components={{
+            a: ({
+              href,
+              children,
+            }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+              if (!href) {
+                return <span>{children}</span>;
+              }
+
+              // Check if it's an external link (http/https)
+              const isExternalLink =
+                href.startsWith("http://") || href.startsWith("https://");
+
+              if (isExternalLink) {
+                return (
+                  <ExternalLinkBadge href={href}>{children}</ExternalLinkBadge>
+                );
+              }
+
+              // Internal/anchor link
+              return (
+                <a href={href} className="text-primary hover:underline">
+                  {children}
+                </a>
+              );
+            },
+          }}
+        >
+          {content ?? ""}
+        </Streamdown>
      </div>
    );
  }
@@ -230,3 +270,51 @@ export function ArtifactFilePreview({
  }
  return null;
 }
+
+/**
+ * External link badge component for artifact preview
+ */
+function ExternalLinkBadge({
+  href,
+  children,
+}: {
+  href: string;
+  children: React.ReactNode;
+}) {
+  const domain = extractDomainFromUrl(href);
+
+  return (
+    <InlineCitationCard>
+      <HoverCardTrigger asChild>
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center"
+        >
+          <Badge
+            variant="secondary"
+            className="mx-0.5 cursor-pointer gap-1 rounded-full px-2 py-0.5 text-xs font-normal hover:bg-secondary/80"
+          >
+            {children ?? domain}
+            <ExternalLinkIcon className="size-3" />
+          </Badge>
+        </a>
+      </HoverCardTrigger>
+      <InlineCitationCardBody>
+        <div className="p-3">
+          <InlineCitationSource title={domain} url={href} />
+          <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary mt-2 inline-flex items-center gap-1 text-xs hover:underline"
+          >
+            Visit source
+            <ExternalLinkIcon className="size-3" />
+          </a>
+        </div>
+      </InlineCitationCardBody>
+    </InlineCitationCard>
+  );
+}
--- a/frontend/src/components/workspace/messages/message-list-item.tsx
+++ b/frontend/src/components/workspace/messages/message-list-item.tsx
@@ -1,14 +1,28 @@
 import type { Message } from "@langchain/langgraph-sdk";
+import { ExternalLinkIcon, LinkIcon } from "lucide-react";
 import { useParams } from "next/navigation";
 import { memo, useMemo } from "react";

+import {
+  InlineCitationCard,
+  InlineCitationCardBody,
+  InlineCitationSource,
+} from "@/components/ai-elements/inline-citation";
 import {
  Message as AIElementMessage,
  MessageContent as AIElementMessageContent,
  MessageResponse as AIElementMessageResponse,
  MessageToolbar,
 } from "@/components/ai-elements/message";
+import { Badge } from "@/components/ui/badge";
+import { HoverCardTrigger } from "@/components/ui/hover-card";
 import { resolveArtifactURL } from "@/core/artifacts/utils";
+import {
+  type Citation,
+  buildCitationMap,
+  extractDomainFromUrl,
+  parseCitations,
+} from "@/core/citations";
 import {
  extractContentFromMessage,
  extractReasoningContentFromMessage,
@@ -68,20 +82,63 @@ function MessageContent_({
  isLoading?: boolean;
 }) {
  const rehypePlugins = useRehypeSplitWordsIntoSpans(isLoading);
-  const content = useMemo(() => {
+
+  // Extract and parse citations from message content
+  const { citations, cleanContent } = useMemo(() => {
    const reasoningContent = extractReasoningContentFromMessage(message);
-    const content = extractContentFromMessage(message);
-    if (!isLoading && reasoningContent && !content) {
-      return reasoningContent;
+    const rawContent = extractContentFromMessage(message);
+    if (!isLoading && reasoningContent && !rawContent) {
+      return { citations: [], cleanContent: reasoningContent };
    }
-    return content;
+    return parseCitations(rawContent ?? "");
  }, [isLoading, message]);
+
+  // Build citation map for quick URL lookup
+  const citationMap = useMemo(
+    () => buildCitationMap(citations),
+    [citations],
+  );
+
  const { thread_id } = useParams<{ thread_id: string }>();
+
  return (
    <AIElementMessageContent className={className}>
+      {/* Citations list at the top */}
+      {citations.length > 0 && <CitationsList citations={citations} />}
+
      <AIElementMessageResponse
        rehypePlugins={rehypePlugins}
        components={{
+          a: ({
+            href,
+            children,
+          }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+            if (!href) {
+              return <span>{children}</span>;
+            }
+
+            // Check if this link matches a citation
+            const citation = citationMap.get(href);
+            if (citation) {
+              return (
+                <CitationLink citation={citation} href={href}>
+                  {children}
+                </CitationLink>
+              );
+            }
+
+            // Regular external link
+            return (
+              <a
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary underline underline-offset-2 hover:no-underline"
+              >
+                {children}
+              </a>
+            );
+          },
          img: ({ src, alt }: React.ImgHTMLAttributes<HTMLImageElement>) => {
            if (!src) return null;
            if (typeof src !== "string") {
@@ -109,9 +166,131 @@ function MessageContent_({
          },
        }}
      >
-        {content}
+        {cleanContent}
      </AIElementMessageResponse>
    </AIElementMessageContent>
  );
 }
+
+/**
+ * Citations list component that displays all sources at the top
+ */
+function CitationsList({ citations }: { citations: Citation[] }) {
+  if (citations.length === 0) return null;
+
+  return (
+    <div className="mb-4 rounded-lg border bg-muted/30 p-3">
+      <div className="mb-2 flex items-center gap-2 text-sm font-medium text-muted-foreground">
+        <LinkIcon className="size-4" />
+        <span>Sources ({citations.length})</span>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        {citations.map((citation) => (
+          <CitationBadge key={citation.id} citation={citation} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Single citation badge in the citations list
+ */
+function CitationBadge({ citation }: { citation: Citation }) {
+  const domain = extractDomainFromUrl(citation.url);
+
+  return (
+    <InlineCitationCard>
+      <HoverCardTrigger asChild>
+        <a
+          href={citation.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex"
+        >
+          <Badge
+            variant="secondary"
+            className="cursor-pointer gap-1 rounded-full px-2.5 py-1 text-xs font-normal hover:bg-secondary/80"
+          >
+            {domain}
+            <ExternalLinkIcon className="size-3" />
+          </Badge>
+        </a>
+      </HoverCardTrigger>
+      <InlineCitationCardBody>
+        <div className="p-3">
+          <InlineCitationSource
+            title={citation.title}
+            url={citation.url}
+            description={citation.snippet}
+          />
+          <a
+            href={citation.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary mt-2 inline-flex items-center gap-1 text-xs hover:underline"
+          >
+            Visit source
+            <ExternalLinkIcon className="size-3" />
+          </a>
+        </div>
+      </InlineCitationCardBody>
+    </InlineCitationCard>
+  );
+}
+
+/**
+ * Citation link component that renders as a hover card badge
+ */
+function CitationLink({
+  citation,
+  href,
+  children,
+}: {
+  citation: Citation;
+  href: string;
+  children: React.ReactNode;
+}) {
+  const domain = extractDomainFromUrl(href);
+
+  return (
+    <InlineCitationCard>
+      <HoverCardTrigger asChild>
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Badge
+            variant="secondary"
+            className="mx-0.5 cursor-pointer gap-1 rounded-full px-2 py-0.5 text-xs font-normal hover:bg-secondary/80"
+          >
+            {children ?? domain}
+            <ExternalLinkIcon className="size-3" />
+          </Badge>
+        </a>
+      </HoverCardTrigger>
+      <InlineCitationCardBody>
+        <div className="p-3">
+          <InlineCitationSource
+            title={citation.title}
+            url={href}
+            description={citation.snippet}
+          />
+          <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary mt-2 inline-flex items-center gap-1 text-xs hover:underline"
+          >
+            Visit source
+            <ExternalLinkIcon className="size-3" />
+          </a>
+        </div>
+      </InlineCitationCardBody>
+    </InlineCitationCard>
+  );
+}
 const MessageContent = memo(MessageContent_);
--- a/frontend/src/components/workspace/recent-chat-list.tsx
+++ b/frontend/src/components/workspace/recent-chat-list.tsx
@@ -1,16 +1,27 @@
 "use client";

-import { MoreHorizontal, Trash2 } from "lucide-react";
+import { MoreHorizontal, Pencil, Share2, Trash2 } from "lucide-react";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";

+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
+  DropdownMenuSeparator,
  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
 import {
  SidebarGroup,
  SidebarGroupContent,
@@ -21,7 +32,11 @@ import {
  SidebarMenuItem,
 } from "@/components/ui/sidebar";
 import { useI18n } from "@/core/i18n/hooks";
-import { useDeleteThread, useThreads } from "@/core/threads/hooks";
+import {
+  useDeleteThread,
+  useRenameThread,
+  useThreads,
+} from "@/core/threads/hooks";
 import { pathOfThread, titleOfThread } from "@/core/threads/utils";
 import { env } from "@/env";

@@ -32,6 +47,13 @@ export function RecentChatList() {
  const { thread_id: threadIdFromPath } = useParams<{ thread_id: string }>();
  const { data: threads = [] } = useThreads();
  const { mutate: deleteThread } = useDeleteThread();
+  const { mutate: renameThread } = useRenameThread();
+
+  // Rename dialog state
+  const [renameDialogOpen, setRenameDialogOpen] = useState(false);
+  const [renameThreadId, setRenameThreadId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState("");
+
  const handleDelete = useCallback(
    (threadId: string) => {
      deleteThread({ threadId });
@@ -50,67 +72,155 @@ export function RecentChatList() {
    },
    [deleteThread, router, threadIdFromPath, threads],
  );
+
+  const handleRenameClick = useCallback(
+    (threadId: string, currentTitle: string) => {
+      setRenameThreadId(threadId);
+      setRenameValue(currentTitle);
+      setRenameDialogOpen(true);
+    },
+    [],
+  );
+
+  const handleRenameSubmit = useCallback(() => {
+    if (renameThreadId && renameValue.trim()) {
+      renameThread({ threadId: renameThreadId, title: renameValue.trim() });
+      setRenameDialogOpen(false);
+      setRenameThreadId(null);
+      setRenameValue("");
+    }
+  }, [renameThread, renameThreadId, renameValue]);
+
+  const handleShare = useCallback(
+    async (threadId: string) => {
+      // Always use Vercel URL for sharing so others can access
+      const VERCEL_URL = "https://deer-flow-v2.vercel.app";
+      const isLocalhost =
+        window.location.hostname === "localhost" ||
+        window.location.hostname === "127.0.0.1";
+      // On localhost: use Vercel URL; On production: use current origin
+      const baseUrl = isLocalhost ? VERCEL_URL : window.location.origin;
+      const shareUrl = `${baseUrl}/workspace/chats/${threadId}`;
+      try {
+        await navigator.clipboard.writeText(shareUrl);
+        toast.success(t.clipboard.linkCopied);
+      } catch {
+        toast.error(t.clipboard.failedToCopyToClipboard);
+      }
+    },
+    [t],
+  );
  if (threads.length === 0) {
    return null;
  }
  return (
-    <SidebarGroup>
-      <SidebarGroupLabel>
-        {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY !== "true"
-          ? t.sidebar.recentChats
-          : t.sidebar.demoChats}
-      </SidebarGroupLabel>
-      <SidebarGroupContent className="group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0">
-        <SidebarMenu>
-          <div className="flex w-full flex-col gap-1">
-            {threads.map((thread) => {
-              const isActive = pathOfThread(thread.thread_id) === pathname;
-              return (
-                <SidebarMenuItem
-                  key={thread.thread_id}
-                  className="group/side-menu-item"
-                >
-                  <SidebarMenuButton isActive={isActive} asChild>
-                    <div>
-                      <Link
-                        className="text-muted-foreground block w-full whitespace-nowrap group-hover/side-menu-item:overflow-hidden"
-                        href={pathOfThread(thread.thread_id)}
-                      >
-                        {titleOfThread(thread)}
-                      </Link>
-                      {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY !== "true" && (
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <SidebarMenuAction
-                              showOnHover
-                              className="bg-background/50 hover:bg-background"
+    <>
+      <SidebarGroup>
+        <SidebarGroupLabel>
+          {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY !== "true"
+            ? t.sidebar.recentChats
+            : t.sidebar.demoChats}
+        </SidebarGroupLabel>
+        <SidebarGroupContent className="group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0">
+          <SidebarMenu>
+            <div className="flex w-full flex-col gap-1">
+              {threads.map((thread) => {
+                const isActive = pathOfThread(thread.thread_id) === pathname;
+                return (
+                  <SidebarMenuItem
+                    key={thread.thread_id}
+                    className="group/side-menu-item"
+                  >
+                    <SidebarMenuButton isActive={isActive} asChild>
+                      <div>
+                        <Link
+                          className="text-muted-foreground block w-full whitespace-nowrap group-hover/side-menu-item:overflow-hidden"
+                          href={pathOfThread(thread.thread_id)}
+                        >
+                          {titleOfThread(thread)}
+                        </Link>
+                        {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY !== "true" && (
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <SidebarMenuAction
+                                showOnHover
+                                className="bg-background/50 hover:bg-background"
+                              >
+                                <MoreHorizontal />
+                                <span className="sr-only">{t.common.more}</span>
+                              </SidebarMenuAction>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent
+                              className="w-48 rounded-lg"
+                              side={"right"}
+                              align={"start"}
                            >
-                              <MoreHorizontal />
-                              <span className="sr-only">{t.common.more}</span>
-                            </SidebarMenuAction>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent
-                            className="w-48 rounded-lg"
-                            side={"right"}
-                            align={"start"}
-                          >
-                            <DropdownMenuItem
-                              onSelect={() => handleDelete(thread.thread_id)}
-                            >
-                              <Trash2 className="text-muted-foreground" />
-                              <span>{t.common.delete}</span>
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      )}
-                    </div>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              );
-            })}
+                              <DropdownMenuItem
+                                onSelect={() =>
+                                  handleRenameClick(
+                                    thread.thread_id,
+                                    titleOfThread(thread),
+                                  )
+                                }
+                              >
+                                <Pencil className="text-muted-foreground" />
+                                <span>{t.common.rename}</span>
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                onSelect={() => handleShare(thread.thread_id)}
+                              >
+                                <Share2 className="text-muted-foreground" />
+                                <span>{t.common.share}</span>
+                              </DropdownMenuItem>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem
+                                onSelect={() => handleDelete(thread.thread_id)}
+                              >
+                                <Trash2 className="text-muted-foreground" />
+                                <span>{t.common.delete}</span>
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        )}
+                      </div>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
+            </div>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+
+      {/* Rename Dialog */}
+      <Dialog open={renameDialogOpen} onOpenChange={setRenameDialogOpen}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>{t.common.rename}</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">
+            <Input
+              value={renameValue}
+              onChange={(e) => setRenameValue(e.target.value)}
+              placeholder={t.common.rename}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  handleRenameSubmit();
+                }
+              }}
+            />
          </div>
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setRenameDialogOpen(false)}
+            >
+              {t.common.cancel}
+            </Button>
+            <Button onClick={handleRenameSubmit}>{t.common.save}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
  );
 }
--- a/frontend/src/core/citations/index.ts
+++ b/frontend/src/core/citations/index.ts
@@ -0,0 +1,8 @@
+export {
+  parseCitations,
+  buildCitationMap,
+  extractDomainFromUrl,
+  isCitationsBlockIncomplete,
+} from "./utils";
+
+export type { Citation, ParseCitationsResult } from "./utils";
--- a/frontend/src/core/citations/utils.ts
+++ b/frontend/src/core/citations/utils.ts
@@ -0,0 +1,124 @@
+/**
+ * Citation data structure representing a source reference
+ */
+export interface Citation {
+  id: string;
+  title: string;
+  url: string;
+  snippet: string;
+}
+
+/**
+ * Result of parsing citations from content
+ */
+export interface ParseCitationsResult {
+  citations: Citation[];
+  cleanContent: string;
+}
+
+/**
+ * Parse citations block from message content.
+ *
+ * The citations block format:
+ * <citations>
+ * {"id": "cite-1", "title": "Page Title", "url": "https://example.com", "snippet": "Description"}
+ * {"id": "cite-2", "title": "Another Page", "url": "https://example2.com", "snippet": "Description"}
+ * </citations>
+ *
+ * @param content - The raw message content that may contain a citations block
+ * @returns Object containing parsed citations array and content with citations block removed
+ */
+export function parseCitations(content: string): ParseCitationsResult {
+  if (!content) {
+    return { citations: [], cleanContent: content };
+  }
+
+  // Match the citations block at the start of content (with possible leading whitespace)
+  const citationsRegex = /^\s*<citations>([\s\S]*?)<\/citations>/;
+  const match = citationsRegex.exec(content);
+
+  if (!match) {
+    return { citations: [], cleanContent: content };
+  }
+
+  const citationsBlock = match[1] ?? "";
+  const citations: Citation[] = [];
+
+  // Parse each line as JSON
+  const lines = citationsBlock.split("\n");
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (trimmed?.startsWith("{")) {
+      try {
+        const citation = JSON.parse(trimmed) as Citation;
+        // Validate required fields
+        if (citation.id && citation.url) {
+          citations.push({
+            id: citation.id,
+            title: citation.title || "",
+            url: citation.url,
+            snippet: citation.snippet || "",
+          });
+        }
+      } catch {
+        // Skip invalid JSON lines - this can happen during streaming
+      }
+    }
+  }
+
+  // Remove the citations block from content
+  const cleanContent = content.replace(citationsRegex, "").trim();
+
+  return { citations, cleanContent };
+}
+
+/**
+ * Build a map from URL to Citation for quick lookup
+ *
+ * @param citations - Array of citations
+ * @returns Map with URL as key and Citation as value
+ */
+export function buildCitationMap(
+  citations: Citation[],
+): Map<string, Citation> {
+  const map = new Map<string, Citation>();
+  for (const citation of citations) {
+    map.set(citation.url, citation);
+  }
+  return map;
+}
+
+/**
+ * Extract the domain name from a URL for display
+ *
+ * @param url - Full URL string
+ * @returns Domain name or the original URL if parsing fails
+ */
+export function extractDomainFromUrl(url: string): string {
+  try {
+    const urlObj = new URL(url);
+    // Remove 'www.' prefix if present
+    return urlObj.hostname.replace(/^www\./, "");
+  } catch {
+    return url;
+  }
+}
+
+/**
+ * Check if content is still receiving the citations block (streaming)
+ * This helps determine if we should wait before parsing
+ *
+ * @param content - The current content being streamed
+ * @returns true if citations block appears to be incomplete
+ */
+export function isCitationsBlockIncomplete(content: string): boolean {
+  if (!content) {
+    return false;
+  }
+
+  // Check if we have an opening tag but no closing tag
+  const hasOpenTag = content.includes("<citations>");
+  const hasCloseTag = content.includes("</citations>");
+
+  return hasOpenTag && !hasCloseTag;
+}
--- a/frontend/src/core/i18n/locales/en-US.ts
+++ b/frontend/src/core/i18n/locales/en-US.ts
@@ -11,6 +11,8 @@ export const enUS: Translations = {
    home: "Home",
    settings: "Settings",
    delete: "Delete",
+    rename: "Rename",
+    share: "Share",
    openInNewWindow: "Open in new window",
    close: "Close",
    more: "More",
@@ -24,6 +26,8 @@ export const enUS: Translations = {
    loading: "Loading...",
    code: "Code",
    preview: "Preview",
+    cancel: "Cancel",
+    save: "Save",
  },

  // Welcome
@@ -38,6 +42,7 @@ export const enUS: Translations = {
    copyToClipboard: "Copy to clipboard",
    copiedToClipboard: "Copied to clipboard",
    failedToCopyToClipboard: "Failed to copy to clipboard",
+    linkCopied: "Link copied to clipboard",
  },

  // Input Box
--- a/frontend/src/core/i18n/locales/types.ts
+++ b/frontend/src/core/i18n/locales/types.ts
@@ -9,6 +9,8 @@ export interface Translations {
    home: string;
    settings: string;
    delete: string;
+    rename: string;
+    share: string;
    openInNewWindow: string;
    close: string;
    more: string;
@@ -22,6 +24,8 @@ export interface Translations {
    loading: string;
    code: string;
    preview: string;
+    cancel: string;
+    save: string;
  };

  // Welcome
@@ -35,6 +39,7 @@ export interface Translations {
    copyToClipboard: string;
    copiedToClipboard: string;
    failedToCopyToClipboard: string;
+    linkCopied: string;
  };

  // Input Box
--- a/frontend/src/core/i18n/locales/zh-CN.ts
+++ b/frontend/src/core/i18n/locales/zh-CN.ts
@@ -11,6 +11,8 @@ export const zhCN: Translations = {
    home: "首页",
    settings: "设置",
    delete: "删除",
+    rename: "重命名",
+    share: "分享",
    openInNewWindow: "在新窗口打开",
    close: "关闭",
    more: "更多",
@@ -24,6 +26,8 @@ export const zhCN: Translations = {
    loading: "加载中...",
    code: "代码",
    preview: "预览",
+    cancel: "取消",
+    save: "保存",
  },

  // Welcome
@@ -38,6 +42,7 @@ export const zhCN: Translations = {
    copyToClipboard: "复制到剪贴板",
    copiedToClipboard: "已复制到剪贴板",
    failedToCopyToClipboard: "复制到剪贴板失败",
+    linkCopied: "链接已复制到剪贴板",
  },

  // Input Box
--- a/frontend/src/core/threads/hooks.ts
+++ b/frontend/src/core/threads/hooks.ts
@@ -186,3 +186,43 @@ export function useDeleteThread() {
    },
  });
 }
+
+export function useRenameThread() {
+  const queryClient = useQueryClient();
+  const apiClient = getAPIClient();
+  return useMutation({
+    mutationFn: async ({
+      threadId,
+      title,
+    }: {
+      threadId: string;
+      title: string;
+    }) => {
+      await apiClient.threads.update(threadId, {
+        metadata: { title },
+      });
+    },
+    onSuccess(_, { threadId, title }) {
+      queryClient.setQueriesData(
+        {
+          queryKey: ["threads", "search"],
+          exact: false,
+        },
+        (oldData: Array<AgentThread>) => {
+          return oldData.map((t) => {
+            if (t.thread_id === threadId) {
+              return {
+                ...t,
+                metadata: {
+                  ...t.metadata,
+                  title,
+                },
+              };
+            }
+            return t;
+          });
+        },
+      );
+    },
+  });
+}