Initial boilerplate scaffold for continuum-app

apps/web/app.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { useTelemetryStore } from "~/stores/telemetry";
+
+const telemetry = useTelemetryStore();
+const user = useSupabaseUser();
+
+onMounted(() => {
+  telemetry.connect();
+});
+
+onBeforeUnmount(() => {
+  telemetry.disconnect();
+});
+</script>
+
+<template>
+  <div class="app-shell">
+    <header class="app-shell__header">
+      <span class="app-shell__brand">Continuum</span>
+      <span class="app-shell__status" :class="telemetry.connected ? 'is-online' : 'is-offline'">
+        {{ telemetry.connected ? "Live" : "Reconnecting…" }}
+      </span>
+      <span v-if="user" class="app-shell__user">{{ user.email }}</span>
+    </header>
+    <main class="app-shell__main">
+      <NuxtPage />
+    </main>
+  </div>
+</template>
+
+<style>
+:root {
+  color-scheme: dark;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+body {
+  margin: 0;
+  background: #0b0d12;
+  color: #e6e8ec;
+}
+
+.app-shell__header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid #1f232c;
+}
+
+.app-shell__brand {
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.app-shell__status.is-online {
+  color: #35d07f;
+}
+
+.app-shell__status.is-offline {
+  color: #f2a33c;
+}
+
+.app-shell__user {
+  margin-left: auto;
+  opacity: 0.7;
+  font-size: 0.875rem;
+}
+
+.app-shell__main {
+  padding: 1.25rem;
+}
+</style>