@nivaro/react 0.3.35 → 0.3.37

package/dist/shared/components/McpConnectionScope.js

@@ -0,0 +1,480 @@
+import { jsxs as a, jsx as o, Fragment as Y } from "react/jsx-runtime";
+import { useQueryClient as Z, useQuery as G, useMutation as K } from "@tanstack/react-query";
+import { Lock as ee, SlidersHorizontal as te, Check as Q, Loader2 as oe, Search as le, X as ae, Plus as ne, ChevronsUpDown as re } from "lucide-react";
+import { useState as E, useRef as se, useEffect as ie, useMemo as ce } from "react";
+import { useNivaroClient as U } from "../context.js";
+import { get as X, put as de, del as me } from "../lib/commands.js";
+import { cn as C, formatNumber as W } from "../lib/utils.js";
+import { ConfirmButton as he } from "./profile/primitives.js";
+import { Command as pe, CommandInput as ue, CommandList as xe, CommandEmpty as be, CommandGroup as fe, CommandItem as ke } from "./ui/command.js";
+import { Popover as ge, PopoverTrigger as ye, PopoverContent as Ne } from "./ui/popover.js";
+import { SimpleSelect as ve } from "./ui/SimpleSelect.js";
+import { Sheet as we, SheetContent as Ce, SheetHeader as $e, SheetTitle as Se, SheetDescription as Te } from "./ui/sheet.js";
+import { Skeleton as P } from "./ui/skeleton.js";
+import { Switch as Le } from "./ui/switch.js";
+const Ae = ["nvr-mcp-catalog"];
+function Oe(e = !0) {
+  const r = U();
+  return G({
+    queryKey: Ae,
+    queryFn: () => r.request(X("/mcp-connections/catalog")).then((i) => i.data),
+    staleTime: 6e4,
+    enabled: e
+  });
+}
+const _ = {
+  read: "Read",
+  create: "Create",
+  update: "Change",
+  delete: "Delete"
+}, qe = {
+  everyday: "Everyday",
+  chat: "Chat",
+  admin: "Administration",
+  instance: "This instance’s own tools"
+};
+function Pe(e) {
+  if (!e) return "Everything the person can do";
+  if (e.kit_missing) return "Its kit was removed — it can use nothing";
+  const r = [];
+  return e.kit && r.push(`${e.kit_label ?? e.kit} kit`), e.tools && r.push(`${W(e.tools.length)} tool${e.tools.length === 1 ? "" : "s"}`), e.collections && r.push(
+    e.collections.length === 1 ? e.collections[0] : `${W(e.collections.length)} collections`
+  ), e.actions && (e.actions.length === 1 && e.actions[0] === "read" ? r.push("read only") : e.actions.length === 0 ? r.push("no actions") : e.actions.length < 4 && r.push(
+    e.actions.map((i) => _[i]).join(", ").toLowerCase()
+  )), r.join(" · ") || "No limits";
+}
+function Xe({ scope: e }) {
+  return /* @__PURE__ */ a("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-[12px] text-slate-600 dark:text-slate-300", children: [
+    (e == null ? void 0 : e.locked) && /* @__PURE__ */ o(
+      ee,
+      {
+        className: "h-3 w-3 shrink-0 text-slate-400 dark:text-slate-500",
+        "aria-label": "Set by an administrator"
+      }
+    ),
+    /* @__PURE__ */ o(
+      "span",
+      {
+        className: C(
+          "truncate",
+          !e && "text-slate-500 dark:text-slate-400",
+          (e == null ? void 0 : e.kit_missing) && "text-red-600 dark:text-red-400"
+        ),
+        "data-tip": (e == null ? void 0 : e.note) ?? void 0,
+        children: Pe(e)
+      }
+    )
+  ] });
+}
+const L = "text-[12.5px] font-semibold text-slate-800 dark:text-slate-100", w = "text-[12px] text-slate-500 dark:text-slate-400";
+function R({
+  label: e,
+  help: r,
+  checked: i,
+  onChange: p,
+  disabled: u
+}) {
+  return /* @__PURE__ */ a("div", { className: "flex items-start justify-between gap-4", children: [
+    /* @__PURE__ */ a("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ o("p", { className: L, children: e }),
+      /* @__PURE__ */ o("p", { className: w, children: r })
+    ] }),
+    /* @__PURE__ */ o(Le, { checked: i, onCheckedChange: p, disabled: u, "aria-label": e })
+  ] });
+}
+function Re({
+  tools: e,
+  picked: r,
+  kitTools: i,
+  onChange: p
+}) {
+  const [u, x] = E(""), n = u.trim().toLowerCase(), f = ce(() => {
+    const h = /* @__PURE__ */ new Map();
+    for (const s of e)
+      n && !`${s.name} ${s.title}`.toLowerCase().includes(n) || h.set(s.group, [...h.get(s.group) ?? [], s]);
+    return [...h];
+  }, [e, n]), k = (h, s) => {
+    const b = new Set(r);
+    for (const t of h)
+      s && i && !i.has(t) || (s ? b.add(t) : b.delete(t));
+    p(b);
+  };
+  return /* @__PURE__ */ a("div", { className: "rounded-md border border-slate-200 dark:border-border", children: [
+    /* @__PURE__ */ a("label", { className: "flex items-center gap-2 border-b border-slate-200 px-2.5 dark:border-border", children: [
+      /* @__PURE__ */ o(le, { className: "h-3.5 w-3.5 shrink-0 text-slate-400" }),
+      /* @__PURE__ */ o(
+        "input",
+        {
+          value: u,
+          onChange: (h) => x(h.target.value),
+          placeholder: "Find a tool",
+          "aria-label": "Find a tool",
+          className: "h-8 w-full bg-transparent text-[12.5px] text-slate-800 outline-none placeholder:text-slate-500 dark:text-slate-100 dark:placeholder:text-slate-400"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { className: "max-h-[320px] overflow-y-auto overscroll-contain px-2.5 py-2", children: [
+      f.length === 0 && /* @__PURE__ */ o("p", { className: C(w, "py-2"), children: "No tool matches." }),
+      f.map(([h, s]) => {
+        const b = s.map((t) => t.name);
+        return /* @__PURE__ */ a("section", { className: "pb-2 last:pb-0", children: [
+          /* @__PURE__ */ a("div", { className: "flex items-center justify-between py-1", children: [
+            /* @__PURE__ */ o("span", { className: "text-[11px] font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400", children: qe[h] }),
+            /* @__PURE__ */ a("span", { className: "flex gap-2 text-[11.5px]", children: [
+              /* @__PURE__ */ o(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => k(b, !0),
+                  className: "text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white",
+                  children: "All"
+                }
+              ),
+              /* @__PURE__ */ o(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => k(b, !1),
+                  className: "text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white",
+                  children: "None"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ o("ul", { className: "grid gap-0.5 sm:grid-cols-2", children: s.map((t) => {
+            const d = i ? !i.has(t.name) : !1, $ = r.has(t.name) && !d;
+            return /* @__PURE__ */ o("li", { children: /* @__PURE__ */ a(
+              "label",
+              {
+                className: C(
+                  "flex items-center gap-2 rounded px-1.5 py-1 text-[12px]",
+                  d ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-muted"
+                ),
+                "data-tip": d ? "Not in the chosen kit" : t.description || void 0,
+                children: [
+                  /* @__PURE__ */ o(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: $,
+                      disabled: d,
+                      onChange: (S) => k([t.name], S.target.checked),
+                      className: "h-3.5 w-3.5 shrink-0 accent-nvr-cyan"
+                    }
+                  ),
+                  /* @__PURE__ */ o("span", { className: "truncate font-mono text-[11.5px] text-slate-700 dark:text-slate-200", children: t.name }),
+                  !t.read_only && /* @__PURE__ */ o("span", { className: "ml-auto shrink-0 text-[10.5px] text-amber-700 dark:text-amber-400", children: "writes" })
+                ]
+              }
+            ) }, t.name);
+          }) })
+        ] }, h);
+      })
+    ] })
+  ] });
+}
+function _e({
+  value: e,
+  onChange: r,
+  options: i
+}) {
+  const [p, u] = E(!1), x = new Map(i.map((n) => [n.collection, n.label]));
+  return /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+    e.map((n) => /* @__PURE__ */ a(
+      "span",
+      {
+        className: "inline-flex items-center gap-1 rounded bg-slate-100 py-0.5 pl-2 pr-1 text-[12px] text-slate-700 dark:bg-muted dark:text-slate-200",
+        children: [
+          x.get(n) ?? n,
+          /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              onClick: () => r(e.filter((f) => f !== n)),
+              "aria-label": `Remove ${x.get(n) ?? n}`,
+              className: "rounded p-0.5 text-slate-500 hover:bg-slate-200 hover:text-slate-800 dark:text-slate-400 dark:hover:bg-border dark:hover:text-white",
+              children: /* @__PURE__ */ o(ae, { className: "h-3 w-3" })
+            }
+          )
+        ]
+      },
+      n
+    )),
+    /* @__PURE__ */ a(ge, { open: p, onOpenChange: u, children: [
+      /* @__PURE__ */ o(ye, { asChild: !0, children: /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex h-7 items-center gap-1 rounded-md border border-dashed border-slate-300 px-2 text-[12px] text-slate-600 hover:border-slate-400 hover:text-slate-900 dark:border-border dark:text-slate-300 dark:hover:text-white",
+          children: [
+            /* @__PURE__ */ o(ne, { className: "h-3.5 w-3.5" }),
+            " Add a collection",
+            /* @__PURE__ */ o(re, { className: "h-3 w-3 opacity-60" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ o(Ne, { align: "start", className: "w-64 p-0", children: /* @__PURE__ */ a(pe, { children: [
+        /* @__PURE__ */ o(ue, { placeholder: "Find a collection" }),
+        /* @__PURE__ */ a(xe, { children: [
+          /* @__PURE__ */ o(be, { children: "No collection matches." }),
+          /* @__PURE__ */ o(fe, { children: i.filter((n) => !e.includes(n.collection)).map((n) => /* @__PURE__ */ a(
+            ke,
+            {
+              value: `${n.label} ${n.collection}`,
+              onSelect: () => {
+                r([...e, n.collection]), u(!1);
+              },
+              children: [
+                /* @__PURE__ */ o("span", { className: "truncate", children: n.label }),
+                /* @__PURE__ */ o("span", { className: "ml-auto truncate font-mono text-[10.5px] text-slate-500 dark:text-slate-400", children: n.collection })
+              ]
+            },
+            n.collection
+          )) })
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+const y = ["read", "create", "update", "delete"];
+function H(e) {
+  return {
+    kit: (e == null ? void 0 : e.kit) ?? "",
+    limitTools: (e == null ? void 0 : e.own.tools) != null,
+    tools: new Set((e == null ? void 0 : e.own.tools) ?? []),
+    limitCollections: (e == null ? void 0 : e.own.collections) != null,
+    collections: (e == null ? void 0 : e.own.collections) ?? [],
+    actions: new Set((e == null ? void 0 : e.own.actions) ?? y),
+    locked: (e == null ? void 0 : e.locked) ?? !1,
+    note: (e == null ? void 0 : e.note) ?? ""
+  };
+}
+function Je({
+  open: e,
+  onClose: r,
+  conn: i,
+  name: p,
+  who: u,
+  scope: x,
+  mode: n,
+  onSaved: f
+}) {
+  var M, B, D;
+  const k = U(), h = Z(), s = Oe(e), b = G({
+    queryKey: ["nvr-mcp-scope-collections"],
+    queryFn: () => k.request(
+      X("/collections")
+    ).then(
+      (l) => (l.data ?? []).filter((m) => !/^(nivaro_|directus_)/.test(m.collection)).map((m) => ({ collection: m.collection, label: m.display_name || m.collection })).sort((m, g) => m.label.localeCompare(g.label))
+    ),
+    enabled: e,
+    staleTime: 6e4
+  }), [t, d] = E(() => H(x)), $ = se(!1);
+  ie(() => {
+    e && !$.current && d(H(x)), $.current = e;
+  }, [e, x]);
+  const S = n === "mine" ? `/mcp-connections/mine/${i}/scope` : `/mcp-connections/${i}/scope`, j = () => {
+    h.invalidateQueries({ queryKey: ["nvr-mcp-connections"] }), f == null || f(), r();
+  }, N = K({
+    mutationFn: () => k.request(
+      de(S, {
+        kit: t.kit || null,
+        tools: t.limitTools ? [...t.tools] : null,
+        collections: t.limitCollections ? t.collections : null,
+        actions: t.actions.size === y.length ? null : y.filter((l) => t.actions.has(l)),
+        ...n === "admin" ? { locked: t.locked, note: t.note.trim() || null } : {}
+      })
+    ),
+    onSuccess: j
+  }), T = K({ mutationFn: () => k.request(me(S)), onSuccess: j }), F = ((M = s.data) == null ? void 0 : M.kits) ?? [], c = F.find((l) => l.key === t.kit) ?? null, A = c != null && c.tools ? new Set(c.tools) : null, J = ((B = s.data) == null ? void 0 : B.tools) ?? [], v = t.limitTools ? [...t.tools].filter((l) => !A || A.has(l)) : (c == null ? void 0 : c.tools) ?? null, z = t.actions.size === 0, I = v != null && v.length === 0, O = s.data && !s.data.ready, V = (() => {
+    const l = v == null ? "every tool it is offered" : `${v.length} tool${v.length === 1 ? "" : "s"}`, m = t.limitCollections ? t.collections.length ? `on ${t.collections.length === 1 ? t.collections[0] : `${t.collections.length} collections`}` : "on no collection" : "on every collection the person can reach", g = t.actions.size === y.length ? "" : t.actions.size === 1 && t.actions.has("read") ? ", read only" : `, only ${y.filter((q) => t.actions.has(q)).map((q) => _[q].toLowerCase()).join(", ")}`;
+    return `${p} will use ${l} ${m}${g}.`;
+  })();
+  return /* @__PURE__ */ o(we, { open: e, onOpenChange: (l) => !l && r(), children: /* @__PURE__ */ a(Ce, { className: "flex w-[560px] max-w-[96vw] flex-col gap-0 p-0 sm:max-w-[560px]", children: [
+    /* @__PURE__ */ a($e, { className: "shrink-0 border-b border-slate-200 px-5 py-4 text-left dark:border-border", children: [
+      /* @__PURE__ */ a(Se, { className: "flex items-center gap-2 pr-6 text-[15px]", children: [
+        /* @__PURE__ */ o(te, { className: "h-4 w-4 text-nvr-navy dark:text-nvr-cyan" }),
+        "Limits for ",
+        p
+      ] }),
+      /* @__PURE__ */ a(Te, { className: "text-[12.5px]", children: [
+        u ? `${u} · ` : "",
+        "Limits only take away: it never gets more than",
+        " ",
+        n === "mine" ? "you" : "its person",
+        " can do."
+      ] })
+    ] }),
+    /* @__PURE__ */ o("div", { className: "flex-1 space-y-6 overflow-y-auto px-5 py-5", children: s.isLoading ? /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ o(P, { className: "h-9" }),
+      /* @__PURE__ */ o(P, { className: "h-40" })
+    ] }) : s.isError ? /* @__PURE__ */ o("p", { className: w, children: "The tool list could not be loaded. Try again in a moment." }) : O ? /* @__PURE__ */ o("p", { className: "text-[12.5px] text-amber-700 dark:text-amber-400", children: "Connection limits need database migration 509. They can be set once it has run." }) : /* @__PURE__ */ a(Y, { children: [
+      /* @__PURE__ */ a("section", { className: "space-y-2", children: [
+        /* @__PURE__ */ o("p", { className: L, children: "Tool kit" }),
+        /* @__PURE__ */ o(
+          ve,
+          {
+            value: t.kit,
+            onChange: (l) => d({ ...t, kit: l }),
+            ariaLabel: "Tool kit",
+            className: "h-9 w-full text-[12.5px]",
+            options: [
+              { value: "", label: "No kit" },
+              ...F.map((l) => ({ value: l.key, label: l.label }))
+            ]
+          }
+        ),
+        /* @__PURE__ */ o("p", { className: w, children: c ? `${c.description} ${c.tools ? `${c.tools.length} tools.` : ""}` : "A kit is a ready set of tools for one kind of job. Without one, pick tools below or leave them open." })
+      ] }),
+      /* @__PURE__ */ a("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ o(
+          R,
+          {
+            label: "Only these tools",
+            help: c ? "Narrow the kit further." : "Off = every tool it would otherwise get.",
+            checked: t.limitTools,
+            onChange: (l) => d({
+              ...t,
+              limitTools: l,
+              tools: l && t.tools.size === 0 ? new Set((c == null ? void 0 : c.tools) ?? []) : t.tools
+            })
+          }
+        ),
+        t.limitTools && /* @__PURE__ */ o(
+          Re,
+          {
+            tools: J,
+            picked: t.tools,
+            kitTools: A,
+            onChange: (l) => d({ ...t, tools: l })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ o(
+          R,
+          {
+            label: "Only these collections",
+            help: "Records elsewhere are out of reach, as for an API key limited to collections. Administrator tools are off while this is on.",
+            checked: t.limitCollections,
+            onChange: (l) => d({ ...t, limitCollections: l })
+          }
+        ),
+        t.limitCollections && (b.isLoading ? /* @__PURE__ */ o(P, { className: "h-7 w-48" }) : /* @__PURE__ */ o(
+          _e,
+          {
+            value: t.collections,
+            onChange: (l) => d({ ...t, collections: l }),
+            options: b.data ?? []
+          }
+        ))
+      ] }),
+      /* @__PURE__ */ a("section", { className: "space-y-2", children: [
+        /* @__PURE__ */ o("p", { className: L, children: "What it may do" }),
+        /* @__PURE__ */ o("fieldset", { className: "flex flex-wrap gap-1.5", "aria-label": "What it may do", children: y.map((l) => {
+          const m = t.actions.has(l);
+          return /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": m,
+              onClick: () => {
+                const g = new Set(t.actions);
+                m ? g.delete(l) : g.add(l), d({ ...t, actions: g });
+              },
+              className: C(
+                "inline-flex h-7 items-center gap-1 rounded-md border px-2.5 text-[12px] font-medium transition-colors",
+                m ? "border-nvr-cyan/40 bg-nvr-cyan/10 text-nvr-navy dark:text-nvr-cyan" : "border-slate-200 text-slate-500 hover:text-slate-800 dark:border-border dark:text-slate-400 dark:hover:text-white"
+              ),
+              children: [
+                m && /* @__PURE__ */ o(Q, { className: "h-3 w-3" }),
+                _[l]
+              ]
+            },
+            l
+          );
+        }) }),
+        /* @__PURE__ */ o("p", { className: w, children: "Held to these on every record it reads or writes, on top of the person’s own access." })
+      ] }),
+      n === "admin" && /* @__PURE__ */ a("section", { className: "space-y-3 border-t border-slate-100 pt-5 dark:border-border/60", children: [
+        /* @__PURE__ */ o(
+          R,
+          {
+            label: "Lock",
+            help: "Only administrators can change or remove these limits. The person still sees them.",
+            checked: t.locked,
+            onChange: (l) => d({ ...t, locked: l })
+          }
+        ),
+        /* @__PURE__ */ a("label", { className: "block space-y-1", children: [
+          /* @__PURE__ */ o("span", { className: L, children: "Note" }),
+          /* @__PURE__ */ o(
+            "input",
+            {
+              value: t.note,
+              onChange: (l) => d({ ...t, note: l.target.value.slice(0, 300) }),
+              placeholder: "Why it is limited (the person sees this)",
+              className: "h-8 w-full rounded-md border border-slate-200 bg-white px-2.5 text-[12.5px] text-slate-800 outline-none placeholder:text-slate-500 focus:border-nvr-cyan focus-visible:ring-2 focus-visible:ring-nvr-cyan/25 dark:border-border dark:bg-background dark:text-slate-100 dark:placeholder:text-slate-400"
+            }
+          )
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ a("footer", { className: "shrink-0 space-y-3 border-t border-slate-200 px-5 py-3 dark:border-border", children: [
+      !O && s.data && /* @__PURE__ */ o(
+        "p",
+        {
+          className: C(
+            "text-[12px]",
+            I || z ? "text-amber-700 dark:text-amber-400" : "text-slate-600 dark:text-slate-300"
+          ),
+          children: I ? `${p} will have no tools at all.` : z ? `${p} will not be able to read or change any record.` : V
+        }
+      ),
+      (N.isError || T.isError) && /* @__PURE__ */ o("p", { className: "text-[12px] text-red-600 dark:text-red-400", children: ((D = N.error ?? T.error) == null ? void 0 : D.message) || "Could not save" }),
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+        x && /* @__PURE__ */ o(
+          he,
+          {
+            onConfirm: () => T.mutate(),
+            disabled: T.isPending,
+            confirmLabel: "Remove limits?",
+            title: "Remove every limit",
+            className: "h-8 rounded-md px-2.5 text-[12.5px] font-medium text-slate-600 transition-colors hover:bg-muted hover:text-slate-900 dark:text-slate-300 dark:hover:text-white",
+            armedClassName: "bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400",
+            children: "Remove limits"
+          }
+        ),
+        /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            onClick: r,
+            className: "ml-auto h-8 rounded-md border border-slate-200 px-3 text-[12.5px] font-medium text-slate-700 transition-colors hover:bg-muted dark:border-border dark:text-slate-200",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            disabled: N.isPending || !s.data || !!O,
+            onClick: () => N.mutate(),
+            className: "inline-flex h-8 items-center gap-1.5 rounded-md bg-nvr-cyan px-3.5 text-[12.5px] font-medium text-white transition-colors hover:bg-nvr-cyan/90 disabled:opacity-40",
+            children: [
+              N.isPending ? /* @__PURE__ */ o(oe, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ o(Q, { className: "h-3.5 w-3.5" }),
+              "Save limits"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  Je as McpScopeSheet,
+  Xe as ScopeBadge,
+  Ae as mcpCatalogKey,
+  Pe as scopeSummaryText,
+  Oe as useMcpCatalog
+};