spb/fetcha

1import { FileText } from "lucide-react";2import { EmptyState } from "@/components/ui/empty-state";3import { SectionTitle } from "@/components/ui/page-header";45function HeaderList({ headers }: { headers: Record<string, string> }) {6  const entries = Object.entries(headers).sort(([a], [b]) => a.localeCompare(b));7  return (8    <div className="overflow-hidden rounded-lg border border-border">9      <dl className="divide-y divide-border text-[12.5px]">10        {entries.map(([k, v]) => (11          <div key={k} className="grid grid-cols-[minmax(120px,32%)_1fr] gap-3 px-3 py-2">12            <dt className="truncate font-mono text-fg-muted" title={k}>13              {k}14            </dt>15            <dd className="break-all font-mono">{v}</dd>16          </div>17        ))}18      </dl>19    </div>20  );21}2223/** Stored (already redacted) request/response headers. Server component. */24export function HeadersTables({ request, response }: { request: Record<string, string> | null; response: Record<string, string> | null }) {25  const hasReq = request && Object.keys(request).length > 0;26  const hasRes = response && Object.keys(response).length > 0;27  if (!hasReq && !hasRes) {28    return <EmptyState compact icon={FileText} title="Headers not stored" description={<>Headers are kept only when the project log level is <code className="font-mono">headers</code> or <code className="font-mono">full</code>. Sensitive headers such as Authorization and Cookie are always redacted.</>} />;29  }30  return (31    <div className="grid gap-6 lg:grid-cols-2">32      <section>33        <SectionTitle right={<span className="text-[11.5px] text-fg-subtle">Authorization and Cookie redacted</span>}>Request headers</SectionTitle>34        {hasReq ? <HeaderList headers={request} /> : <p className="text-[13px] text-fg-muted">None stored.</p>}35      </section>36      <section>37        <SectionTitle>Response headers</SectionTitle>38        {hasRes ? <HeaderList headers={response} /> : <p className="text-[13px] text-fg-muted">None stored.</p>}39      </section>40    </div>41  );42}43