@cryptiklemur/lattice 4.0.2 → 5.0.0

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

@@ -1,149 +0,0 @@
-import { useState, useEffect } from "react";
-import { ChevronDown, ChevronRight, ExternalLink } from "lucide-react";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import type { ServerMessage, SettingsDataMessage } from "#shared";
-
-interface RuleEntry {
-  filename: string;
-  content: string;
-}
-
-export function GlobalRules() {
-  var { send, subscribe, unsubscribe } = useWebSocket();
-  var [rules, setRules] = useState<RuleEntry[]>([]);
-  var [claudeMd, setClaudeMd] = useState("");
-  var [expanded, setExpanded] = useState<Set<number>>(new Set());
-  var [claudeMdExpanded, setClaudeMdExpanded] = useState(false);
-
-  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>;
-      setClaudeMd(cfg.claudeMd ? String(cfg.claudeMd) : "");
-      setRules(data.globalRules ?? []);
-    }
-
-    subscribe("settings:data", handleMessage);
-    send({ type: "settings:get" });
-
-    return function () {
-      unsubscribe("settings:data", handleMessage);
-    };
-  }, []);
-
-  function toggle(idx: number) {
-    setExpanded(function (prev) {
-      var next = new Set(prev);
-      if (next.has(idx)) {
-        next.delete(idx);
-      } else {
-        next.add(idx);
-      }
-      return next;
-    });
-  }
-
-  function preview(content: string): string {
-    var trimmed = content.trim();
-    if (trimmed.length <= 80) return trimmed;
-    return trimmed.slice(0, 80) + "...";
-  }
-
-  return (
-    <div className="py-2">
-      <a
-        href="https://docs.anthropic.com/en/docs/claude-code/memory"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-[11px] text-base-content/30 hover:text-primary/70 flex items-center gap-1 mb-4 transition-colors"
-      >
-        <ExternalLink size={11} />
-        Claude Code docs
-      </a>
-      <div className="mb-6">
-        <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
-          Global CLAUDE.md
-        </h2>
-        {!claudeMd && (
-          <div className="py-4 text-center text-[13px] text-base-content/30">
-            No global CLAUDE.md found.
-          </div>
-        )}
-        {claudeMd && (
-          <div className="border border-base-content/10 rounded-xl overflow-hidden">
-            <button
-              onClick={function () { setClaudeMdExpanded(!claudeMdExpanded); }}
-              className="w-full flex items-center gap-2 px-3 py-2 bg-base-300/50 hover:bg-base-300/70 transition-colors duration-[120ms] cursor-pointer text-left"
-            >
-              {claudeMdExpanded
-                ? <ChevronDown size={12} className="text-base-content/40 flex-shrink-0" />
-                : <ChevronRight size={12} className="text-base-content/40 flex-shrink-0" />
-              }
-              <span className="font-mono text-[12px] text-base-content/40 flex-1 truncate">
-                ~/.claude/CLAUDE.md
-              </span>
-            </button>
-            {!claudeMdExpanded && (
-              <div className="px-3 py-1.5 text-[11px] text-base-content/30 font-mono truncate">
-                {preview(claudeMd)}
-              </div>
-            )}
-            {claudeMdExpanded && (
-              <pre className="px-3 py-2 text-[12px] text-base-content/40 font-mono whitespace-pre-wrap break-words bg-base-300/30 max-h-[300px] overflow-auto">
-                {claudeMd}
-              </pre>
-            )}
-          </div>
-        )}
-      </div>
-
-      <div>
-        <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
-          Global Rules
-        </h2>
-        <p className="text-[11px] text-base-content/30 mb-3">
-          Rules from ~/.claude/rules/ — read-only.
-        </p>
-        {rules.length === 0 && (
-          <div className="py-4 text-center text-[13px] text-base-content/30">
-            No global rules found.
-          </div>
-        )}
-        {rules.length > 0 && (
-          <div className="flex flex-col gap-1.5">
-            {rules.map(function (rule, idx) {
-              var isExpanded = expanded.has(idx);
-              return (
-                <div key={rule.filename + "-" + idx} className="border border-base-content/10 rounded-xl overflow-hidden">
-                  <button
-                    onClick={function () { toggle(idx); }}
-                    className="w-full flex items-center gap-2 px-3 py-2 bg-base-300/50 hover:bg-base-300/70 transition-colors duration-[120ms] cursor-pointer text-left"
-                  >
-                    {isExpanded
-                      ? <ChevronDown size={12} className="text-base-content/40 flex-shrink-0" />
-                      : <ChevronRight size={12} className="text-base-content/40 flex-shrink-0" />
-                    }
-                    <span className="font-mono text-[12px] text-base-content/40 flex-1 truncate">
-                      {rule.filename}
-                    </span>
-                  </button>
-                  {!isExpanded && (
-                    <div className="px-3 py-1.5 text-[11px] text-base-content/30 font-mono truncate">
-                      {preview(rule.content)}
-                    </div>
-                  )}
-                  {isExpanded && (
-                    <pre className="px-3 py-2 text-[12px] text-base-content/40 font-mono whitespace-pre-wrap break-words bg-base-300/30 max-h-[300px] overflow-auto">
-                      {rule.content}
-                    </pre>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,140 +0,0 @@
-import { useState, useEffect } from "react";
-import { ExternalLink } from "lucide-react";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import { SkillMarketplace } from "./SkillMarketplace";
-import { SkillItem, SkillActions, SkillViewModal } from "./skill-shared";
-import type { ServerMessage, SkillInfo, SettingsDataMessage } from "#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="py-4 space-y-3 animate-pulse">
-        {[0, 1, 2].map(function (i) { return <div key={i} className="bg-base-content/[0.03] rounded-xl h-16" />; })}
-      </div>
-    );
-  }
-
-  return (
-    <div className="py-2 space-y-6">
-      <a
-        href="https://docs.anthropic.com/en/docs/claude-code/slash-commands"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-[11px] text-base-content/30 hover:text-primary/70 flex items-center gap-1 mb-4 transition-colors"
-      >
-        <ExternalLink size={11} />
-        Claude Code docs
-      </a>
-      <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">
-            <div className="text-[12px] text-base-content/30 mb-0.5">No skills installed</div>
-            <div className="text-[11px] text-base-content/20">Search the marketplace below to add skills.</div>
-          </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>
-  );
-}

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

@@ -1,183 +0,0 @@
-import { useState, useCallback, memo } from "react";
-import { Plus, CircleDot, Circle, RefreshCw, Loader2 } from "lucide-react";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import { useMesh } from "../../hooks/useMesh";
-import { PairingDialog } from "../mesh/PairingDialog";
-import type { NodeInfo } from "#shared";
-
-interface NodeRowProps {
-  node: NodeInfo;
-  onUnpair: (nodeId: string) => void;
-  onReconnect: (nodeId: string) => void;
-}
-
-function NodeRow(props: NodeRowProps) {
-  var [confirming, setConfirming] = useState(false);
-  var [reconnecting, setReconnecting] = 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.addresses && props.node.addresses.length > 0
-            ? props.node.addresses
-            : [props.node.address + (props.node.port ? ":" + props.node.port : "")]
-          ).map(function (addr, i) {
-            return (
-              <span key={addr}>
-                {i > 0 && <span className="text-base-content/20 mx-1">/</span>}
-                {addr}
-              </span>
-            );
-          })}
-        </div>
-      </div>
-
-      {!props.node.isLocal && (
-        <div className="flex gap-1.5 flex-shrink-0">
-          {!props.node.online && (
-            reconnecting ? (
-              <span className="flex items-center gap-1 text-[11px] text-base-content/40">
-                <Loader2 size={10} className="animate-spin" />
-                Connecting...
-              </span>
-            ) : (
-              <button
-                onClick={function () {
-                  setReconnecting(true);
-                  props.onReconnect(props.node.id);
-                  setTimeout(function () { setReconnecting(false); }, 5000);
-                }}
-                className="btn btn-ghost btn-xs border border-base-content/20 hover:btn-info hover:border-info gap-1"
-                title="Attempt to reconnect"
-              >
-                <RefreshCw size={10} />
-                Reconnect
-              </button>
-            )
-          )}
-          {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);
-
-  var handleClosePairing = useCallback(function () { setPairingOpen(false); }, []);
-
-  function handleUnpair(nodeId: string) {
-    ws.send({ type: "mesh:unpair", nodeId });
-  }
-
-  function handleReconnect(nodeId: string) {
-    ws.send({ type: "mesh:reconnect", nodeId } as any);
-  }
-
-  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} onReconnect={handleReconnect} />
-        ) : (
-          <div className="text-[12px] text-base-content/30">
-            Loading node information...
-          </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/10 text-center">
-            <div className="text-[12px] text-base-content/30 mb-0.5">No paired nodes</div>
-            <div className="text-[11px] text-base-content/20">Connect another machine to view its projects and sessions here.</div>
-          </div>
-        ) : (
-          remoteNodes.map(function (node) {
-            return (
-              <NodeRow
-                key={node.id}
-                node={node}
-                onUnpair={handleUnpair}
-                onReconnect={handleReconnect}
-              />
-            );
-          })
-        )}
-      </div>
-
-      <PairingDialog
-        isOpen={pairingOpen}
-        onClose={handleClosePairing}
-      />
-    </div>
-  );
-}

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

@@ -1,123 +0,0 @@
-import { useState } from "react";
-import { useNotificationPreference } from "../../hooks/useNotifications";
-import { usePushNotifications } from "../../hooks/usePushNotifications";
-
-var NOTIFICATION_TYPES = [
-  { key: "responses", label: "Claude responses", description: "When Claude finishes a response" },
-  { key: "mesh", label: "Mesh node changes", description: "When nodes come online or go offline" },
-  { key: "connection", label: "Connection events", description: "WebSocket connect and disconnect" },
-] as const;
-
-function loadTypePrefs(): Record<string, boolean> {
-  try {
-    var stored = localStorage.getItem("lattice-notification-types");
-    if (stored) return JSON.parse(stored);
-  } catch {}
-  return { responses: true, mesh: true, connection: true };
-}
-
-function saveTypePrefs(prefs: Record<string, boolean>): void {
-  localStorage.setItem("lattice-notification-types", JSON.stringify(prefs));
-}
-
-export function Notifications() {
-  var notifPref = useNotificationPreference();
-  var push = usePushNotifications();
-  var [typePrefs, setTypePrefs] = useState<Record<string, boolean>>(loadTypePrefs);
-
-  function toggleType(key: string) {
-    setTypePrefs(function (prev) {
-      var next = { ...prev, [key]: !prev[key] };
-      saveTypePrefs(next);
-      return next;
-    });
-  }
-
-  return (
-    <div className="py-2 space-y-6">
-      <div>
-        <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
-          Browser Notifications
-        </h2>
-        <div className="flex items-center justify-between py-2 px-3 bg-base-300 border border-base-content/15 rounded-xl">
-          <div>
-            <div className="text-[13px] text-base-content">Enable notifications</div>
-            <div className="text-[11px] text-base-content/30 mt-0.5">
-              {notifPref.permission === "denied"
-                ? "Blocked by browser — update in browser settings"
-                : "Get notified about events in Lattice"}
-            </div>
-          </div>
-          <input
-            type="checkbox"
-            className="toggle toggle-sm toggle-primary"
-            checked={notifPref.enabled}
-            onChange={notifPref.toggle}
-            disabled={notifPref.permission === "denied"}
-          />
-        </div>
-      </div>
-
-      {push.status !== "unsupported" && (
-        <div>
-          <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
-            Push Notifications
-          </h2>
-          <div className="flex items-center justify-between py-2 px-3 bg-base-300 border border-base-content/15 rounded-xl">
-            <div>
-              <div className="text-[13px] text-base-content">Enable push notifications</div>
-              <div className="text-[11px] text-base-content/30 mt-0.5">
-                {push.status === "denied"
-                  ? "Blocked by browser — update in browser settings"
-                  : push.status === "subscribed"
-                    ? "Receiving push notifications even when the tab is closed"
-                    : "Get notified even when Lattice is not open"}
-              </div>
-            </div>
-            <input
-              type="checkbox"
-              className="toggle toggle-sm toggle-primary"
-              checked={push.status === "subscribed"}
-              onChange={function () {
-                if (push.status === "subscribed") {
-                  void push.unsubscribe();
-                } else {
-                  void push.subscribe();
-                }
-              }}
-              disabled={push.status === "denied"}
-            />
-          </div>
-        </div>
-      )}
-
-      <div>
-        <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
-          Notification Types
-        </h2>
-        <div className="flex flex-col gap-2">
-          {NOTIFICATION_TYPES.map(function (nt) {
-            return (
-              <div
-                key={nt.key}
-                className="flex items-center justify-between py-2 px-3 bg-base-300 border border-base-content/15 rounded-xl"
-              >
-                <div>
-                  <div className="text-[13px] text-base-content">{nt.label}</div>
-                  <div className="text-[11px] text-base-content/30 mt-0.5">{nt.description}</div>
-                </div>
-                <input
-                  type="checkbox"
-                  className="toggle toggle-sm toggle-primary"
-                  checked={typePrefs[nt.key] !== false}
-                  onChange={function () { toggleType(nt.key); }}
-                  disabled={!notifPref.enabled}
-                />
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,75 +0,0 @@
-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 { Editor } from "./Editor";
-import { GlobalRules } from "./GlobalRules";
-import { GlobalMemory } from "./GlobalMemory";
-import { GlobalPlugins } from "./GlobalPlugins";
-import { Notifications } from "./Notifications";
-import { BudgetSettings } from "./BudgetSettings";
-import type { SettingsSection } from "../../stores/sidebar";
-
-var SECTION_CONFIG: Record<string, { title: string }> = {
-  appearance: { title: "Appearance" },
-  notifications: { title: "Notifications" },
-  claude: { title: "Claude" },
-  budget: { title: "Budget" },
-  environment: { title: "Environment" },
-  mcp: { title: "MCP Servers" },
-  skills: { title: "Skills" },
-  plugins: { title: "Plugins" },
-  nodes: { title: "Mesh Nodes" },
-  editor: { title: "Editor" },
-  rules: { title: "Rules" },
-  memory: { title: "Memory" },
-};
-
-function renderSection(section: SettingsSection) {
-  if (section === "appearance") return <Appearance />;
-  if (section === "notifications") return <Notifications />;
-  if (section === "claude") return <ClaudeSettings />;
-  if (section === "budget") return <BudgetSettings />;
-  if (section === "environment") return <Environment />;
-  if (section === "mcp") return <GlobalMcp />;
-  if (section === "skills") return <GlobalSkills />;
-  if (section === "plugins") return <GlobalPlugins />;
-  if (section === "nodes") return <MeshStatus />;
-  if (section === "editor") return <Editor />;
-  if (section === "rules") return <GlobalRules />;
-  if (section === "memory") return <GlobalMemory />;
-  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 (
-    <section aria-label="Settings" 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)}
-    </section>
-  );
-}