From 8cdba7f858ff7d701b41e410ecadf18cb6ac6ccc Mon Sep 17 00:00:00 2001 From: Gustavo Henrique Santos Souza de Miranda Date: Fri, 23 Jan 2026 15:17:08 -0300 Subject: [PATCH 01/13] fix: wrongfull jsx without single parent --- src/app/editor/[projectId]/page.tsx | 3 ++- src/types/flowchart.ts | 8 -------- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/src/app/editor/[projectId]/page.tsx b/src/app/editor/[projectId]/page.tsx index ca5abda..f261d4a 100644 --- a/src/app/editor/[projectId]/page.tsx +++ b/src/app/editor/[projectId]/page.tsx @@ -42,7 +42,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 (<>
@@ -103,6 +103,7 @@ export default async function EditorPage({ params }: PageProps) { needsMigration={needsMigration} />
+ ) } diff --git a/src/types/flowchart.ts b/src/types/flowchart.ts index 9072a34..4f4461c 100644 --- a/src/types/flowchart.ts +++ b/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 From 0d72471f8f7956bb483d8d63ac8f46913a2be1ca Mon Sep 17 00:00:00 2001 From: Gustavo Henrique Santos Souza de Miranda Date: Fri, 23 Jan 2026 15:21:09 -0300 Subject: [PATCH 02/13] feat: [US-064] - Export validation for undefined references Co-Authored-By: Claude Opus 4.5 --- .../editor/[projectId]/FlowchartEditor.tsx | 111 ++++++++++++++- src/app/globals.css | 13 ++ .../editor/ExportValidationModal.tsx | 131 ++++++++++++++++++ 3 files changed, 253 insertions(+), 2 deletions(-) create mode 100644 src/components/editor/ExportValidationModal.tsx diff --git a/src/app/editor/[projectId]/FlowchartEditor.tsx b/src/app/editor/[projectId]/FlowchartEditor.tsx index f468ed6..ade31fe 100644 --- a/src/app/editor/[projectId]/FlowchartEditor.tsx +++ b/src/app/editor/[projectId]/FlowchartEditor.tsx @@ -24,6 +24,7 @@ import ChoiceNode from '@/components/editor/nodes/ChoiceNode' import VariableNode from '@/components/editor/nodes/VariableNode' 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 type { FlowchartData, FlowchartNode, FlowchartEdge, Character, Variable, Condition } from '@/types/flowchart' @@ -229,6 +230,8 @@ function FlowchartEditorInner({ projectId, initialData, needsMigration }: Flowch const [showSettings, setShowSettings] = useState(false) const [selectedEdgeId, setSelectedEdgeId] = useState(null) const [toastMessage, setToastMessage] = useState(migratedData.toastMessage) + const [validationIssues, setValidationIssues] = useState(null) + const [warningNodeIds, setWarningNodeIds] = useState>(new Set()) const handleAddCharacter = useCallback( (name: string, color: string): string => { @@ -360,8 +363,92 @@ function FlowchartEditorInner({ projectId, initialData, needsMigration }: Flowch // TODO: Implement in US-034 }, []) + const performExport = useCallback(() => { + // TODO: Actual export logic in US-035 + setValidationIssues(null) + setWarningNodeIds(new Set()) + }, []) + const handleExport = useCallback(() => { - // TODO: Implement in US-035 + const issues: ValidationIssue[] = [] + const characterIds = new Set(characters.map((c) => c.id)) + const variableIds = new Set(variables.map((v) => v.id)) + + // Scan nodes for undefined references + nodes.forEach((node) => { + if (node.type === 'dialogue' && node.data?.characterId) { + if (!characterIds.has(node.data.characterId)) { + issues.push({ + nodeId: node.id, + nodeType: 'dialogue', + contentSnippet: node.data.text + ? `"${node.data.text.slice(0, 40)}${node.data.text.length > 40 ? '...' : ''}"` + : 'Empty dialogue', + undefinedReference: node.data.characterId, + referenceType: 'character', + }) + } + } + if (node.type === 'variable' && node.data?.variableId) { + if (!variableIds.has(node.data.variableId)) { + issues.push({ + nodeId: node.id, + nodeType: 'variable', + contentSnippet: node.data.variableName + ? `Variable: ${node.data.variableName}` + : 'Variable node', + undefinedReference: node.data.variableId, + referenceType: 'variable', + }) + } + } + if (node.type === 'choice' && node.data?.options) { + node.data.options.forEach((opt: { id: string; label: string; condition?: { variableId?: string; variableName?: string } }) => { + if (opt.condition?.variableId && !variableIds.has(opt.condition.variableId)) { + issues.push({ + nodeId: node.id, + nodeType: 'choice', + contentSnippet: opt.label + ? `Option: "${opt.label.slice(0, 30)}${opt.label.length > 30 ? '...' : ''}"` + : 'Choice option', + undefinedReference: opt.condition.variableId, + referenceType: 'variable', + }) + } + }) + } + }) + + // Scan edges for undefined variable references in conditions + edges.forEach((edge) => { + if (edge.data?.condition?.variableId && !variableIds.has(edge.data.condition.variableId)) { + issues.push({ + nodeId: edge.id, + nodeType: 'edge', + contentSnippet: edge.data.condition.variableName + ? `Condition on: ${edge.data.condition.variableName}` + : 'Edge condition', + undefinedReference: edge.data.condition.variableId, + referenceType: 'variable', + }) + } + }) + + if (issues.length === 0) { + performExport() + } else { + setValidationIssues(issues) + setWarningNodeIds(new Set(issues.map((i) => i.nodeId))) + } + }, [nodes, edges, characters, variables, performExport]) + + const handleExportAnyway = useCallback(() => { + performExport() + }, [performExport]) + + const handleExportCancel = useCallback(() => { + setValidationIssues(null) + setWarningNodeIds(new Set()) }, []) const handleImport = useCallback(() => { @@ -394,6 +481,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), @@ -414,7 +514,7 @@ function FlowchartEditorInner({ projectId, initialData, needsMigration }: Flowch />
setSelectedEdgeId(null)} /> )} + {validationIssues && ( + + )} {toastMessage && ( 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 ( +
+
+
+
+ + + +

+ Export Validation Issues +

+
+

+ {issues.length} undefined reference{issues.length !== 1 ? 's' : ''} found. These nodes/edges reference characters or variables that no longer exist. +

+
+ +
+ {characterIssues.length > 0 && ( +
+

+ Undefined Characters +

+
    + {characterIssues.map((issue, idx) => ( +
  • +
    +
    + + {issue.nodeType} + +

    + {issue.contentSnippet} +

    +
    + + ID: {issue.undefinedReference.slice(0, 8)}... + +
    +
    • + ))} +
+
+ )} + + {variableIssues.length > 0 && ( +
+

+ Undefined Variables +

+
    + {variableIssues.map((issue, idx) => ( +
  • +
    +
    + + {issue.nodeType} + +

    + {issue.contentSnippet} +

    +
    + + ID: {issue.undefinedReference.slice(0, 8)}... + +
    +
    • + ))} +
+
+ )} +
+ +
+ + +
+
+
+ ) +} From 273130316b99db435aecda9c20f6c4511d3178b0 Mon Sep 17 00:00:00 2001 From: Gustavo Henrique Santos Souza de Miranda Date: Fri, 23 Jan 2026 15:21:43 -0300 Subject: [PATCH 03/13] chore: mark US-064 as complete and update progress log Co-Authored-By: Claude Opus 4.5 --- prd.json | 2 +- progress.txt | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/prd.json b/prd.json index 7a27321..429b4ac 100644 --- a/prd.json +++ b/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" }, { diff --git a/progress.txt b/progress.txt index 1c5272e..a9bc7d7 100644 --- a/progress.txt +++ b/progress.txt @@ -183,3 +183,18 @@ - Supabase client-side fetching from `createClient()` (browser) automatically scopes by the logged-in user's RLS policies, so fetching other projects just uses `.neq('id', currentProjectId)` and RLS handles ownership filtering. - No browser testing tools are available; manual verification is needed. --- + +## 2026-01-23 - US-064 +- What was implemented: Export validation that scans nodes/edges for undefined character/variable references before exporting, with a warning modal and canvas highlighting +- Files changed: + - `src/components/editor/ExportValidationModal.tsx` - New component: warning modal listing validation issues by type (character/variable), showing node type badge and content snippet, with "Export anyway" and "Cancel" buttons + - `src/app/editor/[projectId]/FlowchartEditor.tsx` - Updated `handleExport` to scan nodes (dialogue, variable, choice) and edges for characterId/variableId references not matching defined entries; added `performExport`, `handleExportAnyway`, `handleExportCancel` callbacks; added `validationIssues` and `warningNodeIds` state; applied `export-warning-node` className to affected nodes via `styledNodes` memo + - `src/app/globals.css` - Added `.react-flow__node.export-warning-node` CSS with orange outline and pulse animation for highlighted nodes +- **Learnings for future iterations:** + - React Flow nodes support a `className` prop that gets applied to the `.react-flow__node` wrapper div, so custom styling can be applied via CSS without modifying node component internals. + - The validation scans four sources of references: dialogue nodes (characterId), variable nodes (variableId), choice node option conditions (variableId), and edge conditions (variableId). + - The `handleExport` is the validation gate; `performExport` is where actual export logic (US-035) will go. When no issues are found, `performExport` is called directly. Otherwise the modal is shown and the user decides. + - Warning highlighting is cleared either by canceling the modal or by proceeding with "Export anyway". + - Pre-existing lint issues in `ConditionEditor.tsx` and `OptionConditionEditor.tsx` (React Compiler `preserve-manual-memoization` errors) are from prior stories and not related to this change. + - No browser testing tools are available; manual verification is needed. +--- From 2b4abd1eb7156b977968a86f27bf79bc7da59c93 Mon Sep 17 00:00:00 2001 From: Gustavo Henrique Santos Souza de Miranda Date: Fri, 23 Jan 2026 15:23:03 -0300 Subject: [PATCH 04/13] feat: [US-043] - Database schema for collaboration sessions and audit trail Co-Authored-By: Claude Opus 4.5 --- ...0000_add_collaboration_and_audit_trail.sql | 214 ++++++++++++++++++ 1 file changed, 214 insertions(+) create mode 100644 supabase/migrations/20260123100000_add_collaboration_and_audit_trail.sql diff --git a/supabase/migrations/20260123100000_add_collaboration_and_audit_trail.sql b/supabase/migrations/20260123100000_add_collaboration_and_audit_trail.sql new file mode 100644 index 0000000..f9f76fe --- /dev/null +++ b/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') + ) + ); From dfbaa0066d34a1d52e5fcf9733e7fd2ad3a0ea6e Mon Sep 17 00:00:00 2001 From: Gustavo Henrique Santos Souza de Miranda Date: Fri, 23 Jan 2026 15:23:55 -0300 Subject: [PATCH 05/13] chore: mark US-043 as complete and update progress log Co-Authored-By: Claude Opus 4.5 --- prd.json | 2 +- progress.txt | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/prd.json b/prd.json index 429b4ac..4f9ad08 100644 --- a/prd.json +++ b/prd.json @@ -232,7 +232,7 @@ "Typecheck passes" ], "priority": 13, - "passes": false, + "passes": true, "notes": "" }, { diff --git a/progress.txt b/progress.txt index a9bc7d7..2fdeb52 100644 --- a/progress.txt +++ b/progress.txt @@ -43,6 +43,8 @@ - `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 --- @@ -198,3 +200,17 @@ - Pre-existing lint issues in `ConditionEditor.tsx` and `OptionConditionEditor.tsx` (React Compiler `preserve-manual-memoization` errors) are from prior stories and not related to this change. - No browser testing tools are available; manual verification is needed. --- + +## 2026-01-23 - US-043 +- What was implemented: Database migration adding project_collaborators, collaboration_sessions, and audit_trail tables with RLS policies and indexes +- Files changed: + - `supabase/migrations/20260123100000_add_collaboration_and_audit_trail.sql` - New migration with three tables, RLS policies, indexes, and updated projects RLS for collaborator access +- **Learnings for future iterations:** + - `project_collaborators` has a UNIQUE constraint on (project_id, user_id) to prevent duplicate invitations + - RLS policies for collaboration tables use subqueries to check either project ownership (via `projects.user_id`) or collaboration membership (via `project_collaborators.user_id`) + - The audit_trail insert policy requires both `auth.uid() = user_id` AND project access (owner or editor role) to prevent unauthorized audit writes + - New RLS policies were added to the existing `projects` table to allow collaborators to SELECT and UPDATE (editors/owners only) shared projects + - The audit_trail index uses `created_at DESC` for efficient reverse-chronological pagination in the history sidebar + - `collaboration_sessions.cursor_position` is JSONB to store flexible coordinate data (x, y, and potentially viewport info) + - `collaboration_sessions.selected_node_id` is nullable text since a user may not have any node selected +--- From 2e313a0264d02a09568ac6607477c6111f755889 Mon Sep 17 00:00:00 2001 From: Gustavo Henrique Santos Souza de Miranda Date: Fri, 23 Jan 2026 15:28:23 -0300 Subject: [PATCH 06/13] feat: [US-045] - Supabase Realtime channel and connection management Co-Authored-By: Claude Opus 4.5 --- .../editor/[projectId]/FlowchartEditor.tsx | 23 ++- src/app/editor/[projectId]/page.tsx | 1 + src/components/editor/Toolbar.tsx | 26 +++ src/lib/collaboration/realtime.ts | 167 ++++++++++++++++++ ...llaboration_sessions_unique_constraint.sql | 6 + 5 files changed, 221 insertions(+), 2 deletions(-) create mode 100644 src/lib/collaboration/realtime.ts create mode 100644 supabase/migrations/20260123200000_add_collaboration_sessions_unique_constraint.sql diff --git a/src/app/editor/[projectId]/FlowchartEditor.tsx b/src/app/editor/[projectId]/FlowchartEditor.tsx index ade31fe..2ba1cab 100644 --- a/src/app/editor/[projectId]/FlowchartEditor.tsx +++ b/src/app/editor/[projectId]/FlowchartEditor.tsx @@ -1,6 +1,6 @@ 'use client' -import React, { useCallback, useMemo, useState } from 'react' +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' import ReactFlow, { Background, BackgroundVariant, @@ -27,10 +27,12 @@ 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 } from '@/lib/collaboration/realtime' import type { FlowchartData, FlowchartNode, FlowchartEdge, Character, Variable, Condition } from '@/types/flowchart' type FlowchartEditorProps = { projectId: string + userId: string initialData: FlowchartData needsMigration?: boolean } @@ -202,7 +204,7 @@ function computeMigration(initialData: FlowchartData, shouldMigrate: boolean) { } // Inner component that uses useReactFlow hook -function FlowchartEditorInner({ projectId, initialData, needsMigration }: FlowchartEditorProps) { +function FlowchartEditorInner({ projectId, userId, initialData, needsMigration }: FlowchartEditorProps) { // Define custom node types - memoized to prevent re-renders const nodeTypes: NodeTypes = useMemo( () => ({ @@ -232,6 +234,22 @@ function FlowchartEditorInner({ projectId, initialData, needsMigration }: Flowch const [toastMessage, setToastMessage] = useState(migratedData.toastMessage) const [validationIssues, setValidationIssues] = useState(null) const [warningNodeIds, setWarningNodeIds] = useState>(new Set()) + const [connectionState, setConnectionState] = useState('disconnected') + const realtimeRef = useRef(null) + + // Connect to Supabase Realtime channel on mount, disconnect on unmount + useEffect(() => { + const connection = new RealtimeConnection(projectId, userId, { + onConnectionStateChange: setConnectionState, + }) + realtimeRef.current = connection + connection.connect() + + return () => { + connection.disconnect() + realtimeRef.current = null + } + }, [projectId, userId]) const handleAddCharacter = useCallback( (name: string, color: string): string => { @@ -511,6 +529,7 @@ function FlowchartEditorInner({ projectId, initialData, needsMigration }: Flowch onExport={handleExport} onImport={handleImport} onProjectSettings={() => setShowSettings(true)} + connectionState={connectionState} />
diff --git a/src/components/editor/Toolbar.tsx b/src/components/editor/Toolbar.tsx index 81c2c45..3161530 100644 --- a/src/components/editor/Toolbar.tsx +++ b/src/components/editor/Toolbar.tsx @@ -1,5 +1,7 @@ 'use client' +import type { ConnectionState } from '@/lib/collaboration/realtime' + type ToolbarProps = { onAddDialogue: () => void onAddChoice: () => void @@ -8,6 +10,21 @@ type ToolbarProps = { onExport: () => void onImport: () => void onProjectSettings: () => void + connectionState?: ConnectionState +} + +const connectionLabel: Record = { + connecting: 'Connecting…', + connected: 'Connected', + disconnected: 'Disconnected', + reconnecting: 'Reconnecting…', +} + +const connectionColor: Record = { + connecting: 'bg-yellow-400', + connected: 'bg-green-400', + disconnected: 'bg-red-400', + reconnecting: 'bg-yellow-400', } export default function Toolbar({ @@ -18,6 +35,7 @@ export default function Toolbar({ onExport, onImport, onProjectSettings, + connectionState, }: ToolbarProps) { return (
@@ -46,6 +64,14 @@ export default function Toolbar({
+ {connectionState && ( +
+ + + {connectionLabel[connectionState]} + +
+ )}
) } diff --git a/src/app/editor/[projectId]/FlowchartEditor.tsx b/src/app/editor/[projectId]/FlowchartEditor.tsx index 2ba1cab..44b4c68 100644 --- a/src/app/editor/[projectId]/FlowchartEditor.tsx +++ b/src/app/editor/[projectId]/FlowchartEditor.tsx @@ -28,11 +28,13 @@ import ExportValidationModal, { type ValidationIssue } from '@/components/editor import { EditorProvider } from '@/components/editor/EditorContext' import Toast from '@/components/Toast' import { RealtimeConnection, type ConnectionState } from '@/lib/collaboration/realtime' +import ShareModal from '@/components/editor/ShareModal' import type { FlowchartData, FlowchartNode, FlowchartEdge, Character, Variable, Condition } from '@/types/flowchart' type FlowchartEditorProps = { projectId: string userId: string + isOwner: boolean initialData: FlowchartData needsMigration?: boolean } @@ -204,7 +206,7 @@ function computeMigration(initialData: FlowchartData, shouldMigrate: boolean) { } // Inner component that uses useReactFlow hook -function FlowchartEditorInner({ projectId, userId, initialData, needsMigration }: FlowchartEditorProps) { +function FlowchartEditorInner({ projectId, userId, isOwner, initialData, needsMigration }: FlowchartEditorProps) { // Define custom node types - memoized to prevent re-renders const nodeTypes: NodeTypes = useMemo( () => ({ @@ -230,6 +232,7 @@ function FlowchartEditorInner({ projectId, userId, initialData, needsMigration } const [characters, setCharacters] = useState(migratedData.characters) const [variables, setVariables] = useState(migratedData.variables) const [showSettings, setShowSettings] = useState(false) + const [showShare, setShowShare] = useState(false) const [selectedEdgeId, setSelectedEdgeId] = useState(null) const [toastMessage, setToastMessage] = useState(migratedData.toastMessage) const [validationIssues, setValidationIssues] = useState(null) @@ -529,6 +532,7 @@ function FlowchartEditorInner({ projectId, userId, initialData, needsMigration } onExport={handleExport} onImport={handleImport} onProjectSettings={() => setShowSettings(true)} + onShare={() => setShowShare(true)} connectionState={connectionState} />
@@ -560,6 +564,13 @@ function FlowchartEditorInner({ projectId, userId, initialData, needsMigration } getVariableUsageCount={getVariableUsageCount} /> )} + {showShare && ( + setShowShare(false)} + /> + )} {selectedEdge && ( { + 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 } +} diff --git a/src/app/editor/[projectId]/page.tsx b/src/app/editor/[projectId]/page.tsx index ce16cb0..5bc3ec7 100644 --- a/src/app/editor/[projectId]/page.tsx +++ b/src/app/editor/[projectId]/page.tsx @@ -20,15 +20,43 @@ export default async function EditorPage({ params }: PageProps) { return null } - const { data: project, error } = await supabase + // 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) { - notFound() + let project = ownedProject + 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 || {} @@ -74,6 +102,7 @@ export default async function EditorPage({ params }: PageProps) { diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx index cd47ec0..707aad2 100644 --- a/src/components/ProjectCard.tsx +++ b/src/components/ProjectCard.tsx @@ -8,8 +8,10 @@ interface ProjectCardProps { id: string name: string updatedAt: string - onDelete: (id: string) => void - onRename: (id: string, newName: string) => void + onDelete?: (id: 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" > -
- - + -
+ + + + +
+ )} + {shared && ( +
+ + {sharedRole === 'editor' ? 'Editor' : 'Viewer'} + +
+ )}

{name}

diff --git a/src/components/editor/ShareModal.tsx b/src/components/editor/ShareModal.tsx new file mode 100644 index 0000000..88f7e18 --- /dev/null +++ b/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([]) + 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(null) + const [successMessage, setSuccessMessage] = useState(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 ( +
+ + ) +} diff --git a/src/components/editor/Toolbar.tsx b/src/components/editor/Toolbar.tsx index 3161530..f283ff4 100644 --- a/src/components/editor/Toolbar.tsx +++ b/src/components/editor/Toolbar.tsx @@ -10,6 +10,7 @@ type ToolbarProps = { onExport: () => void onImport: () => void onProjectSettings: () => void + onShare: () => void connectionState?: ConnectionState } @@ -35,6 +36,7 @@ export default function Toolbar({ onExport, onImport, onProjectSettings, + onShare, connectionState, }: ToolbarProps) { return ( @@ -78,6 +80,12 @@ export default function Toolbar({ > Project Settings +