@stigmer/react 3.2.3 → 3.3.0

package/src/manifest/YamlEditor.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import {
+  useRef,
+  useEffect,
+  memo,
+  type CSSProperties,
+} from "react";
+import { cn } from "@stigmer/theme";
+import { EditorState, Compartment } from "@codemirror/state";
+import { EditorView, keymap, lineNumbers, highlightActiveLine, drawSelection, highlightSpecialChars } from "@codemirror/view";
+import { yaml } from "@codemirror/lang-yaml";
+import { syntaxHighlighting, HighlightStyle, bracketMatching, indentOnInput, foldGutter } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+import { lintGutter, type Diagnostic, setDiagnostics } from "@codemirror/lint";
+import { defaultKeymap, indentWithTab, history, historyKeymap } from "@codemirror/commands";
+import { autocompletion } from "@codemirror/autocomplete";
+
+/** Props for {@link YamlEditor}. */
+export interface YamlEditorProps {
+  /** Current YAML content. */
+  readonly value: string;
+  /** Called when the editor content changes. */
+  readonly onChange?: (value: string) => void;
+  /** Validation diagnostics to display as inline markers. */
+  readonly diagnostics?: readonly Diagnostic[];
+  /** Whether the editor is read-only. @default false */
+  readonly readOnly?: boolean;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+  /** Additional inline styles for the root container. */
+  readonly style?: CSSProperties;
+}
+
+/**
+ * YAML editor built on CodeMirror 6, shared by every YAML surface in the
+ * SDK (workflow editor tab, resource manifest dialogs).
+ *
+ * Provides syntax highlighting, line numbers, bracket matching,
+ * code folding, undo/redo, and inline diagnostic markers driven by
+ * external validation (via the `diagnostics` prop).
+ *
+ * Themed via `--stgm-*` CSS custom properties to respect the host
+ * application's design tokens.
+ *
+ * This is an optional SDK component — it requires CodeMirror peer
+ * dependencies. Consumers that render it conditionally should load it
+ * via `React.lazy` so the CodeMirror bundle stays out of paths that
+ * never open an editor (DD-013).
+ *
+ * @example
+ * ```tsx
+ * <YamlEditor
+ *   value={yaml}
+ *   onChange={setYaml}
+ *   diagnostics={diagnostics}
+ * />
+ * ```
+ */
+export const YamlEditor = memo(function YamlEditor({
+  value,
+  onChange,
+  diagnostics,
+  readOnly = false,
+  className,
+  style,
+}: YamlEditorProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const readOnlyCompartment = useRef(new Compartment());
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const isInternalUpdate = useRef(false);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const updateListener = EditorView.updateListener.of((update) => {
+      if (update.docChanged) {
+        isInternalUpdate.current = true;
+        onChangeRef.current?.(update.state.doc.toString());
+      }
+    });
+
+    const state = EditorState.create({
+      doc: value,
+      extensions: [
+        lineNumbers(),
+        highlightActiveLine(),
+        highlightSpecialChars(),
+        drawSelection(),
+        bracketMatching(),
+        indentOnInput(),
+        foldGutter(),
+        history(),
+        yaml(),
+        syntaxHighlighting(stigmerHighlightStyle, { fallback: true }),
+        autocompletion(),
+        lintGutter(),
+        keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
+        readOnlyCompartment.current.of(EditorState.readOnly.of(readOnly)),
+        stigmerTheme,
+        updateListener,
+      ],
+    });
+
+    const view = new EditorView({
+      state,
+      parent: containerRef.current,
+    });
+
+    viewRef.current = view;
+
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, []);
+
+  // Sync external value changes into the editor
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+
+    if (isInternalUpdate.current) {
+      isInternalUpdate.current = false;
+      return;
+    }
+
+    const currentDoc = view.state.doc.toString();
+    if (currentDoc !== value) {
+      view.dispatch({
+        changes: {
+          from: 0,
+          to: currentDoc.length,
+          insert: value,
+        },
+      });
+    }
+  }, [value]);
+
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+
+    view.dispatch({
+      effects: readOnlyCompartment.current.reconfigure(
+        EditorState.readOnly.of(readOnly),
+      ),
+    });
+  }, [readOnly]);
+
+  // Sync diagnostics into CodeMirror's lint system
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+
+    const cmDiags: Diagnostic[] = diagnostics
+      ? diagnostics.map((d) => ({
+          ...d,
+          from: Math.min(d.from, view.state.doc.length),
+          to: Math.min(d.to, view.state.doc.length),
+        }))
+      : [];
+
+    view.dispatch(setDiagnostics(view.state, cmDiags));
+  }, [diagnostics]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "stgm-yaml-editor overflow-auto rounded-md border border-border bg-background font-mono text-sm",
+        className,
+      )}
+      style={style}
+    />
+  );
+});
+
+// ---------------------------------------------------------------------------
+// Syntax highlighting: maps lezer tags to --stgm-syntax-* CSS variables
+// ---------------------------------------------------------------------------
+
+const stigmerHighlightStyle = HighlightStyle.define([
+  { tag: tags.propertyName, color: "var(--stgm-syntax-property, #0550ae)" },
+  { tag: tags.tagName, color: "var(--stgm-syntax-tag, #cf222e)" },
+  { tag: tags.keyword, color: "var(--stgm-syntax-keyword, #8250df)", fontWeight: "bold" },
+  { tag: tags.string, color: "var(--stgm-syntax-string, #0a3069)" },
+  { tag: tags.number, color: "var(--stgm-syntax-number, #953800)" },
+  { tag: [tags.bool, tags.null], color: "var(--stgm-syntax-bool, #8250df)" },
+  { tag: tags.atom, color: "var(--stgm-syntax-atom, #cf222e)" },
+  { tag: tags.comment, color: "var(--stgm-syntax-comment, #6e7781)", fontStyle: "italic" },
+  { tag: tags.meta, color: "var(--stgm-syntax-meta, #8250df)" },
+  { tag: tags.name, color: "var(--stgm-foreground, #1a1a2e)" },
+  { tag: tags.definition(tags.name), color: "var(--stgm-syntax-property, #0550ae)" },
+  { tag: tags.separator, color: "var(--stgm-muted-foreground, #737373)" },
+  { tag: tags.punctuation, color: "var(--stgm-muted-foreground, #737373)" },
+]);
+
+// ---------------------------------------------------------------------------
+// CodeMirror theme bridge: maps --stgm-* tokens to editor styles
+// ---------------------------------------------------------------------------
+
+const stigmerTheme = EditorView.theme({
+  "&": {
+    height: "100%",
+    backgroundColor: "var(--stgm-background, #fff)",
+    color: "var(--stgm-foreground, #1a1a2e)",
+    fontSize: "13px",
+  },
+  ".cm-content": {
+    caretColor: "var(--stgm-foreground, #1a1a2e)",
+    fontFamily: "var(--stgm-font-mono, ui-monospace, monospace)",
+    padding: "8px 0",
+  },
+  ".cm-cursor, .cm-dropCursor": {
+    borderLeftColor: "var(--stgm-foreground, #1a1a2e)",
+  },
+  "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+    {
+      backgroundColor: "var(--stgm-accent, #e0e7ff)",
+    },
+  ".cm-gutters": {
+    backgroundColor: "var(--stgm-muted, #f5f5f5)",
+    color: "var(--stgm-muted-foreground, #737373)",
+    border: "none",
+    borderRight: "1px solid var(--stgm-border, #e5e5e5)",
+  },
+  ".cm-activeLineGutter": {
+    backgroundColor: "var(--stgm-accent, #e0e7ff)",
+  },
+  ".cm-activeLine": {
+    backgroundColor: "color-mix(in srgb, var(--stgm-accent, #e0e7ff) 30%, transparent)",
+  },
+  ".cm-foldPlaceholder": {
+    backgroundColor: "var(--stgm-muted, #f5f5f5)",
+    border: "1px solid var(--stgm-border, #e5e5e5)",
+    color: "var(--stgm-muted-foreground, #737373)",
+  },
+  ".cm-tooltip": {
+    backgroundColor: "var(--stgm-popover, #fff)",
+    color: "var(--stgm-popover-foreground, #1a1a2e)",
+    border: "1px solid var(--stgm-border, #e5e5e5)",
+    borderRadius: "6px",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+  },
+  ".cm-tooltip-autocomplete": {
+    "& > ul > li[aria-selected]": {
+      backgroundColor: "var(--stgm-accent, #e0e7ff)",
+      color: "var(--stgm-accent-foreground, #1a1a2e)",
+    },
+  },
+  ".cm-diagnostic-error": {
+    borderLeft: "3px solid var(--stgm-destructive, #ef4444)",
+  },
+  ".cm-diagnostic-warning": {
+    borderLeft: "3px solid var(--stgm-warning, #f59e0b)",
+  },
+  ".cm-diagnostic-info": {
+    borderLeft: "3px solid var(--stgm-primary, #6366f1)",
+  },
+  ".cm-lint-marker-error": {
+    content: "'●'",
+    color: "var(--stgm-destructive, #ef4444)",
+  },
+  ".cm-lint-marker-warning": {
+    content: "'●'",
+    color: "var(--stgm-warning, #f59e0b)",
+  },
+});

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

@@ -0,0 +1,118 @@
+// Tests for the shared Edit-YAML dialog's apply-error affordance
+// (DD-008 SD-6): the server's refusal renders verbatim with
+// Try-again/Dismiss — shared by every kind (McpServer, Agent, Skill,
+// Datastore), so the datastore collection-removal rejection and any
+// other apply-time guard get the same acknowledge-and-retry treatment.
+
+import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import { DatastoreSchema } from "@stigmer/protos/ai/stigmer/agentic/datastore/v1/api_pb";
+import { EditResourceYamlDialog } from "../EditResourceYamlDialog";
+import type { useEditResourceYaml } from "../useEditResourceYaml";
+
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal = function showModal() {
+    this.open = true;
+  };
+  HTMLDialogElement.prototype.close = function close() {
+    this.open = false;
+  };
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+type EditState = ReturnType<typeof useEditResourceYaml>;
+
+const applyMock = vi.fn();
+const clearErrorMock = vi.fn();
+
+let editState: Partial<EditState>;
+
+vi.mock("../useEditResourceYaml", () => ({
+  useEditResourceYaml: () => ({
+    yaml: "kind: Datastore",
+    setYaml: vi.fn(),
+    validation: { status: "valid" as const },
+    target: { action: "update" as const, slug: "clinic" },
+    isDirty: true,
+    isApplying: false,
+    error: null,
+    clearError: clearErrorMock,
+    apply: applyMock,
+    reset: vi.fn(),
+    hasRedactedSecrets: false,
+    ...editState,
+  }),
+}));
+
+// CodeMirror stays out of the test environment.
+vi.mock("../YamlEditor", () => ({
+  YamlEditor: () => <div data-testid="yaml-editor" />,
+}));
+
+const RESOURCE = create(DatastoreSchema, {
+  metadata: { id: "dst_1", slug: "clinic", org: "acme", name: "Clinic" },
+});
+
+function renderDialog() {
+  return render(
+    <EditResourceYamlDialog
+      open
+      onOpenChange={vi.fn()}
+      resource={RESOURCE}
+      onApplied={vi.fn()}
+    />,
+  );
+}
+
+describe("EditResourceYamlDialog — apply-error affordance", () => {
+  it("renders the server's refusal verbatim with Try again and Dismiss", () => {
+    editState = {
+      error: new Error(
+        'collection "old_notes" was removed from the spec; re-apply with the removal acknowledged',
+      ),
+    };
+    renderDialog();
+
+    const alert = screen.getByRole("alert");
+    expect(alert.textContent).toContain(
+      'collection "old_notes" was removed from the spec',
+    );
+    expect(screen.getByRole("button", { name: "Try again" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Dismiss error" })).toBeTruthy();
+  });
+
+  it("Try again re-invokes apply without reopening the dialog", () => {
+    editState = { error: new Error("guard refused") };
+    renderDialog();
+
+    fireEvent.click(screen.getByRole("button", { name: "Try again" }));
+    expect(applyMock).toHaveBeenCalled();
+  });
+
+  it("Dismiss clears the error state", () => {
+    editState = { error: new Error("guard refused") };
+    renderDialog();
+
+    fireEvent.click(screen.getByRole("button", { name: "Dismiss error" }));
+    expect(clearErrorMock).toHaveBeenCalled();
+  });
+
+  it("Try again is disabled while a retry is already in flight", () => {
+    editState = { error: new Error("guard refused"), isApplying: true };
+    renderDialog();
+
+    const retry = screen.getByRole("button", { name: "Try again" }) as HTMLButtonElement;
+    expect(retry.disabled).toBe(true);
+  });
+
+  it("renders no error affordances when healthy", () => {
+    editState = {};
+    renderDialog();
+    expect(screen.queryByRole("button", { name: "Try again" })).toBeNull();
+  });
+});

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

@@ -0,0 +1,237 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { StigmerContext } from "../../context";
+import { useApplyManifest } from "../useApplyManifest";
+
+// The hook runs the real manifest engine (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().mockImplementation((doc: { handler: { yamlKind: string; displayName: string }; name: string; slug: string; org: string }) =>
+          Promise.resolve({
+            yamlKind: doc.handler.yamlKind,
+            displayName: doc.handler.displayName,
+            name: doc.name,
+            slug: doc.slug,
+            org: doc.org,
+            id: "res_01",
+          }),
+        ),
+      getByReference: overrides.getByReference ?? vi.fn().mockResolvedValue(null),
+    },
+  } as never;
+}
+
+function wrapper(client: unknown) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <StigmerContext.Provider value={client as never}>
+        {children}
+      </StigmerContext.Provider>
+    );
+  };
+}
+
+const AGENT_YAML = `
+apiVersion: agentic.stigmer.ai/v1
+kind: Agent
+metadata:
+  name: clinic-patient-assistant
+spec:
+  instructions: Short messages.
+`;
+
+const CHANNEL_AND_ENV_YAML = `
+apiVersion: agentic.stigmer.ai/v1
+kind: AgentChannel
+metadata:
+  name: clinic-patient-whatsapp
+  org: rakeshreddi098
+spec:
+  agent_ref:
+    kind: agent
+    org: rakeshreddi098
+    slug: clinic-patient-assistant
+  enabled: true
+---
+apiVersion: agentic.stigmer.ai/v1
+kind: Environment
+metadata:
+  name: clinic-patient-db
+  org: rakeshreddi098
+spec:
+  data:
+    POSTGRES_CONNECTION_URL:
+      value: "***REDACTED***"
+      is_secret: true
+`;
+
+// Validation (parse + existence resolution) debounces across keystrokes.
+const DEBOUNCE_MS = 500;
+
+async function settleValidation() {
+  await vi.advanceTimersByTimeAsync(DEBOUNCE_MS + 10);
+}
+
+describe("useApplyManifest", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("validates pasted content and injects the target org", async () => {
+    const { result } = renderHook(() => useApplyManifest("acme"), {
+      wrapper: wrapper(createMockStigmer()),
+    });
+
+    act(() => {
+      result.current.setContent(AGENT_YAML);
+    });
+    expect(result.current.isValidating).toBe(true);
+
+    await act(settleValidation);
+
+    expect(result.current.validationError).toBeNull();
+    expect(result.current.entries).toHaveLength(1);
+    expect(result.current.entries![0]).toMatchObject({
+      action: "create",
+      status: "pending",
+    });
+    expect(result.current.entries![0].document.org).toBe("acme");
+  });
+
+  it("surfaces parse errors with the schema complaint", async () => {
+    const { result } = renderHook(() => useApplyManifest("acme"), {
+      wrapper: wrapper(createMockStigmer()),
+    });
+
+    act(() => {
+      result.current.setContent("kind: Agent\nmetadata:\n  name: x\nspec:\n  bogus_field: 1\n");
+    });
+    await act(settleValidation);
+
+    expect(result.current.entries).toBeNull();
+    expect(result.current.validationError).toContain("Invalid Agent");
+  });
+
+  it("orders multi-document manifests by dependency (Environment before AgentChannel)", async () => {
+    const { result } = renderHook(() => useApplyManifest("rakeshreddi098"), {
+      wrapper: wrapper(createMockStigmer()),
+    });
+
+    act(() => {
+      result.current.setContent(CHANNEL_AND_ENV_YAML);
+    });
+    await act(settleValidation);
+
+    expect(
+      result.current.entries!.map((e) => e.document.handler.yamlKind),
+    ).toEqual(["Environment", "AgentChannel"]);
+    expect(result.current.hasRedactedSecrets).toBe(true);
+  });
+
+  it("marks existing resources as updates in the preview", async () => {
+    const getByReference = vi.fn().mockResolvedValue({ metadata: {} });
+    const { result } = renderHook(() => useApplyManifest("acme"), {
+      wrapper: wrapper(createMockStigmer({ getByReference })),
+    });
+
+    act(() => {
+      result.current.setContent(AGENT_YAML);
+    });
+    await act(settleValidation);
+
+    expect(result.current.entries![0].action).toBe("update");
+  });
+
+  it("applies all documents sequentially and reports success", async () => {
+    const apply = vi.fn().mockImplementation((doc: { handler: { yamlKind: string; displayName: string }; name: string; slug: string; org: string }) =>
+      Promise.resolve({
+        yamlKind: doc.handler.yamlKind,
+        displayName: doc.handler.displayName,
+        name: doc.name,
+        slug: doc.slug,
+        org: doc.org,
+        id: "res_01",
+      }),
+    );
+    const { result } = renderHook(() => useApplyManifest("rakeshreddi098"), {
+      wrapper: wrapper(createMockStigmer({ apply })),
+    });
+
+    act(() => {
+      result.current.setContent(CHANNEL_AND_ENV_YAML);
+    });
+    await act(settleValidation);
+
+    let allApplied = false;
+    await act(async () => {
+      allApplied = await result.current.applyAll();
+    });
+
+    expect(allApplied).toBe(true);
+    expect(apply).toHaveBeenCalledTimes(2);
+    expect(result.current.entries!.map((e) => e.status)).toEqual([
+      "applied",
+      "applied",
+    ]);
+  });
+
+  it("stops at the first failure and marks the rest skipped", async () => {
+    const apply = vi
+      .fn()
+      .mockRejectedValueOnce(new Error("environment rejected"))
+      .mockResolvedValue({});
+    const { result } = renderHook(() => useApplyManifest("rakeshreddi098"), {
+      wrapper: wrapper(createMockStigmer({ apply })),
+    });
+
+    act(() => {
+      result.current.setContent(CHANNEL_AND_ENV_YAML);
+    });
+    await act(settleValidation);
+
+    let allApplied = true;
+    await act(async () => {
+      allApplied = await result.current.applyAll();
+    });
+
+    expect(allApplied).toBe(false);
+    expect(apply).toHaveBeenCalledTimes(1);
+    expect(result.current.entries!.map((e) => e.status)).toEqual([
+      "failed",
+      "skipped",
+    ]);
+    expect(result.current.entries![0].errorMessage).toBe("environment rejected");
+  });
+
+  it("reset clears content, preview, and errors", async () => {
+    const { result } = renderHook(() => useApplyManifest("acme"), {
+      wrapper: wrapper(createMockStigmer()),
+    });
+
+    act(() => {
+      result.current.setContent(AGENT_YAML);
+    });
+    await act(settleValidation);
+    expect(result.current.entries).not.toBeNull();
+
+    act(() => {
+      result.current.reset();
+    });
+
+    expect(result.current.content).toBe("");
+    expect(result.current.entries).toBeNull();
+    expect(result.current.validationError).toBeNull();
+  });
+});