@k2b/cloud 0.35.0 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/cloud",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "description": "Application platform library for independently deployed Hono and SolidJS services behind a dynamic gateway.",
   "license": "AGPL-3.0-or-later",
   "repository": {
@@ -107,7 +107,7 @@
     "@tailwindcss/typography": "0.5.20",
     "@k2b/nessi": "0.18.0",
     "@k2b/ssr": "0.16.0",
-    "@k2b/ui": "0.25.0",
+    "@k2b/ui": "0.26.0",
     "@k2b/stdlib": "0.29.0",
     "@k2b/sync": "7.0.0",
     "@nats-io/jetstream": "3.4.0",

package/src/access/GroupCoverage.tsx

@@ -68,12 +68,13 @@ const firstPage = (coverage: GroupCoverage) => coverage.members.pages()[0];
  * The members toggle beside the group name. Its label never changes, so
  * loading the members moves nothing in the row; the count leads the list.
  */
-export function GroupCoverageToggle(props: { coverage: GroupCoverage; groupName: string }) {
+export function GroupCoverageToggle(props: { coverage: GroupCoverage; groupName: string; disabled?: boolean }) {
   const locale = useLocale();
   const t = () => accessMessages.resolve([locale()]).t;
   return (
     <button
       type="button"
+      disabled={props.disabled}
       aria-expanded={props.coverage.open()}
       aria-controls={props.coverage.panelId}
       // The group name tells several group rows apart.

package/src/access/PermissionEditor.tsx

@@ -1,14 +1,14 @@
 import { mutation } from "@k2b/stdlib/solid";
-import { IconButton, Placeholder, prompts, SelectChip, Tooltip, useLocale } from "@k2b/ui";
-import { createMemo, For, Show } from "solid-js";
-import { createStore } from "solid-js/store";
+import { announce, IconButton, Placeholder, prompts, SelectChip, Tooltip, useLocale } from "@k2b/ui";
+import { createMemo, createSignal, For, onCleanup, Show } from "solid-js";
+import { createStore, reconcile } from "solid-js/store";
 import { CloudAvatar } from "../account/Avatar";
 import type { AccessEntry, PermissionLevel, Principal, ServiceAccountKind } from "../contracts/shared";
 import { groupDisplayName } from "../shared/account-display";
 import { createGroupCoverage, type GroupCoverage, GroupCoveragePanel, GroupCoverageToggle } from "./GroupCoverage";
 import { isManagerEntry } from "./managers";
 import { accessMessages } from "./messages";
-import PrincipalPicker from "./PrincipalPicker";
+import PrincipalPicker, { principalKey } from "./PrincipalPicker";
 import { serviceAccountKindDisplay } from "./service-account-kind";
 
 // ─────────────────────────────────────────────────────────────────────────
@@ -180,6 +180,12 @@ export default function PermissionEditor(props: PermissionEditorProps) {
   // A store keeps each row's identity across level changes, so an expanded member list stays open. It holds
   // copies: store writes go into the objects themselves, and the caller's entries are not the editor's to change.
   const [entries, setEntries] = createStore<AccessEntry[]>(props.initialEntries.map((entry) => ({ ...entry })));
+  const [pending, setPending] = createSignal<string | null>(null);
+  const grantPending = () => pending() !== null;
+  let disposed = false;
+  onCleanup(() => {
+    disposed = true;
+  });
   const canEdit = () => props.canEdit !== false;
   const allowPublic = () => props.allowPublic === true;
   const allowAuthenticated = () => props.allowAuthenticated !== false;
@@ -196,18 +202,38 @@ export default function PermissionEditor(props: PermissionEditorProps) {
     }
   }
 
-  const grantMut = mutation.create({
-    mutation: async (data: {
-      principal: Principal;
-      permission: GrantableLevel;
-      scope: string | undefined;
-      display: { displayName: string; serviceAccountKind?: ServiceAccountKind };
-    }) => props.grantAccess(data.principal, data.permission, data.display, data.scope),
-    onSuccess: (newEntry) => {
-      setEntries(entries.length, { ...newEntry });
-    },
-    onError: (err) => prompts.error(err.message),
-  });
+  const grant = async (principal: Principal, display: { displayName: string; serviceAccountKind?: ServiceAccountKind }) => {
+    if (disposed || grantPending() || updateMut.loading() || revokeMut.loading()) return;
+    const key = principalKey(principal);
+    if (entries.some((entry) => principalKey(entry.principal) === key)) return;
+    const first = allowed(principal)[0];
+    if (!first) return;
+    const id = `pending:${key}`;
+    setPending(id);
+    setEntries(entries.length, {
+      id,
+      principal,
+      permission: first.level,
+      scope: first.scope,
+      createdAt: new Date().toISOString(),
+      ...display,
+    });
+    try {
+      const entry = await props.grantAccess(principal, first.level, display, first.scope);
+      if (disposed) return;
+      const index = entries.findIndex((entry) => entry.id === id);
+      if (index !== -1) setEntries(index, reconcile({ ...entry }));
+      announce(t().accessGranted({ name: display.displayName }));
+    } catch (err) {
+      if (!disposed) setEntries((current) => current.filter((entry) => entry.id !== id));
+      // Prompts are global, so a grant that fails after its dialog closed still says so.
+      if (!(typeof err === "object" && err !== null && "name" in err && err.name === "AbortError")) {
+        prompts.error(err instanceof Error ? err.message : String(err));
+      }
+    } finally {
+      if (!disposed) setPending(null);
+    }
+  };
 
   type LevelChange = { accessId: string; permission: GrantableLevel; scope: string | undefined };
   const updateMut = mutation.create<LevelChange, LevelChange>({
@@ -239,11 +265,12 @@ export default function PermissionEditor(props: PermissionEditorProps) {
     },
     onError: (err) => prompts.error(err.message),
   });
-  const busy = () => grantMut.loading() || updateMut.loading() || revokeMut.loading();
+  const busy = () => grantPending() || updateMut.loading() || revokeMut.loading();
   // The service refuses to remove the last manager; the row says so up front.
   const lastManagerId = createMemo(() => {
     // A grant on part of the resource never manages it.
-    const managers = (props.effectiveEntries?.(entries) ?? entries).filter((entry) => !entry.scope && isManagerEntry(entry));
+    const granted = entries.filter((entry) => entry.id !== pending());
+    const managers = (props.effectiveEntries?.(granted) ?? granted).filter((entry) => !entry.scope && isManagerEntry(entry));
     return managers.length === 1 ? managers[0]!.id : null;
   });
 
@@ -260,6 +287,7 @@ export default function PermissionEditor(props: PermissionEditorProps) {
                 entry={entry}
                 coverage={coverage}
                 canEdit={canEdit()}
+                pending={entry.id === pending()}
                 disabled={busy()}
                 lastManager={entry.id === lastManagerId()}
                 allowed={allowed(entry.principal)}
@@ -288,11 +316,9 @@ export default function PermissionEditor(props: PermissionEditorProps) {
           allowPublic={allowPublic()}
           allowAuthenticated={allowAuthenticated()}
           allowServiceAccounts={props.allowServiceAccounts}
-          disabled={busy()}
-          onSelect={(principal, display) => {
-            const first = allowed(principal)[0];
-            if (first && !busy()) grantMut.mutate({ principal, permission: first.level, scope: first.scope, display });
-          }}
+          readOnly={grantPending()}
+          disabled={updateMut.loading() || revokeMut.loading()}
+          onSelect={(principal, display) => void grant(principal, display)}
         />
       </Show>
     </div>
@@ -307,6 +333,7 @@ function AccessEntryRow(props: {
   entry: AccessEntry;
   canEdit: boolean;
   disabled: boolean;
+  pending?: boolean;
   /** The only entry that manages the resource: it keeps its level and cannot be removed. */
   lastManager: boolean;
   allowed: ResolvedLevel[];
@@ -326,14 +353,14 @@ function AccessEntryRow(props: {
   const manageLabel = () => resolveEntryDisplay("admin", undefined, props.allowed, t()).label;
   const removeLabel = () => (props.lastManager ? t().lastManager({ level: manageLabel() }) : t().remove({ name: displayName() }));
   const isInteractive = () =>
-    props.canEdit && !props.disabled && !props.singlePicker && props.allowed.some((option) => option.key === entryKey());
+    props.canEdit && !props.disabled && !props.pending && !props.singlePicker && props.allowed.some((option) => option.key === entryKey());
 
   const badgeClass =
     "flex min-h-7 items-center gap-1 rounded-full border border-transparent bg-[var(--ui-surface-muted)] px-2.5 py-1 text-xs text-secondary";
 
   const badgeContent = (
     <>
-      <i class={`ti ${display().icon}`} />
+      <i class={props.pending ? "ti ti-loader-2 animate-spin" : `ti ${display().icon}`} />
       <span>{display().label}</span>
       <Show when={isInteractive()}>
         <i class="ti ti-chevron-down text-[10px]" />
@@ -343,7 +370,7 @@ function AccessEntryRow(props: {
 
   return (
     <div>
-      <div class="group/access-row flex items-center gap-2 py-1.5">
+      <div class="group/access-row flex items-center gap-2 py-1.5" aria-busy={props.pending ? "true" : undefined}>
         <Show
           when={props.entry.principal.type === "user"}
           fallback={
@@ -381,7 +408,9 @@ function AccessEntryRow(props: {
           >
             {(label) => <span class="truncate text-xs text-dimmed">({label()})</span>}
           </Show>
-          <Show when={props.coverage}>{(coverage) => <GroupCoverageToggle coverage={coverage()} groupName={displayName()} />}</Show>
+          <Show when={props.coverage}>
+            {(coverage) => <GroupCoverageToggle coverage={coverage()} groupName={displayName()} disabled={props.pending} />}
+          </Show>
         </div>
 
         {/* Permission badge — interactive single-value picker when editable,
@@ -422,7 +451,7 @@ function AccessEntryRow(props: {
               variant="ghost"
               size="xs"
               onClick={props.onRevoke}
-              disabled={props.disabled || props.lastManager}
+              disabled={props.disabled || props.pending || props.lastManager}
               aria-label={t().remove({ name: displayName() })}
               // A disabled button takes no focus and touch has no hover, so the reason also reaches assistive technology.
               aria-description={props.lastManager ? removeLabel() : undefined}

package/src/access/PrincipalPicker.tsx

@@ -33,6 +33,7 @@ export default function PrincipalPicker(props: {
   allowAuthenticated?: boolean;
   allowServiceAccounts?: boolean;
   disabled?: boolean;
+  readOnly?: boolean;
   /** `serviceAccountKind` is set for service accounts so a new row can show the same kind as the result. */
   onSelect: (principal: Principal, display: { displayName: string; serviceAccountKind?: ServiceAccountKind }) => void;
 }) {
@@ -100,6 +101,7 @@ export default function PrincipalPicker(props: {
   return (
     <Combobox
       disabled={props.disabled}
+      readOnly={props.readOnly}
       placeholder={
         props.allowAuthenticated !== false || props.allowPublic
           ? props.allowServiceAccounts

package/src/access/messages.ts

@@ -14,6 +14,7 @@ export const accessMessages = i18n.define({
       publicDescription: "Anyone with the link, including people who are not signed in",
       removeAccessConfirm: ({ name }: { name: string }) => `Remove access for ${name}?`,
       removeAccess: "Remove access",
+      accessGranted: ({ name }: { name: string }) => `Added ${name}`,
       userBoundServiceAccount: "User-bound service account",
       resourceBoundServiceAccount: "Resource-bound service account",
       standaloneServiceAccount: "Service account",
@@ -92,6 +93,7 @@ export const accessMessages = i18n.define({
       publicDescription: "Alle mit dem Link, auch ohne Anmeldung",
       removeAccessConfirm: ({ name }) => `Zugriff für ${name} entfernen?`,
       removeAccess: "Zugriff entfernen",
+      accessGranted: ({ name }) => `${name} hinzugefügt`,
       userBoundServiceAccount: "Benutzergebundenes Dienstkonto",
       resourceBoundServiceAccount: "Ressourcengebundenes Dienstkonto",
       standaloneServiceAccount: "Dienstkonto",

package/src/browser/reload.ts

@@ -9,11 +9,26 @@ import { type ToastHandle, toast } from "@k2b/ui";
  */
 export const AUTOMATIC_RELOAD_WINDOW_MS = 30_000;
 
+let reloadPending = false;
+/** One notice at a time: every deferred reload has the same remedy. */
+let pageChanged: ToastHandle | undefined;
+
+/**
+ * An open modal dialog holds the reload. A modeless window, such as global search moved aside, leaves the page
+ * usable and may stay open for long, so it does not: the page would otherwise stay stale without notice.
+ */
+const modalOpen = () => document.querySelector('dialog[open]:not([aria-modal="false"])') !== null;
+
 const storageKey = (key: string) => `cloud.reload.${key}`;
 
 /**
  * Reloads the page for an automatic reason (a live event, a failed live
  * subscription, a changed view) at most once per `key` and window in this tab.
+ * While a modal dialog is open, it does not reload: once the last one closes,
+ * it shows a notice with a reload action. The person may have confirmed work
+ * in that dialog whose request a reload would cancel, so only they reload.
+ * The call returns `true` in both cases; a dialog that shows live data says
+ * itself that it is stale.
  *
  * Returns `false` without reloading when the same key already reloaded within
  * the window, or when `sessionStorage` is unavailable and a repeat therefore
@@ -22,6 +37,7 @@ const storageKey = (key: string) => `cloud.reload.${key}`;
  * need this guard.
  */
 export const reloadOnce = (key: string, options: { windowMs?: number } = {}): boolean => {
+  if (reloadPending) return true;
   const windowMs = options.windowMs ?? AUTOMATIC_RELOAD_WINDOW_MS;
   const now = Date.now();
   try {
@@ -32,7 +48,20 @@ export const reloadOnce = (key: string, options: { windowMs?: number } = {}): bo
   } catch {
     return false;
   }
-  window.location.reload();
+  if (typeof document === "undefined" || !modalOpen()) {
+    window.location.reload();
+    return true;
+  }
+  reloadPending = true;
+  const observer = new MutationObserver(() => {
+    if (modalOpen()) return;
+    observer.disconnect();
+    reloadPending = false;
+    const t = reloadMessages.resolve([document.documentElement.lang || "en"]).t;
+    pageChanged?.dismiss();
+    pageChanged = toast(t.pageChanged, { duration: 0, action: { label: t.reload, onClick: () => window.location.reload() } });
+  });
+  observer.observe(document.documentElement, { subtree: true, childList: true, attributes: true, attributeFilter: ["open", "aria-modal"] });
   return true;
 };
 
@@ -41,10 +70,12 @@ const reloadMessages = i18n.define({
   messages: {
     en: {
       codeUnavailable: "Part of this page could not load. Reload the page and try again.",
+      pageChanged: "This page changed. Reload it to see the latest version.",
       reload: "Reload",
     },
     de: {
       codeUnavailable: "Ein Teil dieser Seite konnte nicht geladen werden. Lade die Seite neu und versuche es erneut.",
+      pageChanged: "Diese Seite hat sich geändert. Lade sie neu, um den aktuellen Stand zu sehen.",
       reload: "Neu laden",
     },
   },

package/src/services/index.ts

@@ -218,3 +218,11 @@ export type {
   MailPage,
   MailServiceError,
 } from "../contracts/outgoing-mail";
+
+export {
+  NetworkTargetBlockedError,
+  pinnedNetworkLookup,
+  resolvePublicNetworkAddresses,
+  resolveAllowedNetworkAddresses,
+} from "./network-security";
+export type { NetworkLookup, PublicNetworkAddress } from "./network-security";

package/src/services/network-security.ts

@@ -1,6 +1,14 @@
 import { lookup as dnsLookup } from "node:dns/promises";
 import type { LookupFunction } from "node:net";
-import { isUnsafeNetworkAddress, isUnsafeNetworkHostname, normalizeNetworkHostname, parseNetworkAddress } from "../shared/network-address";
+import {
+  EMPTY_NETWORK_ALLOWLIST,
+  isAllowlistedNetworkAddress,
+  isUnsafeNetworkAddress,
+  isUnsafeNetworkHostname,
+  type NetworkAllowlist,
+  normalizeNetworkHostname,
+  parseNetworkAddress,
+} from "../shared/network-address";
 
 export type PublicNetworkAddress = { address: string; family: 4 | 6 };
 export type NetworkLookup = (
@@ -15,12 +23,14 @@ export class NetworkTargetBlockedError extends Error {
   }
 }
 
-export const resolvePublicNetworkAddresses = async (
+export const resolveAllowedNetworkAddresses = async (
   rawHostname: string,
+  allowlist: NetworkAllowlist,
   lookup: NetworkLookup = (hostname) => dnsLookup(hostname, { all: true, verbatim: true }),
 ): Promise<PublicNetworkAddress[]> => {
   const hostname = normalizeNetworkHostname(rawHostname);
-  if (isUnsafeNetworkHostname(rawHostname)) throw new NetworkTargetBlockedError("Network target host is not allowed");
+  const trustedHost = allowlist.hosts.has(hostname);
+  if (!trustedHost && isUnsafeNetworkHostname(rawHostname)) throw new NetworkTargetBlockedError("Network target host is not allowed");
 
   const literal = parseNetworkAddress(rawHostname);
   const addresses = literal ? [literal] : await lookup(hostname, { all: true, verbatim: true });
@@ -33,12 +43,18 @@ export const resolvePublicNetworkAddresses = async (
     if (!literal || literal.family !== entry.family) throw new NetworkTargetBlockedError("Network target returned an invalid address");
     return literal;
   });
-  if (normalized.some((entry) => isUnsafeNetworkAddress(entry.address))) {
+  if (
+    !trustedHost &&
+    normalized.some((entry) => isUnsafeNetworkAddress(entry.address) && !isAllowlistedNetworkAddress(allowlist, entry.address))
+  ) {
     throw new NetworkTargetBlockedError("Network target resolved to a private or reserved address");
   }
   return normalized;
 };
 
+export const resolvePublicNetworkAddresses = (rawHostname: string, lookup?: NetworkLookup): Promise<PublicNetworkAddress[]> =>
+  resolveAllowedNetworkAddresses(rawHostname, EMPTY_NETWORK_ALLOWLIST, lookup);
+
 /** Socket lookup using only addresses already checked by the public resolver. */
 export const pinnedNetworkLookup =
   (addresses: readonly PublicNetworkAddress[]): LookupFunction =>

package/src/shared/network-address.ts

@@ -106,3 +106,74 @@ export const isUnsafeNetworkHostname = (rawHostname: string): boolean => {
     ((endsInNumber(hostname) || hostname.includes(":")) && !parseNetworkAddress(hostname))
   );
 };
+
+/** Operator-owned exact DNS names and canonical IP networks. Never populate from person input. */
+export type NetworkAllowlist = {
+  readonly hosts: ReadonlySet<string>;
+  readonly networks: ReadonlyArray<Readonly<{ address: string; family: 4 | 6; bits: number }>>;
+};
+
+export const EMPTY_NETWORK_ALLOWLIST: NetworkAllowlist = { hosts: new Set(), networks: [] };
+
+export const parseNetworkAllowlist = (entries: readonly string[]): NetworkAllowlist => {
+  const hosts = new Set<string>();
+  const networks: Array<{ address: string; family: 4 | 6; bits: number }> = [];
+  for (const entry of entries) {
+    const invalid = (reason = "expected an exact host name, IP address or CIDR") =>
+      new Error(`Invalid network allowlist entry "${entry}": ${reason}`);
+    const parts = entry.split("/");
+    const raw = parts[0] ?? "";
+    const literal = parseNetworkAddress(raw);
+    if (literal) {
+      // Allowlist entries use strict IP notation, even though URL destinations may use legacy IPv4.
+      if (literal.family === 4 && ipv4ToNumber(raw) === null) throw invalid();
+      if (literal.family === 6 && raw.includes(".") && ipv4ToNumber(raw.replace(/\]$/, "").split(":").at(-1) ?? "") === null)
+        throw invalid();
+      const width = literal.family === 4 ? 32 : 128;
+      if (parts.length > 2 || (parts.length === 2 && !/^(0|[1-9]\d*)$/.test(parts[1] ?? ""))) throw invalid();
+      const bits = parts.length === 2 ? Number(parts[1]) : width;
+      if (bits > width) throw invalid();
+      if (bits === 0) throw invalid("a /0 network allows every address; list the internal hosts or ranges instead");
+      const value = literal.family === 4 ? BigInt(ipv4ToNumber(literal.address)!) : ipv6ToBigInt(literal.address);
+      const shift = BigInt(width - bits);
+      const base = (value >> shift) << shift;
+      if (base !== value) {
+        const address =
+          literal.family === 4
+            ? [24n, 16n, 8n, 0n].map((shift) => Number((base >> shift) & 255n)).join(".")
+            : parseNetworkAddress(
+                Array.from({ length: 8 }, (_, index) => ((base >> BigInt((7 - index) * 16)) & 65535n).toString(16)).join(":"),
+              )!.address;
+        throw invalid(`host bits are set; use ${address}/${bits}`);
+      }
+      networks.push({ ...literal, bits });
+      continue;
+    }
+    const hostname = normalizeNetworkHostname(raw);
+    if (
+      parts.length !== 1 ||
+      endsInNumber(hostname) ||
+      raw.includes(":") ||
+      hostname.length > 253 ||
+      !hostname.split(".").every((label) => /^[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?$/.test(label))
+    )
+      throw invalid();
+    hosts.add(hostname);
+  }
+  return { hosts, networks };
+};
+
+export const isAllowlistedNetworkAddress = (allowlist: NetworkAllowlist, rawAddress: string): boolean => {
+  const literal = parseNetworkAddress(rawAddress);
+  if (!literal) return false;
+  if (literal.family === 6) {
+    const value = ipv6ToBigInt(literal.address);
+    // Only IPv4-mapped IPv6 reaches the embedded IPv4 host directly.
+    if (value >> 32n === 0xffffn) {
+      const ipv4 = [24n, 16n, 8n, 0n].map((shift) => Number((value >> shift) & 255n)).join(".");
+      if (isAllowlistedNetworkAddress(allowlist, ipv4)) return true;
+    }
+    return allowlist.networks.some((network) => network.family === 6 && ipv6InRange(value, ipv6ToBigInt(network.address), network.bits));
+  }
+  return allowlist.networks.some((network) => network.family === 4 && ipv4InRange(literal.address, network.address, network.bits));
+};