Fix critical TypeScript compilation errors

- Unified WorkItem interface across components to resolve type mismatches
- Fixed role type comparison errors by updating auth types
- Resolved ReactNode JSX expression issues
- Fixed LucideProps incompatibility by removing invalid title prop
- Added missing edgeCount property to GraphHierarchy interface
- Added memberCount property to Team interface
- Fixed priorityComp undefined errors with null checks
- Updated CI workflow to trigger on development branch PRs
- Created shared type definitions in types/graph.ts

All critical build-blocking TypeScript errors resolved.

Author: mvalancy

.github/workflows/ci.yml

@@ -2,9 +2,9 @@ name: CI
 
 on:
   push:
-    branches: [main, develop]
+    branches: [main, develop, development]
   pull_request:
-    branches: [main, develop]
+    branches: [main, develop, development]
 
 # Prevent duplicate runs
 concurrency:

packages/web/src/components/EditNodeModal.tsx

@@ -6,23 +6,12 @@ import { useAuth } from '../contexts/AuthContext';
 import { useNotifications } from '../contexts/NotificationContext';
 import { NodeTypeSelector } from './NodeCategorySelector';
 import { TagInput } from './TagInput';
+import { WorkItem } from '../types/graph';
 
 interface EditNodeModalProps {
   isOpen: boolean;
   onClose: () => void;
-  node: {
-    id: string;
-    title: string;
-    description?: string;
-    type: string;
-    status: string;
-    priorityExec: number;
-    priorityIndiv: number;
-    priorityComm: number;
-    tags?: string[];
-    dueDate?: string;
-    assignedTo?: string;
-  };
+  node: WorkItem;
 }
 
 export function EditNodeModal({ isOpen, onClose, node }: EditNodeModalProps) {
@@ -48,7 +37,7 @@ export function EditNodeModal({ isOpen, onClose, node }: EditNodeModalProps) {
     priorityExec: node.priorityExec || 0,
     priorityIndiv: node.priorityIndiv || 0,
     priorityComm: node.priorityComm || 0,
-    assignedTo: node.assignedTo || '',
+    assignedTo: typeof node.assignedTo === 'string' ? node.assignedTo : (node.assignedTo?.id || ''),
     dueDate: formatDateForInput(node.dueDate),
     tags: node.tags || [],
   });
@@ -63,7 +52,7 @@ export function EditNodeModal({ isOpen, onClose, node }: EditNodeModalProps) {
       priorityExec: node.priorityExec || 0,
       priorityIndiv: node.priorityIndiv || 0,
       priorityComm: node.priorityComm || 0,
-      assignedTo: node.assignedTo || '',
+      assignedTo: typeof node.assignedTo === 'string' ? node.assignedTo : (node.assignedTo?.id || ''),
       dueDate: formatDateForInput(node.dueDate),
       tags: node.tags || [],
     });

packages/web/src/components/GraphSelector.tsx

@@ -193,7 +193,7 @@ export function GraphSelector() {
                       </div>
                       <div className="flex items-center gap-2 text-xs text-gray-400">
                         <span>{graph.id === currentGraph.id ? actualNodeCount : (graph.nodeCount || 0)} node{(graph.id === currentGraph.id ? actualNodeCount : (graph.nodeCount || 0)) !== 1 ? 's' : ''}, {graph.id === currentGraph.id ? actualEdgeCount : (graph.edgeCount || 0)} connection{(graph.id === currentGraph.id ? actualEdgeCount : (graph.edgeCount || 0)) !== 1 ? 's' : ''}</span>
-                        <Eye className="h-3 w-3 opacity-50" title={`${graph.type}${graph.isShared ? ' • Shared' : ''}`} />
+                        <Eye className="h-3 w-3 opacity-50" />
                       </div>
                     </div>
                     {graph.id === currentGraph.id && (

packages/web/src/components/InteractiveGraphVisualization.tsx

@@ -5,7 +5,7 @@ import { useQuery, useMutation } from '@apollo/client';
 import { useGraph } from '../contexts/GraphContext';
 import { useAuth } from '../contexts/AuthContext';
 import { GET_WORK_ITEMS, GET_EDGES, CREATE_EDGE, UPDATE_EDGE, DELETE_EDGE } from '../lib/queries';
-import { relationshipTypeInfo, RelationshipType } from '../types/projectData';
+import { relationshipTypeInfo } from '../types/projectData';
 import { validateGraphData, getValidationSummary, ValidationResult } from '../utils/graphDataValidation';
 import { EditNodeModal } from './EditNodeModal';
 import { DeleteNodeModal } from './DeleteNodeModal';
@@ -17,42 +17,7 @@ import { DeleteGraphModal } from './DeleteGraphModal';
 import { ConnectNodeModal } from './ConnectNodeModal';
 import { NodeDetailsModal } from './NodeDetailsModal';
 
-interface WorkItem {
-  id: string;
-  title: string;
-  description?: string;
-  type: string;
-  status: string;
-  positionX: number;
-  positionY: number;
-  positionZ?: number;
-  priorityExec: number;
-  priorityIndiv: number;
-  priorityComm: number;
-  priorityComp: number;
-  teamId: string;
-  userId: string;
-  tags?: string[];
-  dueDate?: string;
-  assignedTo?: string;
-  dependencies?: WorkItem[];
-  dependents?: WorkItem[];
-  priority?: {
-    executive: number;
-    individual: number;
-    community: number;
-    computed: number;
-  };
-}
-
-interface WorkItemEdge {
-  id: string;
-  source: string;
-  target: string;
-  type: RelationshipType;
-  strength?: number;
-  description?: string;
-}
+import { WorkItem, WorkItemEdge, RelationshipType } from '../types/graph';
 
 interface NodeMenuState {
   node: WorkItem | null;
@@ -774,8 +739,9 @@ export function InteractiveGraphVisualization() {
       .attr('cx', (d: WorkItem) => getNodeDimensions(d).width / 2 - 8)
       .attr('cy', (d: WorkItem) => getNodeDimensions(d).height / 2 - 8)
       .attr('fill', (d: WorkItem) => {
-        if (d.priorityComp > 0.7) return '#dc2626'; // High priority - red
-        if (d.priorityComp > 0.4) return '#d97706'; // Medium priority - orange
+        const priority = d.priorityComp || 0;
+        if (priority > 0.7) return '#dc2626'; // High priority - red
+        if (priority > 0.4) return '#d97706'; // Medium priority - orange
         return '#059669'; // Low priority - green
       })
       .attr('stroke', '#ffffff')
@@ -1472,7 +1438,7 @@ export function InteractiveGraphVisualization() {
             <div className="grid grid-cols-2 gap-2 text-xs">
               <div>
                 <span className="text-gray-400">Priority:</span>
-                <span className="ml-1 font-medium">{Math.round((nodeMenu.node.priority?.computed || nodeMenu.node.priorityComp) * 100)}%</span>
+                <span className="ml-1 font-medium">{Math.round((nodeMenu.node?.priority?.computed || nodeMenu.node?.priorityComp || 0) * 100)}%</span>
               </div>
             </div>
           </div>
@@ -1712,9 +1678,6 @@ export function InteractiveGraphVisualization() {
           }}
         />
       )}
-      
-      {/* Debug info */}
-      {console.log('Modal states:', { showConnectModal, selectedNode: selectedNode?.title })}
     </div>
   );
 }

packages/web/src/components/NodeDetailsModal.tsx

@@ -1,45 +1,6 @@
 import React from 'react';
 import { X, Calendar, Clock, User, Flag, Edit3 } from 'lucide-react';
-
-interface WorkItem {
-  id: string;
-  title: string;
-  description?: string;
-  type: string;
-  status: string;
-  priorityExec?: number;
-  priorityIndiv?: number;
-  priorityComm?: number;
-  priorityComp?: number;
-  dueDate?: string;
-  tags?: string[];
-  assignedTo?: {
-    id: string;
-    name: string;
-    username: string;
-  } | string;
-  owner?: {
-    id: string;
-    name: string;
-    username: string;
-  };
-  createdAt?: string;
-  updatedAt?: string;
-  // Additional fields that may exist in InteractiveGraphVisualization's WorkItem
-  positionX?: number;
-  positionY?: number;
-  positionZ?: number;
-  teamId?: string;
-  userId?: string;
-  dependencies?: WorkItem[];
-  dependents?: WorkItem[];
-  priority?: {
-    executive: number;
-    individual: number;
-    community: number;
-    computed: number;
-  };
-}
+import { WorkItem } from '../types/graph';
 
 interface NodeDetailsModalProps {
   isOpen: boolean;

packages/web/src/components/UserManagement.tsx

@@ -36,11 +36,10 @@ const UPDATE_USER_ROLE = gql`
 `;
 
 const ROLE_HIERARCHY = [
-  { value: 'NODE_WATCHER', label: 'Node Watcher', icon: Eye, color: 'text-gray-400', description: 'Read-only access' },
-  { value: 'CONNECTOR', label: 'Connector', icon: Users, color: 'text-blue-400', description: 'Can work on tasks' },
-  { value: 'ORIGIN_NODE', label: 'Origin Node', icon: UserCheck, color: 'text-green-400', description: 'Task creators' },
-  { value: 'PATH_KEEPER', label: 'Path Keeper', icon: Settings, color: 'text-purple-400', description: 'Project maintainers' },
-  { value: 'GRAPH_MASTER', label: 'Graph Master', icon: Crown, color: 'text-yellow-400', description: 'System administrators' }
+  { value: 'GUEST', label: 'Guest', icon: Eye, color: 'text-purple-400', description: 'Anonymous demo access (read-only)' },
+  { value: 'VIEWER', label: 'Viewer', icon: Eye, color: 'text-gray-400', description: 'Read-only access to graphs and nodes' },
+  { value: 'USER', label: 'User', icon: Users, color: 'text-blue-400', description: 'Can create and work on tasks' },
+  { value: 'ADMIN', label: 'Admin', icon: Crown, color: 'text-yellow-400', description: 'Full system administration access' }
 ];
 
 export function UserManagement() {
@@ -56,15 +55,15 @@ export function UserManagement() {
   });
 
   // Check if user can manage roles
-  const canManageRoles = currentUser && ['PATH_KEEPER', 'GRAPH_MASTER'].includes(currentUser.role);
-  const canPromoteToMaster = currentUser?.role === 'GRAPH_MASTER';
+  const canManageRoles = currentUser && ['ADMIN'].includes(currentUser.role);
+  const canPromoteToAdmin = currentUser?.role === 'ADMIN';
 
   if (!canManageRoles) {
     return (
       <div className="p-8 text-center">
         <Crown className="h-16 w-16 text-gray-600 mx-auto mb-4" />
         <h2 className="text-xl font-semibold text-gray-300 mb-2">Access Restricted</h2>
-        <p className="text-gray-400">You need PATH_KEEPER or GRAPH_MASTER role to manage users.</p>
+        <p className="text-gray-400">You need ADMIN role to manage users.</p>
       </div>
     );
   }
@@ -191,7 +190,7 @@ export function UserManagement() {
                             <option 
                               key={role.value} 
                               value={role.value}
-                              disabled={role.value === 'GRAPH_MASTER' && !canPromoteToMaster}
+                              disabled={role.value === 'ADMIN' && !canPromoteToAdmin}
                             >
                               {role.label}
                             </option>

packages/web/src/types/auth.ts

@@ -4,7 +4,7 @@ export interface User {
   email: string;
   username: string;
   avatar?: string;
-  role: 'NODE_WATCHER' | 'CONNECTOR' | 'ORIGIN_NODE' | 'PATH_KEEPER' | 'GRAPH_MASTER';
+  role: 'GUEST' | 'VIEWER' | 'USER' | 'ADMIN';
   isActive: boolean;
   isEmailVerified: boolean;
   lastLogin?: string;
@@ -17,6 +17,7 @@ export interface Team {
   description?: string;
   logo?: string;
   isActive: boolean;
+  memberCount?: number;
 }
 
 export interface AuthContextType {

packages/web/src/types/graph.ts

@@ -64,10 +64,72 @@ export interface GraphHierarchy {
   type: Graph['type'];
   children: GraphHierarchy[];
   nodeCount: number;
+  edgeCount: number;
   isShared: boolean;
   permissions: 'OWNER' | 'ADMIN' | 'EDIT' | 'VIEW';
 }
 
+export interface WorkItem {
+  id: string;
+  title: string;
+  description?: string;
+  type: string;
+  status: string;
+  priorityExec?: number;
+  priorityIndiv?: number;
+  priorityComm?: number;
+  priorityComp?: number;
+  dueDate?: string;
+  tags?: string[];
+  assignedTo?: {
+    id: string;
+    name: string;
+    username: string;
+  } | string;
+  owner?: {
+    id: string;
+    name: string;
+    username: string;
+  };
+  createdAt?: string;
+  updatedAt?: string;
+  // Additional fields that may exist in InteractiveGraphVisualization's WorkItem
+  positionX?: number;
+  positionY?: number;
+  positionZ?: number;
+  teamId?: string;
+  userId?: string;
+  dependencies?: WorkItem[];
+  dependents?: WorkItem[];
+  priority?: {
+    executive: number;
+    individual: number;
+    community: number;
+    computed: number;
+  };
+}
+
+export type RelationshipType = 
+  | 'DEPENDS_ON'      // This node depends on another to be completed
+  | 'BLOCKS'          // This node blocks another from starting
+  | 'ENABLES'         // This node enables another (similar to depends but softer)
+  | 'RELATES_TO'      // General relationship
+  | 'PART_OF'         // This node is a part/component of another
+  | 'FOLLOWS'         // This node should be done after another (sequence)
+  | 'PARALLEL_WITH'   // This node can be done in parallel with another
+  | 'DUPLICATES'      // This node duplicates effort of another
+  | 'CONFLICTS_WITH'  // This node conflicts with another
+  | 'VALIDATES'       // This node validates/tests another
+
+export interface WorkItemEdge {
+  id: string;
+  source: string;
+  target: string;
+  type: RelationshipType;
+  strength?: number;
+  description?: string;
+}
+
 export interface CreateGraphInput {
   name: string;
   description?: string;