feat: declare input schemas for the selector-taking agent tools

packages/ng-devtools/package.json

@@ -25,6 +25,7 @@
     "mcp"
   ],
   "dependencies": {
+    "cac": "^7.0.0",
     "devframe": "^1.0.0",
     "valibot": "^1.5.0"
   },

packages/ng-devtools/src/devframe.ts

@@ -1,11 +1,11 @@
 import type { RemoteAssets } from 'devframe'
 import { defineDevframe } from 'devframe'
-import { getRoutes } from './rpc/get-routes.js'
-import { getComponents } from './rpc/get-components.js'
-import { getBuildMeta } from './rpc/build-meta.js'
-import { getSignals } from './rpc/get-signals.js'
-import { getProviders } from './rpc/get-providers.js'
-import type {} from './types.js'
+import { getRoutes } from './rpc/get-routes.ts'
+import { getComponents } from './rpc/get-components.ts'
+import { getBuildMeta } from './rpc/build-meta.ts'
+import { getSignals } from './rpc/get-signals.ts'
+import { getProviders } from './rpc/get-providers.ts'
+import type {} from './types.ts'
 
 import pkg from '../package.json' with { type: 'json' }
 
@@ -137,6 +137,13 @@ const ngDevtools = defineDevframe({
       id: 'ng-devtools:highlight',
       description: 'Highlight a component in the running Angular app by its selector.',
       safety: 'action',
+      inputSchema: {
+        type: 'object',
+        properties: {
+          selector: { type: 'string', description: 'CSS selector of the component to highlight, e.g. app-root.' },
+        },
+        required: ['selector'],
+      },
       handler: async (args: { selector: string }) => {
         await ctx.rpc.invokeLocal('ng-devtools:select-component' as any, args.selector)
         void my.rpc.broadcast({ method: 'highlight-in-page', args: [args.selector], optional: true })
@@ -148,6 +155,13 @@ const ngDevtools = defineDevframe({
       id: 'ng-devtools:inspect-signals',
       description: 'Get the signal graph for a specific component by CSS selector. Returns signal nodes (signal, computed, linkedSignal, effect) and their dependency edges. Call this to understand reactive data flow before suggesting state changes.',
       safety: 'read',
+      inputSchema: {
+        type: 'object',
+        properties: {
+          selector: { type: 'string', description: 'CSS selector of the component to inspect, e.g. app-root.' },
+        },
+        required: ['selector'],
+      },
       handler: async (args: { selector: string }) => {
         try {
           const result = await my.rpc.broadcast({ method: 'get-signal-graph-for', args: [args.selector] })
@@ -163,6 +177,13 @@ const ngDevtools = defineDevframe({
       id: 'ng-devtools:inspect-providers',
       description: 'Get DI providers and the injector resolution path for a component by CSS selector. Call this to understand dependency injection before suggesting provider changes.',
       safety: 'read',
+      inputSchema: {
+        type: 'object',
+        properties: {
+          selector: { type: 'string', description: 'CSS selector of the component to inspect, e.g. app-root.' },
+        },
+        required: ['selector'],
+      },
       handler: async (args: { selector: string }) => {
         try {
           const result = await my.rpc.broadcast({ method: 'get-providers-for', args: [args.selector] })

src/app/app.spec.ts

@@ -1,10 +1,12 @@
 import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
 import { App } from './app';
 
 describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [App],
+      providers: [provideRouter([])],
     })
       .compileComponents();
   });
@@ -15,10 +17,11 @@ describe('App', () => {
     expect(app).toBeTruthy();
   });
 
-  it('should render title', async () => {
+  it('should render the nav links', async () => {
     const fixture = TestBed.createComponent(App);
     await fixture.whenStable();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-devtools');
+    const hrefs = Array.from(compiled.querySelectorAll('nav a')).map((a) => a.getAttribute('href'));
+    expect(hrefs).toEqual(['/', '/about']);
   });
 });

tsconfig.app.json

@@ -5,7 +5,9 @@
   "compilerOptions": {
     "types": [
       "node"
-    ]
+    ],
+    "allowImportingTsExtensions": true,
+    "rewriteRelativeImportExtensions": true
   },
   "include": [
     "src/**/*.ts"