@nwire/studio 0.12.0 → 0.13.0

package/src/pages/operate/CommandsPanel.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+/**
+ * Operate › Commands — fire `nwire` CLI commands via the supervisor and tail
+ * their output. Same `/__nwire/run/*` surface as Run; the list comes from
+ * `/__nwire/run/commands` and processes are narrowed to the ones this panel
+ * launched (`nwire …`). Lifecycle + logs ride the shared composables.
+ */
+import { computed, onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { Play, Square, RefreshCw, Trash2, Terminal } from "lucide-vue-next";
+import { StatusBadge, EmptyState } from "@/components";
+import { useProcesses } from "@/composables/useProcesses";
+import { useLogTail } from "@/composables/useLogTail";
+import { statusTone, isActive } from "@/lib/operate";
+
+interface CommandEntry {
+  name: string;
+  description: string;
+}
+
+const route = useRoute();
+const {
+  processes,
+  error: procError,
+  load,
+  exec,
+  stop,
+  forget,
+} = useProcesses({
+  filter: (p) => p.topology.startsWith("nwire "),
+  intervalMs: 1500,
+});
+
+const commands = ref<CommandEntry[]>([]);
+const argsInput = ref("");
+const startBusy = ref(false);
+const selectedCommand = ref<string | null>(null);
+const selectedId = ref<string | null>(null);
+const { logs } = useLogTail(selectedId);
+
+const selectedProc = computed(() => processes.value.find((p) => p.id === selectedId.value) ?? null);
+
+function applyPreselect(): void {
+  const name = route.query.name;
+  selectedCommand.value = typeof name === "string" && name.length > 0 ? name : null;
+}
+watch(() => route.query.name, applyPreselect);
+
+async function loadCommands(): Promise<void> {
+  try {
+    const res = await fetch("/__nwire/run/commands");
+    commands.value = ((await res.json()) as { commands: CommandEntry[] }).commands ?? [];
+  } catch {
+    commands.value = [];
+  }
+}
+
+async function onExec(name: string): Promise<void> {
+  startBusy.value = true;
+  selectedCommand.value = name;
+  const argv = argsInput.value.trim().split(/\s+/).filter(Boolean);
+  const proc = await exec(name, argv);
+  if (proc) selectedId.value = proc.id;
+  startBusy.value = false;
+}
+
+async function onForget(id: string): Promise<void> {
+  if (selectedId.value === id) selectedId.value = null;
+  await forget(id);
+}
+
+onMounted(() => {
+  applyPreselect();
+  void loadCommands();
+});
+</script>
+
+<template>
+  <div class="h-full flex" data-testid="commands-panel">
+    <!-- Command picker -->
+    <div class="w-1/3 border-r border-zinc-800 flex flex-col">
+      <div class="border-b border-zinc-800 px-4 py-3">
+        <input
+          v-model="argsInput"
+          placeholder="extra args (optional, e.g. `units`)"
+          class="w-full bg-zinc-900 border border-zinc-800 rounded px-2 py-1.5 text-xs placeholder:text-zinc-600 focus:outline-none focus:border-zinc-600"
+        />
+        <div v-if="procError" class="text-xs text-rose-400 mt-2">
+          {{ procError }}
+        </div>
+      </div>
+      <div class="flex-1 overflow-auto">
+        <div v-if="!commands.length" class="p-4 text-xs text-zinc-500">No commands available.</div>
+        <button
+          v-for="c in commands"
+          :key="c.name"
+          class="w-full text-left px-4 py-2.5 border-b border-zinc-900 hover:bg-zinc-900/50 transition-colors disabled:opacity-50"
+          :class="{ 'bg-zinc-900': selectedCommand === c.name }"
+          :data-testid="`command-row-${c.name}`"
+          :disabled="startBusy"
+          @click="onExec(c.name)"
+        >
+          <div class="flex items-center gap-2">
+            <Play class="w-3 h-3 text-emerald-400 shrink-0" />
+            <span class="font-mono text-sm">nwire {{ c.name }}</span>
+          </div>
+          <div class="text-xs text-zinc-500 mt-1 ml-5">{{ c.description }}</div>
+        </button>
+      </div>
+    </div>
+
+    <!-- Active processes -->
+    <div class="w-1/3 border-r border-zinc-800 flex flex-col">
+      <div class="border-b border-zinc-800 px-4 py-3 flex items-center justify-between">
+        <h2 class="text-sm font-semibold tracking-tight">Active</h2>
+        <button class="text-zinc-500 hover:text-zinc-300" title="Refresh" @click="load">
+          <RefreshCw class="w-3 h-3" />
+        </button>
+      </div>
+      <div class="flex-1 overflow-auto">
+        <EmptyState
+          v-if="processes.length === 0"
+          :icon="Terminal"
+          title="No runs yet"
+          hint="Click a command on the left to launch it."
+        />
+        <button
+          v-for="p in processes"
+          :key="p.id"
+          class="w-full text-left px-4 py-2 border-b border-zinc-900 hover:bg-zinc-900/50"
+          :class="{ 'bg-zinc-900': selectedId === p.id }"
+          data-testid="command-process-row"
+          @click="selectedId = p.id"
+        >
+          <div class="flex items-center gap-2">
+            <StatusBadge
+              :status="statusTone(p.status)"
+              :label="p.status"
+              :pulse="p.status === 'running'"
+            />
+            <span class="font-mono text-sm truncate">{{ p.topology }}</span>
+          </div>
+          <div class="text-[10px] text-zinc-500 mt-1 ml-1">
+            pid {{ p.pid ?? "—" }} · started {{ p.startedAt.slice(11, 19) }}
+          </div>
+        </button>
+      </div>
+    </div>
+
+    <!-- Output -->
+    <div class="flex-1 flex flex-col min-w-0">
+      <div class="border-b border-zinc-800 px-4 py-3 flex items-center justify-between">
+        <h2 class="text-sm font-semibold tracking-tight font-mono truncate">
+          {{ selectedProc ? selectedProc.topology : "Output" }}
+        </h2>
+        <div v-if="selectedProc" class="flex items-center gap-2">
+          <button
+            v-if="isActive(selectedProc.status)"
+            class="text-xs text-zinc-400 hover:text-rose-400 flex items-center gap-1"
+            @click="stop(selectedProc.id)"
+          >
+            <Square class="w-3 h-3" /> stop
+          </button>
+          <button
+            class="text-xs text-zinc-400 hover:text-zinc-300 flex items-center gap-1"
+            @click="onForget(selectedProc.id)"
+          >
+            <Trash2 class="w-3 h-3" /> forget
+          </button>
+        </div>
+      </div>
+      <div class="flex-1 overflow-auto bg-zinc-950 font-mono text-xs p-4">
+        <div v-if="logs.length === 0" class="text-zinc-600">
+          Select a process to view its stdout.
+        </div>
+        <div
+          v-for="l in logs"
+          :key="l.seq"
+          :class="l.stream === 'stderr' ? 'text-rose-400' : 'text-zinc-300'"
+        >
+          {{ l.line }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/pages/{Dispatch.vue → operate/DispatchPanel.vue}

@@ -1,128 +1,80 @@
 <script setup lang="ts">
+/**
+ * Operate › Dispatch — invoke a registered handler.
+ *
+ * The handler list comes from the native manifest (`useManifest` → the flat
+ * `actions`/`queries` arrays, which carry the JSON input schema). Picking a
+ * target derives a form (or a JSON textarea for nested shapes), and Dispatch
+ * POSTs to `/_nwire/dispatch`.
+ */
 import { computed, ref, watch } from "vue";
-import { useCache } from "@/lib/cache";
 import { Zap, Search, Send, CheckCircle2, XCircle } from "lucide-vue-next";
+import { useManifest } from "@/composables/useManifest";
+import {
+  dispatchTargets,
+  filterTargets,
+  schemaFields,
+  scaffoldInput,
+  allInlineRenderable,
+  type DispatchTarget,
+} from "@/lib/dispatch-form";
+import { MetadataInspector, EmptyState } from "@/components";
+
+const { manifest, isLoading, isError, error } = useManifest();
 
-const { cache } = useCache();
 const filter = ref("");
 const selectedName = ref<string | null>(null);
 const input = ref<string>("{}");
 const tenant = ref("");
 const userId = ref("");
+const inputMode = ref<"form" | "json">("form");
+const busy = ref(false);
+
 /**
- * Two ways to author the payload:
- *
- *   - "form" — inline inputs derived from the OpenAPI schema (strings,
- *     numbers, booleans, enums). Best for happy-path dispatches.
- *   - "json" — raw textarea. Fallback for nested objects/arrays or when
- *     the operator wants full control.
- *
- * The two views read+write the same `input` JSON string so toggling
- * keeps the value in sync.
+ * Dispatch result, mirroring `@nwire/koa`'s inspect route: `{ result }` on
+ * success, `{ error: { code, summary } }` on failure. `__clientError` is set
+ * only when the request never reached the wire (network / parse).
  */
-const inputMode = ref<"form" | "json">("form");
 const result = ref<
-  | { ok: true; envelope: { messageId: string; correlationId: string }; result: unknown }
-  | { ok: false; error: string }
+  | { result: unknown }
+  | { error: { code: string; summary?: string } }
+  | { __clientError: string }
   | null
 >(null);
-const busy = ref(false);
 
-const filtered = computed(() => {
-  if (!cache.value) return [];
-  const q = filter.value.toLowerCase();
-  return cache.value.actions.filter(
-    (a) =>
-      !q ||
-      a.name.toLowerCase().includes(q) ||
-      a.app.toLowerCase().includes(q) ||
-      (a.description ?? "").toLowerCase().includes(q),
-  );
-});
+const targets = computed(() => dispatchTargets(manifest.value));
+const filtered = computed(() => filterTargets(targets.value, filter.value));
+const selected = computed<DispatchTarget | null>(
+  () => filtered.value.find((t) => t.name === selectedName.value) ?? null,
+);
 
-const selected = computed(() => filtered.value.find((a) => a.name === selectedName.value) ?? null);
+const fields = computed(() => schemaFields(selected.value?.inputSchema));
+const allInline = computed(() => allInlineRenderable(fields.value));
 
-// Schema field list for the visible "Expected input" panel. Reads
-// JSON-Schema-shape properties out of the cached action and produces a
-// flat row per top-level field: name, type, required flag, default,
-// enum options. Nested objects show their type as "object" — the user
-// edits them in the JSON textarea.
-interface SchemaField {
-  name: string;
-  type: string;
-  required: boolean;
-  default?: unknown;
-  enum?: string[];
-}
-const schemaFields = computed<SchemaField[]>(() => {
-  if (!selected.value) return [];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const schema = selected.value.inputSchema as any;
-  if (!schema?.properties) return [];
-  const required = new Set<string>(Array.isArray(schema.required) ? schema.required : []);
-  const out: SchemaField[] = [];
-  for (const [name, raw] of Object.entries(schema.properties)) {
-    const p = raw as {
-      type?: string | string[];
-      default?: unknown;
-      enum?: unknown[];
-      format?: string;
-    };
-    const t = Array.isArray(p.type) ? p.type.join(" | ") : (p.type ?? "any");
-    const field: SchemaField = { name, type: t, required: required.has(name) };
-    if (p.default !== undefined) field.default = p.default;
-    if (Array.isArray(p.enum)) field.enum = p.enum.map(String);
-    out.push(field);
+const resultOk = computed(() => !!result.value && "result" in result.value);
+const resultError = computed<string | null>(() => {
+  const r = result.value;
+  if (!r) return null;
+  if ("__clientError" in r) return r.__clientError;
+  if ("error" in r) return r.error.summary ? `${r.error.code}: ${r.error.summary}` : r.error.code;
+  return null;
+});
+const resultBody = computed<Record<string, unknown>>(() => {
+  const r = result.value;
+  if (r && "result" in r) {
+    const v = r.result;
+    return v && typeof v === "object" ? (v as Record<string, unknown>) : { value: v };
   }
-  return out;
+  return {};
 });
 
-// When a different action is picked, seed a sensible input scaffold from
-// the schema's required fields.
 watch(selectedName, () => {
   result.value = null;
   if (!selected.value) return;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const schema = selected.value.inputSchema as any;
-  const scaffold: Record<string, unknown> = {};
-  if (schema?.properties) {
-    for (const [key, prop] of Object.entries(schema.properties)) {
-      const p = prop as { type?: string | string[]; default?: unknown };
-      if (p.default !== undefined) {
-        scaffold[key] = p.default;
-        continue;
-      }
-      const t = Array.isArray(p.type) ? p.type[0] : p.type;
-      switch (t) {
-        case "string":
-          scaffold[key] = "";
-          break;
-        case "number":
-          scaffold[key] = 0;
-          break;
-        case "boolean":
-          scaffold[key] = false;
-          break;
-        case "array":
-          scaffold[key] = [];
-          break;
-        case "object":
-          scaffold[key] = {};
-          break;
-        default:
-          scaffold[key] = null;
-      }
-    }
-  }
-  input.value = JSON.stringify(scaffold, null, 2);
+  input.value = JSON.stringify(scaffoldInput(selected.value.inputSchema), null, 2);
+  inputMode.value = allInline.value ? "form" : "json";
 });
 
-/**
- * Inline form mode reads + writes individual fields of the parsed input
- * JSON. We work off a single source of truth (`input` JSON string) and
- * project per-field getters/setters so the form view stays consistent
- * with the textarea when the operator toggles between them.
- */
 function parsedInput(): Record<string, unknown> {
   try {
     const parsed = JSON.parse(input.value);
@@ -131,31 +83,16 @@ function parsedInput(): Record<string, unknown> {
     return {};
   }
 }
-
 function setField(name: string, value: unknown): void {
   const obj = parsedInput();
   obj[name] = value;
   input.value = JSON.stringify(obj, null, 2);
 }
-
 function getField(name: string): unknown {
   return parsedInput()[name];
 }
 
-/**
- * Fields the inline form can render. Anything else (nested objects,
- * arrays of objects, unions) falls back to the JSON textarea.
- */
-function isInlineRenderable(field: SchemaField): boolean {
-  const t = field.type.split(" | ")[0];
-  return t === "string" || t === "number" || t === "integer" || t === "boolean";
-}
-
-const allFieldsInlineRenderable = computed(
-  () => schemaFields.value.length > 0 && schemaFields.value.every(isInlineRenderable),
-);
-
-async function dispatch() {
+async function dispatch(): Promise<void> {
   if (!selected.value) return;
   busy.value = true;
   result.value = null;
@@ -165,7 +102,7 @@ async function dispatch() {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
-        action: selected.value.name,
+        handler: selected.value.name,
         input: parsed,
         tenant: tenant.value || undefined,
         userId: userId.value || undefined,
@@ -173,7 +110,7 @@ async function dispatch() {
     });
     result.value = (await res.json()) as typeof result.value;
   } catch (err) {
-    result.value = { ok: false, error: (err as Error).message };
+    result.value = { __clientError: (err as Error).message };
   } finally {
     busy.value = false;
   }
@@ -181,49 +118,60 @@ async function dispatch() {
 </script>
 
 <template>
-  <div v-if="cache" class="h-full flex">
-    <!-- Action picker -->
-    <div class="w-2/5 border-r border-zinc-800 flex flex-col">
+  <div class="h-full flex" data-testid="dispatch-panel">
+    <!-- Handler picker -->
+    <div class="w-2/5 border-r border-zinc-800 flex flex-col min-w-0">
       <div class="border-b border-zinc-800 px-4 py-3">
-        <h1 class="text-lg font-semibold tracking-tight">Dispatch</h1>
-        <div class="relative mt-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="pick an action…"
+            placeholder="pick a handler…"
+            data-testid="dispatch-filter"
             class="w-full bg-zinc-900 border border-zinc-800 rounded pl-7 pr-2 py-1.5 text-sm placeholder:text-zinc-600 focus:outline-none focus:border-zinc-600"
           />
         </div>
       </div>
       <div class="flex-1 overflow-auto">
+        <div v-if="isError" class="p-4 text-xs text-rose-300">{{ error }}</div>
+        <div v-else-if="isLoading && !targets.length" class="p-4 text-xs text-zinc-500">
+          Loading handlers…
+        </div>
+        <div v-else-if="!filtered.length" class="p-4 text-xs text-zinc-500">No handlers match.</div>
         <button
-          v-for="a in filtered"
-          :key="`${a.app}::${a.name}`"
+          v-for="t in filtered"
+          :key="`${t.kind}::${t.name}`"
           class="w-full text-left px-4 py-2.5 border-b border-zinc-900 hover:bg-zinc-900/50 transition-colors"
-          :class="{ 'bg-zinc-900': selectedName === a.name }"
-          @click="selectedName = a.name"
+          :class="{ 'bg-zinc-900': selectedName === t.name }"
+          :data-testid="`dispatch-row-${t.name}`"
+          @click="selectedName = t.name"
         >
-          <div class="flex items-center justify-between">
+          <div class="flex items-center justify-between gap-2">
             <div class="flex items-center gap-2 min-w-0">
               <Zap class="w-3 h-3 text-amber-400 shrink-0" />
-              <span class="font-mono text-sm truncate">{{ a.name }}</span>
+              <span class="font-mono text-sm truncate">{{ t.name }}</span>
             </div>
-            <span class="text-[10px] text-zinc-500">{{ a.app }}</span>
+            <span class="text-[10px] text-zinc-500 shrink-0">{{ t.app || t.kind }}</span>
           </div>
-          <div v-if="a.description" class="text-[10px] text-zinc-500 ml-5 mt-0.5 line-clamp-1">
-            {{ a.description }}
+          <div v-if="t.description" class="text-[10px] text-zinc-500 ml-5 mt-0.5 line-clamp-1">
+            {{ t.description }}
           </div>
         </button>
       </div>
     </div>
 
     <!-- Form + result -->
-    <div class="flex-1 overflow-auto">
-      <div v-if="!selected" class="p-6 text-zinc-500 text-sm">Pick an action to dispatch.</div>
+    <div class="flex-1 overflow-auto min-w-0">
+      <EmptyState
+        v-if="!selected"
+        :icon="Send"
+        title="Pick a handler to dispatch"
+        hint="Actions and queries from the manifest. The form is derived from the input schema."
+      />
       <div v-else class="p-6 space-y-5">
         <div>
           <div class="text-[10px] uppercase tracking-wide text-zinc-500">
-            {{ selected.app }}
+            {{ selected.app || selected.kind }}
           </div>
           <h2 class="font-mono text-xl mt-1">{{ selected.name }}</h2>
           <p v-if="selected.description" class="text-sm text-zinc-400 mt-2 max-w-2xl">
@@ -254,80 +202,37 @@ async function dispatch() {
           </div>
         </div>
 
-        <div v-if="schemaFields.length > 0">
-          <label class="text-[10px] uppercase tracking-wide text-zinc-500 mb-1 block">
-            Expected input schema
-          </label>
-          <div
-            class="rounded border border-zinc-800 bg-zinc-950/50 divide-y divide-zinc-800"
-            data-testid="schema-panel"
-          >
-            <div
-              v-for="f in schemaFields"
-              :key="f.name"
-              class="px-3 py-2 flex items-center justify-between gap-3 text-xs"
-            >
-              <div class="flex items-center gap-2 min-w-0">
-                <span class="font-mono text-zinc-200">{{ f.name }}</span>
-                <span
-                  v-if="f.required"
-                  class="text-[9px] uppercase tracking-wider text-amber-400"
-                  title="required"
-                  >req</span
-                >
-                <span v-else class="text-[9px] uppercase tracking-wider text-zinc-600">opt</span>
-              </div>
-              <div class="flex items-center gap-2 text-zinc-500 shrink-0">
-                <code class="text-[10px] bg-zinc-900 px-1.5 py-0.5 rounded">{{ f.type }}</code>
-                <span v-if="f.default !== undefined" class="text-[10px]">
-                  = <code class="text-zinc-400">{{ JSON.stringify(f.default) }}</code>
-                </span>
-                <span v-if="f.enum" class="text-[10px]">
-                  : <code class="text-zinc-400">{{ f.enum.join(" | ") }}</code>
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-
         <div>
           <label
             class="text-[10px] uppercase tracking-wide text-zinc-500 flex items-center justify-between mb-1"
           >
             <span>Input</span>
-            <span class="flex items-center gap-2">
+            <span v-if="allInline" class="flex items-center gap-2">
               <button
-                v-if="allFieldsInlineRenderable"
                 class="text-[10px] px-2 py-0.5 rounded border border-zinc-800 normal-case tracking-normal"
-                :class="{
-                  'bg-zinc-800 text-zinc-100': inputMode === 'form',
-                  'text-zinc-500': inputMode !== 'form',
-                }"
-                @click="inputMode = 'form'"
+                :class="inputMode === 'form' ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-500'"
                 data-testid="dispatch-mode-form"
+                @click="inputMode = 'form'"
               >
                 Form
               </button>
               <button
                 class="text-[10px] px-2 py-0.5 rounded border border-zinc-800 normal-case tracking-normal"
-                :class="{
-                  'bg-zinc-800 text-zinc-100': inputMode === 'json',
-                  'text-zinc-500': inputMode !== 'json',
-                }"
-                @click="inputMode = 'json'"
+                :class="inputMode === 'json' ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-500'"
                 data-testid="dispatch-mode-json"
+                @click="inputMode = 'json'"
               >
                 JSON
               </button>
             </span>
           </label>
-          <!-- Form view — one input per schema field, primitive types only. -->
+
           <div
-            v-if="inputMode === 'form' && allFieldsInlineRenderable"
+            v-if="inputMode === 'form' && allInline"
             class="space-y-2 rounded border border-zinc-800 bg-zinc-950/50 p-3"
             data-testid="dispatch-form"
           >
-            <div v-for="f in schemaFields" :key="f.name" class="flex flex-col gap-1">
+            <div v-for="f in fields" :key="f.name" class="flex flex-col gap-1">
               <label
                 class="text-[10px] uppercase tracking-wide text-zinc-500 flex items-center gap-2"
               >
@@ -338,7 +243,6 @@ async function dispatch() {
                   >req</span
                 >
               </label>
-              <!-- enum → select -->
               <select
                 v-if="f.enum"
                 class="bg-zinc-900 border border-zinc-800 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-zinc-600"
@@ -347,7 +251,6 @@ async function dispatch() {
               >
                 <option v-for="e in f.enum" :key="e" :value="e">{{ e }}</option>
               </select>
-              <!-- boolean → checkbox -->
               <label
                 v-else-if="f.type.startsWith('boolean')"
                 class="flex items-center gap-2 text-sm"
@@ -359,7 +262,6 @@ async function dispatch() {
                 />
                 <span class="text-zinc-400">{{ getField(f.name) ? "true" : "false" }}</span>
               </label>
-              <!-- number/integer → number input -->
               <input
                 v-else-if="f.type.startsWith('number') || f.type.startsWith('integer')"
                 type="number"
@@ -367,7 +269,6 @@ async function dispatch() {
                 :value="getField(f.name) as number"
                 @input="setField(f.name, Number(($event.target as HTMLInputElement).value))"
               />
-              <!-- string → text input -->
               <input
                 v-else
                 type="text"
@@ -377,12 +278,12 @@ async function dispatch() {
               />
             </div>
           </div>
-          <!-- JSON view — raw textarea fallback for nested/complex shapes. -->
           <textarea
             v-else
             v-model="input"
             rows="10"
             spellcheck="false"
+            data-testid="dispatch-json"
             class="w-full bg-zinc-950 border border-zinc-800 rounded p-3 font-mono text-xs focus:outline-none focus:border-zinc-600"
           ></textarea>
         </div>
@@ -390,29 +291,23 @@ async function dispatch() {
         <button
           class="px-4 py-2 rounded bg-emerald-700 hover:bg-emerald-600 disabled:opacity-50 text-sm font-medium flex items-center gap-2"
           :disabled="busy"
+          data-testid="dispatch-submit"
           @click="dispatch"
         >
           <Send class="w-4 h-4" />
           {{ busy ? "Dispatching…" : "Dispatch" }}
         </button>
 
-        <div v-if="result">
+        <div v-if="result" data-testid="dispatch-result">
           <div
-            v-if="result.ok"
+            v-if="resultOk"
             class="rounded border border-emerald-900 bg-emerald-950/30 p-3 space-y-2"
           >
             <div class="flex items-center gap-2 text-emerald-300">
               <CheckCircle2 class="w-4 h-4" />
               <span class="font-medium">Accepted</span>
             </div>
-            <div class="text-[10px] font-mono text-zinc-400">
-              msg {{ result.envelope.messageId }}
-              <br />
-              corr {{ result.envelope.correlationId }}
-            </div>
-            <pre class="text-[11px] bg-zinc-950 border border-zinc-800 rounded p-2 overflow-auto">{{
-              JSON.stringify(result.result, null, 2)
-            }}</pre>
+            <MetadataInspector :data="resultBody" label="Result" />
           </div>
           <div
             v-else
@@ -421,7 +316,9 @@ async function dispatch() {
             <XCircle class="w-4 h-4 text-rose-400 mt-0.5" />
             <div>
               <div class="font-medium text-rose-300">Rejected</div>
-              <div class="text-sm text-rose-200 mt-1 font-mono">{{ result.error }}</div>
+              <div class="text-sm text-rose-200 mt-1 font-mono">
+                {{ resultError }}
+              </div>
             </div>
           </div>
         </div>