@jtakeit/kit 0.4.0 → 0.5.2

package/elements/booking.js

@@ -45,6 +45,8 @@
  * says which was taken.
  */
 import { money } from '../lib/money.mjs';
+import { wordsFor } from '../lib/booking/words.mjs';
+import { dressBooking } from './booking-ui.js';
 
 // The words that depend on the kind of business, as the platform says them:
 // its availability answer carries the form's, in every language, the site's
@@ -93,7 +95,9 @@ export function wireBooking(form) {
   form.dataset.jtkWired = '1';
 
   /** @type {Record<string, string>} */
-  const words = JSON.parse(form.dataset.words ?? '{}');
+  // The form's own words under the page's: a form rendered by an older kit
+  // carries none of the newer ones.
+  const words = { ...wordsFor(form.dataset.locale ?? 'en', form.dataset.scale ?? ''), ...JSON.parse(form.dataset.words ?? '{}') };
   // Days or hours. The page's own setting first; the platform's answer,
   // once there is one, wins — an owner may switch without a rebuild.
   let daily = form.dataset.scale === 'daily';
@@ -129,6 +133,24 @@ export function wireBooking(form) {
   /** @type {HTMLElement} */ const hoursField = q('[data-hours-field]');
   /** @type {HTMLElement} */ const partyField = q('[data-party-field]');
   /** @type {HTMLInputElement} */ const day = q('[name=day]');
+  /** @type {HTMLElement | null} */ const ends = q('[data-ends]');
+  // The day's floor is the browser's today, not the build's: `min` was
+  // written when the site was built, and a site built on Friday is read on
+  // Saturday (10 October 2026).
+  {
+    const n = new Date();
+    const today = `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, '0')}-${String(n.getDate()).padStart(2, '0')}`;
+    if (!day.min || day.min < today) day.min = today;
+  }
+  // What each resource does, read off the options before the element
+  // rewrites them from the platform's answers.
+  /** @type {Map<string, Set<string>>} */
+  const does = new Map();
+  for (const option of resource?.options ?? []) {
+    if (option.dataset.does) does.set(option.value, new Set(option.dataset.does.split(',').filter(Boolean)));
+  }
+  /** @type {Set<HTMLInputElement | HTMLOptionElement>} */
+  const offByMe = new Set();
   /** @type {HTMLElement} */ const slots = q('[data-slots]');
   /** @type {HTMLElement} */ const hint = q('[data-times-hint]');
   /** @type {HTMLElement} */ const error = q('[data-booking-error]');
@@ -181,12 +203,24 @@ export function wireBooking(form) {
   const offered = new Map();
   /** @type {Record<string, number>} */ let prices = {};
   /** @type {Record<string, string>} */ let classOf = {};
-  let currency = form.dataset.currency || 'CHF';
+  // The site's, from the page, and then the platform's own answer below: no
+  // sign made up while it is asked (11 October 2026).
+  let currency = form.dataset.currency || '';
 
   /** @type {string | null} */ let chosen = null;
   let zone = '';
   let turnstileToken = '';
 
+  /** The page's own scheme — `color-scheme` on the root — or the browser's. */
+  function turnstileTheme() {
+    const said = form.dataset.turnstileTheme;
+    if (said === 'light' || said === 'dark' || said === 'auto') return said;
+    const scheme = getComputedStyle(document.documentElement).colorScheme || '';
+    if (/\blight\b/.test(scheme) && !/\bdark\b/.test(scheme)) return 'light';
+    if (/\bdark\b/.test(scheme) && !/\blight\b/.test(scheme)) return 'dark';
+    return 'auto';
+  }
+
   // The widget, if this host has one. Asked at runtime so the site carries
   // no key: which widget covers a host is the platform's to decide.
   void fetch(api + 'turnstile', { cache: 'no-store' })
@@ -200,6 +234,12 @@ export function wireBooking(form) {
       script.onload = () => {
         window.turnstile?.render(challenge, {
           sitekey: data.sitekey,
+          // The widget in the page's colours and language, not the
+          // browser's: a light site showed a dark box saying «Успешно» to
+          // a visitor whose browser was dark and Russian (10 October 2026).
+          // `data-turnstile-theme` on the form says otherwise.
+          theme: turnstileTheme(),
+          language: pageLang(),
           callback: (token) => { turnstileToken = token; },
           'expired-callback': () => { turnstileToken = ''; },
         });
@@ -302,11 +342,13 @@ export function wireBooking(form) {
     return midnight ? dayOf(iso, long) : `${dayOf(iso, long)}, ${clock(iso)}`;
   }
 
+  // On a 24-hour clock in every language: the sites are Swiss, German and
+  // Ukrainian, and «11:15 AM» on a Zürich salon's page reads as foreign.
   /** @param {string} iso */
   function clock(iso) {
     try {
       return new Intl.DateTimeFormat(pageLang(), {
-        hour: '2-digit', minute: '2-digit', timeZone: zone || undefined,
+        hour: '2-digit', minute: '2-digit', hourCycle: 'h23', timeZone: zone || undefined,
       }).format(new Date(iso));
     } catch {
       return iso.slice(11, 16);
@@ -430,6 +472,55 @@ export function wireBooking(form) {
     if ([...resource.options].some((o) => o.value === was)) resource.value = was;
   }
 
+  /**
+   * A resource chosen: the services they do not do go grey and come
+   * unticked, with their name on them («not with Noa»); «anyone» brings
+   * them all back. The other direction — a service chosen, the resources
+   * who do not do it — the platform's answer says (`performs`).
+   */
+  function greyByResource() {
+    const who = resource?.value ?? '';
+    const option = resource?.options[resource.selectedIndex];
+    const name = (option?.textContent ?? '').split(' · ')[0].trim();
+    const can = who && !who.startsWith('class:') && !who.startsWith('empty:') && does.has(who) ? does.get(who) : null;
+    let moved = false;
+    for (const box of boxes) {
+      const row = box.closest('.booking__service');
+      const off = can !== null && !can.has(box.value);
+      if (off && !box.disabled) {
+        box.disabled = true;
+        offByMe.add(box);
+        if (box.checked) { box.checked = false; moved = true; }
+      } else if (!off && offByMe.has(box)) {
+        box.disabled = false;
+        offByMe.delete(box);
+      }
+      row?.classList.toggle('is-off', offByMe.has(box));
+      let note = row?.querySelector('.booking__service-off') ?? null;
+      if (offByMe.has(box) && row) {
+        const nameEl = row.querySelector('.booking__service-name');
+        if (!note && nameEl) {
+          note = document.createElement('span');
+          note.className = 'booking__service-off';
+          nameEl.insertAdjacentElement('afterend', note);
+        }
+        if (note) note.textContent = words.notWith.replace('{who}', name.split(' ')[0] || name);
+      } else {
+        note?.remove();
+      }
+    }
+    for (const o of select?.options ?? []) {
+      const off = can !== null && !can.has(o.value);
+      if (off && !o.disabled) { o.disabled = true; offByMe.add(o); }
+      else if (!off && offByMe.has(o)) { o.disabled = false; offByMe.delete(o); }
+    }
+    if (select && select.options[select.selectedIndex]?.disabled) {
+      const next = [...select.options].find((o) => !o.disabled);
+      if (next) { select.value = next.value; moved = true; }
+    }
+    if (moved) showTotal();
+  }
+
   // The resource chosen, if it does not do what is asked: its name, for
   // saying so in place of «nothing free on this day».
   /** @param {{ slug: string; title: string; performs?: boolean }[]} resources */
@@ -467,11 +558,26 @@ export function wireBooking(form) {
     return moved;
   }
 
+  // The last answer's choices, so that a form with nothing picked any more
+  // can offer every master again: «not for this choice» is about a choice,
+  // and it went on reading that way after the choice was taken back
+  // (9 October 2026).
+  let lastClasses = [];
+  let lastResources = [];
+
   async function load() {
     const mine = ++asking;
+    // The start picked before this reload: picked again if it is still
+    // offered — a service added, the same time — and said gone if not.
+    const wanted = chosen;
     chosen = null;
     slots.textContent = '';
-    if (!day.value || picked().length === 0) return;
+    if (ends) ends.hidden = true;
+    if (!day.value || picked().length === 0) {
+      hint.textContent = picked().length === 0 ? words.pickService : words.pick;
+      if (lastResources.length > 0) offerChoices(lastClasses, lastResources.map((one) => ({ ...one, performs: true })), []);
+      return;
+    }
     hint.textContent = '…';
 
     const from = new Date(day.value + 'T00:00:00');
@@ -495,7 +601,9 @@ export function wireBooking(form) {
       if (mine !== asking) return;
       const data = await answer.json();
       hear(data.words);
-      offerChoices(data.classes ?? [], data.resources ?? [], data.empty_classes ?? []);
+      lastClasses = data.classes ?? [];
+      lastResources = data.resources ?? [];
+      offerChoices(lastClasses, lastResources, data.empty_classes ?? []);
       if (sayEmptyServices(data.empty_services ?? [])) { void load(); return; }
       zone = data.zone;
       if (typeof data.scale === 'string') daily = data.scale === 'daily';
@@ -528,6 +636,12 @@ export function wireBooking(form) {
         return;
       }
       hint.textContent = '';
+      // A price beside each time only where the times differ in price — a
+      // rate by the hour (wiki/68). Where every time costs the same, the
+      // price is the services' and is said beside them: «09:00 · CHF 95» on
+      // thirty pills is one number read thirty times (11 October 2026).
+      const slotPrices = new Set(data.slots.map((one) => one.costs_minor ?? 0));
+      const pricedByTime = slotPrices.size > 1;
       for (const slot of data.slots) {
         const button = document.createElement('button');
         button.type = 'button';
@@ -538,10 +652,13 @@ export function wireBooking(form) {
           ? slot.ends ? `${dayAndHour(slot.start, false)} — ${dayAndHour(slot.ends, false)}` : dayAndHour(slot.start, false)
           : clock(slot.start);
         // What the booking starting here costs — the platform's number, every
-        // hour by its own row (wiki/68) — beside the time, whenever one came.
-        if (slot.costs_minor > 0) button.textContent += ` · ${money(slot.costs_minor, currency, pageLang())}`;
+        // hour by its own row (wiki/68) — beside the time, where it varies.
+        if (pricedByTime && slot.costs_minor > 0) button.textContent += ` · ${money(slot.costs_minor, currency, pageLang())}`;
+        button.dataset.start = slot.start;
         button.addEventListener('click', () => {
           chosen = slot.start;
+          if (hint.textContent === words.retime) hint.textContent = '';
+          sayEnds(slot);
           offerQuantity(data.quantity_max ?? 1, (slot.free ?? []).length);
           for (const other of slots.querySelectorAll('.booking__slot')) {
             other.classList.remove('is-chosen');
@@ -554,19 +671,48 @@ export function wireBooking(form) {
         slots.appendChild(button);
       }
       if (stay() && data.slots.length === 1) /** @type {HTMLButtonElement | null} */ (slots.firstElementChild)?.click();
+      else if (wanted) {
+        const same = /** @type {HTMLButtonElement | null} */ (slots.querySelector(`[data-start="${CSS.escape(wanted)}"]`));
+        if (same) same.click();
+        else hint.textContent = words.retime;
+      }
     } catch (err) {
-      hint.textContent = err instanceof Error && err.message ? err.message : words.failed;
+      // The platform's sentence, where it sent one; never a whole 404 page
+      // (the preview's slug missing from the address, 10 October 2026).
+      const said = err instanceof Error ? err.message : '';
+      hint.textContent = said && said.length <= 200 && !/<[a-z!]/i.test(said) ? said : words.failed;
     }
   }
 
+  /**
+   * When the visit ends — the platform's own `ends`, said under the times:
+   * «Until about 10:45 · 1 h 15 min». Nothing by the day, which says its
+   * days on the pill.
+   * @param {{ start: string; ends?: string }} slot
+   */
+  function sayEnds(slot) {
+    if (!ends || daily || !slot.ends) return;
+    const minutes = Math.round((new Date(slot.ends).getTime() - new Date(slot.start).getTime()) / 60000);
+    if (!(minutes > 0)) return;
+    ends.dataset.clock = clock(slot.ends);
+    ends.dataset.length = lasting(minutes, words);
+    ends.textContent = `${words.until.replace('{time}', ends.dataset.clock)} · ${ends.dataset.length}`;
+    ends.hidden = false;
+  }
+
   select?.addEventListener('change', () => { fitHours(); void load(); });
   hours.addEventListener('change', () => void load());
+  // The look — the steps, the week, the parts of the day, the drawn choice
+  // — over the form, where the form asks for it.
+  if (form.dataset.ui) dressBooking(form, words);
   for (const box of boxes) box.addEventListener('change', () => { showTotal(); void load(); });
-  resource?.addEventListener('change', () => void load());
+  resource?.addEventListener('change', () => { greyByResource(); void load(); });
+  greyByResource();
   // A new first date keeps the stay's length: five nights from the 10th
   // become five nights from the 12th, not whatever the old «until» leaves.
   let lastDay = day.value;
   day.addEventListener('change', () => {
+    chosen = null; // a new day starts clean
     if (lastDay && back.value && day.value) back.value = plusDays(day.value, daysBetween(lastDay, back.value));
     lastDay = day.value;
     fitBack();
@@ -657,12 +803,37 @@ export function wireBooking(form) {
     }
     if (what) {
       /** @type {HTMLElement} */ const line = q('[data-done-what]');
-      line.textContent = words.took.replace('{what}', what);
+      // A person by name is «With Noa»; a class or a group is what was taken.
+      const byName = !made.class && !(made.group && made.group.quantity > 1) && resourceChosen();
+      line.textContent = byName ? words.withNamed.replace('{who}', what) : words.took.replace('{what}', what);
       line.hidden = false;
     }
 
     /** @type {HTMLAnchorElement} */ const manage = q('[data-manage]');
     if (made.manage_path) { manage.href = made.manage_path; manage.textContent = words.manage; manage.hidden = false; }
+    // The link is the booking's only key: shown whole, with a way to copy
+    // it and a sentence saying so, where the form has the box for it.
+    /** @type {HTMLElement | null} */ const keep = q('[data-keep]');
+    if (keep && made.manage_path) {
+      const href = new URL(made.manage_path, window.location.href).href;
+      /** @type {HTMLInputElement} */ const link = q('[data-keep-link]');
+      /** @type {HTMLButtonElement} */ const copy = q('[data-keep-copy]');
+      /** @type {HTMLAnchorElement} */ const open = q('[data-keep-open]');
+      q('[data-keep-note]').textContent = words.keep;
+      link.value = href;
+      link.setAttribute('aria-label', words.manage);
+      link.addEventListener('focus', () => link.select());
+      copy.textContent = words.copy;
+      copy.addEventListener('click', async () => {
+        try { await navigator.clipboard.writeText(href); } catch { link.select(); document.execCommand('copy'); }
+        copy.textContent = words.copied;
+        setTimeout(() => { copy.textContent = words.copy; }, 1600);
+      });
+      open.href = href;
+      open.textContent = words.open;
+      keep.hidden = false;
+      manage.hidden = true;
+    }
     /** @type {HTMLAnchorElement} */ const tg = q('[data-telegram]');
     if (made.telegram_url) { tg.href = made.telegram_url; tg.textContent = words.telegram; tg.hidden = false; }
 

package/elements/writing.js

@@ -0,0 +1,193 @@
+/**
+ * The page's own card: where the site is, bottom right, on the dev server
+ * only (jtakeit-core, wiki/73 · §7).
+ *
+ * A scaffold just made is an empty page, and a developer looking at
+ * localhost while the agent writes sees nothing of what is happening. This
+ * card says it on the page itself: the seven phases the panel's «What the
+ * agent is doing» shows, by the same rules (lib/phases.mjs), and — through
+ * the dev session — the steps of the panel's setting up the developer can
+ * take meanwhile. It reads `/_jtk/state.json` from the dev server, its own
+ * origin, every three seconds; nothing crosses an origin and nothing is
+ * declared. The scaffold's integration puts it on every page under `astro
+ * dev` and on none of a build.
+ *
+ * Collapsed, it is a pill with the phase; a press opens it; the choice is
+ * remembered in this browser.
+ */
+import { PHASES, PHASE_NAMES, phasesOf, sayPhase, meanwhile } from '../lib/phases.mjs';
+
+const STORE = 'jtk-writing:collapsed';
+
+const CSS = `
+:host{position:fixed;right:16px;bottom:16px;z-index:2147483000;font:13px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;
+  --bg:#fbfaf7;--ink:#1d1b17;--ink2:#3f3b33;--muted:#6b665c;--faint:#9b958a;--line:#e6e1d6;--line2:#d8d2c4;--ok:#2f7d5a;--attn:#9a6b1c;--shadow:0 12px 36px rgba(30,25,15,.16),0 2px 6px rgba(30,25,15,.08)}
+@media (prefers-color-scheme:dark){:host{--bg:#1c1b18;--ink:#f1ede5;--ink2:#d9d3c7;--muted:#a8a295;--faint:#716c62;--line:#33302a;--line2:#443f36;--ok:#5bb38a;--attn:#d4a24a;--shadow:0 12px 36px rgba(0,0,0,.5)}}
+*{box-sizing:border-box;margin:0;padding:0}
+button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
+a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
+a:hover{text-decoration-color:var(--ink)}
+.pill{display:flex;align-items:center;gap:10px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:9px 14px 9px 12px;box-shadow:var(--shadow);transition:transform .18s ease}
+.pill:hover{transform:translateY(-1px)}
+.mini{display:flex;gap:3px}.mini i{display:block;width:7px;height:7px;border-radius:999px;background:var(--line2)}
+.pill .dev{font-size:10px;color:var(--faint);margin-left:2px}
+.devnote{margin-top:8px;color:var(--faint);font-size:10.5px}
+.card{width:min(372px,calc(100vw - 32px));background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px 16px 12px}
+.card.enter{animation:in .22s cubic-bezier(.22,.61,.36,1)}
+@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
+.head{display:flex;align-items:baseline;gap:10px}.title{font-weight:600;font-size:14px}.count{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}
+.hide{color:var(--faint);line-height:1;padding:2px 4px;border-radius:6px;margin-right:-4px}.hide:hover{color:var(--ink);background:var(--line)}
+.strip{display:flex;gap:4px;margin-top:12px;list-style:none}.seg{flex:1;height:5px;border-radius:999px;background:var(--line2)}
+.seg.done,.mini i.done{background:var(--ok)}.seg.current,.mini i.current{background:var(--attn)}.seg.current{animation:pulse 2.4s ease-in-out infinite}
+.seg.unseen{background:transparent;border:1px solid var(--line2)}
+@keyframes pulse{50%{opacity:.45}}@media (prefers-reduced-motion:reduce){.seg.current,.card.enter{animation:none}}
+.names{display:flex;gap:4px;margin-top:6px}.names span{flex:1;min-width:0;font-size:10px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.names .current{color:var(--ink);font-weight:600}.names .done{color:var(--muted)}
+.say{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-weight:600;font-size:13.5px;line-height:1.35}.say i{flex:none;width:8px;height:8px;border-radius:999px;background:var(--attn);margin-top:5px}
+.todo{list-style:none;margin:6px 0 0 17px;color:var(--muted);font-size:12.5px}.todo li+li{margin-top:2px}
+.rule{height:1px;background:var(--line);margin:12px 0 10px}
+.label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
+.steps{list-style:none;margin-top:6px}.steps li{display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:var(--ink2)}.steps li+li{margin-top:3px}
+.steps .o{flex:none;width:12px;height:12px;border-radius:999px;border:1.5px solid var(--line2);transform:translateY(1.5px)}
+.steps .done{color:var(--faint);text-decoration:line-through}.steps .done .o{border-color:var(--ok);background:var(--ok)}
+.note{margin-top:6px;color:var(--muted);font-size:12.5px}code{font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--line);padding:1px 5px;border-radius:5px}
+.panel{display:inline-block;margin-top:8px;font-size:12.5px}
+.foot{margin-top:10px;color:var(--faint);font-size:11px}
+`;
+
+const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+
+function ago(iso) {
+  const ms = Date.now() - new Date(iso).getTime();
+  if (!Number.isFinite(ms) || ms < 0) return 'just now';
+  const m = Math.round(ms / 60000);
+  if (m < 1) return 'just now';
+  if (m < 60) return `${m} min ago`;
+  const h = Math.round(m / 60);
+  return h < 24 ? `${h} h ago` : `${Math.round(h / 24)} d ago`;
+}
+
+function until(iso) {
+  const at = new Date(iso);
+  return Number.isNaN(at.getTime()) ? '' : at.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+class JtkWriting extends HTMLElement {
+  constructor() {
+    super();
+    this.state = null;
+    this.failed = false;
+    this.timer = 0;
+    // What is on the page now: a poll that changes nothing redraws nothing,
+    // so the card does not blink every three seconds — and the entrance
+    // animation plays on a press, not on every reading.
+    this.shown = '';
+    this.enter = false;
+    let collapsed = false;
+    try { collapsed = localStorage.getItem(STORE) === '1'; } catch { /* a browser without storage shows it open */ }
+    this.collapsed = collapsed;
+  }
+
+  connectedCallback() {
+    const root = this.attachShadow({ mode: 'open' });
+    const style = document.createElement('style');
+    style.textContent = CSS;
+    this.box = document.createElement('div');
+    root.append(style, this.box);
+    root.addEventListener('click', (event) => {
+      const target = event.target instanceof Element ? event.target.closest('[data-toggle]') : null;
+      if (!target) return;
+      this.collapsed = !this.collapsed;
+      this.enter = !this.collapsed;
+      try { localStorage.setItem(STORE, this.collapsed ? '1' : '0'); } catch { /* fine */ }
+      this.render();
+    });
+    this.render();
+    this.poll();
+  }
+
+  disconnectedCallback() { clearTimeout(this.timer); }
+
+  async poll() {
+    try {
+      const answer = await fetch('/_jtk/state.json', { cache: 'no-store' });
+      if (!answer.ok) throw new Error(`the dev server answered ${answer.status}`);
+      this.state = await answer.json();
+      this.failed = false;
+    } catch {
+      this.failed = true;
+    }
+    this.render();
+    this.timer = setTimeout(() => this.poll(), this.failed ? 30000 : 3000);
+  }
+
+  render() {
+    const progress = this.state?.progress ?? null;
+    const platform = this.state?.platform ?? null;
+    const connected = platform !== null && platform.connected === true;
+    const half = connected && platform.error === undefined ? platform : null;
+    const where = phasesOf(progress, half);
+    const n = where.index + 1;
+
+    if (this.collapsed) {
+      this.show(`<button class="pill" data-toggle aria-expanded="false" aria-label="Where the site is: phase ${n} of 7">
+        <span class="mini">${where.phases.map((p) => `<i class="${p.state}"></i>`).join('')}</span>
+        <span>Being written · ${n} of 7</span><span class="dev">dev only</span></button>`);
+      return;
+    }
+
+    const say = sayPhase(where, progress, half);
+    const todo = progress?.missing ?? [];
+    const steps = meanwhile(half);
+    const stepsHTML = half
+      ? (steps.open.length + steps.done.length === 0
+          ? `<p class="note">Nothing left in the panel.</p>`
+          : `<ul class="steps">${[...steps.open, ...steps.done].map((s) =>
+              `<li class="${s.done ? 'done' : ''}"><i class="o"></i><span>${esc(s.name)}</span></li>`).join('')}</ul>`)
+        + (half.panel ? `<a class="panel" href="${esc(half.panel)}" target="_blank" rel="noopener">Open the panel ↗</a>` : '')
+      : connected
+        ? `<p class="note">The platform could not be read: ${esc(platform.error)}</p>`
+        : `<p class="note">Not connected to the platform yet — in the working tree: <code>npx jtkit session &lt;session_id&gt; &lt;watch_key&gt;</code>, both from the session's answer.</p>`;
+
+    const foot = [
+      this.failed ? 'the dev server did not answer' : progress?.changedAt ? `read from the files, changed ${ago(progress.changedAt)}` : 'read from the files',
+      half?.until ? `platform through the session until ${until(half.until)}` : '',
+    ].filter(Boolean).join(' · ');
+
+    this.show(`<section class="card${this.enter ? ' enter' : ''}" aria-label="Where the site is">
+      <div class="head"><span class="title">What the agent is doing</span><span class="count">phase ${n} of 7</span><button class="hide" data-toggle aria-label="Collapse">–</button></div>
+      <ol class="strip" aria-label="The seven phases">${where.phases.map((p, i) => `<li class="seg ${p.state}" title="${i + 1}. ${PHASE_NAMES[p.key]}"></li>`).join('')}</ol>
+      <div class="names" aria-hidden="true">${where.phases.map((p, i) => `<span class="${p.state}">${i + 1}. ${PHASE_NAMES[p.key]}</span>`).join('')}</div>
+      <p class="say"><i></i><span>${esc(say)}</span></p>
+      ${todo.length > 0 && where.current !== 'preview'
+        ? `<ul class="todo">${todo.slice(0, 4).map((line) => `<li>${esc(line)}</li>`).join('')}${todo.length > 4 ? `<li>+ ${todo.length - 4} more — <code>jtkit progress</code></li>` : ''}</ul>`
+        : ''}
+      <div class="rule"></div>
+      <p class="label">Meanwhile, in the panel</p>
+      ${stepsHTML}
+      <p class="foot">${esc(foot)}</p>
+      <p class="devnote">Shown on the dev server only, while the site is being written — never in a build.</p>
+    </section>`);
+  }
+
+  /** Put this on the page, unless it is what is there already. */
+  show(html) {
+    const key = html.replace(' enter', '');
+    if (key === this.shown) return;
+    this.shown = key;
+    this.box.innerHTML = html;
+    this.enter = false;
+  }
+}
+
+if (!customElements.get('jtk-writing')) customElements.define('jtk-writing', JtkWriting);
+
+function mount() {
+  if (document.querySelector('jtk-writing')) return;
+  document.body.append(document.createElement('jtk-writing'));
+}
+if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', mount, { once: true });
+else mount();
+// Astro's view transitions swap the body: put it back.
+document.addEventListener('astro:page-load', mount);
+
+export { JtkWriting, PHASES };

package/lib/booking/parts.mjs

@@ -0,0 +1,63 @@
+/**
+ * The arithmetic behind the form's look, kept pure so it can be tested
+ * without a document: which part of the day an hour is, which parts a set
+ * of times make, and a clock read on 24 hours.
+ */
+
+/** «09:15 AM» as «09:15»; «21:00» or anything else as it was. */
+export function to24(text) {
+  return String(text ?? '').replace(/\b(\d{1,2}):(\d{2})\s*([AP]M)\b/gi, (_, h, mm, half) => {
+    let hour = Number(h);
+    if (half.toUpperCase() === 'PM' && hour < 12) hour += 12;
+    if (half.toUpperCase() === 'AM' && hour === 12) hour = 0;
+    return `${String(hour).padStart(2, '0')}:${mm}`;
+  });
+}
+
+/** The three parts of a day, in order. */
+export const PARTS = Object.freeze(['morning', 'afternoon', 'evening']);
+
+/**
+ * Which part of the day an hour is in: before noon the morning, before four
+ * the afternoon, the evening after.
+ * @param {number} hour
+ * @returns {'morning' | 'afternoon' | 'evening'}
+ */
+export function partOfHour(hour) {
+  return hour < 12 ? 'morning' : hour < 16 ? 'afternoon' : 'evening';
+}
+
+/**
+ * The part each of a day's times goes under — by its hour, except that a
+ * part of one or two times joins the part next to it: «Evening 16:00–16:00»
+ * is a tab nobody needs. Fewer than `least` times is small.
+ *
+ * @param {number[]} hours  the hour of each time, in order
+ * @param {number} [least]  how many times make a part of their own
+ * @returns {('morning' | 'afternoon' | 'evening')[]} a part per time
+ */
+export function partsOf(hours, least = 3) {
+  const count = { morning: 0, afternoon: 0, evening: 0 };
+  for (const hour of hours) count[partOfHour(hour)] += 1;
+  const small = (part) => count[part] > 0 && count[part] < least;
+  /** @type {Partial<Record<string, string>>} */
+  const join = {};
+  if (small('evening') && count.afternoon > 0) join.evening = 'afternoon';
+  if (small('morning') && count.afternoon > 0) join.morning = 'afternoon';
+  if (small('afternoon') && !join.evening && !join.morning) join.afternoon = count.morning >= count.evening ? 'morning' : 'evening';
+  return hours.map((hour) => /** @type {'morning' | 'afternoon' | 'evening'} */ (join[partOfHour(hour)] ?? partOfHour(hour)));
+}
+
+/** A day's name in the catalogue's spelling, from a date: `monday`. */
+export const DAY_NAMES = Object.freeze(['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']);
+
+/** `YYYY-MM-DD` of a date, in the browser's own day — never `toISOString`, which is UTC's. */
+export function ymd(d) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+/** The date `YYYY-MM-DD` names, at local midnight; null for anything else. */
+export function parseDay(text) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(text ?? '');
+  return m ? new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3])) : null;
+}

package/lib/booking/render.mjs

@@ -49,6 +49,7 @@ export const SENDS = Object.freeze(['service', 'services', 'resource', 'class',
  * @property {{ day: string, from: number, until: number, costs: number }[]} [rates] a price by the hour of the week instead of `costs`: the list says «from …», and the price is the slot's, printed beside the time
  * @property {string} [per]   `'person'` for a price times the party — a class per place, shoes; the list says so and the running total multiplies
  * @property {string} [group] a heading the services are listed under
+ * @property {string[]} [does] for a resource: the services they perform, by slug — the element greys the others out once they are chosen; empty or absent is everything
  */
 
 /**
@@ -73,6 +74,8 @@ export function priceFrom(one) {
  * @property {string} [api]         where `/api/` is from this page — under the preview it carries a path, so pass the address as your generator writes a root-relative one (Astro's `under('/api/')`)
  * @property {string} [tag]         the element's name around the form, `jtk-booking`; `''` for none
  * @property {Date} [now]           the day the picker starts from; the build's, by default
+ * @property {string[]} [open]      the days the business opens, by name (`monday`…) — the week of days strikes the others out; empty is every day
+ * @property {boolean | string} [ui] the form's look — two steps, the week of days, the times by the part of the day, the drawn choice of whom — on by default; `false` for the plain form, or the ones wanted by name: `'week parts'`
  */
 
 const ESCAPE = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
@@ -103,8 +106,8 @@ function priceSaid(one, currency, lang) {
  */
 export function renderBookingForm(props) {
   const {
-    services, resources = [], locale, daysAhead = 30, combine = false, currency = 'CHF', scale = '', kind = '',
-    api = '/api/', tag = 'jtk-booking', now = new Date(),
+    services, resources = [], locale, daysAhead = 30, combine = false, currency = '', scale = '', kind = '',
+    api = '/api/', tag = 'jtk-booking', now = new Date(), open = [], ui = true,
   } = props;
   if (!Array.isArray(services)) throw new TypeError('renderBookingForm: services is a list of { slug, title }');
   const unsaid = kind !== '' && kind !== 'salon';
@@ -151,7 +154,7 @@ export function renderBookingForm(props) {
       <label class="field__label" for="booking-resource" data-say="resource">${esc(WORDS.resource)}</label>
       <select class="field__input" id="booking-resource" name="resource" data-say-wait>
         <option value="" data-say="any">${esc(WORDS.any)}</option>
-        ${resources.map((one) => `<option value="${esc(one.slug)}">${esc(one.title)}</option>`).join('\n')}
+        ${resources.map((one) => `<option value="${esc(one.slug)}"${Array.isArray(one.does) && one.does.length > 0 ? ` data-does="${esc(one.does.join(','))}"` : ''}>${esc(one.title)}</option>`).join('\n')}
       </select>
     </div>`
     : '';
@@ -162,7 +165,7 @@ export function renderBookingForm(props) {
   // title, which the owner edits on the entry. None is the owner's to edit
   // here, and `jtk catalogue` asked whose all seventeen were on a fresh
   // restaurant (30 September 2026).
-  const form = `<form class="booking${unsaid ? ' booking--unsaid' : ''}" data-booking data-locale="${esc(locale)}" data-currency="${esc(currency)}" data-words="${esc(JSON.stringify(WORDS))}" data-scale="${esc(scale)}" data-api="${esc(api)}" data-sends="${SENDS.join(',')}" novalidate data-jtk-fixed>
+  const form = `<form class="booking${unsaid ? ' booking--unsaid' : ''}" data-booking data-locale="${esc(locale)}" data-currency="${esc(currency)}" data-words="${esc(JSON.stringify(WORDS))}" data-scale="${esc(scale)}" data-api="${esc(api)}" data-sends="${SENDS.join(',')}" data-open="${esc(open.join(','))}"${ui ? ` data-ui="${ui === true ? 'steps week parts select' : esc(ui)}"` : ''} novalidate data-jtk-fixed>
   <noscript><p class="booking__note">${esc(WORDS.noScript)}</p></noscript>
 
   <div class="field">
@@ -201,6 +204,7 @@ export function renderBookingForm(props) {
     <legend class="field__label">${esc(WORDS.time)}</legend>
     <p class="booking__hint" data-times-hint aria-live="polite">${esc(WORDS.pick)}</p>
     <div class="booking__slots" data-slots></div>
+    <p class="booking__ends" data-ends hidden></p>
     <p class="booking__total" data-stay-total hidden></p>
   </fieldset>
 
@@ -231,6 +235,14 @@ export function renderBookingForm(props) {
     <p class="booking__done-line" data-done-line></p>
     <p class="booking__done-when" data-done-when></p>
     <p class="booking__done-when" data-done-what hidden></p>
+    <div class="booking__keep" data-keep hidden>
+      <p class="booking__note" data-keep-note></p>
+      <div class="booking__keep-row">
+        <input class="field__input booking__keep-link" type="text" readonly data-keep-link>
+        <button type="button" class="booking__keep-copy" data-keep-copy></button>
+        <a class="booking__keep-open" data-keep-open></a>
+      </div>
+    </div>
     <p class="booking__note" data-pay-note hidden></p>
     <p class="booking__links">
       <a data-pay hidden></a>