@flamingo-stack/openframe-frontend-core 0.0.711 → 0.0.712

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

@@ -0,0 +1,89 @@
+'use client';
+
+export { formatLastOnline } from './device-last-online';
+export { type DeviceNameSource, getDeviceName, matchesDeviceName } from './device-name';
+export {
+  DeviceSelectionModeRadio,
+  type DeviceSelectionModeRadioProps,
+} from './device-selector/device-selection-mode-radio';
+export { DeviceSelector } from './device-selector/device-selector';
+export type {
+  DeviceSelectionMode,
+  DeviceSelectorInfiniteScroll,
+  DeviceSelectorNarrowing,
+  DeviceSelectorProps,
+  DeviceSelectorServer,
+  SubTab,
+} from './device-selector/device-selector.types';
+export { DeviceSelectorSkeleton } from './device-selector/device-selector-skeleton';
+export { EMPTY_NARROWING, narrowingToFilter } from './device-selector/narrowing';
+export {
+  type DeviceCardStatus,
+  type DeviceStatusConfig,
+  type DeviceStatusVariant,
+  getDeviceOperatingSystem,
+  getDeviceStatusConfig,
+} from './device-status';
+export {
+  DEFAULT_DASHBOARD_STATUSES,
+  DEFAULT_DEVICES_LIST_STATUSES,
+  DEFAULT_VISIBLE_STATUSES,
+  type DefaultVisibleStatus,
+  DEVICE_ENRICHMENT_FILTER,
+  DEVICE_ENRICHMENT_STATUSES,
+  DEVICE_STATUS,
+  type DeviceStatus,
+  HIDDEN_DEVICE_STATUSES,
+  type HiddenDeviceStatus,
+} from './device-statuses';
+export { DeviceTagsFilterButton } from './device-tags-filter-button';
+export { renderDeviceTypeIcon } from './device-type-icon';
+export { DeviceTypeTile } from './device-type-tile';
+export { DevicesFilterToolbar, type DevicesFilterToolbarProps } from './devices-filter-toolbar';
+export { DevicesGrid, type DevicesGridProps } from './devices-grid';
+export { DevicesGridFilters, type DevicesGridFiltersProps } from './devices-grid-filters';
+export {
+  DevicesList,
+  type DevicesListNarrowing,
+  type DevicesListProps,
+  EMPTY_DEVICES_NARROWING,
+  isNarrowed,
+} from './devices-list';
+export {
+  buildDevicePanelActions,
+  DEVICE_VIEW_MODE_ITEMS,
+  type DevicePanelActionsOptions,
+} from './devices-panel-header';
+export {
+  DevicesPanelView,
+  type DevicesPanelViewProps,
+  type DevicesViewMode,
+  IDLE_DEVICES_TOOLBAR,
+} from './devices-panel-view';
+export {
+  type DeviceFilterColumn,
+  type DeviceFilterOption,
+  DevicesTableBody,
+  type DevicesTableBodyProps,
+  getDeviceActionsColumn,
+  getDeviceFilterColumns,
+  getDeviceOpenColumn,
+  getDeviceTableColumns,
+} from './devices-table-columns';
+export {
+  type DevicesViewConfig,
+  DevicesViewConfigProvider,
+  useDeviceImageUrl,
+  useDevicesViewConfig,
+} from './devices-view-config';
+export type {
+  DeviceFilterInput,
+  DeviceFilters,
+  DeviceFilterTag,
+  DeviceFilterValue,
+  DeviceRow,
+  DeviceTag,
+  TagFilterOption,
+} from './types';
+export { useStickyToolbar } from '../../../hooks/ui/use-sticky-toolbar';
+export { useTagFilterModal } from './use-tag-filter-modal';

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

@@ -0,0 +1,74 @@
+import type { DeviceNameSource } from './device-name';
+
+/** A tag on a device: one key and the values the device carries for it. */
+export interface DeviceTag {
+  tagId: string;
+  key: string;
+  description?: string;
+  color?: string;
+  values: string[];
+  createdAt?: string;
+}
+
+/**
+ * A device as the list views draw it: the plain fields a row, a card and a
+ * picker read, and nothing a details page needs. The product's full device
+ * record is a superset of this, so it is passed as is.
+ */
+export interface DeviceRow extends DeviceNameSource {
+  id: string;
+  /** The agent's id. Empty when the agent is not connected. */
+  machineId: string;
+  status: string;
+  /** When the device was last seen, ISO. Two spellings, one per source. */
+  last_seen?: string;
+  lastSeen?: string;
+  /** desktop / laptop / server / mobile / tablet. */
+  type?: string;
+  osType?: string;
+  operating_system?: string;
+  organizationId?: string;
+  organization?: string;
+  /** Primary contact of the customer: the CUSTOMER column's second line in the picker. */
+  organizationEmail?: string;
+  organizationImageUrl?: string | null;
+  organizationImageHash?: string | null;
+  tags?: DeviceTag[];
+}
+
+export interface DeviceFilterValue {
+  value: string;
+  count: number;
+}
+
+export interface DeviceFilterTag {
+  value: string;
+  label: string;
+  count: number;
+}
+
+export interface TagFilterOption {
+  key: string;
+  value: string;
+  count: number;
+}
+
+/** The facets behind the device filters, as the server counts them. */
+export interface DeviceFilters {
+  statuses: DeviceFilterValue[];
+  deviceTypes: DeviceFilterValue[];
+  osTypes: DeviceFilterValue[];
+  organizationIds: DeviceFilterTag[];
+  tagKeys: TagFilterOption[];
+  filteredCount: number;
+}
+
+/** What narrows a device list, in the backend's field names. */
+export interface DeviceFilterInput {
+  statuses?: string[];
+  deviceTypes?: string[];
+  osTypes?: string[];
+  organizationIds?: string[];
+  tagKeys?: string[];
+  tagValues?: string[];
+}

package/src/components/features/devices/use-tag-filter-modal.ts

@@ -0,0 +1,109 @@
+'use client';
+
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { useMdUp } from '../../../hooks/ui/use-media-query';
+import type { DeviceFilters } from './types';
+
+function isCompleteTag(tag: string): boolean {
+  const i = tag.indexOf(':');
+  return i > 0 && i < tag.length - 1;
+}
+
+/** One selectable value in a FilterModal group. */
+interface FilterOption {
+  id: string;
+  label: string;
+  count?: number;
+}
+
+interface UseTagFilterModalParams {
+  tags: string[];
+  deviceFilters: DeviceFilters | null;
+  columns: Array<{ key: string; label: string; filterable?: boolean; filterOptions?: FilterOption[] }>;
+  /** `useApiParams`' setter, each device list param is a list of ids. */
+  setParams: (params: Record<string, string[]>) => void;
+  /**
+   * Runs after the filters are applied, to bring the list back to its top.
+   * Default: the page's `<main>` scrolls to the top. A host whose list scrolls
+   * in another container passes its own.
+   */
+  onApplied?: () => void;
+}
+
+const scrollMainToTop = () => document.querySelector('main')?.scrollTo({ top: 0, behavior: 'instant' });
+
+export function useTagFilterModal({
+  tags,
+  deviceFilters,
+  columns,
+  setParams,
+  onApplied = scrollMainToTop,
+}: UseTagFilterModalParams) {
+  const isMdUp = useMdUp();
+  const [isOpen, setIsOpen] = useState(false);
+
+  // FilterModal calls onFilterChange first, then onTagsChange.
+  // We buffer column filters in a ref so onTagsChange can flush everything in one setParams call.
+  const pendingFiltersRef = useRef<Record<string, string[]>>({});
+
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+
+  const filterGroups = useMemo(() => {
+    if (isMdUp) return [];
+    return columns
+      .filter(column => column.filterable)
+      .map(column => ({
+        id: column.key,
+        title: column.label,
+        options: column.filterOptions || [],
+      }));
+  }, [columns, isMdUp]);
+
+  const tagFilterKeys = useMemo(() => {
+    if (!deviceFilters?.tagKeys) return [];
+    const grouped = new Map<string, { id: string; label: string; count?: number }[]>();
+    for (const tag of deviceFilters.tagKeys) {
+      if (tag.key === 'null') continue;
+      const values = grouped.get(tag.key) ?? [];
+      grouped.set(tag.key, values);
+      if (tag.value !== 'null') {
+        values.push({ id: tag.value, label: tag.value, count: tag.count });
+      }
+    }
+    return Array.from(grouped, ([key, values]) => ({ key, label: key, values }));
+  }, [deviceFilters]);
+
+  // Step 1: buffer column filters (called first by FilterModal)
+  const handleFilterChange = useCallback((columnFilters: Record<string, string[]>) => {
+    pendingFiltersRef.current = columnFilters;
+  }, []);
+
+  // Step 2: combine with buffered filters and flush (called second by FilterModal)
+  const handleTagsChange = useCallback(
+    (newTags: string[]) => {
+      const cf = pendingFiltersRef.current;
+      setParams({
+        statuses: cf.status || [],
+        osTypes: cf.os || [],
+        organizationIds: cf.organization || [],
+        tags: newTags.filter(isCompleteTag),
+      });
+      pendingFiltersRef.current = {};
+      onApplied();
+    },
+    [setParams, onApplied],
+  );
+
+  return {
+    isOpen,
+    open,
+    close,
+    isMdUp,
+    filterGroups,
+    tagFilterKeys,
+    handleFilterChange,
+    handleTagsChange,
+    selectedTags: tags,
+  };
+}

package/src/components/features/index.ts

@@ -88,13 +88,22 @@ export * from './view-toggle';
 // AI Enrich components
 export * from './ai-enrich';
 export * from './policy-configuration-panel';
+export * from './policies';
+export * from './cloud-tenants';
 export * from './waitlist-form';
 export * from './notifications';
 export * from './time-tracker';
 export * from './remote-session';
 export * from './board';
+export * from './devices';
+export * from './software';
+export * from './logs';
+export * from './knowledge-base';
 export * from './sortable-list';
 export * from './ticket-status-config-list';
 
 // A request and its outcome as two turns and a "your part" footer
 export * from './conversation-card';
+
+// The jobs a product does, one at a time with its real screen (marketing pages)
+export * from './capability-explorer';

package/src/components/features/knowledge-base/index.ts

@@ -0,0 +1,19 @@
+'use client';
+
+export { KNOWLEDGE_BASE_ITEM_ICON } from './knowledge-base-item-icon';
+export type { KnowledgeBaseItemType } from './knowledge-base-item-icon';
+export { getKnowledgeBaseColumns, getKnowledgeBaseOpenColumn, KnowledgeBaseTableBody } from './knowledge-base-table';
+export type {
+  KnowledgeBaseRow,
+  KnowledgeBaseRowHref,
+  KnowledgeBaseRowStatus,
+  KnowledgeBaseRowType,
+  KnowledgeBaseTableBodyProps,
+  KnowledgeBaseTableMode,
+} from './knowledge-base-table';
+export { KnowledgeBaseArticleView } from './knowledge-base-article-view';
+export type {
+  KnowledgeBaseArticleAuthor,
+  KnowledgeBaseArticleStatus,
+  KnowledgeBaseArticleViewProps,
+} from './knowledge-base-article-view';

package/src/components/features/knowledge-base/knowledge-base-article-view.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { PageLayout } from '../../layout/page-layout';
+import type { ActionsMenuGroup } from '../../ui/actions-menu';
+import { Card } from '../../ui/card';
+import { DeletedUserAvatar } from '../../ui/deleted-user-avatar';
+import type { PageActionButton } from '../../ui/page-actions';
+import { SquareAvatar } from '../../ui/square-avatar';
+import { Tag } from '../../ui/tag';
+import { type TicketAttachment, TicketAttachmentsList } from '../../ui/ticket-attachments-list';
+import { TicketDetailSection } from '../../ui/ticket-detail-section';
+import { TruncateText } from '../../ui/truncate-text';
+import { KNOWLEDGE_BASE_STATUS_VARIANT, type KnowledgeBaseArticleStatus } from './knowledge-base-status';
+
+export type { KnowledgeBaseArticleStatus };
+
+export interface KnowledgeBaseArticleAuthor {
+  /** Display name; null: "Unknown". */
+  name: string | null;
+  /** A URL the browser can load as is. */
+  imageUrl?: string;
+  /** A deleted account: the red placeholder instead of the avatar, the name in the error colour. */
+  deleted?: boolean;
+}
+
+export interface KnowledgeBaseArticleViewProps {
+  title: string;
+  /** "Back" over the title; left out, the page has none (a picture of the page). */
+  onBack?: () => void;
+  /** The header's buttons and the menu behind them, built by the host from the article's state. */
+  actions?: PageActionButton[];
+  menuActions?: ActionsMenuGroup[];
+  tags?: readonly { id: string; label: string }[];
+  author: KnowledgeBaseArticleAuthor;
+  /** When the article last changed, already formatted by the host. */
+  updatedLabel: string;
+  status: KnowledgeBaseArticleStatus;
+  /** The article's body: the host's markdown renderer over the content. */
+  content: ReactNode;
+  attachments?: TicketAttachment[];
+  /** What the host adds under the article (assigned items, its dialogs). */
+  children?: ReactNode;
+  className?: string;
+}
+
+/**
+ * One knowledge base article, open: its title and tags, who wrote it, when it
+ * changed and its status, then the body and its attachments. Everything that
+ * reads or changes the article (the query, publish, archive, move) is the
+ * host's: it passes the article's fields, the buttons and the rendered body.
+ */
+export function KnowledgeBaseArticleView({
+  title,
+  onBack,
+  actions,
+  menuActions,
+  tags = [],
+  author,
+  updatedLabel,
+  status,
+  content,
+  attachments = [],
+  children,
+  className = 'px-[var(--spacing-system-l)] pb-[var(--spacing-system-l)]',
+}: KnowledgeBaseArticleViewProps) {
+  return (
+    <PageLayout
+      title={title}
+      backButton={onBack ? { label: 'Back', onClick: onBack } : undefined}
+      actionsVariant="menu-primary"
+      actions={actions}
+      menuActions={menuActions}
+      className={className}
+    >
+      {tags.length > 0 && (
+        <div className="flex flex-wrap gap-[var(--spacing-system-xsf)]">
+          {tags.map(tag => (
+            <Tag key={tag.id} label={tag.label} variant="outline" className="max-w-full" />
+          ))}
+        </div>
+      )}
+
+      <Card className="border-ods-border px-[var(--spacing-system-mf)] py-0">
+        <div className="grid grid-cols-2 gap-x-[var(--spacing-system-mf)] content-lg:grid-cols-3">
+          <div className="flex h-20 min-w-0 items-center gap-[var(--spacing-system-xsf)]">
+            {author.deleted ? (
+              <DeletedUserAvatar size="md" />
+            ) : (
+              <SquareAvatar
+                src={author.imageUrl}
+                fallback={author.name ?? 'A'}
+                alt={author.name ?? 'Author'}
+                size="md"
+                variant="round"
+              />
+            )}
+            <div className="flex min-w-0 flex-1 flex-col">
+              <TruncateText className={author.deleted ? 'text-ods-error' : undefined}>
+                {author.name ?? 'Unknown'}
+              </TruncateText>
+              <p className="truncate text-heading-5 text-ods-text-secondary">Author</p>
+            </div>
+          </div>
+
+          <div className="flex h-20 min-w-0 flex-col justify-center">
+            <TruncateText>{updatedLabel}</TruncateText>
+            <p className="truncate text-heading-5 text-ods-text-secondary">Updated</p>
+          </div>
+
+          <div
+            className="col-span-2 -mx-[var(--spacing-system-mf)] border-t border-ods-border content-lg:hidden"
+            aria-hidden
+          />
+
+          <div className="flex h-20 min-w-0 flex-col items-start justify-center gap-[var(--spacing-system-xxs)]">
+            <Tag variant={KNOWLEDGE_BASE_STATUS_VARIANT[status]} label={status} />
+            <p className="truncate text-heading-5 text-ods-text-secondary">Status</p>
+          </div>
+        </div>
+      </Card>
+
+      {content}
+
+      {attachments.length > 0 && (
+        <TicketDetailSection label="Attachments">
+          <TicketAttachmentsList attachments={attachments} />
+        </TicketDetailSection>
+      )}
+
+      {children}
+    </PageLayout>
+  );
+}

package/src/components/features/knowledge-base/knowledge-base-item-icon.ts

@@ -0,0 +1,14 @@
+import { BookTextIcon, FolderIcon } from '../../icons-v2-generated';
+
+/** What a Knowledge Base item is. */
+export type KnowledgeBaseItemType = 'ARTICLE' | 'FOLDER';
+
+/**
+ * The glyph for each Knowledge Base item type. Single source for the KB table
+ * and Mingo's `@kb` / `@kbFolder` mention chips, so an article or folder reads
+ * the same in the chat as on the Knowledge Base page.
+ */
+export const KNOWLEDGE_BASE_ITEM_ICON = {
+  ARTICLE: BookTextIcon,
+  FOLDER: FolderIcon,
+} satisfies Record<KnowledgeBaseItemType, typeof BookTextIcon>;

package/src/components/features/knowledge-base/knowledge-base-status.ts

@@ -0,0 +1,12 @@
+/**
+ * THE status vocabulary of a knowledge base article and the tag each status
+ * wears. The article view and the table both read it: a new status is added
+ * here, once.
+ */
+export type KnowledgeBaseArticleStatus = 'DRAFT' | 'PUBLISHED' | 'ARCHIVED';
+
+export const KNOWLEDGE_BASE_STATUS_VARIANT: Record<KnowledgeBaseArticleStatus, 'success' | 'warning' | 'grey'> = {
+  PUBLISHED: 'success',
+  DRAFT: 'warning',
+  ARCHIVED: 'grey',
+};

package/src/components/features/knowledge-base/knowledge-base-table.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import { type ReactNode, useMemo } from 'react';
+import { formatDate, formatTime } from '../../../utils/format-date';
+import { openInNewTab } from '../../../utils/open-in-new-tab';
+import { ArrowRightUpIcon } from '../../icons-v2-generated';
+import { Button } from '../../ui/button/button';
+import { type ColumnDef, DataTable, type Row, useDataTable } from '../../ui/data-table';
+import { Tag as StatusTag } from '../../ui/tag';
+import { TruncateText } from '../../ui/truncate-text';
+import { KNOWLEDGE_BASE_ITEM_ICON } from './knowledge-base-item-icon';
+import { KNOWLEDGE_BASE_STATUS_VARIANT, type KnowledgeBaseArticleStatus } from './knowledge-base-status';
+
+export type KnowledgeBaseRowType = 'ARTICLE' | 'FOLDER' | string;
+export type KnowledgeBaseRowStatus = KnowledgeBaseArticleStatus | string | null | undefined;
+
+export interface KnowledgeBaseRow {
+  readonly id: string;
+  readonly type: KnowledgeBaseRowType;
+  readonly name: string;
+  readonly parentId?: string | null;
+  readonly status?: KnowledgeBaseRowStatus;
+  readonly summary?: string | null;
+  readonly createdAt?: string | null;
+  readonly updatedAt?: string | null;
+  readonly tags?: ReadonlyArray<{ readonly id: string; readonly key: string; readonly color?: string | null }>;
+}
+
+export type KnowledgeBaseTableMode = 'standard' | 'archive';
+
+/** Where a row leads: the article's page, or the folder's listing. */
+export type KnowledgeBaseRowHref = (item: KnowledgeBaseRow) => string;
+
+/**
+ * Click handler that opens `href` in a new tab. The button sits inside a row
+ * that renders as a link, and `<a>` cannot be nested inside `<a>`, so it is a
+ * `<button>` that opens the tab itself.
+ */
+/** The trailing "open in new tab" column. */
+export function getKnowledgeBaseOpenColumn(getHref: KnowledgeBaseRowHref): ColumnDef<KnowledgeBaseRow> {
+  return {
+    id: 'open',
+    cell: ({ row }: { row: Row<KnowledgeBaseRow> }) => (
+      <div data-no-row-click className="pointer-events-auto flex items-center justify-end">
+        <Button
+          onClick={openInNewTab(getHref(row.original))}
+          variant="outline"
+          size="icon"
+          leftIcon={<ArrowRightUpIcon className="h-5 w-5" />}
+          aria-label="Open in new tab"
+          className="bg-ods-card"
+        />
+      </div>
+    ),
+    enableSorting: false,
+    meta: { width: 'w-12 shrink-0 flex-none', hideAt: 'md', align: 'right' },
+  };
+}
+
+export function getKnowledgeBaseColumns(mode: KnowledgeBaseTableMode): ColumnDef<KnowledgeBaseRow>[] {
+  return [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      cell: ({ row }: { row: Row<KnowledgeBaseRow> }) => {
+        const item = row.original;
+        const Icon = item.type === 'FOLDER' ? KNOWLEDGE_BASE_ITEM_ICON.FOLDER : KNOWLEDGE_BASE_ITEM_ICON.ARTICLE;
+        const status = item.status as 'DRAFT' | 'PUBLISHED' | 'ARCHIVED' | null | undefined;
+        const tagStatus = status === 'DRAFT' || status === 'ARCHIVED' ? status : null;
+        return (
+          <div className="relative box-border flex h-20 w-full shrink-0 content-stretch items-center justify-start gap-[var(--spacing-system-m)] py-0">
+            <div className="relative flex h-8 w-8 shrink-0 items-center justify-center rounded-[6px] border border-ods-border">
+              <Icon size={16} className="shrink-0 text-ods-text-secondary" />
+            </div>
+            <div className="flex min-w-0 flex-1 flex-col">
+              <div className="flex min-w-0 items-center gap-[var(--spacing-system-xsf)]">
+                {/* min-w-0 wrapper so the FloatingTooltip trigger div can shrink and the name ellipsizes. */}
+                <div className="min-w-0">
+                  <TruncateText>{item.name}</TruncateText>
+                </div>
+                {tagStatus && (
+                  <StatusTag
+                    variant={KNOWLEDGE_BASE_STATUS_VARIANT[tagStatus]}
+                    label={tagStatus}
+                    className="shrink-0"
+                  />
+                )}
+              </div>
+              {item.type === 'ARTICLE' && item.summary && (
+                <TruncateText variant="h6" tone="secondary">
+                  {item.summary}
+                </TruncateText>
+              )}
+            </div>
+          </div>
+        );
+      },
+      enableSorting: false,
+      meta: { width: 'flex-1 min-w-0' },
+    },
+    {
+      accessorKey: mode === 'archive' ? 'updatedAt' : 'createdAt',
+      header: mode === 'archive' ? 'Archived' : 'Created',
+      cell: ({ row }: { row: Row<KnowledgeBaseRow> }) => {
+        if (row.original.type !== 'ARTICLE') return null;
+        const ts = mode === 'archive' ? (row.original.updatedAt ?? row.original.createdAt) : row.original.createdAt;
+        if (!ts) return null;
+        return (
+          <div className="flex flex-col whitespace-nowrap">
+            <span className="text-ods-text-primary text-h4">{formatDate(ts)}</span>
+            <span className="text-heading-5 text-ods-text-secondary">{formatTime(ts)}</span>
+          </div>
+        );
+      },
+      enableSorting: false,
+      meta: { width: 'w-[140px]', hideAt: 'lg' },
+    },
+  ];
+}
+
+export interface KnowledgeBaseTableBodyProps {
+  items: KnowledgeBaseRow[];
+  /**
+   * Where a row leads, for the row link and the "open in new tab" button.
+   * Pass a stable function (module level or `useCallback`): the columns and
+   * the rows are memoized on it.
+   */
+  getHref: KnowledgeBaseRowHref;
+  mode?: KnowledgeBaseTableMode;
+  isLoading?: boolean;
+  emptyMessage?: string;
+  skeletonRows?: number;
+  stickyHeaderOffset?: string;
+  footerSlot?: ReactNode;
+  actionsColumn?: ColumnDef<KnowledgeBaseRow>;
+  // Server-side total. Without it, RowCount shows only currently-loaded rows.
+  totalCount?: number;
+  /** The narrow rendering: the name column and the row actions only (no date, no "open in new tab"). */
+  compact?: boolean;
+}
+
+export function KnowledgeBaseTableBody({
+  items,
+  getHref,
+  mode = 'standard',
+  isLoading,
+  emptyMessage = 'No items found.',
+  skeletonRows,
+  stickyHeaderOffset,
+  footerSlot,
+  actionsColumn,
+  totalCount,
+  compact = false,
+}: KnowledgeBaseTableBodyProps) {
+  const columns = useMemo<ColumnDef<KnowledgeBaseRow>[]>(() => {
+    const base = getKnowledgeBaseColumns(mode);
+    const leading = compact ? base.slice(0, 1) : base;
+    const trailing = compact ? [] : [getKnowledgeBaseOpenColumn(getHref)];
+    return actionsColumn ? [...leading, actionsColumn, ...trailing] : [...leading, ...trailing];
+  }, [mode, actionsColumn, getHref, compact]);
+
+  const table = useDataTable<KnowledgeBaseRow>({
+    data: items,
+    columns,
+    getRowId: row => row.id,
+    enableSorting: false,
+  });
+
+  return (
+    <DataTable table={table}>
+      <DataTable.Header
+        stickyHeader={!!stickyHeaderOffset}
+        stickyHeaderOffset={stickyHeaderOffset}
+        rightSlot={<DataTable.RowCount itemName={mode === 'archive' ? 'article' : 'item'} totalCount={totalCount} />}
+      />
+      <DataTable.Body loading={isLoading} skeletonRows={skeletonRows} emptyMessage={emptyMessage} rowHref={getHref} />
+      {footerSlot}
+    </DataTable>
+  );
+}

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

@@ -0,0 +1,20 @@
+'use client';
+
+export { LogDrawer } from './log-drawer';
+export type { LogDrawerInfoField, LogDrawerProps } from './log-drawer';
+export { logSourceLabels, SYSTEM_SOURCE_LABEL } from './log-source-labels';
+export type { LogSourceLabels } from './log-source-labels';
+export { LogCopyIconButton, LogsPageView } from './logs-page-view';
+export type { LogCopyIconButtonProps, LogsPageViewProps } from './logs-page-view';
+export { LOG_COLUMN_WIDTHS } from './logs-table-columns';
+export { LogsTableSkeleton, LogsTableView } from './logs-table-view';
+export type { LogsTableGuideButton, LogsTableSkeletonProps, LogsTableViewProps } from './logs-table-view';
+export { logSeverityVariant } from './types';
+export type {
+  LogsTableColumnId,
+  LogsTableDateFilter,
+  LogsTableFacets,
+  LogsTableFilterOption,
+  LogStatusVariant,
+  UiLogEntry,
+} from './types';