\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(String((step.response.body as { messageHtml: unknown }).messageHtml))\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 ? \"text-red-600\" : \"text-green-600\"}`}\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}\n","deleted","label",[175,157],"components","permalink","https://www.val.town/x/pcarleton/mcp-oauth-debugger/code/components/StepDisplay.tsx","extension","actionData","errors"]