Refactor: Replace 'Node' terminology with 'Work Item' throughout codebase

Comprehensive rename to align with domain language and improve clarity:

Component Files Renamed:
- CreateNodeModal → CreateWorkItemModal
- EditNodeModal → EditWorkItemModal
- DeleteNodeModal → DeleteWorkItemModal
- ConnectNodeModal → ConnectWorkItemModal
- DisconnectNodeModal → DisconnectWorkItemModal
- NodeDetailsModal → WorkItemDetailsModal
- NodeCategorySelector → WorkItemTypeSelector

Code Updates:
- All interfaces renamed (e.g., CreateNodeModalProps → CreateWorkItemModalProps)
- All function exports updated
- All import statements updated
- All JSX component usage updated
- Variable names updated (parentNodeId → parentWorkItemId, etc.)

User-Facing Text Updates:
- "Create a standalone node" → "Create a standalone work item"
- "Connect to Existing Nodes" → "Connect to Existing Work Items"
- "Search node types" → "Search work item types"
- "Node Templates" → "Work Item Templates"
- "node priorities" → "work item priorities"
- "node dependencies" → "work item dependencies"

Documentation & Tests:
- Updated all test files with new terminology
- Updated documentation files (graph-creation.md, agent-planning-scenarios.md)

Technical Terms Preserved:
- GraphQL syntax (where: { node: { id } }) - Neo4j convention
- D3.js simulation nodes - JavaScript library convention
- DOM nodes - Web API convention

All changes validated:
✅ TypeScript compilation passing
✅ ESLint checks passing
✅ 40 files modified, 7 files renamed

Author: Patel230

docs/agent-planning-scenarios.md

@@ -16,7 +16,7 @@ User right-clicks any node and sees:
 
 ```
 ┌─────────────────────────────┐
-│ 📋 Edit Node                │
+│ 📋 Edit Work Item                │
 │ 🔗 Add Relationship         │  
 │ 🎯 Set Priority            │
 │ ─────────────────────────  │

docs/features/graph-creation.md

@@ -51,12 +51,12 @@ GraphDone uses a **graph-first approach** where work items exist as connected no
 
 **Quick Node Creation:**
 1. **Right-click** on empty graph space
-2. **Select** "Add Node" from context menu
+2. **Select** "Add Work Item" from context menu
 3. **Choose** node type from comprehensive list
 4. **Fill** essential information and save
 
 **Detailed Node Creation:**
-1. **Click** primary "Add Node" button
+1. **Click** primary "Add Work Item" button
 2. **Complete** the node creation form:
 
    **Essential Fields:**

packages/web/src/components/AdminUserManagement.tsx

@@ -594,7 +594,7 @@ export function AdminUserManagement() {
                   setDeleteConfirmation(null);
                   setDeleteConfirmText('');
                 }}
-                className="flex-1 px-4 py-2 border border-gray-600 rounded-lg text-gray-300 hover:text-gray-100 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500"
+                className="flex-1 px-4 py-2 border border-gray-600 rounded-lg text-gray-300 hover:bg-red-600 hover:text-white hover:border-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 transition-all duration-200"
               >
                 Cancel
               </button>
@@ -736,7 +736,7 @@ export function AdminUserManagement() {
                     role: 'VIEWER'
                   });
                 }}
-                className="flex-1 px-4 py-2 border border-gray-600 rounded-lg text-gray-300 hover:text-gray-100 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500"
+                className="flex-1 px-4 py-2 border border-gray-600 rounded-lg text-gray-300 hover:bg-red-600 hover:text-white hover:border-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 transition-all duration-200"
               >
                 Cancel
               </button>

…/web/src/components/ConnectNodeModal.tsx …/src/components/ConnectWorkItemModal.tsxpackages/web/src/components/ConnectNodeModal.tsx renamed to packages/web/src/components/ConnectWorkItemModal.tsx packages/web/src/components/ConnectNodeModal.tsx renamed to packages/web/src/components/ConnectWorkItemModal.tsx

@@ -37,7 +37,7 @@ import {
   Target
 } from '../constants/workItemConstants';
 
-interface ConnectNodeModalProps {
+interface ConnectWorkItemModalProps {
   isOpen: boolean;
   onClose: () => void;
   sourceNode: {
@@ -50,7 +50,7 @@ interface ConnectNodeModalProps {
 }
 
 // Separate DisconnectNodeModal interface
-interface DisconnectNodeModalProps {
+interface DisconnectWorkItemModalProps {
   isOpen: boolean;
   onClose: () => void;
   sourceNode: {
@@ -64,7 +64,7 @@ interface DisconnectNodeModalProps {
 
 
 // Separate DisconnectNodeModal Component
-export function DisconnectNodeModal({ isOpen, onClose, sourceNode, onAllConnectionsRemoved }: DisconnectNodeModalProps) {
+export function DisconnectWorkItemModal({ isOpen, onClose, sourceNode, onAllConnectionsRemoved }: DisconnectWorkItemModalProps) {
   const { currentGraph } = useGraph();
   const { showSuccess, showError } = useNotifications();
 
@@ -545,7 +545,7 @@ export function DisconnectNodeModal({ isOpen, onClose, sourceNode, onAllConnecti
                 <div className="flex justify-end space-x-4 pt-6 border-t border-gray-600/50">
                   <button
                     onClick={onClose}
-                    className="px-6 py-3 text-gray-300 bg-gradient-to-r from-gray-700/50 to-gray-800/50 border border-gray-600/50 rounded-xl hover:from-gray-600/60 hover:to-gray-700/60 hover:border-gray-500/60 transition-all duration-200 font-medium"
+                    className="px-6 py-3 text-gray-300 bg-gray-700/50 border border-gray-600/50 rounded-xl hover:bg-red-600 hover:text-white hover:border-red-500/50 transition-all duration-200 font-medium hover:scale-105"
                   >
                     Cancel
                   </button>
@@ -621,7 +621,7 @@ export function DisconnectNodeModal({ isOpen, onClose, sourceNode, onAllConnecti
                 <div className="flex justify-end space-x-3">
                   <button
                     onClick={() => setShowDisconnectConfirmation(false)}
-                    className="px-4 py-2 text-gray-300 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors"
+                    className="px-4 py-2 text-gray-300 bg-gray-700 rounded-lg hover:bg-red-600 hover:text-white transition-all duration-200"
                   >
                     Cancel
                   </button>
@@ -643,7 +643,7 @@ export function DisconnectNodeModal({ isOpen, onClose, sourceNode, onAllConnecti
   );
 }
 
-export function ConnectNodeModal({ isOpen, onClose, sourceNode, initialTab = 'connect', onAllConnectionsRemoved: _onAllConnectionsRemoved }: ConnectNodeModalProps) {
+export function ConnectWorkItemModal({ isOpen, onClose, sourceNode, initialTab = 'connect', onAllConnectionsRemoved: _onAllConnectionsRemoved }: ConnectWorkItemModalProps) {
   const { currentTeam } = useAuth();
   const { currentGraph } = useGraph();
   const { showSuccess, showError } = useNotifications();
@@ -1761,7 +1761,7 @@ export function ConnectNodeModal({ isOpen, onClose, sourceNode, initialTab = 'co
                       type="text"
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
-                      placeholder="Search nodes by title or type"
+                      placeholder="Search work items by title or type"
                       className="w-full pl-12 pr-4 py-3 bg-gray-800 border border-gray-600/50 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-emerald-400/70 focus:ring-2 focus:ring-emerald-500/20 transition-all duration-200"
                     />
                   </div>
@@ -2114,7 +2114,7 @@ export function ConnectNodeModal({ isOpen, onClose, sourceNode, initialTab = 'co
               <div className="flex justify-end space-x-4 pt-6 border-t border-gray-600/50 mt-6">
                 <button
                   onClick={onClose}
-                  className="px-6 py-3 text-gray-300 bg-gradient-to-r from-gray-700/50 to-gray-800/50 border border-gray-600/50 rounded-xl hover:from-gray-600/60 hover:to-gray-700/60 hover:border-gray-500/60 transition-all duration-200 font-medium"
+                  className="px-6 py-3 text-gray-300 bg-gray-700/50 border border-gray-600/50 rounded-xl hover:bg-red-600 hover:text-white hover:border-red-500/50 transition-all duration-200 font-medium hover:scale-105"
                 >
                   Cancel
                 </button>
@@ -2378,7 +2378,7 @@ export function ConnectNodeModal({ isOpen, onClose, sourceNode, initialTab = 'co
                 <div className="flex justify-end space-x-3">
                   <button
                     onClick={() => setShowDisconnectConfirmation(false)}
-                    className="px-4 py-2 text-gray-300 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors"
+                    className="px-4 py-2 text-gray-300 bg-gray-700 rounded-lg hover:bg-red-600 hover:text-white transition-all duration-200"
                   >
                     Cancel
                   </button>

packages/web/src/components/CreateGraphModal.tsx

@@ -242,7 +242,7 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
             </div>
             <button
               onClick={handleClose}
-              className="p-2 text-gray-400 hover:text-white hover:bg-gray-700/50 rounded-xl transition-all duration-200 hover:scale-110 hover:rotate-90"
+              className="p-2 text-gray-400 hover:text-white hover:bg-red-600 rounded-lg transition-all duration-200 hover:scale-110"
             >
               <X className="h-5 w-5" />
             </button>
@@ -325,7 +325,7 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
               <div className="flex justify-end space-x-3 pt-5 border-t border-gray-700/30">
                 <button
                   onClick={handleClose}
-                  className="px-5 py-2.5 text-sm text-gray-300 bg-gray-700/50 rounded-xl hover:bg-gray-600/60 transition-all duration-200 font-medium hover:scale-105 border border-gray-600/30 hover:border-gray-500/50"
+                  className="px-5 py-2.5 text-sm text-gray-300 bg-gray-700/50 rounded-xl hover:bg-red-600 hover:text-white transition-all duration-200 font-medium hover:scale-105 border border-gray-600/30 hover:border-red-500/50"
                 >
                   Cancel
                 </button>
@@ -710,7 +710,7 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
                 <div className="flex space-x-4">
                   <button
                     onClick={handleClose}
-                    className="px-6 py-3 text-gray-300 bg-gradient-to-r from-gray-700/80 to-gray-600/80 rounded-xl hover:from-gray-600/80 hover:to-gray-500/80 transition-all duration-300 hover:scale-105 shadow-lg backdrop-blur-sm border border-gray-500/30 hover:border-gray-400/50 hover:text-white font-medium"
+                    className="px-6 py-3 text-gray-300 bg-gray-700/50 rounded-xl hover:bg-red-600 hover:text-white transition-all duration-300 hover:scale-105 shadow-lg backdrop-blur-sm border border-gray-500/30 hover:border-red-500/50 font-medium"
                   >
                     Cancel
                   </button>

…s/web/src/components/CreateNodeModal.tsx …b/src/components/CreateWorkItemModal.tsxpackages/web/src/components/CreateNodeModal.tsx renamed to packages/web/src/components/CreateWorkItemModal.tsx packages/web/src/components/CreateNodeModal.tsx renamed to packages/web/src/components/CreateWorkItemModal.tsx

@@ -5,7 +5,7 @@ import { CREATE_WORK_ITEM, GET_WORK_ITEMS, GET_EDGES, CREATE_EDGE } from '../lib
 import { useAuth } from '../contexts/AuthContext';
 import { useGraph } from '../contexts/GraphContext';
 import { useNotifications } from '../contexts/NotificationContext';
-import { NodeTypeSelector } from './NodeCategorySelector';
+import { WorkItemTypeSelector } from './WorkItemTypeSelector';
 import { TagInput } from './TagInput';
 import {
   RELATIONSHIP_OPTIONS,
@@ -37,21 +37,21 @@ interface WorkItem {
   contributors?: Array<{ id: string; name: string; type: string; }>;
 }
 
-interface CreateNodeModalProps {
+interface CreateWorkItemModalProps {
   isOpen: boolean;
   onClose: () => void;
-  parentNodeId?: string; // If provided, creates a connection to this node
-  position?: { x: number; y: number; z: number }; // Position for floating nodes
-  onSubmit?: (nodeData: any) => Promise<void>; // Optional callback after node creation
+  parentWorkItemId?: string; // If provided, creates a connection to this work item
+  position?: { x: number; y: number; z: number }; // Position for floating work items
+  onSubmit?: (nodeData: any) => Promise<void>; // Optional callback after work item creation
 }
 
 
-export function CreateNodeModal({ isOpen, onClose, parentNodeId, position, onSubmit }: CreateNodeModalProps) {
+export function CreateWorkItemModal({ isOpen, onClose, parentWorkItemId, position, onSubmit }: CreateWorkItemModalProps) {
   const { currentUser, currentTeam } = useAuth();
   const { currentGraph } = useGraph();
   const { showSuccess, showError } = useNotifications();
 
-  // Query to get existing nodes count for dynamic messaging
+  // Query to get existing work items count for dynamic messaging
   const { data: existingNodesData } = useQuery(GET_WORK_ITEMS, {
     variables: currentGraph ? {
       where: {
@@ -129,20 +129,20 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position, onSub
           }
         }
       },
-      // Refetch all edges if creating a connected node
-      ...(parentNodeId ? [
+      // Refetch all edges if creating a connected work item
+      ...(parentWorkItemId ? [
         { 
           query: GET_EDGES,
           variables: {}
         },
-        // Also refetch edges for the parent node specifically
+        // Also refetch edges for the parent work item specifically
         { 
           query: GET_EDGES,
           variables: {
             where: {
               OR: [
-                { source: { id: parentNodeId } },
-                { target: { id: parentNodeId } }
+                { source: { id: parentWorkItemId } },
+                { target: { id: parentWorkItemId } }
               ]
             }
           }
@@ -210,7 +210,7 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position, onSub
     }
   });
 
-  // Edge creation mutation for connected nodes
+  // Edge creation mutation for connected work items
   const [createEdge] = useMutation(CREATE_EDGE, {
     refetchQueries: [
       { query: GET_EDGES, variables: {} },
@@ -280,11 +280,11 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position, onSub
       if (result.data?.createWorkItems?.workItems?.[0]) {
         const createdNode = result.data.createWorkItems.workItems[0];
 
-        // If parentNodeId is provided, create the edge with the correct relationship type
-        if (parentNodeId) {
+        // If parentWorkItemId is provided, create the edge with the correct relationship type
+        if (parentWorkItemId) {
           const edgeInput = {
             type: selectedRelationType,
-            source: { connect: { where: { node: { id: parentNodeId } } } },
+            source: { connect: { where: { node: { id: parentWorkItemId } } } },
             target: { connect: { where: { node: { id: createdNode.id } } } }
           };
 
@@ -350,14 +350,14 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position, onSub
             <div className="flex items-center space-x-3">
               <div className="w-10 h-10 bg-gradient-to-br from-green-500 via-emerald-500 to-teal-500 rounded-xl flex items-center justify-center shadow-lg shadow-green-500/30 relative">
                 <div className="absolute inset-0 bg-gradient-to-br from-green-400 to-emerald-600 rounded-xl blur opacity-50 animate-pulse"></div>
-                {parentNodeId ? <Link className="h-5 w-5 text-white relative z-10" /> : <Plus className="h-5 w-5 text-white relative z-10" />}
+                {parentWorkItemId ? <Link className="h-5 w-5 text-white relative z-10" /> : <Plus className="h-5 w-5 text-white relative z-10" />}
               </div>
               <div>
                 <h3 className="text-lg font-bold bg-gradient-to-r from-white via-green-100 to-emerald-100 bg-clip-text text-transparent">
-                  {parentNodeId ? 'Create & Connect Work Item' : 'Create New Work Item'}
+                  {parentWorkItemId ? 'Create & Connect Work Item' : 'Create New Work Item'}
                 </h3>
                 <p className="text-xs text-gray-400">
-                  {parentNodeId
+                  {parentWorkItemId
                     ? 'Add a new work item with automatic connection'
                     : existingNodesData?.workItems?.length > 0
                       ? 'Add another work item to expand your graph'
@@ -368,15 +368,15 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position, onSub
             </div>
             <button
               onClick={onClose}
-              className="p-2 text-gray-400 hover:text-white hover:bg-gray-700/50 rounded-xl transition-all duration-200 hover:scale-110 hover:rotate-90"
+              className="p-2 text-gray-400 hover:text-white hover:bg-red-600 rounded-lg transition-all duration-200 hover:scale-110"
             >
               <X className="h-5 w-5" />
             </button>
           </div>
 
           <div className="max-h-[70vh] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-gray-800 hover:scrollbar-thumb-gray-500">
           <form onSubmit={handleSubmit} className="px-3 py-2 space-y-2 relative">
-            {parentNodeId && (
+            {parentWorkItemId && (
               <div className="space-y-2 mb-2">
                 <div className="bg-gradient-to-br from-gray-800/30 to-gray-700/20 border border-gray-600/30 rounded-lg p-2 shadow-lg backdrop-blur-sm">
                   <div className="flex items-center space-x-2 mb-1">
@@ -489,7 +489,7 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position, onSub
                 Work Item Type
               </label>
 
-              <NodeTypeSelector
+              <WorkItemTypeSelector
                 selectedType={formData.type}
                 onTypeChange={(type) => setFormData(prev => ({ ...prev, type }))}
                 placeholder="Select work item type"
@@ -754,7 +754,7 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position, onSub
               <button
                 type="button"
                 onClick={onClose}
-                className="px-4 py-2 text-xs text-gray-300 bg-gray-700/50 rounded-lg hover:bg-gray-600/60 transition-all duration-200 font-medium hover:scale-105 border border-gray-600/30 hover:border-gray-500/50"
+                className="px-4 py-2 text-xs text-gray-300 bg-gray-700/50 rounded-lg hover:bg-red-600 hover:text-white transition-all duration-200 font-medium hover:scale-105 border border-gray-600/30 hover:border-red-600"
               >
                 Cancel
               </button>
@@ -774,7 +774,7 @@ export function CreateNodeModal({ isOpen, onClose, parentNodeId, position, onSub
                   </>
                 ) : (
                   <>
-                    <span>{parentNodeId ? 'Create & Connect' : 'Create Work Item'}</span>
+                    <span>{parentWorkItemId ? 'Create & Connect' : 'Create Work Item'}</span>
                     <Plus className="w-3 h-3" />
                   </>
                 )}