@cryptiklemur/lattice 0.0.0

package/client/src/components/settings/ClaudeSettings.tsx

@@ -0,0 +1,151 @@
+import { useState, useEffect } from "react";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { useSaveState } from "../../hooks/useSaveState";
+import { SaveFooter } from "../ui/SaveFooter";
+import type { ServerMessage, SettingsDataMessage, SettingsUpdateMessage } from "@lattice/shared";
+
+var CLAUDE_MODELS = [
+  { id: "claude-opus-4-6", label: "Claude Opus 4.6" },
+  { id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6" },
+  { id: "claude-haiku-4-5", label: "Claude Haiku 4.5" },
+  { id: "claude-opus-4-5", label: "Claude Opus 4.5" },
+  { id: "claude-sonnet-4-5", label: "Claude Sonnet 4.5" },
+];
+
+var EFFORT_LEVELS = [
+  { id: "low", label: "Low" },
+  { id: "normal", label: "Normal" },
+  { id: "high", label: "High" },
+  { id: "max", label: "Max" },
+];
+
+export function ClaudeSettings() {
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var [claudeMd, setClaudeMd] = useState("");
+  var [model, setModel] = useState(CLAUDE_MODELS[0].id);
+  var [effort, setEffort] = useState("normal");
+  var save = useSaveState();
+
+  useEffect(function () {
+    function handleMessage(msg: ServerMessage) {
+      if (msg.type !== "settings:data") {
+        return;
+      }
+      var data = msg as SettingsDataMessage;
+      var cfg = data.config as unknown as Record<string, unknown>;
+
+      var newClaudeMd = cfg.claudeMd ? String(cfg.claudeMd) : "";
+      var newModel = cfg.defaultModel ? String(cfg.defaultModel) : CLAUDE_MODELS[0].id;
+      var newEffort = cfg.defaultEffort ? String(cfg.defaultEffort) : "normal";
+
+      if (save.saving) {
+        save.confirmSave();
+      } else {
+        setClaudeMd(newClaudeMd);
+        setModel(newModel);
+        setEffort(newEffort);
+        save.resetFromServer();
+      }
+    }
+
+    subscribe("settings:data", handleMessage);
+    send({ type: "settings:get" });
+
+    return function () {
+      unsubscribe("settings:data", handleMessage);
+    };
+  }, []);
+
+  function handleModelChange(value: string) {
+    setModel(value);
+    save.markDirty();
+  }
+
+  function handleEffortChange(value: string) {
+    setEffort(value);
+    save.markDirty();
+  }
+
+  function handleClaudeMdChange(value: string) {
+    setClaudeMd(value);
+    save.markDirty();
+  }
+
+  function handleSave() {
+    save.startSave();
+    var updateMsg: SettingsUpdateMessage = {
+      type: "settings:update",
+      settings: { claudeMd, defaultModel: model, defaultEffort: effort } as SettingsUpdateMessage["settings"],
+    };
+    send(updateMsg);
+  }
+
+  return (
+    <div className="py-2">
+      <div className="mb-5">
+        <label htmlFor="claude-default-model" className="block text-[12px] font-semibold text-base-content/40 mb-2">Default Model</label>
+        <select
+          id="claude-default-model"
+          value={model}
+          onChange={function (e) { handleModelChange(e.target.value); }}
+          className="w-full h-9 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[13px] focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
+        >
+          {CLAUDE_MODELS.map(function (m) {
+            return (
+              <option key={m.id} value={m.id} className="bg-base-300">
+                {m.label}
+              </option>
+            );
+          })}
+        </select>
+      </div>
+
+      <div className="mb-6" role="radiogroup" aria-label="Default Effort">
+        <div className="text-[12px] font-semibold text-base-content/40 mb-2">Default Effort</div>
+        <div className="flex gap-2">
+          {EFFORT_LEVELS.map(function (e) {
+            var active = effort === e.id;
+            return (
+              <button
+                key={e.id}
+                role="radio"
+                aria-checked={active}
+                onClick={function () { handleEffortChange(e.id); }}
+                className={
+                  "flex-1 py-2.5 sm:py-1.5 rounded-lg border text-[12px] transition-colors duration-[120ms] cursor-pointer focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-base-100 " +
+                  (active
+                    ? "border-primary bg-base-300 text-base-content font-semibold"
+                    : "border-base-content/15 bg-base-300 text-base-content/40 hover:border-base-content/30 hover:text-base-content/60")
+                }
+              >
+                {e.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="mb-5">
+        <div className="flex items-center justify-between mb-2">
+          <label htmlFor="claude-global-md" className="text-[12px] font-semibold text-base-content/40">Global CLAUDE.md</label>
+          <div className="text-[11px] text-base-content/30 font-mono">~/.claude/CLAUDE.md</div>
+        </div>
+        <textarea
+          id="claude-global-md"
+          value={claudeMd}
+          onChange={function (e) { handleClaudeMdChange(e.target.value); }}
+          placeholder={"# Global instructions for Claude\n\nAdd your global instructions here..."}
+          rows={14}
+          className="w-full px-3 py-2.5 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[12px] font-mono leading-relaxed resize-y focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
+        />
+      </div>
+
+      <SaveFooter
+        dirty={save.dirty}
+        saving={save.saving}
+        saveState={save.saveState}
+        onSave={handleSave}
+      />
+    </div>
+  );
+}

package/client/src/components/settings/Environment.tsx

@@ -0,0 +1,185 @@
+import { useState, useEffect, useMemo } from "react";
+import { X, Plus, AlertTriangle } from "lucide-react";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { useSaveState } from "../../hooks/useSaveState";
+import { SaveFooter } from "../ui/SaveFooter";
+import { findDuplicateKeys } from "../../utils/findDuplicateKeys";
+import type { ServerMessage, SettingsDataMessage } from "@lattice/shared";
+
+interface EnvEntry {
+  id: string;
+  key: string;
+  value: string;
+}
+
+function genId(): string {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+export function Environment() {
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var [entries, setEntries] = useState<EnvEntry[]>([]);
+  var save = useSaveState();
+
+  useEffect(function () {
+    function handleMessage(msg: ServerMessage) {
+      if (msg.type !== "settings:data") {
+        return;
+      }
+      var data = msg as SettingsDataMessage;
+      var env = data.config.globalEnv ?? {};
+
+      if (save.saving) {
+        save.confirmSave();
+      }
+
+      var rows = Object.entries(env).map(function ([k, v]) {
+        return { id: genId(), key: k, value: v };
+      });
+      setEntries(rows);
+      if (!save.saving) {
+        save.resetFromServer();
+      }
+    }
+
+    subscribe("settings:data", handleMessage);
+    send({ type: "settings:get" });
+
+    return function () {
+      unsubscribe("settings:data", handleMessage);
+    };
+  }, []);
+
+  function handleAddRow() {
+    setEntries(function (prev) {
+      return [...prev, { id: genId(), key: "", value: "" }];
+    });
+    save.markDirty();
+  }
+
+  function handleDelete(id: string) {
+    setEntries(function (prev) {
+      return prev.filter(function (e) { return e.id !== id; });
+    });
+    save.markDirty();
+  }
+
+  function handleKeyChange(id: string, key: string) {
+    setEntries(function (prev) {
+      return prev.map(function (e) {
+        return e.id === id ? { ...e, key } : e;
+      });
+    });
+    save.markDirty();
+  }
+
+  function handleValueChange(id: string, value: string) {
+    setEntries(function (prev) {
+      return prev.map(function (e) {
+        return e.id === id ? { ...e, value } : e;
+      });
+    });
+    save.markDirty();
+  }
+
+  function handleSave() {
+    var env: Record<string, string> = {};
+    entries.forEach(function (e) {
+      if (e.key.trim()) {
+        env[e.key.trim()] = e.value;
+      }
+    });
+    save.startSave();
+    send({
+      type: "settings:update",
+      settings: { globalEnv: env },
+    });
+  }
+
+  var duplicateKeys = useMemo(function () { return findDuplicateKeys(entries); }, [entries]);
+  var hasDuplicates = duplicateKeys.size > 0;
+
+  return (
+    <div className="py-2">
+      <div className="flex flex-col gap-3 sm:gap-1.5 mb-3">
+        {entries.length === 0 && (
+          <div className="py-4 text-center text-[13px] text-base-content/30">
+            No environment variables configured.
+          </div>
+        )}
+        {entries.map(function (entry, idx) {
+          var isDupe = entry.key.trim() !== "" && duplicateKeys.has(entry.key.trim());
+          return (
+            <div
+              key={entry.id}
+              className="flex flex-col sm:grid sm:grid-cols-[1fr_1fr_auto] gap-1.5 sm:items-center"
+            >
+              <div className="relative">
+                <input
+                  type="text"
+                  value={entry.key}
+                  onChange={function (e) { handleKeyChange(entry.id, e.target.value); }}
+                  placeholder="VARIABLE_NAME"
+                  aria-label={"Variable name for row " + (idx + 1)}
+                  aria-invalid={isDupe}
+                  className={
+                    "w-full h-9 sm:h-7 px-3 bg-base-300 border rounded-xl text-base-content font-mono text-[12px] focus:border-primary focus-visible:outline-none transition-colors duration-[120ms] " +
+                    (isDupe ? "border-warning" : "border-base-content/15")
+                  }
+                />
+                {isDupe && (
+                  <div className="flex items-center gap-1 mt-0.5 text-[10px] text-warning sm:absolute sm:-bottom-3.5 sm:left-0" role="alert">
+                    <AlertTriangle size={9} />
+                    Duplicate key
+                  </div>
+                )}
+              </div>
+              <div className="flex gap-1.5 items-center">
+                <input
+                  type="text"
+                  value={entry.value}
+                  onChange={function (e) { handleValueChange(entry.id, e.target.value); }}
+                  placeholder="value"
+                  aria-label={"Value for " + (entry.key || "row " + (idx + 1))}
+                  className="w-full 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={function () { handleDelete(entry.id); }}
+                  aria-label={"Delete " + (entry.key || "row " + (idx + 1))}
+                  title="Delete"
+                  className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-error w-9 h-9 flex-shrink-0 sm:hidden focus-visible:ring-2 focus-visible:ring-primary"
+                >
+                  <X size={14} />
+                </button>
+              </div>
+              <button
+                onClick={function () { handleDelete(entry.id); }}
+                aria-label={"Delete " + (entry.key || "row " + (idx + 1))}
+                title="Delete"
+                className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-error w-7 h-7 hidden sm:flex focus-visible:ring-2 focus-visible:ring-primary"
+              >
+                <X size={12} />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+
+      <button
+        onClick={handleAddRow}
+        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 Variable
+      </button>
+
+      <SaveFooter
+        dirty={save.dirty}
+        saving={save.saving}
+        saveState={save.saveState}
+        onSave={handleSave}
+        extraStatus={hasDuplicates ? "Duplicate keys will be merged" : undefined}
+      />
+    </div>
+  );
+}

package/client/src/components/settings/GlobalMcp.tsx

@@ -0,0 +1,207 @@
+import { useState, useEffect } from "react";
+import { Plus, Pencil, Trash2 } from "lucide-react";
+import { useSaveState } from "../../hooks/useSaveState";
+import { SaveFooter } from "../ui/SaveFooter";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import type { ServerMessage, SettingsDataMessage, McpServerConfig } from "@lattice/shared";
+import {
+  type FormState,
+  emptyForm,
+  formFromConfig,
+  formToConfig,
+  typeBadge,
+  configSummary,
+  ServerForm,
+} from "./mcp-shared";
+
+export function GlobalMcp() {
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var [servers, setServers] = useState<Record<string, McpServerConfig>>({});
+  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 () {
+    function handleMessage(msg: ServerMessage) {
+      if (msg.type !== "settings:data") {
+        return;
+      }
+      var data = msg as SettingsDataMessage;
+      var mcpServers = data.mcpServers ?? {};
+
+      if (save.saving) {
+        save.confirmSave();
+      } else {
+        setServers({ ...mcpServers });
+        save.resetFromServer();
+      }
+    }
+
+    subscribe("settings:data", handleMessage);
+    send({ type: "settings:get" });
+
+    return function () {
+      unsubscribe("settings:data", handleMessage);
+    };
+  }, []);
+
+  var entries = 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();
+    send({
+      type: "settings:update",
+      settings: { mcpServers: servers } as unknown as import("@lattice/shared").SettingsUpdateMessage["settings"],
+    });
+  }
+
+  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">
+      {entries.length === 0 && !adding && (
+        <div className="py-4 text-center text-[13px] text-base-content/30 mb-3">
+          No global MCP servers configured.
+        </div>
+      )}
+
+      <div className="flex flex-col gap-2 mb-3">
+        {entries.map(function ([name, config]) {
+          if (editingName === name) {
+            return (
+              <ServerForm
+                key={name}
+                form={editForm}
+                setForm={setEditForm}
+                onSave={handleEditSave}
+                onCancel={function () { setEditingName(null); }}
+                existingNames={existingNamesForEdit}
+                idPrefix="global-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="global-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>
+  );
+}

package/client/src/components/settings/GlobalSkills.tsx

@@ -0,0 +1,125 @@
+import { useState, useEffect } from "react";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { SkillMarketplace } from "./SkillMarketplace";
+import { SkillItem, SkillActions, SkillViewModal } from "./skill-shared";
+import type { ServerMessage, SkillInfo, SettingsDataMessage } from "@lattice/shared";
+
+export function GlobalSkills() {
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var [skills, setSkills] = useState<SkillInfo[]>([]);
+  var [loaded, setLoaded] = useState(false);
+  var [viewContent, setViewContent] = useState<{ path: string; content: string } | null>(null);
+  var [deletingPath, setDeletingPath] = useState<string | null>(null);
+  var [updatingName, setUpdatingName] = useState<string | null>(null);
+
+  useEffect(function () {
+    function handleData(msg: ServerMessage) {
+      if (msg.type !== "settings:data") return;
+      var data = msg as SettingsDataMessage;
+      setSkills(data.globalSkills ?? []);
+      setLoaded(true);
+    }
+
+    function handleViewResult(msg: ServerMessage) {
+      if (msg.type !== "skills:view_result") return;
+      var data = msg as { type: "skills:view_result"; path: string; content: string };
+      setViewContent({ path: data.path, content: data.content });
+    }
+
+    function handleDeleteResult(msg: ServerMessage) {
+      if (msg.type !== "skills:delete_result") return;
+      setDeletingPath(null);
+    }
+
+    function handleInstallResult(msg: ServerMessage) {
+      if (msg.type !== "skills:install_result") return;
+      setUpdatingName(null);
+    }
+
+    subscribe("settings:data", handleData);
+    subscribe("skills:view_result", handleViewResult);
+    subscribe("skills:delete_result", handleDeleteResult);
+    subscribe("skills:install_result", handleInstallResult);
+    send({ type: "settings:get" });
+
+    return function () {
+      unsubscribe("settings:data", handleData);
+      unsubscribe("skills:view_result", handleViewResult);
+      unsubscribe("skills:delete_result", handleDeleteResult);
+      unsubscribe("skills:install_result", handleInstallResult);
+    };
+  }, []);
+
+  function handleView(skill: SkillInfo) {
+    send({ type: "skills:view", path: skill.path } as any);
+  }
+
+  function handleDelete(skill: SkillInfo) {
+    setDeletingPath(skill.path);
+    send({ type: "skills:delete", path: skill.path } as any);
+  }
+
+  function handleUpdate(skill: SkillInfo) {
+    var source = guessSource(skill);
+    if (!source) return;
+    setUpdatingName(skill.name);
+    send({ type: "skills:update", source: source } as any);
+  }
+
+  function guessSource(skill: SkillInfo): string | null {
+    var pathParts = skill.path.split("/");
+    var skillsIdx = pathParts.lastIndexOf("skills");
+    if (skillsIdx >= 0 && skillsIdx + 1 < pathParts.length) {
+      return pathParts[skillsIdx + 1];
+    }
+    return skill.name;
+  }
+
+  if (!loaded) {
+    return <div className="text-[13px] text-base-content/40 py-4">Loading...</div>;
+  }
+
+  return (
+    <div className="py-2 space-y-6">
+      <div>
+        <div className="text-[12px] font-semibold text-base-content/40 mb-2">Installed Skills</div>
+        {skills.length === 0 ? (
+          <div className="py-4 text-center text-[13px] text-base-content/30">
+            No global skills installed.
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {skills.map(function (skill) {
+              return (
+                <SkillItem
+                  key={skill.path}
+                  skill={skill}
+                  onClick={function () { handleView(skill); }}
+                  actions={
+                    <SkillActions
+                      skill={skill}
+                      onDelete={function () { handleDelete(skill); }}
+                      onUpdate={function () { handleUpdate(skill); }}
+                      isDeleting={deletingPath === skill.path}
+                      isUpdating={updatingName === skill.name}
+                    />
+                  }
+                />
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      <SkillMarketplace defaultScope="global" />
+
+      {viewContent && (
+        <SkillViewModal
+          path={viewContent.path}
+          content={viewContent.content}
+          onClose={function () { setViewContent(null); }}
+        />
+      )}
+    </div>
+  );
+}