diff --git a/packages/frontend/src/pages/Debug.tsx b/packages/frontend/src/pages/Debug.tsx index d2d71d02..d82efdc9 100644 --- a/packages/frontend/src/pages/Debug.tsx +++ b/packages/frontend/src/pages/Debug.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; import { api } from '../lib/api'; import Editor from '@monaco-editor/react'; import { @@ -13,6 +13,8 @@ import { Download, Filter, X, + Minimize2, + Maximize2, } from 'lucide-react'; import { clsx } from 'clsx'; import { Button } from '../components/ui/Button'; @@ -562,6 +564,8 @@ const AccordionPanel: React.FC<{ }> = ({ title, content, color, defaultOpen = false }) => { const [isOpen, setIsOpen] = useState(defaultOpen); const [copied, setCopied] = useState(false); + const [folded, setFolded] = useState(false); + const editorRef = useRef(null); const handleCopy = async (e: React.MouseEvent) => { e.stopPropagation(); @@ -573,6 +577,25 @@ const AccordionPanel: React.FC<{ } }; + const handleToggleFold = (e: React.MouseEvent) => { + e.stopPropagation(); + const editor = editorRef.current; + if (!editor) return; + if (folded) { + editor.trigger('unfoldAll', 'editor.unfoldAll', null); + } else { + // Fold everything first + editor.trigger('foldAll', 'editor.foldAll', null); + // Then unfold the outermost object (line 1) to keep it visible + setTimeout(() => { + editor.setSelection({ startLineNumber: 1, startColumn: 1, endLineNumber: 1, endColumn: 1 }); + editor.trigger('unfold', 'editor.unfold', null); + editor.setSelection({ startLineNumber: 0, startColumn: 0, endLineNumber: 0, endColumn: 0 }); + }, 50); + } + setFolded(!folded); + }; + return (
{title} +