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
@@ -5,6 +5,7 @@ import {
    BotRefHrefPrefix,
    ComputerRefHrefPrefix,
    FileRefHrefPrefix,
+    ProposalRefHrefPrefix,
    TakeOverRefHrefPrefix,
    WorkspaceRefHrefPrefix,
 } from "@/src/utils/link-computer-refs";
@@ -13,6 +14,7 @@ import BotRefChip from "./bot-ref-chip";
 import ComputerRefChip from "./computer-ref-chip";
 import FileRefChip from "./file-ref-chip";
 import FolderRefChip from "./folder-ref-chip";
+import ProposalRefChip from "./proposal-ref-chip";
 import TakeOverChip from "./take-over-chip";
 import WorkspaceRefChip from "./workspace-ref-chip";

@@ -21,7 +23,8 @@ import WorkspaceRefChip from "./workspace-ref-chip";
 * becomes its switch button, a take-over request a button that opens the
 * computer, a bot it named a link to that bot's conversation, a workspace
 * a link to that workspace, a file it saved a chip that downloads it, a
- * folder it named a chip that opens it in the files browser; anything else
+ * folder it named a chip that opens it in the files browser, an MCP server
+ * or tool it proposed a chip that opens the confirm card; anything else
 * opens in a new tab.
 */
 export default function MarkdownLink({ href, children }: ComponentProps<"a">) {
@@ -64,6 +67,12 @@ export default function MarkdownLink({ href, children }: ComponentProps<"a">) {
        if (file_id) return <FileRefChip file_id={file_id} />;
    }

+    if (href?.startsWith(ProposalRefHrefPrefix)) {
+        const proposal_id = Number(href.slice(ProposalRefHrefPrefix.length));
+
+        if (proposal_id) return <ProposalRefChip proposal_id={proposal_id} />;
+    }
+
    const folder_ref = parseFolderRefHref({ href });

    if (folder_ref) return <FolderRefChip spec={folder_ref.spec} path={folder_ref.path} />;
@@ -0,0 +1,71 @@
+import { describe, expect, test } from "bun:test";
+import { renderToString } from "react-dom/server";
+import type { ExtensionProposalView } from "@/src/types";
+import ProposalCard from "./proposal-card";
+
+const github: ExtensionProposalView = {
+    id: 7,
+    kind: "mcp",
+    extension_id: null,
+    name: "GitHub",
+    status: "pending",
+    expired: false,
+    expires_at: Date.now() + 60 * 60 * 1000,
+    outcome: "",
+    result_id: null,
+    host: "api.githubcopilot.com",
+    envs: [
+        { key: "GITHUB_TOKEN", where: "header Authorization", saved_in: ["general"] },
+        { key: "GITHUB_ORG", where: "URL", saved_in: [] },
+    ],
+    details: [
+        { label: "Name", value: "GitHub" },
+        { label: "Headers", value: "Authorization: Bearer {{env.GITHUB_TOKEN}}", block: true },
+    ],
+    research: "GitHub publishes this server in its own docs.",
+    sources: ["https://docs.github.com/en/copilot"],
+};
+
+function render({ view }: { view: ExtensionProposalView }) {
+    return renderToString(<ProposalCard view={view} onDecided={() => {}} />);
+}
+
+describe("ProposalCard", () => {
+    test("shows the host, each key and whether it's saved, and the bot's check", () => {
+        const html = render({ view: github });
+
+        expect(html).toContain("api.githubcopilot.com");
+        expect(html).toContain("GITHUB_TOKEN");
+        expect(html).toContain("Saved · general");
+        expect(html).toContain("Missing");
+        expect(html).toContain("Background check (written by the bot)");
+        expect(html).toContain("https://docs.github.com/en/copilot");
+        expect(html).toContain(">Confirm<");
+    });
+
+    test("offers no buttons once it's decided or expired", () => {
+        expect(render({ view: { ...github, status: "confirmed", outcome: "Saved as MCP server #9." } })).not.toContain(
+            ">Confirm<",
+        );
+        expect(render({ view: { ...github, expired: true } })).not.toContain(">Confirm<");
+    });
+
+    test("a skill shows its runbook and review, with no host or keys", () => {
+        const html = render({
+            view: {
+                ...github,
+                kind: "skill",
+                name: "Weekly SEO report",
+                host: null,
+                envs: [],
+                details: [{ label: "Hosts", value: "files.example" }],
+                sources: [],
+            },
+        });
+
+        expect(html).not.toContain("Where it sends");
+        expect(html).toContain("Review (written by the bot)");
+        expect(html).toContain("files.example");
+        expect(html).toContain("No pages given.");
+    });
+});
@@ -0,0 +1,131 @@
+import { useContext, useState } from "react";
+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 { AppContext } from "@/src/pages/__root";
+import type { ExtensionProposalView } from "@/src/types";
+import decideExtensionProposal from "../(functions)/decide-extension-proposal";
+import sendBotMessage from "../(functions)/send-bot-message";
+import proposalDecisionMessage from "../(utils)/proposal-decision-message";
+import proposalExpiryLabel from "../(utils)/proposal-expiry-label";
+import MessageDetailsHeading from "./message-details-heading";
+import ProposalDetailRow from "./proposal-detail-row";
+import ProposalReachSection from "./proposal-reach-section";
+import ProposalSourceRow from "./proposal-source-row";
+
+type Props = {
+    view: ExtensionProposalView;
+    onDecided: (view: ExtensionProposalView) => void;
+};
+
+/**
+ * The confirm card for an MCP server, tool or skill the coordinator
+ * proposed. Everything above the background check is read from what the
+ * Confirm button saves (where it sends, every key and whether it's saved,
+ * each detail; for a skill what its runbook points at and what changed);
+ * the check is the bot's own words, labelled as such.
+ * Deciding tells the bot in chat what happened.
+ */
+export default function ProposalCard({ view, onDecided }: Props) {
+    const { pageProps } = useContext(AppContext);
+    const [busy, setBusy] = useState<"confirm" | "reject">();
+    const [error, setError] = useState<string>();
+
+    const open = view.status == "pending" && !view.expired;
+    const is_skill = view.kind == "skill";
+    const missing = [...new Set(view.envs.filter((env) => !env.saved_in.length).map((env) => env.key))];
+    const keys = [...new Set(view.envs.map((env) => env.key))];
+
+    const decide = async (decision: "confirm" | "reject") => {
+        const question =
+            decision == "confirm" && is_skill
+                ? `Save the skill ${view.name}? Every bot that loads it follows this runbook.`
+                : decision == "confirm"
+                  ? `Save ${view.name}?${keys.length ? ` It sends ${keys.join(", ")} to ${view.host}.` : ""}${missing.length ? ` It stays off until ${missing.join(", ")} ${missing.length == 1 ? "is" : "are"} added.` : ""}`
+                  : `Reject ${view.name}? Nothing will be saved.`;
+
+        if (!window.confirm(question)) return;
+
+        setBusy(decision);
+        setError(undefined);
+
+        const res = await decideExtensionProposal({ proposal_id: view.id, decision }).catch(() => null);
+
+        if (!res?.success || !res.singleRes) {
+            setBusy(undefined);
+            setError(res?.msg || `Couldn't ${decision} it.`);
+            return;
+        }
+
+        onDecided(res.singleRes);
+
+        await sendBotMessage({
+            bot_id: Number(pageProps?.bot?.id) || 0,
+            workspace_id: pageProps?.workspace?.id || null,
+            text: proposalDecisionMessage({ view: res.singleRes }),
+            media_ids: [],
+        }).catch(() => null);
+
+        setBusy(undefined);
+    };
+
+    return (
+        <Stack className="w-full gap-0! items-stretch">
+            {is_skill ? null : <ProposalReachSection view={view} keys={keys} missing={missing} />}
+
+            <MessageDetailsHeading>What would be saved</MessageDetailsHeading>
+            {view.details.map((detail) => (
+                <ProposalDetailRow key={detail.label} {...detail} />
+            ))}
+
+            <MessageDetailsHeading>
+                {is_skill ? "Review (written by the bot)" : "Background check (written by the bot)"}
+            </MessageDetailsHeading>
+            <Span className="whitespace-pre-wrap text-[13px] leading-5 text-ink break-words">{view.research}</Span>
+            <Stack className="mt-1 w-full gap-0! items-stretch">
+                {view.sources.length ? (
+                    view.sources.map((url) => <ProposalSourceRow key={url} url={url} />)
+                ) : (
+                    <Span className="text-[12px] leading-4 text-ink-secondary">No pages given.</Span>
+                )}
+            </Stack>
+
+            {view.outcome ? (
+                <Span className="mt-4 text-[13px] leading-5 text-ink">{view.outcome}</Span>
+            ) : null}
+
+            {error ? <Span className="mt-2 text-[13px] leading-5 text-ink">{error}</Span> : null}
+
+            {open ? (
+                <Row className="mt-5 w-full gap-2! justify-end">
+                    <Span className="grow text-[12px] leading-4 text-ink-secondary">
+                        {proposalExpiryLabel({ expires_at: view.expires_at })}
+                    </Span>
+                    <Button
+                        type="button"
+                        variant="outlined"
+                        color="gray"
+                        size="small"
+                        title={`Reject ${view.name}: nothing is saved`}
+                        loading={busy == "reject"}
+                        disabled={Boolean(busy)}
+                        onClick={() => decide("reject")}
+                    >
+                        Reject
+                    </Button>
+                    <Button
+                        type="button"
+                        size="small"
+                        title={`Save ${view.name}`}
+                        loading={busy == "confirm"}
+                        disabled={Boolean(busy)}
+                        onClick={() => decide("confirm")}
+                    >
+                        Confirm
+                    </Button>
+                </Row>
+            ) : null}
+        </Stack>
+    );
+}
@@ -0,0 +1,24 @@
+import Row from "@moduletrace/twui/layout/Row";
+import Span from "@moduletrace/twui/layout/Span";
+import { twMerge } from "tailwind-merge";
+import type { ExtensionProposalDetail } from "@/src/types";
+
+/**
+ * One line of what a proposed server or tool would do, as the app read it
+ * from the config: a label, and its value, code-like ones as a block.
+ */
+export default function ProposalDetailRow({ label, value, block }: ExtensionProposalDetail) {
+    return (
+        <Row className="w-full py-2 gap-3! flex-nowrap items-baseline border-0 border-b border-solid border-hairline last:border-b-0">
+            <Span className="w-28 shrink-0 text-[12px] leading-4 text-ink-secondary">{label}</Span>
+            <Span
+                className={twMerge(
+                    "grow min-w-0 text-[13px] leading-5 text-ink break-words",
+                    block && "max-h-48 overflow-auto whitespace-pre-wrap rounded-default-xs bg-sunken px-2 py-1 font-mono text-[12px]",
+                )}
+            >
+                {value}
+            </Span>
+        </Row>
+    );
+}
@@ -0,0 +1,38 @@
+import Row from "@moduletrace/twui/layout/Row";
+import Span from "@moduletrace/twui/layout/Span";
+import Stack from "@moduletrace/twui/layout/Stack";
+import { twMerge } from "tailwind-merge";
+import type { ExtensionProposalEnv } from "@/src/types";
+
+type Props = {
+    /**
+     * Passed whole: its `key` field can't be a React prop.
+     */
+    env: ExtensionProposalEnv;
+};
+
+/**
+ * One key a proposed server or tool sends: its name, where it goes, and
+ * whether it's saved (and where) or still has to be added.
+ */
+export default function ProposalEnvRow({ env }: Props) {
+    const { key: env_key, where, saved_in } = env;
+    const saved = saved_in.length > 0;
+
+    return (
+        <Row className="w-full py-2 gap-3! flex-nowrap items-center border-0 border-b border-solid border-hairline last:border-b-0">
+            <Stack className="grow min-w-0 gap-0! items-start">
+                <Span className="font-mono text-[13px] leading-5 font-bold text-ink break-all">{env_key}</Span>
+                <Span className="text-[12px] leading-4 text-ink-secondary">{`Sent in the ${where}`}</Span>
+            </Stack>
+            <Span
+                className={twMerge(
+                    "shrink-0 rounded-default-xs px-2 py-0.5 text-[12px] leading-4 font-bold",
+                    saved ? "bg-sunken text-ink-secondary" : "bg-ink text-on-ink",
+                )}
+            >
+                {saved ? `Saved · ${saved_in.join(", ")}` : "Missing"}
+            </Span>
+        </Row>
+    );
+}
@@ -0,0 +1,43 @@
+import Span from "@moduletrace/twui/layout/Span";
+import type { ExtensionProposalView } from "@/src/types";
+import MessageDetailsHeading from "./message-details-heading";
+import ProposalEnvRow from "./proposal-env-row";
+
+type Props = {
+    view: ExtensionProposalView;
+    /**
+     * Every key it sends, once each.
+     */
+    keys: string[];
+    /**
+     * The keys that aren't saved yet.
+     */
+    missing: string[];
+};
+
+/**
+ * Where a proposed server or tool sends from the app, and each key it
+ * sends with whether it's saved.
+ */
+export default function ProposalReachSection({ view, keys, missing }: Props) {
+    return (
+        <>
+            <MessageDetailsHeading>Where it sends</MessageDetailsHeading>
+            <Span className="text-[14px] leading-5 font-bold text-ink break-all">
+                {view.host || "Nothing from the app"}
+            </Span>
+
+            <MessageDetailsHeading>{`Keys it sends (${keys.length})`}</MessageDetailsHeading>
+            {view.envs.length ? (
+                view.envs.map((env) => <ProposalEnvRow key={`${env.key}-${env.where}`} env={env} />)
+            ) : (
+                <Span className="text-[13px] leading-5 text-ink-secondary">None.</Span>
+            )}
+            {missing.length ? (
+                <Span className="mt-1 text-[12px] leading-4 text-ink-secondary">
+                    {`Add missing keys in Settings, under Environment. Until then it's saved switched off.`}
+                </Span>
+            ) : null}
+        </>
+    );
+}
@@ -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>
+    );
+}
@@ -0,0 +1,22 @@
+import Link from "@moduletrace/twui/layout/Link";
+
+type Props = {
+    url: string;
+};
+
+/**
+ * A page the bot read for its background check, shown as its whole
+ * address so a lookalike domain is visible before it's opened.
+ */
+export default function ProposalSourceRow({ url }: Props) {
+    return (
+        <Link
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer nofollow"
+            className="block w-full py-1 text-[13px] leading-5 text-ink underline underline-offset-2 break-all hover:opacity-80"
+        >
+            {url}
+        </Link>
+    );
+}