Keep every hook call's response, searchable by the user and the bot

A hook call used to record only how it was taken; its run's answer went
to the chat alone and was lost to the call once the job was pruned. Now
`bot_hook_events` keeps `response`, `response_message_id` and
`responded_at`, written on every call a run took in when that run ends
(completed, failed, lost, stopped or cancelled) by
`recordHookCallResponse` in the job helpers, and calls turn done or
failed. The Calls view searches what calls sent and what runs answered,
filters by status and pages; Show all loads one call whole. Bots get
`search_hook_calls` and `read_hook_call` for their own hooks (never in a
hook call's own run), with payloads always marked as outside data.
Calls are kept for the app setting `hook_events_keep_days` (Settings >
General, default now 30 days). The caller still only gets 202 Queued.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/components/general/hook-calls.tsx

@@ -1,5 +1,10 @@
+import Button from "@moduletrace/twui/layout/Button";
+import Stack from "@moduletrace/twui/layout/Stack";
+import { useState } from "react";
 import SettingsList from "@/src/pages/admin/settings/(partials)/settings-list";
+import type { BotHookEventStatus } from "@/src/dict/bot-hook-dict";
 import useHookEvents from "@/src/hooks/use-hook-events";
+import HookCallsFilters from "./hook-calls-filters";
 import HookEventRow from "./hook-event-row";
 
 type Props = {
@@ -7,16 +12,40 @@ type Props = {
 };
 
 /**
- * A hook's latest calls, newest first, loaded when shown.
+ * A hook's calls, newest first, loaded when shown: searchable by what
+ * they sent and what their run answered, a page at a time.
  */
 export default function HookCalls({ hook_id }: Props) {
-    const { events, loading, error } = useHookEvents({ hook_id });
+    const [query, set_query] = useState("");
+    const [status, set_status] = useState<BotHookEventStatus | "">("");
+    const { events, loading, error, more, loadOlder } = useHookEvents({ hook_id, query, status });
+    const filtered = Boolean(query || status);
 
     return (
-        <SettingsList is_empty={!events.length} empty={loading ? "Loading calls..." : error || "No calls yet."}>
-            {events.map((event) => (
-                <HookEventRow key={event.id} event={event} />
-            ))}
-        </SettingsList>
+        <Stack className="w-full gap-0! items-stretch">
+            <HookCallsFilters loading={loading} onSearch={set_query} onStatus={set_status} />
+            <SettingsList
+                is_empty={!events.length}
+                empty={loading ? "Loading calls..." : error || (filtered ? "No calls match." : "No calls yet.")}
+            >
+                {events.map((event) => (
+                    <HookEventRow key={event.id} event={event} />
+                ))}
+            </SettingsList>
+            {more && events.length ? (
+                <Button
+                    title="Load older calls"
+                    type="button"
+                    variant="ghost"
+                    color="gray"
+                    size="small"
+                    loading={loading}
+                    onClick={() => loadOlder().catch(() => {})}
+                    className="mt-2 self-center px-2! text-[12px]"
+                >
+                    Older calls
+                </Button>
+            ) : null}
+        </Stack>
     );
 }