effect-start 0.22.0 → 0.23.0

package/dist/console/routes/tree.js

@@ -0,0 +1,29 @@
+import * as Route from "../../Route.js";
+import errorsRoute from "./errors/route.js";
+import fiberDetailRoute from "./fiberDetail.js";
+import fibersRoute from "./fibers/route.js";
+import gitRoute from "./git/route.js";
+import layout from "./layout.js";
+import logsRoute from "./logs/route.js";
+import metricsRoute from "./metrics/route.js";
+import systemRoute from "./system/route.js";
+import rootRoute from "./route.js";
+import routesRoute from "./routes/route.js";
+import servicesRoute from "./services/route.js";
+import traceDetailRoute from "./traceDetail.js";
+import tracesRoute from "./traces/route.js";
+export default Route.tree({
+    "*": layout,
+    "/": rootRoute,
+    "/traces": tracesRoute,
+    "/traces/:id": traceDetailRoute,
+    "/metrics": metricsRoute,
+    "/logs": logsRoute,
+    "/errors": errorsRoute,
+    "/fibers": fibersRoute,
+    "/fibers/:id": fiberDetailRoute,
+    "/routes": routesRoute,
+    "/system": systemRoute,
+    "/services": servicesRoute,
+    "/git": gitRoute,
+});

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

@@ -0,0 +1,4 @@
+import * as ConsoleStore from "../ConsoleStore.ts";
+export declare function ErrorLine({ error }: {
+    error: ConsoleStore.ConsoleError;
+}): import("../../hyper/HyperNode.ts").HyperNode;

package/dist/console/ui/Errors.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "effect-start/jsx-runtime";
+import * as ConsoleStore from "../ConsoleStore.js";
+export function ErrorLine({ error }) {
+    const time = error.date.toLocaleTimeString("en", {
+        hour12: false,
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+    });
+    const firstLine = error.prettyPrint.split("\n")[0] ?? "";
+    const tags = error.details.map((d) => d.tag).filter(Boolean);
+    const allSpans = error.details.map((d) => d.span).filter(Boolean);
+    const allProps = error.details.flatMap((d) => Object.entries(d.properties));
+    return (_jsxs("details", { style: "border-bottom:1px solid #1e293b", children: [_jsxs("summary", { style: "display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-size:12px;font-family:monospace", children: [_jsx("span", { style: "color:#6b7280;flex-shrink:0", children: time }), _jsx("span", { style: "color:#fca5a5", children: firstLine })] }), _jsxs("div", { style: "padding:4px 12px 10px;font-size:12px;font-family:monospace", children: [tags.length > 0 && (_jsx("div", { style: "display:flex;flex-wrap:wrap;gap:4px 12px;margin-bottom:6px", children: tags.map((t) => (_jsxs("div", { children: [_jsx("span", { style: "color:#64748b", children: "tag " }), _jsx("span", { style: "color:#fca5a5;text-decoration:underline;cursor:copy", "data-on:click": `(e) => { e.signals.errorTag.value = '${t}'; e.actions.get(location.href, { contentType: 'form' }) }`, children: t })] }))) })), allSpans.length > 0 && (_jsx("div", { style: "display:flex;flex-wrap:wrap;gap:4px 12px;margin-bottom:6px", children: allSpans.map((s) => (_jsxs("div", { children: [_jsx("span", { style: "color:#64748b", children: "span " }), _jsx("span", { style: "color:#818cf8", children: s })] }))) })), allProps.length > 0 && (_jsx("div", { style: "display:flex;flex-wrap:wrap;gap:4px 12px;margin-bottom:6px", children: allProps.map(([k, v]) => (_jsxs("div", { children: [_jsx("span", { style: "color:#64748b", children: k }), _jsx("span", { style: "color:#4b5563", children: "=" }), _jsx("span", { style: "color:#e2e8f0", children: typeof v === "object" ? JSON.stringify(v) : String(v) })] }))) })), _jsxs("div", { style: "margin-bottom:6px", children: [_jsx("span", { style: "color:#64748b", children: "fiber " }), _jsx("a", { href: `${ConsoleStore.store.prefix}/fibers/${error.fiberId.replace("#", "")}`, style: "color:#9ca3af;text-decoration:none", children: error.fiberId })] }), _jsx("pre", { style: "color:#9ca3af;font-size:11px;padding:0;margin:0;white-space:pre-wrap;word-break:break-all", children: error.prettyPrint })] })] }));
+}

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

@@ -0,0 +1,24 @@
+import * as ConsoleStore from "../ConsoleStore.ts";
+export interface FiberSummary {
+    readonly id: string;
+    logCount: number;
+    spanCount: number;
+    lastSeen: Date | undefined;
+    alive: "alive" | "dead" | "unknown";
+    readonly levels: Set<string>;
+}
+export declare function getParentChain(fiberId: string, fiberParents: Map<string, string>): Array<string>;
+export declare function collectFibers(logs: Array<ConsoleStore.ConsoleLog>, spans: Array<ConsoleStore.ConsoleSpan>): Array<FiberSummary>;
+export declare function FiberList({ fibers, prefix }: {
+    fibers: Array<FiberSummary>;
+    prefix: string;
+}): import("../../hyper/HyperNode.ts").HyperNode;
+export declare function FiberDetail({ prefix, fiberId, logs, spans, alive, parents, context, }: {
+    prefix: string;
+    fiberId: string;
+    logs: Array<ConsoleStore.ConsoleLog>;
+    spans: Array<ConsoleStore.ConsoleSpan>;
+    alive: "alive" | "dead" | "unknown";
+    parents: Array<string>;
+    context: ConsoleStore.FiberContext | undefined;
+}): import("../../hyper/HyperNode.ts").HyperNode;

package/dist/console/ui/Fibers.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "effect-start/jsx-runtime";
+import * as ConsoleStore from "../ConsoleStore.js";
+import * as Logs from "./Logs.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 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 }));
+}
+export function getParentChain(fiberId, fiberParents) {
+    const chain = [];
+    const visited = new Set();
+    let current = fiberParents.get(fiberId);
+    while (current && !visited.has(current)) {
+        chain.push(current);
+        visited.add(current);
+        current = fiberParents.get(current);
+    }
+    return chain.reverse();
+}
+export function collectFibers(logs, spans) {
+    const map = new Map();
+    const counter = ConsoleStore.fiberIdCounter();
+    const now = Date.now();
+    for (const log of logs) {
+        let fiber = map.get(log.fiberId);
+        if (!fiber) {
+            fiber = {
+                id: log.fiberId,
+                logCount: 0,
+                spanCount: 0,
+                lastSeen: undefined,
+                alive: "unknown",
+                levels: new Set(),
+            };
+            map.set(log.fiberId, fiber);
+        }
+        fiber.logCount++;
+        fiber.levels.add(log.level);
+        if (!fiber.lastSeen || log.date > fiber.lastSeen) {
+            fiber.lastSeen = log.date;
+        }
+    }
+    for (const span of spans) {
+        const fiberId = span.attributes["fiber.id"];
+        if (!fiberId)
+            continue;
+        let fiber = map.get(fiberId);
+        if (!fiber) {
+            fiber = {
+                id: fiberId,
+                logCount: 0,
+                spanCount: 0,
+                lastSeen: undefined,
+                alive: "unknown",
+                levels: new Set(),
+            };
+            map.set(fiberId, fiber);
+        }
+        fiber.spanCount++;
+    }
+    for (const fiber of map.values()) {
+        const num = parseInt(fiber.id.replace("#", ""), 10);
+        if (!isNaN(num)) {
+            if (fiber.lastSeen && now - fiber.lastSeen.getTime() < 5000) {
+                fiber.alive = "alive";
+            }
+            else if (num < counter) {
+                fiber.alive = "dead";
+            }
+        }
+    }
+    return Array.from(map.values()).sort((a, b) => {
+        const na = parseInt(a.id.replace("#", ""), 10);
+        const nb = parseInt(b.id.replace("#", ""), 10);
+        return nb - na;
+    });
+}
+function FiberRow({ fiber, prefix }) {
+    const aliveColor = fiber.alive === "alive" ? "#4ade80" : fiber.alive === "dead" ? "#ef4444" : "#94a3b8";
+    const aliveBg = fiber.alive === "alive" ? "#166534" : fiber.alive === "dead" ? "#7f1d1d" : "#334155";
+    const lastSeen = fiber.lastSeen
+        ? fiber.lastSeen.toLocaleTimeString("en", {
+            hour12: false,
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+        })
+        : "—";
+    return (_jsxs("a", { href: `${prefix}/fibers/${fiber.id.replace("#", "")}`, style: "display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid #1e293b;text-decoration:none;transition:background .1s", onmouseover: "this.style.background='#1e293b'", onmouseout: "this.style.background='transparent'", children: [_jsx("span", { style: "color:#e2e8f0;font-family:monospace;font-size:13px;font-weight:600;min-width:60px", children: fiber.id }), _jsx("span", { style: `font-size:10px;padding:2px 8px;border-radius:4px;background:${aliveBg};color:${aliveColor}`, children: fiber.alive }), _jsxs("span", { style: "color:#94a3b8;font-size:12px", children: [fiber.spanCount, " span", fiber.spanCount !== 1 ? "s" : ""] }), _jsxs("span", { style: "color:#94a3b8;font-size:12px", children: [fiber.logCount, " log", fiber.logCount !== 1 ? "s" : ""] }), fiber.levels.has("ERROR") && (_jsx("span", { style: "font-size:10px;padding:1px 6px;border-radius:4px;background:#7f1d1d;color:#fca5a5", children: "ERROR" })), fiber.levels.has("WARNING") && (_jsx("span", { style: "font-size:10px;padding:1px 6px;border-radius:4px;background:#713f12;color:#fde047", children: "WARN" })), _jsx("span", { style: "color:#6b7280;font-size:11px;margin-left:auto;font-family:monospace", children: lastSeen })] }));
+}
+export function FiberList({ fibers, prefix }) {
+    if (fibers.length === 0) {
+        return _jsx("div", { class: "empty", children: "Waiting for fibers..." });
+    }
+    return (_jsx(_Fragment, { children: fibers.map((f) => (_jsx(FiberRow, { fiber: f, prefix: prefix }))) }));
+}
+export function FiberDetail({ prefix, fiberId, logs, spans, alive, parents, context, }) {
+    const aliveColor = alive === "alive" ? "#4ade80" : alive === "dead" ? "#ef4444" : "#94a3b8";
+    const aliveBg = alive === "alive" ? "#166534" : alive === "dead" ? "#7f1d1d" : "#334155";
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "tab-header", children: [_jsxs("div", { style: "display:flex;align-items:center;gap:8px;margin-bottom:4px", children: [_jsx("a", { href: `${prefix}/fibers`, style: "color:#64748b;text-decoration:none;font-size:12px", children: "Fibers" }), _jsx("span", { style: "color:#475569", children: "/" }), _jsx("span", { style: "color:#e2e8f0;font-size:13px;font-family:monospace", children: fiberId }), _jsx("span", { style: `font-size:11px;padding:2px 8px;border-radius:4px;background:${aliveBg};color:${aliveColor}`, children: alive })] }), _jsxs("div", { style: "display:flex;gap:16px;font-size:12px;color:#94a3b8", children: [_jsxs("span", { children: [logs.length, " log", logs.length !== 1 ? "s" : ""] }), _jsxs("span", { children: [spans.length, " span", spans.length !== 1 ? "s" : ""] })] })] }), _jsxs("div", { class: "tab-body", children: [parents.length > 0 && (_jsxs("div", { style: "padding:8px 16px", children: [_jsx("div", { style: "color:#94a3b8;font-size:12px;font-weight:600;margin-bottom:8px", children: "Parents" }), _jsx("div", { style: "display:flex;gap:6px;flex-wrap:wrap", children: parents.map((id) => (_jsx("a", { href: `${prefix}/fibers/${id.replace("#", "")}`, style: "color:#38bdf8;font-family:monospace;font-size:13px;text-decoration:none;padding:4px 10px;background:#111827;border:1px solid #1e293b;border-radius:6px", children: id }))) })] })), context &&
+                        (context.spanName || context.traceId || Object.keys(context.annotations).length > 0) && (_jsxs("div", { style: "padding:8px 16px", children: [_jsx("div", { style: "color:#94a3b8;font-size:12px;font-weight:600;margin-bottom:8px", children: "Context" }), _jsxs("div", { style: "background:#111827;border:1px solid #1e293b;border-radius:6px;padding:8px 12px", children: [context.spanName && _jsx(KeyValue, { label: "Span", value: context.spanName }), context.traceId && (_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: "Trace" }), _jsx("a", { href: `${prefix}/traces/${context.traceId}`, style: "color:#38bdf8;font-family:monospace;word-break:break-all;text-decoration:none", children: context.traceId })] })), Object.entries(context.annotations).map(([k, v]) => (_jsx(KeyValue, { label: k, value: typeof v === "object" ? JSON.stringify(v) : String(v) })))] })] })), spans.length > 0 && (_jsxs("div", { style: "padding:8px 16px", children: [_jsx("div", { style: "color:#94a3b8;font-size:12px;font-weight:600;margin-bottom:8px", children: "Spans" }), spans.map((s) => {
+                                const stacktrace = s.attributes["code.stacktrace"];
+                                return (_jsxs("div", { style: "margin-bottom:6px;background:#111827;border:1px solid #1e293b;border-radius:6px;padding:8px 12px", children: [_jsxs("div", { style: "display:flex;align-items:center;gap:8px;margin-bottom:4px", children: [_jsx("a", { href: `${prefix}/traces/${s.traceId}`, style: "color:#38bdf8;font-family:monospace;font-size:13px;text-decoration:none", children: s.name }), _jsx(StatusBadge, { status: s.status }), _jsx("span", { style: "color:#64748b;font-size:11px;margin-left:auto;font-family:monospace", children: formatDuration(s.durationMs) })] }), _jsx(KeyValue, { label: "Trace", value: s.traceId }), _jsx(KeyValue, { label: "Kind", value: s.kind }), stacktrace && _jsx(KeyValue, { label: "Source", value: stacktrace }), Object.entries(s.attributes)
+                                            .filter(([k]) => k !== "code.stacktrace")
+                                            .map(([k, v]) => (_jsx(KeyValue, { label: k, value: String(v) })))] }));
+                            })] })), logs.length > 0 && (_jsxs("div", { style: "padding:8px 16px", children: [_jsx("div", { style: "color:#94a3b8;font-size:12px;font-weight:600;margin-bottom:8px", children: "Logs" }), logs.map((l) => (_jsx(Logs.LogLine, { log: l })))] })), logs.length === 0 && spans.length === 0 && (_jsxs("div", { class: "empty", children: ["No data found for fiber ", fiberId] }))] })] }));
+}

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

@@ -0,0 +1,20 @@
+export interface GitFileEntry {
+    readonly status: string;
+    readonly path: string;
+}
+export interface GitStatus {
+    readonly oid: string;
+    readonly head: string;
+    readonly upstream: string | undefined;
+    readonly ahead: number;
+    readonly behind: number;
+    readonly tag: string | undefined;
+    readonly tagDistance: number;
+    readonly staged: Array<GitFileEntry>;
+    readonly unstaged: Array<GitFileEntry>;
+    readonly untracked: Array<string>;
+}
+export declare function parseGitStatus(porcelain: string, tagLine: string): GitStatus;
+export declare function GitStatusView({ status }: {
+    status: GitStatus;
+}): import("../../hyper/HyperNode").HyperNode;

package/dist/console/ui/Git.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "effect-start/jsx-runtime";
+const xyToLabel = {
+    M: "modified",
+    A: "new file",
+    D: "deleted",
+    R: "renamed",
+    C: "copied",
+    T: "typechange",
+    U: "unmerged",
+};
+function statusLabel(code) {
+    return xyToLabel[code] ?? code;
+}
+function gitStatusColor(code) {
+    if (code === "D")
+        return "#ef4444";
+    if (code === "A")
+        return "#4ade80";
+    if (code === "R" || code === "C")
+        return "#60a5fa";
+    if (code === "M")
+        return "#fbbf24";
+    return "#94a3b8";
+}
+export function parseGitStatus(porcelain, tagLine) {
+    const lines = porcelain.split("\n");
+    let oid = "";
+    let head = "";
+    let upstream;
+    let ahead = 0;
+    let behind = 0;
+    const staged = [];
+    const unstaged = [];
+    const untracked = [];
+    for (const line of lines) {
+        if (line.startsWith("# branch.oid ")) {
+            oid = line.slice("# branch.oid ".length, "# branch.oid ".length + 7);
+        }
+        else if (line.startsWith("# branch.head ")) {
+            head = line.slice("# branch.head ".length);
+        }
+        else if (line.startsWith("# branch.upstream ")) {
+            upstream = line.slice("# branch.upstream ".length);
+        }
+        else if (line.startsWith("# branch.ab ")) {
+            const parts = line.slice("# branch.ab ".length).split(" ");
+            ahead = parseInt(parts[0]?.slice(1) ?? "0", 10);
+            behind = parseInt(parts[1]?.slice(1) ?? "0", 10);
+        }
+        else if (line.startsWith("1 ") || line.startsWith("2 ")) {
+            const xy = line.slice(2, 4);
+            const x = xy[0];
+            const y = xy[1];
+            const parts = line.split("\t");
+            const firstParts = parts[0].split(" ");
+            const path = parts.length > 1 ? parts[1] : firstParts[firstParts.length - 1];
+            if (x !== "." && x !== "?")
+                staged.push({ status: x, path });
+            if (y !== "." && y !== "?")
+                unstaged.push({ status: y, path });
+        }
+        else if (line.startsWith("u ")) {
+            const parts = line.split("\t");
+            const path = parts.length > 1 ? parts[1] : line.split(" ").pop();
+            staged.push({ status: "U", path });
+        }
+        else if (line.startsWith("? ")) {
+            untracked.push(line.slice(2));
+        }
+    }
+    let tag;
+    let tagDistance = 0;
+    const tagParts = tagLine.trim().split("\n");
+    if (tagParts[0] && !tagParts[0].startsWith("fatal")) {
+        tag = tagParts[0];
+        tagDistance = parseInt(tagParts[1] ?? "0", 10);
+    }
+    return { oid, head, upstream, ahead, behind, tag, tagDistance, staged, unstaged, untracked };
+}
+function GitKV({ label, children }) {
+    return (_jsxs("div", { style: "display:flex;gap:8px;padding:3px 0;font-size:13px;font-family:monospace", children: [_jsx("span", { style: "color:#6b7280;min-width:80px", children: label }), _jsx("span", { style: "color:#e5e7eb", children: children })] }));
+}
+function GitFileRow({ entry }) {
+    const label = statusLabel(entry.status);
+    const color = gitStatusColor(entry.status);
+    return (_jsxs("div", { style: "display:flex;gap:12px;padding:2px 0;font-size:13px;font-family:monospace", children: [_jsx("span", { style: `color:${color};font-style:italic;min-width:80px`, children: label }), _jsx("span", { style: "color:#d1d5db", children: entry.path })] }));
+}
+function SectionHeader({ title, count }) {
+    return (_jsxs("div", { style: "color:#fbbf24;font-size:14px;font-weight:600;padding:16px 0 6px;font-family:monospace", children: [title, " (", count, ")"] }));
+}
+export function GitStatusView({ status }) {
+    return (_jsxs("div", { style: "padding:12px 16px", children: [_jsxs(GitKV, { label: "Head:", children: [_jsx("span", { style: "color:#94a3b8;font-style:italic", children: status.oid }), " ", _jsx("span", { style: "color:#4ade80;font-weight:600", children: status.head })] }), status.upstream && (_jsxs(GitKV, { label: "Upstream:", children: [_jsx("span", { style: "color:#94a3b8;font-style:italic", children: status.oid }), " ", _jsx("span", { style: "color:#60a5fa;font-weight:600", children: status.upstream }), (status.ahead > 0 || status.behind > 0) && (_jsxs("span", { style: "color:#94a3b8", children: [status.ahead > 0 ? ` +${status.ahead}` : "", status.behind > 0 ? ` -${status.behind}` : ""] }))] })), status.tag && (_jsxs(GitKV, { label: "Tag:", children: [_jsx("span", { style: "color:#e5e7eb", children: status.tag }), status.tagDistance > 0 && _jsxs("span", { style: "color:#60a5fa", children: [" (", status.tagDistance, ")"] })] })), status.untracked.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionHeader, { title: "Untracked files", count: status.untracked.length }), status.untracked.map((f) => (_jsx("div", { style: "padding:2px 0;font-size:13px;font-family:monospace;color:#d1d5db", children: f })))] })), status.unstaged.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionHeader, { title: "Unstaged changes", count: status.unstaged.length }), status.unstaged.map((e) => (_jsx(GitFileRow, { entry: e })))] })), status.staged.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionHeader, { title: "Staged changes", count: status.staged.length }), status.staged.map((e) => (_jsx(GitFileRow, { entry: e })))] })), status.untracked.length === 0 &&
+                status.unstaged.length === 0 &&
+                status.staged.length === 0 && (_jsx("div", { style: "color:#4ade80;font-size:13px;font-family:monospace;padding:16px 0", children: "Clean working tree" }))] }));
+}

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

@@ -0,0 +1,4 @@
+import * as ConsoleStore from "../ConsoleStore.ts";
+export declare function LogLine({ log }: {
+    log: ConsoleStore.ConsoleLog;
+}): import("../../hyper/HyperNode.ts").HyperNode;

package/dist/console/ui/Logs.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "effect-start/jsx-runtime";
+import * as ConsoleStore from "../ConsoleStore.js";
+function levelColor(level) {
+    if (level === "DEBUG")
+        return "#94a3b8";
+    if (level === "INFO")
+        return "#60a5fa";
+    if (level === "WARNING")
+        return "#fbbf24";
+    if (level === "ERROR")
+        return "#ef4444";
+    if (level === "FATAL")
+        return "#dc2626";
+    return "#e5e7eb";
+}
+export function LogLine({ log }) {
+    const color = levelColor(log.level);
+    const time = log.date.toLocaleTimeString("en", {
+        hour12: false,
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+    });
+    return (_jsxs("div", { id: `log-${log.id}`, style: "padding:3px 8px;border-bottom:1px solid #1f2937;font-family:monospace;font-size:12px;display:flex;align-items:baseline", children: [_jsx("span", { style: "color:#6b7280;white-space:nowrap", children: time }), _jsx("span", { style: `color:${color};font-weight:600;width:56px;text-align:center;flex-shrink:0`, children: log.level }), _jsx("span", { style: "color:#e5e7eb;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis", children: log.message }), _jsx("a", { href: `${ConsoleStore.store.prefix}/fibers/${log.fiberId.replace("#", "")}`, style: "color:#6b7280;white-space:nowrap;margin-left:8px;text-decoration:none", children: log.fiberId }), log.cause && (_jsx("div", { style: "color:#ef4444;font-size:11px;padding:2px 0 0 0;white-space:pre-wrap;width:100%", children: log.cause }))] }));
+}

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

@@ -0,0 +1,4 @@
+import type * as ConsoleStore from "../ConsoleStore.ts";
+export declare function MetricsGrid({ metrics }: {
+    metrics: Array<ConsoleStore.ConsoleMetricSnapshot>;
+}): import("../../hyper/HyperNode.ts").HyperNode;

package/dist/console/ui/Metrics.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "effect-start/jsx-runtime";
+function MetricValue({ metric }) {
+    if (metric.type === "counter" || metric.type === "gauge") {
+        return (_jsx("div", { style: "font-size:32px;font-weight:700;color:#e5e7eb;font-family:monospace;line-height:1.1", children: String(metric.value) }));
+    }
+    if (metric.type === "histogram") {
+        const h = metric.value;
+        return (_jsxs("div", { style: "display:grid;grid-template-columns:auto auto;gap:2px 12px;font-size:12px;font-family:monospace", children: [_jsx("span", { style: "color:#6b7280", children: "count" }), _jsx("span", { style: "color:#e5e7eb", children: h.count }), _jsx("span", { style: "color:#6b7280", children: "sum" }), _jsx("span", { style: "color:#e5e7eb", children: h.sum.toFixed(2) }), _jsx("span", { style: "color:#6b7280", children: "min" }), _jsx("span", { style: "color:#e5e7eb", children: h.min.toFixed(2) }), _jsx("span", { style: "color:#6b7280", children: "max" }), _jsx("span", { style: "color:#e5e7eb", children: h.max.toFixed(2) })] }));
+    }
+    if (metric.type === "frequency") {
+        const occ = metric.value;
+        return (_jsx("div", { style: "display:grid;grid-template-columns:auto auto;gap:2px 12px;font-size:12px;font-family:monospace", children: Object.entries(occ)
+                .slice(0, 10)
+                .map(([k, v]) => (_jsxs(_Fragment, { children: [_jsx("span", { style: "color:#6b7280", children: k }), _jsx("span", { style: "color:#e5e7eb", children: v })] }))) }));
+    }
+    return (_jsx("pre", { style: "font-size:11px;color:#9ca3af;margin:0;white-space:pre-wrap", children: JSON.stringify(metric.value, null, 2) }));
+}
+function MetricCard({ metric }) {
+    return (_jsxs("div", { style: "background:#111827;border:1px solid #374151;border-radius:6px;padding:12px;min-width:200px", children: [_jsxs("div", { style: "display:flex;align-items:center;gap:8px;margin-bottom:8px", children: [_jsx("span", { style: "color:#d1d5db;font-size:13px;font-weight:600", children: metric.name }), _jsx("span", { style: "font-size:10px;padding:1px 6px;border-radius:4px;background:#1e3a5f;color:#60a5fa", children: metric.type })] }), _jsx(MetricValue, { metric: metric }), metric.tags.length > 0 && (_jsx("div", { style: "font-size:10px;color:#6b7280;margin-top:4px", children: metric.tags.map((t) => `${t.key}=${t.value}`).join(" ") }))] }));
+}
+export function MetricsGrid({ metrics }) {
+    if (metrics.length === 0) {
+        return _jsx("div", { class: "empty", children: "Waiting for metrics..." });
+    }
+    return (_jsx(_Fragment, { children: metrics.map((m) => (_jsx(MetricCard, { metric: m }))) }));
+}

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

@@ -0,0 +1,8 @@
+export interface RouteInfo {
+    readonly method: string;
+    readonly path: string;
+    readonly format: string | undefined;
+}
+export declare function RouteList({ routes }: {
+    routes: Array<RouteInfo>;
+}): import("../../hyper/HyperNode").HyperNode;

package/dist/console/ui/Routes.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "effect-start/jsx-runtime";
+function groupByPath(routes) {
+    const byPath = new Map();
+    for (const r of routes) {
+        let group = byPath.get(r.path);
+        if (!group) {
+            group = [];
+            byPath.set(r.path, group);
+        }
+        group.push(r);
+    }
+    return Array.from(byPath, ([path, routes]) => ({
+        path,
+        routes: routes.sort((a, b) => methodOrder.indexOf(a.method) - methodOrder.indexOf(b.method)),
+    })).sort((a, b) => a.path.localeCompare(b.path));
+}
+function methodColor(method) {
+    if (method === "GET")
+        return "#22c55e";
+    if (method === "POST")
+        return "#3b82f6";
+    if (method === "PUT")
+        return "#f59e0b";
+    if (method === "DELETE")
+        return "#ef4444";
+    if (method === "PATCH")
+        return "#a855f7";
+    if (method === "*")
+        return "#6b7280";
+    return "#94a3b8";
+}
+function methodBg(method) {
+    if (method === "GET")
+        return "#052e16";
+    if (method === "POST")
+        return "#172554";
+    if (method === "PUT")
+        return "#422006";
+    if (method === "DELETE")
+        return "#450a0a";
+    if (method === "PATCH")
+        return "#3b0764";
+    return "#1e293b";
+}
+const methodOrder = ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS", "*"];
+function MethodBadge({ method }) {
+    return (_jsx("span", { style: `font-size:10px;font-weight:700;font-family:monospace;padding:2px 6px;border-radius:3px;background:${methodBg(method)};color:${methodColor(method)};min-width:48px;text-align:center;display:inline-block`, children: method }));
+}
+function FormatBadge({ format }) {
+    return (_jsx("span", { style: "font-size:10px;padding:1px 6px;border-radius:3px;background:#1e3a5f;color:#60a5fa", children: format }));
+}
+function ColoredPath({ path }) {
+    const segments = path.split("/").filter(Boolean);
+    return (_jsx("span", { style: "font-family:monospace;font-size:13px", children: segments.length === 0 ? (_jsx("span", { style: "color:#e2e8f0", children: "/" })) : (segments.map((seg) => {
+            const isParam = seg.startsWith(":");
+            return (_jsxs(_Fragment, { children: [_jsx("span", { style: "color:#475569", children: "/" }), _jsx("span", { style: isParam ? "color:#c084fc" : "color:#e2e8f0", children: seg })] }));
+        })) }));
+}
+function PathGroup({ path, routes }) {
+    return (_jsxs("div", { style: "padding:8px 12px;border-bottom:1px solid #1e293b", children: [_jsx("div", { style: "margin-bottom:4px", children: _jsx(ColoredPath, { path: path }) }), _jsx("div", { style: "display:flex;flex-wrap:wrap;gap:4px", children: routes.map((r) => (_jsxs("div", { style: "display:flex;align-items:center;gap:6px", children: [_jsx(MethodBadge, { method: r.method }), r.format && _jsx(FormatBadge, { format: r.format })] }))) })] }));
+}
+export function RouteList({ routes }) {
+    if (routes.length === 0) {
+        return _jsx("div", { class: "empty", children: "No routes registered" });
+    }
+    const groups = groupByPath(routes);
+    const routeCount = routes.length;
+    const pathCount = groups.length;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: "padding:8px 12px;border-bottom:1px solid #1e293b;display:flex;gap:16px;font-size:12px;color:#64748b", children: [_jsxs("span", { children: [pathCount, " path", pathCount !== 1 ? "s" : ""] }), _jsxs("span", { children: [routeCount, " route", routeCount !== 1 ? "s" : ""] })] }), groups.map((g) => (_jsx(PathGroup, { path: g.path, routes: g.routes })))] }));
+}

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

@@ -0,0 +1,10 @@
+export interface ServiceEntry {
+    readonly key: string;
+    readonly kind: string;
+    readonly display: string;
+    readonly type: "config" | "value" | "effect";
+}
+export declare function ServiceList({ services }: {
+    services: Array<ServiceEntry>;
+}): import("../../hyper/HyperNode").HyperNode;
+export declare function collectServices(unsafeMap: Map<string, any>): Array<ServiceEntry>;