refactor: ts

frontend/src/components/Terminal.svelte

@@ -1,13 +1,14 @@
 <!-- src/components/Terminal.svelte -->
-<script>
+<script lang="ts">
   import { terminalLines } from '../stores/appStore';
   import { onMount, onDestroy } from 'svelte';
   
-  let terminalRef;
+  let terminalRef: HTMLDivElement;
   let isResizing = false;
-  let startY, startHeight;
+  let startY: number;
+  let startHeight: number;
   
-  function handleMouseDown(e) {
+  function handleMouseDown(e: MouseEvent): void {
     isResizing = true;
     startY = e.clientY;
     startHeight = parseInt(getComputedStyle(terminalRef).height, 10);
@@ -17,7 +18,7 @@
     e.preventDefault();
   }
   
-  function handleMouseMove(e) {
+  function handleMouseMove(e: MouseEvent): void {
     if (!isResizing) return;
     
     const height = startHeight - (e.clientY - startY);
@@ -29,15 +30,15 @@
     }
   }
   
-  function handleMouseUp() {
+  function handleMouseUp(): void {
     isResizing = false;
     document.removeEventListener('mousemove', handleMouseMove);
     document.removeEventListener('mouseup', handleMouseUp);
   }
   
-  function scrollToBottom() {
+  function scrollToBottom(): void {
     if (terminalRef) {
-      const content = terminalRef.querySelector('.terminal-content');
+      const content = terminalRef.querySelector('.terminal-content') as HTMLDivElement;
       if (content) {
         content.scrollTop = content.scrollHeight;
       }
@@ -84,10 +85,10 @@
 
   .resize-handle {
     position: absolute;
-    top: 0;
+    top: 10;
     left: 0;
     right: 0;
-    height: 4px;
+    height: 10px;
     cursor: row-resize;
     z-index: 10;
     background-color: transparent;
@@ -95,6 +96,8 @@
 
   .resize-handle:hover {
     background-color: var(--accent-primary);
+    border-radius: 100px;
+    opacity: 0.5;
   }
 
   .terminal-header {