feat(backend): full remote implementation, untested

frontend/src/views/Remotes.vue

@@ -1,11 +1,11 @@
 <script setup>
 import TitleBar from '../components/TitleBar.vue';
-import { ref, reactive, computed, onMounted } from 'vue';
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue';
 import * as backend from '../backend';
 import * as ui from '../ui';
 
 /** Connected external tool remotes (initialized with mock data) */
-const remotes = ref([
+const remotes = ref([/*
   {
     name: 'weather-service',
     connected: true,
@@ -70,7 +70,7 @@ const remotes = ref([
     ],
     agentIds: []
   }
-]);
+*/]);
 
 /** Tracks expanded remote panels using a Set to support multiple open sections */
 const expandedRemoteIds = ref(new Set());
@@ -96,10 +96,28 @@ const localRemoteList = ref([]);
 /** Key used to serialize/deserialize local remotes from browser storage */
 const STORAGE_KEY = 'local_remotes';
 
-onMounted(() => {
-  // fetchRemotes(); // Disabled — using hardcoded mock data for now
+let connectListenerCancel = null;
+let disconnectListenerCancel = null;
+
+onMounted(async () => {
+  await fetchRemotes();
+  let connectListenerCancel = backend.onAction('remote-connected', ev => {
+    remotes.value.push(ev.data.remote);
+  });
+  let disconnectListenerCancel = backend.onAction('remote-disconnected', ev => {
+    // TODO
+  });
 });
 
+onUnmounted(async () => {
+  if (connectListenerCancel) connectListenerCancel();
+  if (disconnectListenerCancel) disconnectListenerCancel();
+})
+
+async function fetchRemotes() {
+  remotes.value = (await backend.sendAction('remote-list')).remotes;
+}
+
 /** Toggle expansion of a remote detail panel */
 function toggleRemote(name) {
   // Create a new Set instance to ensure Vue detects the change
@@ -190,18 +208,36 @@ function saveLocalRemote() {
   localStorage.setItem(STORAGE_KEY, JSON.stringify(localRemoteList.value));
 }
 
-function connectLocalRemote(remote) {
+async function connectLocalRemote(remote) {
   if (!remote.name.trim()) {
     ui.alert("Cannot connect remote with empty name");
     return;
   }
-  remote.connected = true;
-  saveLocalRemote();
+
+  let result = await backend.sendAction('remote-connect', {
+    remotename: remote.name,
+    functions: remote.functions,
+  });
+
+  if (result.error) {
+    ui.alert(result.error);
+  } else {
+    remote.connected = true;
+    // persist the chosen name
+    saveLocalRemote();
+  }
 }
 
-function disconnectLocalRemote(remote) {
+async function disconnectLocalRemote(remote) {
+  let result = await backend.sendAction('remote-disconnect', {
+    remotename: remote.name
+  });
+
+  if (result.error) {
+    ui.alert(result.error);
+  }
+  // always "shown" disconnected
   remote.connected = false;
-  saveLocalRemote();
 }
 
 function removeLocalRemote(remote) {