@k2b/cloud 0.42.0 → 0.44.0

package/src/ssr/AppAccessDenied.tsx

@@ -0,0 +1,114 @@
+import { AppWorkspace, ButtonLink, useLocale } from "@k2b/ui";
+import { For, type JSX, Show } from "solid-js";
+import { appAccessMessages } from "../access/app-access-messages";
+import PrincipalAvatar from "../access/PrincipalAvatar";
+import { principalLabel } from "../access/principal-label";
+import type { AppMeta } from "../contracts/app";
+import type { AccessEntry } from "../contracts/shared";
+import { appAccentStyle } from "./app-appearance";
+import Layout from "./Layout";
+import type { LayoutContext } from "./layout-context";
+
+export function AppAccessDeniedContent(props: {
+  app: Pick<AppMeta, "id" | "name" | "icon" | "access" | "appearance">;
+  managers: AccessEntry[];
+  canRepair?: boolean;
+  revoked?: boolean;
+}) {
+  const locale = useLocale(),
+    t = () => appAccessMessages.resolve([locale()]).t;
+  const grants = () => props.app.access?.kind === "grants";
+  // A fixed rule names itself before the contact, so the reader knows why and whom to ask.
+  const rule = () => {
+    const access = props.app.access;
+    if (access?.kind === "noGuests") return t().deniedNoGuests({ name: props.app.name });
+    if (access?.kind !== "roles") return undefined;
+    return access.roles.length === 1 && access.roles[0] === "admin"
+      ? t().deniedAdmins({ name: props.app.name })
+      : t().deniedRoles({ name: props.app.name });
+  };
+  return (
+    <div class="mx-auto mt-8 w-full max-w-[460px] text-left sm:mt-[10vh]">
+      <span
+        class="app-accent-scope app-accent-text k2b-icon-tile mb-4 flex h-12 w-12 items-center justify-center rounded-xl text-[26px]"
+        style={appAccentStyle(props.app.appearance?.accent)}
+        aria-hidden="true"
+      >
+        <i class={props.app.icon} />
+      </span>
+      <h1 class="mb-2 text-[22px] font-semibold">{(props.revoked ? t().revokedTitle : t().deniedTitle)({ name: props.app.name })}</h1>
+      <p class="mb-4 text-[15px] text-secondary">
+        {props.revoked ? (
+          t().revokedDescription
+        ) : props.app.access?.kind === "resources" ? (
+          t().deniedResources
+        ) : grants() ? (
+          t().deniedGrants
+        ) : (
+          <>
+            <Show when={rule()}>{(sentence) => <>{sentence()} </>}</Show>
+            {t().deniedFixed}
+          </>
+        )}
+      </p>
+      {/* A fixed rule's contact is the Cloud administration the sentence already names. */}
+      <Show when={props.revoked || grants()}>
+        <div class="mb-5 flex flex-col gap-2">
+          <For each={props.managers}>
+            {(entry) => (
+              <div class="flex items-center gap-2.5">
+                <PrincipalAvatar entry={entry} label={principalLabel(entry, locale())} />
+                <span>{principalLabel(entry, locale())}</span>
+              </div>
+            )}
+          </For>
+          <Show when={!props.managers.length}>
+            <p class="text-sm">{t().askAdministration}</p>
+          </Show>
+        </div>
+      </Show>
+      <ButtonLink href="/" variant="ghost" style={{ "min-height": "36px", "font-size": "15px" }}>
+        {t().home}
+      </ButtonLink>
+      <Show when={props.canRepair && grants()}>
+        <p class="mt-5 text-[13px] text-dimmed">
+          {t().adminHintBefore}
+          {/* An inline link in the action colour and weight, as the approved denial page shows it. */}
+          <a
+            class="focus-ui whitespace-nowrap rounded-sm font-medium text-[var(--k2b-action)] hover:underline"
+            href={`/admin/apps?app=${encodeURIComponent(props.app.id)}`}
+          >
+            {t().adminHintLink}
+          </a>
+          {t().adminHintAfter}
+        </p>
+      </Show>
+    </div>
+  );
+}
+
+/** The white work surface every application page has; the denial page sits on it like the app it replaces. */
+export function AppAccessDeniedFrame(props: { children: JSX.Element }) {
+  return (
+    <AppWorkspace mobileSurface="flush" class="min-h-0 flex-1" resizable={false}>
+      <AppWorkspace.Content>
+        <AppWorkspace.Main class="p-4 sm:p-6">{props.children}</AppWorkspace.Main>
+      </AppWorkspace.Content>
+    </AppWorkspace>
+  );
+}
+
+export const renderAppAccessDenied =
+  (c: LayoutContext, app: Pick<AppMeta, "id" | "name" | "icon" | "access" | "appearance">, managers: AccessEntry[], canRepair: boolean) =>
+  () => (
+    <Layout c={c} title={[{ title: app.name }]} fullWidth fullPage>
+      <AppAccessDeniedFrame>
+        <AppAccessDeniedContent
+          app={app}
+          managers={managers}
+          canRepair={canRepair}
+          revoked={new URL(c.req.raw.url).searchParams.get("_cloud_access") === "revoked"}
+        />
+      </AppAccessDeniedFrame>
+    </Layout>
+  );

package/src/ssr/AppBadge.tsx

@@ -18,6 +18,20 @@ export const useAppBadgeDescription = (input: () => { endpoint?: string; appId?:
  * takes layout space, so appearing, growing to "99+", or clearing moves
  * nothing. Decorative: the link carries the description.
  */
+/**
+ * The count on a phone bar item: the rail's count, laid over the tab icon's corner, and its description for screen
+ * readers after the item's label.
+ */
+export function TabBarAppBadge(props: { endpoint?: string; appId?: string }) {
+  const description = useAppBadgeDescription(() => props);
+  return (
+    <Show when={description()}>
+      <AppBadge endpoint={props.endpoint} appId={props.appId} />
+      <span class="sr-only">, {description()}</span>
+    </Show>
+  );
+}
+
 export function AppBadge(props: { endpoint?: string; appId?: string }) {
   const count = () => appBadgeCount(props);
   return (

package/src/ssr/AppLaunchpadPanel.tsx

@@ -42,7 +42,7 @@ const appIconPalette: readonly [AppIconPaletteEntry, ...AppIconPaletteEntry[]] =
   { from: "#7c3aed" },
   { from: "#d97706" },
   { from: "#e11d48" },
-  { from: "#0891b2" },
+  { from: "#c026d3" },
   { from: "#52525b" },
 ];
 

package/src/ssr/AppPwaRuntime.island.tsx

@@ -0,0 +1,82 @@
+import { Button, createInstallPrompt, InstallGuide, type InstallPrompt, NoticeCard, useLocale } from "@k2b/ui";
+import { createSignal, onCleanup, onMount, Show } from "solid-js";
+import type { AppInstallable } from "../contracts/installable";
+import { appPwaMessages } from "./app-pwa-messages";
+
+/** Only the App-PWA browser lifecycle. No Cloud mobile-app session, identity, or persistent state. */
+export default function AppPwaRuntime(props: { app: AppInstallable }) {
+  const locale = useLocale();
+  const t = () => appPwaMessages.resolve([locale()]).t;
+  const [installation, setInstallation] = createSignal<InstallPrompt>();
+  const [installUrl, setInstallUrl] = createSignal("");
+  const [workerFailed, setWorkerFailed] = createSignal(false);
+  const [registering, setRegistering] = createSignal(false);
+  let disposed = false;
+
+  const register = async () => {
+    if (registering()) return;
+    setRegistering(true);
+    try {
+      if (!navigator.serviceWorker) throw new Error("Service workers unavailable");
+      await navigator.serviceWorker.register(`${props.app.path}sw.js`, { scope: props.app.path, updateViaCache: "none" });
+      if (!disposed) setWorkerFailed(false);
+    } catch {
+      if (!disposed) setWorkerFailed(true);
+    } finally {
+      if (!disposed) setRegistering(false);
+    }
+  };
+
+  onMount(() => {
+    setInstallation(createInstallPrompt());
+    setInstallUrl(new URL(props.app.path, location.origin).href);
+    const syncTheme = () => {
+      const theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
+      document.querySelector<HTMLMetaElement>("meta[data-app-pwa-theme]")?.setAttribute("content", props.app.themeColor[theme]);
+      document
+        .querySelector<HTMLLinkElement>("link[data-app-pwa-manifest]")
+        ?.setAttribute("href", `${props.app.path}manifest.webmanifest?theme=${theme}`);
+      document
+        .querySelector<HTMLLinkElement>("link[data-app-pwa-apple]")
+        ?.setAttribute("href", `${props.app.path}apple-touch-icon-${theme}.png`);
+    };
+    syncTheme();
+    const observer = new MutationObserver(syncTheme);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    void register();
+    onCleanup(() => {
+      disposed = true;
+      observer.disconnect();
+    });
+  });
+
+  return (
+    <div data-app-pwa-runtime aria-live="polite">
+      <Show when={installation()}>
+        {(install) => (
+          <Show
+            when={
+              !install().installed() &&
+              (install().platform.startsWith("apple-") ||
+                install().canPrompt() ||
+                install().busy() ||
+                install().requested() ||
+                install().failed())
+            }
+          >
+            <NoticeCard title={t().title({ name: props.app.name })}>
+              <InstallGuide appName={props.app.name} install={install()} url={installUrl()} />
+            </NoticeCard>
+          </Show>
+        )}
+      </Show>
+      <Show when={workerFailed()}>
+        <NoticeCard tone="warning" title={t().workerFailed}>
+          <Button variant="secondary" loading={registering()} onClick={() => void register()}>
+            {t().retry}
+          </Button>
+        </NoticeCard>
+      </Show>
+    </div>
+  );
+}

package/src/ssr/CloudShell.island.tsx

@@ -1,6 +1,8 @@
 import { TabBar, useLocale } from "@k2b/ui";
 import { createEffect, createMemo, createSignal, onCleanup, onMount, Show } from "solid-js";
 import { isServer, Portal } from "solid-js/web";
+import { TabBarAppBadge } from "./AppBadge";
+import { appBadgeCount } from "./app-badges";
 import { AppLaunchpadButton, setAppLaunchpadContext } from "./app-launchpad";
 import GlobalSearchTrigger from "./GlobalSearchTrigger";
 import LayoutBreadcrumbs from "./LayoutBreadcrumbs";
@@ -35,8 +37,9 @@ export default function CloudShell(props: CloudShellProps) {
 /**
  * The phone bar's live copy, mounted with the rail's island so the shell adds no island instance. It renders nothing
  * while the server's bar is current, so mounting moves and refocuses nothing. When the saved rail preferences or the
- * URL (a fragment, Back and Forward, an in-page navigation) change what the bar shows, it renders the new bar into the
- * bar's row, and CSS hides the server's.
+ * URL (a fragment, Back and Forward, an in-page navigation) change what the bar shows, or an app in it has a count,
+ * it renders the new bar into the bar's row, and CSS hides the server's. Counts, like the rail's, exist only in the
+ * browser.
  */
 function BarNavigation(props: { currentPath: string }) {
   if (isServer) return null;
@@ -51,6 +54,12 @@ function BarNavigation(props: { currentPath: string }) {
     phoneBarItems(projectRailNavigation(data.apps, rail, locale()), path, { label: t().home, path: data.home ?? "/" });
   const served = JSON.stringify(itemsFor(initial, props.currentPath));
   const items = createMemo(() => itemsFor(settings(), currentPath()));
+  const counted = () => items().some((item) => item.counted && appBadgeCount(item.counted) > 0);
+  const live = createMemo(() =>
+    items().map((item) =>
+      item.counted ? { ...item, badge: <TabBarAppBadge endpoint={item.counted.endpoint} appId={item.counted.appId} /> } : item,
+    ),
+  );
   onMount(() => {
     const sync = () => setSettings(readRailContext()?.settings ?? initial);
     const syncLocation = () => setCurrentPath(`${window.location.pathname}${window.location.search}${window.location.hash}`);
@@ -76,10 +85,22 @@ function BarNavigation(props: { currentPath: string }) {
   });
   const row = document.querySelector<HTMLElement>(".cloud-tab-bar__row");
   if (!row) return null;
+  // Swapping bars keeps a focused link: the bar that takes over focuses the same destination, once CSS shows it.
+  const [shown, setShown] = createSignal(false);
+  const focusIn = (selector: string, tab: string) =>
+    [...row.querySelectorAll<HTMLElement>(`${selector} a[data-tab]`)].find((link) => link.dataset.tab === tab)?.focus();
+  createEffect(() => {
+    const next = counted() || JSON.stringify(items()) !== served;
+    if (next === shown()) return;
+    const focused = document.activeElement;
+    const tab = focused instanceof HTMLElement && row.contains(focused) ? focused.dataset.tab : undefined;
+    setShown(next);
+    if (tab) queueMicrotask(() => focusIn(next ? ".cloud-tab-bar__live" : ".k2b-tab-bar:not(.cloud-tab-bar__live)", tab));
+  });
   return (
-    <Show when={JSON.stringify(items()) !== served}>
+    <Show when={shown()}>
       <Portal mount={row}>
-        <TabBar variant="floating" class="cloud-tab-bar__live" label={t().apps} items={items()} />
+        <TabBar variant="floating" class="cloud-tab-bar__live" label={t().apps} items={live()} />
       </Portal>
     </Show>
   );

package/src/ssr/Layout.tsx

@@ -14,6 +14,7 @@ import { isAppSessionActor } from "../server/actor";
 import { getLocale } from "../server/locale";
 import { getDateConfig } from "../server/time";
 import { dates, resolveHomePath } from "../shared";
+import { publicCloudOrigin } from "../shared/app-url";
 import { readThemePreferenceFromCookieHeader } from "../shared/theme";
 import AnnouncementBanners from "./AnnouncementBanners";
 import { appAppearanceStyle, resolveCurrentApp } from "./app-appearance";
@@ -258,7 +259,9 @@ export default function Layout(props: LayoutProps) {
   const panel: ShellData["panel"] = providers.length
     ? { providers, provider: panelState.provider ?? providers[0]?.id, context: pageContext, consent: c.get("panelConsent") }
     : undefined;
+  const cloudOrigin = settings?.app?.url ? publicCloudOrigin(settings.app.url) : undefined;
   const shellData: ShellData = {
+    ...(cloudOrigin ? { cloudOrigin } : {}),
     ...(panel ? { panel } : {}),
     platform: keyboardPlatform(c.req.raw.headers.get("User-Agent") ?? ""),
     ...(viewHelp.length ? { help: viewHelp } : {}),
@@ -294,6 +297,7 @@ export default function Layout(props: LayoutProps) {
           apps: allApps,
           legalLinks,
           searchLinks,
+          cloudOrigin: shellData.cloudOrigin,
           home: shellData.home,
           profile: shellData.profile,
           announcements: user ? (announcements?.latestAnnouncementVersion ?? null) : null,
@@ -314,18 +318,21 @@ export default function Layout(props: LayoutProps) {
           data-layout-full-page="true"
           data-workspace-sidebar-collapsed={workspaceLayout?.sidebarCollapsed ? "true" : undefined}
         >
-          <ShellRuntime pageTrail help={runtimeHelp} panel={panel ? true : undefined} />
+          <ShellRuntime
+            {...(currentApp?.access ? { appAccess: { id: currentApp.id, routes: currentApp.routes } } : {})}
+            pageTrail
+            help={runtimeHelp}
+            panel={panel ? true : undefined}
+          />
           <PageTrailProvider trail={pageTrail}>
             <main class="min-h-0 min-w-0 flex-1" data-cloud-app-area="">
               <AppWorkspace.LayoutStateProvider state={workspaceLayout}>{props.children}</AppWorkspace.LayoutStateProvider>
             </main>
           </PageTrailProvider>
-          {/* Focus pages carry shell data only for their panel providers. */}
-          {panel && (
-            <ShellDataProvider data={{ panel, platform: shellData.platform, theme, apps: [], legalLinks: [], searchLinks: {} }}>
-              <PanelSlot panel={panel} state={{ ...panelState, open: false }} platform={shellData.platform} />
-            </ShellDataProvider>
-          )}
+          {/* Focus pages also expose the canonical origin to their islands. */}
+          <ShellDataProvider data={{ cloudOrigin, panel, platform: shellData.platform, theme, apps: [], legalLinks: [], searchLinks: {} }}>
+            {panel && <PanelSlot panel={panel} state={{ ...panelState, open: false }} platform={shellData.platform} />}
+          </ShellDataProvider>
           <div data-print-fallback="">
             <p>{t.printFallbackTitle}</p>
             <p>{props.printHint ?? t.printFallbackHint}</p>
@@ -355,6 +362,7 @@ export default function Layout(props: LayoutProps) {
         data-workspace-sidebar-collapsed={workspaceLayout?.sidebarCollapsed ? "true" : undefined}
       >
         <ShellRuntime
+          {...(currentApp?.access ? { appAccess: { id: currentApp.id, routes: currentApp.routes } } : {})}
           panel={panel ? true : undefined}
           workspace={{ appId: currentApp?.id }}
           pageTrail

package/src/ssr/PwaLayout.tsx

@@ -1,9 +1,13 @@
 import { LocaleProvider, MobileShell, TabBar, type TabBarItem } from "@k2b/ui";
 import type { JSX } from "solid-js";
-import { PWA_SCOPE } from "../contracts/pwa";
+import { buildMetadata } from "../_internal/build-metadata";
+import { registeredPwaBuilds } from "../_internal/runtime-watcher";
+import { PWA_COOKIES, PWA_LIMITS, PWA_SCOPE } from "../contracts/pwa";
+import { pwaBuild } from "../contracts/pwa-builds";
 import { getLocale } from "../server/locale";
 import { visiblePwaParts } from "./app-navigation";
 import type { LayoutContext } from "./layout-context";
+import PwaPartCount from "./PwaPartCount.island";
 import PwaRuntime from "./PwaRuntime.island";
 import { pwaMessages } from "./pwa-messages";
 import { getDisplayRuntimeContext } from "./runtime";
@@ -17,17 +21,28 @@ export type PwaLayoutProps = {
   c: LayoutContext & { header(name: string, value: string): void };
   /** Header heading and document title. */
   title: string;
-  /** Up-navigation inside the part, for example from a detail back to its list. */
-  back?: { href: string; label: string };
+  /** The heading beside the sidebar from 48rem, which already names the installation; `title` by default. */
+  sidebarTitle?: string;
+  /**
+   * Up-navigation inside the part, for example from a detail back to its list. `withSidebar: false` hides it beside
+   * the sidebar, which already leads there.
+   */
+  back?: { href: string; label: string; withSidebar?: boolean };
   /** At most two icon buttons at the header end. */
   actions?: JSX.Element;
+  /**
+   * The page brings its own heads and scroll areas, such as `AppWorkspace.Main` levels; the frame keeps only its
+   * navigation. `title` still names the document.
+   */
+  bare?: boolean;
   children: JSX.Element;
 };
 
 /**
  * The frame of every page in the installable mobile app (preview): the app's document head, a phone shell with a
- * tab bar of Start and the first parts, and the browser runtime (service worker, offline notice, session keepalive).
- * Pages render it below `/pwa/` with `ssr.pwaAccess`.
+ * tab bar of Start and the first parts, from 48rem a sidebar with Start, every part and Settings instead, and the
+ * browser runtime (service worker, offline notice, session keepalive). Pages render it below `/pwa/` with
+ * `ssr.pwaAccess`.
  */
 export default function PwaLayout(props: PwaLayoutProps) {
   const { c } = props;
@@ -44,25 +59,75 @@ export default function PwaLayout(props: PwaLayoutProps) {
 
   const parts = visiblePwaParts(getDisplayRuntimeContext(c).apps, user, locale);
   const path = new URL(c.req.raw.url).pathname;
+  const owner = page.pwaOwner;
+  const ownBuild = pwaBuild(buildMetadata);
+  const coreBuild = registeredPwaBuilds().core;
+  const builds = { ...(owner && ownBuild ? { [owner]: ownBuild } : {}), ...(coreBuild ? { core: coreBuild } : {}) };
+  // A part's badge calls for attention in the sidebar and on its tab; without one, its summary's count stays quiet in
+  // the sidebar. One watcher reads every route of the page.
+  const countRoutes = [...new Set(parts.flatMap((part) => [part.pwa.badge, part.pwa.summary].filter((path) => path !== undefined)))];
+  const badge = (part: (typeof parts)[number]) =>
+    part.pwa.badge ? <PwaPartCount endpoint={part.pwa.badge} endpoints={countRoutes} attention /> : undefined;
   const tabs = parts.slice(0, TAB_PARTS);
   const currentTab = tabs.find((part) => path === part.pwa.href || path.startsWith(`${part.pwa.href}/`));
   // Start is titled with the installation's name; a part's first page carries the part's name.
   const items: TabBarItem[] = [
     { id: "start", label: t.start, title: cloud, icon: "ti ti-home", href: PWA_SCOPE, current: !currentTab },
-    ...tabs.map((part) => ({ id: part.id, label: part.name, icon: part.icon, href: part.pwa.href, current: part === currentTab })),
+    ...tabs.map((part) => ({
+      id: part.id,
+      label: part.name,
+      icon: part.icon,
+      href: part.pwa.href,
+      current: part === currentTab,
+      badge: badge(part),
+    })),
   ];
+  // The sidebar names the installation itself, so Start is titled Start there; Settings is a destination of its own.
+  const settingsHref = `${PWA_SCOPE}settings`;
+  const currentPart = parts.find((part) => path === part.pwa.href || path.startsWith(`${part.pwa.href}/`));
+  const sidebar = (
+    <MobileShell.Sidebar
+      label={t.tabs}
+      title={cloud}
+      logo="/branding/logo"
+      items={[{ id: "start", label: t.start, icon: "ti ti-home", href: PWA_SCOPE, current: path === PWA_SCOPE }]}
+      sections={[
+        {
+          title: t.apps,
+          items: parts.map((part) => ({
+            id: part.id,
+            label: part.name,
+            icon: part.icon,
+            href: part.pwa.href,
+            current: part === currentPart,
+            badge: badge(part),
+            count: part.pwa.summary ? <PwaPartCount endpoint={part.pwa.summary} endpoints={countRoutes} /> : undefined,
+          })),
+        },
+      ]}
+      footer={[{ id: "settings", label: t.settings, icon: "ti ti-settings", href: settingsHref, current: path === settingsHref }]}
+    />
+  );
 
   return (
     <LocaleProvider locale={locale}>
       {/* Pages without a person show no times. Their pairing link lives only in memory, and a reload would lose it. */}
       <TimezoneCookie reload={!!user} />
       <MobileShell
-        header={<MobileShell.Header title={props.title} back={props.back} actions={props.actions} />}
+        header={<MobileShell.Header title={props.title} sidebarTitle={props.sidebarTitle} back={props.back} actions={props.actions} />}
+        scroll={!props.bare}
         footer={user && parts.length > 0 ? <TabBar label={t.tabs} items={items} /> : undefined}
+        sidebar={user ? sidebar : undefined}
       >
         {props.children}
       </MobileShell>
-      <PwaRuntime keepalive={!!user} cloud={cloud} />
+      <PwaRuntime
+        keepalive={!!user}
+        accountId={user?.id}
+        builds={builds}
+        cloud={cloud}
+        rememberAddress={page.pwaAddress ? { cookie: PWA_COOKIES.lastAddress, maxAge: PWA_LIMITS.idleDays * 86_400 } : undefined}
+      />
     </LocaleProvider>
   );
 }

package/src/ssr/PwaPartCount.island.tsx

@@ -0,0 +1,23 @@
+import { AppWorkspace } from "@k2b/ui";
+import { onCleanup, onMount, Show } from "solid-js";
+import { appBadgeCount, watchAppBadges } from "./app-badges";
+
+export type PwaPartCountProps = {
+  /** This part's `pwa.badge` or, without one, its `pwa.summary` route. */
+  endpoint: string;
+  /** Every count route of the page; the first count on a page reads them all, once a minute like the web's. */
+  endpoints: string[];
+  /** A badge calls for attention, such as unread messages; a summary's count stays quiet beside the label. */
+  attention?: boolean;
+};
+
+/** The count of a part in the Cloud app's sidebar and tab bar; nothing at zero. */
+export default function PwaPartCount(props: PwaPartCountProps) {
+  onMount(() => onCleanup(watchAppBadges(props.endpoints)));
+  const count = () => appBadgeCount({ endpoint: props.endpoint });
+  return (
+    <Show when={props.attention} fallback={<Show when={count() > 0}>{count() > 99 ? "99+" : count()}</Show>}>
+      <AppWorkspace.SidebarItemStatus unread={count()} />
+    </Show>
+  );
+}

package/src/ssr/PwaRuntime.island.tsx

@@ -1,6 +1,9 @@
 import { observeMobileShell, syncThemeColor, type ToastHandle, toast, useLocale } from "@k2b/ui";
 import { onCleanup, onMount } from "solid-js";
 import { renewAppSession } from "../browser/app-session";
+import { pwaDrafts } from "../browser/pwa-drafts";
+import { reloadOnce } from "../browser/reload";
+import { rememberedPwaAddress } from "../contracts/pwa-location";
 import { PWA_SCOPE, PWA_SERVICE_WORKER_PATH } from "../contracts/pwa-paths";
 import { pwaMessages } from "./pwa-messages";
 
@@ -15,6 +18,11 @@ export type PwaRuntimeProps = {
   keepalive: boolean;
   /** The installation name, for the account notice. */
   cloud: string;
+  accountId?: string;
+  /** Builds used by this document: its owner and Core shared assets. */
+  builds?: Record<string, string>;
+  /** Only successful authenticated documents remember browser-history navigation. */
+  rememberAddress?: { cookie: string; maxAge: number };
 };
 
 const firstPageOfSession = (): boolean => {
@@ -75,21 +83,92 @@ export default function PwaRuntime(props: PwaRuntimeProps) {
 
     if (!props.keepalive) return;
 
+    if (props.rememberAddress) {
+      const { cookie, maxAge } = props.rememberAddress;
+      const remember = () => {
+        const address = rememberedPwaAddress(location.pathname + location.search);
+        if (address)
+          document.cookie = `${cookie}=${encodeURIComponent(address)}; Path=${PWA_SCOPE}; Secure; SameSite=Lax; Max-Age=${maxAge}`;
+      };
+      // The place counts when a page arrives and when the app leaves the foreground, the moment the system may end
+      // it. Selections that parts keep in the address without a page load, such as a Spaces task, are covered this
+      // way too. A document that is being left writes nothing: the next page, or a sign-out that deleted the
+      // cookie, has already answered, and the outgoing page fires "pagehide" before it turns hidden.
+      let leaving = false;
+      const hidden = () => {
+        if (document.visibilityState === "hidden" && !leaving) remember();
+      };
+      const leave = () => {
+        leaving = true;
+      };
+      const back = (event: PageTransitionEvent) => {
+        if (!event.persisted) return;
+        leaving = false;
+        remember();
+      };
+      remember();
+      document.addEventListener("visibilitychange", hidden);
+      window.addEventListener("pagehide", leave);
+      window.addEventListener("pageshow", back);
+      cleanups.push(() => {
+        document.removeEventListener("visibilitychange", hidden);
+        window.removeEventListener("pagehide", leave);
+        window.removeEventListener("pageshow", back);
+      });
+    }
+
     let otherAccountShown = false;
     let disposed = false;
     cleanups.push(() => {
       disposed = true;
     });
-    const renew = async () => {
-      const { otherAccount } = await renewAppSession();
-      if (disposed || !otherAccount || otherAccountShown) return;
-      otherAccountShown = true;
-      toast(t().otherAccount({ cloud: props.cloud, name: otherAccount.name }), { duration: 0, iconClass: "ti ti-alert-triangle" });
+    let updateToast: ToastHandle | undefined;
+    let reloading = false;
+    cleanups.push(() => updateToast?.dismiss());
+    // Every control a person types into, numbers, dates and times included.
+    const textField =
+      'textarea, input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="image"]), [contenteditable]:not([contenteditable="false"])';
+    const edited = new WeakSet<Element>();
+    const input = (event: Event) => {
+      const field = event.target instanceof Element ? event.target.closest(textField) : null;
+      if (field) edited.add(field);
+    };
+    document.addEventListener("input", input, true);
+    cleanups.push(() => document.removeEventListener("input", input, true));
+    const unsafe = () =>
+      document.activeElement?.matches(textField) ||
+      !!(props.accountId && pwaDrafts.has(props.accountId)) ||
+      !!document.querySelector('dialog[open]:not([aria-modal="false"])') ||
+      [...document.querySelectorAll(textField)].some(
+        (field) =>
+          edited.has(field) &&
+          (!(field instanceof window.HTMLInputElement || field instanceof window.HTMLTextAreaElement) ||
+            field.value !== field.defaultValue),
+      );
+    const renew = async (foreground = false) => {
+      const { ok, otherAccount, builds } = await renewAppSession();
+      if (disposed) return;
+      if (otherAccount && !otherAccountShown) {
+        otherAccountShown = true;
+        toast(t().otherAccount({ cloud: props.cloud, name: otherAccount.name }), { duration: 0, iconClass: "ti ti-alert-triangle" });
+      }
+      const changed = ok && Object.entries(props.builds ?? {}).some(([id, build]) => builds?.[id] !== undefined && builds[id] !== build);
+      if (!changed || reloading || document.visibilityState !== "visible") return;
+      // Only the foreground transition is an automatic reload opportunity. Re-check input after the request.
+      if (foreground && !unsafe() && reloadOnce("pwa-update")) {
+        reloading = true;
+        return;
+      }
+      updateToast ??= toast(t().newVersion({ cloud: props.cloud }), {
+        duration: 0,
+        iconClass: "ti ti-refresh",
+        action: { label: t().reload, onClick: () => location.reload() },
+      });
     };
 
     if (firstPageOfSession()) void renew();
     const visible = () => {
-      if (document.visibilityState === "visible") void renew();
+      if (document.visibilityState === "visible") void renew(true);
     };
     document.addEventListener("visibilitychange", visible);
     const timer = setInterval(() => {