feat(frontend): remotes skeleton

backend/src/server.py

@@ -48,7 +48,10 @@ async def start_server(app, shutdown_event):
 
     # These paths must match the routes in the frontend SPA
     # file: frontend/src/routes/index.js
+    @server.route('/user')
     @server.route('/models')
+    @server.route('/remotes')
+    @server.route('/runs')
     @server.route('/chat')
     @server.route('/agent')
     @server.route('/chat/<path:subpath>')

frontend/src/components/main/Sidebar.vue

@@ -116,6 +116,7 @@
     <nav v-if="mode=='settings'">
       <RouterLink to="/user" class="nav-item">User</RouterLink>
       <RouterLink to="/models" class="nav-item">Manage Models</RouterLink>
+      <RouterLink to="/remotes" class="nav-item">Remotes</RouterLink>
       <RouterLink to="/runs" class="nav-item">Agent Runs</RouterLink>
     </nav>
   </aside>

frontend/src/router/index.js

@@ -56,6 +56,11 @@ const router = createRouter({
       path: `/runs`,
       component: () => import('../views/RunsView.vue')
     },
+    {
+      name: 'remotes',
+      path: `/remotes`,
+      component: () => import('../views/Remotes.vue')
+    },
     objectView('chat', () => import('../views/Chat.vue')),
     objectView('agent', () => import('../views/Agent.vue')),
     staticView('user', () => import('../views/User.vue')),

frontend/src/views/Remotes.vue

@@ -0,0 +1,121 @@
+<script setup>
+import TitleBar from '../components/TitleBar.vue';
+import { ref } from 'vue';
+
+const localRemoteList = ref([]);
+
+const STORAGE_KEY = 'local_remotes';
+
+function loadLocalRemoteList() {
+  let data = [];
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      if (Array.isArray(parsed)) data = parsed;
+    }
+  } catch (e) {
+    // ignore corrupt storage
+  }
+  // Force disconnect all on startup
+  data.forEach(r => r.connected = false);
+  localRemoteList.value = data;
+}
+
+function createLocalRemote() {
+  localRemoteList.value.push({ name: '', connected: false });
+}
+
+function saveLocalRemote() {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(localRemoteList.value));
+}
+
+function connectLocalRemote(remote) {
+  if (!remote.name.trim()) {
+    ui.alert("Cannot connect remote with empty name");
+    return;
+  }
+  remote.connected = true;
+  saveLocalRemote();
+}
+
+function disconnectLocalRemote(remote) {
+  remote.connected = false;
+  saveLocalRemote();
+}
+
+function removeLocalRemote(remote) {
+  if (remote.connected) {
+    disconnectLocalRemote(remote);
+  }
+  const index = localRemoteList.value.indexOf(remote);
+  if (index > -1) {
+    localRemoteList.value.splice(index, 1);
+  }
+  saveLocalRemote();
+}
+
+loadLocalRemoteList();
+</script>
+
+<template>
+  <main>
+    <TitleBar>
+      <h1>Remotes</h1>
+    </TitleBar>
+    <div class="remote-list">
+      <div v-for="(remote, index) in localRemoteList" :key="index" class="remote-entry">
+        <div v-if="remote.connected" class="view-mode">
+          <span class="status-text">Connected as: {{ remote.name }}</span>
+          <button class="btn btn-secondary" @click="disconnectLocalRemote(remote)">Disconnect</button>
+        </div>
+        <div v-else class="view-mode">
+          <input 
+            type="text" 
+            v-model="remote.name" 
+            placeholder="Enter remote name..." 
+            class="input-field"
+          />
+          <button class="btn btn-primary" @click="connectLocalRemote(remote)">Connect</button>
+        </div>
+        <button class="btn btn-danger" @click="removeLocalRemote(remote)">Delete</button>
+      </div>
+    </div>
+    <button class="btn btn-primary" @click="createLocalRemote">+ Create Local Remote</button>
+  </main>
+</template>
+
+<style scoped>
+.remote-list {
+  margin-top: 1rem;
+}
+
+.remote-entry {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  margin-bottom: 1rem;
+  background-color: var(--color-background-soft);
+}
+
+.view-mode {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-grow: 1;
+}
+
+.status-text {
+  font-weight: bold;
+}
+
+.input-field {
+  flex-grow: 1;
+  padding: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+}
+</style>