Skip to content

feat(client): add JSON-RPC log export functionality #1462

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Jony-Jas wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat(client): add JSON-RPC log export functionality #1462

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
251b193
feat(client): add JSON-RPC log export functionality
Jony-Jas Feb 14, 2026
79bce95
Merge branch 'main' into feature/logs-export
Jony-Jas Feb 14, 2026
dcf21d8
fix(client): fix unclosed div after merge conflict
Jony-Jas Feb 14, 2026
37a906a
feat(client): add JSON-RPC log export functionality
Jony-Jas Feb 14, 2026
01fc037
feat(client): add JSON-RPC log export functionality
Jony-Jas Feb 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 42 additions & 3 deletions mcpjam-inspector/client/src/components/logger-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
Trash2,
PanelRightClose,
Copy,
Download,
} from "lucide-react";
import { JsonEditor } from "@/components/ui/json-editor";
import { Input } from "@/components/ui/input";
Expand Down Expand Up @@ -45,6 +46,7 @@ import { cn } from "@/lib/utils";

type RpcDirection = "in" | "out" | string;
type TrafficSource = "mcp-server" | "mcp-apps";
type LogEntrySnapshot = Omit<RenderableRpcItem, 'id'>;

interface RpcEventMessage {
serverId: string;
Expand Down Expand Up @@ -206,16 +208,43 @@ export function LoggerView({
setExpanded(new Set());
};

const copyLogs = async () => {
const logs = filteredItems.map((item) => ({
const extractLogs = (): Array<LogEntrySnapshot> => {
return filteredItems.map((item) => ({
timestamp: item.timestamp,
source: item.source,
serverId: item.serverId,
direction: item.direction,
method: item.method,
payload: item.payload,
...(item.protocol && { protocol: item.protocol }),
...(item.widgetId && { widgetId: item.widgetId }),
}));
};

const exportLogs = () => {
try {
const logs = extractLogs();

const blob = new Blob([JSON.stringify(logs, null, 2)], {
type: "application/json",
});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `mcp-logs-${new Date().toISOString()}.json`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
toast.success("Logs exported");
} catch {
toast.error("Failed to export logs");
}
};

const copyLogs = async () => {
try {
const logs = extractLogs();
await navigator.clipboard.writeText(JSON.stringify(logs, null, 2));
toast.success("Logs copied to clipboard");
} catch {
Expand Down Expand Up @@ -415,6 +444,16 @@ export function LoggerView({
{/* Push action buttons to the right when search is hidden */}
{!isSearchVisible && <div className="flex-1" />}

<Button
variant="ghost"
size="icon"
onClick={exportLogs}
disabled={filteredItemCount === 0}
className="h-7 w-7"
title="Export logs"
>
<Download className="h-3.5 w-3.5" />
</Button>
Comment on lines +447 to +456
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Export button is missing flex-shrink-0 — inconsistent with its siblings.

All adjacent buttons (Copy, Clear, Close) carry flex-shrink-0; the Export button does not, so it could compress under a narrow toolbar while they stay fixed.

🛠️ One-liner fix 
  <Button
   variant="ghost"
   size="icon"
   onClick={exportLogs}
   disabled={filteredItemCount === 0}
-  className="h-7 w-7"
+  className="h-7 w-7 flex-shrink-0"
   title="Export logs"
 >
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@mcpjam-inspector/client/src/components/logger-view.tsx` around lines 447 -
456, The Export Button (the Button rendering the Download icon and calling
exportLogs) is missing the flex-shrink-0 utility class causing inconsistent
shrinking behavior with sibling buttons; update that Button's className (the
Button with onClick={exportLogs} and title="Export logs") to include
"flex-shrink-0" alongside "h-7 w-7" so it matches Copy/Clear/Close buttons and
will not compress in narrow toolbars.

<Button
variant="ghost"
size="icon"
Expand Down Expand Up @@ -544,4 +583,4 @@ export function LoggerView({
);
}

export default LoggerView;
export default LoggerView;
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# Search for all imports of LoggerView to determine usage pattern
rg "import\s+(\{.*\s+)?LoggerView" --type ts --type tsx -B 1 -A 1

Repository: MCPJam/inspector

Length of output: 87

🏁 Script executed:

# Also search for default imports without destructuring
rg "import\s+LoggerView\s+from" --type ts --type tsx -B 1 -A 1

Repository: MCPJam/inspector

Length of output: 87

🏁 Script executed:

# Search for LoggerView imports using glob patterns
rg "import.*LoggerView" -g "*.ts" -g "*.tsx" -B 1 -A 1

Repository: MCPJam/inspector

Length of output: 2116

🏁 Script executed:

# Specifically search for default imports (import LoggerView from)
rg "import\s+LoggerView\s+from" -g "*.ts" -g "*.tsx" -B 1 -A 1

Repository: MCPJam/inspector

Length of output: 42

🏁 Script executed:

# List the logger-view file to understand its exports
cat -n mcpjam-inspector/client/src/components/logger-view.tsx | grep -E "export|LoggerView" | head -20

Repository: MCPJam/inspector

Length of output: 368

Remove the unused default export.

LoggerView is exported as a named export (line 128), and all seven import sites across the codebase use the named import pattern (import { LoggerView } from "..."). The default export at line 586 is never used and should be removed.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@mcpjam-inspector/client/src/components/logger-view.tsx` at line 586, Remove
the unused default export by deleting the "export default LoggerView;" statement
so the component is only exported as the existing named export (LoggerView);
verify there are no references to a default import elsewhere and keep the named
export declaration (LoggerView) intact.