@jskit-ai/http-web 0.1.1

package/test/crudListDateFilterSurface.browser.test.js

@@ -0,0 +1,182 @@
+import assert from "node:assert/strict";
+import path from "node:path";
+import process from "node:process";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+import { chromium } from "@playwright/test";
+import {
+  createChromiumLaunchOptions,
+  startViteFixture,
+  stopProcess
+} from "../../../tooling/testUtils/browserFixture.mjs";
+
+const TEST_DIRECTORY = path.dirname(fileURLToPath(import.meta.url));
+const PACKAGE_ROOT = path.resolve(TEST_DIRECTORY, "..");
+const FIXTURE_ROOT = path.join(PACKAGE_ROOT, "fixtures", "crud-list-date-filters");
+const RUN_BROWSER_TEST = process.env.JSKIT_HTTP_WEB_DATE_FILTER_VISUAL_INTEGRATION === "1";
+const VIEWPORT_WIDTHS = Object.freeze([375, 768, 1280, 1440]);
+const QUERY = "?status=active&submittedOn=2026-04-18&arrivalDate=2026-05-04..2026-05-10";
+
+async function readContract(page) {
+  return JSON.parse(await page.getByTestId("date-filter-contract").textContent());
+}
+
+async function openCompactFilters(page) {
+  const openButton = page.getByRole("button", { name: /^Filters/u });
+  if (await openButton.isVisible()) {
+    await openButton.click();
+    await page.getByRole("dialog").waitFor({ state: "visible" });
+  }
+}
+
+async function assertResponsiveDateControls(page, width) {
+  await page.setViewportSize({ width, height: 900 });
+  await page.goto(`/${QUERY}`, {
+    waitUntil: "networkidle"
+  });
+  await openCompactFilters(page);
+
+  for (const name of ["Submitted date", "Arrival from", "Arrival to"]) {
+    const field = page.getByLabel(name, { exact: true });
+    await field.waitFor({ state: "visible" });
+    const box = await field.locator("xpath=ancestor::*[contains(@class, 'v-input')][1]").boundingBox();
+    assert.ok(box, `${name} is missing a visible field at ${width}px.`);
+    assert.ok(box.width >= 220, `${name} is only ${box.width}px wide at ${width}px.`);
+    assert.ok(box.x >= 0 && box.x + box.width <= width, `${name} overflows at ${width}px.`);
+  }
+
+  const layout = await page.evaluate(() => ({
+    clientWidth: document.documentElement.clientWidth,
+    scrollWidth: document.documentElement.scrollWidth,
+    clippedFields: Array.from(document.querySelectorAll(".crud-list-date-filter-control .v-field"))
+      .filter((field) => field.scrollWidth > field.clientWidth + 1)
+      .length,
+    visibleCalendarIcons: Array.from(document.querySelectorAll(
+      ".crud-list-date-filter-control .v-field__append-inner"
+    )).filter((icon) => {
+      const rect = icon.getBoundingClientRect();
+      return rect.width > 0 && rect.right <= window.innerWidth;
+    }).length
+  }));
+  assert.equal(layout.scrollWidth, layout.clientWidth, `Horizontal overflow at ${width}px.`);
+  assert.equal(layout.clippedFields, 0, `A date field is clipped at ${width}px.`);
+  assert.equal(layout.visibleCalendarIcons, 3, `Calendar affordance missing at ${width}px.`);
+
+  const screenshot = await page.screenshot({ fullPage: true });
+  assert.ok(screenshot.length > 5_000, `Visual evidence was empty at ${width}px.`);
+}
+
+async function selectPickerDayWithKeyboard(picker, day) {
+  const dayButton = picker
+    .locator(".v-date-picker-month__day-btn")
+    .filter({ hasText: new RegExp(`^${day}$`, "u") })
+    .first();
+  await dayButton.focus();
+  await dayButton.press("Space");
+}
+
+test("CRUD date filters render and operate without clipping across responsive layouts", {
+  skip: RUN_BROWSER_TEST
+    ? false
+    : "set JSKIT_HTTP_WEB_DATE_FILTER_VISUAL_INTEGRATION=1 to run the browser visual regression",
+  timeout: 180_000
+}, async () => {
+  const viteRuntime = await startViteFixture({ fixtureRoot: FIXTURE_ROOT });
+  let browser = null;
+
+  try {
+    browser = await chromium.launch(createChromiumLaunchOptions());
+    const context = await browser.newContext({
+      baseURL: viteRuntime.baseURL,
+      locale: "en-US"
+    });
+    const page = await context.newPage();
+
+    for (const width of VIEWPORT_WIDTHS) {
+      await assertResponsiveDateControls(page, width);
+    }
+
+    await page.setViewportSize({ width: 1280, height: 900 });
+    await page.goto(`/${QUERY}`, { waitUntil: "networkidle" });
+    assert.deepEqual(await readContract(page), {
+      values: {
+        submittedOn: "2026-04-18",
+        arrivalDate: { from: "2026-05-04", to: "2026-05-10" }
+      },
+      query: {
+        submittedOn: "2026-04-18",
+        arrivalDate: "2026-05-04..2026-05-10"
+      }
+    });
+    await page.getByText("Submitted date: Apr 18, 2026", { exact: true }).waitFor();
+    await page.getByText("Arrival: May 4, 2026 to May 10, 2026", { exact: true }).waitFor();
+
+    const submittedField = page.getByLabel("Submitted date", { exact: true });
+    await submittedField.focus();
+    await submittedField.press("Enter");
+    const submittedPicker = page.getByRole("dialog", { name: "Submitted date calendar" });
+    await submittedPicker.waitFor({ state: "visible" });
+    await selectPickerDayWithKeyboard(submittedPicker, 21);
+    assert.equal((await readContract(page)).values.submittedOn, "2026-04-21");
+    assert.equal((await readContract(page)).query.submittedOn, "2026-04-21");
+    assert.equal(await submittedField.evaluate((element) => element === document.activeElement), true);
+
+    const arrivalToField = page.getByLabel("Arrival to", { exact: true });
+    await arrivalToField.focus();
+    await arrivalToField.press("ArrowDown");
+    const arrivalToPicker = page.getByRole("dialog", { name: "Arrival to calendar" });
+    await arrivalToPicker.waitFor({ state: "visible" });
+    await selectPickerDayWithKeyboard(arrivalToPicker, 12);
+    assert.deepEqual((await readContract(page)).values.arrivalDate, {
+      from: "2026-05-04",
+      to: "2026-05-12"
+    });
+    assert.equal((await readContract(page)).query.arrivalDate, "2026-05-04..2026-05-12");
+
+    await arrivalToField.focus();
+    await arrivalToField.press("Enter");
+    const clearButton = page
+      .getByRole("dialog", { name: "Arrival to calendar" })
+      .getByRole("button", { name: "Clear", exact: true });
+    await clearButton.focus();
+    await clearButton.press("Space");
+    assert.deepEqual((await readContract(page)).values.arrivalDate, {
+      from: "2026-05-04",
+      to: ""
+    });
+    assert.equal((await readContract(page)).query.arrivalDate, "2026-05-04..");
+    assert.equal(await arrivalToField.evaluate((element) => element === document.activeElement), true);
+
+    const arrivalFromField = page.getByLabel("Arrival from", { exact: true });
+    await arrivalFromField.focus();
+    await arrivalFromField.press(" ");
+    await page.getByRole("dialog", { name: "Arrival from calendar" }).waitFor();
+    await page.keyboard.press("Escape");
+    assert.equal(await arrivalFromField.evaluate((element) => element === document.activeElement), true);
+
+    const clearAll = page.getByRole("button", { name: "Clear all", exact: true });
+    await clearAll.focus();
+    await clearAll.press("Space");
+    assert.deepEqual((await readContract(page)).values, {
+      submittedOn: "",
+      arrivalDate: { from: "", to: "" }
+    });
+
+    await page.setViewportSize({ width: 375, height: 812 });
+    await page.reload({ waitUntil: "networkidle" });
+    const openFilters = page.getByRole("button", { name: /^Filters/u });
+    const openButtonBox = await openFilters.boundingBox();
+    assert.ok(openButtonBox && openButtonBox.height >= 48);
+    await openFilters.click();
+    const mobileSheet = page.getByRole("dialog");
+    await mobileSheet.waitFor({ state: "visible" });
+    const mobileSheetBox = await mobileSheet.boundingBox();
+    assert.ok(mobileSheetBox && mobileSheetBox.width <= 375);
+    await page.getByLabel("Arrival from", { exact: true }).waitFor({ state: "visible" });
+  } finally {
+    if (browser) {
+      await browser.close();
+    }
+    await stopProcess(viteRuntime);
+  }
+});

package/test/crudListFilterSurface.test.js

@@ -0,0 +1,90 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+import { compileScript, compileTemplate, parse } from "@vue/compiler-sfc";
+
+const TEST_DIRECTORY = path.dirname(fileURLToPath(import.meta.url));
+const PACKAGE_DIR = path.resolve(TEST_DIRECTORY, "..");
+
+test("http-web exposes client-side CRUD list filter definition helpers", async () => {
+  const { defineCrudListFilters } = await import("@jskit-ai/http-web/client/filters");
+
+  const filters = defineCrudListFilters({
+    status: {
+      type: "enum",
+      label: "Status",
+      options: [
+        { value: "active", label: "Active" }
+      ]
+    }
+  });
+
+  assert.equal(filters.status.queryKey, "status");
+  assert.equal(filters.status.options[0].label, "Active");
+});
+
+test("CrudListFilterSurface provides adaptive controls without owning server semantics", async () => {
+  const source = await readFile(
+    path.join(PACKAGE_DIR, "src", "client", "components", "CrudListFilterSurface.vue"),
+    "utf8"
+  );
+
+  assert.match(source, /defineProps/);
+  assert.match(source, /useDisplay/);
+  assert.match(source, /v-if="shouldRender"/);
+  assert.match(source, /filterEntries/);
+  assert.match(source, /runtimeValues\[filter\.key\]/);
+  assert.match(source, /activeChips/);
+  assert.match(source, /clearChip/);
+  assert.match(source, /clearFilters/);
+  assert.match(source, /v-dialog/);
+  assert.match(source, /min-height:\s*48px/);
+  assert.match(source, /CrudListDateFilterControl/);
+  assert.match(source, /crud-list-filter-surface__range--date/);
+  assert.match(source, /grid-column:\s*span 2/);
+  assert.doesNotMatch(source, /type="date"/);
+  assert.doesNotMatch(source, /useCrudList\(/);
+  assert.doesNotMatch(source, /apiSuffix|server|repository/);
+});
+
+test("CrudListDateFilterControl composes stable Vuetify picker components accessibly", async () => {
+  const componentPath = path.join(
+    PACKAGE_DIR,
+    "src",
+    "client",
+    "components",
+    "CrudListDateFilterControl.vue"
+  );
+  const source = await readFile(componentPath, "utf8");
+
+  assert.match(source, /<v-menu/);
+  assert.match(source, /<v-text-field/);
+  assert.match(source, /<v-date-picker/);
+  assert.match(source, /append-inner-icon="\$calendar"/);
+  assert.match(source, /:aria-label="label"/);
+  assert.match(source, /aria-haspopup="dialog"/);
+  assert.match(source, /v-bind="\{ \.\.\.attrs, \.\.\.activatorProps \}"/);
+  assert.match(source, /\["Enter", " ", "ArrowDown"\]/);
+  assert.match(source, /role="dialog"/);
+  assert.match(source, />\s*Clear\s*</u);
+  assert.match(source, />\s*Close\s*</u);
+  assert.doesNotMatch(source, /VDateInput|vuetify\/labs|type="date"/);
+
+  const { descriptor, errors: parseErrors } = parse(source, { filename: componentPath });
+  assert.deepEqual(parseErrors, []);
+  const script = compileScript(descriptor, {
+    id: "crud-list-date-filter-control"
+  });
+  const compiled = compileTemplate({
+    id: "crud-list-date-filter-control",
+    filename: componentPath,
+    source: descriptor.template.content,
+    scoped: descriptor.styles.some((style) => style.scoped),
+    compilerOptions: {
+      bindingMetadata: script.bindings
+    }
+  });
+  assert.deepEqual(compiled.errors, []);
+});

package/test/crudLookupFieldRuntime.test.js

@@ -0,0 +1,264 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import {
+  resolveLookupItemLabel,
+  resolveLookupFieldDisplayValue,
+  resolveRecordTitle
+} from "../src/client/composables/crud/crudLookupFieldLabelSupport.js";
+
+test("resolveLookupItemLabel composes name + surname", () => {
+  assert.equal(
+    resolveLookupItemLabel(
+      {
+        name: "South",
+        surname: "Clinic"
+      },
+      "name"
+    ),
+    "South Clinic"
+  );
+});
+
+test("resolveLookupItemLabel composes firstName + surname", () => {
+  assert.equal(
+    resolveLookupItemLabel(
+      {
+        firstName: "Ana",
+        surname: "Marin"
+      },
+      "name"
+    ),
+    "Ana Marin"
+  );
+});
+
+test("resolveLookupItemLabel composes firstName + lastName", () => {
+  assert.equal(
+    resolveLookupItemLabel(
+      {
+        firstName: "Ana",
+        lastName: "Marin"
+      },
+      "name"
+    ),
+    "Ana Marin"
+  );
+});
+
+test("resolveLookupItemLabel falls back to explicit labelKey", () => {
+  assert.equal(
+    resolveLookupItemLabel(
+      {
+        clinicName: "Harbor Vet"
+      },
+      "clinicName"
+    ),
+    "Harbor Vet"
+  );
+});
+
+test("resolveLookupItemLabel resolves name when surname is missing", () => {
+  assert.equal(
+    resolveLookupItemLabel(
+      {
+        name: "Harbor Vet"
+      },
+      ""
+    ),
+    "Harbor Vet"
+  );
+});
+
+test("resolveLookupItemLabel returns empty when no label fields match", () => {
+  assert.equal(resolveLookupItemLabel({ id: 42 }, "name"), "");
+});
+
+test("resolveRecordTitle composes name-like fields before fallback key", () => {
+  assert.equal(
+    resolveRecordTitle(
+      {
+        firstName: "Ana",
+        lastName: "Marin",
+        title: "Ignored"
+      },
+      {
+        fallbackKey: "title",
+        defaultValue: "Record"
+      }
+    ),
+    "Ana Marin"
+  );
+});
+
+test("resolveRecordTitle falls back to provided field key", () => {
+  assert.equal(
+    resolveRecordTitle(
+      {
+        title: "Harbor Visit"
+      },
+      {
+        fallbackKey: "title",
+        defaultValue: "Record"
+      }
+    ),
+    "Harbor Visit"
+  );
+});
+
+test('resolveRecordTitle falls back to "-" when no title data exists', () => {
+  assert.equal(resolveRecordTitle({}, { fallbackKey: "title", defaultValue: "" }), "-");
+});
+
+test("resolveLookupFieldDisplayValue returns hydrated label for lookup fields", () => {
+  assert.equal(
+    resolveLookupFieldDisplayValue(
+      {
+        vetId: 17,
+        lookups: {
+          vetId: {
+            id: 17,
+            name: "Harbor Vet"
+          }
+        }
+      },
+      {
+        key: "vetId",
+        relation: {
+          kind: "lookup",
+          valueKey: "id",
+          labelKey: "name"
+        }
+      }
+    ),
+    "Harbor Vet"
+  );
+});
+
+test("resolveLookupFieldDisplayValue falls back to hydrated valueKey", () => {
+  assert.equal(
+    resolveLookupFieldDisplayValue(
+      {
+        vetId: 17,
+        lookups: {
+          vetId: {
+            id: 99
+          }
+        }
+      },
+      {
+        key: "vetId",
+        relation: {
+          kind: "lookup",
+          valueKey: "id",
+          labelKey: "name"
+        }
+      }
+    ),
+    99
+  );
+});
+
+test("resolveLookupFieldDisplayValue falls back to raw id when lookup is not hydrated", () => {
+  assert.equal(
+    resolveLookupFieldDisplayValue(
+      {
+        vetId: 17
+      },
+      {
+        key: "vetId",
+        relation: {
+          kind: "lookup",
+          valueKey: "id",
+          labelKey: "name"
+        }
+      }
+    ),
+    17
+  );
+});
+
+test("resolveLookupFieldDisplayValue supports custom lookup container key", () => {
+  assert.equal(
+    resolveLookupFieldDisplayValue(
+      {
+        vetId: 17,
+        lookupData: {
+          vetId: {
+            id: 17,
+            name: "Harbor Vet"
+          }
+        }
+      },
+      {
+        key: "vetId",
+        relation: {
+          kind: "lookup",
+          containerKey: "lookupData",
+          valueKey: "id",
+          labelKey: "name"
+        }
+      }
+    ),
+    "Harbor Vet"
+  );
+});
+
+test("resolveLookupFieldDisplayValue falls back to alias-keyed lookups for relationship-backed fields", () => {
+  assert.equal(
+    resolveLookupFieldDisplayValue(
+      {
+        vetId: "17",
+        lookups: {
+          vet: {
+            id: "17",
+            name: "Harbor Vet"
+          }
+        }
+      },
+      {
+        key: "vetId",
+        relation: {
+          kind: "lookup",
+          valueKey: "id",
+          labelKey: "name"
+        }
+      }
+    ),
+    "Harbor Vet"
+  );
+});
+
+test("resolveLookupFieldDisplayValue returns raw value for non-lookup fields", () => {
+  assert.equal(
+    resolveLookupFieldDisplayValue(
+      {
+        firstName: "Ana"
+      },
+      {
+        key: "firstName"
+      }
+    ),
+    "Ana"
+  );
+});
+
+test("resolveLookupFieldDisplayValue supports scalar lookup descriptor arguments", () => {
+  assert.equal(
+    resolveLookupFieldDisplayValue(
+      {
+        vetId: 17,
+        lookups: {
+          vetId: {
+            id: 17,
+            name: "Harbor Vet"
+          }
+        }
+      },
+      "vetId",
+      "lookup",
+      "id",
+      "name"
+    ),
+    "Harbor Vet"
+  );
+});

package/test/crudScreenComponents.test.js

@@ -0,0 +1,110 @@
+import assert from "node:assert/strict";
+import path from "node:path";
+import test from "node:test";
+import { readFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+
+const TEST_DIRECTORY = path.dirname(fileURLToPath(import.meta.url));
+const PACKAGE_DIR = path.resolve(TEST_DIRECTORY, "..");
+
+async function readComponent(name) {
+  return readFile(path.join(PACKAGE_DIR, "src", "client", "components", name), "utf8");
+}
+
+async function readClientFile(...parts) {
+  return readFile(path.join(PACKAGE_DIR, "src", "client", ...parts), "utf8");
+}
+
+test("CRUD screen components own generated list/view/form chrome centrally", async () => {
+  const listSource = await readComponent("CrudListScreen.vue");
+  const viewSource = await readComponent("CrudViewScreen.vue");
+  const addEditSource = await readComponent("CrudAddEditScreen.vue");
+  const deleteActionSource = await readComponent("CrudDeleteAction.vue");
+
+  assert.match(listSource, /CrudListBulkActionSurface/);
+  assert.match(listSource, /CrudListFilterSurface/);
+  assert.match(listSource, /CrudListRecordActionMenu/);
+  assert.match(listSource, /class="ui-generator-list-cards"/);
+  assert.match(listSource, /class="ui-generator-list-table"/);
+  assert.match(listSource, /class="ui-generator-list-fab"/);
+  assert.doesNotMatch(listSource, /ui-generator-list-cards d-md-none/);
+  assert.doesNotMatch(listSource, /ui-generator-list-table d-none d-md-block/);
+  assert.doesNotMatch(listSource, /class="ui-generator-list-fab d-md-none"/);
+  assert.match(listSource, /\.ui-generator-list-table\s*\{\s*display:\s*none;/);
+  assert.match(
+    listSource,
+    /@media \(min-width: 960px\)[\s\S]*\.ui-generator-list-cards\s*\{\s*display:\s*none;[\s\S]*\.ui-generator-list-table\s*\{\s*display:\s*block;[\s\S]*\.ui-generator-list-fab\s*\{\s*display:\s*none;/
+  );
+  assert.match(listSource, /button-label="More"/);
+  assert.match(listSource, /selectableRows/);
+  assert.match(
+    listSource,
+    /\.ui-generator-list-element :deep\(\.v-btn\)\s*\{\s*min-height:\s*48px;/
+  );
+  assert.match(listSource, /<slot[\s\S]*name="card-fields"/);
+  assert.match(listSource, /<slot name="table-header"/);
+  assert.match(listSource, /<slot[\s\S]*name="table-row"/);
+  assert.match(listSource, /:row="row"/);
+
+  assert.match(viewSource, /generated-ui-screen generated-ui-screen--operator ui-generator-view-element/);
+  assert.match(viewSource, /ui-generator-view-panel/);
+  assert.match(viewSource, /@click="view\.refresh"/);
+  assert.match(viewSource, /<slot name="actions" :screen="screen" :view="view" \/>/);
+  assert.match(viewSource, /<slot name="before-fields"/);
+  assert.match(viewSource, /<slot name="fields"/);
+  assert.match(viewSource, /<slot name="after-fields"/);
+  assert.match(viewSource, /supporting-content/);
+
+  assert.match(addEditSource, /generated-ui-screen generated-ui-screen--operator ui-generator-add-edit-form/);
+  assert.match(addEditSource, /addEdit\.canRetryLoad/);
+  assert.match(addEditSource, /@click="addEdit\.refresh"/);
+  assert.match(addEditSource, /<slot[\s\S]*name="fields"/);
+
+  assert.match(deleteActionSource, /@click="action\.request"/);
+  assert.match(deleteActionSource, /@click="action\.confirm"/);
+  assert.match(deleteActionSource, /@click="closeDialog"/);
+  assert.doesNotMatch(deleteActionSource, /\bactivator=/);
+});
+
+test("CRUD screen composables expose generated page extension inputs", async () => {
+  const listSource = await readClientFile("composables", "useCrudListScreen.js");
+  const viewSource = await readClientFile("composables", "useCrudViewScreen.js");
+
+  assert.match(listSource, /listRowActions = \[\]/);
+  assert.match(listSource, /syntheticRows = null/);
+  assert.match(listSource, /readEnabled = true/);
+  assert.match(listSource, /useCrudListRowActions/);
+  assert.match(listSource, /selectableRows/);
+  assert.match(listSource, /readEnabled,\n\s+requestRecoveryLabel/);
+
+  assert.match(viewSource, /requestQueryParams = null/);
+  assert.match(viewSource, /readEnabled = true/);
+  assert.match(viewSource, /queryKeyFactory = null/);
+  assert.match(viewSource, /requestQueryParams/);
+  assert.match(viewSource, /readEnabled/);
+});
+
+test("CRUD screen composables are importable package APIs", async () => {
+  const [
+    listModule,
+    viewModule,
+    addEditModule,
+    rowActionsModule,
+    rowActionsRuntimeModule,
+    deleteActionModule
+  ] = await Promise.all([
+    import("@jskit-ai/http-web/client/composables/useCrudListScreen"),
+    import("@jskit-ai/http-web/client/composables/useCrudViewScreen"),
+    import("@jskit-ai/http-web/client/composables/useCrudAddEditScreen"),
+    import("@jskit-ai/http-web/client/rowActions"),
+    import("@jskit-ai/http-web/client/composables/useCrudListRowActions"),
+    import("@jskit-ai/http-web/client/composables/useCrudDeleteAction")
+  ]);
+
+  assert.equal(typeof listModule.useCrudListScreen, "function");
+  assert.equal(typeof viewModule.useCrudViewScreen, "function");
+  assert.equal(typeof addEditModule.useCrudAddEditScreen, "function");
+  assert.equal(typeof rowActionsModule.defineCrudListRowActions, "function");
+  assert.equal(typeof rowActionsRuntimeModule.useCrudListRowActions, "function");
+  assert.equal(typeof deleteActionModule.useCrudDeleteAction, "function");
+});

package/test/errorIntentContract.test.js

@@ -0,0 +1,31 @@
+import assert from "node:assert/strict";
+import path from "node:path";
+import test from "node:test";
+import { readFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+
+const TEST_DIRECTORY = path.dirname(fileURLToPath(import.meta.url));
+const PACKAGE_DIR = path.resolve(TEST_DIRECTORY, "..");
+
+async function readClientSource(relativePath) {
+  return readFile(path.join(PACKAGE_DIR, "src", "client", relativePath), "utf8");
+}
+
+test("http-web reports load errors as local resource-load intent by default", async () => {
+  const source = await readClientSource("composables/runtime/operationUiHelpers.js");
+
+  assert.match(source, /loadChannel = ""/);
+  assert.match(source, /notFoundChannel = ""/);
+  assert.match(source, /intent = "resource-load"/);
+  assert.match(source, /intent: "resource-load"/);
+  assert.doesNotMatch(source, /loadChannel = "banner"/);
+});
+
+test("http-web action feedback lets shell policy choose snackbar presentation", async () => {
+  const source = await readClientSource("composables/runtime/useUiFeedback.js");
+
+  assert.match(source, /successChannel = ""/);
+  assert.match(source, /errorChannel = ""/);
+  assert.match(source, /intent: "action-feedback"/);
+  assert.doesNotMatch(source, /errorChannel = "banner"/);
+});