@stigmer/react 3.2.3 → 3.4.0

package/src/library/useApplyResource.ts

@@ -3,9 +3,9 @@
 import { useCallback, useState } from "react";
 import { create } from "@bufbuild/protobuf";
 import { PushSkillFromExecutionArtifactRequestSchema } from "@stigmer/protos/ai/stigmer/agentic/skill/v1/io_pb";
+import { parseManifest } from "@stigmer/sdk";
 import { useStigmer } from "../hooks.js";
 import { toError } from "../internal/toError.js";
-import { parseResourceYaml } from "./parse-resource-yaml.js";
 
 /**
  * Result returned after successfully applying a resource to an organization.
@@ -14,8 +14,8 @@ import { parseResourceYaml } from "./parse-resource-yaml.js";
  * link to the resource in the Library (e.g., `/library/agents`).
  */
 export interface ApplyResourceResult {
-  /** The resource kind that was applied. */
-  readonly kind: "Agent" | "McpServer" | "Skill";
+  /** The resource kind that was applied (`"Agent"`, `"McpServer"`, `"Skill"`, …). */
+  readonly kind: string;
   /** The resource name (from response metadata). */
   readonly name: string;
   /** The organization the resource was applied to. */
@@ -44,14 +44,14 @@ export interface PushSkillParams {
 /** Return value of {@link useApplyResource}. */
 export interface UseApplyResourceReturn {
   /**
-   * Apply a Stigmer resource YAML (Agent or McpServer) to an organization.
+   * Apply a Stigmer resource YAML to an organization.
    *
-   * Parses the YAML content, converts it to the appropriate SDK input type,
-   * and calls `stigmer.agent.apply()` or `stigmer.mcpServer.apply()` based
-   * on the detected `kind`.
+   * Parses the YAML against the kind's generated proto schema via the SDK
+   * manifest engine and applies it through `stigmer.manifest.apply()` —
+   * any registry-supported kind, full fidelity.
    *
-   * The `org` parameter overrides `metadata.org` in the YAML — matching
-   * the "Apply to [my-org]" UX intent.
+   * The `org` parameter fills in `metadata.org` when the YAML omits it —
+   * matching the "Apply to [my-org]" UX intent.
    *
    * @throws Re-throws the original error after setting `error` state, so
    *   callers can optionally catch for flow control.
@@ -93,9 +93,9 @@ export interface UseApplyResourceReturn {
  *
  * Handles two parallel apply paths:
  *
- * 1. **YAML resources** (Agent, McpServer): `applyYamlResource(content, org)`
- *    parses the YAML, converts snake_case fields to SDK input types, and
- *    calls the appropriate `apply()` method.
+ * 1. **YAML resources**: `applyYamlResource(content, org)` parses the YAML
+ *    against the generated proto schema (SDK manifest engine) and applies
+ *    it through the kind's `apply` RPC.
  *
  * 2. **Skill packages** (directory artifacts): `pushSkillPackage(params)`
  *    delegates to the server-side `pushFromExecutionArtifact` RPC.
@@ -129,7 +129,7 @@ export interface UseApplyResourceReturn {
  * };
  * ```
  *
- * @see {@link parseResourceYaml} for the pure YAML-to-input conversion
+ * @see {@link parseManifest} for the YAML-to-proto conversion
  * @see {@link detectStigmerResource} for YAML resource detection
  * @see {@link useDetectSkillPackage} for skill package detection
  */
@@ -146,28 +146,21 @@ export function useApplyResource(): UseApplyResourceReturn {
       setError(null);
 
       try {
-        const parsed = parseResourceYaml(content, org);
-
-        switch (parsed.kind) {
-          case "Agent": {
-            const agent = await stigmer.agent.apply(parsed.input);
-            return {
-              kind: "Agent",
-              name: agent.metadata?.name ?? parsed.input.name,
-              org: agent.metadata?.org ?? org,
-              slug: agent.metadata?.slug ?? parsed.input.name,
-            };
-          }
-          case "McpServer": {
-            const mcpServer = await stigmer.mcpServer.apply(parsed.input);
-            return {
-              kind: "McpServer",
-              name: mcpServer.metadata?.name ?? parsed.input.name,
-              org: mcpServer.metadata?.org ?? org,
-              slug: mcpServer.metadata?.slug ?? parsed.input.name,
-            };
-          }
+        const documents = parseManifest(content, { org });
+        if (documents.length > 1) {
+          throw new Error(
+            "This artifact contains multiple resource documents. " +
+              "Use Apply YAML in the Library to apply multi-document manifests.",
+          );
         }
+
+        const applied = await stigmer.manifest.apply(documents[0]);
+        return {
+          kind: applied.yamlKind,
+          name: applied.name,
+          org: applied.org,
+          slug: applied.slug,
+        };
       } catch (err) {
         setError(toError(err));
         throw err;

package/src/library/useExportResource.ts

@@ -3,10 +3,11 @@
 import { useCallback, useMemo } from "react";
 import { parse as parseYaml } from "yaml";
 import type { Agent } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
+import type { Datastore } from "@stigmer/protos/ai/stigmer/agentic/datastore/v1/api_pb";
 import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
 import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
+import { serializeManifest } from "@stigmer/sdk";
 import { toast } from "../feedback/toast.js";
-import { serializeAgentYaml, serializeMcpServerYaml } from "./serialize-resource-yaml.js";
 import { serializeWorkflowYaml } from "../workflow/serialize-workflow-yaml.js";
 
 // ---------------------------------------------------------------------------
@@ -16,9 +17,9 @@ import { serializeWorkflowYaml } from "../workflow/serialize-workflow-yaml.js";
 /** Options for {@link useExportResource}. */
 export interface UseExportResourceOptions {
   /** The resource kind — determines which serializer is used. */
-  readonly kind: "Agent" | "McpServer" | "Workflow";
+  readonly kind: "Agent" | "McpServer" | "Workflow" | "Datastore";
   /** The proto resource to export, or `null` when not yet loaded. */
-  readonly resource: Agent | McpServer | Workflow | null;
+  readonly resource: Agent | McpServer | Workflow | Datastore | null;
 }
 
 /** Return value of {@link useExportResource}. */
@@ -42,16 +43,19 @@ export interface UseExportResourceReturn {
 // ---------------------------------------------------------------------------
 
 /**
- * Headless export hook for Stigmer resources (Agent, McpServer).
+ * Headless export hook for Stigmer resources (Agent, McpServer,
+ * Workflow, Datastore).
  *
  * Serializes the resource into YAML and JSON formats and provides
  * stable callbacks for copying to clipboard or triggering a file
  * download. All operations are client-side — no additional API calls.
  *
- * The serialized output uses the canonical Stigmer resource format
- * (`apiVersion`, `kind`, `metadata`, `spec`) with snake_case field
- * names, identical to what the CLI produces and what `parseResourceYaml`
- * accepts — ensuring full round-trip compatibility.
+ * Non-workflow kinds serialize through the SDK manifest engine
+ * ({@link serializeManifest}) — the canonical Stigmer resource format
+ * (`apiVersion`, `kind`, `metadata`, `spec`, snake_case fields) that
+ * round-trips through `parseManifest` and `stigmer apply -f`. Workflows
+ * use their own canonical serializer, shared with the workflow Editor
+ * tab, so one workflow has exactly one YAML shape across the product.
  *
  * @param options - Resource kind and the proto resource object.
  * @returns Stable callbacks and memoized serialized strings.
@@ -68,8 +72,8 @@ export interface UseExportResourceReturn {
  * <ActionMenu.Item onSelect={downloadYaml}>Download YAML</ActionMenu.Item>
  * ```
  *
- * @see {@link serializeAgentYaml} for the underlying Agent serializer
- * @see {@link serializeMcpServerYaml} for the underlying McpServer serializer
+ * @see {@link serializeManifest} for the underlying Agent/McpServer serializer
+ * @see {@link serializeWorkflowYaml} for the workflow-canonical serializer
  */
 export function useExportResource({
   kind,
@@ -77,15 +81,17 @@ export function useExportResource({
 }: UseExportResourceOptions): UseExportResourceReturn {
   const yaml = useMemo<string | null>(() => {
     if (!resource) return null;
-    if (kind === "Agent") return serializeAgentYaml(resource as Agent);
     if (kind === "Workflow") return serializeWorkflowYaml(resource as Workflow);
-    return serializeMcpServerYaml(resource as McpServer);
+    return serializeManifest(resource);
   }, [kind, resource]);
 
   const json = useMemo<string | null>(() => {
-    if (!resource) return null;
-    return serializeResourceJson(resource, kind);
-  }, [kind, resource]);
+    if (!yaml) return null;
+    // Parse the YAML output to re-stringify as JSON — this guarantees the
+    // JSON structure is identical to the YAML structure (snake_case
+    // fields, no status).
+    return JSON.stringify(parseYaml(yaml), null, 2);
+  }, [yaml]);
 
   const slug = useMemo<string>(() => {
     if (!resource) return "resource";
@@ -120,31 +126,6 @@ export function useExportResource({
   );
 }
 
-// ---------------------------------------------------------------------------
-// JSON serialization
-// ---------------------------------------------------------------------------
-
-/**
- * Produces a JSON representation of the resource using the same canonical
- * structure as the YAML export (apiVersion, kind, metadata, spec).
- *
- * Internally parses the YAML output to get a clean plain object, then
- * re-stringifies as JSON. This guarantees the JSON structure is identical
- * to the YAML structure (snake_case fields, no status).
- */
-function serializeResourceJson(
-  resource: Agent | McpServer | Workflow,
-  kind: "Agent" | "McpServer" | "Workflow",
-): string {
-  let yamlStr: string;
-  if (kind === "Agent") yamlStr = serializeAgentYaml(resource as Agent);
-  else if (kind === "Workflow") yamlStr = serializeWorkflowYaml(resource as Workflow);
-  else yamlStr = serializeMcpServerYaml(resource as McpServer);
-
-  const doc = parseYaml(yamlStr);
-  return JSON.stringify(doc, null, 2);
-}
-
 // ---------------------------------------------------------------------------
 // Clipboard
 // ---------------------------------------------------------------------------

package/src/manifest/ApplyManifestDialog.tsx

@@ -0,0 +1,315 @@
+"use client";
+
+import { lazy, Suspense, useCallback, useEffect, useRef } from "react";
+import { cn } from "@stigmer/theme";
+import { toast } from "../feedback/toast.js";
+import { RedactedSecretsNotice } from "./RedactedSecretsNotice.js";
+import {
+  useApplyManifest,
+  type ManifestPreviewEntry,
+} from "./useApplyManifest.js";
+
+// CodeMirror loads only when the dialog actually opens (DD-013).
+const LazyYamlEditor = lazy(() =>
+  import("./YamlEditor.js").then((m) => ({ default: m.YamlEditor })),
+);
+
+/** Props for {@link ApplyManifestDialog}. */
+export interface ApplyManifestDialogProps {
+  /** Whether the dialog is open. */
+  readonly open: boolean;
+  /** Called when the dialog should open or close. */
+  readonly onOpenChange: (open: boolean) => void;
+  /** Target organization slug for documents that omit `metadata.org`. */
+  readonly org: string;
+  /**
+   * Called after every document applied successfully, with the per-document
+   * results in apply order. Use for navigation or list refresh.
+   */
+  readonly onSuccess?: (entries: readonly ManifestPreviewEntry[]) => void;
+}
+
+/**
+ * Modal dialog for applying a Stigmer resource manifest — paste YAML or
+ * upload a file, review what will change, and apply. The console
+ * counterpart of `stigmer apply -f`, for every supported resource kind.
+ *
+ * Workflow:
+ * 1. Paste manifest YAML (or JSON) into the editor, or pick a file
+ * 2. Each document is validated against its kind's generated proto schema
+ *    and previewed with a create-or-update badge resolved from server state
+ * 3. Apply runs the documents sequentially in dependency order with live
+ *    per-document status; a failure stops the run and renders inline
+ *
+ * Multi-document manifests (`---` separators) are supported. Documents
+ * that omit `metadata.org` are applied to the active org; documents naming
+ * a different org are honored with a warning (matching `stigmer apply`).
+ *
+ * Uses the native `<dialog>` element for built-in focus trapping, Escape
+ * key handling, and backdrop — consistent with {@link ConfirmDialog}.
+ *
+ * Zero Console dependencies — safe for platform builder embedding.
+ *
+ * @example
+ * ```tsx
+ * <ApplyManifestDialog
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   org={activeOrg}
+ *   onSuccess={() => refetchList()}
+ * />
+ * ```
+ */
+export function ApplyManifestDialog({
+  open,
+  onOpenChange,
+  org,
+  onSuccess,
+}: ApplyManifestDialogProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const manifest = useApplyManifest(org);
+  const { reset } = manifest;
+
+  // Sync dialog open state with the native <dialog> element.
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open]);
+
+  // Start each session clean.
+  useEffect(() => {
+    if (open) {
+      reset();
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    }
+  }, [open, reset]);
+
+  const handleCancel = useCallback(
+    (e: React.SyntheticEvent) => {
+      e.preventDefault();
+      onOpenChange(false);
+    },
+    [onOpenChange],
+  );
+
+  const handleFileChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) manifest.readFile(file);
+    },
+    [manifest],
+  );
+
+  const handleApply = useCallback(async () => {
+    const allApplied = await manifest.applyAll();
+    if (allApplied && manifest.entries) {
+      const count = manifest.entries.length;
+      toast.success(
+        count === 1 ? "Resource applied" : `${count} resources applied`,
+      );
+      onOpenChange(false);
+      onSuccess?.(manifest.entries);
+    }
+    // On failure the dialog stays open — per-entry status shows what
+    // applied and what failed.
+  }, [manifest, onOpenChange, onSuccess]);
+
+  const canApply =
+    manifest.entries !== null &&
+    manifest.entries.length > 0 &&
+    !manifest.isValidating &&
+    !manifest.isApplying;
+
+  return (
+    <dialog
+      ref={dialogRef}
+      onCancel={handleCancel}
+      className={cn(
+        "fixed inset-0 z-50 m-auto w-full max-w-3xl rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-lg",
+        "backdrop:bg-black/50",
+        "open:animate-in open:fade-in-0 open:zoom-in-95",
+      )}
+    >
+      <div className="flex flex-col gap-4 p-6">
+        {/* Header */}
+        <div className="flex flex-col gap-1">
+          <h3 className="text-base font-semibold text-foreground">Apply YAML</h3>
+          <p className="text-sm text-muted-foreground">
+            Paste a resource manifest or upload a file. Resources are created
+            when new and updated when they already exist.
+          </p>
+        </div>
+
+        {/* File picker */}
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".yaml,.yml,.json"
+          onChange={handleFileChange}
+          className={cn(
+            "w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground",
+            "file:mr-3 file:rounded-md file:border-0 file:bg-primary file:px-2.5 file:py-1 file:text-xs file:font-medium file:text-primary-foreground",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+          aria-label="Select manifest file"
+        />
+
+        {/* Manifest editor */}
+        <Suspense fallback={<EditorLoading />}>
+          <LazyYamlEditor
+            value={manifest.content}
+            onChange={manifest.setContent}
+            className="h-56"
+          />
+        </Suspense>
+
+        {manifest.hasRedactedSecrets && <RedactedSecretsNotice />}
+
+        {/* Validation error */}
+        {manifest.validationError && (
+          <div
+            role="alert"
+            className="rounded-md border border-destructive bg-card px-3 py-2.5 text-sm text-destructive"
+          >
+            {manifest.validationError}
+          </div>
+        )}
+
+        {/* Per-document preview */}
+        {manifest.entries && manifest.entries.length > 0 && (
+          <ul className="flex max-h-48 flex-col gap-2 overflow-y-auto" aria-label="Resources to apply">
+            {manifest.entries.map((entry, index) => (
+              <PreviewRow key={`${entry.document.handler.yamlKind}/${entry.document.org}/${entry.document.slug}/${index}`} entry={entry} />
+            ))}
+          </ul>
+        )}
+
+        {/* Actions */}
+        <div className="flex items-center justify-between gap-3">
+          <p className="text-xs text-muted-foreground" aria-live="polite">
+            {manifest.isValidating ? "Validating…" : ""}
+          </p>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={() => onOpenChange(false)}
+              disabled={manifest.isApplying}
+              className={cn(
+                "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+                "border border-input bg-background text-foreground",
+                "hover:bg-accent hover:text-accent-foreground",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "disabled:pointer-events-none disabled:opacity-50",
+              )}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={handleApply}
+              disabled={!canApply}
+              className={cn(
+                "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+                "bg-primary text-primary-foreground hover:bg-primary-hover",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "disabled:pointer-events-none disabled:opacity-50",
+              )}
+            >
+              {manifest.isApplying
+                ? "Applying…"
+                : applyLabel(manifest.entries?.length ?? 0)}
+            </button>
+          </div>
+        </div>
+      </div>
+    </dialog>
+  );
+}
+
+function applyLabel(count: number): string {
+  if (count <= 1) return "Apply";
+  return `Apply ${count} resources`;
+}
+
+function EditorLoading() {
+  return (
+    <div className="flex h-56 items-center justify-center rounded-md border border-border bg-muted text-sm text-muted-foreground">
+      Loading editor…
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Per-document preview row
+// ---------------------------------------------------------------------------
+
+function PreviewRow({ entry }: { readonly entry: ManifestPreviewEntry }) {
+  return (
+    <li className="rounded-md border border-border bg-card px-3 py-2">
+      <div className="flex items-center gap-2">
+        <span className="inline-flex rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
+          {entry.document.handler.displayName}
+        </span>
+        <span className="text-sm font-medium text-foreground">
+          {entry.document.name}
+        </span>
+        <ActionBadge entry={entry} />
+        <span className="ml-auto text-xs text-muted-foreground">
+          {entry.document.org}
+        </span>
+      </div>
+      {entry.document.warning && (
+        <p className="mt-1 text-xs text-muted-foreground">{entry.document.warning}</p>
+      )}
+      {entry.status === "failed" && entry.errorMessage && (
+        <p role="alert" className="mt-1 text-xs text-destructive">
+          {entry.errorMessage}
+        </p>
+      )}
+    </li>
+  );
+}
+
+function ActionBadge({ entry }: { readonly entry: ManifestPreviewEntry }) {
+  const label = badgeLabel(entry);
+  return (
+    <span
+      className={cn(
+        "inline-flex rounded px-1.5 py-0.5 text-xs font-medium",
+        entry.status === "failed"
+          ? "bg-card text-destructive border border-destructive"
+          : "bg-muted text-muted-foreground",
+      )}
+    >
+      {label}
+    </span>
+  );
+}
+
+function badgeLabel(entry: ManifestPreviewEntry): string {
+  switch (entry.status) {
+    case "applying":
+      return "Applying…";
+    case "applied":
+      return "Applied";
+    case "failed":
+      return "Failed";
+    case "skipped":
+      return "Skipped";
+    case "pending":
+      switch (entry.action) {
+        case "create":
+          return "Will create";
+        case "update":
+          return "Will update";
+        case "unknown":
+          return "Create or update";
+      }
+  }
+}