@parhelia/alpaca 0.3.12831 → 0.3.12833

package/dist/tracing/components/LogsTab.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button, CopyButton, SearchInput, Select } from "@parhelia/core";
+import { formatRelativeMs, formatTime } from "../format";
+import { TracingApiError, forTracingInstance } from "../tracingService";
+import { traceActions, useTraceStore } from "../traceStore";
+import { LOG_LEVELS, } from "../types";
+import { LogMessage } from "./LogMessage";
+import { EmptyHint, InlineError, LevelBadge, cls } from "./shared";
+import { StackTracePopover } from "./StackTracePopover";
+const PAGE = 500;
+/**
+ * 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 function LogsTab({ sessionId, story, jumpMs, onJumpConsumed, }) {
+    const requestContext = useTraceStore();
+    const tracingService = forTracingInstance(requestContext.selectedInstance, requestContext.generation, requestContext.status?.globalRecording?.recordingId);
+    const traceState = useTraceStore();
+    const generation = traceState.generation;
+    const sessionMode = story === null;
+    const storyId = story?.id ?? null;
+    // Reload trigger: the story's revision, or the source's change cursor in session mode.
+    const contentVersion = story ? story.revision : traceState.changeCursor;
+    // Levels live in the store so the error / warning counts elsewhere can narrow this view.
+    const levels = traceState.logLevels;
+    const [scopePrefix, setScopePrefix] = useState("");
+    const [search, setSearch] = useState("");
+    const [debouncedSearch, setDebouncedSearch] = useState("");
+    const [relative, setRelative] = useState(!sessionMode);
+    const [anchor, setAnchor] = useState({ kind: "start" });
+    const [page, setPage] = useState(null);
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const focusRef = useRef(null);
+    useEffect(() => {
+        const handle = setTimeout(() => setDebouncedSearch(search), 300);
+        return () => clearTimeout(handle);
+    }, [search]);
+    // Reset paging when the story or filters change.
+    useEffect(() => {
+        setAnchor({ kind: "start" });
+    }, [storyId, levels, scopePrefix, debouncedSearch]);
+    useEffect(() => {
+        if (jumpMs !== null) {
+            setAnchor({ kind: "around", ms: jumpMs });
+            onJumpConsumed();
+        }
+    }, [jumpMs, onJumpConsumed]);
+    const load = useCallback(async () => {
+        setLoading(true);
+        try {
+            const result = await tracingService.logs(sessionId, storyId, generation, {
+                levels,
+                scopePrefix: scopePrefix || null,
+                search: debouncedSearch || null,
+                afterSequence: anchor.kind === "after" ? anchor.sequence : null,
+                beforeSequence: anchor.kind === "before" ? anchor.sequence : null,
+                aroundMs: anchor.kind === "around" ? anchor.ms : null,
+                limit: PAGE,
+            });
+            setPage(result);
+            setError(null);
+        }
+        catch (e) {
+            if (e instanceof TracingApiError && e.notFound)
+                setError("No longer in memory.");
+            else
+                setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [requestContext.selectedInstance, sessionId, storyId, generation, levels, scopePrefix, debouncedSearch, anchor]);
+    // Load on every relevant change, including new content of a running story or source.
+    useEffect(() => {
+        void load();
+    }, [load, contentVersion]);
+    useEffect(() => {
+        if (page?.focusSequence && focusRef.current) {
+            focusRef.current.scrollIntoView({ block: "center" });
+        }
+    }, [page?.focusSequence, page?.entries]);
+    const scopeOptions = useMemo(() => {
+        const options = [{ value: "", label: "All scopes" }];
+        for (const scope of page?.scopeTree ?? []) {
+            const depth = scope.prefix.split(".").length - 1;
+            options.push({ value: scope.prefix, label: `${"  ".repeat(depth)}${scope.prefix.split(".").pop()} (${scope.count})` });
+        }
+        return options;
+    }, [page?.scopeTree]);
+    const toggleLevel = (level) => traceActions.setLogLevels(levels.includes(level) ? levels.filter((l) => l !== level) : [...levels, level]);
+    const entries = page?.entries ?? [];
+    const copyAll = entries
+        .map((e) => [relative ? formatRelativeMs(e.relativeMs) : e.time, sessionMode ? e.storyPath ?? e.storyName ?? "" : null, e.level, e.scope ?? "", e.message]
+        .filter((part) => part !== null)
+        .join("\t"))
+        .join("\n");
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", "data-testid": "alpaca-trace-logs", "data-mode": sessionMode ? "session" : "story", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-border-default px-3 py-2", children: [_jsx("div", { className: "flex items-center gap-1", "data-testid": "alpaca-trace-level-chips", children: LOG_LEVELS.map((level) => (_jsx("button", { type: "button", onClick: () => toggleLevel(level), className: cls("rounded border px-1.5 py-0.5 text-2xs uppercase tracking-wide", levels.includes(level)
+                                ? "border-highlight-100 bg-highlight-10 text-neutral-grey-100"
+                                : "border-border-default text-neutral-grey-50 hover:bg-neutral-grey-5"), "data-testid": `alpaca-trace-level-${level}`, children: level }, level))) }), _jsx(Select, { size: "xs", options: scopeOptions, value: scopePrefix, onValueChange: setScopePrefix, maxWidth: 260, searchable: true, "data-testid": "alpaca-trace-scope-select" }), _jsx(SearchInput, { value: search, onChange: setSearch, placeholder: "Search messages", size: "sm", className: "min-w-[140px] flex-1", testId: "alpaca-trace-logs-search" }), _jsx(Button, { variant: "outline", size: "xs", onClick: () => setRelative((v) => !v), "data-testid": "alpaca-trace-time-mode", children: relative ? "+relative" : "absolute" }), _jsx(CopyButton, { textToCopy: copyAll, iconOnly: true })] }), page?.evicted && (_jsxs("div", { className: "border-b border-feedback-orange/20 bg-feedback-orange-light px-3 py-1 text-2xs text-feedback-orange", "data-testid": "alpaca-trace-evicted", children: [page.evictedCount, " entries were lost to the rolling buffer. Persist sessions you want to keep."] })), _jsx(InlineError, { message: error }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: entries.length === 0 ? (_jsx(EmptyHint, { title: loading ? "Loading…" : "No log entries", children: !loading && (levels.length < LOG_LEVELS.length || scopePrefix || debouncedSearch
+                        ? "Nothing matches the current filters."
+                        : story && !story.available.logs
+                            ? "Logs were not persisted for this story."
+                            : sessionMode
+                                ? "This source has no entries in memory."
+                                : "This story has no entries in memory.") })) : (_jsxs("table", { className: "w-full table-fixed text-left text-2xs", children: [_jsxs("colgroup", { children: [_jsx("col", { className: "w-[84px]" }), sessionMode && _jsx("col", { className: "w-[200px]" }), _jsx("col", { className: "w-[220px]" }), _jsx("col", { className: "w-[58px]" }), _jsx("col", {})] }), _jsxs("tbody", { children: [page?.hasMoreBefore && (_jsx("tr", { children: _jsx("td", { colSpan: sessionMode ? 5 : 4, className: "p-1 text-center", children: _jsx(Button, { variant: "outline", size: "xxs", onClick: () => entries[0] && setAnchor({ kind: "before", sequence: entries[0].sequence }), children: "Load earlier entries" }) }) })), entries.map((entry, index) => {
+                                    const previous = entries[index - 1];
+                                    const isFocus = page?.focusSequence === entry.sequence;
+                                    return (_jsx(LogRow, { ref: isFocus ? focusRef : undefined, entry: entry, relative: relative, sessionMode: sessionMode, repeatedScope: previous?.scope === entry.scope, repeatedStory: previous?.storyId === entry.storyId, focus: isFocus, highlight: debouncedSearch || null, sessionId: sessionId, storyId: entry.storyId ?? storyId, generation: generation, onFilterScope: () => entry.scope && setScopePrefix(entry.scope), onOpenStory: () => entry.storyId && traceActions.selectStory(entry.storyId, { manual: true }) }, entry.sequence));
+                                }), page?.hasMoreAfter && (_jsx("tr", { children: _jsx("td", { colSpan: sessionMode ? 5 : 4, className: "p-1 text-center", children: _jsx(Button, { variant: "outline", size: "xxs", onClick: () => {
+                                                const last = entries[entries.length - 1];
+                                                if (last)
+                                                    setAnchor({ kind: "after", sequence: last.sequence });
+                                            }, children: "Load later entries" }) }) }))] })] })) }), page && (_jsxs("div", { className: "border-t border-border-default px-3 py-1 text-2xs text-neutral-grey-50", children: [entries.length, " of ", page.total, " entries", sessionMode ? " across all stories of this source" : ""] }))] }));
+}
+const LogRow = forwardRef(function LogRow({ entry, relative, sessionMode, repeatedScope, repeatedStory, focus, highlight, sessionId, storyId, generation, onFilterScope, onOpenStory }, ref) {
+    const storyLabel = entry.storyPath ?? entry.storyName ?? "";
+    return (_jsxs("tr", { ref: ref, className: cls("border-b border-border-default align-top hover:bg-neutral-grey-5", focus && "bg-highlight-10", entry.level === "error" && "bg-feedback-red-light/40"), "data-testid": "alpaca-trace-log-row", "data-sequence": entry.sequence, children: [_jsx("td", { className: "px-2 py-1 font-mono text-neutral-grey-50", title: entry.time, children: relative ? formatRelativeMs(entry.relativeMs) : formatTime(entry.time) }), sessionMode && (_jsx("td", { className: "px-2 py-1", children: _jsx("button", { type: "button", className: cls("max-w-full truncate text-left hover:underline", repeatedStory ? "text-neutral-grey-15" : "text-neutral-grey-100"), title: `${entry.storyName ?? ""}\nClick to open this story`, onClick: onOpenStory, "data-testid": "alpaca-trace-log-story-link", children: storyLabel }) })), _jsx("td", { className: "px-2 py-1", children: _jsx("button", { type: "button", className: cls("max-w-full truncate text-left hover:underline", repeatedScope ? "text-neutral-grey-15" : "text-neutral-grey-50"), title: `${entry.scope ?? ""}\nClick to filter by this scope`, onClick: onFilterScope, children: entry.scope }) }), _jsx("td", { className: "px-2 py-1", children: _jsx(LevelBadge, { level: entry.level }) }), _jsx("td", { className: "px-2 py-1", children: _jsxs("div", { className: "flex items-start gap-1", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(LogMessage, { message: entry.message, truncated: entry.truncated, highlight: highlight }) }), entry.hasStackTrace && storyId && (_jsx(StackTracePopover, { sessionId: sessionId, storyId: storyId, sequence: entry.sequence, generation: generation }))] }) })] }));
+});

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

@@ -0,0 +1,19 @@
+/**
+ * "stack" button of a log row. Opens the captured stack trace in a popover instead of expanding the row,
+ * so the log list keeps its rhythm; the trace is fetched on first open and offered with a copy button.
+ */
+export declare function StackTracePopover({ sessionId, storyId, sequence, generation, }: {
+    sessionId: string;
+    storyId: string;
+    sequence: number;
+    generation: string | null;
+}): import("react").JSX.Element;
+type Frame = {
+    text: string;
+    own: boolean;
+    tracing: boolean;
+};
+/** One frame per line; the "at " prefix goes, own (Parhelia/Alpaca) frames are marked, tracing plumbing is dimmed. */
+export declare function parseFrames(text: string): Frame[];
+export {};
+//# sourceMappingURL=StackTracePopover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackTracePopover.d.ts","sourceRoot":"","sources":["../../../src/tracing/components/StackTracePopover.tsx"],"names":[],"mappings":"AASA;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,OAAO,EACP,QAAQ,EACR,UAAU,GACX,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,+BAyFA;AAED,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC;AAE9D,sHAAsH;AACtH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,EAAE,CAWjD"}

package/dist/tracing/components/StackTracePopover.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTraceStore } from "../traceStore";
+import { useState } from "react";
+import { CopyButton, Popover, PopoverContent, PopoverTrigger } from "@parhelia/core";
+import { Layers } from "lucide-react";
+import { forTracingInstance } from "../tracingService";
+import { cls } from "./shared";
+/**
+ * "stack" button of a log row. Opens the captured stack trace in a popover instead of expanding the row,
+ * so the log list keeps its rhythm; the trace is fetched on first open and offered with a copy button.
+ */
+export function StackTracePopover({ sessionId, storyId, sequence, generation, }) {
+    const requestContext = useTraceStore();
+    const tracingService = forTracingInstance(requestContext.selectedInstance, requestContext.generation, requestContext.status?.globalRecording?.recordingId);
+    const [open, setOpen] = useState(false);
+    const [stack, setStack] = useState({ kind: "idle" });
+    const [ownOnly, setOwnOnly] = useState(false);
+    const onOpenChange = (next) => {
+        setOpen(next);
+        if (!next || stack.kind === "ready" || stack.kind === "loading")
+            return;
+        setStack({ kind: "loading" });
+        tracingService
+            .stackTrace(sessionId, storyId, sequence, generation)
+            .then((result) => setStack({ kind: "ready", text: result.stackTrace ?? "", truncated: result.truncated }))
+            .catch((e) => setStack({ kind: "error", message: e instanceof Error ? e.message : String(e) }));
+    };
+    const frames = stack.kind === "ready" ? parseFrames(stack.text) : [];
+    const ownCount = frames.filter((f) => f.own).length;
+    const visible = ownOnly ? frames.filter((f) => f.own) : frames;
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cls("inline-flex shrink-0 items-center gap-0.5 rounded px-1 text-2xs text-neutral-grey-50 hover:bg-neutral-grey-10 hover:text-neutral-grey-100", open && "bg-neutral-grey-10 text-neutral-grey-100"), title: "Show the captured stack trace", "data-testid": "alpaca-trace-stack-toggle", children: [_jsx(Layers, { className: "h-3 w-3", strokeWidth: 1.5 }), "stack"] }) }), _jsxs(PopoverContent, { align: "end", collisionPadding: 12, className: "flex w-[min(92vw,820px)] flex-col gap-0 p-0", "data-testid": "alpaca-trace-stack-popover", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border-default px-3 py-2", children: [_jsx("span", { className: "text-xs font-medium text-neutral-grey-100", children: "Stack trace" }), stack.kind === "ready" && (_jsxs("span", { className: "text-2xs text-neutral-grey-50", children: [frames.length, " frames", ownCount > 0 ? `, ${ownCount} own` : "", stack.truncated ? " · truncated at 64 KB" : ""] })), _jsx("span", { className: "flex-1" }), ownCount > 0 && ownCount < frames.length && (_jsxs("label", { className: "flex items-center gap-1 text-2xs text-neutral-grey-50", children: [_jsx("input", { type: "checkbox", checked: ownOnly, onChange: (e) => setOwnOnly(e.target.checked), className: "h-3 w-3" }), "Own frames only"] })), stack.kind === "ready" && (_jsx(CopyButton, { textToCopy: ownOnly ? visible.map((f) => f.text).join("\n") : stack.text, className: "inline-flex h-6 shrink-0 cursor-pointer items-center gap-1 whitespace-nowrap rounded border border-border-default bg-background px-2 text-2xs text-neutral-grey-100 hover:bg-neutral-grey-5", "data-testid": "alpaca-trace-stack-copy" }))] }), _jsxs("div", { className: "max-h-[min(60vh,520px)] overflow-auto px-3 py-2", children: [stack.kind === "loading" && _jsx("div", { className: "text-2xs text-neutral-grey-50", children: "Loading\u2026" }), stack.kind === "error" && _jsxs("div", { className: "text-2xs text-feedback-red", children: ["Stack trace unavailable: ", stack.message] }), stack.kind === "ready" && frames.length === 0 && _jsx("div", { className: "text-2xs text-neutral-grey-50", children: "No stack was captured for this entry." }), stack.kind === "ready" && frames.length > 0 && (_jsx("ol", { className: "m-0 list-none p-0 font-mono text-2xs leading-snug", "data-testid": "alpaca-trace-stack-frames", children: visible.map((frame, index) => (_jsx("li", { className: cls("whitespace-pre", frame.own ? "font-medium text-neutral-grey-100" : frame.tracing ? "text-neutral-grey-15" : "text-neutral-grey-50"), children: frame.text }, index))) }))] })] })] }));
+}
+/** One frame per line; the "at " prefix goes, own (Parhelia/Alpaca) frames are marked, tracing plumbing is dimmed. */
+export function parseFrames(text) {
+    return text
+        .split("\n")
+        .map((line) => line.trim())
+        .filter(Boolean)
+        .map((line) => {
+        const clean = line.replace(/^at\s+/, "");
+        const tracing = /^(Alpaca\.Tracing|System\.Environment\.(Get|get_)StackTrace)/.test(clean);
+        const own = !tracing && /\b(Parhelia|Alpaca)\./.test(clean);
+        return { text: clean, own, tracing };
+    });
+}

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

@@ -0,0 +1,2 @@
+export declare function StoriesPane(): import("react").JSX.Element;
+//# sourceMappingURL=StoriesPane.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StoriesPane.d.ts","sourceRoot":"","sources":["../../../src/tracing/components/StoriesPane.tsx"],"names":[],"mappings":"AAqNA,wBAAgB,WAAW,gCA0O1B"}

package/dist/tracing/components/StoriesPane.js

@@ -0,0 +1,204 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Button, Checkbox, Popover, PopoverContent, PopoverTrigger, SearchInput, Select, SimpleTable, useEditContext, } from "@parhelia/core";
+import { Activity, Archive, ChevronDown, Globe, PanelLeftOpen, Settings2, User } from "lucide-react";
+import { formatDuration, formatTime, storyDisplayName, storyDurationLabel, } from "../format";
+import { forTracingInstance } from "../tracingService";
+import { hasInstanceChoice, selectedSource, traceActions, useTraceStore } from "../traceStore";
+import { InstanceSwitcher } from "./InstanceSwitcher";
+/** Tooltip of "Hide noise": what the read-side noise filter drops. */
+function noiseTitle(prefixes) {
+    const lines = [
+        "Noise is infrastructure traffic that rarely matters when reading a trace:",
+        "Sitecore shell, SPEAK and service requests, plus Parhelia's own polling, realtime and asset requests.",
+    ];
+    if (prefixes && prefixes.length)
+        lines.push("", "Request path prefixes hidden:", ...prefixes.map((p) => "  " + p));
+    lines.push("", "Hiding only affects this list; the stories are still recorded.");
+    return lines.join("\n");
+}
+/** One-line description of a source's capture filter, refreshed when the source changes or the filter dialog closes. */
+function CaptureFilterSummary({ sessionId }) {
+    const requestContext = useTraceStore();
+    const tracingService = forTracingInstance(requestContext.selectedInstance, requestContext.generation, requestContext.status?.globalRecording?.recordingId);
+    const dialogOpen = useTraceStore().captureFilterSourceId !== null;
+    const [filter, setFilter] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        tracingService
+            .filters(sessionId)
+            .then((r) => !cancelled && setFilter(r.filter))
+            .catch(() => !cancelled && setFilter(null));
+        return () => {
+            cancelled = true;
+        };
+    }, [requestContext.selectedInstance, sessionId, dialogOpen]);
+    if (!filter)
+        return _jsx("span", { children: "capture filter" });
+    const parts = [
+        filter.includeScopes.length ? `${filter.includeScopes.length} included` : null,
+        filter.includeScopesTraceLevel.length ? `${filter.includeScopesTraceLevel.length} at trace` : null,
+        filter.excludeScopes.length ? `${filter.excludeScopes.length} excluded` : null,
+        filter.stackTraceScopes.length ? `${filter.stackTraceScopes.length} with stacks` : null,
+        filter.disabledCaches.length ? `${filter.disabledCaches.length} caches off` : null,
+        filter.enabledFeatures.length ? `${filter.enabledFeatures.length} feature previews` : null,
+    ].filter(Boolean);
+    return _jsxs("span", { children: ["capture: ", parts.length ? parts.join(" · ") : "default"] });
+}
+/**
+ * Switches the source from the main pane, so it does not depend on the Sources sidebar being open.
+ * Lists every session and stream, marks what is recording, and offers to open the sidebar.
+ */
+function SourceSwitcher({ current }) {
+    const state = useTraceStore();
+    const editContext = useEditContext();
+    const [open, setOpen] = useState(false);
+    const status = state.status;
+    const sources = status?.sources ?? [];
+    const groups = [
+        { title: "Sessions", items: sources.filter((s) => s.kind === "personal" || s.kind === "global" || s.kind === "capture").sort((a, b) => (a.kind === "global" ? -1 : b.kind === "global" ? 1 : a.name.localeCompare(b.name))) },
+        { title: "Streams", items: sources.filter((s) => s.kind === "stream").sort((a, b) => (b.lastActivity ?? "").localeCompare(a.lastActivity ?? "")) },
+        { title: "Restored", items: sources.filter((s) => s.kind === "restored") },
+    ].filter((g) => g.items.length > 0);
+    const isRecording = (s) => s.kind === "global"
+        ? !!status?.globalEnabled
+        : !!status && !status.browserAttachment.stale && status.browserAttachment.sessionId === s.id;
+    const isMine = (s) => s.kind === "personal" && !!status?.userName && s.owner === status.userName;
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "inline-flex min-w-0 items-center gap-1 rounded px-1 py-0.5 text-2xs hover:bg-neutral-grey-10 hover:text-neutral-grey-100", title: "Switch source", "data-testid": "alpaca-trace-source-switcher", children: [current ? (_jsxs(_Fragment, { children: [_jsx(KindIcon, { kind: current.kind, className: "h-3 w-3" }), _jsx("span", { className: "truncate", children: current.name })] })) : (_jsx("span", { children: "Choose a source" })), _jsx(ChevronDown, { className: "h-3 w-3 shrink-0", strokeWidth: 1.5 })] }) }), _jsxs(PopoverContent, { align: "start", className: "w-80 p-1", "data-testid": "alpaca-trace-source-switcher-menu", children: [hasInstanceChoice(state) && _jsxs("div", { className: "border-b border-border-default px-2 pt-1 pb-2", children: [_jsx("div", { className: "pb-1 text-2xs font-medium uppercase tracking-wide text-neutral-grey-50", children: "Instance" }), _jsx(InstanceSwitcher, {})] }), sources.length === 0 && _jsx("div", { className: "px-2 py-1.5 text-2xs text-neutral-grey-50", children: "No sources yet." }), groups.map((group) => (_jsxs("div", { className: "py-1", children: [_jsx("div", { className: "px-2 pb-0.5 text-2xs font-medium uppercase tracking-wide text-neutral-grey-50", children: group.title }), group.items.map((s) => (_jsxs("button", { type: "button", className: cls("flex w-full items-center gap-2 rounded px-2 py-1 text-left text-xs hover:bg-neutral-grey-5", s.id === current?.id && "bg-highlight-10"), onClick: () => {
+                                    traceActions.selectSource(s.id);
+                                    setOpen(false);
+                                }, "data-source-id": s.id, children: [_jsxs("span", { className: "relative shrink-0", children: [_jsx(KindIcon, { kind: s.kind, className: "text-neutral-grey-50" }), isRecording(s) && _jsx("span", { className: "absolute -right-0.5 -bottom-0.5 h-2 w-2 rounded-full bg-feedback-green ring-2 ring-background" })] }), _jsxs("span", { className: "min-w-0 flex-1 truncate", children: [s.name, isMine(s) && _jsx("span", { className: "text-neutral-grey-50", children: " (this login)" })] }), _jsxs("span", { className: "shrink-0 text-2xs text-neutral-grey-50", children: [s.storyCount, " ", s.storyCount === 1 ? "story" : "stories"] })] }, s.id)))] }, group.title))), !status?.globalEnabled && (_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 rounded px-2 py-1 text-left text-xs text-neutral-grey-100 hover:bg-neutral-grey-5", onClick: () => {
+                            setOpen(false);
+                            editContext?.confirm({
+                                header: "Enable global recording",
+                                message: "Record every request and background job on this instance for all users. This is memory heavy; disable it when you are done.",
+                                acceptLabel: "Enable",
+                                accept: () => {
+                                    void traceActions.enableGlobal();
+                                },
+                            });
+                        }, children: [_jsx(Globe, { className: "h-4 w-4 text-neutral-grey-50", strokeWidth: 1.5 }), "Enable global recording\u2026"] })), _jsx("div", { className: "mt-1 border-t border-border-default pt-1", children: _jsxs("button", { type: "button", className: "flex w-full items-center gap-2 rounded px-2 py-1 text-left text-2xs text-neutral-grey-50 hover:bg-neutral-grey-5", onClick: () => {
+                                setOpen(false);
+                                editContext?.openSidebar("alpaca-trace-sources", { preserveOpenSidebars: true });
+                            }, children: [_jsx(PanelLeftOpen, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), "Show the Sources sidebar"] }) })] })] }));
+}
+/** Esc while no input has focus clears the selected story (back to the whole source). */
+function useEscapeDeselects() {
+    useEffect(() => {
+        const onKey = (event) => {
+            if (event.key !== "Escape")
+                return;
+            const target = event.target;
+            if (target && /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName))
+                return;
+            if (target?.isContentEditable)
+                return;
+            traceActions.selectStory(null);
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, []);
+}
+import { EmptyHint, InlineError, KindIcon, ProblemCounts, ResultBadge, StateDot, cls } from "./shared";
+const problemOptions = [
+    { value: "all", label: "All stories" },
+    { value: "any", label: "Any problem" },
+    { value: "errors", label: "With errors" },
+    { value: "warnings", label: "With warnings" },
+    { value: "failed", label: "Failed requests" },
+];
+const durationOptions = [
+    { value: "0", label: "Any duration" },
+    { value: "100", label: "≥ 100 ms" },
+    { value: "500", label: "≥ 500 ms" },
+    { value: "1000", label: "≥ 1 s" },
+    { value: "5000", label: "≥ 5 s" },
+];
+export function StoriesPane() {
+    const requestContext = useTraceStore();
+    const tracingService = forTracingInstance(requestContext.selectedInstance, requestContext.generation, requestContext.status?.globalRecording?.recordingId);
+    const state = useTraceStore();
+    const source = selectedSource(state);
+    const [search, setSearch] = useState(state.filters.search);
+    const [now, setNow] = useState(() => Date.now());
+    useEscapeDeselects();
+    // Debounced search.
+    useEffect(() => {
+        const handle = setTimeout(() => {
+            if (search !== state.filters.search)
+                traceActions.setFilters({ search });
+        }, 300);
+        return () => clearTimeout(handle);
+    }, [search, state.filters.search]);
+    // Running rows show elapsed time; tick once a second while any is running.
+    const hasRunning = state.stories.some((r) => r.state === "running");
+    useEffect(() => {
+        if (!hasRunning)
+            return;
+        const handle = setInterval(() => setNow(Date.now()), 1000);
+        return () => clearInterval(handle);
+    }, [hasRunning]);
+    if (state.status && state.status.sources.length === 0 && !state.selectedSourceId) {
+        return _jsx(NothingRecorded, {});
+    }
+    if (state.sessionMissing) {
+        return _jsx(SessionMissingCard, {});
+    }
+    if (!state.selectedSourceId) {
+        return (_jsx("div", { className: "flex h-full flex-col bg-background", children: state.status && !state.status.globalEnabled && (!state.status.browserAttachment.sessionId || state.status.browserAttachment.stale) ? (_jsx(NothingRecorded, {})) : (_jsx(EmptyHint, { title: "Select a source", icon: _jsx(Activity, { className: "h-8 w-8", strokeWidth: 1 }), children: _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("span", { children: "Pick a session or stream to see its stories." }), _jsx(SourceSwitcher, { current: null })] }) })) }));
+    }
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col bg-background", "data-testid": "alpaca-trace-stories", children: [_jsxs("div", { className: "flex flex-nowrap items-center gap-2 border-b border-border-default px-3 py-2", children: [_jsx(SearchInput, { value: search, onChange: setSearch, placeholder: "Search stories", size: "sm", className: "min-w-[160px] flex-1", testId: "alpaca-trace-stories-search" }), _jsx("div", { className: "shrink-0", title: "Problems: errors and warnings in the logs, or a 4xx / 5xx response", children: _jsx(Select, { size: "xs", options: problemOptions, value: state.filters.problems ?? "all", onValueChange: (value) => traceActions.setFilters({ problems: value === "all" ? null : value }), maxWidth: 136, "data-testid": "alpaca-trace-problem-filter" }) }), _jsxs("label", { className: "flex shrink-0 items-center gap-1.5 whitespace-nowrap text-xs text-neutral-grey-100", title: noiseTitle(state.status?.noisePathPrefixes), children: [_jsx(Checkbox, { checked: state.filters.hideNoise, onCheckedChange: (checked) => traceActions.setFilters({ hideNoise: checked === true }), "data-testid": "alpaca-trace-hide-noise" }), "Hide noise"] }), _jsx("div", { className: "shrink-0", title: "Minimum story duration", children: _jsx(Select, { size: "xs", options: durationOptions, value: String(state.filters.minDurationMs ?? 0), onValueChange: (value) => traceActions.setFilters({ minDurationMs: value === "0" ? null : Number(value) }), maxWidth: 128, "data-testid": "alpaca-trace-min-duration" }) })] }), source && (_jsxs("div", { className: "flex items-center gap-2 border-b border-border-default bg-neutral-grey-5 px-3 py-1 text-2xs text-neutral-grey-50", children: [source.kind === "global" ? (_jsx(Globe, { className: "h-3 w-3", strokeWidth: 1.5 })) : source.kind === "restored" ? (_jsx(Archive, { className: "h-3 w-3", strokeWidth: 1.5 })) : (_jsx(User, { className: "h-3 w-3", strokeWidth: 1.5 })), _jsx(SourceSwitcher, { current: source }), _jsx("span", { children: "\u00B7" }), _jsxs("span", { className: "shrink-0", children: [state.storiesTotal, " ", state.storiesTotal === 1 ? "story" : "stories", source.storyCount > state.storiesTotal ? ` of ${source.storyCount}` : ""] }), source.kind === "restored" && _jsx("span", { className: "shrink-0", children: "\u00B7 restored, read-only" }), _jsx("span", { className: "flex-1" }), source.kind !== "restored" && (_jsxs("button", { type: "button", className: "inline-flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-2xs text-neutral-grey-50 hover:bg-neutral-grey-10 hover:text-neutral-grey-100", title: "Capture filter of this source (what gets recorded)", onClick: () => traceActions.openCaptureFilter(source.id), "data-testid": "alpaca-trace-open-capture-filter", children: [_jsx(Settings2, { className: "h-3 w-3", strokeWidth: 1.5 }), _jsx(CaptureFilterSummary, { sessionId: source.id })] }))] })), _jsx(InlineError, { message: state.storiesError }), _jsxs("div", { className: "min-h-0 flex-1 overflow-auto", children: [state.stories.length === 0 ? (_jsx(EmptyHint, { title: state.storiesLoading ? "Loading stories…" : "No stories", children: !state.storiesLoading &&
+                            (state.filters.problems || state.filters.search || state.filters.minDurationMs
+                                ? "Nothing matches the current filters."
+                                : source?.isRecordable
+                                    ? "Nothing recorded yet. Use the editor in another tab while this session records, and stories appear here."
+                                    : "This source has no stories in memory.") })) : (_jsx(SimpleTable, { items: state.stories, rowKey: (row) => row.id, rowTestId: (row) => `alpaca-trace-story-${row.id}`, rowClassName: (row) => cls(row.id === state.selectedStoryId && "bg-highlight-10"), onRowClick: ({ item, event }) => {
+                            if (event.ctrlKey || event.metaKey) {
+                                const url = new URL(window.location.href);
+                                url.searchParams.set("workspace", "alpaca-tracing");
+                                url.searchParams.set("traceSession", item.sessionId);
+                                url.searchParams.set("traceStory", item.id);
+                                window.open(url.toString(), "_blank", "noopener");
+                                return;
+                            }
+                            traceActions.toggleStory(item.id);
+                        }, "data-testid": "alpaca-trace-stories-table", columns: [
+                            {
+                                header: "Time",
+                                className: "w-[70px] whitespace-nowrap font-mono text-2xs text-neutral-grey-50",
+                                body: (row) => (_jsx("span", { title: new Date(row.timeCreated).toLocaleString(), children: formatTime(row.timeCreated) })),
+                            },
+                            {
+                                header: "Story",
+                                // max-w-0 stops a long request path from stretching the table (which pushed Result,
+                                // Duration and Logs out of view); the name wraps instead.
+                                className: "w-full max-w-0",
+                                body: (row) => (_jsxs("span", { className: "flex min-w-0 items-start gap-1.5", title: row.host ? `${row.host}\n${row.name}` : row.name, children: [_jsx(StateDot, { state: row.state, className: "mt-1" }), _jsx("span", { className: "min-w-0 [overflow-wrap:anywhere]", children: storyDisplayName(row) }), row.origin === "restored" && (_jsx(Archive, { className: "h-3 w-3 shrink-0 text-neutral-grey-50", strokeWidth: 1.5 })), row.evictedCount > 0 && (_jsxs("span", { className: "shrink-0 text-2xs text-feedback-orange", title: `${row.evictedCount} entries lost to the buffer`, children: ["\u2212", row.evictedCount] }))] })),
+                            },
+                            {
+                                header: "Result",
+                                className: "w-[60px] whitespace-nowrap",
+                                body: (row) => _jsx(ResultBadge, { row: row }),
+                            },
+                            {
+                                header: "Duration",
+                                className: "w-[80px] whitespace-nowrap text-right font-mono text-2xs",
+                                align: "right",
+                                body: (row) => (_jsx("span", { title: row.sqlMs > 0 ? `SQL ${formatDuration(row.sqlMs)}` : undefined, children: storyDurationLabel(row, now) })),
+                            },
+                            {
+                                header: "Logs",
+                                className: "w-[80px] whitespace-nowrap text-right text-2xs",
+                                align: "right",
+                                body: (row) => (_jsxs("span", { className: "inline-flex items-center justify-end gap-2", children: [_jsx("span", { className: "tabular-nums text-neutral-grey-50", children: row.logCount }), _jsx(ProblemCounts, { errorCount: row.errorCount, warnCount: row.warnCount, onErrorClick: () => traceActions.focusProblems("error", { sourceId: row.sessionId, storyId: row.id }), onWarnClick: () => traceActions.focusProblems("warn", { sourceId: row.sessionId, storyId: row.id }) })] })),
+                            },
+                        ] })), state.nextCursor && (_jsx("div", { className: "flex justify-center p-2", children: _jsx(Button, { variant: "outline", size: "xs", disabled: state.storiesLoading, onClick: () => void traceActions.loadOlder(), "data-testid": "alpaca-trace-load-older", children: "Load older stories" }) }))] })] }));
+}
+function NothingRecorded() {
+    return (_jsx("div", { className: "flex h-full items-center justify-center bg-background p-6", "data-testid": "alpaca-trace-nothing-recorded", children: _jsxs("div", { className: "max-w-md rounded border border-border-default bg-neutral-grey-5 p-6", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2 text-neutral-grey-100", children: [_jsx(Activity, { className: "h-5 w-5 text-highlight-100", strokeWidth: 1 }), _jsx("span", { className: "text-sm font-medium", children: "Nothing is being recorded" })] }), _jsxs("p", { className: "mb-4 text-xs text-neutral-grey-50", children: ["Alpaca tracing records every request as a ", _jsx("em", { children: "story" }), " with its logs, timers and counters. Recording is opt-in and lives in memory on this instance only."] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Button, { size: "sm", onClick: () => void traceActions.recordMySession(), "data-testid": "alpaca-trace-empty-record", children: [_jsx(User, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), "Record my session"] }), _jsx("p", { className: "text-2xs text-neutral-grey-50", children: "Only requests from this browser are traced. Use the editor in another tab and watch the stories arrive." }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void traceActions.enableGlobal(), "data-testid": "alpaca-trace-empty-global", children: [_jsx(Globe, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), "Record everything (global)"] }), _jsx("p", { className: "text-2xs text-neutral-grey-50", children: "Traces all requests and background jobs of this instance for every user. Memory heavy; disable when done." })] })] }) }));
+}
+function SessionMissingCard() {
+    const state = useTraceStore();
+    const missing = state.sessionMissing;
+    return (_jsx("div", { className: "flex h-full items-center justify-center bg-background p-6", "data-testid": "alpaca-trace-session-missing", children: _jsxs("div", { className: "max-w-md rounded border border-border-default bg-neutral-grey-5 p-6", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2 text-neutral-grey-100", children: [_jsx(Archive, { className: "h-5 w-5 text-neutral-grey-50", strokeWidth: 1 }), _jsx("span", { className: "text-sm font-medium", children: "This session is not in memory on this instance" })] }), missing.restorable ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "mb-4 text-xs text-neutral-grey-50", children: "Trace storage holds a persisted copy. Restoring loads it read-only; results, timers or counters may be missing depending on when it was saved." }), _jsx(Button, { size: "sm", disabled: missing.restoring, onClick: () => void traceActions.restoreSession(missing.sessionId), "data-testid": "alpaca-trace-restore", children: missing.restoring ? "Restoring…" : "Restore from storage" })] })) : (_jsx("p", { className: "text-xs text-neutral-grey-50", children: "It was never persisted, has been deleted, or was recorded on another instance of the farm. Traces are held per instance." })), _jsx("div", { className: "mt-3", children: _jsx(Button, { size: "xs", variant: "outline", onClick: () => traceActions.selectSource(null), children: "Back to sources" }) })] }) }));
+}

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

@@ -0,0 +1,2 @@
+export declare function StoryDetail(): import("react").JSX.Element;
+//# sourceMappingURL=StoryDetail.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StoryDetail.d.ts","sourceRoot":"","sources":["../../../src/tracing/components/StoryDetail.tsx"],"names":[],"mappings":"AAWA,wBAAgB,WAAW,gCAqK1B"}

package/dist/tracing/components/StoryDetail.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { SimpleIconButton, SimpleTabs } from "@parhelia/core";
+import { Activity, Archive, Check, Link2, X } from "lucide-react";
+import { formatDateTime, formatDuration, storyDisplayName, storyDurationLabel } from "../format";
+import { buildDeepLink, selectedSource, traceActions, useTraceStore } from "../traceStore";
+import { CountersTab } from "./CountersTab";
+import { LogsTab } from "./LogsTab";
+import { EmptyHint, ProblemCounts, ResultBadge, StateDot } from "./shared";
+import { TimelineTab } from "./TimelineTab";
+import { TimersTab } from "./TimersTab";
+export function StoryDetail() {
+    const state = useTraceStore();
+    const source = selectedSource(state);
+    const story = state.stories.find((row) => row.id === state.selectedStoryId) ?? null;
+    const [jumpMs, setJumpMs] = useState(null);
+    const [now, setNow] = useState(() => Date.now());
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+        if (story?.state !== "running")
+            return;
+        setNow(Date.now());
+        const handle = setInterval(() => setNow(Date.now()), 1000);
+        return () => clearInterval(handle);
+    }, [story?.state, story?.id]);
+    // A jump from the timeline switches to the Logs tab.
+    useEffect(() => {
+        if (jumpMs !== null)
+            traceActions.setStoryTab(0);
+    }, [jumpMs]);
+    if (!source) {
+        return (_jsx("div", { className: "h-full bg-neutral-grey-5", children: _jsx(EmptyHint, { title: "No source selected", icon: _jsx(Activity, { className: "h-8 w-8", strokeWidth: 1 }) }) }));
+    }
+    if (!story) {
+        // Session view: everything that spans the whole source. Logs merges all stories by sequence.
+        // (The capture filter is configuration, not data: it opens as a dialog from the gear / source menu.)
+        const sessionTabs = [
+            { id: "logs", label: "Logs", content: _jsx(LogsTab, { sessionId: source.id, story: null, jumpMs: null, onJumpConsumed: () => undefined }) },
+            { id: "timers", label: "Timers", content: _jsx(TimersTab, { sessionId: source.id, storyId: null, available: true }) },
+            { id: "counters", label: "Counters", content: _jsx(CountersTab, { sessionId: source.id, storyId: null, available: true }) },
+        ];
+        return (_jsxs("div", { className: "flex h-full min-h-0 flex-col bg-background", "data-testid": "alpaca-trace-session-detail", children: [_jsxs("div", { className: "border-b border-border-default px-4 py-3", children: [_jsx("div", { className: "text-sm font-medium text-neutral-grey-100", children: source.name }), _jsx("div", { className: "text-2xs text-neutral-grey-50", children: state.selectedStoryId
+                                ? "The selected story is no longer listed."
+                                : "Whole source: all log entries, timers and counters across its stories. Select a story for its own logs and timeline." })] }), _jsx(SimpleTabs, { tabs: sessionTabs, activeTab: state.sessionTab, setActiveTab: (index) => traceActions.setSessionTab(index) })] }));
+    }
+    const tabs = [
+        {
+            id: "logs",
+            label: "Logs",
+            badge: story.logCount > 0 ? _jsx("span", { className: "text-2xs text-neutral-grey-50", children: story.logCount }) : undefined,
+            content: (_jsx(LogsTab, { sessionId: source.id, story: story, jumpMs: jumpMs, onJumpConsumed: () => setJumpMs(null) })),
+        },
+        {
+            id: "timeline",
+            label: "Timeline",
+            content: _jsx(TimelineTab, { sessionId: source.id, story: story, onJump: (ms) => setJumpMs(ms) }),
+        },
+        {
+            id: "timers",
+            label: "Timers",
+            content: _jsx(TimersTab, { sessionId: source.id, storyId: story.id, available: story.available.timers }),
+        },
+        {
+            id: "counters",
+            label: "Counters",
+            content: _jsx(CountersTab, { sessionId: source.id, storyId: story.id, available: story.available.counters }),
+        },
+    ];
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col bg-background", "data-testid": "alpaca-trace-story-detail", "data-story-id": story.id, children: [_jsxs("div", { className: "border-b border-border-default px-4 py-3", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(StateDot, { state: story.state }), _jsx("span", { className: "truncate text-sm font-medium text-neutral-grey-100", title: story.name, children: storyDisplayName(story) }), _jsx(ResultBadge, { row: story }), story.origin === "restored" && (_jsxs("span", { className: "inline-flex items-center gap-1 text-2xs text-neutral-grey-50", title: "Restored from storage", children: [_jsx(Archive, { className: "h-3 w-3", strokeWidth: 1.5 }), " restored"] }))] }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-2xs text-neutral-grey-50", children: [_jsx("span", { title: "Started", children: formatDateTime(story.timeCreated) }), _jsx("span", { className: "font-mono", children: storyDurationLabel(story, now) }), story.state === "running" && now - new Date(story.timeCreated).getTime() > 10 * 60_000 && (_jsx("span", { title: "No End() was recorded for this story", children: "not ended" })), story.sqlMs > 0 && _jsxs("span", { children: ["SQL ", formatDuration(story.sqlMs)] }), _jsxs("span", { children: [story.logCount, " log entries"] }), _jsx(ProblemCounts, { errorCount: story.errorCount, warnCount: story.warnCount, onErrorClick: () => traceActions.focusProblems("error", { sourceId: source.id, storyId: story.id }), onWarnClick: () => traceActions.focusProblems("warn", { sourceId: source.id, storyId: story.id }) }), story.evictedCount > 0 && (_jsxs("span", { className: "text-feedback-orange", children: [story.evictedCount, " entries lost to the buffer"] })), story.host && _jsx("span", { className: "truncate", children: story.host })] })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx(SimpleIconButton, { icon: copied ? _jsx(Check, { className: "h-4 w-4 text-feedback-green", strokeWidth: 1.5 }) : _jsx(Link2, { className: "h-4 w-4", strokeWidth: 1.5 }), label: copied ? "Link copied" : "Copy link to this story", size: "small", onClick: () => {
+                                            void navigator.clipboard?.writeText(buildDeepLink(source.id, story.id)).then(() => {
+                                                setCopied(true);
+                                                setTimeout(() => setCopied(false), 1500);
+                                            });
+                                        }, "data-testid": "alpaca-trace-story-copy-link" }), _jsx(SimpleIconButton, { icon: _jsx(X, { className: "h-4 w-4", strokeWidth: 1.5 }), label: "Back to the whole source (Esc)", size: "small", onClick: () => traceActions.selectStory(null), "data-testid": "alpaca-trace-story-close" })] })] }), !story.available.timers && story.origin === "restored" && (_jsxs("div", { className: "mt-2 rounded bg-neutral-grey-5 px-2 py-1 text-2xs text-neutral-grey-50", children: ["Restored story: ", [
+                                !story.available.results && "results",
+                                !story.available.timers && "timers",
+                                !story.available.counters && "counters",
+                            ]
+                                .filter(Boolean)
+                                .join(", "), " ", "were not persisted."] }))] }), _jsx(SimpleTabs, { tabs: tabs, activeTab: state.storyTab, setActiveTab: (index) => traceActions.setStoryTab(index) })] }));
+}

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

@@ -0,0 +1,7 @@
+import type { StoryRow } from "../types";
+export declare function TimelineTab({ sessionId, story, onJump, }: {
+    sessionId: string;
+    story: StoryRow;
+    onJump: (ms: number) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=TimelineTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineTab.d.ts","sourceRoot":"","sources":["../../../src/tracing/components/TimelineTab.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAoB,MAAM,UAAU,CAAC;AAG3D,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,MAAM,GACP,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,QAAQ,CAAC;IAChB,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9B,+BA0EA"}

package/dist/tracing/components/TimelineTab.js

@@ -0,0 +1,59 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTraceStore } from "../traceStore";
+import { useEffect, useState } from "react";
+import { formatDuration } from "../format";
+import { TracingApiError, forTracingInstance } from "../tracingService";
+import { EmptyHint, InlineError, cls } from "./shared";
+export function TimelineTab({ sessionId, story, onJump, }) {
+    const requestContext = useTraceStore();
+    const tracingService = forTracingInstance(requestContext.selectedInstance, requestContext.generation, requestContext.status?.globalRecording?.recordingId);
+    const [data, setData] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        tracingService
+            .timeline(sessionId, story.id)
+            .then((result) => {
+            if (!cancelled) {
+                setData(result);
+                setError(null);
+            }
+        })
+            .catch((e) => {
+            if (cancelled)
+                return;
+            setError(e instanceof TracingApiError && e.notFound ? "This story is no longer in memory." : e instanceof Error ? e.message : String(e));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [requestContext.selectedInstance, sessionId, story.id, story.revision]);
+    if (!story.available.timers) {
+        return _jsx(EmptyHint, { title: "Timers were not persisted for this story" });
+    }
+    if (error)
+        return _jsx("div", { className: "p-3", children: _jsx(InlineError, { message: error }) });
+    if (!data)
+        return _jsx(EmptyHint, { title: "Loading\u2026" });
+    const segments = data.lanes.flatMap((l) => l.rows.flatMap((r) => r.segments));
+    if (segments.length === 0) {
+        return (_jsxs(EmptyHint, { title: "No timer entries", children: ["Timers appear when code measures with ", _jsx("code", { children: "TraceLog.CreateTimer" }), "; SQL load timers need the tracing data provider."] }));
+    }
+    const maxEnd = Math.max(...segments.map((s) => s.startMs + s.durationMs));
+    const total = Math.max(data.durationMs ?? 0, maxEnd, 1);
+    const ticks = [0, 0.25, 0.5, 0.75, 1];
+    return (_jsxs("div", { className: "h-full overflow-auto p-3", "data-testid": "alpaca-trace-timeline", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between text-2xs text-neutral-grey-50", children: [_jsxs("span", { children: [data.lanes.length, " lane", data.lanes.length === 1 ? "" : "s", ", ", segments.length, " segment", segments.length === 1 ? "" : "s", " \u00B7 click a segment to jump to its log entries"] }), _jsx("span", { className: "font-mono", children: formatDuration(total) })] }), _jsxs("div", { className: "grid grid-cols-[minmax(120px,200px)_minmax(0,1fr)] gap-x-2", children: [_jsx("div", {}), _jsx("div", { className: "relative h-4 border-b border-border-default text-2xs text-neutral-grey-50", children: ticks.map((t) => (_jsx("span", { className: cls("absolute whitespace-nowrap", t === 0 ? "" : t === 1 ? "-translate-x-full" : "-translate-x-1/2"), style: { left: `${t * 100}%` }, children: formatDuration(total * t) }, t))) }), data.lanes.map((lane) => (_jsx(LaneRows, { lane: lane, total: total, onJump: onJump }, lane.scope)))] })] }));
+}
+function LaneRows({ lane, total, onJump, }) {
+    const tone = lane.scope === "Global"
+        ? "bg-highlight-100"
+        : lane.scope.startsWith("SQL-")
+            ? "bg-feedback-orange"
+            : "bg-feedback-blue";
+    // One grid row per lane: the label cell and a track cell that stacks the lane's sub-rows.
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "min-w-0 truncate py-1 text-2xs text-neutral-grey-100", title: `${lane.scope}\n${lane.rows.reduce((n, r) => n + r.segments.length, 0)} segments`, children: lane.scope }), _jsx("div", { className: "flex min-w-0 flex-col gap-0.5 py-1", children: lane.rows.map((row, rowIndex) => (_jsx("div", { className: "relative h-4 rounded bg-neutral-grey-5", children: row.segments.map((segment) => {
+                        const left = (segment.startMs / total) * 100;
+                        const width = Math.max((segment.durationMs / total) * 100, 0.25);
+                        return (_jsx("button", { type: "button", className: cls("absolute top-0 h-4 rounded-sm opacity-80 hover:opacity-100", tone), style: { left: `${left}%`, width: `${width}%` }, title: `${segment.label ?? ""}\nstart ${formatDuration(segment.startMs)}, duration ${formatDuration(segment.durationMs)}`, onClick: () => onJump(segment.startMs), "data-testid": "alpaca-trace-timeline-segment", children: width > 8 && (_jsx("span", { className: "block truncate px-1 text-left text-2xs leading-4 text-white", children: segment.label })) }, segment.sequence));
+                    }) }, rowIndex))) })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimersTab.d.ts","sourceRoot":"","sources":["../../../src/tracing/components/TimersTab.tsx"],"names":[],"mappings":"AAQA,wBAAgB,SAAS,CAAC,EACxB,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,+BA8EA"}