@nwire/studio 0.12.1 → 0.13.1

package/src/lib/normalize-cache.ts

@@ -1,92 +0,0 @@
-/**
- * Cache normalizer — defends Studio against stale or partial
- * `.nwire/manifest.json` payloads.
- *
- * Reality check: the manifest is generated by `@nwire/scan` and its schema
- * evolves. A Studio served against a manifest built before a given field
- * exists must not crash — pages that depend on that field should render
- * an empty state, not a TypeError.
- *
- * The normalizer:
- *   1. Returns `null` if the value isn't an object (Studio renders an error
- *      banner instead of throwing).
- *   2. Fills every expected array field with `[]`.
- *   3. Fills nested shapes (graph.events) with safe defaults.
- *   4. Reports which fields were missing — surfaced as a warning so the
- *      operator knows the cache is stale and can rebuild.
- */
-
-import type { Cache } from "./cache";
-
-export interface NormalizeResult {
-  /** The normalized cache, ready to render. `null` if the input is unusable. */
-  readonly cache: Cache | null;
-  /** Field paths that were missing in the input and filled with defaults. */
-  readonly missingFields: readonly string[];
-  /** Human-readable description of what made the input unusable. */
-  readonly fatalError?: string;
-}
-
-const ARRAY_FIELDS = [
-  "apps",
-  "actions",
-  "events",
-  "actors",
-  "projections",
-  "queries",
-  "resolvers",
-  "routes",
-  "workflows",
-  "externalCalls",
-  "inboundWebhooks",
-  "outboxes",
-  "inboxes",
-  "crons",
-  "hooks",
-  "plugins",
-  "sinks",
-  "bindings",
-] as const;
-
-export function normalizeCache(raw: unknown): NormalizeResult {
-  if (raw === null || typeof raw !== "object" || Array.isArray(raw)) {
-    return {
-      cache: null,
-      missingFields: [],
-      fatalError: "Manifest is not a JSON object.",
-    };
-  }
-
-  const input = raw as Record<string, unknown>;
-  const missing: string[] = [];
-
-  const out: Record<string, unknown> = {
-    generatedAt:
-      typeof input.generatedAt === "string" ? input.generatedAt : new Date(0).toISOString(),
-  };
-  if (typeof input.generatedAt !== "string") missing.push("generatedAt");
-
-  for (const field of ARRAY_FIELDS) {
-    if (Array.isArray(input[field])) {
-      out[field] = input[field];
-    } else {
-      out[field] = [];
-      missing.push(field);
-    }
-  }
-
-  // graph.events — nested arrays
-  const rawGraph = input.graph as { events?: unknown } | undefined;
-  if (rawGraph && typeof rawGraph === "object" && Array.isArray(rawGraph.events)) {
-    out.graph = { events: rawGraph.events };
-  } else {
-    out.graph = { events: [] };
-    if (!rawGraph) missing.push("graph");
-    else missing.push("graph.events");
-  }
-
-  return {
-    cache: out as unknown as Cache,
-    missingFields: missing,
-  };
-}

package/src/pages/Actions.vue

@@ -1,171 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useCache } from "@/lib/cache";
-import { Search, Zap, Shield, Globe, Lock, Anchor, Activity } from "lucide-vue-next";
-import { SchemaTree, SourcePill, SourceDrawer } from "@/components";
-
-const route = useRoute();
-const router = useRouter();
-const { cache } = useCache();
-const filter = ref("");
-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) {
-    selected.value = name;
-  }
-}
-
-onMounted(applyQueryPreselect);
-watch(() => route.query.name, applyQueryPreselect);
-
-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.description ?? "").toLowerCase().includes(q) ||
-      a.app.toLowerCase().includes(q),
-  );
-});
-
-const detail = computed(() => filtered.value.find((a) => a.name === selected.value) ?? null);
-</script>
-
-<template>
-  <div v-if="cache" class="h-full flex">
-    <div class="w-2/5 border-r border-zinc-800 flex flex-col">
-      <div class="border-b border-zinc-800 px-4 py-3">
-        <h1 class="text-lg font-semibold tracking-tight">Actions</h1>
-        <div class="relative mt-2">
-          <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 by name, app, description…"
-            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 class="text-[10px] text-zinc-500 mt-1">
-          {{ filtered.length }} / {{ cache.actions.length }}
-        </div>
-      </div>
-      <div class="flex-1 overflow-auto">
-        <button
-          v-for="a in filtered"
-          :key="`${a.app}::${a.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': selected === a.name }"
-          @click="selected = a.name"
-        >
-          <div class="flex items-center justify-between">
-            <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>
-            </div>
-            <div class="flex items-center gap-1 shrink-0">
-              <Shield v-if="a.policy" class="w-3 h-3 text-blue-400" />
-              <component
-                :is="a.public ? Globe : Lock"
-                class="w-3 h-3"
-                :class="a.public ? 'text-emerald-400' : 'text-zinc-500'"
-                :title="a.public ? 'public — other apps may dispatch' : 'private — app-internal'"
-              />
-              <span class="text-[10px] text-zinc-500">{{ a.app }}</span>
-            </div>
-          </div>
-          <div v-if="a.description" class="text-xs text-zinc-500 mt-1 line-clamp-2 ml-5">
-            {{ a.description }}
-          </div>
-        </button>
-      </div>
-    </div>
-
-    <div class="flex-1 overflow-auto">
-      <div v-if="!detail" class="p-6 text-zinc-500 text-sm">
-        Select an action to view its schema and metadata.
-      </div>
-      <div v-else class="p-6 space-y-5">
-        <div>
-          <div class="text-[10px] uppercase tracking-wide text-zinc-500">
-            {{ detail.app }}
-          </div>
-          <h2 class="font-mono text-xl mt-1">{{ detail.name }}</h2>
-          <p v-if="detail.description" class="text-sm text-zinc-400 mt-2 max-w-2xl">
-            {{ detail.description }}
-          </p>
-        </div>
-
-        <div class="flex flex-wrap gap-2">
-          <span
-            v-if="detail.hasInlineHandler"
-            class="text-[10px] uppercase tracking-wide px-2 py-0.5 rounded bg-emerald-950/50 border border-emerald-900 text-emerald-300"
-          >
-            inline handler
-          </span>
-          <span
-            v-if="detail.retry"
-            class="text-[10px] uppercase tracking-wide px-2 py-0.5 rounded bg-amber-950/50 border border-amber-900 text-amber-300"
-          >
-            retry
-          </span>
-          <span
-            v-if="detail.policy"
-            class="text-[10px] uppercase tracking-wide px-2 py-0.5 rounded bg-blue-950/50 border border-blue-900 text-blue-300"
-          >
-            policy: {{ detail.policy }}
-          </span>
-        </div>
-
-        <div v-if="detail.persona || detail.journeyStep" class="text-xs space-y-1 text-zinc-400">
-          <div v-if="detail.persona" class="flex items-center gap-2">
-            <span class="text-zinc-500 w-24">Persona</span>
-            <span class="font-mono">{{ detail.persona }}</span>
-          </div>
-          <div v-if="detail.journeyStep" class="flex items-center gap-2">
-            <span class="text-zinc-500 w-24">Journey step</span>
-            <span class="font-mono">{{ detail.journeyStep }}</span>
-          </div>
-        </div>
-
-        <div v-if="detail.source" class="flex items-center gap-2">
-          <SourcePill :source="detail.source" @click="sourcePreview = detail.source!" />
-        </div>
-
-        <SchemaTree :schema="detail.inputSchema" label="Input schema" />
-
-        <div class="flex flex-wrap gap-2">
-          <button
-            type="button"
-            class="inline-flex items-center gap-1.5 text-xs px-2 py-1 rounded border border-zinc-800 bg-zinc-900/50 hover:bg-zinc-800/70 text-zinc-300"
-            :data-testid="`hooks-link-${detail.name}`"
-            @click="
-              router.push({ path: '/hooks', query: { name: `action.before:${detail.name}` } })
-            "
-          >
-            <Anchor class="w-3 h-3 text-zinc-500" />
-            View hooks
-          </button>
-          <button
-            type="button"
-            class="inline-flex items-center gap-1.5 text-xs px-2 py-1 rounded border border-zinc-800 bg-zinc-900/50 hover:bg-zinc-800/70 text-zinc-300"
-            :data-testid="`trace-link-${detail.name}`"
-            @click="router.push({ path: '/trace', query: { action: detail.name } })"
-          >
-            <Activity class="w-3 h-3 text-zinc-500" />
-            Recent traces of this
-          </button>
-        </div>
-
-        <div class="text-xs text-zinc-500">
-          Use the Try page for form-from-schema dispatch against the live runtime.
-        </div>
-      </div>
-    </div>
-    <SourceDrawer :source="sourcePreview" @close="sourcePreview = null" />
-  </div>
-</template>

package/src/pages/Apps.vue

@@ -1,177 +0,0 @@
-<script setup lang="ts">
-/**
- * Apps — every App registered in this workspace. An App is the
- * bounded-context unit; multi-app systems compose via
- * `appCompose(a, b)` and run side-by-side under one endpoint.
- */
-import { computed, ref } from "vue";
-import { useCache } from "@/lib/cache";
-import { Network, Puzzle } from "lucide-vue-next";
-import {
-  PageHeader,
-  FilterInput,
-  EmptyState,
-  MasterDetail,
-  KindBadge,
-  ListRow,
-} from "@/components";
-
-const { cache } = useCache();
-const filter = ref("");
-const selected = ref<string | null>(null);
-
-const filtered = computed(() => {
-  if (!cache.value) return [];
-  const q = filter.value.toLowerCase();
-  return cache.value.apps.filter(
-    (a) =>
-      !q || a.name.toLowerCase().includes(q) || (a.description ?? "").toLowerCase().includes(q),
-  );
-});
-
-const detail = computed(() => filtered.value.find((a) => a.name === selected.value) ?? null);
-
-function countFor(
-  appName: string,
-  kind: "actions" | "events" | "projections" | "queries" | "workflows",
-): number {
-  if (!cache.value) return 0;
-  return cache.value[kind].filter((x: { app: string }) => x.app === appName).length;
-}
-
-function pluginsFor(appName: string) {
-  if (!cache.value) return [];
-  return cache.value.plugins.filter((p) => p.app === appName);
-}
-
-function sinksFor(appName: string) {
-  if (!cache.value) return [];
-  return cache.value.sinks?.filter((s) => s.app === appName) ?? [];
-}
-</script>
-
-<template>
-  <div v-if="cache" class="h-full flex flex-col" data-testid="apps-page">
-    <div class="p-6 pb-3 border-b border-zinc-800">
-      <PageHeader
-        title="Apps"
-        subtitle="Every App registered in this workspace — its plugins, surface, and outbound sinks."
-        :icon="Network"
-        icon-color="text-emerald-400"
-        :count="filtered.length"
-        :total="cache.apps.length"
-      />
-    </div>
-
-    <EmptyState
-      v-if="cache.apps.length === 0"
-      title="No apps in cache"
-      hint="Apps are declared via createApp({appName, plugins}). Run `nwire cache` after adding one."
-      :icon="Network"
-    />
-
-    <MasterDetail v-else class="flex-1">
-      <template #listHeader>
-        <FilterInput v-model="filter" placeholder="filter by name…" />
-      </template>
-
-      <template #list>
-        <ListRow
-          v-for="app in filtered"
-          :key="app.name"
-          :selected="selected === app.name"
-          @click="selected = app.name"
-        >
-          <template #title>
-            <Network class="w-3 h-3 text-emerald-400 shrink-0" />
-            <span class="font-mono text-sm truncate">{{ app.name }}</span>
-          </template>
-          <template #meta>
-            <span class="text-[10px] text-zinc-500">
-              {{ app.plugins.length }} plugin{{ app.plugins.length === 1 ? "" : "s" }}
-            </span>
-          </template>
-          <template v-if="app.description" #description>
-            {{ app.description }}
-          </template>
-        </ListRow>
-      </template>
-
-      <template #empty
-        >Select an app to see its plugin stack, primitive counts, and sinks.</template
-      >
-
-      <template v-if="detail" #detail>
-        <div class="p-6 space-y-6" data-testid="app-detail">
-          <div>
-            <h2 class="font-mono text-xl">{{ detail.name }}</h2>
-            <p v-if="detail.description" class="text-sm text-zinc-400 mt-2 max-w-2xl">
-              {{ detail.description }}
-            </p>
-          </div>
-
-          <div class="space-y-3">
-            <h3 class="text-xs uppercase tracking-wide text-zinc-500">Plugins</h3>
-            <div v-if="pluginsFor(detail.name).length === 0" class="text-xs text-zinc-600">
-              No plugins installed.
-            </div>
-            <div v-else class="flex flex-wrap gap-2">
-              <div
-                v-for="p in pluginsFor(detail.name)"
-                :key="p.name"
-                class="inline-flex items-center gap-1.5 rounded border border-zinc-800 bg-zinc-900/50 px-2.5 py-1 text-xs font-mono"
-              >
-                <Puzzle class="w-3 h-3 text-fuchsia-400" />
-                {{ p.name }}
-              </div>
-            </div>
-          </div>
-
-          <div class="space-y-3">
-            <h3 class="text-xs uppercase tracking-wide text-zinc-500">Outbound sinks</h3>
-            <div v-if="sinksFor(detail.name).length === 0" class="text-xs text-zinc-600">
-              No outbound sinks installed. Events stay in-process.
-            </div>
-            <div v-else class="space-y-1">
-              <div
-                v-for="s in sinksFor(detail.name)"
-                :key="s.name"
-                class="font-mono text-xs flex items-center gap-2"
-              >
-                <KindBadge variant="public">{{ s.position }}</KindBadge>
-                <span class="text-amber-200">{{ s.name }}</span>
-                <span v-if="s.kind" class="text-zinc-500">· {{ s.kind }}</span>
-              </div>
-            </div>
-          </div>
-
-          <div class="space-y-3">
-            <h3 class="text-xs uppercase tracking-wide text-zinc-500">Surface</h3>
-            <div class="grid grid-cols-5 gap-3 text-sm">
-              <div>
-                <div class="text-zinc-500 text-[10px] uppercase">actions</div>
-                <div class="tabular-nums">{{ countFor(detail.name, "actions") }}</div>
-              </div>
-              <div>
-                <div class="text-zinc-500 text-[10px] uppercase">events</div>
-                <div class="tabular-nums">{{ countFor(detail.name, "events") }}</div>
-              </div>
-              <div>
-                <div class="text-zinc-500 text-[10px] uppercase">projections</div>
-                <div class="tabular-nums">{{ countFor(detail.name, "projections") }}</div>
-              </div>
-              <div>
-                <div class="text-zinc-500 text-[10px] uppercase">queries</div>
-                <div class="tabular-nums">{{ countFor(detail.name, "queries") }}</div>
-              </div>
-              <div>
-                <div class="text-zinc-500 text-[10px] uppercase">workflows</div>
-                <div class="tabular-nums">{{ countFor(detail.name, "workflows") }}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </template>
-    </MasterDetail>
-  </div>
-</template>