@stigmer/react 3.2.3 → 3.4.0

package/src/datastore/__tests__/DeleteDatastoreDialog.test.tsx

@@ -0,0 +1,133 @@
+// Tests for the guarded delete flow (DD-008 SD-6): status-informed
+// counts, slug-typed arming for non-empty datastores, standard confirm
+// for empty ones, and verbatim guard-refusal rendering.
+
+import { describe, it, expect, vi, beforeAll, afterEach, beforeEach } from "vitest";
+import { render, screen, cleanup, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ReactNode } from "react";
+import { create } from "@bufbuild/protobuf";
+import { DatastoreSchema } from "@stigmer/protos/ai/stigmer/agentic/datastore/v1/api_pb";
+import { StigmerContext } from "../../context";
+import { DeleteDatastoreDialog } from "../DeleteDatastoreDialog";
+
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal = function showModal() {
+    this.open = true;
+  };
+  HTMLDialogElement.prototype.close = function close() {
+    this.open = false;
+  };
+});
+
+afterEach(() => cleanup());
+beforeEach(() => vi.restoreAllMocks());
+
+function makeDatastore(recordCounts: number[]) {
+  return create(DatastoreSchema, {
+    metadata: { id: "dst_1", slug: "clinic", name: "Clinic", org: "acme" },
+    status: {
+      collections: recordCounts.map((count, i) => ({
+        name: `coll_${i}`,
+        recordCount: BigInt(count),
+      })),
+    },
+  });
+}
+
+function renderDialog(overrides: {
+  datastore: ReturnType<typeof makeDatastore>;
+  del?: (...a: unknown[]) => Promise<unknown>;
+  onDeleted?: () => void;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const stigmer = { datastore: { delete: overrides.del ?? vi.fn() } };
+  function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <StigmerContext.Provider value={stigmer as never}>{children}</StigmerContext.Provider>
+    );
+  }
+  return render(
+    <DeleteDatastoreDialog
+      open
+      onOpenChange={overrides.onOpenChange ?? vi.fn()}
+      datastore={overrides.datastore}
+      onDeleted={overrides.onDeleted}
+    />,
+    { wrapper: Wrapper },
+  );
+}
+
+describe("DeleteDatastoreDialog — non-empty datastore", () => {
+  it("pre-fills counts from status and requires typing the slug to arm", async () => {
+    const user = userEvent.setup();
+    const del = vi.fn().mockResolvedValue({});
+    renderDialog({ datastore: makeDatastore([200, 14, 0]), del });
+
+    // Counts from the loaded status: 214 records across 2 non-empty collections.
+    expect(screen.getByText(/214 records/)).toBeTruthy();
+    expect(screen.getByText(/2 collections/)).toBeTruthy();
+
+    const deleteButton = screen.getByRole("button", {
+      name: "Delete datastore",
+    }) as HTMLButtonElement;
+    expect(deleteButton.disabled).toBe(true);
+
+    // A wrong slug keeps it disarmed.
+    const input = screen.getByLabelText("Type clinic to confirm deletion");
+    await user.type(input, "clinik");
+    expect(deleteButton.disabled).toBe(true);
+
+    // The exact slug arms it; the armed request carries force.
+    await user.clear(input);
+    await user.type(input, "clinic");
+    expect(deleteButton.disabled).toBe(false);
+
+    await user.click(deleteButton);
+    await waitFor(() => expect(del).toHaveBeenCalled());
+    expect(del).toHaveBeenCalledWith({ resourceId: "dst_1", force: true });
+  });
+
+  it("renders a guard refusal verbatim inside the dialog — server stays authoritative", async () => {
+    const user = userEvent.setup();
+    const refusal = new Error(
+      'datastore "clinic" is referenced by 1 agents (clinic-assistant); remove the datastore_usages references before deleting',
+    );
+    const del = vi.fn().mockRejectedValue(refusal);
+    const onOpenChange = vi.fn();
+    renderDialog({ datastore: makeDatastore([214]), del, onOpenChange });
+
+    await user.type(
+      screen.getByLabelText("Type clinic to confirm deletion"),
+      "clinic",
+    );
+    await user.click(screen.getByRole("button", { name: "Delete datastore" }));
+
+    const alert = await screen.findByRole("alert");
+    expect(alert.textContent).toContain("clinic-assistant");
+    expect(alert.textContent).toContain("remove the datastore_usages references");
+    // The dialog stays open — the operator's next step is detaching.
+    expect(onOpenChange).not.toHaveBeenCalledWith(false);
+  });
+});
+
+describe("DeleteDatastoreDialog — empty datastore", () => {
+  it("keeps the standard destructive confirm with no slug typing and no force", async () => {
+    const user = userEvent.setup();
+    const del = vi.fn().mockResolvedValue({});
+    const onDeleted = vi.fn();
+    renderDialog({ datastore: makeDatastore([0, 0]), del, onDeleted });
+
+    expect(screen.getByText(/holds no records/)).toBeTruthy();
+    expect(screen.queryByLabelText(/to confirm deletion/)).toBeNull();
+
+    const deleteButton = screen.getByRole("button", {
+      name: "Delete datastore",
+    }) as HTMLButtonElement;
+    expect(deleteButton.disabled).toBe(false);
+
+    await user.click(deleteButton);
+    await waitFor(() => expect(del).toHaveBeenCalledWith({ resourceId: "dst_1", force: false }));
+    expect(onDeleted).toHaveBeenCalled();
+  });
+});

package/src/datastore/__tests__/FieldValueControl.test.tsx

@@ -0,0 +1,160 @@
+// Tests for the typed value control: per-FieldType dispatch and the
+// canonical encodings it emits.
+
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import {
+  FieldDeclarationSchema,
+  FieldType,
+} from "@stigmer/protos/ai/stigmer/agentic/datastore/v1/spec_pb";
+import { FieldValueControl } from "../FieldValueControl";
+
+afterEach(() => cleanup());
+
+function field(type: FieldType, extras: { enumValues?: string[] } = {}) {
+  return create(FieldDeclarationSchema, {
+    name: "f",
+    type,
+    enumValues: extras.enumValues ?? [],
+  });
+}
+
+describe("FieldValueControl dispatch", () => {
+  it("renders a text input for plain strings", () => {
+    render(
+      <FieldValueControl
+        field={field(FieldType.string)}
+        value={undefined}
+        onChange={vi.fn()}
+        aria-label="f"
+      />,
+    );
+    expect((screen.getByLabelText("f") as HTMLInputElement).type).toBe("text");
+  });
+
+  it("renders an enum select when enum_values are declared", () => {
+    const onChange = vi.fn();
+    render(
+      <FieldValueControl
+        field={field(FieldType.string, { enumValues: ["confirmed", "cancelled"] })}
+        value={undefined}
+        onChange={onChange}
+        aria-label="f"
+      />,
+    );
+    const select = screen.getByLabelText("f") as HTMLSelectElement;
+    expect(Array.from(select.options).map((o) => o.value)).toEqual([
+      "",
+      "confirmed",
+      "cancelled",
+    ]);
+    fireEvent.change(select, { target: { value: "confirmed" } });
+    expect(onChange).toHaveBeenCalledWith("confirmed");
+  });
+
+  it("emits numbers (not strings) for numeric fields", () => {
+    const onChange = vi.fn();
+    render(
+      <FieldValueControl
+        field={field(FieldType.integer)}
+        value={undefined}
+        onChange={onChange}
+        aria-label="f"
+      />,
+    );
+    fireEvent.change(screen.getByLabelText("f"), { target: { value: "42" } });
+    expect(onChange).toHaveBeenCalledWith(42);
+  });
+
+  it("bool renders a tri-state select — unset is distinct from false", () => {
+    const onChange = vi.fn();
+    render(
+      <FieldValueControl
+        field={field(FieldType.bool)}
+        value={undefined}
+        onChange={onChange}
+        aria-label="f"
+      />,
+    );
+    const select = screen.getByLabelText("f") as HTMLSelectElement;
+    expect(select.value).toBe("");
+    fireEvent.change(select, { target: { value: "false" } });
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+
+  it("date and time render native pickers", () => {
+    const { rerender } = render(
+      <FieldValueControl
+        field={field(FieldType.date)}
+        value={undefined}
+        onChange={vi.fn()}
+        aria-label="f"
+      />,
+    );
+    expect((screen.getByLabelText("f") as HTMLInputElement).type).toBe("date");
+    rerender(
+      <FieldValueControl
+        field={field(FieldType.time)}
+        value={undefined}
+        onChange={vi.fn()}
+        aria-label="f"
+      />,
+    );
+    expect((screen.getByLabelText("f") as HTMLInputElement).type).toBe("time");
+  });
+
+  it("timestamp converts the local picker value to RFC 3339 UTC", () => {
+    const onChange = vi.fn();
+    render(
+      <FieldValueControl
+        field={field(FieldType.timestamp)}
+        value={undefined}
+        onChange={onChange}
+        aria-label="f"
+      />,
+    );
+    fireEvent.change(screen.getByLabelText("f"), {
+      target: { value: "2026-07-22T10:00:00" },
+    });
+    const emitted = onChange.mock.calls[0][0] as string;
+    // Local wall time converts to a UTC instant — exact hour depends on
+    // the test host's zone, so assert the canonical UTC shape.
+    expect(emitted).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}Z$/);
+    expect(Date.parse(emitted)).toBe(new Date("2026-07-22T10:00:00").getTime());
+  });
+
+  it("json keeps invalid input local and emits only valid JSON", () => {
+    const onChange = vi.fn();
+    render(
+      <FieldValueControl
+        field={field(FieldType.json)}
+        value={undefined}
+        onChange={onChange}
+        aria-label="f"
+      />,
+    );
+    const textarea = screen.getByLabelText("f");
+    fireEvent.change(textarea, { target: { value: '{"a":' } });
+    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByRole("alert").textContent).toBe("Invalid JSON");
+
+    fireEvent.change(textarea, { target: { value: '{"a": 1}' } });
+    expect(onChange).toHaveBeenCalledWith({ a: 1 });
+    expect(screen.queryByRole("alert")).toBeNull();
+  });
+
+  it("empty input emits undefined (the field will not travel)", () => {
+    const onChange = vi.fn();
+    render(
+      <FieldValueControl
+        field={field(FieldType.string)}
+        value={"x"}
+        onChange={onChange}
+        aria-label="f"
+      />,
+    );
+    fireEvent.change(screen.getByLabelText("f"), { target: { value: "" } });
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
+});

package/src/datastore/__tests__/RecordFilterBuilder.test.tsx

@@ -0,0 +1,155 @@
+// Tests for the filter builder (DD-008 SD-3): chips, draft-then-apply,
+// and the structurally-enforced operator matrix.
+
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent, waitFor } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import {
+  CollectionDeclarationSchema,
+  FieldType,
+} from "@stigmer/protos/ai/stigmer/agentic/datastore/v1/spec_pb";
+import { RecordConditionOp } from "@stigmer/protos/ai/stigmer/agentic/datastore/v1/record_io_pb";
+import { StigmerProvider } from "../../provider";
+import { RecordFilterBuilder } from "../RecordFilterBuilder";
+import type { RecordConditionDraft } from "../recordFilter";
+
+afterEach(() => cleanup());
+
+const COLLECTION = create(CollectionDeclarationSchema, {
+  name: "bookings",
+  fields: [
+    { name: "slot_date", type: FieldType.date, required: true },
+    { name: "status", type: FieldType.string, enumValues: ["confirmed", "cancelled"] },
+    { name: "notes", type: FieldType.json },
+  ],
+});
+
+function renderBuilder(
+  conditions: readonly RecordConditionDraft[],
+  onChange = vi.fn(),
+  readableFields?: readonly string[],
+) {
+  render(
+    <StigmerProvider client={{} as never}>
+      <RecordFilterBuilder
+        collection={COLLECTION}
+        readableFields={readableFields}
+        conditions={conditions}
+        onChange={onChange}
+      />
+    </StigmerProvider>,
+  );
+  return onChange;
+}
+
+describe("RecordFilterBuilder — chips", () => {
+  it("renders active conditions as removable chips", () => {
+    const onChange = renderBuilder([
+      { field: "status", op: RecordConditionOp.eq, value: "confirmed" },
+      { field: "slot_date", op: RecordConditionOp.gte, value: "2026-07-01" },
+    ]);
+
+    expect(screen.getByText("status = confirmed")).toBeTruthy();
+    expect(screen.getByText("slot_date ≥ 2026-07-01")).toBeTruthy();
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Remove filter status = confirmed" }),
+    );
+    expect(onChange).toHaveBeenCalledWith([
+      { field: "slot_date", op: RecordConditionOp.gte, value: "2026-07-01" },
+    ]);
+  });
+
+  it("offers clear-all only with more than one condition", () => {
+    renderBuilder([{ field: "status", op: RecordConditionOp.is_null }]);
+    expect(screen.queryByRole("button", { name: "Clear all" })).toBeNull();
+
+    cleanup();
+    const onChange = renderBuilder([
+      { field: "status", op: RecordConditionOp.is_null },
+      { field: "slot_date", op: RecordConditionOp.eq, value: "2026-07-01" },
+    ]);
+    fireEvent.click(screen.getByRole("button", { name: "Clear all" }));
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
+});
+
+describe("RecordFilterBuilder — draft-then-apply popover", () => {
+  it("offers only filterable fields and the per-type operator matrix", async () => {
+    renderBuilder([]);
+    fireEvent.click(screen.getByRole("button", { name: /Add filter/ }));
+
+    const fieldSelect = (await screen.findByLabelText(/Field/)) as HTMLSelectElement;
+    const fieldNames = Array.from(fieldSelect.options).map((o) => o.value);
+    // json is structurally unofferable; system fields are present.
+    expect(fieldNames).toEqual(["", "slot_date", "status", "id", "created_at", "updated_at"]);
+
+    // A date field offers range operators only — no in/not_in, and no
+    // null tests because it is required.
+    fireEvent.change(fieldSelect, { target: { value: "slot_date" } });
+    const opSelect = (await screen.findByLabelText(/Operator/)) as HTMLSelectElement;
+    const ops = Array.from(opSelect.options)
+      .map((o) => o.textContent)
+      .filter((t) => t !== "— Select —");
+    expect(ops).toEqual(["=", "≠", ">", "≥", "<", "≤"]);
+  });
+
+  it("narrows to the caller's readable fields; system fields stay offered", async () => {
+    // A field-restricted read grant (readable_fields on the read verb):
+    // the server refuses conditions on unreadable fields, so the
+    // builder must not offer them (DD-008 invariant 2).
+    renderBuilder([], vi.fn(), ["status"]);
+    fireEvent.click(screen.getByRole("button", { name: /Add filter/ }));
+
+    const fieldSelect = (await screen.findByLabelText(/Field/)) as HTMLSelectElement;
+    const fieldNames = Array.from(fieldSelect.options).map((o) => o.value);
+    expect(fieldNames).toEqual(["", "status", "id", "created_at", "updated_at"]);
+  });
+
+  it("applies a complete draft and closes; incomplete drafts cannot apply", async () => {
+    const onChange = renderBuilder([]);
+    fireEvent.click(screen.getByRole("button", { name: /Add filter/ }));
+
+    const fieldSelect = (await screen.findByLabelText(/Field/)) as HTMLSelectElement;
+    fireEvent.change(fieldSelect, { target: { value: "status" } });
+    const opSelect = (await screen.findByLabelText(/Operator/)) as HTMLSelectElement;
+    fireEvent.change(opSelect, { target: { value: String(RecordConditionOp.eq) } });
+
+    // No value yet — Apply is disabled (draft-then-apply: nothing fires).
+    const apply = screen.getByRole("button", { name: "Apply" }) as HTMLButtonElement;
+    expect(apply.disabled).toBe(true);
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.change(screen.getByLabelText("Filter value for status"), {
+      target: { value: "confirmed" },
+    });
+    expect(apply.disabled).toBe(false);
+
+    fireEvent.click(apply);
+    await waitFor(() =>
+      expect(onChange).toHaveBeenCalledWith([
+        { field: "status", op: RecordConditionOp.eq, value: "confirmed", values: undefined },
+      ]),
+    );
+  });
+
+  it("value-less operators apply without a value control", async () => {
+    const onChange = renderBuilder([]);
+    fireEvent.click(screen.getByRole("button", { name: /Add filter/ }));
+
+    fireEvent.change(await screen.findByLabelText(/Field/), {
+      target: { value: "status" },
+    });
+    fireEvent.change(await screen.findByLabelText(/Operator/), {
+      target: { value: String(RecordConditionOp.is_null) },
+    });
+
+    expect(screen.queryByLabelText("Filter value for status")).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Apply" }));
+    await waitFor(() =>
+      expect(onChange).toHaveBeenCalledWith([
+        { field: "status", op: RecordConditionOp.is_null, value: undefined, values: undefined },
+      ]),
+    );
+  });
+});

package/src/datastore/__tests__/RecordFormPanel.test.tsx

@@ -0,0 +1,227 @@
+// Tests for the record write surface (DD-008 SD-4): required gating,
+// partial-merge with explicit-null clears, verbatim constraint-error
+// placement, and read-only system fields.
+
+import { describe, it, expect, vi, beforeAll, afterEach, beforeEach } from "vitest";
+import { render, screen, cleanup, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ReactNode } from "react";
+import { Code, ConnectError } from "@connectrpc/connect";
+import { ErrorInfoSchema } from "@stigmer/protos/google/rpc/error_details_pb";
+import { create } from "@bufbuild/protobuf";
+import {
+  CollectionDeclarationSchema,
+  FieldType,
+} from "@stigmer/protos/ai/stigmer/agentic/datastore/v1/spec_pb";
+import { RecordEnvelopeSchema } from "@stigmer/protos/ai/stigmer/agentic/datastore/v1/record_io_pb";
+import { StigmerContext } from "../../context";
+import { RecordFormPanel } from "../RecordFormPanel";
+
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal = function showModal() {
+    this.open = true;
+  };
+  HTMLDialogElement.prototype.close = function close() {
+    this.open = false;
+  };
+});
+
+afterEach(() => cleanup());
+beforeEach(() => vi.restoreAllMocks());
+
+const COLLECTION = create(CollectionDeclarationSchema, {
+  name: "bookings",
+  fields: [
+    { name: "slot_date", type: FieldType.date, required: true },
+    { name: "patient_phone", type: FieldType.string },
+    { name: "notes", type: FieldType.string },
+  ],
+  uniques: [
+    {
+      name: "one_confirmed_per_slot",
+      fields: ["slot_date"],
+      message: "that slot is already booked",
+    },
+  ],
+});
+
+const SCOPE = {
+  org: "acme",
+  datastore: "clinic",
+  collection: "bookings",
+  partition: "default",
+} as const;
+
+function renderPanel(overrides: {
+  insertRecord?: (...args: unknown[]) => Promise<unknown>;
+  updateRecord?: (...args: unknown[]) => Promise<unknown>;
+  record?: ReturnType<typeof create<typeof RecordEnvelopeSchema>> | null;
+  onSaved?: (envelope: unknown) => void;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const client = {
+    datastore: {
+      insertRecord: overrides.insertRecord ?? vi.fn(),
+      updateRecord: overrides.updateRecord ?? vi.fn(),
+    },
+  };
+  function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <StigmerContext.Provider value={client as never}>{children}</StigmerContext.Provider>
+    );
+  }
+  return render(
+    <RecordFormPanel
+      open
+      onOpenChange={overrides.onOpenChange ?? vi.fn()}
+      scope={SCOPE}
+      collection={COLLECTION}
+      record={overrides.record ?? null}
+      onSaved={overrides.onSaved}
+    />,
+    { wrapper: Wrapper },
+  );
+}
+
+describe("RecordFormPanel — insert", () => {
+  it("gates the submit on required fields (error prevention)", () => {
+    renderPanel({});
+    const submit = screen.getByRole("button", { name: "Insert" }) as HTMLButtonElement;
+    expect(submit.disabled).toBe(true);
+    expect(screen.getByText(/Required: slot_date/)).toBeTruthy();
+  });
+
+  it("submits only the fields the operator set", async () => {
+    const user = userEvent.setup();
+    const insertRecord = vi.fn().mockResolvedValue(create(RecordEnvelopeSchema, { id: "dsr_1" }));
+    const onSaved = vi.fn();
+    const onOpenChange = vi.fn();
+    renderPanel({ insertRecord, onSaved, onOpenChange });
+
+    await user.type(screen.getByLabelText(/^slot_date/), "2026-07-22");
+    await user.type(screen.getByLabelText("patient_phone"), "+15550100");
+    await user.click(screen.getByRole("button", { name: "Insert" }));
+
+    await waitFor(() => expect(insertRecord).toHaveBeenCalled());
+    expect(insertRecord).toHaveBeenCalledWith(
+      expect.objectContaining({
+        record: { slot_date: "2026-07-22", patient_phone: "+15550100" },
+        partition: "default",
+      }),
+    );
+    expect(onSaved).toHaveBeenCalled();
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("places a unique-constraint violation next to its declared fields, verbatim", async () => {
+    const user = userEvent.setup();
+    const violation = new ConnectError(
+      "that slot is already booked",
+      Code.AlreadyExists,
+      undefined,
+      [
+        {
+          desc: ErrorInfoSchema,
+          value: {
+            domain: "datastore.stigmer.ai",
+            reason: "CONSTRAINT_VIOLATION",
+            metadata: { constraint: "one_confirmed_per_slot" },
+          },
+        },
+      ],
+    );
+    renderPanel({ insertRecord: vi.fn().mockRejectedValue(violation) });
+
+    await user.type(screen.getByLabelText(/^slot_date/), "2026-07-22");
+    await user.click(screen.getByRole("button", { name: "Insert" }));
+
+    // Field-adjacent: the message renders as the slot_date field's error,
+    // byte-for-byte — not as a form-level banner.
+    const alert = await screen.findByRole("alert");
+    expect(alert.textContent).toContain("that slot is already booked");
+    const slotDateControl = screen.getByLabelText(/^slot_date/);
+    expect(
+      slotDateControl.parentElement?.textContent,
+    ).toContain("that slot is already booked");
+  });
+
+  it("renders an unmapped violation as a form-level banner, verbatim", async () => {
+    const user = userEvent.setup();
+    const violation = new ConnectError(
+      "bookings must be within opening hours",
+      Code.FailedPrecondition,
+      undefined,
+      [
+        {
+          desc: ErrorInfoSchema,
+          value: {
+            domain: "datastore.stigmer.ai",
+            reason: "CONSTRAINT_VIOLATION",
+            metadata: { constraint: "within_hours" }, // a check — no field mapping
+          },
+        },
+      ],
+    );
+    renderPanel({ insertRecord: vi.fn().mockRejectedValue(violation) });
+
+    await user.type(screen.getByLabelText(/^slot_date/), "2026-07-22");
+    await user.click(screen.getByRole("button", { name: "Insert" }));
+
+    const alert = await screen.findByRole("alert");
+    expect(alert.textContent).toContain("bookings must be within opening hours");
+  });
+});
+
+describe("RecordFormPanel — edit (partial merge)", () => {
+  const record = create(RecordEnvelopeSchema, {
+    id: "dsr_1",
+    fields: {
+      slot_date: "2026-07-22",
+      patient_phone: "+15550100",
+      notes: "call first",
+    } as never,
+  });
+
+  it("shows read-only system fields", () => {
+    renderPanel({ record });
+    expect(screen.getByText("dsr_1")).toBeTruthy();
+    // The envelope columns are display-only — no input is named "id".
+    expect(screen.queryByLabelText("id")).toBeNull();
+  });
+
+  it("submits only dirty fields; explicit clear travels as null", async () => {
+    const user = userEvent.setup();
+    const updateRecord = vi.fn().mockResolvedValue(create(RecordEnvelopeSchema, { id: "dsr_1" }));
+    renderPanel({ record, updateRecord });
+
+    // Dirty one field…
+    const phone = screen.getByLabelText("patient_phone");
+    await user.clear(phone);
+    await user.type(phone, "+15550199");
+    // …and clear another.
+    await user.click(screen.getByRole("button", { name: "Clear notes" }));
+
+    await user.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => expect(updateRecord).toHaveBeenCalled());
+    expect(updateRecord).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "dsr_1",
+        // slot_date untouched — absent from the payload entirely.
+        fields: { patient_phone: "+15550199", notes: null },
+      }),
+    );
+  });
+
+  it("closes without a request when nothing is dirty", async () => {
+    const user = userEvent.setup();
+    const updateRecord = vi.fn();
+    const onOpenChange = vi.fn();
+    renderPanel({ record, updateRecord, onOpenChange });
+
+    await user.click(screen.getByRole("button", { name: "Save changes" }));
+
+    expect(updateRecord).not.toHaveBeenCalled();
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});