@nwire/studio 0.12.0 → 0.13.0

package/src/pages/Plugins.vue

@@ -1,175 +1,82 @@
 <script setup lang="ts">
 /**
- * Plugins — every plugin AND every module-as-plugin registered against the
- * Nwire app, with live boot/shutdown timing pulled from the lifecycle
- * telemetry stream. The cache emits `plugins.json` at scan time; the wire
- * emits `kind: "lifecycle"` (e.g. `nwire.plugin.booted`) and
- * `kind: "hook.step"` records under `plugin.boot:<name>` /
- * `plugin.shutdown:<name>` at runtime. We fuse the two views.
+ * Plugins — every plugin composed into the app, read natively from the deep
+ * manifest's runtime topology (`topology.plugins`) via `useManifest`.
+ *
+ * Detail pane shows the plugin's INTERNALS Inspect can't carry: its
+ * boot/shutdown lifecycle hooks (`plugin.boot:<n>` / `plugin.shutdown:<n>` from
+ * `topology.hooks`), what it contributes (`contributes` / `mounts` graph edges),
+ * a same-named capability's ctx-by-kind, and a live lifecycle timeline from
+ * `hook.step` telemetry (`useTelemetry`). A `/plugins?name=<n>` deep-link
+ * preselects; each lifecycle hook cross-links to `/hooks?name=<hookName>`.
  */
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { useCache, type PluginEntry, type HookEntry } from "@/lib/cache";
-import { Activity, Anchor, Boxes, Puzzle, RefreshCw, Search } from "lucide-vue-next";
-import { SourcePill, SourceDrawer, KindBadge } from "@/components";
-
-// ── Telemetry record shapes (loose — payloads come from the wire) ─────
-interface LifecycleRecord {
-  readonly kind: "lifecycle";
-  readonly event: string;
-  readonly ts: string;
-  readonly payload?: { pluginName?: string; durationMs?: number; [k: string]: unknown };
-}
-
-interface HookStepRecord {
-  readonly kind: "hook.step";
-  readonly hookName: string;
-  readonly hookId: string;
-  readonly runId: string;
-  readonly stepId: number;
-  readonly stepKind: "chain" | "listener";
-  readonly stepName?: string;
-  readonly phase: "start" | "end" | "error";
-  readonly durationMs?: number;
-  readonly ts: string;
-}
-
-type PluginTelemetry = LifecycleRecord | HookStepRecord;
+import { Activity, Anchor, Puzzle, RefreshCw, Search } from "lucide-vue-next";
+import { useManifest } from "@/composables/useManifest";
+import { useProject } from "@/composables/useProject";
+import { useTelemetry } from "@/composables/useTelemetry";
+import {
+  pluginRegistry,
+  pluginInternals,
+  liveFireTally,
+  type PluginRow,
+} from "@/lib/topology-view";
 
 const route = useRoute();
 const router = useRouter();
-const { cache } = useCache();
+const { activeCwd } = useProject();
+const { view, isError, error, refetch } = useManifest(activeCwd);
+const { records, status: streamStatus, recent } = useTelemetry(activeCwd);
+
 const filter = ref("");
-const kindFilter = ref<"all" | "plugin" | "module">("all");
 const selected = ref<string | null>(null);
-const sourcePreview = ref<{ file: string; line: number; column?: number } | null>(null);
 
-function applyQueryPreselect(): void {
-  const name = route.query.name;
-  if (typeof name !== "string" || name.length === 0) return;
-  const found = cache.value?.plugins.find((p) => p.name === name);
-  if (found) selected.value = `${found.app}::${found.kind}::${found.name}`;
-}
-
-onMounted(applyQueryPreselect);
-watch(() => route.query.name, applyQueryPreselect);
-watch(() => cache.value, applyQueryPreselect);
+const plugins = computed<PluginRow[]>(() => pluginRegistry(view.value));
 
-// ── Live tap stream ───────────────────────────────────────────────────
-const liveRecords = ref<PluginTelemetry[]>([]);
-const streamStatus = ref<"connecting" | "open" | "closed" | "error">("connecting");
-let es: EventSource | null = null;
-
-onMounted(() => {
-  connect();
-});
-onUnmounted(() => {
-  es?.close();
+const filteredPlugins = computed<PluginRow[]>(() => {
+  const q = filter.value.toLowerCase();
+  return plugins.value.filter((p) => !q || p.name.toLowerCase().includes(q));
 });
 
-function connect(): void {
-  streamStatus.value = "connecting";
-  es?.close();
-  es = new EventSource("/_nwire/telemetry/stream");
-  es.onopen = () => {
-    streamStatus.value = "open";
-  };
-  es.onerror = () => {
-    streamStatus.value = "error";
-  };
-  es.onmessage = (m) => {
-    try {
-      const rec = JSON.parse(m.data) as { kind?: string };
-      if (rec.kind === "lifecycle" || rec.kind === "hook.step") {
-        liveRecords.value.push(rec as PluginTelemetry);
-        if (liveRecords.value.length > 1000) liveRecords.value.splice(0, 500);
-      }
-    } catch {
-      /* ignore non-JSON frames */
-    }
-  };
-}
-
-// ── Helpers ───────────────────────────────────────────────────────────
-const key = (p: PluginEntry) => `${p.app}::${p.kind}::${p.name}`;
+const detail = computed<PluginRow | null>(
+  () => plugins.value.find((p) => p.id === selected.value) ?? null,
+);
 
-function pluginNameFromHook(hookName: string): string | null {
-  const colon = hookName.indexOf(":");
-  if (colon === -1) return null;
-  const prefix = hookName.slice(0, colon);
-  if (prefix !== "plugin.boot" && prefix !== "plugin.shutdown") return null;
-  return hookName.slice(colon + 1);
-}
+const internals = computed(() => pluginInternals(view.value, detail.value?.name));
+const ctxByKindEntries = computed(() => Object.entries(internals.value?.ctxByKind ?? {}));
 
-function recordPluginName(rec: PluginTelemetry): string | null {
-  if (rec.kind === "lifecycle") return rec.payload?.pluginName ?? null;
-  return pluginNameFromHook(rec.hookName);
+// ── Deep-link preselect: /plugins?name=<n>. ───────────────────────────────
+function applyQueryPreselect(): void {
+  const name = route.query.name;
+  if (typeof name !== "string" || name.length === 0) return;
+  const found = plugins.value.find((p) => p.name === name);
+  if (found) selected.value = found.id;
 }
+onMounted(applyQueryPreselect);
+watch(() => route.query.name, applyQueryPreselect);
+watch(plugins, applyQueryPreselect);
 
-function recordPhase(rec: PluginTelemetry): string {
-  if (rec.kind === "lifecycle") {
-    // e.g. nwire.plugin.booted → "booted"
-    const parts = rec.event.split(".");
-    return parts[parts.length - 1] ?? rec.event;
-  }
-  const colon = rec.hookName.indexOf(":");
-  const head = colon === -1 ? rec.hookName : rec.hookName.slice(0, colon);
-  return `${head.replace(/^plugin\./, "")} ${rec.phase}`;
-}
+// ── Live lifecycle: fires per plugin, from `plugin.boot/shutdown` hook.step. ─
+const fireTally = computed(() => liveFireTally(records.value));
 
-function recordDuration(rec: PluginTelemetry): number | undefined {
-  if (rec.kind === "lifecycle") {
-    const d = rec.payload?.durationMs;
-    return typeof d === "number" ? d : undefined;
-  }
-  return rec.durationMs;
+function pluginFires(name: string): number {
+  let n = 0;
+  n += fireTally.value.get(`plugin.boot:${name}`)?.fires ?? 0;
+  n += fireTally.value.get(`plugin.shutdown:${name}`)?.fires ?? 0;
+  return n;
 }
 
-/** Last observed boot duration per plugin (lifecycle preferred over hook). */
-const bootDurations = computed<Record<string, number>>(() => {
-  const out: Record<string, number> = {};
-  for (const rec of liveRecords.value) {
-    const name = recordPluginName(rec);
-    if (!name) continue;
-    if (rec.kind === "lifecycle" && rec.event.endsWith(".booted")) {
-      const d = recordDuration(rec);
-      if (typeof d === "number") out[name] = d;
-    }
-  }
-  return out;
-});
-
-// ── Filtered list ─────────────────────────────────────────────────────
-const filteredPlugins = computed<PluginEntry[]>(() => {
-  if (!cache.value) return [];
-  const q = filter.value.toLowerCase();
-  return cache.value.plugins.filter((p) => {
-    if (kindFilter.value !== "all" && p.kind !== kindFilter.value) return false;
-    if (!q) return true;
-    return p.name.toLowerCase().includes(q) || p.app.toLowerCase().includes(q);
-  });
-});
-
-const detail = computed<PluginEntry | null>(() => {
-  if (!cache.value) return null;
-  return cache.value.plugins.find((p) => key(p) === selected.value) ?? null;
-});
-
-// ── Contributed hooks for the selected plugin ─────────────────────────
-const contributedHooks = computed<HookEntry[]>(() => {
-  if (!detail.value || !cache.value) return [];
-  const name = detail.value.name;
-  const bootName = `plugin.boot:${name}`;
-  const downName = `plugin.shutdown:${name}`;
-  return cache.value.hooks.filter((h) => h.name === bootName || h.name === downName);
-});
-
-// ── Lifecycle timeline for the selected plugin (last 50) ──────────────
-const detailRecords = computed<PluginTelemetry[]>(() => {
+// The selected plugin's recent lifecycle steps, newest first.
+const detailSteps = computed(() => {
   if (!detail.value) return [];
-  const name = detail.value.name;
-  return liveRecords.value
-    .filter((r) => recordPluginName(r) === name)
+  const boot = `plugin.boot:${detail.value.name}`;
+  const down = `plugin.shutdown:${detail.value.name}`;
+  return recent("hook.step")
+    .filter((r) => {
+      const hn = (r as Record<string, unknown>).hookName;
+      return hn === boot || hn === down;
+    })
     .slice(-50)
     .reverse();
 });
@@ -177,10 +84,28 @@ const detailRecords = computed<PluginTelemetry[]>(() => {
 function openHook(hookName: string): void {
   void router.push({ path: "/hooks", query: { name: hookName } });
 }
+function fmtTime(ts: unknown): string {
+  if (typeof ts !== "string") return "—";
+  const d = new Date(ts);
+  return Number.isNaN(d.getTime()) ? "—" : d.toLocaleTimeString(undefined, { hour12: false });
+}
+function stepField(rec: unknown, key: string): string {
+  const v = (rec as Record<string, unknown>)[key];
+  return v == null ? "" : String(v);
+}
+function lifecyclePhase(rec: unknown): string {
+  const hn = stepField(rec, "hookName");
+  const head = hn.startsWith("plugin.boot") ? "boot" : "shutdown";
+  return `${head} ${stepField(rec, "phase")}`.trim();
+}
+function durationMsOf(rec: unknown): number | null {
+  const v = (rec as Record<string, unknown>).durationMs;
+  return typeof v === "number" ? v : null;
+}
 </script>
 
 <template>
-  <div v-if="cache" class="h-full flex flex-col" data-testid="plugins-page">
+  <div class="h-full flex flex-col" data-testid="plugins-page">
     <!-- Header -->
     <div class="p-6 pb-3 border-b border-zinc-800 flex items-center justify-between">
       <div>
@@ -188,41 +113,46 @@ function openHook(hookName: string): void {
           <Puzzle class="w-4 h-4 text-fuchsia-400" />
           <h1 class="text-lg font-medium">Plugins</h1>
           <span class="text-[10px] text-zinc-500">
-            {{ filteredPlugins.length }} / {{ cache.plugins.length }}
+            {{ filteredPlugins.length }} / {{ plugins.length }}
           </span>
           <span
             class="ml-2 text-[9px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-zinc-900 text-zinc-400"
             data-testid="stream-status"
           >
-            stream {{ streamStatus }}
+            tap {{ streamStatus }}
           </span>
         </div>
         <p class="text-xs text-zinc-500 mt-1">
-          Plugins and modules-as-plugins composed into the app. Boot and shutdown timing streams
-          live from the running wire.
+          Plugins composed into the app — what each contributes, its boot/shutdown lifecycle, and
+          live timing from the running wire.
         </p>
       </div>
       <button
         class="p-1 rounded hover:bg-zinc-800 text-zinc-400"
-        title="Reconnect stream"
-        @click="connect"
+        title="Refetch manifest"
+        @click="() => refetch()"
       >
         <RefreshCw class="w-3.5 h-3.5" />
       </button>
     </div>
 
+    <!-- Error -->
+    <div v-if="isError" class="p-6 text-xs text-zinc-500" data-testid="plugins-error">
+      {{ error ?? "Couldn't load the manifest. Run `nwire cache` to build it." }}
+    </div>
+
     <!-- Empty (no plugins at all) -->
     <div
-      v-if="cache.plugins.length === 0"
+      v-else-if="plugins.length === 0"
       class="flex-1 flex items-center justify-center p-12"
       data-testid="plugins-empty"
     >
       <div class="text-center max-w-md">
         <Puzzle class="w-8 h-8 text-zinc-700 mx-auto mb-3" />
-        <div class="text-sm text-zinc-400 font-medium">No plugins in cache</div>
+        <div class="text-sm text-zinc-400 font-medium">No plugins in the manifest</div>
         <div class="text-xs text-zinc-500 mt-2">
-          Plugins and modules are emitted to <span class="font-mono">.nwire/plugins.json</span> at
-          scan time. Run <span class="font-mono">nwire cache</span> after registering one.
+          The runtime topology is captured at scan time. Run
+          <span class="font-mono">nwire cache</span> after registering a plugin.
         </div>
       </div>
     </div>
@@ -231,60 +161,41 @@ function openHook(hookName: string): void {
     <div v-else class="flex-1 flex min-h-0">
       <!-- Master -->
       <aside class="w-[280px] border-r border-zinc-800 flex flex-col shrink-0">
-        <div class="px-3 py-2 border-b border-zinc-800 space-y-2">
+        <div class="px-3 py-2 border-b border-zinc-800">
           <div class="relative">
             <Search class="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-zinc-500" />
             <input
               v-model="filter"
-              placeholder="filter name / app…"
+              placeholder="filter name…"
+              data-testid="plugins-filter"
               class="w-full bg-zinc-900 border border-zinc-800 rounded pl-7 pr-2 py-1 text-xs placeholder:text-zinc-600 focus:outline-none focus:border-zinc-600"
             />
           </div>
-          <div class="flex gap-1">
-            <button
-              v-for="opt in ['all', 'plugin', 'module'] as const"
-              :key="opt"
-              class="flex-1 px-2 py-0.5 text-[10px] uppercase tracking-wide rounded border transition-colors"
-              :class="
-                kindFilter === opt
-                  ? 'bg-zinc-800 border-zinc-700 text-zinc-100'
-                  : 'bg-zinc-950 border-zinc-900 text-zinc-500 hover:text-zinc-300'
-              "
-              @click="kindFilter = opt"
-            >
-              {{ opt === "all" ? "All" : opt + "s" }}
-            </button>
-          </div>
         </div>
 
         <div v-if="filteredPlugins.length === 0" class="p-4 text-xs text-zinc-500">
           No plugins match the filter.
         </div>
         <ul v-else class="flex-1 overflow-auto" data-testid="plugins-list">
-          <li v-for="p in filteredPlugins" :key="key(p)">
+          <li v-for="p in filteredPlugins" :key="p.id">
             <button
               class="w-full text-left px-3 py-2 border-b border-zinc-900 hover:bg-zinc-900/50 transition-colors"
-              :class="{ 'bg-zinc-900/70': key(p) === selected }"
-              @click="selected = key(p)"
+              :class="{ 'bg-zinc-900/70': p.id === selected }"
+              @click="selected = p.id"
             >
               <div class="flex items-center gap-2">
-                <component
-                  :is="p.kind === 'plugin' ? Anchor : Boxes"
-                  class="w-3 h-3 shrink-0"
-                  :class="p.kind === 'plugin' ? 'text-fuchsia-400' : 'text-orange-400'"
-                />
+                <Anchor class="w-3 h-3 shrink-0 text-fuchsia-400" />
                 <span class="font-mono text-xs text-zinc-100 truncate flex-1">{{ p.name }}</span>
                 <span
-                  v-if="bootDurations[p.name] !== undefined"
-                  class="text-[10px] text-emerald-400 tabular-nums shrink-0"
-                  title="last observed boot duration"
+                  v-if="pluginFires(p.name) > 0"
+                  class="inline-flex items-center gap-1 text-[10px] text-emerald-400 tabular-nums shrink-0"
+                  :data-testid="`plugin-fires-${p.name}`"
+                  title="live lifecycle fires observed"
                 >
-                  {{ bootDurations[p.name]!.toFixed(1) }}ms
+                  <Activity class="w-3 h-3" />
+                  {{ pluginFires(p.name) }}
                 </span>
               </div>
-              <div class="text-[10px] text-zinc-500 mt-0.5 pl-5">
-                {{ p.app }}
-              </div>
             </button>
           </li>
         </ul>
@@ -292,52 +203,49 @@ function openHook(hookName: string): void {
 
       <!-- Detail -->
       <main class="flex-1 flex flex-col min-w-0" data-testid="plugins-detail">
-        <div v-if="!detail" class="p-8 text-sm text-zinc-500 italic">
-          Select a plugin to view its contributed hooks + live lifecycle timeline.
+        <div v-if="!detail || !internals" class="p-8 text-sm text-zinc-500 italic">
+          Select a plugin to view its internals + live lifecycle.
         </div>
         <div v-else class="flex-1 flex flex-col overflow-hidden">
           <!-- Header -->
           <div class="px-6 py-5 border-b border-zinc-800">
             <div class="flex items-center gap-3 flex-wrap">
-              <component
-                :is="detail.kind === 'plugin' ? Anchor : Boxes"
-                class="w-4 h-4"
-                :class="detail.kind === 'plugin' ? 'text-fuchsia-400' : 'text-orange-400'"
-              />
+              <Anchor class="w-4 h-4 text-fuchsia-400" />
               <h2 class="font-mono text-xl">{{ detail.name }}</h2>
-              <KindBadge :variant="detail.kind === 'plugin' ? 'info' : 'warning'">
-                {{ detail.kind }}
-              </KindBadge>
-              <span class="text-[10px] text-zinc-500 font-mono">{{ detail.app }}</span>
-              <span v-if="detail.source" class="ml-auto inline-flex">
-                <SourcePill :source="detail.source" @click="sourcePreview = detail.source!" />
-              </span>
+              <span class="text-[10px] text-zinc-500 font-mono">{{ detail.id }}</span>
             </div>
           </div>
 
           <div class="flex-1 overflow-auto">
-            <!-- Contributed hooks -->
+            <!-- Lifecycle hooks -->
             <section class="px-6 py-4 border-b border-zinc-900">
               <h3 class="text-xs uppercase tracking-wide text-zinc-400 mb-3">
-                Contributed hooks
+                Lifecycle hooks
                 <span class="text-zinc-600 normal-case tracking-normal ml-1">
-                  ({{ contributedHooks.length }})
+                  ({{ internals.lifecycleHooks.length }})
                 </span>
               </h3>
-              <div v-if="contributedHooks.length === 0" class="text-xs text-zinc-500 italic">
+              <div
+                v-if="internals.lifecycleHooks.length === 0"
+                class="text-xs text-zinc-500 italic"
+              >
                 No <span class="font-mono">plugin.boot:{{ detail.name }}</span> or
                 <span class="font-mono">plugin.shutdown:{{ detail.name }}</span>
                 hooks registered.
               </div>
               <ul v-else class="space-y-1">
                 <li
-                  v-for="h in contributedHooks"
-                  :key="h.id"
+                  v-for="h in internals.lifecycleHooks"
+                  :key="h.name"
                   class="flex items-center gap-3 px-3 py-1.5 rounded hover:bg-zinc-900/50 cursor-pointer"
                   :data-testid="`hook-link-${h.name}`"
                   @click="openHook(h.name)"
                 >
-                  <Anchor class="w-3 h-3 text-zinc-500 shrink-0" />
+                  <span
+                    class="text-[10px] uppercase tracking-wide shrink-0 w-16"
+                    :class="h.phase === 'boot' ? 'text-emerald-400' : 'text-amber-400'"
+                    >{{ h.phase }}</span
+                  >
                   <span class="font-mono text-xs flex-1 truncate">{{ h.name }}</span>
                   <span class="text-[10px] text-zinc-500 tabular-nums shrink-0">
                     chain {{ h.chain }} · {{ h.listeners }} listener{{
@@ -348,42 +256,72 @@ function openHook(hookName: string): void {
               </ul>
             </section>
 
-            <!-- Lifecycle timeline -->
+            <!-- Contributes -->
+            <section class="px-6 py-4 border-b border-zinc-900">
+              <h3 class="text-xs uppercase tracking-wide text-zinc-400 mb-3">
+                Contributes
+                <span class="text-zinc-600 normal-case tracking-normal ml-1">
+                  ({{ internals.contributes.length }})
+                </span>
+              </h3>
+              <div v-if="internals.contributes.length === 0" class="text-xs text-zinc-500 italic">
+                No attributed contributions in the topology.
+              </div>
+              <div v-else class="flex flex-wrap gap-1.5" data-testid="plugins-contributes">
+                <span
+                  v-for="c in internals.contributes"
+                  :key="c"
+                  class="font-mono text-[11px] px-2 py-0.5 rounded border border-zinc-800 bg-zinc-900 text-zinc-300"
+                >
+                  {{ c }}
+                </span>
+              </div>
+            </section>
+
+            <!-- ctx-by-kind -->
+            <section v-if="ctxByKindEntries.length" class="px-6 py-4 border-b border-zinc-900">
+              <h3 class="text-xs uppercase tracking-wide text-zinc-400 mb-3">Ctx by kind</h3>
+              <div class="space-y-2" data-testid="plugins-ctx-by-kind">
+                <div v-for="[kind, keys] in ctxByKindEntries" :key="kind" class="flex gap-2">
+                  <span class="font-mono text-[11px] text-zinc-500 w-20 shrink-0">{{ kind }}</span>
+                  <div class="flex flex-wrap gap-1">
+                    <span
+                      v-for="k in keys"
+                      :key="k"
+                      class="font-mono text-[10px] px-1.5 py-0.5 rounded bg-zinc-900 text-cyan-300"
+                    >
+                      {{ k }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <!-- Live lifecycle timeline -->
             <section class="px-6 py-4">
               <div class="flex items-center gap-2 mb-3">
                 <Activity class="w-3.5 h-3.5 text-emerald-400" />
-                <h3 class="text-xs uppercase tracking-wide text-zinc-400">Lifecycle timeline</h3>
+                <h3 class="text-xs uppercase tracking-wide text-zinc-400">Live lifecycle</h3>
                 <span class="text-[10px] text-zinc-500 tabular-nums">
-                  {{ detailRecords.length }} recent
+                  {{ detailSteps.length }} recent
                 </span>
               </div>
-              <div v-if="detailRecords.length === 0" class="text-xs text-zinc-500 italic">
-                No lifecycle data yet. Boot or restart the wire and events for
+              <div v-if="detailSteps.length === 0" class="text-xs text-zinc-500 italic">
+                No lifecycle data yet. Boot or restart the wire and steps for
                 <span class="font-mono">{{ detail.name }}</span> will stream here.
               </div>
               <ul v-else class="divide-y divide-zinc-900" data-testid="plugins-tap-list">
                 <li
-                  v-for="(r, i) in detailRecords"
+                  v-for="(r, i) in detailSteps"
                   :key="i"
                   class="px-3 py-1.5 flex items-center gap-3 font-mono text-[11px] hover:bg-zinc-900/30"
                 >
                   <span class="text-zinc-600 tabular-nums w-20 shrink-0">
-                    {{ new Date(r.ts).toLocaleTimeString(undefined, { hour12: false }) }}
+                    {{ fmtTime(stepField(r, "ts")) }}
                   </span>
-                  <span
-                    class="text-[10px] uppercase tracking-wide shrink-0"
-                    :class="{
-                      'text-emerald-400': r.kind === 'lifecycle',
-                      'text-cyan-400': r.kind === 'hook.step',
-                    }"
-                    >{{ r.kind === "lifecycle" ? "event" : "hook" }}</span
-                  >
-                  <span class="text-zinc-200 truncate flex-1">{{ recordPhase(r) }}</span>
-                  <span
-                    v-if="recordDuration(r) !== undefined"
-                    class="text-zinc-500 tabular-nums shrink-0"
-                  >
-                    {{ recordDuration(r)!.toFixed(1) }} ms
+                  <span class="text-zinc-200 truncate flex-1">{{ lifecyclePhase(r) }}</span>
+                  <span v-if="durationMsOf(r) !== null" class="text-zinc-500 tabular-nums shrink-0">
+                    {{ durationMsOf(r)!.toFixed(1) }} ms
                   </span>
                 </li>
               </ul>
@@ -392,7 +330,5 @@ function openHook(hookName: string): void {
         </div>
       </main>
     </div>
-
-    <SourceDrawer :source="sourcePreview" @close="sourcePreview = null" />
   </div>
 </template>