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

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

@@ -5,24 +5,37 @@ 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 {
+  type ColumnDef,
+  type ColumnFiltersState,
+  DataTable,
+  type DataTableFilterOption,
+  dataTableLoadingRows,
+  type Row,
+  useDataTable,
+} from '../../ui/data-table';
 import { useLoadingScope } from '../../ui/loading-scope';
+import {
+  SingleCustomerTenantsTableView,
+  type SingleCustomerTenantsTableViewProps,
+} from './single-customer-tenants-table-view';
 import { TenantAccessCell } from './tenant-access-cell';
 import { TenantCell } from './tenant-cell';
 import { TenantCustomerCell } from './tenant-customer-cell';
-import type { TenantRow } from './tenant-row';
+import { TenantLicensesCell } from './tenant-licenses-cell';
+import type { MultiCustomerTenantRow } from './tenant-row';
 import { TENANT_COLUMNS, type TenantsTableColumn } from './tenants-table-columns';
 
-const getRowId = (row: TenantRow) => row.id;
+const getRowId = (row: MultiCustomerTenantRow) => 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 => ({
+const loadingTenant = (id: string): MultiCustomerTenantRow => ({
   id,
   name: '',
   provider: '',
-  customer: { name: '' },
+  customers: [{ name: '' }],
   accessState: '',
 });
 
@@ -45,16 +58,35 @@ function OpenTenantButton({ href, name }: { href: string; name: string }) {
   );
 }
 
+/** The columns whose header carries a funnel (Figma 3036-4860). */
+export const TENANTS_TABLE_FILTER_COLUMNS = ['tenant', 'customer', 'licenses', 'access'] as const;
+
+export type TenantsTableFilterColumn = (typeof TENANTS_TABLE_FILTER_COLUMNS)[number];
+
+/** Each column's funnel: what it offers, what is ticked. The host narrows the rows; the view only draws. */
+export interface TenantsTableFilters {
+  /** A column the host leaves out has no funnel; one with no options draws its bare label. */
+  options: Partial<Record<TenantsTableFilterColumn, DataTableFilterOption[]>>;
+  selections: Readonly<Record<TenantsTableFilterColumn, readonly string[]>>;
+  onChange: (next: Record<TenantsTableFilterColumn, string[]>) => void;
+  /** The options are in flight: the funnels draw, inert. */
+  pending?: boolean;
+}
+
 /**
  * Click handler that opens `href` in a new tab. The row is itself the details
  * link and an `<a>` cannot be nested in an `<a>`, so the button opens it by script.
  */
-export interface TenantsTableViewProps {
-  rows: TenantRow[];
+interface MultiCustomerTenantsTableViewProps {
+  /** A directory per row that serves any number of customers, with its licences and the column funnels. */
+  variant: 'multi-customer';
+  rows: MultiCustomerTenantRow[];
   /** 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;
+  getHref: (row: MultiCustomerTenantRow) => string;
   /** The search the rows answer; named by the "no match" message. */
   search?: string;
+  /** The funnels of the column headers. Absent: none, as on the product page. */
+  filters?: TenantsTableFilters;
   /** 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. */
@@ -68,14 +100,27 @@ export interface TenantsTableViewProps {
   now?: Date;
 }
 
+/** The single-customer list unless `variant` is 'multi-customer', the one that takes funnels and needs its own rows. */
+export type TenantsTableViewProps = SingleCustomerTenantsTableViewProps | MultiCustomerTenantsTableViewProps;
+
+/** The tenants list, in the layout its `variant` names. */
+export function TenantsTableView(props: TenantsTableViewProps) {
+  return props.variant === 'multi-customer' ? (
+    <MultiCustomerTenantsTableView {...props} />
+  ) : (
+    <SingleCustomerTenantsTableView {...props} />
+  );
+}
+
 /** 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 TenantsTableView({
+/** The tenants list: tenant, customers, licences, access state and a way into each tenant's details. */
+function MultiCustomerTenantsTableView({
   rows,
   getHref,
   search = '',
+  filters,
   isPending = false,
   totalCount,
   stickyHeaderOffset,
@@ -84,51 +129,75 @@ export function TenantsTableView({
   isFetchingNextPage = false,
   onLoadMore,
   now,
-}: TenantsTableViewProps) {
-  const columns = useMemo<ColumnDef<TenantRow>[]>(
-    () => [
+}: MultiCustomerTenantsTableViewProps) {
+  const filterOptions = filters?.options;
+  const filtersPending = filters?.pending ?? false;
+  const columns = useMemo<ColumnDef<MultiCustomerTenantRow>[]>(() => {
+    /**
+     * A column's funnel, while the host offers one. Declared with no options too: below lg only a filtered column keeps
+     * its header, and the column filter draws the bare label when there is nothing to choose.
+     */
+    const funnel = (id: TenantsTableFilterColumn) => {
+      const options = filterOptions?.[id];
+      return options ? { filter: { options, pending: filtersPending } } : {};
+    };
+    return [
       {
         id: TENANT_COLUMNS.tenant.id,
         header: TENANT_COLUMNS.tenant.header,
-        cell: ({ row }: { row: Row<TenantRow> }) => (
+        cell: ({ row }: { row: Row<MultiCustomerTenantRow> }) => (
           <TenantCell provider={row.original.provider} name={row.original.name} domain={row.original.domain} />
         ),
         enableSorting: false,
-        meta: columnMeta(TENANT_COLUMNS.tenant),
+        meta: { ...columnMeta(TENANT_COLUMNS.tenant), ...funnel('tenant') },
       },
       {
         id: TENANT_COLUMNS.customer.id,
         header: TENANT_COLUMNS.customer.header,
-        cell: ({ row }: { row: Row<TenantRow> }) => (
+        cell: ({ row }: { row: Row<MultiCustomerTenantRow> }) => (
           <TenantCustomerCell
-            name={row.original.customer.name}
-            imageUrl={row.original.customer.imageUrl}
+            customers={row.original.customers}
             userCount={row.original.userCount}
+            unattributedUserCount={row.original.unattributedUserCount}
+            neverRead={row.original.lastReadAt == null && row.original.userCount == null}
           />
         ),
         enableSorting: false,
-        meta: columnMeta(TENANT_COLUMNS.customer),
+        meta: { ...columnMeta(TENANT_COLUMNS.customer), ...funnel('customer') },
+      },
+      {
+        id: TENANT_COLUMNS.licenses.id,
+        header: TENANT_COLUMNS.licenses.header,
+        cell: ({ row }: { row: Row<MultiCustomerTenantRow> }) => (
+          <TenantLicensesCell licenses={row.original.licenses} />
+        ),
+        enableSorting: false,
+        meta: { ...columnMeta(TENANT_COLUMNS.licenses), ...funnel('licenses') },
       },
       {
         id: TENANT_COLUMNS.access.id,
         header: TENANT_COLUMNS.access.header,
-        cell: ({ row }: { row: Row<TenantRow> }) => (
-          <TenantAccessCell accessState={row.original.accessState} lastReadAt={row.original.lastReadAt} now={now} />
+        cell: ({ row }: { row: Row<MultiCustomerTenantRow> }) => (
+          <TenantAccessCell
+            accessState={row.original.accessState}
+            lastReadAt={row.original.lastReadAt}
+            syncPaused={row.original.syncPaused}
+            now={now}
+          />
         ),
         enableSorting: false,
-        meta: columnMeta(TENANT_COLUMNS.access),
+        meta: { ...columnMeta(TENANT_COLUMNS.access), ...funnel('access') },
       },
       {
         id: TENANT_COLUMNS.open.id,
-        cell: ({ row }: { row: Row<TenantRow> }) => (
+        cell: ({ row }: { row: Row<MultiCustomerTenantRow> }) => (
           <OpenTenantButton href={getHref(row.original)} name={row.original.name} />
         ),
         enableSorting: false,
         meta: columnMeta(TENANT_COLUMNS.open),
       },
-    ],
-    [getHref, now],
-  );
+    ];
+  }, [getHref, now, filterOptions, filtersPending]);
 
   // A page's loading scope: the table holds one page of placeholder rows, drawn with the real cells (`loadingCells`).
   const loading = useLoadingScope();
@@ -136,7 +205,31 @@ export function TenantsTableView({
     () => (loading ? dataTableLoadingRows(skeletonRows, loadingTenant) : null),
     [loading, skeletonRows],
   );
-  const table = useDataTable<TenantRow>({ data: loadingRows ?? rows, columns, getRowId, enableSorting: false });
+  const selections = filters?.selections;
+  const onFiltersChange = filters?.onChange;
+  const columnFilters = useMemo<ColumnFiltersState>(
+    () =>
+      TENANTS_TABLE_FILTER_COLUMNS.flatMap(id =>
+        selections && selections[id].length > 0 ? [{ id, value: selections[id] }] : [],
+      ),
+    [selections],
+  );
+  const table = useDataTable<MultiCustomerTenantRow>({
+    data: loadingRows ?? rows,
+    columns,
+    getRowId,
+    enableSorting: false,
+    state: { columnFilters },
+    onColumnFiltersChange: updater => {
+      const next = typeof updater === 'function' ? updater(columnFilters) : updater;
+      const picked = (id: TenantsTableFilterColumn) => {
+        const value = next.find(filter => filter.id === id)?.value;
+        return Array.isArray(value) ? (value as string[]) : [];
+      };
+      const selected = Object.fromEntries(TENANTS_TABLE_FILTER_COLUMNS.map(id => [id, picked(id)]));
+      onFiltersChange?.(selected as Record<TenantsTableFilterColumn, string[]>);
+    },
+  });
 
   return (
     // Dim, don't unmount, the stale rows while a deferred search refetches.
@@ -152,7 +245,9 @@ export function TenantsTableView({
           skeletonRows={skeletonRows}
           emptyState={{
             title: 'No tenants match',
-            description: `Nothing matches "${search}". Try a different name, domain or customer.`,
+            description: search
+              ? `Nothing matches "${search}". Try a different name, domain or customer.`
+              : 'Nothing matches the selected filters. Try adjusting them.',
           }}
           rowClassName="mb-[var(--spacing-system-xxs)]"
           rowHref={getHref}

package/src/components/features/devices/device-directory.ts

@@ -0,0 +1,55 @@
+import { presentationFor } from '../../../utils/presentation-for';
+import type { DeviceRow } from './types';
+
+/** The schema's `DirectoryUserLink`: who a device is tied to in a directory. */
+export type DeviceDirectoryUserLink = 'PRIMARY' | 'SHARED' | 'NONE';
+
+/** The schema's `DirectorySource`: a directory that knows a device. */
+export type DeviceDirectorySource = 'MICROSOFT_365' | 'GOOGLE_WORKSPACE';
+
+const USER_LINK_LABELS = {
+  PRIMARY: 'Primary user',
+  SHARED: 'Shared',
+  NONE: 'No user',
+} satisfies Record<DeviceDirectoryUserLink, string>;
+
+const SOURCE_LABELS = {
+  MICROSOFT_365: 'M365',
+  GOOGLE_WORKSPACE: 'GOOGLE',
+} satisfies Record<DeviceDirectorySource, string>;
+
+/** The USER funnel's option (Figma 1136:64807). A value this build does not know keeps its own name. */
+export function directoryUserLinkLabel(link: string): string {
+  return presentationFor(USER_LINK_LABELS, link) ?? link;
+}
+
+/** The SOURCES tag: which directory knows the device. */
+export function directorySourceLabel(source: string): string {
+  return presentationFor(SOURCE_LABELS, source) ?? source;
+}
+
+const EMPTY_USER = '—';
+
+// The row carries the wire's string: a member compared to it is typed here, so a misspelt one fails to compile.
+const PRIMARY_LINK: DeviceDirectoryUserLink = 'PRIMARY';
+const SHARED_LINK: DeviceDirectoryUserLink = 'SHARED';
+
+/**
+ * The USER cell's two lines (Figma 865:55733): the primary user over "Primary user", "Shared" over how many, or the
+ * empty mark when nobody is tied to the device.
+ */
+export function directoryUserLines(
+  device: Pick<DeviceRow, 'directoryUserLink' | 'directoryUserName' | 'directoryUserCount'>,
+): {
+  name: string;
+  detail: string | null;
+} {
+  if (device.directoryUserLink === PRIMARY_LINK) {
+    return { name: device.directoryUserName ?? EMPTY_USER, detail: USER_LINK_LABELS.PRIMARY };
+  }
+  if (device.directoryUserLink === SHARED_LINK) {
+    const count = device.directoryUserCount ?? 0;
+    return { name: USER_LINK_LABELS.SHARED, detail: `${count} recent ${count === 1 ? 'user' : 'users'}` };
+  }
+  return { name: EMPTY_USER, detail: null };
+}

package/src/components/features/devices/devices-filter-toolbar.tsx

@@ -29,6 +29,8 @@ export interface DevicesFilterToolbarProps {
   selectedTags: FilterModalProps['selectedTags'];
   onTagsChange: FilterModalProps['onTagsChange'];
   isLoading?: boolean;
+  /** The search field's prompt. Default "Search for Devices". */
+  searchPlaceholder?: string;
 
   /**
    * When true (default), pins the toolbar at the top with the same negative-margin
@@ -67,6 +69,7 @@ export function DevicesFilterToolbar({
   selectedTags,
   onTagsChange,
   isLoading,
+  searchPlaceholder = 'Search for Devices',
   sticky = true,
   toolbarRef,
 }: DevicesFilterToolbarProps) {
@@ -87,7 +90,7 @@ export function DevicesFilterToolbar({
             onSearchChange={onSearchChange}
             onTagRemove={onTagRemove}
             onClearAll={onClearAll}
-            placeholder="Search for Devices"
+            placeholder={searchPlaceholder}
             addMorePlaceholder="Add More..."
           />
         </div>

package/src/components/features/devices/devices-panel-view.tsx

@@ -99,6 +99,8 @@ export interface DevicesPanelViewProps<T extends DeviceRow = DeviceRow> {
   hideColumns?: string[];
   /** Filter keys to drop from the funnels and the grid row; the column itself stays. */
   hideFilters?: string[];
+  /** Adds the USER and SOURCES columns and funnels, for a tenant with directories. Default: neither. */
+  directoryColumns?: boolean;
   /** Message shown when the list is empty. */
   emptyMessage?: string;
   /** Drawn instead of the toolbar and the list: the pristine, genuinely empty panel. */
@@ -151,6 +153,7 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
   actionsColumn,
   hideColumns,
   hideFilters,
+  directoryColumns = false,
   emptyMessage = 'No devices found. Try adjusting your search or filters.',
   emptyState,
   noOrganizations = false,
@@ -164,11 +167,17 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
   const scoped = useLoadingScope();
   const loading = scoped || loadingGiven;
   const gridColumns =
-    filterColumns ?? getDeviceFilterColumns(deviceFilters).filter(column => !hideFilters?.includes(column.key));
+    filterColumns ??
+    getDeviceFilterColumns(deviceFilters, { directoryColumns }).filter(column => !hideFilters?.includes(column.key));
 
   const list = (
     <>
-      <DevicesFilterToolbar {...toolbar} isLoading={loading} />
+      <DevicesFilterToolbar
+        {...toolbar}
+        // `devices(search)` also matches the primary user's name once directories are in play (Figma 865:55733).
+        searchPlaceholder={directoryColumns ? 'Search for Devices and Users' : undefined}
+        isLoading={loading}
+      />
       {viewMode === 'table' ? (
         <DevicesTableBody
           devices={devices}
@@ -187,6 +196,7 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
           onColumnFiltersChange={onColumnFiltersChange}
           actionsColumn={actionsColumn}
           hideColumns={hideColumns}
+          directoryColumns={directoryColumns}
           disableColumnFilters={hideFilters}
           totalCount={loading ? undefined : totalCount}
           footerSlot={

package/src/components/features/devices/devices-table-columns.tsx

@@ -23,6 +23,7 @@ import {
 } from '../../ui';
 import { DATA_TABLE_SKELETON_ROWS } from '../../ui/data-table/utils';
 import { OSTypeBadge } from '../os-type-badge';
+import { directorySourceLabel, directoryUserLines, directoryUserLinkLabel } from './device-directory';
 import { getDeviceName } from './device-name';
 import { getDeviceStatusConfig } from './device-status';
 import { DEFAULT_VISIBLE_STATUSES } from './device-statuses';
@@ -129,6 +130,8 @@ export interface DevicesTableBodyProps<T extends DeviceRow = DeviceRow> {
   actionsColumn?: ColumnDef<T>;
   /** Column ids to drop from the base table columns (e.g. ['organization'] when scoped to a single org). */
   hideColumns?: string[];
+  /** Adds the USER and SOURCES columns, for a host whose tenant has directories. Default: neither. */
+  directoryColumns?: boolean;
   /** Column ids whose header filter is dropped while the column stays visible (e.g. ['status'] on the archive page). */
   disableColumnFilters?: string[];
   /** The facet query is still in flight, see `getDeviceTableColumns`. */
@@ -168,6 +171,7 @@ export function DevicesTableBody<T extends DeviceRow = DeviceRow>({
   onColumnFiltersChange,
   actionsColumn,
   hideColumns,
+  directoryColumns = false,
   disableColumnFilters,
   filtersPending,
   totalCount,
@@ -177,12 +181,16 @@ export function DevicesTableBody<T extends DeviceRow = DeviceRow>({
   const columns = useMemo<ColumnDef<T>[]>(() => {
     const hidden = new Set(hideColumns ?? []);
     const unfiltered = new Set(disableColumnFilters ?? []);
-    const base = getDeviceTableColumns<T>(deviceFilters ?? null, filtersPending)
+    const base = getDeviceTableColumns<T>(deviceFilters ?? null, filtersPending, {
+      directoryColumns,
+      // Without the customer column there is room for the sources from where the customer's column would have started.
+      roomyDirectory: hidden.has('organization'),
+    })
       .filter(c => !c.id || !hidden.has(c.id))
       .map(c => (c.id && unfiltered.has(c.id) ? { ...c, meta: { ...c.meta, filter: undefined } } : c));
     const open = getDeviceOpenColumn<T>();
     return actionsColumn ? [...base, actionsColumn, open] : [...base, open];
-  }, [deviceFilters, filtersPending, actionsColumn, hideColumns, disableColumnFilters]);
+  }, [deviceFilters, filtersPending, actionsColumn, hideColumns, directoryColumns, disableColumnFilters]);
 
   // While loading the table holds one page of empty rows, drawn with the real cells: every part of a row draws its
   // own loading form (`DataTable.Body`'s `loadingCells`), so a loading row is the loaded row's own layout.
@@ -257,11 +265,43 @@ function DeviceLastSeen({ lastSeen }: { lastSeen: string | undefined }) {
   );
 }
 
+/** The name over its role, as the USER column reads it (Figma 865:55733); the empty mark when nobody is tied. */
+function DirectoryUserCell({ device }: { device: DeviceRow }) {
+  const loading = useLoadingScope();
+  if (loading && !device.directoryUserLink) {
+    return <TextLineSkeleton type="h4" className="w-3/4" />;
+  }
+  const { name, detail } = directoryUserLines(device);
+  return (
+    <div className="flex min-w-0 flex-col justify-center">
+      <TruncateText>{name}</TruncateText>
+      {detail && (
+        <TruncateText variant="h6" tone="secondary">
+          {detail}
+        </TruncateText>
+      )}
+    </div>
+  );
+}
+
+/** The directories that know the device, as tags (Figma 187:61663); nothing when none does. */
+function DirectorySourcesCell({ sources }: { sources: readonly string[] | undefined }) {
+  return (
+    <div data-loading-optional className="flex min-w-0 flex-wrap gap-[var(--spacing-system-xxs)]">
+      {(sources ?? []).map(source => (
+        <Tag key={source} label={directorySourceLabel(source)} variant="grey" />
+      ))}
+    </div>
+  );
+}
+
 export interface DeviceFilterColumn {
   key: string;
   label: string;
   filterable?: boolean;
   filterOptions?: DeviceFilterOption[];
+  /** Filters in the filter window from `lg` until `xl` too: its column's header has no funnel there. */
+  inWindowLgToXl?: boolean;
 }
 
 /** A device filter dropdown entry: `meta.filter.options` plus the facet count. */
@@ -277,6 +317,8 @@ function buildDeviceFilterOptions(deviceFilters?: DeviceFilters | null): {
   status: DeviceFilterOption[];
   os: DeviceFilterOption[];
   organization: DeviceFilterOption[];
+  user: DeviceFilterOption[];
+  sources: DeviceFilterOption[];
 } {
   // Show only DEFAULT_VISIBLE_STATUSES (DELETED and legacy ARCHIVED live on /devices/archive)
   const status = (deviceFilters?.statuses ?? [])
@@ -294,19 +336,56 @@ function buildDeviceFilterOptions(deviceFilters?: DeviceFilters | null): {
     })),
   );
 
-  return { status, os, organization };
+  const user = (deviceFilters?.userLinks ?? []).map(link => ({
+    id: link.value,
+    label: directoryUserLinkLabel(link.value),
+    value: link.value,
+    count: link.count,
+  }));
+
+  const sources = (deviceFilters?.directorySources ?? []).map(source => ({
+    id: source.value,
+    label: directorySourceLabel(source.value),
+    value: source.value,
+    count: source.count,
+  }));
+
+  return { status, os, organization, user, sources };
+}
+
+/** The directory columns of a device list: the table and its filter window take the same ones. */
+interface DeviceDirectoryColumnOptions {
+  directoryColumns?: boolean;
+  roomyDirectory?: boolean;
 }
 
 // Filter column metadata used by the external filter modal (useTagFilterModal).
 // Kept separate from the table ColumnDef because DataTable doesn't carry the
 // filter metadata that the external mobile filter modal needs.
-export function getDeviceFilterColumns(deviceFilters?: DeviceFilters | null): DeviceFilterColumn[] {
+// `roomyDirectory` is the table's own (`getDeviceTableColumns`): beside the customer column SOURCES shows only from
+// `xl`, and the header has no funnel for it from `lg` until then, so the window carries it there.
+export function getDeviceFilterColumns(
+  deviceFilters?: DeviceFilters | null,
+  { directoryColumns = false, roomyDirectory = false }: DeviceDirectoryColumnOptions = {},
+): DeviceFilterColumn[] {
   const options = buildDeviceFilterOptions(deviceFilters);
   return [
     {
       key: 'device',
       label: 'DEVICE',
     },
+    ...(directoryColumns
+      ? [
+          { key: 'user', label: 'USER', filterable: true, filterOptions: options.user },
+          {
+            key: 'sources',
+            label: 'SOURCES',
+            filterable: true,
+            filterOptions: options.sources,
+            inWindowLgToXl: !roomyDirectory,
+          },
+        ]
+      : []),
     { key: 'status', label: 'STATUS', filterable: true, filterOptions: options.status },
     { key: 'os', label: 'OS', filterable: true, filterOptions: options.os },
     { key: 'organization', label: 'CUSTOMER', filterable: true, filterOptions: options.organization },
@@ -318,17 +397,51 @@ export function getDeviceFilterColumns(deviceFilters?: DeviceFilters | null): De
  * funnels drawn (inert) rather than growing them when it answers. Absent means
  * these are the final options: an empty one then hides its funnel, which is what
  * a list with no facet source of its own wants.
+ * @param options.directoryColumns Adds USER and SOURCES after DEVICE. Off by default: a picker or a tenant with no
+ * directories has neither.
+ * @param options.roomyDirectory No customer column beside them (one customer's list), so SOURCES shows from `lg`
+ * rather than `xl`.
  */
 export function getDeviceTableColumns<T extends DeviceRow = DeviceRow>(
   deviceFilters?: DeviceFilters | null,
   filtersPending?: boolean,
+  { directoryColumns = false, roomyDirectory = false }: DeviceDirectoryColumnOptions = {},
 ): ColumnDef<T>[] {
   const {
     status: statusFilterOptions,
     os: osFilterOptions,
     organization: orgFilterOptions,
+    user: userFilterOptions,
+    sources: sourcesFilterOptions,
   } = buildDeviceFilterOptions(deviceFilters);
 
+  const directory: ColumnDef<T>[] = directoryColumns
+    ? [
+        {
+          id: 'user',
+          header: 'USER',
+          cell: ({ row }: { row: Row<T> }) => <DirectoryUserCell device={row.original} />,
+          enableSorting: false,
+          meta: {
+            width: 'min-w-0 content-lg:w-[15%]',
+            hideAt: 'lg',
+            filter: { options: userFilterOptions, pending: filtersPending },
+          },
+        },
+        {
+          id: 'sources',
+          header: 'SOURCES',
+          cell: ({ row }: { row: Row<T> }) => <DirectorySourcesCell sources={row.original.directorySources} />,
+          enableSorting: false,
+          meta: {
+            width: 'min-w-0 content-lg:w-[11%]',
+            hideAt: roomyDirectory ? 'lg' : 'xl',
+            filter: { options: sourcesFilterOptions, pending: filtersPending },
+          },
+        },
+      ]
+    : [];
+
   return [
     {
       accessorKey: 'device',
@@ -347,8 +460,10 @@ export function getDeviceTableColumns<T extends DeviceRow = DeviceRow>(
           </div>
         );
       },
-      meta: { width: 'flex-1 content-md:w-1/4' },
+      // The name takes what the other columns leave: with two more of them, their shares below shrink to leave some.
+      meta: { width: directoryColumns ? 'flex-1 min-w-0' : 'flex-1 content-md:w-1/4' },
     },
+    ...directory,
     {
       accessorKey: 'status',
       id: 'status',
@@ -366,7 +481,7 @@ export function getDeviceTableColumns<T extends DeviceRow = DeviceRow>(
         );
       },
       meta: {
-        width: 'w-auto shrink-0 content-md:w-1/5',
+        width: directoryColumns ? 'w-auto shrink-0 content-md:w-[14%]' : 'w-auto shrink-0 content-md:w-1/5',
         // Declared unconditionally, empty options and all. `meta.filter` is what
         // keeps a header cell visible below `lg`, so dropping it until the
         // options query resolves made every header on a tablet disappear on
@@ -383,7 +498,7 @@ export function getDeviceTableColumns<T extends DeviceRow = DeviceRow>(
         <OSTypeBadge osType={row.original.osType} iconSize="w-4 h-4 content-md:w-6 content-md:h-6" />
       ),
       meta: {
-        width: 'w-[200px] content-md:w-1/6',
+        width: directoryColumns ? 'w-[200px] content-md:w-[10%]' : 'w-[200px] content-md:w-1/6',
         hideAt: 'md',
         filter: { options: osFilterOptions, pending: filtersPending },
       },
@@ -394,7 +509,7 @@ export function getDeviceTableColumns<T extends DeviceRow = DeviceRow>(
       header: 'CUSTOMER',
       cell: ({ row }: { row: Row<T> }) => <OrganizationCell device={row.original} />,
       meta: {
-        width: 'w-1/6',
+        width: directoryColumns ? 'w-[14%]' : 'w-1/6',
         hideAt: 'lg',
         filter: { options: orgFilterOptions, placement: 'bottom-end', pending: filtersPending },
       },

package/src/components/features/devices/index.ts

@@ -1,5 +1,12 @@
 'use client';
 
+export {
+  type DeviceDirectorySource,
+  type DeviceDirectoryUserLink,
+  directorySourceLabel,
+  directoryUserLines,
+  directoryUserLinkLabel,
+} from './device-directory';
 export { formatLastOnline } from './device-last-online';
 export { type DeviceNameSource, getDeviceName, matchesDeviceName } from './device-name';
 export {

package/src/components/features/devices/types.ts

@@ -34,6 +34,14 @@ export interface DeviceRow extends DeviceNameSource {
   organizationImageUrl?: string | null;
   organizationImageHash?: string | null;
   tags?: DeviceTag[];
+  /** Who the device is tied to in a directory: PRIMARY, SHARED or NONE. The USER column reads it. */
+  directoryUserLink?: string;
+  /** The primary user's name; only PRIMARY has one. */
+  directoryUserName?: string | null;
+  /** How many users are tied to it: "N recent users" when SHARED. */
+  directoryUserCount?: number;
+  /** The directories that know the device besides the agent. The SOURCES column reads it. */
+  directorySources?: readonly string[];
   /** The viewer's unread notifications about this device. Absent or 0: no indicator. */
   unreadNotificationCount?: number;
 }
@@ -63,6 +71,10 @@ export interface DeviceFilters {
   organizationIds: DeviceFilterTag[];
   tagKeys: TagFilterOption[];
   filteredCount: number;
+  /** Behind the USER funnel; only hosts that draw the directory columns read it. */
+  userLinks?: DeviceFilterValue[];
+  /** Behind the SOURCES funnel; only hosts that draw the directory columns read it. */
+  directorySources?: DeviceFilterValue[];
 }
 
 /** What narrows a device list, in the backend's field names. */
@@ -73,4 +85,6 @@ export interface DeviceFilterInput {
   organizationIds?: string[];
   tagKeys?: string[];
   tagValues?: string[];
+  userLinks?: string[];
+  directorySources?: string[];
 }