@slack/radar-mcp 1.6.0 → 1.8.0

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

@@ -0,0 +1,210 @@
+// App root. Owns: header (conn dot, profile label, reconnect, theme toggle, ▣ Screen toggle),
+// modebar tabs (incl. the persistent Custom tab), the alert flash/banner, and the view router.
+// Holds NO device data -- that all lives in store.ts; this composes the components and reacts
+// to store events. The DB browser (source:db) renders its own self-contained container, which
+// does NOT import the store (it is point-in-time, not a live feed). The screen overlay is a
+// router sibling toggled by ▣ Screen: a fixed right-docked panel that floats over any view.
+import { html } from "./html.js";
+import { render } from "preact";
+import { useState, useEffect, useCallback } from "preact/hooks";
+import { useStoreValue } from "./hooks.js";
+import { store, MODES, describeConstraints } from "./store.js";
+import { Feed } from "./feed.js";
+import { Cards } from "./widgets.js";
+import { Inspector } from "./inspector.js";
+import { Filters } from "./filters.js";
+import { DbBrowser } from "./db.js";
+import { ScreenOverlay } from "./screen.js";
+function readTheme() {
+    try {
+        return document.documentElement.classList.contains("light") ? "light" : "dark";
+    }
+    catch {
+        return "dark";
+    }
+}
+function Header({ screenOpen, onScreenToggle }) {
+    const conn = useStoreValue(store, "conn", () => store.conn);
+    const profile = useStoreValue(store, "profile", () => store.profileLabel);
+    const [busy, setBusy] = useState(false);
+    const [theme, setTheme] = useState(readTheme);
+    const reconnect = useCallback(async () => {
+        setBusy(true);
+        await store.reconnect();
+        setBusy(false);
+    }, []);
+    const toggleTheme = useCallback(() => {
+        const next = readTheme() === "light" ? "dark" : "light";
+        document.documentElement.classList.toggle("light", next === "light");
+        try {
+            localStorage.setItem("radar-theme", next);
+        }
+        catch {
+            /* private mode: theme resets next load */
+        }
+        setTheme(next);
+    }, []);
+    const connected = conn.state === "connected";
+    return html `
+    <h1>
+      SLACK RADAR DASHBOARD
+      <span class=${"conn " + conn.state}>${connected ? "● live" : "● " + (conn.msg || "reconnecting…")}</span>
+      <span class="profilewrap" title="the device profile Radar is connected to (first app to launch wins the socket)">profile: <b>${profile}</b></span>
+      ${!connected ? html `<button class="reconnect" disabled=${busy} onClick=${reconnect}>${busy ? "⟳ enabling…" : "⟳ Reconnect Radar"}</button>` : null}
+      <button class="themebtn" onClick=${toggleTheme} title="Toggle light / dark theme">${theme === "light" ? "🌙 Dark" : "☀ Light"}</button>
+      <button class=${"screenbtn" + (screenOpen ? " on" : "")} onClick=${onScreenToggle} title="Mirror the live device screen">▣ Screen</button>
+    </h1>
+  `;
+}
+function ModeBar() {
+    const [, force] = useState(0);
+    useEffect(() => store.on("spec", () => force((n) => n + 1)), []);
+    const activeKey = store.activeModeKey();
+    const pick = (specToPush) => store.setSpec(specToPush);
+    return html `
+    <div class="modebar">
+      ${MODES.map((m) => html `<button class=${"modebtn" + (activeKey === m.key ? " active" : "")} onClick=${() => pick(m.spec)}>${m.label}</button>`)}
+      ${store.lastCustomSpec ? html `<button class=${"modebtn custom" + (activeKey === "__custom__" ? " active" : "")} title="pushed from a terminal Claude Code session; persists until refresh" onClick=${() => pick(store.lastCustomSpec)}>✎ ${store.lastCustomSpec.title || "Custom"}</button>` : null}
+    </div>
+  `;
+}
+let audioCtx = null;
+function beep() {
+    try {
+        const Ctx = window.AudioContext || window.webkitAudioContext;
+        audioCtx = audioCtx || new Ctx();
+        const o = audioCtx.createOscillator();
+        const g = audioCtx.createGain();
+        o.type = "sine";
+        o.frequency.value = 880;
+        o.connect(g);
+        g.connect(audioCtx.destination);
+        g.gain.setValueAtTime(0.0001, audioCtx.currentTime);
+        g.gain.exponentialRampToValueAtTime(0.25, audioCtx.currentTime + 0.01);
+        g.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 0.25);
+        o.start();
+        o.stop(audioCtx.currentTime + 0.26);
+    }
+    catch {
+        /* no audio */
+    }
+}
+function Alert() {
+    const [banner, setBanner] = useState(null);
+    const [flash, setFlash] = useState(false);
+    useEffect(() => {
+        let bTimer = null;
+        const off = store.on("alert", ({ spec, ev, note }) => {
+            if (spec.flash !== false) {
+                setFlash(true);
+                setTimeout(() => setFlash(false), 140);
+            }
+            if (spec.sound !== false)
+                beep();
+            const tail = note || ev.event_type || ev.event_name || (ev.url ? new URL(ev.url, "http://x").pathname : "") || "";
+            setBanner({ say: spec.say || "ALERT", tail: String(tail) });
+            if (bTimer)
+                clearTimeout(bTimer);
+            bTimer = setTimeout(() => setBanner(null), 2500);
+        });
+        return () => {
+            off();
+            if (bTimer)
+                clearTimeout(bTimer);
+        };
+    }, []);
+    return html `
+    <div id="flash" class=${flash ? "on" : ""}></div>
+    ${banner ? html `<div id="alertbanner" class="on"><span>${banner.say}  —  ${banner.tail}</span><span class="x" onClick=${() => setBanner(null)}>dismiss ✕</span></div>` : null}
+  `;
+}
+// The streaming view: cards on top, then feed + (selected) inspector side by side.
+function StreamView({ spec }) {
+    const [selected, setSelected] = useState(null);
+    useEffect(() => setSelected(null), [spec.source]);
+    const tech = describeConstraints(spec);
+    return html `
+    <div class="sub">
+      <span class="summary">${spec.summary || spec.title}</span>
+      <span class="tech">${tech}</span>
+    </div>
+    <${Filters} spec=${spec} />
+    <${Cards} spec=${spec} />
+    <div class=${"stage" + (selected ? " split" : "")}>
+      <${Feed} spec=${spec} onInspect=${(ev) => setSelected(ev)} selectedId=${selected && selected.id} />
+      ${selected ? html `<${Inspector} ev=${selected} onClose=${() => setSelected(null)} />` : null}
+    </div>
+  `;
+}
+function Blank() {
+    return html `<div class="sub"><span class="summary">Pick a dashboard above.</span><span class="tech">Live, Network, RTM, Clogs, Logs — or ask a terminal Claude Code session to build a custom view.</span></div>`;
+}
+function App() {
+    const spec = useStoreValue(store, "spec", () => store.spec);
+    const [screenOpen, setScreenOpen] = useState(false);
+    // The screen overlay is a fixed right-docked panel; widen the page padding while it is open so
+    // it never covers the feed/widgets.
+    useEffect(() => {
+        document.body.classList.toggle("screenopen", screenOpen);
+    }, [screenOpen]);
+    // GLOBAL tab switching (← / → / h / l) -- at the app root so it works on EVERY tab. The
+    // per-row j/k nav stays inside the Feed. Ignored while typing in a control.
+    useEffect(() => {
+        const onKey = (e) => {
+            if (e.metaKey || e.ctrlKey || e.altKey)
+                return;
+            const t = e.target;
+            if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable))
+                return;
+            if (e.key !== "ArrowRight" && e.key !== "ArrowLeft" && e.key !== "h" && e.key !== "l")
+                return;
+            const dir = e.key === "ArrowRight" || e.key === "l" ? 1 : -1;
+            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));
+            if (next === cur)
+                return;
+            const nextKey = keys[next];
+            const nextSpec = nextKey === "__custom__" ? store.lastCustomSpec : MODES.find((m) => m.key === nextKey)?.spec;
+            if (nextSpec)
+                store.setSpec(nextSpec);
+            e.preventDefault();
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, []);
+    let view;
+    if (!spec || spec.blank) {
+        view = html `<${Blank} />`;
+    }
+    else if (spec.source === "db") {
+        // The DB browser is a self-contained, point-in-time container: it does NOT import the store
+        // (no SSE engine / timers on a tab that has no live feed). key=db so it remounts cleanly
+        // when switching to the DB tab.
+        view = html `
+      <div class="sub">
+        <span class="summary">${spec.summary || "Device database browser"}</span>
+        <span class="tech">source=db (on-device SQLite snapshot, read-only)</span>
+      </div>
+      <${DbBrowser} spec=${spec} key="db" />
+    `;
+    }
+    else {
+        view = html `<${StreamView} spec=${spec} key=${spec.source} />`;
+    }
+    return html `
+    <${Alert} />
+    <${Header} screenOpen=${screenOpen} onScreenToggle=${() => setScreenOpen((o) => !o)} />
+    <${ModeBar} />
+    ${view}
+    <${ScreenOverlay} open=${screenOpen} onClose=${() => setScreenOpen(false)} />
+  `;
+}
+store.start();
+const root = document.getElementById("app");
+if (root)
+    render(html `<${App} />`, root);

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

@@ -0,0 +1,286 @@
+// DB browser (source:"db") -- read-only on-device SQLite browser: database list -> tables ->
+// query grid, with a profile picker on dual-profile devices. Ported from the PoC db.js
+// (vanilla buildDbView/loadDbList/dbSelectDb/dbSelectTbl/dbRun). Server contract (unchanged):
+//   /dbs?user=            -> { user, availableUsers: string[], names: string[] } | { error, names:[], availableUsers:[] }
+//   /dbtables?db=&user=&refresh=1 -> { tables: {name, rows}[], sizeBytes } | { error }
+//   /dbquery?db=&sql=&user= -> { rows: object[] } (200) | { error } (400)
+//
+// IMPORTANT (plan requirement): this module must NOT import the streaming store. The DB tab is
+// point-in-time, not a live feed; pulling the store would start the SSE engine + timers on a
+// tab that has no use for them. It carries its own keyboard nav since there is no Feed here.
+import { html } from "./html.js";
+import { useState, useEffect, useCallback, useRef } from "preact/hooks";
+import { useLatestRef, useGlobalKeydown } from "./hooks.js";
+function profileLabel(u) {
+    return u === "" || u == null ? "device" : u === "0" ? "personal (user 0)" : "secondary (user " + u + ")";
+}
+export function DbBrowser({ spec }) {
+    const [user, setUser] = useState(null);
+    const [dbs, setDbs] = useState(null); // null = loading
+    const [db, setDb] = useState(null);
+    const [tables, setTables] = useState(null); // null = loading
+    const [sql, setSql] = useState("");
+    const [out, setOut] = useState({ msg: "pick a database, then a table" });
+    const [meta, setMeta] = useState("");
+    // keyboard nav: which pane has focus ("db" list or "tbl" list) + the highlighted index in
+    // each. j/k and Up/Down move the highlight within a pane, Enter drills in, Esc backs out of
+    // the tables pane, Tab toggles panes. Arrow keys are consumed here (preventDefault) so list
+    // navigation does not also scroll the page.
+    const [pane, setPane] = useState("db");
+    const [dbIdx, setDbIdx] = useState(0);
+    const [tblIdx, setTblIdx] = useState(0);
+    const userQS = useCallback((u) => (u != null ? "&user=" + encodeURIComponent(u) : ""), []);
+    const loadList = useCallback(async (u) => {
+        setDbs(null);
+        try {
+            const r = await (await fetch("/dbs?" + (u != null ? "user=" + encodeURIComponent(u) : ""))).json();
+            setDbs(r);
+            if (!r.error)
+                setUser(r.user ?? null);
+        }
+        catch (e) {
+            setDbs({ error: "network error loading databases" });
+        }
+    }, []);
+    // initial load
+    useEffect(() => {
+        loadList(null);
+    }, []);
+    // keep the keyboard highlight in range when the lists change
+    useEffect(() => {
+        setDbIdx((i) => Math.max(0, Math.min(((dbs && dbs.names) || []).length - 1, i)));
+    }, [dbs]);
+    useEffect(() => {
+        setTblIdx((i) => Math.max(0, Math.min(((tables && tables.tables) || []).length - 1, i)));
+    }, [tables]);
+    const pickDb = useCallback(async (name, refresh) => {
+        setDb(name);
+        setSql("");
+        setOut({ msg: "pick a table or write a query" });
+        setTables(null);
+        try {
+            const r = await (await fetch("/dbtables?db=" + encodeURIComponent(name) + userQS(user) + (refresh ? "&refresh=1" : ""))).json();
+            setTables(r);
+            if (!r.error)
+                setMeta(name + " — " + (((r.sizeBytes ?? 0) / 1024) | 0) + " KB snapshot, " + (r.tables ?? []).length + " tables · " + profileLabel(user));
+        }
+        catch (e) {
+            setTables({ error: "network error loading tables" });
+        }
+    }, [user, userQS]);
+    const RENDER_LIMIT = 10000;
+    const run = useCallback(async (q) => {
+        const theSql = q ?? sql;
+        if (!db || !theSql)
+            return;
+        setOut({ msg: "running…" });
+        try {
+            const r = await (await fetch("/dbquery?db=" + encodeURIComponent(db) + "&sql=" + encodeURIComponent(theSql) + userQS(user))).json();
+            if (r.error)
+                setOut({ error: r.error });
+            else if (!r.rows || !r.rows.length) {
+                setOut({ rows: [] });
+                setMeta(db + " — 0 rows");
+            }
+            else {
+                const totalRows = r.rows.length;
+                const displayRows = r.rows.slice(0, RENDER_LIMIT);
+                setOut({ rows: displayRows });
+                const suffix = totalRows > RENDER_LIMIT ? " (showing first " + RENDER_LIMIT + " of " + totalRows + ")" : "";
+                setMeta(db + " — " + totalRows + " rows" + suffix);
+            }
+        }
+        catch (e) {
+            setOut({ error: "network error running query" });
+        }
+    }, [db, sql, user, userQS]);
+    const pickTable = useCallback((t) => {
+        const q = 'SELECT * FROM "' + t + '" LIMIT 100';
+        setSql(q);
+        run(q);
+    }, [run]);
+    // Scroll the keyboard-highlighted item into view as the focus index moves, so paging a long
+    // list with j/k keeps the green-outlined row on screen. block:nearest avoids a jump when it
+    // is already visible.
+    const sideRef = useRef(null);
+    useEffect(() => {
+        const el = sideRef.current && sideRef.current.querySelector(".dbitem.kbd");
+        if (el && el.scrollIntoView)
+            el.scrollIntoView({ block: "nearest" });
+    }, [pane, dbIdx, tblIdx]);
+    // Keyboard navigation. The latest lists/indices/handlers live in a ref so the single window
+    // listener (attached once by useGlobalKeydown) never goes stale. Mirrors the PoC's
+    // stale-closure-ref pattern, now via the shared Foundation hooks.
+    const dbNames = (dbs && dbs.names) || [];
+    const tblNames = (tables && tables.tables) || [];
+    const st = useLatestRef({ dbNames, tblNames, pane, dbIdx, tblIdx, pickDb, pickTable });
+    useGlobalKeydown((e) => {
+        // never hijack the SQL box or the profile dropdown
+        const t = e.target;
+        if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable))
+            return;
+        if (e.metaKey || e.ctrlKey || e.altKey)
+            return;
+        const s = st.current;
+        const list = s.pane === "tbl" ? s.tblNames : s.dbNames;
+        switch (e.key) {
+            case "ArrowDown":
+            case "j":
+                if (!list.length)
+                    return;
+                if (s.pane === "tbl")
+                    setTblIdx((i) => Math.min(s.tblNames.length - 1, i + 1));
+                else
+                    setDbIdx((i) => Math.min(s.dbNames.length - 1, i + 1));
+                break;
+            case "ArrowUp":
+            case "k":
+                if (!list.length)
+                    return;
+                if (s.pane === "tbl")
+                    setTblIdx((i) => Math.max(0, i - 1));
+                else
+                    setDbIdx((i) => Math.max(0, i - 1));
+                break;
+            case "Tab":
+                if (s.pane === "db" && s.tblNames.length)
+                    setPane("tbl");
+                else
+                    setPane("db");
+                break;
+            case "Enter":
+                if (s.pane === "db") {
+                    const name = s.dbNames[s.dbIdx];
+                    if (name) {
+                        s.pickDb(name);
+                        setPane("tbl");
+                        setTblIdx(0);
+                    }
+                }
+                else {
+                    const tbl = s.tblNames[s.tblIdx];
+                    if (tbl)
+                        s.pickTable(tbl.name);
+                }
+                break;
+            case "Escape":
+                // back out of the tables pane to the db list; from the db pane Escape is a no-op
+                if (s.pane === "tbl")
+                    setPane("db");
+                else
+                    return;
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+    });
+    return html `
+    <div class="dbview">
+      <div class="dbside" ref=${sideRef}>
+        <div class="dbsec">databases</div>
+        ${dbs == null
+        ? html `<div class="msg">loading…</div>`
+        : dbs.error
+            ? html `<div class="msg err">${dbs.error}</div>`
+            : !dbs.names || !dbs.names.length
+                ? html `<div class="msg">no databases (device unreachable, or debug build not installed)</div>`
+                : html `
+                  ${(dbs.availableUsers || []).length > 1
+                    ? html `<div class="dbprofile">
+                        <span class="dbprofcap">profile</span>
+                        <select
+                          onChange=${(e) => {
+                        const v = e.currentTarget.value;
+                        setUser(v);
+                        setDb(null);
+                        setTables(null);
+                        setOut({ msg: "pick a database" });
+                        loadList(v);
+                    }}
+                        >
+                          ${dbs.availableUsers.map((u) => html `<option value=${u} selected=${u === dbs.user}>${profileLabel(u)}</option>`)}
+                        </select>
+                      </div>`
+                    : html `<div class="dbprofile">profile: <b>${profileLabel(dbs.user)}</b></div>`}
+                  ${dbs.names.map((n, i) => html `<div
+                        class=${"dbitem" + (n === db ? " sel" : "") + (pane === "db" && i === dbIdx ? " kbd" : "")}
+                        onClick=${() => {
+                    setPane("db");
+                    setDbIdx(i);
+                    pickDb(n);
+                }}
+                      >
+                        ${n}
+                      </div>`)}
+                `}
+        <div class="dbsec">tables</div>
+        ${tables == null
+        ? db
+            ? html `<div class="msg">pulling + reading…</div>`
+            : html `<div class="msg">pick a database</div>`
+        : tables.error
+            ? html `<div class="msg err">${tables.error}</div>`
+            : html `${(tables.tables ?? []).map((t, i) => html `<div
+                    class=${"dbitem" + (pane === "tbl" && i === tblIdx ? " kbd" : "")}
+                    onClick=${() => {
+                setPane("tbl");
+                setTblIdx(i);
+                pickTable(t.name);
+            }}
+                  >
+                    ${t.name}<span class="rows">${String(t.rows)}</span>
+                  </div>`)}`}
+      </div>
+      <div class="dbmain">
+        <div class="dbprivacy">
+          Privacy: opening a database copies the on-device Slack store (message text,
+          request/response bodies, user, channel, and team IDs) in plaintext to a temp file on
+          this machine. The copy is read-only and auto-deleted when this dashboard stops. Review
+          before sharing anything from here.
+        </div>
+        <div class="dbqbar">
+          <input
+            value=${sql}
+            placeholder="SELECT * FROM table LIMIT 100   (read-only)"
+            autocomplete="off"
+            onInput=${(e) => setSql(e.currentTarget.value)}
+            onKeyDown=${(e) => {
+        if (e.key === "Enter")
+            run();
+    }}
+          />
+          <button onClick=${() => run()}>Run</button>
+          ${db ? html `<button class="dbrefresh" onClick=${() => pickDb(db, true)}>↻ refresh</button>` : null}
+        </div>
+        <div class="dbmeta">${meta}</div>
+        <div class="dbout">
+          ${out.msg
+        ? html `<div class="msg">${out.msg}</div>`
+        : out.error
+            ? html `<div class="msg err">${out.error}</div>`
+            : !out.rows || !out.rows.length
+                ? html `<div class="msg">0 rows</div>`
+                : html `<${Grid} rows=${out.rows} />`}
+        </div>
+      </div>
+    </div>
+  `;
+}
+function Grid({ rows }) {
+    const cols = Object.keys(rows[0]);
+    return html `
+    <table>
+      <thead>
+        <tr>
+          ${cols.map((c) => html `<th>${c}</th>`)}
+        </tr>
+      </thead>
+      <tbody>
+        ${rows.map((row) => html `<tr>
+              ${cols.map((c) => html `<td title=${String(row[c] ?? "")}>${String(row[c] ?? "")}</td>`)}
+            </tr>`)}
+      </tbody>
+    </table>
+  `;
+}

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

@@ -0,0 +1,13 @@
+// One HTML escaper, shared by every dangerouslySetInnerHTML sink in the dashboard (the
+// syntax-highlighted JSON, the graph SVG, the legend). Preact auto-escapes normal
+// interpolation, so this is ONLY for the handful of innerHTML paths that build markup as a
+// string. Escapes all five HTML-significant characters; missing any one reopens the DOM-XSS
+// class the vanilla dashboard had. Do NOT inline a second copy in a component -- import this.
+//
+// SINK-CONTEXT ASSUMPTION: this escaper is safe for TEXT content and DOUBLE-QUOTED attribute
+// values, which is what every current sink uses. It does NOT escape space, `=`, backtick, or
+// `/`, so it is NOT safe in an UNQUOTED attribute or a template-literal context. Any new sink
+// must keep interpolated attributes double-quoted (attr="${esc(x)}"), never attr=${esc(x)}.
+export function esc(s) {
+    return String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+}