@k2b/cloud 0.24.0 → 0.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/cloud",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "description": "Application platform library for independently deployed Hono and SolidJS services behind a dynamic gateway.",
   "license": "AGPL-3.0-or-later",
   "repository": {
@@ -39,6 +39,7 @@
     "./browser/search": "./src/browser/search.ts",
     "./browser/testing": "./src/browser/testing.ts",
     "./browser/resource-picker": "./src/browser/resource-picker.tsx",
+    "./browser/files": "./src/browser/files.tsx",
     "./capabilities": "./src/capabilities/client.ts",
     "./capabilities/server": "./src/capabilities/server.ts",
     "./capabilities/store": "./src/capabilities/executions.ts",
@@ -99,7 +100,7 @@
     "@tailwindcss/typography": "0.5.20",
     "@k2b/nessi": "0.12.1",
     "@k2b/ssr": "0.14.0",
-    "@k2b/ui": "0.14.0",
+    "@k2b/ui": "0.16.0",
     "@k2b/stdlib": "0.27.0",
     "@k2b/sync": "7.0.0",
     "@nats-io/jetstream": "3.4.0",

package/src/_internal/capabilities.ts

@@ -786,6 +786,18 @@ const presentationOverlays = (catalog: CapabilityPresentationCatalog, requestedL
     });
 };
 
+/** The display title of one Query or Action in the requested locale, without rebuilding the manifest. */
+export const resolveCapabilityOperationTitle = (
+  operation: Pick<CapabilityQueryManifest, "localId" | "title">,
+  group: "queries" | "actions",
+  catalog: CapabilityPresentationCatalog | undefined,
+  requestedLocale: string,
+): string =>
+  (catalog ? presentationOverlays(catalog, requestedLocale) : []).reduce(
+    (title, translation) => translation[group]?.[operation.localId]?.title ?? title,
+    operation.title,
+  );
+
 /** Resolve only human presentation; stable IDs, flags, tags, aliases, and data shapes stay untouched. */
 export const resolveCapabilityManifestPresentation = (
   manifest: CapabilityManifest,

package/src/_internal/registry.ts

@@ -276,6 +276,7 @@ export const resolveLiveCapabilityRegistryEntry = (
       endpoint,
       manifest,
       presentation,
+      ...(app.presentation ? { appPresentation: app.presentation } : {}),
     };
   } catch {
     return null;

package/src/access/GroupCoverage.tsx

@@ -0,0 +1,175 @@
+import { query } from "@k2b/stdlib/solid";
+import { Button, InlineGuidance, useLocale } from "@k2b/ui";
+import { createSignal, createUniqueId, For, Show } from "solid-js";
+import { CloudAvatar } from "../account/Avatar";
+import type { BaseUser, EntityListItem, PaginationResponse } from "../contracts/shared";
+import { accessMessages } from "./messages";
+
+/** Members per request. Further pages load only when the viewer asks for them. */
+const PAGE_SIZE = 20;
+
+type MembersPage =
+  /** The directory withholds group members from this viewer (guest accounts). */
+  | { visible: false; directoryGroup: boolean }
+  | { visible: true; directoryGroup: boolean; members: BaseUser[]; total: number; page: number; hasNext: boolean };
+
+/** Reads the Accounts directory with the viewer's own visibility: `null` when it is withheld. */
+const listEntities = async (params: Record<string, string>, signal: AbortSignal) => {
+  const url = new URL("/api/accounts/entities", window.location.origin);
+  for (const [key, value] of Object.entries(params)) url.searchParams.set(key, value);
+  const response = await fetch(url, { signal, credentials: "same-origin" });
+  if (response.status === 403) return null;
+  if (!response.ok) throw new Error(response.statusText || `HTTP ${response.status}`);
+  const data: { items: EntityListItem[]; pagination: PaginationResponse } = await response.json();
+  return data;
+};
+
+/**
+ * Who currently receives access through a group grant: direct members and
+ * members of nested groups, as access resolution counts them. Loading starts
+ * when the row mounts in the browser, so the list usually opens complete
+ * instead of growing after the viewer expands it.
+ */
+export const createGroupCoverage = (groupId: string) => {
+  const [open, setOpen] = createSignal(false);
+  const members = query.createInfinite<string, MembersPage, number>({
+    source: () => groupId,
+    loadPage: async (id, { cursor, abortSignal }) => {
+      const page = cursor ?? 1;
+      const [list, group] = await Promise.all([
+        listEntities(
+          { kinds: "user", member_of_group_id: id, recursive: "true", page: String(page), per_page: String(PAGE_SIZE) },
+          abortSignal,
+        ),
+        // Only the first page needs the group itself, for the directory hint.
+        page === 1 ? listEntities({ kinds: "group", group_ids: id, per_page: "1" }, abortSignal) : null,
+      ]);
+      const directoryGroup = group?.items.some((item) => item.kind === "group" && item.group.provider === "ipa") ?? false;
+      if (!list) return { visible: false, directoryGroup };
+      return {
+        visible: true,
+        directoryGroup,
+        members: list.items.flatMap((item) => (item.kind === "user" ? [item.user] : [])),
+        total: list.pagination.total,
+        page,
+        hasNext: list.pagination.has_next,
+      };
+    },
+    getNextCursor: (page) => (page.visible && page.hasNext ? page.page + 1 : null),
+  });
+  return { open, setOpen, panelId: createUniqueId(), members };
+};
+
+export type GroupCoverage = ReturnType<typeof createGroupCoverage>;
+
+const firstPage = (coverage: GroupCoverage) => coverage.members.pages()[0];
+
+/**
+ * The members toggle beside the group name. Its label never changes, so
+ * loading the members moves nothing in the row; the count leads the list.
+ */
+export function GroupCoverageToggle(props: { coverage: GroupCoverage; groupName: string }) {
+  const locale = useLocale();
+  const t = () => accessMessages.resolve([locale()]).t;
+  return (
+    <button
+      type="button"
+      aria-expanded={props.coverage.open()}
+      aria-controls={props.coverage.panelId}
+      // The group name tells several group rows apart.
+      aria-label={t().groupMembersOf({ name: props.groupName })}
+      onClick={() => props.coverage.setOpen(!props.coverage.open())}
+      // The size sits on the children: the scoped button normalization resets the button's own font.
+      class="focus-ui flex items-center gap-0.5 self-center rounded text-dimmed transition-colors hover:text-secondary"
+    >
+      <span class="text-xs">{t().groupMembers}</span>
+      <i
+        class="ti ti-chevron-down shrink-0 text-[10px] transition-transform motion-reduce:transition-none"
+        classList={{ "rotate-180": props.coverage.open() }}
+        aria-hidden="true"
+      />
+    </button>
+  );
+}
+
+/** The expanded member list. It stays in the document while collapsed so `aria-controls` always resolves. */
+export function GroupCoveragePanel(props: { coverage: GroupCoverage; groupName: string }) {
+  const locale = useLocale();
+  const t = () => accessMessages.resolve([locale()]).t;
+  const members = () => props.coverage.members;
+  const shown = () =>
+    members()
+      .pages()
+      .flatMap((page) => (page.visible ? page.members : []));
+  const total = () => {
+    const page = firstPage(props.coverage);
+    return page?.visible ? page.total : null;
+  };
+  const remaining = () => Math.max((total() ?? 0) - shown().length, 0);
+  let panel: HTMLDivElement | undefined;
+  let list: HTMLUListElement | undefined;
+  let more: HTMLButtonElement | undefined;
+  let retry: HTMLButtonElement | undefined;
+  // A loading button is disabled, which drops keyboard focus, and the buttons leave on a failure or once
+  // everything is shown. Unless the viewer has moved on, focus continues where they can act next.
+  const settleFocus = () => {
+    const active = document.activeElement;
+    if (active && active !== document.body && active.isConnected && !panel?.contains(active)) return;
+    const next = members().error() ? retry : members().hasMore() ? more : list;
+    if (next?.isConnected) next.focus();
+  };
+  const showMore = async () => {
+    await members().loadMore();
+    settleFocus();
+  };
+  const tryAgain = async () => {
+    await members().refresh();
+    settleFocus();
+  };
+
+  return (
+    // Indented to the name column: avatar (1.75rem) plus the row gap (0.5rem).
+    <div ref={panel} id={props.coverage.panelId} hidden={!props.coverage.open()} class="flex flex-col gap-2 pb-2 pl-9">
+      <Show when={members().pages().length === 0 && !members().error()}>
+        <InlineGuidance loading>{t().groupMembersLoading}</InlineGuidance>
+      </Show>
+      <Show when={firstPage(props.coverage)?.visible === false}>
+        <InlineGuidance icon="ti ti-eye-off">{t().groupMembersHidden}</InlineGuidance>
+      </Show>
+      <Show when={total() !== null}>
+        <p class="text-sm text-dimmed">{t().groupMemberCount({ count: total() ?? 0 })}</p>
+      </Show>
+      <Show when={firstPage(props.coverage)?.directoryGroup}>
+        <InlineGuidance icon="ti ti-info-circle">{t().directoryGroupHint}</InlineGuidance>
+      </Show>
+      <Show when={shown().length > 0}>
+        <ul ref={list} tabindex="-1" aria-label={t().groupMembersOf({ name: props.groupName })} class="flex flex-col gap-1 outline-none">
+          <For each={shown()}>
+            {(user) => {
+              const name = user.displayName || user.mail || user.uid;
+              return (
+                <li class="flex min-w-0 items-center gap-2 text-sm">
+                  <CloudAvatar username={name} userId={user.id} avatarHash={user.avatarHash} size="xs" class="h-6 w-6 shrink-0" />
+                  <span class="truncate">{name}</span>
+                </li>
+              );
+            }}
+          </For>
+        </ul>
+      </Show>
+      <Show when={members().error()}>
+        <InlineGuidance tone="danger" icon="ti ti-alert-circle" role="alert">
+          <span>{t().groupMembersFailed}</span>{" "}
+          <Button ref={retry} variant="text" size="xs" onClick={() => void tryAgain()}>
+            {t().retry}
+          </Button>
+        </InlineGuidance>
+      </Show>
+      <Show when={members().hasMore() && !members().error()}>
+        <Button ref={more} variant="text" size="xs" class="self-start" loading={members().loadingMore()} onClick={() => void showMore()}>
+          {t().showMoreMembers({ count: Math.min(remaining(), PAGE_SIZE) })}
+        </Button>
+      </Show>
+    </div>
+  );
+}

package/src/access/PermissionEditor.tsx

@@ -1,9 +1,12 @@
 import { mutation } from "@k2b/stdlib/solid";
 import { IconButton, Placeholder, prompts, SelectChip, Tooltip, useLocale } from "@k2b/ui";
-import { createSignal, For, Show } from "solid-js";
+import { For, Show } from "solid-js";
+import { createStore } from "solid-js/store";
 import { CloudAvatar } from "../account/Avatar";
 import type { AccessEntry, PermissionLevel, Principal, ServiceAccountKind } from "../contracts/shared";
 import { groupDisplayName } from "../shared/account-display";
+import { createGroupCoverage, type GroupCoverage, GroupCoveragePanel, GroupCoverageToggle } from "./GroupCoverage";
+import { isManagerEntry } from "./managers";
 import { accessMessages } from "./messages";
 import PrincipalPicker from "./PrincipalPicker";
 import { serviceAccountKindDisplay } from "./service-account-kind";
@@ -43,8 +46,10 @@ type PermissionEditorProps = {
   /** Update an existing entry's permission level. */
   updateAccess: (accessId: string, permission: GrantableLevel) => Promise<void>;
 
-  /** Revoke an existing entry. The last entry IS deletable — for
-   *  hierarchical resources the parent ACL still applies. */
+  /** Revoke an existing entry. Any entry can be revoked except the last
+   *  manager: once exactly one entry manages the resource (`admin` for a
+   *  person, group, all signed-in users, or a standalone or agent service
+   *  account), its row can neither be lowered nor removed. */
   revokeAccess: (accessId: string) => Promise<void>;
 
   /** Allow granting `public` access from this editor. */
@@ -120,9 +125,10 @@ const resolveEntryDisplay = (
 };
 
 const getEntryDisplayName = (entry: AccessEntry, t: ReturnType<typeof accessMessages.resolve>["t"], locale: string): string => {
-  if (entry.displayName) return entry.principal.type === "group" ? groupDisplayName(entry.displayName, locale) : entry.displayName;
+  // Audiences always use the localized label; a server-supplied name is not translated.
   if (entry.principal.type === "authenticated") return t.allUsers;
   if (entry.principal.type === "public") return t.public;
+  if (entry.displayName) return entry.principal.type === "group" ? groupDisplayName(entry.displayName, locale) : entry.displayName;
   if (entry.principal.type === "user") return entry.principal.userId;
   if (entry.principal.type === "service_account") return entry.principal.serviceAccountId;
   return entry.principal.groupId;
@@ -150,7 +156,9 @@ const getPrincipalIcon = (entry: AccessEntry, t: ReturnType<typeof accessMessage
 export default function PermissionEditor(props: PermissionEditorProps) {
   const locale = useLocale();
   const t = () => accessMessages.resolve([locale()]).t;
-  const [entries, setEntries] = createSignal<AccessEntry[]>([...props.initialEntries]);
+  // A store keeps each row's identity across level changes, so an expanded member list stays open. It holds
+  // copies: store writes go into the objects themselves, and the caller's entries are not the editor's to change.
+  const [entries, setEntries] = createStore<AccessEntry[]>(props.initialEntries.map((entry) => ({ ...entry })));
   const canEdit = () => props.canEdit !== false;
   const allowPublic = () => props.allowPublic === true;
   const allowAuthenticated = () => props.allowAuthenticated !== false;
@@ -174,7 +182,7 @@ export default function PermissionEditor(props: PermissionEditorProps) {
       display: { displayName: string; serviceAccountKind?: ServiceAccountKind };
     }) => props.grantAccess(data.principal, data.permission, data.display),
     onSuccess: (newEntry) => {
-      setEntries([...entries(), newEntry as AccessEntry]);
+      setEntries(entries.length, { ...newEntry });
     },
     onError: (err) => prompts.error(err.message),
   });
@@ -186,7 +194,7 @@ export default function PermissionEditor(props: PermissionEditorProps) {
     },
     onSuccess: (result) => {
       if (result) {
-        setEntries(entries().map((e) => (e.id === result.accessId ? { ...e, permission: result.permission } : e)));
+        setEntries((entry) => entry.id === result.accessId, "permission", result.permission);
       }
     },
     onError: (err) => prompts.error(err.message),
@@ -204,34 +212,45 @@ export default function PermissionEditor(props: PermissionEditorProps) {
       return entry.id;
     },
     onSuccess: (accessId) => {
-      if (accessId) setEntries(entries().filter((entry) => entry.id !== accessId));
+      if (accessId) setEntries((current) => current.filter((entry) => entry.id !== accessId));
     },
     onError: (err) => prompts.error(err.message),
   });
   const busy = () => grantMut.loading() || updateMut.loading() || revokeMut.loading();
+  // The service refuses to remove the last manager; the row says so up front.
+  const lastManagerId = () => {
+    const managers = entries.filter(isManagerEntry);
+    return managers.length === 1 ? managers[0]!.id : null;
+  };
 
   return (
     <div class="flex flex-col gap-3">
       {/* Existing entries */}
       <div class="flex flex-col gap-1">
-        <For each={entries()}>
-          {(entry) => (
-            <AccessEntryRow
-              entry={entry}
-              canEdit={canEdit()}
-              disabled={busy()}
-              allowed={allowed(entry.principal)}
-              singlePicker={allowed(entry.principal).length === 1}
-              onUpdatePermission={(permission) => {
-                if (!busy()) void updateMut.mutate({ accessId: entry.id, permission });
-              }}
-              onRevoke={() => {
-                if (!busy()) void revokeMut.mutate(entry);
-              }}
-            />
-          )}
+        <For each={entries}>
+          {(entry) => {
+            // A row keeps its principal, so its group coverage is created once per row.
+            const coverage = entry.principal.type === "group" ? createGroupCoverage(entry.principal.groupId) : undefined;
+            return (
+              <AccessEntryRow
+                entry={entry}
+                coverage={coverage}
+                canEdit={canEdit()}
+                disabled={busy()}
+                lastManager={entry.id === lastManagerId()}
+                allowed={allowed(entry.principal)}
+                singlePicker={allowed(entry.principal).length === 1}
+                onUpdatePermission={(permission) => {
+                  if (!busy()) void updateMut.mutate({ accessId: entry.id, permission });
+                }}
+                onRevoke={() => {
+                  if (!busy()) void revokeMut.mutate(entry);
+                }}
+              />
+            );
+          }}
         </For>
-        <Show when={entries().length === 0}>
+        <Show when={entries.length === 0}>
           <Placeholder align="left" class="px-1 py-2" description={t().noDirectGrants} />
         </Show>
       </div>
@@ -241,7 +260,7 @@ export default function PermissionEditor(props: PermissionEditorProps) {
           a higher level. KISS: one decision per step. */}
       <Show when={canEdit()}>
         <PrincipalPicker
-          existing={entries().map((e) => e.principal)}
+          existing={entries.map((e) => e.principal)}
           allowPublic={allowPublic()}
           allowAuthenticated={allowAuthenticated()}
           allowServiceAccounts={props.allowServiceAccounts}
@@ -264,10 +283,14 @@ function AccessEntryRow(props: {
   entry: AccessEntry;
   canEdit: boolean;
   disabled: boolean;
+  /** The only entry that manages the resource: it keeps its level and cannot be removed. */
+  lastManager: boolean;
   allowed: ResolvedLevel[];
   /** When true the per-row picker collapses to a non-interactive badge
    *  (single-level mode — there's nothing to switch to). */
   singlePicker: boolean;
+  /** Present for group grants: who currently receives access through the group. */
+  coverage?: GroupCoverage;
   onUpdatePermission: (permission: GrantableLevel) => void;
   onRevoke: () => void;
 }) {
@@ -275,6 +298,8 @@ function AccessEntryRow(props: {
   const t = () => accessMessages.resolve([locale()]).t;
   const displayName = () => getEntryDisplayName(props.entry, t(), locale());
   const display = () => resolveEntryDisplay(props.entry.permission, props.allowed, t());
+  const manageLabel = () => resolveEntryDisplay("admin", props.allowed, t()).label;
+  const removeLabel = () => (props.lastManager ? t().lastManager({ level: manageLabel() }) : t().remove({ name: displayName() }));
   const isInteractive = () =>
     props.canEdit && !props.disabled && !props.singlePicker && props.allowed.some((option) => option.level === props.entry.permission);
 
@@ -292,82 +317,98 @@ function AccessEntryRow(props: {
   );
 
   return (
-    <div class="group/access-row flex items-center gap-2 py-1.5">
-      <Show
-        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, t())} text-sm`} />
-          </div>
-        }
-      >
-        <CloudAvatar
-          username={displayName()}
-          userId={props.entry.principal.type === "user" ? props.entry.principal.userId : undefined}
-          avatarHash={props.entry.avatarHash}
-          size="xs"
-          class="h-7 w-7"
-        />
-      </Show>
-
-      {/* 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="truncate text-xs text-dimmed">({t().anyoneWithLink})</span>
-        </Show>
+    <div>
+      <div class="group/access-row flex items-center gap-2 py-1.5">
         <Show
-          when={
-            props.entry.principal.type === "service_account" &&
-            props.entry.serviceAccountKind &&
-            serviceAccountKindDisplay(props.entry.serviceAccountKind, t()).label
+          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, t())} text-sm`} />
+            </div>
           }
         >
-          {(label) => <span class="truncate text-xs text-dimmed">({label()})</span>}
+          <CloudAvatar
+            username={displayName()}
+            userId={props.entry.principal.type === "user" ? props.entry.principal.userId : undefined}
+            avatarHash={props.entry.avatarHash}
+            size="xs"
+            class="h-7 w-7"
+          />
         </Show>
-      </div>
 
-      {/* Permission badge — interactive single-value picker when editable,
+        {/* 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. A group's
+          members toggle always stays whole; the name takes the rest. */}
+        <div
+          class="grid min-w-0 flex-1 auto-cols-[minmax(0,max-content)] grid-flow-col items-baseline gap-1"
+          classList={{ "grid-cols-[minmax(0,max-content)_max-content]": props.coverage !== undefined }}
+        >
+          <span class="truncate text-sm">{displayName()}</span>
+          <Show when={props.entry.principal.type === "public"}>
+            <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>
+          <Show when={props.coverage}>{(coverage) => <GroupCoverageToggle coverage={coverage()} groupName={displayName()} />}</Show>
+        </div>
+
+        {/* Permission badge — interactive single-value picker when editable,
           plain span otherwise. */}
-      <Show when={isInteractive()} fallback={<span class={`${badgeClass} cursor-default`}>{badgeContent}</span>}>
-        <SelectChip
-          aria-label={t().permissionFor({ name: displayName() })}
-          value={() => props.entry.permission as GrantableLevel}
-          options={props.allowed.map((option) => ({
-            value: option.level,
-            label: option.label,
-            icon: `ti ${option.icon}`,
-          }))}
-          icon={`ti ${display().icon}`}
-          position="bottom-left"
-          onValueChange={(permission) => {
-            if (permission !== props.entry.permission) props.onUpdatePermission(permission);
-          }}
-        />
-      </Show>
+        <Show when={isInteractive()} fallback={<span class={`${badgeClass} cursor-default`}>{badgeContent}</span>}>
+          <SelectChip
+            aria-label={t().permissionFor({ name: displayName() })}
+            value={() => props.entry.permission as GrantableLevel}
+            options={props.allowed.map((option) => {
+              const locked = props.lastManager && option.level !== "admin";
+              return {
+                value: option.level,
+                label: option.label,
+                icon: `ti ${option.icon}`,
+                disabled: locked,
+                description: locked ? t().lastManagerOption({ level: manageLabel() }) : undefined,
+              };
+            })}
+            icon={`ti ${display().icon}`}
+            position="bottom-left"
+            onValueChange={(permission) => {
+              if (permission !== props.entry.permission) props.onUpdatePermission(permission);
+            }}
+          />
+        </Show>
 
-      {/* Destructive row actions stay quiet until the row is engaged. They
+        {/* Destructive row actions stay quiet until the row is engaged. They
           remain keyboard reachable and stay visible on touch-sized layouts. */}
-      <Show when={props.canEdit}>
-        <Tooltip.Anchor
-          content={t().remove({ name: displayName() })}
-          class="shrink-0 opacity-100 transition-opacity sm:opacity-0 sm:group-hover/access-row:opacity-100 sm:group-focus-within/access-row:opacity-100"
-        >
-          <IconButton
-            type="button"
-            label={t().remove({ name: displayName() })}
-            variant="ghost"
-            size="xs"
-            onClick={props.onRevoke}
-            disabled={props.disabled}
-            aria-label={t().remove({ name: displayName() })}
-            class="focus-ui flex h-7 w-7 items-center justify-center rounded text-zinc-400 transition-colors hover:bg-red-500/[0.08] hover:text-red-600 focus:opacity-100 dark:hover:text-red-400"
+        <Show when={props.canEdit}>
+          <Tooltip.Anchor
+            content={removeLabel()}
+            class="shrink-0 opacity-100 transition-opacity sm:opacity-0 sm:group-hover/access-row:opacity-100 sm:group-focus-within/access-row:opacity-100"
           >
-            <i class="ti ti-x text-sm" />
-          </IconButton>
-        </Tooltip.Anchor>
-      </Show>
+            <IconButton
+              type="button"
+              label={t().remove({ name: displayName() })}
+              variant="ghost"
+              size="xs"
+              onClick={props.onRevoke}
+              disabled={props.disabled || props.lastManager}
+              aria-label={t().remove({ name: displayName() })}
+              // A disabled button takes no focus and touch has no hover, so the reason also reaches assistive technology.
+              aria-description={props.lastManager ? removeLabel() : undefined}
+              class="focus-ui flex h-7 w-7 items-center justify-center rounded text-zinc-400 transition-colors focus:opacity-100 enabled:hover:bg-red-500/[0.08] enabled:hover:text-red-600 dark:enabled:hover:text-red-400"
+            >
+              <i class="ti ti-x text-sm" />
+            </IconButton>
+          </Tooltip.Anchor>
+        </Show>
+      </div>
+      {/* Expanding pushes the rows below down, only on the viewer's own request. */}
+      <Show when={props.coverage}>{(coverage) => <GroupCoveragePanel coverage={coverage()} groupName={displayName()} />}</Show>
     </div>
   );
 }

package/src/access/managers.ts

@@ -0,0 +1,32 @@
+import type { PermissionLevel, Principal, ServiceAccountKind } from "../contracts/shared";
+
+/** The fields of an access entry that decide whether it manages its resource. */
+export type ManagerCandidate = {
+  principal: Principal;
+  permission: PermissionLevel;
+  serviceAccountKind?: ServiceAccountKind | null;
+};
+
+/**
+ * Whether an entry keeps its resource manageable: `admin` for a user, a group,
+ * all signed-in users, or a standalone or agent service account. Public access
+ * never counts, and neither do resource-bound or user-delegated keys: they
+ * disappear with their key or their user without passing the resource's rules.
+ */
+export const isManagerEntry = (entry: ManagerCandidate): boolean => {
+  if (entry.permission !== "admin") return false;
+  switch (entry.principal.type) {
+    case "user":
+    case "group":
+    case "authenticated":
+      return true;
+    case "service_account":
+      return entry.serviceAccountKind === "standalone" || entry.serviceAccountKind === "agent";
+    case "public":
+      return false;
+  }
+};
+
+/** Whether a change from `before` to `after` takes a resource from at least one manager to none. */
+export const removesLastManager = (before: readonly ManagerCandidate[], after: readonly ManagerCandidate[]): boolean =>
+  before.some(isManagerEntry) && !after.some(isManagerEntry);

package/src/access/messages.ts

@@ -26,6 +26,24 @@ export const accessMessages = i18n.define({
       anyoneWithLink: "Anyone with the link",
       permissionFor: ({ name }: { name: string }) => `Permission for ${name}`,
       remove: ({ name }: { name: string }) => `Remove ${name}`,
+      lastManager: ({ level }: { level: string }) =>
+        `The last entry with “${level}” access can't be lowered or removed. Give another person or group “${level}” access first.`,
+      lastManagerOption: ({ level }: { level: string }) => `Available once another person or group has “${level}” access`,
+      groupMembers: "Members",
+      groupMembersOf: ({ name }: { name: string }) => `Members of ${name}`,
+      groupMemberCount: ({ count }: { count: number }) =>
+        count === 0
+          ? "No one receives access through this group right now."
+          : count === 1
+            ? "1 person receives access through this group right now."
+            : `${count.toLocaleString("en")} people receive access through this group right now.`,
+      groupMembersLoading: "Loading members…",
+      groupMembersHidden: "Your account can't see who belongs to this group.",
+      groupMembersFailed: "Members couldn't be loaded.",
+      retry: "Try again",
+      showMoreMembers: ({ count }: { count: number }) => `Show ${count.toLocaleString("en")} more`,
+      directoryGroupHint:
+        "This group comes from the directory. Local accounts such as guests can't be members, so give them access directly.",
       read: "Read",
       readDescription: "Read this resource through the app API.",
       write: "Write",
@@ -86,6 +104,24 @@ export const accessMessages = i18n.define({
       anyoneWithLink: "Alle mit dem Link",
       permissionFor: ({ name }) => `Berechtigung für ${name}`,
       remove: ({ name }) => `${name} entfernen`,
+      lastManager: ({ level }) =>
+        `Der letzte Eintrag mit Zugriff „${level}“ kann nicht herabgestuft oder entfernt werden. Gib zuerst einer anderen Person oder Gruppe Zugriff „${level}“.`,
+      lastManagerOption: ({ level }) => `Möglich, sobald eine weitere Person oder Gruppe Zugriff „${level}“ hat`,
+      groupMembers: "Mitglieder",
+      groupMembersOf: ({ name }) => `Mitglieder von ${name}`,
+      groupMemberCount: ({ count }) =>
+        count === 0
+          ? "Über diese Gruppe erhält gerade niemand Zugriff."
+          : count === 1
+            ? "Über diese Gruppe erhält gerade 1 Person Zugriff."
+            : `Über diese Gruppe erhalten gerade ${count.toLocaleString("de")} Personen Zugriff.`,
+      groupMembersLoading: "Mitglieder werden geladen…",
+      groupMembersHidden: "Dein Konto kann nicht sehen, wer zu dieser Gruppe gehört.",
+      groupMembersFailed: "Die Mitglieder konnten nicht geladen werden.",
+      retry: "Erneut versuchen",
+      showMoreMembers: ({ count }) => `${count.toLocaleString("de")} weitere anzeigen`,
+      directoryGroupHint:
+        "Diese Gruppe stammt aus dem Verzeichnis. Lokale Konten wie Gäste können nicht Mitglied sein; gib ihnen direkt Zugriff.",
       read: "Lesen",
       readDescription: "Diese Ressource über die App-API lesen.",
       write: "Schreiben",