paperclip-plugin-mattermost 0.0.0-stage → 0.11.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Haseeb Azhar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,79 @@
-# Temporary Holding Version
+# paperclip-plugin-mattermost
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Your [Paperclip](https://github.com/paperclipai/paperclip) agents as Mattermost teammates. Every agent gets its own Mattermost bot, with its Paperclip portrait. DM an agent or @mention it in a channel, and it answers in the thread. Follow-ups in the thread continue the same conversation.
+
+## What it does
+
+- **A bot per agent.** Bots are created, renamed and switched off as agents change (every 5 minutes). Choose all agents, or only the ones you pick.
+- **You see it working.** The agent's bot reacts 👀 to your message straight away. Its reply starts as _thinking…_ and lists the steps it runs, then the answer replaces the list.
+- **Files both ways.** Attach files to a message and the agent can read them. Files the agent saves are attached to its reply.
+- **Choices as buttons.** An agent can offer options (`choices: A | B | C` on its last line), which appear as buttons. A click is sent back as your answer.
+- **Approvals with buttons.** Every Paperclip approval is posted in an approvals channel with Approve / Reject buttons, including hires, budget overrides, board approvals and high-risk tool calls. An approval raised during a conversation also appears in that thread.
+- **Task decision cards.** When an agent asks something on a task, the card is posted in the approvals channel:
+  - **Confirmations and suggested tasks** get Accept / Reject buttons.
+  - **Single-choice questions** get a button per option. Your pick is posted on the task as a comment from you, which wakes the agent.
+- **Access control.** Choose who may talk to agents: everyone, or only the people you pick. Each person can be limited to some agents, and people outside Paperclip can be added by email.
+- **One install, many companies.** Each Paperclip company connects its own Mattermost, with its own settings, bots and state.
+
+## Requirements
+
+- **Paperclip** with plugin support. The plugin is built against a specific Paperclip commit (see `PAPERCLIP_REF` in `build.mjs`). If your server runs a different one, the settings page and the plugin's health say so. Most features keep working.
+- **Mattermost** (Team Edition is fine) with bot accounts and personal access tokens enabled: *System Console → Integrations → Bot Accounts* and *Integration Management*.
+- **A Mattermost System Admin personal access token.** The plugin uses it to create and manage the agent bots. A bot token won't work, because Mattermost doesn't let bots create bots.
+- For buttons: **Mattermost must be able to reach Paperclip** at a public address.
+- For files: the plugin and your agents must run on the **same machine or container**, as in the standard Docker setup, because files are exchanged through `/tmp/paperclip-mattermost`.
+
+## Install
+
+As a Paperclip instance admin:
+
+```bash
+paperclipai plugin install paperclip-plugin-mattermost
+```
+
+Or install it from **Settings → Plugins** in Paperclip.
+
+## Set up (per company)
+
+1. **In Mattermost**, signed in as a System Admin, go to **Profile → Security → Personal Access Tokens → Create Token** and copy the token.
+2. **In Paperclip**, open the company, then **Settings → Secrets**, and save the token as a secret.
+3. **Settings → Plugins → Mattermost**, then fill in:
+   - **Mattermost URL**, e.g. `https://chat.example.com`.
+   - **Mattermost admin token**: pick the secret from step 2.
+   - **Paperclip public URL**: filled in from Paperclip's own settings. The page checks it by sending a test click through it.
+   - **Approvals channel**: where approvals and decision cards are posted.
+   - **Agents in Mattermost**: all agents, or the ones you pick.
+   - **Who can talk to agents**: everyone, or the people you pick, each with all agents or some.
+   - **Approvers**: who may decide approvals and cards from Mattermost. Their clicks count as their Paperclip decisions, matched to Mattermost by email.
+4. **Save.** Within a minute every agent appears as a bot in your Mattermost teams.
+
+## Security
+
+- **Every button is signed** with a key derived from the company's admin token. A forged or altered click is refused, and rotating the token voids old buttons.
+- **Decisions are made as real people.** Approvals, card answers and question comments are recorded as the clicker's Paperclip user. Paperclip itself checks that user is an active member allowed to decide.
+- **Agent bot tokens** are minted at startup, held in memory only, and revoked on the next start.
+- **The admin token** has System Admin rights in Mattermost. Keep it in a Paperclip secret, and rotate it if it leaks.
+
+## Limits
+
+- **Paperclip doesn't notify plugins of new decision cards**, so open tasks are checked every minute. A card can take up to a minute to appear.
+- **Multi-choice questions** and free-text "Other" answers are answered in Paperclip; the card links there.
+- **Mattermost can't hide bots** from particular people. Someone without access can still DM an agent bot; they get a private note and the agent doesn't run.
+- **Agents with a custom uploaded portrait** keep the default bot picture, because those images need a Paperclip login to download.
+- **Live progress** shows steps for agents run through ACPX (Claude Code, and others Paperclip runs that way). Other adapters show only _thinking…_.
+
+## Development
+
+```bash
+npm install
+node build.mjs          # bundles the Paperclip SDK at PAPERCLIP_REF (cloned into .paperclip-src/)
+npm test                # unit tests
+PAPERCLIP_REF=<commit> node build.mjs   # build for another Paperclip version
+```
+
+- `scripts/deploy-remote.sh` copies a build to a Paperclip running in Docker on another machine over ssh, and reloads it with Paperclip's CLI.
+- `test/live-mattermost.ts` and `test/live-roster.ts` run against a real Mattermost.
+
+## License
+
+MIT

package/dist/manifest.js

@@ -0,0 +1,95 @@
+// src/manifest.ts
+var manifest = {
+  id: "mattermost-bridge",
+  apiVersion: 1,
+  version: "0.11.0",
+  displayName: "Mattermost",
+  description: "Every agent becomes its own Mattermost bot. DM an agent or mention it in a channel and it answers in the thread, showing its steps as it works; follow-ups continue the conversation. Paperclip approvals arrive with Approve / Reject buttons.",
+  author: "Haseeb Azhar",
+  categories: ["connector"],
+  capabilities: [
+    "agents.read",
+    "agent.sessions.create",
+    "agent.sessions.send",
+    "agent.sessions.list",
+    "agent.sessions.close",
+    "secrets.read-ref",
+    "plugin.state.read",
+    "plugin.state.write",
+    "http.outbound",
+    "events.subscribe",
+    "webhooks.receive",
+    "approvals.read",
+    "approvals.respond",
+    "instance.settings.register",
+    "issues.read",
+    "issue.interactions.read",
+    "issue.interactions.respond",
+    "issue.comments.create",
+    "issue.comments.create_human_attributed"
+  ],
+  entrypoints: { worker: "./dist/worker.js", ui: "./dist/ui" },
+  // Replaces the generated form: approvers picked from members, URL detected and checked.
+  ui: { slots: [{ type: "settingsPage", id: "mattermost-settings", displayName: "Mattermost", exportName: "SettingsPage" }] },
+  webhooks: [
+    { endpointKey: "actions", displayName: "Mattermost buttons", description: "Approve / Reject clicks on approval posts. Every click carries a signature the plugin checks." }
+  ],
+  instanceConfigSchema: {
+    type: "object",
+    required: ["mattermostUrl", "botToken"],
+    properties: {
+      mattermostUrl: {
+        type: "string",
+        title: "Mattermost URL",
+        description: "Your Mattermost address, for example https://chat.example.com"
+      },
+      botToken: {
+        // No "type": the picker saves a { type: "secret_ref", secretId } object and the
+        // server validates with plain Ajv, so type "string" rejects it. The form picks
+        // the secret picker from `format` alone.
+        format: "secret-ref",
+        title: "Mattermost admin token",
+        description: "A Paperclip secret holding a personal access token of a Mattermost System Admin user (Profile, Security, Personal Access Tokens). Bot accounts cannot be used: Mattermost does not let bots create bots. It creates one bot per agent, keeps them in sync, and listens in every public channel of its teams."
+      },
+      paperclipUrl: {
+        type: "string",
+        title: "Paperclip public URL",
+        description: "This Paperclip's address as Mattermost can reach it, for example https://paperclip.example.com. Turns on approval buttons; leave empty to turn them off."
+      },
+      approvalsChannel: {
+        type: "string",
+        title: "Approvals channel",
+        description: "Channel name (as in its URL, e.g. approvals) where every approval is posted; one raised during a Mattermost conversation also appears in that thread."
+      },
+      agentsMode: {
+        type: "string",
+        enum: ["all", "selected"],
+        title: "Agents in Mattermost",
+        description: "all: every agent gets a bot, new ones included. selected: only the agents listed in `agents`."
+      },
+      agents: { type: "array", title: "Selected agents", items: { type: "string" } },
+      access: {
+        type: "string",
+        enum: ["everyone", "selected"],
+        title: "Who can talk to agents",
+        description: "everyone: anyone in this Mattermost. selected: only the people in `allowedUsers`, matched by Mattermost email."
+      },
+      allowedUsers: {
+        type: "array",
+        title: "People who can talk to agents",
+        description: "Each person by email, with `agents` listing the agent ids they may talk to (absent: all agents). People outside Paperclip have no userId.",
+        items: { type: "object", properties: { userId: { type: "string" }, email: { type: "string" }, name: { type: "string" }, agents: { type: "array", items: { type: "string" } } }, required: ["email"] }
+      },
+      approvers: {
+        type: "array",
+        title: "Approvers",
+        description: "Who may decide approvals from Mattermost, picked on the settings page: their click is decided as their Paperclip user, matched by Mattermost email.",
+        items: { type: "object", properties: { userId: { type: "string" }, email: { type: "string" }, name: { type: "string" } }, required: ["userId", "email"] }
+      }
+    }
+  }
+};
+var manifest_default = manifest;
+export {
+  manifest_default as default
+};

package/dist/ui/index.js

@@ -0,0 +1,344 @@
+// src/ui/index.tsx
+import { useEffect, useMemo, useState } from "react";
+import { usePluginAction, usePluginData } from "@paperclipai/plugin-sdk/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PLUGIN = "mattermost-bridge";
+async function api(path, init) {
+  const r = await fetch(path, { credentials: "include", ...init, headers: { "content-type": "application/json", ...init?.headers ?? {} } });
+  if (!r.ok) throw new Error(await r.text() || `HTTP ${r.status}`);
+  return await r.json();
+}
+var s = {
+  field: { display: "grid", gap: 6, marginBottom: 22 },
+  label: { fontWeight: 600, fontSize: 14 },
+  help: { fontSize: 12.5, opacity: 0.65, lineHeight: 1.45 },
+  input: { width: "100%", boxSizing: "border-box", padding: "8px 10px", borderRadius: 6, border: "1px solid rgba(127,127,127,.35)", background: "transparent", color: "inherit", font: "inherit" },
+  row: { display: "flex", gap: 8, alignItems: "center" },
+  button: { padding: "7px 14px", borderRadius: 6, border: "1px solid rgba(127,127,127,.35)", background: "transparent", color: "inherit", font: "inherit", cursor: "pointer", whiteSpace: "nowrap" },
+  primary: { padding: "8px 18px", borderRadius: 6, border: "none", background: "#e8e8e8", color: "#111", font: "inherit", fontWeight: 600, cursor: "pointer" },
+  member: { display: "flex", gap: 10, alignItems: "center", padding: "8px 10px", borderRadius: 6, border: "1px solid rgba(127,127,127,.2)", cursor: "pointer" },
+  ok: { color: "#3db887" },
+  bad: { color: "#e5484d" }
+};
+function Field({ label, help, error, children }) {
+  return /* @__PURE__ */ jsxs("div", { style: s.field, children: [
+    /* @__PURE__ */ jsx("div", { style: s.label, children: label }),
+    children,
+    error ? /* @__PURE__ */ jsx("div", { style: { ...s.bad, fontSize: 13 }, children: error }) : null,
+    help ? /* @__PURE__ */ jsx("div", { style: s.help, children: help }) : null
+  ] });
+}
+function flip(set, id) {
+  const next = new Set(set);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  return next;
+}
+function Modes({ value, options, onChange }) {
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 16, flexWrap: "wrap" }, children: options.map(([v, label]) => /* @__PURE__ */ jsxs("label", { style: { display: "flex", gap: 6, alignItems: "center", cursor: "pointer" }, children: [
+    /* @__PURE__ */ jsx("input", { type: "radio", checked: value === v, onChange: () => onChange(v) }),
+    " ",
+    label
+  ] }, v)) });
+}
+function People({ members, selected, accounts, onToggle }) {
+  return /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 6 }, children: members.map((m) => {
+    const email = m.user?.email ?? "";
+    const account = email ? accounts?.[email.toLowerCase()] : void 0;
+    return /* @__PURE__ */ jsxs("label", { style: { ...s.member, ...selected.has(m.principalId) ? { borderColor: "rgba(127,127,127,.55)" } : {} }, children: [
+      /* @__PURE__ */ jsx("input", { type: "checkbox", checked: selected.has(m.principalId), onChange: () => onToggle(m.principalId), disabled: !email }),
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { fontWeight: 600 }, children: [
+          m.user?.name || email,
+          m.membershipRole ? /* @__PURE__ */ jsx("span", { style: { ...s.help, marginLeft: 8 }, children: m.membershipRole }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { ...s.help, overflow: "hidden", textOverflow: "ellipsis" }, children: email || "no email" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { ...s.help, ...account ? s.ok : account === null ? s.bad : {} }, children: account ? `@${account}` : account === null ? "no Mattermost account with this email" : "" })
+    ] }, m.principalId);
+  }) });
+}
+function grantsFrom(value) {
+  const map = /* @__PURE__ */ new Map();
+  for (const g of Array.isArray(value) ? value : []) {
+    if (g?.email) map.set(g.email.toLowerCase(), { userId: g.userId || void 0, email: g.email.toLowerCase(), name: g.name, agents: Array.isArray(g.agents) ? g.agents : null });
+  }
+  return map;
+}
+function AccessList({ members, agents, grants, accounts, onChange }) {
+  const [adding, setAdding] = useState("");
+  const memberEmails = new Set(members.map((m) => m.user?.email?.toLowerCase()).filter(Boolean));
+  const rows = [
+    ...members.filter((m) => m.user?.email).map((m) => ({ key: m.principalId, email: m.user.email.toLowerCase(), name: m.user.name || m.user.email, sub: m.membershipRole ?? "", userId: m.principalId, outside: false })),
+    ...[...grants.values()].filter((g) => !memberEmails.has(g.email)).map((g) => ({ key: g.email, email: g.email, name: g.name || g.email, sub: "not in Paperclip", outside: true }))
+  ];
+  const update = (email, g) => {
+    const next = new Map(grants);
+    if (g) next.set(email, g);
+    else next.delete(email);
+    onChange(next);
+  };
+  const add = () => {
+    const email = adding.trim().toLowerCase();
+    if (!/^\S+@\S+\.\S+$/.test(email) || grants.has(email)) return;
+    update(email, { email, agents: null });
+    setAdding("");
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 6 }, children: [
+    rows.map((r) => {
+      const g = grants.get(r.email);
+      const account = accounts?.[r.email];
+      return /* @__PURE__ */ jsxs("div", { style: { ...s.member, display: "block", cursor: "default", ...g ? { borderColor: "rgba(127,127,127,.55)" } : {} }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx("input", { type: "checkbox", checked: Boolean(g), onChange: () => update(r.email, g ? null : { userId: r.userId, email: r.email, name: r.name, agents: null }) }),
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { fontWeight: 600 }, children: [
+              r.name,
+              r.sub ? /* @__PURE__ */ jsx("span", { style: { ...s.help, marginLeft: 8 }, children: r.sub }) : null
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: { ...s.help, overflow: "hidden", textOverflow: "ellipsis" }, children: r.email })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { ...s.help, ...account ? s.ok : account === null ? s.bad : {} }, children: account ? `@${account}` : account === null ? "no Mattermost account with this email" : "" }),
+          g ? /* @__PURE__ */ jsxs("select", { style: { ...s.input, width: "auto" }, value: g.agents ? "some" : "all", onChange: (e) => update(r.email, { ...g, agents: e.target.value === "all" ? null : [] }), children: [
+            /* @__PURE__ */ jsx("option", { value: "all", children: "All agents" }),
+            /* @__PURE__ */ jsx("option", { value: "some", children: "Only some agents" })
+          ] }) : null,
+          r.outside ? /* @__PURE__ */ jsx("button", { style: { ...s.button, padding: "4px 9px" }, title: "Remove", onClick: () => update(r.email, null), children: "\u2715" }) : null
+        ] }),
+        g?.agents ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginTop: 8, paddingLeft: 26 }, children: agents.map((a) => {
+          const on = g.agents.includes(a.id);
+          return /* @__PURE__ */ jsxs("label", { style: { display: "flex", gap: 5, alignItems: "center", padding: "3px 8px", borderRadius: 999, border: `1px solid rgba(127,127,127,${on ? ".7" : ".25"})`, cursor: "pointer", fontSize: 13 }, children: [
+            /* @__PURE__ */ jsx("input", { type: "checkbox", checked: on, onChange: () => update(r.email, { ...g, agents: on ? g.agents.filter((x) => x !== a.id) : [...g.agents, a.id] }) }),
+            a.name
+          ] }, a.id);
+        }) }) : null
+      ] }, r.key);
+    }),
+    /* @__PURE__ */ jsxs("div", { style: s.row, children: [
+      /* @__PURE__ */ jsx("input", { style: s.input, value: adding, onChange: (e) => setAdding(e.target.value), onKeyDown: (e) => {
+        if (e.key === "Enter") add();
+      }, placeholder: "Add someone outside Paperclip by email (a client, a contractor)\u2026" }),
+      /* @__PURE__ */ jsx("button", { style: s.button, onClick: add, children: "Add" })
+    ] })
+  ] });
+}
+function validate(c) {
+  const errors = {};
+  const url = String(c.mattermostUrl ?? "").trim();
+  if (!url) errors.mattermostUrl = "Enter your Mattermost address.";
+  else if (!/^https?:\/\/[^\s/]+/.test(url)) errors.mattermostUrl = "Enter a full address starting with https://";
+  if (!c.botToken?.secretId) errors.botToken = "Choose the secret that holds the Mattermost admin token.";
+  return errors;
+}
+function saveErrorText(raw) {
+  try {
+    const j = JSON.parse(raw);
+    const parts = (j.fieldErrors ?? []).map((f) => {
+      const missing = f.message?.match(/required property '(\w+)'/)?.[1];
+      if (missing === "botToken") return "the Mattermost admin token is missing";
+      if (missing === "mattermostUrl") return "the Mattermost URL is missing";
+      return `${f.field && f.field !== "/" ? f.field.replace(/^\//, "") + ": " : ""}${f.message ?? "invalid"}`;
+    });
+    if (parts.length) return `Not saved: ${parts.join("; ")}.`;
+    if (j.error) return `Not saved: ${j.error}`;
+  } catch {
+  }
+  return `Not saved: ${raw.slice(0, 300)}`;
+}
+function savedApproverIds(value) {
+  if (Array.isArray(value)) return new Set(value.map((a) => a.userId));
+  const ids = /* @__PURE__ */ new Set();
+  for (const line of String(value ?? "").split(/\r?\n/)) {
+    const m = line.replace(/#.*/, "").trim().match(/^\S+@\S+\s*[=:]\s*(\S+)$/);
+    if (m) ids.add(m[1]);
+  }
+  return ids;
+}
+function SettingsPage({ context }) {
+  const companyId = context.companyId;
+  const [config, setConfig] = useState(null);
+  const [members, setMembers] = useState([]);
+  const [agents, setAgents] = useState([]);
+  const [agentsMode, setAgentsMode] = useState("all");
+  const [pickedAgents, setPickedAgents] = useState(/* @__PURE__ */ new Set());
+  const [access, setAccess] = useState("everyone");
+  const [grants, setGrants] = useState(/* @__PURE__ */ new Map());
+  const [secrets, setSecrets] = useState([]);
+  const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
+  const [loadError, setLoadError] = useState(null);
+  const [saveError, setSaveError] = useState(null);
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [check, setCheck] = useState(null);
+  const verify = usePluginAction("verify-url");
+  useEffect(() => {
+    if (!companyId) return;
+    Promise.all([
+      api(`/api/plugins/${PLUGIN}/config?companyId=${companyId}`),
+      api(`/api/companies/${companyId}/members`).then((r) => r.members).catch(() => api(`/api/companies/${companyId}/user-directory`).then((r) => r.users.map((u) => ({ ...u, principalType: "user", membershipRole: null })))),
+      api(`/api/companies/${companyId}/secrets`).catch(() => []),
+      api(`/api/companies/${companyId}/agents`).then((r) => Array.isArray(r) ? r : r.agents).catch(() => [])
+    ]).then(([cfg, mem, sec, ags]) => {
+      const c = cfg?.configJson ?? {};
+      setAgents(ags.filter((a) => a.status !== "terminated"));
+      setAgentsMode(c.agentsMode === "selected" ? "selected" : "all");
+      setPickedAgents(new Set(Array.isArray(c.agents) ? c.agents : []));
+      setAccess(c.access === "selected" ? "selected" : "everyone");
+      setGrants(grantsFrom(c.allowedUsers));
+      setConfig(c);
+      setSelected(savedApproverIds(c.approvers));
+      setMembers(mem.filter((m) => m.principalType === "user" && m.status === "active" && m.user && m.membershipRole !== "viewer"));
+      setSecrets(sec.filter((x) => !x.deletedAt));
+    }).catch((e) => setLoadError(String(e?.message ?? e)));
+  }, [companyId]);
+  const outsiderKey = [...grants.keys()].sort().join(",");
+  const emails = useMemo(() => [.../* @__PURE__ */ new Set([...members.map((m) => m.user?.email?.toLowerCase()).filter((e) => Boolean(e)), ...outsiderKey.split(",").filter(Boolean)])], [members, outsiderKey]);
+  const setup = usePluginData("setup", { companyId, emails });
+  const detected = setup.data?.detectedUrl ?? null;
+  const url = typeof config?.paperclipUrl === "string" && config.paperclipUrl ? config.paperclipUrl : detected ?? "";
+  useEffect(() => {
+    if (!url || check?.url === url) return;
+    const t = setTimeout(() => {
+      setCheck({ url, ok: null, detail: "Checking that Mattermost can reach this address\u2026" });
+      verify({ url }).then((r) => {
+        const res = r;
+        setCheck((cur) => cur?.url === url ? { url, ...res } : cur);
+      }).catch((e) => setCheck({ url, ok: false, detail: String(e?.message ?? e) }));
+    }, 700);
+    return () => clearTimeout(t);
+  }, [url]);
+  if (!companyId) return /* @__PURE__ */ jsx("div", { style: s.help, children: "Open this page from a company to configure it." });
+  if (loadError) return /* @__PURE__ */ jsxs("div", { style: s.bad, children: [
+    "Could not load the settings. Reload the page; if it keeps failing, check the plugin's Status tab. (",
+    loadError.slice(0, 200),
+    ")"
+  ] });
+  if (!config) return /* @__PURE__ */ jsx("div", { style: s.help, children: "Loading\u2026" });
+  const set = (patch) => {
+    setSaved(false);
+    setSaveError(null);
+    setFieldErrors((fe) => {
+      const n = { ...fe };
+      for (const k of Object.keys(patch)) delete n[k];
+      return n;
+    });
+    setConfig({ ...config, ...patch });
+  };
+  const token = config.botToken;
+  const toggle = (id) => {
+    setSaved(false);
+    const next = new Set(selected);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    setSelected(next);
+  };
+  async function save() {
+    setSaveError(null);
+    const errors = validate(config);
+    if (agentsMode === "selected" && !pickedAgents.size) errors.agents = "Tick at least one agent, or choose All agents.";
+    if (access === "selected" && !grants.size) errors.access = "Tick at least one person, or choose Everyone.";
+    const empty = [...grants.values()].find((g) => g.agents && !g.agents.length);
+    if (access === "selected" && empty) errors.access = `Pick at least one agent for ${empty.name || empty.email}, or give them All agents.`;
+    setFieldErrors(errors);
+    if (Object.keys(errors).length) {
+      setSaveError("Fix the fields marked above, then save.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const approvers = members.filter((m) => selected.has(m.principalId) && m.user?.email).map((m) => ({ userId: m.principalId, email: m.user.email, name: m.user.name ?? void 0 }));
+      const next = { ...config, paperclipUrl: url, approvers, agentsMode, agents: [...pickedAgents], access, allowedUsers: [...grants.values()] };
+      await api(`/api/plugins/${PLUGIN}/config`, { method: "POST", body: JSON.stringify({ companyId, configJson: next }) });
+      setConfig(next);
+      setSaved(true);
+    } catch (e) {
+      setSaveError(saveErrorText(String(e?.message ?? e)));
+    } finally {
+      setSaving(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { maxWidth: 760 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { ...s.help, marginBottom: 18, ...setup.data?.connected ? s.ok : {} }, children: [
+      setup.data?.connected ? `\u25CF Connected: ${setup.data.status ?? ""}` : setup.data?.status ? `\u25CF ${setup.data.status}` : "\u25CF Not connected yet: fill in the Mattermost URL and admin token, then save.",
+      setup.data?.versionNote ? /* @__PURE__ */ jsxs("div", { style: { color: "#c98a00", marginTop: 4 }, children: [
+        "Note: this plugin was ",
+        setup.data.versionNote,
+        "."
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx(Field, { label: "Mattermost URL", error: fieldErrors.mattermostUrl, help: "Your Mattermost address, for example https://chat.example.com", children: /* @__PURE__ */ jsx("input", { style: s.input, value: String(config.mattermostUrl ?? ""), onChange: (e) => set({ mattermostUrl: e.target.value }), placeholder: "https://chat.example.com" }) }),
+    /* @__PURE__ */ jsx(Field, { label: "Mattermost admin token", error: fieldErrors.botToken, help: "A Paperclip secret holding a personal access token of a Mattermost System Admin (Profile \u2192 Security \u2192 Personal Access Tokens). It creates one bot per agent and keeps them in sync.", children: /* @__PURE__ */ jsxs("select", { style: s.input, value: token?.secretId ?? "", onChange: (e) => set({ botToken: e.target.value ? { type: "secret_ref", version: "latest", secretId: e.target.value } : void 0 }), children: [
+      /* @__PURE__ */ jsx("option", { value: "", children: "Choose a secret\u2026" }),
+      secrets.map((x) => /* @__PURE__ */ jsx("option", { value: x.id, children: x.name || x.key || x.id }, x.id))
+    ] }) }),
+    /* @__PURE__ */ jsx(Field, { label: "Paperclip public URL", help: /* @__PURE__ */ jsxs(Fragment, { children: [
+      "Where Mattermost sends Approve / Reject clicks. Filled in from Paperclip's own settings; change it only if Mattermost reaches Paperclip at another address.",
+      check ? /* @__PURE__ */ jsxs("div", { style: { marginTop: 6, ...check.ok === true ? s.ok : check.ok === false ? s.bad : {} }, children: [
+        check.ok === true ? "\u2713 " : check.ok === false ? "\u2717 " : "",
+        check.detail
+      ] }) : null
+    ] }), children: /* @__PURE__ */ jsxs("div", { style: s.row, children: [
+      /* @__PURE__ */ jsx("input", { style: s.input, value: url, onChange: (e) => set({ paperclipUrl: e.target.value.trim() }), placeholder: detected ?? "https://paperclip.example.com" }),
+      detected && url !== detected ? /* @__PURE__ */ jsxs("button", { style: s.button, onClick: () => set({ paperclipUrl: detected }), children: [
+        "Use ",
+        detected
+      ] }) : null
+    ] }) }),
+    /* @__PURE__ */ jsx(Field, { label: "Approvals channel", help: "Every approval, and every decision card agents raise on tasks, is posted here. An approval raised during a Mattermost conversation also appears in that thread; deciding on either card updates both.", children: setup.data?.channels.length ? /* @__PURE__ */ jsxs("select", { style: s.input, value: String(config.approvalsChannel ?? ""), onChange: (e) => set({ approvalsChannel: e.target.value }), children: [
+      /* @__PURE__ */ jsx("option", { value: "", children: "None: only in the agent's thread" }),
+      setup.data.channels.map((ch) => /* @__PURE__ */ jsx("option", { value: ch.name, children: ch.displayName }, ch.name))
+    ] }) : /* @__PURE__ */ jsx("input", { style: s.input, value: String(config.approvalsChannel ?? ""), onChange: (e) => set({ approvalsChannel: e.target.value }), placeholder: "channel name, e.g. approvals" }) }),
+    /* @__PURE__ */ jsxs(Field, { label: "Agents in Mattermost", error: fieldErrors.agents, help: "Each agent shown here gets its own Mattermost bot. Unticking an agent switches its bot off but keeps it, with its history, for when you tick it again.", children: [
+      /* @__PURE__ */ jsx(
+        Modes,
+        {
+          value: agentsMode,
+          onChange: (v) => {
+            setAgentsMode(v);
+            setSaved(false);
+          },
+          options: [["all", "All agents (new agents join automatically)"], ["selected", "Only the agents I pick"]]
+        }
+      ),
+      agentsMode === "selected" ? /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 6 }, children: agents.map((a) => /* @__PURE__ */ jsxs("label", { style: { ...s.member, ...pickedAgents.has(a.id) ? { borderColor: "rgba(127,127,127,.55)" } : {} }, children: [
+        /* @__PURE__ */ jsx("input", { type: "checkbox", checked: pickedAgents.has(a.id), onChange: () => {
+          setPickedAgents(flip(pickedAgents, a.id));
+          setSaved(false);
+        } }),
+        a.avatarUrl ? /* @__PURE__ */ jsx("img", { src: a.avatarUrl, alt: "", width: 28, height: 28, style: { borderRadius: 6 } }) : null,
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx("div", { style: { fontWeight: 600 }, children: a.name }),
+          a.title ? /* @__PURE__ */ jsx("div", { style: s.help, children: a.title }) : null
+        ] })
+      ] }, a.id)) }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(Field, { label: "Who can talk to agents", error: fieldErrors.access, help: "Tick who may talk to agents, and for each person whether that is all agents or only some. Anyone else, or anyone messaging an agent outside their list, gets a private note and the agent is not run. People are matched to Mattermost by email; add people outside Paperclip by their email.", children: [
+      /* @__PURE__ */ jsx(
+        Modes,
+        {
+          value: access,
+          onChange: (v) => {
+            setAccess(v);
+            setSaved(false);
+          },
+          options: [["everyone", "Everyone in this Mattermost"], ["selected", "Only the people I pick"]]
+        }
+      ),
+      access === "selected" ? /* @__PURE__ */ jsx(AccessList, { members, agents, grants, accounts: setup.data?.accounts, onChange: (next) => {
+        setGrants(next);
+        setSaved(false);
+        setFieldErrors((fe) => ({ ...fe, access: void 0 }));
+      } }) : null
+    ] }),
+    /* @__PURE__ */ jsx(Field, { label: "Approvers", help: "Who may Approve / Reject from Mattermost. Their click counts as their Paperclip decision; they are matched to Mattermost by email.", children: /* @__PURE__ */ jsx(People, { members, selected, accounts: setup.data?.accounts, onToggle: toggle }) }),
+    /* @__PURE__ */ jsxs("div", { style: s.row, children: [
+      /* @__PURE__ */ jsx("button", { style: s.primary, onClick: save, disabled: saving, children: saving ? "Saving\u2026" : "Save" }),
+      saved ? /* @__PURE__ */ jsx("span", { style: s.ok, children: "Saved" }) : null,
+      saveError ? /* @__PURE__ */ jsx("span", { style: s.bad, children: saveError }) : null
+    ] })
+  ] });
+}
+export {
+  SettingsPage
+};