@cryptiklemur/lattice 0.0.0

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

@@ -0,0 +1,145 @@
+import { useState } from "react";
+import { Plus, CircleDot, Circle } from "lucide-react";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { useMesh } from "../../hooks/useMesh";
+import { PairingDialog } from "../mesh/PairingDialog";
+import type { NodeInfo } from "@lattice/shared";
+
+interface NodeRowProps {
+  node: NodeInfo;
+  onUnpair: (nodeId: string) => void;
+}
+
+function NodeRow(props: NodeRowProps) {
+  var [confirming, setConfirming] = useState(false);
+
+  function handleUnpair() {
+    if (!confirming) {
+      setConfirming(true);
+      return;
+    }
+    props.onUnpair(props.node.id);
+    setConfirming(false);
+  }
+
+  return (
+    <div className="flex items-center gap-3 p-3 sm:p-2.5 px-3.5 rounded-lg border border-base-content/15 bg-base-300 mb-2">
+      {props.node.online ? (
+        <CircleDot size={10} className="text-success flex-shrink-0" aria-label="Online" />
+      ) : (
+        <Circle size={10} className="text-base-content/30 flex-shrink-0" aria-label="Offline" />
+      )}
+
+      <div className="flex-1 min-w-0">
+        <div className="text-[13px] font-medium text-base-content truncate">
+          {props.node.name}
+          {props.node.isLocal && (
+            <span className="ml-1.5 text-[10px] font-semibold text-primary uppercase tracking-[0.06em]">
+              local
+            </span>
+          )}
+        </div>
+        <div className="text-[11px] text-base-content/40 truncate">
+          {props.node.address}:{props.node.port}
+          {!props.node.online && (
+            <span className="ml-2 text-base-content/30 italic">offline</span>
+          )}
+        </div>
+      </div>
+
+      {!props.node.isLocal && (
+        <div className="flex gap-1.5 flex-shrink-0">
+          {confirming ? (
+            <>
+              <button
+                onClick={handleUnpair}
+                className="btn btn-error btn-xs"
+              >
+                Confirm
+              </button>
+              <button
+                onClick={function () { setConfirming(false); }}
+                className="btn btn-ghost btn-xs"
+              >
+                Cancel
+              </button>
+            </>
+          ) : (
+            <button
+              onClick={handleUnpair}
+              className="btn btn-ghost btn-xs border border-base-content/20 hover:btn-error hover:border-error"
+            >
+              Unpair
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function MeshStatus() {
+  var ws = useWebSocket();
+  var { nodes } = useMesh();
+  var [pairingOpen, setPairingOpen] = useState(false);
+
+  function handleUnpair(nodeId: string) {
+    ws.send({ type: "mesh:unpair", nodeId });
+  }
+
+  var localNode = nodes.find(function (n) { return n.isLocal; });
+  var remoteNodes = nodes.filter(function (n) { return !n.isLocal; });
+
+  return (
+    <div className="py-2">
+      <div className="mb-5">
+        <div className="text-[12px] font-semibold text-base-content/40 mb-2 tracking-[0.06em]">
+          This Node
+        </div>
+        {localNode ? (
+          <NodeRow node={localNode} onUnpair={handleUnpair} />
+        ) : (
+          <div className="text-[12px] text-base-content/40 italic">
+            Waiting for node info...
+          </div>
+        )}
+      </div>
+
+      <div className="mb-5">
+        <div className="flex items-center justify-between mb-2">
+          <div className="text-[12px] font-semibold text-base-content/40 tracking-[0.06em]">
+            Paired Nodes
+          </div>
+          <button
+            onClick={function () { setPairingOpen(true); }}
+            className="btn btn-primary btn-sm sm:btn-xs gap-1"
+          >
+            <Plus size={10} />
+            Pair New Node
+          </button>
+        </div>
+
+        {remoteNodes.length === 0 ? (
+          <div className="p-4 rounded-lg border border-dashed border-base-content/15 text-center text-[12px] text-base-content/40 italic">
+            No paired nodes yet.
+          </div>
+        ) : (
+          remoteNodes.map(function (node) {
+            return (
+              <NodeRow
+                key={node.id}
+                node={node}
+                onUnpair={handleUnpair}
+              />
+            );
+          })
+        )}
+      </div>
+
+      <PairingDialog
+        isOpen={pairingOpen}
+        onClose={function () { setPairingOpen(false); }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,57 @@
+import { useSidebar } from "../../hooks/useSidebar";
+import { Menu } from "lucide-react";
+import { Appearance } from "./Appearance";
+import { ClaudeSettings } from "./ClaudeSettings";
+import { Environment } from "./Environment";
+import { MeshStatus } from "./MeshStatus";
+import { GlobalMcp } from "./GlobalMcp";
+import { GlobalSkills } from "./GlobalSkills";
+import type { SettingsSection } from "../../stores/sidebar";
+
+var SECTION_CONFIG: Record<string, { title: string }> = {
+  appearance: { title: "Appearance" },
+  claude: { title: "Claude Settings" },
+  environment: { title: "Environment" },
+  mcp: { title: "MCP Servers" },
+  skills: { title: "Skills" },
+  nodes: { title: "Mesh Nodes" },
+};
+
+function renderSection(section: SettingsSection) {
+  if (section === "appearance") return <Appearance />;
+  if (section === "claude") return <ClaudeSettings />;
+  if (section === "environment") return <Environment />;
+  if (section === "mcp") return <GlobalMcp />;
+  if (section === "skills") return <GlobalSkills />;
+  if (section === "nodes") return <MeshStatus />;
+  return null;
+}
+
+export function SettingsView() {
+  var { activeView, toggleDrawer } = useSidebar();
+
+  if (activeView.type !== "settings") {
+    return null;
+  }
+
+  var section = activeView.section;
+  var config = SECTION_CONFIG[section];
+
+  return (
+    <div className="flex-1 overflow-auto px-4 sm:px-8 py-4 sm:py-6 max-w-3xl">
+      {config && (
+        <div className="mb-6 flex items-center gap-3">
+          <button
+            className="btn btn-ghost btn-sm btn-square lg:hidden"
+            aria-label="Toggle sidebar"
+            onClick={toggleDrawer}
+          >
+            <Menu size={18} />
+          </button>
+          <h1 className="text-lg font-mono font-bold text-base-content">{config.title}</h1>
+        </div>
+      )}
+      {renderSection(section)}
+    </div>
+  );
+}

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

@@ -0,0 +1,175 @@
+import { useState, useEffect, useRef } from "react";
+import { Search, Download, ChevronDown, Loader2 } from "lucide-react";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { useProjects } from "../../hooks/useProjects";
+import type { ServerMessage, MarketplaceSkill } from "@lattice/shared";
+
+interface SkillMarketplaceProps {
+  defaultScope?: "global" | "project";
+  defaultProjectSlug?: string;
+}
+
+export function SkillMarketplace({ defaultScope, defaultProjectSlug }: SkillMarketplaceProps) {
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var { projects } = useProjects();
+  var [query, setQuery] = useState("");
+  var [results, setResults] = useState<MarketplaceSkill[]>([]);
+  var [count, setCount] = useState(0);
+  var [error, setError] = useState<string | null>(null);
+  var [searching, setSearching] = useState(false);
+  var [installing, setInstalling] = useState<string | null>(null);
+  var [scopeOpen, setScopeOpen] = useState<string | null>(null);
+  var [lastInstallScope, setLastInstallScope] = useState<"global" | "project">("global");
+  var [lastInstallProjectSlug, setLastInstallProjectSlug] = useState<string | undefined>(undefined);
+  var debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(function () {
+    function handleResults(msg: ServerMessage) {
+      if (msg.type !== "skills:search_results") return;
+      var data = msg as ServerMessage & { query: string; skills: MarketplaceSkill[]; count: number; error?: string };
+      setResults(data.skills);
+      setCount(data.count);
+      setError(data.error ?? null);
+      setSearching(false);
+    }
+
+    function handleInstallResult(msg: ServerMessage) {
+      if (msg.type !== "skills:install_result") return;
+      var result = msg as { type: "skills:install_result"; success: boolean };
+      if (result.success && lastInstallScope === "project" && lastInstallProjectSlug) {
+        send({ type: "project-settings:get", projectSlug: lastInstallProjectSlug });
+      }
+      setInstalling(null);
+    }
+
+    subscribe("skills:search_results", handleResults);
+    subscribe("skills:install_result", handleInstallResult);
+
+    return function () {
+      unsubscribe("skills:search_results", handleResults);
+      unsubscribe("skills:install_result", handleInstallResult);
+    };
+  }, []);
+
+  useEffect(function () {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    var trimmed = query.trim();
+    if (!trimmed) {
+      setResults([]);
+      setCount(0);
+      setError(null);
+      setSearching(false);
+      return;
+    }
+    setSearching(true);
+    debounceRef.current = setTimeout(function () {
+      send({ type: "skills:search", query: trimmed });
+    }, 300);
+  }, [query]);
+
+  function handleInstall(skill: MarketplaceSkill, scope: "global" | "project", projectSlug?: string) {
+    setInstalling(skill.id);
+    setScopeOpen(null);
+    setLastInstallScope(scope);
+    setLastInstallProjectSlug(projectSlug);
+    send({
+      type: "skills:install",
+      source: skill.source,
+      scope: scope,
+      projectSlug: projectSlug,
+    });
+  }
+
+  function formatInstalls(n: number): string {
+    if (n >= 1000000) return (n / 1000000).toFixed(1) + "M";
+    if (n >= 1000) return (n / 1000).toFixed(1) + "K";
+    return String(n);
+  }
+
+  return (
+    <div>
+      <div className="text-[12px] font-semibold text-base-content/40 mb-2">Skill Marketplace</div>
+      <div className="relative mb-3">
+        <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-base-content/30" />
+        <input
+          type="text"
+          value={query}
+          onChange={function (e) { setQuery(e.target.value); }}
+          placeholder="Search skills.sh..."
+          className="w-full h-9 sm:h-7 pl-9 pr-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]"
+        />
+        {searching && (
+          <Loader2 size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-base-content/30 animate-spin" />
+        )}
+      </div>
+
+      {error && (
+        <div className="text-[12px] text-warning mb-2">{error}</div>
+      )}
+
+      {results.length > 0 && (
+        <div className="flex flex-col gap-1.5">
+          {results.slice(0, 15).map(function (skill) {
+            var isInstalling = installing === skill.id;
+            var isScopeOpen = scopeOpen === skill.id;
+            return (
+              <div
+                key={skill.id}
+                className="flex items-center gap-3 px-3 py-2 rounded-xl bg-base-300 border border-base-content/15"
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="text-[12px] font-semibold text-base-content truncate">{skill.name}</div>
+                  <div className="text-[11px] font-mono text-base-content/30 truncate">{skill.source}</div>
+                </div>
+                <span className="text-[10px] text-base-content/30 font-mono flex-shrink-0">
+                  {formatInstalls(skill.installs)}
+                </span>
+                <div className="relative flex-shrink-0">
+                  {isInstalling ? (
+                    <Loader2 size={14} className="text-primary animate-spin" />
+                  ) : (
+                    <button
+                      onClick={function () { setScopeOpen(isScopeOpen ? null : skill.id); }}
+                      className="btn btn-ghost btn-xs text-[11px] text-base-content/50 hover:text-primary gap-1"
+                    >
+                      <Download size={12} />
+                      Install
+                      <ChevronDown size={10} />
+                    </button>
+                  )}
+                  {isScopeOpen && (
+                    <div className="absolute right-0 top-full mt-1 z-50 bg-base-200 border border-base-content/15 rounded-xl shadow-lg py-1 min-w-[160px]">
+                      <button
+                        onClick={function () { handleInstall(skill, "global"); }}
+                        className="w-full text-left px-3 py-1.5 text-[12px] text-base-content/60 hover:bg-base-content/5 hover:text-base-content"
+                      >
+                        Install globally
+                      </button>
+                      {projects.map(function (p) {
+                        return (
+                          <button
+                            key={p.slug}
+                            onClick={function () { handleInstall(skill, "project", p.slug); }}
+                            className="w-full text-left px-3 py-1.5 text-[12px] text-base-content/60 hover:bg-base-content/5 hover:text-base-content truncate"
+                          >
+                            Install to {p.title}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {query.trim() && !searching && results.length === 0 && !error && (
+        <div className="py-4 text-center text-[13px] text-base-content/30">
+          No skills found.
+        </div>
+      )}
+    </div>
+  );
+}

package/client/src/components/settings/mcp-shared.tsx

@@ -0,0 +1,194 @@
+import type { McpServerConfig } from "@lattice/shared";
+
+export type ServerType = "stdio" | "http" | "sse";
+
+export interface FormState {
+  name: string;
+  serverType: ServerType;
+  command: string;
+  args: string;
+  env: string;
+  url: string;
+}
+
+export function emptyForm(): FormState {
+  return { name: "", serverType: "stdio", command: "", args: "", env: "", url: "" };
+}
+
+export function formFromConfig(name: string, config: McpServerConfig): FormState {
+  var serverType: ServerType = config.type === "http" ? "http" : config.type === "sse" ? "sse" : "stdio";
+  if (serverType === "stdio" && "command" in config) {
+    return {
+      name,
+      serverType,
+      command: config.command,
+      args: (config.args ?? []).join(", "),
+      env: Object.entries(config.env ?? {}).map(function ([k, v]) { return k + "=" + v; }).join("\n"),
+      url: "",
+    };
+  }
+  if ("url" in config) {
+    return { name, serverType, command: "", args: "", env: "", url: config.url };
+  }
+  return { ...emptyForm(), name, serverType };
+}
+
+export function formToConfig(form: FormState): McpServerConfig {
+  if (form.serverType === "stdio") {
+    var argsArr = form.args.trim()
+      ? form.args.split(",").map(function (s) { return s.trim(); }).filter(Boolean)
+      : [];
+    var envObj: Record<string, string> = {};
+    form.env.split("\n").forEach(function (line) {
+      var idx = line.indexOf("=");
+      if (idx > 0) {
+        envObj[line.slice(0, idx).trim()] = line.slice(idx + 1).trim();
+      }
+    });
+    var result: McpServerConfig = { type: "stdio", command: form.command.trim(), args: argsArr };
+    if (Object.keys(envObj).length > 0) {
+      (result as { env?: Record<string, string> }).env = envObj;
+    }
+    return result;
+  }
+  return { type: form.serverType, url: form.url.trim() };
+}
+
+export function typeBadge(config: McpServerConfig) {
+  var t = config.type === "http" ? "http" : config.type === "sse" ? "sse" : "stdio";
+  return (
+    <span className="px-1.5 py-0.5 rounded-lg text-[10px] uppercase tracking-wider font-mono bg-base-content/10 text-base-content/40 flex-shrink-0">
+      {t}
+    </span>
+  );
+}
+
+export function configSummary(config: McpServerConfig) {
+  if (config.type === "http" || config.type === "sse") {
+    return <div className="font-mono text-[11px] text-base-content/40 truncate">{config.url}</div>;
+  }
+  var cmd = config.command + ((config.args?.length ?? 0) > 0 ? " " + config.args!.join(" ") : "");
+  return <div className="font-mono text-[11px] text-base-content/40 truncate">{cmd}</div>;
+}
+
+export function ServerForm({
+  form,
+  setForm,
+  onSave,
+  onCancel,
+  existingNames,
+  idPrefix,
+}: {
+  form: FormState;
+  setForm: (f: FormState) => void;
+  onSave: () => void;
+  onCancel: () => void;
+  existingNames: Set<string>;
+  idPrefix: string;
+}) {
+  var inputClass = "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]";
+  var nameConflict = form.name.trim() !== "" && existingNames.has(form.name.trim());
+  var canSave = form.name.trim() !== "" && !nameConflict &&
+    (form.serverType === "stdio" ? form.command.trim() !== "" : form.url.trim() !== "");
+
+  return (
+    <div className="border border-base-content/15 rounded-xl bg-base-300/40 p-4 flex flex-col gap-3">
+      <div>
+        <label htmlFor={idPrefix + "-name"} className="block text-[11px] text-base-content/40 mb-1">Server Name</label>
+        <input
+          id={idPrefix + "-name"}
+          type="text"
+          value={form.name}
+          onChange={function (e) { setForm({ ...form, name: e.target.value }); }}
+          placeholder="my-server"
+          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] " + (nameConflict ? "border-warning" : "border-base-content/15")}
+        />
+        {nameConflict && (
+          <div className="text-[10px] text-warning mt-0.5" role="alert">Name already in use</div>
+        )}
+      </div>
+
+      <fieldset>
+        <legend className="block text-[11px] text-base-content/40 mb-1.5">Type</legend>
+        <div className="flex gap-3">
+          {(["stdio", "http", "sse"] as ServerType[]).map(function (t) {
+            return (
+              <label key={t} className="flex items-center gap-1.5 cursor-pointer">
+                <input
+                  type="radio"
+                  name={idPrefix + "-type"}
+                  value={t}
+                  checked={form.serverType === t}
+                  onChange={function () { setForm({ ...form, serverType: t }); }}
+                  className="radio radio-xs radio-primary"
+                />
+                <span className="text-[12px] font-mono text-base-content uppercase">{t}</span>
+              </label>
+            );
+          })}
+        </div>
+      </fieldset>
+
+      {form.serverType === "stdio" && (
+        <>
+          <div>
+            <label htmlFor={idPrefix + "-command"} className="block text-[11px] text-base-content/40 mb-1">Command</label>
+            <input
+              id={idPrefix + "-command"}
+              type="text"
+              value={form.command}
+              onChange={function (e) { setForm({ ...form, command: e.target.value }); }}
+              placeholder="npx"
+              className={inputClass}
+            />
+          </div>
+          <div>
+            <label htmlFor={idPrefix + "-args"} className="block text-[11px] text-base-content/40 mb-1">Args (comma-separated)</label>
+            <input
+              id={idPrefix + "-args"}
+              type="text"
+              value={form.args}
+              onChange={function (e) { setForm({ ...form, args: e.target.value }); }}
+              placeholder="-y, @modelcontextprotocol/server-filesystem"
+              className={inputClass}
+            />
+          </div>
+          <div>
+            <label htmlFor={idPrefix + "-env"} className="block text-[11px] text-base-content/40 mb-1">Environment (KEY=value, one per line)</label>
+            <textarea
+              id={idPrefix + "-env"}
+              value={form.env}
+              onChange={function (e) { setForm({ ...form, env: e.target.value }); }}
+              placeholder={"API_KEY=abc123\nDEBUG=true"}
+              rows={3}
+              className="w-full px-3 py-2 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] resize-y"
+            />
+          </div>
+        </>
+      )}
+
+      {(form.serverType === "http" || form.serverType === "sse") && (
+        <div>
+          <label htmlFor={idPrefix + "-url"} className="block text-[11px] text-base-content/40 mb-1">URL</label>
+          <input
+            id={idPrefix + "-url"}
+            type="text"
+            value={form.url}
+            onChange={function (e) { setForm({ ...form, url: e.target.value }); }}
+            placeholder="http://localhost:3000/mcp"
+            className={inputClass}
+          />
+        </div>
+      )}
+
+      <div className="flex items-center gap-2 justify-end pt-1">
+        <button onClick={onCancel} className="btn btn-ghost btn-sm text-[12px]">
+          Cancel
+        </button>
+        <button onClick={onSave} disabled={!canSave} className={"btn btn-primary btn-sm text-[12px]" + (!canSave ? " opacity-50 cursor-not-allowed" : "")}>
+          Save
+        </button>
+      </div>
+    </div>
+  );
+}