feat: support SSE write_file(0

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

@@ -19,6 +19,7 @@ import {
 } from "@/components/workspace/artifacts";
 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 { Tooltip } from "@/components/workspace/tooltip";
 import { Welcome } from "@/components/workspace/welcome";
@@ -86,7 +87,12 @@ export default function ChatPage() {
     await thread.stop();
   }, [thread]);
 
+  if (!threadId) {
+    return null;
+  }
+
   return (
+    <ThreadContext.Provider value={{ threadId, thread }}>
       <ResizablePanelGroup orientation="horizontal">
         <ResizablePanel
           className="relative"
@@ -96,7 +102,7 @@ export default function ChatPage() {
           <div className="relative flex size-full min-h-0 justify-between">
             <header className="bg-background/80 absolute top-0 right-0 left-0 z-30 flex h-12 shrink-0 items-center px-4 backdrop-blur">
               <div className="flex w-full items-center text-sm font-medium">
-              {threadId && title !== "Untitled" && (
+                {title !== "Untitled" && (
                   <ThreadTitle threadId={threadId} threadTitle={title} />
                 )}
               </div>
@@ -121,7 +127,7 @@ export default function ChatPage() {
               <div className="flex size-full justify-center">
                 <MessageList
                   className="size-full"
-                threadId={threadId!}
+                  threadId={threadId}
                   thread={thread}
                 />
               </div>
@@ -148,7 +154,9 @@ export default function ChatPage() {
                     autoFocus={isNewThread}
                     status={thread.isLoading ? "streaming" : "ready"}
                     context={settings.context}
-                  onContextChange={(context) => setSettings("context", context)}
+                    onContextChange={(context) =>
+                      setSettings("context", context)
+                    }
                     onSubmit={handleSubmit}
                     onStop={handleStop}
                   />
@@ -181,7 +189,7 @@ export default function ChatPage() {
               <ArtifactFileDetail
                 className="size-full"
                 filepath={selectedArtifact}
-              threadId={threadId!}
+                threadId={threadId}
               />
             ) : (
               <div className="relative flex size-full justify-center">
@@ -211,7 +219,7 @@ export default function ChatPage() {
                       <ArtifactFileList
                         className="max-w-(--container-width-sm) p-4 pt-12"
                         files={thread.values.artifacts ?? []}
-                      threadId={threadId!}
+                        threadId={threadId}
                       />
                     </main>
                   </div>
@@ -221,5 +229,6 @@ export default function ChatPage() {
           </div>
         </ResizablePanel>
       </ResizablePanelGroup>
+    </ThreadContext.Provider>
   );
 }

frontend/src/app/workspace/layout.tsx

@@ -35,7 +35,7 @@ export default function WorkspaceLayout({
       >
         <Overscroll behavior="none" overflow="hidden" />
         <WorkspaceSidebar />
-        <SidebarInset>{children}</SidebarInset>
+        <SidebarInset className="min-w-0">{children}</SidebarInset>
       </SidebarProvider>
       <Toaster position="top-center" />
     </QueryClientProvider>

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

@@ -143,5 +143,8 @@ export const ArtifactContent = ({
   className,
   ...props
 }: ArtifactContentProps) => (
-  <div className={cn("flex-1 overflow-auto p-4", className)} {...props} />
+  <div
+    className={cn("min-h-0 flex-1 overflow-auto p-4", className)}
+    {...props}
+  />
 );

frontend/src/components/ai-elements/code-block.tsx

@@ -52,7 +52,7 @@ const lineNumberTransformer: ShikiTransformer = {
 export async function highlightCode(
   code: string,
   language: BundledLanguage,
-  showLineNumbers = false
+  showLineNumbers = false,
 ) {
   const transformers: ShikiTransformer[] = showLineNumbers
     ? [lineNumberTransformer]
@@ -102,19 +102,19 @@ export const CodeBlock = ({
     <CodeBlockContext.Provider value={{ code }}>
       <div
         className={cn(
-          "group relative w-full overflow-hidden rounded-md border bg-background text-foreground",
+          "group bg-background text-foreground relative size-full overflow-hidden rounded-md border",
-          className
+          className,
         )}
         {...props}
       >
-        <div className="relative">
+        <div className="relative size-full">
           <div
-            className="overflow-auto dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+            className="[&>pre]:bg-background! [&>pre]:text-foreground! size-full overflow-auto dark:hidden [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:p-4 [&>pre]:text-sm [&>pre]:whitespace-pre-wrap"
             // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
             dangerouslySetInnerHTML={{ __html: html }}
           />
           <div
-            className="hidden overflow-auto dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+            className="[&>pre]:bg-background! [&>pre]:text-foreground! hidden overflow-auto dark:block [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:p-4 [&>pre]:text-sm"
             // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
             dangerouslySetInnerHTML={{ __html: darkHtml }}
           />

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

@@ -32,7 +32,7 @@ import { FileViewer } from "./file-viewer";
 
 export function ArtifactFileDetail({
   className,
-  filepath,
+  filepath: filepathFromProps,
   threadId,
 }: {
   className?: string;
@@ -40,17 +40,37 @@ export function ArtifactFileDetail({
   threadId: string;
 }) {
   const { artifacts, setOpen, select } = useArtifacts();
-  const { isCodeFile } = useMemo(() => checkCodeFile(filepath), [filepath]);
+  const isWriteFile = useMemo(() => {
+    return filepathFromProps.startsWith("write-file:");
+  }, [filepathFromProps]);
+  const filepath = useMemo(() => {
+    if (isWriteFile) {
+      const url = new URL(filepathFromProps);
+      return url.pathname;
+    }
+    return filepathFromProps;
+  }, [filepathFromProps, isWriteFile]);
+  const { isCodeFile } = useMemo(() => {
+    if (isWriteFile) {
+      let language = checkCodeFile(filepath).language;
+      language ??= "markdown";
+      return { isCodeFile: true, language };
+    }
+    return checkCodeFile(filepath);
+  }, [filepath, isWriteFile]);
   const { content } = useArtifactContent({
     threadId,
-    filepath,
+    filepath: filepathFromProps,
-    enabled: isCodeFile,
+    enabled: isCodeFile && !isWriteFile,
   });
   return (
     <Artifact className={cn("rounded-none", className)}>
       <ArtifactHeader className="px-2">
         <div>
           <ArtifactTitle>
+            {isWriteFile ? (
+              <div className="px-2">{getFileName(filepath)}</div>
+            ) : (
               <Select value={filepath} onValueChange={select}>
                 <SelectTrigger className="border-none bg-transparent! shadow-none select-none focus:outline-0 active:outline-0">
                   <SelectValue placeholder="Select a file" />
@@ -65,10 +85,12 @@ export function ArtifactFileDetail({
                   </SelectGroup>
                 </SelectContent>
               </Select>
+            )}
           </ArtifactTitle>
         </div>
         <div className="flex items-center gap-2">
           <ArtifactActions>
+            {!isWriteFile && (
               <a href={urlOfArtifact({ filepath, threadId })} target="_blank">
                 <ArtifactAction
                   icon={SquareArrowOutUpRightIcon}
@@ -76,6 +98,7 @@ export function ArtifactFileDetail({
                   tooltip="Open in new window"
                 />
               </a>
+            )}
             {isCodeFile && (
               <ArtifactAction
                 icon={CopyIcon}
@@ -93,6 +116,7 @@ export function ArtifactFileDetail({
                 tooltip="Copy content to clipboard"
               />
             )}
+            {!isWriteFile && (
               <a
                 href={urlOfArtifact({ filepath, threadId, download: true })}
                 target="_blank"
@@ -104,6 +128,7 @@ export function ArtifactFileDetail({
                   tooltip="Download file"
                 />
               </a>
+            )}
             <ArtifactAction
               icon={XIcon}
               label="Close"
@@ -117,7 +142,7 @@ export function ArtifactFileDetail({
         <FileViewer
           className="size-full"
           threadId={threadId}
-          filepath={filepath}
+          filepath={filepathFromProps}
         />
       </ArtifactContent>
     </Artifact>

frontend/src/components/workspace/artifacts/file-viewer.tsx

@@ -16,14 +16,21 @@ export function FileViewer({
   filepath: string;
   threadId: string;
 }) {
-  const { isCodeFile, language } = useMemo(
+  const isWriteFile = useMemo(() => {
-    () => checkCodeFile(filepath),
+    return filepath.startsWith("write-file:");
-    [filepath],
+  }, [filepath]);
-  );
+  const { isCodeFile, language } = useMemo(() => {
-  if (isCodeFile && language !== "html") {
+    if (isWriteFile) {
+      const url = new URL(filepath);
+      const path = url.pathname;
+      return checkCodeFile(path);
+    }
+    return checkCodeFile(filepath);
+  }, [filepath, isWriteFile]);
+  if (isWriteFile || (isCodeFile && language !== "html")) {
     return (
       <CodeFileView
-        language={language}
+        language={language ?? "markdown"}
         filepath={filepath}
         threadId={threadId}
       />
@@ -55,7 +62,7 @@ function CodeFileView({
   if (code) {
     return (
       <CodeBlock
-        className="rounded-none border-none"
+        className="size-full rounded-none border-none"
         language={language}
         code={code}
       />

frontend/src/components/workspace/messages/context.ts

@@ -0,0 +1,21 @@
+import type { UseStream } from "@langchain/langgraph-sdk/react";
+import { createContext, useContext } from "react";
+
+import type { AgentThreadState } from "@/core/threads";
+
+export interface ThreadContextType {
+  threadId: string;
+  thread: UseStream<AgentThreadState>;
+}
+
+export const ThreadContext = createContext<ThreadContextType | undefined>(
+  undefined,
+);
+
+export function useThread() {
+  const context = useContext(ThreadContext);
+  if (context === undefined) {
+    throw new Error("useThread must be used within a ThreadContext");
+  }
+  return context;
+}

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

@@ -30,6 +30,7 @@ import { useRehypeSplitWordsIntoSpans } from "@/core/rehype";
 import { extractTitleFromMarkdown } from "@/core/utils/markdown";
 import { cn } from "@/lib/utils";
 
+import { useArtifacts } from "../artifacts";
 import { FlipDisplay } from "../flip-display";
 
 export function MessageGroup({
@@ -108,15 +109,18 @@ export function MessageGroup({
 
 function ToolCall({
   id,
+  messageId,
   name,
   args,
   result,
 }: {
   id?: string;
+  messageId?: string;
   name: string;
   args: Record<string, unknown>;
   result?: string | Record<string, unknown>;
 }) {
+  const { select, setOpen } = useArtifacts();
   if (name === "web_search") {
     let label: React.ReactNode = "Search for related information";
     if (typeof args.query === "string") {
@@ -198,7 +202,20 @@ function ToolCall({
     }
     const path: string | undefined = (args as { path: string })?.path;
     return (
-      <ChainOfThoughtStep key={id} label={description} icon={NotebookPenIcon}>
+      <ChainOfThoughtStep
+        key={id}
+        className="cursor-pointer"
+        label={description}
+        icon={NotebookPenIcon}
+        onClick={() => {
+          select(
+            new URL(
+              `write-file:${path}?message_id=${messageId}&tool_call_id=${id}`,
+            ).toString(),
+          );
+          setOpen(true);
+        }}
+      >
         {path && (
           <ChainOfThoughtSearchResult>{path}</ChainOfThoughtSearchResult>
         )}
@@ -258,6 +275,7 @@ function ToolCall({
 
 interface GenericCoTStep<T extends string = string> {
   id?: string;
+  messageId?: string;
   type: T;
 }
 
@@ -281,6 +299,7 @@ function convertToSteps(messages: Message[]): CoTStep[] {
       if (reasoning) {
         const step: CoTReasoningStep = {
           id: message.id,
+          messageId: message.id,
           type: "reasoning",
           reasoning: extractReasoningContentFromMessage(message),
         };
@@ -289,6 +308,7 @@ function convertToSteps(messages: Message[]): CoTStep[] {
       for (const tool_call of message.tool_calls ?? []) {
         const step: CoTToolCallStep = {
           id: tool_call.id,
+          messageId: message.id,
           type: "toolCall",
           name: tool_call.name,
           args: tool_call.args,

frontend/src/core/artifacts/hooks.ts

@@ -1,4 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+
+import { useThread } from "@/components/workspace/messages/context";
 
 import { loadArtifactContent } from "./loader";
 
@@ -11,10 +14,37 @@ export function useArtifactContent({
   threadId: string;
   enabled?: boolean;
 }) {
+  const isWriteFile = useMemo(() => {
+    return filepath.startsWith("write-file:");
+  }, [filepath]);
+  const { thread } = useThread();
+  const content = useMemo(() => {
+    if (isWriteFile) {
+      const url = new URL(filepath);
+      const toolCallId = url.searchParams.get("tool_call_id");
+      const messageId = url.searchParams.get("message_id");
+      if (messageId && toolCallId) {
+        const message = thread.messages.find(
+          (message) => message.id === messageId,
+        );
+        if (message?.type === "ai" && message.tool_calls) {
+          const toolCall = message.tool_calls.find(
+            (toolCall) => toolCall.id === toolCallId,
+          );
+          if (toolCall) {
+            return toolCall.args.content;
+          }
+        }
+      }
+    }
+    return null;
+  }, [filepath, isWriteFile, thread.messages]);
   const { data, isLoading, error } = useQuery({
     queryKey: ["artifact", filepath, threadId],
-    queryFn: () => loadArtifactContent({ filepath, threadId }),
+    queryFn: () => {
+      return loadArtifactContent({ filepath, threadId });
+    },
     enabled,
   });
-  return { content: data, isLoading, error };
+  return { content: isWriteFile ? content : data, isLoading, error };
 }