@eifi1/ui-kit 0.38.0 → 0.39.0

package/src/billing/checkout-processing.ts

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useEffectEvent, useLayoutEffect, useRef, useSyn
 import { toDate } from "../lib/format";
 import type { DateInput } from "../lib/format";
 import { readStored, removeStored, writeStored } from "../lib/safe-storage";
+import type { PaidPrice } from "./billing-overview";
 import type { BillingStanding } from "./billing-standing";
 
 /**
@@ -43,6 +44,9 @@ export type CheckoutOverview = Pick<BillingStanding, "status" | "in_good_standin
   plan: string;
   source: string;
   current_period_end?: DateInput;
+  /** 0.39 (§15.2.10): what the payer pays — a plan switch moves only this under a grant,
+   *  and keeps `active` without one. Left out or null: nothing paid. */
+  paid?: Pick<PaidPrice, "plan" | "interval"> | null;
 };
 
 /** How long a return keeps the page in "processing" before it trusts the overview. */
@@ -53,9 +57,12 @@ const POLL_EVERY = 4_000;
 const STORAGE_KEY = "eifi1-billing-checkout";
 
 /**
- * What of the overview a completed checkout changes, as one string: the plan (read
- * without case, §12.16), the status, the source, the standing and the period's end (read
- * as an instant, so `…Z` and `…+00:00` agree).
+ * What of the overview a completed checkout — or plan switch — changes, as one string:
+ * the plan (read without case, §12.16), the status, the source, the standing, the
+ * period's end (read as an instant, so `…Z` and `…+00:00` agree) and, since 0.39, the
+ * paid plan and period (`paid`, §15.2.10). A switch keeps `active`, and under a grant
+ * the plan too, so only `paid` shows it landed: one storage key serves the checkout and
+ * the switch.
  */
 export function checkoutFingerprint(o: CheckoutOverview): string {
   const end = toDate(o.current_period_end ?? null);
@@ -65,6 +72,8 @@ export function checkoutFingerprint(o: CheckoutOverview): string {
     o.source,
     String(o.in_good_standing),
     end ? end.toISOString() : "",
+    String(o.paid?.plan ?? "").toLowerCase(),
+    o.paid?.interval ?? "",
   ].join("|");
 }
 
@@ -247,6 +256,11 @@ function claimReturn(store: CheckoutStore): boolean {
  * `payer` is the user's or the company's id: a mark never speaks for another payer.
  * `overview` is what the page shows now; left out, the return waits for `active`. Pass
  * the same `storageKey` as the hook's.
+ *
+ * A plan switch (0.39, §15.2.10) is waited for the same way, under the same key: note
+ * the departure before `POST /billing/plan`, and once it answers put the return marker
+ * on the page's URL yourself (`checkoutReturnUrl`'s `?checkout=done`) — the row follows
+ * by webhook, and the fingerprint's `paid` shows it landed.
  */
 export function noteCheckoutStarted(
   payer: string | number,

package/src/billing/pay-page.ts

@@ -1,21 +1,25 @@
 import type { UiKitLabels } from "../i18n/kit-labels";
-import { checkoutReturnUrl } from "./checkout-return";
 
 /**
- * The kit's pay page (docs/billing-harmonization.md §14.4, decision 19 as amended): a
- * standalone static page that ui-kit ships as `dist/pay/`, and that each app serves on
- * its own pay host, `pay.<app domain>` — a separate origin, approved in Paddle, where
- * Paddle.js shares the origin with nothing: no sign-in, no app code, no storage.
+ * The kit's pay page (docs/billing-harmonization.md §14.4, decision 19 as amended by
+ * §15.2): a standalone static page that ui-kit ships as `dist/pay/`, and that each app
+ * serves on its own pay host, `pay.<app domain>` — a separate origin, approved in Paddle,
+ * where Paddle.js shares the origin with nothing: no sign-in, no app code, no storage.
+ * Since 0.39 every pay page serves ANY app's transaction: it names the app from the
+ * transaction's custom data, from the kit's map {@link PAY_PAGE_APPS}, not from its
+ * domain — Paddle's single default payment link reaches one host for all three apps.
  *
  * Paddle's create-transaction answers `checkout.url`: the pay page's URL plus
  * `?_ptxn=<txn>`, and Paddle.js on that page opens the transaction by itself. The app
  * sends the buyer there with {@link payPageUrl}, which adds the buyer's language; the
  * page maps it to Paddle's checkout locale ({@link paddleLocale}). Everything else the
- * page needs — the client-side token, sandbox or live, the way back — is the app's
- * `pay-config.json`, written at its web build by the `eifi1-pay-page` script.
+ * page needs — the client-side token, sandbox or live, the host's app and the map of
+ * apps with their ways back — is the host's `pay-config.json`, written at its web build
+ * by the `eifi1-pay-page` script.
  *
  * Pure, and React-free: the page's own script (`pay-page/pay.ts`) and that build script
- * bundle this module. The exports below the barrel's four are theirs.
+ * bundle this module. The barrel exports the link's parts and the app map ({@link PAY_PAGE_APPS},
+ * {@link PayPageApp}); the exports marked @internal are theirs.
  */
 
 /** Paddle's two environments: the sandbox's client-side tokens start `test_`, live
@@ -138,6 +142,9 @@ export interface PayPageStrings {
   failed: string;
   /** `billing.payBack`: the buyer closed the checkout. */
   closed: string;
+  /** `billing.payDone` (0.39): paid, for a transaction that names no app the page
+   *  knows — there is no way back to offer. */
+  done: string;
   /** `common.back`: the link to the app's subscription page. */
   back: string;
   /** `legal.links.terms` and `legal.links.privacy`: the footer's links. */
@@ -154,6 +161,7 @@ export function payPageStrings(labels: UiKitLabels): PayPageStrings {
     nothing: labels.billing.payNothing,
     failed: labels.billing.payFailed,
     closed: labels.billing.payBack,
+    done: labels.billing.payDone,
     back: labels.common.back,
     terms: labels.legal.links.terms,
     privacy: labels.legal.links.privacy,
@@ -167,7 +175,45 @@ export function payPageStrings(labels: UiKitLabels): PayPageStrings {
 export const PAY_CONFIG_FILE = "pay-config.json";
 
 /**
- * `pay-config.json`: what the page needs that differs per app and deployment. Read by
+ * One app a pay page serves (docs/billing-harmonization.md §15.2.6): its name, the way
+ * back and its Terms and Privacy. Every pay page knows every app, because Paddle's links
+ * — its single default payment link, a payment-method update from its e-mails — reach
+ * whichever page the account names, whatever app the transaction is for.
+ */
+export interface PayPageApp {
+  /** The app's display name: the footer's line and the page's title. */
+  name: string;
+  /** The app's subscription page. Once paid, the page goes to
+   *  `checkoutReturnUrl(returnUrl)`; "Back" goes here. */
+  returnUrl: string;
+  termsUrl: string;
+  privacyUrl: string;
+}
+
+/** An app's tag: server-kit's `billing_app` pattern, the key of {@link PAY_PAGE_APPS}
+ *  and the `app` of a transaction's custom data (§14.3). */
+const APP_TAG = /^[a-z][a-z0-9_-]{0,63}$/;
+
+/** An app on its site: the name, the Terms and Privacy at `/terms` and `/privacy`, and
+ *  its subscription page. */
+function appAt(name: string, site: string, returnPath: string): PayPageApp {
+  return { name, returnUrl: `${site}${returnPath}`, termsUrl: `${site}/terms`, privacyUrl: `${site}/privacy` };
+}
+
+/**
+ * The apps the kit's pay pages serve, by their `billing_app` tag (§15.2.6) — one source,
+ * so the three pay hosts can't drift. A new app, or a page that moves, is a kit release.
+ * The bin writes it into `pay-config.json`; `--app-url` moves the host's own app to
+ * another site (a local stack, a dev deploy) and `--apps <file>` merges a map over it.
+ */
+export const PAY_PAGE_APPS: Readonly<Record<string, Readonly<PayPageApp>>> = Object.freeze({
+  keksdose: Object.freeze(appAt("Keksdose", "https://keksdose.app", "/settings/subscription")),
+  kastlan: Object.freeze(appAt("kastlan", "https://kastlan.app", "/admin/billing")),
+  kurvenschmiede: Object.freeze(appAt("Kurvenschmiede", "https://kurvenschmiede.app", "/settings/subscription")),
+});
+
+/**
+ * `pay-config.json`: what the page needs that differs per deployment (§15.2.6). Read by
  * the page from its own origin — never from the query, where Paddle's own links (it
  * puts only `_ptxn` there) would lack it and a return URL would be an open redirect on
  * an approved payment domain. @internal
@@ -177,19 +223,19 @@ export interface PayPageConfig {
    *  while billing is off, and the page says `payNothing`. */
   token: string | null;
   environment: PaddleEnvironment | null;
-  /** The app's subscription page. Paddle.js's `successUrl` is
-   *  `checkoutReturnUrl(returnUrl)`; "Back" goes here. */
-  returnUrl: string;
-  appName: string;
-  termsUrl: string;
-  privacyUrl: string;
+  /** The host's own app, a key of `apps`: the page shows it until the checkout loads,
+   *  and its Terms and Privacy stay for a transaction that names no app. */
+  app: string;
+  /** Every app the page serves, by tag. The transaction's `custom_data.app` picks one;
+   *  a return URL only ever comes from here. */
+  apps: Record<string, PayPageApp>;
 }
 
 /** Paddle's client-side token prefixes, per environment. */
 const TOKEN_PREFIX: Readonly<Record<PaddleEnvironment, string>> = { sandbox: "test_", live: "live_" };
 
-/** `https://`, or `http://` on this machine only (`localhost`, `127.0.0.1`, `[::1]`). */
-function isPageUrl(value: unknown): boolean {
+/** `https://`, or `http://` on this machine only (`localhost`, `127.0.0.1`, `[::1]`). @internal */
+export function isPayPageUrl(value: unknown): boolean {
   if (typeof value !== "string") return false;
   let url: URL;
   try {
@@ -201,6 +247,37 @@ function isPageUrl(value: unknown): boolean {
   return url.protocol === "http:" && ["localhost", "127.0.0.1", "[::1]"].includes(url.hostname);
 }
 
+/** Whether `tag` is a tag of `apps`, its own key — never `__proto__` or `constructor`. */
+function hasApp(apps: unknown, tag: unknown): tag is string {
+  return (
+    typeof tag === "string" &&
+    APP_TAG.test(tag) &&
+    typeof apps === "object" &&
+    apps !== null &&
+    Object.prototype.hasOwnProperty.call(apps, tag)
+  );
+}
+
+/**
+ * The app a transaction's custom data names (`custom_data.app`, §14.3), from the page's
+ * map — or undefined for none, or a tag the map doesn't know. @internal
+ */
+export function payPageAppFor(config: Pick<PayPageConfig, "apps">, tag: unknown): PayPageApp | undefined {
+  return hasApp(config.apps, tag) ? config.apps[tag] : undefined;
+}
+
+/** The problems of one app of the map. */
+function appProblems(tag: string, app: unknown): string[] {
+  if (typeof app !== "object" || app === null) return [`apps.${tag} is not an object`];
+  const a = app as Record<string, unknown>;
+  const problems: string[] = [];
+  if (typeof a.name !== "string" || a.name.trim() === "") problems.push(`apps.${tag}.name is missing`);
+  for (const key of ["returnUrl", "termsUrl", "privacyUrl"] as const) {
+    if (!isPayPageUrl(a[key])) problems.push(`apps.${tag}.${key} must be an https:// URL (http:// for localhost only)`);
+  }
+  return problems;
+}
+
 /**
  * What is wrong with a `pay-config.json`, one line each — `[]` when nothing is. The
  * build script refuses to write a file with any (so a wrong pairing fails the build,
@@ -208,8 +285,10 @@ function isPageUrl(value: unknown): boolean {
  *
  * - a token whose prefix disagrees with the environment (`test_` ↔ sandbox, `live_` ↔
  *   live), or a token without an environment;
- * - a return, terms or privacy URL that isn't `https://` (`http://` for localhost only);
- * - no app name. @internal
+ * - an app tag that isn't a `billing_app` tag (`^[a-z][a-z0-9_-]{0,63}$`), an app
+ *   without a name, or a return, terms or privacy URL that isn't `https://` (`http://`
+ *   for localhost only);
+ * - no `app`, or one that isn't in `apps`. @internal
  */
 export function payPageConfigProblems(config: unknown): string[] {
   if (typeof config !== "object" || config === null) return ["the configuration is not an object"];
@@ -233,14 +312,19 @@ export function payPageConfigProblems(config: unknown): string[] {
       );
     }
   }
-  for (const key of ["returnUrl", "termsUrl", "privacyUrl"] as const) {
-    if (!isPageUrl(c[key])) problems.push(`${key} must be an https:// URL (http:// for localhost only)`);
+  const { apps, app } = c;
+  if (typeof apps !== "object" || apps === null || Array.isArray(apps) || Object.keys(apps).length === 0) {
+    problems.push("apps must map each app's tag to its name and URLs");
+  } else {
+    for (const [tag, entry] of Object.entries(apps)) {
+      if (!APP_TAG.test(tag)) problems.push(`apps: ${JSON.stringify(tag)} is not an app tag (a-z, 0-9, _ and -)`);
+      else problems.push(...appProblems(tag, entry));
+    }
+  }
+  if (typeof app !== "string" || app === "") problems.push("app is missing: the host's own app tag");
+  else if (!hasApp(apps, app)) {
+    const known = typeof apps === "object" && apps !== null ? Object.keys(apps).join(", ") : "";
+    problems.push(`app ${JSON.stringify(app)} is not in apps${known ? ` (${known})` : ""}`);
   }
-  if (typeof c.appName !== "string" || c.appName.trim() === "") problems.push("appName is missing");
   return problems;
 }
-
-/** Paddle.js's `successUrl` for a configuration: the way back, `?checkout=done`. @internal */
-export function paySuccessUrl(config: Pick<PayPageConfig, "returnUrl">): string {
-  return checkoutReturnUrl(config.returnUrl);
-}

package/src/billing/plan-switch.tsx

@@ -0,0 +1,201 @@
+import type { KeyboardEvent } from "react";
+
+import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import type { LabelOverride } from "../i18n/kit-labels";
+import { DEFAULT_COMMON_LABELS } from "../i18n/shared-labels";
+import { pluralForm } from "../i18n/plurals";
+import type { PluralForms } from "../i18n/plurals";
+import { formatDate, formatMoney, formatNumber } from "../lib/format";
+import { Button } from "../components/button";
+import { DialogFrame } from "../components/dialog-frame";
+import { Spinner } from "../components/spinner";
+import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
+import { DEFAULT_PLAN_CHANGE_LABELS } from "../admin/plan-change-labels";
+import { useBillingLabels } from "./billing-labels";
+import type { BillingLabels } from "./billing-labels";
+import type { PlanSwitchPreview } from "./billing-overview";
+import { minorToMajor } from "./plan-price";
+import type { BillingInterval } from "./plan-price";
+
+/**
+ * The payer's plan switch (docs/billing-harmonization.md §15.2.10, ui-kit 0.39): built
+ * once in the kits and used by all three apps, instead of Paddle's portal. While a
+ * provider subscription runs, the app sends a `PlanPicker` pick to
+ * `POST /billing/plan/preview` and opens this dialog with the answer; Confirm is the
+ * app's `POST /billing/plan`. Otherwise the pick goes to the checkout, as before.
+ *
+ * The switch is immediate and prorated: an upgrade charges the difference now, a
+ * downgrade credits the unused part to the customer's balance, which Paddle takes off
+ * the next charges. So the payer agrees to a figure — Paddle's preview — and sees the
+ * dimensions over the new plan's limit before agreeing (§3.4: a limit gates creation
+ * only, so the switch is allowed).
+ */
+
+/** One side of a switch: a plan code and its billing period. */
+export interface PlanSwitchSide {
+  plan: string;
+  interval: BillingInterval;
+}
+
+export interface PlanSwitchConfirmProps {
+  open: boolean;
+  /** `false` when the payer dismisses it — Cancel, Escape, the backdrop. Confirm leaves
+   *  it open: close it once the switch answers. */
+  onOpenChange: (open: boolean) => void;
+  /** What the payer pays now: the overview's `paid`. */
+  from: PlanSwitchSide;
+  /** The pick. */
+  to: PlanSwitchSide;
+  /** `POST /billing/plan/preview`'s answer. Undefined while it loads: a spinner, and
+   *  Confirm is held. */
+  preview?: PlanSwitchPreview;
+  /** `POST /billing/plan` is under way: Confirm's spinner, no second press, and Escape
+   *  doesn't close. */
+  pending?: boolean;
+  /** The plan's display name, the app's (§3.1). Default: the code. */
+  planName?: (code: string) => string;
+  /**
+   * The app's word per dimension, for the over-limit lines. A heading's word ("Budgets")
+   * reads "Budgets: 7 of 5" (`billing.limitUsageLine`); its plural forms
+   * (`{ one: "budget", other: "budgets" }`) read "7 of 5 budgets" (`planChange.usageOf`,
+   * the form the limit takes). A dimension without one is named by its key.
+   */
+  dimensionLabels?: Readonly<Record<string, string | PluralForms>>;
+  /** How a usage or limit figure is written. Default: a number in the locale. */
+  formatLimit?: (dimension: string, value: number) => string;
+  /** Confirm: the app's `POST /billing/plan` with `{plan, interval}` of `to`. */
+  onConfirm: () => void;
+  /** The figures' and the date's locale. Default: the provider's. */
+  locale?: string;
+  /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */
+  labels?: LabelOverride<BillingLabels>;
+}
+
+/**
+ * The confirm for a plan switch (§15.2.10): from → to, each with its billing period;
+ * Paddle's preview — "Charged now" (an upgrade) or "Credited towards your next charges"
+ * (a downgrade), and the next charge with its date — in the subscription's currency;
+ * the dimensions over the new plan's limit; and Confirm.
+ *
+ *     const preview = useMutation({ mutationFn: api.previewPlanSwitch });
+ *     <PlanSwitchConfirm
+ *       open={pick !== null}
+ *       onOpenChange={(open) => !open && setPick(null)}
+ *       from={overview.paid}
+ *       to={pick}
+ *       preview={preview.data}
+ *       pending={switching.isPending}
+ *       planName={planName}
+ *       onConfirm={() => switching.mutate(pick)}
+ *     />
+ *
+ * It takes no billing lock (`COMMIT_EXCEPT_BILLING` built in): a read-only payer may
+ * change plan, as they may pay. A demo lock still holds it, as the server's demo guard
+ * does. The kit sends no request.
+ */
+export function PlanSwitchConfirm({
+  open,
+  onOpenChange,
+  from,
+  to,
+  preview,
+  pending = false,
+  planName = (code) => code,
+  dimensionLabels,
+  formatLimit,
+  onConfirm,
+  locale: localeProp,
+  labels: labelsProp,
+}: PlanSwitchConfirmProps) {
+  const labels = useBillingLabels(labelsProp);
+  const planChange = useKitLabels("planChange", DEFAULT_PLAN_CHANGE_LABELS);
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const locale = useKitLocale(localeProp);
+
+  const period = (interval: BillingInterval) => (interval === "year" ? labels.yearly : labels.monthly);
+  const side = (s: PlanSwitchSide) => `${planName(s.plan.toLowerCase())} (${period(s.interval)})`;
+  const money = (minor: number, currency: string) =>
+    formatMoney(minorToMajor(minor, currency), currency, { locale });
+  const figure = (dimension: string, value: number) =>
+    formatLimit ? formatLimit(dimension, value) : formatNumber(value, { locale });
+
+  /** One line per dimension over the new limit, in the word's own sentence. */
+  const overLimit = (p: PlanSwitchPreview): string[] =>
+    (p.over_limit ?? []).flatMap((dimension) => {
+      const limit = p.limits?.[dimension];
+      const used = p.usage?.[dimension];
+      if (limit === null || limit === undefined || used === undefined) return [];
+      const word = dimensionLabels?.[dimension] ?? dimension;
+      return [
+        typeof word === "string"
+          ? labels.limitUsageLine(word, figure(dimension, used), figure(dimension, limit))
+          : planChange.usageOf(figure(dimension, used), figure(dimension, limit), pluralForm(limit, word, locale)),
+      ];
+    });
+
+  const credit = preview !== undefined && preview.now_minor < 0;
+  const lines = preview ? overLimit(preview) : [];
+
+  return (
+    <DialogFrame
+      open={open}
+      title={labels.switchTitle}
+      description={labels.switchFromTo(side(from), side(to))}
+      onClose={() => onOpenChange(false)}
+      onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {
+        if (pending && e.key === "Escape") e.preventDefault();
+      }}
+      aria-busy={preview === undefined || pending || undefined}
+      actions={(close) => (
+        <>
+          <Button variant="secondary" onClick={close} disabled={pending}>
+            {common.cancel}
+          </Button>
+          <Button
+            commit={COMMIT_EXCEPT_BILLING}
+            pending={pending}
+            disabled={preview === undefined}
+            onClick={() => {
+              if (preview !== undefined && !pending) onConfirm();
+            }}
+          >
+            {labels.switchConfirm}
+          </Button>
+        </>
+      )}
+    >
+      {preview === undefined ? (
+        <div className="flex justify-center py-4">
+          <Spinner showLabel />
+        </div>
+      ) : (
+        <>
+          <dl className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-4 gap-y-1 text-sm" data-plan-switch-preview>
+            <dt className="text-secondary">{credit ? labels.switchCredited : labels.switchChargedNow}</dt>
+            <dd className="text-right font-medium tabular-nums" data-now={credit ? "credit" : "charge"}>
+              {money(Math.abs(preview.now_minor), preview.currency)}
+            </dd>
+            {preview.next_billed_at && preview.next_minor != null && (
+              <>
+                <dt className="text-secondary">
+                  {labels.switchNextCharge(formatDate(preview.next_billed_at, "medium", { locale }))}
+                </dt>
+                <dd className="text-right tabular-nums">{money(preview.next_minor, preview.currency)}</dd>
+              </>
+            )}
+          </dl>
+          {lines.length > 0 && (
+            <div className="space-y-1 text-sm" data-plan-switch-over-limit>
+              <p>{planChange.overLimit}</p>
+              <ul className="list-disc space-y-0.5 ps-5 text-secondary">
+                {lines.map((line) => (
+                  <li key={line}>{line}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </>
+      )}
+    </DialogFrame>
+  );
+}

package/src/feedback/feedback-comment-thread.tsx

@@ -1,3 +1,4 @@
+import { useContext } from "react";
 import type { ReactNode } from "react";
 import { EyeOff } from "lucide-react";
 import { Button } from "../components/button";
@@ -9,6 +10,7 @@ import type { FeedbackComment, FeedbackReply } from "./feedback-public-types";
 import { DEFAULT_FEEDBACK_PUBLIC_LABELS } from "./feedback-public-labels";
 import { FEEDBACK_COMMENT_MAX } from "./feedback-record";
 import { useFeedbackRepliesLabels } from "./feedback-replies";
+import { FeedbackRepliesDrawnAboveContext } from "./feedback-replies-context";
 import { ChatComposer, FeedbackThread } from "./feedback-thread";
 import type { FeedbackThreadMessage } from "./feedback-thread";
 import { DEFAULT_FEEDBACK_COMMENTS_LABELS } from "./feedback-thread-parts-labels";
@@ -69,17 +71,24 @@ export { DEFAULT_FEEDBACK_COMMENTS_LABELS };
 /* ── The thread ───────────────────────────────────────────────────────────── */
 
 export interface FeedbackCommentThreadProps {
-  /** The report's replies (§9.7), oldest first. `[]` when it has none. */
-  replies: readonly FeedbackReply[];
+  /** The report's replies (§9.7), oldest first. Left out or `[]`: none.
+   *
+   *  Inside `FeedbackRowDetail`'s `comments` they are dropped (0.38.1): the detail's
+   *  Replies section draws them already, and the thread there is the comments alone —
+   *  so passing them there cannot draw them twice. */
+  replies?: readonly FeedbackReply[];
   /** `GET /feedback/{id}/comments`, oldest first. */
   comments: readonly FeedbackComment[];
   /** The viewer is the app's admin: Hide / Unhide, the hidden text struck through. */
   isAdmin: boolean;
   /** `POST /feedback/{id}/comments`. Return the promise: the box clears when it
-   *  resolves. Left out, no composer. */
+   *  resolves, and keeps the draft when it rejects. A failure is the app's to toast —
+   *  the server's `detail`, else `feedbackToast.commentFailed` (0.38.1). Left out, no
+   *  composer. */
   onComment?: (body: string) => void | Promise<unknown>;
-  /** `PATCH /feedback/{id}/comments/{comment_id} {hidden}` — the admin's. Left out, no
-   *  Hide / Unhide. */
+  /** `PATCH /feedback/{id}/comments/{comment_id} {hidden}` — the admin's. A rejection
+   *  is caught (0.38.1) and is the app's to toast (`feedbackToast.updateFailed`). Left
+   *  out, no Hide / Unhide. */
   onHide?: (comment: FeedbackComment, hidden: boolean) => void | Promise<unknown>;
   /** `DELETE /feedback/{id}/comments/{comment_id}` — the writer's own, after the
    *  confirm. Left out, no Delete. */
@@ -98,13 +107,22 @@ export interface FeedbackCommentThreadProps {
 
 type Entry = { at: number; order: number; message: FeedbackThreadMessage };
 
+/** The admin's Hide / Unhide as a promise — a sync throw or a `void` return included —
+ *  so the click can catch it as Delete's does. */
+const hideComment = async (
+  onHide: NonNullable<FeedbackCommentThreadProps["onHide"]>,
+  comment: FeedbackComment,
+) => {
+  await onHide(comment, !comment.hidden);
+};
+
 const instant = (iso: string) => {
   const ms = Date.parse(iso);
   return Number.isNaN(ms) ? 0 : ms;
 };
 
 export function FeedbackCommentThread({
-  replies,
+  replies: repliesProp = [],
   comments,
   isAdmin,
   onComment,
@@ -120,6 +138,8 @@ export function FeedbackCommentThread({
   const labels = useKitLabels("feedbackComments", DEFAULT_FEEDBACK_COMMENTS_LABELS, labelsProp);
   const anonymous = useKitLabels("feedbackPublic", DEFAULT_FEEDBACK_PUBLIC_LABELS).anonymous;
   const replyLabels = useFeedbackRepliesLabels();
+  const repliesDrawnAbove = useContext(FeedbackRepliesDrawnAboveContext);
+  const replies = repliesDrawnAbove ? [] : repliesProp;
 
   const entries: Entry[] = [];
   replies.forEach((reply, order) => {
@@ -163,7 +183,9 @@ export function FeedbackCommentThread({
           tone="muted"
           size="sm"
           commit={commit}
-          onClick={() => void onHide(comment, !comment.hidden)}
+          // Caught as Delete's is (0.38.1): a rejection is the app's to toast — its
+          // mutation's `onError` — and must not surface as an unhandled one.
+          onClick={() => void hideComment(onHide, comment).catch(() => {})}
         >
           {comment.hidden ? labels.unhide : labels.hide}
         </Button>,

package/src/feedback/feedback-labels.ts

@@ -92,6 +92,17 @@ export interface FeedbackToastLabels {
   /** The Undo landed — `status` is the RESTORED status's label.
    *  de-CH: "Zurück auf „{{status}}“: {{title}}" */
   statusRestored: (status: string, title: string) => string;
+  /** 0.38.1: `POST /feedback/{id}/comments` failed with no `detail` of its own — for
+   *  `FeedbackCommentThread`'s `onComment`. de-CH: "Kommentar konnte nicht gesendet
+   *  werden." */
+  commentFailed: string;
+  /** 0.38.1: `PUT` / `DELETE /feedback/{id}/vote` failed with no `detail` of its own —
+   *  for `FeedbackVoteButton`'s `onVote` (the button rolls back; the app toasts).
+   *  de-CH: "Stimme konnte nicht gespeichert werden." */
+  voteFailed: string;
+  /** 0.38.1: `POST /feedback/{id}/replies` failed with no `detail` of its own — for
+   *  `FeedbackRowDetail`'s `onReply`. de-CH: "Antwort konnte nicht gesendet werden." */
+  replyFailed: string;
 }
 
 export const DEFAULT_FEEDBACK_TOAST_LABELS: FeedbackToastLabels = {
@@ -108,6 +119,9 @@ export const DEFAULT_FEEDBACK_TOAST_LABELS: FeedbackToastLabels = {
   statusChanged: (status, title) => `Set to “${status}”: ${title}`,
   statusUndo: "Undo",
   statusRestored: (status, title) => `Back to “${status}”: ${title}`,
+  commentFailed: "Could not post the comment.",
+  voteFailed: "Could not save your vote.",
+  replyFailed: "Could not send the reply.",
 };
 
 /** `feedbackStatus` resolved: English, then `<UiKitProvider labels>`, then `labels`. For

package/src/feedback/feedback-public-labels.ts

@@ -51,6 +51,9 @@ export interface FeedbackPublicLabels {
   visibleHint: string;
   /** Why the author cannot flip it now: the report is past its open window (§9.3). */
   visibleLocked: string;
+  /** 0.38.1: the pager's "where am I" — `page` counts from 1. The server answers no
+   *  total, so there is no "of N". */
+  page: (page: number) => string;
 }
 
 export const DEFAULT_FEEDBACK_PUBLIC_LABELS: FeedbackPublicLabels = {
@@ -73,4 +76,5 @@ export const DEFAULT_FEEDBACK_PUBLIC_LABELS: FeedbackPublicLabels = {
   visibleToOthers: "Visible to others",
   visibleHint: "Other users see the title and text, never your screenshots or files.",
   visibleLocked: "Only while the report is still open.",
+  page: (page) => `Page ${page}`,
 };