@nastechai/agent 0.16.0 → 0.17.0

package/src/plugins/registry.ts

@@ -0,0 +1,151 @@
+/**
+ * Dashboard Plugin SDK + Registry
+ *
+ * Exposes React, UI components, hooks, and utilities on the window so
+ * that plugin bundles can use them without bundling their own copies.
+ *
+ * Plugins call window.__NASTECH_PLUGINS__.register(name, Component)
+ * to register their tab component.
+ */
+
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  useRef,
+  useContext,
+  createContext,
+} from "react";
+import { api, fetchJSON } from "@/lib/api";
+import { cn, timeAgo, isoTimeAgo } from "@/lib/utils";
+import { Badge } from "@nastechai/ui/ui/components/badge";
+import { Button } from "@nastechai/ui/ui/components/button";
+import { Checkbox } from "@nastechai/ui/ui/components/checkbox";
+import { Select, SelectOption } from "@nastechai/ui/ui/components/select";
+import { Card, CardHeader, CardTitle, CardContent } from "@nastechai/ui/ui/components/card";
+import { Input } from "@nastechai/ui/ui/components/input";
+import { Label } from "@nastechai/ui/ui/components/label";
+import { Separator } from "@nastechai/ui/ui/components/separator";
+import { Tabs, TabsList, TabsTrigger } from "@nastechai/ui/ui/components/tabs";
+import { useI18n } from "@/i18n";
+import { registerSlot, PluginSlot } from "./slots";
+
+// ---------------------------------------------------------------------------
+// Plugin registry — plugins call register() to add their component.
+// ---------------------------------------------------------------------------
+
+type RegistryListener = () => void;
+
+const _registered: Map<string, React.ComponentType> = new Map();
+const _loadErrors: Map<string, string> = new Map();
+const _listeners: Set<RegistryListener> = new Set();
+
+function _notify() {
+  for (const fn of _listeners) {
+    try { fn(); } catch { /* ignore */ }
+  }
+}
+
+/** Re-run registry subscribers (e.g. after a plugin script onload, or dev HMR re-inject). */
+export function notifyPluginRegistry() {
+  _notify();
+}
+
+/** Register a plugin component. Called by plugin JS bundles. */
+function registerPlugin(name: string, component: React.ComponentType) {
+  _loadErrors.delete(name);
+  _registered.set(name, component);
+  _notify();
+}
+
+/** Get a registered component by plugin name. */
+export function getPluginComponent(name: string): React.ComponentType | undefined {
+  return _registered.get(name);
+}
+
+export function getPluginLoadError(name: string): string | undefined {
+  return _loadErrors.get(name);
+}
+
+export function setPluginLoadError(name: string, message: string) {
+  _loadErrors.set(name, message);
+  _notify();
+}
+
+/** Subscribe to registry changes (returns unsubscribe fn). */
+export function onPluginRegistered(fn: RegistryListener): () => void {
+  _listeners.add(fn);
+  return () => _listeners.delete(fn);
+}
+
+/** Get current count of registered plugins. */
+export function getRegisteredCount(): number {
+  return _registered.size;
+}
+
+// ---------------------------------------------------------------------------
+// Expose SDK + registry on window
+// ---------------------------------------------------------------------------
+
+declare global {
+  interface Window {
+    __NASTECH_PLUGIN_SDK__?: unknown;
+    __NASTECH_PLUGINS__?: {
+      register: typeof registerPlugin;
+      registerSlot: typeof registerSlot;
+    };
+  }
+}
+
+export function exposePluginSDK() {
+  window.__NASTECH_PLUGINS__ = {
+    register: registerPlugin,
+    registerSlot,
+  };
+
+  window.__NASTECH_PLUGIN_SDK__ = {
+    // React core — plugins use these instead of importing react
+    React,
+    hooks: {
+      useState,
+      useEffect,
+      useCallback,
+      useMemo,
+      useRef,
+      useContext,
+      createContext,
+    },
+
+    // NasTech API client
+    api,
+    // Raw fetchJSON for plugin-specific endpoints
+    fetchJSON,
+
+    // UI components — Nous DS where available, shadcn/ui primitives elsewhere.
+    components: {
+      Card,
+      CardHeader,
+      CardTitle,
+      CardContent,
+      Badge,
+      Button,
+      Checkbox,
+      Input,
+      Label,
+      Select,
+      SelectOption,
+      Separator,
+      Tabs,
+      TabsList,
+      TabsTrigger,
+      PluginSlot,
+    },
+
+    // Utilities
+    utils: { cn, timeAgo, isoTimeAgo },
+
+    // Hooks
+    useI18n,
+  };
+}

package/src/plugins/sdk.d.ts

@@ -0,0 +1,160 @@
+/**
+ * NasTech Dashboard Plugin SDK — typed contract (SPIKE)
+ * ====================================================
+ *
+ * This is the public type surface for ``window.__NASTECH_PLUGIN_SDK__`` and
+ * ``window.__NASTECH_PLUGINS__``, the globals the dashboard host exposes to
+ * plugin bundles (see ``web/src/plugins/registry.ts::exposePluginSDK``).
+ *
+ * STATUS: spike. This file documents the contract and gives plugin authors
+ * (in-repo IIFEs and external bundles alike) editor types without bundling
+ * their own copies of React / the API client. It is intentionally a
+ * hand-authored ambient declaration rather than ``typeof
+ * window.__NASTECH_PLUGIN_SDK__`` because:
+ *   1. The runtime object is assembled from many internal modules
+ *      (``@/lib/api``, ``@nastechai/ui``, …). Deriving the type would
+ *      leak those internal import paths into the public contract and couple
+ *      external plugins to the host's internal module layout.
+ *   2. A hand-authored contract is the *versioned API boundary* — changing
+ *      it is a deliberate act, visible in review, not an accidental
+ *      consequence of refactoring an internal helper.
+ *
+ * Versioning: bump ``NasTechPluginSDK["sdkVersion"]`` (and the
+ * ``SDK_CONTRACT_VERSION`` const the host exposes) on any
+ * backwards-incompatible change to this surface. Additive changes
+ * (new optional fields, new helpers) don't require a major bump.
+ *
+ * OPEN QUESTIONS for productionising this spike (do not block the auth fix):
+ *   - Ship as a published ``@nastech/dashboard-plugin-sdk`` types package, or
+ *     keep in-repo and copy into external plugin repos?
+ *   - Should the host assert at runtime that a plugin's declared
+ *     ``manifest.sdk_version`` is compatible before executing it?
+ *   - The ``components`` map is typed loosely as ``Record<string,
+ *     ComponentType>`` here; do we want exact per-component prop types
+ *     (pulls @nastechai/ui types into the contract) or is the loose
+ *     shape the right boundary for external authors?
+ */
+
+import type { ComponentType } from "react";
+
+// ---------------------------------------------------------------------------
+// Auth-relevant helpers (the surface this PR adds/sanctions)
+// ---------------------------------------------------------------------------
+
+/**
+ * JSON ``fetch`` for dashboard ``/api/...`` endpoints. Handles auth in both
+ * modes (loopback session-token header / gated cookie), throws
+ * ``Error("<status>: <body>")`` on non-2xx, and triggers the global
+ * 401 → /login redirect in gated mode. Use for all JSON plugin endpoints.
+ */
+export type FetchJSON = <T = unknown>(
+  url: string,
+  init?: RequestInit,
+  options?: { allowUnauthorized?: boolean },
+) => Promise<T>;
+
+/**
+ * Authenticated ``fetch`` for NON-JSON endpoints (uploads via ``FormData``,
+ * binary/blob downloads). Same auth handling as ``fetchJSON`` but returns
+ * the raw ``Response``, does not parse, does not throw on non-2xx, and does
+ * not run the 401 redirect. Plugins MUST use this (or ``fetchJSON``) instead
+ * of calling ``fetch`` with a hand-read ``window.__NASTECH_SESSION_TOKEN__``.
+ */
+export type AuthedFetch = (url: string, init?: RequestInit) => Promise<Response>;
+
+/**
+ * Build an absolute ``ws(s)://`` URL for a dashboard WebSocket endpoint with
+ * the correct auth query param for the active mode (single-use ``ticket`` in
+ * gated OAuth mode, ``token`` in loopback). Plugins MUST use this for any
+ * WebSocket instead of hand-assembling the URL + reading the session token.
+ */
+export type BuildWsUrl = (
+  path: string,
+  params?: Record<string, string>,
+) => Promise<string>;
+
+/** Lower-level: just the ``[authParamName, authParamValue]`` pair. */
+export type BuildWsAuthParam = () => Promise<[string, string]>;
+
+// ---------------------------------------------------------------------------
+// Registry surface (window.__NASTECH_PLUGINS__)
+// ---------------------------------------------------------------------------
+
+export interface PluginRegistry {
+  /** Register the plugin's main tab component by manifest name. */
+  register(name: string, component: ComponentType<Record<string, never>>): void;
+  /** Register a component into a named host slot. */
+  registerSlot(slot: string, name: string, component: ComponentType): void;
+}
+
+// ---------------------------------------------------------------------------
+// SDK surface (window.__NASTECH_PLUGIN_SDK__)
+// ---------------------------------------------------------------------------
+
+export interface NasTechPluginSDK {
+  /** Contract version of this SDK surface (see SDK_CONTRACT_VERSION). */
+  readonly sdkVersion: string;
+
+  /** React core — use instead of importing/bundling react. */
+  React: typeof import("react").default;
+  hooks: {
+    useState: typeof import("react").useState;
+    useEffect: typeof import("react").useEffect;
+    useCallback: typeof import("react").useCallback;
+    useMemo: typeof import("react").useMemo;
+    useRef: typeof import("react").useRef;
+    useContext: typeof import("react").useContext;
+    createContext: typeof import("react").createContext;
+  };
+
+  /**
+   * Typed convenience client for core dashboard endpoints. Typed permissively
+   * at the boundary (methods vary in arity and return type — most return
+   * ``Promise<T>``, a few return a URL string synchronously); plugins call the
+   * specific methods they need. See ``web/src/lib/api.ts`` for the concrete shape.
+   */
+  api: Record<string, (...args: never[]) => unknown>;
+
+  /** JSON fetch with host auth handling. */
+  fetchJSON: FetchJSON;
+  /** Authenticated raw fetch for uploads / blob downloads. */
+  authedFetch: AuthedFetch;
+  /** Build an auth'd WebSocket URL for the active mode. */
+  buildWsUrl: BuildWsUrl;
+  /** Resolve just the WS auth query-param pair. */
+  buildWsAuthParam: BuildWsAuthParam;
+
+  /**
+   * Shared UI primitives (Nous DS / shadcn). Typed permissively at the
+   * boundary: the host's concrete components (some of which require props like
+   * ``active``/``value``/``name``) must be assignable here, and external plugin
+   * authors render them dynamically without the host's internal prop types.
+   * ``ComponentType<never>`` accepts any component regardless of its prop
+   * requirements (props are contravariant).
+   */
+  components: Record<string, ComponentType<never>>;
+
+  utils: {
+    cn: (...classes: Array<string | false | null | undefined>) => string;
+    /** Relative-time formatter. Accepts an epoch-ms number. */
+    timeAgo: (ts: number) => string;
+    /** Relative-time formatter for an ISO-8601 string. */
+    isoTimeAgo: (iso: string) => string;
+  };
+
+  /**
+   * i18n hook. Returns the host's i18n context value; typed loosely at the
+   * boundary so the contract doesn't couple to the host's internal
+   * ``I18nContextValue`` shape. Plugins typically call ``useI18n().t(...)``.
+   */
+  useI18n: () => unknown;
+}
+
+declare global {
+  interface Window {
+    __NASTECH_PLUGIN_SDK__?: NasTechPluginSDK;
+    __NASTECH_PLUGINS__?: PluginRegistry;
+  }
+}
+
+export {};

package/src/plugins/slots.ts

@@ -0,0 +1,199 @@
+/**
+ * Plugin slot registry.
+ *
+ * Plugins can inject components into named locations in the app shell
+ * (header-left, sidebar, backdrop, etc.) by calling
+ * `window.__NASTECH_PLUGINS__.registerSlot(pluginName, slotName, Component)`
+ * from their JS bundle. Multiple plugins can populate the same slot — they
+ * render stacked in registration order.
+ *
+ * The canonical slot names are documented in `KNOWN_SLOT_NAMES` below. The
+ * registry accepts any string so plugin ecosystems can define their own
+ * slots; the shell only renders `<PluginSlot name="..." />` for the slots
+ * it knows about.
+ */
+
+import React, { Fragment, useEffect, useState } from "react";
+
+/** Slot locations the built-in shell renders. Plugins declaring any of
+ *  these in their manifest's `slots` field get wired in automatically.
+ *
+ *  Shell-wide slots:
+ *  - `backdrop`         — rendered inside `<Backdrop />`, above the noise layer
+ *  - `header-left`      — injected before the NasTech brand in the top bar
+ *  - `header-right`     — injected before the theme/language switchers
+ *  - `header-banner`    — injected below the top nav bar, full-width
+ *  - `sidebar`          — the cockpit sidebar rail (only rendered when
+ *                         `layoutVariant === "cockpit"`)
+ *  - `pre-main`         — rendered above the route outlet (inside `<main>`)
+ *  - `post-main`        — rendered below the route outlet (inside `<main>`)
+ *  - `footer-left`      — replaces the left footer cell content
+ *  - `footer-right`     — replaces the right footer cell content
+ *  - `overlay`          — fixed-position layer above everything else;
+ *                         useful for chrome (scanlines, vignettes) the
+ *                         theme's customCSS can't achieve alone
+ *
+ *  Page-scoped slots (rendered inside a specific built-in page — use these
+ *  to inject widgets, cards, or toolbars into existing pages without
+ *  overriding the whole route):
+ *  - `sessions:top`     — top of /sessions page (above session list)
+ *  - `sessions:bottom`  — bottom of /sessions page
+ *  - `analytics:top`    — top of /analytics page
+ *  - `analytics:bottom` — bottom of /analytics page
+ *  - `logs:top`         — top of /logs page (above filter toolbar)
+ *  - `logs:bottom`      — bottom of /logs page (below log viewer)
+ *  - `cron:top`         — top of /cron page
+ *  - `cron:bottom`      — bottom of /cron page
+ *  - `skills:top`       — top of /skills page
+ *  - `skills:bottom`    — bottom of /skills page
+ *  - `plugins:top`       — top of /plugins page
+ *  - `plugins:bottom`    — bottom of /plugins page
+ *  - `config:top`       — top of /config page
+ *  - `config:bottom`    — bottom of /config page
+ *  - `env:top`          — top of /env (Keys) page
+ *  - `env:bottom`       — bottom of /env (Keys) page
+ *  - `docs:top`         — top of /docs page (above the docs iframe)
+ *  - `docs:bottom`      — bottom of /docs page
+ *  - `chat:top`         — top of /chat page (above the composer, when embedded chat is on)
+ *  - `chat:bottom`      — bottom of /chat page
+ */
+export const KNOWN_SLOT_NAMES = [
+  // Shell-wide
+  "backdrop",
+  "header-left",
+  "header-right",
+  "header-banner",
+  "sidebar",
+  "pre-main",
+  "post-main",
+  "footer-left",
+  "footer-right",
+  "overlay",
+  // Page-scoped
+  "sessions:top",
+  "sessions:bottom",
+  "analytics:top",
+  "analytics:bottom",
+  "logs:top",
+  "logs:bottom",
+  "cron:top",
+  "cron:bottom",
+  "skills:top",
+  "skills:bottom",
+  "plugins:top",
+  "plugins:bottom",
+  "config:top",
+  "config:bottom",
+  "env:top",
+  "env:bottom",
+  "docs:top",
+  "docs:bottom",
+  "chat:top",
+  "chat:bottom",
+] as const;
+
+export type KnownSlotName = (typeof KNOWN_SLOT_NAMES)[number];
+
+type SlotListener = () => void;
+
+interface SlotEntry {
+  plugin: string;
+  component: React.ComponentType;
+}
+
+/** Map<slotName, SlotEntry[]>. Entries are appended in registration order. */
+const _slotRegistry: Map<string, SlotEntry[]> = new Map();
+const _slotListeners: Set<SlotListener> = new Set();
+
+function _notifySlots() {
+  for (const fn of _slotListeners) {
+    try {
+      fn();
+    } catch {
+      /* ignore */
+    }
+  }
+}
+
+/** Register a component for a slot. Called by plugin bundles via
+ *  `window.__NASTECH_PLUGINS__.registerSlot(...)`.
+ *
+ *  If the same (plugin, slot) pair is registered twice, the later call
+ *  replaces the earlier one — this matches how React HMR expects plugin
+ *  re-mounts to behave. */
+export function registerSlot(
+  plugin: string,
+  slot: string,
+  component: React.ComponentType,
+): void {
+  const existing = _slotRegistry.get(slot) ?? [];
+  const filtered = existing.filter((e) => e.plugin !== plugin);
+  filtered.push({ plugin, component });
+  _slotRegistry.set(slot, filtered);
+  _notifySlots();
+}
+
+/** Read current entries for a slot. Returns a copy so callers can't mutate
+ *  registry state. */
+export function getSlotEntries(slot: string): SlotEntry[] {
+  return (_slotRegistry.get(slot) ?? []).slice();
+}
+
+/** Subscribe to registry changes. Returns an unsubscribe function. */
+export function onSlotRegistered(fn: SlotListener): () => void {
+  _slotListeners.add(fn);
+  return () => {
+    _slotListeners.delete(fn);
+  };
+}
+
+/** Clear a specific plugin's slot registrations. Useful for HMR /
+ *  plugin reload flows — not wired in by default. */
+export function unregisterPluginSlots(plugin: string): void {
+  let changed = false;
+  for (const [slot, entries] of _slotRegistry.entries()) {
+    const kept = entries.filter((e) => e.plugin !== plugin);
+    if (kept.length !== entries.length) {
+      changed = true;
+      if (kept.length === 0) _slotRegistry.delete(slot);
+      else _slotRegistry.set(slot, kept);
+    }
+  }
+  if (changed) _notifySlots();
+}
+
+interface PluginSlotProps {
+  /** Slot identifier (e.g. `"sidebar"`, `"header-left"`). */
+  name: string;
+  /** Optional content rendered when no plugins have claimed the slot.
+   *  Useful for built-in defaults the plugin would replace. */
+  fallback?: React.ReactNode;
+}
+
+/** Render all components registered for a given slot, stacked in order.
+ *
+ *  Component re-renders when the slot registry changes so plugins that
+ *  arrive after initial mount show up without a manual refresh. */
+export function PluginSlot({ name, fallback }: PluginSlotProps) {
+  const [entries, setEntries] = useState<SlotEntry[]>(() => getSlotEntries(name));
+
+  useEffect(() => {
+    // Pick up anything registered between the initial `useState` call
+    // and the first effect tick, then subscribe for future changes.
+    setEntries(getSlotEntries(name));
+    const unsub = onSlotRegistered(() => setEntries(getSlotEntries(name)));
+    return unsub;
+  }, [name]);
+
+  if (entries.length === 0) {
+    return fallback ? React.createElement(Fragment, null, fallback) : null;
+  }
+
+  return React.createElement(
+    Fragment,
+    null,
+    ...entries.map((entry) =>
+      React.createElement(entry.component, { key: entry.plugin }),
+    ),
+  );
+}

package/src/plugins/types.ts

@@ -0,0 +1,37 @@
+/** Types for the dashboard plugin system. */
+
+import type { ComponentType } from "react";
+
+export interface PluginManifest {
+  name: string;
+  label: string;
+  description: string;
+  icon: string;
+  version: string;
+  tab: {
+    path: string;
+    /** "end", "after:<pathSegment>", "before:<pathSegment>" (e.g. "after:skills" → after `/skills`) */
+    position?: string;
+    /** When set to a built-in route path, this plugin replaces that page instead of adding a new tab. */
+    override?: string;
+    /** When true, the plugin may register without a sidebar tab (slot-only, etc.). */
+    hidden?: boolean;
+  };
+  /** Declared for discovery; actual slots use registerSlot in the plugin bundle. */
+  slots?: string[];
+  entry: string;
+  css?: string | null;
+  has_api: boolean;
+  /**
+   * Optional Subresource Integrity hash (e.g. "sha384-..."). When set,
+   * the browser will refuse to execute the plugin bundle if its hash
+   * does not match. This protects against tampered plugin delivery.
+   */
+  integrity?: string;
+  source: string;
+}
+
+export interface RegisteredPlugin {
+  manifest: PluginManifest;
+  component: ComponentType;
+}

package/src/plugins/usePlugins.ts

@@ -0,0 +1,133 @@
+/**
+ * usePlugins hook — discovers and loads dashboard plugins.
+ *
+ * 1. Fetches plugin manifests from GET /api/dashboard/plugins
+ * 2. Injects CSS <link> tags for plugins that declare css
+ * 3. Loads plugin JS bundles via <script> tags
+ * 4. Waits for plugins to call register() and resolves them
+ */
+
+import { useState, useEffect, useRef } from "react";
+import { api, NASTECH_BASE_PATH } from "@/lib/api";
+import type { PluginManifest, RegisteredPlugin } from "./types";
+import {
+  getPluginComponent,
+  onPluginRegistered,
+  notifyPluginRegistry,
+  setPluginLoadError,
+} from "./registry";
+
+export function usePlugins() {
+  const [manifests, setManifests] = useState<PluginManifest[]>([]);
+  const [plugins, setPlugins] = useState<RegisteredPlugin[]>([]);
+  const [loading, setLoading] = useState(true);
+  const loadedScripts = useRef<Set<string>>(new Set());
+
+  // Fetch manifests on mount.
+  useEffect(() => {
+    api
+      .getPlugins()
+      .then((list) => {
+        setManifests(list);
+        if (list.length === 0) setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  // Load plugin assets when manifests arrive.
+  useEffect(() => {
+    if (manifests.length === 0) return;
+
+    const injectedScripts: HTMLScriptElement[] = [];
+
+    for (const manifest of manifests) {
+      // Inject CSS if specified.
+      if (manifest.css) {
+        const cssUrl = `${NASTECH_BASE_PATH}/dashboard-plugins/${manifest.name}/${manifest.css}`;
+        if (!document.querySelector(`link[href="${cssUrl}"]`)) {
+          const link = document.createElement("link");
+          link.rel = "stylesheet";
+          link.href = cssUrl;
+          document.head.appendChild(link);
+        }
+      }
+
+      // Load JS bundle. In dev, cache-bust so Vite HMR can clear the
+      // in-memory registry while the browser would otherwise never
+      // re-execute a previously cached <script> URL.
+      const baseUrl = `${NASTECH_BASE_PATH}/dashboard-plugins/${manifest.name}/${manifest.entry}`;
+      const scriptSrc = import.meta.env.DEV
+        ? `${baseUrl}?nastech_dv=${Date.now()}`
+        : baseUrl;
+      if (!import.meta.env.DEV) {
+        if (loadedScripts.current.has(baseUrl)) continue;
+        loadedScripts.current.add(baseUrl);
+      }
+
+      const script = document.createElement("script");
+      script.setAttribute("data-nastech-plugin", manifest.name);
+      script.src = scriptSrc;
+      script.async = true;
+      // SRI integrity verification — defense against compromised plugin
+      // delivery. Plugin manifests can declare an integrity hash
+      // (e.g. "sha384-...") which the browser verifies before executing.
+      // Without this, a man-in-the-middle or compromised plugin server
+      // can substitute the JS bundle silently. Opt-in: when no integrity
+      // is declared in the manifest, behavior is unchanged.
+      if (manifest.integrity && typeof manifest.integrity === "string") {
+        script.integrity = manifest.integrity;
+        script.crossOrigin = "anonymous";
+      }
+      script.onerror = () => {
+        setPluginLoadError(manifest.name, "LOAD_FAILED");
+        console.warn(
+          `[plugins] Failed to load ${manifest.name} from ${scriptSrc} (open Network tab)`,
+        );
+      };
+      script.onload = () => {
+        notifyPluginRegistry();
+        queueMicrotask(() => {
+          if (getPluginComponent(manifest.name)) return;
+          setPluginLoadError(manifest.name, "NO_REGISTER");
+        });
+      };
+      document.body.appendChild(script);
+      injectedScripts.push(script);
+    }
+
+    // Give plugins a moment to load and register, then stop loading state.
+    const timeout = setTimeout(() => setLoading(false), 2000);
+    return () => {
+      clearTimeout(timeout);
+      if (import.meta.env.DEV) {
+        for (const el of injectedScripts) {
+          el.remove();
+        }
+      }
+    };
+  }, [manifests]);
+
+  // Listen for plugin registrations and resolve them against manifests.
+  useEffect(() => {
+    function resolvePlugins() {
+      const resolved: RegisteredPlugin[] = [];
+      for (const manifest of manifests) {
+        const component = getPluginComponent(manifest.name);
+        if (component) {
+          resolved.push({ manifest, component });
+        }
+      }
+      setPlugins(resolved);
+      // If all plugins registered, stop loading early.
+      if (resolved.length === manifests.length && manifests.length > 0) {
+        setLoading(false);
+      }
+    }
+
+    resolvePlugins();
+    const unsub = onPluginRegistered(resolvePlugins);
+    return unsub;
+  }, [manifests]);
+
+  return { plugins, manifests, loading };
+}