feat(router): clear the navigations list and keep probes out of Only problems

app/src/__tests__/route-timeline-clear.test.ts

@@ -0,0 +1,177 @@
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import type { DevframeRpcClient } from 'devframe/client';
+import { afterEach, describe, expect, it } from 'vitest';
+import { RouteTimeline } from '../pages/route-timeline';
+import type { NavigationRecord, RouterPage } from '../pages/router-types';
+
+type Call = (name: string, arg: unknown) => Promise<unknown>;
+
+function fakeClient(call: Call, connectionMeta: object = {}): DevframeRpcClient {
+  const rpc = { call, callEvent: () => Promise.resolve() };
+  return { connectionMeta, scope: () => ({ rpc }) } as unknown as DevframeRpcClient;
+}
+
+function nav(id: number, url: string, extra: Partial<NavigationRecord> = {}): NavigationRecord {
+  return {
+    id,
+    url,
+    trigger: 'imperative',
+    startedAt: 1,
+    endedAt: 2,
+    outcome: 'succeeded',
+    ...extra,
+  };
+}
+
+function page(extra: Partial<RouterPage> = {}): RouterPage {
+  return { pageId: 'p1', reportedAt: 1, snapshot: null, navigations: [], ...extra };
+}
+
+async function settle(fixture: ComponentFixture<unknown>) {
+  for (let i = 0; i < 3; i++) {
+    await new Promise((resolve) => setTimeout(resolve));
+    await fixture.whenStable();
+  }
+}
+
+function el(fixture: ComponentFixture<unknown>): HTMLElement {
+  return fixture.nativeElement as HTMLElement;
+}
+
+function mount(data: RouterPage, call: Call, connectionMeta?: object) {
+  const fixture = TestBed.createComponent(RouteTimeline);
+  fixture.componentRef.setInput('page', data);
+  fixture.componentRef.setInput('rpc', fakeClient(call, connectionMeta));
+  document.body.append(el(fixture));
+  return fixture;
+}
+
+function clearButton(fixture: ComponentFixture<unknown>): HTMLButtonElement {
+  const found = el(fixture).querySelector<HTMLButtonElement>(
+    'button[aria-label="Clear navigations"]',
+  );
+  if (!found) throw new Error('No Clear button');
+  return found;
+}
+
+function status(fixture: ComponentFixture<unknown>): string {
+  return el(fixture).querySelector('[role="status"]')?.textContent?.trim() ?? '';
+}
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('RouteTimeline Clear', () => {
+  const navigations = [nav(1, '/a'), nav(2, '/b', { outcome: 'cancelled' })];
+
+  it("clears the shown page's navigations, says so and keeps focus on Clear", async () => {
+    const calls: [string, unknown][] = [];
+    const fixture = mount(page({ navigations }), (name, arg) => {
+      calls.push([name, arg]);
+      return Promise.resolve(undefined);
+    });
+    await settle(fixture);
+    expect(status(fixture)).toBe('');
+    const clear = clearButton(fixture);
+    expect(clear.textContent?.trim()).toBe('Clear');
+    clear.focus();
+    clear.click();
+    await settle(fixture);
+    expect(calls).toEqual([['clear-router-navigations', 'p1']]);
+    expect(status(fixture)).toBe('Navigations cleared.');
+
+    // The server then sends the emptied page.
+    fixture.componentRef.setInput('page', page());
+    await settle(fixture);
+    expect(el(fixture).textContent).toContain('No navigations since Pangular Inspector connected.');
+    expect(document.activeElement).toBe(clearButton(fixture));
+  });
+
+  it('says when clearing fails', async () => {
+    const fixture = mount(page({ navigations }), () => Promise.reject(new Error('offline')));
+    await settle(fixture);
+    clearButton(fixture).click();
+    await settle(fixture);
+    expect(status(fixture)).toBe('Could not clear the navigations.');
+    expect(el(fixture).querySelectorAll('ol.navs > li')).toHaveLength(2);
+  });
+
+  it('keeps the answer off a page the user switched to while clearing', async () => {
+    let answer!: (value: unknown) => void;
+    const fixture = mount(
+      page({ pageId: 'a', navigations }),
+      () => new Promise((resolve) => (answer = resolve)),
+    );
+    await settle(fixture);
+    clearButton(fixture).click();
+    fixture.componentRef.setInput('page', page({ pageId: 'b', navigations }));
+    await settle(fixture);
+    answer({ ok: true });
+    await settle(fixture);
+    expect(status(fixture)).not.toContain('Navigations cleared.');
+    expect(status(fixture)).not.toContain('Clearing');
+  });
+
+  it('says it is clearing first, so a second clear in a row is announced again', async () => {
+    let answer!: (value: unknown) => void;
+    const fixture = mount(
+      page({ navigations }),
+      () => new Promise((resolve) => (answer = resolve)),
+    );
+    await settle(fixture);
+    for (let i = 0; i < 2; i++) {
+      clearButton(fixture).click();
+      await settle(fixture);
+      expect(status(fixture)).toBe('Clearing navigations…');
+      answer({ ok: true });
+      await settle(fixture);
+      expect(status(fixture)).toBe('Navigations cleared.');
+    }
+  });
+
+  it('is off, with the note, when router actions are turned off', async () => {
+    const calls: string[] = [];
+    const fixture = mount(
+      page({ navigations }),
+      (name) => {
+        calls.push(name);
+        return Promise.resolve(undefined);
+      },
+      { configs: { pangular: { actions: { router: false } } } },
+    );
+    await settle(fixture);
+    const clear = clearButton(fixture);
+    expect(clear.disabled).toBe(true);
+    const note = document.getElementById(clear.getAttribute('aria-describedby')!);
+    expect(note?.textContent).toContain('clearing navigations is turned off');
+    clear.click();
+    await settle(fixture);
+    expect(calls).toEqual([]);
+  });
+});
+
+describe('RouteTimeline Only problems', () => {
+  it('leaves out probes, like the tab badge', async () => {
+    const fixture = mount(
+      page({
+        navigations: [
+          nav(1, '/ok'),
+          nav(2, '/blocked', { outcome: 'cancelled' }),
+          nav(3, '/probed', { outcome: 'cancelled', probe: true }),
+        ],
+      }),
+      () => Promise.resolve(undefined),
+    );
+    await settle(fixture);
+    const onlyProblems = Array.from(
+      el(fixture).querySelectorAll<HTMLInputElement>('input[type=checkbox]'),
+    ).find((input) => input.parentElement?.textContent?.includes('Only problems'))!;
+    onlyProblems.click();
+    await settle(fixture);
+    const urls = Array.from(el(fixture).querySelectorAll('ol.navs > li .head .url')).map((node) =>
+      node.textContent?.trim(),
+    );
+    expect(urls).toEqual(['/blocked']);
+  });
+});

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

@@ -155,7 +155,7 @@ describe('RouteTree row actions', () => {
     expect(probe.disabled).toBe(true);
     expect(probe.getAttribute('aria-describedby')).toBe('route-tree-writes-off');
     expect(hint?.textContent?.trim()).toBe(
-      'Navigating is turned off in the devtools config (actions.router).',
+      'Navigating and clearing navigations is turned off in the devtools config (actions.router).',
     );
     expect(button(fixture, 'Navigate to users/:id').disabled).toBe(true);
     expect(button(fixture, 'Read lazy routes of lazy').disabled).toBe(false);

app/src/pages/route-timeline.ts

@@ -2,6 +2,7 @@ import { Component, computed, input, linkedSignal } from '@angular/core';
 import type { DevframeRpcClient } from 'devframe/client';
 import { actionAllowed, actionBlockedMessage, panelConfig } from '../devtools-config';
 import { LimitNote } from '../ui/limit-note';
+import { rpcCall } from '../rpc';
 import { time } from '../format';
 import {
   SHARED_STYLES,
@@ -54,9 +55,21 @@ const PHASE_COLORS: Record<string, string> = {
         Record each guard and resolver
       </label>
       <button type="button" class="small export" (click)="exportJson()">Export JSON</button>
+      <button
+        type="button"
+        class="small"
+        aria-label="Clear navigations"
+        [disabled]="!navigationAllowed()"
+        [attr.aria-describedby]="navigationAllowed() ? null : 'route-timeline-writes-off'"
+        (click)="clearNavigations()"
+      >
+        Clear
+      </button>
     </div>
+    <!-- Always in the page, so screen readers announce the first message too. -->
+    <p class="visually-hidden" role="status">{{ message() }}</p>
     @if (message()) {
-      <p class="message" role="status">{{ message() }}</p>
+      <p class="message" aria-hidden="true">{{ message() }}</p>
     }
     @if (!navigationAllowed()) {
       <p id="route-timeline-writes-off" class="message">{{ navigationOff }}</p>
@@ -604,12 +617,16 @@ export class RouteTimeline {
           (!needle ||
             nav.url.toLowerCase().includes(needle) ||
             !!nav.finalUrl?.toLowerCase().includes(needle)) &&
-          (!this.onlyProblems() ||
-            !['succeeded', 'pending'].includes(nav.outcome) ||
-            this.loopById().has(nav.id)),
+          (!this.onlyProblems() || this.isProblem(nav)),
       );
   });
 
+  /** Probes cancel on purpose, so they are not problems; the tab badge skips them too. */
+  private isProblem(nav: NavigationRecord) {
+    if (nav.probe) return false;
+    return !['succeeded', 'pending'].includes(nav.outcome) || this.loopById().has(nav.id);
+  }
+
   loopOf(nav: NavigationRecord): NavigationLoop | undefined {
     return this.loopById().get(nav.id);
   }
@@ -753,6 +770,26 @@ export class RouteTimeline {
     }
   }
 
+  /** Drops this page's navigations and loop warnings; focus stays on the Clear button. */
+  async clearNavigations() {
+    const client = this.rpc();
+    const pageId = this.pageId();
+    const clearing = 'Clearing navigations…';
+    // A new message first, so a second clear in a row is announced too.
+    this.message.set(clearing);
+    let text: string;
+    try {
+      if (!client) throw new Error('No connection');
+      await rpcCall(client, 'clear-router-navigations', pageId);
+      text = 'Navigations cleared.';
+    } catch {
+      text = 'Could not clear the navigations.';
+    }
+    // The answer is about the page the user may have left; keep it off the page now shown.
+    if (pageId === this.pageId()) this.message.set(text);
+    else if (this.message() === clearing) this.message.set('');
+  }
+
   exportJson() {
     const blob = new Blob([JSON.stringify(this.page().navigations, null, 2)], {
       type: 'application/json',

apps/docs/src/content/agents/tools.md

@@ -247,7 +247,7 @@ Use `explain-navigation` for "why was I redirected". Pass `perf: true` for "why
 
 The page's result comes back as a JSON block cut at 15,000 characters. A cut result ends with a note saying so.
 
-`action` is required. Only same-origin URLs that start with `/` are accepted. With `actions.router` set to `false`, `navigate`, `abort`, `replay` and `probe` answer **Navigating is turned off in the devtools config (actions.router).** `instrument` and `resolve-lazy` still work. `agent.readOnly` drops the whole tool.
+`action` is required. Only same-origin URLs that start with `/` are accepted. With `actions.router` set to `false`, `navigate`, `abort`, `replay` and `probe` answer **Navigating and clearing navigations is turned off in the devtools config (actions.router).** `instrument` and `resolve-lazy` still work. `agent.readOnly` drops the whole tool.
 
 `waitFor` sets when `navigate` answers:
 

apps/docs/src/content/getting-started/configuration.md

@@ -135,18 +135,18 @@ If you open a tab that is turned off, the panel says so and names the `inspector
 
 Actions are the writes that the panel and agents make to your app or the server.
 
-| Option           | Default | What `false` blocks                                                                                                                                                               |
-| ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `actions.forms`  | `true`  | Form writes: set value, fill, mark touched, untouched, dirty or pristine, touch all, revalidate, reset, enable, disable, submit and restore. Drops `form-action` and `fill-form`. |
-| `actions.router` | `true`  | Navigate, abort, replay and probe. Probe runs your app's `canMatch` guards. The `navigate` agent tool stays for `instrument` and `resolve-lazy` and refuses the other four.       |
-| `actions.ngrx`   | `true`  | Restoring NgRx state from the change log and dispatching `@ngrx/store` actions. Drops the `dispatch-ngrx-action` agent tool.                                                      |
-| `actions.http`   | `true`  | Editing fault injection rules and SSR overrides, and clearing the HTTP timeline. Drops the `set-http-rule` and `remove-http-rule` agent tools.                                    |
-| `actions.analog` | `true`  | The Analog request playground. Drops the `analog-call-api` agent tool.                                                                                                            |
-| `actions`        | `true`  | All of the above.                                                                                                                                                                 |
+| Option           | Default | What `false` blocks                                                                                                                                                                                            |
+| ---------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `actions.forms`  | `true`  | Form writes: set value, fill, mark touched, untouched, dirty or pristine, touch all, revalidate, reset, enable, disable, submit and restore. Drops `form-action` and `fill-form`.                              |
+| `actions.router` | `true`  | Navigate, abort, replay and probe, and clearing the navigations list. Probe runs your app's `canMatch` guards. The `navigate` agent tool stays for `instrument` and `resolve-lazy` and refuses the other four. |
+| `actions.ngrx`   | `true`  | Restoring NgRx state from the change log and dispatching `@ngrx/store` actions. Drops the `dispatch-ngrx-action` agent tool.                                                                                   |
+| `actions.http`   | `true`  | Editing fault injection rules and SSR overrides, and clearing the HTTP timeline. Drops the `set-http-rule` and `remove-http-rule` agent tools.                                                                 |
+| `actions.analog` | `true`  | The Analog request playground. Drops the `analog-call-api` agent tool.                                                                                                                                         |
+| `actions`        | `true`  | All of the above.                                                                                                                                                                                              |
 
 Pass `actions: false` to block every action, or an object to block some. Keys you leave out of the object stay on.
 
-The server refuses a blocked action. The panel disables its controls and shows a note that names the option, for example: **Navigating is turned off in the devtools config (actions.router).**
+The server refuses a blocked action. The panel disables its controls and shows a note that names the option, for example: **Navigating and clearing navigations is turned off in the devtools config (actions.router).**
 
 ### Redaction
 

apps/docs/src/content/inspectors/router.md

@@ -34,7 +34,9 @@ Every navigation as one story:
 - Router warnings, and the cancel or error reason. The tab explains NG04xxx errors.
 - When the navigation error handler redirects, the navigation names the error handler as the cause and keeps the error that triggered it, with its error code.
 
-Filter by URL, or check **Only problems** to keep the navigations that did not succeed and the ones in a loop. Each row has **Replay** and **Copy repro** (a markdown repro). **Replay** is off for a navigation whose URL is redacted or not relative, and a note under the row says why. **Export JSON** saves the list.
+Filter by URL, or check **Only problems** to keep the navigations that did not succeed and the ones in a loop. **Only problems** leaves out the navigations that **Probe in app** cancels, the way the problem count on the **Navigations** tab does. Each row has **Replay** and **Copy repro** (a markdown repro). **Replay** is off for a navigation whose URL is redacted or not relative, and a note under the row says why. **Export JSON** saves the list.
+
+**Clear** empties the list and its loop warnings for the page you are looking at, so you can test a flow from a clean list without reloading the app. Other tabs keep their navigations. A navigation still running stays in the list. With [`actions.router`](../getting-started/configuration.md#actions) set to `false`, **Clear** is off.
 
 ### Loop detection
 
@@ -138,7 +140,7 @@ Without that recording, the guards listed for a navigation are candidates: the `
 
 <ngmd-workflow>
   <ngmd-step title="Open Navigations">
-    Check <strong>Only problems</strong> to hide the navigations that succeeded outside a loop.
+    Check <strong>Only problems</strong> to hide the navigations that succeeded outside a loop, and the probes.
   </ngmd-step>
   <ngmd-step title="Read the story">
     The phase bar shows where it stopped. The guard rows show which guard returned <code>false</code> or a <code>UrlTree</code>.
@@ -232,7 +234,7 @@ The page keeps the last 50 navigations and 50 preloads. Set the navigation count
     No. It runs the real matcher with <code>skipLocationChange</code> and stops after recognition. <code>canActivate</code>, <code>canDeactivate</code> and resolvers do not run. If a <code>canMatch</code> guard or the navigation error handler redirects, the probe stops the redirected navigation too and names its target.
   </ngmd-accordion-item>
   <ngmd-accordion-item title="Why is Probe in app turned off?">
-    The probe runs your app's <code>canMatch</code> guards, so <a href="../getting-started/configuration.md#actions"><code>actions.router</code></a> set to <code>false</code> turns it off, along with <strong>Go</strong>, <strong>Abort</strong> and <strong>Replay</strong>. <strong>Record each guard and resolver</strong> and <strong>Read lazy</strong> stay on.
+    The probe runs your app's <code>canMatch</code> guards, so <a href="../getting-started/configuration.md#actions"><code>actions.router</code></a> set to <code>false</code> turns it off, along with <strong>Go</strong>, <strong>Abort</strong>, <strong>Replay</strong> and <strong>Clear</strong>. <strong>Record each guard and resolver</strong> and <strong>Read lazy</strong> stay on.
   </ngmd-accordion-item>
   <ngmd-accordion-item title="Why is the source table collapsed?">
     The live config is available, so it is the better source. Click <strong>Show table</strong> to open the source list.