openclaw-tool-call-viewer-2026

OpenClaw Tool Call Viewer 2026 Skill

Skill by ara.so — Hermes Skills collection.

Overview

OpenClaw Tool Call Viewer is a compact, zero-dependency web interface for browsing and filtering OpenClaw session tool call history. It provides a browser-based UI for inspecting session activity, tracking tool usage patterns, and filtering through dense logs during development and debugging sessions.

The viewer is designed for local network deployment with no runtime dependencies, making it ideal for internal developer workflows and session review tasks.

Installation

Clone and Deploy

# Clone the repository
git clone https://github.com/reedchris43/openclaw-tool-call-viewer-2026.git
cd openclaw-tool-call-viewer-2026

Serve locally (using Python)

python3 -m http.server 8080

Or using Node.js

npx http-server -p 8080

Or using PHP

php -S localhost:8080

### Nginx Configuration Example

```nginx
server {
    listen 8080;
    server_name localhost;
    
    root /path/to/openclaw-tool-call-viewer-2026;
    index index.html;
    
    location / {
        try_files $uri $uri/ =404;
    }
    
    # Optional CORS headers for local network access
    add_header Access-Control-Allow-Origin *;
}

Apache Configuration Example

<VirtualHost *:8080>
    DocumentRoot "/path/to/openclaw-tool-call-viewer-2026"
    
    <Directory "/path/to/openclaw-tool-call-viewer-2026">
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
    </Directory>
    
    # Optional CORS headers
    Header set Access-Control-Allow-Origin "*"
</VirtualHost>

Project Structure

openclaw-tool-call-viewer-2026/
├── index.html          # Main viewer interface
├── styles.css          # UI styling (if separate)
├── script.js           # Filtering and display logic (if separate)
├── README.md           # Project documentation
└── LICENSE             # GPL-3.0 license

Data Format

The viewer expects OpenClaw session data in JSON format. Here's the typical structure:

{
  "session_id": "session-2026-07-11-001",
  "timestamp": "2026-07-11T00:53:25Z",
  "tool_calls": [
    {
      "id": "call_001",
      "timestamp": "2026-07-11T00:53:30Z",
      "tool_name": "code_interpreter",
      "parameters": {
        "language": "python",
        "code": "print('Hello, OpenClaw!')"
      },
      "result": {
        "status": "success",
        "output": "Hello, OpenClaw!"
      }
    },
    {
      "id": "call_002",
      "timestamp": "2026-07-11T00:54:15Z",
      "tool_name": "file_reader",
      "parameters": {
        "path": "/workspace/config.json"
      },
      "result": {
        "status": "success",
        "content": "..."
      }
    }
  ]
}

Loading Session Data

Inline Data Loading

<!DOCTYPE html>
<html>
<head>
    <title>OpenClaw Tool Call Viewer</title>
</head>
<body>
    <div id="viewer"></div>
    
    <script>
        // Load session data
        const sessionData = {
            session_id: "session-001",
            tool_calls: [
                {
                    id: "call_001",
                    timestamp: "2026-07-11T00:53:30Z",
                    tool_name: "code_interpreter",
                    parameters: { language: "python" },
                    result: { status: "success" }
                }
            ]
        };
        
        // Initialize viewer
        function initViewer(data) {
            const viewer = document.getElementById('viewer');
            data.tool_calls.forEach(call => {
                const div = document.createElement('div');
                div.className = 'tool-call';
                div.innerHTML = `
                    <h3>${call.tool_name}</h3>
                    <p>ID: ${call.id}</p>
                    <p>Time: ${call.timestamp}</p>
                    <p>Status: ${call.result.status}</p>
                `;
                viewer.appendChild(div);
            });
        }
        
        initViewer(sessionData);
    </script>
</body>
</html>

Fetch External Session Data

// Fetch session data from API or file
async function loadSession(sessionPath) {
    try {
        const response = await fetch(sessionPath);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Failed to load session:', error);
        return null;
    }
}

// Usage
loadSession('/data/sessions/session-001.json')
    .then(data => {
        if (data) {
            initViewer(data);
        }
    });

Filtering Implementation

Basic Filter Functions

// Filter by tool name
function filterByToolName(toolCalls, toolName) {
    return toolCalls.filter(call => 
        call.tool_name.toLowerCase().includes(toolName.toLowerCase())
    );
}

// Filter by status
function filterByStatus(toolCalls, status) {
    return toolCalls.filter(call => 
        call.result.status === status
    );
}

// Filter by time range
function filterByTimeRange(toolCalls, startTime, endTime) {
    const start = new Date(startTime);
    const end = new Date(endTime);
    return toolCalls.filter(call => {
        const callTime = new Date(call.timestamp);
        return callTime >= start && callTime <= end;
    });
}

// Combined filter
function applyFilters(toolCalls, filters) {
    let filtered = toolCalls;
    
    if (filters.toolName) {
        filtered = filterByToolName(filtered, filters.toolName);
    }
    
    if (filters.status) {
        filtered = filterByStatus(filtered, filters.status);
    }
    
    if (filters.startTime && filters.endTime) {
        filtered = filterByTimeRange(filtered, filters.startTime, filters.endTime);
    }
    
    return filtered;
}

Interactive Filter UI

<div id="filters">
    <input type="text" id="toolNameFilter" placeholder="Filter by tool name">
    <select id="statusFilter">
        <option value="">All Statuses</option>
        <option value="success">Success</option>
        <option value="error">Error</option>
        <option value="pending">Pending</option>
    </select>
    <input type="datetime-local" id="startTime">
    <input type="datetime-local" id="endTime">
    <button id="applyFilters">Apply Filters</button>
    <button id="clearFilters">Clear Filters</button>
</div>

<script>
document.getElementById('applyFilters').addEventListener('click', () => {
    const filters = {
        toolName: document.getElementById('toolNameFilter').value,
        status: document.getElementById('statusFilter').value,
        startTime: document.getElementById('startTime').value,
        endTime: document.getElementById('endTime').value
    };
    
    const filtered = applyFilters(sessionData.tool_calls, filters);
    renderToolCalls(filtered);
});

document.getElementById('clearFilters').addEventListener('click', () => {
    document.getElementById('toolNameFilter').value = '';
    document.getElementById('statusFilter').value = '';
    document.getElementById('startTime').value = '';
    document.getElementById('endTime').value = '';
    renderToolCalls(sessionData.tool_calls);
});
</script>

Rendering Tool Calls

Complete Rendering Function

function renderToolCalls(toolCalls) {
    const viewer = document.getElementById('viewer');
    viewer.innerHTML = '';
    
    if (toolCalls.length === 0) {
        viewer.innerHTML = '<p>No tool calls found.</p>';
        return;
    }
    
    toolCalls.forEach(call => {
        const callDiv = document.createElement('div');
        callDiv.className = `tool-call ${call.result.status}`;
        
        callDiv.innerHTML = `
            <div class="tool-call-header">
                <span class="tool-name">${call.tool_name}</span>
                <span class="status-badge ${call.result.status}">${call.result.status}</span>
            </div>
            <div class="tool-call-meta">
                <span class="call-id">ID: ${call.id}</span>
                <span class="timestamp">${formatTimestamp(call.timestamp)}</span>
            </div>
            <details>
                <summary>Parameters</summary>
                <pre>${JSON.stringify(call.parameters, null, 2)}</pre>
            </details>
            <details>
                <summary>Result</summary>
                <pre>${JSON.stringify(call.result, null, 2)}</pre>
            </details>
        `;
        
        viewer.appendChild(callDiv);
    });
}

function formatTimestamp(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleString();
}

CSS Styling Example

.tool-call {
    border: 1px solid #ddd;
    margin: 10px 0;
    padding: 15px;
    border-radius: 5px;
    background: #fff;
}

.tool-call.success {
    border-left: 4px solid #28a745;
}

.tool-call.error {
    border-left: 4px solid #dc3545;
}

.tool-call.pending {
    border-left: 4px solid #ffc107;
}

.tool-call-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.tool-name {
    font-weight: bold;
    font-size: 1.1em;
}

.status-badge {
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.85em;
    text-transform: uppercase;
}

.status-badge.success {
    background: #28a745;
    color: white;
}

.status-badge.error {
    background: #dc3545;
    color: white;
}

.tool-call-meta {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 10px;
}

details {
    margin-top: 10px;
}

pre {
    background: #f5f5f5;
    padding: 10px;
    border-radius: 3px;
    overflow-x: auto;
}

Common Usage Patterns

Pattern 1: Local Development Server

# Quick local server for development
cd openclaw-tool-call-viewer-2026
python3 -m http.server 8080

# Access at http://localhost:8080
# Place session JSON files in /data directory

Pattern 2: Network-Wide Deployment

# Deploy to internal network server
scp -r openclaw-tool-call-viewer-2026 user@internal-server:/var/www/html/openclaw-viewer

# Configure server to listen on internal IP
# Access at http://192.168.1.100:8080

Pattern 3: Docker Deployment

FROM nginx:alpine
COPY . /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

# Build and run
docker build -t openclaw-viewer .
docker run -d -p 8080:80 openclaw-viewer

Pattern 4: Session Export Integration

// Export OpenClaw session to viewer format
function exportSessionForViewer(openclawSession) {
    const viewerFormat = {
        session_id: openclawSession.id,
        timestamp: openclawSession.created_at,
        tool_calls: openclawSession.events
            .filter(event => event.type === 'tool_call')
            .map(event => ({
                id: event.id,
                timestamp: event.timestamp,
                tool_name: event.tool,
                parameters: event.input,
                result: {
                    status: event.status,
                    output: event.output,
                    error: event.error
                }
            }))
    };
    
    return JSON.stringify(viewerFormat, null, 2);
}

// Save to file for viewer
const fs = require('fs');
const sessionJson = exportSessionForViewer(openclawSession);
fs.writeFileSync('./viewer-data/session-001.json', sessionJson);

Configuration Examples

Environment-Based Data Path

// Configure data source via environment or config
const config = {
    dataPath: process.env.OPENCLAW_DATA_PATH || '/data/sessions',
    apiEndpoint: process.env.OPENCLAW_API_ENDPOINT || null,
    refreshInterval: parseInt(process.env.REFRESH_INTERVAL) || 30000
};

// Load session from configured source
async function loadSessionData(sessionId) {
    if (config.apiEndpoint) {
        return fetch(`${config.apiEndpoint}/sessions/${sessionId}`).then(r => r.json());
    } else {
        return fetch(`${config.dataPath}/${sessionId}.json`).then(r => r.json());
    }
}

Auto-Refresh Configuration

// Auto-refresh session data
let refreshTimer = null;

function enableAutoRefresh(sessionId, interval = 30000) {
    refreshTimer = setInterval(async () => {
        const data = await loadSessionData(sessionId);
        if (data) {
            updateViewer(data);
        }
    }, interval);
}

function disableAutoRefresh() {
    if (refreshTimer) {
        clearInterval(refreshTimer);
        refreshTimer = null;
    }
}

Troubleshooting

Issue: Page Doesn't Load

Check file serving:

# Verify files are accessible
ls -la openclaw-tool-call-viewer-2026/

# Test with simple server
cd openclaw-tool-call-viewer-2026
python3 -m http.server 8080

# Check in browser console for errors

Issue: Session Data Not Displaying

Verify data format:

// Validate JSON structure
function validateSessionData(data) {
    if (!data.tool_calls || !Array.isArray(data.tool_calls)) {
        console.error('Invalid session data: tool_calls must be an array');
        return false;
    }
    
    for (const call of data.tool_calls) {
        if (!call.id || !call.tool_name || !call.result) {
            console.error('Invalid tool call:', call);
            return false;
        }
    }
    
    return true;
}

// Use before rendering
if (validateSessionData(sessionData)) {
    renderToolCalls(sessionData.tool_calls);
}

Issue: Filters Not Working

Debug filter logic:

// Add logging to filters
function applyFiltersWithLogging(toolCalls, filters) {
    console.log('Original count:', toolCalls.length);
    console.log('Filters:', filters);
    
    let filtered = toolCalls;
    
    if (filters.toolName) {
        filtered = filterByToolName(filtered, filters.toolName);
        console.log('After tool name filter:', filtered.length);
    }
    
    if (filters.status) {
        filtered = filterByStatus(filtered, filters.status);
        console.log('After status filter:', filtered.length);
    }
    
    console.log('Final count:', filtered.length);
    return filtered;
}

Issue: CORS Errors

Enable CORS for local development:

// If fetching from different origin
const response = await fetch(sessionPath, {
    mode: 'cors',
    headers: {
        'Content-Type': 'application/json'
    }
});

Server-side CORS configuration (Node.js):

const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
});

app.use(express.static('openclaw-tool-call-viewer-2026'));
app.listen(8080);

Advanced Features

Search Across Sessions

// Search multiple session files
async function searchSessions(searchTerm) {
    const sessionFiles = ['session-001.json', 'session-002.json', 'session-003.json'];
    const results = [];
    
    for (const file of sessionFiles) {
        const data = await loadSession(`/data/${file}`);
        if (data) {
            const matches = data.tool_calls.filter(call =>
                JSON.stringify(call).toLowerCase().includes(searchTerm.toLowerCase())
            );
            
            if (matches.length > 0) {
                results.push({
                    session: data.session_id,
                    matches: matches
                });
            }
        }
    }
    
    return results;
}

Export Filtered Results

// Export filtered tool calls as JSON
function exportResults(toolCalls) {
    const dataStr = JSON.stringify(toolCalls, null, 2);
    const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
    
    const exportLink = document.createElement('a');
    exportLink.setAttribute('href', dataUri);
    exportLink.setAttribute('download', 'filtered-results.json');
    exportLink.click();
}

// Export as CSV
function exportAsCSV(toolCalls) {
    const headers = ['ID', 'Tool Name', 'Timestamp', 'Status'];
    const rows = toolCalls.map(call => [
        call.id,
        call.tool_name,
        call.timestamp,
        call.result.status
    ]);
    
    const csvContent = [
        headers.join(','),
        ...rows.map(row => row.join(','))
    ].join('\n');
    
    const dataUri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvContent);
    const exportLink = document.createElement('a');
    exportLink.setAttribute('href', dataUri);
    exportLink.setAttribute('download', 'filtered-results.csv');
    exportLink.click();
}

This skill provides comprehensive guidance for deploying, configuring, and using the OpenClaw Tool Call Viewer for session inspection and debugging workflows.