@cryptiklemur/lattice 1.2.0 → 1.4.0

package/client/src/components/workspace/FileTree.tsx

@@ -0,0 +1,129 @@
+import { ChevronRight, FileIcon } from "lucide-react";
+import type { FileEntry } from "@lattice/shared";
+
+export interface TreeNode {
+  entry: FileEntry;
+  children: TreeNode[] | null;
+  expanded: boolean;
+}
+
+export 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;
+
+  function handleActivate() {
+    if (isDir) {
+      onToggle(node.entry.path);
+    } else {
+      onSelect(node.entry.path);
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleActivate();
+    }
+  }
+
+  return (
+    <div role="treeitem" aria-expanded={isDir ? node.expanded : undefined} aria-selected={isSelected}>
+      <div
+        tabIndex={0}
+        onClick={handleActivate}
+        onKeyDown={handleKeyDown}
+        className={
+          "flex items-center gap-1.5 py-[3px] pr-2 cursor-pointer text-[13px] rounded select-none outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200 " +
+          (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 role="group">
+          {node.children.map(function (child) {
+            return (
+              <FileTreeItem
+                key={child.entry.path}
+                node={child}
+                depth={depth + 1}
+                selectedPath={selectedPath}
+                onToggle={onToggle}
+                onSelect={onSelect}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface FileTreeProps {
+  nodes: TreeNode[];
+  selectedPath: string | null;
+  onToggle: (path: string) => void;
+  onSelect: (path: string) => void;
+}
+
+export function FileTree(props: FileTreeProps) {
+  var { nodes, selectedPath, onToggle, onSelect } = props;
+
+  return (
+    <div role="tree" aria-label="File tree">
+      {nodes.length === 0 ? (
+        <div className="px-2 py-3 text-[12px] text-base-content/40">
+          Loading...
+        </div>
+      ) : (
+        nodes.map(function (node) {
+          return (
+            <FileTreeItem
+              key={node.entry.path}
+              node={node}
+              depth={0}
+              selectedPath={selectedPath}
+              onToggle={onToggle}
+              onSelect={onSelect}
+            />
+          );
+        })
+      )}
+    </div>
+  );
+}

package/client/src/components/workspace/FileViewer.tsx

@@ -0,0 +1,211 @@
+import { useEffect, useRef, useState } from "react";
+import { Copy, Check, ExternalLink, FileCode, Eye } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import type { HighlighterCore } from "shiki";
+
+var highlighterPromise: Promise<HighlighterCore> | null = null;
+var loadedLanguages = new Set<string>();
+
+function getHighlighter(): Promise<HighlighterCore> {
+  if (!highlighterPromise) {
+    highlighterPromise = import("shiki").then(function (shiki) {
+      return shiki.createHighlighter({
+        themes: ["css-variables"],
+        langs: [],
+      });
+    });
+  }
+  return highlighterPromise;
+}
+
+async function highlightCode(code: string, lang: string): Promise<string> {
+  var highlighter = await getHighlighter();
+  var resolvedLang = lang === "text" ? "text" : lang;
+
+  if (resolvedLang !== "text" && !loadedLanguages.has(resolvedLang)) {
+    try {
+      await highlighter.loadLanguage(resolvedLang as any);
+      loadedLanguages.add(resolvedLang);
+    } catch {
+      resolvedLang = "text";
+    }
+  }
+
+  return highlighter.codeToHtml(code, {
+    lang: resolvedLang,
+    theme: "css-variables",
+  });
+}
+
+var EXT_TO_LANG: Record<string, string> = {
+  ts: "typescript",
+  tsx: "tsx",
+  js: "javascript",
+  jsx: "jsx",
+  json: "json",
+  md: "markdown",
+  css: "css",
+  scss: "scss",
+  html: "html",
+  xml: "xml",
+  yaml: "yaml",
+  yml: "yaml",
+  toml: "toml",
+  py: "python",
+  rs: "rust",
+  go: "go",
+  sh: "bash",
+  bash: "bash",
+  zsh: "bash",
+  sql: "sql",
+  graphql: "graphql",
+  dockerfile: "dockerfile",
+  makefile: "makefile",
+  vue: "vue",
+  svelte: "svelte",
+  lua: "lua",
+  rb: "ruby",
+  java: "java",
+  kt: "kotlin",
+  swift: "swift",
+  c: "c",
+  cpp: "cpp",
+  h: "c",
+  hpp: "cpp",
+  cs: "csharp",
+};
+
+function getLanguage(path: string): string {
+  var filename = path.split("/").pop() || "";
+  var lower = filename.toLowerCase();
+  if (lower === "dockerfile") return "dockerfile";
+  if (lower === "makefile") return "makefile";
+  var ext = filename.split(".").pop()?.toLowerCase() || "";
+  return EXT_TO_LANG[ext] || "text";
+}
+
+function isMarkdown(path: string): boolean {
+  return path.toLowerCase().endsWith(".md");
+}
+
+interface FileViewerProps {
+  path: string;
+  content: string;
+  editorUrl: string | null;
+}
+
+export function FileViewer(props: FileViewerProps) {
+  var { path, content, editorUrl } = props;
+  var [highlightedHtml, setHighlightedHtml] = useState<string | null>(null);
+  var [copied, setCopied] = useState(false);
+  var [showRendered, setShowRendered] = useState(true);
+  var copyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  var language = getLanguage(path);
+  var lineCount = content.split("\n").length;
+  var isMd = isMarkdown(path);
+  var filename = path.split("/").pop() || path;
+
+  useEffect(function () {
+    setHighlightedHtml(null);
+    if (isMd && showRendered) return;
+
+    var cancelled = false;
+    highlightCode(content, language).then(function (html) {
+      if (cancelled) return;
+      setHighlightedHtml(html);
+    }).catch(function () {
+      // fallback to plain text
+    });
+
+    return function () {
+      cancelled = true;
+    };
+  }, [content, language, isMd, showRendered]);
+
+  function handleCopy() {
+    navigator.clipboard.writeText(content);
+    setCopied(true);
+    if (copyTimeoutRef.current) {
+      clearTimeout(copyTimeoutRef.current);
+    }
+    copyTimeoutRef.current = setTimeout(function () {
+      setCopied(false);
+    }, 2000);
+  }
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      <div className="h-9 flex-shrink-0 flex items-center gap-2 px-4 border-b border-base-content/15 bg-base-200">
+        <FileCode size={13} className="text-base-content/40 flex-shrink-0" />
+        <span className="text-[12px] font-mono text-base-content/60 truncate">{filename}</span>
+        <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-base-300 text-base-content/40 uppercase flex-shrink-0">
+          {language}
+        </span>
+        <span className="text-[10px] font-mono text-base-content/30 flex-shrink-0">
+          {lineCount} lines
+        </span>
+        <div className="flex-1" />
+        {isMd && (
+          <button
+            onClick={function () { setShowRendered(!showRendered); }}
+            className={
+              "btn btn-ghost btn-xs gap-1 text-[11px] " +
+              (showRendered ? "text-primary" : "text-base-content/50")
+            }
+            title={showRendered ? "Show source" : "Show rendered"}
+          >
+            <Eye size={13} />
+            {showRendered ? "Source" : "Rendered"}
+          </button>
+        )}
+        <button
+          onClick={handleCopy}
+          className="btn btn-ghost btn-xs text-base-content/50 hover:text-base-content"
+          title="Copy to clipboard"
+        >
+          {copied ? <Check size={13} className="text-success" /> : <Copy size={13} />}
+        </button>
+        {editorUrl && (
+          <a
+            href={editorUrl}
+            className="btn btn-ghost btn-xs text-base-content/50 hover:text-base-content"
+            title="Open in editor"
+          >
+            <ExternalLink size={13} />
+          </a>
+        )}
+      </div>
+
+      <div className="flex-1 overflow-auto">
+        {isMd && showRendered ? (
+          <div className="prose prose-sm max-w-none p-4">
+            <ReactMarkdown>{content}</ReactMarkdown>
+          </div>
+        ) : highlightedHtml ? (
+          <div
+            className="p-4 text-[13px] leading-relaxed [&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:!p-0 [&_code]:!bg-transparent"
+            style={{
+              "--shiki-foreground": "var(--base05)",
+              "--shiki-background": "transparent",
+              "--shiki-token-constant": "var(--base09)",
+              "--shiki-token-string": "var(--base0B)",
+              "--shiki-token-comment": "var(--base03)",
+              "--shiki-token-keyword": "var(--base0E)",
+              "--shiki-token-parameter": "var(--base08)",
+              "--shiki-token-function": "var(--base0D)",
+              "--shiki-token-string-expression": "var(--base0B)",
+              "--shiki-token-punctuation": "var(--base05)",
+              "--shiki-token-link": "var(--base0D)",
+            } as React.CSSProperties}
+            dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+          />
+        ) : (
+          <pre className="m-0 p-4 text-[13px] font-mono text-base-content leading-relaxed whitespace-pre-wrap break-words">
+            {content}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}

package/client/src/components/workspace/NoteCard.tsx

@@ -0,0 +1,119 @@
+import { useState, useRef } from "react";
+import { Trash2 } from "lucide-react";
+import type { StickyNote } from "@lattice/shared";
+
+interface NoteCardProps {
+  note: StickyNote;
+  onUpdate: (id: string, content: string) => void;
+  onDelete: (id: string) => void;
+  disabled?: boolean;
+}
+
+export function NoteCard(props: NoteCardProps) {
+  var { note, onUpdate, onDelete, disabled } = props;
+  var [editing, setEditing] = useState(!note.content);
+  var [draft, setDraft] = useState(note.content);
+  var [confirming, setConfirming] = useState(false);
+  var originalRef = useRef(note.content);
+
+  function handleClick() {
+    if (disabled) return;
+    if (!editing) {
+      originalRef.current = note.content;
+      setDraft(note.content);
+      setEditing(true);
+    }
+  }
+
+  function handleBlur() {
+    if (editing) {
+      if (draft.trim() && draft.trim() !== originalRef.current) {
+        onUpdate(note.id, draft.trim());
+      }
+      setEditing(false);
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === "Escape") {
+      setDraft(originalRef.current);
+      setEditing(false);
+    }
+    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      handleBlur();
+    }
+  }
+
+  var updatedDate = new Date(note.updatedAt).toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+
+  return (
+    <div
+      className="card bg-base-200 border border-base-content/15 outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200"
+      tabIndex={editing ? undefined : 0}
+      role={editing ? undefined : "button"}
+      onClick={editing ? undefined : handleClick}
+      onKeyDown={editing ? undefined : function (e) {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      }}
+      style={{ cursor: editing ? "default" : "pointer" }}
+    >
+      <div className="card-body p-3">
+        {editing ? (
+          <textarea
+            autoFocus
+            value={draft}
+            onChange={function (e) { setDraft(e.target.value); }}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+            placeholder="Type your note..."
+            className="textarea textarea-bordered w-full min-h-[80px] bg-base-300 text-base-content text-[13px] resize-y leading-relaxed"
+          />
+        ) : (
+          <div className="text-[13px] whitespace-pre-wrap break-words leading-relaxed min-h-12">
+            {note.content ? (
+              <span className="text-base-content">{note.content}</span>
+            ) : (
+              <span className="text-base-content/30 italic">Click to add a note...</span>
+            )}
+          </div>
+        )}
+        <div className="flex items-center justify-between mt-2">
+          <span className="text-[11px] text-base-content/40">{updatedDate}</span>
+          {confirming ? (
+            <div className="flex gap-1.5">
+              <button
+                onClick={function (e) { e.stopPropagation(); onDelete(note.id); }}
+                className="btn btn-error btn-xs outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200"
+              >
+                Delete
+              </button>
+              <button
+                onClick={function (e) { e.stopPropagation(); setConfirming(false); }}
+                className="btn btn-ghost btn-xs border border-base-content/15 outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200"
+              >
+                Cancel
+              </button>
+            </div>
+          ) : (
+            <button
+              onClick={function (e) { e.stopPropagation(); setConfirming(true); }}
+              disabled={disabled}
+              className="btn btn-ghost btn-xs border border-base-content/15 text-base-content/50 outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200"
+              aria-label="Delete note"
+            >
+              <Trash2 className="!size-3" />
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/client/src/components/workspace/NotesView.tsx

@@ -0,0 +1,102 @@
+import { useCallback, useEffect, useState } from "react";
+import { StickyNote as StickyNoteIcon } from "lucide-react";
+import type { StickyNote, ServerMessage } from "@lattice/shared";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { useSession } from "../../hooks/useSession";
+import { useOnline } from "../../hooks/useOnline";
+import { NoteCard } from "./NoteCard";
+
+export function NotesView() {
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var { activeProjectSlug } = useSession();
+  var online = useOnline();
+  var [notes, setNotes] = useState<StickyNote[]>([]);
+
+  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", projectSlug: activeProjectSlug ?? undefined });
+    return function () {
+      unsubscribe("notes:list_result", handleMessage);
+      unsubscribe("notes:created", handleMessage);
+      unsubscribe("notes:updated", handleMessage);
+      unsubscribe("notes:deleted", handleMessage);
+    };
+  }, [send, subscribe, unsubscribe, handleMessage, activeProjectSlug]);
+
+  function handleCreate() {
+    send({ type: "notes:create", content: "", projectSlug: activeProjectSlug ?? undefined });
+  }
+
+  function handleUpdate(id: string, content: string) {
+    send({ type: "notes:update", id, content });
+  }
+
+  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-content/15">
+        <span className="text-[13px] font-semibold text-base-content">Notes</span>
+        <button
+          onClick={handleCreate}
+          disabled={!online}
+          className="btn btn-primary btn-xs"
+        >
+          New Note
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-auto p-3">
+        {notes.length === 0 ? (
+          <div className="flex flex-col items-center justify-center text-center mt-16 gap-3">
+            <StickyNoteIcon size={28} className="text-base-content/15" />
+            <div>
+              <div className="text-[13px] text-base-content/40">No notes for this project</div>
+              <div className="text-[11px] text-base-content/30 mt-1">Quick-capture ideas, reminders, or context. Click "New Note" to start.</div>
+            </div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2.5">
+            {notes.map(function (note) {
+              return (
+                <NoteCard
+                  key={note.id}
+                  note={note}
+                  onUpdate={handleUpdate}
+                  onDelete={handleDelete}
+                  disabled={!online}
+                />
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/client/src/components/workspace/ScheduledTasksView.tsx

@@ -0,0 +1,117 @@
+import { useCallback, useEffect, useState } from "react";
+import { Calendar } from "lucide-react";
+import type { ScheduledTask, ServerMessage } from "@lattice/shared";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { useSession } from "../../hooks/useSession";
+import { useOnline } from "../../hooks/useOnline";
+import { TaskCard } from "./TaskCard";
+import { TaskEditModal } from "./TaskEditModal";
+
+export function ScheduledTasksView() {
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var { activeProjectSlug } = useSession();
+  var online = useOnline();
+  var [tasks, setTasks] = useState<ScheduledTask[]>([]);
+  var [editingTask, setEditingTask] = useState<ScheduledTask | null | undefined>(undefined);
+
+  var handleMessage = useCallback(function (msg: ServerMessage) {
+    if (msg.type === "scheduler:tasks") {
+      setTasks(msg.tasks);
+      return;
+    }
+    if (msg.type === "scheduler:task_created") {
+      setTasks(function (prev) { return [...prev, msg.task]; });
+      return;
+    }
+    if (msg.type === "scheduler:task_updated") {
+      setTasks(function (prev) {
+        return prev.map(function (t) { return t.id === msg.task.id ? msg.task : t; });
+      });
+      return;
+    }
+  }, []);
+
+  useEffect(function () {
+    subscribe("scheduler:tasks", handleMessage);
+    subscribe("scheduler:task_created", handleMessage);
+    subscribe("scheduler:task_updated", handleMessage);
+    send({ type: "scheduler:list" });
+    return function () {
+      unsubscribe("scheduler:tasks", handleMessage);
+      unsubscribe("scheduler:task_created", handleMessage);
+      unsubscribe("scheduler:task_updated", handleMessage);
+    };
+  }, [send, subscribe, unsubscribe, handleMessage]);
+
+  var filtered = tasks.filter(function (t) { return t.projectSlug === activeProjectSlug; });
+
+  function handleToggle(taskId: string) {
+    send({ type: "scheduler:toggle", taskId });
+  }
+
+  function handleDelete(taskId: string) {
+    send({ type: "scheduler:delete", taskId });
+    setTasks(function (prev) { return prev.filter(function (t) { return t.id !== taskId; }); });
+  }
+
+  function handleSave(data: { name: string; prompt: string; cron: string }) {
+    if (editingTask === null) {
+      if (!activeProjectSlug) return;
+      send({ type: "scheduler:create", name: data.name, prompt: data.prompt, cron: data.cron, projectSlug: activeProjectSlug });
+    } else if (editingTask) {
+      send({ type: "scheduler:update", taskId: editingTask.id, name: data.name, prompt: data.prompt, cron: data.cron });
+    }
+    setEditingTask(undefined);
+  }
+
+  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-content/15">
+        <span className="text-[13px] font-semibold text-base-content">Scheduled Tasks</span>
+        <button
+          onClick={function () { setEditingTask(null); }}
+          disabled={!online}
+          className="btn btn-primary btn-xs"
+        >
+          New Task
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-auto p-3">
+        {filtered.length === 0 ? (
+          <div className="flex flex-col items-center justify-center text-center mt-16 gap-3">
+            <Calendar size={28} className="text-base-content/15" />
+            <div>
+              <div className="text-[13px] text-base-content/40">No scheduled tasks for this project</div>
+              <div className="text-[11px] text-base-content/30 mt-1">Automate Claude prompts on a cron schedule. Click "New Task" to create one.</div>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {filtered.map(function (task) {
+              return (
+                <TaskCard
+                  key={task.id}
+                  task={task}
+                  onToggle={handleToggle}
+                  onEdit={function (t) { setEditingTask(t); }}
+                  onDelete={handleDelete}
+                  disabled={!online}
+                />
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {editingTask !== undefined && (
+        <TaskEditModal
+          task={editingTask}
+          projectSlug={activeProjectSlug ?? ""}
+          onSave={handleSave}
+          onClose={function () { setEditingTask(undefined); }}
+        />
+      )}
+    </div>
+  );
+}