v0.8.8: Agentic Chat & Workspace Orchestration

Author: Tim Sinaeve

App.tsx

@@ -51,7 +51,7 @@ const MIN_LOGGER_HEIGHT = 100;
 
 const DEFAULT_CHAT_PANEL_WIDTH = 360;
 const MIN_CHAT_PANEL_WIDTH = 280;
-const MAX_CHAT_PANEL_WIDTH = 600;
+const MAX_CHAT_PANEL_WIDTH = 1200;
 
 const PREVIEW_INITIAL_SCALE = 1;
 const PREVIEW_MIN_SCALE = 0.25;
@@ -181,7 +181,7 @@ interface UpdateToastState {
 
 export const MainApp: React.FC = () => {
     const { settings, saveSettings, loaded: settingsLoaded } = useSettings();
-    const { items, addDocument, addFolder, updateItem, commitVersion, deleteItems, moveItems, getDescendantIds, duplicateItems, addDocumentsFromFiles, importNodesFromTransfer, createDocumentFromClipboard, setItemLock, isLoading: areDocumentsLoading } = useDocuments();
+    const { nodes, items, addDocument, addFolder, updateItem, commitVersion, deleteItems, moveItems, getDescendantIds, duplicateItems, addDocumentsFromFiles, importNodesFromTransfer, createDocumentFromClipboard, setItemLock, isLoading: areDocumentsLoading } = useDocuments();
     const { templates, addTemplate, updateTemplate, deleteTemplate, deleteTemplates } = useTemplates();
     const { theme } = useTheme();
 
@@ -1476,6 +1476,9 @@ export const MainApp: React.FC = () => {
         storageService.load(LOCAL_STORAGE_KEYS.LOGGER_PANEL_HEIGHT, DEFAULT_LOGGER_HEIGHT).then(height => {
             if (typeof height === 'number') setLoggerPanelHeight(height);
         });
+        storageService.load(LOCAL_STORAGE_KEYS.CHAT_PANEL_WIDTH, DEFAULT_CHAT_PANEL_WIDTH).then(width => {
+            if (typeof width === 'number') setChatPanelWidth(width);
+        });
 
         let isCancelled = false;
 
@@ -2902,11 +2905,15 @@ export const MainApp: React.FC = () => {
 
     const handleGlobalMouseMove = useCallback((e: MouseEvent) => {
         const zoomFactor = settings.uiScale / 100;
+        const mainContentMinWidth = 300;
+        const splitterWidth = 1.5;
 
         if (isSidebarResizing.current) {
-            const mainContentMinWidth = 300;
             const newWidth = e.clientX / zoomFactor;
-            const calculatedMaxWidth = (window.innerWidth / zoomFactor) - mainContentMinWidth;
+            // editorWidth = total - sidebarWidth - splitter - (chatVisible ? splitter + chatWidth : 0)
+            // sidebarWidth = total - editorWidth - splitter - (chatVisible ? splitter + chatWidth : 0)
+            const chatWidthPart = isChatPanelVisible ? chatPanelWidth + splitterWidth : 0;
+            const calculatedMaxWidth = (window.innerWidth / zoomFactor) - mainContentMinWidth - splitterWidth - chatWidthPart;
 
             const clampedWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(newWidth, calculatedMaxWidth));
             setSidebarWidth(clampedWidth);
@@ -2921,10 +2928,13 @@ export const MainApp: React.FC = () => {
         }
         if (isChatResizing.current) {
             const newWidth = (window.innerWidth - e.clientX) / zoomFactor;
-            const clampedWidth = Math.max(MIN_CHAT_PANEL_WIDTH, Math.min(newWidth, MAX_CHAT_PANEL_WIDTH));
+            // chatWidth = total - sidebarWidth - splitter - editorWidth - splitter
+            const calculatedMaxWidth = (window.innerWidth / zoomFactor) - mainContentMinWidth - sidebarWidth - (splitterWidth * 2);
+            
+            const clampedWidth = Math.max(MIN_CHAT_PANEL_WIDTH, Math.min(newWidth, Math.min(MAX_CHAT_PANEL_WIDTH, calculatedMaxWidth)));
             setChatPanelWidth(clampedWidth);
         }
-    }, [settings.uiScale]);
+    }, [settings.uiScale, isChatPanelVisible, chatPanelWidth, sidebarWidth]);
 
     const handleGlobalMouseUp = useCallback(() => {
         if (isSidebarResizing.current) {
@@ -2937,13 +2947,14 @@ export const MainApp: React.FC = () => {
         }
         if (isChatResizing.current) {
             isChatResizing.current = false;
+            storageService.save(LOCAL_STORAGE_KEYS.CHAT_PANEL_WIDTH, chatPanelWidth);
         }
 
         if (document.body.style.cursor !== 'default') {
             document.body.style.cursor = 'default';
             document.body.style.userSelect = 'auto';
         }
-    }, [sidebarWidth, loggerPanelHeight]);
+    }, [sidebarWidth, loggerPanelHeight, chatPanelWidth]);
 
     useEffect(() => {
         window.addEventListener('mousemove', handleGlobalMouseMove);
@@ -3246,6 +3257,7 @@ export const MainApp: React.FC = () => {
                                         onResizeStart={(e: React.MouseEvent) => {
                                             e.preventDefault();
                                             isChatResizing.current = true;
+                                            document.body.style.cursor = 'col-resize';
                                             document.body.style.userSelect = 'none';
                                         }}
                                         settings={settings}
@@ -3257,6 +3269,18 @@ export const MainApp: React.FC = () => {
                                         activeDocument={activeNode ? { title: activeNode.title, content: activeNode.content ?? '' } : undefined}
                                         selectedText={selectedText}
                                         addLog={addLog}
+                                        nodes={nodes}
+                                        addNode={handleNewDocument}
+                                        updateNode={handleRenameNode}
+                                        updateDocumentContent={handleCommitVersion}
+                                        deleteNodes={handleDeleteNode}
+                                        moveNodes={moveItems}
+                                        runPython={async (code, nodeId) => {
+                                            return ""; 
+                                        }}
+                                        runScript={async (lang, code, nodeId) => {
+                                            return "";
+                                        }}
                                     />
                                 </section>
                             </>

FUNCTIONAL_MANUAL.md

@@ -156,6 +156,18 @@ The "Chat with Workspace" feature allows you to query your entire collection of
 - **Source Attribution**: When the AI answers a question, it lists the specific documents it used as context. These sources are streamed immediately as soon as the search completes.
 - **Smart Privacy**: If the AI determines that none of the retrieved documents contain the answer to your question, the source list is automatically hidden to keep the chat interface clean.
 
+#### Agentic Chat & Workspace Orchestration
+
+Agent Mode transforms the chat assistant from a passive information retriever into an active workspace participant.
+
+- **Tool Calling**: When Agent Mode is enabled, the AI can proactively use tools to interact with your workspace. This includes:
+    - **Document Management**: Creating new documents or folders, renaming existing ones, and moving files between directories.
+    - **Content Refactoring**: Reading document contents and performing bulk edits or restructurings based on your instructions.
+    - **Script Execution**: Running Python, Shell, or PowerShell scripts to process data, generate files, or automate complex workflows.
+- **Action Approval Gate**: For security, all sensitive actions (like deleting documents or running scripts) can be configured to require your manual approval. A glassmorphic modal will appear showing exactly what the AI intends to do, including any script code or move parameters, allowing you to approve or deny the request before it executes.
+- **Thoughtful Execution**: The agent can perform multi-step tasks—for example, it can list all documents in a folder, search for specific patterns, and then create a summary document based on its findings—all in a single conversation turn.
+- **Deep Integration**: The agent has direct access to the same document hooks as the GUI, ensuring that its actions are consistent with the application's state and history.
+
 #### Python Execution Panel
 
 DocForge includes an embedded Python runner that integrates with the editor when you're working on Python content.

VERSION_LOG.md

@@ -1,3 +1,25 @@
+## v0.8.8 - The Agentic Workspace Update
+
+### ✨ Features
+
+-   **Agentic Chat & Workspace Orchestrator**:
+    *   Transformed the chat panel from a passive RAG assistant into an active **Workspace Agent**.
+    *   **Autonomous Operations**: The AI can now create, rename, move, and edit documents and folders directly through natural language commands.
+    *   **Script Orchestration**: The agent can write and execute **Python**, **Shell**, and **PowerShell** scripts to automate complex data processing or system tasks.
+    *   **Multi-Step Reasoning**: Capable of performing complex workflows (e.g., "Find all documents mentioning X, then move them to a new folder called Y") in a single conversation.
+-   **Security & Action Approval**:
+    *   Implemented a high-fidelity **Action Approval Modal** with a glassmorphic design.
+    *   Configurable safety gates: Users can choose to require manual approval for all agent actions, especially destructive operations or script executions.
+-   **UI/UX Polish**:
+    *   **Tool Execution Visibility**: Added specialized status indicators and animated icons to show when the AI is "thinking" or "using a tool."
+    *   **Syntax-Highlighted Tool Results**: Results from scripts and workspace operations are now rendered in a dedicated terminal-style card within the chat history.
+    *   **Enhanced Settings**: Added a new "AI Chat" settings section to toggle Agent Mode and Approval requirements.
+
+### 🐛 Fixes
+
+-   **Chat Stability**: Fixed several syntax and state synchronization errors in the chat panel that could cause crashes during long-running tool executions.
+-   **Tag Balance**: Resolved various build-breaking JSX tag mismatches in the Chat UI.
+
 ## v0.8.7 - The RAG & Clipboard Image Update
 
 ### ✨ Features