@ethlete/components 1.0.0-next.34 → 1.0.0-next.35

package/fesm2022/ethlete-components.mjs

@@ -9,7 +9,7 @@ import { takeUntilDestroyed, toObservable, toSignal, outputFromObservable, outpu
 import { Subject, take, tap, timer, takeUntil, fromEvent, filter, combineLatest, switchMap, map, distinctUntilChanged, EMPTY, debounceTime, merge, defer, finalize, of, isObservable, from, catchError, concat, scan, interval, animationFrameScheduler, EmptyError, exhaustMap, Observable, shareReplay, defaultIfEmpty, expand, toArray } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import { Router, RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
-import { withArgs, queryStateSignal, isQueryStateSuccess, isQueryStateFailure, isQueryStateLoading, queryComputed, queryDevtoolsEntries, createQueryErrorResponse, parseHttpErrorCodeToMessageEn, parseHttpErrorCodeToTitleEn, parseHttpErrorCodeToMessageDe, parseHttpErrorCodeToTitleDe, queryErrorMessages, extractQuery } from '@ethlete/query';
+import { withArgs, queryStateSignal, isQueryStateSuccess, isQueryStateFailure, isQueryStateLoading, queryComputed, queryDevtoolsEntries, queryDevtoolsFaults, EMPTY_QUERY_DEVTOOLS_FAULT, isQueryDevtoolsFaultArmed, QUERY_DEVTOOLS_FAULT_STATUSES, clearQueryDevtoolsFaults, createQueryErrorResponse, setQueryDevtoolsFault, sumQueryDevtoolsStats, parseHttpErrorCodeToMessageEn, parseHttpErrorCodeToTitleEn, parseHttpErrorCodeToMessageDe, parseHttpErrorCodeToTitleDe, queryErrorMessages, extractQuery } from '@ethlete/query';
 import { createManagedMetadataKey, metadata, validate, FORM_FIELD, form } from '@angular/forms/signals';
 import { tap as tap$1 } from 'rxjs/operators';
 import { HttpErrorResponse } from '@angular/common/http';
@@ -27316,12 +27316,14 @@ class InputDirective extends TextFieldControlDirective {
          * split in its own `(input)` handler), it suppresses ours so the two can't clobber each other.
          */
         this.nativeSyncSuppressed = false;
-        this.hasValue = computed(() => this.mixed() || this.value().length > 0, /* @ts-ignore */
+        // A bound field may hold `null` for "empty" (a nullable string field, e.g. the query form's
+        // search field), so neither of these may assume a string is there.
+        this.hasValue = computed(() => this.mixed() || !!this.value(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
         this.controlType = signal(FORM_FIELD_CONTROL_TYPES.TEXT_INPUT, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "controlType" }] : /* istanbul ignore next */ []));
         /** The text the native input renders - empty while mixed so the raw value never reaches the DOM. */
-        this.displayValue = computed(() => (this.mixed() ? '' : this.value()), /* @ts-ignore */
+        this.displayValue = computed(() => (this.mixed() ? '' : (this.value() ?? '')), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
         /** The placeholder the native input renders - `mixedLabel` overrides the consumer placeholder while mixed. */
         this.effectivePlaceholder = computed(() => (this.mixed() ? this.resolvedMixedLabel() : this.placeholder()), /* @ts-ignore */
@@ -30519,7 +30521,7 @@ const RICH_TEXT_EDITOR_TOKEN_CODEC = new InjectionToken('RICH_TEXT_EDITOR_TOKEN_
 const COALESCE_WINDOW_MS = 500;
 /** How many states are kept. The oldest fall off the bottom - enough depth to be useful, bounded
  *  so a long editing session can't grow the stack without limit. */
-const MAX_ENTRIES = 100;
+const MAX_ENTRIES$1 = 100;
 /**
  * The characters `next` inserted over `prev` - a prefix/suffix diff, which is all that is needed to
  * tell "typed a word character" from "typed a space". A deletion yields `''`.
@@ -30603,7 +30605,7 @@ const createRichTextEditorHistory = () => {
             return;
         }
         entries.push({ value, selection });
-        if (entries.length > MAX_ENTRIES)
+        if (entries.length > MAX_ENTRIES$1)
             entries.shift();
         index = entries.length - 1;
         syncFlags();
@@ -47009,7 +47011,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }], ctorParameters: () => [], propDecorators: { urlForPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "etPaginationSeo", required: false }] }], pageTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageTitle", required: false }] }] } });
 
 /** How long the copy button stays ticked after a successful write. */
-const COPIED_RESET_MS = 1200;
+const COPIED_RESET_MS$1 = 1200;
+/**
+ * Containers with more entries than this are not rendered directly - their children are grouped into
+ * collapsed slices of this size, so a 5000-item array costs 50 rows instead of 5000.
+ */
+const CHUNK_SIZE = 100;
 const kindOf = (value) => {
     if (value === null)
         return 'null';
@@ -47019,10 +47026,26 @@ const kindOf = (value) => {
         return 'array';
     return typeof value;
 };
+const entriesOf = (value) => {
+    if (Array.isArray(value))
+        return value.map((v, i) => ({ k: String(i), v }));
+    if (value && typeof value === 'object') {
+        return Object.entries(value).map(([k, v]) => ({ k, v }));
+    }
+    return [];
+};
+/** Keeps the number of sibling slices at or below `CHUNK_SIZE` by folding recursively for huge counts. */
+const chunkSizeFor = (count) => {
+    let size = CHUNK_SIZE;
+    while (count / size > CHUNK_SIZE)
+        size *= CHUNK_SIZE;
+    return size;
+};
 /**
  * A recursive, collapsible, searchable JSON tree used by the query devtools value explorer. Renders
  * the *transformed* value the app actually sees (post `transformResponse`). Self-recurses via its
- * own selector.
+ * own selector - both for child entries and for the folded slices of an oversized container, which
+ * re-enter as the same component with a `chunk` window over the same value.
  */
 class QueryDevtoolsJsonComponent {
     constructor() {
@@ -47034,6 +47057,12 @@ class QueryDevtoolsJsonComponent {
         /** Lowercased search term; when set, the tree auto-expands and matches are highlighted. */
         this.search = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+        /**
+         * When set, this node is not the value itself but a folded window over its entries. It shares the
+         * container's `path` so a child's persisted expansion does not depend on where the slice borders land.
+         */
+        this.chunk = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "chunk" }] : /* istanbul ignore next */ []));
         /** Full path of this node from the explorer root, used as the key for persisted expansion. */
         this.path = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
@@ -47050,66 +47079,80 @@ class QueryDevtoolsJsonComponent {
         ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
         this.isContainer = computed(() => this.kind() === 'array' || this.kind() === 'object', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isContainer" }] : /* istanbul ignore next */ []));
-        this.entries = computed(() => {
-            const value = this.value();
-            if (Array.isArray(value))
-                return value.map((v, i) => ({ k: String(i), v }));
-            if (value && typeof value === 'object') {
-                return Object.entries(value).map(([k, v]) => ({ k, v }));
-            }
-            return [];
+        /** The entries this node covers: the container's own, or just the window a chunk stands for. */
+        this.ownEntries = computed(() => {
+            const entries = entriesOf(this.value());
+            const chunk = this.chunk();
+            return chunk ? entries.slice(chunk.start, chunk.end) : entries;
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
-        this.localExpanded = linkedSignal(() => this.depth() < 1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ownEntries" }] : /* istanbul ignore next */ []));
+        this.childChunks = computed(() => {
+            const entries = this.ownEntries();
+            if (entries.length <= CHUNK_SIZE)
+                return [];
+            return buildChunks(entries, { offset: this.chunk()?.start ?? 0, isArray: this.kind() === 'array' });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "childChunks" }] : /* istanbul ignore next */ []));
+        /** Entries rendered as rows - empty while they are folded into slices instead. */
+        this.visibleEntries = computed(() => (this.childChunks().length ? [] : this.ownEntries()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleEntries" }] : /* istanbul ignore next */ []));
+        /** Slices carry their window in the key so siblings persist independently of the container. */
+        this.togglePath = computed(() => {
+            const chunk = this.chunk();
+            return chunk ? `${this.path()}#${chunk.start}` : this.path();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "togglePath" }] : /* istanbul ignore next */ []));
+        this.defaultExpanded = computed(() => !this.chunk() && this.depth() < 1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultExpanded" }] : /* istanbul ignore next */ []));
+        this.localExpanded = linkedSignal(() => this.defaultExpanded(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "localExpanded" }] : /* istanbul ignore next */ []));
         this.expanded = computed(() => {
             // Externally-persisted mode: resolve from the expanded/collapsed path sets, else the depth default.
             if (this.toggleFn()) {
-                const path = this.path();
+                const path = this.togglePath();
                 if (this.collapsedPaths()?.has(path))
                     return false;
                 if (this.expandedPaths()?.has(path))
                     return true;
-                return this.depth() < 1;
+                return this.defaultExpanded();
             }
             return this.localExpanded();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
-        this.effectiveExpanded = computed(() => (this.search() ? true : this.expanded()), /* @ts-ignore */
+        /** Only slices that actually contain a match unfold while searching, so a filter stays cheap. */
+        this.chunkHasHit = computed(() => {
+            const term = this.search();
+            return !!term && this.ownEntries().some(({ k, v }) => k.toLowerCase().includes(term) || matchesDeep(v, term));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "chunkHasHit" }] : /* istanbul ignore next */ []));
+        this.effectiveExpanded = computed(() => {
+            if (!this.search())
+                return this.expanded();
+            return this.chunk() ? this.chunkHasHit() : true;
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "effectiveExpanded" }] : /* istanbul ignore next */ []));
         this.copied = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
         this.copiedReset$ = new Subject();
         this.copyLabel = computed(() => {
-            const value = this.value();
-            if (Array.isArray(value))
-                return `Copy array (${value.length} ${value.length === 1 ? 'item' : 'items'})`;
-            if (this.kind() === 'object') {
-                const count = Object.keys(value).length;
+            const count = this.ownEntries().length;
+            if (this.chunk())
+                return `Copy slice (${count} ${count === 1 ? 'entry' : 'entries'})`;
+            if (this.kind() === 'array')
+                return `Copy array (${count} ${count === 1 ? 'item' : 'items'})`;
+            if (this.kind() === 'object')
                 return `Copy object (${count} ${count === 1 ? 'key' : 'keys'})`;
-            }
             return 'Copy value';
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "copyLabel" }] : /* istanbul ignore next */ []));
         this.preview = computed(() => {
-            const value = this.value();
-            if (Array.isArray(value))
-                return value.length ? `[…] ${value.length}` : '[]';
-            const count = value ? Object.keys(value).length : 0;
+            const count = this.ownEntries().length;
+            if (this.kind() === 'array')
+                return count ? `[…] ${count}` : '[]';
             return count ? `{…} ${count}` : '{}';
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
-        this.display = computed(() => {
-            const value = this.value();
-            const kind = this.kind();
-            if (kind === 'string')
-                return `"${value}"`;
-            if (kind === 'null')
-                return 'null';
-            if (kind === 'undefined')
-                return 'undefined';
-            return String(value);
-        }, /* @ts-ignore */
+        this.display = computed(() => displayOf(this.value()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
         this.keyHit = computed(() => {
             const term = this.search();
@@ -47124,7 +47167,7 @@ class QueryDevtoolsJsonComponent {
         ...(ngDevMode ? [{ debugName: "valueHit" }] : /* istanbul ignore next */ []));
         // Each copy restarts the tick countdown; switchMap drops the pending reset of the previous one.
         this.copiedReset$
-            .pipe(switchMap(() => timer(COPIED_RESET_MS)), tap(() => this.copied.set(false)), takeUntilDestroyed())
+            .pipe(switchMap(() => timer(COPIED_RESET_MS$1)), tap(() => this.copied.set(false)), takeUntilDestroyed())
             .subscribe();
     }
     childPath(key) {
@@ -47134,18 +47177,19 @@ class QueryDevtoolsJsonComponent {
     toggle() {
         const toggleFn = this.toggleFn();
         if (toggleFn) {
-            toggleFn(this.path(), !this.expanded());
+            toggleFn(this.togglePath(), !this.expanded());
             return;
         }
         this.localExpanded.set(!this.localExpanded());
     }
     /**
-     * Containers copy their whole subtree as JSON; leaves copy something pasteable - a raw string
-     * without the display quotes, so an id or url can go straight into a search box.
+     * Containers copy their whole subtree as JSON, slices only the entries they cover; leaves copy
+     * something pasteable - a raw string without the display quotes, so an id or url can go straight
+     * into a search box.
      */
     copyValue() {
-        const value = this.value();
         const kind = this.kind();
+        const value = this.chunk() ? this.chunkValue() : this.value();
         let text;
         try {
             if (kind === 'string')
@@ -47164,12 +47208,18 @@ class QueryDevtoolsJsonComponent {
             .then(() => this.flagCopied())
             .catch(() => undefined);
     }
+    chunkValue() {
+        const entries = this.ownEntries();
+        if (this.kind() === 'array')
+            return entries.map((entry) => entry.v);
+        return Object.fromEntries(entries.map((entry) => [entry.k, entry.v]));
+    }
     flagCopied() {
         this.copied.set(true);
         this.copiedReset$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsJsonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: QueryDevtoolsJsonComponent, isStandalone: true, selector: "et-query-devtools-json", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, expandedPaths: { classPropertyName: "expandedPaths", publicName: "expandedPaths", isSignal: true, isRequired: false, transformFunction: null }, collapsedPaths: { classPropertyName: "collapsedPaths", publicName: "collapsedPaths", isSignal: true, isRequired: false, transformFunction: null }, toggleFn: { classPropertyName: "toggleFn", publicName: "toggleFn", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: QueryDevtoolsJsonComponent, isStandalone: true, selector: "et-query-devtools-json", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, chunk: { classPropertyName: "chunk", publicName: "chunk", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, expandedPaths: { classPropertyName: "expandedPaths", publicName: "expandedPaths", isSignal: true, isRequired: false, transformFunction: null }, collapsedPaths: { classPropertyName: "collapsedPaths", publicName: "collapsedPaths", isSignal: true, isRequired: false, transformFunction: null }, toggleFn: { classPropertyName: "toggleFn", publicName: "toggleFn", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (isContainer()) {
       <div class="et-query-devtools-json-node">
         <div class="et-query-devtools-json-row">
@@ -47180,7 +47230,9 @@ class QueryDevtoolsJsonComponent {
             type="button"
           >
             <span class="et-query-devtools-json-caret">{{ effectiveExpanded() ? '▾' : '▸' }}</span>
-            @if (nodeKey() !== null) {
+            @if (chunk(); as chunk) {
+              <span class="et-query-devtools-json-chunk">{{ chunk.label }}</span>
+            } @else if (nodeKey() !== null) {
               <span [class.et-query-devtools-json-hit]="keyHit()" class="et-query-devtools-json-key">{{
                 nodeKey()
               }}</span>
@@ -47202,7 +47254,19 @@ class QueryDevtoolsJsonComponent {
 
         @if (effectiveExpanded()) {
           <div class="et-query-devtools-json-children">
-            @for (entry of entries(); track entry.k) {
+            @for (childChunk of childChunks(); track childChunk.start) {
+              <et-query-devtools-json
+                [value]="value()"
+                [chunk]="childChunk"
+                [depth]="depth()"
+                [path]="path()"
+                [search]="search()"
+                [expandedPaths]="expandedPaths()"
+                [collapsedPaths]="collapsedPaths()"
+                [toggleFn]="toggleFn()"
+              />
+            }
+            @for (entry of visibleEntries(); track entry.k) {
               <et-query-devtools-json
                 [value]="entry.v"
                 [nodeKey]="entry.k"
@@ -47238,7 +47302,7 @@ class QueryDevtoolsJsonComponent {
         </button>
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: QueryDevtoolsJsonComponent, selector: "et-query-devtools-json", inputs: ["value", "nodeKey", "depth", "search", "path", "expandedPaths", "collapsedPaths", "toggleFn"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: QueryDevtoolsJsonComponent, selector: "et-query-devtools-json", inputs: ["value", "nodeKey", "depth", "search", "chunk", "path", "expandedPaths", "collapsedPaths", "toggleFn"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsJsonComponent, decorators: [{
             type: Component,
@@ -47255,7 +47319,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             type="button"
           >
             <span class="et-query-devtools-json-caret">{{ effectiveExpanded() ? '▾' : '▸' }}</span>
-            @if (nodeKey() !== null) {
+            @if (chunk(); as chunk) {
+              <span class="et-query-devtools-json-chunk">{{ chunk.label }}</span>
+            } @else if (nodeKey() !== null) {
               <span [class.et-query-devtools-json-hit]="keyHit()" class="et-query-devtools-json-key">{{
                 nodeKey()
               }}</span>
@@ -47277,7 +47343,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
         @if (effectiveExpanded()) {
           <div class="et-query-devtools-json-children">
-            @for (entry of entries(); track entry.k) {
+            @for (childChunk of childChunks(); track childChunk.start) {
+              <et-query-devtools-json
+                [value]="value()"
+                [chunk]="childChunk"
+                [depth]="depth()"
+                [path]="path()"
+                [search]="search()"
+                [expandedPaths]="expandedPaths()"
+                [collapsedPaths]="collapsedPaths()"
+                [toggleFn]="toggleFn()"
+              />
+            }
+            @for (entry of visibleEntries(); track entry.k) {
               <et-query-devtools-json
                 [value]="entry.v"
                 [nodeKey]="entry.k"
@@ -47317,7 +47395,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     imports: [QueryDevtoolsJsonComponent],
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: false }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }], expandedPaths: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedPaths", required: false }] }], collapsedPaths: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedPaths", required: false }] }], toggleFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleFn", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: false }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], chunk: [{ type: i0.Input, args: [{ isSignal: true, alias: "chunk", required: false }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }], expandedPaths: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedPaths", required: false }] }], collapsedPaths: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedPaths", required: false }] }], toggleFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleFn", required: false }] }] } });
+// Below the component: an interpolated template literal above an inline template breaks the Angular
+// language service for the whole template (see `ethlete/no-template-literal-before-inline-template`).
+const displayOf = (value) => {
+    switch (kindOf(value)) {
+        case 'string':
+            return `"${value}"`;
+        case 'null':
+            return 'null';
+        case 'undefined':
+            return 'undefined';
+        default:
+            return String(value);
+    }
+};
+const buildChunks = (entries, window) => {
+    const size = chunkSizeFor(entries.length);
+    const chunks = [];
+    for (let i = 0; i < entries.length; i += size) {
+        const slice = entries.slice(i, i + size);
+        const start = window.offset + i;
+        const end = start + slice.length;
+        const first = window.isArray ? String(start) : (slice[0]?.k ?? '');
+        const last = window.isArray ? String(end - 1) : (slice[slice.length - 1]?.k ?? '');
+        chunks.push({ start, end, label: slice.length === 1 ? first : `${first} … ${last}` });
+    }
+    return chunks;
+};
+/** Whether a search term appears anywhere in a subtree - used to keep non-matching slices folded. */
+const matchesDeep = (value, term) => {
+    if (!value || typeof value !== 'object')
+        return displayOf(value).toLowerCase().includes(term);
+    return entriesOf(value).some(({ k, v }) => k.toLowerCase().includes(term) || matchesDeep(v, term));
+};
 
 /**
  * The global devtools toggle shortcut, rendered for the current platform (`⌘⌥Q` on Apple, where the
@@ -47371,10 +47482,290 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
   `, encapsulation: ViewEncapsulation.ShadowDom, styles: [":host{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:2147483001}button{--_accent: var(--et-theme-color-primary-solid, #60a5fa);position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 12px 10px 14px;border:none;border-radius:999px;background:linear-gradient(135deg,#1f1f23,#2a2a30);color:#fafafa;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 20px #00000059,inset 0 0 0 1px #ffffff14;transition:transform .15s ease,box-shadow .2s ease}button:before{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--_accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;transition:opacity .2s ease}button:hover{transform:translateY(-2px);box-shadow:0 10px 28px #0006,0 0 0 4px color-mix(in srgb,var(--_accent) 22%,transparent),inset 0 0 0 1px #ffffff1a}button:hover:before{opacity:1}svg{inline-size:16px;block-size:16px;fill:none;stroke:var(--_accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.label{line-height:1}kbd{padding:3px 6px;border-radius:5px;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff1f;color:#d4d4d8;font:inherit;font-size:11px;font-weight:500;line-height:1;white-space:nowrap}\n"] }]
         }], propDecorators: { openChange: [{ type: i0.Output, args: ["openChange"] }] } });
 
+/** Enough to describe what changed between two responses; past this the list stops being readable. */
+const MAX_ENTRIES = 200;
+/**
+ * How deep the walk descends before comparing whole subtrees at once. Guards against a self-referential
+ * response, and keeps a deeply nested change reported as one entry rather than a path per level.
+ */
+const MAX_DEPTH = 12;
+/** Stands in for a path one side does not have, so a stored `undefined` is not mistaken for a missing key. */
+const ABSENT = /* @__PURE__ */ Symbol('absent');
+const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+const valueAt = (record, key) => (key in record ? record[key] : ABSENT);
+/**
+ * The `id` of every element, when an array holds records keyed by a unique primitive `id` - the shape an
+ * API list almost always has. `null` for anything else, which is then compared by index.
+ */
+const recordIds = (items) => {
+    const ids = [];
+    for (const item of items) {
+        if (!isRecord(item))
+            return null;
+        const id = item['id'];
+        if (typeof id !== 'string' && typeof id !== 'number')
+            return null;
+        ids.push(id);
+    }
+    return new Set(ids).size === ids.length ? ids : null;
+};
+/**
+ * Whether two values are the same, for the leaves and for the subtrees the walk stopped descending into.
+ * The serialized comparison is key-order sensitive, which only ever over-reports a difference.
+ */
+const isSameValue = (before, after) => {
+    if (Object.is(before, after))
+        return true;
+    if (!isRecord(before) && !Array.isArray(before))
+        return false;
+    if (!isRecord(after) && !Array.isArray(after))
+        return false;
+    try {
+        return JSON.stringify(before) === JSON.stringify(after);
+    }
+    catch {
+        return false;
+    }
+};
+const push = (acc, entry) => {
+    if (acc.entries.length >= MAX_ENTRIES) {
+        acc.truncated = true;
+        return;
+    }
+    acc.entries.push(entry);
+};
+const walk = ({ before, after, path, depth }, acc) => {
+    if (acc.truncated)
+        return;
+    if (before === ABSENT) {
+        push(acc, { path, kind: 'added', before: null, after });
+        return;
+    }
+    if (after === ABSENT) {
+        push(acc, { path, kind: 'removed', before, after: null });
+        return;
+    }
+    if (depth < MAX_DEPTH) {
+        if (isRecord(before) && isRecord(after)) {
+            for (const key of new Set([...Object.keys(before), ...Object.keys(after)])) {
+                walk({ before: valueAt(before, key), after: valueAt(after, key), path: `${path}.${key}`, depth: depth + 1 }, acc);
+            }
+            return;
+        }
+        if (Array.isArray(before) && Array.isArray(after)) {
+            walkArrays({ before, after, path, depth }, acc);
+            return;
+        }
+    }
+    if (!isSameValue(before, after))
+        push(acc, { path, kind: 'changed', before, after });
+};
+const walkArrays = ({ before, after, path, depth }, acc) => {
+    const beforeIds = recordIds(before);
+    const afterIds = recordIds(after);
+    const nested = depth + 1;
+    // Matching records by their `id` keeps a list that gained or lost an item reported as that one item,
+    // instead of every index after it shifting and reading as changed.
+    if (beforeIds && afterIds) {
+        const afterById = new Map(afterIds.map((id, index) => [id, after[index]]));
+        const beforeIdSet = new Set(beforeIds);
+        beforeIds.forEach((id, index) => {
+            const paired = afterById.has(id) ? afterById.get(id) : ABSENT;
+            walk({ before: before[index], after: paired, path: `${path}[id=${id}]`, depth: nested }, acc);
+        });
+        afterIds.forEach((id, index) => {
+            if (beforeIdSet.has(id))
+                return;
+            walk({ before: ABSENT, after: after[index], path: `${path}[id=${id}]`, depth: nested }, acc);
+        });
+        return;
+    }
+    for (let index = 0; index < Math.max(before.length, after.length); index++) {
+        walk({
+            before: index < before.length ? before[index] : ABSENT,
+            after: index < after.length ? after[index] : ABSENT,
+            path: `${path}[${index}]`,
+            depth: nested,
+        }, acc);
+    }
+};
+/**
+ * What changed between two responses of the same query, as a flat list of paths - the shape that answers
+ * "the list re-rendered, what changed?" and "did that poll return anything new?".
+ */
+const diffQueryDevtoolsResponses = (before, after) => {
+    const acc = { entries: [], truncated: false };
+    walk({ before, after, path: '$', depth: 0 }, acc);
+    return acc;
+};
+
+/* eslint-disable @typescript-eslint/naming-convention -- the `__export_*` keys are Insomnia's file format */
+const WORKSPACE_ID = 'wrk_ethlete_query_devtools';
+const jsonBody = (body) => {
+    try {
+        return JSON.stringify(body, null, 2);
+    }
+    catch {
+        // A body holding a circular reference or a throwing `toJSON` cannot be exported.
+        return null;
+    }
+};
+/**
+ * Insomnia's GraphQL body editor stores `{ query, variables }` as its text, so a GraphQL request is
+ * exported with the document and its variables rather than the serialized POST body.
+ */
+const graphqlBody = (gqlQuery, body) => {
+    const variables = body?.variables ?? {};
+    return jsonBody({ query: gqlQuery, variables });
+};
+const bodyOf = (request) => {
+    if (request.gqlQuery) {
+        const text = graphqlBody(request.gqlQuery, request.body);
+        return text === null ? {} : { mimeType: 'graphql', text };
+    }
+    if (request.body === null || request.body === undefined)
+        return {};
+    const text = jsonBody(request.body);
+    return text === null ? {} : { mimeType: 'application/json', text };
+};
+/**
+ * Angular's `HttpClient` labels an object body `application/json` on its own, so a replay outside the
+ * app needs the header spelled out to reach the same endpoint the same way.
+ */
+const headersOf = (input, hasBody) => {
+    const headers = input.headers.filter((header) => header.value !== '');
+    const hasContentType = headers.some((header) => header.name.toLowerCase() === 'content-type');
+    if (!hasBody || hasContentType)
+        return headers;
+    return [...headers, { name: 'Content-Type', value: 'application/json' }];
+};
+const AUTH_HEADER = 'Authorization';
+/**
+ * Insomnia's template tag for reading a value out of another request's response. `when-expired` plus a
+ * max age is what makes the chain maintain itself: once the stored refresh response is older than
+ * `maxAgeSeconds`, sending a request that reads from it re-sends the refresh first.
+ */
+const responseTag = (requestId, refresh) => `{% response 'body', '${requestId}', '${refresh.accessTokenPath}', 'when-expired', ${refresh.maxAgeSeconds} %}`;
+/** Replaces whatever `Authorization` the export resolved with the token the refresh chain yields. */
+const withChainedAuth = (headers, value) => [
+    { name: AUTH_HEADER, value },
+    ...headers.filter((header) => header.name.toLowerCase() !== AUTH_HEADER.toLowerCase()),
+];
+/**
+ * Builds an Insomnia v4 collection from a set of requests, ready to be imported via Insomnia's
+ * `Import > From File / Clipboard`. Requests are filed into a folder per query client, and a request
+ * naming a token refresh gets its bearer token from that refresh's response rather than from a
+ * literal token frozen at export time.
+ */
+const buildInsomniaExport = (options) => {
+    const groups = new Map();
+    const resources = [
+        {
+            _id: WORKSPACE_ID,
+            _type: 'workspace',
+            parentId: null,
+            name: options.name,
+            description: 'Exported from the @ethlete/query devtools.',
+            scope: 'collection',
+            created: options.now,
+            modified: options.now,
+        },
+    ];
+    const groupIdFor = (name) => {
+        if (!name)
+            return WORKSPACE_ID;
+        const existing = groups.get(name);
+        if (existing)
+            return existing;
+        const id = `fld_${groups.size}`;
+        groups.set(name, id);
+        resources.push({
+            _id: id,
+            _type: 'request_group',
+            parentId: WORKSPACE_ID,
+            name,
+            environment: {},
+            // Insomnia sorts ascending, so the counter keeps folders in the order they were added.
+            metaSortKey: groups.size,
+            created: options.now,
+            modified: options.now,
+        });
+        return id;
+    };
+    const requestResource = (resource) => {
+        resources.push({
+            _type: 'request',
+            description: '',
+            parameters: [],
+            authentication: {},
+            isPrivate: false,
+            settingStoreCookies: true,
+            settingSendCookies: true,
+            settingEncodeUrl: true,
+            settingRebuildPath: true,
+            settingFollowRedirects: 'global',
+            created: options.now,
+            modified: options.now,
+            ...resource,
+        });
+    };
+    /** The `Authorization` value a request chained to a given token refresh gets, keyed by refresh id. */
+    const chainedAuth = new Map();
+    // Emitted first so every chained `Authorization` below already has a request id to point at.
+    options.tokenRefreshes?.forEach((refresh, index) => {
+        const id = `req_refresh_${index}`;
+        const body = bodyOf(refresh);
+        chainedAuth.set(refresh.id, `Bearer ${responseTag(id, refresh)}`);
+        requestResource({
+            _id: id,
+            parentId: groupIdFor(refresh.group),
+            name: refresh.name,
+            description: 'Mints the access token every secure request in this collection reads. Insomnia re-sends it on ' +
+                `its own once the stored response is older than ${refresh.maxAgeSeconds}s. The refresh token in ` +
+                'the body is the one the app held at export time - re-export once it is spent.',
+            method: refresh.method,
+            url: refresh.url,
+            body,
+            headers: headersOf(refresh, 'text' in body),
+            // Insomnia sorts ascending and the exported requests start at 0, so the refresh stays on top.
+            metaSortKey: index - (options.tokenRefreshes?.length ?? 0),
+        });
+    });
+    options.requests.forEach((request, index) => {
+        const body = bodyOf(request);
+        const headers = headersOf(request, 'text' in body);
+        const auth = request.secureBy ? chainedAuth.get(request.secureBy) : undefined;
+        requestResource({
+            _id: `req_${index}`,
+            parentId: groupIdFor(request.group),
+            name: request.name,
+            method: request.method,
+            url: request.url,
+            body,
+            headers: auth ? withChainedAuth(headers, auth) : headers,
+            metaSortKey: index,
+        });
+    });
+    return {
+        _type: 'export',
+        __export_format: 4,
+        __export_date: new Date(options.now).toISOString(),
+        __export_source: 'ethlete.query:devtools',
+        resources,
+    };
+};
+
+/** How long a copy button stays ticked after a successful write. */
+const COPIED_RESET_MS = 1200;
+const noop = () => undefined;
 const STORAGE_KEY = 'ethlete:query:devtools:v4';
 const MAX_EVENTS = 100;
 const DEFAULT_HEIGHT = 360;
 const MIN_HEIGHT = 200;
+/** How many bars the timeline draws. Past this the newest are kept and the rest are counted instead. */
+const MAX_TIMELINE_ROWS = 200;
+/** Where the timeline's axis labels sit, as fractions of the window. */
+const TIMELINE_TICKS = [0, 0.25, 0.5, 0.75, 1];
 const readPersistedState = () => {
     try {
         const raw = sessionStorage.getItem(STORAGE_KEY);
@@ -47408,6 +47799,27 @@ const slimForReport = (value, depth = 0) => {
     }
     return value;
 };
+/** How long an exported Insomnia collection reuses a refresh response whose token lifetime is unknown. */
+const DEFAULT_TOKEN_MAX_AGE_S = 300;
+/** Upper bound for the same, so a token that claims a year of life still gets refreshed hourly. */
+const MAX_TOKEN_MAX_AGE_S = 3600;
+/**
+ * The JSONPath of a string value inside a response, or `null`. Used to locate the access token in an
+ * auth response whose shape only the provider's `extractTokens` knows.
+ */
+const findValuePath = (value, node) => {
+    if (node.value === value)
+        return node.path;
+    if (node.depth > 5 || !node.value || typeof node.value !== 'object')
+        return null;
+    for (const [key, entry] of Object.entries(node.value)) {
+        const path = Array.isArray(node.value) ? `${node.path}[${key}]` : `${node.path}.${key}`;
+        const found = findValuePath(value, { value: entry, path, depth: node.depth + 1 });
+        if (found)
+            return found;
+    }
+    return null;
+};
 /** Best-effort decode of a JWT payload for the auth tab. Returns `null` for anything non-decodable. */
 const decodeJwtPayload = (token) => {
     if (!token)
@@ -47439,6 +47851,7 @@ const decodeJwtPayload = (token) => {
 class QueryDevtoolsComponent {
     constructor() {
         this.hostEl = inject(ElementRef);
+        this.renderer = injectRenderer();
         this.document = inject(DOCUMENT$1);
         this.eventIdCounter = 0;
         this.lastSelectionKey = '';
@@ -47447,10 +47860,25 @@ class QueryDevtoolsComponent {
             { id: 'queries', label: 'Queries' },
             { id: 'stacks', label: 'Stacks' },
             { id: 'sequences', label: 'Sequences' },
+            { id: 'forms', label: 'Forms' },
             { id: 'auth', label: 'Auth' },
             { id: 'ws', label: 'Sockets' },
             { id: 'cache', label: 'Cache' },
+            { id: 'timeline', label: 'Timeline' },
             { id: 'events', label: 'Events' },
+            { id: 'faults', label: 'Faults' },
+        ];
+        this.detailTabs = [
+            { id: 'overview', label: 'Overview' },
+            { id: 'history', label: 'History' },
+            { id: 'data', label: 'Data' },
+        ];
+        /** The status chips above the Queries list, in the order a problem is usually looked for. */
+        this.facets = [
+            { id: 'error', label: 'Failing' },
+            { id: 'loading', label: 'Loading' },
+            { id: 'stale', label: 'Stale' },
+            { id: 'idle', label: 'Idle' },
         ];
         this.shortcut = queryDevtoolsShortcutLabel();
         this.open = signal(this.persisted.open ?? false, /* @ts-ignore */
@@ -47461,15 +47889,32 @@ class QueryDevtoolsComponent {
         ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
         this.activeTab = signal(this.persisted.activeTab ?? 'queries', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+        /** Which section of the query detail is showing. Shared by the Queries tab and both drawers. */
+        this.detailTab = signal(this.persisted.detailTab ?? 'overview', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "detailTab" }] : /* istanbul ignore next */ []));
         this.selectedClientName = signal(this.persisted.selectedClientName ?? null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedClientName" }] : /* istanbul ignore next */ []));
         this.selectedQueryId = signal(this.persisted.selectedQueryId ?? null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedQueryId" }] : /* istanbul ignore next */ []));
-        // Independent per-drawer selection so the Stacks / Sequences drawers don't share the Queries tab's.
+        /** The form whose detail the Forms tab has expanded. */
+        this.selectedFormId = signal(this.persisted.selectedFormId ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedFormId" }] : /* istanbul ignore next */ []));
+        // Independent per-drawer selection so no drawer shares the Queries tab's selection - or another
+        // drawer's: opening a query from the Timeline must not also change what the Forms drawer shows.
         this.stackSelectedQueryId = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "stackSelectedQueryId" }] : /* istanbul ignore next */ []));
         this.sequenceSelectedQueryId = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sequenceSelectedQueryId" }] : /* istanbul ignore next */ []));
+        this.formSelectedQueryId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formSelectedQueryId" }] : /* istanbul ignore next */ []));
+        this.timelineSelectedQueryId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timelineSelectedQueryId" }] : /* istanbul ignore next */ []));
+        /** Free-text narrowing of the Queries list. Every whitespace-separated term has to match. */
+        this.queryFilter = signal(this.persisted.queryFilter ?? '', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "queryFilter" }] : /* istanbul ignore next */ []));
+        /** The status facets the Queries list is narrowed to. Empty means no status narrowing. */
+        this.queryFacets = signal(new Set(this.persisted.queryFacets ?? []), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "queryFacets" }] : /* istanbul ignore next */ []));
         this.eventLog = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "eventLog" }] : /* istanbul ignore next */ []));
         /** Keys (`<entryId>:<stepIndex>`) of the sequence steps whose in/out detail is expanded. */
@@ -47485,6 +47930,9 @@ class QueryDevtoolsComponent {
         ...(ngDevMode ? [{ debugName: "jsonExpandedPaths" }] : /* istanbul ignore next */ []));
         this.jsonCollapsedPaths = signal(new Set(this.persisted.jsonCollapsed ?? []), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "jsonCollapsedPaths" }] : /* istanbul ignore next */ []));
+        /** The run whose response the diff is comparing, by run index, or `null` while no diff is open. */
+        this.diffRunIndex = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "diffRunIndex" }] : /* istanbul ignore next */ []));
         /** JIT editor state (response / args editing on the selected query). */
         this.editorMode = signal('none', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "editorMode" }] : /* istanbul ignore next */ []));
@@ -47492,11 +47940,22 @@ class QueryDevtoolsComponent {
         ...(ngDevMode ? [{ debugName: "responseDraft" }] : /* istanbul ignore next */ []));
         this.argsDraft = signal('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "argsDraft" }] : /* istanbul ignore next */ []));
+        /**
+         * The text the currently open editor was seeded with. The textareas bind `value` to this and not to
+         * the live draft: a `value` binding fed by the draft is written back on every keystroke, and writing
+         * a textarea's `value` puts the caret at the end.
+         */
+        this.editorSeed = '';
         this.editError = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "editError" }] : /* istanbul ignore next */ []));
-        /** Transient "Copied!" feedback for the copy-report action. */
+        /** Transient "Copied!" feedback for the copy-report, copy-as-Insomnia and copy-document actions. */
         this.copiedReport = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "copiedReport" }] : /* istanbul ignore next */ []));
+        this.copiedInsomnia = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "copiedInsomnia" }] : /* istanbul ignore next */ []));
+        this.copiedGql = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "copiedGql" }] : /* istanbul ignore next */ []));
+        this.copiedReset$ = new Subject();
         /** 1-second tick driving the cache freshness countdowns. */
         this.clock = toSignal(interval(1000), { initialValue: 0 });
         /** "Inspect" mode: hover the live UI to find the query that a component created. */
@@ -47513,6 +47972,8 @@ class QueryDevtoolsComponent {
         ...(ngDevMode ? [{ debugName: "stackEntries" }] : /* istanbul ignore next */ []));
         this.sequenceEntries = computed(() => queryDevtoolsEntries().filter((e) => e.kind === 'query-sequence'), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sequenceEntries" }] : /* istanbul ignore next */ []));
+        this.formEntries = computed(() => queryDevtoolsEntries().filter((e) => e.kind === 'query-form'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formEntries" }] : /* istanbul ignore next */ []));
         this.authEntries = computed(() => queryDevtoolsEntries().filter((e) => e.kind === 'auth-provider'), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "authEntries" }] : /* istanbul ignore next */ []));
         this.wsEntries = computed(() => queryDevtoolsEntries().filter((e) => e.kind === 'ws-client'), /* @ts-ignore */
@@ -47543,26 +48004,226 @@ class QueryDevtoolsComponent {
             return Array.from(map, ([repository, info]) => ({ repository, ...info }));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "repositories" }] : /* istanbul ignore next */ []));
-        this.filteredQueries = computed(() => {
+        /**
+         * Every client the Faults tab can arm, with the fault it currently carries. Clients with nothing armed
+         * read as {@link EMPTY_QUERY_DEVTOOLS_FAULT} so the inputs always have a value to show.
+         */
+        this.faultClients = computed(() => {
+            const faults = queryDevtoolsFaults();
+            return this.repositories()
+                .map(({ name, baseUrl }) => {
+                const fault = faults[name] ?? EMPTY_QUERY_DEVTOOLS_FAULT;
+                return { name, baseUrl, fault, armed: isQueryDevtoolsFaultArmed(fault) };
+            })
+                .sort((a, b) => a.name.localeCompare(b.name));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "faultClients" }] : /* istanbul ignore next */ []));
+        /**
+         * The names of the clients currently carrying a fault, or `null` when none do - so a template can `@if`
+         * on it. Armed faults are the one state where the panel is lying to the app on purpose, and a badge on a
+         * tab that isn't open cannot say that: whichever tab you are reading, a red response has to be
+         * attributable to the injection rather than to the API.
+         */
+        this.armedFaultClients = computed(() => {
+            const armed = this.faultClients()
+                .filter((client) => client.armed)
+                .map((client) => client.name);
+            return armed.length ? armed : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "armedFaultClients" }] : /* istanbul ignore next */ []));
+        /**
+         * The queries the list is scoped to before the search box and the status chips narrow them further:
+         * either the picked client's, or exactly the inspected element's.
+         */
+        this.scopedQueries = computed(() => {
             const entries = this.queryEntries();
             const inspectIds = this.inspectFilterIds();
-            let filtered;
-            if (inspectIds) {
-                filtered = entries.filter((e) => inspectIds.includes(e.id));
-            }
-            else {
-                const client = this.selectedClientName();
-                filtered = client ? entries.filter((e) => e.meta.clientName === client) : entries;
-            }
-            return filtered.map((entry) => ({ entry, query: entry.handle }));
+            if (inspectIds)
+                return entries.filter((e) => inspectIds.includes(e.id));
+            const client = this.selectedClientName();
+            return client ? entries.filter((e) => e.meta.clientName === client) : entries;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scopedQueries" }] : /* istanbul ignore next */ []));
+        this.searchedQueries = computed(() => {
+            const items = this.scopedQueries().map((entry) => ({ entry, query: entry.handle }));
+            const terms = this.queryFilter().trim().toLowerCase().split(/\s+/).filter(Boolean);
+            if (!terms.length)
+                return items;
+            return items.filter((item) => {
+                const haystack = this.queryHaystack(item.entry, item.query);
+                return terms.every((term) => haystack.includes(term));
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchedQueries" }] : /* istanbul ignore next */ []));
+        /**
+         * How many queries each status chip would leave. Counted before the active chips are applied, so a
+         * chip always states what picking it yields rather than what the current selection happens to show.
+         */
+        this.facetCounts = computed(() => {
+            // Staleness is a `Date.now()` comparison and deliberately not reactive, so the clock is what makes
+            // the counts age with it - without it a chip would keep the number it happened to be built with.
+            this.clock();
+            const counts = { error: 0, loading: 0, stale: 0, idle: 0 };
+            for (const { query } of this.searchedQueries()) {
+                const status = this.queryStatus(query);
+                if (status === 'error')
+                    counts.error++;
+                if (status === 'loading')
+                    counts.loading++;
+                if (status === 'idle')
+                    counts.idle++;
+                if (this.isStale(query))
+                    counts.stale++;
+            }
+            return counts;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "facetCounts" }] : /* istanbul ignore next */ []));
+        this.filteredQueries = computed(() => {
+            const facets = this.queryFacets();
+            const items = this.searchedQueries();
+            if (!facets.size)
+                return items;
+            // Same reason as in `facetCounts`: a list narrowed to stale queries has to re-evaluate as they age.
+            if (facets.has('stale'))
+                this.clock();
+            return items.filter(({ query }) => this.matchesFacets(query, facets));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filteredQueries" }] : /* istanbul ignore next */ []));
+        /** How many queries are in scope, which is what the list would show unfiltered. */
+        this.scopedQueryCount = computed(() => this.scopedQueries().length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scopedQueryCount" }] : /* istanbul ignore next */ []));
+        /** Whether the search box or a status chip is narrowing the list beyond its scope. */
+        this.isQueryListNarrowed = computed(() => !!this.queryFilter().trim() || this.queryFacets().size > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isQueryListNarrowed" }] : /* istanbul ignore next */ []));
+        /**
+         * Every run the scoped queries have recorded, oldest first. The client picker and the inspection
+         * filter narrow the timeline the same way they narrow the Queries list.
+         */
+        this.scopedRuns = computed(() => {
+            const collected = [];
+            for (const entry of this.scopedQueries()) {
+                for (const run of entry.stats?.runs() ?? [])
+                    collected.push({ entry, run });
+            }
+            return collected.sort((a, b) => a.run.startedAt - b.run.startedAt);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scopedRuns" }] : /* istanbul ignore next */ []));
+        /**
+         * Every scoped run laid out on one axis, so a stampede reads as overlapping bars and a chain as a
+         * staircase - which is what the Events tab's flat list of wall-clock times cannot show.
+         */
+        this.timeline = computed(() => {
+            const collected = this.scopedRuns();
+            const hidden = Math.max(0, collected.length - MAX_TIMELINE_ROWS);
+            const shown = hidden ? collected.slice(hidden) : collected;
+            const first = shown[0];
+            if (!first)
+                return { rows: [], startedAt: 0, windowMs: 0, hidden: 0 };
+            // A run in flight has no end yet, so the window has to grow with the clock - otherwise its bar would
+            // freeze at the width it happened to be built with, the same trap `isStale` documents.
+            if (shown.some(({ run }) => run.endedAt === null))
+                this.clock();
+            const now = Date.now();
+            const startedAt = first.run.startedAt;
+            const endedAt = shown.reduce((latest, { run }) => Math.max(latest, run.endedAt ?? now), startedAt);
+            const windowMs = Math.max(1, endedAt - startedAt);
+            const rows = shown.map(({ entry, run }) => {
+                const url = run.url ?? this.requestUrl(entry.handle);
+                return {
+                    key: `${entry.id}:${run.index}`,
+                    entryId: entry.id,
+                    method: entry.meta.method ?? '',
+                    path: url ? this.requestPath(url) : (entry.meta.route ?? ''),
+                    run,
+                    leftPct: ((run.startedAt - startedAt) / windowMs) * 100,
+                    // An instant run - a cache entry filled by a poll or by another consumer - still needs a sliver
+                    // of width to be visible at all.
+                    widthPct: Math.max(0.4, (((run.endedAt ?? now) - run.startedAt) / windowMs) * 100),
+                    durationMs: run.endedAt === null ? null : run.endedAt - run.startedAt,
+                };
+            });
+            return { rows, startedAt, windowMs, hidden };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timeline" }] : /* istanbul ignore next */ []));
+        /** Axis labels for the timeline, as offsets from the window's start. */
+        this.timelineTicks = computed(() => {
+            const { windowMs, rows } = this.timeline();
+            if (!rows.length)
+                return [];
+            return TIMELINE_TICKS.map((fraction) => ({
+                pct: fraction * 100,
+                label: this.formatDuration(Math.round(windowMs * fraction)),
+            }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timelineTicks" }] : /* istanbul ignore next */ []));
+        /** How many runs every query has recorded, for the Timeline tab's badge. */
+        this.runTotals = computed(() => {
+            let count = 0;
+            let errors = 0;
+            for (const entry of this.queryEntries()) {
+                for (const run of entry.stats?.runs() ?? []) {
+                    count++;
+                    if (run.status === 'error')
+                        errors++;
+                }
+            }
+            return { count, errors };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "runTotals" }] : /* istanbul ignore next */ []));
+        /** Cache entries across every client, for the Cache tab's badge. */
+        this.cacheEntryCount = computed(() => this.repositories().reduce((total, { repository }) => {
+            // Read the version signal so the badge recounts on every cache mutation.
+            repository.subtle.cacheVersion();
+            return total + repository.subtle.cacheEntries().length;
+        }, 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cacheEntryCount" }] : /* istanbul ignore next */ []));
+        /**
+         * What each tab holds, so a failing query in a tab that is not open is still visible. Reading it
+         * subscribes the tab bar to every entry's live state - which is the point of the badges.
+         */
+        this.tabBadges = computed(() => {
+            const queries = this.queryEntries();
+            const stacks = this.stackEntries();
+            const sequences = this.sequenceEntries();
+            const events = this.eventLog();
+            return {
+                queries: {
+                    count: queries.length,
+                    errors: queries.filter((entry) => this.queryStatus(entry.handle) === 'error').length,
+                },
+                stacks: {
+                    count: stacks.length,
+                    errors: stacks.filter((entry) => entry.kind === 'paged-query-stack' ? !!this.asPagedStack(entry).error() : !!this.asStack(entry).anyError()).length,
+                },
+                sequences: {
+                    count: sequences.length,
+                    errors: sequences.filter((entry) => (this.asSequence(entry)?.failedAt() ?? null) !== null).length,
+                },
+                forms: { count: this.formEntries().length, errors: 0 },
+                auth: { count: this.authEntries().length, errors: 0 },
+                ws: { count: this.wsEntries().length, errors: 0 },
+                cache: { count: this.cacheEntryCount(), errors: 0 },
+                timeline: this.runTotals(),
+                events: {
+                    count: events.length,
+                    errors: events.filter((event) => event.type === 'request-error').length,
+                },
+                // Armed faults are reported as errors rather than as a plain count: the badge is the one reminder
+                // that the app is misbehaving on purpose, and it has to be impossible to read as "all good".
+                faults: { count: 0, errors: Object.keys(queryDevtoolsFaults()).length, errorNoun: 'armed' },
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabBadges" }] : /* istanbul ignore next */ []));
         this.selectedQuery = computed(() => this.findQuery(this.selectedQueryId()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedQuery" }] : /* istanbul ignore next */ []));
         this.stackSelectedQuery = computed(() => this.findQuery(this.stackSelectedQueryId()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "stackSelectedQuery" }] : /* istanbul ignore next */ []));
         this.sequenceSelectedQuery = computed(() => this.findQuery(this.sequenceSelectedQueryId()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sequenceSelectedQuery" }] : /* istanbul ignore next */ []));
+        this.formSelectedQuery = computed(() => this.findQuery(this.formSelectedQueryId()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formSelectedQuery" }] : /* istanbul ignore next */ []));
+        this.timelineSelectedQuery = computed(() => this.findQuery(this.timelineSelectedQueryId()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timelineSelectedQuery" }] : /* istanbul ignore next */ []));
         this.cacheView = computed(() => this.repositories().map(({ repository, name, baseUrl, client }) => {
             // Read the version signal so this recomputes on every cache mutation.
             repository.subtle.cacheVersion();
@@ -47592,6 +48253,15 @@ class QueryDevtoolsComponent {
             return map;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "elementQueryMap" }] : /* istanbul ignore next */ []));
+        // --- Fault injection ---
+        this.FAULT_STATUSES = QUERY_DEVTOOLS_FAULT_STATUSES;
+        this.CLEAR_FAULTS = clearQueryDevtoolsFaults;
+        /** The ceiling each numeric fault field is clamped to. */
+        this.FAULT_LIMITS = {
+            latencyMs: 60_000,
+            failNext: 99,
+            failRate: 100,
+        };
         // Assigned here (not as an arrow property) so `this` is bound for the value-explorer callback.
         this.toggleJsonPath = (path, expand) => {
             const expanded = new Set(this.jsonExpandedPaths());
@@ -47607,6 +48277,14 @@ class QueryDevtoolsComponent {
             this.jsonExpandedPaths.set(expanded);
             this.jsonCollapsedPaths.set(collapsed);
         };
+        // Each copy restarts the countdown; switchMap drops the pending reset of the previous one.
+        this.copiedReset$
+            .pipe(switchMap(() => timer(COPIED_RESET_MS)), tap(() => {
+            this.copiedReport.set(false);
+            this.copiedInsomnia.set(false);
+            this.copiedGql.set(false);
+        }), takeUntilDestroyed())
+            .subscribe();
         // Merge every live repository's event stream into the rolling log, re-subscribing as the set of
         // repositories changes. Composed with RxJS (not a subscribe-in-effect) per the styleguide.
         toObservable(this.repositories)
@@ -47617,9 +48295,13 @@ class QueryDevtoolsComponent {
                 open: this.open(),
                 height: this.panelHeight(),
                 activeTab: this.activeTab(),
+                detailTab: this.detailTab(),
                 selectedClientName: this.selectedClientName(),
                 selectedQueryId: this.selectedQueryId(),
+                selectedFormId: this.selectedFormId(),
                 inspectFilterIds: this.inspectFilterIds(),
+                queryFilter: this.queryFilter(),
+                queryFacets: [...this.queryFacets()],
                 jsonSearch: this.jsonSearch(),
                 expandedSteps: [...this.expandedSteps()],
                 jsonExpanded: [...this.jsonExpandedPaths()],
@@ -47642,6 +48324,8 @@ class QueryDevtoolsComponent {
             this.editorMode.set('none');
             this.editError.set(null);
             this.copiedReport.set(false);
+            this.copiedInsomnia.set(false);
+            this.diffRunIndex.set(null);
             if (key !== this.lastSelectionKey) {
                 this.lastSelectionKey = key;
                 this.jsonSearch.set('');
@@ -47690,6 +48374,17 @@ class QueryDevtoolsComponent {
     clearInspectFilter() {
         this.inspectFilterIds.set(null);
     }
+    toggleFacet(facet) {
+        const next = new Set(this.queryFacets());
+        if (!next.delete(facet))
+            next.add(facet);
+        this.queryFacets.set(next);
+    }
+    /** Drops the search term and the status chips, keeping the client / inspection scope. */
+    clearQueryFilters() {
+        this.queryFilter.set('');
+        this.queryFacets.set(new Set());
+    }
     toggleInspect() {
         this.inspectActive.update((v) => !v);
     }
@@ -47699,10 +48394,44 @@ class QueryDevtoolsComponent {
     }
     inspectLabel(entries) {
         const first = entries[0];
-        if (entries.length === 1 && first)
-            return `${first.meta.method ?? ''} ${first.meta.route ?? ''}`.trim();
+        if (entries.length === 1 && first) {
+            return `${first.meta.method ?? ''} ${this.queryRoute(first, first.handle)}`.trim();
+        }
         return `${entries.length} queries`;
     }
+    /**
+     * A query's route, split so the template can tell its static path from its path params (each carrying
+     * the value the query used, or `:<name>` while it has none yet) and from the query string of the
+     * request that ran - which is what tells two requests to the same endpoint apart.
+     */
+    routeSegments(entry, query) {
+        const parts = entry?.meta.routeParts;
+        const search = query.subtle.request()?.url.split('?')[1];
+        const querySegment = search ? [{ text: `?${search}`, kind: 'query' }] : [];
+        if (!parts?.length) {
+            return entry?.meta.route ? [{ text: entry.meta.route, kind: 'static' }, ...querySegment] : [];
+        }
+        const pathParams = this.queryArgs(query)?.['pathParams'];
+        const pathSegments = parts.map(({ text, param }) => {
+            if (!param)
+                return { text, kind: 'static' };
+            const value = pathParams?.[param];
+            return { text: value === undefined || value === null ? `:${param}` : String(value), kind: 'param', name: param };
+        });
+        return [...pathSegments, ...querySegment];
+    }
+    /** The full URL of the request a query last made, or `null` while it has not executed. */
+    requestUrl(query) {
+        return query.subtle.request()?.url ?? null;
+    }
+    /**
+     * The args of a query. A query executed imperatively (`execute({ args })`, a sequence step, an auth
+     * query) never writes them to its own `args` signal - only the `withArgs` feature does - so the args
+     * its current request was built from stand in.
+     */
+    queryArgs(query) {
+        return query.args() ?? query.subtle.request()?.args ?? null;
+    }
     queryStatus(query) {
         const state = query.executionState();
         if (!state)
@@ -47713,14 +48442,164 @@ class QueryDevtoolsComponent {
             return 'error';
         return 'success';
     }
+    /**
+     * A request in flight is already refreshing, so reporting it as stale on top of `loading` is noise -
+     * the same precedence the cache tab's freshness column applies.
+     */
     isStale(query) {
         try {
-            return query.subtle.request()?.isStale() ?? false;
+            const request = query.subtle.request();
+            if (!request || request.loading())
+                return false;
+            return request.isStale();
         }
         catch {
             return false;
         }
     }
+    /**
+     * What a query's current request is doing beyond being loading, or `null` when there is nothing beyond
+     * the status dot to say - so the readout only takes up room while it carries something.
+     */
+    requestProgress(query) {
+        const request = query.subtle.request();
+        if (!request)
+            return null;
+        const retry = request.subtle.retryState();
+        const attempts = request.subtle.attempts();
+        // The request's own loading state, not the query's: a forced loading state carries no progress, and
+        // reading the query's would report the forced one as a transfer that never started.
+        const progress = request.loading()?.progress ?? null;
+        if (!retry && !progress && attempts < 2)
+            return null;
+        // The countdown is a `Date.now()` comparison, so the clock is what makes it tick down - the same trap
+        // `isStale` documents.
+        this.clock();
+        return { attempts, retry, retryInMs: retry ? Math.max(0, retry.startsAt - Date.now()) : null, progress };
+    }
+    /** Why a retry was scheduled, as the panel spells it out. A status of 0 never reached the server. */
+    retryCause(status) {
+        return status ? `after ${status}` : 'after a connection failure';
+    }
+    formatPercent(percentage) {
+        return `${Math.round(percentage)}%`;
+    }
+    /** A countdown in whole seconds, spelled out the way the cache freshness column does. */
+    formatCountdown(ms) {
+        return ms === null ? '—' : `${Math.ceil(ms / 1000)}s`;
+    }
+    queryActivity(entry) {
+        return this.activityOf([entry.stats]);
+    }
+    linkActivity(link) {
+        return this.activityOf([link.stats]);
+    }
+    stackActivity(stack) {
+        return this.activityOf(this.queriesForStack(stack).map((link) => link.stats));
+    }
+    sequenceActivity(sequence) {
+        return this.activityOf(this.queriesForSequence(sequence).map((link) => link.stats));
+    }
+    /** Clears an entry's counters and run history, so the next interaction can be measured on its own. */
+    resetStats(entry) {
+        entry.stats?.reset();
+        this.diffRunIndex.set(null);
+    }
+    /** The same, for every query the timeline covers. */
+    resetTimeline() {
+        for (const entry of this.scopedQueries())
+            entry.stats?.reset();
+        this.diffRunIndex.set(null);
+    }
+    /** A query's runs, newest first - the order a history is read in. */
+    queryRuns(entry) {
+        return [...(entry.stats?.runs() ?? [])].reverse();
+    }
+    /**
+     * What a run's status dot and timeline bar colour by. `pending` reuses the panel's loading colour;
+     * `aborted` matches no rule and so falls back to the neutral one.
+     */
+    runStatus(run) {
+        return run.status === 'pending' ? 'loading' : run.status;
+    }
+    /** Whether a run can be diffed: it still holds its body, and so does an older run of the same query. */
+    canDiffRun(entry, run) {
+        if (!run.hasResponse)
+            return false;
+        return (entry.stats?.runs() ?? []).some((other) => other.hasResponse && other.index < run.index);
+    }
+    toggleRunDiff(run) {
+        this.diffRunIndex.update((current) => (current === run.index ? null : run.index));
+    }
+    /**
+     * The response diff of the picked run against the newest older run that still holds a body - which is
+     * not necessarily the run right before it, since a failed run has none to compare.
+     *
+     * `null` unless a run is picked, so a closed diff costs nothing to walk.
+     */
+    responseDiff(entry) {
+        const picked = this.diffRunIndex();
+        if (picked === null)
+            return null;
+        const runs = entry.stats?.runs() ?? [];
+        const at = runs.findIndex((run) => run.index === picked);
+        const after = at === -1 ? null : runs[at];
+        if (!after?.hasResponse)
+            return null;
+        for (let index = at - 1; index >= 0; index--) {
+            const before = runs[index];
+            if (before?.hasResponse) {
+                return { before, after, diff: diffQueryDevtoolsResponses(before.response, after.response) };
+            }
+        }
+        return null;
+    }
+    /** Opens a query in the Queries tab - the Events tab is a way in, not a dead end. */
+    selectQuery(id) {
+        this.activeTab.set('queries');
+        this.selectedQueryId.set(id);
+    }
+    selectTimelineRow(row) {
+        this.timelineSelectedQueryId.set(row.entryId);
+    }
+    selectEventRow(item) {
+        if (item.queryId)
+            this.selectQuery(item.queryId);
+    }
+    /** A value on one line, for a diff row or a form field. The full tree would bury the row it sits in. */
+    inlineValue(value) {
+        if (typeof value === 'string')
+            return value.length > 80 ? `"${value.slice(0, 80)}…"` : `"${value}"`;
+        if (value === undefined)
+            return 'undefined';
+        try {
+            const json = JSON.stringify(value) ?? 'undefined';
+            return json.length > 80 ? `${json.slice(0, 80)}…` : json;
+        }
+        catch {
+            return '[unserializable]';
+        }
+    }
+    /** A byte count the way a network panel spells one out. */
+    formatBytes(bytes) {
+        if (bytes < 1000)
+            return `${bytes} B`;
+        if (bytes < 1_000_000)
+            return `${(bytes / 1000).toFixed(1)} kB`;
+        return `${(bytes / 1_000_000).toFixed(2)} MB`;
+    }
+    /**
+     * A transferred size, marked `≈` when any part of it was measured from a decoded body instead of read
+     * from a `content-length` header - such a size ignores transport compression.
+     */
+    formatTransferred(bytes, isEstimated) {
+        return `${isEstimated ? '≈' : ''}${this.formatBytes(bytes)}`;
+    }
+    formatDuration(ms) {
+        if (ms === null)
+            return '—';
+        return ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(2)}s`;
+    }
     executeQuery(query, allowCache) {
         query.execute(allowCache ? { options: { allowCache: true } } : undefined);
     }
@@ -47736,11 +48615,18 @@ class QueryDevtoolsComponent {
         const error = query.error();
         const httpStatus = error ? error.raw.status : this.responseStatus(query);
         const method = entry.meta.method ?? '';
-        const route = entry.meta.route || '-';
-        const client = entry.meta.clientBaseUrl ?? entry.meta.clientName ?? '';
+        // The URL actually requested already contains the base URL and the resolved params, so the client
+        // is only spelled out separately when the query has not run and only its `:param` template is known.
+        const requestUrl = this.requestUrl(query);
+        const route = requestUrl ?? entry.meta.route ?? '-';
+        const client = requestUrl ? '' : (entry.meta.clientBaseUrl ?? entry.meta.clientName ?? '');
         const statusLine = `status: ${this.queryStatus(query)}${httpStatus !== null ? ` (${httpStatus})` : ''} · ${this.formatTime(query.lastTimeExecutedAt())}`;
+        const features = entry.meta.features?.length
+            ? `features: ${entry.meta.features.map((feature) => this.featureSummary(feature)).join(' | ')}`
+            : null;
+        const activity = this.activitySummary(this.queryActivity(entry));
         const gqlDoc = entry.meta.gqlQuery ? this.gqlDocument(entry.meta.gqlQuery) : null;
-        const args = query.args();
+        const args = this.queryArgs(query);
         const argsLabel = gqlDoc ? 'Variables' : 'Args';
         const argsJson = args !== null && args !== undefined ? JSON.stringify(args, null, 2) : null;
         const bodyLabel = error ? `Error (${error.raw.status})` : 'Response';
@@ -47750,6 +48636,10 @@ class QueryDevtoolsComponent {
                 : error.error.message
             : JSON.stringify(slimForReport(query.response()), null, 2);
         const textParts = [`${method} ${route}${client ? ` - ${client}` : ''}`, statusLine];
+        if (activity)
+            textParts.push(activity);
+        if (features)
+            textParts.push(features);
         if (gqlDoc)
             textParts.push('', 'GraphQL document', gqlDoc);
         if (argsJson)
@@ -47761,22 +48651,64 @@ class QueryDevtoolsComponent {
             `<b>${esc(method)}</b> <code>${esc(route)}</code>${client ? ` - <code>${esc(client)}</code>` : ''}`,
             esc(statusLine),
         ];
+        if (activity)
+            htmlParts.push(esc(activity));
+        if (features)
+            htmlParts.push(esc(features));
         if (gqlDoc)
             htmlParts.push('<b>GraphQL document</b>', `<pre><code>${esc(gqlDoc)}</code></pre>`);
         if (argsJson)
             htmlParts.push(`<b>${argsLabel}</b>`, `<pre><code>${esc(argsJson)}</code></pre>`);
         htmlParts.push(`<b>${esc(bodyLabel)}</b>`, `<pre><code>${esc(bodyContent)}</code></pre>`);
         const html = htmlParts.join('<br>');
-        this.writeToClipboard(html, text);
+        this.writeToClipboard({ html, text }, this.copiedReport);
+    }
+    // --- Insomnia export ---
+    /** Copies one query as an Insomnia collection, for `Import > From Clipboard`. */
+    copyInsomniaRequest(entry, query) {
+        const requests = [this.insomniaRequest(entry, query)];
+        const json = JSON.stringify(buildInsomniaExport({
+            name: `${entry.meta.clientName ?? 'query'} · ${this.queryRoute(entry, query) || 'request'}`,
+            requests,
+            tokenRefreshes: this.insomniaTokenRefreshes(requests),
+            now: Date.now(),
+        }), null, 2);
+        this.writeToClipboard({ text: json }, this.copiedInsomnia);
+    }
+    /** Copies the GraphQL document as displayed — dedented, so it pastes straight into a playground. */
+    copyGqlDocument(doc) {
+        this.writeToClipboard({ text: this.gqlDocument(doc) }, this.copiedGql);
+    }
+    /**
+     * Downloads every query currently listed (so the client filter and the inspection filter both apply)
+     * as one Insomnia collection, filed into a folder per query client.
+     */
+    downloadInsomniaCollection() {
+        const items = this.filteredQueries();
+        if (!items.length)
+            return;
+        const client = this.selectedClientName();
+        const requests = items.map(({ entry, query }) => this.insomniaRequest(entry, query));
+        const json = JSON.stringify(buildInsomniaExport({
+            name: `${client ?? 'ethlete'} queries`,
+            requests,
+            tokenRefreshes: this.insomniaTokenRefreshes(requests),
+            now: Date.now(),
+        }), null, 2);
+        this.downloadFile(`insomnia-${client ?? 'ethlete'}-queries.json`, json);
     }
     // --- JIT editing ---
     openResponseEditor(query) {
-        this.responseDraft.set(JSON.stringify(query.response() ?? null, null, 2));
+        const draft = JSON.stringify(query.response() ?? null, null, 2);
+        this.editorSeed = draft;
+        this.responseDraft.set(draft);
         this.editError.set(null);
         this.editorMode.set('response');
     }
     openArgsEditor(query) {
-        this.argsDraft.set(JSON.stringify(query.args() ?? {}, null, 2));
+        const draft = JSON.stringify(this.queryArgs(query) ?? {}, null, 2);
+        this.editorSeed = draft;
+        this.argsDraft.set(draft);
         this.editError.set(null);
         this.editorMode.set('args');
     }
@@ -47829,6 +48761,22 @@ class QueryDevtoolsComponent {
         query.subtle.setLoading(null);
         query.subtle.setError(null);
     }
+    /**
+     * Arms one numeric field of a client's fault from an input's raw value. Clamped here rather than left
+     * to the input's `min`/`max`, which a typed-in (or pasted) value ignores.
+     */
+    armFaultValue(options) {
+        const { clientName, field, value } = options;
+        const parsed = clamp$1(Math.trunc(Number(value) || 0), 0, this.FAULT_LIMITS[field]);
+        setQueryDevtoolsFault({ clientName, patch: { [field]: parsed } });
+    }
+    armFaultStatus(options) {
+        setQueryDevtoolsFault({ clientName: options.clientName, patch: { status: Number(options.value) } });
+    }
+    /** Whether the default retry policy retries the status a client is armed to fail with. */
+    isFaultStatusRetryable(status) {
+        return QUERY_DEVTOOLS_FAULT_STATUSES.find((entry) => entry.status === status)?.retryable ?? false;
+    }
     // --- Cache actions ---
     refetchCacheEntry(entry) {
         entry.request.execute();
@@ -47906,6 +48854,50 @@ class QueryDevtoolsComponent {
     asWs(entry) {
         return entry.handle;
     }
+    asForm(entry) {
+        return entry.handle;
+    }
+    /**
+     * The queries a form feeds, discovered from the reads its `value()` recorded while their args were
+     * built - so a form that nothing consumes yet reads as exactly that.
+     */
+    queriesDrivenByForm(entry) {
+        return this.queryEntries()
+            .filter((candidate) => candidate.formLinks?.ids().includes(entry.id))
+            .map((candidate) => this.queryLinkFor(candidate));
+    }
+    /** The reverse: the forms whose value a query's args read. */
+    formsDrivingQuery(entry) {
+        const ids = entry.formLinks?.ids() ?? [];
+        return this.formEntries().filter((form) => ids.includes(form.id));
+    }
+    selectForm(id) {
+        this.activeTab.set('forms');
+        this.selectedFormId.set(id);
+    }
+    /**
+     * The refreshes that re-executed a query, newest first - the answer to "why did this refetch?". Read
+     * off the event log, so it goes back exactly as far as the log does.
+     */
+    refreshesFor(entryId) {
+        return this.eventLog()
+            .filter((item) => item.cause && item.refreshed?.some((refreshed) => refreshed.queryIds.includes(entryId)))
+            .map((item) => ({
+            id: item.id,
+            timestamp: item.timestamp,
+            label: this.causeLabel(item.cause),
+        }));
+    }
+    /** What asked for a refresh, on one line. */
+    causeLabel(cause) {
+        const scope = cause.url ? this.requestPath(cause.url) : 'everything in use';
+        const what = cause.type === 'invalidation'
+            ? `invalidated ${scope}`
+            : cause.type === 'mutation'
+                ? `mutation on ${scope}`
+                : `refreshed ${scope}`;
+        return cause.otherTab ? `${what} · another tab` : what;
+    }
     /** Derives the per-step status of a sequence step from its live progress signals. */
     sequenceStepStatus(sequence, index) {
         const failedAt = sequence.failedAt();
@@ -47927,25 +48919,12 @@ class QueryDevtoolsComponent {
     queriesForStack(stack) {
         const inner = stack.queries();
         const queryEntries = this.queryEntries();
-        return inner.map((query) => {
-            const entry = queryEntries.find((e) => e.handle === query);
-            return {
-                id: entry?.id ?? '',
-                query: query,
-                method: entry?.meta.method ?? '',
-                route: entry?.meta.route ?? '',
-                clientName: entry?.meta.clientName ?? '',
-                clientBaseUrl: entry?.meta.clientBaseUrl ?? '',
-            };
-        });
+        return inner.map((query) => this.queryLinkFor(queryEntries.find((e) => e.handle === query), query));
     }
     /** Identifying info for a stack, derived from its (uniform) inner queries. */
     stackIdentity(stack) {
         const first = this.queriesForStack(stack)[0];
-        return { method: first?.method ?? '', route: first?.route ?? '', baseUrl: first?.clientBaseUrl ?? '' };
-    }
-    authFeatures(auth) {
-        return Object.keys(auth.features ?? {});
+        return { method: first?.method ?? '', segments: first?.segments ?? [], baseUrl: first?.clientBaseUrl ?? '' };
     }
     authQueryKeys(auth) {
         return Object.keys(auth.queries ?? {});
@@ -47968,15 +48947,7 @@ class QueryDevtoolsComponent {
     }
     queriesForSequence(sequence) {
         const queryEntries = this.queryEntries();
-        return sequence.queries.map((query) => {
-            const entry = queryEntries.find((e) => e.handle === query);
-            return {
-                id: entry?.id ?? '',
-                query: query,
-                method: entry?.meta.method ?? '',
-                route: entry?.meta.route ?? '',
-            };
-        });
+        return sequence.queries.map((query) => this.queryLinkFor(queryEntries.find((e) => e.handle === query), query));
     }
     /** The snapshot of a sequence step, once it has run (holds the args in and the response/error out). */
     stepSnapshot(sequence, index) {
@@ -48013,6 +48984,16 @@ class QueryDevtoolsComponent {
             .replace(/_/g, ' ')
             .toLowerCase();
     }
+    /** A feature and its options on one line, for a report or a chip's tooltip. */
+    featureSummary(feature) {
+        const details = feature.details.map((detail) => `${detail.label} ${detail.value}`);
+        return [this.featureLabel(feature.type), ...details].join(' · ');
+    }
+    /** The features of the client behind a cache tab card, or `null` for a client without any. */
+    clientFeatures(client) {
+        const features = client?.subtle.devtoolsFeatures ?? [];
+        return features.length ? features : null;
+    }
     formatTime(timestamp) {
         if (!timestamp)
             return '-';
@@ -48021,8 +49002,185 @@ class QueryDevtoolsComponent {
     eventTypeLabel(event) {
         if (event.type === 'unbind-all-secure')
             return 'logout';
+        if (event.type === 'queries-refreshed')
+            return `refetch ×${event.refreshed?.length ?? 0}`;
         return event.type === 'request-error' ? `error ${event.status}` : 'success';
     }
+    /** A registered query as a row that opens the detail drawer. */
+    queryLinkFor(entry, query = entry?.handle) {
+        return {
+            id: entry?.id ?? '',
+            query,
+            method: entry?.meta.method ?? '',
+            segments: this.routeSegments(entry, query),
+            clientBaseUrl: entry?.meta.clientBaseUrl ?? '',
+            stats: entry?.stats,
+        };
+    }
+    /** The activity of one entry, or the total of a group of them (a stack's queries, a whole tab). */
+    activityOf(handles) {
+        const stats = sumQueryDevtoolsStats(handles);
+        return {
+            stats,
+            cacheServed: Math.max(0, stats.executions - stats.requests),
+            avgDurationMs: stats.responses ? Math.round(stats.totalDurationMs / stats.responses) : null,
+            avgResponseBytes: stats.responses ? Math.round(stats.receivedBytes / stats.responses) : null,
+            hasActivity: stats.executions > 0,
+        };
+    }
+    /** An activity summary on one line, for a report. `null` for a query that has not run. */
+    activitySummary(activity) {
+        if (!activity.hasActivity)
+            return null;
+        const { stats } = activity;
+        const parts = [
+            `${stats.executions} execution${stats.executions === 1 ? '' : 's'}`,
+            `${stats.requests} request${stats.requests === 1 ? '' : 's'}`,
+            `↓ ${this.formatTransferred(stats.receivedBytes, stats.hasEstimatedBytes)}`,
+        ];
+        if (stats.sentBytes)
+            parts.push(`↑ ${this.formatTransferred(stats.sentBytes, stats.hasEstimatedBytes)}`);
+        if (stats.errors)
+            parts.push(`${stats.errors} failed`);
+        if (stats.retries)
+            parts.push(`${stats.retries} retr${stats.retries === 1 ? 'y' : 'ies'}`);
+        if (activity.avgDurationMs !== null)
+            parts.push(`avg ${this.formatDuration(activity.avgDurationMs)}`);
+        return `activity: ${parts.join(' · ')}`;
+    }
+    /** A query matches the chips if it is in any of the picked states - chips widen, they don't intersect. */
+    matchesFacets(query, facets) {
+        const status = this.queryStatus(query);
+        return ((facets.has('error') && status === 'error') ||
+            (facets.has('loading') && status === 'loading') ||
+            (facets.has('idle') && status === 'idle') ||
+            (facets.has('stale') && this.isStale(query)));
+    }
+    /**
+     * What the search box matches against: what the row shows, plus the path of the request that ran for a
+     * query whose template differs from it.
+     *
+     * Deliberately not the origin or the client name - both repeat across most entries, so a short term
+     * ("p") would match nearly everything through the host name. Scoping to a client is the picker's job.
+     */
+    queryHaystack(entry, query) {
+        const url = this.requestUrl(query);
+        const parts = [entry.meta.method, this.queryRoute(entry, query), url ? this.requestPath(url) : null];
+        return parts.join(' ').toLowerCase();
+    }
+    /** {@link routeSegments} as a plain string, for the places that cannot render markup. */
+    queryRoute(entry, query) {
+        return this.routeSegments(entry, query)
+            .map((segment) => segment.text)
+            .join('');
+    }
+    /**
+     * Describes a query the way a replay outside the app needs it: the URL, headers and body of the
+     * request it last made, or - for a query that has not run - what its current args would send.
+     */
+    insomniaRequest(entry, query) {
+        const request = query.subtle.request();
+        const args = this.queryArgs(query);
+        const route = this.queryRoute(entry, query);
+        return {
+            // A GraphQL query has no HTTP method of its own until it runs; its transport is POST unless the
+            // creator says otherwise, which is only knowable from the request.
+            method: request?.method ?? (entry.meta.gqlQuery ? 'POST' : (entry.meta.method ?? 'GET')),
+            url: request?.url ?? `${entry.meta.clientBaseUrl ?? ''}${route}`,
+            // Query params are part of the name so that several requests to the same endpoint (the pages of a
+            // stack, a search) stay tellable apart in Insomnia's sidebar.
+            name: `${entry.meta.method ?? ''} ${request ? this.requestPath(request.url) : route || query.id() || 'request'}`.trim(),
+            headers: this.insomniaHeaders(request, args),
+            body: args?.body ?? null,
+            gqlQuery: entry.meta.gqlQuery ? this.gqlDocument(entry.meta.gqlQuery) : null,
+            group: entry.meta.clientName ?? null,
+            secureBy: entry.meta.isSecure ? (entry.meta.authProviderName ?? null) : null,
+        };
+    }
+    /**
+     * The token refreshes the given requests authenticate with - one per auth provider they name, and
+     * only for a provider that is logged in, since a refresh request without a refresh token has
+     * nothing to send.
+     */
+    insomniaTokenRefreshes(requests) {
+        const names = new Set(requests.map((request) => request.secureBy).filter((name) => typeof name === 'string'));
+        return Array.from(names)
+            .map((name) => this.insomniaTokenRefresh(name))
+            .filter((refresh) => refresh !== null);
+    }
+    insomniaTokenRefresh(providerName) {
+        const entry = this.authEntries().find((candidate) => candidate.meta.name === providerName);
+        const refresh = entry?.meta.authQueries?.find((authQuery) => authQuery.kind === 'token-refresh');
+        if (!entry || !refresh)
+            return null;
+        const provider = entry.handle;
+        const refreshToken = provider.refreshToken();
+        if (!refreshToken)
+            return null;
+        return {
+            id: providerName,
+            name: `${refresh.method} ${refresh.route} (token refresh)`,
+            method: refresh.method,
+            url: `${entry.meta.clientBaseUrl ?? ''}${refresh.route}`,
+            headers: [],
+            body: refresh.buildArgs?.(refreshToken).body ?? null,
+            group: entry.meta.clientName ?? null,
+            accessTokenPath: this.accessTokenPath(provider),
+            maxAgeSeconds: this.accessTokenMaxAge(provider),
+        };
+    }
+    /**
+     * Where the access token sits in the refresh response. A provider's `extractTokens` can pull it out
+     * of any shape, so the path is recovered by finding the live token in the last auth response - with
+     * the default extractor's `$.accessToken` as the fallback.
+     */
+    accessTokenPath(provider) {
+        const token = provider.accessToken();
+        const response = provider.latestExecutedQuery()?.snapshot.response();
+        const path = token && response ? findValuePath(token, { value: response, path: '$', depth: 0 }) : null;
+        return path ?? '$.accessToken';
+    }
+    /**
+     * How long Insomnia may reuse a stored refresh response: the access token's own lifetime with a
+     * margin, so the chain refreshes shortly before the token it hands out would expire. Capped at an
+     * hour - a long-lived (or bogus) `exp` should still hand out a token minted this session.
+     */
+    accessTokenMaxAge(provider) {
+        const payload = decodeJwtPayload(provider.accessToken());
+        const exp = payload?.['exp'];
+        const iat = payload?.['iat'];
+        if (typeof exp !== 'number')
+            return DEFAULT_TOKEN_MAX_AGE_S;
+        const lifetime = exp - (typeof iat === 'number' ? iat : Math.floor(Date.now() / 1000));
+        if (lifetime <= 0)
+            return DEFAULT_TOKEN_MAX_AGE_S;
+        return Math.min(MAX_TOKEN_MAX_AGE_S, Math.max(60, Math.round(lifetime * 0.9)));
+    }
+    /**
+     * The headers a replay needs, including the ones the query client adds. Header providers can throw
+     * (a secure query's needs an access token), in which case the request is exported without them.
+     */
+    insomniaHeaders(request, args) {
+        try {
+            const headers = request
+                ? request.subtle.resolveHeaders()
+                : typeof args?.headers === 'function'
+                    ? args.headers()
+                    : args?.headers;
+            return (headers?.keys() ?? []).map((name) => ({ name, value: headers?.getAll(name)?.join(', ') ?? '' }));
+        }
+        catch {
+            return [];
+        }
+    }
+    downloadFile(fileName, content) {
+        const url = URL.createObjectURL(new Blob([content], { type: 'application/json' }));
+        const anchor = this.renderer.createElement('a');
+        anchor.href = url;
+        anchor.download = fileName;
+        anchor.click();
+        URL.revokeObjectURL(url);
+    }
     stepKey(entryId, index) {
         return `${entryId}:${index}`;
     }
@@ -48069,31 +49227,37 @@ class QueryDevtoolsComponent {
         this.inspectActive.set(false);
     }
     selectionKey() {
-        return `${this.selectedQueryId()}|${this.stackSelectedQueryId()}|${this.sequenceSelectedQueryId()}`;
-    }
-    writeToClipboard(html, text) {
+        return [
+            this.selectedQueryId(),
+            this.stackSelectedQueryId(),
+            this.sequenceSelectedQueryId(),
+            this.formSelectedQueryId(),
+            this.timelineSelectedQueryId(),
+        ].join('|');
+    }
+    /** Writes to the clipboard and ticks `copied` on success. `html` is omitted for plain-text payloads. */
+    writeToClipboard(payload, copied) {
         const clipboard = navigator.clipboard;
+        const { text, html } = payload;
         if (!clipboard)
             return;
+        const flag = () => {
+            copied.set(true);
+            this.copiedReset$.next();
+        };
         // Prefer rich HTML (Slack keeps the formatting on paste); fall back to plain text.
-        if ('write' in clipboard && typeof ClipboardItem !== 'undefined') {
+        if (html !== undefined && 'write' in clipboard && typeof ClipboardItem !== 'undefined') {
             const item = new ClipboardItem({
                 'text/html': new Blob([html], { type: 'text/html' }),
                 'text/plain': new Blob([text], { type: 'text/plain' }),
             });
             clipboard
                 .write([item])
-                .then(() => this.copiedReport.set(true))
-                .catch(() => clipboard
-                .writeText(text)
-                .then(() => this.copiedReport.set(true))
-                .catch(() => undefined));
+                .then(flag)
+                .catch(() => clipboard.writeText(text).then(flag).catch(noop));
             return;
         }
-        clipboard
-            .writeText(text)
-            .then(() => this.copiedReport.set(true))
-            .catch(() => undefined);
+        clipboard.writeText(text).then(flag).catch(noop);
     }
     responseStatus(query) {
         const event = query.latestHttpEvent();
@@ -48110,28 +49274,66 @@ class QueryDevtoolsComponent {
         // so a row for it would only ever duplicate the next one.
         if (event.type === 'entry-created')
             return;
-        const base = { id: this.eventIdCounter++, timestamp: Date.now(), client, type: event.type };
+        const base = {
+            id: this.eventIdCounter++,
+            timestamp: Date.now(),
+            client,
+            type: event.type,
+            cause: null,
+            refreshed: null,
+        };
         // A logout drops every secure entry at once - worth a row of its own, since the requests that
         // disappear from the cache view are otherwise unexplained.
-        const item = event.type === 'unbind-all-secure'
-            ? { ...base, method: null, url: null, isSecure: true, status: null }
-            : {
+        if (event.type === 'unbind-all-secure') {
+            this.pushEventItem({ ...base, method: null, url: null, isSecure: true, status: null, queryId: null });
+            return;
+        }
+        // An invalidation is one row for the whole fan-out: the six queries it re-executed are listed on it
+        // rather than blurring into the six request rows that follow.
+        if (event.type === 'queries-refreshed') {
+            this.pushEventItem({
                 ...base,
-                method: event.request.method,
-                url: event.request.url,
-                isSecure: event.isSecure,
-                status: event.type === 'request-error' ? event.error.status : null,
-            };
+                method: null,
+                url: null,
+                isSecure: false,
+                status: null,
+                queryId: null,
+                cause: event.cause,
+                refreshed: event.requests.map((request) => this.refreshedRequestOf(request)),
+            });
+            return;
+        }
+        this.pushEventItem({
+            ...base,
+            method: event.request.method,
+            url: event.request.url,
+            isSecure: event.isSecure,
+            status: event.type === 'request-error' ? event.error.status : null,
+            // A request is shared by every query on the same cache key, so the first owner is as good
+            // as any - they all show the same response.
+            queryId: this.queryEntries().find((e) => e.handle.subtle.request() === event.request)?.id ?? null,
+        });
+    }
+    refreshedRequestOf(request) {
+        return {
+            queryIds: this.queryEntries()
+                .filter((e) => e.handle.subtle.request() === request)
+                .map((owner) => owner.id),
+            method: request.method,
+            path: this.requestPath(request.url),
+        };
+    }
+    pushEventItem(item) {
         this.eventLog.update((log) => [item, ...log].slice(0, MAX_EVENTS));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools-host" }, ngImport: i0, template: "@if (open()) {\n  <section\n    [class.et-query-devtools-panel--resizing]=\"resizing()\"\n    [style.height.px]=\"panelHeight()\"\n    class=\"et-query-devtools-panel\"\n  >\n    <div\n      (pointerdown)=\"startResize($event)\"\n      class=\"et-query-devtools-resize\"\n      title=\"Drag to resize\"\n      aria-hidden=\"true\"\n    ></div>\n    <header class=\"et-query-devtools-header\">\n      <nav class=\"et-query-devtools-tabs\" role=\"tablist\">\n        @for (tab of tabs; track tab.id) {\n          <button\n            [class.et-query-devtools-tab--active]=\"activeTab() === tab.id\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n            (click)=\"activeTab.set(tab.id)\"\n            class=\"et-query-devtools-tab\"\n            type=\"button\"\n            role=\"tab\"\n          >\n            {{ tab.label }}\n          </button>\n        }\n      </nav>\n\n      <div class=\"et-query-devtools-header-actions\">\n        <button\n          [class.et-query-devtools-inspect-btn--active]=\"inspectActive()\"\n          (click)=\"toggleInspect()\"\n          class=\"et-query-devtools-inspect-btn\"\n          type=\"button\"\n          title=\"Inspect: hover the UI to find its query\"\n        >\n          \u2316 Inspect\n        </button>\n        <button\n          (click)=\"toggleOpen()\"\n          class=\"et-query-devtools-close-panel\"\n          type=\"button\"\n          title=\"Close devtools ({{ shortcut }})\"\n        >\n          <span aria-hidden=\"true\">\u2715</span>\n          Close\n          <kbd class=\"et-query-devtools-kbd\">{{ shortcut }}</kbd>\n        </button>\n      </div>\n    </header>\n\n    <div class=\"et-query-devtools-body\">\n      @switch (activeTab()) {\n        <!-- QUERIES -->\n        @case ('queries') {\n          <div class=\"et-query-devtools-master-detail\">\n            <div class=\"et-query-devtools-list\">\n              <div [class.et-query-devtools-toolbar--filtered]=\"!!inspectFilterIds()\" class=\"et-query-devtools-toolbar\">\n                @if (inspectFilterIds(); as ids) {\n                  <span class=\"et-query-devtools-filter-chip\">\n                    <span class=\"et-query-devtools-filter-icon\" aria-hidden=\"true\">\u2316</span>\n                    Inspected element\n                    <span class=\"et-query-devtools-filter-count\">{{ ids.length }}</span>\n                  </span>\n                  <button\n                    (click)=\"clearInspectFilter()\"\n                    class=\"et-query-devtools-filter-clear\"\n                    type=\"button\"\n                    title=\"Clear the inspection filter and show all queries\"\n                  >\n                    <span aria-hidden=\"true\">\u2715</span>\n                    Clear\n                  </button>\n                } @else {\n                  <label class=\"et-query-devtools-field\">\n                    <span>Client</span>\n                    <select\n                      #clientSelect\n                      [value]=\"selectedClientName() ?? ''\"\n                      (change)=\"selectClient(clientSelect.value || null)\"\n                      class=\"et-query-devtools-select\"\n                    >\n                      <option value=\"\">All clients</option>\n                      @for (name of clientNames(); track name) {\n                        <option [value]=\"name\">{{ name }}</option>\n                      }\n                    </select>\n                  </label>\n                  <span class=\"et-query-devtools-count\">{{ filteredQueries().length }}</span>\n                }\n              </div>\n\n              @for (item of filteredQueries(); track item.entry.id) {\n                <button\n                  [class.et-query-devtools-row--active]=\"selectedQueryId() === item.entry.id\"\n                  (click)=\"selectedQueryId.set(item.entry.id)\"\n                  class=\"et-query-devtools-row\"\n                  type=\"button\"\n                >\n                  <span\n                    [attr.data-status]=\"queryStatus(item.query)\"\n                    [title]=\"queryStatus(item.query)\"\n                    class=\"et-query-devtools-status\"\n                  ></span>\n                  <span class=\"et-query-devtools-method\">{{ item.entry.meta.method }}</span>\n                  <span class=\"et-query-devtools-route\">{{ item.entry.meta.route || '\u2014' }}</span>\n                  @if (isStale(item.query)) {\n                    <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">stale</span>\n                  }\n                </button>\n              } @empty {\n                @if (inspectFilterIds()) {\n                  <p class=\"et-query-devtools-empty\">\n                    The inspected element's queries are no longer registered. Clear the filter.\n                  </p>\n                } @else {\n                  <p class=\"et-query-devtools-empty\">No queries registered.</p>\n                }\n              }\n            </div>\n\n            <div class=\"et-query-devtools-detail\">\n              @if (selectedQuery(); as sel) {\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              } @else {\n                <p class=\"et-query-devtools-empty\">Select a query to inspect it.</p>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- STACKS -->\n        @case ('stacks') {\n          <div class=\"et-query-devtools-split\">\n            <div class=\"et-query-devtools-scroll\">\n              @for (entry of stackEntries(); track entry.id) {\n                @if (entry.kind === 'paged-query-stack') {\n                  @let paged = asPagedStack(entry);\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">paged stack</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ paged.direction() }}</span>\n                      @if (paged.loading()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--loading\">loading</span>\n                      }\n                    </div>\n\n                    @let pagedId = stackIdentity(paged);\n                    <div class=\"et-query-devtools-card-title\">\n                      <span class=\"et-query-devtools-method\">{{ pagedId.method }}</span>\n                      <span class=\"et-query-devtools-route\">{{ pagedId.route }}</span>\n                    </div>\n                    <div class=\"et-query-devtools-card-sub et-query-devtools-mono\">{{ pagedId.baseUrl }}</div>\n                    @if (entry.meta.featureTypes?.length) {\n                      <div class=\"et-query-devtools-chips\">\n                        @for (feature of entry.meta.featureTypes; track feature) {\n                          <span class=\"et-query-devtools-chip\">{{ featureLabel(feature) }}</span>\n                        }\n                      </div>\n                    }\n\n                    <dl class=\"et-query-devtools-meta\">\n                      <dt>Pages loaded</dt>\n                      <dd>{{ paged.queries().length }}</dd>\n                      <dt>Items</dt>\n                      <dd>{{ paged.items().length }}</dd>\n                      <dt>First page loaded</dt>\n                      <dd>{{ paged.isFirstPageLoaded() }}</dd>\n                      <dt>Last page loaded</dt>\n                      <dd>{{ paged.isLastPageLoaded() }}</dd>\n                    </dl>\n                    <ng-container *ngTemplateOutlet=\"innerQueriesTpl; context: { links: queriesForStack(paged) }\" />\n                  </div>\n                } @else {\n                  @let stack = asStack(entry);\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">stack</span>\n                      @if (stack.anyLoading()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--loading\">loading</span>\n                      }\n                      @if (stack.anyError()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--error\">error</span>\n                      }\n                    </div>\n\n                    @let stackId = stackIdentity(stack);\n                    <div class=\"et-query-devtools-card-title\">\n                      <span class=\"et-query-devtools-method\">{{ stackId.method }}</span>\n                      <span class=\"et-query-devtools-route\">{{ stackId.route }}</span>\n                    </div>\n                    <div class=\"et-query-devtools-card-sub et-query-devtools-mono\">{{ stackId.baseUrl }}</div>\n                    @if (entry.meta.featureTypes?.length) {\n                      <div class=\"et-query-devtools-chips\">\n                        @for (feature of entry.meta.featureTypes; track feature) {\n                          <span class=\"et-query-devtools-chip\">{{ featureLabel(feature) }}</span>\n                        }\n                      </div>\n                    }\n\n                    <dl class=\"et-query-devtools-meta\">\n                      <dt>Queries</dt>\n                      <dd>{{ stack.queries().length }}</dd>\n                      <dt>Loading</dt>\n                      <dd>{{ stack.loadingProgress().loaded }} / {{ stack.loadingProgress().total }}</dd>\n                      <dt>Errors</dt>\n                      <dd>{{ stack.errors().length }}</dd>\n                    </dl>\n                    <ng-container *ngTemplateOutlet=\"innerQueriesTpl; context: { links: queriesForStack(stack) }\" />\n                  </div>\n                }\n              } @empty {\n                <p class=\"et-query-devtools-empty\">No stacks registered.</p>\n              }\n            </div>\n\n            @if (stackSelectedQuery(); as sel) {\n              <aside class=\"et-query-devtools-drawer\">\n                <div class=\"et-query-devtools-drawer-head\">\n                  <span>Query detail</span>\n                  <button\n                    (click)=\"stackSelectedQueryId.set(null)\"\n                    class=\"et-query-devtools-close\"\n                    type=\"button\"\n                    title=\"Close detail\"\n                  >\n                    \u2715\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              </aside>\n            }\n          </div>\n        }\n\n        <!-- SEQUENCES -->\n        @case ('sequences') {\n          <div class=\"et-query-devtools-split\">\n            <div class=\"et-query-devtools-scroll\">\n              @for (entry of sequenceEntries(); track entry.id) {\n                @let sequence = asSequence(entry);\n                @if (sequence) {\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">sequence</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ sequence.status() }}</span>\n                      <span class=\"et-query-devtools-count\"\n                        >step {{ sequence.currentStep() }} / {{ sequence.total }}</span\n                      >\n                    </div>\n\n                    <ol class=\"et-query-devtools-step-list\">\n                      @for (link of queriesForSequence(sequence); track $index; let i = $index) {\n                        <li [attr.data-status]=\"sequenceStepStatus(sequence, i)\" class=\"et-query-devtools-step-item\">\n                          <div class=\"et-query-devtools-step-head\">\n                            <button\n                              [class.et-query-devtools-inner-row--active]=\"sequenceSelectedQueryId() === link.id\"\n                              [disabled]=\"!link.id\"\n                              (click)=\"sequenceSelectedQueryId.set(link.id)\"\n                              class=\"et-query-devtools-inner-row\"\n                              type=\"button\"\n                            >\n                              <span\n                                [attr.data-status]=\"sequenceStepStatus(sequence, i)\"\n                                class=\"et-query-devtools-status\"\n                              ></span>\n                              <span class=\"et-query-devtools-method\">{{ i + 1 }}. {{ link.method }}</span>\n                              <span class=\"et-query-devtools-route\">{{ link.route || 'step ' + (i + 1) }}</span>\n                            </button>\n                            <button\n                              [attr.aria-expanded]=\"isStepExpanded(entry.id, i)\"\n                              (click)=\"toggleStep(entry.id, i)\"\n                              class=\"et-query-devtools-step-caret-btn\"\n                              type=\"button\"\n                              title=\"Toggle in / out\"\n                            >\n                              {{ isStepExpanded(entry.id, i) ? '\u25BE' : '\u25B8' }}\n                            </button>\n                          </div>\n\n                          @if (isStepExpanded(entry.id, i)) {\n                            @let snap = stepSnapshot(sequence, i);\n                            <div class=\"et-query-devtools-step-io\">\n                              <h5 class=\"et-query-devtools-section\">In \u00B7 args</h5>\n                              @if (sequence.stepArgs().length > i) {\n                                <et-query-devtools-json [value]=\"sequence.stepArgs()[i]\" />\n                              } @else {\n                                <p class=\"et-query-devtools-empty\">Not run yet.</p>\n                              }\n\n                              @if (snap?.error(); as error) {\n                                <h5 class=\"et-query-devtools-section\">Out \u00B7 error ({{ error.raw.status }})</h5>\n                                <et-query-devtools-json [value]=\"error.isList ? error.errors : error.error\" />\n                              } @else {\n                                <h5 class=\"et-query-devtools-section\">Out \u00B7 response</h5>\n                                @if (snap) {\n                                  <et-query-devtools-json [value]=\"snap.response()\" />\n                                } @else {\n                                  <p class=\"et-query-devtools-empty\">Not run yet.</p>\n                                }\n                              }\n                            </div>\n                          }\n                        </li>\n                      }\n                    </ol>\n                  </div>\n                }\n              } @empty {\n                <p class=\"et-query-devtools-empty\">No sequences registered.</p>\n              }\n            </div>\n\n            @if (sequenceSelectedQuery(); as sel) {\n              <aside class=\"et-query-devtools-drawer\">\n                <div class=\"et-query-devtools-drawer-head\">\n                  <span>Query detail</span>\n                  <button\n                    (click)=\"sequenceSelectedQueryId.set(null)\"\n                    class=\"et-query-devtools-close\"\n                    type=\"button\"\n                    title=\"Close detail\"\n                  >\n                    \u2715\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              </aside>\n            }\n          </div>\n        }\n\n        <!-- AUTH -->\n        @case ('auth') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (entry of authEntries(); track entry.id) {\n              @let auth = asAuth(entry);\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong>{{ entry.meta.name || 'auth provider' }}</strong>\n                  <span\n                    [class.et-query-devtools-chip--success]=\"auth.isAuthenticated()\"\n                    [class.et-query-devtools-chip--muted]=\"!auth.isAuthenticated()\"\n                    class=\"et-query-devtools-chip\"\n                  >\n                    {{ auth.isAuthenticated() ? 'authenticated' : 'anonymous' }}\n                  </span>\n                </div>\n                <dl class=\"et-query-devtools-meta\">\n                  <dt>Base URL</dt>\n                  <dd class=\"et-query-devtools-mono\">{{ entry.meta.clientBaseUrl || entry.meta.clientName || '\u2014' }}</dd>\n                  <dt>Access token</dt>\n                  <dd>{{ auth.accessToken() ? 'present' : 'none' }}</dd>\n                  <dt>Refresh token</dt>\n                  <dd>{{ auth.refreshToken() ? 'present' : 'none' }}</dd>\n                  @if (authTokenExpiry(auth); as expiry) {\n                    <dt>Token expires in</dt>\n                    <dd>{{ expiry }}</dd>\n                  }\n                  @if (auth.executionState(); as state) {\n                    <dt>Execution state</dt>\n                    <dd>{{ state.type }} \u00B7 {{ state.state }}</dd>\n                  }\n                  @if (authQueryKeys(auth).length) {\n                    <dt>Queries</dt>\n                    <dd>\n                      <div class=\"et-query-devtools-chips\">\n                        @for (key of authQueryKeys(auth); track key) {\n                          <span class=\"et-query-devtools-chip\">{{ key }}</span>\n                        }\n                      </div>\n                    </dd>\n                  }\n                  @if (authFeatures(auth).length) {\n                    <dt>Features</dt>\n                    <dd>\n                      <div class=\"et-query-devtools-chips\">\n                        @for (feature of authFeatures(auth); track feature) {\n                          <span class=\"et-query-devtools-chip\">{{ feature }}</span>\n                        }\n                      </div>\n                    </dd>\n                  }\n                </dl>\n\n                @if (authTokenPayload(auth); as payload) {\n                  <h4 class=\"et-query-devtools-section\">Access token payload</h4>\n                  <et-query-devtools-json [value]=\"payload\" />\n                }\n\n                @if (auth.latestNonInternalQuery(); as latest) {\n                  <h4 class=\"et-query-devtools-section\">Latest auth query \u00B7 {{ latest.key }}</h4>\n                  <et-query-devtools-json [value]=\"latest.snapshot.response()\" />\n                }\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No auth providers registered.</p>\n            }\n          </div>\n        }\n\n        <!-- SOCKETS -->\n        @case ('ws') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (entry of wsEntries(); track entry.id) {\n              @let ws = asWs(entry);\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong>{{ entry.meta.name || 'socket' }}</strong>\n                  <span\n                    [class.et-query-devtools-chip--success]=\"ws.connected()\"\n                    [class.et-query-devtools-chip--muted]=\"!ws.connected()\"\n                    class=\"et-query-devtools-chip\"\n                  >\n                    {{ ws.connected() ? 'connected' : 'disconnected' }}\n                  </span>\n                </div>\n                <dl class=\"et-query-devtools-meta\">\n                  <dt>URL</dt>\n                  <dd class=\"et-query-devtools-mono\">{{ entry.meta.url }}</dd>\n                  <dt>Rooms</dt>\n                  <dd>\n                    @if (ws.rooms().length) {\n                      <div class=\"et-query-devtools-chips\">\n                        @for (room of ws.rooms(); track room) {\n                          <span class=\"et-query-devtools-chip\">{{ room }}</span>\n                        }\n                      </div>\n                    } @else {\n                      none\n                    }\n                  </dd>\n                </dl>\n\n                <h5 class=\"et-query-devtools-section\">Messages ({{ ws.messages().length }})</h5>\n                @for (message of ws.messages(); track message.id) {\n                  <div class=\"et-query-devtools-ws-message\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-count\">{{ formatTime(message.timestamp) }}</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ message.room }}</span>\n                      <span class=\"et-query-devtools-method\">{{ message.event }}</span>\n                    </div>\n                    <et-query-devtools-json [value]=\"message.data\" />\n                  </div>\n                } @empty {\n                  <p class=\"et-query-devtools-empty\">No messages received yet.</p>\n                }\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No web socket clients registered.</p>\n            }\n          </div>\n        }\n\n        <!-- CACHE -->\n        @case ('cache') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (client of cacheView(); track client.name) {\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong class=\"et-query-devtools-mono\">{{ client.baseUrl || client.name }}</strong>\n                  <span class=\"et-query-devtools-count\">{{ client.entries.length }} entries</span>\n                  @if (client.client?.subtle?.persistence) {\n                    <span class=\"et-query-devtools-count\">{{ persistedCount(client.client!) }} on disk</span>\n                    <button (click)=\"clearPersistedQueries(client.client!)\" class=\"et-query-devtools-btn\" type=\"button\">\n                      Clear disk\n                    </button>\n                  }\n                </div>\n                <table class=\"et-query-devtools-table\">\n                  <thead>\n                    <tr>\n                      <th>Request</th>\n                      <th>Consumers</th>\n                      <th>Secure</th>\n                      <th>Freshness</th>\n                      <th>Sync</th>\n                      <th>Disk</th>\n                      <th>Actions</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (cacheEntry of client.entries; track cacheEntry.key) {\n                      <tr>\n                        <td [title]=\"cacheEntry.request.method + ' ' + cacheEntry.request.url\">\n                          <span class=\"et-query-devtools-method\">{{ cacheEntry.request.method }}</span>\n                          <span class=\"et-query-devtools-url\">{{ requestPath(cacheEntry.request.url) }}</span>\n                        </td>\n                        <td>{{ cacheEntry.consumerCount }}</td>\n                        <td>{{ cacheEntry.isSecure ? 'yes' : 'no' }}</td>\n                        <td>{{ cacheFreshness(cacheEntry) }}</td>\n                        <td>{{ cacheSync(cacheEntry, client.pollStates) }}</td>\n                        <td>{{ cachePersistence(cacheEntry) }}</td>\n                        <td class=\"et-query-devtools-cell-actions\">\n                          <button (click)=\"refetchCacheEntry(cacheEntry)\" class=\"et-query-devtools-btn\" type=\"button\">\n                            Refetch\n                          </button>\n                          <button\n                            (click)=\"evictCacheEntry(client.repository, cacheEntry.key)\"\n                            class=\"et-query-devtools-btn\"\n                            type=\"button\"\n                          >\n                            Evict\n                          </button>\n                        </td>\n                      </tr>\n                    } @empty {\n                      <tr>\n                        <td class=\"et-query-devtools-empty\" colspan=\"7\">Cache empty.</td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No clients with a cache yet.</p>\n            }\n          </div>\n        }\n\n        <!-- EVENTS -->\n        @case ('events') {\n          <div class=\"et-query-devtools-scroll\">\n            <div class=\"et-query-devtools-toolbar\">\n              <span class=\"et-query-devtools-count\">{{ eventLog().length }} events</span>\n              <button (click)=\"clearEvents()\" class=\"et-query-devtools-btn\" type=\"button\">Clear</button>\n            </div>\n            <table class=\"et-query-devtools-table\">\n              <thead>\n                <tr>\n                  <th>Time</th>\n                  <th>Base URL</th>\n                  <th>Type</th>\n                  <th>Request</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (event of eventLog(); track event.id) {\n                  <tr [attr.data-status]=\"event.type === 'request-error' ? 'error' : 'success'\">\n                    <td>{{ formatTime(event.timestamp) }}</td>\n                    <td class=\"et-query-devtools-mono\">{{ event.client }}</td>\n                    <td>\n                      {{ eventTypeLabel(event) }}\n                      @if (event.isSecure) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">secure</span>\n                      }\n                    </td>\n                    @if (event.url; as url) {\n                      <td [title]=\"event.method + ' ' + url\">\n                        <span class=\"et-query-devtools-method\">{{ event.method }}</span>\n                        <span class=\"et-query-devtools-url\">{{ requestPath(url) }}</span>\n                      </td>\n                    } @else {\n                      <td class=\"et-query-devtools-url\">all secure entries dropped</td>\n                    }\n                  </tr>\n                } @empty {\n                  <tr>\n                    <td class=\"et-query-devtools-empty\" colspan=\"4\">No events captured yet.</td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Reusable inner-query list (stacks) \u2014 clicking opens the split-view drawer, not a tab switch. -->\n    <ng-template #innerQueriesTpl let-links=\"links\">\n      <div class=\"et-query-devtools-inner-queries\">\n        @for (link of links; track $index) {\n          <button\n            [class.et-query-devtools-inner-row--active]=\"stackSelectedQueryId() === link.id\"\n            [disabled]=\"!link.id\"\n            (click)=\"stackSelectedQueryId.set(link.id)\"\n            class=\"et-query-devtools-inner-row\"\n            type=\"button\"\n          >\n            <span [attr.data-status]=\"queryStatus(link.query)\" class=\"et-query-devtools-status\"></span>\n            <span class=\"et-query-devtools-method\">{{ link.method }}</span>\n            <span class=\"et-query-devtools-route\">{{ link.route || link.query.id() || 'query ' + ($index + 1) }}</span>\n          </button>\n        }\n      </div>\n    </ng-template>\n\n    <!-- Reusable query detail \u2014 used by the Queries tab and the stacks split-view drawer. -->\n    <ng-template #queryDetailTpl let-sel=\"sel\">\n      <div class=\"et-query-devtools-detail-head\">\n        <span class=\"et-query-devtools-method\">{{ sel.entry.meta.method }}</span>\n        <span class=\"et-query-devtools-route\">{{ sel.entry.meta.route || '\u2014' }}</span>\n      </div>\n\n      <div class=\"et-query-devtools-actions\">\n        <span class=\"et-query-devtools-actions-label\">Run</span>\n        <button (click)=\"executeQuery(sel.query, false)\" class=\"et-query-devtools-btn\" type=\"button\">Execute</button>\n        <button (click)=\"executeQuery(sel.query, true)\" class=\"et-query-devtools-btn\" type=\"button\">Cached</button>\n        <button (click)=\"resetQuery(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Reset</button>\n        <button (click)=\"copyReport(sel.entry, sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">\n          {{ copiedReport() ? '\u2713 Copied' : 'Copy report' }}\n        </button>\n        <span class=\"et-query-devtools-actions-label\">Edit</span>\n        <button (click)=\"openResponseEditor(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Response</button>\n        <button (click)=\"openArgsEditor(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Replay args</button>\n        <span class=\"et-query-devtools-actions-label\">Force</span>\n        <button (click)=\"forceLoading(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Loading</button>\n        <button (click)=\"forceError(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Error</button>\n        <button (click)=\"forceEmpty(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Empty</button>\n        <button (click)=\"clearForced(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Clear</button>\n      </div>\n\n      @if (editorMode() !== 'none') {\n        <div class=\"et-query-devtools-editor\">\n          @if (editorMode() === 'response') {\n            <h4 class=\"et-query-devtools-section\">Edit response \u2192 setResponse()</h4>\n            <textarea\n              #respArea\n              [value]=\"responseDraft()\"\n              (input)=\"responseDraft.set(respArea.value)\"\n              class=\"et-query-devtools-textarea\"\n              spellcheck=\"false\"\n            ></textarea>\n            <div class=\"et-query-devtools-actions\">\n              <button (click)=\"applyResponse(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Apply</button>\n              <button (click)=\"cancelEditor()\" class=\"et-query-devtools-btn\" type=\"button\">Cancel</button>\n            </div>\n          } @else {\n            <h4 class=\"et-query-devtools-section\">Replay with edited args \u2192 execute()</h4>\n            <textarea\n              #argsArea\n              [value]=\"argsDraft()\"\n              (input)=\"argsDraft.set(argsArea.value)\"\n              class=\"et-query-devtools-textarea\"\n              spellcheck=\"false\"\n            ></textarea>\n            <div class=\"et-query-devtools-actions\">\n              <button (click)=\"applyArgs(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Execute</button>\n              <button (click)=\"cancelEditor()\" class=\"et-query-devtools-btn\" type=\"button\">Cancel</button>\n            </div>\n          }\n          @if (editError(); as err) {\n            <p class=\"et-query-devtools-editor-error\">{{ err }}</p>\n          }\n        </div>\n      }\n\n      <dl class=\"et-query-devtools-meta\">\n        <dt>Base URL</dt>\n        <dd class=\"et-query-devtools-mono\">{{ sel.entry.meta.clientBaseUrl || sel.entry.meta.clientName || '\u2014' }}</dd>\n        <dt>Status</dt>\n        <dd>{{ queryStatus(sel.query) }}</dd>\n        <dt>Cache key</dt>\n        <dd class=\"et-query-devtools-mono\">{{ sel.query.id() || '\u2014' }}</dd>\n        <dt>Last executed</dt>\n        <dd>{{ formatTime(sel.query.lastTimeExecutedAt()) }}</dd>\n        <dt>Triggered by</dt>\n        <dd>{{ sel.query.triggeredBy() || 'user' }}</dd>\n        @if (sel.entry.meta.featureTypes?.length) {\n          <dt>Features</dt>\n          <dd>\n            <div class=\"et-query-devtools-chips\">\n              @for (feature of sel.entry.meta.featureTypes; track feature) {\n                <span class=\"et-query-devtools-chip\">{{ featureLabel(feature) }}</span>\n              }\n            </div>\n          </dd>\n        }\n      </dl>\n\n      @if (sel.entry.meta.gqlQuery; as gqlQuery) {\n        <h5 class=\"et-query-devtools-section\">GraphQL document</h5>\n        <pre class=\"et-query-devtools-code\">{{ gqlDocument(gqlQuery) }}</pre>\n      }\n\n      <div class=\"et-query-devtools-section-row\">\n        <h4 class=\"et-query-devtools-section\">Value explorer</h4>\n        <input\n          #jsonSearchInput\n          [value]=\"jsonSearch()\"\n          (input)=\"jsonSearch.set(jsonSearchInput.value)\"\n          class=\"et-query-devtools-search\"\n          type=\"search\"\n          placeholder=\"filter keys / values\u2026\"\n        />\n      </div>\n\n      <h5 class=\"et-query-devtools-section\">Args</h5>\n      <et-query-devtools-json\n        [value]=\"sel.query.args()\"\n        [search]=\"jsonSearchTerm()\"\n        [expandedPaths]=\"jsonExpandedPaths()\"\n        [collapsedPaths]=\"jsonCollapsedPaths()\"\n        [toggleFn]=\"toggleJsonPath\"\n        path=\"args\"\n      />\n\n      @if (sel.query.error(); as error) {\n        <h5 class=\"et-query-devtools-section\">Error ({{ error.raw.status }})</h5>\n        <et-query-devtools-json\n          [value]=\"error.isList ? error.errors : error.error\"\n          [search]=\"jsonSearchTerm()\"\n          [expandedPaths]=\"jsonExpandedPaths()\"\n          [collapsedPaths]=\"jsonCollapsedPaths()\"\n          [toggleFn]=\"toggleJsonPath\"\n          path=\"error\"\n        />\n      } @else {\n        <h5 class=\"et-query-devtools-section\">Response</h5>\n        <et-query-devtools-json\n          [value]=\"sel.query.response()\"\n          [search]=\"jsonSearchTerm()\"\n          [expandedPaths]=\"jsonExpandedPaths()\"\n          [collapsedPaths]=\"jsonCollapsedPaths()\"\n          [toggleFn]=\"toggleJsonPath\"\n          path=\"response\"\n        />\n      }\n    </ng-template>\n  </section>\n}\n\n@if (!open()) {\n  <et-query-devtools-toggle (openChange)=\"toggleOpen()\" />\n}\n\n@if (inspectActive() && inspectHover(); as hover) {\n  <div\n    [style.left.px]=\"hover.rect.left\"\n    [style.top.px]=\"hover.rect.top\"\n    [style.width.px]=\"hover.rect.width\"\n    [style.height.px]=\"hover.rect.height\"\n    class=\"et-query-devtools-inspect-box\"\n  >\n    <span class=\"et-query-devtools-inspect-tag\">{{ inspectLabel(hover.entries) }}</span>\n  </div>\n}\n", styles: ["@layer components{.et-query-devtools-host{--_et-qdt-bg: var(--et-surface-background-solid, rgb(24 24 27));--_et-qdt-fg: var(--et-surface-color-solid, rgb(244 244 245));--_et-qdt-muted: var(--et-surface-color-muted-solid, rgb(161 161 170));--_et-qdt-subtle: var(--et-surface-color-subtle-solid, rgb(113 113 122));--_et-qdt-border: var(--et-surface-border-solid, rgb(255 255 255 / .12));--_et-qdt-interaction: var(--et-surface-interaction-solid, rgb(255 255 255));--_et-qdt-accent: var(--et-theme-color-primary-solid, rgb(96 165 250));--_et-qdt-hover: color-mix(in srgb, var(--_et-qdt-interaction) 10%, transparent);--_et-qdt-active: color-mix(in srgb, var(--_et-qdt-interaction) 18%, transparent);--_et-qdt-success: rgb(34 197 94);--_et-qdt-error: rgb(239 68 68);--_et-qdt-loading: rgb(234 179 8);position:fixed;inset-inline:0;inset-block-end:0;z-index:2147483000;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:1.2rem;line-height:1.4;pointer-events:none}.et-query-devtools-host>*{pointer-events:auto}.et-query-devtools-panel{position:relative;display:flex;flex-direction:column;inline-size:100%;min-block-size:20rem;max-block-size:90vh;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border-block-start:1px solid var(--_et-qdt-border);box-shadow:0 -.4rem 2rem #00000059}.et-query-devtools-panel--resizing{-webkit-user-select:none;user-select:none}.et-query-devtools-resize{position:absolute;inset-inline:0;inset-block-start:0;block-size:.6rem;cursor:ns-resize;z-index:1}.et-query-devtools-resize:after{content:\"\";position:absolute;inset-inline:50%;inset-block-start:.2rem;inline-size:4rem;margin-inline-start:-2rem;block-size:.2rem;border-radius:999px;background:var(--_et-qdt-border)}.et-query-devtools-resize:hover:after{background:var(--_et-qdt-accent)}.et-query-devtools-header{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-inline:.8rem;border-block-end:1px solid var(--_et-qdt-border);flex:0 0 auto}.et-query-devtools-tabs{display:flex;flex-wrap:wrap;gap:.2rem}.et-query-devtools-tab{appearance:none;border:none;background:transparent;color:var(--_et-qdt-muted);padding:.9rem 1rem;cursor:pointer;border-block-end:2px solid transparent;font:inherit}.et-query-devtools-tab:hover{color:var(--_et-qdt-fg)}.et-query-devtools-tab--active{color:var(--_et-qdt-fg);border-block-end-color:var(--_et-qdt-accent)}.et-query-devtools-header-actions{display:flex;align-items:center;gap:.4rem;flex:0 0 auto}.et-query-devtools-inspect-btn{appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.4rem .8rem;font:inherit}.et-query-devtools-inspect-btn:hover{color:var(--_et-qdt-fg)}.et-query-devtools-inspect-btn--active{color:#09090b;background:var(--_et-qdt-accent);border-color:var(--_et-qdt-accent)}.et-query-devtools-close{appearance:none;border:none;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.6rem;font:inherit}.et-query-devtools-close-panel{appearance:none;display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:var(--_et-qdt-hover);color:var(--_et-qdt-fg);cursor:pointer;padding:.4rem .6rem .4rem .8rem;font:inherit}.et-query-devtools-close-panel:hover{border-color:var(--_et-qdt-error);color:var(--_et-qdt-error)}.et-query-devtools-kbd{border-radius:.3rem;background:var(--_et-qdt-hover);box-shadow:inset 0 0 0 1px var(--_et-qdt-border);color:var(--_et-qdt-muted);padding:.15rem .4rem;font:inherit;font-size:1.1rem;line-height:1.2;white-space:nowrap}.et-query-devtools-inspect-box{position:fixed;z-index:2147483002;pointer-events:none;border:2px solid var(--_et-qdt-accent);background:color-mix(in srgb,var(--_et-qdt-accent) 15%,transparent);border-radius:.2rem}.et-query-devtools-inspect-tag{position:absolute;inset-block-start:100%;inset-inline-start:0;margin-block-start:.2rem;padding:.2rem .5rem;border-radius:.3rem;background:var(--_et-qdt-accent);color:#09090b;font-family:ui-monospace,monospace;font-size:1.1rem;font-weight:600;white-space:nowrap}.et-query-devtools-close:hover{color:var(--_et-qdt-fg)}.et-query-devtools-body{flex:1 1 auto;min-block-size:0;overflow:hidden}.et-query-devtools-master-detail{display:flex;block-size:100%;min-block-size:0}.et-query-devtools-list{flex:0 0 34%;min-inline-size:22rem;max-inline-size:40rem;overflow-y:auto;border-inline-end:1px solid var(--_et-qdt-border)}.et-query-devtools-detail{flex:1 1 auto;min-inline-size:0;overflow-y:auto;padding:1rem}.et-query-devtools-detail .et-query-devtools-detail-head,.et-query-devtools-drawer .et-query-devtools-detail-head{padding-block-end:.8rem;border-block-end:1px solid var(--_et-qdt-border)}.et-query-devtools-detail .et-query-devtools-meta,.et-query-devtools-drawer .et-query-devtools-meta{padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 3%,transparent)}.et-query-devtools-detail .et-query-devtools-section-row,.et-query-devtools-drawer .et-query-devtools-section-row{padding-block-start:.8rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-filter-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.3rem .35rem .3rem .7rem;border-radius:999px;background:color-mix(in srgb,var(--_et-qdt-accent) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-qdt-accent) 45%,transparent);color:var(--_et-qdt-accent);font-size:1.1rem;font-weight:600;letter-spacing:.02em}.et-query-devtools-filter-icon{font-size:1.3rem;line-height:1}.et-query-devtools-filter-count{border-radius:999px;background:var(--_et-qdt-accent);color:#09090b;min-inline-size:1.8rem;padding:0 .5rem;text-align:center}.et-query-devtools-filter-clear{appearance:none;display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.3rem .6rem;font:inherit;font-size:1.15rem;line-height:1.4}.et-query-devtools-filter-clear:hover{border-color:color-mix(in srgb,var(--_et-qdt-accent) 60%,transparent);color:var(--_et-qdt-fg)}.et-query-devtools-scroll{block-size:100%;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.et-query-devtools-split{display:flex;block-size:100%;min-block-size:0}.et-query-devtools-split .et-query-devtools-scroll{flex:1 1 auto;min-inline-size:0}.et-query-devtools-drawer{flex:0 0 42%;min-inline-size:26rem;max-inline-size:48rem;overflow-y:auto;padding:0 1rem 1rem;border-inline-start:1px solid var(--_et-qdt-border)}.et-query-devtools-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem 0;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg);color:var(--_et-qdt-muted);border-block-end:1px solid var(--_et-qdt-border);margin-block-end:.8rem}.et-query-devtools-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg)}.et-query-devtools-toolbar--filtered{background:linear-gradient(to right,color-mix(in srgb,var(--_et-qdt-accent) 12%,transparent),transparent 65%),var(--_et-qdt-bg);box-shadow:inset .2rem 0 0 var(--_et-qdt-accent),inset 0 -1px color-mix(in srgb,var(--_et-qdt-accent) 30%,transparent)}.et-query-devtools-field{display:inline-flex;align-items:center;gap:.6rem;color:var(--_et-qdt-muted)}.et-query-devtools-select{background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-count{color:var(--_et-qdt-subtle)}.et-query-devtools-row{display:flex;align-items:center;gap:.8rem;inline-size:100%;text-align:start;appearance:none;border:none;border-block-end:1px solid var(--_et-qdt-border);background:transparent;color:var(--_et-qdt-fg);padding:.8rem;cursor:pointer;font:inherit}.et-query-devtools-row:hover{background:var(--_et-qdt-hover)}.et-query-devtools-row--active{background:var(--_et-qdt-active)}.et-query-devtools-method{font-weight:700;font-size:1.1rem;color:var(--_et-qdt-muted);white-space:nowrap}.et-query-devtools-route{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-inline-size:0}.et-query-devtools-status{inline-size:.8rem;block-size:.8rem;border-radius:999px;flex:0 0 auto;background:var(--_et-qdt-subtle)}.et-query-devtools-status[data-status=success]{background:var(--_et-qdt-success)}.et-query-devtools-status[data-status=error]{background:var(--_et-qdt-error)}.et-query-devtools-status[data-status=loading],.et-query-devtools-status[data-status=running]{background:var(--_et-qdt-loading)}.et-query-devtools-detail-head{display:flex;align-items:center;gap:.8rem;margin-block-end:.8rem}.et-query-devtools-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-block-end:.8rem}.et-query-devtools-btn{appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.3rem;background:transparent;color:var(--_et-qdt-fg);padding:.25rem .55rem;font-size:1.15rem;line-height:1.4;cursor:pointer}.et-query-devtools-btn:hover{background:var(--_et-qdt-hover)}.et-query-devtools-meta{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0 0 1rem}.et-query-devtools-meta dt{color:var(--_et-qdt-muted)}.et-query-devtools-meta dd{margin:0;overflow-wrap:anywhere}.et-query-devtools-section{margin:1rem 0 .4rem;font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--_et-qdt-muted)}.et-query-devtools-json{margin:0;padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;max-block-size:24rem;overflow-y:auto}.et-query-devtools-json--error{border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-mono{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.et-query-devtools-code{margin:0 0 .8rem;padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);overflow:auto;white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.15rem;max-block-size:20rem}.et-query-devtools-ws-message{border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.6rem;margin-block-end:.4rem}.et-query-devtools-url{display:inline-block;max-inline-size:32rem;margin-inline-start:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.et-query-devtools-chips,.et-query-devtools-chip-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-end:.8rem}.et-query-devtools-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--_et-qdt-border);font-size:1.1rem;color:var(--_et-qdt-fg);background:color-mix(in srgb,var(--_et-qdt-interaction) 6%,transparent)}.et-query-devtools-chip--muted{color:var(--_et-qdt-muted)}.et-query-devtools-chip--loading{color:var(--_et-qdt-loading);border-color:color-mix(in srgb,var(--_et-qdt-loading) 50%,transparent)}.et-query-devtools-chip--error{color:var(--_et-qdt-error);border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-chip--success{color:var(--_et-qdt-success);border-color:color-mix(in srgb,var(--_et-qdt-success) 50%,transparent)}.et-query-devtools-card{border:1px solid var(--_et-qdt-border);border-radius:.6rem;padding:1rem}.et-query-devtools-card-head{display:flex;align-items:center;gap:.6rem;margin-block-end:.8rem}.et-query-devtools-card-title{display:flex;align-items:baseline;gap:.5rem;margin-block-end:.2rem}.et-query-devtools-card-sub{color:var(--_et-qdt-subtle);font-size:1.1rem;margin-block-end:.6rem;overflow-wrap:anywhere}.et-query-devtools-inner-queries{display:flex;flex-direction:column;gap:.3rem}.et-query-devtools-inner-row{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-fg);padding:.4rem .6rem;cursor:pointer;font:inherit}.et-query-devtools-inner-row:hover:not([disabled]){background:var(--_et-qdt-hover)}.et-query-devtools-inner-row--active{background:var(--_et-qdt-active);border-color:var(--_et-qdt-accent)}.et-query-devtools-inner-row[disabled]{cursor:default;opacity:.6}.et-query-devtools-step-list{display:flex;flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none}.et-query-devtools-step-item{border:1px solid var(--_et-qdt-border);border-radius:.4rem;overflow:hidden}.et-query-devtools-step-item[data-status=error]{border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-step-head{display:flex;align-items:stretch}.et-query-devtools-step-head .et-query-devtools-inner-row{border:none;border-radius:0;flex:1 1 auto}.et-query-devtools-step-caret-btn{appearance:none;border:none;border-inline-start:1px solid var(--_et-qdt-border);background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:0 .7rem;font:inherit}.et-query-devtools-step-caret-btn:hover{background:var(--_et-qdt-hover);color:var(--_et-qdt-fg)}.et-query-devtools-step-toggle{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:none;background:transparent;color:var(--_et-qdt-fg);padding:.6rem;cursor:pointer;font:inherit}.et-query-devtools-step-toggle:hover{background:var(--_et-qdt-hover)}.et-query-devtools-step-index{flex:1 1 auto;min-inline-size:0}.et-query-devtools-step-caret{color:var(--_et-qdt-muted)}.et-query-devtools-step-io{padding:0 .8rem .8rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-table{inline-size:100%;border-collapse:collapse}.et-query-devtools-table th,.et-query-devtools-table td{text-align:start;padding:.5rem .6rem;border-block-end:1px solid var(--_et-qdt-border);vertical-align:top}.et-query-devtools-table th{color:var(--_et-qdt-muted);font-weight:600;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg)}.et-query-devtools-table tr[data-status=error] td{color:var(--_et-qdt-error)}.et-query-devtools-empty{color:var(--_et-qdt-subtle);padding:1.2rem;text-align:center}.et-query-devtools-actions-label{color:var(--_et-qdt-subtle);align-self:center;text-transform:uppercase;font-size:1rem;letter-spacing:.05em}.et-query-devtools-actions-label:not(:first-child){margin-inline-start:.7rem}.et-query-devtools-cell-actions{display:flex;gap:.4rem;white-space:nowrap}.et-query-devtools-section-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-block-start:1rem}.et-query-devtools-search{flex:0 1 20rem;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-editor{border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.8rem;margin-block-end:1rem}.et-query-devtools-textarea{inline-size:100%;min-block-size:12rem;resize:vertical;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.6rem;font-family:inherit;font-size:1.2rem}.et-query-devtools-editor-error{color:var(--_et-qdt-error);margin:.4rem 0 0}.et-query-devtools-json-node,.et-query-devtools-json-children{display:flex;flex-direction:column}.et-query-devtools-json-children{padding-inline-start:1.4rem;border-inline-start:1px solid var(--_et-qdt-border);margin-inline-start:.4rem}.et-query-devtools-json-row{display:flex;align-items:baseline;gap:.4rem;padding:.1rem 0;font-family:inherit;line-height:1.5}.et-query-devtools-json-toggle{appearance:none;display:flex;align-items:baseline;gap:.4rem;min-inline-size:0;border:none;background:transparent;color:var(--_et-qdt-fg);cursor:pointer;text-align:start;font:inherit;padding:.1rem 0}.et-query-devtools-json-node>.et-query-devtools-json-row:hover{background:var(--_et-qdt-hover)}.et-query-devtools-json-caret{color:var(--_et-qdt-subtle);inline-size:1rem;flex:0 0 auto}.et-query-devtools-json-key{color:var(--_et-qdt-accent)}.et-query-devtools-json-colon,.et-query-devtools-json-preview{color:var(--_et-qdt-subtle)}.et-query-devtools-json-value{overflow-wrap:anywhere}.et-query-devtools-json-leaf[data-kind=string] .et-query-devtools-json-value{color:var(--_et-qdt-success)}.et-query-devtools-json-leaf[data-kind=number] .et-query-devtools-json-value,.et-query-devtools-json-leaf[data-kind=boolean] .et-query-devtools-json-value{color:var(--_et-qdt-loading)}.et-query-devtools-json-leaf[data-kind=null] .et-query-devtools-json-value,.et-query-devtools-json-leaf[data-kind=undefined] .et-query-devtools-json-value{color:var(--_et-qdt-subtle)}.et-query-devtools-json-hit{background:color-mix(in srgb,var(--_et-qdt-loading) 40%,transparent);border-radius:.2rem}.et-query-devtools-json-copy{appearance:none;flex:0 0 auto;border:none;background:transparent;color:var(--_et-qdt-subtle);cursor:pointer;opacity:0;font:inherit}.et-query-devtools-json-copy:hover:not(.et-query-devtools-json-copy--copied){color:var(--_et-qdt-fg)}.et-query-devtools-json-row:hover .et-query-devtools-json-copy,.et-query-devtools-json-copy:focus-visible,.et-query-devtools-json-copy--copied{opacity:1}.et-query-devtools-json-copy--copied{color:var(--_et-qdt-success)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QueryDevtoolsJsonComponent, selector: "et-query-devtools-json", inputs: ["value", "nodeKey", "depth", "search", "path", "expandedPaths", "collapsedPaths", "toggleFn"] }, { kind: "component", type: QueryDevtoolsToggleComponent, selector: "et-query-devtools-toggle", outputs: ["openChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools-host" }, ngImport: i0, template: "@if (open()) {\n  <section\n    [class.et-query-devtools-panel--resizing]=\"resizing()\"\n    [style.height.px]=\"panelHeight()\"\n    class=\"et-query-devtools-panel\"\n  >\n    <div\n      (pointerdown)=\"startResize($event)\"\n      class=\"et-query-devtools-resize\"\n      title=\"Drag to resize\"\n      aria-hidden=\"true\"\n    ></div>\n    <header class=\"et-query-devtools-header\">\n      <nav class=\"et-query-devtools-tabs\" role=\"tablist\">\n        @for (tab of tabs; track tab.id) {\n          @let badge = tabBadges()[tab.id];\n          <button\n            [class.et-query-devtools-tab--active]=\"activeTab() === tab.id\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n            (click)=\"activeTab.set(tab.id)\"\n            class=\"et-query-devtools-tab\"\n            type=\"button\"\n            role=\"tab\"\n          >\n            {{ tab.label }}\n            @if (badge.count) {\n              <span class=\"et-query-devtools-tab-badge\">{{ badge.count }}</span>\n            }\n            @if (badge.errors) {\n              <span\n                class=\"et-query-devtools-tab-badge et-query-devtools-tab-badge--error\"\n                title=\"{{ badge.errors }} {{ badge.errorNoun ?? 'failing' }}\"\n              >\n                {{ badge.errors }}\n              </span>\n            }\n          </button>\n        }\n      </nav>\n\n      <div class=\"et-query-devtools-header-actions\">\n        <button\n          [class.et-query-devtools-inspect-btn--active]=\"inspectActive()\"\n          [attr.aria-pressed]=\"inspectActive()\"\n          (click)=\"toggleInspect()\"\n          class=\"et-query-devtools-inspect-btn\"\n          type=\"button\"\n          title=\"Inspect: hover the UI to find its query\"\n        >\n          <svg\n            class=\"et-query-devtools-inspect-icon\"\n            viewBox=\"0 0 16 16\"\n            width=\"14\"\n            height=\"14\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <circle class=\"et-query-devtools-inspect-icon-ring\" cx=\"8\" cy=\"8\" r=\"4.25\" />\n            <circle class=\"et-query-devtools-inspect-icon-dot\" cx=\"8\" cy=\"8\" r=\"1.15\" />\n            <path d=\"M8 0.9v2.1M8 13v2.1M0.9 8h2.1M13 8h2.1\" />\n          </svg>\n          {{ inspectActive() ? 'Inspecting' : 'Inspect' }}\n          @if (inspectActive()) {\n            <kbd class=\"et-query-devtools-kbd et-query-devtools-kbd--inverse\">Esc</kbd>\n          }\n        </button>\n        <button\n          (click)=\"toggleOpen()\"\n          class=\"et-query-devtools-close-panel\"\n          type=\"button\"\n          title=\"Close devtools ({{ shortcut }})\"\n        >\n          <span aria-hidden=\"true\">\u2715</span>\n          Close\n          <kbd class=\"et-query-devtools-kbd\">{{ shortcut }}</kbd>\n        </button>\n      </div>\n    </header>\n\n    @if (armedFaultClients(); as armed) {\n      <div class=\"et-query-devtools-armed-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-dot\" aria-hidden=\"true\"></span>\n        <span class=\"et-query-devtools-armed-text\">\n          <strong>Faults armed</strong> on\n          <span class=\"et-query-devtools-mono\">{{ armed.join(', ') }}</span>\n          \u2014 every failure and delay you see from\n          {{ armed.length === 1 ? 'this client' : 'these clients' }} is injected, not the API.\n        </span>\n        <button\n          [disabled]=\"activeTab() === 'faults'\"\n          (click)=\"activeTab.set('faults')\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n        >\n          Review\n        </button>\n        <button (click)=\"CLEAR_FAULTS()\" class=\"et-query-devtools-btn\" type=\"button\">Disarm all</button>\n      </div>\n    }\n\n    <div class=\"et-query-devtools-body\">\n      @switch (activeTab()) {\n        <!-- QUERIES -->\n        @case ('queries') {\n          <div class=\"et-query-devtools-master-detail\">\n            <div class=\"et-query-devtools-list\">\n              <div [class.et-query-devtools-toolbar--filtered]=\"!!inspectFilterIds()\" class=\"et-query-devtools-toolbar\">\n                <div class=\"et-query-devtools-toolbar-row\">\n                  @if (inspectFilterIds(); as ids) {\n                    <span class=\"et-query-devtools-filter-chip\">\n                      <span class=\"et-query-devtools-filter-icon\" aria-hidden=\"true\">\u2316</span>\n                      Inspected element\n                      <span class=\"et-query-devtools-filter-count\">{{ ids.length }}</span>\n                    </span>\n                    <button\n                      (click)=\"clearInspectFilter()\"\n                      class=\"et-query-devtools-filter-clear\"\n                      type=\"button\"\n                      title=\"Clear the inspection filter and show all queries\"\n                    >\n                      <span aria-hidden=\"true\">\u2715</span>\n                      Clear\n                    </button>\n                  } @else {\n                    <label class=\"et-query-devtools-field\">\n                      <span>Client</span>\n                      <select\n                        #clientSelect\n                        [value]=\"selectedClientName() ?? ''\"\n                        (change)=\"selectClient(clientSelect.value || null)\"\n                        class=\"et-query-devtools-select\"\n                      >\n                        <option value=\"\">All clients</option>\n                        @for (name of clientNames(); track name) {\n                          <option [value]=\"name\">{{ name }}</option>\n                        }\n                      </select>\n                    </label>\n                  }\n                  <span class=\"et-query-devtools-count\">\n                    @if (isQueryListNarrowed()) {\n                      {{ filteredQueries().length }} of {{ scopedQueryCount() }}\n                    } @else {\n                      {{ scopedQueryCount() }}\n                    }\n                  </span>\n                  <button\n                    [disabled]=\"!filteredQueries().length\"\n                    (click)=\"downloadInsomniaCollection()\"\n                    class=\"et-query-devtools-btn et-query-devtools-toolbar-btn\"\n                    type=\"button\"\n                    title=\"Download the listed queries as an Insomnia collection, with the auth provider's token refresh\"\n                  >\n                    \u2913 Insomnia\n                  </button>\n                </div>\n\n                <div class=\"et-query-devtools-toolbar-row\">\n                  <input\n                    #queryFilterInput\n                    [value]=\"queryFilter()\"\n                    (input)=\"queryFilter.set(queryFilterInput.value)\"\n                    class=\"et-query-devtools-search\"\n                    type=\"search\"\n                    placeholder=\"filter method / route / url\u2026\"\n                    aria-label=\"Filter queries\"\n                  />\n                  @for (facet of facets; track facet.id) {\n                    @let count = facetCounts()[facet.id];\n                    @let isActive = queryFacets().has(facet.id);\n                    <button\n                      [class.et-query-devtools-facet--active]=\"isActive\"\n                      [attr.aria-pressed]=\"isActive\"\n                      [disabled]=\"!count && !isActive\"\n                      (click)=\"toggleFacet(facet.id)\"\n                      class=\"et-query-devtools-chip et-query-devtools-facet\"\n                      type=\"button\"\n                    >\n                      {{ facet.label }}\n                      <span class=\"et-query-devtools-facet-count\">{{ count }}</span>\n                    </button>\n                  }\n                  @if (isQueryListNarrowed()) {\n                    <button\n                      (click)=\"clearQueryFilters()\"\n                      class=\"et-query-devtools-filter-clear\"\n                      type=\"button\"\n                      title=\"Clear the search term and the status chips\"\n                      aria-label=\"Clear filters\"\n                    >\n                      <span aria-hidden=\"true\">\u2715</span>\n                    </button>\n                  }\n                </div>\n              </div>\n\n              @for (item of filteredQueries(); track item.entry.id) {\n                <button\n                  [class.et-query-devtools-row--active]=\"selectedQueryId() === item.entry.id\"\n                  (click)=\"selectedQueryId.set(item.entry.id)\"\n                  class=\"et-query-devtools-row\"\n                  type=\"button\"\n                >\n                  <span\n                    [attr.data-status]=\"queryStatus(item.query)\"\n                    [title]=\"queryStatus(item.query)\"\n                    class=\"et-query-devtools-status\"\n                  ></span>\n                  <span class=\"et-query-devtools-method\">{{ item.entry.meta.method }}</span>\n                  <span class=\"et-query-devtools-route\">\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        routeTpl;\n                        context: { segments: routeSegments(item.entry, item.query), fallback: '\u2014' }\n                      \"\n                    />\n                  </span>\n                  <!-- A retry is the one thing a loading dot actively misrepresents: it reads as a request\n                       on its way when nothing is in flight at all. -->\n                  @if (requestProgress(item.query)?.retry; as retry) {\n                    <span\n                      class=\"et-query-devtools-chip et-query-devtools-chip--loading\"\n                      title=\"Waiting out a retry backoff before attempt {{ retry.attempt }}\"\n                    >\n                      <span class=\"et-query-devtools-retry-glyph\" aria-hidden=\"true\">\u27F3</span>\n                      {{ retry.attempt }}\n                    </span>\n                  }\n                  @if (isStale(item.query)) {\n                    <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">stale</span>\n                  }\n                </button>\n              } @empty {\n                <!-- An empty scope is a different problem from a filter that matches nothing, and only the\n                     latter is the user's own doing - so it names the way out. -->\n                @if (scopedQueryCount()) {\n                  <p class=\"et-query-devtools-empty\">\n                    No query matches the filter \u00B7 {{ scopedQueryCount() }} in scope.\n                  </p>\n                } @else if (inspectFilterIds()) {\n                  <p class=\"et-query-devtools-empty\">\n                    The inspected element's queries are no longer registered. Clear the filter.\n                  </p>\n                } @else {\n                  <p class=\"et-query-devtools-empty\">No queries registered.</p>\n                }\n              }\n            </div>\n\n            <div class=\"et-query-devtools-detail\">\n              @if (selectedQuery(); as sel) {\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              } @else {\n                <p class=\"et-query-devtools-empty\">Select a query to inspect it.</p>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- STACKS -->\n        @case ('stacks') {\n          <div class=\"et-query-devtools-split\">\n            <div class=\"et-query-devtools-scroll\">\n              @for (entry of stackEntries(); track entry.id) {\n                @if (entry.kind === 'paged-query-stack') {\n                  @let paged = asPagedStack(entry);\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">paged stack</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ paged.direction() }}</span>\n                      @if (paged.loading()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--loading\">loading</span>\n                      }\n                    </div>\n\n                    @let pagedId = stackIdentity(paged);\n                    <div class=\"et-query-devtools-card-title\">\n                      <span class=\"et-query-devtools-method\">{{ pagedId.method }}</span>\n                      <span class=\"et-query-devtools-route\">\n                        <ng-container\n                          *ngTemplateOutlet=\"routeTpl; context: { segments: pagedId.segments, fallback: '\u2014' }\"\n                        />\n                      </span>\n                    </div>\n                    <div class=\"et-query-devtools-card-sub et-query-devtools-mono\">{{ pagedId.baseUrl }}</div>\n                    @if (entry.meta.features?.length) {\n                      <ng-container *ngTemplateOutlet=\"featuresTpl; context: { features: entry.meta.features }\" />\n                    }\n\n                    <dl class=\"et-query-devtools-meta\">\n                      <dt>Pages loaded</dt>\n                      <dd>{{ paged.queries().length }}</dd>\n                      <dt>Items</dt>\n                      <dd>{{ paged.items().length }}</dd>\n                      <dt>First page loaded</dt>\n                      <dd>{{ paged.isFirstPageLoaded() }}</dd>\n                      <dt>Last page loaded</dt>\n                      <dd>{{ paged.isLastPageLoaded() }}</dd>\n                      <ng-container *ngTemplateOutlet=\"activityRowTpl; context: { activity: stackActivity(paged) }\" />\n                    </dl>\n                    <ng-container *ngTemplateOutlet=\"innerQueriesTpl; context: { links: queriesForStack(paged) }\" />\n                  </div>\n                } @else {\n                  @let stack = asStack(entry);\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">stack</span>\n                      @if (stack.anyLoading()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--loading\">loading</span>\n                      }\n                      @if (stack.anyError()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--error\">error</span>\n                      }\n                    </div>\n\n                    @let stackId = stackIdentity(stack);\n                    <div class=\"et-query-devtools-card-title\">\n                      <span class=\"et-query-devtools-method\">{{ stackId.method }}</span>\n                      <span class=\"et-query-devtools-route\">\n                        <ng-container\n                          *ngTemplateOutlet=\"routeTpl; context: { segments: stackId.segments, fallback: '\u2014' }\"\n                        />\n                      </span>\n                    </div>\n                    <div class=\"et-query-devtools-card-sub et-query-devtools-mono\">{{ stackId.baseUrl }}</div>\n                    @if (entry.meta.features?.length) {\n                      <ng-container *ngTemplateOutlet=\"featuresTpl; context: { features: entry.meta.features }\" />\n                    }\n\n                    <dl class=\"et-query-devtools-meta\">\n                      <dt>Queries</dt>\n                      <dd>{{ stack.queries().length }}</dd>\n                      <dt>Loading</dt>\n                      <dd>{{ stack.loadingProgress().loaded }} / {{ stack.loadingProgress().total }}</dd>\n                      <dt>Errors</dt>\n                      <dd>{{ stack.errors().length }}</dd>\n                      <ng-container *ngTemplateOutlet=\"activityRowTpl; context: { activity: stackActivity(stack) }\" />\n                    </dl>\n                    <ng-container *ngTemplateOutlet=\"innerQueriesTpl; context: { links: queriesForStack(stack) }\" />\n                  </div>\n                }\n              } @empty {\n                <p class=\"et-query-devtools-empty\">No stacks registered.</p>\n              }\n            </div>\n\n            @if (stackSelectedQuery(); as sel) {\n              <aside class=\"et-query-devtools-drawer\">\n                <div class=\"et-query-devtools-drawer-head\">\n                  <span>Query detail</span>\n                  <button\n                    (click)=\"stackSelectedQueryId.set(null)\"\n                    class=\"et-query-devtools-close\"\n                    type=\"button\"\n                    title=\"Close detail\"\n                  >\n                    \u2715\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              </aside>\n            }\n          </div>\n        }\n\n        <!-- SEQUENCES -->\n        @case ('sequences') {\n          <div class=\"et-query-devtools-split\">\n            <div class=\"et-query-devtools-scroll\">\n              @for (entry of sequenceEntries(); track entry.id) {\n                @let sequence = asSequence(entry);\n                @if (sequence) {\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">sequence</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ sequence.status() }}</span>\n                      <span class=\"et-query-devtools-count\"\n                        >step {{ sequence.currentStep() }} / {{ sequence.total }}</span\n                      >\n                    </div>\n\n                    <dl class=\"et-query-devtools-meta\">\n                      <ng-container\n                        *ngTemplateOutlet=\"activityRowTpl; context: { activity: sequenceActivity(sequence) }\"\n                      />\n                    </dl>\n\n                    <ol class=\"et-query-devtools-step-list\">\n                      @for (link of queriesForSequence(sequence); track $index; let i = $index) {\n                        <li [attr.data-status]=\"sequenceStepStatus(sequence, i)\" class=\"et-query-devtools-step-item\">\n                          <div class=\"et-query-devtools-step-head\">\n                            <button\n                              [class.et-query-devtools-inner-row--active]=\"sequenceSelectedQueryId() === link.id\"\n                              [disabled]=\"!link.id\"\n                              (click)=\"sequenceSelectedQueryId.set(link.id)\"\n                              class=\"et-query-devtools-inner-row\"\n                              type=\"button\"\n                            >\n                              <span\n                                [attr.data-status]=\"sequenceStepStatus(sequence, i)\"\n                                class=\"et-query-devtools-status\"\n                              ></span>\n                              <span class=\"et-query-devtools-method\">{{ i + 1 }}. {{ link.method }}</span>\n                              <span class=\"et-query-devtools-route\">\n                                <ng-container\n                                  *ngTemplateOutlet=\"\n                                    routeTpl;\n                                    context: { segments: link.segments, fallback: 'step ' + (i + 1) }\n                                  \"\n                                />\n                              </span>\n                            </button>\n                            <button\n                              [attr.aria-expanded]=\"isStepExpanded(entry.id, i)\"\n                              (click)=\"toggleStep(entry.id, i)\"\n                              class=\"et-query-devtools-step-caret-btn\"\n                              type=\"button\"\n                              title=\"Toggle in / out\"\n                            >\n                              {{ isStepExpanded(entry.id, i) ? '\u25BE' : '\u25B8' }}\n                            </button>\n                          </div>\n\n                          @if (isStepExpanded(entry.id, i)) {\n                            @let snap = stepSnapshot(sequence, i);\n                            <div class=\"et-query-devtools-step-io\">\n                              <h5 class=\"et-query-devtools-section\">In \u00B7 args</h5>\n                              @if (sequence.stepArgs().length > i) {\n                                <et-query-devtools-json [value]=\"sequence.stepArgs()[i]\" />\n                              } @else {\n                                <p class=\"et-query-devtools-empty\">Not run yet.</p>\n                              }\n\n                              @if (snap?.error(); as error) {\n                                <h5 class=\"et-query-devtools-section\">Out \u00B7 error ({{ error.raw.status }})</h5>\n                                <et-query-devtools-json [value]=\"error.isList ? error.errors : error.error\" />\n                              } @else {\n                                <h5 class=\"et-query-devtools-section\">Out \u00B7 response</h5>\n                                @if (snap) {\n                                  <et-query-devtools-json [value]=\"snap.response()\" />\n                                } @else {\n                                  <p class=\"et-query-devtools-empty\">Not run yet.</p>\n                                }\n                              }\n                            </div>\n                          }\n                        </li>\n                      }\n                    </ol>\n                  </div>\n                }\n              } @empty {\n                <p class=\"et-query-devtools-empty\">No sequences registered.</p>\n              }\n            </div>\n\n            @if (sequenceSelectedQuery(); as sel) {\n              <aside class=\"et-query-devtools-drawer\">\n                <div class=\"et-query-devtools-drawer-head\">\n                  <span>Query detail</span>\n                  <button\n                    (click)=\"sequenceSelectedQueryId.set(null)\"\n                    class=\"et-query-devtools-close\"\n                    type=\"button\"\n                    title=\"Close detail\"\n                  >\n                    \u2715\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              </aside>\n            }\n          </div>\n        }\n\n        <!-- FORMS -->\n        @case ('forms') {\n          <div class=\"et-query-devtools-split\">\n            <div class=\"et-query-devtools-scroll\">\n              @for (entry of formEntries(); track entry.id) {\n                @let form = asForm(entry);\n                @let expanded = selectedFormId() === entry.id;\n                <div class=\"et-query-devtools-card\">\n                  <div class=\"et-query-devtools-card-head\">\n                    <button\n                      [attr.aria-expanded]=\"expanded\"\n                      (click)=\"selectedFormId.set(expanded ? null : entry.id)\"\n                      class=\"et-query-devtools-row-link\"\n                      type=\"button\"\n                    >\n                      <span class=\"et-query-devtools-caret\">{{ expanded ? '\u25BE' : '\u25B8' }}</span>\n                      <strong>{{ entry.meta.name || 'query form' }}</strong>\n                    </button>\n                    @if (form.activeFilterCount(); as count) {\n                      <span class=\"et-query-devtools-chip\">{{ count }} active</span>\n                    } @else {\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">at defaults</span>\n                    }\n                    @if (form.isCommitPending()) {\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--loading\">debouncing</span>\n                    }\n                    @if (!form.isObserving()) {\n                      <span\n                        class=\"et-query-devtools-chip et-query-devtools-chip--muted\"\n                        title=\"observe() has not been called, so nothing syncs with the URL\"\n                      >\n                        not observing\n                      </span>\n                    }\n                    <button\n                      [disabled]=\"form.isAtDefaults()\"\n                      (click)=\"form.resetAll()\"\n                      class=\"et-query-devtools-btn\"\n                      type=\"button\"\n                    >\n                      \u27F2 Reset all\n                    </button>\n                  </div>\n\n                  @let driven = queriesDrivenByForm(entry);\n                  <dl class=\"et-query-devtools-meta\">\n                    <dt>Drives</dt>\n                    <dd>\n                      @if (driven.length) {\n                        <ng-container *ngTemplateOutlet=\"formDrivesTpl; context: { links: driven }\" />\n                      } @else {\n                        <span class=\"et-query-devtools-hint\">\n                          No query has read this form's value yet. A query picks it up the first time its\n                          <code>withArgs</code> reads <code>value()</code>.\n                        </span>\n                      }\n                    </dd>\n                  </dl>\n\n                  @if (expanded) {\n                    <table class=\"et-query-devtools-table\">\n                      <thead>\n                        <tr>\n                          <th>Field</th>\n                          <th>Value</th>\n                          <th>Default</th>\n                          <th>URL param</th>\n                          <th>Rules</th>\n                          <th></th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (field of form.fields(); track field.key) {\n                          <tr [attr.data-status]=\"field.isDefault ? null : 'success'\">\n                            <td class=\"et-query-devtools-mono\">{{ field.key }}</td>\n                            <td class=\"et-query-devtools-mono\">\n                              {{ inlineValue(field.value) }}\n                              <!-- The live value only differs while a debounce is pending, which is exactly\n                                 when \"the input says X but the query asked for Y\" needs explaining. -->\n                              @if (field.liveValue !== field.value) {\n                                <span class=\"et-query-devtools-stat-sub\"\n                                  >typing {{ inlineValue(field.liveValue) }}</span\n                                >\n                              }\n                            </td>\n                            <td class=\"et-query-devtools-mono\">{{ inlineValue(field.defaultValue) }}</td>\n                            <td class=\"et-query-devtools-mono\">\n                              @if (field.queryParam === undefined) {\n                                <span class=\"et-query-devtools-hint\">\u2014</span>\n                              } @else {\n                                {{ field.paramKey }}={{ inlineValue(field.queryParam) }}\n                              }\n                            </td>\n                            <td>\n                              <div class=\"et-query-devtools-chips\">\n                                @if (field.debounceMs !== null) {\n                                  <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">\n                                    {{ field.debounceMs }}ms\n                                  </span>\n                                }\n                                @if (field.isResetBy.length) {\n                                  <span\n                                    class=\"et-query-devtools-chip et-query-devtools-chip--muted\"\n                                    title=\"Reset to its default whenever one of these changes\"\n                                  >\n                                    reset by {{ field.isResetBy.join(', ') }}\n                                  </span>\n                                }\n                                @if (!field.countsAsFilter) {\n                                  <span\n                                    class=\"et-query-devtools-chip et-query-devtools-chip--muted\"\n                                    title=\"Not counted by activeFilterCount\"\n                                  >\n                                    not a filter\n                                  </span>\n                                }\n                              </div>\n                            </td>\n                            <td>\n                              <button\n                                [disabled]=\"field.isDefault\"\n                                (click)=\"form.resetField(field.key)\"\n                                class=\"et-query-devtools-btn\"\n                                type=\"button\"\n                              >\n                                \u27F2\n                              </button>\n                            </td>\n                          </tr>\n                        }\n                      </tbody>\n                    </table>\n\n                    <h4 class=\"et-query-devtools-section\">Committed value</h4>\n                    <et-query-devtools-json [value]=\"form.value()\" />\n                  }\n                </div>\n              } @empty {\n                <p class=\"et-query-devtools-empty\">\n                  No query forms registered. A form created with <code>createQueryForm()</code> registers itself.\n                </p>\n              }\n            </div>\n\n            @if (formSelectedQuery(); as sel) {\n              <aside class=\"et-query-devtools-drawer\">\n                <div class=\"et-query-devtools-drawer-head\">\n                  <span>Query detail</span>\n                  <button\n                    (click)=\"formSelectedQueryId.set(null)\"\n                    class=\"et-query-devtools-close\"\n                    type=\"button\"\n                    title=\"Close detail\"\n                  >\n                    \u2715\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              </aside>\n            }\n          </div>\n        }\n\n        <!-- AUTH -->\n        @case ('auth') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (entry of authEntries(); track entry.id) {\n              @let auth = asAuth(entry);\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong>{{ entry.meta.name || 'auth provider' }}</strong>\n                  <span\n                    [class.et-query-devtools-chip--success]=\"auth.isAuthenticated()\"\n                    [class.et-query-devtools-chip--muted]=\"!auth.isAuthenticated()\"\n                    class=\"et-query-devtools-chip\"\n                  >\n                    {{ auth.isAuthenticated() ? 'authenticated' : 'anonymous' }}\n                  </span>\n                </div>\n                <dl class=\"et-query-devtools-meta\">\n                  <dt>Base URL</dt>\n                  <dd class=\"et-query-devtools-mono\">{{ entry.meta.clientBaseUrl || entry.meta.clientName || '\u2014' }}</dd>\n                  <dt>Access token</dt>\n                  <dd>{{ auth.accessToken() ? 'present' : 'none' }}</dd>\n                  <dt>Refresh token</dt>\n                  <dd>{{ auth.refreshToken() ? 'present' : 'none' }}</dd>\n                  @if (authTokenExpiry(auth); as expiry) {\n                    <dt>Token expires in</dt>\n                    <dd>{{ expiry }}</dd>\n                  }\n                  @if (auth.executionState(); as state) {\n                    <dt>Execution state</dt>\n                    <dd>{{ state.type }} \u00B7 {{ state.state }}</dd>\n                  }\n                  @if (authQueryKeys(auth).length) {\n                    <dt>Queries</dt>\n                    <dd>\n                      <div class=\"et-query-devtools-chips\">\n                        @for (key of authQueryKeys(auth); track key) {\n                          <span class=\"et-query-devtools-chip\">{{ key }}</span>\n                        }\n                      </div>\n                    </dd>\n                  }\n                  @if (entry.meta.features?.length) {\n                    <dt>Features</dt>\n                    <dd>\n                      <ng-container *ngTemplateOutlet=\"featuresTpl; context: { features: entry.meta.features }\" />\n                    </dd>\n                  }\n                </dl>\n\n                @if (authTokenPayload(auth); as payload) {\n                  <h4 class=\"et-query-devtools-section\">Access token payload</h4>\n                  <et-query-devtools-json [value]=\"payload\" />\n                }\n\n                @if (auth.latestNonInternalQuery(); as latest) {\n                  <h4 class=\"et-query-devtools-section\">Latest auth query \u00B7 {{ latest.key }}</h4>\n                  <et-query-devtools-json [value]=\"latest.snapshot.response()\" />\n                }\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No auth providers registered.</p>\n            }\n          </div>\n        }\n\n        <!-- SOCKETS -->\n        @case ('ws') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (entry of wsEntries(); track entry.id) {\n              @let ws = asWs(entry);\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong>{{ entry.meta.name || 'socket' }}</strong>\n                  <span\n                    [class.et-query-devtools-chip--success]=\"ws.connected()\"\n                    [class.et-query-devtools-chip--muted]=\"!ws.connected()\"\n                    class=\"et-query-devtools-chip\"\n                  >\n                    {{ ws.connected() ? 'connected' : 'disconnected' }}\n                  </span>\n                </div>\n                <dl class=\"et-query-devtools-meta\">\n                  <dt>URL</dt>\n                  <dd class=\"et-query-devtools-mono\">{{ entry.meta.url }}</dd>\n                  <dt>Rooms</dt>\n                  <dd>\n                    @if (ws.rooms().length) {\n                      <div class=\"et-query-devtools-chips\">\n                        @for (room of ws.rooms(); track room) {\n                          <span class=\"et-query-devtools-chip\">{{ room }}</span>\n                        }\n                      </div>\n                    } @else {\n                      none\n                    }\n                  </dd>\n                </dl>\n\n                <h5 class=\"et-query-devtools-section\">Messages ({{ ws.messages().length }})</h5>\n                @for (message of ws.messages(); track message.id) {\n                  <div class=\"et-query-devtools-ws-message\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-count\">{{ formatTime(message.timestamp) }}</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ message.room }}</span>\n                      <span class=\"et-query-devtools-method\">{{ message.event }}</span>\n                    </div>\n                    <et-query-devtools-json [value]=\"message.data\" />\n                  </div>\n                } @empty {\n                  <p class=\"et-query-devtools-empty\">No messages received yet.</p>\n                }\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No web socket clients registered.</p>\n            }\n          </div>\n        }\n\n        <!-- CACHE -->\n        @case ('cache') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (client of cacheView(); track client.name) {\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong class=\"et-query-devtools-mono\">{{ client.baseUrl || client.name }}</strong>\n                  <span class=\"et-query-devtools-count\">{{ client.entries.length }} entries</span>\n                  @if (client.client?.subtle?.persistence) {\n                    <span class=\"et-query-devtools-count\">{{ persistedCount(client.client!) }} on disk</span>\n                    <button (click)=\"clearPersistedQueries(client.client!)\" class=\"et-query-devtools-btn\" type=\"button\">\n                      Clear disk\n                    </button>\n                  }\n                </div>\n                @if (clientFeatures(client.client); as features) {\n                  <ng-container *ngTemplateOutlet=\"featuresTpl; context: { features }\" />\n                }\n                <table class=\"et-query-devtools-table\">\n                  <thead>\n                    <tr>\n                      <th>Request</th>\n                      <th>Consumers</th>\n                      <th>Secure</th>\n                      <th>Freshness</th>\n                      <th>Sync</th>\n                      <th>Disk</th>\n                      <th>Actions</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (cacheEntry of client.entries; track cacheEntry.key) {\n                      <tr>\n                        <td [title]=\"cacheEntry.request.method + ' ' + cacheEntry.request.url\">\n                          <span class=\"et-query-devtools-method\">{{ cacheEntry.request.method }}</span>\n                          <span class=\"et-query-devtools-url\">{{ requestPath(cacheEntry.request.url) }}</span>\n                        </td>\n                        <td>{{ cacheEntry.consumerCount }}</td>\n                        <td>{{ cacheEntry.isSecure ? 'yes' : 'no' }}</td>\n                        <td>{{ cacheFreshness(cacheEntry) }}</td>\n                        <td>{{ cacheSync(cacheEntry, client.pollStates) }}</td>\n                        <td>{{ cachePersistence(cacheEntry) }}</td>\n                        <td class=\"et-query-devtools-cell-actions\">\n                          <button (click)=\"refetchCacheEntry(cacheEntry)\" class=\"et-query-devtools-btn\" type=\"button\">\n                            Refetch\n                          </button>\n                          <button\n                            (click)=\"evictCacheEntry(client.repository, cacheEntry.key)\"\n                            class=\"et-query-devtools-btn\"\n                            type=\"button\"\n                          >\n                            Evict\n                          </button>\n                        </td>\n                      </tr>\n                    } @empty {\n                      <tr>\n                        <td class=\"et-query-devtools-empty\" colspan=\"7\">Cache empty.</td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No clients with a cache yet.</p>\n            }\n          </div>\n        }\n\n        <!-- TIMELINE -->\n        @case ('timeline') {\n          @let tl = timeline();\n          <div class=\"et-query-devtools-split\">\n            <div class=\"et-query-devtools-pane\">\n              <div class=\"et-query-devtools-toolbar\">\n                <div class=\"et-query-devtools-toolbar-row\">\n                  @if (inspectFilterIds(); as ids) {\n                    <span class=\"et-query-devtools-filter-chip\">\n                      <span class=\"et-query-devtools-filter-icon\" aria-hidden=\"true\">\u2316</span>\n                      Inspected element\n                      <span class=\"et-query-devtools-filter-count\">{{ ids.length }}</span>\n                    </span>\n                  } @else {\n                    <label class=\"et-query-devtools-field\">\n                      <span>Client</span>\n                      <select\n                        #timelineClientSelect\n                        [value]=\"selectedClientName() ?? ''\"\n                        (change)=\"selectClient(timelineClientSelect.value || null)\"\n                        class=\"et-query-devtools-select\"\n                      >\n                        <option value=\"\">All clients</option>\n                        @for (name of clientNames(); track name) {\n                          <option [value]=\"name\">{{ name }}</option>\n                        }\n                      </select>\n                    </label>\n                  }\n                  <span class=\"et-query-devtools-count\">\n                    {{ tl.rows.length }} run{{ tl.rows.length === 1 ? '' : 's' }}\n                    @if (tl.hidden) {\n                      \u00B7 {{ tl.hidden }} older not shown\n                    }\n                    @if (tl.rows.length) {\n                      \u00B7 over {{ formatDuration(tl.windowMs) }} from {{ formatTime(tl.startedAt) }}\n                    }\n                  </span>\n                  <button\n                    [disabled]=\"!tl.rows.length\"\n                    (click)=\"resetTimeline()\"\n                    class=\"et-query-devtools-btn et-query-devtools-toolbar-btn\"\n                    type=\"button\"\n                    title=\"Clear the run history and the counters of every listed query\"\n                  >\n                    \u27F2 Reset\n                  </button>\n                </div>\n              </div>\n\n              @if (tl.rows.length) {\n                <div class=\"et-query-devtools-scroll\">\n                  <div class=\"et-query-devtools-timeline\">\n                    <div class=\"et-query-devtools-timeline-axis\">\n                      <span class=\"et-query-devtools-timeline-ticks\">\n                        @for (tick of timelineTicks(); track tick.pct) {\n                          <span [style.left.%]=\"tick.pct\" class=\"et-query-devtools-timeline-tick\">{{\n                            tick.label\n                          }}</span>\n                        }\n                      </span>\n                    </div>\n\n                    @for (row of tl.rows; track row.key) {\n                      <button\n                        [class.et-query-devtools-timeline-row--active]=\"timelineSelectedQueryId() === row.entryId\"\n                        (click)=\"selectTimelineRow(row)\"\n                        class=\"et-query-devtools-timeline-row\"\n                        type=\"button\"\n                        title=\"{{ row.method }} {{ row.path }} \u00B7 run {{ row.run.index }} \u00B7 {{ row.run.status }}\"\n                      >\n                        <span class=\"et-query-devtools-timeline-label\">\n                          <span class=\"et-query-devtools-method\">{{ row.method }}</span>\n                          <span class=\"et-query-devtools-url\">{{ row.path }}</span>\n                        </span>\n                        <span class=\"et-query-devtools-timeline-track\">\n                          <span\n                            [attr.data-status]=\"runStatus(row.run)\"\n                            [style.left.%]=\"row.leftPct\"\n                            [style.width.%]=\"row.widthPct\"\n                            class=\"et-query-devtools-timeline-bar\"\n                          ></span>\n                        </span>\n                        <span class=\"et-query-devtools-timeline-duration\">\n                          @if (row.durationMs === null) {\n                            in flight\n                          } @else {\n                            {{ formatDuration(row.durationMs) }}\n                          }\n                        </span>\n                        <span class=\"et-query-devtools-timeline-size\">\n                          @if (row.run.receivedBytes) {\n                            {{ formatBytes(row.run.receivedBytes) }}\n                          }\n                        </span>\n                        <span class=\"et-query-devtools-timeline-flags\">\n                          @if (row.run.attempts > 1) {\n                            <span\n                              class=\"et-query-devtools-chip et-query-devtools-chip--loading\"\n                              title=\"Took {{\n                                row.run.attempts\n                              }} attempts - so this bar is mostly retry backoff, not one slow round trip\"\n                            >\n                              <span class=\"et-query-devtools-retry-glyph\" aria-hidden=\"true\">\u27F3</span>\n                              {{ row.run.attempts }}\n                            </span>\n                          }\n                          @if (!row.run.didRequest) {\n                            <span\n                              class=\"et-query-devtools-chip et-query-devtools-chip--muted\"\n                              title=\"Arrived without a request of this query's own - a poll, another consumer of the same cache entry, or another tab\"\n                            >\n                              shared\n                            </span>\n                          }\n                          @if (row.run.status === 'aborted') {\n                            <span\n                              class=\"et-query-devtools-chip et-query-devtools-chip--muted\"\n                              title=\"The query requested again before this run's response arrived\"\n                            >\n                              aborted\n                            </span>\n                          }\n                        </span>\n                      </button>\n                    }\n                  </div>\n                </div>\n              } @else {\n                <p class=\"et-query-devtools-empty\">\n                  No requests recorded yet. Every request a listed query makes shows up here as a bar.\n                </p>\n              }\n            </div>\n\n            @if (timelineSelectedQuery(); as sel) {\n              <aside class=\"et-query-devtools-drawer\">\n                <div class=\"et-query-devtools-drawer-head\">\n                  <span>Query detail</span>\n                  <button\n                    (click)=\"timelineSelectedQueryId.set(null)\"\n                    class=\"et-query-devtools-close\"\n                    type=\"button\"\n                    title=\"Close detail\"\n                  >\n                    \u2715\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              </aside>\n            }\n          </div>\n        }\n\n        <!-- EVENTS -->\n        @case ('events') {\n          <div class=\"et-query-devtools-pane\">\n            <div class=\"et-query-devtools-toolbar\">\n              <span class=\"et-query-devtools-count\">{{ eventLog().length }} events</span>\n              <button (click)=\"clearEvents()\" class=\"et-query-devtools-btn\" type=\"button\">Clear</button>\n            </div>\n            <div class=\"et-query-devtools-scroll\">\n              <table class=\"et-query-devtools-table\">\n                <thead>\n                  <tr>\n                    <th>Time</th>\n                    <th>Base URL</th>\n                    <th>Type</th>\n                    <th>Request</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (event of eventLog(); track event.id) {\n                    <tr\n                      [attr.data-status]=\"\n                        event.type === 'request-error' ? 'error' : event.type === 'queries-refreshed' ? null : 'success'\n                      \"\n                    >\n                      <td>{{ formatTime(event.timestamp) }}</td>\n                      <td class=\"et-query-devtools-mono\">{{ event.client }}</td>\n                      <td>\n                        {{ eventTypeLabel(event) }}\n                        @if (event.isSecure) {\n                          <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">secure</span>\n                        }\n                      </td>\n                      @if (event.cause; as cause) {\n                        <td>\n                          <span class=\"et-query-devtools-url\">{{ causeLabel(cause) }}</span>\n                          @if (event.refreshed?.length) {\n                            <div class=\"et-query-devtools-chips\">\n                              @for (refreshed of event.refreshed; track $index) {\n                                @if (refreshed.queryIds[0]; as queryId) {\n                                  <button\n                                    (click)=\"selectQuery(queryId)\"\n                                    class=\"et-query-devtools-chip et-query-devtools-chip--button\"\n                                    type=\"button\"\n                                    title=\"Open {{ refreshed.method }} {{ refreshed.path }}\"\n                                  >\n                                    {{ refreshed.method }} {{ refreshed.path }}\n                                    <!-- One request, several queries on the same cache key. Spelling the count\n                                       out beats repeating an identical row per consumer. -->\n                                    @if (refreshed.queryIds.length > 1) {\n                                      <small>\u00D7{{ refreshed.queryIds.length }}</small>\n                                    }\n                                  </button>\n                                } @else {\n                                  <span\n                                    class=\"et-query-devtools-chip et-query-devtools-chip--muted\"\n                                    title=\"No registered query holds this cache entry any more\"\n                                  >\n                                    {{ refreshed.method }} {{ refreshed.path }}\n                                  </span>\n                                }\n                              }\n                            </div>\n                          } @else {\n                            <span class=\"et-query-devtools-hint\">matched no query in use</span>\n                          }\n                        </td>\n                      } @else if (event.url; as url) {\n                        <td>\n                          @if (event.queryId) {\n                            <button\n                              (click)=\"selectEventRow(event)\"\n                              class=\"et-query-devtools-row-link\"\n                              type=\"button\"\n                              title=\"Open {{ event.method }} {{ url }}\"\n                            >\n                              <span class=\"et-query-devtools-method\">{{ event.method }}</span>\n                              <span class=\"et-query-devtools-url\">{{ requestPath(url) }}</span>\n                            </button>\n                          } @else {\n                            <span [title]=\"event.method + ' ' + url\">\n                              <span class=\"et-query-devtools-method\">{{ event.method }}</span>\n                              <span class=\"et-query-devtools-url\">{{ requestPath(url) }}</span>\n                            </span>\n                          }\n                        </td>\n                      } @else {\n                        <td class=\"et-query-devtools-url\">all secure entries dropped</td>\n                      }\n                    </tr>\n                  } @empty {\n                    <tr>\n                      <td class=\"et-query-devtools-empty\" colspan=\"4\">No events captured yet.</td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          </div>\n        }\n\n        <!-- FAULTS -->\n        @case ('faults') {\n          <div class=\"et-query-devtools-scroll\">\n            <div class=\"et-query-devtools-toolbar\">\n              <p class=\"et-query-devtools-hint\">\n                Faults are injected into the request pipeline, so retries, error handling features and the cache see\n                them exactly as they would see a real one. Unlike the rest of the panel, what you arm here is not\n                persisted - a page reload disarms every client.\n              </p>\n            </div>\n\n            @for (client of faultClients(); track client.name) {\n              @let fault = client.fault;\n              <div [class.et-query-devtools-card--armed]=\"client.armed\" class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong class=\"et-query-devtools-mono\">{{ client.name }}</strong>\n                  <span class=\"et-query-devtools-url\">{{ client.baseUrl }}</span>\n                  @if (client.armed) {\n                    <span class=\"et-query-devtools-chip et-query-devtools-chip--error\">armed</span>\n                    <button (click)=\"CLEAR_FAULTS(client.name)\" class=\"et-query-devtools-btn\" type=\"button\">\n                      Disarm\n                    </button>\n                  }\n                </div>\n\n                <div class=\"et-query-devtools-faults\">\n                  <label class=\"et-query-devtools-field\">\n                    <span>Latency</span>\n                    <input\n                      #latencyInput\n                      [value]=\"fault.latencyMs\"\n                      (change)=\"\n                        armFaultValue({ clientName: client.name, field: 'latencyMs', value: latencyInput.value })\n                      \"\n                      class=\"et-query-devtools-input et-query-devtools-input--number\"\n                      type=\"number\"\n                      min=\"0\"\n                      max=\"60000\"\n                      step=\"100\"\n                    />\n                    <small>ms before every attempt starts</small>\n                  </label>\n\n                  <label class=\"et-query-devtools-field\">\n                    <span>Fail next</span>\n                    <input\n                      #failNextInput\n                      [value]=\"fault.failNext\"\n                      (change)=\"\n                        armFaultValue({ clientName: client.name, field: 'failNext', value: failNextInput.value })\n                      \"\n                      class=\"et-query-devtools-input et-query-devtools-input--number\"\n                      type=\"number\"\n                      min=\"0\"\n                      max=\"99\"\n                      step=\"1\"\n                    />\n                    <small>attempts, counted down as they are spent</small>\n                  </label>\n\n                  <label class=\"et-query-devtools-field\">\n                    <span>Fail rate</span>\n                    <input\n                      #failRateInput\n                      [value]=\"fault.failRate\"\n                      (change)=\"\n                        armFaultValue({ clientName: client.name, field: 'failRate', value: failRateInput.value })\n                      \"\n                      class=\"et-query-devtools-input et-query-devtools-input--number\"\n                      type=\"number\"\n                      min=\"0\"\n                      max=\"100\"\n                      step=\"5\"\n                    />\n                    <small>% of attempts, rolled per attempt</small>\n                  </label>\n\n                  <label class=\"et-query-devtools-field\">\n                    <span>Status</span>\n                    <select\n                      #statusSelect\n                      (change)=\"armFaultStatus({ clientName: client.name, value: statusSelect.value })\"\n                      class=\"et-query-devtools-select\"\n                    >\n                      @for (option of FAULT_STATUSES; track option.status) {\n                        <!-- `selected` on the option, not `value` on the select: the select's value is\n                             applied before its options exist, so it would fall back to the first one. -->\n                        <option [value]=\"option.status\" [selected]=\"option.status === fault.status\">\n                          {{ option.status }} \u00B7 {{ option.label }}\n                        </option>\n                      }\n                    </select>\n                    <small>\n                      @if (isFaultStatusRetryable(fault.status)) {\n                        the default retry policy retries this\n                      } @else {\n                        the default retry policy gives up on this\n                      }\n                    </small>\n                  </label>\n                </div>\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No query clients registered yet.</p>\n            }\n          </div>\n        }\n      }\n    </div>\n\n    <!-- A route with its path params and query string picked out from the static path. The segments must\n         stay element-only: a text node between them would render as a space inside the route. -->\n    <ng-template #routeTpl let-segments=\"segments\" let-fallback=\"fallback\">\n      @for (segment of segments; track $index) {\n        <span [class]=\"'et-query-devtools-route-' + segment.kind\" [attr.title]=\"segment.name\">{{ segment.text }}</span>\n      } @empty {\n        {{ fallback }}\n      }\n    </ng-template>\n\n    <!-- Reusable dt/dd pair for a card's `et-query-devtools-meta` list: what its queries ran and moved. -->\n    <ng-template #activityRowTpl let-activity=\"activity\">\n      <dt>Traffic</dt>\n      <dd>\n        @if (activity.hasActivity) {\n          {{ activity.stats.requests }} request{{ activity.stats.requests === 1 ? '' : 's' }} \u00B7 \u2193\n          {{ formatTransferred(activity.stats.receivedBytes, activity.stats.hasEstimatedBytes) }}\n          @if (activity.stats.sentBytes) {\n            \u00B7 \u2191 {{ formatTransferred(activity.stats.sentBytes, activity.stats.hasEstimatedBytes) }}\n          }\n          @if (activity.cacheServed) {\n            \u00B7 {{ activity.cacheServed }} from cache\n          }\n          @if (activity.stats.errors) {\n            \u00B7 {{ activity.stats.errors }} failed\n          }\n        } @else {\n          \u2014\n        }\n      </dd>\n    </ng-template>\n\n    <!-- Reusable feature list: the feature's name, followed by the options it was configured with. -->\n    <ng-template #featuresTpl let-features=\"features\">\n      <ul class=\"et-query-devtools-features\">\n        @for (feature of features; track feature.type) {\n          <li class=\"et-query-devtools-feature\">\n            <span class=\"et-query-devtools-chip\">{{ featureLabel(feature.type) }}</span>\n            <!-- Always rendered: the list is one grid, so a feature without options still needs its cell\n                 for the next row's chip to stay in the same column. -->\n            <span class=\"et-query-devtools-feature-details\">\n              @for (detail of feature.details; track detail.label) {\n                <span class=\"et-query-devtools-feature-detail\">\n                  <span class=\"et-query-devtools-feature-label\">{{ detail.label }}</span>\n                  <span class=\"et-query-devtools-feature-value\">{{ detail.value }}</span>\n                </span>\n              }\n            </span>\n          </li>\n        }\n      </ul>\n    </ng-template>\n\n    <!-- Reusable inner-query list (stacks) \u2014 clicking opens the split-view drawer, not a tab switch. -->\n    <ng-template #innerQueriesTpl let-links=\"links\">\n      <div class=\"et-query-devtools-inner-queries\">\n        @for (link of links; track $index) {\n          <button\n            [class.et-query-devtools-inner-row--active]=\"stackSelectedQueryId() === link.id\"\n            [disabled]=\"!link.id\"\n            (click)=\"stackSelectedQueryId.set(link.id)\"\n            class=\"et-query-devtools-inner-row\"\n            type=\"button\"\n          >\n            <span [attr.data-status]=\"queryStatus(link.query)\" class=\"et-query-devtools-status\"></span>\n            <span class=\"et-query-devtools-method\">{{ link.method }}</span>\n            <span class=\"et-query-devtools-route\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  routeTpl;\n                  context: { segments: link.segments, fallback: link.query.id() || 'query ' + ($index + 1) }\n                \"\n              />\n            </span>\n            @let linkStats = linkActivity(link);\n            @if (linkStats.hasActivity) {\n              <span class=\"et-query-devtools-traffic\">\n                {{ formatTransferred(linkStats.stats.receivedBytes, linkStats.stats.hasEstimatedBytes) }}\n              </span>\n            }\n          </button>\n        }\n      </div>\n    </ng-template>\n\n    <!-- The queries a form feeds \u2014 clicking one opens the split-view drawer, not a tab switch. -->\n    <ng-template #formDrivesTpl let-links=\"links\">\n      <div class=\"et-query-devtools-inner-queries\">\n        @for (link of links; track link.id) {\n          <button\n            [class.et-query-devtools-inner-row--active]=\"formSelectedQueryId() === link.id\"\n            [disabled]=\"!link.id\"\n            (click)=\"formSelectedQueryId.set(link.id)\"\n            class=\"et-query-devtools-inner-row\"\n            type=\"button\"\n          >\n            <span [attr.data-status]=\"queryStatus(link.query)\" class=\"et-query-devtools-status\"></span>\n            <span class=\"et-query-devtools-method\">{{ link.method }}</span>\n            <span class=\"et-query-devtools-route\">\n              <ng-container\n                *ngTemplateOutlet=\"routeTpl; context: { segments: link.segments, fallback: link.query.id() || 'query' }\"\n              />\n            </span>\n          </button>\n        }\n      </div>\n    </ng-template>\n\n    <!-- Reusable query detail \u2014 used by the Queries tab and by every split-view drawer. -->\n    <ng-template #queryDetailTpl let-sel=\"sel\">\n      <div class=\"et-query-devtools-detail-head\">\n        <span class=\"et-query-devtools-method\">{{ sel.entry.meta.method }}</span>\n        <span class=\"et-query-devtools-route\">\n          <ng-container\n            *ngTemplateOutlet=\"routeTpl; context: { segments: routeSegments(sel.entry, sel.query), fallback: '\u2014' }\"\n          />\n        </span>\n      </div>\n\n      @if (requestProgress(sel.query); as live) {\n        <div class=\"et-query-devtools-live\">\n          @if (live.retry; as retry) {\n            <span\n              class=\"et-query-devtools-chip et-query-devtools-chip--loading\"\n              title=\"The retry policy is backing off before it tries again. A query stuck loading with this chip is waiting, not slow.\"\n            >\n              <span class=\"et-query-devtools-retry-glyph\" aria-hidden=\"true\">\u27F3</span>\n              attempt {{ retry.attempt }} in {{ formatCountdown(live.retryInMs) }}\n            </span>\n            <span class=\"et-query-devtools-live-note\">\n              {{ retryCause(retry.status) }} \u00B7 backing off {{ formatDuration(retry.delayMs) }}\n            </span>\n          } @else if (live.attempts > 1) {\n            <span\n              class=\"et-query-devtools-chip et-query-devtools-chip--loading\"\n              title=\"How many HTTP attempts the last execution took - the retry policy fired for the rest\"\n            >\n              <span class=\"et-query-devtools-retry-glyph\" aria-hidden=\"true\">\u27F3</span>\n              {{ live.attempts }} attempts\n            </span>\n          }\n\n          @if (live.progress; as progress) {\n            <span\n              [attr.aria-valuenow]=\"progress.percentage\"\n              class=\"et-query-devtools-progress\"\n              role=\"progressbar\"\n              aria-valuemin=\"0\"\n              aria-valuemax=\"100\"\n              aria-label=\"Transfer progress\"\n            >\n              <span [style.inline-size.%]=\"progress.percentage\" class=\"et-query-devtools-progress-bar\"></span>\n            </span>\n            <span class=\"et-query-devtools-live-note\">\n              {{ formatPercent(progress.percentage) }} \u00B7 {{ formatBytes(progress.loaded) }} of\n              {{ formatBytes(progress.total) }}\n              @if (progress.remainingTime !== null) {\n                \u00B7 {{ formatDuration(progress.remainingTime) }} left\n              }\n            </span>\n          }\n        </div>\n      }\n\n      <div class=\"et-query-devtools-actions\">\n        <span class=\"et-query-devtools-actions-label\">Run</span>\n        <button (click)=\"executeQuery(sel.query, false)\" class=\"et-query-devtools-btn\" type=\"button\">Execute</button>\n        <button (click)=\"executeQuery(sel.query, true)\" class=\"et-query-devtools-btn\" type=\"button\">Cached</button>\n        <button (click)=\"resetQuery(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Reset</button>\n        <button (click)=\"copyReport(sel.entry, sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">\n          {{ copiedReport() ? '\u2713 Copied' : 'Copy report' }}\n        </button>\n        <button\n          (click)=\"copyInsomniaRequest(sel.entry, sel.query)\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n          title=\"Copy as an Insomnia collection (Import \u2192 From Clipboard). Includes the request headers, and the token refresh for a secure query.\"\n        >\n          {{ copiedInsomnia() ? '\u2713 Copied' : 'Insomnia' }}\n        </button>\n        <span class=\"et-query-devtools-actions-label\">Edit</span>\n        <button (click)=\"openResponseEditor(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Response</button>\n        <button (click)=\"openArgsEditor(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Replay args</button>\n        <span class=\"et-query-devtools-actions-label\">Force</span>\n        <button (click)=\"forceLoading(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Loading</button>\n        <button (click)=\"forceError(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Error</button>\n        <button (click)=\"forceEmpty(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Empty</button>\n        <button (click)=\"clearForced(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Clear</button>\n      </div>\n\n      @if (editorMode() !== 'none') {\n        <div class=\"et-query-devtools-editor\">\n          @if (editorMode() === 'response') {\n            <h4 class=\"et-query-devtools-section\">Edit response \u2192 setResponse()</h4>\n            <textarea\n              #respArea\n              [value]=\"editorSeed\"\n              (input)=\"responseDraft.set(respArea.value)\"\n              class=\"et-query-devtools-textarea\"\n              spellcheck=\"false\"\n            ></textarea>\n            <div class=\"et-query-devtools-actions\">\n              <button (click)=\"applyResponse(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Apply</button>\n              <button (click)=\"cancelEditor()\" class=\"et-query-devtools-btn\" type=\"button\">Cancel</button>\n            </div>\n          } @else {\n            <h4 class=\"et-query-devtools-section\">Replay with edited args \u2192 execute()</h4>\n            <textarea\n              #argsArea\n              [value]=\"editorSeed\"\n              (input)=\"argsDraft.set(argsArea.value)\"\n              class=\"et-query-devtools-textarea\"\n              spellcheck=\"false\"\n            ></textarea>\n            <div class=\"et-query-devtools-actions\">\n              <button (click)=\"applyArgs(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Execute</button>\n              <button (click)=\"cancelEditor()\" class=\"et-query-devtools-btn\" type=\"button\">Cancel</button>\n            </div>\n          }\n          @if (editError(); as err) {\n            <p class=\"et-query-devtools-editor-error\">{{ err }}</p>\n          }\n        </div>\n      }\n\n      @let detailRuns = queryRuns(sel.entry);\n      <nav class=\"et-query-devtools-subtabs\" role=\"tablist\">\n        @for (tab of detailTabs; track tab.id) {\n          <button\n            [class.et-query-devtools-subtab--active]=\"detailTab() === tab.id\"\n            [attr.aria-selected]=\"detailTab() === tab.id\"\n            (click)=\"detailTab.set(tab.id)\"\n            class=\"et-query-devtools-subtab\"\n            type=\"button\"\n            role=\"tab\"\n          >\n            {{ tab.label }}\n            @if (tab.id === 'history' && detailRuns.length) {\n              <span class=\"et-query-devtools-tab-badge\">{{ detailRuns.length }}</span>\n            }\n            <!-- The error body lives under Data, so the tab has to say so - a failure must not hide\n                 behind a tab that is not open. -->\n            @if (tab.id === 'data' && sel.query.error()) {\n              <span class=\"et-query-devtools-tab-badge et-query-devtools-tab-badge--error\">!</span>\n            }\n          </button>\n        }\n      </nav>\n\n      @switch (detailTab()) {\n        @case ('overview') {\n          <dl class=\"et-query-devtools-meta\">\n            <dt>Base URL</dt>\n            <dd class=\"et-query-devtools-mono\">\n              {{ sel.entry.meta.clientBaseUrl || sel.entry.meta.clientName || '\u2014' }}\n            </dd>\n            <dt>Route</dt>\n            <dd class=\"et-query-devtools-mono\">{{ sel.entry.meta.route || '\u2014' }}</dd>\n            <dt>Request URL</dt>\n            <dd class=\"et-query-devtools-mono\">{{ requestUrl(sel.query) || '\u2014' }}</dd>\n            <dt>Status</dt>\n            <dd>{{ queryStatus(sel.query) }}</dd>\n            <dt>Cache key</dt>\n            <dd class=\"et-query-devtools-mono\">{{ sel.query.id() || '\u2014' }}</dd>\n            <dt>Last executed</dt>\n            <dd>{{ formatTime(sel.query.lastTimeExecutedAt()) }}</dd>\n            <dt>Triggered by</dt>\n            <dd>{{ sel.query.triggeredBy() || 'user' }}</dd>\n            @let refreshes = refreshesFor(sel.entry.id);\n            @if (refreshes.length) {\n              <dt\n                title=\"Invalidations and mutation refreshes that re-executed this query, as far back as the event log goes\"\n              >\n                Refetched by\n              </dt>\n              <dd>\n                <div class=\"et-query-devtools-chips\">\n                  @for (refresh of refreshes.slice(0, 5); track refresh.id) {\n                    <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">\n                      {{ formatTime(refresh.timestamp) }} \u00B7 {{ refresh.label }}\n                    </span>\n                  }\n                  @if (refreshes.length > 5) {\n                    <span class=\"et-query-devtools-hint\">+{{ refreshes.length - 5 }} earlier</span>\n                  }\n                </div>\n              </dd>\n            }\n            @let drivers = formsDrivingQuery(sel.entry);\n            @if (drivers.length) {\n              <dt>Args from</dt>\n              <dd>\n                <div class=\"et-query-devtools-chips\">\n                  @for (driver of drivers; track driver.id) {\n                    <button\n                      (click)=\"selectForm(driver.id)\"\n                      class=\"et-query-devtools-chip et-query-devtools-chip--button\"\n                      type=\"button\"\n                      title=\"Open the query form in the Forms tab\"\n                    >\n                      {{ driver.meta.name }}\n                    </button>\n                  }\n                </div>\n              </dd>\n            }\n            @if (sel.entry.meta.features?.length) {\n              <dt>Features</dt>\n              <dd>\n                <ng-container *ngTemplateOutlet=\"featuresTpl; context: { features: sel.entry.meta.features }\" />\n              </dd>\n            }\n          </dl>\n\n          @let activity = queryActivity(sel.entry);\n          <div class=\"et-query-devtools-section-row\">\n            <h4 class=\"et-query-devtools-section\">Activity</h4>\n            <button\n              [disabled]=\"!activity.hasActivity\"\n              (click)=\"resetStats(sel.entry)\"\n              class=\"et-query-devtools-btn\"\n              type=\"button\"\n              title=\"Clear the counters and the run history, so the next interaction can be measured on its own\"\n            >\n              \u27F2 Reset\n            </button>\n          </div>\n\n          <dl class=\"et-query-devtools-stats\">\n            <div class=\"et-query-devtools-stat\" title=\"Every time the query ran, cache hits included\">\n              <dt>Refreshes</dt>\n              <dd>{{ activity.stats.executions }}</dd>\n              @if (activity.cacheServed) {\n                <span class=\"et-query-devtools-stat-sub\">{{ activity.cacheServed }} without a request</span>\n              }\n            </div>\n            <div class=\"et-query-devtools-stat\" title=\"Executions that started a request, and how they ended\">\n              <dt>Requests</dt>\n              <dd>{{ activity.stats.requests }}</dd>\n              <span class=\"et-query-devtools-stat-sub\">\n                {{ activity.stats.responses }} ok\n                @if (activity.stats.errors) {\n                  \u00B7 {{ activity.stats.errors }} failed\n                }\n              </span>\n            </div>\n            <div\n              class=\"et-query-devtools-stat\"\n              title=\"Total response payload received. Sizes without a content-length header are measured from the decoded body, so they ignore compression.\"\n            >\n              <dt>Received</dt>\n              <dd>{{ formatTransferred(activity.stats.receivedBytes, activity.stats.hasEstimatedBytes) }}</dd>\n              @if (activity.avgResponseBytes !== null) {\n                <span class=\"et-query-devtools-stat-sub\"\n                  >{{ formatBytes(activity.avgResponseBytes) }} per response</span\n                >\n              }\n            </div>\n            @if (activity.stats.sentBytes) {\n              <div class=\"et-query-devtools-stat\" title=\"Total request body sent (headers not counted)\">\n                <dt>Sent</dt>\n                <dd>{{ formatTransferred(activity.stats.sentBytes, activity.stats.hasEstimatedBytes) }}</dd>\n              </div>\n            }\n            @if (activity.stats.retries) {\n              <div\n                class=\"et-query-devtools-stat\"\n                title=\"Attempts the retry policy added on top of the first one. Which run they belong to is under History.\"\n              >\n                <dt>Retries</dt>\n                <dd>{{ activity.stats.retries }}</dd>\n              </div>\n            }\n            <div class=\"et-query-devtools-stat\" title=\"Measured from the execution that preceded each response\">\n              <dt>Duration</dt>\n              <dd>{{ formatDuration(activity.stats.lastDurationMs) }}</dd>\n              @if (activity.avgDurationMs !== null) {\n                <span class=\"et-query-devtools-stat-sub\">{{ formatDuration(activity.avgDurationMs) }} on average</span>\n              }\n            </div>\n            <div class=\"et-query-devtools-stat\">\n              <dt>Last response</dt>\n              <dd class=\"et-query-devtools-stat-value--sm\">{{ formatTime(activity.stats.lastResponseAt) }}</dd>\n              @if (activity.stats.firstExecutedAt !== null) {\n                <span class=\"et-query-devtools-stat-sub\"\n                  >first ran {{ formatTime(activity.stats.firstExecutedAt) }}</span\n                >\n              }\n            </div>\n          </dl>\n        }\n        @case ('history') {\n          <div class=\"et-query-devtools-section-row\">\n            <h4 class=\"et-query-devtools-section\">Runs</h4>\n            <button\n              [disabled]=\"!detailRuns.length\"\n              (click)=\"resetStats(sel.entry)\"\n              class=\"et-query-devtools-btn\"\n              type=\"button\"\n              title=\"Clear the run history and the counters, so the next interaction can be measured on its own\"\n            >\n              \u27F2 Reset\n            </button>\n          </div>\n          @if (detailRuns.length) {\n            <table class=\"et-query-devtools-table\">\n              <thead>\n                <tr>\n                  <th>Run</th>\n                  <th>Started</th>\n                  <th>Duration</th>\n                  <th>Received</th>\n                  <th>Diff</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (run of detailRuns; track run.index) {\n                  <tr [attr.data-status]=\"run.status === 'error' ? 'error' : null\">\n                    <td class=\"et-query-devtools-run-cell\">\n                      <span\n                        [attr.data-status]=\"runStatus(run)\"\n                        [title]=\"run.status\"\n                        class=\"et-query-devtools-status\"\n                      ></span>\n                      #{{ run.index }}\n                      @if (run.attempts > 1) {\n                        <span\n                          class=\"et-query-devtools-chip et-query-devtools-chip--loading\"\n                          title=\"Took {{\n                            run.attempts\n                          }} attempts - the duration next to it covers every one of them, backoff included\"\n                        >\n                          <span class=\"et-query-devtools-retry-glyph\" aria-hidden=\"true\">\u27F3</span>\n                          {{ run.attempts }}\n                        </span>\n                      }\n                      @if (!run.didRequest) {\n                        <span\n                          class=\"et-query-devtools-chip et-query-devtools-chip--muted\"\n                          title=\"Arrived without a request of this query's own - a poll, another consumer of the same cache entry, or another tab\"\n                        >\n                          shared\n                        </span>\n                      }\n                    </td>\n                    <td>{{ formatTime(run.startedAt) }}</td>\n                    <td>\n                      @if (run.endedAt === null) {\n                        in flight\n                      } @else {\n                        {{ formatDuration(run.endedAt - run.startedAt) }}\n                      }\n                    </td>\n                    <td>{{ run.receivedBytes ? formatBytes(run.receivedBytes) : '\u2014' }}</td>\n                    <td class=\"et-query-devtools-cell-actions\">\n                      @if (canDiffRun(sel.entry, run)) {\n                        <button\n                          [class.et-query-devtools-btn--active]=\"diffRunIndex() === run.index\"\n                          (click)=\"toggleRunDiff(run)\"\n                          class=\"et-query-devtools-btn\"\n                          type=\"button\"\n                          title=\"Compare this response against the previous one still held\"\n                        >\n                          Diff\n                        </button>\n                      } @else if (run.hasResponse) {\n                        <span class=\"et-query-devtools-count\">nothing earlier to diff</span>\n                      } @else if (run.status === 'success') {\n                        <span class=\"et-query-devtools-count\">body no longer held</span>\n                      } @else {\n                        <span class=\"et-query-devtools-count\">\u2014</span>\n                      }\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n\n            @if (responseDiff(sel.entry); as comparison) {\n              <div class=\"et-query-devtools-section-row\">\n                <h5 class=\"et-query-devtools-section\">\n                  Response diff \u00B7 run #{{ comparison.before.index }} \u2192 #{{ comparison.after.index }}\n                </h5>\n                <span class=\"et-query-devtools-count\">\n                  @if (comparison.diff.entries.length) {\n                    {{ comparison.diff.entries.length }} path{{ comparison.diff.entries.length === 1 ? '' : 's' }}\n                    @if (comparison.diff.truncated) {\n                      (capped)\n                    }\n                  } @else {\n                    identical\n                  }\n                </span>\n              </div>\n              @if (comparison.diff.entries.length) {\n                <table class=\"et-query-devtools-table et-query-devtools-diff\">\n                  <thead>\n                    <tr>\n                      <th>Path</th>\n                      <th>Before</th>\n                      <th>After</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (change of comparison.diff.entries; track change.path) {\n                      <tr [attr.data-kind]=\"change.kind\">\n                        <td class=\"et-query-devtools-mono\">{{ change.path }}</td>\n                        <td class=\"et-query-devtools-mono et-query-devtools-diff-before\">\n                          {{ change.kind === 'added' ? '\u2014' : inlineValue(change.before) }}\n                        </td>\n                        <td class=\"et-query-devtools-mono et-query-devtools-diff-after\">\n                          {{ change.kind === 'removed' ? '\u2014' : inlineValue(change.after) }}\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              } @else {\n                <p class=\"et-query-devtools-empty\">The two responses are identical.</p>\n              }\n            }\n          } @else {\n            <p class=\"et-query-devtools-empty\">No runs recorded yet.</p>\n          }\n        }\n        @case ('data') {\n          @if (sel.entry.meta.gqlQuery; as gqlQuery) {\n            <div class=\"et-query-devtools-section-row\">\n              <h5 class=\"et-query-devtools-section\">GraphQL document</h5>\n              <button\n                (click)=\"copyGqlDocument(gqlQuery)\"\n                class=\"et-query-devtools-btn\"\n                type=\"button\"\n                title=\"Copy the GraphQL document\"\n              >\n                {{ copiedGql() ? '\u2713 Copied' : '\u29C9 Copy' }}\n              </button>\n            </div>\n            <pre class=\"et-query-devtools-code\">{{ gqlDocument(gqlQuery) }}</pre>\n          }\n\n          <div class=\"et-query-devtools-section-row\">\n            <h4 class=\"et-query-devtools-section\">Value explorer</h4>\n            <input\n              #jsonSearchInput\n              [value]=\"jsonSearch()\"\n              (input)=\"jsonSearch.set(jsonSearchInput.value)\"\n              class=\"et-query-devtools-search\"\n              type=\"search\"\n              placeholder=\"filter keys / values\u2026\"\n            />\n          </div>\n\n          <h5 class=\"et-query-devtools-section\">Args</h5>\n          <et-query-devtools-json\n            [value]=\"queryArgs(sel.query)\"\n            [search]=\"jsonSearchTerm()\"\n            [expandedPaths]=\"jsonExpandedPaths()\"\n            [collapsedPaths]=\"jsonCollapsedPaths()\"\n            [toggleFn]=\"toggleJsonPath\"\n            path=\"args\"\n          />\n\n          @if (sel.query.error(); as error) {\n            <h5 class=\"et-query-devtools-section\">Error ({{ error.raw.status }})</h5>\n            <et-query-devtools-json\n              [value]=\"error.isList ? error.errors : error.error\"\n              [search]=\"jsonSearchTerm()\"\n              [expandedPaths]=\"jsonExpandedPaths()\"\n              [collapsedPaths]=\"jsonCollapsedPaths()\"\n              [toggleFn]=\"toggleJsonPath\"\n              path=\"error\"\n            />\n          } @else {\n            <h5 class=\"et-query-devtools-section\">Response</h5>\n            <et-query-devtools-json\n              [value]=\"sel.query.response()\"\n              [search]=\"jsonSearchTerm()\"\n              [expandedPaths]=\"jsonExpandedPaths()\"\n              [collapsedPaths]=\"jsonCollapsedPaths()\"\n              [toggleFn]=\"toggleJsonPath\"\n              path=\"response\"\n            />\n          }\n        }\n      }\n    </ng-template>\n  </section>\n}\n\n@if (!open()) {\n  <et-query-devtools-toggle (openChange)=\"toggleOpen()\" />\n}\n\n@if (inspectActive() && inspectHover(); as hover) {\n  <div\n    [style.left.px]=\"hover.rect.left\"\n    [style.top.px]=\"hover.rect.top\"\n    [style.width.px]=\"hover.rect.width\"\n    [style.height.px]=\"hover.rect.height\"\n    class=\"et-query-devtools-inspect-box\"\n  >\n    <span class=\"et-query-devtools-inspect-tag\">{{ inspectLabel(hover.entries) }}</span>\n  </div>\n}\n", styles: ["@layer components{.et-query-devtools-host{--_et-qdt-bg: var(--et-surface-background-solid, rgb(24 24 27));--_et-qdt-fg: var(--et-surface-color-solid, rgb(244 244 245));--_et-qdt-muted: var(--et-surface-color-muted-solid, rgb(161 161 170));--_et-qdt-subtle: var(--et-surface-color-subtle-solid, rgb(113 113 122));--_et-qdt-border: var(--et-surface-border-solid, rgb(255 255 255 / .12));--_et-qdt-interaction: var(--et-surface-interaction-solid, rgb(255 255 255));--_et-qdt-accent: var(--et-theme-color-primary-solid, rgb(96 165 250));--_et-qdt-hover: color-mix(in srgb, var(--_et-qdt-interaction) 10%, transparent);--_et-qdt-active: color-mix(in srgb, var(--_et-qdt-interaction) 18%, transparent);--_et-qdt-success: rgb(34 197 94);--_et-qdt-error: rgb(239 68 68);--_et-qdt-loading: rgb(234 179 8);position:fixed;inset-inline:0;inset-block-end:0;z-index:2147483000;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:1.2rem;line-height:1.4;pointer-events:none}.et-query-devtools-host>*{pointer-events:auto}.et-query-devtools-panel{position:relative;display:flex;flex-direction:column;inline-size:100%;min-block-size:20rem;max-block-size:90vh;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border-block-start:1px solid var(--_et-qdt-border);box-shadow:0 -.4rem 2rem #00000059}.et-query-devtools-panel--resizing{-webkit-user-select:none;user-select:none}.et-query-devtools-resize{position:absolute;inset-inline:0;inset-block-start:0;block-size:.6rem;cursor:ns-resize;z-index:1}.et-query-devtools-resize:after{content:\"\";position:absolute;inset-inline:50%;inset-block-start:.2rem;inline-size:4rem;margin-inline-start:-2rem;block-size:.2rem;border-radius:999px;background:var(--_et-qdt-border)}.et-query-devtools-resize:hover:after{background:var(--_et-qdt-accent)}.et-query-devtools-header{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-inline:.8rem;border-block-end:1px solid var(--_et-qdt-border);flex:0 0 auto}.et-query-devtools-armed-bar{display:flex;align-items:center;gap:.8rem;flex:0 0 auto;padding:.6rem .8rem;background:color-mix(in srgb,var(--_et-qdt-error) 14%,transparent);border-block-end:1px solid color-mix(in srgb,var(--_et-qdt-error) 45%,transparent);color:var(--_et-qdt-error);font-size:1.1rem}.et-query-devtools-armed-text{flex:1 1 auto;min-inline-size:0}.et-query-devtools-armed-dot{flex:0 0 auto;inline-size:.8rem;block-size:.8rem;border-radius:50%;background:var(--_et-qdt-error);animation:et-query-devtools-armed-pulse 1.6s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.et-query-devtools-armed-dot{animation:none}}@keyframes et-query-devtools-armed-pulse{50%{opacity:.25}}.et-query-devtools-armed-bar .et-query-devtools-btn{flex:0 0 auto;border-color:color-mix(in srgb,var(--_et-qdt-error) 55%,transparent);color:var(--_et-qdt-error)}.et-query-devtools-tabs{display:flex;flex-wrap:wrap;gap:.2rem}.et-query-devtools-tab{appearance:none;border:none;background:transparent;color:var(--_et-qdt-muted);padding:.9rem 1rem;cursor:pointer;border-block-end:2px solid transparent;font:inherit}.et-query-devtools-tab:hover{color:var(--_et-qdt-fg)}.et-query-devtools-tab--active{color:var(--_et-qdt-fg);border-block-end-color:var(--_et-qdt-accent)}.et-query-devtools-tab-badge{display:inline-block;margin-inline-start:.5rem;padding-inline:.45rem;border-radius:999px;background:color-mix(in srgb,var(--_et-qdt-interaction) 12%,transparent);color:var(--_et-qdt-muted);font-size:1rem;font-variant-numeric:tabular-nums}.et-query-devtools-tab-badge--error{background:color-mix(in srgb,var(--_et-qdt-error) 25%,transparent);color:var(--_et-qdt-fg)}.et-query-devtools-header-actions{display:flex;align-items:center;gap:.4rem;flex:0 0 auto}.et-query-devtools-inspect-btn{appearance:none;position:relative;display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.4rem .8rem;font:inherit;transition:color .12s ease,background-color .12s ease,border-color .12s ease}.et-query-devtools-inspect-btn:hover{color:var(--_et-qdt-fg);background:color-mix(in srgb,var(--_et-qdt-accent) 12%,transparent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent)}.et-query-devtools-inspect-btn:focus-visible{outline:2px solid var(--_et-qdt-accent);outline-offset:2px}.et-query-devtools-inspect-icon{inline-size:1.4rem;block-size:1.4rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round}.et-query-devtools-inspect-icon-dot{fill:currentColor;stroke:none}.et-query-devtools-inspect-btn--active,.et-query-devtools-inspect-btn--active:hover{color:#09090b;background:var(--_et-qdt-accent);border-color:var(--_et-qdt-accent)}.et-query-devtools-inspect-btn--active:after{content:\"\";position:absolute;inset:-.3rem;border:1px solid var(--_et-qdt-accent);border-radius:.6rem;pointer-events:none;animation:et-query-devtools-inspect-pulse 1.4s ease-in-out infinite}.et-query-devtools-inspect-btn--active .et-query-devtools-inspect-icon-ring{animation:et-query-devtools-inspect-pulse 1.4s ease-in-out infinite}@keyframes et-query-devtools-inspect-pulse{0%,to{opacity:.2}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.et-query-devtools-inspect-btn{transition:none}.et-query-devtools-inspect-btn--active:after,.et-query-devtools-inspect-btn--active .et-query-devtools-inspect-icon-ring{animation:none;opacity:1}}.et-query-devtools-close{appearance:none;border:none;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.6rem;font:inherit}.et-query-devtools-close-panel{appearance:none;display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:var(--_et-qdt-hover);color:var(--_et-qdt-fg);cursor:pointer;padding:.4rem .6rem .4rem .8rem;font:inherit}.et-query-devtools-close-panel:hover{border-color:var(--_et-qdt-error);color:var(--_et-qdt-error)}.et-query-devtools-kbd{border-radius:.3rem;background:var(--_et-qdt-hover);box-shadow:inset 0 0 0 1px var(--_et-qdt-border);color:var(--_et-qdt-muted);padding:.15rem .4rem;font:inherit;font-size:1.1rem;line-height:1.2;white-space:nowrap}.et-query-devtools-kbd--inverse{background:#00000026;box-shadow:inset 0 0 0 1px #00000040;color:inherit}.et-query-devtools-inspect-box{position:fixed;z-index:2147483002;pointer-events:none;border:2px solid var(--_et-qdt-accent);background:color-mix(in srgb,var(--_et-qdt-accent) 15%,transparent);border-radius:.2rem}.et-query-devtools-inspect-tag{position:absolute;inset-block-start:100%;inset-inline-start:0;margin-block-start:.2rem;padding:.2rem .5rem;border-radius:.3rem;background:var(--_et-qdt-accent);color:#09090b;font-family:ui-monospace,monospace;font-size:1.1rem;font-weight:600;white-space:nowrap}.et-query-devtools-close:hover{color:var(--_et-qdt-fg)}.et-query-devtools-body{flex:1 1 auto;min-block-size:0;overflow:hidden}.et-query-devtools-master-detail{display:flex;block-size:100%;min-block-size:0}.et-query-devtools-list{flex:0 0 34%;min-inline-size:22rem;max-inline-size:40rem;overflow-y:auto;border-inline-end:1px solid var(--_et-qdt-border)}.et-query-devtools-detail{flex:1 1 auto;min-inline-size:0;overflow-y:auto;padding:1rem}.et-query-devtools-detail .et-query-devtools-detail-head,.et-query-devtools-drawer .et-query-devtools-detail-head{padding-block-end:.8rem;border-block-end:1px solid var(--_et-qdt-border)}.et-query-devtools-detail .et-query-devtools-meta,.et-query-devtools-drawer .et-query-devtools-meta{padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 3%,transparent)}.et-query-devtools-detail .et-query-devtools-section-row,.et-query-devtools-drawer .et-query-devtools-section-row{padding-block-start:.8rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-filter-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.3rem .35rem .3rem .7rem;border-radius:999px;background:color-mix(in srgb,var(--_et-qdt-accent) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-qdt-accent) 45%,transparent);color:var(--_et-qdt-accent);font-size:1.1rem;font-weight:600;letter-spacing:.02em}.et-query-devtools-filter-icon{font-size:1.3rem;line-height:1}.et-query-devtools-filter-count{border-radius:999px;background:var(--_et-qdt-accent);color:#09090b;min-inline-size:1.8rem;padding:0 .5rem;text-align:center}.et-query-devtools-filter-clear{appearance:none;display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.3rem .6rem;font:inherit;font-size:1.15rem;line-height:1.4}.et-query-devtools-filter-clear:hover{border-color:color-mix(in srgb,var(--_et-qdt-accent) 60%,transparent);color:var(--_et-qdt-fg)}.et-query-devtools-scroll{block-size:100%;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.et-query-devtools-split{display:flex;block-size:100%;min-block-size:0}.et-query-devtools-split .et-query-devtools-scroll{flex:1 1 auto;min-inline-size:0}.et-query-devtools-pane{display:flex;flex-direction:column;flex:1 1 auto;block-size:100%;min-inline-size:0;min-block-size:0;overflow:hidden}.et-query-devtools-pane>.et-query-devtools-scroll{padding-block:0 1rem}.et-query-devtools-drawer{flex:0 0 42%;min-inline-size:26rem;max-inline-size:48rem;overflow-y:auto;padding:0 1rem 1rem;border-inline-start:1px solid var(--_et-qdt-border)}.et-query-devtools-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem 0;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg);color:var(--_et-qdt-muted);border-block-end:1px solid var(--_et-qdt-border);margin-block-end:.8rem}.et-query-devtools-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem;padding:.8rem;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg)}.et-query-devtools-toolbar-row{display:flex;align-items:center;flex-wrap:wrap;flex:1 1 100%;gap:.8rem}.et-query-devtools-toolbar-row .et-query-devtools-search{flex:1 1 100%}.et-query-devtools-toolbar--filtered{background:linear-gradient(to right,color-mix(in srgb,var(--_et-qdt-accent) 12%,transparent),transparent 65%),var(--_et-qdt-bg);box-shadow:inset .2rem 0 0 var(--_et-qdt-accent),inset 0 -1px color-mix(in srgb,var(--_et-qdt-accent) 30%,transparent)}.et-query-devtools-field{display:inline-flex;align-items:center;gap:.6rem;color:var(--_et-qdt-muted)}.et-query-devtools-select{background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-count{color:var(--_et-qdt-subtle)}.et-query-devtools-row{display:flex;align-items:center;gap:.8rem;inline-size:100%;min-block-size:3.6rem;text-align:start;appearance:none;border:none;border-block-end:1px solid var(--_et-qdt-border);background:transparent;color:var(--_et-qdt-fg);padding:.8rem;cursor:pointer;font:inherit}.et-query-devtools-row>.et-query-devtools-chip{padding-block:.1rem;line-height:1.2}.et-query-devtools-row:hover{background:var(--_et-qdt-hover)}.et-query-devtools-row--active{background:var(--_et-qdt-active)}.et-query-devtools-method{font-weight:700;font-size:1.1rem;color:var(--_et-qdt-muted);white-space:nowrap}.et-query-devtools-route{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-inline-size:0}.et-query-devtools-route-param{color:var(--_et-qdt-accent)}.et-query-devtools-route-query{color:var(--_et-qdt-muted)}.et-query-devtools-status{inline-size:.8rem;block-size:.8rem;border-radius:999px;flex:0 0 auto;background:var(--_et-qdt-subtle)}.et-query-devtools-status[data-status=success]{background:var(--_et-qdt-success)}.et-query-devtools-status[data-status=error]{background:var(--_et-qdt-error)}.et-query-devtools-status[data-status=loading],.et-query-devtools-status[data-status=running]{background:var(--_et-qdt-loading)}.et-query-devtools-detail-head{display:flex;align-items:center;gap:.8rem;margin-block-end:.8rem}.et-query-devtools-live{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-block-end:.8rem}.et-query-devtools-live-note{color:var(--_et-qdt-muted);font-size:1.15rem}.et-query-devtools-progress{display:block;flex:1 1 12rem;min-inline-size:8rem;max-inline-size:24rem;block-size:.5rem;border-radius:999px;overflow:hidden;background:var(--_et-qdt-border)}.et-query-devtools-progress-bar{display:block;block-size:100%;border-radius:inherit;background:var(--_et-qdt-accent)}.et-query-devtools-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-block-end:.8rem}.et-query-devtools-btn{appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.3rem;background:transparent;color:var(--_et-qdt-fg);padding:.25rem .55rem;font-size:1.15rem;line-height:1.4;cursor:pointer}.et-query-devtools-btn:hover{background:var(--_et-qdt-hover)}.et-query-devtools-btn:disabled{color:var(--_et-qdt-subtle);cursor:default;background:transparent}.et-query-devtools-toolbar-btn{margin-inline-start:auto;flex:0 0 auto}.et-query-devtools-meta{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0 0 1rem}.et-query-devtools-meta dt{color:var(--_et-qdt-muted)}.et-query-devtools-meta dd{margin:0;overflow-wrap:anywhere}.et-query-devtools-section{margin:1rem 0 .4rem;font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--_et-qdt-muted)}.et-query-devtools-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.6rem;margin:0 0 1rem}.et-query-devtools-stat{padding:.6rem .8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 3%,transparent)}.et-query-devtools-stat dt{font-size:1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--_et-qdt-muted)}.et-query-devtools-stat dd{margin:0;font-size:1.5rem;font-variant-numeric:tabular-nums}.et-query-devtools-stat-value--sm{font-size:1.2rem}.et-query-devtools-stat-sub{display:block;font-size:1rem;color:var(--_et-qdt-subtle)}.et-query-devtools-traffic{margin-inline-start:auto;flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--_et-qdt-subtle)}.et-query-devtools-json{margin:0;padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;max-block-size:24rem;overflow-y:auto}.et-query-devtools-json--error{border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-mono{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.et-query-devtools-code{margin:0 0 .8rem;padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);overflow:auto;white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.15rem;max-block-size:20rem}.et-query-devtools-ws-message{border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.6rem;margin-block-end:.4rem}.et-query-devtools-url{display:inline-block;max-inline-size:32rem;margin-inline-start:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.et-query-devtools-chips,.et-query-devtools-chip-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-end:.8rem}.et-query-devtools-features{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:.4rem .8rem;margin:0 0 .8rem;padding:0;list-style:none}.et-query-devtools-meta .et-query-devtools-features{margin-block-end:0}.et-query-devtools-feature{display:contents}.et-query-devtools-feature>.et-query-devtools-chip{justify-self:start}.et-query-devtools-feature-details{display:flex;flex-wrap:wrap;gap:.3rem}.et-query-devtools-feature-detail{display:inline-flex;align-items:baseline;gap:.4rem;padding:.2rem .5rem;border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 5%,transparent);font-size:1.1rem}.et-query-devtools-feature-label{color:var(--_et-qdt-muted)}.et-query-devtools-feature-value{color:var(--_et-qdt-fg);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.et-query-devtools-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--_et-qdt-border);font-size:1.1rem;color:var(--_et-qdt-fg);background:color-mix(in srgb,var(--_et-qdt-interaction) 6%,transparent)}.et-query-devtools-chip--muted{color:var(--_et-qdt-muted)}.et-query-devtools-retry-glyph{font-size:.7em;line-height:1}.et-query-devtools-chip--loading{color:var(--_et-qdt-loading);border-color:color-mix(in srgb,var(--_et-qdt-loading) 50%,transparent)}.et-query-devtools-chip--error{color:var(--_et-qdt-error);border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-chip--success{color:var(--_et-qdt-success);border-color:color-mix(in srgb,var(--_et-qdt-success) 50%,transparent)}button.et-query-devtools-chip--button{appearance:none;cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}button.et-query-devtools-chip--button:hover{border-color:var(--_et-qdt-accent);color:var(--_et-qdt-accent)}.et-query-devtools-caret{display:inline-block;width:1.2rem;color:var(--_et-qdt-muted)}.et-query-devtools-facet{appearance:none;cursor:pointer;color:var(--_et-qdt-muted);font:inherit;font-size:1.1rem;line-height:1.4}.et-query-devtools-facet:hover:not(:disabled){color:var(--_et-qdt-fg);border-color:color-mix(in srgb,var(--_et-qdt-accent) 60%,transparent)}.et-query-devtools-facet:disabled{color:var(--_et-qdt-subtle);cursor:default}.et-query-devtools-facet--active{color:var(--_et-qdt-accent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-accent) 14%,transparent)}.et-query-devtools-facet-count{font-variant-numeric:tabular-nums;color:inherit;opacity:.75}.et-query-devtools-card{border:1px solid var(--_et-qdt-border);border-radius:.6rem;padding:1rem}.et-query-devtools-card-head{display:flex;align-items:center;gap:.6rem;margin-block-end:.8rem}.et-query-devtools-card-title{display:flex;align-items:baseline;gap:.5rem;margin-block-end:.2rem}.et-query-devtools-card-sub{color:var(--_et-qdt-subtle);font-size:1.1rem;margin-block-end:.6rem;overflow-wrap:anywhere}.et-query-devtools-inner-queries{display:flex;flex-direction:column;gap:.3rem}.et-query-devtools-inner-row{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-fg);padding:.4rem .6rem;cursor:pointer;font:inherit}.et-query-devtools-inner-row:hover:not([disabled]){background:var(--_et-qdt-hover)}.et-query-devtools-inner-row--active{background:var(--_et-qdt-active);border-color:var(--_et-qdt-accent)}.et-query-devtools-inner-row[disabled]{cursor:default;opacity:.6}.et-query-devtools-step-list{display:flex;flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none}.et-query-devtools-step-item{border:1px solid var(--_et-qdt-border);border-radius:.4rem;overflow:hidden}.et-query-devtools-step-item[data-status=error]{border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-step-head{display:flex;align-items:stretch}.et-query-devtools-step-head .et-query-devtools-inner-row{border:none;border-radius:0;flex:1 1 auto}.et-query-devtools-step-caret-btn{appearance:none;border:none;border-inline-start:1px solid var(--_et-qdt-border);background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:0 .7rem;font:inherit}.et-query-devtools-step-caret-btn:hover{background:var(--_et-qdt-hover);color:var(--_et-qdt-fg)}.et-query-devtools-step-toggle{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:none;background:transparent;color:var(--_et-qdt-fg);padding:.6rem;cursor:pointer;font:inherit}.et-query-devtools-step-toggle:hover{background:var(--_et-qdt-hover)}.et-query-devtools-step-index{flex:1 1 auto;min-inline-size:0}.et-query-devtools-step-caret{color:var(--_et-qdt-muted)}.et-query-devtools-step-io{padding:0 .8rem .8rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-table{inline-size:100%;border-collapse:collapse}.et-query-devtools-table th,.et-query-devtools-table td{text-align:start;padding:.5rem .6rem;border-block-end:1px solid var(--_et-qdt-border);vertical-align:top}.et-query-devtools-table th{color:var(--_et-qdt-muted);font-weight:600;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg)}.et-query-devtools-table tr[data-status=error] td{color:var(--_et-qdt-error)}.et-query-devtools-empty{color:var(--_et-qdt-subtle);padding:1.2rem;text-align:center}.et-query-devtools-actions-label{color:var(--_et-qdt-subtle);align-self:center;text-transform:uppercase;font-size:1rem;letter-spacing:.05em}.et-query-devtools-actions-label:not(:first-child){margin-inline-start:.7rem}.et-query-devtools-cell-actions{display:flex;gap:.4rem;white-space:nowrap}.et-query-devtools-section-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-block-start:1rem}.et-query-devtools-search{flex:0 1 20rem;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-row-link{display:inline-flex;align-items:center;gap:.6rem;appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;text-align:start;cursor:pointer}.et-query-devtools-row-link:hover .et-query-devtools-url,.et-query-devtools-row-link:focus-visible .et-query-devtools-url{color:var(--_et-qdt-accent);text-decoration:underline}.et-query-devtools-hint{flex:1 1 24rem;color:var(--_et-qdt-muted);font-size:1.1rem;margin:0}.et-query-devtools-card--armed{border-color:color-mix(in srgb,var(--_et-qdt-error) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-error) 6%,transparent)}.et-query-devtools-faults{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:.8rem 1.6rem}.et-query-devtools-faults .et-query-devtools-field{display:grid;grid-template-columns:8rem minmax(0,1fr);align-items:baseline;row-gap:.2rem;color:var(--_et-qdt-fg)}.et-query-devtools-faults .et-query-devtools-field small{grid-column:2;color:var(--_et-qdt-subtle);font-size:1.1rem}.et-query-devtools-input{inline-size:100%;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-input--number{inline-size:8rem;font-variant-numeric:tabular-nums}.et-query-devtools-editor{border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.8rem;margin-block-end:1rem}.et-query-devtools-textarea{inline-size:100%;min-block-size:12rem;resize:vertical;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.6rem;font-family:inherit;font-size:1.2rem}.et-query-devtools-editor-error{color:var(--_et-qdt-error);margin:.4rem 0 0}.et-query-devtools-json-node,.et-query-devtools-json-children{display:flex;flex-direction:column}.et-query-devtools-json-children{padding-inline-start:1.4rem;border-inline-start:1px solid var(--_et-qdt-border);margin-inline-start:.4rem}.et-query-devtools-json-row{display:flex;align-items:baseline;gap:.4rem;padding:.1rem 0;font-family:inherit;line-height:1.5}.et-query-devtools-json-toggle{appearance:none;display:flex;align-items:baseline;gap:.4rem;min-inline-size:0;border:none;background:transparent;color:var(--_et-qdt-fg);cursor:pointer;text-align:start;font:inherit;padding:.1rem 0}.et-query-devtools-json-node>.et-query-devtools-json-row:hover{background:var(--_et-qdt-hover)}.et-query-devtools-json-caret{color:var(--_et-qdt-subtle);inline-size:1rem;flex:0 0 auto}.et-query-devtools-json-key{color:var(--_et-qdt-accent)}.et-query-devtools-json-colon,.et-query-devtools-json-preview{color:var(--_et-qdt-subtle)}.et-query-devtools-json-chunk{color:var(--_et-qdt-fg);opacity:.75;font-variant-numeric:tabular-nums}.et-query-devtools-json-value{overflow-wrap:anywhere}.et-query-devtools-json-leaf[data-kind=string] .et-query-devtools-json-value{color:var(--_et-qdt-success)}.et-query-devtools-json-leaf[data-kind=number] .et-query-devtools-json-value,.et-query-devtools-json-leaf[data-kind=boolean] .et-query-devtools-json-value{color:var(--_et-qdt-loading)}.et-query-devtools-json-leaf[data-kind=null] .et-query-devtools-json-value,.et-query-devtools-json-leaf[data-kind=undefined] .et-query-devtools-json-value{color:var(--_et-qdt-subtle)}.et-query-devtools-json-hit{background:color-mix(in srgb,var(--_et-qdt-loading) 40%,transparent);border-radius:.2rem}.et-query-devtools-json-copy{appearance:none;display:inline-flex;align-items:center;justify-content:center;align-self:center;flex:0 0 auto;inline-size:2.2rem;block-size:2.2rem;margin-block:-.4rem;border:none;border-radius:.3rem;background:transparent;color:var(--_et-qdt-subtle);cursor:pointer;opacity:0;font:inherit;font-size:1.3rem;line-height:1}.et-query-devtools-json-copy:hover:not(.et-query-devtools-json-copy--copied){background:var(--_et-qdt-active);color:var(--_et-qdt-fg)}.et-query-devtools-json-row:hover .et-query-devtools-json-copy,.et-query-devtools-json-copy:focus-visible,.et-query-devtools-json-copy--copied{opacity:1}.et-query-devtools-json-copy--copied{color:var(--_et-qdt-success)}.et-query-devtools-timeline{display:grid;grid-template-columns:minmax(10rem,26rem) minmax(14rem,1fr) max-content max-content max-content;gap:.1rem .8rem;padding-inline:.4rem 1rem}.et-query-devtools-timeline-axis,.et-query-devtools-timeline-row{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center}.et-query-devtools-timeline-axis{position:sticky;inset-block-start:0;z-index:1;background:var(--_et-qdt-bg);border-block-end:1px solid var(--_et-qdt-border);padding-block-end:.4rem;margin-block-end:.4rem}.et-query-devtools-timeline-ticks{grid-column:2;position:relative;block-size:1.5rem}.et-query-devtools-timeline-tick{position:absolute;inset-block-start:0;transform:translate(-50%);color:var(--_et-qdt-subtle);font-size:1.1rem;white-space:nowrap}.et-query-devtools-timeline-tick:first-child{transform:none}.et-query-devtools-timeline-tick:last-child{transform:translate(-100%)}.et-query-devtools-timeline-row{appearance:none;border:0;background:transparent;color:inherit;font:inherit;text-align:start;padding:.15rem 0;cursor:pointer}.et-query-devtools-timeline-row:hover{background:var(--_et-qdt-hover)}.et-query-devtools-timeline-row--active{background:var(--_et-qdt-active)}.et-query-devtools-timeline-label{display:flex;align-items:baseline;gap:.4rem;min-inline-size:0;overflow:hidden}.et-query-devtools-timeline-label .et-query-devtools-url{max-inline-size:none;margin-inline-start:0}.et-query-devtools-timeline-track{position:relative;block-size:1.8rem;border-radius:.2rem;overflow:hidden;background-color:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);background-image:repeating-linear-gradient(to right,var(--_et-qdt-border) 0 1px,transparent 1px 25%)}.et-query-devtools-timeline-bar{position:absolute;inset-block:.4rem;min-inline-size:.2rem;border-radius:.2rem;background:var(--_et-qdt-subtle)}.et-query-devtools-timeline-bar[data-status=success]{background:var(--_et-qdt-success)}.et-query-devtools-timeline-bar[data-status=error]{background:var(--_et-qdt-error)}.et-query-devtools-timeline-bar[data-status=loading]{background:var(--_et-qdt-loading)}.et-query-devtools-timeline-bar[data-status=aborted]{min-inline-size:.5rem;background:color-mix(in srgb,var(--_et-qdt-subtle) 20%,transparent);outline:1px solid color-mix(in srgb,var(--_et-qdt-subtle) 70%,transparent);outline-offset:-1px}.et-query-devtools-timeline-duration,.et-query-devtools-timeline-size{text-align:end;color:var(--_et-qdt-muted);font-size:1.1rem;font-variant-numeric:tabular-nums;white-space:nowrap}.et-query-devtools-timeline-duration{color:var(--_et-qdt-fg)}.et-query-devtools-timeline-flags{display:flex;align-items:center;gap:.3rem;white-space:nowrap}.et-query-devtools-timeline-flags .et-query-devtools-chip{padding:0 .4rem;border-color:transparent;border-radius:.3rem;background:color-mix(in srgb,currentcolor 12%,transparent);font-size:1rem;line-height:1.5;font-variant-numeric:tabular-nums}.et-query-devtools-subtabs{display:flex;flex-wrap:wrap;gap:.2rem;border-block-end:1px solid var(--_et-qdt-border);margin-block:.8rem}.et-query-devtools-subtabs+.et-query-devtools-section-row{padding-block-start:0;border-block-start:0}.et-query-devtools-subtab{appearance:none;display:inline-flex;align-items:center;gap:.4rem;border:0;border-block-end:2px solid transparent;background:transparent;color:var(--_et-qdt-muted);font:inherit;font-size:1.15rem;padding:.4rem .6rem;margin-block-end:-1px;cursor:pointer}.et-query-devtools-subtab:hover{color:var(--_et-qdt-fg)}.et-query-devtools-subtab--active{color:var(--_et-qdt-fg);border-block-end-color:var(--_et-qdt-accent)}.et-query-devtools-run-cell{display:flex;align-items:center;gap:.5rem}.et-query-devtools-btn--active{color:var(--_et-qdt-accent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-accent) 12%,transparent)}.et-query-devtools-diff td{max-inline-size:28rem;overflow-wrap:anywhere}.et-query-devtools-diff-before{color:var(--_et-qdt-muted)}.et-query-devtools-diff tr[data-kind=removed] .et-query-devtools-diff-before{color:var(--_et-qdt-error)}.et-query-devtools-diff tr[data-kind=added] .et-query-devtools-diff-after{color:var(--_et-qdt-success)}.et-query-devtools-diff tr[data-kind=changed] .et-query-devtools-diff-after{color:var(--_et-qdt-accent)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QueryDevtoolsJsonComponent, selector: "et-query-devtools-json", inputs: ["value", "nodeKey", "depth", "search", "chunk", "path", "expandedPaths", "collapsedPaths", "toggleFn"] }, { kind: "component", type: QueryDevtoolsToggleComponent, selector: "et-query-devtools-toggle", outputs: ["openChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-query-devtools', encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, QueryDevtoolsJsonComponent, QueryDevtoolsToggleComponent], host: {
                         class: 'et-query-devtools-host',
-                    }, template: "@if (open()) {\n  <section\n    [class.et-query-devtools-panel--resizing]=\"resizing()\"\n    [style.height.px]=\"panelHeight()\"\n    class=\"et-query-devtools-panel\"\n  >\n    <div\n      (pointerdown)=\"startResize($event)\"\n      class=\"et-query-devtools-resize\"\n      title=\"Drag to resize\"\n      aria-hidden=\"true\"\n    ></div>\n    <header class=\"et-query-devtools-header\">\n      <nav class=\"et-query-devtools-tabs\" role=\"tablist\">\n        @for (tab of tabs; track tab.id) {\n          <button\n            [class.et-query-devtools-tab--active]=\"activeTab() === tab.id\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n            (click)=\"activeTab.set(tab.id)\"\n            class=\"et-query-devtools-tab\"\n            type=\"button\"\n            role=\"tab\"\n          >\n            {{ tab.label }}\n          </button>\n        }\n      </nav>\n\n      <div class=\"et-query-devtools-header-actions\">\n        <button\n          [class.et-query-devtools-inspect-btn--active]=\"inspectActive()\"\n          (click)=\"toggleInspect()\"\n          class=\"et-query-devtools-inspect-btn\"\n          type=\"button\"\n          title=\"Inspect: hover the UI to find its query\"\n        >\n          \u2316 Inspect\n        </button>\n        <button\n          (click)=\"toggleOpen()\"\n          class=\"et-query-devtools-close-panel\"\n          type=\"button\"\n          title=\"Close devtools ({{ shortcut }})\"\n        >\n          <span aria-hidden=\"true\">\u2715</span>\n          Close\n          <kbd class=\"et-query-devtools-kbd\">{{ shortcut }}</kbd>\n        </button>\n      </div>\n    </header>\n\n    <div class=\"et-query-devtools-body\">\n      @switch (activeTab()) {\n        <!-- QUERIES -->\n        @case ('queries') {\n          <div class=\"et-query-devtools-master-detail\">\n            <div class=\"et-query-devtools-list\">\n              <div [class.et-query-devtools-toolbar--filtered]=\"!!inspectFilterIds()\" class=\"et-query-devtools-toolbar\">\n                @if (inspectFilterIds(); as ids) {\n                  <span class=\"et-query-devtools-filter-chip\">\n                    <span class=\"et-query-devtools-filter-icon\" aria-hidden=\"true\">\u2316</span>\n                    Inspected element\n                    <span class=\"et-query-devtools-filter-count\">{{ ids.length }}</span>\n                  </span>\n                  <button\n                    (click)=\"clearInspectFilter()\"\n                    class=\"et-query-devtools-filter-clear\"\n                    type=\"button\"\n                    title=\"Clear the inspection filter and show all queries\"\n                  >\n                    <span aria-hidden=\"true\">\u2715</span>\n                    Clear\n                  </button>\n                } @else {\n                  <label class=\"et-query-devtools-field\">\n                    <span>Client</span>\n                    <select\n                      #clientSelect\n                      [value]=\"selectedClientName() ?? ''\"\n                      (change)=\"selectClient(clientSelect.value || null)\"\n                      class=\"et-query-devtools-select\"\n                    >\n                      <option value=\"\">All clients</option>\n                      @for (name of clientNames(); track name) {\n                        <option [value]=\"name\">{{ name }}</option>\n                      }\n                    </select>\n                  </label>\n                  <span class=\"et-query-devtools-count\">{{ filteredQueries().length }}</span>\n                }\n              </div>\n\n              @for (item of filteredQueries(); track item.entry.id) {\n                <button\n                  [class.et-query-devtools-row--active]=\"selectedQueryId() === item.entry.id\"\n                  (click)=\"selectedQueryId.set(item.entry.id)\"\n                  class=\"et-query-devtools-row\"\n                  type=\"button\"\n                >\n                  <span\n                    [attr.data-status]=\"queryStatus(item.query)\"\n                    [title]=\"queryStatus(item.query)\"\n                    class=\"et-query-devtools-status\"\n                  ></span>\n                  <span class=\"et-query-devtools-method\">{{ item.entry.meta.method }}</span>\n                  <span class=\"et-query-devtools-route\">{{ item.entry.meta.route || '\u2014' }}</span>\n                  @if (isStale(item.query)) {\n                    <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">stale</span>\n                  }\n                </button>\n              } @empty {\n                @if (inspectFilterIds()) {\n                  <p class=\"et-query-devtools-empty\">\n                    The inspected element's queries are no longer registered. Clear the filter.\n                  </p>\n                } @else {\n                  <p class=\"et-query-devtools-empty\">No queries registered.</p>\n                }\n              }\n            </div>\n\n            <div class=\"et-query-devtools-detail\">\n              @if (selectedQuery(); as sel) {\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              } @else {\n                <p class=\"et-query-devtools-empty\">Select a query to inspect it.</p>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- STACKS -->\n        @case ('stacks') {\n          <div class=\"et-query-devtools-split\">\n            <div class=\"et-query-devtools-scroll\">\n              @for (entry of stackEntries(); track entry.id) {\n                @if (entry.kind === 'paged-query-stack') {\n                  @let paged = asPagedStack(entry);\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">paged stack</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ paged.direction() }}</span>\n                      @if (paged.loading()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--loading\">loading</span>\n                      }\n                    </div>\n\n                    @let pagedId = stackIdentity(paged);\n                    <div class=\"et-query-devtools-card-title\">\n                      <span class=\"et-query-devtools-method\">{{ pagedId.method }}</span>\n                      <span class=\"et-query-devtools-route\">{{ pagedId.route }}</span>\n                    </div>\n                    <div class=\"et-query-devtools-card-sub et-query-devtools-mono\">{{ pagedId.baseUrl }}</div>\n                    @if (entry.meta.featureTypes?.length) {\n                      <div class=\"et-query-devtools-chips\">\n                        @for (feature of entry.meta.featureTypes; track feature) {\n                          <span class=\"et-query-devtools-chip\">{{ featureLabel(feature) }}</span>\n                        }\n                      </div>\n                    }\n\n                    <dl class=\"et-query-devtools-meta\">\n                      <dt>Pages loaded</dt>\n                      <dd>{{ paged.queries().length }}</dd>\n                      <dt>Items</dt>\n                      <dd>{{ paged.items().length }}</dd>\n                      <dt>First page loaded</dt>\n                      <dd>{{ paged.isFirstPageLoaded() }}</dd>\n                      <dt>Last page loaded</dt>\n                      <dd>{{ paged.isLastPageLoaded() }}</dd>\n                    </dl>\n                    <ng-container *ngTemplateOutlet=\"innerQueriesTpl; context: { links: queriesForStack(paged) }\" />\n                  </div>\n                } @else {\n                  @let stack = asStack(entry);\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">stack</span>\n                      @if (stack.anyLoading()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--loading\">loading</span>\n                      }\n                      @if (stack.anyError()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--error\">error</span>\n                      }\n                    </div>\n\n                    @let stackId = stackIdentity(stack);\n                    <div class=\"et-query-devtools-card-title\">\n                      <span class=\"et-query-devtools-method\">{{ stackId.method }}</span>\n                      <span class=\"et-query-devtools-route\">{{ stackId.route }}</span>\n                    </div>\n                    <div class=\"et-query-devtools-card-sub et-query-devtools-mono\">{{ stackId.baseUrl }}</div>\n                    @if (entry.meta.featureTypes?.length) {\n                      <div class=\"et-query-devtools-chips\">\n                        @for (feature of entry.meta.featureTypes; track feature) {\n                          <span class=\"et-query-devtools-chip\">{{ featureLabel(feature) }}</span>\n                        }\n                      </div>\n                    }\n\n                    <dl class=\"et-query-devtools-meta\">\n                      <dt>Queries</dt>\n                      <dd>{{ stack.queries().length }}</dd>\n                      <dt>Loading</dt>\n                      <dd>{{ stack.loadingProgress().loaded }} / {{ stack.loadingProgress().total }}</dd>\n                      <dt>Errors</dt>\n                      <dd>{{ stack.errors().length }}</dd>\n                    </dl>\n                    <ng-container *ngTemplateOutlet=\"innerQueriesTpl; context: { links: queriesForStack(stack) }\" />\n                  </div>\n                }\n              } @empty {\n                <p class=\"et-query-devtools-empty\">No stacks registered.</p>\n              }\n            </div>\n\n            @if (stackSelectedQuery(); as sel) {\n              <aside class=\"et-query-devtools-drawer\">\n                <div class=\"et-query-devtools-drawer-head\">\n                  <span>Query detail</span>\n                  <button\n                    (click)=\"stackSelectedQueryId.set(null)\"\n                    class=\"et-query-devtools-close\"\n                    type=\"button\"\n                    title=\"Close detail\"\n                  >\n                    \u2715\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              </aside>\n            }\n          </div>\n        }\n\n        <!-- SEQUENCES -->\n        @case ('sequences') {\n          <div class=\"et-query-devtools-split\">\n            <div class=\"et-query-devtools-scroll\">\n              @for (entry of sequenceEntries(); track entry.id) {\n                @let sequence = asSequence(entry);\n                @if (sequence) {\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">sequence</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ sequence.status() }}</span>\n                      <span class=\"et-query-devtools-count\"\n                        >step {{ sequence.currentStep() }} / {{ sequence.total }}</span\n                      >\n                    </div>\n\n                    <ol class=\"et-query-devtools-step-list\">\n                      @for (link of queriesForSequence(sequence); track $index; let i = $index) {\n                        <li [attr.data-status]=\"sequenceStepStatus(sequence, i)\" class=\"et-query-devtools-step-item\">\n                          <div class=\"et-query-devtools-step-head\">\n                            <button\n                              [class.et-query-devtools-inner-row--active]=\"sequenceSelectedQueryId() === link.id\"\n                              [disabled]=\"!link.id\"\n                              (click)=\"sequenceSelectedQueryId.set(link.id)\"\n                              class=\"et-query-devtools-inner-row\"\n                              type=\"button\"\n                            >\n                              <span\n                                [attr.data-status]=\"sequenceStepStatus(sequence, i)\"\n                                class=\"et-query-devtools-status\"\n                              ></span>\n                              <span class=\"et-query-devtools-method\">{{ i + 1 }}. {{ link.method }}</span>\n                              <span class=\"et-query-devtools-route\">{{ link.route || 'step ' + (i + 1) }}</span>\n                            </button>\n                            <button\n                              [attr.aria-expanded]=\"isStepExpanded(entry.id, i)\"\n                              (click)=\"toggleStep(entry.id, i)\"\n                              class=\"et-query-devtools-step-caret-btn\"\n                              type=\"button\"\n                              title=\"Toggle in / out\"\n                            >\n                              {{ isStepExpanded(entry.id, i) ? '\u25BE' : '\u25B8' }}\n                            </button>\n                          </div>\n\n                          @if (isStepExpanded(entry.id, i)) {\n                            @let snap = stepSnapshot(sequence, i);\n                            <div class=\"et-query-devtools-step-io\">\n                              <h5 class=\"et-query-devtools-section\">In \u00B7 args</h5>\n                              @if (sequence.stepArgs().length > i) {\n                                <et-query-devtools-json [value]=\"sequence.stepArgs()[i]\" />\n                              } @else {\n                                <p class=\"et-query-devtools-empty\">Not run yet.</p>\n                              }\n\n                              @if (snap?.error(); as error) {\n                                <h5 class=\"et-query-devtools-section\">Out \u00B7 error ({{ error.raw.status }})</h5>\n                                <et-query-devtools-json [value]=\"error.isList ? error.errors : error.error\" />\n                              } @else {\n                                <h5 class=\"et-query-devtools-section\">Out \u00B7 response</h5>\n                                @if (snap) {\n                                  <et-query-devtools-json [value]=\"snap.response()\" />\n                                } @else {\n                                  <p class=\"et-query-devtools-empty\">Not run yet.</p>\n                                }\n                              }\n                            </div>\n                          }\n                        </li>\n                      }\n                    </ol>\n                  </div>\n                }\n              } @empty {\n                <p class=\"et-query-devtools-empty\">No sequences registered.</p>\n              }\n            </div>\n\n            @if (sequenceSelectedQuery(); as sel) {\n              <aside class=\"et-query-devtools-drawer\">\n                <div class=\"et-query-devtools-drawer-head\">\n                  <span>Query detail</span>\n                  <button\n                    (click)=\"sequenceSelectedQueryId.set(null)\"\n                    class=\"et-query-devtools-close\"\n                    type=\"button\"\n                    title=\"Close detail\"\n                  >\n                    \u2715\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              </aside>\n            }\n          </div>\n        }\n\n        <!-- AUTH -->\n        @case ('auth') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (entry of authEntries(); track entry.id) {\n              @let auth = asAuth(entry);\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong>{{ entry.meta.name || 'auth provider' }}</strong>\n                  <span\n                    [class.et-query-devtools-chip--success]=\"auth.isAuthenticated()\"\n                    [class.et-query-devtools-chip--muted]=\"!auth.isAuthenticated()\"\n                    class=\"et-query-devtools-chip\"\n                  >\n                    {{ auth.isAuthenticated() ? 'authenticated' : 'anonymous' }}\n                  </span>\n                </div>\n                <dl class=\"et-query-devtools-meta\">\n                  <dt>Base URL</dt>\n                  <dd class=\"et-query-devtools-mono\">{{ entry.meta.clientBaseUrl || entry.meta.clientName || '\u2014' }}</dd>\n                  <dt>Access token</dt>\n                  <dd>{{ auth.accessToken() ? 'present' : 'none' }}</dd>\n                  <dt>Refresh token</dt>\n                  <dd>{{ auth.refreshToken() ? 'present' : 'none' }}</dd>\n                  @if (authTokenExpiry(auth); as expiry) {\n                    <dt>Token expires in</dt>\n                    <dd>{{ expiry }}</dd>\n                  }\n                  @if (auth.executionState(); as state) {\n                    <dt>Execution state</dt>\n                    <dd>{{ state.type }} \u00B7 {{ state.state }}</dd>\n                  }\n                  @if (authQueryKeys(auth).length) {\n                    <dt>Queries</dt>\n                    <dd>\n                      <div class=\"et-query-devtools-chips\">\n                        @for (key of authQueryKeys(auth); track key) {\n                          <span class=\"et-query-devtools-chip\">{{ key }}</span>\n                        }\n                      </div>\n                    </dd>\n                  }\n                  @if (authFeatures(auth).length) {\n                    <dt>Features</dt>\n                    <dd>\n                      <div class=\"et-query-devtools-chips\">\n                        @for (feature of authFeatures(auth); track feature) {\n                          <span class=\"et-query-devtools-chip\">{{ feature }}</span>\n                        }\n                      </div>\n                    </dd>\n                  }\n                </dl>\n\n                @if (authTokenPayload(auth); as payload) {\n                  <h4 class=\"et-query-devtools-section\">Access token payload</h4>\n                  <et-query-devtools-json [value]=\"payload\" />\n                }\n\n                @if (auth.latestNonInternalQuery(); as latest) {\n                  <h4 class=\"et-query-devtools-section\">Latest auth query \u00B7 {{ latest.key }}</h4>\n                  <et-query-devtools-json [value]=\"latest.snapshot.response()\" />\n                }\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No auth providers registered.</p>\n            }\n          </div>\n        }\n\n        <!-- SOCKETS -->\n        @case ('ws') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (entry of wsEntries(); track entry.id) {\n              @let ws = asWs(entry);\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong>{{ entry.meta.name || 'socket' }}</strong>\n                  <span\n                    [class.et-query-devtools-chip--success]=\"ws.connected()\"\n                    [class.et-query-devtools-chip--muted]=\"!ws.connected()\"\n                    class=\"et-query-devtools-chip\"\n                  >\n                    {{ ws.connected() ? 'connected' : 'disconnected' }}\n                  </span>\n                </div>\n                <dl class=\"et-query-devtools-meta\">\n                  <dt>URL</dt>\n                  <dd class=\"et-query-devtools-mono\">{{ entry.meta.url }}</dd>\n                  <dt>Rooms</dt>\n                  <dd>\n                    @if (ws.rooms().length) {\n                      <div class=\"et-query-devtools-chips\">\n                        @for (room of ws.rooms(); track room) {\n                          <span class=\"et-query-devtools-chip\">{{ room }}</span>\n                        }\n                      </div>\n                    } @else {\n                      none\n                    }\n                  </dd>\n                </dl>\n\n                <h5 class=\"et-query-devtools-section\">Messages ({{ ws.messages().length }})</h5>\n                @for (message of ws.messages(); track message.id) {\n                  <div class=\"et-query-devtools-ws-message\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-count\">{{ formatTime(message.timestamp) }}</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ message.room }}</span>\n                      <span class=\"et-query-devtools-method\">{{ message.event }}</span>\n                    </div>\n                    <et-query-devtools-json [value]=\"message.data\" />\n                  </div>\n                } @empty {\n                  <p class=\"et-query-devtools-empty\">No messages received yet.</p>\n                }\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No web socket clients registered.</p>\n            }\n          </div>\n        }\n\n        <!-- CACHE -->\n        @case ('cache') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (client of cacheView(); track client.name) {\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong class=\"et-query-devtools-mono\">{{ client.baseUrl || client.name }}</strong>\n                  <span class=\"et-query-devtools-count\">{{ client.entries.length }} entries</span>\n                  @if (client.client?.subtle?.persistence) {\n                    <span class=\"et-query-devtools-count\">{{ persistedCount(client.client!) }} on disk</span>\n                    <button (click)=\"clearPersistedQueries(client.client!)\" class=\"et-query-devtools-btn\" type=\"button\">\n                      Clear disk\n                    </button>\n                  }\n                </div>\n                <table class=\"et-query-devtools-table\">\n                  <thead>\n                    <tr>\n                      <th>Request</th>\n                      <th>Consumers</th>\n                      <th>Secure</th>\n                      <th>Freshness</th>\n                      <th>Sync</th>\n                      <th>Disk</th>\n                      <th>Actions</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (cacheEntry of client.entries; track cacheEntry.key) {\n                      <tr>\n                        <td [title]=\"cacheEntry.request.method + ' ' + cacheEntry.request.url\">\n                          <span class=\"et-query-devtools-method\">{{ cacheEntry.request.method }}</span>\n                          <span class=\"et-query-devtools-url\">{{ requestPath(cacheEntry.request.url) }}</span>\n                        </td>\n                        <td>{{ cacheEntry.consumerCount }}</td>\n                        <td>{{ cacheEntry.isSecure ? 'yes' : 'no' }}</td>\n                        <td>{{ cacheFreshness(cacheEntry) }}</td>\n                        <td>{{ cacheSync(cacheEntry, client.pollStates) }}</td>\n                        <td>{{ cachePersistence(cacheEntry) }}</td>\n                        <td class=\"et-query-devtools-cell-actions\">\n                          <button (click)=\"refetchCacheEntry(cacheEntry)\" class=\"et-query-devtools-btn\" type=\"button\">\n                            Refetch\n                          </button>\n                          <button\n                            (click)=\"evictCacheEntry(client.repository, cacheEntry.key)\"\n                            class=\"et-query-devtools-btn\"\n                            type=\"button\"\n                          >\n                            Evict\n                          </button>\n                        </td>\n                      </tr>\n                    } @empty {\n                      <tr>\n                        <td class=\"et-query-devtools-empty\" colspan=\"7\">Cache empty.</td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No clients with a cache yet.</p>\n            }\n          </div>\n        }\n\n        <!-- EVENTS -->\n        @case ('events') {\n          <div class=\"et-query-devtools-scroll\">\n            <div class=\"et-query-devtools-toolbar\">\n              <span class=\"et-query-devtools-count\">{{ eventLog().length }} events</span>\n              <button (click)=\"clearEvents()\" class=\"et-query-devtools-btn\" type=\"button\">Clear</button>\n            </div>\n            <table class=\"et-query-devtools-table\">\n              <thead>\n                <tr>\n                  <th>Time</th>\n                  <th>Base URL</th>\n                  <th>Type</th>\n                  <th>Request</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (event of eventLog(); track event.id) {\n                  <tr [attr.data-status]=\"event.type === 'request-error' ? 'error' : 'success'\">\n                    <td>{{ formatTime(event.timestamp) }}</td>\n                    <td class=\"et-query-devtools-mono\">{{ event.client }}</td>\n                    <td>\n                      {{ eventTypeLabel(event) }}\n                      @if (event.isSecure) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">secure</span>\n                      }\n                    </td>\n                    @if (event.url; as url) {\n                      <td [title]=\"event.method + ' ' + url\">\n                        <span class=\"et-query-devtools-method\">{{ event.method }}</span>\n                        <span class=\"et-query-devtools-url\">{{ requestPath(url) }}</span>\n                      </td>\n                    } @else {\n                      <td class=\"et-query-devtools-url\">all secure entries dropped</td>\n                    }\n                  </tr>\n                } @empty {\n                  <tr>\n                    <td class=\"et-query-devtools-empty\" colspan=\"4\">No events captured yet.</td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Reusable inner-query list (stacks) \u2014 clicking opens the split-view drawer, not a tab switch. -->\n    <ng-template #innerQueriesTpl let-links=\"links\">\n      <div class=\"et-query-devtools-inner-queries\">\n        @for (link of links; track $index) {\n          <button\n            [class.et-query-devtools-inner-row--active]=\"stackSelectedQueryId() === link.id\"\n            [disabled]=\"!link.id\"\n            (click)=\"stackSelectedQueryId.set(link.id)\"\n            class=\"et-query-devtools-inner-row\"\n            type=\"button\"\n          >\n            <span [attr.data-status]=\"queryStatus(link.query)\" class=\"et-query-devtools-status\"></span>\n            <span class=\"et-query-devtools-method\">{{ link.method }}</span>\n            <span class=\"et-query-devtools-route\">{{ link.route || link.query.id() || 'query ' + ($index + 1) }}</span>\n          </button>\n        }\n      </div>\n    </ng-template>\n\n    <!-- Reusable query detail \u2014 used by the Queries tab and the stacks split-view drawer. -->\n    <ng-template #queryDetailTpl let-sel=\"sel\">\n      <div class=\"et-query-devtools-detail-head\">\n        <span class=\"et-query-devtools-method\">{{ sel.entry.meta.method }}</span>\n        <span class=\"et-query-devtools-route\">{{ sel.entry.meta.route || '\u2014' }}</span>\n      </div>\n\n      <div class=\"et-query-devtools-actions\">\n        <span class=\"et-query-devtools-actions-label\">Run</span>\n        <button (click)=\"executeQuery(sel.query, false)\" class=\"et-query-devtools-btn\" type=\"button\">Execute</button>\n        <button (click)=\"executeQuery(sel.query, true)\" class=\"et-query-devtools-btn\" type=\"button\">Cached</button>\n        <button (click)=\"resetQuery(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Reset</button>\n        <button (click)=\"copyReport(sel.entry, sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">\n          {{ copiedReport() ? '\u2713 Copied' : 'Copy report' }}\n        </button>\n        <span class=\"et-query-devtools-actions-label\">Edit</span>\n        <button (click)=\"openResponseEditor(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Response</button>\n        <button (click)=\"openArgsEditor(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Replay args</button>\n        <span class=\"et-query-devtools-actions-label\">Force</span>\n        <button (click)=\"forceLoading(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Loading</button>\n        <button (click)=\"forceError(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Error</button>\n        <button (click)=\"forceEmpty(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Empty</button>\n        <button (click)=\"clearForced(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Clear</button>\n      </div>\n\n      @if (editorMode() !== 'none') {\n        <div class=\"et-query-devtools-editor\">\n          @if (editorMode() === 'response') {\n            <h4 class=\"et-query-devtools-section\">Edit response \u2192 setResponse()</h4>\n            <textarea\n              #respArea\n              [value]=\"responseDraft()\"\n              (input)=\"responseDraft.set(respArea.value)\"\n              class=\"et-query-devtools-textarea\"\n              spellcheck=\"false\"\n            ></textarea>\n            <div class=\"et-query-devtools-actions\">\n              <button (click)=\"applyResponse(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Apply</button>\n              <button (click)=\"cancelEditor()\" class=\"et-query-devtools-btn\" type=\"button\">Cancel</button>\n            </div>\n          } @else {\n            <h4 class=\"et-query-devtools-section\">Replay with edited args \u2192 execute()</h4>\n            <textarea\n              #argsArea\n              [value]=\"argsDraft()\"\n              (input)=\"argsDraft.set(argsArea.value)\"\n              class=\"et-query-devtools-textarea\"\n              spellcheck=\"false\"\n            ></textarea>\n            <div class=\"et-query-devtools-actions\">\n              <button (click)=\"applyArgs(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Execute</button>\n              <button (click)=\"cancelEditor()\" class=\"et-query-devtools-btn\" type=\"button\">Cancel</button>\n            </div>\n          }\n          @if (editError(); as err) {\n            <p class=\"et-query-devtools-editor-error\">{{ err }}</p>\n          }\n        </div>\n      }\n\n      <dl class=\"et-query-devtools-meta\">\n        <dt>Base URL</dt>\n        <dd class=\"et-query-devtools-mono\">{{ sel.entry.meta.clientBaseUrl || sel.entry.meta.clientName || '\u2014' }}</dd>\n        <dt>Status</dt>\n        <dd>{{ queryStatus(sel.query) }}</dd>\n        <dt>Cache key</dt>\n        <dd class=\"et-query-devtools-mono\">{{ sel.query.id() || '\u2014' }}</dd>\n        <dt>Last executed</dt>\n        <dd>{{ formatTime(sel.query.lastTimeExecutedAt()) }}</dd>\n        <dt>Triggered by</dt>\n        <dd>{{ sel.query.triggeredBy() || 'user' }}</dd>\n        @if (sel.entry.meta.featureTypes?.length) {\n          <dt>Features</dt>\n          <dd>\n            <div class=\"et-query-devtools-chips\">\n              @for (feature of sel.entry.meta.featureTypes; track feature) {\n                <span class=\"et-query-devtools-chip\">{{ featureLabel(feature) }}</span>\n              }\n            </div>\n          </dd>\n        }\n      </dl>\n\n      @if (sel.entry.meta.gqlQuery; as gqlQuery) {\n        <h5 class=\"et-query-devtools-section\">GraphQL document</h5>\n        <pre class=\"et-query-devtools-code\">{{ gqlDocument(gqlQuery) }}</pre>\n      }\n\n      <div class=\"et-query-devtools-section-row\">\n        <h4 class=\"et-query-devtools-section\">Value explorer</h4>\n        <input\n          #jsonSearchInput\n          [value]=\"jsonSearch()\"\n          (input)=\"jsonSearch.set(jsonSearchInput.value)\"\n          class=\"et-query-devtools-search\"\n          type=\"search\"\n          placeholder=\"filter keys / values\u2026\"\n        />\n      </div>\n\n      <h5 class=\"et-query-devtools-section\">Args</h5>\n      <et-query-devtools-json\n        [value]=\"sel.query.args()\"\n        [search]=\"jsonSearchTerm()\"\n        [expandedPaths]=\"jsonExpandedPaths()\"\n        [collapsedPaths]=\"jsonCollapsedPaths()\"\n        [toggleFn]=\"toggleJsonPath\"\n        path=\"args\"\n      />\n\n      @if (sel.query.error(); as error) {\n        <h5 class=\"et-query-devtools-section\">Error ({{ error.raw.status }})</h5>\n        <et-query-devtools-json\n          [value]=\"error.isList ? error.errors : error.error\"\n          [search]=\"jsonSearchTerm()\"\n          [expandedPaths]=\"jsonExpandedPaths()\"\n          [collapsedPaths]=\"jsonCollapsedPaths()\"\n          [toggleFn]=\"toggleJsonPath\"\n          path=\"error\"\n        />\n      } @else {\n        <h5 class=\"et-query-devtools-section\">Response</h5>\n        <et-query-devtools-json\n          [value]=\"sel.query.response()\"\n          [search]=\"jsonSearchTerm()\"\n          [expandedPaths]=\"jsonExpandedPaths()\"\n          [collapsedPaths]=\"jsonCollapsedPaths()\"\n          [toggleFn]=\"toggleJsonPath\"\n          path=\"response\"\n        />\n      }\n    </ng-template>\n  </section>\n}\n\n@if (!open()) {\n  <et-query-devtools-toggle (openChange)=\"toggleOpen()\" />\n}\n\n@if (inspectActive() && inspectHover(); as hover) {\n  <div\n    [style.left.px]=\"hover.rect.left\"\n    [style.top.px]=\"hover.rect.top\"\n    [style.width.px]=\"hover.rect.width\"\n    [style.height.px]=\"hover.rect.height\"\n    class=\"et-query-devtools-inspect-box\"\n  >\n    <span class=\"et-query-devtools-inspect-tag\">{{ inspectLabel(hover.entries) }}</span>\n  </div>\n}\n", styles: ["@layer components{.et-query-devtools-host{--_et-qdt-bg: var(--et-surface-background-solid, rgb(24 24 27));--_et-qdt-fg: var(--et-surface-color-solid, rgb(244 244 245));--_et-qdt-muted: var(--et-surface-color-muted-solid, rgb(161 161 170));--_et-qdt-subtle: var(--et-surface-color-subtle-solid, rgb(113 113 122));--_et-qdt-border: var(--et-surface-border-solid, rgb(255 255 255 / .12));--_et-qdt-interaction: var(--et-surface-interaction-solid, rgb(255 255 255));--_et-qdt-accent: var(--et-theme-color-primary-solid, rgb(96 165 250));--_et-qdt-hover: color-mix(in srgb, var(--_et-qdt-interaction) 10%, transparent);--_et-qdt-active: color-mix(in srgb, var(--_et-qdt-interaction) 18%, transparent);--_et-qdt-success: rgb(34 197 94);--_et-qdt-error: rgb(239 68 68);--_et-qdt-loading: rgb(234 179 8);position:fixed;inset-inline:0;inset-block-end:0;z-index:2147483000;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:1.2rem;line-height:1.4;pointer-events:none}.et-query-devtools-host>*{pointer-events:auto}.et-query-devtools-panel{position:relative;display:flex;flex-direction:column;inline-size:100%;min-block-size:20rem;max-block-size:90vh;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border-block-start:1px solid var(--_et-qdt-border);box-shadow:0 -.4rem 2rem #00000059}.et-query-devtools-panel--resizing{-webkit-user-select:none;user-select:none}.et-query-devtools-resize{position:absolute;inset-inline:0;inset-block-start:0;block-size:.6rem;cursor:ns-resize;z-index:1}.et-query-devtools-resize:after{content:\"\";position:absolute;inset-inline:50%;inset-block-start:.2rem;inline-size:4rem;margin-inline-start:-2rem;block-size:.2rem;border-radius:999px;background:var(--_et-qdt-border)}.et-query-devtools-resize:hover:after{background:var(--_et-qdt-accent)}.et-query-devtools-header{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-inline:.8rem;border-block-end:1px solid var(--_et-qdt-border);flex:0 0 auto}.et-query-devtools-tabs{display:flex;flex-wrap:wrap;gap:.2rem}.et-query-devtools-tab{appearance:none;border:none;background:transparent;color:var(--_et-qdt-muted);padding:.9rem 1rem;cursor:pointer;border-block-end:2px solid transparent;font:inherit}.et-query-devtools-tab:hover{color:var(--_et-qdt-fg)}.et-query-devtools-tab--active{color:var(--_et-qdt-fg);border-block-end-color:var(--_et-qdt-accent)}.et-query-devtools-header-actions{display:flex;align-items:center;gap:.4rem;flex:0 0 auto}.et-query-devtools-inspect-btn{appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.4rem .8rem;font:inherit}.et-query-devtools-inspect-btn:hover{color:var(--_et-qdt-fg)}.et-query-devtools-inspect-btn--active{color:#09090b;background:var(--_et-qdt-accent);border-color:var(--_et-qdt-accent)}.et-query-devtools-close{appearance:none;border:none;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.6rem;font:inherit}.et-query-devtools-close-panel{appearance:none;display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:var(--_et-qdt-hover);color:var(--_et-qdt-fg);cursor:pointer;padding:.4rem .6rem .4rem .8rem;font:inherit}.et-query-devtools-close-panel:hover{border-color:var(--_et-qdt-error);color:var(--_et-qdt-error)}.et-query-devtools-kbd{border-radius:.3rem;background:var(--_et-qdt-hover);box-shadow:inset 0 0 0 1px var(--_et-qdt-border);color:var(--_et-qdt-muted);padding:.15rem .4rem;font:inherit;font-size:1.1rem;line-height:1.2;white-space:nowrap}.et-query-devtools-inspect-box{position:fixed;z-index:2147483002;pointer-events:none;border:2px solid var(--_et-qdt-accent);background:color-mix(in srgb,var(--_et-qdt-accent) 15%,transparent);border-radius:.2rem}.et-query-devtools-inspect-tag{position:absolute;inset-block-start:100%;inset-inline-start:0;margin-block-start:.2rem;padding:.2rem .5rem;border-radius:.3rem;background:var(--_et-qdt-accent);color:#09090b;font-family:ui-monospace,monospace;font-size:1.1rem;font-weight:600;white-space:nowrap}.et-query-devtools-close:hover{color:var(--_et-qdt-fg)}.et-query-devtools-body{flex:1 1 auto;min-block-size:0;overflow:hidden}.et-query-devtools-master-detail{display:flex;block-size:100%;min-block-size:0}.et-query-devtools-list{flex:0 0 34%;min-inline-size:22rem;max-inline-size:40rem;overflow-y:auto;border-inline-end:1px solid var(--_et-qdt-border)}.et-query-devtools-detail{flex:1 1 auto;min-inline-size:0;overflow-y:auto;padding:1rem}.et-query-devtools-detail .et-query-devtools-detail-head,.et-query-devtools-drawer .et-query-devtools-detail-head{padding-block-end:.8rem;border-block-end:1px solid var(--_et-qdt-border)}.et-query-devtools-detail .et-query-devtools-meta,.et-query-devtools-drawer .et-query-devtools-meta{padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 3%,transparent)}.et-query-devtools-detail .et-query-devtools-section-row,.et-query-devtools-drawer .et-query-devtools-section-row{padding-block-start:.8rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-filter-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.3rem .35rem .3rem .7rem;border-radius:999px;background:color-mix(in srgb,var(--_et-qdt-accent) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-qdt-accent) 45%,transparent);color:var(--_et-qdt-accent);font-size:1.1rem;font-weight:600;letter-spacing:.02em}.et-query-devtools-filter-icon{font-size:1.3rem;line-height:1}.et-query-devtools-filter-count{border-radius:999px;background:var(--_et-qdt-accent);color:#09090b;min-inline-size:1.8rem;padding:0 .5rem;text-align:center}.et-query-devtools-filter-clear{appearance:none;display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.3rem .6rem;font:inherit;font-size:1.15rem;line-height:1.4}.et-query-devtools-filter-clear:hover{border-color:color-mix(in srgb,var(--_et-qdt-accent) 60%,transparent);color:var(--_et-qdt-fg)}.et-query-devtools-scroll{block-size:100%;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.et-query-devtools-split{display:flex;block-size:100%;min-block-size:0}.et-query-devtools-split .et-query-devtools-scroll{flex:1 1 auto;min-inline-size:0}.et-query-devtools-drawer{flex:0 0 42%;min-inline-size:26rem;max-inline-size:48rem;overflow-y:auto;padding:0 1rem 1rem;border-inline-start:1px solid var(--_et-qdt-border)}.et-query-devtools-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem 0;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg);color:var(--_et-qdt-muted);border-block-end:1px solid var(--_et-qdt-border);margin-block-end:.8rem}.et-query-devtools-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg)}.et-query-devtools-toolbar--filtered{background:linear-gradient(to right,color-mix(in srgb,var(--_et-qdt-accent) 12%,transparent),transparent 65%),var(--_et-qdt-bg);box-shadow:inset .2rem 0 0 var(--_et-qdt-accent),inset 0 -1px color-mix(in srgb,var(--_et-qdt-accent) 30%,transparent)}.et-query-devtools-field{display:inline-flex;align-items:center;gap:.6rem;color:var(--_et-qdt-muted)}.et-query-devtools-select{background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-count{color:var(--_et-qdt-subtle)}.et-query-devtools-row{display:flex;align-items:center;gap:.8rem;inline-size:100%;text-align:start;appearance:none;border:none;border-block-end:1px solid var(--_et-qdt-border);background:transparent;color:var(--_et-qdt-fg);padding:.8rem;cursor:pointer;font:inherit}.et-query-devtools-row:hover{background:var(--_et-qdt-hover)}.et-query-devtools-row--active{background:var(--_et-qdt-active)}.et-query-devtools-method{font-weight:700;font-size:1.1rem;color:var(--_et-qdt-muted);white-space:nowrap}.et-query-devtools-route{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-inline-size:0}.et-query-devtools-status{inline-size:.8rem;block-size:.8rem;border-radius:999px;flex:0 0 auto;background:var(--_et-qdt-subtle)}.et-query-devtools-status[data-status=success]{background:var(--_et-qdt-success)}.et-query-devtools-status[data-status=error]{background:var(--_et-qdt-error)}.et-query-devtools-status[data-status=loading],.et-query-devtools-status[data-status=running]{background:var(--_et-qdt-loading)}.et-query-devtools-detail-head{display:flex;align-items:center;gap:.8rem;margin-block-end:.8rem}.et-query-devtools-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-block-end:.8rem}.et-query-devtools-btn{appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.3rem;background:transparent;color:var(--_et-qdt-fg);padding:.25rem .55rem;font-size:1.15rem;line-height:1.4;cursor:pointer}.et-query-devtools-btn:hover{background:var(--_et-qdt-hover)}.et-query-devtools-meta{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0 0 1rem}.et-query-devtools-meta dt{color:var(--_et-qdt-muted)}.et-query-devtools-meta dd{margin:0;overflow-wrap:anywhere}.et-query-devtools-section{margin:1rem 0 .4rem;font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--_et-qdt-muted)}.et-query-devtools-json{margin:0;padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;max-block-size:24rem;overflow-y:auto}.et-query-devtools-json--error{border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-mono{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.et-query-devtools-code{margin:0 0 .8rem;padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);overflow:auto;white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.15rem;max-block-size:20rem}.et-query-devtools-ws-message{border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.6rem;margin-block-end:.4rem}.et-query-devtools-url{display:inline-block;max-inline-size:32rem;margin-inline-start:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.et-query-devtools-chips,.et-query-devtools-chip-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-end:.8rem}.et-query-devtools-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--_et-qdt-border);font-size:1.1rem;color:var(--_et-qdt-fg);background:color-mix(in srgb,var(--_et-qdt-interaction) 6%,transparent)}.et-query-devtools-chip--muted{color:var(--_et-qdt-muted)}.et-query-devtools-chip--loading{color:var(--_et-qdt-loading);border-color:color-mix(in srgb,var(--_et-qdt-loading) 50%,transparent)}.et-query-devtools-chip--error{color:var(--_et-qdt-error);border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-chip--success{color:var(--_et-qdt-success);border-color:color-mix(in srgb,var(--_et-qdt-success) 50%,transparent)}.et-query-devtools-card{border:1px solid var(--_et-qdt-border);border-radius:.6rem;padding:1rem}.et-query-devtools-card-head{display:flex;align-items:center;gap:.6rem;margin-block-end:.8rem}.et-query-devtools-card-title{display:flex;align-items:baseline;gap:.5rem;margin-block-end:.2rem}.et-query-devtools-card-sub{color:var(--_et-qdt-subtle);font-size:1.1rem;margin-block-end:.6rem;overflow-wrap:anywhere}.et-query-devtools-inner-queries{display:flex;flex-direction:column;gap:.3rem}.et-query-devtools-inner-row{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-fg);padding:.4rem .6rem;cursor:pointer;font:inherit}.et-query-devtools-inner-row:hover:not([disabled]){background:var(--_et-qdt-hover)}.et-query-devtools-inner-row--active{background:var(--_et-qdt-active);border-color:var(--_et-qdt-accent)}.et-query-devtools-inner-row[disabled]{cursor:default;opacity:.6}.et-query-devtools-step-list{display:flex;flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none}.et-query-devtools-step-item{border:1px solid var(--_et-qdt-border);border-radius:.4rem;overflow:hidden}.et-query-devtools-step-item[data-status=error]{border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-step-head{display:flex;align-items:stretch}.et-query-devtools-step-head .et-query-devtools-inner-row{border:none;border-radius:0;flex:1 1 auto}.et-query-devtools-step-caret-btn{appearance:none;border:none;border-inline-start:1px solid var(--_et-qdt-border);background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:0 .7rem;font:inherit}.et-query-devtools-step-caret-btn:hover{background:var(--_et-qdt-hover);color:var(--_et-qdt-fg)}.et-query-devtools-step-toggle{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:none;background:transparent;color:var(--_et-qdt-fg);padding:.6rem;cursor:pointer;font:inherit}.et-query-devtools-step-toggle:hover{background:var(--_et-qdt-hover)}.et-query-devtools-step-index{flex:1 1 auto;min-inline-size:0}.et-query-devtools-step-caret{color:var(--_et-qdt-muted)}.et-query-devtools-step-io{padding:0 .8rem .8rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-table{inline-size:100%;border-collapse:collapse}.et-query-devtools-table th,.et-query-devtools-table td{text-align:start;padding:.5rem .6rem;border-block-end:1px solid var(--_et-qdt-border);vertical-align:top}.et-query-devtools-table th{color:var(--_et-qdt-muted);font-weight:600;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg)}.et-query-devtools-table tr[data-status=error] td{color:var(--_et-qdt-error)}.et-query-devtools-empty{color:var(--_et-qdt-subtle);padding:1.2rem;text-align:center}.et-query-devtools-actions-label{color:var(--_et-qdt-subtle);align-self:center;text-transform:uppercase;font-size:1rem;letter-spacing:.05em}.et-query-devtools-actions-label:not(:first-child){margin-inline-start:.7rem}.et-query-devtools-cell-actions{display:flex;gap:.4rem;white-space:nowrap}.et-query-devtools-section-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-block-start:1rem}.et-query-devtools-search{flex:0 1 20rem;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-editor{border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.8rem;margin-block-end:1rem}.et-query-devtools-textarea{inline-size:100%;min-block-size:12rem;resize:vertical;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.6rem;font-family:inherit;font-size:1.2rem}.et-query-devtools-editor-error{color:var(--_et-qdt-error);margin:.4rem 0 0}.et-query-devtools-json-node,.et-query-devtools-json-children{display:flex;flex-direction:column}.et-query-devtools-json-children{padding-inline-start:1.4rem;border-inline-start:1px solid var(--_et-qdt-border);margin-inline-start:.4rem}.et-query-devtools-json-row{display:flex;align-items:baseline;gap:.4rem;padding:.1rem 0;font-family:inherit;line-height:1.5}.et-query-devtools-json-toggle{appearance:none;display:flex;align-items:baseline;gap:.4rem;min-inline-size:0;border:none;background:transparent;color:var(--_et-qdt-fg);cursor:pointer;text-align:start;font:inherit;padding:.1rem 0}.et-query-devtools-json-node>.et-query-devtools-json-row:hover{background:var(--_et-qdt-hover)}.et-query-devtools-json-caret{color:var(--_et-qdt-subtle);inline-size:1rem;flex:0 0 auto}.et-query-devtools-json-key{color:var(--_et-qdt-accent)}.et-query-devtools-json-colon,.et-query-devtools-json-preview{color:var(--_et-qdt-subtle)}.et-query-devtools-json-value{overflow-wrap:anywhere}.et-query-devtools-json-leaf[data-kind=string] .et-query-devtools-json-value{color:var(--_et-qdt-success)}.et-query-devtools-json-leaf[data-kind=number] .et-query-devtools-json-value,.et-query-devtools-json-leaf[data-kind=boolean] .et-query-devtools-json-value{color:var(--_et-qdt-loading)}.et-query-devtools-json-leaf[data-kind=null] .et-query-devtools-json-value,.et-query-devtools-json-leaf[data-kind=undefined] .et-query-devtools-json-value{color:var(--_et-qdt-subtle)}.et-query-devtools-json-hit{background:color-mix(in srgb,var(--_et-qdt-loading) 40%,transparent);border-radius:.2rem}.et-query-devtools-json-copy{appearance:none;flex:0 0 auto;border:none;background:transparent;color:var(--_et-qdt-subtle);cursor:pointer;opacity:0;font:inherit}.et-query-devtools-json-copy:hover:not(.et-query-devtools-json-copy--copied){color:var(--_et-qdt-fg)}.et-query-devtools-json-row:hover .et-query-devtools-json-copy,.et-query-devtools-json-copy:focus-visible,.et-query-devtools-json-copy--copied{opacity:1}.et-query-devtools-json-copy--copied{color:var(--_et-qdt-success)}}\n"] }]
+                    }, template: "@if (open()) {\n  <section\n    [class.et-query-devtools-panel--resizing]=\"resizing()\"\n    [style.height.px]=\"panelHeight()\"\n    class=\"et-query-devtools-panel\"\n  >\n    <div\n      (pointerdown)=\"startResize($event)\"\n      class=\"et-query-devtools-resize\"\n      title=\"Drag to resize\"\n      aria-hidden=\"true\"\n    ></div>\n    <header class=\"et-query-devtools-header\">\n      <nav class=\"et-query-devtools-tabs\" role=\"tablist\">\n        @for (tab of tabs; track tab.id) {\n          @let badge = tabBadges()[tab.id];\n          <button\n            [class.et-query-devtools-tab--active]=\"activeTab() === tab.id\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n            (click)=\"activeTab.set(tab.id)\"\n            class=\"et-query-devtools-tab\"\n            type=\"button\"\n            role=\"tab\"\n          >\n            {{ tab.label }}\n            @if (badge.count) {\n              <span class=\"et-query-devtools-tab-badge\">{{ badge.count }}</span>\n            }\n            @if (badge.errors) {\n              <span\n                class=\"et-query-devtools-tab-badge et-query-devtools-tab-badge--error\"\n                title=\"{{ badge.errors }} {{ badge.errorNoun ?? 'failing' }}\"\n              >\n                {{ badge.errors }}\n              </span>\n            }\n          </button>\n        }\n      </nav>\n\n      <div class=\"et-query-devtools-header-actions\">\n        <button\n          [class.et-query-devtools-inspect-btn--active]=\"inspectActive()\"\n          [attr.aria-pressed]=\"inspectActive()\"\n          (click)=\"toggleInspect()\"\n          class=\"et-query-devtools-inspect-btn\"\n          type=\"button\"\n          title=\"Inspect: hover the UI to find its query\"\n        >\n          <svg\n            class=\"et-query-devtools-inspect-icon\"\n            viewBox=\"0 0 16 16\"\n            width=\"14\"\n            height=\"14\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <circle class=\"et-query-devtools-inspect-icon-ring\" cx=\"8\" cy=\"8\" r=\"4.25\" />\n            <circle class=\"et-query-devtools-inspect-icon-dot\" cx=\"8\" cy=\"8\" r=\"1.15\" />\n            <path d=\"M8 0.9v2.1M8 13v2.1M0.9 8h2.1M13 8h2.1\" />\n          </svg>\n          {{ inspectActive() ? 'Inspecting' : 'Inspect' }}\n          @if (inspectActive()) {\n            <kbd class=\"et-query-devtools-kbd et-query-devtools-kbd--inverse\">Esc</kbd>\n          }\n        </button>\n        <button\n          (click)=\"toggleOpen()\"\n          class=\"et-query-devtools-close-panel\"\n          type=\"button\"\n          title=\"Close devtools ({{ shortcut }})\"\n        >\n          <span aria-hidden=\"true\">\u2715</span>\n          Close\n          <kbd class=\"et-query-devtools-kbd\">{{ shortcut }}</kbd>\n        </button>\n      </div>\n    </header>\n\n    @if (armedFaultClients(); as armed) {\n      <div class=\"et-query-devtools-armed-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-dot\" aria-hidden=\"true\"></span>\n        <span class=\"et-query-devtools-armed-text\">\n          <strong>Faults armed</strong> on\n          <span class=\"et-query-devtools-mono\">{{ armed.join(', ') }}</span>\n          \u2014 every failure and delay you see from\n          {{ armed.length === 1 ? 'this client' : 'these clients' }} is injected, not the API.\n        </span>\n        <button\n          [disabled]=\"activeTab() === 'faults'\"\n          (click)=\"activeTab.set('faults')\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n        >\n          Review\n        </button>\n        <button (click)=\"CLEAR_FAULTS()\" class=\"et-query-devtools-btn\" type=\"button\">Disarm all</button>\n      </div>\n    }\n\n    <div class=\"et-query-devtools-body\">\n      @switch (activeTab()) {\n        <!-- QUERIES -->\n        @case ('queries') {\n          <div class=\"et-query-devtools-master-detail\">\n            <div class=\"et-query-devtools-list\">\n              <div [class.et-query-devtools-toolbar--filtered]=\"!!inspectFilterIds()\" class=\"et-query-devtools-toolbar\">\n                <div class=\"et-query-devtools-toolbar-row\">\n                  @if (inspectFilterIds(); as ids) {\n                    <span class=\"et-query-devtools-filter-chip\">\n                      <span class=\"et-query-devtools-filter-icon\" aria-hidden=\"true\">\u2316</span>\n                      Inspected element\n                      <span class=\"et-query-devtools-filter-count\">{{ ids.length }}</span>\n                    </span>\n                    <button\n                      (click)=\"clearInspectFilter()\"\n                      class=\"et-query-devtools-filter-clear\"\n                      type=\"button\"\n                      title=\"Clear the inspection filter and show all queries\"\n                    >\n                      <span aria-hidden=\"true\">\u2715</span>\n                      Clear\n                    </button>\n                  } @else {\n                    <label class=\"et-query-devtools-field\">\n                      <span>Client</span>\n                      <select\n                        #clientSelect\n                        [value]=\"selectedClientName() ?? ''\"\n                        (change)=\"selectClient(clientSelect.value || null)\"\n                        class=\"et-query-devtools-select\"\n                      >\n                        <option value=\"\">All clients</option>\n                        @for (name of clientNames(); track name) {\n                          <option [value]=\"name\">{{ name }}</option>\n                        }\n                      </select>\n                    </label>\n                  }\n                  <span class=\"et-query-devtools-count\">\n                    @if (isQueryListNarrowed()) {\n                      {{ filteredQueries().length }} of {{ scopedQueryCount() }}\n                    } @else {\n                      {{ scopedQueryCount() }}\n                    }\n                  </span>\n                  <button\n                    [disabled]=\"!filteredQueries().length\"\n                    (click)=\"downloadInsomniaCollection()\"\n                    class=\"et-query-devtools-btn et-query-devtools-toolbar-btn\"\n                    type=\"button\"\n                    title=\"Download the listed queries as an Insomnia collection, with the auth provider's token refresh\"\n                  >\n                    \u2913 Insomnia\n                  </button>\n                </div>\n\n                <div class=\"et-query-devtools-toolbar-row\">\n                  <input\n                    #queryFilterInput\n                    [value]=\"queryFilter()\"\n                    (input)=\"queryFilter.set(queryFilterInput.value)\"\n                    class=\"et-query-devtools-search\"\n                    type=\"search\"\n                    placeholder=\"filter method / route / url\u2026\"\n                    aria-label=\"Filter queries\"\n                  />\n                  @for (facet of facets; track facet.id) {\n                    @let count = facetCounts()[facet.id];\n                    @let isActive = queryFacets().has(facet.id);\n                    <button\n                      [class.et-query-devtools-facet--active]=\"isActive\"\n                      [attr.aria-pressed]=\"isActive\"\n                      [disabled]=\"!count && !isActive\"\n                      (click)=\"toggleFacet(facet.id)\"\n                      class=\"et-query-devtools-chip et-query-devtools-facet\"\n                      type=\"button\"\n                    >\n                      {{ facet.label }}\n                      <span class=\"et-query-devtools-facet-count\">{{ count }}</span>\n                    </button>\n                  }\n                  @if (isQueryListNarrowed()) {\n                    <button\n                      (click)=\"clearQueryFilters()\"\n                      class=\"et-query-devtools-filter-clear\"\n                      type=\"button\"\n                      title=\"Clear the search term and the status chips\"\n                      aria-label=\"Clear filters\"\n                    >\n                      <span aria-hidden=\"true\">\u2715</span>\n                    </button>\n                  }\n                </div>\n              </div>\n\n              @for (item of filteredQueries(); track item.entry.id) {\n                <button\n                  [class.et-query-devtools-row--active]=\"selectedQueryId() === item.entry.id\"\n                  (click)=\"selectedQueryId.set(item.entry.id)\"\n                  class=\"et-query-devtools-row\"\n                  type=\"button\"\n                >\n                  <span\n                    [attr.data-status]=\"queryStatus(item.query)\"\n                    [title]=\"queryStatus(item.query)\"\n                    class=\"et-query-devtools-status\"\n                  ></span>\n                  <span class=\"et-query-devtools-method\">{{ item.entry.meta.method }}</span>\n                  <span class=\"et-query-devtools-route\">\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        routeTpl;\n                        context: { segments: routeSegments(item.entry, item.query), fallback: '\u2014' }\n                      \"\n                    />\n                  </span>\n                  <!-- A retry is the one thing a loading dot actively misrepresents: it reads as a request\n                       on its way when nothing is in flight at all. -->\n                  @if (requestProgress(item.query)?.retry; as retry) {\n                    <span\n                      class=\"et-query-devtools-chip et-query-devtools-chip--loading\"\n                      title=\"Waiting out a retry backoff before attempt {{ retry.attempt }}\"\n                    >\n                      <span class=\"et-query-devtools-retry-glyph\" aria-hidden=\"true\">\u27F3</span>\n                      {{ retry.attempt }}\n                    </span>\n                  }\n                  @if (isStale(item.query)) {\n                    <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">stale</span>\n                  }\n                </button>\n              } @empty {\n                <!-- An empty scope is a different problem from a filter that matches nothing, and only the\n                     latter is the user's own doing - so it names the way out. -->\n                @if (scopedQueryCount()) {\n                  <p class=\"et-query-devtools-empty\">\n                    No query matches the filter \u00B7 {{ scopedQueryCount() }} in scope.\n                  </p>\n                } @else if (inspectFilterIds()) {\n                  <p class=\"et-query-devtools-empty\">\n                    The inspected element's queries are no longer registered. Clear the filter.\n                  </p>\n                } @else {\n                  <p class=\"et-query-devtools-empty\">No queries registered.</p>\n                }\n              }\n            </div>\n\n            <div class=\"et-query-devtools-detail\">\n              @if (selectedQuery(); as sel) {\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              } @else {\n                <p class=\"et-query-devtools-empty\">Select a query to inspect it.</p>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- STACKS -->\n        @case ('stacks') {\n          <div class=\"et-query-devtools-split\">\n            <div class=\"et-query-devtools-scroll\">\n              @for (entry of stackEntries(); track entry.id) {\n                @if (entry.kind === 'paged-query-stack') {\n                  @let paged = asPagedStack(entry);\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">paged stack</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ paged.direction() }}</span>\n                      @if (paged.loading()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--loading\">loading</span>\n                      }\n                    </div>\n\n                    @let pagedId = stackIdentity(paged);\n                    <div class=\"et-query-devtools-card-title\">\n                      <span class=\"et-query-devtools-method\">{{ pagedId.method }}</span>\n                      <span class=\"et-query-devtools-route\">\n                        <ng-container\n                          *ngTemplateOutlet=\"routeTpl; context: { segments: pagedId.segments, fallback: '\u2014' }\"\n                        />\n                      </span>\n                    </div>\n                    <div class=\"et-query-devtools-card-sub et-query-devtools-mono\">{{ pagedId.baseUrl }}</div>\n                    @if (entry.meta.features?.length) {\n                      <ng-container *ngTemplateOutlet=\"featuresTpl; context: { features: entry.meta.features }\" />\n                    }\n\n                    <dl class=\"et-query-devtools-meta\">\n                      <dt>Pages loaded</dt>\n                      <dd>{{ paged.queries().length }}</dd>\n                      <dt>Items</dt>\n                      <dd>{{ paged.items().length }}</dd>\n                      <dt>First page loaded</dt>\n                      <dd>{{ paged.isFirstPageLoaded() }}</dd>\n                      <dt>Last page loaded</dt>\n                      <dd>{{ paged.isLastPageLoaded() }}</dd>\n                      <ng-container *ngTemplateOutlet=\"activityRowTpl; context: { activity: stackActivity(paged) }\" />\n                    </dl>\n                    <ng-container *ngTemplateOutlet=\"innerQueriesTpl; context: { links: queriesForStack(paged) }\" />\n                  </div>\n                } @else {\n                  @let stack = asStack(entry);\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">stack</span>\n                      @if (stack.anyLoading()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--loading\">loading</span>\n                      }\n                      @if (stack.anyError()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--error\">error</span>\n                      }\n                    </div>\n\n                    @let stackId = stackIdentity(stack);\n                    <div class=\"et-query-devtools-card-title\">\n                      <span class=\"et-query-devtools-method\">{{ stackId.method }}</span>\n                      <span class=\"et-query-devtools-route\">\n                        <ng-container\n                          *ngTemplateOutlet=\"routeTpl; context: { segments: stackId.segments, fallback: '\u2014' }\"\n                        />\n                      </span>\n                    </div>\n                    <div class=\"et-query-devtools-card-sub et-query-devtools-mono\">{{ stackId.baseUrl }}</div>\n                    @if (entry.meta.features?.length) {\n                      <ng-container *ngTemplateOutlet=\"featuresTpl; context: { features: entry.meta.features }\" />\n                    }\n\n                    <dl class=\"et-query-devtools-meta\">\n                      <dt>Queries</dt>\n                      <dd>{{ stack.queries().length }}</dd>\n                      <dt>Loading</dt>\n                      <dd>{{ stack.loadingProgress().loaded }} / {{ stack.loadingProgress().total }}</dd>\n                      <dt>Errors</dt>\n                      <dd>{{ stack.errors().length }}</dd>\n                      <ng-container *ngTemplateOutlet=\"activityRowTpl; context: { activity: stackActivity(stack) }\" />\n                    </dl>\n                    <ng-container *ngTemplateOutlet=\"innerQueriesTpl; context: { links: queriesForStack(stack) }\" />\n                  </div>\n                }\n              } @empty {\n                <p class=\"et-query-devtools-empty\">No stacks registered.</p>\n              }\n            </div>\n\n            @if (stackSelectedQuery(); as sel) {\n              <aside class=\"et-query-devtools-drawer\">\n                <div class=\"et-query-devtools-drawer-head\">\n                  <span>Query detail</span>\n                  <button\n                    (click)=\"stackSelectedQueryId.set(null)\"\n                    class=\"et-query-devtools-close\"\n                    type=\"button\"\n                    title=\"Close detail\"\n                  >\n                    \u2715\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              </aside>\n            }\n          </div>\n        }\n\n        <!-- SEQUENCES -->\n        @case ('sequences') {\n          <div class=\"et-query-devtools-split\">\n            <div class=\"et-query-devtools-scroll\">\n              @for (entry of sequenceEntries(); track entry.id) {\n                @let sequence = asSequence(entry);\n                @if (sequence) {\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">sequence</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ sequence.status() }}</span>\n                      <span class=\"et-query-devtools-count\"\n                        >step {{ sequence.currentStep() }} / {{ sequence.total }}</span\n                      >\n                    </div>\n\n                    <dl class=\"et-query-devtools-meta\">\n                      <ng-container\n                        *ngTemplateOutlet=\"activityRowTpl; context: { activity: sequenceActivity(sequence) }\"\n                      />\n                    </dl>\n\n                    <ol class=\"et-query-devtools-step-list\">\n                      @for (link of queriesForSequence(sequence); track $index; let i = $index) {\n                        <li [attr.data-status]=\"sequenceStepStatus(sequence, i)\" class=\"et-query-devtools-step-item\">\n                          <div class=\"et-query-devtools-step-head\">\n                            <button\n                              [class.et-query-devtools-inner-row--active]=\"sequenceSelectedQueryId() === link.id\"\n                              [disabled]=\"!link.id\"\n                              (click)=\"sequenceSelectedQueryId.set(link.id)\"\n                              class=\"et-query-devtools-inner-row\"\n                              type=\"button\"\n                            >\n                              <span\n                                [attr.data-status]=\"sequenceStepStatus(sequence, i)\"\n                                class=\"et-query-devtools-status\"\n                              ></span>\n                              <span class=\"et-query-devtools-method\">{{ i + 1 }}. {{ link.method }}</span>\n                              <span class=\"et-query-devtools-route\">\n                                <ng-container\n                                  *ngTemplateOutlet=\"\n                                    routeTpl;\n                                    context: { segments: link.segments, fallback: 'step ' + (i + 1) }\n                                  \"\n                                />\n                              </span>\n                            </button>\n                            <button\n                              [attr.aria-expanded]=\"isStepExpanded(entry.id, i)\"\n                              (click)=\"toggleStep(entry.id, i)\"\n                              class=\"et-query-devtools-step-caret-btn\"\n                              type=\"button\"\n                              title=\"Toggle in / out\"\n                            >\n                              {{ isStepExpanded(entry.id, i) ? '\u25BE' : '\u25B8' }}\n                            </button>\n                          </div>\n\n                          @if (isStepExpanded(entry.id, i)) {\n                            @let snap = stepSnapshot(sequence, i);\n                            <div class=\"et-query-devtools-step-io\">\n                              <h5 class=\"et-query-devtools-section\">In \u00B7 args</h5>\n                              @if (sequence.stepArgs().length > i) {\n                                <et-query-devtools-json [value]=\"sequence.stepArgs()[i]\" />\n                              } @else {\n                                <p class=\"et-query-devtools-empty\">Not run yet.</p>\n                              }\n\n                              @if (snap?.error(); as error) {\n                                <h5 class=\"et-query-devtools-section\">Out \u00B7 error ({{ error.raw.status }})</h5>\n                                <et-query-devtools-json [value]=\"error.isList ? error.errors : error.error\" />\n                              } @else {\n                                <h5 class=\"et-query-devtools-section\">Out \u00B7 response</h5>\n                                @if (snap) {\n                                  <et-query-devtools-json [value]=\"snap.response()\" />\n                                } @else {\n                                  <p class=\"et-query-devtools-empty\">Not run yet.</p>\n                                }\n                              }\n                            </div>\n                          }\n                        </li>\n                      }\n                    </ol>\n                  </div>\n                }\n              } @empty {\n                <p class=\"et-query-devtools-empty\">No sequences registered.</p>\n              }\n            </div>\n\n            @if (sequenceSelectedQuery(); as sel) {\n              <aside class=\"et-query-devtools-drawer\">\n                <div class=\"et-query-devtools-drawer-head\">\n                  <span>Query detail</span>\n                  <button\n                    (click)=\"sequenceSelectedQueryId.set(null)\"\n                    class=\"et-query-devtools-close\"\n                    type=\"button\"\n                    title=\"Close detail\"\n                  >\n                    \u2715\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              </aside>\n            }\n          </div>\n        }\n\n        <!-- FORMS -->\n        @case ('forms') {\n          <div class=\"et-query-devtools-split\">\n            <div class=\"et-query-devtools-scroll\">\n              @for (entry of formEntries(); track entry.id) {\n                @let form = asForm(entry);\n                @let expanded = selectedFormId() === entry.id;\n                <div class=\"et-query-devtools-card\">\n                  <div class=\"et-query-devtools-card-head\">\n                    <button\n                      [attr.aria-expanded]=\"expanded\"\n                      (click)=\"selectedFormId.set(expanded ? null : entry.id)\"\n                      class=\"et-query-devtools-row-link\"\n                      type=\"button\"\n                    >\n                      <span class=\"et-query-devtools-caret\">{{ expanded ? '\u25BE' : '\u25B8' }}</span>\n                      <strong>{{ entry.meta.name || 'query form' }}</strong>\n                    </button>\n                    @if (form.activeFilterCount(); as count) {\n                      <span class=\"et-query-devtools-chip\">{{ count }} active</span>\n                    } @else {\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">at defaults</span>\n                    }\n                    @if (form.isCommitPending()) {\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--loading\">debouncing</span>\n                    }\n                    @if (!form.isObserving()) {\n                      <span\n                        class=\"et-query-devtools-chip et-query-devtools-chip--muted\"\n                        title=\"observe() has not been called, so nothing syncs with the URL\"\n                      >\n                        not observing\n                      </span>\n                    }\n                    <button\n                      [disabled]=\"form.isAtDefaults()\"\n                      (click)=\"form.resetAll()\"\n                      class=\"et-query-devtools-btn\"\n                      type=\"button\"\n                    >\n                      \u27F2 Reset all\n                    </button>\n                  </div>\n\n                  @let driven = queriesDrivenByForm(entry);\n                  <dl class=\"et-query-devtools-meta\">\n                    <dt>Drives</dt>\n                    <dd>\n                      @if (driven.length) {\n                        <ng-container *ngTemplateOutlet=\"formDrivesTpl; context: { links: driven }\" />\n                      } @else {\n                        <span class=\"et-query-devtools-hint\">\n                          No query has read this form's value yet. A query picks it up the first time its\n                          <code>withArgs</code> reads <code>value()</code>.\n                        </span>\n                      }\n                    </dd>\n                  </dl>\n\n                  @if (expanded) {\n                    <table class=\"et-query-devtools-table\">\n                      <thead>\n                        <tr>\n                          <th>Field</th>\n                          <th>Value</th>\n                          <th>Default</th>\n                          <th>URL param</th>\n                          <th>Rules</th>\n                          <th></th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (field of form.fields(); track field.key) {\n                          <tr [attr.data-status]=\"field.isDefault ? null : 'success'\">\n                            <td class=\"et-query-devtools-mono\">{{ field.key }}</td>\n                            <td class=\"et-query-devtools-mono\">\n                              {{ inlineValue(field.value) }}\n                              <!-- The live value only differs while a debounce is pending, which is exactly\n                                 when \"the input says X but the query asked for Y\" needs explaining. -->\n                              @if (field.liveValue !== field.value) {\n                                <span class=\"et-query-devtools-stat-sub\"\n                                  >typing {{ inlineValue(field.liveValue) }}</span\n                                >\n                              }\n                            </td>\n                            <td class=\"et-query-devtools-mono\">{{ inlineValue(field.defaultValue) }}</td>\n                            <td class=\"et-query-devtools-mono\">\n                              @if (field.queryParam === undefined) {\n                                <span class=\"et-query-devtools-hint\">\u2014</span>\n                              } @else {\n                                {{ field.paramKey }}={{ inlineValue(field.queryParam) }}\n                              }\n                            </td>\n                            <td>\n                              <div class=\"et-query-devtools-chips\">\n                                @if (field.debounceMs !== null) {\n                                  <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">\n                                    {{ field.debounceMs }}ms\n                                  </span>\n                                }\n                                @if (field.isResetBy.length) {\n                                  <span\n                                    class=\"et-query-devtools-chip et-query-devtools-chip--muted\"\n                                    title=\"Reset to its default whenever one of these changes\"\n                                  >\n                                    reset by {{ field.isResetBy.join(', ') }}\n                                  </span>\n                                }\n                                @if (!field.countsAsFilter) {\n                                  <span\n                                    class=\"et-query-devtools-chip et-query-devtools-chip--muted\"\n                                    title=\"Not counted by activeFilterCount\"\n                                  >\n                                    not a filter\n                                  </span>\n                                }\n                              </div>\n                            </td>\n                            <td>\n                              <button\n                                [disabled]=\"field.isDefault\"\n                                (click)=\"form.resetField(field.key)\"\n                                class=\"et-query-devtools-btn\"\n                                type=\"button\"\n                              >\n                                \u27F2\n                              </button>\n                            </td>\n                          </tr>\n                        }\n                      </tbody>\n                    </table>\n\n                    <h4 class=\"et-query-devtools-section\">Committed value</h4>\n                    <et-query-devtools-json [value]=\"form.value()\" />\n                  }\n                </div>\n              } @empty {\n                <p class=\"et-query-devtools-empty\">\n                  No query forms registered. A form created with <code>createQueryForm()</code> registers itself.\n                </p>\n              }\n            </div>\n\n            @if (formSelectedQuery(); as sel) {\n              <aside class=\"et-query-devtools-drawer\">\n                <div class=\"et-query-devtools-drawer-head\">\n                  <span>Query detail</span>\n                  <button\n                    (click)=\"formSelectedQueryId.set(null)\"\n                    class=\"et-query-devtools-close\"\n                    type=\"button\"\n                    title=\"Close detail\"\n                  >\n                    \u2715\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              </aside>\n            }\n          </div>\n        }\n\n        <!-- AUTH -->\n        @case ('auth') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (entry of authEntries(); track entry.id) {\n              @let auth = asAuth(entry);\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong>{{ entry.meta.name || 'auth provider' }}</strong>\n                  <span\n                    [class.et-query-devtools-chip--success]=\"auth.isAuthenticated()\"\n                    [class.et-query-devtools-chip--muted]=\"!auth.isAuthenticated()\"\n                    class=\"et-query-devtools-chip\"\n                  >\n                    {{ auth.isAuthenticated() ? 'authenticated' : 'anonymous' }}\n                  </span>\n                </div>\n                <dl class=\"et-query-devtools-meta\">\n                  <dt>Base URL</dt>\n                  <dd class=\"et-query-devtools-mono\">{{ entry.meta.clientBaseUrl || entry.meta.clientName || '\u2014' }}</dd>\n                  <dt>Access token</dt>\n                  <dd>{{ auth.accessToken() ? 'present' : 'none' }}</dd>\n                  <dt>Refresh token</dt>\n                  <dd>{{ auth.refreshToken() ? 'present' : 'none' }}</dd>\n                  @if (authTokenExpiry(auth); as expiry) {\n                    <dt>Token expires in</dt>\n                    <dd>{{ expiry }}</dd>\n                  }\n                  @if (auth.executionState(); as state) {\n                    <dt>Execution state</dt>\n                    <dd>{{ state.type }} \u00B7 {{ state.state }}</dd>\n                  }\n                  @if (authQueryKeys(auth).length) {\n                    <dt>Queries</dt>\n                    <dd>\n                      <div class=\"et-query-devtools-chips\">\n                        @for (key of authQueryKeys(auth); track key) {\n                          <span class=\"et-query-devtools-chip\">{{ key }}</span>\n                        }\n                      </div>\n                    </dd>\n                  }\n                  @if (entry.meta.features?.length) {\n                    <dt>Features</dt>\n                    <dd>\n                      <ng-container *ngTemplateOutlet=\"featuresTpl; context: { features: entry.meta.features }\" />\n                    </dd>\n                  }\n                </dl>\n\n                @if (authTokenPayload(auth); as payload) {\n                  <h4 class=\"et-query-devtools-section\">Access token payload</h4>\n                  <et-query-devtools-json [value]=\"payload\" />\n                }\n\n                @if (auth.latestNonInternalQuery(); as latest) {\n                  <h4 class=\"et-query-devtools-section\">Latest auth query \u00B7 {{ latest.key }}</h4>\n                  <et-query-devtools-json [value]=\"latest.snapshot.response()\" />\n                }\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No auth providers registered.</p>\n            }\n          </div>\n        }\n\n        <!-- SOCKETS -->\n        @case ('ws') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (entry of wsEntries(); track entry.id) {\n              @let ws = asWs(entry);\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong>{{ entry.meta.name || 'socket' }}</strong>\n                  <span\n                    [class.et-query-devtools-chip--success]=\"ws.connected()\"\n                    [class.et-query-devtools-chip--muted]=\"!ws.connected()\"\n                    class=\"et-query-devtools-chip\"\n                  >\n                    {{ ws.connected() ? 'connected' : 'disconnected' }}\n                  </span>\n                </div>\n                <dl class=\"et-query-devtools-meta\">\n                  <dt>URL</dt>\n                  <dd class=\"et-query-devtools-mono\">{{ entry.meta.url }}</dd>\n                  <dt>Rooms</dt>\n                  <dd>\n                    @if (ws.rooms().length) {\n                      <div class=\"et-query-devtools-chips\">\n                        @for (room of ws.rooms(); track room) {\n                          <span class=\"et-query-devtools-chip\">{{ room }}</span>\n                        }\n                      </div>\n                    } @else {\n                      none\n                    }\n                  </dd>\n                </dl>\n\n                <h5 class=\"et-query-devtools-section\">Messages ({{ ws.messages().length }})</h5>\n                @for (message of ws.messages(); track message.id) {\n                  <div class=\"et-query-devtools-ws-message\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-count\">{{ formatTime(message.timestamp) }}</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ message.room }}</span>\n                      <span class=\"et-query-devtools-method\">{{ message.event }}</span>\n                    </div>\n                    <et-query-devtools-json [value]=\"message.data\" />\n                  </div>\n                } @empty {\n                  <p class=\"et-query-devtools-empty\">No messages received yet.</p>\n                }\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No web socket clients registered.</p>\n            }\n          </div>\n        }\n\n        <!-- CACHE -->\n        @case ('cache') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (client of cacheView(); track client.name) {\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong class=\"et-query-devtools-mono\">{{ client.baseUrl || client.name }}</strong>\n                  <span class=\"et-query-devtools-count\">{{ client.entries.length }} entries</span>\n                  @if (client.client?.subtle?.persistence) {\n                    <span class=\"et-query-devtools-count\">{{ persistedCount(client.client!) }} on disk</span>\n                    <button (click)=\"clearPersistedQueries(client.client!)\" class=\"et-query-devtools-btn\" type=\"button\">\n                      Clear disk\n                    </button>\n                  }\n                </div>\n                @if (clientFeatures(client.client); as features) {\n                  <ng-container *ngTemplateOutlet=\"featuresTpl; context: { features }\" />\n                }\n                <table class=\"et-query-devtools-table\">\n                  <thead>\n                    <tr>\n                      <th>Request</th>\n                      <th>Consumers</th>\n                      <th>Secure</th>\n                      <th>Freshness</th>\n                      <th>Sync</th>\n                      <th>Disk</th>\n                      <th>Actions</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (cacheEntry of client.entries; track cacheEntry.key) {\n                      <tr>\n                        <td [title]=\"cacheEntry.request.method + ' ' + cacheEntry.request.url\">\n                          <span class=\"et-query-devtools-method\">{{ cacheEntry.request.method }}</span>\n                          <span class=\"et-query-devtools-url\">{{ requestPath(cacheEntry.request.url) }}</span>\n                        </td>\n                        <td>{{ cacheEntry.consumerCount }}</td>\n                        <td>{{ cacheEntry.isSecure ? 'yes' : 'no' }}</td>\n                        <td>{{ cacheFreshness(cacheEntry) }}</td>\n                        <td>{{ cacheSync(cacheEntry, client.pollStates) }}</td>\n                        <td>{{ cachePersistence(cacheEntry) }}</td>\n                        <td class=\"et-query-devtools-cell-actions\">\n                          <button (click)=\"refetchCacheEntry(cacheEntry)\" class=\"et-query-devtools-btn\" type=\"button\">\n                            Refetch\n                          </button>\n                          <button\n                            (click)=\"evictCacheEntry(client.repository, cacheEntry.key)\"\n                            class=\"et-query-devtools-btn\"\n                            type=\"button\"\n                          >\n                            Evict\n                          </button>\n                        </td>\n                      </tr>\n                    } @empty {\n                      <tr>\n                        <td class=\"et-query-devtools-empty\" colspan=\"7\">Cache empty.</td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No clients with a cache yet.</p>\n            }\n          </div>\n        }\n\n        <!-- TIMELINE -->\n        @case ('timeline') {\n          @let tl = timeline();\n          <div class=\"et-query-devtools-split\">\n            <div class=\"et-query-devtools-pane\">\n              <div class=\"et-query-devtools-toolbar\">\n                <div class=\"et-query-devtools-toolbar-row\">\n                  @if (inspectFilterIds(); as ids) {\n                    <span class=\"et-query-devtools-filter-chip\">\n                      <span class=\"et-query-devtools-filter-icon\" aria-hidden=\"true\">\u2316</span>\n                      Inspected element\n                      <span class=\"et-query-devtools-filter-count\">{{ ids.length }}</span>\n                    </span>\n                  } @else {\n                    <label class=\"et-query-devtools-field\">\n                      <span>Client</span>\n                      <select\n                        #timelineClientSelect\n                        [value]=\"selectedClientName() ?? ''\"\n                        (change)=\"selectClient(timelineClientSelect.value || null)\"\n                        class=\"et-query-devtools-select\"\n                      >\n                        <option value=\"\">All clients</option>\n                        @for (name of clientNames(); track name) {\n                          <option [value]=\"name\">{{ name }}</option>\n                        }\n                      </select>\n                    </label>\n                  }\n                  <span class=\"et-query-devtools-count\">\n                    {{ tl.rows.length }} run{{ tl.rows.length === 1 ? '' : 's' }}\n                    @if (tl.hidden) {\n                      \u00B7 {{ tl.hidden }} older not shown\n                    }\n                    @if (tl.rows.length) {\n                      \u00B7 over {{ formatDuration(tl.windowMs) }} from {{ formatTime(tl.startedAt) }}\n                    }\n                  </span>\n                  <button\n                    [disabled]=\"!tl.rows.length\"\n                    (click)=\"resetTimeline()\"\n                    class=\"et-query-devtools-btn et-query-devtools-toolbar-btn\"\n                    type=\"button\"\n                    title=\"Clear the run history and the counters of every listed query\"\n                  >\n                    \u27F2 Reset\n                  </button>\n                </div>\n              </div>\n\n              @if (tl.rows.length) {\n                <div class=\"et-query-devtools-scroll\">\n                  <div class=\"et-query-devtools-timeline\">\n                    <div class=\"et-query-devtools-timeline-axis\">\n                      <span class=\"et-query-devtools-timeline-ticks\">\n                        @for (tick of timelineTicks(); track tick.pct) {\n                          <span [style.left.%]=\"tick.pct\" class=\"et-query-devtools-timeline-tick\">{{\n                            tick.label\n                          }}</span>\n                        }\n                      </span>\n                    </div>\n\n                    @for (row of tl.rows; track row.key) {\n                      <button\n                        [class.et-query-devtools-timeline-row--active]=\"timelineSelectedQueryId() === row.entryId\"\n                        (click)=\"selectTimelineRow(row)\"\n                        class=\"et-query-devtools-timeline-row\"\n                        type=\"button\"\n                        title=\"{{ row.method }} {{ row.path }} \u00B7 run {{ row.run.index }} \u00B7 {{ row.run.status }}\"\n                      >\n                        <span class=\"et-query-devtools-timeline-label\">\n                          <span class=\"et-query-devtools-method\">{{ row.method }}</span>\n                          <span class=\"et-query-devtools-url\">{{ row.path }}</span>\n                        </span>\n                        <span class=\"et-query-devtools-timeline-track\">\n                          <span\n                            [attr.data-status]=\"runStatus(row.run)\"\n                            [style.left.%]=\"row.leftPct\"\n                            [style.width.%]=\"row.widthPct\"\n                            class=\"et-query-devtools-timeline-bar\"\n                          ></span>\n                        </span>\n                        <span class=\"et-query-devtools-timeline-duration\">\n                          @if (row.durationMs === null) {\n                            in flight\n                          } @else {\n                            {{ formatDuration(row.durationMs) }}\n                          }\n                        </span>\n                        <span class=\"et-query-devtools-timeline-size\">\n                          @if (row.run.receivedBytes) {\n                            {{ formatBytes(row.run.receivedBytes) }}\n                          }\n                        </span>\n                        <span class=\"et-query-devtools-timeline-flags\">\n                          @if (row.run.attempts > 1) {\n                            <span\n                              class=\"et-query-devtools-chip et-query-devtools-chip--loading\"\n                              title=\"Took {{\n                                row.run.attempts\n                              }} attempts - so this bar is mostly retry backoff, not one slow round trip\"\n                            >\n                              <span class=\"et-query-devtools-retry-glyph\" aria-hidden=\"true\">\u27F3</span>\n                              {{ row.run.attempts }}\n                            </span>\n                          }\n                          @if (!row.run.didRequest) {\n                            <span\n                              class=\"et-query-devtools-chip et-query-devtools-chip--muted\"\n                              title=\"Arrived without a request of this query's own - a poll, another consumer of the same cache entry, or another tab\"\n                            >\n                              shared\n                            </span>\n                          }\n                          @if (row.run.status === 'aborted') {\n                            <span\n                              class=\"et-query-devtools-chip et-query-devtools-chip--muted\"\n                              title=\"The query requested again before this run's response arrived\"\n                            >\n                              aborted\n                            </span>\n                          }\n                        </span>\n                      </button>\n                    }\n                  </div>\n                </div>\n              } @else {\n                <p class=\"et-query-devtools-empty\">\n                  No requests recorded yet. Every request a listed query makes shows up here as a bar.\n                </p>\n              }\n            </div>\n\n            @if (timelineSelectedQuery(); as sel) {\n              <aside class=\"et-query-devtools-drawer\">\n                <div class=\"et-query-devtools-drawer-head\">\n                  <span>Query detail</span>\n                  <button\n                    (click)=\"timelineSelectedQueryId.set(null)\"\n                    class=\"et-query-devtools-close\"\n                    type=\"button\"\n                    title=\"Close detail\"\n                  >\n                    \u2715\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              </aside>\n            }\n          </div>\n        }\n\n        <!-- EVENTS -->\n        @case ('events') {\n          <div class=\"et-query-devtools-pane\">\n            <div class=\"et-query-devtools-toolbar\">\n              <span class=\"et-query-devtools-count\">{{ eventLog().length }} events</span>\n              <button (click)=\"clearEvents()\" class=\"et-query-devtools-btn\" type=\"button\">Clear</button>\n            </div>\n            <div class=\"et-query-devtools-scroll\">\n              <table class=\"et-query-devtools-table\">\n                <thead>\n                  <tr>\n                    <th>Time</th>\n                    <th>Base URL</th>\n                    <th>Type</th>\n                    <th>Request</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (event of eventLog(); track event.id) {\n                    <tr\n                      [attr.data-status]=\"\n                        event.type === 'request-error' ? 'error' : event.type === 'queries-refreshed' ? null : 'success'\n                      \"\n                    >\n                      <td>{{ formatTime(event.timestamp) }}</td>\n                      <td class=\"et-query-devtools-mono\">{{ event.client }}</td>\n                      <td>\n                        {{ eventTypeLabel(event) }}\n                        @if (event.isSecure) {\n                          <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">secure</span>\n                        }\n                      </td>\n                      @if (event.cause; as cause) {\n                        <td>\n                          <span class=\"et-query-devtools-url\">{{ causeLabel(cause) }}</span>\n                          @if (event.refreshed?.length) {\n                            <div class=\"et-query-devtools-chips\">\n                              @for (refreshed of event.refreshed; track $index) {\n                                @if (refreshed.queryIds[0]; as queryId) {\n                                  <button\n                                    (click)=\"selectQuery(queryId)\"\n                                    class=\"et-query-devtools-chip et-query-devtools-chip--button\"\n                                    type=\"button\"\n                                    title=\"Open {{ refreshed.method }} {{ refreshed.path }}\"\n                                  >\n                                    {{ refreshed.method }} {{ refreshed.path }}\n                                    <!-- One request, several queries on the same cache key. Spelling the count\n                                       out beats repeating an identical row per consumer. -->\n                                    @if (refreshed.queryIds.length > 1) {\n                                      <small>\u00D7{{ refreshed.queryIds.length }}</small>\n                                    }\n                                  </button>\n                                } @else {\n                                  <span\n                                    class=\"et-query-devtools-chip et-query-devtools-chip--muted\"\n                                    title=\"No registered query holds this cache entry any more\"\n                                  >\n                                    {{ refreshed.method }} {{ refreshed.path }}\n                                  </span>\n                                }\n                              }\n                            </div>\n                          } @else {\n                            <span class=\"et-query-devtools-hint\">matched no query in use</span>\n                          }\n                        </td>\n                      } @else if (event.url; as url) {\n                        <td>\n                          @if (event.queryId) {\n                            <button\n                              (click)=\"selectEventRow(event)\"\n                              class=\"et-query-devtools-row-link\"\n                              type=\"button\"\n                              title=\"Open {{ event.method }} {{ url }}\"\n                            >\n                              <span class=\"et-query-devtools-method\">{{ event.method }}</span>\n                              <span class=\"et-query-devtools-url\">{{ requestPath(url) }}</span>\n                            </button>\n                          } @else {\n                            <span [title]=\"event.method + ' ' + url\">\n                              <span class=\"et-query-devtools-method\">{{ event.method }}</span>\n                              <span class=\"et-query-devtools-url\">{{ requestPath(url) }}</span>\n                            </span>\n                          }\n                        </td>\n                      } @else {\n                        <td class=\"et-query-devtools-url\">all secure entries dropped</td>\n                      }\n                    </tr>\n                  } @empty {\n                    <tr>\n                      <td class=\"et-query-devtools-empty\" colspan=\"4\">No events captured yet.</td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          </div>\n        }\n\n        <!-- FAULTS -->\n        @case ('faults') {\n          <div class=\"et-query-devtools-scroll\">\n            <div class=\"et-query-devtools-toolbar\">\n              <p class=\"et-query-devtools-hint\">\n                Faults are injected into the request pipeline, so retries, error handling features and the cache see\n                them exactly as they would see a real one. Unlike the rest of the panel, what you arm here is not\n                persisted - a page reload disarms every client.\n              </p>\n            </div>\n\n            @for (client of faultClients(); track client.name) {\n              @let fault = client.fault;\n              <div [class.et-query-devtools-card--armed]=\"client.armed\" class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong class=\"et-query-devtools-mono\">{{ client.name }}</strong>\n                  <span class=\"et-query-devtools-url\">{{ client.baseUrl }}</span>\n                  @if (client.armed) {\n                    <span class=\"et-query-devtools-chip et-query-devtools-chip--error\">armed</span>\n                    <button (click)=\"CLEAR_FAULTS(client.name)\" class=\"et-query-devtools-btn\" type=\"button\">\n                      Disarm\n                    </button>\n                  }\n                </div>\n\n                <div class=\"et-query-devtools-faults\">\n                  <label class=\"et-query-devtools-field\">\n                    <span>Latency</span>\n                    <input\n                      #latencyInput\n                      [value]=\"fault.latencyMs\"\n                      (change)=\"\n                        armFaultValue({ clientName: client.name, field: 'latencyMs', value: latencyInput.value })\n                      \"\n                      class=\"et-query-devtools-input et-query-devtools-input--number\"\n                      type=\"number\"\n                      min=\"0\"\n                      max=\"60000\"\n                      step=\"100\"\n                    />\n                    <small>ms before every attempt starts</small>\n                  </label>\n\n                  <label class=\"et-query-devtools-field\">\n                    <span>Fail next</span>\n                    <input\n                      #failNextInput\n                      [value]=\"fault.failNext\"\n                      (change)=\"\n                        armFaultValue({ clientName: client.name, field: 'failNext', value: failNextInput.value })\n                      \"\n                      class=\"et-query-devtools-input et-query-devtools-input--number\"\n                      type=\"number\"\n                      min=\"0\"\n                      max=\"99\"\n                      step=\"1\"\n                    />\n                    <small>attempts, counted down as they are spent</small>\n                  </label>\n\n                  <label class=\"et-query-devtools-field\">\n                    <span>Fail rate</span>\n                    <input\n                      #failRateInput\n                      [value]=\"fault.failRate\"\n                      (change)=\"\n                        armFaultValue({ clientName: client.name, field: 'failRate', value: failRateInput.value })\n                      \"\n                      class=\"et-query-devtools-input et-query-devtools-input--number\"\n                      type=\"number\"\n                      min=\"0\"\n                      max=\"100\"\n                      step=\"5\"\n                    />\n                    <small>% of attempts, rolled per attempt</small>\n                  </label>\n\n                  <label class=\"et-query-devtools-field\">\n                    <span>Status</span>\n                    <select\n                      #statusSelect\n                      (change)=\"armFaultStatus({ clientName: client.name, value: statusSelect.value })\"\n                      class=\"et-query-devtools-select\"\n                    >\n                      @for (option of FAULT_STATUSES; track option.status) {\n                        <!-- `selected` on the option, not `value` on the select: the select's value is\n                             applied before its options exist, so it would fall back to the first one. -->\n                        <option [value]=\"option.status\" [selected]=\"option.status === fault.status\">\n                          {{ option.status }} \u00B7 {{ option.label }}\n                        </option>\n                      }\n                    </select>\n                    <small>\n                      @if (isFaultStatusRetryable(fault.status)) {\n                        the default retry policy retries this\n                      } @else {\n                        the default retry policy gives up on this\n                      }\n                    </small>\n                  </label>\n                </div>\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No query clients registered yet.</p>\n            }\n          </div>\n        }\n      }\n    </div>\n\n    <!-- A route with its path params and query string picked out from the static path. The segments must\n         stay element-only: a text node between them would render as a space inside the route. -->\n    <ng-template #routeTpl let-segments=\"segments\" let-fallback=\"fallback\">\n      @for (segment of segments; track $index) {\n        <span [class]=\"'et-query-devtools-route-' + segment.kind\" [attr.title]=\"segment.name\">{{ segment.text }}</span>\n      } @empty {\n        {{ fallback }}\n      }\n    </ng-template>\n\n    <!-- Reusable dt/dd pair for a card's `et-query-devtools-meta` list: what its queries ran and moved. -->\n    <ng-template #activityRowTpl let-activity=\"activity\">\n      <dt>Traffic</dt>\n      <dd>\n        @if (activity.hasActivity) {\n          {{ activity.stats.requests }} request{{ activity.stats.requests === 1 ? '' : 's' }} \u00B7 \u2193\n          {{ formatTransferred(activity.stats.receivedBytes, activity.stats.hasEstimatedBytes) }}\n          @if (activity.stats.sentBytes) {\n            \u00B7 \u2191 {{ formatTransferred(activity.stats.sentBytes, activity.stats.hasEstimatedBytes) }}\n          }\n          @if (activity.cacheServed) {\n            \u00B7 {{ activity.cacheServed }} from cache\n          }\n          @if (activity.stats.errors) {\n            \u00B7 {{ activity.stats.errors }} failed\n          }\n        } @else {\n          \u2014\n        }\n      </dd>\n    </ng-template>\n\n    <!-- Reusable feature list: the feature's name, followed by the options it was configured with. -->\n    <ng-template #featuresTpl let-features=\"features\">\n      <ul class=\"et-query-devtools-features\">\n        @for (feature of features; track feature.type) {\n          <li class=\"et-query-devtools-feature\">\n            <span class=\"et-query-devtools-chip\">{{ featureLabel(feature.type) }}</span>\n            <!-- Always rendered: the list is one grid, so a feature without options still needs its cell\n                 for the next row's chip to stay in the same column. -->\n            <span class=\"et-query-devtools-feature-details\">\n              @for (detail of feature.details; track detail.label) {\n                <span class=\"et-query-devtools-feature-detail\">\n                  <span class=\"et-query-devtools-feature-label\">{{ detail.label }}</span>\n                  <span class=\"et-query-devtools-feature-value\">{{ detail.value }}</span>\n                </span>\n              }\n            </span>\n          </li>\n        }\n      </ul>\n    </ng-template>\n\n    <!-- Reusable inner-query list (stacks) \u2014 clicking opens the split-view drawer, not a tab switch. -->\n    <ng-template #innerQueriesTpl let-links=\"links\">\n      <div class=\"et-query-devtools-inner-queries\">\n        @for (link of links; track $index) {\n          <button\n            [class.et-query-devtools-inner-row--active]=\"stackSelectedQueryId() === link.id\"\n            [disabled]=\"!link.id\"\n            (click)=\"stackSelectedQueryId.set(link.id)\"\n            class=\"et-query-devtools-inner-row\"\n            type=\"button\"\n          >\n            <span [attr.data-status]=\"queryStatus(link.query)\" class=\"et-query-devtools-status\"></span>\n            <span class=\"et-query-devtools-method\">{{ link.method }}</span>\n            <span class=\"et-query-devtools-route\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  routeTpl;\n                  context: { segments: link.segments, fallback: link.query.id() || 'query ' + ($index + 1) }\n                \"\n              />\n            </span>\n            @let linkStats = linkActivity(link);\n            @if (linkStats.hasActivity) {\n              <span class=\"et-query-devtools-traffic\">\n                {{ formatTransferred(linkStats.stats.receivedBytes, linkStats.stats.hasEstimatedBytes) }}\n              </span>\n            }\n          </button>\n        }\n      </div>\n    </ng-template>\n\n    <!-- The queries a form feeds \u2014 clicking one opens the split-view drawer, not a tab switch. -->\n    <ng-template #formDrivesTpl let-links=\"links\">\n      <div class=\"et-query-devtools-inner-queries\">\n        @for (link of links; track link.id) {\n          <button\n            [class.et-query-devtools-inner-row--active]=\"formSelectedQueryId() === link.id\"\n            [disabled]=\"!link.id\"\n            (click)=\"formSelectedQueryId.set(link.id)\"\n            class=\"et-query-devtools-inner-row\"\n            type=\"button\"\n          >\n            <span [attr.data-status]=\"queryStatus(link.query)\" class=\"et-query-devtools-status\"></span>\n            <span class=\"et-query-devtools-method\">{{ link.method }}</span>\n            <span class=\"et-query-devtools-route\">\n              <ng-container\n                *ngTemplateOutlet=\"routeTpl; context: { segments: link.segments, fallback: link.query.id() || 'query' }\"\n              />\n            </span>\n          </button>\n        }\n      </div>\n    </ng-template>\n\n    <!-- Reusable query detail \u2014 used by the Queries tab and by every split-view drawer. -->\n    <ng-template #queryDetailTpl let-sel=\"sel\">\n      <div class=\"et-query-devtools-detail-head\">\n        <span class=\"et-query-devtools-method\">{{ sel.entry.meta.method }}</span>\n        <span class=\"et-query-devtools-route\">\n          <ng-container\n            *ngTemplateOutlet=\"routeTpl; context: { segments: routeSegments(sel.entry, sel.query), fallback: '\u2014' }\"\n          />\n        </span>\n      </div>\n\n      @if (requestProgress(sel.query); as live) {\n        <div class=\"et-query-devtools-live\">\n          @if (live.retry; as retry) {\n            <span\n              class=\"et-query-devtools-chip et-query-devtools-chip--loading\"\n              title=\"The retry policy is backing off before it tries again. A query stuck loading with this chip is waiting, not slow.\"\n            >\n              <span class=\"et-query-devtools-retry-glyph\" aria-hidden=\"true\">\u27F3</span>\n              attempt {{ retry.attempt }} in {{ formatCountdown(live.retryInMs) }}\n            </span>\n            <span class=\"et-query-devtools-live-note\">\n              {{ retryCause(retry.status) }} \u00B7 backing off {{ formatDuration(retry.delayMs) }}\n            </span>\n          } @else if (live.attempts > 1) {\n            <span\n              class=\"et-query-devtools-chip et-query-devtools-chip--loading\"\n              title=\"How many HTTP attempts the last execution took - the retry policy fired for the rest\"\n            >\n              <span class=\"et-query-devtools-retry-glyph\" aria-hidden=\"true\">\u27F3</span>\n              {{ live.attempts }} attempts\n            </span>\n          }\n\n          @if (live.progress; as progress) {\n            <span\n              [attr.aria-valuenow]=\"progress.percentage\"\n              class=\"et-query-devtools-progress\"\n              role=\"progressbar\"\n              aria-valuemin=\"0\"\n              aria-valuemax=\"100\"\n              aria-label=\"Transfer progress\"\n            >\n              <span [style.inline-size.%]=\"progress.percentage\" class=\"et-query-devtools-progress-bar\"></span>\n            </span>\n            <span class=\"et-query-devtools-live-note\">\n              {{ formatPercent(progress.percentage) }} \u00B7 {{ formatBytes(progress.loaded) }} of\n              {{ formatBytes(progress.total) }}\n              @if (progress.remainingTime !== null) {\n                \u00B7 {{ formatDuration(progress.remainingTime) }} left\n              }\n            </span>\n          }\n        </div>\n      }\n\n      <div class=\"et-query-devtools-actions\">\n        <span class=\"et-query-devtools-actions-label\">Run</span>\n        <button (click)=\"executeQuery(sel.query, false)\" class=\"et-query-devtools-btn\" type=\"button\">Execute</button>\n        <button (click)=\"executeQuery(sel.query, true)\" class=\"et-query-devtools-btn\" type=\"button\">Cached</button>\n        <button (click)=\"resetQuery(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Reset</button>\n        <button (click)=\"copyReport(sel.entry, sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">\n          {{ copiedReport() ? '\u2713 Copied' : 'Copy report' }}\n        </button>\n        <button\n          (click)=\"copyInsomniaRequest(sel.entry, sel.query)\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n          title=\"Copy as an Insomnia collection (Import \u2192 From Clipboard). Includes the request headers, and the token refresh for a secure query.\"\n        >\n          {{ copiedInsomnia() ? '\u2713 Copied' : 'Insomnia' }}\n        </button>\n        <span class=\"et-query-devtools-actions-label\">Edit</span>\n        <button (click)=\"openResponseEditor(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Response</button>\n        <button (click)=\"openArgsEditor(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Replay args</button>\n        <span class=\"et-query-devtools-actions-label\">Force</span>\n        <button (click)=\"forceLoading(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Loading</button>\n        <button (click)=\"forceError(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Error</button>\n        <button (click)=\"forceEmpty(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Empty</button>\n        <button (click)=\"clearForced(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Clear</button>\n      </div>\n\n      @if (editorMode() !== 'none') {\n        <div class=\"et-query-devtools-editor\">\n          @if (editorMode() === 'response') {\n            <h4 class=\"et-query-devtools-section\">Edit response \u2192 setResponse()</h4>\n            <textarea\n              #respArea\n              [value]=\"editorSeed\"\n              (input)=\"responseDraft.set(respArea.value)\"\n              class=\"et-query-devtools-textarea\"\n              spellcheck=\"false\"\n            ></textarea>\n            <div class=\"et-query-devtools-actions\">\n              <button (click)=\"applyResponse(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Apply</button>\n              <button (click)=\"cancelEditor()\" class=\"et-query-devtools-btn\" type=\"button\">Cancel</button>\n            </div>\n          } @else {\n            <h4 class=\"et-query-devtools-section\">Replay with edited args \u2192 execute()</h4>\n            <textarea\n              #argsArea\n              [value]=\"editorSeed\"\n              (input)=\"argsDraft.set(argsArea.value)\"\n              class=\"et-query-devtools-textarea\"\n              spellcheck=\"false\"\n            ></textarea>\n            <div class=\"et-query-devtools-actions\">\n              <button (click)=\"applyArgs(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Execute</button>\n              <button (click)=\"cancelEditor()\" class=\"et-query-devtools-btn\" type=\"button\">Cancel</button>\n            </div>\n          }\n          @if (editError(); as err) {\n            <p class=\"et-query-devtools-editor-error\">{{ err }}</p>\n          }\n        </div>\n      }\n\n      @let detailRuns = queryRuns(sel.entry);\n      <nav class=\"et-query-devtools-subtabs\" role=\"tablist\">\n        @for (tab of detailTabs; track tab.id) {\n          <button\n            [class.et-query-devtools-subtab--active]=\"detailTab() === tab.id\"\n            [attr.aria-selected]=\"detailTab() === tab.id\"\n            (click)=\"detailTab.set(tab.id)\"\n            class=\"et-query-devtools-subtab\"\n            type=\"button\"\n            role=\"tab\"\n          >\n            {{ tab.label }}\n            @if (tab.id === 'history' && detailRuns.length) {\n              <span class=\"et-query-devtools-tab-badge\">{{ detailRuns.length }}</span>\n            }\n            <!-- The error body lives under Data, so the tab has to say so - a failure must not hide\n                 behind a tab that is not open. -->\n            @if (tab.id === 'data' && sel.query.error()) {\n              <span class=\"et-query-devtools-tab-badge et-query-devtools-tab-badge--error\">!</span>\n            }\n          </button>\n        }\n      </nav>\n\n      @switch (detailTab()) {\n        @case ('overview') {\n          <dl class=\"et-query-devtools-meta\">\n            <dt>Base URL</dt>\n            <dd class=\"et-query-devtools-mono\">\n              {{ sel.entry.meta.clientBaseUrl || sel.entry.meta.clientName || '\u2014' }}\n            </dd>\n            <dt>Route</dt>\n            <dd class=\"et-query-devtools-mono\">{{ sel.entry.meta.route || '\u2014' }}</dd>\n            <dt>Request URL</dt>\n            <dd class=\"et-query-devtools-mono\">{{ requestUrl(sel.query) || '\u2014' }}</dd>\n            <dt>Status</dt>\n            <dd>{{ queryStatus(sel.query) }}</dd>\n            <dt>Cache key</dt>\n            <dd class=\"et-query-devtools-mono\">{{ sel.query.id() || '\u2014' }}</dd>\n            <dt>Last executed</dt>\n            <dd>{{ formatTime(sel.query.lastTimeExecutedAt()) }}</dd>\n            <dt>Triggered by</dt>\n            <dd>{{ sel.query.triggeredBy() || 'user' }}</dd>\n            @let refreshes = refreshesFor(sel.entry.id);\n            @if (refreshes.length) {\n              <dt\n                title=\"Invalidations and mutation refreshes that re-executed this query, as far back as the event log goes\"\n              >\n                Refetched by\n              </dt>\n              <dd>\n                <div class=\"et-query-devtools-chips\">\n                  @for (refresh of refreshes.slice(0, 5); track refresh.id) {\n                    <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">\n                      {{ formatTime(refresh.timestamp) }} \u00B7 {{ refresh.label }}\n                    </span>\n                  }\n                  @if (refreshes.length > 5) {\n                    <span class=\"et-query-devtools-hint\">+{{ refreshes.length - 5 }} earlier</span>\n                  }\n                </div>\n              </dd>\n            }\n            @let drivers = formsDrivingQuery(sel.entry);\n            @if (drivers.length) {\n              <dt>Args from</dt>\n              <dd>\n                <div class=\"et-query-devtools-chips\">\n                  @for (driver of drivers; track driver.id) {\n                    <button\n                      (click)=\"selectForm(driver.id)\"\n                      class=\"et-query-devtools-chip et-query-devtools-chip--button\"\n                      type=\"button\"\n                      title=\"Open the query form in the Forms tab\"\n                    >\n                      {{ driver.meta.name }}\n                    </button>\n                  }\n                </div>\n              </dd>\n            }\n            @if (sel.entry.meta.features?.length) {\n              <dt>Features</dt>\n              <dd>\n                <ng-container *ngTemplateOutlet=\"featuresTpl; context: { features: sel.entry.meta.features }\" />\n              </dd>\n            }\n          </dl>\n\n          @let activity = queryActivity(sel.entry);\n          <div class=\"et-query-devtools-section-row\">\n            <h4 class=\"et-query-devtools-section\">Activity</h4>\n            <button\n              [disabled]=\"!activity.hasActivity\"\n              (click)=\"resetStats(sel.entry)\"\n              class=\"et-query-devtools-btn\"\n              type=\"button\"\n              title=\"Clear the counters and the run history, so the next interaction can be measured on its own\"\n            >\n              \u27F2 Reset\n            </button>\n          </div>\n\n          <dl class=\"et-query-devtools-stats\">\n            <div class=\"et-query-devtools-stat\" title=\"Every time the query ran, cache hits included\">\n              <dt>Refreshes</dt>\n              <dd>{{ activity.stats.executions }}</dd>\n              @if (activity.cacheServed) {\n                <span class=\"et-query-devtools-stat-sub\">{{ activity.cacheServed }} without a request</span>\n              }\n            </div>\n            <div class=\"et-query-devtools-stat\" title=\"Executions that started a request, and how they ended\">\n              <dt>Requests</dt>\n              <dd>{{ activity.stats.requests }}</dd>\n              <span class=\"et-query-devtools-stat-sub\">\n                {{ activity.stats.responses }} ok\n                @if (activity.stats.errors) {\n                  \u00B7 {{ activity.stats.errors }} failed\n                }\n              </span>\n            </div>\n            <div\n              class=\"et-query-devtools-stat\"\n              title=\"Total response payload received. Sizes without a content-length header are measured from the decoded body, so they ignore compression.\"\n            >\n              <dt>Received</dt>\n              <dd>{{ formatTransferred(activity.stats.receivedBytes, activity.stats.hasEstimatedBytes) }}</dd>\n              @if (activity.avgResponseBytes !== null) {\n                <span class=\"et-query-devtools-stat-sub\"\n                  >{{ formatBytes(activity.avgResponseBytes) }} per response</span\n                >\n              }\n            </div>\n            @if (activity.stats.sentBytes) {\n              <div class=\"et-query-devtools-stat\" title=\"Total request body sent (headers not counted)\">\n                <dt>Sent</dt>\n                <dd>{{ formatTransferred(activity.stats.sentBytes, activity.stats.hasEstimatedBytes) }}</dd>\n              </div>\n            }\n            @if (activity.stats.retries) {\n              <div\n                class=\"et-query-devtools-stat\"\n                title=\"Attempts the retry policy added on top of the first one. Which run they belong to is under History.\"\n              >\n                <dt>Retries</dt>\n                <dd>{{ activity.stats.retries }}</dd>\n              </div>\n            }\n            <div class=\"et-query-devtools-stat\" title=\"Measured from the execution that preceded each response\">\n              <dt>Duration</dt>\n              <dd>{{ formatDuration(activity.stats.lastDurationMs) }}</dd>\n              @if (activity.avgDurationMs !== null) {\n                <span class=\"et-query-devtools-stat-sub\">{{ formatDuration(activity.avgDurationMs) }} on average</span>\n              }\n            </div>\n            <div class=\"et-query-devtools-stat\">\n              <dt>Last response</dt>\n              <dd class=\"et-query-devtools-stat-value--sm\">{{ formatTime(activity.stats.lastResponseAt) }}</dd>\n              @if (activity.stats.firstExecutedAt !== null) {\n                <span class=\"et-query-devtools-stat-sub\"\n                  >first ran {{ formatTime(activity.stats.firstExecutedAt) }}</span\n                >\n              }\n            </div>\n          </dl>\n        }\n        @case ('history') {\n          <div class=\"et-query-devtools-section-row\">\n            <h4 class=\"et-query-devtools-section\">Runs</h4>\n            <button\n              [disabled]=\"!detailRuns.length\"\n              (click)=\"resetStats(sel.entry)\"\n              class=\"et-query-devtools-btn\"\n              type=\"button\"\n              title=\"Clear the run history and the counters, so the next interaction can be measured on its own\"\n            >\n              \u27F2 Reset\n            </button>\n          </div>\n          @if (detailRuns.length) {\n            <table class=\"et-query-devtools-table\">\n              <thead>\n                <tr>\n                  <th>Run</th>\n                  <th>Started</th>\n                  <th>Duration</th>\n                  <th>Received</th>\n                  <th>Diff</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (run of detailRuns; track run.index) {\n                  <tr [attr.data-status]=\"run.status === 'error' ? 'error' : null\">\n                    <td class=\"et-query-devtools-run-cell\">\n                      <span\n                        [attr.data-status]=\"runStatus(run)\"\n                        [title]=\"run.status\"\n                        class=\"et-query-devtools-status\"\n                      ></span>\n                      #{{ run.index }}\n                      @if (run.attempts > 1) {\n                        <span\n                          class=\"et-query-devtools-chip et-query-devtools-chip--loading\"\n                          title=\"Took {{\n                            run.attempts\n                          }} attempts - the duration next to it covers every one of them, backoff included\"\n                        >\n                          <span class=\"et-query-devtools-retry-glyph\" aria-hidden=\"true\">\u27F3</span>\n                          {{ run.attempts }}\n                        </span>\n                      }\n                      @if (!run.didRequest) {\n                        <span\n                          class=\"et-query-devtools-chip et-query-devtools-chip--muted\"\n                          title=\"Arrived without a request of this query's own - a poll, another consumer of the same cache entry, or another tab\"\n                        >\n                          shared\n                        </span>\n                      }\n                    </td>\n                    <td>{{ formatTime(run.startedAt) }}</td>\n                    <td>\n                      @if (run.endedAt === null) {\n                        in flight\n                      } @else {\n                        {{ formatDuration(run.endedAt - run.startedAt) }}\n                      }\n                    </td>\n                    <td>{{ run.receivedBytes ? formatBytes(run.receivedBytes) : '\u2014' }}</td>\n                    <td class=\"et-query-devtools-cell-actions\">\n                      @if (canDiffRun(sel.entry, run)) {\n                        <button\n                          [class.et-query-devtools-btn--active]=\"diffRunIndex() === run.index\"\n                          (click)=\"toggleRunDiff(run)\"\n                          class=\"et-query-devtools-btn\"\n                          type=\"button\"\n                          title=\"Compare this response against the previous one still held\"\n                        >\n                          Diff\n                        </button>\n                      } @else if (run.hasResponse) {\n                        <span class=\"et-query-devtools-count\">nothing earlier to diff</span>\n                      } @else if (run.status === 'success') {\n                        <span class=\"et-query-devtools-count\">body no longer held</span>\n                      } @else {\n                        <span class=\"et-query-devtools-count\">\u2014</span>\n                      }\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n\n            @if (responseDiff(sel.entry); as comparison) {\n              <div class=\"et-query-devtools-section-row\">\n                <h5 class=\"et-query-devtools-section\">\n                  Response diff \u00B7 run #{{ comparison.before.index }} \u2192 #{{ comparison.after.index }}\n                </h5>\n                <span class=\"et-query-devtools-count\">\n                  @if (comparison.diff.entries.length) {\n                    {{ comparison.diff.entries.length }} path{{ comparison.diff.entries.length === 1 ? '' : 's' }}\n                    @if (comparison.diff.truncated) {\n                      (capped)\n                    }\n                  } @else {\n                    identical\n                  }\n                </span>\n              </div>\n              @if (comparison.diff.entries.length) {\n                <table class=\"et-query-devtools-table et-query-devtools-diff\">\n                  <thead>\n                    <tr>\n                      <th>Path</th>\n                      <th>Before</th>\n                      <th>After</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (change of comparison.diff.entries; track change.path) {\n                      <tr [attr.data-kind]=\"change.kind\">\n                        <td class=\"et-query-devtools-mono\">{{ change.path }}</td>\n                        <td class=\"et-query-devtools-mono et-query-devtools-diff-before\">\n                          {{ change.kind === 'added' ? '\u2014' : inlineValue(change.before) }}\n                        </td>\n                        <td class=\"et-query-devtools-mono et-query-devtools-diff-after\">\n                          {{ change.kind === 'removed' ? '\u2014' : inlineValue(change.after) }}\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              } @else {\n                <p class=\"et-query-devtools-empty\">The two responses are identical.</p>\n              }\n            }\n          } @else {\n            <p class=\"et-query-devtools-empty\">No runs recorded yet.</p>\n          }\n        }\n        @case ('data') {\n          @if (sel.entry.meta.gqlQuery; as gqlQuery) {\n            <div class=\"et-query-devtools-section-row\">\n              <h5 class=\"et-query-devtools-section\">GraphQL document</h5>\n              <button\n                (click)=\"copyGqlDocument(gqlQuery)\"\n                class=\"et-query-devtools-btn\"\n                type=\"button\"\n                title=\"Copy the GraphQL document\"\n              >\n                {{ copiedGql() ? '\u2713 Copied' : '\u29C9 Copy' }}\n              </button>\n            </div>\n            <pre class=\"et-query-devtools-code\">{{ gqlDocument(gqlQuery) }}</pre>\n          }\n\n          <div class=\"et-query-devtools-section-row\">\n            <h4 class=\"et-query-devtools-section\">Value explorer</h4>\n            <input\n              #jsonSearchInput\n              [value]=\"jsonSearch()\"\n              (input)=\"jsonSearch.set(jsonSearchInput.value)\"\n              class=\"et-query-devtools-search\"\n              type=\"search\"\n              placeholder=\"filter keys / values\u2026\"\n            />\n          </div>\n\n          <h5 class=\"et-query-devtools-section\">Args</h5>\n          <et-query-devtools-json\n            [value]=\"queryArgs(sel.query)\"\n            [search]=\"jsonSearchTerm()\"\n            [expandedPaths]=\"jsonExpandedPaths()\"\n            [collapsedPaths]=\"jsonCollapsedPaths()\"\n            [toggleFn]=\"toggleJsonPath\"\n            path=\"args\"\n          />\n\n          @if (sel.query.error(); as error) {\n            <h5 class=\"et-query-devtools-section\">Error ({{ error.raw.status }})</h5>\n            <et-query-devtools-json\n              [value]=\"error.isList ? error.errors : error.error\"\n              [search]=\"jsonSearchTerm()\"\n              [expandedPaths]=\"jsonExpandedPaths()\"\n              [collapsedPaths]=\"jsonCollapsedPaths()\"\n              [toggleFn]=\"toggleJsonPath\"\n              path=\"error\"\n            />\n          } @else {\n            <h5 class=\"et-query-devtools-section\">Response</h5>\n            <et-query-devtools-json\n              [value]=\"sel.query.response()\"\n              [search]=\"jsonSearchTerm()\"\n              [expandedPaths]=\"jsonExpandedPaths()\"\n              [collapsedPaths]=\"jsonCollapsedPaths()\"\n              [toggleFn]=\"toggleJsonPath\"\n              path=\"response\"\n            />\n          }\n        }\n      }\n    </ng-template>\n  </section>\n}\n\n@if (!open()) {\n  <et-query-devtools-toggle (openChange)=\"toggleOpen()\" />\n}\n\n@if (inspectActive() && inspectHover(); as hover) {\n  <div\n    [style.left.px]=\"hover.rect.left\"\n    [style.top.px]=\"hover.rect.top\"\n    [style.width.px]=\"hover.rect.width\"\n    [style.height.px]=\"hover.rect.height\"\n    class=\"et-query-devtools-inspect-box\"\n  >\n    <span class=\"et-query-devtools-inspect-tag\">{{ inspectLabel(hover.entries) }}</span>\n  </div>\n}\n", styles: ["@layer components{.et-query-devtools-host{--_et-qdt-bg: var(--et-surface-background-solid, rgb(24 24 27));--_et-qdt-fg: var(--et-surface-color-solid, rgb(244 244 245));--_et-qdt-muted: var(--et-surface-color-muted-solid, rgb(161 161 170));--_et-qdt-subtle: var(--et-surface-color-subtle-solid, rgb(113 113 122));--_et-qdt-border: var(--et-surface-border-solid, rgb(255 255 255 / .12));--_et-qdt-interaction: var(--et-surface-interaction-solid, rgb(255 255 255));--_et-qdt-accent: var(--et-theme-color-primary-solid, rgb(96 165 250));--_et-qdt-hover: color-mix(in srgb, var(--_et-qdt-interaction) 10%, transparent);--_et-qdt-active: color-mix(in srgb, var(--_et-qdt-interaction) 18%, transparent);--_et-qdt-success: rgb(34 197 94);--_et-qdt-error: rgb(239 68 68);--_et-qdt-loading: rgb(234 179 8);position:fixed;inset-inline:0;inset-block-end:0;z-index:2147483000;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:1.2rem;line-height:1.4;pointer-events:none}.et-query-devtools-host>*{pointer-events:auto}.et-query-devtools-panel{position:relative;display:flex;flex-direction:column;inline-size:100%;min-block-size:20rem;max-block-size:90vh;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border-block-start:1px solid var(--_et-qdt-border);box-shadow:0 -.4rem 2rem #00000059}.et-query-devtools-panel--resizing{-webkit-user-select:none;user-select:none}.et-query-devtools-resize{position:absolute;inset-inline:0;inset-block-start:0;block-size:.6rem;cursor:ns-resize;z-index:1}.et-query-devtools-resize:after{content:\"\";position:absolute;inset-inline:50%;inset-block-start:.2rem;inline-size:4rem;margin-inline-start:-2rem;block-size:.2rem;border-radius:999px;background:var(--_et-qdt-border)}.et-query-devtools-resize:hover:after{background:var(--_et-qdt-accent)}.et-query-devtools-header{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-inline:.8rem;border-block-end:1px solid var(--_et-qdt-border);flex:0 0 auto}.et-query-devtools-armed-bar{display:flex;align-items:center;gap:.8rem;flex:0 0 auto;padding:.6rem .8rem;background:color-mix(in srgb,var(--_et-qdt-error) 14%,transparent);border-block-end:1px solid color-mix(in srgb,var(--_et-qdt-error) 45%,transparent);color:var(--_et-qdt-error);font-size:1.1rem}.et-query-devtools-armed-text{flex:1 1 auto;min-inline-size:0}.et-query-devtools-armed-dot{flex:0 0 auto;inline-size:.8rem;block-size:.8rem;border-radius:50%;background:var(--_et-qdt-error);animation:et-query-devtools-armed-pulse 1.6s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.et-query-devtools-armed-dot{animation:none}}@keyframes et-query-devtools-armed-pulse{50%{opacity:.25}}.et-query-devtools-armed-bar .et-query-devtools-btn{flex:0 0 auto;border-color:color-mix(in srgb,var(--_et-qdt-error) 55%,transparent);color:var(--_et-qdt-error)}.et-query-devtools-tabs{display:flex;flex-wrap:wrap;gap:.2rem}.et-query-devtools-tab{appearance:none;border:none;background:transparent;color:var(--_et-qdt-muted);padding:.9rem 1rem;cursor:pointer;border-block-end:2px solid transparent;font:inherit}.et-query-devtools-tab:hover{color:var(--_et-qdt-fg)}.et-query-devtools-tab--active{color:var(--_et-qdt-fg);border-block-end-color:var(--_et-qdt-accent)}.et-query-devtools-tab-badge{display:inline-block;margin-inline-start:.5rem;padding-inline:.45rem;border-radius:999px;background:color-mix(in srgb,var(--_et-qdt-interaction) 12%,transparent);color:var(--_et-qdt-muted);font-size:1rem;font-variant-numeric:tabular-nums}.et-query-devtools-tab-badge--error{background:color-mix(in srgb,var(--_et-qdt-error) 25%,transparent);color:var(--_et-qdt-fg)}.et-query-devtools-header-actions{display:flex;align-items:center;gap:.4rem;flex:0 0 auto}.et-query-devtools-inspect-btn{appearance:none;position:relative;display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.4rem .8rem;font:inherit;transition:color .12s ease,background-color .12s ease,border-color .12s ease}.et-query-devtools-inspect-btn:hover{color:var(--_et-qdt-fg);background:color-mix(in srgb,var(--_et-qdt-accent) 12%,transparent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent)}.et-query-devtools-inspect-btn:focus-visible{outline:2px solid var(--_et-qdt-accent);outline-offset:2px}.et-query-devtools-inspect-icon{inline-size:1.4rem;block-size:1.4rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round}.et-query-devtools-inspect-icon-dot{fill:currentColor;stroke:none}.et-query-devtools-inspect-btn--active,.et-query-devtools-inspect-btn--active:hover{color:#09090b;background:var(--_et-qdt-accent);border-color:var(--_et-qdt-accent)}.et-query-devtools-inspect-btn--active:after{content:\"\";position:absolute;inset:-.3rem;border:1px solid var(--_et-qdt-accent);border-radius:.6rem;pointer-events:none;animation:et-query-devtools-inspect-pulse 1.4s ease-in-out infinite}.et-query-devtools-inspect-btn--active .et-query-devtools-inspect-icon-ring{animation:et-query-devtools-inspect-pulse 1.4s ease-in-out infinite}@keyframes et-query-devtools-inspect-pulse{0%,to{opacity:.2}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.et-query-devtools-inspect-btn{transition:none}.et-query-devtools-inspect-btn--active:after,.et-query-devtools-inspect-btn--active .et-query-devtools-inspect-icon-ring{animation:none;opacity:1}}.et-query-devtools-close{appearance:none;border:none;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.6rem;font:inherit}.et-query-devtools-close-panel{appearance:none;display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:var(--_et-qdt-hover);color:var(--_et-qdt-fg);cursor:pointer;padding:.4rem .6rem .4rem .8rem;font:inherit}.et-query-devtools-close-panel:hover{border-color:var(--_et-qdt-error);color:var(--_et-qdt-error)}.et-query-devtools-kbd{border-radius:.3rem;background:var(--_et-qdt-hover);box-shadow:inset 0 0 0 1px var(--_et-qdt-border);color:var(--_et-qdt-muted);padding:.15rem .4rem;font:inherit;font-size:1.1rem;line-height:1.2;white-space:nowrap}.et-query-devtools-kbd--inverse{background:#00000026;box-shadow:inset 0 0 0 1px #00000040;color:inherit}.et-query-devtools-inspect-box{position:fixed;z-index:2147483002;pointer-events:none;border:2px solid var(--_et-qdt-accent);background:color-mix(in srgb,var(--_et-qdt-accent) 15%,transparent);border-radius:.2rem}.et-query-devtools-inspect-tag{position:absolute;inset-block-start:100%;inset-inline-start:0;margin-block-start:.2rem;padding:.2rem .5rem;border-radius:.3rem;background:var(--_et-qdt-accent);color:#09090b;font-family:ui-monospace,monospace;font-size:1.1rem;font-weight:600;white-space:nowrap}.et-query-devtools-close:hover{color:var(--_et-qdt-fg)}.et-query-devtools-body{flex:1 1 auto;min-block-size:0;overflow:hidden}.et-query-devtools-master-detail{display:flex;block-size:100%;min-block-size:0}.et-query-devtools-list{flex:0 0 34%;min-inline-size:22rem;max-inline-size:40rem;overflow-y:auto;border-inline-end:1px solid var(--_et-qdt-border)}.et-query-devtools-detail{flex:1 1 auto;min-inline-size:0;overflow-y:auto;padding:1rem}.et-query-devtools-detail .et-query-devtools-detail-head,.et-query-devtools-drawer .et-query-devtools-detail-head{padding-block-end:.8rem;border-block-end:1px solid var(--_et-qdt-border)}.et-query-devtools-detail .et-query-devtools-meta,.et-query-devtools-drawer .et-query-devtools-meta{padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 3%,transparent)}.et-query-devtools-detail .et-query-devtools-section-row,.et-query-devtools-drawer .et-query-devtools-section-row{padding-block-start:.8rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-filter-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.3rem .35rem .3rem .7rem;border-radius:999px;background:color-mix(in srgb,var(--_et-qdt-accent) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-qdt-accent) 45%,transparent);color:var(--_et-qdt-accent);font-size:1.1rem;font-weight:600;letter-spacing:.02em}.et-query-devtools-filter-icon{font-size:1.3rem;line-height:1}.et-query-devtools-filter-count{border-radius:999px;background:var(--_et-qdt-accent);color:#09090b;min-inline-size:1.8rem;padding:0 .5rem;text-align:center}.et-query-devtools-filter-clear{appearance:none;display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.3rem .6rem;font:inherit;font-size:1.15rem;line-height:1.4}.et-query-devtools-filter-clear:hover{border-color:color-mix(in srgb,var(--_et-qdt-accent) 60%,transparent);color:var(--_et-qdt-fg)}.et-query-devtools-scroll{block-size:100%;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.et-query-devtools-split{display:flex;block-size:100%;min-block-size:0}.et-query-devtools-split .et-query-devtools-scroll{flex:1 1 auto;min-inline-size:0}.et-query-devtools-pane{display:flex;flex-direction:column;flex:1 1 auto;block-size:100%;min-inline-size:0;min-block-size:0;overflow:hidden}.et-query-devtools-pane>.et-query-devtools-scroll{padding-block:0 1rem}.et-query-devtools-drawer{flex:0 0 42%;min-inline-size:26rem;max-inline-size:48rem;overflow-y:auto;padding:0 1rem 1rem;border-inline-start:1px solid var(--_et-qdt-border)}.et-query-devtools-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem 0;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg);color:var(--_et-qdt-muted);border-block-end:1px solid var(--_et-qdt-border);margin-block-end:.8rem}.et-query-devtools-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem;padding:.8rem;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg)}.et-query-devtools-toolbar-row{display:flex;align-items:center;flex-wrap:wrap;flex:1 1 100%;gap:.8rem}.et-query-devtools-toolbar-row .et-query-devtools-search{flex:1 1 100%}.et-query-devtools-toolbar--filtered{background:linear-gradient(to right,color-mix(in srgb,var(--_et-qdt-accent) 12%,transparent),transparent 65%),var(--_et-qdt-bg);box-shadow:inset .2rem 0 0 var(--_et-qdt-accent),inset 0 -1px color-mix(in srgb,var(--_et-qdt-accent) 30%,transparent)}.et-query-devtools-field{display:inline-flex;align-items:center;gap:.6rem;color:var(--_et-qdt-muted)}.et-query-devtools-select{background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-count{color:var(--_et-qdt-subtle)}.et-query-devtools-row{display:flex;align-items:center;gap:.8rem;inline-size:100%;min-block-size:3.6rem;text-align:start;appearance:none;border:none;border-block-end:1px solid var(--_et-qdt-border);background:transparent;color:var(--_et-qdt-fg);padding:.8rem;cursor:pointer;font:inherit}.et-query-devtools-row>.et-query-devtools-chip{padding-block:.1rem;line-height:1.2}.et-query-devtools-row:hover{background:var(--_et-qdt-hover)}.et-query-devtools-row--active{background:var(--_et-qdt-active)}.et-query-devtools-method{font-weight:700;font-size:1.1rem;color:var(--_et-qdt-muted);white-space:nowrap}.et-query-devtools-route{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-inline-size:0}.et-query-devtools-route-param{color:var(--_et-qdt-accent)}.et-query-devtools-route-query{color:var(--_et-qdt-muted)}.et-query-devtools-status{inline-size:.8rem;block-size:.8rem;border-radius:999px;flex:0 0 auto;background:var(--_et-qdt-subtle)}.et-query-devtools-status[data-status=success]{background:var(--_et-qdt-success)}.et-query-devtools-status[data-status=error]{background:var(--_et-qdt-error)}.et-query-devtools-status[data-status=loading],.et-query-devtools-status[data-status=running]{background:var(--_et-qdt-loading)}.et-query-devtools-detail-head{display:flex;align-items:center;gap:.8rem;margin-block-end:.8rem}.et-query-devtools-live{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-block-end:.8rem}.et-query-devtools-live-note{color:var(--_et-qdt-muted);font-size:1.15rem}.et-query-devtools-progress{display:block;flex:1 1 12rem;min-inline-size:8rem;max-inline-size:24rem;block-size:.5rem;border-radius:999px;overflow:hidden;background:var(--_et-qdt-border)}.et-query-devtools-progress-bar{display:block;block-size:100%;border-radius:inherit;background:var(--_et-qdt-accent)}.et-query-devtools-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-block-end:.8rem}.et-query-devtools-btn{appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.3rem;background:transparent;color:var(--_et-qdt-fg);padding:.25rem .55rem;font-size:1.15rem;line-height:1.4;cursor:pointer}.et-query-devtools-btn:hover{background:var(--_et-qdt-hover)}.et-query-devtools-btn:disabled{color:var(--_et-qdt-subtle);cursor:default;background:transparent}.et-query-devtools-toolbar-btn{margin-inline-start:auto;flex:0 0 auto}.et-query-devtools-meta{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0 0 1rem}.et-query-devtools-meta dt{color:var(--_et-qdt-muted)}.et-query-devtools-meta dd{margin:0;overflow-wrap:anywhere}.et-query-devtools-section{margin:1rem 0 .4rem;font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--_et-qdt-muted)}.et-query-devtools-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.6rem;margin:0 0 1rem}.et-query-devtools-stat{padding:.6rem .8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 3%,transparent)}.et-query-devtools-stat dt{font-size:1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--_et-qdt-muted)}.et-query-devtools-stat dd{margin:0;font-size:1.5rem;font-variant-numeric:tabular-nums}.et-query-devtools-stat-value--sm{font-size:1.2rem}.et-query-devtools-stat-sub{display:block;font-size:1rem;color:var(--_et-qdt-subtle)}.et-query-devtools-traffic{margin-inline-start:auto;flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--_et-qdt-subtle)}.et-query-devtools-json{margin:0;padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;max-block-size:24rem;overflow-y:auto}.et-query-devtools-json--error{border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-mono{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.et-query-devtools-code{margin:0 0 .8rem;padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);overflow:auto;white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.15rem;max-block-size:20rem}.et-query-devtools-ws-message{border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.6rem;margin-block-end:.4rem}.et-query-devtools-url{display:inline-block;max-inline-size:32rem;margin-inline-start:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.et-query-devtools-chips,.et-query-devtools-chip-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-end:.8rem}.et-query-devtools-features{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:.4rem .8rem;margin:0 0 .8rem;padding:0;list-style:none}.et-query-devtools-meta .et-query-devtools-features{margin-block-end:0}.et-query-devtools-feature{display:contents}.et-query-devtools-feature>.et-query-devtools-chip{justify-self:start}.et-query-devtools-feature-details{display:flex;flex-wrap:wrap;gap:.3rem}.et-query-devtools-feature-detail{display:inline-flex;align-items:baseline;gap:.4rem;padding:.2rem .5rem;border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 5%,transparent);font-size:1.1rem}.et-query-devtools-feature-label{color:var(--_et-qdt-muted)}.et-query-devtools-feature-value{color:var(--_et-qdt-fg);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.et-query-devtools-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--_et-qdt-border);font-size:1.1rem;color:var(--_et-qdt-fg);background:color-mix(in srgb,var(--_et-qdt-interaction) 6%,transparent)}.et-query-devtools-chip--muted{color:var(--_et-qdt-muted)}.et-query-devtools-retry-glyph{font-size:.7em;line-height:1}.et-query-devtools-chip--loading{color:var(--_et-qdt-loading);border-color:color-mix(in srgb,var(--_et-qdt-loading) 50%,transparent)}.et-query-devtools-chip--error{color:var(--_et-qdt-error);border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-chip--success{color:var(--_et-qdt-success);border-color:color-mix(in srgb,var(--_et-qdt-success) 50%,transparent)}button.et-query-devtools-chip--button{appearance:none;cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}button.et-query-devtools-chip--button:hover{border-color:var(--_et-qdt-accent);color:var(--_et-qdt-accent)}.et-query-devtools-caret{display:inline-block;width:1.2rem;color:var(--_et-qdt-muted)}.et-query-devtools-facet{appearance:none;cursor:pointer;color:var(--_et-qdt-muted);font:inherit;font-size:1.1rem;line-height:1.4}.et-query-devtools-facet:hover:not(:disabled){color:var(--_et-qdt-fg);border-color:color-mix(in srgb,var(--_et-qdt-accent) 60%,transparent)}.et-query-devtools-facet:disabled{color:var(--_et-qdt-subtle);cursor:default}.et-query-devtools-facet--active{color:var(--_et-qdt-accent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-accent) 14%,transparent)}.et-query-devtools-facet-count{font-variant-numeric:tabular-nums;color:inherit;opacity:.75}.et-query-devtools-card{border:1px solid var(--_et-qdt-border);border-radius:.6rem;padding:1rem}.et-query-devtools-card-head{display:flex;align-items:center;gap:.6rem;margin-block-end:.8rem}.et-query-devtools-card-title{display:flex;align-items:baseline;gap:.5rem;margin-block-end:.2rem}.et-query-devtools-card-sub{color:var(--_et-qdt-subtle);font-size:1.1rem;margin-block-end:.6rem;overflow-wrap:anywhere}.et-query-devtools-inner-queries{display:flex;flex-direction:column;gap:.3rem}.et-query-devtools-inner-row{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-fg);padding:.4rem .6rem;cursor:pointer;font:inherit}.et-query-devtools-inner-row:hover:not([disabled]){background:var(--_et-qdt-hover)}.et-query-devtools-inner-row--active{background:var(--_et-qdt-active);border-color:var(--_et-qdt-accent)}.et-query-devtools-inner-row[disabled]{cursor:default;opacity:.6}.et-query-devtools-step-list{display:flex;flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none}.et-query-devtools-step-item{border:1px solid var(--_et-qdt-border);border-radius:.4rem;overflow:hidden}.et-query-devtools-step-item[data-status=error]{border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-step-head{display:flex;align-items:stretch}.et-query-devtools-step-head .et-query-devtools-inner-row{border:none;border-radius:0;flex:1 1 auto}.et-query-devtools-step-caret-btn{appearance:none;border:none;border-inline-start:1px solid var(--_et-qdt-border);background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:0 .7rem;font:inherit}.et-query-devtools-step-caret-btn:hover{background:var(--_et-qdt-hover);color:var(--_et-qdt-fg)}.et-query-devtools-step-toggle{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:none;background:transparent;color:var(--_et-qdt-fg);padding:.6rem;cursor:pointer;font:inherit}.et-query-devtools-step-toggle:hover{background:var(--_et-qdt-hover)}.et-query-devtools-step-index{flex:1 1 auto;min-inline-size:0}.et-query-devtools-step-caret{color:var(--_et-qdt-muted)}.et-query-devtools-step-io{padding:0 .8rem .8rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-table{inline-size:100%;border-collapse:collapse}.et-query-devtools-table th,.et-query-devtools-table td{text-align:start;padding:.5rem .6rem;border-block-end:1px solid var(--_et-qdt-border);vertical-align:top}.et-query-devtools-table th{color:var(--_et-qdt-muted);font-weight:600;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg)}.et-query-devtools-table tr[data-status=error] td{color:var(--_et-qdt-error)}.et-query-devtools-empty{color:var(--_et-qdt-subtle);padding:1.2rem;text-align:center}.et-query-devtools-actions-label{color:var(--_et-qdt-subtle);align-self:center;text-transform:uppercase;font-size:1rem;letter-spacing:.05em}.et-query-devtools-actions-label:not(:first-child){margin-inline-start:.7rem}.et-query-devtools-cell-actions{display:flex;gap:.4rem;white-space:nowrap}.et-query-devtools-section-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-block-start:1rem}.et-query-devtools-search{flex:0 1 20rem;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-row-link{display:inline-flex;align-items:center;gap:.6rem;appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;text-align:start;cursor:pointer}.et-query-devtools-row-link:hover .et-query-devtools-url,.et-query-devtools-row-link:focus-visible .et-query-devtools-url{color:var(--_et-qdt-accent);text-decoration:underline}.et-query-devtools-hint{flex:1 1 24rem;color:var(--_et-qdt-muted);font-size:1.1rem;margin:0}.et-query-devtools-card--armed{border-color:color-mix(in srgb,var(--_et-qdt-error) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-error) 6%,transparent)}.et-query-devtools-faults{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:.8rem 1.6rem}.et-query-devtools-faults .et-query-devtools-field{display:grid;grid-template-columns:8rem minmax(0,1fr);align-items:baseline;row-gap:.2rem;color:var(--_et-qdt-fg)}.et-query-devtools-faults .et-query-devtools-field small{grid-column:2;color:var(--_et-qdt-subtle);font-size:1.1rem}.et-query-devtools-input{inline-size:100%;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-input--number{inline-size:8rem;font-variant-numeric:tabular-nums}.et-query-devtools-editor{border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.8rem;margin-block-end:1rem}.et-query-devtools-textarea{inline-size:100%;min-block-size:12rem;resize:vertical;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.6rem;font-family:inherit;font-size:1.2rem}.et-query-devtools-editor-error{color:var(--_et-qdt-error);margin:.4rem 0 0}.et-query-devtools-json-node,.et-query-devtools-json-children{display:flex;flex-direction:column}.et-query-devtools-json-children{padding-inline-start:1.4rem;border-inline-start:1px solid var(--_et-qdt-border);margin-inline-start:.4rem}.et-query-devtools-json-row{display:flex;align-items:baseline;gap:.4rem;padding:.1rem 0;font-family:inherit;line-height:1.5}.et-query-devtools-json-toggle{appearance:none;display:flex;align-items:baseline;gap:.4rem;min-inline-size:0;border:none;background:transparent;color:var(--_et-qdt-fg);cursor:pointer;text-align:start;font:inherit;padding:.1rem 0}.et-query-devtools-json-node>.et-query-devtools-json-row:hover{background:var(--_et-qdt-hover)}.et-query-devtools-json-caret{color:var(--_et-qdt-subtle);inline-size:1rem;flex:0 0 auto}.et-query-devtools-json-key{color:var(--_et-qdt-accent)}.et-query-devtools-json-colon,.et-query-devtools-json-preview{color:var(--_et-qdt-subtle)}.et-query-devtools-json-chunk{color:var(--_et-qdt-fg);opacity:.75;font-variant-numeric:tabular-nums}.et-query-devtools-json-value{overflow-wrap:anywhere}.et-query-devtools-json-leaf[data-kind=string] .et-query-devtools-json-value{color:var(--_et-qdt-success)}.et-query-devtools-json-leaf[data-kind=number] .et-query-devtools-json-value,.et-query-devtools-json-leaf[data-kind=boolean] .et-query-devtools-json-value{color:var(--_et-qdt-loading)}.et-query-devtools-json-leaf[data-kind=null] .et-query-devtools-json-value,.et-query-devtools-json-leaf[data-kind=undefined] .et-query-devtools-json-value{color:var(--_et-qdt-subtle)}.et-query-devtools-json-hit{background:color-mix(in srgb,var(--_et-qdt-loading) 40%,transparent);border-radius:.2rem}.et-query-devtools-json-copy{appearance:none;display:inline-flex;align-items:center;justify-content:center;align-self:center;flex:0 0 auto;inline-size:2.2rem;block-size:2.2rem;margin-block:-.4rem;border:none;border-radius:.3rem;background:transparent;color:var(--_et-qdt-subtle);cursor:pointer;opacity:0;font:inherit;font-size:1.3rem;line-height:1}.et-query-devtools-json-copy:hover:not(.et-query-devtools-json-copy--copied){background:var(--_et-qdt-active);color:var(--_et-qdt-fg)}.et-query-devtools-json-row:hover .et-query-devtools-json-copy,.et-query-devtools-json-copy:focus-visible,.et-query-devtools-json-copy--copied{opacity:1}.et-query-devtools-json-copy--copied{color:var(--_et-qdt-success)}.et-query-devtools-timeline{display:grid;grid-template-columns:minmax(10rem,26rem) minmax(14rem,1fr) max-content max-content max-content;gap:.1rem .8rem;padding-inline:.4rem 1rem}.et-query-devtools-timeline-axis,.et-query-devtools-timeline-row{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center}.et-query-devtools-timeline-axis{position:sticky;inset-block-start:0;z-index:1;background:var(--_et-qdt-bg);border-block-end:1px solid var(--_et-qdt-border);padding-block-end:.4rem;margin-block-end:.4rem}.et-query-devtools-timeline-ticks{grid-column:2;position:relative;block-size:1.5rem}.et-query-devtools-timeline-tick{position:absolute;inset-block-start:0;transform:translate(-50%);color:var(--_et-qdt-subtle);font-size:1.1rem;white-space:nowrap}.et-query-devtools-timeline-tick:first-child{transform:none}.et-query-devtools-timeline-tick:last-child{transform:translate(-100%)}.et-query-devtools-timeline-row{appearance:none;border:0;background:transparent;color:inherit;font:inherit;text-align:start;padding:.15rem 0;cursor:pointer}.et-query-devtools-timeline-row:hover{background:var(--_et-qdt-hover)}.et-query-devtools-timeline-row--active{background:var(--_et-qdt-active)}.et-query-devtools-timeline-label{display:flex;align-items:baseline;gap:.4rem;min-inline-size:0;overflow:hidden}.et-query-devtools-timeline-label .et-query-devtools-url{max-inline-size:none;margin-inline-start:0}.et-query-devtools-timeline-track{position:relative;block-size:1.8rem;border-radius:.2rem;overflow:hidden;background-color:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);background-image:repeating-linear-gradient(to right,var(--_et-qdt-border) 0 1px,transparent 1px 25%)}.et-query-devtools-timeline-bar{position:absolute;inset-block:.4rem;min-inline-size:.2rem;border-radius:.2rem;background:var(--_et-qdt-subtle)}.et-query-devtools-timeline-bar[data-status=success]{background:var(--_et-qdt-success)}.et-query-devtools-timeline-bar[data-status=error]{background:var(--_et-qdt-error)}.et-query-devtools-timeline-bar[data-status=loading]{background:var(--_et-qdt-loading)}.et-query-devtools-timeline-bar[data-status=aborted]{min-inline-size:.5rem;background:color-mix(in srgb,var(--_et-qdt-subtle) 20%,transparent);outline:1px solid color-mix(in srgb,var(--_et-qdt-subtle) 70%,transparent);outline-offset:-1px}.et-query-devtools-timeline-duration,.et-query-devtools-timeline-size{text-align:end;color:var(--_et-qdt-muted);font-size:1.1rem;font-variant-numeric:tabular-nums;white-space:nowrap}.et-query-devtools-timeline-duration{color:var(--_et-qdt-fg)}.et-query-devtools-timeline-flags{display:flex;align-items:center;gap:.3rem;white-space:nowrap}.et-query-devtools-timeline-flags .et-query-devtools-chip{padding:0 .4rem;border-color:transparent;border-radius:.3rem;background:color-mix(in srgb,currentcolor 12%,transparent);font-size:1rem;line-height:1.5;font-variant-numeric:tabular-nums}.et-query-devtools-subtabs{display:flex;flex-wrap:wrap;gap:.2rem;border-block-end:1px solid var(--_et-qdt-border);margin-block:.8rem}.et-query-devtools-subtabs+.et-query-devtools-section-row{padding-block-start:0;border-block-start:0}.et-query-devtools-subtab{appearance:none;display:inline-flex;align-items:center;gap:.4rem;border:0;border-block-end:2px solid transparent;background:transparent;color:var(--_et-qdt-muted);font:inherit;font-size:1.15rem;padding:.4rem .6rem;margin-block-end:-1px;cursor:pointer}.et-query-devtools-subtab:hover{color:var(--_et-qdt-fg)}.et-query-devtools-subtab--active{color:var(--_et-qdt-fg);border-block-end-color:var(--_et-qdt-accent)}.et-query-devtools-run-cell{display:flex;align-items:center;gap:.5rem}.et-query-devtools-btn--active{color:var(--_et-qdt-accent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-accent) 12%,transparent)}.et-query-devtools-diff td{max-inline-size:28rem;overflow-wrap:anywhere}.et-query-devtools-diff-before{color:var(--_et-qdt-muted)}.et-query-devtools-diff tr[data-kind=removed] .et-query-devtools-diff-before{color:var(--_et-qdt-error)}.et-query-devtools-diff tr[data-kind=added] .et-query-devtools-diff-after{color:var(--_et-qdt-success)}.et-query-devtools-diff tr[data-kind=changed] .et-query-devtools-diff-after{color:var(--_et-qdt-accent)}}\n"] }]
         }], ctorParameters: () => [] });
 
 const QUERY_DEVTOOLS_IMPORTS = [QueryDevtoolsComponent];