@parhelia/alpaca 0.4.12784 → 0.4.12796

package/dist/index.d.ts

@@ -1,3 +1,14 @@
 import { EditorConfiguration } from "@parhelia/core";
+export declare const ALPACA_TRACING_WORKSPACE_ID = "alpaca-tracing";
+export declare const ALPACA_TRACE_SOURCES_SIDEBAR_ID = "alpaca-trace-sources";
+/**
+ * Registers the Alpaca Tracing workspace (administrators only, hidden unless the server advertises the
+ * "alpaca" module). Safe to call from any host app: it adds nothing else.
+ */
+export declare function configureAlpacaTracing(configuration: EditorConfiguration): EditorConfiguration;
 export declare function configureAlpaca(configuration: EditorConfiguration): EditorConfiguration;
+export { TracingWorkspace } from "./tracing/components/TracingWorkspace";
+export { TracingTitlebar } from "./tracing/components/TracingTitlebar";
+export { TraceSourcesSidebar } from "./tracing/components/TraceSourcesSidebar";
+export type * from "./tracing/types";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,mBAAmB,EAIpB,MAAM,gBAAgB,CAAC;AAwDxB,wBAAgB,eAAe,CAAC,aAAa,EAAE,mBAAmB,uBA6BjE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,mBAAmB,EAKpB,MAAM,gBAAgB,CAAC;AA4ExB,eAAO,MAAM,2BAA2B,mBAAmB,CAAC;AAC5D,eAAO,MAAM,+BAA+B,yBAAyB,CAAC;AAkCtE;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,aAAa,EAAE,mBAAmB,uBAoBxE;AAED,wBAAgB,eAAe,CAAC,aAAa,EAAE,mBAAmB,uBA6BjE;AAED,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,mBAAmB,iBAAiB,CAAC"}

package/dist/index.js

@@ -1,13 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { lazy, Suspense } from "react";
-import { PanelsTopLeft } from "lucide-react";
+import { Activity, PanelsTopLeft, Waypoints } from "lucide-react";
 import { GraphQLIcon, JsonIcon, } from "@parhelia/core";
 import { Layout } from "./Layout";
 import { alpacaComponentCommandProvider } from "./componentCommands";
+import { TracingTitlebar } from "./tracing/components/TracingTitlebar";
+import { TraceSourcesSidebar } from "./tracing/components/TraceSourcesSidebar";
 const GraphQL = lazy(() => import("./GraphQL").then((module) => ({ default: module.GraphQL })));
 function LazyGraphQLPanel() {
     return (_jsx(Suspense, { fallback: _jsx("div", { className: "p-4 text-sm text-muted-foreground", children: "Loading GraphQL editor..." }), children: _jsx(GraphQL, {}) }));
 }
+const TracingWorkspaceComponent = lazy(() => import("./tracing/components/TracingWorkspace").then((module) => ({
+    default: module.TracingWorkspace,
+})));
+function LazyTracingWorkspace() {
+    return (_jsx(Suspense, { fallback: _jsx("div", { className: "p-4 text-sm text-muted-foreground", children: "Loading tracing\u2026" }), children: _jsx(TracingWorkspaceComponent, {}) }));
+}
 const layoutDebugSidebar = {
     id: "layout",
     title: "Layout",
@@ -40,6 +48,58 @@ const graphqlSidebar = {
         },
     ],
 };
+export const ALPACA_TRACING_WORKSPACE_ID = "alpaca-tracing";
+export const ALPACA_TRACE_SOURCES_SIDEBAR_ID = "alpaca-trace-sources";
+const traceSourcesSidebar = {
+    id: ALPACA_TRACE_SOURCES_SIDEBAR_ID,
+    title: "Trace sources",
+    icon: _jsx(Waypoints, { strokeWidth: 1 }),
+    position: "left",
+    sortOrder: 10,
+    defaultWidth: 300,
+    requiresModule: "alpaca",
+    requiresAdministrator: true,
+    panels: [
+        {
+            name: "alpaca-trace-sources",
+            title: "Sources",
+            content: _jsx(TraceSourcesSidebar, {}),
+            initialSize: 100,
+        },
+    ],
+};
+const tracingWorkspace = {
+    id: ALPACA_TRACING_WORKSPACE_ID,
+    title: "Tracing",
+    icon: _jsx(Activity, { strokeWidth: 1 }),
+    component: _jsx(LazyTracingWorkspace, {}),
+    titlebar: _jsx(TracingTitlebar, {}),
+    supportsSidebars: true,
+    defaultSidebars: [ALPACA_TRACE_SOURCES_SIDEBAR_ID],
+    sortOrder: 35,
+    requiresModule: "alpaca",
+    requiresAdministrator: true,
+};
+/**
+ * Registers the Alpaca Tracing workspace (administrators only, hidden unless the server advertises the
+ * "alpaca" module). Safe to call from any host app: it adds nothing else.
+ */
+export function configureAlpacaTracing(configuration) {
+    const workspaces = configuration.editor?.workspaces || [];
+    const sidebars = configuration.editor?.sidebars || [];
+    const nextWorkspaces = workspaces.some((w) => w.id === tracingWorkspace.id)
+        ? workspaces
+        : [...workspaces, tracingWorkspace];
+    const nextSidebars = sidebars.some((s) => s.id === traceSourcesSidebar.id)
+        ? sidebars
+        : [...sidebars, traceSourcesSidebar];
+    configuration.editor = {
+        ...configuration.editor,
+        workspaces: nextWorkspaces,
+        sidebars: nextSidebars,
+    };
+    return configuration;
+}
 export function configureAlpaca(configuration) {
     const sidebars = (configuration.editor?.sidebars || []).filter((s) => s.id !== "debug");
     const hasLayoutDebugSidebar = sidebars.some((s) => s.id === layoutDebugSidebar.id);
@@ -59,5 +119,8 @@ export function configureAlpaca(configuration) {
             providers: [...componentCommandProviders, alpacaComponentCommandProvider],
         };
     }
-    return configuration;
+    return configureAlpacaTracing(configuration);
 }
+export { TracingWorkspace } from "./tracing/components/TracingWorkspace";
+export { TracingTitlebar } from "./tracing/components/TracingTitlebar";
+export { TraceSourcesSidebar } from "./tracing/components/TraceSourcesSidebar";

package/dist/tracing/components/CaptureCompleteness.d.ts

@@ -0,0 +1,6 @@
+import type { StoryRow, TraceSource } from "../types";
+export declare function CaptureCompleteness({ source, story }: {
+    source: TraceSource | null;
+    story?: StoryRow;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=CaptureCompleteness.d.ts.map

package/dist/tracing/components/CaptureCompleteness.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaptureCompleteness.d.ts","sourceRoot":"","sources":["../../../src/tracing/components/CaptureCompleteness.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEtD,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE;IAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,QAAQ,CAAA;CAAE,sCAwBtG"}

package/dist/tracing/components/CaptureCompleteness.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CaptureCompleteness({ source, story }) {
+    if (source?.kind !== "capture" && !source?.handoffPending)
+        return null;
+    const prior = story?.evictedBeforeCapture;
+    const lost = story?.lostDuringHandoff;
+    const notes = [
+        source.handoffPending ? `Stopping… waiting for ${source.writersInFlight ?? 0} writers` : null,
+        source.closePending ? "Closing capture… waiting for its last append" : null,
+        !source.finalized && !source.handoffPending ? `Finalizing… (${Math.ceil(source.finalizesInSeconds ?? 0)} s)` : null,
+        source.handoffIncomplete ? "Handoff incomplete: a writer exceeded the wait limit" : null,
+        source.releaseDeferred ? "Live capture data is still reserved until writers release it" : null,
+        source.truncated ? (source.droppedEntries || source.droppedStories
+            ? `Capture truncated: ${source.droppedEntries ?? 0} entries and ${source.droppedStories ?? 0} stories dropped`
+            : "Capture truncated: some text or metadata exceeded the configured limits") : null,
+        story?.incomplete ? "Request was still running at finalization" : null,
+        story?.endedAfterStop ? "Request ended after recording stopped" : null,
+        prior && (prior.logs || prior.timers) ? `Evicted before capture: ${prior.logs} logs, ${prior.timers} timers` : null,
+        lost && (lost.logs || lost.timers) ? `Lost during handoff: ${lost.logs} logs, ${lost.timers} timers` : null,
+        source.lossUncertain || story?.lossUncertain ? "Some eviction notifications could not be accounted for; loss is uncertain" : null,
+        source.lossIsUpperBound || story?.lossIsUpperBound ? "Reported loss is an upper bound" : null,
+    ].filter(Boolean);
+    if (!notes.length)
+        return null;
+    return _jsx("div", { className: "border-b border-border-default bg-feedback-orange-light px-4 py-2 text-xs text-neutral-grey-100", role: "status", children: notes.join(" · ") });
+}

package/dist/tracing/components/CaptureFilterDialog.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Capture filter of one source as a modal: it is configuration for future stories, not a view of data,
+ * so it does not live next to logs and timers. Opened from the gear above the stories list or a source's menu.
+ */
+export declare function CaptureFilterDialog(): import("react").JSX.Element;
+//# sourceMappingURL=CaptureFilterDialog.d.ts.map

package/dist/tracing/components/CaptureFilterDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaptureFilterDialog.d.ts","sourceRoot":"","sources":["../../../src/tracing/components/CaptureFilterDialog.tsx"],"names":[],"mappings":"AAMA;;;GAGG;AACH,wBAAgB,mBAAmB,gCAgClC"}

package/dist/tracing/components/CaptureFilterDialog.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogDescription, StyledDialogTitle } from "@parhelia/core";
+import { sourceKindLabel } from "../format";
+import { traceActions, useTraceStore } from "../traceStore";
+import { CaptureFilterForm } from "./CaptureFilterForm";
+import { KindIcon } from "./shared";
+/**
+ * Capture filter of one source as a modal: it is configuration for future stories, not a view of data,
+ * so it does not live next to logs and timers. Opened from the gear above the stories list or a source's menu.
+ */
+export function CaptureFilterDialog() {
+    const state = useTraceStore();
+    const sourceId = state.captureFilterSourceId;
+    const source = sourceId ? state.status?.sources.find((s) => s.id === sourceId) ?? null : null;
+    const open = !!sourceId;
+    return (_jsx(Dialog, { open: open, onOpenChange: (next) => !next && traceActions.closeCaptureFilter(), children: _jsxs(DialogContent, { className: "flex max-h-[88vh] w-[min(94vw,720px)] max-w-none flex-col gap-0 p-0", "data-testid": "alpaca-trace-capture-filter-dialog", children: [_jsx(StyledDialogTitle, { icon: _jsx(KindIcon, { kind: source?.kind ?? "personal" }), title: "Capture filter", subtitle: source
+                        ? `${sourceKindLabel(source)} · ${source.name} · ${source.kind === "capture" || source.kind === "restored" ? "what this source recorded" : "what this source records from now on"}`
+                        : undefined }), _jsx(DialogDescription, { className: "sr-only", children: "What this source records from now on: log scopes, stack traces, skipped requests, bypassed caches and feature previews." }), source && sourceId ? (_jsx(CaptureFilterForm, { sessionId: sourceId, source: source, onSaved: () => traceActions.closeCaptureFilter() })) : (_jsx("div", { className: "p-6 text-xs text-neutral-grey-50", children: "This source is no longer available." }))] }) }));
+}

package/dist/tracing/components/CaptureFilterForm.d.ts

@@ -0,0 +1,13 @@
+import type { TraceSource } from "../types";
+/**
+ * Body + footer of the capture filter dialog. Three sections: which log scopes are kept, which requests
+ * get a story at all, and the per-session overrides (bypassed caches, feature previews).
+ * Every list renders its "empty" meaning explicitly, so an empty box never reads as "nothing configured".
+ */
+export declare function CaptureFilterForm({ sessionId, source, onSaved, }: {
+    sessionId: string;
+    source: TraceSource;
+    /** Called after a successful save (the dialog closes itself). */
+    onSaved?: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=CaptureFilterForm.d.ts.map

package/dist/tracing/components/CaptureFilterForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaptureFilterForm.d.ts","sourceRoot":"","sources":["../../../src/tracing/components/CaptureFilterForm.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAA4B,WAAW,EAAE,MAAM,UAAU,CAAC;AAGtE;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,MAAM,EACN,OAAO,GACR,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,+BAyRA"}

package/dist/tracing/components/CaptureFilterForm.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTraceSnapshot, useTraceStore } from "../traceStore";
+import { useEffect, useMemo, useState } from "react";
+import { Alert, AlertDescription, Button, Checkbox, DialogFooter, Input, Label, Popover, PopoverContent, PopoverTrigger, Switch, } from "@parhelia/core";
+import { ChevronDown, Plus, X } from "lucide-react";
+import { TracingApiError, forTracingInstance } from "../tracingService";
+import { EmptyHint, InlineError, cls } from "./shared";
+/**
+ * Body + footer of the capture filter dialog. Three sections: which log scopes are kept, which requests
+ * get a story at all, and the per-session overrides (bypassed caches, feature previews).
+ * Every list renders its "empty" meaning explicitly, so an empty box never reads as "nothing configured".
+ */
+export function CaptureFilterForm({ sessionId, source, onSaved, }) {
+    const requestContext = useTraceStore();
+    const tracingService = forTracingInstance(requestContext.selectedInstance, requestContext.generation, requestContext.status?.globalRecording?.recordingId);
+    const [filter, setFilter] = useState(null);
+    const [saved, setSaved] = useState(null);
+    const [caches, setCaches] = useState([]);
+    const [features, setFeatures] = useState([]);
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    useEffect(() => {
+        let cancelled = false;
+        setFilter(null);
+        setSaved(null);
+        tracingService
+            .filters(sessionId)
+            .then((result) => {
+            if (cancelled)
+                return;
+            setFilter(result.filter);
+            setSaved(result.filter);
+            setError(null);
+        })
+            .catch((e) => {
+            if (cancelled)
+                return;
+            setError(e instanceof TracingApiError && e.notFound
+                ? "Not in memory anymore."
+                : e instanceof Error
+                    ? e.message
+                    : String(e));
+        });
+        tracingService
+            .caches()
+            .then((r) => !cancelled && setCaches(r.caches))
+            .catch(() => undefined);
+        tracingService
+            .features()
+            .then((r) => !cancelled && setFeatures(r.features.map((f) => f.name)))
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [sessionId, requestContext.selectedInstance, requestContext.epoch]);
+    const dirty = useMemo(() => JSON.stringify(filter) !== JSON.stringify(saved), [filter, saved]);
+    const readOnly = source.kind === "restored" || source.kind === "capture";
+    const save = async () => {
+        if (!filter || readOnly)
+            return;
+        const epoch = requestContext.epoch;
+        setSaving(true);
+        try {
+            const result = await tracingService.saveFilters(sessionId, filter);
+            if (getTraceSnapshot().epoch !== epoch)
+                return;
+            setFilter(result.filter);
+            setSaved(result.filter);
+            setError(null);
+            onSaved?.();
+        }
+        catch (e) {
+            if (getTraceSnapshot().epoch !== epoch)
+                return;
+            setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            if (getTraceSnapshot().epoch === epoch)
+                setSaving(false);
+        }
+    };
+    if (error && !filter)
+        return (_jsx("div", { className: "p-6", children: _jsx(InlineError, { message: error }) }));
+    if (!filter)
+        return _jsx(EmptyHint, { title: "Loading\u2026" });
+    const update = (patch) => setFilter((current) => (current ? { ...current, ...patch } : current));
+    const cacheOptions = caches.map((c) => ({
+        value: c.name,
+        label: c.name,
+        group: c.cacheType,
+    }));
+    const featureOptions = features.map((f) => ({ value: f, label: f }));
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", "data-testid": "alpaca-trace-capture-filter", children: [_jsxs("div", { className: "min-h-0 flex-1 overflow-auto px-6 py-5", children: [readOnly && (_jsx(Alert, { variant: "info", className: "mb-5", children: _jsx(AlertDescription, { children: source.kind === "capture"
+                                ? "This is a finished capture: a global recording window that has ended. Its stories are frozen and no new ones are added, so the filter below only documents what was recorded and cannot be changed."
+                                : "This source was restored from trace storage and is read-only. The filter below documents what was recorded and cannot be changed." }) })), _jsxs("div", { className: "flex flex-col gap-7", children: [_jsx(Section, { title: "Log scopes", description: "Scopes are dotted prefixes; a prefix also covers everything below it, so Alpaca.Caching includes Alpaca.Caching.Html.", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(TokenField, { label: "Include", hint: "Only entries from these scopes are recorded.", emptyLabel: "Everything is recorded", addLabel: "Add a scope prefix", values: filter.includeScopes, onChange: (v) => update({ includeScopes: v }), disabled: readOnly, testId: "alpaca-trace-filter-include" }), _jsx(TokenField, { label: "Exclude", hint: "Entries from these scopes are dropped, even when included above.", emptyLabel: "Nothing is excluded", addLabel: "Add a scope prefix", values: filter.excludeScopes, onChange: (v) => update({ excludeScopes: v }), disabled: readOnly, testId: "alpaca-trace-filter-exclude" }), _jsx(TokenField, { label: "Keep Trace level", hint: "Trace-level entries are normally dropped. Keep them for these scopes.", emptyLabel: "Trace entries are dropped", addLabel: "Add a scope prefix", values: filter.includeScopesTraceLevel, onChange: (v) => update({ includeScopesTraceLevel: v }), disabled: readOnly, testId: "alpaca-trace-filter-trace-level" }), _jsx(TokenField, { label: "Capture stack traces", hint: "Every entry in these scopes records the full call stack. Expensive; use it on narrow scopes.", emptyLabel: "No stack traces", addLabel: "Add a scope prefix", values: filter.stackTraceScopes, onChange: (v) => update({ stackTraceScopes: v }), disabled: readOnly, testId: "alpaca-trace-filter-stack-traces", footer: _jsxs("label", { className: cls("flex items-center gap-2 text-2xs text-neutral-grey-100", filter.stackTraceScopes.length === 0 &&
+                                                    "text-neutral-grey-50"), title: filter.stackTraceScopes.length === 0
+                                                    ? "Add a stack trace scope first; counters are only traced inside those scopes."
+                                                    : undefined, children: [_jsx(Switch, { checked: filter.stackTraceForCounters, disabled: readOnly || filter.stackTraceScopes.length === 0, onCheckedChange: (v) => update({ stackTraceForCounters: v }), "data-testid": "alpaca-trace-filter-counter-stacks" }), "Also record a stack for every counter increment in these scopes"] }) })] }) }), _jsx(Section, { title: "Stories", description: "A story is one request or background job with its own logs, timers and counters.", children: _jsx(TokenField, { label: "Skip request paths", hint: "Requests whose path starts with one of these prefixes never get a story.", emptyLabel: "Every request gets a story", addLabel: "Add a path prefix, e.g. /sitecore/shell/", values: filter.excludeStories, onChange: (v) => update({ excludeStories: v }), disabled: readOnly, testId: "alpaca-trace-filter-exclude-stories" }) }), _jsx(Section, { title: "Overrides for this source", description: "Only requests recorded by this source are affected. Nothing changes for other users or requests.", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(PickerField, { label: "Bypassed caches", hint: "Requests behave as if these caches were empty, without clearing them for everyone.", emptyLabel: "All caches active", addLabel: "Add cache", options: cacheOptions, values: filter.disabledCaches, onChange: (v) => update({ disabledCaches: v }), disabled: readOnly, action: caches.length > 0 ? (_jsx(ClearCacheButton, { caches: caches, onCleared: setCaches })) : undefined, testId: "alpaca-trace-filter-caches" }), _jsx(PickerField, { label: "Feature previews", hint: "Alpaca features treated as enabled for these requests.", emptyLabel: "No previews", addLabel: "Add feature", options: featureOptions, values: filter.enabledFeatures, onChange: (v) => update({ enabledFeatures: v }), disabled: readOnly, noOptionsHint: "No Alpaca features are registered on this instance.", testId: "alpaca-trace-filter-features" })] }) })] })] }), _jsxs(DialogFooter, { className: "items-center gap-3 border-t border-border-default bg-neutral-grey-5 px-6 py-3 sm:justify-between", children: [_jsx("div", { className: "min-w-0 flex-1 text-2xs text-neutral-grey-50", children: error ? (_jsx(InlineError, { message: error })) : readOnly ? (_jsx("span", { "data-testid": "alpaca-trace-filter-status", children: "Read-only: this source no longer records, so its filter cannot be changed." })) : dirty ? (_jsx("span", { "data-testid": "alpaca-trace-filter-status", children: "Unsaved changes. Saving applies to stories started from now on; existing stories keep the filter they were recorded with." })) : (_jsx("span", { "data-testid": "alpaca-trace-filter-status", children: "Changes apply to stories started after saving. Existing stories keep the filter they were recorded with." })) }), !readOnly && (_jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", disabled: !dirty || saving, onClick: () => setFilter(saved), "data-testid": "alpaca-trace-filter-discard", children: "Discard changes" }), _jsx(Button, { size: "sm", disabled: !dirty || saving || readOnly, onClick: () => void save(), "data-testid": "alpaca-trace-filter-save", children: saving ? "Saving…" : "Save capture filter" })] }))] })] }));
+}
+function Section({ title, description, children, }) {
+    return (_jsxs("section", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("h3", { className: "text-sm font-medium text-neutral-grey-100", children: title }), description && (_jsx("p", { className: "text-2xs leading-snug text-neutral-grey-50", children: description }))] }), children] }));
+}
+function FieldFrame({ label, hint, count, action, footer, children, }) {
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { className: "text-neutral-grey-100", children: label }), count > 0 && (_jsx("span", { className: "text-2xs tabular-nums text-neutral-grey-50", children: count })), action && _jsx("span", { className: "ml-auto", children: action })] }), _jsx("p", { className: "text-2xs leading-snug text-neutral-grey-50", children: hint }), children, footer] }));
+}
+const boxClass = "flex min-h-9 flex-wrap items-center gap-1 rounded-[4px] border border-neutral-grey-10 bg-neutral-grey-5 px-1.5 py-1 transition-colors";
+function Chip({ value, onRemove, disabled, }) {
+    return (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded border border-border-default bg-background px-1.5 py-0.5 font-mono text-2xs text-neutral-grey-100", title: value, "data-testid": "alpaca-trace-filter-chip", children: [_jsx("span", { className: "truncate", children: value }), !disabled && (_jsx("button", { type: "button", "aria-label": `Remove ${value}`, onClick: onRemove, className: "rounded text-neutral-grey-50 hover:text-feedback-red focus-visible:outline focus-visible:outline-neutral-grey-100", children: _jsx(X, { className: "h-3 w-3", strokeWidth: 1.5 }) }))] }));
+}
+function TokenField({ label, hint, emptyLabel, addLabel, values, onChange, disabled, footer, testId, }) {
+    const [draft, setDraft] = useState("");
+    const addMany = (raw) => {
+        const incoming = raw
+            .split(/[,\s]+/)
+            .map((v) => v.trim())
+            .filter(Boolean);
+        if (incoming.length === 0)
+            return;
+        const next = [...values];
+        for (const value of incoming)
+            if (!next.includes(value))
+                next.push(value);
+        if (next.length !== values.length)
+            onChange(next);
+        setDraft("");
+    };
+    return (_jsx(FieldFrame, { label: label, hint: hint, count: values.length, footer: footer, children: _jsxs("div", { className: cls(boxClass, !disabled &&
+                "focus-within:border-neutral-grey-100 focus-within:bg-background", disabled && "opacity-70"), "data-testid": testId, children: [values.map((value) => (_jsx(Chip, { value: value, disabled: disabled, onRemove: () => onChange(values.filter((v) => v !== value)) }, value))), disabled && values.length === 0 && (_jsx("span", { className: "px-1 text-2xs text-neutral-grey-50", children: emptyLabel })), !disabled && (_jsx("input", { value: draft, disabled: disabled, onChange: (e) => setDraft(e.target.value), onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === ",") {
+                            e.preventDefault();
+                            addMany(draft);
+                        }
+                        else if (e.key === "Backspace" &&
+                            draft === "" &&
+                            values.length > 0) {
+                            onChange(values.slice(0, -1));
+                        }
+                    }, onBlur: () => addMany(draft), onPaste: (e) => {
+                        const text = e.clipboardData.getData("text");
+                        if (/[,\s]/.test(text.trim())) {
+                            e.preventDefault();
+                            addMany(draft + text);
+                        }
+                    }, placeholder: values.length === 0
+                        ? `${emptyLabel} · ${addLabel.toLowerCase()}…`
+                        : `${addLabel}…`, "aria-label": `${label}: ${addLabel}`, className: "h-6 min-w-[160px] flex-1 bg-transparent px-1 font-mono text-2xs text-neutral-grey-100 outline-none placeholder:font-sans placeholder:text-neutral-grey-50 disabled:cursor-not-allowed", "data-testid": testId ? `${testId}-input` : undefined }))] }) }));
+}
+function PickerField({ label, hint, emptyLabel, addLabel, options, values, onChange, disabled, action, noOptionsHint, testId, }) {
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState("");
+    const filtered = options.filter((o) => !search || o.label.toLowerCase().includes(search.toLowerCase()));
+    const grouped = useMemo(() => {
+        const map = new Map();
+        for (const option of filtered) {
+            const key = option.group ?? "";
+            const list = map.get(key) ?? [];
+            list.push(option);
+            map.set(key, list);
+        }
+        return Array.from(map.entries()).sort(([a], [b]) => a.localeCompare(b));
+    }, [filtered]);
+    const noOptions = options.length === 0;
+    return (_jsx(FieldFrame, { label: label, hint: hint, count: values.length, action: action, children: _jsxs("div", { className: cls(boxClass, disabled && "opacity-70"), "data-testid": testId, children: [values.map((value) => (_jsx(Chip, { value: value, disabled: disabled, onRemove: () => onChange(values.filter((v) => v !== value)) }, value))), values.length === 0 && (_jsx("span", { className: "px-1 text-2xs text-neutral-grey-50", children: noOptions && noOptionsHint ? noOptionsHint : emptyLabel })), !disabled && !noOptions && (_jsxs(Popover, { open: open, onOpenChange: (next) => {
+                        setOpen(next);
+                        if (!next)
+                            setSearch("");
+                    }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "xxs", className: "ml-auto gap-1", "data-testid": testId ? `${testId}-add` : undefined, children: [_jsx(Plus, { className: "h-3 w-3", strokeWidth: 1.5 }), addLabel] }) }), _jsxs(PopoverContent, { align: "end", className: "w-80 p-2", children: [_jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Filter\u2026", className: "mb-2 h-7 text-2xs", autoFocus: true }), _jsxs("div", { className: "max-h-64 overflow-auto", children: [filtered.length === 0 && (_jsx("div", { className: "p-2 text-2xs text-neutral-grey-50", children: "No matches." })), grouped.map(([group, items]) => (_jsxs("div", { children: [group && (_jsx("div", { className: "sticky top-0 bg-popover px-1 pt-1.5 pb-0.5 text-2xs font-medium uppercase tracking-wide text-neutral-grey-50", children: group })), items.map((option) => {
+                                                    const checked = values.includes(option.value);
+                                                    return (_jsxs("label", { className: cls("flex cursor-pointer items-center gap-2 rounded px-1 py-0.5 text-2xs hover:bg-neutral-grey-5", checked && "text-neutral-grey-100"), children: [_jsx(Checkbox, { checked: checked, onCheckedChange: (v) => onChange(v === true
+                                                                    ? [...values, option.value]
+                                                                    : values.filter((x) => x !== option.value)) }), _jsx("span", { className: "truncate font-mono", title: option.label, children: option.label })] }, option.value));
+                                                })] }, group || "_")))] }), _jsxs("div", { className: "mt-2 flex items-center justify-between border-t border-border-default pt-2 text-2xs text-neutral-grey-50", children: [_jsxs("span", { children: [values.length, " selected"] }), values.length > 0 && (_jsx("button", { type: "button", className: "hover:text-neutral-grey-100", onClick: () => onChange([]), children: "Clear selection" }))] })] })] }))] }) }));
+}
+function ClearCacheButton({ caches, onCleared, }) {
+    const requestContext = useTraceStore();
+    const tracingService = forTracingInstance(requestContext.selectedInstance, requestContext.generation, requestContext.status?.globalRecording?.recordingId);
+    const [busy, setBusy] = useState(null);
+    const types = Array.from(new Set(caches.map((c) => c.cacheType))).sort();
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "inline-flex items-center gap-0.5 text-2xs text-neutral-grey-50 hover:text-neutral-grey-100", title: "Clear caches for everyone on this instance", "data-testid": "alpaca-trace-clear-cache", children: ["Clear cache now ", _jsx(ChevronDown, { className: "h-3 w-3", strokeWidth: 1.5 })] }) }), _jsxs(PopoverContent, { align: "end", className: "w-64 p-1", children: [_jsx("div", { className: "px-2 pt-1 pb-1.5 text-2xs text-neutral-grey-50", children: "Clears the caches for every user, not only this source." }), _jsx("div", { className: "max-h-64 overflow-auto", children: types.map((type) => (_jsx("button", { type: "button", disabled: busy !== null, className: "block w-full rounded px-2 py-1 text-left text-2xs text-neutral-grey-100 hover:bg-neutral-grey-5 disabled:opacity-60", onClick: async () => {
+                                setBusy(type);
+                                try {
+                                    const result = await tracingService.clearCaches(type);
+                                    if (getTraceSnapshot().epoch === requestContext.epoch)
+                                        onCleared(result.caches);
+                                }
+                                finally {
+                                    setBusy(null);
+                                }
+                            }, children: busy === type ? "Clearing…" : `Clear all ${type} caches` }, type))) })] })] }));
+}

package/dist/tracing/components/CountersTab.d.ts

@@ -0,0 +1,6 @@
+export declare function CountersTab({ sessionId, storyId, available, }: {
+    sessionId: string;
+    storyId: string | null;
+    available: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=CountersTab.d.ts.map

package/dist/tracing/components/CountersTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountersTab.d.ts","sourceRoot":"","sources":["../../../src/tracing/components/CountersTab.tsx"],"names":[],"mappings":"AAOA,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,OAAO,EACP,SAAS,GACV,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;CACpB,+BA6DA"}

package/dist/tracing/components/CountersTab.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTraceStore } from "../traceStore";
+import { useEffect, useMemo, useState } from "react";
+import { SearchInput, SimpleTable } from "@parhelia/core";
+import { TracingApiError, forTracingInstance } from "../tracingService";
+import { EmptyHint, InlineError } from "./shared";
+export function CountersTab({ sessionId, storyId, available, }) {
+    const requestContext = useTraceStore();
+    const tracingService = forTracingInstance(requestContext.selectedInstance, requestContext.generation, requestContext.status?.globalRecording?.recordingId);
+    const [rows, setRows] = useState(null);
+    const [error, setError] = useState(null);
+    const [search, setSearch] = useState("");
+    useEffect(() => {
+        let cancelled = false;
+        setRows(null);
+        tracingService
+            .counters(sessionId, storyId)
+            .then((result) => {
+            if (!cancelled) {
+                setRows(result.rows);
+                setError(null);
+            }
+        })
+            .catch((e) => {
+            if (cancelled)
+                return;
+            setError(e instanceof TracingApiError && e.notFound ? "Not in memory anymore." : e instanceof Error ? e.message : String(e));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [requestContext.selectedInstance, sessionId, storyId]);
+    const filtered = useMemo(() => {
+        const needle = search.trim().toLowerCase();
+        return (rows ?? [])
+            .filter((r) => !needle || r.name.toLowerCase().includes(needle))
+            .sort((a, b) => b.value - a.value || a.name.localeCompare(b.name));
+    }, [rows, search]);
+    if (!available)
+        return _jsx(EmptyHint, { title: "Counters were not persisted for this story" });
+    if (error)
+        return _jsx("div", { className: "p-3", children: _jsx(InlineError, { message: error }) });
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", "data-testid": "alpaca-trace-counters", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border-default px-3 py-2", children: [_jsx(SearchInput, { value: search, onChange: setSearch, placeholder: "Filter counters", size: "sm", className: "flex-1" }), _jsx("span", { className: "text-2xs text-neutral-grey-50", children: storyId ? "this story" : "whole source" })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: rows === null ? (_jsx(EmptyHint, { title: "Loading\u2026" })) : filtered.length === 0 ? (_jsx(EmptyHint, { title: "No counters", children: "Cache hit/miss counters appear here once caches are touched by a traced story." })) : (_jsx(SimpleTable, { items: filtered, rowKey: (r) => r.name, columns: [
+                        { header: "Counter", body: (r) => _jsx("span", { className: "[overflow-wrap:anywhere] font-mono", title: r.name, children: r.name }) },
+                        { header: "Value", align: "right", className: "w-[100px] whitespace-nowrap font-mono", body: (r) => r.value.toLocaleString() },
+                    ] })) })] }));
+}

package/dist/tracing/components/InstanceSwitcher.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Which Sitecore instance's traces are shown. Lives in the Sources sidebar (sources belong to an instance)
+ * and in the source-switcher popover of the stories pane, so it stays reachable when the sidebar is closed.
+ * Rendered without a status guard: switching away from an unreachable instance must always be possible.
+ * Hidden, together with its "Instance" headings in both places, while there is nothing to switch between (hasInstanceChoice).
+ */
+export declare function InstanceSwitcher({ className, showLabel }: {
+    className?: string;
+    showLabel?: boolean;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=InstanceSwitcher.d.ts.map

package/dist/tracing/components/InstanceSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstanceSwitcher.d.ts","sourceRoot":"","sources":["../../../src/tracing/components/InstanceSwitcher.tsx"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,SAAiB,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,sCAiD7G"}

package/dist/tracing/components/InstanceSwitcher.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { hasInstanceChoice, traceActions, useTraceStore } from "../traceStore";
+import { useEffect, useState } from "react";
+import { RefreshCw } from "lucide-react";
+import { formatCountdown } from "../format";
+import { cls } from "./shared";
+/**
+ * Which Sitecore instance's traces are shown. Lives in the Sources sidebar (sources belong to an instance)
+ * and in the source-switcher popover of the stories pane, so it stays reachable when the sidebar is closed.
+ * Rendered without a status guard: switching away from an unreachable instance must always be possible.
+ * Hidden, together with its "Instance" headings in both places, while there is nothing to switch between (hasInstanceChoice).
+ */
+export function InstanceSwitcher({ className, showLabel = false }) {
+    const state = useTraceStore();
+    const [elapsed, setElapsed] = useState(0);
+    const [statusElapsed, setStatusElapsed] = useState(0);
+    useEffect(() => {
+        setStatusElapsed(0);
+        const observedAt = performance.now();
+        const timer = setInterval(() => setStatusElapsed((performance.now() - observedAt) / 1000), 1000);
+        return () => clearInterval(timer);
+    }, [state.status]);
+    useEffect(() => {
+        setElapsed(0);
+        const observedAt = performance.now();
+        const timer = setInterval(() => setElapsed((performance.now() - observedAt) / 1000), 1000);
+        return () => clearInterval(timer);
+    }, [state.instances]);
+    if (!hasInstanceChoice(state))
+        return null;
+    const entries = state.instances.length ? state.instances : [{ name: "local", label: "Local", reachable: true }];
+    return (_jsxs("div", { className: cls("flex min-w-0 shrink-0 items-center gap-2", className), "data-testid": "alpaca-tracing-instance-switcher", children: [showLabel && _jsx("label", { className: "text-xs text-neutral-grey-50", htmlFor: "trace-instance", children: "Instance" }), _jsxs("select", { id: "trace-instance", "aria-label": "Instance", className: "h-7 min-w-0 flex-1 rounded border border-border-default bg-background px-2 text-xs text-neutral-grey-100", value: state.selectedInstance, onChange: event => void traceActions.selectInstance(event.target.value), children: [!entries.some(entry => entry.name === state.selectedInstance) && _jsx("option", { value: state.selectedInstance, children: state.selectedInstance }), entries.map(entry => {
+                        const selected = entry.name === state.selectedInstance && state.status != null;
+                        const recording = selected ? state.status?.globalRecording : "globalRecording" in entry ? entry.globalRecording : undefined;
+                        return _jsxs("option", { value: entry.name, children: [entry.reachable ? "●" : "○", " ", entry.label || entry.name, "kind" in entry && entry.kind ? ` · ${entry.kind}` : "", "version" in entry && entry.version ? ` · ${entry.version}` : "", recording?.enabled ? ` · recording${recording.remainingSeconds != null ? " " + formatCountdown(recording.remainingSeconds - (selected ? statusElapsed : elapsed)) : ""}` : ""] }, entry.name);
+                    })] }), _jsx("button", { type: "button", className: "rounded p-1 text-neutral-grey-50 hover:bg-neutral-grey-10 hover:text-neutral-grey-100", title: "Refresh the instance list", "aria-label": "Refresh the instance list", onClick: () => void traceActions.refreshInstances(true), "data-testid": "alpaca-tracing-instance-refresh", children: _jsx(RefreshCw, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }) })] }));
+}

package/dist/tracing/components/LogMessage.d.ts

@@ -0,0 +1,6 @@
+export declare function LogMessage({ message, truncated, highlight, }: {
+    message: string;
+    truncated?: boolean;
+    highlight?: string | null;
+}): import("react").JSX.Element;
+//# sourceMappingURL=LogMessage.d.ts.map

package/dist/tracing/components/LogMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogMessage.d.ts","sourceRoot":"","sources":["../../../src/tracing/components/LogMessage.tsx"],"names":[],"mappings":"AAMA,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,SAAS,EACT,SAAS,GACV,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,+BA8CA"}

package/dist/tracing/components/LogMessage.js

@@ -0,0 +1,50 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ObjectInspector } from "react-inspector";
+import { CopyButton } from "@parhelia/core";
+import { ChevronDown, ChevronRight, ExternalLink } from "lucide-react";
+import { isLongMessage, parseMessageTags } from "../messageTags";
+export function LogMessage({ message, truncated, highlight, }) {
+    const [expanded, setExpanded] = useState(false);
+    const segments = parseMessageTags(message);
+    const long = isLongMessage(message);
+    const collapsedText = long && !expanded;
+    return (_jsxs("div", { className: "min-w-0 break-words whitespace-pre-wrap font-mono text-2xs leading-relaxed text-neutral-grey-100", children: [_jsx("span", { className: collapsedText ? "line-clamp-3" : undefined, children: segments.map((segment, index) => {
+                    if (segment.type === "link") {
+                        return (_jsxs("a", { href: segment.value, target: "_blank", rel: "noreferrer noopener", className: "inline-flex items-center gap-0.5 text-highlight-100 underline", children: [segment.value, _jsx(ExternalLink, { className: "h-3 w-3", strokeWidth: 1.5 })] }, index));
+                    }
+                    if (segment.type === "json") {
+                        return _jsx(JsonBlock, { raw: segment.value, parsed: segment.parsed }, index);
+                    }
+                    return _jsx(Highlighted, { text: segment.value, highlight: highlight }, index);
+                }) }), (long || truncated) && (_jsxs("div", { className: "mt-0.5 flex items-center gap-2", children: [long && (_jsx("button", { type: "button", className: "text-2xs text-highlight-100 hover:underline", onClick: () => setExpanded((v) => !v), children: expanded ? "less" : "more" })), truncated && _jsx("span", { className: "text-2xs text-neutral-grey-50", children: "message truncated at 16 KB" })] }))] }));
+}
+function Highlighted({ text, highlight }) {
+    if (!highlight)
+        return _jsx(_Fragment, { children: text });
+    const needle = highlight.toLowerCase();
+    const parts = [];
+    let index = 0;
+    const lower = text.toLowerCase();
+    while (index < text.length) {
+        const found = lower.indexOf(needle, index);
+        if (found < 0) {
+            parts.push(text.slice(index));
+            break;
+        }
+        if (found > index)
+            parts.push(text.slice(index, found));
+        parts.push(_jsx("mark", { className: "rounded bg-feedback-orange-light px-0.5 text-neutral-grey-100", children: text.slice(found, found + needle.length) }, found));
+        index = found + needle.length;
+    }
+    return _jsx(_Fragment, { children: parts });
+}
+function JsonBlock({ raw, parsed }) {
+    const [open, setOpen] = useState(false);
+    const summary = parsed && typeof parsed === "object"
+        ? Array.isArray(parsed)
+            ? `array[${parsed.length}]`
+            : `{${Object.keys(parsed).length} keys}`
+        : "json";
+    return (_jsxs("span", { className: "my-0.5 inline-flex max-w-full flex-col rounded border border-border-default bg-neutral-grey-5 align-top", children: [_jsxs("span", { className: "flex items-center gap-1 px-1.5 py-0.5", children: [_jsxs("button", { type: "button", className: "inline-flex items-center gap-1 text-2xs text-neutral-grey-100", onClick: () => setOpen((v) => !v), children: [open ? _jsx(ChevronDown, { className: "h-3 w-3", strokeWidth: 1.5 }) : _jsx(ChevronRight, { className: "h-3 w-3", strokeWidth: 1.5 }), summary] }), _jsx(CopyButton, { textToCopy: raw, iconOnly: true, className: "ml-1" })] }), open && (_jsx("span", { className: "block max-h-64 overflow-auto border-t border-border-default px-1.5 py-1 text-left font-sans", children: parsed !== undefined ? (_jsx(ObjectInspector, { data: parsed, expandLevel: 1 })) : (_jsx("pre", { className: "whitespace-pre-wrap text-2xs", children: raw })) }))] }));
+}

package/dist/tracing/components/LogsTab.d.ts

@@ -0,0 +1,12 @@
+import { type StoryRow } from "../types";
+/**
+ * Log entries of one story, or — with `story === null` — of the whole source merged by sequence
+ * (then a Story column links each row to its story).
+ */
+export declare function LogsTab({ sessionId, story, jumpMs, onJumpConsumed, }: {
+    sessionId: string;
+    story: StoryRow | null;
+    jumpMs: number | null;
+    onJumpConsumed: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=LogsTab.d.ts.map

package/dist/tracing/components/LogsTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogsTab.d.ts","sourceRoot":"","sources":["../../../src/tracing/components/LogsTab.tsx"],"names":[],"mappings":"AAKA,OAAO,EAKL,KAAK,QAAQ,EACd,MAAM,UAAU,CAAC;AAalB;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,KAAK,EACL,MAAM,EACN,cAAc,GACf,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,+BA+NA"}