MAESTRO: Add Document Graph button to Files panel header

- 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
This commit is contained in:
Pedram Amini
2025-12-28 16:37:12 -06:00
parent 51fc498420
commit 5d821c4e85
3 changed files with 22 additions and 3 deletions

View File

@@ -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>
)}

View File

@@ -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"

View File

@@ -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>
)}