From 8a2351593cd9609f0ef5177ffe18c62c1b838183 Mon Sep 17 00:00:00 2001
From: Henry Li <henry1943@163.com>
Date: Sun, 8 Feb 2026 23:22:51 +0800
Subject: [PATCH] feat: add special effect for Ultra mode

---
 .../workspace/messages/subtask-card.tsx       | 186 +++++++++---------
 frontend/src/styles/globals.css               |  19 +-
 2 files changed, 115 insertions(+), 90 deletions(-)

diff --git a/frontend/src/components/workspace/messages/subtask-card.tsx b/frontend/src/components/workspace/messages/subtask-card.tsx
index 3ffc60d..772bc9c 100644
--- a/frontend/src/components/workspace/messages/subtask-card.tsx
+++ b/frontend/src/components/workspace/messages/subtask-card.tsx
@@ -53,103 +53,113 @@ export function SubtaskCard({
       className={cn("relative w-full gap-2 rounded-lg border py-0", className)}
       open={!collapsed}
     >
+      <div
+        className={cn(
+          "ambilight z-[-1]",
+          task.status === "in_progress" ? "enabled" : "",
+        )}
+      ></div>
       {task.status === "in_progress" && (
-        <ShineBorder
-          borderWidth={1.5}
-          shineColor={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
-        />
+        <>
+          <ShineBorder
+            borderWidth={1.5}
+            shineColor={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
+          />
+        </>
       )}
-      <div className="flex w-full items-center justify-between p-0.5">
-        <Button
-          className="w-full items-start justify-start text-left"
-          variant="ghost"
-          onClick={() => setCollapsed(!collapsed)}
-        >
-          <div className="flex w-full items-center justify-between">
-            <ChainOfThoughtStep
-              className="font-normal"
-              label={
-                task.status === "in_progress" ? (
-                  <Shimmer duration={3} spread={3}>
-                    {task.description}
-                  </Shimmer>
-                ) : (
-                  task.description
-                )
-              }
-              icon={<ClipboardListIcon />}
-            ></ChainOfThoughtStep>
-            <div className="flex items-center gap-1">
-              {collapsed && (
-                <div
-                  className={cn(
-                    "text-muted-foreground flex items-center gap-1 text-xs font-normal",
-                    task.status === "failed" ? "text-red-500 opacity-67" : "",
-                  )}
-                >
-                  {icon}
-                  <FlipDisplay
-                    className="pb-1"
-                    uniqueKey={task.latestMessage?.id ?? ""}
+      <div className="bg-background/95 flex w-full flex-col rounded-lg">
+        <div className="flex w-full items-center justify-between p-0.5">
+          <Button
+            className="w-full items-start justify-start text-left"
+            variant="ghost"
+            onClick={() => setCollapsed(!collapsed)}
+          >
+            <div className="flex w-full items-center justify-between">
+              <ChainOfThoughtStep
+                className="font-normal"
+                label={
+                  task.status === "in_progress" ? (
+                    <Shimmer duration={3} spread={3}>
+                      {task.description}
+                    </Shimmer>
+                  ) : (
+                    task.description
+                  )
+                }
+                icon={<ClipboardListIcon />}
+              ></ChainOfThoughtStep>
+              <div className="flex items-center gap-1">
+                {collapsed && (
+                  <div
+                    className={cn(
+                      "text-muted-foreground flex items-center gap-1 text-xs font-normal",
+                      task.status === "failed" ? "text-red-500 opacity-67" : "",
+                    )}
                   >
-                    {task.status === "in_progress" &&
-                    task.latestMessage &&
-                    hasToolCalls(task.latestMessage)
-                      ? explainLastToolCall(task.latestMessage, t)
-                      : t.subtasks[task.status]}
-                  </FlipDisplay>
-                </div>
-              )}
-              <ChevronUp
-                className={cn(
-                  "text-muted-foreground size-4",
-                  !collapsed ? "" : "rotate-180",
+                    {icon}
+                    <FlipDisplay
+                      className="pb-1"
+                      uniqueKey={task.latestMessage?.id ?? ""}
+                    >
+                      {task.status === "in_progress" &&
+                      task.latestMessage &&
+                      hasToolCalls(task.latestMessage)
+                        ? explainLastToolCall(task.latestMessage, t)
+                        : t.subtasks[task.status]}
+                    </FlipDisplay>
+                  </div>
                 )}
-              />
+                <ChevronUp
+                  className={cn(
+                    "text-muted-foreground size-4",
+                    !collapsed ? "" : "rotate-180",
+                  )}
+                />
+              </div>
             </div>
-          </div>
-        </Button>
-      </div>
-      <ChainOfThoughtContent className="px-4 pb-4">
-        {task.prompt && (
-          <ChainOfThoughtStep
-            label={
-              <Streamdown {...streamdownPluginsWithWordAnimation}>
-                {task.prompt}
-              </Streamdown>
-            }
-          ></ChainOfThoughtStep>
-        )}
-        {task.status === "in_progress" &&
-          task.latestMessage &&
-          hasToolCalls(task.latestMessage) && (
-            <ChainOfThoughtStep
-              label={t.subtasks.in_progress}
-              icon={<Loader2Icon className="size-4 animate-spin" />}
-            >
-              {explainLastToolCall(task.latestMessage, t)}
-            </ChainOfThoughtStep>
-          )}
-        {task.status === "completed" && (
-          <>
-            <ChainOfThoughtStep
-              label={t.subtasks.completed}
-              icon={<CheckCircleIcon className="size-4" />}
-            ></ChainOfThoughtStep>
+          </Button>
+        </div>
+        <ChainOfThoughtContent className="px-4 pb-4">
+          {task.prompt && (
             <ChainOfThoughtStep
               label={
-                <Streamdown {...streamdownPlugins}>{task.result}</Streamdown>
+                <Streamdown {...streamdownPluginsWithWordAnimation}>
+                  {task.prompt}
+                </Streamdown>
               }
             ></ChainOfThoughtStep>
-          </>
-        )}
-        {task.status === "failed" && (
-          <ChainOfThoughtStep
-            label={<div className="text-red-500">{task.error}</div>}
-            icon={<XCircleIcon className="size-4 text-red-500" />}
-          ></ChainOfThoughtStep>
-        )}
-      </ChainOfThoughtContent>
+          )}
+          {task.status === "in_progress" &&
+            task.latestMessage &&
+            hasToolCalls(task.latestMessage) && (
+              <ChainOfThoughtStep
+                label={t.subtasks.in_progress}
+                icon={<Loader2Icon className="size-4 animate-spin" />}
+              >
+                {explainLastToolCall(task.latestMessage, t)}
+              </ChainOfThoughtStep>
+            )}
+          {task.status === "completed" && (
+            <>
+              <ChainOfThoughtStep
+                label={t.subtasks.completed}
+                icon={<CheckCircleIcon className="size-4" />}
+              ></ChainOfThoughtStep>
+              <ChainOfThoughtStep
+                label={
+                  <Streamdown {...streamdownPlugins}>{task.result}</Streamdown>
+                }
+              ></ChainOfThoughtStep>
+            </>
+          )}
+          {task.status === "failed" && (
+            <ChainOfThoughtStep
+              label={<div className="text-red-500">{task.error}</div>}
+              icon={<XCircleIcon className="size-4 text-red-500" />}
+            ></ChainOfThoughtStep>
+          )}
+        </ChainOfThoughtContent>
+      </div>
     </ChainOfThought>
   );
 }
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 7b9b651..0e91524 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -316,9 +316,16 @@
     }
   }
 
+  .ambilight {
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+  }
+
   .ambilight:before,
   .ambilight:after {
     content: "";
+    pointer-events: none;
     position: absolute;
     left: 0;
     top: 0;
@@ -339,9 +346,17 @@
     width: 100%;
     height: 100%;
     border-radius: 10px;
-    opacity: 0.75;
     z-index: -1;
-    animation: ambilight 60s ease-in-out infinite;
+    animation: ambilight 40s ease-in-out infinite;
+  }
+
+  .ambilight.enabled {
+    opacity: 1;
+  }
+
+  .dark .ambilight:before,
+  .dark .ambilight:after {
+    opacity: 0.85;
   }
 
   @keyframes ambilight {