effect-start 0.22.0 → 0.23.0

package/dist/console/ui/Services.js

@@ -0,0 +1,246 @@
+import { jsx as _jsx, jsxs as _jsxs } from "effect-start/jsx-runtime";
+import * as Option from "effect/Option";
+const EffectTypeIds = {
+    [Symbol.for("effect/Ref")]: "Ref",
+    [Symbol.for("effect/SynchronizedRef")]: "SynchronizedRef",
+    [Symbol.for("effect/QueueDequeue")]: "Dequeue",
+    [Symbol.for("effect/QueueEnqueue")]: "Enqueue",
+    [Symbol.for("effect/Pool")]: "Pool",
+    [Symbol.for("effect/Deferred")]: "Deferred",
+    [Symbol.for("effect/FiberRef")]: "FiberRef",
+    [Symbol.for("effect/Scope")]: "Scope",
+    [Symbol.for("effect/Tracer")]: "Tracer",
+    [Symbol.for("effect/Request/Cache")]: "RequestCache",
+    [Symbol.for("effect/Logger")]: "Logger",
+    [Symbol.for("effect/Supervisor")]: "Supervisor",
+    [Symbol.for("effect/Clock")]: "Clock",
+    [Symbol.for("effect/Random")]: "Random",
+    [Symbol.for("effect/KeyValueStore")]: "KeyValueStore",
+    [Symbol.for("effect/RateLimiter")]: "RateLimiter",
+};
+function detectEffectType(value) {
+    if (value === null || value === undefined || typeof value !== "object")
+        return undefined;
+    if ("publish" in value && "subscribe" in value && "offer" in value)
+        return "PubSub";
+    for (const sym of Object.getOwnPropertySymbols(value)) {
+        const name = EffectTypeIds[sym];
+        if (name)
+            return name;
+    }
+    return undefined;
+}
+function inspectEffectValue(type, value) {
+    const info = { _type: type };
+    try {
+        switch (type) {
+            case "PubSub": {
+                if (typeof value.capacity === "function")
+                    info.capacity = value.capacity();
+                if (typeof value.isActive === "function")
+                    info.active = value.isActive();
+                if (typeof value.unsafeSize === "function") {
+                    const size = value.unsafeSize();
+                    info.size = Option.isSome(size) ? size.value : "shutdown";
+                }
+                if (value.pubsub && typeof value.pubsub.subscriberCount === "number") {
+                    info.subscribers = value.pubsub.subscriberCount;
+                }
+                break;
+            }
+            case "Enqueue":
+            case "Dequeue": {
+                if (typeof value.capacity === "function")
+                    info.capacity = value.capacity();
+                if (typeof value.isActive === "function")
+                    info.active = value.isActive();
+                if (typeof value.unsafeSize === "function") {
+                    const size = value.unsafeSize();
+                    info.size = Option.isSome(size) ? size.value : "shutdown";
+                }
+                break;
+            }
+            case "Ref":
+            case "SynchronizedRef": {
+                if (value.ref && "current" in value.ref) {
+                    const current = value.ref.current;
+                    info.value = safeSerialize(current);
+                }
+                break;
+            }
+            case "Pool": {
+                if (typeof value.minSize === "number")
+                    info.minSize = value.minSize;
+                if (typeof value.maxSize === "number")
+                    info.maxSize = value.maxSize;
+                if (typeof value.concurrency === "number")
+                    info.concurrency = value.concurrency;
+                if (value.items instanceof Set)
+                    info.items = value.items.size;
+                if (value.available instanceof Set)
+                    info.available = value.available.size;
+                if (value.invalidated instanceof Set)
+                    info.invalidated = value.invalidated.size;
+                if (typeof value.waiters === "number")
+                    info.waiters = value.waiters;
+                break;
+            }
+            case "FiberRef": {
+                if ("initial" in value)
+                    info.initial = safeSerialize(value.initial);
+                break;
+            }
+            case "Deferred": {
+                if ("state" in value && value.state) {
+                    const state = value.state;
+                    if (typeof state === "object" && "_tag" in state) {
+                        info.status = state._tag;
+                    }
+                }
+                break;
+            }
+        }
+    }
+    catch {
+        // ignore introspection errors
+    }
+    return info;
+}
+function safeSerialize(value) {
+    if (value === null || value === undefined)
+        return value;
+    if (typeof value === "bigint")
+        return `${value}n`;
+    if (typeof value === "function")
+        return "<function>";
+    if (typeof value === "symbol")
+        return value.toString();
+    if (typeof value !== "object")
+        return value;
+    if (detectEffectType(value))
+        return `<${detectEffectType(value)}>`;
+    if (Array.isArray(value))
+        return value.map(safeSerialize);
+    const proto = Object.getPrototypeOf(value);
+    if (proto !== null && proto !== Object.prototype)
+        return `<${proto.constructor?.name ?? "object"}>`;
+    const out = {};
+    for (const [k, v] of Object.entries(value)) {
+        if (typeof v === "function")
+            continue;
+        out[k] = safeSerialize(v);
+    }
+    return out;
+}
+function isJsonPrimitive(value) {
+    if (value === null)
+        return true;
+    const t = typeof value;
+    return t === "string" || t === "number" || t === "boolean" || t === "bigint";
+}
+function isPlainJson(value) {
+    if (isJsonPrimitive(value))
+        return true;
+    if (Array.isArray(value))
+        return value.every(isPlainJson);
+    if (typeof value === "object" && value !== null) {
+        const proto = Object.getPrototypeOf(value);
+        if (proto !== null && proto !== Object.prototype)
+            return false;
+        return Object.values(value).every(isPlainJson);
+    }
+    return false;
+}
+function jsonReplacer(_key, v) {
+    if (typeof v === "bigint")
+        return `${v}n`;
+    return v;
+}
+function collectDisplayValues(obj, prefix, out) {
+    if (typeof obj === "function")
+        return;
+    if (isJsonPrimitive(obj) || Array.isArray(obj)) {
+        out[prefix] = safeSerialize(obj);
+        return;
+    }
+    if (typeof obj === "object" && obj !== null) {
+        const et = detectEffectType(obj);
+        if (et) {
+            out[prefix || et] = inspectEffectValue(et, obj);
+            return;
+        }
+        for (const [k, v] of Object.entries(obj)) {
+            if (typeof v === "function")
+                continue;
+            const path = prefix ? `${prefix}.${k}` : k;
+            if (isPlainJson(v)) {
+                out[path] = safeSerialize(v);
+            }
+            else if (typeof v === "object" && v !== null) {
+                collectDisplayValues(v, path, out);
+            }
+        }
+    }
+}
+function kindColor(kind) {
+    if (kind === "config")
+        return { bg: "#2d1f0e", fg: "#fbbf24" };
+    if (kind === "effect")
+        return { bg: "#2d1a3e", fg: "#c084fc" };
+    if (kind === "empty")
+        return { bg: "#1f2937", fg: "#64748b" };
+    if (kind === "function")
+        return { bg: "#1a2e1a", fg: "#4ade80" };
+    return { bg: "#1e3a5f", fg: "#60a5fa" };
+}
+function ServiceRow({ entry }) {
+    const colors = kindColor(entry.type);
+    return (_jsxs("details", { class: "tl-row", children: [_jsxs("summary", { class: "tl-summary tl-cols", children: [_jsx("span", { class: "tl-cell tl-cell-status", children: _jsx("span", { style: `width:8px;height:8px;border-radius:50%;background:${colors.fg};display:block` }) }), _jsx("span", { class: "tl-cell tl-cell-name", children: entry.key }), _jsx("span", { class: "tl-cell tl-cell-dur", children: _jsx("span", { style: `font-size:10px;padding:1px 6px;border-radius:4px;background:${colors.bg};color:${colors.fg}`, children: entry.kind }) })] }), _jsx("div", { class: "tl-body", children: entry.display ? (_jsx("pre", { style: "color:#e2e8f0;font-family:monospace;font-size:12px;margin:0;padding:8px;white-space:pre-wrap;word-break:break-all", children: entry.display })) : (_jsx("div", { style: "padding:4px 8px;color:#64748b;font-size:12px", children: "No inspectable values" })) })] }));
+}
+export function ServiceList({ services }) {
+    if (services.length === 0) {
+        return _jsx("div", { class: "empty", children: "No services registered" });
+    }
+    return (_jsxs("div", { class: "tl-grid", children: [_jsxs("div", { class: "tl-header tl-cols", children: [_jsx("span", { class: "tl-cell tl-cell-status" }), _jsx("span", { class: "tl-cell tl-cell-name", children: "Service" }), _jsx("span", { class: "tl-cell tl-cell-dur", children: "Kind" })] }), services.map((s) => (_jsx(ServiceRow, { entry: s })))] }));
+}
+export function collectServices(unsafeMap) {
+    const entries = [];
+    for (const [key, value] of unsafeMap) {
+        const isConfig = key.toLowerCase().includes("config") || key.toLowerCase().includes("configuration");
+        const effectType = typeof value === "object" && value !== null ? detectEffectType(value) : undefined;
+        if (effectType) {
+            const info = inspectEffectValue(effectType, value);
+            entries.push({
+                key,
+                kind: effectType,
+                display: JSON.stringify(info, jsonReplacer, 2),
+                type: "effect",
+            });
+            continue;
+        }
+        if (typeof value === "function") {
+            entries.push({ key, kind: "function", display: "", type: "value" });
+            continue;
+        }
+        if (value === null || value === undefined) {
+            entries.push({ key, kind: "empty", display: "", type: "value" });
+            continue;
+        }
+        const type = isConfig ? "config" : "value";
+        const plain = {};
+        collectDisplayValues(value, "", plain);
+        const display = Object.keys(plain).length > 0 ? JSON.stringify(plain, jsonReplacer, 2) : "";
+        let kind = "object";
+        if (typeof value !== "object") {
+            kind = typeof value;
+        }
+        else {
+            const proto = Object.getPrototypeOf(value);
+            if (proto && proto.constructor && proto.constructor.name !== "Object") {
+                kind = proto.constructor.name;
+            }
+        }
+        entries.push({ key, kind: isConfig ? "config" : kind, display, type });
+    }
+    return entries.sort((a, b) => a.key.localeCompare(b.key));
+}

package/dist/console/ui/Shell.d.ts

@@ -0,0 +1,10 @@
+export type NavTab = "traces" | "metrics" | "logs" | "errors" | "fibers" | "routes" | "system" | "services" | "git";
+export declare function Sidebar({ prefix, active }: {
+    prefix: string;
+    active: NavTab;
+}): import("../../hyper/HyperNode").HyperNode;
+export declare function Shell({ prefix, active, children, }: {
+    prefix: string;
+    active: NavTab;
+    children: any;
+}): import("../../hyper/HyperNode").HyperNode;

package/dist/console/ui/Shell.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "effect-start/jsx-runtime";
+export function Sidebar({ prefix, active }) {
+    return (_jsxs("div", { class: "sidebar", children: [_jsx("div", { class: "sidebar-title", children: "Effect Console" }), _jsx("a", { href: `${prefix}/traces`, class: active === "traces" ? "nav-link active" : "nav-link", children: "Traces" }), _jsx("a", { href: `${prefix}/metrics`, class: active === "metrics" ? "nav-link active" : "nav-link", children: "Metrics" }), _jsx("a", { href: `${prefix}/logs`, class: active === "logs" ? "nav-link active" : "nav-link", children: "Logs" }), _jsx("a", { href: `${prefix}/errors`, class: active === "errors" ? "nav-link active" : "nav-link", children: "Errors" }), _jsx("a", { href: `${prefix}/fibers`, class: active === "fibers" ? "nav-link active" : "nav-link", children: "Fibers" }), _jsx("a", { href: `${prefix}/routes`, class: active === "routes" ? "nav-link active" : "nav-link", children: "Routes" }), _jsx("a", { href: `${prefix}/system`, class: active === "system" ? "nav-link active" : "nav-link", children: "System" }), _jsx("a", { href: `${prefix}/services`, class: active === "services" ? "nav-link active" : "nav-link", children: "Services" }), _jsx("a", { href: `${prefix}/git`, class: active === "git" ? "nav-link active" : "nav-link", children: "Git" })] }));
+}
+export function Shell({ prefix, active, children, }) {
+    return (_jsxs("div", { class: "shell", children: [_jsx(Sidebar, { prefix: prefix, active: active }), _jsx("div", { class: "content", children: children })] }));
+}

package/dist/console/ui/System.d.ts

@@ -0,0 +1,4 @@
+import type * as ConsoleStore from "../ConsoleStore.ts";
+export declare function SystemStatsView({ stats }: {
+    stats: ConsoleStore.ProcessStats;
+}): import("../../hyper/HyperNode.ts").HyperNode;

package/dist/console/ui/System.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "effect-start/jsx-runtime";
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes}B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)}KB`;
+    if (bytes < 1024 * 1024 * 1024)
+        return `${(bytes / 1024 / 1024).toFixed(1)}MB`;
+    return `${(bytes / 1024 / 1024 / 1024).toFixed(2)}GB`;
+}
+function formatUptime(seconds) {
+    const d = Math.floor(seconds / 86400);
+    const h = Math.floor((seconds % 86400) / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = Math.floor(seconds % 60);
+    if (d > 0)
+        return `${d}d ${h}h ${m}m`;
+    if (h > 0)
+        return `${h}h ${m}m ${s}s`;
+    if (m > 0)
+        return `${m}m ${s}s`;
+    return `${s}s`;
+}
+function StatCard({ label, value, sub }) {
+    return (_jsxs("div", { style: "background:#111827;border:1px solid #374151;border-radius:6px;padding:12px;min-width:180px", children: [_jsx("div", { style: "color:#9ca3af;font-size:11px;margin-bottom:4px", children: label }), _jsx("div", { style: "color:#f3f4f6;font-size:22px;font-weight:700;font-family:monospace", children: value }), sub && _jsx("div", { style: "color:#6b7280;font-size:10px;margin-top:2px", children: sub })] }));
+}
+function BarMeter({ label, used, total }) {
+    const pct = total > 0 ? (used / total) * 100 : 0;
+    const color = pct > 90 ? "#ef4444" : pct > 70 ? "#f59e0b" : "#22c55e";
+    return (_jsxs("div", { style: "background:#111827;border:1px solid #374151;border-radius:6px;padding:12px", children: [_jsxs("div", { style: "display:flex;justify-content:space-between;margin-bottom:6px", children: [_jsx("span", { style: "color:#9ca3af;font-size:11px", children: label }), _jsxs("span", { style: "color:#e5e7eb;font-size:11px;font-family:monospace", children: [formatBytes(used), " / ", formatBytes(total)] })] }), _jsx("div", { style: "height:8px;background:#1f2937;border-radius:4px;overflow:hidden", children: _jsx("div", { style: `width:${pct.toFixed(1)}%;height:100%;background:${color};border-radius:4px;transition:width .3s` }) }), _jsxs("div", { style: "color:#6b7280;font-size:10px;margin-top:2px;text-align:right", children: [pct.toFixed(1), "%"] })] }));
+}
+export function SystemStatsView({ stats }) {
+    const cpuTotal = stats.cpu.user + stats.cpu.system;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: "display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:12px", children: [_jsx(StatCard, { label: "PID", value: String(stats.pid), sub: `${stats.system.platform} ${stats.system.arch}` }), _jsx(StatCard, { label: "Uptime", value: formatUptime(stats.uptime) }), _jsx(StatCard, { label: "CPU Time", value: `${(cpuTotal / 1_000_000).toFixed(2)}s`, sub: `user ${(stats.cpu.user / 1_000_000).toFixed(2)}s / sys ${(stats.cpu.system / 1_000_000).toFixed(2)}s` }), _jsx(StatCard, { label: "Load Average", value: stats.system.loadavg[0].toFixed(2), sub: `${stats.system.loadavg[0].toFixed(2)} / ${stats.system.loadavg[1].toFixed(2)} / ${stats.system.loadavg[2].toFixed(2)}  (${stats.system.cpuCount} cores)` })] }), _jsxs("div", { style: "display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;padding:0 12px 12px", children: [_jsx(BarMeter, { label: "Heap Memory", used: stats.memory.heapUsed, total: stats.memory.heapTotal }), _jsx(BarMeter, { label: "System Memory", used: stats.system.totalmem - stats.system.freemem, total: stats.system.totalmem })] }), _jsxs("div", { style: "display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:0 12px 12px", children: [_jsx(StatCard, { label: "RSS", value: formatBytes(stats.memory.rss) }), _jsx(StatCard, { label: "Peak RSS", value: formatBytes(stats.resourceUsage.maxRSS) }), _jsx(StatCard, { label: "External", value: formatBytes(stats.memory.external) }), _jsx(StatCard, { label: "Array Buffers", value: formatBytes(stats.memory.arrayBuffers) })] }), _jsx("div", { style: "padding:0 12px 12px", children: _jsxs("div", { style: "background:#111827;border:1px solid #374151;border-radius:6px;padding:12px", children: [_jsx("div", { style: "color:#9ca3af;font-size:11px;margin-bottom:8px", children: "Resource Usage" }), _jsxs("div", { style: "display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px", children: [_jsxs("div", { style: "display:flex;justify-content:space-between;font-size:12px", children: [_jsx("span", { style: "color:#6b7280", children: "Page Faults (minor)" }), _jsx("span", { style: "color:#e5e7eb;font-family:monospace", children: stats.resourceUsage.minorPageFault })] }), _jsxs("div", { style: "display:flex;justify-content:space-between;font-size:12px", children: [_jsx("span", { style: "color:#6b7280", children: "Page Faults (major)" }), _jsx("span", { style: "color:#e5e7eb;font-family:monospace", children: stats.resourceUsage.majorPageFault })] }), _jsxs("div", { style: "display:flex;justify-content:space-between;font-size:12px", children: [_jsx("span", { style: "color:#6b7280", children: "FS Reads" }), _jsx("span", { style: "color:#e5e7eb;font-family:monospace", children: stats.resourceUsage.fsRead })] }), _jsxs("div", { style: "display:flex;justify-content:space-between;font-size:12px", children: [_jsx("span", { style: "color:#6b7280", children: "FS Writes" }), _jsx("span", { style: "color:#e5e7eb;font-family:monospace", children: stats.resourceUsage.fsWrite })] }), _jsxs("div", { style: "display:flex;justify-content:space-between;font-size:12px", children: [_jsx("span", { style: "color:#6b7280", children: "Context Switches (vol)" }), _jsx("span", { style: "color:#e5e7eb;font-family:monospace", children: stats.resourceUsage.voluntaryContextSwitches })] }), _jsxs("div", { style: "display:flex;justify-content:space-between;font-size:12px", children: [_jsx("span", { style: "color:#6b7280", children: "Context Switches (invol)" }), _jsx("span", { style: "color:#e5e7eb;font-family:monospace", children: stats.resourceUsage.involuntaryContextSwitches })] })] })] }) })] }));
+}

package/dist/console/ui/Traces.d.ts

@@ -0,0 +1,12 @@
+import * as ConsoleStore from "../ConsoleStore.ts";
+export declare function groupByTraceId(spans: Array<ConsoleStore.ConsoleSpan>): Map<string, Array<ConsoleStore.ConsoleSpan>>;
+export declare function TraceGroup({ spans }: {
+    spans: Array<ConsoleStore.ConsoleSpan>;
+}): import("../../hyper/HyperNode.ts").HyperNode | null;
+export declare function TraceGroups({ spans }: {
+    spans: Array<ConsoleStore.ConsoleSpan>;
+}): import("../../hyper/HyperNode.ts").HyperNode;
+export declare function TraceDetail({ prefix, spans, }: {
+    prefix: string;
+    spans: Array<ConsoleStore.ConsoleSpan>;
+}): import("../../hyper/HyperNode.ts").HyperNode;

package/dist/console/ui/Traces.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "effect-start/jsx-runtime";
+import * as ConsoleStore from "../ConsoleStore.js";
+function formatDuration(ms) {
+    if (ms == null)
+        return "...";
+    if (ms < 1)
+        return `${(ms * 1000).toFixed(0)}µs`;
+    if (ms < 1000)
+        return `${ms.toFixed(1)}ms`;
+    return `${(ms / 1000).toFixed(2)}s`;
+}
+function statusColor(status) {
+    if (status === "ok")
+        return "#22c55e";
+    if (status === "error")
+        return "#ef4444";
+    return "#eab308";
+}
+function KeyValue({ label, value }) {
+    if (value == null)
+        return null;
+    return (_jsxs("div", { style: "display:flex;gap:8px;padding:4px 0;border-bottom:1px solid #1e293b;font-size:12px", children: [_jsx("span", { style: "color:#64748b;min-width:120px", children: label }), _jsx("span", { style: "color:#e2e8f0;font-family:monospace;word-break:break-all", children: value })] }));
+}
+function StatusBadge({ status }) {
+    const bg = status === "ok" ? "#166534" : status === "error" ? "#7f1d1d" : "#713f12";
+    const fg = status === "ok" ? "#4ade80" : status === "error" ? "#fca5a5" : "#fde047";
+    return (_jsx("span", { style: `font-size:11px;padding:2px 8px;border-radius:4px;background:${bg};color:${fg}`, children: status }));
+}
+function buildSpanTree(spans) {
+    const byId = new Map();
+    const childrenOf = new Map();
+    for (const s of spans) {
+        byId.set(s.spanId, s);
+    }
+    const roots = [];
+    for (const s of spans) {
+        if (s.parentSpanId && byId.has(s.parentSpanId)) {
+            let children = childrenOf.get(s.parentSpanId);
+            if (!children) {
+                children = [];
+                childrenOf.set(s.parentSpanId, children);
+            }
+            children.push(s);
+        }
+        else {
+            roots.push(s);
+        }
+    }
+    const sortByStart = (a, b) => Number(a.startTime - b.startTime);
+    roots.sort(sortByStart);
+    for (const children of childrenOf.values()) {
+        children.sort(sortByStart);
+    }
+    const result = [];
+    function walk(span, depth, isLast, ancestors) {
+        const children = childrenOf.get(span.spanId) ?? [];
+        result.push({
+            span,
+            depth,
+            childCount: children.length,
+            isLastChild: isLast,
+            ancestorHasNextSibling: [...ancestors],
+        });
+        for (let i = 0; i < children.length; i++) {
+            walk(children[i], depth + 1, i === children.length - 1, [...ancestors, !isLast]);
+        }
+    }
+    for (let i = 0; i < roots.length; i++) {
+        walk(roots[i], 0, i === roots.length - 1, []);
+    }
+    return result;
+}
+// --- Components ---
+function TreeConnectors({ tree }) {
+    if (tree.depth === 0)
+        return null;
+    const indent = tree.depth * 20;
+    const elements = [];
+    for (let i = 0; i < tree.ancestorHasNextSibling.length; i++) {
+        if (tree.ancestorHasNextSibling[i]) {
+            elements.push(_jsx("div", { class: "wf-vline", style: `left:${i * 20 + 6}px` }));
+        }
+    }
+    if (tree.isLastChild) {
+        elements.push(_jsx("div", { class: "wf-elbow", style: `left:${(tree.depth - 1) * 20 + 6}px` }));
+    }
+    else {
+        elements.push(_jsx("div", { class: "wf-vline", style: `left:${(tree.depth - 1) * 20 + 6}px` }));
+    }
+    elements.push(_jsx("div", { class: "wf-hline", style: `left:${(tree.depth - 1) * 20 + 6}px;top:50%` }));
+    return (_jsx("div", { class: "wf-tree", style: `width:${indent}px;position:relative`, children: elements }));
+}
+function TimeAxis({ totalMs }) {
+    const ticks = 5;
+    const labels = [];
+    for (let i = 0; i <= ticks; i++) {
+        labels.push(formatDuration((totalMs / ticks) * i));
+    }
+    return (_jsxs("div", { class: "wf-axis", children: [_jsx("div", { style: "padding:4px 8px;color:#64748b;font-size:11px", children: "Span" }), _jsx("div", { class: "wf-axis-ticks", children: labels.map((l) => (_jsx("span", { children: l }))) })] }));
+}
+function WaterfallRow({ tree, totalMs, rootStart, }) {
+    const s = tree.span;
+    const offsetMs = Number(s.startTime - rootStart) / 1_000_000;
+    const durMs = s.durationMs ?? 0;
+    const leftPct = totalMs > 0 ? Math.min(100, (offsetMs / totalMs) * 100) : 0;
+    const widthPct = totalMs > 0 ? Math.max(0.5, Math.min(100 - leftPct, (durMs / totalMs) * 100)) : 100;
+    const color = statusColor(s.status);
+    const durLabelLeft = leftPct + widthPct + 0.5;
+    return (_jsxs("div", { class: "wf-row", children: [_jsxs("div", { class: "wf-name", children: [_jsx(TreeConnectors, { tree: tree }), _jsx("span", { style: "overflow:hidden;text-overflow:ellipsis", children: s.name }), tree.childCount > 0 && _jsx("span", { class: "wf-badge", children: tree.childCount })] }), _jsxs("div", { class: "wf-bar-cell", children: [_jsx("div", { class: "wf-bar", style: `left:${leftPct}%;width:${widthPct}%;background:${color}` }), _jsx("div", { class: "wf-dur", style: `left:${durLabelLeft}%`, children: formatDuration(s.durationMs) })] })] }));
+}
+function MiniWaterfall({ spans, totalMs, rootStart, }) {
+    if (totalMs <= 0)
+        return _jsx("div", { class: "mini-wf" });
+    return (_jsx("div", { class: "mini-wf", children: spans.map((s) => {
+            const offsetMs = Number(s.startTime - rootStart) / 1_000_000;
+            const durMs = s.durationMs ?? 0;
+            const leftPct = Math.min(100, (offsetMs / totalMs) * 100);
+            const widthPct = Math.max(0.3, Math.min(100 - leftPct, (durMs / totalMs) * 100));
+            return (_jsx("div", { class: "mini-wf-bar", style: `left:${leftPct}%;width:${widthPct}%;background:${statusColor(s.status)}` }));
+        }) }));
+}
+// --- Exports ---
+export function groupByTraceId(spans) {
+    const groups = new Map();
+    for (const span of spans) {
+        let group = groups.get(span.traceId);
+        if (!group) {
+            group = [];
+            groups.set(span.traceId, group);
+        }
+        group.push(span);
+    }
+    return groups;
+}
+export function TraceGroup({ spans }) {
+    if (spans.length === 0)
+        return null;
+    const root = spans.find((s) => !s.parentSpanId) ?? spans[0];
+    const traceId = root.traceId;
+    const totalMs = root.durationMs ?? 0;
+    const rootStart = root.startTime;
+    const hasError = spans.some((s) => s.status === "error");
+    const status = hasError ? "error" : root.status;
+    return (_jsxs("details", { class: "tl-row", children: [_jsxs("summary", { class: "tl-summary tl-cols", children: [_jsx("span", { class: "tl-cell tl-cell-status", children: _jsx("span", { style: `width:8px;height:8px;border-radius:50%;background:${statusColor(status)};display:block` }) }), _jsx("span", { class: "tl-cell tl-cell-name", children: root.name }), _jsx("span", { class: "tl-cell tl-cell-spans", children: spans.length }), _jsx("span", { class: "tl-cell tl-cell-dur", children: formatDuration(totalMs) }), _jsx("span", { class: "tl-cell tl-cell-id", children: traceId.slice(0, 12) })] }), _jsxs("div", { class: "tl-body", children: [_jsxs("div", { style: "display:flex;gap:12px;align-items:center;margin-bottom:8px", children: [_jsx("a", { href: `${ConsoleStore.store.prefix}/traces/${traceId}`, style: "color:#38bdf8;font-size:12px;text-decoration:none", children: "Full trace view" }), _jsx(StatusBadge, { status: status }), _jsxs("span", { style: "color:#64748b;font-size:11px", children: [spans.length, " span", spans.length !== 1 ? "s" : ""] }), _jsx("span", { style: "color:#64748b;font-size:11px;font-family:monospace", children: formatDuration(totalMs) }), _jsx("span", { style: "color:#475569;font-size:10px;font-family:monospace", children: traceId })] }), spans.map((s) => {
+                        const offsetMs = Number(s.startTime - rootStart) / 1_000_000;
+                        const leftPct = totalMs > 0 ? Math.min(100, (offsetMs / totalMs) * 100) : 0;
+                        const widthPct = totalMs > 0
+                            ? Math.max(0.5, Math.min(100 - leftPct, ((s.durationMs ?? 0) / totalMs) * 100))
+                            : 100;
+                        return (_jsxs("div", { style: "display:flex;align-items:center;gap:8px;padding:2px 0;font-size:11px;font-family:monospace", children: [_jsx("span", { style: `color:${statusColor(s.status)};min-width:10px`, children: s.parentSpanId ? "  " : "" }), _jsx("span", { style: "color:#d1d5db;min-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap", children: s.name }), _jsx("div", { style: "flex:1;height:10px;background:#1f2937;border-radius:2px;position:relative;overflow:hidden", children: _jsx("div", { style: `position:absolute;height:100%;border-radius:2px;background:${statusColor(s.status)};left:${leftPct}%;width:${widthPct}%` }) }), _jsx("span", { style: "color:#9ca3af;min-width:60px;text-align:right", children: formatDuration(s.durationMs) })] }));
+                    })] })] }));
+}
+export function TraceGroups({ spans }) {
+    const groups = groupByTraceId(spans);
+    const sorted = Array.from(groups.values())
+        .sort((a, b) => Number(b[0].startTime) - Number(a[0].startTime))
+        .slice(0, 50);
+    if (sorted.length === 0) {
+        return _jsx("div", { class: "empty", children: "Waiting for traces..." });
+    }
+    return (_jsxs("div", { class: "tl-grid", children: [_jsxs("div", { class: "tl-header tl-cols", children: [_jsx("span", { class: "tl-cell tl-cell-status" }), _jsx("span", { class: "tl-cell tl-cell-name", children: "Name" }), _jsx("span", { class: "tl-cell tl-cell-spans", children: "Spans" }), _jsx("span", { class: "tl-cell tl-cell-dur", children: "Duration" }), _jsx("span", { class: "tl-cell tl-cell-id", children: "Trace" })] }), sorted.map((group) => (_jsx(TraceGroup, { spans: group })))] }));
+}
+export function TraceDetail({ prefix, spans, }) {
+    if (spans.length === 0) {
+        return _jsx("div", { class: "empty", children: "Trace not found" });
+    }
+    const root = spans.find((s) => !s.parentSpanId) ?? spans[0];
+    const traceId = root.traceId;
+    const totalMs = root.durationMs ?? 0;
+    const rootStart = root.startTime;
+    const startDate = new Date(Number(rootStart) / 1_000_000);
+    const tree = buildSpanTree(spans);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: "padding:12px 16px;border-bottom:1px solid #1e293b", children: [_jsxs("div", { style: "display:flex;align-items:center;gap:8px;margin-bottom:8px", children: [_jsx("a", { href: `${prefix}/traces`, style: "color:#64748b;text-decoration:none;font-size:12px", children: "Traces" }), _jsx("span", { style: "color:#475569", children: "/" }), _jsx("span", { style: "color:#e2e8f0;font-size:13px;font-family:monospace", children: root.name })] }), _jsxs("div", { style: "display:flex;gap:16px;font-size:12px;color:#94a3b8;align-items:center", children: [_jsx(StatusBadge, { status: root.status }), _jsxs("span", { children: [spans.length, " span", spans.length !== 1 ? "s" : ""] }), _jsx("span", { children: formatDuration(totalMs) }), _jsx("span", { children: startDate.toLocaleTimeString("en", { hour12: false }) }), _jsx("span", { style: "color:#475569;font-family:monospace;font-size:10px", children: traceId })] })] }), _jsx("div", { style: "padding:8px 16px", children: _jsx(MiniWaterfall, { spans: spans, totalMs: totalMs, rootStart: rootStart }) }), _jsxs("div", { style: "padding:0 8px", children: [_jsx(TimeAxis, { totalMs: totalMs }), _jsx("div", { class: "wf-grid", children: tree.map((t) => (_jsx(WaterfallRow, { tree: t, totalMs: totalMs, rootStart: rootStart }))) })] }), _jsx("div", { style: "padding:8px", children: tree.map((t) => {
+                    const s = t.span;
+                    const stacktrace = s.attributes["code.stacktrace"];
+                    const customAttrs = Object.entries(s.attributes).filter(([k]) => k !== "code.stacktrace");
+                    return (_jsxs("details", { class: "span-panel", style: "margin-bottom:4px", children: [_jsxs("summary", { class: "span-panel-header", children: [_jsx("span", { style: `width:8px;height:8px;border-radius:50%;background:${statusColor(s.status)};flex-shrink:0` }), _jsx("span", { style: "color:#e2e8f0;font-family:monospace;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1", children: s.name }), _jsx(StatusBadge, { status: s.status }), _jsx("span", { style: "color:#64748b;font-size:11px;font-family:monospace;margin-left:auto", children: formatDuration(s.durationMs) })] }), _jsxs("div", { class: "span-panel-body", children: [_jsx(KeyValue, { label: "Span ID", value: s.spanId }), _jsx(KeyValue, { label: "Kind", value: s.kind }), s.parentSpanId && _jsx(KeyValue, { label: "Parent", value: s.parentSpanId }), stacktrace && _jsx(KeyValue, { label: "Source", value: stacktrace }), customAttrs.map(([k, v]) => (_jsx(KeyValue, { label: k, value: String(v) }))), s.events.length > 0 && (_jsxs("div", { style: "margin-top:4px", children: [_jsx("span", { style: "color:#64748b;font-size:11px", children: "Events:" }), s.events.map((ev) => (_jsxs("div", { style: "padding:2px 0;font-size:11px;color:#94a3b8;font-family:monospace", children: [ev.name, ev.attributes && (_jsxs("span", { style: "color:#64748b", children: [" ", JSON.stringify(ev.attributes)] }))] })))] }))] })] }));
+                }) })] }));
+}

package/dist/datastar/actions/fetch.d.ts

@@ -1,4 +1,4 @@
-import type { SignalFilterOptions } from "../engine.ts";
+import { type SignalFilterOptions } from "../engine.ts";
 export declare const STARTED = "started";
 export declare const FINISHED = "finished";
 export declare const ERROR = "error";

package/dist/datastar/actions/fetch.js

@@ -1,13 +1,9 @@
-import { DATASTAR_FETCH_EVENT } from "../engine.js";
-import { action } from "../engine.js";
-import { filtered, startPeeking, stopPeeking, } from "../engine.js";
+import { action, DATASTAR_FETCH_EVENT, filtered, startPeeking, stopPeeking, } from "../engine.js";
 import { kebab } from "../utils.js";
 const createHttpMethod = (name, method, openWhenHiddenDefault = true) => action({
     name,
     apply: async ({ el, evt, error, cleanups }, url, { selector, headers: userHeaders, contentType = "json", filterSignals: { include = /.*/, exclude = /(^|\.)_/ } = {}, openWhenHidden = openWhenHiddenDefault, payload, requestCancellation = "auto", retry = "auto", retryInterval = 1_000, retryScaler = 2, retryMaxWaitMs = 30_000, retryMaxCount = 10, } = {}) => {
-        const controller = requestCancellation instanceof AbortController
-            ? requestCancellation
-            : new AbortController();
+        const controller = requestCancellation instanceof AbortController ? requestCancellation : new AbortController();
         if (requestCancellation === "auto") {
             cleanups.get(`@${name}`)?.();
             cleanups.set(`@${name}`, async () => {
@@ -71,9 +67,7 @@ const createHttpMethod = (name, method, openWhenHiddenDefault = true) => action(
             const queryParams = new URLSearchParams(urlInstance.search);
             if (contentType === "json") {
                 startPeeking();
-                payload = payload !== undefined
-                    ? payload
-                    : filtered({ include, exclude });
+                payload = payload !== undefined ? payload : filtered({ include, exclude });
                 stopPeeking();
                 const body = JSON.stringify(payload);
                 if (method === "GET") {
@@ -109,8 +103,7 @@ const createHttpMethod = (name, method, openWhenHiddenDefault = true) => action(
                     if (name)
                         formData.append(name, submitter.value);
                 }
-                const multipart = formEl
-                    .getAttribute("enctype") === "multipart/form-data";
+                const multipart = formEl.getAttribute("enctype") === "multipart/form-data";
                 if (!multipart) {
                     headers["Content-Type"] = "application/x-www-form-urlencoded";
                 }
@@ -201,7 +194,6 @@ const getLines = (onLine) => {
                         }
                         break;
                     // @ts-expect-error:7029
-                    // biome-ignore lint/suspicious/noFallthroughSwitchClause: intentional fallthrough for CR to LF
                     case 13:
                         discardTrailingNewline = true;
                     case 10:
@@ -243,12 +235,12 @@ const getMessages = (onId, onRetry, onMessage) => {
                     message.event = value;
                     break;
                 case "id":
-                    onId(message.id = value);
+                    onId((message.id = value));
                     break;
                 case "retry": {
                     const retry = +value;
                     if (!Number.isNaN(retry)) {
-                        onRetry(message.retry = retry);
+                        onRetry((message.retry = retry));
                     }
                     break;
                 }
@@ -330,10 +322,10 @@ const fetchEventSource = (input, el, { signal: inputSignal, headers: inputHeader
                 const isErrorStatus = status >= 400 && status < 600;
                 if (status !== 200) {
                     onclose?.();
-                    if (retry !== "never"
-                        && !isNoContentStatus
-                        && !isRedirectStatus
-                        && (retry === "always" || (retry === "error" && isErrorStatus))) {
+                    if (retry !== "never" &&
+                        !isNoContentStatus &&
+                        !isRedirectStatus &&
+                        (retry === "always" || (retry === "error" && isErrorStatus))) {
                         clearTimeout(retryTimer);
                         retryTimer = setTimeout(create, retryInterval);
                         return;

package/dist/datastar/actions/peek.js

@@ -1,5 +1,4 @@
-import { action } from "../engine.js";
-import { startPeeking, stopPeeking, } from "../engine.js";
+import { action, startPeeking, stopPeeking } from "../engine.js";
 action({
     name: "peek",
     apply(_, fn) {

package/dist/datastar/actions/setAll.js

@@ -1,5 +1,4 @@
-import { action } from "../engine.js";
-import { filtered, mergePatch, startPeeking, stopPeeking, } from "../engine.js";
+import { action, filtered, mergePatch, startPeeking, stopPeeking, } from "../engine.js";
 import { updateLeaves } from "../utils.js";
 action({
     name: "setAll",

package/dist/datastar/actions/toggleAll.js

@@ -1,5 +1,4 @@
-import { action } from "../engine.js";
-import { filtered, mergePatch, startPeeking, stopPeeking, } from "../engine.js";
+import { action, filtered, mergePatch, startPeeking, stopPeeking, } from "../engine.js";
 import { updateLeaves } from "../utils.js";
 action({
     name: "toggleAll",

package/dist/datastar/attributes/attr.js

@@ -1,5 +1,4 @@
-import { attribute } from "../engine.js";
-import { effect } from "../engine.js";
+import { attribute, effect } from "../engine.js";
 attribute({
     name: "attr",
     requirement: { value: "must" },