feat: enhance logging and error handling in backend and editor components

src/components/GhostTextOverlay.vue

@@ -7,6 +7,7 @@
 
 <script setup>
 import { computed } from 'vue'
+import { onMounted, onUnmounted, watch } from 'vue'
 
 const props = defineProps({
     suggestion: { type: String, default: '' },
@@ -15,6 +16,26 @@ const props = defineProps({
 
 const emit = defineEmits(['accept', 'dismiss'])
 
+onMounted(() => {
+    console.log('[GhostTextOverlay] Component mounted')
+    if (props.suggestion && props.position) {
+        console.log('[GhostTextOverlay] Suggestion visible:', props.suggestion.substring(0, 50))
+        console.log('[GhostTextOverlay] Position:', JSON.stringify(props.position))
+    }
+})
+
+onUnmounted(() => {
+    console.log('[GhostTextOverlay] Component unmounted')
+})
+
+watch([() => props.suggestion, () => props.position], ([newSuggestion, newPosition]) => {
+    console.log('[GhostTextOverlay] Props changed:', {
+        suggestionLength: newSuggestion?.length || 0,
+        hasPosition: !!newPosition,
+        positionKeys: newPosition ? Object.keys(newPosition) : []
+    })
+}, { immediate: true })
+
 const visible = computed(() => props.suggestion && props.position)
 
 const overlayStyle = computed(() => ({
@@ -31,7 +52,10 @@ const overlayStyle = computed(() => ({
     zIndex: 1000,
 }))
 
-const acceptSuggestion = () => emit('accept')
+const acceptSuggestion = () => {
+    console.log('[GhostTextOverlay] acceptSuggestion called')
+    emit('accept')
+}
 </script>
 
 <style scoped>