@blazeo.com/appointment-client 1.0.6 → 1.0.8

package/sample/src/CreateCalendarTab.jsx

@@ -1,7 +1,8 @@
 import { useMemo, useState } from "react";
-import { createCalendarAsync, createCalendarWithRelationsAsync } from "appointment-client";
+import { createCalendarAsync, createCalendarWithRelationsAsync, ensureBlazeoHttpReady } from "appointment-client";
 import { getSnapshot } from "mobx-state-tree";
 import { configureBlazeoFromEffective, useBlazeoConnection } from "./BlazeoConnectionSettings.jsx";
+import { mapBlazeoDemoError } from "./blazeoDemoError.js";
 
 /** Demo payload aligned with `CalendarBOInput` / server `CalendarBO`. */
 export function getExampleCalendarBOInput() {
@@ -38,7 +39,7 @@ export function getExampleCalendarBOInput() {
 }
 
 export function CreateCalendarTab() {
-  const { effective } = useBlazeoConnection();
+  const { effective, connectionOpts } = useBlazeoConnection();
   const [localOnly, setLocalOnly] = useState(false);
   const [saveRelations, setSaveRelations] = useState(true);
   const [busy, setBusy] = useState(false);
@@ -70,7 +71,13 @@ export function CreateCalendarTab() {
       setError("Set Base URL in the connection card above.");
       return;
     }
-    if (!localOnly) configureBlazeoFromEffective(effective);
+    if (!localOnly) {
+      configureBlazeoFromEffective(effective);
+      ensureBlazeoHttpReady({
+        baseUrl: effective.baseUrl,
+        ...(effective.consumer ? { consumer: effective.consumer } : {}),
+      });
+    }
 
     const hasRelations = (payload.members?.length ?? 0) > 0 || (payload.openingHours?.length ?? 0) > 0;
     const useRelations = saveRelations && hasRelations && !localOnly;
@@ -78,10 +85,20 @@ export function CreateCalendarTab() {
     setBusy(true);
     try {
       const result = useRelations
-        ? await createCalendarWithRelationsAsync(payload, { localOnly })
-        : await createCalendarAsync(payload, { localOnly });
+        ? await createCalendarWithRelationsAsync(payload, {
+            localOnly,
+            ...connectionOpts,
+            baseUrl: effective.baseUrl,
+            ...(effective.consumer ? { consumer: effective.consumer } : {}),
+          })
+        : await createCalendarAsync(payload, {
+            localOnly,
+            ...connectionOpts,
+            baseUrl: effective.baseUrl,
+            ...(effective.consumer ? { consumer: effective.consumer } : {}),
+          });
       setOutput(JSON.stringify(result.ok ? getSnapshot(result.calendar) : result, null, 2));
-      if (!result.ok) setError(result.error);
+      if (!result.ok) setError(mapBlazeoDemoError(result.error));
     } finally {
       setBusy(false);
     }

package/sample/src/EventTab.jsx

@@ -2,6 +2,7 @@ import { useMemo, useState } from "react";
 import {
   cancelAppointmentEventAsync,
   createAppointmentEventAsync,
+  ensureBlazeoHttpReady,
   EventModel,
   rescheduleAppointmentEventAsync,
 } from "appointment-client";
@@ -10,6 +11,7 @@ import {
   configureBlazeoFromEffective,
   useBlazeoConnection,
 } from "./BlazeoConnectionSettings.jsx";
+import { mapBlazeoDemoError } from "./blazeoDemoError.js";
 
 function getExampleCreatePayload() {
   const start = new Date();
@@ -75,7 +77,7 @@ function safeJsonParse(text, fallback) {
 }
 
 export function EventTab() {
-  const { effective } = useBlazeoConnection();
+  const { effective, connectionOpts } = useBlazeoConnection();
   const [offsetMinutes, setOffsetMinutes] = useState(-new Date().getTimezoneOffset());
   const [createJson, setCreateJson] = useState(() =>
     JSON.stringify(getExampleCreatePayload(), null, 2)
@@ -118,6 +120,7 @@ export function EventTab() {
   const [output, setOutput] = useState("");
 
   const opts = useMemo(() => ({ offsetMinutes: Number(offsetMinutes) || 0 }), [offsetMinutes]);
+  const eventOpts = useMemo(() => ({ ...opts, ...connectionOpts }), [opts, connectionOpts]);
 
   function ensureBase() {
     if (!effective.baseUrl) {
@@ -133,6 +136,10 @@ export function EventTab() {
     setOutput("");
     if (!ensureBase()) return;
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
     let payload;
     try {
       payload = JSON.parse(createJson);
@@ -142,9 +149,9 @@ export function EventTab() {
     }
     setBusy(true);
     try {
-      const result = await createAppointmentEventAsync(payload, opts);
+      const result = await createAppointmentEventAsync(payload, eventOpts);
       setOutput(resultToJson(result));
-      if (!result.ok) setError(result.error);
+      if (!result.ok) setError(mapBlazeoDemoError(result.error));
     } finally {
       setBusy(false);
     }
@@ -156,6 +163,10 @@ export function EventTab() {
     setOutput("");
     if (!ensureBase()) return;
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
     let payload;
     try {
       payload = JSON.parse(rescheduleJson);
@@ -165,9 +176,9 @@ export function EventTab() {
     }
     setBusy(true);
     try {
-      const result = await rescheduleAppointmentEventAsync(payload, opts);
+      const result = await rescheduleAppointmentEventAsync(payload, eventOpts);
       setOutput(resultToJson(result));
-      if (!result.ok) setError(result.error);
+      if (!result.ok) setError(mapBlazeoDemoError(result.error));
     } finally {
       setBusy(false);
     }
@@ -181,11 +192,19 @@ export function EventTab() {
     if (!id) return setError("Enter Blazeo event id to cancel.");
     if (!ensureBase()) return;
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
     setBusy(true);
     try {
-      const result = await cancelAppointmentEventAsync(id, {});
+      const result = await cancelAppointmentEventAsync(id, {
+        ...connectionOpts,
+        baseUrl: effective.baseUrl,
+        ...(effective.consumer ? { consumer: effective.consumer } : {}),
+      });
       setOutput(JSON.stringify(result, null, 2));
-      if (!result.ok) setError(result.error);
+      if (!result.ok) setError(mapBlazeoDemoError(result.error));
     } finally {
       setBusy(false);
     }
@@ -201,6 +220,10 @@ export function EventTab() {
     if (!searchTo) return setError("Pick end date.");
     if (!ensureBase()) return;
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
 
     const optsFromJson = safeJsonParse(searchFiltersJson, {});
     const startDateFrom = new Date(`${searchFrom}T00:00:00.000Z`).toISOString();
@@ -221,7 +244,7 @@ export function EventTab() {
       const totalCount = res?.totalCount ?? events.length;
       setOutput(JSON.stringify({ totalCount, events }, null, 2));
     } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
+      setError(mapBlazeoDemoError(err instanceof Error ? err.message : String(err)));
     } finally {
       setBusy(false);
     }

package/sample/src/FetchCalendarTab.jsx

@@ -2,11 +2,16 @@ import { useMemo, useState } from "react";
 import {
   CalendarModel,
   deleteCalendarAsync,
+  ensureBlazeoHttpReady,
   fetchCalendarDetails,
   updateCalendarAsync,
 } from "appointment-client";
 import { getSnapshot, isStateTreeNode } from "mobx-state-tree";
-import { configureBlazeoFromEffective, useBlazeoConnection } from "./BlazeoConnectionSettings.jsx";
+import {
+  configureBlazeoFromEffective,
+  useBlazeoConnection,
+} from "./BlazeoConnectionSettings.jsx";
+import { mapBlazeoDemoError } from "./blazeoDemoError.js";
 import { getExampleCalendarBOInput } from "./CreateCalendarTab.jsx";
 
 function pick(row, ...keys) {
@@ -32,7 +37,7 @@ function explainFetchFailure(err, configuredBaseUrl) {
     msg === "Failed to fetch" ||
     msg === "Load failed" ||
     (err instanceof TypeError && (/fetch/i.test(msg) || /network/i.test(msg)));
-  if (!isNetwork) return msg;
+  if (!isNetwork) return mapBlazeoDemoError(msg);
 
   const isRemote =
     configuredBaseUrl &&
@@ -54,6 +59,7 @@ function explainFetchFailure(err, configuredBaseUrl) {
 
 /** Opening hours list from `calendarView`, embedded `calendar.openingHours`, or legacy `openingHours`. */
 function pickOpeningHoursListFromBundle(parsed) {
+  if (Array.isArray(parsed?.openingHours)) return parsed.openingHours;
   const fromView = parsed?.calendarView?.openingHours;
   if (Array.isArray(fromView) && fromView.length > 0) return fromView;
   const fromCal = parsed?.calendar?.openingHours;
@@ -177,7 +183,7 @@ function calendarSnapshotToUpdatePayload(snap) {
 }
 
 export function FetchCalendarTab() {
-  const { effective } = useBlazeoConnection();
+  const { effective, connectionOpts } = useBlazeoConnection();
   const [calendarId, setCalendarId] = useState("");
   const [companyKey, setCompanyKey] = useState("");
   const [busy, setBusy] = useState(false);
@@ -216,52 +222,48 @@ export function FetchCalendarTab() {
     }
     if (!ensureBaseConfigured()) return;
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
 
     setBusy(true);
     try {
-      const details = await fetchCalendarDetails(id);
+      const details = await fetchCalendarDetails(id, {
+        ...connectionOpts,
+        baseUrl: effective.baseUrl,
+        ...(effective.consumer ? { consumer: effective.consumer } : {}),
+      });
+
+      const meta = details?._meta ?? details?.meta;
+      if (meta && !meta.ok && meta.reason === "missing_base_url") {
+        setError(mapBlazeoDemoError(meta.detail ?? ""));
+        return;
+      }
 
-      if (details.cal == null) {
+      if (!details) {
+        ensureBlazeoHttpReady({
+          baseUrl: effective.baseUrl,
+          ...(effective.consumer ? { consumer: effective.consumer } : {}),
+        });
         const raw = await CalendarModel.getRaw(id);
         setNote("CalendarModel.get returned null. Showing CalendarModel.getRaw only.");
         setOutput(toDisplayJson(raw));
         return;
       }
 
-      const snap = getSnapshot(details.cal);
-      setLastFetchUpdatePayload(JSON.stringify(calendarSnapshotToUpdatePayload(snap), null, 2));
-
-      const payload = {
-        calendarView: details.calendarView,
-        calendar: details.calendar,
-        openingHours: details.openingHours,
-        allParticipantOpeningHours: details.allParticipantOpeningHours,
-        openingHoursApiResponse: details.participantOpeningHoursResponse ?? null,
-        participants: (details.participants ?? []).map((p) => (isStateTreeNode(p) ? getSnapshot(p) : p)),
-        participantsInfo: Array.isArray(details.participantsInfo)
-          ? details.participantsInfo.map((p) => (isStateTreeNode(p) ? getSnapshot(p) : p))
-          : details.participantsInfo ?? null,
-        __openingHoursMeta: {
-          fromCalendarGet: details.fromCalendarGet,
-          fromParticipantApi: details.fromParticipantApi,
-          calendarViewUsedAllParticipantOpeningHours: details.meta?.calendarViewUsedAllParticipantOpeningHours,
-          embeddedCount: details.embeddedFromGet?.length ?? 0,
-          resolvedCount: details.openingHours?.length ?? 0,
-        },
-        meta: details.meta,
-      };
-
-      setOutput(toDisplayJson(payload));
-      setNote(
-        (details.calendarView
-          ? "Use `calendarView`: one object (calendar + nested participants with openingHours). "
-          : "") +
-          (details.fromCalendarGet
-          ? "Opening hours: embedded on GET /Calendar/Get; participants from GET /Calendar/Participant/All. Single bundle in output."
-          : details.fromParticipantApi
-            ? "Opening hours: GET /Calendar/Participant/OpeningHours/Get; participants from GET /Calendar/Participant/All. Single bundle in output."
-            : "Calendar loaded; opening hours empty from both embed + participant API; participants from GET /Calendar/Participant/All.")
-      );
+      const snap = details._cal ? getSnapshot(details._cal) : null;
+      if (snap) {
+        setLastFetchUpdatePayload(JSON.stringify(calendarSnapshotToUpdatePayload(snap), null, 2));
+      }
+
+      // If it's the new flat response, just use it directly for output.
+      setOutput(toDisplayJson(details));
+      
+      // We can still try to extract meta for the UI if needed
+      if (meta) {
+        setNote(`Source: ${meta.calendarViewUsedAllParticipantOpeningHours ? "AllParticipantOpeningHours" : "Embedded/ParticipantApi"}`);
+      }
     } catch (err) {
       setError(explainFetchFailure(err, effective.baseUrl));
     } finally {
@@ -282,6 +284,10 @@ export function FetchCalendarTab() {
     }
     if (!ensureBaseConfigured()) return;
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
 
     setBusy(true);
     try {
@@ -298,19 +304,14 @@ export function FetchCalendarTab() {
             const id = c.calendarId ?? String(c.id ?? "");
             if (!id) return { calendar: getSnapshot(c), openingHours: [], meta: { error: "no id" } };
             try {
-              const b = await fetchCalendarDetails(id);
-              return {
-                calendarView: b.calendarView,
-                calendar: b.calendar ?? getSnapshot(c),
-                openingHours: b.openingHours,
-                participants: (b.participants ?? []).map((p) => (isStateTreeNode(p) ? getSnapshot(p) : p)),
-                __openingHoursMeta: {
-                  fromCalendarGet: b.fromCalendarGet,
-                  fromParticipantApi: b.fromParticipantApi,
-                  calendarViewUsedAllParticipantOpeningHours: b.meta?.calendarViewUsedAllParticipantOpeningHours,
-                },
-                meta: b.meta,
-              };
+              // fetchCalendarDetails now returns the flat unified view directly
+              const b = await fetchCalendarDetails(id, {
+                ...connectionOpts,
+                baseUrl: effective.baseUrl,
+                ...(effective.consumer ? { consumer: effective.consumer } : {}),
+              });
+              // b IS the unified calendarView: members/openingHours/participants at top level
+              return b ?? { calendar: getSnapshot(c), openingHours: [], meta: { error: "null response" } };
             } catch (err) {
               return {
                 calendar: getSnapshot(c),
@@ -369,6 +370,10 @@ export function FetchCalendarTab() {
     setMutateOutput("");
     if (!ensureBaseConfigured()) return;
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
     let payload;
     try {
       payload = JSON.parse(updateJson);
@@ -378,7 +383,11 @@ export function FetchCalendarTab() {
     }
     setBusy(true);
     try {
-      const result = await updateCalendarAsync(payload, {});
+      const result = await updateCalendarAsync(payload, {
+        ...connectionOpts,
+        baseUrl: effective.baseUrl,
+        ...(effective.consumer ? { consumer: effective.consumer } : {}),
+      });
       if (result.ok) {
         setMutateNote("updateCalendarAsync → POST /Calendar/Event/Update");
         setMutateOutput(
@@ -392,7 +401,7 @@ export function FetchCalendarTab() {
           )
         );
       } else {
-        setError(result.error);
+        setError(mapBlazeoDemoError(result.error));
         if (result.apiResponse != null) {
           setMutateOutput(JSON.stringify(result.apiResponse, null, 2));
         }
@@ -414,6 +423,10 @@ export function FetchCalendarTab() {
     }
     if (!ensureBaseConfigured()) return;
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
     if (
       !window.confirm(
         `Delete calendar "${id}"?\n\nThis calls GET /Calendar/Remove (cannot be undone on the server).`
@@ -423,12 +436,16 @@ export function FetchCalendarTab() {
     }
     setBusy(true);
     try {
-      const result = await deleteCalendarAsync(id, {});
+      const result = await deleteCalendarAsync(id, {
+        ...connectionOpts,
+        baseUrl: effective.baseUrl,
+        ...(effective.consumer ? { consumer: effective.consumer } : {}),
+      });
       if (result.ok) {
         setMutateNote("deleteCalendarAsync → GET /Calendar/Remove");
         setMutateOutput(JSON.stringify({ calendarId: id, apiResponse: result.apiResponse ?? null }, null, 2));
       } else {
-        setError(result.error);
+        setError(mapBlazeoDemoError(result.error));
         if (result.apiResponse != null) {
           setMutateOutput(JSON.stringify(result.apiResponse, null, 2));
         }
@@ -443,29 +460,29 @@ export function FetchCalendarTab() {
       <div className="card">
         <h2>Fetch calendar · calendarView</h2>
         <p className="muted small">
-          Runs <code>fetchCalendarDetails(calendarId)</code>. JSON field <code>calendarView</code> is first: one object with
-          calendar snapshot fields + <code>members</code> + <code>openingHours</code>, and a **new** <code>participants</code> array
-          where each participant has their own <code>openingHours</code> nested inside.
+          Runs <code>fetchCalendarDetails(calendarId)</code>. The JSON shown below <strong>is</strong> the unified calendar view:
+          one object with calendar snapshot fields + <code>members</code> + <code>openingHours</code>, plus a{" "}
+          <code>participants</code> array where each participant may include nested <code>openingHours</code>. (
+          <code>fetchCalendarBundle(calendarId)</code> returns the same shape.)
         </p>
         <p className="muted small">
           Uses <code>fetchCalendarDetails</code>: legacy <code>openingHours</code> prefers embed on{" "}
           <code>CalendarModel.getRaw</code>, else <code>getParticipantOpeningHours</code>.{" "}
-          <code>calendarView.openingHours</code> prefers <code>getAllParticipantOpeningHours</code> (
+          Unified <code>openingHours</code> prefers <code>getAllParticipantOpeningHours</code> (
           <code>GET /Calendar/Participant/OpeningHours/All/Get</code>) when the API returns rows. Members combine{" "}
           <code>CalendarModel.getParticipants</code> + <code>CalendarModel.getParticipantsInfo</code> (each member may
           include <code>participantInfo</code>).
         </p>
         <p className="muted small">
-          <strong>Single object in code:</strong> <code>fetchCalendarBundle(calendarId)</code> after{" "}
-          <code>initializeAppointmentClient(&#123; baseUrl, consumer &#125;)</code> — same unified shape as{" "}
-          <code>calendarView</code> below. This tab runs <code>fetchCalendarDetails</code> so extra arrays stay visible.
+          <strong>In code:</strong> <code>fetchCalendarBundle(calendarId)</code> (after{" "}
+          <code>initializeAppointmentClient(&#123; baseUrl, consumer &#125;)</code>) is an alias for the same unified fetch;
+          use either alongside explicit <code>baseUrl</code> / <code>consumer</code> options when needed.
         </p>
         <p className="muted small">
           <strong>DevTools Network:</strong> Each fetch fires <code>/Calendar/Get</code> <strong>twice</strong> (
           <code>CalendarModel.get</code> + <code>getRaw</code>). Other calls use different URLs — filter by{" "}
-          <code>Participant</code>, <code>OpeningHours</code>, or <code>GetInfo</code>. Those power{" "}
-          <code>calendarView</code>. If you only see <code>Calendar/Get</code> yet the UI JSON has members/hours,
-          widen the Network filter (&quot;All&quot;) or disable search; if <code>calendarView</code> is empty/missing fields,
+          <code>Participant</code>, <code>OpeningHours</code>, or <code>GetInfo</code>. Those power the unified view. If you only see <code>Calendar/Get</code> yet the UI JSON has members/hours,
+          widen the Network filter (&quot;All&quot;) or disable search; if the unified object is empty/missing fields,
           check the <strong>Console</strong> for errors on the participant/opening-hours requests.
         </p>
         <p className="muted small">
@@ -541,11 +558,18 @@ export function FetchCalendarTab() {
       <div className="card">
         <h2>Fetch calendars by company</h2>
         <p className="muted small">
-          Calls <code>CalendarModel.getByCompany</code> → <code>GET /Calendar/All</code>. If the UI shows{" "}
-          <strong>Failed to fetch</strong> while Base URL points at Azure/production, that is usually{" "}
+          Step 1: <code>CalendarModel.getByCompany</code> → <code>GET /Calendar/All</code> (company key → calendar
+          list). Step 2: for each calendar id, this tab runs the same{" "}
+          <code>fetchCalendarDetails(calendarId)</code> pipeline as <strong>Fetch calendar · calendarView</strong>, so
+          the JSON below is an <strong>array</strong> of unified objects (members, openingHours, participants — same
+          shape as a single fetch). If an id is missing from the list row, that entry falls back to the raw snapshot
+          only.
+        </p>
+        <p className="muted small">
+          If the UI shows <strong>Failed to fetch</strong> while Base URL points at Azure/production, that is usually{" "}
           <strong>CORS</strong>: enable proxy via <code>VITE_DEV_PROXY_TARGET</code> in{" "}
-          <code>sample/.env.development</code> and Base URL <code>http://localhost:5173/blazeo-api</code>{" "}
-          (restart dev server).
+          <code>sample/.env.development</code> and Base URL <code>http://localhost:5173/blazeo-api</code> (restart dev
+          server).
         </p>
         <form onSubmit={handleFetchByCompany} className="form">
           <label className="form__label">

package/sample/src/OpeningHoursTab.jsx

@@ -1,12 +1,13 @@
 import { useState } from "react";
-import { fetchCalendarWithOpeningHours } from "appointment-client";
+import { ensureBlazeoHttpReady, fetchCalendarWithOpeningHours } from "appointment-client";
 import {
   configureBlazeoFromEffective,
   useBlazeoConnection,
 } from "./BlazeoConnectionSettings.jsx";
+import { mapBlazeoDemoError } from "./blazeoDemoError.js";
 
 export function OpeningHoursTab() {
-  const { effective } = useBlazeoConnection();
+  const { effective, connectionOpts } = useBlazeoConnection();
   const [calendarId, setCalendarId] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
@@ -26,12 +27,20 @@ export function OpeningHoursTab() {
       return;
     }
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
     setBusy(true);
     try {
-      const res = await fetchCalendarWithOpeningHours(id);
+      const res = await fetchCalendarWithOpeningHours(id, {
+        ...connectionOpts,
+        baseUrl: effective.baseUrl,
+        ...(effective.consumer ? { consumer: effective.consumer } : {}),
+      });
       setOutput(JSON.stringify(res, null, 2));
     } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
+      setError(mapBlazeoDemoError(err instanceof Error ? err.message : String(err)));
     } finally {
       setBusy(false);
     }

package/sample/src/ParticipantInfoTab.jsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
-import { CalendarParticipantModel } from "appointment-client";
+import { CalendarParticipantModel, ensureBlazeoHttpReady } from "appointment-client";
 import { configureBlazeoFromEffective, useBlazeoConnection } from "./BlazeoConnectionSettings.jsx";
+import { mapBlazeoDemoError } from "./blazeoDemoError.js";
 
 export function ParticipantInfoTab() {
-  const { effective } = useBlazeoConnection();
+  const { effective, connectionOpts } = useBlazeoConnection();
   const [calendarId, setCalendarId] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
@@ -18,12 +19,16 @@ export function ParticipantInfoTab() {
     if (!effective.baseUrl) return setError("Set Base URL in the connection card above.");
 
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
     setBusy(true);
     try {
       const info = await CalendarParticipantModel.getInfoByCalendar(id);
       setOutput(JSON.stringify({ calendarId: id, count: Array.isArray(info) ? info.length : 0, info }, null, 2));
     } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
+      setError(mapBlazeoDemoError(err instanceof Error ? err.message : String(err)));
     } finally {
       setBusy(false);
     }

package/sample/src/ParticipantOpeningHoursTab.jsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
-import { getParticipantOpeningHours } from "appointment-client";
+import { ensureBlazeoHttpReady, getParticipantOpeningHours } from "appointment-client";
 import { configureBlazeoFromEffective, useBlazeoConnection } from "./BlazeoConnectionSettings.jsx";
+import { mapBlazeoDemoError } from "./blazeoDemoError.js";
 
 export function ParticipantOpeningHoursTab() {
-  const { effective } = useBlazeoConnection();
+  const { effective, connectionOpts } = useBlazeoConnection();
   const [calendarId, setCalendarId] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
@@ -18,13 +19,22 @@ export function ParticipantOpeningHoursTab() {
     if (!effective.baseUrl) return setError("Set Base URL in the connection card above.");
 
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
     setBusy(true);
     try {
-      debugger;
-      const result = await getParticipantOpeningHours(id);
-      
+      const result = await getParticipantOpeningHours(id, {
+        ...connectionOpts,
+        baseUrl: effective.baseUrl,
+        ...(effective.consumer ? { consumer: effective.consumer } : {}),
+      });
+
       if (!result.meta.ok) {
-        setError(result.meta.error || `Failed to fetch: ${result.meta.reason}`);
+        setError(
+          mapBlazeoDemoError(result.meta.error || `Failed to fetch: ${result.meta.reason}`)
+        );
         if (result.raw) setOutput(JSON.stringify(result.raw, null, 2));
         return;
       }
@@ -37,7 +47,7 @@ export function ParticipantOpeningHoursTab() {
         meta: result.meta 
       }, null, 2));
     } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
+      setError(mapBlazeoDemoError(err instanceof Error ? err.message : String(err)));
     } finally {
       setBusy(false);
     }

package/sample/src/ParticipantTab.jsx

@@ -1,10 +1,11 @@
 import { useMemo, useState } from "react";
-import { getExampleParticipants, getParticipants } from "appointment-client";
+import { ensureBlazeoHttpReady, getExampleParticipants, getParticipants } from "appointment-client";
 import { getSnapshot, isStateTreeNode } from "mobx-state-tree";
 import {
   configureBlazeoFromEffective,
   useBlazeoConnection,
 } from "./BlazeoConnectionSettings.jsx";
+import { mapBlazeoDemoError } from "./blazeoDemoError.js";
 
 function toDisplayJson(value) {
   if (value == null) return JSON.stringify(value, null, 2);
@@ -20,7 +21,7 @@ function toDisplayJson(value) {
 }
 
 export function ParticipantTab() {
-  const { effective } = useBlazeoConnection();
+  const { effective, connectionOpts } = useBlazeoConnection();
   const example = useMemo(() => getExampleParticipants(), []);
   const [calendarId, setCalendarId] = useState("");
   const [busy, setBusy] = useState(false);
@@ -41,12 +42,20 @@ export function ParticipantTab() {
       return;
     }
     configureBlazeoFromEffective(effective);
+    ensureBlazeoHttpReady({
+      baseUrl: effective.baseUrl,
+      ...(effective.consumer ? { consumer: effective.consumer } : {}),
+    });
     setBusy(true);
     try {
-      const res = await getParticipants(id);
+      const res = await getParticipants(id, {
+        ...connectionOpts,
+        baseUrl: effective.baseUrl,
+        ...(effective.consumer ? { consumer: effective.consumer } : {}),
+      });
       setOutput(toDisplayJson(res));
     } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
+      setError(mapBlazeoDemoError(err instanceof Error ? err.message : String(err)));
     } finally {
       setBusy(false);
     }

package/sample/src/blazeoBootstrap.js

@@ -0,0 +1,30 @@
+/**
+ * Runs once before React mounts. Order:
+ * 1. `blazeoClientDefaults.ts` (via applyBlazeoClientConfig) — optional file defaults
+ * 2. `VITE_BLAZEO_BASE_URL` / `VITE_BLAZEO_CONSUMER` — overrides when set
+ *
+ * Uses {@link pushBlazeoConnection} so calendar-client is configured the same way as the UI card.
+ */
+import { applyBlazeoClientConfig } from "appointment-client";
+import { pushBlazeoConnection } from "./blazeoPushConnection.js";
+
+function normalizeBase(u) {
+  const t = (u ?? "").trim();
+  if (!t) return "";
+  return t.replace(/\/+$/, "");
+}
+
+export function bootstrapBlazeoClient() {
+  debugger;
+  applyBlazeoClientConfig();
+
+  const envBase = normalizeBase(import.meta.env.VITE_BLAZEO_BASE_URL ?? "");
+  const envConsumer = (import.meta.env.VITE_BLAZEO_CONSUMER ?? "").trim();
+
+  if (!envBase) return;
+
+  pushBlazeoConnection({
+    baseUrl: envBase,
+    ...(envConsumer ? { consumer: envConsumer } : {}),
+  });
+}