import {
  Component,
  DestroyRef,
  ElementRef,
  Injector,
  afterNextRender,
  computed,
  effect,
  inject,
  input,
  linkedSignal,
  signal,
  untracked,
  viewChild,
} from '@angular/core';
import { JsonPipe } from '@angular/common';
import type { DevframeRpcClient } from 'devframe/client';
import { hostPageId } from '../page-id';
import { rpcCall as call } from '../rpc';
import { actionAllowed, actionBlockedMessage, panelConfig } from '../devtools-config';
import {
  CACHE_SKIP_TEXT,
  HTTP_RULE_STATUSES,
  isHttpRuleStatus,
  type CacheSkip,
} from '@pangular-inspector/devtools/internal/config';
import { prettyJson } from '../format';
import { LimitNote } from '../ui/limit-note';
import { AppState } from '../ui/app-state';
import { LiveControls, LiveFeed, followNewest } from '../ui/live-feed';
import { SortHeader, sortRows, type SortState } from '../ui/sort-header';
import { RovingList } from '../ui/roving-list';
import { Select, type SelectOption } from '../ui/select';
import { VirtualWindow } from '../ui/virtual-window';
import { HttpHeadersView } from './http-headers';
import { NetworkWaterfall } from './network-waterfall';
import { SearchField } from '../ui/search-field';
import { CallCopy } from './network/call-copy';
import { CallOriginTag } from './network/call-origin';
import { HarExport } from './network/har-export';
import { HttpLint } from './network/http-lint';
import { PayloadInsights } from './network/payload-insights';
import { RuleMatchCount } from './network/rule-match-count';
import { RulePresets } from './network/rule-presets';
import { presetRules } from '@pangular-inspector/devtools/internal/http-data';
import { rememberSelection } from '../view-memory';
import { RedactionCount } from '../ui/redaction-count';

type HttpSide = 'client' | 'server';

interface HttpRule {
  id: string;
  pattern: string;
  method?: string;
  enabled: boolean;
  target: HttpSide | 'both';
  status?: number;
  delayMs?: number;
  body?: string;
  chance?: number;
}

interface HttpCall {
  id: string;
  url: string;
  method: string;
  status: number;
  durationMs: number;
  side: HttpSide;
  cacheHit: boolean;
  faulted: boolean;
  mocked?: boolean;
  delayMs?: number;
  cancelled?: boolean;
  ruleId?: string;
  rulePattern?: string;
  pageUrl?: string;
  requestId?: string;
  /** The Angular API that likely started the call, from a stack heuristic. */
  origin?: 'httpResource' | 'resource' | 'defer';
  cacheStored?: boolean;
  cacheSkip?: CacheSkip;
  at: number;
  error?: string;
  preview?: string;
  requestHeaders?: Record<string, string>;
  responseHeaders?: Record<string, string>;
}

interface SsrNavigation {
  url: string;
  finalUrl?: string;
  outcome: string;
  reason?: string;
  durationMs?: number;
  guards?: { names: string[]; passed?: boolean; ms?: number };
  resolvers?: { names: string[]; ms?: number };
}

interface SsrRequest {
  id: string;
  method: string;
  url: string;
  status: number;
  at: number;
  durationMs: number;
  renderMs: number;
  bytes: number;
  renderMode: 'server' | 'prerender' | 'client' | 'redirect' | 'not-rendered' | 'unknown';
  fetches: number;
  fetchMs: number;
  headers: Record<string, string>;
  navigations?: SsrNavigation[];
  overrides?: { id: string; kind: SsrOverrideKind; applied: boolean; note?: string }[];
  compressedBeforeTrace?: boolean;
  aborted?: boolean;
}

type SsrOverrideKind = 'render-error' | 'client-render' | 'state-edit';

interface SsrOverride {
  id: string;
  kind: SsrOverrideKind;
  pattern: string;
  enabled: boolean;
  message?: string;
  key?: string;
  value?: string;
}

interface OverrideDraft {
  kind: SsrOverrideKind;
  pattern: string;
  message: string;
  key: string;
  value: string;
}

const EMPTY_OVERRIDE: OverrideDraft = {
  kind: 'render-error',
  pattern: '',
  message: '',
  key: '',
  value: '',
};

const OVERRIDE_LABEL: Record<SsrOverrideKind, string> = {
  'render-error': 'Render error',
  'client-render': 'Client render',
  'state-edit': 'TransferState edit',
};

const RENDER_MODE_LABEL: Record<SsrRequest['renderMode'], string> = {
  server: 'Server',
  prerender: 'Prerender',
  client: 'Client',
  redirect: 'Redirect',
  'not-rendered': 'Not rendered',
  unknown: 'Unknown',
};

interface PayloadEntry {
  key: string;
  http?: { url?: string; status?: number; statusText?: string; responseType?: string };
  source?: 'http' | 'analog' | 'hydration';
  fn?: { id: string; name?: string; file?: string };
  size: number;
  value: unknown;
}

interface HydrationMismatch {
  component: string;
  /** `component` is a class name (`ProductCard`), not a node name (`app-card`). */
  isClass?: boolean;
  expected?: string;
  actual?: string;
}

interface HydrationStats {
  enabled: boolean;
  hydratedComponents?: number;
  hydratedNodes?: number;
  componentsSkippedHydration?: number;
  deferBlocksWithIncrementalHydration?: number;
  nodes?: { hydrated: number; skipped: number; mismatched: number };
  mismatches?: HydrationMismatch[];
  skipHydrationHosts: string[];
  warnings: string[];
  warningsCaptured?: boolean;
  stableMs?: number;
}

interface HttpPayload {
  found: boolean;
  size: number;
  entries: PayloadEntry[];
  error?: string;
  /** Set when the payload came from Refetch, not from the HTML the tab was served with. */
  refetchedAt?: number;
}

interface HttpPage {
  pageId: string;
  url: string;
  initialUrl?: string;
  title: string;
  hydration: HydrationStats | null;
  calls: HttpCall[];
  dropped?: number;
  ssrRequestId?: string;
  firstSeenAt?: number;
  reportedAt: number;
}

interface HttpState {
  serverCalls: HttpCall[];
  serverDropped?: number;
  requests?: SsrRequest[];
  pages: HttpPage[];
  rules: HttpRule[];
  ssrOverrides?: SsrOverride[];
}

interface RuleDraft {
  pattern: string;
  method: string;
  target: HttpRule['target'];
  status: string;
  delayMs: string;
  body: string;
  chance: string;
}

const EMPTY_DRAFT: RuleDraft = {
  pattern: '',
  method: '',
  target: 'both',
  status: '',
  delayMs: '',
  body: '',
  chance: '',
};

/** A new fault rule id, unique enough for one rule list. */
function newRuleId(): string {
  return `r${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`;
}

/** The chance field as a whole percent, null when it is not one from 1 to 99, undefined when empty. */
function chanceOf(text: string): number | null | undefined {
  if (!text.trim()) return undefined;
  const chance = Number(text);
  return Number.isInteger(chance) && chance >= 1 && chance <= 99 ? chance : null;
}

function pathOf(url: string): string {
  try {
    const parsed = new URL(url, 'http://x');
    return parsed.pathname + parsed.search;
  } catch {
    return url;
  }
}

const REDACTED_IN_URL = /\[redacted\]|%5Bredacted%5D/gi;

/**
 * A rule pattern for a recorded call: its path and query, without the origin, so it
 * matches the relative client URL and the absolute SSR URL. A relative URL stays as
 * recorded, since `api/x` never contains `/api/x`. A redacted value becomes `*`,
 * because the real request carries the secret.
 */
function mockPattern(url: string): string {
  const absolute = /^([a-z][a-z\d+.-]*:|\/\/)/i.test(url);
  return (absolute ? pathOf(url) : url).replace(REDACTED_IN_URL, '*');
}

/** The preview as a mock body, when it is complete JSON (the rule form takes JSON only). */
function jsonBody(preview: string): string | null {
  const pretty = prettyJson(preview);
  if (pretty !== null) return pretty;
  try {
    JSON.parse(preview);
    return preview.trim();
  } catch {
    return null;
  }
}

const STANDARD_METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];

/**
 * The path of a page, as an SSR override pattern. The query is left out because the panel only
 * has a redacted copy of it, which would not match the real request.
 */
function pagePath(url: string): string {
  try {
    return new URL(url, 'http://x').pathname;
  } catch {
    return '';
  }
}

/**
 * The page path as a prefilled override pattern. Patterns match anywhere in the URL, so the site
 * root (`/`) would match every page; it is left empty for the user to fill in.
 */
function pagePattern(url: string): string {
  const path = pagePath(url);
  return path === '/' ? '' : path;
}

/** A part the server masked in a payload key, plain or URL-encoded. */
const REDACTED_PART = /\[redacted\]|%5Bredacted%5D/i;

/** The longest TransferState key `set-ssr-overrides` keeps (see `sanitizeSsrOverrides`). */
const MAX_OVERRIDE_KEY = 200;
const MAX_RULES = 50;
const MAX_PATTERN = 500;
const MAX_BODY = 100_000;

const HTTP_STATUS_OPTIONS: SelectOption[] = [
  { value: '', label: 'None' },
  ...HTTP_RULE_STATUSES.map(([status, reason]) => ({
    value: String(status),
    label: `${status} ${reason}`,
  })),
];

@Component({
  selector: 'app-network-inspector',
  imports: [
    AppState,
    LiveControls,
    SortHeader,
    SearchField,
    CallCopy,
    CallOriginTag,
    HarExport,
    JsonPipe,
    HttpHeadersView,
    HttpLint,
    LimitNote,
    NetworkWaterfall,
    PayloadInsights,
    RedactionCount,
    RovingList,
    RuleMatchCount,
    RulePresets,
    Select,
  ],
  template: `
    <p class="page-intro">
      HttpClient calls made while rendering on the server and in the browser, from the live page and
      the devtools server, with hydration stats, the TransferState payload and fault injection.
    </p>
    @if (loading()) {
      <app-state kind="loading">Loading HTTP calls…</app-state>
    } @else if (failed()) {
      <app-state kind="error" (retry)="retry()">
        Could not reach the devtools server.
        <p detail>Check that the app's dev server is running with the devtools plugin.</p>
      </app-state>
    }

    <div class="toolbar" [hidden]="loading()">
      <div class="page-picker">
        <span id="page-picker-label">Page</span>
        <app-select
          labelledBy="page-picker-label"
          emptyText="No connected page"
          placeholder="No connected page"
          [options]="pageOptions()"
          [value]="selected()?.pageId ?? null"
          (valueChange)="selectPage($event)"
        />
      </div>
      <button
        type="button"
        [disabled]="!canWrite()"
        [attr.aria-describedby]="canWrite() ? null : 'http-writes-off'"
        (click)="clearCalls()"
      >
        Clear timeline
      </button>
      <app-har-export
        [calls]="timeline()"
        [ssrRequest]="pageSsrRequest()"
        [title]="selected()?.title ?? ''"
        [pageUrl]="selected()?.url"
        (done)="message.set($event)"
      />
      <p class="message" role="status">{{ message() }}</p>
    </div>

    <div class="grid" [hidden]="loading()">
      <section class="panel wide" aria-labelledby="ssr-heading">
        <h2 id="ssr-heading">SSR requests ({{ requests().length }})</h2>
        @if (requests().length) {
          <div class="table-wrap">
            <table>
              <thead>
                <tr>
                  <th scope="col">Request</th>
                  <th scope="col">Status</th>
                  <th scope="col">Render mode</th>
                  <th scope="col" class="num">Render</th>
                  <th scope="col" class="num">Server calls</th>
                  <th scope="col">Notes</th>
                </tr>
              </thead>
              <tbody appRovingList="button.ssr-row">
                @for (req of requests(); track req.id) {
                  <tr
                    [class.selected]="selectedRequest()?.id === req.id"
                    (click)="selectedRequestId.set(req.id)"
                  >
                    <td class="url">
                      <button
                        type="button"
                        class="link ssr-row"
                        [title]="req.url"
                        [attr.aria-pressed]="selectedRequest()?.id === req.id"
                        aria-controls="ssr-detail"
                      >
                        <span class="method">{{ req.method }}</span> {{ req.url }}
                        <span class="sr-only"
                          >, {{ req.status }}, {{ renderModeLabel(req.renderMode) }}</span
                        >
                      </button>
                    </td>
                    <td
                      class="status"
                      [class.ok]="statusTone(req.status) === 'ok'"
                      [class.redirect]="statusTone(req.status) === 'redirect'"
                      [class.bad]="statusTone(req.status) === 'bad'"
                    >
                      <span class="dot" aria-hidden="true"></span>{{ req.status }}
                    </td>
                    <td>{{ renderModeLabel(req.renderMode) }}</td>
                    <td class="num">{{ req.renderMs }} ms</td>
                    <td class="num">{{ req.fetches }} ({{ req.fetchMs }} ms)</td>
                    <td>
                      <div class="notes">
                        @if (req.id === selected()?.ssrRequestId) {
                          <span class="tag server">this page</span>
                        }
                        @if (req.overrides?.length) {
                          <span class="tag mock">overridden</span>
                        }
                        @if (req.aborted) {
                          <span class="tag fault">aborted</span>
                        }
                      </div>
                    </td>
                  </tr>
                }
              </tbody>
            </table>
          </div>
          @if (selectedRequest(); as req) {
            <div id="ssr-detail" class="preview" role="region" aria-labelledby="ssr-detail-heading">
              <h3 id="ssr-detail-heading">
                {{ req.method }} <code>{{ req.url }}</code>
              </h3>
              <dl class="stats">
                <div>
                  <dt>Request id</dt>
                  <dd>
                    <code>{{ req.id }}</code>
                  </dd>
                </div>
                <div>
                  <dt>Render</dt>
                  <dd>{{ req.renderMs }} ms</dd>
                </div>
                <div>
                  <dt>Total</dt>
                  <dd>{{ req.durationMs }} ms</dd>
                </div>
                <div>
                  <dt>Sent</dt>
                  <dd>{{ req.bytes }} B</dd>
                </div>
                <div>
                  <dt>Browser page</dt>
                  <dd>{{ requestPage()?.title || requestPage()?.url || 'not connected' }}</dd>
                </div>
              </dl>
              @if (compressedWith(req); as encoding) {
                <p class="muted small">
                  The body was already compressed ({{ encoding }}) when
                  <code>ssrMiddleware</code> saw it, so the render mode can't be read and
                  TransferState edits can't apply. Mount <code>ssrMiddleware</code> after
                  <code>compression()</code>.
                </p>
              }
              @if (req.overrides?.length) {
                <h3>Overrides from the panel</h3>
                <p class="muted small">
                  This response was changed on purpose, so it is not what the app sends on its own.
                </p>
                @for (o of req.overrides; track o.id + o.kind) {
                  <p class="request-call">
                    <span class="tag mock">{{ overrideLabel(o.kind) }}</span>
                    <span>{{ o.applied ? 'applied' : 'not applied' }}</span>
                    @if (o.note) {
                      <span class="muted">{{ o.note }}</span>
                    }
                  </p>
                }
              }
              @if (req.navigations?.length) {
                <h3>Router during the render</h3>
                @for (n of req.navigations; track $index) {
                  <dl class="stats nav-stats">
                    <div>
                      <dt>Navigation</dt>
                      <dd>
                        <code>{{ n.url }}</code>
                        @if (n.finalUrl) {
                          to <code>{{ n.finalUrl }}</code>
                        }
                        ({{ n.outcome }})
                      </dd>
                    </div>
                    @if (n.guards) {
                      <div>
                        <dt>Guards</dt>
                        <dd [class.bad]="guardVerdict(n) === 'rejected'">
                          {{ msLabel(n.guards.ms)
                          }}{{ guardVerdict(n) ? ', ' + guardVerdict(n) : '' }}
                        </dd>
                      </div>
                    }
                    @if (n.resolvers) {
                      <div>
                        <dt>Resolvers</dt>
                        <dd>{{ msLabel(n.resolvers.ms) }}</dd>
                      </div>
                    }
                    @if (n.durationMs !== undefined) {
                      <div>
                        <dt>Navigation total</dt>
                        <dd>{{ n.durationMs }} ms</dd>
                      </div>
                    }
                  </dl>
                  @if (n.reason) {
                    <p class="muted small">{{ n.reason }}</p>
                  }
                }
              }
              <h3>Server calls ({{ requestCalls().length }})</h3>
              @for (c of requestCalls(); track c.id) {
                <p class="request-call">
                  <span class="method">{{ c.method }}</span>
                  <span class="preview-url" [title]="c.url">{{ c.url }}</span>
                  <span
                    class="status"
                    [class.ok]="callTone(c) === 'ok'"
                    [class.bad]="callTone(c) === 'bad'"
                    >{{ statusLabel(c) }}</span
                  >
                  <span class="muted">{{ c.durationMs }} ms</span>
                  @if (c.cacheStored) {
                    <span class="tag server">cached</span>
                  } @else if (c.cacheSkip) {
                    <span class="tag" [title]="skipText(c.cacheSkip)">not cached</span>
                  }
                </p>
                @if (!c.cacheStored && c.cacheSkip) {
                  <p class="muted small skip-reason">Not cached: {{ skipText(c.cacheSkip) }}.</p>
                }
              } @empty {
                <p class="muted small">The render made no HttpClient calls.</p>
              }
              @if (refetched().length) {
                <h3>Fetched again in the browser ({{ refetched().length }})</h3>
                <p class="muted small">
                  These calls ran on the server and again after hydration instead of reading the
                  transfer cache.
                </p>
                @for (c of refetched(); track c.id) {
                  <p class="request-call">
                    <span class="method">{{ c.method }}</span>
                    <span class="preview-url" [title]="c.url">{{ c.url }}</span>
                    <span class="tag fault">cache miss</span>
                  </p>
                  @if (refetchReason(c); as why) {
                    <p class="muted small skip-reason">Why: {{ why }}.</p>
                  }
                }
              } @else if (requestPage() && requestCalls().length) {
                <p class="muted small ok-note">No server call ran again in the browser.</p>
              }
            </div>
          }
        } @else {
          <div class="empty">
            <p>No SSR requests traced.</p>
            <p class="muted small">
              Add <code>app.use(devtools.ssrMiddleware)</code> before the Angular handler in
              <code>server.ts</code>, or wrap a web-standard handler with
              <code>withPangularSsr()</code>, then load a server rendered page.
            </p>
          </div>
        }
      </section>

      <section class="panel wide" aria-labelledby="timeline-heading">
        <h2 id="timeline-heading">HTTP timeline ({{ timeline().length }})</h2>
        <app-limit-note
          [dropped]="droppedCalls()"
          [max]="maxCalls()"
          what="HTTP calls"
          limit="httpCalls"
        />
        <div
          class="filters"
          role="group"
          aria-label="Filter the HTTP timeline"
          [class.no-calls]="!timeline().length"
        >
          <app-search-field
            class="search"
            inputId="timeline-search"
            placeholder="Filter by URL or method"
            saveKey="network"
            [(value)]="callQuery"
          />
          <app-select
            class="side-filter"
            ariaLabel="Side"
            [options]="sideOptions"
            [(value)]="sideFilter"
          />
          <label class="inline failed-toggle">
            <input
              type="checkbox"
              [checked]="failedOnly()"
              (change)="failedOnly.set($any($event.target).checked)"
            />
            Failed only
          </label>
          <div class="view-toggle" role="group" aria-label="Timeline view">
            <button
              type="button"
              [attr.aria-pressed]="timelineView() === 'table'"
              (click)="timelineView.set('table')"
            >
              Table
            </button>
            <button
              type="button"
              [attr.aria-pressed]="timelineView() === 'waterfall'"
              (click)="timelineView.set('waterfall')"
            >
              Waterfall
            </button>
          </div>
          <span class="total">{{ countText() }}</span>
          <span class="sr-only" role="status">{{ filterStatus() }}</span>
        </div>
        <div class="live-row">
          <app-live-controls [feed]="callFeed" what="calls" />
        </div>
        @if (visibleCalls().length && timelineView() === 'waterfall') {
          <app-network-waterfall
            [calls]="waterfallCalls()"
            [selectedId]="selectedCall()?.id ?? null"
            (open)="openCall($event)"
          />
        } @else if (visibleCalls().length) {
          @if (callWindow.enabled()) {
            <p class="muted small window-note">
              Rows render as you scroll, so the browser's find only sees the ones near view; the
              search field searches them all.
            </p>
          }
          <div class="table-wrap">
            <table [attr.aria-rowcount]="visibleCalls().length + 1">
              <thead>
                <tr aria-rowindex="1">
                  <th scope="col">Side</th>
                  <th scope="col" appSortHeader="method" [(sort)]="callSort">Method</th>
                  <th scope="col" appSortHeader="url" [(sort)]="callSort">URL</th>
                  <th scope="col">Page</th>
                  <th scope="col" appSortHeader="status" [(sort)]="callSort">Status</th>
                  <th scope="col" class="num" appSortHeader="time" [(sort)]="callSort">Time</th>
                  <th scope="col">Notes</th>
                </tr>
              </thead>
              <tbody #callsBody appRovingList="button[data-call-id]" [rovingWindow]="callWindow">
                @if (callWindow.padTop()) {
                  <tr class="spacer" aria-hidden="true">
                    <td colspan="7" [style.height.px]="callWindow.padTop()"></td>
                  </tr>
                }
                @for (shown of shownCalls(); track shown.entry.side + shown.entry.id) {
                  @let entry = shown.entry;
                  <tr
                    [attr.aria-rowindex]="shown.index + 2"
                    [attr.data-vindex]="shown.index"
                    [class.selected]="selectedCall()?.id === entry.id"
                    (click)="openCall(entry.id)"
                  >
                    <td>
                      <span class="tag" [class.server]="entry.side === 'server'">{{
                        entry.side === 'server' ? 'SSR' : 'Client'
                      }}</span>
                    </td>
                    <td class="method">{{ entry.method }}</td>
                    <td class="url">
                      <button
                        type="button"
                        class="link"
                        [title]="entry.url"
                        [attr.data-call-id]="entry.id"
                        [attr.aria-pressed]="selectedCall()?.id === entry.id"
                        [attr.aria-controls]="selectedCall() ? 'call-preview' : null"
                      >
                        {{ entry.url }}
                      </button>
                    </td>
                    <td class="page-url" [title]="entry.pageUrl ?? ''">
                      {{ entry.pageUrl ?? '' }}
                    </td>
                    <td
                      class="status"
                      [class.ok]="callTone(entry) === 'ok'"
                      [class.redirect]="callTone(entry) === 'redirect'"
                      [class.bad]="callTone(entry) === 'bad'"
                    >
                      <span class="dot" aria-hidden="true"></span>{{ statusLabel(entry) }}
                    </td>
                    <td class="num">{{ entry.durationMs }} ms</td>
                    <td>
                      <div class="notes">
                        @if (entry.origin) {
                          <app-call-origin [origin]="entry.origin" />
                        }
                        @if (entry.cacheHit) {
                          <span class="tag">transfer cache</span>
                        }
                        @if (entry.delayMs) {
                          <span class="tag">delayed {{ entry.delayMs }} ms</span>
                        }
                        @if (entry.mocked) {
                          <span class="tag mock">mocked</span>
                        }
                        @if (entry.faulted) {
                          <span class="tag fault">faulted</span>
                        }
                        @if (rulePatternOf(entry); as pattern) {
                          <span class="tag rule-ref" [title]="'Matched rule: ' + pattern"
                            >rule <code>{{ pattern }}</code></span
                          >
                        }
                      </div>
                    </td>
                  </tr>
                }
                @if (callWindow.padBottom()) {
                  <tr class="spacer" aria-hidden="true">
                    <td colspan="7" [style.height.px]="callWindow.padBottom()"></td>
                  </tr>
                }
              </tbody>
            </table>
          </div>
        } @else if (timeline().length) {
          <div class="empty no-match" role="status">
            <p>No requests match.</p>
            <p class="muted small">
              @if (callQuery().trim()) {
                Nothing matches “{{ callQuery().trim() }}” with these filters.
              } @else {
                None of the {{ timeline().length }} requests fit these filters.
              }
            </p>
            <div class="empty-actions">
              <button type="button" (click)="clearCallFilters()">Clear filters</button>
            </div>
          </div>
        } @else {
          <div class="empty">
            <p>No requests yet.</p>
            <p class="muted small">
              Add <code>withPangular()</code> to <code>provideHttpClient</code>, then load a page of
              the app.
            </p>
          </div>
        }
        @if (selectedCall(); as detail) {
          <div
            id="call-preview"
            class="preview"
            role="region"
            aria-labelledby="preview-heading"
            (keydown.escape)="closePreview()"
          >
            <div class="preview-head">
              <h3 id="preview-heading" tabindex="-1">Response preview</h3>
              <div class="preview-actions">
                @if (!detail.error && detail.preview) {
                  <button
                    type="button"
                    class="ghost"
                    [attr.aria-label]="'Copy the response of ' + detail.method + ' ' + detail.url"
                    (click)="copyPreview(detail)"
                  >
                    Copy
                  </button>
                }
                <app-call-copy [call]="detail" (done)="message.set($event)" />
                <button
                  type="button"
                  class="ghost"
                  aria-controls="rule-form"
                  [disabled]="!canWrite()"
                  [attr.aria-describedby]="canWrite() ? null : 'http-writes-off'"
                  (click)="mockCall(detail)"
                >
                  Mock this request
                </button>
                <button type="button" class="ghost" (click)="closePreview()">Close</button>
              </div>
            </div>
            <p class="preview-meta">
              <span class="method">{{ detail.method }}</span>
              <span
                class="status"
                [class.ok]="callTone(detail) === 'ok'"
                [class.redirect]="callTone(detail) === 'redirect'"
                [class.bad]="callTone(detail) === 'bad'"
                >{{ statusLabel(detail) }}</span
              >
              <span class="preview-url" [title]="detail.url">{{ detail.url }}</span>
            </p>
            @if (rulePatternOf(detail); as pattern) {
              <p class="preview-rule">
                Matched rule <code>{{ pattern }}</code>
              </p>
            }
            <app-redaction-count [value]="detail" />
            <!-- A named region, so the focusable scroll box says what it holds. -->
            <pre
              class="preview-body"
              tabindex="0"
              role="region"
              [attr.aria-label]="detail.error ? 'Response error' : 'Response body'"
              [class.error]="!!detail.error && !detail.cancelled"
              >{{ detail.error ?? previewText(detail) ?? '(no body)' }}</pre>
            <app-http-headers
              [callId]="detail.id"
              [request]="detail.requestHeaders"
              [response]="detail.responseHeaders"
            />
          </div>
        }
      </section>

      <section class="panel wide" aria-labelledby="lint-heading">
        <h2 id="lint-heading">HTTP lint</h2>
        <app-http-lint
          [calls]="selected()?.calls ?? []"
          [serverCalls]="renderServerCalls()"
          (open)="openCall($event)"
        />
      </section>

      <section class="panel" aria-labelledby="rules-heading">
        <h2 id="rules-heading">Fault injection</h2>
        @if (!canWrite()) {
          <p id="http-writes-off" class="muted small">{{ writesOff }}</p>
        }
        <app-rule-presets
          [disabled]="!canWrite()"
          [describedBy]="canWrite() ? '' : 'http-writes-off'"
          (add)="addPreset($event)"
        />
        <form id="rule-form" class="rule-form" (submit)="addRule($event)">
          <label>
            <span
              >URL pattern <span class="hint">(substring or * glob, ^ anchors the path)</span></span
            >
            <input
              id="rule-pattern"
              required
              spellcheck="false"
              autocomplete="off"
              [value]="draft().pattern"
              (input)="patch('pattern', $event)"
              placeholder="e.g. /api/products"
            />
          </label>
          <app-rule-match-count
            [calls]="timeline()"
            [pattern]="draft().pattern"
            [method]="draft().method"
            [target]="draft().target"
          />
          <div class="row">
            <div class="field-group">
              <span id="rule-method-label">Method</span>
              <app-select
                labelledBy="rule-method-label"
                [options]="methodOptions()"
                [value]="draft().method"
                (valueChange)="setDraft('method', $event ?? '')"
              />
            </div>
            <div class="field-group">
              <span id="rule-target-label">Apply on</span>
              <app-select
                labelledBy="rule-target-label"
                [describedBy]="draftMocksOnServer() ? 'rule-ssr-note' : ''"
                [options]="targetOptions"
                [value]="draft().target"
                (valueChange)="setDraft('target', $event ?? 'both')"
              />
            </div>
          </div>
          <div class="row">
            <div class="field-group">
              <span id="rule-status-label">Status</span>
              <app-select
                labelledBy="rule-status-label"
                [describedBy]="draftMocksOnServer() ? 'rule-ssr-note' : ''"
                [options]="statusOptions"
                [value]="draft().status"
                (valueChange)="setDraft('status', $event ?? '')"
              />
            </div>
            <label>
              Delay (ms)
              <input
                type="number"
                inputmode="numeric"
                min="0"
                max="10000"
                placeholder="0"
                [value]="draft().delayMs"
                (input)="patch('delayMs', $event)"
              />
            </label>
          </div>
          <label>
            <span>Chance (%) <span class="hint">(optional, share of matching requests)</span></span>
            <input
              id="rule-chance"
              type="number"
              inputmode="numeric"
              min="1"
              max="99"
              step="1"
              placeholder="100"
              [value]="draft().chance"
              (input)="patch('chance', $event)"
            />
          </label>
          <label>
            <span>Mock JSON body <span class="hint">(optional)</span></span>
            <textarea
              rows="3"
              spellcheck="false"
              [placeholder]="bodyPlaceholder"
              [value]="draft().body"
              (input)="patch('body', $event)"
              [attr.aria-invalid]="bodyError() ? 'true' : null"
              aria-describedby="body-error"
            ></textarea>
          </label>
          <p id="body-error" class="field-error">{{ bodyError() }}</p>
          @if (draftMocksOnServer()) {
            <p id="rule-ssr-note" class="muted small">
              SSR mocks are not transferred to the client: the browser requests the URL again and
              gets the real response unless the rule also applies on the client.
            </p>
          }
          <p id="rule-hint" class="muted small">{{ draftHint() }}</p>
          <div class="form-actions">
            <button
              type="submit"
              [disabled]="!canWrite() || !draftRule()"
              [attr.aria-disabled]="addingRule() || null"
              [attr.aria-describedby]="canWrite() ? 'rule-hint' : 'http-writes-off'"
            >
              Add rule
            </button>
          </div>
        </form>

        <h3 id="rule-list-heading" class="rules-heading" tabindex="-1">
          Rules ({{ rules().length }})
        </h3>
        <ul class="rules">
          @for (rule of rules(); track rule.id) {
            <li [class.off]="!rule.enabled">
              <label class="inline">
                <input
                  type="checkbox"
                  [checked]="rule.enabled"
                  [disabled]="!canWrite()"
                  [attr.aria-describedby]="canWrite() ? null : 'http-writes-off'"
                  (change)="toggleRule(rule.id)"
                  [attr.aria-label]="'Enable rule for ' + rule.pattern"
                />
                <code class="rule-pattern" [title]="rule.pattern"
                  ><span class="rule-method">{{ rule.method || 'ANY' }}</span>
                  {{ rule.pattern }}</code
                >
              </label>
              <button
                type="button"
                class="link remove"
                data-remove-rule
                [disabled]="!canWrite()"
                [attr.aria-describedby]="canWrite() ? null : 'http-writes-off'"
                (click)="removeRule(rule.id)"
                [attr.aria-label]="'Remove rule for ' + rule.pattern"
              >
                Remove
              </button>
              <span class="rule-meta">
                <span>{{ targetLabel(rule.target) }}</span>
                @if (rule.status === undefined) {
                  <span>passthrough</span>
                } @else if (rule.status === 0) {
                  <span class="status bad">network error</span>
                } @else {
                  <span
                    class="status"
                    [class.ok]="statusTone(rule.status) === 'ok'"
                    [class.redirect]="statusTone(rule.status) === 'redirect'"
                    [class.bad]="statusTone(rule.status) === 'bad'"
                    >{{ rule.status }}</span
                  >
                }
                @if (rule.delayMs) {
                  <span>{{ rule.delayMs }} ms</span>
                }
                @if (rule.body) {
                  <span>mock body</span>
                }
                @if (rule.chance) {
                  <span>{{ rule.chance }}% of requests</span>
                }
              </span>
              @if (mocksOnServer(rule)) {
                <p class="rule-note">
                  The SSR mock is not written to TransferState, so the browser requests this URL
                  again.
                </p>
              }
            </li>
          } @empty {
            <li class="empty-rule">No rules. SSR rules apply on the next page load.</li>
          }
        </ul>
      </section>

      <section class="panel" aria-labelledby="overrides-heading">
        <h2 id="overrides-heading">SSR overrides</h2>
        <p class="muted small">
          Development only. These change what the server sends for matching pages, from the next
          full page load, and the request is marked <strong>overridden</strong>.
        </p>
        <form class="rule-form" (submit)="addOverride($event)">
          <div class="field-group">
            <span id="override-kind-label">Override</span>
            <app-select
              labelledBy="override-kind-label"
              [describedBy]="overrideDraft().kind === 'state-edit' ? '' : 'override-kind-help'"
              [options]="overrideKindOptions"
              [value]="overrideDraft().kind"
              (valueChange)="setOverrideDraft('kind', $event ?? 'render-error')"
            />
          </div>
          <label>
            <span
              >Page pattern
              <span class="hint">(substring or * glob, ^ anchors the path)</span></span
            >
            <input
              id="override-pattern"
              required
              spellcheck="false"
              autocomplete="off"
              placeholder="e.g. /examples/ssr"
              [value]="overrideDraft().pattern"
              (input)="patchOverride('pattern', $event)"
            />
          </label>
          @switch (overrideDraft().kind) {
            @case ('render-error') {
              <p id="override-kind-help" class="muted small">
                Throws while the server renders, so it needs <code>providePangularHttp()</code> and
                a page the engine renders. Prerendered files served as static files skip it.
              </p>
              <label>
                Error message
                <input
                  spellcheck="false"
                  placeholder="Simulated render error"
                  aria-describedby="override-kind-help"
                  [value]="overrideDraft().message"
                  (input)="patchOverride('message', $event)"
                />
              </label>
            }
            @case ('state-edit') {
              <label>
                TransferState key
                <input
                  id="override-key"
                  spellcheck="false"
                  autocomplete="off"
                  [value]="overrideDraft().key"
                  (input)="patchOverride('key', $event)"
                />
              </label>
              <label>
                <span>New JSON value <span class="hint">(empty removes the entry)</span></span>
                <textarea
                  id="override-value"
                  rows="3"
                  spellcheck="false"
                  [value]="overrideDraft().value"
                  (input)="patchOverride('value', $event)"
                  [attr.aria-invalid]="overrideValueError() ? 'true' : null"
                  [attr.aria-describedby]="
                    overrideFromPayload()
                      ? 'override-value-error override-value-note'
                      : 'override-value-error'
                  "
                ></textarea>
              </label>
              <p id="override-value-error" class="field-error">{{ overrideValueError() }}</p>
              @if (overrideFromPayload(); as from) {
                <p id="override-value-note" class="muted small">
                  Filled in from the TransferState payload. The value starts empty because the panel
                  only shows a redacted copy, so type the JSON the server should send.
                  @if (from === 'http') {
                    For a cached HTTP response this is the whole cache record, not only the response
                    body.
                  }
                </p>
              }
            }
            @case ('client-render') {
              <p id="override-kind-help" class="muted small">
                Serves <code>index.csr.html</code> instead of rendering. Needs
                <code>browserDistFolder</code> in <code>initPangularHub()</code>.
              </p>
            }
          }
          <div class="form-actions">
            <button
              type="submit"
              [disabled]="!canWrite() || !overrideReady()"
              [attr.aria-disabled]="addingOverride() || null"
              [attr.aria-describedby]="canWrite() ? null : 'http-writes-off'"
            >
              Add override
            </button>
          </div>
        </form>

        <h3 id="override-list-heading" class="rules-heading" tabindex="-1">
          Overrides ({{ overrides().length }})
        </h3>
        <ul class="rules">
          @for (o of overrides(); track o.id) {
            <li [class.off]="!o.enabled">
              <label class="inline">
                <input
                  type="checkbox"
                  [checked]="o.enabled"
                  [disabled]="!canWrite()"
                  (change)="toggleOverride(o.id)"
                  [attr.aria-label]="'Enable ' + overrideLabel(o.kind) + ' for ' + o.pattern"
                />
                <code class="rule-pattern" [title]="o.pattern"
                  ><span class="rule-method">{{ overrideLabel(o.kind) }}</span>
                  {{ o.pattern }}</code
                >
              </label>
              <button
                type="button"
                class="link remove"
                data-remove-override
                [disabled]="!canWrite()"
                (click)="removeOverride(o.id)"
                [attr.aria-label]="'Remove ' + overrideLabel(o.kind) + ' for ' + o.pattern"
              >
                Remove
              </button>
              <span class="rule-meta">
                @if (o.message) {
                  <span>{{ o.message }}</span>
                }
                @if (o.key) {
                  <span>{{ o.value === undefined ? 'remove' : 'set' }} {{ o.key }}</span>
                }
              </span>
            </li>
          } @empty {
            <li class="empty-rule">No overrides.</li>
          }
        </ul>
      </section>

      <section class="panel" aria-labelledby="hydration-heading">
        <h2 id="hydration-heading">Hydration</h2>
        @if (selected()?.hydration; as h) {
          <dl class="stats">
            <div>
              <dt>Enabled</dt>
              <dd>
                <span class="tag" [class.on]="h.enabled" [class.off-tag]="!h.enabled">{{
                  h.enabled ? 'yes' : 'no (client render only)'
                }}</span>
              </dd>
            </div>
            <div>
              <dt>Hydrated components</dt>
              <dd>{{ h.hydratedComponents ?? 'n/a' }}</dd>
            </div>
            <div>
              <dt>Hydrated nodes</dt>
              <dd>{{ h.hydratedNodes ?? 'n/a' }}</dd>
            </div>
            <div>
              <dt>Skipped components</dt>
              <dd>{{ h.componentsSkippedHydration ?? 'n/a' }}</dd>
            </div>
            <div>
              <dt>App stable after</dt>
              <dd>{{ h.stableMs === undefined ? 'n/a' : h.stableMs + ' ms' }}</dd>
            </div>
            <div>
              <dt>Incremental defer blocks</dt>
              <dd>{{ h.deferBlocksWithIncrementalHydration ?? 'n/a' }}</dd>
            </div>
            @if (h.nodes; as n) {
              <div>
                <dt>DOM nodes hydrated</dt>
                <dd>{{ n.hydrated }}</dd>
              </div>
              <div>
                <dt>DOM nodes skipped</dt>
                <dd>{{ n.skipped }}</dd>
              </div>
              <div>
                <dt>Mismatched components</dt>
                <dd [class.bad]="n.mismatched > 0">{{ n.mismatched }}</dd>
              </div>
            }
          </dl>
          @if (h.mismatches?.length) {
            <h3>Mismatches ({{ h.mismatches!.length }})</h3>
            <ul class="plain mismatches">
              @for (m of h.mismatches; track $index) {
                <li>
                  <code>{{ m.isClass ? m.component : '<' + m.component + '>' }}</code>
                  @if (m.expected) {
                    <span class="mismatch-row"
                      ><span class="mismatch-label">Expected</span>
                      <code>{{ m.expected }}</code></span
                    >
                  }
                  @if (m.actual) {
                    <span class="mismatch-row"
                      ><span class="mismatch-label">Actual</span> <code>{{ m.actual }}</code></span
                    >
                  }
                </li>
              }
            </ul>
          }
          @if (h.skipHydrationHosts.length) {
            <h3>ngSkipHydration hosts</h3>
            <ul class="plain">
              @for (host of h.skipHydrationHosts; track $index) {
                <li>
                  <code>{{ host }}</code>
                </li>
              }
            </ul>
          }
          @if (h.warningsCaptured === false) {
            <h3>Warnings</h3>
            <p class="muted small">
              Not captured: add <code>providePangularHttp()</code> to the app providers.
            </p>
          } @else {
            <h3>Warnings ({{ h.warnings.length }})</h3>
            @for (warning of h.warnings; track $index) {
              <pre class="warn">{{ warning }}</pre>
            } @empty {
              <p class="muted small ok-note">No hydration warnings.</p>
            }
          }
        } @else {
          <div class="empty">
            <p>No hydration data for this page.</p>
            <p class="muted small">Open a server rendered page of the app to see its stats.</p>
          </div>
        }
      </section>

      <section class="panel wide" aria-labelledby="payload-heading">
        <h2 id="payload-heading">TransferState payload</h2>
        @if (selected(); as page) {
          <div class="payload-tools">
            <button
              type="button"
              data-refetch-payload
              [disabled]="!canWrite() || refetching()"
              [attr.aria-describedby]="canWrite() ? 'refetch-hint' : 'http-writes-off refetch-hint'"
              (click)="refetchPayload(page.pageId)"
            >
              {{ refetching() ? 'Refetching…' : 'Refetch' }}
            </button>
            <span id="refetch-hint" class="muted small">
              Renders this URL again on the server, with this tab's cookies, and shows the payload
              it sends now. The tab does not reload.
            </span>
          </div>
        }
        @if (selectedPayload(); as payload) {
          @if (!payload.found) {
            <div class="empty">
              <p>No TransferState script: this page was not server rendered.</p>
            </div>
          } @else {
            <p class="muted small summary-line">
              {{ payload.entries.length }} entr{{ payload.entries.length === 1 ? 'y' : 'ies' }},
              {{ payload.size }} bytes
              @if (payload.refetchedAt) {
                <span class="tag" data-refetched>Refetched</span>
              }
            </p>
            @if (payload.error) {
              <p class="bad" role="alert">{{ payload.error }}</p>
            }
            <app-redaction-count [value]="payload.entries" />
            <app-payload-insights [size]="payload.size" [entries]="payload.entries" />
            <div class="entries">
              @for (entry of payload.entries; track entry.key) {
                <details>
                  <summary>
                    <span class="chevron" aria-hidden="true"></span>
                    @if (payloadLabel(entry); as label) {
                      <span class="tag">{{ label }}</span>
                    }
                    @if (entry.http; as http) {
                      <span
                        class="tag"
                        [class.server]="statusTone(http.status) === 'ok'"
                        [class.fault]="statusTone(http.status) === 'bad'"
                        >HTTP {{ http.status }}</span
                      >
                      <span class="entry-key">{{ http.url ?? entry.key }}</span>
                    } @else {
                      <span class="entry-key">{{ entry.key }}</span>
                    }
                    <span class="entry-size">{{ entry.size }} B</span>
                  </summary>
                  <div class="entry-key-row">
                    <span class="entry-key-label">Key</span>
                    <code class="entry-key-text">{{ entry.key }}</code>
                    <div class="entry-actions">
                      <button
                        type="button"
                        class="ghost"
                        [attr.aria-label]="'Copy key ' + entry.key"
                        (click)="copyKey(entry.key)"
                      >
                        Copy
                      </button>
                      @if (canEditEntry(entry)) {
                        <button
                          type="button"
                          class="ghost"
                          [attr.aria-label]="'Edit in SSR overrides, key ' + entry.key"
                          (click)="editEntry(entry)"
                        >
                          Edit in SSR overrides
                        </button>
                      }
                    </div>
                  </div>
                  <!-- Focusable so a long value can be scrolled with the keyboard. -->
                  <pre tabindex="0" role="region" [attr.aria-label]="'Value of ' + entry.key">{{
                    entry.value | json
                  }}</pre>
                </details>
              }
            </div>
          }
        } @else {
          <div class="empty">
            <p>Open a page of the app to see its payload.</p>
          </div>
        }
      </section>
    </div>
  `,
  styles: `
    @use 'mixins' as m;

    .page-intro {
      margin: 0 0 12px;
      color: var(--text-2);
      line-height: 1.5;
    }

    .toolbar[hidden],
    .grid[hidden] {
      display: none;
    }

    :host {
      display: block;
      color: var(--text);
      font-size: 13px;
    }
    .state {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 16px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface);
      color: var(--text-2);
    }
    .state.error {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      @include m.tint(danger);
    }
    .state.error strong {
      font-weight: 600;
    }
    .state.error span {
      color: var(--text);
    }
    .state.error button {
      margin-top: 4px;
    }
    .spinner {
      width: 14px;
      height: 14px;
      border: 2px solid var(--border-strong);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    .toolbar {
      position: sticky;
      top: 0;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
      margin: 0 0 16px;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--surface) 85%, transparent);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .toolbar .page-picker {
      display: flex;
      flex: 0 1 auto;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .page-picker > span {
      @include m.label;
    }
    .toolbar app-select {
      width: 280px;
      max-width: 420px;
    }
    .field-group {
      display: grid;
      gap: 6px;
      min-width: 0;
      color: var(--text-2);
      font-size: 12px;
      font-weight: 500;
    }
    .field-group app-select {
      width: 100%;
    }
    .message {
      flex: 1 1 200px;
      min-width: 0;
      margin: 0;
      color: var(--text-2);
      font-size: 12px;
      text-align: right;
    }
    .message:empty {
      display: none;
    }
    .grid {
      display: grid;
      gap: 16px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .panel {
      @include m.panel;
      @include m.enter;
      min-width: 0;
      padding: 16px;
    }
    .wide {
      grid-column: 1 / -1;
    }
    h2 {
      @include m.label;
      margin: 0 0 16px;
    }
    h3 {
      margin: 16px 0 8px;
      color: var(--text-strong);
      font-size: 12px;
      font-weight: 600;
    }
    p {
      margin: 0;
    }
    label {
      display: grid;
      gap: 6px;
      color: var(--text-2);
      font-size: 12px;
      font-weight: 500;
    }
    label.inline {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      color: var(--text);
      cursor: pointer;
    }
    .hint {
      color: var(--text-3);
      font-weight: 400;
    }
    input,
    select,
    textarea,
    button {
      font: inherit;
      color: var(--text);
    }
    input:not([type='checkbox']),
    select,
    textarea {
      width: 100%;
      min-width: 0;
      padding: 0 10px;
      border: 1px solid var(--control-border);
      border-radius: var(--radius-sm);
      background-color: var(--bg);
      transition:
        border-color 0.2s var(--ease),
        box-shadow 0.2s var(--ease);
    }
    input:not([type='checkbox']),
    select {
      height: 34px;
    }
    select {
      padding-right: 36px;
    }
    textarea {
      padding: 8px 10px;
      font-family: var(--font-mono);
      font-size: 12px;
    }
    input::placeholder,
    textarea::placeholder {
      color: var(--text-3);
    }
    input:not([type='checkbox']):hover,
    select:hover,
    textarea:hover {
      border-color: color-mix(in srgb, var(--control-border) 60%, var(--text-3));
    }
    input:not([type='checkbox']):focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      @include m.field-focus;
    }
    textarea[aria-invalid='true'] {
      border-color: color-mix(in srgb, var(--danger) 60%, transparent);
    }
    input[type='checkbox'] {
      flex: none;
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--accent);
      cursor: pointer;
    }
    button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 34px;
      padding: 0 14px;
      border: 1px solid var(--control-border);
      border-radius: var(--radius-sm);
      background: var(--surface-2);
      font-weight: 500;
      white-space: nowrap;
      cursor: pointer;
      transition:
        background-color 0.2s var(--ease),
        border-color 0.2s var(--ease),
        color 0.2s var(--ease),
        transform 0.1s var(--ease);
    }
    button:hover:not(:disabled) {
      border-color: var(--accent-line);
      background: var(--surface-3);
    }
    button:active:not(:disabled) {
      transform: translateY(1px);
    }
    button[type='submit'] {
      border-color: var(--accent);
      background: var(--accent);
      color: var(--accent-ink);
      font-weight: 600;
    }
    button[type='submit']:hover:not(:disabled) {
      border-color: var(--accent-hover);
      background: var(--accent-hover);
    }
    button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    button.ghost {
      height: 28px;
      padding: 0 10px;
      border-color: transparent;
      background: none;
      color: var(--text-2);
      font-size: 12px;
    }
    button.ghost:hover:not(:disabled) {
      border-color: var(--border-strong);
      background: var(--surface-2);
      color: var(--text);
    }
    button.link {
      display: inline;
      height: auto;
      padding: 0;
      border: none;
      border-radius: 4px;
      background: none;
      color: var(--text);
      text-align: left;
    }
    button.link:hover:not(:disabled) {
      border: none;
      background: none;
      color: var(--accent);
    }
    button.link:active:not(:disabled) {
      transform: none;
    }
    :focus-visible {
      @include m.focus-ring;
    }
    .muted {
      color: var(--text-2);
    }
    .small {
      font-size: 12px;
    }
    .bad {
      color: var(--danger);
    }
    .empty {
      display: grid;
      gap: 4px;
      padding: 24px 16px;
      border: 1px dashed var(--border-strong);
      border-radius: var(--radius-sm);
      color: var(--text);
      text-align: center;
      line-height: 1.5;
    }
    .empty-actions {
      display: flex;
      justify-content: center;
      margin-top: 8px;
    }
    .filters {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
      margin: 0 0 12px;
    }
    .live-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
      margin: -4px 0 12px;
    }
    .search {
      position: relative;
      flex: 1 1 220px;
      min-width: 0;
    }
    .search-icon {
      position: absolute;
      top: 50%;
      left: 12px;
      width: 14px;
      height: 14px;
      transform: translateY(-50%);
      fill: none;
      stroke: var(--text-3);
      stroke-width: 2.2;
      stroke-linecap: round;
      pointer-events: none;
    }
    .search:focus-within .search-icon {
      stroke: var(--accent);
    }
    .filters input[type='search'] {
      height: var(--control-h);
      padding-left: 34px;
    }
    .filters .side-filter {
      flex: 0 0 140px;
    }
    .failed-toggle {
      flex: none;
      height: var(--control-h);
      font-size: 13px;
      font-weight: 500;
    }
    .total {
      flex: none;
      color: var(--text-2);
      font-size: 12px;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    /* "0 of 0" says nothing before the first call; the empty state below explains it. */
    .filters.no-calls .total {
      display: none;
    }
    .table-wrap {
      max-height: min(420px, 60vh);
      overflow: auto;
      margin: 0 -16px;
      padding: 0 16px;
    }
    .table-wrap :focus-visible {
      @include m.focus-ring(-2px);
    }
    thead th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--surface);
    }
    table {
      width: 100%;
      min-width: 560px;
      border-collapse: collapse;
      font-variant-numeric: tabular-nums;
    }
    th,
    td {
      height: 36px;
      padding: 6px 12px;
      border-bottom: 1px solid var(--border);
      text-align: left;
      vertical-align: middle;
      white-space: nowrap;
    }
    th:first-child,
    td:first-child {
      padding-left: 8px;
    }
    th {
      @include m.label;
      height: 32px;
      border-bottom-color: var(--border-strong);
    }
    .num {
      text-align: right;
    }
    td.num {
      color: var(--text-2);
    }
    tbody tr {
      cursor: pointer;
    }
    tbody tr.spacer td {
      padding: 0;
      border: 0;
    }
    .window-note {
      margin: 0 0 6px;
    }
    tbody td {
      transition: background-color 0.15s var(--ease);
    }
    tbody tr:hover td {
      background: var(--surface-2);
    }
    tr.selected td,
    tr.selected:hover td {
      background: var(--accent-soft);
    }
    tr.selected td:first-child {
      box-shadow: inset 2px 0 0 var(--accent);
    }
    .method {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-strong);
    }
    td.url {
      width: 100%;
      max-width: 0;
      font-family: var(--font-mono);
      font-size: 12px;
    }
    td.url button.link {
      display: block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    tr.selected td.url button.link {
      color: var(--text-strong);
    }
    td.page-url {
      max-width: 160px;
      overflow: hidden;
      color: var(--text-2);
      font-family: var(--font-mono);
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .rule-note {
      grid-column: 1 / -1;
      margin: 0;
      padding-left: 24px;
      color: var(--text-2);
      font-size: 12px;
    }
    .mismatches li {
      display: grid;
      gap: 4px;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface-2);
    }
    .mismatch-row {
      display: flex;
      gap: 8px;
      min-width: 0;
      font-size: 12px;
    }
    .mismatch-row code {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .mismatch-label {
      flex: none;
      width: 64px;
      color: var(--text-2);
    }
    .status {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-2);
    }
    .status.ok {
      color: var(--ok);
    }
    .status.bad {
      color: var(--danger);
    }
    .dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      margin-right: 6px;
      border-radius: 50%;
      background: currentColor;
      vertical-align: middle;
    }
    .notes {
      display: flex;
      gap: 4px;
    }
    .tag {
      display: inline-flex;
      align-items: center;
      height: 20px;
      padding: 0 8px;
      border: 1px solid var(--border-strong);
      border-radius: 99px;
      background: var(--surface-3);
      color: var(--text-2);
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
    }
    .tag.server {
      @include m.tint(accent);
    }
    .tag.fault {
      @include m.tint(danger);
    }
    .tag.mock {
      @include m.tint(accent);
    }
    .tag.rule-ref {
      gap: 4px;
      max-width: 220px;
    }
    .tag.rule-ref code {
      @include m.truncate;
      font-family: var(--font-mono);
    }
    .tag.on {
      @include m.tint(ok);
    }
    .tag.off-tag {
      @include m.tint(warn);
    }
    pre {
      margin: 0;
      padding: 10px 12px;
      max-height: 240px;
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--bg);
      color: var(--text-2);
      font: 12px/1.5 var(--font-mono);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    pre + pre {
      margin-top: 8px;
    }
    pre.warn {
      border-color: color-mix(in srgb, var(--warn) 30%, transparent);
      color: var(--warn);
    }
    pre.error {
      border-color: color-mix(in srgb, var(--danger) 30%, transparent);
      color: var(--danger);
    }
    .view-toggle {
      display: inline-flex;
      border: 1px solid var(--control-border);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }
    .view-toggle button {
      height: calc(var(--control-h) - 2px);
      padding: 0 10px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--text-2);
    }
    .view-toggle button + button {
      border-left: 1px solid var(--border-strong);
    }
    .view-toggle button[aria-pressed='true'] {
      background: var(--accent-soft);
      color: var(--text-strong);
    }
    .view-toggle button:focus-visible {
      @include m.focus-ring(-2px);
    }
    .preview {
      @include m.enter(0.2s);
      margin-top: 16px;
    }
    .preview-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 4px 8px;
      margin-bottom: 4px;
    }
    .preview-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    pre.preview-body {
      max-height: 320px;
    }
    .preview-head h3 {
      margin: 0;
    }
    .preview-meta {
      display: flex;
      align-items: baseline;
      gap: 8px;
      min-width: 0;
      margin-bottom: 8px;
    }
    .request-call {
      display: flex;
      align-items: baseline;
      gap: 8px;
      min-width: 0;
      margin: 0 0 4px;
    }
    .request-call .preview-url {
      flex: 1 1 auto;
    }
    .skip-reason {
      margin: 0 0 8px;
    }
    .nav-stats {
      margin-bottom: 8px;
    }
    .preview-rule {
      margin-bottom: 8px;
      color: var(--text-2);
      font-size: 12px;
    }
    .preview-url {
      min-width: 0;
      overflow: hidden;
      color: var(--text-2);
      font-family: var(--font-mono);
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .rule-form {
      display: grid;
      gap: 12px;
    }
    .row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    @media (max-width: 420px) {
      .row {
        grid-template-columns: minmax(0, 1fr);
      }
    }
    .field-error {
      margin-top: -4px;
      color: var(--danger);
      font-size: 12px;
    }
    .field-error:empty {
      display: none;
    }
    .form-actions {
      display: flex;
    }
    .rules-heading {
      margin-top: 24px;
    }
    .rules,
    .plain {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .rules li {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 4px 12px;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface-2);
      transition:
        border-color 0.2s var(--ease),
        opacity 0.2s var(--ease);
    }
    .rules li:hover {
      border-color: var(--border-strong);
    }
    .rules li.off .rule-pattern {
      color: var(--text-2);
      text-decoration: line-through;
    }
    .rules li.off .rule-method,
    .rules li.off .rule-meta,
    .rules li.off .rule-meta .status {
      color: var(--text-3);
    }
    .rules li.empty-rule {
      display: block;
      padding: 16px 12px;
      border-style: dashed;
      border-color: var(--border-strong);
      background: none;
      color: var(--text-2);
      text-align: center;
    }
    .rule-pattern {
      min-width: 0;
      overflow: hidden;
      color: var(--text-strong);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .rule-method {
      color: var(--accent);
      font-weight: 600;
    }
    .rule-meta {
      display: flex;
      flex-wrap: wrap;
      grid-column: 1 / -1;
      gap: 4px 8px;
      padding-left: 24px;
      color: var(--text-2);
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }
    .rule-meta > span + span::before {
      content: '·';
      margin-right: 8px;
      color: var(--text-3);
    }
    .rule-meta .status {
      font-size: 11px;
    }
    .rules button.remove {
      padding: 2px 4px;
      color: var(--text-2);
      font-size: 12px;
    }
    .rules button.remove:hover:not(:disabled) {
      color: var(--danger);
    }
    .plain li {
      overflow-wrap: anywhere;
    }
    code {
      font-family: var(--font-mono);
      font-size: 12px;
    }
    .stats {
      display: grid;
      margin: 0;
    }
    .stats > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 36px;
      padding: 6px 0;
      border-bottom: 1px solid var(--border);
    }
    .stats > div:last-child {
      border-bottom: none;
    }
    dt {
      color: var(--text-2);
    }
    dd {
      margin: 0;
      color: var(--text-strong);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      text-align: right;
    }
    .ok-note {
      color: var(--text-2);
    }
    .summary-line {
      margin-bottom: 8px;
      font-variant-numeric: tabular-nums;
    }
    .payload-tools {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
      margin-bottom: 12px;
    }
    .payload-tools .muted {
      flex: 1 1 240px;
      min-width: 0;
    }
    .entries {
      border-top: 1px solid var(--border);
    }
    details {
      border-bottom: 1px solid var(--border);
    }
    details pre {
      margin: 0 0 12px;
    }
    summary {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 36px;
      padding: 6px 4px;
      border-radius: 4px;
      list-style: none;
      cursor: pointer;
      transition: background-color 0.15s var(--ease);
    }
    summary::-webkit-details-marker {
      display: none;
    }
    summary:hover {
      background: var(--surface-2);
    }
    .chevron {
      flex: none;
      width: 6px;
      height: 6px;
      margin: 0 4px;
      border-right: 1.5px solid var(--text-3);
      border-bottom: 1.5px solid var(--text-3);
      transform: rotate(-45deg);
      transition: transform 0.15s var(--ease);
    }
    details[open] .chevron {
      transform: rotate(45deg);
    }
    .entry-key {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      font-family: var(--font-mono);
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    summary:hover .entry-key {
      color: var(--accent);
    }
    .entry-key-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 8px;
      min-width: 0;
      margin: 0 0 8px;
      padding: 0 4px;
    }
    .entry-key-label {
      @include m.label;
      flex: none;
    }
    .entry-key-text {
      flex: 1 1 200px;
      min-width: 0;
      color: var(--text-strong);
      overflow-wrap: anywhere;
      user-select: text;
    }
    .entry-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .entry-size {
      flex: none;
      color: var(--text-2);
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }
    @media (max-width: 760px) {
      .grid {
        grid-template-columns: minmax(0, 1fr);
      }
      .toolbar .page-picker {
        flex: 1 1 100%;
      }
      .toolbar app-select {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
      }
      .message {
        text-align: left;
      }
    }
  `,
})
export class NetworkInspector {
  readonly rpc = input<DevframeRpcClient | null>(null);
  readonly canWrite = computed(() => actionAllowed(this.rpc(), 'http'));
  protected readonly writesOff = actionBlockedMessage('http');

  readonly loading = signal(false);
  readonly failed = signal(false);
  readonly serverCalls = signal<HttpCall[]>([]);
  readonly pages = signal<HttpPage[]>([]);
  readonly payloads = signal<Record<string, HttpPayload>>({});
  readonly serverDropped = signal(0);
  readonly requests = signal<SsrRequest[]>([]);
  readonly rules = signal<HttpRule[]>([]);
  /** True while an added rule or override is being saved, so Add can't send it twice. */
  readonly addingRule = signal(false);
  readonly addingOverride = signal(false);
  private ruleSaves = Promise.resolve(true);
  private overrideSaves = Promise.resolve(true);
  readonly overrides = signal<SsrOverride[]>([]);
  readonly overrideDraft = signal<OverrideDraft>({ ...EMPTY_OVERRIDE });
  /** Set when the draft came from a TransferState entry, so the form can explain the empty value. */
  readonly overrideFromPayload = signal<'http' | 'other' | null>(null);
  readonly overrideKindOptions: SelectOption<SsrOverrideKind>[] = [
    { value: 'render-error', label: 'Render error' },
    { value: 'client-render', label: 'Force Client render' },
    { value: 'state-edit', label: 'Edit TransferState entry' },
  ];

  readonly overrideValueError = computed(() => {
    const value = this.overrideDraft().value.trim();
    if (!value) return '';
    try {
      JSON.parse(value);
      return '';
    } catch {
      return 'The value must be valid JSON.';
    }
  });

  readonly overrideReady = computed(() => {
    const d = this.overrideDraft();
    if (!d.pattern.trim() || this.overrides().length >= 20) return false;
    if (d.kind === 'state-edit') return !!d.key.trim() && !this.overrideValueError();
    return true;
  });
  private readonly hostPageId = hostPageId();
  readonly selectedPageId = linkedSignal<HttpPage[], string | null>({
    source: () => this.pages(),
    computation: (pages, previous) =>
      previous?.value && pages.some((p) => p.pageId === previous.value)
        ? previous.value
        : (pages.find((p) => p.pageId === this.hostPageId)?.pageId ?? pages[0]?.pageId ?? null),
  });
  readonly selectedCallId = signal<string | null>(null);
  readonly draft = signal<RuleDraft>({ ...EMPTY_DRAFT });
  readonly message = signal('');
  readonly refetching = signal(false);
  readonly bodyPlaceholder = '{ "error": "Service unavailable" }';
  readonly statusOptions = HTTP_STATUS_OPTIONS;

  private unsubscribe: (() => void)[] = [];
  private readonly destroyRef = inject(DestroyRef);
  private readonly injector = inject(Injector);
  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);

  readonly selected = computed(
    () => this.pages().find((p) => p.pageId === this.selectedPageId()) ?? null,
  );

  private readonly pageRequestId = computed(() => this.selected()?.ssrRequestId ?? null);
  readonly selectedRequestId = linkedSignal<string | null>(() => this.pageRequestId());

  readonly selectedPayload = computed(() => {
    const pageId = this.selectedPageId();
    return pageId ? (this.payloads()[pageId] ?? null) : null;
  });

  readonly maxCalls = computed(() => panelConfig(this.rpc()).limits.httpCalls);

  readonly droppedCalls = computed(() => (this.selected()?.dropped ?? 0) + this.serverDropped());

  readonly pageServerCalls = computed(() => {
    const initialUrl = this.selected()?.initialUrl;
    if (!initialUrl) return this.serverCalls();
    return this.serverCalls().filter((c) => !c.pageUrl || c.pageUrl === initialUrl);
  });

  /** The server calls of the SSR request that served the selected page, for the HTTP lint. */
  readonly renderServerCalls = computed(() => {
    const id = this.pageRequestId();
    return id ? this.serverCalls().filter((c) => c.requestId === id) : [];
  });

  /** Every call of the selected page as it arrives, newest first. */
  private readonly liveTimeline = computed(() =>
    [...this.pageServerCalls(), ...(this.selected()?.calls ?? [])].sort((a, b) => b.at - a.at),
  );
  /** Pause holds the timeline as it is while the app keeps calling. */
  readonly callFeed = new LiveFeed<HttpCall>({
    name: 'network',
    source: this.liveTimeline,
    key: (c) => `${c.side}:${c.id}`,
    scope: this.selectedPageId,
  });
  readonly timeline = computed(() => [...this.callFeed.items()]);
  /** The column the call table is sorted by; `null` keeps newest first. */
  readonly callSort = signal<SortState | null>(null);

  readonly callQuery = signal('');
  /** The timeline as a table of every call, or a waterfall of the client calls by navigation. */
  readonly timelineView = signal<'table' | 'waterfall'>('table');
  readonly waterfallCalls = computed(() => this.visibleCalls().filter((c) => c.side === 'client'));
  readonly sideFilter = signal<HttpSide | 'all' | null>('all');
  readonly failedOnly = signal(false);
  readonly sideOptions: SelectOption<HttpSide | 'all'>[] = [
    { value: 'all', label: 'All sides' },
    { value: 'server', label: 'SSR' },
    { value: 'client', label: 'Client' },
  ];

  /** A long call list renders only the rows near view in its scroll box. */
  readonly callWindow = new VirtualWindow({
    count: computed(() => this.visibleCalls().length),
    estimate: 37,
  });
  readonly shownCalls = computed(() => {
    const { start, end } = this.callWindow.range();
    return this.visibleCalls()
      .slice(start, end)
      .map((entry, i) => ({ entry, index: start + i }));
  });
  private readonly callsBody = viewChild<ElementRef<HTMLElement>>('callsBody');

  readonly visibleCalls = computed(() => {
    const query = this.callQuery().trim().toLowerCase();
    const side = this.sideFilter() ?? 'all';
    const failedOnly = this.failedOnly();
    const matching = this.timeline().filter(
      (c) =>
        (side === 'all' || c.side === side) &&
        (!failedOnly || this.isFailed(c)) &&
        (!query ||
          `${c.method} ${c.url}`.toLowerCase().includes(query) ||
          `${c.method} ${pathOf(c.url)}`.toLowerCase().includes(query)),
    );
    return sortRows(matching, this.callSort(), {
      method: (c) => c.method,
      url: (c) => c.url,
      status: (c) => (c.cancelled || !c.status ? undefined : c.status),
      time: (c) => c.durationMs,
    }) as HttpCall[];
  });

  /**
   * The count, announced only when a filter changes. The visible count also changes with every
   * call the app makes, which would make a screen reader talk while the user uses the app.
   */
  /** What the view shows out of every call: the waterfall shows only client calls. */
  readonly countText = computed(() => {
    const total = this.timeline().length;
    if (this.timelineView() !== 'waterfall') return `${this.visibleCalls().length} of ${total}`;
    const client = this.waterfallCalls().length;
    return `${client} client ${client === 1 ? 'call' : 'calls'} of ${total}`;
  });
  readonly filterStatus = computed(() => {
    this.callQuery();
    this.sideFilter();
    this.failedOnly();
    this.timelineView();
    // A filter change that keeps the same counts still gets announced: the text flips a
    // trailing no-break space so the live region sees a change.
    this.filterFlip = !this.filterFlip;
    const text = untracked(() => this.countText());
    return this.filterFlip ? `${text}\u00a0` : text;
  });
  private filterFlip = true;

  /** Follows the visible rows, so the preview hides while filters hide its call. */
  readonly selectedCall = computed(
    () => this.visibleCalls().find((c) => c.id === this.selectedCallId()) ?? null,
  );

  /** The SSR request that served the selected page, for the HAR export. */
  readonly pageSsrRequest = computed(
    () => this.requests().find((r) => r.id === this.pageRequestId()) ?? null,
  );

  readonly selectedRequest = computed(
    () => this.requests().find((r) => r.id === this.selectedRequestId()) ?? null,
  );

  readonly requestCalls = computed(() => {
    const id = this.selectedRequest()?.id;
    return id ? this.serverCalls().filter((c) => c.requestId === id) : [];
  });

  readonly requestPage = computed(() => {
    const id = this.selectedRequest()?.id;
    return id ? (this.pages().find((p) => p.ssrRequestId === id) ?? null) : null;
  });

  readonly refetched = computed(() => {
    const request = this.selectedRequest();
    const page = this.requestPage();
    if (!request || !page) return [];
    const fetched = new Set(
      this.requestCalls()
        .filter((c) => c.status)
        .map((c) => `${c.method} ${pathOf(c.url)}`),
    );
    return page.calls.filter(
      (c) =>
        c.side === 'client' &&
        !c.cacheHit &&
        !c.mocked &&
        c.at >= request.at &&
        fetched.has(`${c.method} ${pathOf(c.url)}`),
    );
  });

  readonly draftMocksOnServer = computed(() => {
    const rule = this.draftRule();
    return !!rule && this.mocksOnServer(rule);
  });

  readonly draftRule = computed<Omit<HttpRule, 'id'> | null>(() => {
    const draft = this.draft();
    const pattern = draft.pattern.trim();
    if (!pattern || pattern.length > MAX_PATTERN || this.bodyError()) return null;
    if (this.rules().length >= MAX_RULES) return null;
    const body = draft.body.trim();
    const delayMs = Math.min(Math.max(Math.round(Number(draft.delayMs)) || 0, 0), 10_000);
    const status = draft.status.trim() ? Number(draft.status) : body ? 200 : undefined;
    if (status !== undefined && !isHttpRuleStatus(status)) return null;
    if (status === undefined && !delayMs) return null;
    const chance = chanceOf(draft.chance);
    if (chance === null) return null;
    return {
      pattern,
      enabled: true,
      target: draft.target,
      ...(draft.method ? { method: draft.method } : {}),
      ...(status !== undefined ? { status } : {}),
      ...(delayMs ? { delayMs } : {}),
      ...(body ? { body } : {}),
      ...(chance !== undefined ? { chance } : {}),
    };
  });

  readonly draftHint = computed(() => {
    const draft = this.draft();
    if (this.rules().length >= MAX_RULES) {
      return `You can add up to ${MAX_RULES} rules. Remove one to add another.`;
    }
    if (!draft.pattern.trim()) return 'Enter a URL pattern to add a rule.';
    if (draft.pattern.trim().length > MAX_PATTERN)
      return `The URL pattern is limited to ${MAX_PATTERN} characters.`;
    if (this.bodyError()) return '';
    if (draft.status.trim() && !isHttpRuleStatus(Number(draft.status)))
      return 'Pick a status from the list.';
    if (chanceOf(draft.chance) === null) return 'Chance is a whole percent from 1 to 99.';
    if (!this.draftRule()) return 'Set a status, a delay or a mock body.';
    if (!draft.status.trim() && draft.body.trim())
      return 'With no status, the mock body returns 200.';
    return '';
  });

  readonly bodyError = computed(() => {
    const body = this.draft().body.trim();
    if (!body) return '';
    if (body.length > MAX_BODY) return `The mock body is limited to ${MAX_BODY} characters.`;
    try {
      JSON.parse(body);
      return '';
    } catch {
      return 'The mock body must be valid JSON.';
    }
  });

  constructor() {
    rememberSelection('network', this.selectedCallId);
    // Newest first, so following the newest call keeps the table scrolled to the top.
    followNewest(this.callFeed, () => {
      if (this.callSort()) return;
      // The SSR requests table comes first and has a .table-wrap too.
      const wrap = this.callsBody()?.nativeElement.closest<HTMLElement>('.table-wrap');
      if (wrap) wrap.scrollTop = 0;
    });
    effect(() => {
      const body = this.callsBody()?.nativeElement;
      if (body) this.callWindow.attach(body);
    });
    effect(() => {
      const client = this.rpc();
      if (client) this.load(client);
    });
    this.destroyRef.onDestroy(() => this.stopListening());
  }

  async load(client: DevframeRpcClient) {
    this.loading.set(true);
    this.failed.set(false);
    try {
      const rpc = client.scope('pangular').rpc;
      const [state, payloads] = await Promise.all([
        rpc.sharedState('http'),
        rpc.sharedState('http-payloads'),
      ]);
      if (this.destroyRef.destroyed) return;
      const apply = (value: unknown) => {
        const snapshot = value as HttpState | undefined;
        this.serverCalls.set(snapshot?.serverCalls ?? []);
        this.serverDropped.set(snapshot?.serverDropped ?? 0);
        this.requests.set([...(snapshot?.requests ?? [])].reverse());
        this.pages.set(snapshot?.pages ?? []);
        this.rules.set(snapshot?.rules ?? []);
        this.overrides.set(snapshot?.ssrOverrides ?? []);
      };
      const applyPayloads = (value: unknown) =>
        this.payloads.set(
          (value as { pages?: Record<string, HttpPayload> } | undefined)?.pages ?? {},
        );
      apply(state.value());
      applyPayloads(payloads.value());
      this.stopListening();
      this.unsubscribe = [state.on('updated', apply), payloads.on('updated', applyPayloads)];
    } catch {
      this.failed.set(true);
    } finally {
      this.loading.set(false);
    }
  }

  retry() {
    const client = this.rpc();
    if (client) void this.load(client);
  }

  /** A guard that returns a UrlTree reports shouldActivate false, so a redirect is not a rejection. */
  guardVerdict(nav: SsrNavigation): 'redirected' | 'rejected' | '' {
    if (nav.guards?.passed !== false) return '';
    return nav.outcome === 'redirected' ? 'redirected' : 'rejected';
  }

  msLabel(ms: number | undefined): string {
    return ms === undefined ? 'n/a' : `${ms} ms`;
  }

  skipText(skip: CacheSkip): string {
    return CACHE_SKIP_TEXT[skip] ?? '';
  }

  refetchReason(call: HttpCall): string {
    const key = `${call.method} ${pathOf(call.url)}`;
    const matches = this.requestCalls().filter((c) => `${c.method} ${pathOf(c.url)}` === key);
    const first = matches[0];
    // Several matching server calls with different outcomes can't be paired, so name no reason.
    return first?.cacheSkip && matches.every((c) => c.cacheSkip === first.cacheSkip)
      ? this.skipText(first.cacheSkip)
      : '';
  }

  /** The response encoding when a compression middleware ran before `ssrMiddleware` saw the body. */
  compressedWith(req: SsrRequest): string | undefined {
    // The final Content-Encoding is also set when compression runs after ssrMiddleware, as it should.
    if (!req.compressedBeforeTrace) return undefined;
    return req.headers['content-encoding'] ?? 'unknown encoding';
  }

  renderModeLabel(mode: SsrRequest['renderMode']): string {
    return RENDER_MODE_LABEL[mode] ?? 'Unknown';
  }

  statusLabel(call: HttpCall): string {
    if (call.cancelled) return 'cancelled';
    return call.status ? String(call.status) : 'ERR';
  }

  callTone(call: HttpCall): 'ok' | 'redirect' | 'bad' | 'neutral' {
    return call.cancelled ? 'neutral' : this.statusTone(call.status);
  }

  /** A failed call has a status of 400 or more, no status (ERR) or was cancelled. */
  isFailed(call: HttpCall): boolean {
    return !!call.cancelled || !call.status || call.status >= 400;
  }

  clearCallFilters() {
    this.callQuery.set('');
    this.sideFilter.set('all');
    this.failedOnly.set(false);
    this.host.nativeElement.querySelector<HTMLInputElement>('#timeline-search')?.focus();
  }

  rulePatternOf(call: HttpCall): string | null {
    if (call.rulePattern) return call.rulePattern;
    if (!call.ruleId) return null;
    return this.rules().find((rule) => rule.id === call.ruleId)?.pattern ?? null;
  }

  openCall(id: string) {
    this.selectedCallId.set(id);
    afterNextRender(
      () => this.host.nativeElement.querySelector<HTMLElement>('#preview-heading')?.focus(),
      { injector: this.injector },
    );
  }

  /** The preview as shown: JSON indented by 2 spaces, other text as recorded (both already redacted). */
  previewText(call: HttpCall): string | undefined {
    if (call.preview === undefined) return undefined;
    return prettyJson(call.preview) ?? call.preview;
  }

  async copyPreview(call: HttpCall) {
    const text = this.previewText(call);
    if (!text) return;
    try {
      await navigator.clipboard.writeText(text);
      this.message.set('Copied.');
    } catch {
      this.message.set('The clipboard is not available here.');
    }
  }

  /** Fills the fault rule form from a recorded call and moves focus to it. Nothing is saved. */
  mockCall(call: HttpCall) {
    const method = call.method.toUpperCase();
    const pattern = mockPattern(call.url);
    const body = call.error || !call.preview ? null : jsonBody(call.preview);
    this.draft.set({ ...EMPTY_DRAFT, pattern, method, body: body ?? '' });
    const what = `${method} ${pattern}`;
    this.message.set(
      body
        ? `Filled in a rule for ${what} with the preview as its body. Check it, then add the rule.`
        : call.preview && !call.error
          ? `Filled in a rule for ${what}. The preview is not complete JSON, so it is not used as the body.`
          : `Filled in a rule for ${what}. Set a status, a delay or a body, then add the rule.`,
    );
    afterNextRender(
      () => this.host.nativeElement.querySelector<HTMLInputElement>('#rule-pattern')?.focus(),
      { injector: this.injector },
    );
  }

  closePreview() {
    const id = this.selectedCallId();
    this.selectedCallId.set(null);
    if (!id) return;
    const buttons = this.host.nativeElement.querySelectorAll<HTMLElement>('button[data-call-id]');
    [...buttons].find((button) => button.dataset['callId'] === id)?.focus();
  }

  private stopListening() {
    for (const stop of this.unsubscribe.splice(0)) stop();
  }

  statusTone(status: number | undefined): 'ok' | 'redirect' | 'bad' | 'neutral' {
    if (status === undefined) return 'neutral';
    if (status === 0 || status >= 400) return 'bad';
    if (status >= 300) return 'redirect';
    if (status >= 200) return 'ok';
    return 'neutral';
  }

  mocksOnServer(rule: Pick<HttpRule, 'target' | 'status'>): boolean {
    return (
      rule.target !== 'client' && rule.status !== undefined && rule.status > 0 && rule.status < 400
    );
  }

  payloadLabel(entry: PayloadEntry): string | null {
    if (entry.source === 'hydration') return 'hydration annotations';
    if (entry.fn) return `Analog server function ${entry.fn.name ?? entry.fn.id}`;
    if (entry.source === 'analog') return 'Analog';
    return null;
  }

  targetLabel(target: HttpRule['target']): string {
    return target === 'both' ? 'SSR + client' : target === 'server' ? 'SSR only' : 'Client only';
  }

  readonly pageOptions = computed<SelectOption[]>(() =>
    this.pages().map((page) => ({ value: page.pageId, label: page.title || page.url })),
  );

  /** The usual methods, plus the draft's own when "Mock this request" filled in another one. */
  readonly methodOptions = computed<SelectOption[]>(() => {
    const draft = this.draft().method;
    const methods =
      draft && !STANDARD_METHODS.includes(draft) ? [...STANDARD_METHODS, draft] : STANDARD_METHODS;
    return [{ value: '', label: 'Any' }, ...methods.map((m) => ({ value: m, label: m }))];
  });

  readonly targetOptions: SelectOption<HttpRule['target']>[] = [
    { value: 'both', label: 'SSR + client' },
    { value: 'server', label: 'SSR only' },
    { value: 'client', label: 'Client only' },
  ];

  selectPage(pageId: string | null) {
    if (pageId) this.selectedPageId.set(pageId);
    this.selectedCallId.set(null);
    this.overrideFromPayload.set(null);
  }

  setDraft<K extends keyof RuleDraft>(key: K, value: RuleDraft[K]) {
    this.draft.update((draft) => ({ ...draft, [key]: value }));
  }

  patch(key: keyof RuleDraft, event: Event) {
    const value = (event.target as HTMLInputElement).value;
    this.draft.update((draft) => ({ ...draft, [key]: value }));
  }

  async addRule(event: Event) {
    event.preventDefault();
    const draft = this.draftRule();
    if (!draft || this.addingRule()) return;
    const rule: HttpRule = { id: newRuleId(), ...draft };
    this.addingRule.set(true);
    const added = await this.saveRules((rules) => [[...rules, rule], rule], 'Rule added.');
    this.addingRule.set(false);
    if (added) {
      this.draft.set({ ...EMPTY_DRAFT });
      this.host.nativeElement.querySelector<HTMLInputElement>('#rule-pattern')?.focus();
    }
  }

  /** Adds the rules of a built-in preset after the current ones. */
  async addPreset(id: string) {
    const added = presetRules(id, newRuleId);
    if (!added.length) return;
    if (this.rules().length + added.length > MAX_RULES) {
      this.message.set(`You can add up to ${MAX_RULES} rules. Remove one to add the preset.`);
      return;
    }
    await this.saveRules(
      (rules) => [[...rules, ...added], added[0]],
      `Added ${added.length === 1 ? 'a rule' : `${added.length} rules`} for every browser request.`,
    );
  }

  toggleRule(id: string) {
    void this.saveRules((rules) => {
      const rule = rules.find((r) => r.id === id);
      if (!rule) return null;
      return [rules.map((r) => (r.id === id ? { ...r, enabled: !r.enabled } : r)), rule];
    }, 'Rule updated.');
  }

  async removeRule(id: string) {
    let index = -1;
    const removed = await this.saveRules((rules) => {
      index = rules.findIndex((r) => r.id === id);
      return index < 0 ? null : [rules.filter((r) => r.id !== id), rules[index]];
    }, 'Rule removed.');
    if (removed) this.focusAfterRemove('[data-remove-rule]', index, '#rule-list-heading');
  }

  async clearCalls() {
    try {
      await call(this.rpc(), 'clear-http-calls');
      this.selectedCallId.set(null);
      this.message.set('Timeline cleared.');
    } catch {
      this.message.set('Could not clear the timeline.');
    }
  }

  overrideLabel(kind: SsrOverrideKind): string {
    return OVERRIDE_LABEL[kind] ?? kind;
  }

  setOverrideDraft<K extends keyof OverrideDraft>(key: K, value: OverrideDraft[K]) {
    this.overrideDraft.update((d) => ({ ...d, [key]: value }));
    // The "filled in from the payload" note only describes the entry the form was filled from.
    if (key === 'kind' && value !== 'state-edit') this.overrideFromPayload.set(null);
  }

  patchOverride(key: keyof OverrideDraft, event: Event) {
    const value = (event.target as HTMLInputElement).value;
    this.overrideDraft.update((d) => ({ ...d, [key]: value }));
    if (key === 'key') this.overrideFromPayload.set(null);
  }

  async copyKey(key: string) {
    try {
      await navigator.clipboard.writeText(key);
      this.message.set('Copied.');
    } catch {
      this.message.set('The clipboard is not available here.');
    }
  }

  /**
   * The edit needs HTTP writes and a key the server keeps exactly: it trims keys and drops longer
   * ones than it accepts. A key with a redacted part can never match the real one.
   */
  canEditEntry(entry: PayloadEntry): boolean {
    const { key } = entry;
    return (
      this.canWrite() &&
      !!key &&
      key === key.trim() &&
      key.length <= MAX_OVERRIDE_KEY &&
      !REDACTED_PART.test(key)
    );
  }

  /**
   * Opens the SSR overrides form as a TransferState edit for this entry. The value stays empty:
   * the payload the panel holds is redacted and clipped, so copying it would write masks back.
   */
  editEntry(entry: PayloadEntry) {
    if (!this.canEditEntry(entry)) return;
    const page = this.selected();
    this.overrideDraft.set({
      ...EMPTY_OVERRIDE,
      kind: 'state-edit',
      pattern: page ? pagePattern(page.initialUrl ?? page.url) : '',
      key: entry.key,
    });
    this.overrideFromPayload.set(entry.http ? 'http' : 'other');
    this.message.set('Editing the TransferState entry in SSR overrides.');
    afterNextRender(
      () => {
        const host = this.host.nativeElement;
        const target = host.querySelector<HTMLElement>(
          this.overrideDraft().pattern ? '#override-value' : '#override-pattern',
        );
        target?.scrollIntoView?.({ block: 'center' });
        target?.focus();
      },
      { injector: this.injector },
    );
  }

  async addOverride(event: Event) {
    event.preventDefault();
    if (!this.overrideReady() || this.addingOverride()) return;
    const d = this.overrideDraft();
    const next: SsrOverride = {
      id: `o${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`,
      kind: d.kind,
      pattern: d.pattern.trim(),
      enabled: true,
      ...(d.kind === 'render-error' && d.message.trim() ? { message: d.message.trim() } : {}),
      ...(d.kind === 'state-edit' ? { key: d.key.trim() } : {}),
      ...(d.kind === 'state-edit' && d.value.trim() ? { value: d.value.trim() } : {}),
    };
    this.addingOverride.set(true);
    const added = await this.saveOverrides(
      (overrides) => [...overrides, next],
      'Override added. Reload the page.',
    );
    this.addingOverride.set(false);
    if (added) {
      this.overrideDraft.set({ ...EMPTY_OVERRIDE, kind: d.kind });
      this.overrideFromPayload.set(null);
      this.host.nativeElement.querySelector<HTMLInputElement>('#override-pattern')?.focus();
    }
  }

  toggleOverride(id: string) {
    void this.saveOverrides(
      (overrides) =>
        overrides.some((o) => o.id === id)
          ? overrides.map((o) => (o.id === id ? { ...o, enabled: !o.enabled } : o))
          : null,
      'Override updated. Reload the page.',
    );
  }

  async removeOverride(id: string) {
    let index = -1;
    const removed = await this.saveOverrides((overrides) => {
      index = overrides.findIndex((o) => o.id === id);
      return index < 0 ? null : overrides.filter((o) => o.id !== id);
    }, 'Override removed.');
    if (removed) {
      this.focusAfterRemove('[data-remove-override]', index, '#override-list-heading');
    }
  }

  /**
   * The removed row's button is gone, so focus moves to the Remove button that took its place,
   * the one before it when the last row went, or the list heading when the list is empty.
   */
  private focusAfterRemove(buttons: string, index: number, heading: string) {
    afterNextRender(
      () => {
        const host = this.host.nativeElement;
        const remaining = host.querySelectorAll<HTMLElement>(buttons);
        const next = remaining[Math.min(index, remaining.length - 1)];
        (next ?? host.querySelector<HTMLElement>(heading))?.focus();
      },
      { injector: this.injector },
    );
  }

  /** Asks the page to render its URL again on the server and push the payload it gets. */
  async refetchPayload(pageId: string) {
    if (this.refetching()) return;
    this.refetching.set(true);
    try {
      const result = (await call(this.rpc(), 'request-http-payload-refetch', { pageId })) as
        { error?: string; found?: boolean; entries?: number; status?: number } | null | undefined;
      if (!result) this.announce('Could not reach the devtools server.');
      else if (result.error) this.announce(result.error);
      else if (!result.found) {
        this.announce(`The server answered ${result.status} without a TransferState payload.`);
      } else {
        const count = result.entries ?? 0;
        this.announce(`Refetched: ${count} entr${count === 1 ? 'y' : 'ies'}.`);
      }
    } catch {
      this.announce('Could not refetch the payload.');
    } finally {
      this.refetching.set(false);
    }
  }

  /** Clears a repeated message first, so the live region speaks again for the same text. */
  private announce(text: string) {
    if (this.message() !== text) {
      this.message.set(text);
      return;
    }
    this.message.set('');
    // A newer message set before the render wins over this restore.
    afterNextRender(
      () => {
        if (this.message() === '') this.message.set(text);
      },
      { injector: this.injector },
    );
  }

  /**
   * Saves run one after another, and each change is applied to the list the previous save left,
   * so two quick changes never start from the same old list. `change` returns null when its
   * override is gone by then.
   */
  private saveOverrides(
    change: (overrides: SsrOverride[]) => SsrOverride[] | null,
    done: string,
  ): Promise<boolean> {
    const save = this.overrideSaves.then(async () => {
      const next = change(this.overrides());
      if (!next) return false;
      try {
        const saved = await call(this.rpc(), 'set-ssr-overrides', next);
        this.overrides.set(Array.isArray(saved) ? (saved as SsrOverride[]) : next);
        this.announce(done);
        return true;
      } catch {
        this.message.set('Could not save the overrides.');
        return false;
      }
    });
    this.overrideSaves = save;
    return save;
  }

  /** Like `saveOverrides`; `change` also returns the rule it changed, for the message. */
  private saveRules(
    change: (rules: HttpRule[]) => [HttpRule[], HttpRule] | null,
    done: string,
  ): Promise<boolean> {
    const save = this.ruleSaves.then(async () => {
      const next = change(this.rules());
      if (!next) return false;
      const [rules, changed] = next;
      try {
        const saved = await call(this.rpc(), 'set-http-rules', rules);
        this.rules.set(Array.isArray(saved) ? (saved as HttpRule[]) : rules);
        this.announce(
          changed.target === 'client' ? done : `${done} Reload the page to apply it to SSR.`,
        );
        return true;
      } catch {
        this.message.set('Could not save the rules.');
        return false;
      }
    });
    this.ruleSaves = save;
    return save;
  }
}