Let bots manage their hooks, with the user confirming what widens them

Bots get list_hooks, pause_hook and delete_hook, which act directly since they only take away. A new hook, or a new name, brief or filter, or switching a paused one back on, goes through propose_hook: it stores a hook_proposals row and puts a [hook-proposal:ID] card in the reply, which the user it was proposed to confirms or rejects. The card is read from what Confirm saves, with the bot's reason labelled as its own; confirming checks everything again and saves through the Hooks modal's helpers. A new hook's URL is shown on the card once, to the user only, never in the outcome the bot is told. What calls a hook, its computers and its signing are never proposed. Only chat replies propose, and a hook call's own run gets no hook tools, so a caller's payload can't reach them. Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-25 15:18:54 +01:00
parent 045167715d
commit 380d3ebb2f
54 changed files with 1983 additions and 55 deletions
@@ -0,0 +1,69 @@
+import { useState } from "react";
+import Modal from "@moduletrace/twui/elements/Modal";
+import Button from "@moduletrace/twui/layout/Button";
+import H2 from "@moduletrace/twui/layout/H2";
+import Span from "@moduletrace/twui/layout/Span";
+import Stack from "@moduletrace/twui/layout/Stack";
+import { Webhook } from "lucide-react";
+import useHookProposal from "../(hooks)/use-hook-proposal";
+import hookProposalTitle from "../(utils)/hook-proposal-title";
+import proposalStatusLabel from "../(utils)/proposal-status-label";
+import HookProposalCard from "./hook-proposal-card";
+
+type Props = {
+    proposal_id: number;
+};
+
+/**
+ * A hook a bot proposed (`hookProposalRef`): a chip naming it and where
+ * it stands, which opens the card the user confirms or rejects it from.
+ * Anyone it wasn't proposed to sees its number only.
+ */
+export default function HookProposalRefChip({ proposal_id }: Props) {
+    const { view, loading, setView } = useHookProposal({ proposal_id });
+    const [open, setOpen] = useState(false);
+
+    if (!view) {
+        return (
+            <Span className="font-bold">
+                {loading ? `hook proposal ${proposal_id}` : `hook proposal ${proposal_id} (not available)`}
+            </Span>
+        );
+    }
+
+    const title = hookProposalTitle({ view });
+    const status = proposalStatusLabel({ view });
+
+    return (
+        <Modal
+            target={
+                <Button
+                    type="button"
+                    variant="outlined"
+                    color="gray"
+                    size="smaller"
+                    title={`Review: ${title}`}
+                    className="inline-flex h-6 gap-1.5! flex-nowrap align-middle px-2! text-[13px] font-bold text-ink whitespace-nowrap"
+                >
+                    <Webhook size={14} aria-hidden className="shrink-0" />
+                    {`${title} · ${status}`}
+                </Button>
+            }
+            targetWrapperProps={{ className: "inline-flex align-middle" }}
+            open={open}
+            setOpen={setOpen}
+            className="max-w-xl bg-paper p-6"
+        >
+            <Stack className="w-full gap-1! items-stretch">
+                <H2 className="text-lg! leading-6! tracking-normal! font-bold text-ink">{title}</H2>
+                <Span className="text-[13px] leading-[18px] text-ink-secondary">
+                    {`${status}. ${view.bot_name} proposed this; nothing is saved until you confirm. Everything above the bot's own words is read from what Confirm would save.`}
+                </Span>
+            </Stack>
+
+            <Stack className="mt-2 max-h-[65vh] w-full gap-0! items-stretch overflow-y-auto">
+                <HookProposalCard view={view} onDecided={setView} onDone={() => setOpen(false)} />
+            </Stack>
+        </Modal>
+    );
+}