@stigmer/react 0.2.2 → 0.3.0

package/src/models/ModelSelector.tsx

@@ -1,16 +1,13 @@
 "use client";
 
-import { Select } from "@base-ui/react/select";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Popover } from "@base-ui/react/popover";
+import { cn } from "@stigmer/theme";
 import { useModelRegistry } from "./useModelRegistry";
-import type { Provider } from "./registry";
+import { modelKey, parseModelKey, type ModelInfo, type CostTier } from "./registry";
+import { HARNESS_LABELS, type HarnessOption } from "./harness";
 
-const PROVIDER_LABELS: Record<Provider, string> = {
-  anthropic: "Anthropic",
-  openai: "OpenAI",
-  ollama: "Ollama",
-};
-
-const COST_TIER_INDICATOR: Record<string, string> = {
+const COST_TIER_LABEL: Record<CostTier, string> = {
   economy: "$",
   standard: "$$",
   premium: "$$$",
@@ -18,10 +15,20 @@ const COST_TIER_INDICATOR: Record<string, string> = {
 
 /** Props for {@link ModelSelector}. */
 export interface ModelSelectorProps {
-  /** Currently selected model ID. Falls back to {@link DEFAULT_MODEL_ID} when omitted. */
+  /** Currently selected compound key (`"native/claude-sonnet-4.6"`) or plain `modelId`. */
   readonly value?: string;
-  /** Called when the user picks a different model. Receives the new `modelId`. */
+  /** Called when the user picks a different model. Receives the `modelId`. */
   readonly onValueChange: (modelId: string) => void;
+  /**
+   * When provided, restricts the catalog to a single harness (backward compat).
+   * When omitted, shows the unified picker with models from both engines.
+   */
+  readonly harness?: HarnessOption;
+  /**
+   * Fires when the selected model belongs to a different harness than
+   * the previous selection. Only relevant in unified mode (no `harness` prop).
+   */
+  readonly onHarnessResolved?: (harness: HarnessOption) => void;
   /** Additional CSS class names for the trigger button. */
   readonly className?: string;
   /** When true, disables the selector. */
@@ -29,107 +36,286 @@ export interface ModelSelectorProps {
 }
 
 /**
- * Theme-able model picker built on `@base-ui/react` Select for
- * accessible keyboard navigation and ARIA.
+ * Cursor-style model picker: a flat searchable list inside a popover.
  *
- * Consumes {@link useModelRegistry} internally. Groups models by
- * provider and shows a subtle cost-tier indicator.
+ * Shows a curated list of featured models by default. The user can
+ * expand via "Show All Models" or type to search the full catalog.
  *
- * All visual properties flow through `--stgm-*` tokens — no
- * hardcoded colors or sizes.
+ * Each model row shows the display name, an engine tag
+ * ("Stigmer" / "Cursor"), and a cost-tier indicator.
  *
- * Platform builders who need different rendering use
- * `useModelRegistry()` directly.
+ * In unified mode (no `harness` prop), selecting a model implicitly
+ * resolves the harness via {@link ModelSelectorProps.onHarnessResolved}.
  *
  * @example
  * ```tsx
- * function ComposerHeader() {
- *   const [modelId, setModelId] = useState<string>();
- *
- *   return <ModelSelector value={modelId} onValueChange={setModelId} />;
- * }
+ * <ModelSelector
+ *   value={selectedModelId}
+ *   onValueChange={setSelectedModelId}
+ *   onHarnessResolved={setHarness}
+ * />
  * ```
  */
 export function ModelSelector({
   value,
   onValueChange,
+  harness,
+  onHarnessResolved,
   className,
   disabled,
 }: ModelSelectorProps) {
-  const { byProvider, defaultModel, providers } = useModelRegistry();
+  const isUnified = harness === undefined;
+  const { models, featured, defaultModel, getModel, getByKey } = useModelRegistry(
+    isUnified ? undefined : { harness },
+  );
+
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showAll, setShowAll] = useState(false);
+  const [highlightIdx, setHighlightIdx] = useState(-1);
+
+  const searchRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const resolveSelected = useCallback((): ModelInfo | undefined => {
+    if (!value) return undefined;
+    if (isUnified) {
+      const byKey = getByKey(value);
+      if (byKey) return byKey;
+    }
+    return getModel(value);
+  }, [value, isUnified, getByKey, getModel]);
+
+  const selectedModel = resolveSelected() ?? defaultModel;
+
+  const isSearching = searchQuery.length > 0;
+  const lowerQuery = searchQuery.toLowerCase();
+
+  const visibleModels: readonly ModelInfo[] = useMemo(() => {
+    if (isSearching) {
+      return models.filter((m) =>
+        m.displayName.toLowerCase().includes(lowerQuery)
+        || m.modelId.toLowerCase().includes(lowerQuery)
+        || HARNESS_LABELS[m.harness].toLowerCase().includes(lowerQuery),
+      );
+    }
+    if (showAll) return models;
+    return featured.length > 0 ? featured : models;
+  }, [models, featured, isSearching, showAll, lowerQuery]);
+
+  useEffect(() => {
+    setHighlightIdx(-1);
+  }, [visibleModels]);
+
+  useEffect(() => {
+    if (!open) {
+      setSearchQuery("");
+      setShowAll(false);
+      setHighlightIdx(-1);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => searchRef.current?.focus());
+    }
+  }, [open]);
+
+  const selectModel = useCallback(
+    (model: ModelInfo) => {
+      const key = isUnified ? modelKey(model.harness, model.modelId) : model.modelId;
+      onValueChange(key);
+      if (isUnified && onHarnessResolved && model.harness !== selectedModel?.harness) {
+        onHarnessResolved(model.harness);
+      }
+      setOpen(false);
+    },
+    [isUnified, onValueChange, onHarnessResolved, selectedModel],
+  );
+
+  const scrollHighlightIntoView = useCallback((idx: number) => {
+    const container = listRef.current;
+    if (!container) return;
+    const items = container.querySelectorAll<HTMLElement>("[data-model-option]");
+    items[idx]?.scrollIntoView({ block: "nearest" });
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const len = visibleModels.length;
+      if (len === 0) return;
+
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          const next = highlightIdx < len - 1 ? highlightIdx + 1 : 0;
+          setHighlightIdx(next);
+          scrollHighlightIntoView(next);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          const prev = highlightIdx > 0 ? highlightIdx - 1 : len - 1;
+          setHighlightIdx(prev);
+          scrollHighlightIntoView(prev);
+          break;
+        }
+        case "Enter": {
+          e.preventDefault();
+          const target = highlightIdx >= 0 ? visibleModels[highlightIdx] : visibleModels[0];
+          if (target) selectModel(target);
+          break;
+        }
+        case "Escape":
+          e.preventDefault();
+          setOpen(false);
+          break;
+      }
+    },
+    [visibleModels, highlightIdx, selectModel, scrollHighlightIntoView],
+  );
+
+  const showShowAllButton = !isSearching && !showAll && featured.length > 0 && featured.length < models.length;
+
+  const triggerLabel = selectedModel.displayName;
+  const triggerHarness = isUnified ? HARNESS_LABELS[selectedModel.harness] : undefined;
+  const triggerCost = COST_TIER_LABEL[selectedModel.costTier];
 
   return (
-    <Select.Root
-      value={value ?? defaultModel.modelId}
-      onValueChange={(v) => { if (v !== null) onValueChange(v); }}
-      disabled={disabled}
-    >
-      <Select.Trigger
-        className={[
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger
+        disabled={disabled}
+        className={cn(
           "inline-flex items-center gap-1.5 rounded-md border border-border",
           "bg-background px-2.5 py-1.5 text-xs text-foreground",
           "hover:bg-accent-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
           "disabled:pointer-events-none disabled:opacity-50",
-          "transition-colors max-w-[14rem] max-sm:max-w-[8rem]",
+          "transition-colors max-w-[18rem] max-sm:max-w-[10rem]",
           className,
-        ]
-          .filter(Boolean)
-          .join(" ")}
+        )}
       >
-        <Select.Value placeholder="Select model" className="truncate" />
-        <Select.Icon className="text-muted-foreground">
-          <ChevronIcon />
-        </Select.Icon>
-      </Select.Trigger>
-
-      <Select.Portal>
-        <Select.Positioner sideOffset={4}>
-          <Select.Popup
-            className={[
-              "z-popover max-h-72 min-w-[var(--anchor-width)] overflow-auto",
-              "rounded-lg border border-border bg-popover p-1 shadow-md",
+        <span className="truncate">{triggerLabel}</span>
+        {triggerHarness && (
+          <span className="shrink-0 rounded bg-muted px-1 py-0.5 text-[0.6rem] font-medium text-muted-foreground">
+            {triggerHarness}
+          </span>
+        )}
+        <span className="shrink-0 text-[0.6rem] text-muted-foreground">{triggerCost}</span>
+        <ChevronIcon />
+      </Popover.Trigger>
+
+      <Popover.Portal>
+        <Popover.Positioner sideOffset={4}>
+          <Popover.Popup
+            role="dialog"
+            aria-label="Model selector"
+            className={cn(
+              "z-popover w-72 rounded-lg border border-border bg-popover shadow-md",
               "text-popover-foreground",
-            ].join(" ")}
+            )}
           >
-            {providers.map((provider) => {
-              const models = byProvider.get(provider);
-              if (!models?.length) return null;
-
-              return (
-                <Select.Group key={provider}>
-                  <Select.GroupLabel className="px-2 py-1.5 text-[0.65rem] font-medium uppercase tracking-wider text-muted-foreground">
-                    {PROVIDER_LABELS[provider]}
-                  </Select.GroupLabel>
-                  {models.map((model) => (
-                    <Select.Item
-                      key={model.modelId}
-                      value={model.modelId}
-                      className={[
-                        "flex cursor-pointer items-center justify-between gap-2",
-                        "rounded-md px-2 py-1.5 text-xs outline-none",
-                        "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
-                        "data-[selected]:font-medium",
-                      ].join(" ")}
-                    >
-                      <Select.ItemText>{model.displayName}</Select.ItemText>
-                      <span className="text-[0.6rem] text-muted-foreground">
-                        {COST_TIER_INDICATOR[model.costTier]}
+            {/* Search input */}
+            <div className="border-b border-border px-2 py-1.5">
+              <input
+                ref={searchRef}
+                role="searchbox"
+                aria-label="Search models"
+                placeholder="Search models…"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onKeyDown={handleKeyDown}
+                className={cn(
+                  "w-full bg-transparent text-xs text-foreground placeholder:text-muted-foreground",
+                  "outline-none",
+                )}
+              />
+            </div>
+
+            {/* Model list */}
+            <div
+              ref={listRef}
+              role="listbox"
+              aria-label="Available models"
+              className="max-h-64 overflow-y-auto p-1"
+            >
+              {visibleModels.length === 0 && (
+                <div className="px-2 py-3 text-center text-xs text-muted-foreground">
+                  No models found
+                </div>
+              )}
+              {visibleModels.map((model, idx) => {
+                const key = modelKey(model.harness, model.modelId);
+                const isSelected = selectedModel
+                  ? model.harness === selectedModel.harness && model.modelId === selectedModel.modelId
+                  : false;
+                const isHighlighted = idx === highlightIdx;
+
+                return (
+                  <button
+                    key={key}
+                    data-model-option=""
+                    role="option"
+                    aria-selected={isSelected}
+                    type="button"
+                    className={cn(
+                      "flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-xs outline-none",
+                      "transition-colors",
+                      isHighlighted && "bg-accent text-accent-foreground",
+                      !isHighlighted && "hover:bg-accent-hover",
+                      isSelected && "font-medium",
+                    )}
+                    onClick={() => selectModel(model)}
+                    onMouseEnter={() => setHighlightIdx(idx)}
+                  >
+                    {/* Model name */}
+                    <span className="flex-1 truncate text-left">{model.displayName}</span>
+
+                    {/* Engine tag (unified mode only) */}
+                    {isUnified && (
+                      <span className="shrink-0 rounded bg-muted px-1 py-0.5 text-[0.55rem] font-medium text-muted-foreground">
+                        {HARNESS_LABELS[model.harness]}
                       </span>
-                    </Select.Item>
-                  ))}
-                </Select.Group>
-              );
-            })}
-          </Select.Popup>
-        </Select.Positioner>
-      </Select.Portal>
-    </Select.Root>
+                    )}
+
+                    {/* Cost tier */}
+                    <span className="shrink-0 text-[0.6rem] text-muted-foreground">
+                      {COST_TIER_LABEL[model.costTier]}
+                    </span>
+
+                    {/* Selected checkmark */}
+                    {isSelected && (
+                      <CheckIcon className="shrink-0 text-primary" />
+                    )}
+                  </button>
+                );
+              })}
+
+              {/* Show All Models */}
+              {showShowAllButton && (
+                <button
+                  type="button"
+                  className={cn(
+                    "mt-1 flex w-full items-center justify-center rounded-md border border-dashed border-border",
+                    "px-2 py-1.5 text-xs text-muted-foreground",
+                    "hover:bg-accent-hover hover:text-foreground transition-colors cursor-pointer",
+                  )}
+                  onClick={() => setShowAll(true)}
+                >
+                  Show All Models
+                </button>
+              )}
+            </div>
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
   );
 }
 
 function ChevronIcon() {
   return (
     <svg
+      className="shrink-0 text-muted-foreground"
       width="10"
       height="10"
       viewBox="0 0 10 10"
@@ -143,3 +329,21 @@ function ChevronIcon() {
     </svg>
   );
 }
+
+function CheckIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M2 6L5 9L10 3" />
+    </svg>
+  );
+}

package/src/models/__tests__/HarnessSelector.test.tsx

@@ -0,0 +1,190 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { HarnessSelector } from "../HarnessSelector";
+
+function renderSelector(
+  overrides: Partial<Parameters<typeof HarnessSelector>[0]> = {},
+) {
+  const onValueChange = overrides.onValueChange ?? vi.fn();
+  const result = render(
+    <HarnessSelector
+      value={overrides.value ?? "native"}
+      onValueChange={onValueChange}
+      disabled={overrides.disabled}
+      className={overrides.className}
+    />,
+  );
+  return { ...result, onValueChange };
+}
+
+afterEach(cleanup);
+
+describe("HarnessSelector", () => {
+  describe("ARIA structure", () => {
+    it("renders a radiogroup with correct aria-label", () => {
+      renderSelector();
+      const group = screen.getByRole("radiogroup", { name: "Execution engine" });
+      expect(group).toBeDefined();
+    });
+
+    it("renders exactly two radio buttons", () => {
+      renderSelector();
+      const radios = screen.getAllByRole("radio");
+      expect(radios).toHaveLength(2);
+    });
+
+    it("labels radio buttons with user-facing harness names", () => {
+      renderSelector();
+      expect(screen.getByRole("radio", { name: "Stigmer" })).toBeDefined();
+      expect(screen.getByRole("radio", { name: "Cursor" })).toBeDefined();
+    });
+  });
+
+  describe("checked state", () => {
+    it("marks native as checked when value is native", () => {
+      renderSelector({ value: "native" });
+      const native = screen.getByRole("radio", { name: "Stigmer" });
+      const cursor = screen.getByRole("radio", { name: "Cursor" });
+      expect(native.getAttribute("aria-checked")).toBe("true");
+      expect(cursor.getAttribute("aria-checked")).toBe("false");
+    });
+
+    it("marks cursor as checked when value is cursor", () => {
+      renderSelector({ value: "cursor" });
+      const native = screen.getByRole("radio", { name: "Stigmer" });
+      const cursor = screen.getByRole("radio", { name: "Cursor" });
+      expect(native.getAttribute("aria-checked")).toBe("false");
+      expect(cursor.getAttribute("aria-checked")).toBe("true");
+    });
+  });
+
+  describe("roving tabIndex", () => {
+    it("sets tabIndex 0 on the active option and -1 on inactive", () => {
+      renderSelector({ value: "native" });
+      const native = screen.getByRole("radio", { name: "Stigmer" });
+      const cursor = screen.getByRole("radio", { name: "Cursor" });
+      expect(native.tabIndex).toBe(0);
+      expect(cursor.tabIndex).toBe(-1);
+    });
+
+    it("reverses tabIndex when cursor is active", () => {
+      renderSelector({ value: "cursor" });
+      const native = screen.getByRole("radio", { name: "Stigmer" });
+      const cursor = screen.getByRole("radio", { name: "Cursor" });
+      expect(native.tabIndex).toBe(-1);
+      expect(cursor.tabIndex).toBe(0);
+    });
+  });
+
+  describe("click interaction", () => {
+    it("fires onValueChange when clicking an inactive option", () => {
+      const { onValueChange } = renderSelector({ value: "native" });
+      fireEvent.click(screen.getByRole("radio", { name: "Cursor" }));
+      expect(onValueChange).toHaveBeenCalledWith("cursor");
+    });
+
+    it("does not fire onValueChange when clicking the active option", () => {
+      const { onValueChange } = renderSelector({ value: "native" });
+      fireEvent.click(screen.getByRole("radio", { name: "Stigmer" }));
+      expect(onValueChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("keyboard navigation", () => {
+    it("ArrowRight from native selects cursor", () => {
+      const { onValueChange } = renderSelector({ value: "native" });
+      const group = screen.getByRole("radiogroup");
+      fireEvent.keyDown(group, { key: "ArrowRight" });
+      expect(onValueChange).toHaveBeenCalledWith("cursor");
+    });
+
+    it("ArrowLeft from native wraps to cursor", () => {
+      const { onValueChange } = renderSelector({ value: "native" });
+      const group = screen.getByRole("radiogroup");
+      fireEvent.keyDown(group, { key: "ArrowLeft" });
+      expect(onValueChange).toHaveBeenCalledWith("cursor");
+    });
+
+    it("ArrowRight from cursor wraps to native", () => {
+      const { onValueChange } = renderSelector({ value: "cursor" });
+      const group = screen.getByRole("radiogroup");
+      fireEvent.keyDown(group, { key: "ArrowRight" });
+      expect(onValueChange).toHaveBeenCalledWith("native");
+    });
+
+    it("ArrowDown behaves the same as ArrowRight", () => {
+      const { onValueChange } = renderSelector({ value: "native" });
+      const group = screen.getByRole("radiogroup");
+      fireEvent.keyDown(group, { key: "ArrowDown" });
+      expect(onValueChange).toHaveBeenCalledWith("cursor");
+    });
+
+    it("ArrowUp behaves the same as ArrowLeft", () => {
+      const { onValueChange } = renderSelector({ value: "cursor" });
+      const group = screen.getByRole("radiogroup");
+      fireEvent.keyDown(group, { key: "ArrowUp" });
+      expect(onValueChange).toHaveBeenCalledWith("native");
+    });
+
+    it("ignores non-arrow keys", () => {
+      const { onValueChange } = renderSelector({ value: "native" });
+      const group = screen.getByRole("radiogroup");
+      fireEvent.keyDown(group, { key: "Enter" });
+      fireEvent.keyDown(group, { key: " " });
+      fireEvent.keyDown(group, { key: "Tab" });
+      expect(onValueChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("disabled state", () => {
+    it("does not fire onValueChange on click when disabled", () => {
+      const { onValueChange } = renderSelector({
+        value: "native",
+        disabled: true,
+      });
+      fireEvent.click(screen.getByRole("radio", { name: "Cursor" }));
+      expect(onValueChange).not.toHaveBeenCalled();
+    });
+
+    it("does not fire onValueChange on keyboard when disabled", () => {
+      const { onValueChange } = renderSelector({
+        value: "native",
+        disabled: true,
+      });
+      const group = screen.getByRole("radiogroup");
+      fireEvent.keyDown(group, { key: "ArrowRight" });
+      expect(onValueChange).not.toHaveBeenCalled();
+    });
+
+    it("marks both radio buttons as disabled", () => {
+      renderSelector({ disabled: true });
+      const radios = screen.getAllByRole("radio");
+      for (const radio of radios) {
+        expect((radio as HTMLButtonElement).disabled).toBe(true);
+      }
+    });
+  });
+
+  describe("premium indicator", () => {
+    it("shows premium indicator on the cursor option", () => {
+      renderSelector({ value: "native" });
+      const premiumBadge = screen.getByLabelText("premium");
+      expect(premiumBadge).toBeDefined();
+      expect(premiumBadge.textContent).toBe("$$$");
+    });
+
+    it("does not show premium indicator on the native option", () => {
+      renderSelector({ value: "native" });
+      const premiumBadges = screen.getAllByLabelText("premium");
+      expect(premiumBadges).toHaveLength(1);
+    });
+  });
+
+  describe("className passthrough", () => {
+    it("appends custom className to the root container", () => {
+      renderSelector({ className: "my-custom-class" });
+      const group = screen.getByRole("radiogroup");
+      expect(group.className).toContain("my-custom-class");
+    });
+  });
+});

package/src/models/__tests__/harness.test.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect } from "vitest";
+import { Harness } from "@stigmer/protos/ai/stigmer/agentic/session/v1/enum_pb";
+import {
+  toProtoHarness,
+  fromProtoHarness,
+  DEFAULT_HARNESS,
+  HARNESS_LABELS,
+  type HarnessOption,
+} from "../harness";
+
+describe("harness constants", () => {
+  it("defaults to native harness", () => {
+    expect(DEFAULT_HARNESS).toBe("native");
+  });
+
+  it("provides user-facing labels for both options", () => {
+    expect(HARNESS_LABELS.native).toBe("Stigmer");
+    expect(HARNESS_LABELS.cursor).toBe("Cursor");
+  });
+
+  it("covers every HarnessOption in HARNESS_LABELS", () => {
+    const options: HarnessOption[] = ["native", "cursor"];
+    for (const opt of options) {
+      expect(HARNESS_LABELS[opt]).toBeDefined();
+      expect(typeof HARNESS_LABELS[opt]).toBe("string");
+    }
+  });
+});
+
+describe("toProtoHarness", () => {
+  it("maps native to Harness.NATIVE", () => {
+    expect(toProtoHarness("native")).toBe(Harness.NATIVE);
+  });
+
+  it("maps cursor to Harness.CURSOR", () => {
+    expect(toProtoHarness("cursor")).toBe(Harness.CURSOR);
+  });
+});
+
+describe("fromProtoHarness", () => {
+  it("maps Harness.NATIVE to native", () => {
+    expect(fromProtoHarness(Harness.NATIVE)).toBe("native");
+  });
+
+  it("maps Harness.CURSOR to cursor", () => {
+    expect(fromProtoHarness(Harness.CURSOR)).toBe("cursor");
+  });
+
+  it("maps Harness.UNSPECIFIED to native (safe default)", () => {
+    expect(fromProtoHarness(Harness.UNSPECIFIED)).toBe("native");
+  });
+
+  it("maps unknown numeric values to native (safe default)", () => {
+    expect(fromProtoHarness(999 as Harness)).toBe("native");
+  });
+});
+
+describe("round-trip conversion", () => {
+  it("native survives toProto -> fromProto", () => {
+    expect(fromProtoHarness(toProtoHarness("native"))).toBe("native");
+  });
+
+  it("cursor survives toProto -> fromProto", () => {
+    expect(fromProtoHarness(toProtoHarness("cursor"))).toBe("cursor");
+  });
+});