feat(projects): per-project canvas board (tldraw + SSE)

desktop/package.json

@@ -27,6 +27,7 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@tldraw/tldraw": "^4.5.10",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^6.0.0",

desktop/src/apps/ProjectsApp/ProjectMembers.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { projectsApi, type Project, type ProjectMember } from "@/lib/projects";
 import { AddAgentDialog } from "./AddAgentDialog";
+import { canvasApi } from "./canvas/canvas-api";
 
 export function ProjectMembers({ project, onChanged }: { project: Project; onChanged: () => void }) {
   const [members, setMembers] = useState<ProjectMember[]>([]);
@@ -45,18 +46,37 @@ export function ProjectMembers({ project, onChanged }: { project: Project; onCha
                 {m.member_kind === "clone" ? ` · ${m.memory_seed}` : ""}
               </div>
             </div>
-            <button
-              type="button"
-              onClick={async () => {
-                await projectsApi.members.remove(project.id, m.member_id);
-                refresh();
-                onChanged();
-              }}
-              className="text-xs text-red-400 hover:underline"
-              aria-label={`Remove ${m.member_id}`}
-            >
-              Remove
-            </button>
+            <div className="flex items-center gap-2">
+              {(m.member_kind === "native" || m.member_kind === "clone") && (
+                <label
+                  style={{ display: "inline-flex", alignItems: "center", gap: 6 }}
+                  title="When off, this agent can add new elements but cannot modify or delete existing ones."
+                >
+                  <input
+                    type="checkbox"
+                    checked={!!m.can_edit_canvas}
+                    onChange={async (e) => {
+                      await canvasApi.setPermission(project.id, m.member_id, e.target.checked);
+                      refresh();
+                      onChanged();
+                    }}
+                  />
+                  <span className="text-xs">Can edit canvas</span>
+                </label>
+              )}
+              <button
+                type="button"
+                onClick={async () => {
+                  await projectsApi.members.remove(project.id, m.member_id);
+                  refresh();
+                  onChanged();
+                }}
+                className="text-xs text-red-400 hover:underline"
+                aria-label={`Remove ${m.member_id}`}
+              >
+                Remove
+              </button>
+            </div>
           </li>
         ))}
       </ul>

desktop/src/apps/ProjectsApp/ProjectWorkspace.tsx

@@ -7,9 +7,10 @@ import { ProjectBoard } from "./board/ProjectBoard";
 import { TaskModal } from "./board/TaskModal";
 import { FilesApp } from "@/apps/FilesApp";
 import { MessagesApp } from "@/apps/MessagesApp";
+import { CanvasView } from "./canvas/CanvasView";
 
-type Tab = "board" | "tasks" | "files" | "messages" | "members" | "activity";
-const TABS: Tab[] = ["board", "tasks", "files", "messages", "members", "activity"];
+type Tab = "board" | "canvas" | "tasks" | "files" | "messages" | "members" | "activity";
+const TABS: Tab[] = ["board", "canvas", "tasks", "files", "messages", "members", "activity"];
 
 function readTaskParam(): string | null {
   if (typeof window === "undefined") return null;
@@ -94,6 +95,7 @@ export function ProjectWorkspace({ project, onChanged }: { project: Project; onC
             )}
           </>
         )}
+        {tab === "canvas" && <CanvasView projectId={project.id} projectSlug={project.slug} />}
         {tab === "tasks" && <ProjectTaskList projectId={project.id} />}
         {tab === "files" && (
           <FilesApp

desktop/src/apps/ProjectsApp/__tests__/canvas-api.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { canvasApi } from "../canvas/canvas-api";
+
+beforeEach(() => {
+  global.fetch = vi.fn();
+});
+
+describe("canvasApi", () => {
+  it("listElements GETs the right URL", async () => {
+    (fetch as any).mockResolvedValue({
+      ok: true,
+      json: async () => ({ elements: [] }),
+    });
+    const r = await canvasApi.listElements("prj-1");
+    expect(fetch).toHaveBeenCalledWith("/api/projects/prj-1/canvas/elements");
+    expect(r).toEqual([]);
+  });
+
+  it("addElement POSTs body", async () => {
+    (fetch as any).mockResolvedValue({
+      ok: true,
+      json: async () => ({ element: { id: "cve-1", kind: "note" } }),
+    });
+    const r = await canvasApi.addElement("prj-1", {
+      kind: "note", x: 1, y: 2, w: 3, h: 4, payload: { text: "x" },
+    });
+    expect(r.id).toBe("cve-1");
+    const call = (fetch as any).mock.calls[0];
+    expect(call[0]).toBe("/api/projects/prj-1/canvas/elements");
+    expect(call[1].method).toBe("POST");
+  });
+
+  it("deleteElement returns true on 204", async () => {
+    (fetch as any).mockResolvedValue({ ok: true, status: 204 });
+    const r = await canvasApi.deleteElement("prj-1", "cve-1");
+    expect(r).toBe(true);
+  });
+});

desktop/src/apps/ProjectsApp/__tests__/canvas-store.test.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect } from "vitest";
+import { createCanvasStore } from "../canvas/canvas-store";
+
+describe("canvas-store", () => {
+  it("seeds elements", () => {
+    const store = createCanvasStore();
+    store.getState().seed([
+      { id: "cve-1", kind: "note", x: 0, y: 0, w: 1, h: 1,
+        rotation: 0, z_index: 0, payload: {}, project_id: "p",
+        author_kind: "user", author_id: "u",
+        created_at: 0, updated_at: 0, deleted_at: null } as any,
+    ]);
+    expect(store.getState().elements["cve-1"].kind).toBe("note");
+  });
+
+  it("upsert replaces by id", () => {
+    const store = createCanvasStore();
+    store.getState().upsert({ id: "x", x: 1 } as any);
+    store.getState().upsert({ id: "x", x: 99 } as any);
+    expect(store.getState().elements["x"].x).toBe(99);
+  });
+
+  it("remove drops the element", () => {
+    const store = createCanvasStore();
+    store.getState().upsert({ id: "x" } as any);
+    store.getState().remove("x");
+    expect(store.getState().elements["x"]).toBeUndefined();
+  });
+});

desktop/src/apps/ProjectsApp/canvas/CanvasBoard.tsx

@@ -0,0 +1,163 @@
+import { useEffect, useMemo, useRef } from "react";
+import { Tldraw, Editor, createTLStore, defaultShapeUtils, TLShape } from "@tldraw/tldraw";
+import "@tldraw/tldraw/tldraw.css";
+
+import { canvasApi, CanvasElement } from "./canvas-api";
+import { createCanvasStore } from "./canvas-store";
+import { subscribeCanvasStream } from "./canvas-sse";
+import { TaosNoteShapeUtil } from "./shapes/NoteShape";
+import { TaosLinkShapeUtil } from "./shapes/LinkShape";
+import { TaosImageShapeUtil } from "./shapes/ImageShape";
+
+interface CanvasBoardProps {
+  projectId: string;
+  projectSlug: string;
+}
+
+const CUSTOM_SHAPE_UTILS = [TaosNoteShapeUtil, TaosLinkShapeUtil, TaosImageShapeUtil];
+
+export function CanvasBoard({ projectId, projectSlug }: CanvasBoardProps) {
+  const cacheRef = useRef(createCanvasStore());
+  const editorRef = useRef<Editor | null>(null);
+
+  // In tldraw v4, shapeUtils are passed to <Tldraw>, not createTLStore
+  const store = useMemo(
+    () => createTLStore({ defaultName: `canvas-${projectId}` }),
+    [projectId],
+  );
+
+  // Initial load + SSE subscription
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const elements = await canvasApi.listElements(projectId);
+      if (cancelled) return;
+      cacheRef.current.getState().seed(elements);
+      hydrateEditor(editorRef.current, elements, projectSlug);
+    })();
+    const unsub = subscribeCanvasStream(projectId, cacheRef.current);
+    return () => {
+      cancelled = true;
+      unsub();
+    };
+  }, [projectId, projectSlug]);
+
+  // Re-hydrate on local cache changes (SSE-driven updates from agents)
+  useEffect(() => {
+    const unsub = cacheRef.current.subscribe((s) => {
+      hydrateEditor(editorRef.current, Object.values(s.elements), projectSlug);
+    });
+    return unsub;
+  }, [projectSlug]);
+
+  return (
+    <div style={{ position: "relative", width: "100%", height: "100%" }}>
+      <Tldraw
+        store={store}
+        shapeUtils={[...defaultShapeUtils, ...CUSTOM_SHAPE_UTILS] as any}
+        onMount={(editor) => {
+          editorRef.current = editor;
+          // Send local user edits to backend
+          editor.store.listen(
+            (entry) => {
+              if (entry.source !== "user") return;
+              const added = entry.changes.added as Record<string, TLShape | undefined>;
+              for (const shape of Object.values(added)) {
+                if (!shape || !shape.id.startsWith("shape:")) continue;
+                pushAdd(projectId, shape).catch(console.warn);
+              }
+              const updated = entry.changes.updated as Record<string, [TLShape, TLShape] | undefined>;
+              for (const pair of Object.values(updated)) {
+                if (!pair) continue;
+                const next = pair[1];
+                if (!next.id.startsWith("shape:")) continue;
+                pushUpdate(projectId, next).catch(console.warn);
+              }
+              const removed = entry.changes.removed as Record<string, TLShape | undefined>;
+              for (const shape of Object.values(removed)) {
+                if (!shape || !shape.id.startsWith("shape:")) continue;
+                const elementId = shape.id.replace(/^shape:/, "");
+                canvasApi.deleteElement(projectId, elementId).catch(console.warn);
+              }
+            },
+            { source: "user", scope: "document" },
+          );
+        }}
+      />
+    </div>
+  );
+}
+
+function hydrateEditor(
+  editor: Editor | null,
+  elements: CanvasElement[],
+  projectSlug: string,
+) {
+  if (!editor) return;
+  editor.run(() => {
+    const wantedIds = new Set(elements.map((e) => `shape:${e.id}`));
+    const existing = editor.getCurrentPageShapes();
+    const toRemove = existing.filter((s) => !wantedIds.has(s.id) && s.id.toString().startsWith("shape:"));
+    if (toRemove.length) editor.deleteShapes(toRemove.map((s) => s.id) as any);
+
+    for (const el of elements) {
+      const id = `shape:${el.id}` as TLShape["id"];
+      const existingShape = editor.getShape(id);
+      const newShape = elementToShape(el, projectSlug);
+      if (existingShape) {
+        editor.updateShape(newShape);
+      } else {
+        editor.createShape(newShape);
+      }
+    }
+  });
+}
+
+function elementToShape(el: CanvasElement, projectSlug: string): any {
+  const baseProps = {
+    w: el.w, h: el.h,
+    taos_kind: el.kind,
+    taos_payload: el.payload,
+    taos_author_id: el.author_id,
+    taos_author_kind: el.author_kind,
+  };
+  return {
+    id: `shape:${el.id}`,
+    type: shapeType(el.kind),
+    x: el.x, y: el.y, rotation: el.rotation,
+    props: el.kind === "image"
+      ? { ...baseProps, project_slug: projectSlug }
+      : baseProps,
+  };
+}
+
+function shapeType(kind: string): string {
+  if (kind === "note") return "taos-note";
+  if (kind === "link") return "taos-link";
+  if (kind === "image") return "taos-image";
+  return "geo";
+}
+
+async function pushAdd(projectId: string, shape: TLShape) {
+  if (!shape.id.toString().startsWith("shape:")) return;
+  const props: any = shape.props;
+  await canvasApi.addElement(projectId, {
+    id: shape.id.toString().replace(/^shape:/, ""),
+    kind: (props.taos_kind ?? "user_shape") as any,
+    x: shape.x, y: shape.y,
+    w: props.w ?? 100, h: props.h ?? 100,
+    rotation: shape.rotation,
+    payload: props.taos_payload ?? { tldraw_shape: shape },
+  });
+}
+
+async function pushUpdate(projectId: string, shape: TLShape) {
+  const elementId = shape.id.toString().replace(/^shape:/, "");
+  const props: any = shape.props;
+  await canvasApi.updateElement(projectId, elementId, {
+    x: shape.x, y: shape.y,
+    w: props.w, h: props.h,
+    rotation: shape.rotation,
+    payload: props.taos_payload,
+  });
+}

desktop/src/apps/ProjectsApp/canvas/CanvasView.tsx

@@ -0,0 +1,11 @@
+import { CanvasBoard } from "./CanvasBoard";
+
+export function CanvasView({
+  projectId, projectSlug,
+}: { projectId: string; projectSlug: string }) {
+  return (
+    <div style={{ height: "calc(100vh - 100px)", padding: 0 }}>
+      <CanvasBoard projectId={projectId} projectSlug={projectSlug} />
+    </div>
+  );
+}