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

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { ConversationEmptyState } from "@/components/ai-elements/conversation";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   DevDialog,
   DevDialogContent,
@@ -26,6 +27,7 @@ import { InputBox } from "@/components/workspace/input-box";
 import { MessageList } from "@/components/workspace/messages";
 import { ThreadContext } from "@/components/workspace/messages/context";
 import { ThreadTitle } from "@/components/workspace/thread-title";
+import { TokenUsageIndicator } from "@/components/workspace/token-usage-indicator";
 import { Tooltip } from "@/components/workspace/tooltip";
 import { useSpecificChatMode } from "@/components/workspace/use-chat-mode";
 import { Welcome } from "@/components/workspace/welcome";
@@ -258,6 +260,7 @@ export default function ChatPage() {
                   )}
                 </div>
                 <div className="flex items-center justify-end gap-2 overflow-hidden">
+                  {/* <TokenUsageIndicator messages={thread.messages} /> */}
                   <DevTodoList
                     className="bg-white"
                     todos={thread.values.todos ?? []}
@@ -518,3 +521,21 @@ export default function ChatPage() {
     </ThreadContext.Provider>
   );
 }
+
+function InputBoxSkeleton() {
+  return (
+    <div className="w-full rounded-[20px] bg-[#FBFAFC] p-4 shadow-[0_0_20px_0_rgba(0,0,0,0.10)]">
+      <div className="flex flex-col gap-4">
+        <Skeleton className="h-6 w-[220px]" />
+        <Skeleton className="h-[120px] w-full rounded-[16px]" />
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-9 w-9 rounded-full" />
+            <Skeleton className="h-9 w-9 rounded-full" />
+          </div>
+          <Skeleton className="h-9 w-20 rounded-full" />
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/workspace/layout.tsx

@@ -9,9 +9,9 @@ import {
   useRef,
   useState,
 } from "react";
+import { Toaster } from "@/components/ui/sonner";
 
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
-import { Toaster } from "@/components/ui/sonner";
 import { CommandPalette } from "@/components/workspace/command-palette";
 import { WorkspaceSidebar } from "@/components/workspace/workspace-sidebar";
 import { getLocalSettings, useLocalSettings } from "@/core/settings";

frontend/src/components/ai-elements/artifact.tsx

@@ -140,8 +140,8 @@ export const ArtifactContent = ({
   className,
   ...props
 }: ArtifactContentProps) => (
-  <div className="min-h-0 flex-1 overflow-auto rounded-[10px]" {...props} >
+  <div className="min-h-0 flex-1 overflow-auto rounded-[10px]">
     {/* <div className={cn("mb-[207px]! p-4", className)} {...props} /> */}
-    {/* <div className={cn("mb-[150px] min-h-full p-4", className)} /> */}
+    <div className={cn("mb-[150px] min-h-full p-4", className)} {...props} />
   </div>
 );

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

@@ -34,6 +34,7 @@ import { CodeEditor } from "@/components/workspace/code-editor";
 import { useArtifactContent } from "@/core/artifacts/hooks";
 import { urlOfArtifact } from "@/core/artifacts/utils";
 import { useI18n } from "@/core/i18n/hooks";
+import { installSkill } from "@/core/skills/api";
 import { streamdownPlugins } from "@/core/streamdown";
 import { checkCodeFile, getFileName } from "@/core/utils/files";
 import { useMarkdownDownload } from "@/core/utils/markdown-download";
@@ -60,7 +61,7 @@ export function ArtifactFileDetail({
 }: {
   className?: string;
   filepath: string;
-  threadId?: string;
+  threadId: string;
 }) {
   const { t } = useI18n();
   const { artifacts, setOpen, select, fullscreen, setFullscreen } =
@@ -97,18 +98,12 @@ export function ArtifactFileDetail({
     return (language === "html" && !isWriteFile) || language === "markdown";
   }, [isWriteFile, language]);
   const artifactUrl = useMemo(() => {
-    if (!threadId) {
-      return "";
-    }
     return urlOfArtifact({ filepath, threadId });
   }, [filepath, threadId]);
   const artifactPreviewKind = useMemo(() => {
     return getArtifactPreviewKind(filepath);
   }, [filepath]);
   const artifactViewerSrcDoc = useMemo(() => {
-    if (!artifactUrl) {
-      return "";
-    }
     return buildArtifactViewerSrcDoc({
       artifactUrl,
       fileName,
@@ -118,7 +113,7 @@ export function ArtifactFileDetail({
   const { content } = useArtifactContent({
     threadId,
     filepath: filepathFromProps,
-    enabled: Boolean(threadId) && isCodeFile && !isWriteFile,
+    enabled: isCodeFile && !isWriteFile,
   });
 
   const displayContent = content ?? "";
@@ -131,6 +126,7 @@ export function ArtifactFileDetail({
   }, [artifacts]);
 
   const [viewMode, setViewMode] = useState<"code" | "preview">("code");
+  const [isInstalling, setIsInstalling] = useState(false);
   const [zoom, setZoom] = useState(80);
 
   // 是否可以转换为docx/pdf（仅markdown文件支持）
@@ -176,11 +172,33 @@ export function ArtifactFileDetail({
     }
   }, [previewable]);
 
+  const handleInstallSkill = useCallback(async () => {
+    if (isInstalling) return;
+
+    setIsInstalling(true);
+    try {
+      const result = await installSkill({
+        thread_id: threadId,
+        path: filepath,
+      });
+      if (result.success) {
+        toast.success(result.message);
+      } else {
+        toast.error(result.message ?? "Failed to install skill");
+      }
+    } catch (error) {
+      console.error("Failed to install skill:", error);
+      toast.error("Failed to install skill");
+    } finally {
+      setIsInstalling(false);
+    }
+  }, [threadId, filepath, isInstalling]);
+
   return (
     // 给滚动遮挡头部定位relative
     <Artifact
       className={cn(
-        "bg-background relative h-full overflow-hidden rounded-2xl",
+        "bg-background relative overflow-hidden rounded-2xl",
         className,
       )}
     >
@@ -340,7 +358,7 @@ export function ArtifactFileDetail({
                     <a
                       href={urlOfArtifact({
                         filepath,
-                        threadId: threadId ?? "",
+                        threadId,
                         download: true,
                       })}
                       target="_blank"
@@ -462,39 +480,33 @@ export function ArtifactFileDetail({
           </ArtifactActions>
         </div>
       </ArtifactHeader>
-      <ArtifactContent>
+      <ArtifactContent className="rounded-b-[10px] bg-white p-0">
         {/* 遮挡多余的滚动顶部 */}
         {/* <div className="absolute w-[calc(100%-40px)] bg-white z-20 h-5 rounded-t-[10px] top-[57px]"></div> */}
         {previewable &&
           viewMode === "preview" &&
           (language === "markdown" || language === "html") && (
-            <div className="min-h-full mb-[150px]  rounded-b-[10px] bg-white p-0 mb-0">
+            <ArtifactFilePreview
-              <ArtifactFilePreview
+              content={displayContent}
-                content={displayContent}
+              language={language ?? "text"}
-                language={language ?? "text"}
+              zoom={zoom}
-                zoom={zoom}
+            />
-              />
-            </div>
           )}
         {isCodeFile && viewMode === "code" && (
-          <div className="min-h-full mb-[150px]  rounded-b-[10px] bg-white p-0 mb-0">
+          <CodeEditor
-            <CodeEditor
+            className="size-full resize-none rounded-none border-none py-[20px]"
-              className="size-full resize-none rounded-none border-none py-[20px]"
+            value={displayContent ?? ""}
-              value={displayContent ?? ""}
+            zoom={zoom}
-              zoom={zoom}
+            readonly
-              readonly
+          />
-            />
-          </div>
         )}
         {!isCodeFile && (
-            <div className="h-full mb-[150px] ">
+          <iframe
-              <iframe
+            className="size-full border-0"
-                className="size-full border-0"
+            srcDoc={artifactViewerSrcDoc}
-                srcDoc={artifactViewerSrcDoc}
+            sandbox="allow-same-origin allow-scripts allow-downloads"
-                sandbox="allow-same-origin allow-scripts allow-downloads"
+            title={`Artifact preview: ${fileName}`}
-                title={`Artifact preview: ${fileName}`}
+          />
-              />
-            </div>
         )}
       </ArtifactContent>
     </Artifact>
@@ -515,7 +527,7 @@ export function ArtifactFilePreview({
   if (language === "markdown") {
     return (
       <div
-        className={cn("w-full mb-[207px] p-[20px]")}
+        className={cn("w-full p-[20px]")}
         style={{ "--zoom-scale": zoomScale } as React.CSSProperties}
       >
         <Streamdown
@@ -605,8 +617,6 @@ function buildArtifactViewerSrcDoc({
     </div>`;
   })();
 
-  const bodyClass = kind === "image" ? "fullbleed" : "";
-
   return `<!doctype html>
 <html lang="en">
 <head>
@@ -638,12 +648,8 @@ function buildArtifactViewerSrcDoc({
       overflow: hidden;
       padding: 12px;
     }
-    body.fullbleed {
-      padding: 0;
-    }
     .preview {
       width: 100%;
-      height: 100%;
       border: 1px solid var(--line);
       border-radius: var(--radius);
       background: var(--panel);
@@ -709,7 +715,7 @@ function buildArtifactViewerSrcDoc({
     .link:hover { text-decoration: underline; }
   </style>
 </head>
-<body class="${bodyClass}">
+<body>
   ${content}
 </body>
 </html>`;

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

@@ -29,7 +29,7 @@ export function ArtifactFileList({
 }: {
   className?: string;
   files: string[];
-  threadId?: string;
+  threadId: string;
 }) {
   const { t } = useI18n();
   const { select: selectArtifact, setOpen } = useArtifacts();
@@ -48,7 +48,6 @@ export function ArtifactFileList({
       e.stopPropagation();
       e.preventDefault();
 
-      if (!threadId) return;
       if (installingFile) return;
 
       setInstallingFile(filepath);
@@ -99,7 +98,7 @@ export function ArtifactFileList({
               {file.endsWith(".skill") && (
                 <Button
                   variant="ghost"
-                  disabled={!threadId || installingFile === file}
+                  disabled={installingFile === file}
                   onClick={(e) => handleInstallSkill(e, file)}
                 >
                   {installingFile === file ? (
@@ -110,27 +109,20 @@ export function ArtifactFileList({
                   {t.common.install}
                 </Button>
               )}
-              {threadId ? (
+              <a
-                <a
+                href={urlOfArtifact({
-                  href={urlOfArtifact({
+                  filepath: file,
-                    filepath: file,
+                  threadId: threadId,
-                    threadId,
+                  download: true,
-                    download: true,
+                })}
-                  })}
+                target="_blank"
-                  target="_blank"
+                onClick={(e) => e.stopPropagation()}
-                  onClick={(e) => e.stopPropagation()}
+              >
-                >
+                <Button variant="ghost">
-                  <Button variant="ghost">
-                    <DownloadIcon className="size-4" />
-                    {t.common.download}
-                  </Button>
-                </a>
-              ) : (
-                <Button variant="ghost" disabled>
                   <DownloadIcon className="size-4" />
                   {t.common.download}
                 </Button>
-              )}
+              </a>
             </CardAction>
           </CardHeader>
         </Card>

frontend/src/components/workspace/chats/chat-box.tsx

@@ -23,10 +23,7 @@ import { useThread } from "../messages/context";
 const CLOSE_MODE = { chat: 100, artifacts: 0 };
 const OPEN_MODE = { chat: 60, artifacts: 40 };
 
-const ChatBox: React.FC<{
+const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
-  children: React.ReactNode;
-  threadId: string | undefined;
-}> = ({
   children,
   threadId,
 }) => {

frontend/src/components/workspace/export-trigger.tsx

@@ -21,7 +21,7 @@ import type { AgentThread } from "@/core/threads/types";
 import { useThread } from "./messages/context";
 import { Tooltip } from "./tooltip";
 
-export function ExportTrigger({ threadId }: { threadId?: string }) {
+export function ExportTrigger({ threadId }: { threadId: string }) {
   const { t } = useI18n();
   const { thread } = useThread();
 
@@ -49,7 +49,7 @@ export function ExportTrigger({ threadId }: { threadId?: string }) {
     [messages, thread.values, threadId, t],
   );
 
-  if (!threadId || messages.length === 0) {
+  if (messages.length === 0) {
     return null;
   }
 

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

@@ -39,7 +39,7 @@ export function MessageList({
   paddingBottom = 160,
 }: {
   className?: string;
-  threadId?: string;
+  threadId: string;
   thread: UseStream<AgentThreadState>;
   /** When set (e.g. from onFinish), use instead of thread.messages so SSE end shows complete state. */
   messagesOverride?: Message[];
@@ -98,9 +98,7 @@ export function MessageList({
                     className="mb-4"
                   />
                 )}
-                {threadId ? (
+                <ArtifactFileList files={files} threadId={threadId} />
-                  <ArtifactFileList files={files} threadId={threadId} />
-                ) : null}
               </div>
             );
           } else if (group.type === "assistant:subagent") {

frontend/src/components/workspace/thread-title.tsx

@@ -40,7 +40,6 @@ export function ThreadTitle({
     t.pages.newChat,
     t.pages.untitled,
     t.pages.appName,
-    thread,
     thread?.isThreadLoading,
     thread?.values,
   ]);

frontend/src/core/artifacts/hooks.ts

@@ -11,7 +11,7 @@ export function useArtifactContent({
   enabled,
 }: {
   filepath: string;
-  threadId?: string;
+  threadId: string;
   enabled?: boolean;
 }) {
   const isWriteFile = useMemo(() => {
@@ -25,17 +25,12 @@ export function useArtifactContent({
     return null;
   }, [filepath, isWriteFile, thread]);
 
-  const canFetch = Boolean(threadId) && enabled !== false;
   const { data, isLoading, error } = useQuery({
     queryKey: ["artifact", filepath, threadId, isMock],
     queryFn: () => {
-      return loadArtifactContent({
+      return loadArtifactContent({ filepath, threadId, isMock });
-        filepath,
-        threadId: threadId ?? "",
-        isMock,
-      });
     },
-    enabled: canFetch,
+    enabled,
     // Cache artifact content for 5 minutes to avoid repeated fetches (especially for .skill ZIP extraction)
     staleTime: 5 * 60 * 1000,
   });

frontend/src/core/i18n/locales/en-US.ts

@@ -1,5 +1,6 @@
 import {
   CompassIcon,
+  GraduationCapIcon,
   ImageIcon,
   MicroscopeIcon,
   PenLineIcon,

frontend/src/core/threads/hooks.ts

@@ -271,7 +271,7 @@ export function useThreadStream({
 
   const sendMessage = useCallback(
     async (
-      threadId: string | undefined,
+      threadId: string,
       message: PromptInputMessage,
       extraContext?: Record<string, unknown>,
     ) => {
@@ -281,8 +281,6 @@ export function useThreadStream({
       sendInFlightRef.current = true;
 
       const text = message.text.trim();
-      const resolvedThreadId =
-        threadId ?? threadIdRef.current ?? undefined;
 
       // Capture current count before showing optimistic messages
       prevMsgCountRef.current = thread.messages.length;
@@ -317,9 +315,7 @@ export function useThreadStream({
       }
       setOptimisticMessages(newOptimistic);
 
-      if (resolvedThreadId) {
+      _handleOnStart(threadId);
-        _handleOnStart(resolvedThreadId);
-      }
 
       let uploadedFileInfo: UploadedFileInfo[] = [];
 
@@ -363,12 +359,12 @@ export function useThreadStream({
               );
             }
 
-            if (!resolvedThreadId) {
+            if (!threadId) {
               throw new Error("Thread is not ready for file upload.");
             }
 
             if (files.length > 0) {
-              const uploadResponse = await uploadFiles(resolvedThreadId, files);
+              const uploadResponse = await uploadFiles(threadId, files);
               uploadedFileInfo = uploadResponse.files;
 
               // Update optimistic human message with uploaded status + paths
@@ -435,7 +431,7 @@ export function useThreadStream({
             ],
           },
           {
-            threadId: resolvedThreadId,
+            threadId: threadId,
             streamSubgraphs: true,
             streamResumable: true,
             config: {
@@ -456,7 +452,7 @@ export function useThreadStream({
                     : context.mode === "thinking"
                       ? "low"
                       : undefined),
-              ...(resolvedThreadId ? { thread_id: resolvedThreadId } : {}),
+              thread_id: threadId,
             },
           },
         );
@@ -580,7 +576,7 @@ export function useSubmitThread({
           },
           context: {
             ...threadContext,
-            ...(threadId ? { thread_id: threadId } : {}),
+            thread_id: threadId,
           },
         },
       );

frontend/src/core/utils/markdown-download/converter.ts

@@ -156,6 +156,7 @@ export async function downloadMarkdownAsPdf(
 // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 async function loadHtml2Pdf(): Promise<Function> {
   const html2pdf = await import("html2pdf.js");
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   return html2pdf.default;
 }
 

frontend/src/hooks/use-selected-skill-listener.ts

@@ -25,7 +25,7 @@ interface SkillError {
 
 interface UseSelectedSkillListenerOptions {
   /** 当前会话 thread_id，用于调用 bootstrapRemoteSkill */
-  threadId?: string | null;
+  threadId: string | null;
 }
 
 interface UseSelectedSkillListenerReturn {