feat: implement drag-drop and data migration (Phase 3 & 5)

Phase 3 - Drag-drop functionality:
- Add useTreeDragDrop composable with drag state management
- Implement drag constraints (prevent dropping on self/descendants)
- Add visual feedback (opacity, drop indicators, highlight)
- Support drop positions: before/after/inside folder

Phase 5 - Data migration and sync:
- Add MigrationPrompt component for first-time users
- Implement bidirectional sync between connections and session tree
- Add syncNewConnections/syncDeletedConnections/syncConnectionName methods
- Create useConnectionSync composable for automatic sync
- Support migration from old layout with user prompt

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/composables/useConnectionSync.ts

@@ -0,0 +1,38 @@
+import { watch } from 'vue'
+import { useConnectionsStore } from '../stores/connections'
+import { useSessionTreeStore } from '../stores/sessionTree'
+
+export function useConnectionSync() {
+  const connectionsStore = useConnectionsStore()
+  const treeStore = useSessionTreeStore()
+
+  // Watch for new connections
+  watch(
+    () => connectionsStore.connections.length,
+    (newLength, oldLength) => {
+      if (newLength > oldLength) {
+        // New connection added
+        treeStore.syncNewConnections()
+      } else if (newLength < oldLength) {
+        // Connection deleted
+        treeStore.syncDeletedConnections()
+      }
+    }
+  )
+
+  // Watch for connection name changes
+  watch(
+    () => connectionsStore.connections.map(c => ({ id: c.id, name: c.name })),
+    (newConnections, oldConnections) => {
+      if (!oldConnections) return
+
+      newConnections.forEach((newConn, index) => {
+        const oldConn = oldConnections[index]
+        if (oldConn && oldConn.id === newConn.id && oldConn.name !== newConn.name) {
+          treeStore.syncConnectionName(newConn.id, newConn.name)
+        }
+      })
+    },
+    { deep: true }
+  )
+}