\n {getStatusIcon(step, isComplete)}\n {stepNumber}. {step.label}\n

\n \n {typeof step.response.body === \"object\" &&\n step.response.body !== null &&\n \"messageHtml\" in step.response.body\n ? raw(\n String(\n (step.response.body as { messageHtml: unknown }).messageHtml,\n ),\n )\n : typeof step.response.body === \"object\" &&\n step.response.body !== null &&\n \"message\" in step.response.body\n ? String((step.response.body as { message: unknown }).message)\n : JSON.stringify(step.response.body)}\n

\n \n );\n }\n\n // For HTTP requests, use details/summary for click-to-expand (like Inspector)\n return (\n

\n {getStatusIcon(step, isComplete)}\n \n {stepNumber}. {step.label}\n \n \n {step.response.status} {step.response.statusText}\n \n

\n\n

\n {/* Request */}\n

Request

\n {step.request.method}{\" \"}\n {step.request.url}\n

\n {Object.keys(step.request.headers).length > 0 && (\n

Headers:

\n                  {JSON.stringify(step.request.headers, null, 2)}\n

\n )}\n {step.request.body !== undefined && (\n

Body:

\n                  {typeof step.request.body === \"string\"\n                    ? step.request.body\n                    : JSON.stringify(step.request.body, null, 2)}\n

\n )}\n

\n\n {/* Response */}\n

Response

\n = 400\n ? \"text-red-600\"\n : \"text-green-600\"\n }`}\n >\n {step.response.status}\n {\" \"}\n {step.response.statusText}\n

\n {Object.keys(step.response.headers).length > 0 && (\n

Headers:

\n                  {JSON.stringify(step.response.headers, null, 2)}\n

\n )}\n {step.response.body !== undefined && (\n

Body:

\n                  {typeof step.response.body === \"string\"\n                    ? step.response.body\n                    : JSON.stringify(step.response.body, null, 2)}\n

\n )}\n

\n );\n}","deleted","label",[100],"permalink","https://www.val.town/x/tobinsouth/mcp-oauth-debugger/code/StepDisplay.tsx","extension","actionData","errors"]