@cryptiklemur/lattice 0.0.0

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

@@ -0,0 +1,180 @@
+import { useState, useEffect, useRef } from "react";
+import { X, Copy, Check } from "lucide-react";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { useMesh } from "../../hooks/useMesh";
+import { useSaveState } from "../../hooks/useSaveState";
+import { SaveFooter } from "../ui/SaveFooter";
+import type { ServerMessage, SettingsDataMessage, LatticeConfig } from "@lattice/shared";
+
+interface NodeSettingsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function NodeSettingsModal({ isOpen, onClose }: NodeSettingsModalProps) {
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var { nodes } = useMesh();
+  var save = useSaveState();
+
+  var localNode = nodes.find(function (n) { return n.isLocal; });
+  var nodeId = localNode ? localNode.id : "";
+
+  var [config, setConfig] = useState<LatticeConfig | null>(null);
+  var [name, setName] = useState("");
+  var [port, setPort] = useState(7654);
+  var [tls, setTls] = useState(false);
+  var [debug, setDebug] = useState(false);
+  var [copied, setCopied] = useState(false);
+  var copyTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(function () {
+    if (!isOpen) return;
+
+    function handleData(msg: ServerMessage) {
+      if (msg.type !== "settings:data") return;
+      var data = msg as SettingsDataMessage;
+      var cfg = data.config;
+      setConfig(cfg);
+
+      if (save.saving) {
+        save.confirmSave();
+      } else {
+        setName(cfg.name);
+        setPort(cfg.port);
+        setTls(cfg.tls);
+        setDebug(cfg.debug);
+        save.resetFromServer();
+      }
+    }
+
+    subscribe("settings:data", handleData);
+    send({ type: "settings:get" });
+
+    return function () {
+      unsubscribe("settings:data", handleData);
+    };
+  }, [isOpen]);
+
+  useEffect(function () {
+    return function () {
+      if (copyTimeout.current) clearTimeout(copyTimeout.current);
+    };
+  }, []);
+
+  function handleSave() {
+    save.startSave();
+    send({
+      type: "settings:update",
+      settings: { name, port, tls, debug },
+    } as any);
+  }
+
+  function handleCopyId() {
+    if (!nodeId) return;
+    navigator.clipboard.writeText(nodeId);
+    setCopied(true);
+    if (copyTimeout.current) clearTimeout(copyTimeout.current);
+    copyTimeout.current = setTimeout(function () { setCopied(false); }, 2000);
+  }
+
+  if (!isOpen) return null;
+
+  var inputClass = "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]";
+
+  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="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">Node Settings</h2>
+          <button
+            onClick={onClose}
+            aria-label="Close"
+            className="btn btn-ghost btn-xs btn-square text-base-content/40 hover:text-base-content"
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        <div className="px-5 py-4 space-y-4 max-h-[70vh] overflow-y-auto">
+          <div>
+            <label htmlFor="node-id" className="block text-[12px] font-semibold text-base-content/40 mb-1.5">Node ID</label>
+            <div className="flex items-center gap-2">
+              <div className="flex-1 h-9 px-3 bg-base-300/50 border border-base-content/10 rounded-xl font-mono text-[11px] text-base-content/50 flex items-center truncate select-all">
+                {nodeId || "Loading..."}
+              </div>
+              <button
+                onClick={handleCopyId}
+                disabled={!nodeId}
+                aria-label="Copy node ID"
+                className="btn btn-ghost btn-sm btn-square text-base-content/30 hover:text-base-content flex-shrink-0"
+              >
+                {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
+              </button>
+            </div>
+          </div>
+
+          <div>
+            <label htmlFor="node-name" className="block text-[12px] font-semibold text-base-content/40 mb-1.5">Node Name</label>
+            <input
+              id="node-name"
+              type="text"
+              value={name}
+              onChange={function (e) { setName(e.target.value); save.markDirty(); }}
+              placeholder="My Node"
+              className={inputClass}
+            />
+          </div>
+
+          <div>
+            <label htmlFor="node-port" className="block text-[12px] font-semibold text-base-content/40 mb-1.5">Port</label>
+            <input
+              id="node-port"
+              type="number"
+              value={port}
+              onChange={function (e) {
+                var val = parseInt(e.target.value, 10);
+                if (!isNaN(val)) { setPort(val); save.markDirty(); }
+              }}
+              min={1}
+              max={65535}
+              className={inputClass + " font-mono"}
+            />
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <div className="text-[12px] font-semibold text-base-content/40">TLS</div>
+              <div className="text-[11px] text-base-content/30">Encrypt connections between nodes</div>
+            </div>
+            <input
+              type="checkbox"
+              checked={tls}
+              onChange={function (e) { setTls(e.target.checked); save.markDirty(); }}
+              className="toggle toggle-sm toggle-primary"
+              aria-label="Enable TLS"
+            />
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <div className="text-[12px] font-semibold text-base-content/40">Debug Mode</div>
+              <div className="text-[11px] text-base-content/30">Enable verbose logging</div>
+            </div>
+            <input
+              type="checkbox"
+              checked={debug}
+              onChange={function (e) { setDebug(e.target.checked); save.markDirty(); }}
+              className="toggle toggle-sm toggle-primary"
+              aria-label="Enable debug mode"
+            />
+          </div>
+        </div>
+
+        <div className="px-5 py-3 border-t border-base-content/15">
+          <SaveFooter dirty={save.dirty} saving={save.saving} saveState={save.saveState} onSave={handleSave} />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,43 @@
+import React from "react";
+import { Settings, Plug, Sparkles, Terminal } from "lucide-react";
+import { PopupMenu, PopupMenuItem } from "../ui/PopupMenu";
+import { useSidebar } from "../../hooks/useSidebar";
+
+interface ProjectDropdownProps {
+  anchorRef: React.RefObject<HTMLElement | null>;
+  onClose: () => void;
+}
+
+export function ProjectDropdown(props: ProjectDropdownProps) {
+  var sidebar = useSidebar();
+
+  var items: PopupMenuItem[] = [
+    { id: "project-settings", label: "Project Settings", icon: <Settings size={14} /> },
+    { id: "mcp", label: "MCP Servers", icon: <Plug size={14} /> },
+    { id: "skills", label: "Skills", icon: <Sparkles size={14} /> },
+    { id: "environment", label: "Environment", icon: <Terminal size={14} /> },
+  ];
+
+  function handleSelect(id: string) {
+    if (id === "project-settings") {
+      sidebar.openProjectSettings("general");
+    } else if (id === "mcp") {
+      sidebar.openProjectSettings("mcp");
+    } else if (id === "skills") {
+      sidebar.openProjectSettings("skills");
+    } else if (id === "environment") {
+      sidebar.openProjectSettings("environment");
+    }
+    props.onClose();
+  }
+
+  return (
+    <PopupMenu
+      items={items}
+      onSelect={handleSelect}
+      onClose={props.onClose}
+      anchorRef={props.anchorRef}
+      position="below"
+    />
+  );
+}

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

@@ -0,0 +1,291 @@
+import { useState, useEffect, useRef } from "react";
+import { Plus } from "lucide-react";
+import type { ProjectInfo, NodeInfo } from "@lattice/shared";
+import { LatticeLogomark } from "../ui/LatticeLogomark";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { useSidebar } from "../../hooks/useSidebar";
+
+function getProjectInitials(title: string): string {
+  var words = title.trim().split(/[\s\-_]+/);
+  if (words.length >= 3) {
+    return (words[0][0] + words[1][0] + words[2][0]).toUpperCase();
+  }
+  if (words.length === 2) {
+    return (words[0][0] + words[1][0]).toUpperCase();
+  }
+  return title.slice(0, 3).toUpperCase();
+}
+
+interface ProjectGroup {
+  slug: string;
+  title: string;
+  nodes: Array<{ nodeId: string; nodeName: string; online: boolean; path: string }>;
+}
+
+function groupProjectsBySlug(projects: ProjectInfo[], nodes: NodeInfo[]): ProjectGroup[] {
+  var groups = new Map<string, ProjectGroup>();
+  for (var i = 0; i < projects.length; i++) {
+    var p = projects[i];
+    var existing = groups.get(p.slug);
+    var node = nodes.find(function (n) { return n.id === p.nodeId; });
+    var nodeEntry = {
+      nodeId: p.nodeId,
+      nodeName: p.nodeName,
+      online: node ? node.online : false,
+      path: p.path,
+    };
+    if (existing) {
+      existing.nodes.push(nodeEntry);
+    } else {
+      groups.set(p.slug, { slug: p.slug, title: p.title, nodes: [nodeEntry] });
+    }
+  }
+  return Array.from(groups.values());
+}
+
+interface ContextMenuState {
+  visible: boolean;
+  x: number;
+  y: number;
+  slug: string | null;
+}
+
+interface ProjectButtonProps {
+  group: ProjectGroup;
+  isActive: boolean;
+  onClick: () => void;
+  onContextMenu: (e: React.MouseEvent, slug: string) => void;
+}
+
+function ProjectButton(props: ProjectButtonProps) {
+  var [hovered, setHovered] = useState(false);
+  var [tooltipTop, setTooltipTop] = useState(0);
+  var initials = getProjectInitials(props.group.title);
+
+  return (
+    <div className="relative flex items-center">
+      {props.isActive && (
+        <div
+          className="absolute -left-3 w-[3px] bg-base-content rounded-r-full pointer-events-none"
+          style={{ height: "32px", top: "50%", transform: "translateY(-50%)" }}
+        />
+      )}
+
+      <button
+        onClick={props.onClick}
+        onContextMenu={function (e) {
+          e.preventDefault();
+          props.onContextMenu(e, props.group.slug);
+        }}
+        onMouseEnter={function (e) {
+          var rect = e.currentTarget.getBoundingClientRect();
+          setTooltipTop(rect.top + rect.height / 2);
+          setHovered(true);
+        }}
+        onMouseLeave={function () { setHovered(false); }}
+        className={
+          "w-[42px] h-[42px] flex items-center justify-center text-[11px] font-bold tracking-[0.03em] cursor-pointer transition-all duration-[120ms] flex-shrink-0 " +
+          (props.isActive
+            ? "rounded-xl bg-primary text-primary-content"
+            : hovered
+            ? "rounded-xl bg-base-200 text-base-content/60"
+            : "rounded-full bg-base-200 text-base-content/60")
+        }
+      >
+        {initials}
+      </button>
+
+      <div className="absolute bottom-0 right-0 flex gap-[2px] pointer-events-none">
+        {props.group.nodes.map(function (n) {
+          return (
+            <div
+              key={n.nodeId}
+              className={
+                "w-[11px] h-[11px] rounded-full border-[1.5px] border-base-100 " +
+                (n.online ? "bg-success" : "bg-error")
+              }
+            />
+          );
+        })}
+      </div>
+
+      {hovered && (
+        <div
+          className="pointer-events-none z-[9000] bg-base-300 border border-base-content/20 rounded px-2 py-1 text-xs text-base-content whitespace-nowrap shadow-xl"
+          style={{
+            position: "fixed",
+            left: "calc(64px + 8px)",
+            top: tooltipTop + "px",
+            transform: "translateY(-50%)",
+          }}
+        >
+          {props.group.title}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ProjectRailProps {
+  projects: ProjectInfo[];
+  nodes: NodeInfo[];
+  activeProjectSlug: string | null;
+  onSelectProject: (slug: string) => void;
+  onDashboardClick: () => void;
+  isDashboardActive: boolean;
+  dimmed?: boolean;
+}
+
+export function ProjectRail(props: ProjectRailProps) {
+  var ws = useWebSocket();
+  var sidebar = useSidebar();
+  var groups = groupProjectsBySlug(props.projects, props.nodes);
+  var [contextMenu, setContextMenu] = useState<ContextMenuState>({
+    visible: false,
+    x: 0,
+    y: 0,
+    slug: null,
+  });
+  var menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(
+    function () {
+      if (!contextMenu.visible) return;
+
+      function handleClick() {
+        setContextMenu(function (prev) { return { ...prev, visible: false }; });
+      }
+
+      function handleKeyDown(e: KeyboardEvent) {
+        if (e.key === "Escape") {
+          setContextMenu(function (prev) { return { ...prev, visible: false }; });
+        }
+      }
+
+      function handleScroll() {
+        setContextMenu(function (prev) { return { ...prev, visible: false }; });
+      }
+
+      window.addEventListener("click", handleClick);
+      window.addEventListener("keydown", handleKeyDown);
+      window.addEventListener("scroll", handleScroll, true);
+
+      return function () {
+        window.removeEventListener("click", handleClick);
+        window.removeEventListener("keydown", handleKeyDown);
+        window.removeEventListener("scroll", handleScroll, true);
+      };
+    },
+    [contextMenu.visible]
+  );
+
+  function handleContextMenu(e: React.MouseEvent, slug: string) {
+    setContextMenu({ visible: true, x: e.clientX, y: e.clientY, slug: slug });
+  }
+
+  return (
+    <div
+      className={
+        "w-16 flex-shrink-0 flex flex-col items-center pt-3 pb-16 gap-2 bg-base-100 border-r border-base-300 overflow-y-auto overflow-x-hidden scrollbar-hidden " +
+        (props.dimmed ? "opacity-60" : "")
+      }
+    >
+      <div className="relative flex items-center">
+        {props.isDashboardActive && (
+          <div
+            className="absolute -left-3 w-[3px] bg-base-content rounded-r-full pointer-events-none"
+            style={{ height: "32px", top: "50%", transform: "translateY(-50%)" }}
+          />
+        )}
+        <button
+          onClick={props.onDashboardClick}
+          className={
+            "w-[42px] h-[42px] flex items-center justify-center cursor-pointer transition-all duration-[120ms] flex-shrink-0 " +
+            (props.isDashboardActive
+              ? "rounded-xl bg-primary text-primary-content"
+              : "rounded-full bg-base-200 text-base-content/60 hover:rounded-xl hover:bg-primary/20 hover:text-primary")
+          }
+          title="Lattice Dashboard"
+        >
+          <LatticeLogomark size={22} />
+        </button>
+      </div>
+
+      <div className="w-6 h-px bg-base-300 my-0.5 flex-shrink-0" />
+
+      {groups.map(function (group) {
+        return (
+          <ProjectButton
+            key={group.slug}
+            group={group}
+            isActive={props.activeProjectSlug === group.slug}
+            onClick={function () { props.onSelectProject(group.slug); }}
+            onContextMenu={handleContextMenu}
+          />
+        );
+      })}
+
+      {groups.length > 0 && (
+        <div className="w-6 h-px bg-base-300 my-0.5 flex-shrink-0" />
+      )}
+
+      <button
+        onClick={function () {}}
+        className="w-[42px] h-[42px] flex items-center justify-center rounded-full border-2 border-dashed border-base-content/25 text-base-content/20 transition-colors duration-[120ms] flex-shrink-0 cursor-not-allowed opacity-60"
+        title="Add project (coming soon)"
+        disabled
+      >
+        <Plus size={18} />
+      </button>
+
+      <div className="flex-1" />
+
+      {contextMenu.visible && (
+        <div
+          ref={menuRef}
+          role="menu"
+          aria-label="Project actions"
+          onClick={function (e) { e.stopPropagation(); }}
+          className="fixed z-[9999] bg-base-300 border border-base-content/20 rounded-lg shadow-2xl py-1 min-w-[160px]"
+          style={{ left: contextMenu.x + "px", top: contextMenu.y + "px" }}
+        >
+          <button
+            role="menuitem"
+            className="w-full text-left px-3 py-1.5 text-sm text-base-content hover:bg-base-content/10 transition-colors"
+            onClick={function () {
+              if (contextMenu.slug) {
+                sidebar.setActiveProjectSlug(contextMenu.slug);
+                sidebar.openProjectSettings("general");
+              }
+              setContextMenu(function (prev) { return { ...prev, visible: false }; });
+            }}
+          >
+            Project Settings
+          </button>
+          <button
+            role="menuitem"
+            className="w-full text-left px-3 py-1.5 text-sm text-base-content hover:bg-base-content/10 transition-colors"
+            onClick={function () {
+              if (contextMenu.slug) {
+                ws.send({ type: "session:create", projectSlug: contextMenu.slug });
+              }
+              setContextMenu(function (prev) { return { ...prev, visible: false }; });
+            }}
+          >
+            New Session
+          </button>
+          <div className="my-1 h-px bg-base-content/10" />
+          <button
+            role="menuitem"
+            className="w-full text-left px-3 py-1.5 text-sm text-error hover:bg-error/10 transition-colors"
+            onClick={function () {
+              setContextMenu(function (prev) { return { ...prev, visible: false }; });
+            }}
+          >
+            Remove Project
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,52 @@
+import { useRef, useEffect } from "react";
+import { Search, X } from "lucide-react";
+
+interface SearchFilterProps {
+  value: string;
+  onChange: (value: string) => void;
+  onClose: () => void;
+  placeholder?: string;
+}
+
+export function SearchFilter(props: SearchFilterProps) {
+  var inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(function () {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Escape") {
+      props.onClose();
+    }
+  }
+
+  return (
+    <div className="px-2 pb-1.5 flex-shrink-0">
+      <div className="flex items-center gap-1.5 bg-base-300 border border-base-content/15 rounded-md px-2 h-7 focus-within:border-primary transition-colors duration-[120ms]">
+        <Search size={12} className="text-base-content/30 flex-shrink-0" />
+        <input
+          ref={inputRef}
+          type="text"
+          value={props.value}
+          onChange={function (e) { props.onChange(e.target.value); }}
+          onKeyDown={handleKeyDown}
+          placeholder={props.placeholder || "Search..."}
+          className="flex-1 bg-transparent text-base-content text-[13px] outline-none min-w-0"
+          spellCheck={false}
+        />
+        {props.value.length > 0 && (
+          <button
+            onClick={function () { props.onChange(""); }}
+            aria-label="Clear search"
+            className="text-base-content/30 hover:text-base-content flex-shrink-0"
+          >
+            <X size={11} />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}