@stigmer/react 3.2.2 → 3.3.0

package/src/manifest/EditResourceYamlDialog.tsx

@@ -0,0 +1,265 @@
+"use client";
+
+import { lazy, Suspense, useCallback, useEffect, useRef } from "react";
+import type { Message } from "@bufbuild/protobuf";
+import { cn } from "@stigmer/theme";
+import { getUserMessage, type AppliedManifest } from "@stigmer/sdk";
+import { toast } from "../feedback/toast.js";
+import { RedactedSecretsNotice } from "./RedactedSecretsNotice.js";
+import { useEditResourceYaml } from "./useEditResourceYaml.js";
+
+// CodeMirror loads only when an editor dialog actually opens (DD-013).
+const LazyYamlEditor = lazy(() =>
+  import("./YamlEditor.js").then((m) => ({ default: m.YamlEditor })),
+);
+
+/** Props for {@link EditResourceYamlDialog}. */
+export interface EditResourceYamlDialogProps {
+  /** Whether the dialog is open. */
+  readonly open: boolean;
+  /** Called when the dialog should open or close. */
+  readonly onOpenChange: (open: boolean) => void;
+  /**
+   * The resource to edit, as returned by the server. `null` while loading —
+   * the dialog shows the editor as soon as the resource arrives.
+   */
+  readonly resource: Message | null;
+  /** Called after a successful apply. Use for refetching or navigation. */
+  readonly onApplied?: (result: AppliedManifest) => void;
+}
+
+/**
+ * Modal dialog for editing a resource as YAML and applying the changes —
+ * the kind-agnostic "Edit YAML" experience for detail pages and panels.
+ *
+ * Workflow:
+ * 1. The resource is serialized to canonical YAML (system-managed state
+ *    stripped) and seeded into a CodeMirror editor
+ * 2. Every edit is validated against the kind's generated proto schema;
+ *    errors render inline with the exact schema complaint
+ * 3. A live summary states what applying will do ("update X" / "create Y"),
+ *    resolved against server state — so a rename reads as a create
+ * 4. Apply calls the kind's `apply` RPC (create-or-update by slug)
+ *
+ * Redacted secret values (`***REDACTED***`) are explained inline: applying
+ * them preserves the stored secrets (the server's marker contract).
+ *
+ * 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
+ * const { agent, refetch } = useAgent(org, slug);
+ *
+ * <EditResourceYamlDialog
+ *   open={editOpen}
+ *   onOpenChange={setEditOpen}
+ *   resource={agent}
+ *   onApplied={() => refetch()}
+ * />
+ * ```
+ */
+export function EditResourceYamlDialog({
+  open,
+  onOpenChange,
+  resource,
+  onApplied,
+}: EditResourceYamlDialogProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const edit = useEditResourceYaml({ resource });
+  const { reset } = edit;
+
+  // 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]);
+
+  // Discard stale edits from a previous session when the dialog opens.
+  useEffect(() => {
+    if (open) reset();
+  }, [open, reset]);
+
+  const handleCancel = useCallback(
+    (e: React.SyntheticEvent) => {
+      e.preventDefault();
+      onOpenChange(false);
+    },
+    [onOpenChange],
+  );
+
+  const handleApply = useCallback(async () => {
+    try {
+      const result = await edit.apply();
+      if (!result) return;
+      toast.success(`${result.displayName} "${result.name}" applied`);
+      onOpenChange(false);
+      onApplied?.(result);
+    } catch {
+      // error state is set by the hook and rendered inline
+    }
+  }, [edit, onOpenChange, onApplied]);
+
+  const canApply =
+    edit.validation.status === "valid" && edit.isDirty && !edit.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">Edit YAML</h3>
+          <p className="text-sm text-muted-foreground">
+            Edit the resource definition and apply. Changes are validated
+            against the resource schema as you type.
+          </p>
+        </div>
+
+        {/* Editor */}
+        {resource ? (
+          <Suspense fallback={<EditorLoading />}>
+            <LazyYamlEditor
+              value={edit.yaml}
+              onChange={edit.setYaml}
+              className="h-80"
+            />
+          </Suspense>
+        ) : (
+          <EditorLoading label="Loading resource…" />
+        )}
+
+        {edit.hasRedactedSecrets && <RedactedSecretsNotice />}
+
+        {/* Validation error */}
+        {edit.validation.status === "invalid" && (
+          <div
+            role="alert"
+            className="rounded-md border border-destructive bg-card px-3 py-2.5 text-sm text-destructive"
+          >
+            {edit.validation.message}
+          </div>
+        )}
+
+        {/* Apply error — the server's refusal (e.g. a datastore
+            collection-removal rejection) rendered verbatim, with an
+            acknowledge-and-retry affordance: the operator reads the
+            guard, edits or decides, and re-applies without reopening
+            the dialog. */}
+        {edit.error && (
+          <div
+            role="alert"
+            className="flex items-start gap-3 rounded-md border border-destructive bg-card px-3 py-2.5"
+          >
+            <p className="flex-1 text-sm text-destructive">
+              {getUserMessage(edit.error)}
+            </p>
+            <div className="flex shrink-0 items-center gap-2">
+              <button
+                type="button"
+                onClick={handleApply}
+                disabled={edit.validation.status !== "valid" || edit.isApplying}
+                className={cn(
+                  "rounded-md border border-input bg-background px-2 py-1 text-xs font-medium text-foreground",
+                  "hover:bg-accent hover:text-accent-foreground",
+                  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                  "disabled:pointer-events-none disabled:opacity-50",
+                )}
+              >
+                Try again
+              </button>
+              <button
+                type="button"
+                onClick={edit.clearError}
+                aria-label="Dismiss error"
+                className={cn(
+                  "rounded-md px-2 py-1 text-xs font-medium text-muted-foreground",
+                  "hover:bg-accent hover:text-foreground",
+                  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                )}
+              >
+                Dismiss
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Footer: target summary + actions */}
+        <div className="flex items-center justify-between gap-3">
+          <p className="text-xs text-muted-foreground" aria-live="polite">
+            {targetSummary(edit.validation.status, edit.isDirty, edit.target)}
+          </p>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={() => onOpenChange(false)}
+              disabled={edit.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",
+              )}
+            >
+              {edit.isApplying ? "Applying…" : "Apply changes"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </dialog>
+  );
+}
+
+function targetSummary(
+  validationStatus: "empty" | "invalid" | "valid",
+  isDirty: boolean,
+  target: ReturnType<typeof useEditResourceYaml>["target"],
+): string {
+  if (validationStatus !== "valid") return "";
+  if (!isDirty) return "No changes yet.";
+  if (target === null) return "Checking what applying will do…";
+  switch (target.action) {
+    case "update":
+      return `Applying will update ${target.slug}.`;
+    case "create":
+      return `Applying will create ${target.slug} — the name or slug changed.`;
+    case "unknown":
+      return `Applying will create or update ${target.slug}.`;
+  }
+}
+
+function EditorLoading({ label = "Loading editor…" }: { readonly label?: string }) {
+  return (
+    <div className="flex h-80 items-center justify-center rounded-md border border-border bg-muted text-sm text-muted-foreground">
+      {label}
+    </div>
+  );
+}

package/src/manifest/RedactedSecretsNotice.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+
+/** Props for {@link RedactedSecretsNotice}. */
+export interface RedactedSecretsNoticeProps {
+  /** Additional CSS classes for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Inline explanation shown when manifest content contains `***REDACTED***`
+ * secret markers, so the marker reads as a contract rather than a bug:
+ * applying it preserves the stored secret; replacing it sets a new value.
+ *
+ * Shared by {@link EditResourceYamlDialog} and {@link ApplyManifestDialog}.
+ */
+export function RedactedSecretsNotice({ className }: RedactedSecretsNoticeProps) {
+  return (
+    <p
+      className={cn(
+        "rounded-md border border-border bg-muted px-3 py-2 text-xs text-muted-foreground",
+        className,
+      )}
+    >
+      Secret values are shown as <code className="font-mono">***REDACTED***</code>.
+      Applying keeps the stored secrets; replace a marker to set a new value.
+    </p>
+  );
+}

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();
+  });
+});