first commit

frontend/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

frontend/src/App.tsx

@@ -0,0 +1,18 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import EditorPage from "./pages/EditorPage.tsx";
+import Home from "./pages/Home.tsx";
+import KanbanPage from "./pages/KanbanPage.tsx";
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/editor/:id" element={<EditorPage />} />
+        <Route path="/kanban/:id" element={<KanbanPage />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

frontend/src/api/document.ts

@@ -0,0 +1,71 @@
+const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:8080/api";
+
+export type DocumentType = {
+  id: string;
+  name: string;
+  type: "editor" | "kanban";
+  created_at: string;
+  updated_at: string;
+}
+
+export type CreateDocumentRequest = {
+  name: string;
+  type: "editor" | "kanban";
+}
+
+export const documentsApi = {
+  // List all documents
+  list: async (): Promise<{ documents: DocumentType[]; total: number }> => {
+    const response = await fetch(`${API_BASE_URL}/documents`);
+    if (!response.ok) throw new Error("Failed to fetch documents");
+    return response.json();
+  },
+
+  // Get a single document
+  get: async (id: string): Promise<DocumentType> => {
+    const response = await fetch(`${API_BASE_URL}/documents/${id}`);
+    if (!response.ok) throw new Error("Failed to fetch document");
+    return response.json();
+  },
+
+  // Create a new document
+  create: async (data: CreateDocumentRequest): Promise<DocumentType> => {
+    const response = await fetch(`${API_BASE_URL}/documents`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
+    if (!response.ok) throw new Error("Failed to create document");
+    return response.json();
+  },
+
+  // Delete a document
+  delete: async (id: string): Promise<void> => {
+    const response = await fetch(`${API_BASE_URL}/documents/${id}`, {
+      method: "DELETE",
+    });
+    if (!response.ok) throw new Error("Failed to delete document");
+  },
+
+  // Get document Yjs state
+  getState: async (id: string): Promise<Uint8Array> => {
+    const response = await fetch(`${API_BASE_URL}/documents/${id}/state`);
+    if (!response.ok) throw new Error("Failed to fetch document state");
+    const arrayBuffer = await response.arrayBuffer();
+    return new Uint8Array(arrayBuffer);
+  },
+
+  // Update document Yjs state
+  updateState: async (id: string, state: Uint8Array): Promise<void> => {
+    // Create a new ArrayBuffer copy to ensure compatibility
+    const buffer = new ArrayBuffer(state.byteLength);
+    new Uint8Array(buffer).set(state);
+
+    const response = await fetch(`${API_BASE_URL}/documents/${id}/state`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/octet-stream" },
+      body: buffer,
+    });
+    if (!response.ok) throw new Error("Failed to update document state");
+  },
+};

frontend/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

frontend/src/components/Editor/Editor.tsx

@@ -0,0 +1,58 @@
+import Collaboration from "@tiptap/extension-collaboration";
+import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { useEffect } from "react";
+import type { YjsProviders } from "../../lib/yjs";
+import Toolbar from "./Toolbar.tsx";
+
+interface EditorProps {
+  providers: YjsProviders;
+}
+
+const Editor = ({ providers }: EditorProps) => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        history: false, // Use Yjs history instead
+      }),
+      Collaboration.configure({
+        document: providers.ydoc,
+      }),
+      CollaborationCursor.configure({
+        provider: providers.websocketProvider,
+        user: providers.awareness.getLocalState()?.user || {
+          name: "Anonymous",
+          color: "#000000",
+        },
+      }),
+    ],
+    content: "",
+  });
+
+  useEffect(() => {
+    if (editor && providers.awareness) {
+      const user = providers.awareness.getLocalState()?.user;
+      if (user) {
+        editor.extensionManager.extensions.forEach((extension: any) => {
+          if (extension.name === "collaborationCursor") {
+            extension.options.user = user;
+          }
+        });
+      }
+    }
+  }, [editor, providers.awareness]);
+
+  if (!editor) {
+    return <div>Loading editor...</div>;
+  }
+
+  return (
+    <div className="editor-container">
+      <Toolbar editor={editor} />
+      <EditorContent editor={editor} className="editor-content" />
+    </div>
+  );
+};
+
+export default Editor;

frontend/src/components/Editor/Toolbar.tsx

@@ -0,0 +1,52 @@
+import { Editor } from "@tiptap/react";
+
+interface ToolbarProps {
+  editor: Editor;
+}
+
+const Toolbar = ({ editor }: ToolbarProps) => {
+  return (
+    <div className="toolbar">
+      <button
+        onClick={() => editor.chain().focus().toggleBold().run()}
+        className={editor.isActive("bold") ? "active" : ""}
+      >
+        Bold
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleItalic().run()}
+        className={editor.isActive("italic") ? "active" : ""}
+      >
+        Italic
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+        className={editor.isActive("heading", { level: 1 }) ? "active" : ""}
+      >
+        H1
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+        className={editor.isActive("heading", { level: 2 }) ? "active" : ""}
+      >
+        H2
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleBulletList().run()}
+        className={editor.isActive("bulletList") ? "active" : ""}
+      >
+        Bullet List
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleOrderedList().run()}
+        className={editor.isActive("orderedList") ? "active" : ""}
+      >
+        Ordered List
+      </button>
+      <button onClick={() => editor.chain().focus().undo().run()}>Undo</button>
+      <button onClick={() => editor.chain().focus().redo().run()}>Redo</button>
+    </div>
+  );
+};
+
+export default Toolbar;

frontend/src/components/Kanban/Card.tsx

@@ -0,0 +1,16 @@
+import type { Task } from "./KanbanBoard.tsx";
+
+interface CardProps {
+  task: Task;
+}
+
+const Card = ({ task }: CardProps) => {
+  return (
+    <div className="kanban-card">
+      <h4>{task.title}</h4>
+      {task.description && <p>{task.description}</p>}
+    </div>
+  );
+};
+
+export default Card;

frontend/src/components/Kanban/Column.tsx

@@ -0,0 +1,60 @@
+import { useState } from "react";
+import Card from "./Card.tsx";
+import type { KanbanColumn, Task } from "./KanbanBoard.tsx";
+
+interface ColumnProps {
+  column: KanbanColumn;
+  onAddTask: (task: Task) => void;
+  onMoveTask: (taskId: string, toColumnId: string) => void;
+}
+
+const Column = ({ column, onAddTask }: ColumnProps) => {
+  const [isAdding, setIsAdding] = useState(false);
+  const [newTaskTitle, setNewTaskTitle] = useState("");
+
+  const handleAddTask = () => {
+    if (newTaskTitle.trim()) {
+      onAddTask({
+        id: `task-${Date.now()}`,
+        title: newTaskTitle,
+        description: "",
+      });
+      setNewTaskTitle("");
+      setIsAdding(false);
+    }
+  };
+
+  return (
+    <div className="kanban-column">
+      <h3 className="column-title">{column.title}</h3>
+      <div className="column-content">
+        {column.tasks.map((task) => (
+          <Card key={task.id} task={task} />
+        ))}
+
+        {isAdding ? (
+          <div className="add-task-form">
+            <input
+              type="text"
+              value={newTaskTitle}
+              onChange={(e) => setNewTaskTitle(e.target.value)}
+              placeholder="Task title..."
+              autoFocus
+              onKeyPress={(e) => e.key === "Enter" && handleAddTask()}
+            />
+            <div className="form-actions">
+              <button onClick={handleAddTask}>Add</button>
+              <button onClick={() => setIsAdding(false)}>Cancel</button>
+            </div>
+          </div>
+        ) : (
+          <button className="add-task-btn" onClick={() => setIsAdding(true)}>
+            + Add Task
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Column;

frontend/src/components/Kanban/KanbanBoard.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useState } from "react";
+import type { YjsProviders } from "../../lib/yjs";
+import Column from "./Column.tsx";
+
+interface KanbanBoardProps {
+  providers: YjsProviders;
+}
+
+export interface Task {
+  id: string;
+  title: string;
+  description: string;
+}
+
+export interface KanbanColumn {
+  id: string;
+  title: string;
+  tasks: Task[];
+}
+
+const KanbanBoard = ({ providers }: KanbanBoardProps) => {
+  const [columns, setColumns] = useState<KanbanColumn[]>([]);
+
+  useEffect(() => {
+    const yarray = providers.ydoc.getArray<any>("kanban-columns");
+
+    // Initialize with default columns if empty
+    if (yarray.length === 0) {
+      providers.ydoc.transact(() => {
+        yarray.push([
+          { id: "todo", title: "To Do", tasks: [] },
+          { id: "in-progress", title: "In Progress", tasks: [] },
+          { id: "done", title: "Done", tasks: [] },
+        ]);
+      });
+    }
+
+    // Update state when Yjs array changes
+    const updateColumns = () => {
+      setColumns(yarray.toArray());
+    };
+
+    updateColumns();
+    yarray.observe(updateColumns);
+
+    return () => {
+      yarray.unobserve(updateColumns);
+    };
+  }, [providers.ydoc]);
+
+  const addTask = (columnId: string, task: Task) => {
+    const yarray = providers.ydoc.getArray("kanban-columns");
+    const cols = yarray.toArray();
+    const columnIndex = cols.findIndex((col: any) => col.id === columnId);
+
+    if (columnIndex !== -1) {
+      providers.ydoc.transact(() => {
+        const column = cols[columnIndex];
+        column.tasks.push(task);
+        yarray.delete(columnIndex, 1);
+        yarray.insert(columnIndex, [column]);
+      });
+    }
+  };
+
+  const moveTask = (
+    fromColumnId: string,
+    toColumnId: string,
+    taskId: string
+  ) => {
+    const yarray = providers.ydoc.getArray("kanban-columns");
+    const cols = yarray.toArray();
+
+    const fromIndex = cols.findIndex((col: any) => col.id === fromColumnId);
+    const toIndex = cols.findIndex((col: any) => col.id === toColumnId);
+
+    if (fromIndex !== -1 && toIndex !== -1) {
+      providers.ydoc.transact(() => {
+        const fromCol = { ...cols[fromIndex] };
+        const toCol = { ...cols[toIndex] };
+
+        const taskIndex = fromCol.tasks.findIndex((t: Task) => t.id === taskId);
+        if (taskIndex !== -1) {
+          const [task] = fromCol.tasks.splice(taskIndex, 1);
+          toCol.tasks.push(task);
+
+          yarray.delete(fromIndex, 1);
+          yarray.insert(fromIndex, [fromCol]);
+          yarray.delete(toIndex, 1);
+          yarray.insert(toIndex, [toCol]);
+        }
+      });
+    }
+  };
+
+  return (
+    <div className="kanban-board">
+      {columns.map((column) => (
+        <Column
+          key={column.id}
+          column={column}
+          onAddTask={(task) => addTask(column.id, task)}
+          onMoveTask={(taskId, toColumnId) =>
+            moveTask(column.id, toColumnId, taskId)
+          }
+        />
+      ))}
+    </div>
+  );
+};
+
+export default KanbanBoard;

frontend/src/components/PixelIcon/PixelIcon.tsx

@@ -0,0 +1,31 @@
+interface PixelIconProps {
+  name: string;
+  size?: number;
+  color?: string;
+  animated?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const PixelIcon = ({
+  name,
+  size = 24,
+  color,
+  animated = false,
+  className = '',
+  style = {}
+}: PixelIconProps) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      className={`pixel-icon ${animated ? 'pixel-icon-animated' : ''} ${className}`}
+      style={{ color, ...style }}
+      aria-hidden="true"
+    >
+      <use href={`/icons/pixel-sprites.svg#icon-${name}`} />
+    </svg>
+  );
+};
+
+export default PixelIcon;

frontend/src/components/PixelSprites/FloatingGem.tsx

@@ -0,0 +1,32 @@
+import { CSSProperties } from 'react';
+
+interface FloatingGemProps {
+  position?: { top?: string; right?: string; bottom?: string; left?: string };
+  delay?: number;
+  size?: number;
+}
+
+const FloatingGem = ({ position = {}, delay = 0, size = 32 }: FloatingGemProps) => {
+  const style: CSSProperties = {
+    position: 'absolute',
+    ...position,
+    animation: `pixel-float 4s ease-in-out infinite`,
+    animationDelay: `${delay}s`,
+    pointerEvents: 'none',
+    zIndex: 10,
+  };
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      style={style}
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+    >
+      <use href="/icons/pixel-sprites.svg#icon-gem" />
+    </svg>
+  );
+};
+
+export default FloatingGem;

frontend/src/components/Presence/UserList.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+
+interface UserListProps {
+  awareness: any;
+}
+
+interface User {
+  clientId: number;
+  name: string;
+  color: string;
+}
+
+const UserList = ({ awareness }: UserListProps) => {
+  const [users, setUsers] = useState<User[]>([]);
+
+  useEffect(() => {
+    const updateUsers = () => {
+      const states = awareness.getStates();
+      const userList: User[] = [];
+
+      states.forEach((state: any, clientId: number) => {
+        if (state.user) {
+          userList.push({
+            clientId,
+            name: state.user.name,
+            color: state.user.color,
+          });
+        }
+      });
+
+      setUsers(userList);
+    };
+
+    updateUsers();
+    awareness.on("change", updateUsers);
+
+    return () => {
+      awareness.off("change", updateUsers);
+    };
+  }, [awareness]);
+
+  return (
+    <div className="user-list">
+      <h4>Online Users ({users.length})</h4>
+      <div className="users">
+        {users.map((user) => (
+          <div key={user.clientId} className="user">
+            <span
+              className="user-color"
+              style={{ backgroundColor: user.color }}
+            ></span>
+            <span className="user-name">{user.name}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default UserList;

frontend/src/hooks/useAutoSave.ts

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from 'react';
+import * as Y from 'yjs';
+import { documentsApi } from '../api/document';
+
+export const useAutoSave = (documentId: string, ydoc: Y.Doc | null) => {
+  const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const isSavingRef = useRef(false);
+
+  useEffect(() => {
+    if (!ydoc) return;
+
+    const handleUpdate = (update: Uint8Array, origin: any) => {
+      // Ignore updates from initial sync or remote sources
+      if (origin === 'init' || origin === 'remote') return;
+
+      // Clear existing timeout
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+
+      // Set new timeout: save 2 seconds after last edit
+      saveTimeoutRef.current = setTimeout(async () => {
+        if (isSavingRef.current) return; // Prevent concurrent saves
+
+        isSavingRef.current = true;
+        try {
+          const state = Y.encodeStateAsUpdate(ydoc);
+          await documentsApi.updateState(documentId, state);
+          console.log('✓ Document saved to database');
+        } catch (error) {
+          console.error('Failed to save document:', error);
+        } finally {
+          isSavingRef.current = false;
+        }
+      }, 2000); // 2 second debounce
+    };
+
+    ydoc.on('update', handleUpdate);
+
+    // Cleanup
+    return () => {
+      ydoc.off('update', handleUpdate);
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+    };
+  }, [documentId, ydoc]);
+};

frontend/src/hooks/useYjsDocument.ts

@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import {
+    createYjsDocument,
+    destroyYjsDocument,
+    getRandomColor,
+    getRandomName,
+    type YjsProviders,
+} from "../lib/yjs";
+import { useAutoSave } from "./useAutoSave";
+
+export const useYjsDocument = (documentId: string) => {
+  const [providers, setProviders] = useState<YjsProviders | null>(null);
+  const [synced, setSynced] = useState(false);
+
+  // Enable auto-save when providers are ready
+  useAutoSave(documentId, providers?.ydoc || null);
+
+  useEffect(() => {
+    let mounted = true;
+    let currentProviders: YjsProviders | null = null;
+
+    // Create Yjs document and providers
+    const initializeDocument = async () => {
+      const yjsProviders = await createYjsDocument(documentId);
+      currentProviders = yjsProviders;
+
+      if (!mounted) {
+        destroyYjsDocument(yjsProviders);
+        return;
+      }
+
+      // Set user info for awareness
+      yjsProviders.awareness.setLocalStateField("user", {
+        name: getRandomName(),
+        color: getRandomColor(),
+      });
+
+      // Listen for sync status
+      yjsProviders.indexeddbProvider.on("synced", () => {
+        console.log("IndexedDB synced");
+        setSynced(true);
+      });
+
+      yjsProviders.websocketProvider.on("status", (event: { status: string }) => {
+        console.log("WebSocket status:", event.status);
+      });
+
+      setProviders(yjsProviders);
+    };
+
+    initializeDocument();
+
+    // Cleanup on unmount
+    return () => {
+      mounted = false;
+      if (currentProviders) {
+        destroyYjsDocument(currentProviders);
+      }
+    };
+  }, [documentId]);
+
+  return { providers, synced };
+};

frontend/src/index.css

@@ -0,0 +1,604 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  :root {
+    /* Vibrant Fantasy Color Palette */
+    --pixel-purple-deep: #4A1B6F;
+    --pixel-purple-bright: #8B4FB9;
+    --pixel-pink-vibrant: #FF6EC7;
+    --pixel-cyan-bright: #00D9FF;
+    --pixel-orange-warm: #FF8E3C;
+    --pixel-yellow-gold: #FFD23F;
+    --pixel-green-lime: #8EF048;
+    --pixel-green-forest: #3FA54D;
+
+    /* UI Backgrounds & Neutrals */
+    --pixel-bg-dark: #2B1B38;
+    --pixel-bg-medium: #4A3B5C;
+    --pixel-bg-light: #E8D9F3;
+    --pixel-panel: #F5F0FF;
+    --pixel-white: #FFFFFF;
+
+    /* Shadows & Outlines */
+    --pixel-shadow-dark: #1A0E28;
+    --pixel-outline: #2B1B38;
+
+    /* Text Colors */
+    --pixel-text-primary: #2B1B38;
+    --pixel-text-secondary: #4A3B5C;
+    --pixel-text-muted: #8B7B9C;
+  }
+
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background: var(--pixel-bg-light);
+    background-image: url('/pixel-patterns.svg#pixel-checker-subtle');
+  }
+
+  #root {
+    min-height: 100vh;
+  }
+
+  /* Pixel Art Utility Classes */
+  .pixel-border {
+    border: 3px solid var(--pixel-outline);
+    box-shadow:
+      4px 4px 0 var(--pixel-shadow-dark),
+      4px 4px 0 3px var(--pixel-outline);
+  }
+
+  .pixel-card {
+    border: 3px solid var(--pixel-outline);
+    box-shadow:
+      0 0 0 3px var(--pixel-outline),
+      6px 6px 0 var(--pixel-shadow-dark),
+      6px 6px 0 3px var(--pixel-outline);
+    transition: transform 0.1s ease, box-shadow 0.1s ease;
+  }
+
+  .pixel-card:hover {
+    transform: translate(-2px, -2px);
+    box-shadow:
+      0 0 0 3px var(--pixel-outline),
+      8px 8px 0 var(--pixel-shadow-dark),
+      8px 8px 0 3px var(--pixel-outline);
+  }
+
+  .pixel-button {
+    border: 3px solid var(--pixel-outline);
+    box-shadow:
+      4px 4px 0 var(--pixel-shadow-dark);
+    transition: transform 0.05s ease, box-shadow 0.05s ease;
+    cursor: pointer;
+  }
+
+  .pixel-button:hover {
+    transform: translate(-1px, -1px);
+    box-shadow:
+      5px 5px 0 var(--pixel-shadow-dark);
+  }
+
+  .pixel-button:active {
+    transform: translate(2px, 2px);
+    box-shadow:
+      2px 2px 0 var(--pixel-shadow-dark);
+  }
+
+  /* Focus states for accessibility */
+  button:focus-visible,
+  input:focus-visible {
+    outline: 3px solid var(--pixel-yellow-gold);
+    outline-offset: 2px;
+  }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+
+  /* Pixel Icon Styles */
+  .pixel-icon {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .pixel-icon-animated {
+    animation: pixel-spin 1s steps(8) infinite;
+  }
+
+  /* Keyframe Animations */
+  @keyframes pixel-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  @keyframes pixel-float {
+    0%, 100% { transform: translateY(0) rotate(0deg); }
+    25% { transform: translateY(-12px) rotate(2deg); }
+    50% { transform: translateY(-8px) rotate(0deg); }
+    75% { transform: translateY(-12px) rotate(-2deg); }
+  }
+
+  @keyframes pixel-bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-16px); }
+  }
+
+  @keyframes pixel-sparkle {
+    0% { transform: scale(0) rotate(0deg); opacity: 1; }
+    50% { transform: scale(1.5) rotate(180deg); opacity: 0.6; }
+    100% { transform: scale(0) rotate(360deg); opacity: 0; }
+  }
+
+  @keyframes pixel-pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.7; transform: scale(1.1); }
+  }
+
+  /* Home Page */
+  .home-page {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+  }
+
+  .home-page h1 {
+    margin-bottom: 2rem;
+  }
+
+  .create-buttons {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 2rem;
+  }
+
+  .create-buttons button {
+    padding: 0.75rem 1.5rem;
+    background: var(--pixel-purple-bright);
+    color: white;
+    border: 3px solid var(--pixel-outline);
+    border-radius: 0;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: 600;
+    box-shadow: 4px 4px 0 var(--pixel-shadow-dark);
+    transition: transform 0.05s ease, box-shadow 0.05s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .create-buttons button:hover {
+    background: var(--pixel-purple-deep);
+    transform: translate(-1px, -1px);
+    box-shadow: 5px 5px 0 var(--pixel-shadow-dark);
+  }
+
+  .create-buttons button:active {
+    transform: translate(2px, 2px);
+    box-shadow: 2px 2px 0 var(--pixel-shadow-dark);
+  }
+
+  .create-buttons button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+  }
+
+  .document-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
+  }
+
+  .document-card {
+    background: var(--pixel-white);
+    padding: 1.5rem;
+    border-radius: 0;
+    border: 3px solid var(--pixel-outline);
+    box-shadow:
+      6px 6px 0 var(--pixel-shadow-dark),
+      6px 6px 0 3px var(--pixel-outline);
+    transition: transform 0.1s ease, box-shadow 0.1s ease;
+  }
+
+  .document-card:hover {
+    transform: translate(-2px, -2px);
+    box-shadow:
+      8px 8px 0 var(--pixel-shadow-dark),
+      8px 8px 0 3px var(--pixel-outline);
+  }
+
+  .doc-info h3 {
+    margin-bottom: 0.5rem;
+  }
+
+  .doc-type {
+    color: var(--pixel-text-secondary);
+    text-transform: capitalize;
+    margin-bottom: 0.5rem;
+  }
+
+  .doc-date {
+    color: var(--pixel-text-muted);
+    font-size: 0.875rem;
+  }
+
+  .doc-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 1rem;
+  }
+
+  .doc-actions button {
+    padding: 0.5rem 1rem;
+    border: 3px solid var(--pixel-outline);
+    background: var(--pixel-white);
+    border-radius: 0;
+    cursor: pointer;
+    min-width: 44px;
+    min-height: 44px;
+    box-shadow: 3px 3px 0 var(--pixel-shadow-dark);
+    transition: transform 0.05s ease, box-shadow 0.05s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .doc-actions button:hover {
+    transform: translate(-1px, -1px);
+    box-shadow: 4px 4px 0 var(--pixel-shadow-dark);
+  }
+
+  .doc-actions button:active {
+    transform: translate(1px, 1px);
+    box-shadow: 2px 2px 0 var(--pixel-shadow-dark);
+  }
+
+  .doc-actions button:first-child {
+    background: var(--pixel-cyan-bright);
+    color: white;
+    border-color: var(--pixel-outline);
+  }
+
+  .doc-actions button:first-child:hover {
+    background: var(--pixel-purple-bright);
+  }
+
+  /* Editor Page */
+  .editor-page, .kanban-page {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+
+  .page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background: var(--pixel-white);
+    border-bottom: 3px solid var(--pixel-outline);
+  }
+
+  .page-header button {
+    padding: 0.5rem 1rem;
+    background: var(--pixel-panel);
+    border: 3px solid var(--pixel-outline);
+    border-radius: 0;
+    cursor: pointer;
+    min-width: 44px;
+    min-height: 44px;
+    box-shadow: 3px 3px 0 var(--pixel-shadow-dark);
+    transition: transform 0.05s ease, box-shadow 0.05s ease;
+  }
+
+  .page-header button:hover {
+    background: var(--pixel-bg-light);
+    transform: translate(-1px, -1px);
+    box-shadow: 4px 4px 0 var(--pixel-shadow-dark);
+  }
+
+  .page-header button:active {
+    transform: translate(1px, 1px);
+    box-shadow: 2px 2px 0 var(--pixel-shadow-dark);
+  }
+
+  .sync-status {
+    color: var(--pixel-text-secondary);
+    font-size: 0.875rem;
+  }
+
+  .page-content {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .main-area {
+    flex: 1;
+    overflow: auto;
+    padding: 2rem;
+  }
+
+  .sidebar {
+    width: 250px;
+    background: var(--pixel-white);
+    background-image: url('/pixel-patterns.svg#pixel-scanlines');
+    border-left: 3px solid var(--pixel-outline);
+    padding: 1rem;
+  }
+
+  /* Editor */
+  .editor-container {
+    background: var(--pixel-white);
+    border-radius: 0;
+    border: 3px solid var(--pixel-outline);
+    box-shadow:
+      6px 6px 0 var(--pixel-shadow-dark),
+      6px 6px 0 3px var(--pixel-outline);
+    overflow: hidden;
+  }
+
+  .toolbar {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background: var(--pixel-panel);
+    background-image: url('/pixel-patterns.svg#pixel-panel-texture');
+    border-bottom: 3px solid var(--pixel-outline);
+    flex-wrap: wrap;
+  }
+
+  .toolbar button {
+    padding: 0.5rem 0.75rem;
+    background: var(--pixel-white);
+    border: 3px solid var(--pixel-outline);
+    border-radius: 0;
+    cursor: pointer;
+    min-width: 44px;
+    min-height: 44px;
+    box-shadow: 3px 3px 0 var(--pixel-shadow-dark);
+    transition: transform 0.05s ease, box-shadow 0.05s ease;
+  }
+
+  .toolbar button:hover {
+    background: var(--pixel-bg-light);
+    transform: translate(-1px, -1px);
+    box-shadow: 4px 4px 0 var(--pixel-shadow-dark);
+  }
+
+  .toolbar button:active {
+    transform: translate(1px, 1px);
+    box-shadow: 2px 2px 0 var(--pixel-shadow-dark);
+  }
+
+  .toolbar button.active {
+    background: var(--pixel-cyan-bright);
+    color: white;
+    border-color: var(--pixel-outline);
+    box-shadow: 2px 2px 0 var(--pixel-shadow-dark);
+    transform: translate(1px, 1px);
+  }
+
+  .editor-content {
+    padding: 2rem;
+    min-height: 500px;
+  }
+
+  .ProseMirror {
+    outline: none;
+  }
+
+  .ProseMirror h1 {
+    font-size: 2rem;
+    margin: 1rem 0;
+  }
+
+  .ProseMirror h2 {
+    font-size: 1.5rem;
+    margin: 1rem 0;
+  }
+
+  .ProseMirror p {
+    margin: 0.5rem 0;
+  }
+
+  .ProseMirror ul, .ProseMirror ol {
+    margin-left: 1.5rem;
+  }
+
+  /* Collaborative Cursors */
+  .collaboration-cursor__caret {
+    position: absolute;
+    border-left: 2px solid;
+    border-right: none;
+    margin-left: -1px;
+    margin-right: -1px;
+    pointer-events: none;
+    word-break: normal;
+  }
+
+  .collaboration-cursor__label {
+    position: absolute;
+    top: -1.4em;
+    left: -1px;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    user-select: none;
+    color: #fff;
+    padding: 2px 6px;
+    border-radius: 0;
+    white-space: nowrap;
+    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
+  }
+
+  /* Kanban Board */
+  .kanban-board {
+    display: flex;
+    gap: 1rem;
+    overflow-x: auto;
+    padding-bottom: 1rem;
+  }
+
+  .kanban-column {
+    background: var(--pixel-panel);
+    background-image: url('/pixel-patterns.svg#pixel-dither-diagonal');
+    border-radius: 0;
+    border: 3px solid var(--pixel-outline);
+    padding: 1rem;
+    min-width: 300px;
+    max-width: 300px;
+  }
+
+  .column-title {
+    margin-bottom: 1rem;
+    font-size: 1.125rem;
+  }
+
+  .column-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .kanban-card {
+    background: var(--pixel-white);
+    padding: 1rem;
+    border-radius: 0;
+    border: 3px solid var(--pixel-outline);
+    box-shadow:
+      4px 4px 0 var(--pixel-shadow-dark),
+      4px 4px 0 3px var(--pixel-outline);
+    cursor: pointer;
+    transition: transform 0.1s ease, box-shadow 0.1s ease;
+  }
+
+  .kanban-card:hover {
+    transform: translate(-1px, -1px);
+    box-shadow:
+      5px 5px 0 var(--pixel-shadow-dark),
+      5px 5px 0 3px var(--pixel-outline);
+  }
+
+  .kanban-card h4 {
+    margin-bottom: 0.5rem;
+  }
+
+  .kanban-card p {
+    color: var(--pixel-text-secondary);
+    font-size: 0.875rem;
+  }
+
+  .add-task-btn {
+    padding: 0.75rem;
+    background: var(--pixel-white);
+    border: 3px dashed var(--pixel-outline);
+    border-radius: 0;
+    cursor: pointer;
+    color: var(--pixel-text-secondary);
+  }
+
+  .add-task-btn:hover {
+    border-color: var(--pixel-purple-bright);
+    color: var(--pixel-text-primary);
+    background: var(--pixel-bg-light);
+  }
+
+  .add-task-form input {
+    width: 100%;
+    padding: 0.75rem;
+    border: 2px solid var(--pixel-outline);
+    border-radius: 0;
+    margin-bottom: 0.5rem;
+    background: var(--pixel-white);
+  }
+
+  .add-task-form input:focus {
+    outline: none;
+    border-color: var(--pixel-cyan-bright);
+    box-shadow: 0 0 0 2px var(--pixel-cyan-bright);
+  }
+
+  .form-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .form-actions button {
+    padding: 0.5rem 1rem;
+    border: 3px solid var(--pixel-outline);
+    border-radius: 0;
+    cursor: pointer;
+    background: var(--pixel-white);
+    box-shadow: 3px 3px 0 var(--pixel-shadow-dark);
+    transition: transform 0.05s ease, box-shadow 0.05s ease;
+  }
+
+  .form-actions button:hover {
+    transform: translate(-1px, -1px);
+    box-shadow: 4px 4px 0 var(--pixel-shadow-dark);
+  }
+
+  .form-actions button:active {
+    transform: translate(1px, 1px);
+    box-shadow: 2px 2px 0 var(--pixel-shadow-dark);
+  }
+
+  .form-actions button:first-child {
+    background: var(--pixel-green-lime);
+    color: var(--pixel-text-primary);
+    border-color: var(--pixel-outline);
+  }
+
+  /* User List */
+  .user-list h4 {
+    margin-bottom: 1rem;
+  }
+
+  .users {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .user {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .user-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 0;
+    border: 1px solid var(--pixel-outline);
+  }
+
+  .user-name {
+    font-size: 0.875rem;
+  }
+
+  .loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    font-size: 1.25rem;
+    color: var(--pixel-text-secondary);
+  }

frontend/src/lib/yjs.ts

@@ -0,0 +1,75 @@
+import { IndexeddbPersistence } from "y-indexeddb";
+import { WebsocketProvider } from "y-websocket";
+import * as Y from "yjs";
+import { documentsApi } from "../api/document";
+
+const WS_URL = import.meta.env.VITE_WS_URL || "ws://localhost:8080/ws";
+
+export interface YjsProviders {
+  ydoc: Y.Doc;
+  websocketProvider: WebsocketProvider;
+  indexeddbProvider: IndexeddbPersistence;
+  awareness: any;
+}
+
+export const createYjsDocument = async (documentId: string): Promise<YjsProviders> => {
+  // Create Yjs document
+  const ydoc = new Y.Doc();
+
+  // Load initial state from database BEFORE connecting providers
+  try {
+    const state = await documentsApi.getState(documentId);
+    if (state && state.length > 0) {
+      Y.applyUpdate(ydoc, state);
+      console.log('✓ Loaded document state from database');
+    }
+  } catch {
+    console.log('No existing state in database (new document)');
+  }
+
+  // IndexedDB persistence (offline support)
+  const indexeddbProvider = new IndexeddbPersistence(documentId, ydoc);
+
+  // WebSocket provider (real-time sync)
+  const websocketProvider = new WebsocketProvider(WS_URL, documentId, ydoc);
+
+  // Awareness for cursors and presence
+  const awareness = websocketProvider.awareness;
+
+  return {
+    ydoc,
+    websocketProvider,
+    indexeddbProvider,
+    awareness,
+  };
+};
+
+export const destroyYjsDocument = (providers: YjsProviders) => {
+  providers.websocketProvider.destroy();
+  providers.indexeddbProvider.destroy();
+  providers.ydoc.destroy();
+};
+
+// Random color generator for users
+export const getRandomColor = () => {
+  const colors = [
+    "#FF6B6B",
+    "#4ECDC4",
+    "#45B7D1",
+    "#FFA07A",
+    "#98D8C8",
+    "#F7DC6F",
+    "#BB8FCE",
+    "#85C1E2",
+  ];
+  return colors[Math.floor(Math.random() * colors.length)];
+};
+
+// Random name generator
+export const getRandomName = () => {
+  const adjectives = ["Happy", "Clever", "Brave", "Swift", "Kind"];
+  const animals = ["Panda", "Fox", "Wolf", "Bear", "Eagle"];
+  return `${adjectives[Math.floor(Math.random() * adjectives.length)]} ${
+    animals[Math.floor(Math.random() * animals.length)]
+  }`;
+};

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

frontend/src/pages/EditorPage.tsx

@@ -0,0 +1,36 @@
+import { useNavigate, useParams } from "react-router-dom";
+import Editor from "../components/Editor/Editor.tsx";
+import UserList from "../components/Presence/UserList.tsx";
+import { useYjsDocument } from "../hooks/useYjsDocument.ts";
+
+const EditorPage = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { providers, synced } = useYjsDocument(id!);
+
+  if (!providers) {
+    return <div className="loading">Connecting...</div>;
+  }
+
+  return (
+    <div className="editor-page">
+      <div className="page-header">
+        <button onClick={() => navigate("/")}>← Back to Home</button>
+        <div className="sync-status">
+          {synced ? "✓ Synced" : "⟳ Syncing..."}
+        </div>
+      </div>
+
+      <div className="page-content">
+        <div className="main-area">
+          <Editor providers={providers} />
+        </div>
+        <div className="sidebar">
+          <UserList awareness={providers.awareness} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EditorPage;

frontend/src/pages/Home.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import type { DocumentType } from "../api/document.ts";
+import { documentsApi } from "../api/document.ts";
+import PixelIcon from "../components/PixelIcon/PixelIcon.tsx";
+import FloatingGem from "../components/PixelSprites/FloatingGem.tsx";
+
+const Home = () => {
+  const [documents, setDocuments] = useState<DocumentType[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [creating, setCreating] = useState(false);
+  const navigate = useNavigate();
+
+  const loadDocuments = async () => {
+    try {
+      const { documents } = await documentsApi.list();
+      setDocuments(documents);
+    } catch (error) {
+      console.error("Failed to load documents:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadDocuments();
+  }, []);
+
+  const createDocument = async (type: "editor" | "kanban") => {
+    setCreating(true);
+    try {
+      const doc = await documentsApi.create({
+        name: `New ${type === "editor" ? "Document" : "Kanban Board"}`,
+        type,
+      });
+      navigate(`/${type}/${doc.id}`);
+    } catch (error) {
+      console.error("Failed to create document:", error);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const deleteDocument = async (id: string) => {
+    if (!confirm("Are you sure you want to delete this document?")) return;
+
+    try {
+      await documentsApi.delete(id);
+      loadDocuments();
+    } catch (error) {
+      console.error("Failed to delete document:", error);
+    }
+  };
+
+  if (loading) {
+    return <div className="loading">Loading documents...</div>;
+  }
+
+  return (
+    <div className="home-page" style={{ position: 'relative' }}>
+      <FloatingGem position={{ top: '20px', right: '40px' }} delay={0} size={40} />
+      <FloatingGem position={{ top: '60px', left: '60px' }} delay={1.5} size={32} />
+      <FloatingGem position={{ bottom: '100px', right: '100px' }} delay={3} size={36} />
+
+      <h1>My Documents</h1>
+
+      <div className="create-buttons">
+        <button onClick={() => createDocument("editor")} disabled={creating}>
+          <PixelIcon name="plus" size={20} />
+          <span style={{ marginLeft: '8px' }}>New Text Document</span>
+        </button>
+        <button onClick={() => createDocument("kanban")} disabled={creating}>
+          <PixelIcon name="plus" size={20} />
+          <span style={{ marginLeft: '8px' }}>New Kanban Board</span>
+        </button>
+      </div>
+
+      <div className="document-list">
+        {documents.length === 0 ? (
+          <p>No documents yet. Create one to get started!</p>
+        ) : (
+          documents.map((doc) => (
+            <div key={doc.id} className="document-card">
+              <div className="doc-info">
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
+                  <PixelIcon name={doc.type === 'editor' ? 'document' : 'kanban'} size={24} color="var(--pixel-purple-bright)" />
+                  <h3 style={{ margin: 0 }}>{doc.name}</h3>
+                </div>
+                <p className="doc-type">{doc.type}</p>
+                <p className="doc-date">
+                  Created: {new Date(doc.created_at).toLocaleDateString()}
+                </p>
+              </div>
+              <div className="doc-actions">
+                <button onClick={() => navigate(`/${doc.type}/${doc.id}`)} aria-label={`Open ${doc.name}`}>
+                  <PixelIcon name="back-arrow" size={16} style={{ transform: 'rotate(180deg)' }} />
+                  <span style={{ marginLeft: '6px' }}>Open</span>
+                </button>
+                <button onClick={() => deleteDocument(doc.id)} aria-label={`Delete ${doc.name}`}>
+                  <PixelIcon name="trash" size={16} />
+                  <span style={{ marginLeft: '6px' }}>Delete</span>
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Home;

frontend/src/pages/KanbanPage.tsx

@@ -0,0 +1,36 @@
+import { useNavigate, useParams } from "react-router-dom";
+import KanbanBoard from "../components/Kanban/KanbanBoard.tsx";
+import UserList from "../components/Presence/UserList.tsx";
+import { useYjsDocument } from "../hooks/useYjsDocument.ts";
+
+const KanbanPage = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { providers, synced } = useYjsDocument(id!);
+
+  if (!providers) {
+    return <div className="loading">Connecting...</div>;
+  }
+
+  return (
+    <div className="kanban-page">
+      <div className="page-header">
+        <button onClick={() => navigate("/")}>← Back to Home</button>
+        <div className="sync-status">
+          {synced ? "✓ Synced" : "⟳ Syncing..."}
+        </div>
+      </div>
+
+      <div className="page-content">
+        <div className="main-area">
+          <KanbanBoard providers={providers} />
+        </div>
+        <div className="sidebar">
+          <UserList awareness={providers.awareness} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default KanbanPage;