feat(client): schema-complete mock editor with a form/YAML toggle

Rework mock creation and make the visual editor cover the whole mock format:

- Extract the creation drawer to NewMock and mount it on both Mocks and History;
  History's 'Create a new mock from entry' now opens it in place (no navigation).
- Toggle between the visual form and raw YAML: the YAML is the source of truth,
  and switching to the form is gated on it being a single mock valid against the
  schema (ajv). Validate before saving and keep the drawer open on error so the
  mock is never lost. Drop the now-redundant read-only preview.
- Complete the form vs the schema: response/proxy delay (fixed or random), all 17
  matchers, every HTTP method plus method-as-matcher, path and body matchers for
  all methods, multi-value query/header keys, numeric/bool values coerced to
  strings. Reverse conversion (mock -> form) with round-trip tests.
- Keep pagination in the URL (?page/?page-size) so a page is shareable, with
  directional page scroll; the mock link preserves ?session and back returns to
  the list.
- Only sync the ?session param on /pages/* routes so it no longer clobbers the
  '*' -> /pages/history redirect (which left the root on a blank page).

Tests: vitest 64 (conversion, rendered component, YAML validation, utils) and the
Playwright TNR grows to 22. New deps (pinned, audit-clean): ajv (runtime), and
@testing-library/react + user-event (dev).

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

Author: gwleclerc

client/components/History.tsx

@@ -30,9 +30,12 @@ import {
   cleanupResponse,
   entryToCurl,
   formatQueryParams,
+  scrollToPage,
+  useQueryParams,
 } from "../modules/utils";
 import Code from "./Code";
 import "./History.scss";
+import NewMock from "./NewMock";
 import PageHeader from "./PageHeader";
 
 const TableRow = ([key, values]: [string, string[]]) => (
@@ -56,7 +59,14 @@ const newMockFromEntry = (entry: Entry): string => {
   return dump([{ request, response }]);
 };
 
-const EntryComponent = React.memo(({ value }: { value: Entry }) => {
+const EntryComponent = React.memo(
+  ({
+    value,
+    onCreateMock,
+  }: {
+    value: Entry;
+    onCreateMock: (mock: string) => void;
+  }) => {
   const path =
     value.request.path + formatQueryParams(value.request.query_params);
 
@@ -143,14 +153,16 @@ const EntryComponent = React.memo(({ value }: { value: Entry }) => {
           </span>
         </div>
         <Typography.Paragraph>
-          <Link to="/pages/mocks" state={{ newMock: newMockFromEntry(value) }}>
-            <Button block type="dashed">
-              <PlusCircleOutlined />
-              {value.response.status >= 600
-                ? "Create a new mock from request"
-                : "Create a new mock from entry"}
-            </Button>
-          </Link>
+          <Button
+            block
+            type="dashed"
+            onClick={() => onCreateMock(newMockFromEntry(value))}
+          >
+            <PlusCircleOutlined />
+            {value.response.status >= 600
+              ? "Create a new mock from request"
+              : "Create a new mock from entry"}
+          </Button>
         </Typography.Paragraph>
         {value.response.headers && (
           <table>
@@ -202,12 +214,23 @@ const HistoryComponent = (): React.JSX.Element => {
   );
   const [filter, setFilter] = useLocalStorage("history.filter", "all");
 
-  // Pagination
+  // Pagination — kept in the URL query (?page, ?page-size) so a given page is shareable.
   const minPageSize = 10;
-  const [page, setPage] = React.useState(1);
-  const [pageSize, setPageSize] = React.useState(minPageSize);
+  const [queryParams, setQueryParams] = useQueryParams();
+  const page = Math.max(1, Number(queryParams.get("page")) || 1);
+  const pageSize = Number(queryParams.get("page-size")) || minPageSize;
+  const setPage = (p: number) => setQueryParams({ page: String(p) });
+  const setPageAndSize = (p: number, ps: number) =>
+    setQueryParams({ page: String(p), "page-size": String(ps) });
   const [polling, setPolling] = React.useState(false);
 
+  // Mock creation drawer opened in place from an entry (no navigation to the Mocks page).
+  const [newMockValue, setNewMockValue] = React.useState<string | null>(null);
+  const handleCreateMock = React.useCallback(
+    (mock: string) => setNewMockValue(mock),
+    []
+  );
+
   const historyQuery = useHistory(sessionID, {
     refetchInterval: polling ? 10000 : false,
   });
@@ -217,14 +240,15 @@ const HistoryComponent = (): React.JSX.Element => {
 
   const togglePolling = () => setPolling((p) => !p);
 
-  const ref = React.createRef<HTMLDivElement>();
+  const ref = React.useRef<HTMLDivElement>(null);
+  const prevPageRef = React.useRef(page);
+  const prevPageSizeRef = React.useRef(pageSize);
   React.useLayoutEffect(() => {
-    if (ref.current) {
-      ref.current.scrollIntoView({
-        behavior: "smooth",
-        block: "start",
-      });
-    }
+    const sizeChanged = pageSize !== prevPageSizeRef.current;
+    const goingBack = !sizeChanged && page < prevPageRef.current;
+    prevPageRef.current = page;
+    prevPageSizeRef.current = pageSize;
+    return scrollToPage(ref.current, goingBack);
   }, [page, pageSize]);
 
   let body = null;
@@ -255,10 +279,7 @@ const HistoryComponent = (): React.JSX.Element => {
       }
     } else {
       const onChangePage = (p: number) => setPage(p);
-      const onChangePageSize = (p: number, ps: number) => {
-        setPage(p);
-        setPageSize(ps);
-      };
+      const onChangePageSize = (p: number, ps: number) => setPageAndSize(p, ps);
       const pagination = (
         <Row justify="space-between" align="middle" className="container">
           <div>
@@ -287,7 +308,11 @@ const HistoryComponent = (): React.JSX.Element => {
               Math.min(page * pageSize, filteredEntries.length)
             )
             .map((entry, index) => (
-              <EntryComponent key={`entry-${index}`} value={entry} />
+              <EntryComponent
+                key={`entry-${index}`}
+                value={entry}
+                onCreateMock={handleCreateMock}
+              />
             ))}
           {filteredEntries.length > minPageSize && pagination}
         </>
@@ -354,6 +379,8 @@ const HistoryComponent = (): React.JSX.Element => {
             defaultValue={filter}
             variant="borderless"
             className="ant-btn-link"
+            // Drop the dropdown caret so this renders as an inline link within the sentence.
+            suffixIcon={null}
             popupMatchSelectWidth={180}
             onChange={onFilter}
             options={filterOptions}
@@ -364,6 +391,12 @@ const HistoryComponent = (): React.JSX.Element => {
           {body}
         </Spin>
       </PageHeader>
+      {newMockValue !== null && (
+        <NewMock
+          defaultValue={newMockValue}
+          onClose={() => setNewMockValue(null)}
+        />
+      )}
     </div>
   );
 };

client/components/MockEditor/BodyMatcherEditor.tsx

@@ -39,7 +39,7 @@ export const BodyMatcherEditor = ({
                         ([key, value]) => {
                           // TODO: handle more matchers
                           actions.add({ key, matcher: "ShouldEqual", value });
-                        }
+                        },
                       );
                       setInitialized(true);
                     } catch (e) {

client/components/MockEditor/KeyValueEditor.tsx

@@ -10,7 +10,7 @@ import {
   Space,
 } from "antd";
 import { defaultMatcher } from "../../modules/types";
-import { positiveMatchers, negativeMatchers, unaryMatchers } from "./utils";
+import { matcherOptions, unaryMatchers } from "./utils";
 
 export interface KeyValueEditorProps {
   name: string[];
@@ -33,23 +33,6 @@ export const KeyValueEditor = ({
   </Form.List>
 );
 
-const matcherOptions = [
-  {
-    label: "Positive",
-    options: positiveMatchers.map((matcher) => ({
-      value: matcher,
-      label: matcher,
-    })),
-  },
-  {
-    label: "Negative",
-    options: negativeMatchers.map((matcher) => ({
-      value: matcher,
-      label: matcher,
-    })),
-  },
-];
-
 export interface KeyValueEditorEngineProps extends KeyValueEditorProps {
   fields: FormListFieldData[];
   actions: FormListOperation;
@@ -76,7 +59,7 @@ export const KeyValueEditorEngine = ({
 
         {withMatchers && (
           <Form.Item {...restField} name={[fieldName, "matcher"]}>
-            <Select options={matcherOptions} />
+            <Select style={{ width: 210 }} options={matcherOptions} />
           </Form.Item>
         )}
 
@@ -86,7 +69,7 @@ export const KeyValueEditorEngine = ({
               {...restField}
               name={[fieldName, "value"]}
               hidden={unaryMatchers.includes(
-                getFieldValue([...name, fieldName, "matcher"])
+                getFieldValue([...name, fieldName, "matcher"]),
               )}
             >
               <Input placeholder="Value" />

client/components/MockEditor/MockContextEditor.tsx

@@ -9,17 +9,20 @@ export const MockContextEditor = (): React.JSX.Element => (
 
     <Form.Item
       label="Limit this mock to be called"
-      shouldUpdate={(prevValues, currentValues) => prevValues?.context?.times_enabled !==
-        currentValues?.context?.times_enabled ||
-        prevValues?.context?.times !== currentValues?.context?.times}
+      shouldUpdate={(prevValues, currentValues) =>
+        prevValues?.context?.times_enabled !==
+          currentValues?.context?.times_enabled ||
+        prevValues?.context?.times !== currentValues?.context?.times
+      }
       style={{ marginBottom: 0, paddingLeft: "5px" }}
     >
       {({ getFieldValue }) => (
         <>
           <Form.Item name={["context", "times"]} noStyle>
             <InputNumber
               min={1}
-              disabled={!getFieldValue(["context", "times_enabled"])} />
+              disabled={!getFieldValue(["context", "times_enabled"])}
+            />
           </Form.Item>
           {getFieldValue(["context", "times"]) <= 1 ? (
             <span> time</span>

client/components/MockEditor/MockDelayEditor.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { Form, Input, Radio } from "antd";
+
+// Response/proxy delay: none, a fixed duration (e.g. "200ms"), or a random range between min and
+// max. `prefix` is the parent field path (["response"] or ["proxy"]).
+export const MockDelayEditor = ({
+  prefix,
+}: {
+  prefix: string[];
+}): React.JSX.Element => (
+  <div className="inline-form-items">
+    <span style={{ paddingRight: "0.5em" }}>Delay:</span>
+    <Form.Item name={[...prefix, "delay_mode"]} noStyle>
+      <Radio.Group
+        size="small"
+        optionType="button"
+        options={[
+          { label: "None", value: "none" },
+          { label: "Fixed", value: "fixed" },
+          { label: "Random", value: "random" },
+        ]}
+      />
+    </Form.Item>
+    <Form.Item
+      noStyle
+      shouldUpdate={(prev, cur) => {
+        const at = (v: Record<string, unknown>) =>
+          prefix.reduce<unknown>(
+            (acc, k) => (acc as Record<string, unknown>)?.[k],
+            v,
+          );
+        return (
+          (at(prev) as { delay_mode?: string })?.delay_mode !==
+          (at(cur) as { delay_mode?: string })?.delay_mode
+        );
+      }}
+    >
+      {({ getFieldValue }) => {
+        const mode = getFieldValue([...prefix, "delay_mode"]) ?? "none";
+        if (mode === "fixed") {
+          return (
+            <Form.Item name={[...prefix, "delay_value"]} noStyle>
+              <Input
+                size="small"
+                placeholder="e.g. 200ms, 1s"
+                style={{ width: 160, marginLeft: "0.5em" }}
+              />
+            </Form.Item>
+          );
+        }
+        if (mode === "random") {
+          return (
+            <span style={{ marginLeft: "0.5em" }}>
+              <Form.Item name={[...prefix, "delay_min"]} noStyle>
+                <Input
+                  size="small"
+                  placeholder="min, e.g. 100ms"
+                  style={{ width: 150 }}
+                />
+              </Form.Item>
+              <span style={{ padding: "0 0.5em" }}>→</span>
+              <Form.Item name={[...prefix, "delay_max"]} noStyle>
+                <Input
+                  size="small"
+                  placeholder="max, e.g. 1s"
+                  style={{ width: 150 }}
+                />
+              </Form.Item>
+            </span>
+          );
+        }
+        return null;
+      }}
+    </Form.Item>
+  </div>
+);

client/components/MockEditor/MockDynamicResponseEditor.tsx

@@ -7,6 +7,7 @@ export const MockDynamicResponseEditor = (): React.JSX.Element => (
     <Form.Item label="Engine" name={["dynamic_response", "engine"]}>
       <Select
         options={[
+          { value: "go_template", label: "Go Template" },
           { value: "go_template_yaml", label: "Go Template (YAML)" },
           { value: "go_template_json", label: "Go Template (JSON)" },
           { value: "lua", label: "Lua" },
@@ -16,8 +17,10 @@ export const MockDynamicResponseEditor = (): React.JSX.Element => (
 
     <Form.Item
       noStyle
-      shouldUpdate={(prevValues, currentValues) => prevValues?.dynamic_response?.engine !==
-        currentValues?.dynamic_response?.engine}
+      shouldUpdate={(prevValues, currentValues) =>
+        prevValues?.dynamic_response?.engine !==
+        currentValues?.dynamic_response?.engine
+      }
     >
       {({ getFieldValue }) => (
         <Form.Item label="Script" name={["dynamic_response", "script"]}>