FROM feat/490-can-read-deepagents-agent-files TO development (#491)

* init

* Frontend init changes in place

* Can view files when selecting the thread from history

* This is great for editor mode, but we need mobile

* good, but needs fix fileeditor reset. Continues to show options

Author: ryaneggz

Changelog.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - bug/370-anthropic-streaming (2025-09-16)
 
 ### Changed
+  - feat/490-can-read-deepagents-agent-files (2025-11-10)
   - feat/485-user-env (2025-11-08)
   - feat/482-teams-webhook (2025-11-05)
   - feat/476-html-chart-construct-tool (2025-11-02)

backend/src/utils/stream.py

@@ -172,7 +172,8 @@ async def stream_generator(
     subagents: list[SubAgent],
     config: RunnableConfig,
     service_context: ServiceContext,
-):
+):  
+    files_map = {}
     async with get_checkpoint_db() as checkpointer:
         try:
             service_context.config["configurable"]["user_id"] = service_context.user_id
@@ -193,6 +194,10 @@ async def stream_generator(
                 # Serialize and yield each chunk as SSE
                 stream_chunk = handle_multi_mode(chunk)
                 if stream_chunk:
+                    stream_type = stream_chunk[0]
+                    chunk_data = stream_chunk[1]
+                    if stream_type == "values" and "files" in chunk_data:
+                        files_map = {**files_map, **chunk_data["files"]}
                     data = ujson.dumps(stream_chunk)
                     log_to_file(str(data), agent.model) and APP_LOG_LEVEL == "DEBUG"
                     logger.debug(f"data: {str(data)}")
@@ -230,6 +235,7 @@ async def stream_generator(
                             "thread_id": thread_id,
                             "checkpoint_id": checkpoint_id,
                             "messages": [last_message.model_dump()],
+                            "files": files_map,
                             "updated_at": get_time(),
                         },
                     )

frontend/package-lock.json

@@ -38,6 +38,7 @@
 		"clsx": "^2.1.1",
 		"date-fns": "^4.1.0",
 		"debug": "^4.4.0",
+		"jszip": "^3.10.1",
 		"jwt-decode": "^4.0.0",
 		"katex": "^0.16.8",
 		"lodash": "^4.17.21",

frontend/package.json

@@ -123,7 +123,7 @@ interface ThreadItemProps {
 }
 
 function ThreadItem({ thread }: ThreadItemProps) {
-	const { metadata, setMessages, setMetadata } = useChatContext();
+	const { metadata, setMessages, setMetadata, setFilesMap } = useChatContext();
 	const { isMobile, setOpenMobile } = useSidebar();
 	const messages = thread.value?.messages || [];
 	const messageCount = messages.length;
@@ -145,6 +145,24 @@ function ThreadItem({ thread }: ThreadItemProps) {
 
 	const handleThreadClick = async () => {
 		const checkpoints = await searchThreads("list_checkpoints", thread.value);
+
+		// Set filesMap by associating files with the last AI message
+		if (thread.value.files && Object.keys(thread.value.files).length > 0) {
+			const messages = formatMessages(checkpoints[0].values.messages);
+			const latestAiMessage = messages
+				.slice()
+				.reverse()
+				.find((msg: any) => ["ai", "assistant"].includes(msg.role));
+
+			if (latestAiMessage) {
+				const newFilesMap = new Map();
+				newFilesMap.set(latestAiMessage.id, thread.value.files);
+				setFilesMap(newFilesMap);
+			}
+		} else {
+			setFilesMap(new Map());
+		}
+
 		setModel(
 			thread.value.messages[thread.value.messages.length - 1].model ||
 				DEFAULT_CHAT_MODEL,

frontend/src/components/drawers/app-sidebar.tsx

@@ -3,7 +3,7 @@ import { useState, useEffect } from "react";
 
 interface Props {
 	value: string;
-	handleChange: (val: string) => void;
+	handleChange?: (val: string) => void;
 	language?: string;
 	readOnly?: boolean;
 	height?: string;
@@ -69,8 +69,8 @@ function MonacoEditor({
 			setError("");
 		}
 
-		// Always call handleChange to update the parent
-		handleChange(val);
+		// Call handleChange if provided
+		handleChange?.(val);
 	};
 
 	return (

frontend/src/components/inputs/MonacoEditor.tsx

@@ -11,6 +11,7 @@ import { formatContent, truncateFrom } from "@/lib/utils/format";
 import SearchEngineTool from "../tools/SearchEngine";
 import ChartRenderWidget from "../tools/ChartRenderWidget";
 import CopyTextButton from "../buttons/CopyTextButton";
+import FileViewer from "../viewers/FileViewer";
 
 const MAX_LENGTH = 1000;
 
@@ -228,6 +229,9 @@ export function Message({
 	}
 
 	if (["ai", "assistant"].includes(message.role)) {
+		const { filesMap, viewMode } = useChatContext();
+		const messageFiles = filesMap.get(message.id);
+
 		return (
 			<div className="group">
 				<div className="max-w-[90vw] md:max-w-[80%] rounded-lg rounded-bl-sm">
@@ -236,6 +240,15 @@ export function Message({
 							content={formatContent(message.content) || "Invalid message"}
 						/>
 					</div>
+
+					{/* Add file viewer if files exist - only show in chat mode */}
+					{viewMode === "chat" &&
+						messageFiles &&
+						Object.keys(messageFiles).length > 0 && (
+							<div className="mt-2 px-3">
+								<FileViewer files={messageFiles} />
+							</div>
+						)}
 				</div>
 				<div className="flex justify-start opacity-100 transition-opacity duration-200 mt-1 px-3">
 					<div className="flex gap-1">

frontend/src/components/lists/ChatMessages.tsx

@@ -1,19 +1,49 @@
 import { ColorModeButton } from "@/components/buttons/ColorModeButton";
 import SelectModel from "../lists/SelectModel";
 import NewThreadButton from "../buttons/NewThreadButton";
+import { LayoutGrid, MessageSquare } from "lucide-react";
+import { useChatContext } from "@/context/ChatContext";
+import { Button } from "@/components/ui/button";
 
 export function ChatNav({
 	sidebarTrigger,
 }: {
 	sidebarTrigger?: React.ReactNode | undefined;
 }) {
+	const { viewMode, setViewMode, filesMap } = useChatContext();
+	const hasFiles = filesMap.size > 0;
+
 	return (
 		<header className="bg-transparent mb-1">
 			<div className="mx-auto px-4 sm:px-6 lg:px-4 pt-4">
 				<div className="flex items-center justify-between">
 					<div className="flex items-center">{sidebarTrigger}</div>
 
 					<div className="flex items-center gap-2">
+						{/* Mode toggle - only visible when files exist */}
+						{hasFiles && (
+							<div className="hidden md:flex items-center gap-1 border border-border rounded-lg p-1">
+								<Button
+									variant={viewMode === "chat" ? "secondary" : "ghost"}
+									size="sm"
+									onClick={() => setViewMode("chat")}
+									className="h-8 gap-2"
+								>
+									<MessageSquare className="h-4 w-4" />
+									Chat
+								</Button>
+								<Button
+									variant={viewMode === "editor" ? "secondary" : "ghost"}
+									size="sm"
+									onClick={() => setViewMode("editor")}
+									className="h-8 gap-2"
+								>
+									<LayoutGrid className="h-4 w-4" />
+									Editor
+								</Button>
+							</div>
+						)}
+
 						<div className="w-56">
 							<SelectModel />
 						</div>