@cryptiklemur/lattice 4.0.2 → 5.0.0

package/src/client/components/ui/CommandPalette.tsx

@@ -1,321 +0,0 @@
-import { useEffect, useRef, useState, useMemo, useCallback } from "react";
-import { useHotkey } from "@tanstack/react-hotkeys";
-import { Search, Moon, Sun, Settings, Layout, MessageSquare, FolderOpen, Zap, RotateCcw } from "lucide-react";
-import { useProjects } from "../../hooks/useProjects";
-import { useSkills } from "../../hooks/useSkills";
-import { useTheme } from "../../hooks/useTheme";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import { useSidebar } from "../../hooks/useSidebar";
-import { getSessionStore } from "../../stores/session";
-import type { SettingsSection } from "../../stores/sidebar";
-
-interface Command {
-  id: string;
-  label: string;
-  description?: string;
-  group: string;
-  icon?: React.ReactNode;
-  action: () => void;
-  keywords?: string;
-}
-
-export function CommandPalette() {
-  var [open, setOpen] = useState(false);
-  var [query, setQuery] = useState("");
-  var [selectedIndex, setSelectedIndex] = useState(0);
-  var inputRef = useRef<HTMLInputElement>(null);
-  var listRef = useRef<HTMLDivElement>(null);
-
-  var { projects, setActiveProject } = useProjects();
-  var skills = useSkills();
-  var { mode, toggleMode, themes, setTheme, currentThemeId } = useTheme();
-  var ws = useWebSocket();
-  var sidebar = useSidebar();
-
-  var close = useCallback(function () {
-    setOpen(false);
-    setQuery("");
-    setSelectedIndex(0);
-  }, []);
-
-  useHotkey("Mod+K", function (e) {
-    e.preventDefault();
-    setOpen(function (prev) {
-      if (prev) {
-        setQuery("");
-        setSelectedIndex(0);
-      }
-      return !prev;
-    });
-  });
-
-  useHotkey("Escape", function (e) {
-    e.preventDefault();
-    close();
-  }, { enabled: open });
-
-  // Focus input when opened
-  useEffect(function () {
-    if (open && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [open]);
-
-  // Build command list
-  var commands = useMemo(function (): Command[] {
-    var cmds: Command[] = [];
-
-    // Navigation
-    cmds.push({
-      id: "nav:dashboard",
-      label: "Go to Dashboard",
-      group: "Navigation",
-      icon: <Layout size={14} />,
-      action: function () { sidebar.goToDashboard(); close(); },
-      keywords: "home overview",
-    });
-
-    // Projects
-    projects.forEach(function (project) {
-      cmds.push({
-        id: "project:" + project.slug,
-        label: project.title || project.slug,
-        description: project.path,
-        group: "Projects",
-        icon: <FolderOpen size={14} />,
-        action: function () { setActiveProject(project); close(); },
-        keywords: "switch project " + project.slug,
-      });
-    });
-
-    // Session actions
-    var sessionState = getSessionStore().state;
-    if (sessionState.activeProjectSlug) {
-      cmds.push({
-        id: "session:new",
-        label: "New Session",
-        group: "Session",
-        icon: <MessageSquare size={14} />,
-        action: function () {
-          ws.send({ type: "session:create", projectSlug: sessionState.activeProjectSlug! });
-          close();
-        },
-        keywords: "create chat conversation",
-      });
-    }
-
-    // Settings sections
-    var settingsSections: Array<{ id: SettingsSection; label: string; keywords: string }> = [
-      { id: "appearance", label: "Appearance", keywords: "theme visual colors" },
-      { id: "claude", label: "Claude Settings", keywords: "api model key" },
-      { id: "environment", label: "Environment", keywords: "env variables config" },
-      { id: "mcp", label: "MCP Servers", keywords: "model context protocol" },
-      { id: "skills", label: "Skills", keywords: "capabilities commands" },
-      { id: "nodes", label: "Mesh Nodes", keywords: "machines network" },
-    ];
-    settingsSections.forEach(function (section) {
-      cmds.push({
-        id: "settings:" + section.id,
-        label: section.label,
-        group: "Settings",
-        icon: <Settings size={14} />,
-        action: function () { sidebar.openSettings(section.id); close(); },
-        keywords: section.keywords,
-      });
-    });
-
-    // Theme
-    cmds.push({
-      id: "theme:toggle",
-      label: mode === "dark" ? "Switch to Light Mode" : "Switch to Dark Mode",
-      group: "Theme",
-      icon: mode === "dark" ? <Sun size={14} /> : <Moon size={14} />,
-      action: function () { toggleMode(); close(); },
-      keywords: "dark light mode toggle",
-    });
-
-    var themeVariant = mode === "dark" ? "dark" : "light";
-    themes.filter(function (t) { return t.theme.variant === themeVariant; }).forEach(function (t) {
-      if (t.id === currentThemeId) return;
-      cmds.push({
-        id: "theme:" + t.id,
-        label: t.theme.name,
-        group: "Theme",
-        icon: mode === "dark" ? <Moon size={14} /> : <Sun size={14} />,
-        action: function () { setTheme(t.id); close(); },
-        keywords: "color scheme " + t.theme.name,
-      });
-    });
-
-    // Skills
-    skills.forEach(function (skill) {
-      cmds.push({
-        id: "skill:" + skill.name,
-        label: "/" + skill.name,
-        description: skill.description,
-        group: "Skills",
-        icon: <Zap size={14} />,
-        action: function () {
-          // Focus chat input and prefill with skill command
-          var textarea = document.querySelector("textarea[aria-label='Message input']") as HTMLTextAreaElement | null;
-          if (textarea) {
-            textarea.value = "/" + skill.name + " ";
-            textarea.focus();
-            textarea.dispatchEvent(new Event("input", { bubbles: true }));
-          }
-          close();
-        },
-        keywords: skill.description,
-      });
-    });
-
-    // System
-    cmds.push({
-      id: "system:restart",
-      label: "Restart Daemon",
-      group: "System",
-      icon: <RotateCcw size={14} />,
-      action: function () { ws.send({ type: "settings:restart" } as any); close(); },
-      keywords: "reboot server",
-    });
-
-    return cmds;
-  }, [projects, skills, mode, themes, currentThemeId, sidebar, ws, close, setActiveProject, toggleMode, setTheme]);
-
-  // Filter commands
-  var filtered = useMemo(function () {
-    if (!query.trim()) return commands;
-    var q = query.toLowerCase();
-    return commands.filter(function (cmd) {
-      var searchText = (cmd.label + " " + (cmd.description || "") + " " + (cmd.keywords || "") + " " + cmd.group).toLowerCase();
-      // All words in query must match
-      var words = q.split(/\s+/);
-      for (var i = 0; i < words.length; i++) {
-        if (!searchText.includes(words[i])) return false;
-      }
-      return true;
-    });
-  }, [query, commands]);
-
-  // Reset selection when filter changes
-  useEffect(function () {
-    setSelectedIndex(0);
-  }, [filtered.length, query]);
-
-  // Scroll active item into view
-  useEffect(function () {
-    if (!listRef.current) return;
-    var active = listRef.current.querySelector("[data-active='true']") as HTMLElement | null;
-    if (active) {
-      active.scrollIntoView({ block: "nearest" });
-    }
-  }, [selectedIndex]);
-
-  function handleKeyDown(e: React.KeyboardEvent) {
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setSelectedIndex(function (i) { return i < filtered.length - 1 ? i + 1 : 0; });
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setSelectedIndex(function (i) { return i > 0 ? i - 1 : filtered.length - 1; });
-    } else if (e.key === "Enter") {
-      e.preventDefault();
-      if (filtered[selectedIndex]) {
-        filtered[selectedIndex].action();
-      }
-    }
-  }
-
-  // Group filtered commands
-  var grouped = useMemo(function () {
-    var groups: Array<{ name: string; items: Array<Command & { globalIndex: number }> }> = [];
-    var groupMap = new Map<string, Array<Command & { globalIndex: number }>>();
-    var globalIdx = 0;
-    filtered.forEach(function (cmd) {
-      var list = groupMap.get(cmd.group);
-      if (!list) {
-        list = [];
-        groupMap.set(cmd.group, list);
-        groups.push({ name: cmd.group, items: list });
-      }
-      list.push(Object.assign({}, cmd, { globalIndex: globalIdx }));
-      globalIdx++;
-    });
-    return groups;
-  }, [filtered]);
-
-  if (!open) return null;
-
-  return (
-    <div className="fixed inset-0 z-[9998] flex items-start justify-center pt-[15vh]" onClick={close}>
-      <div className="absolute inset-0 bg-base-content/50" />
-      <div
-        className="relative w-full max-w-[520px] mx-4 bg-base-200 border border-base-content/10 rounded-xl shadow-2xl overflow-hidden"
-        onClick={function (e) { e.stopPropagation(); }}
-      >
-        <div className="flex items-center gap-2 px-4 py-3 border-b border-base-content/10">
-          <Search size={16} className="text-base-content/30 flex-shrink-0" />
-          <input
-            ref={inputRef}
-            type="text"
-            value={query}
-            onChange={function (e) { setQuery(e.target.value); }}
-            onKeyDown={handleKeyDown}
-            placeholder="Type a command..."
-            className="flex-1 bg-transparent text-[14px] text-base-content outline-none placeholder:text-base-content/30"
-          />
-          <kbd className="text-[10px] font-mono text-base-content/20 bg-base-300 px-1.5 py-0.5 rounded">ESC</kbd>
-        </div>
-        <div ref={listRef} className="max-h-[360px] overflow-y-auto py-1.5">
-          {grouped.length === 0 && (
-            <div className="px-4 py-8 text-center text-[13px] text-base-content/30">
-              No commands found
-            </div>
-          )}
-          {grouped.map(function (group) {
-            return (
-              <div key={group.name}>
-                <div className="px-4 pt-2 pb-1">
-                  <span className="text-[9px] uppercase tracking-widest text-base-content/30 font-mono font-bold">{group.name}</span>
-                </div>
-                {group.items.map(function (cmd) {
-                  var isActive = cmd.globalIndex === selectedIndex;
-                  return (
-                    <button
-                      key={cmd.id}
-                      data-active={isActive}
-                      onMouseEnter={function () { setSelectedIndex(cmd.globalIndex); }}
-                      onMouseDown={function (e) { e.preventDefault(); }}
-                      onClick={function () { cmd.action(); }}
-                      className={
-                        "flex w-full items-center gap-3 px-4 py-2 text-left transition-colors " +
-                        (isActive ? "bg-primary/10" : "hover:bg-base-content/5")
-                      }
-                    >
-                      <div className={"flex-shrink-0 " + (isActive ? "text-primary" : "text-base-content/30")}>
-                        {cmd.icon}
-                      </div>
-                      <div className="flex-1 min-w-0">
-                        <div className={"text-[13px] truncate " + (isActive ? "text-base-content" : "text-base-content/70")}>
-                          {cmd.label}
-                        </div>
-                        {cmd.description && (
-                          <div className="text-[11px] text-base-content/30 truncate">{cmd.description}</div>
-                        )}
-                      </div>
-                    </button>
-                  );
-                })}
-              </div>
-            );
-          })}
-        </div>
-        <div className="flex items-center gap-3 px-4 py-2 border-t border-base-content/10 text-[10px] text-base-content/25 font-mono">
-          <span>↑↓ navigate</span>
-          <span>↵ select</span>
-          <span>esc close</span>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/client/components/ui/ContextMenu.tsx

@@ -1,153 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import type { ReactNode } from "react";
-
-export interface ContextMenuItem {
-  label: string;
-  icon?: ReactNode;
-  onClick: () => void;
-  danger?: boolean;
-  disabled?: boolean;
-  hidden?: boolean;
-}
-
-export interface ContextMenuDivider {
-  type: "divider";
-  hidden?: boolean;
-}
-
-export type ContextMenuEntry = ContextMenuItem | ContextMenuDivider;
-
-interface ContextMenuProps {
-  x: number;
-  y: number;
-  items: ContextMenuEntry[];
-  onClose: () => void;
-  label?: string;
-}
-
-export function ContextMenu(props: ContextMenuProps) {
-  var menuRef = useRef<HTMLDivElement>(null);
-  var [focusIndex, setFocusIndex] = useState(-1);
-  var visibleItems = props.items.filter(function (item) { return !item.hidden; });
-
-  useEffect(function () {
-    function handleClick(e: MouseEvent) {
-      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
-        props.onClose();
-      }
-    }
-    function handleKey(e: KeyboardEvent) {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        props.onClose();
-        return;
-      }
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        setFocusIndex(function (prev) {
-          var next = prev + 1;
-          while (next < visibleItems.length && (visibleItems[next] as ContextMenuDivider).type === "divider") next++;
-          return next < visibleItems.length ? next : prev;
-        });
-        return;
-      }
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        setFocusIndex(function (prev) {
-          var next = prev - 1;
-          while (next >= 0 && (visibleItems[next] as ContextMenuDivider).type === "divider") next--;
-          return next >= 0 ? next : prev;
-        });
-        return;
-      }
-      if (e.key === "Enter" && focusIndex >= 0) {
-        e.preventDefault();
-        var item = visibleItems[focusIndex] as ContextMenuItem;
-        if (item && !item.disabled && (item as unknown as ContextMenuDivider).type !== "divider") {
-          item.onClick();
-          props.onClose();
-        }
-      }
-    }
-    document.addEventListener("mousedown", handleClick);
-    document.addEventListener("keydown", handleKey);
-    return function () {
-      document.removeEventListener("mousedown", handleClick);
-      document.removeEventListener("keydown", handleKey);
-    };
-  }, [props.onClose, focusIndex, visibleItems]);
-
-  useEffect(function () {
-    if (!menuRef.current) return;
-    var rect = menuRef.current.getBoundingClientRect();
-    var vw = window.innerWidth;
-    var vh = window.innerHeight;
-    if (rect.right > vw) {
-      menuRef.current.style.left = Math.max(4, props.x - rect.width) + "px";
-    }
-    if (rect.bottom > vh) {
-      menuRef.current.style.top = Math.max(4, props.y - rect.height) + "px";
-    }
-  }, [props.x, props.y]);
-
-  return createPortal(
-    <div
-      ref={menuRef}
-      role="menu"
-      aria-label={props.label || "Context menu"}
-      onMouseDown={function (e) { e.stopPropagation(); }}
-      className="fixed z-[99999] bg-base-200 border border-base-content/20 rounded-lg shadow-xl p-1 min-w-[180px] animate-in fade-in zoom-in-95 duration-100"
-      style={{ top: props.y, left: props.x }}
-    >
-      {visibleItems.map(function (entry, i) {
-        if ((entry as ContextMenuDivider).type === "divider") {
-          return <div key={"d-" + i} className="my-1 border-t border-base-content/10" />;
-        }
-        var item = entry as ContextMenuItem;
-        var isFocused = i === focusIndex;
-        return (
-          <button
-            key={i}
-            role="menuitem"
-            tabIndex={isFocused ? 0 : -1}
-            disabled={item.disabled}
-            onClick={function () {
-              if (!item.disabled) {
-                item.onClick();
-                props.onClose();
-              }
-            }}
-            onMouseEnter={function () { setFocusIndex(i); }}
-            className={
-              "flex items-center gap-2 w-full px-2.5 py-1.5 rounded text-[13px] text-left transition-colors duration-[80ms] cursor-pointer " +
-              (item.disabled ? "opacity-40 cursor-not-allowed " : "") +
-              (item.danger ? "text-error hover:bg-error/10 " : "text-base-content/70 hover:bg-base-300 hover:text-base-content ") +
-              (isFocused ? (item.danger ? "bg-error/10" : "bg-base-300 text-base-content") : "")
-            }
-          >
-            {item.icon && <span className="w-4 h-4 opacity-60 shrink-0">{item.icon}</span>}
-            {item.label}
-          </button>
-        );
-      })}
-    </div>,
-    document.body,
-  );
-}
-
-export function useContextMenu<T>() {
-  var [state, setState] = useState<{ x: number; y: number; data: T } | null>(null);
-
-  function open(e: React.MouseEvent, data: T) {
-    e.preventDefault();
-    e.stopPropagation();
-    setState({ x: e.clientX, y: e.clientY, data });
-  }
-
-  function close() {
-    setState(null);
-  }
-
-  return { state, open, close };
-}

package/src/client/components/ui/ErrorBoundary.tsx

@@ -1,56 +0,0 @@
-import { Component } from "react";
-import type { ReactNode, ErrorInfo } from "react";
-
-interface Props {
-  children: ReactNode;
-  fallback?: ReactNode;
-}
-
-interface State {
-  hasError: boolean;
-  error: Error | null;
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, info: ErrorInfo) {
-    console.error("[lattice] Render error:", error, info.componentStack);
-  }
-
-  handleReload() {
-    window.location.reload();
-  }
-
-  render() {
-    if (this.state.hasError) {
-      if (this.props.fallback) {
-        return this.props.fallback;
-      }
-      return (
-        <div className="min-h-screen bg-base-100 flex items-center justify-center">
-          <div className="text-center max-w-[400px] p-8">
-            <h2 className="text-[20px] font-semibold text-error mb-3">Something went wrong</h2>
-            <p className="text-[14px] text-base-content/60 mb-5">
-              {this.state.error?.message || "An unexpected error occurred."}
-            </p>
-            <button
-              onClick={this.handleReload}
-              className="btn btn-primary btn-sm"
-            >
-              Reload
-            </button>
-          </div>
-        </div>
-      );
-    }
-    return this.props.children;
-  }
-}