@slack/radar-mcp 1.6.0 → 1.7.0

package/dist/web/public/next/filters.js

@@ -0,0 +1,120 @@
+// Filters: cancellable chips above the feed + a hand-editable <details> panel that renders the
+// live spec's filters as form controls; Apply POSTs a new spec to /setspec (marked local so it
+// does not spawn a Custom tab). Ported from vanilla renderChips/renderFilters/applyFilters.
+import { html } from "./html.js";
+import { useState, useEffect, useRef } from "preact/hooks";
+import { store } from "./store.js";
+import { MATCH_FIELDS, FIELD_VALUES, FILTER_SOURCES } from "./registry.js";
+function Chips({ spec }) {
+    const m = spec.match && typeof spec.match === "object" ? spec.match : {};
+    const items = Object.entries(m).map(([k, v]) => ({ k, v, kind: "match" }));
+    if (spec.bodyContains)
+        items.push({ k: "body contains", v: spec.bodyContains, kind: "body" });
+    if (!items.length)
+        return null;
+    const clear = (it) => {
+        const next = JSON.parse(JSON.stringify(spec));
+        if (it.kind === "body")
+            delete next.bodyContains;
+        else {
+            if (next.match)
+                delete next.match[it.k];
+            if (next.match && !Object.keys(next.match).length)
+                delete next.match;
+        }
+        store.setSpec(next, { local: true });
+    };
+    return html `<div class="chips">${items.map((it) => html `<span class="chip"><b>${it.k}:</b><span class="v">${String(it.v)}</span><span class="x" onClick=${() => clear(it)}>✕</span></span>`)}</div>`;
+}
+function MatchRow({ field, value, fields, onChange, onRemove }) {
+    const [open, setOpen] = useState(false);
+    const cands = store.candidates(field).filter((v) => !value || String(v).toLowerCase().includes(String(value).toLowerCase())).slice(0, 50);
+    return html `
+    <div class="frow matchrow">
+      <select class="f_mk" value=${field} onChange=${(e) => onChange({ field: e.currentTarget.value, value: "" })}>
+        ${fields.map((f) => html `<option value=${f}>${f}</option>`)}
+        ${fields.includes(field) ? null : html `<option value=${field} selected>${field}</option>`}
+      </select>
+      <span class="combo">
+        <input class="f_mv" autocomplete="off" value=${value}
+          placeholder=${FIELD_VALUES[field] ? "pick or type…" : cands.length ? "type or pick" : "contains…"}
+          onInput=${(e) => onChange({ field, value: e.currentTarget.value })}
+          onFocus=${() => setOpen(true)} onBlur=${() => setTimeout(() => setOpen(false), 120)} />
+        <span class="combocaret" onMouseDown=${(e) => { e.preventDefault(); setOpen((o) => !o); }}>▾</span>
+        ${open && cands.length ? html `<div class="combolist open">${cands.map((v) => html `<div class="comboitem" onMouseDown=${(e) => { e.preventDefault(); onChange({ field, value: String(v) }); setOpen(false); }}>${v}</div>`)}</div>` : null}
+      </span>
+      <button class="fdel" onClick=${onRemove}>✕</button>
+    </div>
+  `;
+}
+export function Filters({ spec }) {
+    const [open, setOpen] = useState(false);
+    const fields = MATCH_FIELDS[spec.source] || [];
+    const [rows, setRows] = useState([]);
+    const [source, setSource] = useState(spec.source || "all");
+    const [body, setBody] = useState(spec.bodyContains || "");
+    const [hl, setHl] = useState(spec.highlight || {});
+    const [rate, setRate] = useState(spec.rateWindowSec || 10);
+    const [msg, setMsg] = useState("");
+    const lastSpecKey = useRef("");
+    // resync the editable copy whenever the live spec changes (the resync guard prevents
+    // clobbering an in-progress edit on every spec poll).
+    useEffect(() => {
+        const key = JSON.stringify(spec);
+        if (key === lastSpecKey.current)
+            return;
+        lastSpecKey.current = key;
+        const m = spec.match && typeof spec.match === "object" ? spec.match : {};
+        setRows(Object.entries(m).map(([field, value]) => ({ field, value: String(value) })));
+        setSource(spec.source || "all");
+        setBody(spec.bodyContains || "");
+        setHl(spec.highlight || {});
+        setRate(spec.rateWindowSec || 10);
+    }, [spec]);
+    const apply = async () => {
+        const next = JSON.parse(JSON.stringify(spec));
+        next.source = source;
+        const match = {};
+        for (const r of rows)
+            if (r.field && r.value.trim())
+                match[r.field] = r.value.trim();
+        next.match = match;
+        if (body.trim())
+            next.bodyContains = body.trim();
+        else
+            delete next.bodyContains;
+        if (hl.field && hl.value != null && String(hl.value) !== "" && !isNaN(Number(hl.value))) {
+            next.highlight = { field: hl.field, op: hl.op || ">", value: Number(hl.value), label: (spec.highlight && spec.highlight.label) || hl.field };
+        }
+        else {
+            delete next.highlight;
+        }
+        if (Number(rate) > 0)
+            next.rateWindowSec = Number(rate);
+        setMsg("applying…");
+        const r = await store.setSpec(next, { local: true });
+        setMsg(r.ok ? "applied ✓" : "⚠ " + (r.error || "rejected"));
+    };
+    return html `
+    <${Chips} spec=${spec} />
+    <details class="filters" open=${open} onToggle=${(e) => setOpen(e.currentTarget.open)}>
+      <summary>Filters</summary>
+      <div class="frow"><label>source</label>
+        <select value=${source} onChange=${(e) => setSource(e.currentTarget.value)}>${FILTER_SOURCES.map((s) => html `<option value=${s}>${s}</option>`)}</select>
+      </div>
+      <div class="fsec">match (all must hold)</div>
+      ${rows.length ? null : html `<div class="fhint">no match filter — showing everything</div>`}
+      ${rows.map((r, i) => html `<${MatchRow} field=${r.field} value=${r.value} fields=${fields} onChange=${(nx) => setRows(rows.map((x, j) => (j === i ? nx : x)))} onRemove=${() => setRows(rows.filter((_, j) => j !== i))} />`)}
+      <button class="fadd" onClick=${() => setRows([...rows, { field: fields[0] || "", value: "" }])}>+ add match field</button>
+      ${source === "network" || source === "all" ? html `<div class="frow"><label>body contains</label><input value=${body} placeholder="substring in request/response body" onInput=${(e) => setBody(e.currentTarget.value)} /></div>` : null}
+      <div class="fsec">highlight (flag rows)</div>
+      <div class="frow">
+        <input value=${hl.field || ""} placeholder="field e.g. duration_ms" style="flex:2" onInput=${(e) => setHl({ ...hl, field: e.currentTarget.value })} />
+        <select value=${hl.op || ">"} onChange=${(e) => setHl({ ...hl, op: e.currentTarget.value })}>${[">", ">=", "<", "<=", "=="].map((o) => html `<option value=${o}>${o}</option>`)}</select>
+        <input value=${hl.value != null ? String(hl.value) : ""} placeholder="value" style="flex:1" onInput=${(e) => setHl({ ...hl, value: Number(e.currentTarget.value) })} />
+      </div>
+      <div class="frow"><label>rate window (s)</label><input type="number" value=${String(rate)} style="flex:1" onInput=${(e) => setRate(e.currentTarget.value)} /></div>
+      <div class="frow"><button class="fapply" onClick=${apply}>Apply changes</button><span class="fmsg">${msg}</span></div>
+    </details>
+  `;
+}

package/dist/web/public/next/hooks.js

@@ -0,0 +1,57 @@
+// Shared Preact hooks used by every dashboard container (feed, db, widgets, the shell).
+// Foundation-owned so feed.js and db.js do not each re-implement the stale-closure-ref
+// keyboard pattern, and the store-subscription bridges live in one place.
+//
+// These are deliberately STORE-AGNOSTIC: the subscription hooks take an `Emitter` argument
+// rather than importing store.js, so this module has zero dependency on the streaming engine
+// (which lands in a later PR) and the DB container can reuse the keyboard hooks without
+// pulling the store at all.
+import { useState, useEffect, useRef } from "preact/hooks";
+// A ref that always holds the LATEST value, updated every render. The backbone of the
+// "subscribe the window listener ONCE, but always see fresh state" pattern: the keydown
+// handler closes over the ref, not the value, so it never goes stale even though the
+// listener is attached a single time. feed.js and db.js both depend on this.
+export function useLatestRef(value) {
+    const ref = useRef(value);
+    ref.current = value;
+    return ref;
+}
+// Attach a window keydown listener exactly ONCE for the life of the component, dispatching to
+// the latest handler via useLatestRef. Avoids the add/remove-listener churn (and dropped
+// keystrokes) you get from re-subscribing whenever a dependency changes. The handler itself
+// owns its input-tag guard and meta-chord precedence -- this hook only manages the lifecycle.
+export function useGlobalKeydown(handler) {
+    const ref = useLatestRef(handler);
+    useEffect(() => {
+        const onKey = (e) => ref.current(e);
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, []);
+}
+// Subscribe to ONE emitter event and return the value produced by read(). Re-reads (and
+// re-renders) whenever the event fires. Used for single-value header bits (conn dot, profile
+// label, active spec).
+//
+// read() is routed through useLatestRef rather than captured in the effect, matching
+// useGlobalKeydown above: the subscription is created once per (emitter, event), but it always
+// calls the freshest read. Capturing read directly would freeze it at subscribe time, so a
+// caller whose read closes over changing props would re-render with a stale value.
+export function useStoreValue(emitter, event, read) {
+    const readRef = useLatestRef(read);
+    const [v, setV] = useState(read);
+    useEffect(() => emitter.on(event, () => setV(readRef.current())), [emitter, event, readRef]);
+    return v;
+}
+// Force a re-render of this subtree whenever ANY of the named emitter events fire, without
+// threading a value through. Used by the widgets/cards, which read the live aggregates
+// directly off the store on each render and just need a nudge on "tick"/"feed".
+export function useStorePulse(emitter, ...events) {
+    const [, force] = useState(0);
+    // events is spread fresh each render; join to a stable dep so the effect re-subscribes only
+    // when the actual event set changes, not on every render.
+    const key = events.join("|");
+    useEffect(() => {
+        const offs = events.map((e) => emitter.on(e, () => force((n) => n + 1)));
+        return () => offs.forEach((off) => off());
+    }, [emitter, key]);
+}

package/dist/web/public/next/html.js

@@ -0,0 +1,10 @@
+// Bind htm to Preact's h() once and share the tagged-template `html` to every UI module.
+// `preact` and `htm` resolve via the index.html import map (to the vendored ES modules);
+// every other module imports `html` from here by relative path.
+//
+// htm renders template TEXT literally (no HTML-entity decode): use a plain space, never
+// ` `, and keep esc() on every interpolated value that reaches a dangerouslySetInnerHTML
+// sink. See ./esc.ts.
+import { h } from "preact";
+import htm from "htm";
+export const html = htm.bind(h);

package/dist/web/public/next/inspector.js

@@ -0,0 +1,258 @@
+// Inspector: a structured, type-aware detail view (not a raw JSON blob). Only mounted when a
+// row is selected. Summary header with key facts + badges, then collapsible sections with
+// syntax-highlighted JSON. Seeds from the feed row instantly, then enriches from the device
+// /detail (read-through the store's shared cache, so an evicted row still shows its body).
+import { html } from "./html.js";
+import { useState, useEffect } from "preact/hooks";
+import { esc } from "./esc.js";
+import { shortUrl, store } from "./store.js";
+import { hasDetailEndpoint } from "./registry.js";
+function shq(s) {
+    return "'" + String(s).replace(/'/g, "'\\''") + "'";
+}
+// Copy cURL / Copy JSON emit request headers (including Authorization / Bearer / Cookie) and
+// bodies unredacted, so the copied cURL pastes and RUNS against the real device session --
+// that is the point of the feature. Redacting auth would break that, and Radar is a dev-only
+// tool against a local debug build over an ADB-forwarded socket, so there is nothing to gain.
+function toCurl(d) {
+    if (!d.url)
+        return "";
+    const parts = ["curl -i"];
+    if (d.method && d.method !== "GET")
+        parts.push("-X " + d.method);
+    const h = (d.request_headers || d.requestHeaders || {});
+    for (const k of Object.keys(h))
+        parts.push("-H " + shq(k + ": " + h[k]));
+    const body = d.request_body ?? d.requestBody;
+    if (body)
+        parts.push("--data " + shq(typeof body === "string" ? body : JSON.stringify(body)));
+    parts.push(shq(d.url));
+    return parts.join(" \\\n  ");
+}
+// Syntax-highlight a JSON value into an HTML string. Built as a string (then
+// dangerouslySetInnerHTML) so it is one fast pass; every interpolated value goes through the
+// shared esc(), so no injection. (One of the three audited innerHTML sinks.)
+export function highlightJson(value, indent = 0) {
+    const pad = "  ".repeat(indent);
+    const padIn = "  ".repeat(indent + 1);
+    if (value === null)
+        return '<span class="j-null">null</span>';
+    const t = typeof value;
+    if (t === "number")
+        return '<span class="j-num">' + esc(String(value)) + "</span>";
+    if (t === "boolean")
+        return '<span class="j-bool">' + value + "</span>";
+    if (t === "string")
+        return '<span class="j-str">"' + esc(value) + '"</span>';
+    if (Array.isArray(value)) {
+        if (!value.length)
+            return "[]";
+        const items = value.map((v) => padIn + highlightJson(v, indent + 1));
+        return "[\n" + items.join(",\n") + "\n" + pad + "]";
+    }
+    if (t === "object") {
+        const obj = value;
+        const keys = Object.keys(obj);
+        if (!keys.length)
+            return "{}";
+        const items = keys.map((k) => padIn + '<span class="j-key">"' + esc(k) + '"</span>: ' + highlightJson(obj[k], indent + 1));
+        return "{\n" + items.join(",\n") + "\n" + pad + "}";
+    }
+    return esc(String(value));
+}
+function Section({ title, sub, children, open }) {
+    const [isOpen, setOpen] = useState(open !== false);
+    return html `
+    <div class="insec">
+      <div class="insec-hd" onClick=${() => setOpen((o) => !o)}>
+        <span class="insec-caret">${isOpen ? "▾" : "▸"}</span>
+        <span class="insec-title">${title}</span>
+        ${sub != null ? html `<span class="insec-sub">${sub}</span>` : null}
+      </div>
+      ${isOpen ? html `<div class="insec-body">${children}</div>` : null}
+    </div>
+  `;
+}
+function Body({ parsed }) {
+    const v = parsed.value;
+    if (v && typeof v === "object") {
+        return html `<pre class="json" dangerouslySetInnerHTML=${{ __html: highlightJson(v, 0) }}></pre>`;
+    }
+    return html `
+    ${parsed.truncated ? html `<div class="trunc">⚠ truncated by the device cap</div>` : null}
+    <pre class="json rawbody">${String(v)}</pre>
+  `;
+}
+function KV({ map }) {
+    const keys = Object.keys(map || {});
+    if (!keys.length)
+        return null;
+    return html `<div class="kv">${keys.map((k) => html `<div class="kv-k">${k}</div><div class="kv-v">${String(map[k])}</div>`)}</div>`;
+}
+// Parse a body. A string that does not parse AND looks cut off (starts like JSON, ends
+// mid-token) is flagged truncated -- the on-device interceptor caps bodies (installed build at
+// 8KB), so large JSON arrives clipped. We show it as readable text with a banner.
+export function parseBody(v) {
+    if (typeof v !== "string")
+        return { value: v, truncated: false };
+    const s = v.trim();
+    try {
+        return { value: JSON.parse(s), truncated: false };
+    }
+    catch {
+        const looksJson = s.startsWith("{") || s.startsWith("[");
+        const looksCut = looksJson && !(s.endsWith("}") || s.endsWith("]"));
+        return { value: v, truncated: looksCut, bytes: v.length };
+    }
+}
+export function statusClass(code) {
+    const c = Number(code);
+    if (!c)
+        return "";
+    if (c >= 500)
+        return "st5";
+    if (c >= 400)
+        return "st4";
+    if (c >= 300)
+        return "st3";
+    return "st2";
+}
+export function Inspector({ ev, onClose }) {
+    const [detail, setDetail] = useState(ev);
+    const [loading, setLoading] = useState(false);
+    const [evicted, setEvicted] = useState(false);
+    useEffect(() => {
+        const kind = ev._type || "";
+        setEvicted(false);
+        setDetail(ev); // seed from the row the feed already has (correct summary instantly)
+        // Only kinds with a /detail endpoint fetch; logs are host-side (everything on the row).
+        if (ev.id == null || !hasDetailEndpoint(kind))
+            return;
+        // read-through the store's shared cache (eager-capture + prior click-fetches land there).
+        const cached = store.getDetail(kind, ev.id);
+        if (cached) {
+            setDetail({ ...ev, ...cached, _type: kind });
+            return;
+        }
+        setLoading(true);
+        let live = true;
+        fetch("/detail?kind=" + kind + "&id=" + ev.id)
+            .then((r) => r.json())
+            .then((d) => {
+            if (!live)
+                return;
+            // {error:"Not Found"} = the id was evicted from the device ring (older than ~200). Do
+            // NOT overwrite the good summary; keep the feed row + flag the body is gone.
+            if (d && d.error && d.url == null && d.method == null) {
+                setEvicted(true);
+                return;
+            }
+            const merged = { ...ev, ...d, _type: kind };
+            store.cacheDetail(kind, ev.id, merged);
+            setDetail(merged);
+        })
+            .catch(() => { })
+            .finally(() => live && setLoading(false));
+        return () => {
+            live = false;
+        };
+    }, [ev]);
+    const kind = ev._type || "";
+    const isNet = kind === "network" || detail.url != null || detail.method != null;
+    const title = ev.event_name || ev.event_type || shortUrl(ev.url) || kind || "detail";
+    const copy = (which, e) => {
+        let text = "";
+        if (which === "json")
+            text = JSON.stringify(detail, null, 2);
+        else if (which === "body")
+            text = String(detail.response_body ?? detail.request_body ?? "");
+        else if (which === "curl")
+            text = toCurl(detail);
+        navigator.clipboard?.writeText(text);
+        const btn = e.currentTarget;
+        const o = btn.textContent;
+        btn.textContent = "copied ✓";
+        setTimeout(() => (btn.textContent = o), 1200);
+    };
+    // ---- badges: at-a-glance facts, per type. Lead with the record TYPE. ----
+    const badges = [];
+    const typeKind = isNet ? "network" : kind || "event";
+    badges.push(html `<span class=${"ibadge tchip t-" + typeKind}>${typeKind}</span>`);
+    const ts = ev.timestamp || detail.timestamp;
+    if (ts)
+        badges.push(html `<span class="ibadge">${new Date(ts).toLocaleTimeString()}</span>`);
+    if (isNet) {
+        if (detail.method)
+            badges.push(html `<span class="ibadge meth">${detail.method}</span>`);
+        if (detail.status_code != null)
+            badges.push(html `<span class=${"ibadge " + statusClass(detail.status_code)}>${detail.status_code}</span>`);
+        if (detail.duration_ms != null)
+            badges.push(html `<span class=${"ibadge" + (Number(detail.duration_ms) > 800 ? " slow" : "")}>${detail.duration_ms} ms</span>`);
+    }
+    else if (kind === "rtm") {
+        if (ev.direction)
+            badges.push(html `<span class=${"ibadge dir-" + ev.direction}>${ev.direction}</span>`);
+        if (ev.event_type)
+            badges.push(html `<span class="ibadge">${ev.event_type}</span>`);
+        if (ev.channel)
+            badges.push(html `<span class="ibadge">${ev.channel}</span>`);
+    }
+    else if (kind === "clog") {
+        if (ev.event_name)
+            badges.push(html `<span class="ibadge">${ev.event_name}</span>`);
+    }
+    else if (kind === "log") {
+        if (ev.level)
+            badges.push(html `<span class=${"ibadge lvl-" + String(ev.level).toUpperCase()}>${ev.level}</span>`);
+        if (ev.tag)
+            badges.push(html `<span class="ibadge">${ev.tag}</span>`);
+        if (ev.package)
+            badges.push(html `<span class="ibadge">${ev.package}</span>`);
+    }
+    const reqBody = parseBody(detail.request_body ?? detail.requestBody);
+    const resBody = parseBody(detail.response_body ?? detail.responseBody);
+    const reqHeaders = (detail.request_headers || detail.requestHeaders);
+    const resHeaders = (detail.response_headers || detail.responseHeaders);
+    const data = parseBody(detail.data);
+    const logMessage = kind === "log" ? detail.message || ev.message : null;
+    // generic "other fields" dump, minus the specially-rendered ones
+    const omit = new Set([
+        "_type", "id", "timestamp", "url", "method", "status_code", "duration_ms",
+        "request_body", "requestBody", "response_body", "responseBody",
+        "request_headers", "requestHeaders", "response_headers", "responseHeaders",
+        "data", "message", "event_type", "event_name", "direction", "channel", "level", "tag", "package", "pid", "tid", "log_ts",
+    ]);
+    const rest = {};
+    for (const k of Object.keys(detail))
+        if (!omit.has(k))
+            rest[k] = detail[k];
+    const hasRest = Object.keys(rest).length > 0;
+    return html `
+    <div class="inspector">
+      <div class="inspector-hd">
+        <span class="ttl">${title}</span>
+        <span class="x" onClick=${onClose} title="close (Esc)">✕</span>
+      </div>
+      <div class="ibadges">${badges}</div>
+      ${isNet && detail.url ? html `<div class="iurl" title=${detail.url}>${detail.url}</div>` : null}
+      ${evicted ? html `<div class="trunc">This call scrolled off the device buffer (it keeps only the last ~200), so the full request/response body is no longer available. The summary above is from the live feed. Open a call sooner to capture its body.</div>` : null}
+      <div class="copybar">
+        <button class="copybtn" onClick=${(e) => copy("json", e)}>Copy JSON</button>
+        ${isNet ? html `<button class="copybtn" onClick=${(e) => copy("body", e)}>Copy body</button><button class="copybtn" onClick=${(e) => copy("curl", e)}>Copy cURL</button>` : null}
+        ${isNet ? html `<span class="copynote" title="Copy cURL and Copy body include the request's real headers and tokens, unredacted, so the copied command runs against the live session. Do not paste into a shared channel or ticket.">includes live auth</span>` : null}
+      </div>
+      ${loading
+        ? html `<div class="empty">loading…</div>`
+        : html `
+            ${logMessage != null ? html `<${Section} title="message"><pre class="logmsg-full">${logMessage}</pre><//>` : null}
+            ${reqBody.value != null ? html `<${Section} title="request body"><${Body} parsed=${reqBody} /><//>` : null}
+            ${resBody.value != null ? html `<${Section} title="response body"><${Body} parsed=${resBody} /><//>` : null}
+            ${data.value != null ? html `<${Section} title="data"><${Body} parsed=${data} /><//>` : null}
+            ${reqHeaders ? html `<${Section} title="request headers" sub=${Object.keys(reqHeaders).length} open=${false}><${KV} map=${reqHeaders} /><//>` : null}
+            ${resHeaders ? html `<${Section} title="response headers" sub=${Object.keys(resHeaders).length} open=${false}><${KV} map=${resHeaders} /><//>` : null}
+            ${hasRest ? html `<${Section} title="other fields" open=${!isNet}><${Body} parsed=${{ value: rest, truncated: false }} /><//>` : null}
+          `}
+    </div>
+  `;
+}
+export { toCurl, shq };

package/dist/web/public/next/registry.js

@@ -0,0 +1,65 @@
+// Source + widget registries. Adding a source or a widget should be ONE table entry, not
+// edits across many hardcoded conditionals (the vanilla index.html debt). The app reads these
+// to drive the modebar, the Filters source select + field lists, the feed sort options, the
+// per-source detail fetch, and which widget components to mount.
+// Match-fields the Filters panel offers per source. `all` is derived as the union below, so a
+// new source's fields show up in the unified view with no extra edit.
+export const MATCH_FIELDS = {
+    network: ["url", "method", "status_code"],
+    rtm: ["event_type", "direction", "channel"],
+    clog: ["event_name"],
+    log: ["tag", "level", "message", "pid", "package"],
+};
+// `all` = the union of every streaming source's fields (deduped, order-stable). Derived, not
+// hand-maintained, so adding a source's fields above surfaces them in the unified Live tab too.
+MATCH_FIELDS.all = (() => {
+    const seen = new Set();
+    const out = [];
+    for (const src of ["network", "rtm", "clog", "log"]) {
+        for (const f of MATCH_FIELDS[src])
+            if (!seen.has(f)) {
+                seen.add(f);
+                out.push(f);
+            }
+    }
+    return out;
+})();
+// Fixed value lists for combobox candidates (others are learned live from the stream).
+export const FIELD_VALUES = {
+    direction: ["OUTGOING", "INCOMING"],
+    level: ["VERBOSE", "DEBUG", "INFO", "WARN", "ERROR", "FATAL"],
+    method: ["GET", "POST", "PUT", "DELETE", "PATCH"],
+};
+// SOURCE registry: one row per source. `kind` routes the view (streaming feed vs the
+// point-in-time DB browser) without a hardcoded source check.
+export const SOURCES = {
+    network: { label: "Network", kind: "stream", hasDetailEndpoint: true },
+    rtm: { label: "RTM", kind: "stream", hasDetailEndpoint: true },
+    clog: { label: "Clogs", kind: "stream", hasDetailEndpoint: true },
+    log: { label: "Logs", kind: "stream", hasDetailEndpoint: false },
+    all: { label: "Live", kind: "stream" },
+    db: { label: "Database", kind: "db" },
+};
+// The set of streaming source kinds the store admits off the SSE stream (derived from SOURCES,
+// excluding the non-stream db + the unified "all" alias).
+export const STREAM_KINDS = Object.entries(SOURCES)
+    .filter(([k, v]) => v.kind === "stream" && k !== "all")
+    .map(([k]) => k);
+// The kinds that have a /detail endpoint (eager body capture + inspector fetch). Derived from
+// hasDetailEndpoint so adding a detailable source is one SOURCES edit.
+export const DETAILABLE_KINDS = Object.entries(SOURCES)
+    .filter(([, v]) => v.hasDetailEndpoint)
+    .map(([k]) => k);
+export function hasDetailEndpoint(kind) {
+    return !!SOURCES[kind]?.hasDetailEndpoint;
+}
+// WIDGET registry: the viz keys the Cards strip understands. `counter` stays a valid key for
+// back-compat but renders nothing (a cumulative count is the wrong signal for a live stream;
+// see widgets.ts). A new widget = one key here + one component.
+export const WIDGETS = ["counter", "rate", "sparkline", "graph"];
+// Source order for the modebar / global tab-switch (matches the MODES preset order).
+export const SOURCE_ORDER = ["all", "network", "rtm", "clog", "log", "db"];
+// The source options the Filters panel offers: every streaming source (db is its own container,
+// not a feed filter). Derived from SOURCES so adding a streaming source surfaces it in Filters
+// with no edit there. Ordered by SOURCE_ORDER (the modebar order) for a stable, familiar list.
+export const FILTER_SOURCES = SOURCE_ORDER.filter((s) => SOURCES[s]?.kind === "stream");