@cryptiklemur/lattice 0.0.0

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

@@ -0,0 +1,168 @@
+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 "@lattice/shared";
+
+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 } = 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);
+    send({ type: "session:list_request", projectSlug: sidebar.activeProjectSlug });
+
+    return function () {
+      unsubscribe("session:list", handleSessionList);
+    };
+  }, [sidebar.activeProjectSlug]);
+
+  function goToSection(section: ProjectSettingsSection) {
+    sidebar.openProjectSettings(section);
+  }
+
+  function goToSession(sessionId: string) {
+    if (activeProject) {
+      sidebar.setActiveSessionId(sessionId);
+    }
+  }
+
+  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="text-[13px] text-base-content/40 py-4">Loading...</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.id); }}
+                      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/client/src/components/mesh/NodeBadge.tsx

@@ -0,0 +1,24 @@
+import type { NodeInfo } from "@lattice/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/client/src/components/mesh/PairingDialog.tsx

@@ -0,0 +1,281 @@
+import { useState, useEffect, useCallback } from "react";
+import { X, Copy, Check } from "lucide-react";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { useMesh } from "../../hooks/useMesh";
+import { clearInvite } from "../../stores/mesh";
+import type { ServerMessage } from "@lattice/shared";
+
+type Tab = "generate" | "enter";
+type PairStatus = "idle" | "connecting" | "paired" | "failed";
+
+interface PairingDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export 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 handleKeyDown = useCallback(function (e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      props.onClose();
+    }
+  }, [props.onClose]);
+
+  useEffect(function () {
+    if (!props.isOpen) {
+      return;
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return function () {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [props.isOpen, handleKeyDown]);
+
+  useEffect(function () {
+    if (!props.isOpen) {
+      clearInvite();
+      setPairCode("");
+      setPairStatus("idle");
+      setPairError(null);
+      setCopied(false);
+      setTab("generate");
+    }
+  }, [props.isOpen]);
+
+  useEffect(function () {
+    if (pairStatus !== "connecting") {
+      return;
+    }
+
+    function handler(msg: ServerMessage) {
+      if (msg.type === "mesh:paired") {
+        setPairStatus("paired");
+        setPairError(null);
+      }
+    }
+
+    ws.subscribe("mesh:paired", handler);
+    return function () {
+      ws.unsubscribe("mesh:paired", handler);
+    };
+  }, [ws, pairStatus]);
+
+  function handleGenerateInvite() {
+    clearInvite();
+    mesh.generateInvite();
+  }
+
+  function handlePair() {
+    var trimmed = pairCode.trim();
+    if (!trimmed) {
+      return;
+    }
+    setPairStatus("connecting");
+    setPairError(null);
+
+    var timeout = 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 });
+
+    return function () {
+      clearTimeout(timeout);
+    };
+  }
+
+  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
+      role="dialog"
+      aria-modal="true"
+      aria-label="Pair a node"
+      className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/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 && (
+                <button
+                  onClick={handleGenerateInvite}
+                  className="btn btn-primary btn-sm"
+                >
+                  Generate Invite Code
+                </button>
+              )}
+
+              {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>
+
+                  {mesh.inviteQr && (
+                    <div className="flex justify-center mb-4">
+                      <img
+                        src={mesh.inviteQr}
+                        alt="QR code for invite"
+                        className="w-40 h-40 rounded border border-base-300"
+                        style={{ imageRendering: "pixelated" }}
+                      />
+                    </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
+                type="text"
+                value={pairCode}
+                onChange={function (e) {
+                  setPairCode(e.target.value);
+                  if (pairStatus !== "idle") {
+                    setPairStatus("idle");
+                    setPairError(null);
+                  }
+                }}
+                onKeyDown={function (e) {
+                  if (e.key === "Enter") {
+                    handlePair();
+                  }
+                }}
+                placeholder="LTCE-XXXX-XXXX"
+                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>
+  );
+}