refactor: enhanced structure

frontend/src/components/Terminal.svelte

@@ -1,6 +1,7 @@
-<!-- components/Terminal.svelte -->
+<!-- src/components/Terminal.svelte -->
 <script>
-  export let terminalLines = [];
+  import { terminalLines } from '../stores/appStore';
+  import { onMount, onDestroy } from 'svelte';
   
   let terminalRef;
   let isResizing = false;
@@ -9,7 +10,7 @@
   function handleMouseDown(e) {
     isResizing = true;
     startY = e.clientY;
-    startHeight = parseInt(document.defaultView.getComputedStyle(terminalRef).height, 10);
+    startHeight = parseInt(getComputedStyle(terminalRef).height, 10);
     
     document.addEventListener('mousemove', handleMouseMove);
     document.addEventListener('mouseup', handleMouseUp);
@@ -34,24 +35,29 @@
     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);
+  function scrollToBottom() {
+    if (terminalRef) {
+      const content = terminalRef.querySelector('.terminal-content');
+      if (content) {
+        content.scrollTop = content.scrollHeight;
+      }
     }
   }
+  
+  // Auto-scroll when new lines are added
+  $: $terminalLines, setTimeout(scrollToBottom, 0);
+  
+  onDestroy(() => {
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  });
 </script>
 
 <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}
+    {#each $terminalLines as line}
       <div class="terminal-line">{line}</div>
     {/each}
   </div>
@@ -62,13 +68,11 @@
     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 */
+    margin: var(--spacing-lg);
+    height: 200px;
     position: relative;
     display: flex;
     flex-direction: column;
-    resize: vertical;
     overflow: hidden;
   }
 
@@ -90,7 +94,7 @@
   }
 
   .resize-handle:hover {
-    background-color: var(--accent-color);
+    background-color: var(--accent-primary);
   }
 
   .terminal-header {
@@ -109,13 +113,10 @@
     font-size: 0.75rem;
     line-height: 1.4;
     color: var(--text-primary);
-    flex-grow: 1;
+    flex: 1;
     overflow-y: auto;
-    white-space: nowrap;
+    white-space: pre-wrap;
     user-select: text;
-    -webkit-user-select: text;
-    -moz-user-select: text;
-    -ms-user-select: text;
   }
 
   .terminal-line {