@k2b/cloud 0.20.0 → 0.21.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/cloud",
-  "version": "0.20.0",
+  "version": "0.21.1",
   "description": "Application platform library for independently deployed Hono and SolidJS services behind a dynamic gateway.",
   "license": "AGPL-3.0-or-later",
   "repository": {
@@ -98,7 +98,7 @@
     "@tailwindcss/typography": "0.5.20",
     "@k2b/nessi": "0.12.1",
     "@k2b/ssr": "0.14.0",
-    "@k2b/ui": "0.9.1",
+    "@k2b/ui": "0.11.0",
     "@k2b/stdlib": "0.27.0",
     "@k2b/sync": "7.0.0",
     "@nats-io/jetstream": "3.4.0",
@@ -132,7 +132,7 @@
     "hono": "4.13.9",
     "playwright": "1.63.0",
     "solid-js": "1.9.15",
-    "typescript": "5.9.3",
+    "typescript": "7.0.2",
     "zod": "4.6.5"
   },
   "peerDependencies": {

package/src/_internal/define-app.ts

@@ -73,6 +73,7 @@ import { readBoundedJson } from "./bounded-json";
 import { appRuntimeMetadata } from "./build-metadata";
 import { compileCapabilities, invokeCompiledCapability, reviewCompiledCapability, serializeCapabilityProviderResult } from "./capabilities";
 import { cliPluginRoutePrefixes, createCliPluginRoutes, validateAppCliModules } from "./cli-plugins";
+import { FONT_PRELOAD_LINKS } from "./font-preloads";
 import { createHeartbeat } from "./heartbeat";
 import { compileHelp } from "./help";
 import { createPageResponses } from "./page-responses";
@@ -356,6 +357,7 @@ export const defineApp = <
     <link rel="icon" href="${appFaviconHref(opts.id, v)}">
     <style data-cloud-css-layers>@layer properties, theme, base, components, utilities;</style>
     <link rel="preload" href="/public/tabler-icons.woff2" as="font" type="font/woff2" crossorigin>
+    ${FONT_PRELOAD_LINKS}
     <link rel="stylesheet" href="/public/fonts.css?v=${v}">
     <link rel="stylesheet" href="/public/tabler-icons.css?v=${v}">
     <link rel="stylesheet" href="/public/${opts.id}/app.css?v=${v}">

package/src/_internal/font-preloads.ts

@@ -0,0 +1,25 @@
+/// <reference path="../types/k2b-ui-fonts.d.ts" />
+import plexPreset from "@k2b/ui/fonts/plex.css" with { type: "text" };
+
+/**
+ * Preload tags for the IBM Plex Sans faces that every page sets in its first
+ * frame: Latin text at 400, 500 (buttons, labels) and 600 (headings).
+ *
+ * The preset declares its faces with `font-display: swap`. Without a preload
+ * the browser requests a face only when layout needs it, paints the fallback
+ * font and re-wraps the text once Plex arrives. That moves every box after the
+ * first changed line, and on a vertically centered page such as sign-in the
+ * whole form. Preloaded, the faces download next to the render-blocking
+ * stylesheets and the first frame already uses them.
+ *
+ * Core serves the faces under `/public/fonts/` with the preset's
+ * content-hashed file names (`packages/core/scripts/font-assets.ts`). The
+ * preset is bundled as text, so production servers need no `node_modules`.
+ */
+export const FONT_PRELOAD_LINKS = ["400", "500", "600"]
+  .map((weight) => {
+    const file = new RegExp(`url\\(\\./fonts/(ibm-plex-sans-latin-${weight}-normal-[0-9a-f]+\\.woff2)\\)`).exec(plexPreset)?.[1];
+    if (!file) throw new Error(`The @k2b/ui Plex preset has no Latin IBM Plex Sans ${weight} face`);
+    return `<link rel="preload" href="/public/fonts/${file}" as="font" type="font/woff2" crossorigin>`;
+  })
+  .join("\n    ");

package/src/_internal/nats-connection.ts

@@ -12,15 +12,9 @@ export type ConnectNatsOptions = {
   name: string;
 };
 
-export const connectNats = async ({ name }: ConnectNatsOptions): Promise<NatsConnection> => {
-  if (env.NATS_SERVERS.length === 0) {
-    throw new Error(
-      `NATS_SERVERS is not set (connection "${name}"). @k2b/sync needs a comma-separated list of ` +
-        "nats://host:port bootstrap servers, e.g. NATS_SERVERS=nats://ipa_nats_1:4222,nats://ipa_nats_2:4222.",
-    );
-  }
-
-  return connect({
+/** Dial `NATS_SERVERS` once. `startProcessSync()` requires the list and retries while NATS does not answer. */
+export const connectNats = async ({ name }: ConnectNatsOptions): Promise<NatsConnection> =>
+  connect({
     servers: env.NATS_SERVERS,
     name,
     ignoreClusterUpdates: env.NATS_IGNORE_CLUSTER_UPDATES,
@@ -31,4 +25,3 @@ export const connectNats = async ({ name }: ConnectNatsOptions): Promise<NatsCon
     ...(env.NATS_CREDS_FILE ? { authenticator: credsAuthenticator(readFileSync(env.NATS_CREDS_FILE)) } : {}),
     ...(env.NATS_TLS_CA_FILE ? { tls: { caFile: env.NATS_TLS_CA_FILE } } : {}),
   });
-};

package/src/_internal/process-sync.ts

@@ -8,8 +8,11 @@
  * nothing touches sync during module evaluation.
  */
 import { hostname } from "node:os";
-import { createSync, type Sync } from "@k2b/sync";
+import { createSync, type Sync, SyncError } from "@k2b/sync";
+import { expBackoff } from "@k2b/sync/retry";
+import type { NatsConnection } from "@nats-io/transport-node";
 import { env } from "../config/env";
+import { logger } from "../services/logging";
 import { flushSyncTraceEvents, observeSyncEvent } from "../services/logging/trace";
 import { connectNats } from "./nats-connection";
 import { withSyncBudgets } from "./sync-budget";
@@ -65,10 +68,93 @@ export type ProcessSync = {
   stop: () => Promise<void>;
 };
 
+/**
+ * How long a starting process waits for NATS and JetStream. After a host or
+ * stack restart, NATS nodes come up in any order and JetStream must recover
+ * its streams and elect a leader before its API answers; five minutes covers
+ * that. A process that still gets no answer exits instead of staying alive
+ * without readiness, so Docker or Kubernetes restarts it and the outage shows
+ * up as restarts.
+ */
+const NATS_STARTUP_BUDGET_MS = 5 * 60_000;
+// About 1 s, doubling to 20 s, each ±50 % so processes that restarted together spread their retries.
+const NATS_STARTUP_BACKOFF = { baseMs: 1_000, maxMs: 20_000, jitter: 0.5 };
+
+const errorMessage = (error: unknown): string => (error instanceof Error ? error.message : String(error));
+
+/**
+ * Run `attempt` until it succeeds, with exponential backoff and jitter. A
+ * `SyncError` describes the server or the declarations (unsupported version,
+ * JetStream disabled, drift), which waiting does not change, so it fails at
+ * once. Every other failure (refused or unresolved address, timeout, JetStream
+ * without a leader) is logged and retried until `budgetMs` is spent; then the
+ * process exits with status 1.
+ */
+export const waitForNats = async <T>(
+  attempt: () => Promise<T>,
+  { application, budgetMs = NATS_STARTUP_BUDGET_MS }: { application: string; budgetMs?: number },
+): Promise<T> => {
+  const log = logger("sync");
+  const deadline = Date.now() + budgetMs;
+  for (let attempts = 1; ; attempts++) {
+    try {
+      const result = await attempt();
+      if (attempts > 1) log.info("NATS and JetStream answered", { application, attempts });
+      return result;
+    } catch (error) {
+      if (error instanceof SyncError) throw error;
+      const remainingMs = deadline - Date.now();
+      if (remainingMs <= 0) {
+        log.error("NATS and JetStream did not answer within the startup budget; exiting so the process is restarted", {
+          application,
+          attempts,
+          budgetMs,
+          error: errorMessage(error),
+        });
+        process.exit(1);
+      }
+      const retryInMs = Math.min(remainingMs, expBackoff(attempts, NATS_STARTUP_BACKOFF));
+      log.warn("NATS or JetStream is not ready; retrying", { application, attempt: attempts, retryInMs, error: errorMessage(error) });
+      await Bun.sleep(retryInMs);
+    }
+  }
+};
+
+/** One start attempt: connect, bind a new Sync instance, and wait for `ready()`; release both when it fails. */
+const connectReadySync = async (application: string): Promise<{ sync: Sync; connection: NatsConnection }> => {
+  const connection = await connectNats({ name: `${application}@${hostname()}` });
+  let sync: Sync | undefined;
+  try {
+    sync = withSyncBudgets(
+      createSync({
+        connection,
+        namespace: env.SYNC_NAMESPACE,
+        application,
+        defaults: { replicas: env.SYNC_REPLICAS },
+        observe: (event) => observeSyncEvent(event, application),
+      }),
+      { connection, namespace: env.SYNC_NAMESPACE },
+    );
+    bindProcessSync(sync);
+    await sync.ready();
+    return { sync, connection };
+  } catch (error) {
+    if (current === sync) unbindProcessSync();
+    await flushSyncTraceEvents();
+    await connection.close();
+    throw error;
+  }
+};
+
 /**
  * Connect NATS, create and bind the process Sync instance, and wait until it is
  * ready. Existing streams of its jobs, queues, and topics take the byte
  * limits they declare before first use (see `sync-budget.ts`).
+ *
+ * While NATS or JetStream does not answer, it retries with a fresh connection
+ * and instance (see `waitForNats`), and exits the process once
+ * `NATS_STARTUP_BUDGET_MS` is spent. Callers are process entry points; nothing
+ * serves readiness before this returns.
  */
 export const startProcessSync = async ({ application }: { application: string }): Promise<ProcessSync> => {
   if (!env.SYNC_NAMESPACE.trim()) {
@@ -77,31 +163,16 @@ export const startProcessSync = async ({ application }: { application: string })
         "must share the same @k2b/sync namespace.",
     );
   }
+  if (env.NATS_SERVERS.length === 0) {
+    throw new Error(
+      `NATS_SERVERS is not set (application "${application}"). @k2b/sync needs a comma-separated list of ` +
+        "nats://host:port bootstrap servers, e.g. NATS_SERVERS=nats://ipa_nats_1:4222,nats://ipa_nats_2:4222.",
+    );
+  }
   if (current || starting) throw new Error("A Sync instance is already starting or bound to this process");
   starting = true;
   try {
-    const connection = await connectNats({ name: `${application}@${hostname()}` });
-    let sync: Sync | undefined;
-    try {
-      sync = withSyncBudgets(
-        createSync({
-          connection,
-          namespace: env.SYNC_NAMESPACE,
-          application,
-          defaults: { replicas: env.SYNC_REPLICAS },
-          observe: (event) => observeSyncEvent(event, application),
-        }),
-        { connection, namespace: env.SYNC_NAMESPACE },
-      );
-      bindProcessSync(sync);
-      await sync.ready();
-    } catch (error) {
-      if (current === sync) unbindProcessSync();
-      await flushSyncTraceEvents();
-      await connection.close();
-      throw error;
-    }
-    const active = sync;
+    const { sync: active, connection } = await waitForNats(() => connectReadySync(application), { application });
     let stopPromise: Promise<void> | undefined;
     return {
       sync: active,

package/src/access/PermissionEditor.tsx

@@ -2,10 +2,11 @@ import { mutation } from "@k2b/stdlib/solid";
 import { IconButton, Placeholder, prompts, SelectChip, Tooltip, useLocale } from "@k2b/ui";
 import { createSignal, For, Show } from "solid-js";
 import { CloudAvatar } from "../account/Avatar";
-import type { AccessEntry, PermissionLevel, Principal } from "../contracts/shared";
+import type { AccessEntry, PermissionLevel, Principal, ServiceAccountKind } from "../contracts/shared";
 import { groupDisplayName } from "../shared/account-display";
 import { accessMessages } from "./messages";
 import PrincipalPicker from "./PrincipalPicker";
+import { serviceAccountKindDisplay } from "./service-account-kind";
 
 // ─────────────────────────────────────────────────────────────────────────
 // Public API
@@ -31,8 +32,13 @@ type PermissionEditorProps = {
   canEdit?: boolean;
 
   /** Grant access. The caller closes over the resource id. The optional
-   *  display metadata lets deferred form drafts retain the selected name. */
-  grantAccess: (principal: Principal, permission: GrantableLevel, display?: { displayName: string }) => Promise<AccessEntry>;
+   *  display metadata lets deferred form drafts retain the selected name
+   *  and, for service accounts, the kind shown in the row. */
+  grantAccess: (
+    principal: Principal,
+    permission: GrantableLevel,
+    display?: { displayName: string; serviceAccountKind?: ServiceAccountKind },
+  ) => Promise<AccessEntry>;
 
   /** Update an existing entry's permission level. */
   updateAccess: (accessId: string, permission: GrantableLevel) => Promise<void>;
@@ -122,14 +128,14 @@ const getEntryDisplayName = (entry: AccessEntry, t: ReturnType<typeof accessMess
   return entry.principal.groupId;
 };
 
-const getPrincipalIcon = (principal: Principal): string => {
-  switch (principal.type) {
+const getPrincipalIcon = (entry: AccessEntry, t: ReturnType<typeof accessMessages.resolve>["t"]): string => {
+  switch (entry.principal.type) {
     case "user":
       return "ti-user";
     case "group":
       return "ti-users-group";
     case "service_account":
-      return "ti-key";
+      return entry.serviceAccountKind ? serviceAccountKindDisplay(entry.serviceAccountKind, t).icon : "ti-key";
     case "authenticated":
       return "ti-lock-open-2";
     case "public":
@@ -162,8 +168,11 @@ export default function PermissionEditor(props: PermissionEditorProps) {
   }
 
   const grantMut = mutation.create({
-    mutation: async (data: { principal: Principal; permission: GrantableLevel; display: { displayName: string } }) =>
-      props.grantAccess(data.principal, data.permission, data.display),
+    mutation: async (data: {
+      principal: Principal;
+      permission: GrantableLevel;
+      display: { displayName: string; serviceAccountKind?: ServiceAccountKind };
+    }) => props.grantAccess(data.principal, data.permission, data.display),
     onSuccess: (newEntry) => {
       setEntries([...entries(), newEntry as AccessEntry]);
     },
@@ -288,7 +297,7 @@ function AccessEntryRow(props: {
         when={props.entry.principal.type === "user"}
         fallback={
           <div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-zinc-200 text-zinc-600 dark:bg-zinc-700 dark:text-zinc-300">
-            <i class={`ti ${getPrincipalIcon(props.entry.principal)} text-sm`} />
+            <i class={`ti ${getPrincipalIcon(props.entry, t())} text-sm`} />
           </div>
         }
       >
@@ -301,11 +310,21 @@ function AccessEntryRow(props: {
         />
       </Show>
 
-      {/* Display name */}
-      <div class="min-w-0 flex-1">
+      {/* Display name. Name and label share one line so every row keeps its height on phones:
+          when both do not fit, each gets an equal share and the shorter one stays whole. */}
+      <div class="grid min-w-0 flex-1 auto-cols-[minmax(0,max-content)] grid-flow-col items-baseline gap-1">
         <span class="truncate text-sm">{displayName()}</span>
         <Show when={props.entry.principal.type === "public"}>
-          <span class="ml-1 text-xs text-dimmed">({t().anyoneWithLink})</span>
+          <span class="truncate text-xs text-dimmed">({t().anyoneWithLink})</span>
+        </Show>
+        <Show
+          when={
+            props.entry.principal.type === "service_account" &&
+            props.entry.serviceAccountKind &&
+            serviceAccountKindDisplay(props.entry.serviceAccountKind, t()).label
+          }
+        >
+          {(label) => <span class="truncate text-xs text-dimmed">({label()})</span>}
         </Show>
       </div>
 

package/src/access/PrincipalPicker.tsx

@@ -1,7 +1,8 @@
 import { Combobox, type ComboboxOption, useLocale } from "@k2b/ui";
-import type { Principal } from "../contracts/shared";
+import type { Principal, ServiceAccountKind } from "../contracts/shared";
 import { groupDisplayName } from "../shared/account-display";
 import { accessMessages } from "./messages";
+import { serviceAccountKindDisplay } from "./service-account-kind";
 
 export const principalKey = (p: Principal) =>
   p.type === "user"
@@ -19,7 +20,7 @@ type Entity =
       serviceAccount: {
         id: string;
         name: string;
-        kind: string;
+        kind: ServiceAccountKind;
         appId: string | null;
         resourceType: string | null;
         resourceId: string | null;
@@ -32,13 +33,15 @@ export default function PrincipalPicker(props: {
   allowAuthenticated?: boolean;
   allowServiceAccounts?: boolean;
   disabled?: boolean;
-  onSelect: (principal: Principal, display: { displayName: string }) => void;
+  /** `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;
 }) {
   const locale = useLocale(),
     t = () => accessMessages.resolve([locale()]).t;
-  let principals = new Map<string, Principal>();
+  type Entry = { principal: Principal; label: string; icon: string; description?: string; serviceAccountKind?: ServiceAccountKind };
+  let selectable = new Map<string, Entry>();
   const load = async (search: string, signal: AbortSignal): Promise<ComboboxOption[]> => {
-    const entries: { principal: Principal; label: string; icon: string; description?: string }[] = [];
+    const entries: Entry[] = [];
     if (props.allowAuthenticated !== false)
       entries.push({ principal: { type: "authenticated" }, label: t().allUsers, icon: "ti ti-lock-open-2" });
     if (props.allowPublic) entries.push({ principal: { type: "public" }, label: t().public, icon: "ti ti-world" });
@@ -71,26 +74,27 @@ export default function PrincipalPicker(props: {
             icon: "ti ti-users-group",
             description: e.group.description ?? undefined,
           });
-        else
+        else {
+          const account = e.serviceAccount;
+          const kind = serviceAccountKindDisplay(account.kind, t());
           entries.push({
-            principal: { type: "service_account", serviceAccountId: e.serviceAccount.id },
-            label: e.serviceAccount.name,
+            principal: { type: "service_account", serviceAccountId: account.id },
+            label: account.name,
+            // Resource-bound accounts often share a name; their binding tells them apart.
             description:
-              e.serviceAccount.kind === "user_delegated"
-                ? t().userBoundServiceAccount
-                : e.serviceAccount.kind === "agent"
-                  ? t().agentServiceAccount
-                  : e.serviceAccount.kind === "standalone"
-                    ? t().standaloneServiceAccount
-                    : [e.serviceAccount.appId, e.serviceAccount.resourceType, e.serviceAccount.resourceId].filter(Boolean).join(" · "),
-            icon: e.serviceAccount.kind === "agent" ? "ti ti-robot" : "ti ti-key",
+              account.kind === "resource_bound"
+                ? [account.appId, account.resourceType, account.resourceId].filter(Boolean).join(" · ")
+                : kind.label,
+            icon: `ti ${kind.icon}`,
+            serviceAccountKind: account.kind,
           });
+        }
       }
     }
     const existing = new Set(props.existing?.map(principalKey));
     const filtered = entries.filter((e) => !existing.has(principalKey(e.principal)));
     if (signal.aborted) return [];
-    principals = new Map(filtered.map((e) => [principalKey(e.principal), e.principal]));
+    selectable = new Map(filtered.map((e) => [principalKey(e.principal), e]));
     return filtered.map((e) => ({ id: principalKey(e.principal), label: e.label, icon: e.icon, description: e.description }));
   };
   return (
@@ -107,8 +111,8 @@ export default function PrincipalPicker(props: {
       }
       fetchData={load}
       onSelect={(option) => {
-        const principal = principals.get(option.id);
-        if (principal) props.onSelect(principal, { displayName: option.label });
+        const entry = selectable.get(option.id);
+        if (entry) props.onSelect(entry.principal, { displayName: entry.label, serviceAccountKind: entry.serviceAccountKind });
       }}
     />
   );

package/src/access/messages.ts

@@ -15,6 +15,7 @@ export const accessMessages = i18n.define({
       removeAccessConfirm: ({ name }: { name: string }) => `Remove access for ${name}?`,
       removeAccess: "Remove access",
       userBoundServiceAccount: "User-bound service account",
+      resourceBoundServiceAccount: "Resource-bound service account",
       standaloneServiceAccount: "Service account",
       agentServiceAccount: "Agent",
       noDirectGrants: "No direct access granted yet.",
@@ -74,6 +75,7 @@ export const accessMessages = i18n.define({
       removeAccessConfirm: ({ name }) => `Zugriff für ${name} entfernen?`,
       removeAccess: "Zugriff entfernen",
       userBoundServiceAccount: "Benutzergebundenes Dienstkonto",
+      resourceBoundServiceAccount: "Ressourcengebundenes Dienstkonto",
       standaloneServiceAccount: "Dienstkonto",
       agentServiceAccount: "Agent",
       noDirectGrants: "Noch kein direkter Zugriff erteilt.",

package/src/access/service-account-kind.ts

@@ -0,0 +1,28 @@
+import type { ServiceAccountKind } from "../contracts/shared";
+import type { accessMessages } from "./messages";
+
+/**
+ * The one icon and label for each service-account kind, shared by the
+ * permission editor rows, the principal picker, and entity search so the same
+ * account never appears under different names.
+ *
+ * Apps bundle their own copy of this mapping, so a kind added later by Core
+ * falls back to the key icon without a label instead of breaking the list.
+ */
+export const serviceAccountKindDisplay = (
+  kind: ServiceAccountKind,
+  t: ReturnType<typeof accessMessages.resolve>["t"],
+): { icon: string; label?: string } => {
+  switch (kind) {
+    case "agent":
+      return { icon: "ti-robot", label: t.agentServiceAccount };
+    case "user_delegated":
+      return { icon: "ti-user-key", label: t.userBoundServiceAccount };
+    case "resource_bound":
+      return { icon: "ti-box", label: t.resourceBoundServiceAccount };
+    case "standalone":
+      return { icon: "ti-key", label: t.standaloneServiceAccount };
+    default:
+      return { icon: "ti-key" };
+  }
+};

package/src/account/EntitySearch.tsx

@@ -2,6 +2,8 @@ import { timed } from "@k2b/stdlib/solid";
 import { Button, ScrollArea, TextInput, useLocale } from "@k2b/ui";
 import type { JSX } from "solid-js";
 import { createSignal, For, Show } from "solid-js";
+import { accessMessages } from "../access/messages";
+import { serviceAccountKindDisplay } from "../access/service-account-kind";
 import { groupDisplayName } from "../shared/account-display";
 import { CloudAvatar } from "./Avatar";
 
@@ -115,6 +117,8 @@ const EntitySearch = (props: EntitySearchProps) => {
   const [groups, setGroups] = createSignal<ApiGroup[]>([]);
   const [serviceAccounts, setServiceAccounts] = createSignal<ApiServiceAccount[]>([]);
   const [loading, setLoading] = createSignal(false);
+  const serviceAccountKind = (serviceAccount: ApiServiceAccount) =>
+    serviceAccountKindDisplay(serviceAccount.kind, accessMessages.resolve([locale()]).t);
 
   // Defensive dev-warning: at least one principal kind must be enabled,
   // otherwise the component is decorative-only and the caller probably
@@ -290,16 +294,13 @@ const EntitySearch = (props: EntitySearchProps) => {
             <For each={serviceAccounts()}>
               {(serviceAccount) => (
                 <ResultRow
-                  icon={serviceAccount.kind === "agent" ? "ti-robot" : "ti-key"}
+                  icon={serviceAccountKind(serviceAccount).icon}
                   title={serviceAccount.name}
                   subtitle={
-                    serviceAccount.kind === "user_delegated"
-                      ? "User-bound service account"
-                      : serviceAccount.kind === "agent"
-                        ? "Agent"
-                        : serviceAccount.kind === "standalone"
-                          ? "Service account"
-                          : [serviceAccount.appId, serviceAccount.resourceType, serviceAccount.resourceId].filter(Boolean).join(" · ")
+                    // Resource-bound accounts often share a name; their binding tells them apart.
+                    serviceAccount.kind === "resource_bound"
+                      ? [serviceAccount.appId, serviceAccount.resourceType, serviceAccount.resourceId].filter(Boolean).join(" · ")
+                      : serviceAccountKind(serviceAccount).label
                   }
                   disabled={props.disabled}
                   onSelect={() =>

package/src/ai/chat-quotas.ts

@@ -1,11 +1,18 @@
 import type { AccessSubject } from "../server/services/access";
 import { hasBillableAiPricing } from "../shared/ai-costs";
-import type { AiChatQuotaSnapshot } from "../shared/ai-quotas";
+import type { AiChatQuotaBalance, AiChatQuotaSnapshot, AiQuotaBalance } from "../shared/ai-quotas";
 import { listAssistantAiModels } from "./assistant-models";
 import { aiQuotas } from "./quotas";
 import { readAiSettingsState } from "./settings";
 
-/** Own allowances only. Grant identities and unavailable model profiles stay private. */
+/** Reduces a balance to what the chat shows. Amounts, limits, and the unit never leave the server on this path. */
+const usage = (b: AiQuotaBalance): AiChatQuotaBalance => {
+  if (b.bypassed || b.limit === null) return { scope: b.scope, unlimited: true, usedPercent: null, resetsAt: null };
+  const usedPercent = b.unknown ? null : b.used >= b.limit ? 100 : Math.max(0, Math.min(99, Math.floor((100 * b.used) / b.limit)));
+  return { scope: b.scope, unlimited: false, usedPercent, resetsAt: b.resetsAt };
+};
+
+/** Own allowances only, as usage shares. Grant identities and unavailable model profiles stay private. */
 export async function getAiChatQuotas(subject: AccessSubject): Promise<AiChatQuotaSnapshot> {
   const config = await aiQuotas.config();
   if (!config.enabled) return { enabled: false, balances: [] };
@@ -14,12 +21,9 @@ export async function getAiChatQuotas(subject: AccessSubject): Promise<AiChatQuo
   const profiles = (await readAiSettingsState()).profiles;
   return {
     enabled: snapshot.enabled,
-    unit: config.unit ?? "EUR",
     unlimitedModels: models
       .filter((model) => !hasBillableAiPricing(profiles.find((profile) => profile.id === model.id)?.pricing))
       .map((model) => model.id),
-    balances: snapshot.balances
-      .filter((b) => b.scope === "*" || models.some((m) => m.id === b.scope))
-      .map(({ sources: _sources, sourceDetails: _sourceDetails, ...balance }) => balance),
+    balances: snapshot.balances.filter((b) => b.scope === "*" || models.some((m) => m.id === b.scope)).map(usage),
   };
 }

package/src/ai/inference-calls.ts

@@ -98,7 +98,7 @@ export async function beginAiCall(
           return {
             error: new AiQuotaError(
               "quota_usage_unknown",
-              "Chat costs could not be measured. Reset the allowance or wait for the next window.",
+              "Chat usage could not be measured. Reset the allowance or wait for the next window.",
             ),
           };
         const rule = config.rules.find((rule) => rule.scope === balance.scope)!;
@@ -127,7 +127,7 @@ export async function beginAiCall(
           error:
             context.kind === "background"
               ? new AiBackgroundAdmissionError(backgroundHeadroom !== undefined && inputCost + outputPrice <= backgroundHeadroom)
-              : new AiQuotaError("quota_exhausted", "Chat cost limit reached."),
+              : new AiQuotaError("quota_exhausted", "Chat usage limit reached."),
         };
       const reserveOutput = Math.min(requestedOutput ?? outputBound ?? affordable, affordable);
       // Preserve adapter defaults unless an explicit maximum or budget requires a cap.

package/src/ai/model-access.ts

@@ -1,6 +1,6 @@
 import { sql } from "bun";
 import { z } from "zod";
-import { type AccessEntry, type Principal, PrincipalSchema } from "../contracts/shared";
+import { type AccessEntry, type Principal, PrincipalSchema, type ServiceAccountKind } from "../contracts/shared";
 import { type AccessSubject, buildAccessPrincipalCondition, createAccess } from "../server/services/access";
 import { toPgTextArray } from "../services/postgres";
 import type { AiSettingsError } from "./types";
@@ -114,11 +114,13 @@ export const aiModelAccess = {
         service_account_id: string | null;
         authenticated_only: boolean | null;
         display_name: string | null;
+        service_account_kind: ServiceAccountKind | null;
       }[]
     >`
       SELECT resource.profile_id, resource.revision, access.id, access.created_at,
         access.user_id, access.group_id, access.service_account_id, access.authenticated_only,
-        COALESCE(users.display_name, groups.name, service_accounts.name) AS display_name
+        COALESCE(users.display_name, groups.name, service_accounts.name) AS display_name,
+        service_accounts.kind AS service_account_kind
       FROM ai.model_access_resources resource LEFT JOIN ai.model_access model ON model.profile_id = resource.profile_id
       LEFT JOIN auth.access access ON access.id = model.access_id
       LEFT JOIN auth.users users ON users.id = access.user_id
@@ -146,6 +148,7 @@ export const aiModelAccess = {
         permission: "read",
         createdAt: row.created_at.toISOString(),
         ...(row.display_name ? { displayName: row.display_name } : {}),
+        ...(row.service_account_kind ? { serviceAccountKind: row.service_account_kind } : {}),
       });
     }
     return Object.fromEntries(result);

package/src/ai/projects.ts

@@ -1,6 +1,6 @@
 import { type SQL, type SQLQuery, sql } from "bun";
 import type { CloudResourceRef } from "../contracts/capabilities";
-import { AuthenticatedPrincipalSchema } from "../contracts/shared";
+import { AuthenticatedPrincipalSchema, type ServiceAccountKind } from "../contracts/shared";
 import type { AccessSubject } from "../server";
 import {
   buildAccessPrincipalCondition,
@@ -82,6 +82,8 @@ export type AiProjectAccess = {
   principal: Principal;
   permission: AiProjectPermission;
   displayName?: string;
+  /** Kind of a `service_account` principal; presentation only. */
+  serviceAccountKind?: ServiceAccountKind;
   createdAt: string;
 };
 
@@ -155,6 +157,7 @@ type ProjectAccessRow = {
   permission: AiProjectPermission;
   created_at: Date | string;
   display_name: string | null;
+  service_account_kind: ServiceAccountKind | null;
 };
 
 type AdminProjectRow = ProjectRow & {
@@ -257,6 +260,7 @@ const toProjectAccess = (row: ProjectAccessRow): AiProjectAccess => ({
           : { type: "public" },
   permission: row.permission,
   displayName: row.display_name ?? undefined,
+  serviceAccountKind: row.service_account_kind ?? undefined,
   createdAt: iso(row.created_at),
 });
 
@@ -287,7 +291,8 @@ const listProjectAccess = async (projectId: string, db: SQL = sql): Promise<AiPr
     SELECT project_access.short_id, access.user_id, access.group_id, access.service_account_id, access.authenticated_only,
            access.permission, access.created_at,
            COALESCE(users.display_name, groups.name, service_accounts.name,
-             CASE WHEN access.authenticated_only THEN 'All authenticated users' ELSE 'Public' END) AS display_name
+             CASE WHEN access.authenticated_only THEN 'All authenticated users' ELSE 'Public' END) AS display_name,
+           service_accounts.kind AS service_account_kind
     FROM ai.project_access project_access
     JOIN auth.access access ON access.id = project_access.access_id
     LEFT JOIN auth.users users ON users.id = access.user_id

package/src/ai/quota-report.ts

@@ -18,7 +18,12 @@ export async function quotaAdminConfig() {
       ...rule,
       grants: rule.grants.map(() => {
         const grant = grants[offset++]!;
-        return { principal: grant.principal, limit: grant.limit, displayName: grant.displayName };
+        return {
+          principal: grant.principal,
+          limit: grant.limit,
+          displayName: grant.displayName,
+          serviceAccountKind: grant.serviceAccountKind,
+        };
       }),
     })),
   };

package/src/ai/quotas.ts

@@ -124,7 +124,7 @@ export const aiQuotas = {
           "quota_usage_unknown",
           "Chat usage could not be measured. Contact an administrator or wait for the quota reset.",
         );
-      if (b.used >= b.limit) throw new AiQuotaError("quota_exhausted", `Chat cost limit reached. Resets at ${b.resetsAt}.`);
+      if (b.used >= b.limit) throw new AiQuotaError("quota_exhausted", `Chat usage limit reached. Resets at ${b.resetsAt}.`);
     }
     return snapshot.balances.some((b) => !b.bypassed && b.limit !== null);
   },

package/src/ai/skills.ts

@@ -1,6 +1,6 @@
 import { createHash } from "node:crypto";
 import { type SQL, type SQLQuery, sql } from "bun";
-import { AuthenticatedPrincipalSchema } from "../contracts/shared";
+import { AuthenticatedPrincipalSchema, type ServiceAccountKind } from "../contracts/shared";
 import type { AccessSubject } from "../server";
 import {
   buildAccessPrincipalCondition,
@@ -58,6 +58,8 @@ export type AiSkillAccess = {
   principal: Principal;
   permission: AiSkillPermission;
   displayName?: string;
+  /** Kind of a `service_account` principal; presentation only. */
+  serviceAccountKind?: ServiceAccountKind;
   createdAt: string;
 };
 
@@ -128,6 +130,7 @@ type SkillAccessRow = {
   permission: AiSkillPermission;
   created_at: Date | string;
   display_name: string | null;
+  service_account_kind: ServiceAccountKind | null;
 };
 
 type SkillSummaryRow = Pick<SkillRow, "id" | "short_id" | "name" | "description" | "revision" | "created_at" | "updated_at"> & {
@@ -282,7 +285,8 @@ const listSkillAccess = async (skillId: string, db: SQL = sql): Promise<AiSkillA
     SELECT skill_access.short_id, access.user_id, access.group_id, access.service_account_id, access.authenticated_only,
            access.permission, access.created_at,
            COALESCE(users.display_name, groups.name, service_accounts.name,
-             CASE WHEN access.authenticated_only THEN 'All authenticated users' ELSE 'Public' END) AS display_name
+             CASE WHEN access.authenticated_only THEN 'All authenticated users' ELSE 'Public' END) AS display_name,
+           service_accounts.kind AS service_account_kind
     FROM ai.skill_access skill_access
     JOIN auth.access access ON access.id = skill_access.access_id
     LEFT JOIN auth.users users ON users.id = access.user_id
@@ -305,6 +309,7 @@ const listSkillAccess = async (skillId: string, db: SQL = sql): Promise<AiSkillA
             : { type: "public" },
     permission: row.permission,
     displayName: row.display_name ?? undefined,
+    serviceAccountKind: row.service_account_kind ?? undefined,
     createdAt: iso(row.created_at),
   }));
 };

package/src/cli/access.ts

@@ -238,6 +238,7 @@ const entryTypeLabel = (entry: AccessEntry): string => {
   if (entry.principal.type !== "service_account") return entry.principal.type;
   if (entry.serviceAccountKind === "agent") return "agent";
   if (entry.serviceAccountKind === "resource_bound") return "resource-bound";
+  if (entry.serviceAccountKind === "user_delegated") return "user-bound";
   return "service account";
 };
 

package/src/shared/ai-quotas.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { PrincipalSchema } from "../contracts/shared";
+import { PrincipalSchema, ServiceAccountKindSchema } from "../contracts/shared";
 import { AiPriceSchema } from "./ai-costs";
 
 export const AiBackgroundBudgetSchema = z
@@ -22,6 +22,8 @@ export const AiQuotaRuleSchema = z
           .object({
             principal: PrincipalSchema.refine((p) => p.type !== "public", "Chat quotas require an identity."),
             displayName: z.string().max(300).optional(),
+            /** Presentation only, like `displayName`: service-account grants show the same kind as the principal picker. */
+            serviceAccountKind: ServiceAccountKindSchema.optional(),
             limit: AiPriceSchema.nullable(),
           })
           .strict(),
@@ -71,11 +73,22 @@ export const AiQuotaUsersQuerySchema = z
   })
   .strict();
 
+/**
+ * One own chat allowance as the browser sees it. It carries no amounts, limits, or unit:
+ * `usedPercent` is a whole number from 0 to 100 and reaches 100 only when the allowance is used up.
+ * Below 100 the server can still reject a call that the rest of the allowance cannot cover.
+ * It is `null` when the allowance is unlimited or its usage cannot be measured right now.
+ */
+export type AiChatQuotaBalance = {
+  scope: string;
+  unlimited: boolean;
+  usedPercent: number | null;
+  resetsAt: string | null;
+};
 export type AiChatQuotaSnapshot = {
-  unit?: string;
   unlimitedModels?: string[];
   enabled: boolean;
-  balances: Omit<AiQuotaBalance, "sources" | "sourceDetails">[];
+  balances: AiChatQuotaBalance[];
 };
 
 export const AiQuotaReportQuerySchema = z.object({

package/src/ssr/LayoutPreferences.island.tsx

@@ -13,7 +13,7 @@ export default function LayoutPreferences(props: LayoutPreferencesProps) {
 
   return (
     <Dropdown.Root items={preferences.items()} label={preferences.messages().preferencesMenuLabel} position={props.position} width="14rem">
-      <Dropdown.Trigger iconOnly label={preferences.messages().preferencesMenuLabel} size="sm" tooltip={false} variant="secondary">
+      <Dropdown.Trigger iconOnly label={preferences.messages().preferencesMenuLabel} size="sm" variant="secondary">
         <i class="ti ti-adjustments-horizontal" aria-hidden="true" />
       </Dropdown.Trigger>
     </Dropdown.Root>

package/src/ssr/MinimalLayoutPreferences.island.tsx

@@ -7,7 +7,10 @@ import { createPreferenceController } from "./preference-controller";
 /**
  * Labeled language and theme controls for the MinimalLayout footer. The
  * language trigger names the current language; the theme button names the
- * mode it switches to, like every other Cloud preference menu.
+ * mode it switches to, like every other Cloud preference menu. Below `md` both
+ * are compact, the language code and the theme icon with the full names as
+ * accessible labels, so they fit next to the legal links on a phone. CSS picks
+ * the form, so the server response is already final.
  */
 export default function MinimalLayoutPreferences(props: { initialTheme: CloudTheme }) {
   const locale = useLocale();
@@ -35,13 +38,14 @@ export default function MinimalLayoutPreferences(props: { initialTheme: CloudThe
       >
         <Dropdown.Trigger label={`${t().language}: ${languageName()}`} size="sm" tooltip={false} variant="ghost">
           <i class="ti ti-language" aria-hidden="true" />
-          {languageName()}
-          <i class="ti ti-chevron-down" aria-hidden="true" />
+          <span class="hidden md:inline">{languageName()}</span>
+          <span class="md:hidden">{language().toUpperCase()}</span>
+          <i class="ti ti-chevron-down hidden md:inline" aria-hidden="true" />
         </Dropdown.Trigger>
       </Dropdown.Root>
-      <Button onClick={preferences.toggleTheme} size="sm" variant="ghost">
+      <Button aria-label={preferences.themeLabel()} onClick={preferences.toggleTheme} size="sm" variant="ghost">
         <i class={preferences.theme() === "light" ? "ti ti-moon" : "ti ti-sun-high"} aria-hidden="true" />
-        {preferences.themeLabel()}
+        <span class="hidden md:inline">{preferences.themeLabel()}</span>
       </Button>
     </div>
   );

package/src/styles/resource-search.css

@@ -345,8 +345,8 @@
   display: none;
 }
 .cloud-resource-search :is(.cloud-resource-search__result, .cloud-resource-search__tag-option, .cloud-resource-search__tag):focus-visible {
-  outline: 2px solid var(--color-blue-500);
-  outline-offset: -2px;
+  outline: var(--k2b-focus-width) solid var(--color-blue-500);
+  outline-offset: calc(-1 * var(--k2b-focus-width));
 }
 @media (min-width: 48rem) {
   .cloud-resource-search {

package/src/styles/utilities-feedback.css

@@ -219,8 +219,8 @@
 
 @media (forced-colors: active) {
   .prompt-search-surface:focus-within {
-    outline: 2px solid CanvasText;
-    outline-offset: -2px;
+    outline: var(--k2b-focus-width) solid CanvasText;
+    outline-offset: calc(-1 * var(--k2b-focus-width));
   }
 }
 

package/src/styles/utilities-markdown-editor.css

@@ -433,8 +433,8 @@
 
 .md-link-widget:focus-visible {
   border-radius: 0.125rem;
-  outline: 2px solid var(--ui-app-accent-border);
-  outline-offset: 2px;
+  outline: var(--k2b-focus-width) solid var(--ui-app-accent-border);
+  outline-offset: var(--k2b-focus-offset);
 }
 
 .md-link-icon {

package/src/styles/utilities-navigation.css

@@ -957,8 +957,8 @@
 }
 
 .minimal-layout-footer__links a:focus-visible {
-  outline: 2px solid var(--k2b-focus-ring);
-  outline-offset: 2px;
+  outline: var(--k2b-focus-width) solid var(--k2b-focus-ring);
+  outline-offset: var(--k2b-focus-offset);
 }
 
 .k2b-ui .minimal-layout-footer .k2b-button[data-size] {
@@ -984,6 +984,31 @@
   }
 }
 
+/* The one centered card of a standalone page (sign-in, a public share, an
+   unlock form). Phones have no room for a frame inside the page padding, so
+   below Tailwind's `md` breakpoint the card loses border, radius, shadow,
+   surface and its own padding, and its content sits on the page background.
+   Pure CSS on the same markup: the server response is already in its final
+   form. The second selector outranks an elevated @k2b/ui Paper.
+   The query is the exact opposite of `md:`, so a page that moves its own
+   padding or columns with `md:` switches at the same width as the card, also
+   with a larger default font size. `(width < 48rem)` is not: the build lowers
+   it to `max-width: calc(48rem - .001px)`, which Chromium still matches at
+   48rem. Without a frame there is nothing left to clip, so the card also
+   stops clipping: its content then reaches the card edge, and a clipping card
+   would cut the outer focus ring of a full-width button or field. */
+@media not all and (min-width: 48rem) {
+  .standalone-card,
+  .k2b-ui .k2b-paper.standalone-card {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    overflow: visible;
+  }
+}
+
 /* Workspace navigation chrome and resource identity. */
 .workspace-sidebar-header {
   min-height: var(--ui-control-md);

package/src/types/k2b-ui-fonts.d.ts

@@ -0,0 +1,7 @@
+// The @k2b/ui Plex preset, imported as text (`with { type: "text" }`). The
+// importing module references this file, so npm consumers that type-check
+// Cloud's sources get the declaration without adding it to their tsconfig.
+declare module "@k2b/ui/fonts/plex.css" {
+  const content: string;
+  export default content;
+}