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,140 +87,148 @@ export default function ChatPage() {
     await thread.stop();
   }, [thread]);
 
+  if (!threadId) {
+    return null;
+  }
+
   return (
-    <ResizablePanelGroup orientation="horizontal">
-      <ResizablePanel
-        className="relative"
-        defaultSize={artifactsOpen ? 46 : 100}
-        minSize={30}
-      >
-        <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" && (
-                <ThreadTitle threadId={threadId} threadTitle={title} />
-              )}
-            </div>
-            <div>
-              {artifacts?.length && !artifactsOpen && (
-                <Tooltip content="Show artifacts of this conversation">
-                  <Button
-                    variant="ghost"
-                    onClick={() => {
-                      setArtifactsOpen(true);
-                      setSidebarOpen(false);
-                    }}
-                  >
-                    <FilesIcon />
-                    Artifacts
-                  </Button>
-                </Tooltip>
-              )}
-            </div>
-          </header>
-          <main className="flex min-h-0 grow flex-col">
-            <div className="flex size-full justify-center">
-              <MessageList
-                className="size-full"
-                threadId={threadId!}
-                thread={thread}
-              />
-            </div>
-            <div className="absolute right-0 bottom-0 left-0 z-30 flex justify-center px-4">
-              <div
-                className={cn(
-                  "relative w-full",
-                  isNewThread && "-translate-y-[calc(50vh-120px)]",
-                  isNewThread
-                    ? "max-w-(--container-width-sm)"
-                    : "max-w-(--container-width-md)",
+    <ThreadContext.Provider value={{ threadId, thread }}>
+      <ResizablePanelGroup orientation="horizontal">
+        <ResizablePanel
+          className="relative"
+          defaultSize={artifactsOpen ? 46 : 100}
+          minSize={30}
+        >
+          <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">
+                {title !== "Untitled" && (
+                  <ThreadTitle threadId={threadId} threadTitle={title} />
                 )}
-              >
+              </div>
+              <div>
+                {artifacts?.length && !artifactsOpen && (
+                  <Tooltip content="Show artifacts of this conversation">
+                    <Button
+                      variant="ghost"
+                      onClick={() => {
+                        setArtifactsOpen(true);
+                        setSidebarOpen(false);
+                      }}
+                    >
+                      <FilesIcon />
+                      Artifacts
+                    </Button>
+                  </Tooltip>
+                )}
+              </div>
+            </header>
+            <main className="flex min-h-0 grow flex-col">
+              <div className="flex size-full justify-center">
+                <MessageList
+                  className="size-full"
+                  threadId={threadId}
+                  thread={thread}
+                />
+              </div>
+              <div className="absolute right-0 bottom-0 left-0 z-30 flex justify-center px-4">
                 <div
                   className={cn(
-                    "absolute right-0 bottom-[148px] left-0 flex",
-                    isNewThread ? "" : "pointer-events-none opacity-0",
+                    "relative w-full",
+                    isNewThread && "-translate-y-[calc(50vh-120px)]",
+                    isNewThread
+                      ? "max-w-(--container-width-sm)"
+                      : "max-w-(--container-width-md)",
                   )}
                 >
-                  <Welcome />
+                  <div
+                    className={cn(
+                      "absolute right-0 bottom-[148px] left-0 flex",
+                      isNewThread ? "" : "pointer-events-none opacity-0",
+                    )}
+                  >
+                    <Welcome />
+                  </div>
+                  <InputBox
+                    className={cn("w-full")}
+                    autoFocus={isNewThread}
+                    status={thread.isLoading ? "streaming" : "ready"}
+                    context={settings.context}
+                    onContextChange={(context) =>
+                      setSettings("context", context)
+                    }
+                    onSubmit={handleSubmit}
+                    onStop={handleStop}
+                  />
                 </div>
-                <InputBox
-                  className={cn("w-full")}
-                  autoFocus={isNewThread}
-                  status={thread.isLoading ? "streaming" : "ready"}
-                  context={settings.context}
-                  onContextChange={(context) => setSettings("context", context)}
-                  onSubmit={handleSubmit}
-                  onStop={handleStop}
-                />
               </div>
-            </div>
-          </main>
-        </div>
-      </ResizablePanel>
-      <ResizableHandle
-        className={cn(
-          "transition-opacity duration-300",
-          !artifactsOpen && "pointer-events-none opacity-0",
-        )}
-      />
-      <ResizablePanel
-        className={cn(
-          "transition-all duration-300 ease-in-out",
-          !artifactsOpen && "opacity-0",
-        )}
-        defaultSize={artifactsOpen ? 64 : 0}
-        minSize={0}
-      >
-        <div
+            </main>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle
           className={cn(
-            "h-full transition-transform duration-300 ease-in-out",
-            artifactsOpen ? "translate-x-0" : "translate-x-full",
+            "transition-opacity duration-300",
+            !artifactsOpen && "pointer-events-none opacity-0",
           )}
+        />
+        <ResizablePanel
+          className={cn(
+            "transition-all duration-300 ease-in-out",
+            !artifactsOpen && "opacity-0",
+          )}
+          defaultSize={artifactsOpen ? 64 : 0}
+          minSize={0}
         >
-          {selectedArtifact ? (
-            <ArtifactFileDetail
-              className="size-full"
-              filepath={selectedArtifact}
-              threadId={threadId!}
-            />
-          ) : (
-            <div className="relative flex size-full justify-center">
-              <div className="absolute top-1 right-1 z-30">
-                <Button
-                  size="icon-sm"
-                  variant="ghost"
-                  onClick={() => {
-                    setArtifactsOpen(false);
-                  }}
-                >
-                  <XIcon />
-                </Button>
-              </div>
-              {thread.values.artifacts?.length === 0 ? (
-                <ConversationEmptyState
-                  icon={<FilesIcon />}
-                  title="No artifact selected"
-                  description="Select an artifact to view its details"
-                />
-              ) : (
-                <div className="flex size-full max-w-(--container-width-sm) flex-col justify-center p-4 pt-8">
-                  <header className="shrink-0">
-                    <h2 className="text-lg font-medium">Artifacts</h2>
-                  </header>
-                  <main className="min-h-0 grow">
-                    <ArtifactFileList
-                      className="max-w-(--container-width-sm) p-4 pt-12"
-                      files={thread.values.artifacts ?? []}
-                      threadId={threadId!}
-                    />
-                  </main>
+          <div
+            className={cn(
+              "h-full transition-transform duration-300 ease-in-out",
+              artifactsOpen ? "translate-x-0" : "translate-x-full",
+            )}
+          >
+            {selectedArtifact ? (
+              <ArtifactFileDetail
+                className="size-full"
+                filepath={selectedArtifact}
+                threadId={threadId}
+              />
+            ) : (
+              <div className="relative flex size-full justify-center">
+                <div className="absolute top-1 right-1 z-30">
+                  <Button
+                    size="icon-sm"
+                    variant="ghost"
+                    onClick={() => {
+                      setArtifactsOpen(false);
+                    }}
+                  >
+                    <XIcon />
+                  </Button>
                 </div>
-              )}
-            </div>
-          )}
-        </div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
+                {thread.values.artifacts?.length === 0 ? (
+                  <ConversationEmptyState
+                    icon={<FilesIcon />}
+                    title="No artifact selected"
+                    description="Select an artifact to view its details"
+                  />
+                ) : (
+                  <div className="flex size-full max-w-(--container-width-sm) flex-col justify-center p-4 pt-8">
+                    <header className="shrink-0">
+                      <h2 className="text-lg font-medium">Artifacts</h2>
+                    </header>
+                    <main className="min-h-0 grow">
+                      <ArtifactFileList
+                        className="max-w-(--container-width-sm) p-4 pt-12"
+                        files={thread.values.artifacts ?? []}
+                        threadId={threadId}
+                      />
+                    </main>
+                  </div>
+                )}
+              </div>
+            )}
+          </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",
-          className
+          "group bg-background text-foreground relative size-full overflow-hidden rounded-md border",
+          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,42 +40,65 @@ 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,
-    enabled: isCodeFile,
+    filepath: filepathFromProps,
+    enabled: isCodeFile && !isWriteFile,
   });
   return (
     <Artifact className={cn("rounded-none", className)}>
       <ArtifactHeader className="px-2">
         <div>
           <ArtifactTitle>
-            <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" />
-              </SelectTrigger>
-              <SelectContent className="select-none">
-                <SelectGroup>
-                  {(artifacts ?? []).map((filepath) => (
-                    <SelectItem key={filepath} value={filepath}>
-                      {getFileName(filepath)}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
+            {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" />
+                </SelectTrigger>
+                <SelectContent className="select-none">
+                  <SelectGroup>
+                    {(artifacts ?? []).map((filepath) => (
+                      <SelectItem key={filepath} value={filepath}>
+                        {getFileName(filepath)}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            )}
           </ArtifactTitle>
         </div>
         <div className="flex items-center gap-2">
           <ArtifactActions>
-            <a href={urlOfArtifact({ filepath, threadId })} target="_blank">
-              <ArtifactAction
-                icon={SquareArrowOutUpRightIcon}
-                label="Open in new window"
-                tooltip="Open in new window"
-              />
-            </a>
+            {!isWriteFile && (
+              <a href={urlOfArtifact({ filepath, threadId })} target="_blank">
+                <ArtifactAction
+                  icon={SquareArrowOutUpRightIcon}
+                  label="Open in new window"
+                  tooltip="Open in new window"
+                />
+              </a>
+            )}
             {isCodeFile && (
               <ArtifactAction
                 icon={CopyIcon}
@@ -93,17 +116,19 @@ export function ArtifactFileDetail({
                 tooltip="Copy content to clipboard"
               />
             )}
-            <a
-              href={urlOfArtifact({ filepath, threadId, download: true })}
-              target="_blank"
-            >
-              <ArtifactAction
-                icon={DownloadIcon}
-                label="Download"
-                onClick={() => console.log("Download")}
-                tooltip="Download file"
-              />
-            </a>
+            {!isWriteFile && (
+              <a
+                href={urlOfArtifact({ filepath, threadId, download: true })}
+                target="_blank"
+              >
+                <ArtifactAction
+                  icon={DownloadIcon}
+                  label="Download"
+                  onClick={() => console.log("Download")}
+                  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(
-    () => checkCodeFile(filepath),
-    [filepath],
-  );
-  if (isCodeFile && language !== "html") {
+  const isWriteFile = useMemo(() => {
+    return filepath.startsWith("write-file:");
+  }, [filepath]);
+  const { isCodeFile, language } = useMemo(() => {
+    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 };
 }