@juice-js/observability 0.0.0-stage → 1.0.0-alpha.1

package/fesm2022/juice-js-observability-telemetry-VA4_3nzr.mjs

@@ -0,0 +1,1748 @@
+import { ApiService, ContextService, LinkPipe, MAX_SEARCH_MS, ObservabilityLinks, RANGES } from "./juice-js-observability.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Pipe, afterNextRender, computed, effect, inject, input, linkedSignal, signal, viewChild } from "@angular/core";
+import { catchError, map, of } from "rxjs";
+import { rxResource, takeUntilDestroyed, toSignal } from "@angular/core/rxjs-interop";
+import { Router, RouterLink } from "@angular/router";
+import { DatePipe } from "@angular/common";
+import * as i1$1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import * as i2 from "@angular/material/button";
+import { MatButtonModule } from "@angular/material/button";
+import * as i1 from "@angular/material/progress-bar";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import * as i3 from "@angular/material/icon";
+import { MatIconModule } from "@angular/material/icon";
+import * as i2$1 from "@angular/material/select";
+import { MatSelectModule } from "@angular/material/select";
+function preciseTime(iso) {
+	const fraction = /\.\d{3}(\d+)/.exec(iso)?.[1];
+	return Date.parse(iso) + (fraction ? Number(`0.${fraction}`) : 0);
+}
+function plainTraceId(text) {
+	const lower = text.trim().toLowerCase();
+	return /^[0-9a-f]{2}-([0-9a-f]{32})-[0-9a-f]{16}-[0-9a-f]{2}$/.exec(lower)?.[1] ?? lower;
+}
+function formatDuration(ms) {
+	if (ms === null || ms === void 0 || Number.isNaN(ms)) return "—";
+	if (ms < 1) return `${ms.toFixed(2)} ms`;
+	if (ms < 1e3) return `${Math.round(ms * 10) / 10} ms`;
+	if (ms < 6e4) return `${(ms / 1e3).toFixed(2)} s`;
+	const s = Math.round(ms / 1e3);
+	return `${Math.floor(s / 60)} m ${String(s % 60).padStart(2, "0")} s`;
+}
+function formatPercent(rate) {
+	if (rate === null || rate === void 0) return "—";
+	const p = rate * 100;
+	return `${p === 0 ? "0" : p < .1 ? "<0.1" : p.toFixed(p < 10 ? 1 : 0)} %`;
+}
+function formatAgo(iso) {
+	if (!iso) return "—";
+	const s = Math.round((Date.now() - new Date(iso).getTime()) / 1e3);
+	if (s < 60) return `${Math.max(s, 0)} s ago`;
+	if (s < 3600) return `${Math.round(s / 60)} min ago`;
+	if (s < 86400) return `${Math.round(s / 3600)} h ago`;
+	return `${Math.round(s / 86400)} d ago`;
+}
+var DurationPipe = class DurationPipe {
+	transform(ms) {
+		return formatDuration(ms);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: DurationPipe,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Pipe
+	});
+	static ɵpipe = i0.ɵɵngDeclarePipe({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: DurationPipe,
+		isStandalone: true,
+		name: "duration"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: DurationPipe,
+	decorators: [{
+		type: Pipe,
+		args: [{ name: "duration" }]
+	}]
+});
+var PercentPipe = class PercentPipe {
+	transform(rate) {
+		return formatPercent(rate);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: PercentPipe,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Pipe
+	});
+	static ɵpipe = i0.ɵɵngDeclarePipe({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: PercentPipe,
+		isStandalone: true,
+		name: "percent2"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: PercentPipe,
+	decorators: [{
+		type: Pipe,
+		args: [{ name: "percent2" }]
+	}]
+});
+var AgoPipe = class AgoPipe {
+	transform(iso) {
+		return formatAgo(iso);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: AgoPipe,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Pipe
+	});
+	static ɵpipe = i0.ɵɵngDeclarePipe({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: AgoPipe,
+		isStandalone: true,
+		name: "ago"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: AgoPipe,
+	decorators: [{
+		type: Pipe,
+		args: [{ name: "ago" }]
+	}]
+});
+var ReasonPipe = class ReasonPipe {
+	transform(code) {
+		const [what, subject] = code.split(/:(.*)/s);
+		const text = what.replace(/_/g, " ");
+		return subject ? `${text}: ${subject}` : text;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ReasonPipe,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Pipe
+	});
+	static ɵpipe = i0.ɵɵngDeclarePipe({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ReasonPipe,
+		isStandalone: true,
+		name: "reason"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ReasonPipe,
+	decorators: [{
+		type: Pipe,
+		args: [{ name: "reason" }]
+	}]
+});
+var HealthBadge = class HealthBadge {
+	state = input(...ngDevMode ? [void 0, { debugName: "state" }] : /* istanbul ignore next */ []);
+	stale = input(false, ...ngDevMode ? [{ debugName: "stale" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: HealthBadge,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: HealthBadge,
+		isStandalone: true,
+		selector: "jc-health",
+		inputs: {
+			state: {
+				classPropertyName: "state",
+				publicName: "state",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stale: {
+				classPropertyName: "stale",
+				publicName: "stale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `<span class="jc-badge" [class]="'jc-health-' + (state() ?? 'none').toLowerCase()"
+    [attr.title]="stale() ? 'Evaluation has stopped: this state may be out of date' : null">
+    {{ state() ?? 'No data' }}@if (stale()) {<span class="jc-stale"> · stale</span>}</span>`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: HealthBadge,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "jc-health",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<span class="jc-badge" [class]="'jc-health-' + (state() ?? 'none').toLowerCase()"
+    [attr.title]="stale() ? 'Evaluation has stopped: this state may be out of date' : null">
+    {{ state() ?? 'No data' }}@if (stale()) {<span class="jc-stale"> · stale</span>}</span>`
+		}]
+	}],
+	propDecorators: {
+		state: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "state",
+				required: false
+			}]
+		}],
+		stale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stale",
+				required: false
+			}]
+		}]
+	}
+});
+var ConfidenceBadge = class ConfidenceBadge {
+	confidence = input.required(...ngDevMode ? [{ debugName: "confidence" }] : /* istanbul ignore next */ []);
+	observed = computed(() => this.confidence().toLowerCase() === "observed", ...ngDevMode ? [{ debugName: "observed" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ConfidenceBadge,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.4",
+		type: ConfidenceBadge,
+		isStandalone: true,
+		selector: "jc-confidence",
+		inputs: { confidence: {
+			classPropertyName: "confidence",
+			publicName: "confidence",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: `<span class="jc-badge" [class.jc-observed]="observed()" [class.jc-inferred]="!observed()"
+    [attr.title]="observed() ? 'Seen in traces: a call from one service to the other' : 'Inferred from span attributes, not a confirmed call'">
+    {{ observed() ? 'observed' : 'inferred' }}</span>`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ConfidenceBadge,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "jc-confidence",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<span class="jc-badge" [class.jc-observed]="observed()" [class.jc-inferred]="!observed()"
+    [attr.title]="observed() ? 'Seen in traces: a call from one service to the other' : 'Inferred from span attributes, not a confirmed call'">
+    {{ observed() ? 'observed' : 'inferred' }}</span>`
+		}]
+	}],
+	propDecorators: { confidence: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "confidence",
+			required: true
+		}]
+	}] }
+});
+var KeyValueTable = class KeyValueTable {
+	values = input({}, ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
+	empty = input("None", ...ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []);
+	entries = computed(() => Object.entries(this.values()).filter((e) => e[1] !== null && e[1] !== void 0 && e[1] !== "").sort((a, b) => a[0].localeCompare(b[0])), ...ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: KeyValueTable,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: KeyValueTable,
+		isStandalone: true,
+		selector: "jc-kv",
+		inputs: {
+			values: {
+				classPropertyName: "values",
+				publicName: "values",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			empty: {
+				classPropertyName: "empty",
+				publicName: "empty",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    @if (entries().length === 0) { <p class="jc-muted">{{ empty() }}</p> }
+    @else {
+      <table class="jc-kv"><tbody>
+        @for (e of entries(); track e[0]) { <tr><th>{{ e[0] }}</th><td>{{ e[1] }}</td></tr> }
+      </tbody></table>
+    }`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: KeyValueTable,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "jc-kv",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    @if (entries().length === 0) { <p class="jc-muted">{{ empty() }}</p> }
+    @else {
+      <table class="jc-kv"><tbody>
+        @for (e of entries(); track e[0]) { <tr><th>{{ e[0] }}</th><td>{{ e[1] }}</td></tr> }
+      </tbody></table>
+    }`
+		}]
+	}],
+	propDecorators: {
+		values: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "values",
+				required: false
+			}]
+		}],
+		empty: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "empty",
+				required: false
+			}]
+		}]
+	}
+});
+var ContextBar = class ContextBar {
+	ctx = inject(ContextService);
+	api = inject(ApiService);
+	router = inject(Router);
+	links = inject(ObservabilityLinks);
+	ranges = Object.keys(RANGES);
+	environments = toSignal(this.api.environments().pipe(map((p) => p.items), catchError(() => of([]))), { initialValue: [] });
+	query = "";
+	message = signal("", ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
+	lookup() {
+		const q = this.query.trim();
+		if (!q) return;
+		this.message.set("Searching…");
+		this.api.search(q).subscribe({
+			next: (page) => {
+				const hit = page.items[0];
+				if (!hit) {
+					this.message.set(`Nothing found for "${q}".`);
+					return;
+				}
+				this.message.set(page.items.length > 1 ? `${page.items.length} matches; showing the first.` : "");
+				const extra = hit.kind === "span" ? { span: hit.id } : {};
+				hit.kind === "service" ? this.router.navigate(this.links.to("services", hit.id), { queryParams: this.ctx.keep() }) : this.router.navigate(this.links.to("traces", hit.traceId), { queryParams: this.ctx.keep(extra) });
+			},
+			error: () => this.message.set("Search failed.")
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ContextBar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: ContextBar,
+		isStandalone: true,
+		selector: "jc-context-bar",
+		ngImport: i0,
+		template: `
+    <div class="jc-context">
+      <ng-content />
+      <span class="jc-spacer"></span>
+      <mat-form-field subscriptSizing="dynamic" class="jc-field-sm">
+        <mat-label>Environment</mat-label>
+        <mat-select [value]="ctx.environment()" (valueChange)="ctx.set({ env: $event || null })">
+          <mat-option value="">All</mat-option>
+          @for (e of environments(); track e.id) { <mat-option [value]="e.key">{{ e.key }}</mat-option> }
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field subscriptSizing="dynamic" class="jc-field-sm">
+        <mat-label>Time range</mat-label>
+        <mat-select [value]="ctx.range()" (valueChange)="ctx.set({ range: $event })">
+          @for (r of ranges; track r) { <mat-option [value]="r">Last {{ r }}</mat-option> }
+          @if (ctx.range() === 'custom') { <mat-option value="custom" disabled>Custom window</mat-option> }
+        </mat-select>
+      </mat-form-field>
+      <form class="jc-lookup" (ngSubmit)="lookup()">
+        <mat-icon>search</mat-icon>
+        <input name="q" [(ngModel)]="query" placeholder="Trace ID, span ID or service" aria-label="Go to trace, span or service">
+      </form>
+    </div>
+    @if (message()) { <p class="jc-muted jc-lookup-message">{{ message() }}</p> }`,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1$1.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i1$1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1$1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1$1.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i1$1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "directive",
+				type: i1$1.NgForm,
+				selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]",
+				inputs: ["ngFormOptions"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatSelectModule
+			},
+			{
+				kind: "component",
+				type: i2$1.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i2$1.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "component",
+				type: i2$1.MatSelect,
+				selector: "mat-select",
+				inputs: [
+					"aria-describedby",
+					"panelClass",
+					"disabled",
+					"disableRipple",
+					"tabIndex",
+					"hideSingleSelectionIndicator",
+					"placeholder",
+					"required",
+					"multiple",
+					"disableOptionCentering",
+					"compareWith",
+					"value",
+					"aria-label",
+					"aria-labelledby",
+					"errorStateMatcher",
+					"typeaheadDebounceInterval",
+					"sortComparator",
+					"id",
+					"panelWidth",
+					"canSelectNullableOptions"
+				],
+				outputs: [
+					"openedChange",
+					"opened",
+					"closed",
+					"selectionChange",
+					"valueChange"
+				],
+				exportAs: ["matSelect"]
+			},
+			{
+				kind: "component",
+				type: i2$1.MatOption,
+				selector: "mat-option",
+				inputs: [
+					"value",
+					"id",
+					"disabled"
+				],
+				outputs: ["onSelectionChange"],
+				exportAs: ["matOption"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatIconModule
+			},
+			{
+				kind: "component",
+				type: i3.MatIcon,
+				selector: "mat-icon",
+				inputs: [
+					"color",
+					"inline",
+					"svgIcon",
+					"fontSet",
+					"fontIcon"
+				],
+				exportAs: ["matIcon"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatButtonModule
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ContextBar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "jc-context-bar",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				FormsModule,
+				MatSelectModule,
+				MatIconModule,
+				MatButtonModule
+			],
+			template: `
+    <div class="jc-context">
+      <ng-content />
+      <span class="jc-spacer"></span>
+      <mat-form-field subscriptSizing="dynamic" class="jc-field-sm">
+        <mat-label>Environment</mat-label>
+        <mat-select [value]="ctx.environment()" (valueChange)="ctx.set({ env: $event || null })">
+          <mat-option value="">All</mat-option>
+          @for (e of environments(); track e.id) { <mat-option [value]="e.key">{{ e.key }}</mat-option> }
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field subscriptSizing="dynamic" class="jc-field-sm">
+        <mat-label>Time range</mat-label>
+        <mat-select [value]="ctx.range()" (valueChange)="ctx.set({ range: $event })">
+          @for (r of ranges; track r) { <mat-option [value]="r">Last {{ r }}</mat-option> }
+          @if (ctx.range() === 'custom') { <mat-option value="custom" disabled>Custom window</mat-option> }
+        </mat-select>
+      </mat-form-field>
+      <form class="jc-lookup" (ngSubmit)="lookup()">
+        <mat-icon>search</mat-icon>
+        <input name="q" [(ngModel)]="query" placeholder="Trace ID, span ID or service" aria-label="Go to trace, span or service">
+      </form>
+    </div>
+    @if (message()) { <p class="jc-muted jc-lookup-message">{{ message() }}</p> }`
+		}]
+	}]
+});
+function withGaps(points, from, to, stepSeconds) {
+	const step = stepSeconds * 1e3;
+	const byTime = new Map(points.map((p) => [new Date(p.at).getTime(), p.value]));
+	const out = [];
+	for (let t = Math.floor(new Date(from).getTime() / step) * step; t < new Date(to).getTime(); t += step) out.push({
+		at: new Date(t).toISOString(),
+		value: byTime.get(t) ?? null
+	});
+	return out;
+}
+var Chart = class Chart {
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	series = input([], ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+	format = input((v) => String(Math.round(v * 100) / 100), ...ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []);
+	host = viewChild.required("host", ...ngDevMode ? [{ debugName: "host" }] : /* istanbul ignore next */ []);
+	empty = computed(() => this.series().every((s) => s.points.every((p) => p.value === null)), ...ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []);
+	chart;
+	observer;
+	constructor() {
+		afterNextRender(async () => {
+			const [echarts, charts, components, renderers] = await Promise.all([
+				import("echarts/core"),
+				import("echarts/charts"),
+				import("echarts/components"),
+				import("echarts/renderers")
+			]);
+			echarts.use([
+				charts.LineChart,
+				components.GridComponent,
+				components.TooltipComponent,
+				components.LegendComponent,
+				renderers.SVGRenderer
+			]);
+			this.chart = echarts.init(this.host().nativeElement, void 0, { renderer: "svg" });
+			this.observer = new ResizeObserver(() => this.chart?.resize());
+			this.observer.observe(this.host().nativeElement);
+			this.render();
+		});
+		effect(() => {
+			this.series();
+			this.render();
+		});
+	}
+	render() {
+		if (!this.chart) return;
+		const format = this.format();
+		const dark = document.body.classList.contains("dark");
+		const option = {
+			animation: false,
+			grid: {
+				left: 56,
+				right: 16,
+				top: 16,
+				bottom: 28
+			},
+			tooltip: {
+				trigger: "axis",
+				valueFormatter: (v) => typeof v === "number" ? format(v) : "—"
+			},
+			legend: this.series().length > 1 ? {
+				top: 0,
+				textStyle: { color: dark ? "#ddd" : "#333" }
+			} : void 0,
+			xAxis: {
+				type: "time",
+				axisLabel: { color: dark ? "#bbb" : "#555" }
+			},
+			yAxis: {
+				type: "value",
+				axisLabel: {
+					color: dark ? "#bbb" : "#555",
+					formatter: (v) => format(v)
+				},
+				splitLine: { lineStyle: { color: dark ? "#333" : "#eee" } }
+			},
+			series: this.series().map((s) => ({
+				name: s.name,
+				type: "line",
+				showSymbol: false,
+				connectNulls: false,
+				data: s.points.map((p) => [p.at, p.value])
+			}))
+		};
+		this.chart.setOption(option, true);
+	}
+	ngOnDestroy() {
+		this.observer?.disconnect();
+		this.chart?.dispose();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: Chart,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: Chart,
+		isStandalone: true,
+		selector: "jc-chart",
+		inputs: {
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			series: {
+				classPropertyName: "series",
+				publicName: "series",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			format: {
+				classPropertyName: "format",
+				publicName: "format",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		viewQueries: [{
+			propertyName: "host",
+			first: true,
+			predicate: ["host"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `<div class="jc-chart-title">{{ title() }}</div>
+    @if (empty()) { <div class="jc-chart jc-chart-empty">No data in this window</div> }
+    <div #host class="jc-chart" [hidden]="empty()"></div>`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: Chart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "jc-chart",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<div class="jc-chart-title">{{ title() }}</div>
+    @if (empty()) { <div class="jc-chart jc-chart-empty">No data in this window</div> }
+    <div #host class="jc-chart" [hidden]="empty()"></div>`
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		series: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "series",
+				required: false
+			}]
+		}],
+		format: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "format",
+				required: false
+			}]
+		}],
+		host: [{
+			type: i0.ViewChild,
+			args: ["host", { isSignal: true }]
+		}]
+	}
+});
+function cursorList(params, query, fetch) {
+	const destroyRef = inject(DestroyRef);
+	const first = rxResource({
+		params,
+		stream: ({ params }) => {
+			const q = query(params);
+			return fetch(q).pipe(map((page) => ({
+				page,
+				query: q
+			})));
+		}
+	});
+	const rest = linkedSignal({
+		...ngDevMode ? { debugName: "rest" } : /* istanbul ignore next */ {},
+		source: first.value,
+		computation: () => ({
+			items: [],
+			cursor: void 0
+		})
+	});
+	const loadingMore = signal(false, ...ngDevMode ? [{ debugName: "loadingMore" }] : /* istanbul ignore next */ []);
+	const moreError = signal(null, ...ngDevMode ? [{ debugName: "moreError" }] : /* istanbul ignore next */ []);
+	const items = computed(() => [...first.value()?.page.items ?? [], ...rest().items], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	const cursor = computed(() => rest().cursor !== void 0 ? rest().cursor : first.value()?.page.nextCursor ?? null, ...ngDevMode ? [{ debugName: "cursor" }] : /* istanbul ignore next */ []);
+	function more() {
+		const current = first.value();
+		const next = cursor();
+		if (!current || !next || loadingMore()) return;
+		loadingMore.set(true);
+		moreError.set(null);
+		fetch({
+			...current.query,
+			cursor: next
+		}).pipe(takeUntilDestroyed(destroyRef)).subscribe({
+			next: (page) => rest.update((r) => ({
+				items: [...r.items, ...page.items],
+				cursor: page.nextCursor ?? null
+			})),
+			error: (e) => {
+				moreError.set(e);
+				loadingMore.set(false);
+			},
+			complete: () => loadingMore.set(false)
+		});
+	}
+	return {
+		first,
+		items,
+		hasMore: computed(() => cursor() !== null),
+		loadingMore,
+		moreError: moreError.asReadonly(),
+		more
+	};
+}
+function screenPages(rows, sizes = [
+	50,
+	100,
+	200
+]) {
+	const size = signal(sizes[0], ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	const index = linkedSignal({
+		...ngDevMode ? { debugName: "index" } : /* istanbul ignore next */ {},
+		source: rows,
+		computation: () => 0
+	});
+	return {
+		sizes,
+		size: size.asReadonly(),
+		index: index.asReadonly(),
+		visible: computed(() => rows().slice(index() * size(), (index() + 1) * size())),
+		needed: computed(() => rows().length > sizes[0]),
+		change(event) {
+			size.set(event.pageSize);
+			index.set(event.pageIndex);
+		}
+	};
+}
+function problemText(error) {
+	const e = error;
+	if (!e) return "";
+	if (e.status === 0) return "The Juice API cannot be reached.";
+	return [e.error?.title, e.error?.detail].filter(Boolean).join(": ") || `Request failed (${e.status}).`;
+}
+var TraceTable = class TraceTable {
+	ctx = inject(ContextService);
+	api = inject(ApiService);
+	query = input({}, ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	limit = input(50, ...ngDevMode ? [{ debugName: "limit" }] : /* istanbul ignore next */ []);
+	traces = cursorList(() => ({
+		query: this.query(),
+		env: this.ctx.environment(),
+		range: this.ctx.range(),
+		abs: this.ctx.absolute(),
+		limit: this.limit()
+	}), (p) => ({
+		environment: p.env,
+		...this.ctx.window(MAX_SEARCH_MS),
+		limit: p.limit,
+		...p.query
+	}), (q) => this.api.traces(q));
+	rows = this.traces.items;
+	longest = computed(() => Math.max(1, ...this.rows().map((t) => t.durationMs)), ...ngDevMode ? [{ debugName: "longest" }] : /* istanbul ignore next */ []);
+	error = computed(() => problemText(this.traces.first.error()), ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	moreError = computed(() => problemText(this.traces.moreError()), ...ngDevMode ? [{ debugName: "moreError" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: TraceTable,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: TraceTable,
+		isStandalone: true,
+		selector: "jc-trace-table",
+		inputs: {
+			query: {
+				classPropertyName: "query",
+				publicName: "query",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			limit: {
+				classPropertyName: "limit",
+				publicName: "limit",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    @if (traces.first.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (traces.first.error()) { <p class="jc-error">{{ error() }}</p> }
+    @if (traces.first.hasValue()) {
+      @if (rows().length === 0) { <p class="jc-muted">No traces match in this window.</p> }
+      @else {
+        <table class="jc-table">
+          <thead><tr><th>Start</th><th>Root operation</th><th>Duration</th><th>Spans</th><th>Status</th><th>Instance</th></tr></thead>
+          <tbody>
+            @for (t of rows(); track t.traceId) {
+              <tr>
+                <td class="jc-nowrap">{{ t.startedAt | date: 'MMM d, HH:mm:ss.SSS' }}</td>
+                <td><a [routerLink]="['traces', t.traceId] | jcLink" [queryParams]="ctx.keep()">{{ t.rootService }} · {{ t.rootOperation }}</a>
+                  @if (t.services.length > 1) { <div class="jc-muted jc-small">{{ t.services.join(' → ') }}</div> }</td>
+                <td class="jc-nowrap"><span class="jc-bar" [style.width.%]="100 * t.durationMs / longest()"></span>{{ t.durationMs | duration }}</td>
+                <td>{{ t.spanCount }}</td>
+                <td>@if (t.errorCount > 0) { <span class="jc-badge jc-health-unhealthy">{{ t.errorCount }} error{{ t.errorCount > 1 ? 's' : '' }}</span> }
+                    @else { <span class="jc-badge jc-health-healthy">ok</span> }</td>
+                <td class="jc-muted jc-small">{{ t.rootInstance ?? t.rootHost ?? '—' }}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+        <div class="jc-more">
+          <span class="jc-muted">{{ rows().length }} trace{{ rows().length === 1 ? '' : 's' }}{{ traces.hasMore() ? ', newest first' : '' }}</span>
+          @if (traces.hasMore()) {
+            <button mat-button (click)="traces.more()" [disabled]="traces.loadingMore()">{{ traces.loadingMore() ? 'Loading…' : 'Older traces' }}</button>
+          }
+          @if (traces.moreError()) { <span class="jc-error">{{ moreError() }}</span> }
+        </div>
+      }
+    }`,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: MatProgressBarModule
+			},
+			{
+				kind: "component",
+				type: i1.MatProgressBar,
+				selector: "mat-progress-bar",
+				inputs: [
+					"color",
+					"value",
+					"bufferValue",
+					"mode"
+				],
+				outputs: ["animationEnd"],
+				exportAs: ["matProgressBar"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatButtonModule
+			},
+			{
+				kind: "component",
+				type: i2.MatButton,
+				selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+				inputs: ["matButton"],
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "pipe",
+				type: LinkPipe,
+				name: "jcLink"
+			},
+			{
+				kind: "pipe",
+				type: DatePipe,
+				name: "date"
+			},
+			{
+				kind: "pipe",
+				type: DurationPipe,
+				name: "duration"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: TraceTable,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "jc-trace-table",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				LinkPipe,
+				RouterLink,
+				DatePipe,
+				DurationPipe,
+				MatProgressBarModule,
+				MatButtonModule
+			],
+			template: `
+    @if (traces.first.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (traces.first.error()) { <p class="jc-error">{{ error() }}</p> }
+    @if (traces.first.hasValue()) {
+      @if (rows().length === 0) { <p class="jc-muted">No traces match in this window.</p> }
+      @else {
+        <table class="jc-table">
+          <thead><tr><th>Start</th><th>Root operation</th><th>Duration</th><th>Spans</th><th>Status</th><th>Instance</th></tr></thead>
+          <tbody>
+            @for (t of rows(); track t.traceId) {
+              <tr>
+                <td class="jc-nowrap">{{ t.startedAt | date: 'MMM d, HH:mm:ss.SSS' }}</td>
+                <td><a [routerLink]="['traces', t.traceId] | jcLink" [queryParams]="ctx.keep()">{{ t.rootService }} · {{ t.rootOperation }}</a>
+                  @if (t.services.length > 1) { <div class="jc-muted jc-small">{{ t.services.join(' → ') }}</div> }</td>
+                <td class="jc-nowrap"><span class="jc-bar" [style.width.%]="100 * t.durationMs / longest()"></span>{{ t.durationMs | duration }}</td>
+                <td>{{ t.spanCount }}</td>
+                <td>@if (t.errorCount > 0) { <span class="jc-badge jc-health-unhealthy">{{ t.errorCount }} error{{ t.errorCount > 1 ? 's' : '' }}</span> }
+                    @else { <span class="jc-badge jc-health-healthy">ok</span> }</td>
+                <td class="jc-muted jc-small">{{ t.rootInstance ?? t.rootHost ?? '—' }}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+        <div class="jc-more">
+          <span class="jc-muted">{{ rows().length }} trace{{ rows().length === 1 ? '' : 's' }}{{ traces.hasMore() ? ', newest first' : '' }}</span>
+          @if (traces.hasMore()) {
+            <button mat-button (click)="traces.more()" [disabled]="traces.loadingMore()">{{ traces.loadingMore() ? 'Loading…' : 'Older traces' }}</button>
+          }
+          @if (traces.moreError()) { <span class="jc-error">{{ moreError() }}</span> }
+        </div>
+      }
+    }`
+		}]
+	}],
+	propDecorators: {
+		query: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "query",
+				required: false
+			}]
+		}],
+		limit: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "limit",
+				required: false
+			}]
+		}]
+	}
+});
+var LogTable = class LogTable {
+	ctx = inject(ContextService);
+	api = inject(ApiService);
+	query = input({}, ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	compact = input(false, ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
+	logs = cursorList(() => ({
+		query: this.query(),
+		env: this.ctx.environment(),
+		range: this.ctx.range(),
+		abs: this.ctx.absolute()
+	}), (p) => ({
+		environment: p.env,
+		...this.ctx.window(MAX_SEARCH_MS),
+		limit: 200,
+		...p.query
+	}), (q) => this.api.logs(q));
+	rows = this.logs.items;
+	error = computed(() => problemText(this.logs.first.error()), ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	moreError = computed(() => problemText(this.logs.moreError()), ...ngDevMode ? [{ debugName: "moreError" }] : /* istanbul ignore next */ []);
+	severityClass(n) {
+		return n >= 17 ? "jc-health-unhealthy" : n >= 13 ? "jc-health-degraded" : n >= 9 ? "jc-health-healthy" : "jc-health-none";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: LogTable,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: LogTable,
+		isStandalone: true,
+		selector: "jc-log-table",
+		inputs: {
+			query: {
+				classPropertyName: "query",
+				publicName: "query",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			compact: {
+				classPropertyName: "compact",
+				publicName: "compact",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    @if (logs.first.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (logs.first.error()) { <p class="jc-error">{{ error() }}</p> }
+    @if (logs.first.hasValue()) {
+      @if (rows().length === 0) { <p class="jc-muted">No log records match in this window.</p> }
+      @else {
+        <table class="jc-table jc-logs">
+          <thead><tr><th>Time</th><th>Severity</th>@if (!compact()) { <th>Service</th> }<th>Message</th>@if (!compact()) { <th>Trace</th> }</tr></thead>
+          <tbody>
+            @for (l of rows(); track $index) {
+              <tr>
+                <td class="jc-nowrap">{{ l.timestamp | date: 'MMM d, HH:mm:ss.SSS' }}</td>
+                <td><span class="jc-badge" [class]="severityClass(l.severityNumber)">{{ l.severity || l.severityNumber }}</span></td>
+                @if (!compact()) { <td class="jc-nowrap">{{ l.service }}@if (l.instance) {<div class="jc-muted jc-small">{{ l.instance }}</div>}</td> }
+                <td><pre class="jc-body">{{ l.body }}@if (l.bodyTruncated) {…}</pre></td>
+                @if (!compact()) { <td class="jc-nowrap">
+                  @if (l.traceId) {
+                    <a [routerLink]="['traces', l.traceId] | jcLink" [queryParams]="ctx.keep(l.spanId ? { span: l.spanId } : {})">{{ l.spanId ? 'span' : 'trace' }} ↗</a>
+                  } @else { <span class="jc-muted">—</span> }
+                </td> }
+              </tr>
+            }
+          </tbody>
+        </table>
+        <div class="jc-more">
+          <span class="jc-muted">{{ rows().length }} record{{ rows().length === 1 ? '' : 's' }}{{ logs.hasMore() ? ', newest first' : '' }}</span>
+          @if (logs.hasMore()) {
+            <button mat-button (click)="logs.more()" [disabled]="logs.loadingMore()">{{ logs.loadingMore() ? 'Loading…' : 'Older logs' }}</button>
+          }
+          @if (logs.moreError()) { <span class="jc-error">{{ moreError() }}</span> }
+        </div>
+      }
+    }`,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: MatProgressBarModule
+			},
+			{
+				kind: "component",
+				type: i1.MatProgressBar,
+				selector: "mat-progress-bar",
+				inputs: [
+					"color",
+					"value",
+					"bufferValue",
+					"mode"
+				],
+				outputs: ["animationEnd"],
+				exportAs: ["matProgressBar"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatButtonModule
+			},
+			{
+				kind: "component",
+				type: i2.MatButton,
+				selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+				inputs: ["matButton"],
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "pipe",
+				type: LinkPipe,
+				name: "jcLink"
+			},
+			{
+				kind: "pipe",
+				type: DatePipe,
+				name: "date"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: LogTable,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "jc-log-table",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				LinkPipe,
+				RouterLink,
+				DatePipe,
+				MatProgressBarModule,
+				MatButtonModule
+			],
+			template: `
+    @if (logs.first.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (logs.first.error()) { <p class="jc-error">{{ error() }}</p> }
+    @if (logs.first.hasValue()) {
+      @if (rows().length === 0) { <p class="jc-muted">No log records match in this window.</p> }
+      @else {
+        <table class="jc-table jc-logs">
+          <thead><tr><th>Time</th><th>Severity</th>@if (!compact()) { <th>Service</th> }<th>Message</th>@if (!compact()) { <th>Trace</th> }</tr></thead>
+          <tbody>
+            @for (l of rows(); track $index) {
+              <tr>
+                <td class="jc-nowrap">{{ l.timestamp | date: 'MMM d, HH:mm:ss.SSS' }}</td>
+                <td><span class="jc-badge" [class]="severityClass(l.severityNumber)">{{ l.severity || l.severityNumber }}</span></td>
+                @if (!compact()) { <td class="jc-nowrap">{{ l.service }}@if (l.instance) {<div class="jc-muted jc-small">{{ l.instance }}</div>}</td> }
+                <td><pre class="jc-body">{{ l.body }}@if (l.bodyTruncated) {…}</pre></td>
+                @if (!compact()) { <td class="jc-nowrap">
+                  @if (l.traceId) {
+                    <a [routerLink]="['traces', l.traceId] | jcLink" [queryParams]="ctx.keep(l.spanId ? { span: l.spanId } : {})">{{ l.spanId ? 'span' : 'trace' }} ↗</a>
+                  } @else { <span class="jc-muted">—</span> }
+                </td> }
+              </tr>
+            }
+          </tbody>
+        </table>
+        <div class="jc-more">
+          <span class="jc-muted">{{ rows().length }} record{{ rows().length === 1 ? '' : 's' }}{{ logs.hasMore() ? ', newest first' : '' }}</span>
+          @if (logs.hasMore()) {
+            <button mat-button (click)="logs.more()" [disabled]="logs.loadingMore()">{{ logs.loadingMore() ? 'Loading…' : 'Older logs' }}</button>
+          }
+          @if (logs.moreError()) { <span class="jc-error">{{ moreError() }}</span> }
+        </div>
+      }
+    }`
+		}]
+	}],
+	propDecorators: {
+		query: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "query",
+				required: false
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}]
+	}
+});
+var MetricExplorer = class MetricExplorer {
+	ctx = inject(ContextService);
+	api = inject(ApiService);
+	scope = input({}, ...ngDevMode ? [{ debugName: "scope" }] : /* istanbul ignore next */ []);
+	initial = input(null, ...ngDevMode ? [{ debugName: "initial" }] : /* istanbul ignore next */ []);
+	metrics = rxResource({
+		params: () => ({
+			scope: this.scope(),
+			env: this.ctx.environment(),
+			range: this.ctx.range(),
+			abs: this.ctx.absolute()
+		}),
+		stream: ({ params }) => this.api.metrics({
+			environment: params.env,
+			...this.ctx.window(),
+			...params.scope
+		})
+	});
+	names = computed(() => this.metrics.value()?.items ?? [], ...ngDevMode ? [{ debugName: "names" }] : /* istanbul ignore next */ []);
+	selected = linkedSignal(() => {
+		const names = this.names();
+		return names.find((m) => m.name === this.initial())?.name ?? names[0]?.name ?? null;
+	}, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	series = rxResource({
+		params: () => this.selected() ? {
+			name: this.selected(),
+			scope: this.scope(),
+			env: this.ctx.environment(),
+			range: this.ctx.range(),
+			abs: this.ctx.absolute()
+		} : void 0,
+		stream: ({ params }) => {
+			this.window = this.ctx.window();
+			return this.api.series({
+				name: params.name,
+				environment: params.env,
+				...this.window,
+				...params.scope
+			});
+		}
+	});
+	window = {
+		from: "",
+		to: ""
+	};
+	points = computed(() => {
+		const s = this.series.value();
+		return s ? withGaps(s.points, this.window.from, this.window.to, s.stepSeconds) : [];
+	}, ...ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []);
+	title = computed(() => {
+		const s = this.series.value();
+		if (!s) return "";
+		const what = s.aggregation === "rate" ? "rate per second" : "average";
+		return `${s.name} — ${what}${s.unit ? ` (${s.unit}${s.aggregation === "rate" ? "/s" : ""})` : ""}`;
+	}, ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	metricsError = computed(() => problemText(this.metrics.error()), ...ngDevMode ? [{ debugName: "metricsError" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: MetricExplorer,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: MetricExplorer,
+		isStandalone: true,
+		selector: "jc-metric-explorer",
+		inputs: {
+			scope: {
+				classPropertyName: "scope",
+				publicName: "scope",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			initial: {
+				classPropertyName: "initial",
+				publicName: "initial",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    @if (metrics.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (metrics.error()) { <p class="jc-error">{{ metricsError() }}</p> }
+    @if (metrics.hasValue()) {
+      @if (names().length === 0) { <p class="jc-muted">No metrics reported in this window.</p> }
+      @else {
+        <mat-form-field subscriptSizing="dynamic" class="jc-field-wide">
+          <mat-label>Metric</mat-label>
+          <mat-select [value]="selected()" (valueChange)="selected.set($event)">
+            @for (m of names(); track m.name) { <mat-option [value]="m.name">{{ m.name }} <span class="jc-muted">({{ m.type }}{{ m.unit ? ', ' + m.unit : '' }})</span></mat-option> }
+          </mat-select>
+        </mat-form-field>
+        @if (series.hasValue()) {
+          <jc-chart [title]="title()" [series]="[{ name: series.value().name, points: points() }]" />
+        }
+      }
+    }`,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "ngmodule",
+				type: MatSelectModule
+			},
+			{
+				kind: "component",
+				type: i2$1.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i2$1.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "component",
+				type: i2$1.MatSelect,
+				selector: "mat-select",
+				inputs: [
+					"aria-describedby",
+					"panelClass",
+					"disabled",
+					"disableRipple",
+					"tabIndex",
+					"hideSingleSelectionIndicator",
+					"placeholder",
+					"required",
+					"multiple",
+					"disableOptionCentering",
+					"compareWith",
+					"value",
+					"aria-label",
+					"aria-labelledby",
+					"errorStateMatcher",
+					"typeaheadDebounceInterval",
+					"sortComparator",
+					"id",
+					"panelWidth",
+					"canSelectNullableOptions"
+				],
+				outputs: [
+					"openedChange",
+					"opened",
+					"closed",
+					"selectionChange",
+					"valueChange"
+				],
+				exportAs: ["matSelect"]
+			},
+			{
+				kind: "component",
+				type: i2$1.MatOption,
+				selector: "mat-option",
+				inputs: [
+					"value",
+					"id",
+					"disabled"
+				],
+				outputs: ["onSelectionChange"],
+				exportAs: ["matOption"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatProgressBarModule
+			},
+			{
+				kind: "component",
+				type: i1.MatProgressBar,
+				selector: "mat-progress-bar",
+				inputs: [
+					"color",
+					"value",
+					"bufferValue",
+					"mode"
+				],
+				outputs: ["animationEnd"],
+				exportAs: ["matProgressBar"]
+			},
+			{
+				kind: "component",
+				type: Chart,
+				selector: "jc-chart",
+				inputs: [
+					"title",
+					"series",
+					"format"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: MetricExplorer,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "jc-metric-explorer",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				FormsModule,
+				MatSelectModule,
+				MatProgressBarModule,
+				Chart
+			],
+			template: `
+    @if (metrics.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (metrics.error()) { <p class="jc-error">{{ metricsError() }}</p> }
+    @if (metrics.hasValue()) {
+      @if (names().length === 0) { <p class="jc-muted">No metrics reported in this window.</p> }
+      @else {
+        <mat-form-field subscriptSizing="dynamic" class="jc-field-wide">
+          <mat-label>Metric</mat-label>
+          <mat-select [value]="selected()" (valueChange)="selected.set($event)">
+            @for (m of names(); track m.name) { <mat-option [value]="m.name">{{ m.name }} <span class="jc-muted">({{ m.type }}{{ m.unit ? ', ' + m.unit : '' }})</span></mat-option> }
+          </mat-select>
+        </mat-form-field>
+        @if (series.hasValue()) {
+          <jc-chart [title]="title()" [series]="[{ name: series.value().name, points: points() }]" />
+        }
+      }
+    }`
+		}]
+	}],
+	propDecorators: {
+		scope: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scope",
+				required: false
+			}]
+		}],
+		initial: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "initial",
+				required: false
+			}]
+		}]
+	}
+});
+var ServiceStatsCharts = class ServiceStatsCharts {
+	ctx = inject(ContextService);
+	api = inject(ApiService);
+	query = input.required(...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	window = {
+		from: "",
+		to: ""
+	};
+	percent = (v) => `${Math.round(v * 1e3) / 10} %`;
+	ms = (v) => `${Math.round(v)} ms`;
+	stats = rxResource({
+		params: () => ({
+			query: this.query(),
+			env: this.ctx.environment(),
+			range: this.ctx.range(),
+			abs: this.ctx.absolute()
+		}),
+		stream: ({ params }) => {
+			this.window = this.ctx.window();
+			return this.api.serviceStats({
+				environment: params.env,
+				...this.window,
+				...params.query
+			});
+		}
+	});
+	pick(field) {
+		const s = this.stats.value();
+		return s ? withGaps(s.points.map((p) => ({
+			at: p.at,
+			value: p[field]
+		})), this.window.from, this.window.to, s.stepSeconds) : [];
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ServiceStatsCharts,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: ServiceStatsCharts,
+		isStandalone: true,
+		selector: "jc-service-stats",
+		inputs: { query: {
+			classPropertyName: "query",
+			publicName: "query",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: `
+    @if (stats.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (stats.hasValue()) {
+      <div class="jc-grid-3">
+        <jc-chart title="Requests per second" [series]="[{ name: 'requests/s', points: pick('requestsPerSecond') }]" />
+        <jc-chart title="Error rate" [series]="[{ name: 'errors', points: pick('errorRate') }]" [format]="percent" />
+        <jc-chart title="p95 latency" [series]="[{ name: 'p95', points: pick('p95Ms') }]" [format]="ms" />
+      </div>
+    }`,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: Chart,
+				selector: "jc-chart",
+				inputs: [
+					"title",
+					"series",
+					"format"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: MatProgressBarModule
+			},
+			{
+				kind: "component",
+				type: i1.MatProgressBar,
+				selector: "mat-progress-bar",
+				inputs: [
+					"color",
+					"value",
+					"bufferValue",
+					"mode"
+				],
+				outputs: ["animationEnd"],
+				exportAs: ["matProgressBar"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ServiceStatsCharts,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "jc-service-stats",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [Chart, MatProgressBarModule],
+			template: `
+    @if (stats.isLoading()) { <mat-progress-bar mode="indeterminate" /> }
+    @if (stats.hasValue()) {
+      <div class="jc-grid-3">
+        <jc-chart title="Requests per second" [series]="[{ name: 'requests/s', points: pick('requestsPerSecond') }]" />
+        <jc-chart title="Error rate" [series]="[{ name: 'errors', points: pick('errorRate') }]" [format]="percent" />
+        <jc-chart title="p95 latency" [series]="[{ name: 'p95', points: pick('p95Ms') }]" [format]="ms" />
+      </div>
+    }`
+		}]
+	}],
+	propDecorators: { query: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "query",
+			required: true
+		}]
+	}] }
+});
+export { plainTraceId as _, problemText as a, ConfidenceBadge as c, KeyValueTable as d, AgoPipe as f, formatDuration as g, ReasonPipe as h, TraceTable as i, ContextBar as l, PercentPipe as m, MetricExplorer as n, cursorList as o, DurationPipe as p, ServiceStatsCharts as r, screenPages as s, LogTable as t, HealthBadge as u, preciseTime as v };
+
+//# sourceMappingURL=juice-js-observability-telemetry-VA4_3nzr.mjs.map