@flanksource/clicky-ui 0.3.36 → 0.3.37

package/dist/rpc/OperationCatalog.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { ClickyCommandRuntime } from '../data/Clicky';
+import { ClickyCommandRuntime, ClickyRowDetailRenderer, ClickyCellRenderers, ClickyRowCardRenderer, ClickyRowDetailTitle } from '../data/Clicky';
+import { ModalSize } from '../overlay/Modal';
 import { RenderLink } from './EndpointList';
 import { ResultRenderer } from './OperationResultView';
 import { FormActionsRenderer } from './SchemaActionForm';
@@ -7,6 +8,7 @@ import { FilterExtension } from '../components/filter-bar-utils';
 import { PreExtension, PostExtension } from '../components/json-schema-form-types';
 import { DomainDefinition, ResolvedOperation } from './types';
 import { OperationsApiClient } from './useOperations';
+import { OperationCatalogFollowOption } from './useOperationCatalogFollow';
 export type OperationCatalogProps = {
     definition: DomainDefinition;
     entities: string[];
@@ -38,6 +40,73 @@ export type OperationCatalogProps = {
     actionInitialValues?: Record<string, Record<string, string>>;
     /** Plural noun used by the cross-page selection notice. */
     selectionNoun?: string;
+    /**
+     * Parameter values pinned by the host — sent on every list request, every
+     * filter lookup (both `client.lookupFilters` and per-filter type-ahead), and
+     * every export/download URL. Never rendered as an editable filter chip or
+     * form field, and never round-tripped through the URL: the host, not the
+     * reader, owns them (e.g. the `stream` a trace-results panel is scoped to).
+     */
+    lockedValues?: Record<string, string>;
+    /**
+     * Editable seed values for filters the URL has no value for yet — e.g. a
+     * database filter that should start at the host's current environment but
+     * stay changeable. Applied per-key only when the URL is silent on that key
+     * (a URL value always wins), still rendered as an ordinary editable filter
+     * field, and never sent as a locked value or written back to the URL as
+     * anything other than the resulting filter edit. Unlike `lockedValues`,
+     * these seed the FilterBar's own state, not an overlay on top of it.
+     */
+    initialValues?: Record<string, string>;
+    /**
+     * Controls whether list filters/pagination/sort read and write the URL.
+     * Omit for today's behaviour: unprefixed query params. `false` neither
+     * reads nor writes the URL — for a catalog embedded where the host owns the
+     * whole URL. `{ prefix }` reads and writes only `<prefix>.<name>` keys, so
+     * the catalog can live inside a host route with its own `?step=`/`?tab=`
+     * params without colliding.
+     */
+    urlState?: false | {
+        prefix: string;
+    };
+    /** Omit to infer cursor walking automatically; set when a host requires a specific paging presentation. */
+    paginationMode?: "paged" | "infinite";
+    /** Column names retained in raw rows for detail rendering but omitted from the table. */
+    hiddenColumns?: string[];
+    /**
+     * Host row-detail configuration for the result table. `render` receives raw
+     * row values keyed by column name, including columns hidden from `columns`
+     * — see `ClickyRowDetailRenderer`. Never disturbs server paging, filters,
+     * sort or export.
+     */
+    rowDetail?: {
+        render: ClickyRowDetailRenderer;
+        /** How the detail is surfaced when a row is clicked. Defaults to "row". */
+        style?: "row" | "dialog";
+        /** Dialog size when `style` is "dialog". Defaults to DataTable's "lg". */
+        dialogSize?: ModalSize;
+        /** Dialog title when `style` is "dialog", given the same raw row values as `render`. */
+        title?: ClickyRowDetailTitle;
+    };
+    /** Override selected result table cells using raw server values. */
+    cellRenderers?: ClickyCellRenderers;
+    /** Render each list result as a card from its raw row values. */
+    rowCard?: ClickyRowCardRenderer;
+    /**
+     * Follows the surface's list results live over the commons-db sessions SSE
+     * API instead of polling: rows the server has appended since the last
+     * fetch appear in the table without a refetch. Requires the list
+     * operation to advertise a session-start operation (`POST
+     * <listPath>/sessions`) in the loaded OpenAPI document — when it does not,
+     * the catalog fails loudly with an explicit error naming the surface
+     * rather than silently rendering as if `follow` had never been set.
+     *
+     * The session opens with the same locked values and active filters the
+     * list request itself sends, and restarts whenever either changes.
+     * Pass `{ maxRows }` to size the in-memory live buffer (default 5,000 —
+     * see `useLogTail`); older rows are evicted and counted as `dropped`.
+     */
+    follow?: OperationCatalogFollowOption;
 };
-export declare function OperationCatalog({ definition, entities, client, renderLink, allOperations, surfaceKey, filterPre, getCommandHref, renderError, commandRuntime, formPre, formPost, formActions, actionLabels, resultRenderer, actionsContainer, getRowDetailHref, actionInitialValues, selectionNoun, }: OperationCatalogProps): import("react").JSX.Element;
+export declare function OperationCatalog({ definition, entities, client, renderLink, allOperations, surfaceKey, filterPre, getCommandHref, renderError, commandRuntime, formPre, formPost, formActions, actionLabels, resultRenderer, actionsContainer, getRowDetailHref, actionInitialValues, selectionNoun, lockedValues, initialValues, urlState, paginationMode, hiddenColumns, rowDetail, cellRenderers, rowCard, follow, }: OperationCatalogProps): import("react").JSX.Element;
 //# sourceMappingURL=OperationCatalog.d.ts.map

package/dist/rpc/OperationCatalog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OperationCatalog.d.ts","sourceRoot":"","sources":["../../src/rpc/OperationCatalog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EACV,oBAAoB,EAIrB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAgB,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI/D,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,gCAAgC,CAAC;AACxC,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACd,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EACL,KAAK,gBAAgB,EAErB,KAAK,iBAAiB,EACvB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAiB,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAoB1E,MAAM,MAAM,qBAAqB,GAAG;IAClC,UAAU,EAAE,gBAAgB,CAAC;IAC7B,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,MAAM,EAAE,mBAAmB,CAAC;IAC5B,UAAU,EAAE,UAAU,CAAC;IAGvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,SAAS,CAAC,EAAE,eAAe,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,EAAE,EAAE,iBAAiB,KAAK,MAAM,CAAC;IACxE,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACzD,cAAc,CAAC,EAAE,oBAAoB,CAAC;IAEtC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAG3B,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAItC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;;;;;;;;OASG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACtD,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7D,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAIF,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,QAAQ,EACR,MAAM,EACN,UAAU,EACV,aAAqB,EACrB,UAAU,EACV,SAAS,EACT,cAAmC,EACnC,WAAkC,EAClC,cAAc,EACd,OAAO,EACP,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,GACd,EAAE,qBAAqB,+BAobvB"}
+{"version":3,"file":"OperationCatalog.d.ts","sourceRoot":"","sources":["../../src/rpc/OperationCatalog.tsx"],"names":[],"mappings":"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"}

package/dist/rpc/OperationCatalog.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useMemo, useState, useRef, useEffect, useCallback } from "react";
 import { useQuery, keepPreviousData } from "@tanstack/react-query";
 import { useOperationPages } from "./useOperationPages.js";
@@ -17,8 +17,13 @@ import { useOperationFilterSearch } from "./operationFilterSearch.js";
 import { parseMultiFilterValue, serializeMultiFilterValue } from "../data/data-table-filter-values.js";
 import { Loading } from "../components/loading.js";
 import { getClickyRowId } from "./rowNavigation.js";
-import { readOperationFiltersFromUrl, writeOperationFiltersToUrl } from "./operationCatalogUrl.js";
+import { useOperationCatalogFilterState } from "./operationCatalogFilterState.js";
+import { followRowOrder, partitionFollowRows, mergeFollowRowsIntoResponse } from "./operationCatalogFollow.js";
+import { OperationCatalogFollowStatus } from "./OperationCatalogFollowStatus.js";
+import { useOperationCatalogFollow } from "./useOperationCatalogFollow.js";
 const defaultCommandHref = (operationId) => `/commands/${operationId}`;
+const EMPTY_LOCKED_VALUES = {};
+const EMPTY_INITIAL_VALUES = {};
 function OperationCatalog({
   definition,
   entities,
@@ -38,9 +43,22 @@ function OperationCatalog({
   actionsContainer,
   getRowDetailHref,
   actionInitialValues,
-  selectionNoun
+  selectionNoun,
+  lockedValues = EMPTY_LOCKED_VALUES,
+  initialValues = EMPTY_INITIAL_VALUES,
+  urlState,
+  paginationMode,
+  hiddenColumns,
+  rowDetail,
+  cellRenderers,
+  rowCard,
+  follow
 }) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
+  const renderRowDetail = rowDetail == null ? void 0 : rowDetail.render;
+  const rowDetailStyle = rowDetail == null ? void 0 : rowDetail.style;
+  const rowDetailDialogSize = rowDetail == null ? void 0 : rowDetail.dialogSize;
+  const rowDetailTitle = rowDetail == null ? void 0 : rowDetail.title;
   const { operations, spec, isLoading } = useOperations(client);
   const filterShapes = (_a = spec == null ? void 0 : spec.components) == null ? void 0 : _a["x-clicky-filters"];
   const surfaceOps = useMemo(
@@ -60,13 +78,16 @@ function OperationCatalog({
     () => useSurfaceMetadata ? findSurfaceDetailOperation(domainOps, surfaceKey) : void 0,
     [domainOps, surfaceKey, useSurfaceMetadata]
   );
-  const [filters, setFilters] = useState(
-    () => readOperationFiltersFromUrl()
-  );
+  const listParameters = (listEndpoint == null ? void 0 : listEndpoint.operation.parameters) ?? [];
+  const { filters, setFilters, effectiveFilters } = useOperationCatalogFilterState({
+    listParameters,
+    lockedValues,
+    urlState,
+    initialValues
+  });
   const [selectedRowIds, setSelectedRowIds] = useState([]);
   const [selectedRows, setSelectedRows] = useState([]);
   const [selectedScopeId, setSelectedScopeId] = useState();
-  const listParameters = (listEndpoint == null ? void 0 : listEndpoint.operation.parameters) ?? [];
   const membershipFilterParameterNames = useMemo(
     () => listParameters.filter(
       (parameter) => {
@@ -97,8 +118,8 @@ function OperationCatalog({
     }
   }, [membershipFilterKey]);
   const lookupParameters = useMemo(
-    () => packLookupParameterValues(filters, listParameters),
-    [filters, listParameters]
+    () => packLookupParameterValues(effectiveFilters, listParameters),
+    [effectiveFilters, listParameters]
   );
   const download = useMemo(() => {
     var _a2;
@@ -114,18 +135,36 @@ function OperationCatalog({
       } : {}
     };
   }, [definition.title, listEndpoint]);
-  useEffect(() => {
-    writeOperationFiltersToUrl(
-      filters,
-      listParameters.map((parameter) => parameter.name)
-    );
-  }, [filters, listParameters]);
   const list = useOperationPages({
     client,
     endpoint: listEndpoint,
     parameters: listParameters,
-    filters
+    filters: effectiveFilters,
+    ...paginationMode ? { paginationMode } : {}
+  });
+  const { followEnabled, sessionOperation, followMissing, tail } = useOperationCatalogFollow({
+    follow,
+    operations,
+    listEndpoint,
+    listParameters,
+    effectiveFilters,
+    showTable: !!listEndpoint
   });
+  const reconcileFollow = typeof follow === "object" && (follow == null ? void 0 : follow.mode) === "reconcile";
+  const refetchList = useRef(list.refetch);
+  refetchList.current = list.refetch;
+  const onReconcile = useRef(reconcileFollow ? follow.onReconcile : void 0);
+  onReconcile.current = reconcileFollow ? follow.onReconcile : void 0;
+  useEffect(() => {
+    if (!reconcileFollow || tail.lastSequence === null) return;
+    const sequence = tail.lastSequence;
+    const timer = setTimeout(() => {
+      var _a2;
+      refetchList.current();
+      (_a2 = onReconcile.current) == null ? void 0 : _a2.call(onReconcile, sequence);
+    }, 250);
+    return () => clearTimeout(timer);
+  }, [reconcileFollow, tail.lastSequence]);
   useCursorStaleRecovery({
     error: list.error,
     parameters: listParameters,
@@ -179,30 +218,55 @@ function OperationCatalog({
   const lookupSearch = useOperationFilterSearch(
     client,
     listEndpoint,
-    filters,
+    effectiveFilters,
     listParameters
   );
   const filterBarConfig = useMemo(() => {
     const options = {
       includeLocations: ["query"],
       lookupSearch,
-      components: filterShapes
+      components: filterShapes,
+      lockedValues,
+      hideLocked: true
     };
     if (lookupQuery.data != null) {
       options.lookup = lookupQuery.data;
     }
     return parametersToFormConfig(listParameters, filters, setFilters, options);
-  }, [filters, filterShapes, listParameters, lookupQuery.data, lookupSearch]);
+  }, [
+    filters,
+    filterShapes,
+    listParameters,
+    lockedValues,
+    lookupQuery.data,
+    lookupSearch
+  ]);
   const dataTablePagination = useMemo(
     () => dataTablePaginationFromForm(filterBarConfig.pagination, list.response),
     [filterBarConfig.pagination, list.response]
   );
-  const decoratedFilters = useMemo(
-    () => filterBarConfig.filters.map(
-      (filter) => applyFilterExtensions(filter, filterPre)
-    ),
-    [filterBarConfig.filters, filterPre]
+  const followOrder = followRowOrder((_c = (_b = filterBarConfig.sort) == null ? void 0 : _b.value) == null ? void 0 : _c.dir);
+  const decoratedTimeRange = useMemo(
+    () => filterBarConfig.timeRange ? applyFilterExtensions(
+      {
+        key: "timeRange",
+        kind: "date-range",
+        label: filterBarConfig.timeRange.timeEnabled === false ? "Date range" : "Time range",
+        ...filterBarConfig.timeRange
+      },
+      filterPre
+    ) : void 0,
+    [filterBarConfig.timeRange, filterPre]
   );
+  const decoratedFilters = useMemo(() => {
+    const next = filterBarConfig.filters.map(
+      (filter) => applyFilterExtensions(filter, filterPre)
+    );
+    if ((decoratedTimeRange == null ? void 0 : decoratedTimeRange.placement) === "overflow") {
+      next.push(decoratedTimeRange);
+    }
+    return next;
+  }, [decoratedTimeRange, filterBarConfig.filters, filterPre]);
   const cellFilters = useMemo(
     () => Object.fromEntries(
       listParameters.filter((parameter) => {
@@ -261,13 +325,14 @@ function OperationCatalog({
       cellFilters,
       onCellFilterChange,
       ...filterBarConfig.search ? { search: filterBarConfig.search } : {},
-      ...filterBarConfig.timeRange ? { timeRange: filterBarConfig.timeRange } : {}
+      ...filterBarConfig.timeRange && (decoratedTimeRange == null ? void 0 : decoratedTimeRange.placement) !== "overflow" ? { timeRange: filterBarConfig.timeRange } : {}
     }),
     [
       cellFilters,
       decoratedFilters,
       filterBarConfig.search,
       filterBarConfig.timeRange,
+      decoratedTimeRange == null ? void 0 : decoratedTimeRange.placement,
       onCellFilterChange
     ]
   );
@@ -276,7 +341,7 @@ function OperationCatalog({
   if (!list.isFetching) {
     if (list.isError) {
       listError = list.error;
-    } else if (((_b = list.response) == null ? void 0 : _b.success) === false) {
+    } else if (((_d = list.response) == null ? void 0 : _d.success) === false) {
       listError = new OperationsApiClientError(
         list.response.error || list.response.message || list.response.stderr || `Command failed with exit code ${list.response.exit_code}`,
         {
@@ -290,7 +355,23 @@ function OperationCatalog({
     }
   }
   const tableError = listError !== void 0 ? renderError(listError, `Failed to load ${(listEndpoint == null ? void 0 : listEndpoint.path) ?? ""}`) : void 0;
-  const tableResponse = ((_c = list.response) == null ? void 0 : _c.success) === false ? null : list.response;
+  const tableResponse = ((_e = list.response) == null ? void 0 : _e.success) === false ? null : list.response;
+  const followPartition = partitionFollowRows(tail.rows, tail.clickyRows);
+  const followStreamError = tail.error ?? (!reconcileFollow && followPartition.missingClickyRow ? {
+    scope: "stream",
+    message: "a follow event arrived without its presented row (clickyRow) — the profile stopped sending it"
+  } : null);
+  const followMerge = followEnabled && sessionOperation && !reconcileFollow ? mergeFollowRowsIntoResponse(
+    tableResponse,
+    followPartition.rows,
+    followOrder
+  ) : void 0;
+  const mergedTableResponse = followMerge ? followMerge.response : tableResponse;
+  const resultsPagination = followMerge && followMerge.addedCount > 0 && dataTablePagination ? {
+    ...dataTablePagination,
+    total: (dataTablePagination.total ?? 0) + followMerge.addedCount,
+    totalRelation: "gte"
+  } : dataTablePagination;
   const walkProps = list.infinite ? { pages: list.pages, infinite: list.infinite } : {};
   if (isLoading || showTable && list.isPending && list.response == null) {
     return /* @__PURE__ */ jsx(Loading, { variant: "centered", label: `Loading ${definition.title}…` });
@@ -333,77 +414,106 @@ function OperationCatalog({
             client
           }
         ),
-        showTable ? /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", "data-slot": "operation-catalog-results", children: (() => {
-          const defaultView = /* @__PURE__ */ jsx(
-            OperationResultView,
+        showTable ? /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", "data-slot": "operation-catalog-results", children: followMissing ? renderError(
+          new Error(
+            `Surface "${surfaceKey ?? definition.title}" set follow, but ${listEndpoint == null ? void 0 : listEndpoint.path} advertises no session to follow (expected POST ${listEndpoint == null ? void 0 : listEndpoint.path}/sessions)`
+          ),
+          "Live follow is not available"
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          followEnabled && sessionOperation && /* @__PURE__ */ jsx(
+            OperationCatalogFollowStatus,
             {
-              response: tableResponse,
+              status: tail.status,
+              error: followStreamError,
+              droppedRows: reconcileFollow ? 0 : tail.droppedRows,
+              addedCount: (followMerge == null ? void 0 : followMerge.addedCount) ?? 0,
+              className: "mb-2"
+            }
+          ),
+          (() => {
+            const defaultView = /* @__PURE__ */ jsx(
+              OperationResultView,
+              {
+                response: mergedTableResponse,
+                loading: list.isFetching,
+                loadingMessage: `Loading ${definition.title} results…`,
+                emptyMessage: "No records returned",
+                ariaLabel: `${definition.title} results`,
+                className: "mt-0 h-full min-h-0",
+                detailOperation,
+                ...hiddenColumns ? { hiddenColumns } : {},
+                ...getRowDetailHref ? { getRowDetailHref } : {},
+                ...selectionActionOps.length > 0 ? {
+                  rowSelection: {
+                    selectedRowIds,
+                    onSelectionChange: (ids, rows) => {
+                      setSelectedRowIds(ids);
+                      setSelectedRows(rows);
+                      setSelectedScopeId(void 0);
+                    },
+                    ...(dataTablePagination == null ? void 0 : dataTablePagination.total) != null && dataTablePagination.totalRelation === "eq" ? {
+                      selectAllPages: {
+                        ...selectedScopeId ? { selectedScopeId } : {},
+                        noun: selectionNoun ?? definition.title.toLocaleLowerCase(),
+                        scopes: [
+                          {
+                            id: "all-matching",
+                            total: dataTablePagination.total,
+                            onSelectAll: () => setSelectedScopeId("all-matching")
+                          }
+                        ]
+                      }
+                    } : {},
+                    getRowId: (row) => {
+                      const id = getClickyRowId(row);
+                      if (!id) {
+                        throw new Error(
+                          "Clicky bulk action row is missing an _id or id cell"
+                        );
+                      }
+                      return id;
+                    },
+                    isRowSelectable: (row) => getClickyRowId(row) != null
+                  }
+                } : {},
+                filterConfig: resultFilterConfig,
+                ...tableError ? { error: tableError } : {},
+                ...commandRuntime ? { commandRuntime } : {},
+                ...resultsPagination ? { pagination: resultsPagination } : {},
+                ...filterBarConfig.sort ? { sort: filterBarConfig.sort } : {},
+                ...download ? { download } : {},
+                ...renderRowDetail ? { renderRowDetail } : {},
+                ...cellRenderers ? { cellRenderers } : {},
+                ...rowCard ? { renderRowCard: rowCard } : {},
+                ...rowDetailStyle ? { detailStyle: rowDetailStyle } : {},
+                ...rowDetailDialogSize ? { detailDialogSize: rowDetailDialogSize } : {},
+                ...rowDetailTitle ? { detailDialogTitle: rowDetailTitle } : {},
+                ...walkProps
+              }
+            );
+            return resultRenderer ? resultRenderer({
+              response: list.response,
               loading: list.isFetching,
-              loadingMessage: `Loading ${definition.title} results…`,
-              emptyMessage: "No records returned",
-              ariaLabel: `${definition.title} results`,
-              className: "mt-0 h-full min-h-0",
-              detailOperation,
-              ...getRowDetailHref ? { getRowDetailHref } : {},
-              ...selectionActionOps.length > 0 ? {
-                rowSelection: {
-                  selectedRowIds,
-                  onSelectionChange: (ids, rows) => {
-                    setSelectedRowIds(ids);
-                    setSelectedRows(rows);
-                    setSelectedScopeId(void 0);
-                  },
-                  ...(dataTablePagination == null ? void 0 : dataTablePagination.total) != null && dataTablePagination.totalRelation === "eq" ? {
-                    selectAllPages: {
-                      ...selectedScopeId ? { selectedScopeId } : {},
-                      noun: selectionNoun ?? definition.title.toLocaleLowerCase(),
-                      scopes: [
-                        {
-                          id: "all-matching",
-                          total: dataTablePagination.total,
-                          onSelectAll: () => setSelectedScopeId("all-matching")
-                        }
-                      ]
-                    }
-                  } : {},
-                  getRowId: (row) => {
-                    const id = getClickyRowId(row);
-                    if (!id) {
-                      throw new Error(
-                        "Clicky bulk action row is missing an _id or id cell"
-                      );
-                    }
-                    return id;
-                  },
-                  isRowSelectable: (row) => getClickyRowId(row) != null
-                }
-              } : {},
+              defaultView,
               filterConfig: resultFilterConfig,
-              ...tableError ? { error: tableError } : {},
-              ...commandRuntime ? { commandRuntime } : {},
+              // A renderer that replaces the table owns the whole surface,
+              // pager and download menu included. Without these it can only
+              // drop them, which is how a replaced view silently loses the
+              // ability to reach page two — or, under a walk, page one's
+              // rows the moment page two arrives.
               ...dataTablePagination ? { pagination: dataTablePagination } : {},
               ...filterBarConfig.sort ? { sort: filterBarConfig.sort } : {},
               ...download ? { download } : {},
+              ...surfaceKey ? { surfaceKey } : {},
+              ...renderRowDetail ? { renderRowDetail } : {},
+              ...rowCard ? { renderRowCard: rowCard } : {},
+              ...rowDetailStyle ? { detailStyle: rowDetailStyle } : {},
+              ...rowDetailDialogSize ? { detailDialogSize: rowDetailDialogSize } : {},
+              ...rowDetailTitle ? { detailDialogTitle: rowDetailTitle } : {},
               ...walkProps
-            }
-          );
-          return resultRenderer ? resultRenderer({
-            response: list.response,
-            loading: list.isFetching,
-            defaultView,
-            filterConfig: resultFilterConfig,
-            // A renderer that replaces the table owns the whole surface,
-            // pager and download menu included. Without these it can only
-            // drop them, which is how a replaced view silently loses the
-            // ability to reach page two — or, under a walk, page one's
-            // rows the moment page two arrives.
-            ...dataTablePagination ? { pagination: dataTablePagination } : {},
-            ...filterBarConfig.sort ? { sort: filterBarConfig.sort } : {},
-            ...download ? { download } : {},
-            ...surfaceKey ? { surfaceKey } : {},
-            ...walkProps
-          }) : defaultView;
-        })() }) : /* @__PURE__ */ jsx(
+            }) : defaultView;
+          })()
+        ] }) }) : /* @__PURE__ */ jsx(
           EndpointList,
           {
             operations: domainOps,