diff --git a/apps/standalone-chat/src/features/agent-chat/components/ChatInterface.tsx b/apps/standalone-chat/src/features/agent-chat/components/ChatInterface.tsx
index 70380e9f..7f89d23a 100644
--- a/apps/standalone-chat/src/features/agent-chat/components/ChatInterface.tsx
+++ b/apps/standalone-chat/src/features/agent-chat/components/ChatInterface.tsx
@@ -19,7 +19,6 @@ import {
   Clock,
   Circle,
   FileIcon,
-  Mail,
 } from "lucide-react";
 import { ChatMessage } from "./ChatMessage";
 import type { TodoItem, ToolCall } from "../types";
@@ -32,11 +31,8 @@ import { v4 as uuidv4 } from "uuid";
 import { useChatContext } from "../providers/ChatProvider";
 import { useQueryState } from "nuqs";
 import { cn } from "@/lib/utils";
-import { ThreadActionsView } from "./interrupted-actions";
 import { useStickToBottom } from "use-stick-to-bottom";
 import { FilesPopover } from "./TasksFilesSidebar";
-import useInterruptedActions from "./interrupted-actions/hooks/use-interrupted-actions";
-import { HumanResponseWithEdits } from "../types/inbox";
 
 interface ChatInterfaceProps {
   assistant: Assistant | null;
@@ -137,10 +133,11 @@ export const ChatInterface = React.memo<ChatInterfaceProps>(
     );
 
     const {
+      stream,
       messages,
       todos,
       files,
-      email,
+      ui,
       setFiles,
       isLoading,
       isThreadLoading,
@@ -152,10 +149,6 @@ export const ChatInterface = React.memo<ChatInterfaceProps>(
       stopStream,
     } = useChatContext();
 
-    const actions = useInterruptedActions({
-      interrupt,
-    });
-
     const submitDisabled = isLoading || !assistant;
 
     const handleSubmit = useCallback(
@@ -165,13 +158,6 @@ export const ChatInterface = React.memo<ChatInterfaceProps>(
         }
         if (submitDisabled) return;
 
-        if (interrupt) {
-          actions.handleSubmit(e);
-          actions.resetState();
-          setInput("");
-          return;
-        }
-
         const messageText = input.trim();
         if (!messageText || isLoading) return;
         if (debugMode) {
@@ -195,8 +181,6 @@ export const ChatInterface = React.memo<ChatInterfaceProps>(
         setInput,
         runSingleStep,
         submitDisabled,
-        actions,
-        interrupt,
       ],
     );
 
@@ -432,36 +416,6 @@ export const ChatInterface = React.memo<ChatInterfaceProps>(
 
     const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setInput(e.target.value);
-
-      if (interrupt) {
-        actions.setSelectedSubmitType("response");
-        actions.setHasAddedResponse(true);
-
-        actions.setHumanResponse((prev) => {
-          const newResponse: HumanResponseWithEdits = {
-            type: "response",
-            args: e.target.value,
-          };
-
-          if (prev.find((p) => p.type === newResponse.type)) {
-            return prev.map((p) => {
-              if (p.type === newResponse.type) {
-                if (p.acceptAllowed) {
-                  return {
-                    ...newResponse,
-                    acceptAllowed: true,
-                    editsMade: !!e.target.value,
-                  };
-                }
-                return newResponse;
-              }
-              return p;
-            });
-          } else {
-            throw new Error("No human response found for string response");
-          }
-        });
-      }
     };
 
     return (
@@ -471,32 +425,33 @@ export const ChatInterface = React.memo<ChatInterfaceProps>(
           ref={scrollRef}
         >
           <div
-            className="mx-auto w-full max-w-[1024px] px-6 pt-4 pb-6"
+            className="mx-auto w-full px-6 pt-4 pb-6"
             ref={contentRef}
           >
           {isThreadLoading ? (
             skeleton
           ) : (
             <>
-              {processedMessages.map((data, index) => (
-                <ChatMessage
-                  key={data.message.id}
-                  message={data.message}
-                  toolCalls={data.toolCalls}
-                  onRestartFromAIMessage={handleRestartFromAIMessage}
-                  onRestartFromSubTask={handleRestartFromSubTask}
-                  debugMode={debugMode}
-                  isLoading={isLoading}
-                  isLastMessage={index === processedMessages.length - 1}
-                  interrupt={interrupt}
-                />
-              ))}
-              {interrupt && (
-                <ThreadActionsView
-                  interrupt={interrupt}
-                  threadId={threadId}
-                />
-              )}
+              {processedMessages.map((data, index) => {
+                const messageUi = ui?.filter(
+                  (u: any) => u.metadata?.message_id === data.message.id
+                );
+                return (
+                  <ChatMessage
+                    key={data.message.id}
+                    message={data.message}
+                    toolCalls={data.toolCalls}
+                    onRestartFromAIMessage={handleRestartFromAIMessage}
+                    onRestartFromSubTask={handleRestartFromSubTask}
+                    debugMode={debugMode}
+                    isLoading={isLoading}
+                    isLastMessage={index === processedMessages.length - 1}
+                    interrupt={interrupt}
+                    ui={messageUi}
+                    stream={stream}
+                  />
+                );
+              })}
               {interrupt && debugMode && (
                 <div className="mt-4">
                   <Button
@@ -525,7 +480,7 @@ export const ChatInterface = React.memo<ChatInterfaceProps>(
           <div
             className={cn(
               "bg-background mx-4 mb-6 flex flex-shrink-0 flex-col overflow-hidden rounded-xl border",
-              "mx-auto w-[calc(100%-32px)] max-w-[1024px] transition-colors duration-200 ease-in-out",
+              "mx-auto w-[calc(100%-32px)] transition-colors duration-200 ease-in-out",
             )}
           >
           {(hasTasks || hasFiles) && (
@@ -619,23 +574,10 @@ export const ChatInterface = React.memo<ChatInterfaceProps>(
                       );
                     })();
 
-                    const gmailButton = email?.id ? (
-                      <a
-                        href={`https://mail.google.com/mail/u/0/#inbox/${email.id}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="flex flex-shrink-0 cursor-pointer items-center gap-2 px-4.5 py-3 text-left text-sm hover:bg-gray-50"
-                      >
-                        <Mail size={16} />
-                        Open in Gmail
-                      </a>
-                    ) : null;
-
                     return (
                       <div className="grid grid-cols-[1fr_auto_auto] items-center">
                         {tasksTrigger}
                         {filesTrigger}
-                        {gmailButton}
                       </div>
                     );
                   })()}
@@ -741,9 +683,7 @@ export const ChatInterface = React.memo<ChatInterfaceProps>(
               placeholder={
                 isLoading
                   ? "Running..."
-                  : interrupt
-                    ? "Respond to the interrupt..."
-                    : "Write your message..."
+                  : "Write your message..."
               }
               className="font-inherit text-primary placeholder:text-tertiary field-sizing-content flex-1 resize-none border-0 bg-transparent p-4.5 pb-7.5 text-sm leading-6 outline-none"
               rows={1}
@@ -779,7 +719,7 @@ export const ChatInterface = React.memo<ChatInterfaceProps>(
                   ) : (
                     <>
                       <ArrowUp size={18} />
-                      <span>{interrupt ? "Resume" : "Send"}</span>
+                      <span>Send</span>
                     </>
                   )}
                 </Button>
diff --git a/apps/standalone-chat/src/features/agent-chat/components/ChatMessage.tsx b/apps/standalone-chat/src/features/agent-chat/components/ChatMessage.tsx
index bb6f8c35..c32acc2e 100644
--- a/apps/standalone-chat/src/features/agent-chat/components/ChatMessage.tsx
+++ b/apps/standalone-chat/src/features/agent-chat/components/ChatMessage.tsx
@@ -23,6 +23,8 @@ interface ChatMessageProps {
   isLastMessage?: boolean;
   isLoading?: boolean;
   interrupt?: Interrupt;
+  ui?: any[];
+  stream?: any;
 }
 
 export const ChatMessage = React.memo<ChatMessageProps>(
@@ -35,6 +37,8 @@ export const ChatMessage = React.memo<ChatMessageProps>(
     isLastMessage,
     isLoading,
     interrupt,
+    ui,
+    stream,
   }) => {
     const isUser = message.type === "human";
     const isAIMessage = message.type === "ai";
@@ -88,8 +92,8 @@ export const ChatMessage = React.memo<ChatMessageProps>(
       >
         <div
           className={cn(
-            "max-w-full min-w-0 flex-shrink-0",
-            isUser && "max-w-[70%]",
+            "max-w-full min-w-0",
+            isUser ? "max-w-[70%]" : "w-full",
           )}
         >
           {(hasContent || debugMode) && (
@@ -125,20 +129,21 @@ export const ChatMessage = React.memo<ChatMessageProps>(
             </div>
           )}
           {hasToolCalls && (
-            <div className="mt-4 flex w-fit max-w-full flex-col">
+            <div className="mt-4 flex w-full flex-col">
               {toolCalls.map((toolCall: ToolCall, idx, arr) => {
                 if (toolCall.name === "task") return null;
-                // Don't show tool call if it's the interrupted tool call.
-                if (
-                  idx === arr.length - 1 &&
-                  toolCall.name === interruptTitle
-                ) {
-                  return null;
-                }
+                const uiComponent = ui?.find(
+                  (u) => u.metadata?.tool_call_id === toolCall.id
+                );
+                const isInterrupted =
+                  idx === arr.length - 1 && toolCall.name === interruptTitle && isLastMessage;
                 return (
                   <ToolCallBox
                     key={toolCall.id}
                     toolCall={toolCall}
+                    uiComponent={uiComponent}
+                    stream={stream}
+                    isInterrupted={isInterrupted}
                   />
                 );
               })}
diff --git a/apps/standalone-chat/src/features/agent-chat/components/FileViewDialog.tsx b/apps/standalone-chat/src/features/agent-chat/components/FileViewDialog.tsx
index f73a25a2..e0a882f1 100644
--- a/apps/standalone-chat/src/features/agent-chat/components/FileViewDialog.tsx
+++ b/apps/standalone-chat/src/features/agent-chat/components/FileViewDialog.tsx
@@ -57,8 +57,8 @@ export const FileViewDialog = React.memo<{
   editDisabled: boolean;
 }>(({ file, onSaveFile, onClose, editDisabled }) => {
   const [isEditingMode, setIsEditingMode] = useState(file === null);
-  const [fileName, setFileName] = useState(file?.path || "");
-  const [fileContent, setFileContent] = useState(file?.content || "");
+  const [fileName, setFileName] = useState(String(file?.path || ""));
+  const [fileContent, setFileContent] = useState(String(file?.content || ""));
 
   const fileUpdate = useSWRMutation(
     { kind: "files-update", fileName, fileContent },
@@ -73,13 +73,14 @@ export const FileViewDialog = React.memo<{
   );
 
   useEffect(() => {
-    setFileName(file?.path || "");
-    setFileContent(file?.content || "");
+    setFileName(String(file?.path || ""));
+    setFileContent(String(file?.content || ""));
     setIsEditingMode(file === null);
   }, [file]);
 
   const fileExtension = useMemo(() => {
-    return fileName.split(".").pop()?.toLowerCase() || "";
+    const fileNameStr = String(fileName || "");
+    return fileNameStr.split(".").pop()?.toLowerCase() || "";
   }, [fileName]);
 
   const isMarkdown = useMemo(() => {
@@ -118,8 +119,8 @@ export const FileViewDialog = React.memo<{
     if (file === null) {
       onClose();
     } else {
-      setFileName(file.path);
-      setFileContent(file.content);
+      setFileName(String(file.path));
+      setFileContent(String(file.content));
       setIsEditingMode(false);
     }
   }, [file, onClose]);
diff --git a/apps/standalone-chat/src/features/agent-chat/components/TasksFilesSidebar.tsx b/apps/standalone-chat/src/features/agent-chat/components/TasksFilesSidebar.tsx
index 35cbe536..96a983ae 100644
--- a/apps/standalone-chat/src/features/agent-chat/components/TasksFilesSidebar.tsx
+++ b/apps/standalone-chat/src/features/agent-chat/components/TasksFilesSidebar.tsx
@@ -49,24 +49,43 @@ export function FilesPopover({
         </div>
       ) : (
         <div className="grid grid-cols-[repeat(auto-fill,minmax(256px,1fr))] gap-2">
-          {Object.keys(files).map((file) => (
-            <button
-              key={file}
-              type="button"
-              onClick={() =>
-                setSelectedFile({ path: file, content: files[file] })
+          {Object.keys(files).map((file) => {
+            const filePath = String(file);
+            const rawContent = files[file];
+
+            // Handle new format: { content: ["line1", "line2"] }
+            // Also handle old format: "line1\nline2"
+            let fileContent: string;
+            if (typeof rawContent === "object" && rawContent !== null && "content" in rawContent) {
+              const contentArray = (rawContent as { content: unknown }).content;
+              if (Array.isArray(contentArray)) {
+                fileContent = contentArray.join("\n");
+              } else {
+                fileContent = String(contentArray || "");
               }
-              className="hover:bg-muted/40 bg-background cursor-pointer space-y-1 truncate rounded-md border px-2 py-3"
-            >
-              <FileText
-                size={24}
-                className="text-muted-foreground mx-auto"
-              />
-              <span className="text-muted-foreground mx-auto block w-full truncate text-center text-sm leading-relaxed break-words">
-                {file}
-              </span>
-            </button>
-          ))}
+            } else {
+              fileContent = String(rawContent || "");
+            }
+
+            return (
+              <button
+                key={filePath}
+                type="button"
+                onClick={() =>
+                  setSelectedFile({ path: filePath, content: fileContent })
+                }
+                className="hover:bg-muted/40 bg-background cursor-pointer space-y-1 truncate rounded-md border px-2 py-3"
+              >
+                <FileText
+                  size={24}
+                  className="text-muted-foreground mx-auto"
+                />
+                <span className="text-muted-foreground mx-auto block w-full truncate text-center text-sm leading-relaxed break-words">
+                  {filePath}
+                </span>
+              </button>
+            );
+          })}
         </div>
       )}
 
diff --git a/apps/standalone-chat/src/features/agent-chat/components/ToolCallBox.tsx b/apps/standalone-chat/src/features/agent-chat/components/ToolCallBox.tsx
index 0bdce2fd..9eafebf1 100644
--- a/apps/standalone-chat/src/features/agent-chat/components/ToolCallBox.tsx
+++ b/apps/standalone-chat/src/features/agent-chat/components/ToolCallBox.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useMemo, useCallback } from "react";
+import React, { useState, useMemo, useCallback, useEffect } from "react";
 import {
   ChevronDown,
   ChevronUp,
@@ -13,12 +13,16 @@ import {
 import { Button } from "@/components/ui/button";
 import { ToolCall } from "../types";
 import { cn } from "@/lib/utils";
+import { LoadExternalComponent } from "@langchain/langgraph-sdk/react-ui";
 
 interface ToolCallBoxProps {
   toolCall: ToolCall;
+  uiComponent?: any;
+  stream?: any;
+  isInterrupted?: boolean;
 }
 
-export const ToolCallBox = React.memo<ToolCallBoxProps>(({ toolCall }) => {
+export const ToolCallBox = React.memo<ToolCallBoxProps>(({ toolCall, uiComponent, stream, isInterrupted }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [expandedArgs, setExpandedArgs] = useState<Record<string, boolean>>({});
 
@@ -33,7 +37,7 @@ export const ToolCallBox = React.memo<ToolCallBoxProps>(({ toolCall }) => {
       parsedArgs = { raw: toolArgs };
     }
     const toolResult = toolCall.result || null;
-    const toolStatus = toolCall.status || "completed";
+    const toolStatus = isInterrupted ? "interrupted" : (toolCall.status || "completed");
 
     return {
       name: toolName,
@@ -41,7 +45,7 @@ export const ToolCallBox = React.memo<ToolCallBoxProps>(({ toolCall }) => {
       result: toolResult,
       status: toolStatus,
     };
-  }, [toolCall]);
+  }, [toolCall, isInterrupted]);
 
   const statusIcon = useMemo(() => {
     switch (status) {
@@ -91,10 +95,17 @@ export const ToolCallBox = React.memo<ToolCallBoxProps>(({ toolCall }) => {
 
   const hasContent = result || Object.keys(args).length > 0;
 
+  // Auto-expand when status is interrupted
+  useEffect(() => {
+    if (status === "interrupted" && hasContent) {
+      setIsExpanded(true);
+    }
+  }, [status, hasContent]);
+
   return (
     <div
       className={cn(
-        "hover:bg-accent w-fit max-w-[70vw] overflow-hidden rounded-lg border-none shadow-none transition-colors duration-200 outline-none",
+        "hover:bg-accent w-full overflow-hidden rounded-lg border-none shadow-none transition-colors duration-200 outline-none",
         isExpanded && hasContent && "bg-accent",
       )}
     >
@@ -103,7 +114,7 @@ export const ToolCallBox = React.memo<ToolCallBoxProps>(({ toolCall }) => {
         size="sm"
         onClick={toggleExpanded}
         className={cn(
-          "flex w-full items-center justify-between gap-2 border-none px-2 py-2 text-left shadow-none outline-none disabled:cursor-default",
+          "flex w-full items-center justify-between gap-2 border-none px-2 py-2 text-left shadow-none outline-none disabled:cursor-default focus-visible:ring-0 focus-visible:ring-offset-0",
         )}
         disabled={!hasContent}
       >
@@ -131,59 +142,73 @@ export const ToolCallBox = React.memo<ToolCallBoxProps>(({ toolCall }) => {
 
       {isExpanded && hasContent && (
         <div className="px-4 pb-4">
-          {Object.keys(args).length > 0 && (
+          {uiComponent && stream ? (
             <div className="mt-4">
-              <h4 className="text-muted-foreground mb-1 text-xs font-semibold tracking-wider uppercase">
-                Arguments
-              </h4>
-              <div className="space-y-2">
-                {Object.entries(args).map(([key, value]) => (
-                  <div
-                    key={key}
-                    className="border-border rounded-sm border"
-                  >
-                    <button
-                      onClick={() => toggleArgExpanded(key)}
-                      className="bg-muted/20 hover:bg-muted/40 flex w-full items-center justify-between p-2 text-left text-xs font-medium transition-colors"
-                    >
-                      <span className="font-mono">{key}</span>
-                      {expandedArgs[key] ? (
-                        <ChevronUp
-                          size={12}
-                          className="text-[#70707B]"
-                        />
-                      ) : (
-                        <ChevronDown
-                          size={12}
-                          className="text-[#70707B]"
-                        />
-                      )}
-                    </button>
-                    {expandedArgs[key] && (
-                      <div className="border-border bg-muted/10 border-t p-2">
-                        <pre className="text-foreground m-0 overflow-x-auto font-mono text-xs leading-6 break-all whitespace-pre-wrap">
-                          {typeof value === "string"
-                            ? value
-                            : JSON.stringify(value, null, 2)}
-                        </pre>
+              <LoadExternalComponent
+                key={uiComponent.id}
+                stream={stream}
+                message={uiComponent}
+                namespace="deepagent"
+                meta={{ status, args, result: result ?? "No Result Yet" }}
+              />
+            </div>
+          ) : (
+            <>
+              {Object.keys(args).length > 0 && (
+                <div className="mt-4">
+                  <h4 className="text-muted-foreground mb-1 text-xs font-semibold tracking-wider uppercase">
+                    Arguments
+                  </h4>
+                  <div className="space-y-2">
+                    {Object.entries(args).map(([key, value]) => (
+                      <div
+                        key={key}
+                        className="border-border rounded-sm border"
+                      >
+                        <button
+                          onClick={() => toggleArgExpanded(key)}
+                          className="bg-muted/20 hover:bg-muted/40 flex w-full items-center justify-between p-2 text-left text-xs font-medium transition-colors"
+                        >
+                          <span className="font-mono">{key}</span>
+                          {expandedArgs[key] ? (
+                            <ChevronUp
+                              size={12}
+                              className="text-[#70707B]"
+                            />
+                          ) : (
+                            <ChevronDown
+                              size={12}
+                              className="text-[#70707B]"
+                            />
+                          )}
+                        </button>
+                        {expandedArgs[key] && (
+                          <div className="border-border bg-muted/10 border-t p-2">
+                            <pre className="text-foreground m-0 overflow-x-auto font-mono text-xs leading-6 break-all whitespace-pre-wrap">
+                              {typeof value === "string"
+                                ? value
+                                : JSON.stringify(value, null, 2)}
+                            </pre>
+                          </div>
+                        )}
                       </div>
-                    )}
+                    ))}
                   </div>
-                ))}
-              </div>
-            </div>
-          )}
-          {result && (
-            <div className="mt-4">
-              <h4 className="text-muted-foreground mb-1 text-xs font-semibold tracking-wider uppercase">
-                Result
-              </h4>
-              <pre className="border-border bg-muted/30 text-foreground m-0 overflow-x-auto rounded-sm border p-2 font-mono text-xs leading-7 break-all whitespace-pre-wrap">
-                {typeof result === "string"
-                  ? result
-                  : JSON.stringify(result, null, 2)}
-              </pre>
-            </div>
+                </div>
+              )}
+              {result && (
+                <div className="mt-4">
+                  <h4 className="text-muted-foreground mb-1 text-xs font-semibold tracking-wider uppercase">
+                    Result
+                  </h4>
+                  <pre className="border-border bg-muted/30 text-foreground m-0 overflow-x-auto rounded-sm border p-2 font-mono text-xs leading-7 break-all whitespace-pre-wrap">
+                    {typeof result === "string"
+                      ? result
+                      : JSON.stringify(result, null, 2)}
+                  </pre>
+                </div>
+              )}
+            </>
           )}
         </div>
       )}
diff --git a/apps/standalone-chat/src/features/agent-chat/components/interrupted-actions/index.tsx b/apps/standalone-chat/src/features/agent-chat/components/interrupted-actions/index.tsx
index f3289772..1d8d6247 100644
--- a/apps/standalone-chat/src/features/agent-chat/components/interrupted-actions/index.tsx
+++ b/apps/standalone-chat/src/features/agent-chat/components/interrupted-actions/index.tsx
@@ -38,7 +38,6 @@ export function ThreadActionsView({
         </div>
         {threadId && <ThreadIdCopyable threadId={threadId} />}
       </div>
-
       {/* Actions */}
       <InboxItemInput
         isLoading={isLoading}
diff --git a/apps/standalone-chat/src/features/agent-chat/hooks/useChat.ts b/apps/standalone-chat/src/features/agent-chat/hooks/useChat.ts
index 67497415..33916d6a 100644
--- a/apps/standalone-chat/src/features/agent-chat/hooks/useChat.ts
+++ b/apps/standalone-chat/src/features/agent-chat/hooks/useChat.ts
@@ -23,6 +23,7 @@ export type StateType = {
     subject?: string;
     page_content?: string;
   };
+  ui?: any;
 };
 
 export function useChat({
@@ -144,9 +145,11 @@ export function useChat({
   }, [stream]);
 
   return {
+    stream,
     todos: stream.values.todos ?? [],
     files: stream.values.files ?? {},
     email: stream.values.email,
+    ui: stream.values.ui,
     setFiles,
     messages: stream.messages,
     isLoading: stream.isLoading,