From beb4e5f805b6100ecc0e1e3757c2c4395cc08e94 Mon Sep 17 00:00:00 2001
From: zb-zhoufengen <zb-zhoufengen@kingmed.com.cn>
Date: Thu, 30 Apr 2026 12:11:56 +0800
Subject: [PATCH] fix(frontend): fix multiple UI bugs and improve robustness

- Add null guard in useRenameThread to prevent runtime crash when
  query cache is empty, matching existing pattern in useDeleteThread
- Check response.ok in loadArtifactContent before reading body to
  avoid displaying error HTML as artifact content
- Handle clipboard API failure in CopyButton to avoid showing false
  "copied" state
- Replace invalid ARIA roles with data attributes in message skeleton
- Fix TodoList dark mode by replacing hardcoded bg-white with theme
  aware class
- Remove console.log statements from production code paths

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
---
 frontend/src/components/workspace/copy-button.tsx    | 12 ++++++++----
 .../src/components/workspace/messages/skeleton.tsx   |  4 ++--
 frontend/src/components/workspace/todo-list.tsx      |  2 +-
 frontend/src/core/api/api-client.ts                  |  1 -
 frontend/src/core/artifacts/loader.ts                |  3 +++
 frontend/src/core/config/index.ts                    |  4 ----
 frontend/src/core/threads/hooks.ts                   |  5 ++++-
 7 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/workspace/copy-button.tsx b/frontend/src/components/workspace/copy-button.tsx
index 13d331b578..1c83c234fc 100644
--- a/frontend/src/components/workspace/copy-button.tsx
+++ b/frontend/src/components/workspace/copy-button.tsx
@@ -14,10 +14,14 @@ export function CopyButton({
 }) {
   const { t } = useI18n();
   const [copied, setCopied] = useState(false);
-  const handleCopy = useCallback(() => {
-    void navigator.clipboard.writeText(clipboardData);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(clipboardData);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Clipboard write failed (e.g. permissions denied), do not show copied state
+    }
   }, [clipboardData]);
   return (
     <Tooltip content={t.clipboard.copyToClipboard}>
diff --git a/frontend/src/components/workspace/messages/skeleton.tsx b/frontend/src/components/workspace/messages/skeleton.tsx
index f94604e477..db07ff6499 100644
--- a/frontend/src/components/workspace/messages/skeleton.tsx
+++ b/frontend/src/components/workspace/messages/skeleton.tsx
@@ -26,7 +26,7 @@ export function MessageListSkeleton() {
   return (
     <div className="flex w-full max-w-(--container-width-md) flex-col gap-12 p-8 pt-16">
       <div
-        role="human-message"
+        data-role="human-message"
         className="flex w-[50%] flex-col items-end gap-2 self-end"
       >
         <SkeletonBar
@@ -40,7 +40,7 @@ export function MessageListSkeleton() {
           style={{ animationDelay: `${index++ * STAGGER_MS}ms` }}
         />
       </div>
-      <div role="assistant-message" className="flex flex-col gap-2">
+      <div data-role="assistant-message" className="flex flex-col gap-2">
         <SkeletonBar
           className="h-6 w-full"
           style={{ animationDelay: `${index++ * STAGGER_MS}ms` }}
diff --git a/frontend/src/components/workspace/todo-list.tsx b/frontend/src/components/workspace/todo-list.tsx
index 7e39b7c25e..451f5490de 100644
--- a/frontend/src/components/workspace/todo-list.tsx
+++ b/frontend/src/components/workspace/todo-list.tsx
@@ -39,7 +39,7 @@ export function TodoList({
   return (
     <div
       className={cn(
-        "flex h-fit w-full origin-bottom translate-y-4 flex-col overflow-hidden rounded-t-xl border border-b-0 bg-white backdrop-blur-sm transition-all duration-200 ease-out",
+        "flex h-fit w-full origin-bottom translate-y-4 flex-col overflow-hidden rounded-t-xl border border-b-0 bg-background backdrop-blur-sm transition-all duration-200 ease-out",
         hidden ? "pointer-events-none translate-y-8 opacity-0" : "",
         className,
       )}
diff --git a/frontend/src/core/api/api-client.ts b/frontend/src/core/api/api-client.ts
index 0b4532ca92..9299e515fd 100644
--- a/frontend/src/core/api/api-client.ts
+++ b/frontend/src/core/api/api-client.ts
@@ -33,7 +33,6 @@ function injectCsrfHeader(_url: URL, init: RequestInit): RequestInit {
 
 function createCompatibleClient(isMock?: boolean): LangGraphClient {
   const apiUrl = getLangGraphBaseURL(isMock);
-  console.log(`Creating API client with base URL: ${apiUrl}`);
   const client = new LangGraphClient({
     apiUrl,
     onRequest: injectCsrfHeader,
diff --git a/frontend/src/core/artifacts/loader.ts b/frontend/src/core/artifacts/loader.ts
index 7b29ede25a..f0f01a5101 100644
--- a/frontend/src/core/artifacts/loader.ts
+++ b/frontend/src/core/artifacts/loader.ts
@@ -19,6 +19,9 @@ export async function loadArtifactContent({
   }
   const url = urlOfArtifact({ filepath: enhancedFilepath, threadId, isMock });
   const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to load artifact: ${response.status} ${response.statusText}`);
+  }
   const text = await response.text();
   return { content: text, url };
 }
diff --git a/frontend/src/core/config/index.ts b/frontend/src/core/config/index.ts
index 4aaa7122d5..cb06e00ff2 100644
--- a/frontend/src/core/config/index.ts
+++ b/frontend/src/core/config/index.ts
@@ -19,10 +19,6 @@ export function getBackendBaseURL() {
 }
 
 export function getLangGraphBaseURL(isMock?: boolean) {
-  console.log(
-    "env.NEXT_PUBLIC_LANGGRAPH_BASE_URL",
-    env.NEXT_PUBLIC_LANGGRAPH_BASE_URL,
-  );
   if (env.NEXT_PUBLIC_LANGGRAPH_BASE_URL) {
     return new URL(
       env.NEXT_PUBLIC_LANGGRAPH_BASE_URL,
diff --git a/frontend/src/core/threads/hooks.ts b/frontend/src/core/threads/hooks.ts
index ef605d832b..334aeab587 100644
--- a/frontend/src/core/threads/hooks.ts
+++ b/frontend/src/core/threads/hooks.ts
@@ -751,7 +751,10 @@ export function useRenameThread() {
           queryKey: ["threads", "search"],
           exact: false,
         },
-        (oldData: Array<AgentThread>) => {
+        (oldData: Array<AgentThread> | undefined) => {
+          if (oldData == null) {
+            return oldData;
+          }
           return oldData.map((t) => {
             if (t.thread_id === threadId) {
               return {