@cryptiklemur/lattice 4.0.1 → 5.0.0

package/src/client/components/dashboard/ProjectDashboardView.tsx

@@ -1,179 +0,0 @@
-import { useState, useEffect } from "react";
-import { useSidebar } from "../../hooks/useSidebar";
-import { useProjectSettings } from "../../hooks/useProjectSettings";
-import { useProjects } from "../../hooks/useProjects";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import {
-  Menu, Settings, FileText, Terminal, Plug, ScrollText, Shield,
-  MessageSquare, ChevronRight,
-} from "lucide-react";
-import type { ProjectSettingsSection } from "../../stores/sidebar";
-import type { SessionSummary, ServerMessage } from "#shared";
-import { openSessionTab } from "../../stores/workspace";
-
-function StatCard({ label, value, icon }: { label: string; value: string | number; icon: React.ReactNode }) {
-  return (
-    <div className="bg-base-300 rounded-xl border border-base-content/15 p-3 px-4">
-      <div className="flex items-center gap-2 mb-1.5">
-        {icon}
-        <span className="text-[11px] font-semibold tracking-wider uppercase text-base-content/40">{label}</span>
-      </div>
-      <div className="text-xl font-mono font-bold text-base-content">{value}</div>
-    </div>
-  );
-}
-
-function QuickLink({ label, icon, onClick }: { label: string; icon: React.ReactNode; onClick: () => void }) {
-  return (
-    <button
-      onClick={onClick}
-      className="flex items-center gap-2.5 px-3 py-2 rounded-xl border border-base-content/15 bg-base-300 text-[12px] text-base-content/60 hover:text-base-content hover:border-base-content/30 transition-colors duration-[120ms] cursor-pointer focus-visible:ring-2 focus-visible:ring-primary"
-    >
-      {icon}
-      <span className="flex-1 text-left">{label}</span>
-      <ChevronRight size={12} className="text-base-content/30" />
-    </button>
-  );
-}
-
-export function ProjectDashboardView() {
-  var sidebar = useSidebar();
-
-  if (sidebar.activeView.type !== "project-dashboard") {
-    return null;
-  }
-
-  var { settings, loading } = useProjectSettings(sidebar.activeProjectSlug);
-  var { projects } = useProjects();
-  var { send, subscribe, unsubscribe, status: wsStatus } = useWebSocket();
-  var [sessions, setSessions] = useState<SessionSummary[]>([]);
-
-  var activeProject = projects.find(function (p) { return p.slug === sidebar.activeProjectSlug; });
-  var projectTitle = activeProject?.title ?? sidebar.activeProjectSlug ?? "Project";
-
-  useEffect(function () {
-    if (!sidebar.activeProjectSlug) return;
-
-    function handleSessionList(msg: ServerMessage) {
-      if (msg.type !== "session:list") return;
-      var data = msg as { type: "session:list"; projectSlug: string; sessions: SessionSummary[] };
-      if (data.projectSlug === sidebar.activeProjectSlug) {
-        var sorted = data.sessions.slice().sort(function (a, b) { return b.updatedAt - a.updatedAt; });
-        setSessions(sorted);
-      }
-    }
-
-    subscribe("session:list", handleSessionList);
-    if (wsStatus === "connected") {
-      send({ type: "session:list_request", projectSlug: sidebar.activeProjectSlug });
-    }
-
-    return function () {
-      unsubscribe("session:list", handleSessionList);
-    };
-  }, [sidebar.activeProjectSlug, wsStatus]);
-
-  function goToSection(section: ProjectSettingsSection) {
-    sidebar.openProjectSettings(section);
-  }
-
-  function goToSession(s: SessionSummary) {
-    if (activeProject) {
-      openSessionTab(s.id, activeProject.slug, s.title);
-      sidebar.setActiveSessionId(s.id);
-    }
-  }
-
-  var sessionCount = sessions.length;
-  var mcpCount = settings ? Object.keys(settings.mcpServers).length : 0;
-  var globalMcpCount = settings ? Object.keys(settings.global.mcpServers).length : 0;
-  var rulesCount = settings ? settings.rules.length : 0;
-  var globalRulesCount = settings ? settings.global.rules.length : 0;
-  var envCount = settings ? Object.keys(settings.env).length : 0;
-
-  return (
-    <div className="flex-1 overflow-auto px-4 sm:px-8 py-4 sm:py-6 max-w-3xl">
-      <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={sidebar.toggleDrawer}
-        >
-          <Menu size={18} />
-        </button>
-        <h1 className="text-lg font-mono font-bold text-base-content">{projectTitle}</h1>
-      </div>
-
-      {loading && (
-        <div className="space-y-6 animate-pulse">
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-            {[0, 1, 2, 3].map(function (i) {
-              return <div key={i} className="bg-base-content/[0.03] rounded-xl p-3.5 h-20" />;
-            })}
-          </div>
-          <div className="bg-base-content/[0.03] rounded-xl h-32" />
-        </div>
-      )}
-
-      {!loading && settings && (
-        <div className="space-y-6">
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-            <StatCard label="Sessions" value={sessionCount} icon={<MessageSquare size={14} className="text-primary" />} />
-            <StatCard label="MCP Servers" value={mcpCount + globalMcpCount} icon={<Plug size={14} className="text-accent" />} />
-            <StatCard label="Rules" value={rulesCount + globalRulesCount} icon={<ScrollText size={14} className="text-info" />} />
-            <StatCard label="Env Vars" value={envCount} icon={<Terminal size={14} className="text-success" />} />
-          </div>
-
-          {settings.claudeMd && (
-            <div>
-              <div className="text-[12px] font-semibold text-base-content/40 mb-2">CLAUDE.md</div>
-              <div className="px-3 py-2.5 bg-base-300 border border-base-content/15 rounded-xl font-mono text-[11px] text-base-content/60 leading-relaxed max-h-48 overflow-y-auto">
-                <pre className="whitespace-pre-wrap">{settings.claudeMd}</pre>
-              </div>
-            </div>
-          )}
-
-          {sessionCount > 0 && (
-            <div>
-              <div className="text-[12px] font-semibold text-base-content/40 mb-2">Recent Sessions</div>
-              <div className="flex flex-col gap-1.5">
-                {sessions.slice(0, 5).map(function (s) {
-                  return (
-                    <button
-                      key={s.id}
-                      onClick={function () { goToSession(s); }}
-                      className="flex items-center gap-3 px-3 py-2 rounded-xl border border-base-content/15 bg-base-300 hover:border-base-content/30 transition-colors duration-[120ms] cursor-pointer text-left focus-visible:ring-2 focus-visible:ring-primary"
-                    >
-                      <MessageSquare size={12} className="text-base-content/30 flex-shrink-0" />
-                      <span className="flex-1 text-[12px] text-base-content truncate">{s.title || "Untitled"}</span>
-                      <span className="text-[10px] text-base-content/30 font-mono flex-shrink-0">
-                        {new Date(s.updatedAt).toLocaleDateString()}
-                      </span>
-                      <ChevronRight size={12} className="text-base-content/20 flex-shrink-0" />
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-
-          <div>
-            <div className="text-[12px] font-semibold text-base-content/40 mb-2">Settings</div>
-            <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
-              <QuickLink label="General" icon={<Settings size={13} className="text-base-content/40" />} onClick={function () { goToSection("general"); }} />
-              <QuickLink label="Claude" icon={<FileText size={13} className="text-base-content/40" />} onClick={function () { goToSection("claude"); }} />
-              <QuickLink label="Environment" icon={<Terminal size={13} className="text-base-content/40" />} onClick={function () { goToSection("environment"); }} />
-              <QuickLink label="MCP Servers" icon={<Plug size={13} className="text-base-content/40" />} onClick={function () { goToSection("mcp"); }} />
-              <QuickLink label="Rules" icon={<ScrollText size={13} className="text-base-content/40" />} onClick={function () { goToSection("rules"); }} />
-              <QuickLink label="Permissions" icon={<Shield size={13} className="text-base-content/40" />} onClick={function () { goToSection("permissions"); }} />
-            </div>
-          </div>
-
-          <div className="text-[11px] text-base-content/30 font-mono truncate">
-            {settings.path}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/client/components/mesh/NodeBadge.tsx

@@ -1,24 +0,0 @@
-import type { NodeInfo } from "#shared";
-
-interface NodeBadgeProps {
-  node: NodeInfo;
-}
-
-export function NodeBadge(props: NodeBadgeProps) {
-  var initials = props.node.name.slice(0, 2).toUpperCase();
-
-  return (
-    <span
-      title={props.node.name + (props.node.online ? " (online)" : " (offline)")}
-      className="inline-flex items-center gap-[3px] px-[5px] py-[1px] rounded-full bg-base-300 border border-base-content/15 text-[10px] font-semibold text-base-content/40 tracking-[0.03em] flex-shrink-0"
-    >
-      <span
-        className={
-          "w-[5px] h-[5px] rounded-full flex-shrink-0 inline-block " +
-          (props.node.online ? "bg-success" : "bg-base-content/30")
-        }
-      />
-      {initials}
-    </span>
-  );
-}

package/src/client/components/mesh/PairingDialog.tsx

@@ -1,340 +0,0 @@
-import { useState, useEffect, useCallback, useRef, memo } from "react";
-import { X, Copy, Check, Loader2 } from "lucide-react";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import { useMesh } from "../../hooks/useMesh";
-import { clearInvite } from "../../stores/mesh";
-import type { ServerMessage } from "#shared";
-
-type Tab = "generate" | "enter";
-type PairStatus = "idle" | "connecting" | "paired" | "failed";
-
-interface PairingDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export var PairingDialog = memo(function PairingDialog(props: PairingDialogProps) {
-  var ws = useWebSocket();
-  var mesh = useMesh();
-  var [tab, setTab] = useState<Tab>("generate");
-  var [pairCode, setPairCode] = useState("");
-  var [pairStatus, setPairStatus] = useState<PairStatus>("idle");
-  var [pairError, setPairError] = useState<string | null>(null);
-  var [copied, setCopied] = useState(false);
-  var [generating, setGenerating] = useState(false);
-  var [addresses, setAddresses] = useState<Array<{ name: string; address: string }>>([]);
-  var [selectedAddress, setSelectedAddress] = useState("");
-  var modalRef = useRef<HTMLDivElement>(null);
-  var inputRef = useRef<HTMLInputElement>(null);
-  var pairTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(function () {
-    if (!props.isOpen) {
-      clearInvite();
-      setPairCode("");
-      setPairStatus("idle");
-      setPairError(null);
-      setCopied(false);
-      setGenerating(false);
-      setAddresses([]);
-      setSelectedAddress("");
-      setTab("generate");
-      if (pairTimeoutRef.current) { clearTimeout(pairTimeoutRef.current); pairTimeoutRef.current = null; }
-      return;
-    }
-
-    function handleAddresses(msg: ServerMessage) {
-      if ((msg as any).type !== "mesh:addresses_result") return;
-      var data = msg as any as { addresses: Array<{ name: string; address: string }> };
-      setAddresses(data.addresses);
-      if (data.addresses.length > 0) {
-        setSelectedAddress(data.addresses[0].address);
-      }
-    }
-
-    ws.subscribe("mesh:addresses_result", handleAddresses);
-    ws.send({ type: "mesh:addresses" } as any);
-
-    function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape") props.onClose();
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return function () {
-      document.removeEventListener("keydown", handleKeyDown);
-      ws.unsubscribe("mesh:addresses_result", handleAddresses);
-    };
-  }, [props.isOpen]);
-
-  useEffect(function () {
-    function handleInvite(msg: ServerMessage) {
-      if (msg.type === "mesh:invite_code") {
-        setGenerating(false);
-      }
-    }
-
-    function handlePaired(msg: ServerMessage) {
-      if (msg.type === "mesh:paired") {
-        setPairStatus("paired");
-        setPairError(null);
-        setTimeout(function () { props.onClose(); }, 3000);
-      }
-    }
-
-    function handlePairFailed(msg: ServerMessage) {
-      if (msg.type !== "mesh:pair_failed") return;
-      var data = msg as { type: string; message: string };
-      setPairStatus("failed");
-      setPairError(data.message);
-    }
-
-    ws.subscribe("mesh:invite_code", handleInvite);
-    ws.subscribe("mesh:paired", handlePaired);
-    ws.subscribe("mesh:pair_failed", handlePairFailed);
-    return function () {
-      ws.unsubscribe("mesh:invite_code", handleInvite);
-      ws.unsubscribe("mesh:paired", handlePaired);
-      ws.unsubscribe("mesh:pair_failed", handlePairFailed);
-    };
-  }, []);
-
-  function handleGenerateInvite() {
-    clearInvite();
-    setGenerating(true);
-    ws.send({ type: "mesh:generate_invite", address: selectedAddress } as any);
-  }
-
-  function handlePair() {
-    var trimmed = pairCode.trim();
-    if (!trimmed) {
-      return;
-    }
-    setPairStatus("connecting");
-    setPairError(null);
-
-    if (pairTimeoutRef.current) clearTimeout(pairTimeoutRef.current);
-    pairTimeoutRef.current = setTimeout(function () {
-      setPairStatus(function (prev) {
-        if (prev === "connecting") {
-          setPairError("Pairing timed out. Check the code and try again.");
-          return "failed";
-        }
-        return prev;
-      });
-    }, 30000);
-
-    ws.send({ type: "mesh:pair", code: trimmed });
-  }
-
-  function handleCopyCode() {
-    if (!mesh.inviteCode) {
-      return;
-    }
-    navigator.clipboard.writeText(mesh.inviteCode).then(function () {
-      setCopied(true);
-      setTimeout(function () { setCopied(false); }, 2000);
-    });
-  }
-
-  if (!props.isOpen) {
-    return null;
-  }
-
-  return (
-    <div
-      ref={modalRef}
-      role="dialog"
-      aria-modal="true"
-      aria-label="Pair a node"
-      className="fixed inset-0 z-[10000] flex items-center justify-center bg-base-content/65 backdrop-blur-sm"
-      onClick={props.onClose}
-    >
-      <div
-        className="w-[440px] max-w-[calc(100vw-24px)] rounded-xl border border-base-300 bg-base-200 overflow-hidden shadow-2xl"
-        onClick={function (e) { e.stopPropagation(); }}
-      >
-        <div className="flex items-center justify-between px-5 py-4 border-b border-base-300">
-          <div className="text-[14px] font-semibold text-base-content">Pair a Node</div>
-          <button
-            onClick={props.onClose}
-            aria-label="Close"
-            className="btn btn-ghost btn-xs btn-square text-base-content/40 hover:text-base-content"
-          >
-            <X size={14} />
-          </button>
-        </div>
-
-        <div className="flex border-b border-base-300">
-          {(["generate", "enter"] as Tab[]).map(function (t) {
-            var label = t === "generate" ? "Generate Invite" : "Enter Code";
-            var isActive = tab === t;
-            return (
-              <button
-                key={t}
-                onClick={function () { setTab(t); }}
-                className={
-                  "flex-1 px-4 py-2.5 text-[13px] cursor-pointer transition-colors duration-[120ms] border-b-2 " +
-                  (isActive
-                    ? "font-semibold text-base-content border-primary"
-                    : "font-normal text-base-content/40 border-transparent hover:text-base-content/70")
-                }
-              >
-                {label}
-              </button>
-            );
-          })}
-        </div>
-
-        <div className="p-5">
-          {tab === "generate" && (
-            <div>
-              <div className="text-[12px] text-base-content/40 mb-4 leading-relaxed">
-                Generate an invite code on this machine and share it with the other node.
-                The code encodes this node&apos;s address and a one-time auth token.
-              </div>
-
-              {!mesh.inviteCode && !generating && addresses.length > 1 && (
-                <div className="mb-3">
-                  <label className="text-[11px] font-mono text-base-content/35 uppercase tracking-wider mb-1.5 block">
-                    Network interface
-                  </label>
-                  <select
-                    value={selectedAddress}
-                    onChange={function (e) { setSelectedAddress(e.target.value); }}
-                    className="select select-bordered select-sm w-full bg-base-100 text-base-content text-[13px] font-mono"
-                  >
-                    {addresses.map(function (a) {
-                      return (
-                        <option key={a.address} value={a.address}>
-                          {a.address} ({a.name})
-                        </option>
-                      );
-                    })}
-                  </select>
-                </div>
-              )}
-
-              {!mesh.inviteCode && !generating && (
-                <button
-                  onClick={handleGenerateInvite}
-                  disabled={!selectedAddress && addresses.length > 0}
-                  className="btn btn-primary btn-sm"
-                >
-                  Generate Invite Code
-                </button>
-              )}
-
-              {generating && !mesh.inviteCode && (
-                <div className="flex items-center gap-2 text-[13px] text-base-content/40">
-                  <Loader2 size={14} className="animate-spin text-primary" />
-                  Generating invite code...
-                </div>
-              )}
-
-              {mesh.inviteCode && (
-                <div>
-                  <div className="flex items-center gap-2 px-3.5 py-2.5 rounded bg-base-100 border border-base-300 mb-4">
-                    <code className="flex-1 font-mono text-[14px] font-semibold text-base-content tracking-[0.08em] break-all">
-                      {mesh.inviteCode}
-                    </code>
-                    <button
-                      onClick={handleCopyCode}
-                      title="Copy code"
-                      className={
-                        "btn btn-xs gap-1 flex-shrink-0 " +
-                        (copied ? "btn-success" : "btn-ghost border border-base-300")
-                      }
-                    >
-                      {copied ? <Check size={12} /> : <Copy size={12} />}
-                      {copied ? "Copied!" : "Copy"}
-                    </button>
-                  </div>
-
-                  <button
-                    onClick={handleGenerateInvite}
-                    className="text-[12px] text-base-content/40 underline cursor-pointer"
-                  >
-                    Generate new code
-                  </button>
-                </div>
-              )}
-            </div>
-          )}
-
-          {tab === "enter" && (
-            <div>
-              <div className="text-[12px] text-base-content/40 mb-4 leading-relaxed">
-                Paste the invite code generated on the other node to pair with it.
-              </div>
-
-              <input
-                ref={inputRef}
-                type="text"
-                value={pairCode}
-                onChange={function (e) {
-                  var raw = e.target.value.replace(/[^A-Za-z0-9]/g, "");
-                  var upper = raw.toUpperCase();
-                  if (upper.startsWith("LTCE")) raw = raw.slice(4);
-                  if (raw.length > 16) raw = raw.slice(0, 16);
-                  var chunks: string[] = [];
-                  for (var i = 0; i < raw.length; i += 4) {
-                    chunks.push(raw.slice(i, i + 4));
-                  }
-                  var formatted = chunks.length > 0 ? "LTCE-" + chunks.join("-") : "";
-                  setPairCode(formatted);
-                  if (pairStatus !== "idle") {
-                    setPairStatus("idle");
-                    setPairError(null);
-                  }
-                }}
-                onKeyDown={function (e) {
-                  if (e.key === "Enter") {
-                    handlePair();
-                  }
-                }}
-                placeholder="LTCE-XXXX-XXXX-XXXX-XXXX"
-                maxLength={24}
-                autoFocus
-                disabled={pairStatus === "connecting" || pairStatus === "paired"}
-                className="input input-bordered w-full bg-base-100 text-base-content font-mono text-[14px] tracking-[0.06em] mb-3 focus:border-primary"
-              />
-
-              {pairStatus === "idle" && (
-                <button
-                  onClick={handlePair}
-                  disabled={!pairCode.trim()}
-                  className={
-                    "btn btn-sm " +
-                    (pairCode.trim() ? "btn-primary" : "btn-ghost border border-base-300 cursor-not-allowed")
-                  }
-                >
-                  Pair
-                </button>
-              )}
-
-              {pairStatus === "connecting" && (
-                <div className="flex items-center gap-2 text-[13px] text-base-content/40">
-                  <span
-                    className="w-3 h-3 rounded-full border-2 border-primary border-t-transparent inline-block"
-                    style={{ animation: "spin 0.6s linear infinite" }}
-                  />
-                  Connecting...
-                </div>
-              )}
-
-              {pairStatus === "paired" && (
-                <div className="flex items-center gap-1.5 text-[13px] font-semibold text-success">
-                  <Check size={14} />
-                  Paired successfully!
-                </div>
-              )}
-
-              {pairStatus === "failed" && pairError && (
-                <div className="text-[12px] text-error mt-2">{pairError}</div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-});