Let the coordinator manage skills, MCP servers and tools, behind a confirm card

- Coordinator tools in its own chat (super admin only): list_extensions, set_extension_access, delete_extension, and update_skill / update_mcp_server / update_custom_tool for what can't change where anything is sent (on/off, names, arguments, left-out tools) - Adding a skill, MCP server or tool, or changing a skill's words, a server's URL or headers or a tool's kind or config, goes through propose_skill / propose_mcp_server / propose_custom_tool: stored in extension_proposals with the bot's background check, shown as a [proposal:ID] chip that opens a card with Confirm and Reject - The card's facts are worked out by the app from what Confirm saves: the host, every {{env.KEY}} and whether it's saved, the config; for a skill its links, hosts, tool names, mentions of secrets and a diff against the saved runbook - Confirming decides once and checks again; a server or tool missing a key is saved switched off, and the outcome is posted to the bot in chat - Never from a bot: stdio servers, a URL whose host a template decides, envs in a prompt tool, a key's value Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-25 06:08:09 +01:00
parent e6c278198b
commit fefc295d15
77 changed files with 3307 additions and 12 deletions
@@ -0,0 +1,67 @@
+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 { BookOpen, PlugZap, Wrench } from "lucide-react";
+import useExtensionProposal from "../(hooks)/use-extension-proposal";
+import proposalStatusLabel from "../(utils)/proposal-status-label";
+import proposalTitle from "../(utils)/proposal-title";
+import ProposalCard from "./proposal-card";
+
+type Props = {
+    proposal_id: number;
+};
+
+/**
+ * An MCP server, tool or skill the coordinator proposed (`proposalRef`): a chip
+ * naming it and where it stands, which opens the card the super admin
+ * confirms or rejects it from. Anyone it wasn't proposed to sees its
+ * number only.
+ */
+export default function ProposalRefChip({ proposal_id }: Props) {
+    const { view, loading, setView } = useExtensionProposal({ proposal_id });
+    const [open, setOpen] = useState(false);
+
+    if (!view) {
+        return <Span className="font-bold">{loading ? `proposal ${proposal_id}` : `proposal ${proposal_id} (not available)`}</Span>;
+    }
+
+    const Icon = view.kind == "mcp" ? PlugZap : view.kind == "skill" ? BookOpen : Wrench;
+    const title = proposalTitle({ 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"
+                >
+                    <Icon 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}. The coordinator proposed this; nothing is saved until you confirm. Everything above the bot's own notes 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">
+                <ProposalCard view={view} onDecided={setView} />
+            </Stack>
+        </Modal>
+    );
+}