feat(http): add SSR overrides and time until the app is stable (#242)

* feat(http): add SSR overrides and time until the app is stable

Issue #32 asked for ways to change server responses on purpose, and for
the time until the page is interactive. Neither existed.

Add dev-only SSR overrides, set from a new section of the SSR & HTTP tab
and kept in the server's memory behind actions.http:

- Render error throws while the server renders a matching page, from
  providePangularHttp(), so the user sees the server's real error path.
- Force Client render serves index.csr.html from ssrMiddleware instead of
  rendering, when initPangularHub() gets browserDistFolder.
- Edit TransferState sets or removes an entry of the {appId}-state script
  before the HTML is sent, escaped the way Angular writes it.

Each traced request lists the overrides that matched and what they did, is
marked overridden in the panel, and explain-ssr-request says so. The
overlay also reports when the app first became stable, measured from
navigation start, as App stable after.

Refs #32

* feat(demo): pass browserDistFolder so SSR overrides can force a Client render

The Force Client render override serves index.csr.html, which the hub can only find when it knows the browser build folder. Pass it in server.ts so the demo can show the override.

Refs #32

* docs(docs): document SSR overrides and time until stable

Refs #32

* fixup! feat(http): add SSR overrides and time until the app is stable

Author: santoshyadavdev

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

@@ -0,0 +1,79 @@
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+const calls: { name: string; args: unknown[] }[] = [];
+vi.mock('../rpc', () => ({
+  rpcCall: async (_rpc: unknown, name: string, ...args: unknown[]) => {
+    calls.push({ name, args });
+    return args[0];
+  },
+}));
+
+const { NetworkInspector } = await import('../pages/network-inspector');
+
+let fixture: ComponentFixture<InstanceType<typeof NetworkInspector>>;
+
+describe('NetworkInspector SSR overrides', () => {
+  afterEach(() => {
+    calls.length = 0;
+    fixture?.destroy();
+    TestBed.resetTestingModule();
+  });
+
+  it('adds a TransferState edit only with a key and valid JSON', async () => {
+    fixture = TestBed.createComponent(NetworkInspector);
+    const inspector = fixture.componentInstance;
+    await fixture.whenStable();
+    inspector.setOverrideDraft('kind', 'state-edit');
+    inspector.setOverrideDraft('pattern', '/examples/ssr');
+    expect(inspector.overrideReady()).toBe(false);
+    inspector.setOverrideDraft('key', 'abc');
+    inspector.setOverrideDraft('value', '{bad');
+    expect(inspector.overrideValueError()).toBe('The value must be valid JSON.');
+    expect(inspector.overrideReady()).toBe(false);
+    inspector.setOverrideDraft('value', '{"b":2}');
+    await inspector.addOverride(new Event('submit'));
+    expect(calls[0].name).toBe('set-ssr-overrides');
+    expect(calls[0].args[0]).toEqual([
+      expect.objectContaining({
+        kind: 'state-edit',
+        pattern: '/examples/ssr',
+        key: 'abc',
+        value: '{"b":2}',
+      }),
+    ]);
+    expect(inspector.overrides()).toHaveLength(1);
+  });
+
+  it('marks an overridden request and lists what was applied', async () => {
+    fixture = TestBed.createComponent(NetworkInspector);
+    const inspector = fixture.componentInstance;
+    inspector.requests.set([
+      {
+        id: 'r1',
+        method: 'GET',
+        url: '/examples/ssr',
+        status: 200,
+        at: 1,
+        durationMs: 1,
+        renderMs: 1,
+        bytes: 1,
+        renderMode: 'client',
+        fetches: 0,
+        fetchMs: 0,
+        headers: {},
+        overrides: [
+          { id: 'o1', kind: 'client-render', applied: true, note: 'served index.csr.html' },
+        ],
+      },
+    ]);
+    inspector.selectedRequestId.set('r1');
+    await fixture.whenStable();
+    const host = fixture.nativeElement as HTMLElement;
+    expect(host.querySelector('tbody .tag.mock')!.textContent).toBe('overridden');
+    const detail = host.querySelector('#ssr-detail')!.textContent!;
+    expect(detail).toContain('Overrides from the panel');
+    expect(detail).toContain('Client render');
+    expect(detail).toContain('served index.csr.html');
+  });
+});