Merge upstream/experimental into feat/citations

Resolved conflicts:
- backend/src/gateway/routers/artifacts.py: Keep citations block removal for markdown downloads
- frontend/src/components/workspace/messages/message-list-item.tsx: Keep improved citation handling with rehypePlugins, humanMessagePlugins, and CitationsLoadingIndicator

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

frontend/src/components/landing/hero.tsx

@@ -60,8 +60,7 @@ export function Hero({ className }: { className?: string }) {
           className="mt-8 scale-105 text-center text-2xl text-shadow-sm"
           style={{ color: "rgb(182,182,188)" }}
         >
-          DeerFlow is an open-source SuperAgent that researches, codes, and
-          creates.
+          An open-source SuperAgent harness that researches, codes, and creates.
           <br />
           With the help of sandboxes, memories, tools and skills, it handles
           <br />

frontend/src/components/ui/confetti-button.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import React, { type MouseEventHandler } from "react";
+import confetti from "canvas-confetti";
+
+import { Button } from "@/components/ui/button";
+
+interface ConfettiButtonProps extends React.ComponentProps<typeof Button> {
+  angle?: number;
+  particleCount?: number;
+  startVelocity?: number;
+  spread?: number;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+export function ConfettiButton({
+  className,
+  children,
+  angle = 90,
+  particleCount = 75,
+  startVelocity = 35,
+  spread = 70,
+  onClick,
+  ...props
+}: ConfettiButtonProps) {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {
+    const target = event.currentTarget;
+    if (target) {
+      const rect = target.getBoundingClientRect();
+      confetti({
+        particleCount,
+        startVelocity,
+        angle,
+        spread,
+        origin: {
+          x: (rect.left + rect.width / 2) / window.innerWidth,
+          y: (rect.top + rect.height / 2) / window.innerHeight,
+        },
+      });
+    }
+    onClick?.(event);
+  };
+
+  return (
+    <Button onClick={handleClick} className={className} {...props}>
+      {children}
+    </Button>
+  );
+}

frontend/src/components/workspace/input-box.tsx

@@ -7,6 +7,8 @@ import {
   LightbulbIcon,
   PaperclipIcon,
   PlusIcon,
+  SparklesIcon,
+  RocketIcon,
   ZapIcon,
 } from "lucide-react";
 import { useSearchParams } from "next/navigation";
@@ -30,6 +32,7 @@ import {
   usePromptInputController,
   type PromptInputMessage,
 } from "@/components/ai-elements/prompt-input";
+import { ConfettiButton } from "@/components/ui/confetti-button";
 import {
   DropdownMenuGroup,
   DropdownMenuLabel,
@@ -78,9 +81,9 @@ export function InputBox({
   disabled?: boolean;
   context: Omit<
     AgentThreadContext,
-    "thread_id" | "is_plan_mode" | "thinking_enabled"
+    "thread_id" | "is_plan_mode" | "thinking_enabled" | "subagent_enabled"
   > & {
-    mode: "flash" | "thinking" | "pro" | undefined;
+    mode: "flash" | "thinking" | "pro" | "ultra" | undefined;
   };
   extraHeader?: React.ReactNode;
   isNewThread?: boolean;
@@ -88,9 +91,9 @@ export function InputBox({
   onContextChange?: (
     context: Omit<
       AgentThreadContext,
-      "thread_id" | "is_plan_mode" | "thinking_enabled"
+      "thread_id" | "is_plan_mode" | "thinking_enabled" | "subagent_enabled"
     > & {
-      mode: "flash" | "thinking" | "pro" | undefined;
+      mode: "flash" | "thinking" | "pro" | "ultra" | undefined;
     },
   ) => void;
   onSubmit?: (message: PromptInputMessage) => void;
@@ -129,7 +132,7 @@ export function InputBox({
     [onContextChange, context],
   );
   const handleModeSelect = useCallback(
-    (mode: "flash" | "thinking" | "pro") => {
+    (mode: "flash" | "thinking" | "pro" | "ultra") => {
       onContextChange?.({
         ...context,
         mode,
@@ -203,11 +206,15 @@ export function InputBox({
                 {context.mode === "pro" && (
                   <GraduationCapIcon className="size-3" />
                 )}
+                {context.mode === "ultra" && (
+                  <RocketIcon className="size-3" />
+                )}
               </div>
               <div className="text-xs font-normal">
                 {(context.mode === "flash" && t.inputBox.flashMode) ||
                   (context.mode === "thinking" && t.inputBox.reasoningMode) ||
-                  (context.mode === "pro" && t.inputBox.proMode)}
+                  (context.mode === "pro" && t.inputBox.proMode) ||
+                  (context.mode === "ultra" && t.inputBox.ultraMode)}
               </div>
             </PromptInputActionMenuTrigger>
             <PromptInputActionMenuContent className="w-80">
@@ -304,6 +311,34 @@ export function InputBox({
                       <div className="ml-auto size-4" />
                     )}
                   </PromptInputActionMenuItem>
+                  <PromptInputActionMenuItem
+                    className={cn(
+                      context.mode === "ultra"
+                        ? "text-accent-foreground"
+                        : "text-muted-foreground/65",
+                    )}
+                    onSelect={() => handleModeSelect("ultra")}
+                  >
+                    <div className="flex flex-col gap-2">
+                      <div className="flex items-center gap-1 font-bold">
+                        <RocketIcon
+                          className={cn(
+                            "mr-2 size-4",
+                            context.mode === "ultra" && "text-accent-foreground",
+                          )}
+                        />
+                        {t.inputBox.ultraMode}
+                      </div>
+                      <div className="pl-7 text-xs">
+                        {t.inputBox.ultraModeDescription}
+                      </div>
+                    </div>
+                    {context.mode === "ultra" ? (
+                      <CheckIcon className="ml-auto size-4" />
+                    ) : (
+                      <div className="ml-auto size-4" />
+                    )}
+                  </PromptInputActionMenuItem>
                 </PromptInputActionMenu>
               </DropdownMenuGroup>
             </PromptInputActionMenuContent>
@@ -386,6 +421,14 @@ function SuggestionList() {
   );
   return (
     <Suggestions className="w-fit">
+      <ConfettiButton
+        className="text-muted-foreground cursor-pointer rounded-full px-4 text-xs font-normal"
+        variant="outline"
+        size="sm"
+        onClick={() => handleSuggestionClick(t.inputBox.surpriseMePrompt)}
+      >
+        <SparklesIcon className="size-4" /> {t.inputBox.surpriseMe}
+      </ConfettiButton>
       {t.inputBox.suggestions.map((suggestion) => (
         <Suggestion
           key={suggestion.suggestion}

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

@@ -220,11 +220,13 @@ function ToolCall({
         {Array.isArray(result) && (
           <ChainOfThoughtSearchResults>
             {result.map((item) => (
-              <ChainOfThoughtSearchResult key={item.url}>
-                <a href={item.url} target="_blank" rel="noreferrer">
-                  {item.title}
-                </a>
-              </ChainOfThoughtSearchResult>
+              <Tooltip key={item.url} content={item.snippet}>
+                <ChainOfThoughtSearchResult key={item.url}>
+                  <a href={item.url} target="_blank" rel="noreferrer">
+                    {item.title}
+                  </a>
+                </ChainOfThoughtSearchResult>
+              </Tooltip>
             ))}
           </ChainOfThoughtSearchResults>
         )}

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

@@ -285,7 +285,7 @@ function UploadedFilesList({ files, threadId }: { files: UploadedFile[]; threadI
   if (files.length === 0) return null;
 
   return (
-    <div className="mb-2 flex flex-wrap gap-2">
+    <div className="mb-2 flex flex-wrap justify-end gap-2">
       {files.map((file, index) => (
         <UploadedFileCard key={`${file.path}-${index}`} file={file} threadId={threadId} />
       ))}

frontend/src/components/workspace/settings/about-settings-page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { Streamdown } from "streamdown";
+
+import about from "./about.md";
+
+export function AboutSettingsPage() {
+  return <Streamdown>{about}</Streamdown>;
+}

frontend/src/components/workspace/settings/about.md

@@ -0,0 +1,52 @@
+# 🦌 [About DeerFlow 2.0](https://github.com/bytedance/deer-flow)
+
+> **From Open Source, Back to Open Source**
+
+**DeerFlow** (**D**eep **E**xploration and **E**fficient **R**esearch **Flow**) is a community-driven SuperAgent harness that researches, codes, and creates.
+With the help of sandboxes, memories, tools and skills, it handles
+different levels of tasks that could take minutes to hours.
+
+---
+
+## 🌟 GitHub Repository
+
+Explore DeerFlow on GitHub: [github.com/bytedance/deer-flow](https://github.com/bytedance/deer-flow)
+
+## 🌐 Official Website
+
+Visit the official website of DeerFlow: [deerflow.tech](https://deerflow.tech/)
+
+## 📧 Support
+
+If you have any questions or need help, please contact us at [support@deerflow.tech](mailto:support@deerflow.tech).
+
+---
+
+## 📜 License
+
+DeerFlow is proudly open source and distributed under the **MIT License**.
+
+---
+
+## 🙌 Acknowledgments
+
+We extend our heartfelt gratitude to the open source projects and contributors who have made DeerFlow a reality. We truly stand on the shoulders of giants.
+
+### Core Frameworks
+- **[LangChain](https://github.com/langchain-ai/langchain)**: A phenomenal framework that powers our LLM interactions and chains.
+- **[LangGraph](https://github.com/langchain-ai/langgraph)**: Enabling sophisticated multi-agent orchestration.
+- **[Next.js](https://nextjs.org/)**: A cutting-edge framework for building web applications.
+
+### UI Libraries
+- **[Shadcn](https://ui.shadcn.com/)**: Minimalistic components that power our UI.
+- **[SToneX](https://github.com/stonexer)**: For his invaluable contribution to token-by-token visual effects.
+
+These outstanding projects form the backbone of DeerFlow and exemplify the transformative power of open source collaboration.
+
+### Special Thanks
+Finally, we want to express our heartfelt gratitude to the core authors of DeerFlow 1.0 and 2.0:
+
+- **[Daniel Walnut](https://github.com/hetaoBackend/)**
+- **[Henry Li](https://github.com/magiccube/)**
+
+Without their vision, passion and dedication, `DeerFlow` would not be what it is today.

frontend/src/components/workspace/settings/acknowledge-page.tsx

@@ -1,5 +0,0 @@
-"use client";
-
-export function AcknowledgePage() {
-  return null;
-}

frontend/src/components/workspace/settings/memory-settings-page.tsx

@@ -38,7 +38,6 @@ function memoryToMarkdown(
   const parts: string[] = [];
 
   parts.push(`## ${t.settings.memory.markdown.overview}`);
-  parts.push(`- **${t.common.version}**: \`${memory.version}\``);
   parts.push(
     `- **${t.common.lastUpdated}**: \`${formatTimeAgo(memory.lastUpdated)}\``,
   );

frontend/src/components/workspace/settings/settings-dialog.tsx

@@ -2,12 +2,13 @@
 
 import {
   BellIcon,
+  InfoIcon,
   BrainIcon,
   PaletteIcon,
   SparklesIcon,
   WrenchIcon,
 } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import {
   Dialog,
@@ -16,7 +17,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { AcknowledgePage } from "@/components/workspace/settings/acknowledge-page";
+import { AboutSettingsPage } from "@/components/workspace/settings/about-settings-page";
 import { AppearanceSettingsPage } from "@/components/workspace/settings/appearance-settings-page";
 import { MemorySettingsPage } from "@/components/workspace/settings/memory-settings-page";
 import { NotificationSettingsPage } from "@/components/workspace/settings/notification-settings-page";
@@ -31,7 +32,7 @@ type SettingsSection =
   | "tools"
   | "skills"
   | "notification"
-  | "acknowledge";
+  | "about";
 
 type SettingsDialogProps = React.ComponentProps<typeof Dialog> & {
   defaultSection?: SettingsSection;
@@ -43,6 +44,14 @@ export function SettingsDialog(props: SettingsDialogProps) {
   const [activeSection, setActiveSection] =
     useState<SettingsSection>(defaultSection);
 
+  useEffect(() => {
+    // When opening the dialog, ensure the active section follows the caller's intent.
+    // This allows triggers like "About" to open the dialog directly on that page.
+    if (dialogProps.open) {
+      setActiveSection(defaultSection);
+    }
+  }, [defaultSection, dialogProps.open]);
+
   const sections = useMemo(
     () => [
       {
@@ -62,6 +71,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
       },
       { id: "tools", label: t.settings.sections.tools, icon: WrenchIcon },
       { id: "skills", label: t.settings.sections.skills, icon: SparklesIcon },
+      { id: "about", label: t.settings.sections.about, icon: InfoIcon },
     ],
     [
       t.settings.sections.appearance,
@@ -69,6 +79,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
       t.settings.sections.tools,
       t.settings.sections.skills,
       t.settings.sections.notification,
+      t.settings.sections.about,
     ],
   );
   return (
@@ -122,7 +133,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
                 />
               )}
               {activeSection === "notification" && <NotificationSettingsPage />}
-              {activeSection === "acknowledge" && <AcknowledgePage />}
+              {activeSection === "about" && <AboutSettingsPage />}
             </div>
           </ScrollArea>
         </div>

frontend/src/components/workspace/workspace-nav-menu.tsx

@@ -32,11 +32,18 @@ import { SettingsDialog } from "./settings";
 
 export function WorkspaceNavMenu() {
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [settingsDefaultSection, setSettingsDefaultSection] = useState<
+    "appearance" | "memory" | "tools" | "skills" | "notification" | "about"
+  >("appearance");
   const { open: isSidebarOpen } = useSidebar();
   const { t } = useI18n();
   return (
     <>
-      <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
+      <SettingsDialog
+        open={settingsOpen}
+        onOpenChange={setSettingsOpen}
+        defaultSection={settingsDefaultSection}
+      />
       <SidebarMenu className="w-full">
         <SidebarMenuItem>
           <DropdownMenu>
@@ -64,7 +71,12 @@ export function WorkspaceNavMenu() {
               sideOffset={4}
             >
               <DropdownMenuGroup>
-                <DropdownMenuItem onClick={() => setSettingsOpen(true)}>
+                <DropdownMenuItem
+                  onClick={() => {
+                    setSettingsDefaultSection("appearance");
+                    setSettingsOpen(true);
+                  }}
+                >
                   <Settings2Icon />
                   {t.common.settings}
                 </DropdownMenuItem>
@@ -108,7 +120,12 @@ export function WorkspaceNavMenu() {
                 </a>
               </DropdownMenuGroup>
               <DropdownMenuSeparator />
-              <DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => {
+                  setSettingsDefaultSection("about");
+                  setSettingsOpen(true);
+                }}
+              >
                 <InfoIcon />
                 {t.workspace.about}
               </DropdownMenuItem>