feat: edit and delete mocks while the session has no calls

Most-requested feature (issues #299, #266, #303). Mocks stay append-only once the
session's history references them (a history entry is tied to the mock that
answered it), so edition/deletion is allowed only while the session history is
still empty — the maintainers' stated position on #231.

- Backend: additive PUT /mocks/:id and DELETE /mocks/:id. UpdateMock keeps the
  mock's identity (ID + creation date) and replaces its definition; both refuse
  with 409 once the session has received calls (types.MockEditForbidden). No
  change to the mock format, its serialization, or the existing routes.
- Frontend: Edit/Delete controls on each mock, shown only once the history query
  resolves empty. Edit reuses the creation drawer (form/YAML) pre-filled and PUTs;
  Delete confirms via Popconfirm.

Tests: Go service tests (update/delete happy path, edit-forbidden-after-call,
not-found) and a Playwright TNR covering the edit+delete flow plus the gate
(no controls on the seeded session, which has a call).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: gwleclerc

client/components/Mocks.tsx

@@ -1,4 +1,6 @@
 import {
+  DeleteOutlined,
+  EditOutlined,
   LockFilled,
   PauseCircleFilled,
   PlayCircleFilled,
@@ -10,15 +12,19 @@ import {
   Button,
   Empty,
   Pagination,
+  Popconfirm,
   Row,
   Spin,
   Tag,
   Typography,
 } from "antd";
 import dayjs from "dayjs";
+import { dump } from "js-yaml";
 import * as React from "react";
 import { Link, useLocation, useParams } from "react-router-dom";
 import {
+  useDeleteMock,
+  useHistory,
   useLockMocks,
   useMocks,
   useSessionsSummary,
@@ -204,12 +210,21 @@ const MockComponent = ({
   loading,
   lockMock,
   unlockMock,
+  editable,
+  deleting,
+  onEdit,
+  onDelete,
 }: {
   mock: Mock;
   canPoll: boolean;
   loading: boolean;
   lockMock: (mockID: string) => unknown;
   unlockMock: (mockID: string) => unknown;
+  // A mock can be edited or deleted only while the session has received no calls yet.
+  editable: boolean;
+  deleting: boolean;
+  onEdit: (mock: Mock) => unknown;
+  onDelete: (mockID: string) => unknown;
 }) => {
   const onLockMock = () => lockMock(mock.state.id);
   const onUnlockMock = () => unlockMock(mock.state.id);
@@ -245,9 +260,35 @@ const MockComponent = ({
             {mock.state.id}
           </Link>
         </div>
-        <span className="date">
-          {dayjs(mock.state.creation_date).format(dateFormat)}
-        </span>
+        <div>
+          {editable && (
+            <>
+              <Button
+                type="link"
+                icon={<EditOutlined />}
+                title="Edit this mock"
+                onClick={() => onEdit(mock)}
+              />
+              <Popconfirm
+                title="Delete this mock?"
+                okText="Delete"
+                okButtonProps={{ danger: true }}
+                onConfirm={() => onDelete(mock.state.id)}
+              >
+                <Button
+                  type="link"
+                  danger
+                  icon={<DeleteOutlined />}
+                  loading={deleting}
+                  title="Delete this mock"
+                />
+              </Popconfirm>
+            </>
+          )}
+          <span className="date">
+            {dayjs(mock.state.creation_date).format(dateFormat)}
+          </span>
+        </div>
       </div>
       <div className="content">
         <MockRequestComponent request={mock.request} />
@@ -294,15 +335,25 @@ const MocksComponent = (): React.JSX.Element => {
   const loading = mocksQuery.isFetching;
   const error = mocksQuery.error;
 
+  // A mock may be edited/deleted only while the session has received no calls (empty history),
+  // matching the append-only guarantee the history relies on. Require the history query to have
+  // resolved first, so the controls don't flash on sessions that actually have calls.
+  const historyQuery = useHistory(sessionID);
+  const editable =
+    canPoll && historyQuery.isSuccess && historyQuery.data.length === 0;
+
   const lockMocksMut = useLockMocks();
   const unlockMocksMut = useUnlockMocks();
+  const deleteMockMut = useDeleteMock();
 
   const initialNewMock = (location.state as { newMock?: string } | null)
     ?.newMock;
-  // Value of the mock creation drawer, or null when it is closed.
+  // Value of the mock creation/edition drawer, or null when it is closed. editMockId is set when
+  // the drawer edits an existing mock (PUT) rather than creating a new one (POST).
   const [newMockValue, setNewMockValue] = React.useState<string | null>(
     initialNewMock ?? null,
   );
+  const [editMockId, setEditMockId] = React.useState<string | null>(null);
 
   const togglePolling = () => setPolling((p) => !p);
   const ref = React.useRef<HTMLDivElement>(null);
@@ -315,6 +366,15 @@ const MocksComponent = (): React.JSX.Element => {
     prevPageSizeRef.current = pageSize;
     return scrollToPage(ref.current, goingBack);
   }, [page, pageSize]);
+  // Open the drawer pre-filled with the mock (without its server-managed state) in edit mode.
+  const handleEditMock = (mock: Mock) => {
+    const { state: _state, ...definition } = mock;
+    setEditMockId(mock.state.id);
+    setNewMockValue(dump([definition]));
+  };
+  const handleDeleteMock = (mockID: string) =>
+    deleteMockMut.mutate({ sessionID, id: mockID });
+
   const isEmpty = mocks.length === 0;
   let filteredMocks = mocks;
   let body = null;
@@ -364,15 +424,25 @@ const MocksComponent = (): React.JSX.Element => {
             loading={loading}
             lockMock={lockMock}
             unlockMock={unlockMock}
+            editable={editable}
+            deleting={deleteMockMut.isPending}
+            onEdit={handleEditMock}
+            onDelete={handleDeleteMock}
           />
         ))}
         {filteredMocks.length > minPageSize && pagination}
       </>
     );
   }
 
-  const handleAddNewMock = () => setNewMockValue("");
-  const handleCloseNewMock = () => setNewMockValue(null);
+  const handleAddNewMock = () => {
+    setEditMockId(null);
+    setNewMockValue("");
+  };
+  const handleCloseNewMock = () => {
+    setNewMockValue(null);
+    setEditMockId(null);
+  };
   return (
     <div className="mocks" ref={ref}>
       <PageHeader
@@ -415,7 +485,12 @@ const MocksComponent = (): React.JSX.Element => {
         </Spin>
       </PageHeader>
       {newMockValue !== null && (
-        <NewMock defaultValue={newMockValue} onClose={handleCloseNewMock} />
+        <NewMock
+          defaultValue={newMockValue}
+          editId={editMockId ?? undefined}
+          sessionId={sessionID}
+          onClose={handleCloseNewMock}
+        />
       )}
     </div>
   );

client/components/NewMock.tsx

@@ -1,6 +1,6 @@
 import { Alert, Button, Drawer, Form, Tabs } from "antd";
 import * as React from "react";
-import { useAddMocks } from "../modules/api";
+import { useAddMocks, useUpdateMock } from "../modules/api";
 import {
   parseYamlForVisualEditor,
   validateMocksForSave,
@@ -10,18 +10,26 @@ import type { MockEditorForm } from "./MockEditor/convert";
 import MockEditor from "./MockEditor/MockEditor";
 import "./NewMock.scss";
 
-// Mock creation drawer, self-contained (owns the editor value and the add-mocks mutation) so it
-// can be dropped onto any page. The YAML string is the single source of truth: the Visual Editor
+// Mock creation/edition drawer, self-contained (owns the editor value and the mutation) so it can
+// be dropped onto any page. The YAML string is the single source of truth: the Visual Editor
 // writes to it continuously, and switching back to it re-hydrates from that YAML — but only if the
 // YAML is a single mock valid against the schema (otherwise the switch is blocked with an error).
+// When editId is set the drawer edits an existing mock (PUT) instead of creating one (POST).
 export const NewMock = ({
   defaultValue = "",
+  editId,
+  sessionId,
   onClose,
 }: {
   defaultValue?: string;
+  editId?: string;
+  sessionId?: string;
   onClose: () => void;
 }): React.JSX.Element => {
   const addMocksMut = useAddMocks();
+  const updateMockMut = useUpdateMock();
+  const isEdit = editId !== undefined;
+  const saving = addMocksMut.isPending || updateMockMut.isPending;
   const [mock, setMock] = React.useState(defaultValue);
   const [view, setView] = React.useState<"visual" | "raw">(
     defaultValue.trim() === "" ? "visual" : "raw",
@@ -42,13 +50,18 @@ export const NewMock = ({
       return;
     }
     // Keep the drawer open on failure (e.g. a server-side error) so the mock isn't lost.
-    addMocksMut.mutate(mock, {
+    const opts = {
       onSuccess: () => onClose(),
-      onError: (e) => {
+      onError: (e: unknown) => {
         setError(`Can't save — ${(e as Error).message}`);
         setView("raw");
       },
-    });
+    };
+    if (isEdit) {
+      updateMockMut.mutate({ sessionID: sessionId, id: editId, mock }, opts);
+    } else {
+      addMocksMut.mutate(mock, opts);
+    }
   };
 
   const onChangeView = (key: string) => {
@@ -79,7 +92,7 @@ export const NewMock = ({
 
   return (
     <Drawer
-      title="Add new mocks"
+      title={isEdit ? "Edit mock" : "Add new mocks"}
       placement="right"
       className="drawer"
       closable={false}
@@ -89,11 +102,7 @@ export const NewMock = ({
       footer={
         <div className="action buttons">
           <Button onClick={onClose}>Cancel</Button>
-          <Button
-            onClick={handleSubmit}
-            type="primary"
-            loading={addMocksMut.isPending}
-          >
+          <Button onClick={handleSubmit} type="primary" loading={saving}>
             Save
           </Button>
         </div>

client/modules/api.ts

@@ -151,6 +151,27 @@ export const postUnlockMocks = async (ids: string[]): Promise<Mocks> => {
   return MocksSchema.parse(data);
 };
 
+export const putUpdateMock = async (args: {
+  sessionID?: string;
+  id: string;
+  mock: string;
+}): Promise<void> => {
+  await request(`/mocks/${args.id}${sessionQuery(args.sessionID)}`, {
+    method: "PUT",
+    body: args.mock,
+    contentType: ContentTypeYAML,
+  });
+};
+
+export const deleteMock = async (args: {
+  sessionID?: string;
+  id: string;
+}): Promise<void> => {
+  await request(`/mocks/${args.id}${sessionQuery(args.sessionID)}`, {
+    method: "DELETE",
+  });
+};
+
 export const postReset = async (): Promise<void> => {
   await request("/reset", { method: "POST" });
 };
@@ -255,6 +276,22 @@ export const useAddMocks = () => {
   });
 };
 
+export const useUpdateMock = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: putUpdateMock,
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["mocks"] }),
+  });
+};
+
+export const useDeleteMock = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: deleteMock,
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["mocks"] }),
+  });
+};
+
 export const useLockMocks = () => {
   const queryClient = useQueryClient();
   return useMutation({

server/admin_server.go

@@ -55,6 +55,8 @@ func Serve(config config.Config) {
 	mocksGroup.POST("", handler.AddMocks)
 	mocksGroup.POST("/lock", handler.LockMocks)
 	mocksGroup.POST("/unlock", handler.UnlockMocks)
+	mocksGroup.PUT("/:id", handler.UpdateMock)
+	mocksGroup.DELETE("/:id", handler.DeleteMock)
 
 	historyGroup := adminServerEngine.Group("/history")
 	historyGroup.GET("", handler.GetHistory)

server/handlers/admin.go

@@ -1,6 +1,7 @@
 package handlers
 
 import (
+	"errors"
 	"log/slog"
 	"net/http"
 	"strconv"
@@ -82,6 +83,60 @@ func (a *Admin) AddMocks(c echo.Context) error {
 	})
 }
 
+func (a *Admin) sessionIDFromQuery(c echo.Context) string {
+	sessionID := c.QueryParam("session")
+	if sessionID == "" {
+		sessionID = a.mocksServices.GetLastSession().ID
+	}
+	return sessionID
+}
+
+// mockMutationError maps a service edit/delete error to the right HTTP status.
+func mockMutationError(err error) error {
+	switch {
+	case errors.Is(err, types.MockEditForbidden):
+		return echo.NewHTTPError(http.StatusConflict, err.Error())
+	case errors.Is(err, types.MockNotFound), errors.Is(err, types.SessionNotFound):
+		return echo.NewHTTPError(http.StatusNotFound, err.Error())
+	default:
+		return echo.NewHTTPError(http.StatusBadRequest, err.Error())
+	}
+}
+
+func (a *Admin) UpdateMock(c echo.Context) error {
+	sessionID := a.sessionIDFromQuery(c)
+	id := c.Param("id")
+
+	var mocks types.Mocks
+	if err := bindAccordingAccept(c, &mocks); err != nil {
+		return err
+	}
+	if len(mocks) != 1 {
+		return echo.NewHTTPError(http.StatusBadRequest, "expected exactly one mock to update")
+	}
+	if err := mocks[0].Validate(); err != nil {
+		return echo.NewHTTPError(http.StatusBadRequest, err.Error())
+	}
+
+	updated, err := a.mocksServices.UpdateMock(sessionID, id, mocks[0])
+	if err != nil {
+		return mockMutationError(err)
+	}
+	return c.JSON(http.StatusOK, updated)
+}
+
+func (a *Admin) DeleteMock(c echo.Context) error {
+	sessionID := a.sessionIDFromQuery(c)
+	id := c.Param("id")
+
+	if err := a.mocksServices.DeleteMock(sessionID, id); err != nil {
+		return mockMutationError(err)
+	}
+	return c.JSON(http.StatusOK, echo.Map{
+		"message": "Mock deleted successfully",
+	})
+}
+
 func (a *Admin) LockMocks(c echo.Context) error {
 	var ids []string
 	if err := bindAccordingAccept(c, &ids); err != nil {