(null);
+ useEffect(() => {
+ root.current?.querySelector('[role="tablist"]')?.setAttribute("aria-label", label);
+ }, [label]);
+
+ return (
+
+ ({
+ ...item,
+ render: (
+
+ ),
+ }))}
+ value={value}
+ activateOnFocus
+ onValueChange={(next) => {
+ const item = items.find((candidate) => candidate.value === next);
+ if (item) onChange(item.value);
+ }}
+ variant="segmented"
+ size="sm"
+ />
+
+ );
+}
diff --git a/playground/src/components/StatusBadge.test.tsx b/playground/src/components/StatusBadge.test.tsx
new file mode 100644
index 0000000000..1b28bbe3d0
--- /dev/null
+++ b/playground/src/components/StatusBadge.test.tsx
@@ -0,0 +1,16 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { StatusBadge } from "@/components/StatusBadge";
+
+describe("StatusBadge", () => {
+ it.each([
+ ["READY", "ready"],
+ ["SETUP_FAILED", "setup_failed"],
+ ["canceled", "canceled"],
+ [undefined, "unknown"],
+ ])("normalizes %s", (status, label) => {
+ render();
+ expect(screen.getByText(label)).toBeVisible();
+ });
+});
diff --git a/playground/src/components/StatusBadge.tsx b/playground/src/components/StatusBadge.tsx
new file mode 100644
index 0000000000..3b5e2b9a67
--- /dev/null
+++ b/playground/src/components/StatusBadge.tsx
@@ -0,0 +1,28 @@
+import { Badge, type BadgeVariant } from "@cloudflare/kumo/components/badge";
+
+/** Maps known Cog statuses to semantic colors and renders unknown values neutrally. */
+export function StatusBadge({ status }: { status?: string }) {
+ const normalized = status?.toLowerCase() || "unknown";
+ const variants: Record = {
+ ready: "success",
+ succeeded: "success",
+ busy: "warning",
+ starting: "warning",
+ processing: "warning",
+ defunct: "error",
+ failed: "error",
+ error: "error",
+ setup_failed: "error",
+ unhealthy: "error",
+ unreachable: "error",
+ canceled: "neutral",
+ unknown: "neutral",
+ };
+ return (
+
+ );
+}
diff --git a/playground/src/components/editor/JsonEditor.test.tsx b/playground/src/components/editor/JsonEditor.test.tsx
new file mode 100644
index 0000000000..e3963551eb
--- /dev/null
+++ b/playground/src/components/editor/JsonEditor.test.tsx
@@ -0,0 +1,157 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { JsonEditor } from "@/components/editor/JsonEditor";
+
+describe("JsonEditor", () => {
+ it("renders highlighted read-only JSON and follows controlled updates", async () => {
+ const { container, rerender } = render(
+ ,
+ );
+
+ const editor = screen.getByRole("textbox", { name: "Response JSON" });
+ expect(editor).toHaveAttribute("aria-readonly", "true");
+ expect(editor).toHaveAttribute("contenteditable", "false");
+ expect(container.querySelector(".cm-gutters")).toBeInTheDocument();
+ expect(container.querySelector(".cm-foldGutter")).toBeInTheDocument();
+ expect(container.querySelector(".cm-content span")).toBeInTheDocument();
+
+ rerender();
+ await waitFor(() => expect(editor).toHaveTextContent('"answer":43'));
+ });
+
+ it("follows the tail until the user scrolls away", async () => {
+ const { container, rerender } = render(
+ ,
+ );
+ const scroller = container.querySelector(".cm-scroller");
+ if (!scroller) throw new Error("CodeMirror scroller was not rendered");
+
+ let scrollHeight = 1_000;
+ Object.defineProperties(scroller, {
+ clientHeight: { configurable: true, value: 200 },
+ scrollHeight: { configurable: true, get: () => scrollHeight },
+ scrollTop: { configurable: true, value: 0, writable: true },
+ });
+
+ rerender();
+ await waitFor(() => expect(scroller.scrollTop).toBe(scrollHeight));
+ await nextAnimationFrame();
+
+ scroller.scrollTop = 300;
+ fireEvent.scroll(scroller);
+ scrollHeight = 1_200;
+ rerender();
+ await nextAnimationFrame();
+
+ expect(scroller.scrollTop).toBe(300);
+
+ scrollHeight = 1_300;
+ rerender(
+ ,
+ );
+ rerender(
+ ,
+ );
+ await nextAnimationFrame();
+
+ expect(scroller.scrollTop).toBe(300);
+
+ rerender(
+ ,
+ );
+ scrollHeight = 1_400;
+ rerender(
+ ,
+ );
+
+ await waitFor(() => expect(scroller.scrollTop).toBe(scrollHeight));
+ });
+
+ it("does not override a user scroll while a tail measurement is queued", async () => {
+ const { container, rerender } = render(
+ ,
+ );
+ const scroller = container.querySelector(".cm-scroller");
+ if (!scroller) throw new Error("CodeMirror scroller was not rendered");
+ Object.defineProperties(scroller, {
+ clientHeight: { configurable: true, value: 200 },
+ scrollHeight: { configurable: true, value: 1_000 },
+ scrollTop: { configurable: true, value: 0, writable: true },
+ });
+
+ rerender();
+ fireEvent.wheel(scroller, { deltaY: -100 });
+ scroller.scrollTop = 300;
+ fireEvent.scroll(scroller);
+ await nextAnimationFrame();
+
+ expect(scroller.scrollTop).toBe(300);
+ });
+
+ it("copies the complete document", async () => {
+ const writeText = vi.fn().mockResolvedValue(undefined);
+ Object.defineProperty(navigator, "clipboard", {
+ configurable: true,
+ value: { writeText },
+ });
+ render();
+
+ fireEvent.click(screen.getByRole("button", { name: "Copy Copy JSON" }));
+
+ await waitFor(() => expect(writeText).toHaveBeenCalledWith('{"answer":42}'));
+ });
+
+ it("removes disabled editors and copy controls from keyboard navigation", () => {
+ render(
+ ,
+ );
+
+ const editor = screen.getByRole("textbox", { name: "Disabled JSON" });
+ expect(editor).toHaveAttribute("tabindex", "-1");
+ expect(editor).toHaveAttribute("aria-disabled", "true");
+ expect(editor).toHaveAttribute("aria-invalid", "true");
+ expect(editor).toHaveAttribute("aria-describedby", "disabled-help");
+ expect(screen.getByRole("button", { name: "Copy Disabled JSON" })).toBeDisabled();
+ });
+
+ it("leaves Tab available for keyboard navigation", () => {
+ render();
+ const editor = screen.getByRole("textbox", { name: "Input JSON" });
+ editor.focus();
+
+ expect(fireEvent.keyDown(editor, { key: "Tab", code: "Tab" })).toBe(true);
+ });
+
+ it("does not add controlled updates to undo history", async () => {
+ const { rerender } = render();
+ const editor = screen.getByRole("textbox", { name: "Updated JSON" });
+
+ rerender();
+ await waitFor(() => expect(editor).toHaveTextContent('"answer":43'));
+ editor.focus();
+ fireEvent.keyDown(editor, { key: "z", code: "KeyZ", metaKey: true });
+
+ expect(editor).toHaveTextContent('"answer":43');
+ });
+});
+
+function nextAnimationFrame(): Promise {
+ return new Promise((resolve) => window.requestAnimationFrame(() => resolve()));
+}
diff --git a/playground/src/components/editor/JsonEditor.tsx b/playground/src/components/editor/JsonEditor.tsx
new file mode 100644
index 0000000000..3c778afa46
--- /dev/null
+++ b/playground/src/components/editor/JsonEditor.tsx
@@ -0,0 +1,217 @@
+import { Compartment, EditorState, Transaction } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { useEffect, useRef } from "react";
+
+import { editorBehavior, jsonEditorExtensions } from "@/components/editor/config";
+
+export type JsonEditorProps = {
+ value: string;
+ onChange?: (value: string) => void;
+ readOnly?: boolean;
+ disabled?: boolean;
+ invalid?: boolean;
+ describedBy?: string;
+ followTail?: boolean;
+ active?: boolean;
+ className?: string;
+ label: string;
+ autoHeight?: boolean;
+};
+
+/**
+ * Renders a controlled CodeMirror JSON editor with accessible read-only and disabled modes,
+ * copying, optional content-based sizing, and live-output tail following.
+ */
+export function JsonEditor({
+ value,
+ onChange,
+ readOnly = false,
+ disabled = false,
+ invalid = false,
+ describedBy,
+ followTail = false,
+ active = true,
+ className = "",
+ label,
+ autoHeight = false,
+}: JsonEditorProps) {
+ const hostRef = useRef(null);
+ const editorRef = useRef(undefined);
+ const initialValue = useRef(value);
+ const initialLabel = useRef(label);
+ const initialReadOnly = useRef(readOnly);
+ const initialDisabled = useRef(disabled);
+ const initialInvalid = useRef(invalid);
+ const initialDescribedBy = useRef(describedBy);
+ const onChangeRef = useRef(onChange);
+ const updatingValue = useRef(false);
+ const followRef = useRef(true);
+ const followEnabled = useRef(followTail);
+ const scrollingToTail = useRef(false);
+ const scrollRequest = useRef(0);
+ const activeRef = useRef(active);
+ const followTailRef = useRef(followTail);
+ const behavior = useRef(new Compartment());
+ onChangeRef.current = onChange;
+ activeRef.current = active;
+ followTailRef.current = followTail;
+
+ useEffect(() => {
+ if (!hostRef.current) return;
+ const editor = new EditorView({
+ parent: hostRef.current,
+ state: EditorState.create({
+ doc: initialValue.current,
+ extensions: [
+ ...jsonEditorExtensions(),
+ behavior.current.of(
+ editorBehavior(
+ initialReadOnly.current,
+ initialDisabled.current,
+ initialInvalid.current,
+ initialLabel.current,
+ initialDescribedBy.current,
+ ),
+ ),
+ EditorView.updateListener.of((update) => {
+ if (update.docChanged && !updatingValue.current) {
+ onChangeRef.current?.(update.state.doc.toString());
+ }
+ }),
+ ],
+ }),
+ });
+ editorRef.current = editor;
+ const updateFollow = () => {
+ if (scrollingToTail.current) return;
+ const { clientHeight, scrollHeight, scrollTop } = editor.scrollDOM;
+ followRef.current = scrollHeight - scrollTop - clientHeight < 48;
+ };
+ const stopFollowing = () => {
+ followRef.current = false;
+ scrollingToTail.current = false;
+ scrollRequest.current += 1;
+ };
+ const stopFollowingFromWheel = (event: WheelEvent) => {
+ if (event.deltaY < 0) stopFollowing();
+ };
+ const stopFollowingFromPointer = (event: PointerEvent) => {
+ if (event.target === editor.scrollDOM) stopFollowing();
+ };
+ const stopFollowingFromKey = (event: KeyboardEvent) => {
+ if (["ArrowUp", "Home", "PageUp"].includes(event.key)) stopFollowing();
+ };
+ editor.scrollDOM.addEventListener("scroll", updateFollow, { passive: true });
+ editor.scrollDOM.addEventListener("wheel", stopFollowingFromWheel, { passive: true });
+ editor.scrollDOM.addEventListener("touchstart", stopFollowing, { passive: true });
+ editor.scrollDOM.addEventListener("pointerdown", stopFollowingFromPointer, { passive: true });
+ editor.scrollDOM.addEventListener("keydown", stopFollowingFromKey);
+ return () => {
+ editor.scrollDOM.removeEventListener("scroll", updateFollow);
+ editor.scrollDOM.removeEventListener("wheel", stopFollowingFromWheel);
+ editor.scrollDOM.removeEventListener("touchstart", stopFollowing);
+ editor.scrollDOM.removeEventListener("pointerdown", stopFollowingFromPointer);
+ editor.scrollDOM.removeEventListener("keydown", stopFollowingFromKey);
+ editor.destroy();
+ editorRef.current = undefined;
+ };
+ }, []);
+
+ useEffect(() => {
+ editorRef.current?.dispatch({
+ effects: behavior.current.reconfigure(
+ editorBehavior(readOnly, disabled, invalid, label, describedBy),
+ ),
+ });
+ }, [describedBy, disabled, invalid, label, readOnly]);
+
+ useEffect(() => {
+ const editor = editorRef.current;
+ if (!editor) return;
+ const current = editor.state.doc.toString();
+ if (followTail && !followEnabled.current) followRef.current = true;
+ followEnabled.current = followTail;
+ const scroll = followTail && active && followRef.current;
+ if (current !== value) {
+ updatingValue.current = true;
+ editor.dispatch({
+ changes: changedRange(current, value),
+ annotations: Transaction.addToHistory.of(false),
+ selection: readOnly
+ ? undefined
+ : { anchor: Math.min(editor.state.selection.main.head, value.length) },
+ });
+ updatingValue.current = false;
+ }
+ if (!scroll) return;
+
+ const request = ++scrollRequest.current;
+ scrollingToTail.current = true;
+ editor.requestMeasure({
+ read(view) {
+ return view.scrollDOM.scrollHeight;
+ },
+ write(scrollHeight, view) {
+ if (
+ scrollRequest.current !== request ||
+ !activeRef.current ||
+ !followTailRef.current ||
+ !followRef.current
+ ) {
+ if (scrollRequest.current === request) scrollingToTail.current = false;
+ return;
+ }
+ view.scrollDOM.scrollTop = scrollHeight;
+ window.requestAnimationFrame(() => {
+ if (scrollRequest.current === request) scrollingToTail.current = false;
+ });
+ },
+ });
+ }, [active, followTail, readOnly, value]);
+
+ const copy = async () => {
+ try {
+ await navigator.clipboard.writeText(editorRef.current?.state.doc.toString() ?? value);
+ } catch {
+ const editor = editorRef.current;
+ if (!editor) return;
+ editor.dispatch({ selection: { anchor: 0, head: editor.state.doc.length } });
+ editor.focus();
+ }
+ };
+
+ return (
+
+
+
+