@cryptiklemur/lattice 4.0.2 → 5.0.0

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

@@ -1,211 +0,0 @@
-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/src/client/components/workspace/NoteCard.tsx

@@ -1,120 +0,0 @@
-import { useState, useRef } from "react";
-import { Trash2 } from "lucide-react";
-import type { StickyNote } from "#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..."
-            aria-label="Note content"
-            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/src/client/components/workspace/NotesView.tsx

@@ -1,102 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { StickyNote as StickyNoteIcon } from "lucide-react";
-import type { StickyNote, ServerMessage } from "#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/src/client/components/workspace/ScheduledTasksView.tsx

@@ -1,117 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { Calendar } from "lucide-react";
-import type { ScheduledTask, ServerMessage } from "#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>
-  );
-}

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

@@ -1,81 +0,0 @@
-import React, { useRef, useCallback, useEffect, useState } from "react";
-
-interface SplitPaneProps {
-  direction: "horizontal" | "vertical";
-  ratio: number;
-  onRatioChange: (ratio: number) => void;
-  children: [React.ReactNode, React.ReactNode];
-}
-
-export function SplitPane({ direction, ratio, onRatioChange, children }: SplitPaneProps) {
-  var containerRef = useRef<HTMLDivElement>(null);
-  var [isDragging, setIsDragging] = useState(false);
-
-  var handleMouseDown = useCallback(function (e: React.MouseEvent) {
-    e.preventDefault();
-    setIsDragging(true);
-  }, []);
-
-  useEffect(function () {
-    if (!isDragging) return;
-
-    function handleMouseMove(e: MouseEvent) {
-      var container = containerRef.current;
-      if (!container) return;
-      var rect = container.getBoundingClientRect();
-      var newRatio: number;
-      if (direction === "horizontal") {
-        newRatio = (e.clientX - rect.left) / rect.width;
-      } else {
-        newRatio = (e.clientY - rect.top) / rect.height;
-      }
-      onRatioChange(newRatio);
-    }
-
-    function handleMouseUp() {
-      setIsDragging(false);
-    }
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    return function () {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging, direction, onRatioChange]);
-
-  var isHorizontal = direction === "horizontal";
-  var firstSize = (ratio * 100) + "%";
-  var secondSize = ((1 - ratio) * 100) + "%";
-
-  return (
-    <div
-      ref={containerRef}
-      className={"flex h-full w-full overflow-hidden " + (isHorizontal ? "flex-row" : "flex-col")}
-      style={isDragging ? { userSelect: "none" } : undefined}
-    >
-      <div
-        className="overflow-hidden"
-        style={isHorizontal ? { width: firstSize, height: "100%" } : { height: firstSize, width: "100%" }}
-      >
-        {children[0]}
-      </div>
-      <div
-        onMouseDown={handleMouseDown}
-        className={
-          "flex-shrink-0 bg-base-300 transition-colors " +
-          (isHorizontal
-            ? "w-1 cursor-col-resize hover:bg-primary/30"
-            : "h-1 cursor-row-resize hover:bg-primary/30") +
-          (isDragging ? " bg-primary/30" : "")
-        }
-      />
-      <div
-        className="overflow-hidden"
-        style={isHorizontal ? { width: secondSize, height: "100%" } : { height: secondSize, width: "100%" }}
-      >
-        {children[1]}
-      </div>
-    </div>
-  );
-}