@slack/radar-mcp 1.6.0 → 1.7.0

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

@@ -0,0 +1,608 @@
+// The shared virtualized feed engine. ONE component renders Live / Network / RTM / Clogs /
+// Logs -- they are all the same stream feed with a per-source row renderer. Ported verbatim
+// from the proven vanilla feed: virtualization + Logcat-style range select-copy + scroll-lock
+// + incremental follow. This is both the DATA side (read store.viewFrames + incremental tail)
+// and the RENDER side (windowed rows + keyboard model).
+import { html } from "./html.js";
+import { useState, useEffect, useRef, useCallback, useMemo } from "preact/hooks";
+import { store, shortUrl, shortPkg, MODES, fmtNum } from "./store.js";
+const ROW_H = 24;
+const OVERSCAN = 10;
+// Feed UI prefs PERSIST across tab switches (the Feed unmounts/remounts per source). The text
+// filter is global; sort is per-source (a Network "slowest" is meaningless on RTM).
+const FEED_PREFS = { filter: "", sortBySource: {} };
+// Platform-aware jump-pill labels. macOS has no Home/End, so show the chord that works there.
+const IS_MAC = typeof navigator !== "undefined" && /Mac|iP(hone|ad|od)/.test(navigator.platform || navigator.userAgent || "");
+const KEY_NEWEST = IS_MAC ? "⌘↑" : "Ctrl↑";
+const KEY_OLDEST = IS_MAC ? "⌘↓" : "Ctrl↓";
+function sortOptionsFor(source) {
+    const opts = [
+        { key: "newest", label: "newest first", get: (e) => e.timestamp || 0, dir: "desc" },
+        { key: "oldest", label: "oldest first", get: (e) => e.timestamp || 0, dir: "asc" },
+    ];
+    if (source === "all")
+        opts.push({ key: "type", label: "group by type", get: (e) => ({ network: 0, rtm: 1, clog: 2, log: 3 }[e._type || ""] ?? 9), dir: "asc" });
+    if (source === "network") {
+        opts.push({ key: "slow", label: "slowest (response time)", get: (e) => Number(e.duration_ms), dir: "desc" });
+        opts.push({ key: "status", label: "status code (high→low)", get: (e) => Number(e.status_code), dir: "desc" });
+    }
+    if (source === "log")
+        opts.push({ key: "severity", label: "severity (errors first)", get: (e) => ({ FATAL: 5, ERROR: 4, WARN: 3, INFO: 2, DEBUG: 1, VERBOSE: 0 }[(e.level || "").toUpperCase()] ?? -1), dir: "desc" });
+    if (source === "rtm")
+        opts.push({ key: "evtype", label: "event type (A→Z)", get: (e) => e.event_type || "", dir: "asc" });
+    if (source === "clog")
+        opts.push({ key: "name", label: "clog name (A→Z)", get: (e) => e.event_name || "", dir: "asc" });
+    return opts;
+}
+// The spec of the tab `dir` steps away from the active one (clamped). Used by the filter box's
+// empty-arrow tab-switch (the global handler ignores keys typed in an input).
+function neighborTabSpec(dir) {
+    const keys = MODES.map((m) => m.key);
+    if (store.lastCustomSpec)
+        keys.push("__custom__");
+    let cur = keys.indexOf(store.activeModeKey() || "");
+    if (cur === -1)
+        cur = 0;
+    const next = Math.max(0, Math.min(keys.length - 1, cur + dir));
+    const k = keys[next];
+    return k === "__custom__" ? store.lastCustomSpec || undefined : MODES.find((m) => m.key === k)?.spec;
+}
+// One searchable string per frame for the text filter (mirrors row.textContent).
+function searchText(ev) {
+    if ((ev._type || "") === "log")
+        return [ev.level, ev.package, ev.tag, ev.message].filter(Boolean).join(" ").toLowerCase();
+    return [ev.direction, ev.method, ev.event_type, ev.event_name, shortUrl(ev.url), ev.channel].filter(Boolean).join(" ").toLowerCase();
+}
+// One raw copy line per frame (Logcat-style), pulled from the ring on copy.
+function rawLine(ev) {
+    const t = new Date(ev.timestamp || Date.now()).toLocaleTimeString();
+    if ((ev._type || "") === "log")
+        return `${t}  ${(ev.level || "").toUpperCase()}/${ev.tag || ""}: ${ev.message || ""}`;
+    if (ev._type === "network")
+        return `${t}  ${ev.method || "GET"} ${shortUrl(ev.url)} ${ev.status_code ?? ""} ${ev.duration_ms ?? ""}ms`;
+    return `${t}  ${ev._type}  ${ev.event_type || ev.event_name || ""} ${ev.channel || ""}`.trimEnd();
+}
+function statusBand(c) {
+    if (!c)
+        return "";
+    if (c >= 500)
+        return "st5";
+    if (c >= 400)
+        return "st4";
+    if (c >= 300)
+        return "st3";
+    return "st2";
+}
+export function isFailedStatus(ev) {
+    return Number(ev.status_code) >= 400;
+}
+function breachBadge(ev, h) {
+    const v = Number(ev[h.field]);
+    const unit = /ms|duration/i.test(h.field) ? "ms" : "";
+    return `${fmtNum(v)}${unit}  ${h.op || ">"} ${h.value}${unit}`;
+}
+// Per-source row body (inner spans). The outer .row wrapper (position/selection/click) is
+// added by the engine so virtualization stays uniform across sources.
+function RowBody({ ev, source, highlight }) {
+    const t = new Date(ev.timestamp || Date.now()).toLocaleTimeString();
+    const typeChip = source === "all" && ev._type ? html `<span class=${"tchip t-" + ev._type}>${ev._type}</span>` : null;
+    if ((ev._type || source) === "log") {
+        const lv = (ev.level || "").toUpperCase();
+        return html `<span class="t">${t}</span>${typeChip}<span class=${"lvl lvl-" + lv}>${lv || "LOG"}</span>${ev.package ? html `<span class="logpkg" title=${ev.package}>${shortPkg(ev.package)}</span>` : null}<span class="logtag">${ev.tag || ""}</span><span class="logmsg">${ev.message || ""}</span>`;
+    }
+    const breach = highlight && store.breaches(ev);
+    const isNet = (ev._type || source) === "network" || ev.url != null;
+    const code = Number(ev.status_code);
+    const statusChip = isNet && ev.status_code != null ? html `<span class=${"stchip " + statusBand(code)}>${ev.status_code}</span>` : null;
+    return html `<span class="t">${t}</span>${typeChip}<span class=${"dir-" + (ev.direction || "")}>${ev.direction || ev.method || ""}</span>${statusChip}<span>${ev.event_type || ev.event_name || shortUrl(ev.url)}</span>${ev.channel ? html `<span class="chan">${ev.channel}</span>` : null}${breach && highlight ? html `<span class="breachbadge">${breachBadge(ev, highlight)}</span>` : null}`;
+}
+export function Feed({ spec, onInspect, selectedId }) {
+    const source = spec.source;
+    const vpRef = useRef(null);
+    const filterRef = useRef(null);
+    const [filter, setFilterState] = useState(() => FEED_PREFS.filter);
+    const [sort, setSortState] = useState(() => FEED_PREFS.sortBySource[source || ""] || "newest");
+    const [paused, setPaused] = useState(false);
+    const setFilter = useCallback((v) => {
+        FEED_PREFS.filter = v;
+        setFilterState(v);
+    }, []);
+    const setSort = useCallback((v) => {
+        FEED_PREFS.sortBySource[source || ""] = v;
+        setSortState(v);
+    }, [source]);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [vpH, setVpH] = useState(600);
+    const followRef = useRef(true);
+    const [following, setFollowing] = useState(true);
+    const [newCount, setNewCount] = useState(0);
+    const anchorRef = useRef(null);
+    const highlightRef = useRef(null);
+    const [sel, setSel] = useState(() => new Set());
+    const snapRef = useRef([]);
+    const [, bumpSnap] = useState(0);
+    const sortOpts = useMemo(() => sortOptionsFor(source), [source]);
+    const isLogish = source === "log" || source === "all";
+    // On source change: keep the persisted filter, re-derive the per-source sort, reset transient
+    // view state (selection, pause, follow). Filter + sort persist; selection does not.
+    useEffect(() => {
+        setFilterState(FEED_PREFS.filter);
+        const persistedSort = FEED_PREFS.sortBySource[source || ""] || "newest";
+        setSortState(sortOptionsFor(source).some((o) => o.key === persistedSort) ? persistedSort : "newest");
+        setPaused(false);
+        setSel(new Set());
+        anchorRef.current = null;
+        followRef.current = true;
+        setFollowing(true);
+        setNewCount(0);
+    }, [source]);
+    // Build the display order from a chronological list of matched frames (text filter + sort +
+    // inversion). The full-buffer pass; used on control changes.
+    const orderFrames = useCallback((chrono) => {
+        const frames = filter ? chrono.filter((ev) => searchText(ev).includes(filter)) : chrono;
+        if (sort === "newest")
+            return frames.slice().reverse();
+        if (sort === "oldest")
+            return frames.slice();
+        const opt = sortOpts.find((o) => o.key === sort) || sortOpts[0];
+        return frames.slice().sort((a, b) => {
+            const va = opt.get(a), vb = opt.get(b);
+            if (va < vb)
+                return opt.dir === "asc" ? -1 : 1;
+            if (va > vb)
+                return opt.dir === "asc" ? 1 : -1;
+            return 0;
+        });
+    }, [filter, sort, sortOpts]);
+    const recompute = useCallback(() => orderFrames(store.viewFrames()), [orderFrames]);
+    const forceSnap = useCallback(() => {
+        snapRef.current = recompute();
+        bumpSnap((n) => n + 1);
+    }, [recompute]);
+    // THE FREEZE + incremental follow. While frozen the displayed snapshot is untouched (smooth
+    // scroll, new events only bump newCount). While following with "newest" sort we prepend only
+    // the new tail (O(new), not a full O(N) rebuild over 100k) -- the 100k-buffer enabler. Full
+    // recompute() runs only on control change / resume; a non-newest sort rebuilds while tailing.
+    const seenLenRef = useRef(0);
+    useEffect(() => {
+        snapRef.current = recompute();
+        bumpSnap((n) => n + 1);
+        seenLenRef.current = store.cache.length;
+        const off = store.on("feed", () => {
+            const cacheLen = store.cache.length;
+            if (!followRef.current) {
+                setNewCount((c) => c + 1);
+                seenLenRef.current = cacheLen; // keep the cursor current so resume is incremental
+                return;
+            }
+            const src = store.spec.source;
+            if (sort === "newest") {
+                const startLen = Math.min(seenLenRef.current, cacheLen); // guard against eviction shrink
+                const fresh = [];
+                for (let i = startLen; i < cacheLen; i++) {
+                    const c = store.cache[i];
+                    if (!c)
+                        continue;
+                    if (src !== "all" && c.type !== src)
+                        continue;
+                    const ev = c.ev;
+                    ev._type = c.type;
+                    if (!store.matches(ev))
+                        continue;
+                    if (filter && !searchText(ev).includes(filter))
+                        continue;
+                    fresh.push(ev);
+                }
+                if (fresh.length) {
+                    fresh.reverse();
+                    snapRef.current = fresh.concat(snapRef.current);
+                    bumpSnap((n) => n + 1);
+                }
+            }
+            else {
+                snapRef.current = recompute();
+                bumpSnap((n) => n + 1);
+            }
+            seenLenRef.current = cacheLen;
+            const el = vpRef.current;
+            if (el)
+                el.scrollTop = 0; // glue to newest (top)
+        });
+        return off;
+    }, [recompute, filter, sort, sortOpts]);
+    // Rebuild when the SERVER-SIDE filter (match/bodyContains) changes -- that changes what
+    // store.matches() admits, so the whole snapshot must refresh. Keyed so it only fires on a
+    // real filter change, not every spec poll.
+    const matchKey = JSON.stringify(spec.match || {}) + "|" + (spec.bodyContains || "");
+    useEffect(() => {
+        forceSnap();
+    }, [matchKey]);
+    // measure the flex-filled viewport height (changes on tab switch / chips growth without a
+    // window resize) via ResizeObserver; window resize is the fallback.
+    useEffect(() => {
+        const el = vpRef.current;
+        if (!el)
+            return;
+        const measure = () => setVpH(el.clientHeight);
+        measure();
+        let ro;
+        if (typeof ResizeObserver !== "undefined") {
+            ro = new ResizeObserver(measure);
+            ro.observe(el);
+        }
+        window.addEventListener("resize", measure);
+        return () => {
+            if (ro)
+                ro.disconnect();
+            window.removeEventListener("resize", measure);
+        };
+    }, []);
+    const frames = snapRef.current;
+    const total = frames.length;
+    const totalH = total * ROW_H;
+    const first = Math.max(0, Math.floor(scrollTop / ROW_H) - OVERSCAN);
+    const visCount = Math.ceil(vpH / ROW_H) + OVERSCAN * 2;
+    const last = Math.min(total, first + visCount);
+    // lock model: at the very top = following (live); scrolled away = frozen. Position drives
+    // follow purely so it never fights the user. Pause is a manual override.
+    const onScroll = useCallback((e) => {
+        const el = e.currentTarget;
+        setScrollTop(el.scrollTop);
+        if (paused)
+            return;
+        const atTop = el.scrollTop < ROW_H * 0.75;
+        if (atTop && !followRef.current) {
+            followRef.current = true;
+            setFollowing(true);
+            setNewCount(0);
+        }
+        else if (!atTop && followRef.current) {
+            followRef.current = false;
+            setFollowing(false);
+        }
+    }, [paused]);
+    useEffect(() => {
+        if (paused) {
+            followRef.current = false;
+            setFollowing(false);
+        }
+        else {
+            const el = vpRef.current;
+            const atTop = !el || el.scrollTop < ROW_H * 0.75;
+            followRef.current = atTop;
+            setFollowing(atTop);
+            if (atTop) {
+                setNewCount(0);
+                forceSnap();
+            }
+        }
+    }, [paused, forceSnap]);
+    // jumpNewest = "go back to live": clear selection, close inspector, resume tail (UNLOCKED).
+    // A selection locks the feed, so jumping to live must drop it.
+    const jumpNewest = useCallback(() => {
+        setSel(new Set());
+        anchorRef.current = null;
+        highlightRef.current = null;
+        onInspect && onInspect(null);
+        const el = vpRef.current;
+        if (el)
+            el.scrollTop = 0;
+        followRef.current = !paused;
+        setFollowing(!paused);
+        setNewCount(0);
+        forceSnap();
+    }, [paused, forceSnap, onInspect]);
+    // jumpOldest = park at the bottom with NO selection (inspector closed). Stays locked.
+    const jumpOldest = useCallback(() => {
+        setSel(new Set());
+        anchorRef.current = null;
+        highlightRef.current = null;
+        onInspect && onInspect(null);
+        followRef.current = false;
+        setFollowing(false);
+        const el = vpRef.current;
+        if (el)
+            el.scrollTop = el.scrollHeight;
+    }, [onInspect]);
+    // selection (by id) -- Logcat-style. Plain click selects the one row AND opens the inspector.
+    // Shift-click = range, Cmd/Ctrl-click = toggle (copy mode, do NOT open the inspector).
+    const selectRow = useCallback((displayIdx, ev) => {
+        const s = window.getSelection && window.getSelection();
+        if (s && s.removeAllRanges)
+            s.removeAllRanges();
+        const frame = frames[displayIdx];
+        const id = frame?.id;
+        if (id == null)
+            return;
+        if (ev.shiftKey && anchorRef.current != null) {
+            const aIdx = frames.findIndex((r) => r.id === anchorRef.current);
+            if (aIdx !== -1) {
+                const range = new Set();
+                const [lo, hi] = aIdx < displayIdx ? [aIdx, displayIdx] : [displayIdx, aIdx];
+                for (let i = lo; i <= hi; i++)
+                    if (frames[i])
+                        range.add(frames[i].id);
+                setSel(range);
+                onInspect && onInspect(null);
+                return;
+            }
+        }
+        if (ev.metaKey || ev.ctrlKey) {
+            setSel((prev) => {
+                const next = new Set(prev);
+                if (next.has(id))
+                    next.delete(id);
+                else
+                    next.add(id);
+                return next;
+            });
+            anchorRef.current = id;
+            onInspect && onInspect(null);
+            return;
+        }
+        anchorRef.current = id;
+        highlightRef.current = id;
+        if (selectedId === id) {
+            setSel(new Set());
+            onInspect && onInspect(null);
+        }
+        else {
+            setSel(new Set([id]));
+            onInspect && onInspect(frame);
+        }
+    }, [frames, onInspect, selectedId]);
+    const clearSel = useCallback(() => {
+        setSel(new Set());
+        anchorRef.current = null;
+        highlightRef.current = null;
+        onInspect && onInspect(null);
+    }, [onInspect]);
+    const copySel = useCallback(() => {
+        if (!sel.size)
+            return;
+        // RAW text from the store ring (buffer order), not the DOM -- off-screen rows included.
+        const lines = store.viewFrames().filter((r) => r.id != null && sel.has(r.id)).map(rawLine);
+        navigator.clipboard?.writeText(lines.join("\n"));
+    }, [sel]);
+    const scrollIntoView = useCallback((idx) => {
+        const el = vpRef.current;
+        if (!el)
+            return;
+        const top = idx * ROW_H;
+        const bottom = top + ROW_H;
+        if (top < el.scrollTop)
+            el.scrollTop = Math.max(0, top - ROW_H);
+        else if (bottom > el.scrollTop + el.clientHeight)
+            el.scrollTop = bottom - el.clientHeight + ROW_H;
+    }, []);
+    const framesRef = useRef(frames);
+    framesRef.current = frames;
+    const selectedIdRef = useRef(selectedId);
+    selectedIdRef.current = selectedId;
+    // Move the HIGHLIGHT by delta (or to "first"/"last"). Only moves the green row + freezes
+    // follow + scrolls into view; does NOT open the inspector (Enter does). FOLLOW MODE: if the
+    // inspector is already open, j/k brings it along; if closed, j/k just browses.
+    const moveSel = useCallback((delta) => {
+        const fr = framesRef.current;
+        if (!fr.length)
+            return;
+        followRef.current = false;
+        setFollowing(false);
+        let idx;
+        if (delta === "first")
+            idx = 0;
+        else if (delta === "last")
+            idx = fr.length - 1;
+        else {
+            const cur = fr.findIndex((f) => f.id === highlightRef.current);
+            if (cur === -1) {
+                const el = vpRef.current;
+                const topVisible = el ? Math.floor(el.scrollTop / ROW_H) : 0;
+                idx = Math.max(0, Math.min(fr.length - 1, topVisible));
+            }
+            else {
+                idx = Math.max(0, Math.min(fr.length - 1, cur + delta));
+            }
+        }
+        const frame = fr[idx];
+        if (!frame)
+            return;
+        highlightRef.current = frame.id;
+        setSel(new Set([frame.id]));
+        anchorRef.current = frame.id;
+        if (selectedIdRef.current != null)
+            onInspect && onInspect(frame);
+        scrollIntoView(idx);
+    }, [scrollIntoView, onInspect]);
+    const openHighlighted = useCallback(() => {
+        const fr = framesRef.current;
+        if (!fr.length)
+            return;
+        let frame = highlightRef.current != null ? fr.find((f) => f.id === highlightRef.current) : null;
+        if (!frame) {
+            const el = vpRef.current;
+            const idx = Math.max(0, Math.min(fr.length - 1, el ? Math.floor(el.scrollTop / ROW_H) : 0));
+            frame = fr[idx];
+            if (frame) {
+                highlightRef.current = frame.id;
+                setSel(new Set([frame.id]));
+            }
+        }
+        if (frame)
+            onInspect && onInspect(frame);
+    }, [onInspect]);
+    const pageScroll = useCallback((dir) => {
+        const el = vpRef.current;
+        if (!el)
+            return;
+        followRef.current = false;
+        setFollowing(false);
+        el.scrollTop += dir * Math.max(ROW_H, el.clientHeight - ROW_H * 2);
+    }, []);
+    // Keyboard model. Ignored while typing in a control (still allows Cmd/Ctrl-C copy). Tab
+    // switching (←/→/h/l) is handled GLOBALLY in app.ts so it also works on DB/Screen.
+    useEffect(() => {
+        const onKey = (e) => {
+            const t = e.target;
+            if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable)) {
+                if ((e.metaKey || e.ctrlKey) && e.key === "c" && sel.size) {
+                    e.preventDefault();
+                    copySel();
+                }
+                return;
+            }
+            if ((e.metaKey || e.ctrlKey) && e.key === "c") {
+                if (sel.size) {
+                    e.preventDefault();
+                    copySel();
+                }
+                return;
+            }
+            // Cmd/Ctrl+↑/↓ = top/bottom of document. These JUMP (clear selection + close inspector).
+            if ((e.metaKey || e.ctrlKey) && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+                if (e.key === "ArrowUp")
+                    jumpNewest();
+                else
+                    jumpOldest();
+                e.preventDefault();
+                return;
+            }
+            if (e.metaKey || e.ctrlKey || e.altKey)
+                return;
+            switch (e.key) {
+                case "ArrowDown":
+                case "j":
+                    moveSel(1);
+                    break;
+                case "ArrowUp":
+                case "k":
+                    moveSel(-1);
+                    break;
+                case "Home":
+                    jumpNewest();
+                    break;
+                case "End":
+                    jumpOldest();
+                    break;
+                case "g":
+                    if (e.shiftKey)
+                        jumpOldest();
+                    else
+                        jumpNewest();
+                    break;
+                case "PageDown":
+                case " ":
+                    pageScroll(1);
+                    break;
+                case "PageUp":
+                    pageScroll(-1);
+                    break;
+                case "Enter":
+                    openHighlighted();
+                    break;
+                case "/":
+                    if (filterRef.current)
+                        filterRef.current.focus();
+                    break;
+                case "Escape":
+                    if (selectedId != null || sel.size)
+                        jumpNewest();
+                    else
+                        return;
+                    break;
+                default:
+                    return;
+            }
+            e.preventDefault();
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [sel, selectedId, copySel, moveSel, openHighlighted, clearSel, jumpNewest, jumpOldest, pageScroll, onInspect]);
+    // package dropdown options (log/all): learned live from the stream
+    const pkgOptions = useMemo(() => {
+        const observed = [...(store.seen.package || new Set())].sort();
+        const cur = (spec.match && spec.match.package) || "__all__";
+        if (cur !== "__all__" && !observed.includes(cur))
+            observed.unshift(cur);
+        return observed;
+    }, [spec, store.feedVersion, frames.length]);
+    const curPkg = (spec.match && spec.match.package) || "__all__";
+    const changePkg = useCallback((v) => {
+        const next = JSON.parse(JSON.stringify(spec));
+        next.match = next.match || {};
+        if (v === "__all__")
+            delete next.match.package;
+        else
+            next.match.package = v;
+        if (!Object.keys(next.match).length)
+            delete next.match;
+        store.setSpec(next, { local: true });
+    }, [spec]);
+    // build only the visible slice
+    const slice = [];
+    for (let i = first; i < last; i++) {
+        const r = frames[i];
+        if (!r)
+            continue;
+        const highlighted = r.id != null && sel.has(r.id);
+        const inspecting = r.id === selectedId;
+        const breach = spec.highlight && store.breaches(r);
+        const failed = isFailedStatus(r);
+        slice.push(html `
+      <div
+        class=${"row" + (highlighted ? " sel" : "") + (inspecting ? " inspecting" : "") + (breach ? " breach" : "") + (failed ? " failed" : "")}
+        style=${{ top: i * ROW_H + "px" }}
+        onClick=${(e) => selectRow(i, e)}
+        title="click for full detail · ↑/↓ move · Enter inspects · shift/⌘-click multi-select"
+      >
+        <${RowBody} ev=${r} source=${source} highlight=${spec.highlight} />
+      </div>
+    `);
+    }
+    return html `
+    <div class="feedwrap-next">
+      <div class="feedbar">
+        <span class="ffilterwrap">
+          <input class="ffilter" ref=${filterRef} placeholder="filter rows…  ( / )" autocomplete="off" value=${filter}
+            onFocus=${() => { if (sel.size)
+        clearSel(); }}
+            onKeyDown=${(e) => {
+        const el = e.currentTarget;
+        if (e.key === "ArrowDown" || e.key === "Enter") {
+            e.preventDefault();
+            el.blur();
+            moveSel(1);
+        }
+        else if (e.key === "Escape") {
+            el.blur();
+        }
+        else if ((e.key === "ArrowLeft" || e.key === "ArrowRight") && el.value === "") {
+            e.preventDefault();
+            el.blur();
+            const ns = neighborTabSpec(e.key === "ArrowRight" ? 1 : -1);
+            if (ns)
+                store.setSpec(ns);
+        }
+    }}
+            onInput=${(e) => setFilter(e.currentTarget.value.trim().toLowerCase())} />
+          ${filter ? html `<span class="ffilterclear" onClick=${() => setFilter("")}>✕</span>` : null}
+        </span>
+        ${isLogish ? html `<label class="fsortlbl">app <select onChange=${(e) => changePkg(e.currentTarget.value)}><option value="__all__" selected=${curPkg === "__all__"}>all apps</option>${pkgOptions.map((p) => html `<option value=${p} selected=${p === curPkg}>${shortPkg(p)}</option>`)}</select></label>` : null}
+        <label class="fsortlbl">sort <select value=${sort} onChange=${(e) => setSort(e.currentTarget.value)}>${sortOpts.map((o) => html `<option value=${o.key}>${o.label}</option>`)}</select></label>
+        <button class=${"fbtn" + (paused ? " paused" : "")} title="pause / resume the live feed" onClick=${() => setPaused((p) => !p)}>${paused ? "▶ resume" : "⏸ pause"}</button>
+        <button class="fbtn" disabled=${!sel.size} onClick=${copySel}>Copy ${sel.size || ""}</button>
+        ${sel.size ? html `<button class="fbtn" onClick=${clearSel}>Clear sel</button>` : null}
+        <span class=${"fstatus " + (paused ? "st-paused" : following ? "st-live" : "st-locked")}>${paused ? "⏸ paused" : following ? "● live" : "⏸ locked"}</span>
+        <span class="fcount">${total} rows${sel.size ? " · " + sel.size + " selected" : ""}</span>
+      </div>
+      <div class="vpbox">
+        <div class="vp" ref=${vpRef} onScroll=${onScroll}>
+          <div class="spacer" style=${{ height: totalH + "px" }}>${slice}</div>
+        </div>
+        ${!following && (newCount > 0 || scrollTop > ROW_H) ? html `<div class="pill" onClick=${jumpNewest}>↑ newest${newCount ? ` (${newCount} new)` : ""} <span class="pillkey">${KEY_NEWEST}</span></div>` : null}
+        ${total > Math.ceil(vpH / ROW_H) && scrollTop < totalH - vpH - ROW_H ? html `<div class="pill pill-bottom" onClick=${jumpOldest}>↓ oldest <span class="pillkey">${KEY_OLDEST}</span></div>` : null}
+      </div>
+    </div>
+  `;
+}
+export { ROW_H, sortOptionsFor, searchText, rawLine, statusBand };