@flamingo-stack/openframe-frontend-core 0.0.853 → 0.0.855

package/src/components/chat/hooks/use-chat-attachment-image-gallery.tsx

@@ -11,8 +11,9 @@
  *     while closed.
  *
  * Behavior on click:
- *   1. Filter for `<img>` whose `src` starts with the runtime's
- *      `attachmentViewUrlPrefix` (so non-chat images don't intercept).
+ *   1. Filter for `<img>` whose address (`assetSrcOf`) starts with the
+ *      runtime's `attachmentViewUrlPrefix` (so non-chat images don't
+ *      intercept).
  *   2. Walk up to the nearest `[data-message-role]` ancestor — the
  *      boundary the chat-shell wraps each message bubble with.
  *   3. Collect ALL chat-attachment `<img>`s inside that boundary in
@@ -51,32 +52,32 @@ export function useChatAttachmentImageGallery() {
     const onClick = (ev: Event) => {
       const target = ev.target as HTMLElement | null;
       if (!target) return;
-      // Match an <img> whose `src` starts with the proxy URL prefix.
+      // Match an <img> whose address starts with the proxy URL prefix.
       const img = target.closest('img');
-      if (!img || !img.src.startsWith(absolutize(viewUrlPrefix))) return;
+      if (!img || !assetSrcOf(img).startsWith(absolutize(viewUrlPrefix))) return;
 
       // Walk up to the message-bubble boundary.
       const bubble = img.closest('[data-message-role]');
       if (!bubble) {
         // Fallback: open the modal with just the clicked image.
         ev.preventDefault();
-        setState({ isOpen: true, images: [img.src], initialIndex: 0 });
+        setState({ isOpen: true, images: [assetSrcOf(img)], initialIndex: 0 });
         return;
       }
 
       // Collect all chat-attachment images inside this bubble in DOM
-      // order. The `closest` lookup matched img.src.startsWith already,
+      // order. The `closest` lookup matched the clicked one's address already,
       // but we re-check below because `querySelectorAll` returns ALL
       // <img>s in the bubble (avatar images etc.).
       const allImgs = Array.from(bubble.querySelectorAll('img'));
-      const matching = allImgs.filter(el => el.src.startsWith(absolutize(viewUrlPrefix)));
+      const matching = allImgs.filter(el => assetSrcOf(el).startsWith(absolutize(viewUrlPrefix)));
       if (matching.length === 0) return;
 
       const idx = Math.max(0, matching.indexOf(img));
       ev.preventDefault();
       setState({
         isOpen: true,
-        images: matching.map(el => el.src),
+        images: matching.map(assetSrcOf),
         initialIndex: idx,
       });
     };
@@ -112,3 +113,13 @@ function absolutize(prefix: string): string {
   if (typeof window === 'undefined') return prefix;
   return `${window.location.origin}${prefix.startsWith('/') ? '' : '/'}${prefix}`;
 }
+
+/**
+ * The address an `<img>` was asked to draw. Where auth rides in a header, the boxed `Image` draws a blob fetched
+ * with it and keeps the address in `data-asset-src`: `.src` would be `blob:…`, matching no prefix, and the gallery
+ * would never open in the native shells. Resolved against the page, as `.src` is: on dev-ticket web it is relative.
+ */
+function assetSrcOf(img: HTMLImageElement): string {
+  const declared = img.dataset.assetSrc;
+  return declared ? new URL(declared, window.location.href).href : img.src;
+}

package/src/components/features/cloud-tenants/index.ts

@@ -1,27 +1,32 @@
 'use client';
 
-export { TenantsTableView } from './tenants-table-view';
-export type { TenantsTableViewProps } from './tenants-table-view';
+export { TENANTS_TABLE_FILTER_COLUMNS, TenantsTableView } from './tenants-table-view';
+export type { TenantsTableFilterColumn, TenantsTableFilters, TenantsTableViewProps } from './tenants-table-view';
 export { TenantCell } from './tenant-cell';
 export type { TenantCellProps } from './tenant-cell';
 export { TenantCustomerCell } from './tenant-customer-cell';
 export type { TenantCustomerCellProps } from './tenant-customer-cell';
+export { TenantLicensesCell } from './tenant-licenses-cell';
+export type { TenantLicensesCellProps } from './tenant-licenses-cell';
 export { TenantAccessCell } from './tenant-access-cell';
 export type { TenantAccessCellProps } from './tenant-access-cell';
 export { TENANT_COLUMNS, TENANTS_TABLE_COLUMNS } from './tenants-table-columns';
 export type { TenantsTableColumn } from './tenants-table-columns';
-export type { TenantRow } from './tenant-row';
+export type { MultiCustomerTenantRow, TenantCustomer, TenantLicenseSummary, TenantRow } from './tenant-row';
 export {
   accessStateTag,
   formatLastRead,
   lastReadAt,
+  licenseSummaryLines,
   providerMark,
   TENANT_EMPTY_VALUE,
+  unattributedLabel,
   usersCountLabel,
 } from './tenant-presentation';
 export type {
   ProviderLogo,
   ProviderMark,
+  TenantLicenseLines,
   TenantStatusTag,
   TenantAccessState,
   TenantProvider,

package/src/components/features/cloud-tenants/single-customer-tenants-table-view.tsx

@@ -0,0 +1,234 @@
+'use client';
+
+// Lib main's tenants list, one customer per tenant: `TenantsTableView`'s default variant, the list a host renders while
+// tenant-management-v2 is off. Its markup is lib main's to the class; it is deleted with that variant.
+
+import { useMemo } from 'react';
+import { cn } from '../../../utils/cn';
+import { openInNewTab } from '../../../utils/open-in-new-tab';
+import { ArrowRightUpIcon } from '../../icons-v2-generated/arrows/arrow-right-up-icon';
+import { Button } from '../../ui/button';
+import { type ColumnDef, DataTable, dataTableLoadingRows, type Row, useDataTable } from '../../ui/data-table';
+import { useLoadingScope } from '../../ui/loading-scope';
+import { SquareAvatar } from '../../ui/square-avatar';
+import { Tag } from '../../ui/tag';
+import { TruncateText } from '../../ui/truncate-text';
+import { TenantCell } from './tenant-cell';
+import { accessStateTag, formatLastRead, usersCountLabel } from './tenant-presentation';
+import type { TenantRow } from './tenant-row';
+import type { TenantsTableColumn } from './tenants-table-columns';
+
+/** Column layout of the single-customer list (Figma 1699-8249: Tenant, Customers, Access, open). */
+const SINGLE_CUSTOMER_TENANT_COLUMNS = {
+  tenant: { id: 'tenant', header: 'Tenant', width: 'flex-1 min-w-0' },
+  customer: { id: 'customer', header: 'Customers', width: 'w-[220px] content-lg:w-[340px]', hideAt: 'md' },
+  access: { id: 'access', header: 'Access', width: 'w-[200px] content-lg:w-[216px]' },
+  open: { id: 'open', width: 'w-12 shrink-0 flex-none', hideAt: 'md', align: 'right' },
+} satisfies Record<string, TenantsTableColumn>;
+
+const getRowId = (row: TenantRow) => row.id;
+
+const columnMeta = ({ width, hideAt, align }: TenantsTableColumn) => ({ width, hideAt, align });
+
+/** A tenant still being read: a row the table keys, every field a cell shows empty (each draws its loading form). */
+const loadingTenant = (id: string): TenantRow => ({
+  id,
+  name: '',
+  provider: '',
+  customer: { name: '' },
+  accessState: '',
+});
+
+/** CUSTOMERS column: customer logo + name over the synced user count. */
+function SingleCustomerTenantCustomerCell({
+  name,
+  imageUrl,
+  userCount,
+}: {
+  name: string;
+  imageUrl?: string | null;
+  userCount?: number | null;
+}) {
+  // While the tenant is read (a loading scope) the user count is a bar too (its label is never empty).
+  const loading = useLoadingScope();
+  return (
+    <div className="flex min-w-0 flex-col justify-center">
+      <div className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)]">
+        <SquareAvatar src={imageUrl ?? undefined} alt={name} fallback={name} size="xs" variant="square" />
+        <TruncateText>{name}</TruncateText>
+      </div>
+      <TruncateText variant="h6" tone="secondary" loading={loading}>
+        {usersCountLabel(userCount)}
+      </TruncateText>
+    </div>
+  );
+}
+
+/** ACCESS column: the access tag over "Last read: ...". */
+function SingleCustomerTenantAccessCell({
+  accessState,
+  lastReadAt,
+  now,
+}: {
+  accessState: string;
+  lastReadAt?: string | null;
+  now?: Date;
+}) {
+  // While the tenant is read (a loading scope) the access tag and its last read are their loading forms.
+  const loading = useLoadingScope();
+  return (
+    <div className="flex min-w-0 flex-col justify-center gap-[var(--spacing-system-xxs)]">
+      <Tag {...accessStateTag(accessState)} loading={loading} className="self-start" />
+      <TruncateText variant="h6" tone="secondary" loading={loading}>
+        {`Last read: ${formatLastRead(lastReadAt, now)}`}
+      </TruncateText>
+    </div>
+  );
+}
+
+/** The row's open-in-new-tab button: static chrome, drawn real and inert while the row is read. */
+function OpenTenantButton({ href, name }: { href: string; name: string }) {
+  const loading = useLoadingScope();
+  return (
+    // The row itself is the details link; a nested `<a>` is invalid, so this opens the same href.
+    <div data-no-row-click className="pointer-events-auto flex items-center justify-end">
+      <Button
+        onClick={loading ? undefined : openInNewTab(href)}
+        disabled={loading}
+        variant="outline"
+        size="icon"
+        leftIcon={<ArrowRightUpIcon className="h-5 w-5" />}
+        aria-label={`Open ${name} in new tab`}
+        className="bg-ods-card"
+      />
+    </div>
+  );
+}
+
+export interface SingleCustomerTenantsTableViewProps {
+  /** The default: one customer per tenant, no licences and no funnels. */
+  variant?: 'single-customer';
+  rows: TenantRow[];
+  /** Where a row leads: the row is a link to it, and its last cell opens it in a new tab. */
+  getHref: (row: TenantRow) => string;
+  /** The search the rows answer; named by the "no match" message. */
+  search?: string;
+  /** Funnels belong to the multi-customer list. */
+  filters?: never;
+  /** The rows on screen are the previous result of a search still loading: they dim. */
+  isPending?: boolean;
+  /** All matching tenants, loaded or not. Default: the rows given. */
+  totalCount?: number;
+  stickyHeaderOffset?: string;
+  skeletonRows?: number;
+  hasNextPage?: boolean;
+  isFetchingNextPage?: boolean;
+  onLoadMore?: () => void;
+  /** The clock "Last read" is relative to. Default: the moment of the render. */
+  now?: Date;
+}
+
+/** The rows a loading tenants table draws when the host states none (a typical page of tenants). */
+const TENANTS_TABLE_SKELETON_ROWS = 20;
+
+/** The tenants list: tenant, customer, access state and a way into each tenant's details. */
+export function SingleCustomerTenantsTableView({
+  rows,
+  getHref,
+  search = '',
+  isPending = false,
+  totalCount,
+  stickyHeaderOffset,
+  skeletonRows = TENANTS_TABLE_SKELETON_ROWS,
+  hasNextPage = false,
+  isFetchingNextPage = false,
+  onLoadMore,
+  now,
+}: SingleCustomerTenantsTableViewProps) {
+  const columns = useMemo<ColumnDef<TenantRow>[]>(
+    () => [
+      {
+        id: SINGLE_CUSTOMER_TENANT_COLUMNS.tenant.id,
+        header: SINGLE_CUSTOMER_TENANT_COLUMNS.tenant.header,
+        cell: ({ row }: { row: Row<TenantRow> }) => (
+          <TenantCell provider={row.original.provider} name={row.original.name} domain={row.original.domain} />
+        ),
+        enableSorting: false,
+        meta: columnMeta(SINGLE_CUSTOMER_TENANT_COLUMNS.tenant),
+      },
+      {
+        id: SINGLE_CUSTOMER_TENANT_COLUMNS.customer.id,
+        header: SINGLE_CUSTOMER_TENANT_COLUMNS.customer.header,
+        cell: ({ row }: { row: Row<TenantRow> }) => (
+          <SingleCustomerTenantCustomerCell
+            name={row.original.customer.name}
+            imageUrl={row.original.customer.imageUrl}
+            userCount={row.original.userCount}
+          />
+        ),
+        enableSorting: false,
+        meta: columnMeta(SINGLE_CUSTOMER_TENANT_COLUMNS.customer),
+      },
+      {
+        id: SINGLE_CUSTOMER_TENANT_COLUMNS.access.id,
+        header: SINGLE_CUSTOMER_TENANT_COLUMNS.access.header,
+        cell: ({ row }: { row: Row<TenantRow> }) => (
+          <SingleCustomerTenantAccessCell
+            accessState={row.original.accessState}
+            lastReadAt={row.original.lastReadAt}
+            now={now}
+          />
+        ),
+        enableSorting: false,
+        meta: columnMeta(SINGLE_CUSTOMER_TENANT_COLUMNS.access),
+      },
+      {
+        id: SINGLE_CUSTOMER_TENANT_COLUMNS.open.id,
+        cell: ({ row }: { row: Row<TenantRow> }) => (
+          <OpenTenantButton href={getHref(row.original)} name={row.original.name} />
+        ),
+        enableSorting: false,
+        meta: columnMeta(SINGLE_CUSTOMER_TENANT_COLUMNS.open),
+      },
+    ],
+    [getHref, now],
+  );
+
+  // A page's loading scope: the table holds one page of placeholder rows, drawn with the real cells (`loadingCells`).
+  const loading = useLoadingScope();
+  const loadingRows = useMemo(
+    () => (loading ? dataTableLoadingRows(skeletonRows, loadingTenant) : null),
+    [loading, skeletonRows],
+  );
+  const table = useDataTable<TenantRow>({ data: loadingRows ?? rows, columns, getRowId, enableSorting: false });
+
+  return (
+    // Dim, don't unmount, the stale rows while a deferred search refetches.
+    <div className={cn('transition-opacity duration-200', isPending && 'opacity-60')}>
+      <DataTable table={table}>
+        <DataTable.Header
+          stickyHeader={stickyHeaderOffset !== undefined}
+          stickyHeaderOffset={stickyHeaderOffset}
+          rightSlot={<DataTable.RowCount itemName="result" totalCount={totalCount ?? rows.length} loading={loading} />}
+        />
+        <DataTable.Body
+          loadingCells
+          skeletonRows={skeletonRows}
+          emptyState={{
+            title: 'No tenants match',
+            description: `Nothing matches "${search}". Try a different name, domain or customer.`,
+          }}
+          rowClassName="mb-[var(--spacing-system-xxs)]"
+          rowHref={getHref}
+        />
+        {rows.length > 0 && onLoadMore && (
+          <DataTable.InfiniteFooter
+            hasNextPage={hasNextPage}
+            isFetchingNextPage={isFetchingNextPage}
+            onLoadMore={onLoadMore}
+          />
+        )}
+      </DataTable>
+    </div>
+  );
+}

package/src/components/features/cloud-tenants/tenant-access-cell.tsx

@@ -8,20 +8,27 @@ import { accessStateTag, formatLastRead } from './tenant-presentation';
 export interface TenantAccessCellProps {
   accessState: string;
   lastReadAt?: string | null;
+  /** A person paused the sync: said instead of the last read. */
+  syncPaused?: boolean;
   /** The clock "Last read" is relative to. Default: the moment of the render. */
   now?: Date;
 }
 
-/** ACCESS column: the access tag over "Last read: ...". */
-export function TenantAccessCell({ accessState, lastReadAt, now }: TenantAccessCellProps) {
+/** ACCESS column: the access tag over "Last read: ..." or "Sync paused"; a phone keeps the tag alone (Figma 3033-9343). */
+export function TenantAccessCell({ accessState, lastReadAt, syncPaused = false, now }: TenantAccessCellProps) {
   // While the tenant is read (a loading scope) the access tag and its last read are their loading forms.
   const loading = useLoadingScope();
+  const line = syncPaused ? 'Sync paused' : lastReadAt ? `Last read: ${formatLastRead(lastReadAt, now)}` : null;
   return (
     <div className="flex min-w-0 flex-col justify-center gap-[var(--spacing-system-xxs)]">
       <Tag {...accessStateTag(accessState)} loading={loading} className="self-start" />
-      <TruncateText variant="h6" tone="secondary" loading={loading}>
-        {`Last read: ${formatLastRead(lastReadAt, now)}`}
-      </TruncateText>
+      {(loading || line) && (
+        <div className="hidden min-w-0 content-md:block">
+          <TruncateText variant="h6" tone="secondary" loading={loading}>
+            {line ?? ''}
+          </TruncateText>
+        </div>
+      )}
     </div>
   );
 }

package/src/components/features/cloud-tenants/tenant-customer-cell.tsx

@@ -3,27 +3,63 @@
 import { useLoadingScope } from '../../ui/loading-scope';
 import { SquareAvatar } from '../../ui/square-avatar';
 import { TruncateText } from '../../ui/truncate-text';
-import { usersCountLabel } from './tenant-presentation';
+import { lowercaseUsersCountLabel, TENANT_EMPTY_VALUE, unattributedLabel } from './tenant-presentation';
+import type { TenantCustomer } from './tenant-row';
 
 export interface TenantCustomerCellProps {
-  name: string;
-  /** A URL the browser can load as is. */
-  imageUrl?: string | null;
+  /** In the host's order: the cell names the first and counts the rest. */
+  customers: readonly TenantCustomer[];
   userCount?: number | null;
+  /** Users no customer's rule claims: while there are any, the count line says how many, in the warning colour. */
+  unattributedUserCount?: number | null;
+  /** Nothing has been read from this directory yet: the count line says so. */
+  neverRead?: boolean;
 }
 
-/** CUSTOMERS column: customer logo + name over the synced user count. */
-export function TenantCustomerCell({ name, imageUrl, userCount }: TenantCustomerCellProps) {
+/**
+ * CUSTOMERS column: the first customer's logo + name and "+N" for the rest, over the synced user count — or
+ * "30 of 412 unattributed" while some users belong to no customer, or "Never read" before the first read.
+ */
+export function TenantCustomerCell({
+  customers,
+  userCount,
+  unattributedUserCount,
+  neverRead = false,
+}: TenantCustomerCellProps) {
   // While the tenant is read (a loading scope) the user count is a bar too (its label is never empty).
   const loading = useLoadingScope();
+  const [first] = customers;
+  const more = customers.length - 1;
+  const unattributed = unattributedLabel(unattributedUserCount, userCount);
   return (
     <div className="flex min-w-0 flex-col justify-center">
-      <div className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)]">
-        <SquareAvatar src={imageUrl ?? undefined} alt={name} fallback={name} size="xs" variant="square" />
-        <TruncateText>{name}</TruncateText>
-      </div>
-      <TruncateText variant="h6" tone="secondary" loading={loading}>
-        {usersCountLabel(userCount)}
+      {first ? (
+        <div className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)]">
+          <SquareAvatar
+            src={first.imageUrl ?? undefined}
+            alt={first.name}
+            fallback={first.name}
+            size="xs"
+            variant="square"
+          />
+          <TruncateText>{first.name}</TruncateText>
+          {more > 0 && (
+            <span className="shrink-0 text-ods-text-secondary text-h4">
+              +{more}
+              <span className="sr-only">{more === 1 ? ' more customer' : ' more customers'}</span>
+            </span>
+          )}
+        </div>
+      ) : (
+        <TruncateText>{TENANT_EMPTY_VALUE}</TruncateText>
+      )}
+      <TruncateText
+        variant="h6"
+        tone="secondary"
+        loading={loading}
+        className={unattributed ? 'text-ods-warning' : undefined}
+      >
+        {unattributed ?? (neverRead ? 'Never read' : lowercaseUsersCountLabel(userCount))}
       </TruncateText>
     </div>
   );

package/src/components/features/cloud-tenants/tenant-licenses-cell.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { cn } from '../../../utils/cn';
+import { useLoadingScope } from '../../ui/loading-scope';
+import { TruncateText } from '../../ui/truncate-text';
+import { licenseSummaryLines } from './tenant-presentation';
+import type { TenantLicenseSummary } from './tenant-row';
+
+export interface TenantLicensesCellProps {
+  licenses?: TenantLicenseSummary | null;
+}
+
+/** LICENCES column: assigned of purchased over what is unused (Figma 3025-3536). */
+export function TenantLicensesCell({ licenses }: TenantLicensesCellProps) {
+  // While the tenant is read (a loading scope) both lines are bars.
+  const loading = useLoadingScope();
+  const { value, detail, warning } = licenseSummaryLines(licenses);
+  return (
+    <div className="flex min-w-0 flex-col justify-center">
+      <TruncateText loading={loading}>{value}</TruncateText>
+      {(loading || detail) && (
+        <TruncateText variant="h6" tone="secondary" loading={loading} className={cn(warning && 'text-ods-warning')}>
+          {detail ?? ''}
+        </TruncateText>
+      )}
+    </div>
+  );
+}

package/src/components/features/cloud-tenants/tenant-presentation.ts

@@ -11,10 +11,12 @@
 import type { ComponentType, SVGProps } from 'react';
 import { formatRelativeTimeFrom } from '../../../utils/date-utils';
 import { formatDate } from '../../../utils/format-date';
+import { presentationFor } from '../../../utils/presentation-for';
 import { GoogleLogoIcon } from '../../icons-v2-generated/brand-logos/google-logo-icon';
 import { Office365LogoIcon } from '../../icons-v2-generated/brand-logos/office-365-logo-icon';
 import { CodingForkIcon } from '../../icons-v2-generated/coding/coding-fork-icon';
 import type { TagProps } from '../../ui/tag';
+import type { TenantLicenseSummary } from './tenant-row';
 
 /** What a cell shows when it has no value. */
 export const TENANT_EMPTY_VALUE = '—';
@@ -33,10 +35,6 @@ export type TenantAccessState =
 /** The directory providers a tenant connects to. */
 export type TenantProvider = 'MICROSOFT_365' | 'GOOGLE_WORKSPACE';
 
-function presentationFor<K extends string, V>(map: Record<K, V>, key: string | null | undefined): V | undefined {
-  return key != null && key in map ? map[key as K] : undefined;
-}
-
 // Colours read off the Figma list (node 1699-8249): red for the two states that
 // need the customer's admin, grey for read-only, outline for write-available,
 // green for write-enabled. NOT_AUTHORISED has no frame of its own
@@ -109,3 +107,47 @@ export function usersCountLabel(count: number | null | undefined): string {
   if (count == null) return TENANT_EMPTY_VALUE;
   return `${count} ${count === 1 ? 'User' : 'Users'}`;
 }
+
+/** The multi-customer list's count line (Figma 3025-3536): "227 users", the empty mark before the first read. */
+export function lowercaseUsersCountLabel(count: number | null | undefined): string {
+  if (count == null) return TENANT_EMPTY_VALUE;
+  return `${count} ${count === 1 ? 'user' : 'users'}`;
+}
+
+/**
+ * "30 of 412 unattributed" while some synced users belong to no customer (no customer's rule claims them), or `null`
+ * while every user is attributed or nothing has been read.
+ */
+export function unattributedLabel(
+  unattributed: number | null | undefined,
+  users: number | null | undefined,
+): string | null {
+  if (unattributed == null || unattributed <= 0) return null;
+  return users == null ? `${unattributed} unattributed` : `${unattributed} of ${users} unattributed`;
+}
+
+/** The share of purchased seats left unused that the list calls out: every row of Figma 3025-3536 falls on its side. */
+const UNUSED_WARNING_SHARE = 0.1;
+
+export interface TenantLicenseLines {
+  value: string;
+  detail: string | null;
+  /** The detail is worth a look: draw it in the warning colour. */
+  warning: boolean;
+}
+
+/**
+ * The LICENCES cell: "118 of 120" over "2 unused"; "88 assigned" over "Total not available" where the provider reports
+ * no purchased seats; the empty mark until the numbers have been read.
+ */
+export function licenseSummaryLines(summary: TenantLicenseSummary | null | undefined): TenantLicenseLines {
+  if (!summary) return { value: TENANT_EMPTY_VALUE, detail: null, warning: false };
+  const { assigned, purchased } = summary;
+  if (purchased == null) return { value: `${assigned} assigned`, detail: 'Total not available', warning: false };
+  const unused = summary.unused ?? purchased - assigned;
+  return {
+    value: `${assigned} of ${purchased}`,
+    detail: unused < 0 ? `${-unused} over` : `${unused} unused`,
+    warning: unused > 0 && unused / purchased >= UNUSED_WARNING_SHARE,
+  };
+}

package/src/components/features/cloud-tenants/tenant-row.ts

@@ -1,17 +1,26 @@
-/** One connected directory tenant, as the tenants list shows it. */
-export interface TenantRow {
+/** A customer a tenant's directory serves. */
+export interface TenantCustomer {
+  name: string;
+  /** A URL the browser can load as is. */
+  imageUrl?: string | null;
+}
+
+/** A directory's seats over its paid SKUs. */
+export interface TenantLicenseSummary {
+  assigned: number;
+  /** Absent when the provider does not report purchased seats (Google Workspace). */
+  purchased?: number | null;
+  /** Purchased minus assigned; negative when the provider counts suspended seats as assigned. */
+  unused?: number | null;
+}
+
+interface TenantRowBase {
   id: string;
   /** The tenant's own name in its directory. */
   name: string;
   /** The directory provider (`MICROSOFT_365`, `GOOGLE_WORKSPACE`); an unknown value keeps its raw name. */
   provider: string;
   domain?: string | null;
-  /** The customer the tenant belongs to. */
-  customer: {
-    name: string;
-    /** A URL the browser can load as is. */
-    imageUrl?: string | null;
-  };
   /** Users read from the directory; absent before the first read. */
   userCount?: number | null;
   /** What the last access probe found (`WRITE_ENABLED`, `DISCONNECTED`, ...). */
@@ -19,3 +28,24 @@ export interface TenantRow {
   /** When the directory was last read; absent when it never was. */
   lastReadAt?: string | null;
 }
+
+/**
+ * A tenant of the single-customer list, `TenantsTableView`'s default variant, which accepts no other row: a
+ * multi-customer host that forgets `variant` does not compile. Deleted with that variant.
+ */
+export interface TenantRow extends TenantRowBase {
+  /** The customer the tenant belongs to. */
+  customer: TenantCustomer;
+}
+
+/** A tenant of the multi-customer list (`variant="multi-customer"`): a directory serving any number of customers. */
+export interface MultiCustomerTenantRow extends TenantRowBase {
+  /** The customers the directory serves, in the order the host shows them; empty while it serves none. */
+  customers: readonly TenantCustomer[];
+  /** Of the users read, the users no customer's rule claims; absent before the first read. */
+  unattributedUserCount?: number | null;
+  /** A person paused the sync: the row says so instead of when it was last read. */
+  syncPaused?: boolean;
+  /** Absent until the licence numbers have been read. */
+  licenses?: TenantLicenseSummary | null;
+}

package/src/components/features/cloud-tenants/tenants-table-columns.ts

@@ -9,22 +9,25 @@ export interface TenantsTableColumn {
 }
 
 /**
- * Column layout of the tenants list (Figma 1699-8249: Tenant, Customers,
- * Access, open). Data-only on purpose: the live table and the route skeleton
+ * Column layout of the tenants list (Figma 3025-3536: Tenant, Customers, Licences, Access, open). A tablet drops the
+ * licence cells and keeps the funnel (3032-4579); a phone keeps the tenant, the access tag and open (3033-9343).
+ * Data-only on purpose: the live table and the route skeleton
  * read the SAME widths, so nothing shifts when the rows arrive, and a skeleton
  * never imports the table's cell renderers.
  */
 export const TENANT_COLUMNS = {
   tenant: { id: 'tenant', header: 'Tenant', width: 'flex-1 min-w-0' },
-  customer: { id: 'customer', header: 'Customers', width: 'w-[220px] content-lg:w-[340px]', hideAt: 'md' },
-  access: { id: 'access', header: 'Access', width: 'w-[200px] content-lg:w-[216px]' },
-  open: { id: 'open', width: 'w-12 shrink-0 flex-none', hideAt: 'md', align: 'right' },
+  customer: { id: 'customer', header: 'Customers', width: 'w-[220px] content-lg:w-[280px]', hideAt: 'md' },
+  licenses: { id: 'licenses', header: 'Licences', width: 'w-[150px]', hideAt: 'lg' },
+  access: { id: 'access', header: 'Access', width: 'flex-none content-md:w-[200px] content-lg:w-[216px]' },
+  open: { id: 'open', width: 'w-12 shrink-0 flex-none', align: 'right' },
 } satisfies Record<string, TenantsTableColumn>;
 
 /** Render order of the standalone list. */
 export const TENANTS_TABLE_COLUMNS: readonly TenantsTableColumn[] = [
   TENANT_COLUMNS.tenant,
   TENANT_COLUMNS.customer,
+  TENANT_COLUMNS.licenses,
   TENANT_COLUMNS.access,
   TENANT_COLUMNS.open,
 ];