feat: add resizable terminal panel to main layout

- Integrate terminal as persistent component in main App layout
- Add drag-to-resize functionality with min/max height constraints
- Implement auto-scroll to bottom for new terminal lines
- Prevent context menu and enable text selection in terminal content
- Add responsive behavior that hides terminal on small screens

frontend/src/components/Terminal.svelte

@@ -1,50 +1,128 @@
 <!-- components/Terminal.svelte -->
 <script>
-export let terminalLines = [];
+  export let terminalLines = [];
+  
+  let terminalRef;
+  let isResizing = false;
+  let startY, startHeight;
+  
+  function handleMouseDown(e) {
+    isResizing = true;
+    startY = e.clientY;
+    startHeight = parseInt(document.defaultView.getComputedStyle(terminalRef).height, 10);
+    
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    e.preventDefault();
+  }
+  
+  function handleMouseMove(e) {
+    if (!isResizing) return;
+    
+    const height = startHeight - (e.clientY - startY);
+    const minHeight = 100;
+    const maxHeight = window.innerHeight * 0.8;
+    
+    if (height >= minHeight && height <= maxHeight) {
+      terminalRef.style.height = `${height}px`;
+    }
+  }
+  
+  function handleMouseUp() {
+    isResizing = false;
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  }
+  
+  // Scroll to bottom when new lines are added
+  $: {
+    if (terminalLines.length > 0) {
+      setTimeout(() => {
+        const content = terminalRef?.querySelector('.terminal-content');
+        if (content) {
+          content.scrollTop = content.scrollHeight;
+        }
+      }, 0);
+    }
+  }
 </script>
 
-<div class="terminal">
-    <div class="terminal-header">Output</div>
-    <div class="terminal-content">
-        {#each terminalLines as line}
-            <div class="terminal-line">{line}</div>
-        {/each}
-    </div>
+<div class="terminal" bind:this={terminalRef}>
+  <div class="resize-handle" on:mousedown={handleMouseDown}></div>
+  <div class="terminal-header">Logs</div>
+  <div class="terminal-content">
+    {#each terminalLines as line}
+      <div class="terminal-line">{line}</div>
+    {/each}
+  </div>
 </div>
 
 <style>
-.terminal {
-    background-color: var(--bg-primary);
+  .terminal {
+    background-color: var(--bg-secondary);
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-sm);
+    margin: 20px;
+    margin-top: auto;
+    height: 200px; /* Default height */
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    resize: vertical;
     overflow: hidden;
-    flex-grow: 1;
-}
+  }
 
-.terminal-header {
-    background-color: var(--bg-secondary);
+  @media (max-height: 500px) {
+    .terminal {
+      display: none;
+    }
+  }
+
+  .resize-handle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    cursor: row-resize;
+    z-index: 10;
+    background-color: transparent;
+  }
+
+  .resize-handle:hover {
+    background-color: var(--accent-color);
+  }
+
+  .terminal-header {
+    background-color: var(--bg-header);
     padding: var(--spacing-sm) var(--spacing-md);
     border-bottom: 1px solid var(--border-color);
     font-size: 0.875rem;
     color: var(--text-secondary);
-}
+    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
+    user-select: none;
+  }
 
-.terminal-content {
+  .terminal-content {
     padding: var(--spacing-md);
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
     font-size: 0.75rem;
     line-height: 1.4;
     color: var(--text-primary);
-    max-height: 200px;
+    flex-grow: 1;
     overflow-y: auto;
     white-space: nowrap;
-}
+    user-select: text;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+  }
 
-.terminal-line {
+  .terminal-line {
     margin-bottom: 2px;
-}
+  }
 
-.terminal-line:last-child {
+  .terminal-line:last-child {
     margin-bottom: 0;
-}
+  }
 </style>