@nwire/studio 0.12.1 → 0.13.1

package/src/pages/Projects.vue

@@ -1,48 +1,48 @@
 <script setup lang="ts">
 /**
- * Projects catalog — every Nwire project this browser has opened
- * Studio for. Each card shows composition + live running status; click
- * a card to navigate to its Home if it's the current Studio's project,
- * or copy a `cd && nwire studio` snippet for the others.
+ * Projects catalog — every Nwire project this browser has opened Studio for.
+ * Each card shows composition + live running status.
+ *
+ * Discovery data (catalog + live status) comes from `useDiscovery` — the same
+ * composable Home uses — so both pages see the same live picture without
+ * duplicating the poll. This page adds the management actions (forget, rescan,
+ * switch, copy start-command) that Home's compact strip omits.
  *
  * Snapshots live in localStorage under `nwire.projects` (one per cwd).
- * Live status comes from `/__nwire/projects/status` which walks each
- * project's `.nwire/processes/` registry — no per-project Studio needs
- * to be open for the dots to be accurate.
+ * Live status is polled from `/__nwire/projects/status`.
  */
 import { computed, onMounted, ref } from "vue";
 import { FolderOpen, Folder, Copy, Trash2, Activity, Circle, RefreshCw } from "lucide-vue-next";
 import { useRouter } from "vue-router";
-import {
-  loadCatalog,
-  forgetProject,
-  setActiveProjectCwd,
-  type ProjectSnapshot,
-} from "@/lib/project-catalog";
-
-interface ProcessRec {
-  id: string;
-  port?: number;
-  pid: number;
-  status: string;
-  startedAt: string;
-}
-type StatusMap = Record<string, { hasManifest: boolean; processes: ProcessRec[] }>;
+import { forgetProject, setActiveProjectCwd, getActiveProjectCwd } from "@/lib/project-catalog";
+import { useDiscovery } from "@/composables/useDiscovery";
 
 const router = useRouter();
-const catalog = ref<Record<string, ProjectSnapshot>>({});
-const status = ref<StatusMap>({});
-const currentCwd = ref<string | null>(null);
+
+// Single source of truth — catalog + live status poll shared with Home.
+const { projects: discovered, refetch } = useDiscovery();
+
+const currentCwd = ref<string | null>(getActiveProjectCwd());
 const copiedCwd = ref<string | null>(null);
-/** cwd → human label while a per-project `nwire cache` is in flight. */
+/** cwd → label while a per-project `nwire cache` is in flight. */
 const rescanState = ref<Record<string, "running" | "done" | "error">>({});
 
-const projects = computed(() => {
-  return Object.values(catalog.value).sort((a, b) => b.lastVisited.localeCompare(a.lastVisited));
-});
+/** Stable sort: most-recently-visited first. */
+const projects = computed(() =>
+  [...discovered.value].sort((a, b) =>
+    b.snapshot.lastVisited.localeCompare(a.snapshot.lastVisited),
+  ),
+);
+
+/** Resolve the process list for a cwd from the discovery status. */
+function processList(cwd: string): Array<{ id?: string; port?: number; pid?: number }> {
+  const p = discovered.value.find((d) => d.cwd === cwd);
+  const procs = (p?.status as { processes?: Array<{ port?: number }> } | undefined)?.processes;
+  return Array.isArray(procs) ? procs : [];
+}
 
 async function refresh() {
-  catalog.value = loadCatalog();
+  currentCwd.value = getActiveProjectCwd();
   try {
     const proj = await fetch("/__nwire/project");
     if (proj.ok) {
@@ -52,21 +52,7 @@ async function refresh() {
   } catch {
     /* current project unknown — fine */
   }
-  const cwds = Object.keys(catalog.value);
-  if (cwds.length === 0) {
-    status.value = {};
-    return;
-  }
-  try {
-    const res = await fetch("/__nwire/projects/status", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ cwds }),
-    });
-    if (res.ok) status.value = (await res.json()) as StatusMap;
-  } catch {
-    status.value = {};
-  }
+  void refetch();
 }
 
 function copyStartCommand(cwd: string) {
@@ -92,7 +78,8 @@ function openProject(cwd: string) {
 
 function forget(cwd: string) {
   forgetProject(cwd);
-  catalog.value = loadCatalog();
+  // Trigger a refetch so the discovery query reflects the removed entry.
+  void refetch();
 }
 
 /**
@@ -163,14 +150,19 @@ onMounted(() => {
           v-for="p in projects"
           :key="p.cwd"
           class="border border-zinc-800 rounded-lg p-4 bg-zinc-950/40 hover:border-zinc-700 transition-colors group"
+          :data-cwd="p.cwd"
+          data-testid="project-card"
         >
           <div class="flex items-start justify-between gap-3">
             <div class="min-w-0">
               <div class="flex items-center gap-2">
                 <FolderOpen v-if="p.cwd === currentCwd" class="w-4 h-4 text-emerald-400 shrink-0" />
                 <Folder v-else class="w-4 h-4 text-zinc-500 shrink-0" />
-                <h2 class="font-semibold text-sm tracking-tight truncate">
-                  {{ p.name }}
+                <h2
+                  class="font-semibold text-sm tracking-tight truncate"
+                  data-testid="project-name"
+                >
+                  {{ p.snapshot.name }}
                 </h2>
                 <span
                   v-if="p.cwd === currentCwd"
@@ -185,7 +177,8 @@ onMounted(() => {
             </div>
             <button
               class="opacity-0 group-hover:opacity-100 text-zinc-600 hover:text-rose-400 transition-opacity p-1"
-              :title="`Forget ${p.name}`"
+              :title="`Forget ${p.snapshot.name}`"
+              data-testid="project-forget"
               @click="forget(p.cwd)"
             >
               <Trash2 class="w-3.5 h-3.5" />
@@ -193,22 +186,26 @@ onMounted(() => {
           </div>
 
           <!-- Composition -->
-          <div v-if="p.composition" class="grid grid-cols-4 gap-2 mt-4 text-xs text-zinc-400">
+          <div
+            v-if="p.snapshot.composition"
+            class="grid grid-cols-4 gap-2 mt-4 text-xs text-zinc-400"
+            data-testid="project-composition"
+          >
             <div>
               <div class="text-zinc-600 text-[10px] uppercase tracking-wide">apps</div>
-              <div>{{ p.composition.apps }}</div>
+              <div>{{ p.snapshot.composition.apps }}</div>
             </div>
             <div>
               <div class="text-zinc-600 text-[10px] uppercase tracking-wide">plugins</div>
-              <div>{{ p.composition.plugins }}</div>
+              <div>{{ p.snapshot.composition.plugins }}</div>
             </div>
             <div>
               <div class="text-zinc-600 text-[10px] uppercase tracking-wide">actions</div>
-              <div>{{ p.composition.actions }}</div>
+              <div>{{ p.snapshot.composition.actions }}</div>
             </div>
             <div>
               <div class="text-zinc-600 text-[10px] uppercase tracking-wide">events</div>
-              <div>{{ p.composition.events }}</div>
+              <div>{{ p.snapshot.composition.events }}</div>
             </div>
           </div>
           <div v-else class="mt-4 text-[11px] text-zinc-600">No composition snapshot yet.</div>
@@ -216,11 +213,15 @@ onMounted(() => {
           <!-- Running status -->
           <div class="flex items-center justify-between mt-4 pt-3 border-t border-zinc-900">
             <div class="flex items-center gap-2 text-[11px]">
-              <template v-if="status[p.cwd]?.processes.length">
+              <template v-if="processList(p.cwd).length">
                 <Activity class="w-3 h-3 text-emerald-400" />
-                <span class="text-emerald-300"> {{ status[p.cwd].processes.length }} running </span>
+                <span class="text-emerald-300"> {{ processList(p.cwd).length }} running </span>
                 <span class="text-zinc-600 font-mono">
-                  ({{ status[p.cwd].processes.map((x) => x.port ?? "?").join(", ") }})
+                  ({{
+                    processList(p.cwd)
+                      .map((x) => x.port ?? "?")
+                      .join(", ")
+                  }})
                 </span>
               </template>
               <template v-else>
@@ -232,9 +233,9 @@ onMounted(() => {
               <button
                 class="text-[11px] text-zinc-500 hover:text-zinc-200 flex items-center gap-1.5 px-2 py-1 rounded border border-zinc-800 hover:border-zinc-700 disabled:opacity-50"
                 :disabled="rescanState[p.cwd] === 'running'"
-                @click="rescan(p.cwd)"
                 :title="`Run nwire cache against ${p.cwd}`"
                 data-testid="project-rescan"
+                @click="rescan(p.cwd)"
               >
                 <RefreshCw
                   class="w-3 h-3"
@@ -248,14 +249,15 @@ onMounted(() => {
               <button
                 v-if="p.cwd !== currentCwd"
                 class="text-[11px] text-zinc-500 hover:text-zinc-200 flex items-center gap-1.5 px-2 py-1 rounded border border-zinc-800 hover:border-zinc-700"
-                @click="copyStartCommand(p.cwd)"
                 title="Copy `cd … && nwire studio` to clipboard"
+                @click="copyStartCommand(p.cwd)"
               >
                 <Copy class="w-3 h-3" />
                 {{ copiedCwd === p.cwd ? "Copied!" : "Copy cmd" }}
               </button>
               <button
                 class="text-[11px] text-zinc-100 bg-emerald-700 hover:bg-emerald-600 px-2 py-1 rounded"
+                data-testid="project-open"
                 @click="openProject(p.cwd)"
               >
                 {{ p.cwd === currentCwd ? "Open" : "Switch" }}
@@ -263,7 +265,7 @@ onMounted(() => {
             </div>
           </div>
           <div class="text-[10px] text-zinc-700 mt-2">
-            last visited {{ new Date(p.lastVisited).toLocaleString() }}
+            last visited {{ new Date(p.snapshot.lastVisited).toLocaleString() }}
           </div>
         </article>
       </div>

package/src/pages/Streams.vue

@@ -0,0 +1,344 @@
+<script setup lang="ts">
+/**
+ * Streams (Live) — the real-time telemetry firehose.
+ *
+ *   /streams?correlationId=…&kind=…
+ *
+ * Source picker at the top lets the user switch between:
+ *   - Live  — SSE tail of the current run file.
+ *   - A past run — static snapshot loaded from `/__nwire/telemetry/runs/:id`.
+ *
+ * In live mode: holds an SSE connection (`useTelemetry`) and shows every
+ * record as it lands. In history mode: loads the chosen run and freezes.
+ *
+ *   - Top:    a KPI strip (records · rate/s · chains · failures) + status.
+ *   - Source picker: Live vs past-run selector.
+ *   - Filter: free text, kind dropdown, failures-only, correlation chip.
+ *   - Left:   the firehose as a keyboard-navigable `LiveTable`.
+ *   - Right:  the selected record in a MetadataInspector.
+ */
+import { computed, ref, shallowRef, watch, onMounted, onUnmounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { Waves, PlayCircle, PauseCircle, Trash2, X, Clock } from "lucide-vue-next";
+import { useTelemetry, useRunList, type TelemetrySource } from "@/composables/useTelemetry";
+import type { TelemetryRecord } from "@/lib/telemetry";
+import {
+  filterRecords,
+  computeKpis,
+  distinctKinds,
+  recordSubject,
+  type FilterSpec,
+} from "@/lib/live-table";
+import {
+  LiveTable,
+  MetadataInspector,
+  KpiTile,
+  StatusBadge,
+  KindBadge,
+  FilterInput,
+  EmptyState,
+} from "@/components";
+
+const route = useRoute();
+const router = useRouter();
+
+const { records, status, source, clear } = useTelemetry();
+const { runs } = useRunList();
+
+// ── Source picker ─────────────────────────────────────────────────────
+function selectSource(s: TelemetrySource): void {
+  source.value = s;
+  selectedIndex.value = -1;
+  paused.value = false;
+  frozen.value = [];
+}
+
+const isLive = computed(() => source.value === "live");
+
+function isActiveRun(runId: string): boolean {
+  if (isLive.value) return false;
+  const s = source.value;
+  return typeof s === "object" && s !== null && s.id === runId;
+}
+
+// ── Connection state → StatusBadge ───────────────────────────────────
+const conn = computed(() => {
+  if (!isLive.value) return { status: "idle" as const, label: "history", pulse: false };
+  switch (status.value) {
+    case "open":
+      return { status: "live" as const, label: "live", pulse: true };
+    case "connecting":
+    case "reconnecting":
+      return { status: "warn" as const, label: status.value, pulse: false };
+    case "closed":
+      return { status: "error" as const, label: "closed", pulse: false };
+    default:
+      return { status: "idle" as const, label: "idle", pulse: false };
+  }
+});
+
+// ── Pause: freeze a snapshot so the table stops moving ────────────────
+const paused = ref(false);
+const frozen = shallowRef<TelemetryRecord[]>([]);
+function togglePause(): void {
+  paused.value = !paused.value;
+  if (paused.value) frozen.value = records.value.slice();
+}
+const displayed = computed(() => (paused.value ? frozen.value : records.value));
+
+// ── Filters (correlation + kind are deep-linkable) ───────────────────
+const text = ref("");
+const kindFilter = ref<string | null>((route.query.kind as string) ?? null);
+const correlationId = ref<string | null>((route.query.correlationId as string) ?? null);
+const failuresOnly = ref(false);
+
+watch([kindFilter, correlationId], ([kind, cid]) => {
+  void router.replace({
+    query: {
+      ...route.query,
+      kind: kind ?? undefined,
+      correlationId: cid ?? undefined,
+    },
+  });
+});
+
+const kinds = computed(() => distinctKinds(records.value));
+
+const spec = computed<FilterSpec>(() => ({
+  text: text.value,
+  kind: kindFilter.value,
+  correlationId: correlationId.value,
+  failuresOnly: failuresOnly.value,
+}));
+
+const filtered = computed(() => filterRecords(displayed.value, spec.value));
+const kpis = computed(() => computeKpis(records.value));
+
+// ── Selection / detail ───────────────────────────────────────────────
+const selectedIndex = ref(-1);
+const selected = computed<TelemetryRecord | null>(
+  () => filtered.value[selectedIndex.value] ?? null,
+);
+
+// Reset the cursor when the filter set changes shape so it never dangles.
+watch(filtered, (rows) => {
+  if (selectedIndex.value >= rows.length) selectedIndex.value = rows.length - 1;
+});
+
+function pickCorrelation(): void {
+  const cid = selected.value?.envelope?.correlationId;
+  if (cid) correlationId.value = cid;
+}
+
+/** The record minus the envelope (shown separately) — the kind-specific body. */
+function recordBody(r: TelemetryRecord): Record<string, unknown> {
+  const { envelope: _e, ...rest } = r as Record<string, unknown> & { envelope?: unknown };
+  return rest;
+}
+
+// ── `/` focuses the filter ───────────────────────────────────────────
+const filterInput = ref<HTMLElement | null>(null);
+function onGlobalKey(e: KeyboardEvent): void {
+  const el = e.target as HTMLElement | null;
+  const typing = el && (el.tagName === "INPUT" || el.tagName === "TEXTAREA");
+  if (e.key === "/" && !typing) {
+    e.preventDefault();
+    (filterInput.value?.querySelector("input") as HTMLInputElement | null)?.focus();
+  }
+}
+onMounted(() => window.addEventListener("keydown", onGlobalKey));
+onUnmounted(() => window.removeEventListener("keydown", onGlobalKey));
+
+// ── Run label helpers ────────────────────────────────────────────────
+function formatRunId(id: string): string {
+  // RunId shape: 2026-06-18T20-17-43-755Z-tjeddw → show date + time portion
+  const m = /^(\d{4}-\d{2}-\d{2})T(\d{2}-\d{2}-\d{2})/.exec(id);
+  if (m) return `${m[1]} ${m[2]!.replaceAll("-", ":")}`;
+  return id;
+}
+</script>
+
+<template>
+  <div class="h-full flex flex-col" data-testid="streams-page">
+    <!-- Header: title + status + KPI strip + controls -->
+    <div class="border-b border-zinc-800 px-4 py-3 flex flex-col gap-3">
+      <div class="flex items-center gap-3">
+        <Waves class="w-5 h-5 text-sky-400 shrink-0" />
+        <h1 class="font-semibold text-lg">Streams</h1>
+        <StatusBadge :status="conn.status" :label="conn.label" :pulse="conn.pulse" />
+        <span class="text-xs text-zinc-500 tabular-nums ml-1">
+          {{ filtered.length }} / {{ kpis.total }}
+        </span>
+        <div class="ml-auto flex items-center gap-1">
+          <button
+            class="p-1.5 rounded hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100"
+            :title="paused ? 'Resume' : 'Pause'"
+            data-testid="pause-toggle"
+            @click="togglePause"
+          >
+            <PlayCircle v-if="paused" class="w-4 h-4 text-emerald-400" />
+            <PauseCircle v-else class="w-4 h-4" />
+          </button>
+          <button
+            class="p-1.5 rounded hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100"
+            title="Clear buffer"
+            data-testid="clear-buffer"
+            @click="
+              clear();
+              frozen = [];
+              selectedIndex = -1;
+            "
+          >
+            <Trash2 class="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      <div class="flex items-stretch gap-2">
+        <KpiTile label="Records" :value="kpis.total" />
+        <KpiTile label="Rate" :value="kpis.perSecond" sub="per second" />
+        <KpiTile label="Chains" :value="kpis.chains" />
+        <KpiTile
+          label="Failures"
+          :value="kpis.failures"
+          :accent="kpis.failures > 0 ? '#fb7185' : undefined"
+        />
+      </div>
+
+      <!-- Source picker: Live vs past run -->
+      <div class="flex items-center gap-2" data-testid="source-picker">
+        <button
+          class="h-7 px-2.5 rounded text-xs font-medium border transition-colors"
+          :class="
+            isLive
+              ? 'bg-sky-950/60 border-sky-800 text-sky-300'
+              : 'bg-zinc-900 border-zinc-800 text-zinc-400 hover:text-zinc-200'
+          "
+          data-testid="source-live"
+          @click="selectSource('live')"
+        >
+          Live
+        </button>
+        <template v-if="runs.length > 0">
+          <div class="h-4 w-px bg-zinc-800" />
+          <div class="flex items-center gap-1 flex-wrap">
+            <Clock class="w-3 h-3 text-zinc-600 shrink-0" />
+            <button
+              v-for="run in runs"
+              :key="run.id"
+              class="h-7 px-2.5 rounded text-xs border transition-colors font-mono"
+              :class="
+                isActiveRun(run.id)
+                  ? 'bg-zinc-700 border-zinc-600 text-zinc-100'
+                  : 'bg-zinc-900 border-zinc-800 text-zinc-500 hover:text-zinc-200'
+              "
+              :data-testid="`source-run-${run.id}`"
+              @click="selectSource(run)"
+            >
+              {{ formatRunId(run.id) }}
+            </button>
+          </div>
+        </template>
+      </div>
+
+      <!-- Filter row -->
+      <div class="flex items-center gap-2 flex-wrap">
+        <div ref="filterInput" class="flex-1 min-w-[16rem]">
+          <FilterInput
+            v-model="text"
+            placeholder="filter kind / subject / id / tenant / user…  ( / )"
+          />
+        </div>
+        <select
+          v-model="kindFilter"
+          data-testid="kind-filter"
+          class="h-9 rounded bg-zinc-900 border border-zinc-800 text-sm text-zinc-300 px-2 focus:outline-none focus:border-zinc-600"
+        >
+          <option :value="null">all kinds</option>
+          <option v-for="k in kinds" :key="k" :value="k">{{ k }}</option>
+        </select>
+        <button
+          class="h-9 px-3 rounded text-sm border transition-colors"
+          :class="
+            failuresOnly
+              ? 'bg-rose-950/50 border-rose-900 text-rose-300'
+              : 'bg-zinc-900 border-zinc-800 text-zinc-400 hover:text-zinc-200'
+          "
+          data-testid="failures-only"
+          @click="failuresOnly = !failuresOnly"
+        >
+          failures
+        </button>
+        <button
+          v-if="correlationId"
+          class="h-9 inline-flex items-center gap-1.5 px-3 rounded text-xs bg-purple-950/50 border border-purple-900 text-purple-300 hover:bg-purple-900/50"
+          data-testid="clear-correlation"
+          @click="correlationId = null"
+        >
+          <span class="font-mono">corr {{ correlationId.split("-")[0] }}</span>
+          <X class="w-3 h-3" />
+        </button>
+      </div>
+    </div>
+
+    <!-- Body: firehose + detail -->
+    <div class="flex-1 flex min-h-0">
+      <div class="flex-1 min-w-0 border-r border-zinc-800">
+        <LiveTable v-if="filtered.length" :rows="filtered" v-model:selectedIndex="selectedIndex" />
+        <EmptyState
+          v-else
+          :icon="Waves"
+          :title="
+            isLive && kpis.total === 0
+              ? 'Waiting for telemetry…'
+              : !isLive && kpis.total === 0
+                ? 'No records in this run.'
+                : 'No records match the filter.'
+          "
+          :hint="
+            isLive && kpis.total === 0
+              ? 'Dispatch an action or emit an event — every record lands here live.'
+              : !isLive && kpis.total === 0
+                ? 'The run file is empty or contains only unserializable records.'
+                : 'Loosen the filter, switch kinds, or clear the correlation chip.'
+          "
+        />
+      </div>
+
+      <!-- Detail -->
+      <div class="w-[24rem] shrink-0 flex flex-col min-h-0 bg-zinc-950/40">
+        <div v-if="selected" class="flex flex-col min-h-0">
+          <div class="px-3 py-2 border-b border-zinc-800 flex items-center gap-2">
+            <KindBadge variant="info">{{ selected.kind }}</KindBadge>
+            <span class="font-mono text-xs text-zinc-300 truncate">
+              {{ recordSubject(selected) }}
+            </span>
+            <button
+              v-if="selected.envelope?.correlationId && !correlationId"
+              class="ml-auto text-[10px] text-purple-400 hover:text-purple-300 shrink-0"
+              data-testid="follow-chain"
+              @click="pickCorrelation"
+            >
+              follow chain →
+            </button>
+          </div>
+          <div class="overflow-auto min-h-0">
+            <MetadataInspector
+              v-if="selected.envelope"
+              :data="selected.envelope"
+              label="Envelope"
+            />
+            <MetadataInspector :data="recordBody(selected)" label="Record" />
+          </div>
+        </div>
+        <div v-else class="flex-1 grid place-items-center p-6 text-center">
+          <p class="text-xs text-zinc-600">
+            Select a record to inspect its envelope + payload.
+            <br />
+            <span class="text-zinc-700">↑ ↓ to walk · Enter to open · / to filter</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>