feat(mcp): performance and build inspectors, native fetch, server errors, oxlint ratchet

.claude/skills/devtools-inspector/SKILL.md

@@ -21,6 +21,7 @@ Read `docs/contributing/coding-standards.md` ("Reading data from the page") befo
 
 - Put collection logic in its own module (`<area>-collector.ts`) and keep `overlay.ts` changes to wiring: import, attach, push, `leave()` and the returned cleanup.
 - Read Angular through the debug APIs on `window.ng` and verify each field against `node_modules/@angular/core/fesm2022` (or the library's fesm build). Known helpers:
+  - `debug-api.ts`: `NgDebugApi`, the typed `window.ng` with `@since` notes, and `pageDebugApi()`. Add a function there (and to `NG_DEBUG_FUNCTIONS`) before a collector reads it.
   - `element-id.ts`: stable `WeakMap` ids for elements (`elementId`, `elementById`).
   - `injector-tree.ts`: `className()` strips bundler `_` prefixes, `tokenName()`, `dependenciesOf()`, environment injector walk.
   - `serialize.ts`: safe, size-limited serialization.
@@ -31,6 +32,8 @@ Read `docs/contributing/coding-standards.md` ("Reading data from the page") befo
 
 ## Server side (`devframe.ts`, `rpc/`)
 
+- `devframe.ts` wires the setup. A new inspector goes in its own `rpc/<area>-register.ts` (see `rpc/errors-register.ts`), and agent tools of an existing area live in `devframe-<area>-tools.ts`, which take the setup values they read as an `env` object typed through `devframe-env.ts`. Keep `devframe.ts` under the line ratchet of `pnpm lint`.
+
 - Keep a `Map<pageId, report>` with `reportedAt`, drop pages older than `ttl(pageId)` (from `visibility.ttl()`, so a page with a current heartbeat never expires) in the shared expiry interval, and write the combined value into the shared state.
 - Page actions that the panel triggers (restore, highlight, run) go panel -> `request-<area>-action` -> broadcast `<area>-action` to the page -> `<area>-action-result`, keyed by `requestId`, with a timeout.
 - Source scans in `rpc/` enrich or stand in for live data. They must return a `kind` for anything the Dashboard counts.
@@ -45,7 +48,7 @@ Read `docs/contributing/coding-standards.md` ("Reading data from the page") befo
 
 - Describe what the tool returns, where the data comes from and what an empty answer means. Answer in markdown.
 - Give each new tool or resource one entry in `AGENT_ENTRIES` (`packages/devtools/src/config.ts`): its inspector, safety tier, the `actions` it writes for and whether it needs a page. `AGENT_INSPECTOR`, `AGENT_SAFETY`, `ACTION_TOOLS`, `PAGE_AGENT_ENTRIES` and the tags derive from it. `packages/devtools/src/__tests__/agent-metadata.test.ts` fails on a registered tool without an entry; update `packages/devtools/src/__tests__/fixtures/agent-metadata-derived.json` with it.
-- Update descriptions in `devframe.ts` when data shapes change, and the tool list on the docs site (apps/docs/src/content/agents/tools.md). Use the `devtools-docs` skill for that edit.
+- Update tool descriptions (in `devframe.ts`, `devframe-<area>-tools.ts` or the inspector's register module) when data shapes change, and the tool list on the docs site (apps/docs/src/content/agents/tools.md). Use the `devtools-docs` skill for that edit.
 
 ## Tests
 

.claude/skills/devtools-verify/SKILL.md

@@ -11,6 +11,7 @@ Run them in this order; all must pass:
 
 ```sh
 pnpm format:check
+pnpm lint
 pnpm commit:check
 pnpm skills:check
 pnpm typecheck

.github/workflows/ci.yml

@@ -34,6 +34,9 @@ jobs:
       - name: Check formatting
         run: pnpm format:check
 
+      - name: Lint (no new oxlint warnings)
+        run: pnpm lint
+
       - name: Validate agent skills and roles
         run: pnpm skills:check
 

.oxlintrc.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "unicorn", "oxc"],
+  "categories": {
+    "correctness": "warn"
+  },
+  "rules": {
+    "typescript/no-explicit-any": "warn"
+  },
+  "ignorePatterns": [
+    "**/dist/**",
+    "**/.angular/**",
+    "**/node_modules/**",
+    "extension/ui/**",
+    "examples/nativescript/platforms/**",
+    "examples/nativescript/hooks/**"
+  ]
+}

AGENTS.md

@@ -14,17 +14,18 @@ Pangular Inspector inspects a running Angular app and serves what it finds to a
 
 ### Commands
 
-| Command                | What it runs                                                              |
-| ---------------------- | ------------------------------------------------------------------------- |
-| `pnpm test:devtools`   | Package tests                                                             |
-| `pnpm test:panel`      | Panel tests                                                               |
-| `pnpm test:axe`        | Builds a static report and runs axe on every panel view                   |
-| `pnpm typecheck`       | TypeScript and template checks for every project                          |
-| `pnpm format:check`    | Prettier, including the docs markdown                                     |
-| `pnpm skills:check`    | Checks the skills and roles in `.claude` and the skills the package ships |
-| `pnpm docs:build`      | Builds the docs site with its link guards                                 |
-| `pnpm extension:build` | Rebuilds `extension/ui` from `app`                                        |
-| `pnpm commit:check`    | Checks the commit messages on the branch                                  |
+| Command                | What it runs                                                                                                    |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `pnpm test:devtools`   | Package tests                                                                                                   |
+| `pnpm test:panel`      | Panel tests                                                                                                     |
+| `pnpm test:axe`        | Builds a static report and runs axe on every panel view                                                         |
+| `pnpm typecheck`       | TypeScript and template checks for every project                                                                |
+| `pnpm format:check`    | Prettier, including the docs markdown                                                                           |
+| `pnpm lint`            | oxlint with a ratchet: no file gets more warnings than `lint-baseline.json`, and no file over 1,500 lines grows |
+| `pnpm skills:check`    | Checks the skills and roles in `.claude` and the skills the package ships                                       |
+| `pnpm docs:build`      | Builds the docs site with its link guards                                                                       |
+| `pnpm extension:build` | Rebuilds `extension/ui` from `app`                                                                              |
+| `pnpm commit:check`    | Checks the commit messages on the branch                                                                        |
 
 The words this project uses for its own concepts (overlay, collector, hub, devframe, agent tool and so on) are defined in `docs/CONTEXT.md`. Use them the same way in code, docs and issues.
 

app/src/__tests__/app-shell.test.ts

@@ -334,7 +334,9 @@ describe('App scroll memory', () => {
     Object.defineProperty(main, 'scrollTop', {
       configurable: true,
       get: () => top,
-      set: (value: number) => (top = value),
+      set: (value: number) => {
+        top = value;
+      },
     });
     const buttons = () => [...host(fixture).querySelectorAll<HTMLButtonElement>('nav button')];
     // An earlier test can leave another tab in the URL.
@@ -373,7 +375,9 @@ describe('App scroll memory while content loads', () => {
     Object.defineProperty(main, 'scrollTop', {
       configurable: true,
       get: () => top,
-      set: (value: number) => (top = Math.max(0, Math.min(value, max))),
+      set: (value: number) => {
+        top = Math.max(0, Math.min(value, max));
+      },
     });
     const buttons = () => [...host(fixture).querySelectorAll<HTMLButtonElement>('nav button')];
     buttons()[0].click();

app/src/__tests__/network-live-sort.test.ts

@@ -157,7 +157,9 @@ describe('the network live controls', () => {
     Object.defineProperty(wrap, 'scrollTop', {
       configurable: true,
       get: () => top,
-      set: (value: number) => (top = value),
+      set: (value: number) => {
+        top = value;
+      },
     });
     const follow = host().querySelector<HTMLInputElement>('app-live-controls input')!;
     expect(follow.checked).toBe(false);
@@ -204,7 +206,9 @@ describe('Follow newest with SSR requests on the page', () => {
       Object.defineProperty(wrap, 'scrollTop', {
         configurable: true,
         get: () => tops[i],
-        set: (value: number) => (tops[i] = value),
+        set: (value: number) => {
+          tops[i] = value;
+        },
       }),
     );
     host().querySelector<HTMLInputElement>('app-live-controls input')!.click();

app/src/__tests__/network-native-fetch.test.ts

@@ -0,0 +1,81 @@
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { afterEach, describe, expect, it } from 'vitest';
+import { NetworkInspector } from '../pages/network-inspector';
+
+let fixture: ComponentFixture<NetworkInspector>;
+
+const call = (id: string, overrides: Record<string, unknown> = {}) => ({
+  id,
+  url: `/api/${id}`,
+  method: 'GET',
+  status: 200,
+  durationMs: 12,
+  side: 'client' as const,
+  cacheHit: false,
+  faulted: false,
+  at: 1000,
+  ...overrides,
+});
+
+describe('NetworkInspector native fetch calls', () => {
+  afterEach(() => {
+    fixture?.destroy();
+    TestBed.resetTestingModule();
+  });
+
+  it('tags a native fetch() call and leaves HttpClient calls untagged', async () => {
+    fixture = TestBed.createComponent(NetworkInspector);
+    document.body.append(fixture.nativeElement);
+    fixture.componentInstance.pages.set([
+      {
+        pageId: 'p1',
+        url: '/trips',
+        title: 'Trips',
+        hydration: null,
+        reportedAt: 1000,
+        calls: [call('client'), call('native', { nativeFetch: true })],
+      },
+    ]);
+    await fixture.whenStable();
+    const host = fixture.nativeElement as HTMLElement;
+    const rowOf = (id: string) =>
+      host.querySelector(`button[data-call-id="${id}"]`)!.closest('tr')!;
+    const tags = (id: string) =>
+      [...rowOf(id).querySelectorAll('.tag')].map((tag) => tag.textContent!.trim());
+    expect(tags('native')).toContain('fetch()');
+    expect(tags('client')).not.toContain('fetch()');
+  });
+
+  it('offers no mock for a native fetch() call and says why', async () => {
+    fixture = TestBed.createComponent(NetworkInspector);
+    document.body.append(fixture.nativeElement);
+    const inspector = fixture.componentInstance;
+    inspector.pages.set([
+      {
+        pageId: 'p1',
+        url: '/trips',
+        title: 'Trips',
+        hydration: null,
+        reportedAt: 1000,
+        calls: [call('client'), call('native', { nativeFetch: true })],
+      },
+    ]);
+    await fixture.whenStable();
+    const host = fixture.nativeElement as HTMLElement;
+    const open = async (id: string) => {
+      host.querySelector<HTMLButtonElement>(`button[data-call-id="${id}"]`)!.click();
+      await fixture.whenStable();
+      return host.querySelector('#call-preview')!;
+    };
+    const mockButton = (preview: Element) =>
+      [...preview.querySelectorAll('button')].find((b) =>
+        b.textContent!.includes('Mock this request'),
+      );
+    let preview = await open('native');
+    expect(mockButton(preview)).toBeUndefined();
+    expect(preview.textContent).toContain('skips the HttpClient interceptor');
+    preview = await open('client');
+    expect(mockButton(preview)).toBeDefined();
+    expect(preview.textContent).not.toContain('skips the HttpClient interceptor');
+  });
+});

app/src/__tests__/network-ssr-requests.test.ts

@@ -81,6 +81,8 @@ describe('NetworkInspector SSR requests', () => {
         calls: [
           call({ id: 'b1', side: 'client', url: '/api/products', cacheHit: true, at: 1200 }),
           call({ id: 'b2', side: 'client', url: '/api/quote', method: 'POST', at: 1200 }),
+          // A native fetch() to the same URL never reads the transfer cache: no cache miss.
+          call({ id: 'b3', side: 'client', url: '/api/products', at: 1300, nativeFetch: true }),
         ],
       },
     ]);