@k2b/cloud 0.43.0 → 0.45.0

package/src/ssr/AdminArea.tsx

@@ -0,0 +1,131 @@
+import { AppWorkspace, StatusBadge } from "@k2b/ui";
+import type { JSX } from "solid-js";
+import AdminLayout from "./AdminLayout";
+import SettingsSaveStatus from "./SettingsSaveStatus.island";
+
+/** One row of an area's first column. `mark` shows a dot when the section needs attention. */
+export type AdminAreaItem = {
+  id: string;
+  label: string;
+  href: string;
+  icon: string;
+  description?: string;
+  mark?: "warning" | "error";
+};
+export type AdminAreaGroup = { title?: string; items: AdminAreaItem[] };
+
+type AdminAreaProps = {
+  c: Parameters<typeof AdminLayout>[0]["c"];
+  /** The area's name, the head of the first column. */
+  label: string;
+  /** Accessible name of the first column's navigation, for example "Observability sections". */
+  sectionsLabel: string;
+  /** The area's start; the first column's head links there. */
+  href: string;
+  groups: AdminAreaGroup[];
+  /** Id of the open section's item. */
+  current: string;
+  /** Page title, usually the open section's label. */
+  title: string;
+  /** Spoken with a mark in the first column, for example "Needs attention". */
+  markLabel?: string;
+  /** Id of the deepest open level: "section", or a deeper pane id the page adds. */
+  level?: string;
+  /** The section's panes, starting with one whose id is "section". */
+  children: JSX.Element;
+};
+
+/**
+ * An administration area: the admin layout, the area's sections as the first column, and the open section beside
+ * it as `AppWorkspace` levels. The owner builds each section's content by hand; a wide list adds `minSize`, so it
+ * pushes the first column aside instead of being squeezed.
+ */
+export function AdminArea(props: AdminAreaProps) {
+  return (
+    <AdminLayout c={props.c} title={props.title} ownMain>
+      <AppWorkspace.Main level={props.level ?? "section"}>
+        <AppWorkspace.MainPane id="area" label={props.label} href={props.href} defaultSize={248} minSize={232} maxSize={320}>
+          <nav aria-label={props.sectionsLabel}>
+            {props.groups.map((group) => (
+              <AppWorkspace.SidebarSection title={group.title}>
+                {group.items.map((item) => (
+                  <AppWorkspace.SidebarItem
+                    href={item.href}
+                    navigation="document"
+                    active={props.current === item.id}
+                    icon={item.icon}
+                    description={item.description}
+                    meta={
+                      item.mark ? (
+                        <span title={props.markLabel}>
+                          <StatusBadge tone={item.mark} variant="dot" label="" />
+                          <span class="sr-only">{props.markLabel}</span>
+                        </span>
+                      ) : undefined
+                    }
+                  >
+                    {item.label}
+                  </AppWorkspace.SidebarItem>
+                ))}
+              </AppWorkspace.SidebarSection>
+            ))}
+          </nav>
+        </AppWorkspace.MainPane>
+        {props.children}
+      </AppWorkspace.Main>
+    </AdminLayout>
+  );
+}
+
+/** The save status in a level head. A phone has no room there; `AdminAreaSaveStatusFoot` shows it at the bottom. */
+export const AdminAreaSaveStatusHead = () => (
+  <div class="hidden md:block">
+    <SettingsSaveStatus />
+  </div>
+);
+export const AdminAreaSaveStatusFoot = () => (
+  <div class="sticky bottom-0 flex justify-end bg-(--k2b-surface) px-4 py-3 md:hidden">
+    <SettingsSaveStatus />
+  </div>
+);
+
+/** A section that fills the width beside the first column, such as a dashboard or one form. */
+export function AdminAreaPane(props: {
+  label: string;
+  description?: JSX.Element;
+  /** Before the title, such as a step back inside the section. */
+  lead?: JSX.Element;
+  actions?: JSX.Element;
+  /** A form that saves with a button: its status, Discard and Save sit in the head, on a phone at the bottom. */
+  saveStatus?: boolean;
+  /** With a detail level beside it: the address of this level without the selection. */
+  href?: string;
+  /** A wide list declares the room it needs; the first column then gives way before the list is squeezed. */
+  minSize?: number;
+  children: JSX.Element;
+}) {
+  return (
+    <AppWorkspace.MainPane
+      id="section"
+      label={props.label}
+      description={props.description}
+      lead={props.lead}
+      actions={
+        props.saveStatus ? (
+          <div class="flex items-center gap-2">
+            {props.actions}
+            <AdminAreaSaveStatusHead />
+          </div>
+        ) : (
+          props.actions
+        )
+      }
+      href={props.href}
+      minSize={props.minSize}
+      defaultSize={props.minSize}
+    >
+      <div class="app-rows px-[var(--ui-space-shell)] pb-[var(--ui-space-shell)]">{props.children}</div>
+      {props.saveStatus ? <AdminAreaSaveStatusFoot /> : null}
+    </AppWorkspace.MainPane>
+  );
+}

package/src/ssr/AdminLayout.tsx

@@ -30,6 +30,8 @@ type Props = {
   scroll?: boolean;
   /** Page-owned insets when its layout needs more room than the default shell spacing. */
   contentClass?: string;
+  /** The page renders its own `AppWorkspace.Main`, such as one in level mode. */
+  ownMain?: boolean;
 };
 export default function AdminLayout(props: Props) {
   // Keep children lazy so Layout installs the request locale before rendering them.
@@ -48,9 +50,13 @@ export default function AdminLayout(props: Props) {
       <AppWorkspace mobileSurface="flush" class="min-h-0 flex-1" resizable={false}>
         <AdminSidebar currentPath={currentPath} apps={runtime.apps} />
         <AppWorkspace.Content>
-          <AppWorkspace.Main scroll={scroll} class={props.contentClass ?? (scroll ? "p-[var(--ui-space-shell)]" : undefined)}>
-            {props.children}
-          </AppWorkspace.Main>
+          {props.ownMain ? (
+            props.children
+          ) : (
+            <AppWorkspace.Main scroll={scroll} class={props.contentClass ?? (scroll ? "p-[var(--ui-space-shell)]" : undefined)}>
+              {props.children}
+            </AppWorkspace.Main>
+          )}
         </AppWorkspace.Content>
       </AppWorkspace>
     </Layout>

package/src/ssr/AdminSidebar.tsx

@@ -1,15 +1,15 @@
 import { AppWorkspace, useLocale } from "@k2b/ui";
-import { activeAdminHref } from "./admin-active-link";
+import { activeAdminLink } from "./admin-active-link";
 import { type AdminLink, buildAdminGroups } from "./admin-navigation";
 import { platformMessages } from "./platform-messages";
 import type { RuntimeContext } from "./runtime";
 import WorkspaceNavigation from "./WorkspaceNavigation.island";
 
 const AdminNavigation = (props: { currentPath: string; groups: ReturnType<typeof buildAdminGroups> }) => {
-  const activeHref = activeAdminHref(
+  const activeHref = activeAdminLink(
     props.currentPath,
-    props.groups.flatMap((group) => group.links.map((link: AdminLink) => link.href)),
-  );
+    props.groups.flatMap((group) => group.links),
+  )?.href;
   return (
     <>
       {props.groups.map((group) => (
@@ -45,10 +45,10 @@ export default function AdminSidebar({ currentPath, apps }: { currentPath: strin
             icon: `ti ${link.icon}`,
             active:
               link.href ===
-              activeAdminHref(
+              activeAdminLink(
                 currentPath,
-                groups().flatMap((entry) => entry.links.map((entry) => entry.href)),
-              ),
+                groups().flatMap((entry) => entry.links),
+              )?.href,
           })),
         }))}
       />

package/src/ssr/AppAccessDenied.tsx

@@ -40,6 +40,8 @@ export function AppAccessDeniedContent(props: {
       <p class="mb-4 text-[15px] text-secondary">
         {props.revoked ? (
           t().revokedDescription
+        ) : props.app.access?.kind === "resources" ? (
+          t().deniedResources
         ) : grants() ? (
           t().deniedGrants
         ) : (

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

@@ -29,7 +29,7 @@ export type AppLaunchpadLegalLink = {
 };
 
 export type AppLaunchpadContext = {
-  profile?: { name: string; theme: CloudThemePreference; appHref?: string };
+  profile?: { userId?: string; name: string; theme: CloudThemePreference; appHref?: string };
   apps: AppLaunchpadApp[];
   legalLinks: AppLaunchpadLegalLink[];
 };
@@ -42,7 +42,7 @@ const appIconPalette: readonly [AppIconPaletteEntry, ...AppIconPaletteEntry[]] =
   { from: "#7c3aed" },
   { from: "#d97706" },
   { from: "#e11d48" },
-  { from: "#0891b2" },
+  { from: "#c026d3" },
   { from: "#52525b" },
 ];
 

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>
   );
@@ -90,7 +111,12 @@ function RailNavigation(props: { currentPath: string; panelOpen?: boolean }) {
   const locale = useLocale();
   const t = () => platformMessages.resolve([locale()]).t;
   if (!data?.rail || !data.profile) return null;
-  const profile = { name: data.profile.name, theme: data.theme, ...(data.profile.appHref ? { appHref: data.profile.appHref } : {}) };
+  const profile = {
+    userId: data.profile.userId,
+    name: data.profile.name,
+    theme: data.theme,
+    ...(data.profile.appHref ? { appHref: data.profile.appHref } : {}),
+  };
   createEffect(() => setAppLaunchpadContext(data.apps, data.legalLinks, profile));
   return (
     <nav class="layout-rail-navigation flex min-h-0 flex-1 flex-col items-center gap-1" aria-label={t().apps}>
@@ -107,6 +133,7 @@ function RailNavigation(props: { currentPath: string; panelOpen?: boolean }) {
           helpOpen={!!props.panelOpen && data.panel?.provider === "core"}
         />
         <ProfilePreferences
+          userId={data.profile.userId}
           appHref={data.profile.appHref}
           avatarSrc={data.profile.avatarSrc}
           initialTheme={data.theme}
@@ -143,7 +170,12 @@ function HeaderControls(props: {
             <AppLaunchpadButton
               profile={
                 data.profile
-                  ? { name: data.profile.name, theme: data.theme, ...(data.profile.appHref ? { appHref: data.profile.appHref } : {}) }
+                  ? {
+                      userId: data.profile.userId,
+                      name: data.profile.name,
+                      theme: data.theme,
+                      ...(data.profile.appHref ? { appHref: data.profile.appHref } : {}),
+                    }
                   : undefined
               }
               apps={data.apps}
@@ -167,7 +199,12 @@ function HeaderControls(props: {
             <AppLaunchpadButton
               profile={
                 data.profile
-                  ? { name: data.profile.name, theme: data.theme, ...(data.profile.appHref ? { appHref: data.profile.appHref } : {}) }
+                  ? {
+                      userId: data.profile.userId,
+                      name: data.profile.name,
+                      theme: data.theme,
+                      ...(data.profile.appHref ? { appHref: data.profile.appHref } : {}),
+                    }
                   : undefined
               }
               apps={data.apps}

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 } : {}),
@@ -268,7 +271,7 @@ export default function Layout(props: LayoutProps) {
       ? {
           rail: c.get("railPreferences") ?? defaultRailPreferences(),
           home: resolveHomePath(settings?.app?.home_path),
-          profile: { name: profileName, avatarSrc: profileAvatarSrc, appHref },
+          profile: { userId: user.id, name: profileName, avatarSrc: profileAvatarSrc, appHref },
         }
       : {}),
     legalLinks,
@@ -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,
@@ -325,12 +329,10 @@ export default function Layout(props: LayoutProps) {
               <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>

package/src/ssr/MobileProfileActions.tsx

@@ -5,10 +5,10 @@ import { createProfileActions } from "./profile-actions";
 import { ThemeCycleButton } from "./ThemeCycleButton";
 
 export function MobileProfileActions(props: {
-  profile: { name: string; theme: CloudThemePreference; appHref?: string };
+  profile: { userId?: string; name: string; theme: CloudThemePreference; appHref?: string };
   beforeSelect: () => Promise<boolean>;
 }) {
-  const { preferences, signingOut, signOut } = createProfileActions(props.profile.theme, props.profile.appHref);
+  const { preferences, signingOut, signOut } = createProfileActions(props.profile.theme, props.profile.appHref, props.profile.userId);
   const navigate = (href: string) => (event: MouseEvent) => {
     if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
     event.preventDefault();

package/src/ssr/ProfilePreferences.tsx

@@ -3,6 +3,7 @@ import type { CloudThemePreference } from "../shared/theme";
 import { createProfileActions } from "./profile-actions";
 
 type ProfilePreferencesProps = {
+  userId?: string;
   /** Set while the installation offers the mobile app. */
   appHref?: string;
   avatarSrc?: string;
@@ -16,7 +17,7 @@ type ProfilePreferencesProps = {
  * bottom edge.
  */
 export default function ProfilePreferences(props: ProfilePreferencesProps) {
-  const { preferences, items, signOut, signingOut } = createProfileActions(props.initialTheme, props.appHref);
+  const { preferences, items, signOut, signingOut } = createProfileActions(props.initialTheme, props.appHref, props.userId);
 
   const avatar = () => <Avatar name={props.name} src={props.avatarSrc} size="sm" />;
 

package/src/ssr/PwaLayout.tsx

@@ -7,6 +7,7 @@ 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";
@@ -62,12 +63,24 @@ export default function PwaLayout(props: PwaLayoutProps) {
   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`;
@@ -87,6 +100,8 @@ export default function PwaLayout(props: PwaLayoutProps) {
             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,
           })),
         },
       ]}

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/SettingsSaveOutcome.tsx

@@ -0,0 +1,58 @@
+import { i18n } from "@k2b/stdlib";
+import { Button, InlineGuidance, useLocale } from "@k2b/ui";
+import { Show } from "solid-js";
+import type { SettingsDraftOutcome } from "./settings-draft";
+
+const messages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      notSaved: "Not saved.",
+      notSavedKeep: "The previous values still apply. Your changes stay here.",
+      unknownOutcome: "The connection broke while saving.",
+      unknownOutcomeKeep: "Whether the new values apply is open. Cloud does not save again on its own.",
+      checkNow: "Check current state",
+      retry: "Try again",
+    },
+    de: {
+      notSaved: "Nicht gespeichert.",
+      notSavedKeep: "Es gelten weiter die alten Werte. Deine Änderungen bleiben hier stehen.",
+      unknownOutcome: "Die Verbindung brach beim Speichern ab.",
+      unknownOutcomeKeep: "Ob die neuen Werte gelten, ist offen. Cloud speichert nicht von selbst noch einmal.",
+      checkNow: "Stand jetzt prüfen",
+      retry: "Erneut versuchen",
+    },
+  },
+});
+
+export const checkSettingsSaveOutcomeMessages = () => messages.check();
+
+/**
+ * What became of the last save when it did not succeed, above the form: not saved with the reason and a retry, or an
+ * unclear outcome with a way to check the current state instead of saving twice.
+ */
+export default function SettingsSaveOutcome(props: { outcome: SettingsDraftOutcome | null; onRetry: () => void }) {
+  const locale = useLocale();
+  const t = () => messages.resolve([locale()]).t;
+  return (
+    <Show when={props.outcome}>
+      {(outcome) =>
+        outcome().kind === "failed" ? (
+          <InlineGuidance tone="danger" icon="ti ti-alert-triangle">
+            <b>{t().notSaved}</b> {outcome().message} {t().notSavedKeep}{" "}
+            <Button type="button" variant="ghost" size="xs" onClick={props.onRetry}>
+              {t().retry}
+            </Button>
+          </InlineGuidance>
+        ) : (
+          <InlineGuidance tone="warning" icon="ti ti-help-circle">
+            <b>{t().unknownOutcome}</b> {t().unknownOutcomeKeep}{" "}
+            <Button type="button" variant="ghost" size="xs" onClick={() => window.location.reload()}>
+              {t().checkNow}
+            </Button>
+          </InlineGuidance>
+        )
+      }
+    </Show>
+  );
+}

package/src/ssr/SettingsSaveStatus.island.tsx

@@ -0,0 +1,16 @@
+import { SaveStatus } from "@k2b/ui";
+import { settingsSaveControls } from "./settings-draft";
+
+/** Status, Discard and Save in the head of a form level. Until the form registers, it shows "Saved" with both buttons disabled. */
+export default function SettingsSaveStatus() {
+  const controls = settingsSaveControls;
+  return (
+    <SaveStatus
+      state={() => controls()?.state ?? "saved"}
+      savedAt={() => controls()?.savedAt}
+      invalidCount={() => controls()?.invalidCount ?? 1}
+      onSave={() => controls()?.save()}
+      onDiscard={() => controls()?.discard()}
+    />
+  );
+}