@frockbot/plugin-audit 0.3.8 → 0.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frockbot/plugin-audit",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "private": false,
   "type": "module",
   "exports": {
@@ -25,11 +25,11 @@
     "typecheck": "vue-tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "@frockbot/client-core": "0.3.8",
-    "@frockbot/client-ui": "0.3.8",
-    "@frockbot/kernel-contracts": "0.3.8",
-    "@frockbot/plugin-shell": "0.3.8",
-    "@frockbot/secret-shapes": "0.3.8",
+    "@frockbot/client-core": "0.3.10",
+    "@frockbot/client-ui": "0.3.10",
+    "@frockbot/kernel-contracts": "0.3.10",
+    "@frockbot/plugin-shell": "0.3.10",
+    "@frockbot/secret-shapes": "0.3.10",
     "cordis": "4.0.0-rc.8",
     "vue": "3.5.41"
   },

package/src/client/AuditSection.vue

@@ -8,7 +8,12 @@
 // reconciliation rule forbids. The same goes for truncation — a table trimmed
 // to its retention bound says so above the rows rather than quietly answering
 // with fewer.
-import { UiAnchor, UiButton, UiIcon } from "@frockbot/client-ui";
+import {
+  formatMomentV1,
+  UiAnchor,
+  UiButton,
+  UiIcon,
+} from "@frockbot/client-ui";
 import { frockBotWebDataKey } from "@frockbot/plugin-shell/shared";
 import { settingsLinkV1 } from "@frockbot/plugin-shell/settings-links";
 import { computed, inject, watch } from "vue";
@@ -64,9 +69,14 @@ function target(entry: AuditEntryV1): string {
   return entry.target.slice("remote:".length);
 }
 
+/**
+ * The moment, in the reader's own zone and in the house order. It used to be a
+ * bare `toLocaleString()`, which for an Australian reader rendered a US
+ * month-first date — the one column beside it that a person reads to orient
+ * themselves.
+ */
 function when(entry: AuditEntryV1): string {
-  const parsed = Date.parse(entry.at);
-  return Number.isFinite(parsed) ? new Date(parsed).toLocaleString() : entry.at;
+  return formatMomentV1(entry.at);
 }
 </script>
 
@@ -166,17 +176,19 @@ function when(entry: AuditEntryV1): string {
         :key="`${entry.runId}:${entry.occurrenceId}`"
         class="audit-row"
       >
-        <span class="audit-row__time">{{ when(entry) }}</span>
+        <time class="audit-row__time" :datetime="entry.at">{{
+          when(entry)
+        }}</time>
         <span class="audit-row__kind" :data-kind="entry.kind">{{
           entry.kind
         }}</span>
         <span class="audit-row__target">{{ target(entry) }}</span>
-        <span class="audit-row__preview" :title="entry.toolName">{{
-          entry.preview
-        }}</span>
         <span class="audit-row__outcome" :data-outcome="entry.outcome">{{
           entry.outcome
         }}</span>
+        <span class="audit-row__preview" :title="entry.toolName">{{
+          entry.preview
+        }}</span>
       </li>
     </ol>
 
@@ -308,8 +320,11 @@ function when(entry: AuditEntryV1): string {
 .audit-row {
   display: grid;
   align-items: baseline;
-  gap: 8px;
-  grid-template-columns: auto auto auto 1fr auto;
+  gap: 4px 8px;
+  /* Time, kind, target, outcome across the top; what happened on its own line
+     underneath, where it has the whole row to say it. */
+  grid-template-areas: "time kind target outcome" "preview preview preview preview";
+  grid-template-columns: auto auto 1fr auto;
   border: 1px solid var(--frock-border);
   border-radius: var(--frock-radius-card);
   padding: 6px 10px;
@@ -317,9 +332,45 @@ function when(entry: AuditEntryV1): string {
   font-size: var(--frock-text-sm);
 }
 
+.audit-row__time {
+  grid-area: time;
+}
+
+.audit-row__kind {
+  grid-area: kind;
+}
+
+.audit-row__target {
+  grid-area: target;
+}
+
+.audit-row__outcome {
+  grid-area: outcome;
+}
+
+.audit-row__preview {
+  grid-area: preview;
+}
+
+/* On a phone the target is the first thing to go: it is the same for every row
+   of a session, while the tool name is the only part that says what happened
+   and used to be clipped to a single character. */
+@media (max-width: 520px) {
+  .audit-row {
+    grid-template-areas: "time kind outcome" "preview preview preview";
+    grid-template-columns: 1fr auto auto;
+  }
+
+  .audit-row__target {
+    display: none;
+  }
+}
+
 .audit-row__time,
 .audit-row__target {
+  overflow: hidden;
   color: var(--frock-text-muted);
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 

package/src/index.ts

@@ -14,7 +14,9 @@ export {
 export {
   AuditStoreV1,
   AUDIT_REBUILD_PAGE_V1,
-  decodeAuditOffsetV1,
+  decodeAuditCursorV1,
+  encodeAuditCursorV1,
+  type AuditCursorV1,
   type AuditEntrySourceV1,
   type AuditRebuildOutcomeV1,
   type AuditSqlCursorV1,

package/src/store.test.ts

@@ -128,6 +128,40 @@ describe("the audit table", () => {
     expect(third.nextCursor).toBeUndefined();
   });
 
+  test("rows written between two pages do not repeat or hide a row", () => {
+    const table = store();
+    table.insert([
+      entry({ occurrenceId: "tool:1:1:0", at: "2026-08-31T00:00:01.000Z" }),
+      entry({ occurrenceId: "tool:1:1:1", at: "2026-08-31T00:00:02.000Z" }),
+      entry({ occurrenceId: "tool:1:1:2", at: "2026-08-31T00:00:03.000Z" }),
+    ]);
+
+    const first = table.query({ limit: 2 });
+    expect(first.entries.map((row) => row.occurrenceId)).toEqual([
+      "tool:1:1:2",
+      "tool:1:1:1",
+    ]);
+
+    // The Bot keeps working while the reader reads. Under an offset cursor
+    // these two new rows shifted the window down by two, so "Load more"
+    // returned `tool:1:1:2` and `tool:1:1:1` a second time — duplicate rows on
+    // screen and duplicate Vue keys — and `tool:1:1:0` was never reachable.
+    table.insert([
+      entry({ occurrenceId: "tool:1:1:3", at: "2026-08-31T00:00:04.000Z" }),
+      entry({ occurrenceId: "tool:1:1:4", at: "2026-08-31T00:00:05.000Z" }),
+    ]);
+
+    const second = table.query({ limit: 2, before: first.nextCursor! });
+    expect(second.entries.map((row) => row.occurrenceId)).toEqual([
+      "tool:1:1:0",
+    ]);
+    expect(second.nextCursor).toBeUndefined();
+    const shown = [...first.entries, ...second.entries].map(
+      (row) => row.occurrenceId,
+    );
+    expect(new Set(shown).size).toBe(shown.length);
+  });
+
   test("a rebuild empties the table and reproduces the identical set", async () => {
     const table = store({ maxRows: 2 });
     const entries = [

package/src/store.ts

@@ -346,10 +346,13 @@ export class AuditStoreV1 {
   /**
    * One filtered, paged answer.
    *
-   * The cursor is an offset rather than a key range, matching the transcript
-   * index's, because the table is bounded at twenty thousand rows: the deepest
-   * possible page is cheap, and an opaque offset cannot be used to address a
-   * row the filters would have excluded.
+   * The cursor names the last row of the page it came from, not how many rows
+   * were skipped. An offset over a table written at the head is a window that
+   * moves under the reader: every row inserted between "Load more" and the
+   * page before it shifted the window down, so the next page repeated rows
+   * already on screen — visibly, as duplicate keys — and skipped exactly as
+   * many that nobody ever saw. A key range is stable under inserts because it
+   * addresses a row rather than a position.
    */
   query(request: {
     botId?: string;
@@ -364,7 +367,7 @@ export class AuditStoreV1 {
     // row past the 180-day bound simply because no insert came to evict them.
     this.evict();
     const limit = Math.min(Math.max(request.limit ?? 50, 1), 500);
-    const offset = decodeAuditOffsetV1(request.before);
+    const after = decodeAuditCursorV1(request.before);
     const clauses: string[] = [];
     const bindings: unknown[] = [];
     if (request.botId) {
@@ -388,20 +391,53 @@ export class AuditStoreV1 {
         )
         .toArray()[0]?.n ?? 0,
     );
+    // The predicate is the sort order spelled out: strictly after the cursor
+    // row under `at DESC, bot_id ASC, run_id ASC, occurrence_id ASC`.
+    const pageClauses = [...clauses];
+    const pageBindings = [...bindings];
+    if (after) {
+      pageClauses.push(
+        "(at < ?" +
+          " OR (at = ? AND bot_id > ?)" +
+          " OR (at = ? AND bot_id = ? AND run_id > ?)" +
+          " OR (at = ? AND bot_id = ? AND run_id = ? AND occurrence_id > ?))",
+      );
+      pageBindings.push(
+        after.at,
+        after.at,
+        after.botId,
+        after.at,
+        after.botId,
+        after.runId,
+        after.at,
+        after.botId,
+        after.runId,
+        after.occurrenceId,
+      );
+    }
+    const pageWhere =
+      pageClauses.length > 0 ? ` WHERE ${pageClauses.join(" AND ")}` : "";
     const rows = this.sql
       .exec<AuditRow>(
-        `SELECT * FROM ${TABLE}${where} ` +
-          "ORDER BY at DESC, bot_id ASC, run_id ASC, occurrence_id ASC LIMIT ? OFFSET ?",
-        ...bindings,
+        `SELECT * FROM ${TABLE}${pageWhere} ` +
+          "ORDER BY at DESC, bot_id ASC, run_id ASC, occurrence_id ASC LIMIT ?",
+        ...pageBindings,
         limit + 1,
-        offset,
       )
       .toArray();
-    const page = rows.slice(0, limit).map(fromRow);
+    const kept = rows.slice(0, limit);
+    const last = kept.at(-1);
     return {
-      entries: page,
-      ...(rows.length > limit
-        ? { nextCursor: `p${offset + page.length}` }
+      entries: kept.map(fromRow),
+      ...(rows.length > limit && last
+        ? {
+            nextCursor: encodeAuditCursorV1({
+              at: last.at,
+              botId: last.bot_id,
+              runId: last.run_id,
+              occurrenceId: last.occurrence_id,
+            }),
+          }
         : {}),
       total,
     };
@@ -473,16 +509,53 @@ export class AuditStoreV1 {
   }
 }
 
-const CURSOR_PATTERN = /^p([0-9]{1,9})$/;
+/** The row a page cursor addresses. */
+export interface AuditCursorV1 {
+  at: string;
+  botId: string;
+  runId: string;
+  occurrenceId: string;
+}
+
+const CURSOR_SEPARATOR = "\u0000";
+const CURSOR_MAX_FIELD = 256;
+
+/**
+ * The cursor is the sort key of the last row of a page, encoded opaquely.
+ *
+ * It addresses a row and not a position, so rows inserted at the head between
+ * one page and the next cannot shift the window: "Load more" continues from
+ * where the reader is, rather than from a count that has since moved.
+ */
+export function encodeAuditCursorV1(cursor: AuditCursorV1): string {
+  return btoa(
+    [cursor.at, cursor.botId, cursor.runId, cursor.occurrenceId].join(
+      CURSOR_SEPARATOR,
+    ),
+  );
+}
 
-/** The offset an opaque page cursor names. */
-export function decodeAuditOffsetV1(cursor: string | undefined): number {
-  if (cursor === undefined) return 0;
-  const match = CURSOR_PATTERN.exec(cursor);
-  if (!match) throw new Error("audit cursor is invalid");
-  const offset = Number(match[1]);
-  if (!Number.isSafeInteger(offset) || offset > 100_000) {
+export function decodeAuditCursorV1(
+  cursor: string | undefined,
+): AuditCursorV1 | undefined {
+  if (cursor === undefined) return undefined;
+  let decoded: string;
+  try {
+    decoded = atob(cursor);
+  } catch {
     throw new Error("audit cursor is invalid");
   }
-  return offset;
+  const fields = decoded.split(CURSOR_SEPARATOR);
+  if (fields.length !== 4) throw new Error("audit cursor is invalid");
+  for (const field of fields) {
+    if (field.length > CURSOR_MAX_FIELD) {
+      throw new Error("audit cursor is invalid");
+    }
+  }
+  return {
+    at: fields[0]!,
+    botId: fields[1]!,
+    runId: fields[2]!,
+    occurrenceId: fields[3]!,
+  };
 }

package/src/testing.ts

@@ -194,9 +194,10 @@ export class FakeAuditSql implements AuditSqlV1 {
         (left, right) => -order(left, right),
       );
       if (!sql.includes("LIMIT")) return answer(descending);
-      const limit = Number(bindings[bindings.length - 2]);
-      const offset = Number(bindings[bindings.length - 1]);
-      return answer(descending.slice(offset, offset + limit));
+      // Paging is a key range now, not an offset: the limit is the last
+      // binding and the page starts wherever the cursor predicate left off.
+      const limit = Number(bindings[bindings.length - 1]);
+      return answer(descending.slice(0, limit));
     }
     throw new Error(`FakeAuditSql does not recognise: ${sql}`);
   }
@@ -208,13 +209,34 @@ export class FakeAuditSql implements AuditSqlV1 {
     if (where.startsWith("at <")) {
       return this.rowsIn(table).filter((row) => row.at < String(values[0]));
     }
+    // The keyset page predicate is always the last clause, and it is the one
+    // clause that is not `column = ?`.
+    const keysetAt = where.indexOf("(at < ?");
+    const columnWhere =
+      keysetAt < 0 ? where : where.slice(0, keysetAt).replace(/ AND $/u, "");
     const predicates: Array<(row: FakeRow) => boolean> = [];
-    for (const clause of where.split(" AND ").filter(Boolean)) {
+    for (const clause of columnWhere.split(" AND ").filter(Boolean)) {
       const column = clause.split(" ")[0] as keyof FakeRow;
       if (!COLUMNS.includes(column as (typeof COLUMNS)[number])) continue;
       const expected = String(values.shift());
       predicates.push((row) => String(row[column]) === expected);
     }
+    if (keysetAt >= 0) {
+      const at = String(values[0]);
+      const botId = String(values[2]);
+      const runId = String(values[5]);
+      const occurrenceId = String(values[9]);
+      predicates.push(
+        (row) =>
+          row.at < at ||
+          (row.at === at && row.bot_id > botId) ||
+          (row.at === at && row.bot_id === botId && row.run_id > runId) ||
+          (row.at === at &&
+            row.bot_id === botId &&
+            row.run_id === runId &&
+            row.occurrence_id > occurrenceId),
+      );
+    }
     return this.rowsIn(table).filter((row) =>
       predicates.every((predicate) => predicate(row)),
     );