akanjs 3.0.0-alpha.96 → 3.0.0-alpha.98

package/fetch/client/sliceInitHandle.ts

@@ -78,6 +78,8 @@ export class SliceInitHandle {
       [`pageOf${capRefName}`]: page,
       [`lastPageOf${capRefName}`]: lastPage,
       [`limitOf${capRefName}`]: limit,
+
+      [`hasMoreOf${capRefName}`]: !!limit && modelObjList.length >= limit,
       [`queryArgsOf${capRefName}`]: queryArgs,
       [`sortOf${capRefName}`]: sort,
       [`${refName}InitAt`]: new Date(),

package/fetch/fetchType/appliedReturn.type.ts

@@ -43,6 +43,8 @@ type ServerInitShape<
   [K in `lastPageOf${CapRefName}`]: number;
 } & {
   [K in `limitOf${CapRefName}`]: number;
+} & {
+  [K in `hasMoreOf${CapRefName}`]: boolean;
 } & {
   [K in `queryArgsOf${CapRefName}`]: QueryArgs;
 } & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "3.0.0-alpha.96",
+  "version": "3.0.0-alpha.98",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {

package/store/action.ts

@@ -177,7 +177,7 @@ export type SliceAction<
 } & {
   [K in `setPageOf${_CapitalizedRefName}${_CapitalizedSuffix}`]: (page: number, options?: FetchPolicy) => Promise<void>;
 } & {
-  [K in `addPageOf${_CapitalizedRefName}${_CapitalizedSuffix}`]: (page: number, options?: FetchPolicy) => Promise<void>;
+  [K in `loadMoreOf${_CapitalizedRefName}${_CapitalizedSuffix}`]: (options?: FetchPolicy) => Promise<void>;
 } & {
   [K in `setLimitOf${_CapitalizedRefName}${_CapitalizedSuffix}`]: (
     limit: number,
@@ -273,11 +273,14 @@ type DefaultSliceActionFields<
 } & {
   [Suffix in _Suffixes as
     | `setPageOf${_CapRef}${StoreSliceSuffixCap<SlceCls, Suffix>}`
-    | `addPageOf${_CapRef}${StoreSliceSuffixCap<SlceCls, Suffix>}`
     | `setLimitOf${_CapRef}${StoreSliceSuffixCap<SlceCls, Suffix>}`]: (
     value: number,
     options?: FetchPolicy,
   ) => Promise<void>;
+} & {
+  [Suffix in _Suffixes as `loadMoreOf${_CapRef}${StoreSliceSuffixCap<SlceCls, Suffix>}`]: (
+    options?: FetchPolicy,
+  ) => Promise<void>;
 } & {
   [Suffix in _Suffixes as `setQueryArgsOf${_CapRef}${StoreSliceSuffixCap<SlceCls, Suffix>}`]: (
     ...args:
@@ -528,7 +531,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
     refreshModel: `refresh${className}`,
     selectModel: `select${className}`,
     setPageOfModel: `setPageOf${className}`,
-    addPageOfModel: `addPageOf${className}`,
+    loadMoreOfModel: `loadMoreOf${className}`,
     setLimitOfModel: `setLimitOf${className}`,
     setQueryArgsOfModel: `setQueryArgsOf${className}`,
     setSortOfModel: `setSortOf${className}`,
@@ -537,6 +540,8 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
     lastPageOfModel: `lastPageOf${className}`,
     pageOfModel: `pageOf${className}`,
     limitOfModel: `limitOf${className}`,
+    hasMoreOfModel: `hasMoreOf${className}`,
+    isCumulativeOfModel: `isCumulativeOf${className}`,
     queryArgsOfModel: `queryArgsOf${className}`,
     sortOfModel: `sortOf${className}`,
   };
@@ -579,6 +584,12 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
     
     const current = (this.get() as { [key: string]: any })[names.modelDraft] as DraftState | null;
     if (current?.key !== draft.key) return;
+
+    const openedForm = (this.get() as { [key: string]: any })[names.modelForm] as object;
+    if (DraftStore.contentHash(record.form) === DraftStore.contentHash(DraftStore.encodeForm(refName, openedForm))) {
+      await DraftStore.remove(draft.key);
+      return;
+    }
     let form: object;
     try {
       form = DraftStore.decodeForm(refName, record.form);
@@ -1034,7 +1045,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
       refreshModel: SliceName.replace(names.Model, names.refreshModel),
       selectModel: SliceName.replace(names.Model, names.selectModel),
       setPageOfModel: SliceName.replace(names.Model, names.setPageOfModel),
-      addPageOfModel: SliceName.replace(names.Model, names.addPageOfModel),
+      loadMoreOfModel: SliceName.replace(names.Model, names.loadMoreOfModel),
       setLimitOfModel: SliceName.replace(names.Model, names.setLimitOfModel),
       setQueryArgsOfModel: SliceName.replace(names.Model, names.setQueryArgsOfModel),
       setSortOfModel: SliceName.replace(names.Model, names.setSortOfModel),
@@ -1043,10 +1054,23 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
       lastPageOfModel: SliceName.replace(names.Model, names.lastPageOfModel),
       pageOfModel: SliceName.replace(names.Model, names.pageOfModel),
       limitOfModel: SliceName.replace(names.Model, names.limitOfModel),
+      hasMoreOfModel: SliceName.replace(names.Model, names.hasMoreOfModel),
+      isCumulativeOfModel: SliceName.replace(names.Model, names.isCumulativeOfModel),
       queryArgsOfModel: SliceName.replace(names.Model, names.queryArgsOfModel),
       sortOfModel: SliceName.replace(names.Model, names.sortOfModel),
       modelSelection: SliceName.replace(names.Model, names.modelSelection),
     };
+    /**
+     * Whether the server still holds rows past the ones just returned.
+     *
+     * Read off the batch rather than off `<model>Insight`, because the count is a second query — absent entirely
+     * under `{ insight: false }`, and one live event out of step with the list the rest of the time. A short
+     * batch is the server saying it had nothing more; a full one costs at most one extra request that comes back
+     * empty when the total happens to be a multiple of the limit.
+     */
+    const hasMoreFrom = (batch: unknown[], askedFor: number) => ({
+      [namesOfSlice.hasMoreOfModel]: batch.length >= askedFor && askedFor > 0,
+    });
     const singleSliceAction = {
       [namesOfSlice.initModel]: async function (
         this: SetGet,
@@ -1057,7 +1081,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
           FetchPolicy;
         const queryArgs = new Array(initArgLength).fill(null).map((_, i) => args[i] as object);
         const defaultModel = new cnst.full().set(initForm.default ?? {}) as unknown as Full;
-        this.set({ [names.defaultModel]: defaultModel });
+        this.set({ [names.defaultModel]: defaultModel, [namesOfSlice.isCumulativeOfModel]: false });
         await ((this as unknown as DynamicRecord)[namesOfSlice.refreshModel] as (...args: any[]) => Promise<void>)({
           ...initForm,
           queryArgs,
@@ -1089,6 +1113,10 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
           ...fetchPolicy
         } = initForm;
         const modelOperation = currentState[names.modelOperation] as string;
+        const isCumulative = currentState[namesOfSlice.isCumulativeOfModel] as boolean;
+        const loadedLength = (currentState[namesOfSlice.modelList] as DataList<Light>).length;
+
+        const fetchLimit = isCumulative ? Math.max(limit, loadedLength) : limit;
         const queryArgsOfModel = currentState[namesOfSlice.queryArgsOfModel] as object[];
         const pageOfModel = currentState[namesOfSlice.pageOfModel] as number;
         const limitOfModel = currentState[namesOfSlice.limitOfModel] as number;
@@ -1112,7 +1140,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
             (fetch[namesOfSlice.modelList] as (...args: any[]) => Promise<Light[]>)(
               ...fetchQueryArgs,
               (page - 1) * limit,
-              limit,
+              fetchLimit,
               sort,
               { ...fetchPolicy, onError: initForm.onError },
             ),
@@ -1134,6 +1162,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
             [namesOfSlice.modelInitList]: modelList,
             [namesOfSlice.modelInitAt]: new Date(),
             [namesOfSlice.lastPageOfModel]: Math.max(Math.floor((modelInsight.count - 1) / (limit || 20)) + 1, 1),
+            ...hasMoreFrom(modelDataList, fetchLimit),
             [namesOfSlice.limitOfModel]: limit,
             [namesOfSlice.queryArgsOfModel]: queryArgs,
             [namesOfSlice.sortOfModel]: sort,
@@ -1183,35 +1212,58 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
           this.set({
             [namesOfSlice.modelList]: new DataList(modelDataList),
             [namesOfSlice.pageOfModel]: page,
+            [namesOfSlice.isCumulativeOfModel]: false,
+            ...hasMoreFrom(modelDataList, limitOfModel),
           });
         } finally {
           if (requests.isCurrent(ticket)) this.set({ [namesOfSlice.modelListLoading]: false });
         }
       },
-      [namesOfSlice.addPageOfModel]: async function (this: SetGet, page: number, options?: FetchPolicy) {
+      /**
+       * Appends the rows after the ones already loaded, turning this slice's window into a cumulative list.
+       *
+       * The offset is the list on screen rather than a page number, and that is the whole point. A page number
+       * assumes the server's ordering baseline has not moved, which a live insertion at the front breaks on the
+       * first event; the rows in hand are the first `n` the query returns whatever has been inserted since, so
+       * asking for what comes after them cannot drift from what is displayed. It also leaves `pageOf<Model>` at
+       * 1, which is what keeps live placement — refused anywhere but the first page — working past the first
+       * "more".
+       *
+       * It reads `<model>ListLoading` and never sets it: an append leaves the rows on screen, so raising it
+       * would put the whole-list spinner over one and would make `applyLive<Model>` drop every live event until
+       * the batch lands. So concurrent calls are NOT rejected — two of them fetch the same offset, since the
+       * list they measure has not grown yet. That is a wasted round trip and never a wrong list: the ticket
+       * makes only the newest response apply, and both asked for the same rows. A caller that minds the wasted
+       * request holds its own in-flight flag, the way `InfiniteScroll` does.
+       */
+      [namesOfSlice.loadMoreOfModel]: async function (this: SetGet, options?: FetchPolicy) {
         const currentState = this.get() as { [key: string]: any };
+
+        if (currentState[namesOfSlice.modelListLoading] as boolean) return;
+        if (!(currentState[namesOfSlice.hasMoreOfModel] as boolean)) return;
         const modelList = currentState[namesOfSlice.modelList] as DataList<Light>;
         const queryArgsOfModel = currentState[namesOfSlice.queryArgsOfModel] as object[];
         const pageOfModel = currentState[namesOfSlice.pageOfModel] as number;
-        const limitOfModel = currentState[namesOfSlice.limitOfModel] as number;
+        const limitOfModel = (currentState[namesOfSlice.limitOfModel] as number) || 20;
         const sortOfModel = currentState[namesOfSlice.sortOfModel] as Sort;
-        if (pageOfModel === page) return;
-        const addFront = page < pageOfModel;
         const ticket = requests.claim();
         const fetchQueryArgs = expandQueryArgs(queryArgsOfModel, slice.args);
         const modelDataList = await (fetch[namesOfSlice.modelList] as (...args: any[]) => Promise<Light[]>)(
           ...fetchQueryArgs,
-          (page - 1) * limitOfModel,
+          (pageOfModel - 1) * limitOfModel + modelList.length,
           limitOfModel,
           sortOfModel,
           options,
         );
 
         if (!requests.isCurrent(ticket)) return;
-        const newModelList = new DataList(
-          addFront ? [...modelDataList, ...modelList] : [...modelList, ...modelDataList],
-        );
-        this.set({ [namesOfSlice.modelList]: newModelList, [namesOfSlice.pageOfModel]: page });
+
+        const currentModelList = (this.get() as { [key: string]: any })[namesOfSlice.modelList] as DataList<Light>;
+        this.set({
+          [namesOfSlice.modelList]: new DataList([...currentModelList.values, ...modelDataList]),
+          [namesOfSlice.isCumulativeOfModel]: true,
+          ...hasMoreFrom(modelDataList, limitOfModel),
+        });
       },
       [namesOfSlice.setLimitOfModel]: async function (this: SetGet, limit: number, options?: FetchPolicy) {
         const currentState = this.get() as { [key: string]: any };
@@ -1240,6 +1292,8 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
             [namesOfSlice.lastPageOfModel]: Math.max(Math.floor((modelInsight.count - 1) / limit) + 1, 1),
             [namesOfSlice.limitOfModel]: limit,
             [namesOfSlice.pageOfModel]: page,
+            [namesOfSlice.isCumulativeOfModel]: false,
+            ...hasMoreFrom(modelDataList, limit),
           });
         } finally {
           if (requests.isCurrent(ticket)) this.set({ [namesOfSlice.modelListLoading]: false });
@@ -1291,6 +1345,8 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
             [namesOfSlice.modelInsight]: modelInsight,
             [namesOfSlice.lastPageOfModel]: Math.max(Math.floor((modelInsight.count - 1) / limitOfModel) + 1, 1),
             [namesOfSlice.pageOfModel]: 1,
+            [namesOfSlice.isCumulativeOfModel]: false,
+            ...hasMoreFrom(modelDataList, limitOfModel),
             [namesOfSlice.modelSelection]: new Map(),
           });
         } finally {
@@ -1319,6 +1375,8 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
             [namesOfSlice.modelList]: new DataList(modelDataList),
             [namesOfSlice.sortOfModel]: sort,
             [namesOfSlice.pageOfModel]: 1,
+            [namesOfSlice.isCumulativeOfModel]: false,
+            ...hasMoreFrom(modelDataList, limitOfModel),
           });
         } finally {
           if (requests.isCurrent(ticket)) this.set({ [namesOfSlice.modelListLoading]: false });
@@ -1329,7 +1387,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
        *
        * The verb already answers membership — the server evaluated this slice's own query against the document
        * before and after the write, so arriving here at all is the proof, and nothing is re-checked. What is left
-       * is the window: `<slice>List` is one page of the list, not the list, so an insertion is only ever attempted
+       * is the window: `<slice>List` is a prefix of the list, not the list, so an insertion is only ever attempted
        * where its position can be known. Everywhere else the list is stamped stale and refetched, which is always
        * correct and merely costs a round trip.
        */
@@ -1344,6 +1402,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
         }
         const modelInsight = currentState[namesOfSlice.modelInsight] as Insight & BaseInsight;
         const limit = (currentState[namesOfSlice.limitOfModel] as number) || 20;
+        const isCumulative = currentState[namesOfSlice.isCumulativeOfModel] as boolean;
         const countedTo = (count: number) => ({
           [namesOfSlice.modelInsight]: new cnst.insight().set({ ...modelInsight, count }),
           [namesOfSlice.lastPageOfModel]: Math.max(Math.floor((count - 1) / limit) + 1, 1),
@@ -1372,6 +1431,8 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
                 row: light as unknown as LiveSortableRow,
                 page: currentState[namesOfSlice.pageOfModel] as number,
                 limit,
+                cumulative: isCumulative,
+                hasMore: currentState[namesOfSlice.hasMoreOfModel] as boolean,
                 sortKey: String(currentState[namesOfSlice.sortOfModel]),
                 allowedSorts: slice.live?.sort ?? [],
                 sorts: fetch.sortValueMap?.get(refName),
@@ -1382,7 +1443,8 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
           return;
         }
 
-        const placed = [...modelList.slice(0, placement), light, ...modelList.slice(placement)].slice(0, limit);
+        const inserted = [...modelList.slice(0, placement), light, ...modelList.slice(placement)];
+        const placed = isCumulative ? inserted : inserted.slice(0, limit);
         this.set({
           [namesOfSlice.modelList]: new DataList(placed as Light[]),
           ...countedTo(modelInsight.count + 1),

package/store/draftStore.ts

@@ -17,6 +17,9 @@ const MAX_DRAFTS_PER_IDENTITY = 30;
  */
 const VOLATILE_CLAIMS = ["iat", "exp", "nbf", "jti"] as const;
 
+/** The fields a form carries from its row rather than from what the user typed. */
+const RECORD_STAMPS = new Set(["createdAt", "updatedAt", "removedAt"]);
+
 export interface DraftRecord {
   v: number;
   /** ISO. Drives both the "n minutes ago" label and the TTL/LRU sweep. */
@@ -143,6 +146,17 @@ export class DraftStore {
     return DraftStore.#hash8(DraftStore.#stableStringify(DraftStore.encodeForm(refName, form)));
   }
 
+  /**
+   * What two encoded forms holding the same values hash to, whatever record stamps they carry.
+   *
+   * The stamps come from the row rather than from the user, so a save the form made itself moves `updatedAt` and
+   * would otherwise make a draft look different from the record that already holds it.
+   */
+  static contentHash(encoded: Record<string, unknown>): string {
+    const content = Object.fromEntries(Object.entries(encoded).filter(([key]) => !RECORD_STAMPS.has(key)));
+    return DraftStore.#hash8(DraftStore.#stableStringify(content));
+  }
+
   static async read(key: string): Promise<DraftRecord | null> {
     const storage = DraftStore.#storage();
     if (!storage) return null;

package/store/liveInsert.ts

@@ -8,6 +8,10 @@ export interface LivePlacementProps {
   /** Which page of the list is on screen. Only the first can place a row. */
   page: number;
   limit: number;
+  /** Whether the list is pages `1..N` concatenated rather than one window. */
+  cumulative: boolean;
+  /** Whether the server still holds rows past the ones in hand. */
+  hasMore: boolean;
   /** The sort key the window is ordered by. */
   sortKey: string;
   /** The sort keys the slice declared a subscriber may reproduce. */
@@ -38,6 +42,8 @@ export const livePlacementIndex = ({
   row,
   page,
   limit,
+  cumulative,
+  hasMore,
   sortKey,
   allowedSorts,
   sorts,
@@ -49,9 +55,10 @@ export const livePlacementIndex = ({
   const paths = Object.entries(sort);
   if (paths.some(([path]) => comparableOf(row[path]) === null)) return null;
   const index = list.findIndex((item) => compareRows(row, item, paths) < 0);
+  if (index !== -1) return index;
 
-  if (index === -1) return list.length < limit ? list.length : null;
-  return index;
+  if (cumulative) return hasMore ? null : list.length;
+  return list.length < limit ? list.length : null;
 };
 
 const compareRows = (left: LiveSortableRow, right: LiveSortableRow, paths: [string, 1 | -1][]): number => {

package/store/sliceRole.ts

@@ -7,7 +7,7 @@ export type SliceActionKey =
   | "refreshModel"
   | "selectModel"
   | "setPageOfModel"
-  | "addPageOfModel"
+  | "loadMoreOfModel"
   | "setLimitOfModel"
   | "setQueryArgsOfModel"
   | "setSortOfModel"

package/store/state.ts

@@ -49,6 +49,8 @@ export type SliceStateKey =
   | "lastPageOfModel"
   | "pageOfModel"
   | "limitOfModel"
+  | "hasMoreOfModel"
+  | "isCumulativeOfModel"
   | "queryArgsOfModel"
   | "sortOfModel";
 type _SliceMap<S extends SliceCls> = StoreSliceMap<S>;
@@ -114,6 +116,10 @@ export type SliceState<
   [K in `pageOf${_CapitalizedRefName}${_CapitalizedSuffix}`]: number;
 } & {
   [K in `limitOf${_CapitalizedRefName}${_CapitalizedSuffix}`]: number;
+} & {
+  [K in
+    | `hasMoreOf${_CapitalizedRefName}${_CapitalizedSuffix}`
+    | `isCumulativeOf${_CapitalizedRefName}${_CapitalizedSuffix}`]: boolean;
 } & {
   [K in `queryArgsOf${_CapitalizedRefName}${_CapitalizedSuffix}`]: Args;
 } & {
@@ -150,6 +156,10 @@ type DefaultSliceStateFields<
     | `lastPageOf${_CapRefName}${StoreSliceSuffixCap<SlceCls, Suffix>}`
     | `pageOf${_CapRefName}${StoreSliceSuffixCap<SlceCls, Suffix>}`
     | `limitOf${_CapRefName}${StoreSliceSuffixCap<SlceCls, Suffix>}`]: number;
+} & {
+  [Suffix in _Suffixes as
+    | `hasMoreOf${_CapRefName}${StoreSliceSuffixCap<SlceCls, Suffix>}`
+    | `isCumulativeOf${_CapRefName}${StoreSliceSuffixCap<SlceCls, Suffix>}`]: boolean;
 } & {
   [Suffix in _Suffixes as `queryArgsOf${_CapRefName}${StoreSliceSuffixCap<SlceCls, Suffix>}`]: StoreSliceArgs<
     SlceCls,
@@ -206,6 +216,8 @@ export const createSliceState = (refName: string, slice: { [key: string]: Serial
     lastPageOfModel: `lastPageOf${className}`,
     pageOfModel: `pageOf${className}`,
     limitOfModel: `limitOf${className}`,
+    hasMoreOfModel: `hasMoreOf${className}`,
+    isCumulativeOfModel: `isCumulativeOf${className}`,
     queryArgsOfModel: `queryArgsOf${className}`,
     sortOfModel: `sortOf${className}`,
   };
@@ -225,6 +237,8 @@ export const createSliceState = (refName: string, slice: { [key: string]: Serial
       lastPageOfModel: SliceName.replace(names.Model, names.lastPageOfModel),
       pageOfModel: SliceName.replace(names.Model, names.pageOfModel),
       limitOfModel: SliceName.replace(names.Model, names.limitOfModel),
+      hasMoreOfModel: SliceName.replace(names.Model, names.hasMoreOfModel),
+      isCumulativeOfModel: SliceName.replace(names.Model, names.isCumulativeOfModel),
       queryArgsOfModel: SliceName.replace(names.Model, names.queryArgsOfModel),
       sortOfModel: SliceName.replace(names.Model, names.sortOfModel),
     };
@@ -240,6 +254,8 @@ export const createSliceState = (refName: string, slice: { [key: string]: Serial
       [namesOfSlice.lastPageOfModel]: 1,
       [namesOfSlice.pageOfModel]: 1,
       [namesOfSlice.limitOfModel]: 20,
+      [namesOfSlice.hasMoreOfModel]: false,
+      [namesOfSlice.isCumulativeOfModel]: false,
       [namesOfSlice.queryArgsOfModel]: [],
       [namesOfSlice.sortOfModel]: "latest",
     };

package/store/storeInstance.ts

@@ -433,6 +433,8 @@ export class StoreInstance {
       modelStaleAt: `${fieldName}StaleAt`,
       pageOfModel: `pageOf${className}`,
       limitOfModel: `limitOf${className}`,
+      hasMoreOfModel: `hasMoreOf${className}`,
+      isCumulativeOfModel: `isCumulativeOf${className}`,
       queryArgsOfModel: `queryArgsOf${className}`,
       sortOfModel: `sortOf${className}`,
       modelSelection: `${fieldName}Selection`,
@@ -440,7 +442,7 @@ export class StoreInstance {
       refreshModel: `refresh${className}`,
       selectModel: `select${className}`,
       setPageOfModel: `setPageOf${className}`,
-      addPageOfModel: `addPageOf${className}`,
+      loadMoreOfModel: `loadMoreOf${className}`,
       setLimitOfModel: `setLimitOf${className}`,
       setQueryArgsOfModel: `setQueryArgsOf${className}`,
       setSortOfModel: `setSortOf${className}`,
@@ -460,6 +462,8 @@ export class StoreInstance {
       lastPageOfModel: SliceName.replace(names.Model, names.lastPageOfModel),
       pageOfModel: SliceName.replace(names.Model, names.pageOfModel),
       limitOfModel: SliceName.replace(names.Model, names.limitOfModel),
+      hasMoreOfModel: SliceName.replace(names.Model, names.hasMoreOfModel),
+      isCumulativeOfModel: SliceName.replace(names.Model, names.isCumulativeOfModel),
       queryArgsOfModel: SliceName.replace(names.Model, names.queryArgsOfModel),
       sortOfModel: SliceName.replace(names.Model, names.sortOfModel),
       modelSelection: SliceName.replace(names.Model, names.modelSelection),
@@ -469,7 +473,7 @@ export class StoreInstance {
       refreshModel: SliceName.replace(names.Model, names.refreshModel),
       selectModel: SliceName.replace(names.Model, names.selectModel),
       setPageOfModel: SliceName.replace(names.Model, names.setPageOfModel),
-      addPageOfModel: SliceName.replace(names.Model, names.addPageOfModel),
+      loadMoreOfModel: SliceName.replace(names.Model, names.loadMoreOfModel),
       setLimitOfModel: SliceName.replace(names.Model, names.setLimitOfModel),
       setQueryArgsOfModel: SliceName.replace(names.Model, names.setQueryArgsOfModel),
       setSortOfModel: SliceName.replace(names.Model, names.setSortOfModel),

package/types/fetch/fetchType/appliedReturn.type.d.ts

@@ -32,6 +32,8 @@ type ServerInitShape<RefName extends string, QueryArgs, CapRefName extends strin
     [K in `lastPageOf${CapRefName}`]: number;
 } & {
     [K in `limitOf${CapRefName}`]: number;
+} & {
+    [K in `hasMoreOf${CapRefName}`]: boolean;
 } & {
     [K in `queryArgsOf${CapRefName}`]: QueryArgs;
 } & {

package/types/store/action.d.ts

@@ -100,7 +100,7 @@ export type SliceAction<RefName extends string, Suffix extends string, Input, Li
 } & {
     [K in `setPageOf${_CapitalizedRefName}${_CapitalizedSuffix}`]: (page: number, options?: FetchPolicy) => Promise<void>;
 } & {
-    [K in `addPageOf${_CapitalizedRefName}${_CapitalizedSuffix}`]: (page: number, options?: FetchPolicy) => Promise<void>;
+    [K in `loadMoreOf${_CapitalizedRefName}${_CapitalizedSuffix}`]: (options?: FetchPolicy) => Promise<void>;
 } & {
     [K in `setLimitOf${_CapitalizedRefName}${_CapitalizedSuffix}`]: (limit: number, options?: FetchPolicy) => Promise<void>;
 } & {
@@ -143,7 +143,9 @@ type DefaultSliceActionFields<SlceCls extends SliceCls, _CapRef extends string,
         remove?: boolean;
     }) => void;
 } & {
-    [Suffix in _Suffixes as `setPageOf${_CapRef}${StoreSliceSuffixCap<SlceCls, Suffix>}` | `addPageOf${_CapRef}${StoreSliceSuffixCap<SlceCls, Suffix>}` | `setLimitOf${_CapRef}${StoreSliceSuffixCap<SlceCls, Suffix>}`]: (value: number, options?: FetchPolicy) => Promise<void>;
+    [Suffix in _Suffixes as `setPageOf${_CapRef}${StoreSliceSuffixCap<SlceCls, Suffix>}` | `setLimitOf${_CapRef}${StoreSliceSuffixCap<SlceCls, Suffix>}`]: (value: number, options?: FetchPolicy) => Promise<void>;
+} & {
+    [Suffix in _Suffixes as `loadMoreOf${_CapRef}${StoreSliceSuffixCap<SlceCls, Suffix>}`]: (options?: FetchPolicy) => Promise<void>;
 } & {
     [Suffix in _Suffixes as `setQueryArgsOf${_CapRef}${StoreSliceSuffixCap<SlceCls, Suffix>}`]: (...args: [...args: StoreSliceArgs<SlceCls, Suffix>, options?: FetchPolicy] | [
         setQueryArgs: (...prevQueryArgs: StoreSliceArgs<SlceCls, Suffix>) => StoreSliceArgs<SlceCls, Suffix>,

package/types/store/baseSt.d.ts

@@ -112,7 +112,7 @@ declare const RootStore_base: import("./rootStore.d.ts").RootStoreCls<"root", im
     } & {
         [x: `setPageOf${any}`]: (page: number, options?: import("../common.d.ts").FetchPolicy) => Promise<void>;
     } & {
-        [x: `addPageOf${any}`]: (page: number, options?: import("../common.d.ts").FetchPolicy) => Promise<void>;
+        [x: `loadMoreOf${any}`]: (options?: import("../common.d.ts").FetchPolicy) => Promise<void>;
     } & {
         [x: `setLimitOf${any}`]: (limit: number, options?: import("../common.d.ts").FetchPolicy) => Promise<void>;
     } & {
@@ -418,7 +418,7 @@ export declare const st: import("./agentic.d.ts").StAgentic & {
         } & {
             [x: `setPageOf${any}`]: (page: number, options?: import("../common.d.ts").FetchPolicy) => Promise<void>;
         } & {
-            [x: `addPageOf${any}`]: (page: number, options?: import("../common.d.ts").FetchPolicy) => Promise<void>;
+            [x: `loadMoreOf${any}`]: (options?: import("../common.d.ts").FetchPolicy) => Promise<void>;
         } & {
             [x: `setLimitOf${any}`]: (limit: number, options?: import("../common.d.ts").FetchPolicy) => Promise<void>;
         } & {

package/types/store/draftStore.d.ts

@@ -36,6 +36,13 @@ export declare class DraftStore {
     static decodeForm(refName: string, plain: Record<string, unknown>): object;
     /** What the dirty check compares. Cheap enough to take once per debounce window, not once per keystroke. */
     static formHash(refName: string, form: object): string;
+    /**
+     * What two encoded forms holding the same values hash to, whatever record stamps they carry.
+     *
+     * The stamps come from the row rather than from the user, so a save the form made itself moves `updatedAt` and
+     * would otherwise make a draft look different from the record that already holds it.
+     */
+    static contentHash(encoded: Record<string, unknown>): string;
     static read(key: string): Promise<DraftRecord | null>;
     static write(key: string, record: DraftRecord): Promise<void>;
     static remove(key: string): Promise<void>;

package/types/store/liveInsert.d.ts

@@ -9,6 +9,10 @@ export interface LivePlacementProps {
     /** Which page of the list is on screen. Only the first can place a row. */
     page: number;
     limit: number;
+    /** Whether the list is pages `1..N` concatenated rather than one window. */
+    cumulative: boolean;
+    /** Whether the server still holds rows past the ones in hand. */
+    hasMore: boolean;
     /** The sort key the window is ordered by. */
     sortKey: string;
     /** The sort keys the slice declared a subscriber may reproduce. */
@@ -37,4 +41,4 @@ export interface LivePlacementProps {
  * And every sorted field has to be on the row, because a comparison against a value that is not there silently
  * places the row at one end.
  */
-export declare const livePlacementIndex: ({ list, row, page, limit, sortKey, allowedSorts, sorts, }: LivePlacementProps) => number | null;
+export declare const livePlacementIndex: ({ list, row, page, limit, cumulative, hasMore, sortKey, allowedSorts, sorts, }: LivePlacementProps) => number | null;

package/types/store/sliceRole.d.ts

@@ -1,7 +1,7 @@
 import type { SerializedArg } from "akanjs/signal";
 import type { SliceStateKey } from "./state.d.ts";
 /** The generated slice actions, named by what they do rather than by the key any one slice publishes them under. */
-export type SliceActionKey = "initModel" | "refreshModel" | "selectModel" | "setPageOfModel" | "addPageOfModel" | "setLimitOfModel" | "setQueryArgsOfModel" | "setSortOfModel" | "applyLiveModel" | "watchLiveModel";
+export type SliceActionKey = "initModel" | "refreshModel" | "selectModel" | "setPageOfModel" | "loadMoreOfModel" | "setLimitOfModel" | "setQueryArgsOfModel" | "setSortOfModel" | "applyLiveModel" | "watchLiveModel";
 /**
  * What a generated key on `st.do` / `st.use` actually is.
  *

package/types/store/state.d.ts

@@ -25,7 +25,7 @@ export interface DraftState {
     /** Set while a draft is the thing in the form. Drives the "continuing, saved n minutes ago" chip. */
     appliedAt: Date | null;
 }
-export type SliceStateKey = "defaultModel" | "modelInsight" | "modelList" | "modelListLoading" | "modelInitList" | "modelInitAt" | "modelStaleAt" | "modelSelection" | "lastPageOfModel" | "pageOfModel" | "limitOfModel" | "queryArgsOfModel" | "sortOfModel";
+export type SliceStateKey = "defaultModel" | "modelInsight" | "modelList" | "modelListLoading" | "modelInitList" | "modelInitAt" | "modelStaleAt" | "modelSelection" | "lastPageOfModel" | "pageOfModel" | "limitOfModel" | "hasMoreOfModel" | "isCumulativeOfModel" | "queryArgsOfModel" | "sortOfModel";
 type _SliceMap<S extends SliceCls> = StoreSliceMap<S>;
 type _StateRefName<S extends SliceCls> = SlceCnstRefName<S>;
 type _StateCap<S extends SliceCls> = SlceCnstCapitalizedRefName<S>;
@@ -78,6 +78,8 @@ export type SliceState<RefName extends string, Suffix extends string, Full, Ligh
     [K in `pageOf${_CapitalizedRefName}${_CapitalizedSuffix}`]: number;
 } & {
     [K in `limitOf${_CapitalizedRefName}${_CapitalizedSuffix}`]: number;
+} & {
+    [K in `hasMoreOf${_CapitalizedRefName}${_CapitalizedSuffix}` | `isCumulativeOf${_CapitalizedRefName}${_CapitalizedSuffix}`]: boolean;
 } & {
     [K in `queryArgsOf${_CapitalizedRefName}${_CapitalizedSuffix}`]: Args;
 } & {
@@ -97,6 +99,8 @@ type DefaultSliceStateFields<SlceCls extends SliceCls, _RefName extends string,
     [Suffix in _Suffixes as `${_RefName}Insight${StoreSliceSuffixCap<SlceCls, Suffix>}`]: _Insight;
 } & {
     [Suffix in _Suffixes as `lastPageOf${_CapRefName}${StoreSliceSuffixCap<SlceCls, Suffix>}` | `pageOf${_CapRefName}${StoreSliceSuffixCap<SlceCls, Suffix>}` | `limitOf${_CapRefName}${StoreSliceSuffixCap<SlceCls, Suffix>}`]: number;
+} & {
+    [Suffix in _Suffixes as `hasMoreOf${_CapRefName}${StoreSliceSuffixCap<SlceCls, Suffix>}` | `isCumulativeOf${_CapRefName}${StoreSliceSuffixCap<SlceCls, Suffix>}`]: boolean;
 } & {
     [Suffix in _Suffixes as `queryArgsOf${_CapRefName}${StoreSliceSuffixCap<SlceCls, Suffix>}`]: StoreSliceArgs<SlceCls, Suffix>;
 } & {

package/types/ui/InfiniteScroll.d.ts

@@ -1,12 +1,12 @@
 export interface InfiniteScrollProps {
-    total: number;
-    currentPage: number;
-    itemsPerPage: number;
-    onAddPage: (page: number) => Promise<void>;
-    onPageSelect: (page: number, option?: {
-        scrollToTop?: boolean;
-    }) => void;
+    hasMore: boolean;
+    onLoadMore: () => Promise<void>;
     children: React.ReactNode;
+    /**
+     * Load earlier rows above the ones in hand, preserving the reading position across the prepend. Assumes
+     * normal column flow. It does not scroll anywhere at mount, so a list meant to open at its newest row scrolls
+     * itself — and until it does, the sentinel is on screen and loads one window unasked.
+     */
     reverse?: boolean;
 }
-export declare const InfiniteScroll: ({ itemsPerPage, currentPage, total, onPageSelect, onAddPage, children, reverse, }: InfiniteScrollProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InfiniteScroll: ({ hasMore, onLoadMore, children, reverse }: InfiniteScrollProps) => import("react/jsx-runtime").JSX.Element;

package/types/ui/Model/DraftBar.d.ts

@@ -1,14 +1,24 @@
 import type { SliceMeta } from "akanjs/fetch";
+export interface DraftBarViewProps {
+    className?: string;
+    /** The model the recovered form belongs to. */
+    refName: string;
+    /**
+     * `conflict` is a decision the user has to settle — the record moved since the draft was taken, so the form
+     * shows the server's value and the bar offers the older one. `applied` is a notice: the draft is what is on
+     * screen, and the bar is the way back.
+     */
+    state: "conflict" | "applied";
+    /** When the draft was taken. */
+    savedAt: Date;
+    /** Puts the offered draft into the form. Passed in the `conflict` state only. */
+    onRestore?: () => void;
+    /** Drops the draft and keeps the form as it was opened. */
+    onDiscard: () => void;
+}
 interface DraftBarProps {
     className?: string;
     slice: SliceMeta;
 }
-/**
- * What the user is told about a recovered form.
- *
- * Two states, and the difference is whether the draft is already in the form. A pending one is a conflict the
- * user has to settle — the record moved since the draft was taken, so the form shows the server's value and this
- * offers the older one. An applied one is just a notice: the draft is what is on screen, and this is the way back.
- */
 export default function DraftBar({ className, slice }: DraftBarProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/types/ui/Model/Edit.d.ts

@@ -1,5 +1,6 @@
 import type { SliceMeta } from "akanjs/fetch";
 import type { ReactNode } from "react";
+import type { DraftProp } from "./draftScope.d.ts";
 interface EditProps {
     type?: "icon" | "button";
     className?: string;
@@ -11,6 +12,8 @@ interface EditProps {
     renderTitle?: ((model: {
         id: string;
     }) => string | ReactNode) | string;
+    /** Draft recovery for the form this opens. `false` turns it off; a string names the scope explicitly. */
+    draft?: DraftProp;
 }
-export default function Edit({ className, wrapperClassName, type, children, slice, modelId, modal, renderTitle, }: EditProps): import("react/jsx-runtime").JSX.Element;
+export default function Edit({ className, wrapperClassName, type, children, slice, modelId, modal, renderTitle, draft, }: EditProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/types/ui/Model/EditModal.d.ts

@@ -9,6 +9,8 @@ interface EditModelProps<Full> {
     slice: SliceMeta;
     /** Additional classes for the wrapper. */
     className?: string;
+    /** Additional classes for the recovered-form banner this shell draws above the form. */
+    draftBarClassName?: string;
     /** Re-check submit eligibility when form state changes. */
     checkSubmit?: boolean;
     /** Client edit promise or partial form seed. */
@@ -54,5 +56,5 @@ interface EditModalProps<Full extends {
 }
 export default function EditModal<Full extends {
     id: string;
-}>({ type, slice, id, className, disabled, checkSubmit, modalClassName, edit, modal, renderTitle, children, submitText, submitClassName, submitOption, renderSubmit, loadingWrapper, draft, onSubmit, onCancel, }: EditModalProps<Full>): import("react/jsx-runtime").JSX.Element | undefined;
+}>({ type, slice, id, className, draftBarClassName, disabled, checkSubmit, modalClassName, edit, modal, renderTitle, children, submitText, submitClassName, submitOption, renderSubmit, loadingWrapper, draft, onSubmit, onCancel, }: EditModalProps<Full>): import("react/jsx-runtime").JSX.Element | undefined;
 export {};

package/types/ui/More.d.ts

@@ -2,7 +2,8 @@ interface MoreProps {
     total: number;
     itemsPerPage: number;
     currentPage: number;
-    onAddPage: (page: number) => Promise<void>;
+    hasMore: boolean;
+    onLoadMore: () => Promise<void>;
     onPageSelect: (page: number, option?: {
         scrollToTop?: boolean;
     }) => void;
@@ -10,5 +11,5 @@ interface MoreProps {
     className?: string;
     reverse?: boolean;
 }
-export declare const More: ({ total, itemsPerPage, currentPage, onAddPage, onPageSelect, children, className, reverse, }: MoreProps) => import("react/jsx-runtime").JSX.Element;
+export declare const More: ({ total, itemsPerPage, currentPage, hasMore, onLoadMore, onPageSelect, children, className, reverse, }: MoreProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/types/ui/UiOverride/context.d.ts

@@ -22,6 +22,7 @@ import type { SkeletonProps } from "../Loading/Skeleton.d.ts";
 import type { SpinProps } from "../Loading/Spin.d.ts";
 import type { MenuProps } from "../Menu.d.ts";
 import type { ModalProps } from "../Modal.d.ts";
+import type { DraftBarViewProps } from "../Model/DraftBar.d.ts";
 import type { PaginationProps } from "../Pagination.d.ts";
 import type { PopconfirmProps } from "../Popconfirm.d.ts";
 import type { ItemProps as RadioItemProps, RadioProps } from "../Radio.d.ts";
@@ -54,6 +55,7 @@ export interface AkanUiOverrides {
     Menu: ComponentType<MenuProps>;
     Tooltip: ComponentType<TooltipProps>;
     Unauthorized: ComponentType<UnauthorizedProps>;
+    DraftBar: ComponentType<DraftBarViewProps>;
     AgentChat: ComponentType<AgentChatProps>;
     AgentLauncher: ComponentType<AgentLauncherProps>;
     AgentBubble: ComponentType<AgentBubbleProps>;

package/ui/InfiniteScroll.tsx

@@ -3,56 +3,90 @@ import { useEffect, useRef, useState } from "react";
 import { BiLoaderAlt } from "react-icons/bi";
 
 export interface InfiniteScrollProps {
-  total: number;
-  currentPage: number;
-  itemsPerPage: number;
-  onAddPage: (page: number) => Promise<void>;
-  onPageSelect: (page: number, option?: { scrollToTop?: boolean }) => void;
+  hasMore: boolean;
+  onLoadMore: () => Promise<void>;
   children: React.ReactNode;
+  /**
+   * Load earlier rows above the ones in hand, preserving the reading position across the prepend. Assumes
+   * normal column flow. It does not scroll anywhere at mount, so a list meant to open at its newest row scrolls
+   * itself — and until it does, the sentinel is on screen and loads one window unasked.
+   */
   reverse?: boolean;
 }
 
-export const InfiniteScroll = ({
-  itemsPerPage,
-  currentPage,
-  total,
-  onPageSelect,
-  onAddPage,
-  children,
-  reverse,
-}: InfiniteScrollProps) => {
+let warnedColumnReverse = false;
+
+/**
+ * The sentinel is positioned by DOM order alone — first child to load earlier, last child to load more — so a
+ * `column-reverse` parent paints it at the opposite end from the rows it controls, and `scrollTop: 0` is then
+ * that same end, so it also fires at mount. `flex-col-reverse` is the usual no-JS way to pin a chat to the
+ * bottom, so a caller reaching for `reverse` may well already have it; the result reads as a control placed
+ * wrongly rather than as an error, which is why it is worth saying out loud once.
+ */
+const warnColumnReverse = (sentinel: Element | null) => {
+  if (warnedColumnReverse || process.env.AKAN_PUBLIC_ENV !== "local") return;
+  const parent = sentinel?.parentElement;
+  if (!parent || getComputedStyle(parent).flexDirection !== "column-reverse") return;
+  warnedColumnReverse = true;
+  console.warn(
+    "<InfiniteScroll> sits in a `flex-col-reverse` parent, which paints its load sentinel at the end opposite the rows it loads, and fires it at mount. Drop `flex-col-reverse` and let `reverse` hold the reading position instead.",
+  );
+};
+
+const scrollableOverflows = new Set(["auto", "scroll", "overlay"]);
+
+/**
+ * The element that actually scrolls the sentinel — the document only once no ancestor has taken the job.
+ *
+ * A chat timeline or a log tail scrolls inside its own `overflow-y-auto` box, and there the document does not
+ * move at all, so anchoring `document.scrollingElement` restores a position nothing changed. Resolved per load
+ * rather than once, because the box that scrolls is a layout outcome and a caller cannot be asked to name it.
+ */
+const scrollerOf = (sentinel: Element | null) => {
+  if (typeof document === "undefined") return null;
+  let el = sentinel?.parentElement ?? null;
+  while (el && el !== document.body && el !== document.documentElement) {
+
+    if (el.scrollHeight > el.clientHeight && scrollableOverflows.has(getComputedStyle(el).overflowY)) return el;
+    el = el.parentElement;
+  }
+  return document.scrollingElement;
+};
+
+export const InfiniteScroll = ({ hasMore, onLoadMore, children, reverse }: InfiniteScrollProps) => {
   const [isFetching, setIsFetching] = useState(false);
   const isFetchingRef = useRef(false);
   const target = useRef<HTMLDivElement>(null);
-  const page = useRef<number>(currentPage);
-  const totalPages = Math.ceil(total / (itemsPerPage || 1));
 
   useEffect(() => {
-    const observer = new IntersectionObserver((entries) => {
-      const [entry] = entries;
-      if (entry.isIntersecting) void fetchMoreItems();
-    });
+
+    warnColumnReverse(target.current);
+    const scroller = scrollerOf(target.current);
+    const root = scroller && scroller !== document.scrollingElement ? scroller : null;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries;
+        if (entry.isIntersecting) void fetchMoreItems();
+      },
+      { root },
+    );
     if (target.current) observer.observe(target.current);
     return () => {
       observer.disconnect();
     };
-  }, []);
+  }, [hasMore]);
 
   const fetchMoreItems = async () => {
     if (isFetchingRef.current) return;
-    const nextPage = page.current + 1;
-    if (nextPage > totalPages) return;
 
-    const scroller = reverse ? document.scrollingElement : null;
+    const scroller = reverse ? scrollerOf(target.current) : null;
     const prevScrollHeight = scroller?.scrollHeight ?? 0;
     const prevScrollTop = scroller?.scrollTop ?? 0;
 
     isFetchingRef.current = true;
     setIsFetching(true);
     try {
-      await onAddPage(nextPage);
-      onPageSelect(nextPage, { scrollToTop: false });
-      page.current = nextPage;
+      await onLoadMore();
 
       const restoreScroll = () => {
         if (scroller) {
@@ -76,15 +110,15 @@ export const InfiniteScroll = ({
 
   return (
     <>
-      {reverse ? (
+      {reverse && hasMore ? (
         <div ref={target} className="flex w-full items-end justify-center">
-          {isFetching && <BiLoaderAlt className="h-10 animate-spin pb-4 text-2xl" />}
+          {isFetching ? <BiLoaderAlt className="h-10 animate-spin pb-4 text-2xl" /> : null}
         </div>
       ) : null}
       {children}
-      {!reverse ? (
+      {!reverse && hasMore ? (
         <div ref={target} className="flex h-32 w-full justify-center pt-4">
-          {isFetching && <BiLoaderAlt className="animate-spin text-2xl" />}
+          {isFetching ? <BiLoaderAlt className="animate-spin text-2xl" /> : null}
         </div>
       ) : null}
     </>

package/ui/Load/Pagination.tsx

@@ -39,7 +39,6 @@ function Render<RefName extends string, Light>({ className, init, scrollToTop }:
     lastPageOfModel: `lastPageOf${ModelName}`,
     limitOfModel: `limitOf${ModelName}`,
     setPageOfModel: `setPageOf${ModelName}`,
-    addPageOfModel: `addPageOf${ModelName}`,
   };
   const namesOfSlice = {
     modelInsight: sliceName.replace(names.model, names.modelInsight),
@@ -47,7 +46,6 @@ function Render<RefName extends string, Light>({ className, init, scrollToTop }:
     lastPageOfModel: sliceName.replace(names.model, names.lastPageOfModel),
     pageOfModel: sliceName.replace(names.model, names.pageOfModel),
     setPageOfModel: sliceName.replace(names.model, names.setPageOfModel),
-    addPageOfModel: sliceName.replace(names.model, names.addPageOfModel),
   };
   const modelInsight = storeUse[namesOfSlice.modelInsight]() as BaseInsight;
   const limitOfModel = storeUse[namesOfSlice.limitOfModel]() as number;

package/ui/Load/Units.tsx

@@ -85,10 +85,12 @@ function Render<RefName extends string, Light extends { id: string }>({
     pageOfModel: `pageOf${ModelName}`,
     lastPageOfModel: `lastPageOf${ModelName}`,
     limitOfModel: `limitOf${ModelName}`,
+    hasMoreOfModel: `hasMoreOf${ModelName}`,
+    isCumulativeOfModel: `isCumulativeOf${ModelName}`,
     queryArgsOfModel: `queryArgsOf${ModelName}`,
     sortOfModel: `sortOf${ModelName}`,
     setPageOfModel: `setPageOf${ModelName}`,
-    addPageOfModel: `addPageOf${ModelName}`,
+    loadMoreOfModel: `loadMoreOf${ModelName}`,
     refreshModel: `refresh${ModelName}`,
     watchLiveModel: `watchLive${ModelName}`,
   };
@@ -102,10 +104,12 @@ function Render<RefName extends string, Light extends { id: string }>({
     pageOfModel: sliceName.replace(names.model, names.pageOfModel),
     lastPageOfModel: sliceName.replace(names.model, names.lastPageOfModel),
     limitOfModel: sliceName.replace(names.model, names.limitOfModel),
+    hasMoreOfModel: sliceName.replace(names.model, names.hasMoreOfModel),
+    isCumulativeOfModel: sliceName.replace(names.model, names.isCumulativeOfModel),
     queryArgsOfModel: sliceName.replace(names.model, names.queryArgsOfModel),
     sortOfModel: sliceName.replace(names.model, names.sortOfModel),
     setPageOfModel: sliceName.replace(names.model, names.setPageOfModel),
-    addPageOfModel: sliceName.replace(names.model, names.addPageOfModel),
+    loadMoreOfModel: sliceName.replace(names.model, names.loadMoreOfModel),
     refreshModel: sliceName.replace(names.model, names.refreshModel),
     watchLiveModel: sliceName.replace(names.model, names.watchLiveModel),
   };
@@ -116,6 +120,7 @@ function Render<RefName extends string, Light extends { id: string }>({
   const initModelObjInsight = (init as DynamicRecord)[names.modelObjInsight] as BaseInsight | null;
   const initLimitOfModel = (init as DynamicRecord)[names.limitOfModel] as number;
   const initPageOfModel = (init as DynamicRecord)[names.pageOfModel] as number;
+  const initHasMoreOfModel = (init as DynamicRecord)[names.hasMoreOfModel] as boolean;
   const initSignature = JSON.stringify(initQueryArgs);
 
   const useCache =
@@ -155,6 +160,9 @@ function Render<RefName extends string, Light extends { id: string }>({
       [namesOfSlice.pageOfModel]: initPageOfModel,
       [namesOfSlice.lastPageOfModel]: initLastPageOfModel,
       [namesOfSlice.limitOfModel]: initLimitOfModel,
+
+      [namesOfSlice.hasMoreOfModel]: initHasMoreOfModel,
+      [namesOfSlice.isCumulativeOfModel]: false,
       [namesOfSlice.queryArgsOfModel]: initQueryArgsOfModel,
       [namesOfSlice.sortOfModel]: initSortOfModel,
     });
@@ -180,6 +188,7 @@ function Render<RefName extends string, Light extends { id: string }>({
   const modelInsight = storeUse[namesOfSlice.modelInsight]() as BaseInsight;
   const limitOfModel = storeUse[namesOfSlice.limitOfModel]() as number;
   const pageOfModel = storeUse[namesOfSlice.pageOfModel]() as number;
+  const hasMoreOfModel = storeUse[namesOfSlice.hasMoreOfModel]() as boolean;
   const insight = loaded ? modelInsight : initModelObjInsight;
   const limit = loaded ? limitOfModel : initLimitOfModel;
   const page = loaded ? pageOfModel : initPageOfModel;
@@ -188,8 +197,9 @@ function Render<RefName extends string, Light extends { id: string }>({
     total,
     currentPage: page,
     itemsPerPage: limit || total,
-    onAddPage: async (page: number) => {
-      await storeDo[namesOfSlice.addPageOfModel](page);
+    hasMore: loaded ? hasMoreOfModel : initHasMoreOfModel,
+    onLoadMore: async () => {
+      await storeDo[namesOfSlice.loadMoreOfModel]();
     },
     onPageSelect: (page: number, option?: { scrollToTop?: boolean }) => {
       void storeDo[namesOfSlice.setPageOfModel](page);
@@ -342,7 +352,8 @@ interface MoreProps {
   total: number;
   itemsPerPage: number;
   currentPage: number;
-  onAddPage: (page: number) => Promise<void>;
+  hasMore: boolean;
+  onLoadMore: () => Promise<void>;
   onPageSelect: (page: number, option?: { scrollToTop?: boolean }) => void;
   children?: React.ReactNode;
   className?: string;

package/ui/Model/DraftBar.tsx

@@ -9,21 +9,75 @@ import { AiOutlineDelete, AiOutlineHistory, AiOutlineRollback } from "react-icon
 import { agentAttrs } from "../agentAttrs";
 import { Button } from "../Button";
 import { RecentTime } from "../RecentTime";
+import { createOverridable } from "../UiOverride";
 
-interface DraftBarProps {
+export interface DraftBarViewProps {
   className?: string;
-  slice: SliceMeta;
+  /** The model the recovered form belongs to. */
+  refName: string;
+  /**
+   * `conflict` is a decision the user has to settle — the record moved since the draft was taken, so the form
+   * shows the server's value and the bar offers the older one. `applied` is a notice: the draft is what is on
+   * screen, and the bar is the way back.
+   */
+  state: "conflict" | "applied";
+  /** When the draft was taken. */
+  savedAt: Date;
+  /** Puts the offered draft into the form. Passed in the `conflict` state only. */
+  onRestore?: () => void;
+  /** Drops the draft and keeps the form as it was opened. */
+  onDiscard: () => void;
 }
 
+const DefaultDraftBar = ({ className, state, savedAt, onRestore, onDiscard }: DraftBarViewProps) => {
+  const { l } = usePage();
+  if (state === "conflict")
+    return (
+      <div
+        className={cn(
+          "mb-4 flex flex-wrap items-center gap-2 rounded-box border border-warning/40 bg-warning/10 p-3",
+          className,
+        )}
+      >
+        <AiOutlineHistory className="text-warning" />
+        <span className="flex-1 text-foreground/80 text-sm">
+          {l("base.draftConflict")} <RecentTime date={savedAt} />
+        </span>
+        <Button {...agentAttrs(onRestore)} size="sm" onClick={() => onRestore?.()}>
+          <AiOutlineRollback /> {l("base.draftRestore")}
+        </Button>
+        <Button {...agentAttrs(onDiscard)} size="sm" variant="ghost" onClick={() => onDiscard()}>
+          <AiOutlineDelete /> {l("base.draftDiscard")}
+        </Button>
+      </div>
+    );
+  return (
+    <div className={cn("mb-4 flex flex-wrap items-center gap-2 text-foreground/60 text-xs", className)}>
+      <AiOutlineHistory />
+      <span className="flex-1">
+        {l("base.draftApplied")} <RecentTime date={savedAt} />
+      </span>
+      <Button {...agentAttrs(onDiscard)} size="xs" variant="ghost" onClick={() => onDiscard()}>
+        {l("base.draftStartOver")}
+      </Button>
+    </div>
+  );
+};
+
 /**
- * What the user is told about a recovered form.
+ * The banner itself, route-overridable through `page/**\/_overrides.tsx` (slot `DraftBar`).
  *
- * Two states, and the difference is whether the draft is already in the form. A pending one is a conflict the
- * user has to settle — the record moved since the draft was taken, so the form shows the server's value and this
- * offers the older one. An applied one is just a notice: the draft is what is on screen, and this is the way back.
+ * The shell below keeps the draft state and publishes the two agent tools, so a replacement re-skins the notice
+ * without reaching into the store under string keys or re-declaring what an agent may pull.
  */
+const DraftBarView = createOverridable("DraftBar", DefaultDraftBar);
+
+interface DraftBarProps {
+  className?: string;
+  slice: SliceMeta;
+}
+
 export default function DraftBar({ className, slice }: DraftBarProps) {
-  const { l } = usePage();
   const { refName } = slice;
   const [modelName, ModelName] = useMemo(() => [lowerlize(refName), capitalize(refName)], []);
   const names = useMemo(
@@ -50,35 +104,24 @@ export default function DraftBar({ className, slice }: DraftBarProps) {
 
   if (draft?.pending)
     return (
-      <div
-        className={cn(
-          "mb-4 flex flex-wrap items-center gap-2 rounded-box border border-warning/40 bg-warning/10 p-3",
-          className,
-        )}
-      >
-        <AiOutlineHistory className="text-warning" />
-        <span className="flex-1 text-foreground/80 text-sm">
-          {l("base.draftConflict")} <RecentTime date={draft.pending.savedAt} />
-        </span>
-        <Button {...agentAttrs(restoreDraft)} size="sm" onClick={() => restoreDraft()}>
-          <AiOutlineRollback /> {l("base.draftRestore")}
-        </Button>
-        <Button {...agentAttrs(discardDraft)} size="sm" variant="ghost" onClick={() => discardDraft()}>
-          <AiOutlineDelete /> {l("base.draftDiscard")}
-        </Button>
-      </div>
+      <DraftBarView
+        className={className}
+        refName={refName}
+        state="conflict"
+        savedAt={draft.pending.savedAt}
+        onRestore={restoreDraft}
+        onDiscard={discardDraft}
+      />
     );
   if (draft?.appliedAt)
     return (
-      <div className={cn("mb-4 flex flex-wrap items-center gap-2 text-foreground/60 text-xs", className)}>
-        <AiOutlineHistory />
-        <span className="flex-1">
-          {l("base.draftApplied")} <RecentTime date={draft.appliedAt} />
-        </span>
-        <Button {...agentAttrs(discardDraft)} size="xs" variant="ghost" onClick={() => discardDraft()}>
-          {l("base.draftStartOver")}
-        </Button>
-      </div>
+      <DraftBarView
+        className={className}
+        refName={refName}
+        state="applied"
+        savedAt={draft.appliedAt}
+        onDiscard={discardDraft}
+      />
     );
   return null;
 }

package/ui/Model/Edit.tsx

@@ -3,6 +3,7 @@ import type { SliceMeta } from "akanjs/fetch";
 import type { ReactNode } from "react";
 import { AiOutlineEdit } from "react-icons/ai";
 
+import type { DraftProp } from "./draftScope";
 import EditModal from "./EditModal";
 import EditWrapper from "./EditWrapper";
 
@@ -15,6 +16,8 @@ interface EditProps {
   modelId: string;
   modal?: string | null;
   renderTitle?: ((model: { id: string }) => string | ReactNode) | string;
+  /** Draft recovery for the form this opens. `false` turns it off; a string names the scope explicitly. */
+  draft?: DraftProp;
 }
 
 export default function Edit({
@@ -26,6 +29,7 @@ export default function Edit({
   modelId,
   modal,
   renderTitle,
+  draft,
 }: EditProps) {
   const { l } = usePage();
   return (
@@ -35,10 +39,11 @@ export default function Edit({
         slice={slice}
         modelId={modelId}
         modal={modal}
+        draft={draft}
       >
         <AiOutlineEdit /> {type === "button" ? l("base.edit") : null}
       </EditWrapper>
-      <EditModal renderTitle={renderTitle} slice={slice} id={modelId}>
+      <EditModal renderTitle={renderTitle} slice={slice} id={modelId} draft={draft}>
         {children}
       </EditModal>
     </div>

package/ui/Model/EditModal.tsx

@@ -27,6 +27,8 @@ interface EditModelProps<Full> {
   slice: SliceMeta;
   /** Additional classes for the wrapper. */
   className?: string;
+  /** Additional classes for the recovered-form banner this shell draws above the form. */
+  draftBarClassName?: string;
   /** Re-check submit eligibility when form state changes. */
   checkSubmit?: boolean;
   /** Client edit promise or partial form seed. */
@@ -52,6 +54,7 @@ const EditModel = <Full,>({
   type = "modal",
   slice,
   className,
+  draftBarClassName,
   checkSubmit = true,
   edit,
   modal,
@@ -107,7 +110,7 @@ const EditModel = <Full,>({
 
   return (
     <LoadingWrapper className={cn("w-full", className)}>
-      <DraftBar slice={slice} />
+      <DraftBar className={draftBarClassName} slice={slice} />
       {children}
     </LoadingWrapper>
   );
@@ -142,6 +145,7 @@ export default function EditModal<Full extends { id: string }>({
   slice,
   id,
   className,
+  draftBarClassName,
   disabled,
   checkSubmit = true,
   modalClassName,
@@ -368,6 +372,7 @@ export default function EditModal<Full extends { id: string }>({
             type={type}
             slice={slice}
             className={className}
+            draftBarClassName={draftBarClassName}
             checkSubmit={checkSubmit}
             edit={edit}
             modal={modal}
@@ -385,6 +390,7 @@ export default function EditModal<Full extends { id: string }>({
         type={type}
         slice={slice}
         className={className}
+        draftBarClassName={draftBarClassName}
         checkSubmit={checkSubmit}
         edit={edit}
         modal={modal}

package/ui/More.tsx

@@ -8,7 +8,8 @@ interface MoreProps {
   total: number;
   itemsPerPage: number;
   currentPage: number;
-  onAddPage: (page: number) => Promise<void>;
+  hasMore: boolean;
+  onLoadMore: () => Promise<void>;
   onPageSelect: (page: number, option?: { scrollToTop?: boolean }) => void;
   children?: React.ReactNode;
   className?: string;
@@ -19,7 +20,8 @@ export const More = ({
   total,
   itemsPerPage,
   currentPage,
-  onAddPage,
+  hasMore,
+  onLoadMore,
   onPageSelect,
   children,
   className,
@@ -31,24 +33,15 @@ export const More = ({
     setIsMobile(isMobileDevice());
   }, []);
 
-  if (total <= itemsPerPage) {
-    return <>{children}</>;
-  }
-
-  if (isMobile) {
+  if (isMobile)
     return (
-      <InfiniteScroll
-        total={total}
-        currentPage={currentPage}
-        itemsPerPage={itemsPerPage}
-        onAddPage={onAddPage}
-        onPageSelect={onPageSelect}
-        reverse={reverse}
-      >
+      <InfiniteScroll hasMore={hasMore} onLoadMore={onLoadMore} reverse={reverse}>
         {children}
       </InfiniteScroll>
     );
-  }
+
+  if (total <= itemsPerPage) return <>{children}</>;
+
   return (
     <>
       {children}

package/ui/UiOverride/context.ts

@@ -24,6 +24,7 @@ import type { SkeletonProps } from "../Loading/Skeleton";
 import type { SpinProps } from "../Loading/Spin";
 import type { MenuProps } from "../Menu";
 import type { ModalProps } from "../Modal";
+import type { DraftBarViewProps } from "../Model/DraftBar";
 import type { PaginationProps } from "../Pagination";
 import type { PopconfirmProps } from "../Popconfirm";
 import type { ItemProps as RadioItemProps, RadioProps } from "../Radio";
@@ -58,6 +59,8 @@ export interface AkanUiOverrides {
   Menu: ComponentType<MenuProps>;
   Tooltip: ComponentType<TooltipProps>;
   Unauthorized: ComponentType<UnauthorizedProps>;
+
+  DraftBar: ComponentType<DraftBarViewProps>;
   AgentChat: ComponentType<AgentChatProps>;
 
   AgentLauncher: ComponentType<AgentLauncherProps>;