Merge pull request 'ralph/collaboration-and-character-variables' (#7) from ralph/collaboration-and-character-variables into developing

Reviewed-on: #7

package-lock.json

@@ -14,7 +14,8 @@
         "next": "16.1.4",
         "react": "19.2.3",
         "react-dom": "19.2.3",
-        "reactflow": "^11.11.4"
+        "reactflow": "^11.11.4",
+        "yjs": "^13.6.29"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -4975,6 +4976,16 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/isomorphic.js": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
+      "integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==",
+      "license": "MIT",
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/iterator.prototype": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
@@ -5130,6 +5141,27 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lib0": {
+      "version": "0.2.117",
+      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.117.tgz",
+      "integrity": "sha512-DeXj9X5xDCjgKLU/7RR+/HQEVzuuEUiwldwOGsHK/sfAfELGWEyTcf0x+uOvCvK3O2zPmZePXWL85vtia6GyZw==",
+      "license": "MIT",
+      "dependencies": {
+        "isomorphic.js": "^0.2.4"
+      },
+      "bin": {
+        "0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js",
+        "0gentesthtml": "bin/gentesthtml.js",
+        "0serve": "bin/0serve.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.30.2",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
@@ -7186,6 +7218,23 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yjs": {
+      "version": "13.6.29",
+      "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.29.tgz",
+      "integrity": "sha512-kHqDPdltoXH+X4w1lVmMtddE3Oeqq48nM40FD5ojTd8xYhQpzIDcfE2keMSU5bAgRPJBe225WTUdyUgj1DtbiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lib0": "^0.2.99"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=8.0.0"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

package.json

@@ -16,7 +16,8 @@
     "next": "16.1.4",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "reactflow": "^11.11.4"
+    "reactflow": "^11.11.4",
+    "yjs": "^13.6.29"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

prd.json

@@ -216,7 +216,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 12,
-      "passes": false,
+      "passes": true,
       "notes": "Dependencies: US-058, US-059, US-060, US-061"
     },
     {
@@ -232,7 +232,7 @@
         "Typecheck passes"
       ],
       "priority": 13,
-      "passes": false,
+      "passes": true,
       "notes": ""
     },
     {
@@ -251,7 +251,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 14,
-      "passes": false,
+      "passes": true,
       "notes": "Dependencies: US-043"
     },
     {
@@ -269,7 +269,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 15,
-      "passes": false,
+      "passes": true,
       "notes": "Dependencies: US-043"
     },
     {
@@ -287,7 +287,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 16,
-      "passes": false,
+      "passes": true,
       "notes": "Dependencies: US-045"
     },
     {
@@ -306,7 +306,7 @@
         "Typecheck passes"
       ],
       "priority": 17,
-      "passes": false,
+      "passes": true,
       "notes": "Dependencies: US-045"
     },
     {

progress.txt

@@ -43,6 +43,23 @@
 - `ChoiceOption` type includes optional `condition?: Condition`. When counting variable usage, check variable nodes + edge conditions + choice option conditions.
 - React Compiler lint forbids `setState` in effects and reading `useRef().current` during render. Use `useState(() => computeValue())` lazy initializer pattern for one-time initialization logic.
 - For detecting legacy data shape (pre-migration), pass a flag from the server component (page.tsx) to the client component, since only the server reads raw DB data.
+- Collaboration tables: `project_collaborators` (roles), `collaboration_sessions` (presence), `audit_trail` (history) — all with RLS scoped by project ownership or collaborator membership
+- RLS pattern for shared resources: check `projects.user_id = auth.uid()` OR `project_collaborators.user_id = auth.uid()` to cover both owners and collaborators
+- `RealtimeConnection` class at `src/lib/collaboration/realtime.ts` manages Supabase Realtime channel lifecycle (connect, heartbeat, reconnect, disconnect). Instantiate with (projectId, userId, callbacks).
+- FlowchartEditor receives `userId` prop from page.tsx server component for collaboration features
+- Toolbar accepts optional `connectionState` prop to show green/yellow/red connection indicator
+- `collaboration_sessions` table has UNIQUE(project_id, user_id) constraint to support upsert-based session management
+- Server actions for project-specific operations go in `src/app/editor/[projectId]/actions.ts` — use `'use server'` directive and return `{ success: boolean; error?: string }` pattern
+- Editor page.tsx supports both owner and collaborator access: first checks ownership, then falls back to `project_collaborators` lookup. Pass `isOwner` prop to client component.
+- `ShareModal` at `src/components/editor/ShareModal.tsx` manages collaborator invites/roles/removal via server actions. Only owners see invite form.
+- Dashboard shared projects use Supabase join query: `project_collaborators.select('role, projects(id, name, updated_at)')` to fetch projects shared with the user
+- `ProjectCard` supports optional `shared` and `sharedRole` props — when `shared=true`, hide edit/delete buttons and show role badge instead
+- `PresenceAvatars` at `src/components/editor/PresenceAvatars.tsx` renders connected collaborator avatars. Receives `PresenceUser[]` from `RealtimeConnection.onPresenceSync`.
+- `RealtimeConnection` constructor takes `(projectId, userId, displayName, callbacks)` — `displayName` is broadcast via Supabase Realtime presence tracking
+- User color for presence is derived from a hash of their userId, ensuring consistency across sessions. Use `getUserColor(userId)` pattern from PresenceAvatars.
+- `CRDTManager` at `src/lib/collaboration/crdt.ts` wraps a Yjs Y.Doc with Y.Map<string> for nodes and edges. Connects to Supabase Realtime channel for broadcasting updates.
+- CRDT sync pattern: local React Flow changes → `updateNodes`/`updateEdges` on CRDTManager → Yjs broadcasts to channel; remote broadcasts → Yjs applies update → callbacks set React Flow state. Use `isRemoteUpdateRef` to prevent echo loops.
+- For Supabase Realtime broadcast of binary data (Yjs updates), convert `Uint8Array` → `Array.from()` for JSON payload, and `new Uint8Array()` on receive.
 
 ---
 

src/app/dashboard/page.tsx

@@ -1,6 +1,7 @@
 import { createClient } from '@/lib/supabase/server'
 import NewProjectButton from '@/components/NewProjectButton'
 import ProjectList from '@/components/ProjectList'
+import ProjectCard from '@/components/ProjectCard'
 
 export default async function DashboardPage() {
   const supabase = await createClient()
@@ -19,6 +20,21 @@ export default async function DashboardPage() {
     .eq('user_id', user.id)
     .order('updated_at', { ascending: false })
 
+  // Fetch shared projects (projects where this user is a collaborator)
+  const { data: collaborations } = await supabase
+    .from('project_collaborators')
+    .select('role, projects(id, name, updated_at)')
+    .eq('user_id', user.id)
+
+  const sharedProjects = (collaborations || [])
+    .filter((c) => c.projects)
+    .map((c) => ({
+      ...(c.projects as unknown as { id: string; name: string; updated_at: string }),
+      shared: true,
+      role: c.role,
+    }))
+    .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
+
   if (error) {
     return (
       <div className="rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20">
@@ -44,6 +60,26 @@ export default async function DashboardPage() {
       </div>
 
       <ProjectList initialProjects={projects || []} />
+
+      {sharedProjects.length > 0 && (
+        <div className="mt-10">
+          <h2 className="mb-4 text-xl font-bold text-zinc-900 dark:text-zinc-50">
+            Shared with me
+          </h2>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {sharedProjects.map((project) => (
+              <ProjectCard
+                key={project.id}
+                id={project.id}
+                name={project.name}
+                updatedAt={project.updated_at}
+                shared
+                sharedRole={project.role}
+              />
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   )
 }

src/app/editor/[projectId]/FlowchartEditor.tsx

@@ -1,11 +1,6 @@
 'use client'
 
-<<<<<<< HEAD
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useRouter } from 'next/navigation'
-=======
 import React, { useCallback, useMemo, useState } from 'react'
->>>>>>> ralph/collaboration-and-character-variables
 import ReactFlow, {
   Background,
   BackgroundVariant,
@@ -32,37 +27,16 @@ import { createClient } from '@/lib/supabase/client'
 import DialogueNode from '@/components/editor/nodes/DialogueNode'
 import ChoiceNode from '@/components/editor/nodes/ChoiceNode'
 import VariableNode from '@/components/editor/nodes/VariableNode'
-<<<<<<< HEAD
-import ConditionalEdge from '@/components/editor/edges/ConditionalEdge'
-import ContextMenu, { ContextMenuType } from '@/components/editor/ContextMenu'
-import ConditionEditor from '@/components/editor/ConditionEditor'
-import type { FlowchartData, FlowchartNode, FlowchartEdge, Condition } from '@/types/flowchart'
-
-// LocalStorage key prefix for draft saves
-const DRAFT_KEY_PREFIX = 'vnwrite-draft-'
-
-// Debounce delay in ms
-const AUTOSAVE_DEBOUNCE_MS = 1000
-
-type ContextMenuState = {
-  x: number
-  y: number
-  type: ContextMenuType
-  nodeId?: string
-  edgeId?: string
-} | null
-
-type ConditionEditorState = {
-  edgeId: string
-  condition?: Condition
-} | null
-=======
 import ProjectSettingsModal from '@/components/editor/ProjectSettingsModal'
 import ConditionEditor from '@/components/editor/ConditionEditor'
+import ExportValidationModal, { type ValidationIssue } from '@/components/editor/ExportValidationModal'
 import { EditorProvider } from '@/components/editor/EditorContext'
 import Toast from '@/components/Toast'
+import { RealtimeConnection, type ConnectionState, type PresenceUser } from '@/lib/collaboration/realtime'
+import { CRDTManager } from '@/lib/collaboration/crdt'
+import { createClient } from '@/lib/supabase/client'
+import ShareModal from '@/components/editor/ShareModal'
 import type { FlowchartData, FlowchartNode, FlowchartEdge, Character, Variable, Condition } from '@/types/flowchart'
->>>>>>> ralph/collaboration-and-character-variables
 
 type FlowchartEditorProps = {
   projectId: string
@@ -97,314 +71,6 @@ function toReactFlowEdges(edges: FlowchartEdge[]): Edge[] {
   }))
 }
 
-<<<<<<< HEAD
-// Convert React Flow Node type back to our FlowchartNode type
-function fromReactFlowNodes(nodes: Node[]): FlowchartNode[] {
-  return nodes.map((node) => ({
-    id: node.id,
-    type: node.type as 'dialogue' | 'choice' | 'variable',
-    position: node.position,
-    data: node.data,
-  })) as FlowchartNode[]
-}
-
-// Convert React Flow Edge type back to our FlowchartEdge type
-function fromReactFlowEdges(edges: Edge[]): FlowchartEdge[] {
-  return edges.map((edge) => ({
-    id: edge.id,
-    source: edge.source,
-    sourceHandle: edge.sourceHandle ?? undefined,
-    target: edge.target,
-    targetHandle: edge.targetHandle ?? undefined,
-    data: edge.data,
-  }))
-}
-
-// Get LocalStorage key for a project
-function getDraftKey(projectId: string): string {
-  return `${DRAFT_KEY_PREFIX}${projectId}`
-}
-
-// Save draft to LocalStorage
-function saveDraft(projectId: string, data: FlowchartData): void {
-  try {
-    localStorage.setItem(getDraftKey(projectId), JSON.stringify(data))
-  } catch (error) {
-    console.error('Failed to save draft to LocalStorage:', error)
-  }
-}
-
-// Load draft from LocalStorage
-function loadDraft(projectId: string): FlowchartData | null {
-  try {
-    const draft = localStorage.getItem(getDraftKey(projectId))
-    if (!draft) return null
-    return JSON.parse(draft) as FlowchartData
-  } catch (error) {
-    console.error('Failed to load draft from LocalStorage:', error)
-    return null
-  }
-}
-
-// Clear draft from LocalStorage
-export function clearDraft(projectId: string): void {
-  try {
-    localStorage.removeItem(getDraftKey(projectId))
-  } catch (error) {
-    console.error('Failed to clear draft from LocalStorage:', error)
-  }
-}
-
-// Compare two FlowchartData objects for equality
-function flowchartDataEquals(a: FlowchartData, b: FlowchartData): boolean {
-  return JSON.stringify(a) === JSON.stringify(b)
-}
-
-// Validate imported flowchart data structure
-function isValidFlowchartData(data: unknown): data is FlowchartData {
-  if (!data || typeof data !== 'object') return false
-  const obj = data as Record<string, unknown>
-  if (!Array.isArray(obj.nodes)) return false
-  if (!Array.isArray(obj.edges)) return false
-  return true
-}
-
-// Ren'Py export types
-type RenpyDialogueNode = {
-  type: 'dialogue'
-  speaker: string
-  text: string
-  next?: string
-  condition?: Condition
-}
-
-type RenpyMenuChoice = {
-  label: string
-  next?: string
-  condition?: Condition
-}
-
-type RenpyMenuNode = {
-  type: 'menu'
-  prompt: string
-  choices: RenpyMenuChoice[]
-}
-
-type RenpyVariableNode = {
-  type: 'variable'
-  name: string
-  operation: 'set' | 'add' | 'subtract'
-  value: number
-  next?: string
-  condition?: Condition
-}
-
-type RenpyNode = RenpyDialogueNode | RenpyMenuNode | RenpyVariableNode
-
-type RenpyExport = {
-  projectName: string
-  exportedAt: string
-  sections: Record<string, RenpyNode[]>
-}
-
-// Find the first node (node with no incoming edges)
-function findFirstNode(nodes: FlowchartNode[], edges: FlowchartEdge[]): FlowchartNode | null {
-  const targetIds = new Set(edges.map((e) => e.target))
-  const startNodes = nodes.filter((n) => !targetIds.has(n.id))
-  // Return the first start node, or the first node if all have incoming edges
-  return startNodes[0] || nodes[0] || null
-}
-
-// Get outgoing edge from a node (for dialogue and variable nodes)
-function getOutgoingEdge(nodeId: string, edges: FlowchartEdge[], sourceHandle?: string): FlowchartEdge | undefined {
-  return edges.find((e) => e.source === nodeId && (sourceHandle === undefined || e.sourceHandle === sourceHandle))
-}
-
-// Get all outgoing edges from a node (for choice nodes)
-function getOutgoingEdges(nodeId: string, edges: FlowchartEdge[]): FlowchartEdge[] {
-  return edges.filter((e) => e.source === nodeId)
-}
-
-// Convert flowchart to Ren'Py format using graph traversal
-function convertToRenpyFormat(
-  nodes: FlowchartNode[],
-  edges: FlowchartEdge[],
-  projectName: string
-): RenpyExport {
-  const nodeMap = new Map<string, FlowchartNode>(nodes.map((n) => [n.id, n]))
-  const visited = new Set<string>()
-  const sections: Record<string, RenpyNode[]> = {}
-  let currentSectionName = 'start'
-  let currentSection: RenpyNode[] = []
-
-  // Helper to get or create a label for a node
-  const nodeLabels = new Map<string, string>()
-  let labelCounter = 0
-
-  function getNodeLabel(nodeId: string): string {
-    if (!nodeLabels.has(nodeId)) {
-      const node = nodeMap.get(nodeId)
-      if (node?.type === 'dialogue' && node.data.speaker) {
-        // Use speaker name as part of label if available
-        nodeLabels.set(nodeId, `section_${node.data.speaker.toLowerCase().replace(/\s+/g, '_')}_${labelCounter++}`)
-      } else {
-        nodeLabels.set(nodeId, `section_${labelCounter++}`)
-      }
-    }
-    return nodeLabels.get(nodeId)!
-  }
-
-  // Process a node and its successors
-  function processNode(nodeId: string): void {
-    if (visited.has(nodeId)) return
-    visited.add(nodeId)
-
-    const node = nodeMap.get(nodeId)
-    if (!node) return
-
-    if (node.type === 'dialogue') {
-      const outgoingEdge = getOutgoingEdge(nodeId, edges)
-      const renpyNode: RenpyDialogueNode = {
-        type: 'dialogue',
-        speaker: node.data.speaker || '',
-        text: node.data.text,
-      }
-
-      if (outgoingEdge) {
-        // Check if target node is already visited (creates a jump)
-        if (visited.has(outgoingEdge.target)) {
-          renpyNode.next = getNodeLabel(outgoingEdge.target)
-        } else {
-          renpyNode.next = outgoingEdge.target
-        }
-        if (outgoingEdge.data?.condition) {
-          renpyNode.condition = outgoingEdge.data.condition
-        }
-      }
-
-      currentSection.push(renpyNode)
-
-      // Process next node if not visited
-      if (outgoingEdge && !visited.has(outgoingEdge.target)) {
-        processNode(outgoingEdge.target)
-      }
-    } else if (node.type === 'choice') {
-      const outgoingEdges = getOutgoingEdges(nodeId, edges)
-
-      // Map options to their corresponding edges
-      const choices: RenpyMenuChoice[] = node.data.options.map((option, index) => {
-        // Find edge for this option handle
-        const optionEdge = outgoingEdges.find((e) => e.sourceHandle === `option-${index}`)
-        const choice: RenpyMenuChoice = {
-          label: option.label || `Option ${index + 1}`,
-        }
-
-        if (optionEdge) {
-          // If target is visited, use label; otherwise use target id
-          if (visited.has(optionEdge.target)) {
-            choice.next = getNodeLabel(optionEdge.target)
-          } else {
-            choice.next = optionEdge.target
-          }
-          if (optionEdge.data?.condition) {
-            choice.condition = optionEdge.data.condition
-          }
-        }
-
-        // Per-option condition (visibility condition) takes priority over edge condition
-        if (option.condition) {
-          choice.condition = option.condition
-        }
-
-        return choice
-      })
-
-      const renpyNode: RenpyMenuNode = {
-        type: 'menu',
-        prompt: node.data.prompt || '',
-        choices,
-      }
-
-      currentSection.push(renpyNode)
-
-      // Save current section before processing branches
-      sections[currentSectionName] = currentSection
-
-      // Process each branch in a new section
-      for (const choice of choices) {
-        if (choice.next && !visited.has(choice.next)) {
-          const targetNode = nodeMap.get(choice.next)
-          if (targetNode) {
-            // Start new section for this branch
-            currentSectionName = getNodeLabel(choice.next)
-            currentSection = []
-            processNode(choice.next)
-            if (currentSection.length > 0) {
-              sections[currentSectionName] = currentSection
-            }
-          }
-        }
-      }
-    } else if (node.type === 'variable') {
-      const outgoingEdge = getOutgoingEdge(nodeId, edges)
-      const renpyNode: RenpyVariableNode = {
-        type: 'variable',
-        name: node.data.variableName,
-        operation: node.data.operation,
-        value: node.data.value,
-      }
-
-      if (outgoingEdge) {
-        if (visited.has(outgoingEdge.target)) {
-          renpyNode.next = getNodeLabel(outgoingEdge.target)
-        } else {
-          renpyNode.next = outgoingEdge.target
-        }
-        if (outgoingEdge.data?.condition) {
-          renpyNode.condition = outgoingEdge.data.condition
-        }
-      }
-
-      currentSection.push(renpyNode)
-
-      if (outgoingEdge && !visited.has(outgoingEdge.target)) {
-        processNode(outgoingEdge.target)
-      }
-    }
-  }
-
-  // Find and process starting from the first node
-  const firstNode = findFirstNode(nodes, edges)
-  if (firstNode) {
-    processNode(firstNode.id)
-    // Save the final section if it has content
-    if (currentSection.length > 0 && !sections[currentSectionName]) {
-      sections[currentSectionName] = currentSection
-    }
-  }
-
-  // Replace node IDs in next fields with proper labels
-  for (const sectionNodes of Object.values(sections)) {
-    for (const renpyNode of sectionNodes) {
-      if (renpyNode.type === 'dialogue' || renpyNode.type === 'variable') {
-        if (renpyNode.next && nodeLabels.has(renpyNode.next)) {
-          renpyNode.next = nodeLabels.get(renpyNode.next)
-        }
-      } else if (renpyNode.type === 'menu') {
-        for (const choice of renpyNode.choices) {
-          if (choice.next && nodeLabels.has(choice.next)) {
-            choice.next = nodeLabels.get(choice.next)
-          }
-        }
-      }
-    }
-  }
-
-  return {
-    projectName,
-    exportedAt: new Date().toISOString(),
-    sections,
-=======
 const RANDOM_COLORS = [
   '#EF4444', '#F97316', '#F59E0B', '#10B981',
   '#3B82F6', '#8B5CF6', '#EC4899', '#14B8A6',
@@ -542,16 +208,11 @@ function computeMigration(initialData: FlowchartData, shouldMigrate: boolean) {
     nodes: migratedNodes,
     edges: migratedEdges,
     toastMessage: `Auto-imported ${parts.join(' and ')} from existing data`,
->>>>>>> ralph/collaboration-and-character-variables
   }
 }
 
 // Inner component that uses useReactFlow hook
-<<<<<<< HEAD
-function FlowchartEditorInner({ projectId, projectName, initialData }: FlowchartEditorProps) {
-=======
 function FlowchartEditorInner({ projectId, initialData, needsMigration }: FlowchartEditorProps) {
->>>>>>> ralph/collaboration-and-character-variables
   // Define custom node types - memoized to prevent re-renders
   const nodeTypes: NodeTypes = useMemo(
     () => ({
@@ -619,8 +280,104 @@ function FlowchartEditorInner({ projectId, initialData, needsMigration }: Flowch
   const [characters, setCharacters] = useState<Character[]>(migratedData.characters)
   const [variables, setVariables] = useState<Variable[]>(migratedData.variables)
   const [showSettings, setShowSettings] = useState(false)
+  const [showShare, setShowShare] = useState(false)
   const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null)
   const [toastMessage, setToastMessage] = useState<string | null>(migratedData.toastMessage)
+  const [validationIssues, setValidationIssues] = useState<ValidationIssue[] | null>(null)
+  const [warningNodeIds, setWarningNodeIds] = useState<Set<string>>(new Set())
+  const [connectionState, setConnectionState] = useState<ConnectionState>('disconnected')
+  const [presenceUsers, setPresenceUsers] = useState<PresenceUser[]>([])
+  const realtimeRef = useRef<RealtimeConnection | null>(null)
+  const crdtRef = useRef<CRDTManager | null>(null)
+  const isRemoteUpdateRef = useRef(false)
+
+  // Initialize CRDT manager and connect to Supabase Realtime channel on mount
+  useEffect(() => {
+    const supabase = createClient()
+
+    const crdtManager = new CRDTManager({
+      onNodesChange: (crdtNodes: FlowchartNode[]) => {
+        isRemoteUpdateRef.current = true
+        setNodes(toReactFlowNodes(crdtNodes))
+        isRemoteUpdateRef.current = false
+      },
+      onEdgesChange: (crdtEdges: FlowchartEdge[]) => {
+        isRemoteUpdateRef.current = true
+        setEdges(toReactFlowEdges(crdtEdges))
+        isRemoteUpdateRef.current = false
+      },
+      onPersist: async (persistNodes: FlowchartNode[], persistEdges: FlowchartEdge[]) => {
+        try {
+          await supabase
+            .from('projects')
+            .update({
+              flowchart_data: {
+                nodes: persistNodes,
+                edges: persistEdges,
+                characters,
+                variables,
+              },
+            })
+            .eq('id', projectId)
+        } catch {
+          // Persistence failure is non-critical; will retry on next change
+        }
+      },
+    })
+
+    // Initialize CRDT document from initial data
+    crdtManager.initializeFromData(migratedData.nodes, migratedData.edges)
+    crdtRef.current = crdtManager
+
+    const connection = new RealtimeConnection(projectId, userId, userDisplayName, {
+      onConnectionStateChange: setConnectionState,
+      onPresenceSync: setPresenceUsers,
+      onChannelSubscribed: (channel) => {
+        crdtManager.connectChannel(channel)
+      },
+    })
+    realtimeRef.current = connection
+    connection.connect()
+
+    return () => {
+      connection.disconnect()
+      realtimeRef.current = null
+      crdtManager.destroy()
+      crdtRef.current = null
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [projectId, userId, userDisplayName])
+
+  // Sync local React Flow state changes to CRDT (skip remote-originated updates)
+  const nodesForCRDT = useMemo(() => {
+    return nodes.map((node) => ({
+      id: node.id,
+      type: node.type as 'dialogue' | 'choice' | 'variable',
+      position: node.position,
+      data: node.data,
+    })) as FlowchartNode[]
+  }, [nodes])
+
+  const edgesForCRDT = useMemo(() => {
+    return edges.map((edge) => ({
+      id: edge.id,
+      source: edge.source,
+      sourceHandle: edge.sourceHandle,
+      target: edge.target,
+      targetHandle: edge.targetHandle,
+      data: edge.data,
+    })) as FlowchartEdge[]
+  }, [edges])
+
+  useEffect(() => {
+    if (isRemoteUpdateRef.current) return
+    crdtRef.current?.updateNodes(nodesForCRDT)
+  }, [nodesForCRDT])
+
+  useEffect(() => {
+    if (isRemoteUpdateRef.current) return
+    crdtRef.current?.updateEdges(edgesForCRDT)
+  }, [edgesForCRDT])
 
   const handleAddCharacter = useCallback(
     (name: string, color: string): string => {
@@ -1047,6 +804,19 @@ function FlowchartEditorInner({ projectId, initialData, needsMigration }: Flowch
     [setEdges]
   )
 
+  // Apply warning styles to nodes with undefined references
+  const styledNodes = useMemo(
+    () =>
+      warningNodeIds.size === 0
+        ? nodes
+        : nodes.map((node) =>
+            warningNodeIds.has(node.id)
+              ? { ...node, className: 'export-warning-node' }
+              : node
+          ),
+    [nodes, warningNodeIds]
+  )
+
   // Get the selected edge's condition data
   const selectedEdge = useMemo(
     () => (selectedEdgeId ? edges.find((e) => e.id === selectedEdgeId) : null),
@@ -1064,10 +834,13 @@ function FlowchartEditorInner({ projectId, initialData, needsMigration }: Flowch
           onExport={handleExport}
           onImport={handleImport}
           onProjectSettings={() => setShowSettings(true)}
+          onShare={() => setShowShare(true)}
+          connectionState={connectionState}
+          presenceUsers={presenceUsers}
         />
         <div className="flex-1">
           <ReactFlow
-            nodes={nodes}
+            nodes={styledNodes}
             edges={edges}
             nodeTypes={nodeTypes}
             onNodesChange={onNodesChange}
@@ -1094,6 +867,13 @@ function FlowchartEditorInner({ projectId, initialData, needsMigration }: Flowch
             getVariableUsageCount={getVariableUsageCount}
           />
         )}
+        {showShare && (
+          <ShareModal
+            projectId={projectId}
+            isOwner={isOwner}
+            onClose={() => setShowShare(false)}
+          />
+        )}
         {selectedEdge && (
           <ConditionEditor
             edgeId={selectedEdge.id}
@@ -1102,6 +882,13 @@ function FlowchartEditorInner({ projectId, initialData, needsMigration }: Flowch
             onClose={() => setSelectedEdgeId(null)}
           />
         )}
+        {validationIssues && (
+          <ExportValidationModal
+            issues={validationIssues}
+            onExportAnyway={handleExportAnyway}
+            onCancel={handleExportCancel}
+          />
+        )}
         {toastMessage && (
           <Toast
             message={toastMessage}

src/app/editor/[projectId]/actions.ts

@@ -0,0 +1,227 @@
+'use server'
+
+import { createClient } from '@/lib/supabase/server'
+
+export type Collaborator = {
+  id: string
+  user_id: string
+  role: 'owner' | 'editor' | 'viewer'
+  invited_at: string
+  accepted_at: string | null
+  display_name: string | null
+  email: string | null
+}
+
+export async function getCollaborators(
+  projectId: string
+): Promise<{ success: boolean; data?: Collaborator[]; error?: string }> {
+  const supabase = await createClient()
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+
+  if (!user) {
+    return { success: false, error: 'Not authenticated' }
+  }
+
+  // Verify user owns the project
+  const { data: project } = await supabase
+    .from('projects')
+    .select('id, user_id')
+    .eq('id', projectId)
+    .single()
+
+  if (!project) {
+    return { success: false, error: 'Project not found' }
+  }
+
+  const isOwner = project.user_id === user.id
+
+  // Check if user is a collaborator
+  if (!isOwner) {
+    const { data: collab } = await supabase
+      .from('project_collaborators')
+      .select('id')
+      .eq('project_id', projectId)
+      .eq('user_id', user.id)
+      .single()
+
+    if (!collab) {
+      return { success: false, error: 'Access denied' }
+    }
+  }
+
+  // Fetch collaborators with profile info
+  const { data: collaborators, error } = await supabase
+    .from('project_collaborators')
+    .select('id, user_id, role, invited_at, accepted_at, profiles(display_name, email)')
+    .eq('project_id', projectId)
+
+  if (error) {
+    return { success: false, error: error.message }
+  }
+
+  const result: Collaborator[] = (collaborators || []).map((c) => {
+    const profile = c.profiles as unknown as { display_name: string | null; email: string | null } | null
+    return {
+      id: c.id,
+      user_id: c.user_id,
+      role: c.role as 'owner' | 'editor' | 'viewer',
+      invited_at: c.invited_at,
+      accepted_at: c.accepted_at,
+      display_name: profile?.display_name || null,
+      email: profile?.email || null,
+    }
+  })
+
+  return { success: true, data: result }
+}
+
+export async function inviteCollaborator(
+  projectId: string,
+  email: string,
+  role: 'editor' | 'viewer'
+): Promise<{ success: boolean; error?: string }> {
+  const supabase = await createClient()
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+
+  if (!user) {
+    return { success: false, error: 'Not authenticated' }
+  }
+
+  // Verify user owns the project
+  const { data: project } = await supabase
+    .from('projects')
+    .select('id, user_id')
+    .eq('id', projectId)
+    .eq('user_id', user.id)
+    .single()
+
+  if (!project) {
+    return { success: false, error: 'Only the project owner can invite collaborators' }
+  }
+
+  // Find the user by email in profiles
+  const { data: targetProfile } = await supabase
+    .from('profiles')
+    .select('id, email')
+    .eq('email', email)
+    .single()
+
+  if (!targetProfile) {
+    return { success: false, error: 'No user found with that email address' }
+  }
+
+  // Cannot invite yourself
+  if (targetProfile.id === user.id) {
+    return { success: false, error: 'You cannot invite yourself' }
+  }
+
+  // Check if already a collaborator
+  const { data: existing } = await supabase
+    .from('project_collaborators')
+    .select('id')
+    .eq('project_id', projectId)
+    .eq('user_id', targetProfile.id)
+    .single()
+
+  if (existing) {
+    return { success: false, error: 'This user is already a collaborator' }
+  }
+
+  // Insert collaborator
+  const { error: insertError } = await supabase
+    .from('project_collaborators')
+    .insert({
+      project_id: projectId,
+      user_id: targetProfile.id,
+      role,
+      invited_at: new Date().toISOString(),
+      accepted_at: new Date().toISOString(), // Auto-accept for now
+    })
+
+  if (insertError) {
+    return { success: false, error: insertError.message }
+  }
+
+  return { success: true }
+}
+
+export async function updateCollaboratorRole(
+  projectId: string,
+  collaboratorId: string,
+  role: 'editor' | 'viewer'
+): Promise<{ success: boolean; error?: string }> {
+  const supabase = await createClient()
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+
+  if (!user) {
+    return { success: false, error: 'Not authenticated' }
+  }
+
+  // Verify user owns the project
+  const { data: project } = await supabase
+    .from('projects')
+    .select('id, user_id')
+    .eq('id', projectId)
+    .eq('user_id', user.id)
+    .single()
+
+  if (!project) {
+    return { success: false, error: 'Only the project owner can change roles' }
+  }
+
+  const { error } = await supabase
+    .from('project_collaborators')
+    .update({ role })
+    .eq('id', collaboratorId)
+    .eq('project_id', projectId)
+
+  if (error) {
+    return { success: false, error: error.message }
+  }
+
+  return { success: true }
+}
+
+export async function removeCollaborator(
+  projectId: string,
+  collaboratorId: string
+): Promise<{ success: boolean; error?: string }> {
+  const supabase = await createClient()
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+
+  if (!user) {
+    return { success: false, error: 'Not authenticated' }
+  }
+
+  // Verify user owns the project
+  const { data: project } = await supabase
+    .from('projects')
+    .select('id, user_id')
+    .eq('id', projectId)
+    .eq('user_id', user.id)
+    .single()
+
+  if (!project) {
+    return { success: false, error: 'Only the project owner can remove collaborators' }
+  }
+
+  const { error } = await supabase
+    .from('project_collaborators')
+    .delete()
+    .eq('id', collaboratorId)
+    .eq('project_id', projectId)
+
+  if (error) {
+    return { success: false, error: error.message }
+  }
+
+  return { success: true }
+}

src/app/editor/[projectId]/page.tsx

@@ -19,15 +19,52 @@ export default async function EditorPage({ params }: PageProps) {
     return null
   }
 
-  const { data: project, error } = await supabase
+  // Fetch user's display name for presence
+  const { data: profile } = await supabase
+    .from('profiles')
+    .select('display_name')
+    .eq('id', user.id)
+    .single()
+
+  const userDisplayName = profile?.display_name || user.email || 'Anonymous'
+
+  // Try to load as owner first
+  const { data: ownedProject } = await supabase
     .from('projects')
     .select('id, name, flowchart_data')
     .eq('id', projectId)
     .eq('user_id', user.id)
     .single()
 
-  if (error || !project) {
+  let project = ownedProject
-    notFound()
+  let isOwner = true
+
+  // If not the owner, check if the user is a collaborator
+  if (!project) {
+    // RLS on projects allows collaborators to SELECT shared projects
+    const { data: collab } = await supabase
+      .from('project_collaborators')
+      .select('id, role')
+      .eq('project_id', projectId)
+      .eq('user_id', user.id)
+      .single()
+
+    if (!collab) {
+      notFound()
+    }
+
+    const { data: sharedProject } = await supabase
+      .from('projects')
+      .select('id, name, flowchart_data')
+      .eq('id', projectId)
+      .single()
+
+    if (!sharedProject) {
+      notFound()
+    }
+
+    project = sharedProject
+    isOwner = false
   }
 
   const rawData = project.flowchart_data || {}
@@ -42,7 +79,7 @@ export default async function EditorPage({ params }: PageProps) {
   // the project was created before these features existed and may need auto-migration
   const needsMigration = !rawData.characters && !rawData.variables
 
-  return (
+  return (<>
     <div className="flex h-screen flex-col">
       <header className="flex items-center justify-between border-b border-zinc-200 bg-white px-4 py-3 dark:border-zinc-700 dark:bg-zinc-900">
         <div className="flex items-center gap-4">
@@ -99,10 +136,14 @@ export default async function EditorPage({ params }: PageProps) {
       <div className="flex-1">
         <FlowchartEditor
           projectId={project.id}
+          userId={user.id}
+          userDisplayName={userDisplayName}
+          isOwner={isOwner}
           initialData={flowchartData}
           needsMigration={needsMigration}
         />
       </div>
+    </>
     )
   }
 

src/app/globals.css

@@ -24,3 +24,16 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+/* Export validation warning highlighting for React Flow nodes */
+.react-flow__node.export-warning-node {
+  outline: 3px solid #f97316;
+  outline-offset: 2px;
+  border-radius: 6px;
+  animation: pulse-warning 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse-warning {
+  0%, 100% { outline-color: #f97316; }
+  50% { outline-color: #fb923c; }
+}

src/components/ProjectCard.tsx

@@ -8,8 +8,10 @@ interface ProjectCardProps {
   id: string
   name: string
   updatedAt: string
-  onDelete: (id: string) => void
+  onDelete?: (id: string) => void
-  onRename: (id: string, newName: string) => void
+  onRename?: (id: string, newName: string) => void
+  shared?: boolean
+  sharedRole?: string
 }
 
 function formatDate(dateString: string): string {
@@ -29,6 +31,8 @@ export default function ProjectCard({
   updatedAt,
   onDelete,
   onRename,
+  shared,
+  sharedRole,
 }: ProjectCardProps) {
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
   const [isDeleting, setIsDeleting] = useState(false)
@@ -62,7 +66,7 @@ export default function ProjectCard({
 
     setIsDeleting(false)
     setShowDeleteDialog(false)
-    onDelete(id)
+    onDelete?.(id)
   }
 
   const handleCancelDelete = () => {
@@ -106,7 +110,7 @@ export default function ProjectCard({
 
     setIsRenaming(false)
     setShowRenameDialog(false)
-    onRename(id, newName.trim())
+    onRename?.(id, newName.trim())
   }
 
   const handleCancelRename = () => {
@@ -122,46 +126,55 @@ export default function ProjectCard({
         onClick={handleCardClick}
         className="group relative cursor-pointer rounded-lg border border-zinc-200 bg-white p-6 transition-all hover:border-blue-300 hover:shadow-md dark:border-zinc-700 dark:bg-zinc-800 dark:hover:border-blue-600"
       >
-        <div className="absolute right-3 top-3 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+        {!shared && onRename && onDelete && (
-          <button
+          <div className="absolute right-3 top-3 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
-            onClick={handleRenameClick}
+            <button
-            className="rounded p-1 text-zinc-400 hover:bg-blue-100 hover:text-blue-600 dark:hover:bg-blue-900/30 dark:hover:text-blue-400"
+              onClick={handleRenameClick}
-            title="Rename project"
+              className="rounded p-1 text-zinc-400 hover:bg-blue-100 hover:text-blue-600 dark:hover:bg-blue-900/30 dark:hover:text-blue-400"
-          >
+              title="Rename project"
-            <svg
-              className="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
             >
-              <path
+              <svg
-                strokeLinecap="round"
+                className="h-5 w-5"
-                strokeLinejoin="round"
+                fill="none"
-                strokeWidth={2}
+                viewBox="0 0 24 24"
-                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                stroke="currentColor"
-              />
+              >
-            </svg>
+                <path
-          </button>
+                  strokeLinecap="round"
-          <button
+                  strokeLinejoin="round"
-            onClick={handleDeleteClick}
+                  strokeWidth={2}
-            className="rounded p-1 text-zinc-400 hover:bg-red-100 hover:text-red-600 dark:hover:bg-red-900/30 dark:hover:text-red-400"
+                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-            title="Delete project"
+                />
-          >
+              </svg>
-            <svg
+            </button>
-              className="h-5 w-5"
+            <button
-              fill="none"
+              onClick={handleDeleteClick}
-              viewBox="0 0 24 24"
+              className="rounded p-1 text-zinc-400 hover:bg-red-100 hover:text-red-600 dark:hover:bg-red-900/30 dark:hover:text-red-400"
-              stroke="currentColor"
+              title="Delete project"
             >
-              <path
+              <svg
-                strokeLinecap="round"
+                className="h-5 w-5"
-                strokeLinejoin="round"
+                fill="none"
-                strokeWidth={2}
+                viewBox="0 0 24 24"
-                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                stroke="currentColor"
-              />
+              >
-            </svg>
+                <path
-          </button>
+                  strokeLinecap="round"
-        </div>
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                />
+              </svg>
+            </button>
+          </div>
+        )}
+        {shared && (
+          <div className="absolute right-3 top-3">
+            <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
+              {sharedRole === 'editor' ? 'Editor' : 'Viewer'}
+            </span>
+          </div>
+        )}
         <h2 className="pr-8 text-lg font-semibold text-zinc-900 group-hover:text-blue-600 dark:text-zinc-50 dark:group-hover:text-blue-400">
           {name}
         </h2>

src/components/editor/ExportValidationModal.tsx

@@ -0,0 +1,131 @@
+'use client'
+
+export type ValidationIssue = {
+  nodeId: string
+  nodeType: 'dialogue' | 'choice' | 'variable' | 'edge'
+  contentSnippet: string
+  undefinedReference: string
+  referenceType: 'character' | 'variable'
+}
+
+type ExportValidationModalProps = {
+  issues: ValidationIssue[]
+  onExportAnyway: () => void
+  onCancel: () => void
+}
+
+export default function ExportValidationModal({
+  issues,
+  onExportAnyway,
+  onCancel,
+}: ExportValidationModalProps) {
+  const characterIssues = issues.filter((i) => i.referenceType === 'character')
+  const variableIssues = issues.filter((i) => i.referenceType === 'variable')
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="mx-4 w-full max-w-lg rounded-lg bg-white shadow-xl dark:bg-zinc-800">
+        <div className="border-b border-zinc-200 px-6 py-4 dark:border-zinc-700">
+          <div className="flex items-center gap-2">
+            <svg
+              className="h-5 w-5 text-orange-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
+              />
+            </svg>
+            <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+              Export Validation Issues
+            </h2>
+          </div>
+          <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
+            {issues.length} undefined reference{issues.length !== 1 ? 's' : ''} found. These nodes/edges reference characters or variables that no longer exist.
+          </p>
+        </div>
+
+        <div className="max-h-[50vh] overflow-y-auto px-6 py-4">
+          {characterIssues.length > 0 && (
+            <div className="mb-4">
+              <h3 className="mb-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
+                Undefined Characters
+              </h3>
+              <ul className="space-y-2">
+                {characterIssues.map((issue, idx) => (
+                  <li
+                    key={`char-${idx}`}
+                    className="rounded border border-orange-200 bg-orange-50 p-3 dark:border-orange-800 dark:bg-orange-950"
+                  >
+                    <div className="flex items-start justify-between gap-2">
+                      <div className="min-w-0">
+                        <span className="inline-block rounded bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900 dark:text-blue-300">
+                          {issue.nodeType}
+                        </span>
+                        <p className="mt-1 truncate text-sm text-zinc-700 dark:text-zinc-300">
+                          {issue.contentSnippet}
+                        </p>
+                      </div>
+                      <span className="shrink-0 text-xs text-orange-600 dark:text-orange-400">
+                        ID: {issue.undefinedReference.slice(0, 8)}...
+                      </span>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {variableIssues.length > 0 && (
+            <div>
+              <h3 className="mb-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
+                Undefined Variables
+              </h3>
+              <ul className="space-y-2">
+                {variableIssues.map((issue, idx) => (
+                  <li
+                    key={`var-${idx}`}
+                    className="rounded border border-orange-200 bg-orange-50 p-3 dark:border-orange-800 dark:bg-orange-950"
+                  >
+                    <div className="flex items-start justify-between gap-2">
+                      <div className="min-w-0">
+                        <span className="inline-block rounded bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900 dark:text-blue-300">
+                          {issue.nodeType}
+                        </span>
+                        <p className="mt-1 truncate text-sm text-zinc-700 dark:text-zinc-300">
+                          {issue.contentSnippet}
+                        </p>
+                      </div>
+                      <span className="shrink-0 text-xs text-orange-600 dark:text-orange-400">
+                        ID: {issue.undefinedReference.slice(0, 8)}...
+                      </span>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-3 border-t border-zinc-200 px-6 py-4 dark:border-zinc-700">
+          <button
+            onClick={onCancel}
+            className="rounded border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onExportAnyway}
+            className="rounded bg-orange-500 px-4 py-2 text-sm font-medium text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800"
+          >
+            Export anyway
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/editor/PresenceAvatars.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import type { PresenceUser } from '@/lib/collaboration/realtime'
+
+type PresenceAvatarsProps = {
+  users: PresenceUser[]
+}
+
+const MAX_VISIBLE = 5
+
+// Generate a consistent color from a user ID hash
+function getUserColor(userId: string): string {
+  let hash = 0
+  for (let i = 0; i < userId.length; i++) {
+    hash = ((hash << 5) - hash + userId.charCodeAt(i)) | 0
+  }
+  const colors = [
+    '#EF4444', '#F97316', '#F59E0B', '#10B981',
+    '#3B82F6', '#8B5CF6', '#EC4899', '#14B8A6',
+    '#6366F1', '#F43F5E', '#84CC16', '#06B6D4',
+  ]
+  return colors[Math.abs(hash) % colors.length]
+}
+
+// Get initials from a display name (first letter of first two words)
+function getInitials(displayName: string): string {
+  const parts = displayName.trim().split(/\s+/)
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[1][0]).toUpperCase()
+  }
+  return displayName.slice(0, 2).toUpperCase()
+}
+
+export default function PresenceAvatars({ users }: PresenceAvatarsProps) {
+  if (users.length === 0) return null
+
+  const visibleUsers = users.slice(0, MAX_VISIBLE)
+  const overflow = users.length - MAX_VISIBLE
+
+  return (
+    <div className="flex items-center -space-x-2">
+      {visibleUsers.map((user) => {
+        const color = getUserColor(user.userId)
+        return (
+          <div
+            key={user.userId}
+            title={user.displayName}
+            className="relative flex h-7 w-7 items-center justify-center rounded-full border-2 border-white text-[10px] font-semibold text-white dark:border-zinc-800"
+            style={{ backgroundColor: color }}
+          >
+            {getInitials(user.displayName)}
+          </div>
+        )
+      })}
+      {overflow > 0 && (
+        <div
+          className="relative flex h-7 w-7 items-center justify-center rounded-full border-2 border-white bg-zinc-400 text-[10px] font-semibold text-white dark:border-zinc-800 dark:bg-zinc-500"
+          title={`${overflow} more collaborator${overflow > 1 ? 's' : ''}`}
+        >
+          +{overflow}
+        </div>
+      )}
+    </div>
+  )
+}

src/components/editor/ShareModal.tsx

@@ -0,0 +1,224 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import {
+  getCollaborators,
+  inviteCollaborator,
+  updateCollaboratorRole,
+  removeCollaborator,
+  type Collaborator,
+} from '@/app/editor/[projectId]/actions'
+
+type ShareModalProps = {
+  projectId: string
+  isOwner: boolean
+  onClose: () => void
+}
+
+export default function ShareModal({ projectId, isOwner, onClose }: ShareModalProps) {
+  const [collaborators, setCollaborators] = useState<Collaborator[]>([])
+  const [loading, setLoading] = useState(true)
+  const [email, setEmail] = useState('')
+  const [role, setRole] = useState<'editor' | 'viewer'>('editor')
+  const [inviting, setInviting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [successMessage, setSuccessMessage] = useState<string | null>(null)
+
+  const fetchCollaborators = useCallback(async () => {
+    const result = await getCollaborators(projectId)
+    if (result.success && result.data) {
+      setCollaborators(result.data)
+    }
+    setLoading(false)
+  }, [projectId])
+
+  useEffect(() => {
+    fetchCollaborators()
+  }, [fetchCollaborators])
+
+  const handleInvite = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!email.trim()) return
+
+    setInviting(true)
+    setError(null)
+    setSuccessMessage(null)
+
+    const result = await inviteCollaborator(projectId, email.trim(), role)
+    if (result.success) {
+      setEmail('')
+      setSuccessMessage('Collaborator invited successfully')
+      fetchCollaborators()
+    } else {
+      setError(result.error || 'Failed to invite collaborator')
+    }
+    setInviting(false)
+  }
+
+  const handleRoleChange = async (collaboratorId: string, newRole: 'editor' | 'viewer') => {
+    setError(null)
+    const result = await updateCollaboratorRole(projectId, collaboratorId, newRole)
+    if (result.success) {
+      setCollaborators((prev) =>
+        prev.map((c) => (c.id === collaboratorId ? { ...c, role: newRole } : c))
+      )
+    } else {
+      setError(result.error || 'Failed to update role')
+    }
+  }
+
+  const handleRemove = async (collaboratorId: string) => {
+    setError(null)
+    const result = await removeCollaborator(projectId, collaboratorId)
+    if (result.success) {
+      setCollaborators((prev) => prev.filter((c) => c.id !== collaboratorId))
+    } else {
+      setError(result.error || 'Failed to remove collaborator')
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div
+        className="absolute inset-0 bg-black/50"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div className="relative w-full max-w-lg rounded-lg bg-white p-6 shadow-xl dark:bg-zinc-800">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
+            Share Project
+          </h2>
+          <button
+            onClick={onClose}
+            className="rounded p-1 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200"
+          >
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Invite Form - only for owners */}
+        {isOwner && (
+          <form onSubmit={handleInvite} className="mb-6">
+            <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+              Invite collaborator by email
+            </label>
+            <div className="flex gap-2">
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="user@example.com"
+                disabled={inviting}
+                className="flex-1 rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-50 dark:placeholder-zinc-500"
+              />
+              <select
+                value={role}
+                onChange={(e) => setRole(e.target.value as 'editor' | 'viewer')}
+                disabled={inviting}
+                className="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-50"
+              >
+                <option value="editor">Editor</option>
+                <option value="viewer">Viewer</option>
+              </select>
+              <button
+                type="submit"
+                disabled={inviting || !email.trim()}
+                className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 dark:focus:ring-offset-zinc-800"
+              >
+                {inviting ? 'Inviting...' : 'Invite'}
+              </button>
+            </div>
+          </form>
+        )}
+
+        {/* Messages */}
+        {error && (
+          <div className="mb-4 rounded-md bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/20 dark:text-red-400">
+            {error}
+          </div>
+        )}
+        {successMessage && (
+          <div className="mb-4 rounded-md bg-green-50 p-3 text-sm text-green-700 dark:bg-green-900/20 dark:text-green-400">
+            {successMessage}
+          </div>
+        )}
+
+        {/* Collaborators List */}
+        <div>
+          <h3 className="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-3">
+            Collaborators
+          </h3>
+          {loading ? (
+            <p className="text-sm text-zinc-500 dark:text-zinc-400">Loading...</p>
+          ) : collaborators.length === 0 ? (
+            <p className="text-sm text-zinc-500 dark:text-zinc-400">
+              No collaborators yet. Invite someone to get started.
+            </p>
+          ) : (
+            <div className="space-y-2 max-h-64 overflow-y-auto">
+              {collaborators.map((collab) => (
+                <div
+                  key={collab.id}
+                  className="flex items-center justify-between rounded-md border border-zinc-200 p-3 dark:border-zinc-700"
+                >
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-zinc-900 truncate dark:text-zinc-50">
+                      {collab.display_name || collab.email || 'Unknown user'}
+                    </p>
+                    {collab.display_name && collab.email && (
+                      <p className="text-xs text-zinc-500 truncate dark:text-zinc-400">
+                        {collab.email}
+                      </p>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2 ml-3">
+                    {isOwner ? (
+                      <>
+                        <select
+                          value={collab.role}
+                          onChange={(e) =>
+                            handleRoleChange(collab.id, e.target.value as 'editor' | 'viewer')
+                          }
+                          className="rounded border border-zinc-300 bg-white px-2 py-1 text-xs text-zinc-700 focus:border-blue-500 focus:outline-none dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-300"
+                        >
+                          <option value="editor">Editor</option>
+                          <option value="viewer">Viewer</option>
+                        </select>
+                        <button
+                          onClick={() => handleRemove(collab.id)}
+                          className="rounded p-1 text-zinc-400 hover:text-red-600 dark:hover:text-red-400"
+                          title="Remove collaborator"
+                        >
+                          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                          </svg>
+                        </button>
+                      </>
+                    ) : (
+                      <span className="rounded bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-600 dark:bg-zinc-700 dark:text-zinc-400">
+                        {collab.role}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Close button */}
+        <div className="mt-6 flex justify-end">
+          <button
+            onClick={onClose}
+            className="rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/editor/Toolbar.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+import type { ConnectionState, PresenceUser } from '@/lib/collaboration/realtime'
+import PresenceAvatars from './PresenceAvatars'
+
 type ToolbarProps = {
   onAddDialogue: () => void
   onAddChoice: () => void
@@ -9,6 +12,23 @@ type ToolbarProps = {
   onExportRenpy: () => void
   onImport: () => void
   onProjectSettings: () => void
+  onShare: () => void
+  connectionState?: ConnectionState
+  presenceUsers?: PresenceUser[]
+}
+
+const connectionLabel: Record<ConnectionState, string> = {
+  connecting: 'Connecting…',
+  connected: 'Connected',
+  disconnected: 'Disconnected',
+  reconnecting: 'Reconnecting…',
+}
+
+const connectionColor: Record<ConnectionState, string> = {
+  connecting: 'bg-yellow-400',
+  connected: 'bg-green-400',
+  disconnected: 'bg-red-400',
+  reconnecting: 'bg-yellow-400',
 }
 
 export default function Toolbar({
@@ -20,6 +40,9 @@ export default function Toolbar({
   onExportRenpy,
   onImport,
   onProjectSettings,
+  onShare,
+  connectionState,
+  presenceUsers,
 }: ToolbarProps) {
   return (
     <div className="flex items-center justify-between border-b border-zinc-200 bg-zinc-50 px-4 py-2 dark:border-zinc-700 dark:bg-zinc-800">
@@ -48,12 +71,31 @@ export default function Toolbar({
       </div>
 
       <div className="flex items-center gap-2">
+        {presenceUsers && presenceUsers.length > 0 && (
+          <div className="mr-2">
+            <PresenceAvatars users={presenceUsers} />
+          </div>
+        )}
+        {connectionState && (
+          <div className="flex items-center gap-1.5 mr-2" title={connectionLabel[connectionState]}>
+            <span className={`inline-block h-2.5 w-2.5 rounded-full ${connectionColor[connectionState]}${connectionState === 'reconnecting' ? ' animate-pulse' : ''}`} />
+            <span className="text-xs text-zinc-500 dark:text-zinc-400">
+              {connectionLabel[connectionState]}
+            </span>
+          </div>
+        )}
         <button
           onClick={onProjectSettings}
           className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
         >
           Project Settings
         </button>
+        <button
+          onClick={onShare}
+          className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
+        >
+          Share
+        </button>
         <button
           onClick={onSave}
           disabled={isSaving}

src/lib/collaboration/crdt.ts

@@ -0,0 +1,198 @@
+import * as Y from 'yjs'
+import type { RealtimeChannel } from '@supabase/supabase-js'
+import type { FlowchartNode, FlowchartEdge } from '@/types/flowchart'
+
+const PERSIST_DEBOUNCE_MS = 2000
+const BROADCAST_EVENT = 'yjs-update'
+
+export type CRDTCallbacks = {
+  onNodesChange: (nodes: FlowchartNode[]) => void
+  onEdgesChange: (edges: FlowchartEdge[]) => void
+  onPersist: (nodes: FlowchartNode[], edges: FlowchartEdge[]) => void
+}
+
+export class CRDTManager {
+  private doc: Y.Doc
+  private nodesMap: Y.Map<string> // node ID -> JSON string of FlowchartNode
+  private edgesMap: Y.Map<string> // edge ID -> JSON string of FlowchartEdge
+  private channel: RealtimeChannel | null = null
+  private callbacks: CRDTCallbacks
+  private persistTimer: ReturnType<typeof setTimeout> | null = null
+  private isApplyingRemote = false
+  private isDestroyed = false
+
+  constructor(callbacks: CRDTCallbacks) {
+    this.doc = new Y.Doc()
+    this.nodesMap = this.doc.getMap('nodes')
+    this.edgesMap = this.doc.getMap('edges')
+    this.callbacks = callbacks
+
+    // Listen for remote Yjs document changes
+    this.nodesMap.observe(() => {
+      if (this.isApplyingRemote) return
+      this.notifyNodesChange()
+      this.schedulePersist()
+    })
+
+    this.edgesMap.observe(() => {
+      if (this.isApplyingRemote) return
+      this.notifyEdgesChange()
+      this.schedulePersist()
+    })
+
+    // Broadcast local updates to other clients
+    this.doc.on('update', (update: Uint8Array, origin: unknown) => {
+      if (origin === 'remote') return // Don't re-broadcast remote updates
+      this.broadcastUpdate(update)
+    })
+  }
+
+  /** Initialize the Yjs document from database state */
+  initializeFromData(nodes: FlowchartNode[], edges: FlowchartEdge[]): void {
+    this.doc.transact(() => {
+      nodes.forEach((node) => {
+        this.nodesMap.set(node.id, JSON.stringify(node))
+      })
+      edges.forEach((edge) => {
+        this.edgesMap.set(edge.id, JSON.stringify(edge))
+      })
+    }, 'init')
+  }
+
+  /** Connect to a Supabase Realtime channel for syncing updates */
+  connectChannel(channel: RealtimeChannel): void {
+    this.channel = channel
+
+    // Listen for broadcast updates from other clients
+    channel.on('broadcast', { event: BROADCAST_EVENT }, (payload) => {
+      if (this.isDestroyed) return
+      const data = payload.payload as { update?: number[] } | undefined
+      if (data?.update) {
+        const update = new Uint8Array(data.update)
+        this.isApplyingRemote = true
+        Y.applyUpdate(this.doc, update, 'remote')
+        this.isApplyingRemote = false
+        // Notify React state of remote changes
+        this.notifyNodesChange()
+        this.notifyEdgesChange()
+        this.schedulePersist()
+      }
+    })
+  }
+
+  /** Apply local node changes to the Yjs document */
+  updateNodes(nodes: FlowchartNode[]): void {
+    if (this.isApplyingRemote) return
+
+    this.doc.transact(() => {
+      const currentIds = new Set(nodes.map((n) => n.id))
+
+      // Remove nodes no longer present
+      const existingIds = Array.from(this.nodesMap.keys())
+      existingIds.forEach((id) => {
+        if (!currentIds.has(id)) {
+          this.nodesMap.delete(id)
+        }
+      })
+
+      // Add or update nodes
+      nodes.forEach((node) => {
+        const serialized = JSON.stringify(node)
+        const existing = this.nodesMap.get(node.id)
+        if (existing !== serialized) {
+          this.nodesMap.set(node.id, serialized)
+        }
+      })
+    }, 'local')
+  }
+
+  /** Apply local edge changes to the Yjs document */
+  updateEdges(edges: FlowchartEdge[]): void {
+    if (this.isApplyingRemote) return
+
+    this.doc.transact(() => {
+      const currentIds = new Set(edges.map((e) => e.id))
+
+      // Remove edges no longer present
+      const existingIds = Array.from(this.edgesMap.keys())
+      existingIds.forEach((id) => {
+        if (!currentIds.has(id)) {
+          this.edgesMap.delete(id)
+        }
+      })
+
+      // Add or update edges
+      edges.forEach((edge) => {
+        const serialized = JSON.stringify(edge)
+        const existing = this.edgesMap.get(edge.id)
+        if (existing !== serialized) {
+          this.edgesMap.set(edge.id, serialized)
+        }
+      })
+    }, 'local')
+  }
+
+  /** Get current nodes from the Yjs document */
+  getNodes(): FlowchartNode[] {
+    const nodes: FlowchartNode[] = []
+    this.nodesMap.forEach((value) => {
+      try {
+        nodes.push(JSON.parse(value) as FlowchartNode)
+      } catch {
+        // Skip malformed entries
+      }
+    })
+    return nodes
+  }
+
+  /** Get current edges from the Yjs document */
+  getEdges(): FlowchartEdge[] {
+    const edges: FlowchartEdge[] = []
+    this.edgesMap.forEach((value) => {
+      try {
+        edges.push(JSON.parse(value) as FlowchartEdge)
+      } catch {
+        // Skip malformed entries
+      }
+    })
+    return edges
+  }
+
+  /** Clean up resources */
+  destroy(): void {
+    this.isDestroyed = true
+    if (this.persistTimer) {
+      clearTimeout(this.persistTimer)
+      this.persistTimer = null
+    }
+    this.doc.destroy()
+    this.channel = null
+  }
+
+  private notifyNodesChange(): void {
+    this.callbacks.onNodesChange(this.getNodes())
+  }
+
+  private notifyEdgesChange(): void {
+    this.callbacks.onEdgesChange(this.getEdges())
+  }
+
+  private broadcastUpdate(update: Uint8Array): void {
+    if (!this.channel || this.isDestroyed) return
+    this.channel.send({
+      type: 'broadcast',
+      event: BROADCAST_EVENT,
+      payload: { update: Array.from(update) },
+    })
+  }
+
+  private schedulePersist(): void {
+    if (this.persistTimer) {
+      clearTimeout(this.persistTimer)
+    }
+    this.persistTimer = setTimeout(() => {
+      if (this.isDestroyed) return
+      this.callbacks.onPersist(this.getNodes(), this.getEdges())
+    }, PERSIST_DEBOUNCE_MS)
+  }
+}

src/lib/collaboration/realtime.ts

@@ -0,0 +1,195 @@
+import { createClient } from '@/lib/supabase/client'
+import type { RealtimeChannel } from '@supabase/supabase-js'
+
+export type ConnectionState = 'connecting' | 'connected' | 'disconnected' | 'reconnecting'
+
+export type PresenceUser = {
+  userId: string
+  displayName: string
+}
+
+type RealtimeCallbacks = {
+  onConnectionStateChange: (state: ConnectionState) => void
+  onPresenceSync?: (users: PresenceUser[]) => void
+  onChannelSubscribed?: (channel: RealtimeChannel) => void
+}
+
+const HEARTBEAT_INTERVAL_MS = 30_000
+const RECONNECT_BASE_DELAY_MS = 1000
+const RECONNECT_MAX_DELAY_MS = 30_000
+
+export class RealtimeConnection {
+  private channel: RealtimeChannel | null = null
+  private heartbeatTimer: ReturnType<typeof setInterval> | null = null
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null
+  private reconnectAttempts = 0
+  private projectId: string
+  private userId: string
+  private displayName: string
+  private callbacks: RealtimeCallbacks
+  private isDestroyed = false
+  private supabase = createClient()
+
+  constructor(projectId: string, userId: string, displayName: string, callbacks: RealtimeCallbacks) {
+    this.projectId = projectId
+    this.userId = userId
+    this.displayName = displayName
+    this.callbacks = callbacks
+  }
+
+  async connect(): Promise<void> {
+    if (this.isDestroyed) return
+    this.callbacks.onConnectionStateChange('connecting')
+
+    this.channel = this.supabase.channel(`project:${this.projectId}`, {
+      config: { presence: { key: this.userId } },
+    })
+
+    this.channel
+      .on('presence', { event: 'sync' }, () => {
+        if (this.channel) {
+          const state = this.channel.presenceState()
+          const users: PresenceUser[] = []
+          for (const [key, presences] of Object.entries(state)) {
+            if (key === this.userId) continue // Exclude own presence
+            const presence = presences[0] as { userId?: string; displayName?: string } | undefined
+            if (presence?.userId) {
+              users.push({
+                userId: presence.userId,
+                displayName: presence.displayName || 'Anonymous',
+              })
+            }
+          }
+          this.callbacks.onPresenceSync?.(users)
+        }
+      })
+      .subscribe(async (status) => {
+        if (this.isDestroyed) return
+
+        if (status === 'SUBSCRIBED') {
+          this.reconnectAttempts = 0
+          this.callbacks.onConnectionStateChange('connected')
+          this.startHeartbeat()
+          await this.createSession()
+          // Track presence with user info
+          await this.channel?.track({
+            userId: this.userId,
+            displayName: this.displayName,
+          })
+          // Notify that the channel is ready for CRDT sync
+          if (this.channel) {
+            this.callbacks.onChannelSubscribed?.(this.channel)
+          }
+        } else if (status === 'CHANNEL_ERROR' || status === 'TIMED_OUT') {
+          this.callbacks.onConnectionStateChange('reconnecting')
+          this.scheduleReconnect()
+        } else if (status === 'CLOSED') {
+          this.callbacks.onConnectionStateChange('disconnected')
+        }
+      })
+  }
+
+  async disconnect(): Promise<void> {
+    this.isDestroyed = true
+    this.stopHeartbeat()
+    this.clearReconnectTimer()
+
+    if (this.channel) {
+      await this.deleteSession()
+      this.supabase.removeChannel(this.channel)
+      this.channel = null
+    }
+
+    this.callbacks.onConnectionStateChange('disconnected')
+  }
+
+  getChannel(): RealtimeChannel | null {
+    return this.channel
+  }
+
+  private async createSession(): Promise<void> {
+    try {
+      await this.supabase.from('collaboration_sessions').upsert(
+        {
+          project_id: this.projectId,
+          user_id: this.userId,
+          cursor_position: null,
+          selected_node_id: null,
+          connected_at: new Date().toISOString(),
+          last_heartbeat: new Date().toISOString(),
+        },
+        { onConflict: 'project_id,user_id' }
+      )
+    } catch {
+      // Fire-and-forget: session creation failure shouldn't block editing
+    }
+  }
+
+  private async deleteSession(): Promise<void> {
+    try {
+      await this.supabase
+        .from('collaboration_sessions')
+        .delete()
+        .eq('project_id', this.projectId)
+        .eq('user_id', this.userId)
+    } catch {
+      // Fire-and-forget: cleanup failure is non-critical
+    }
+  }
+
+  private startHeartbeat(): void {
+    this.stopHeartbeat()
+    this.heartbeatTimer = setInterval(async () => {
+      if (this.isDestroyed) {
+        this.stopHeartbeat()
+        return
+      }
+      try {
+        await this.supabase
+          .from('collaboration_sessions')
+          .update({ last_heartbeat: new Date().toISOString() })
+          .eq('project_id', this.projectId)
+          .eq('user_id', this.userId)
+      } catch {
+        // Heartbeat failure is non-critical
+      }
+    }, HEARTBEAT_INTERVAL_MS)
+  }
+
+  private stopHeartbeat(): void {
+    if (this.heartbeatTimer) {
+      clearInterval(this.heartbeatTimer)
+      this.heartbeatTimer = null
+    }
+  }
+
+  private scheduleReconnect(): void {
+    if (this.isDestroyed) return
+    this.clearReconnectTimer()
+
+    const delay = Math.min(
+      RECONNECT_BASE_DELAY_MS * Math.pow(2, this.reconnectAttempts),
+      RECONNECT_MAX_DELAY_MS
+    )
+    this.reconnectAttempts++
+
+    this.reconnectTimer = setTimeout(async () => {
+      if (this.isDestroyed) return
+      this.callbacks.onConnectionStateChange('reconnecting')
+
+      if (this.channel) {
+        this.supabase.removeChannel(this.channel)
+        this.channel = null
+      }
+
+      await this.connect()
+    }, delay)
+  }
+
+  private clearReconnectTimer(): void {
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer)
+      this.reconnectTimer = null
+    }
+  }
+}

src/types/flowchart.ts

@@ -4,13 +4,6 @@ export type Position = {
   y: number;
 };
 
-<<<<<<< HEAD
-// Condition type for conditional edges and choice options
-export type Condition = {
-  variableName: string;
-  operator: '>' | '<' | '==' | '>=' | '<=' | '!=';
-  value: number;
-=======
 // Character type: represents a defined character in the project
 export type Character = {
   id: string;
@@ -34,7 +27,6 @@ export type Condition = {
   variableId?: string;
   operator: '>' | '<' | '==' | '>=' | '<=' | '!=';
   value: number | string | boolean;
->>>>>>> ralph/collaboration-and-character-variables
 };
 
 // DialogueNode type: represents character speech/dialogue

supabase/migrations/20260123100000_add_collaboration_and_audit_trail.sql

@@ -0,0 +1,214 @@
+-- Migration: Add collaboration sessions and audit trail tables
+-- Supports real-time multi-user editing with presence tracking and change history
+
+-- =============================================================================
+-- PROJECT COLLABORATORS TABLE
+-- =============================================================================
+-- Tracks which users have access to a project and their role
+CREATE TABLE IF NOT EXISTS project_collaborators (
+  id uuid PRIMARY KEY DEFAULT uuid_generate_v4(),
+  project_id uuid NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
+  user_id uuid NOT NULL REFERENCES profiles(id) ON DELETE CASCADE,
+  role text NOT NULL CHECK (role IN ('owner', 'editor', 'viewer')),
+  invited_at timestamptz DEFAULT now(),
+  accepted_at timestamptz,
+  UNIQUE (project_id, user_id)
+);
+
+-- Enable Row Level Security
+ALTER TABLE project_collaborators ENABLE ROW LEVEL SECURITY;
+
+-- RLS: Users can view collaborators for projects they belong to
+CREATE POLICY "Users can view collaborators for their projects"
+  ON project_collaborators
+  FOR SELECT
+  USING (
+    auth.uid() = user_id
+    OR project_id IN (
+      SELECT project_id FROM project_collaborators WHERE user_id = auth.uid()
+    )
+    OR project_id IN (
+      SELECT id FROM projects WHERE user_id = auth.uid()
+    )
+  );
+
+-- RLS: Project owners can insert collaborators
+CREATE POLICY "Owners can add collaborators"
+  ON project_collaborators
+  FOR INSERT
+  WITH CHECK (
+    project_id IN (
+      SELECT id FROM projects WHERE user_id = auth.uid()
+    )
+  );
+
+-- RLS: Project owners can update collaborator roles
+CREATE POLICY "Owners can update collaborators"
+  ON project_collaborators
+  FOR UPDATE
+  USING (
+    project_id IN (
+      SELECT id FROM projects WHERE user_id = auth.uid()
+    )
+  )
+  WITH CHECK (
+    project_id IN (
+      SELECT id FROM projects WHERE user_id = auth.uid()
+    )
+  );
+
+-- RLS: Project owners can remove collaborators
+CREATE POLICY "Owners can remove collaborators"
+  ON project_collaborators
+  FOR DELETE
+  USING (
+    project_id IN (
+      SELECT id FROM projects WHERE user_id = auth.uid()
+    )
+  );
+
+-- =============================================================================
+-- COLLABORATION SESSIONS TABLE
+-- =============================================================================
+-- Tracks active editing sessions for real-time presence
+CREATE TABLE IF NOT EXISTS collaboration_sessions (
+  id uuid PRIMARY KEY DEFAULT uuid_generate_v4(),
+  project_id uuid NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
+  user_id uuid NOT NULL REFERENCES profiles(id) ON DELETE CASCADE,
+  cursor_position jsonb,
+  selected_node_id text,
+  connected_at timestamptz DEFAULT now(),
+  last_heartbeat timestamptz DEFAULT now()
+);
+
+-- Enable Row Level Security
+ALTER TABLE collaboration_sessions ENABLE ROW LEVEL SECURITY;
+
+-- RLS: Users can view sessions for projects they collaborate on
+CREATE POLICY "Collaborators can view sessions"
+  ON collaboration_sessions
+  FOR SELECT
+  USING (
+    project_id IN (
+      SELECT id FROM projects WHERE user_id = auth.uid()
+    )
+    OR project_id IN (
+      SELECT project_id FROM project_collaborators WHERE user_id = auth.uid()
+    )
+  );
+
+-- RLS: Users can insert their own sessions
+CREATE POLICY "Users can create own sessions"
+  ON collaboration_sessions
+  FOR INSERT
+  WITH CHECK (auth.uid() = user_id);
+
+-- RLS: Users can update their own sessions (heartbeat, cursor position)
+CREATE POLICY "Users can update own sessions"
+  ON collaboration_sessions
+  FOR UPDATE
+  USING (auth.uid() = user_id)
+  WITH CHECK (auth.uid() = user_id);
+
+-- RLS: Users can delete their own sessions (disconnect)
+CREATE POLICY "Users can delete own sessions"
+  ON collaboration_sessions
+  FOR DELETE
+  USING (auth.uid() = user_id);
+
+-- =============================================================================
+-- AUDIT TRAIL TABLE
+-- =============================================================================
+-- Records all node and edge changes for history and revert functionality
+CREATE TABLE IF NOT EXISTS audit_trail (
+  id uuid PRIMARY KEY DEFAULT uuid_generate_v4(),
+  project_id uuid NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
+  user_id uuid NOT NULL REFERENCES profiles(id) ON DELETE CASCADE,
+  action_type text NOT NULL CHECK (action_type IN ('node_add', 'node_update', 'node_delete', 'edge_add', 'edge_update', 'edge_delete')),
+  entity_id text NOT NULL,
+  previous_state jsonb,
+  new_state jsonb,
+  created_at timestamptz DEFAULT now()
+);
+
+-- Enable Row Level Security
+ALTER TABLE audit_trail ENABLE ROW LEVEL SECURITY;
+
+-- RLS: Users can view audit trail for projects they collaborate on
+CREATE POLICY "Collaborators can view audit trail"
+  ON audit_trail
+  FOR SELECT
+  USING (
+    project_id IN (
+      SELECT id FROM projects WHERE user_id = auth.uid()
+    )
+    OR project_id IN (
+      SELECT project_id FROM project_collaborators WHERE user_id = auth.uid()
+    )
+  );
+
+-- RLS: Users can insert audit entries for projects they collaborate on
+CREATE POLICY "Collaborators can write audit entries"
+  ON audit_trail
+  FOR INSERT
+  WITH CHECK (
+    auth.uid() = user_id
+    AND (
+      project_id IN (
+        SELECT id FROM projects WHERE user_id = auth.uid()
+      )
+      OR project_id IN (
+        SELECT project_id FROM project_collaborators
+        WHERE user_id = auth.uid() AND role IN ('owner', 'editor')
+      )
+    )
+  );
+
+-- =============================================================================
+-- INDEXES
+-- =============================================================================
+-- Index for efficient history queries (paginated by time)
+CREATE INDEX IF NOT EXISTS idx_audit_trail_project_created
+  ON audit_trail(project_id, created_at DESC);
+
+-- Index for session lookups by project
+CREATE INDEX IF NOT EXISTS idx_collaboration_sessions_project
+  ON collaboration_sessions(project_id);
+
+-- Index for collaborator lookups by project
+CREATE INDEX IF NOT EXISTS idx_project_collaborators_project
+  ON project_collaborators(project_id);
+
+-- Index for collaborator lookups by user (for "shared with me" queries)
+CREATE INDEX IF NOT EXISTS idx_project_collaborators_user
+  ON project_collaborators(user_id);
+
+-- =============================================================================
+-- UPDATE PROJECTS RLS: Allow collaborators to read/write
+-- =============================================================================
+-- Collaborators with 'editor' or 'owner' role can view the project
+CREATE POLICY "Collaborators can view shared projects"
+  ON projects
+  FOR SELECT
+  USING (
+    id IN (
+      SELECT project_id FROM project_collaborators WHERE user_id = auth.uid()
+    )
+  );
+
+-- Collaborators with 'editor' or 'owner' role can update the project
+CREATE POLICY "Collaborators can update shared projects"
+  ON projects
+  FOR UPDATE
+  USING (
+    id IN (
+      SELECT project_id FROM project_collaborators
+      WHERE user_id = auth.uid() AND role IN ('owner', 'editor')
+    )
+  )
+  WITH CHECK (
+    id IN (
+      SELECT project_id FROM project_collaborators
+      WHERE user_id = auth.uid() AND role IN ('owner', 'editor')
+    )
+  );

supabase/migrations/20260123200000_add_collaboration_sessions_unique_constraint.sql

@@ -0,0 +1,6 @@
+-- Add unique constraint on collaboration_sessions for (project_id, user_id)
+-- This ensures a user can only have one active session per project,
+-- and allows upsert operations for session management.
+ALTER TABLE collaboration_sessions
+  ADD CONSTRAINT collaboration_sessions_project_user_unique
+  UNIQUE (project_id, user_id);