@nwire/studio 0.12.0 → 0.13.0

package/src/pages/Home.vue

@@ -1,599 +1,314 @@
 <script setup lang="ts">
 /**
- * Home — the operational dashboard.
+ * Home — the discovery dashboard. The page you open Studio to: which projects
+ * are around, which are running, and what's happening in the one you're on.
  *
- * This is the page someone actually opens Studio for: "what just broke?",
- * "is anything on fire right now?", "what's hot?". It's a thin orchestrator
- * over three data sources:
+ * Native data only:
+ *   - `useDiscovery` → the discovered-projects grid (catalog + live health poll)
+ *   - `useProject`   → the active project + a no-reload switch
+ *   - `useManifest`  → the active project's composition (quick-stats strip)
+ *   - `useTelemetry` → the active project's recent activity + error count
  *
- *   1. Recent failures   — telemetry stream + /_nwire/telemetry/recent
- *   2. Live metrics      — derived from events + telemetry over a 60s window
- *   3. Composition+boot  — manifest (useCache) + lifecycle records
- *
- * When the wire isn't running (proxy 502 / SSE error), the live panels mark
- * themselves "no live data" and the composition panel still renders from the
- * static manifest.
+ * Every panel degrades on its own: a project whose manifest isn't generated yet
+ * shows pending stats, an unreachable project still lists, and the wire being
+ * down just empties the activity feed.
  */
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed } from "vue";
 import { useRouter } from "vue-router";
+import { RouterLink } from "vue-router";
+import { Home as HomeIcon, FolderSearch, Activity, Map, Radio, Inbox } from "lucide-vue-next";
+import { PageHeader, EmptyState, KpiTile, StatusBadge, KindBadge } from "@/components";
+import { useDiscovery } from "@/composables/useDiscovery";
+import { useProject } from "@/composables/useProject";
+import { useManifest } from "@/composables/useManifest";
+import { useTelemetry } from "@/composables/useTelemetry";
+import { kindColor, recordColorKey } from "@/lib/kind-colors";
+import { projectSlug } from "@/lib/project-catalog";
 import {
-  Home as HomeIcon,
-  AlertTriangle,
-  Activity,
-  Boxes,
-  Flame,
-  CheckCircle2,
-  WifiOff,
-  Cigarette,
-} from "lucide-vue-next";
-import { useCache } from "@/lib/cache";
-import { PageHeader, EmptyState } from "@/components";
-
-// ── Telemetry record subset we care about ─────────────────────────────
-interface BaseRecord {
-  readonly kind: string;
-  readonly appName?: string;
-  readonly ts: string;
-}
-interface FailureRecord extends BaseRecord {
-  readonly kind: "action.failed" | "dlq.recorded" | "reaction.failed";
-  readonly action?: string;
-  readonly sourceEvent?: string;
-  readonly error?: { message?: string };
-  readonly envelope?: { correlationId?: string };
-}
-interface ActionDispatched extends BaseRecord {
-  readonly kind: "action.dispatched";
-  readonly action: string;
-  readonly envelope?: { correlationId?: string };
-}
-interface ActionFailed extends BaseRecord {
-  readonly kind: "action.failed";
-  readonly action: string;
-  readonly envelope?: { correlationId?: string };
-}
-interface HookStep extends BaseRecord {
-  readonly kind: "hook.step";
-  readonly hookName: string;
-  readonly phase: "start" | "end" | "error";
-}
-interface LifecycleRecord extends BaseRecord {
-  readonly kind: "lifecycle";
-  readonly event: string;
-  readonly payload: { pluginName?: string; durationMs?: number; kind?: "plugin" | "module" };
-}
-
-type TelemetryLike =
-  | FailureRecord
-  | ActionDispatched
-  | ActionFailed
-  | HookStep
-  | LifecycleRecord
-  | BaseRecord;
+  sortProjects,
+  projectHealth,
+  healthBadge,
+  healthLabel,
+  projectPort,
+  projectStats,
+  statsArePending,
+  quickStats,
+  countErrors,
+  recentActivity,
+  type ProjectStats,
+} from "@/lib/home";
 
 const router = useRouter();
-const { cache } = useCache();
-
-// ── Live data buffers ─────────────────────────────────────────────────
-const failures = ref<FailureRecord[]>([]);
-const dispatched = ref<ActionDispatched[]>([]);
-const actionFailed = ref<ActionFailed[]>([]);
-const hookSteps = ref<HookStep[]>([]);
-const lifecycle = ref<LifecycleRecord[]>([]);
-
-const telemetryStatus = ref<"connecting" | "open" | "closed" | "error">("connecting");
-const recentLoaded = ref(false);
-const recentFailed = ref(false);
-
-let es: EventSource | null = null;
-
-// Re-render metrics each second so the rolling window slides smoothly.
-const now = ref(Date.now());
-let nowTimer: ReturnType<typeof setInterval> | null = null;
-
-onMounted(() => {
-  connect();
-  void loadRecent();
-  nowTimer = setInterval(() => {
-    now.value = Date.now();
-  }, 1000);
-});
-
-onUnmounted(() => {
-  es?.close();
-  if (nowTimer) clearInterval(nowTimer);
-});
-
-function connect(): void {
-  telemetryStatus.value = "connecting";
-  es?.close();
-  es = new EventSource("/_nwire/telemetry/stream");
-  es.onopen = () => {
-    telemetryStatus.value = "open";
-  };
-  es.onerror = () => {
-    telemetryStatus.value = "error";
-  };
-  es.onmessage = (m) => {
-    try {
-      const rec = JSON.parse(m.data) as TelemetryLike;
-      ingest(rec);
-    } catch {
-      /* ignore non-JSON */
-    }
-  };
-}
-
-async function loadRecent(): Promise<void> {
-  try {
-    const res = await fetch("/_nwire/telemetry/recent?limit=500");
-    if (!res.ok) {
-      recentFailed.value = true;
-      return;
-    }
-    const rows = (await res.json()) as TelemetryLike[];
-    for (const r of rows) ingest(r);
-    recentLoaded.value = true;
-  } catch {
-    recentFailed.value = true;
-  }
-}
-
-function ingest(rec: TelemetryLike): void {
-  switch (rec.kind) {
-    case "action.failed":
-    case "dlq.recorded":
-    case "reaction.failed":
-      failures.value.unshift(rec as FailureRecord);
-      if (failures.value.length > 200) failures.value.length = 200;
-      if (rec.kind === "action.failed") {
-        actionFailed.value.push(rec as ActionFailed);
-        if (actionFailed.value.length > 2000) actionFailed.value.splice(0, 500);
-      }
-      break;
-    case "action.dispatched":
-      dispatched.value.push(rec as ActionDispatched);
-      if (dispatched.value.length > 2000) dispatched.value.splice(0, 500);
-      break;
-    case "hook.step":
-      hookSteps.value.push(rec as HookStep);
-      if (hookSteps.value.length > 2000) hookSteps.value.splice(0, 500);
-      break;
-    case "lifecycle":
-      lifecycle.value.push(rec as LifecycleRecord);
-      if (lifecycle.value.length > 500) lifecycle.value.splice(0, 100);
-      break;
-  }
-}
 
-// ── Section 1: recent failures (last 10) ──────────────────────────────
-const recentFailures = computed(() => failures.value.slice(0, 10));
-
-function failureLabel(f: FailureRecord): string {
-  return f.action ?? f.sourceEvent ?? f.kind;
-}
-function failureError(f: FailureRecord): string {
-  const m = f.error?.message ?? "";
-  return m.length > 80 ? `${m.slice(0, 80)}…` : m;
-}
-function openTrace(f: FailureRecord): void {
-  const id = f.envelope?.correlationId;
-  if (!id) return;
-  void router.push({ path: "/trace", query: { correlationId: id } });
+const { projects, runningCount, isLoading, isError, refetch } = useDiscovery();
+const { activeCwd, activeName, switchTo } = useProject();
+const { view } = useManifest(activeCwd);
+const { records } = useTelemetry(activeCwd, { limit: 500 });
+
+// ── Discovered projects grid ──────────────────────────────────────────
+const sorted = computed(() => sortProjects(projects.value));
+
+// ── Active project quick stats ────────────────────────────────────────
+const errorCount = computed(() => countErrors(records.value));
+const stats = computed(() => quickStats(view.value, errorCount.value));
+
+// ── Recent activity ───────────────────────────────────────────────────
+const activity = computed(() => recentActivity(records.value, 8));
+
+const statRows: ReadonlyArray<readonly [keyof ProjectStats, string]> = [
+  ["apps", "apps"],
+  ["plugins", "plugins"],
+  ["actions", "actions"],
+  ["events", "events"],
+  ["resolvers", "resolvers"],
+  ["workflows", "workflows"],
+];
+
+/** Switch the active project (no reload) then jump into one of its pages. */
+function jumpInto(cwd: string, page: "map" | "operate" | "streams"): void {
+  if (cwd !== activeCwd.value) switchTo(cwd);
+  const slug = projectSlug({ cwd, name: nameFor(cwd) });
+  void router.push(`/projects/${slug}/${page}`);
 }
 
-// ── Section 2: live metrics (rolling 60s) ─────────────────────────────
-const WINDOW_MS = 60_000;
-
-function inWindow(rec: { ts: string }): boolean {
-  return now.value - new Date(rec.ts).getTime() <= WINDOW_MS;
+function nameFor(cwd: string): string {
+  return projects.value.find((p) => p.cwd === cwd)?.snapshot.name ?? cwd;
 }
 
-const reqPerSec = computed(() => {
-  const n = dispatched.value.filter(inWindow).length;
-  return (n / 60).toFixed(2);
-});
-
-const errorRate = computed(() => {
-  const recentDispatched = dispatched.value.filter(inWindow);
-  if (recentDispatched.length === 0) return "0.0";
-  const failedCorr = new Set(
-    actionFailed.value
-      .filter(inWindow)
-      .map((f) => f.envelope?.correlationId)
-      .filter((x): x is string => !!x),
-  );
-  let bad = 0;
-  for (const d of recentDispatched) {
-    const id = d.envelope?.correlationId;
-    if (id && failedCorr.has(id)) bad++;
-  }
-  return ((bad / recentDispatched.length) * 100).toFixed(1);
-});
-
-const hottestHooks = computed(() => {
-  const counts = new Map<string, number>();
-  for (const s of hookSteps.value) {
-    if (s.phase !== "end") continue;
-    if (!inWindow(s)) continue;
-    counts.set(s.hookName, (counts.get(s.hookName) ?? 0) + 1);
-  }
-  return [...counts.entries()]
-    .sort((a, b) => b[1] - a[1])
-    .slice(0, 3)
-    .map(([name, count]) => ({ name, count }));
-});
-
-const hasLiveData = computed(() => telemetryStatus.value === "open" || recentLoaded.value);
-
-// ── Section 3: composition + boot phases ──────────────────────────────
-const pluginsBootedRecords = computed(() =>
-  lifecycle.value.filter((l) => l.event === "nwire.plugin.booted"),
-);
-
-const bootSummary = computed(() => {
-  const recs = pluginsBootedRecords.value;
-  if (recs.length === 0) return null;
-  let plugins = 0;
-  let totalMs = 0;
-  for (const r of recs) {
-    totalMs += r.payload.durationMs ?? 0;
-    plugins++;
-  }
-  return { total: recs.length, plugins, totalMs };
-});
-
-const compositionStats = computed(() => {
-  if (!cache.value) return null;
-  return {
-    apps: cache.value.apps.length,
-    plugins: cache.value.plugins.length,
-    actions: cache.value.actions.length,
-    events: cache.value.events.length,
-    sinks: cache.value.sinks?.length ?? 0,
-  };
-});
-
-function openPluginHook(name: string): void {
-  void router.push({ path: "/hooks", query: { name: `plugin.boot:${name}` } });
-}
-
-function shortTime(ts: string): string {
+function shortTime(ts?: string): string {
+  if (!ts) return "";
   return new Date(ts).toLocaleTimeString(undefined, { hour12: false });
 }
 
-// ─── Smoke ────────────────────────────────────────────────────────────
-//
-// Generate sample dispatches against the live wire so the Stream, Trace,
-// Home metrics, and Run logs panels actually have something to render
-// the first time a user opens Studio. We walk the action manifest, build
-// a best-effort payload from each action's inputSchema (filling required
-// fields with type-appropriate defaults), and POST `/_nwire/dispatch` for
-// each one a few times.
-//
-// All work is fire-and-forget — failures count as "smoke" too (they show
-// up on the failures panel). The button only renders when the cache has
-// actions and the live wire seems reachable.
-
-const smokeBusy = ref(false);
-const smokeError = ref<string | null>(null);
-const smokeResult = ref<{ fired: number; failed: number } | null>(null);
-
-function sampleFromSchema(schema: unknown): unknown {
-  if (!schema || typeof schema !== "object") return {};
-  const s = schema as {
-    type?: string;
-    properties?: Record<string, unknown>;
-    required?: string[];
-    enum?: unknown[];
-  };
-  if (s.enum && Array.isArray(s.enum) && s.enum.length > 0) return s.enum[0];
-  switch (s.type) {
-    case "string":
-      return "sample";
-    case "number":
-      return 1;
-    case "boolean":
-      return true;
-    case "array":
-      return [];
-    case "object": {
-      const out: Record<string, unknown> = {};
-      const props = s.properties ?? {};
-      const required = new Set(s.required ?? []);
-      for (const [key, raw] of Object.entries(props)) {
-        // Always include required; otherwise skip — best-effort.
-        if (required.has(key)) out[key] = sampleFromSchema(raw);
-      }
-      return out;
-    }
-    default:
-      return null;
-  }
-}
-
-async function runSmoke(): Promise<void> {
-  if (!cache.value) return;
-  smokeBusy.value = true;
-  smokeError.value = null;
-  smokeResult.value = null;
-  let fired = 0;
-  let failed = 0;
-  try {
-    const actions = cache.value.actions;
-    if (actions.length === 0) {
-      smokeError.value = "No actions in the manifest — nothing to dispatch.";
-      return;
-    }
-    // Fire each action once with sample input; for the first one fire
-    // twice so there's at least one repeat in the stream.
-    for (let i = 0; i < actions.length; i++) {
-      const a = actions[i]!;
-      const input = sampleFromSchema(a.inputSchema);
-      const repeats = i === 0 ? 2 : 1;
-      for (let r = 0; r < repeats; r++) {
-        try {
-          const res = await fetch("/_nwire/dispatch", {
-            method: "POST",
-            headers: { "content-type": "application/json" },
-            body: JSON.stringify({ handler: a.name, input }),
-          });
-          if (res.ok) fired++;
-          else failed++;
-        } catch {
-          failed++;
-        }
-      }
-    }
-    smokeResult.value = { fired, failed };
-  } catch (err) {
-    smokeError.value = (err as Error).message;
-  } finally {
-    smokeBusy.value = false;
+function openActivity(correlationId?: string): void {
+  if (!correlationId) {
+    void router.push("/streams");
+    return;
   }
+  void router.push({ path: "/trace", query: { correlationId } });
 }
 </script>
 
 <template>
-  <div class="p-6 space-y-6" data-testid="home-page">
-    <div class="flex items-start justify-between gap-6">
+  <div class="h-full overflow-auto" data-testid="home-page">
+    <div class="max-w-6xl mx-auto px-6 py-6 space-y-8">
       <PageHeader
         title="Home"
         :icon="HomeIcon"
         icon-color="text-emerald-400"
         :subtitle="
-          hasLiveData
-            ? 'Live system snapshot — failures, throughput, and what got booted'
-            : 'Wire not reporting — showing static composition only'
+          activeName
+            ? `Discovery dashboard — ${runningCount} running · active: ${activeName}`
+            : 'Discovery dashboard — discovered projects and live activity'
         "
       />
-      <div class="flex flex-col items-end gap-1.5 pt-1" data-testid="home-smoke">
-        <button
-          type="button"
-          class="inline-flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-900 hover:bg-zinc-800 px-3 py-1.5 text-xs font-medium text-zinc-200 transition-colors disabled:opacity-50"
-          :disabled="smokeBusy || !cache || cache.actions.length === 0"
-          :title="
-            !cache || cache.actions.length === 0
-              ? 'No actions in the manifest yet.'
-              : 'Fire a sample dispatch against every action so the live panels populate.'
-          "
-          @click="runSmoke"
-        >
-          <Cigarette class="w-3.5 h-3.5 text-amber-400" />
-          {{ smokeBusy ? "Smoking…" : "Smoke" }}
-        </button>
-        <div v-if="smokeResult" class="text-[10px] text-zinc-500 tabular-nums">
-          fired {{ smokeResult.fired }} · failed {{ smokeResult.failed }}
-        </div>
-        <div v-if="smokeError" class="text-[10px] text-rose-300 max-w-[200px] text-right">
-          {{ smokeError }}
-        </div>
-      </div>
-    </div>
-
-    <!-- Section 1: Recent failures ─────────────────────────────────── -->
-    <section data-testid="home-failures">
-      <div class="flex items-center justify-between mb-2">
-        <h2
-          class="text-sm font-medium text-zinc-300 uppercase tracking-wide flex items-center gap-2"
-        >
-          <AlertTriangle class="w-4 h-4 text-rose-400" />
-          Recent failures
-        </h2>
-        <span class="text-[10px] text-zinc-500 tabular-nums">
-          {{ recentFailures.length }} shown · {{ failures.length }} total
-        </span>
-      </div>
 
-      <div
-        v-if="!hasLiveData && recentFailed"
-        class="rounded border border-zinc-800 bg-zinc-900/40 px-4 py-6 text-sm text-zinc-500 flex items-center gap-2"
-        data-testid="home-failures-no-live"
-      >
-        <WifiOff class="w-4 h-4" /> No live data — the wire isn't reporting.
-      </div>
-      <div
-        v-else-if="recentFailures.length === 0"
-        class="rounded border border-zinc-800 bg-zinc-900/40 px-4 py-6 text-sm text-zinc-400 flex items-center gap-2"
-        data-testid="home-failures-empty"
-      >
-        <CheckCircle2 class="w-4 h-4 text-emerald-400" />
-        No failures in the last 10 minutes
-      </div>
-      <ul v-else class="rounded border border-zinc-800 divide-y divide-zinc-900">
-        <li
-          v-for="(f, i) in recentFailures"
-          :key="`${f.ts}-${i}`"
-          class="px-4 py-2 flex items-center gap-3 hover:bg-zinc-900/40 font-mono text-xs"
-          data-testid="home-failure-row"
-        >
-          <span class="text-zinc-600 tabular-nums w-20 shrink-0">
-            {{ shortTime(f.ts) }}
-          </span>
-          <span
-            class="text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded shrink-0"
-            :class="{
-              'bg-rose-950/40 text-rose-300': f.kind === 'action.failed',
-              'bg-orange-950/40 text-orange-300': f.kind === 'dlq.recorded',
-              'bg-amber-950/40 text-amber-300': f.kind === 'reaction.failed',
-            }"
-            >{{ f.kind.replace(/\..*$/, "") }}</span
-          >
-          <span class="text-zinc-100 truncate flex-1">{{ failureLabel(f) }}</span>
-          <span class="text-red-400 truncate max-w-[40%]">{{ failureError(f) }}</span>
-          <button
-            v-if="f.envelope?.correlationId"
-            type="button"
-            class="text-xs text-emerald-400 hover:text-emerald-300 shrink-0"
-            @click="openTrace(f)"
+      <!-- Discovered projects ───────────────────────────────────────── -->
+      <section data-testid="home-projects">
+        <div class="flex items-center justify-between mb-3">
+          <h2
+            class="text-sm font-medium text-zinc-300 uppercase tracking-wide flex items-center gap-2"
           >
-            → trace
-          </button>
-        </li>
-      </ul>
-    </section>
-
-    <!-- Section 2: Live metrics ────────────────────────────────────── -->
-    <section data-testid="home-metrics">
-      <div class="flex items-center justify-between mb-2">
-        <h2
-          class="text-sm font-medium text-zinc-300 uppercase tracking-wide flex items-center gap-2"
-        >
-          <Activity class="w-4 h-4 text-emerald-400" />
-          Live metrics
-          <span class="text-[10px] text-zinc-500 normal-case tracking-normal">(rolling 60s)</span>
-        </h2>
-        <span
-          class="text-[9px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-zinc-900 text-zinc-400"
-          data-testid="home-metrics-status"
-        >
-          stream {{ telemetryStatus }}
-        </span>
-      </div>
+            <FolderSearch class="w-4 h-4 text-emerald-400" />
+            Discovered projects
+            <span class="text-[10px] text-zinc-500 normal-case tracking-normal tabular-nums">
+              {{ sorted.length }} known · {{ runningCount }} running
+            </span>
+          </h2>
+          <div class="flex items-center gap-2">
+            <RouterLink
+              to="/projects"
+              class="text-xs text-zinc-500 hover:text-zinc-200 px-2 py-1 rounded border border-zinc-800 hover:border-zinc-700"
+              data-testid="home-all-projects"
+            >
+              All projects →
+            </RouterLink>
+            <button
+              class="text-xs text-zinc-500 hover:text-zinc-200 px-2 py-1 rounded border border-zinc-800 hover:border-zinc-700"
+              data-testid="home-refresh"
+              @click="refetch()"
+            >
+              Refresh
+            </button>
+          </div>
+        </div>
 
-      <div
-        v-if="!hasLiveData"
-        class="rounded border border-zinc-800 bg-zinc-900/40 px-4 py-6 text-sm text-zinc-500 flex items-center gap-2"
-        data-testid="home-metrics-no-live"
-      >
-        <WifiOff class="w-4 h-4" /> No live data — start the wire and metrics will flow here.
-      </div>
-      <div v-else class="grid grid-cols-1 md:grid-cols-3 gap-3">
         <div
-          class="rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-3"
-          data-testid="home-metric-rps"
+          v-if="isLoading && sorted.length === 0"
+          class="rounded border border-zinc-800 bg-zinc-900/40 px-4 py-8 text-sm text-zinc-500"
+          data-testid="home-projects-loading"
         >
-          <div class="text-[11px] uppercase tracking-wide text-zinc-500">req/s</div>
-          <div class="text-2xl font-semibold tabular-nums mt-1">{{ reqPerSec }}</div>
-          <div class="text-[10px] text-zinc-500 mt-1">actions dispatched ÷ 60</div>
+          Discovering projects…
         </div>
+
         <div
-          class="rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-3"
-          data-testid="home-metric-error-rate"
+          v-else-if="isError && sorted.length === 0"
+          class="rounded border border-rose-900/60 bg-rose-950/20 px-4 py-6 text-sm text-rose-300"
+          data-testid="home-projects-error"
         >
-          <div class="text-[11px] uppercase tracking-wide text-zinc-500">error rate</div>
-          <div
-            class="text-2xl font-semibold tabular-nums mt-1"
-            :class="Number(errorRate) > 0 ? 'text-rose-300' : 'text-emerald-300'"
-          >
-            {{ errorRate }}%
-          </div>
-          <div class="text-[10px] text-zinc-500 mt-1">dispatched → failed by correlationId</div>
+          Couldn't reach the discovery endpoint.
+          <button class="underline ml-1 hover:text-rose-200" @click="refetch()">Retry</button>
         </div>
-        <div
-          class="rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-3"
-          data-testid="home-metric-hot-hooks"
-        >
-          <div class="text-[11px] uppercase tracking-wide text-zinc-500 flex items-center gap-1">
-            <Flame class="w-3 h-3 text-amber-400" /> hottest hooks
-          </div>
-          <ul v-if="hottestHooks.length > 0" class="mt-1 space-y-0.5">
-            <li
-              v-for="h in hottestHooks"
-              :key="h.name"
-              class="flex items-center justify-between font-mono text-xs"
+
+        <EmptyState
+          v-else-if="sorted.length === 0"
+          :icon="FolderSearch"
+          title="No projects discovered yet"
+          hint="Start one with `nwire dev` — it registers itself and shows up here."
+          data-testid="home-projects-empty"
+        />
+
+        <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-3" data-testid="home-projects-grid">
+          <article
+            v-for="p in sorted"
+            :key="p.cwd"
+            class="border rounded-lg p-4 bg-zinc-950/40 transition-colors"
+            :class="p.active ? 'border-emerald-800/70' : 'border-zinc-800 hover:border-zinc-700'"
+            data-testid="home-project-card"
+            :data-cwd="p.cwd"
+          >
+            <div class="flex items-start justify-between gap-3">
+              <div class="min-w-0">
+                <div class="flex items-center gap-2">
+                  <h3
+                    class="font-semibold text-sm tracking-tight truncate"
+                    data-testid="home-project-name"
+                  >
+                    {{ p.snapshot.name }}
+                  </h3>
+                  <span
+                    v-if="p.active"
+                    class="text-[10px] uppercase tracking-wider text-emerald-400 px-1.5 py-0.5 rounded bg-emerald-950/40 border border-emerald-900"
+                  >
+                    active
+                  </span>
+                </div>
+                <div class="text-[11px] font-mono text-zinc-600 mt-0.5 truncate" :title="p.cwd">
+                  {{ p.cwd }}
+                </div>
+              </div>
+              <StatusBadge
+                :status="healthBadge(projectHealth(p))"
+                :pulse="projectHealth(p) === 'running'"
+                :label="
+                  projectHealth(p) === 'running' && projectPort(p)
+                    ? `Running :${projectPort(p)}`
+                    : healthLabel(projectHealth(p))
+                "
+                data-testid="home-project-health"
+              />
+            </div>
+
+            <!-- Quick stats from the project's snapshot -->
+            <div
+              v-if="statsArePending(p)"
+              class="mt-4 text-[11px] text-zinc-600"
+              data-testid="home-project-stats-pending"
             >
-              <span class="truncate">{{ h.name }}</span>
-              <span class="text-zinc-500 tabular-nums">{{ h.count }}</span>
-            </li>
-          </ul>
-          <div v-else class="text-[11px] text-zinc-500 mt-2">No hook activity in window.</div>
+              No composition yet — open it or run `nwire cache`.
+            </div>
+            <dl
+              v-else
+              class="grid grid-cols-3 gap-y-2 gap-x-3 mt-4"
+              data-testid="home-project-stats"
+            >
+              <div v-for="[key, label] in statRows" :key="key">
+                <dt class="text-zinc-600 text-[10px] uppercase tracking-wide">{{ label }}</dt>
+                <dd
+                  class="text-sm tabular-nums"
+                  :style="{ color: kindColor(key.replace(/s$/, '')) }"
+                >
+                  {{ projectStats(p)[key] }}
+                </dd>
+              </div>
+            </dl>
+
+            <!-- Jump-in actions -->
+            <div class="flex items-center gap-2 mt-4 pt-3 border-t border-zinc-900">
+              <button
+                class="text-[11px] text-zinc-300 hover:text-zinc-100 flex items-center gap-1.5 px-2 py-1 rounded border border-zinc-800 hover:border-zinc-700"
+                data-testid="home-jump-map"
+                @click="jumpInto(p.cwd, 'map')"
+              >
+                <Map class="w-3 h-3" /> Map
+              </button>
+              <button
+                class="text-[11px] text-zinc-300 hover:text-zinc-100 flex items-center gap-1.5 px-2 py-1 rounded border border-zinc-800 hover:border-zinc-700"
+                data-testid="home-jump-operate"
+                @click="jumpInto(p.cwd, 'operate')"
+              >
+                <Inbox class="w-3 h-3" /> Operate
+              </button>
+              <button
+                class="text-[11px] text-zinc-300 hover:text-zinc-100 flex items-center gap-1.5 px-2 py-1 rounded border border-zinc-800 hover:border-zinc-700"
+                data-testid="home-jump-streams"
+                @click="jumpInto(p.cwd, 'streams')"
+              >
+                <Radio class="w-3 h-3" /> Streams
+              </button>
+            </div>
+          </article>
         </div>
-      </div>
-    </section>
+      </section>
 
-    <!-- Section 3: composition + boot ─────────────────────────────── -->
-    <section data-testid="home-composition">
-      <div class="flex items-center justify-between mb-2">
+      <!-- Active project quick stats ─────────────────────────────────── -->
+      <section v-if="activeCwd" data-testid="home-quickstats">
         <h2
-          class="text-sm font-medium text-zinc-300 uppercase tracking-wide flex items-center gap-2"
+          class="text-sm font-medium text-zinc-300 uppercase tracking-wide flex items-center gap-2 mb-3"
         >
-          <Boxes class="w-4 h-4 text-cyan-400" />
-          Composition
+          <Activity class="w-4 h-4 text-emerald-400" />
+          {{ activeName }} — at a glance
         </h2>
-      </div>
+        <div class="flex flex-wrap gap-3">
+          <KpiTile
+            v-for="s in stats"
+            :key="s.label"
+            :label="s.label"
+            :value="s.value"
+            :accent="s.label === 'Errors' && s.value > 0 ? '#fb7185' : kindColor(s.kind)"
+          />
+        </div>
+      </section>
 
-      <EmptyState
-        v-if="!cache"
-        title="No manifest yet"
-        hint="Run `nwire cache` in your project to populate Studio."
-      />
-      <div v-else class="space-y-3">
-        <div
-          v-if="bootSummary"
-          class="rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-3 text-sm"
-          data-testid="home-boot-summary"
+      <!-- Recent activity ─────────────────────────────────────────────── -->
+      <section v-if="activeCwd" data-testid="home-activity">
+        <h2
+          class="text-sm font-medium text-zinc-300 uppercase tracking-wide flex items-center gap-2 mb-3"
         >
-          Booted <span class="font-semibold">{{ bootSummary.total }}</span> plugins (<span
-            class="tabular-nums"
-            >{{ bootSummary.plugins }}</span
-          >
-          plugins recorded) in
-          <span class="tabular-nums">{{ bootSummary.totalMs.toFixed(0) }}</span> ms
-        </div>
+          <Radio class="w-4 h-4 text-cyan-400" />
+          Recent activity
+        </h2>
+
         <div
-          v-else-if="compositionStats"
-          class="rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-3 text-sm text-zinc-400"
-          data-testid="home-boot-static"
+          v-if="activity.length === 0"
+          class="rounded border border-zinc-800 bg-zinc-900/40 px-4 py-6 text-sm text-zinc-500"
+          data-testid="home-activity-empty"
         >
-          <span class="tabular-nums">{{ compositionStats.apps }}</span> app(s),
-          <span class="tabular-nums">{{ compositionStats.plugins }}</span> plugin(s) ·
-          <span class="tabular-nums">{{ compositionStats.actions }}</span> actions ·
-          <span class="tabular-nums">{{ compositionStats.events }}</span> events ·
-          <span class="tabular-nums">{{ compositionStats.sinks }}</span> sinks
-          <div v-if="!hasLiveData" class="text-[11px] text-zinc-500 mt-1">
-            Boot timings appear once the wire is running.
-          </div>
+          No activity yet — dispatch something or start the wire.
         </div>
-
         <ul
-          v-if="pluginsBootedRecords.length > 0"
+          v-else
           class="rounded border border-zinc-800 divide-y divide-zinc-900"
-          data-testid="home-boot-list"
+          data-testid="home-activity-list"
         >
           <li
-            v-for="(p, i) in pluginsBootedRecords"
-            :key="`${p.payload.pluginName ?? 'plugin'}-${i}`"
-            class="px-4 py-1.5 flex items-center gap-3 font-mono text-xs hover:bg-zinc-900/40"
+            v-for="(a, i) in activity"
+            :key="`${a.ts}-${i}`"
+            class="px-4 py-2 flex items-center gap-3 hover:bg-zinc-900/40 font-mono text-xs cursor-pointer"
+            data-testid="home-activity-row"
+            @click="openActivity(a.correlationId)"
           >
-            <span
-              class="text-[10px] uppercase tracking-wide w-14 shrink-0"
-              :class="p.payload.kind === 'module' ? 'text-cyan-400' : 'text-violet-400'"
-              >{{ p.payload.kind ?? "plugin" }}</span
-            >
-            <button
-              type="button"
-              class="flex-1 text-left text-zinc-100 truncate hover:text-emerald-300"
-              @click="openPluginHook(p.payload.pluginName ?? 'unknown')"
-            >
-              {{ p.payload.pluginName ?? "(unnamed)" }}
-            </button>
-            <span class="text-zinc-500 tabular-nums shrink-0">
-              {{ (p.payload.durationMs ?? 0).toFixed(1) }} ms
+            <span class="text-zinc-600 tabular-nums w-20 shrink-0">{{ shortTime(a.ts) }}</span>
+            <KindBadge :style="{ color: kindColor(recordColorKey(a.kind)) }">
+              {{ a.kind }}
+            </KindBadge>
+            <span class="flex-1 truncate" :class="a.failed ? 'text-rose-300' : 'text-zinc-100'">
+              {{ a.label }}
             </span>
+            <span v-if="a.correlationId" class="text-emerald-400 shrink-0">→ trace</span>
           </li>
         </ul>
-      </div>
-    </section>
+      </section>
+    </div>
   </div>
 </template>