@stigmer/react 3.2.3 → 3.3.0

package/src/manifest/__tests__/useEditResourceYaml.test.tsx

@@ -0,0 +1,252 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { create } from "@bufbuild/protobuf";
+import { AgentSchema } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
+import { StigmerContext } from "../../context";
+import { useEditResourceYaml } from "../useEditResourceYaml";
+
+// The hooks run the real manifest engine (serializeManifest/parseManifest
+// from @stigmer/sdk); only the network-facing manifest client is mocked.
+function createMockStigmer(overrides: {
+  apply?: (...args: unknown[]) => Promise<unknown>;
+  getByReference?: (...args: unknown[]) => Promise<unknown>;
+} = {}) {
+  return {
+    manifest: {
+      apply:
+        overrides.apply ??
+        vi.fn().mockResolvedValue({
+          yamlKind: "Agent",
+          displayName: "Agent",
+          name: "clinic-patient-assistant",
+          slug: "clinic-patient-assistant",
+          org: "rakeshreddi098",
+          id: "agt_01",
+        }),
+      getByReference:
+        overrides.getByReference ?? vi.fn().mockResolvedValue({ metadata: {} }),
+    },
+  } as never;
+}
+
+function wrapper(client: unknown) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <StigmerContext.Provider value={client as never}>
+        {children}
+      </StigmerContext.Provider>
+    );
+  };
+}
+
+const agent = create(AgentSchema, {
+  metadata: {
+    id: "agt_01",
+    name: "clinic-patient-assistant",
+    slug: "clinic-patient-assistant",
+    org: "rakeshreddi098",
+  },
+  spec: { instructions: "Short messages." },
+});
+
+// The create-vs-update check debounces across keystrokes.
+const DEBOUNCE_MS = 400;
+
+describe("useEditResourceYaml", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("seeds the editor from the serialized resource", () => {
+    const { result } = renderHook(
+      () => useEditResourceYaml({ resource: agent }),
+      { wrapper: wrapper(createMockStigmer()) },
+    );
+
+    expect(result.current.yaml).toContain("kind: Agent");
+    expect(result.current.yaml).toContain("clinic-patient-assistant");
+    expect(result.current.yaml).not.toContain("status:");
+    expect(result.current.isDirty).toBe(false);
+    expect(result.current.validation.status).toBe("valid");
+  });
+
+  it("reports schema violations inline as the user edits", () => {
+    const { result } = renderHook(
+      () => useEditResourceYaml({ resource: agent }),
+      { wrapper: wrapper(createMockStigmer()) },
+    );
+
+    act(() => {
+      result.current.setYaml(
+        result.current.yaml.replace("instructions:", "instrctions:"),
+      );
+    });
+
+    expect(result.current.validation).toMatchObject({
+      status: "invalid",
+      message: expect.stringContaining("Invalid Agent"),
+    });
+  });
+
+  it("rejects a kind change, pointing at the Apply YAML flow instead", () => {
+    const { result } = renderHook(
+      () => useEditResourceYaml({ resource: agent }),
+      { wrapper: wrapper(createMockStigmer()) },
+    );
+
+    act(() => {
+      // A structurally valid Environment — the schema accepts it, so the
+      // kind guard (not the schema) must be what rejects it.
+      result.current.setYaml(
+        [
+          "apiVersion: agentic.stigmer.ai/v1",
+          "kind: Environment",
+          "metadata:",
+          "  name: clinic-patient-db",
+          "  org: rakeshreddi098",
+          "spec:",
+          "  description: not an agent",
+        ].join("\n"),
+      );
+    });
+
+    expect(result.current.validation).toMatchObject({
+      status: "invalid",
+      message: expect.stringContaining("kind changed from Agent to Environment"),
+    });
+  });
+
+  it("resolves the target to 'update' when the reference exists", async () => {
+    const getByReference = vi.fn().mockResolvedValue({ metadata: {} });
+    const { result } = renderHook(
+      () => useEditResourceYaml({ resource: agent }),
+      { wrapper: wrapper(createMockStigmer({ getByReference })) },
+    );
+
+    act(() => {
+      result.current.setYaml(
+        result.current.yaml.replace("Short messages.", "Long messages."),
+      );
+    });
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(DEBOUNCE_MS + 10);
+    });
+
+    expect(getByReference).toHaveBeenCalledWith(
+      "Agent",
+      "rakeshreddi098",
+      "clinic-patient-assistant",
+    );
+    expect(result.current.target).toEqual({
+      action: "update",
+      slug: "clinic-patient-assistant",
+    });
+  });
+
+  it("resolves the target to 'create' after a rename (honest preview)", async () => {
+    const getByReference = vi.fn().mockResolvedValue(null);
+    const { result } = renderHook(
+      () => useEditResourceYaml({ resource: agent }),
+      { wrapper: wrapper(createMockStigmer({ getByReference })) },
+    );
+
+    act(() => {
+      // Rename name AND slug — the slug is the apply routing key, so this
+      // is the edit that would land as a brand-new resource.
+      result.current.setYaml(
+        result.current.yaml.replaceAll(
+          "clinic-patient-assistant",
+          "renamed-assistant",
+        ),
+      );
+    });
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(DEBOUNCE_MS + 10);
+    });
+
+    expect(getByReference).toHaveBeenCalledWith(
+      "Agent",
+      "rakeshreddi098",
+      "renamed-assistant",
+    );
+    expect(result.current.target).toEqual({
+      action: "create",
+      slug: "renamed-assistant",
+    });
+  });
+
+  it("applies the edited document and clears the dirty flag", async () => {
+    const apply = vi.fn().mockResolvedValue({
+      yamlKind: "Agent",
+      displayName: "Agent",
+      name: "clinic-patient-assistant",
+      slug: "clinic-patient-assistant",
+      org: "rakeshreddi098",
+      id: "agt_01",
+    });
+    const { result } = renderHook(
+      () => useEditResourceYaml({ resource: agent }),
+      { wrapper: wrapper(createMockStigmer({ apply })) },
+    );
+
+    act(() => {
+      result.current.setYaml(
+        result.current.yaml.replace("Short messages.", "Long messages."),
+      );
+    });
+    expect(result.current.isDirty).toBe(true);
+
+    await act(async () => {
+      const applied = await result.current.apply();
+      expect(applied?.slug).toBe("clinic-patient-assistant");
+    });
+
+    expect(apply).toHaveBeenCalledTimes(1);
+    expect(result.current.isDirty).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
+  it("surfaces apply failures as error state and re-throws", async () => {
+    const apply = vi.fn().mockRejectedValue(new Error("permission denied"));
+    const { result } = renderHook(
+      () => useEditResourceYaml({ resource: agent }),
+      { wrapper: wrapper(createMockStigmer({ apply })) },
+    );
+
+    act(() => {
+      result.current.setYaml(
+        result.current.yaml.replace("Short messages.", "Long messages."),
+      );
+    });
+
+    await act(async () => {
+      await expect(result.current.apply()).rejects.toThrow("permission denied");
+    });
+
+    expect(result.current.error?.message).toBe("permission denied");
+  });
+
+  it("flags redacted secret markers in the content", () => {
+    const { result } = renderHook(
+      () => useEditResourceYaml({ resource: agent }),
+      { wrapper: wrapper(createMockStigmer()) },
+    );
+
+    expect(result.current.hasRedactedSecrets).toBe(false);
+
+    act(() => {
+      result.current.setYaml(
+        result.current.yaml.replace("Short messages.", "***REDACTED***"),
+      );
+    });
+
+    expect(result.current.hasRedactedSecrets).toBe(true);
+  });
+});

package/src/manifest/index.ts

@@ -0,0 +1,33 @@
+// Manifest domain: the console-facing YAML edit/apply experience for every
+// registry-supported resource kind, built on the @stigmer/sdk manifest
+// engine (parseManifest / serializeManifest / stigmer.manifest).
+//
+// Headless-first (DD-003): the hooks are independently importable; the
+// dialogs compose them with the shared YamlEditor.
+
+export { YamlEditor } from "./YamlEditor.js";
+export type { YamlEditorProps } from "./YamlEditor.js";
+
+export { useEditResourceYaml } from "./useEditResourceYaml.js";
+export type {
+  EditYamlTarget,
+  EditYamlValidation,
+  UseEditResourceYamlOptions,
+  UseEditResourceYamlReturn,
+} from "./useEditResourceYaml.js";
+
+export { useApplyManifest } from "./useApplyManifest.js";
+export type {
+  ManifestEntryStatus,
+  ManifestPreviewEntry,
+  UseApplyManifestReturn,
+} from "./useApplyManifest.js";
+
+export { EditResourceYamlDialog } from "./EditResourceYamlDialog.js";
+export type { EditResourceYamlDialogProps } from "./EditResourceYamlDialog.js";
+
+export { ApplyManifestDialog } from "./ApplyManifestDialog.js";
+export type { ApplyManifestDialogProps } from "./ApplyManifestDialog.js";
+
+export { RedactedSecretsNotice } from "./RedactedSecretsNotice.js";
+export type { RedactedSecretsNoticeProps } from "./RedactedSecretsNotice.js";

package/src/manifest/useApplyManifest.ts

@@ -0,0 +1,270 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  containsRedactedSecrets,
+  parseManifest,
+  type AppliedManifest,
+  type ManifestDocument,
+} from "@stigmer/sdk";
+import { useStigmer } from "../hooks.js";
+import { toError } from "../internal/toError.js";
+
+/** Per-document apply lifecycle within one manifest. */
+export type ManifestEntryStatus =
+  | "pending"
+  | "applying"
+  | "applied"
+  | "failed"
+  /** A prior document failed; this one was not attempted. */
+  | "skipped";
+
+/** One document of the manifest, with its preview and apply state. */
+export interface ManifestPreviewEntry {
+  /** The parsed document (kind handler, message, name/slug/org). */
+  readonly document: ManifestDocument;
+  /** What applying will do, resolved against live server state. */
+  readonly action: "create" | "update" | "unknown";
+  /** Apply lifecycle status. */
+  readonly status: ManifestEntryStatus;
+  /** The applied resource, present when `status` is `"applied"`. */
+  readonly result?: AppliedManifest;
+  /** User-facing failure message, present when `status` is `"failed"`. */
+  readonly errorMessage?: string;
+}
+
+/** Return value of {@link useApplyManifest}. */
+export interface UseApplyManifestReturn {
+  /** Current manifest text (paste target). */
+  readonly content: string;
+  /** Update the manifest text. Re-validates (debounced). */
+  readonly setContent: (value: string) => void;
+  /** Read a `.yaml`/`.yml`/`.json` file into `content`. */
+  readonly readFile: (file: File) => Promise<void>;
+  /**
+   * Validated per-document preview in dependency apply order, or `null`
+   * while the content is empty or invalid.
+   */
+  readonly entries: readonly ManifestPreviewEntry[] | null;
+  /** Validation error for the current content, or `null` when valid. */
+  readonly validationError: string | null;
+  /** `true` while the (debounced) validation + existence checks run. */
+  readonly isValidating: boolean;
+  /** `true` when the content contains `***REDACTED***` secret markers. */
+  readonly hasRedactedSecrets: boolean;
+  /**
+   * Apply all documents sequentially in dependency order. Entries update
+   * live. Stops at the first failure (later entries become `"skipped"`).
+   * Resolves `true` when every document applied.
+   */
+  readonly applyAll: () => Promise<boolean>;
+  /** `true` while applies are in flight. */
+  readonly isApplying: boolean;
+  /** Clear all state (content, preview, errors). */
+  readonly reset: () => void;
+}
+
+// Validation parses + resolves existence server-side; wait for a typing pause.
+const VALIDATE_DEBOUNCE_MS = 500;
+
+/**
+ * Headless "apply a YAML manifest" flow for any registry-supported kind —
+ * the console counterpart of `stigmer apply -f`.
+ *
+ * Orchestrates: paste or upload → strict parse against generated proto
+ * schemas ({@link parseManifest}) → per-document create-vs-update preview
+ * (server existence check) → sequential apply in dependency order with
+ * live per-document status.
+ *
+ * Accepts multi-document manifests (`---` separators) and JSON content
+ * (YAML is a superset). The target `org` is injected into documents that
+ * omit `metadata.org`; documents naming a *different* org are honored and
+ * apply there (matching `stigmer apply` semantics — the org-mismatch
+ * warning surfaces on the parsed document).
+ *
+ * @param org - Target organization slug for `metadata.org` injection.
+ *
+ * @example
+ * ```tsx
+ * const manifest = useApplyManifest(activeOrg);
+ *
+ * <textarea value={manifest.content}
+ *           onChange={(e) => manifest.setContent(e.target.value)} />
+ * {manifest.entries?.map((e) => (
+ *   <PreviewRow key={e.document.slug} entry={e} />
+ * ))}
+ * <button onClick={manifest.applyAll} disabled={!manifest.entries}>Apply</button>
+ * ```
+ *
+ * @see {@link ApplyManifestDialog} for the styled component composing this hook
+ * @see {@link useEditResourceYaml} for the edit-in-place counterpart
+ */
+export function useApplyManifest(org: string): UseApplyManifestReturn {
+  const stigmer = useStigmer();
+
+  const [content, setContentState] = useState("");
+  const [entries, setEntries] = useState<readonly ManifestPreviewEntry[] | null>(null);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [isValidating, setIsValidating] = useState(false);
+  const [isApplying, setIsApplying] = useState(false);
+
+  const orgRef = useRef(org);
+  orgRef.current = org;
+
+  const setContent = useCallback((value: string) => {
+    setContentState(value);
+  }, []);
+
+  const readFile = useCallback(async (file: File) => {
+    let text: string;
+    try {
+      text = await file.text();
+    } catch {
+      setContentState("");
+      setEntries(null);
+      setValidationError(`Failed to read ${file.name}.`);
+      return;
+    }
+    setContentState(text);
+  }, []);
+
+  const reset = useCallback(() => {
+    setContentState("");
+    setEntries(null);
+    setValidationError(null);
+    setIsValidating(false);
+    setIsApplying(false);
+  }, []);
+
+  // Debounced validation + existence resolution, cancellation-safe. Applies
+  // freeze the preview: entries carry live statuses the validator must not
+  // clobber mid-run.
+  const validateSeq = useRef(0);
+  useEffect(() => {
+    if (isApplying) return;
+
+    const seq = ++validateSeq.current;
+
+    if (!content.trim()) {
+      setEntries(null);
+      setValidationError(null);
+      setIsValidating(false);
+      return;
+    }
+
+    setIsValidating(true);
+
+    const timer = setTimeout(async () => {
+      let documents: ManifestDocument[];
+      try {
+        documents = parseManifest(content, { org: orgRef.current });
+      } catch (err) {
+        if (validateSeq.current === seq) {
+          setEntries(null);
+          setValidationError(toError(err).message);
+          setIsValidating(false);
+        }
+        return;
+      }
+
+      const resolved = await Promise.all(
+        documents.map(async (document): Promise<ManifestPreviewEntry> => {
+          let action: ManifestPreviewEntry["action"];
+          try {
+            const existing = await stigmer.manifest.getByReference(
+              document.handler.yamlKind,
+              document.org,
+              document.slug,
+            );
+            action = existing !== null ? "update" : "create";
+          } catch {
+            action = "unknown";
+          }
+          return { document, action, status: "pending" };
+        }),
+      );
+
+      if (validateSeq.current === seq) {
+        setEntries(resolved);
+        setValidationError(null);
+        setIsValidating(false);
+      }
+    }, VALIDATE_DEBOUNCE_MS);
+
+    return () => clearTimeout(timer);
+  }, [content, stigmer, isApplying]);
+
+  const applyAll = useCallback(async (): Promise<boolean> => {
+    if (!entries || entries.length === 0) return false;
+
+    // Invalidate any in-flight validation so it cannot clobber apply statuses.
+    validateSeq.current++;
+    setIsApplying(true);
+
+    // Local working copy — React state is updated per transition so the
+    // dialog renders progress live.
+    const working = entries.map((entry): ManifestPreviewEntry => ({ ...entry, status: "pending" }));
+    const commit = () => setEntries([...working]);
+
+    let allApplied = true;
+
+    for (let i = 0; i < working.length; i++) {
+      if (!allApplied) {
+        working[i] = { ...working[i], status: "skipped" };
+        continue;
+      }
+
+      working[i] = { ...working[i], status: "applying" };
+      commit();
+
+      try {
+        const result = await stigmer.manifest.apply(working[i].document);
+        working[i] = { ...working[i], status: "applied", result };
+      } catch (err) {
+        working[i] = {
+          ...working[i],
+          status: "failed",
+          errorMessage: toError(err).message,
+        };
+        allApplied = false;
+      }
+      commit();
+    }
+
+    commit();
+    setIsApplying(false);
+    return allApplied;
+  }, [entries, stigmer]);
+
+  const hasRedactedSecrets = useMemo(
+    () => containsRedactedSecrets(content),
+    [content],
+  );
+
+  return useMemo(
+    () => ({
+      content,
+      setContent,
+      readFile,
+      entries,
+      validationError,
+      isValidating,
+      hasRedactedSecrets,
+      applyAll,
+      isApplying,
+      reset,
+    }),
+    [
+      content,
+      setContent,
+      readFile,
+      entries,
+      validationError,
+      isValidating,
+      hasRedactedSecrets,
+      applyAll,
+      isApplying,
+      reset,
+    ],
+  );
+}