@cryptiklemur/lattice 0.0.0

package/client/src/components/project-settings/ProjectMcp.tsx

@@ -0,0 +1,232 @@
+import { useState, useEffect } from "react";
+import { Plus, Pencil, Trash2 } from "lucide-react";
+import { useSaveState } from "../../hooks/useSaveState";
+import { SaveFooter } from "../ui/SaveFooter";
+import type { ProjectSettings, McpServerConfig } from "@lattice/shared";
+import {
+  type FormState,
+  emptyForm,
+  formFromConfig,
+  formToConfig,
+  typeBadge,
+  configSummary,
+  ServerForm,
+} from "../settings/mcp-shared";
+
+export function ProjectMcp({
+  settings,
+  updateSection,
+}: {
+  settings: ProjectSettings;
+  updateSection: (section: string, data: Record<string, unknown>) => void;
+}) {
+  var globalServers = settings.global.mcpServers ?? {};
+  var globalEntries = Object.entries(globalServers);
+
+  var [servers, setServers] = useState<Record<string, McpServerConfig>>(function () {
+    return { ...(settings.mcpServers ?? {}) };
+  });
+  var save = useSaveState();
+
+  var [adding, setAdding] = useState(false);
+  var [addForm, setAddForm] = useState<FormState>(emptyForm);
+  var [editingName, setEditingName] = useState<string | null>(null);
+  var [editForm, setEditForm] = useState<FormState>(emptyForm);
+  var [confirmDelete, setConfirmDelete] = useState<string | null>(null);
+
+  useEffect(function () {
+    if (save.saving) {
+      save.confirmSave();
+    } else {
+      setServers({ ...(settings.mcpServers ?? {}) });
+      save.resetFromServer();
+    }
+  }, [settings]);
+
+  var projectEntries = Object.entries(servers);
+
+  function handleAddSave() {
+    var name = addForm.name.trim();
+    if (!name) return;
+    var next = { ...servers, [name]: formToConfig(addForm) };
+    setServers(next);
+    setAdding(false);
+    setAddForm(emptyForm());
+    save.markDirty();
+  }
+
+  function handleEditStart(name: string) {
+    setEditingName(name);
+    setEditForm(formFromConfig(name, servers[name]));
+    setAdding(false);
+    setConfirmDelete(null);
+  }
+
+  function handleEditSave() {
+    if (!editingName) return;
+    var newName = editForm.name.trim();
+    if (!newName) return;
+    var next = { ...servers };
+    if (newName !== editingName) {
+      delete next[editingName];
+    }
+    next[newName] = formToConfig(editForm);
+    setServers(next);
+    setEditingName(null);
+    save.markDirty();
+  }
+
+  function handleDelete(name: string) {
+    if (confirmDelete !== name) {
+      setConfirmDelete(name);
+      return;
+    }
+    var next = { ...servers };
+    delete next[name];
+    setServers(next);
+    if (editingName === name) setEditingName(null);
+    setConfirmDelete(null);
+    save.markDirty();
+  }
+
+  function handleSave() {
+    save.startSave();
+    updateSection("mcp", { mcpServers: servers });
+  }
+
+  var existingNamesForAdd = new Set(Object.keys(servers));
+  var existingNamesForEdit = new Set(
+    Object.keys(servers).filter(function (n) { return n !== editingName; })
+  );
+
+  return (
+    <div className="py-2">
+      <div className="mb-6">
+        <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
+          Global MCP Servers
+        </h2>
+        {globalEntries.length === 0 && (
+          <div className="py-4 text-center text-[13px] text-base-content/30">
+            No global MCP servers.
+          </div>
+        )}
+        {globalEntries.length > 0 && (
+          <div className="flex flex-col gap-2">
+            {globalEntries.map(function ([name, config]) {
+              return (
+                <div
+                  key={name}
+                  className="flex items-center gap-3 px-3 py-2 rounded-xl bg-base-300/50 border border-base-content/10"
+                >
+                  <span className="font-mono text-[12px] text-base-content/40 font-semibold flex-shrink-0">{name}</span>
+                  {typeBadge(config)}
+                  <div className="flex-1 min-w-0">{configSummary(config)}</div>
+                  <span className="text-[10px] uppercase tracking-wider text-base-content/30 flex-shrink-0">global</span>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      <div>
+        <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
+          Project MCP Servers
+        </h2>
+
+        {projectEntries.length === 0 && !adding && (
+          <div className="py-4 text-center text-[13px] text-base-content/30 mb-3">
+            No project MCP servers.
+          </div>
+        )}
+
+        <div className="flex flex-col gap-2 mb-3">
+          {projectEntries.map(function ([name, config]) {
+            if (editingName === name) {
+              return (
+                <ServerForm
+                  key={name}
+                  form={editForm}
+                  setForm={setEditForm}
+                  onSave={handleEditSave}
+                  onCancel={function () { setEditingName(null); }}
+                  existingNames={existingNamesForEdit}
+                  idPrefix="mcp-edit"
+                />
+              );
+            }
+            var isConfirming = confirmDelete === name;
+            return (
+              <div
+                key={name}
+                className="flex items-center gap-3 px-3 py-2 rounded-xl bg-base-300 border border-base-content/15"
+              >
+                <span className="font-mono text-[12px] text-base-content font-semibold flex-shrink-0">{name}</span>
+                {typeBadge(config)}
+                <div className="flex-1 min-w-0">{configSummary(config)}</div>
+                {isConfirming ? (
+                  <div className="flex gap-1.5 flex-shrink-0">
+                    <button
+                      onClick={function () { handleDelete(name); }}
+                      className="btn btn-error btn-xs"
+                    >
+                      Confirm
+                    </button>
+                    <button
+                      onClick={function () { setConfirmDelete(null); }}
+                      className="btn btn-ghost btn-xs"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                ) : (
+                  <div className="flex gap-1 flex-shrink-0">
+                    <button
+                      onClick={function () { handleEditStart(name); }}
+                      aria-label={"Edit " + name}
+                      className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-primary focus-visible:ring-2 focus-visible:ring-primary"
+                    >
+                      <Pencil size={12} />
+                    </button>
+                    <button
+                      onClick={function () { handleDelete(name); }}
+                      aria-label={"Delete " + name}
+                      className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-error focus-visible:ring-2 focus-visible:ring-primary"
+                    >
+                      <Trash2 size={12} />
+                    </button>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        {adding && (
+          <div className="mb-3">
+            <ServerForm
+              form={addForm}
+              setForm={setAddForm}
+              onSave={handleAddSave}
+              onCancel={function () { setAdding(false); setAddForm(emptyForm()); }}
+              existingNames={existingNamesForAdd}
+              idPrefix="mcp-add"
+            />
+          </div>
+        )}
+
+        {!adding && (
+          <button
+            onClick={function () { setAdding(true); setEditingName(null); setConfirmDelete(null); }}
+            className="flex items-center gap-1.5 px-3 py-2.5 sm:py-1.5 rounded-xl border border-dashed border-base-content/20 bg-transparent text-base-content/40 text-[12px] hover:text-base-content/60 hover:border-base-content/30 transition-colors duration-[120ms] mb-5 cursor-pointer focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-base-100"
+          >
+            <Plus size={12} />
+            Add Server
+          </button>
+        )}
+
+        <SaveFooter dirty={save.dirty} saving={save.saving} saveState={save.saveState} onSave={handleSave} />
+      </div>
+    </div>
+  );
+}

package/client/src/components/project-settings/ProjectPermissions.tsx

@@ -0,0 +1,209 @@
+import { useState, useEffect } from "react";
+import { X, Plus } from "lucide-react";
+import { SaveFooter } from "../ui/SaveFooter";
+import { useSaveState } from "../../hooks/useSaveState";
+import type { ProjectSettings } from "@lattice/shared";
+
+function RuleList({
+  rules,
+  onDelete,
+  readOnly,
+  labelPrefix,
+}: {
+  rules: string[];
+  onDelete?: (index: number) => void;
+  readOnly?: boolean;
+  labelPrefix?: string;
+}) {
+  if (rules.length === 0) {
+    return (
+      <div className="py-3 text-center text-[13px] text-base-content/30">
+        No rules defined.
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {rules.map(function (rule, idx) {
+        return (
+          <div
+            key={rule + "-" + idx}
+            className={
+              "flex items-center gap-2 h-9 sm:h-7 px-3 rounded-xl border font-mono text-[12px] " +
+              (readOnly
+                ? "bg-base-300/50 border-base-content/10 text-base-content/40"
+                : "bg-base-300 border-base-content/15 text-base-content")
+            }
+          >
+            <span className="flex-1 truncate">{rule}</span>
+            {readOnly && (
+              <span className="text-[10px] uppercase tracking-wider text-base-content/30 flex-shrink-0">
+                global
+              </span>
+            )}
+            {!readOnly && onDelete && (
+              <button
+                onClick={function () { onDelete(idx); }}
+                aria-label={"Delete " + (labelPrefix || "") + " rule: " + rule}
+                title="Delete"
+                className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-error flex-shrink-0 focus-visible:ring-2 focus-visible:ring-primary"
+              >
+                <X size={12} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function AddRuleRow({ onAdd, label }: { onAdd: (rule: string) => void; label: string }) {
+  var [value, setValue] = useState("");
+
+  function handleAdd() {
+    var trimmed = value.trim();
+    if (!trimmed) return;
+    onAdd(trimmed);
+    setValue("");
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleAdd();
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-1.5 mt-1.5">
+      <input
+        type="text"
+        value={value}
+        onChange={function (e) { setValue(e.target.value); }}
+        onKeyDown={handleKeyDown}
+        placeholder="e.g. Bash(curl:*)"
+        aria-label={label}
+        className="flex-1 h-9 sm:h-7 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content font-mono text-[12px] focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
+      />
+      <button
+        onClick={handleAdd}
+        disabled={!value.trim()}
+        className={
+          "flex items-center gap-1.5 px-3 h-9 sm:h-7 rounded-xl border border-dashed border-base-content/20 bg-transparent text-base-content/40 text-[12px] hover:text-base-content/60 hover:border-base-content/30 transition-colors duration-[120ms] cursor-pointer focus-visible:ring-2 focus-visible:ring-primary" +
+          (!value.trim() ? " opacity-50 cursor-not-allowed" : "")
+        }
+      >
+        <Plus size={12} />
+        Add
+      </button>
+    </div>
+  );
+}
+
+export function ProjectPermissions({
+  settings,
+  updateSection,
+}: {
+  settings: ProjectSettings;
+  updateSection: (section: string, data: Record<string, unknown>) => void;
+}) {
+  var [allow, setAllow] = useState<string[]>(function () {
+    return [...(settings.permissions.allow ?? [])];
+  });
+  var [deny, setDeny] = useState<string[]>(function () {
+    return [...(settings.permissions.deny ?? [])];
+  });
+  var save = useSaveState();
+
+  useEffect(function () {
+    if (save.saving) {
+      save.confirmSave();
+    } else {
+      setAllow([...(settings.permissions.allow ?? [])]);
+      setDeny([...(settings.permissions.deny ?? [])]);
+      save.resetFromServer();
+    }
+  }, [settings]);
+
+  function handleDeleteAllow(idx: number) {
+    setAllow(function (prev) {
+      var next = [...prev];
+      next.splice(idx, 1);
+      return next;
+    });
+    save.markDirty();
+  }
+
+  function handleDeleteDeny(idx: number) {
+    setDeny(function (prev) {
+      var next = [...prev];
+      next.splice(idx, 1);
+      return next;
+    });
+    save.markDirty();
+  }
+
+  function handleAddAllow(rule: string) {
+    setAllow(function (prev) { return [...prev, rule]; });
+    save.markDirty();
+  }
+
+  function handleAddDeny(rule: string) {
+    setDeny(function (prev) { return [...prev, rule]; });
+    save.markDirty();
+  }
+
+  function handleSave() {
+    save.startSave();
+    updateSection("permissions", { allow, deny });
+  }
+
+  var globalAllow = settings.global.permissions?.allow ?? [];
+  var globalDeny = settings.global.permissions?.deny ?? [];
+
+  return (
+    <div className="py-2">
+      <div className="mb-6">
+        <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
+          Allow Rules
+        </h2>
+        <RuleList rules={allow} onDelete={handleDeleteAllow} labelPrefix="allow" />
+        <AddRuleRow onAdd={handleAddAllow} label="New allow rule" />
+      </div>
+
+      <div className="mb-6">
+        <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
+          Deny Rules
+        </h2>
+        <RuleList rules={deny} onDelete={handleDeleteDeny} labelPrefix="deny" />
+        <AddRuleRow onAdd={handleAddDeny} label="New deny rule" />
+      </div>
+
+      <div className="mb-8">
+        <SaveFooter dirty={save.dirty} saving={save.saving} saveState={save.saveState} onSave={handleSave} />
+      </div>
+
+      {(globalAllow.length > 0 || globalDeny.length > 0) && (
+        <div>
+          <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
+            Global Permissions
+          </h2>
+          {globalAllow.length > 0 && (
+            <div className="mb-4">
+              <div className="text-[11px] text-base-content/40 uppercase tracking-wider mb-1.5">Allow</div>
+              <RuleList rules={globalAllow} readOnly />
+            </div>
+          )}
+          {globalDeny.length > 0 && (
+            <div className="mb-4">
+              <div className="text-[11px] text-base-content/40 uppercase tracking-wider mb-1.5">Deny</div>
+              <RuleList rules={globalDeny} readOnly />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}