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]>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,32 @@
|
||||
import Span from "@moduletrace/twui/layout/Span";
|
||||
import Stack from "@moduletrace/twui/layout/Stack";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
type Props = {
|
||||
label: string;
|
||||
text: string;
|
||||
/**
|
||||
* A preview is kept short; the whole call shows everything.
|
||||
*/
|
||||
full?: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* One side of a hook call, what it sent or what its run answered, in a
|
||||
* sunken block.
|
||||
*/
|
||||
export default function HookCallText({ label, text, full }: Props) {
|
||||
return (
|
||||
<Stack className="w-full gap-0.5! items-stretch">
|
||||
<Span className="text-[11px] leading-4 text-ink-secondary">{label}</Span>
|
||||
<Span
|
||||
className={twMerge(
|
||||
"block w-full overflow-hidden whitespace-pre-wrap break-all rounded-default-xs bg-sunken px-2 py-1 font-mono text-[12px] leading-4 text-ink-secondary",
|
||||
full ? "max-h-80 overflow-y-auto" : "max-h-24",
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
</Span>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import Input from "@moduletrace/twui/form/Input";
|
||||
import Select from "@moduletrace/twui/form/Select";
|
||||
import Row from "@moduletrace/twui/layout/Row";
|
||||
import { useState } from "react";
|
||||
import { BotHookEventStatuses, type BotHookEventStatus } from "@/src/dict/bot-hook-dict";
|
||||
|
||||
type Props = {
|
||||
loading?: boolean;
|
||||
onSearch: (query: string) => void;
|
||||
onStatus: (status: BotHookEventStatus | "") => void;
|
||||
};
|
||||
|
||||
/**
|
||||
* Narrowing a hook's calls down: words in what a call sent or what its
|
||||
* run answered (Enter, or clearing, runs it), and one status.
|
||||
*/
|
||||
export default function HookCallsFilters({ loading, onSearch, onStatus }: Props) {
|
||||
const [value, set_value] = useState("");
|
||||
|
||||
return (
|
||||
<Row className="w-full mb-2 gap-2! flex-wrap items-start md:flex-nowrap">
|
||||
<Input
|
||||
placeholder="Search what calls sent and what runs answered"
|
||||
value={value}
|
||||
disabled={loading}
|
||||
onChange={(event) => set_value(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key == "Enter") onSearch(event.currentTarget.value.trim());
|
||||
}}
|
||||
clearInputProps={{
|
||||
onClick: () => {
|
||||
set_value("");
|
||||
onSearch("");
|
||||
},
|
||||
}}
|
||||
wrapperWrapperProps={{ className: "w-full grow" }}
|
||||
/>
|
||||
<Select
|
||||
title="Only calls with this status"
|
||||
aria-label="Only calls with this status"
|
||||
options={[
|
||||
{ title: "Any status", value: "", default: true },
|
||||
...BotHookEventStatuses.map((option) => ({ title: option.title, value: option.value })),
|
||||
]}
|
||||
changeHandler={(next) => onStatus(next as BotHookEventStatus | "")}
|
||||
wrapperWrapperProps={{ className: "w-[150px] shrink-0" }}
|
||||
/>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,21 +1,32 @@
|
||||
import Button from "@moduletrace/twui/layout/Button";
|
||||
import Row from "@moduletrace/twui/layout/Row";
|
||||
import Span from "@moduletrace/twui/layout/Span";
|
||||
import Stack from "@moduletrace/twui/layout/Stack";
|
||||
import type { BUN_SQLITE_COBBLE_BOT_HOOK_EVENTS } from "@/db/types/db";
|
||||
import { useState } from "react";
|
||||
import { AppData } from "@/src/data/app-data";
|
||||
import { BotHookEventStatuses } from "@/src/dict/bot-hook-dict";
|
||||
import useHookCall from "@/src/hooks/use-hook-call";
|
||||
import type { BotHookCall } from "@/src/types";
|
||||
import relativeTime from "@/src/utils/relative-time";
|
||||
import HookCallText from "./hook-call-text";
|
||||
|
||||
type Props = {
|
||||
event: BUN_SQLITE_COBBLE_BOT_HOOK_EVENTS;
|
||||
event: BotHookCall;
|
||||
};
|
||||
|
||||
/**
|
||||
* One call to a hook: what became of it and when, where it came from, why
|
||||
* it was refused, and the start of what it sent.
|
||||
* it was refused, then what it sent and what its run answered. Previews
|
||||
* at first; Show all loads the whole call.
|
||||
*/
|
||||
export default function HookEventRow({ event }: Props) {
|
||||
const [open, set_open] = useState(false);
|
||||
const { call, loading, error } = useHookCall({ event_id: Number(event.id), open });
|
||||
const shown = open && call ? call : event;
|
||||
|
||||
const status = BotHookEventStatuses.find((s) => s.value == event.status)?.title || event.status || "";
|
||||
const meta = [
|
||||
`#${event.id}`,
|
||||
status,
|
||||
event.created_at ? relativeTime({ at: Number(event.created_at) }) : "",
|
||||
event.source_ip || "",
|
||||
@@ -25,16 +36,38 @@ export default function HookEventRow({ event }: Props) {
|
||||
.filter(Boolean)
|
||||
.join(" · ");
|
||||
|
||||
const cut =
|
||||
String(event.payload || "").length >= AppData.BotHookCallPreviewChars ||
|
||||
String(event.response || "").length >= AppData.BotHookCallPreviewChars;
|
||||
|
||||
return (
|
||||
<Stack className="w-full gap-1! items-stretch px-3 py-2">
|
||||
<Row className="w-full gap-2! flex-nowrap">
|
||||
<Span className="text-xs font-bold leading-4 text-ink truncate">{meta}</Span>
|
||||
<Span className="grow text-xs font-bold leading-4 text-ink truncate">{meta}</Span>
|
||||
{cut ? (
|
||||
<Button
|
||||
title={open ? "Show the start only" : "Show the whole call"}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
color="gray"
|
||||
size="small"
|
||||
loading={loading}
|
||||
onClick={() => set_open((value) => !value)}
|
||||
className="shrink-0 px-2! text-[12px]"
|
||||
>
|
||||
{open ? "Less" : "Show all"}
|
||||
</Button>
|
||||
) : null}
|
||||
</Row>
|
||||
{event.payload ? (
|
||||
<Span className="block w-full max-h-24 overflow-hidden whitespace-pre-wrap break-all rounded-default-xs bg-sunken px-2 py-1 font-mono text-[12px] leading-4 text-ink-secondary">
|
||||
{event.payload}
|
||||
</Span>
|
||||
{shown.payload ? <HookCallText label="Sent" text={String(shown.payload)} full={open && Boolean(call)} /> : null}
|
||||
{shown.response ? (
|
||||
<HookCallText
|
||||
label={event.status == "failed" ? "Run failed" : "Answered"}
|
||||
text={String(shown.response)}
|
||||
full={open && Boolean(call)}
|
||||
/>
|
||||
) : null}
|
||||
{error ? <Span className="text-xs leading-4 text-ink-secondary">{error}</Span> : null}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user