@cryptiklemur/lattice 0.0.0 → 1.1.0

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

@@ -1,145 +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>
-  );
-}
+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

@@ -1,57 +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>
-  );
-}
+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>
+  );
+}