Merge remote-tracking branch 'origin/master' into ji

# Conflicts: # frontend-web/src/components/workspace/messages/message-list-item.tsx # offline-backend-20260512/backend/app/gateway/app.py # offline-backend-20260512/backend/packages/harness/deerflow/runtime/scheduler/html_page.py # offline-backend-20260512/backend/packages/harness/deerflow/runtime/scheduler/service.py
2026-06-03 19:01:45 +08:00
commit a1d460e220
@@ -16,7 +16,7 @@ export type ArtifactProps = HTMLAttributes<HTMLDivElement>;
 export const Artifact = ({ className, ...props }: ArtifactProps) => (
  <div
    className={cn(
-      "flex flex-col overflow-hidden rounded-[1.35rem] border border-[#ece7dd] bg-white shadow-[0_24px_60px_-28px_rgba(15,23,42,0.16)] ring-1 ring-black/3",
+      "flex flex-col overflow-hidden rounded-[1.35rem] border border-border bg-background shadow-[0_24px_60px_-28px_rgba(15,23,42,0.16)] ring-1 ring-black/3",
      className,
    )}
    {...props}
@@ -31,7 +31,7 @@ export const ArtifactHeader = ({
 }: ArtifactHeaderProps) => (
  <div
    className={cn(
-      "flex items-center justify-between border-b border-[#efe9de] bg-white px-4 py-3",
+      "flex items-center justify-between border-b border-border bg-background px-4 py-3",
      className,
    )}
    {...props}
@@ -147,7 +147,7 @@ export const ArtifactContent = forwardRef<HTMLDivElement, ArtifactContentProps>(
    <div
      ref={ref}
      className={cn(
-        "min-h-0 flex-1 overflow-auto bg-white p-4",
+        "min-h-0 flex-1 overflow-auto bg-background p-4",
        className,
      )}
      {...props}
@@ -400,6 +400,47 @@ export function ArtifactFileDetail({
    }
  }, [displayContent, filepath]);

+  const handleOpenWriteFileInNewTab = useCallback(() => {
+    const source = displayContent ?? "";
+    if (!source.trim()) {
+      toast.error("文件内容为空，暂时无法打开");
+      return;
+    }
+    const blobType =
+      language === "html"
+        ? "text/html;charset=utf-8"
+        : language === "markdown"
+          ? "text/markdown;charset=utf-8"
+          : "text/plain;charset=utf-8";
+    const blob = new Blob([source], { type: blobType });
+    const url = URL.createObjectURL(blob);
+    window.open(url, "_blank", "noopener,noreferrer");
+    window.setTimeout(() => URL.revokeObjectURL(url), 60_000);
+  }, [displayContent, language]);
+
+  const handleDownloadWriteFile = useCallback(() => {
+    const source = displayContent ?? "";
+    if (!source.trim()) {
+      toast.error("文件内容为空，暂时无法下载");
+      return;
+    }
+    const blobType =
+      language === "html"
+        ? "text/html;charset=utf-8"
+        : language === "markdown"
+          ? "text/markdown;charset=utf-8"
+          : "text/plain;charset=utf-8";
+    const blob = new Blob([source], { type: blobType });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = getFileName(filepath);
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, [displayContent, filepath, language]);
+
  return (
    <Artifact className={cn(className)}>
      <ArtifactHeader className="grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 px-4 py-3">
@@ -500,30 +541,32 @@ export function ArtifactFileDetail({
                />
              </Tooltip>
            )}
-            {!isWriteFile && (
-              <ArtifactAction
-                icon={SquareArrowOutUpRightIcon}
-                label={t.common.openInNewWindow}
-                tooltip={t.common.openInNewWindow}
-                onClick={async () => {
-                  try {
-                    await openArtifactInNewTab({
-                      filepath,
-                      threadId,
-                      isMock,
-                      publicShareCode,
-                    });
-                  } catch (error) {
-                    console.error(error);
-                    toast.error(
-                      error instanceof Error
-                        ? error.message
-                        : "Failed to open artifact",
-                    );
-                  }
-                }}
-              />
-            )}
+            <ArtifactAction
+              icon={SquareArrowOutUpRightIcon}
+              label={t.common.openInNewWindow}
+              tooltip={t.common.openInNewWindow}
+              onClick={async () => {
+                if (isWriteFile) {
+                  handleOpenWriteFileInNewTab();
+                  return;
+                }
+                try {
+                  await openArtifactInNewTab({
+                    filepath,
+                    threadId,
+                    isMock,
+                    publicShareCode,
+                  });
+                } catch (error) {
+                  console.error(error);
+                  toast.error(
+                    error instanceof Error
+                      ? error.message
+                      : "Failed to open artifact",
+                  );
+                }
+              }}
+            />
            {isCodeFile && (
              <ArtifactAction
                icon={CopyIcon}
@@ -550,30 +593,32 @@ export function ArtifactFileDetail({
                onClick={handleDownloadAsWord}
              />
            )}
-            {!isWriteFile && (
-              <ArtifactAction
-                icon={DownloadIcon}
-                label={t.common.download}
-                tooltip={t.common.download}
-                onClick={async () => {
-                  try {
-                    await downloadArtifactFile({
-                      filepath,
-                      threadId,
-                      isMock,
-                      publicShareCode,
-                    });
-                  } catch (error) {
-                    console.error(error);
-                    toast.error(
-                      error instanceof Error
-                        ? error.message
-                        : "Download failed",
-                    );
-                  }
-                }}
-              />
-            )}
+            <ArtifactAction
+              icon={DownloadIcon}
+              label={t.common.download}
+              tooltip={t.common.download}
+              onClick={async () => {
+                if (isWriteFile) {
+                  handleDownloadWriteFile();
+                  return;
+                }
+                try {
+                  await downloadArtifactFile({
+                    filepath,
+                    threadId,
+                    isMock,
+                    publicShareCode,
+                  });
+                } catch (error) {
+                  console.error(error);
+                  toast.error(
+                    error instanceof Error
+                      ? error.message
+                      : "Download failed",
+                  );
+                }
+              }}
+            />
            <ArtifactAction
              className="hover:bg-background"
              icon={XIcon}
@@ -67,9 +67,14 @@ function logReferenceDebug(
  });
 }

-const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
+const ChatBox: React.FC<{
+  children: React.ReactNode;
+  threadId: string;
+  disableArtifacts?: boolean;
+}> = ({
  children,
  threadId,
+  disableArtifacts = false,
 }) => {
  const { thread } = useThread();
  const pathname = usePathname();
@@ -275,12 +280,16 @@ const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
    }

    // Update artifacts from the current thread
-    const nextArtifacts = thread.values.artifacts ?? [];
+    const nextArtifacts = disableArtifacts ? [] : (thread.values.artifacts ?? []);
    const hadArtifacts = artifactsCountRef.current > 0;
    const hasNewArtifact = nextArtifacts.length > artifactsCountRef.current;
    artifactsCountRef.current = nextArtifacts.length;
    setArtifacts(nextArtifacts);
-    if ((hasNewArtifact || (!hadArtifacts && nextArtifacts.length > 0)) && !selectedArtifact) {
+    if (
+      !disableArtifacts &&
+      (hasNewArtifact || (!hadArtifacts && nextArtifacts.length > 0)) &&
+      !selectedArtifact
+    ) {
      selectArtifact(nextArtifacts[nextArtifacts.length - 1]!);
      setArtifactsOpen(true);
      setSideTab("document");
@@ -295,6 +304,7 @@ const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
    // }

    if (
+      !disableArtifacts &&
      env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" &&
      autoSelectFirstArtifact
    ) {
@@ -311,14 +321,18 @@ const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
    selectedArtifact,
    setArtifacts,
    thread.values.artifacts,
+    disableArtifacts,
  ]);

  const artifactPanelOpen = useMemo(() => {
+    if (disableArtifacts) {
+      return false;
+    }
    if (env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true") {
      return artifactsOpen && artifacts?.length > 0;
    }
    return artifactsOpen;
-  }, [artifactsOpen, artifacts]);
+  }, [artifactsOpen, artifacts, disableArtifacts]);
  const sidePanelOpen = artifactPanelOpen || (hasCitationReferences && referencesOpen);
  const showTabs = !!selectedArtifact && hasCitationReferences;

@@ -347,6 +361,10 @@ const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
    }
  }, [sidePanelOpen]);

+  if (disableArtifacts) {
+    return <>{children}</>;
+  }
+
  return (
    <ResizablePanelGroup
      id={`${resizableIdBase}-panels`}
@@ -366,14 +384,14 @@ const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
      />
      <ResizablePanel
        className={cn(
-          "bg-[#fffdfa] transition-all duration-300 ease-in-out",
+          "bg-background transition-all duration-300 ease-in-out",
          !sidePanelOpen && "opacity-0",
        )}
        id="artifacts"
      >
        <div
          className={cn(
-            "h-full bg-[#fffdfa] p-4 transition-transform duration-300 ease-in-out",
+            "h-full bg-background p-4 transition-transform duration-300 ease-in-out",
            sidePanelOpen ? "translate-x-0" : "translate-x-full",
          )}
        >
@@ -1,5 +1,5 @@
-import type { Message } from "@langchain/langgraph-sdk";
-import { ClockIcon, FileIcon, Loader2Icon, PencilIcon } from "lucide-react";
+import type { Message } from '@langchain/langgraph-sdk';
+import { ClockIcon, FileIcon, Loader2Icon, PencilIcon } from 'lucide-react';
 import {
  memo,
  useCallback,
@@ -9,33 +9,33 @@ import {
  useState,
  type AnchorHTMLAttributes,
  type ImgHTMLAttributes,
-} from "react";
-import rehypeKatex from "rehype-katex";
+} from 'react';
+import rehypeKatex from 'rehype-katex';

-import { Loader } from "@/components/ai-elements/loader";
+import { Loader } from '@/components/ai-elements/loader';
 import {
  Message as AIElementMessage,
  MessageContent as AIElementMessageContent,
  MessageResponse as AIElementMessageResponse,
  MessageToolbar,
-} from "@/components/ai-elements/message";
+} from '@/components/ai-elements/message';
 import {
  Reasoning,
  ReasoningContent,
  ReasoningTrigger,
-} from "@/components/ai-elements/reasoning";
-import { Task, TaskTrigger } from "@/components/ai-elements/task";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
+} from '@/components/ai-elements/reasoning';
+import { Task, TaskTrigger } from '@/components/ai-elements/task';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
 import {
  UploadedFilePreviewDialog,
  useAuthedObjectUrl,
-} from "@/components/workspace/messages/uploaded-file-preview-dialog";
-import { resolveArtifactURL } from "@/core/artifacts/utils";
-import { useChatAskTimes } from "@/core/chat-timestamps";
-import { getBackendBaseURL } from "@/core/config";
-import { useI18n } from "@/core/i18n/hooks";
+} from '@/components/workspace/messages/uploaded-file-preview-dialog';
+import { resolveArtifactURL } from '@/core/artifacts/utils';
+import { useChatAskTimes } from '@/core/chat-timestamps';
+import { getBackendBaseURL } from '@/core/config';
+import { useI18n } from '@/core/i18n/hooks';
 import {
  extractContentFromMessage,
  extractReasoningContentFromMessage,
@@ -43,23 +43,64 @@ import {
  stripArtifactTag,
  stripUploadedFilesTag,
  type FileInMessage,
-} from "@/core/messages/utils";
-import { useRehypeSplitWordsIntoSpans } from "@/core/rehype";
+} from '@/core/messages/utils';
+import { useRehypeSplitWordsIntoSpans } from '@/core/rehype';
 import {
  applyInlineCitations,
  type RuntimeDisplaySource,
-} from "@/core/skill-display/runtime";
-import { humanMessagePlugins } from "@/core/streamdown";
-import { cn } from "@/lib/utils";
+} from '@/core/skill-display/runtime';
+import { humanMessagePlugins } from '@/core/streamdown';
+import { cn } from '@/lib/utils';

-import { CitationLink } from "../citations/citation-link";
-import { CopyButton } from "../copy-button";
-import { Tooltip } from "../tooltip";
-import { SkillDisplayBlock } from "../skill-display-block";
-import { ThreadContext } from "./context";
-import { DownloadWordButton } from "./download-word-button";
-import { MarkdownContent, type MarkdownContentProps } from "./markdown-content";
-import { MessageTokenUsage } from "./message-token-usage";
+import { CitationLink } from '../citations/citation-link';
+import { CopyButton } from '../copy-button';
+import { Tooltip } from '../tooltip';
+import { SkillDisplayBlock } from '../skill-display-block';
+import { ThreadContext } from './context';
+import { DownloadWordButton } from './download-word-button';
+import { MarkdownContent, type MarkdownContentProps } from './markdown-content';
+import { MessageTokenUsage } from './message-token-usage';
+
+type EmbeddedPageContext = {
+  title?: string;
+  url?: string;
+  content?: string;
+};
+
+function extractTagContent(source: string, tagName: string) {
+  const match = new RegExp(
+    `<${tagName}>\\s*([\\s\\S]*?)\\s*</${tagName}>`,
+    'i',
+  ).exec(source);
+  return match?.[1]?.trim() ?? '';
+}
+
+function parseEmbeddedPageContext(source: string): {
+  content: string;
+  pageContext: EmbeddedPageContext | null;
+} {
+  const match = /<page_context>\s*([\s\S]*?)\s*<\/page_context>/i.exec(source);
+  if (!match) {
+    return { content: source, pageContext: null };
+  }
+
+  const body = match[1] ?? '';
+  const pageContext = {
+    title: extractTagContent(body, 'title') || undefined,
+    url: extractTagContent(body, 'url') || undefined,
+    content: extractTagContent(body, 'content') || undefined,
+  };
+  const cleanedContent = source
+    .replace(match[0], '')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim();
+
+  if (!pageContext.title && !pageContext.url && !pageContext.content) {
+    return { content: cleanedContent, pageContext: null };
+  }
+
+  return { content: cleanedContent, pageContext };
+}

 /**
 * Resolve an in-conversation file path to a fetchable URL.
@@ -73,7 +114,7 @@ function useArtifactResolver(threadId: string): (path: string) => string {
  return useCallback(
    (path: string) => {
      if (publicShareCode) {
-        const normalized = path.startsWith("/") ? path : `/${path}`;
+        const normalized = path.startsWith('/') ? path : `/${path}`;
        return `${getBackendBaseURL()}/api/public/shares/${encodeURIComponent(
          publicShareCode,
        )}/files${normalized}`;
@@ -86,6 +127,7 @@ function useArtifactResolver(threadId: string): (path: string) => string {

 export function MessageListItem({
  className,
+  fitRowToContent = false,
  message,
  isLoading,
  threadId,
@@ -95,6 +137,7 @@ export function MessageListItem({
  onEditResubmit,
 }: {
  className?: string;
+  fitRowToContent?: boolean;
  message: Message;
  isLoading?: boolean;
  threadId: string;
@@ -103,18 +146,23 @@ export function MessageListItem({
  extraRehypePlugins?: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
  onEditResubmit?: (text: string) => void;
 }) {
-  const isHuman = message.type === "human";
+  const isHuman = message.type === 'human';
  const messageMarkdown =
    extractContentFromMessage(message) ??
    extractReasoningContentFromMessage(message) ??
-    "";
+    '';
  return (
    <AIElementMessage
-      className={cn("group/conversation-message relative w-full", className)}
-      from={isHuman ? "user" : "assistant"}
+      className={cn(
+        'group/conversation-message relative',
+        fitRowToContent ? 'max-w-full w-fit' : 'w-full',
+        isHuman && fitRowToContent && 'ml-auto',
+        className,
+      )}
+      from={isHuman ? 'user' : 'assistant'}
    >
      <MessageContent
-        className={isHuman ? "w-fit" : "w-full"}
+        className={isHuman ? 'w-fit' : 'w-full'}
        message={message}
        isLoading={isLoading}
        threadId={threadId}
@@ -131,8 +179,8 @@ export function MessageListItem({
      {!isLoading && !isHuman && (
        <MessageToolbar
          className={cn(
-            "-bottom-8",
-            "absolute right-0 left-0 z-20 opacity-0 transition-opacity delay-200 duration-300 group-hover/conversation-message:opacity-100",
+            '-bottom-8',
+            'absolute right-0 left-0 z-20 opacity-0 transition-opacity delay-200 duration-300 group-hover/conversation-message:opacity-100',
          )}
        >
          <div className="flex gap-1">
@@ -161,12 +209,14 @@ export function MessageListItem({
 */
 function HumanMessageBlock({
  text,
+  pageContext,
  filesList,
  messageTime,
  components,
  onEditResubmit,
 }: {
  text: string;
+  pageContext?: EmbeddedPageContext | null;
  filesList: React.ReactNode;
  messageTime: { label: string; full: string } | null;
  components: MarkdownContentProps["components"];
@@ -247,6 +297,7 @@ function HumanMessageBlock({
        </AIElementMessageContent>
      )}
      <MessageTimeStamp time={messageTime} align="right" />
+      {pageContext && <EmbeddedPageContextCard pageContext={pageContext} />}
      {text && (
        <div className="flex items-center gap-0.5 opacity-0 transition-opacity duration-200 group-hover/conversation-message:opacity-100">
          <CopyButton clipboardData={text} className="size-6" />
@@ -276,7 +327,7 @@ function MessageImage({
  src,
  alt,
  threadId,
-  maxWidth = "90%",
+  maxWidth = '90%',
  ...props
 }: React.ImgHTMLAttributes<HTMLImageElement> & {
  threadId: string;
@@ -285,13 +336,13 @@ function MessageImage({
  const resolveArtifact = useArtifactResolver(threadId);
  if (!src) return null;

-  const imgClassName = cn("overflow-hidden rounded-lg", `max-w-[${maxWidth}]`);
+  const imgClassName = cn('overflow-hidden rounded-lg', `max-w-[${maxWidth}]`);

-  if (typeof src !== "string") {
+  if (typeof src !== 'string') {
    return <img className={imgClassName} src={src} alt={alt} {...props} />;
  }

-  const url = src.startsWith("/mnt/") ? resolveArtifact(src) : src;
+  const url = src.startsWith('/mnt/') ? resolveArtifact(src) : src;

  return (
    <a href={url} target="_blank" rel="noopener noreferrer">
@@ -320,12 +371,27 @@ function MessageContent_({
  onEditResubmit?: (text: string) => void;
 }) {
  const baseRehypePlugins = useRehypeSplitWordsIntoSpans(isLoading);
+
+  // Streamdown splits content into per-block processors; calling the factory
+  // once here ensures all blocks share the same transformer instance (and thus
+  // the same citation counter) for this message.
+  const stableExtraPlugins = useMemo(() => {
+    if (!extraRehypePlugins?.length) return [];
+    return extraRehypePlugins.map((factory) => {
+      const transformer = factory();
+      return () => transformer;
+    });
+  }, [extraRehypePlugins]);
+
  const rehypePlugins = useMemo(
-    () => (extraRehypePlugins?.length ? [...baseRehypePlugins, ...extraRehypePlugins] : baseRehypePlugins),
+    () =>
+      extraRehypePlugins?.length
+        ? [...baseRehypePlugins, ...extraRehypePlugins]
+        : baseRehypePlugins,
    [baseRehypePlugins, extraRehypePlugins],
  );
  const askTimes = useChatAskTimes();
-  const isHuman = message.type === "human";
+  const isHuman = message.type === 'human';
  const resolveArtifact = useArtifactResolver(threadId);
  const components = useMemo(
    () => ({
@@ -333,13 +399,16 @@ function MessageContent_({
        <MessageImage {...props} threadId={threadId} maxWidth="90%" />
      ),
      a: ({ href, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>) => {
-        if (href?.startsWith("#reference-")) {
+        if (href?.startsWith('#reference-')) {
          return <CitationLink href={href} {...props} />;
        }
-        if (typeof props.children === "string" && /^citation:/i.test(props.children)) {
+        if (
+          typeof props.children === 'string' &&
+          /^citation:/i.test(props.children)
+        ) {
          return <CitationLink href={href} {...props} />;
        }
-        if (href?.startsWith("/mnt/")) {
+        if (href?.startsWith('/mnt/')) {
          const url = resolveArtifact(href);
          return (
            <a
@@ -367,7 +436,7 @@ function MessageContent_({
  const files = useMemo(() => {
    const files = message.additional_kwargs?.files;
    if (!Array.isArray(files) || files.length === 0) {
-      if (rawContent.includes("<uploaded_files>")) {
+      if (rawContent.includes('<uploaded_files>')) {
        // If the content contains the <uploaded_files> tag, we return the parsed files from the content for backward compatibility.
        return parseUploadedFiles(rawContent);
      }
@@ -378,10 +447,19 @@ function MessageContent_({

  const contentToDisplay = useMemo(() => {
    if (isHuman) {
-      return rawContent ? stripArtifactTag(stripUploadedFilesTag(rawContent)) : "";
+      return rawContent
+        ? stripArtifactTag(stripUploadedFilesTag(rawContent))
+        : '';
    }
-    return applyInlineCitations(rawContent ?? "", displaySources);
+    return applyInlineCitations(rawContent ?? '', displaySources);
  }, [rawContent, isHuman, displaySources]);
+  const parsedHumanContent = useMemo(
+    () =>
+      isHuman
+        ? parseEmbeddedPageContext(contentToDisplay)
+        : { content: contentToDisplay, pageContext: null },
+    [contentToDisplay, isHuman],
+  );

  const filesList =
    files && files.length > 0 ? (
@@ -389,7 +467,7 @@ function MessageContent_({
    ) : null;

  // Uploading state: mock AI message shown while files upload
-  if (message.additional_kwargs?.element === "task") {
+  if (message.additional_kwargs?.element === 'task') {
    return (
      <AIElementMessageContent className={className}>
        <Task defaultOpen={false}>
@@ -422,11 +500,10 @@ function MessageContent_({
  }

  if (isHuman) {
-    // Render HumanMessageBlock directly (no width-constraining wrapper) so the
-    // inline editor can widen beyond the bubble's fit-content width.
    return (
      <HumanMessageBlock
-        text={contentToDisplay}
+        text={parsedHumanContent.content}
+        pageContext={parsedHumanContent.pageContext}
        filesList={filesList}
        messageTime={messageTime}
        components={components}
@@ -444,7 +521,7 @@ function MessageContent_({
          displaySources={displaySources}
          isLoading={isLoading}
          renderSkillDisplayBlocks={false}
-          rehypePlugins={[...rehypePlugins, [rehypeKatex, { output: "html" }]]}
+          rehypePlugins={[...rehypePlugins, [rehypeKatex, { output: 'html' }]]}
          components={components}
        />
      </div>
@@ -460,6 +537,27 @@ function MessageContent_({
  );
 }

+function EmbeddedPageContextCard({
+  pageContext,
+}: {
+  pageContext: EmbeddedPageContext;
+}) {
+  const previewText = [pageContext.title, pageContext.url, pageContext.content]
+    .filter(Boolean)
+    .join(' | ');
+
+  return (
+    <div className="bg-muted/70 ml-auto flex w-fit min-w-0 max-w-[min(24rem,calc(100vw-2rem),100%)] flex-col gap-2 rounded-2xl border px-3 py-2 text-sm shadow-sm">
+      <div
+        className="text-muted-foreground line-clamp-2 min-w-0 [overflow-wrap:anywhere] break-words text-xs"
+        title={previewText}
+      >
+        {previewText}
+      </div>
+    </div>
+  );
+}
+
 /**
 * Format a wall-clock message time as ``YYYY-MM-DD HH:mm`` for display, plus a
 * full localized string for the hover title. Returns ``null`` when no/invalid
@@ -468,10 +566,10 @@ function MessageContent_({
 function formatAskedTime(
  clientTs: unknown,
 ): { label: string; full: string } | null {
-  if (typeof clientTs !== "string" || !clientTs) return null;
+  if (typeof clientTs !== 'string' || !clientTs) return null;
  const date = new Date(clientTs);
  if (Number.isNaN(date.getTime())) return null;
-  const pad = (n: number) => String(n).padStart(2, "0");
+  const pad = (n: number) => String(n).padStart(2, '0');
  const label =
    `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}` +
    ` ${pad(date.getHours())}:${pad(date.getMinutes())}`;
@@ -484,17 +582,17 @@ function formatAskedTime(
 */
 function MessageTimeStamp({
  time,
-  align = "right",
+  align = 'right',
 }: {
  time: { label: string; full: string } | null;
-  align?: "left" | "right";
+  align?: 'left' | 'right';
 }) {
  if (!time) return null;
  return (
    <div
      className={cn(
-        "text-muted-foreground/60 flex items-center gap-1 text-[11px] leading-none tabular-nums",
-        align === "right" ? "justify-end pr-0.5" : "justify-start pl-0.5",
+        'text-muted-foreground/60 flex items-center gap-1 text-[11px] leading-none tabular-nums',
+        align === 'right' ? 'justify-end pr-0.5' : 'justify-start pl-0.5',
      )}
      title={time.full}
    >
@@ -508,39 +606,39 @@ function MessageTimeStamp({
 * Get file extension and check helpers
 */
 const getFileExt = (filename: string) =>
-  filename.split(".").pop()?.toLowerCase() ?? "";
+  filename.split('.').pop()?.toLowerCase() ?? '';

 const FILE_TYPE_MAP: Record<string, string> = {
-  json: "JSON",
-  csv: "CSV",
-  txt: "TXT",
-  md: "Markdown",
-  py: "Python",
-  js: "JavaScript",
-  ts: "TypeScript",
-  tsx: "TSX",
-  jsx: "JSX",
-  html: "HTML",
-  css: "CSS",
-  xml: "XML",
-  yaml: "YAML",
-  yml: "YAML",
-  pdf: "PDF",
-  png: "PNG",
-  jpg: "JPG",
-  jpeg: "JPEG",
-  gif: "GIF",
-  svg: "SVG",
-  zip: "ZIP",
-  tar: "TAR",
-  gz: "GZ",
+  json: 'JSON',
+  csv: 'CSV',
+  txt: 'TXT',
+  md: 'Markdown',
+  py: 'Python',
+  js: 'JavaScript',
+  ts: 'TypeScript',
+  tsx: 'TSX',
+  jsx: 'JSX',
+  html: 'HTML',
+  css: 'CSS',
+  xml: 'XML',
+  yaml: 'YAML',
+  yml: 'YAML',
+  pdf: 'PDF',
+  png: 'PNG',
+  jpg: 'JPG',
+  jpeg: 'JPEG',
+  gif: 'GIF',
+  svg: 'SVG',
+  zip: 'ZIP',
+  tar: 'TAR',
+  gz: 'GZ',
 };

-const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "gif", "webp", "svg", "bmp"];
+const IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp'];

 function getFileTypeLabel(filename: string): string {
  const ext = getFileExt(filename);
-  return FILE_TYPE_MAP[ext] ?? (ext.toUpperCase() || "FILE");
+  return FILE_TYPE_MAP[ext] ?? (ext.toUpperCase() || 'FILE');
 }

 function isImageFile(filename: string): boolean {
@@ -551,7 +649,7 @@ function isImageFile(filename: string): boolean {
 * Format bytes to human-readable size string
 */
 function formatBytes(bytes: number): string {
-  if (bytes === 0) return "—";
+  if (bytes === 0) return '0 B';
  const kb = bytes / 1024;
  if (kb < 1024) return `${kb.toFixed(1)} KB`;
  return `${(kb / 1024).toFixed(1)} MB`;
@@ -594,7 +692,7 @@ function RichFileCard({
  const { t } = useI18n();
  const resolveArtifact = useArtifactResolver(threadId);
  const [previewOpen, setPreviewOpen] = useState(false);
-  const isUploading = file.status === "uploading";
+  const isUploading = file.status === 'uploading';
  const isImage = isImageFile(file.filename);
  const fileUrl = file.path ? resolveArtifact(file.path) : null;
  // Thumbnails must be fetched with auth: the artifact route is gated and a
@@ -724,8 +822,8 @@ function AssistantDisplayContent({
  displaySources: RuntimeDisplaySource[];
  isLoading: boolean;
  renderSkillDisplayBlocks: boolean;
-  rehypePlugins: MarkdownContentProps["rehypePlugins"];
-  components: MarkdownContentProps["components"];
+  rehypePlugins: MarkdownContentProps['rehypePlugins'];
+  components: MarkdownContentProps['components'];
 }) {
  const { parts, placedKeys } = useMemo(
    () =>
@@ -741,14 +839,14 @@ function AssistantDisplayContent({
      return [];
    }
    return groupDisplaySources(displaySources).filter(
-      (group) => group.mode !== "citation" && !placedKeys.has(group.key),
+      (group) => group.mode !== 'citation' && !placedKeys.has(group.key),
    );
  }, [displaySources, placedKeys, renderSkillDisplayBlocks]);

  return (
    <>
      {parts.map((part, index) =>
-        part.type === "markdown" ? (
+        part.type === 'markdown' ? (
          <MarkdownContent
            key={`markdown-${index}`}
            content={part.content}
@@ -777,11 +875,11 @@ function AssistantDisplayContent({
 }

 type DisplayPart =
-  | { type: "markdown"; content: string }
+  | { type: 'markdown'; content: string }
  | {
-      type: "display";
+      type: 'display';
      key: string;
-      mode: RuntimeDisplaySource["mode"];
+      mode: RuntimeDisplaySource['mode'];
      sources: RuntimeDisplaySource[];
    };

@@ -798,16 +896,16 @@ function splitSkillDisplayPlaceholders(
    const start = match.index ?? 0;
    const before = content.slice(cursor, start);
    if (before.trim()) {
-      parts.push({ type: "markdown", content: before });
+      parts.push({ type: 'markdown', content: before });
    }
-    const attrs = parseDisplayAttrs(match[1] ?? "");
+    const attrs = parseDisplayAttrs(match[1] ?? '');
    const group = findDisplayGroup(displaySources, attrs.tool, attrs.mode);
    if (group) {
      placedKeys.add(group.key);
    }
    if (group && renderSkillDisplayBlocks) {
      parts.push({
-        type: "display",
+        type: 'display',
        key: group.key,
        mode: group.mode,
        sources: group.sources,
@@ -817,26 +915,29 @@ function splitSkillDisplayPlaceholders(
  }
  const rest = content.slice(cursor);
  if (rest.trim() || parts.length === 0) {
-    parts.push({ type: "markdown", content: rest });
+    parts.push({ type: 'markdown', content: rest });
  }
  return { parts, placedKeys };
 }

-function parseDisplayAttrs(raw: string): { tool?: string; mode?: RuntimeDisplaySource["mode"] } {
+function parseDisplayAttrs(raw: string): {
+  tool?: string;
+  mode?: RuntimeDisplaySource['mode'];
+} {
  const attrs: Record<string, string> = {};
  for (const match of raw.matchAll(/([a-zA-Z][\w-]*)="([^"]*)"/g)) {
    attrs[match[1]!] = match[2]!;
  }
  return {
    tool: attrs.tool || attrs.skill || attrs.name,
-    mode: attrs.mode as RuntimeDisplaySource["mode"] | undefined,
+    mode: attrs.mode as RuntimeDisplaySource['mode'] | undefined,
  };
 }

 function findDisplayGroup(
  sources: RuntimeDisplaySource[],
  tool?: string,
-  mode?: RuntimeDisplaySource["mode"],
+  mode?: RuntimeDisplaySource['mode'],
 ) {
  return groupDisplaySources(sources).find((group) => {
    if (mode && group.mode !== mode) {
@@ -857,20 +958,18 @@ function groupDisplaySources(sources: RuntimeDisplaySource[]) {
    {
      key: string;
      skillName: string;
-      mode: RuntimeDisplaySource["mode"];
+      mode: RuntimeDisplaySource['mode'];
      sources: RuntimeDisplaySource[];
    }
  >();
  for (const source of sources) {
    const key = `${source.skillName}:${source.mode}`;
-    const group =
-      groups.get(key) ??
-      {
-        key,
-        skillName: source.skillName,
-        mode: source.mode,
-        sources: [],
-      };
+    const group = groups.get(key) ?? {
+      key,
+      skillName: source.skillName,
+      mode: source.mode,
+      sources: [],
+    };
    group.sources.push(source);
    groups.set(key, group);
  }
@@ -878,5 +977,5 @@ function groupDisplaySources(sources: RuntimeDisplaySource[]) {
 }

 function normalizeName(name: string) {
-  return name.toLowerCase().replace(/[^a-z0-9]+/g, "");
+  return name.toLowerCase().replace(/[^a-z0-9]+/g, '');
 }
@@ -52,6 +52,8 @@ export const MESSAGE_LIST_FOLLOWUPS_EXTRA_PADDING_BOTTOM = 80;

 export function MessageList({
  className,
+  contentClassName,
+  fitMessageRowsToContent = false,
  threadId,
  thread,
  paddingBottom = MESSAGE_LIST_DEFAULT_PADDING_BOTTOM,
@@ -61,8 +63,12 @@ export function MessageList({
  onEditResubmit,
  onSetupAgentApprove,
  onSetupAgentReject,
+  onSetupWritingApprove,
+  onSetupWritingReject,
 }: {
  className?: string;
+  contentClassName?: string;
+  fitMessageRowsToContent?: boolean;
  threadId: string;
  thread: BaseStream<AgentThreadState>;
  paddingBottom?: number;
@@ -72,6 +78,8 @@ export function MessageList({
  onEditResubmit?: (text: string) => void;
  onSetupAgentApprove?: (payload: SetupAgentApprovalPayload) => void | Promise<void>;
  onSetupAgentReject?: (payload: SetupAgentApprovalPayload) => void | Promise<void>;
+  onSetupWritingApprove?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
+  onSetupWritingReject?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
 }) {
  const baseRehypePlugins = useRehypeSplitWordsIntoSpans(thread.isLoading);
  const rehypePlugins = useMemo(
@@ -79,6 +87,7 @@ export function MessageList({
    [baseRehypePlugins, extraRehypePlugins],
  );
  const updateSubtask = useUpdateSubtask();
+  const { t } = useI18n();
  const messages = thread.messages;

  // Stamp a wall-clock time onto every question/answer the first time it is
@@ -219,7 +228,12 @@ export function MessageList({
    <Conversation
      className={cn("flex size-full flex-col justify-center", className)}
    >
-      <ConversationContent className="mx-auto w-full max-w-(--container-width-lg) gap-8 pt-12">
+      <ConversationContent
+        className={cn(
+          "mx-auto w-full max-w-(--container-width-lg) gap-8 pt-12",
+          contentClassName,
+        )}
+      >
        <MessageMetricsProvider messages={messages} isLoading={thread.isLoading}>
        {groupMessages(messages, (group) => {
          if (group.type === "human" || group.type === "assistant") {
@@ -237,6 +251,7 @@ export function MessageList({
              return (
                <MessageListItem
                  key={`${group.id}/${msg.id}`}
+                  fitRowToContent={fitMessageRowsToContent}
                  message={msg}
                  isLoading={thread.isLoading}
                  threadId={threadId}
@@ -310,6 +325,23 @@ export function MessageList({
                />
              </div>
            ) : null;
+          } else if (group.type === "assistant:setup-writing-approval") {
+            const message = group.messages[0];
+            return message ? (
+              <div key={group.id} className="w-full">
+                <SetupWritingApprovalCard
+                  disabled={thread.isLoading}
+                  message={message}
+                  onApprove={onSetupWritingApprove}
+                  onReject={onSetupWritingReject}
+                />
+                <MessageTokenUsageList
+                  enabled={tokenUsageEnabled}
+                  isLoading={thread.isLoading}
+                  messages={group.messages}
+                />
+              </div>
+            ) : null;
          } else if (group.type === "assistant:present-files") {
            const files: string[] = [];
            for (const message of group.messages) {
@@ -488,6 +520,16 @@ export type SetupAgentApprovalPayload = {
  skills?: string[];
 };

+export type SetupWritingApprovalPayload = {
+  user_intent?: string;
+  article_type?: string;
+  word_count_target?: number | null;
+  target_audience?: string;
+  writing_mode?: string;
+  material_source?: string;
+  outline?: string;
+};
+
 function findPreviousHumanMessageId(
  messages: Message[],
  beforeMessageId?: string,
@@ -638,6 +680,155 @@ function SetupAgentApprovalCard({
  );
 }

+function getSetupWritingApprovalPayload(
+  message: unknown,
+): SetupWritingApprovalPayload | null {
+  if (typeof message !== "object" || message === null) {
+    return null;
+  }
+  const additionalKwargs = Reflect.get(message, "additional_kwargs");
+  if (typeof additionalKwargs !== "object" || additionalKwargs === null) {
+    return null;
+  }
+  const approval = Reflect.get(additionalKwargs, "setup_writing_approval");
+  if (typeof approval !== "object" || approval === null) {
+    return null;
+  }
+  return approval as SetupWritingApprovalPayload;
+}
+
+const WRITING_MODE_LABELS: Record<string, string> = {
+  strict: "严格依据素材",
+  loose: "可结合通用知识",
+};
+const MATERIAL_SOURCE_LABELS: Record<string, string> = {
+  knowledge_base: "知识库",
+  skill: "技能检索",
+};
+
+function SetupWritingApprovalCard({
+  disabled,
+  message,
+  onApprove,
+  onReject,
+}: {
+  disabled: boolean;
+  message: unknown;
+  onApprove?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
+  onReject?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
+}) {
+  const payload = getSetupWritingApprovalPayload(message);
+  const [submitting, setSubmitting] = useState<"approve" | "reject" | null>(
+    null,
+  );
+
+  if (!payload) {
+    return null;
+  }
+
+  const approvalPayload = payload;
+  const busy = disabled || submitting !== null;
+
+  async function run(action: "approve" | "reject") {
+    if (busy) {
+      return;
+    }
+    setSubmitting(action);
+    try {
+      if (action === "approve") {
+        await onApprove?.(approvalPayload);
+      } else {
+        await onReject?.(approvalPayload);
+      }
+    } finally {
+      setSubmitting(null);
+    }
+  }
+
+  const rows: Array<{ label: string; value: string }> = [];
+  if (approvalPayload.article_type) {
+    rows.push({ label: "文章类型", value: approvalPayload.article_type });
+  }
+  if (typeof approvalPayload.word_count_target === "number") {
+    rows.push({ label: "目标字数", value: `${approvalPayload.word_count_target} 字` });
+  }
+  if (approvalPayload.target_audience) {
+    rows.push({ label: "目标读者", value: approvalPayload.target_audience });
+  }
+  if (approvalPayload.writing_mode) {
+    rows.push({
+      label: "写作模式",
+      value: WRITING_MODE_LABELS[approvalPayload.writing_mode] ?? approvalPayload.writing_mode,
+    });
+  }
+  if (approvalPayload.material_source) {
+    rows.push({
+      label: "素材来源",
+      value: MATERIAL_SOURCE_LABELS[approvalPayload.material_source] ?? approvalPayload.material_source,
+    });
+  }
+
+  return (
+    <div className="border-border bg-card text-card-foreground w-full rounded-lg border p-4 shadow-sm">
+      <div className="space-y-3">
+        <div>
+          <div className="text-muted-foreground text-xs font-medium">写作配置建议</div>
+          <div className="text-sm font-medium">确认后将应用到左侧写作表单。</div>
+        </div>
+
+        {approvalPayload.user_intent ? (
+          <div className="space-y-1">
+            <div className="text-muted-foreground text-xs">写作意图</div>
+            <p className="text-sm leading-6">{approvalPayload.user_intent}</p>
+          </div>
+        ) : null}
+
+        {rows.length > 0 ? (
+          <div className="flex flex-wrap gap-x-6 gap-y-1.5">
+            {rows.map((row) => (
+              <div key={row.label} className="space-y-0.5">
+                <div className="text-muted-foreground text-xs">{row.label}</div>
+                <p className="text-sm font-medium">{row.value}</p>
+              </div>
+            ))}
+          </div>
+        ) : null}
+
+        {approvalPayload.outline ? (
+          <div className="space-y-1">
+            <div className="text-muted-foreground text-xs">已有大纲</div>
+            <pre className="bg-muted max-h-52 overflow-auto rounded-md p-3 text-xs whitespace-pre-wrap">
+              {approvalPayload.outline}
+            </pre>
+          </div>
+        ) : null}
+      </div>
+
+      <div className="mt-4 flex justify-end gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={busy || !onReject}
+          onClick={() => void run("reject")}
+        >
+          <XIcon className="h-4 w-4" />
+          忽略
+        </Button>
+        <Button
+          type="button"
+          size="sm"
+          disabled={busy || !onApprove}
+          onClick={() => void run("approve")}
+        >
+          <CheckIcon className="h-4 w-4" />
+          应用到表单
+        </Button>
+      </div>
+    </div>
+  );
+}
+
 function getClarificationPayload(message: unknown): ClarificationPayload | null {
  if (typeof message !== "object" || message === null) {
    return null;
@@ -714,9 +905,14 @@ function ClarificationCard({
      return;
    }
    if (!allowMultiple) {
-      const next = { selectedIds: [optionId], custom: "" };
+      // 单选：仅当「只有这一张待答澄清卡」时才点击即发送。多张澄清卡同时出现时，
+      // 点击只记录本卡选择，待最后一张的「全部发送」统一提交——否则点了第一张就立刻
+      // 提交整批，后面的卡片再也无法选择（见 bug：选了第一个，第二个不让选）。
+      const next = { selectedIds: [optionId], custom: selection.custom };
      onSelectionChange(next);
-      void onSubmitAll(next);
+      if (!multiPending) {
+        void onSubmitAll(next);
+      }
      return;
    }
    const next = selection.selectedIds.includes(optionId)
@@ -756,7 +952,11 @@ function ClarificationCard({
      {options.length > 0 ? (
        <div className="mt-4 grid gap-2">
          <div className="text-muted-foreground text-xs">
-            {allowMultiple ? "可多选（再次点击取消选择）" : "请选择一项（点击即发送）"}
+            {allowMultiple
+              ? "可多选（再次点击取消选择）"
+              : multiPending
+                ? "请选择一项"
+                : "请选择一项（点击即发送）"}
          </div>
          {options.map((option) => {
            const optionId = option.id || option.label;
@@ -765,7 +965,7 @@ function ClarificationCard({
              <Button
                key={optionId}
                type="button"
-                variant={isSelected && allowMultiple ? "default" : "outline"}
+                variant={isSelected && (allowMultiple || multiPending) ? "default" : "outline"}
                className="h-auto justify-start whitespace-normal px-3 py-2 text-left"
                disabled={disabled}
                onClick={() => handleOptionClick(optionId)}
@@ -785,7 +985,7 @@ function ClarificationCard({
                    </span>
                  ) : null}
                </span>
-                {isSelected && allowMultiple ? (
+                {isSelected && (allowMultiple || multiPending) ? (
                  <CheckIcon className="ml-2 h-4 w-4 shrink-0" />
                ) : null}
              </Button>
@@ -810,10 +1010,10 @@ function ClarificationCard({
        </div>
      ) : null}

-      {isPending && (allowMultiple || payload.allow_custom !== false) ? (
+      {isPending && (allowMultiple || multiPending || payload.allow_custom !== false) ? (
        isLastPending ? (
          <div className="mt-3 flex items-center justify-end gap-2">
-            {multiPending && allowMultiple ? (
+            {multiPending ? (
              <span className="text-muted-foreground text-xs">
                将一起提交以上 {pendingCount} 个问题的回答
              </span>
@@ -825,10 +1025,10 @@ function ClarificationCard({
              onClick={() => void onSubmitAll()}
            >
              <SendIcon className="h-4 w-4" />
-              {submitting ? "发送中…" : multiPending && allowMultiple ? "全部发送" : "发送回答"}
+              {submitting ? "发送中…" : multiPending ? "全部发送" : "发送回答"}
            </Button>
          </div>
-        ) : allowMultiple ? (
+        ) : allowMultiple || multiPending ? (
          <div className="text-muted-foreground mt-3 text-right text-xs">
            选择后等待最后一题统一提交
          </div>
@@ -1,9 +1,10 @@
 import type { BaseStream } from "@langchain/langgraph-sdk";
-import { useEffect } from "react";
-
-import { useI18n } from "@/core/i18n/hooks";
-import type { AgentThreadState } from "@/core/threads";
-import { desensitize } from "@/lib/desensitize";
+import { useEffect } from "react";
+
+import { useI18n } from "@/core/i18n/hooks";
+import type { AgentThreadState } from "@/core/threads";
+import { sanitizeThreadTitleForDisplay } from "@/core/threads/utils";
+import { desensitize } from "@/lib/desensitize";

 import { useThreadChat } from "./chats";
 import { FlipDisplay } from "./flip-display";
@@ -16,16 +17,18 @@ export function ThreadTitle({
  threadId: string;
  thread: BaseStream<AgentThreadState>;
 }) {
-  const { t } = useI18n();
-  const { isNewThread } = useThreadChat();
-  useEffect(() => {
-    let _title = t.pages.untitled;
-
-    if (thread.values?.title) {
-      _title = thread.values.title;
-    } else if (isNewThread) {
-      _title = t.pages.newChat;
-    }
+  const { t } = useI18n();
+  const { isNewThread } = useThreadChat();
+  const displayTitle = sanitizeThreadTitleForDisplay(thread.values?.title);
+
+  useEffect(() => {
+    let _title = t.pages.untitled;
+
+    if (thread.values?.title) {
+      _title = displayTitle;
+    } else if (isNewThread) {
+      _title = t.pages.newChat;
+    }
    if (thread.isThreadLoading) {
      document.title = `Loading... - ${t.pages.appName}`;
    } else {
@@ -35,17 +38,18 @@ export function ThreadTitle({
    isNewThread,
    t.pages.newChat,
    t.pages.untitled,
-    t.pages.appName,
-    thread.isThreadLoading,
-    thread.values,
-  ]);
+    t.pages.appName,
+    thread.isThreadLoading,
+    thread.values,
+    displayTitle,
+  ]);

  if (!thread.values?.title) {
    return null;
  }
-  return (
-    <FlipDisplay uniqueKey={threadId}>
-      {desensitize(thread.values.title ?? "Untitled")}
-    </FlipDisplay>
-  );
-}
+  return (
+    <FlipDisplay uniqueKey={threadId}>
+      {desensitize(displayTitle)}
+    </FlipDisplay>
+  );
+}
@@ -19,6 +19,9 @@ import { BotIcon, BrainIcon, ListChecks, MessageSquarePlus, MessagesSquare, PenL
 import { SidebarCollapseButton } from "./workspace-header";
 import { WorkspaceNavStudio } from "./workspace-nav-studio";
 import { cn } from "@/lib/utils";
+import { env } from "@/env";
+
+const studioEnabled = env.STUDIO_ENABLED?.toLowerCase() === "true";

 // 普通导航项：默认中性色，激活态与「新对话」一致——主色浅底 + 主色文字/图标
 const NAV_ITEM_CLASS =
@@ -165,7 +168,7 @@ export function WorkspaceNavChatList({
        )}
      </SidebarMenu>
    </SidebarGroup>
-    {/* {!showCollapseTrigger && <WorkspaceNavStudio />} */}
+    {!showCollapseTrigger && studioEnabled && <WorkspaceNavStudio />}
    </>
  );
 }
@@ -34,8 +34,6 @@ const NAV_ITEM_CLASS =
  "data-[active=true]:bg-primary/15 data-[active=true]:text-primary data-[active=true]:shadow-none " +
  "dark:hover:bg-primary/15 dark:data-[active=true]:bg-primary/25 dark:data-[active=true]:text-primary-foreground";

-const SIDEBAR_PREVIEW_COUNT = 5;
-
 export function WorkspaceNavStudio() {
  const { notebooks, isLoading, isError } = useStudioNotebooks();
  const { pathname } = useLocation();
@@ -71,6 +69,7 @@ export function WorkspaceNavStudio() {
    return null;
  }

+  const SIDEBAR_PREVIEW_COUNT = 2;
  const preview = notebooks.slice(0, SIDEBAR_PREVIEW_COUNT);

  return (