correct mcp server init and registration with angie

Author: ilicfilip

third-party/angie/.gitignore classes/third-party/angie/.gitignorethird-party/angie/.gitignore renamed to classes/third-party/angie/.gitignore

@@ -13,8 +13,8 @@ The integration enables Angie to:
 
 The integration consists of two main components:
 
-1. **PHP REST API** (`class-angie.php`): WordPress REST API endpoints for task management
-2. **MCP Server** (`src/mcp-server.ts`): TypeScript-based MCP server that bridges Angie AI with the REST API
+1. **PHP REST API** (`class-angie-api.php`): WordPress REST API endpoints for task management
+2. **MCP Server** (`src/progress-planner-mcp-server.ts`): TypeScript-based MCP server that bridges Angie AI with the REST API, bundled with Vite for browser compatibility
 
 ## Installation
 
@@ -29,7 +29,7 @@ The integration consists of two main components:
 
 1. **Install Dependencies:**
    ```bash
-   cd third-party/angie
+   cd classes/third-party/angie
    npm install
    ```
 
@@ -38,12 +38,16 @@ The integration consists of two main components:
    npm run build
    ```
 
-   This will compile the TypeScript code and generate `dist/mcp-server.js`.
+   This will:
+   - Compile TypeScript to JavaScript (`tsc`)
+   - Bundle all dependencies with Vite into a single ES module
+   - Generate `dist/progress-planner-mcp-server.js` (bundled, ~442KB)
 
 3. **Development Mode:**
    For active development, use watch mode:
    ```bash
-   npm run watch
+   npm run watch  # TypeScript watch mode
+   npm run dev    # Vite dev server (for testing)
    ```
 
 The integration is automatically enabled when Progress Planner is active. The MCP server script will be automatically enqueued when the Angie plugin is detected.
@@ -237,8 +241,24 @@ To get a complete list of available task IDs, use the "Get Active Tasks" endpoin
 
 ### File Structure
 
-- **Main Integration Class:** `/code/classes/rest/class-angie.php`
-- **Registration:** The class is automatically instantiated in `/code/classes/class-base.php`
+- **Main Integration Class:** `classes/third-party/angie/class-integration.php`
+- **REST API Class:** `classes/third-party/angie/class-angie-api.php`
+- **MCP Server Source:** `classes/third-party/angie/src/progress-planner-mcp-server.ts`
+- **MCP Server Bundle:** `classes/third-party/angie/dist/progress-planner-mcp-server.js`
+- **Build Configuration:** `classes/third-party/angie/vite.config.ts`
+- **Registration:** The integration is automatically instantiated in `classes/class-base.php`
+
+### Build Process
+
+The MCP server uses:
+- **TypeScript** for type-safe development
+- **Vite** for bundling dependencies (Angie SDK, MCP SDK, Zod) into a single ES module
+- **ES Modules** for browser compatibility
+
+The build process (`npm run build`) does the following:
+1. Compiles TypeScript (`tsc`) - generates type definitions
+2. Bundles with Vite - resolves all `import` statements and creates a single file
+3. Outputs `dist/progress-planner-mcp-server.js` - ready for browser use
 
 ### How It Works
 
@@ -321,14 +341,29 @@ Check the debug log at `/wp-content/debug.log` for error messages.
 
 **Solution:** This typically happens if the value hasn't changed. WordPress's `update_option()` returns false when the new value is the same as the old value.
 
+### Module resolution errors in browser
+
+**Solution:** Ensure you've run `npm run build` after making changes. The build process bundles all dependencies. Clear your browser cache (hard refresh: Cmd+Shift+R / Ctrl+Shift+F5) to load the new bundled file.
+
 ## Contributing
 
 To extend this integration:
 
-1. Add new methods to `/code/classes/rest/class-angie.php`
-2. Register new routes in the `register_rest_endpoint()` method
-3. Follow WordPress REST API best practices
-4. Update this documentation
+1. **Add new REST API endpoints:**
+   - Add new methods to `classes/third-party/angie/class-angie-api.php`
+   - Register new routes in the `register_rest_endpoint()` method
+
+2. **Add new MCP tools:**
+   - Edit `classes/third-party/angie/src/progress-planner-mcp-server.ts`
+   - Use `server.tool()` to register new tools (see example code)
+   - Rebuild with `npm run build`
+
+3. **Development workflow:**
+   - Edit TypeScript source files in `src/`
+   - Run `npm run build` to rebuild
+   - Clear browser cache to see changes
+   - Follow WordPress REST API best practices
+   - Update this documentation
 
 ## Support
 

third-party/angie/README.md classes/third-party/angie/README.mdthird-party/angie/README.md renamed to classes/third-party/angie/README.md

@@ -10,12 +10,14 @@
  * @package Progress_Planner
  */
 
-namespace Progress_Planner\Rest;
+namespace Progress_Planner\Third_Party\Angie;
+
+use Progress_Planner\Rest\Base;
 
 /**
  * Angie Integration REST-API class.
  */
-class Angie extends Base {
+class Angie_API extends Base {
 
 	/**
 	 * Register the REST-API endpoints.
@@ -59,13 +61,13 @@ public function register_rest_endpoint() {
 					'callback'            => [ $this, 'complete_task' ],
 					'permission_callback' => [ $this, 'check_permissions' ],
 					'args'                => [
-						'task_id'   => [
+						'task_id' => [
 							'required'          => true,
 							'type'              => 'string',
 							'description'       => 'The task ID to complete (e.g., "core-blogdescription")',
 							'sanitize_callback' => 'sanitize_text_field',
 						],
-						'value'     => [
+						'value'   => [
 							'required'          => false,
 							'type'              => 'string',
 							'description'       => 'The value to set for the task (e.g., blog description text)',
@@ -107,11 +109,11 @@ public function get_active_tasks() {
 
 			$tasks_to_return = [];
 			foreach ( $tasks as $task ) {
-				$task_data = $task->get_data();
+				$task_data         = $task->get_data();
 				$tasks_to_return[] = [
 					'id'          => $task_data['task_id'],
-					'title'       => $task_data['title'],
-					'description' => $task_data['description'],
+					'title'       => $task_data['post_title'],
+					'description' => $task_data['post_content'],
 					'url'         => $task_data['url'],
 					'priority'    => $task_data['priority'] ?? 0,
 					'status'      => 'active',
@@ -147,11 +149,11 @@ public function get_completed_tasks() {
 
 			$tasks_to_return = [];
 			foreach ( $tasks as $task ) {
-				$task_data = $task->get_data();
+				$task_data         = $task->get_data();
 				$tasks_to_return[] = [
 					'id'          => $task_data['task_id'],
-					'title'       => $task_data['title'],
-					'description' => $task_data['description'],
+					'title'       => $task_data['post_title'],
+					'description' => $task_data['post_content'],
 					'url'         => $task_data['url'],
 					'priority'    => $task_data['priority'] ?? 0,
 					'status'      => 'completed',
@@ -287,9 +289,9 @@ private function complete_blog_description_task( $value ) {
 
 		return new \WP_REST_Response(
 			[
-				'success'         => true,
-				'message'         => \__( 'Blog description has been set successfully and the task has been marked as completed.', 'progress-planner' ),
-				'task_id'         => 'core-blogdescription',
+				'success'          => true,
+				'message'          => \__( 'Blog description has been set successfully and the task has been marked as completed.', 'progress-planner' ),
+				'task_id'          => 'core-blogdescription',
 				'blog_description' => $value,
 			],
 			200

third-party/angie/class-angie.php …es/third-party/angie/class-angie-api.phpthird-party/angie/class-angie.php renamed to classes/third-party/angie/class-angie-api.php third-party/angie/class-angie.php renamed to classes/third-party/angie/class-angie-api.php

@@ -12,6 +12,7 @@
 
 namespace Progress_Planner\Third_Party\Angie;
 
+use Progress_Planner\Third_Party\Angie\Angie_API;
 /**
  * Main Angie Integration class.
  */
@@ -21,25 +22,14 @@ class Integration {
 	 * Constructor.
 	 */
 	public function __construct() {
-		// Load REST API endpoints.
-		require_once __DIR__ . '/class-angie.php';
 
 		// Initialize REST API.
-		add_action( 'rest_api_init', [ $this, 'init_rest_api' ] );
+		new Angie_API();
 
 		// Enqueue MCP server script.
 		add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
 	}
 
-	/**
-	 * Initialize REST API endpoints.
-	 *
-	 * @return void
-	 */
-	public function init_rest_api() {
-		new \Progress_Planner\Rest\Angie();
-	}
-
 	/**
 	 * Enqueue scripts for Angie integration.
 	 *
@@ -52,8 +42,8 @@ public function enqueue_scripts() {
 		}
 
 		// Enqueue the MCP server script.
-		$script_path = PROGRESS_PLANNER_DIR . '/third-party/angie/dist/mcp-server.js';
-		$script_url  = PROGRESS_PLANNER_URL . '/third-party/angie/dist/mcp-server.js';
+		$script_path = \constant( 'PROGRESS_PLANNER_DIR' ) . '/classes/third-party/angie/dist/progress-planner-mcp-server.js';
+		$script_url  = \constant( 'PROGRESS_PLANNER_URL' ) . '/classes/third-party/angie/dist/progress-planner-mcp-server.js';
 
 		if ( file_exists( $script_path ) ) {
 			wp_enqueue_script(
@@ -64,6 +54,24 @@ public function enqueue_scripts() {
 				true
 			);
 
+			// Add type="module" attribute to the script tag for ES modules.
+			add_filter(
+				'script_loader_tag',
+				function ( $tag, $handle ) {
+					if ( 'progress-planner-angie-mcp' === $handle ) {
+						// Ensure type="module" is added and remove any existing type attribute.
+						if ( false !== strpos( $tag, 'type=' ) ) {
+							$tag = preg_replace( '/type=["\'][^"\']*["\']/', 'type="module"', $tag );
+						} else {
+							$tag = str_replace( '<script ', '<script type="module" ', $tag );
+						}
+					}
+					return $tag;
+				},
+				10,
+				2
+			);
+
 			// Pass WordPress site URL and nonce to the script.
 			wp_localize_script(
 				'progress-planner-angie-mcp',
@@ -72,7 +80,7 @@ public function enqueue_scripts() {
 					'restUrl'   => rest_url( 'progress-planner/v1/angie' ),
 					'nonce'     => wp_create_nonce( 'wp_rest' ),
 					'siteUrl'   => get_site_url(),
-					'pluginUrl' => PROGRESS_PLANNER_URL,
+					'pluginUrl' => \constant( 'PROGRESS_PLANNER_URL' ),
 				]
 			);
 		}