BIG BIG BIG BIG BIG UPDATES

Co-authored-by: Copilot <[email protected]>

frontend/src/App.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { onMounted, provide } from "vue";
+
+import AppHeader from "./components/AppHeader.vue";
+import LoginView from "./components/LoginView.vue";
+import ProxyList from "./components/ProxyList.vue";
+import ProxyWorkbench from "./components/ProxyWorkbench.vue";
+import {
+  controlPlaneKey,
+  useControlPlane,
+} from "./composables/useControlPlane";
+
+const plane = useControlPlane();
+provide(controlPlaneKey, plane);
+
+onMounted(() => {
+  if (plane.token) void plane.refreshAll();
+});
+</script>
+
+<template>
+  <LoginView
+    v-if="!plane.token"
+    v-model:username="plane.username"
+    v-model:password="plane.password"
+    :loading="plane.loading"
+    :error="plane.error"
+    @submit="plane.signIn"
+  />
+
+  <main v-else class="app-shell">
+    <AppHeader
+      :loading="plane.loading"
+      @refresh="plane.refreshAll"
+      @create="plane.newProxy"
+      @logout="plane.signOut"
+    />
+
+    <div class="app-body">
+      <ProxyList
+        :proxies="plane.proxies"
+        :selected-port="plane.selectedPort"
+        @select="plane.selectedPort = $event"
+      />
+
+      <ProxyWorkbench />
+    </div>
+  </main>
+</template>