Update app.py

app.py

@@ -8,16 +8,24 @@ import shutil
 import io
 from PIL import Image
 import fitz  # PyMuPDF
+import time
+import re
+import json
 
 # Set page configuration
-st.set_page_config(page_title="LaTeX Editor & Compiler", page_icon="📝", layout="wide")
+st.set_page_config(
+    page_title="Advanced LaTeX Editor",
+    page_icon="📝",
+    layout="wide",
+    initial_sidebar_state="collapsed"
+)
 
 # Check if pdflatex is available
 def is_pdflatex_installed():
     return shutil.which("pdflatex") is not None
 
 # Function to convert LaTeX to PDF
-def latex_to_pdf(latex_code):
+def latex_to_pdf(latex_code, output_dir=None):
     # Check if pdflatex is installed
     if not is_pdflatex_installed():
         st.error("pdflatex not found. Debug info:")
@@ -27,9 +35,12 @@ def latex_to_pdf(latex_code):
         return None, "", "Error: pdflatex is not installed or not in PATH."
     
     with tempfile.TemporaryDirectory() as temp_dir:
+        if output_dir is None:
+            output_dir = temp_dir
+            
         temp_path = Path(temp_dir)
         tex_file = temp_path / "document.tex"
-        pdf_file = temp_path / "document.pdf"
+        pdf_file = Path(output_dir) / "document.pdf"
         
         # Write LaTeX code to file
         with open(tex_file, "w") as f:
@@ -38,7 +49,7 @@ def latex_to_pdf(latex_code):
         try:
             # Run pdflatex to compile the LaTeX file
             process = subprocess.run(
-                ["pdflatex", "-interaction=nonstopmode", "-output-directory", temp_dir, str(tex_file)],
+                ["pdflatex", "-interaction=nonstopmode", "-output-directory", output_dir, str(tex_file)],
                 capture_output=True,
                 text=True
             )
@@ -53,11 +64,6 @@ def latex_to_pdf(latex_code):
         except Exception as e:
             return None, "", str(e)
 
-# Function to create download link for PDF
-def get_download_link(pdf_data, filename="document.pdf"):
-    b64_pdf = base64.b64encode(pdf_data).decode()
-    return f'<a href="data:application/pdf;base64,{b64_pdf}" download="{filename}" class="download-button">Download PDF</a>'
-
 # Convert PDF to image for preview
 def render_pdf_preview(pdf_data):
     if not pdf_data:
@@ -72,7 +78,7 @@ def render_pdf_preview(pdf_data):
         
         # Render pages as images
         images = []
-        for page_num in range(min(3, len(pdf_document))):  # Preview first 3 pages max
+        for page_num in range(min(5, len(pdf_document))):  # Preview first 5 pages max
             page = pdf_document.load_page(page_num)
             pix = page.get_pixmap(matrix=fitz.Matrix(2, 2))  # Zoom factor 2 for better resolution
             img_data = pix.tobytes("png")
@@ -85,6 +91,58 @@ def render_pdf_preview(pdf_data):
         st.error(f"Error rendering PDF preview: {str(e)}")
         return None
 
+# Function to create download link for PDF
+def get_download_link(pdf_data, filename="document.pdf"):
+    b64_pdf = base64.b64encode(pdf_data).decode()
+    return f'<a href="data:application/pdf;base64,{b64_pdf}" download="{filename}" class="download-button">Download PDF</a>'
+
+# Function to parse LaTeX errors
+def parse_latex_errors(output):
+    errors = []
+    warnings = []
+    
+    # Match errors
+    error_matches = re.finditer(r'! (.+?)\.[\r\n]', output)
+    for match in error_matches:
+        errors.append(match.group(1))
+    
+    # Match warnings
+    warning_matches = re.finditer(r'LaTeX Warning: (.+?)[\r\n]', output)
+    for match in warning_matches:
+        warnings.append(match.group(1))
+    
+    return errors, warnings
+
+# Function to extract document structure
+def extract_document_structure(latex_code):
+    structure = []
+    
+    # Find sections, subsections, etc.
+    section_pattern = r'\\(section|subsection|subsubsection|chapter|part)\{([^}]+)\}'
+    matches = re.finditer(section_pattern, latex_code)
+    
+    for match in matches:
+        section_type = match.group(1)
+        section_title = match.group(2)
+        
+        # Calculate indentation level based on section type
+        level = {
+            'part': 0,
+            'chapter': 1,
+            'section': 2,
+            'subsection': 3,
+            'subsubsection': 4
+        }.get(section_type, 0)
+        
+        structure.append({
+            'type': section_type,
+            'title': section_title,
+            'level': level,
+            'position': match.start()  # Position in document for navigation
+        })
+    
+    return structure
+
 # Default LaTeX template
 default_template = r"""\documentclass{article}
 \usepackage[utf8]{inputenc}
@@ -92,8 +150,9 @@ default_template = r"""\documentclass{article}
 \usepackage{amssymb}
 \usepackage{graphicx}
 \usepackage{hyperref}
+\usepackage{xcolor}
 
-\title{LaTeX Document}
+\title{Advanced \LaTeX{} Document}
 \author{Your Name}
 \date{\today}
 
@@ -102,7 +161,7 @@ default_template = r"""\documentclass{article}
 \maketitle
 
 \section{Introduction}
-Your introduction here. Insert some text to demonstrate LaTeX.
+This is the introduction to your document. You can write your content here.
 
 \section{Mathematical Expressions}
 \subsection{Equations}
@@ -125,9 +184,9 @@ An integral example:
 \section{Lists and Items}
 \subsection{Bullet Points}
 \begin{itemize}
-    \item First item
-    \item Second item
-    \item Third item
+    \item First item with \textbf{bold text}
+    \item Second item with \textit{italic text}
+    \item Third item with \textcolor{blue}{colored text}
 \end{itemize}
 
 \subsection{Numbered List}
@@ -151,79 +210,236 @@ An integral example:
     \label{tab:simple}
 \end{table}
 
+\section{Figures}
+You can include figures using the following syntax:
+
+% \begin{figure}[h]
+%     \centering
+%     \includegraphics[width=0.7\textwidth]{example-image}
+%     \caption{Example figure}
+%     \label{fig:example}
+% \end{figure}
+
+\section{Citations}
+You can cite references using the \verb|\cite{}| command \cite{example}.
+
+\section{Cross-References}
+You can reference sections, figures, and tables using the \verb|\ref{}| command. 
+For example, see Table~\ref{tab:simple}.
+
 \section{Conclusion}
 Your conclusion here.
 
+% Sample bibliography entry
+\begin{thebibliography}{9}
+\bibitem{example} Author, A. (2023). \textit{Title of the Work}. Publisher.
+\end{thebibliography}
+
 \end{document}
 """
 
-# Add VS Code-like styling
+# Ace Editor component for syntax highlighting
+def create_ace_editor():
+    ace_editor_html = """
+    <div id="editor" style="height: 600px; width: 100%; border-radius: 4px;"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.24.1/ace.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.24.1/ext-language_tools.js"></script>
+    <script>
+        // Create the editor
+        var editor = ace.edit("editor");
+        editor.setTheme("ace/theme/tomorrow_night_eighties");
+        editor.session.setMode("ace/mode/latex");
+        editor.setValue(JSON.parse('{latex_content}'));
+        editor.clearSelection();
+        
+        // Enable advanced features
+        editor.setOptions({
+            enableBasicAutocompletion: true,
+            enableSnippets: true,
+            enableLiveAutocompletion: true,
+            showPrintMargin: false,
+            fontSize: 14,
+            fontFamily: "'Fira Code', 'Courier New', monospace",
+            scrollPastEnd: 0.5
+        });
+        
+        // Function to update Streamlit with the content
+        function updateStreamlit() {
+            const content = editor.getValue();
+            if (window.Streamlit) {
+                window.Streamlit.setComponentValue(content);
+            }
+        }
+        
+        // Add change event listener
+        editor.session.on('change', function() {
+            updateStreamlit();
+        });
+        
+        // Initialize Streamlit component communication
+        function onStreamlitLoad() {
+            updateStreamlit();
+        }
+        
+        if (window.Streamlit) {
+            window.Streamlit.setComponentReady();
+            window.Streamlit.onCustomComponentReady(onStreamlitLoad);
+        }
+    </script>
+    """
+    return ace_editor_html
+
+# Enhanced VSCode-like advanced styling
 st.markdown("""
 <style>
-    /* VS Code-like styling */
-    .vscode-editor textarea {
-        font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
-        font-size: 14px !important;
-        line-height: 1.5 !important;
-        background-color: #1e1e1e !important;
-        color: #d4d4d4 !important;
-        padding: 10px !important;
-        border-radius: 4px !important;
-        border: 1px solid #252526 !important;
-    }
-    
-    /* Editor container styling */
-    .vscode-container {
+    /* Base theming - VS Code inspired */
+    html, body, .stApp {
         background-color: #1e1e1e;
-        border-radius: 6px;
-        padding: 8px;
-        border: 1px solid #333;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        color: #cccccc;
     }
     
-    /* Make scrollbars VS Code style */
-    .vscode-editor textarea::-webkit-scrollbar {
-        width: 14px;
-        height: 14px;
+    /* Streamlit component overrides */
+    .stButton button {
+        background-color: #0e639c;
+        color: white;
+        border: none;
+        padding: 0.4rem 1rem;
+        font-size: 0.8rem;
+        border-radius: 2px;
     }
     
-    .vscode-editor textarea::-webkit-scrollbar-thumb {
-        background-color: #424242;
-        border-radius: 7px;
-        border: 3px solid #1e1e1e;
+    .stButton button:hover {
+        background-color: #1177bb;
     }
     
-    .vscode-editor textarea::-webkit-scrollbar-track {
+    /* VS Code-like editor container */
+    .editor-container {
         background-color: #1e1e1e;
+        border-radius: 4px;
+        border: 1px solid #2d2d2d;
+        margin-bottom: 1rem;
+        display: flex;
+        flex-direction: column;
     }
     
-    /* Button styling */
-    .vscode-button {
-        background-color: #0e639c;
+    /* Editor tab bar */
+    .tab-bar {
+        display: flex;
+        background-color: #252526;
+        border-bottom: 1px solid #2d2d2d;
+        padding: 0;
+        height: 36px;
+    }
+    
+    .tab {
+        padding: 0 15px;
+        height: 36px;
+        line-height: 36px;
+        background-color: #2d2d2d;
         color: white;
-        border: none;
-        padding: 8px 12px;
-        border-radius: 2px;
+        border-right: 1px solid #252526;
+        font-size: 13px;
+        display: flex;
+        align-items: center;
+    }
+    
+    .tab.active {
+        background-color: #1e1e1e;
+        border-top: 1px solid #0e639c;
+    }
+    
+    .tab-icon {
+        margin-right: 6px;
+        opacity: 0.8;
+    }
+    
+    /* Status bar */
+    .status-bar {
+        display: flex;
+        justify-content: space-between;
+        background-color: #007acc;
+        color: white;
+        padding: 3px 10px;
+        font-size: 12px;
+    }
+    
+    /* Activity bar */
+    .activity-bar {
+        width: 50px;
+        background-color: #333333;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-top: 10px;
+    }
+    
+    .activity-icon {
+        width: 30px;
+        height: 30px;
+        margin-bottom: 20px;
+        opacity: 0.7;
         cursor: pointer;
+        text-align: center;
+    }
+    
+    .activity-icon:hover {
+        opacity: 1;
+    }
+    
+    /* Terminal/console styling */
+    .terminal {
+        background-color: #1e1e1e;
+        color: #cccccc;
+        padding: 10px;
+        font-family: 'Cascadia Code', 'Consolas', monospace;
         font-size: 13px;
-        margin-right: 10px;
+        border-top: 1px solid #2d2d2d;
+        overflow-y: auto;
+        max-height: 200px;
+    }
+    
+    .terminal-error {
+        color: #f48771;
+    }
+    
+    .terminal-warning {
+        color: #cca700;
+    }
+    
+    /* Outline view */
+    .outline-view {
+        background-color: #252526;
+        border: 1px solid #2d2d2d;
+        border-radius: 4px;
         margin-top: 10px;
-        transition: background-color 0.2s;
+        max-height: 400px;
+        overflow-y: auto;
     }
     
-    .vscode-button:hover {
-        background-color: #1177bb;
+    .outline-item {
+        padding: 5px 10px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+    }
+    
+    .outline-item:hover {
+        background-color: #2a2d2e;
+    }
+    
+    .outline-item-text {
+        margin-left: 5px;
     }
     
     /* Download button styling */
     .download-button {
         display: inline-block;
-        padding: 0.7em 1.4em;
+        padding: 8px 16px;
         background-color: #3d995e;
         color: white !important;
         text-align: center;
         text-decoration: none;
-        font-size: 14px;
+        font-size: 13px;
         border-radius: 2px;
         transition: background-color 0.3s;
         margin-top: 10px;
@@ -233,39 +449,59 @@ st.markdown("""
         background-color: #4eb772;
     }
     
-    /* Status bar styling */
-    .status-bar {
-        background-color: #007acc;
-        color: white;
-        padding: 2px 8px;
-        font-size: 12px;
-        border-radius: 2px 2px 0 0;
+    /* PDF preview area */
+    .preview-container {
+        background-color: #252526;
+        border: 1px solid #2d2d2d;
+        border-radius: 4px;
+        padding: 15px;
+        margin-top: 10px;
+    }
+    
+    /* Control panel */
+    .control-panel {
+        background-color: #252526;
+        border: 1px solid #2d2d2d;
+        border-radius: 4px;
+        padding: 10px;
+        margin-bottom: 10px;
+    }
+    
+    .button-group {
         display: flex;
-        justify-content: space-between;
+        gap: 5px;
     }
     
-    /* Terminal/output styling */
-    .terminal-output {
-        background-color: #1e1e1e;
+    /* Toolbar */
+    .toolbar {
+        background-color: #2d2d2d;
+        padding: 5px;
+        display: flex;
+        gap: 5px;
+        align-items: center;
+    }
+    
+    .toolbar-button {
+        background-color: transparent;
+        border: none;
         color: #cccccc;
-        padding: 10px;
-        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-        font-size: 12px;
-        border-radius: 0 0 4px 4px;
-        border-top: 1px solid #333;
-        max-height: 200px;
-        overflow-y: auto;
+        padding: 5px;
+        cursor: pointer;
+        border-radius: 2px;
     }
     
-    /* PDF preview container */
-    .pdf-preview-container {
-        border: 1px solid #333;
-        border-radius: 4px;
-        padding: 15px;
-        background-color: #252526;
+    .toolbar-button:hover {
+        background-color: #3c3c3c;
+    }
+    
+    .toolbar-separator {
+        width: 1px;
+        height: 20px;
+        background-color: #555;
+        margin: 0 5px;
     }
     
-    /* Info and error messages */
+    /* Messages */
     .stInfo {
         background-color: #063b49;
         color: #bbbbbb;
@@ -284,161 +520,514 @@ st.markdown("""
         border: 1px solid #1e5a3a;
     }
     
-    /* Hide Streamlit elements */
+    /* Hide Streamlit footer and menu */
+    footer, header {display: none !important;}
     #MainMenu {visibility: hidden;}
-    footer {visibility: hidden;}
     
-    /* Customize the rest of Streamlit UI */
-    .stApp {
-        background-color: #252526;
+    /* Custom tabs */
+    .stTabs [data-baseweb="tab-list"] {
+        background-color: #2d2d2d;
+        gap: 0px !important;
     }
     
-    h1, h2, h3, h4, h5, h6, p, div {
+    .stTabs [data-baseweb="tab"] {
+        background-color: #252526;
         color: #cccccc;
+        border-radius: 0;
+        border-right: 1px solid #1e1e1e;
+        padding: 0px 16px;
+        height: 36px;
     }
     
-    .stTabs [data-baseweb="tab-list"] {
+    .stTabs [aria-selected="true"] {
+        background-color: #1e1e1e;
+        border-top: 2px solid #007acc !important;
+        color: white;
+    }
+    
+    /* Custom file explorer */
+    .file-explorer {
+        background-color: #252526;
+        border: 1px solid #2d2d2d;
+        border-radius: 4px;
+        padding: 0;
+        margin-top: 10px;
+    }
+    
+    .file-header {
         background-color: #2d2d2d;
+        padding: 5px 10px;
+        font-weight: bold;
+        font-size: 13px;
     }
     
-    .stTabs [data-baseweb="tab"] {
-        color: #cccccc;
+    .file-item {
+        padding: 5px 10px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+    }
+    
+    .file-item:hover {
+        background-color: #2a2d2e;
+    }
+    
+    .file-icon {
+        margin-right: 5px;
+        opacity: 0.7;
+    }
+    
+    /* Enhanced styles for problems panel */
+    .problems-panel {
+        background-color: #252526;
+        border: 1px solid #2d2d2d;
+        border-radius: 4px;
+        margin-top: 10px;
+        padding: 0;
+    }
+    
+    .problems-header {
+        background-color: #2d2d2d;
+        padding: 5px 10px;
+        font-weight: bold;
+        font-size: 13px;
+    }
+    
+    .problem-item {
+        padding: 8px 10px;
+        border-bottom: 1px solid #2d2d2d;
+        display: flex;
+        align-items: flex-start;
+    }
+    
+    .problem-icon {
+        margin-right: 8px;
+        flex-shrink: 0;
+    }
+    
+    .problem-message {
+        flex-grow: 1;
+    }
+    
+    .problem-location {
+        font-size: 12px;
+        color: #8a8a8a;
+        margin-top: 2px;
+    }
+    
+    /* Document info panel */
+    .document-info {
+        background-color: #252526;
+        border: 1px solid #2d2d2d;
+        border-radius: 4px;
+        padding: 10px;
+        margin-top: 10px;
+        font-size: 13px;
+    }
+    
+    .info-row {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 5px;
+        border-bottom: 1px solid #333;
+        padding-bottom: 5px;
+    }
+    
+    .info-label {
+        font-weight: bold;
+        color: #8a8a8a;
+    }
+    
+    .info-value {
+        text-align: right;
     }
 </style>
 """, unsafe_allow_html=True)
 
-# Function to create a VS Code-like editor
-def vs_code_editor(key, height=500):
-    editor_html = f"""
-    <div class="vscode-container">
-        <div class="status-bar">
-            <span>document.tex - LaTeX</span>
-            <span>UTF-8</span>
+# Create editor with custom HTML component
+def create_editor_component(key, height=600):
+    # Get the current value from session state or use default
+    content = st.session_state.get(key, "")
+    
+    # Create Ace editor with proper LaTeX content escaping
+    escaped_content = json.dumps(content)
+    editor_html = create_ace_editor().replace('{latex_content}', escaped_content)
+    
+    # Create component
+    component = st.components.v1.html(editor_html, height=height, scrolling=False)
+    
+    # Return the latest value
+    return component if component is not None else content
+
+# Build a VS Code-like toolbar
+def render_toolbar():
+    toolbar_html = """
+    <div class="toolbar">
+        <button class="toolbar-button" title="Bold" onclick="insertTextAtCursor('\\\\textbf{}')">
+            <strong>B</strong>
+        </button>
+        <button class="toolbar-button" title="Italic" onclick="insertTextAtCursor('\\\\textit{}')">
+            <em>I</em>
+        </button>
+        <button class="toolbar-button" title="Math" onclick="insertTextAtCursor('$  $')">
+            ∑
+        </button>
+        <div class="toolbar-separator"></div>
+        <button class="toolbar-button" title="Section" onclick="insertTextAtCursor('\\\\section{}')">
+            §
+        </button>
+        <button class="toolbar-button" title="Subsection" onclick="insertTextAtCursor('\\\\subsection{}')">
+            §§
+        </button>
+        <div class="toolbar-separator"></div>
+        <button class="toolbar-button" title="Itemize" onclick="insertTextAtCursor('\\\\begin{itemize}\\n\\t\\\\item \\n\\\\end{itemize}')">
+            •
+        </button>
+        <button class="toolbar-button" title="Enumerate" onclick="insertTextAtCursor('\\\\begin{enumerate}\\n\\t\\\\item \\n\\\\end{enumerate}')">
+            1.
+        </button>
+        <div class="toolbar-separator"></div>
+        <button class="toolbar-button" title="Equation" onclick="insertTextAtCursor('\\\\begin{equation}\\n  \\n\\\\end{equation}')">
+            =
+        </button>
+        <button class="toolbar-button" title="Figure" onclick="insertTextAtCursor('\\\\begin{figure}\\n\\t\\\\centering\\n\\t\\\\includegraphics[width=0.8\\\\textwidth]{image}\\n\\t\\\\caption{Caption}\\n\\t\\\\label{fig:label}\\n\\\\end{figure}')">
+            🖼
+        </button>
+        <button class="toolbar-button" title="Table" onclick="insertTextAtCursor('\\\\begin{table}\\n\\t\\\\centering\\n\\t\\\\begin{tabular}{ccc}\\n\\t\\tA & B & C \\\\\\\\\\n\\t\\t1 & 2 & 3 \\\\\\\\\\n\\t\\\\end{tabular}\\n\\t\\\\caption{Caption}\\n\\t\\\\label{tab:label}\\n\\\\end{table}')">
+            ⊞
+        </button>
+    </div>
+    
+    <script>
+    function insertTextAtCursor(text) {
+        var editor = ace.edit("editor");
+        editor.insert(text);
+        editor.focus();
+    }
+    </script>
+    """
+    st.markdown(toolbar_html, unsafe_allow_html=True)
+
+# VS Code-style editor tabs
+def render_editor_tabs(active_tab="document.tex"):
+    tab_html = f"""
+    <div class="tab-bar">
+        <div class="tab active">
+            <span class="tab-icon">📄</span> {active_tab}
         </div>
     </div>
     """
-    st.markdown(editor_html, unsafe_allow_html=True)
+    st.markdown(tab_html, unsafe_allow_html=True)
+
+# VS Code-style status bar
+def render_status_bar():
+    status_html = """
+    <div class="status-bar">
+        <span>LaTeX</span>
+        <span>Line: 1, Col: 1</span>
+        <span>UTF-8</span>
+    </div>
+    """
+    st.markdown(status_html, unsafe_allow_html=True)
+
+# Render a document outline based on section hierarchy
+def render_document_outline(structure):
+    if not structure:
+        return
+    
+    st.markdown('<div class="outline-view">', unsafe_allow_html=True)
+    
+    for item in structure:
+        level = item['level']
+        title = item['title']
+        type_icon = {
+            'part': '📑',
+            'chapter': '📕',
+            'section': '📌',
+            'subsection': '📎',
+            'subsubsection': '📍'
+        }.get(item['type'], '📋')
+        
+        # Indent based on level
+        indent = "&nbsp;" * (level * 4)
+        
+        st.markdown(
+            f'<div class="outline-item" title="Go to {item["type"]}: {title}">'
+            f'<span>{type_icon}</span>'
+            f'<span class="outline-item-text">{indent}{title}</span>'
+            f'</div>',
+            unsafe_allow_html=True
+        )
     
-    # Create the actual editor with VS Code styling
-    return st.text_area("", value=st.session_state.get(key, ""), 
-                        height=height, key=key, label_visibility="collapsed",
-                        help="Type your LaTeX code here")
+    st.markdown('</div>', unsafe_allow_html=True)
+
+# Render errors and warnings in a VS Code style
+def render_problems(errors, warnings):
+    if not errors and not warnings:
+        return
+    
+    st.markdown('<div class="problems-panel">', unsafe_allow_html=True)
+    st.markdown('<div class="problems-header">Problems</div>', unsafe_allow_html=True)
+    
+    # Show errors
+    for error in errors:
+        st.markdown(
+            f'<div class="problem-item">'
+            f'<div class="problem-icon">❌</div>'
+            f'<div class="problem-message">{error}'
+            f'<div class="problem-location">document.tex</div>'
+            f'</div></div>',
+            unsafe_allow_html=True
+        )
+    
+    # Show warnings
+    for warning in warnings:
+        st.markdown(
+            f'<div class="problem-item">'
+            f'<div class="problem-icon">⚠️</div>'
+            f'<div class="problem-message">{warning}'
+            f'<div class="problem-location">document.tex</div>'
+            f'</div></div>',
+            unsafe_allow_html=True
+        )
+    
+    st.markdown('</div>', unsafe_allow_html=True)
+
+# Render document information panel
+def render_document_info(latex_code):
+    # Calculate basic document stats
+    word_count = len(re.findall(r'\b\w+\b', latex_code))
+    char_count = len(latex_code)
+    line_count = len(latex_code.split('\n'))
+    
+    # Find document class
+    doc_class_match = re.search(r'\\documentclass(?:\[.*?\])?\{(.*?)\}', latex_code)
+    doc_class = doc_class_match.group(1) if doc_class_match else "unknown"
+    
+    # Count equations
+    equation_count = len(re.findall(r'\\begin\{equation', latex_code))
+    
+    # Count figures
+    figure_count = len(re.findall(r'\\begin\{figure', latex_code))
+    
+    # Count tables
+    table_count = len(re.findall(r'\\begin\{table', latex_code))
+    
+    # Render the info panel
+    st.markdown('<div class="document-info">', unsafe_allow_html=True)
+    
+    info_rows = [
+        ("Document Class", doc_class),
+        ("Word Count", word_count),
+        ("Character Count", char_count),
+        ("Line Count", line_count),
+        ("Equations", equation_count),
+        ("Figures", figure_count),
+        ("Tables", table_count)
+    ]
+    
+    for label, value in info_rows:
+        st.markdown(
+            f'<div class="info-row">'
+            f'<span class="info-label">{label}:</span>'
+            f'<span class="info-value">{value}</span>'
+            f'</div>',
+            unsafe_allow_html=True
+        )
+    
+    st.markdown('</div>', unsafe_allow_html=True)
 
 # Main application
 def main():
-    # Set up a clean, dark theme
-    st.markdown("<h1 style='color: #cccccc; margin-bottom: 20px;'>LaTeX Editor</h1>", unsafe_allow_html=True)
-    
     # Initialize session state
     if 'latex_code' not in st.session_state:
         st.session_state.latex_code = default_template
     if 'show_preview' not in st.session_state:
         st.session_state.show_preview = False
+    if 'last_compiled' not in st.session_state:
+        st.session_state.last_compiled = None
+    if 'errors' not in st.session_state:
+        st.session_state.errors = []
+    if 'warnings' not in st.session_state:
+        st.session_state.warnings = []
     
-    # Display installation status
+    # Check installation status
     if not is_pdflatex_installed():
-        st.warning("⚠️ LaTeX is not installed correctly. The PDF compilation feature will not work.")
+        st.warning("⚠️ LaTeX is not installed. The compilation feature will not work.")
     
-    # Create layout - full width editor
+    # Create main layout
     col1, col2 = st.columns([3, 2])
     
     with col1:
-        # VS Code-like editor with custom class for styling
-        st.markdown('<div class="vscode-editor">', unsafe_allow_html=True)
-        latex_code = vs_code_editor("latex_editor", height=500)
-        st.markdown('</div>', unsafe_allow_html=True)
-        st.session_state.latex_code = latex_code
+        # Create tabs for main editing area with VS Code style
+        editor_tabs = st.tabs(["Editor", "Settings"])
         
-        # Control buttons with VS Code styling
-        st.markdown("""
-        <div style="display: flex; gap: 10px;">
-            <button class="vscode-button" onclick="document.querySelector('[data-testid=\\\"stFormSubmitButton\\\"]').click()">
-                Compile PDF
-            </button>
-            <button class="vscode-button" onclick="document.querySelector('[key=\\\"load_template\\\"]').click()">
-                Load Template
-            </button>
-            <button class="vscode-button" onclick="document.querySelector('[key=\\\"clear_editor\\\"]').click()">
-                Clear Editor
-            </button>
-        </div>
-        """, unsafe_allow_html=True)
-        
-        # Hidden buttons to handle the clicks
-        if st.button("Compile PDF", key="compile", help="Compile LaTeX to PDF"):
-            st.session_state.compile_clicked = True
-        
-        if st.button("Load Template", key="load_template", help="Load default template"):
-            st.session_state.latex_code = default_template
-            st.rerun()
+        with editor_tabs[0]:
+            # VS Code-like editor interface
+            st.markdown('<div class="editor-container">', unsafe_allow_html=True)
+            
+            # Tab bar
+            render_editor_tabs()
+            
+            # Toolbar
+            render_toolbar()
+            
+            # Initialize Ace editor
+            latex_code = create_editor_component("ace_editor", height=500)
+            if latex_code is not None:
+                st.session_state.latex_code = latex_code
+            
+            # Status bar
+            render_status_bar()
+            
+            st.markdown('</div>', unsafe_allow_html=True)
+            
+            # Control buttons with VS Code styling
+            st.markdown('<div class="button-group">', unsafe_allow_html=True)
+            compile_btn = st.button("Compile", help="Compile LaTeX to PDF")
+            load_template_btn = st.button("Load Template", help="Load default template")
+            clear_btn = st.button("Clear", help="Clear editor content")
+            st.markdown('</div>', unsafe_allow_html=True)
+            
+            # Handle button actions
+            if compile_btn:
+                st.session_state.compile_clicked = True
+                st.session_state.last_compiled = time.time()
+            
+            if load_template_btn:
+                st.session_state.latex_code = default_template
+                st.rerun()
+            
+            if clear_btn:
+                st.session_state.latex_code = ""
+                st.rerun()
         
-        if st.button("Clear Editor", key="clear_editor", help="Clear editor content"):
-            st.session_state.latex_code = ""
-            st.rerun()
+        with editor_tabs[1]:
+            st.markdown("<h3>LaTeX Settings</h3>", unsafe_allow_html=True)
+            
+            st.markdown('<div class="control-panel">', unsafe_allow_html=True)
+            col_a, col_b = st.columns(2)
+            
+            with col_a:
+                st.checkbox("Auto-compile on save", value=False, key="auto_compile")
+                st.checkbox("Use pdflatex", value=True, key="use_pdflatex")
+                st.checkbox("Enable BibTeX", value=False, key="use_bibtex")
+            
+            with col_b:
+                st.selectbox("Document Class", 
+                             ["article", "report", "book", "letter", "beamer"], 
+                             index=0, key="doc_class")
+                st.selectbox("PDF Engine", 
+                             ["pdflatex", "xelatex", "lualatex"], 
+                             index=0, key="pdf_engine")
+            
+            st.markdown('</div>', unsafe_allow_html=True)
     
     with col2:
-        st.markdown("<h3 style='color: #cccccc; margin-bottom: 10px;'>Output</h3>", unsafe_allow_html=True)
+        # Output tabs with VS Code style
+        output_tabs = st.tabs(["Output", "Outline", "Problems", "Info"])
         
-        # PDF compilation
-        if 'compile_clicked' in st.session_state and st.session_state.compile_clicked:
-            with st.spinner("Compiling..."):
-                pdf_data, stdout, stderr = latex_to_pdf(latex_code)
-                
-                if pdf_data:
-                    st.session_state.pdf_data = pdf_data
-                    st.success("Compilation successful")
-                    
-                    # Toggle button for preview
-                    if st.button("Toggle Preview", help="Show or hide the PDF preview"):
-                        st.session_state.show_preview = not st.session_state.show_preview
+        with output_tabs[0]:
+            # PDF compilation and output
+            if 'compile_clicked' in st.session_state and st.session_state.compile_clicked:
+                with st.spinner("Compiling..."):
+                    pdf_data, stdout, stderr = latex_to_pdf(st.session_state.latex_code)
                     
-                    # Download button always available
-                    st.markdown(get_download_link(pdf_data), unsafe_allow_html=True)
-                    
-                    # Optional preview
-                    if st.session_state.show_preview:
-                        st.markdown('<div class="pdf-preview-container">', unsafe_allow_html=True)
-                        preview_images = render_pdf_preview(pdf_data)
-                        if preview_images:
-                            for i, img in enumerate(preview_images):
-                                st.image(img, caption=f"Page {i+1}", use_container_width=True, 
-                                        output_format="PNG")
-                        st.markdown('</div>', unsafe_allow_html=True)
+                    # Parse errors and warnings
+                    errors, warnings = parse_latex_errors(stdout + stderr)
+                    st.session_state.errors = errors
+                    st.session_state.warnings = warnings
                     
-                    # Terminal output in collapsible section
-                    with st.expander("Terminal Output"):
-                        st.markdown('<div class="terminal-output">', unsafe_allow_html=True)
-                        st.text(stdout)
+                    if pdf_data:
+                        st.session_state.pdf_data = pdf_data
+                        st.success("Compilation successful")
+                        
+                        # Toggle button for preview
+                        if st.button("Toggle Preview", help="Show or hide the PDF preview"):
+                            st.session_state.show_preview = not st.session_state.show_preview
+                        
+                        # Download button
+                        st.markdown(get_download_link(pdf_data), unsafe_allow_html=True)
+                        
+                        # Display compilation info
+                        if st.session_state.last_compiled:
+                            time_str = time.strftime("%H:%M:%S", time.localtime(st.session_state.last_compiled))
+                            st.info(f"Last compiled: {time_str}")
+                        
+                        # Optional preview
+                        if st.session_state.show_preview:
+                            st.markdown('<div class="preview-container">', unsafe_allow_html=True)
+                            preview_images = render_pdf_preview(pdf_data)
+                            if preview_images:
+                                for i, img in enumerate(preview_images):
+                                    st.image(img, caption=f"Page {i+1}", use_container_width=True, 
+                                            output_format="PNG")
+                            st.markdown('</div>', unsafe_allow_html=True)
+                        
+                        # Terminal output in collapsible section
+                        with st.expander("Terminal Output"):
+                            st.markdown('<div class="terminal">', unsafe_allow_html=True)
+                            st.text(stdout)
+                            st.markdown('</div>', unsafe_allow_html=True)
+                        
+                        st.session_state.compile_clicked = False
+                    else:
+                        st.error("Compilation failed")
+                        st.markdown('<div class="terminal">', unsafe_allow_html=True)
+                        
+                        # Highlight errors in output
+                        for line in stderr.split('\n'):
+                            if "error" in line.lower():
+                                st.markdown(f'<span class="terminal-error">{line}</span>', unsafe_allow_html=True)
+                            elif "warning" in line.lower():
+                                st.markdown(f'<span class="terminal-warning">{line}</span>', unsafe_allow_html=True)
+                            else:
+                                st.write(line)
+                        
                         st.markdown('</div>', unsafe_allow_html=True)
-                    
-                    st.session_state.compile_clicked = False
-                else:
-                    st.error("Compilation failed")
-                    st.markdown('<div class="terminal-output">', unsafe_allow_html=True)
-                    st.text(stderr)
+                        st.session_state.compile_clicked = False
+            
+            # Display previous PDF if available
+            elif 'pdf_data' in st.session_state and st.session_state.pdf_data:
+                # Toggle button for preview
+                if st.button("Toggle Preview", help="Show or hide the PDF preview"):
+                    st.session_state.show_preview = not st.session_state.show_preview
+                
+                # Download button
+                st.markdown(get_download_link(st.session_state.pdf_data), unsafe_allow_html=True)
+                
+                # Display compilation info
+                if st.session_state.last_compiled:
+                    time_str = time.strftime("%H:%M:%S", time.localtime(st.session_state.last_compiled))
+                    st.info(f"Last compiled: {time_str}")
+                
+                # Optional preview
+                if st.session_state.show_preview:
+                    st.markdown('<div class="preview-container">', unsafe_allow_html=True)
+                    preview_images = render_pdf_preview(st.session_state.pdf_data)
+                    if preview_images:
+                        for i, img in enumerate(preview_images):
+                            st.image(img, caption=f"Page {i+1}", use_container_width=True, 
+                                    output_format="PNG")
                     st.markdown('</div>', unsafe_allow_html=True)
-                    st.session_state.compile_clicked = False
+            else:
+                st.info("Click 'Compile' to generate PDF output")
         
-        # Display previous PDF if available
-        elif 'pdf_data' in st.session_state and st.session_state.pdf_data:
-            # Toggle button for preview
-            if st.button("Toggle Preview", help="Show or hide the PDF preview"):
-                st.session_state.show_preview = not st.session_state.show_preview
-            
-            # Download button always available
-            st.markdown(get_download_link(st.session_state.pdf_data), unsafe_allow_html=True)
-            
-            # Optional preview
-            if st.session_state.show_preview:
-                st.markdown('<div class="pdf-preview-container">', unsafe_allow_html=True)
-                preview_images = render_pdf_preview(st.session_state.pdf_data)
-                if preview_images:
-                    for i, img in enumerate(preview_images):
-                        st.image(img, caption=f"Page {i+1}", use_container_width=True, 
-                                output_format="PNG")
-                st.markdown('</div>', unsafe_allow_html=True)
-        else:
-            st.info("Click 'Compile PDF' to generate output")
+        with output_tabs[1]:
+            # Document structure/outline view
+            structure = extract_document_structure(st.session_state.latex_code)
+            render_document_outline(structure)
+        
+        with output_tabs[2]:
+            # Problems panel (errors & warnings)
+            if st.session_state.errors or st.session_state.warnings:
+                render_problems(st.session_state.errors, st.session_state.warnings)
+            else:
+                st.info("No problems detected")
+        
+        with output_tabs[3]:
+            # Document information panel
+            render_document_info(st.session_state.latex_code)
 
 if __name__ == "__main__":
     main()