fixing layout issue and rendering issues

app/components/FlutterRunner.tsx

@@ -244,6 +244,7 @@ export function FlutterRunner({ onClose, onMinimize, onMaximize, initialCode }:
     a.download = activeFileName || 'main.dart'
     a.click()
     URL.revokeObjectURL(url)
+  }
 
   const handleCopyCode = () => {
     navigator.clipboard.writeText(code).then(() => {
@@ -252,7 +253,6 @@ export function FlutterRunner({ onClose, onMinimize, onMaximize, initialCode }:
       console.error("Failed to copy:", err)
     })
   }
-  }
 
   return (
     <Window
@@ -319,7 +319,6 @@ export function FlutterRunner({ onClose, onMinimize, onMaximize, initialCode }:
             </div>
 
             <div className="flex items-center gap-2">
-              <button
               <button
                 onClick={handleCopyCode}
                 className="flex items-center gap-1 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white rounded text-xs font-medium transition-colors"
@@ -328,6 +327,7 @@ export function FlutterRunner({ onClose, onMinimize, onMaximize, initialCode }:
                 <Copy size={14} weight="bold" />
                 Copy Code
               </button>
+              <button
                 onClick={handleDownload}
                 className="p-1.5 text-gray-400 hover:text-white hover:bg-[#3e3e42] rounded transition-colors"
                 title="Download Code"
@@ -406,16 +406,14 @@ export function FlutterRunner({ onClose, onMinimize, onMaximize, initialCode }:
             <div className="flex-1 overflow-y-auto py-2">
               <div className="px-2">
                 <div className="flex items-center gap-1 py-1 px-2 text-sm text-gray-300 hover:bg-[#2a2d2e] rounded cursor-pointer">
-                  <CaretDown,
-  Copy size={12} weight="bold" />
+                  <CaretDown size={12} weight="bold" />
                   <span className="font-bold">Flutter App</span>
                 </div>
                 <div className="pl-4">
                   {files.map(file => (
                     <div key={file.id}>
                       <div className="flex items-center gap-2 py-1 px-2 text-sm hover:bg-[#2a2d2e] rounded cursor-pointer text-blue-400">
-                        <CaretDown,
-  Copy size={12} weight="bold" />
+                        <CaretDown size={12} weight="bold" />
                         {file.name}
                       </div>
                       {file.children?.map(child => (

app/components/GeminiChat.tsx

@@ -229,7 +229,7 @@ export function GeminiChat({ onClose, onMinimize, onMaximize, onFocus, zIndex }:
               className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
             >
               <div
-                className={`max-w-[80%] ${message.role === 'user'
+                className={`max-w-[80%] select-text ${message.role === 'user'
                   ? 'bg-blue-600 text-white rounded-2xl rounded-tr-none'
                   : 'bg-gray-100 text-gray-800 rounded-2xl rounded-tl-none'
                   } px-4 py-2 text-sm`}
@@ -281,8 +281,12 @@ export function GeminiChat({ onClose, onMinimize, onMaximize, onFocus, zIndex }:
               value={input}
               onChange={(e) => setInput(e.target.value)}
               onKeyDown={handleKeyPress}
+              onPaste={(e) => {
+                // Allow paste - default behavior
+                e.stopPropagation()
+              }}
               placeholder="Ask Gemini..."
-              className="flex-1 bg-gray-100 rounded-full px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200 transition-all"
+              className="flex-1 bg-gray-100 rounded-full px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-200 transition-all select-text"
               disabled={isLoading}
             />
             <button

app/components/LaTeXEditor.tsx

@@ -203,39 +203,115 @@ export function LaTeXEditor({ onClose, onMinimize, onMaximize, initialContent }:
   useEffect(() => {
     if (previewRef.current) {
       try {
-        // Simple regex-based rendering for demo purposes
-        // In a real app, we'd use a proper LaTeX to HTML converter or PDF.js
-        const text = code
-          .replace(/\\section\{([^}]+)\}/g, '<h2>$1</h2>')
-          .replace(/\\subsection\{([^}]+)\}/g, '<h3>$1</h3>')
-          .replace(/\\textbf\{([^}]+)\}/g, '<b>$1</b>')
-          .replace(/\\textit\{([^}]+)\}/g, '<i>$1</i>')
-          .replace(/\\maketitle/, '<div class="title"><h1>My LaTeX Document</h1><p>Reuben OS</p><p>' + new Date().toLocaleDateString() + '</p></div>')
-          .replace(/\\begin\{document\}/, '')
-          .replace(/\\end\{document\}/, '')
-          .replace(/\\documentclass\{[^}]+\}/, '')
-          .replace(/\\usepackage\{[^}]+\}/, '')
-          .replace(/\\title\{[^}]+\}/, '')
-          .replace(/\\author\{[^}]+\}/, '')
-          .replace(/\\date\{[^}]+\}/, '')
-
-        // Split by math delimiters to render KaTeX
-        const parts = text.split(/(\\\[[\s\S]*?\\\]|\$[^$]+\$)/)
+        // Extract title, author, and date from LaTeX preamble
+        let title = 'Untitled Document'
+        let author = 'Anonymous'
+        let date = new Date().toLocaleDateString()
+
+        const titleMatch = code.match(/\\title\{([^}]+)\}/)
+        const authorMatch = code.match(/\\author\{([^}]+)\}/)
+        const dateMatch = code.match(/\\date\{([^}]+)\}/)
+
+        if (titleMatch) title = titleMatch[1]
+        if (authorMatch) author = authorMatch[1]
+        if (dateMatch) {
+          date = dateMatch[1].replace(/\\today/g, new Date().toLocaleDateString())
+        }
+
+        // Process the document content
+        let processedText = code
+          // Remove preamble
+          .replace(/\\documentclass\{[^}]+\}/g, '')
+          .replace(/\\usepackage\{[^}]+\}/g, '')
+          .replace(/\\title\{[^}]+\}/g, '')
+          .replace(/\\author\{[^}]+\}/g, '')
+          .replace(/\\date\{[^}]+\}/g, '')
+          .replace(/\\begin\{document\}/g, '')
+          .replace(/\\end\{document\}/g, '')
+
+          // Handle title
+          .replace(/\\maketitle/g, `
+            <div style="text-align: center; margin-bottom: 2em; padding-bottom: 1em; border-bottom: 1px solid #ccc;">
+              <h1 style="font-size: 2em; margin: 0.5em 0;">${title}</h1>
+              <p style="margin: 0.3em 0; font-size: 1.1em;">${author}</p>
+              <p style="margin: 0.3em 0; color: #666;">${date}</p>
+            </div>
+          `)
+
+          // Sections and structure
+          .replace(/\\section\{([^}]+)\}/g, '<h2 style="font-size: 1.5em; margin-top: 1.5em; margin-bottom: 0.5em; font-weight: bold;">$1</h2>')
+          .replace(/\\subsection\{([^}]+)\}/g, '<h3 style="font-size: 1.2em; margin-top: 1em; margin-bottom: 0.5em; font-weight: bold;">$1</h3>')
+          .replace(/\\subsubsection\{([^}]+)\}/g, '<h4 style="font-size: 1em; margin-top: 0.8em; margin-bottom: 0.3em; font-weight: bold;">$1</h4>')
+          .replace(/\\paragraph\{([^}]+)\}/g, '<p style="font-weight: bold; margin-top: 0.5em;">$1</p>')
+
+          // Text formatting
+          .replace(/\\textbf\{([^}]+)\}/g, '<strong>$1</strong>')
+          .replace(/\\textit\{([^}]+)\}/g, '<em>$1</em>')
+          .replace(/\\underline\{([^}]+)\}/g, '<u>$1</u>')
+          .replace(/\\emph\{([^}]+)\}/g, '<em>$1</em>')
+          .replace(/\\texttt\{([^}]+)\}/g, '<code style="font-family: monospace; background: #f5f5f5; padding: 2px 4px; border-radius: 3px;">$1</code>')
+
+          // Lists
+          .replace(/\\begin\{itemize\}/g, '<ul style="margin: 0.5em 0; padding-left: 1.5em;">')
+          .replace(/\\end\{itemize\}/g, '</ul>')
+          .replace(/\\begin\{enumerate\}/g, '<ol style="margin: 0.5em 0; padding-left: 1.5em;">')
+          .replace(/\\end\{enumerate\}/g, '</ol>')
+          .replace(/\\item\s+/g, '<li style="margin: 0.3em 0;">')
+
+          // Paragraphs and line breaks
+          .replace(/\\\\/g, '<br />')
+          .replace(/\\newline/g, '<br />')
+          .replace(/\\par\b/g, '</p><p>')
+
+          // Clean up extra whitespace
+          .replace(/\n\n+/g, '</p><p style="margin: 0.5em 0;">')
+
+        // Split by math delimiters to render KaTeX (improved regex for display and inline math)
+        const parts = processedText.split(/(\\\[[\s\S]*?\\\]|\$\$[\s\S]*?\$\$|\$[^$]+\$|\\\([\s\S]*?\\\))/)
         previewRef.current.innerHTML = ''
 
         parts.forEach(part => {
-          if (part.startsWith('\\[') || part.startsWith('$')) {
-            const math = part.replace(/^\\\[|\\\]$|^\$|\$$/g, '')
-            const span = document.createElement('span')
+          if (part.startsWith('\\[') || part.startsWith('$$') || part.startsWith('$') || part.startsWith('\\(')) {
+            // Determine if it's display math or inline math
+            const isDisplayMath = part.startsWith('\\[') || part.startsWith('$$')
+
+            // Extract the math content
+            let math = part
+            if (part.startsWith('\\[') && part.endsWith('\\]')) {
+              math = part.slice(2, -2)
+            } else if (part.startsWith('$$') && part.endsWith('$$')) {
+              math = part.slice(2, -2)
+            } else if (part.startsWith('$') && part.endsWith('$')) {
+              math = part.slice(1, -1)
+            } else if (part.startsWith('\\(') && part.endsWith('\\)')) {
+              math = part.slice(2, -2)
+            }
+
+            const span = document.createElement(isDisplayMath ? 'div' : 'span')
+            if (isDisplayMath) {
+              span.style.textAlign = 'center'
+              span.style.margin = '1em 0'
+            }
+
             try {
-              katex.render(math, span, { throwOnError: false, displayMode: part.startsWith('\\[') })
+              katex.render(math, span, {
+                throwOnError: false,
+                displayMode: isDisplayMath,
+                strict: false
+              })
               previewRef.current?.appendChild(span)
             } catch (e) {
-              previewRef.current?.appendChild(document.createTextNode(part))
+              // If KaTeX fails, show the raw math
+              const errorSpan = document.createElement('span')
+              errorSpan.style.color = '#cc0000'
+              errorSpan.textContent = part
+              previewRef.current?.appendChild(errorSpan)
             }
-          } else {
+          } else if (part.trim()) {
+            // Only add non-empty parts
             const div = document.createElement('div')
             div.innerHTML = part
+            div.style.margin = '0.5em 0'
             previewRef.current?.appendChild(div)
           }
         })

app/components/Messages.tsx

@@ -215,7 +215,7 @@ export function Messages({ onClose, onMinimize, onMaximize, onFocus, zIndex }: M
                                         )}
                                         <div
                                             className={`
-                        max-w-[70%] px-3 py-1.5 text-[13px] leading-relaxed break-words relative group
+                        max-w-[70%] px-3 py-1.5 text-[13px] leading-relaxed break-words relative group select-text
                         ${isMe
                                                     ? 'bg-[#0A84FF] text-white rounded-2xl rounded-br-sm message-bubble-sent'
                                                     : 'bg-[#3a3a3a] text-gray-100 rounded-2xl rounded-bl-sm message-bubble-received'}
@@ -268,10 +268,20 @@ export function Messages({ onClose, onMinimize, onMaximize, onFocus, zIndex }: M
                                     type="text"
                                     value={inputText}
                                     onChange={(e) => setInputText(e.target.value)}
+                                    onKeyDown={(e) => {
+                                        if (e.key === 'Enter' && !e.shiftKey) {
+                                            e.preventDefault()
+                                            handleSend(e)
+                                        }
+                                    }}
+                                    onPaste={(e) => {
+                                        // Allow paste - default behavior
+                                        e.stopPropagation()
+                                    }}
                                     placeholder="iMessage"
                                     maxLength={200}
                                     disabled={isLoading}
-                                    className="w-full bg-[#2a2a2a] border border-white/10 rounded-full py-1.5 pl-4 pr-10 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-gray-500 transition-colors"
+                                    className="w-full bg-[#2a2a2a] border border-white/10 rounded-full py-1.5 pl-4 pr-10 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-gray-500 transition-colors select-text"
                                 />
                                 <button
                                     type="submit"

app/globals.css

@@ -269,6 +269,25 @@
   content: '+';
 }
 
+/* Text Selection Styling */
+::selection {
+  background: rgba(59, 130, 246, 0.3);
+  color: inherit;
+}
+
+::-moz-selection {
+  background: rgba(59, 130, 246, 0.3);
+  color: inherit;
+}
+
+/* Enable text selection for specific elements */
+.select-text {
+  user-select: text !important;
+  -webkit-user-select: text !important;
+  -moz-user-select: text !important;
+  cursor: text;
+}
+
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
   width: 10px;