Show the audit log as a full-width, filterable table (#853)

* Show the audit log as a full-width table under a centred header

* Fit the audit page to the window and scroll only the table

* Name the Bot a routing or lifecycle row is about under Bot

* Keep a Bot's name on one line in the audit table

* Draw the audit toolbar as a data table's: segmented views, filter buttons, smaller search

* Sort the audit table's imports

* Let React settle before the banner and audit tests remove the DOM

Author: guidovizoso

CHANGELOG.md

@@ -43,6 +43,15 @@ Newest first. `Unreleased` is what is on `main` and not yet tagged.
   `computers/<Bot id>` on the workspace volume (below). Files saved before the upgrade stay at the
   root of the volume, where no Bot sees them; move them into a Bot's folder to give them back.
 
+### The audit log reads like a log
+
+Admin → Audit fills the window and runs the table across the whole pane, with the title, the views
+and the search held in place while only the rows scroll. Each row shows the full date and time and a
+mark for what happened, with blocked rows tinted red and actions that did not happen tinted amber.
+The newest come first, and a press on When turns the order round. A search box and Outcome, Bot and
+Started by buttons narrow the events already loaded, and the count says how many of them match. A
+row about a Bot (a message routed to it, say) now names it under Bot.
+
 ### Each Bot on a shared computer has its own files
 
 A computer that serves many Bots kept one folder of files for all of them, so a note one Bot saved

app/package.json

@@ -27,6 +27,7 @@
     "@tanstack/react-hotkeys": "^0.10.0",
     "@tanstack/react-query": "^5.101.4",
     "@tanstack/react-router": "^1.170.27",
+    "@tanstack/react-table": "^9.3.1",
     "better-auth": "^1.6.27",
     "boring-avatars": "^2.0.4",
     "class-variance-authority": "^0.7.1",