@cosmicdrift/kumiko-bundled-features 0.210.0 → 0.211.0

package/src/tenant/handlers/team-list.query.ts

@@ -0,0 +1,250 @@
+import { selectMany } from "@cosmicdrift/kumiko-framework/bun-db";
+import {
+  access,
+  definePagedQueryHandler,
+  MAX_LIST_LIMIT,
+} from "@cosmicdrift/kumiko-framework/engine";
+import { InternalError } from "@cosmicdrift/kumiko-framework/errors";
+import { parseRoles } from "@cosmicdrift/kumiko-framework/utils";
+import { Temporal } from "temporal-polyfill";
+import { z } from "zod";
+import { userSessionTable } from "../../sessions";
+import { decryptStoredPii, mapWithConcurrency } from "../../shared";
+import { userTable } from "../../user";
+import { INVITATION_STATUS, tenantInvitationsTable } from "../invitation-table";
+import { tenantMembershipsTable } from "../membership-table";
+
+const KMS_POOL_CONCURRENCY = 4;
+
+type TeamStatus = "active" | "pending";
+
+type TeamRow = {
+  readonly id: string;
+  readonly email: string | null;
+  readonly displayName: string | null;
+  readonly roles: readonly string[];
+  readonly status: TeamStatus;
+  readonly createdAt: Temporal.Instant;
+  readonly lastSeenAt: Temporal.Instant | null;
+  readonly expiresAt: Temporal.Instant | null;
+};
+
+// The /members screen exposes one column per field above under the SAME
+// name — unlike delivery-log there is no display-alias to map, `sort` on
+// the wire already names a TeamRow field directly.
+const SORT_FIELDS = ["email", "status", "createdAt", "lastSeenAt"] as const;
+type SortField = (typeof SORT_FIELDS)[number];
+
+function isSortField(value: string): value is SortField {
+  return (SORT_FIELDS as readonly string[]).includes(value);
+}
+
+// Nulls (no session yet, invitation rows) sort last regardless of
+// direction — "unknown" reads as "least recent", not as a magic minimum
+// that flips to the top on `desc`.
+function compareTeamRows(a: TeamRow, b: TeamRow, field: SortField, dir: "asc" | "desc"): number {
+  const sign = dir === "asc" ? 1 : -1;
+  if (field === "createdAt") return Temporal.Instant.compare(a.createdAt, b.createdAt) * sign;
+  if (field === "lastSeenAt") {
+    if (a.lastSeenAt === null && b.lastSeenAt === null) return 0;
+    if (a.lastSeenAt === null) return 1;
+    if (b.lastSeenAt === null) return -1;
+    return Temporal.Instant.compare(a.lastSeenAt, b.lastSeenAt) * sign;
+  }
+  const av = field === "email" ? (a.email ?? "") : a.status;
+  const bv = field === "email" ? (b.email ?? "") : b.status;
+  return av.localeCompare(bv) * sign;
+}
+
+// User-selected facet filters (payload.filters, fw#2224) — `status` is the
+// only filterable field here: it's synthesized from which table a row came
+// from, not a stored column, so there is nothing else meaningful to filter
+// on server-side yet. `filter` (singular, screen-level static filter) is
+// accepted for schema-shape parity but unused — no /members screen sets one.
+function matchesStatusFilter(
+  row: TeamRow,
+  filters: readonly { field: string; value: unknown }[],
+): boolean {
+  const statusFilter = filters.find((f) => f.field === "status");
+  if (statusFilter === undefined) return true;
+  const allowed = Array.isArray(statusFilter.value) ? statusFilter.value : [statusFilter.value];
+  return allowed.includes(row.status);
+}
+
+export const teamListQuery = definePagedQueryHandler({
+  name: "team:list",
+  schema: z.object({
+    limit: z.number().int().min(1).max(MAX_LIST_LIMIT).default(50),
+    offset: z.number().int().nonnegative().optional(),
+    sort: z.string().optional(),
+    sortDirection: z.enum(["asc", "desc"]).optional(),
+    search: z.string().optional(),
+    totalCount: z.boolean().optional(),
+    filter: z
+      .object({
+        field: z.string(),
+        op: z.enum(["eq", "ne", "lt", "gt", "in"]),
+        value: z.unknown(),
+      })
+      .optional(),
+    filters: z
+      .array(
+        z.object({
+          field: z.string(),
+          op: z.enum(["eq", "ne", "lt", "gt", "in"]),
+          value: z.unknown(),
+        }),
+      )
+      .optional(),
+  }),
+  access: { roles: access.admin },
+  handler: async (query, ctx) => {
+    if (!ctx.systemDb) {
+      throw new InternalError({
+        message:
+          "tenant:query:team:list requires ctx.systemDb — is r.systemScope() still set on the tenant feature?",
+      });
+    }
+    const db = ctx.systemDb.assertTenantMatch(query.user.tenantId);
+    const tenantId = query.user.tenantId;
+
+    const membershipRows = await selectMany(db, tenantMembershipsTable, { tenantId });
+    const userIds = [...new Set(membershipRows.map((row) => String(row["userId"])))];
+    const users =
+      userIds.length > 0
+        ? await selectMany<{ id: unknown; email?: unknown; displayName?: unknown }>(db, userTable, {
+            id: userIds,
+          })
+        : [];
+
+    const lastSeenByUserId = new Map<string, Temporal.Instant>();
+    if (userIds.length > 0) {
+      try {
+        const sessions = await selectMany<{ userId: unknown; lastSeenAt: unknown }>(
+          db,
+          userSessionTable,
+          { tenantId, userId: userIds },
+        );
+        for (const session of sessions) {
+          const value = session["lastSeenAt"];
+          if (!(value instanceof Temporal.Instant)) continue;
+          const userId = String(session["userId"]);
+          const current = lastSeenByUserId.get(userId);
+          if (current === undefined || Temporal.Instant.compare(value, current) > 0) {
+            lastSeenByUserId.set(userId, value);
+          }
+        }
+      } catch (err) {
+        // ponytail: lean sample apps (admin-console) mount auth without
+        // sessions — store_user_sessions never gets pushed. Integration tests
+        // may seed the table without mounting the feature; prod mounts both.
+        if ((err as { code?: string }).code !== "42P01") throw err;
+      }
+    }
+
+    // Bounded, not Promise.all/sequential-per-item: shares the KMS
+    // adapter's small dedicated pool (max 4, see members.query.ts) with the
+    // invitations decrypt below — the two passes run one after the other
+    // (await, not Promise.all), so combined concurrency never exceeds 4.
+    const decryptedUsers = await mapWithConcurrency(users, KMS_POOL_CONCURRENCY, async (user) => {
+      const email =
+        typeof user.email === "string"
+          ? await decryptStoredPii(user.email, "email", "tenant:team-list")
+          : null;
+      const displayName =
+        typeof user.displayName === "string"
+          ? await decryptStoredPii(user.displayName, "displayName", "tenant:team-list")
+          : null;
+      return { userId: String(user.id), email, displayName };
+    });
+    const decryptedByUserId = new Map(decryptedUsers.map((d) => [d.userId, d]));
+
+    const memberRows: TeamRow[] = membershipRows.map((row) => {
+      const userId = String(row["userId"]);
+      const decrypted = decryptedByUserId.get(userId);
+      const createdAt = row["createdAt"];
+      return {
+        id: String(row["id"]),
+        email: decrypted?.email ?? null,
+        displayName: decrypted?.displayName ?? null,
+        roles: parseRoles(row["roles"]),
+        status: "active",
+        createdAt: createdAt instanceof Temporal.Instant ? createdAt : Temporal.Now.instant(),
+        lastSeenAt: lastSeenByUserId.get(userId) ?? null,
+        expiresAt: null,
+      };
+    });
+
+    // Pending only — accepted/cancelled/expired invitations don't belong on
+    // this screen (accepted ones already surfaced as a membership row above;
+    // the rest is history for a separate audit feature). SQL-side filter,
+    // same rationale as invitations.query.ts.
+    const pendingInvitations = await selectMany<Record<string, unknown>>(
+      db,
+      tenantInvitationsTable,
+      { tenantId, status: INVITATION_STATUS.pending },
+    );
+    const invitationRows: TeamRow[] = await mapWithConcurrency(
+      pendingInvitations,
+      KMS_POOL_CONCURRENCY,
+      async (row): Promise<TeamRow> => {
+        const email = row["email"];
+        const decryptedEmail =
+          typeof email === "string"
+            ? await decryptStoredPii(email, "email", "tenant:team-list")
+            : null;
+        const createdAt = row["createdAt"];
+        const expiresAt = row["expiresAt"];
+        return {
+          id: String(row["id"]),
+          email: decryptedEmail,
+          displayName: null,
+          roles: typeof row["role"] === "string" ? [row["role"]] : [],
+          status: "pending",
+          createdAt: createdAt instanceof Temporal.Instant ? createdAt : Temporal.Now.instant(),
+          lastSeenAt: null,
+          expiresAt: expiresAt instanceof Temporal.Instant ? expiresAt : null,
+        };
+      },
+    );
+
+    // Merge → filter → sort → slice, in that order: `total` and the page
+    // window both have to be computed against the FILTERED set, not the raw
+    // merge, or the pager and the status-facet disagree with each other.
+    //
+    // ponytail: reads both tables fully and merges/sorts/slices in JS —
+    // there is no cursor. A cursor over a list merged from two tables in
+    // application code is either wrong (each source paginates
+    // independently, so page boundaries don't line up) or has to read
+    // everything anyway to know where the boundary falls. This holds up to
+    // the order of a few thousand members per tenant; past that the fix is
+    // a real combined read-projection (a materialized view/table kept in
+    // sync by both tenant-membership and tenant-invitation events), not a
+    // cursor bolted onto this merge.
+    const search = query.payload.search?.trim().toLowerCase();
+    const merged = [...memberRows, ...invitationRows].filter((row) => {
+      if (search === undefined || search === "") return true;
+      return (
+        (row.email?.toLowerCase().includes(search) ?? false) ||
+        (row.displayName?.toLowerCase().includes(search) ?? false)
+      );
+    });
+    const filtered = merged.filter((row) => matchesStatusFilter(row, query.payload.filters ?? []));
+
+    const requestedSort = query.payload.sort;
+    const sortField: SortField =
+      requestedSort !== undefined && isSortField(requestedSort) ? requestedSort : "createdAt";
+    const sortDirection = query.payload.sortDirection ?? "desc";
+    const sorted = [...filtered].sort((a, b) => compareTeamRows(a, b, sortField, sortDirection));
+
+    const offset = query.payload.offset ?? 0;
+    const limit = query.payload.limit;
+    const page = sorted.slice(offset, offset + limit);
+
+    return {
+      rows: page,
+      nextCursor: null,
+      ...(query.payload.totalCount === true && { total: filtered.length }),
+    };
+  },
+});

package/src/tenant/i18n.ts

@@ -4,7 +4,27 @@ export const TENANT_I18N: Readonly<Record<string, LocalizedString>> = {
   "screen:tenant-list.title": { en: "Tenants" },
   "screen:tenant-edit.title": { en: "Edit tenant" },
   "screen:members.title": { en: "Team" },
+  "screen:invite-create.title": { en: "New invitation" },
   "tenant.nav.members": { en: "Team" },
+  "tenant.members.col.email": { en: "Email" },
+  "tenant.members.col.roles": { en: "Roles" },
+  "tenant.members.col.status": { en: "Status" },
+  "tenant.members.col.created": { en: "Created" },
+  "tenant.members.col.lastActivity": { en: "Last activity" },
+  "tenant.members.filter.status": { en: "Status" },
+  "tenant.members.filter.status.option.active": { en: "Active" },
+  "tenant.members.filter.status.option.pending": { en: "Pending" },
+  "tenant.members.cancel": { en: "Cancel invitation" },
+  "tenant.members.cancel.confirm": {
+    en: "Cancel this invitation? The invite link stops working immediately.",
+  },
+  "tenant.members.invite.title": { en: "New invitation" },
+  "tenant.members.invite.submit": { en: "Send invitation" },
+  "tenant:entity:__action-form__:field:email": { en: "Email" },
+  "tenant:entity:__action-form__:field:role": { en: "Role" },
+  "tenant:entity:__action-form__:field:role:option:User": { en: "User" },
+  "tenant:entity:__action-form__:field:role:option:Admin": { en: "Admin" },
+  "tenant:entity:__action-form__:field:role:option:Editor": { en: "Editor" },
   "tenant:entity:tenant:field:key": { en: "Key" },
   "tenant:entity:tenant:field:name": { en: "Name" },
   "tenant:entity:tenant:field:isEnabled": { en: "Enabled" },

package/src/tenant/screens.ts

@@ -1,7 +1,19 @@
-import type {
-  EntityEditScreenDefinition,
-  EntityListScreenDefinition,
+import { AuthHandlers } from "@cosmicdrift/kumiko-bundled-features/auth-email-password/constants";
+import {
+  access,
+  type EntityEditScreenDefinition,
+  type EntityListScreenDefinition,
+  type ScreenDefinition,
 } from "@cosmicdrift/kumiko-framework/engine";
+import {
+  DEFAULT_INVITE_ROLE_OPTIONS,
+  INVITE_CREATE_SCREEN_ID,
+  MEMBER_ROLES_CELL_COMPONENT,
+  MEMBER_STATUS_CELL_COMPONENT,
+  MEMBERS_SCREEN_ID,
+  TenantHandlers,
+  TenantQueries,
+} from "./constants";
 
 // Cross-tenant SystemAdmin platform view of the tenants themselves. The tenant
 // feature runs with `r.systemScope()`, so the entityList returns every tenant.
@@ -45,3 +57,99 @@ export const tenantEditScreen: EntityEditScreenDefinition = {
   allowDelete: false,
   access: { roles: ["SystemAdmin"] },
 };
+
+// Tenant-admin team UI (§2.6 bundled-features-screen-standardisierung.md):
+// one list, active members and pending invitations merged into a single
+// `status` column, pendings narrowed via the `status` facet instead of a
+// separate card. Backed by tenant:query:team:list (no role-edit — that
+// stays on updateMemberRoles, SystemAdmin-only, see feature.ts).
+//
+// `inviteScreen` gates the toolbar's "invite" drawer button: it targets
+// `inviteCreateScreen`, whose write-handler is owned by auth-email-password
+// and only registered when that feature's `invite` option is configured
+// (see feature.ts's `TenantFeatureOptions`). `tenant` has no compile-time way
+// to know whether an app configured that — the flag defaults to false so
+// `createTenantFeature()` alone (no auth-email-password, or auth-email-password
+// without `invite`) keeps booting; apps that DO configure invite opt in.
+export function createMembersScreen(options?: {
+  readonly inviteScreen?: boolean;
+}): ScreenDefinition {
+  return {
+    id: MEMBERS_SCREEN_ID,
+    type: "projectionList",
+    query: TenantQueries.teamList,
+    columns: [
+      { field: "email", label: "tenant.members.col.email" },
+      {
+        field: "roles",
+        label: "tenant.members.col.roles",
+        renderer: { react: { __component: MEMBER_ROLES_CELL_COMPONENT } },
+      },
+      {
+        field: "status",
+        label: "tenant.members.col.status",
+        renderer: { react: { __component: MEMBER_STATUS_CELL_COMPONENT } },
+      },
+      { field: "createdAt", label: "tenant.members.col.created" },
+      { field: "lastSeenAt", label: "tenant.members.col.lastActivity" },
+    ],
+    defaultSort: { field: "createdAt", dir: "desc" },
+    searchable: true,
+    facets: [
+      {
+        field: "status",
+        type: "select",
+        label: "tenant.members.filter.status",
+        options: [
+          { value: "active", label: "tenant.members.filter.status.option.active" },
+          { value: "pending", label: "tenant.members.filter.status.option.pending" },
+        ],
+      },
+    ],
+    rowActions: [
+      {
+        kind: "writeHandler",
+        id: "cancel-invitation",
+        label: "tenant.members.cancel",
+        handler: TenantHandlers.cancelInvitation,
+        payload: { map: { invitationId: "id" } },
+        confirm: "tenant.members.cancel.confirm",
+        style: "danger",
+        visible: { field: "status", eq: "pending" },
+      },
+    ],
+    ...(options?.inviteScreen && {
+      toolbarActions: [
+        {
+          kind: "drawer",
+          id: "invite",
+          label: "tenant.members.invite.title",
+          screen: INVITE_CREATE_SCREEN_ID,
+          style: "primary",
+        },
+      ],
+    }),
+    access: { roles: access.admin },
+  } satisfies ScreenDefinition;
+}
+
+// Drawer target for membersScreen's "invite" toolbar action — kind:"drawer"
+// only resolves same-feature actionForm screens, so this lives here even
+// though its handler is owned by auth-email-password. Not `r.nav()`'d: the
+// only entry point is the drawer button on /members. Only registered by
+// feature.ts when `TenantFeatureOptions.inviteScreen` is set — see
+// createMembersScreen's doc comment above for why.
+export const inviteCreateScreen = {
+  id: INVITE_CREATE_SCREEN_ID,
+  type: "actionForm",
+  handler: AuthHandlers.inviteCreate,
+  fields: {
+    email: { type: "text", required: true, format: "email" },
+    role: { type: "select", options: DEFAULT_INVITE_ROLE_OPTIONS, required: true },
+  },
+  layout: {
+    sections: [{ fields: ["email", "role"] }],
+  },
+  submitLabel: "tenant.members.invite.submit",
+  access: { roles: access.admin },
+} satisfies ScreenDefinition;

package/src/tenant/web/client-plugin.tsx

@@ -1,9 +1,13 @@
 // @runtime client
 import { mergeTranslations, type TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
 import type { ClientFeatureDefinition } from "@cosmicdrift/kumiko-renderer-web";
-import { MEMBERS_SCREEN_ID, TENANT_FEATURE } from "../constants";
-import { defaultTranslations } from "./i18n";
-import { MembersScreen } from "./members-screen";
+import {
+  MEMBER_ROLES_CELL_COMPONENT,
+  MEMBER_STATUS_CELL_COMPONENT,
+  TENANT_FEATURE,
+} from "../constants";
+import { MemberRolesCell } from "./member-roles-cell";
+import { MemberStatusCell } from "./member-status-cell";
 
 export type TenantClientOptions = {
   readonly translations?: TranslationsByLocale;
@@ -12,9 +16,10 @@ export type TenantClientOptions = {
 export function tenantClient(options?: TenantClientOptions): ClientFeatureDefinition {
   return {
     name: TENANT_FEATURE,
-    translations: mergeTranslations(defaultTranslations, options?.translations ?? {}),
-    components: {
-      [MEMBERS_SCREEN_ID]: MembersScreen,
+    translations: mergeTranslations({}, options?.translations ?? {}),
+    columnRenderers: {
+      [MEMBER_STATUS_CELL_COMPONENT]: MemberStatusCell,
+      [MEMBER_ROLES_CELL_COMPONENT]: MemberRolesCell,
     },
   };
 }

package/src/tenant/web/index.ts

@@ -1,4 +1,4 @@
 // @runtime client
 export { type TenantClientOptions, tenantClient } from "./client-plugin";
-export { defaultTranslations } from "./i18n";
-export { MembersScreen, type MembersScreenProps } from "./members-screen";
+export { MemberRolesCell } from "./member-roles-cell";
+export { MemberStatusCell } from "./member-status-cell";

package/src/tenant/web/member-roles-cell.tsx

@@ -0,0 +1,12 @@
+// @runtime client
+// Column-renderer for the /members screen's roles column — `roles` is a
+// `readonly string[]` on TeamRow (see team-list.query.ts), and DataTable has
+// no default array-to-cell formatting, so this joins it into one string.
+
+import type { ColumnRendererProps } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+
+export function MemberRolesCell({ row }: ColumnRendererProps): ReactNode {
+  const roles = row["roles"];
+  return Array.isArray(roles) ? roles.join(", ") : "";
+}

package/src/tenant/web/member-status-cell.tsx

@@ -0,0 +1,23 @@
+// @runtime client
+// Column-renderer for the /members screen's status column, registered via
+// `tenantClient()`'s `columnRenderers` map (screen.columns[].renderer in
+// screens.ts). The list frame itself is the generic declarative
+// projectionList renderer — only this one cell stays TSX.
+
+import type { ColumnRendererProps } from "@cosmicdrift/kumiko-renderer";
+import { StatusBadge, type StatusTone } from "@cosmicdrift/kumiko-renderer-web";
+import type { ReactNode } from "react";
+
+const STATUS_TONE: Readonly<Record<string, StatusTone>> = {
+  active: "ok",
+  pending: "muted",
+};
+
+export function MemberStatusCell({ row }: ColumnRendererProps): ReactNode {
+  const status = typeof row["status"] === "string" ? row["status"] : "";
+  return (
+    <StatusBadge tone={STATUS_TONE[status] ?? "muted"} testId="member-status-cell">
+      {status}
+    </StatusBadge>
+  );
+}

package/src/tenant/web/i18n.ts

@@ -1,24 +0,0 @@
-// @runtime client
-import type { TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
-
-export const defaultTranslations: TranslationsByLocale = {
-  en: {
-    "tenant.members.title": "Members",
-    "tenant.members.loading": "Loading members…",
-    "tenant.members.active": "Active members",
-    "tenant.members.invite.title": "New invitation",
-    "tenant.members.invite.email": "Email",
-    "tenant.members.invite.role": "Role",
-    "tenant.members.invite.submit": "Send invitation",
-    "tenant.members.invite.submitting": "Sending invitation…",
-    "tenant.members.invite.success": "Invitation sent to {email}",
-    "tenant.members.pending": "Pending invitations",
-    "tenant.members.pending.empty": "No pending invitations.",
-    "tenant.members.cancel": "Cancel",
-    "tenant.members.col.userId": "User ID",
-    "tenant.members.col.roles": "Roles",
-    "tenant.members.col.email": "Email",
-    "tenant.members.col.expires": "Valid until",
-    "tenant.nav.members": "Team",
-  },
-};