@nwire/studio 0.9.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Alex Gefter / 200apps Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,72 @@
+# @nwire/studio
+
+> Vue 3 dev-time control plane for any Nwire app — static topology + live traces + a kernel-backed Run page.
+
+A Vite + Vue 3 + Tailwind 4 + VueFlow SPA that reads `.nwire/manifest.json`
+(emitted by `@nwire/scan`) and `/__nwire/*` middleware on a running wire
+to render the system as it's actually wired. Designed to ship as the
+default dev surface — not a separate dashboard you have to spin up.
+
+## Install
+
+Usually launched via the CLI rather than installed standalone.
+
+```bash
+nwire studio
+# → http://localhost:7777
+```
+
+## Quick start
+
+From any Nwire repo with a `.nwire/` cache and (optionally) a running app:
+
+```bash
+nwire cache    # rebuild .nwire/*.json from source
+nwire studio   # open browser to :7777
+```
+
+Studio reads the cache + live runtime over `/__nwire/*` middleware
+exposed by the Vite dev server (manifest, telemetry stream, run
+supervisor, dispatch).
+
+## Pages
+
+| Page      | Reads                                | Renders                                                                                                        |
+| --------- | ------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
+| Overview  | `manifest.json`                      | Per-app summary, counts, links.                                                                                |
+| Topology  | `graph.json` + manifest              | VueFlow graph of modules + cross-domain event edges.                                                           |
+| Modules   | `modules.json`                       | Per-domain card with badges (public/private, persona, journeyStep).                                            |
+| Actions   | `actions.json`                       | Action table with SLO + retry + emits.                                                                         |
+| Events    | `events.json`                        | Event catalog grouped by audience/outcome.                                                                     |
+| Resolvers | `resolvers.json` + `routes.json`     | Resolver bindings with their HTTP mount tuples.                                                                |
+| Workflows | `workflows.json`                     | Reactions + sagas with state diagrams.                                                                         |
+| Hooks     | `hooks.json` + live `.tap()`         | Every `hook()` in the registry with chain + listener counts, click-to-open chips, live step taps.              |
+| Plugins   | `plugins.json`                       | Plugins + modules-compiled-as-plugins (distinguished by `kind`).                                               |
+| Commands  | `commands.json`                      | Operator `defineCommand` entries with run buttons.                                                             |
+| Live      | `/__nwire/events/stream` (SSE)       | Tail every domain event as it fires.                                                                           |
+| Trace     | `/__nwire/telemetry/stream` (SSE)    | Causation tree for one `correlationId`; Play Trace replays telemetry across canvas with amber-glow per sticky. |
+| Dispatch  | `/__nwire/dispatch`                  | Form-driven action invocation against a live wire.                                                             |
+| Run       | `/__nwire/run/*` (kernel supervisor) | 3-column picker / processes / live stdout — boots wires from the browser.                                      |
+
+## Surface (programmatic)
+
+| Export / route             | Role                                                            |
+| -------------------------- | --------------------------------------------------------------- |
+| `nwire studio` CLI command | Boots the Studio Vite dev server.                               |
+| `/__nwire/manifest`        | Serves the disk cache.                                          |
+| `/__nwire/run/*`           | Start/stop/list processes; SSE for live stdout (kernel-driven). |
+| `/__nwire/telemetry/*`     | `recent` + `stream` over the runtime's `onTelemetry` stream.    |
+| `/__nwire/events/*`        | Domain-event tail.                                              |
+| Reusable shadcn-vue lib    | Buttons, badges, tables, ErrorBoundary used across pages.       |
+
+## Related
+
+- `@nwire/scan` — produces every JSON file Studio reads at boot.
+- `@nwire/cli` — `nwire studio` is its entry point.
+- `@nwire/runner` — supplies the `RunnerSupervisor` that backs the Run page.
+- `@nwire/hooks` — Studio's Hooks page is a thin reflection of `listHooks()` + `.tap()`.
+- `@nwire/mcp` — the same `/__nwire/*` surface AI clients reach via MCP.
+
+## Status
+
+v0.x — pages are stable; cache schema is treated as the contract. A separate cloud product (`@nwire/studio-cloud`) layers history, multi-deploy diffing, AI debug, and team affordances on top — shipped separately.

package/components.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/style.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "composables": "@/composables",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib"
+  },
+  "iconLibrary": "lucide"
+}

package/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nwire Studio</title>
+  </head>
+  <body class="bg-zinc-950 text-zinc-100 antialiased">
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@nwire/studio",
+  "version": "0.9.1",
+  "description": "Nwire Studio — visual companion for the framework. Vue 3 + Vite + shadcn-vue + VueFlow. System topology, action runner, actor browser, projection viewer, DLQ inspector.",
+  "keywords": [
+    "devtools",
+    "nwire",
+    "shadcn",
+    "studio",
+    "vue",
+    "vueflow"
+  ],
+  "license": "MIT",
+  "files": [
+    "src",
+    "index.html",
+    "vite.config.ts",
+    "components.json",
+    "tsconfig.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "dependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/controls": "^1.1.2",
+    "@vue-flow/core": "^1.42.5",
+    "@vue-flow/minimap": "^1.5.3",
+    "@vueuse/core": "^11.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "elkjs": "^0.11.1",
+    "lucide-vue-next": "^0.469.0",
+    "monaco-editor": "^0.55.0",
+    "reka-ui": "^2.5.1",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^4.0.0",
+    "vite": "npm:rolldown-vite@latest",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "@nwire/kernel": "0.9.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.60.0",
+    "@storybook/vue3-vite": "^10.4.0",
+    "@types/node": "^22.19.9",
+    "@vue/test-utils": "^2.4.10",
+    "happy-dom": "^20.9.0",
+    "storybook": "^10.4.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.6",
+    "vue-tsc": "^2.2.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "test:unit": "vitest run",
+    "test:e2e": "playwright test"
+  }
+}

package/src/App.vue

@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, ref, watch, computed } from "vue";
+import { RouterLink, RouterView, useRoute } from "vue-router";
+import {
+  upsertCurrent,
+  loadCatalog,
+  getActiveProjectCwd,
+  setActiveProjectCwd,
+  type ProjectSnapshot,
+} from "@/lib/project-catalog";
+import {
+  Home,
+  Network,
+  Boxes,
+  Zap,
+  Radio,
+  GitBranch,
+  Activity,
+  RefreshCw,
+  Send,
+  Waves,
+  Play,
+  Workflow,
+  Anchor,
+  Puzzle,
+  FolderOpen,
+} from "lucide-vue-next";
+import { useCache } from "@/lib/cache";
+import { ErrorBoundary } from "@/components";
+import { Button } from "@/components/ui/button";
+
+const route = useRoute();
+const { cache, loading, error, missingFields, reload } = useCache();
+
+// Project identity — multi-project (Shape A). The active project is
+// stored in localStorage; the server uses `?project=<cwd>` (injected via
+// the fetch shim in main.ts) to scope every endpoint. We need to register
+// every catalog cwd with the server's allowlist before any further fetch
+// fires, so the boot sequence runs sequentially.
+const project = ref<{ name: string; cwd: string } | null>(null);
+const catalog = ref<Record<string, ProjectSnapshot>>({});
+
+async function bootProjects() {
+  // Server-side registration happens in main.ts before mount (so the
+  // cache fetch has an accepted cwd). Here we just resolve the active
+  // project's metadata + load the catalog into reactive state.
+  catalog.value = loadCatalog();
+  const stored = getActiveProjectCwd();
+  try {
+    const res = await fetch("/__nwire/project");
+    if (res.ok) {
+      const body = (await res.json()) as { name: string; cwd: string };
+      project.value = body;
+      // First-time mount with no active selection — pin it now so the
+      // catalog page + future requests have something to point at.
+      if (!stored) setActiveProjectCwd(body.cwd);
+    }
+  } catch {
+    // header just shows "Nwire Studio" if the fetch fails
+  }
+  persistSnapshot();
+}
+
+const catalogList = computed<ProjectSnapshot[]>(() =>
+  Object.values(catalog.value).sort((a, b) => b.lastVisited.localeCompare(a.lastVisited)),
+);
+
+function switchProject(cwd: string) {
+  setActiveProjectCwd(cwd);
+  // Hard reload — every page's data depends on the active project, and
+  // SSE streams are tied to the old one. A fresh page guarantees a clean
+  // pivot without untangling every page's reactive subscriptions.
+  window.location.reload();
+}
+
+// ─── Project switcher dropdown — click-driven + close-on-outside ────
+const switcherOpen = ref(false);
+const switcherRef = ref<HTMLElement | null>(null);
+
+function toggleSwitcher(): void {
+  switcherOpen.value = !switcherOpen.value;
+}
+
+function onDocumentClick(event: MouseEvent): void {
+  if (!switcherOpen.value) return;
+  const target = event.target as Node | null;
+  if (target && switcherRef.value && !switcherRef.value.contains(target)) {
+    switcherOpen.value = false;
+  }
+}
+
+function onEscape(event: KeyboardEvent): void {
+  if (event.key === "Escape") switcherOpen.value = false;
+}
+
+onMounted(() => {
+  void bootProjects();
+  document.addEventListener("click", onDocumentClick);
+  document.addEventListener("keydown", onEscape);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("click", onDocumentClick);
+  document.removeEventListener("keydown", onEscape);
+});
+
+// Whenever the manifest finishes loading (initial fetch + reloads), update
+// this project's catalog snapshot so /projects shows fresh composition
+// counts the next time Studio opens. Project metadata might land before
+// the cache does, so we watch both.
+watch([project, cache], persistSnapshot);
+
+function persistSnapshot() {
+  if (!project.value) return;
+  const c = cache.value;
+  upsertCurrent({
+    cwd: project.value.cwd,
+    name: project.value.name,
+    lastVisited: new Date().toISOString(),
+    composition: c
+      ? {
+          apps: c.apps.length,
+          modules: c.modules.length,
+          actions: c.actions.length,
+          events: c.events.length,
+          resolvers: c.resolvers?.length ?? 0,
+          workflows: c.workflows?.length ?? 0,
+        }
+      : undefined,
+  });
+}
+
+async function rebuildCache() {
+  // Studio's runner-plugin exposes the CLI surface; "cache" rebuilds .nwire/.
+  await fetch("/__nwire/run/exec", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ command: "cache" }),
+  });
+  // Give the supervisor a beat to write the new manifest, then refresh.
+  setTimeout(() => void reload(), 800);
+}
+
+// Studio nav — grouped by what a working dev actually does.
+// Daily work first (Trace + Try + Processes are the high-frequency tools);
+// Explorer for browsing the surface; Architecture for the big picture.
+const navGroups = [
+  {
+    label: "Daily",
+    items: [
+      { to: "/projects", label: "Projects", icon: FolderOpen }, // catalog of every project ever opened
+      { to: "/", label: "Home", icon: Home },
+      { to: "/trace", label: "Trace", icon: Workflow }, // causal tree, one correlationId
+      { to: "/live", label: "Stream", icon: Waves }, // raw live event firehose
+      { to: "/dispatch", label: "Try", icon: Send }, // form-driven action dispatch
+      { to: "/run", label: "Processes", icon: Play }, // start/stop wires + logs
+    ],
+  },
+  {
+    label: "Explorer",
+    items: [
+      { to: "/modules", label: "Modules", icon: Boxes },
+      { to: "/actions", label: "Actions", icon: Zap },
+      { to: "/events", label: "Events", icon: Radio },
+      { to: "/workflows", label: "Workflows", icon: GitBranch },
+      { to: "/plugins", label: "Plugins", icon: Puzzle },
+      { to: "/hooks", label: "Hooks", icon: Anchor },
+    ],
+  },
+  {
+    label: "Architecture",
+    items: [{ to: "/topology", label: "Topology", icon: Network }],
+  },
+];
+</script>
+
+<template>
+  <div class="flex h-full">
+    <aside class="w-56 border-r border-zinc-800 bg-zinc-950 flex flex-col">
+      <div class="px-4 py-4 border-b border-zinc-800">
+        <div class="flex items-center gap-2">
+          <Activity class="w-5 h-5 text-emerald-400" />
+          <span class="font-semibold tracking-tight">Nwire Studio</span>
+        </div>
+        <div v-if="project" ref="switcherRef" class="mt-1 relative">
+          <button
+            class="w-full flex items-center justify-between text-xs text-zinc-400 hover:text-zinc-100 transition-colors text-left rounded px-1 -mx-1"
+            :class="{ 'bg-zinc-900 text-zinc-100': switcherOpen }"
+            :title="project.cwd"
+            :aria-haspopup="catalogList.length > 1"
+            :aria-expanded="switcherOpen"
+            data-testid="project-switcher-toggle"
+            @click.stop="toggleSwitcher"
+          >
+            <span class="truncate">{{ project.name }}</span>
+            <span
+              class="text-zinc-600 text-[10px] ml-1 transition-transform"
+              :class="{ 'rotate-180': switcherOpen }"
+              >▾</span
+            >
+          </button>
+          <!-- Click-driven switcher: opens on toggle, closes on outside-click
+               or Escape. The /projects page is the rich version; this is the
+               always-available shortcut. -->
+          <div
+            v-if="switcherOpen && catalogList.length > 1"
+            class="absolute z-20 left-0 mt-1 w-64 bg-zinc-900 border border-zinc-800 rounded-md shadow-xl py-1"
+            data-testid="project-switcher-menu"
+          >
+            <button
+              v-for="p in catalogList"
+              :key="p.cwd"
+              class="w-full text-left px-3 py-1.5 text-xs hover:bg-zinc-800 flex items-center justify-between gap-2"
+              :class="{ 'text-emerald-400': p.cwd === project.cwd }"
+              @click="switchProject(p.cwd)"
+            >
+              <span class="truncate">{{ p.name }}</span>
+              <span class="text-[10px] text-zinc-600 font-mono truncate" :title="p.cwd">
+                {{ p.cwd.split("/").slice(-2).join("/") }}
+              </span>
+            </button>
+            <div class="border-t border-zinc-800 mt-1 pt-1">
+              <RouterLink
+                to="/projects"
+                class="block px-3 py-1.5 text-[11px] text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800"
+                @click="switcherOpen = false"
+              >
+                All projects →
+              </RouterLink>
+            </div>
+          </div>
+        </div>
+        <div class="text-[10px] text-zinc-600 mt-0.5">v0 · OSS</div>
+      </div>
+      <nav class="flex-1 px-2 py-3 space-y-3 overflow-y-auto">
+        <div v-for="group in navGroups" :key="group.label">
+          <div class="px-2 pb-1 text-[10px] font-semibold uppercase tracking-wider text-zinc-600">
+            {{ group.label }}
+          </div>
+          <div class="space-y-0.5">
+            <RouterLink
+              v-for="item in group.items"
+              :key="item.to"
+              :to="item.to"
+              class="flex items-center gap-2 px-2 py-1.5 rounded text-sm text-zinc-400 hover:bg-zinc-900 hover:text-zinc-100 transition-colors"
+              :class="{
+                'bg-zinc-900 text-zinc-100': route.path === item.to,
+              }"
+            >
+              <component :is="item.icon" class="w-4 h-4" />
+              {{ item.label }}
+            </RouterLink>
+          </div>
+        </div>
+      </nav>
+      <div class="border-t border-zinc-800 px-4 py-3 text-xs text-zinc-500 space-y-1">
+        <div v-if="cache" class="flex items-center justify-between">
+          <span>{{ cache.apps.length }} apps · {{ cache.modules.length }} BCs</span>
+          <button
+            class="text-zinc-400 hover:text-zinc-100 transition-colors"
+            title="Reload manifest"
+            @click="reload"
+          >
+            <RefreshCw class="w-3 h-3" />
+          </button>
+        </div>
+        <div v-if="cache" class="text-zinc-600 text-[10px]">
+          built {{ new Date(cache.generatedAt).toLocaleString() }}
+        </div>
+      </div>
+    </aside>
+
+    <main class="flex-1 overflow-auto">
+      <div
+        v-if="error"
+        class="m-6 p-4 rounded bg-red-950/50 border border-red-900 text-red-200"
+        data-testid="cache-error"
+      >
+        <div class="font-medium mb-1">Cache load error</div>
+        <div class="text-sm">{{ error }}</div>
+        <Button variant="secondary" size="sm" class="mt-3" @click="rebuildCache">
+          Rebuild cache
+        </Button>
+      </div>
+      <div v-else-if="loading && !cache" class="p-6 text-zinc-400">Loading manifest…</div>
+      <template v-else>
+        <div
+          v-if="missingFields.length > 0"
+          class="m-4 p-3 rounded bg-amber-950/30 border border-amber-900 text-amber-200 text-xs flex items-center justify-between gap-3"
+          data-testid="stale-cache-banner"
+        >
+          <div>
+            <span class="font-medium">Manifest is missing fields</span> ({{
+              missingFields.join(", ")
+            }}). Likely built with an older scanner — rebuild for the full picture.
+          </div>
+          <Button variant="secondary" size="sm" @click="rebuildCache">Rebuild</Button>
+        </div>
+        <ErrorBoundary>
+          <RouterView />
+        </ErrorBoundary>
+      </template>
+    </main>
+  </div>
+</template>

package/src/components/EmptyState.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { Network, GitBranch, Database } from "lucide-vue-next";
+import EmptyState from "./EmptyState.vue";
+
+const meta: Meta<typeof EmptyState> = {
+  title: "Components/EmptyState",
+  component: EmptyState,
+  tags: ["autodocs"],
+};
+export default meta;
+
+type Story = StoryObj<typeof EmptyState>;
+
+export const TitleOnly: Story = {
+  args: { title: "No routes in cache" },
+};
+
+export const WithHint: Story = {
+  args: {
+    title: "No routes in cache",
+    hint: "Routes are wired in app code via httpInterface().wire(...). Run `nwire cache` after adding one.",
+    icon: Network,
+  },
+};
+
+export const Workflows: Story = {
+  args: {
+    title: "No workflows in cache",
+    hint: "Workflows are declared via defineWorkflow(name, ({ on, send }) => ...).",
+    icon: GitBranch,
+  },
+};
+
+export const WithAction: Story = {
+  args: {
+    title: "Cache is empty",
+    hint: "Run nwire cache to populate the manifest.",
+    icon: Database,
+  },
+  render: (args) => ({
+    components: { EmptyState },
+    setup: () => ({ args }),
+    template: `
+      <EmptyState v-bind="args">
+        <template #actions>
+          <button class="text-xs px-3 py-1.5 rounded bg-zinc-800 hover:bg-zinc-700 text-zinc-100">
+            Rebuild cache
+          </button>
+        </template>
+      </EmptyState>
+    `,
+  }),
+};

package/src/components/EmptyState.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+/**
+ * Empty state — what to show when a list/detail panel has no content.
+ * Pass an icon + title + optional hint. Action slot is for "Build cache"-type
+ * recovery buttons.
+ */
+import type { FunctionalComponent } from "vue";
+
+defineProps<{
+  title: string;
+  hint?: string;
+  icon?: FunctionalComponent;
+}>();
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-center justify-center h-full p-12 text-center"
+    data-testid="empty-state"
+  >
+    <component :is="icon" v-if="icon" class="w-10 h-10 text-zinc-700 mb-4" />
+    <h2 class="text-sm font-medium text-zinc-400">{{ title }}</h2>
+    <p v-if="hint" class="text-xs text-zinc-600 mt-2 max-w-md">{{ hint }}</p>
+    <div class="mt-4">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

package/src/components/ErrorBoundary.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+/**
+ * Vue 3 error boundary — catches runtime errors raised by descendant
+ * components and renders a fallback instead of letting the whole app
+ * unmount.
+ *
+ *   <ErrorBoundary>
+ *     <RouterView />
+ *   </ErrorBoundary>
+ *
+ * `onErrorCaptured` returning `false` stops the error from propagating
+ * to the global handler. We also call `console.error` so devtools still
+ * surface the stack.
+ */
+import { onErrorCaptured, ref } from "vue";
+import { AlertTriangle, RotateCw } from "lucide-vue-next";
+
+const err = ref<Error | null>(null);
+
+onErrorCaptured((e) => {
+  err.value = e instanceof Error ? e : new Error(String(e));
+  // eslint-disable-next-line no-console
+  console.error("[Studio] page error captured by boundary:", err.value);
+  return false; // stop propagation; we own the surface
+});
+
+function reset() {
+  err.value = null;
+}
+</script>
+
+<template>
+  <div v-if="err" class="p-6" data-testid="error-boundary">
+    <div class="rounded-lg border border-rose-900 bg-rose-950/30 p-4 max-w-2xl space-y-3">
+      <div class="flex items-center gap-2 text-rose-300">
+        <AlertTriangle class="w-5 h-5 shrink-0" />
+        <h2 class="font-medium">This page hit a runtime error</h2>
+      </div>
+      <p class="text-sm text-zinc-300 font-mono">{{ err.message }}</p>
+      <details v-if="err.stack" class="text-xs text-zinc-500">
+        <summary class="cursor-pointer">stack</summary>
+        <pre class="mt-2 whitespace-pre-wrap">{{ err.stack }}</pre>
+      </details>
+      <div class="flex items-center gap-2 pt-2">
+        <button
+          class="text-xs px-3 py-1.5 rounded bg-zinc-800 hover:bg-zinc-700 text-zinc-100 flex items-center gap-1.5"
+          @click="reset"
+        >
+          <RotateCw class="w-3 h-3" />
+          Try again
+        </button>
+        <span class="text-xs text-zinc-500">
+          A stale <code>.nwire/manifest.json</code> is the most common cause — rerun
+          <code>nwire cache</code>.
+        </span>
+      </div>
+    </div>
+  </div>
+  <slot v-else />
+</template>

package/src/components/FilterInput.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+import FilterInput from "./FilterInput.vue";
+
+const meta: Meta<typeof FilterInput> = {
+  title: "Components/FilterInput",
+  component: FilterInput,
+  tags: ["autodocs"],
+};
+export default meta;
+
+type Story = StoryObj<typeof FilterInput>;
+
+export const Empty: Story = {
+  args: { modelValue: "", placeholder: "filter…" },
+  render: (args) => ({
+    components: { FilterInput },
+    setup() {
+      const value = ref(args.modelValue);
+      return { args, value };
+    },
+    template: `<FilterInput v-bind="args" v-model="value" /><p class="mt-3 text-xs text-zinc-500">value: <code>{{ value }}</code></p>`,
+  }),
+};
+
+export const WithValue: Story = {
+  args: { modelValue: "moderation", placeholder: "filter by name, module, app…" },
+};
+
+export const Compact: Story = {
+  args: { modelValue: "", placeholder: "filter routes…", compact: true },
+};