feat: add MCP redaction filtering for sensitive data

Add a secure-by-default redaction system that filters sensitive data
from all MCP resource and tool responses. Uses a two-key model where
default rules apply automatically and disabling requires agreement
from both the client app and the Reactotron desktop app.

Redaction engine:
- Key matching: redacts object keys matching sensitiveKeys (case-insensitive)
- Header matching: redacts HTTP headers matching headerNames
- Value patterns: regex-based detection of Bearer tokens, JWTs, API keys
- State path patterns: dot-separated paths with wildcard support
- URL query params: redacts query param values matching sensitiveKeys
- Handles circular references, nested objects, and arrays

Client apps can send additionalRules (always allowed) or removeRules/
disableRedaction (requires server permission via settings modal).

Desktop app: settings modal for editing rules and client permissions,
redaction status indicator (shield icon) in footer, config persisted
via electron-store.

44 tests (30 unit + 14 integration). Docs updated.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: silasjmatson

apps/reactotron-app/src/renderer/RootModals.tsx

@@ -5,6 +5,8 @@ import {
   ReactotronContext,
   StateContext,
 } from "reactotron-core-ui"
+import StandaloneContext from "./contexts/Standalone"
+import McpSettingsModal from "./components/McpSettingsModal"
 
 function RootModals() {
   const {
@@ -19,6 +21,8 @@ function RootModals() {
     closeSubscriptionModal,
   } = useContext(ReactotronContext)
   const { addSubscription } = useContext(StateContext)
+  const { mcpSettingsOpen, closeMcpSettings, mcpRedactionConfig, updateMcpRedactionConfig } =
+    useContext(StandaloneContext)
 
   const dispatchAction = (action: any) => {
     sendCommand("state.action.dispatch", { action })
@@ -46,6 +50,12 @@ function RootModals() {
           addSubscription(path)
         }}
       />
+      <McpSettingsModal
+        isOpen={mcpSettingsOpen}
+        onClose={closeMcpSettings}
+        config={mcpRedactionConfig}
+        onUpdate={updateMcpRedactionConfig}
+      />
     </>
   )
 }

apps/reactotron-app/src/renderer/components/Footer/Footer.story.tsx

@@ -66,6 +66,8 @@ storiesOf("components/Footer", module)
       mcpStatus="stopped"
       mcpPort={null}
       onToggleMcp={() => {}}
+      mcpRedactionEnabled
+      onOpenMcpSettings={() => {}}
     />
   ))
   .add("Collpased w/ connections", () => (
@@ -79,6 +81,8 @@ storiesOf("components/Footer", module)
       mcpStatus="stopped"
       mcpPort={null}
       onToggleMcp={() => {}}
+      mcpRedactionEnabled
+      onOpenMcpSettings={() => {}}
     />
   ))
   .add("Expanded", () => (
@@ -92,6 +96,8 @@ storiesOf("components/Footer", module)
       mcpStatus="stopped"
       mcpPort={null}
       onToggleMcp={() => {}}
+      mcpRedactionEnabled
+      onOpenMcpSettings={() => {}}
     />
   ))
   .add("Expanded w/ connections", () => (
@@ -105,6 +111,8 @@ storiesOf("components/Footer", module)
       mcpStatus="started"
       mcpPort={4567}
       onToggleMcp={() => {}}
+      mcpRedactionEnabled
+      onOpenMcpSettings={() => {}}
     />
   ))
   .add("Expanded w/ lots connections", () => (
@@ -118,5 +126,7 @@ storiesOf("components/Footer", module)
       mcpStatus="started"
       mcpPort={4567}
       onToggleMcp={() => {}}
+      mcpRedactionEnabled
+      onOpenMcpSettings={() => {}}
     />
   ))

apps/reactotron-app/src/renderer/components/Footer/Stateless.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "styled-components"
-import { MdSwapVert as ExpandIcon } from "react-icons/md"
+import { MdSwapVert as ExpandIcon, MdSettings as SettingsIcon, MdShield as ShieldIcon } from "react-icons/md"
 
 import config from "../../config"
 import {
@@ -54,6 +54,12 @@ interface McpButtonProps {
   $active: boolean
 }
 
+const McpGroup = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+`
+
 const McpButton = styled.div.attrs(() => ({}))<McpButtonProps>`
   display: flex;
   align-items: center;
@@ -78,6 +84,25 @@ const McpDot = styled.div<McpButtonProps>`
   background-color: ${(props) => props.$active ? "#50c878" : props.theme.foregroundDark};
 `
 
+const McpSettingsButton = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 3px;
+  color: ${(props) => props.theme.foregroundDark};
+  &:hover {
+    color: ${(props) => props.theme.foreground};
+    background-color: rgba(255,255,255,0.05);
+  }
+`
+
+const RedactionBadge = styled.span<{ $warning?: boolean }>`
+  display: flex;
+  align-items: center;
+  color: ${(props) => props.$warning ? "#e8a838" : "inherit"};
+`
+
 function renderExpanded(
   serverStatus: ServerStatus,
   connections: Connection[],
@@ -137,6 +162,8 @@ interface Props {
   mcpStatus: McpStatus
   mcpPort: number | null
   onToggleMcp: () => void
+  mcpRedactionEnabled: boolean
+  onOpenMcpSettings: () => void
 }
 
 function Header({
@@ -149,21 +176,38 @@ function Header({
   mcpStatus,
   mcpPort,
   onToggleMcp,
+  mcpRedactionEnabled,
+  onOpenMcpSettings,
 }: Props) {
   const renderMethod = isOpen ? renderExpanded : renderCollapsed
 
   return (
     <Container>
       <ContentContainer onClick={() => !isOpen && setIsOpen(true)} $isOpen={isOpen}>
         {renderMethod(serverStatus, connections, selectedConnection, onChangeConnection)}
-        <McpButton
-          $active={mcpStatus === "started"}
-          onClick={(e) => { e.stopPropagation(); onToggleMcp() }}
-          title={mcpStatus === "started" ? `MCP running on port ${mcpPort}` : "Start MCP server"}
-        >
-          <McpDot $active={mcpStatus === "started"} />
-          {mcpStatus === "started" ? `MCP :${mcpPort}` : "MCP"}
-        </McpButton>
+        <McpGroup>
+          <McpButton
+            $active={mcpStatus === "started"}
+            onClick={(e) => { e.stopPropagation(); onToggleMcp() }}
+            title={mcpStatus === "started" ? `MCP running on port ${mcpPort}` : "Start MCP server"}
+          >
+            <McpDot $active={mcpStatus === "started"} />
+            {mcpStatus === "started" ? `MCP :${mcpPort}` : "MCP"}
+            {mcpStatus === "started" && (
+              mcpRedactionEnabled
+                ? <RedactionBadge title="Sensitive data is redacted"><ShieldIcon size={10} /></RedactionBadge>
+                : <RedactionBadge $warning title="Redaction disabled — sensitive data exposed"><ShieldIcon size={10} /></RedactionBadge>
+            )}
+          </McpButton>
+          {mcpStatus === "started" && (
+            <McpSettingsButton
+              onClick={(e) => { e.stopPropagation(); onOpenMcpSettings() }}
+              title="MCP redaction settings"
+            >
+              <SettingsIcon size={14} />
+            </McpSettingsButton>
+          )}
+        </McpGroup>
         <ExpandContainer onClick={() => setIsOpen(!isOpen)}>
           <ExpandIcon size={18} />
         </ExpandContainer>

apps/reactotron-app/src/renderer/components/Footer/index.tsx

@@ -5,8 +5,10 @@ import StandaloneContext from "../../contexts/Standalone"
 import Footer from "./Stateless"
 
 export default function ConnectedFooter() {
-  const { serverStatus, connections, selectedConnection, selectConnection, mcpStatus, mcpPort, toggleMcp } =
-    useContext(StandaloneContext)
+  const {
+    serverStatus, connections, selectedConnection, selectConnection,
+    mcpStatus, mcpPort, toggleMcp, mcpRedactionEnabled, openMcpSettings,
+  } = useContext(StandaloneContext)
   const [isOpen, setIsOpen] = useState(false)
 
   return (
@@ -20,6 +22,8 @@ export default function ConnectedFooter() {
       mcpStatus={mcpStatus}
       mcpPort={mcpPort}
       onToggleMcp={toggleMcp}
+      mcpRedactionEnabled={mcpRedactionEnabled}
+      onOpenMcpSettings={openMcpSettings}
     />
   )
 }