fix: 修复结果没有对齐的问题，使滚动条可以通过f12出现

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { FilesIcon, ListTodoIcon, XIcon } from "lucide-react";
-import { useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { ConversationEmptyState } from "@/components/ai-elements/conversation";
@@ -44,6 +44,7 @@ export default function ChatPage() {
   useSpecificChatMode();
   const [settings, setSettings] = useLocalSettings();
   const { setOpen: setSidebarOpen } = useSidebar();
+  const router = useRouter();
   const {
     artifacts,
     open: artifactsOpen,
@@ -51,9 +52,12 @@ export default function ChatPage() {
     setArtifacts,
     select: selectArtifact,
     selectedArtifact,
+    deselect: deselectArtifact,
+    setFullscreen: setArtifactsFullscreen,
     fullscreen,
   } = useArtifacts();
   const { threadId, isNewThread, setIsNewThread, isMock } = useThreadChat();
+  
   const searchParams = useSearchParams();
   // History render rules:
   // - /workspace/chats/{thread_id}: always render history
@@ -62,9 +66,13 @@ export default function ChatPage() {
     !isNewThread ||
     searchParams.get("xclaw_used")?.trim().toLowerCase() === "true";
 
-  // Submission strategy:
+  // Submission strategy: always reuse the thread id from query; never create new.
+  const createNewSession = false;
+  /*
+  // Original strategy:
+  // - isnew=false + thread_id: reuse existing thread (explicit request from URL)
   // - xclaw_used=true: follow `isnew` (isnew=false => reuse existing thread)
-  // - xclaw_used!=true: always create/start a new session (no history)
+  // - otherwise: create/start a new session (no history)
   const createNewSession = useMemo(() => {
     if (!isNewThread) {
       return false;
@@ -81,6 +89,7 @@ export default function ChatPage() {
     }
     return searchParams.get("isnew")?.trim().toLowerCase() !== "false";
   }, [isNewThread, searchParams]);
+  */
   const streamThreadId = useMemo(() => {
     return isNewThread && createNewSession ? undefined : threadId;
   }, [createNewSession, isNewThread, threadId]);
@@ -99,7 +108,9 @@ export default function ChatPage() {
     isMock,
     onStart: (currentThreadId) => {
       setIsNewThread(false);
-      history.replaceState(null, "", pathOfThread(currentThreadId));
+      // Keep /new in history so router.back() can return to it.
+      router.replace(`/workspace/chats/${currentThreadId}`);
+      // history.pushState(null, "", pathOfThread(currentThreadId));
     },
     onFinish: (state) => {
       if (document.hidden || !document.hasFocus()) {
@@ -205,6 +216,25 @@ export default function ChatPage() {
     await thread.stop();
   }, [thread]);
 
+  const resetNewSessionState = useCallback(() => {
+    setIsNewThread(true);
+    setHasSubmitted(false);
+    setHistoryCutoff(null);
+    setArtifacts([]);
+    deselectArtifact();
+    setArtifactsOpen(false);
+    setArtifactsFullscreen(false);
+  }, [
+    deselectArtifact,
+    setArtifacts,
+    setArtifactsFullscreen,
+    setArtifactsOpen,
+    setIsNewThread,
+  ]);
+  // shouldRenderHistory || historyCutoff === null
+  // console.log('shouldRenderHistory', shouldRenderHistory, 'historyCutoff', historyCutoff);
+  
+
   return (
     <ThreadContext.Provider value={{ thread }}>
       <div
@@ -474,8 +504,15 @@ export default function ChatPage() {
                     type: POST_MESSAGE_TYPES.XCLAW_USED,
                     XClawUsed: false,
                   });
-                  // 使用完整页面刷新确保组件重新挂载，isNewThread 为 true
-                  window.location.reload();
+                  resetNewSessionState();
+                  // 始终复用 query 中的 thread_id。
+                  const nextQuery = new URLSearchParams();
+                  nextQuery.set("isnew", "false");
+                  nextQuery.set("xclaw_used", "false");
+                  if (threadId && threadId !== "new") {
+                    nextQuery.set("thread_id", threadId);
+                  }
+                  router.replace(`/workspace/chats/new?${nextQuery.toString()}`);
                 }}
               >
                 确定
@@ -513,7 +550,7 @@ export default function ChatPage() {
         </DevDialog>
 
         {/* MARK: 开发测试：iframe 通信功能测试面板 */}
-        {process.env.NODE_ENV !== "production" && <IframeTestPanel />}
+        {/* {process.env.NODE_ENV !== "production" && <IframeTestPanel />} */}
       </div>
     </ThreadContext.Provider>
   );

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

@@ -468,7 +468,7 @@ export function ArtifactFileDetail({
         {previewable &&
           viewMode === "preview" &&
           (language === "markdown" || language === "html") && (
-            <div className="min-h-full mb-[150px]  rounded-b-[10px] bg-white p-0 mb-0">
+            <div className="min-h-full mb-[180px]  rounded-b-[10px] bg-white p-0 mb-0">
               <ArtifactFilePreview
                 content={displayContent}
                 language={language ?? "text"}
@@ -477,7 +477,7 @@ export function ArtifactFileDetail({
             </div>
           )}
         {isCodeFile && viewMode === "code" && (
-          <div className="min-h-full mb-[150px]  rounded-b-[10px] bg-white p-0 mb-0">
+          <div className="min-h-full mb-[180px]  rounded-b-[10px] bg-white p-0 mb-0">
             <CodeEditor
               className="size-full resize-none rounded-none border-none py-[20px]"
               value={displayContent ?? ""}
@@ -487,7 +487,7 @@ export function ArtifactFileDetail({
           </div>
         )}
         {!isCodeFile && (
-            <div className="h-full mb-[150px] ">
+            <div className="h-full mb-[180px] ">
               <iframe
                 className="size-full border-0"
                 srcDoc={artifactViewerSrcDoc}

frontend/src/components/workspace/chats/use-thread-chat.ts

@@ -4,50 +4,96 @@ import { useParams, usePathname, useRouter, useSearchParams } from "next/navigat
 import { useEffect, useState } from "react";
 
 export function useThreadChat() {
-  const { thread_id: threadIdFromPath } = useParams<{ thread_id: string }>();
   const pathname = usePathname();
   const router = useRouter();
+  const params = useParams<{ thread_id?: string }>();
+  // 兜底：当 params 还未就绪时，从 pathname 解析 thread_id。
+  const threadIdFromPathname = (() => {
+    const parts = pathname.split("?")[0]?.split("/") ?? [];
+    const idx = parts.lastIndexOf("chats");
+    if (idx >= 0 && parts.length > idx + 1) {
+      return parts[idx + 1];
+    }
+    return undefined;
+  })();
+  // 优先使用 params；如果是 "new"，则回退到 pathname 解析出的 id。
+  const threadIdFromPath =
+    params?.thread_id !== "new" ? params?.thread_id : threadIdFromPathname;
+  // console.log("[useThreadChat] pathname", pathname);
+  // console.log("[useThreadChat] params.thread_id", params?.thread_id);
+  // console.log("[useThreadChat] threadIdFromPathname", threadIdFromPathname);
+  // console.log("[useThreadChat] threadIdFromPath", threadIdFromPath);
+  // 持久化兜底：用于处理首屏水合或 params 时序问题。
+  const readStoredThreadId = () => {
+    if (typeof window === "undefined") {
+      return undefined;
+    }
+    const stored = window.sessionStorage.getItem("workspace.thread_id");
+    return stored && stored !== "new" ? stored : undefined;
+  };
 
   const searchParams = useSearchParams();
+  // 读取 query 的 thread_id（先用 hook，必要时用 window 兜底）。
+  const readQueryThreadId = () => {
+    const fromHook = searchParams.get("thread_id")?.trim();
+    if (fromHook && fromHook !== "new") {
+      return fromHook;
+    }
+    if (typeof window === "undefined") {
+      return undefined;
+    }
+    const fromLocation = new URLSearchParams(window.location.search).get(
+      "thread_id",
+    );
+    if (fromLocation && fromLocation !== "new") {
+      return fromLocation.trim();
+    }
+    return undefined;
+  };
+  
+  const queryThreadIdFromParams = readQueryThreadId();
+  // console.log("[useThreadChat] query.thread_id", queryThreadIdFromParams);
+  // 归一化：当值为 "new" 时，替换为 query 中的 thread_id（如果存在）。
+  const normalizeThreadId = (value?: string | null) => {
+    if (!value) {
+      return undefined;
+    }
+    return value === "new" ? queryThreadIdFromParams : value;
+  };
   const xClawUsedFromQuery = searchParams.get("xclaw_used");
   const isNewFromQuery =
     searchParams.get("isnew")?.trim().toLowerCase() === "false";
-  const queryThreadIdFromParams = searchParams.get("thread_id")?.trim();
-  const shouldUseQueryThreadId =
-    pathname.startsWith("/workspace/chats/") &&
-    !!queryThreadIdFromParams &&
-    (xClawUsedFromQuery === "true" || isNewFromQuery);
+  const effectiveThreadIdFromPath =
+    normalizeThreadId(threadIdFromPath) ?? readStoredThreadId();
+  // console.log("[useThreadChat] effectiveThreadIdFromPath", effectiveThreadIdFromPath);
+  
   const [threadId, setThreadId] = useState(() => {
-    if (threadIdFromPath === "new") {
-      return shouldUseQueryThreadId ? queryThreadIdFromParams : undefined;
-    }
-    return threadIdFromPath;
+    return effectiveThreadIdFromPath ?? undefined;
   });
 
+  // /new 或缺少 query 的 thread_id 时，视为新会话状态。 但是这个并不是新会话的意思，而是说当前处在对话状态。
   const [isNewThread, setIsNewThread] = useState(
-    () => threadIdFromPath === "new",
+    () => threadIdFromPath === "new" || !queryThreadIdFromParams,
   );
 
   useEffect(() => {
+    // 记住最近一次有效的 thread_id，供下次加载兜底使用。
+    if (threadId && threadId !== "new" && typeof window !== "undefined") {
+      window.sessionStorage.setItem("workspace.thread_id", threadId);
+    }
     if (pathname.endsWith("/new")) {
       setIsNewThread(true);
-      const nextQueryThreadId = searchParams.get("thread_id")?.trim();
+      const nextQueryThreadId = readQueryThreadId();
       const nextIsNewFromQuery =
         searchParams.get("isnew")?.trim().toLowerCase() === "false";
       const nextXClawUsed = searchParams.get("xclaw_used");
-      const nextShouldUseQueryThreadId =
-        pathname.startsWith("/workspace/chats/") &&
-        !!nextQueryThreadId &&
-        (nextXClawUsed === "true" || nextIsNewFromQuery);
-      if (nextShouldUseQueryThreadId && nextQueryThreadId) {
-        router.replace(`/workspace/chats/${nextQueryThreadId}`);
-        return;
-      }
-      setThreadId(nextShouldUseQueryThreadId ? nextQueryThreadId : undefined);
+      setThreadId(nextQueryThreadId ?? undefined);
       return;
     }
     setIsNewThread(false);
-    setThreadId(threadIdFromPath);
+    // console.log("threadIdFromPath", threadIdFromPath, "normalized", normalizeThreadId(threadIdFromPath));
+    
+    setThreadId(normalizeThreadId(threadIdFromPath));
   }, [pathname, router, searchParams, threadIdFromPath]);
   const isMock = searchParams.get("mock") === "true";
   return { threadId, isNewThread, setIsNewThread, isMock };

frontend/src/styles/globals.css

@@ -399,10 +399,10 @@
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE and Edge */
 }
-
-*::-webkit-scrollbar {
-  display: none; /* Chrome, Safari, Opera */
-}
+ /* Chrome, Safari, Opera */
+/* *::-webkit-scrollbar {
+  display: none; 
+} */
 
 :root {
   --container-width-xs: calc(var(--spacing) * 72);