From 5d821c4e855ed4d8a3f20ecf3307adc404bc4f91 Mon Sep 17 00:00:00 2001
From: Pedram Amini <pedram.amini@gmail.com>
Date: Sun, 28 Dec 2025 16:37:12 -0600
Subject: [PATCH] MAESTRO: Add Document Graph button to Files panel header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add GitGraph icon button to FileExplorerPanel, positioned left of the eye icon
- Add "Document Graph" tooltip on hover
- Add isGraphViewOpen state in App.tsx for controlling graph modal visibility
- Wire onOpenGraphView callback through RightPanel → FileExplorerPanel
---
 src/renderer/App.tsx                          |  3 +++
 src/renderer/components/FileExplorerPanel.tsx | 15 +++++++++++++--
 src/renderer/components/RightPanel.tsx        |  7 ++++++-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index b7d5b64a..9a8d8135 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -392,6 +392,7 @@ function MaestroConsoleInner() {
   const [flatFileList, setFlatFileList] = useState<any[]>([]);
   const [fileTreeFilter, setFileTreeFilter] = useState('');
   const [fileTreeFilterOpen, setFileTreeFilterOpen] = useState(false);
+  const [isGraphViewOpen, setIsGraphViewOpen] = useState(false);
 
   // GitHub CLI availability (for gist publishing)
   const [ghCliAvailable, setGhCliAvailable] = useState(false);
@@ -9468,6 +9469,8 @@ function MaestroConsoleInner() {
                 console.error('[onFileClick] Failed to read file:', error);
               }
             }}
+            isGraphViewOpen={isGraphViewOpen}
+            onOpenGraphView={() => setIsGraphViewOpen(true)}
           />
         </ErrorBoundary>
       )}
diff --git a/src/renderer/components/FileExplorerPanel.tsx b/src/renderer/components/FileExplorerPanel.tsx
index f8cb34ef..d8c27ce4 100644
--- a/src/renderer/components/FileExplorerPanel.tsx
+++ b/src/renderer/components/FileExplorerPanel.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState, useCallback, useMemo, memo } from 'react';
 import { createPortal } from 'react-dom';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { ChevronRight, ChevronDown, ChevronUp, Folder, RefreshCw, Check, Eye, EyeOff } from 'lucide-react';
+import { ChevronRight, ChevronDown, ChevronUp, Folder, RefreshCw, Check, Eye, EyeOff, GitGraph } from 'lucide-react';
 import type { Session, Theme, FocusArea } from '../types';
 import type { FileNode } from '../types/fileTree';
 import type { FileTreeChanges } from '../utils/fileExplorer';
@@ -61,6 +61,7 @@ interface FileExplorerPanelProps {
   onShowFlash?: (message: string) => void;
   showHiddenFiles: boolean;
   setShowHiddenFiles: (value: boolean) => void;
+  onOpenGraphView?: () => void;
 }
 
 function FileExplorerPanelInner(props: FileExplorerPanelProps) {
@@ -69,7 +70,7 @@ function FileExplorerPanelInner(props: FileExplorerPanelProps) {
     filteredFileTree, selectedFileIndex, setSelectedFileIndex, activeFocus, activeRightTab,
     previewFile, setActiveFocus, fileTreeFilterInputRef, toggleFolder, handleFileClick, expandAllFolders,
     collapseAllFolders, updateSessionWorkingDirectory, refreshFileTree, setSessions, onAutoRefreshChange, onShowFlash,
-    showHiddenFiles, setShowHiddenFiles
+    showHiddenFiles, setShowHiddenFiles, onOpenGraphView
   } = props;
 
   const { registerLayer, unregisterLayer, updateLayerHandler } = useLayerStack();
@@ -386,6 +387,16 @@ function FileExplorerPanelInner(props: FileExplorerPanelProps) {
       >
         <span className="opacity-50 truncate min-w-0 flex-1" title={session.cwd}>{session.cwd}</span>
         <div className="flex items-center gap-1 flex-shrink-0">
+          {onOpenGraphView && (
+            <button
+              onClick={onOpenGraphView}
+              className="p-1 rounded hover:bg-white/10 transition-colors"
+              title="Document Graph"
+              style={{ color: theme.colors.textDim }}
+            >
+              <GitGraph className="w-3.5 h-3.5" />
+            </button>
+          )}
           <button
             onClick={() => setShowHiddenFiles(!showHiddenFiles)}
             className="p-1 rounded hover:bg-white/10 transition-colors"
diff --git a/src/renderer/components/RightPanel.tsx b/src/renderer/components/RightPanel.tsx
index a97ab6a2..67673b04 100644
--- a/src/renderer/components/RightPanel.tsx
+++ b/src/renderer/components/RightPanel.tsx
@@ -99,6 +99,9 @@ interface RightPanelProps {
   onFileClick?: (path: string) => void;
   // Marketplace modal
   onOpenMarketplace?: () => void;
+  // Graph view state
+  isGraphViewOpen?: boolean;
+  onOpenGraphView?: () => void;
 }
 
 export const RightPanel = memo(forwardRef<RightPanelHandle, RightPanelProps>(function RightPanel(props, ref) {
@@ -119,7 +122,8 @@ export const RightPanel = memo(forwardRef<RightPanelHandle, RightPanelProps>(fun
     onSkipCurrentDocument, onAbortBatchOnError, onResumeAfterError,
     onJumpToAgentSession, onResumeSession,
     onOpenSessionAsTab, onOpenAboutModal, onFileClick,
-    onOpenMarketplace
+    onOpenMarketplace,
+    isGraphViewOpen, onOpenGraphView
   } = props;
 
   const historyPanelRef = useRef<HistoryPanelHandle>(null);
@@ -407,6 +411,7 @@ export const RightPanel = memo(forwardRef<RightPanelHandle, RightPanelProps>(fun
               onShowFlash={onShowFlash}
               showHiddenFiles={showHiddenFiles}
               setShowHiddenFiles={setShowHiddenFiles}
+              onOpenGraphView={onOpenGraphView}
             />
           </div>
         )}