Function AttemptRow

frontend/dashboard/src/components/Explainer.tsx:319–367

({ attempt }: { attempt: TraceAttempt })

}

function AttemptRow({ attempt }: { attempt: TraceAttempt }) {
  return (
    <div className="rounded-compact border border-n-border px-4 py-4">
      <div className="flex items-start justify-between gap-3">
        <div>
          <div className="flex items-center gap-2">
            <span className={`h-1.5 w-1.5 rounded-full ${attempt.success ? "bg-n-success" : attempt.blocked ? "bg-n-warning" : "bg-n-accent"}`} />
            <span className="font-mono text-[12px] uppercase tracking-[0.08em] text-n-secondary">
              Attempt {attempt.attempt_index}
            </span>
          </div>
          <div className="mt-2 font-mono text-[15px] text-n-display">
            {shortModel(attempt.selected_model)}
          </div>
          <div className="mt-1 font-mono text-[11px] text-n-secondary">
            {prettyTransport(attempt.requested_transport || attempt.transport)} → {prettyTransport(attempt.transport)}
          </div>
        </div>

        <div className="text-right">
          <div className="font-mono text-[12px] text-n-secondary">
            {attempt.provider_name || "gateway"}
          </div>
          <div className={`mt-1 font-mono text-[11px] ${attempt.success ? "text-n-success" : "text-n-accent"}`}>
            {attempt.blocked ? "BLOCKED" : attempt.success ? "SUCCESS" : `HTTP ${attempt.status_code || "—"}`}
          </div>
        </div>
      </div>

      {attempt.transport_reason ? (
        <div className="mt-3 text-[13px] text-n-primary">
          {attempt.transport_reason}
        </div>
      ) : null}

      <div className="mt-3 flex items-center justify-between gap-3 font-mono text-[11px] text-n-secondary">
        <span className="truncate">{attempt.target_url || "no target url recorded"}</span>
        <span>{attempt.transport_preference_source ? prettifySource(attempt.transport_preference_source) : ""}</span>
      </div>

      {(attempt.error_code || attempt.error_message) ? (
        <div className="mt-3 font-mono text-[11px] text-n-accent">
          {attempt.error_code || "upstream_error"}
          {attempt.error_message ? ` · ${attempt.error_message}` : ""}
        </div>
      ) : null}
    </div>
  );
}

function TagGroup({ title, items }: { title: string; items: string[] }) {
  if (!items || items.length === 0) return null;