@nwire/studio 0.9.1

package/src/pages/Plugins.vue

@@ -0,0 +1,403 @@
+<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.
+ */
+import { computed, onMounted, onUnmounted, 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;
+
+const route = useRoute();
+const router = useRouter();
+const { cache } = useCache();
+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);
+
+// ── 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();
+});
+
+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}`;
+
+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);
+}
+
+function recordPluginName(rec: PluginTelemetry): string | null {
+  if (rec.kind === "lifecycle") return rec.payload?.pluginName ?? null;
+  return pluginNameFromHook(rec.hookName);
+}
+
+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}`;
+}
+
+function recordDuration(rec: PluginTelemetry): number | undefined {
+  if (rec.kind === "lifecycle") {
+    const d = rec.payload?.durationMs;
+    return typeof d === "number" ? d : undefined;
+  }
+  return rec.durationMs;
+}
+
+/** 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[]>(() => {
+  if (!detail.value) return [];
+  const name = detail.value.name;
+  return liveRecords.value
+    .filter((r) => recordPluginName(r) === name)
+    .slice(-50)
+    .reverse();
+});
+
+function openHook(hookName: string): void {
+  void router.push({ path: "/hooks", query: { name: hookName } });
+}
+</script>
+
+<template>
+  <div v-if="cache" 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>
+        <div class="flex items-center gap-2">
+          <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 }}
+          </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 }}
+          </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.
+        </p>
+      </div>
+      <button
+        class="p-1 rounded hover:bg-zinc-800 text-zinc-400"
+        title="Reconnect stream"
+        @click="connect"
+      >
+        <RefreshCw class="w-3.5 h-3.5" />
+      </button>
+    </div>
+
+    <!-- Empty (no plugins at all) -->
+    <div
+      v-if="cache.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-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.
+        </div>
+      </div>
+    </div>
+
+    <!-- Master / detail -->
+    <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="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…"
+              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)">
+            <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)"
+            >
+              <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'"
+                />
+                <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"
+                >
+                  {{ bootDurations[p.name]!.toFixed(1) }}ms
+                </span>
+              </div>
+              <div class="text-[10px] text-zinc-500 mt-0.5 pl-5">
+                {{ p.app }}
+              </div>
+            </button>
+          </li>
+        </ul>
+      </aside>
+
+      <!-- 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>
+        <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'"
+              />
+              <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>
+              <button
+                v-if="detail.source"
+                type="button"
+                class="ml-auto inline-flex items-center"
+                @click="sourcePreview = detail.source!"
+              >
+                <SourcePill :source="detail.source" />
+              </button>
+            </div>
+          </div>
+
+          <div class="flex-1 overflow-auto">
+            <!-- Contributed 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
+                <span class="text-zinc-600 normal-case tracking-normal ml-1">
+                  ({{ contributedHooks.length }})
+                </span>
+              </h3>
+              <div v-if="contributedHooks.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"
+                  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="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{{
+                      h.listeners === 1 ? "" : "s"
+                    }}
+                  </span>
+                </li>
+              </ul>
+            </section>
+
+            <!-- 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>
+                <span class="text-[10px] text-zinc-500 tabular-nums">
+                  {{ detailRecords.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
+                <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"
+                  :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 }) }}
+                  </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>
+                </li>
+              </ul>
+            </section>
+          </div>
+        </div>
+      </main>
+    </div>
+
+    <SourceDrawer :source="sourcePreview" @close="sourcePreview = null" />
+  </div>
+</template>

package/src/pages/Projects.vue

@@ -0,0 +1,272 @@
+<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.
+ *
+ * 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.
+ */
+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[] }>;
+
+const router = useRouter();
+const catalog = ref<Record<string, ProjectSnapshot>>({});
+const status = ref<StatusMap>({});
+const currentCwd = ref<string | null>(null);
+const copiedCwd = ref<string | null>(null);
+/** cwd → human 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));
+});
+
+async function refresh() {
+  catalog.value = loadCatalog();
+  try {
+    const proj = await fetch("/__nwire/project");
+    if (proj.ok) {
+      const body = (await proj.json()) as { cwd: string };
+      currentCwd.value = body.cwd;
+    }
+  } 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 = {};
+  }
+}
+
+function copyStartCommand(cwd: string) {
+  const cmd = `cd "${cwd}" && nwire studio`;
+  void navigator.clipboard.writeText(cmd);
+  copiedCwd.value = cwd;
+  setTimeout(() => {
+    if (copiedCwd.value === cwd) copiedCwd.value = null;
+  }, 1500);
+}
+
+function openProject(cwd: string) {
+  if (cwd === currentCwd.value) {
+    void router.push("/");
+  } else {
+    // Shape A — set the active project and hard-reload so every page
+    // re-fetches against the new cwd. SSE streams + cached state are
+    // tied to the previous project, so a fresh load is the clean pivot.
+    setActiveProjectCwd(cwd);
+    window.location.assign("/");
+  }
+}
+
+function forget(cwd: string) {
+  forgetProject(cwd);
+  catalog.value = loadCatalog();
+}
+
+/**
+ * Fire `nwire cache` against this project's cwd via the Studio supervisor.
+ * The supervisor runs it in the background; we poll briefly to surface the
+ * "done" state. The composition snapshot updates the next time that project
+ * is opened (Studio reads the rebuilt manifest on load).
+ */
+async function rescan(cwd: string) {
+  rescanState.value = { ...rescanState.value, [cwd]: "running" };
+  try {
+    const res = await fetch("/__nwire/run/exec", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ command: "cache", cwd }),
+    });
+    if (!res.ok) throw new Error(`exec failed: ${res.status}`);
+    // Optimistic — supervisor returned 200 means the child spawned;
+    // surface the result in the UI for a beat then revert.
+    rescanState.value = { ...rescanState.value, [cwd]: "done" };
+    setTimeout(() => {
+      const { [cwd]: _, ...rest } = rescanState.value;
+      void _;
+      rescanState.value = rest;
+    }, 2_000);
+  } catch {
+    rescanState.value = { ...rescanState.value, [cwd]: "error" };
+    setTimeout(() => {
+      const { [cwd]: _, ...rest } = rescanState.value;
+      void _;
+      rescanState.value = rest;
+    }, 3_000);
+  }
+}
+
+onMounted(() => {
+  void refresh();
+});
+</script>
+
+<template>
+  <div class="h-full overflow-auto">
+    <div class="max-w-5xl mx-auto px-8 py-6 space-y-6">
+      <header class="flex items-center justify-between">
+        <div>
+          <h1 class="text-xl font-semibold tracking-tight">Projects</h1>
+          <p class="text-sm text-zinc-500 mt-1">
+            Every Nwire project this browser has opened. Snapshots are stored locally; live status
+            reads each project's
+            <code class="text-zinc-400">.nwire/processes/</code>.
+          </p>
+        </div>
+        <button
+          class="text-xs text-zinc-500 hover:text-zinc-200 px-2 py-1 rounded border border-zinc-800 hover:border-zinc-700"
+          @click="refresh"
+        >
+          Refresh
+        </button>
+      </header>
+
+      <div v-if="projects.length === 0" class="text-sm text-zinc-500 py-12 text-center">
+        No projects yet. Each time you run
+        <code class="text-zinc-300">nwire studio</code> from a project, it gets added here.
+      </div>
+
+      <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-3">
+        <article
+          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"
+        >
+          <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>
+                <span
+                  v-if="p.cwd === currentCwd"
+                  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-1 truncate" :title="p.cwd">
+                {{ p.cwd }}
+              </div>
+            </div>
+            <button
+              class="opacity-0 group-hover:opacity-100 text-zinc-600 hover:text-rose-400 transition-opacity p-1"
+              :title="`Forget ${p.name}`"
+              @click="forget(p.cwd)"
+            >
+              <Trash2 class="w-3.5 h-3.5" />
+            </button>
+          </div>
+
+          <!-- Composition -->
+          <div v-if="p.composition" class="grid grid-cols-4 gap-2 mt-4 text-xs text-zinc-400">
+            <div>
+              <div class="text-zinc-600 text-[10px] uppercase tracking-wide">apps</div>
+              <div>{{ p.composition.apps }}</div>
+            </div>
+            <div>
+              <div class="text-zinc-600 text-[10px] uppercase tracking-wide">modules</div>
+              <div>{{ p.composition.modules }}</div>
+            </div>
+            <div>
+              <div class="text-zinc-600 text-[10px] uppercase tracking-wide">actions</div>
+              <div>{{ p.composition.actions }}</div>
+            </div>
+            <div>
+              <div class="text-zinc-600 text-[10px] uppercase tracking-wide">events</div>
+              <div>{{ p.composition.events }}</div>
+            </div>
+          </div>
+          <div v-else class="mt-4 text-[11px] text-zinc-600">No composition snapshot yet.</div>
+
+          <!-- 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">
+                <Activity class="w-3 h-3 text-emerald-400" />
+                <span class="text-emerald-300"> {{ status[p.cwd].processes.length }} running </span>
+                <span class="text-zinc-600 font-mono">
+                  ({{ status[p.cwd].processes.map((x) => x.port ?? "?").join(", ") }})
+                </span>
+              </template>
+              <template v-else>
+                <Circle class="w-3 h-3 text-zinc-700" />
+                <span class="text-zinc-600">idle</span>
+              </template>
+            </div>
+            <div class="flex items-center gap-2">
+              <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"
+              >
+                <RefreshCw
+                  class="w-3 h-3"
+                  :class="{ 'animate-spin': rescanState[p.cwd] === 'running' }"
+                />
+                <template v-if="rescanState[p.cwd] === 'running'">Scanning…</template>
+                <template v-else-if="rescanState[p.cwd] === 'done'">Rescanned</template>
+                <template v-else-if="rescanState[p.cwd] === 'error'">Failed</template>
+                <template v-else>Re-scan</template>
+              </button>
+              <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"
+              >
+                <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"
+                @click="openProject(p.cwd)"
+              >
+                {{ p.cwd === currentCwd ? "Open" : "Switch" }}
+              </button>
+            </div>
+          </div>
+          <div class="text-[10px] text-zinc-700 mt-2">
+            last visited {{ new Date(p.lastVisited).toLocaleString() }}
+          </div>
+        </article>
+      </div>
+    </div>
+  </div>
+</template>