P1: sidecar lifecycle and HTTP bridge

Backend
- sidecar.rs supervises the bundled `mycelium` binary launched via
  pkexec; locates it in resource_dir or CARGO_MANIFEST_DIR/binaries
  matching $TAURI_ENV_TARGET_TRIPLE
- ephemeral port via portpicker, key + config persisted in
  app_data_dir, kill_on_drop with explicit start_kill on stop
- health-check loop calls /api/v1/admin until 2xx (timeout 20s);
  emits sidecar://ready and sidecar://exited
- 500-line ring buffer of stdout/stderr surfaced via sidecar_logs
  command for the upcoming Settings page
- elevation::is_auth_failure(126|127) maps pkexec cancel to a
  dedicated AppError variant
- AppError uses thiserror, Serialize impl renders messages as
  plain strings for the JS side

Frontend
- typed `api` wrapper around invoke() in src/lib/api.ts
- node store (Pinia) bootstraps on mount, listens on
  sidecar://ready and sidecar://exited
- StartupOverlay covers the whole window for idle/starting/error
  phases; sidebar status dot + start/stop button
- Status view renders subnet, pubkey, api endpoint and key path
  with one-click clipboard copy

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onBeforeUnmount, onMounted } from "vue";
 import { RouterLink, RouterView, useRoute } from "vue-router";
 import {
   Activity,
@@ -8,9 +8,16 @@ import {
   MessageSquare,
   Hash,
   Settings as SettingsIcon,
+  Power,
+  PowerOff,
 } from "lucide-vue-next";
+import StartupOverlay from "@/components/StartupOverlay.vue";
+import { useNodeStore } from "@/stores/node";
+import { storeToRefs } from "pinia";
 
 const route = useRoute();
+const node = useNodeStore();
+const { phase, info, error } = storeToRefs(node);
 
 const navItems = [
   { to: "/status", label: "Status", icon: Activity },
@@ -22,15 +29,48 @@ const navItems = [
 ];
 
 const currentTitle = computed(() => (route.meta?.title as string) ?? "Mycellium");
+
+onMounted(() => {
+  node.bootstrap();
+});
+
+onBeforeUnmount(() => {
+  node.dispose();
+});
+
+async function handleStart() {
+  try {
+    await node.start();
+  } catch {
+    // error already in store
+  }
+}
+
+async function handleStop() {
+  await node.stop();
+}
 </script>
 
 <template>
-  <div class="flex h-screen w-screen overflow-hidden bg-background text-foreground">
-    <aside
-      class="flex w-56 shrink-0 flex-col border-r border-border bg-card"
-    >
+  <div
+    class="relative flex h-screen w-screen overflow-hidden bg-background text-foreground"
+  >
+    <aside class="flex w-56 shrink-0 flex-col border-r border-border bg-card">
       <div class="flex h-14 items-center px-4 border-b border-border">
         <span class="font-semibold text-base">Mycellium</span>
+        <span
+          class="ml-auto inline-block h-2 w-2 rounded-full"
+          :class="
+            phase === 'ready'
+              ? 'bg-emerald-500'
+              : phase === 'starting'
+              ? 'bg-yellow-500 animate-pulse'
+              : phase === 'error'
+              ? 'bg-destructive'
+              : 'bg-muted-foreground'
+          "
+          :title="phase"
+        />
       </div>
       <nav class="flex-1 overflow-y-auto px-2 py-3 space-y-1">
         <RouterLink
@@ -45,17 +85,49 @@ const currentTitle = computed(() => (route.meta?.title as string) ?? "Mycellium"
           <span>{{ item.label }}</span>
         </RouterLink>
       </nav>
+      <div
+        v-if="info"
+        class="border-t border-border px-3 py-3 text-xs space-y-1"
+      >
+        <div class="text-muted-foreground">Overlay subnet</div>
+        <div class="font-mono break-all">{{ info.nodeSubnet }}</div>
+        <button
+          class="mt-2 inline-flex w-full items-center justify-center gap-2 rounded-md border border-border px-2 py-1 text-xs hover:bg-secondary"
+          @click="handleStop"
+        >
+          <PowerOff class="h-3 w-3" />
+          Stop daemon
+        </button>
+      </div>
+      <div
+        v-else-if="phase === 'idle' || phase === 'error'"
+        class="border-t border-border px-3 py-3"
+      >
+        <button
+          class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-primary px-2 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90"
+          @click="handleStart"
+        >
+          <Power class="h-3 w-3" />
+          Start daemon
+        </button>
+      </div>
     </aside>
 
     <main class="flex flex-1 flex-col overflow-hidden">
-      <header
-        class="flex h-14 items-center border-b border-border px-6 shrink-0"
-      >
+      <header class="flex h-14 items-center border-b border-border px-6 shrink-0">
         <h1 class="text-lg font-semibold">{{ currentTitle }}</h1>
       </header>
       <div class="flex-1 overflow-y-auto p-6">
         <RouterView />
       </div>
     </main>
+
+    <StartupOverlay
+      v-if="phase !== 'ready' && phase !== 'idle'"
+      :phase="phase as 'starting' | 'error'"
+      :error="error"
+      @start="handleStart"
+      @retry="handleStart"
+    />
   </div>
 </template>

src/components/InfoCard.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { Copy, Check } from "lucide-vue-next";
+
+defineProps<{
+  label: string;
+  value: string;
+  copied?: boolean;
+}>();
+
+defineEmits<{ (e: "copy"): void }>();
+</script>
+
+<template>
+  <div
+    class="flex items-start justify-between gap-4 rounded-lg border border-border bg-card p-4"
+  >
+    <div class="min-w-0 flex-1">
+      <div class="text-xs uppercase tracking-wide text-muted-foreground">
+        {{ label }}
+      </div>
+      <div class="mt-1 break-all font-mono text-sm">{{ value }}</div>
+    </div>
+    <button
+      class="shrink-0 rounded-md border border-border p-2 hover:bg-secondary"
+      :title="copied ? 'Copied' : 'Copy'"
+      @click="$emit('copy')"
+    >
+      <Check v-if="copied" class="h-4 w-4 text-emerald-500" />
+      <Copy v-else class="h-4 w-4" />
+    </button>
+  </div>
+</template>

src/components/StartupOverlay.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { Loader2, ShieldAlert, Power } from "lucide-vue-next";
+import type { Phase } from "@/stores/node";
+
+defineProps<{
+  phase: Exclude<Phase, "ready">;
+  error?: string | null;
+}>();
+
+defineEmits<{
+  (e: "start"): void;
+  (e: "retry"): void;
+}>();
+</script>
+
+<template>
+  <div
+    class="absolute inset-0 z-50 flex items-center justify-center bg-background/95 backdrop-blur-sm"
+  >
+    <div class="w-full max-w-md rounded-lg border border-border bg-card p-8 shadow-lg">
+      <template v-if="phase === 'starting'">
+        <div class="flex flex-col items-center gap-4 text-center">
+          <Loader2 class="h-10 w-10 animate-spin text-primary" />
+          <div>
+            <h2 class="text-lg font-semibold">Starting Mycelium daemon…</h2>
+            <p class="mt-1 text-sm text-muted-foreground">
+              Authenticate in the polkit dialog to allow the daemon to create
+              the TUN interface.
+            </p>
+          </div>
+        </div>
+      </template>
+
+      <template v-else-if="phase === 'idle'">
+        <div class="flex flex-col items-center gap-4 text-center">
+          <Power class="h-10 w-10 text-primary" />
+          <div>
+            <h2 class="text-lg font-semibold">Daemon is offline</h2>
+            <p class="mt-1 text-sm text-muted-foreground">
+              Click below to start the Mycelium daemon. Root privileges are
+              required to create the TUN interface.
+            </p>
+          </div>
+          <button
+            class="rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
+            @click="$emit('start')"
+          >
+            Start daemon
+          </button>
+        </div>
+      </template>
+
+      <template v-else-if="phase === 'error'">
+        <div class="flex flex-col items-center gap-4 text-center">
+          <ShieldAlert class="h-10 w-10 text-destructive" />
+          <div>
+            <h2 class="text-lg font-semibold">Daemon failed to start</h2>
+            <p
+              class="mt-2 max-h-32 overflow-auto rounded bg-muted p-2 text-left font-mono text-xs"
+            >
+              {{ error || "unknown error" }}
+            </p>
+          </div>
+          <button
+            class="rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
+            @click="$emit('retry')"
+          >
+            Try again
+          </button>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>

src/lib/api.ts

@@ -0,0 +1,35 @@
+import { invoke } from "@tauri-apps/api/core";
+
+// ─── Types (mirror src-tauri Rust structs) ───────────────────────────────────
+
+export interface DaemonStatus {
+  running: boolean;
+  apiUrl: string | null;
+  keyPath: string | null;
+  configPath: string | null;
+}
+
+export interface NodeInfo {
+  nodeSubnet: string;
+  nodePubkey: string;
+}
+
+export interface SidecarConfig {
+  peers: string[];
+  tunName: string | null;
+  noTun: boolean;
+}
+
+// ─── Type-safe invoke wrappers ───────────────────────────────────────────────
+
+const cmd = <T>(name: string, args?: Record<string, unknown>) =>
+  invoke<T>(name, args);
+
+export const api = {
+  daemonStatus: () => cmd<DaemonStatus>("daemon_status"),
+  startDaemon: (config?: SidecarConfig) =>
+    cmd<DaemonStatus>("start_daemon", { config: config ?? null }),
+  stopDaemon: () => cmd<DaemonStatus>("stop_daemon"),
+  nodeInfo: () => cmd<NodeInfo>("node_info"),
+  sidecarLogs: () => cmd<string[]>("sidecar_logs"),
+};

src/lib/events.ts

@@ -0,0 +1,23 @@
+import { listen, type UnlistenFn, type EventCallback } from "@tauri-apps/api/event";
+
+/**
+ * Backend event names emitted from src-tauri/src/sidecar.rs.
+ * Keep this list in sync with `app.emit(...)` calls there.
+ */
+export const Events = {
+  SidecarReady: "sidecar://ready",
+  SidecarExited: "sidecar://exited",
+  PeersUpdated: "peers://updated",
+  StatsUpdated: "stats://updated",
+  RoutesUpdated: "routes://updated",
+  MessageIncoming: "messages://incoming",
+} as const;
+
+export type EventName = (typeof Events)[keyof typeof Events];
+
+export async function on<T>(
+  event: EventName,
+  handler: EventCallback<T>,
+): Promise<UnlistenFn> {
+  return listen<T>(event, handler);
+}

src/stores/node.ts

@@ -0,0 +1,100 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { api, type DaemonStatus, type NodeInfo } from "@/lib/api";
+import { Events, on } from "@/lib/events";
+
+export type Phase = "idle" | "starting" | "ready" | "error";
+
+export const useNodeStore = defineStore("node", () => {
+  const phase = ref<Phase>("idle");
+  const status = ref<DaemonStatus | null>(null);
+  const info = ref<NodeInfo | null>(null);
+  const error = ref<string | null>(null);
+
+  let exitedUnlisten: (() => void) | null = null;
+  let readyUnlisten: (() => void) | null = null;
+
+  async function bootstrap() {
+    if (!exitedUnlisten) {
+      exitedUnlisten = await on<number>(Events.SidecarExited, (e) => {
+        error.value = `daemon exited (code ${e.payload})`;
+        phase.value = "error";
+        status.value = { running: false, apiUrl: null, keyPath: null, configPath: null };
+        info.value = null;
+      });
+    }
+    if (!readyUnlisten) {
+      readyUnlisten = await on<string>(Events.SidecarReady, async () => {
+        await refresh();
+      });
+    }
+
+    const cur = await api.daemonStatus();
+    status.value = cur;
+    if (cur.running) {
+      phase.value = "ready";
+      try {
+        info.value = await api.nodeInfo();
+      } catch (e) {
+        error.value = String(e);
+      }
+    }
+  }
+
+  async function start() {
+    phase.value = "starting";
+    error.value = null;
+    try {
+      const s = await api.startDaemon();
+      status.value = s;
+      info.value = await api.nodeInfo();
+      phase.value = "ready";
+    } catch (e) {
+      error.value = String(e);
+      phase.value = "error";
+      throw e;
+    }
+  }
+
+  async function stop() {
+    try {
+      const s = await api.stopDaemon();
+      status.value = s;
+      info.value = null;
+      phase.value = "idle";
+    } catch (e) {
+      error.value = String(e);
+      throw e;
+    }
+  }
+
+  async function refresh() {
+    status.value = await api.daemonStatus();
+    if (status.value.running) {
+      info.value = await api.nodeInfo();
+      phase.value = "ready";
+    } else {
+      info.value = null;
+      phase.value = "idle";
+    }
+  }
+
+  function dispose() {
+    exitedUnlisten?.();
+    readyUnlisten?.();
+    exitedUnlisten = null;
+    readyUnlisten = null;
+  }
+
+  return {
+    phase,
+    status,
+    info,
+    error,
+    bootstrap,
+    start,
+    stop,
+    refresh,
+    dispose,
+  };
+});

src/views/Status.vue

@@ -1,9 +1,57 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+import { storeToRefs } from "pinia";
+import { useNodeStore } from "@/stores/node";
+import InfoCard from "@/components/InfoCard.vue";
+
+const node = useNodeStore();
+const { info, status } = storeToRefs(node);
+
+const copiedField = ref<string | null>(null);
+async function copy(field: string, value: string) {
+  try {
+    await navigator.clipboard.writeText(value);
+    copiedField.value = field;
+    setTimeout(() => {
+      if (copiedField.value === field) copiedField.value = null;
+    }, 1200);
+  } catch {
+    /* clipboard unavailable */
+  }
+}
+</script>
 
 <template>
-  <div class="space-y-4">
-    <p class="text-sm text-muted-foreground">
-      Daemon status will appear here once the sidecar is wired up (P1).
-    </p>
+  <div v-if="info" class="max-w-3xl space-y-4">
+    <InfoCard
+      label="Overlay subnet"
+      :value="info.nodeSubnet"
+      :copied="copiedField === 'subnet'"
+      @copy="copy('subnet', info.nodeSubnet)"
+    />
+    <InfoCard
+      label="Public key"
+      :value="info.nodePubkey"
+      :copied="copiedField === 'pk'"
+      @copy="copy('pk', info.nodePubkey)"
+    />
+    <InfoCard
+      v-if="status?.apiUrl"
+      label="API endpoint"
+      :value="status.apiUrl"
+      :copied="copiedField === 'api'"
+      @copy="copy('api', status.apiUrl!)"
+    />
+    <InfoCard
+      v-if="status?.keyPath"
+      label="Identity file"
+      :value="status.keyPath"
+      :copied="copiedField === 'kp'"
+      @copy="copy('kp', status.keyPath!)"
+    />
   </div>
+
+  <p v-else class="text-sm text-muted-foreground">
+    The daemon is not running. Start it from the sidebar.
+  </p>
 </template>