feat(citations): inline citation links with [citation:Title](URL)

- Backend: add citation format to lead_agent and general_purpose prompts
- Add CitationLink component (Badge + HoverCard) for citation cards
- MarkdownContent: detect citation: prefix in link text, render CitationLink
- Message/artifact/subtask: use MarkdownContent or Streamdown with CitationLink
- message-list-item: pass img via components prop (remove isHuman/img)
- message-group, subtask-card: drop unused imports; fix import order (lint)

Co-authored-by: Cursor <cursoragent@cursor.com>

backend/src/agents/lead_agent/prompt.py

@@ -259,6 +259,7 @@ You have access to skills that provide optimized workflows for specific tasks. E
 - Clear and Concise: Avoid over-formatting unless requested
 - Natural Tone: Use paragraphs and prose, not bullet points by default
 - Action-Oriented: Focus on delivering results, not explaining processes
+- Citations: Use `[citation:Title](URL)` format for external sources
 </response_style>
 
 <critical_reminders>

backend/src/subagents/builtins/general_purpose.py

@@ -30,6 +30,7 @@ When you complete the task, provide:
 2. Key findings or results
 3. Any relevant file paths, data, or artifacts created
 4. Issues encountered (if any)
+5. Citations: Use `[citation:Title](URL)` format for external sources
 </output_format>
 
 <working_directory>

frontend/src/app/workspace/chats/[thread_id]/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { Message } from "@langchain/langgraph-sdk";
 import { FilesIcon, XIcon } from "lucide-react";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -30,7 +31,6 @@ import { useNotification } from "@/core/notification/hooks";
 import { useLocalSettings } from "@/core/settings";
 import { type AgentThread, type AgentThreadState } from "@/core/threads";
 import { useSubmitThread, useThreadStream } from "@/core/threads/hooks";
-import type { Message } from "@langchain/langgraph-sdk";
 import {
   pathOfThread,
   textOfMessage,

frontend/src/components/workspace/artifacts/artifact-file-detail.tsx

@@ -38,6 +38,7 @@ import { checkCodeFile, getFileName } from "@/core/utils/files";
 import { env } from "@/env";
 import { cn } from "@/lib/utils";
 
+import { CitationLink } from "../citations/citation-link";
 import { Tooltip } from "../tooltip";
 
 import { useArtifacts } from "./context";
@@ -274,7 +275,11 @@ export function ArtifactFilePreview({
   if (language === "markdown") {
     return (
       <div className="size-full px-4">
-        <Streamdown className="size-full" {...streamdownPlugins}>
+        <Streamdown 
+          className="size-full" 
+          {...streamdownPlugins}
+          components={{ a: CitationLink }}
+        >
           {content ?? ""}
         </Streamdown>
       </div>

frontend/src/components/workspace/citations/citation-link.tsx

@@ -0,0 +1,79 @@
+import { ExternalLinkIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { cn } from "@/lib/utils";
+
+export function CitationLink({ 
+  href, 
+  children,
+  ...props 
+}: ComponentProps<"a">) {
+  const domain = extractDomain(href ?? "");
+  
+  // Priority: children > domain
+  const childrenText = typeof children === "string" ? children : null;
+  const isGenericText = childrenText === "Source" || childrenText === "来源";
+  const displayText = (!isGenericText && childrenText) ?? domain;
+
+  return (
+    <HoverCard closeDelay={0} openDelay={0}>
+      <HoverCardTrigger asChild>
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center"
+          onClick={(e) => e.stopPropagation()}
+          {...props}
+        >
+          <Badge
+            variant="secondary"
+            className="hover:bg-secondary/80 mx-0.5 cursor-pointer gap-1 rounded-full px-2 py-0.5 text-xs font-normal"
+          >
+            {displayText}
+            <ExternalLinkIcon className="size-3" />
+          </Badge>
+        </a>
+      </HoverCardTrigger>
+      <HoverCardContent className={cn("relative w-80 p-0", props.className)}>
+        <div className="p-3">
+          <div className="space-y-1">
+            {displayText && (
+              <h4 className="truncate font-medium text-sm leading-tight">
+                {displayText}
+              </h4>
+            )}
+            {href && (
+              <p className="truncate break-all text-muted-foreground text-xs">
+                {href}
+              </p>
+            )}
+          </div>
+          <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>
+      </HoverCardContent>
+    </HoverCard>
+  );
+}
+
+function extractDomain(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./i, "");
+  } catch {
+    return url;
+  }
+}

frontend/src/components/workspace/messages/markdown-content.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import type { ImgHTMLAttributes } from "react";
-import type { ReactNode } from "react";
+import { useMemo } from "react";
+import type { HTMLAttributes } from "react";
 
 import {
   MessageResponse,
@@ -9,14 +9,15 @@ import {
 } from "@/components/ai-elements/message";
 import { streamdownPlugins } from "@/core/streamdown";
 
+import { CitationLink } from "../citations/citation-link";
+
 export type MarkdownContentProps = {
   content: string;
   isLoading: boolean;
   rehypePlugins: MessageResponseProps["rehypePlugins"];
   className?: string;
   remarkPlugins?: MessageResponseProps["remarkPlugins"];
-  isHuman?: boolean;
-  img?: (props: ImgHTMLAttributes<HTMLImageElement> & { threadId?: string; maxWidth?: string }) => ReactNode;
+  components?: MessageResponseProps["components"];
 };
 
 /** Renders markdown content. */
@@ -25,10 +26,26 @@ export function MarkdownContent({
   rehypePlugins,
   className,
   remarkPlugins = streamdownPlugins.remarkPlugins,
-  img,
+  components: componentsFromProps,
 }: MarkdownContentProps) {
+  const components = useMemo(() => {
+    return {
+      a: (props: HTMLAttributes<HTMLAnchorElement>) => {
+        if (typeof props.children === "string") {
+          const match = /^citation:(.+)$/.exec(props.children);
+          if (match) {
+            const [, text] = match;
+            return <CitationLink {...props}>{text}</CitationLink>;
+          }
+        }
+        return <a {...props} />;
+      },
+      ...componentsFromProps,
+    };
+  }, [componentsFromProps]);
+
   if (!content) return null;
-  const components = img ? { img } : undefined;
+
   return (
     <MessageResponse
       className={className}

frontend/src/components/workspace/messages/message-group.tsx

@@ -22,7 +22,6 @@ import {
   ChainOfThoughtStep,
 } from "@/components/ai-elements/chain-of-thought";
 import { CodeBlock } from "@/components/ai-elements/code-block";
-import { MessageResponse } from "@/components/ai-elements/message";
 import { Button } from "@/components/ui/button";
 import { useI18n } from "@/core/i18n/hooks";
 import {
@@ -30,7 +29,6 @@ import {
   findToolCallResult,
 } from "@/core/messages/utils";
 import { useRehypeSplitWordsIntoSpans } from "@/core/rehype";
-import { streamdownPlugins } from "@/core/streamdown";
 import { extractTitleFromMarkdown } from "@/core/utils/markdown";
 import { env } from "@/env";
 import { cn } from "@/lib/utils";

frontend/src/components/workspace/messages/message-list-item.tsx

@@ -23,6 +23,7 @@ import { humanMessagePlugins } from "@/core/streamdown";
 import { cn } from "@/lib/utils";
 
 import { CopyButton } from "../copy-button";
+
 import { MarkdownContent } from "./markdown-content";
 
 export function MessageListItem({
@@ -158,14 +159,15 @@ function MessageContent_({
         isLoading={isLoading}
         rehypePlugins={[...rehypePlugins, [rehypeKatex, { output: "html" }]]}
         className="my-3"
-        isHuman={false}
-        img={(props) => (
-          <MessageImage
-            {...props}
-            threadId={thread_id}
-            maxWidth="90%"
-          />
-        )}
+        components={{
+          img: (props) => (
+            <MessageImage
+              {...props}
+              threadId={thread_id}
+              maxWidth="90%"
+            />
+          ),
+        }}
       />
     </AIElementMessageContent>
   );

frontend/src/components/workspace/messages/message-list.tsx

@@ -1,3 +1,4 @@
+import type { Message } from "@langchain/langgraph-sdk";
 import type { UseStream } from "@langchain/langgraph-sdk/react";
 
 import {
@@ -18,15 +19,14 @@ import { useRehypeSplitWordsIntoSpans } from "@/core/rehype";
 import type { Subtask } from "@/core/tasks";
 import { useUpdateSubtask } from "@/core/tasks/context";
 import type { AgentThreadState } from "@/core/threads";
-import type { Message } from "@langchain/langgraph-sdk";
 import { cn } from "@/lib/utils";
 
 import { ArtifactFileList } from "../artifacts/artifact-file-list";
 import { StreamingIndicator } from "../streaming-indicator";
 
+import { MarkdownContent } from "./markdown-content";
 import { MessageGroup } from "./message-group";
 import { MessageListItem } from "./message-list-item";
-import { MarkdownContent } from "./markdown-content";
 import { MessageListSkeleton } from "./skeleton";
 import { SubtaskCard } from "./subtask-card";
 

frontend/src/components/workspace/messages/subtask-card.tsx

@@ -19,14 +19,12 @@ import { ShineBorder } from "@/components/ui/shine-border";
 import { useI18n } from "@/core/i18n/hooks";
 import { hasToolCalls } from "@/core/messages/utils";
 import { useRehypeSplitWordsIntoSpans } from "@/core/rehype";
-import {
-  streamdownPlugins,
-  streamdownPluginsWithWordAnimation,
-} from "@/core/streamdown";
+import { streamdownPluginsWithWordAnimation } from "@/core/streamdown";
 import { useSubtask } from "@/core/tasks/context";
 import { explainLastToolCall } from "@/core/tools/utils";
 import { cn } from "@/lib/utils";
 
+import { CitationLink } from "../citations/citation-link";
 import { FlipDisplay } from "../flip-display";
 
 import { MarkdownContent } from "./markdown-content";
@@ -128,7 +126,10 @@ export function SubtaskCard({
           {task.prompt && (
             <ChainOfThoughtStep
               label={
-                <Streamdown {...streamdownPluginsWithWordAnimation}>
+                <Streamdown 
+                  {...streamdownPluginsWithWordAnimation}
+                  components={{ a: CitationLink }}
+                >
                   {task.prompt}
                 </Streamdown>
               }

frontend/src/components/workspace/mode-hover-guide.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { useI18n } from "@/core/i18n/hooks";
+import type { Translations } from "@/core/i18n/locales/types";
+
 import { Tooltip } from "./tooltip";
 
 export type AgentMode = "flash" | "thinking" | "pro" | "ultra";
@@ -8,7 +10,7 @@ export type AgentMode = "flash" | "thinking" | "pro" | "ultra";
 function getModeLabelKey(
   mode: AgentMode,
 ): keyof Pick<
-  import("@/core/i18n/locales/types").Translations["inputBox"],
+  Translations["inputBox"],
   "flashMode" | "reasoningMode" | "proMode" | "ultraMode"
 > {
   switch (mode) {
@@ -26,7 +28,7 @@ function getModeLabelKey(
 function getModeDescriptionKey(
   mode: AgentMode,
 ): keyof Pick<
-  import("@/core/i18n/locales/types").Translations["inputBox"],
+  Translations["inputBox"],
   "flashModeDescription" | "reasoningModeDescription" | "proModeDescription" | "ultraModeDescription"
 > {
   switch (mode) {