@cryptiklemur/lattice 1.2.0 → 1.4.0

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

@@ -0,0 +1,123 @@
+import { useEffect, useRef, useState } 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 IDE_OPTIONS = [
+  { id: "vscode", label: "VS Code" },
+  { id: "vscode-insiders", label: "VS Code Insiders" },
+  { id: "cursor", label: "Cursor" },
+  { id: "webstorm", label: "WebStorm" },
+  { id: "intellij", label: "IntelliJ IDEA" },
+  { id: "pycharm", label: "PyCharm" },
+  { id: "goland", label: "GoLand" },
+  { id: "notepad++", label: "Notepad++" },
+  { id: "sublime", label: "Sublime Text" },
+  { id: "custom", label: "Custom" },
+];
+
+export function Editor() {
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var [ideType, setIdeType] = useState("vscode");
+  var [customCommand, setCustomCommand] = useState("");
+  var save = useSaveState();
+  var saveRef = useRef(save);
+  saveRef.current = save;
+
+  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 editor = cfg.editor as { type?: string; customCommand?: string } | undefined;
+
+      var newType = editor?.type ?? "vscode";
+      var newCustomCommand = editor?.customCommand ?? "";
+
+      if (saveRef.current.saving) {
+        saveRef.current.confirmSave();
+      } else {
+        setIdeType(newType);
+        setCustomCommand(newCustomCommand);
+        saveRef.current.resetFromServer();
+      }
+    }
+
+    subscribe("settings:data", handleMessage);
+    send({ type: "settings:get" });
+
+    return function () {
+      unsubscribe("settings:data", handleMessage);
+    };
+  }, []);
+
+  function handleTypeChange(value: string) {
+    setIdeType(value);
+    save.markDirty();
+  }
+
+  function handleCustomCommandChange(value: string) {
+    setCustomCommand(value);
+    save.markDirty();
+  }
+
+  function handleSave() {
+    save.startSave();
+    var editorSettings: { type: string; customCommand?: string } = { type: ideType };
+    if (ideType === "custom") {
+      editorSettings.customCommand = customCommand;
+    }
+    var updateMsg: SettingsUpdateMessage = {
+      type: "settings:update",
+      settings: { editor: editorSettings } as SettingsUpdateMessage["settings"],
+    };
+    send(updateMsg);
+  }
+
+  return (
+    <div className="py-2">
+      <div className="mb-5">
+        <label htmlFor="editor-ide-type" className="block text-[12px] font-semibold text-base-content/40 mb-1">IDE</label>
+        <p className="text-[11px] text-base-content/30 mb-2">Choose your preferred editor for opening files from Lattice.</p>
+        <p className="text-[11px] text-base-content/20 mb-2">Files open via your editor's URL scheme handler.</p>
+        <select
+          id="editor-ide-type"
+          value={ideType}
+          onChange={function (e) { handleTypeChange(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]"
+        >
+          {IDE_OPTIONS.map(function (opt) {
+            return (
+              <option key={opt.id} value={opt.id} className="bg-base-300">
+                {opt.label}
+              </option>
+            );
+          })}
+        </select>
+      </div>
+
+      {ideType === "custom" && (
+        <div className="mb-5">
+          <label htmlFor="editor-custom-command" className="block text-[12px] font-semibold text-base-content/40 mb-1">Shell command</label>
+          <p className="text-[11px] text-base-content/30 mb-2">Use {"{file}"} for the file path and {"{line}"} for the line number.</p>
+          <input
+            id="editor-custom-command"
+            type="text"
+            value={customCommand}
+            onChange={function (e) { handleCustomCommandChange(e.target.value); }}
+            placeholder="vim +{line} {file}"
+            className="w-full h-9 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content font-mono text-[13px] 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/GlobalMcp.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Plus, Pencil, Trash2 } from "lucide-react";
+import { Plus, Pencil, Trash2, ExternalLink } from "lucide-react";
 import { useSaveState } from "../../hooks/useSaveState";
 import { SaveFooter } from "../ui/SaveFooter";
 import { useWebSocket } from "../../hooks/useWebSocket";
@@ -110,6 +110,15 @@ export function GlobalMcp() {
 
   return (
     <div className="py-2">
+      <a
+        href="https://docs.anthropic.com/en/docs/claude-code/mcp-servers"
+        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>
       {entries.length === 0 && !adding && (
         <div className="py-4 text-center text-[13px] text-base-content/30 mb-3">
           No global MCP servers configured.

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

@@ -0,0 +1,19 @@
+import { ExternalLink } from "lucide-react";
+import { ProjectMemory } from "../project-settings/ProjectMemory";
+
+export function GlobalMemory() {
+  return (
+    <div>
+      <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>
+      <ProjectMemory projectSlug="__global__" />
+    </div>
+  );
+}

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

@@ -0,0 +1,149 @@
+import { useState, useEffect } from "react";
+import { ChevronDown, ChevronRight, ExternalLink } from "lucide-react";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import type { ServerMessage, SettingsDataMessage } from "@lattice/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/client/src/components/settings/GlobalSkills.tsx

@@ -1,4 +1,5 @@
 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";
@@ -81,6 +82,15 @@ export function GlobalSkills() {
 
   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 ? (

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

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { useNotificationPreference } from "../../hooks/useNotifications";
+
+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 [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>
+
+      <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/client/src/components/settings/SettingsView.tsx

@@ -6,24 +6,36 @@ 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 { Notifications } from "./Notifications";
 import type { SettingsSection } from "../../stores/sidebar";
 
 var SECTION_CONFIG: Record<string, { title: string }> = {
   appearance: { title: "Appearance" },
+  notifications: { title: "Notifications" },
   claude: { title: "Claude Settings" },
   environment: { title: "Environment" },
   mcp: { title: "MCP Servers" },
   skills: { title: "Skills" },
   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 === "environment") return <Environment />;
   if (section === "mcp") return <GlobalMcp />;
   if (section === "skills") return <GlobalSkills />;
   if (section === "nodes") return <MeshStatus />;
+  if (section === "editor") return <Editor />;
+  if (section === "rules") return <GlobalRules />;
+  if (section === "memory") return <GlobalMemory />;
   return null;
 }
 

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

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Trash2, RefreshCw, X, Loader2, FileText } from "lucide-react";
 import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import type { SkillInfo } from "@lattice/shared";
 
 function parseFrontmatter(content: string): { meta: Record<string, string>; body: string } {
@@ -163,7 +164,7 @@ export function SkillViewModal({ path, content, onClose }: { path: string; conte
 
           <div className="px-5 py-4">
             <div className="prose prose-sm max-w-none prose-headings:text-base-content prose-headings:font-mono prose-p:text-base-content/70 prose-strong:text-base-content prose-code:text-base-content/60 prose-code:bg-base-100/50 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-[11px] prose-pre:bg-base-100 prose-pre:text-base-content/70 prose-pre:text-[11px] prose-a:text-primary prose-li:text-base-content/70 prose-li:marker:text-base-content/30 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
-              <Markdown>{parsed.body}</Markdown>
+              <Markdown remarkPlugins={[remarkGfm]}>{parsed.body}</Markdown>
             </div>
           </div>
         </div>

package/client/src/components/setup/SetupWizard.tsx

@@ -95,7 +95,7 @@ export function SetupWizard(props: SetupWizardProps) {
   }
 
   function handleDone() {
-    localStorage.setItem("lattice-setup-complete", "1");
+    ws.send({ type: "settings:update", settings: { setupComplete: true } });
     props.onComplete();
   }
 

package/client/src/components/sidebar/AddProjectModal.tsx

@@ -281,7 +281,7 @@ export function AddProjectModal({ isOpen, onClose }: AddProjectModalProps) {
   return (
     <div className="fixed inset-0 z-[9999] flex items-center justify-center">
       <div className="absolute inset-0 bg-black/50" onClick={onClose} />
-      <div className="relative bg-base-200 border border-base-content/15 rounded-2xl shadow-2xl w-full max-w-md mx-4 overflow-hidden">
+      <div className="relative bg-base-200 border border-base-content/15 rounded-2xl shadow-2xl w-full max-w-3xl mx-4 overflow-hidden">
         <div className="flex items-center justify-between px-5 py-4 border-b border-base-content/15">
           <h2 className="text-[15px] font-mono font-bold text-base-content">Add Project</h2>
           <button
@@ -357,11 +357,12 @@ export function AddProjectModal({ isOpen, onClose }: AddProjectModalProps) {
             {!path.trim() && suggestions.length > 0 && !dropdownOpen && (
               <div className="mt-2">
                 <div className="text-[11px] font-semibold text-base-content/30 mb-1.5">Projects Claude has worked in</div>
-                <div className="flex flex-col gap-1 max-h-32 overflow-y-auto">
+                <div className="flex flex-col gap-1 max-h-48 overflow-y-auto">
                   {suggestions.map(function (s) {
                     return (
                       <button
                         key={s.path}
+                        title={s.path}
                         onClick={function () {
                           setPath(s.path + "/");
                           if (!titleManuallySet) setTitle(s.name);

package/client/src/components/sidebar/NodeSettingsModal.tsx

@@ -25,6 +25,7 @@ export function NodeSettingsModal({ isOpen, onClose }: NodeSettingsModalProps) {
   var [tls, setTls] = useState(false);
   var [debug, setDebug] = useState(false);
   var [copied, setCopied] = useState(false);
+  var [wsl, setWsl] = useState<boolean | "auto">("auto");
   var copyTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(function () {
@@ -43,6 +44,7 @@ export function NodeSettingsModal({ isOpen, onClose }: NodeSettingsModalProps) {
         setPort(cfg.port);
         setTls(cfg.tls);
         setDebug(cfg.debug);
+        setWsl(cfg.wsl ?? "auto");
         save.resetFromServer();
       }
     }
@@ -65,7 +67,7 @@ export function NodeSettingsModal({ isOpen, onClose }: NodeSettingsModalProps) {
     save.startSave();
     send({
       type: "settings:update",
-      settings: { name, port, tls, debug },
+      settings: { name, port, tls, debug, wsl },
     } as any);
   }
 
@@ -169,6 +171,26 @@ export function NodeSettingsModal({ isOpen, onClose }: NodeSettingsModalProps) {
               aria-label="Enable debug mode"
             />
           </div>
+
+          <div>
+            <div className="text-[12px] font-semibold text-base-content/40 mb-1.5">WSL Mode</div>
+            <div className="text-[11px] text-base-content/30 mb-2">Convert file paths for Windows editors when running under WSL</div>
+            <select
+              value={String(wsl)}
+              onChange={function (e) {
+                var val = e.target.value;
+                if (val === "true") { setWsl(true); }
+                else if (val === "false") { setWsl(false); }
+                else { setWsl("auto"); }
+                save.markDirty();
+              }}
+              className={inputClass}
+            >
+              <option value="auto">Auto-detect</option>
+              <option value="true">Enabled</option>
+              <option value="false">Disabled</option>
+            </select>
+          </div>
         </div>
 
         <div className="px-5 py-3 border-t border-base-content/15">