@slack/radar-mcp 1.6.0 → 1.7.0

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

@@ -0,0 +1,194 @@
+// Card widgets: rate, sparkline, graph (counter is a back-compat no-op -- see below). Each
+// reads the live aggregates the store maintains and re-renders on the store "tick" + "feed"
+// events. The graph SVG geometry is ported verbatim from the proven vanilla drawGraph.
+import { html } from "./html.js";
+import { useState } from "preact/hooks";
+import { esc } from "./esc.js";
+import { useStorePulse } from "./hooks.js";
+import { store, seriesValues, unitFor, fmtNum } from "./store.js";
+// The stats are a single THIN strip, not tall cards. Rate is an inline number, the sparkline a
+// small inline bar chart, and the graph (when present) flex-fills the rest of the row.
+export function Cards({ spec }) {
+    useStorePulse(store, "tick", "feed");
+    const viz = spec.viz || [];
+    // NOTE: the "counter" widget is intentionally NOT rendered. A raw count is the wrong signal
+    // for a live stream -- cumulative total disagrees with the scrollable feed, and buffer
+    // occupancy wobbles as the ring evicts. Rate is the live pulse; the feed is the data.
+    // "counter" stays a valid spec key (back-compat) but is a no-op here. Use matchedRetained
+    // for any count that must agree with the feed.
+    const hasRate = viz.includes("rate");
+    const hasSpark = viz.includes("sparkline");
+    const hasGraph = viz.includes("graph") && store.graph;
+    if (!hasRate && !hasSpark && !hasGraph)
+        return null;
+    const w = spec.rateWindowSec || 10;
+    return html `
+    <div class="statstrip">
+      ${hasRate ? html `<span class="stat"><span class="statlabel">rate</span><span class="statval">${store.rate}</span><span class="statunit">/${w}s</span></span>` : null}
+      ${hasSpark ? html `<${MiniSpark} />` : null}
+      ${hasGraph ? html `<${CollapsibleGraph} spec=${spec} />` : null}
+    </div>
+  `;
+}
+// A compact always-on mini spark that expands to the full chart as a FLOATING overlay (never
+// steals feed height); click-outside collapses.
+function CollapsibleGraph({ spec }) {
+    const [expanded, setExpanded] = useState(false);
+    return html `
+    <span class="cgraph">
+      <span class="cgraph-mini" title="click to expand the chart" onClick=${() => setExpanded(true)}>
+        <${MiniGraph} spec=${spec} />
+        <${GraphLegendInline} spec=${spec} />
+        <span class="cgraph-exp">⤢</span>
+      </span>
+      ${expanded
+        ? html `<div class="cgraph-overlay" onClick=${() => setExpanded(false)}>
+            <div class="cgraph-panel" onClick=${(e) => e.stopPropagation()}>
+              <div class="cgraph-head">
+                <span class="label">${(spec.series || []).map((s) => s.label || s.metric).join("  vs  ")}</span>
+                <span class="cgraph-collapse" title="collapse" onClick=${() => setExpanded(false)}>✕</span>
+              </div>
+              <${Graph} spec=${spec} />
+            </div>
+          </div>`
+        : null}
+    </span>
+  `;
+}
+function GraphLegendInline() {
+    const G = store.graph;
+    if (!G)
+        return null;
+    return html `<span class="cgraph-vals">${G.series.map((s, i) => {
+        const vals = seriesValues(s);
+        let last = null;
+        for (const v of vals)
+            if (v != null)
+                last = v;
+        const unit = unitFor(s.def);
+        return html `<span class="cgraph-val" style=${{ color: GCOLORS[i] }}>${fmtNum(last)}${unit ? " " + unit : ""}</span>`;
+    })}</span>`;
+}
+// Small normalized multi-line spark; red dashed threshold line when highlight is set. SVG body
+// is a generated string (geometry, no user text) via dangerouslySetInnerHTML -- one of the
+// three audited sinks; the only interpolated value (the threshold) is numeric.
+function MiniGraph({ spec }) {
+    const G = store.graph;
+    if (!G)
+        return null;
+    const W = 120, H = 28, N = G.N;
+    let out = "";
+    G.series.forEach((s, si) => {
+        const raw = seriesValues(s);
+        let last = null;
+        const vals = raw.map((v) => (v == null ? last : (last = v)));
+        const real = vals.filter((v) => v != null);
+        const mx = Math.max(1, ...real);
+        const pts = vals
+            .map((v, i) => (v == null ? null : (i / (N - 1)) * W + "," + (H - (v / mx) * (H - 2) - 1).toFixed(1)))
+            .filter(Boolean)
+            .join(" ");
+        if (pts)
+            out += '<polyline fill="none" stroke="' + GCOLORS[si] + '" stroke-width="1.5" points="' + pts + '"/>';
+        const h = spec.highlight;
+        if (h && s.def.field && h.field === s.def.field && h.value <= mx) {
+            const ty = H - (h.value / mx) * (H - 2) - 1;
+            out += '<line x1="0" y1="' + ty.toFixed(1) + '" x2="' + W + '" y2="' + ty.toFixed(1) + '" stroke="#ff5b50" stroke-width="1" stroke-dasharray="3 2"/>';
+        }
+    });
+    return html `<svg class="minigraph" viewBox=${"0 0 " + W + " " + H} preserveAspectRatio="none" dangerouslySetInnerHTML=${{ __html: out }}></svg>`;
+}
+function MiniSpark() {
+    const ps = store.perSec;
+    const mx = Math.max(1, ...ps);
+    // plain "per sec": Preact renders template text literally (no entity decode), and
+    // .ministat is white-space:nowrap, so a normal space does not wrap.
+    return html `<span class="ministat"><span class="statlabel">per sec</span><span class="minispark">${ps.map((n) => html `<span class="minibar" style=${{ height: 2 + (n / mx) * 20 + "px" }}></span>`)}</span></span>`;
+}
+const GCOLORS = ["#39d98a", "#ffd479"];
+// Chart CHROME (frame, ticks, axis labels) reads live theme tokens so the graph follows
+// light/dark. The data SERIES + the red threshold stay vivid in both themes by design.
+function themeColor(varName, fallback) {
+    try {
+        const v = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+        return v || fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+// Live SVG line chart, 1-2 series, dual labeled axes + threshold reference line. Built as an
+// innerHTML SVG string (same as vanilla drawGraph) so the geometry math is byte-for-byte the
+// proven version; every interpolated string (units/labels) passes through the shared esc().
+function Graph({ spec }) {
+    const G = store.graph;
+    if (!G)
+        return null;
+    const VB_W = 640, VB_H = 200, N = G.N;
+    const L = 46, R = G.series.length > 1 ? 52 : 14, T = 10, B = 26;
+    const x0 = L, x1 = VB_W - R, y0 = T, y1 = VB_H - B, pw = x1 - x0, ph = y1 - y0;
+    const cFrame = themeColor("--border", "#1e2a3a");
+    const cTick = themeColor("--border-3", "#33455c");
+    const cAxis = themeColor("--muted", "#5f7186");
+    let out = "", legend = "";
+    out += '<rect x="' + x0 + '" y="' + y0 + '" width="' + pw + '" height="' + ph + '" fill="none" stroke="' + cFrame + '"/>';
+    for (let k = 0; k <= 4; k++) {
+        const fx = x0 + (k / 4) * pw;
+        const secsAgo = Math.round((1 - k / 4) * N);
+        const lbl = secsAgo === 0 ? "now" : "-" + secsAgo + "s";
+        out += '<line x1="' + fx.toFixed(1) + '" y1="' + y1 + '" x2="' + fx.toFixed(1) + '" y2="' + (y1 + 4) + '" stroke="' + cTick + '"/>';
+        out += '<text x="' + fx.toFixed(1) + '" y="' + (y1 + 16) + '" fill="' + cAxis + '" font-size="10" text-anchor="middle">' + lbl + "</text>";
+    }
+    G.series.forEach((s, si) => {
+        const raw = seriesValues(s);
+        const scale = s.def.metric === "errorRate" ? 100 : 1;
+        let last = null;
+        const vals = raw.map((v) => {
+            const sv = v == null ? null : v * scale;
+            if (sv != null) {
+                last = sv;
+                return sv;
+            }
+            return last;
+        });
+        const real = vals.filter((v) => v != null);
+        const mx = Math.max(1, ...real);
+        const col = GCOLORS[si], unit = unitFor(s.def);
+        const axX = si === 0 ? x0 : x1, anchor = si === 0 ? "end" : "start", tx = si === 0 ? x0 - 6 : x1 + 6;
+        for (let k = 0; k <= 2; k++) {
+            const val = (mx * k) / 2;
+            const fy = y1 - (k / 2) * ph;
+            out += '<text x="' + tx + '" y="' + (fy + 3).toFixed(1) + '" fill="' + col + '" font-size="10" text-anchor="' + anchor + '">' + fmtNum(val) + "</text>";
+        }
+        out += '<text x="' + axX + '" y="' + (y0 - 1) + '" fill="' + col + '" font-size="9" text-anchor="' + (si === 0 ? "start" : "end") + '">' + esc(unit || s.def.metric) + "</text>";
+        const pts = vals
+            .map((v, i) => {
+            if (v == null)
+                return null;
+            const px = x0 + (i / (N - 1)) * pw;
+            const py = y1 - (v / mx) * ph;
+            return px.toFixed(1) + "," + py.toFixed(1);
+        })
+            .filter(Boolean)
+            .join(" ");
+        if (pts)
+            out += '<polyline fill="none" stroke="' + col + '" stroke-width="2" points="' + pts + '"/>';
+        const h = spec.highlight;
+        if (h && s.def.field && h.field === s.def.field && h.value <= mx) {
+            const ty = y1 - (h.value / mx) * ph;
+            out += '<line x1="' + x0 + '" y1="' + ty.toFixed(1) + '" x2="' + x1 + '" y2="' + ty.toFixed(1) + '" stroke="#ff3b30" stroke-width="1" stroke-dasharray="4 3"/>';
+            out += '<text x="' + (x0 + 4) + '" y="' + (ty - 3).toFixed(1) + '" fill="#ff6b60" font-size="9">' + esc(h.label || ">" + h.value) + " " + esc(unit || "") + "</text>";
+        }
+        const shown = fmtNum(last) + (unit ? " " + unit : "");
+        legend += '<span style="color:' + col + '">■ ' + esc(s.def.label || s.def.metric) + ": " + shown + "</span>  ";
+    });
+    const labelText = G.series.map((s) => s.def.label || s.def.metric).join("  vs  ");
+    return html `
+    <div class="graphcard">
+      <div class="label">${labelText}</div>
+      <svg viewBox="0 0 640 200" dangerouslySetInnerHTML=${{ __html: out }}></svg>
+      <div class="legend" dangerouslySetInnerHTML=${{ __html: legend + ' <span style="color:var(--muted)">x: time (last ' + N + "s, right=now)</span>" }}></div>
+    </div>
+  `;
+}
+export { seriesValues, unitFor, fmtNum };

package/dist/web/server.js

@@ -9,7 +9,7 @@ import { RADAR_HOST, RADAR_PORT, RADAR_VERSION, WEB_PORT_DEFAULT } from "../shar
 import { cleanupPulledDatabases, initializeDatabasePath, listDatabases, pullDatabase, pulledSize, queryDatabase, resetDbState, } from "../shared/db.js";
 import { LogSession } from "./log-session.js";
 import { BLANK_SPEC, coerceSpec, validateSpec } from "./spec.js";
-import { screenCapabilities, refreshScreenCapabilities, grantScreenConsent, hasScreenConsent, detectDisplay, displayNote, captureScreenshot, startLive, addViewer, removeViewer, primeIfNeeded, startRecording, stopRecording, recordingPath, resetScreenState, registerScreenCleanup, resolveFfmpeg, ffmpegInstallHint, SCREEN_BOUNDARY, } from "../shared/screen.js";
+import { screenCapabilities, refreshScreenCapabilities, grantScreenConsent, hasScreenConsent, detectDisplay, displayNote, captureScreenshot, startLive, addViewer, removeViewer, reapLiveIfIdle, primeIfNeeded, startRecording, stopRecording, recordingPath, resetScreenState, registerScreenCleanup, resolveFfmpeg, ffmpegInstallHint, SCREEN_BOUNDARY, } from "../shared/screen.js";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const WEB_PORT = Number(process.env.SLACK_RADAR_WEB_PORT ?? WEB_PORT_DEFAULT);
 const INDEX_PATH = path.join(__dirname, "public", "index.html");
@@ -139,6 +139,8 @@ export function createServer() {
         const url = req.url ?? "";
         const urlPath = url.split("?")[0];
         if (urlPath === "/" || urlPath === "/index.html") {
+            // The Preact dashboard is the default (and only) UI. The old vanilla dashboard + its
+            // ?next opt-in seam were retired in the flip; index.html IS the Preact shell now.
             serveIndex(res);
             return;
         }
@@ -797,6 +799,10 @@ function handleScreen(req, res) {
     if (url === "/screen/record/stop" && req.method === "POST") {
         void (async () => {
             const p = await stopRecording();
+            // If the viewer already left (the close-while-recording path drops the <img> before
+            // this POST lands), the recording was the only thing keeping the cast alive — reap it
+            // now so screenrecord + ffmpeg do not run on with no viewer.
+            reapLiveIfIdle();
             const file = p ? path.basename(p) : null;
             let sizeBytes = 0;
             if (p) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slack/radar-mcp",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "MCP server and web dashboard for on-device debugging of the Slack Android app via ADB",
   "type": "module",
   "main": "dist/mcp/index.js",
@@ -17,7 +17,8 @@
     "clean": "rm -rf dist",
     "prebuild": "npm run clean",
     "copy-vendor": "node scripts/copy-vendor.mjs",
-    "build": "tsc && cp -r src/web/public dist/web/public && npm run copy-vendor && chmod +x dist/mcp/index.js dist/web/bin.js",
+    "build:web": "tsc -p tsconfig.web.json",
+    "build": "tsc && npm run build:web && node scripts/copy-public.mjs && npm run copy-vendor && chmod +x dist/mcp/index.js dist/web/bin.js",
     "start": "node dist/mcp/index.js",
     "start:web": "node dist/web/bin.js",
     "watch": "tsc --watch",