feat(forms): show the WebMCP tool state of Signal Forms

app/src/__tests__/forms-panels.test.ts

@@ -4,6 +4,7 @@ import { afterEach, describe, expect, it } from 'vitest';
 import { FormsFieldDetail } from '../pages/forms-field-detail';
 import { FormsInspector } from '../pages/forms-inspector';
 import { FormsLint, FormsSubmit } from '../pages/forms-report';
+import { FormsWebMcp } from '../pages/forms-webmcp';
 import type { CollectedForm, FormFieldNode } from '../pages/forms-types';
 
 type Call = (name: string, arg: Record<string, unknown>) => Promise<unknown>;
@@ -282,3 +283,92 @@ describe('FormsInspector redaction', () => {
     expect(text(fixture)).not.toContain('redacted (key)');
   });
 });
+
+describe('FormsWebMcp', () => {
+  it('shows the tool, its inputs, changed required fields and recent calls', async () => {
+    const fixture = TestBed.createComponent(FormsWebMcp);
+    fixture.componentRef.setInput('tool', {
+      name: 'sign_up',
+      description: 'Create an account',
+      status: 'registered',
+      seen: 'register',
+      inputs: ['name: string', 'age: number'],
+      required: ['name'],
+      requiredChanged: [{ path: 'age', now: true }],
+      calls: [{ at: 0, ms: 12, outcome: 'failed', fields: ['name'], detail: 'name: is required' }],
+    });
+    await settle(fixture);
+    const host = fixture.nativeElement as HTMLElement;
+    expect(host.querySelector('h3')?.textContent).toContain('WebMCP tool');
+    expect(text(fixture)).toContain('sign_up');
+    expect(text(fixture)).toContain('Create an account');
+    expect(host.querySelectorAll('.inputs li')[0].textContent).toContain('required');
+    expect(host.querySelectorAll('.inputs li')[1].textContent).not.toContain('required');
+    expect(text(fixture)).toContain('is now required');
+    expect(text(fixture)).toContain('submit failed');
+    expect(text(fixture)).toContain('name: is required');
+  });
+
+  it('lists the fields that block schema inference', async () => {
+    const fixture = TestBed.createComponent(FormsWebMcp);
+    fixture.componentRef.setInput('tool', {
+      name: 'book',
+      description: '',
+      status: 'failed',
+      seen: 'error',
+      error: 'schema',
+      blocking: [{ path: 'when', reason: 'null' }],
+    });
+    await settle(fixture);
+    expect(text(fixture)).toContain('not registered');
+    expect(text(fixture)).toContain('when is null');
+    expect(text(fixture)).toContain('No agent has called this tool');
+  });
+
+  it('says calls are not recorded for a tool registered before the inspector attached', async () => {
+    const fixture = TestBed.createComponent(FormsWebMcp);
+    fixture.componentRef.setInput('tool', {
+      name: 'sign_up',
+      description: '',
+      status: 'registered',
+      seen: 'list',
+    });
+    await settle(fixture);
+    expect(text(fixture)).toContain('registered before the inspector attached');
+    expect(text(fixture)).toContain('Calls are not recorded');
+    expect(text(fixture)).not.toContain('No agent has called this tool');
+  });
+
+  it('says when the provider is set but the browser has no modelContext', async () => {
+    const fixture = TestBed.createComponent(FormsWebMcp);
+    fixture.componentRef.setInput('page', { modelContext: false, provided: true, tools: [] });
+    fixture.componentRef.setInput('signalForm', true);
+    await settle(fixture);
+    expect(text(fixture)).toContain('the browser has no');
+    fixture.componentRef.setInput('signalForm', false);
+    await settle(fixture);
+    expect(text(fixture).trim()).toBe('');
+  });
+
+  it('appears in the form detail of the inspector', async () => {
+    const fixture = TestBed.createComponent(FormsInspector);
+    const withTool: CollectedForm = {
+      ...form,
+      kind: 'signal',
+      webMcp: {
+        name: 'sign_up',
+        description: 'Create an account',
+        status: 'registered',
+        seen: 'register',
+      },
+    };
+    fixture.componentRef.setInput(
+      'rpc',
+      fakeClient(() => Promise.resolve(''), [withTool]),
+    );
+    document.body.append(fixture.nativeElement);
+    await settle(fixture);
+    expect(text(fixture)).toContain('WebMCP tool');
+    expect(text(fixture)).toContain('sign_up');
+  });
+});

app/src/pages/forms-inspector.ts

@@ -18,6 +18,7 @@ import { LimitNote } from '../ui/limit-note';
 import { FormsFieldDetail } from './forms-field-detail';
 import { FormsLint, FormsSubmit } from './forms-report';
 import { FormsTimeline } from './forms-timeline';
+import { FormsWebMcp } from './forms-webmcp';
 import {
   FORMS_STYLES,
   KIND_LABELS,
@@ -30,6 +31,7 @@ import {
   type FormEvent,
   type FormFieldError,
   type FormFieldNode,
+  type WebMcpPage,
 } from './forms-types';
 
 type Tab = 'fields' | 'timeline' | 'submit' | 'lint';
@@ -70,6 +72,7 @@ interface FormsSnapshot {
   events?: FormEvent[];
   instrumented?: string[];
   dropped?: Record<string, number>;
+  webMcp?: WebMcpPage[];
 }
 
 interface FieldRow {
@@ -88,7 +91,15 @@ function countFields(node: FormFieldNode): number {
 
 @Component({
   selector: 'app-forms-inspector',
-  imports: [JsonPipe, FormsFieldDetail, FormsTimeline, FormsSubmit, FormsLint, LimitNote],
+  imports: [
+    JsonPipe,
+    FormsFieldDetail,
+    FormsTimeline,
+    FormsSubmit,
+    FormsLint,
+    FormsWebMcp,
+    LimitNote,
+  ],
   host: { '(keydown.escape)': 'cancelPick()' },
   template: `
     @if (!rpc()) {
@@ -220,6 +231,11 @@ function countFields(node: FormFieldNode): number {
                 </ul>
               </details>
             }
+            <app-forms-webmcp
+              [tool]="form.webMcp"
+              [page]="webMcpPage(form.id)"
+              [signalForm]="form.kind === 'signal'"
+            />
 
             <div class="action-bar">
               <div class="actions" role="group" aria-label="Form actions">
@@ -1250,6 +1266,7 @@ export class FormsInspector {
   readonly focusHandled = output<void>();
 
   readonly forms = signal<CollectedForm[]>([]);
+  readonly webMcp = signal<WebMcpPage[]>([]);
   readonly events = signal<FormEvent[]>([]);
   readonly loading = signal(true);
   readonly failed = signal(false);
@@ -1278,6 +1295,11 @@ export class FormsInspector {
   readonly message = signal('');
   readonly armed = signal<string | null>(null);
   readonly snapshot = signal<string | null>(null);
+
+  webMcpPage(formId: string): WebMcpPage | undefined {
+    const page = pageOf(formId);
+    return this.webMcp().find((entry) => entry.pageId === page);
+  }
   readonly picking = signal<string | null>(null);
   private pickSeq = 0;
 
@@ -1388,6 +1410,7 @@ export class FormsInspector {
         this.events.set(snapshot?.events ?? []);
         this.instrumented.set(snapshot?.instrumented ?? []);
         this.dropped.set(snapshot?.dropped ?? {});
+        this.webMcp.set(snapshot?.webMcp ?? []);
         this.version.update((v) => v + 1);
       };
       apply(state.value());

app/src/pages/forms-timeline.ts

@@ -2,7 +2,7 @@ import { Component, computed, input, output, signal } from '@angular/core';
 import { time } from '../format';
 import { FORMS_STYLES, type FormEvent } from './forms-types';
 
-const ORIGINS = ['all', 'user', 'code', 'devtools'] as const;
+const ORIGINS = ['all', 'user', 'code', 'agent', 'devtools'] as const;
 
 @Component({
   selector: 'app-forms-timeline',

app/src/pages/forms-types.ts

@@ -56,9 +56,31 @@ export interface CollectedForm {
   submit?: { hasAction: boolean; willRun: boolean; submitting: boolean };
   submitDom?: { reasons: string[] };
   errorSummary?: { path: string; kind: string; message: string }[];
+  webMcp?: WebMcpTool;
   root: FormFieldNode;
 }
 
+export interface WebMcpTool {
+  name: string;
+  description: string;
+  status: 'registering' | 'registered' | 'failed';
+  seen: 'register' | 'list' | 'error';
+  error?: string;
+  inputs?: string[];
+  required?: string[];
+  requiredChanged?: { path: string; now: boolean }[];
+  blocking?: { path: string; reason: string }[];
+  duplicate?: boolean;
+  calls?: { at: number; ms?: number; outcome: string; fields?: string[]; detail?: string }[];
+}
+
+export interface WebMcpPage {
+  pageId?: string;
+  modelContext: boolean;
+  provided?: boolean;
+  tools: WebMcpTool[];
+}
+
 export function pageOf(formId: string): string {
   return formId.split('@')[1] ?? '';
 }