Skip to content

Add request/response history tracking #14

@kashifpk

Description

@kashifpk

Summary

Implement full request/response history tracking in the Web UI to help debug MCP interactions.

Background

Currently Anvil only shows the last request/response in the debug panel. The official MCP Inspector maintains a full history of all interactions, which is invaluable for debugging.

Proposed Implementation

Web UI Features

  • History Panel: Dedicated tab or sidebar showing all requests
  • Entry Details: Each entry shows:
    • Timestamp
    • Method name (e.g., tools/call, resources/list)
    • Status (success/error)
    • Duration (ms)
  • Detail View: Click entry to see full request/response JSON
  • Filtering: Filter by method type, status, or search text
  • Clear History: Button to clear all history
  • Export: Option to export history as JSON for bug reports

Data Structure

historyEntry = {
  id: number,
  timestamp: Date,
  method: string,
  params: object,
  response: object,
  duration: number,  // milliseconds
  status: 'success' | 'error',
  error: string | null
}

UI Layout Options

  1. Dedicated Tab: Add "History" tab alongside Tools/Resources/Prompts
  2. Sidebar: Collapsible sidebar on the right showing recent requests
  3. Enhanced Debug Panel: Expand current debug panel into scrollable history

Recommend Option 1 (Dedicated Tab) for best UX.

Storage

  • Store in Vue reactive array (in-memory)
  • Optional: Persist to sessionStorage for page refresh survival
  • Limit to last N entries (e.g., 100) to prevent memory issues

Acceptance Criteria

  • All MCP requests logged to history
  • History viewable in dedicated UI section
  • Click to view full request/response details
  • Filter/search functionality
  • Clear history button
  • Export to JSON option
  • Memory-efficient (limit stored entries)

Mockup

┌─────────────────────────────────────────────────────────────┐
│ History                                         [Clear All] │
├─────────────────────────────────────────────────────────────┤
│ 🟢 14:32:05  tools/call (get_weather)              45ms    │
│ 🟢 14:32:01  tools/list                            12ms    │
│ 🟢 14:31:58  resources/list                         8ms    │
│ 🔴 14:31:55  tools/call (invalid_tool)            102ms    │
│ 🟢 14:31:50  initialize                            23ms    │
└─────────────────────────────────────────────────────────────┘

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions