@cryptiklemur/lattice 0.0.0

package/client/src/components/panels/FileBrowser.tsx

@@ -0,0 +1,241 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ChevronRight, FileIcon } from "lucide-react";
+import type { FileEntry, FsListResultMessage, FsReadResultMessage } from "@lattice/shared";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import type { ServerMessage } from "@lattice/shared";
+
+interface TreeNode {
+  entry: FileEntry;
+  children: TreeNode[] | null;
+  expanded: boolean;
+}
+
+function buildNodes(entries: FileEntry[]): TreeNode[] {
+  return entries.map(function (entry) {
+    return { entry, children: null, expanded: false };
+  });
+}
+
+interface FileTreeItemProps {
+  node: TreeNode;
+  depth: number;
+  selectedPath: string | null;
+  onToggle: (path: string) => void;
+  onSelect: (path: string) => void;
+}
+
+function FileTreeItem(props: FileTreeItemProps) {
+  var { node, depth, selectedPath, onToggle, onSelect } = props;
+  var isSelected = selectedPath === node.entry.path;
+  var isDir = node.entry.isDirectory;
+
+  return (
+    <div>
+      <div
+        onClick={function () {
+          if (isDir) {
+            onToggle(node.entry.path);
+          } else {
+            onSelect(node.entry.path);
+          }
+        }}
+        className={
+          "flex items-center gap-1.5 py-[3px] pr-2 cursor-pointer text-[13px] rounded select-none " +
+          (isSelected ? "bg-base-300 text-primary" : "text-base-content hover:bg-base-200")
+        }
+        style={{ paddingLeft: (8 + depth * 16) + "px" }}
+      >
+        {isDir ? (
+          <ChevronRight
+            size={12}
+            className="flex-shrink-0 text-base-content/40 transition-transform duration-[120ms]"
+            style={{ transform: node.expanded ? "rotate(90deg)" : "none" }}
+          />
+        ) : (
+          <FileIcon
+            size={12}
+            className="flex-shrink-0 text-base-content/40"
+          />
+        )}
+        <span
+          className={
+            "truncate " +
+            (isDir ? "text-info" : "text-base-content")
+          }
+        >
+          {node.entry.name}
+        </span>
+      </div>
+      {isDir && node.expanded && node.children && (
+        <div>
+          {node.children.map(function (child) {
+            return (
+              <FileTreeItem
+                key={child.entry.path}
+                node={child}
+                depth={depth + 1}
+                selectedPath={selectedPath}
+                onToggle={onToggle}
+                onSelect={onSelect}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function FileBrowser() {
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var [rootNodes, setRootNodes] = useState<TreeNode[]>([]);
+  var [selectedPath, setSelectedPath] = useState<string | null>(null);
+  var [fileContent, setFileContent] = useState<string | null>(null);
+  var [loadingContent, setLoadingContent] = useState(false);
+  var nodesRef = useRef<TreeNode[]>([]);
+
+  nodesRef.current = rootNodes;
+
+  var handleListResult = useCallback(function (msg: ServerMessage) {
+    var listMsg = msg as FsListResultMessage;
+    var newNodes = buildNodes(listMsg.entries);
+
+    if (listMsg.path === "" || listMsg.path === ".") {
+      setRootNodes(newNodes);
+      return;
+    }
+
+    function updateNodes(nodes: TreeNode[]): TreeNode[] {
+      return nodes.map(function (node) {
+        if (node.entry.path === listMsg.path) {
+          return Object.assign({}, node, { children: newNodes, expanded: true });
+        }
+        if (node.children) {
+          return Object.assign({}, node, { children: updateNodes(node.children) });
+        }
+        return node;
+      });
+    }
+
+    setRootNodes(function (prev) {
+      return updateNodes(prev);
+    });
+  }, []);
+
+  var handleReadResult = useCallback(function (msg: ServerMessage) {
+    var readMsg = msg as FsReadResultMessage;
+    setFileContent(readMsg.content);
+    setLoadingContent(false);
+  }, []);
+
+  var handleFsChanged = useCallback(function (msg: ServerMessage) {
+    var changedPath = (msg as { path: string }).path;
+    if (changedPath === selectedPath) {
+      send({ type: "fs:read", path: changedPath });
+    }
+  }, [selectedPath, send]);
+
+  useEffect(function () {
+    subscribe("fs:list_result", handleListResult);
+    subscribe("fs:read_result", handleReadResult);
+    subscribe("fs:changed", handleFsChanged);
+
+    send({ type: "fs:list", path: "." });
+
+    return function () {
+      unsubscribe("fs:list_result", handleListResult);
+      unsubscribe("fs:read_result", handleReadResult);
+      unsubscribe("fs:changed", handleFsChanged);
+    };
+  }, [handleListResult, handleReadResult, handleFsChanged, send, subscribe, unsubscribe]);
+
+  function handleToggle(path: string) {
+    function findAndToggle(nodes: TreeNode[]): TreeNode[] {
+      return nodes.map(function (node) {
+        if (node.entry.path === path) {
+          if (!node.expanded && !node.children) {
+            send({ type: "fs:list", path });
+            return Object.assign({}, node, { expanded: true });
+          }
+          return Object.assign({}, node, { expanded: !node.expanded });
+        }
+        if (node.children) {
+          return Object.assign({}, node, { children: findAndToggle(node.children) });
+        }
+        return node;
+      });
+    }
+    setRootNodes(function (prev) {
+      return findAndToggle(prev);
+    });
+  }
+
+  function handleSelect(path: string) {
+    setSelectedPath(path);
+    setFileContent(null);
+    setLoadingContent(true);
+    send({ type: "fs:read", path });
+  }
+
+  return (
+    <div className="flex h-full w-full overflow-hidden bg-base-100">
+      <div className="w-[220px] flex-shrink-0 border-r border-base-300 overflow-y-auto p-2">
+        <div className="text-[11px] font-semibold tracking-[0.06em] uppercase text-base-content/40 px-2 pb-2 pt-1">
+          Files
+        </div>
+        {rootNodes.length === 0 ? (
+          <div className="px-2 py-3 text-[12px] text-base-content/40">
+            Loading...
+          </div>
+        ) : (
+          rootNodes.map(function (node) {
+            return (
+              <FileTreeItem
+                key={node.entry.path}
+                node={node}
+                depth={0}
+                selectedPath={selectedPath}
+                onToggle={handleToggle}
+                onSelect={handleSelect}
+              />
+            );
+          })
+        )}
+      </div>
+
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {selectedPath && (
+          <div className="h-9 flex-shrink-0 flex items-center px-4 border-b border-base-300 bg-base-200 text-[12px] text-base-content/60 font-mono overflow-hidden">
+            <span className="truncate">{selectedPath}</span>
+          </div>
+        )}
+
+        <div className="flex-1 overflow-auto">
+          {!selectedPath && (
+            <div className="h-full flex items-center justify-center text-base-content/40 text-[13px]">
+              Select a file to view its contents
+            </div>
+          )}
+
+          {selectedPath && loadingContent && (
+            <div className="h-full flex items-center justify-center text-base-content/40 text-[13px]">
+              Loading...
+            </div>
+          )}
+
+          {selectedPath && !loadingContent && fileContent !== null && (
+            <pre className="m-0 p-4 text-[13px] font-mono text-base-content leading-relaxed whitespace-pre-wrap break-words">
+              {fileContent}
+            </pre>
+          )}
+
+          {selectedPath && !loadingContent && fileContent === null && (
+            <div className="h-full flex items-center justify-center text-base-content/40 text-[13px]">
+              Cannot display this file (binary or too large)
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/client/src/components/panels/StickyNotes.tsx

@@ -0,0 +1,187 @@
+import { useCallback, useEffect, useState } from "react";
+import type { StickyNote, ServerMessage } from "@lattice/shared";
+import { useWebSocket } from "../../hooks/useWebSocket";
+
+interface NoteCardProps {
+  note: StickyNote;
+  onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
+}
+
+function NoteCard(props: NoteCardProps) {
+  var { note, onEdit, onDelete } = props;
+  return (
+    <div className="card bg-base-200 border border-base-300">
+      <div className="card-body p-3">
+        <div className="text-[13px] text-base-content whitespace-pre-wrap break-words leading-relaxed min-h-12">
+          {note.content}
+        </div>
+        <div className="flex gap-1.5 justify-end mt-2">
+          <button
+            onClick={function () { onEdit(note.id); }}
+            className="btn btn-ghost btn-xs border border-base-300"
+          >
+            Edit
+          </button>
+          <button
+            onClick={function () { onDelete(note.id); }}
+            className="btn btn-ghost btn-xs border border-base-300 text-base-content/60"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface EditModalProps {
+  initial: string;
+  onSave: (content: string) => void;
+  onCancel: () => void;
+}
+
+function EditModal(props: EditModalProps) {
+  var { initial, onSave, onCancel } = props;
+  var [content, setContent] = useState(initial);
+
+  return (
+    <div className="fixed inset-0 bg-black/50 z-[1000] flex items-center justify-center" role="dialog" aria-modal="true" aria-label="Edit note">
+      <div className="card bg-base-200 border border-base-300 w-[400px] max-w-[90vw] shadow-2xl">
+        <div className="card-body p-5">
+          <div className="text-[13px] font-semibold text-base-content mb-3">Edit Note</div>
+          <textarea
+            autoFocus
+            value={content}
+            onChange={function (e) { setContent(e.target.value); }}
+            className="textarea textarea-bordered w-full min-h-[120px] bg-base-300 text-base-content text-[13px] resize-y"
+          />
+          <div className="flex gap-2 justify-end mt-3">
+            <button
+              onClick={onCancel}
+              className="btn btn-ghost btn-sm"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={function () { onSave(content); }}
+              className="btn btn-primary btn-sm"
+            >
+              Save
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function StickyNotes() {
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var [notes, setNotes] = useState<StickyNote[]>([]);
+  var [editingId, setEditingId] = useState<string | null>(null);
+  var [creating, setCreating] = useState(false);
+
+  var editingNote = editingId ? notes.find(function (n) { return n.id === editingId; }) : null;
+
+  var handleMessage = useCallback(function (msg: ServerMessage) {
+    if (msg.type === "notes:list_result") {
+      setNotes(msg.notes);
+      return;
+    }
+    if (msg.type === "notes:created") {
+      setNotes(function (prev) { return [...prev, msg.note]; });
+      return;
+    }
+    if (msg.type === "notes:updated") {
+      setNotes(function (prev) {
+        return prev.map(function (n) { return n.id === msg.note.id ? msg.note : n; });
+      });
+      return;
+    }
+    if (msg.type === "notes:deleted") {
+      setNotes(function (prev) { return prev.filter(function (n) { return n.id !== msg.id; }); });
+      return;
+    }
+  }, []);
+
+  useEffect(function () {
+    subscribe("notes:list_result", handleMessage);
+    subscribe("notes:created", handleMessage);
+    subscribe("notes:updated", handleMessage);
+    subscribe("notes:deleted", handleMessage);
+    send({ type: "notes:list" });
+    return function () {
+      unsubscribe("notes:list_result", handleMessage);
+      unsubscribe("notes:created", handleMessage);
+      unsubscribe("notes:updated", handleMessage);
+      unsubscribe("notes:deleted", handleMessage);
+    };
+  }, [send, subscribe, unsubscribe, handleMessage]);
+
+  function handleCreate(content: string) {
+    if (content.trim()) {
+      send({ type: "notes:create", content: content.trim() });
+    }
+    setCreating(false);
+  }
+
+  function handleEdit(content: string) {
+    if (editingId && content.trim()) {
+      send({ type: "notes:update", id: editingId, content: content.trim() });
+    }
+    setEditingId(null);
+  }
+
+  function handleDelete(id: string) {
+    send({ type: "notes:delete", id });
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-base-100">
+      <div className="flex items-center justify-between px-4 py-3 border-b border-base-300">
+        <span className="text-[13px] font-semibold text-base-content">Sticky Notes</span>
+        <button
+          onClick={function () { setCreating(true); }}
+          className="btn btn-primary btn-xs"
+        >
+          New Note
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-auto p-3 flex flex-col gap-2.5">
+        {notes.length === 0 && (
+          <div className="text-base-content/50 text-[13px] text-center mt-10">
+            No notes yet. Create one to get started.
+          </div>
+        )}
+        {notes.map(function (note) {
+          return (
+            <NoteCard
+              key={note.id}
+              note={note}
+              onEdit={setEditingId}
+              onDelete={handleDelete}
+            />
+          );
+        })}
+      </div>
+
+      {creating && (
+        <EditModal
+          initial=""
+          onSave={handleCreate}
+          onCancel={function () { setCreating(false); }}
+        />
+      )}
+
+      {editingNote && (
+        <EditModal
+          initial={editingNote.content}
+          onSave={handleEdit}
+          onCancel={function () { setEditingId(null); }}
+        />
+      )}
+    </div>
+  );
+}

package/client/src/components/panels/Terminal.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useRef, useState } from "react";
+import { Terminal as XTerm } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import { WebLinksAddon } from "@xterm/addon-web-links";
+import "@xterm/xterm/css/xterm.css";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import type { ServerMessage, TerminalCreatedMessage, TerminalOutputMessage } from "@lattice/shared";
+
+function getXtermTheme(): Record<string, string> {
+  var root = document.documentElement;
+  var cs = getComputedStyle(root);
+
+  function resolveVar(prop: string, fallback: string): string {
+    var val = cs.getPropertyValue(prop).trim();
+    return val || fallback;
+  }
+
+  return {
+    background: resolveVar("--base00", "#0d0d0d"),
+    foreground: resolveVar("--base05", "#d4d4d4"),
+    cursor: resolveVar("--base05", "#d4d4d4"),
+    selectionBackground: resolveVar("--base02", "#264f78"),
+    black: resolveVar("--base00", "#1e1e1e"),
+    red: resolveVar("--base08", "#f44747"),
+    green: resolveVar("--base0B", "#4ec9b0"),
+    yellow: resolveVar("--base0A", "#dcdcaa"),
+    blue: resolveVar("--base0D", "#569cd6"),
+    magenta: resolveVar("--base0E", "#c586c0"),
+    cyan: resolveVar("--base0C", "#9cdcfe"),
+    white: resolveVar("--base05", "#d4d4d4"),
+    brightBlack: resolveVar("--base03", "#808080"),
+    brightRed: resolveVar("--base08", "#f44747"),
+    brightGreen: resolveVar("--base0B", "#4ec9b0"),
+    brightYellow: resolveVar("--base0A", "#dcdcaa"),
+    brightBlue: resolveVar("--base0D", "#569cd6"),
+    brightMagenta: resolveVar("--base0E", "#c586c0"),
+    brightCyan: resolveVar("--base0C", "#9cdcfe"),
+    brightWhite: resolveVar("--base07", "#ffffff"),
+  };
+}
+
+export function Terminal() {
+  var containerRef = useRef<HTMLDivElement | null>(null);
+  var xtermRef = useRef<XTerm | null>(null);
+  var fitAddonRef = useRef<FitAddon | null>(null);
+  var termIdRef = useRef<string | null>(null);
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var [ready, setReady] = useState(false);
+
+  useEffect(function() {
+    if (!containerRef.current) {
+      return;
+    }
+
+    var term = new XTerm({
+      cursorBlink: true,
+      fontFamily: getComputedStyle(document.documentElement).getPropertyValue("--font-mono").trim() || "JetBrains Mono, monospace",
+      fontSize: 13,
+      theme: getXtermTheme(),
+    });
+
+    var fitAddon = new FitAddon();
+    var webLinksAddon = new WebLinksAddon();
+    term.loadAddon(fitAddon);
+    term.loadAddon(webLinksAddon);
+    term.open(containerRef.current);
+    fitAddon.fit();
+
+    xtermRef.current = term;
+    fitAddonRef.current = fitAddon;
+
+    send({ type: "terminal:create" });
+
+    function onCreated(msg: ServerMessage) {
+      var created = msg as TerminalCreatedMessage;
+      termIdRef.current = created.termId;
+      setReady(true);
+    }
+
+    function onOutput(msg: ServerMessage) {
+      var output = msg as TerminalOutputMessage;
+      if (xtermRef.current && output.termId === termIdRef.current) {
+        xtermRef.current.write(output.data);
+      }
+    }
+
+    subscribe("terminal:created", onCreated);
+    subscribe("terminal:output", onOutput);
+
+    term.onData(function(data: string) {
+      var termId = termIdRef.current;
+      if (termId) {
+        send({ type: "terminal:input", termId: termId, data: data });
+      }
+    });
+
+    var resizeObserver = new ResizeObserver(function() {
+      if (fitAddonRef.current) {
+        fitAddonRef.current.fit();
+        var termId = termIdRef.current;
+        var dim = fitAddonRef.current.proposeDimensions();
+        if (termId && dim) {
+          send({ type: "terminal:resize", termId: termId, cols: dim.cols, rows: dim.rows });
+        }
+      }
+    });
+
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return function() {
+      unsubscribe("terminal:created", onCreated);
+      unsubscribe("terminal:output", onOutput);
+      resizeObserver.disconnect();
+      term.dispose();
+      xtermRef.current = null;
+      fitAddonRef.current = null;
+    };
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className="w-full h-full min-h-[200px] overflow-hidden bg-base-100"
+    />
+  );
+}