@readymadeit/mcp 0.0.0-stage → 0.1.0

package/bundle/hkp-frontend/src/runtime/browser/services/tests/__snapshots__/service-ui.future-enhancements.test.tsx.snap

@@ -0,0 +1,5 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Service UI Future Enhancements > Visual Regression > matches snapshot for AggregatorUI initial render 1`] = `"<div id="__dynamic_id__"><div class="flex items-center"><div class="hkp-service-card" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: border 800ms; border: 1px solid lightgray; border-radius: 0; text-align: center; background-color: white; margin: var(--hkp-svc-card-margin-y, 10px) 0px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); overflow: hidden;"><div class="bg-white" style="cursor: move;" draggable="true"><div data-service-header="true" class="flex items-end"><button class="inline-flex items-center justify-center whitespace-nowrap rounded-none text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent p-4 h-min w-min" type="button" id="__dynamic_id__" aria-haspopup="menu" aria-expanded="false" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu" aria-hidden="true"><path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path></svg></button><div class="w-full flex mb-4 font-sans"><button class="inline-flex items-center justify-center font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent cursor-text p-0 h-min rounded-none whitespace-nowrap text-base font-sans tracking-widest">Test Service</button></div><button class="inline-flex items-center justify-center whitespace-nowrap rounded-none font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:text-accent-foreground px-4 py-2 text-base tracking-widest h-[50px] w-[50px] border-none hover:bg-sky"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-power mt-0 mb-1 mr-0 w-min h-min hover:stroke-sky-400 stroke-gray-400" aria-hidden="true" name="power off"><path d="M12 2v10"></path><path d="M18.4 6.6a9 9 0 1 1-12.77.04"></path></svg></button></div></div><div style="position: relative;"><div class="h-full w-full overflow-y-auto"><div class="flex flex-col font-sans px-4 h-full w-full pb-2"><div style="height: var(--hkp-svc-body-pad-top, 8px);"></div><div class="flex flex-col gap-2"><div class="flex items-center h-full w-full gap-2"><h4 class="text-left tracking-[6px]  pt-0 whitespace-nowrap undefined">Property</h4><input class="flex w-full border border-input bg-background ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 m-0 p-0 border-x-0 border-t-0 border-b-1 rounded-none h-min pl-1 text-base undefined text-ellipsis" spellcheck="false" value="temperature"></div><div class="pt-4"><div class="flex-col undefined "><h3 class="text-left tracking-[6px]  text-gray-300 undefined">Mode</h3><div role="radiogroup" aria-required="false" data-disabled="" dir="ltr" class="gap-2 py-2 flex" tabindex="-1" style="outline: none;"><div class="flex items-center space-x-2"><button type="button" role="radio" aria-checked="true" data-state="checked" data-disabled="" disabled="" value="max value count" class="aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" id="__dynamic_id__" tabindex="-1" data-radix-collection-item=""><span data-state="checked" data-disabled="" class="flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle h-2.5 w-2.5 fill-current text-current" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle></svg></span></button><label class="font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-base capitalize tracking-widest" for="__dynamic_id__" aria-disabled="true">max value count</label></div></div></div></div><div class="flex items-end gap-2 undefined"><h4 class="text-left tracking-[6px]  hkp-svc-field-label">Interval</h4><input class="flex rounded-md border-input bg-background ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 w-[60px] border-0 border-none p-0 h-min text-lg" type="number" value="100"><div class="pl-2 tracking-[1px] text-xs">ms</div></div></div></div><div style="position: absolute; bottom: 0px; right: 0px; width: 12px; height: 12px; cursor: nwse-resize;"><svg viewBox="0 0 10 10"><polygon points="0,10, 10,0, 10,10" style="fill: #9f9f9f; stroke: transparent; stroke-width: 1;"></polygon></svg></div></div></div></div><span data-state="closed"><button type="button" aria-label="Inspect input and output" style="margin-top: 18px; margin-left: 4px; position: relative; z-index: 21;" aria-haspopup="dialog" aria-expanded="false" aria-controls="__dynamic_id__" data-state="closed"><svg width="30" height="12" viewBox="0 0 30 12" fill="none" stroke="currentColor" stroke-width="0.5" stroke-linecap="round" style="opacity: 0.35; position: relative; top: -1px; transition: stroke 400ms, opacity 400ms, stroke-width 400ms;"><path d="M1 4 C7 1 11 7 18 4 C25 1 29 7 36 4 C43 1 47 7 54 4 C61 1 65 7 73 4"></path><path d="M1 8 C7 5 11 11 18 8 C25 5 29 11 36 8 C43 5 47 11 54 8 C61 5 65 11 73 8"></path></svg></button></span></div></div>"`;
+
+exports[`Service UI Future Enhancements > Visual Regression > matches snapshot for InputUI initial render 1`] = `"<div id="__dynamic_id__"><div class="flex items-center"><div class="hkp-service-card" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: border 800ms; border: 1px solid lightgray; border-radius: 0; text-align: center; background-color: white; margin: var(--hkp-svc-card-margin-y, 10px) 0px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); overflow: hidden;"><div class="bg-white" style="cursor: move;" draggable="true"><div data-service-header="true" class="flex items-end"><button class="inline-flex items-center justify-center whitespace-nowrap rounded-none text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent p-4 h-min w-min" type="button" id="__dynamic_id__" aria-haspopup="menu" aria-expanded="false" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu" aria-hidden="true"><path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path></svg></button><div class="w-full flex mb-4 font-sans"><button class="inline-flex items-center justify-center font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent cursor-text p-0 h-min rounded-none whitespace-nowrap text-base font-sans tracking-widest">Test Service</button></div><button class="inline-flex items-center justify-center whitespace-nowrap rounded-none font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:text-accent-foreground px-4 py-2 text-base tracking-widest h-[50px] w-[50px] border-none hover:bg-sky"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-power mt-0 mb-1 mr-0 w-min h-min hover:stroke-sky-400 stroke-gray-400" aria-hidden="true" name="power off"><path d="M12 2v10"></path><path d="M18.4 6.6a9 9 0 1 1-12.77.04"></path></svg></button></div></div><div style="position: relative;"><div class="h-full w-full overflow-y-auto" style="width: 480px;"><div class="flex flex-col font-sans px-4 h-full w-full pb-4"><div style="height: var(--hkp-svc-body-pad-top, 8px);"></div><div class="flex flex-col gap-2"><div><h4 class="text-left tracking-[6px]  hkp-svc-field-label pb-1">Input Mode</h4><div role="radiogroup" aria-label="Input Mode" style="display: flex; gap: 5px;"><button type="button" role="radio" aria-checked="true" tabindex="0" class="hkp-rpill sel capitalize">eventsource</button><button type="button" role="radio" aria-checked="false" tabindex="-1" class="hkp-rpill capitalize">websocket</button></div></div><div class="flex relative w-full items-center pr-2 "><div class="flex items-center h-full w-full gap-2"><h4 class="text-left tracking-[6px]  pt-0 whitespace-nowrap hkp-svc-field-label">URL</h4><input class="flex w-full border border-input ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 m-0 p-0 border-x-0 border-t-0 border-b-1 rounded-none h-min pl-1 font-menu text-[0.87rem] mr-2 bg-transparent undefined text-ellipsis" spellcheck="false" value="https://example.com/stream"></div></div></div></div><div style="position: absolute; bottom: 0px; right: 0px; width: 12px; height: 12px; cursor: nwse-resize;"><svg viewBox="0 0 10 10"><polygon points="0,10, 10,0, 10,10" style="fill: #9f9f9f; stroke: transparent; stroke-width: 1;"></polygon></svg></div></div></div></div><span data-state="closed"><button type="button" aria-label="Inspect input and output" style="margin-top: 18px; margin-left: 4px; position: relative; z-index: 21;" aria-haspopup="dialog" aria-expanded="false" aria-controls="__dynamic_id__" data-state="closed"><svg width="30" height="12" viewBox="0 0 30 12" fill="none" stroke="currentColor" stroke-width="0.5" stroke-linecap="round" style="opacity: 0.35; position: relative; top: -1px; transition: stroke 400ms, opacity 400ms, stroke-width 400ms;"><path d="M1 4 C7 1 11 7 18 4 C25 1 29 7 36 4 C43 1 47 7 54 4 C61 1 65 7 73 4"></path><path d="M1 8 C7 5 11 11 18 8 C25 5 29 11 36 8 C43 5 47 11 54 8 C61 5 65 11 73 8"></path></svg></button></span></div></div>"`;

package/bundle/hkp-frontend/src/runtime/browser/services/tests/audio-input-permissions.test.ts

@@ -0,0 +1,42 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import AudioInputDescriptor from "../AudioInput";
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("Audio Input permissions", () => {
+  it("reports a denied startup request without rejecting board construction", async () => {
+    const denial = new DOMException("Permission denied", "NotAllowedError");
+    Object.defineProperty(navigator, "mediaDevices", {
+      configurable: true,
+      value: { getUserMedia: vi.fn().mockRejectedValue(denial) },
+    });
+    const app = {
+      notify: vi.fn(),
+      next: vi.fn(),
+      sendAction: vi.fn(),
+    };
+
+    const service = AudioInputDescriptor.create(
+      app as any,
+      "test-board",
+      {} as any,
+      "audio-input-1",
+    );
+
+    // Let the constructor's best-effort media request settle.
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(app.sendAction).toHaveBeenCalledWith({
+      action: "notification",
+      service,
+      payload: {
+        type: "error",
+        message: "Could not access audio input: Permission denied",
+      },
+    });
+  });
+});

package/bundle/hkp-frontend/src/runtime/browser/services/tests/audiolizeLanes.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it, vi } from "vitest";
+
+import MapDescriptor from "../base/Map";
+import board from "../../../../../../boards/audiolize-board.json";
+
+/**
+ * The lane each track takes for itself.
+ *
+ * The board fans a keypress into two notes, and the two aggregators after them
+ * each want one of those notes. Under `tracks` every track is given the whole
+ * array, so each says which element is its own — and a Map given an array maps
+ * over its *elements* unless told the array is the subject. Missing that, every
+ * lane answered null for every note, and the synth was handed a grid of
+ * nothing.
+ */
+
+const MapService = MapDescriptor.Map;
+
+function aggregates() {
+  return (board.services.ui as any[]).find((svc) => svc.uuid === "aggregates-svc");
+}
+
+function laneMaps() {
+  return (aggregates().state.tracks as any[]).map((track) => track.pipeline[0]);
+}
+
+async function run(state: Record<string, unknown>, input: unknown) {
+  const app = {
+    notify: vi.fn(),
+    next: vi.fn(),
+    sendAction: vi.fn(),
+    processRuntimeByName: vi.fn(),
+    getRuntimeVariable: vi.fn(() => ({})),
+    setRuntimeVariable: vi.fn(),
+  };
+  const service = new MapService(app as any, "test-board", {} as any, "map-1") as any;
+  service.configure(state);
+  return await service.process(input);
+}
+
+describe("audiolize's lanes", () => {
+  it("takes one note per track out of the notes the tracks before it answered", async () => {
+    const notes = [{ note: "D4" }, { note: "C4" }];
+    const answers = await Promise.all(
+      laneMaps().map((lane) => run(lane.state, notes)),
+    );
+
+    expect(answers).toEqual([{ note: "D4" }, { note: "C4" }]);
+  });
+
+  it("says the array is the subject, not each element of it", () => {
+    for (const lane of laneMaps()) {
+      expect(lane.state.arrayMode).toBe("single");
+    }
+  });
+
+  it("stops the pass when neither aggregator had anything to play", async () => {
+    // The aggregators collect over an interval and emit on their own, so on the
+    // pass that feeds them they answer nothing. Handing the synth a pair of
+    // nulls on every keystroke is noise; the reducer is where a board says that
+    // silence means stop.
+    const reduce = aggregates().state.reduce[0];
+
+    expect(await run(reduce.state, { results: [null, null] })).toBeNull();
+    expect(await run(reduce.state, { results: [null, { note: "C4" }] })).toEqual([
+      null,
+      { note: "C4" },
+    ]);
+  });
+});

package/bundle/hkp-frontend/src/runtime/browser/services/tests/browser-scopes.test.ts

@@ -0,0 +1,305 @@
+import { describe, expect, it, vi } from "vitest";
+
+import HoldDescriptor from "../Hold";
+import { BrowserSubService } from "../BrowserSubService";
+import { createSlotStore } from "../../../slots";
+import board from "../../../../../../boards/hold-scopes-demo-board.json";
+
+/**
+ * A scope in the browser runtime: what it keeps to itself, what leaves it, and
+ * what a board can name inside it.
+ *
+ * The demo board is the case this has to carry — two scopes on one runtime,
+ * one running on its own schedule and passing nothing on, the other entered by
+ * a button and answering from the cell the first one wrote.
+ */
+
+function makeApp(slots = createSlotStore()) {
+  return {
+    notify: vi.fn(),
+    next: vi.fn(),
+    sendAction: vi.fn(),
+    slots: () => slots,
+  } as any;
+}
+
+/** Every serviceUuid the facade mentions, however deeply nested. */
+function referenced(node: unknown, found = new Set<string>()): Set<string> {
+  if (Array.isArray(node)) {
+    node.forEach((child) => referenced(child, found));
+    return found;
+  }
+  if (node && typeof node === "object") {
+    for (const [key, value] of Object.entries(node)) {
+      if (key === "serviceUuid" && typeof value === "string") {
+        found.add(value);
+      } else {
+        referenced(value, found);
+      }
+    }
+  }
+  return found;
+}
+
+function scopeOf(uuid: string) {
+  return (board.services.ui as any[]).find((svc) => svc.uuid === uuid);
+}
+
+describe("the Hold-across-scopes demo board", () => {
+  it("is two scopes, and the ticker passes nothing on", () => {
+    // What a Stopper between them would have said, said by the flow that ends.
+    const ticker = scopeOf("ticker");
+    expect(ticker.serviceId).toBe("sub-service");
+    expect(ticker.state.stopPropagation).toBe(true);
+    expect(scopeOf("reader").state.stopPropagation).toBeUndefined();
+  });
+
+  it("has both scopes hold in the runtime's cells", () => {
+    // One slot name reaching across two scopes is the whole arrangement, and
+    // it only works because both say they inherit. Left alone a scope keeps
+    // its cells to itself, which would leave the reader answering nothing.
+    for (const uuid of ["ticker", "reader"]) {
+      expect(scopeOf(uuid).state.scope).toEqual({ slots: "inherit" });
+    }
+  });
+
+  it("names the two ends of one slot", () => {
+    const writer = scopeOf("ticker").state.pipeline.at(-1);
+    const reader = scopeOf("reader").state.pipeline[0];
+    expect(writer.state.op).toBe("write");
+    expect(reader.state.op).toBe("read");
+    expect(reader.state.slot).toBe(writer.state.slot);
+  });
+
+  it("addresses what it reads by the path through the scope holding it", () => {
+    // A service inside a scope is named by where it sits, so moving one
+    // between scopes is visible in the board rather than silent.
+    expect([...referenced(board.facade)].sort()).toEqual([
+      "reader",
+      "reader.serve",
+      "ticker.keep",
+    ]);
+  });
+});
+
+describe("a browser scope", () => {
+  it("passes its result on unless it says otherwise", async () => {
+    const scope = new BrowserSubService(makeApp(), "board", {} as any, "scope");
+    scope.configure({ pipeline: [] });
+    // An empty scope is a wire, which keeps a half-built board legible.
+    expect(await scope.process({ mark: true })).toEqual({ mark: true });
+  });
+
+  it("answers nothing when it says it stops", async () => {
+    const scope = new BrowserSubService(makeApp(), "board", {} as any, "scope");
+    scope.configure({ stopPropagation: true, pipeline: [] });
+    expect(await scope.process({ mark: true })).toBeNull();
+  });
+
+  it("reports what it keeps to itself, both fields, always", () => {
+    // Reported even at their defaults, like the bypass beside them: a saved
+    // board then says outright what each scope does with its answer and its
+    // cells, instead of leaving a reader to infer a boundary.
+    const scope = new BrowserSubService(makeApp(), "board", {} as any, "scope");
+    expect(scope.state.stopPropagation).toBe(false);
+    expect(scope.state.scope).toEqual({ slots: "own" });
+  });
+});
+
+describe("two Holds naming one slot", () => {
+  it("meet when the scopes around them inherit the runtime's cells", () => {
+    // The demo board's arrangement, without the timer: the cell is what makes
+    // a value produced on one schedule readable on another.
+    const slots = createSlotStore();
+    const writer = HoldDescriptor.create(
+      makeApp(slots),
+      "board",
+      {} as any,
+      "keep",
+    ) as any;
+    const reader = HoldDescriptor.create(
+      makeApp(slots),
+      "board",
+      {} as any,
+      "serve",
+    ) as any;
+    writer.configure({ slot: "latest", op: "write" });
+    reader.configure({ slot: "latest", op: "read" });
+
+    writer.process({ count: 3 });
+    expect(reader.process(undefined)).toEqual({ count: 3 });
+  });
+});
+
+describe("what a scope can say about its cells", () => {
+  it("lists them, and reports a write or a removal to whoever is watching", () => {
+    // What a panel needs of a store: everything in it, word that it changed —
+    // a cell is written by whichever pipeline happens to run, not by the one
+    // being looked at — and a way to take one away again.
+    const slots = createSlotStore();
+    const seen = vi.fn();
+    const stop = slots.watch(seen);
+
+    slots.set("latest", { triggerCount: 3 });
+    expect(slots.entries()).toEqual([["latest", { triggerCount: 3 }]]);
+    expect(seen).toHaveBeenCalledTimes(1);
+
+    slots.remove("latest");
+    expect(slots.entries()).toEqual([]);
+    expect(seen).toHaveBeenCalledTimes(2);
+    // Removing what is not there says nothing happened, because nothing did.
+    slots.remove("latest");
+    expect(seen).toHaveBeenCalledTimes(2);
+
+    stop();
+    slots.set("latest", { triggerCount: 4 });
+    expect(seen).toHaveBeenCalledTimes(2);
+    expect(slots.entries()).toEqual([["latest", { triggerCount: 4 }]]);
+  });
+
+  it("calls the cells inherited only when they are the ones around it", async () => {
+    // Which store a scope reached, rather than what it asked for: the two
+    // differ where a scope says `inherit` and nothing around it has cells.
+    const runtimeSlots = createSlotStore();
+    const inheriting = new BrowserSubService(
+      makeApp(runtimeSlots),
+      "board",
+      {} as any,
+      "reader",
+    );
+    inheriting.configure({ scope: { slots: "inherit" }, pipeline: [] });
+    await (inheriting as any)._scopeBuilding;
+    expect(inheriting.slotsInUse()).toEqual({
+      store: runtimeSlots,
+      inherited: true,
+    });
+
+    const owning = new BrowserSubService(
+      makeApp(runtimeSlots),
+      "board",
+      {} as any,
+      "unit",
+    );
+    owning.configure({ scope: { slots: "own" }, pipeline: [] });
+    await (owning as any)._scopeBuilding;
+    const own = owning.slotsInUse();
+    expect(own.inherited).toBe(false);
+    expect(own.store).not.toBe(runtimeSlots);
+  });
+});
+
+describe("changing what leaves a scope", () => {
+  it("says it without rebuilding what the scope is running", async () => {
+    // Read on the way out of every call, so saying it is all it takes: a
+    // scope told to keep its answer to itself should not lose the Timer it
+    // was holding in the telling.
+    const app = makeApp(createSlotStore());
+    const scope = new BrowserSubService(app, "board", {} as any, "read");
+    scope.configure({ pipeline: [] });
+    await (scope as any)._scopeBuilding;
+
+    const built = (scope as any)._scope;
+    expect(scope.state.stopPropagation).toBe(false);
+
+    scope.configure({ stopPropagation: true });
+
+    expect(scope.state.stopPropagation).toBe(true);
+    expect((scope as any)._scope).toBe(built);
+    expect(app.notify).toHaveBeenCalledWith(scope, { stopPropagation: true });
+  });
+
+  it("answers nothing once it does, whatever the pipeline produced", async () => {
+    // The half of it a panel is promising: the services after this one stop
+    // running from it the moment the choice is made.
+    const scope = new BrowserSubService(
+      makeApp(createSlotStore()),
+      "board",
+      {} as any,
+      "read",
+    );
+    scope.configure({ pipeline: [] });
+    await (scope as any)._scopeBuilding;
+
+    expect(await scope.process({ carried: true })).toEqual({ carried: true });
+    scope.configure({ stopPropagation: true });
+    expect(await scope.process({ carried: true })).toBeNull();
+  });
+});
+
+describe("what a scope hands on", () => {
+  it("answers a call by returning, and only by returning", async () => {
+    // Pushing the same answer onward as well would run everything after the
+    // scope twice — and twice again for every scope nested inside it.
+    const app = makeApp(createSlotStore());
+    const scope = new BrowserSubService(app, "board", {} as any, "scope");
+    scope.configure({
+      pipeline: [{ serviceId: "hookup.to/service/monitor", instanceId: "m" }],
+    } as any);
+    await (scope as any)._scopeBuilding;
+
+    expect(await scope.process({ carried: true })).toEqual({ carried: true });
+    expect(app.next).not.toHaveBeenCalled();
+  });
+
+  it("pushes onward what a service inside emits on its own", async () => {
+    // The other route out, which stays open: a Timer ticking inside a scope
+    // has no call to answer, so its result leaves by being pushed.
+    const app = makeApp(createSlotStore());
+    const scope = new BrowserSubService(app, "board", {} as any, "scope");
+    scope.configure({
+      pipeline: [{ serviceId: "hookup.to/service/monitor", instanceId: "m" }],
+    } as any);
+    await (scope as any)._scopeBuilding;
+
+    const inner = scope.getInnerInstance("m")!;
+    await (scope as any)._scope.next(inner, { tick: 1 }, null, false);
+    // With the run it was emitted in, which here is none.
+    expect(app.next).toHaveBeenCalledWith(scope, { tick: 1 }, { run: null });
+  });
+});
+
+describe("changing which cells a scope holds in", () => {
+  it("re-points the store and leaves the built scope alone", async () => {
+    // The cheap half of the change is the point: a scope may be holding a
+    // Timer, and rebuilding it to answer a question about where a value is
+    // kept would restart what it is running — a heavy way to say it.
+    const runtimeSlots = createSlotStore();
+    const app = makeApp(runtimeSlots);
+    const scope = new BrowserSubService(app, "board", {} as any, "reader");
+    scope.configure({ scope: { slots: "inherit" }, pipeline: [] });
+    await (scope as any)._scopeBuilding;
+
+    const built = (scope as any)._scope;
+    expect(built).not.toBeNull();
+    expect(scope.slotsInUse().inherited).toBe(true);
+
+    scope.configure({ scope: { slots: "own" } });
+
+    // The same scope object, so everything it holds is still the instance it
+    // was — nothing was torn down and built again.
+    expect((scope as any)._scope).toBe(built);
+    const after = scope.slotsInUse();
+    expect(after.inherited).toBe(false);
+    expect(after.store).not.toBe(runtimeSlots);
+    // Nothing else would tell a panel reading those cells that they changed.
+    expect(app.notify).toHaveBeenCalledWith(scope, {
+      scope: { slots: "own" },
+    });
+  });
+
+  it("keeps what a scope of its own was holding across the trip out and back", async () => {
+    // Its own cells live on the service rather than on the scope, so a value
+    // held before a detour through the runtime's cells is still there after.
+    const app = makeApp(createSlotStore());
+    const scope = new BrowserSubService(app, "board", {} as any, "unit");
+    scope.configure({ scope: { slots: "own" }, pipeline: [] });
+    await (scope as any)._scopeBuilding;
+
+    scope.slotsInUse().store?.set("draft", "unsent");
+    scope.configure({ scope: { slots: "inherit" } });
+    expect(scope.slotsInUse().store?.get("draft")).toBeUndefined();
+
+    scope.configure({ scope: { slots: "own" } });
+    expect(scope.slotsInUse().store?.get("draft")).toBe("unsent");
+  });
+});

package/bundle/hkp-frontend/src/runtime/browser/services/tests/cache-service.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it, vi } from "vitest";
+
+import CacheDescriptor from "../Cache";
+
+function makeCache(state: Record<string, unknown>) {
+  const notify = vi.fn();
+  const app = { notify, next: vi.fn() } as any;
+  const service = CacheDescriptor.create(app, "board", {} as any, "cache-1") as any;
+  service.configure(state);
+  return { service, notify };
+}
+
+describe("Cache", () => {
+  it("reports its configuration and values as separate fields", async () => {
+    const { service, notify } = makeCache({
+      updateTrigger: "process",
+      initial: { x: 1, y: 2 },
+    });
+
+    await service.process({ x: 5 });
+
+    expect(notify).toHaveBeenLastCalledWith(service, {
+      updateTrigger: "process",
+      initial: { x: 1, y: 2 },
+      values: { x: 5, y: 2 },
+    });
+  });
+
+  it("reports on every update a process makes", async () => {
+    const { service, notify } = makeCache({ updateTrigger: "process" });
+    notify.mockClear();
+
+    await service.process({ a: 1 });
+    await service.process({ a: 2 });
+
+    expect(notify).toHaveBeenCalledTimes(2);
+    expect(notify.mock.calls[1][1].values).toEqual({ a: 2 });
+  });
+
+  it("keeps its setup on the board, not the values it gathered", async () => {
+    const { service } = makeCache({
+      updateTrigger: "process",
+      initial: { x: 1 },
+    });
+    await service.process({ x: 9 });
+
+    expect(await service.getConfiguration()).toEqual({
+      updateTrigger: "process",
+      initial: { x: 1 },
+      bypass: false,
+    });
+  });
+});

package/bundle/hkp-frontend/src/runtime/browser/services/tests/camera-video-capture.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it, vi } from "vitest";
+
+import { startVideoStream } from "../camera/videoCapture";
+
+describe("camera video capture", () => {
+  it("releases a granted camera when the video element cannot play it", async () => {
+    const stop = vi.fn();
+    const stream = {
+      getTracks: () => [{ stop }],
+    } as unknown as MediaStream;
+    Object.defineProperty(navigator, "mediaDevices", {
+      configurable: true,
+      value: { getUserMedia: vi.fn().mockResolvedValue(stream) },
+    });
+    const video = document.createElement("video");
+    const failure = new DOMException("Not supported", "NotSupportedError");
+    vi.spyOn(video, "play").mockRejectedValue(failure);
+
+    await expect(startVideoStream(video)).rejects.toBe(failure);
+
+    expect(stop).toHaveBeenCalledOnce();
+    expect(video.srcObject).toBeNull();
+  });
+});

package/bundle/hkp-frontend/src/runtime/browser/services/tests/changes-service.test.ts

@@ -0,0 +1,133 @@
+import { describe, expect, it, vi } from "vitest";
+
+import ChangesDescriptor from "../Changes";
+
+/**
+ * Changes turns a stream of reports into events: the input passes only when
+ * what it watches differs from what it watched last time.
+ */
+
+function makeChanges(state: Record<string, unknown> = {}) {
+  const app = {
+    notify: vi.fn(),
+    next: vi.fn(),
+    sendAction: vi.fn(),
+    getRuntimeVariable: () => ({}),
+  } as any;
+  const service = ChangesDescriptor.create(app, "board", {} as any, "changes-1") as any;
+  service.configure(state);
+  return { service, app };
+}
+
+async function run(service: any, inputs: unknown[]) {
+  const out: unknown[] = [];
+  for (const input of inputs) {
+    out.push(await service.process(input));
+  }
+  return out;
+}
+
+describe("Changes", () => {
+  it("passes the whole input when it differs from the last one", async () => {
+    const { service } = makeChanges();
+    expect(await run(service, ["a", "a", "b", "b", "a"])).toEqual(["a", null, "b", null, "a"]);
+  });
+
+  it("compares objects by what they say, not by identity", async () => {
+    const { service } = makeChanges();
+    expect(await run(service, [{ n: 1 }, { n: 1 }, { n: 2 }])).toEqual([{ n: 1 }, null, { n: 2 }]);
+  });
+
+  it("sees a change in an object that is reused and given other content", async () => {
+    const { service } = makeChanges();
+    const input = { n: 1 };
+    expect(await service.process(input)).toBe(input);
+    expect(await service.process(input)).toBeNull();
+    input.n = 2;
+    expect(await service.process(input)).toBe(input);
+    expect(await service.process(input)).toBeNull();
+  });
+
+  it("takes binary content JSON cannot read as changed whenever it is another object", async () => {
+    const { service } = makeChanges();
+    const first = new Blob(["one"]);
+    const second = new Blob(["two"]);
+    expect(await run(service, [first, first, second, second])).toEqual([
+      first,
+      null,
+      second,
+      null,
+    ]);
+
+    const buffers = makeChanges().service;
+    const a = new ArrayBuffer(4);
+    const b = new ArrayBuffer(4);
+    expect(await run(buffers, [a, b, b])).toEqual([a, b, null]);
+  });
+
+  it("sees binary content change inside an object, and bytes by what they hold", async () => {
+    const { service } = makeChanges();
+    const image = new Blob(["frame"]);
+    const frames = [
+      { id: 1, image },
+      { id: 1, image },
+      { id: 1, image: new Blob(["frame"]) },
+    ];
+    expect(await run(service, frames)).toEqual([frames[0], null, frames[2]]);
+
+    const bytes = makeChanges().service;
+    const inputs = [new Uint8Array([1, 2]), new Uint8Array([1, 2]), new Uint8Array([1, 3])];
+    expect(await run(bytes, inputs)).toEqual([inputs[0], null, inputs[2]]);
+  });
+
+  it("watches an expression and passes the input it was read from", async () => {
+    const { service } = makeChanges({ value: "params.count > 0", emit: "rise" });
+    const frames = [
+      { count: 0 },
+      { count: 1 },
+      { count: 2 },
+      { count: 0 },
+      { count: 1 },
+    ];
+    expect(await run(service, frames)).toEqual([null, { count: 1 }, null, null, { count: 1 }]);
+  });
+
+  it("counts a truthy first value as a rise, and a falsy one as no fall", async () => {
+    const rise = makeChanges({ value: "params.on", emit: "rise" }).service;
+    expect(await run(rise, [{ on: true }])).toEqual([{ on: true }]);
+    const fall = makeChanges({ value: "params.on", emit: "fall" }).service;
+    expect(await run(fall, [{ on: false }, { on: true }, { on: false }])).toEqual([
+      null,
+      null,
+      { on: false },
+    ]);
+  });
+
+  it("forgets on reset, and when the expression changes", async () => {
+    const { service } = makeChanges({ value: "params.on", emit: "rise" });
+    await run(service, [{ on: true }]);
+    service.configure({ reset: true });
+    expect(await service.process({ on: true })).toEqual({ on: true });
+    service.configure({ value: "params.other" });
+    expect(service.remembered).toEqual({ seen: false, value: undefined });
+  });
+
+  it("keeps what it remembers out of the board's configuration", async () => {
+    const { service } = makeChanges({ value: "params.on" });
+    await run(service, [{ on: true }]);
+    expect(await service.getConfiguration()).toEqual({
+      value: "params.on",
+      emit: "change",
+      bypass: false,
+    });
+    expect(service.remembered).toEqual({ seen: true, value: true });
+  });
+
+  it("stops, and says so, on an expression it cannot read", async () => {
+    const { service, app } = makeChanges({ value: "params.(" });
+    expect(await service.process({})).toBeNull();
+    expect(app.sendAction).toHaveBeenCalledWith(
+      expect.objectContaining({ action: "notification" }),
+    );
+  });
+});