@slack/radar-mcp 1.0.0 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 # slack-radar-mcp
 
-Platform-agnostic MCP server for on-device debugging of mobile apps.
+Platform-agnostic MCP server and web dashboard for on-device debugging of mobile apps.
 
 Gives Claude Code direct access to network calls, RTM events, analytics (clogs), screenshots, logs, and more from a running debug build. Ships with Android support (ADB); the `DeviceTransport` interface makes adding iOS or other platforms straightforward.
 
@@ -8,21 +8,45 @@ Gives Claude Code direct access to network calls, RTM events, analytics (clogs),
 
 ## Installation
 
+The recommended path is via the marketplace plugin:
+
 ```bash
-git clone slack-github.com/slack/slack-radar-mcp
-cd slack-radar-mcp
-npm install
-npm run build
+/plugin install slack-radar@slack-android-marketplace
+/slack-radar-setup
 ```
 
-Register the server with Claude Code:
+Or register manually:
 
 ```bash
-slack claude mcp add -s user slack-radar-mcp -- node /path/to/slack-radar-mcp/dist/index.js
+slack claude mcp add -s user slack-radar-mcp -- npx -y @slack/radar-mcp@latest
 ```
 
 Restart your Claude Code session for the tools to appear.
 
+## Web Dashboard
+
+The package also ships a browser-based dashboard that shows the same live device data without Claude Code in the loop.
+
+```bash
+npx -p @slack/radar-mcp slack-radar-web
+```
+
+Or with a global install:
+
+```bash
+npm install -g @slack/radar-mcp
+slack-radar-web
+```
+
+Opens `http://localhost:8100` automatically. Set `SLACK_RADAR_WEB_PORT` to use a different port. Features:
+
+* Live Network / RTM / Clogs tabs with real-time SSE streaming
+* Filter bar for URL, channel, event name, payload text
+* Detail pane with Copy JSON, Copy Body, and Copy cURL buttons
+* Profile selector for personal vs work profile when both are running
+* Auto-extend keeps the device-side server alive while the browser tab is open
+* Enable Radar button handles ADB forwarding and device activation without Claude
+
 ## Prerequisites
 
 * Node.js 18+
@@ -72,15 +96,16 @@ Mobile debug build (device)
               |
               | port forwarding (adb forward / iproxy / etc.)
               |
-MCP server (Node.js, runs on developer machine)
-  +-- DeviceTransport (AndroidTransport, future: IosTransport)
-  +-- Stdio transport -> Claude Code
-        +-- 16 tools: ping, network, rtm, clogs, search, ...
+@slack/radar-mcp (Node.js, runs on developer machine)
+  +-- src/shared/       DeviceTransport, AndroidTransport, SSE stream, constants
+  +-- src/mcp/          MCP stdio server (Claude Code entry point)
+  +-- src/web/          HTTP proxy server + browser dashboard
+        +-- public/     Static HTML/CSS/JS served to the browser
 ```
 
-All device-specific logic lives behind the `DeviceTransport` interface (`src/transport.ts`). The MCP server, tools, SSE streaming, and session management are fully platform-agnostic.
+All device-specific logic lives behind the `DeviceTransport` interface (`src/shared/transport.ts`). The MCP server, web dashboard, tools, SSE streaming, and session management are fully platform-agnostic.
 
-**Adding a new platform**: implement `DeviceTransport` in `src/<platform>.ts`, add a case to `createTransport()` in `src/index.ts`. No other files change.
+**Adding a new platform**: implement `DeviceTransport` in `src/shared/<platform>.ts`, add a case to `createTransport()` in `src/mcp/index.ts`. No other files change.
 
 ## Security
 
@@ -106,7 +131,7 @@ This tool captures unredacted network traffic from your debug Slack build, inclu
 * URL query parameters (tokens can appear here)
 * `Authorization` headers and cookies
 * `Set-Cookie` response headers (session tokens)
-* Request and response bodies, up to 64 KB per body, for JSON, form, text, and XML content types
+* Request and response bodies, up to 256 KB per body, for JSON, form, text, and XML content types
 * RTM WebSocket payloads (every sent and received message)
 * Analytics (clog) events serialized as JSON
 * Screenshots and short screen recordings on demand
@@ -122,8 +147,9 @@ The tool is intended for debugging the Slack Android app against your own sessio
 
 ```bash
 npm install
-npm run build        # Compile TypeScript to dist/
-npm start            # Run the server (stdio transport)
+npm run build        # Compile TypeScript + copy static assets to dist/
+npm start            # Run the MCP server (stdio transport)
+npm run start:web    # Run the web dashboard
 npm run watch        # TypeScript compiler in watch mode
 npm test             # Unit tests
 npm run test:smoke   # Smoke tests
@@ -142,7 +168,10 @@ The device-side server may have auto-shut down. Use `/radar-enable` to restart i
 Two consecutive connection failures disable the session. Use `/radar-enable` to reconnect.
 
 **Work profile devices**
-The MCP server auto-detects the Android user ID via `ps` and targets the broadcast accordingly. No manual `--user` flag needed.
+The MCP server auto-detects the Android user ID via `ps` and targets the broadcast accordingly. No manual `--user` flag needed. The web dashboard shows a profile selector when both personal and work profiles are running.
 
 **Tools not appearing after setup**
 Restart your Claude Code session. MCP servers are registered at session start.
+
+**Port already in use (web dashboard)**
+Another instance may be running. Kill it with `lsof -ti :8100 | xargs kill` or set a different port with `SLACK_RADAR_WEB_PORT=8101 slack-radar-web`.

package/dist/{index.js → mcp/index.js}

@@ -4,9 +4,9 @@ import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
 import { CallToolRequestSchema, ListToolsRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
 import fs from "fs";
 import http from "http";
-import { AndroidTransport } from "./android.js";
-import { RADAR_HOST, RADAR_PORT } from "./constants.js";
-import { connectStream, destroyStream, waitForEvents, clearLocalBuffers, isStreamConnected, localNetworkBuffer, localRtmBuffer, setTransport, } from "./stream.js";
+import { AndroidTransport } from "../shared/android.js";
+import { RADAR_HOST, RADAR_PORT } from "../shared/constants.js";
+import { connectStream, destroyStream, waitForEvents, clearLocalBuffers, isStreamConnected, localNetworkBuffer, localRtmBuffer, setTransport, } from "../shared/stream.js";
 import { TOOL_DEFINITIONS, SERVER_INSTRUCTIONS } from "./tools.js";
 // --- Platform selection ---
 function createTransport() {

package/dist/{tools.d.ts → mcp/tools.d.ts}

@@ -7,6 +7,11 @@ export interface ToolDefinition {
         properties: Record<string, unknown>;
         required?: string[];
     };
+    annotations?: {
+        readOnlyHint?: boolean;
+        destructiveHint?: boolean;
+        idempotentHint?: boolean;
+    };
 }
 export declare const TOOL_DEFINITIONS: ToolDefinition[];
 /**

package/dist/{tools.js → mcp/tools.js}

@@ -46,6 +46,7 @@ export const TOOL_DEFINITIONS = [
                 },
             },
         },
+        annotations: { readOnlyHint: true, idempotentHint: true },
     },
     {
         name: "get_recent_network_calls",
@@ -58,6 +59,7 @@ export const TOOL_DEFINITIONS = [
                 status_code: { type: "number", description: "Filter by HTTP status code" },
             },
         },
+        annotations: { readOnlyHint: true },
     },
     {
         name: "get_network_call_detail",
@@ -69,6 +71,7 @@ export const TOOL_DEFINITIONS = [
             },
             required: ["id"],
         },
+        annotations: { readOnlyHint: true },
     },
     {
         name: "get_recent_rtm_events",
@@ -82,6 +85,7 @@ export const TOOL_DEFINITIONS = [
                 channel: { type: "string", description: "Filter by channel ID" },
             },
         },
+        annotations: { readOnlyHint: true },
     },
     {
         name: "get_rtm_event_detail",
@@ -93,6 +97,7 @@ export const TOOL_DEFINITIONS = [
             },
             required: ["id"],
         },
+        annotations: { readOnlyHint: true },
     },
     {
         name: "get_recent_clogs",
@@ -104,6 +109,7 @@ export const TOOL_DEFINITIONS = [
                 name: { type: "string", description: "Filter by event name substring" },
             },
         },
+        annotations: { readOnlyHint: true },
     },
     {
         name: "get_clog_detail",
@@ -115,6 +121,7 @@ export const TOOL_DEFINITIONS = [
             },
             required: ["id"],
         },
+        annotations: { readOnlyHint: true },
     },
     {
         name: "wait_for_events",
@@ -129,6 +136,7 @@ export const TOOL_DEFINITIONS = [
                 idle_timeout_ms: { type: "number", description: "Resolve after this many ms of silence (default: 3000)" },
             },
         },
+        annotations: { readOnlyHint: true },
     },
     {
         name: "search",
@@ -141,11 +149,13 @@ export const TOOL_DEFINITIONS = [
             },
             required: ["query"],
         },
+        annotations: { readOnlyHint: true },
     },
     {
         name: "get_app_state",
         description: "Get the current app state from the device.",
         inputSchema: { type: "object", properties: {} },
+        annotations: { readOnlyHint: true },
     },
     {
         name: "get_recent_logs",
@@ -159,6 +169,7 @@ export const TOOL_DEFINITIONS = [
             },
             required: ["tag"],
         },
+        annotations: { readOnlyHint: true },
     },
     {
         name: "screenshot",
@@ -169,6 +180,7 @@ export const TOOL_DEFINITIONS = [
                 full_res: { type: "boolean", description: "Capture at full resolution (default: false)" },
             },
         },
+        annotations: { readOnlyHint: true },
     },
     {
         name: "record_screen",
@@ -179,11 +191,13 @@ export const TOOL_DEFINITIONS = [
                 duration_s: { type: "number", description: "Recording duration in seconds (default: 5, max: 30)" },
             },
         },
+        annotations: { readOnlyHint: true },
     },
     {
         name: "clear_buffers",
         description: "Clear all captured network calls and RTM events from both device and local buffers.",
         inputSchema: { type: "object", properties: {} },
+        annotations: { destructiveHint: true },
     },
     {
         name: "_radar_session_enable",
@@ -194,11 +208,13 @@ export const TOOL_DEFINITIONS = [
                 timeout_minutes: { type: "number", description: "Device-side auto-shutdown timeout in minutes (default: 5)" },
             },
         },
+        annotations: { readOnlyHint: false, idempotentHint: true },
     },
     {
         name: "_radar_session_disable",
         description: "Disable Slack Radar for this session. Tears down the SSE stream and clears local buffers. Called by /radar-disable skill.",
         inputSchema: { type: "object", properties: {} },
+        annotations: { readOnlyHint: false, idempotentHint: true },
     },
 ];
 /**

package/dist/{android.d.ts → shared/android.d.ts}

@@ -21,5 +21,10 @@ export declare class AndroidTransport implements DeviceTransport {
     recordScreen(durationS: number): string;
     getAppState(): string;
     getRecentLogs(tag: string, limit: number, grep?: string): string[];
+    listProfiles(): {
+        userId: string;
+        label: string;
+    }[];
+    activateForUser(userId: string, timeoutMinutes: number): void;
     private detectDebugBuildUser;
 }

package/dist/{android.js → shared/android.js}

@@ -112,6 +112,39 @@ export class AndroidTransport {
         });
         return output.trim().split("\n").filter(Boolean);
     }
+    listProfiles() {
+        try {
+            const ps = execSync(`adb shell "ps -A -o USER,NAME 2>/dev/null | grep Slack | grep debug"`, { timeout: 5000, encoding: "utf-8" }).trim();
+            if (!ps)
+                return [{ userId: "0", label: "Personal (user 0)" }];
+            const seen = new Set();
+            const profiles = [];
+            for (const line of ps.split("\n")) {
+                const match = line.match(/u(\d+)_/);
+                if (match && !seen.has(match[1])) {
+                    seen.add(match[1]);
+                    const id = match[1];
+                    profiles.push({
+                        userId: id,
+                        label: id === "0" ? "Personal (user 0)" : `Work profile (user ${id})`,
+                    });
+                }
+            }
+            return profiles.length > 0
+                ? profiles
+                : [{ userId: "0", label: "Personal (user 0)" }];
+        }
+        catch {
+            return [{ userId: "0", label: "Personal (user 0)" }];
+        }
+    }
+    activateForUser(userId, timeoutMinutes) {
+        const timeout = timeoutMinutes || this.currentTimeoutMinutes;
+        execSync(`adb shell am broadcast --user ${userId} -a ${ENABLE_ACTION} --ei timeout_minutes ${timeout}`, { timeout: 5000 });
+        this.detectedUserId = userId;
+        this.currentTimeoutMinutes = timeout;
+        this.radarEnabled = true;
+    }
     detectDebugBuildUser() {
         if (this.detectedUserId !== null)
             return this.detectedUserId;

package/dist/web/bin.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/web/bin.js

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+import { createServer, WEB_PORT } from "./server.js";
+import { execSync } from "child_process";
+const server = createServer();
+server.on("error", (err) => {
+    if (err.code === "EADDRINUSE") {
+        console.error(`Port ${WEB_PORT} is already in use. Another instance may be running.\n` +
+            `Kill it with: lsof -ti :${WEB_PORT} | xargs kill\n` +
+            `Or set a different port: SLACK_RADAR_WEB_PORT=8101 slack-radar-web`);
+        process.exit(1);
+    }
+    throw err;
+});
+server.listen(WEB_PORT, () => {
+    const url = `http://localhost:${WEB_PORT}`;
+    console.log(`Slack Radar Web running at ${url}`);
+    try {
+        if (process.platform === "darwin") {
+            execSync(`open ${url}`, { stdio: "ignore" });
+        }
+        else if (process.platform === "linux") {
+            execSync(`xdg-open ${url}`, { stdio: "ignore" });
+        }
+    }
+    catch {
+        // Browser open is best-effort
+    }
+});
+function shutdown() {
+    console.log("\nShutting down…");
+    server.close(() => process.exit(0));
+    setTimeout(() => process.exit(0), 2000);
+}
+process.on("SIGINT", shutdown);
+process.on("SIGTERM", shutdown);

package/dist/web/public/index.html

@@ -0,0 +1,695 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Slack Radar</title>
+  <style>
+    * { box-sizing: border-box; }
+    html, body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      overflow: hidden;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
+      font-size: 13px;
+      background: #ffffff;
+      color: #1d1c1d;
+      display: flex;
+      flex-direction: column;
+    }
+    header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 16px;
+      background: #f8f8f8;
+      border-bottom: 1px solid #e0e0e0;
+    }
+    header h1 {
+      margin: 0;
+      font-size: 15px;
+      font-weight: 600;
+      color: #1d1c1d;
+    }
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 11px;
+      color: #616061;
+      padding: 3px 10px;
+      background: #eeeeee;
+      border-radius: 10px;
+    }
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #e01e5a;
+    }
+    .status-dot.connected { background: #2bac76; }
+    .status-dot.paused { background: #de9f19; }
+    .tabs {
+      display: flex;
+      background: #f8f8f8;
+      border-bottom: 1px solid #e0e0e0;
+    }
+    .tab {
+      padding: 10px 16px;
+      cursor: pointer;
+      color: #616061;
+      border-bottom: 2px solid transparent;
+      user-select: none;
+      font-weight: 500;
+    }
+    .tab:hover { color: #1d1c1d; }
+    .tab.active {
+      color: #1d1c1d;
+      border-bottom-color: #1264a3;
+    }
+    .tab .count {
+      margin-left: 6px;
+      font-size: 11px;
+      color: #868686;
+    }
+    .toolbar {
+      display: flex;
+      gap: 8px;
+      padding: 8px 16px;
+      background: #ffffff;
+      border-bottom: 1px solid #e0e0e0;
+      align-items: center;
+    }
+    .toolbar input, .toolbar button, .toolbar select {
+      padding: 6px 10px;
+      border: 1px solid #d0d0d0;
+      border-radius: 4px;
+      background: #ffffff;
+      color: #1d1c1d;
+      font-size: 12px;
+      font-family: inherit;
+    }
+    .toolbar input { flex: 1; }
+    .toolbar input:focus { outline: none; border-color: #1264a3; }
+    .toolbar button {
+      cursor: pointer;
+      user-select: none;
+    }
+    .toolbar button:hover { background: #f0f0f0; }
+    .toolbar button.active { background: #1264a3; border-color: #1264a3; color: #fff; }
+    .main {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      overflow: hidden;
+    }
+    .list {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      background: #ffffff;
+    }
+    .row {
+      display: grid;
+      grid-template-columns: 90px 60px 1fr 120px;
+      gap: 12px;
+      padding: 6px 16px;
+      border-bottom: 1px solid #f0f0f0;
+      cursor: pointer;
+      font-family: "SF Mono", Menlo, monospace;
+      font-size: 12px;
+      align-items: center;
+    }
+    .row:hover { background: #f7f7f7; }
+    .row.selected { background: #e3f1fa; }
+    .row .time { color: #868686; }
+    .row .status { text-align: right; color: #868686; }
+    .row .status.ok { color: #2bac76; }
+    .row .status.err { color: #e01e5a; }
+    .row .status.warn { color: #de9f19; }
+    .row .main-col { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .row .method, .row .direction {
+      font-weight: 600;
+      color: #616061;
+    }
+    .row .method.POST { color: #1264a3; }
+    .row .method.GET { color: #2bac76; }
+    .row .method.PUT { color: #de9f19; }
+    .row .method.DELETE { color: #e01e5a; }
+    .row .direction.IN { color: #2bac76; }
+    .row .direction.OUT { color: #1264a3; }
+    .detail {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      background: #fafafa;
+      border-left: 1px solid #e0e0e0;
+      padding: 16px;
+      font-family: "SF Mono", Menlo, monospace;
+      font-size: 12px;
+      white-space: pre-wrap;
+      word-break: break-word;
+      color: #1d1c1d;
+    }
+    .detail .placeholder {
+      color: #868686;
+      font-family: inherit;
+      font-style: italic;
+    }
+    .detail h3 {
+      margin: 12px 0 6px 0;
+      font-family: inherit;
+      font-size: 12px;
+      font-weight: 600;
+      color: #616061;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .detail h3:first-child { margin-top: 0; }
+    .detail-actions {
+      position: sticky;
+      top: 0;
+      background: #fafafa;
+      padding: 4px 0 8px;
+      z-index: 1;
+      display: flex;
+      gap: 6px;
+    }
+    .detail-actions button {
+      font-size: 11px;
+      padding: 3px 10px;
+      cursor: pointer;
+      background: #e8e8e8;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      color: #333;
+    }
+    .detail-actions button:hover { background: #ddd; }
+    .detail-actions button.copied { background: #2bac76; color: #fff; border-color: #2bac76; }
+    .empty {
+      padding: 40px 16px;
+      text-align: center;
+      color: #868686;
+    }
+    .marker {
+      padding: 6px 16px;
+      color: #868686;
+      font-style: italic;
+      font-size: 11px;
+      text-align: center;
+      border-top: 1px dashed #d0d0d0;
+      border-bottom: 1px dashed #d0d0d0;
+      background: #fafafa;
+    }
+    .tab-panel { display: none; flex: 1; flex-direction: column; overflow: hidden; }
+    .tab-panel.active { display: flex; }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Slack Radar</h1>
+    <span class="badge"><span id="status-dot" class="status-dot"></span> <span id="status-text">connecting</span></span>
+    <span class="badge" id="uptime-badge"></span>
+    <button id="extend-btn" style="display: none; font-size: 11px; padding: 2px 8px; margin-left: 4px; cursor: pointer; background: #2bac76; color: #fff; border: none; border-radius: 10px;">Extend 5m</button>
+  </header>
+
+  <div class="tabs">
+    <div class="tab active" data-tab="network">Network <span class="count" id="network-count">0</span></div>
+    <div class="tab" data-tab="rtm">RTM <span class="count" id="rtm-count">0</span></div>
+    <div class="tab" data-tab="clog">Clogs <span class="count" id="clog-count">0</span></div>
+  </div>
+
+  <div class="toolbar">
+    <input type="text" id="filter" placeholder="Filter by URL, channel, event name, payload..." />
+    <select id="profile-select" style="display: none; margin-right: 4px; font-size: 12px; padding: 2px 4px; background: #2a2a2a; color: #ccc; border: 1px solid #444; border-radius: 3px;"></select>
+    <button id="enable-btn" style="display: none;">Enable Radar</button>
+    <button id="pause-btn">Pause</button>
+    <button id="clear-btn">Clear</button>
+  </div>
+
+  <div class="main">
+    <div class="list" id="list"></div>
+    <div class="detail" id="detail">
+      <div class="placeholder">Select a row to see the full payload.</div>
+    </div>
+  </div>
+
+  <script>
+    const state = {
+      tab: "network",
+      filter: "",
+      paused: false,
+      connected: false,
+      hadConnection: false, // true once we've ever connected successfully
+      selected: null, // { type, id }
+      buffers: {
+        network: [],
+        rtm: [],
+        clog: [],
+      },
+      MAX_BUFFER: 1000,
+    };
+
+    const listEl = document.getElementById("list");
+    const detailEl = document.getElementById("detail");
+    const filterEl = document.getElementById("filter");
+    const enableBtn = document.getElementById("enable-btn");
+    const profileSelect = document.getElementById("profile-select");
+    const pauseBtn = document.getElementById("pause-btn");
+    const clearBtn = document.getElementById("clear-btn");
+    const statusDot = document.getElementById("status-dot");
+    const statusText = document.getElementById("status-text");
+    const uptimeBadge = document.getElementById("uptime-badge");
+
+    // --- Tabs ---
+    document.querySelectorAll(".tab").forEach((el) => {
+      el.addEventListener("click", () => {
+        state.tab = el.dataset.tab;
+        document.querySelectorAll(".tab").forEach((t) => t.classList.toggle("active", t === el));
+        state.selected = null;
+        renderList();
+        renderDetail();
+      });
+    });
+
+    // --- Toolbar ---
+    filterEl.addEventListener("input", () => {
+      state.filter = filterEl.value.toLowerCase();
+      renderList();
+    });
+
+    pauseBtn.addEventListener("click", () => {
+      state.paused = !state.paused;
+      pauseBtn.textContent = state.paused ? "Resume" : "Pause";
+      pauseBtn.classList.toggle("active", state.paused);
+      statusDot.classList.toggle("paused", state.paused);
+      statusText.textContent = state.paused ? "paused" : (state.connected ? "connected" : "disconnected");
+    });
+
+    clearBtn.addEventListener("click", async () => {
+      state.buffers.network = [];
+      state.buffers.rtm = [];
+      state.buffers.clog = [];
+      state.selected = null;
+      try {
+        await fetch("/api/clear");
+      } catch (e) {
+        // Ignore — device may have shut down
+      }
+      updateCounts();
+      renderList();
+      renderDetail();
+    });
+
+    enableBtn.addEventListener("click", async () => {
+      enableBtn.disabled = true;
+      enableBtn.textContent = "Enabling…";
+      try {
+        const selectedUser = profileSelect.value;
+        const qs = selectedUser ? `?user_id=${selectedUser}` : "";
+        const res = await fetch(`/_control/activate${qs}`, { method: "POST" });
+        const data = await res.json();
+        if (!data.ok) {
+          statusText.textContent = "enable failed";
+          alert(data.error || "Failed to enable radar");
+        } else {
+          statusText.textContent = "connecting";
+        }
+      } catch (e) {
+        alert("Failed to reach server: " + e.message);
+      } finally {
+        enableBtn.disabled = false;
+        enableBtn.textContent = "Enable Radar";
+      }
+    });
+
+    async function fetchProfiles() {
+      try {
+        const res = await fetch("/_control/profiles");
+        const data = await res.json();
+        const profiles = data.profiles || [];
+        profileSelect.innerHTML = "";
+        if (profiles.length > 1) {
+          for (const p of profiles) {
+            const opt = document.createElement("option");
+            opt.value = p.userId;
+            opt.textContent = p.label;
+            profileSelect.appendChild(opt);
+          }
+          profileSelect.style.display = "";
+        } else {
+          profileSelect.style.display = "none";
+        }
+      } catch {
+        profileSelect.style.display = "none";
+      }
+    }
+
+    function setDisconnectedUi(disconnected) {
+      enableBtn.style.display = disconnected ? "" : "none";
+      if (disconnected) {
+        fetchProfiles();
+      } else {
+        profileSelect.style.display = "none";
+      }
+    }
+
+    // --- SSE ---
+    function insertReconnectMarker() {
+      const marker = {
+        __marker: true,
+        timestamp: Date.now(),
+        label: `reconnected @ ${new Date().toLocaleTimeString("en-US", { hour12: false })}`,
+      };
+      for (const type of ["network", "rtm", "clog"]) {
+        const buf = state.buffers[type];
+        if (buf.length > 0) buf.push({ ...marker }); // avoid empty-list markers
+      }
+    }
+
+    function connectStream() {
+      const es = new EventSource("/api/stream");
+      es.onopen = () => {
+        const wasDisconnected = !state.connected && state.hadConnection;
+        state.connected = true;
+        state.hadConnection = true;
+        if (wasDisconnected) insertReconnectMarker();
+        statusDot.classList.add("connected");
+        statusText.textContent = state.paused ? "paused" : "connected";
+        setDisconnectedUi(false);
+        renderList();
+      };
+      es.onmessage = (ev) => {
+        if (state.paused) return;
+        try {
+          const parsed = JSON.parse(ev.data);
+          ingest(parsed.type, parsed.event);
+        } catch (e) {
+          // Skip malformed
+        }
+      };
+      es.onerror = () => {
+        state.connected = false;
+        statusDot.classList.remove("connected");
+        statusText.textContent = "disconnected";
+        setDisconnectedUi(true);
+        renderList();
+        es.close();
+        setTimeout(connectStream, 2000);
+      };
+    }
+
+    function ingest(type, event) {
+      const buf = state.buffers[type];
+      if (!buf) return;
+      buf.push(event);
+      if (buf.length > state.MAX_BUFFER) buf.shift();
+      updateCounts();
+      if (state.tab === type) renderList();
+    }
+
+    function updateCounts() {
+      document.getElementById("network-count").textContent = state.buffers.network.length;
+      document.getElementById("rtm-count").textContent = state.buffers.rtm.length;
+      document.getElementById("clog-count").textContent = state.buffers.clog.length;
+    }
+
+    // --- Rendering ---
+    function filterRows(rows) {
+      if (!state.filter) return rows;
+      return rows.filter((r) => {
+        if (r.__marker) return true; // always keep markers so history stays anchored
+        return JSON.stringify(r).toLowerCase().includes(state.filter);
+      });
+    }
+
+    function renderList() {
+      const rows = filterRows(state.buffers[state.tab]);
+      // Count real (non-marker) rows when deciding empty-state
+      const nonMarkerCount = rows.filter((r) => !r.__marker).length;
+      if (nonMarkerCount === 0) {
+        let msg;
+        if (state.filter) {
+          msg = "No matches. Clear the filter or try a different query.";
+        } else if (!state.connected) {
+          msg = "Radar is not connected. Click Enable Radar in the toolbar to activate.";
+        } else {
+          msg = `No ${state.tab} events yet. Interact with the app to capture events.`;
+        }
+        listEl.innerHTML = `<div class="empty">${msg}</div>`;
+        return;
+      }
+      // Newest first
+      const html = rows.slice().reverse().map((row) => {
+        if (row.__marker) return `<div class="marker">─── ${row.label} ───</div>`;
+        return renderRow(state.tab, row);
+      }).join("");
+      listEl.innerHTML = html;
+      listEl.querySelectorAll(".row").forEach((el) => {
+        el.addEventListener("click", () => {
+          const id = Number(el.dataset.id);
+          state.selected = { type: state.tab, id };
+          listEl.querySelectorAll(".row").forEach((r) => r.classList.toggle("selected", r === el));
+          renderDetail();
+        });
+      });
+    }
+
+    function renderRow(type, row) {
+      const time = new Date(row.timestamp).toLocaleTimeString("en-US", { hour12: false });
+      const selected = state.selected && state.selected.type === type && state.selected.id === row.id ? "selected" : "";
+      if (type === "network") {
+        const statusClass = row.status_code >= 500 ? "err" : row.status_code >= 400 ? "warn" : "ok";
+        return `
+          <div class="row ${selected}" data-id="${row.id}">
+            <span class="time">${time}</span>
+            <span class="method ${row.method}">${row.method}</span>
+            <span class="main-col">${escapeHtml(row.url)}</span>
+            <span class="status ${statusClass}">${row.status_code} · ${row.duration_ms}ms</span>
+          </div>`;
+      }
+      if (type === "rtm") {
+        return `
+          <div class="row ${selected}" data-id="${row.id}">
+            <span class="time">${time}</span>
+            <span class="direction ${row.direction === "INCOMING" ? "IN" : "OUT"}">${row.direction === "INCOMING" ? "←" : "→"}</span>
+            <span class="main-col">${escapeHtml(row.event_type ?? "(no type)")}${row.channel ? " · " + escapeHtml(row.channel) : ""}</span>
+            <span class="status"></span>
+          </div>`;
+      }
+      // clog
+      return `
+        <div class="row ${selected}" data-id="${row.id}">
+          <span class="time">${time}</span>
+          <span></span>
+          <span class="main-col">${escapeHtml(row.event_name ?? "(unknown)")}</span>
+          <span class="status"></span>
+        </div>`;
+    }
+
+    let lastDetailData = null;
+
+    async function renderDetail() {
+      if (!state.selected) {
+        lastDetailData = null;
+        detailEl.innerHTML = '<div class="placeholder">Select a row to see the full payload.</div>';
+        return;
+      }
+      const { type, id } = state.selected;
+      detailEl.innerHTML = '<div class="placeholder">Loading…</div>';
+      try {
+        const endpoint = type === "network" ? "/api/network/" : type === "rtm" ? "/api/rtm/" : "/api/clogs/";
+        const res = await fetch(endpoint + id);
+        const data = await res.json();
+        lastDetailData = data;
+        detailEl.innerHTML = detailActions() + formatDetail(type, data);
+        wireDetailActions();
+      } catch (e) {
+        lastDetailData = null;
+        detailEl.innerHTML = '<div class="placeholder">Failed to load detail: ' + escapeHtml(e.message) + '</div>';
+      }
+    }
+
+    function detailActions() {
+      const isNetwork = state.selected && state.selected.type === "network";
+      return `<div class="detail-actions">
+        <button id="copy-json-btn">Copy JSON</button>
+        <button id="copy-body-btn">Copy Body</button>
+        ${isNetwork ? '<button id="copy-curl-btn">Copy cURL</button>' : ''}
+      </div>`;
+    }
+
+    function wireDetailActions() {
+      const copyJsonBtn = document.getElementById("copy-json-btn");
+      const copyBodyBtn = document.getElementById("copy-body-btn");
+      if (copyJsonBtn) {
+        copyJsonBtn.addEventListener("click", () => {
+          if (!lastDetailData) return;
+          navigator.clipboard.writeText(JSON.stringify(lastDetailData, null, 2));
+          copyJsonBtn.textContent = "Copied!";
+          copyJsonBtn.classList.add("copied");
+          setTimeout(() => { copyJsonBtn.textContent = "Copy JSON"; copyJsonBtn.classList.remove("copied"); }, 1500);
+        });
+      }
+      if (copyBodyBtn) {
+        copyBodyBtn.addEventListener("click", () => {
+          if (!lastDetailData) return;
+          const body = lastDetailData.response_body ?? lastDetailData.data ?? lastDetailData.request_body ?? "";
+          const text = tryPretty(body);
+          navigator.clipboard.writeText(text);
+          copyBodyBtn.textContent = "Copied!";
+          copyBodyBtn.classList.add("copied");
+          setTimeout(() => { copyBodyBtn.textContent = "Copy Body"; copyBodyBtn.classList.remove("copied"); }, 1500);
+        });
+      }
+      const copyCurlBtn = document.getElementById("copy-curl-btn");
+      if (copyCurlBtn) {
+        copyCurlBtn.addEventListener("click", () => {
+          if (!lastDetailData) return;
+          navigator.clipboard.writeText(buildCurl(lastDetailData));
+          copyCurlBtn.textContent = "Copied!";
+          copyCurlBtn.classList.add("copied");
+          setTimeout(() => { copyCurlBtn.textContent = "Copy cURL"; copyCurlBtn.classList.remove("copied"); }, 1500);
+        });
+      }
+    }
+
+    function shellEscape(s) {
+      if (!s) return "''";
+      return "'" + s.replace(/'/g, "'\\''") + "'";
+    }
+
+    function buildCurl(d) {
+      const parts = [`curl -X ${d.method} ${shellEscape(d.url)}`];
+      const headers = d.request_headers ?? {};
+      let hasAuth = false;
+      for (const [k, v] of Object.entries(headers)) {
+        const lower = k.toLowerCase();
+        if (lower === "accept-encoding" || lower === "host" || lower === "content-length") continue;
+        if (lower === "authorization" || lower === "cookie") hasAuth = true;
+        parts.push(`  -H ${shellEscape(k + ": " + v)}`);
+      }
+      if (d.request_body) {
+        parts.push(`  --data-raw ${shellEscape(d.request_body)}`);
+      }
+      let cmd = parts.join(" \\\n");
+      if (!hasAuth) {
+        cmd += "\n# Note: auth cookies are injected by OkHttp after the app interceptor and are not captured. Add -b 'cookie=...' manually to replay.";
+      }
+      return cmd;
+    }
+
+    function formatDetail(type, data) {
+      if (type === "network") {
+        return `
+          <h3>Request</h3>
+${escapeHtml(data.method)} ${escapeHtml(data.url)}
+
+<h3>Request Headers</h3>
+${escapeHtml(JSON.stringify(data.request_headers ?? {}, null, 2))}
+
+<h3>Request Body</h3>
+${escapeHtml(data.request_body ?? "(none)")}
+
+<h3>Response · ${data.status_code} · ${data.duration_ms}ms</h3>
+
+<h3>Response Headers</h3>
+${escapeHtml(JSON.stringify(data.response_headers ?? {}, null, 2))}
+
+<h3>Response Body</h3>
+${escapeHtml(tryPretty(data.response_body))}
+`;
+      }
+      if (type === "rtm") {
+        return `
+          <h3>${escapeHtml(data.direction)} · ${escapeHtml(data.event_type ?? "(no type)")}</h3>
+Channel: ${escapeHtml(data.channel ?? "(none)")}
+Timestamp: ${new Date(data.timestamp).toISOString()}
+Base64: ${data.is_base64}
+
+<h3>Payload</h3>
+${escapeHtml(tryPretty(data.data))}
+`;
+      }
+      // clog
+      return `
+        <h3>${escapeHtml(data.event_name)}</h3>
+Timestamp: ${new Date(data.timestamp).toISOString()}
+
+<h3>Payload</h3>
+${escapeHtml(tryPretty(data.data))}
+`;
+    }
+
+    function tryPretty(s) {
+      if (!s) return "(empty)";
+      try {
+        return JSON.stringify(JSON.parse(s), null, 2);
+      } catch {
+        return s;
+      }
+    }
+
+    function escapeHtml(s) {
+      return String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+    }
+
+    // --- Uptime ping ---
+    const extendBtn = document.getElementById("extend-btn");
+
+    function formatUptime(ms) {
+      const totalSec = Math.floor(ms / 1000);
+      const h = Math.floor(totalSec / 3600);
+      const m = Math.floor((totalSec % 3600) / 60);
+      const s = totalSec % 60;
+      if (h > 0) return `up ${h}h ${m}m`;
+      if (m > 0) return `up ${m}m ${s}s`;
+      return `up ${s}s`;
+    }
+
+    async function extendSession() {
+      try {
+        await fetch("/api/ping?timeout_minutes=5");
+      } catch {}
+    }
+
+    extendBtn.addEventListener("click", async () => {
+      extendBtn.disabled = true;
+      extendBtn.textContent = "Extending…";
+      await extendSession();
+      await pollPing();
+      extendBtn.disabled = false;
+      extendBtn.textContent = "Extend 5m";
+    });
+
+    async function pollPing() {
+      try {
+        const res = await fetch("/api/ping");
+        const data = await res.json();
+        if (data.uptime_ms != null) {
+          const remaining = data.remaining_minutes ?? 0;
+          const timerLabel = remaining >= 4 ? "active" : `${remaining}m left`;
+          uptimeBadge.textContent = `${formatUptime(data.uptime_ms)} · ${timerLabel}`;
+          extendBtn.style.display = state.connected ? "" : "none";
+          extendBtn.style.background = remaining < 4 ? "#de9f19" : "#2bac76";
+          if (remaining <= 1 && state.connected) {
+            await extendSession();
+          }
+        }
+      } catch {
+        uptimeBadge.textContent = "";
+        extendBtn.style.display = "none";
+      }
+    }
+    pollPing();
+    setInterval(pollPing, 5000);
+
+    // --- Go ---
+    connectStream();
+    updateCounts();
+    renderList();
+  </script>
+</body>
+</html>

package/dist/web/server.d.ts

@@ -0,0 +1,4 @@
+import http from "http";
+declare const WEB_PORT: number;
+export declare function createServer(): http.Server;
+export { WEB_PORT };

package/dist/web/server.js

@@ -0,0 +1,106 @@
+import http from "http";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import { AndroidTransport } from "../shared/android.js";
+import { RADAR_HOST, RADAR_PORT } from "../shared/constants.js";
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const WEB_PORT = Number(process.env.SLACK_RADAR_WEB_PORT ?? 8100);
+const INDEX_PATH = path.join(__dirname, "public", "index.html");
+const transport = new AndroidTransport();
+export function createServer() {
+    const server = http.createServer((req, res) => {
+        if (req.url === "/" || req.url === "/index.html") {
+            try {
+                const html = fs.readFileSync(INDEX_PATH);
+                res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+                res.end(html);
+            }
+            catch (e) {
+                res.writeHead(500, { "Content-Type": "text/plain; charset=utf-8" });
+                res.end(`Failed to read ${INDEX_PATH}: ${e.message}`);
+            }
+            return;
+        }
+        if (req.url === "/_control/profiles" && req.method === "GET") {
+            listProfiles(res);
+            return;
+        }
+        if (req.url?.startsWith("/_control/activate") && req.method === "POST") {
+            const url = new URL(req.url, `http://localhost:${WEB_PORT}`);
+            const userId = url.searchParams.get("user_id") ?? undefined;
+            activateRadar(res, userId);
+            return;
+        }
+        if (req.url?.startsWith("/api/")) {
+            proxyToRadar(req, res);
+            return;
+        }
+        res.writeHead(404);
+        res.end("Not found");
+    });
+    return server;
+}
+function listProfiles(res) {
+    const profiles = transport.listProfiles();
+    res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
+    res.end(JSON.stringify({ profiles }));
+}
+function activateRadar(res, userId) {
+    const forwarded = transport.ensureForward();
+    if (!forwarded) {
+        res.writeHead(502, { "Content-Type": "application/json; charset=utf-8" });
+        res.end(JSON.stringify({
+            ok: false,
+            error: "ADB forward failed. Is a device connected?",
+        }));
+        return;
+    }
+    try {
+        if (userId) {
+            transport.activateForUser(userId, 5);
+        }
+        else {
+            transport.activate(5);
+        }
+    }
+    catch (e) {
+        res.writeHead(502, { "Content-Type": "application/json; charset=utf-8" });
+        res.end(JSON.stringify({
+            ok: false,
+            error: `Broadcast failed: ${e.message}. Debug build not running?`,
+        }));
+        return;
+    }
+    res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
+    res.end(JSON.stringify({ ok: true, user_id: userId ?? "auto" }));
+}
+function proxyToRadar(req, res) {
+    const upstream = http.request({
+        host: RADAR_HOST,
+        port: RADAR_PORT,
+        path: req.url,
+        method: req.method,
+        headers: req.headers,
+        timeout: 0,
+    }, (upstreamRes) => {
+        res.writeHead(upstreamRes.statusCode ?? 502, upstreamRes.headers);
+        upstreamRes.on("data", (chunk) => res.write(chunk));
+        upstreamRes.on("end", () => res.end());
+        upstreamRes.on("error", () => res.end());
+    });
+    upstream.on("error", (err) => {
+        res.writeHead(502, { "Content-Type": "application/json; charset=utf-8" });
+        res.end(JSON.stringify({
+            error: `Cannot reach radar at ${RADAR_HOST}:${RADAR_PORT}. Is ADB forwarding active? ${err.message}`,
+        }));
+    });
+    req.on("close", () => upstream.destroy());
+    if (req.method !== "GET" && req.method !== "HEAD") {
+        req.pipe(upstream);
+    }
+    else {
+        upstream.end();
+    }
+}
+export { WEB_PORT };

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@slack/radar-mcp",
-  "version": "1.0.0",
-  "description": "MCP server for on-device debugging of the Slack Android app via ADB",
+  "version": "1.1.0",
+  "description": "MCP server and web dashboard for on-device debugging of the Slack Android app via ADB",
   "type": "module",
-  "main": "dist/index.js",
+  "main": "dist/mcp/index.js",
   "bin": {
-    "slack-radar-mcp": "dist/index.js"
+    "slack-radar-mcp": "dist/mcp/index.js",
+    "slack-radar-web": "dist/web/bin.js"
   },
   "files": [
     "dist"
@@ -13,8 +14,9 @@
   "scripts": {
     "clean": "rm -rf dist",
     "prebuild": "npm run clean",
-    "build": "tsc && chmod +x dist/index.js",
-    "start": "node dist/index.js",
+    "build": "tsc && cp -r src/web/public dist/web/public && 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",
     "test": "npm run build && node --test tests/*.test.mjs",
     "test:smoke": "npm run build && bash tests/smoke.sh",